/*
Theme Name: WP_Bouledogue
Theme URI: http://www.otc.fr/
Description: Thème/Framework Wordpress conçu par NicoGaudin pour l'Agence OTC
Version: 1.0
Author: Agence OTC
Author URI: http://www.otc.fr/
Tags: empty, full-width, simple, white, Framework

	Agence OTC
  http://www.otc.fr/

*/

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;}
fieldset,img{ border:0;}
address,caption,cite,code,dfn,var{ font-style:normal; font-weight:normal;}
ol,ul{ list-style:none;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;}
q:before,q:after{ content:'';}
abbr,acronym{ border:0;}

html{font-size:16px;}

*{box-sizing: border-box;}

body,button,input,select,textarea{ color:#333; font-family:"Raleway",Verdana,sans-serif; font-size:1rem; line-height: normal;}
section{
    width:100%;
    float:left;
    color:#3d519f;
    margin-bottom:75px;
}
.wrapper{
    width:100%;
    max-width:1280px;
    margin:0 auto;
}

header, section{
    width:100%;
    float:left;
}

#top-logo{
    float:left;
    display:block;
    width:20%;
    height:auto;
    min-height:70px;
    background:url(img/uvaldo-salle-de-bain-couleurs.png) no-repeat;
    background-size:contain;
    margin-top: 35px;
}

#top-logo a{
    display:block;
    width:100%;
    height:100%;
    text-indent: -9999px;
}

#contact-top{
    float:right;
    width:15%;
    display: flex;
    flex-direction: column;
    color:#3d519f;
    margin-top: 35px;
}

#contact-top div{
    display: flex;
    flex-direction: row;
    height:25px;
    line-height:25px;
}

#contact-top div i{
    display:inline-block;
    width:25px;
    border-right:2px solid #0dafd9;
    text-align:center;
    margin-right: 7px;
    height:25px;
    line-height:25px;
}

header nav{
    width:100%;
    margin-top: 25px;
}

header nav{
    width:100%;
    float:right;
}

header nav ul{
    position:relative;
    z-index:99;
    display:inline-flex;
    flex-direction:row;
    width:65%;
    float:right;
}

header nav li{
    flex:auto;
}


header nav li{
    display:block;
    flex: 2;
    transition: flex .5s;
    position:relative;
}

header nav li:hover, header nav li:focus, .current-menu-item{
    flex:2.5;
}

header nav a, header nav a:hover{
    display:block;
    padding: .7em;
    white-space:nowrap;
    transition:all .4s;
    text-decoration:none;
    color:#3d519f;
    border-bottom:2px solid #fff;
    text-transform: uppercase;
    font-weight:700;
}


header nav a:hover, .current-menu-item a{
    border-bottom:2px solid #0dafd9;
    font-weight:900;
}

/********************************* ACCUEIL *************************/
.slide{
    width:100%;
    background-repeat: no-repeat;
    background-position: left top;
    background-size:contain;
}
.wrapper-slide{
    display:flex;
    flex-direction: row;
    justify-content: center;
    margin-top:25px;
}

.contenu-slide{
    width:50%;
    float:left;
    padding:115px 50px 115px 0;
    font-size:1.125rem;
}
.contenu-slide h2{
    font-weight:900;
    font-size:3.125rem;
    margin-top:30px;
    line-height:3rem;
}

.contenu-slide a{
    display:block;
    margin:25px 0 0 0;
    padding:12px 45px;
    background: #3d519f;
    color:#fff;
    text-transform: uppercase;
    text-decoration: none;
    font-weight:100;
    line-height:1rem;
    float:left;
}

.contenu-slide a span{
    font-weight: 700;
    font-size:1rem;
    line-height:1.1rem;
}

.wrapper-slide img{
    width:50%;
    height:auto;
    float:right;
    object-fit: cover;
    object-position:left center;
}


.slick-dots{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    width:3.5%;
    margin:-30px 40% 0 51%;
    position:relative;
    z-index:99;
}

.slick-dots li{
    display:block;
    width:17px;
    height:17px;
    border-radius: 3px;
}

.slick-dots li button{
    display:block;
    width:100%;
    height:100%;
    background:#fff;
    opacity:0.7;
    border:0;
    border-radius: 2px;
    text-indent:-9999px;
}
.slick-dots li.slick-active button{
    opacity:1;
}
#presentation-accueil div p{
    margin-top:15px;
    font-size:1.125rem;
}

.domaines{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}


.domaine{
    text-align:center;
    width:16%;
    margin-top:55px;
}

.domaine h2{
    font-size:1.125rem;
    font-weight:bold;
    text-transform: uppercase;

}

#engagements-accueil{
    background:#0dafd9;
    color:#fff;
    padding:45px 0;
    margin-bottom:3px;
}

#engagements-accueil h2{
    font-size:3.125rem;
    font-weight:900;
    margin-bottom:45px;
}

#engagements-accueil ul{
    list-style-type: disc;
    font-weight:bold;
    margin:0 0 20px 20px;
}

/********************************** PAGES ACTIVITES ****************/

#top-page{
    height:75vh;
    background-size: cover;
    background-position: center center;
    color:#fff;
    padding:120px 0 340px 0;
    margin-top:25px;
    text-shadow: 1px 1px 2px #3d519f;
}

#top-page h1, #top-page-defaut h1{
    font-size:3.125rem;
    font-weight:900;
    margin-top:25px;
    width:100%;
    padding-right:50%;
}

#contenu-page h2{
    font-size:1.4rem;
    font-weight:900;
    margin:1.5rem 0 1rem 0;
}
#contenu-page h3{
    font-size:1.25rem;
    font-weight:800;
    margin:1.5rem 0 1rem 0;
}
#contenu-page h4{
    font-size:1rem;
    font-weight:700;
    margin:1.5rem 0 1rem 0;
}

.page-template-activite p{
    margin-bottom:1rem;
}

#pictos{
    width:100%;
    margin:70px 0 60px 0;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

.picto{
    text-align:center;
    width:16%;
    margin-top:55px;
}

.picto h2{
    font-size:1.125rem;
    font-weight:bold;
    text-transform: uppercase;
}

#focus-page{
    background:#0dafd9;
    color:#fff;
    padding:45px 0;
    margin-bottom:3px;
}

#focus-page h2{
    font-size:3.125rem;
    font-weight:900;
    margin-bottom:45px;
}

#focus-page ul{
    list-style-type: disc;
    margin:0 0 20px 50px;
}

#travaux{
    margin:70px 15% 60px 15%;
    text-align:center;
    width:100%;
    font-weight:bold;
    width:70%;
}

#travaux li::after{
    content:"•";
    width:100%;
    text-align:center;
    color:#0dafd9;
    font-size:3.5rem;
    float:left;
}

#map{
    width:100%;
    height:40vh;
}

#top-page-defaut{
    background:#3d519f;
    color:#fff;
}

/********************************** Footer *************************/

footer{
    background:#3d519f;
    width:100%;
    float:left;
    border-top:5px solid #fff;
    color:#fff;
    padding:45px 0 0 0;
}
footer div{
    display: flex;
    flex-direction: column;
}

#footer-top{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

#coordonnees-footer{
    width:30%;
}
#contact-footer{
    float:right;
    width:100%;
    display: flex;
    flex-direction: column;
    color:#fff;
    margin-top: 35px;
}

#contact-footer div{
    display: flex;
    flex-direction: row;
    height:25px;
    line-height:25px;
}

#contact-footer div i{
    display:inline-block;
    width:25px;
    border-right:2px solid #fff;
    text-align:center;
    margin-right: 7px;
    height:25px;
    line-height:25px;
}
footer h2{
    display: block;
    text-indent: -9999px;
    width:100%;
    min-height:55px;
    background:url(img/uvaldo-salle-de-bain-blanc.png) no-repeat;
    background-position:top left;
    background-size: contain;
    margin-bottom:30px;
}
#cta-footer{
    display:flex;
    flex-direction: row;
    width:70%;
}
#visuel-cta-footer{
   width:30%;
}
#visuel-cta-footer img{
    width:70%;
    height:auto;
    margin:0 15%;

}
#content-cta-footer{
    display:flex;
    flex-direction: column;
}

#titre-cta-footer{
    font-size:1.8rem;
    font-weight:700;
    padding:50px 0 10px 0;
}

#content-cta-footer a{
    display:block;
    padding:25px;
    color:#fff;
    font-weight:700;
    text-decoration: none;
    text-transform: uppercase;
    background:#0dafd9;
    margin-top:20px;
    text-align: center;
}


#mentions-footer{
    font-size:0.8rem;
    text-align: center;
    width:100%;
    margin:50px 0 20px 0;
}

#mentions-footer span, #mentions-footer div, #mentions-footer ul, #mentions-footer ul li, #mentions-footer ul li a{
    display: inline-block;
    color:#fff;
    text-decoration: none;
}



#otc{
    width:100%;
    float:left;
    margin-top:15px;
    height:30px;
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.4);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000)";
    color:#ccc;
    font-size: 0.8rem;
}
#otc span{
    display:inline-block;
    width:100%;
    height:30px;
    line-height:30px;
    text-align:center;
}
#otc span a{
    color:#fff;
    text-decoration: none;
    transition: all .4s linear;
}
#otc span a:hover{
    text-decoration:underline;
    color:#ffdd00;
}

@media screen and (max-width: 1280px) {
    .wrapper{
        width:100%;
        max-width:980px;
    }

    header nav ul{
        width:80%;
    }
    #top-page{
        margin-top:0;
    }
    #top-page h1{
        padding-right:25%;
    }

    .slick-dots{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        width:4%;
        margin:-30px 40% 0 51%;
        position:relative;
        z-index:99;
    }

    .slick-dots li{
        display:block;
        width:17px;
        height:17px;
        border-radius: 3px;
    }

    .slick-dots li button{
        display:block;
        width:100%;
        height:100%;
        background:#fff;
        opacity:0.7;
        border:0;
        border-radius: 2px;
        text-indent:-9999px;
    }

    #top-page{
        padding-left:5%;
    }

    #contenu-page{
        padding:0 5%;
    }

    #focus-page{
        padding:45px 5%;
    }

    #footer-top{
        padding-left:5%;
    }
}

@media screen and (max-width: 980px) {
    .wrapper{
        width:100%;
        max-width:640px;
    }

    .slick-dots{
        display:none;
    }
    .wrapper-slide{
        display:flex;
        flex-direction: column-reverse;
        justify-content: center;
        margin-top:25px;
    }

    .contenu-slide {
    width: 100%;
    padding: 50px 0;
    }

    .contenu-slide h2, #engagements-accueil h2, #top-page h1{
        font-size:2.5rem;
    }

    .wrapper-slide img{
        width:100%;
    }

    .domaines, #pictos{
        flex-flow:row wrap;
        justify-content: center;
    }

    .domaine, .picto{
        width:32%;
        margin-top:25px;
    }

    .page-id-11 .picto{
        width:50%;
    }

    #footer-top{
        padding:0 2%;
    }

    #visuel-cta-footer{
        display:none;
    }

    #content-cta-footer{
        padding-left:5%;
    }
}

@media screen and (max-width: 640px) {
    .wrapper{
        width:100%;
        max-width:320px;
    }
    .contenu-slide h2, #engagements-accueil h2, #top-page h1{
        font-size:2rem;
        line-height:2rem;
    }
    .domaine, .picto{
        width:50%;
        margin-top:25px;
    }
    .page-id-11 .picto{
        width:100%;
    }
    #footer-top{
        padding-left:5%;
        display:flex;
        flex-direction: column;
    }

    #cta-footer{
        width:100%;
    }
    #content-cta-footer {
    padding-left: 0;
}


    #visuel-contact{
    width:80%;
    margin:40px 10%;
    }

    #visuel-contact img{
        width:100%;
        height:auto;
    }

    #coordonnees-footer{
        width:100%;
    }
}





/* Balises block */
.post-content h1{ }
.post-content h2{ }
.post-content h3{ }
.post-content h4{ }
.post-content h5{ }
.post-content h6{ }
.post-content p{ }
.post-content ul{ }
.post-content ol{ }
.post-content blockquote{ }
.post-content pre{ }
.post-content address{ }
.post-content address{ }

/* Balises inline */
.post-content strong{ }
.post-content em{ }
.post-content acronym{ }
.post-content code{ }
.post-content del{ }
.post-content ins{ }

/* Classes des images */
.alignleft{ display:inline; float:left;}
.aligncenter{ clear:both;	display:block; margin-left:auto; margin-right:auto;}
.alignright{ display:inline; float:right;}
.size-auto{ }
.size-medium{ }
.size-large{ }
.size-full{ }
.wp-caption{ }
.wp-caption img{ }
.gallery{ }
.gallery .gallery-item{ }