/* body */
body{
	font-family: 				'Titillium Web', sans-serif;
	background-color:			#284859;
	background-image:			url(../img/background3.jpg);
	background-size: 			cover;
	overflow-x:					hidden;
	overflow-y:					auto;
/*	min-height: 				5400px;
*/}
h1{
	font-size:					3em;
}
h2{
	font-size: 					2.5em;
}
h3{
	font-size:					2em;
}
h4{
	font-size:					1.5em;
}
h5{
	font-size:					1em;
}
h6{
	font-size:					0.8em;
}
p{
	font-size:					1.2em;
}
a{
	text-decoration:			none;
	color: 						#60969E;
}
a:visited{
	color:						#497278;
}
a:hover{
/*	opacity:					0.66;
*/	color: 						#71AEB8;
}

/* classes */
.clearfix {
  overflow: 					auto;
  zoom:						 	1;
}

.header{
padding-top:					1em;
}

.header img{
	display:					block;
	width:						66.6%; 
	height:						auto;
	max-height:					539.311px;
	margin:						0 auto 0 auto;
}
.header video{
	display:					block;
	width:						66.6%; 
	height:						auto;
	max-height:					546.681px;
	margin:						0 auto 0 auto;
	box-shadow: 				10px 5px 15px #000;
}
.header .nav{
	display:					inline-block;
	position:					absolute;
	left: 						50%;
	bottom:						-30;
	transform:					translate(-50%,0%);
	-ms-transform:				translate(-50%,0%);
	-webkit-transform:			translate(-50%,0%);
	-o-transform:				translate(-50%,0%);
	-moz-transform:				translate(-50%,0%);
}
.header .nav a:hover{
	background-color: 			#71AEB8;
}
.header .nav ul{
	list-style-type:			none;
	margin: 					0;
	padding:					0;
}
.header .nav li{
	position:					static;
	float: 						left;
	display:					block;
	text-align: 				center;
	font-size: 					2em; 
}
.header .navbar-fixed{
	display:					inline-block;
	position:					fixed;
	top:						0;
	z-index: 					1000;
	left: 						50%;
	bottom:						-16;
	transform:					translate(-50%,0%);
	-webkit-transform:			translate(-50%,0%);
	-o-transform:				translate(-50%,0%);
	-moz-transform:				translate(-50%,0%);
	-ms-transform:				translate(-50%,0%);
}
.header .nav .button{
	position:					relative;
	background-color:			#2c565c;
	padding: 					0.5em;
	border: 					3px solid #2c565c;
	color: 						white;
	cursor: 					pointer;
}
.header .nav .button-first{
	position:					relative;
	background-color:			#2c565c;
	padding: 					0.5em;
	border: 					3px solid #2c565c;
	color: 						white;
	cursor: 					pointer;
	border-radius:				20px 0 0 20px;
}
.header .nav .button-last{
	position:					relative;
	background-color:			#2c565c;
	padding: 					0.5em;
	border: 					3px solid #2c565c;
	color: 						white;
	cursor: 					pointer;
	border-radius:				0 20px 20px 0;
}
.sidebar{
	color:						#FFD9A6;
	background-color:			#173026;
	background-image:			url(../img/background2.jpg);
	position:					fixed;
	height: 					100%;
	width: 						15em;
	max-width: 					240px;
	left: 						-20em;
	z-index:					900;
	overflow-x:					hidden;
	overflow-y:					auto;
	box-shadow: 				5px 5px 15px #000;
	-webkit-transition:			all 600ms ease;
	-moz-transition:	 		all 600ms ease;
	-ms-transition: 			all 600ms ease;
	-o-transition: 				all 600ms ease;
	transition: 				all 600ms ease;
}
.sidebar .close-icon{
	vertical-align:				middle;
	font-size:					1.5em;
	width:						100%;
	height: 					auto;
}
.sidebar .picture{
	margin:						1em 0 1em 0;
}
.sidebar .contact{
	width: 						100%;
	height: 					auto;
}
.sidebar .contact p{
	margin: 					0 auto 0 1em;
}
.sidebar .contact p i{
	margin: 					0 0.5em 0.5em 0;
}
.sidebar .picture img{
	display:					block;
	width:						100%;
	height: 					auto;
	max-width: 					200px;
	margin: 					0 auto 0 auto;
	border-radius:				100%;
}
.sidebar .picture h4{
	text-align:					center;
	bottom:						-16;
}
.sidebar .skills{
	width:						100%;
	height: 					auto;
}	
.sidebar .skills h4{
	margin: 					1.2em 0 0 0.75em;
	padding:					0 0 0.5em 0;
}
.sidebar .skills h4 i{
	margin: 					0 0.5em 0 0;
}
.sidebar .skills p{
	margin: 					0 auto 0 1em;
	
}
.sidebar .skills p i{
	margin: 					0 0.5em 0 0;
}
.sidebar .socialmedia-small{
	text-align: 				center;
}
.sidebar .skill-bar-base{
	border-radius:				8px;
	border: 					solid 2px #132620;
	background-color:			#111111;
	margin: 					0 1em 1em 1em;
}
.sidebar .skill-bar{
	text-align:					center;
	border-radius:				8px;
	background-color:			#132620;
}
.sidebar-hidden{
	display:					block;
	position:					fixed;
	z-index:					800;
	-webkit-transition: 		all 600ms ease;
	-moz-transition: 			all 600ms ease;
	-ms-transition: 			all 600ms ease;
	-o-transition: 				all 600ms ease;
	transition: 				all 600ms ease;
}
.sidebar-hidden .button{
	left:							0;
}
.menu-button{
	display:					inline-block;
	vertical-align:				middle;
	font-size:					1.5em;
}

.news{
	padding:					2.5em 0 2.5em 0;
	max-width: 					1267.38px;
	width: 						66.6%;
	height: 					auto;
	margin: 					5em auto 3em auto;
	background-color:			#f8f7ed;
	background-image:			url(../img/container.jpg);
}
.news .container{
	margin: 					0 2.5em 0 2.5em;
}
.cases{
	padding:					0 0 0 0;
	display:					block;
	min-height: 				800px;
	max-width: 					1267.38px;
	width: 						66.6%;
	margin: 					5em auto 3em auto;
	background-color:			#f8f7ed;
	background-image:			url(../img/container.jpg);
}
.cases .container{
	margin: 					0 2.5em 0 2.5em;
}
.cases a{
  display:						inline;
  float:						left;
  width:						25%;
  text-decoration:				none;
  text-align:					center;
  padding:						5px 0;
  color:						white;
  background:					#1271C7;
}
.cases a:hover{
	opacity: 					0.9;
}
.cases .case {
	display: 					inline-block;
	visibility: 				visible;
	opacity:					1;
	float:						left;
	height: 					280px;
	width: 						280px;
	margin: 					1em auto 0 1em;
	-webkit-transition:			all .8s ease-in-out;
	-moz-transition:			all .8s ease-in-out;
	-o-transition:				all .8s ease-in-out;
	-ms-transition:				all .8s ease-in-out;
	transition:					all .8s ease-in-out;
}
.cases .case[data-filter="red"]{
	background-color:			red;
}
.cases .case[data-filter="green"]{
	background-color:			green;
}
.cases .case[data-filter="blue"]{
	background-color:			blue;
}		
.cases a:focus[data-filter]{
    opacity:					0.8;
    outline:					none;
}
.cases a[data-filter="red"]:focus ~ div:not([data-filter="red"]){
  border:						none;
  visibility: 					hidden;
  margin:						0;
  opacity: 						0;
  	-webkit-transition:			all 600ms ease;
	-moz-transition:		 	all 600ms ease;
	-ms-transition: 			all 600ms ease;
	-o-transition: 				all 600ms ease;
	transition: 				all 600ms ease;
}
.cases a[data-filter="green"]:focus ~ div:not([data-filter="green"]){
  border:						none;
  visibility: 					hidden;
  margin:						0;
  opacity: 						0; 
  	-webkit-transition:			all 600ms ease;
	-moz-transition:	 		all 600ms ease;
	-ms-transition: 			all 600ms ease;
	-o-transition: 				all 600ms ease;
	transition: 				all 600ms ease;
}
.cases a[data-filter="blue"]:focus ~ div:not([data-filter="blue"]){
  border:						none;
  visibility:					hidden;
  margin:						0;
  opacity: 						0;  
   	-webkit-transition:			all 600ms ease;
	-moz-transition:	 		all 600ms ease;
	-ms-transition: 			all 600ms ease;
	-o-transition: 				all 600ms ease;
	transition: 				all 600ms ease;
}
.about{
	padding:					2.5em 0 2.5em 0;
	max-width: 					1267.38px;
	width: 						66.6%;
	height: 					auto;
	margin: 					5em auto 3em auto;
	background-color:			#f8f7ed;
	background-image:			url(../img/container.jpg);

}
.about .work{
	margin: 					0 2.5em 0 2.5em;
}
.footer{
	background-color:			#000;
	color:						#FFF;
	opacity:					0.5;
}
.footer .socialmedia{
	font-size:					3em;
	height: 					3em;
	max-width: 					1267.38px;
	width: 						66.6%;
	margin: 					0 auto 0 auto;
}
.footer .socialmedia a{
	margin: 					1em 0 1em 0;
}
.footer .socialmedia .links{
	margin: 					1em 0 0 0;
	float:						right;	
	text-align:					right;
	font-size:					0.33em;
}