/* awb project
* awb pensee, coller
* awb, css avec partie a modifier, changer et supprimer. 
*/

body{
background-color:#FFF; /*regler et attribuer la couleur de fond*/
}

.bgBody{background:url(../awb%20temp/ecole/educ.jpg);/*class pour attribuer une image de fond a la classe narrow. regler le bg repeat*/}

header{background-color:#fff;} /*la couleur d'arriere plan du header est blanche, peut etre changer a tout moment, dans ce cas on insiste sur important */

/*les propriete du lien changerons en fonction de la couleur du site*/
a {
  color: #fff; /*peut etre changer en fonction de la couleur du site*/
  text-decoration: none;
  text-align:left;
}

a:hover,
a:focus {
  color: #2a6496; /*peut etre changer en fonction de la couleur du site*/
 /* text-decoration: underline; peut etre changer avec les different tel que la couleur*/
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.couleur{
	color :#10b161;
}
p{
font-family: 'PT Sans Caption', sans-serif;
}

.p-bleu{
color: #005b7f;
font-size: 1.2em;
line-height: 28px;
}

/*utiles lorsquon utilise la classe narrow ou pour les cas ou on veut un slide total sur la page*/
.slide-full{
width:100%; 
height: 510px; 
background-color:transparent;
}


.bus {/*ligne interieur des section, tres important */
width: 100%;
height: 200px;
margin-left: auto;
margin-right:auto;
padding:1px 0;
}

#entete-logo-menu-droite{ /*utiliser si l'on doit avoir 1 bloc, celui du logo et le menu sur une seul ligne */
width: 90%;
height: 169px;
margin-right: auto;
margin-left: auto;
background-color: transparent;
border-radius: 1px;
border: 0px solid #0F0;
}
.ben{
	color:#FF5C1B;
	font-family: "Josefin Slab",cursive;
}
.logo {
width: 15%;
height: 140px;
padding: 0px;
float: left;
margin-top: 0px;
}

#rech-form { /*concerne la partie contenant la barre de recherche*/
position: relative;
bottom: 6px;
z-index: 100;
width: 100%;
}

ul#menu li a:hover{ /* pour changer la couleur du GB o survol*/
	background-colorr: #fff;
	font-stylea:italic;
	coloar:#000;
	font-weighta:bold;
}

ul#menu li ul.sous-menu li a:hover{
color: #ff5c1b;
font-style:italic;
width: 100%;
}

.bleu-flat{
color: #005b7f;
}

/*formulaire et input pour la classe block-rech permettant d'avoir RECHERCHE dans submit*/
.block-rech {
width: 100%;
position: relative;
margin-top: 5%;
}

.block-rech input[type="text"] {
padding: 10px 16px;
outline: none;
color: #c6c6c6;
font-size: 13px;
border: 1px solid rgb(236, 236, 236);
background: #FFFFFF;
width: 63.333%;
line-height: 22px;
-webkit-appearance: none;
position: relative;
}

/*parametre button block*/
.awb-lien-btn {
font-size: 14px;
cursor: pointer;
padding: 12px 40px;
color: #fff;
background-color: #ff5c1b;
display: inline-block;
margin: 7px 0px;
text-transform: uppercase;
outline: none;
position: relative;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
}

.awb-lien-btn:hover{
background-color: #fff;
color: #000;
}

.slide-2 {
    width: 100%;
    height: 300px;
    background: url("../image/IMAGE 22.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.slide-contenu-int {
    background: ;
    width: ;
    height: 240px;
    margin-left: 15%;
    margin-right: auto;
}

.slide-int-h1 {
    background: transparent;
    width: 80%;
    height: 40px;
    float: left;
    margin-top: 10px;
    color: #f0f;
    font-weight: bolder;
}

.ligne {
    width: 95%;
    height: auto;
    border: 0px solid #FFF;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 0;
}


.block-rech input[type="submit"] {
text-transform: uppercase;
font-size: 13px;
padding: 12px 12px;
border: none;
cursor: pointer;
width: 24.333%;
position: absolute;
line-height: 1.5em;
outline: none;
}

.block-rech input[type="submit"]{
backgroundc: #0F9; /* couleur arriere plan a changer en fonction de la couleur de la DD */
color: #FFF; /* couleur a changer en fonction de la couleur de la DD */
}

.block-rech-icon input[type="text"] {
padding: 10px 16px;
outline: none;
color: #c6c6c6;
font-size: 13px;
border: 1px solid rgb(236, 236, 236);
background: #FFFFFF;
width: 63.333%;
line-height: 22px;
-webkit-appearance: none;
position: relative;
}

.block-rech-icon input[type="submit"] {
text-transform: uppercase;
font-size: 13px;
padding: 12px 20px;
border: 1px solid #CCC;
cursor: pointer;
width: 2.333%;
position: absolute;
line-height: 1.5em;
outline: none;
background:#FFF url(../awb%20temp/ecole/search.png) no-repeat 9px 9px;;
}

.block-rech-icon input[type="submit"]{
color: #000; /* couleur a changer en fonction de la couleur de la DD */
}

.navicone {
position: relative;
min-height: 50px;
margin-bottom: 0px;
border: none;
width: auto;
}

.navicone ul li a { /*pour modifier, changer couleur, taille de l'icon dans la barre de menu*/
color: #FFF;
font-size: 24px;
display: block;
line-height: 50px;
width:auto;
height: 50px;
}

.triangle-li { /* pour donner une image de triangle ds la liste li */
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.slide-fpub{
width:100%; 
height: 450px; 
background: url(../image/cableavecopacité.jpg) center center;
}


.slide-f{
width:100%; 
height: 620px; 
}

.slide-v{
width:100%; 
height: 600px; 
}

.slide-c{
width:100%; 
height: 300px; 
}

.slide-p{
width:100%; 
height: 390px; 
}

.slide-l{
width:100%; 
height: 300px; 
}

/* Bar de menu contenant Accueil Services etc... */
.block-menu { /* class pour le block menu utiliser ds le SW index3-gotop, pour le header fixer en haut*/
float: left;
width: 55%;
box-sizing: border-box;
height: 65px;
padding-top: 30px; /*dans le cas du menu a droite, pres du logo, faire decaler le ul vers le bas */
padding-left: 13%;
margin-left: 50px;
}

.pti-block-se{
width: 30%;
height: 260px;
background-color:#CCC;
display:block;
float:left;
margin-left: 30px;
background-image: url(../image/wifi1.jpg);
}

.pti-block-text{
width: 30%;
height: 260px;
background-color:#CCC;
display:block;
float:left;
padding-top: 10px;
margin-left: 30px;
}

.pti-block-text>p{
margin-left: 5px;
text-align: left;
}

.pti-block-tel{
width: 30%;
height: 260px;
background-color:#CCC;
display:block;
float:left;
margin-left: 30px;
background-image: url(../image/people.png);
}

.pti-block-inf{
width: 30%;
height: 260px;
background-color:#CCC;
display:block;
float:left;
margin-left: 30px;
background-image: url(../image/raccord5.png);
}

/* Contact Tel et Email*/
.block-tel { /* class pour le block menu utiliser ds le SW index3-gotop, pour le header fixer en haut*/
float: right;
width: 24%;
height: 60px;
padding-top: 18px; /*dans le cas du menu a droite, pres du logo, faire decaler le ul vers le bas */
margin-left: 20px;
}

/* Utiliser en avant plan sur une image*/
.block-msg { /* class pour le block menu utiliser ds le SW index3-gotop, pour le header fixer en haut*/
    position: relative;
    width: 75%;
    height: 143px;
    left: 155px;
    top: 150px;
    padding-top: 5px;
	color:white;
}

/* Contient le formulaire et les informations sur le contact */
.block-contact{
width: 60%;
}

.block-info {
width: 30%;
}

input, textarea{
background-color: #303030;
border: solid 1px #aaa;
color: white;
padding: 2px;
border-radius: 5px;
}

input[type="submit"]{
margin-right: 50px;
height: 40px;
background-color: #fff;
}

form{
font-size: 1.18em;
}

fieldset{
border: solid 1px #fff;
margin-left: 50px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 15px;
border-radius: 10px;
width: 80%;
clear: left;
}

.h2_pos{
width: 300px;
position: absolute;
margin-top: 200px;
margin-left:550px;
}

.form-kora ul li{
display: inline-block;
}

.noir-kora{
background-color: #232323;
}

.bleu-kora{
background-color: rgb(70, 161, 214);
}

.texte-blanc{
color: #fff;
}

.pti-block-3-full h3{
color: #fff;
}
.block-4 {
width: 24%;
float: left;
margin: 6px;
height: 200px;
}
.block-41 {
width: 100px;
float: left;
margin: 6px;
height: 70px;
}
ul#menu-kora{
width: auto;
height: 100%;
margin-top: 0px;
display: block
}
ul#menu-kora li{
    list-style-type: none;
    display: ;
float: left;
width: auto;
height: 100%;
}

.awb-show {
    width: 95%;
    height: 150px;
    padding-top: 30px;
    border: 0px solid #000;
}

.awb-shoe-up {
    width: 25%;
    margin-left: auto;
    margin-right: 40px;
	text-align: left;
    float: left;
    display: inline-block;
    height: auto;
}

.awb-show p{
font-size: 0.8em;
}

.brochure {
    cursor: pointer;
	width: 157px;
	height: 40px;
    display: inline-block;
	background: url(../image/brochure1.jpg) #005b7f center;
    margin: 7px 0px;
    outline: none;
    position: relative;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
}

.brochure:hover {
    cursor: pointer;
	width: 157px;
	height: 40px;
    display: inline-block;
	background: url(../image/brochure2.jpg) #005b7f center;
    margin: 7px 0px;
    outline: none;
    position: relative;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
}

.contenu {
    padding-bottom: 50px;
	
}
.contenu1{
    padding-bottom: 50px;
	margin-left:48px;
	
}

/* =====================RESPONSIVE WEB DESIGN===================================== */

@media screen and (min-width: 320px) and (max-width: 600px) {
.logo, .kora-block-gauche, .kora-block-droit, .kora-photo, .kora-info{
width: 100%;

}

.kora-photo{
	margin: 5px 0px;

}

.kora-block-gauche{
	margin: 0px;
}

.da-img img, .bg-img img, .logo img, .kora-photo img{
	display:block;
}

.logo-bar-rech {
    height: auto;
	margin-bottom: 15px;
}

.block-menu {
    height: auto;
    float: left;
    width: 100%;
    box-sizing: border-box;
    padding-top: 30px;
	padding-left: 0;
    margin-left: 0;

}

.navibar {
    width: 100%;
}

.block-tel {
    height: auto;
	display: none;
}

header, section, .kora-block-gauche, .kora-photo{
    display: table;
}


ul#menu li{
	font-size: 0.79em;
    width: 100%;
}

.slide-f {
    width: 100%;
    display: table;
}

.col-md-12 h2, .col-md-12 p, .hidden, video, footer .awb-shoe-up, .kora-block-droit, .kora-block-droit img{
	display: none !important;
}

.block-4 {
    width: 40%;
    float: left;
    margin: 4px;
    height: 200px;
}
.slide-p {
    width: 100%;
    display: table;
}

#partenaire .block-4 {
    width: 100%;
    float: left;
    margin: 4px;
    height: 200px;
	margin-left: none;
}

.cdc {
    margin-left: none;
}

.block-msg {
    position: relative;
    width: 90%;
    left: 15px;
    top: 70px;
}

.slide-fpub {
    height: 350px;
}

#contact .copy-right {
    top: 0px;
}

.copy-right p{
    font-size: 0.8em;
}

.para-blok {
   line-height: 1.3em;
}

.pti-block-2-full  img{
	display: block;
	margin: 5px auto;
}

#valeurs .prin-block, footer .awb-show{
	height: auto;
}

.slide-2 {
    height: 200px;
}

.slide-2 h1 {
    position: static;
	font-size: 25px;
}

.slide-c {
    display: table;
}

.slide-c .block-4 {
    width: 100%;
}

#service .prin-block {
    height: 450px;
}

#service p {
    text-align: center;
}

.bg-img img, .kora-photo img{
    margin-left: auto;
    margin-right: auto;
}

.nav-menu-full {
    height: auto;
}

}

@media screen and (min-width: 600px) and (max-width: 1024px) 
{

	.slide-f , .slide-c, header , .slide-p, .kora-info {
    display: table;
	}
	
	.da-slide p{
		font-size: 1.25em !important;
	}

	.logo {
    width: 30%;
	}

	ul#menu li {
		background-color: #67809F !important;
		text-align: center;
		border-left: 1px solid #FFF;
		position: relative;
	}
	
	ul#menu li, ul#menu ul.sous-menu li {
		list-style-type: none;
		display: inline-block;
		width: 100%;
		height: 100%;
	}
	
	#entete-logo-menu-droite , .logo-bar-rech, .awb-show {
    height: auto;
}
	
	.block-menu {
		height: auto;
		float: left;
		width: 70%;
		box-sizing: border-box;
		padding-top: 5px;
		padding-left: 0;
		margin-left: 0;
	}

	.navibar, .kora-block-gauche, .kora-block-droit {
		width: 100%;
	}


	.nav-menu-full {
		height: auto;
		border: 1px solid #000;
		float: left;
	}
	
	#service .prin-block {
		height: 450px;
	}

.narrow, .pti-block-2, .pti-block-3, .pti-block-4, .pti-block-1-3, .pti-block-1, .pti-block-2-full, .pti-block-3-full, .awb-pb-full, .pti-block-1 a, .contenu-1, .contenu-2{
    width: 100%;
	margin-left: auto;
    margin-right: auto;
	}
	
	section .awb-show, footer .hidden, .block-tel, .contenu  .hidden, .awb-shoe-up{
		display: none;
	}
	
	.slide-c .block-4 {
    width: 47%;
    margin: 4px;
	}
	
	.slide-2 {
    height: 200px;
	}
	
	.slide-2 h1 {
    position: static;
    font-size: 25px;
	}
	
	.slide-fpub {
    height: 350px;
	}
	
	.block-msg {
    width: 90%;
    left: 15px;
    top: 70px;
	}
	
	#partenaire .block-4 {
    width: 100%;
	margin: 4px;
    margin-left: none;
	}
	
	#contact .copy-right {
    top: 35px;
	}
	
	.contenu-1{
		text-align: center;
	}
	
}

alert{background-color:#000}