* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: url(../img/logo-ps.svg) center center / contain no-repeat fixed, rgba(0,0,0,0.97);
    color: rgba(250,250,250,1);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

body.grid {
    position: absolute;
    width: 16800px;
    height: 10500px;
}

body.grid .viewport {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "border-top-left border-top border-top border-top border-top border-top border-top border-top border-top border-top-right"
			     "border-left main main main main main main main main border-right"
			     "border-left main main main main main main main main border-right"			     
			     "border-left main main main main main main main main border-right"
			     "border-left main main main center center main main main border-right"			     
			     "border-left main main main center center main main main border-right"
			     "border-left main main main main main main main main border-right"			     
			     "border-left main main main main main main main main border-right"
			     "border-left main main main main main main main main border-right"			     
			     "border-bottom-left border-bottom border-bottom border-bottom border-bottom border-bottom border-bottom border-bottom border-bottom border-bottom-right";
}

body.grid section.view {
    position: relative;
    top: 0;
    left: 0;
    width: 1680px;
    height: 1050px;
    background: rgba(250, 240, 20, .4);
    display: block;
    float: left;
    grid-area: main;
    border: 1px solid;
}
body.grid section.view:nth-child(odd) {
    background: rgba(250, 240, 20, .8);
}
body.grid section.view:nth-child(10n+0)::after {
    display: table;
    content: '';
    clear: both;
}

body.grid section.view.center {
    grid-area: center;
    background: rgba(255,120,20, .8);
}

body.grid section.view:nth-child(10n) {
    grid-area: border-right;
    background: rgba(255,120,20, .6);
}
body.grid section.view:nth-child(10n):first-child {
    grid-area: border-top-right;
    background: rgba(255,120,20, .7);
}
body.grid section.view:nth-child(10n):last-child {
    grid-area: border-bottom-right;
    background: rgba(255,120,20, .7);
}

body.grid section.view:nth-child(10n+1) {
    grid-area: border-left;
    background: rgba(255,120,20, .6);
}
body.grid section.view:nth-child(10n+1):first-child {
    grid-area: border-top-left;
    background: rgba(255,120,20, .7);
}
body.grid section.view:nth-child(10n+1):last-child {
    grid-area: border-bottom-left;
    background: rgba(255,120,20, .7);
}

#info {
    position: fixed;
    top: 10rem;
    left: 10rem;
    width: 42rem;
    min-height: 19rem;
    z-index: 99;
    padding: 1rem;
    background: rgba(0,0,0,.75);
    border: 1rem solid rgba(140,160,100,1);
    border-radius: 2rem;
    border-top-left-radius: 0;
    display: block;
    color: blue;
    opacity: 0.25;
}

#info.on {
    color: black;
    opacity: 1;
    transition: all 2s ease-out 0s;
}
#info.on::after {
    display: block;
    content: 'Information Panel';
    text-align: center;
    font-family: 'Cormorant Garamond';
    font-weight: bold;
    font-size: 2.4rem;
    position: relative;
    top: -5rem;
}

#info ul.features li::before {
    content: attr(data-feature) + ' is: NOT SUPPORTED.';
    color: #f00;
    display: block;
}
#info ul.features li::after {
    content: attr(data-feature) + ' is: DISABLED.';
    color: #c00;
}

.slides {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 30rem;
    perspective-origin: 100% 100%;
}

.slide, .slide-content {
    transform-style: preserve-3d;
    transform: translateZ(0); /* hw accel */
}
.slide-bg {
    transform: translateZ(-20rem) scale(1.5);
    transform-origin: 100% 100%;
    background-image: repeating-linear-gradient( rgb(102, 204, 102), rgb(102, 204, 102) 30px, rgb(92, 184, 92) 30px, rgb(92, 184, 92) 60px );
}


.vdo {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
    vertical-align: center;
    width: 100%;
    height: 100%;
}



/* Only add parallax effects to supporting browsers -- http://keithclark.co.uk/articles/practical-css-parallax/ */
@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) {

    #info ul.features li::before {
	content: attr(data-feature) + ' is: SUPPORTED.';
	color: #0c0;
    }
    @media screen and (min-width: 45em) {
	#info ul.features li::after {
	    content: attr(data-feature) + ' is: ENABLED.';
	    color: #090;
	}
    }

    body {
	transform: translateZ(0px); /* Fix paint bugs on Edge and HW accel on Safari */
	overflow: hidden;
    }

    body.grid {
	perspective: auto;
	transform-origin: center center;
	transform: translateZ(0);
	perspective: 150rem;
	transform-origin: top left;
    }

    body.shift {
	animation: colorshift 5s 3s 3 ease-in-out;
	perspective: 1px;
	transform-origin: center center;
    }

    .vdo {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% + 0px);
	height: calc(100% + 0px);
	margin: auto;
	z-index: 9;
    }

    .vdo .player {
	position: relative;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0.25;
    }
    .vdo .player:hover {
	transition: all 3s ease-out;
	opacity: .95;
    }

    .vdo .player video {
	position: relative;
	width: 100%;
	height: 100%;
	opacity: 1;
    }





    
    .anim {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: green;

    	transition:
	top 3s cubic-bezier(.34,.63,.26,.94),
	left 3s cubic-bezier(.34,.63,.26,.94),
	transform 1s linear;
    }

    

    .anim.container {
	position: relative;
	top: 10rem;
	left: 10rem;
	width: 10rem;
	height: 10rem;
	background: green;
	
	transform: rotateX(90deg);
	transform-style: preserve-3d;
	overflow: visible;

	transition:
	top 3s cubic-bezier(.34,.63,.26,.94),
	left 3s cubic-bezier(.34,.63,.26,.94),
	transform 1s linear;
    }

    div.butterfly {
	transform-style: preserve-3d;
        position: absolute;
        top: calc(7.5rem);
        left: calc(50% - 7.5rem);
    	display: block;
        width: 15rem;
        height: 15rem;
        border: 1px solid white;
        border-radius: 50%;
        animation: moveXY 2s infinite ease-out;
	transform-origin: center center;
    }
    .wing {
	transform-style: preserve-3d;
        animation: flap 1.2s linear infinite alternate;
        background: radial-gradient(ellipse at center, rgba(252, 180, 100, 0.9) 32%,rgba(28, 92, 42, 0.9) 100%);
    	display: block;
	   position: relative;
        top: 30%;
        margin-top: -1.5rem;
        padding: 1rem;
        border-bottom: 0.2rem solid green;
        width: 6rem;
        height: 8rem;
        border-radius: 50%;
    }
    .rear.wing {
        transform: scale(1.5);
        margin-top: -6rem;
	width: 5rem;
	height: 10rem;
        background: radial-gradient(ellipse at center, rgba(252, 180, 100, 0.9) 2%,rgba(28, 92, 42, 0.9) 100%);
    }
    .rear.left {
        left: calc(50% - 5rem);
    }
    .rear.right {
	left: calc(50% + 0px);
    }
    .left {
        transform-origin: right center;
        left: calc(50% - 6.2rem);
        float: left;
    }
    .right {
        transform-origin: left center;
        left: calc(50% + 2px);
    }


    .triangle-left{
	width: 0;
	height: 0;
	border-top: 50px solid transparent; /* this will fill the top gap */
	border-right: 100px solid red; /* this will be the red triangle */
	border-bottom: 50px solid transparent; /* this will fill the bottom gap */
    }
    
    .triangle-right {
	width: 0;
	height: 0;
	border-top: 50px solid transparent; /* this will fill the top gap */
	border-left: 100px solid red; /* this will be the red triangle */
	border-bottom: 50px solid transparent; /* this will fill the bottom gap */
    }

    .entry {
	position: relative;
	min-height: 40rem;
	text-align: center;
    }

    .entry div {
	position: absolute;
	left: 50%;
	top: 50%;
    }
    .entry div::before,
    .entry div::after {
	position: absolute;
	content: '';
	display: block;
   }

    #building::after {
	padding: 5rem;
	content: 'Singularités';
	left: -0.5rem;
	top: 3.5rem;
	color: #faf37e;
	overflow: hidden;
	font-size: 2.3rem;
	text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 25px #ffa500, 0 0 40px #ffa500, 0 0 60px #f00, 0 0 80px #f00, 0 0 105px #f00;
    }

    
    
    @keyframes colorshift {
	58% { background-color: rgba(77,13,158, .95); }
    }

    @keyframes shake {
	0%   { background-position: 50% 50%; transform: scale(1,1); }
	45%  { background-position: 45% 50%; transform: scale(.085,.095); }
	75%  { background-position: 50% 45%; }
	100% { background-position: 50% 50%; transform: scale(1,1); }
    }
    
    @keyframes moveX {
	0%   { transform: translateX(0%); }
	100% { transform: translateX(100%); }
    }

    @keyframes moveY {
	0%   { transform: translateY(0%); }
	100% { transform: translateY(100%); }
    }

    @keyframes moveZ {
	0%   { transform: translateZ(0%); }
	100% { transform: translateZ(100%); }
    }

    @keyframes moveXY {
	0%   { transform: translateX(0) translateY(0) translateZ(0) rotateX(45deg) rotateX(0); }
	50%  { transform: translateX(-20rem) rotateX(-15deg) translateY(30rem); translateZ(1rem); rotateY(2deg); }
	100% { transform: translateX(0) translateY(-20rem) translateZ(-1rem) rotateX(45deg); }
    }

    @keyframes flap {
	0%   {
	    transform: rotateY(80deg);
	}
	100% {
	    transform: rotateY(-80deg);
	}
    }

} /* Parallax Stuff */