*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth!important;
}
body{
  overflow-x: hidden;
}
@font-face {
  font-family: 'pala';
  src:url(../fonts/pala.ttf);
}
@font-face {
font-family: :'pala-thin';
src:url(../fonts/Palatino-Thin.ttf);
}
@font-face {
font-family: 'scoth';
src:url(../fonts/ScotchRomanMT.otf);
}
@font-face{
  font-family: 'type';
  src:url(../fonts/atwriter.ttf);
}
#preloader{
  background: black;
  height: 100vh;
  width:100%;
  position: fixed;
  z-index: 100;
  display: grid;
  place-items:center;
}
#preloader img{
  width:100px;
  /* height: 150px; */
}

canvas{

  position: fixed;
  top:0;
  left:0;
  transition: .5s ease;
}
.mark.active{
  filter: blur(.2rem);
  background: rgba(0,0,0,1);

}
.mark.active h2 , .mark.active img{
  display: none;
}
.glitch {
   position: relative;
   font-size: 50px;
   font-weight: bold;
   color: #FFFFFF;
   letter-spacing: 3px;
   z-index: 1;
}

.glitch:before,
.glitch:after {
   display: block;
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0.8;
}

.glitch:before {
   animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
   color: #00FFFF;
   z-index: -1;
}

.glitch:after {
   animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
   color: #FF00FF;
   z-index: -2;
}

@keyframes glitch-it {
   0% {
      transform: translate(0);
   }
   20% {
      transform: translate(-2px, 2px);
   }
   40% {
      transform: translate(-2px, -2px);
   }
   60% {
      transform: translate(2px, 2px);
   }
   80% {
      transform: translate(2px, -2px);
   }
   to {
      transform: translate(0);
   }
}

h2{
  font-family: 'scoth',serif;
  /* font-family: 'type'; */
  font-size: 3rem;
  font-weight: 400;
}
h3{
  font-size: 2rem;
}
.mark{
  transition: .5s ease;
  position: absolute;
  /* top:0;
  left:0; */
  width:100%;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: row;
  gap:1rem;
  justify-content:center;
  align-items: flex-end;



}
.mark h2{
margin:auto .3% 5%;
transition: .3s ease;
color:white;
position:relative;

}
.mark h2::before,.hold h2::before{
  content:'';
  position: absolute;
  width: 100%;
  height: 100%;
  border-bottom: 3px solid rgba(255,0,0,1);
  opacity: 0;
  z-index: 3;
  transition: .3s ease;
  transform: scaleX(0);

}
.mark h2:hover::before,.hold h2:hover::before{
  opacity: 1;
  transform: scaleX(100%);
transform-origin: center;
}
.mark h2:hover,.hold h2:hover{
  color:#EF532D;
  cursor: pointer;
  text-shadow:  1px 1px .2rem rgba(255,0,0,1);
}


.mark-img {
  object-fit: contain;
  background: transparent;
}
.mark a{
  position: absolute;
  width:20%;
  top:5%;
  /* height: 50%; */


}
/* .work-container h2{
  position: absolute;
  top:5%;
  left:50%;
  transform: translateX(-50%);
} */
.work-container,.with-container,.mob-container{
  position: absolute;
  /* left:100%; */
  height: 100%;
  width: 100%;
  opacity: 0;
  top:-100%;
  transform: scale(0);
  /* background: #F4462B!important; */
  /* background: linear-gradient(180deg, rgba(244,70,43,.8) 0%, rgba(244,107,43,.8) 50%, rgba(244,70,43,.8) 100%)!important; */
transition: .5s ease;

}
.work-container{
  overflow: hidden;
}
.loading{
  width:200px;
}
.mob-container{
  /* background: #E55807!important; */

}

.container {
  display: grid;
  grid-gap: 10px;
  width:90%;
  height: 80%;
  background-attachment: fixed;
  margin: auto;
  text-align: center;
  font-family: 'scoth';
  background: black;
  overflow: hidden;

}
.container h3{
  padding-bottom:2rem;
}
.container-wrapper{
  overflow-y: scroll;
}
.partner{
  display: flex;
  flex-direction: column;
}
.partner h3{
  padding-bottom: 2rem;
}
.partner a{
text-decoration: none;
color:white;
font-family: 'scoth';
font-size: 1.5rem;
padding:.5rem;
}
.partner-container{
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;

}
.al{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  margin:5% auto;
  width: 100%;
  position:relative;
}
.al::before{
  height: 100%;
  width:10vw;
  position: sticky;
  font-size: 5rem;
  opacity: .5;
  left:90%;
  z-index: 1;
  /* transform: translateX(-50%); */
}
.container-a::before{
  content:'A';
}
.container-b::before{
  content:'B';
}
.container-c::before{
  content:'C';
}
.container-d::before{
  content:'D';
}
.container-f::before{
  content:'F';
}
.container-i::before{
  content:'I';
}
.container-j::before{
  content:'J';
}
.container-m::before{
  content:'M';
}
.container-n::before{
  content:'N';
}
.container-o::before{
  content:'O';
}
.container-p::before{
  content:'P';
}
.container-r::before{
  content:'R';
}
.container-s::before{
  content:'S';
}
.container-u::before{
  content:'U';
}
.container-w::before{
  content:'W';
}
.container ul li{
  list-style: none;
  text-align: left;
  font-size: 1.2rem;
  margin:5px;

}

.work,.with{
  /* display: none; */
}
.content{
  /* padding-top: 5%; */
  width: 100%;
  /* height: 100%; */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content:flex-start;
  align-items:center;
}
.work-container.active,.with-container.active{
  position: absolute;
  z-index: 1;
  left:0;
  top:0;
  opacity: 1;
  width:100%;
  min-height:100% ;
  color:white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* background:black; */
  transform: scaleY(1);
  transition: 1s ease;
  transform-origin: top;
  padding-top: 2rem;

}
.mob-container.active{
  position: absolute;
  z-index: 1;
  left:0;
  top:0;
  opacity: 1;
  width:100%;
  height:100% ;
  color:white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* background:black; */
  transform: scaleY(1);
  transition: .5s ease;
  transform-origin: top;
  padding-top: 2rem;
}
.work-container.hide,.with-container.hide,.mob-container.hide{
  /* display: none; */
  /* bottom:-100%; */
  /* transform: scale(0); */
  transform-origin: center;
  top:-100%;
  opacity: 1;
    /* transition: 1s ease; */


}
.hold{
  width:100%;
  text-align: center;
  /* height: 50%; */
  display: flex;
  justify-content: center;
  align-items: center;
  top:40%;
  position: relative;
  transition: .3s ease;
}
.hold.active{
  top:-2%;
  /* background: #F4462B; */
}
.hold h2{
  margin:auto 30px;
  transition: .3s ease;
  position:relative;
}
.hold.active h2{
  font-size: 1.8rem!important;
  font-weight: 400!important;
}
.hold h2.active{
color:#F4462B;
}
.hding{
  color: white;
  font-family: sans-serif;
  font-weight: 200!important;
  font-size: 1.5rem;
  text-align: center;
  width:80%;
  margin:20% auto ;
  line-height: 1.5;
}
.websites-wrapper .hding{
  margin:17% auto !important;
}
.vid-wrapper .hding{
  margin:1% auto!important;
}
.pan{
  grid-column: 1/span 3;
}
.sp{
  width: 70px;
  height: 25px;
  position: relative;
  display: grid;
  place-items:center;
  margin:5% auto auto;
  cursor: pointer;

}
.sp img{
  position: absolute;
  width:100%;
  height: 100%;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  mix-blend-mode: lighten;


}
.social-media{
  position: absolute;
width:100%;
height: 90%;
position: absolute;
right:-100%;
top:10%;
transform: translateY(-30%);
/* background: red; */
transition: .5s ease;
opacity: 0;
margin: auto;
}
.social-media.active{
  right:50%;
  transform: translateX(50%);
  opacity: 1;

}
.soc-media-wrapper{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap:20px;
  place-items:center;
  width: 100%;
  height: 95%;
  margin: auto;
  overflow-y: scroll;
}
.soc-item{
  width:300px;
  height: 500px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items:center;
  transition: .3s ease;
  position: relative;
  margin:10px;
}
.soc-item a{
  display: grid;
  place-items:center;

}
.soc-item:hover,.website-items:hover{
  transform: scale(1.05);
}
.over{
  position: absolute;
  width:100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: .3s ease;
}
.website-items a{
  text-decoration: none;
  color:white;
  font-size: 1rem;

}
.website-items h3{
  font-size: 1.5rem;
  padding:.5rem 0;
}
.website-items:hover .over{
  background: rgba(0,0,0,.8);
  opacity: 1;
  z-index: 8!important;
  cursor: pointer;
}
.soc-item:hover .over{

  background: rgba(0,0,0,.6);
  opacity: 1;

}
.soc-item h4{
  text-decoration: none;
  color:white;
}
.soc-item img{
  position: absolute;
  width: 100%;
  height: 100%;
}


.websites-holder{
  width:100%;
  height: 90%;
  position: absolute;
  bottom:-100%;
  /* background: red; */
  transition: .3s ease;
  margin:auto;

}
.websites-holder.active{
  bottom:-1%;
}
.websites-wrapper{
  width: 100%;
  height: 100%;
  margin: auto;
  overflow-y: scroll;
  display: grid;
  grid-template-columns: repeat(1,1fr);
  place-items:center;
  grid-gap: 10px;
  padding: 1rem;

}
.website-items{
  width:65vw;
  height: 70vh;
  /* background: red; */
  transition: .3s ease;
  position: relative;
  font-family: 'scoth';
  /* margin: auto; */
}
.website-items img{
  position: absolute;
  width:100%;
  height:100%;
  object-fit: contain;

}
.campaigns-holder{
  width:100vw;
  height: 90vh;
  top:-100%;
  position: absolute;
  transition: .5s ease;
  overflow: hidden;
}
.campaigns-holder.active{
top:10%;

margin: auto;
z-index: 5;
/* background: red; */
}
.campaigns-wrapper{
  display: grid;
  grid-template-columns: repeat(1,1fr);
  width:90%;
  height: 100%;
  grid-gap: 10px;
  margin: auto;
  overflow-y: scroll;
  overflow-x: hidden;

}
.campaign-items{
  width:100%;
  margin: .5% auto;
  text-align: center;
  font-family: 'scoth';
  color:white;
  padding: 2rem 0;
  position:relative;
}
/* .campaign-img-holder::before{
  content: '';
  width:80%;
  margin: auto;
  height: 80%;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  background: #F4462Baa;
  background: rgba(255,255,255,.2);
  z-index: -1;
  border-radius: 15px;
} */
.campaign-items h3 ,.campaign-items p{
  line-height: 2;
}
.campaign-img-holder{
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: relative;
}
.campaign-img{
  width:300px;
  height: 300px;
  position: relative;
  margin: 1%;
  transition: .3s ease;
}
.campaign-img img{

  width:100%;
  height: 100%;
  object-fit: contain;

}
.campaign-img:hover{
  transform: scale(1.05);
}
.vid-wrapper{
  width: 90%;
  padding: .5rem;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap:20px;
opacity: 0;
position: absolute;
top:20%;
left:-100%;
transform: translateY(-20%);
transition: .8s ease;
pointer-events: none;
}
.vid-container{
  overflow-y: scroll;
  width:100%;
  height: 100%;
}
.vid-wrapper.active{
  opacity: 1;
  left:50%;
  transform: translateX(-50%);
  pointer-events: all;


}
.vid-holder{
  /* flex:1 1 700px; */
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0,0,0,.1);
  background-color: #fff;
  padding:15px;
  position: relative;
  width:800px;
  height: 450px;
  filter:drop-shadow(0px 13px 1rem black);


}
.vid-holder iframe{
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
z-index: 1000!important;
}
.vid-list{
  /* flex:1 1 350px; */
  height: 450px;
  width:30%;
  overflow-y: auto;

  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0,0,0,.1);
  box-shadow: inset 0px -2px 5px rgba(0,0,0,1);
  background-color: #fff;
  padding:15px;
  color:black;
  font-family: 'scoth',serif;
  font-size: 1.5rem;
  position: relative;

  /* flex-wrap: wrap; */
  /* gap:10px 0; */

}
.vid-list::-webkit-scrollbar,.soc-media-wrapper::-webkit-scrollbar,.websites-wrapper::-webkit-scrollbar,.container-wrapper::-webkit-scrollbar,.person-grid::-webkit-scrollbar,.campaigns-wrapper::-webkit-scrollbar{
  width:10px;
}
.vid-list::-webkit-scrollbar-thumb,.soc-media-wrapper::-webkit-scrollbar-thumb,.websites-wrapper::-webkit-scrollbar-thumb,.container-wrapper::-webkit-scrollbar-thumb,.person-grid::-webkit-scrollbar-thumb,.campaigns-wrapper::-webkit-scrollbar-thumb{
  background: black;
  background: #F4462B;
  border-radius: 10px;
}
.list{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width:100%;
  height: 70px;
  margin:5px 0;
  cursor: pointer;
  transition: .3s ease;
  border-bottom: 2px solid rgba(128,128,128,1);
  /* filter:drop-shadow(3px 3px 1rem black); */
  /* overflow-x: hidden; */
}
.list:hover{

  transform: scale(1.05);
}
.list img{
  position: absolute;
  width:100px;
  height:60px;
  object-fit: contain;
  left:2%;

}
.list h4{
font-size: 1.2rem;
position: absolute;
left: 40%;
/* width: 100%; */
display: inline;

}
.list p{
  display: none;
}
.contact-details{
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  gap:10px;
  align-items: center;
  width: 80%;
  /* height: 100%; */
  font-family: "Merriweather",serif;
  position: absolute;
  bottom:2%;

}
.phone,.email{
  display: flex;
  justify-content: center;
  align-items: center;
  margin:0 auto;
  padding: .5rem;
  font-size: 1.2rem;

}

.phone i,.email i{
  vertical-align: middle;
  margin: 5px 10px 0 10px;
}
.email a{
  text-decoration: none;
  color:white;
}
.head {
  text-align: center!important;
  /* margin-bottom: 2rem; */
  position: absolute;
  bottom:5%;
  display: none;
}
/* .work-container p,.with-container p,.mob-container p{
  width:60%;
} */
.close{
  position: fixed;
  top:2%;
  left:98%;
  transform: translateX(-98%);
  cursor: pointer;
  z-index: 2;
  font-size: 2.5rem;
  padding:0 .75rem;
  background: rgba(200,0,0,1);
  transition: 0.3s ease;
}
.close:hover{
  background: rgba(255,0,0,1);
  color:black;
}
.video-hover{
  position: absolute;
  width: 100%;
  height:100%;
  /* background: blue; */
  top:0;
}
.video-hover video{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(.5rem);
  opacity: 0;
  transition: .5s ease;
}
.video-hover video.active{
opacity: 1;
}
.person-grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  /* grid-template-columns: 1fr 1fr 1fr 1fr; */
  /* grid-template-rows: repeat(2,2fr); */
  grid-gap:10px;
  width:85%;
  /* height: 80%; */
  /* place-items:center; */
  margin-top:4%;

}
.conta{
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;
  /* gap:5px; */
  transition: .3s ease;
}
.conta .details{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100px;

}
.conta .details p{
  max-width:60%;
  text-align: center;
}
.mage-holder{
  position: relative;
  /* margin-top:15px; */
  width:120px;
  height: 120px;
  /* background: black; */
  border-radius: 50%;
  transition: .5s ease;
}
.mage-holder:hover{
  transform: scale(1.5);

}
.conta img{
  width:100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;

}



.conta .details{
  padding:1rem;
}
.person{
text-align: center;
margin-top: 2rem;
width:85%;
height: 100%;
padding: 3rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
background: rgba(190,190,190,1);
border-radius: 25px;
position: relative;
/* display: none; */
}
.cont{
  position: relative;
  display: flex;
  flex-direction: column;
  margin:5rem 3rem 2rem 3rem;
  /* gap:5%; */
  color:black;
  font-family: "Merriweather Sans", sans-serif;

}
.conta h3{
  font-size: 1.6rem;
  font-weight: 400;
  padding:.2rem;
}
.conta p{
  font-size: 1rem;
  font-weight: 300;

}

.details:nth-of-type(2){
  margin-top: 1rem;
}

.profile{
  position: relative;
  max-width: 300px;
  max-height: 400px;
}
.details{
  width:100%;
  height: 100%;
  /* margin-top: 2rem; */
}
/* swiper init */

.swiper {
  margin-top: 2rem;
   width: 70%;
   height: 65%;
   position: absolute;
   /* display: none; */
   /* left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
   margin-left: -150px;
   margin-top: -150px; */
 }

 .swiper-slide {
   background-position: center;
   background-size: cover;
 }

 .swiper-slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   cursor: pointer;
 }
 .swiper-button-next{

color:red!important;

}
.swiper-button-prev{

 color:red!important;

}

.swiper-pagination-bullet {
  background-color: #EF532D !important;
}
.swiper-slide p{
  display: none;
}
 #lightbox span {
   font-size: 3rem;
   color: white;
   position: absolute;
   top: 10px;
   right: 15px;
   cursor: pointer;
  display: none;
 }
#lightbox span.active{
  display: block;
}
 #lightbox.active {
   display: flex;
   width:100%;
   height: 100%;
   position: absolute;
   top:0;
   left:0;
   justify-content: center;
   align-items: center;
   z-index: 3;
   background: black!important;
 }


 #light-holder iframe {

   transform: translate(-50%, -50%);
 }
 @media (min-width:481px) and (max-width:785px){
   .pan{
     grid-column: span 2;
   }
.vid-wrapper .hding{
  position: absolute;
  top:-10%;
}
   .mark h2,.hold h2{
     font-size: 1.5rem;
     /* margin:auto 20px; */
   }
   .vid-list{
     width:100%;
     /* height: 50%; */
     height: 300px;
   }
   .vid-holder{
     max-height: 20%!important;
   }
   .hold.active h2{
     font-size: 1rem!important;
   }
   .close{
    font-size: 2rem;
    z-index: 10000;
   }

   .soc-media-wrapper{
     margin-top:1%;
     grid-template-columns: repeat(2,1fr);
   }
  .websites-wrapper{
    grid-template-columns: repeat(1,1fr);
  }

   .website-items{
     width:50vw;
     height: 20vh;
     margin: auto;
   }
   .person-grid{
     grid-template-columns: repeat(1,1fr)!important;
     width:100%;
     overflow-y: scroll;
     overflow-x:hidden;
     height:70vh;
   }
   .contact-details{
     width:100%;
     /* flex-direction: column; */
     bottom:0;
   }
   .campaign-items h3{
     font-size: 1.3rem;
   }
   .campaign-items p{
     font-size: 1rem;
   }
   .campaign-img-holder{
     flex-direction: column;
   }
   .campaign-img-holder::before {
     height: 85%;
   }
 }
@media (min-width:319px) and (max-width:480px){
  .partner a {
    font-size:1.2rem;
  }
  .mob-container h2{
    font-size: 2rem;
  }
  .mage-holder{
    width: 80px;
    height: 80px;
  }
  .conta .details{
    padding:.2rem;
    height: 100px;
  }
  .email,.phone{
    font-size: 1rem;
    padding:0.1rem
  }
  .pan{
    grid-column: span 1;
  }
  .vid-wrapper .hding{
    position: absolute;
  top: -15%;
  width: 100%;
  font-size: 1rem;
  margin: auto!important;
  }
  .hding{
    font-size: 1rem;
    width:100%;
  }
.al::before{
  /* left:80%;
  transform: translateX(-80%); */
  font-size: 2rem;
}
.al ul li{
  font-size: 1rem;
}
  .hold{
    flex-direction: column;

  }
  .hold h2{
    font-size:1.2rem!important;
    /* width:100%; */
    margin:15px auto;
  }
.hold.active{
  top:-1%;
  left:-5%!important;
  flex-direction: row;
  z-index: 100;
}
.hold.active h2{
  font-size: 1rem!important;
  margin: 5px;
}
.hold h2::before{
  content: '';
  display: none;
}
  .mark h2{
    font-size: 2rem;
  }
  .mark a{
    width:60%;
  }
  .vid-holder{
    height: 197px;
  }
.work-container{
  overflow: hidden;
}
  .vid-list{
    display: block;
    width:100%;
    height: 300px;
  }
  .list h4{
    left:50%;
  }
  .soc-media-wrapper,.websites-wrapper{
    grid-template-columns: repeat(1,1fr);
    height: 80vh;
    /* place-items:justify; */
  }
  .website-items{
    height: 20vh;
  }
  .soc-item{
    width:250px;
    height: 450px;
  }

.close{
  font-size: 2rem;
  padding: .2rem;
  z-index: 10000;
}
.person-grid{
  grid-template-columns: repeat(2,1fr)!important;
  overflow-y: scroll;
  height: 68vh;
  margin: 5vh auto;
  width:100%;
}
.conta .details p{
  max-width:100%!important;
  font-size: .9rem;
}
.conta .details h3{
  font-size: 1.2rem;
}
.contact-details{
  width:100%;
  flex-direction: column;
  bottom:5px;
  gap:2px;
}
.campaigns-wrapper{
  height: 80vh;
}
.campaign-items h3{
  font-size: 1.1rem;
  line-height: 1.5;
  padding-bottom:.5rem;
}
.campaign-items p{
  font-size: .9rem;
  line-height: 1.2
}
.campaign-img-holder{
  flex-direction: column;
}
.campaign-img-holder::before {
  height: 85%;
}
.campaign-img{
  width:250px;
}

}
@media (hover:none){
  .mage-holder:hover{
    transform: none;
  }
  .close:hover{
    transform: none;
  }
  .website-items>.over{
    opacity: 1;
    background: rgba(0,0,0,.7);
    z-index: 2;
  }
  .website-items .over > *{

    margin:0 auto;
    text-align: center;
  }
  .website-items >.over a{
    font-size: 1.2rem!important;
  }
  .website-items>.over p{
    font-size: .8rem!important;
    margin-top:.3rem;
    width:90%;
  }
}