@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

@font-face {
  font-family: "Coconat-Regular";
  src: url("./fonts/Coconat-Regular.woff2") format("woff2"),
       url("./fonts/Coconat-Regular.woff") format("woff");
}

:root {
  --content-width: 115rem;
  --mainColor: #362ADE;
}

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

html {
  font-family: 'Open Sans','Helvetica', 'Arial', sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  line-height: 140%;
}

li {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all .3s ease;
}

footer,
section{
	padding: 1.25rem;
  margin-top:3rem;
  opacity: 0;
  transition:  opacity .3s ease 1s;
}

.loaded footer{
  opacity: 1;
}

.landing{
  margin-top:0rem;
}

.landing p > em{
  position: relative;
  display: inline-block;
  font-style: normal;
}

.landing p > em:before{
  content:  "";
  position: absolute;
  top: -60px;
  left: 25px;
  width:  100px;
  height: 135px;
  background:  url('/assets/icons/jul.png') no-repeat center;
  background-size:  100%;
  opacity: 0;
  transition:  opacity .3s ease;
}

.landing em.display:before{
  opacity: 1;
}

section a{
	border-bottom: 1px solid #000;
  position: relative;
}

section a:after{
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -1px;
  left:0;
  background: #000;
  transition: width .3s ease .3s;
}

section a:hover:after{
  width: 100%;
}

section a:hover{
  border-bottom: 1px solid transparent;
}

.underline,
a.active,
a:hover{
  border-bottom: 1px solid #000;
}

strong,
b {
  font-weight: 500;
}

img {
  width: 100%;
}

p{
  max-width: 900px;
}


h1, h2, h3, h4{
  font-weight: normal;
}

.capitalize{
  text-transform: capitalize;
}

/*/ LAYOUT /*/

.flex{
  display:-webkit-flex;
  display:flex;
}

.space-btw{
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.flex-column{
  -webkit-flex-direction:column;
  flex-direction: column;
}

.w_50{
  width:50%;
}

.w_66{
  width:66.666666%;
}

.w_33{
  width:33.333333%;
}

.w_25{
  width:25%;
}

.grid > div{
  margin-top: 3.5rem;
}

.grid > div:first-of-type{
  margin-top:0;
}

@media screen and (min-width:1024px){
  .grid{
    --gutter: 1.43rem;
    display: grid;
    --columns: 16;
    --gutter: 0;
    grid-gap: var(--gutter);
    grid-template-columns: 1fr;
  }
  .grid.c-2{
    grid-template-columns: repeat(2, 1fr);
  }
  .grid.c-main{
     grid-template-columns: calc(40% - 0.75rem) calc(60% - 0.75rem);
  }
  .grid.c-3{
    grid-template-columns: repeat(3, 1fr);
  }
  .grid.c-4{
    grid-template-columns: repeat(4, 1fr);
  }
  .grid.c-5{
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 100px;
  }
  section{
    padding: 1.25rem;
    margin-top:6.25rem;
  }
}

.margin-s{
  margin:0.7em;
}

.margin_b-s{
  margin-bottom:0.7em;
}

.margin_t-s{
  margin-top:0.7em;
}

.margin-m{
  margin:1.43em;
}

.margin_t-m{
  margin-top:1.43em;
}

.margin_b-m{
  margin-bottom:1.43em;
}

.margin-l{
  margin:3.57em;
}

.margin_b-l{
  margin-bottom:3.57em;
}

.margin_t-l{
  margin-top:3.57em;
}

.margin-xl{
  margin:7.14em;
}

.margin_r-xl{
  margin-right:7.14em;
}

.margin_b-xl{
  margin-bottom:7.14em;
}

.margin_t-xl{
  margin-top:7.14em;
}

.margin-xxl{
  margin:14.2em;
}

.margin_t-xxl{
  margin-top:14.2em;
}


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

  html{
    font-size: 16px;
  }

  .no-flex_mb{
    display:block;
  }

  .margin_b-m_mb{
    margin-bottom:1.43em;
  }

  .margin_t-l_mb{
    margin-top:3.57em;
  }

  .margin_b-l_mb{
    margin-bottom:3.57em;
  }

  .margin_t-xl_mb{
    margin-top:7.14em;
  }

  .margin_t-xxl_mb{
    margin-top:14.2em;
  }

  .no-margin_mb{
    margin:0;
  }

  .w_100_mb{
    width: 100%;
  }
}

.landing{
  height:0;
  overflow: hidden;
  transition: height .5s ease .5s;
  color: transparent;
}

.loaded .landing{
	height:100vh;
	position:relative;
}

.loaded section{
  opacity: 1;
}

.landing > .grid{
	position:absolute;
	width:100%;
	bottom: 3.75rem;
	padding:1.25rem;
	left: 0;
  opacity: 0;
  transition: opacity .3s ease 1s;
}

.loaded .landing > .grid{
  opacity: 1;
}

#contact img{
  width: 100px;
}

@media screen and (min-width:1024px){
  .title-sticky{
    position: sticky;
    top:80px;
    height: 100px;
  }
}

/*/ COLORS /*/

.main-typecolor a,
.main-typecolor{
	color:var(--mainColor);
  transition:  color .3s ease-in-out;
}

.white-typecolor{
	color:#fff;
}

.grey-typecolor{
	color: rgba(79,79,79,1);
}

.main-bgcolor{
	background-color:var(--mainColor);
  transition:  background-color .3s ease-in-out;
}

.main-typecolor a{
	border-bottom: 1px solid var(--mainColor);
  transition:  all .3s ease-in-out;
}

.white-typecolor a{
	border-bottom: 1px solid #fff;
}

.main-typecolor a:hover{
  border-bottom: 1px solid transparent;
}

.main-typecolor a:after{
  background: var(--mainColor);
  transition:  width .3s ease-in-out .3s;
}

.white-typecolor a:after{
  background: #fff;
}

/*/ TYPOS /*/

.title{
	font-size: 2.1875rem;
	line-height:1.3;
  font-family: Coconat-Regular, Helvetica, sans-serif;
}

.small-p{
  font-size: .8rem;
  line-height:1.3;
}

/*/ HEADER /*/

.main-header{
	position:fixed;
	z-index:999;
	padding: 1.25rem;
	width:100%;
	top:0;
	left:0;
  color: transparent;
  transition: color .3s ease 1s, background-color .3s ease-in-out;
}
#menu a{
  font-family: Coconat-Regular, Helvetica, sans-serif;
}

.main-header a{
  color:  transparent;
}

.loaded .main-header a,
.loaded .main-header{
  color:#fff;
}

.main-header a.logo,
.main-header a.logo:hover{
  border-bottom: none;
  font-family: Coconat-Regular, Helvetica, sans-serif;
}

.main-header nav li{
	padding-right:3.125rem;
}

.main-header nav li a:hover{
	border-bottom: 1px solid #fff;
}

#mobile-menu{
  width: 30px;
  height:40px;
  display:none;
  position:relative;
  top:-8px;
  z-index: 9999;
  background: transparent;
  border:none;
  position:absolute;
}
#mobile-menu > span{
    width: 100%;
    height:2px;
    background-color:#fff;
    position: relative;
    top: 50%;
    left: 0;
    display: block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    transition: background-color .5s ease;
}
#mobile-menu > span:before,
#mobile-menu > span:after{
  content:"";
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  background-color:#fff;
  top: -8px;
  left:0;
  transition: transform .5s ease;
}
#mobile-menu > span:after{
  top:8px;
}

#mobile-menu.menu-open > span{
  background-color:transparent;
}
#mobile-menu.menu-open > span:before{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0;
}
#mobile-menu.menu-open > span:after{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 0;
}

@media screen and (max-width: 768px){
  #mobile-menu{
    display:block;
    top: -10px;
    right: 20px;
  }

  @media not all and (min-resolution:.001dpcm) { @media {
    #mobile-menu {
      top:10px;
    }
  }}


  #menu{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 60px;
    left: 0;
    background-color:var(--mainColor);
    padding: 20px;
    font-size:2em;
    line-height:2;
    transition: transform .3s ease;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }

  .menu-open #menu{
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  .title-s-mb{
    font-size: 1.5rem;
  }
}

/*/ PROJECTS /*/
.projects header > a{
  text-decoration:none;
  border-bottom: none;
}

.projects h3{
  line-height:1.1;
  max-width:600px;
  margin-bottom:.6rem;
  display:inline-block;
  border-bottom: 1px solid transparent;
  position:relative;
}

.projects header span{
  display:inline-block;
  position:relative;
  width: 15px;
  height: 15px;
  right:-10px;
  top: -3px;
  opacity:0;
  transition: opacity .3s ease .3s;
}

.projects header span svg{
  fill:  var(--mainColor);
}

.projects header a:after{
  background: transparent;
}

.projects header a h3:after{
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -1px;
  left:0;
  background: var(--mainColor);
  transition: width .3s ease;
}

.projects header a h3:hover:after{
  width: 100%;
}

.projects header h3{
  margin-top: .5em;
}

.projects h3:hover + span{
   opacity:1;
}

.projects > .grid > .grid > div{
  position: relative;
  max-width: 75%;
}

.projects figure{
  width: 100%;
  height: 0;
  display: block;
  position: relative;
  padding-bottom: 56%;
}

.projects figure iframe{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 768px){
  .projects > .grid > .grid > div{
    max-width: 100%;
  }
}