/*
	* Brandon Tiehen
	* 2017 (c) All Rights Reserved
	* Website Framework, Version 2.1 - "Artsy Portfolio"
*/

/*
	* Brandon Tiehen
	* Plugins & Resources
	* CSS - "Columnize.css" (minified) - Version 1.0 (12 Columns)
*/.row{clear:both; margin:0 auto; width:100%;} .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xl-1{width:8.333333%; float:left;} .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xl-2{width:16.666666%; float:left;} .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3{width:25%; float:left;} .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4{width:33.333333%; float:left;} .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xl-5{width:41.666666%; float:left;} .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6{width:50%; float:left;} .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xl-7{width:58.333333%; float:left;} .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xl-8{width:66.666666%; float:left;} .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xl-9{width:75%; float:left;} .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xl-10{width:83.333333%; float:left;} .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xl-11{width:91.888888%; float:left;} .col-xs-12, .col-sm-12 ,.col-md-12, .col-lg-12, .col-xl-12{width:100%;} @media screen and (min-width:1440px) and (max-width:1920px){.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11{width:50%;}} /* Extra Large Screens (Macbook Pro 15 inch)*/ @media screen and (max-width:1440px){[class*="col-xl-"]{width:100%; float:initial; clear:both;}} @media screen and (min-width:1024px) and (max-width:1280px){.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11{width:50%;}} @media screen and (max-width:1024px){[class*="col-lg-"]{width:100%; float:initial; clear:both;}} /* Large Screens (Most Netbooks, iPad (Landscape))*/ @media screen and (min-width:768px) and (max-width:840px){.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11{width:50%;}} @media screen and (max-width:768px){[class*="col-md-"]{width:100%; float:initial;}} /* Medium Screens (iPad (Portrait))*/ @media screen and (min-width:480px) and (max-width:600px){.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11{width:50%;}} @media screen and (max-width:480px){[class*="col-sm-"]{width:100%; float:initial;}} /* Small Screens (iPhone 3/3GS (Landscape), Meizu M8 (Portrait), Google Nexus One (Portrait))*/ @media screen and (min-width:320px) and (max-width:540px){.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11{width:50%;}} @media screen and (max-width:320px){[class*="col-xs-"]{width:100%; float:initial;}} /* Extra Small Screens (iPhone 3/3GS (Portrait), Meizu M8 (Landscape), Google Nexus One (Landscape))*/

/*
	* "Glowify.css" - Font glowing plugin
	* Design & Developing: Brandon Tiehen
	* Either copy and paste, or use @import url("path/to/glowify.css");
*/
/* Default glow is Yellow */.glow{text-shadow:0px 0px 15px yellow;}.glow-goldenrod{text-shadow:0px 0px 15px goldenrod;}.glow-blue{text-shadow:0px 0px 15px blue;}.glow-white{text-shadow:0px 0px 15px white;}.glow-red{text-shadow:0px 0px 15px red;}.glow-green{text-shadow:0px 0px 15px green;}.glow-orange{text-shadow:0px 0px 15px orange;}.glow-pink{text-shadow:0px 0px 15px pink;}.glow-purple{text-shadow:0px 0px 15px purple;}.glow-brown{text-shadow:0px 0px 15px brown;}.glow-black{text-shadow:0px 0px 15px black;}.glow-sky{text-shadow:0px 0px 15px skyblue;}.glow-navy{text-shadow:0px 0px 15px navy;}.glow-grey{text-shadow:0px 0px 15px grey;}.glow-gold{text-shadow:0px 0px 15px gold;}.glow-chocolate{text-shadow:0px 0px 15px chocolate;}.glow-teal{text-shadow:0px 0px 15px teal;}.glow-paleturquoise{text-shadow:0px 0px 15px paleturquoise;}.glow-turquoise{text-shadow:0px 0px 15px turquoise;}.glow-royalblue{text-shadow:0px 0px 15px royalblue;}.glow-salmon{text-shadow:0px 0px 15px salmon;}.glow-silver{text-shadow:0px 0px 15px silver;}.glow-snow{text-shadow:0px 0px 15px snow;}.glow-steelblue{text-shadow:0px 0px 15px steelblue;}.glow-tan{text-shadow:0px 0px 15px tan;}.glow-violet{text-shadow:0px 0px 15px violet;}.glow-yellowgreen{text-shadow:0px 0px 15px yellowgreen;}

/*
	* Main CSS
*/
hr{width:50%;}
p{
	max-width:95%;
	margin:0 auto;
	margin-bottom:10px;
}
@media screen and (max-width:768px){hr{width:75%;}}
.centertext{text-align:center;}
.righttext{text-align:right;}
.clearfix{
	clear:both;
	width:100%;
	float:initial;
}
html, body{
	padding:0;
	margin:0;
}
/* Fonts Imports */
@font-face{
	font-family:"Open Sans", sans-serif;
	src:url("opensans/OpenSans-Regular.ttf"),
		url("opensans/OpenSans-Bold.ttf"),
		url("opensans/OpenSans-Italic.ttf"),
		url("opensans/OpenSans-BoldItalic.ttf");
}
@font-face{
	font-family:"Raleway";
	src:url("raleway/Raleway-Regular.ttf"),
		url("raleway/Raleway-Bold.ttf"),
		url("raleway/Raleway-Italic.ttf"),
		url("raleway/Raleway-BoldItalic.ttf");
}

/* Links */
a{
	color:gold;
	text-decoration:none;
	transition:0.25s ease-in-out;
	-webkit-transition:0.25s ease-in-out;
	-o-transition:0.25s ease-in-out;
	-moz-transition:0.25s ease-in-out;
	-ms-transition:0.25s ease-in-out;
}
a:hover{text-decoration:underline; color:goldenrod;}

/* Heading Fonts */
html, body{font-family:"Open Sans", sans-serif;}
h1, h2, h3, h4, h5, h6{font-family:"Raleway";}

/* Topbar */
.topbar{
	position:fixed;
	width:100%;
	background-color:#111;
	background:url("../images/topbar-bg.jpg");
	color:#FFF;
	height:80px;
	font-size:1.125em;
	box-shadow:0 0 25px rgba(0, 0, 0, 0.9);
	z-index:10;
	border-bottom:1px solid #AAA;
}
.topbar a{
	color:#CBCBCB;
}
.topbar a:hover{
	text-decoration:none;
	color:#FFFFFF;
}
.topbar h1 a{
	color:#FFF;
}
.topbar h1{
	padding:0 15px;
	padding-left:20px;
}
.topbar header{
	float:left;
	width:40%;
	line-height:30px;
}
.topbar nav{
	float:right;
	text-align:right;
	width:60%;
	line-height:40px;
}
.topbar nav ul{
	list-style-type:none;
	padding:0;
	margin:0;
	padding-top:17.5px;
}
.topbar nav ul li{
	padding:0;
	margin:0;
	display:inline;
}
.topbar nav ul li a{
	padding:0 10px;
}
.topbar nav ul li a:last-child{
	padding-right:20px;
}
#menuicon{
	display:none;
	cursor:pointer;
	opacity:0.75;
	transition:0.25s ease-in-out;
	-webkit-transition:0.25s ease-in-out;
	-o-transition:0.25s ease-in-out;
	-moz-transition:0.25s ease-in-out;
	-ms-transition:0.25s ease-in-out;
	margin-top:20px;
	margin-right:20px;
}
#menuicon:hover{
	opacity:1;
}
@media screen and (max-width:768px){
	#menuicon{display:block; float:right;}
	.topbar header{width:66.666666%;}
	.topbar nav{width:33.333333%;}
	.topbar nav ul li{
		display:block;
	}
	.topbar nav ul{
		position:absolute;
		float:right;
		margin-top:80px;
		z-index:5;
		background-color:#111;
		background:url("../images/topbar-bg.jpg");
		padding-top:0;
		width:100%;
		overflow:hidden;
	}
	.topbar nav ul li{
		text-align:left;
	}
	.topbar nav ul li:last-child{
		padding-bottom:15px;
	}
	.topbar nav ul li a{
		padding:15px 30px;
	}
}
@media screen and (max-width:600px){
	.topbar header h1{font-size:1.5em; padding-top:6.5px; padding-left:10px;}
	.topbar header{width:60%;}
	.topbar nav{width:40%};
}
@media screen and (max-width:420px){
	.topbar header{width:50%; line-height:30px; margin-top:-15px;}
	.topbar nav{width:50%};
	.topbar header h1{padding-top:0; margin-top:0; font-size:1.25em;}
}
img{max-width:100%}
/* #intro */
#intro{
	height:100vh;
	padding-top:80px;
	text-align:center;
	color:white;
	background-color:#222;
	background:url("../images/intro-bg.jpg");
}
.slideshow{
	margin:0 auto;
	margin-top:25px;
	overflow:hidden;
	border-radius:250px;
	background:#000000;
	border:1px solid #FFF;
	box-shadow:0 0 15px rgba(255, 255, 255, 0.5);
	height:350px;
	width:350px;
}
.slideshow img{
	height:350px;
	width:450px;
}
@media screen and (max-width:768px){
	.slideshow{height:258px; width:258px;}
	.slideshow img{height:258px; width:358px;}
}

/* #portfolio */
#portfolio{
	margin:0 auto;
	background-color:#222;
	background:url("../images/yctiwy-funny-bg.jpg");
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:fixed;
	color:#FFF;
	padding:20px 0;
}

/* #about */
#about{
	background-color:#333;
	background-image:url("../images/about-bg.jpg");
	padding:20px 0;
	color:#FFF;
}

/* #gallery */
#gallery{
	background-color:#111;
	background:url("../images/rp3-bg.jpg");
	background-position:top;
	background-size:cover;
	background-attachment:fixed;
	padding:20px 0;
	padding-bottom:50px;
	color:#FFF;
}
button[type="button"]{
	display:block;
	margin:auto;
	font-family:"Raleway";
	font-weight:600;
	font-size:0.9em;
	width:150px;
	height:75px;
	padding:20px;
	cursor:pointer;
	background:rgba(0, 0, 0, 0.25);
	color:#fff;
	border:1px solid #DDD;
	transition:0.25s ease-in-out;
	-webkit-transition:0.25s ease-in-out;
	-o-transition:0.25s ease-in-out;
	-moz-transition:0.25s ease-in-out;
	-ms-transition:0.25s ease-in-out;
}
button[type="button"]:hover{
	background:rgba(0, 0, 0, 0.75);
	border:1px solid #FFF;
}
#photos{
	padding-top:20px;
	padding-bottom:20px;
}
#photos img{
	border:1px solid #FFF;
	width:250px;
	height:250px;
	display:block;
	margin:auto;
	max-width:100%;
	margin-bottom:10px;
}
#videos{
	padding-top:20px;
}
iframe{width:360px; height:240px; display:block; margin:auto; margin-bottom:10px;}
@media screen and (max-width:768px){
	#photos img{width:150px; height:150px;}
	iframe{width:275px; height:144px;}
}
@media screen and (max-width:600px){
	iframe{width:200px; height:104px;}
}
[id*="-lb"]{
	opacity:1;
	cursor:pointer;
	transition:0.25s ease-in-out;
	-webkit-transition:0.25s ease-in-out;
	-o-transition:0.25s ease-in-out;
	-moz-transition:0.25s ease-in-out;
	-ms-transition:0.25s ease-in-out;
}
[id*="-lb"]:hover{
	opacity:0.75;
	filter:grayscale(50%);
	-webkit-filter:grayscale(50%);
	-o-filter:grayscale(50%);
	-moz-filter:grayscale(50%);
	-ms-filter:grayscale(50%);
}
[class*="-lightbox"]{
	width:100%;
	height:100vh;
	background:rgba(0, 0, 0, 0.8);
	position:fixed;
	z-index:25;
}
#close{
	background:darkred;
	border:1px solid red;
	cursor:pointer;
	width:40px;
	height:40px;
	margin-top:10px;
	margin-left:10px;
	color:#FFF;
	font-size:2em;
}
#close:hover{
	background:red;
	border:1px solid darkred;
	transition:0.25s ease-in-out;
	-webkit-transition:0.25s ease-in-out;
	-o-transition:0.25s ease-in-out;
	-moz-transition:0.25s ease-in-out;
	-ms-transition:0.25s ease-in-out;
}
[class*="-lightbox"] img{
	padding-top:10px;
	display:block;
	margin:auto;
	max-width:60%;
	max-height:80%;
}
@media screen and (max-width:768px){
	[class*="-lightbox"] img{
		max-width:95%;
	}
}

/* #contact */
#contact{
	padding:20px;
	background-color:#000;
	background:url("../images/contact-bg.jpg");
	background-size:cover;
	color:#FFF;
}
input, textarea{
	text-align:center;
	width:200px;
	padding:15px;
	font-family:"Open Sans", sans-serif;
	border:1px solid #DDD;
	color:#222;
	background:rgba(255, 255, 255, 0.75);
	transition:0.25s ease-in-out;
	-webkit-transition:0.25s ease-in-out;
	-o-transition:0.25s ease-in-out;
	-moz-transition:0.25s ease-in-out;
	-ms-transition:0.25s ease-in-out;
	color:#000000;
	font-size:0.85em;
}
input:active, textarea:active, input:focus, textarea:focus{
	border:1px solid royalblue;
	background:rgba(255, 255, 255, 1);
}
input, textarea, button{
	display:block;
	margin:auto;
	margin-bottom:10px;
}
button[type="submit"]{
	padding:25px;
	cursor:pointer;
	font-size:1em;
	width:150px;
	background:rgba(25, 25, 25, 0.9);
	color:#FFF;
	border:1px solid #FFF;
	transition:0.25s ease-in-out;
	-webkit-transition:0.25s ease-in-out;
	-o-transition:0.25s ease-in-out;
	-moz-transition:0.25s ease-in-out;
	-ms-transition:0.25s ease-in-out;
}
button[type="submit"]:hover{
	background:transparent;
}

/* footer */
footer{
	border-top:1px solid #DDD;
	transition:0.25s ease-in-out;
	-webkit-transition:0.25s ease-in-out;
	-o-transition:0.25s ease-in-out;
	-moz-transition:0.25s ease-in-out;
	-ms-transition:0.25s ease-in-out;
	text-align:center;
	background:rgba(0, 0, 0, 0.95);
	color:#AAA;
	padding:50px 0;
}
footer:hover{
	color:#FFF;
}