@charset "UTF-8";
/* CSS Document */

*{
  margin: 0;
  padding: 0;
  color: black;
  box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

a{
  text-decoration: none;
}

body{
  background-color: #2c185b;
  color: #ff6b68;
}

/*FONTS*************************/
/*******************************/

@font-face {
	font-family: "OldSansBlack-underline";
	src: url('medias/fonts/old-sans-black-underline.ttf');
}

@font-face {
	font-family: "OldSansBlack";
	src: url('medias/fonts/old-sans-black.ttf');
}

@font-face {
	font-family: "Noto Mono";
	src: url('medias/fonts/noto-mono.ttf');
}

/*HEADINGS************************/
/********************************/

.home1{
  font-family: 'OldSansBlack-underline', sans-serif;
  font-size: 10vw;
  text-transform: uppercase;
  position: fixed;
  left: 2vw;
  top: 5vw;
  transition: all 0.3s ease;
  color: #ff6b68;
  z-index: 10;
}

  .minHome1{
    font-size: 3vw;
    top: 2.7vw;
    transition: all 0.3s ease;
  }

.home2{
  font-family: 'OldSansBlack-underline', sans-serif;
  font-size: 10vw;
  text-transform: uppercase;
  position: fixed;
  left: 2vw;
  top: 1.5vw;
  transform: rotateY(-180deg) rotateZ(180deg);
  transition: all 0.3s ease;
  color: #ff6b68;
  z-index: 10;
}

  .minHome2{
    font-size: 3vw;
    transition: all 0.3s ease;
  }

header a:hover .home1{
  top: 3vw;
}

header a:hover .home2{
  top: 3vw;
}

h3{
  font-family: 'OldSansBlack', sans-serif;
  font-size: 5vw;
  text-transform: uppercase;
  position: absolute;
  color: white;
}

.title1{
  top: 22vw;
  right: 0;
}

.title2{
  top: 22.15vw;
  right: 0;
  transform: rotateY(-180deg) rotateZ(180deg);
  transition: all 0.3s ease;
  color: rgba(255,255,255,0.5);
}

  .title:hover .title2{
    top: 25.9vw;
    right: 0;
    transform: rotateY(-180deg) rotateZ(180deg);
    transition: all 0.3s ease;
    color: rgba(255,255,255,0.5);
  }

/*MAIN**************************/
/*****************************/

.main{
  margin-top: 50rem;
  width: 100%;
}

article{
  position: relative;
  margin: 2rem;
  width: calc(50% - 4rem);
  height: auto;
}

/*ARTICLE LEFT*******************/
/****************************/

.article-left{
  left: 0;
  margin-top: 10rem;
}

  .media-left{
    background-color: black;
    box-shadow: 20px 20px 0px 0 #000;
    position: relative;
    border: 5px solid #000;
    width: 100%;
    height: auto;
    transition: all 0.3s ease;
  }

  .media-left:hover{
    box-shadow: none;
    transition: all 0.3s ease;
  }

  .media-left img{
    width: 100%;
    height: auto;
  }

  .media-left video{
    width: 100%;
    height: auto;
  }

      /* Hide Play button + controls on iOS */
    video::-webkit-media-controls {
        display:none !important;
    }

    .video{
      background-image: url('medias/petit-play.jpg');
      background-size: cover;
      width: 100%;
      height: 100%;
    }



  .text-left{
    background: black;
    padding: 1rem;
    font-size: 1rem;
    font-family: 'Noto Mono', serif;
    width: calc(100% - 2rem);
    position: relative;
    top: -2rem;
    left: 50%;
    box-shadow: 20px 20px 0 0 #000;
    background: #ff6b68;
    color: white;
  }

    .text-left:hover{
      background: black;
      box-shadow: 20px 20px 0 0 #ff6b68;
      color: #ff6b68;
    }

  /*ARTICLE RIGHT*******************/
  /******************************/

  .article-right{
    left: calc(50% - 4rem);
    margin-top: 10rem;
  }

    .media-right{
      background-color: black;
      box-shadow: -20px 20px 0px 0 #000;
      position: relative;
      border: 5px solid #000;
      width: 100%;
      height: auto;
      transition: all 0.3s ease;
    }

    .media-right:hover{
      box-shadow: none;
      transition: all 0.3s ease;
    }

    .media-right img{
      width: 100%;
      height: auto;
    }


    .text-right{
      background: black;
      padding: 1rem;
      font-size: 1rem;
      font-family: 'Noto Mono', serif;
      width: calc(100% - 2rem);
      position: relative;
      top: -2rem;
      right: 50%;
      box-shadow: -20px 20px 0 0 #000;
      background: #ff6b68;
      color: white;
    }

      .text-right:hover{
        background: black;
        box-shadow: -20px 20px 0 0 #ff6b68;
        color: white;
      }

/*ANIMATION BAR******************/
/******************************/

.bar {
  position: absolute;
  background: #ff6b68;
  transition: all 1.4s linear;
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

  .top {
    width: 10%;
    height: 6px;
    top: 0;
    left: 0;
  }
  .right {
    width: 6px;
    height:0;
    top:0;
    right: 0;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  .bottom {
    width: 0;
    height: 6px;
    bottom: 3px;
    left: 0;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  .left {
    width: 6px;
    height:10%;
    top: 0;
    left: 0;
  }

    @-webkit-keyframes h-move {
      0% {width: 0%; left: 0;}
      10%{width: 2%;}
      50%{width: 10%;}
      100% {width: 0%; left: 100%;}
    }
    @keyframes h-move {
      0% {width: 0%; left: 0;}
      10%{width: 2%;}
      50%{width: 10%;}
      100% {width: 0%; left: 100%;}
    }
    .media-right:hover .top, .media-right:hover .bottom,
    .media-left:hover .top, .media-left:hover .bottom{
     -webkit-animation-name: h-move;
     animation-name: h-move;
    }

    @-webkit-keyframes v-move {
      0% {height: 0%; left: 0;}
      10%{height: 2%;}
      50%{height: 10%;}
      100% {height: 0%; left: 100%;}
    }
    @keyframes v-move {
      0% {height: 0%; top: 0;}
      10%{height: 2%;}
      50%{height: 10%;}
      100% {height: 0%; top: 100%;}
    }
    .media-right:hover .right, .media-right:hover .left,
    .media-left:hover .right, .media-left:hover .left {
     -webkit-animation-name: v-move;
     animation-name: v-move;
    }

/*MEDIA QUERIES*/

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

  h3{top: 15rem;}

  .main{margin-top: 30rem;}

	article{width: calc(100% - 4rem);}

  .article-right{left: 0;}

  .text-left{left: 0%;}

  .text-right{left: 0%;}

}

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

  h3{top: 10rem;}

  .main{margin-top: 20rem;}

	article{margin: 0; width: 100%;}

  .article-right{left: 0;}

  .media-left{box-shadow: none; border: none;}

  .media-right{box-shadow: none; border: none;}

  .bar{display: none;}

  .text-left{left: 0; top: 0; width: 100%;}

  .text-right{left: 0; top: 0; width: 100%;}

}