/* cmsms stylesheet: wk-custom modified: samedi 31 juillet 2021 20:33:03 */
@font-face {
    font-family: 'open-sans';
    src: url('https://wk-custom.fr/uploads/_interface/polices/OpenSans-light.woff') format('woff');
}

@font-face {
    font-family: 'open-sans-regular';
    src: url('https://wk-custom.fr/uploads/_interface/polices/OpenSans-Regular.woff') format('woff');
}

@font-face {
    font-family: 'adrip1';
    src: url('https://wk-custom.fr/uploads/_interface/polices/adrip1.woff') format('woff');
}

html, body
{
    margin: 0;
    padding: 0;
    font-family: open-sans,Arial,sans-serif;
    font-size: 115%;
}

img
{
    max-width: 100%;
    max-height: auto;
}

h1
{
    font-family: adrip1;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-shadow: 2px 1px 0 #104f78;
}

h2
{
    font-family: adrip1;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 250%;
    color: #104f78;
}

@media screen and (max-width: 765px)
{
    h2
{
    font-size: 150%;
}
}

h3
{
    font-size: 95%;
    color: #104f78;
}

a
{
    color: #104f78;
    text-decoration: none;
    font-weight: bold;
}

::-webkit-scrollbar {
  width: 5px;
  height: 3px;
}

::-webkit-scrollbar-track {
  background: #eee;
}

::-webkit-scrollbar-thumb {
  background: #104f78;
}

::-webkit-scrollbar-thumb:hover {
  background: #104f78;
}

input[type='submit']
{
    min-width: 185px;
    height: 45px;
    margin: auto;
    border: 1.5px solid #104f78;
    border-radius: 3px;
    transition: 400ms;
    color: #104f78;
    background-color: transparent;
    font-size: 18px;
}

input[type='submit']:hover
{
    transition: 400ms;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1.5px solid transparent;
    cursor: pointer;
}

input[type='text'], input[type='email']
{
    width: 250px;
    height: 35px;
    border: 1.5px solid #104f78;
}

textarea
{
    width: 50%;
    min-height: 200px;
}

@media screen and (max-width: 765px)
{
    textarea
{
    width: 100%;
    min-height: 200px;
}
}

label
{
    font-weight: bold;
}

#header 
{
    text-align: center;
    background-image: url('https://wk-custom.fr/uploads/_interface/images/mur-beton.jpg');
    background-size: 100% auto;
}

#header .logo
{
    opacity: 0;
    animation-name: logo;
    animation-duration: 3s;
    animation-fill-mode: forward;
}

#header .titre h1
{
    display: inline;
}

#header .titre
{
    opacity: 0;
    font-size: 180%;
}

/* Header - vierge */
#header-vierge
{
    text-align: center;
    background-image: url('https://wk-custom.fr/uploads/_interface/images/mur-beton.jpg');
}

#header-vierge .logo
{
    width: 300px;
    display: inline-block;
    vertical-align: top;
}

#header-vierge .titre h1
{
    display: inline;
}

#header-vierge .titre
{
    width: 68%;
    padding-top: 15px;
    display: inline-block;
    vertical-align: top;
    font-size: 180%;
}

/* Header - vierge */

@media screen and (max-width: 765px)
{
#header 
{
    background-repeat: no-repeat;
}

#header .logo img
{
    max-width: 50%;
}

#header .titre
{
    font-size: 50%;
}

/* Header - vierge */

#header-vierge .logo
{
    width: 100%;
}

#header-vierge .logo img
{
    max-width: 50%;
}

#header-vierge .titre h1
{
    display: inline;
}

#header-vierge .titre
{
    width: 100%;
    padding-top: 0px;
    font-size: 50%;
}

/* Header - vierge */

}

#menu
{
    visibility: hidden;
    width: 0%;
    height: 40px;
    padding-top: 10px;
    background-color: #000000;
    box-shadow: 0px 5px 5px #000;
    color: white;
    text-align: center;
    position: sticky;
    z-index:3;
    top: 0;
}

#menu div
{
    width: 15%;
    font-size: 100%;
    display: inline-block;
    vertical-align: top;
    text-transform: uppercase;
    opacity: 0;
    font-family: open-sans;
}

#menu a
{
    color: white;
    transition: 200ms;
}

#menu a:hover
{
    font-size: 90%;
    color: #104f78;
    transition: 200ms;
    -webkit-text-stroke: 0.5px;
    -webkit-text-stroke-color: #104f78;
}

/* Menu - vierge */
#menu-vierge
{
    height: 40px;
    padding-top: 10px;
    background-color: #000000;
    box-shadow: 0px 5px 5px #000;
    color: white;
    text-align: center;
    position: sticky;
    z-index:3;
    top: 0;
}

#menu-vierge div
{
    width: 15%;
    font-size: 100%;
    display: inline-block;
    vertical-align: top;
    text-transform: uppercase;
    font-family: open-sans;
}

#menu-vierge a
{
    color: white;
    transition: 200ms;
}

#menu-vierge a:hover
{
    font-size: 90%;
    transition: 200ms;
    -webkit-text-stroke: 0.5px;
    -webkit-text-stroke-color: #104f78;
}


.animation-menu {
    animation-name: animationMenu;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    -webkit-animation-name:animationMenu;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
}

.animation-menu-div {
    animation-name: animationMenuDiv;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    -webkit-animation-name:animationMenuDiv;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}  

@-webkit-keyframes animationMenu {
    0%   { width: 0%; visibility: hidden;}
    100% { width: 100%; visibility: visible;}
}

@-webkit-keyframes animationMenuDiv {
    0%   { opacity: 0;}
    100% { opacity: 1;}
}
/* Menu - vierge */

@media screen and (max-width: 765px)
{
#menu div
{
    width: 31%;
    font-size: 60%;
}

/* Menu - vierge */

#menu-vierge div
{
    width: 31%;
    font-size: 60%;
}

}


#contenu
{
    width: 100%;
    margin: auto;
    opacity: 0;
    background-color: white;
}

#contenu-vierge
{
    width: 80%;
    min-height: 600px;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
    text-align: justify;
    text-align-last: left;
    background-color: white;
}

#contenu-vierge h3
{
    font-size: 160%;
}

@media screen and (max-width: 765px)
{
    #contenu-vierge
{
    width: 95%;
    margin: auto;
    padding-left: 0px;
    padding-right: 0px;
}
}

section .titre
{
    width: 80%;
    position: relative;
    left: -999px;
    margin: auto;
}

section .titre h2
{
    display: inline;
}

section
{
    width: 100%;
    margin: auto;
    min-height: 500px;
    padding-top: 50px;
}

section .background
{
    width: 100%;
    min-height: 600px;
    background-size: 100%;
    background-size: cover;
    opacity: 0;
}

section .murs
{
    background-image: linear-gradient(to bottom, rgba(16,79,120,0.5),
    rgba(0,0,0,0.8)),
    url('https://wk-custom.fr//uploads/_interface/images/murs/dragon.jpg');
    
}

section .animation
{
    background-image: linear-gradient(to bottom, rgba(16,79,120,0.5),
    rgba(0,0,0,0.8)),
    url('https://wk-custom.fr//uploads/_interface/images/animations/animations.jpg');
    
}

section .tableaux
{
    background-image: linear-gradient(to bottom, rgba(16,79,120,0.5),
    rgba(0,0,0,0.8)),url('https://wk-custom.fr//uploads/_interface/images/tableaux/superman.jpg');
}

section .divers
{
    background-image: linear-gradient(to bottom, rgba(16,79,120,0.5),
    rgba(0,0,0,0.8)),url('https://wk-custom.fr//uploads/_interface/images/divers/divers.jpg');
}

section .vetements
{
    background-image: linear-gradient(to bottom, rgba(16,79,120,0.5),
    rgba(0,0,0,0.8)),url('https://wk-custom.fr//uploads/_interface/images/vetements/casquettes.jpg');
}

section .fleche-gauche, section .fleche-droite
{
    width: 9%;
    margin-top: 15%;
    display: inline-block;
    text-align: center;
}

section .fleche-gauche img, section .fleche-droite img
{
    transition: 200ms;
}

section .fleche-gauche img:hover, section .fleche-droite img:hover
{
    cursor: pointer;
    transform: scale(1.5);
    opacity: 0.9;
    transition: 200ms;
}


section .contenu
{
    width: 80%;
    height: 100%;
    margin: auto;
    padding-top: 5%;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}

section .contenu .gallery
{
    width: 90%;
    margin: auto;
    overflow-x: auto;
    white-space: nowrap;
    min-height: 400px;
    scroll-behavior: smooth;
}

section .contenu .gallery .images
{
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
    border: 5px solid white;
}

section .contenu .gallery .images:nth-child(-n+5)
{
    opacity: 0;
}

section .contenu .gallery .titres
{
    width: 100%;
    height: 35px;
    background-color: white;
}

section .contenu .gallery .titres h3
{
    display: inline;
}


section .block
{
    width: 48.5%;
    display: inline-block;
    vertical-align: top;
    text-align: justify;
    text-align-last: left;
}

#presentation .titre
{
    width: 80%;
    margin: auto;
    left: 0;
}

section .presentation-photo
{
    text-align: center!important;
    text-align-last: center;
}

section .presentation-photo img
{
    width: 80%;
    max-width: 100%;
    margin: auto;
}

.mobile
{
    display: none;
}

.ordinateur
{
    display: inline;
}


@media screen and (max-width: 765px)
{

.mobile
{
    display: inline;
}

.ordinateur
{
    display: none;
}
    
    
section .background
{
    padding-bottom: 5px;
    min-height: 300px;
}

section .fleche-gauche, section .fleche-droite
{
    width: 0%;
    margin-top: 0%;
    display: none;
}

section .contenu
{
    width: 100%;
    padding-top: 3%;
}

section .block
{
    width: 95%;
    margin: auto;
}
}

#contact
{
    width: 80%;
    margin: auto;
}

#contact .gauche, #contact .droite
{
    width: 48.5%;
    padding: 5px;
    display: inline-block;
    vertical-align: top;
}

@media screen and (max-width: 765px)
{
    #contact
{
    width: 95%;
    margin: auto;
}

#contact .gauche, #contact .droite
{
    width: 100%;
    padding: 0px;
}
}

footer
{
    height: 100px;
    margin-top: 15px;
    padding-top: 15px;
    background-color: #000000;
    box-shadow: 5px 0px 5px #000;
    text-align: center;
    color: white;
}

footer a
{
    color: white;
}

footer .block
{
    width: 33%;
    display: inline-block;
    vertical-align: top;
}

@media screen and (max-width: 765px)
{
footer
{   
    height: 300px;
}
    
    footer .block
{
    width: 95%;
    margin: auto;
}
}
/* cmsms stylesheet: ColorBox modified: vendredi 30 juillet 2021 18:06:10 */
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
#cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin-top:20px;background:#000;}
        #cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #000; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}