@charset "UTF-8";

/* MAIN */
#content{
	padding: 25px 30px;
	overflow: auto;
}
#portfolio{
	position: relative;
	background-color: #fff;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	padding: 20px 0;
}

/* VIEWPORT */
#viewport{
	position: relative;
	margin-left: 140px;
	overflow: hidden;
	height: 450px;
	width: 740px;
}
#slide_grid{
	position: absolute;
	top: 0;
	left: 0;
	width: 7400px;
	transition: all .75s ease-out;
	color: #fff;
	font-size: 30pt;
}
.grid_row{
	width: 100%;
	height: 450px;
}
.gallery_slide{
	position: relative;
	float:left;
	width: 740px;
	height: 100%;
	background-size: 100% 100%;
	margin:0;
	padding:0;
}

.infoBox{
	position: absolute;
	width: 210px;
	padding: 0 20px 0 20px;
	text-align: left;
	height: 100%;
	right: 0;
	background-color: rgba(0,0,0,0.7);
	-webkit-backdrop-filter: blur(10px);
	        backdrop-filter: blur(10px);
	color: #fff;
	font-size: 35%;
	text-shadow: 0 0 5px #000;
}
.infoBox h1{
	margin: 75px 0 -10px 0;
	font-size: 170%;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
}
.infoBox strong{
	font-size: 120%;
}
.infoBox a{
	display: inline-block;
	font-weight: bold;
	font-size: 115%;
	color: #000;
	text-align: center;
	text-shadow: none;
	background-color: #F60;
	border-radius: 5px;
	margin: 20px 0;
	padding: 5px 20px;
}
.infoBox a:hover{	
	background: #C30;
	text-decoration: none;
}

/* CATEGORY NAVIGATION */
#categories{
	background-color:#bbb;
	position: absolute;
	width: 140px;
	top: 40px;
	left: 0;
}
#categories>ul{
	list-style: none;
	margin:0;
	padding: 0;
}
.category>a{
	display: block;
	position: relative;
	height: 30px;
	border: 1px solid #eee;
	color: #333;
	text-shadow: 1px 1px 0 #fff;
	margin: 1px;
	background: url(../imgs/btnBG.png);
	line-height: 30px;
}
.category>a:hover{
	background: #bbb;
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
.category.selected>a:hover {
	cursor: default;
	background: url(../imgs/btnBG.png);
	color: #333;
}
.category.selected>a:after {
	content: url(../imgs/point.png);
	display: block;
	position: absolute;
	z-index: 2;
	top: -1px;
	left: 136px;
}

.category.selected .gallery_btn_frame{
	height: 25px;
	padding: 5px 0 5px 7px;
}
.category_illustrations.selected .gallery_btn_frame,
.category_logos.selected .gallery_btn_frame,
.category_other.selected .gallery_btn_frame{
	height: 50px;
}

.gallery_btn_frame{
	position: relative;
	width: 133px;
	height: 0;
	margin: 0;
	padding: 0 0 0 7px;
	background-color: #eee;
	overflow: auto;
	box-shadow: 0 0 5px #777 inset;
	transition: all .3s linear;
}
.gallery_btn{
	float: left;
	margin: 5px;
	width: 15px;
	height: 15px;
	background-color: #c30;
	transition: all .15s linear;
}
.gallery_btn:hover{
	cursor: pointer;
	background-color: #333;
}
.gallery_btn.selected{
	background-color: #000;
}
.gallery_btn.selected:hover{
	cursor: default;
}

/* IMAGES */
.slide_chinese{ background-image: url(/imgs/portfolio/illustrations/chinese_warrior.jpg) }
.slide_elk{ background-image: url(/imgs/portfolio/illustrations/evil_elk.jpg) }
.slide_gift{ background-image: url(/imgs/portfolio/illustrations/gift.jpg) }
.slide_happy{ background-image: url(/imgs/portfolio/illustrations/happy_place.jpg) }
.slide_monkey{ background-image: url(/imgs/portfolio/illustrations/monkey.jpg) }
.slide_penetration{ background-image: url(/imgs/portfolio/illustrations/penetration.jpg) }
.slide_tongue{ background-image: url(/imgs/portfolio/illustrations/tongue_head.jpg) }

.slide_byucs{ background-image: url(/imgs/portfolio/websites/byu_cs.jpg) }
.slide_corsetti{ background-image: url(/imgs/portfolio/websites/corsetti.jpg) }
.slide_creche{ background-image: url(/imgs/portfolio/websites/creche.jpg) }
.slide_mayfield{ background-image: url(/imgs/portfolio/websites/mayfield.jpg) }
.slide_pixar{ background-image: url(/imgs/portfolio/websites/pixar_portal.jpg) }
.slide_websoc{ background-image: url(/imgs/portfolio/websites/web_society.jpg) }

.slide_blues{ background-image: url(/imgs/portfolio/logos/blues_repair.png) }
.slide_chameleon{ background-image: url(/imgs/portfolio/logos/chameleon.png) }
.slide_faux{ background-image: url(/imgs/portfolio/logos/faux_fox.png) }
.slide_hobby{ background-image: url(/imgs/portfolio/logos/hobby_heap.png) }
.slide_mayfield_logo{ background-image: url(/imgs/portfolio/logos/mayfield.png) }
.slide_pinwheel{ background-image: url(/imgs/portfolio/logos/pinwheel.png) }
.slide_twit{ background-image: url(/imgs/portfolio/logos/twit.png) }
.slide_x10{ background-image: url(/imgs/portfolio/logos/x10.png) }

.slide_3Dscroll{ background-image: url(/imgs/portfolio/other/3D_scroll.png) }
.slide_berlin{ background-image: url(/imgs/portfolio/other/berlin.jpg) }
.slide_bottles{ background-image: url(/imgs/portfolio/other/bottles.jpg) }
.slide_firepit{ background-image: url(/imgs/portfolio/other/firepit.jpg) }
.slide_neon{ background-image: url(/imgs/portfolio/other/neon.jpg) }
.slide_pumpkin{ background-image: url(/imgs/portfolio/other/pumpkin.jpg) }
.slide_weather{ background-image: url(/imgs/portfolio/other/weather.jpg) }

@media only screen and (-moz-min-device-pixel-ratio: 1.5),
				only screen and (-o-min-device-pixel-ratio: 3/2), 
				only screen and (-webkit-min-device-pixel-ratio: 1.5), 
				only screen and (min-device-pixel-ratio: 1.5), 
				only screen and (min-resolution: 1.5dppx) {
	
	.slide_chinese{ background-image: url(/imgs/portfolio/illustrations/chinese_warrior@2x.jpg) }
	.slide_elk{ background-image: url(/imgs/portfolio/illustrations/evil_elk@2x.jpg) }
	.slide_gift{ background-image: url(/imgs/portfolio/illustrations/gift@2x.jpg) }
	.slide_happy{ background-image: url(/imgs/portfolio/illustrations/happy_place@2x.jpg) }
	.slide_monkey{ background-image: url(/imgs/portfolio/illustrations/monkey@2x.jpg) }
	.slide_penetration{ background-image: url(/imgs/portfolio/illustrations/penetration@2x.jpg) }
	.slide_tongue{ background-image: url(/imgs/portfolio/illustrations/tongue_head@2x.jpg) }
	
	.slide_byucs{ background-image: url(/imgs/portfolio/websites/byu_cs@2x.jpg) }
	.slide_corsetti{ background-image: url(/imgs/portfolio/websites/corsetti@2x.jpg) }
	.slide_creche{ background-image: url(/imgs/portfolio/websites/creche@2x.jpg) }
	.slide_mayfield{ background-image: url(/imgs/portfolio/websites/mayfield@2x.jpg) }
	.slide_pixar{ background-image: url(/imgs/portfolio/websites/pixar_portal@2x.jpg) }
	.slide_websoc{ background-image: url(/imgs/portfolio/websites/web_society@2x.jpg) }
	
	.slide_blues{ background-image: url(/imgs/portfolio/logos/blues_repair@2x.png) }
	.slide_chameleon{ background-image: url(/imgs/portfolio/logos/chameleon@2x.png) }
	.slide_faux{ background-image: url(/imgs/portfolio/logos/faux_fox@2x.png) }
	.slide_hobby{ background-image: url(/imgs/portfolio/logos/hobby_heap@2x.png) }
	.slide_mayfield_logo{ background-image: url(/imgs/portfolio/logos/mayfield@2x.png) }
	.slide_pinwheel{ background-image: url(/imgs/portfolio/logos/pinwheel@2x.png) }
	.slide_twit{ background-image: url(/imgs/portfolio/logos/twit@2x.png) }
	.slide_x10{ background-image: url(/imgs/portfolio/logos/x10@2x.png) }
	
	.slide_3Dscroll{ background-image: url(/imgs/portfolio/other/3D_scroll@2x.png) }
	.slide_berlin{ background-image: url(/imgs/portfolio/other/berlin@2x.jpg) }
	.slide_bottles{ background-image: url(/imgs/portfolio/other/bottles@2x.jpg) }
	.slide_firepit{ background-image: url(/imgs/portfolio/other/firepit@2x.jpg) }
	.slide_neon{ background-image: url(/imgs/portfolio/other/neon@2x.jpg) }
	.slide_pumpkin{ background-image: url(/imgs/portfolio/other/pumpkin@2x.jpg) }

	.slide_weather{ background-image: url(/imgs/portfolio/other/weather@2x.jpg) }
	
}