::-webkit-input-placeholder {
  color: #777!important;
}
::-moz-placeholder { /* Firefox 19+ */
  color:  #777!important;
}
:-ms-input-placeholder {
  color:  #777!important;
}
:-moz-placeholder { /* Firefox 18- */
  color:  #777!important;
}

section {
	position: relative;
}

h1, h2 {font-family: 'Gotham', sans-serif;}

body {font-family: 'Gotham', sans-serif;}

label {color: #777;}

/*COLORES*/
.azul {color: #002250;}
.gris {color: #152341;}
.verde {color: #61b67e;}


.header {background: url(../img/header.jpg) 50% 0 no-repeat; background-size: 130%; position: relative; /*max-width: 1280px;*/ margin: auto; /*height: 960px;*/ }
.fono-top {font-size: 0.75em; font-weight: 600; border-radius: 50px; padding: 0 1em; border: 1px solid #0178CA; max-width: 250px;}
.fono-top a {color: #000;}
.fono-top a:hover {text-decoration: none;}
h1.titulo { text-transform: uppercase; font-size: 1.3em; line-height: 100%; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8); padding-bottom: 180px; }
h2.slogan {font-weight: 600; font-size: 1.2rem; padding-bottom: 80px; /*text-shadow: 3px 3px 6px #00000089;*/} 
h2.slogan-dos { font-size: 0.8em;  color: #fff;} 
h2.slogan span {font-weight: 900;}


	/*INFORMACIÓN PROTEGIDA*/
	.protegido { font-weight: bold; text-transform: uppercase; font-size: 0.9em; line-height: 150%;}
	.protegido span {font-size: 0.8em; display: block;}
	.protegido img {max-width: 100px;}
	.protegido b {display: block; font-size: 2.3em; }

    /*SERVICIOS*/
    .servicios { color: #193b5e; padding-top: 3em; }

    /*ICONOS*/
    .feature-item .fa-5x {font-size: 4em;}
    .feature-item:hover .icon-background-default {color: #f1d307;-webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;transform: scale(1.1);-webkit-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);
    }
       .icon-background-default {color: #f1d307;}
       .icon-background-default:hover {color: #193b5e;}
    
    .iconos {padding: 2em 0 0;}
    .iconos h2 {font-weight: bold; color: #193b5e;}
    .iconos h3 {font-weight: 600; color: #333; font-size: 0.9em; padding-top: 10px; text-transform: uppercase;}
    .iconos p {padding: 1em; color: #777; font-size: 0.9em;}

	/*NUESTRO COMPROMISO*/
    .caja-compromiso {background: rgba(10,44,78,1); padding: 2em 0;}
	.compromiso {padding-top: 2em; }
	.compromiso h2 {font-weight: 900; padding-bottom: 0.4em;}
	.compromiso .bajada {line-height: 120%; padding: 0 20px;}
	.compromiso h3 { font-weight: bold;}

	/*FORMULARIO*/
	.tit-formulario { font-size: 1em; display: none;}
	.tit-formulario span  {font-size: 1.3em;}
	.form-group {margin-bottom: 0.6em;}
	.enviar {font-size: 1em; font-weight: 900; letter-spacing: 1.5px; background: #193b5e; border-radius: 10px;}
    .form-control {color: #777!important;}

	/*wasap*/
	.whatsapp {
      position:fixed;
      width:60px;
      height:60px;
      bottom:120px;
      right:20px;
      background-color:#25d366;
      color:#FFF;
      border-radius:50px;
      text-align:center;
      font-size:30px;
      z-index:100;
    }

    .whatsapp-icon {
      margin-top:13px;
    }

    /************* CONTACTO *************/
    .contacto {
        padding: 30px 0 100px;
    }
    .campo {
        margin: 7px 0;
    }

    .campo input, .campo select  {
        margin: 0 0 5px 0;
        color: #333;
        width: 100%;
        padding: 5px 10px;
        background: #fff;
        border-radius: 5px;
        border: 1px solid #838383;
        moz-border-radius: 20px;
        webkit-border-radius: 20px;
        ms-border-radius: 20px;
        background-image: -webkit-gradient( linear,
        left top,
        left bottom,
        color-stop(0.25, #FFFFFF),
        color-stop(1, #EBEBEB));
        background-image: -o-linear-gradient(bottom, #FFFFFF 25%, #EBEBEB 100%);
        background-image: -moz-linear-gradient(bottom, #FFFFFF 25%, #EBEBEB 100%);
        background-image: -webkit-linear-gradient(bottom, #FFFFFF 25%, #EBEBEB 100%);
        background-image: -ms-linear-gradient(bottom, #FFFFFF 25%, #EBEBEB 100%);
        background-image: linear-gradient(to bottom, #FFFFFF 25%, #EBEBEB 100%);
    }

    input {
        outline: none;
        border: none;
    }

    textarea {
        width: 100%;
        height: 100%;
        border: none;
        background: none;
        resize: none;
        outline: none;

    }

    .textarea {
        background: #fff;
        color: #333;
        border: 1px solid #838383;
        border-radius: 10px;
        padding: 5px;
        margin: 0 0 10px 0;
        background-image: -webkit-gradient( linear,
        left top,
        left bottom,
        color-stop(0.25, #FFFFFF),
        color-stop(1, #EBEBEB));
        background-image: -o-linear-gradient(bottom, #FFFFFF 25%, #EBEBEB 100%);
        background-image: -moz-linear-gradient(bottom, #FFFFFF 25%, #EBEBEB 100%);
        background-image: -webkit-linear-gradient(bottom, #FFFFFF 25%, #EBEBEB 100%);
        background-image: -ms-linear-gradient(bottom, #FFFFFF 25%, #EBEBEB 100%);
        background-image: linear-gradient(to bottom, #FFFFFF 25%, #EBEBEB 100%);
    }

    .enviar {
        cursor: pointer;
        color: #fff;
        width: 100px;
        /*height: 30px;*/
        /*background: url(../img/enviar.png) no-repeat;*/
        font-size: 16px;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    .enviar:hover {
        background: #193b5e;
    }


	/*FOOTER*/
	.footer	{ background: #193b5e; padding: 2em;}
	.footer	span { color: #FFF; letter-spacing: -1.17px;  text-shadow: 3px 3px 6px #00000029; display: block;}
	.footer span a {color: #FFF; letter-spacing: 0.5px;}

    /*LOGO*/
    .logo {position: relative; left: -6px;}

    /*BOTON FONOS*/
    .fonos {border-radius: 50px; background: #343133; margin-bottom: 30px; border:none;}
    .fonos a {display: inline-block; padding: 0 10px; color:#fff; text-decoration: none; font-size: 1em; font-weight: bold;}
    .fonos a:hover {color:#f1d307;}


@media (min-width: 768px) and (max-width: 991px) {
    /* Show 4th slide on md if col-md-4*/
    .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
    .
}
@media (min-width: 576px) and (max-width: 768px) {
    /* Show 3rd slide on sm if col-sm-6*/
    .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}
@media (min-width: 576px) {
    .carousel-item {
        margin-right: 0;
    }
    /* show 2 items */
    .carousel-inner .active + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* farthest right hidden item must be also positioned for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/* MD */
@media (min-width: 768px) {
    /* show 3rd of 3 item slide */
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
    .fonos {border-radius: 50px; background: #343133; margin-top: 30px; padding: 1em;}
    .fonos a {font-size: 1.3em;}
}
/* LG */
@media (min-width: 991px) {
    /* show 4th item */
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    /* Show 5th slide on lg if col-lg-3 */
    .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}

@media (min-width: 375px) {
	h1.titulo {font-size: 1.4em; padding-bottom: 160px;}

} 

@media (min-width: 425px) {
	h1.titulo {font-size: 1.6em; padding-bottom: 50px;}
	h2.slogan {padding-bottom: 130px;}
} 

@media (min-width: 576px) { 


	.header {background-position: 20% top;}
		
 }


@media (min-width: 768px) { 

	.header {background-size: 100%; height: 800px;}
	.fono-top {font-size: 1em;} 
     .logo {padding-bottom: 50px!important;}
	h1.titulo {font-size: 1.8em; padding-bottom: 30px;}
	h2.slogan {font-size: 1.8em; padding-bottom: 120px;}
    h2.slogan-dos {font-size: 1.2em; color: #fff; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8)}
	
	.compromiso .col-sm-3 {padding: 0;}

	.compromiso .bajada {font-size: 1.8em; max-width: 540px;}

	.compromiso .icono {max-width: 70px;}
	.compromiso .icono-2 {max-width: 66px;}
	.compromiso .icono-3, .compromiso .icono-4  {max-width: 69px;}

    .footer .fono a{color: #fff;}


	/*FORMULARIO*/
	.tit-formulario {font-size: 1.5em; color: #fff; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8); display: block;}




 }


@media (min-width: 992px) { 

	label {color: #fff!important; text-shadow: 1px 1px 1px #00000089;}
	h1.titulo {font-size: 2.4em; padding-bottom: 10px;}
	h2.slogan {font-size: 2em; padding-bottom: 10px;}


	.protegido {position: absolute; z-index: 1; right: 5%; top: -23%;}
    
    
    /*FORMULARIO*/

	.enviar {width: 60%!important; margin: 0; font-size: 1.2em;}



 }


@media (min-width: 1200px) { 
     .logo {padding-bottom: 90px!important;}

	h1.titulo {font-size: 3em; padding-bottom: 10px;}
	h2.slogan {font-size: 2em; padding-bottom: 20px;}

	.protegido {right: 15%;}

 }

 @media (min-width: 1400px) {
	
	.protegido {right: 10%; top: -11%;}
 
 }

  @media (min-width: 1920px) {
    .logo {padding-bottom: 140px!important;}
	.header {height: 960px;}
	.protegido {top: -5%;}
    h1.titulo {padding-bottom: 20px;}
   

 }
