body { background-image: url(../img/body/45degreee_fabric.png);
	background-repeat: repeat;
    font-family: -apple-system,BlinkMacSystemFont,
    "Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

}


/*  ----- ---- CLASES GENERALES DE TODO EL DOCUMENTO--- -- - - */

/* ------- ----- ----- PADING  --- ---- --- --- */
.py-10{ padding-bottom: 10px; padding-top: 10px;}
.py-15{ padding-bottom: 15px; padding-top: 15px;}
.py-20{ padding-bottom: 20px; padding-top: 20px;}
.py-25{ padding-bottom: 25px; padding-top: 25px;}
.py-30{ padding-bottom: 30px; padding-top: 30px;}
.py-40{padding-bottom: 40px; padding-top: 40px;}
.py-50{padding-bottom: 50px; padding-top: 50px;}
.py-60{padding-bottom: 60px; padding-top: 60px;}
.py-70{padding-bottom: 70px; padding-top: 70px;}
.py-80{padding-bottom: 80px; padding-top: 80px;}
.py-90{padding-bottom: 90px; padding-top: 90px;}
.py-100{padding-bottom: 100px; padding-top: 100px;}

.px-10{ padding-left: 10px; padding-right: 10px;}
.px-15{ padding-left: 15px; padding-right: 15px;}
.px-20{ padding-left: 20px; padding-right: 20px;}
.px-30{ padding-left: 30px; padding-right: 30px;}
.px-40{ padding-left: 40px; padding-right: 40px;}
.px-50{ padding-left: 50px; padding-right: 50px;}
.px-60{ padding-left: 60px; padding-right: 60px;}
.px-70{ padding-left: 70px; padding-right: 70px;}
.px-80{ padding-left: 80px; padding-right: 80px;}
.px-90{ padding-left: 90px; padding-right: 90px;}
.px-100{ padding-left: 60px; padding-right: 100px;}

.pl-10 {padding-left: 10px;}
.pl-15 {padding-left: 15px;}
.pl-20 {padding-left: 20px;}
.pl-30 {padding-left: 30px;}
.pl-40 {padding-left: 40px;}
.pl-50 {padding-left: 50px;}
.pl-60 {padding-left: 60px;}
.pl-70 {padding-left: 70px;}
.pl-80 {padding-left: 80px;}
.pl-90 {padding-left: 90px;}
.pl-100 {padding-left: 100px;}

.pb-10  {padding-bottom: 10px;}
.pb-15  {padding-bottom: 15px;}
.pb-20  {padding-bottom: 20px;}
.pb-30  {padding-bottom: 30px;}
.pb-40  {padding-bottom: 40px;}
.pb-50  {padding-bottom: 50px;}
.pb-60  {padding-bottom: 60px;}
.pb-70  {padding-bottom: 70px;}
.pb-80  {padding-bottom: 80px;}
.pb-90  {padding-bottom: 90px;}
.pb-100 {padding-bottom: 100px;}

.pt-10  {padding-top: 10px;}
.pt-15  {padding-top: 15px;}
.pt-20  {padding-top: 20px;}
.pt-30  {padding-top: 30px;}
.pt-40  {padding-top: 40px;}
.pt-50  {padding-top: 50px;}
.pt-60  {padding-top: 60px;}
.pt-70  {padding-top: 70px;}
.pt-80  {padding-top: 80px;}
.pt-90  {padding-top: 90px;}
.pt-100 {padding-top: 100px;}

.pr-10  {padding-right: 10px;}
.pr-15  {padding-right: 15px;}
.pr-20  {padding-right: 20px;}
.pr-30  {padding-right: 30px;}
.pr-40  {padding-right: 40px;}
.pr-50  {padding-right: 50px;}
.pr-60  {padding-right: 60px;}
.pr-70  {padding-right: 70px;}
.pr-80  {padding-right: 80px;}
.pr-90  {padding-right: 90px;}
.pr-100 {padding-right: 100px;}

		     	/*MARGENES*/

.my-10{margin-top: 10px; margin-bottom: 10px;}
.my-15{margin-top: 15px; margin-bottom: 15px;}
.my-20{margin-top: 20px; margin-bottom: 20px;}
.my-30{margin-top: 30px; margin-bottom: 30px;}
.my-40{margin-top: 40px; margin-bottom: 40px;}
.my-50{margin-top: 50px; margin-bottom: 50px;}
.my-60{margin-top: 60px; margin-bottom: 60px;}
.my-70{margin-top: 70px; margin-bottom: 70px;}
.my-80{margin-top: 80px; margin-bottom: 80px;}
.my-90{margin-top: 90px; margin-bottom: 90px;}
.my-100{margin-top: 100px; margin-bottom: 100px;}

.mx-10{margin-left:  10px; margin-right: 10px;}
.mx-15{margin-left:  15px; margin-right: 15px;}
.mx-20{margin-left:  20px; margin-right: 20px;}
.mx-30{margin-left:  30px; margin-right: 30px;}
.mx-40{margin-left:  40px; margin-right: 40px;}
.mx-50{margin-left:  50px; margin-right: 50px;}
.mx-60{margin-left:  60px; margin-right: 60px;}
.mx-70{margin-left:  70px; margin-right: 70px;}
.mx-80{margin-left:  80px; margin-right: 80px;}
.mx-90{margin-left:  90px; margin-right: 90px;}
.mx-100{margin-left:  100px; margin-right: 100px;}

.ml-10 {margin-left: 10px;}
.ml-15 {margin-left: 15px;}
.ml-20 {margin-left: 20px;}
.ml-30 {margin-left: 30px;}
.ml-40 {margin-left: 40px;}
.ml-50 {margin-left: 50px;}
.ml-60 {margin-left: 60px;}
.ml-70 {margin-left: 70px;}
.ml-80 {margin-left: 80px;}
.ml-90 {margin-left: 90px;}
.ml-100 {margin-left: 100px;}

.mr-10 {margin-right: 10px;}
.mr-15 {margin-right: 15px;}
.mr-20 {margin-right: 20px;}
.mr-30 {margin-right: 30px;}
.mr-40 {margin-right: 40px;}
.mr-50 {margin-right: 50px;}
.mr-60 {margin-right: 60px;}
.mr-70 {margin-right: 70px;}
.mr-80 {margin-right: 80px;}
.mr-90 {margin-right: 90px;}
.mr-100 {margin-right: 100px;}

.mt-10 {margin-top: 10px;}
.mt-15 {margin-top: 15px;}
.mt-20 {margin-top: 20px;}
.mt-30 {margin-top: 30px;}
.mt-40 {margin-top: 40px;}
.mt-50 {margin-top: 50px;}
.mt-60 {margin-top: 60px;}
.mt-70 {margin-top: 70px;}
.mt-80 {margin-top: 80px;}
.mt-85 {margin-top: 85px;}
.mt-90 {margin-top: 90px;}
.mt-95 {margin-top: 95px;}
.mt-100 {margin-top: 100px;}
.mt-140 {margin-top: 140px;}

.mb-15  {margin-bottom: 15px;}
.mb-10  {margin-bottom: 10px;}
.mb-20  {margin-bottom: 20px;}
.mb-30  {margin-bottom: 30px;}
.mb-40  {margin-bottom: 40px;}
.mb-50  {margin-bottom: 50px;}
.mb-60  {margin-bottom: 60px;}
.mb-70  {margin-bottom: 70px;}
.mb-80  {margin-bottom: 80px;}
.mb-85  {margin-bottom: 85px;}
.mb-90  {margin-bottom: 90px;}
.mb-95  {margin-bottom: 95px;}
.mb-100 {margin-bottom: 100px;}

/*---------------------SOMBRAS-------------------*/
.sombra{box-shadow: 0px 1px 1px 0px rgba(0,0,0,.2);} 
.sombra-2{box-shadow: 3px 2px 2px 3px rgba(0,0,0,.2);}
.sombra-3{box-shadow: 7px 7px 7px 7px rgba(0,0,0,.5);}

/*---- --- --BORDES LINEAS--- -- -- - - - */

	.line-pt {border-bottom: dashed 1px  #CCC;}
	.line-pt-b {border-bottom: solid 1px  rgba(252, 252, 252, 0.5);}

    .bt-az {border-top: solid 5px  #0b5cf4;}

	.bor-g-1 {border: solid 2px;}
	.bor-g-2 {border: solid 4px;}
	.bor-g-3 {border: solid 6px;}
	.bor-g-4 {border: solid 8px;}
	.bor-g-5 {border: solid 10px;}
	.bor-g-6 {border: solid 12px;}
	.bor-g-7 {border: solid 13px;}
	.bor-g-8 {border: solid 14px;}
	.bor-g-9 {border: solid 15px;}
	.bor-g-10 {border: solid 16px;}

/* --- -- tamaños tipografias ---- */
.t-fte-8  {font-size: 8px;}
.t-fte-10 {font-size: 10px;}
.t-fte-12 {font-size: 12px;}
.t-fte-14 {font-size: 14px;}
.t-fte-16 {font-size: 16px;}
.t-fte-18 {font-size: 18px;}
.t-fte-20 {font-size: 20px;}
.t-fte-22 {font-size: 22px;}
.t-fte-24 {font-size: 24px;}
.t-fte-26 {font-size: 26px;}
.t-fte-28 {font-size: 28px;}
.t-fte-30 {font-size: 30px;}
.t-fte-40 {font-size: 40px;}
.t-fte-50 {font-size: 50px;}
.t-fte-60 {font-size: 60px;}
/* --- -- colores tipografias ---- */
.t-clr-gris {color:#6d6d6d;}
.t-clr-cete {color:#099efe;}
.t-clr-azul {color:#1176b6;}
.t-clr-rojo {color:#ff0000;}

.t-clr-trans {color: rgba(255,255,255,.7);}

.t-ab {
	font-variant: small-caps;
}
/* --- -- FONDOS COLORES ---- */
.bgc-azul {background: #1176b6;}
.bgc-azul2 {background: #1239f5;}
.bgc-cete {background: #2e3ada;}
.bgc-gris {background: #6d6d6d;}
.bgc-gris-c {background: #E8E8E8;}
.bgc-black {background: #050505;}

.bgc-azul-1 {background-color: rgb(3, 22, 51);}
.bgc-azul-2 {background-color: rgb(5, 44, 101);}
.bgc-azul-3 {background-color: rgb(8, 66, 152);}
.bgc-azul-4 {background-color: rgb(10, 88, 202);}
.bgc-azul-5 {background-color: rgb(13, 110, 253);}
.bgc-azul-6 {background-color: rgb(32, 85, 110);}
.bgc-azul-7 {background-color: rgb(148, 90, 90);}
.bgc-azul-8 {background-color: rgb(148, 90, 90);}
.bgc-azul-9 {background-color: rgb(148, 90, 90);}
.bgc-azul-10 {background-color: rgb(148, 90, 90);}
.bgc-azul-11 {background-color: rgba(13, 109, 253, 0.527);}



.bg-img-bk { background-image: url(../img/body/tweed-oscuro.png);
	background-repeat: repeat;}

.bg-img-gris { background-image: url(../img/body/tweed-hover-menu.png);
background-repeat: repeat;}

.bg-img-azul { background-image: url(../img/body/body\ azul\ oscuro.gif);
	background-repeat: repeat;}

.bg-img-wt { background-image: url(../img/body/body-2.gif);
background-repeat: repeat;}

.bg-img-gr { background-image: url(../img/body/body-3-gris.gif);
    background-repeat: repeat;}

.bg-img-trans { background-image: url(../img/body/body.gif);
	background-repeat: repeat;
opacity: 0.3;} 

.fondo-trans {background: rgba(247, 244, 244, 0.5);}

/* --- -- TAMAÑOS---- */
.alto-5  {height: 5px; max-height:5px; min-height:5px;}
.alto-10 {height: 10px; max-height:10px; min-height:10px;}
.alto-20 {height: 20px; max-height:20px; min-height:20px;}
.alto-25 {height: 25px; max-height:25px; min-height:25px;}
.alto-35 {height: 35px; max-height:35px; min-height:35px;}
.alto-40 {height: 40px; max-height:40px; min-height:40px;}
.alto-50 {height: 50px; max-height:50px; min-height:50px;}
.alto-55 {height: 55px; max-height:55px; min-height:55px;}
.alto-60 {height: 60px; max-height:60px; min-height:60px;}
.alto-70 {height: 70px; max-height:70px; min-height:70px;}
.alto-80 {height: 70px; min-height:80px; overflow: hidden;}
.alto-90 {height: 90px; max-height:90px; min-height:90px;}

/*  ----- ---- TERMINAN CLASES GENERALES DE TODO EL DOCUMENTO--- -- - - */



/*  ------- ---------Espesificos del documento------- -----------*/



.cont-jumbo {position: relative;}

.cont-card {position: absolute; 
			margin-top: -60px;}

.cont-card2 {position: absolute;
  			margin-top: 320px;}

/*  ------- ---------Espesificos del menu principal-- rgb(52, 152, 245);----- -----------*/

.gc-borde {
	border-bottom: solid 2px  rgba(25, 122, 143);
    border-top: solid 2px   rgba(25, 122, 143);
}

.gc-borde2 {
	border-bottom: solid 0.1px  rgb(216, 223, 223);	
	border-left: solid 0.1px rgb(216, 223, 223);
	border-right: solid 0.1px rgb(216, 223, 223);
}

div a i {
	color:rgba(25, 122, 143);
	font-size: 20px;
}

div a i.wm:hover { color:#2aa51a;}
div a i.wi:hover { color:#971032;}
div a i.wf:hover { color: #1c4ae2;}
div a i.wc:hover { color: #f5a904;}

/* div a i:hover {
	color: rgb(119, 116, 116);
} */

 nav.navbar div.collapse ul.navbar-nav li.nav-item a.nav-link {
    color:rgba(25, 122, 143);
    font-weight:600;
}
nav.navbar div.collapse ul.navbar-nav li.nav-item a.nav-link:hover {
    color:rgb(53, 63, 100);
}

nav.navbar div.collapse ul.navbar-nav li.nav-item ul.dropdown-menu li a {
    color:rgba(25, 122, 143);
    font-weight:600;
}

nav.navbar div.collapse ul.navbar-nav li.nav-item ul.dropdown-menu li a.dropdown-item:hover {
    color:rgb(53, 63, 100);
    font-weight:600;
  
    
}


nav.navbar div.collapse ul.navbar-nav li.nav-item ul.dropdown-menu li a.dropdown-item:hover {
    color:rgb(53, 63, 100);
    font-weight:600;
 
    
}




/*  ------- ---------Espesificos del menu principal------- -----------*/

.row div .row div a {
	color: rgb(108, 112, 112);
	text-decoration: none;
}
.row div .row div a:hover {
	color: rgb(2, 2, 2);
	text-decoration: none;	
}



/* STILOS DE COLORES ACORDION */

span a {
	color: #f0ebeb;
	text-decoration: none;
}

span a:hover {
	
	text-decoration: underline;
    color: #f0ebeb;
}

/* portafolio */

.portafolio {
    /* background: #ffffff; */
    /* border-top: 5px solid rgb(54, 152, 243); */
    padding: 0 20px;
	margin-top: 150px;
	margin-bottom: 30px;
}

.portafolio .titulo {
    padding: 20px 0;
    text-align: center;
    font-weight: 300;    
    color: rgb(54, 152, 243);
    /* font-family: 'Open sans' , 'sans serif'; */
    
}

.portafolio .galeria .contenedor-imagen {
    margin-bottom: 40px;
    max-height: 180px;
    overflow: hidden;
}

.portafolio .galeria .contenedor-imagen a {
    background: #3da5e2;
    display: block;
}

.portafolio .galeria .contenedor-imagen:hover img {
    opacity: 0.3;

}


.portafolio .modal-dialog {
    margin: 0px auto;
    height: 100%;
    max-width: 1000px;
}

.portafolio .modal-content {
    width: auto;
}


/* Dispositivo xl */
@media screen and (max-width:1199px) {}
/* Dispositivo lg */
@media screen and (max-width:991px) {
    .logo {
		height: 76px;
	}

	.menu {
		min-height: 76px;
	}

	.menu a {
		width: 100%;
	}

	.menu a div {
		width: 100%;
    }

	
    .modal .modal-dialog {max-width: 90%;}
    .modal .modal-dialog .modal-content img {
        width: 100%;
    }
    
}
/* Dispositivo md */
@media screen and (max-width:767px) {}
/* Dispositivo sm */
@media screen and (max-width:575px) {}


.btt {

	background:
	linear-gradient(135deg, #0b7df0 21px, #5a98f5 22px, #5a98f5 24px, transparent 24px, transparent 67px, #5a98f5 67px, #5a98f5 69px, transparent 69px),
	linear-gradient(225deg, #0b7df0 21px, #5a98f5 22px, #5a98f5 24px, transparent 24px, transparent 67px, #5a98f5 67px, #5a98f5 69px, transparent 69px)0 64px;
	background-color:#0b7df0;
	background-size: 64px 128px;

}


.atl {

	max-height: 100px;
	min-height: 100px;
}

/*  ------- ---------ELEMENTOS a VINCULOS ------- -----------*/

div .modal-body  .row  div  a img:hover {
	transition: transform 0.3s;
	-webkit-transition: transform 0.3s;
	-moz-transition: transform 0.3s;
	-ms-transition: transform 0.3s;
	-o-transition: transform 0.3s;
}

div .modal-body  .row  div  a img:hover {
	transform: scale(1.5);
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-ms-transform: scale(1.5);
	-o-transform: scale(1.5);
}

footer .container-fluid .row .col-auto img:hover {
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
}


/*=============================================
=            general contrator galeria            =
=============================================*/
header form {
	width: 100%;
	display: flex;
	justify-content:center;
	margin-bottom: 20px;
}
 

header .barra-busqueda {
    width: 70%;
    height: 40px;
    line-height: 40px;
    background: rgb(255, 255, 255);
    padding: 0 20px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border: rgb(223, 218, 218) 1px solid;
    text-align: center;
    font-size: 16px;
}

header .categorias {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

header .categorias a {
    color: #9b9b9b;
    margin: 10px 20px;
    font-size: 18px;
    font-weight: 700;

}

header .categorias a.activo {
    color: #000;
}


/*=============================================
=              LA GRID           =
=============================================*/

.grid {
    position: relative;
    width: 100%;
    opacity: 0;
    transition: 0.5s linear 1s;
    -webkit-transition: 0.5s linear 1s;
    -moz-transition: 0.5s linear 1s;
    -ms-transition: 0.5s linear 1s;
    -o-transition: 0.5s linear 1s;
}

.grid.imagenes-cargadas {
    opacity: 1;
}

.grid .item {
    position: absolute;
    display: block;
    padding: 0;
    margin: 10px;
    width: calc(33.33333333% - 20px);

}

.grid .item-contenido{
    position: relative;

}


.grid .item img {
    width: 100%;
    cursor: pointer;
    vertical-align: top;
  
}

.grid .item img:hover {
    opacity: 0.5;
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
}

/*=============================================
=                   OVERLAY           =
=============================================*/

.overlay {
    position: fixed;
    top: 85px;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0,0,0,.9);
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.overlay.activo {
    display: none;
}


/*=============================================
=            footer          =
=============================================*/
footer .contenedor-icono {
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 10px ;
    flex-wrap: wrap;
    
}


footer .contenedor-icono a {
    display: block;
    width: 30px;
    height: 30px;
    background: #000;
    color: #fff;
    margin: 2px;
    text-align: center;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    transition: .3s ease all;
    -webkit-transition: .3s ease all;
    -moz-transition: .3s ease all;
    -ms-transition: .3s ease all;
    -o-transition: .3s ease all;
}

footer .contenedor-icono .twitter { background: #1da1f2;}
footer .contenedor-icono .wasap { background: #109732;}
footer .contenedor-icono .face { background: #e60e0e;}
footer .contenedor-icono .contac { background: #f5a904;}

footer .contenedor-icono a i {
    font-size: 15px;
    line-height: 30px; 
    color: #fff; 
}

footer .contenedor-icono:hover a {
	animation: icono .5s ease;
	-webkit-animation: icono .5s ease;
}

.fot-color {
    background-image: url(../img/body/body-3-gris.gif);
    background-repeat: repeat;
    border-top: 3px solid rgb(54, 152, 243);
    border-bottom: 3px solid rgb(54, 152, 243);
}

.fot-color-2 {
    background-image: url(../img/body/body-2.gif);
    background-repeat: repeat;
    border-top: 3px solid rgba(25, 122, 143);
    border-bottom: 3px solid rgba(25, 122, 143);
}

/* termina footer */

/*=============================================
=            footer 2         =
=============================================*/
div.modal div.row .contenedor-icono {
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 10px ;
    flex-wrap: wrap;
    
}


div.modal div.row .contenedor-icono a {
    display: block;
    width: 30px;
    height: 30px;
    background: #000;
    color: #fff;
    margin: 2px;
    text-align: center;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    transition: .3s ease all;
    -webkit-transition: .3s ease all;
    -moz-transition: .3s ease all;
    -ms-transition: .3s ease all;
    -o-transition: .3s ease all;
}

div.modal div.row .contenedor-icono .twitter { background: #1da1f2;}
div.modal div.row .contenedor-icono .wasap { background: #109732;}
div.modal div.row .contenedor-icono .face { background: #e60e0e;}

div.modal div.row .contenedor-icono a i {
    font-size: 15px;
    line-height: 30px; 
    color: #fff; 
}

div.modal div.row .contenedor-icono:hover a {
	animation: icono .5s ease;
	-webkit-animation: icono .5s ease;
}

/*=========================== termina footer2 ========================================*/

@keyframes icono {
	from {
		transform: rotate3d(0,0,0,0);
	}
	to {
		transform: rotate3d(0,1,0, 360deg);
	}
}

footer .creado-por {
	padding: 0px;
    margin: 0px;
    margin-bottom: 40px;
	text-align: center;
	font-size: 14px;
	color: #c13584;
}

footer .creado-por p  {color: rgb(92, 90, 90);}
footer .creado-por p:hover {text-decoration: underline;}



/*=============================================
=            formulario contacto            =
=============================================*/

.row div form .form-group .input-group textarea {
	height: 60px;
	min-height: 50px;
	max-height: 90px;
}


/*=====  End of formulario contacto  ======*/

 .t-int {

    color: rgb(25, 122, 143);
}

.container .row .col-6 .row .col-auto p{
    color: rgba(25, 122, 143);
}



/* ------------------------- */
/* Mediaqueries */
/* ------------------------- */
@media screen and (max-width: 700px) {
	.grid .item {
		width: calc(50% - 20px);
	}

	header .barra-busqueda {
		width: 100%;
	}
}

@media screen and (max-width: 700px) {
	
    
    footer.btt div.container div.row div.log-pata  {
		background: #0ae0e0;
	}

/*=====  fin general contrator galeria  ======*/

/*=====  inicia galeria del video ======*/

.video-container
{
  position: absolute;
  z-index: -100;
  top:0;
  left:0;
  width: 100%;
  height:calc(100vw * 1); /*El alto se calcula*/
  overflow: hidden;   
}

.video-container video
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;  
}

/*=====  inicia galeria del video ======*/