/* Mobile VERSION */

body{
    cursor: url('../img/target.png'), auto;
     color: #303030;
}
 
.home{
    position: fixed;
    z-index: 100000;
    background-color: white;

}

.home a{
    color: #303030;
    position: fixed;
    padding: 3vh;
    font-size:25px;
     z-index: 100000;
    background-color: white;
    border-radius: 100px;
}

.home a: hover{
    
    color:#88992a;
}


.cover {
    text-align: right;
    font-size: 15px;
    font-family: 'lato', sans-serif;
    width: 44vw;
    position: fixed;
    height: 100vh;
    padding: 40vh 2vw 40vh 4vw;
}

.cover a {
    font-size: 13px;
    padding: 0 ;
    right: 67vw;
}

h1{
font-family: 'Coming Soon', cursive;
    padding-right: 15vw;
}

p {
   
    border-radius: 20px;
    padding-right: 15vw;
    
}

input[type=checkbox] {
	clear: both;
	display: none;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
	position: absolute;
	z-index: 10;
	height: 6em;
	width: 6em;
	right:15vw;
	display: block;
	text-align: center;
	line-height: 95px;
	cursor: pointer;
	-webkit-transition: all 300ms ease;
	transition: all 300ms ease;
	border-radius: 50%;
	background-color: #fff;
}

input[type="checkbox"] + label:before {
	content: '';
	z-index: -1;
	position: absolute;
	background: rgb(220, 72, 127);
	width: 100%;
	height: 100%;
	border-radius: 50%;
	top: 0;
	left: 0;
	transform: scale(0);
	-webkit-ransform: scale(0);
}

input[type="checkbox"] + label:after {
	content: '';
	z-index: -1;
	position: absolute;
	background: white;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	top: 0;
	left: 0;
	transform: scale(0);
	-webkit-transform: scale(0);
}

input[type="checkbox"]:checked + label svg {
	-webkit-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	fill: rgb(220, 72, 127);
	transform: scale(1.3);
	-webkit-transform: scale(1.3);
}

input[type="checkbox"]:checked + label:after {
	-webkit-animation: like-a 0.3s 0.2s forwards;
	-moz-animation: like-a 0.3s 0.2s forwards;
	animation: like-a 0.3s 0.2s forwards;
}

input[type="checkbox"]:checked + label:before {
	-webkit-animation: like-a 0.5s 0s forwards;
	-moz-animation: like-a 0.5s 0s forwards;
	animation: like-a 0.5s 0s forwards;
}

label svg {
	display: inline-flex;
	vertical-align: middle;
	width: 35px;
	fill: rgb(167, 167, 167);
}

@-webkit-keyframes like-a {
100% {
	-webkit-transform:scale(1.03);
	transform:scale(1.03);
	-moz-transform:scale(1.03);
} }
@-moz-keyframes like-a {
100% {
	-webkit-transform:scale(1.03);
	transform:scale(1.03);
	-moz-transform:scale(1.03);
} }
@keyframes like-a {
100% {
	-webkit-transform:scale(1.03);
	transform:scale(1.03);
	-moz-transform:scale(1.03);
} }


.blob {
  position: absolute;
  top:0;
  fill: #88992a;
right:100vw;
  width: 20vmax;
  z-index: -1000000;
  animation: move 10s ease-in-out infinite;
  transform-origin: 50% 50%;
    
}

@keyframes move {
  0%   { transform: scale(1)   translate(10px, -30px); }
  38%  { transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg); }
  40%  { transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg); }
  78%  { transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg); }
  80%  { transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg); }
  100% { transform: scale(1)   translate(10px, -30px); }
}

   .link a{
        margin-right: 12vw;
    }

.link{
            padding-top: 7vw;
}

.categorie {
 padding: 25vh 0 0 10vw;
}

.categorie p{
    background-color:#88992a; 
    color: white;
    width: 20vw;
    padding: 0;
    margin: 20px;
    text-align: center;
}
.arrow-down {
    position: absolute;
    bottom: 110px;
    left: 65vw;
    margin-left: -10px;
    width: 21px;
    height: 29px;
    background: url(../img/arrow-down%202.png) no-repeat center center;
    display: block;
    -webkit-animation: bounce-fade 1.2s infinite;
    /* Safari 4+ */
    -moz-animation: bounce-fade 1.2s infinite;
    /* Fx 5+ */
    -o-animation: bounce-fade 1.2s infinite;
    /* Opera 12+ */
    animation: bounce-fade 1.2s infinite;
    /* IE 10+ */
        z-index: 100000000;
}


@-webkit-keyframes bounce-fade {
    0% {
        opacity: 0;
        bottom: 70px;
    }

    100% {
        opacity: 1;
        bottom: 35px;
    }
}

@-moz-keyframes bounce-fade {
    0% {
        opacity: 0;
        bottom: 70px;
    }

    100% {
        opacity: 1;
        bottom: 35px;
    }
}

@-o-keyframes bounce-fade {
    0% {
        opacity: 0;
        bottom: 70px;
    }

    100% {
        opacity: 1;
        bottom: 35px;
    }
}

@keyframes bounce-fade {
    0% {
        opacity: 0;
        bottom: 70px;
    }

    100% {
        opacity: 1;
        bottom: 35px;
    }
}

.work{
    width:100vw;
    height: 100vh;
    transform: translateY(-3%)
}
.work1,
.work2,
.work3,
.work4,
.work5,
.web,
.work6,
.work7,
.work8{
    text-align: right;
    padding: none;
    margin: none;
        padding: 30vh 0;

}

.work1 img,
.work2 img,
.work3 img,
.work4 img,
.work5 img,
.work6 img,
.work7 img,
.work8 img{
    height: 33vh;
    border-radius: 50px;

}

.web img{
        height: 87vh;
}

   video{
        height: 100vh;
    }

/* IPAD VERSION */
@media only screen and (min-width: 580px) {


.home a{
    padding: 3vh;
    font-size:25px;
}


h1{
    padding-right: 8vw;
}

p {
    padding-right: 8vw;
    
}
    .link{
            padding-top: 1vw;
}
   .link a{
       
        margin-right: 10vw;
    }
    input[type="checkbox"] + label {

	right:10vw;
	
}

.cover {

    width: 40vw;
    padding: 40vh 2vw 40vh 4vw;
}

.cover a {
    font-size: 13px;
    right: 67vw;
}


.blob {

  width: 40vmax;
    
}
    
.categorie {
 padding: 30vh 0 0 10vw;
}

.categorie p{
    width: 15vw;
    padding: 0;
    margin: 0vh 10px 0 10px;
    text-align: center;
}

    .arrow-down {
    margin-left: 8vw;

}

.work1,
.work2,
.work3,
.work4,
.work5,
.web,
.work6,
.work7,
.work8{
        padding: 30vh 5vw;
    
}

.work1 img,
.work2 img,
.work3 img,
.work4 img,
.work5 img,
.work6 img,
.work7 img,
.work8 img{
    height: 35vh;
    border-radius: 50px;

}

.web img{
        height: 87vh;
}
    }  

/* IPAD2 VERSION */
@media only screen and (min-width: 800px) {


.home a{
    padding: 3vh;
    font-size:25px;
}

h1{
    padding-right: 10vw;
}

p {
    padding-right: 10vw;
    
}
   .link a{
        margin-right: 10vw;
    }
    input[type="checkbox"] + label {

	right:10vw;
	
}

.cover {

    width: 40vw;
    padding: 40vh 2vw 40vh 4vw;
}


.cover a {
    font-size: 13px;
    right: 67vw;
}


.blob {

  width: 40vmax;
    
}

.categorie {
 padding: 30vh 0 0 12vw;
}

.categorie p{
    width: 12vw;
    padding: 0;
    margin: 2vh 10px 0 10px;
    text-align: center;
}

    .arrow-down {
    margin-left: 8vw;

}

.work1,
.work2,
.work3,
.work4,
.work5,
.work6,
.work7,
.work8,
.web{
        padding: 20vh 5vw;
    
    
}

.work1 img,
.work2 img,
.work3 img,
.work4 img,
.work5 img,
.work6 img,
.work7 img,
.work8 img{
    height: 48vh;

}

.web img{
        height: 87vh;
}
    } 
 
/* IPAD2 VERSION */
@media only screen and (min-width: 1100px) {


.home a{
    padding: 3vh;
    font-size:25px;
}
    
h1{
    padding-right: 13vw;
}

p {
    padding-right: 13vw;
    
}
   .link a{
        margin-right: 5vw;
    }
        input[type="checkbox"] + label {

	right:18vw;
	
}

.cover {

    width: 50vw;
    padding: 40vh 2vw 40vh 4vw;
}

.cover a {
    font-size: 13px;
    right: 67vw;
}


.blob {

  width: 40vmax;
    
}

.categorie {
 padding: 30vh 7vw 0 0vw;
}

.categorie p{
    display: inline-block;
    width: 12vw;
    padding: 0;
    margin: 8vh 10px 0 10px;
    text-align: center;
}

    .arrow-down {
    margin-left: 8vw;

}
.work1,
.work2,
.work3,
.work4,
.work5,
.work6,
.work7,
.work8,
.web{  padding: 20vh 5vw;
    
    
}

.work1 img,
.work2 img,
.work3 img,
.work4 img,
.work5 img,
.work6 img,
.work7 img,
.work8 img{
    height: 55vh;

}

.web img{
        height: 87vh;
}
    } 
 

/* WEB VERSION */
@media only screen and (min-width: 1400px) {

  .home a{
    padding: 3vh;
    font-size:25px;
}

.cover {

    font-size: 15px;
    width: 55vw;
    padding: 40vh 0vw;
}

.cover a {
    font-size: 13px;
}


.blob {

  width: 50vmax;
    
}

.categorie {
 padding: 30vh 6vw;
}

.categorie p{
    display: inline-block;
    width: 12vw;
    padding: 0;
    margin: 8vh 10px 0 10px;
    text-align: center;
}

    .arrow-down {
    margin-left: 10vw;

}

.work1,
.work2,
.work3,
.work4,
.work5,
.work6,
.work7,
.work8,
.web{
        padding: 10vh 2vw;
    
}
    
    .web{
        padding-right: 15vw;
    }
    
.work1 img,
.work2 img,
.work3 img,
.work4 img,
.work5 img,
.work6 img,
.work7 img,
.work8 img{
    height: 80vh;

}

.web img{
        height: 87vh;
}
    
    
}