/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;

}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
/*
ol, ul {
	list-style: none;
}
*/
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/*************************************** GENERAL *************************************/

* {
	box-sizing: border-box;
}

html, body {
    height: 100%;
    
}

body {
    margin:0;
    padding:0;
    background-image: url(/cv/img/bg-greypattern.jpg);
}


body a {
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
}

body p {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
}

h1, h2,h3 {
    font-family: 'Raleway', sans-serif;
    font-weight: 100;
    color: #000;
}

li {
    font-family: 'Raleway', sans-serif;
    color: #FFF;
}

h1 {
    font-size: 3em; }

h2 {
    font-size: 2em;
    line-height: 1.2em;
    margin-bottom: 0.5em;
}
h3 {
    font-size: 1.2em;
    line-height: 1.1em;
    margin-bottom: 0.8em;
}


section, header {
    width: 100%;

}


/* loader */
#loadingpage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #531887;
    padding-top: 20%;
}

#loadingpage img {
    display: block;
    width: 55px;
    height: 58px;
    margin: 1em auto;
    animation : anim-load linear 2.5s infinite; 
    -webkit-animation : anim-load linear 2.5s infinite;
    
}

@keyframes anim-load{from {transform: rotate(0deg)}
    to {transform: rotate(359deg) }
   }

@-webkit-keyframes anim-load{from {-webkit-transform: rotate(0deg)}
    to {-webkit-transform: rotate(359deg) }
   }

#loadingpage p {
    font-weight: 100;
    color: #FFF;
    text-align: center;
    font-size: 2em;
}
    

/** Scroll to Top button **/
#scrolltotop:link, #scrolltotop:visited {
    position: fixed;
    bottom: 3%;
    right: 3%;
    z-index: 90;
    font-size: 3em;
    color: #000;
 
}

#scrolltotop:hover, #scrolltotop:active {
    color: #9937b0;
}


/*************************** Header *******************/

header {
    overflow: hidden;
    position: fixed;
    z-index: 90;
    padding: 0 3%;
    
}

header::after {
    content: "";
    background: url(/cv/img/fondcouleur-header.jpg) repeat-Y top;
    -webkit-background-size: cover; 
    background-size: cover;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;  
}

header img {
    float: left;
    margin: 0.5em 0;
}

/* Menu */

header nav ul li {
    list-style-type: none;
    display: inline-block;
    margin-left: 3em;
    padding-top: 1em ;
}

header nav ul li:nth-child(6n) {
    margin-left: 0.3em;
    color: #FFF;
    font-size: 1em;
    font-weight: 800;
}
    
header nav ul li:last-child {
    margin-left: 0.3em;
}

header nav {
    float: right; 
}

header nav a:link, header nav a:visited {
    font-weight: 500;
    color: #FFF;
    transition: color 0.5s;
    -webkit-transition: color 0.5s;
}

header nav a:hover, header nav a:active{
    color: #000;
}


/********************** Buttons *************************/
.whitebtn, .whitebtn:link, .whitebtn:visited, .blackbtn, .blackbtn:link, .blackbtn:visited {
    font-size: 1.5em;
    padding: 0.6em 0.8em;
    border-radius: 5px;
    transition: all 1s;
    -webkit-transition: all 1s;
}

.whitebtn, .whitebtn:link, .whitebtn:visited {
    color: #FFF;
    border: 2px white dotted;
}


.blackbtn, .blackbtn:link, .blackbtn:visited {
    color: #000;
    border: 2px black dotted;
}

button {
    background-color: transparent;
}

.whitebtn:hover, .whitebtn:active { 
    border: 2px #531887 solid;
    color: #531887;
}

.blackbtn:hover, .blackbtn:active {
    border: 2px #9937b0 solid;
    color: #9937b0;
}


/********************************* HOME SECTION **************************/


#home_scn {
    position: relative;
    height: 95%;
    background: url(/cv/img/bg-video-poster.gif) no-repeat center;
    -webkit-background-size: cover; 
    background-size: cover; 
}


.hello {
    width: 50%;
    height: 30%;
    position: absolute;
    left: 27%;
    top: 30%;
}

#line01, #line02, #line03 {
    font-family: 'Raleway', sans-serif;
    margin-bottom: 2%;
}

#line01 {
    font-size: 4em;
    font-weight: 100;
}

#line02 {
    font-size: 2.5em;
    font-weight: 600;
}

#line03 {
    font-size: 2em;
    font-weight: 100;
}

#discoversite {
    text-align: center;
    width: 40%;
    position: absolute;
    bottom: 3%;
    left: 30%; 
}

#discoversite, #discoversite:link, #discoversite:visited {
    color: #000;
    font-size: 1.5em;
    transition: all 1s;
    -webkit-transition: all 1s;
}

#discoversite:hover, #discoversite:active {
    line-height: 1.3em;
    bottom: 4%;
}

/*************************************** WORK SECTION *********************************/

#work_scn {
    position: relative;
    background-image: url(/cv/img/bg-greypattern.jpg);
   
}

#work_scn #diagonal-left {
    width: 50%;
    height: 6%;
    position: absolute;
    left: 0;
    top: -2.7%;
    transform: skewY(3deg); 
    -webkit-transform: skewY(3deg);
    -ms-transform: skewY(3deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-image: url(/cv/img/bg-greypattern.jpg);
}

#work_scn #diagonal-right {
    width: 50%;
    height: 6%;
    position: absolute;
    right: 0;
    top: -2.7%;
    transform: skewY(-3deg) ; 
    -webkit-transform: skewY(-3deg);
    -ms-transform: skewY(-3deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-image: url(/cv/img/bg-greypattern.jpg);
}

#work {
    text-align: center;
    margin-bottom: 0.5em;
    padding-top: 1.5em;
}


/** correction of slider pager (centralize) **/
#work_scn .sy-pager li:last-child {
    margin: 0;
}


/*** GALERY ***/


#projects-gal{
    background: url(/cv/img/bgimage.jpg) no-repeat top;
    -webkit-background-size: cover; 
    background-size: cover; 
    overflow: hidden;
    margin-top: 1em;
}
#education-block{
    background: url(/cv/img/bgimage.jpg) no-repeat top;
    -webkit-background-size: cover; 
    background-size: cover; 
    overflow: hidden;
    margin-top: 1em;
}
.education{
    background: url(/cv/img/bgimage.jpg) no-repeat top;
    -webkit-background-size: cover; 
    background-size: cover; 
    overflow: hidden;
    margin-top: 1em;
}


#opengal, #closegal, #openblock, #closeblock {
    display: block;
    margin: 0.6em auto;
    font-weight: 400;
}

#opengal, #openblock{
    width: 240px;
    text-align: center;
}

#galopened, #openblocked {
    display: block;
    max-width: 1028px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    overflow: hidden;
  }


#projects-gal #galopened a {
    display: block;
    max-width: 275px;
    min-width: 160px;
    width: 25%;
    float: left;
    
}

#projects-gal #galopened a figure {
    position: relative;
    background-color: #531887;
    max-width: 275px;
    min-width: 160px;
    max-height: 275px;
    width: 100%;
}


#galopened a figure img {
	display: block;
	width: 100%;
    opacity: 1;
}

#galopened a:hover figure img {
	display: block;
	width: 100%;
    opacity: 0.3;
}


#projects-gal #galopened a figcaption {
    opacity: 0;
    display: block;
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
	color: #fff;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

#projects-gal #galopened a:hover figcaption {
    opacity: 1;
}

#projects-gal #galopened a figure figcaption .gal-descr-wrap {
   position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
}

#projects-gal #galopened a figcaption p {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 1em;
    text-transform: uppercase;
    line-height: 1.2em;
}

#projects-gal #galopened a figcaption p span {
    text-transform: capitalize;
    font-size: 0.8em;
    font-weight: 500;
}



#projects-gal #galopened a figure figcaption::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 150px;
	height: 150px;
	border: 2px solid #fff;
	content: '';
	opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
    -ms-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
	transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
	-webkit-transform-origin: 50%;
    -ms-transform-origin: 50%;
	transform-origin: 50%;
}

#projects-gal #galopened a:hover figure figcaption::before {
    opacity: 1;
	transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
    -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
}


/****************** EDUCATION ******************/
.tableau_expositions{
	margin-left: auto;
    margin-right: auto;
    margin-bottom: 5em;
	padding: 5em;
	text-align: center;
	border-collapse: collapse; /*  */
    border-radius: 10px;
    background-color: #ffffff62;
    margin: 5em auto;
   
}


/****************** PROJECT PAGE ******************/

.close-project-page {
    display: inline-block;
    float: right;
    color: #FFF;
    font-size: 1.5em;
    margin: 0.4em 0;
}

.project-page {
    position: relative;
    display: block;
    width: 1200px;
    margin: 0 auto;
    padding-top: 70px;
}

.project-page p {
    margin-bottom: 1.5em;
}

.project-page h2 {
    margin-top: 2.2em;
}
.project-description .project-text {
    line-height: 1.5em;
}

.project-description .project-text a, .project-description .project-text a:visited {
    font-weight: 700;
    color: 9937b0;
}

.project-description .project-text a:hover, .project-description .project-text a:active {
    text-decoration: underline;
}

.project-image {
    width: 100%;
    margin: 0.5em 0;
}

.video-content { 
  position: relative; 
  overflow: hidden; 
  padding-top: 56.25%; 
}

.video-content iframe { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  border: 0; 
}

.project-description {
    position: relative;
    display: block;
    width: 50%;
    margin: 1.2em 0;
    overflow: hidden;
}

.project-description .projecttype {
    display: inline;
    float: left;
    margin-right: 1.2em;
}

 .project-description .projecttype p {
    color: #FFF;
    font-size: 1em;
    text-align: center;
    width: 6.5em;
    height: 6.5em;
    background-color: #9937b0;
    display: table-cell;
    vertical-align: middle;
    border-radius: 3.25em;
    padding-top: 0;
}

.project-page::after {
  content: "";
  background: url(/cv/img/bubbles-deco.png) no-repeat top;
    width: 1024px;
    height: 427px;
    -webkit-background-size: cover; 
    background-size: cover;
    position: absolute;
    bottom: -20px;
    left: -100px;
    opacity: 0.3;
    z-index: -1;
}


/* Previous-next project */

.project-page .nav-projects {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    margin: 1em 0;
}

.previous-btn, .next-btn {
    display: inline-block;
    font-size: 3em;
}

.previous-btn {
    float: left;
}
.next-btn {
    text-align: right;
    float: right;
}


previous-btn:link, .previous-btn:visited, 
.next-btn:link, .next-btn:visited {
    color: #000;
}

.previous-btn:hover, .previous-btn:active, 
.next-btn:hover, .next-btn:active {
     color: #9937b0;
}

.previous-page, .next-page {
    display: inline-block;
    font-size: 1em;
    font-weight: 600;
    line-height: 0;
    text-align: center;
    padding: 1em;
    background-color: #9937b0;
    color: #FFF;
    z-index: 101;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
}

.previous-page {
    margin-left: 1em;
}

.next-page {
    float: right;
    margin-right: 1em;
}

 .previous-btn:hover ~ .previous-page {
    visibility: visible;
    opacity: 1;
}

.next-btn:hover ~ .next-page {
    visibility: visible;
    opacity: 1;
}



/**************************************** ABOUT SECTION *****************************/

#about_scn {
    padding: 10% 20%;
    overflow: hidden;
}

#about_scn img {
   width: 50%;
    max-width: 500px;
   float: left;
} 

#about_scn article {
    width: 50%;
    float: left;
    padding-left: 2em;
}

#about_scn article h1 {
    margin-bottom: 0.2em;
}

#about_scn article p {
    line-height: 1.5em;
    margin-bottom: 2.2em;
}

#about_scn article b {
    font-weight: 700;
}

#about_scn article p a, #about_scn article p a:link, #about_scn article p a:visited  {
    color: #531887;
    font-weight: 500;
}

#about_scn article p a:hover, #about_scn article p a:active  {
    color: #9937b0;
}
    



/************** SEPARATION LINE ***********/

.sep-line {
    width: 100%;
    height: 0.6em;
    background: url(/cv/img/separationline.jpg) no-repeat center;
    -webkit-background-size: cover; 
    background-size: cover;
    margin-top: 30px;
}
    


/**************************************** SCILLS SECTION *****************************/

#skills_scn {
    height: 100%;
    position: relative;
}

#skills_scn h1 {
    position: relative;
    padding-left: 5%;
    top: 10%;
}

#skills-schema {
    width: 600px;
    height: 565px;
    background-image: url(/cv/img/skills-schema.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    
}

/*** Web Design **/

#webdesign-description, #webdesign-hover {
    position: absolute;
}

#webdesign-hover {
    top: 14%;
    left: 61%;
}

#webdesign-hover #webdesign-title {
    text-align: center;
}

#webdesign-hover #webdesign-bubble {
    width: 56px;
    height: 56px;
    background-color: #531887;
    border-radius: 28px;
    margin-top: 0.5em;
    margin-left: auto;
    margin-right: auto;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transition: all 1s;
    -webkit-transition: all 1s;
}

#webdesign-hover:hover #webdesign-bubble {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
}

#webdesign-hover:hover #webdesign-title {
    color: #9937b0;
}

#webdesign-hover:hover ~ #whitebubble {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
}
    
#webdesign-description {
    font-size: 0.9em;
    line-height: 1.3em;
    display: table-cell;
    width: 170px;
    height: 190px;
    text-align: center;
    vertical-align: middle;
    top: 42%;
    left: 40%;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
}

#webdesign-hover:hover ~ #webdesign-description {
    visibility: visible;
    opacity: 1;
}

/*** UX ***/

#ux-description, #ux-hover {
    position: absolute;
}

#ux-hover {
    top: 47%;
    right: 2%;
    overflow: hidden;
}

#ux-hover #ux-title {
    float: left;
    padding-top: 1em;
    margin-left: 0.5em;
}

#ux-hover #ux-bubble {
    width: 40px;
    height: 40px;
    background-color: #531887;
    border-radius: 20px;
    float: left;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transition: all 1s;
    -webkit-transition: all 1s;
}

#ux-hover:hover #ux-bubble {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
}

#ux-hover:hover #ux-title {
    color: #9937b0;
}

#ux-hover:hover ~ #whitebubble {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
}
    
#ux-description {
    font-size: 0.9em;
    line-height: 1.3em;
    display: table-cell;
    width: 170px;
    height: 190px;
    text-align: center;
    vertical-align: middle;
    top: 43%;
    left: 40%;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
}

#ux-hover:hover ~ #ux-description {
    visibility: visible;
    opacity: 1;
}


/*** Illustration ***/

#illustration-description, #illustration-hover {
    position: absolute;
}

#illustration-hover {
    bottom: 12%;
    right: 25%;
}

#illustration-hover #illustration-title {
    text-align: center;
}

#illustration-hover #illustration-bubble {
    width: 50px;
    height: 50px;
    display: block;
    background-color: #531887;
    border-radius: 25px;
    margin: 0.5em auto;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transition: all 1s;
    -webkit-transition: all 1s;
}

#illustration-hover:hover #illustration-bubble {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
}

#illustration-hover:hover #illustration-title {
    color: #9937b0;
}

#illustration-hover:hover ~ #whitebubble {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
}
    
#illustration-description {
    font-size: 0.9em;
    line-height: 1.3em;
    display: table-cell;
    width: 170px;
    height: 190px;
    text-align: center;
    vertical-align: middle;
    top: 43%;
    left: 40%;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
}

#illustration-hover:hover ~ #illustration-description {
    visibility: visible;
    opacity: 1;
}

/*** Animation ***/

#animation-description, #animation-hover {
    position: absolute;
}

#animation-hover {
    bottom: 12%;
    left: 33%;
}

#animation-hover #animation-title {
    text-align: center;
}

#animation-hover #animation-bubble {
    width: 40px;
    height: 40px;
    display: block;
    background-color: #531887;
    border-radius: 20px;
    margin: 0.5em auto;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transition: all 1s;
    -webkit-transition: all 1s;
}

#animation-hover:hover #animation-bubble {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
}

#animation-hover:hover #animation-title {
    color: #9937b0;
}

#animation-hover:hover ~ #whitebubble {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
}
    
#animation-description {
    font-size: 0.9em;
    line-height: 1.3em;
    display: table-cell;
    width: 170px;
    height: 190px;
    text-align: center;
    vertical-align: middle;
    top: 47%;
    left: 40%;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
}

#animation-hover:hover ~ #animation-description {
    visibility: visible;
    opacity: 1;
}



/*** Motion Design ***/

#motionde-description, #motionde-hover {
    position: absolute;
}

#motionde-hover {
    top: 44%;
    left: 8%;
}

#motionde-hover #motionde-title {
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    float: left;
}

#motionde-hover #motionde-bubble {
    width: 40px;
    height: 40px;
    background-color: #531887;
    border-radius: 20px;
    float: left;
    margin-left: 0.5em;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transition: all 1s;
    -webkit-transition: all 1s;
}

#motionde-hover:hover #motionde-bubble {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
}

#motionde-hover:hover #motionde-title {
    color: #9937b0;
}

#motionde-hover:hover ~ #whitebubble {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
}
    
#motionde-description {
    font-size: 0.9em;
    line-height: 1.3em;
    display: table-cell;
    width: 170px;
    height: 190px;
    text-align: center;
    vertical-align: middle;
    top: 45%;
    left: 40%;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
}

#motionde-hover:hover ~ #motionde-description {
    visibility: visible;
    opacity: 1;
}

/*** More **/

#more-description, #more-hover {
    position: absolute;
}

#more-hover {
    top: 15%;
    left: 38.5%;
}

#more-hover #more-title {
    text-align: center;
}

#more-hover #more-bubble {
    width: 20px;
    height: 20px;
    background-color: #531887;
    border-radius: 10px;
    margin-top: 0.5em;
    margin-left: auto;
    margin-right: auto;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transition: all 1s;
    -webkit-transition: all 1s;
}

#more-hover:hover #more-bubble {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
}

#more-hover:hover #more-title {
    color: #9937b0;
}

#more-hover:hover ~ #whitebubble {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
}
    
#more-description {
    font-size: 0.9em;
    line-height: 1.3em;
    display: table-cell;
    width: 170px;
    height: 190px;
    text-align: center;
    vertical-align: middle;
    top: 41%;
    left: 40%;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
}

#more-hover:hover ~ #more-description {
    visibility: visible;
    opacity: 1;
}

#whitebubble {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #FFF;
    border-radius: 100px;
    top: 33.5%;
    left: 37.5%;
    z-index: 0;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transition: all 1s;
    -webkit-transition: all 1s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: scale(0.1);
    -webkit-transform: scale(0.1);
    -ms-transform: scale(0.1);
}


/************************************** CONTACT SECTION *******************************/
#contact_scn {
    height: 100%;
    position: relative;
}

#contact {
    width: 500px;
    height: 445px;
    padding: 7em 1em;
    text-align: center;
    background: url(/cv/img/bg-contact.gif) no-repeat center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    -moz-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

#contact_scn #contact h1 {
    color: #FFF;
    margin-bottom: 0.7em;
}


#contact_scn #contact .whitebtn {
    display: block;
}

#contact_scn #contact #mail-to {
    width: 300px;
    margin: 0 auto;
}

#contact_scn #contact .social-network {
    width: 300px;
    margin: 0 auto;
}

#contact_scn #contact .social-network a {
    width: 45%;
    float: left;
    text-align: center;
}

#contact_scn #contact .social-network a:first-child {
    margin-right: 10%;
}


/* SNOWFLAKES */

.greenflake, .blueflake, .purpleflake {
    position: absolute;
}

.greenflake {
    width: 167px;
    height: 171px;
    background-image: url(/cv/img/flake-green-sprite.png);
    top: 45%;
    left: 5%;
}

#contact_scn #contact:hover + .greenflake {
    animation : anim-green-opens steps(7) 0.2s forwards; 
    -webkit-animation : anim-green-opens 0.2s steps(7) forwards; 
}

@keyframes anim-green-opens{from {background-position: 0px }
    to {background-position: -1169px 0 }
   }

@-webkit-keyframes anim-green-opens{from {background-position: 0px }
    to {background-position: -1169px 0 }
   }

.purpleflake {
    width: 181px;
    height: 176px;
    background-image: url(/cv/img/flake-purple-sprite.png);
    top: 10%;
    right: 5%;
}


#contact_scn #contact:hover ~ .purpleflake {
   animation : anim-purple-opens steps(7) 0.2s forwards; 
    -webkit-animation : anim-purple-opens 0.2s steps(7) forwards;
}

@keyframes anim-purple-opens{from {background-position: 0px }
    to {background-position: -1267px 0 }
   }

@-webkit-keyframes anim-purple-opens{from {background-position: 0px }
    to {background-position: -1267px 0 }
   }


.blueflake {
    width: 179px;
    height: 191px;
    background-image: url(/cv/img/flake-blue-sprite.png);
    bottom: 10%;
    right: 13%;
}

#contact_scn #contact:hover ~ .blueflake {
   animation : anim-blue-opens steps(7) 0.2s forwards; 
    -webkit-animation : anim-blue-opens 0.2s steps(7) forwards;
}

@keyframes anim-blue-opens{from {background-position: 0px }
    to {background-position: -1253px 0 }
   }

@-webkit-keyframes anim-blue-opens{from {background-position: 0px }
    to {background-position: -1253px 0 }
   }

/*** FOOTER ***/ 

footer {
    width: 100%;
    background-color: #531887;
    margin-bottom: 0;
    font-size: 0.8em;
}

footer p {
    text-align: center;
    color: #FFF;
    padding: 0.4em 20%;
    font-weight: 500;
    line-height: 1.5em;
}



/************************************** Media Queries *******************************/

@media (max-width: 1200px) {
    
    #about_scn {
    padding: 5% 10%;
}

#about_scn img {
   width: 100%;
    max-width: 300px;
    margin-bottom: 25px;
    
 } 

#about_scn article {
    width: 100%;
       padding-left: 2em;
}

}

@media (max-width: 1200px) {
    .project-page {
    width: 100%;
    padding-left: 2em;
    padding-right: 2em;
}
    
}

@media (max-width: 740px) {
    
    #menupc {
    display: none;
}
   
    #home_scn {
    height: 75%;
   
}
    
    .hello {
    width: 70%;
    left: 15%;
    top: 25%;
}
    
.project-description, .project-description .project-text {
    width: 100%;
}

}


@media (min-width: 740px) {
    
    #menumob {
    display: none;
}

}

@media (max-width: 1025px) {
    
   .greenflake, .blueflake, .purpleflake {
    display: none;
    }   
}

@media (max-width: 600px) {

#skills_scn {
    display: none;
}
    
    .sep-line {
    display: none;
}
    
    #contact {
    width: 100%;
}

}