/*
*
* Global
*
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Quicksand:wght@300;400;500;600;700&display=swap');
@font-face {
  font-family: canela;
  src: url("http://localhost/projects/withshapes.com/v2/assets/fonts/canela/canela_light.otf");
}
:root {
 /* --primary-color: #30CFD0;*/
  --primary-color: #ff6b6b;
  --dark-bg-color: #000000;
  --dark-text-color: #ffffff;
  --dark-border-color: #ffffff;
  --light-bg-color: #ffffff;
  --light-text-color: #000000;
  --light-border-color: #000000;
  --primary-font-family:'Montserrat', sans-serif;
  --body-font-size:13px;
  --body-font-weight:400;
}

.ss-main-color{
    color:var(--primary-color);
}
html{
   height:100%;    
}
body{
    overflow-x:hidden;
    height:100vh;    
 }
body.dark{
    background-color:var(--dark-bg-color);
    color:var(--dark-text-color);
}
body.light{
    background-color:var(--light-bg-color);
    color:var(--light-text-color);
}


/*
*
*
* Intro / Outro
*
*
*/
.ss-intro{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:10;    
}
.ss-intro.dark{
    background-color:var(--dark-bg-color);
}
.ss-intro.light{
    background-color:var(--light-bg-color);
}
.ss-outro{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ss-outro.dark{
    background-color:var(--dark-bg-color);
}
.ss-outro.light{
    background-color:var(--light-bg-color);
}
#work-outro{  
    transform: translateX(100%);
}
#services-outro{  
    transform: translateX(-100%);
}

/*
*
*
* Header
*
*
*/
.ss-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  padding:30px 25px;
  z-index:3;
}
.ss-header .logo img{
  width:70px;
}
.ss-header label{
  display:flex;
   flex-direction:column;
   width:30px;
   cursor:pointer;
 } 
.ss-header label span{
   border-radius:0px;
   height:3px;
   margin: 3px 0;
   transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
 } 
 body.chess .ss-header label span{
   background-color:var(--light-bg-color);
 }
 body.chess .ss-header label.open span{
   background-color:var(--dark-bg-color);
 }
body.dark .ss-header label span{
  background-color:var(--light-bg-color);
}
body.light .ss-header label span{
  background-color:var(--dark-bg-color);
}
body.dark .ss-header label.open span{
  background-color:var(--dark-bg-color);
}
body.light .ss-header label.open span{
  background-color:var(--light-bg-color);
}

.ss-header span:nth-of-type(1){
   width:50%;   
 }
 .ss-header span:nth-of-type(2){
   width:100%;
 } 
 .ss-header span:nth-of-type(3){
   width:75%;  
 }
 .ss-header input[type="checkbox"]{
   display:none;
 }
 .ss-header input[type="checkbox"]:checked ~ span:nth-of-type(1){
   transform-origin:bottom;
   transform:rotatez(45deg) translate(4px,0px)
 }
 .ss-header input[type="checkbox"]:checked ~ span:nth-of-type(2){   
   transform-origin:top;
   transform:rotatez(-45deg)
 }
 .ss-header input[type="checkbox"]:checked ~ span:nth-of-type(3){   
   transform-origin:bottom;
   width:50%;
   transform: translate(14px,-5px) rotatez(45deg); 
 }
 
 /*
 *
 *
 * Nav
 *
 *
 */
 .ss-nav{
  position:fixed;
  top:0;
  right:0;
  width:100%;
  height:100%;
  z-index:2;
  transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
  transform:translateX(100%);
}
body.chess > .ss-nav{
  background-color:var(--light-bg-color);
  color:var(--light-text-color);
}
body.dark > .ss-nav{
  background-color:var(--light-bg-color);
  color:var(--light-text-color);
}
body.light > .ss-nav{
  background-color:var(--dark-bg-color);
  color:var(--dark-text-color);
}
.ss-nav.open{
  transform:translateX(0px);
}
.ss-nav .ss-nav-inner{
 padding:100px 50px 50px;
}
.ss-nav .ss-nav-links ul{
  list-style-type:none;
  padding:0px;
  margin:0px;
}
.ss-nav .ss-nav-links ul li{
  margin:20px 0px;
}
.ss-nav .ss-nav-links a{
    font-family:var(--primary-font-family);
    font-weight:700;
    font-size:32px;
    line-height: 0.9em;
    text-transform: uppercase;
  text-decoration:none;
}
body.chess > .ss-nav .ss-nav-links a:hover, body.dark > .ss-nav .ss-nav-links a:hover, body.light > .ss-nav .ss-nav-links a:hover{
  color:var(--primary-color);
}
body.chess > .ss-nav .ss-nav-links a.active, body.dark > .ss-nav .ss-nav-links a.active, body.light > .ss-nav .ss-nav-links a.active{
  color:var(--primary-color);
}
body.chess > .ss-nav .ss-nav-links a{
  color:var(--light-text-color);
}
body.dark > .ss-nav .ss-nav-links a{
  color:var(--light-text-color);
}
body.light > .ss-nav .ss-nav-links a{
  color:var(--dark-text-color);
}
.ss-nav .ss-nav-contacts span{
  display:block;
  font-family:var(--primary-font-family);
  font-weight:500;
  font-size:12px;
  line-height: 0.9em;
  text-transform: uppercase;
  padding-bottom:5px;
  /*opacity:0.6;*/
}
.ss-nav .ss-nav-contacts a{
  text-decoration:none;
  font-family:var(--primary-font-family);
  font-weight:var(--body-font-weight);  
  font-size:var(--body-font-size);
  text-transform: uppercase;
}
.ss-nav .ss-nav-contacts .contacts{
  margin: 40px 0px;
}
body.chess > .ss-nav  .ss-nav-contacts a:hover{
  color:var(--light-text-color);
}
body.dark > .ss-nav  .ss-nav-contacts a:hover{
  color:var(--light-text-color);
}
body.light > .ss-nav .ss-nav-contacts a:hover{
  color:var(--dark-text-color);
}
body.light > .ss-nav .ss-nav-contacts a:hover{
  color:var(--dark-text-color);
}

@media (min-width: 576px) {
  .ss-header{
    padding:30px 50px;
  }
  .ss-nav{
    width:350px;
    transform:translateX(350px);
  }
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
 
}
@media (min-width: 1200px) {
  
}
/*
*
*
* Footer
*
*
*/
.ss-footer{
  padding:30px 25px;
  text-transform:uppercase; 
}
.ss-footer:not(.home-footer){ 
  height:100%;
}

.ss-footer .copyrights{
  font-family:var(--primary-font-family);
  font-size:var(--body-font-size);
  font-weight:var(--body-font-weight);
}
.ss-footer .social a{
  font-family:var(--primary-font-family);
  font-size:var(--body-font-size);
  font-weight:var(--body-font-weight);
  margin-left:20px;
  text-decoration:none;
}
body.chess .ss-footer .social a{
  color:var(--dark-text-color);
}
body.dark .ss-footer .social a{
  color:var(--dark-text-color);
}
body.light > .ss-footer .social a{
  color:var(--light-text-color);
}
body.chess .ss-footer .social a:hover{
  color:var(--primary-color);
}
body.dark .ss-footer .social a:hover{
  color:var(--primary-color);
}
body.light > .ss-footer .social a:hover{
  color:var(--primary-color);
}
@media (min-width: 576px) {
  .ss-footer{
    padding:30px 50px;
  }
}
@media (min-width: 768px) {
  /*.ss-footer{
    height:100%;
  }*/
}

/*
*
*
* Page Cover
*
*
*/
.ss-cover{
    height:100%;
}
.ss-cover.dark{
    background-color:var(--dark-bg-color);
}
.ss-cover.light{
    background-color:var(--light-bg-color);
}
.ss-cover .ss-cover-title{
    width:60%;
    text-align:center;
    text-transform:uppercase;
}
.ss-cover .ss-cover-title{   
  font-family:var(--primary-font-family);
    font-weight:800;
    font-size:36px;
    line-height: 0.9em;
}
.ss-cover.dark .ss-cover-title{    
  color:var(--dark-text-color);
}
.ss-cover.light .ss-cover-title{    
    color:var(--light-text-color);
}
.ss-cover .arrow {
    width: 0;
    height: 40px;
    position: relative;
    animation: scroll 1.5s infinite;
    -webkit-animation: scroll 1.5s infinite;
    margin-top:50px;
}
.ss-cover .arrow::after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: -5px;
    width: 1px;
    height: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.ss-cover.dark .arrow{    
    border: 1px solid #FFFFFF;
}
.ss-cover.light .arrow{    
    border: 1px solid var(--light-border-color);
}
.ss-cover.dark .arrow::after {
    border-top: 10px solid var(--dark-border-color);
}
.ss-cover.light .arrow::after {
    border-top: 10px solid var(--light-border-color);
}
  
@keyframes scroll {
    0% {
      height: 40px;
    }
    30% {
      height: 70px;
    }
    60% {
      height: 40px;
    }
}
@-webkit-keyframes scroll {
    0% {
      height: 40px;
    }
    30% {
      height: 70px;
    }
    60% {
      height: 40px;
    }
}
@media (min-width: 768px) {
    .ss-cover .ss-cover-title{
        font-size:48px;
    }
}
@media (min-width: 992px) {
    .ss-cover .ss-cover-title{
        font-size:72px;
    }
}
@media (min-width: 1200px) {
    .ss-cover .ss-cover-title{
        font-size:92px;
    }
}

/*
*
*
* Home
*
*
*/
.h-arrow {
    width: 40px;
    height: 0px;
    position: relative;
    animation: scroll-h 1.5s infinite;
    -webkit-animation: scroll-h 1.5s infinite;
    display:inline-block;
  }
.h-arrow::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
    width: 10px;
    height: 1px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
.h-arrow.right {   
    border: 1px solid var(--dark-border-color);
    margin-left:10px;
    margin-right:8px;
}
.h-arrow.right::after {    
    left: 100%;
    border-left: 10px solid var(--dark-border-color);
}
.h-arrow.left {
    border: 1px solid var(--light-border-color);
    margin-right:10px;
    margin-left:8px;
}
.h-arrow.left::after {   
    right: 100%;
    border-right: 10px solid var(--light-border-color);
}

@keyframes scroll-h {
    0% {
      width: 40px;
    }
    30% {
      width: 70px;
    }
    60% {
      width: 40px;
    }
  }
  @-webkit-keyframes scroll-h {
    0% {
      width: 40px;
    }
    30% {
      width: 70px;
    }
    60% {
      width: 40px;
    }
}
.home{
    height:100%;
    width:100%;
    text-transform:uppercase;
}
.home .home-left, .home .home-right{
    height:100%;
    display:flex;
    justify-content:center;
    flex-direction:column;   
    transition: width 2s;
    font-family:var(--primary-font-family);
}
.home .home-left .home-left-wrapper, .home .home-right .home-right-wrapper{   
    position:relative;
    opacity:0;
}
.home .home-left p, .home .home-right p{
    margin-bottom:0px;
}
.home .home-left{
    align-items:end;
    text-align:left;
    float:left;
    background-color:var(--light-bg-color);
    color:var(--light-text-color);
}
.home .home-right{   
    align-items:start;
    text-align:right;
    background-color:var(--dark-bg-color); 
    color:var(--dark-text-color); 
}
.home .ss-home-title{
    font-weight:800;
    font-size:36px;
    line-height:1em;    
    z-index:2;
    position:relative;
}
.home .home-left .ss-home-title{   
    padding:5px 20px; 
    background-color:var(--dark-bg-color);
    color:var(--dark-text-color);
}
.home .home-right .ss-home-title{   
    padding:5px 20px; 
    background-color:var(--light-bg-color);
    color:var(--light-text-color);
}
.home .ss-home-subtitle{
    font-weight:800;
   font-size:26px;
   line-height:1em;
   position:absolute;
   z-index:1;
}
.home .ss-home-link{
    position:absolute;
    z-index:1;
  
}
.home .home-right .ss-home-subtitle, .home .home-right .ss-home-link{   
    right:0;
}
.home .home-left .ss-home-subtitle{
    top:-26px;
}
.home .home-right .ss-home-link{
    top:-22px;
}
.home .ss-home-link a{
    text-decoration:none;
    display:flex;
    align-items:center;
    font-size:13px;
}
.home .ss-home-link .pronoun{
    display:none;
}
.home .home-left .ss-home-link a{
   color:var(--light-text-color);
}
.home .home-right .ss-home-link a{   
   color:var(--dark-text-color);
}

@media (min-width: 576px) { 
  .home .ss-home-title{
      font-size:42px;
  }
  .home .ss-home-subtitle{
      font-size:28px;
  }
  .home .ss-home-link .pronoun{
      display:inline-block;
  }
  .home .home-left .ss-home-subtitle{
      top:-28px;
  }
}
@media (min-width: 768px) { 
  .home .ss-home-title{
      font-size:48px;
  }
  .home .ss-home-subtitle{
      font-size:32px;
  }
  .home .home-left .ss-home-subtitle{
      top:-32px;
  }
}
@media (min-width: 992px) {   
  .home .ss-home-title{    
      font-size:96px;
  }
  .home .ss-home-subtitle{    
      font-size:62px;
  }
  .home .home-left .ss-home-subtitle{
      top:-62px;
  }
}

/*
*
*
* Work
*
*
*/
.ss-projects-wrapper{
    width:100%;
    min-height:100vh;
    overflow-x:hidden;
 }
 .ss-projects-wrapper .ss-project{
    display:inline-block;
    color:var(--dark-text-color);
 }
 .ss-projects-wrapper .ss-project .ss-project-inner{
    position:relative;
    width:100%;
    height:100%;
    padding:50px 30px;
 }
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-left{
    z-index:3;
 }
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-right{
    margin-top:30px;
    z-index:1;
    position:relative;
    display:inline-block;
 }
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-title{
    font-family:var(--primary-font-family);
    font-weight:600;
    font-size:42px;
    line-height:0.90em;
    text-transform:uppercase;
    margin:-8px -8px;
 }
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-brief{
    font-family:var(--primary-font-family);
    font-size:var(--body-font-size);
    font-weight:var(--body-font-weight);
    line-height:1.2em;
    text-transform:uppercase;
    width:100%;
    padding:25px 0px 0px 0px;
 }
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-cs{
  font-family:var(--primary-font-family);
  font-size:var(--body-font-size);
  font-weight:var(--body-font-weight);
  line-height:1.2em;
  text-transform:uppercase;
  width:100%;
  padding:25px 0px 0px 0px;
}
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-link{
  padding:25px 0px 0px 0px;
}
 
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-link a{
  font-family:var(--primary-font-family);
  font-size:var(--body-font-size);
  font-weight:var(--body-font-weight);
  line-height:1.2em;
  text-transform:uppercase;
  width:100%;
  color:#FFFFFF;
  text-decoration:none;
}
.ss-projects-wrapper .ss-project .ss-project-inner .ss-project-link a:hover{
  opacity:0.7;
}
 
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-type{
    font-family:var(--primary-font-family);
    font-size:var(--body-font-size);
    font-weight:var(--body-font-weight);
    line-height:1.2em;
    text-transform:uppercase;
    padding-bottom:5px;
    float:right;
 }
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-image,
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-border{
    width:100%;
 }
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-image{
    position:relative;
    z-index:2;
 }
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-border{
    position:absolute;
    bottom:-10px;
    right:-10px;
    z-index:1;
 } 
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-image img,
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-border img{
    width:100%;
 }

@media (min-width: 768px) { 
  .ss-projects-wrapper .ss-project{
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
 }
  .ss-projects-wrapper .ss-project .ss-project-inner{
    width:70%;
    height:80%;
    padding:0px 0px;
 }
  .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-title{   
    font-size:72px;
    line-height:0.90em;
    margin:-8px -8px;
 }
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-brief{  
    width:75%;
  }
}

@media (min-width: 992px) {   
  .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-brief{  
    width:50%;
  } 
 }

@media (min-width: 1200px) { 
  .ss-projects-wrapper .ss-project .ss-project-inner{
    width:65%;
    min-height:70vh;
    padding:0px 0px;
 }
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-left,
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-right{
    position:absolute;
    top:0;
    left:0;
    width:100%;
 }
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-right{
    margin-top:0px;
    display:flex;
    align-items:end;
    justify-content:end;
    flex-direction: column; 
 } 
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-title{   
    font-size:96px;
 }  
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-brief{  
    width:25%;
  } 
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-image,
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-border{
    width:85%;
 }
 .ss-projects-wrapper .ss-project .ss-project-inner .ss-project-border{
    bottom:-30px;
    right:-30px;
 } 
}


/*
*
*
* Services
*
*
*/
.ss-services-wrapper{
  width:100%;
  padding-top:0px;
  overflow-x:hidden;
}
.ss-services-wrapper .ss-service{
  display:inline-block;
  padding:0px 50px 100px;
}
.ss-services-wrapper .ss-service .ss-service-title{
  font-family:var(--primary-font-family);
  font-weight:600;
  font-size:42px;
  line-height:0.90em;
  text-transform:uppercase;
}
.ss-services-wrapper .ss-service .ss-service-inner .ss-service-title.part-1{   
  text-align:left;
}
.ss-services-wrapper .ss-service .ss-service-brief{
  font-family:'Montserrat', sans-serif;
  font-size:var(--body-font-size);
  font-weight:var(--body-font-weight);
  line-height:1.2em;
  text-transform:uppercase;
  width:100%;
}
.ss-services-wrapper .ss-service .ss-service-inner .ss-service-brief{  
  width:70%;
  padding-top:10px;
}

@media (min-width: 768px) { 
/*  .ss-services-wrapper{   
    padding-top:50px;
  }*/
  .ss-services-wrapper .ss-service{
     width:100%;
     height:100%; 
     display:flex;
     align-items:center;
     justify-content:center;
     padding:0px 0px 300px;
  }
  .ss-services-wrapper .ss-service .ss-service-inner{
     width:75%;
     height:80%;
  }
  .ss-services-wrapper .ss-service .ss-service-inner .ss-service-title{   
     font-size:72px;
     line-height:0.90em;
  }
  .ss-services-wrapper .ss-service .ss-service-inner .ss-service-title.part-2{   
     margin-top:10px;
  }
  .ss-services-wrapper .ss-service .ss-service-inner .ss-service-brief{  
     padding-top:0px;
     width:75%;
  }
}
@media (min-width: 992px) {   
  .ss-services-wrapper .ss-service .ss-service-inner .ss-service-brief{  
     width:50%;
  } 
  .ss-services-wrapper .ss-service .ss-service-inner .ss-service-title.part-1{   
     text-align:center;
  }
  .ss-services-wrapper .ss-service .ss-service-inner .ss-service-title.part-2{   
     margin-top:10px;
  }
}
@media (min-width: 1200px) { 
  .ss-services-wrapper .ss-service .ss-service-inner{
     width:75%;
     height:70%;
     padding:0px 0px;
  }
  .ss-services-wrapper .ss-service .ss-service-inner .ss-service-title{   
     font-size:126px;
  }
  .ss-services-wrapper .ss-service .ss-service-inner .ss-service-title.part-2{   
     margin-top:-20px;
  }
  .ss-services-wrapper .ss-service .ss-service-inner .ss-service-brief{  
     width:60%;    
  } 
}

/*
*
*
* CTA
*
*
*/
.ss-cta{
  height:100%;
  /*min-height:60vh;*/
}
.ss-cta .cta-title{     
    font-weight:800;
    font-size:36px;
    line-height: 0.9em;
}
.ss-cta-1 .cta-title{   
    font-family:var(--primary-font-family);
}
.ss-cta-2 .cta-title{   
  font-family:canela, serif;
}
.ss-cta .cta-contacts span{   
    font-family:var(--primary-font-family);
    font-weight:var(--body-font-weight);
    font-size:18px;
    line-height: 0.9em;
    display:block;
    padding-bottom:20px;
}
.ss-cta .cta-contacts a{   
  font-family:var(--primary-font-family);
  font-weight:800;
  font-size:18px;
  line-height: 0.9em;
  text-decoration:none;
}
body.dark .ss-cta .cta-contacts a{   
  color:var(--dark-text-color);
}
body.light .ss-cta .cta-contacts a{   
  color:var(--light-text-color);
}
body.dark .ss-cta .cta-contacts a:hover, body.light .ss-cta .cta-contacts a:hover{   
  color:var(--primary-color);
}
@media (min-width: 576px) {
  .ss-cta .cta-title{
      font-size:52px;
  }
}
@media (min-width: 768px) {
  .ss-cta{   
  height:100%;
  }
  .ss-cta .cta-title{
      font-size:62px;
  }
  .ss-cta .cta-contacts a{   
    font-size:24px;
  }
}
@media (min-width: 992px) {
  .ss-cta .cta-title{
      font-size:82px;
  }
  .ss-cta .cta-contacts a{   
    font-size:36px;
  }
  
}
@media (min-width: 1200px) {
  .ss-cta .cta-title{
      font-size:92px;
  }
}