html,body{
	margin: 0;
	padding: 0;
	position: relative;
  font-family: arial;
  height: 100%;
  background-color: #ffffff;
  font-size: 17px;
  line-height: 30px;
  font-family: Roboto, sans-serif;
}

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

p{
  font-size: 17px;

}


h1 {
    font-size: 35px;
    font-weight: 300;
    letter-spacing: 0px;
}

h2 {
    font-size: 26px;
    font-weight: 300;
    letter-spacing: 0px;
}

h3 {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0px;
}

h4 {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0px;
}



header{
	width: 100%;
	height: auto;
	float: left;
	z-index: 1000;
  position: fixed;
  background-color: #ffffff;
}


header #top{
  width: 100%;
  height: auto;
  position: relative;
  /*background-color: orange;*/
  margin: 0 auto;
  overflow: hidden;
 
}

header #top #logo{
  width: 230px;
  height: auto;
  position: relative;
  /*float: left;*/
  padding-top: .5em;
  margin: 0 auto;

}

header #top #logo img{
  width: 100%;
  height: auto;
}


header #top nav{
  /*width: auto;*/
  height: auto;
  position: relative;
  /*float: right;*/
  /*background-color: #B3B3B3;*/
  /*margin-right: 2em;*/
  margin: 0 auto;
  margin-top: 1em;
  margin-bottom: 1em;

}

header #top nav ul{
  width: 250px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
    /*display: none;*/
    /*background-color: darkred;*/
}

header #top nav li{
  text-align: center;
  /*border-bottom: 1px solid #f0f0f0;*/
  display: inline-block;
  padding-inline: 1em;
  color: #000;
  /*
  padding-top: 7px;
  padding-top: 7px;
  height: 2em;
  */
}

header #top nav li a{
  width: 100%;
  display: inline-block;
  line-height: 2.5em;
  color: #000000;
  text-decoration: none;
  font-size: 15px;
  padding-left: 10px;
  padding-right: 10px;
}

header #top nav li a:hover, header #top nav li a:active{
  background-color: #0b2347;
  color: #ffffff;
}




/*menu toogle*/

/*
.menu-toggle {
  position: absolute;
  padding: 0.8em;
  top: -2.5em;
  right: .5em;
  cursor: pointer;
  text-align: center;
  font-size: 13px;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background: #000000;
  height: 3px;
  width: 2.5em;
  border-radius: 3px;
  -webkit-transition: all ease-in-out 350ms;
  transition: all ease-in-out 350ms;
}

.hamburger::before {
  -webkit-transform: translateY(-7px);
          transform: translateY(-7px);
}

.hamburger::after {
  -webkit-transform: translateY(4px);
          transform: translateY(4px);
}

.open .hamburger {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.open .hamburger::before {
  display: none;
}

.open .hamburger::after {
  -webkit-transform: translateY(-1px) rotate(-95deg);
          transform: translateY(-1px) rotate(-95deg);
}

*/
/*fin menu toogle*/

/**home**/
#hero{
  width: 100%;
  height: 50%;
  position: relative;
  float: left;
  background-image: url(../images/implantes-dentales-san-borja.avif);
  background-repeat: no-repeat;
  background-size:cover; 
  z-index: 999;
  margin-top: 5em;
  overflow: hidden; 
}


#aviso{
  width: 100%;
  height: auto;
  position: relative;
  float: left;
  margin-top: 1.5em;
}

#aviso #advInfo{
  width: 80%;
  height: auto;
  position: relative;
  margin: 0 auto;
  text-align: center;
}

#aviso #advContactar{
  width: 80%;
  height: auto;
  position: relative;
  margin: 0 auto;
  
}

#aviso #advContactar{
  width: 80%;
  height: auto;
  margin-top: 1em;
}

#aviso #advContactar .btnSolicitar{
  margin: 0 auto;
}







/**seccion 1**/
#wrapMainSec1{
  width: 100%;
  height: auto;
  position: relative;
  float: left;
  z-index: 980;
  padding-top: 4em;
  padding-bottom: 4em;
}

#wrapMainSec1 #divContentSec1{
  width: 94%;
  max-width: 1500px;
  height: auto;
  position: relative;
  margin: 0 auto;
  margin-top: 2em;
  /*background-color: darkred;*/
}



#wrapMainSec1 #divContentSec1 #gridPdental{
  width: 100%;
  height: auto;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
  margin-top: 4em;
}

#wrapMainSec1 #divContentSec1 #gridPdental > div > h2{
   font-size: 36px;
   font-weight: 300;
  line-height: 40px;
  position: relative;
  color: #1E2D78;
}


#wrapMainSec1 #divContentSec1 #gridPdental > div{
  position: relative;
  float: left;
  width: 100%;
}

#wrapMainSec1 #divContentSec1 #gridPdental > div > img{
  position: relative;
  width: 100%;
  margin-top: 20px;
}

#wrapMainSec1 #divContentSec1 #gridPdental ul li{
 list-style-type: none;
 margin: 1em;

}

#wrapMainSec1 #divContentSec1 #gridPdental ul > li::before{
  content: "X";
  color: #8d0101;
  display: inline-block;
  width: 1.5em;
  margin-left: -1em;
}


/**fin secccion 1**/


/**seccion 2**/
#wrapSec2{
  width: 100%;
  height: auto;
  position: relative;
  float: left;
  padding-top: 4em;
  padding-bottom: 4em;
  background-color: #f7f7f7;
}


#wrapSec2 #divContentSec2{
    width: 94%;
    max-width: 1500px;
    height: auto;
    position: relative;
    margin: 0 auto;
    margin-top: 2em; 
}


#wrapSec2 #divContentSec2 #gridSection2{
    width: 100%;
    height: auto;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3em;
    /*margin-top: 4em;*/
}
#wrapSec2 #divContentSec2 #gridSection2 > div{
  width: 100%;
  position: relative;
  /*float: right;*/
}

#wrapSec2 #divContentSec2 #gridSection2 > div > h2{
    font-size: 36px;
    font-weight: 300;
    line-height: 40px;
    margin: 0px;
    margin-bottom: 50px;
    color: #1E2D78;
}


#wrapSec2 #divContentSec2 #gridSection2 > div > img{
  position: relative;
  width: 90%;
 margin: 0 auto;
}


/** Fin seccion 2**/


/** Seccion 3 **/

#wrapSec3{
  width: 100%;
  height: auto;
  position: relative;
  float: left;
  padding-top: 4em;
  padding-bottom: 4em;
}


#wrapSec3 #divContentSec3{
    width: 94%;
    max-width: 1500px;
    height: auto;
    position: relative;
    margin: 0 auto;
    margin-top: 2em; 
}



#wrapSec3 #divContentSec3 #gridSection3-1{
    width: 100%;
    height: auto;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3em;
}


#wrapSec3 #divContentSec3 #gridSection3-1 > div{
  position: relative;
  float: left;
  width: 100%;
}

#wrapSec3 #divContentSec3 #gridSection3-1 > div > img{
  position: relative;
  width: 100%;
}


/*
#wrapMainSec1 #divContentSec1 #gridPdental > div{
  position: relative;
  float: left;
}

#wrapMainSec1 #divContentSec1 #gridPdental > div > img{
  position: relative;
  width: 100%;
  margin-top: 20px;
  
}
*/



#wrapSec3 #divContentSec3 #gridSection3-1 h2{
    font-size: 36px;
    font-weight: 300;
    line-height: 40px;
    margin: 0px;
    margin-bottom: 35px;
    color: #1E2D78;
}

#wrapSec3 #divContentSec3 #gridSection3-1 > div > ul{
  list-style-type: none;
}

#wrapSec3 #divContentSec3 #gridSection3-1 > div > ul > li::before{
  content: "✔";
  /*color: #0b2347;*/
  display: inline-block;
  width: 1.5em;
  margin-left: -1em;
}



#wrapSec3 #divContentSec3 #gridSection3-2{
    width: 100%;
    height: auto;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
    margin-top: 6em;
}


#wrapSec3 #divContentSec3 #gridSection3-2 h2{
    font-size: 36px;
    font-weight: 300;
    line-height: 40px;
    margin: 0px;
    margin-bottom: 35px;
    color: #1E2D78;
}

#wrapSec3 #divContentSec3 #gridSection3-2 ul{
  list-style-type: none;
  /*margin: 1em;*/
}



#wrapSec3 #divContentSec3 #gridSection3-2 > div > ul > li::before{
  content: "✔";
  display: inline-block;
  width: 1.5em;
  margin-left: -1em;
}

#wrapSec3 #divContentSec3 #gridSection3-2 > div{
   position: relative;
  float: left;
  width: 100%;
}

#wrapSec3 #divContentSec3 #gridSection3-2 > div > img{
  position: relative;
  width: 100%;
}

/*Fin seccion 3*/



/*Seccion 4*/
#wrapSec4{
  width: 100%;
  height: auto;
  position: relative;
  float: left;
  padding-top: 4em;
  padding-bottom: 4em;
  background-color: #f7f7f7;
}

#wrapSec4 #divContentSec4{
    width: 94%;
    max-width: 1300px;
    height: auto;
    position: relative;
    margin: 0 auto;
    margin-top: 2em; 
}

#wrapSec4 #divContentSec4 h2{
    font-size: 36px;
    font-weight: 300;
    line-height: 40px;
    margin: 0px;
    margin-bottom: 35px;
    text-align: center;
    color: #1E2D78;
}

#wrapSec4 #divContentSec4 #gridSection4{
    width: 100%;
    height: auto;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 1.2em;
    /*margin-top: 4em;*/
   
}

#wrapSec4 #divContentSec4 #gridSection4 > div{
  width: 100%;
  position: relative;
  float: left;
}

#wrapSec4 #divContentSec4 #gridSection4 > div > h3{
   font-size: 23px;
  font-weight: 400;
}

/*Fin seccion 4*/



/*Seccion 5*/
#wrapSec5{
  width: 100%;
  height: auto;
  position: relative;
  float: left;
  padding-top: 4em;
  padding-bottom: 4em;
}

#wrapSec5 #divContentSec5{
    width: 94%;
    max-width: 1300px;
    height: auto;
    position: relative;
    margin: 0 auto;
    margin-top: 2em; 
}

#wrapSec5 #divContentSec5 h2{
    font-size: 36px;
    font-weight: 300;
    line-height: 40px;
    margin: 0px;
    margin-bottom: 35px;
    color: #1E2D78;
}

#wrapSec5 #divContentSec5 #gridSection5{
    width: 100%;
    height: auto;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3em;

}


#wrapSec5 #divContentSec5 #gridSection5 > div{
    width: 100%;
    position: relative;
    float: left;
}

#wrapSec5 #divContentSec5 #gridSection5 > div > img{
  width: 100%;
  position: relative;
  float: left;
}


/*Fin seccion 5*/

/*Seccion 6*/

#wrapSec6{
  width: 100%;
  height: auto;
  position: relative;
  float: left;
  background-color: #f7f7f7;
  padding-top: 4em;
  padding-bottom: 4em;
}

#wrapSec6 #divContentSec6{
    width: 94%;
    max-width: 1300px;
    height: auto;
    position: relative;
    margin: 0 auto;
    margin-top: 2em; 
}

#wrapSec6 #divContentSec6 h2{
    font-size: 36px;
    font-weight: 300;
    line-height: 40px;
    margin: 0px;
    margin-bottom: 35px;
    color: #1E2D78;
}

#wrapSec6 #divContentSec6 #gridSection6{
    width: 100%;
    height: auto;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3em;

}


#wrapSec6 #divContentSec6 #gridSection6 > div{
    width: 100%;
    position: relative;
    float: left;
}

#wrapSec6 #divContentSec6 #gridSection6 > div > img{
  width: 100%;
  position: relative;
  float: left;
}

/*Fin seccion 6*/


/*Sección 7*/

#wrapSec7{
  width: 100%;
  height: auto;
  position: relative;
  float: left;
  padding-top: 4em;
  padding-bottom: 4em;
}

#wrapSec7 #divContentSec7{
    width: 94%;
    max-width: 1300px;
    height: auto;
    position: relative;
    margin: 0 auto;
    margin-top: 2em; 
}

#wrapSec7 #divContentSec7 h2{
    font-size: 36px;
    font-weight: 300;
    line-height: 40px;
    margin: 0px;
    margin-bottom: 35px;
    color: #1E2D78;
}

#wrapSec7 #divContentSec7 #gridSection7{
    width: 100%;
    height: auto;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3em;

}


#wrapSec7 #divContentSec7 #gridSection7 > div{
    width: 100%;
    position: relative;
    float: left;
}

#wrapSec7 #divContentSec7 #gridSection7 > div > #divContactar{
  width: 90%;
  position: relative;
  float: right;
  background-color:lightgrey;
  border-radius: 1em;
}

#wrapSec7 #divContentSec7 #gridSection7 > div > #divContactar #frmContactar{
  width: 85%;
  position: relative;
 margin: 0 auto;
 padding-top: 2em;
 padding-bottom: 2em;


}

#wrapSec7 #divContentSec7 #gridSection7 > div > #divContactar #frmContactar input[type="text"]{
  width: 99%;
  height: 25px;
}

#wrapSec7 #divContentSec7 #gridSection7 > div > #divContactar #frmContactar input[type="email"]{
  width: 99%;
  height: 25px;
}

#wrapSec7 #divContentSec7 #gridSection7 > div > #divContactar #frmContactar textarea{
  width: 99%;
  height: 100%;
}

.btnContactar{
  width: 150px;
  background-color:#686868;
  text-align: center;
  padding: 5px;
  margin: 0 auto;
  color: #ffffff;
  cursor: pointer;
}

.btnSolicitar{
  width: 250px;
  background-color:#686868;
  text-align: center;
  padding: 5px;
  color: #ffffff;
  cursor: pointer;
}


/*Fin sección 7*/

/* Footer */

footer{
  width: 100%;
  float: left;
  background-color:#0b2347;
}

footer > p{
  text-align: center;
  color: #ffffff;
}
/* Fin footer */


/*https://dtdental.wpengine.com/home-page-4/*/




/*
Secciones
  Imagina
  por que deberias elegir implantes

  https://dtdental.wpenginepowered.com/about/about-model/

*/


/*
#wrapSec2 #divContentSec2 h2{
  text-align: center;
}
*/



/** fin seccion 2**/




.msgContact{
  width: 100%;
  position: relative;
  margin-top: 1em;
  margin-bottom: 1em;
  font-family: arial;
  color: #0C6F39;
  font-size: 13px;

}
/**fin contacto**/




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

  /*#wrapMainSec1 #divContentSec1{
      width: 98%;
  }*/

  #wrapMainSec1 #divContentSec1 #gridPdental{
      grid-template-columns: 1fr;
      /*grid-gap: 1em;*/
   }


   /*Seccion 2*/

   /*#wrapSec2 #divContentSec2{
      width: 98%;
   }*/


   #wrapSec2 #divContentSec2 #gridSection2{
      grid-template-columns: 1fr;
   }

   #wrapSec2 #divContentSec2 #gridSection2 #txtRecupera{
    order: 2;
   }

   #wrapSec2 #divContentSec2 #gridSection2 #imgRecupera{
    order: 1;
   }




   /*Seccion 3, 1*/
   #wrapSec3 #divContentSec3 #gridSection3-1{
      grid-template-columns: 1fr;
   }


   /*Seccion 3, 2*/
   #wrapSec3 #divContentSec3 #gridSection3-2{
      grid-template-columns: 1fr;
   }

   #wrapSec3 #divContentSec3 #gridSection3-2 #txtElegir{
    order: 2;
   }

   #wrapSec3 #divContentSec3 #gridSection3-2 #imgElegir{
    order: 1;
   }



   /*Seccion 4*/
   #wrapSec4 #divContentSec4 #gridSection4{
      grid-template-columns: 1fr;
   }

   /*Seccion 5*/
   #wrapSec5 #divContentSec5 #gridSection5{
      grid-template-columns: 1fr;
   }

   /*Seccion 6*/
   #wrapSec6 #divContentSec6 #gridSection6{
      grid-template-columns: 1fr;
   }

   #wrapSec6 #divContentSec6 #gridSection6 #txtSolucion{
    order: 2;
   }

   #wrapSec6 #divContentSec6 #gridSection6 #imgSolucion{
    order: 1;
   }


   /*Seccion 7*/

   #wrapSec7 #divContentSec7 #gridSection7{
      grid-template-columns: 1fr;
   }


   #wrapSec7 #divContentSec7 #gridSection7 > div > #divContactar{
    float: left;
    width: 98%;
   }

  

}


@media (min-width: 450px) and (max-width: 768px){

  #wrapMainSec1 #divContentSec1{
      width: 80%;
  }

  #wrapMainSec1 #divContentSec1 #gridPdental{
      grid-template-columns: 1fr;
      /*grid-gap: 1em;*/
  }


  /*Seccion 2*/
  #wrapSec2 #divContentSec2{
    width: 80%;
  }

   #wrapSec2 #divContentSec2 #gridSection2{
      grid-template-columns: 1fr;
   }


   #wrapSec2 #divContentSec2 #gridSection2 #txtRecupera{
    order: 2;
   }

   #wrapSec2 #divContentSec2 #gridSection2 #imgRecupera{
    order: 1;
   }




  /* Sec 3 */
  #wrapSec3 #divContentSec3{
    width: 80%;
  }

   #wrapSec3 #divContentSec3 #gridSection3-1{
      grid-template-columns: 1fr;
   }

   #wrapSec3 #divContentSec3 #gridSection3-2{
      grid-template-columns: 1fr;
   }

   #wrapSec3 #divContentSec3 #gridSection3-2 #txtElegir{
    order: 2;
   }

   #wrapSec3 #divContentSec3 #gridSection3-2 #imgElegir{
    order: 1;
   }




  /*Seccion 4*/
    #wrapSec4 #divContentSec4{
      width: 80%;
    }

   #wrapSec4 #divContentSec4 #gridSection4{
      grid-template-columns: 1fr;
   }

   /*Seccion 5*/
   #wrapSec5 #divContentSec5{
      width: 80%;
   }

   #wrapSec5 #divContentSec5 #gridSection5{
      grid-template-columns: 1fr;
   }

   /*Seccion 6*/
   #wrapSec6 #divContentSec6{
      width: 80%;
   }

   #wrapSec6 #divContentSec6 #gridSection6{
      grid-template-columns: 1fr;
   }

   #wrapSec6 #divContentSec6 #gridSection6 #txtSolucion{
    order: 2;
   }

   #wrapSec6 #divContentSec6 #gridSection6 #imgSolucion{
    order: 1;
   }


   /*Seccion 7*/
   #wrapSec7 #divContentSec7{
    width: 80%;
   }

   #wrapSec7 #divContentSec7 #gridSection7{
      grid-template-columns: 1fr;
   }


   #wrapSec7 #divContentSec7 #gridSection7 > div > #divContactar{
    float: left;
    width: 85%;
   }



}