/* 
	custom Stylesheet 
*/

/* import Bootstrap's stylesheet */
@import url(bootstrap.css);
@import url(fonts.css);
@import url(navmenu.css);

html {
	height: 100%;
}

body:not(.home) {
	height: 100%;
} /*scrollspy fix on firefox and opera*/

body {
	font-family: proxima-nova, MuseoSans, helvetica nueve, arial;
}

h1 { font: normal 300 30px/42px proxima-nova, Helvetica, sans-serif; }
h2 { font: normal 25px/25px proxima-nova, Helvetica, sans-serif; }
h3 { font: normal 300 17px/21px proxima-nova, Helvetica, sans-serif; }
h4 { font: normal 300 16px / 26px proxima-nova, Helvetica, sans-serif; }
h5 { font: normal 600 12px/16px proxima-nova, Helvetica, sans-serif; color: #333;}
h6 { font: normal 600 12px/16px proxima-nova, Helvetica, sans-serif; color: #b2b2b2; }

p { font: normal 13px/24px proxima-nova, Helvetica, sans-serif;}
a:focus {
	outline: none;
}

::-moz-selection {
    background:rgba(255, 255, 255, 0.99);
    color: orange;
}
::-webkit-selection {
    background:rgba(255, 255, 255, 0.99);
    color: orange;
}
::selection {
    background:rgba(255, 255, 255, 0.99);
    color: orange;
}

/* sticky footer */
#wrap {
	min-height: 100%; 
	height: auto !important; 
	height: 100%; 
	margin: 0 auto -60px;
}
footer {
	background: whitesmoke;
	min-height: 60px;
	border-top-color: #e0e0e0;
	border-top-style: solid;
	border-top-width: 1px;
}
footer p {
	margin: 20px 0;
	color: #636363;
}

/* clears fixed element: navigation bar and footer */
.clearFixedNavbar {
	padding-top: 60px; /*height of navigation bar*/
	padding-bottom: 60px;
}

/* project page dafault layout */
hgroup {
	padding: 50px 0 50px;
	
}
.project-title {
	color: #10404e; 
	font-size: 80px; 
	line-height: 1em; 
	font-weight: 300;
	margin-bottom: .2em;
	transition:	all 1s;
} 
.project-type2 {
	color: #10404e; 
	font-size: 36px; 
	line-height: 1.25em; 
	font-weight: 300;
	margin-bottom: .75em;
}
.project-type {
	color: orange;
	font-size: 18px; 
	line-height: 1.5em; 
	font-weight:400; 
	margin-bottom: .5em;
}

.project-desc-label {
	color: #bbb; 
	font-size: 13px; 
	line-height: 1.5em; 
	font-weight: normal;
	margin-bottom: 1.5em; 
	padding-top: 2px; 
	border-top: 1px dotted #bbb;
}
.project-desc-title {
	font-size: 32px; 
	line-height: 1.15em; 
	font-weight: lighter; 
	margin-bottom: .75em; 
	padding:0;
}
.project-desc {
	font-size: 14px; 
	line-height: 1.5em; 
	font-weight: normal;
	margin-bottom: 1.5em;
}
@media (min-width: 768px) and (max-width: 979px) {
	.project-title {
		font-size: 56px; 
	}
}	
@media only screen and (max-width: 767px) {
	.project-title {
		font-size: 40px; 
	}
}
@media (max-width: 480px) {
	.project-title {
		font-size: 32px; 
	}
	.project-type {
		font-size: 16px; 
	}
}
/* index page layout styles */

#projects, #resume, #contact {
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
#projects {
/*	background: #f0eeee;  */
	border-bottom-color: #e5e5e5;
	/*background-image: url(../img/grid-18px-masked.png);*/
	background-color: #fff;
}
#resume {
	border-bottom-color: #bcbcbc;
	/*background-image: url(../img/grid-18px-masked.png);*/
	background-color: #f9f9f9;
}
#contact {
	border-bottom-color: #e0e0e0;
/*	background-image: url(../img/modalbg.png); */
	background-color: white;
	min-height: 730px;
}

hr {
	margin: 18px 0;
	border: 0;
	border-top: 1px solid #c8c9c6;
	border-bottom: 1px solid #ffffff;
}

.arrow{
width: 0;
height: 0;
margin: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #00A5EE;
/*position: absolute;
top: 0;
right: -20px;*/
}

/* isotope filter styles */
#projects #filters li a.active {
	background-color: #EEE;
}

/* projects grid element styles */
#projects a {
	display: block;
	position: relative;
}
#projects a img.top {
	position: absolute;
	left: 0;
	top: 0px; /*margin,padding and border px from top*/
	-webkit-transition: opacity 300ms linear;
	   -moz-transition: opacity 300ms linear;
 		 -o-transition: opacity 300ms linear;
		-ms-transition: opacity 300ms linear;
		    transition: opacity 300ms linear;
}
#projects a:hover img.top { opacity: 0; }

#projects .item h5 { 
	margin: 10px 10px 0px 10px; 
	padding-top: 10px; 
	border-top: 1px solid #b2b2b2;
}
#projects .item h6 { 
	margin: 0 10px 35px 10px; 
}

#projects .item a:hover { text-decoration: none; }
#projects .item a:hover h5 { color: #005580; }
#projects .item a:hover h6 { color: #08c; }

/*div.item{ float: left; }*/
.selected img.top {
	opacity: 0;
}

/*****************************

RESUME PAGE 

/*******************************/
#resume h3 {
	border-top-width: 3px;
	border-top-style: solid;
	padding-top: 15px;
}
#resume .green{
	color: #A7B742;
	border-color: #A7B742;
}
#resume .blue{
	color: #87CCE6;
	border-color: #87CCE6;
}
#resume .orange{
	color: #FF821F;
	border-color: #FF821F;
}
#resume .yellow{
	color: #F1C336;
	border-color: #F1C336;
}

#resume p:last-child {
	margin-bottom: 40px;
}

.pink {
	background:-webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), color-stop(0.919, rgba(129, 129, 129, 0)), to(rgba(0, 0, 0, 0.5))) repeat-x left top, #079DF7;
	border-color: #da42bb, #9e0b0f;
	}
	
/*****************************

CONTACT PAGE SECTION

/*******************************/

/* --- Contact Form--- */
.form-table {
 width: 100%;
 margin: 0px;	
}
.form-table th, .form-table td  {
	padding: 5px 0;
	line-height: 18px;
	text-align: left;
	vertical-align: top;
}
.form-table label {
	display: block;
	margin: 5px 0;
}
.form-table input, .form-table textarea {
	display: inline-block;
	width: 95%;
	margin: 0 0 5px 0;
}
.form-table textarea {
	height: 200px;
}
.form-table #submit {
	width: auto;
}
.form-table #submit:hover {
	opacity: .75;
}

/* --- Contact Informations --- */
#contact ul {
	padding: 0;
	margin-left: 0;
	list-style: none;
}
#contact ul li{
	clear: both;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #eee;
}
#contact ul li:hover { 
	background-color: #f4f4f4; 
}

#contact ul li a {
	padding: 10px 0;
	display: block;
}
#contact ul li img{
	float: left;
}
#contact ul li h3, #contact ul li h5{
	padding: 5px 0 5px 75px;
}

#contact ul li a { position: relative; cursor:pointer; text-decoration: none;}
#contact ul li a>img{ vertical-align:top;}
#contact ul li a img.top {
	position: absolute;
	left: 0; top: 10px;
	-webkit-transition: opacity 300ms linear;
	   -moz-transition: opacity 300ms linear;
 		 -o-transition: opacity 300ms linear;
		-ms-transition: opacity 300ms linear;
		    transition: opacity 300ms linear;
		}
#contact ul li a:hover img.top { opacity: 0; }


/*---- Start: Recommended Isotope styles ----*/
.isotope {
	min-height: 300px; 
	margin: 0 auto; 
	position: relative; 
	overflow: hidden; 
}

#container .item {
	display: inline-block;
}
/************* Isotope Filtering *************/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */


/************* Loading Bar ***************/
#loadingbar {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	height: 100%;
	width: 100%;
	
	background: url(../img/loading.gif) no-repeat center center;
   -webkit-transform: scale(0.5); 
      -moz-transform: scale(0.5); 
       -ms-transform: scale(0.5); 
        -o-transform: scale(0.5); 
           transform: scale(0.5);
              filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                      M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
 
}

/************* sidebar floating button link ***************/
.floating_link {
     position: fixed;
     right: 0px;
     top: 200px;
     display: block;
     width: 35px;
     height: 500px;
     background-image: url(/my/image.jpg);
     z-index: 2012;
     overflow: hidden;
     
     transition:width .75s;
     -moz-transition:width .75s; /* Firefox 4 */
     -webkit-transition:width .75s; /* Safari and Chrome */
     -o-transition:width .75s; /* Opera */
}
.floating_link:hover {
	width: 100px;
}

video {
	max-width: 100%;
	height: auto;
}
.video-js-center {
	margin: 0 auto;
}
.light.video-js { background-color: black !important; }
#my_video_1 {
	margin-bottom: 3em;
}
#my_video_1 .vjs-big-play-button:focus,
#my_video_1 .vjs-poster:focus {
	outline: -webkit-focus-ring-color auto 0;
}
#my_video_1.vjs-default-skin .vjs-big-play-button {
width: 6.0em;
height: 6.0em;
margin: -30px 0 0 -30px;
border: 0.5em solid rgba(255, 255, 255, 0.8);
opacity: 0.85;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
box-shadow: none;
background: rgba(0, 0, 0, 0.5);
}

#my_video_1.vjs-default-skin div.vjs-big-play-button:hover {
box-shadow: none;
border-color: rgba(255, 230, 210, 0.75);
background-color: rgba(255, 149, 51, 0.89);

}
#my_video_1.vjs-default-skin div.vjs-big-play-button span {
width: 0px;
height: 0px;
margin: -16px 0 0 -6px;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 16px solid white;
background: none;
}

a.fancybox {
/*	position: relative;*/
/*	display: inline-block;*/
}

/*a.fancybox span{
display: block;
background: url('../img/icon-enlarge.svg') no-repeat top right;
width:100%;
height: 100p%;
position: absolute;
top: 0;
right: 0;
pointer-events:none;
opacity: 1;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a.fancybox:hover span{
	opacity: 1;
	width: 100%;
	height: 100%;
/*	box-shadow: inset 0 0 25px rgba(68, 68, 68, 0.1);*!/
}*/
a.fancybox span{
	opacity: 1;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	background:url('../img/icon-enlarge.svg') center center no-repeat #000;
	cursor: pointer;
	height:50px;
	width: 50px;
	margin-left: -50px;
	position: absolute;
	z-index: 10;
	opacity: 0;
}

a.fancybox:hover span {
	opacity: 1;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
}

a.fancybox[rel='group'] img {
	margin-bottom: 15px;
}

.flex-direction-nav a {
border: 0.2em solid rgba(255, 255, 255, 0.8);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.5) !important ;
}
.flex-direction-nav a:hover {
border-color: rgba(255, 230, 210, 0.75);
background: rgba(255, 149, 51, 0.89)  !important;
}

.flex-direction-nav a:after {
content: "";
width: 0;
height: 0;
display: block;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
margin-top: -11px;
margin-left: 9px;
}
.flex-direction-nav a.flex-next:after {
border-right: none;
border-left: 8px solid white;
margin-top: -10px;
margin-left: 12px;
}
.flex-centered ul{ background-color: black; }
.flex-centered .flex-control-thumbs {text-align: center;}
.flex-centered .flex-control-thumbs li {float: none!important; width: 50px !important; margin:0 10px;
}

#banner .flex-control-thumbs li {
	width: 12.5%
}

@media (min-width: 320px) and (max-width: 479px) {
	.navbar .brand {
		padding-right:0 !important;
		font-size: 14px;
		line-height: 30px;
	}
	.navbar .nav.pull-right {
		margin: 0;
	}
}