/*
    Theme Name: Lotus Marketing
    Theme URI: http://www.lotusmarketing.ca
    Description: Template par Lotus Marketing
    Version: 1.0
    Author: Etienne Dupuis (Lotus Marketing)
    Author URI: http://www.lotusmarketing.ca
*/

/* Wordpress */
img.alignright {float:right; margin:0 0 2em 2em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; }
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}

body.logged-in{margin-top:20px;}

/* dans l'interface, pour réduire la hauteur des lignes de la programmation */
.acf-oembed .canvas { height: 100px; }

/* COULEURS 
    Pavillons: #4abdc0 (pale: #d5feff)
    Programmation: #eb2e4e (pale: #ffd8df)
    Information: #7595d2 (pale: #dde9ff)
    La Fete: #e8c500 (pale: #fff5bc)
    Couleur générale: #ac1d36
*/

/* ._all_wplink_XNzikkbU_cc { display: none; } */

.color-pavillon { color: #4abdc0; }
.color-programmation { color: #eb2e4e; }
.color-information { color: #7595d2; }
.color-fete { color: #e8c500; }

.bg-pavillon { background-color: #4abdc0 !IMPORTANT; }
.bg-programmation { background-color: #eb2e4e !IMPORTANT; }
.bg-information { background-color: #7595d2 !IMPORTANT; }
.bg-fete { background-color: #e8c500 !IMPORTANT; }

/* GLOBAL */
html, body {
    padding:0;
    margin:0;
    font-family: 'Open Sans', sans-serif; /* 300 Light, 400 Normal, 600 Semi-Bold, 700 Bold, 800 Extra bord */
    color:#333; 
    font-weight:400;
    font-size:100%;
}
::selection { background: #ac1d36; color:white;}
textarea:focus, input:focus{ outline: 0; }

img { border: 0; }
ul { list-style: none; }

h1 { font-size: 3em; color:#ac1d36; margin-bottom: 50px; text-transform:uppercase; font-weight: 800; text-align:center; margin-top: 1.15em; }
h2 { margin-top: 2em; }

a { text-decoration:none; color: #ac1d36; transition:0.3s; }
a:hover { color: #000000; transition:0.2s; }

.content a strong, .content strong a { display:inline-block; margin:0em 1em 1em 0; background:#ac1d36; border-radius:5px; padding:0.5em 2em; color:white; text-transform:uppercase; font-size:0.75em; border:none !IMPORTANT; }
.content a:hover strong, .content strong a:hover { background-color:#e8c500; color:white; }
/* .content a strong::before, .content strong a::before { content: '→  '; } */

li { padding: 7px; }

.center { text-align:center; }
.extrabold { font-weight: 800; }
.noborder { border:none !IMPORTANT; }
.hr { border: 2px solid #ac1d36; margin: 3em 30%; }
.extrarightmargin { margin-right: 10% !IMPORTANT; }

/* MENU */
.menu { padding: 0px 3%; height: 175px; font-size:1.15em; border-bottom: 1px solid #ddd; position:relative; }
.menu .logo { margin-left:0px; float:left;}

.menu .menuitems { text-align:right; padding-top: 105px; }
.menu .menuitems a { color: #777; margin-left: 60px; border-bottom:1px solid #FFF; text-transform: uppercase; position:relative;}
.menu .menuitems a.pavillon { margin-left: 0px; }
.menu .menuitems a:hover .circle, .menu .menuitems a.on .circle { opacity: 1; top: -25px; height: 15px; width: 15px;  -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

.menu a.pavillon:hover, .menu a.pavillon.on { color: #4abdc0; }
.pavillon .circle { background: #4abdc0; }
.menu a.programmation:hover, .menu a.programmation.on { color: #eb2e4e; }
.programmation .circle { background: #eb2e4e; }
.menu a.information:hover, .menu a.information.on { color: #7595d2; }
.information .circle { background: #7595d2; }
.menu a.lafete:hover, .menu a.lafete.on { color: #e8c500; }
.lafete .circle { background: #e8c500; }

.circle { height: 35px; width: 35px; border: 3px solid #5e4325; border-radius: 50%; background: #4abdc0; position:absolute; left: 40%; top:-75px; opacity:0; transition: all 0.5s ease-in-out; }

.menu .menuitems .billeterie, .menu .menuitems .carnet { color: #ac1d36; background: url('images/bg-billeterie-menu.png') 0 50% no-repeat; padding-left: 40px; border-bottom: 1px dashed #FFF; }
.menu .menuitems .carnet { background-image: url('images/bg-carnet-menu.png'); padding-left: 35px; }
.menu .menuitems .billeterie:hover, .menu .menuitems .carnet:hover { border-bottom: 1px dashed #ccc; }

.menu .smalltopmenu { background: #ac1d36; font-size: 0.65em; float:right; height: 2.5em; position:fixed; right: 3%; z-index: 99999; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; box-shadow: 0 0 3px #666;}
.menu .smalltopmenu a { color:white; padding: 0.5em 20px; display:inline-block; height: 1.5em; vertical-align: top; }
.menu .smalltopmenu a:hover { background-color: #8c0d16; }
.menu .smalltopmenu .facebook { background: url('images/facebook.png') 50% 50% no-repeat; border-bottom-left-radius: 3px; }
.menu .smalltopmenu .twitter { background: url('images/twitter.png') 50% 50% no-repeat; }
.menu .smalltopmenu .language { border-bottom-right-radius: 3px; }

/* LARGE MENU ON HOMPAGE */
.largemenu { text-align:center; }
.largemenu .circle { opacity: 1; top: -28px; width: 45px; height: 45px; left: 44%; }
.largemenu .title { font-weight: 800; font-size: 1.85em; text-transform: uppercase; }
.largemenu a { display:inline-block; vertical-align: top; width: 25%; height: 165px; padding: 70px 0 0 0; position:relative; color: #999; z-index: 999;}
.largemenu a.pavillon .title { color: #4abdc0;  }
.largemenu a.pavillon:hover { background: #d5feff; }
.largemenu a.programmation .title { color: #eb2e4e; }
.largemenu a.programmation:hover { background: #ffd8df; }
.largemenu a.information .title { color: #7595d2; }
.largemenu a.information:hover { background: #dde9ff; }
.largemenu a.lafete .title { color: #e8c500; }
.largemenu a.lafete:hover { background: #fff5bc; }


.largemenu a:hover { color:#777; }
.largemenu a:hover .circle { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); top: -32px; width: 55px; height: 55px; }

/* BANNER HOMEPAGE */
.banner { height: 454px; width: 100%; padding: 0px; background: #eee 50% 0px no-repeat fixed; position:relative; top:0; }
.customize-support .banner { background-position-y: 32px; } /* Bug fix pour le menu des gens logger */
.banner .text { background: #ac1d36; width: 400px; color:white; float:right; padding: 10px 25px; font-size: 1.5em; text-align:right; margin: 200px 3% 0px 0px  }

video { display:block; }
.videotext { background: rgba(172,27,53,0.85); width: 400px; color:white; padding: 10px 25px; font-size: 1.5em; text-align:right; right: 3%; top: 245px; position:absolute; }

/* CTA ACHETER VOS BILLETS - BARRE ROUGE */
.ctabuytickets { background: #ac1d36; padding: 30px; text-align:center; color:white; display:block; text-transform: uppercase; font-weight: 800; font-size: 1.75em; }
.ctabuytickets img { vertical-align: middle; margin-right: 50px; transition: 0.5s; }
.ctabuytickets:hover { color:white; background: #9c1d36; }
.ctabuytickets:hover img { -webkit-transform: rotate(10deg); transform: rotate(10deg); transition: 0.5s; }

/* BLOCKS */
.block1 { width: 40%; height:auto; display:block; float:left; }
.block2 { width: 60%; height:auto; display:block; }

/* PORTE PAROLE */
.photo-porteparole { width: 40%; display:inline-block; margin-bottom: -5px; }
.texte-porteparole { display:inline-block; width: 46%; padding: 50px 7% 0 7%;  vertical-align:top; text-align:justify; font-size: 1.35em; }
.texte-porteparole .title { text-transform: uppercase; font-size: 1.5em; text-align:center; }
.texte-porteparole .title .nom { color: #ac1d36; }
.texte-porteparole .title .titre { color: #aaa; }

/* SOUS MENU PAGE INTERNE */
.sousmenu { text-align:center; font-size: 1.45em; text-transform: uppercase; background-color: #ac1d36; }
.sousmenu a { display:inline-block; width: 25%; color:white; padding: 50px 0; }
.sousmenu.bg-fete a {width: calc(100% / 5); }
.sousmenu a:hover, .sousmenu  .current_page_item { background: #9c0d26; }
.sousmenu.bg-pavillon a:hover, .sousmenu.bg-pavillon  .current_page_item { background: #269ea1; }
.sousmenu.bg-pavillon a { width: calc(100% / 3);}
.sousmenu.bg-programmation a:hover, .sousmenu.bg-programmation  .current_page_item { background: #ca1e3b; }
.sousmenu.bg-information a:hover, .sousmenu.bg-information  .current_page_item { background: #5d87d8; }
.sousmenu.bg-fete a:hover, .sousmenu.bg-fete  .current_page_item { background: #c3a602; }

/* PAGE INTERNE */
.content { font-size: 1.35em; padding: 0 10% 3em 10%; }
.content a { border-bottom: 1px dashed transparent; }
.content img { max-width: 100%; height:auto; }
.content a:hover { border-bottom: 1px dashed #000; }
/* .content img { margin-right: 150px; } */
.content ul { list-style:circle; margin-left: 2em; }
.content ul li { padding: 2px 7px; }

/* VIDEOS */
.content.videos iframe { width: 363px; height: 200px; margin: 20px; }

/* LISTE DES ARTISANTS */
.liste { padding-bottom: 40px; background-image: -webkit-linear-gradient(left, transparent 50%, #D9E6E6 50%); background-image: -ms-linear-gradient(left, transparent 50%, #D9E6E6 50%); background-image: linear-gradient(left, transparent 50%, #D9E6E6 50%); }
.liste .title { background: #4abdc0; color:white; text-transform: uppercase; font-weight: 800; font-size: 1.5em; padding: 15px 0 15px 200px; margin-bottom: 30px; position:relative; }
.liste .title img { position:absolute; bottom: 10px; left: 6%;}

/*.liste.left, .liste.right { width: 50%; display:inline-block; vertical-align:top;  }*/
/*.liste1, .liste2 { width: 50%; display:inline-block; vertical-align:top; padding-bottom: 50px;  }
.liste2 .title img { position:absolute; bottom: 10px; right: 6%;}
.liste2 { background: #D9E6E6; }
.liste2 .title { text-align:right; padding-right: 150px; } */

.artisant { width: 40%; padding: 30px 5% 30px 5%; display:inline-block; vertical-align: top; text-align:center; font-size: 1.35em;}
.artisant-nom { font-weight: 800; }
.artisant .alimentsduquebec { margin-left: 10px; }
.artisant a { color: #333; }
.artisant a:hover { color: #4abdc0; }


/* PROGRAMMATION */
.datemenu { text-align:right; }
.datelink { height: 4em; width: 5em; padding-top:1em; border: 3px solid #5e4325 !IMPORTANT; border-radius: 50%; color:white; background: #eb2e4e; display:block; text-align:center; font-size: 0.75em; line-height: 1.25em; display:inline-block; margin-left: 20px; }
.datelink:hover { color:#eb2e4e; background: #ffd8df; -webkit-transform: rotate(360deg); transform: rotate(360deg); border:3px solid #eb2e4e !IMPORTANT; }
.datelink span { font-weight: 800; font-size: 1.5em; }

.activites { background-image: -webkit-linear-gradient(left, transparent 50%, #ffd8df 50%); background-image: -ms-linear-gradient(left, transparent 50%, #ffd8df 50%); background-image: linear-gradient(left, transparent 50%, #ffd8df 50%); }
.activites .title { background: #eb2e4e; color: white; text-transform: uppercase; font-weight: 800; font-size: 1.5em; text-align:center; padding: 1em; clear:both; }
.activites .block { font-size: 1.15em; width: 40%; padding: 40px 5%; position:relative; display:inline-block; vertical-align: top; }
.activites .block .image { float: left; border-radius: 50%; margin-right: 50px;  }
.activites .block .video { display:block; height: 35px; width: 35px; border: 2px solid #5e4325; border-radius: 50%; background: #eb2e4e url('images/play-video.png') 60% 50% no-repeat; position:absolute; top: 40px; }
.activites .block .siteweb { display:block; height: 35px; width: 35px; border: 2px solid #5e4325; border-radius: 50%; background: #eb2e4e url('images/link.png') 50% 50% no-repeat; position:absolute; top: 142px; }
.activites .block .video:hover, .activites .block .siteweb:hover { background-color: #ca1e3b;  border:2px solid #eee; -webkit-transform: rotate(360deg); transform: rotate(360deg); }
.activites .block .heures img { position: relative; top: 2px; }
.activites .block .titre { font-weight: 800; text-transform: uppercase; }
.activites .block .titre span { color: #eb2e4e;  }
.activites .block .texte { font-size: 0.75em; }

/* Activité dans la section pavillons */
.activites.hybrid { background-image: -webkit-linear-gradient(left, transparent 50%, #d5feff 50%); background-image: -ms-linear-gradient(left, transparent 50%, #d5feff 50%); background-image: linear-gradient(left, transparent 50%, #d5feff 50%); }
.activites.hybrid .title { background: #4abdc0; }
.activites.hybrid .block .titre span { color: #4abdc0; }


/* BLOG LIST */
.blogbox { width: 50%; width:calc(100% / 3); height: 20em; position:relative; display:inline-block; vertical-align: top; background: url() 50% 50% no-repeat; text-align:center; font-weight: 800; color:white; text-transform:uppercase;  -webkit-filter: grayscale(100%); filter: grayscale(100%); -ms-filter: grayscale(100%);  filter: gray; /* IE 6-9 */; }
.blogbox .overlay { background: rgba(0,0,0,0.5); position:absolute; top:0; right:0; left: 0; bottom: 0; z-index:-1; transition:0.2s;}
.blogbox .info { margin-top: 5em; display:block; }
.blogbox .title { display:block; font-size: 1.5em; margin-top: 2em; padding: 0 3em;  }
.blogbox:hover { color:white;  -webkit-filter: grayscale(0%); filter: grayscale(0%); -ms-filter: grayscale(0%);  filter: none; /* IE 6-9 */; }
.blogbox:hover .overlay { background: rgba(0,0,0,0.25); transition:0.2s; }

.previouspage {  background: #c3a602 url('images/blog-previous.png') 50% 50% no-repeat; }
.nextpage  {  background: #c3a602 url('images/blog-next.png') 50% 50% no-repeat; }


/* BLOGUE SINGLE*/
.blogdate { text-align:center; font-size: 1.25em; margin-top:-30px; color: #ccc; font-weight:800; margin-bottom: 75px;}

.blogshare { text-align:right; }
.blogshare .twitter, .blogshare .facebook { font-size: 0.85em; border: 0px !IMPORTANT; background: #d7f4ff; border-radius: 50%;  display:inline-block; width: 80px; height: 80px; padding: 50px 50px 50px 50px; margin: 20px; color: #94e1ff; text-align:center; transition: 0.3s; }
.blogshare .twitter span, .blogshare .facebook span { font-weight: 800; }
.blogshare .twitter:hover { background: #94e1ff; color:white; transition: 0.2s; -webkit-transform: rotate(360deg); transform: rotate(360deg); }
.blogshare .facebook { background: #d9e5ff; color:#7589b3;}
.blogshare .facebook:hover { background: #7589b3; color:white; transition: 0.2s; -webkit-transform: rotate(360deg); transform: rotate(360deg);}

/* INFORMATION - MAP */
#map { width: 100%; height: 800px; }
#map .gm-style-iw { text-align:center; }


/* PRE FOOTER - PUBLICITE */
.publicite img {
    width: 683px;
    height: auto;
    border: 4px solid #5f5658;
    
    filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    transition:0.4s;
}

.publicite:hover img {
    filter:none; /* Firefox 3.5+ */
    -webkit-filter: grayscale(0%); /* Chrome 19+ & Safari 6+ */
    transition:0.3s;
}

/* FOOTER */
.footer { background: #706466 url('images/bg-footer.png') 100% 100% no-repeat; color:#FFF; padding: 50px 3%; }
.footer a { color:white; }
.footer .footer-title { border-bottom: 6px solid #a29a9b; font-size: 1.45em; position:relative; }
.footer .footer-title span { padding: 20px 30px; background: #706466; position: absolute; top: -33px;  }
.footer .footer-title span.presentateur { left: 2%; }
.footer .footer-title span.partenaires { left: 47%; }

.footer .partners { padding: 40px 0; text-align:center; }
.footer .partners a.saq { float:left; margin-right: 10%; margin-left: 5%; }
.footer .partners a { opacity:0.55; margin: 10px 25px; display:inline-block; }
.footer .partners a:hover { opacity:1; }

.footer .footer-hr { border-bottom: 6px solid #a29a9b; margin-bottom: 30px;  }

.footer ul { padding: 5px 0px; margin:0; }
.footer ul li { padding: 0; }

.footer .twitter { display:inline-block; width: 15%; vertical-align:top; font-size: 0.75em; }
.footer .twitter .tweets { color: #333; padding: 10px 0; margin-bottom: 10px; background: url('images/tweets.png') 0% 50% no-repeat; min-height: 46px;}
.footer .twitter .tweets a { color:#CCC; border-bottom: 1px dashed transparent; }
.footer .twitter .tweets a:hover { color:#FFF; border-bottom: 1px dashed #FFF; }

.footer .pavillon .title, .footer .programmation .title, .footer .information .title, .footer .lafete .title { font-size: 1.35em; text-transform: uppercase; position:relative; }
.footer .pavillon, .footer .programmation, .footer .information, .footer .lafete { display:inline-block; width: 15.5%; margin-left: 5%; vertical-align:top; font-size: 0.85em; margin-bottom: 20px;}

.footer .circle { opacity: 1; height: 15px; width: 15px; top:3px; left: -30px; }
.footer .pavillon a:hover .circle, .footer .programmation a:hover .circle, .footer .information a:hover .circle, .footer .lafete a:hover .circle { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

.footer .pavillon { }
.footer .pavillon a:hover, .footer .pavillon .on, .footer .pavillon .current_page_item a { color:#4abdc0; border-bottom: 1px dashed #4abdc0; }

.footer .programmation { }
.footer .programmation a:hover, .footer .programmation .on, .footer .programmation .current_page_item a { color:#eb2e4e; border-bottom: 1px dashed #eb2e4e; }

.footer .information {}
.footer .information a:hover, .footer .information .on, .footer .information .current_page_item a { color:#7595d2; border-bottom: 1px dashed #7595d2; }

.footer .lafete { }
.footer .lafete a:hover, .footer .lafete .on, .footer .lafete .current_page_item a { color:#e8c500; border-bottom: 1px dashed #e8c500; }

.sub-footer { background: #5f5658; padding: 15px 3% 10px 3%; font-size: 0.75em;  }
.sub-footer a { color:#aaa; border-bottom: 1px dashed #5f5658; }
.sub-footer a:hover { border-bottom: 1px dashed white; color:white;  }
.sub-footer .lotusmarketing { float:right; }
.sub-footer .googleplus { float:left; margin-right: 15px; }

/* RESPONSIVE */

@media only screen and (max-width: 1500px) {
    .content { padding: 0 3% 3em 3%; }
    
    /* ACCUEIL */
    .texte-porteparole { font-size: 1.15em; }
}

@media only screen and (max-width: 1350px) {
    /* MENU */
    .billeterie { position:absolute !IMPORTANT; top: 60px; right: 3%; }
    .carnet { position:absolute !IMPORTANT; top: 60px; right: 200px; }
    .carnet.nobilleterie { right: 3%; }
}

@media only screen and (max-width: 1280px) {
    /* ACCUEIL */
    .texte-porteparole { font-size: 1em; }
    
    /* BLOGUE LISTE */
    .blogbox { width:calc(100% / 2);
}

@media only screen and (max-width: 1060px) {
    /* MENU */
    .logo img { width: 150px; margin-top: 63px; }
    
    /* ACCUEIL */
    .texte-porteparole { font-size: 1.25em; width: 86%; }
    .photo-porteparole { width: 100%; }
    
    .block1, .block2 { width: 100%; }
}

@media only screen and (max-width: 1000px) {
    /* ACCUEL SOUS-MENU */
    .largemenu a { display:block; width: 100%; padding: 20px 0; height: auto; border-bottom: 1px dashed #ccc;}
    .largemenu a .circle, .largemenu a p { display:none; }
    
    /* SOUS-MENU */
    .sousmenu a { display:block; width: 100% !IMPORTANT; padding: 20px 0; border-bottom: 1px dashed #FFF; }
    .sousmenu a div { display:inline; }
    
    /* PAVILLON */
    .liste { background: #D9E6E6; }
    .liste .artisant { width: 90%; border-bottom: 2px dashed #FFF; }
    .liste .artisant:last-child { border-bottom: 0px; }
    
    /* PROGRAMMATION */
    .activites { background: #ffd8df; }
    .activites.hybrid { background: #d5feff; }
    .activites .block { width: 90%; border-bottom: 2px dashed #FFF; }
    .activites .block:last-child { border-bottom: 0px; }
    
    /* BLOGUE LISTE */
    .blogbox { width:calc(100% / 1); }
    
    /* FOOTER */
    .footer .twitter { display:none; }
    .footer .pavillon, .footer .programmation, .footer .information, .footer .lafete { width: 44%; }
}

@media only screen and (max-width: 900px) {
    /* MENU */
   .logo img { margin-top: 0px; }
}

@media only screen and (max-width: 900px) {
    /* FOOTER */
   .publicite img { width: 100%; margin-top: 25px; }
}