/*

	-------------------	
	Dawn by D3vision
	-------------------

	CSS STRUCTURE
	-----------------
	01. Font Family
	02. CSS Reset
	03. General Settings
	04. Header Settings
	05. About Settings
	06. Portfolio Settings
	07. Contact Settings
	08. Footer Settings
	09. Responsive Settings
        10. Skill Bar Settings
        11. Iframe Settings
	-------------------	
	
*/

/* 01 Font Family
--------------------------------------------------------------- */
@import url(http://fonts.googleapis.com/css?family=Montserrat);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,300);

/* 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: #fff;
	font: 300 14px 'Open Sans', sans-serif;
	text-align: center;
	color: #444;
}

.body_hidden { overflow: hidden; }

p {
	line-height: 2;
}

a {
	color: #a67d4a;
	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: #999; }

.contentimg {
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
}

/* Section Titles */
.section_title {
	margin: 0 0 15px 0;
	color: #a67d4a;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 6px;
}

.section_subtitle {
	margin: 0 0 50px 0;
	font: italic 18px 'Open Sans', sans-serif;
	text-transform: none;
}

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

.container_small {max-width: 900px;}
.container_small_page {
    max-width: 100%;
    margin-top: 470px; 

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

/* 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;
}

/*--------------------------------------------------------------- */

/* Image Transitions */
ul#images1 {
	margin: 0 15px 10px 0;
	padding: 0;
	list-style: none;
	position: relative;
}

ul#images1 li {
	display: block;
	overflow: hidden;
	padding: 0;
	float: left;
	width: 155px;
	height: 300px;
	z-index: 3;
}
/*@media screen and (max-width: 600px){
	ul#images1 li {
		width: 77px;
		height: 150px;
	}
}*/

/* 04 Header Settings
--------------------------------------------------------------- */

#welcome {
	background: url('../images/banner.jpeg') no-repeat center;
	background-size: cover;
	width: 100%;
	height: 100vh;
	position: relative;
        margin-top:-46px;
}

#info {
	background: url('../images/banner2.jpeg') no-repeat center;
	background-size: cover;
	width: 100%;
	height: 100vh;
	position: relative;
	margin-top:-46px;
}

#news {
	background: url('../images/image1.jpeg') no-repeat center;
	background-size: cover;
	width: 100%;
	height: 100vh;
	position: relative;
	margin-top:-46px;
}

#gallery {
	background: url('../images/blackbar.jpeg') no-repeat center;
	background-size: cover;
	width: 100%;
	height: 46px;
	position: relative;
	margin-top:-46px;
}

.fade {
	background: rgba(17,17,17, 0.4);
	width: 100%;
	height: 100%;
}

/* Header Titles */
.header_title {
	color: #fff;
	font-size: 30px;
	letter-spacing: 6px;
	margin: 0 0 20px 0;
}

.header_subtitle {
	color: #a67d4a;
	font-size: 14px;
	letter-spacing: 6px;
}

.header_whitetitle {
	color: #fff;
	font-size: 14px;
	letter-spacing: 6px;
}

.header_whitesubtitle {
	color: #fff;
	font-size: 10px;
	letter-spacing: 4px;
}

.header_alttitle {
	color: #E1A964;
	font-size: 14px;
	letter-spacing: 6px;
}

.scroll_down {
	width: 100%;
	position: absolute;
	bottom: 25px;
	text-align: center;
	color: #fff;
}

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

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

/* Menu */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgba(255,255,255,0.0);
    text-align:center;
    position: relative !important;
    z-index: 9999 !important;
    display:flex;
    justify-content: center;
}

ul.topnav li {
    display: list-item;
    width: 100%;
}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
}

ul.topnav li a:hover:not(.active) {background-color: rgba(255,255,255,0.2);}

ul.topnav li a.active {background-color: #a67d4a;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}

/* 05 About Settings
--------------------------------------------------------------- */

#about {
	background: #fff;
	padding: 100px 50px;
}

.button {
	margin: 50px 0 0;
	padding: 0 20px;
	height: 50px;
	line-height: 50px;
	border: 2px solid #a67d4a;
	font-family: 'Montserrat', 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: #a67d4a;
	color: #fff;
}

/* 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: #fff;
	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 #fff;
	overflow: hidden;
}

.works  a:hover {
	color: #a67d4a;
}

.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.85);
	position: absolute;
	bottom: 15px;
	left: 0;
	width: 100%;
	height: 50px;
	line-height: 50px;
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	color: #a67d4a;
}

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

/* 07 Contact Settings
--------------------------------------------------------------- */

#contact {
	background: #fff;
	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: #a67d4a;
	margin: 0 0 15px 0;
}

/* Social icons */
.social {
	max-width: 250px;
	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 #a67d4a;
	height: 30px;
	line-height: 26px;
	font-size: 16px;
	color: #a67d4a;
	-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: #a67d4a;
	color: #fff;
}

/* 08 Footer Settings
--------------------------------------------------------------- */

footer {
	background: #f5f5f5;
}

.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: 'Montserrat', sans-serif;
	text-transform: uppercase;
}

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

.right a { color: #999 }

.right a:hover { color: #a67d4a }

/* 09 Responsive Settings
--------------------------------------------------------------- */

/* Width */
@media (max-width: 768px) {
	.burger {
		top: 25px;
		left: 25px;
		height: 35px;
		width: 35px;
	}

	.section_subtitle { margin: 0 0 30px 0; }
	#about, #contact { padding: 80px 25px; }
	
	#portfolio { padding: 80px 25px 65px; }
	
	.works article {
		flex: 0 0 48%;
		-webkit-flex: 0 0 48%;
		margin: 0 0 15px;
	}
	
	.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%;
	}
	
	.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: 200px; }
}

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

* {box-sizing:border-box}

.container {
    width: 100%;
    background-color: #ddd;
}

.skills {
    text-align: right;
    padding-right: 20px;
    line-height: 40px;
    color: white;
}

.one {width: 95%; background-color: #a67d4a;}
.two {width: 80%; background-color: #a67d4a;}
.three {width: 65%; background-color: #a67d4a;}
.four {width: 55%; background-color: #a67d4a;}

/* 11 Iframe Settings
--------------------------------------------------------------- */

.iframe-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
 
/* 16x9 Aspect Ratio */
.iframe-container-16x9 {
  padding-bottom: 56.25%;
}
 
/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-bottom: 75%;
}
 
.iframe-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}