/*MOBILE VERSION*/
body{
    cursor: url('../img/target.png'), auto;
}

.preloader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: white;
    z-index: 99999;
}

.preloader .item {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}


html,
body {
    font-family: 'Coming Soon', cursive;
    font-size: 10px;
    color: black;
    font-weight: 400;
}

a {
    text-decoration: none;
    outline: none;
    font-size: 14px;
}

h1 {
    font-size: 25px;
    color: white;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 6px;
    line-height: 1.2;
}

p {
    font-size: 14px;
    color: white;
    font-weight: 300;
    letter-spacing: 1px;
    margin-top: 40px;
}

::selection {
    background: #88992a;
    color: white;
}

::-moz-selection {
    background: #88992a;
    color: white;
}

.home {
    height: 100vh;
    display:flex;
    width: 100vw;
     position: fixed;
}

.cover{
    width: 65vw;
    align-self: center;
    opacity:1;

}

.cover.active{
    opacity:0;
    transition: opacity 1s ease;
}


.home h1 {
    width: 63vw;
    text-align: right;
    font-size: 3.8em;
    font-family: 'lato', sans-serif; 
    align-self: center;
    padding: 10px 0px;
}

.home h4 {
    text-align: right;
    font-size: 2em;
    color: white;  
    align-self: center;
}

.container {
    width: 100vw;
    height: 215vh;
    z-index: 10;
    background: url('../img/anaismobile.jpg') center fixed no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.scrollslow{
    color:white;
    padding-top: 88vh;
    text-align: center;
    width: 100vw;
    z-index: 999;
    position: absolute;
    font-family: 'lato', sans-serif; 

}

.arrow-down {
    position: fixed;
    bottom: 110px;
    left: 50%;
    margin-left: -10px;
    width: 21px;
    height: 29px;
    background: url(../img/arrow-down.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+ */
}


@-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;
    }
}


/* Plane*/
		#contact {
			height: 100vh;
			position: fixed;
            background-color: #88992a;
			width: 77vw;
            border-radius: 50px;
            z-index: 10000;
			transition: 1000ms all cubic-bezier(0.19, 1, 0.22, 1);
			transform: translateX(-70vw);
            left:0;
        }

		#contact.expanded {
			transform: translateX(-10vw);
            left:0;
		}

		.contact-inner {
			width: 100%;
			height: 100vh;
            padding:10vh 0vw;
			position: relative;
            transform: translateX(3vw);

		}

		.plane {
            position: fixed;
            right: 0;
            padding: 50vh 1vw;
            font-size: 1.5em;
            color:#333333;
            height: 100vh;
            vertical-align: middle;
		}

h1{
    text-align: center;
    padding-top: 15vh;
    font-size: 2.5em;
    transform: translateX(3vw);

}

.me {
    text-align: center;
     padding-top: 5vh;
}

.me h3 {
    padding: 20px 0px;
}

.contact-inner p, h4{
    color:white;
    text-align: center;
    font-size: 1.1em;
}

.contact-inner p{
    padding-top: 7vh;
}
.contact-inner h4{
    padding-top: 2vh;
}
    
#contact h1{
            padding-top: 12vh;
    font-size: 1.6em;
}

.blob {
  position: absolute;
  top: 0;
  right:65vw;
  fill: rgba(255,255,255, 0.75);
  width: 50vmax;
  z-index: -1;
  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); }
}


/* Anaïs*/
.anais.active{
    opacity:1;
    position:  relative;
}

.anais.white{
    background-color: white;  
}

.anais{
    height: 215vh;
    opacity:0;
    width:100vw;
    transition: opacity 2s ease, background-color 1.5s ease;
    position:relative;
    top:0;
    left: 0;
    display:flex;
    background-color: rgba(136, 153, 42, 0.65);
}

.vert.active{
    opacity:1;
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}


.vert{
    position: fixed;
    opacity:0;
    padding-top: 20vh;
    
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.anais img {
    width: 50%;
    margin-left: 80px;
    position: absolute;
    
}

.anais p {
    color: white;
    text-align: right;
    margin-left: 100px;
    font-size: 2.5em;
    line-height: 50px;
    align-self: center;
    margin-top: 180px;
    
}

.anais h8 {
    font-size: 0.5em;
    align-self: center;
}

.download {
    padding-top: 50px;
    margin-left: 30vh;
    background-color: transparent;
    border: none;
    
    
}

.download a {
    font-size: 3em;
    text-decoration: none;
    color: white;
}

.download a:hover {
    color: #303030;
    text-decoration: none;
}


/* Portfolio */

.portfolio.active{
    opacity:1;
}

.portfolio{
    opacity:0;
    transition: opacity 2s ease;
    position: relative;
    background: white;
    padding-top: 50px;
     transform: translateY(-50vh);
}

.portfolio .portfolio-margin {
    position: relative;
    width: 100vw - 15vw;
    padding: 0 15vw;
    overflow: hidden;
}

.portfolio .portfolio-margin h1 {
    font-size: 2.em;
    color: #88992a;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;    
}

.portfolio .portfolio-margin hr {
    margin: 2% 16%;
    padding: none;
    background-color: #88992a;
    height: 1px;
    width: 50vw;
    border: 0;
}


/* Portfolio grid */

.grid {
    width: 68vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: 100%;
    padding-top: 40px;
    
    
}

.grid li {
    width:80%;
    position: relative;
    
}

.grid a {
    padding: 10px;
    display: block;
    
}

.grid img {
    width: 100%;
    
}

.grid .text {
    position: absolute;
    top:10px;
    background: white;
    z-index: 2;
    opacity: 0;
    -webkit-transition: all 0.6s ease-in;
    -moz-transition: all 0.6s ease-in;
    -ms-transition: all 0.6s ease-in;
    -o-transition: all 0.6s ease-in;
    transition: all 0.6s ease-in;
    text-align: center; 
    width: 100%;
    height: 100%;

}

.grid .text:hover {
    opacity: 0.8;
}

.text a { 
    font-size: 3em;
    color: #88992a;
    padding-top: 4vh;
}

/* Internship */

.internship {
    transform: translateY(-45vh);
    width: 100vw;
    text-align: center;
    z-index: 10000000000;
    padding: 0px;
}

.internship h2, .internship p{
    color:#3c3c3c;
    margin: 10px 0px;
}

.internship a{
    color: #88992a; 
    text-decoration: underline;
}
.internship a:hover{
    color: #88992a; 
    text-decoration: none;
}

/* Go back */

.goback {
    transform: translateY(-40vh);
    width: 100vw;
    text-align: center;
    z-index: 10000000000;
    padding: 0px;
}

.goback a{
    color:#3c3c3c;
    text-align: center;
    font-size: 1.6em;
    padding: 10px;    
}
.goback a:hover{
    color: #88992a; 
}



/* Footer */

.footer {
    bottom: 0;
    width: 100vw;
    height: 25vh;
    background: #3c3c3c;
     transform: translateY(-35vh);
}


.footer .menu-footer {
    text-align: center;
    padding: 5vh;
}


.footer .menu-footer a {
    font-size: 2.5em;
    color: white;
    padding: 14px;
    line-height: 46px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.menu-footer a:hover {
    color: #88992a;
}

.copyright {
    position: relative;
    font-weight: 300;
    text-align: center;
    font-size: 14px;
    color: #a4a4a4;
    padding: 0;
}

.copyright a {
    color: #a4a4a4;
}

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

.copyright p {
    color: #a4a4a4;
    font-family: 'lato', sans-serif;
    font-size: 0.78em;
    padding: 3px 12px;
    margin-top: 10px;
}


/* iPad (portrait) */
@media only screen and (min-width: 650px) and (max-width:800px)

{


    html,
    body {
        font-size: 15px;
    }

    a {

        font-size: 14px;
    }

    h1 {
        font-size: 25px;
    }

    p {
        font-size: 14px;
    }

    /* HOME */
    
.container {
        background: url('../img/anaisipad.jpg') center fixed no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

.cover{
        width: 55vw;
    align-self: center;
     opacity:1;

}

.home h1 {
    font-size: 2.2em;
    width: 53vw;
}

.home h4 {

    font-size: 1.2em;
}
    
    .anais img {
    width: 45%;
    margin-left: 20vw;
    
}

.anais p {
    font-size: 2em;
    margin-top: 20vh;
    
}
       .download {
    margin-left: 35vw;
  
}

      .portfolio .portfolio-margin hr {
    width: 50vw;
}
    
    .grid li {
    width:80%;
    
}

.text a {
    
    padding: 5vh;
    
}

    .me h3{
        font-size: 1em;
    }
    
    .me h7{
        font-size: 0.8em;
    }

 .grid .text {
     width: 100%;
    
} 
     /* Footer */
    
    .footer .menu-footer a {
    font-size: 1.8em;
}
 }

/* iPad2 (portrait) */
@media only screen and (min-width: 800px) and (max-width:1200px)

{

    html,
    body {
        font-size: 15px;
    }

    a {

        font-size: 14px;
    }

    h1 {
        font-size: 25px;
    }

    p {
        font-size: 14px;
    }

    /* HOME */
    
.container {
        background: url('../img/anaisipad.jpg') center fixed no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

.home h1 {
    font-size: 3em;
    width: 53vw;
}

.home h4 {

    font-size: 1.5em;
        width: 55vw;

}
    
    .anais img {
    width: 50%;
    margin-left: 20vw;
    
}

.anais p {
    font-size: 2em;
    margin-top: 20vh;
        margin-left: 20vw;

    
}
  
 
/* Plane*/
		#contact {
			width: 90vw;
			transform: translateX(-82vw);
}
    
    #contact h1{

    font-size: 1.5em;
}

    
    .me{
         font-size: 1.2em;
    }

.contact-inner p, h4{
    font-size: 1.2em;
}


.blob {
    margin-right: 10vw;
}
    .download {
    margin-left: 35vw;
  
}
    
    
      .portfolio .portfolio-margin hr {
    width: 50vw;
}
        .portfolio .portfolio-margin h1 {
    font-size: 2.5em;
}
    
    .grid{
        transform: translateX(3vw);
    }

 .grid .text {
     width: 100%;
    
}
       .grid li {
    width:50%;
    
}

.text a {
    
    padding: 3vh;
    
}

    
     /* Footer */
    
    .footer .menu-footer a {
    font-size: 1.8em;
}
 }


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

    html,
    body {
        font-size: 15px;
    }


    /* HOME */
    
.container {
        background: url('../img/anaisweb.jpg')  bottom center fixed no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .home h1 {
    font-size: 3.5em;
    width: 45vw;
}

.home h4 {

    font-size: 1.8em;
        width: 48vw;

}
    
    .anais img {
    width: 50%;
    margin-left: 20vw;
    
}

.anais p {
    font-size: 2em;
    margin-top: 20vh;
        margin-left: 20vw;

    
}
  
 
/* Plane*/
		#contact {
			width: 90vw;
			transform: translateX(-85vw);
}
    
    #contact h1{

    font-size: 1.5em;
}

    
    .me{
         font-size: 1.2em;
    }

.contact-inner p, h4{
    font-size: 1.2em;
}


.blob {
    margin-right: 10vw;
}
    .download {
    margin-left: 29vw;
  
}
    
    
      .portfolio .portfolio-margin hr {
    width: 30vw;
          margin: 0 22vw;
}
        .portfolio .portfolio-margin h1 {
    font-size: 2.5em;
}
    
    .grid{
        transform: translateX(3vw);
    }

 .grid .text {
     width: 100%;
    
}
       .grid li {
    width:33%;
    
}

.text a {
    
    padding: 4.5vh;
    
}

    
     /* Footer */
    
    .footer .menu-footer a {
    font-size: 1.8em;
}
 }