/*
Author: Spirescu Ioan-Andrei 
Author URL: http://www.spirescuandrei.com
Theme used as a base template - the awesome Magnetic Template (pixelhint.com)

Credits/Thanks (most are in their own files and in plugins.js and main.js)

- raleway font
- gradient squares and tactile noise patterns courtesy of subtlepatterns.com 

*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,  
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

img{
	max-width: 100%;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	color: #454545;
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000; 
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

hr {
	display:block;
	height:1px;
	border:0;   
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
}

input, select {
	vertical-align:middle;
}

/*  Fonts  */
@font-face {
	font-family: 'raleway-regular';
	src: url('../fonts/raleway-regular.eot');
	src: url('../fonts/raleway-regular.eot?#iefix') format('embedded-opentype'),
	url('../fonts/raleway-regular.woff') format('woff'),
	url('../fonts/raleway-regular.ttf') format('truetype'),
	url('../fonts/raleway-regular.svg#ralewayregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'raleway-bold';
	src: url('../fonts/raleway-bold.eot');
	src: url('../fonts/raleway-bold.eot?#iefix') format('embedded-opentype'),
	url('../fonts/raleway-bold.woff') format('woff'),
	url('../fonts/raleway-bold.ttf') format('truetype'),
	url('../fonts/raleway-bold.svg#ralewaybold') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'raleway-semibold';
	src: url('../fonts/raleway-semibold.eot');
	src: url('../fonts/raleway-semibold.eot?#iefix') format('embedded-opentype'),
	url('../fonts/raleway-semibold.woff') format('woff'),
	url('../fonts/raleway-semibold.ttf') format('truetype'),
	url('../fonts/raleway-semibold.svg#ralewaysemibold') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Let's do this */
body{
	background: #222;
	line-height: 1em;
}

.wrapper{
	width: 92.72727272727273%;
	margin: 0 auto;
}

header ul.social li a,
.main .item a .caption,
header nav ul li a{
	transition:all .1s linear;
	-webkit-transition:all .1s linear;
	-moz-transition:all .1s linear;
	-o-transition:all .1s linear;
}

h1, h2, h3, h4, h5 ,h6{
	color: #4b4848;
	font-family: "raleway-regular", arial;
	letter-spacing: 1px;
}

h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6          { font-weight: bolder }

.clearfix:before,  
.clearfix:after {  
	content: " ";  
	display: table;  
}  
.clearfix:after {  
	clear: both;  
}  

.clearfix {  
	*zoom: 1;  
}

/*  Header  */
@media (min-width:1099px){

	header{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 300px;
		min-height: 100%;
		padding: 0 0 0 50px;
		background: #ffffff; 
		float: left;
		overflow: hidden;
		z-index: 9999;
		border-right: 1px solid #111;
		box-shadow: 0px 0px 25px 0px #444;
		margin: 0;
		background-image:  url("../img/gradient_squares2.png");
		background-repeat: repeat;
		background-position: 90% 50%;
	}

	.mobilerights{
		display: none;
	}

	header .logo{
		margin-top: 50px;
		opacity: 0.9;
		-webkit-transition: opacity .3s 0s, visibility 0s .3s;
		-moz-transition: opacity .3s 0s, visibility 0s .3s;
		transition: opacity .3s 0s, visibility 0s .3s;

	}

	header .logo:hover{
		opacity: 0.8;
		-webkit-transition: opacity .3s 0s, visibility 0s .3s;
		-moz-transition: opacity .3s 0s, visibility 0s .3s;
		transition: opacity .3s 0s, visibility 0s .3s;
	}

	header nav ul{
		display: block;
		overflow: hidden;
		margin-top: 200px;
		list-style: none;	
	}

	header nav ul.dropdown-menu li{
		display: block;
		margin-bottom: 5px;
		margin-top: 5px;
	}

	header nav ul li{
		display: block;
		margin-bottom: 30px;
	}

	header nav ul li a{
		color: #454545;
		font-family: "raleway-regular", arial;
		font-size: 14px;
		text-decoration: none;
		letter-spacing: 1px;
	}

	header nav ul li a:hover,
	header nav ul li a.selected{
		color: #969595;
	}

	header .footer{
		position: absolute;
		bottom: 50px;
	}

	header ul.social{
		list-style: none;
		margin-bottom: 5px;
	}

	header ul.social li{
		display: block;
		float: left;
		position: relative;
		margin: 0 10px 10px 0;
	}

	header ul.social li a{
		display: block;
		width: 30px;
		height: 30px;
		border: 1px solid;
		background-position: 0px 0;
		opacity: 0.9;
	}

	header ul.social li a:hover{
		background: #bbb;
		opacity: 1;
		transition:all 0.5s;
	}

	header ul.social li a.fb:hover{
		background:#3b5998;
		color:#fff;
	}

	header ul.social li a.twitter:hover{
		background:#4099ff;
		color:#fff;
	}

	header ul.social li a.youtube:hover{
		background:#e52d27;
		color:#fff;
	}

	header ul.social li a.linkedin:hover{
		background:#007bb6;
		color:#fff;
	}

	header ul.social li a.deviantart:hover{
		background:#4e6252;
		color:#fff;
	}

	header .socialmobile{
		display:none;
	}

	header .rights p{
		color: #454545;
		font-family: "raleway-regular", arial;
		font-size: 11px;
		letter-spacing: 2px;
		line-height: 18px;
	}

	header .rights a{
		font-size: 12px;
		font-family: "raleway-bold", arial;
		text-decoration: none;
		opacity: 0.8;
		letter-spacing: 0.3em;
		transition:all .3s linear;
		-webkit-transition:all .3s linear;
		-moz-transition:all .3s linear;
		-o-transition:all .3s linear;
	}

	header .rights a:hover{      
		opacity: 1;
	}

	#menu_icon,
	.close_menu{
		display: none;
	}

	.aboutme{
		background: url(../img/justphoto.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;    
		border-bottom: 2px solid #69BD9B;
		border-right: 2px solid #69BD9B;
		border-left: 2px solid #69BD9B;
		box-shadow: 0px 5px 25px #222;
		margin-bottom: 25px;
	}

	.aboutme-info{
		width: 100%;
		padding: 15px;
		position: relative;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.aboutme-info p{
		color: #eee;
		font-size: 18px;
		font-family: 'raleway-regular';
		letter-spacing: 1px;
		line-height: 20px;
		padding:11px;
		text-align: justify;
	}

	.button-group{
		position: relative;
		float: left !important;
	}

	.button-group-display{
		float: right !important;
		position: relative; 
	}

	.videoWrapper {
		position: relative;
		width: 100%;
		height: 0;
		overflow: hidden; 
		border-top:2px solid #aaa;
		border-bottom:2px solid #aaa;
	}

	.videoWrapper2 {
		position: relative;
		width: 100%;
		height: 0;
		background-color: #000;
		overflow: hidden; 
	}

	.main .work{
		display: block;
		width: 33.33333333333333%;
		height: auto;
		float: left;
		position: relative;
		overflow: hidden;
	}

	.centerme {
    width: 200px; height: 650px; /* must be present. No matter the value */
    position: absolute;          /* to props top/bottom take effect */
    margin: auto;                /* here's the magic. */
    bottom: 0px; top: 0px;       /* This is how you center a block verticaly */
}
}

#menu_icon,
.close_menu{
	float: right;
	margin-right: 40px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	background: url('../img/2icons.png') no-repeat;
}

#menu_icon{    
	background-position: 0 0;
}
.close_menu{
	background-position: -41px 0!important;
}

.main{
	width: 100%;
	height: 100%;
	padding-left: 300px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	z-index: 55; 
	background: #f6f6f6;
	clear: both;
}

.main2 {
	width: 100%;
	padding-left: 300px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	z-index: 55;  
	clear: both;
}

.item2{
	display: block;
	height: auto;
	float: left;
	position: relative;
	overflow: hidden;
}

.item2 a:hover{
	opacity: 0.8;
}

.item2 .media{
	width: 100%;
	vertical-align: middle;
}

.item2 .caption{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0; 
	left: 0;
	background: transparent;
	opacity: 0;
}

.item2 a:hover .caption{
	opacity: 1;
}

.item2 .caption .item_title{
	display: block;
	width: 100%;
	position: absolute;
	text-align: center;
	top: 50%;
	margin-top: -40px;
}

.item2 .caption p{
	position: relative;
	display: inline-block;
	max-width: 90%;
	padding: 20px 5px;
	z-index: 77;
	color: #fff;
	background:url(../img/diagonal.png) repeat scroll 0 0;
	font-family: "raleway-regular", arial;
	font-size: 18px;
	letter-spacing: .5px;
	border-bottom: 2px solid #dfdfdf;
	border-top: 2px solid #dfdfdf;
}

.item_nav{
	display: block;
	width: 100%;
}

.item_nav .btn{
	float: right;
}

.item_nav ul{
	list-style: none;
}

.item_nav ul li{
	display: block;
	float: left;
	margin: 0 0 1px 1px;
	position: relative;
}

.item_nav a{
	display: block;
	width: 40px;
	height: 40px;
	background: url('../img/p_navigation.png') no-repeat;
	background-position: 0 0;
}

.item_nav a.previous{
	background-position: 0 0;
}

.item_nav a.grid2{
	background-position: -41px 0;
}

.item_nav a.next{
	background-position: -82px 0;
}

.title{
	display: block;
	width: 100%;color: #4b4848;
	font-family: "raleway-bold", arial;
	font-size: 22px;
	font-weight: bold;
	background: rgba(255, 255, 255, .7);
	padding: 11px;
	text-transform: uppercase;
	line-height: 30px;
	margin: 0!important;
	overflow: hidden;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.content_header{
	position: absolute;
	bottom: 0;
	margin: 0 auto;
	left: 50%;
	margin-left: -46.36363636363637%;
}

/*  Tooltip  */
.tooltip{
	display: block;
	padding: 7px 10px;
	background: #454545;
	color: #fff;
	font-family: "raleway-regular", arial;
	font-size: 12px;
	position: absolute;
	white-space: nowrap;
	z-index: 999;
	opacity: 0;
	text-align: center;
	letter-spacing: .5px;
}

.tooltip:after{
	content: '';
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 3px 3px 0 3px;
	border-color: #454545 transparent transparent transparent;
	display: block;
	text-align: center;
	position: absolute;
	bottom: -3px;
	left: 50%;
	margin-left: -3px;
}

/* Responsive */
@media (max-width:1099px){

	body{
		background: #fff;
	}

	header{
		display: block;
		width: 100%;
		min-height: 100px;
		padding: 0;
		position: relative;
	}
	header .logo{
		margin: 5px 0 0 30px;
		float: left;
	}

	header .footer{
		display:none;
	}

	header ul.social{
		list-style: none;
		margin-bottom: 5px;
		margin:0 auto;
		text-align:center;
	}

	header ul.social li{
		display: inline-block;
		float: center;
		margin: 0 10px 5px 0;
		border-left: 1px solid #111;
		border-right: 1px solid #111;
		border-bottom: 1px solid #111;
	}

	header ul.social li a{
		display: block;
		width: 55px;
	}

	header ul.social li a.fb:hover{
		background:#3b5998;
		color:#fff;
	}

	header ul.social li a.twitter:hover{
		background:#4099ff;
		color:#fff;
	}

	header ul.social li a.youtube:hover{
		background:#e52d27;
		color:#fff;
	}

	header ul.social li a.linkedin:hover{
		background:#007bb6;
		color:#fff;
	}

	header ul.social li a.deviantart:hover{
		background:#4e6252;
		color:#fff;
	}

	header .rights {
		display:none;
	}

	.mobilerights{
		background: #ddd;
		border: 1px dashed #111;
	}

	.mobilerights p{
		color: #454545;
		font-family: "raleway-regular", arial;
		font-size: 12px;
		letter-spacing: 1px;
		line-height: 18px;
	}

	.mobilerights a{
		font-size: 13px;
		font-family: "raleway-bold", arial;
		font-weight: bold;
		text-decoration: none;
		opacity: 0.8;
	}

	.mobilerights a:hover{      
		opacity: 1;
	}

	header .socialmobile{
		background-color:transparent;
		border-top:1px solid;
	}

	header #menu_icon,
	header .close_menu{
		float: right;
		margin: 30px 30px 0 0;
	}

	header nav{
		width: 100%;
		position: absolute;
		top: 105px;
		left: 0;
		z-index: 9999;
	}

	header nav ul{
		list-style: none;
		display: none;
		position: relative;
	}
	header nav ul li a{
		display: block;
		width: 100%;
		padding: 25px 0;
		text-align: center;
		color: #454545;
		font-family: "raleway-regular", arial;
		font-size: 16px;
		text-decoration: none;
		border-top: 1px solid #f7f5f5;
		background: #fff;
	}
	header nav ul li a.selected{
		color: #969595;
	}
	#menu_icon,
	.close_menu,
	.show_menu{
		display: block;

	}
	.show_menu{
		display: block;
	}

	.main .item{
		width: 50%;
	}
	.main{
		width: 100%;
		position: relative;
		padding-left: 0;
	}

	.main2{
		width: 100%;
		position: relative;
		padding-left: 0;
	}

	.vertical-text h2 {
		font-size:0.9em !important;
		color:#eee;
		margin-left: 2px;
	}

	.aboutme{
		background: url(../img/justphoto.jpg) repeat;
		border-bottom: 2px solid #69BD9B;
		border-right: 2px solid #69BD9B;
		border-left: 2px solid #69BD9B;
		box-shadow: 0px 5px 25px #222;
		margin-bottom: 20px;
	}

	.aboutme-info{
		margin:5px;
		padding: 5px;
		position: relative;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.aboutme-info p{
		color: #eee;
		font-size: 17px;
		font-family: 'raleway-regular';
		letter-spacing: 1px;
		padding:5px;
	}

	.button-group{
		float: left !important;
		text-align: center;
		position: relative;
	}

	.button-group-display{
		float: right !important;
		text-align: center;
		position: relative;
	}

	.videoWrapper {
		position: relative;
		width: 100%;
		height: 0;
		background-color: #000;
		border-top:2px solid #aaa;
		border-bottom:2px solid #aaa;
	}

	.main .work{
		width: 50%;
	}

	.dropdown-toggle{
		display: none;
	}

	.dropdown-menu{
		display: none;
	}
}

.cd-top {
	display: inline-block;
	height: 40px;
	width: 40px;
	position: fixed;
	bottom: 15px;
	right: 25px;
	z-index:9999;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: rgba(0, 0, 0, 0.7) url(../img/cd-top-arrow.svg) no-repeat center 50%;
	visibility: hidden;
	opacity: 0;
	border-radius: 30px / 90px;
	-webkit-transition: opacity .3s 0s, visibility 0s .3s;
	-moz-transition: opacity .3s 0s, visibility 0s .3s;
	transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
	-webkit-transition: opacity .3s 0s, visibility 0s 0s;
	-moz-transition: opacity .3s 0s, visibility 0s 0s;
	transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
	visibility: visible;
	opacity: 0.7;
}
.cd-top.cd-fade-out {
	opacity: 0.5;
}
.cd-top:hover {
	opacity: 1;
}

.menu_div {
	position: fixed;
	right: 5%;
	text-align: right;
	top: 0%;
	padding-top:3px;
	padding-bottom:2px;
	z-index: 16;
	background: #222;
}

.menu-active {
	right: 18%;
}

.menu_div button {
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	border: medium none;
	color: #aaa;
	font-size: 15px;
	line-height: 5px;
}
.menu_div button:hover {
	color:#ccc;
}

.cbp-spmenu {
	background: #111 none repeat scroll 0 0;
	box-shadow: 15px 15px 15px 15px #222; 
}

.cbp-spmenu img {
	padding-left: 5px;
	padding-bottom:10px;
}
.cbp-spmenu-vertical a {
	border-bottom: medium none;
	color: #c4c4c4;
	font-family: "asapregular";
	font-size: 18px;
	padding: 15px 25px;
	text-transform:uppercase;
}
.cbp-spmenu-vertical a:hover{
	color: #fff;
	font-family: "asapbold";
	text-decoration:none;
	background: none;
}

.embed-container { 
	position: relative; 
	padding-bottom: 56.5%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}

.vertical-text {
	position: absolute;
	top:3%;
	left: 5px;
	overflow: hidden;
	white-space: nowrap;
	display:block;
	transform: rotate(90deg);
	transform-origin:bottom left;
	-ms-transform: rotate(90deg); /* IE 9 */
	-ms-transform-origin:bottom left; /* IE 9 */
	-webkit-transform: rotate(90deg); /* Safari and Chrome */
	-webkit-transform-origin:bottom left; /* Safari and Chrome */
	moz-transform: rotate(90deg); /* Firefox */
	-moz-transform-origin:bottom left; /* Firefox */
	-o-transform: rotate(90deg); /* Opera */
	-o-transform-origin:bottom left; /* Opera */
}

.vertical-text h2 {
	font-size:1em;
	color:#eee;
}

.detail{
	color: #FFFFFF;
	background: #34495E;
	padding: 1%;
	border-bottom: 3px solid #19BD9B;
	border-top: 1px groove #19BD9B;
	box-shadow: 0px 5px 25px #222;
}

.detail p{
	font-size: 1.2em;
	font-family: 'raleway-regular';
	text-align: left;
	color:#ddd;
}

.detail2{
	background: #333;
	border-bottom: 3px solid #19BD9B;
	box-shadow: 0px 5px 25px #222;
}

.list {
	border:1px solid #333;
	border-bottom:2px solid #333;
	background-image: url("../img/gradient_squares.png"); 
}

.list:after {
	content: '';
	display: block;
	clear: both;
}

.skills h4{
	color:#eee;
	font-weight: 500;
	line-height: 25px;
}

.skills span{
	font-family: "raleway-regular", arial;
	line-height: 25px;
}

.blueish-bg {
	background-color: #282f35;
	-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.13) !important;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.13) !important;
	position: relative;
	border-top: 4px solid #c59a6d;
}

ul.socialcontact li{
	display: inline-block;
	margin-right: 10px;
	margin-top: 30px;
	margin-bottom: 20px;
}

ul.socialcontact li a{
	color: #ffffff;
	font-size: 16px;
}

ul.socialcontact li a:hover{
	color: #ffffff;
	font-size: 16px;
	opacity: 0.8;
}

address strong{
	text-transform: uppercase;
	font-style: normal;
	font-family: 'Montserrat', sans-serif;
}

address{
	font-style: italic;
	font-size: 14px;
	font-family: 'Lato', sans-serif;
	letter-spacing: 1px;
	line-height: 22px;
	margin-left: 30px;
	margin-top: 16px;
}

.adresa{
	border:2px solid #C59A6D;
	transition: all 0.5s;
}

.adresa:hover{
	background: #C59A6D;
	transition: all 0.5s;
}

.adresa a{
	color:#ddd;
}

.adresa a:hover{
	color:#fff;
	text-decoration: underline;
	transition: all 0.5s;
}

#contact input.form-control,
#contact textarea.form-control {
	margin-bottom: 30px;
	resize: vertical;
}

#contact{
	border-bottom: 3px solid #69BD9B;
	border-right: 3px solid #69BD9B;
	border-left: 3px solid #69BD9B;
	box-shadow: 0px 5px 25px #222;
	background: #282f35;
	padding: 50px 50px;
	color: #ffffff;
	margin-bottom: 35px;
	opacity: 0.9;
}

#contact .form-control {
	display: inline-table;
	width: 100%;
	height: 40px;
	padding: 7px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #1e2429;
	border: 0;
	border-top: 2px solid transparent;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
	transition: all 0.5s;

}

#contact .form-control:focus {
	border-color: #C59A6D;
	outline: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	color:#eee;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
	color:    #222222;
	font-family: 'Lato', sans-serif;
	font-size: 13px;
	letter-spacing: 1px;
	font-style: italic;
}
input:-moz-placeholder, textarea:-moz-placeholder { 
	color:    #222222;
	font-family: 'Lato', sans-serif;
	font-size: 13px;
	letter-spacing: 1px;
	font-style: italic;
}
input::-moz-placeholder, textarea::-moz-placeholder { 
	color:    #222222;
	font-family: 'Lato', sans-serif;
	font-size: 13px;
	letter-spacing: 1px;
	font-style: italic;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
	color:    #222222;
	font-family: 'Lato', sans-serif;
	font-size: 13px;
	letter-spacing: 1px;
	font-style: italic;
}

a.btn.find-btn{
	text-transform: uppercase;
	background: #449d44;
	color: #282f35;
	padding: 15px 35px;
	border-radius: 0;
	font-size: 12px;
	color: #ffffff;
	transition: all 0.5s;
	margin-bottom: 5px;
}
a.btn.find-btn:hover{
	background: transparent;
	border: 1px solid #449d44;
	color: #aaa;
}

a.btn.download-btn{
	text-transform: uppercase;
	background: #c59a6d;
	color: #282f35;
	padding: 15px 35px;
	border-radius: 0;
	font-size: 12px;
	color: #ffffff;
	transition: all 0.5s;
	margin-bottom:20px;
}
a.btn.download-btn:hover{
	background: transparent;
	border: 1px solid #c59a6d;
	color: #777;
	margin-bottom:20px;
}

a.btn.send-btn2{
	text-transform: uppercase;
	background: #c59a6d;
	color: #282f35;
	padding: 15px 35px;
	border-radius: 0;
	font-size: 12px;
	color: #ffffff;
	transition: all 0.5s;
	margin-bottom: 5px;
}
a.btn.send-btn2:hover{
	background: transparent;
	border: 1px solid #c59a6d;
	color: #ffffff;
}

.option {
	-webkit-animation-duration: 2s;
	-webkit-animation-delay: 1s;
}

/* Mix it up */
.grid{
	text-align: justify;
	font-size: 0.1px;
	background: #222;
	-webkit-backface-visibility: hidden;
}

.grid:after{
	content: '';
	display: inline-block;
	width: 100%;
}

.grid .mix{
	text-align: center;
	padding: 1px;
	display: none;
}

.grid .mix:before{
	content: '';
	display: inline-block;
}

@media all and (max-width: 321px){
	.grid .mix{
		width: 100%;
	}
}

@media all and (min-width: 420px){
	.grid .mix{
		width: 50%;
	}
}

@media all and (min-width: 820px){
	.grid .mix{
		width: 33.33333333%;
	}
}

@media all and (min-width: 1099px){
	.grid .mix{
		width: 25%;
	}
}

@media all and (min-width: 2000px){
	.grid .mix{
		width: 14.2%;
	}
}
/* Mix it up */

.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity 500ms;
}

.centerall {
	text-align: center;
	padding-right: 15px;
}

.videoWrapper43 {
	padding-top: 75%;
}
.videoWrapper169 {
	padding-top: 56%;
}

.videoIframe {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
}

.videoPoster {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	cursor: pointer;
	border: 0;
	outline: none;
	background-position: 50% 50%;
	background-size: 100% 100%;
	background-size: cover;
	text-indent: -999em;
	overflow: hidden;
	-webkit-transition: opacity 800ms, height 0s;
	-moz-transition: opacity 800ms, height 0s;
	transition: opacity 800ms, height 0s;
	-webkit-transition-delay: 0s, 0s;
	-moz-transition-delay: 0s, 0s;
	transition-delay: 0s, 0s;
}

.videoPoster:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
	border: 2px solid #fff;
	border-radius: 15%;
	-webkit-transition: border-color 300ms;
	-moz-transition: border-color 300ms;
	transition: border-color 300ms;
}

.videoPoster:after {
	content: '';
	position: absolute;
	top: 49%;
	left: 49%;
	width: 0;
	height: 0;
	margin: -20px 0 0 -10px;
	border-left: 40px solid #fff;
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	-webkit-transition: border-color 300ms;
	-moz-transition: border-color 300ms;
	transition: border-color 300ms;
}

.videoPoster:hover:before, .videoPoster:focus:before {
	border-color: #f00;
}

.videoPoster:hover:after, .videoPoster:focus:after {
	border-left-color: #f00;
}

.videoWrapperActive .videoPoster {
	opacity: 0;
	height: 0;
	-webkit-transition-delay: 0s, 800ms;
	-moz-transition-delay: 0s, 800ms;
	transition-delay: 0s, 800ms;
}

.others .nav-tabs > li > a {
	padding: 10px 15px;
	margin: 0 10px;
	color: white;
	background-color: #ccc;
	text-align: center;
	display: block;
	float: left;
	transition: all 0.5s;
	background: #333;
	margin: 0;
	cursor: pointer;
	font-size: 12px;
	width: 140px;
}

.others .nav-tabs > li.active > a,
.others .nav-tabs > li.active > a:hover,
.others .nav-tabs > li.active > a:focus {
	color: #555;
	cursor: default;
	background-color: #fff;
	border-bottom-color: transparent;
	width: 160px;
}

#top{
	max-width:100%;
	height:290px;
	position:relative;
	display:block;
	overflow:hidden;
}

.paginate{
	padding-top: 10px;
}

.paginate .btn-primary {
	display: inline-block;
	width: auto;
	transform: skew(-30deg, 0deg);
	padding: 15px 30px;
	color: white;
	background: #333;
	border: 2px solid #333;
	margin: 0;
	font-size: 14px;
	opacity: 0.9;
}

.paginate .btn-primary:hover {
	opacity: 1;
}

.paginate .btn-primary > span {
	display: block;
	transform: skew(30deg, 0deg);
}

.paginate .disabled {
	opacity: 0.6;
}


.listy li {
	margin-top: 11px;
	border: 3px solid #333;    
	border-radius: 5px; 
	display: table;
	border-collapse: collapse;
	width: 100%;
}

.li-img {
	display: table-cell;
	vertical-align: middle;
	width: 40%;
	background-image:  url("../img/tactile_noise.png");
}

.li-vid {
	display: table-cell;
	vertical-align: middle;
	width: 40%;
	background-image:  url("../img/tactile_noise.png");
	opacity: 1;
}

.li-vid:hover {
	opacity: 0.96;
}

.li-img img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 1;
	border-top:2px solid #aaa;
	border-bottom:2px solid #aaa;
}

.li-img img:hover {
	opacity: 0.8;
}

.li-center {
	display: table-cell;
	vertical-align: middle;
	width: 20%;
	background: #333;
}

.li-center h2 {
	font-size: 22px;
	text-align: center;
	margin: 0;
	color:#fff;
	font-family: "raleway-semibold", arial;
}

.li-text {
	color: #4b4848;
	font-family: "raleway-regular", arial;
	font-size: 17px;
	line-height: 25px;
	padding: 10px;
	display: table-cell;
	vertical-align: middle;
	width: 40%;
	background: #fff;
}

@media all and (max-width: 800px) {
	.listy li {
		margin-top: 10px;
		border: 3px solid #333;   
		display: inline-block;
		border-collapse: collapse;
		width: 100%;
	}

	.li-center {
		display: inline;
		text-align: center;
		width: 70%;
	}

	.li-center h2 {
		font-size: 23px;
		font-family: "raleway-semibold", arial;
		background: #333;
	}

	.li-text {
		display: table-cell;
		vertical-align: middle;
		width: 70%;
	}

	.li-vid {
		display: inline;
		vertical-align: middle;
		width: 40%;
		background-image:  url("../img/tactile_noise.png");
	}

	.main .item{
		width: 100%;
	}

	.main .work{
		width: 100%;
	}

	.aboutme{
		background: url(../img/justphoto.jpg) repeat;
		border-bottom: 2px solid #69BD9B;
		border-right: 2px solid #69BD9B;
		border-left: 2px solid #69BD9B;
		box-shadow: 0px 5px 25px #222;
		margin-bottom: 20px;
	}

	.imageme{
		width: 100%;
		border-bottom:3px solid #282f35 ;
	}

	.aboutme-info{
		margin:5px;
		padding: 5px;
		position: relative;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.aboutme-info p{
		color: #eee;
		font-size: 17px;
		font-family: 'raleway-regular';
		letter-spacing: 1px;
		padding:5px;
	}

	.button-group{
		float: left !important;
		text-align: center;
		position: relative;
		padding: 3px;
	}

	.button-group-display{
		float: right !important;
		text-align: center;
		position: relative;
		padding: 3px;
	}

	.nav-tabs > li > a {
		padding: 10px 15px;
		margin: 0 10px;
		color: white;
		background-color: #ccc;
		text-align: center;
		display: block;
		float: left;
		transition: all 0.5s;
		background: #333;
		margin: 0;
		cursor: pointer;
		font-size: 14px;
		border-left: 1px solid #d7dadb;
	}

	.nav-tabs > li > p {
		padding: 12px 20px;
		color: white;
		background-color: #ccc;
		text-align: center;
		display: block;
		background: #333;
		margin: 0;
		font-size: 14px;
	}
}

.li-download{
	margin-top:20px;
}

.li-download a{
	color: #559a6d;
}

.li-download a:hover{
	text-decoration: underline;
	color: #337ab7;
	transition:all 0.5s;
}

@media all and (max-width: 600px){
	
	.button-group{
		float: none !important;
	}

	.button-group-display{
		border-top:2px solid #fff;
		float: none !important;
	}

	header ul.social{
		list-style: none;
		margin-bottom: 5px;
		margin:0 auto;
		text-align:center;
	}

	header ul.social li{
		margin: 0px -2px 0px 0px;
	}
}

#submit{
	text-transform: uppercase;
	background: #c59a6d;
	padding: 15px 35px;
	border-radius: 0;
	font-size: 12px;
	color: #ffffff;
	transition: all 0.5s;
	margin-bottom: 10px;
}

#submit:hover{
	background: transparent;
	border: 1px solid #c59a6d;
	color: #ffffff;
	border-radius: 11px;
}

#reset{
	text-transform: uppercase;
	background: #b59a6d;
	padding: 15px 35px;
	border-radius: 0;
	font-size: 12px;
	color: #ffffff;
	transition: all 0.5s;
	margin-bottom: 10px;
}

#reset:hover{
	background: transparent;
	border: 1px dashed #c59a6d;
	color: #ffffff;
	border-radius: 11px;
}

 .floating{
    float: right;
    opacity: .8;
    transition:all 1s linear;
	-webkit-transition:all 1s linear;
	-moz-transition:all 1s linear;
	-o-transition:all 1s linear;
    -webkit-smoothing:antialiased;
    -webkit-animation-name: FloatingOnX;
    -webkit-animation-duration: 3.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: Floating;
    -moz-animation-duration: 3.5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    }
    @-webkit-keyframes FloatingOnX{
    from {-webkit-transform:translate(0, 4px);}
    65% {-webkit-transform:translate(0, -4px);}
    to {-webkit-transform: translate(0, 4px);    }    
    }
    @-moz-keyframes Floating{
    from {-moz-transform:translate(0, 4px);}
    65% {-moz-transform:translate(0, -4px);}
    to {-moz-transform: translate(0, 4px);}    
}

.floating:hover{
	opacity: .95;
	transition:all 1s linear;
	-webkit-transition:all 1s linear;
	-moz-transition:all 1s linear;
	-o-transition:all 1s linear;
}

.cliptext {
	width: 100%;
	resize: vertical;
	border:2px solid #333;
	transition: 1s all;
}

.cliptext:hover {
	width: 100%;
	resize: vertical;
	border:2px solid #C59A6D;
	transition: 1s all;
	background: #333;
	color:#fff;
}

.cliptext:focus{
	border-color: #C59A6D;
	outline: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

