@charset "utf-8";
/* CSS Document */
/****************************************RESET **********************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0;}
table{ border-collapse:collapse; border-spacing:0;}
fielset,img{ border:0;}
address,caption,cite,code,dfn,var{font-style:normal; font-weight: normal;}
ol,ul{list-style:none;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
/*body{ background-image:url(sources/bg_graphic_gris.png); background-repeat:repeat; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height: 16px;}*/
a{color:#0072bc; cursor:pointer; text-decoration:none;}
.cb{clear:both;}

body{
    height: 100%;
}
/******************************H2*********************************/
h1{
    font-family: 'LeagueGothicRegular';
    font-size: 30px;
    font-weight: normal;
    line-height: 42px;
    color: honeydew;
    padding-left: 15px;

}
h2{
    font-family: 'LeagueGothicRegular';
    font-size: 24px;
    font-weight: normal;
    line-height: 42px;
    color: #62bcda;
    padding-left: 15px;

}
h3{
    font-family: 'LeagueGothicRegular';
    font-size: 18px;
    font-weight: normal;
    line-height: 42px;
    color: #62bcda;
    padding-left: 15px;

}
p{
    font-family: 'LektonRegular';
    font-size: 14px;
    font-weight: normal;
    line-height: 25px;
    color: #ffffff;
    padding-left: 15px;
    padding-right: 15px;
}
/******************************POLICE EXOTIQUE*********************************/
@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('Fonts/league-gothic/League_Gothic-webfont.eot');
    src: url('Fonts/league-gothic/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
    url('Fonts/league-gothic/League_Gothic-webfont.woff') format('woff'),
    url('Fonts/league-gothic/League_Gothic-webfont.ttf') format('truetype'),
    url('Fonts/league-gothic/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'LektonRegular';
    src: url('Fonts/lekton/Lekton-Regular-webfont.eot');
    src: url('Fonts/lekton/Lekton-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('Fonts/lekton/Lekton-Regular-webfont.woff') format('woff'),
    url('Fonts/lekton/Lekton-Regular-webfont.ttf') format('truetype'),
    url('Fonts/lekton/Lekton-Regular-webfont.svg#LektonRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'LektonBold';
    src: url('Fonts/lekton/Lekton-Bold-webfont.eot');
    src: url('Fonts/lekton/Lekton-Bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('Fonts/lekton/Lekton-Bold-webfont.woff') format('woff'),
    url('Fonts/lekton/Lekton-Bold-webfont.ttf') format('truetype'),
    url('Fonts/lekton/Lekton-Bold-webfont.svg#LektonBold') format('svg');
    font-weight: normal;
    font-style: normal;

}
/******************************CSS*********************************/
*{
    padding: 0px;
    margin: 0px;
}
body{
    background-image: url("sources/bg_graphic_gris.png");
    background-repeat: repeat;
}
#header{
    height: 150px;
    width: 10000px;
    position: fixed;
    background-image:url(sources/fond.jpg);
    background-repeat: repeat;
    padding-left: 5px;
    z-index: 10;
}
#logo{
    float: left;
}
#logo img{
    margin: 10px 30px 15px 0;
    border: 2px #f2f2f2 solid;
    border-radius:3px;
}
/*****************************************Illumination logo*****************************/
@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 12px rgba(51,204,255,0.3);
    }
    50% {
        -webkit-box-shadow: 0 0 12px rgba(51,204,255,0.9);
    }
    100% {
        -webkit-box-shadow: 0 0 12px rgba(51,204,255,0.3);
    }
}
/* 0px de décalage en x, 0px de décalage en y, 12px de flou et la valeur en RGBA soit RedGreenBlueAlpha donc le 0.5 pour 50% d'opacité */
#logo a:hover img{
    -webkit-box-shadow: 0px 0px 12px rgba(51,204,255,0.7);
    -moz-box-shadow: 0px 0px 12px rgba(51,204,255,0.7);
    box-shadow: 0px 0px 12px rgba(51,204,255,0.7);
    -webkit-animation: pulse 1.8s infinite ease-in-out;
}
/**************************************************************************************/
nav{
    position: relative;
    z-index: 0;
}
#menu{
    margin-top: 10px;
}
#menu li{
    float: left;
    list-style-type: none;
    margin-right: 8px;
    padding-left: 8px;
    border-left: 2px solid #ffffff;
}
#menu a{
    color: #191919;
    text-decoration: none;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}
#menu a:hover{
    color: #62bcda;
    text-decoration: none;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}
#contenu{
    min-height: 420px;
    width: 10000px;
    padding-top: 200px;
}
.wrap{
    width: 800px;
    height: 500px;
    background-color: gray;
    border-radius: 10px;
    border: 1px #62bcda solid;
    margin-left: 5px;
}
/*******************************************shadows_curve*************/
.shadows-curve{

    position: relative;
    display: inline-block;

    width: 800px;
    height: 500px;

    font-size: 1.5em;
    line-height: 3em;
    font-family: 'LektonBold';

    -webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    -moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
.shadows-curve:before,.shadows-curve:after{
    content:"";
    position:absolute;
    display:block;
    bottom:11px;
    width: 50%;
    height: 20px;

    background: rgba(0,0,0,0.1);
    z-index: -10;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.5);
    -moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.5);
    box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.5);
}
.shadows-curve:before {

    left:0;
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
}
.shadows-curve:after {

    right:0;
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    -o-transform: rotate(4deg);
}
/***************************************************************************/
#integration{
    float: left;
    width: 2500px;
    /*border: 1px black solid;*/
}
#img_languages_web{
    margin: 165px 0px 0px 630px;
    position: absolute;
}
#responsive{
    float: left;
    width: 2500px;
    /*border: 1px black solid;*/
}
#img_responsive{
    float: right;
    margin: 58px 12px 3px 3px;
}
#navigateurs{
    float: left;
    width: 2500px;
   /* border: 1px black solid;*/
}
#img_navigateurs{
    margin: 170px 0px 0px 240px;
    position: absolute;
}
#img_w3c{
    margin: 390px 0px 0px 500px;
    position: absolute;
}
#garanties{
    float: left;
    width: 2500px;
   /* border: 1px black solid;*/
}
#img_garanties{
    margin: 8px 0px 0px 550px;
    position: absolute;
}
/*****************************CONTACT****************************/
footer{
    height: 100%;
    width: 10000px;
    position: fixed;
    background-image:url(sources/fond.jpg);
    background-repeat: repeat;
    padding-left: 5px;
    margin: 60px 0px 0px 0px;
    z-index: 10;
}
#contact{
    position: relative;
    float: left;
}
#contact h2{
    position: relative;
    font-family: 'LeagueGothicRegular';
    font-weight:normal;
    font-size: 24px;
    line-height:22px;
    color:#62bcda;
    text-transform:uppercase;
    padding: 20px 0 0 15px;
}
#contact p{
    position: relative;
    padding: 50px 0 0 15px;
    font-size:12px;
    line-height:18px;
    color:#8c8c8c;
    font-weight:bold;

    text-transform:uppercase;
    margin-top:10px;
    margin-bottom:10px;
}
#form{
    position: absolute;
    margin: -165px 0 0 455px;
}
label{
    font-size:12px;
    float:left;
    color:#828282;
    width:170px;
}
.text{
    color:#828282;
    width:255px;
    margin-bottom:3px;
    padding:3px;
}
.question_antispam{
    color: #ffffff;
    margin: -280px 0 0 290px;
    position: absolute;
}
.text_reponse_antispam{
    color: #ffffff;
    margin: -220px 0 0 290px;
    position: absolute;
}
.reponse_antispam{
    color: #ffffff;
    margin: -200px 0 0 290px;
    position: absolute;
}
.submit{
    cursor:pointer;
    border:none;
    background:#62bcda;
    color:#FFF;
    padding:4px;
    margin: -187px 0 0 342px;
    position: absolute;
}
.reset{
    cursor:pointer;
    border:none;
    background:#62bcda;
    color:#FFF;
    padding:4px;
    margin: -187px 0 0 290px;
    position: absolute;
}