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

#logo .backg {
    background-color: #9ebdc8;
}

#nav_a a {
    color: #9ebdc8;
}

#nav_a .separator {
	left: 0px;
	width: 80px;
    background-color: #9ebdc8;
}

#nav_a .backg {
    background-color: #9ebdc8;
}

/**********************************************************************************/

#header_container {						/*HEADER*/
	height: 600px;
    background: url(../img/header_container.jpg) center /*fixed*/ no-repeat;
    background-size: 3040px 864px;
}

#header {						/*HEADER*/
	height: 600px; /*calc(100vh - 150px);*/
	/*background: url(../img/header_background.jpg)/* #849fb8 * /center 0px no-repeat fixed;*/
    background: url(../img/header.jpg) center /*fixed*/ no-repeat;
    background-size: 1536px 864px;
    /*background-size: 1920px 1080px;*/
/*
	background: url(../svg/header_back2p0.svg) center 0px fixed;
*/
}

#in_header {					/*IN-HEADER*/
	height: 600px; /*calc(100vh - 150px);*/
/*    background: url(../svg/header_back3p0.svg) center 0px fixed;*/
/*
    background: url(../svg/header_background3p0.svg) center 0px fixed;
*/


	background: url(../svg/header_background_carre4.svg) center 0px fixed;

}

#header h1 {
	font-size: 36pt;
	letter-spacing: 7px;
	text-align: center;
    color: #6188a3;
}

#header h2 {
	font-size: 16pt;
	letter-spacing: 4px;
	color: #6188a3;
	text-align: center;
	flex: 2;
	margin: 20px;
}

 #in_header .horizontal {
	width: auto;
}

.grey {	
    display: none;
	height: 2px;
	width: 100px;
	background: #6188a3;
	margin: 0px 120px 12px 120px ;
}

/**********************************************************************************/

#message {						/*MESSAGE*/
	height: auto;
	background: url(../svg/message_background.svg) no-repeat center top;
}

#message h3 {
	text-align: left;
	letter-spacing: 2px;
	color: #597c90;
	font-size: 18pt;
	/*font-weight: bold;*/
	padding: 110px 0 40px 130px;
	font-family: "MyRobot", sans-serif;
	font-weight: 500;
}

#message p {
	text-align: left;
	letter-spacing: 1px;
	font-family: "MyRobot", sans-serif;
	color: #097a97;
	font-size: 11pt;
	width: 510px;
	padding: 0 0 60px 130px;
}

@media all and (max-width: 770px) {
    #message h3 {
        width: 56%;
        padding: 110px calc(10vw) 40px 0px;
        margin: auto;
    }
    #message p {
        width: 56%;
        padding: 0px calc(10vw) 60px 0px;
        margin: auto;
    }
}

#trianglebas {
	margin-top: -20px;
	background: url(../svg/message_triangle_bas.svg) center;
	height: 250px;
	width: 100%;
}

.color {
	color: #00baec;
	font-family: "MyRobot", sans-serif;
	letter-spacing: 2px;
	font-weight: 500;
}

/**********************************************************************************/

#actu {						/*ACTU*/
	padding-bottom: 120px;  /* 40 à l'origine */
	/*overflow: auto;*/
}
.actu {						/*ACTU*/
	width: auto;
	display: block;
	margin: 0 auto;
    margin-top: -160px;
	/*overflow: auto;*/
}

.actu .plus {
	display: block;
    position: relative;
	/*margin: 30px auto 0px;*/
	margin: 0px auto;
    top: 50px;
	
	padding: 10px 0px;
	transition: 0.2s;
	height: 28px;	
	width: 160px;
	
	border: 1px solid #95b0be;
    border-radius: 15px;
	font-size: 22px;
	color: #95b0be;
}

.actu .plus:hover {
	border: 1px solid #bccdd6;
	font-size: 23px;
	width: 166px;
	color: #bccdd6;
}
.puzzle_haut {
	width: 100%;
	height: 70px;
	display: block;
	text-align: center;
	background: url(../img/profile_degrade.png) repeat;
}

/**********************************************************************************/

#profile {						/*PROFILE*/
	padding: 0px 0px 0px 0px;
	
	background: url(../svg/profile_background.svg) no-repeat fixed center;
	height: 800px;/*calc(100vh);*/
	width: 100%;
}

#in_profile {		
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	
	height: 596px;/*calc(100vh);*//*profile.height-(2*102)*/
	width: 1000px;
	margin: 0 auto;
}

#profile h2 {
	padding-top: 50px;
	color: #bccdd6;
}

#profile .horizontalFlex {
	/*height: 400px;*/
	width: 100%;
}

#profile .verticalFlex {
	height: 400px;
}

#profile .horizontalFlex img {
	width: 180px;/*calc(25vh);*/
	height: 180px;
}

#profile p {
	width: 280px; /*calc(25vw);*/
	/*margin: 20px auto;*/
	font-size: 11pt;
	color: #95b0be;
	display: block;
	text-align: center;
}

@media all and (max-width: 1000px) {
    #profile {
        height: auto;
    }
    #profile h3 {
        padding: 20px 0 10px;
    }
    #in_profile {
        width: 100%;
        height: auto;
    }
    #profile .verticalFlex {
        height: auto;
        width: 30%;
    }
    #profile .horizontalFlex img {
        height: calc(24vw);
        width: 80%;
    }
    #profile p {
        width: 100%;
        padding: 20px 0px;
        font-size: 10pt;
    }
}

@media all and (max-width: 450px) {
    #profile h3 {
        padding: 0;
    }
    #profile .horizontalFlex {
        padding: 20px 0px;
    }
    #profile .verticalFlex  {
        height: 200px;
        width: 180px;
    }
    #profile .verticalFlex img{
        height: 180px;
        width: 150px;
    }
    #profile p {
        visibility: collapse;
        height: 0px;
        width: 0px;
    }
}
.plus {
	padding: 10px 0px;
	transition: 0.2s;
	height: 28px;
	
	border: 1px solid #95b0be;
    border-radius: 15px;
	font-size: 22px;
	width: 160px;
	color: #95b0be;
	text-align: center;
}

.plus:hover {
	border: 1px solid #bccdd6;
	font-size: 23px;
	width: 166px;
	color: #bccdd6;
}
@media all and (max-width: 1024px) {
    .plus {
        margin-bottom: 20px;
    }
}
#profile .puzzle2 :nth-child(1){
	flex: 3;
}
/**********************************************************************************/

#creation {						/*CREATIONS*/
	padding: 0px 0px 0px 0px;
	
	background: url(../svg/creation_background.svg) no-repeat fixed center;
	/*height: 900px;/*calc(100vh);*/
	width: 100%;
}

#in_creation {		
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	
	height: auto;/*calc(100vh);*/
	width: 1180px;
	margin: 0 auto;
}

@media all and (max-width: 1180px) {
    #in_creation {
        width: 100%;
    }
}

#creation h2 {
	margin-top: 0px;
	margin-bottom: 50px;
	color: #bccdd6;
}

@media all and (max-width: 1024px) {
    #creation h2 {
        margin-top: 50px;
    }
}

#creation .horizontalFlex {
	/*height: 680px;*/
	width: 1024px;
    flex-wrap: wrap;
}

@media all and (max-width: 1024px) {
    #creation .horizontalFlex {
        width: 100%;
    }
}
#creation .verticalFlex {
	/*height: 90%;*/
    height: 600px;
    margin: 0 20px;
}

#creation .verticalFlex img {
	width: 300px;
	height: 320px;
}

#creation .verticalFlex a {
	display: block;
    position: relative;
    width: 300px;
    height: 320px;
    /* transitions */
    -webkit-transition: all 0.6s ease;
            transition: all 0.6s ease; 
}
#creation .verticalFlex a:hover {
    height: 280px;
}

#creation .verticalFlex a img{
    display: block;
    width: 300px;
    height: 320px;
	margin: auto;
    position: absolute;
    /* transitions */
    -webkit-transition: all 0.6s ease;
            transition: all 0.6s ease; 
}
#creation .verticalFlex a:hover img {
    height: 280px;
}
/*
#creation .verticalFlex a img:nth-child(1){ /* first <img> child of <div> * /
    filter: alpha(opacity=100); /* IE stuff * /
    opacity: 1;
    z-index: 2;
}

#creation .verticalFlex a img:nth-child(2){ /* second <img> child of <div> * /
    filter: alpha(opacity=0); /* IE stuff * /
    opacity: 0;
    z-index: 1;
}
/* hover * /
#creation .verticalFlex a:hover img:nth-child(1){ 
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 1;
}

#creation .verticalFlex a:hover img:nth-child(2){ 
    filter: alpha(opacity=100);
    opacity: 1;
    z-index: 2;
}
*/

#creation p {
	width: 280px;
	height: 180px;
	font-size: 11.5pt;
	color: #8db0bc;
	display: block;
	text-align: center;
}

#creation .plus {
	margin-bottom: 70px;
}


#creation .puzzle2 :nth-child(2) {
	background: url(../svg/creation_puzzle_center_rotate_inverse.svg) ;
}

#creation .puzzle2 :nth-child(3){
	flex: 5;
}

#creation .puzzle :nth-child(2) {
	background: url(../svg/creation_puzzle_center_rotate.svg) ;
}
/**********************************************************************************/

#contact {						/*CREATIONS*/
	padding: 0px 0px 0px 0px;
	
	background: url(../svg/actu_background.svg) no-repeat 40px -230px;
	/*height: 900px;/*calc(100vh);*/
	width: 100%;
}

#contact h2 {
	text-align: center;
	padding: 80px 0px 35px 0px;
}

#contact span {
	text-align: center;
	display: block;
	padding-bottom: 90px;
}
#contact a {
	width: 40px;
	height: 40px;
	margin: 25px 25px;
	-webkit-transition: all 0.6s ease;
            transition: all 0.6s ease;
}
#contact a:hover{
	width: 40px;
	height: 20px;
	margin: 0px 35px;
}
#contact a img{
	width: 40px;
    -webkit-transition: all 0.6s ease;
            transition: all 0.6s ease;
}
#contact a img:hover{
	width: 50px;
}