/*
Theme Name:     Atelier Genevois du store
Description:    Thème du site Atlier Genevois du Store
Author:         Design by utøpeak
Author URI:     https://www.utopeak.agency
Template:       Divi                       
Version:        0.1.0
*/

* {padding: 0;}
/* COLORS */
/* Bleu : 334045  */
/* jaune vert : dfdb00  */

/* .et-push-sidebar {display:none;}*/

.et_pb_column {min-height: 0;}

/* Typographie */
a {-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}
body {}
h1, h2, h3, h4, h5, h6 {font-family: rokkitt, serif;font-weight: 400;font-style: normal;line-height: 1.2em; text-transform: uppercase;}
h1 {font-size: 5vw;text-align: center;line-height:1em;margin-bottom:15px;}
h1 span{font-size: 3vw;line-height:0;}
h2 {font-size: 3vw;}
h3 {}
h4 {}
h5 {}
h6 {}
p {}
p a {color: #334045; border-bottom:1px solid #dfdb00;}
.jaune p a {color: #334045; border-bottom:1px solid #fff;}
.jaune a:hover {color:#fff;}
p a:hover, .black a:hover {color:#dfdb00;}
strong {font-size: 1.5vw;}
.bandeaujaune {font-size: 12px;font-weight: 700;}
.footer, .footer a {font-size: 11px; color: #fff;}
.txthero, .CTA {font-size: 4vw; font-family: rokkitt, serif;font-weight: 700;color: #fff; text-transform: uppercase;}
.CTA {line-height:1.2em;}
.jaune strong, .black, .black p, .black h2, .black h3, .black a {color: #fff;}
.jaune strong, .black strong {font-size: 1.2vw;line-height: 1.1em;}
#ariane, #ariane a, #ariane strong {font-size: 11px;color: #334045;}
#ariane a:hover {border-bottom:1px solid #dfdb00}
.inline .et_pb_button_module_wrapper {display: inline-block;margin: 0 2% 0 0;}
.bloctitre {text-align: left;}
.txthero {text-align:center;line-height:1.2em;text-shadow: #334045 1px 0 15px;}
.produits h1 {text-align:left;}

@media (max-width: 980px) {
    h1 {font-size: 7vw; }
    h2 {font-size: 5vw; }
    h3 {font-size: 4vw; }
	p {}
    .jaune strong, .black strong, strong {font-size: 3.5vw;}
	.txthero {font-size: 10vw;}
}

/* Boutons */
.jaune .btntxt {color:#334045!important; background-color: transparent; border: 1px solid #dfdb00;}
.jaune .btntxt:hover {color:#334045!important; background-color: transparent; border: 1px solid #334045;}

/* DIVERS 
#main-content {transform: translateY(-80px);}
@media (max-width: 980px) {#main-content {transform: translateY(-50px);}}
.demi {max-width:50%; margin:0;padding:0;}*/

.produits ul li {list-style-type: none;line-height:1.3em;margin-bottom:8px;}
.produits ul li:before {font-family: 'ETmodules';content: "\4e";font-size: 120%;color: #dfdb00;float:left;margin-left:-1.1em;}

.et_pb_bg_layout_light .et-pb-controllers a {background-color: rgba(255, 255, 255, .8);}
.et_pb_bg_layout_light .et-pb-controllers .et-pb-active-control {background-color: #dfdb00;}
.et_pb_bg_layout_light .et-pb-arrow-next, .et_pb_bg_layout_light .et-pb-arrow-prev {color:#dfdb00!important;}

/* BTN TOP */
.et_pb_scroll_top.et-pb-icon {bottom:0; background-color: rgba(223, 219, 0, .5);right:unset;}

/* COOKIES BANNER */
#cookie-notice {border-top: 1px solid #dfdb00; font-size: 12px;}
.cn-position-bottom {bottom:0;}
.boutoncookie {border:solid 1px #fff;padding:3px 5px; color:#fff;}
.boutoncookie:hover {border:solid 1px #dfdb00;color:#dfdb00;}
.cn-text-container {margin: 0 0 10px 0;}
.cn-close-icon::before, .cn-close-icon::after {background-color:#fff;opacity: 1;}

/* NEWSLETTER */
.inf-form {color: white;font-weight:400;font-size:14px;line-height: 1.2em;}
.inf-rgpd {font-size: 10px;line-height:1.3em;padding:5px 0;}
.custom-input {position: relative;width: 100%;margin: 10px 0 5px 0;}
.custom-email-input {width: 100%;padding: 10px!important;background-color:transparent!important;border:1px #fff solid!important;color:#fff!important;height: 25px;}
.custom-email-input:focus {border:1px #dfdb00 solid!important;}
.custom-email-input:focus ~ .custom-ok-input {background-color:#dfdb00!important;}
.custom-ok-input {position: absolute;right: 1px;top:1px;background-color:#fff!important;color:#334045;line-height: 1em;height: 23px;margin: 0;padding: 0 10px;border: none;}
.custom-email-input:focus ~ .custom-ok-input:hover {background-color:#FFF!important;}
.custom-ok-input:hover {background-color:#dfdb00!important;}

/* mosaic */
.txtmosaic {display: flex;flex-direction:column;justify-content:center;background-color:#dfdb00;font-family: rokkitt,sans-serif; font-style: normal; font-weight:400;font-size: 1.8vw;}
.txtmosaic:hover {color:white!important;}
.demi img, .quart img, .txtmosaic {-webkit-transition: .3s ease-in-out;transition: .3s ease-in-out;}
.demi img:hover, .quart img:hover {filter: grayscale(100%);}
@media all and (max-width: 980px){
    .txtmosaic {}
    .quart {max-width: 25%}
    .demi {max-width: 50%}
    .ligneflex {display: flex;}
}
/* Inverser */
.flex-inverse {display: flex;flex-direction:column-reverse;}

/* Vertical Align */
.vertical-align {display: flex; flex-direction: column; justify-content: center;}

#pictocontact {cursor: pointer; left:-43px!important; top:calc(50vh - 20px)!important;}
#pictophone {cursor: pointer; left:-43px!important; top:calc(50vh + 21px)!important;}
.txtphone {display: none;position: absolute; left:-167px!important;top:calc(50vh + 21px)!important;min-height: 40px;border-radius: 5px;padding: 0 10px;line-height: 40px;}
.txtphone a:hover {color:#334045!important;}


/* MENU ICON  */
#menuicon {font-family: rokkitt, serif;font-weight: 400;font-style: normal;line-height: 1.2em;}
#menuicon .et_pb_menu .et_pb_menu__menu,#menuicon .et_pb_fullwidth_menu .et_pb_menu__menu {display: flex!important;}
#menuicon .et_mobile_nav_menu {display: none;}

#menuicon li {justify-content: center;margin-top: 0;}
#menuicon .et_pb_row {padding: 0;}
#menuicon .et_pb_menu__wrap {background: #334045!important;border: 1px solid #fff;box-shadow: 0 12px 15px 0 rgba(51, 62, 72, .3);}
#menuicon .et_pb_menu__wrap a {color:#fff; font-size: 10px; text-transform: uppercase;}
#menuicon .et_pb_menu__wrap a:hover {color:#dfdb00;}
#menuicon .et-menu .menu-item-has-children>a:first-child {padding-right: 0;margin-right: 0;}
.accueil, .pergolas, .storeext, .storeint, .voiles, .moustiquaires, .parasols, .domotiques, .storelamelle, .volets {text-align: center; width:9.85vw;padding: 0!important;}
.accueil, .pergolas, .storeext, .storeint, .voiles, .moustiquaires, .parasols, .domotiques, .storelamelle {border-right: 1px solid #fff;}

.accueil a:after, .pergolas a:after, .storeext a:after, .storeint a:after, .voiles a:after, .moustiquaires a:after, .parasols a:after, .domotiques a:after, .storelamelle a:after, .volets a:after {
    content: none!important;
    margin: 0!important;
    padding: 0!important;
}

.accueil img, .pergolas img, .storeext img, .storeint img, .voiles img, .moustiquaires img, .parasols img, .domotiques img, .storelamelle img, .volets img {width: 45px;display: block; margin: 0 auto;}

/* sous menu  */
#menuicon .sub-menu {background-color: #334045!important;padding: 0; border: 1px solid #fff;margin-top: 1px;box-shadow: 0 12px 15px 0 rgba(51, 62, 72, .3);}
#menuicon .sub-menu a:before{background: none;content: none;}
#menuicon .sub-menu li a {font-size: 14px;line-height: 1.2em;}
#menuicon .sub-menu li {border-bottom: 1px solid #fff;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}
#menuicon .sub-menu li:hover {background-color:#1f2b30;}
#menuicon .sub-menu li:last-child {border-bottom: none;}
#menuicon .sub-menu li a:hover {background: none!important;}
#menuicon li li {padding: 0!important;}
#menuicon li ul {width: auto!important;}
#menuicon .volets .sub-menu  {margin-left: -4.5vw;}

@media all and (max-width: 980px) {
    #menuicon .sub-menu {display: none;}
    #menuicon .et_pb_menu__wrap a {font-size: 6px;line-height: 1.2em;}
    .accueil, .pergolas, .storeext, .storeint, .voiles, .moustiquaires, .parasols, .domotiques, .storelamelle, .volets {width:9.9vw;}
    #menuicon .et_pb_menu .et-menu {margin: 0;}
    .txtmenu {display: none;}
    .accueil img, .pergolas img, .storeext img, .storeint img, .voiles img, .moustiquaires img, .parasols img, .domotiques img, .storelamelle img, .volets img {margin: 5px auto 0 auto;}
}

/* STICKY MENU */
.floatable {
position: fixed;
top: 0;
width:100%;
z-index: 99999;
}
.lignemenu {opacity: 0;-webkit-transition: .4s ease-in-out;transition: .4s ease-in-out;height: 0;overflow: hidden;}
.floatable .lignemenu {opacity: 1; display: flex;height: auto;overflow: visible!important;}


/* module menu on mobile */
.et_pb_menu__logo {padding-left: 10px;}
.et_pb_menu__wrap {padding-right: 20px;}

@media(max-width: 980px) {
.et_pb_menu__wrap {padding-right: 0;}
.et_pb_menu__wrap .mobile_menu_bar {z-index: 9999;}

#mobile_menu1 { display: block !important; min-height: 100vh; top: 0; border-top: none; padding-top: 80px; z-index: 9998; border-left: 1px solid #dfdb00;background-color: #334045!important;}

.mobile_nav.closed #mobile_menu1 {
 transform: rotateY(90deg); -webkit-transform: rotateY(90deg);
 transform-origin: right; -webkit-transform-origin: right;
 background: #334045; transition: .6s ease-in-out !important; }

.mobile_nav.opened #mobile_menu1 {
 transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
 transform-origin: right; -webkit-transform-origin: right;
 background: #334045; transition: .6s ease-in-out; }

.mobile_nav.opened .mobile_menu_bar:before {
 content: "\4d"; color: #dfdb00;}
.mobile_menu_bar:before{color: #dfdb00;}

.et_mobile_menu li a { color: #fff;}
}

@media(max-width: 980px) {
.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar { z-index: 99999; }
#main-header .container.clearfix.et_menu_container { width: 100%;}
.logo_container { padding-left: 30px; }
#et-top-navigation { padding-right: 30px; }
}

@media(min-width: 341px) {
#mobile_menu1 { width: 340px; margin-left: calc(100% - 340px); }
} 

@media(max-width: 340px) {
#mobile_menu1 { width: 100%; margin-left: 0; }
}

/* sticky on mobile */
@media all and (max-width: 768px) {
#menusecondaire {position: sticky!important;top:0!important;}
}

.et_pb_contact_field_6 {margin-bottom:20px!important;}
.et_pb_contact_field_8, .et_pb_contact_field_9, .et_pb_contact_field_10 {width:33.33%!important;float:left;clear:none!important;}
.et_contact_bottom_container {width:100%; text-align:left;float:left;margin-top:20px;padding-left:3%;}




/* LANDING PAGE */
#hero {color: white;}
.landing h1 {color: white!important;text-shadow: #334045 1px 0 15px;}
.landing, .landing strong {font-size: 1.2em; text-wrap: balance;}
.landing p, .landing h2, .landing h3 {text-align: center;}
.landing h2  {font-size: 2.5em;}
.landing h3  {font-weight: 700;text-decoration: underline;text-decoration-color: #dfdb00;text-underline-offset: 4px;}