/*
couleur txt #404040
*/

.retour {
	clear: both;
}

.center {
	width: 100%;
	margin: auto;
}

body {
	background: url(images/fond_code.jpg)0 0 repeat;
	color: #545454;
	max-width: 100%;
	height:auto;
}

#logo {
	float: left;
	margin-right: 15vw;
	padding-top: 10px;
	width: 20%;
}

nav a {
	float: left;
	color: #404040;
	text-decoration: none;
	padding: 2vw 1.5vw 1vw 1.5vw;
	font-size: 20px;
	margin-bottom: 5px;

}

nav a:hover {
	background: url(images/souligne2.png)bottom center no-repeat;
}

nav a.active {
	background: url(images/souligne2.png)bottom center no-repeat;
}

.slicknav_menu{
	display: none;
}

#imgheader{
	background: url(images/img_header.jpg)center no-repeat;
	height: 300px;
}

#imgheader img{
	width: 100%;
}

.col3 {
	float: left;
	display: block;
	width: 33%;
	margin: auto;
	padding: 20px 0;

}

.col3 p {
	padding-top: 50px;
	font-size: 40px;
	
	text-align: center;
	font-weight: bold;
}

#bqimg {
	background: url(images/btn_banque_image.svg)top center no-repeat;
	height: 200px;
	width: 350px;
	display: block;	
	text-decoration: none;
	color: black;
	border: 5px solid #404040;
	margin: auto;
}

#cod {
	background: url(images/btn_codage.jpg)top center no-repeat;
	height: 200px;
	width: 350px;
	display: block;	
	text-decoration: none;
	color: white;
	border: 5px solid #404040;
	margin: auto;
}

#wp {
	background: url(images/logo-WordPress.svg)top center no-repeat;
	height: 200px;
	width: 350px;
	display: block;	
	text-decoration: none;
	color: black;
	border: 5px solid #404040;
	margin: auto;
}

#utiles{
	width: 50%;
	margin: 0 auto 50px auto;
	border: 5px solid #404040;
	padding: 20px;
	background-color: rgba(255,255,255,0.7);
}

#utiles img{
	max-width: 50px;
	max-height: 50px;
	bottom: 0;
	-webkit-transition: all 1000ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

#utiles p{
	display: inline-block;
	margin: 40px 15px 0 15px;
	color: #404040;
}

#utiles h2{
	font-size: 30px;
	text-align: center;
}

#utiles a{
	padding: 10px 0;
	font-size: 20px;
	text-decoration: none;
	margin-bottom: 10px;
	color: #404040;
}

#utiles a:hover {
	background: url(images/souligne2.png) bottom left no-repeat;
}

#utiles a p:hover {
	color: red;
}

#utiles img:hover {
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
	-webkit-transition: all 1000ms ease;
	-moz-transition: all 1000ms ease;
	-ms-transition: all 1000ms ease;
	-o-transition: all 1000ms ease;
	transition: all 1000ms ease;
}

footer{
	min-height: 100px;
	background: url(images/fond_footer.svg)bottom center no-repeat;
	width: 100%;
}

footer p {
	padding-top: 60px;
	text-align: right;
	color: white;
}

#video{
	margin: auto;
	display: block;
	
	top: 10%;
	width: 100%;
	height: 20%;	
}


/*_______CSS banque d'images________*/

#banqueimages, #mockup {
	margin: auto;
	width: 70%;
}

#banqueimages a, #mockup a{
	text-decoration: none;
}

#banqueimages a p:hover, #mockup a p:hover{
	background: url(images/souligne.svg)center 70% no-repeat;
	background-size: 150px;
	color: red;
}

#banqueimages img:hover, #mockup img:hover{
	-moz-transform: scale(1.3);
	-webkit-transform: scale(1.3);
	-o-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
	-webkit-transition: all 1000ms ease;
	-moz-transition: all 1000ms ease;
	-ms-transition: all 1000ms ease;
	-o-transition: all 1000ms ease;
	transition: all 1000ms ease;
}

#banqueimages img, #mockup img{
	width: 100px;
	margin: 0px 0px -40px 0px;
	-webkit-transition: all 1000ms ease;
	-moz-transition: all 1000ms ease;
	-ms-transition: all 1000ms ease;
	-o-transition: all 1000ms ease;
	transition: all 500ms ease;
}

#banqueimages p, #mockup p{
	display: inline-block;
	padding: 0px 50px 50px 50px;
	font-size: 30px;
	text-underline-position: auto;
	color: #404040;
}

#banqueimages h2, #mockup h2{
	text-align: center;
	font-size: 40px;
	color: #404040;
	padding: 10px;
	border: 5px solid #404040;
	margin: 80px auto 0 auto;
	width: 30%;
}

.col2{
	display: block;
	float: left;
	width: 50%;
}

.col2r{
	display: block;
	float: right;
	width: 50%;
}

.col2 li, .col2r li{
	height: 100px;
	background-color:;
	margin-bottom: 40px;
}

#animation_container, #canvas, #dom_overlay_container{
	width: 100% !important;
	overflow: hidden;
}

.bkgroundfxd{
	background: url(images/codage-page-internet.jpg)center no-repeat;
	background-attachment: fixed;
	height: 100px;
	width: 100%;
	background-position: cover;
}



/*___________Mediaquery____________*/

@media screen and (max-width: 1348px) {
	
}

@media screen and (max-width: 979px){
	nav {
		display: none;
	}

	.slicknav_menu {
        display:block;
        float: right;
        
    }

	#banqueimages p, #mockup p{
		font-size: 20px;
	}

	.col2, .col2r{
		float: none;
		width: 100%;
		margin: auto;
	}

	.col3{
    	float: none;
    	width: 100%;
    }

    .col3 a{
    	margin: auto;
    }

}

@media screen and (max-width: 768px){
	

    #banqueimages h2, #mockup h2{
    	width: 60%;
    	margin: 30px auto 20px auto;
    }

    #banqueimages p, #mockup p {
    	padding: 50px 20px 50px 20px;
    }

    
}


@media screen and (max-width: 480px){
		
		#banqueimages p, #mockup p{
			padding: 0px 20px 50px 20px;
			display: block;
			text-align: center;
			border-bottom: 1px solid black;
		}

		#banqueimages img, #mockup img{
			margin: 10px auto;
			display: block;
		}
}