::-moz-selection{ background: red; color:#fff; text-shadow: none; }
::selection { background:red; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: red; }
button {  width: auto; overflow: visible; }

a, a:visited {color: #0E0000;}
a:active, a:hover, a.active, a.active-link {color: red;}

/*---------------------------------------- 
			Global properties
---------------------------------------- */
html,
body {
	min-width: 320px;
	height:100%;
}
body {
	font-size: 13px;
	line-height: 17px;
	color: #000;
	font-family: Verdana, Geneva, sans-serif;	
	margin: 0;
	padding: 0;
	position: relative;
}

@media (min-width: 768px) {
	body {
		font-size: 11px;
		line-height: 13px;
	}
}

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

/* --------------------------------------------------------------------------------
	Bootstrap Redefine
-------------------------------------------------------------------------------- */	
.container {
	padding-right: 10px;
	padding-left: 10px;
}

@media (min-width: 576px) {
	.container {
		padding-right: 15px;
		padding-left: 15px;
	}
}

@media (min-width: 768px) {
	.container {
		width: 720px;
	}
}

@media (min-width: 992px) {
	.container {
		width: 931px;
	}
}

@media (min-width: 1200px) {
	.container {
		width: 931px;
	}
}

.row {
	margin-right: -10px;
	margin-left: -10px;
}

@media (min-width: 576px) {
	.row {
		margin-right: -15px;
		margin-left: -15px;
	}
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .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, .col-sm-12, .col-sm, .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, .col-md-12, .col-md, .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, .col-lg-12, .col-lg, .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, .col-xl-12, .col-xl {
  padding-right: 10px;
  padding-left: 10px;
}

@media (min-width: 576px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .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, .col-sm-12, .col-sm, .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, .col-md-12, .col-md, .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, .col-lg-12, .col-lg, .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, .col-xl-12, .col-xl {
    padding-right: 15px;
    padding-left: 15px;
  }
}

p {
	margin: 0 0 7px;
}

a {
	color:#000;
	text-decoration:underline;
}
	a:hover {
		text-decoration:none;
	}

/*---------------------------------------- 
				General
---------------------------------------- */
#container {
	background: #fff;
}

#top_margin {
	width: 100%;
	height: 90px;
}

@media (min-width: 768px) {	
	#top_margin {
		height: 180px;
	}
}

#content_jerror_hide {
	color: red;
	font-weight: bold;
	padding: 500px 0 0;
}
	@media (min-width: 768px) {
		#content_jerror_hide {
			padding: 1000px 0 0;
		}
	}

#main {
	width: 100%;
	padding: 30px 0 0;	
}

@media (min-width: 768px) {
	#main {
		padding: 71px 0 0;	
	}
}

/*---------------------------------------- 
				Heading
---------------------------------------- */
h2 {
	font-family: "Courier New", Courier, monospace;
	font-size: 18px;
	line-height: 22px;
	font-weight: bold;
	margin: 0 0 7px;
}

h3 {
	font-size: 14px;
	line-height: 18px;
	font-weight: bold;
	margin: 0;
}
@media (min-width: 768px) {
	h3 {
		font-size: 12px;
		line-height: 15px;
	}
}

h4 {
	font-size: 13px;
	line-height: 17px;
	font-weight: bold;
	margin: 7px 0 0;
}
@media (min-width: 768px) {
	h4 {
		font-size: 11px;
		line-height: 15px;
	}
}
/*---------------------------------------- 
				Header
---------------------------------------- */
#header {
	width: 100%;
	max-width: 100%;
	position: relative;
}

.navbar {
	display: block;
	padding: 21px 0 0;
}

@media (min-width: 768px) {
	.navbar {
		padding: 31px 55px 0;
	}
}
@media (min-width: 992px) {
	.navbar {
		padding: 31px 164px 0;
	}
}

.navbar-brand {
	display:block;
	font-size: 0;
	line-height: 0;
	padding: 0;
	margin: 0 auto 15px;
	width: 300px;
	height: 69px;
	background: url(../img/logo.png) 0 0 no-repeat;
	background-size: 100% auto;
}
@media (min-width: 576px) {
	.navbar-brand {
		width: 311px;
		height: 72px;
	}
}
@media (min-width: 768px) {
	.navbar-brand {
		float: left;
		margin: 0;
	}
}

.contacts {
	display: block;
	width: 300px;
	margin: 10px auto;
	overflow:hidden;
}
@media (min-width: 576px) {
	.contacts {
		width: 364px;
	}
}
@media (min-width: 768px) {
	.contacts {
		float: left;
		width: 164px;
		margin: 13px 0 0 37px;
	}
}

.phone {
	float:left;
	width: 130px;
	height: 23px;
	margin: 7px 38px 0 0;
	background: url(../img/phone.png) 0 0 no-repeat;
	background-size: 100% auto;
}
@media (min-width: 576px) {
	.phone {
		width: 162px;
		height: 29px;
	}
}
@media (min-width: 768px) {
	.phone {
		display: block;
		margin: 0 0 2px 2px;
	}
}

.email {
	float:left;
	width: 132px;
	height: 25px;
	background: url(../img/email.png) 0 0 no-repeat;
	background-size: 100% auto;
}
	.email:hover {
		background-position:0 100%;
	}
	
@media (min-width: 576px) {
	.email {
		width: 164px;
		height: 31px;
	}
}
@media (min-width: 768px) {
	.email {
		display: block;
	}
}
/*---------------------------------------- 
				Navigation
---------------------------------------- */
.navbar-toggleable {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
		-ms-flex-direction: row;
			flex-direction: row;
	-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
			flex-wrap: nowrap;
	-webkit-box-align: center;
	-webkit-align-items: center;
		-ms-flex-align: center;
			align-items: center;
}
.navbar-toggleable .navbar-nav {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
		-ms-flex-direction: row;
			flex-direction: row;
}

.navbar-toggleable .navbar-collapse {
	display: -webkit-box !important;
	display: -webkit-flex !important;
	display: -ms-flexbox !important;
	display: flex !important;
	width: 100%;
}

#navbarNavigation {
	width:100%;
}
.navbar-nav {
	padding: 23px 0 0 0;
	text-align: center;
	position: relative;
}
	.navbar-nav li {
		display: inline-block;
		font-size: 12px;
		line-height: 18px;
		font-family: "Courier New", Courier, monospace;
		font-weight: bold;
		padding: 0 9px;
	}		
			
		.navbar-nav li a {
			display: block;
			font-size: 12px;
			line-height: 18px;
			text-decoration: none;
			position: relative;
		}
		.navbar-toggleable .navbar-nav .nav-link {
			padding: 0;
		}
		
		.nav-item.active {
			color: red;
		}
		
		.navbar-nav li a:before {
			display: block;
			content: "|";
			color: #000;
			font-weight:normal;
			position: absolute;
			left: -12px;
			top: 0;
		}
		.navbar-nav li:first-child a:before {
			display: none;
		}
		
@media (min-width: 576px) {
	.navbar-nav li {
		font-size: 14px;
		line-height: 18px;
		padding: 0 13px;
	}	
		.navbar-nav li a {
			font-size: 14px;
			line-height: 18px;
		}
		
		.navbar-nav li a:before {
			left: -19px;
		}
}

/* Submenu */		
#projects_nav {
	display:none;
	width: 100%;
	text-align: center;
	padding: 0;
	margin: 10px 0 0;
	position: absolute;
	left: 0;
	top: 100%;	
}
	#projects_nav.active {
		display:block;
	}
	
		#projects_nav li {
			margin:0 0 0 -7px;
		}
			#projects_nav li:first-child {margin:0;}
			
		.navbar-toggleable .navbar-nav #projects_nav .nav-link {
			padding: 0;
		}

		
@media (min-width: 576px) {
	#projects_nav {
		margin: 20px 0 0;
	}
		#projects_nav li {
			margin:0 0 0 -6px;
		}
}
		
/*---------------------------------------- 
				Content
---------------------------------------- */
.title {
	font-size: 0;
	line-height: 0;
	height: 22px;
	background-position: 0 0;
	background-repeat: no-repeat;
}
	.title.title-about {
		width: 66px;
		height: 22px;
		background-image: url(../img/title-about.png);
	}
	.title.title-project {
		width: 84px;
		background-image: url(../img/title-project.png);
		background-position: 0 0;
	}

@media (min-width: 992px) {
	.title.title-project {
		width: 94px;
		background-position: 10px 0;
	}
	
	.desc-right .title.title-project {
		width: 119px;
		background-position: 33px 0;
	}
}
	
.preview {
	position:relative;
}
	.preview:before {
		display:block;
		content: "";
		width:32px;
		height:31px;
		position:absolute;
		top:-10px;
		left:-6px;
		background:url(../img/corners.png) center top no-repeat;
		z-index:99;
    }
    .preview:after {
		display:block;
		content: "";
		width:32px;
		height:31px;
		position:absolute;
		bottom:-7px;
		right:-6px;
		background:url(../img/corners.png) center bottom no-repeat;
		z-index:99;
    }

.preview img {
	width:100%;
	height:auto;
}
.preview img,
.preview .play_on_scroll {
	border:2px solid #000;
}

.description {
	margin: 18px 0 0;
}
@media (min-width: 768px) {
	.description {
		margin: 0;
	}
}
@media (min-width: 992px) {
	.description {
		margin: 18px 0 0;
	}
}

.details {
	padding: 15px 0;
	position: relative;
}
@media (min-width: 768px) {
	.details {
		padding: 7px 28px 7px 21px;
		background: url(../img/bg-details.png) 4px top no-repeat;
	}
}
@media (min-width: 992px) {
	.details {
		min-height:345px;
		padding: 7px 21px;
	}
}
/*----------------------------------------
			About
---------------------------------------- */
@media (min-width: 768px) {
	#about .preview {	
		margin:0 16px 0 8px;
	}
}
@media (min-width: 992px) {
	#about .preview {	
		margin:0 32px 0 15px;
	}
}

#about .description {
	font-size: 13px;
	line-height: 17px;
	margin: 18px 0 0;
}

@media (min-width: 768px) {
	#about .description {
		font-size: 10px;
		line-height: 12px;
		margin: 0;
	}
}
@media (min-width: 992px) {
	#about .description {
		margin: 18px 0 0;
	}
}

/*----------------------------------------
			Projects
---------------------------------------- */
#projects_contents_wrapper {
	padding: 25px 0 0;
}
@media (min-width: 576px) {
	#projects_contents_wrapper {
		padding: 35px 0 0;
	}
}

.project {
	margin: 0 0 30px;
}
@media (min-width: 992px) {
	.project {
		margin: 0 0 97px;
	}
}

#projects .preview {	
	margin: 0 0 15px;
}
@media (min-width: 992px) {
	#projects .preview {	
		margin: 22px 0 0 0;
	}
}

#projects .description {
	margin: 0;
}
	
#projects .details {
	padding: 15px 0;
	background: none;
}	
	
@media (min-width: 992px) {
	#projects .details {
		padding: 8px 16px 8px 17px;
		margin: 0 65px 0 13px;
		background: url(../img/bg-details.png) 0 0 no-repeat;
	}
	
	#projects .desc-right .details {
		padding: 8px 14px 8px 12px;
		margin: 0 50px 0 38px;
		background: url(../img/bg-details-right.png) 0 0 no-repeat;
	}
	
	#projects .details:before {	
		display: block;
	}
}

#projects .details:before {
	display: none;
	content: "";
	width: 31px;
	height: 28px;
	position: absolute;
	top: 11px;
	right: -34px;
	left: auto;
	background: url(../img/arrows.png) 0 0 no-repeat;
}
	#projects .desc-right .details:before {
		top: 11px;
		left: -34px;
		background-position: 0 100%;
	}
	
@media (min-width: 992px) {
	#projects .details:before {	
		display: block;
	}
}
/*----------------------------------------
			Connect
---------------------------------------- */	
.row-social {
	text-align: center;
	margin: 0 0 30px;
}
.link {
	font-size: 12px;
	line-height: 15px;
}