/*************Generales**************/

body,html{
  font-family: 'Montserrat', sans-serif;

}

html{
  font-family: 'Montserrat', sans-serif;
width:100%;
    height: auto;
 
}
.base{
  position: relative;
  float: left;
}
.w100{ width: 100%;}

.my45{ margin:45px 0px;}

.pull-right{ float: right !important;}
.centrar-vetical{
  display:inline-flex; align-items: center; justify-content: center;
}
.text-right{ text-align: right;}
.borde-naranja{
  border-bottom: 10px solid;
  border-image-slice: 1;
  border-width: 5px;
  border-image-source: linear-gradient(to left, #f8831f, #f8ad1f);
  padding:0px;
}
.borde-naranja-top{
  border-top: 10px solid;
  border-image-slice: 1;
  border-width: 5px;
  border-image-source: linear-gradient(to left, #f8831f, #f8ad1f);
  padding:0px;
}
.icono-user{
  margin:0px 10px;
  width:50px; 
  height:50px; 
}

.titulo-azul{
  color:#24659d; font-size:2.5em; margin-bottom:50px; letter-spacing: 0px;
  padding-left: 30px; margin-top: 30px;  font-weight: bold; text-align: right;
}
.titulo-azul>.subtitulo{font-weight: normal;
  font-size: 0.7em;
}
.btn-regresar-top{ position: absolute;
  top: 74px;
  right: 0px;
  width: 250px;
}

.btn-regresar-abajo{ position: absolute;
  bottom: 0px;
  right: 0px;
  width: 250px;
}


@media (max-width:1402px) and (min-width:576px){
  .align-items-propio-end{
    align-items: flex-end !important;
  }
}

@media (max-width:1200px){
  .titulo-azul{ font-size:2em; line-height: 1.5em; margin-top: 50px ;}
}

@media (max-width:800px){
  .centrar-vetical{
    display:inline; align-items: center; justify-content: center;
  }

  .order-xs{ display: inline-flex; }
  .order-xs-2{ order:2;}
  .order-xs-1{ order:1;}
}

@media (max-width:767px){

  .btn-regresar-top{ position: absolute;
    top: 62px;
    right: 0px;
    width: 250px;
  }

  .btn-regresar-abajo{ position: absolute;
    bottom: 0px;
    right: 0px;
    width: 250px;
  }


}

/******************fondos********************************/
.fondo{
  background: url('../img/fondo.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  /*min-height: 800px;*/
}
.fondo-home{
  background: url('../img/fondo1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  /*min-height: 800px;*/
}

.fondo-login{
  background: url('../img/fondo-login.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  /*min-height: 800px;*/
}

.fondo-modulo1{
  background: url('../img/fondo-modulo1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  /*min-height: 800px;*/
}

.fondo-modulo2{
  background: url('../img/fondo-modulo2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  /*min-height: 800px;*/
}


@media (max-width:800px){

  .fondo-home,.fondo-login{
    background: url('../img/fondo.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 800px;
  }

  
}
/******************Menu y footer********************************/
.boton-menu{
  transform: skewX(-25deg);
  -webkit-transform: skewX(-25deg);
  -moz-transform: skewX(-25deg);
  -ms-transform: skewX(-25deg);
  -o-transform: skewX(-25deg);

  color:#fff;
  font-size:1.5em;
 
  text-shadow: 0px 1px 5px #000; 
text-align: center; display:inline-flex; align-items: center; justify-content: center;
text-decoration: none; height:70px; width:20%;
background: rgb(36,101,157);
background: linear-gradient(90deg, rgba(36,101,157,0.5) 0%, rgba(36,101,157,0));
transition: all 0.5s ease;
}
.boton-menu:hover{
  color:#fff;
  font-size:1.5em;
  text-shadow: 0px 1px 5px #000; 
  background: rgb(248,131,31);
background: linear-gradient(0deg, rgba(248,131,31,1) 0%, rgba(253,187,45,1) 100%);
text-align: center; display:inline-flex; align-items: center; justify-content: center;
text-decoration: none; height:70px; width:20%; transition: all 0.5s ease;
}
.boton-menu > p,.boton-menu > li{transform: skewX(25deg); margin:0px;}

.navbar-toggler{ margin:10px;
  background: rgb(248,131,31);
background: linear-gradient(0deg, rgba(248,131,31,1) 0%, rgba(253,187,45,1) 100%);
}

footer{ 
  border-top: 10px solid;
  border-image-slice: 1;
  border-width: 5px;
  border-image-source: linear-gradient(to left, #f8831f, #f8ad1f);
  background:#fff; 
  position: relative; float: left ; width: 100%; padding:20px; font-size: 10px; color:#0068a7;
  display: inline-flex; align-items: center; justify-content: center;}

 

@media (max-width:1000px){
  .boton-menu,.boton-menu:hover{ font-size: 1em;}
}
@media (max-width:800px){

  .boton-menu,.boton-menu:hover{ width: 100%; transform: skewX(0deg); margin-bottom: 5px; font-size:1.3em;}
  .boton-menu > p,.boton-menu > li{transform: skewX(0deg);}
}


/******************Botones********************************/

.boton{

  position: relative; float: left;
  width:100%;
}
.boton > .bulet{
  background: url('../img/bullet.png');
  background-position:top left;
  background-repeat: no-repeat;
  background-size: 42px 87px;
position: relative; float: left;
height:87px; width: 42px; transition: all 0.5s ease;
}

.boton > .link{
  color:#0068a7; font-size: 1.5em; text-decoration: none;
  line-height: 1.3em;
background-repeat: no-repeat;
padding: 0px 20px; height:80px;
 width:80%;

}

.boton:hover > .bulet{
  background: url('../img/bullet-select.png'); transition: all 0.5s ease; 
}
.boton:hover > .link{
  color: #fff;
  text-shadow: 1px 1px 3px rgb(0 0 0 / 50%);

  border: 3px solid #aee7ff;
  height: 77px;
}
.boton.izquierdo{
  display:inline-flex; align-items: top; justify-content:flex-start;
}
.boton.izquierdo > .link{
  display:inline-flex; align-items: center; justify-content:flex-start;
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,1) 40%, rgba(255,255,255,0.1) 100%);
}
.boton.derecho{
  display:inline-flex; align-items: top; justify-content:flex-end;
}
.boton.derecho > .link{
  display:inline-flex; align-items: center; justify-content:flex-end; text-align: right;
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,0.1) 40%, rgba(255,255,255,1) 100%);
}

.boton.izquierdo:hover > .link{
  margin-left: -20px;
  background: rgb(248,131,31);
  background: linear-gradient(90deg, rgba(253,187,45,1) 0%, rgba(248,131,31,1) 100%);
}
.boton.derecho:hover > .link{
  margin-right: -20px;
  background: rgb(248,131,31);
  background: linear-gradient(90deg,rgba(248,131,31,1) 0%, rgba(253,187,45,1) 100% );
}
@media (max-width:1400px){
  .boton > .link{ font-size: 1.3em;}
}
@media (max-width:1200px){
  .boton > .link{ font-size: 1em;}
}
@media (max-width:800px){
  .boton > .link{ font-size: 1.3em;}
  .boton{ margin:10px 0px;}


  .boton.derecho{
    display:inline-flex; align-items: top; justify-content:flex-start;
  }
  .boton.derecho > .link{
    display:inline-flex; align-items: center; justify-content:flex-start;
    background: rgb(255,255,255);     text-align: left;
    background: linear-gradient(90deg, rgba(255,255,255,1) 40%, rgba(255,255,255,0.1) 100%);
  }
  .boton.derecho:hover > .link{
    margin-left: -20px;
    background: rgb(248,131,31);
    background: linear-gradient(90deg, rgba(253,187,45,1) 0%, rgba(248,131,31,1) 100%);
  }

}

/****************login / registro**************/
.modal-login{
  background: rgba(36,101,157,0.5);
  
  border: 1px solid #fff;
  width: 30%;
  position: relative;
  float: right;
  border-radius: 10px;
}
.titulo-modal{
  color:#fff; font-size:2em; margin-bottom:50px; letter-spacing: 5px;
  padding-left: 30px; margin-top: 30px; width:40%;
}

.input{
  background: url(../img/bullet.png);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 25px 50px;
  position: relative;
  float: left;
  height: auto;
  width: 100%;
  transition: all 0.5s ease;
}
.input > input,.input > input:active,.input > input:hover{
  background: #c2d3e4;
  border: 0px;
  outline: none;
  position: relative;
  float: left;
  width: 85%;
  margin-left: 30px;
  /* border-radius: 0px; */
  padding:  5px 15px;
  margin-bottom: 20px;
  height: 45px;

}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #7393c7;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #7393c7;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #7393c7;
}

.imagen-login{
  position: absolute;
    bottom: -40px;
    left: 0px;
    width: 35%;
}
button.btn,button.btn:hover,button.btn:active,a:focus,a:hover,a:active{ outline: none;}
@media (max-width:1260px){

  .imagen-login{ width:50%;}
}
@media (max-width:1200px){
  .modal-login{width:50%;}

}

@media (max-width:1000px){
  .modal-login{width:70%;}
  .imagen-login{width:60%; bottom:0px;}
}
@media (max-width:800px){
  .modal-login{width:100%;}
.imagen-login{ display:none;}
}

/*************contacto********************************/

.input2{
  background: url(../img/bullet.png);
  background-position: -8px top;
  background-repeat: no-repeat;
  background-size: 25px 108%;
  background-color: #24659d;
  position: relative;
  float: left;
  height: auto;
  width: 100%;
  transition: all 0.5s ease;
  padding: 10px 0px 10px 20px;
  margin-bottom: 10px;

}
.input2 > input,.input2 > input:active,.inpu2t > input:hover,.input2 > textarea,.input2 > textarea:active,.input2 > textarea:hover{
  background: transparent;
  border: 0px;
  outline: none;
  position: relative;
  float: left;
  margin-left: 0px;
  /* border-radius: 0px; */
  padding: 0px 10px;
  margin-bottom: 0px;
  /* height: 45px; */
  color: #fff;
}
.input2 > .icono-lapiz{
  position:absolute;
  bottom:5px;
  right:5px;
  width:30px;
}

/***********************modelo 1**********************************************/

#contMenu{
  width: 300px;
}
#Menu-scroll{
  height:400px;

  overflow-x: hidden;
  overflow-y: scroll ;

}
#Menu-scroll>div>.link{
position: relative;
float: left;
width: 100%;
padding: 10px;
padding-left: 20px;
margin-top:5px;
opacity: 0.5;
background:#24659d;
}
#Menu-scroll>div>.link>a{
  color:#fff; text-decoration: none;
  border-left: 5px solid #fff; padding-left: 10px; font-weight: bold;
}

#Menu-scroll>div>.link:hover{ opacity: 1;}
.btn-navegacion{

    color:#fff;
    font-size:1.5em;
  
    text-shadow: 0px 1px 5px #000; 
    background: rgb(248,131,31);
  background: linear-gradient(-90deg, rgba(248,131,31,1) 0%, rgba(253,187,45,1) 100%);
  
  text-decoration: none;  transition: all 0.5s ease;
  
position: relative; float: left;
  padding: 10px 20px 10px 10px;
  font-size: 20px;
  z-index: 2;

  display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90%;
}

.btn-navegacion.down{
  width:100%;
}

.btn-navegacion.up::after{
  content: " ";
    position: absolute;
    display: block;
    width: 20%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    background:  rgb(248,131,31);
    transform-origin: bottom left;
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
}

.btn-navegacion > i{
  font-size: 1.8em;
  margin-left: 30px;
  text-shadow: none;
}

.btn-navegacion.down > i{
  font-size: 1.8em;
  margin-left: 0px;
}

.barra-azul{
  background:rgba(36,101,157,0.7) ;
}

.pleca-titulo{
  color:#fff;
  font-size:1.5em;
  text-shadow: 0px 1px 5px #000; 
  background: rgb(248,131,31);
background: linear-gradient(90deg, rgba(248,131,31,1) 0%, rgba(253,187,45,1) 100%);
text-align: center; display:inline-flex; align-items: center; justify-content: center;
text-decoration: none; height:70px; width: 80%; transition: all 0.5s ease; float:right;

}
.pleca-titulo>p{ margin:0px; }
.pleca-titulo::before{
  content: " ";
    position: absolute;
    display: block;
    width: 20%;
    height: 100%;
    top: 0;
    left: -20%;
    z-index: -1;
    background:  rgb(248,131,31);
    transform-origin: bottom left;
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
}

.boton-detalle{
  background: #24659d;
  text-shadow: none;
  color:#fff;
  font-size:1.5em;
  padding: 10px 20px;
  text-align: center; float:lefT; width:100%; margin:10px 0px; 
text-decoration: none;  transition: all 0.5s ease; cursor: pointer; 
}
.boton-detalle:hover{
  
  text-shadow: 0px 1px 5px #000; 
  background: rgb(248,131,31);
background: linear-gradient(0deg, rgba(248,131,31,1) 0%, rgba(253,187,45,1) 100%);
transition: all 0.5s ease; 
}

@media (max-width: 992px){

  .boton-detalle{
    float:none; display: inline; font-size: 2em; margin: 10px;
  }

  #cont-boton-detalle{
    width: 100%;
    height: auto;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-bottom: 20px; 
  }

  #cont-boton-detalle>div{
    width: 1050px;
    text-align: left;
  }

}

/***********************modulo 2*************************************************/


.imagen-mareo{
  background: url(../img/mareo.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
  width: 500px;
  height: 600px;
  float: left;
  display: inline-flex;
  margin-left: -8%;
  z-index: 2;
  transition: all 0.5s ease; 
}

.imagen-vertigo{
  background: url(../img/vertigo.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
  width: 500px;
  height: 600px;
  float: left;
  display: inline-flex;
  margin-right: -8%;
  z-index: 2;
  transition: all 0.5s ease; 
}

.link-modulo2:hover > .imagen-mareo{
  background: url(../img/mareo-seleccionado.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
  transition: all 0.5s ease; 
}

.link-modulo2:hover > .imagen-vertigo{
  background: url(../img/vertigo-seleccionado.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
  transition: all 0.5s ease; 
}


.link-modulo2:hover > .boton > .bulet{
  background: url('../img/bullet-select.png'); transition: all 0.5s ease; 
}
.link-modulo2:hover > .boton > .link{
  color: #fff;
  text-shadow: 1px 1px 3px rgb(0 0 0 / 50%);

  border: 3px solid #aee7ff;
  height: 77px;
}

.link-modulo2:hover > .boton.izquierdo > .link{
  margin-left: -20px;
  background: rgb(248,131,31);
  background: linear-gradient(90deg, rgba(253,187,45,1) 0%, rgba(248,131,31,1) 100%);
}
.link-modulo2:hover > .boton.derecho > .link{
  margin-right: -20px;
  background: rgb(248,131,31);
  background: linear-gradient(90deg,rgba(248,131,31,1) 0%, rgba(253,187,45,1) 100% );
}

@media (max-width: 1200px){
  .imagen-vertigo,.imagen-mareo{width:300px; height: 400px;}
}

@media (max-width:800px){

  
  .link-modulo2 >.boton.derecho > .link{
    justify-content: flex-end;   text-align: right;
   
  }
  .link-modulo2 >.boton.derecho:hover > .link{
    margin-left: 0px;
  }
}