body{
    background-image: url(../image/background.jpg);
	background-repeat:no-repeat;
}

#conteneur{
	position:relative;
	width:960px;
	height: 880px;
	background-color: white;
	border-radius:20px 20px 20px 20px;
	margin:auto 50px auto 50px;
	border:1px solid black;
	margin-top:50px;
    left: 400px;
    overflow: hidden;
background: -moz-linear-gradient(top,  rgba(30,87,153,0) 0%, rgba(30,87,153,0.8) 15%, rgba(30,87,153,1) 19%, rgba(30,87,153,1) 20%, rgba(41,137,216,1) 50%, rgba(30,87,153,1) 80%, rgba(30,87,153,1) 81%, rgba(30,87,153,0.8) 85%, rgba(30,87,153,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(15%,rgba(30,87,153,0.8)), color-stop(19%,rgba(30,87,153,1)), color-stop(20%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(80%,rgba(30,87,153,1)), color-stop(81%,rgba(30,87,153,1)), color-stop(85%,rgba(30,87,153,0.8)), color-stop(100%,rgba(30,87,153,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#001e5799',GradientType=0 ); /* IE6-9 */


}

header{
	position:absolute;
	width:960px;
	top:0px;
	left:0px;
	z-index:3;
	height:150px;
	/*background-color:black;*/
	background-image: url(../image/dts-developpement-informatique.jpg);
	background-repeat:no repeat;
	background-size:cover;
}



#nav_head{
	position:absolute;
	top:30px;
	left:0px;
	z-index:1;
	width:960px;
	height:150px;
	background-color:#0B0B3B;
	color:white;
	text-align:center;
}
	
.lien{
	color:white;
	text-decoration:none;
	line-height: 270px;
    margin-right: 60px;
    font-family: arial,verdana sans-serif;
    
}
	
.logo{
    position: absolute;
    height: 150px;
    top: 0px;
    left: 610px;
}

#informatique{
    position: absolute;
    top: 150px;
    height: 700px;
    width: 960px;
    background-image: url(../image/Capture.PNG);
    left: -960px;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

#informatique:target{
    left:0px;
}


#informatique:target fermer {
    z-index:10
}




#exlo{
    position: absolute;
    top: 150px;
    height: 700px;
    width: 960px;
    background-image: url(../image/Capture.PNG);
    left: -960px;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}


#exlo:target{
    left:0px;
}

#contact{
    position: absolute;
    top: 150px;
    height: 700px;
    width: 960px;
    background-image: url(../image/Capture.PNG);
    left: -960px;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}


#contact:target{
    left:0px;
}


#contact:target .fermer {
}



.fermer{
    position: absolute;
    top: 250px;
    right: 0px;
    width: 70px;
    height: 100px;
    
}

.libre{
    position: relative;
    top: 190px;
    height: 250px;
}

.1{
    position: ;
    top:290px;
    color: white;
}
#iwriter{
    background-image: url(../image/256px-LibreOffice_4.0_Writer_Icon.svg.png);
    width: 256px;
    height: 256px;
    position: absolute;
    top: 250px;
    bottom: 50px;
    left: 50px;
    
}
#iwriter #writer{
    width: 0px;
    height: 0px;
    position: absolute;
    left: 100px;
    bottom: 300px;
    overflow: hidden;
    background:rgba(0,0,0,0.01);
    
}
#iwriter:hover #writer{
    width: 245px;
    height: 165px;
    left: 0px;
    border-radius: 20px 20px 20px 20px;
    border: 2px solid #03669E;
}

.titre{
    color: black;
    margin-top: 200px;

}


#icalc{
    background-image: url(../image/256px-LibreOffice_4.0_Calc_Icon.svg_1.png);
    width: 256px;
    height: 256px;
    position: absolute;
    top: 250px;
    bottom: 30px;
    left: 323px;
    
}
#icalc #writer{
    width: 0px;
    height: 0px;
    position: absolute;
    left: 100px;
    bottom: 300px;
    overflow: hidden;
    background:rgba(0,0,0,0.01);
}
#icalc:hover #writer{
    width: 245px;
    height: 165px;
    left: 0px;
    border-radius: 20px 20px 20px 20px;
    border: 2px solid #179E03;
}


#iimpress{
    background-image: url(../image/256px-LibreOffice_4.0_Impress_Icon.svg.png);
    width: 256px;
    height: 256px;
    position: absolute;
    top: 250px;
    bottom: 50px;
    left: 600px;
    
}
#iimpress #writer{
    width: 0px;
    height: 0px;
    position: absolute;
    left: 100px;
    bottom: 300px;
    overflow: hidden;
    background:rgba(0,0,0,0.01);
}
#iimpress:hover #writer{
    width: 245px;
    height: 165px;
    left: 0px;
    border-radius: 20px 20px 20px 20px;
    border: 2px solid #9F3C03;
}


.10{
    color: white;
    margin-top: 200px;
    
}

#conteneur1{
	position:absolute;
	width:958px;
	top:550px;
	left:2px;
	z-index:3;
	height:150px;
	background-color: #0B3861;
	
}


.bi{
    font-family: arial,verdana sans serif;
    font-size: 15px;
}

.bi2{
    font-family: arial,verdana sans serif;
    font-size: 15px;
}


.bi3{
    font-family: arial,verdana sans serif;
    font-size: 15px;
}






#conteneurcodage{
    width: 133px;
    height: 133px;
    background-color: rgba(0,0,0,0.1);
    position: absolute;
    border-radius: 70px 70px 70px 70px ;
    left: 410px;
    top: 11px;
    
}






#conteneurcodage2{
    width: 133px;
    height: 133px;
    background-color: rgba(0,0,0,0.1); 
    margin-left: 610px;
    margin-top:  11px;
    border-radius: 70px 70px 70px 70px ;
    
    
}





#conteneurcodage3{
    width: 133px;
    height: 133px;
    background-color: rgba(0,0,0,0.1);
    position: absolute;
    border-radius: 70px 70px 70px 70px ;
    left: 210px;
    top: 11px;
}



.photo{
    width: 100px;
    height: 100px;
    margin-top: 16px;
}



#hardware1{
    width: 820px;
    height: 430px;
    background-color: rgba(0,0,0,0.02);
    border: 2px solid #020910;
    border-radius: 8px 8px 8px 8px;
    position: absolute;
    left: -825px;
    top: 65px;
    

}




#software1{
    width: 820px;
    height: 430px;
    background-color: rgba(0,0,0,0.02);
    border: 2px solid #2B89CE;
    border-radius: 8px 8px 8px 8px;
    position: absolute;
    left: -825px;
    top: 65px;
    
}




#ihtml{
    background-image: url(../image/html%20img2.png);
    background-repeat: no-repeat;
    position: absolute;
    width: 100px;
    height: 100px;
    top:32px;
    left: 17px;
    
}
#ihtml #html{
    width: 0px;
    height: 0px;
    position: absolute;
    left: 100px;
    bottom: 200px;
    overflow: hidden;
    background:rgba(0,0,0,0.01);
    
}
#ihtml:hover #html{
    width: 870px;
    height: 490px;
    position: absolute;
    left:   -200px;
    top: -550px;
    border-radius: 20px 20px 20px 20px;
    border: 2px solid #03669E;
}


#isoftware{
    background-image: url(../image/isoftware.png);
    background-repeat: no-repeat;
    position: absolute;
    top:20px;
    left: 430px;
    width: 100px;
    height: 100px;
    
    
}
#isoftware #software{
    width: 0px;
    height: 0px;
    position: absolute;
    left: 100px;
    overflow: hidden;
    background:rgba(0,0,0,0.01);
    
}
#isoftware:hover #software{
    width: 820px;
    height: 430px;
    position: absolute;
    left:   -400px;
    top: -500px;
    border-radius: 20px 20px 20px 20px;
    border: 2px solid #03669E;
}


#ihardware{
    background-image: url(../image/open_source_hardware_logo1.png);
    background-repeat: no-repeat;
    position: absolute;
    top:13px;
    left: 215px;
    width: 100px;
    height: 100px;
    
    
}
#ihardware #hardware{
    width: 0px;
    height: 0px;
    position: absolute;
    left: 100px;
    overflow: hidden;
    background:rgba(0,0,0,0.01);
    
}
#ihardware:hover #hardware{
    width: 820px;
    height: 430px;
    position: absolute;
    left:   -600px;
    top: -505px;
    border-radius: 20px 20px 20px 20px;
    border: 2px solid #03669E;
}

.titrehtml5{
    position: absolute;
    top: -20px;
    left: 350px;
    font-family: arial,verdana sans-serif;
    font-size: 40px;
    
    
}

.titrehtml{
    position: absolute;
    left:20px;
    top: 55px;
    font-family: arial,verdana sans-serif;
     font-size: 20px;
    
}

    

.titresoftware{
    font-family: arial,verdana sans-serif;
    font-size: 35px;
}

.titrehardware{
    font-family: arial,verdana sans-serif;
    font-size: 35px;
}

.phardware{
    font-family: arial,verdana sans-serif;
    font-size: 15px;
    text-align: left;
    
    
}

#textgauche{
    position: absolute;
    top: 85px;
    left: 15px;
    height: 370px;
    width: 320px;
    background:rgba(0,0,0,0.00001);
    
    
}

.icon{
    position: absolute;
    left: 335px;
    top: 20px;
}
    


#textgauche2{
    position: absolute;
    top: 85px;
    left: 15px;
    height: 300px;
    width: 370px;
    background:rgba(0,0,0,0.00001);
    
    
}


.logi{
    font-family: arial,verdana sans-serif;
    font-size: 15px;
    text-align: left;
    
}

.soft{
    position: absolute;
    top: 100px;
    left: 400px;
    height: 300px;
    
    width: 400px;
    
}


#texthtml{
    position: absolute;
    top: 75px;
    left: 15px;
    height: 120px;
    width: 600px;
    background:rgba(0,0,0,0.00001);
    
    
}

#textcss{
    position: absolute;
    top: 210px;
    left: 15px;
    height: 100px;
    width: 600px;
    background:rgba(0,0,0,0.00001);
    
}

#textjv{
    position: absolute;
    top: 350px;
    left: 15px;
    height: 120px;
    width: 600px;
    background:rgba(0,0,0,0.00001);  
}

.def{
    position: absolute;
    top: 10px;
    font-family: arial, verdana sans-serif;
    
}

.titrecss3{
    position: absolute;
    top: 200px;
    left: 20px;
    font-family: arial,verdana sans-serif;
    font-size: 20px;
}


.defcss{
    position: absolute;
    top: 15px;
    font-family: arial,verdana sans-serif;
    
}




.defjv{
    font-family: arial, verdana sans-serif;
}

.titrejv{
    position: absolute;
    top: 320px;
    font-family: arial, verdana sans-serif;
    font-size: 20px;
    left: 20px;
    
}


.imghtml{
    position: absolute;
    top: 75px;
    left: 670px;
    height: 120px;
    
}


.imgcss{
    position: absolute;
    top: 210px;
    left: 670px;
    height: 120px;
    
}

.imgjv{
    position: absolute;
    top: 350px;
    left: 670px;
    height: 120px;
}


#conteneurcontact{
    position: absolute;
    top: 20px;
    left: 150px;
    height: 400px;
    width: 650px;
    background-color: white;
}


#conteneuradr{
    position: absolute;
    left: 150px;
    top: 450px;
    background-color:#0B0B3B;
    height: 227px;
    width: 352px;
}

#co{
    position: absolute;
    top: 0px;
    width: 352px;
    height: 37px;
    background-color: #0A0A2A;
}



.college{
    font-family: arial,verdana sans-serif;
    
}


.nous{
    position: absolute;
    left: 90px;
    top: -14px;
    font-family: arial,verdana sans-serif;
}


.slogan{
    position: absolute;
    top: 10px;
    left: 0;
     font-family: arial,verdana sans-serif;
    font-size: 40px;
    width: 600px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color:#03669E;
    background-color: rgba(255,255,255,0.7);
    
}


.section{
    position: absolute;
    top: 62px;
    left: 50;
    font-family: arial,verdana sans-serif;
    font-size: 30px;
    width: 310px;
    height: 33px;
    line-height: 30px;
    text-align: left;
    color:#03669E;
    background-color: rgba(255,255,255,0.7);
    padding-left: 24px;
}
    
#accueil{
    position: absolute;
    top: 270px;
    left: 40px;
    height: 290px;
    width: 450px;
   
}

.aquarelle{
    position: absolute;
    top: 235px;
    left: 510px;
    height: 290px;
    
}

.props{
    position: absolute;
    top: 0px;
    font-size: 25px;
    font-family: arial,verdan sans sans-serif;
    font-weight: 10px;
    
}

.d{
    font-family: arial,verdana sans-serif;
    font-size: 17px;
    text-align: left;
}

#apropos{
    position: absolute;
    top: 200px;
    left: 40px;
    width: 200px;
    height: 100px;
    
}

.web{
    position: absolute;
    top: 530px;
    left: 39px;
    font-family: arial, verdana sans serif;
    font-size: 25px;
}




.actu{
    position: absolute;
    top: 620px;
    left: 90px;
    height: 100px;
}


.siteismv{
    position: absolute;
   top: 620px;
    left: 390px;
    height: 120px;
}

.facebook{
    position: absolute;
    top: 620px;
    left: 650px;
    height: 120px;
}