/***** GENERAL & PSEUDO CLASSES *****/

body{ -webkit-font-smoothing: antialiased; }
#main-container{ overflow: hidden; }
input{ -webkit-appearance: none; }
input:focus{ outline: none; }
.border-bottom{ border-bottom: 2px solid #fff; height: 32px; }
.nopad{ padding: 0px; }
.offix{ overflow: hidden; }
.pad-normal{ padding-top: 66px; padding-bottom: 66px; }
.pad-large{ padding-top: 121px; padding-bottom: 121px; }
.pad-top{ padding-top: 121px; }
.pad-bottom{ padding-bottom: 66px; }

#loader{ position: absolute; width: 100%; height: 100%; background-color: #fff; z-index: 20000; padding-top: 250px; }
#progress-bar{ 
	height: 10px; background-color: #222; 
	-webkit-transition: all .5s; 
	transition: all .5s; 
	-moz-transition: all .5s;
	width: 0px;
}

/*** TYPOG ***/

@font-face {
    font-family: 'latin7onesskregular';
    src: url('../fonts/latios__-webfont.eot');
    src: url('../fonts/latios__-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/latios__-webfont.woff2') format('woff2'),
         url('../fonts/latios__-webfont.woff') format('woff'),
         url('../fonts/latios__-webfont.ttf') format('truetype'),
         url('../fonts/latios__-webfont.svg#latin7onesskregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dual300';
    src: url('../fonts/dual-300-webfont.eot');
    src: url('../fonts/dual-300-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/dual-300-webfont.woff2') format('woff2'),
         url('../fonts/dual-300-webfont.woff') format('woff'),
         url('../fonts/dual-300-webfont.ttf') format('truetype'),
         url('../fonts/dual-300-webfont.svg#dual300') format('svg');
    font-weight: normal;
    font-style: normal;
}

.text-white{ color: #fff; }
.alt-h{ font-family: 'dual300' !important; font-weight: normal !important; }
.highlight{ color: #ffd200; }
.lowlight{ color: #4b3f55; }
.red{ color: #ff1717; }

.icon{ display: inline-block; -webkit-backface-visibility: hidden; }

/*** ELEMENTS ***/

.btn{ 
	border: 2px solid #bbb;
	padding: 16px 28px 18px 28px;
	display: inline-block;
	font-size: 12px;
	cursor: pointer;
	font-weight: bold;
	color: #777;
	transition: all .2s ease;
	background: none;
	text-transform: uppercase;
	border-radius: 3px;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	transition: all .3s ease;
}
.btn .icon{ margin-left: 7px; }
.btn:hover{ background: #eee; color: #777; }

.divider{ position: relative; background-size: cover !important;}


.page-title{ margin-bottom: 44px; }
.ampersand{ font-family: 'dual300'; display: inline-block; border-bottom: 3px solid; font-size: 18px; margin: 0px 22px; font-weight: bold; line-height: 1.1; }


/***** NAVIGATION *****/

#navigation{ 
	position: fixed; 
	top: 0px; 
	max-height: 70px; 
	z-index: 999; 
	width: 100%; 
	padding-top: 17px; 
	background: none; 
	overflow: hidden;
	-webkit-transition: all .3s; 
	transition: all .3s; 
	-moz-transition: all .3s;
	opacity: 0;
	top: -100px;
	padding-bottom: 6px;
}
#navigation p { color: #FFF; font-weight: 700; padding-top: 5px; letter-spacing: 0px; }
#navigation p a:link { color: #FFF; }
#navigation p a:visited { color: #FFF; }
#navigation p a:hover { color: #FFF;  }

#navigation2{ 
	position: fixed; 
	top: 0px; 
	max-height: 70px; 
	z-index: 999; 
	width: 100%; 
	padding-top: 17px; 
	background: none; 
	overflow: hidden;
	-webkit-transition: all .3s; 
	transition: all .3s; 
	-moz-transition: all .3s;
	opacity: 0;
	top: -100px;
	padding-bottom: 6px;
}
#navigation2 p { color: #FFF; font-weight: 700; padding-top: 5px; }
#navigation2 p a:link { color: #FFF; }
#navigation2 p a:visited { color: #FFF; }
#navigation2 p a:hover { color: #FFF;  }


.nav-logo{ max-width: 90px; margin-top:3px; }
.open-nav{ max-height: 400px !important; }
#menu{ list-style: none; overflow: hidden; text-align: right; float: right; -webkit-backface-visibility: hidden; padding-top: 3px; }
#menu li{ float: left; margin-right: 33px; }
#menu li a{ color: #FFF;
font-family: 'dual300';
text-transform: uppercase;
font-size: 13px;
font-weight: bold;
letter-spacing: 0px; }
#menu li i{ color: #555; font-size: 24px; }

#mobile-toggle{ display: none; cursor: pointer; font-size: 28px; position: absolute; right: 22px; top: 22px; }

.sticky-nav{ background-color: #ffd200 !important; opacity: 1 !important; top: 0px !important	;}
.sticky-nav2{ background-color: #000 !important; opacity: 1 !important; top: 0px !important	;}

/***** HOME SECTION *****/

#home{ position: relative; overflow: hidden; }

#home-slider{ position: relative; }
#home-slider .slides li{ height: 760px; position: relative; background-size: cover !important; background-color: #ffd200; }
#home-slider .slides li h1{ font-size: 63px; }
#home-slider .flex-control-paging li a{ border-color: #fff; }
#home-slider .flex-control-paging li a:hover{ background: #fff; }
#home-slider .flex-control-paging li a.flex-active{ background: #fff;  }

.logo{ }

/***** ABOUT SECTION *****/

#about { background-color: #ffd200; padding-top: 100px; padding-bottom: 100px; }
#about p { color: #fff; font-weight: 700; font-size: 17px; text-align: right; letter-spacing: 0px; }
#about img { text-align: left; }

#about-detail{ background-color: #f9f9f9; }
#about-detail .page-title{ margin-bottom: 22px; }

#about-toggle, .filters{ overflow: hidden; display: inline-block; list-style: none; }
#about-toggle li, .filters li{ float: left; margin-right: 33px; cursor: pointer; transition: all .5s ease; -webkit-transition: all .3s ease; }
#about-toggle li:hover, .filters li:hover h6{ color: #555; }
#about-toggle li:last-child, .filters li:last-child{ margin-right: 0px; }
#about-toggle .active, .filters .active{ padding-bottom: 7px; border-bottom: 6px solid #d4a16b; }
#about-toggle .active h6, .filters .active h6{ color: #555; }

#about-toggle h6, .filters h6{ font-size: 14px; color: #838383; transition: all .2s ease;  }

.process{ margin-bottom: 66px; overflow: hidden; }
.process .icon{ font-size: 52px; margin: 0px auto; }
.process .number{ float: left; width: 20%; font-family: 'dual300'; font-weight: bold; font-size: 42px; }
.process .process-text{ float: left; width: 80%; padding-top: 13px; }

.about-icons .icon{ font-size: 32px; margin-bottom: 44px; margin-top: 22px; color: #9a999a; width:80px; height: 80px; border-radius: 50%; border: 2px solid #9a999a; text-align: center; padding-top: 21px; background-color: #f9f9f9; position: relative; z-index: 2;}
.process-line{ width: 70%; height: 1px; border-top: 2px dashed #9a999a; position: relative; top: 62px; z-index: 1; margin: 0px auto; }

.team-member{ margin-top: 22px; transition: all .3s ease; -webkit-transition: all .3s ease; opacity: 1; position: relative; -webkit-backface-visibility: hidden; }
.team-member img{ position: relative; }
.team-focus{ opacity: 0.7;  }
.team-member .title{ padding: 11px 0px 11px 0px; border-top: 1px solid #aaa; border-bottom: 3px solid #aaa; margin: 11px 0px 11px 0px;  }
.team-member .title span{ font-family: 'dual300'; text-transform: uppercase; font-weight: bold; font-size: 12px; dislay: inline-block; margin-right: 11px;  }
.team-member .position{ font-family: 'dual300' !important; font-style: italic; font-weight: normal !important;  }

.team-social{ width: 50%; text-align: center; padding: 11px 0px 11px 0px; font-size: 30px; color: #fff; float: left; overflow: hidden; transition: all .3s ease; -webkit-backface-visibility: hidden; }
.facebook{ background-color: #3c5a99; }
.twitter{ background-color: #55acee; }
.dribbble{ background-color: #d9608e; }
.google-plus{ background-color: #cc5947; }

.story-icons .icon{ margin-right: 44px; }
.story-icons .icon:last-child{ margin-right: 0px; }

/***** SERVICES *****/

#services{ background-color: #ececec; position: relative; }
#services-bg{ background: url('../img/services-bg2.jpg') transparent; background-repeat: no-repeat; position: absolute;  right: 0px; top: 0px; height: 100%; width: 33.33333%; z-index: 2; background-size: cover; background-position: -450px, 0px; }
#services .columns{ position: relative; }

#services .page-title{ margin-bottom: 22px; }
#services .lead{ margin-bottom: 44px; }

.service{ overflow: hidden; width: 50%; padding-right: 15px; float: left; margin-bottom: 33px; }
.service h6{ font-size: 14px; color: #525252; margin-bottom: 11px; }
.service-icon{ width: 16%; float: left; font-size: 30px; color: #525252; }
.service-text{ width: 84%; float: left; }

/***** WORKS *****/
#works { background-color: #ffd200; overflow: hidden; padding-top: 100px; padding-bottom: 100px;}
.flex-caption { width: 100%; margin-top: 28%; position: absolute; left: 0; top: 0; color: #fff; font-size: 14px; text-align: center; font-weight: 700; font-size: 16px; letter-spacing: 0px;}

.works-content { width: 100%; }
.works-content-photo { width: 50%; float: left; cursor: pointer; }
.works-content-video { width: 50%; float: left; cursor: pointer; }
.works-slider-caption { font-weight: 700; color: #fff; position: absolute; text-align: center; z-index: 1000; width: inherit; }
.works-slider-caption img:hover { opacity: 0.7; filter: alpha(opacity=70); }

.works-category { width: 33.33333%; float: left; }
.works-category img { width: 100%; }

#works-category-content { background-color: #000; overflow: hidden; padding-top: 150px; padding-bottom: 100px;}

.photo-container.ajax-container { background-color: #fff !important; }


/***** WORK *****/

#work { overflow: hidden; }
#work .page-title{ margin-bottom: 22px; }

.filters{ margin-bottom: 121px; }
.filters li{ padding-bottom: 7px; border-bottom: 6px solid #fff; }

.projects-container{ overflow: hidden; }

.project{ z-index: 1; -webkit-backface-visibility: hidden; transition: all .3s ease; opacity: 1; overflow: hidden; }
.hide-project{ opacity: 0.2; }
.hide-project:hover{ cursor: default !important; }
.hide-project:hover .project-hover{ display: none !important; }
.project-hover{ position: absolute; height: 100%; width: 100%; background-color: rgba(255,255,255,0.5); opacity: 0; -webkit-transition: all .3s ease; z-index: 2; }
.project:hover .project-hover{ opacity: 1; }
.hover-inner{ position: absolute; width: 100%; height: 40%; bottom: -300px; background: #fff; padding: 15px; -webkit-transition: all .3s ease; text-align: center; }
.hover-inner h4{ margin-top: 17px; }
.project:hover .project-hover .hover-inner{ bottom: 0px; }

.ajax-container{ overflow: hidden; max-height: 0px; transition: all .5s ease; -moz-transition: all.5s ease; -webkit-transition: all .5s ease; z-index: 10000; }
.open-container{
	max-height: 10000px;
}
.ajax-container .page-title{ margin-bottom: 66px !important; }
.ajax-container .page-title h2{ margin-bottom: 6px; }
.project-slider .flex-control-nav{ bottom: -55px; }
.project-single h6{ margin-bottom: 11px; }
.project-single .btn{ margin-top: 22px; }
.project-single iframe{ width: 100%; height: 350px; }

.close-project{ font-size: 35px; margin-bottom: 44px; color: #bbb; overflow: hidden; cursor: pointer; }

/***** BLOG *****/

#blog{ background-color: #ececec; position: relative; }
#blog-bg{ background: url('../img/blog-bg.jpg') transparent; background-repeat: no-repeat; position: absolute;  left: 0px; top: 0px; height: 100%; width: 33.33333%; z-index: 2; background-size: cover; background-position: 0px, 0px; }
#blog .columns{ position: relative; }

#blog .page-title{ margin-bottom: 22px; }
#blog .lead{ margin-bottom: 44px; }

.blog-list{ list-style: none; }
.blog-list li{ border-bottom: 1px solid #ccc; margin-bottom: 22px; padding-bottom: 15px; overflow: hidden; }
.blog-list li:last-child{ border-bottom: none; margin-bottom: 44px; }
.blog-list li h3{ font-size: 14px; color: #5a555a; }
.blog-list li span{ font-size: 12px; display: inline-block; margin-right: 11px; }
.blog-list li a{ font-weight: bold; }

.blog-icon{ width: 10%; font-size: 36px; float: left; }
.blog-title{ width: 90%; float: left; }



/***** TESTIMONIALS *****/

#testimonials{ background: #f9f9f9; }

.testimonials-slider{ position: relative; }
.testimonials-slider p{ margin-bottom: 66px;}
.testimonials-slider .flex-control-nav{ top: 95px; }

.quote-author{ font-weight: 300; font-style: italic; font-size: 14px; }

/***** SOCIAL BAR ******/

.social-bar{ overflow: hidden; }

.social-link{ position: relative; font-size: 52px; color: #fff; padding: 22px 0px 22px 0px; float: left; overflow: hidden; transition: all .3s ease; -webkit-transition: all .3s ease; }
.social-link .icon{ position: relative; transition: all .3s ease; -webkit-transition: all .3s ease; bottom: 0px;  }
.social-link .link-hover{ position: absolute; bottom: -200px; width: 100%; transition: all .3s ease; -webkit-transition: all .3s ease; }
.social-link .link-hover h6{ font-size: 16px; }
.social-link:hover .icon{ bottom: 100px; }
.social-link:hover .link-hover{ bottom: 35px; }

/****** CLIENTS *****/

#client-slider img{ max-width: 120px; -webkit-backface-visibility: hidden; }
#clients{ padding: 55px 0px 00px 0px; }

#client-slider li{ text-align: center; }
.hero-screens{ margin-top: 99px; }

/***** CONTACT *****/

#contact{ background-color: #ffd200; padding-top: 100px; padding-bottom: 100px;}
#contact p { color: #fff !important; font-weight: 700; font-size: 17px; text-align: right; letter-spacing: 0px;}
#contact p img:hover { opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */ }
#contact img { text-align: left; }
#contact a { color: #fff !important; }
#contact p a:focus { color: #fff !important; }

/***** FOOTER *****/

#footer { background-color: #ffd200; padding: 66px 0px 66px 0px; }
#footer h6 { color: #fff; font-size: 12px; }
#footer h6 a:link { color: #fff; text-decoration: none; }
#footer h6 a:visited { color: #fff; text-decoration: none; }
#footer h6 a:hover { color: #fff; text-decoration: underline; }