/*
This WireHouse.com Single Project page Stylesheet
Initial Release Date : 01/12/2018
Current Revision Date :
Update notes:

Author: Tsvetan Hristov - http://wirehouse.co.uk


--- How to read this code: ---

The code is written in sections each of which
addresses specific part of the webpage as follows:

* Code for each section is written
in ascending screen size order:
--- Mobile
--- Tablet (landscape) & laptops 
--- Standard 1920x1080 Desktops
--- 2K+ and wide format screens

- CONTENT -
0 - Main colour codes in HEX and RGB
1 - Page specific text styles  
2 - Page Layout
3 - Project Summary and Info
4 - Project Content

*/

/*MY CODE*/ 
/* ===================== COLOUR CODES ===================== */
/*
ORANGE = #B3811A  rgba(179,129,26,1)
BRIGHTEST BLUE = #F5F9FC  rgba(245,249,252,1)
DARKEST BLUE = #111E2B   rgba(17,30,43,1) rgba(29,68,112,1) 
*/

/* ===================== TEXT STYLES ===================== */
/* === Mobile === */
#gallery .title , #gallery .sub-title , #gallery .body-text ,#gallery p{
    color: #111E2B;
}

.title{
	display: block;
	max-width: 80vw;
}

.sub-title, h2{
	border-bottom: 1px solid #B3811A;
}

.button-read-more {
    background-color: #B3811A;
}

.pc{
    display: none;
}

#article .sub-title {
    line-height: 1.25em;
    text-align: center;
    margin: 2vh 10%;
    border: none;
}

/* Body text */
#article .body-text, #article p {
	text-align:justify;
	margin: 25px 0 5px;
}

span {
   display: inline-block; 
}

/* Date and author */
#article .today{
    max-width: 75vw;
    margin: 0 auto;
    text-align: center;
}

/* Links */
#gallery a{
    text-decoration: none;
    color: #111E2B;
}

.project-details a:hover{
    text-decoration: underline;
}

/* === Tablet (Portrait) === */
@media only screen and (min-width: 500px) {

}

/* === Laptop and Tablet (landscape) ===*/
@media only screen and (min-width: 1200px) {
/*
    .title{
        font-size: 300%;
    }
*/
    #intro-info .title{
        text-align: right;
    }
    
    .sub-title{
        margin: 0 0.5vw; 
    }
    
    #article .body-text{
        padding: 0 1vw 2.5vh;
    }
	
    #gallery a:hover{
        text-decoration: underline;
    }
    
    .mobile{
        display: none;
    }
    
    .pc{
        display: block;
    }
    
    .button-read-more {
        background-color: rgba(29,68,112,1);
    }
    
}

/* === Desktop === */
@media only screen and (min-width: 1600px){ 
    #gallery .title{
        display: block;
        max-width: none;
		padding: 2.5vh 0 5vh;
    }
    
    .sub-title{
        margin: 1vh .5vw 0; 
    }
    
    .body-text{
        line-height: 140%;
    }  
    
    #article .body-text, #article p {
		text-align:justify;
		margin: 1vw auto;
		padding: 0;
		max-width: 60vw;
    }  
	
	#article .today{
		max-width: 25vw;
	}
}

/* === 2K+ Wide Desktop === */
@media only screen and (min-width: 2400px){
    #article .today{
        font-size: 150%;
        margin: 2.5vh auto;
    }
}

/* === 4K+ Wide Desktop === */
@media only screen and (min-width: 3600px){
    #article .title{
       padding: 5vh 0 2.5vh;
    }
    
    #article .today{
        font-size: 200%;
    }
}

/* =========================  MAIN CONTENT =========================*/

/* ====================== MAIN CONTENT LAYOUT (GRID ) ======================*/
/* === Mobile === */ 
#gallery{
    display: flex;
	position: relative;
    flex-wrap: wrap;
	margin: 10% 5%;
}

/* === Laptop and Tablet (landscape) ===*/
@media only screen and (min-width: 1200px) {
    #main-content{
        display:grid;
        grid-template-areas: 
            "sidebar-button projects";        
    }
    
    #sidebar-button{
        width: 40px;
        position: fixed;
        left: 0;
    }
    
    .sidebar{
        position: fixed;
        height: 100vh;
    }
    
    #gallery{	
        position: absolute;
		justify-content: space-around;
        right: 0;
        width: calc(100% - (329px + 40px + 4vw)); /* calc(100% - (sidebar + button + margin)*/
		margin: 7.5vh 2vw 0;
    }
    
    #gallery.open{
        width: calc(100% - (40px + 4vw)); /* calc(100% - (button + margin)*/
    }
} 

 /* === Desktop  ===*/ 
@media only screen and (min-width: 1600px){
    #gallery{ 
        width: calc(100% - (400px + 4vw)); /* calc(100% - ((button & sidebar) + margin))*/
    }
    
    #gallery.open{
        width: calc(100% - (40px + 4vw)); /* calc(100% - (sidebutton + margin)*/
    }
}

/* === 2K+ Wide Desktop  ===*/ 
@media only screen and (min-width: 2400px){ 
    #sidebar-button{
        width: 2vw;
    }
    
    #gallery{
        width: calc(78% - 4vw); /* calc(100% - ( 20vw sidebar + 2vw sidebutton + margin)*/
    }
    
    #gallery.open{
        width: calc(100% - (2vw + 4vw)); /* calc(100% - (sidebutton + margin)*/
    }
}

/* ==================== 1. SECTION ONE ====================*/
/* ==================== 1.1 PROJECTS DETAILS ====================*/
/* === Mobile preview === */ 

/* === Laptop and Tablet (landscape) ===*/
@media only screen and (min-width: 1200px) {
}

/* === Desktop === */
@media only screen and (min-width: 1600px){
    #projects-info{
        display: block;
        position: fixed;
    }
}


/* ==================== 1.2 PROJECTS CONTENT ====================*/
#article{
	width: 100%;
	background-color: #F5F9FC;
}

/* 	Restrict max image size */
#gallery img{
	position: relative;
	padding: 5px 0;
	max-width: 100%;
	max-height: 100%;
}

#article .wp-caption { /* Image + caption div */
	position:relative;
	margin-bottom: 0;
	margin: 0 auto 20px;
	max-width: 100%;
}

/* 	Edit how captions are displayed */
#article .wp-caption .wp-caption-text {
	display:flex;
	max-width: inherit;
	width: 100%;
}


/* 	Edit how captions are displayed */
#article .wp-caption .wp-caption-text {
	width: 90%;
	align-items: center;
	justify-content: center;
	background-color: #F5F9FC;
	
	padding: 0;
	margin: 0 auto;
}


/* 	Grouped images */
.image-group{
	display: flex;
    max-width: 100%;
    flex-wrap: wrap;
}
    
/* Comparison Slider */
.comparison-slider { 
	display:none;
}

/* === Tablet (Portrait) === */ 
@media only screen and (min-width: 500px) {	
}

/* === Laptop and Tablet (landscape) ===*/
@media only screen and (min-width: 1200px) {
	#article{
		background-color: transparent;
		width:90%;
	}
	
	#article-content{
		padding: 0 1vw;
		border: 1px solid #B3811A;
	}
	
	/* 	Grouped images */
	.image-group{
		flex-wrap: nowrap;
		align-items: stretch;
	}
	
	.image-group div:nth-child(n+1), .image-group img:nth-child(n+1) { /* All images between first and last */
		padding: 0 1vw 0 1vw;    
	}
	
	.image-group div:first-child, .image-group img:first-child { /* First Image */
		padding: 0 1vw 0 0; 
	}
	
	.image-group div:last-child, .image-group img:last-child { /* Last Image */
		padding: 0 0 0 1vw;  
	}
	
	/* Comparison Slider */
	.comparison-slider { 
		display:block;
		position:relative;
		width: 100%; /* Should not exceed image max width res */
		height: 375px; /* Should be more than the max image height res */
		max-width: 100vw;
		max-height: 70vh;
		overflow: hidden; 
		margin:0;
		padding:0;
	}

	.after { 
		background-image: url("http://www.wirehouse.co.uk/wp-content/uploads/2018/12/beer-garden-after.jpg");
		background-size: auto 100%;
		background-repeat: no-repeat;
		position: relative;
		font-size: 0;
		width: 100%; 
		height: 100%;
		margin: 0;   
	}

	.before { 
		background-image: url("http://www.wirehouse.co.uk/wp-content/uploads/2018/12/beer-garden-before.jpg");
		background-size: auto 100%;
		background-repeat: no-repeat;
		position: absolute;
		overflow: hidden;
		bottom: 0;
		height: 100%;
		width:50%;
		box-sizing: border-box;
		/*   border-right: 1px solid rgb(128,128,128,0.2); */
		box-shadow: inset 0px 0px 50px 0px rgba(0,0,0,0.1);
		-webkit-box-shadow: inset 0px 0px 50px 0px rgba(0,0,0,0.1);
		-moz-box-shadow: inset 0px 0px 50px 0px rgba(0,0,0,0.1);
	}

	.comparison-slider input[type=range]{
		position:absolute;
		height:1vh;
		bottom: 0;
		left: -2.5%; /* -(A+2px) */
		width: calc(105%); /* (100% + 2xA) */
		-webkit-appearance:none;
		-moz-appearance:none;
		background-color: rgba(245,249,252,0.2);
		
		-webkit-transition: .25s ease-in-out; /* Chrome, Safari */
        -moz-transition: .25s ease-in-out; /*  Firefox */
        -o-transition: .25s ease-in-out; /*  Opera */
        transition: .25s ease-in-out;
	} 
	
	.comparison-slider:hover input[type=range]{
		background-color: rgba(245,249,252,0.4);
	}
	
	.comparison-slider input[type=range]::-webkit-slider-thumb{
		-webkit-appearance:none;
		box-sizing: border-box;
		width: 5%; height: 2vh;   
		background: rgba(17,30,43,0.75);
		border: 1px solid #B3811A;
		border-radius: 2px;
		
		-webkit-transition: .25s ease-in-out; /* Chrome, Safari */
        -moz-transition: .25s ease-in-out; /*  Firefox */
        -o-transition: .25s ease-in-out; /*  Opera */
        transition: .25s ease-in-out;
	}
	
	.comparison-slider input[type=range]::-moz-range-thumb{
		-moz-appearance: none;
		box-sizing: border-box;
		width: 5%; height: 2vh;    
		background: rgba(17,30,43,0.75);
		border: 1px solid #B3811A;
		border-radius: 2px;
		
		-webkit-transition: .25s ease-in-out; /* Chrome, Safari */
        -moz-transition: .25s ease-in-out; /*  Firefox */
        -o-transition: .25s ease-in-out; /*  Opera */
        transition: .25s ease-in-out;
	}
	
	.comparison-slider:hover input[type=range]::-webkit-slider-thumb{ 
		background: #F5F9FC;
		border: 1px solid #B3811A;
   }
	.comparison-slider:hover input[type=range]::-moz-range-thumb{
		background: #F5F9FC;
		border: 1px solid #B3811A;
	}
	
	.comparison-slider .value-display:focus, .comparison-slider .value-display:active { 
	  outline: none; 
	}

	.comparison-slider .value-display{
		display: none;
		width: 5%;
		text-align: center;
		color: #B3811A;
		position: absolute;
		top: 0px; right:0;  
	}	
}

/* === Desktop === */
@media only screen and (min-width: 1600px){   	
    #article {
		width:85%;
		overflow: hidden;
		padding: 0 0 10vh;
		border: 0px solid #B3811A;
    }
	
	#article-content:hover {
		background-color: #F5F9FC;
    }
	
	/* 	Restrict max image size */
	#gallery img{
		position: relative;
		padding: 1vw 0;
		max-width: 100%;
		max-height: 100%;
	}
	
	#article .wp-caption { /* Image + caption div */
		margin: 0 auto;
	}
	
	
	/* 	Edit how captions are displayed */
	#article .wp-caption .wp-caption-text {
		display:flex;
		max-width: inherit;
		width: 100%;
		height: 0;
		align-items: center;
		justify-content: center;
		
		position:absolute;	
		bottom: 1vw; /* = #article #gallery img */
		padding: 0;
		margin: 0;
		
		background-color: rgba(245,249,252,0.9);
		overflow: hidden;
		
		-webkit-transition: .25s ease-in-out; /* Chrome, Safari */
        -moz-transition: .25s ease-in-out; /*  Firefox */
        -o-transition: .25s ease-in-out; /*  Opera */
        transition: .25s ease-in-out;
	}
	
	#article .wp-caption:hover .wp-caption-text {
		height: 5vh;
	}
	
	#article .alignleft {
		float: left;
		padding: 0 1vw 0 0;
	}
	
	#article .alignright {
		float: right;
		padding: 0 0 0 1vw;
	}	
}

/* ========================= CAPTIONING PORTFOLIO PAGES =========================*/

/* === Desktop === */
@media only screen and (min-width: 1600px){  
	.description-para{
	  flex:1 30%;
	}
	
	.to-fit-img{
	  flex:1 100%;
		height: 100%; 
		width: 100%; 
		object-fit: contain;
	}

/* 	.to-fit-img div{
	  height: 100%; 
	  width: 100%; 
	  object-fit: contain;
	} */
}


/* ========================= INTERACTIVE ANCHORED ANNOTATION =========================*/

#keys{
	display:none;
}

.featInfo{
	display:none;
	}

#article #selFeature{
	display:none;
}

/* === Desktop === */
@media only screen and (min-width: 1400px){ 
	.interactive-dia-achored-text{
		position:relative;
	}
	
	#keys{
		display:block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
	}
	
	#keys button{
		text-align:center;
		line-height:18px;
		color: #F5F9FC;
		background-color: rgba(17,30,43,0.7);
		text-shadow:1px 1px 0px #111E2B; 

		width: 1.25vw;
		height: 1.25vw;
		position: inherit;
		box-sizing:border-box;
		border: 1px solid #B3811A;
		border-radius: 0.4vw;

		transition: .25s ease-in-out;
		cursor:pointer;
	}

	#keys button:nth-child(1){ left:80%; top:35%; }
	#keys button:nth-child(2){ left:70%; top:48%; }
	#keys button:nth-child(3){ left:75%; top:52.5%; }
	#keys button:nth-child(4){ left:83%; top:51.5%; }
	#keys button:nth-child(5){ left:60%; top:57%; }
	#keys button:nth-child(6){ left:42%; top:55%; }
	#keys button:nth-child(7){ left:40%; top:65%; }
	#keys button:nth-child(8){ left:66%; top:63%; }
	#keys button:nth-child(9){ left:37%; top:88%; }

	#keys button:hover{
		background-color: #B3811A;
	}

	#keys button:active {
		background-color: #111E2B;
		border: 2px solid #B3811A;
	}

	#article #selFeature{
		display:block;
		width:30%;
		padding:1%;
		box-sizing:border-box;
		border: 1px solid #B3811A;
		border-radius: 8px;
		transition: .25s ease-in-out;

		text-align:center;

		position: absolute;
		bottom: 1vw;
		right: 1vw;
	}
}

/* === 2K+ Wide Desktop === */
@media only screen and (min-width: 2400px){
	#keys button{
		font-size: 100%;
	}
}

/* === 4K+ Wide Desktop === */
@media only screen and (min-width: 3600px){
	#keys button{
		font-size: 150%;
	}
}