@import url(https://fonts.googleapis.com/css?family=Open+Sans);

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,300);

@import url(https://fonts.googleapis.com/css?family=Titillium+Web);


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

html {
    overflow: hidden;
}

body{
	background-color: #E8E8E8;
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
	device-width:100%;
	device-height:100%;
}

#logo {
    position: fixed;
    text-transform: uppercase;
    transform: skew(0deg,0deg);
    left:31vw ;
    top: 21vw;
    font-weight: normal;
    font-size:6vw;
    color:#431F6D;
    opacity:1;
}


#logo span {
	font-size:4.2vw;
}


#sub_logo {
    display:none;
	opacity: 1;
    position: fixed;
    color: white;
    font-size: 1.1vw;
    text-transform: uppercase;
    top: 4.4vw;
    left: 14.1vw;
    transform: skew(30deg,-30deg);
}


#sub_logo span {
    font-size: 0.9vw;
}

#left {
	position: fixed;
    max-width: 737px;
    width: 40vw;
    left: 10vw;
    top: 4vw;
}

.toleft { 
    left: -7vw;
    top: -6.5vw;
    transform-origin: 50% 50%;
    transform: rotate(-30deg);
}

#right {
    position: fixed;
    max-width: 737px;
    width: 40vw;
    transform-origin: 50% 50%;
    transform: rotate(-30deg);
    transform-origin: 50% 50%; transform: rotate(0deg); right: 10vw; top: 30vw; margin-top: 0vw
}


#menuportfolio,#menuabout, #menucontact {
    display:none;
}
.menuportfolio,.menuabout, .menucontact {
    position: fixed;
    text-transform: uppercase;
    text-align: center;
    font-size: 2vw;
    width: 100%;
}

a .menuportfolio,a .menuabout, a .menucontact {
    height: 7vw;
    background-color: #7130bb;
    text-decoration: none;
    color:white;
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    line-height: 7vw;
    font-size: 2.35vw;
    transition: background-color 1s;
}

.menuportfolio {
    top: 0vw;
    left: 5vw;
    transform: skew(30deg,-30deg) translate(-24vw,0);
    animation-name: animationBandeauPortfolio;
    animation-timing-function: ease-in;
    animation-duration: 1s;
    -webkit-transition: -webkit-transform 2s ease-in-out;
}

.movefolio {
    top: 0vw;
    left: 5vw;
    transform: skew(30deg,-30deg) translate(-116vw,0);
    animation-name: animationHidePortfolio;
    animation-timing-function: ease-in;
    animation-duration: 1s;
}

.menuabout {
    transform: skew(30deg,-30deg) translate(-1.9vw,0);
    top: 21vw;
    animation-name: animationBandeauAbout;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

.moveabout {
    transform: skew(30deg,-30deg) translate(100vw,0);
    top: 21vw;
    animation-name: animationHideAbout;
    animation-timing-function: ease-in;
    animation-duration: 1s;
}


.menucontact {
    transform: skew(30deg,-30deg) translate(-10vw,0);
    width: 149vw;
    top: 25vw;
    animation-name: animationBandeauContact;
    animation-timing-function: ease-in;
    animation-duration: 3s;
}

.movecontact {
    transform: skew(30deg,-30deg) translate(-155vw,0);
    width: 149vw;
    top: 25vw;
    animation-name: animationHideContact;
    animation-timing-function: ease-in;
    animation-duration: 1s;
}

a .menuportfolio:hover,a .menuabout:hover, a .menucontact:hover {

	background-color:#431F6D;
	text-shadow: rgb(54, 25, 88) -1px 1px,
    rgb(54, 25, 88) -2px 2px,
    rgb(54, 25, 88) -3px 3px,
    rgb(54, 25, 88) -4px 4px,
    rgb(54, 25, 88) -5px 5px,
    rgb(54, 25, 88) -6px 6px,
    rgb(54, 25, 88) -7px 7px,
    rgb(54, 25, 88) -8px 8px,
    rgb(56, 26, 92) -9px 9px,
    rgb(59, 27, 96) -10px 10px,
    rgb(61, 28, 100) -11px 11px,
    rgb(64, 29, 104) -12px 12px,
    rgb(67, 31, 109) -13px 13px;
	transition: background-color 1s;

}

.fa {
	padding-right: 1.5vw;
}

footer ul {
	position: fixed;
    list-style: none;
    display: flex;
    font-size: 2vw;
    margin: 5px 13px;
    bottom: 2vw;
    right: 0;
    z-index: 100;
}
footer li {
	display:inline-block;
}

footer a {
    display: none;
	color:white;
	text-decoration:none;
	text-transform: initial;
}
footer a:hover{
	color: #431F6D;
}

footer .fa {
	padding-right: 0.5vw;
}

footer p {
    display:none;
	text-align: right;
	position: fixed;
	color:white;
	text-transform: uppercase;
	font-family: 'Titillium Web', sans-serif;
	line-height: 0.8vw;
    z-index: 1000;
    bottom: 0.5vw;
    right: 1vw;
    font-size: 0.7vw;
}
footer span {
	font-family: 'Open Sans', sans-serif;
}

footer em {
	position:fixed;
}

#shitIE {
        display: none;
        background-color: rgba(0,0,0,0.5);font-family: 'Josefin Sans', sans-serif; color:#fff;
        padding: 7px 10px 0px 10px;text-align: center;
        position: fixed;z-index: 2000;bottom: 0;left: 0;right: 0;height: 3%;
}

#shitIE a {
        color:#6fb2d3;text-decoration: none;
}
#shitIE a:hover {
        color: #fff;
}