/*

	-------------------
	SHELBY TEMPLATE 1.1
	-------------------

	CSS STRUCTURE
	-----------------
	01. Import 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

	-------------------
	TEMPLATE BY BRUK.HU
	-------------------

*/

/* 01 IMPORT FONT FAMILY
--------------------------------------------------------------- */

/* 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
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;
        font-family: Amaranth,Fjord,Hack;
}

p {
    font-family: Iosevka,Amaranth,Fjord,Hack;
}


newcode {
    color: #a67;
    padding: 0px 2px 0px 2px;
    font-weight: bold;
}

newcode:hover {
    color: cyan;
}

.newfooterpadding {
    padding: 100px 5px 100px 32%;
}

.newpadding {
    padding: 100px 5px 100px 33%;
}

.background-padding {
    padding: 30px 0px 30px 30%;
}

.addpadding {
    padding: 100px 5px 100px 28%;
}

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

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}


/* 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 20px 'Open Sans', sans-serif;
	text-align: center;
	color: #999;
}

.body_hidden {
    /* padding: 30px 0px 30px 30%; */
}

p {
    line-height: 30px;
}

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

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

h1, h2, h3, h4, h5, h6 {
	font-family: Amaranth,Fjord;
}

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

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

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

.anotherclass {
    width: 100%;
    margin: 0 auto;
    left: -500px;

}

.anotherclass {text-align: left;
               max-width: 900px;}

.container_small {max-width: 1500px;}
.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;
}

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



#post {
    text-align: left;
    position: absolute;

}

.postformat {
    text-align: left;
    position: absolute;


}

#postwelcome {
	background: url('../img/swall.png') no-repeat center;
	background-size: cover;
	width: 100%;
	height: 60vh;
	position: relative;


}

#welcome {
	background: url('../img/emacspic.png') no-repeat center;
	background-size: cover;
	width: 100%;
	height: 100vh;
	position: relative;
}

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

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

.header_subtitle {
	color: #FFFFFF;
	font-size: 20px;
	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 */
.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: #FFFFFF;
	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; }

.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: 50;
}
.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: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: 100vh;
        overflow: auto;
}

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

.navigation ul li  a {
	font-family: Amaranth,Fjord;
	text-transform: uppercase;
	font-size: 30px;
	letter-spacing: 1px;
}

.navigation ul li  a:hover { color: #fff; }

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

#downarrow {
    color: antiquewhite;
}

@-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: #fff;
}

.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;
        border-radius: 5px;
        color: white;
        background-color: #a67d4a;
        opacity: 0.7;
}

.button1 {
	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;
        border-radius: 5px;
}

.button:hover {
	background: #a67d4a;
	color: black;
        opacity: 0.9;
}

.button1:hover {
	background: #a67d4a;
	color: #fff;
}

.button3:hover {
        background: cyan;
        color: black;
}

.button4:hover {
	background: cyan;
	color: black;
}

.button5:hover {
	background: cyan;
	color: black;
}

.button3 {
	margin: 5px 5px;
	padding: 0 20px;
        font-size: 13px;
	height: 50px;
	line-height: 50px;
	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;
        color: white;
        background-color: #a67;
}

.button4 {
	margin: 0px 0px;
	padding: 0 10px;
        font-size: 10px;
	height: 50px;
	line-height: 50px;
	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;
        color: white;
        background-color: #a67;
}

.button5 {
	margin: 5px 5px;
	padding: 0 20px;
        font-size: 15px;
	height: 50px;
	line-height: 50px;
	font-family: Hack;
	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;
        color: white;
        background-color: #a67;
        font-size: 16px;
        font-weight: bold;
}

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

#portfolio {
	background: #f5f5f5;
}

.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;
}

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

/* 07 CONTACT SETTINGS
--------------------------------------------------------------- */

#contact {
	background: #fff;
}

.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: 42px;
	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: 22px;
	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;
    padding-left: 40px;
}

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

footer p {
	line-height: 1;
}

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

.left {
	float: left;
	text-align: left;
        margin-top: 20px;
        padding: 10px 10px 10px 10px;
}

.left span {
	font-family: 'Montserrat', sans-serif;
}

.redcolor {
    color: red;
}

.warningdiv {
    border: red;
    border-style: solid;
    border-width: 2px;
}

.right {
	float: right;
	text-align: right;

}

.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;}
}


ul3 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #111;
    display: hidden;
}

li3 {
    float: left;
    position: fixed;
    z-index: 101;
    display: none;
}

.one {
  left: 106px;
}

.two {
  left: 202.1px;

}

.three {

  left: 20px;

}

.four {

  left: 271px;
}

.twol {
    left: 180px;
}

.twoll {
    left: 190px;
}

.onel {
    left: 97px;
}

.fourl {
    left: 270px;
}

li3 a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
/* li3 a:hover { */
/*     background-color: #FFFFFF; */
/*     color: black; */
/* } */

body::-webkit-scrollbar {
    width: 1em;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

.header_paralaxstyle {
    position: absolute;
    left: 48%;
    top: 85%;
}

.menubarblack {

    position: fixed;
    z-index: 50;
    width: 100%;
    height: 47px;
    background-color: #249AF3;
    display: none;
    text-overflow: inherit;
    flex-flow: row wrap;
    overflow: hidden;
}

.navigation.open, .navigation.close {
	opacity: 1;
	visibility: visible;
	height: 100%;
        width:30%;
        overflow-y: inherit;

        #about {
	    background: #fff;
	    padding: 30px 5px 0px 30%;
        }
}

.defaultpadding {
    padding: 100px 50px;
}

.defaultpadding2 {
    padding: 0px 50px;
}

.defaultportpadding {
    padding: 80px 25px 65px;
}

.defaultfooterpadding {
    padding: 50px;
}

.defaultcontactpadding {
    padding: 30px 5px 30px 40%;
}

.welcomeaddpadding {
    padding: 300px 5px 100px 40%;
}

.arrowpadding {
    position: relative;
    left: 150px;
}

@media screen and (max-width: 500px) {

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

#croppic {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    margin-bottom: 50px;
    margin-top: 0px;
    padding: 0px;
}

#dates {
    background-color: black;
}

.tooltip_templates { display: none; }

.button2 {
    margin: 20px 0px;
    padding: 2px 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;
    border-radius: 5px;
}