/*
Theme Name: TUNNEL TUNNEL
Theme URI: 
Author: Eilean Friis-Lund & Alice Vodoz
Author URI: xx
Description: 
Version: 3
*/


/* INTRO COLOR TEXTE */
/*.titre, .sous-titre{color:#e7514c;}*/

html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,ins,img,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,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video, input.button, div.mc-field-group input
{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}

ol,ul{list-style:none; margin:0px; padding:0px;}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important}

/* START CUSTOM CSS TUNNEL TUNNEL */
@font-face { 
	font-family: "Alpha-Medium";
    src:url("font/Alpha-Medium.woff") format("woff");
	src:url("font/Alpha-Medium.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;}

html,body,h1,h2,h3,h4,h5,h6,p, pre, mc_embed_signup { 
font-family: "Alpha-Medium";
font-weight: normal; font-style: normal;
margin:0px;padding: 0px; text-rendering: geometricPrecision;}
html{-webkit-tap-highlight-color: rgba(0,0,0,0); }
#logo-landscape {display:none;}
.date-phone {display:none;}
#open-close, .icon-pics, .close-gallery, .close-article, .close-widget, .entry-header {cursor: pointer;}
hr {margin:0px 27px 0px 15px; height:1px; background-color:black; border:none;}
.vertical {border-left: 6px solid green; height: 500px;}

/*INTRO VENETIAN*/
.texte-intro{display:flex; flex-direction:row; z-index:2;}
.titre, .sous-titre{color:#0000ff; mix-blend-mode:normal;  flex-grow: 1; align-items: stretch;  height:auto; padding: 10px 0px 27px 27px; font-size:30px;z-index:2; }
.placeholder{display:inline-block; box-sizing:border-box; height:100vh; width:100%; cursor: none; z-index:-1;}
.column, .blind, .blindImg{height:100%; top:0; position:absolute; box-sizing:border-box;}
.blindImg{width:auto; top:0%; height:100%;  background-size:100% 100%;}
.blind{overflow:hidden; height:100%;}

/* NEWSLETTER MAILCHIMP */
input.button {cursor: pointer; border: none; background-color:white;}
div.mc-field-group input{background-color:#f5f5f5; border:none; width:160px;}

/* MAIN SLIDESHOW */
#computer {display:none;}
#smartphone {display:none;}

/* GALLERY */
.slider-counter {position:fixed; bottom:0px; padding-bottom:60px; right:60px;}
.close-gallery {position:fixed; z-index:10; padding: 50px 30px 30px 30px; top:0px; right:30px; font-size:20px;}

/* ICON */
.close:before, .close:after {position:absolute; content: '';  height: 20px;  width: 2px;  background-color: #000;}
.close:before {transform: rotate(45deg);}
.close:after {transform: rotate(-45deg);}
.arrow-right {float: right;}

.gallery-container{
    display:none; 
    position:fixed; 
    z-index: 1000;
    background:white; 
    width:100vw; 
    height:100%; 
    top:0px; 
    left:0px; 
    overflow: hidden;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;}

.slider {width:70vw;height:70vh;position:absolute;margin:auto;top: 0; left: 0; bottom: 0; right: 0;}
.flickity-viewport, .flickity-slider {width:70vw!important;	height:70vh!important;}
.slider figure {position: relative; width:70vw;	height:70vh;}
.slider figure img {width: 100%; height: 100%; -o-object-fit:contain; object-fit:contain; font-family: 'object-fit: contain;';}

/*FLICKITY NEXT/PREV */
/* no circle */
.flickity-button {background: green;}
/* big previous & next buttons */
.flickity-prev-next-button {width: 50vw;  height: 100vh;}
/* icon color */
.flickity-button-icon {fill: white;}
/* hide disabled button */
.flickity-button:disabled { display: none;}

/*ACCORDION*/
.acc-hide {display:none !important;}
.acc-show {display:block !important;}

/* POST */
#container  {width:100%; display: -webkit-box; display: -ms-flexbox; display: flex;}
#content    {margin-bottom:100px; -webkit-box-flex: 100; -ms-flex-positive: 100; flex-grow: 100;}

.entry-header {position:relative;margin: 0px 27px 0px 15px; width:auto; height:83px;}
.entry-header img.entry-thumbnail {
    display:none;
    right:0;
    top:0;
    position:absolute; float:right; height:83px; padding:0px 0px 0px 27px;
}
.entry-header .close-article {
    display: none;
    position:absolute;
    right:11px;
    width:inherit;
    padding: 18px 0px 27px 0px;
    top: 0px;
    align-items: center;
    justify-content: center;
    font-weight: 900;  
}
.entry-header.eh-show .close-article {display:flex;}
.entry-header.eh-show img.entry-thumbnail {display:none!important;}
.date {padding: 20px 0px 20px 12px; display:inline-block; width: 120px;}
.title {padding: 20px 0px 20px 30px; display: inline-block; vertical-align: top;}
.entry-content {width:100%;display:flex;}
.entry-content-text {
    display:inline-block; 
    padding: 0px 27px 29px 182px; 
    margin:0px 0px 15px 0px; 
    border-right: 1px solid black;
    min-width:530px;}

.icon-pics {float:right; margin: 0px 27px 0px 27px;}
.thumbnail {width:100%; height:auto; margin-bottom: 11px;}

/*ENTRY × ou + */
#open-close {padding: 30px 30px 30px 30px; height:100%; width:auto; bottom:0px; text-align:center; z-index:1000;}

/*WIDGET*/
.nwa-title {display:none;}

/* SIDEBAR */
.close-widget {display:none;}

#content, #sidebar {height:auto;}
#sidebar {
    float:left; 
    border-right: 1px solid black;
    margin-top:22px;
    margin-bottom:22px;}
.widget-container{
    display:flex; 
    flex-direction: column;}
.widget-area {
    position:-webkit-sticky !important;  
    position: sticky !important;  
    top: 0; 
    height:100vh;}
.widget-title {
    width:81px; 
    cursor: pointer; 
    padding:0px 74px 20px 27px;}
.textwidget {
    height:100vh; 
    padding:0px 40px 27px 27px;}
.address{
    bottom:27px;
    position:absolute;}

/*SIDERBAR click on/off */
.textwidget {
    width:300px; 
    opacity: 1; 
    -o-transition: width 0.5s, opacity 2.5s ease-in; 
    transition: width 0.5s, opacity 2.5s ease-in; 
    -moz-transition:width 0.5s, opacity 2.5s ease-in; 
    -webkit-transition:width 0.5s}
.textwidget.on {
    width:75px; 
    -webkit-transition: width 0.5s;  
    -o-transition: width 0.5s;  
    transition: width 0.5s; 
    -moz-transition:width 0.5s; 
    opacity: 0; }

.textwidget.on p {display:none;}

/* TYPE */
::-moz-selection { color:white; background:black;}
::selection { color:white; background:black;}
h1, .widget-title, pre {font-size: 19px; line-height:21px; font-style:lighter;}
p, #mc_embed_signup, div.mc-field-group input, #credit-adress, input.button {
	font-size: 15px; line-height:19px; font-style:normal; font-weight: normal; max-width:530px;}
strong {font-weight:normal;} 

/* LINK */
a:link, a:visited, a:active  {text-decoration:none; color:black;}
a:hover, .widget-title:hover, .entry-header:hover {color:#dadad9; text-decoration:none;}

/* MEDIA QUERIES */
@media only screen and (max-width: 1440px){
.textwidget {width:75px; opacity: 0;} 
.textwidget.on {width:300px; opacity: 1;}
.textwidget.on p {display:block;}
}

/* 1280 */ 
@media only screen and (max-width: 1280px){ 
.entry-content-text {padding: 0px 27px 29px 27px; min-width:50%;}
.entry-thumbnail {display:none!important;}
.titre, .sous-titre{font-size:19px;}
    

    
/* 1280 – ARTICLE HEADER */
.entry-header {height:auto;min-height: 106px;}
.entry-header img.entry-thumbnail {height:106px;}
.entry-header .close-article {display: none!important;}
.date, #icon-thumbnail {display:none;}
.date-phone {display:block; padding: 0px 0px 20px 10px;}
.title {padding: 20px 0px 0px 10px;}
}

/* 1024 */ 
@media only screen and (max-width: 1024px)  { 
#sidebar {border-right:0px; border-bottom: 1px solid black; margin-left: 15px; margin-right: 27px;}
.widget-area {height:auto;}    
.widget-title {width:90px; padding:14px 30px 14px 10px;}
.textwidget {display:none;}
.textwidget.on {display:block; padding:42px 27px 30px 10px;  width:auto;  height:auto;}
.address{position:relative;}
    
/* STRUCTURE  */
#content {margin-bottom:100px; -webkit-box-flex: 100; -ms-flex-positive: 100; flex-grow: 100;}
#content, .entry-title, .textwidget {position:relative; width:100%;}  
#container {flex-direction: column;}
     
/*  ARTICLE BODY */
.entry-content{display:flex; flex-direction:column;}
.icon-pics {order: 1;margin:0px 27px 0px 27px;}
.entry-content-text{min-width:200px; order: 2; padding: 0px 27px 0px 27px; margin:0px 0px 52px 0px; border-right: none;} 

/* GALLERIE */  
.close:before, .close:after {height: 20px;}
.close-gallery {padding: 3% 3% 3% 3%; right:3%;}
.slider-counter {padding-bottom:10%;}

/* TYPOGRAPHY */     
h1, .widget-title {font-size: 20px; line-height:22px;}
p, pre {font-size: 15px; line-height:19px;}
p, #mc_embed_signup, div.mc-field-group input, #credit-adress, input.button, icon-pics {font-size: 15px; line-height:19px; font-style:normal; font-weight: normal; max-width:100%;}
}

/* 1024 PORTRAIT */
@media only screen and (max-width: 1024px) and (orientation:portrait) {
#computer, .entry-thumbnail {display:none!important;} 
.widget-area {height:auto;} 
.textwidget {height:auto; } 
.address{position:relative; bottom:0px;}
.entry-content-text{min-width:200px;}  
.close-article-bottom{background-color: aqua; width:100px; height:40px;}
}

@media only screen and (max-width: 768px) and (orientation:landscape) {
#container, #computer, #smartphone, #content, #sidebar, #content, .textwidget, .widget-title, .gallery-container, .icon-thumbnail {display:none;}
#logo-landscape {display: flex; width:100vw; height:100vh; justify-content: center;  align-items: center; overflow: hidden; }
}


@media only screen and (max-width: 768px)  { 
	.placeholder{display:none;}
    .titre, .sous-titre {display:none;}
    .blindImg{top:0%; height:100%;}
	phone{width:100vw;height:100vh;background-image:url("phone.jpg")}    
h1, .widget-title {font-size: 20px; line-height:22px;}
p, pre {font-size: 14px; line-height:18px;}
hr {margin:0px 8px 0px 8px; height:1px; background-color:black; border:none;}
#sidebar {margin-left: 8px; margin-right: 8px;margin-bottom:0px;}
.textwidget.on {padding:0px 13px 20px 5px;}
.widget-title{padding:14px 0px 14px 5px;}    
.entry-header, .icon-pics {margin: 0px 13px 0px 13px;}
.date-phone{padding:0px 0px 11px 0px;}  
.title {padding: 15px 0px 0px 0px;}
.address{  bottom:0px;}  
.entry-content-text{padding: 0px 13px 0px 13px; }
.thumbnail {margin-bottom: 4px;}    
.close-article {width:100%;}  
.entry-header{min-height:auto;}    
.close:before, .close:after {height: 15px;  width: 1.25px;}
    
.slider-counter {position:fixed; right:13px; bottom:0px; padding-bottom:13px;}
.close-gallery {padding: 8px 8px 30px 30px; right:8px;}
.slider {width:94vw;height:94vh; margin:auto;top: 0; left: 0px; bottom: 0; right: 0px;}
.flickity-viewport, .flickity-slider {width:94vw!important; height:94vh!important;}
.slider figure {width:94vw; height:94vh;}
.slider figure img {width:100%; height:100%;}
}