/* ! Reset */
body, html{ font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; box-sizing: border-box;margin: 0;padding: 0;}
*,*:before,*:after{ box-sizing: border-box; }
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;}
ol,ul{list-style-type: none;}
img{height: auto;}
a{text-decoration: none;}
hr{border:none; border-bottom: 1px solid #dddddd}

body{font-family: Inter}
.spacer{height: 30vh;}

/* ! Title System */
.text-0{font-size: 5rem; line-height: 1;}
h1, .text-1{font-size: 3rem;}
h2, .text-2{font-size: 1.9rem;}
h3, .text-3{font-size: 1.5rem;}
h4, p, .text-4{font-size: 1rem;}

h1, h2, h3, h4{letter-spacing: -1px}

h1, h2, h3, h4, p, ol, ul{margin-bottom: 1rem;font-weight: 600}

@media (max-width: 768px) {
  .text-0{font-size: 4rem}
}

/* ! Button system */
.button{font-size: 1.2rem;background: transparent; color:#06c; padding: 14px 25px;display: inline-block;border-radius: 4px; position: relative;}
.button img{ position: absolute;top:50%; right:0; width: 20px;transform: translateY(-45%);}
.button--small{  padding: 10px 20px;font-size: 1rem;}

.button--round{background: #fff; color:#000; padding: 15px 30px; border-radius: 100px; font-weight: bold;}
.button--round-outline{background: transparent; color:#fff; padding: 15px 30px; border-radius: 100px; font-weight: bold;border: 1px solid #fff}


/* ! Animations */
.fade-up{opacity: 0; transform: translateY(5rem);}

/* Components
-------------------------------------------------------- */

/* ! Header */
.header-container{background: #333; }
.header{display: flex; justify-content: space-between;max-width: 1250px; margin: 0 auto}


.header__menu{margin-bottom: 0;width: 100%;text-align: center;display: flex; align-items: center;justify-content: center;}
.header__menu li{display: inline-block;}
.header__menu li a{color:#fff; display: block; padding: 15px;font-size: 0.9rem;color:#eee}
.header__logo{font-weight: bold;width: 30%; padding-left: 10px;display: flex; align-items: center;}

.header__icons{width: 30%; display: flex; justify-content: flex-end;align-items: center;}

.header__hamburger{display: none;}

@media (max-width: 768px) {

  body{padding-top: 48px;}
  .header-container{position: fixed; top:0; left: 0; width: 100%;z-index: 99}
  .header__menu{background: #333;position: absolute;top:47px; left: -100%;display: block;z-index: 99; padding: 10px;height: 100vh; transition: all 1s cubic-bezier(.215, .61, .355, 1);}
  .header__menu li{display: block;}
  .header__menu li a{text-align: left;padding: 5%;border-top: 1px solid #666}
  .header__logo{justify-content: center;}
  .header__hamburger{display: block;height: 40px;width: 30%;padding: 10px;}
  .header__hamburger span{height: 2px;width: 28px;margin-top: 8px;background: #fff;display: block; transition: all 0.2s cubic-bezier(.215, .61, .355, 1);}

  .menu-open .header__hamburger span:nth-child(1){transform: translateY(5px) rotate(45deg);}
  .menu-open .header__hamburger span:nth-child(2){transform: translateY(-5px) rotate(-45deg);}

  .menu-open .header__menu{left:0;}
}


  

/* intro */

.bg-black{background: #000; transition: all 1s cubic-bezier(.215, .61, .355, 1);}

.intro{height: 100vh;position:relative; display:flex; justify-content: center}
.intro__bg{background: url(img/campograno.jpg) no-repeat center center; height: 95%; width: 100%;background-size: 100%;}


@media (max-width: 768px) {
  .intro__bg{background-size: 100%;}

}

.text-gradient{
  background: #fff;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(129deg,#eb1111,#e90d91);
}

.panel-text{z-index: 1; position:relative}
.panel-video{margin-top: -20vh;opacity:0;z-index: 0; position:relative}

@media (max-width: 768px) {
  .panel-video{margin-top: 0vh;}
  .panel-video.video-res video{height: 80vh;}

}

.panel-white .bg-black{background:#fff;}
.panel-white .text-white{color:#000}

.ipad-big{width: 100%;z-index: 0}
.ipad-big-3{width: 80%;z-index: 0}

@media (max-width: 768px) {

  .ipad-big,
  .ipad-big-3{width: 120%;}

}







/* ! Cover */
.cover{
  padding: 20px 20px 0 20px;
  display: flex; flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}
.cover__content{max-width: 600px; margin: 0 auto}

.cover--image{min-height: 600px; color:#fff; justify-content: flex-end;  text-align: left;}
.cover--image .cover__content{max-width: 1250px; width: 100%;}
.cover--image h1{font-size: 2.4rem;}
.cover--image h2{font-size: 1.4rem;text-transform: uppercase;font-weight: normal;}


/* ! Tiles */

.tiles{min-height: 500px; border-radius: 30px; color:#fff; position: relative;overflow: hidden}
.tiles__label{position: absolute; bottom: 30px; left:30px}

.tiles__content{
  padding: 30px;
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
}

/* ! Card */
.card{padding: 30px;border-radius: 15px; text-align: center;}
.card h3{margin-bottom: 8px;font-size: 2.2rem}

/* ! Footer */
.footer{background: #eee;padding-top: 30px;}

.footer h3{font-size: 1.2rem;}
.footer p{font-size: 0.8rem;}






/* ! Grid System */
.grid{display: flex; flex-wrap: wrap; max-width: 1250px; margin: 0 auto;}
.grid--small{max-width: 900px}
.grid--center{justify-content: center;}

.col-20{width:20%}
.col-25{width:25%}
.col-30{width:30%}
.col-33{width:33.33%}
.col-40{width:40%}
.col-50{width:50%}
.col-60{width:60%}
.col-70{width:70%}
.col-80{width:80%}
.col-90{width:90%}
.col-100{width:100%}

[class*='col-']{padding: 10px;}


@media (max-width: 768px) {
  [class*='col-']{width: 100%}
  .sma-33{width: 33.33%}
  .sma-50{width: 50%}
  .sma-25{width: 25%}
}

/* ! Helpers */

.br{border: 1px solid red;}
.img-res{width: 100%;}
.video-res{width: 100%;height: 100%;overflow: hidden;}
.video-res video{width: 100%;height: 100%;object-fit: cover}

.mt-0{margin-top: 0;}
.mt-1{margin-top: 1rem;}
.mt-2{margin-top: 2rem;}
.mt-3{margin-top: 3rem;}
.mt-4{margin-top: 4rem;}

.mb-0{margin-bottom: 0;}
.mb-1{margin-bottom: 1rem;}
.mb-2{margin-bottom: 2rem;}
.mb-3{margin-bottom: 3rem;}
.mb-4{margin-bottom: 4rem;}

.text-center{text-align: center}
.text-left{text-align: left}
.text-right{text-align: right}

.p-0{padding: 0;}
.p-1{padding: 1rem;}
.p-2{padding: 2rem;}
.p-3{padding: 3rem;}
.p-4{padding: 4rem;}

.pt-0{padding-top: 0;}
.pt-1{padding-top: 1rem;}
.pt-2{padding-top: 2rem;}
.pt-3{padding-top: 3rem;}
.pt-4{padding-top: 4rem;}

.pb-0{padding-bottom: 0;}
.pb-1{padding-bottom: 1rem;}
.pb-2{padding-bottom: 2rem;}
.pb-3{padding-bottom: 3rem;}
.pb-4{padding-bottom: 4rem;}


.icon-small{width: 40px;padding: 8px;}
.icon-white{filter: invert(1);}
.bg-dark{background: #000;}
.text-white{color:#fff}
.v-center{display: flex; justify-content: center; flex-flow: column;align-items: flex-start;}

.font-normal{font-weight: 400;}
.z-index-top{z-index:100}

.none{display: none;}
@media (max-width: 768px) {
  .sma-none{display: none;}
}

@media (min-width: 768px) {
  .desktop-none{display: none;}
}

.video-bg{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left:0;
  object-fit: cover;
  opacity: 0,6;
  z-index: -1;
 
}

.section{
  position: relative;
  z-index : 1;
  width: 100%;
  height: 100vh;
}



.title{
  text-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 50%;
  position: fixed;
  top: 0; left:0;
  margin-left: 25%;
  transform: scale(1);
  transition: all 1s cubic-bezier(.215, .61, .355, 1);
  opacity: 0;
  

}

.section.in-page .title{
  transform: scale(1.2);
  opacity:1;
}

















/* end file */