html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	/*font-size: 100%;
	font: inherit;
	vertical-align: baseline;*/
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
 font-family: 'Gotham-Light' sans-serif;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a{
    text-decoration: none;
  color:#f89e92;
}


body, html {
  margin: 0;
  overflow: hidden;
  -webkit-transition: opacity 400ms;
  -moz-transition: opacity 400ms;
  transition: opacity 400ms;
}
.wrapper {
      height: 100% !important;
      height: 100%;
      margin: 0 auto; 
      overflow: hidden;
    }

    header{
      position: fixed;
      top:0;
      right:0;
      left:0;
      z-index:2;
    }

nav{
  padding: 1em;
  display: none;
}

    nav ul{
      list-style: none;
      
      margin:0 auto!important;
      width:700px;
      height: 60px;
      display:flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
    }

nav li{
  font-family:'Gotham-Medium' ;
    text-transform: uppercase;
    font-size:14px;
    text-align: center;
    color:#262626;
}

nav li a{
  text-decoration: none;
  color:#262626;;
}

nav li a:hover{
  color:#f8c4b6;
}


.main section .page_container {
      position: relative;
      top: 20%;
      margin: 0 auto 0;
      max-width: 1170px;
      z-index: 3;
    }
    .main section  {
      overflow: hidden;
    }

.main section.page1 .page_container {
      
      top: 38%;
      
    }

.main section.page2 .page_container {
      
      top: 20%;
      
    }
    .main section.page2 .page_container {
      
      top: 20%;
      
    }





.main section.page1 {
      background:#ffffff;
    }

.main section.page2 {
      background:#ffffff;
    }

 .main section.page3 {
      background:#ffffff;
    }

  .main section.page4 {
      background:#ffffff;
    }
    .main section.page5 {
      background:#ffffff;
    }


 

.logo{

  position: relative;
  left: calc(50% - 95)
 
}

.text-logo{
   position:absolute;
   top:210px;
  left:41%;
  
}

.text-logo p{
  text-align: center;
  font-family:'Gotham-Light';
    text-transform: uppercase;
    font-size:22px;
    color:#262626;
    
}

.text-logo p span{
  
  font-family:'Gotham-Medium' ;
   
}

.inside_c{
  position: absolute;
  left:42%;
  z-index: 0;
}
.outside_c{
  position: absolute;
  left:42%;
  z-index: 9999;
}


.text1{position: relative;
      top:17%;

 font-family:'Mark My Words' ;
   
    font-size:60px;
    text-align: center;
    color:#595959;

}


.first-slide{
  position: relative;
  width:100%;
      
      margin:0 auto!important;
      display:flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

    }

    .box{
  position: relative
  left:0px;
  top: 50px;
  width:600px;
  height:500px;
  background-color: #ffd6d0;
  z-index: 2; 
}

.box img{
     position: absolute;
    left: 5%;
    top: 5%;
    width: 32%;
}

.slidetext a{
  align-self: flex-end;
}


.slidetext{  
  position: absolute;
    /* top: 150px; */
    left: 40%;
    width: 55%;
    z-index: 99;
}
.slidetext p{

   font-family:'Gotham-Light';
    font-size:22px;
    text-align: left;
    color:#000;
    line-height: normal;

}

.slidetext h1{

   font-family:'Gotham-Medium';
    font-size:50px;
    text-transform: uppercase;
    text-align: left;
    color:#2a2a2a;
    line-height: normal;
    padding-top:10px;
    padding-bottom:10px;

}

.slidetext p.description{

   font-family:'Gotham-Light';
    font-size:18px;
   
    text-align: left;
    color:#4b4b4b;
    line-height: normal;

}

.slidetext p.categoria{

   font-family:'Gotham-Light';
    font-size:22px;
    text-align: left;
    color:#595959;
    line-height: normal;

}

.slidetext a img{
  position: absolute;
  right: 3px;
  padding:20px 0px;
}

.text{
  font-family:'Gotham-Light' ;
   
    font-size:22px;
    text-align: center;
    color:#000;
    line-height: normal;
}

.text a{
  text-decoration: none;
  color:#f89e92;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: #262626;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}




body.modal__open{
    overflow: hidden;
  }
  .filtro{    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 150;
    background-color: #00000055;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
    opacity: 0.6;}

    .modal__wrapp {
    display: none;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 200;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
  }
  .modal__wrapp .modal__inner {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .modal__wrapp .modal__inner .modal {
    background: white;
    position: relative;
    max-width: 900px;
    width: 100%;
    margin: 50px 0;
  }
  .modal__wrapp .modal__inner .modal .close-modal {
    position: absolute;
    top: 8px;
    right: 12px;
    cursor: pointer;
    font-size: 30px;
  }
  .modal__wrapp .modal__inner .modal .modal_body {
      height: unset;
      background: #fff;
  }

.modal_body img{
  position: relative;
  left: calc(50% - 300px)
}



.slidetext button{
 position: absolute;
  right: 3px;
  padding:20px 0px;
  background:none;
  border: 0;
}



.close-modal{
  font-family: 'Gotham-Light', sans-serif;
  color:#ffd6d0;
  z-index: 999;
}


.design{
  margin:0 auto!important;
  max-width: 85%;
    display:flex;
      flex-direction: row;
      justify-content: space-between;
      align-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 10%;

    }


.skill{
    display:flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      padding: 3% 2%;

    }


.level{
    display:flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 15% 0;
    }

 .level img{
  padding: 0 2%;
  text-align: center;
 }   



/* Timeline */
.cd-horizontal-timeline {
  opacity: 0;
  margin: 2em auto;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.cd-horizontal-timeline::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
.cd-horizontal-timeline.loaded {
  /* show the timeline after events position has been set (using JavaScript) */
  opacity: 1;
}
.cd-horizontal-timeline .timeline {
  position: relative;
  height: 100px;
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
}
.cd-horizontal-timeline .events-wrapper {
  position: relative;
  height: 100%;
  margin: 0 60px 0 40px;
  overflow: hidden;
}
.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before {
  /* these are used to create a shadow effect at the sides of the timeline */
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  height: 100%;
  width: 20px;
}

.cd-horizontal-timeline .events {
  /* this is the grey line/timeline */
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 49px;
  height: 2px;
  font-family: 'Gotham-Light' sans-serif;
  /* width will be set using JavaScript */
  background: #dfdfdf;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
}
.cd-horizontal-timeline .filling-line {
  /* this is used to create the green line filling the timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #f8c4b6;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-horizontal-timeline .events a {
  position: absolute;
  bottom: 0;
  z-index: 2;
  text-align: center;
  font-size: 1.2rem;
  text-decoration: none;
  padding-bottom: 20px;
  color: #383838;
   font-family: "Gotham-Light", sans-serif;
  /* fix bug on Safari - text flickering while timeline translates */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.cd-horizontal-timeline .events a::after {
  /* this is used to create the event spot */
  content: '';
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -5px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  border: 2px solid #dfdfdf;
  background-color: #f8f8f8;
  -webkit-transition: background-color 0.3s, border-color 0.3s;
  -moz-transition: background-color 0.3s, border-color 0.3s;
  transition: background-color 0.3s, border-color 0.3s;
}
.no-touch .cd-horizontal-timeline .events a:hover::after {
  background-color: #f8c4b6;
  border-color: #f8c4b6;
}
.cd-horizontal-timeline .events a.selected {
  pointer-events: none;
}
.cd-horizontal-timeline .events a.selected::after {
  background-color: #f8c4b6;
  border-color: #f8c4b6;
}
.cd-horizontal-timeline .events a.older-event::after {
  border-color: #f8c4b6;
  background-color: #f8c4b6;

}

p.ppal{
font-family:'Gotham-Light';
    font-size:22px;
    text-align: center;
    color:#000;
    line-height: normal;

}

.contacto{
  padding: 5%;
}

.icon-contacto{
  width:500px;
display:flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      padding: 7% 0;
      margin:0 auto;

}

.cd-timeline-navigation a {
  /* these are the left/right arrows to navigate the timeline */
  position: absolute;
  z-index: 1;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 34px;
  width: 34px;
  border-radius: 50%;
  border: 2px solid #dfdfdf;
  content: '←';
  /* replace text with an icon */
  overflow: hidden;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: border-color 0.3s;
  -moz-transition: border-color 0.3s;
  transition: border-color 0.3s;
}
.cd-timeline-navigation a.prev::before {
  content:  ">";
  font-family: 'Gotham-Light';
  color: #ccc;
  font-size: 1.4rem;
  display: block;
  position:absolute;
  top: 6px;
  left: -24px;
  z-index: 10000;
  height: 100%;
  width: 100%;
  text-align: center;
}

.cd-timeline-navigation a.next::before {
   content:  ">";
  font-family: 'Gotham-Light';
  color: #ccc;
  font-size: 1.4rem;
  display: block;
  position:absolute;
  top: 6px;
  left: -24px;
  z-index: 10000;
  height: 100%;
  width: 100%;
  text-align: center;
}
.cd-timeline-navigation a.prev {
  left: 0;
  -webkit-transform: translateY(-50%) rotate(180deg);
  -moz-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  -o-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}
.cd-timeline-navigation a.next {
  right: 20px;
  z-index:5;
}
.no-touch .cd-timeline-navigation a:hover {
  border-color: #7b9d6f;
}
.cd-timeline-navigation a.inactive {
  cursor: not-allowed;
}
.cd-timeline-navigation a.inactive::after {
  background-position: 0 -16px;
}
.no-touch .cd-timeline-navigation a.inactive:hover {
  border-color: #dfdfdf;
}

.cd-horizontal-timeline .events-content {
  position: relative;
  width: 100%;
  margin: 2em 0;
  overflow: hidden;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
  transition: height 0.4s;

}
.cd-horizontal-timeline .events-content li {
  position: absolute;
  z-index: 1;
  width: 90%;
  left: 0;
  top: 0;

  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  padding: 0 5%;
  opacity: 0;
  -webkit-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
  /* visible event content */
  position: relative;
  z-index: 2;
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
  -webkit-animation-name: cd-enter-right;
  -moz-animation-name: cd-enter-right;
  animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-name: cd-enter-left;
  -moz-animation-name: cd-enter-left;
  animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  animation-direction: reverse;
}
.cd-horizontal-timeline .events-content li > * {
  max-width: 80%;
  margin: 0 auto!important;
   font-family: "Gotham-Light", sans-serif;
}
.cd-horizontal-timeline .events-content h2 {
  font-weight: bold;
  font-size: 2rem;
  font-family: "Gotham-Medium", sans-serif;
  font-weight: 700;
  line-height: 1.2;
}
.cd-horizontal-timeline .events-content em {
  display: block;
  font-style: italic;
  font-family: "Gotham-Light", sans-serif;
  margin: 10px auto;
  font-size: 20px;
    padding: 5px;
}

.cd-horizontal-timeline .events-content p {
  font-size: 18px;
  color: #959595;
  font-family: "Gotham-Light", sans-serif;
  padding-top: 10px;

}

.cd-horizontal-timeline .events-content p a {
  font-size: 18px;
  color: #f8c4b6;
  font-family: "Gotham-Medium", sans-serif;
  text-align: none;

}
.cd-horizontal-timeline .events-content em, .cd-horizontal-timeline .events-content p {
  line-height: 1.6;
}



/*Responsive 1024*/
@media only screen and (max-width:  1024px) {

.main section .page_container {
      position: relative;
      top: 15%;
      
    }

 .main section.page3 .page_container {
      
      top: 18%;
      
    }
    .main section.page4 .page_container {
      
      top: 15%;
      
    }
  .text1{position: relative;
      top: 15%;

}

.contacto{
  padding: 10% 15%;


}

  .cd-horizontal-timeline {
    margin: 0em auto;
  }
  .cd-horizontal-timeline::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }

  .cd-horizontal-timeline .events-content h2 {
    font-size: 1.6rem!important;
  }
  
  .cd-horizontal-timeline .events-content p {
    font-size: 1.1rem!important;
  }

  .cd-horizontal-timeline .events-content p a {
  font-size: 1.1rem!important;
  color: #f8c4b6;
  font-family: "Gotham-Medium", sans-serif;
  text-align: none;

}


} /*end 1024*/



/*Responsive 768*/


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

  nav ul{
      list-style: none;
      
      margin:0 auto!important;
      width:200px;
      height: 300px;
      display:flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }


nav{
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  right:-300px; /* Escondemos nuestro menú con un valor negativo */ 
  width: 300px;
  z-index: 1;
  padding: 90px 30px 30px;
  background: #ffd6d0;
  opacity: 0;
  transition: all 0.75s ease;
  font-size: 2em;
  overflow-y: auto;
}


nav a{
  display:block;
  text-decoration: none;
  padding: 20px;
  color: blue;
  transition: all ease 0.25s;
}
 
nav a:hover{
  color: blue;
  border-bottom-color: blue;
}

nav li a {
    text-decoration: none;
    color: #fff;
    font-size: 1.8em;
}

#menu_on{
  display: inline-block;
  width:30px;
  height: 20px;
  position: relative;
  top:20px;
  left: 94%;
  z-index: 2;
}
 
#menu_on span{
  width: 100%;
  height: 4px;
  border-radius: 4px;
  display: block;
  position: absolute;
  background: #262626;
  transition: all 0.25s ease; /* Propiedades a animar | Tiempo | Tipo animación*/
  transform-origin : 0px 100%;
}
 
#menu_on span:nth-child(2){
  top: calc(50% - 2px);
}
 
#menu_on span:nth-child(3){
bottom: 0;
}

.visible_menu span:nth-child(1){
  transform: rotate(45deg) translate(-2px,1px); 
}
 
.visible_menu span:nth-child(2){
  opacity: 0;
}
 
.visible_menu span:nth-child(3){
  transform: rotate(-45deg) translate(-3px,3px); 
}

.visible_menu nav{
  right: 0;
  opacity: 1;
}

.visible_menu #content{
      transform: translateX(260px);
}

.logo{
  position: relative;
  left: calc(50% - 95)
 
}

.text-logo{
   position:absolute;
   top:210px;
  left:39%;
  
}
.inside_c{
  position: absolute;
  left:38%;
  z-index: 0;
}
.outside_c{
  position: absolute;
  left:38%;
  z-index: 9999;
}

.first-slide{
  position: relative;
  width:100%;
 
      padding-top:2%;
      margin:0 auto!important;
      display:flex;
      align-items: center;
     
    }

 .box{
   display: block;
    width: 100%;
    height: 500px;

    background-color: #fff0ee;
    
    
}

.slidetext{  
  display: inline-block;
         position: absolute;
    top: 178px;
    left: 8%;
    width: 80%;
   
}

.slidetext p.description{  
  color:#000000;
   
}


.box img {
    position: absolute;
    left: 25%;
    top: 5%;
    width: 54%;
    filter: opacity(30%);
}

.contacto{
  padding:  15%;


}

.icon-contacto{
  margin:0 auto;
  width:80%;
display:flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      padding: 10% 0;
      

}

 .main section.page2 .page_container {
      
      top: 4%;
      
    }
 .main section.page3 .page_container {
      
      top: 12%;
      
    }
    .main section.page4 .page_container {
      
      top: 15%;
      
    }
  .text1{position: relative;
      top: 10%;

}

  .cd-horizontal-timeline .events-content h2 {
    font-size: 1.4rem!important;
  }
  
  .cd-horizontal-timeline .events-content p {
    font-size: 1rem!important;
  }

  .cd-horizontal-timeline .events-content p a {
  font-size: 1rem!important;
  color: #f8c4b6;
  font-family: "Gotham-Medium", sans-serif;
  text-align: none;

}

  .cd-horizontal-timeline .events-content {
  position: relative;
  width: 100%;
  margin: 0.6em 0;
  overflow: hidden;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
  transition: height 0.4s;
}

.cd-horizontal-timeline {
    margin: 4em auto;
}


}/*end 768*/

/* Responsive 468*/
@media only screen and (max-width: 468px) {

.logo{
  position: relative;
    left: calc(40% - 95);
}

.box{
      display: block;
    width: 100%;
    height: 600px;
    background-color: #fff0ee;
}

.inside_c{
  position: absolute;
  left:29%;
  z-index: 0;
}
.outside_c{
  position: absolute;
  left:29%;
  z-index: 9999;
}

.text-logo{
      position: absolute;
    top: 210px;
    left: 27%;
}

.main section.page1 .page_container {
    top: 18%;
      right: 3%;}

.level {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 15% 5%;}

#menu_on{
  display: inline-block;
  width:30px;
  height: 20px;
  position: relative;
  top:20px;
  left: 88%;
  z-index: 2;
}

.slidetext {
    display: inline-block;
    position: absolute;
    top: 48px;
    left: 8%;
    width: 80%;
}

.slidetext h1 {
    font-family: 'Gotham-Medium';
    font-size: 30px;
    text-transform: uppercase;
    text-align: left;
    color: #2a2a2a;
    line-height: normal;
    padding-top: 10px;
    padding-bottom: 10px;
}

.skill {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    padding: 3% 5%;
}

.modal__wrapp .modal__inner .modal {
    background: white;
    position: relative;
    max-width: 370px;
    width: 100%;
    margin: 50px 0;
}

.modal_body img {
    position: relative;
    left: calc(50% - 150px);
    width: 300px;
}


.onepage-wrapper .section {
    width: 100%;
    height: 150%;
}
.main section.page4 .page_container {
      
      top: 10%;
      
    }

.cd-horizontal-timeline .events-content h2 {
    font-size: 1.1rem!important;
  }
  
  .cd-horizontal-timeline .events-content p {
    font-size: 1rem!important;
    line-height: 1.2;
  }

   .cd-horizontal-timeline .events-content p a {
  font-size: 1rem!important;
  color: #f8c4b6;
  font-family: "Gotham-Medium", sans-serif;
  text-align: none;
  line-height: 1.2;
  text-decoration:none;

}

  .cd-horizontal-timeline .events-content {
  position: relative;
  width: 100%;
  margin: 0.1em 0;
  overflow: hidden;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
  transition: height 0.4s;
}

.cd-horizontal-timeline {
    margin: 4em auto;
}



} /*end 468*/






@-webkit-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -moz-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@-webkit-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}








/* Tab */
.tab {
  text-align: center;
  overflow: hidden;
  
  
}

/* Style the buttons that are used to open the tab content */
.tab button {
  color:#595959;
 font-family:'Gotham-Light' ;
    text-transform: uppercase;
    font-size:22px;
    text-align: center;
   background-color: #ffffff;
  border: none;
  outline: none;
  cursor: pointer;
  margin-top: 20px;
  padding: 18px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ffffff;
  color: #f8c4b6;
  font-size: 
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ffffff;
  color: #f8c4b6;
   font-family:'Gotham-Light' ;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
}











/*TIPOGRAFIA*/ 

@font-face {
  font-family: 'Gotham-Light';
  src: 
    url('../fonts/Gotham-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Gotham-Light.otf')  format('opentype'),
    url('../fonts/Gotham-Light.woff') format('woff'),
    url('../fonts/Gotham-Light.ttf')  format('truetype'),
    url('../fonts/Gotham-Light.svg#Gotham-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham-Medium';
  src: 
    url('../fonts/GothamMedium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/GothamMedium.otf')  format('opentype'),
    url('../fonts/GothamMedium.woff') format('woff'),
    url('../fonts/GothamMedium.ttf')  format('truetype'),
    url('../fonts/GothamMedium.svg#GothamMedium') format('svg');
  font-weight: normal;
  font-style: normal;
}



@font-face {
    font-family: 'Mark My Words';
    src: url('../fonts/MarkMyWords.eot');
    src: url('../fonts/MarkMyWords.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MarkMyWords.woff2') format('woff2'),
        url('../fonts/MarkMyWords.woff') format('woff'),
        url('../fonts/MarkMyWords.ttf') format('truetype'),
        url('../fonts/MarkMyWords.svg#MarkMyWords') format('svg');
    font-weight: normal;
    font-style: normal;
}