/* ==========================================================================
   Author's custom styles
========================================================================== */
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 31, 2018 */
@font-face {
    font-family: 'latobold';
    src: url('../fonts/lato-bold-webfont.eot');
    src: url('../fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-bold-webfont.woff2') format('woff2'),
         url('../fonts/lato-bold-webfont.woff') format('woff'),
         url('../fonts/lato-bold-webfont.ttf') format('truetype'),
         url('../fonts/lato-bold-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latoregular';
    src: url('../fonts/lato-regular-webfont.eot');
    src: url('../fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-regular-webfont.woff2') format('woff2'),
         url('../fonts/lato-regular-webfont.woff') format('woff'),
         url('../fonts/lato-regular-webfont.ttf') format('truetype'),
         url('../fonts/lato-regular-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body{
	font-family: 'latoregular';
    font-weight: 400 !important;
    position: relative;
}
h1{
  font-family : "latobold";
  font-weight: 700 !important;
  font-size : 31px;
  letter-spacing : 1.21px;
  color : #7C7C7C;
  color : rgb(124, 124, 124);
  text-align: center;
  text-transform: uppercase;
  margin: 0 auto;
}
.row-centered{
    text-align: center;
}
.col-centered{
    float: none;
    display:inline-block;
    margin: 0 auto;
}
.margin-20{
    margin-top: 20px;
    margin-bottom: 20px;
}
.margin-bottom-20{
    margin-bottom: 20px;
}
.margin-bottom-40{
    margin-bottom: 40px;
}
.margin-bottom-50{
    margin-bottom: 50px;
}
.margin-50{
    margin-top: 50px;
    margin-bottom: 50px;
}
/******** INICIO **********/
.navbar-inverse{
    background: #008B40;
    border-color: #008B40;
    min-height: 70px;
    display: flex;
    align-items: center;
}
.navbar-inverse .navbar-nav>li>a{
    font-family : "latoregular";
    font-weight: 400 !important;
    font-size : 14px;
    color : #FFFFFF;
    color : rgb(255, 255, 255);
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus, 
.navbar-inverse .navbar-nav>.active>a:hover{
    font-family : "latobold";
    font-weight: 700 !important;
    font-size : 14px;
    color : #FFFFFF;
    color : rgb(255, 255, 255);
    background: none !important; 
}
.navbar-nav > li:hover:after, .navbar-nav > li.active:after {
    color: #ffffff;
    display: block;
    background-color: transparent;
}
.navbar-nav > li:after {
    left: 0;
    bottom: 0;
    width: 80%;
    height: 2px;
    content: '';
    display: none;
    position: absolute;
    background-color: #ffffff;
    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), #ffffff);
    background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), #ffffff);
    background-image: -ms-linear-gradient(0deg, rgba(255, 255, 255, 0), #ffffff);
    background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, 0), #ffffff);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff);
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{
    border-color: transparent;
}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: #FFAB40;
}
.navbar-inverse .navbar-toggle {
    border-color: #ffffff;
}
#inicio{
    height: 550px;
    background : -moz-linear-gradient(49.96% 103.89% 89.88deg,rgba(184, 173, 62, 1) 1.17%,rgba(0, 139, 64, 1) 86.03%);
    background : -webkit-linear-gradient(89.88deg, rgba(184, 173, 62, 1) 1.17%, rgba(0, 139, 64, 1) 86.03%);
    background : -webkit-gradient(linear,49.96% 103.89% ,50.04% -0.97% ,color-stop(0.0117,rgba(184, 173, 62, 1) ),color-stop(0.8603,rgba(0, 139, 64, 1) ));
    background : -o-linear-gradient(89.88deg, rgba(184, 173, 62, 1) 1.17%, rgba(0, 139, 64, 1) 86.03%);
    background : -ms-linear-gradient(89.88deg, rgba(184, 173, 62, 1) 1.17%, rgba(0, 139, 64, 1) 86.03%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#B8AD3E', endColorstr='#008B40' ,GradientType=0)";
    background : linear-gradient(0.12deg, rgba(184, 173, 62, 1) 1.17%, rgba(0, 139, 64, 1) 86.03%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B8AD3E',endColorstr='#008B40' , GradientType=1); 
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#descargar{
    padding-top:70px;
}
#caracteristicas{
    padding-top:70px;   
}
#contacto{
    padding-top:70px;  
}
.logo-margin{
    margin-top: 100px;
}
.inicio-container{
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 400px;
}
.inicio-container .telefono{
    width: 100%;
    max-width: 349px;
    position: absolute;
    top: -200px;
    bottom: 0;
    left: 0;
    right: 0;
}
.inicio-texto{
    margin-top: 100px;
    margin-bottom: 50px;
}
.inicio-texto p{
    font-family : "latoregular" !important;
    font-weight: 400 !important;
    font-size : 23px !important;
    color : #828282;
    color : rgb(130, 130, 130);
    text-align: justify !important;
}
/******** DESCARGA LA APP **********/
.descargar-container{
    background: #EAEAEA;
    background: rgba(234, 234, 234, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 354px;
}
.link-descarga{
    margin-top: 54px;
}
.link-descarga a{
    display: block;
    margin: 70px auto;
    transition: all 0.5s ease;
}
.link-descarga a:hover{
    opacity: 0.5;
}
/******** GALERIA **********/
.slider {
	width: 80%;
	margin: 20px auto;
}
.slick-slide {
    margin: 25px 20px;
}
.slick-slide img {
	width: 100%;
	transform: scale(0.9);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.slick-center img {
	transform: scale(1.1);
}
.slick-prev{
	width: 82px !important;
	height: 72px !important;
	left: -125px !important;
}
.slick-prev:hover,.slick-next:hover{
	opacity: .5;
	transition: all 0.5s ease-in-out;
}
.slick-next{
	width: 82px !important;
	height: 72px !important;
	right: -125px !important;
}
.slick-slide {
    transition: all .3s ease-in-out ;
}   

/********  CARACTERISTICAS DE LA APP **********/
.display-flex{
    display: flex !important;
    align-items: center !important;
}
#caracteristicas .descripcion{
   display: flex;
   align-items: center;
}
#caracteristicas .icono{
    display: inline;
    width: 100%;
    max-width: 77px;
    height: auto;
    max-height: 63px;
    margin-left: 10px;
    margin-right: 10px;
    opacity:0;
    transition: all 0.5s ease;
}
#caracteristicas p{
    font-family : "latoregular" !important;
    font-weight: 400 !important;
    font-size : 16px !important;
    color : #828282;
    color : rgb(130, 130, 130);
    display: inline;
    margin-left: 20px;
    margin-bottom: 0px;
}
#caracteristicas span{
    opacity: 1;
}
#linea1{
    top: 186px;
    left: -30px; 
    position: absolute;
    opacity: 0;
}
#linea2{
    top: 276px;
    left: -10px; 
    position: absolute;
    opacity: 0;
}
#linea3{
    top: 386px; 
    left: -30px; 
    position: absolute;
    opacity: 0;
}
#linea4{
    top: 178px; 
    right: -25px; 
    position: absolute;
    opacity: 0;
}
#linea5{
    top: 296px;
    right: -25px;
    position: absolute;
    opacity: 0;
}
#linea6{
    top: 396px; 
    right: -25px; 
    position: absolute;
    opacity: 0;
}
/******** CONTACTO **********/
.list-inline-footer{
    margin-bottom: 0px !important;
    padding: 0px !important;
}
.list-inline-footer-li{
    margin-right: 50px !important;
    padding: 0px !important;
}
.list-inline-footer li :hover{
    opacity: 0.5;
    transition: all 0.5s ease;
}
#contactForm .form-control{
    font-family : "latoregular";
    font-weight: 400 !important;
    font-size : 16px;
    color : #898989;
    color : rgb(137, 137, 137);
    width: 100%;
    height: 45px;
    outline: none;
    margin-bottom: 30px;
    background-color: #ffffff;
    border-radius: 0;
    box-shadow: none;
    appearance: none;
    border: 1px solid #777777;
}
#contactForm .form-control:hover, #contactForm .form-control:focus{
    border: 1px solid #2ecc71;
}
#contactForm textarea {
    width: 100%;
    resize: none;
    margin: 0 auto;
    padding: 15px 12px;
    height: 130px !important;
}
.boton-descargar{
    text-transform: uppercase;
    border: 4px solid #FFFFFF;
    font-family : "latobold";
    font-weight: 700 !important;
    font-size : 27px;
    color : #FFFFFF;
    color : rgb(255, 255, 255);
    background: transparent;
    border-radius: 0;
    transition: all 0.5s ease;
    -webkit-appearance: none;
    margin-top: 40px;
    text-align: center;
}
.boton-descargar:hover, .boton-descargar:focus{
    background: #FFAC32;
    color: #FFFFFF;
}
.boton{
    text-transform: uppercase;
    border: 3px solid #FFAC32;
    font-family : "latobold";
    font-weight: 700 !important;
    font-size : 27px;
    color : #828282;
    color : rgb(130, 130, 130);
    background: #FFFFFF;
    padding: 8px 42px;
    border-radius: 0;
    transition: all 0.5s ease;
    -webkit-appearance: none;
}
.modal-boton{
    text-transform: uppercase;
    border: 3px solid #FFAC32;
    font-family : "latoregular";
    font-weight: 400 !important;
    font-size : 17px;
    color : #828282;
    color : rgb(130, 130, 130);
    background: #FFFFFF;
    border-radius: 0;
    transition: all 0.5s ease;
    -webkit-appearance: none;
}
.boton:hover, .boton:focus,
.modal-boton:hover, .modal-boton:focus{
    background: #FFAC32;
    color: #FFFFFF;
}
.footer2{
    background: #000000;
    height: 30px;
    color: #FFFFFF;
}
.footer2 span{
    font-family: "latoregular";
    font-weight: 400 !important;
    font-size: 15px;
}
.linco{
    width: 41px;
    height: 15px;
    background-image: url("../imgs/varios/linco.png");
    background-repeat: no-repeat;
    display: inline-block;
    margin-top: 5px;
}
.footer-bg{
    background-image: url("../imgs/varios/footer-bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    height: 109px;
    display: flex;
    align-items: center;
}
.teal{
    background: teal;
}
.pink{
    background: pink;
}