/* Generated by less 2.2.0 */
/* LESS Document */
/* Clases generales */
.text-shadow {
  text-shadow: 0 0 3px #000;
}
.box-shadow {
  box-shadow: 0 0 3px #000;
}
.icon-2x {
  font-size: xx-large;
  position: relative;
  top: -10px;
  margin-right: 20px;
}
.color-azul {
  color: #00b2ca !important;
}
.color-verde {
  color: #9dd5bf !important;
}
.color-rosa {
  color: #f39bc3 !important;
}
.color-magenta {
  color: #f1646c !important;
}
.color-melon {
  color: #f9c174 !important;
}
.bg-azul {
  background-color: #00b2ca !important;
}
.bg-verde {
  background-color: #9dd5bf !important;
}
.bg-rosa {
  background-color: #f39bc3 !important;
}
.bg-magenta {
  background-color: #f1646c !important;
}
.bg-melon {
  background-color: #f9c174 !important;
}
.page-header {
  text-align: center;
  font-size: xx-large;
  margin-top: 100px;
}
.separador {
  background-size: cover;
  background-position: center;
  background-color: #f39bc3;
  padding: 15em 0;
  margin: 5em 0;
}
.separador h1,
.separador h2 {
  font-family: inherit;
  font-weight: bold;
  color: white;
  text-transform: uppercase;
  text-shadow: 0 0 3px #000;
}
@media only screen and (min-device-width: 900px) {
  .separador {
    background-attachment: fixed;
  }
}
/* Layout */
html body {
  font-size: 16px !important;
  line-height: 1.5em;
}
html h1,
html h2,
html h3 {
  color: #00b2ca;
  font-family: 'Just Another Hand', cursive;
}
html h1 {
  font-size: 3em;
}
html h2 {
  font-size: 2.5em;
}
html h3 {
  font-size: 2em;
}
html h4 {
  font-size: 1.75em;
}
html h5 {
  font-size: 1.5em;
}
html h6 {
  font-size: 1.25em;
}
/* SECCIONES */
/* Portada */
#portada .jumbotron {
  margin-top: -2em;
  background-image: url(../img/fotos/iplanet-12.jpg);
  background-size: cover;
  background-position: center top;
  padding: 4em 0;
}
#portada .jumbotron .logo {
  font-size: 12em !important;
  color: white !important;
  text-shadow: 0 0 3px #000;
}
#portada .jumbotron .recuadro {
  background: rgba(0, 0, 0, 0.75);
  color: white !important;
  padding: 20px 5px;
  margin-bottom: 2em;
  box-shadow: 0 0 3px #000;
}
#portada .jumbotron .recuadro .btn {
  color: #000;
}
/* Quiénes somos */
/* Años escolares de intercambio */
/* Separador 01 */
section#separador01 {
  background-image: url(../img/fotos/iplanet-06.jpg);
}
/* Cursos de idioma */
section#cursos-idioma h1,
section#cursos-idioma h2 {
  color: #9dd5bf;
}
/* Separador 02 */
section#separador02 {
  background-image: url(../img/fotos/iplanet-03.jpg);
}
/* Campamentos de verano */
section#campamentos-verano h1,
section#campamentos-verano h2 {
  color: #f1646c;
}
/* Separador 03 */
section#separador03 {
  background-image: url(../img/fotos/iplanet-02.jpg);
}
/* seguros de viaje */
section#seguros-viaje h1,
section#seguros-viaje h2 {
  color: #f9c174;
}
/* Separador 04 */
section#separador04 {
  background-image: url(../img/fotos/iplanet-14.jpg);
}
/* Contacto */
/* Separador 05 */
section#separador05 {
  background-image: url(../img/fotos/iplanet-10.jpg);
}
/* botón arriba */
/*.wrapper {position: relative; }*/
#arriba {
  position: fixed;
  bottom: 5px;
  right: 5px;
}
/* Footer */
#footer {
  padding: 5em 0;
  background-color: #f1646c;
  color: white;
}
#footer .logo {
  font-size: 12em !important;
}
#footer a {
  color: white !important;
}
/* ================= */
/* Animaciones de scroll */
.fade-in {
  opacity: 0;
  transition: opacity 500ms linear;
}
.top {
  opacity: 0;
  transition: transform 500ms ease-out, opacity 250ms linear;
  transform: translate3d(0px, -100px, 0px);
}
.bottom {
  opacity: 0;
  transition: transform 500ms ease-out, opacity 250ms linear;
  transform: translate3d(0px, 100px, 0px);
}
.left {
  opacity: 0;
  transition: transform 500ms ease-out, opacity 250ms linear;
  transform: translate3d(-100px, 0px, 0px);
}
.right {
  opacity: 0;
  transition: transform 500ms ease-out, opacity 250ms linear;
  transform: translate3d(100px, 0px, 0px);
}
.spin {
  opacity: 0;
  transform: rotate(90deg) scale(2);
  transition: all 1s ease-out;
}
.in-view .fade-in {
  opacity: 1;
}
.in-view .top {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}
.in-view .bottom {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}
.in-view .left {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}
.in-view .right {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}
.in-view .spin {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}