/* Table of Content
==================================================
	#Global Styles
	#Custom CSS Foundation 5.0.2
	#Themes Styles
	#Media queries are built using ems in Foundation. */

/* #Global Styles
------------------------------------------- */


/* Body */
 body {
    font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    color: #777777;
}


/* Link */
 a {
    color: #f04124;
    -webkit-transition: 0.25s;
    transition: 0.25s;
}
a:hover {
    color: #ea2f10;
    text-decoration: underline;
}
a:focus {
    outline: none;
    outline: 0 auto -webkit-focus-ring-color;
    outline-offset: 0;
}



/* Heading + paragraf */
 h1, h2, h3, h4, h5, h6 {
    font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #444;
    line-height: 1.3;
    margin-bottom: 0.8125rem;
}
p {
    line-height: 1.4;
    margin-bottom: 0.8125rem;
}


/* Selection */
 ::selection {
    background-color: #777;
    color: #fff;
    text-shadow: none;
}

/* = Scroll Webkit
------------------------*/
::-webkit-scrollbar{
  width:0.2em;
}
::-webkit-scrollbar-track{
  background-color:#bdc3c7;
}
::-webkit-scrollbar-thumb{
  background-color:#7f8c8d;
}


/* Icon sizes */
.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }
.size-60 { font-size: 60px; }
.size-72 { font-size: 72px; }


/* Thumnails */
.thumb{
	display: inline-block;
	width:448px;
	height: 252px;
	background: #FFF;
	border:0px solid #ccc;
	position:relative;
	overflow:hidden;
	margin: 0px 12px 0px 12px;
	padding: 0px;
	-moz-transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
	transition:all 0.5s ease;
}
.thumb img{
	font-size:2em;
	color:#fff;
	position:absolute;
	display:block;
	text-align:center;
	width:100%;
}
.thumb p{
	font-size:0.8em;
	text-align:justify;
	padding:0px 10px;
}
.thumb h4{
	text-align:center;
}

.thumb .slidertp{
	position:absolute;
	width: 200%;
	height: 50%;
	left: -100px;
	top: 0px;
	background:#fff;
	overflow:hidden;
	background:#F74646;
	-moz-transition:all 0.5s linear;
	-webkit-transition:all 0.5s linear;
	transition:all 0.5s linear;
}
.thumb .slidertp title{bottom:-20px;}
.thumb .sliderbt{
	position:absolute;
	width: 200%;
	height:50%;
	left: -100px;
	bottom:0px;
	background:#F74646;
	-moz-transition:all 0.5s linear;
	-webkit-transition:all 0.5s linear;
	transition:all 0.5s linear;
	overflow:hidden;
}

.thumb .sliderbt img{bottom: -9px;}
.thumb:hover{
	-moz-transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
	transition:all 0.5s ease;
}

.thumb:hover .slidertp{
	top:-50%;
	transition:all 0.5s linear;
	-moz-transition:all 0.5s linear;
	-webkit-transition:all 0.5s linear;
}
.thumb:hover .sliderbt{
	bottom:-50%;
	-moz-transition:all 0.5s linear;
	-webkit-transition:all 0.5s linear;
	transition:all 0.5s linear;
}


/* Sections */
.sections {
	padding-top: 3em;
	padding-bottom: 4em;
}

/* size of photo */
.size-small{
	width:5em;
}
.size-normal{
	width:10em;
}
.size-large{
	width:15em;
}



/* #Custom CSS Foundation 5.0.2
------------------------------------------- */
.row{
	max-width: 66rem;
}

/* thumnail hover*/
.th:hover, .th:focus {
	-webkit-box-shadow: 0 0 6px 1px rgba(112, 109, 109, 0.5);
	box-shadow: 0 0 6px 1px rgba(112, 109, 109, 0.5);
}


/* Buttons */
button, .button {
	background-color: #FFF;
	border: 1px solid #000;
	color: #0C0C0C;
}
button:hover, 
button:focus, 
.button:hover,
.button:focus {
	background-color: #030303;
	text-decoration: none;
}
/* split button*/
.split.button span {
	border-left-color: #000;
}
.split.button span:before {
	border-color: #0A0A0A rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

/* Input */
input[type="text"], input[type="password"], 
input[type="date"], input[type="datetime"],
input[type="datetime-local"],
input[type="month"], input[type="week"],
input[type="email"], input[type="number"],
input[type="search"], input[type="tel"],
input[type="time"], input[type="url"],
textarea {
	background-color: #FFF;
	border-radius: 0;
	border: 1px solid #000;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #000;
	height: 3.8em;
}
input[type="text"]:focus, input[type="password"]:focus,
input[type="date"]:focus, input[type="datetime"]:focus,
input[type="datetime-local"]:focus, input[type="month"]:focus,
input[type="week"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="search"]:focus,
input[type="tel"]:focus, input[type="time"]:focus,
input[type="url"]:focus, textarea:focus {
	background: #F3F3F3;
	border-color: #A7A7A7;
	outline: none;
}
input[type="text"]:focus, input[type="password"]:focus,
input[type="date"]:focus, input[type="datetime"]:focus,
input[type="datetime-local"]:focus, input[type="month"]:focus,
input[type="week"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="search"]:focus,
input[type="tel"]:focus, input[type="time"]:focus,
input[type="url"]:focus, textarea:focus {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	border-color: #999;
}


/* Top bar */
.top-bar ,.top-bar-section ul ,
.top-bar-section ul li.active > a ,
.top-bar-section li a:not(.button),
.top-bar.expanded .title-area{
	background: rgb(0,0,0,0);
	background: rgba(255, 255, 255, 0);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .05em;
	color: #999;
}
.top-bar-section ul li.active > a:hover,
.top-bar-section li a:not(.button):hover{
	background: rgb(0,0,0,0);
	background: rgba(255, 255, 255, .0);
	color: #FFFFFF;
	text-decoration: none;
}
.top-bar .name h1 a {
	color:#333;
}
.top-bar-section>ul>.divider, .top-bar-section>ul>[role="separator"] {
	border-right: 1px solid #555555;
	height: 20px;
	margin-top:12px;
}
.top-bar-section li a:not(.button) {
	color: #444444;
}

.top-bar .toggle-topbar.menu-icon a {
	color: #FFF;
}
.top-bar .toggle-topbar.menu-icon a span {
	position: absolute;
	right: 0;
	display: block;
	width: 16px;
	height: 0;
	-webkit-box-shadow: 0 10px 0 1px #FFF, 0 16px 0 1px #FFF, 0 22px 0 1px #FFF;
	box-shadow: 0 10px 0 1px #FFF, 0 16px 0 1px #FFF, 0 22px 0 1px #FFF;
}
.expanded > .top-bar-section .divider, .top-bar-section[role="separator"] {
	border-top: solid 1px #666;
	height: 1px;
	margin:0px auto;
}
.top-bar.expanded {
	background-color: #000;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.2);
	height: auto;
}
.expanded > .top-bar-section ul li.active > a:hover,
.expanded > .top-bar-section li a:not(.button):hover {
	background: rgb(0,0,0,0);
	background: rgba(255, 255, 255, .2);
	color: #FFFFFF;
	text-decoration: none;
}
/* Orbit slider */
 .orbit-bullets {
	cursor: pointer;
}

/* panel */
.panel {
	border-style: solid;
	border-width: 1px;
	border-color: #EEE;
	margin-bottom: 1.25rem;
	padding: 1.25rem;
	background: #FCFCFC;
}

/* Blockqoute*/
blockquote{
	-moz-transition:all 0.5s linear;
	-webkit-transition:all 0.5s linear;
	transition:all 0.5s linear;
}
blockquote:hover {
	border-color: #E93B3B;
	background: #F5F5F5;
	color: #C9C9C9;
	-moz-transition:all 0.5s linear;
	-webkit-transition:all 0.5s linear;
	transition:all 0.5s linear;
}

/* Flex video*/
.flex-video.vimeo {
	padding-top: 0;
	border: 0.0em solid #F0F0F0;
}

/* light box */
.clearing-blackout {
	background: #FFF;
}
.clearing-close {
	color: #020202;
}
.clearing-assembled .clearing-container .visible-img {
	background: #FFF;
}

.clearing-assembled .clearing-container .carousel {
	background: #FFF;
}
.clearing-caption {
	color: #777;
	background: #FFF;
}
.clearing-main-next > span {
	border-color: rgba(0, 0, 0, 0);
	border-left-color: #000;
}
.clearing-main-prev > span {
	border-color: rgba(0, 0, 0, 0);
	border-right-color: #000;
}




/* #Themes Styles
------------------------------------------- */
.drop-shadow {
	-webkit-box-shadow: 0px 0px 0px #888;
-moz-box-shadow: 0px 0px 0px #888;
box-shadow: 0px 0px 0px #888;

}
#fullScreen {
     margin: 0px auto; 

}
.full{
position: fixed;
     	 right: 0;
	 bottom: 0;
	
	height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
}
#pageWrapper {
     margin: 0px auto; 
     max-width: 72em; 
     width: 100%; 
	 -webkit-box-shadow: 0px 0px 12px #333;
-moz-box-shadow: 0px 0px 12px #333;
box-shadow: 0px 0px 12px #333; 
}

.masthead {
	background: url("../img/gears-hd-bkg-desat-dark.jpg") no-repeat center center fixed;
	padding-bottom: 0em;
	background-size: cover;
	position: relative;
}
.bck{
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.5);
}
.this_is_home{
	padding-bottom: 0em;
}
.bright {
	
	color: #ddd;
	
}
.divider {
	color: #777;
	height:0px;
	text-align: center;
	background: rgb(255, 255, 255);
	background: rgba(255, 255, 255, 0.25);
}
.info_box {
	text-align: center;
	background: url("../img/gears-hd3-org.jpg") no-repeat center center fixed;
	background-size: cover;
	position: relative;
	color: #fff;
	
}
.info_box_sub {
	text-align: center;
	position: relative;
	color: #fff;
	
}
.main_box{
	background: url("../img/gears-hd-bkg-desat-dark.jpg") no-repeat center center fixed;
	background-size: cover;
	position: relative;
	padding-bottom: 3em;
	
}
.portfolio_box {
	text-align: left;
	position: relative;
	color: #fff;
}
.recentwork_box {
	text-align: center;
	background-color: #F7F7F7;
}
.prefooter{
	text-align: center;
	padding: 50px 0;
	background: url("../img/gears-hd3.jpg") no-repeat center center fixed;
	background-size: cover;
	position: relative;
	color: #fff;
}
.prefooter_box {
	text-align: center;
	position: relative;
	color: #fff;
}
.form-label {
	color: #fff;
	letter-spacing: .1em;
}
/* Footer */
.footer {
	width: 100%;
	background: rgba(0, 0, 0, 0.5);
	color: #DDDDDD;
	text-align: center;
	padding: 1em;
	position:relative;
	bottom: 0;
	z-index: 500;
}
.footer p {
    margin: 0;
}

/* To Top footer button */
.footer .toTop {
	position: absolute;
	cursor: pointer;
	left: 50%;
	right: 50%;
	margin-left: -32px;
	background: #000;
	width: 32px;
	height: 32px;
	top: -15px;
	color: #FFF;
	line-height: 32px;
	-webkit-border-radius: 1em 1em 0 0;
	border-radius: 1em 1em 0 0;
}

.footer .toTop:hover {
    color: #797979;
}

/* Share icons */
.share_icons {
	text-align: center;
	margin-top: 2em;
}
.share_icons ul {
    list-style: none;
    margin: 0;
}
.share_icons ul li {
    display: inline-block;
    margin-left: 1em;
}
.share_icons ul li a {
	border: 0.2em solid #ECECEC;
	background: #F8F8F8;
	color: #333333;
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 3em;
	height: 3em;
	line-height: 2.7em;
	text-align: center;
	-webkit-transition:background 0..8s ease,color 0.5s linear;
	-moz-transition:background 0..8s ease,color 0.5s linear;
	transition:background 0..8s ease,color 0.5s linear;
}
.share_icons ul li a:hover {
	border-color: #FFFFFF;
	background: rgb(224, 224, 224);
	background: rgba(224, 224, 224, 0.25);
	-webkit-transition:background 0..8s ease,color 0.5s linear;
	-moz-transition:background 0..8s ease,color 0.5s linear;
	transition:background 0..8s ease,color 0.5s linear;
}
/* Share icons colors */
.fi-social-facebook {
    color: #0070FF;
}
.fi-social-twitter {
    color: #00B8FF;
}
.fi-social-youtube {
    color: #D53838;
}
.fi-social-instagram {
    color: #FA8200;
}

/* icon divider */
 .icon_divider {
    color: #FFFFFF;
    margin: 0.25em 0.5em 0.25em 0.5em;
    line-height: 4em;
}
/* logo */
.logo,.info_text{
	font-family: "lato",cursive;
	font-weight: bold;
	letter-spacing: 0.05em;
	text-align: center;
}
.logo:hover{
	text-decoration: none;
}

/* info */
.info {
	margin-top: 60px;
	padding-bottom: 60px;
}
.info_text {
	color: #000000;
	font-size: 10em;
	text-shadow: 4px 4px 0px #D5D5D5, 7px 7px 0px rgba(0, 0, 0, 0.2);
}

/* after header */
.after_header{
	background: #444;
	color: #8D8D8D;
	margin: 0px;
	
}
.after_header h2{
	color: #8D8D8D;
}
.after_header_col{
	margin: 0;
}
.after_header_icon {
	display: block;
	width: 7em;
	height: 7em;
	line-height: 5em;
	padding: 0.5em;
	background-color: #F0F0F0;
	border: 0.5em solid #ccc;
	border-radius: 50%;
	margin: 0 auto 1.25rem;
	color: #ff9933;
}
.after_header  .breadcrumbs {
	padding: .1em .1em .1em 1em;
	background-color: #444444;
	border-color: #F7F7F7;
	margin: 0px;
	color: #0C0C0C;
}
.this_breadcrumb {
	color: #8D8D8D;
}
.after_header  .breadcrumbs > * a,
.after_header   .breadcrumbs > * span {
	text-transform: uppercase;
	color: #8D8D8D;
	text-decoration: none;
}
.after_header  .breadcrumbs > * a:hover
{
	color: #0C0C0C;
	text-decoration: none;
}

/*  Icon animation */
.html5_ef{
	animation: html 5s ease  0.5s  infinite alternate none;
	-webkit-animation: html 5s ease  0.5s  infinite alternate none;
	-moz-animation: html 5s ease  0.5s  infinite alternate none;
}
.css3_ef{
	animation: css 5s ease  1s  infinite alternate none;
	-webkit-animation: css 5s ease  1s  infinite alternate none;
	-moz-animation: css 5s ease  1s  infinite alternate none;
}
.eye_ef{
	animation: eye 5s ease  1.2s  infinite alternate none;
	-webkit-animation: eye 5s ease  1.2s  infinite alternate none;
	-moz-animation: eye 5s ease  1.2s  infinite alternate none;
}


/* html5_ef */
@-webkit-keyframes html{50%{background-color: #3498db ;border: 0.5em solid #2980b9;color: #FFF;}}
@-moz-keyframes html{50%{background-color: #3498db ;border: 0.5em solid #2980b9;color: #FFF;}}
@keyframes html{50%{background-color: #3498db ;border: 0.5em solid #2980b9;color: #FFF;}}

/* css3_ef */
@-webkit-keyframes css{50%{background-color: #e74c3c;border: 0.5em solid #c0392b;color: #FFF;}}
@-moz-keyframes css{50%{background-color: #e74c3c;border: 0.5em solid #c0392b;color: #FFF;}}
@keyframes css{50%{background-color: #e74c3c;border: 0.5em solid #c0392b;color: #FFF;}}

/* eye_ef */
@-webkit-keyframes eye{50%{background-color: #F09712;border: 0.5em solid #FCB36F;color: #FFF;}}
@-moz-keyframes eye{50%{background-color: #F09712;border: 0.5em solid #FCB36F;color: #FFF;}}
@keyframes eye{50%{background-color: #F09712;border: 0.5em solid #FCB36F;color: #FFF;}}


/* show border */
.show_border{
	border: 0.3em solid #DADADA;
}

/* text area*/
.textarea {
	height: 10.5em;
}


/* Windows  like explorer */
.window{
	  position: relative;
	  width:100%;
	  padding-bottom: 75%; 
	  margin-bottom: 2em;
	  height: 0;
	  overflow: hidden;
	  background: #F1F1F1;
	  border-width: 1px;
	  border-color: #E7E7E7;
	  border-style:solid;
	  border-radius: 3px;
	  display: block;
}
.window-search{
	  position: absolute;
	  left: 0.5em;
	  top: 0.5em;
	  background: #FFFFFF;
	  width: 70%;
	  padding: 0.3em;
	  border-width:1px;
	  border-color: #E2E2E2;
	  border-style:solid;
	  color: #929292;
}
.window-buttons{
	  position: absolute;
	  top: 1em;
	  right: 1em;
	  width: 1em;
	  height: 1em;
	  background: #C0392B;
	  -webkit-border-radius: 100%;
	  border-radius: 100%;
	  -webkit-box-shadow: -1.5em 0 #D35400,-3em 0 #16A085;
	  -moz-box-shadow: -1.5em 0 #E29610,-3em 0 #5ACF18;
	  box-shadow: -1.5em 0 #D35400,-3em 0 #16A085;
}
.window-body{ 
 	 margin-top: 4em;
}

@media (max-width: 480px) {
  .window-search{
    width: 60%;
  }
  .window-body{
    width: 100%;
  }	
}

.widget {
	position: relative;
	padding-bottom: 75%; 
	height: 0;
	overflow: hidden;
}
.widget iframe {
	position: absolute;
	top: 0;
	left: 0;
	border-color:#EBEBEB;
	border-width:0;
	border-style:solid;
	width: 100%;
	height: 100%;
}
.widget  .orbit-container .orbit-slides-container > * .orbit-caption {
	background-color: #F1F1F1;
	color: #777777;
}

.project{
		width: 228px;
		height: 185px;
	
	}
/* portfolio */
#filter{
	list-style:none;
	margin:0;
}
#filter li{
	display:inline-block;
	list-style:none;
	margin-left: 0.25em;
}

#portfolio{
	list-style:none;
	margin:0 auto;
}
#portfolio li{
	position:relative;
	float:left;
	list-style:none;
	z-index:10;
}




/* #Media queries 
------------------------------------------- */

/* Max-width 60rem = 1024px */
 @media only screen and (max-width: 64rem) {
 	.top-bar .name h1 a{
		color:#333;
	}
	.info_text {
		font-size: 9em;
	}
	.after_header {
		padding: 4em;
	}
	.thumb{
		width: 228px;
		height: 185px;
	
	}
}
/* Max-width 50rem = 800px */
 @media only screen and (max-width: 50rem) {
 	.top-bar .name h1 a{
		color:#333;
	}
	.info_text {
		font-size: 8em;
	}
	.after_header {
		padding: 3em;
	}
	.thumb{
		width: 340px;
		height: 190px;
	
}
}
/* Max-width 40rem = 640px */
 @media only screen and (max-width: 40rem) {
 	.top-bar .name h1 a{
		color:white;
	}
    .icon_divider {
        display: none;
    }
    .info_text {
		font-size: 7em;
	}
	.after_header {
		padding: 1em;
	}
	.thumb{
		width: 280px;
		height: 190px;
	}
}
/* Max-width 35.5rem = 568px */
 @media only screen and (max-width: 35.5rem) {
 	.top-bar .name h1 a{
		color:white;
	}
    .icon_divider {
        display: none;
    }
    .info_text {
		font-size: 6em;
	}
	.after_header {
		padding: 1em;
	}
	.thumb{
		width: 495px;
		height: 189px;
	}
}
/* Max-width 30rem = 480px */
 @media only screen and (max-width: 30rem) {
 	.top-bar .name h1 a{
		color:white;
	}
    .icon_divider {
        display: none;
    }
    .info_text {
		font-size: 5em;
	}
	.after_header {
		padding: 1em;
	}
	.thumb{
		width: 400px;
		height: 190px;
	}
}
/* Max-width 24rem = 384px */
 @media only screen and (max-width: 24rem) {
 	.top-bar .name h1 a{
		color:white;
	}
    .icon_divider {
        display: none;
    }
    .info_text {
		font-size: 4em;
	}
	.after_header {
		padding: 1em;
	}
	.thumb{
		width: 320px;
		height: 190px;
	}
}
/* Max-width 20rem = 320px */
 @media only screen and (max-width: 20rem) {
	.top-bar .name h1 a{
		color:white;
	}
    .icon_divider {
        	display: none;
    }
    .info_text {
		font-size: 3em;
	}
	.after_header {
		padding: 1em;
	}
	.thumb{
		width: 280px;
		height: 190px;
	}
}
/* Max-width 15rem = 240px */
 @media only screen and (max-width: 15rem) {
	.icon_divider {
	    display: none;
	}
	.info_text {
		font-size: 2em;
	}
	.after_header {
		padding: 1em;
	}
	.thumb{
		width: 320px;
		height: 190px;
	}
}