/* Tipografías */
@font-face {
    font-family: Indulta;
    src: url('../fonts/Indulta-SemiSerif-boldFFP.otf'), url('../fonts/Verlag-Bold.otf')}

@font-face {
    font-family: Apercu;
    src: url('../fonts/Apercu-Light.otf'), url('../fonts/Apercu-Regular.otf')}
/* */

* {
  margin: 0;
  padding: 0;
}

img[src*="https://cdn.000webhost.com/000webhost/logo/footer-powered-by-000webhost-white2.png"] {
    display: none;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  width: 100%;
  min-height: 100%;
  min-width: 100%;
  margin: 0;
  padding: 0;
  }

body {
  height: 100%;
  width: 100%;
  min-height: 100%;
  min-width: 100%;
  margin: 0;
  padding: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: indulta;
  margin-bottom: 30px;      
}

h2 {
  font-size: 300px;
  font-weight: 400;
}

h3 {
  font-size: 28px;
  font-weight: 300;
}

p {
  font-family: Apercu;    
  font-size: 15px;    
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

a {font-family: Apercu;
   font-size: 15px;
   font-weight: 700;    
   color: black;
   text-decoration: none;
}

a:hover, a:focus {
  color: darkgrey;
  text-decoration: none; 
}

a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; 
}

/* Clases Generales */

a.effect1 {
  position: relative;
  overflow: hidden;
  display: inline-block;
  color: #000;
  text-decoration: none;
  width: 100%;
  height: 500px;
  font-family: Roboto, sans-serif;
  font-size: 2em;
}
a.effect1:after{
  cursor: pointer;    
  font: 200 2.625rem/1.875rem Apercu;    
  position: absolute;
  text-align: center;
  width: 100%;
  margin-top: 250px;    
  content: 'Next project';
 
  -webkit-transition: all 0.3s;
	transition: all 0.3s;
}
a.effect1:before {
  content: '';
  position: absolute;
  top: 100%;
  width: 100%;
  height: 100%;
  background: #000;
  
  -webkit-transition: all 0.3s;
	transition: all 0.3s;
}
a.effect1:hover:before {
  top: 0;}  

a.effect1:hover:after {
  color: #fff;}

.cross { margin: 20px;
         float: right;}
@media screen and (max-width: 768px) {
.cross  {
    margin-right: 5px;} }

.contenedor {
  cursor: pointer;
  position: relative;
  height:300px;
  width: 300px;
  margin: 50px 20px;
  float: left;
}


.contenedor img {
  width: 150%;    
  position: absolute;
  left: 0;
  transition: opacity 1.5s ease-in-out;
}
@media screen and (max-width: 992px) {
  .contenedor img {
    width: 100% } }

@media screen and (max-width: 768px) {
  .contenedor img {
    width: 100% } }

.contenedor img.top:hover {
  opacity: 0;
}

.contenedor2 {
  cursor: pointer;
  position: relative;
  height:234px;
  width: 300px; 
}

.contenedor2 img {
  width: 100%;    
  position: absolute;
  left: 0;
  transition: opacity 1.5s ease-in-out;
}
@media screen and (max-width: 992px) {
  .contenedor2 img {
    width: 100% } }

@media screen and (max-width: 768px) {
  .contenedor2 img {
    width: 120% } }

.contenedor2 img.top:hover {
  opacity: 0;
}

.section {
  height: 400px;}

.section-title {    
  font-family: Apercu;
  font-weight: 900;    
  position: absolute;
  z-index: 1;    
  margin-top: -135px;}

@media screen and (max-width: 768px) {
.section-title {
  margin-top: -135px;}
}
.section-title h2 {
  font-size: 8em;
  font-weight: 600;
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
.section-title h2 {
 font-size: 4em;
  margin-top: 90px;  } 
}

@media screen and (max-width: 479px) {
.section-title h2 {
 font-size: 3.25em;
  margin-top: 95px;  } 
}

.title { font-family: Indulta;    
}

.full { width: 100%;}



/* Nespresso */

#nespresso {
  background: url("../img/nespresso/nespresso.jpg");
  height: 600px;    
  width: 100%;
  display: block;
  position: relative;
  overflow: visible;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #fff;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 100px 0;}
 @media screen and (max-width: 479px) {
  #nespresso {
    background-color: #a37fab;  
    background: url("../img/nespresso/nespresso-min.svg") no-repeat;
    background-position: 100% 0px; }}
 


.nespresso { color: #000;}

/* Latitude */

#latitude {
  background: url("../img/latitude/latitude.jpg");
  background-position: 50% 94px;
  width: 100%;
  display: block;
  position: relative;
  overflow: visible;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #fff;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 100px 0;}
 @media screen and (max-width: 479px) {
  #latitude {
    background: url("../img/latitude/latitude-min.svg") no-repeat;
    background-position: 100% 0px; }}


.latitude{ color: #d4d740;}

a.effectlatitude {
  position: relative;
  overflow: hidden;
  display: inline-block;
  color: #000;
  text-decoration: none;
  width: 100%;
  height: 500px;
  font-family: Roboto, sans-serif;
  font-size: 2em;
}
a.effectlatitude:after{
  cursor: pointer;    
  font: 200 2.625rem/1.875rem Apercu;    
  position: absolute;
  text-align: center;
  width: 100%;
  margin-top: 250px;    
  content: 'Next project';
  
  -webkit-transition: all 0.3s;
	transition: all 0.3s;
}
a.effectlatitude:before {
  content: '';
  position: absolute;
  top: 100%;
  width: 100%;
  height: 100%;
  background:#d4d740;
  
  -webkit-transition: all 0.3s;
	transition: all 0.3s;
}
a.effectlatitude:hover:before {
  top: 0;}

a.effectlatitude:hover:after {
  color: #fff;}


/* Go & Win */

#goandwin {
  background: url("../img/goandwin/trama.svg");
  background-position: 50% 94px;
  width: 100%;
  display: block;
  position: relative;
  overflow: visible;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #fff;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 100px 0;}
 @media screen and (max-width: 479px) {
  #goandwin {
    background: url("../img/goandwin/goandwin-min.svg") no-repeat;
    background-position: 100% 0px; }}

.goandwin{ color: #193455;}

a.effectgoandwin {
  position: relative;
  overflow: hidden;
  display: inline-block;
  color: #000;
  text-decoration: none;
  width: 100%;
  height: 500px;
  font-family: Roboto, sans-serif;
  font-size: 2em;
}
a.effectgoandwin:after{
  cursor: pointer;    
  font: 200 2.625rem/1.875rem Apercu;    
  position: absolute;
  text-align: center;
  width: 100%;
  margin-top: 250px;    
  content: 'Next project';
  
  -webkit-transition: all 0.3s;
	transition: all 0.3s;
}
a.effectgoandwin:before {
  content: '';
  position: absolute;
  top: 100%;
  width: 100%;
  height: 100%;
  background: #193455;
  
  -webkit-transition: all 0.3s;
	transition: all 0.3s;
}
a.effectgoandwin:hover:before {
  top: 0;
}

a.effectgoandwin:hover:after {
  color: #fff;
}

.fondogo { background-color:  rgb(247, 247, 247);
           margin: 40px;        
}



/* Gravity */

#gravity {
  background: url("../img/gravity/cohete.svg");
  background-position: 100% 0px;
  width: 100%;
  display: block;
  position: relative;
  overflow: visible;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #fff;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 100px 0;}
 @media screen and (max-width: 479px) {
  #gravity {
    background-color: #14272b;  
    background: url("../img/gravity/cohete-min.svg") no-repeat; }}

.gravity1 { color: #14272b;}

.gravity2 { color: #bb3232;}

.gravity3 { color: #657a7e;}

.gravity4 { color: #99b5a9;}


a.effectgravity {
  position: relative;
  overflow: hidden;
  display: inline-block;
  color: #000;
  text-decoration: none;
  width: 100%;
  height: 500px;
  font-family: Roboto, sans-serif;
  font-size: 2em;
}

a.effectgravity:after{
  cursor: pointer;    
  font: 200 2.625rem/1.875rem Apercu;    
  position: absolute;
  text-align: center;
  width: 100%;
  margin-top: 250px;    
  content: 'Next project';
  
  -webkit-transition: all 0.3s;
	transition: all 0.3s;
}

a.effectgravity:before {
  content: '';
  position: absolute;
  top: 100%;
  width: 100%;
  height: 100%;
  background:#14272b;
  
  -webkit-transition: all 0.3s;
	transition: all 0.3s;
}
a.effectgravity:hover:before {
  top: 0;}

a.effectgravity:hover:after {
  color: #fff;}


/* México Ilustrado */

#mexico {
  background: url("../img/mexico/mexico-folleto-min.jpg");
  background-position: 50% 94px;
  width: 100%;
  display: block;
  position: relative;
  overflow: visible;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #fff;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 100px 0;}
 @media screen and (max-width: 479px) {
  #mexico {
    background: url("../img/mexico/mexico-min.svg") no-repeat;
    background-position: 100% 0px; }}

.section {
  height: 400px;
}

.section-title-mexico {
  font-family: Apercu;     
  position: absolute;
  z-index: 1;    
  margin-top: -105px;
}

.section-title-mexico h2 {
  font-size: 4.82em;
  font-weight: 600;
  margin-top: 50px;
  color: #d9534c;
   line-height: 80px;}
@media screen and (max-width: 768px) {
.section-title-mexico h2 {
 font-size: 4em;
  margin-top: 65px;  } 
}

@media screen and (max-width: 479px) {
.section-title-mexico h2 {
 font-size: 3.25em;
  margin-top: 70px; 
  line-height: 55px;} 
}

a.effectmexico {
  position: relative;
  overflow: hidden;
  display: inline-block;
  color: #000;
  text-decoration: none;
  width: 100%;
  height: 500px;
  font-size: 2em;
}

a.effectmexico:after{
  cursor: pointer;    
  font: 200 2.625rem/1.875rem Apercu;    
  position: absolute;
  text-align: center;
  width: 100%;
  margin-top: 250px;    
  content: 'Next project';
  
  -webkit-transition: all 0.3s;
	transition: all 0.3s;
}

a.effectmexico:before {
  content: '';
  position: absolute;
  top: 100%;
  width: 100%;
  height: 100%;
  background:#d9534c;
  
  -webkit-transition: all 0.3s;
	transition: all 0.3s;
}

a.effectmexico:hover:before {
  top: 0;
}

a.effectmexico:hover:after {
  color: #fff;
}


/* Papaya */

#papaya {
  background: url("../img/papaya/papaya-proyect-min.jpg");
  background-position: 50% 94px;
  width: 100%;
  display: block;
  position: relative;
  overflow: visible;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #fff;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 100px 0;}
 @media screen and (max-width: 479px) {
  #papaya {
    background: url("../img/papaya/papaya-min.svg") no-repeat;
    background-position: 100% 0px; }}


.papaya1 { color: #21184C;
}

.papaya2 { color: #df5f61;
}

.papaya3 { color: #FFD16F;
}

.fondopapaya { background-color: #df5f61;    
}

a.effectpapaya {
  position: relative;
  overflow: hidden;
  display: inline-block;
  color: #000;
  text-decoration: none;
  width: 100%;
  height: 500px;
  font-family: Roboto, sans-serif;
  font-size: 2em;
}
a.effectpapaya:after{
  cursor: pointer;    
  font: 200 2.625rem/1.875rem Apercu;    
  position: absolute;
  text-align: center;
  width: 100%;
  margin-top: 250px;    
  content: 'Next project';
  
  -webkit-transition: all 0.3s;
	transition: all 0.3s;
}
a.effectpapaya:before {
  content: '';
  position: absolute;
  top: 100%;
  width: 100%;
  height: 100%;
  background:#21184C;
  
  -webkit-transition: all 0.3s;
	transition: all 0.3s;
}
a.effectpapaya:hover:before {
  top: 0;
}
a.effectpapaya:hover:after {
  color: #fff;}


/* Espacio */

.lolop-espacio {
  clear: both;
  position: relative;
  border: none;
  padding: 0;
  margin: 0; }

.lolop-espacio-xlg {
  height: 350px; }
@media screen and (max-width: 768px) {
  .lolop-espacio-xlg {
    height: 350px; } }

.lolop-espacio-lg {
  height: 100px; }
@media screen and (max-width: 768px) {
  .lolop-espacio-lg {
    height: 20px; } }

.lolop-espacio-md {
  height: 80px; }
@media screen and (max-width: 768px) {
  .lolop-espacio-md {
    height: 30px; } }

.lolop-espacio-sm {
  height: 50px; }
@media screen and (max-width: 768px) {
  .lolop-espacio-sm {
    height: 20px; } }

.lolop-espacio-xs {
  height: 30px; }
@media screen and (max-width: 768px) {
  .lolop-espacio-xs {
    height: 20px; } }

.lolop-espacio-xxs {
  height: 20px; }

@media screen and (max-width: 480px) {
  .col-xxs-12 {
    float: none;
    width: 100%; } }

.lolop-mb30 {
  margin-bottom: 30px; }

.lolop-row-padded {
  padding: 50px 0; }

