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

#intro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 1;
    animation: fadeOut 5s;
}

.fadeOut {
    opacity: 0;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@-o-keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
    
@-webkit-keyframes fadeOut {
    0% {opacity: 1; height: 100%;}
    30% {opacity: 1; height: 100%;}
    99% {opacity: 0; height: 100%; top:0;}
    100% {height: 0; top:-100%; z-index: 0;}
}
         
@-moz-keyframes fadeOut {
    0% {opacity: 1; height: 100%;}
    30% {opacity: 1; height: 100%;}
    99% {opacity: 0; height: 100%;}
    99% {opacity: 0; height: 100%; top:0;}
    100% {height: 0; top:-100%; z-index: 0;}
}
         
@keyframes fadeOut {
    0% {opacity: 1; height: 100%;}
    30% {opacity: 1; height: 100%;}
    99% {opacity: 0; height: 100%; top:0;}
    100% {height: 0; top:-100%; z-index: 0;}
}

.fadeOut {
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 0;
    background-color: #ffffff;
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    animation-delay: 1.5s;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.logo.intro {
    position: absolute;
    width: 10.4vw;
    height: auto;
    top: 32.7vh;
    left: 50%;
    margin-left: -5.2vw;
}

h1.intro {
	font-family: 'Open Sans', sans-serif;
    font-weight: 500;
	width: 100%;
	position: absolute;
    font-size: 50px;
    top: 51vh;
}


/* RESPONSIVE */
/* PADIT */
 /* iPAD PRO */     
/* --- ISO IPAD --- */
@media only screen and (max-width: 1100px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation:portrait){
    .logo.intro {
    top: 35%;
}

h1.intro {
	top: 50%;
}
}

/* ----------- Retina ----------- */
@media screen and (max-width: 360px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) {
    .logo.intro {
        width: 70px;
        height: 70px;
        top: 35%;
        left: calc(50% - 35px);
        margin-left: -0;
    }
      
    h1.intro {
        font-size: 30px;
        bottom: 15%;
    }
}


@media screen and (max-width: 360px){
    .logo.intro {
        width: 75px;
        height: 75px;
        top: 30%;
        left: calc(50% - 35px);
    }
      
    h1.intro {
        font-size: 25px;
        bottom: 15%;
    }
    
}