/*
    Theme Name: Nine-Nine
    Theme URI: http://dropagence.fr
    Description: Drop Agence Theme
    Version: 1.0.0
    Author: Drop
*/

/* Reset CSS Eric Meyer's */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 
body { line-height: 1; } 
ol, ul { list-style: none; } 
blockquote, q { quotes: none; } 
blockquote:before, blockquote:after, q:before, q:after { content: ’’; content: none; } 
table { border-collapse: collapse; border-spacing: 0; }

/* Origines */

main {
    display: block;
    margin: 0 auto;
}

#site-navigation, .pad {
    display: block;
    margin: 0 auto;
    width: 1250px;
}

/* Header */

#masthead {
    display:block;
    width:100%;
    height:auto;
    background:#fff;
    top:0;
}

#site-navigation {
    height: auto;
}

#navbar-collapse, .navbar-logo, #navbar-collapse li{
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.navbar-logo{
    width:19%; 
}

.navbar-logo img{
    display:block;
}

#navbar-collapse{
    width:80%;
    text-align: right;
}

#navbar-collapse li{
  padding-left:30px;  
}

/* Head Sub-menu */

header li .sub-menu{
    height: 0px;
    position: absolute;
    text-align: center;
    margin-top:0px;
    margin-left:-30px;
    overflow: hidden;  
}

header li:hover .sub-menu{
    height:auto;
}

/* Head Mobile*/

#site-navigation-mobile, #mobile-menu{
    display:none;
    width:100%;
    height:auto;
    margin:0 auto;
}

#fermeture-menu, #ouverture-menu {
    display:none;
    position: absolute;
    right: 20px;
    top: 45px;
    z-index:1;
}

.mobhidden{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.1s, opacity 0.1s linear;
}

.mobvisible{
    visibility: visible;
    transition: visibility 0.1s, opacity 0.1s linear;
    opacity: 1;
}
    
#content-menu {
    position:fixed;
    background: #eee;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    z-index:2;
}

#sub-content li {
    text-align: left; 
    display:block; 
    margin: 0 0 5%; 
    font-size: 120%;
    padding-left: 25px;
}

#sub-content ul {
    list-style:none; 
    margin-left:0; 
    padding-left:0; 
    margin: 50px 0;
}

/* Footer */

#footer-content {
    display: block;
    margin: 0 auto;
    width: 1250px;
    padding: 30px 0;
}

#footer1, #footer2, #footer3{
    display:inline-block;
    vertical-align: top;
}

#footer1 {
    width: 40%;
}
 
#footer2 {
    width: 30%;
}

#footer3 {
    width: 25%;
}

.cc_more_info {
    font-size:inherit;
    color: #000!important;
}
.cc_more_info:hover {
    color: #999!important;
}

/* Class et Id de références */

#layoutContent {
    padding: 50px 0;
}

.layoutLoop {
    margin: auto;
    display: block;
}

.layoutList {
    display: inline-block;
    vertical-align: top;
    padding: 11px;
}

.content{
    text-align: justify;
}

.pagi {
    margin: 25px 0 0 15px;
}

/*
@font-face {
font-family: 'exemple';
src: url('/base/themes/99/design/font/exemple.eot');
src: url('/base/themes/99/design/font/exemple.otf') format('truetype'),
     url('/base/themes/99/design/font/exemple.woff') format('woff'),
     url('/base/themes/99/design/font/exemple.eot?#iefix') format('embedded-opentype'),
     url('/base/themes/99/design/font/exemple.svg#exemple') format('svg');
font-weight: normal;
font-style: normal;
}
*/

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, a, p, li, span, strong {
  font-family : sans-serif;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    text-transform: uppercase;
    font-weight: 700;
    padding: 15px 0 10px;
}

h1, .h1 { font-size: 30px; }
h2, .h2 { font-size: 25px; }
h3, .h3 { font-size: 20px; }
h4, .h4 { font-size: 17px; }
h5, .h5 { font-size: 15px; }
h6, .h6 { font-size: 13px; }

a {
    cursor: pointer;
}

a:hover {
    opacity: 0.6;
}

.plan-2 .listPost {
    margin-left: 10px;
}
.plan-1 .listPost {
    margin-left: 10px;
}

/* Thumb */

.thumbUne {
    width:100%;
}

/* tp bando */

#band{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(0,0,0,.6);
    width:100%;
}

#band h1{
    padding: 150px 0;
    width:100%;
    text-align: center;
    color:#fff;
}

/* Box-shadow */

.ShadowTop {
    box-shadow: 0 -5px 5px -5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 -5px 5px -5px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 -5px 5px -5px rgba(0,0,0,0.3);
}

.ShadowRight {
    box-shadow: 5px 0 5px -5px rgba(0,0,0,0.3);
    -moz-box-shadow: 5px 0 5px -5px rgba(0,0,0,0.3);
    -webkit-box-shadow: 5px 0 5px -5px rgba(0,0,0,0.3);
}

.ShadowBottom {
/*    box-shadow: 0 5px 5px -5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 5px 5px -5px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 5px 5px -5px rgba(0,0,0,0.3);*/
    
     box-shadow: 0 5px 5px 0 rgba(0,0,0,0.3);
    -moz-box-shadow: 0 5px 5px 0 rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 5px 5px 0 rgba(0,0,0,0.3);
}

.ShadowLeft {
    box-shadow: -5px 0 5px -5px rgba(0,0,0,0.3);
    -moz-box-shadow: -5px 0 5px -5px rgba(0,0,0,0.3);
    -webkit-box-shadow: -5px 0 5px -5px rgba(0,0,0,0.3);
}

.Shadow {
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

/* tp testimonial */

/*backSlide*/

.backSlide{
    display:block;
    margin: 0 auto;
    background-image:url('/base/themes/99/design/bandos/bando1.jpg');
    background-size:cover;
    background-position: center;
    margin: 40px 0;
}

.backSlide-b{
    display:block;
    margin: 0 auto;
    background: rgba(0,0,0,.6);
}

/*Slide*/

#slideshow {
    display:inherit;
    position: relative;
    width: 900px;
    height: 300px;
    margin: 0px auto;
    background: transparent;
  
}
 
/* gestion des dimensions et débordement du conteneur */
#slideshow .container {
    position:relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
} 

/* 
le conteneur des slides
en largeur il fait 100% x le nombre de slides
*/
   
#slideshow .slider {
    position: absolute;
    left:0; top:0;
    width: 600%;
    height: 300px;
}

/* annulation des marges sur figure */
#slideshow figure {
    position:relative;
    display:inline-block;
    padding:0; margin:0;
}
/* petit effet de vignette sur les images */
#slideshow figure:after {
    position: absolute;
    display:block;
    content: " ";
    top:0; left:0;
    width: 100%; height: 100%;  
}
/* styles de nos légendes */
#slideshow p{
    position:relative;
    right:0; bottom: 0px;top:160px;
    margin:0;
    color: #fff;
    width:900px;
    }

#slideshow .citation{
    position:absolute;
    left:0;right:0; bottom: 0px;top:110px;
    margin:0;
    text-align:center;
    color: #fff;
    width:900px;
    }

#slideshow .entreprise{
    position:absolute;
    right:0; bottom: 0px;top:190px;
    margin:0;
    color: #fff;
    width:900px;
    text-transform: uppercase;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    }   

#slideshow img{
    position:absolute;
    left:40%; right:0; bottom: 0px;top:153px;
    margin:0;
    text-align:center;
    color: #fff;
    border-radius: 150px;
}

/* fonction d'animation, n'oubliez pas de prefixer ! */
@keyframes slider {
    0%,15%,100%  { left: 0% }
    20%,35%      { left: -100% }
    45%,60%      { left: -200% }
    65%,80%      { left: -300% }
    85%,95%      { left: -400% }
    
}
/* complétez le sélecteur : */
#slideshow .slider {
    /* ... avec la propriété animation */
    animation: slider 25s infinite;
}

@keyframes figcaptionner {
    0%, 20%, 50%, 75%, 100% { bottom: -55px;    }
    5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { bottom: 5px;      }
}
/* ajouter à l'élément : */
#slideshow figcaption {
animation: figcaptionner 1s infinite;
}

.wimg{
    text-align:left!important;
    left:440px;
}

.limg{
    text-align:center!important;
    left:0;
}

#site-navigation {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
/***********************************************************************/
/************************MEDIA SCREEN 1260 PX****************************/
/***********************************************************************/

@media screen and (max-width: 1260px){
    #footer-content, .pad {
        width:80%;
    }
    
    .layoutLoop {
        text-align: center;
    }
    
}

/***********************************************************************/
/************************MEDIA SCREEN 1050 PX****************************/
/***********************************************************************/

@media screen and (max-width: 1050px){
    #footer-content, .pad {
        width:80%;
    }
    
    .thumbList, .layoutList {
        width: 280px;
        height: auto;
    }
    
    #band h1 {
       padding: 110px 0;
    }
    
}

/***********************************************************************/
/************************MEDIA SCREEN 890 PX****************************/
/***********************************************************************/
@media screen and (max-width: 890px){

    #site-navigation {
        display:none;
    }

   #site-navigation-mobile {
        display:block;
    }
    
    #band h1 {
       padding: 70px 0;
    }
    
    .thumbList, .layoutList {
        width: 100%;
        max-width: 390px;
    }
    
    .layoutList {
        padding: 15px 0;
    }

    #footer1,#footer2,#footer3{
        padding: 20px 0;
        width: 100%;
        display: block;
    }
    
    #site-navigation-mobile .navbar-logo {
        padding: 10px 20px;
    }

    #ouverture-menu, #fermeture-menu, #mobile-menu {
        display:block
    }

/*    .sub-menu {
        display: none!important
    }*/

/*    .logged-in #ouverture-menu, .logged-in #fermeture-menu, .logged-in #sub-content ul {
        padding-top: 46px;  
    }*/

}


#gform_confirmation_message_1 {
    text-align: center;
}
#gform_confirmation_message_1 img {
    cursor: pointer;
}