/*

	CSS STRUCTURE
	-----------------
	01. Import Font Family & Root
	02. CSS Reset
	03. General Settings
	04. Header Settings
	05. About Settings
	06. Portfolio Settings
	07. Gallery Settings
	08. Process Settings
	09. Contact Settings
	10. Footer Settings
	11. Responsive Settings
	
	-------------------	
	ORIGINAL TEMPLATE IS SHELBY BY MATTIAS 
	CUSTOMIZED AND EXPANDED BY LAURANCE BOHANNON
	-------------------
	
*/

/* 01 IMPORT FONT FAMILY & Root
--------------------------------------------------------------- */
@import url(http://fonts.googleapis.com/css?family=Montserrat);
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400..700&display=swap');

:root {
  --main-color: #0047AB;
  --accent-color: #0047AB;
  --copy-color: #888888;
  --back-color: #fff;
}

/* 02 CSS RESET
--------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, 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, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* 03 GENERAL SETTINGS
--------------------------------------------------------------- */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.clear{
	clear: both;
}

body {
	background: var(--back-color);
	font: 300 14px 'Open Sans', sans-serif;
	line-height: 18px;
	text-align: center;
	color: var(--copy-color);
}

.body_hidden { overflow: hidden; }

p {
	line-height: 2;
	padding-bottom: 18px;
}

a {
	color: var(--accent-color);
	text-decoration: none;
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	-ms-transition: all 300ms linear;
	transition: all 300ms linear
}

a:hover { color: var(--copy-color); }

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

h1, h2, h3, h4, h5, h6 {
	font-family: "Lora", serif;
	font-weight: 600;
	text-transform: none; /*uppercase*/
}
h3+h3{
	padding-top: 18px;
}

/* Section Titles */
.section_title {
	margin: 0 0 15px 0;
	color: var(--accent-color);
	font-size: 24px;
	line-height: 32px;
}

.section_subtitle {
	margin: 0 0 50px 0;
	font: 16px 'Open Sans', sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.section_title2 {
	margin: 40px 0 15px 0;
	color: var(--accent-color);
	font-size: 14px;
}

.section_left {
	text-align: left;
	text-wrap: pretty;
}
.section_left i { font-style: italic; }

/* Containers */
.container_small, .container_big {
	width: 100%;
	margin: 0 auto;
}

.container_small {max-width: 900px;}
.container_big {max-width: 1050px;}

.namecard {
	background-color: rgba(255,255,255,.75);
	width: fit-content;
	margin: 0 auto;
	padding: 2vw;
	outline: solid rgba(255,255,255,.75);
	outline-width: max(3px, 0.3vw);
	outline-offset: max(3px, 0.3vw);

}


/* Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}
 
.fade-in.cmon {
	-webkit-animation-delay: 0.3s;
	-moz-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

/* 04 HEADER SETTINGS
--------------------------------------------------------------- */

#welcome {
	background: url('../images/studio.jpg') no-repeat center;
	background-size: cover;
	width: 100%;
	height: 600px;
	position: relative;
}

.fade {
	background: rgba(25,25,25, 0.6) ;
	width: 100%;
	height: 100%;
}

/* Header Titles */
.header_title {
	color: var(--accent-color);
	font-size:  clamp(24px, 4vw, 48px);
	line-height: normal;
	letter-spacing: .1em;
	margin: 0 0 1vw 0;
}

.header_subtitle {
	font-family: "Open Sans", sans-serif;
	font-size:  clamp(14px, 2vw, 24px);
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.scroll_down {
	width: 100%;
	position: absolute;
	bottom: 25px;
	text-align: center;
	color: var(--back-color);
}

/* Vertical centering */
.parent {display: table;}

.child {
    display: table-cell;
    vertical-align: middle;
}

/* Menu */
.burger {
	position: fixed;
	top: 50px;
	left: 50px;
	height: 40px;
	width: 40px;
	cursor: pointer;
	z-index: 100;
	-webkit-transition: opacity .25s ease;
	-moz-transition: opacity .25s ease;
	-o-transition: opacity .25s ease;
	-ms-transition: opacity .25s ease;
	transition: opacity .25s ease;	
}

.burger.active .top {
	-webkit-transform: translateY(10px) translateX(0) rotate(45deg);
	-ms-transform: translateY(10px) translateX(0) rotate(45deg);
	transform: translateY(10px) translateX(0) rotate(45deg);
}
.burger.active .middle {
  opacity: 0;
}
.burger.active .bottom {
	-webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
	-ms-transform: translateY(-10px) translateX(0) rotate(-45deg);
	transform: translateY(-10px) translateX(0) rotate(-45deg);
}
.burger span {
	background: var(--accent-color);
	border: none;
	height: 2px;
	width: 100%;
	position: absolute;
	top: 10px;
	left: 0;
	-webkit-transition: all .35s ease;
	-moz-transition: all .35s ease;
	-o-transition: all .35s ease;
	-ms-transition: all .35s ease;
	transition: all .35s ease;	
	cursor: pointer;
}

.burger span:nth-of-type(2) { top: 20px; }
.burger span:nth-of-type(3) { top: 30px; }

.backburger {
	position: fixed;
	color: var(--accent-color);
	font-size: 20px;
	line-height: 32px;
	text-transform: uppercase;
	letter-spacing: 4px;
	top: 50px;
	left: 50px;
	height: 38px;
	width: 110px;
	padding: 3px;
	border: 2px solid var(--accent-color);
	outline: 2px solid rgba(255, 255, 255, 0.5);
	background-color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	z-index: 100;
}
.backburger b { font-weight: 400; }

.navigation {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	opacity: 1;
	visibility: hidden;
	-webkit-transition: opacity .35s, visibility .35s, width .35s;
	-moz-transition: opacity .35s, visibility .35s, width .35s;
	-o-transition: opacity .35s, visibility .35s, width .35s;
	-ms-transition: opacity .35s, visibility .35s, width .35s;
	transition: opacity .35s, visibility .35s, width .35s;		  
	z-index: 90;
}
.navigation:before {
	content: '';
	background: #111;
	left: -105%;
	top: 0;
	width: 100%;
	height: 100vh;
	position: absolute;
	-webkit-transition: left .35s ease;
	-moz-transition: left .35s ease;
	-o-transition: left .35s ease;
	-ms-transition: left .35s ease;
	transition: left .35s ease;	
}

.navigation.open, .navigation.close {
	opacity: 1;
	visibility: visible;
	height: 100%;
}
.navigation.open:before, .navigation.close:before { left: 0; }

.navigation.open li {
	-webkit-animation: fadeInRight .5s ease forwards;
	-moz-animation: fadeInRight .5s ease forwards;
	animation: fadeInRight .5s ease forwards;
	-webkit-animation-delay: .35s;
	-moz-animation-delay: .35s;
	animation-delay: .35s;
}
.navigation.open li:nth-of-type(2) {
	-webkit-animation-delay: .45s;
	-moz-animation-delay: .45s;
	animation-delay: .45s;
}
.navigation.open li:nth-of-type(3) {
	-webkit-animation-delay: .55s;
	-moz-animation-delay: .55s;
	animation-delay: .55s;
}

.navigation nav { position: relative; }

.navigation ul {
	list-style: none;
	display: inline-block;
	position: relative;
	margin: 20vh 0 0 0;
	padding: 0;
	height: 60vh;
}

.navigation ul li {
	display: block;
	position: relative;
	opacity: 0;
	height: 20vh;
	line-height: 20vh;
}

.navigation ul li  a {
	font-family: "Open Sans", sans-serif;
	text-transform: uppercase;
	font-size: 24px;
	letter-spacing: 5px;
}

.navigation ul li  a:hover { color: var(--back-color); }

.simple_line {
	background: #252525;
	position: absolute;
	bottom: 0;
	left: calc(50% - 25px);
	width: 50px;
	height: 1px;
}


@-webkit-keyframes fadeInRight {
  0% {
	opacity: 0;
	left: 20%;
  }
  100% {
	opacity: 1;
	left: 0;
  }
}

@-moz-keyframes fadeInRight {
  0% {
	opacity: 0;
	left: 20%;
  }
  100% {
	opacity: 1;
	left: 0;
  }
}

@-ms-keyframes fadeInRight {
  0% {
	opacity: 0;
	left: 20%;
  }
  100% {
	opacity: 1;
	left: 0;
  }
}

/* 05 ABOUT SETTINGS
--------------------------------------------------------------- */

#about {
	background: var(--back-color);
	padding: 100px 50px;
}

.button {
	margin: 50px 0 0;
	padding: 0 20px;
	height: 50px;
	line-height: 50px;
	border: 2px solid var(--accent-color);
	font-family: "Open Sans", sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	-ms-transition: all 300ms linear;
	transition: all 300ms linear
}

.button:hover {
	background: var(--accent-color);
	color: var(--back-color);
}

/* 06 PORTFOLIO SETTINGS
--------------------------------------------------------------- */

#portfolio {
	background: #f5f5f5;
	padding: 100px 50px 75px; 
}

.works {
	display: flex;
	display: -webkit-flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: space-between;
	-webkit-flex-flow: row wrap;
	-webkit-justify-content: space-between;
	-webkit-align-content: space-between;
}

.works article {
	position: relative;
	background: var(--back-color);
	flex: 0 0 31.5%;
	-webkit-flex: 0 0 31.5%;
	margin: 0 0 25px;
	overflow: hidden;
	border: 1px solid #e1e1e1;
}

.border {
	border:5px solid var(--back-color);
	overflow: hidden;
}

.works  a:hover {
	color: var(--accent-color);
}

.works img {
	display: block;
	-webkit-transition: all 1000ms linear;
	-moz-transition: all 1000ms linear;
	-o-transition: all 1000ms linear;
	-ms-transition: all 1000ms linear;
	transition: all 1000ms linear;
	overflow: hidden;
	box-shadow: #000 0 0 0;
}

.works img:hover {
	-webkit-transform:scale(1.3);
	-moz-transform:scale(1.3);
	-ms-transform:scale(1.3);
	-o-transform:scale(1.3);
	transform:scale(1.3);
	-webkit-transition: all 5000ms linear;
	-moz-transition: all 5000ms linear;
	-o-transition: all 5000ms linear;
	-ms-transition: all 5000ms linear;
	transition: all 5000ms linear;
}

.caption {
	background: rgba(255,255,255, 0.93);
	position: absolute;
	bottom: 15px;
	left: 0;
	width: 100%;
	height: 50px;
	line-height: 50px;
	letter-spacing: .5px;
	font-family: "Open Sans", sans-serif;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: .1em;
	color: var(--accent-color);
}

.tag {
	position: absolute;
	top: 20px;
	left: 20px;
	height: 30px;
	font-size: 32px;
	color: rgba(255,255,255, 0.75);
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-height: 80vh;
}

/* Back text */
.featherlight .featherlight-close-icon:after {
	content:" back";
	font-size: 12px;
	font-family: "Open Sans", sans-serif;
	text-transform: uppercase;
}

/* 07 GALLERY SETTINGS
--------------------------------------------------------------- */

#gallery {
	background: var(--back-color);
	padding: 100px 50px;
}

.bigworks {
	display: flex;
	display: -webkit-flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: space-between;
	-webkit-flex-flow: row wrap;
	-webkit-justify-content: space-between;
	-webkit-align-content: space-between;
}

.bigworks article {
	position: relative;
	background: var(--back-color);
	margin: 0 0 25px;
	overflow: hidden;
	border: 1px solid #e1e1e1;
}

.bigworks img {
	display: block;
	border: 1px solid #e1e1e1;
	-webkit-transition: all 1000ms linear;
	-moz-transition: all 1000ms linear;
	-o-transition: all 1000ms linear;
	-ms-transition: all 1000ms linear;
	transition: all 1000ms linear;
	overflow: hidden;
	box-shadow: #000 0 0 0;
}

	/* youtube */
	
.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	margin: 0 0 25px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* 08 PROCESS SETTINGS
--------------------------------------------------------------- */

#process {
	background: var(--back-color);
	padding: 100px 50px;
}


.processi {
	display: flex;
	display: -webkit-flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: space-between;
	-webkit-flex-flow: row wrap;
	-webkit-justify-content: space-between;
	-webkit-align-content: space-between;
}

.processi article {
	position:relative;
	flex: 0 0 49.5%;
	-webkit-flex: 0 0 49.5%;
	margin: 0 0 25px;
	overflow: hidden;
}

.processi img {
	background: #f5f5f5;
	float: right;
	border:1px solid #e1e1e1;
	padding: 5px 5px 5px 5px;
	
}

/* 09 CONTACT SETTINGS
--------------------------------------------------------------- */

#contact {
	background: #f5f5f5;
	padding: 100px 50px;
}

.info {
	display: flex;
	display: -webkit-flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: space-between;
	-webkit-flex-flow: row wrap;
	-webkit-justify-content: space-between;
	-webkit-align-content: space-between;
	margin: 0 0 50px 0;
}

.info div {
	flex: 0 0 31.5%;
	-webkit-flex: 0 0 31.5%;
	border-left: 1px solid #e1e1e1;
	border-right: 1px solid #e1e1e1;	
}

.info div:first-child,
.info div:last-child {
	border: 0;
}

.info .fa {
	font-size: 36px;
	margin: 0 0 10px 0;
}

.info h3 {
	color: var(--accent-color);
	margin: 0 0 15px 0;
}

/* Social icons */
.social {
	max-width: 100px;
	display: flex;
	display: -webkit-flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: space-between;
	-webkit-flex-flow: row wrap;
	-webkit-justify-content: space-between;
	-webkit-align-content: space-between;
	margin: 0 auto;
}

.social a {
	flex: 0 0 30px;
	-webkit-flex: 0 0 30px;
	border: 2px solid var(--accent-color);
	border-radius: 5px;
	padding: 10px 13px;
	margin: 0 auto;
	text-align: center;
	color: var(--accent-color);
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	-ms-transition: all 300ms linear;
	transition: all 300ms linear
}

.social a:hover {
	background: var(--accent-color);
	color: var(--back-color);
}

/* 10 FOOTER SETTINGS
--------------------------------------------------------------- */

footer {
	background: var(--back-color);
}

.container_footer {
	width: 100%;
	max-width: 1150px;
	margin: 0 auto;
	padding: 50px;
	overflow: hidden;
}

footer p {
	line-height: 1;
}

.left, .right {	width: 50%;}

.left {
	float: left;
	text-align: left;
}

.left span {
	font-family: "Open Sans", sans-serif;
	text-transform: uppercase;
}

.right {
	float: right;
	text-align: right;
	text-transform: uppercase;
}

.right a { color: var(--copy-color) }

.right a:hover { color: var(--accent-color) }

/* 11 RESPONSIVE SETTINGS
--------------------------------------------------------------- */

/* Width */
@media (max-width: 768px) {
	.burger {
		top: 25px;
		left: 25px;
		height: 35px;
		width: 35px;
	}
	.backburger {
	font-size: 16px;
	line-height: 24px;
	height: 34px;
	width: 80px;
	text-transform: uppercase;
	letter-spacing: 2px;
	top: 25px;
	left: 25px;
	}
	.backburger b { font-weight: 800; }
	.section_subtitle { margin: 0 0 30px 0; }
	#about, #contact, #process { padding: 80px 25px; }
	
	#portfolio { padding: 80px 25px 65px; }
	
	.works article {
		flex: 0 0 48%;
		-webkit-flex: 0 0 48%;
		margin: 0 0 15px;
	}
	.processi article {
		flex: 0 0 100%;
		-webkit-flex: 0 0 100%;
		margin: 0 0 15px;
	}
	.processi li {
    float: none;
	display: block;
}
.processi img {
	float: none;
	
}

	
	.featherlight .featherlight-close-icon { top: -20px !important; }
	.featherlight-iframe .featherlight-content { width: 65% !important; }
	
	.container_footer { padding: 60px 25px; }
}

@media (max-width: 480px) {
	.works article {
		flex: 0 0 100%;
		-webkit-flex: 0 0 100%;
	}
	.processi article {
		flex: 0 0 100%;
		-webkit-flex: 0 0 100%;
		text-align: center;
	}
	.info div {
		flex: 0 0 100%;
		-webkit-flex: 0 0 100%;
		padding: 20px 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 1px solid #e1e1e1;
		border-top: 1px solid #e1e1e1;
	}
	
	.info div:first-child { padding-top: 0;}

	.info div:last-child { padding-bottom: 0;}

	.info { margin: 0 0 35px 0; }
		
	.social { max-width: 100px; }
}

@media (max-width: 360px) {
	.container_footer { padding: 30px 25px; }
	.left, .right {
		width: 100%;
		text-align: center;
	}
	.left { padding: 0 0 15px 0;}
}