/*  
Document   : design
Created on : 27 Septembre 2017, 10:40:28
Author     : sbenamoura 
*/
  
*{ font-family: 'Cabin';}
input[type="password"]{font-family:"Times New Roman",Georgia,Serif;} 
body {width: 100%;height: auto;margin:0px;padding:0px;background:#F0F0F0;}
#wowslider-container1 .ws-title {position: absolute;display: block;bottom: 2em;left: 343px !important;margin-right: 1em;padding: 1em;padding-left: 3em;z-index: 50;line-height: 2.7em;color: #fff;text-transform: none;opacity: 1;font-family: 'Roboto Condensed', sans-serif;}
.clear { clear: both;}
a {cursor: pointer; text-decoration: none;}
a:hover {text-decoration: underline;}
img {border: none; border: 0px;}
p {padding: 0px; margin: 0px;}
h1, h2, h3 { z-index: 0; }
h2, h3, h4, h5 { margin: 0px; }


#container {padding: 0px;margin: 0px;}

#content{ width: 1280px;margin: 0 auto;padding: 0px;margin-top: 20px;padding-bottom: 80px;position:relative}

header { width: 98%;height: 45px;padding:10px 1%;background: #009DE0;position: fixed;z-index: 25;box-sizing:initial !important;text-align: center; }
header > a {float: left;height:31px}
header .menu { background:url(../svg/menu.svg) 0% 50%/26px no-repeat;padding:9px 56px 7px 0px;  }
header .logo { height: 35px;width: 112px;background:url(../svg/logo.svg) 0% 50%/108px no-repeat; padding: 14px 0px 1px 0px; margin-top: -4px;}
header .connexion {color:white;font-size: 14px;background:url(../img/connexionon.png) 100% 50% no-repeat;background-size: 26px;padding:15px 34px 1px 0px;float:right;margin-top:-1px;}
header .monPanier { float:right;background:url(../svg/panier-dv.svg) 50% 50% no-repeat;background-size: 26px;padding: 9px 0px 7px 25px;margin-left: 20px;text-decoration: none; }    
header .monPanier span { color: white;font-size: 10px;padding: 0px 3px;background: #FF472D;border: 1px solid white;border-radius: 8px;position: relative;top: -5px; }

#deconnexion { background: white;position: absolute;right: 72px;padding: 0px 5px 0px 5px;top: 48px;display: none;border-radius: 4px;cursor:pointer }
#deconnexion div { position: absolute;width: 0;height: 0;border-color: transparent transparent white;border-style: solid;top: -5px;right: 9px;border-width: 0 5px 5px; }
#deconnexion a { color:#45494D;font-size:12px;font-weight: bold; }


                       
.searchEtudes {margin: 0 auto;text-align:center;display:inline-block;}
.searchEtudes input, .searchEtudes select {font-size:15px;font-style:italic;color:#45494D;border:1px solid #CDCDCD;border-radius:6px;outline: none;padding:4px 10px;width:420px;height:26px;box-sizing:initial !important;}
.searchEtudes > img, .searchEtudes div img {width: 42px;position: relative;top: 13px;right: 0px;cursor:pointer;vertical-align: initial;}
.searchEtudes .monPanier, #aideCommande .monPanier{background:url(<?php echo BASEURL?>img/Panier-header.png) 0% 50% no-repeat; padding: 17px 15px 22px 42px;margin-left: 130px;color: white;font-size: 14px;font-weight: bold;box-sizing:initial !important;}
.searchEtudes a {width: 7px;/*text-decoration: none;*/color:#FF4921;display: inline-block;font-weight: bold;}
.searchMobile { display:none }
.searchMobile input { width:200px }
 
 
#monCompte { width: 219px; margin-left: 259px; padding: 0px; border-radius: 0px 0px 4px 4px; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white;position:relatvie;top: 0%;margin-top: 83px;left: 50%;z-index: 2;box-sizing:initial !important;} 
#monCompte > div { background: #EBEDEF;}
#monCompte .content { color: white; border-radius: 0px 0px 4px 4px;width: 203px;}
#monCompte .content a { font-size: 15px; color: black;}
#monCompte .content img{ margin-right: 7px; margin-top: 8px; position: relative; top: 2px;}
#monCompte .deconnecter {font-weight: bold; font-size: 13px; line-height: 15px;  position: relative; top: -8px;width: 202px;height: 13px;}
#monCompte .deconnecter span { display: none; color: black;text-transform: none;position: absolute;left: 112px;font-size: 11px;font-weight: normal;cursor: pointer;}
#monCompte .deconnecter a { font-size: 15px; color: black; float: right;}


                                                                                                                     
                   


footer{width: 100%;background: #5976B6;bottom: 0px}
#contentFooter{width: 1250px;margin: 0 auto;background: #5976B6;}
#contentFooter .colonneFooter{width: 176px;float: left;margin: 50px 38px 34px 0px;}
.colonneFooter a{font-family: 'Droid Sans', 'Droid Sans Mono';font-size: 11px; color: white;text-decoration: none;}
.colonneFooter a:hover{text-decoration: underline;}
.colonneFooter  p{color: white;font-weight: bold;font-size: 12px; }
#contentFooter > div div:first-child{ padding-bottom: 8px;border-bottom: 1pt dotted white;}
#separator{width: 950px;height: 5px;margin: 0 auto;border-bottom: 1px solid black;}




#logoPaiement { width: 100%;background:#D9DDDF;padding:15px 0px 12px 0px;text-align: center; }
#logoPaiement img { height:30px;margin:5px; }
#reseauxSociaux { width: 100%;background:#10379C;padding:26px 0px;text-align: center; }
#reseauxSociaux img { height:58px;margin:10px; }

.rightColumn{width:950px;float:left}
.leftColumn{width:310px;float:right}

                                  /*235*/
#menu { background:#68858F;width: 265px;position: fixed;z-index: 100;top: 65px;padding:0px 0px 40px 0px;transform: translateX(-275px);transition-duration: 0.5s;display:block; }
#menu::-webkit-scrollbar{width: 8px;margin-right: 3px;}
#menu::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 7px rgba(0,0,0,100);border-radius: 8px;}
#menu::-webkit-scrollbar-thumb{border-radius: 8px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1);background-color: #006A9E;}

#menu .accueil { padding:10px 20px;background:#E0E8F1;width:218px }
#menu a { color:#E0E8F1;font-size:14px;display:block }
#menu .content > a, #menu .content > p { margin-top:14px;padding:4px 0px 4px 35px;position:relative;left:-8px;color:white;font-size:18px;font-weight:bold}
#menu p, #menu .content > .grand {  }
#menu .accueil a { color:#68858F;font-weight:bold;background:url(/svg/home.svg) 0% 50% no-repeat;padding-left:35px; }
#menu .content { padding:0px 10px 15px 10px;width: 100%;float: inherit; }
#menu ul { list-style: none;padding-left: 14px;margin: 3px 0px 0px -10px; }
#menu li { margin-top:11px; }
#menu ul a { padding-left:20px;background:url(/svg/Puce-Menu.svg) 0% 50%/12px no-repeat; }
.scrollable .viewport { width: 258px !important; }                                                            


.premierTitre { color:#5976B6;font-size:16px;font-weight:bold;padding-bottom: 10px;margin-bottom: 5px;display: block;}
.premierTitre span { width:68px;height:11px;background:#5976B6;display:inline-block;margin-right:10px; }

#filArianne { background: white;height: 30px;margin-bottom: 15px;}
#filArianne img, #filArianne a, #filArianne p, #filArianne span, #filArianne b {float: left;margin-right: 5px;color: #808080;font-size: 15px;font-family: 'Arimo';}
#filArianne a:first-child { background:url(../img/Picto_fleche_Precedente.png) 0% 50% no-repeat;padding:5px 0px 5px 20px;margin-left:5px }
#filArianne > span { display:block;position:relative;top:5px }
.serviceClient{padding: 5px 27px 4px 0px;background: url(../img/tel.png) 100% 100%/23px no-repeat;}
#filArianne #mailTo { background:url(../svg/mail.svg) 50% 50%/24px no-repeat; width: 27px;height: 21px;float: right;position: relative;padding: 2px 0px;top: 2px;}

#colonneRight { float: left; width: 310px; margin-right: 15px;z-index: 1;margin-top: 10px;background:#F0F0F0;border-radius:20px }
#infosRecherche { padding: 20px 20px 5px 30px; background: white; font-size: 15px; font-weight: bold; }
#infosRecherche p { color: #00aeef; margin-bottom: 15px; }
#infosRecherche span { color: black; }
.affineRecherche { border-bottom: 15px solid #F0F0F0; }
.affineRecherche > span {  color: #00aeef; font-weight: bold; }   

.affineRecherche > div { margin-top: 10px; }
.affineRecherche div div { font-family: 'Arimo'; color: #45494D; font-size: 15px; line-height: 28px;background: white url(/svg/Rondbleu.svg) 14px 50%/10px no-repeat;position:relative; padding: 5px 20px 5px 35px;margin-bottom: 4px;border-radius:6px }
.affineRecherche div div span { width: 40px;background: url(../img/picto-separation.png) 0 50% no-repeat;position: absolute;right: 20px; text-align: right;color:#00aeef;font-size: 16px; }
.affineRecherche .selected { font-weight: bold; color: black; }
.affineRecherche .selectedSecteur { font-weight: bold; color: black; }
.affineRecherche .selectedSecteur a:hover { text-decoration: none; cursor: auto;}
.affineRecherche .secteurInactif a, .affineRecherche .secteurInactif span { color: #A5ABB8 !important; text-decoration: none; }
.affineRecherche .secteurInactif a:hover { cursor: auto; }
#colonneLeft { float: left; width: 635px; margin-top: 10px;border-radius: 20px; }
.optionsRecherche > img { float: right; margin-left: 2px; cursor: pointer;}
.optionsRecherche > img:first-child { float: left }
.optionsRecherche .trierPar { float: left;margin: 9px 4px 0px 4px; }
.optionsRecherche .trierPar > span { cursor: pointer; float: left; font-size: 13px; color: #919191; margin: 10px 3px; display: inline-block; font-family: 'Arimo'; }

.optionsRecherche .trierPar > div, .optionsRecherche .trierPar > a { float: right; text-align: right;}

.optionsRecherche .trierPar > span:hover {text-decoration: underline; }
.optionsRecherche .trierPar > span:first-child:hover {text-decoration: none; }




.trierPar a { font-size: 14px; color: #A5ABB8; }
.trierPar a p { padding:2px 20px 2px 5px;border-radius:12px;background:#A5ABB8;display:inline-block;margin-left:10px }
.trierPar a span { width:10px;height:10px;border-radius:50%;background:white;display:inherit; }
.trierPar .on { font-weight:bold; }
.trierPar .on p { background: #1395DC;padding:2px 5px 2px 20px; }



#resultSearch { margin-bottom: 20px; margin-top: 10px; }
.etudeSearch { padding: 10px 15px 0px 15px; border: 1px solid #EBEBEB;margin-bottom:4px;position:relative }
.etudeSearch a img { width: 77px;position: absolute;left: 5px;top: 50%;margin-top: -44px; }
.etudeSearch .content{ float: left; width: 100%; padding-bottom: 10px; }                            
.etudeSearch .content a { font-size: 18px; font-weight: bold; color: #45494D; cursor: pointer;}
.etudeSearch .content > span { color: #63676C; font-size: 14px; margin-bottom: 10px; display: block; }
.etudeSearch .content div { font-size: 13px; color: black;height:43px; margin-top: 14px;position: relative;padding-top:10px;border-top: 1px solid #F0F0F0; }
.etudeSearch .vr { background: url(../img2/Picto-Play_R.png) no-repeat; color: #ff5335; padding-left: 20px; margin-top: 3px; font-weight: bold;display:block}
.etudeSearch .pack { background: url(../svg/PictoRH-Pack.svg) no-repeat; color: #E6582A; padding-left: 20px; margin-top: 8px; font-weight: bold;display:block}
.etudeSearch .content .new { color: white; font-size: 9px; background: #2e353a; padding: 1px 5px 0px 5px; position: relative; top: -2px;}
.etudeSearch .acheter { font-size: 18px;font-weight:bold;color:black;background : url(../img/AjoutPanier.png) 95% 90%/52px no-repeat;display: table;padding: 6px 77px 6px 0px;position: absolute;top: 14px;right: 0;cursor:pointer }
.etudeSearch .precommander { background : url(../img/panier-precomande.png) 95% 90%/52px no-repeat; }
.remonter {width: 38px;cursor: pointer;position: fixed;bottom: 60px;right: 0%;margin-left: -192px;display:none; }





/*.etude { background: white; padding: 12px 10px 12px 20px; border-bottom: 2px solid #F5F5F5; }
.etude div:first-child { float: left; width: 209px; }
.etude div:first-child a { font-size: 15px; font-weight: bold; color: #2e353a; display: block;}
.etude div:first-child span{ font-size: 11px; color: #7ea6c9; font-weight: bold;}
.etude div:first-child span:nth-child(3){ font-family: 'Arimo'; font-size: 11px; color: #2e353a;}
.etude div:nth-child(2) { float: right; width: 63px; }
.etude div span:first-child { font-family: 'Arimo'; font-size: 12px; color: #2e353a; font-weight: bold; position: relative; top: -2px; } 
.etude div .acheter { margin: 0px 4px; cursor: pointer;} */


.etude { background:white;padding:10px 10px 14px 10px;margin-top:6px; }
.etude a {font-weight:bold;font-size:18px;color:#45494D;margin-bottom: 15px;display:block;line-height: 18px;}
.etude b {font-size:14px;color:#5976B6; }
.etude span, .etude p {font-size:13px;color:#45494D;display:flex;position:relative;text-align: left }
.etude .acheter { font-weight:bold;color:black;background : url(../img/AjoutPanier.png) 95% 90%/36px no-repeat;display: table;padding: 4px 56px 4px 0px;position: absolute;top: -3px;right: 0;cursor:pointer }
.plusEtudes, .boutton { padding:7px 7px 8px 7px;text-align: center;margin-top:6px }
.plusEtudes a, .boutton a, .plusEtudes p, .boutton p, .boutton span { background: #009DE0;border-radius: 15px;font-size: 16px;color: white;/*font-variant: small-caps;*/padding: 7px 0px 5px 0px;width: 265px;display: inline-block;text-align: center;margin:0;line-height: normal;cursor:pointer }

#bandeauCookie { background: #7F7F7F;padding:5px 0px;width:100%;position: fixed; bottom:0px; z-index: 3; }
#bandeauCookie > div { width: 1280px;margin:0 auto;color:white;font-size:13px;padding:0px 10px;position:relative;box-sizing: border-box; }                      
#bandeauCookie > div p { padding-right:150px;text-align:justify }
#bandeauCookie > div div { position:absolute;right:0;top:50%;margin-top:-10px; }
#bandeauCookie .mobile { display:none }

/***************************************************************          DEBUT CSS RESPONSIVE             **************************************************************************************************/

@media (max-width: 1835px) and (min-width: 980px){
    #content { width:960px; } 
    .rightColumn{width:635px} 
    #contentFooter{width: 965px;}
    #contentFooter .colonneFooter{width: 121px;margin: 50px 47px 34px 0px;}
    #menu { transform: translateX(-275px);transition-duration: 0.5s; }
    #bandeauCookie > div { width: 960px }
    
}
@media (max-width: 980px) and (min-width: 0px){
    #nosPartenaires, #contentFooter .colonneFooter { display:none; }
    #contentFooter { width:auto;text-align: center; }
    #contentFooter .colonneFooter:first-child { width:110px;display:inline-block;margin:20px 0px 10px 0px;float: initial; }
    #contentFooter .colonneFooter:first-child div { display:none;border:0 }
    #contentFooter .colonneFooter:first-child div:first-child { display:block }
    #contentFooter div:first-child div:first-child p { cursor:pointer;background:url(../svg/FlechePleineBas.svg) 100% 50%/19px no-repeat;text-align:left }   
}

@media (max-width: 1530px) and (min-width: 0px){ 
    #menu { transform: translateX(-275px);transition-duration: 0.5s; }
    header .menu { background:url(../img/menu-header.png) 0% 50%/26px no-repeat }
}


@media (max-width: 992px) and (min-width: 0px){  /* taille tablette */
   
   #content { width:100%;margin: 0 auto;margin-top: 20px; }
   .rightColumn{ width:100% }
   .leftColumn { width: 100%;margin-top:20px; }
   .searchEtudes input { width:250px }
   .searchEtudes img { right: 0px; }
    #bandeauCookie > div { width: 100% }
    #bandeauCookie > div p { padding-right:150px;display:block }
}

@media (max-width: 768px) and (min-width: 0px){    /* taille tablette */
    header .logo { width: 30px;background:url(../img/logo-X.png) 0% 68%/30px no-repeat;}
    header .menu { padding-right:45px }
    #filArianne span, #filArianne p span, .searchEtudes { display:none; }
    .searchMobile { display:block; }
    .searchEtudes img { right: 8px; }
    #nosPartenaires { display:none }
    #bandeauCookie > div p:first-child { display:none }
    #bandeauCookie .mobile { display:block }
    .serviceClient {     padding: 23px 27px 4px 0px; }
}

@media (max-width: 500px) and (min-width: 0px){ 
    header .connexion span { display:none }
    .searchEtudes input { width:199px }
}
@media (max-width: 315px) and (min-width: 0px){
   .optionsRecherche > img:nth-child(5) { display:none }
}
/***************************************************************          END CSS RESPONSIVE             **************************************************************************************************/