/* style by wddigital.us */



body{

	background-color:white;

	color:white;

	font-family:open sans;

}



h1,h2,h3,h4{

  font-size: 25px;

  font-weight:600;

  color: var(--linktext);

}



blockquote{

  width:90%;

  font-style: italic;

  line-height: 1.6;

  margin:0 auto;

}



a{
  
  color:var(--linktext);
}



::placeholder{

  color:#ccc;

}



.allisall{

  display:grid;

  grid-template-columns: 100%;

  /*grid-template-rows: 1fr 1fr 1fr 1fr; no es necesario a menos que rse requiera widths especificos*/

  grid-template-areas: 

  " header "

  "search"

  " main "

  "social"

  " footer ";

  grid-gap:10px;

  overflow:hidden;

  

}








header{



  grid-area: header;

  background-color:var(--darktext);

  padding:20px 85px;

  display:grid;

  grid-template-columns: 10% 90%;

  grid-template-areas: 

  " logo nav ";

  grid-template-rows: 80px;

  grid-gap:5px;

  position:relative;



}



.logo{

  grid-area: logo;

  background:;

  z-index: 2;

}



.logo img{

  height:100%;

}



.logo p{

  grid-area: logo;

  background:orange !important;



}



nav{

  grid-area: nav;

  padding-right:5px;

  line-height: 80px;

  text-align:right;



}



nav ul li{

  list-style: none;

  display:inline-block;





}



nav ul li:hover{

  list-style: none;

  display:inline-block;





}



nav a{

  font-weight: 600;

  color:white;

  transition: all ease-out 0.2s;

  font-size: 18px;

  margin-left:30px;

  border-bottom:1px solid var(--darktext);

}

nav a:hover{

  color:white;

  border-bottom:2px solid white;

  

}






.chatus{

  position:fixed;

  bottom:100px;

  right:7px;

  width:70px;

  height:100px;

  background:transparent;

  z-index: 200;

  color:green;

  font-size:10px;

  font-weight:600;

  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;

  overflow:hidden;

  text-align: center;

}



.chatus img{

  margin:0 auto;

  width:80%;

  margin-top: 5px;

}



.search form input{

  padding:5px;

  border-radius:2px;

  height:25px;

  width:200px;

  font-family: open sans;

  font-size:16px;

  box-shadow: 1px 1px 2px gray;

}



.search form button{

  

  border-radius:2px;

  height:25px;

  width:30px;

  font-family: open sans;

  font-weight:600;

  background:var(--darktext);

  color:white;

  font-size:16px;

  margin-bottom: 0px;

  box-shadow: 1px 1px 2px gray;

  cursor:pointer;

}

.videobook{
width: 100%;
height:500px;
background: green;
color:white;
margin-top:-15px;
overflow:hidden !important;
position:relative;

}

.bookbutton{
z-index: 20;
position:relative;
top:180px;

width:200px;
margin:0px auto;
border:5px solid white;
font-size: 25px;
font-weight:600;
background-color: transparent;
padding:15px;
}

.bookbutton a{
  color:white;
}





main{



  grid-area: main;

  display:grid;

  background-color:transparent;

  padding:70px 120px;

  grid-template-columns: 1fr 1fr;

  grid-template-areas: 

  
  "intro sidebar";

  grid-gap:50px;

  color:#666;

   margin-bottom: 50px;

}



.imgmain{
  width:31%;
  border:2px solid var(--darktext);
  display:inline-block;

}

.imgmain2{
  width:100%;
  border:2px solid var(--darktext);
  display:inline-block;

}








.suscribe{

  grid-area: suscribe;

  background:#ebebeb !important;

  line-height: 2.6;

  text-align:center;

  padding:125px 5px 5px;

  /*position:relative;

  left:100px;*/

  position:relative;

  height:420px;

}



.suscribeheader{

  width: 100%;

  height:105px;

  position:absolute;

  top:0;

  left:0;

  background:var(--darktext);

  color:white;

  display:inline-block;

  line-height: 1.4;

  padding-top: 10px;



}



.suscribe h2{

  line-height: 1.6;

  margin-top:10px;

}



.suscribe form input{

  padding:5px;

  border-radius:2px;

  height:25px;

  width:60%;

  font-family: open sans;

  font-size:16px;

  box-shadow: 1px 1px 2px gray;

}




[type="date"] {
  background:#fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  97% 50% no-repeat ;
  color:green;
}
[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}




.suscribe form button{

  

  border-radius:2px;

  height:35px;

  width:60%;

  font-family: open sans;

  font-weight:600;

  background:var(--darktext);

  color:white;

  font-size:16px;

  margin-bottom: 30px;

  box-shadow: 1px 1px 2px gray;

  cursor:pointer;

}





.suscribe form button:hover{

  box-shadow: 2px 2px 3px gray;

}



.intro{

  grid-area: intro;

  background:white !important;

  text-align:justify;
  font-size:18px;
  padding:0px;

 

}



.intro p{

  text-align: justify;

}


/* Slide mouse */
.mouse
{
  position:relative;
  left:75px;
  z-index:2000;
  animation-name: slidemouse;
  animation-fill-mode: forwards;
  animation-duration:2s;
  animation-iteration-count:infinite;
  color:black;
  width:35px;
  height:35px;
  display:inline-block;
}


@keyframes slidemouse {
    0% {left:75px;}
  
    100% {left:-35px;}
}








.sidebar{

  grid-area: sidebar;

  background: white;

  padding:0px;

  

}



.sidebar h2{

  margin-top: 20px;

  text-align: center;

}



.intro h2{

  margin-top: 20px;

}


.socialm{


  margin-bottom: -10px;

  grid-area: social;

  background-color:gray;

  padding:0px 85px;

  height:50px;

  line-height: 50px;

  font-size:30px;
 
}

.socialm i{
  margin-left:30px;
  color:white;

}

.socialm i:hover{
  color:#ccc;
  
}


footer{



  grid-area: footer;

  background-color:var(--darktext);

  padding:0px 85px;

  height:100px;

  line-height: 100px;

  font-size:12px;

}











/* BLOG ESPECIAL */



.blogcuadro{

  display:grid;

  background-color:white;

  grid-template-columns: 1fr 1fr;

  grid-gap:30px;

  color:#666;

}





.entry{

  background:var(--darktext);

  position:relative;

  overflow: hidden;

}



.entry img{

  width:100%;

  filter:brightness(50%);

  transition: all ease-out 0.2s;

}



.entry img:hover{

  width:100%;

  filter:brightness(100%);

}



.entryheader{

background-color:;

text-align:justify;

padding:15px;

width:100%;

position:absolute;

top:0;

z-index:20;

color:white;

}





.entryheader h2{

line-height: 1.6;

color:white;

text-align:left;

margin-top: 0px;

text-shadow: 1px 1px gray;

}



.entrydesc{

background-color:transparent;

}



.entryfoot{

position:absolute;

width:100%;

height:100px;

bottom:0;

padding:15px;

font-size:12px;

background: rgba(255, 255, 255, 0.6);

margin-bottom:5px;

color:#333;

text-align:left;

}



.entryfoot a{

font-size:16px;

text-align:right;

}





/* CONTACT ESPECIAL */



.cform{

  margin:0px auto;

  width:80%;

  background:transparent;

  overflow:hidden;

  position:relative;

  padding-left: 1px;

}



.cform input{

  width:45%;

  float:left;

  padding:5px;

  border-radius:2px;

  height:25px;

  font-family: open sans;

  font-size:16px;

  box-shadow: 1px 1px 2px gray;

  margin-top: 15px;

  border:1px solid var(--darktext);


}



.cform input:nth-child(even){

  margin-left: 5%;

}





.cform textarea{

  width:95%;

  resize: none;

  height:135px;

  margin-top:15px;

  color:gray;

  font-family: open sans;

  font-size:16px;

  box-shadow: 1px 1px 2px gray;

  border-radius:2px;

  padding:5px;

  padding-bottom: 40px;

  border:1px solid var(--darktext);

}



.cform button{

  border-radius:2px;

  height:25px;

  width:70px;

  font-family: open sans;

  font-weight:600;

  background:var(--darktext);

  color:white;

  font-size:16px;

  margin-top: 5px;

  box-shadow: 1px 1px 2px gray;

  cursor:pointer;

  float:right;

  position:relative;

  right:35px;

  top:-35px;

}


/*AGENT AREA SPECIAL*/

.cform2{
  background:transparent;
}

.cform2 input{

  width:250px;

  padding:5px;

  border-radius:2px;

  height:25px;

  font-family: open sans;

  font-size:16px;

  box-shadow: 1px 1px 2px gray;

  margin-top: 15px;

  border:1px solid var(--darktext);

}

.cform2 button{

  border-radius:2px;

  padding:5px;

  font-family: open sans;

  font-weight:600;

  background:var(--darktext);

  color:white;

  font-size:16px;

  margin-top: 15px;

  box-shadow: 1px 1px 2px gray;

  cursor:pointer;

 
}


.cform2 textarea{

  width:250px;

  resize: none;

  height:100px;

  margin-top:15px;

  color:gray;

  font-family: open sans;

  font-size:16px;

  box-shadow: 1px 1px 2px gray;

  border-radius:2px;

  padding:7px;

  border:1px solid var(--darktext);

  

}



.cform2 select{

width:250px;

  padding:0px;

  border-radius:2px;

  height:25px;

  font-family: open sans;

  font-size:16px;

  box-shadow: 1px 1px 2px gray;

  margin-top: 15px;

  border:1px solid var(--darktext);

}

  

}




.stable{
  padding:10px;
  background:#ebebeb;
  font-size:18px;
  width:250px;
  margin-top: 10px;
}

.stable a{
  font-size:12px;
  
}





/* PROMO SPECIAL */







.innerprom{

  color:white;

  text-align:center;

  line-height: 1.3;

  }



.promoh{

position:absolute;

top:65px;

left:0;

width:100%;

}





.innerproprice{

  font-size: 45px;

  text-shadow: 2px 2px gray;

  animation-fill-mode: forwards;

  animation-timing-function:linear;

  animation-play-state: play;

  animation-name: grow;

  animation-duration: 5s;

  animation-iteration-count:infinite;

  }



@keyframes grow {

  0% {

    font-size: 45px;

  }

  47% {

    font-size: 45px;

  }

  50% {

    font-size: 65px;

  }

  53% {

    font-size: 45px;

  }



  56% {

    font-size: 65px;

  }

59% {

    font-size: 45px;

  }



  100% {

  font-size: 45px;

  }

 }



.promof{

position:absolute;

bottom:65px;

left:0;

width:100%;

}



.promof a{

color:white;

}



.promomes

{

  position:absolute;

  bottom:40px;

  right:70px;

  z-index:90;

  width:250px;

  height:250px;

  color:white;

  display: flex;

  justify-content: center;

  align-items: center; 

  text-align:center;

  /*line-height:250px;*/

  font-weight: 600;

  border-radius:50%;

  background-color:var(--darktext);

  border: 5px solid white;

  animation-fill-mode: forwards;

  animation-timing-function:linear;

  animation-play-state: play;

  animation-name: giro;

  animation-duration: 1s;

  animation-iteration-count:1;

  -ms-transform: rotate(0deg); 

  -webkit-transform: rotate(0deg); 

  transform: rotate(0deg);

}



@keyframes giro {

    0% {

    -ms-transform: rotate(0deg); 

    -webkit-transform: rotate(0deg); 

    transform: rotate(0deg);

    margin-right: -500px;

  }



  100% {

  -ms-transform: rotate(-360deg); 

  -webkit-transform: rotate(-360deg); 

  transform: rotate(-360deg);

  margin-right: 0px;

  }

 }

 



/* PHONES TABLETS MOBILE VERSION */



@media only screen and (max-width: 950px) {

  main{

  padding:0px 5px;

  grid-template-columns: 1fr;

  grid-template-areas: 

  "promo" 

  "intro" 

  "suscribe"

  "sidebar";

  grid-gap:5px;

  color:#666;

  margin-bottom: 50px;

  }



  header{



  grid-area: header;

  padding:20px 5px;

  display:grid;

  grid-template-columns: 100%;

  grid-template-areas: 

  " logo" "nav ";

  grid-template-rows: 65px;

  grid-gap:5px;

  



}





.logo img{

  height:60px;

  

}





nav{

  grid-area: nav;

  padding-right:5px;

  line-height: 1.6;

  text-align:left;

  margin-left: -5px;



}



nav a{

  font-size:13px;

  margin-left: 8px;



}



.promo{

  padding:15px;

  height:270px;

  margin-top: -15px;

  }



.promo h2{

  line-height: 1.3;

  font-size:16px;

  }



.promomes

{

  position:absolute;

  bottom:15px;

  right:20px;

  width:190px;

  height:190px;

}

  

.promoh{

position:absolute;

top:45px;

left:0;

width:100%;

font-size: 12px;

}



.promof{

position:absolute;

bottom:45px;

left:0;

width:100%;

font-size: 12px;

}





.intro{

  font-size:13px;
  text-align: left !important;
  padding:10px;
  
 

}

.intro p {
    text-align: left !important;
    
}

.blogcuadro{

  display:grid;

  background-color:white;

  grid-template-columns: 1fr;

  grid-gap:15px;

  color:#666;

}



.sidebar{

  display: none;

  

}





.intro h1{

  margin-top: 16px !important;

}



.intro h2{

  margin-top: 16px !important;

}



.socialm{


  grid-area: social;

  background-color:gray;

  padding:0px 5px;


  height:50px;

  line-height: 50px;

  font-size:30px;
 margin-bottom: 45px;
}

.socialm i{


  margin-left:30px;
}


footer{



  grid-area: footer;



  background-color:var(--darktext);

  padding:0px 5px;

  height:100px;

  line-height: 100px;

  font-size:10px;

  margin-bottom: 50px; 

  margin-top: -55px;

}




.institutos{

  display:grid;

  background-color:white;

  grid-template-columns: 1fr 100px;

  margin-bottom: 20px;

  grid-gap:5px;

  color:#666;



}



.description{



background-color:transparent;

text-align:left;

font-size:12px;

}



.logoinst{



background-color:transparent;

text-align: left;

margin-top: 20px;

}



.logoinst a{

color:green;

font-size: 10px;

text-align: left !important;

padding:5px;

}





.chatus{

  position:fixed;

  bottom:50px;

  right:0px;

  width:70px;

  height:100px;

  background:green;

  z-index: 200;

  color:white;

  font-size:10px;

  font-weight:600;

  text-shadow: 0px 0 white, 0 0px white, 0px 0 white, 0 -0px white;

  overflow:hidden;

  text-align: center;

  padding:5px;

}



.chatus img{

  margin:0 auto;

  width:80%;

  margin-top: 5px;

}











}