﻿/*----------------------------------
	
	Theme Name: MaxOne
	Theme URI: http://webnus.net/maxone
	Description: SkyDream is a Modern multi-purpose HTML5-CSS3 one Page template with many different options, and is fully responsive.  
	Author: MaxOne
	Author URI: http://themeforest.net/user/WEBNUS
	Version: 1.0
	
	------------------------------------------------------------------------*/
	 
	 
	 @import url('scaffolding.css'); /* Import Portfolio Stylesheet */
 
	@import url('portfolio.css'); /* Import Portfolio Stylesheet */
 
	@import url('prettyPhoto.css'); /* Import prettyPhoto Stylesheet */
 
	@import url('flexslider.css'); /* Import Flex Slider Stylesheet */
	@import url('icomoon.css'); /* Import Vector Icons Stylesheet */
	
	/*-----------------------------------------------------------------------------------*/
	
	
	/* #Site Styles
	================================================== */
	/* WRAPPER */ 
	#wrap { display: block; margin: 0 auto; position: relative; padding: 0;}
	 
	
	 
	 /* General
	================================================== */
	#wrap > section { width: 100%; padding: 10px 0; }
	section#hero { margin-top: 0; background: #232628; padding: 0; border-bottom: 4px solid #e9e9e9; }
	.sub-h h1 { font-size: 30px; font-weight: 300; text-transform: uppercase; letter-spacing: 1.6px; }
	.nomargin-x { margin:0 !important;}
	.sub-h h1:first-letter { color: #1bbc9b; font-weight: 400; font-size: 35px; }
	.sub-h h5 { margin: 0 auto; margin-bottom: 80px; padding: 0 70px; font-size: 26em; line-height: 1.7; color: #797979; font-weight: normal; max-width: 660px; }
	.sub-h { text-align: center; margin-top:50px; }
	.brk-line { margin: 30px auto 0; width: 270px; height: 0; display: block; position: relative; border-bottom: 2px solid #1bbc9b; }
	.brk-line:before, .brk-line:after { width: 10px; height: 10px; display: block; content: ""; position: absolute; top: -6px; left: -12px; border: 2px solid #1bbc9b; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
	.brk-line:after { left: 270px; }
	.sub-h1 { margin-bottom: 12px; }
	.sub-h1 h5 { padding: 12px 0 5px; margin: 0px 0 10px 1px; border-bottom: 2px solid #9cd042;font-size: 26px; color: #333; font-weight: bold; }
	.bg-black .sub-h { margin-top: 0px; }
	.bg-black .sub-h h1 { color: #fff; }
	.bg-black .sub-h .bo-l, .bg-black .sub-h .bo-r { background: transparent; border-color: #fff; }
	.bg-black .sub-h h5 { color: #808080; }
	
	
	 
	
	
	
	/* Scroll to top */
	#scroll-top a { width: 16px; height: 16px; padding: 6px 8px 9px; border-radius: 4px; background: #818c90; position: fixed; bottom: 10px; right: 32px; display: none; opacity: 0.89; filter: alpha(opacity=89); z-index: 499841; }
	#scroll-top a i { font-size: 16px; color: #fff; }
	#scroll-top a:hover { background-color: #ffcc00; cursor: pointer; }
	

	
	 
	
	
	
	
	 
	
	  
	
	 
	
	
	/* our work
	================================================== */
	#wrap > section.our-work  a { text-decoration:none; }
	.proj-title-x h2 { font-size:28px;}
	
	#wrap > section.our-work { padding-bottom:0; }
	.project-view-wrap { display: none; }
	.project-view { margin-bottom: 0px; display: none; position: static; }
	.project-view h3 { text-align: center; font-weight: 300; margin: 20px 0; text-transform: uppercase; letter-spacing: 2px; margin: 10px 0 45px; padding-bottom: 20px; }
	.project-view .img-item-big { padding: 0; margin: 0 10px; margin-bottom: 0px; text-align: center; }
	.project-view .img-item-big img { margin: 0 auto; display: block; margin-bottom: 10px; border: 4px solid #fff; max-width: 100%; }
	.project-view .img-item-big .flexslider { max-width:800px; margin:0 auto;}
	.project-view .img-item-big .flexslider img { border:none;}
	.ctrl-bar { padding-bottom: 14px; margin: 20px auto 0px; display: block; clear: both; width: 172px; }
	.ctrl-bar i { display: inline; padding: 15px; border: 2px solid #656d78; color: #656d78; cursor: pointer; margin: 0 3px; }
	.ctrl-bar i.icomoon-arrow-left.disable, .ctrl-bar i.icomoon-arrow-right-2.disable { opacity: 0.3; cursor: default; }
	.ctrl-bar i.icomoon-close { display: inline; color: #fff; background: #ee3b16; border-color: #333; }
	.ctrl-bar i.icomoon-arrow-left:hover, .ctrl-bar i.icomoon-arrow-right-2:hover { color: #fff; background: #656d78; }
	.ctrl-bar i.icomoon-close:hover { background: #9cd042; border-color: #656d78; }
	.project-detail time { display: block; margin-bottom: 20px; }
	.project-detail p a:hover { color: #ffbf00; }
	.project-detail p, .project-detail time, .project-detail span { font-size: 13px; font-weight: 400; color: #666; }
	.tag-wrap span { float: left; width: 40px; height: 250px; }
	.tag a { display: inline-block; padding: 2px 7px; border: 2px solid #e9e9e9; margin: 0 5px 5px 0; font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: #888; }
	.tag a:hover { color: #ffbf00; border-color: #ffbf00; }
	.projects { width: 100%; }
	.ctrl-pro {   text-align:center; margin:0px auto 15px auto }
	.ctrl-pro a { display: inline-block; color: #000; padding: 4px 8px; margin: 5px 0px; font-size: 14px;background:#cfcfcf;
	 font-weight: 700; border: 2px solid #dbf5ff;-webkit-transition:all ease-in-out 500ms;-khtml-transition:all ease-in-out 500ms;
	-moz-transition:all ease-in-out 500ms;-ms-transition:all ease-in-out 500ms;-o-transition:all ease-in-out 500ms;
	transition:all ease-in-out 500ms;
	  }
	.ctrl-pro a:hover { color: #fff;background:#333; border-color: #dbf5ff; }
	.ctrl-pro .selected { color: #dbf5ff; border: 2px solid #dbf5ff; background:#333; }
	/* portfolio project */
	.project-description {
	border-bottom:5px double #9cd042;
	padding-bottom:0px;
	margin-bottom:20px;
	 }
	
	.projects .ctrl-bar { border: none; }
	.portfolio article { float: left; width: 24.9%; height: auto; position: relative; overflow: hidden; }
	.portfolio article figure { width: 100%; height: 100%; }
	.project-hov { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-align: center; background: #1bbc9b; background: rgba(27,188,155,.8); opacity: 0; z-index: 1; color: #fff; -webkit-transition: all .3s ease; ``  -moz-transition: all .3s ease;
	-ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
	.pad { padding: 14% 30px 0; }
	.project-hov i { font-size: 50px; cursor: pointer; }
	.project-hov span { display: block; font-size: 60px; margin-bottom: 15px; }
	.project-hov h3 { font-weight: 700; letter-spacing: -1.5px; margin-bottom: 15px; color: #fff; -webkit-transform: scale(1, 1.3); -moz-transform: scale(1, 1.3); -ms-transform: scale(1, 1.3); -o-transform: scale(1, 1.3); transform: scale(1, 1.3); }
	.portfolio article:hover .project-hov { opacity: 1; }
	.portfolio-page .ctrl-bar i { float: right; color: #1bbc9b; border-color: #1bbc9b; }
	.portfolio-page .ctrl-bar i.icomoon-arrow-left:hover, .portfolio-page .ctrl-bar i.icomoon-arrow-right-2:hover { background: #1bbc9b; }
	/* ISOTOPE */
	.isotope-item { z-index: 2; }
	.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }
	.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; }
	.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; }
	.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; }
	
	
	
	  
	 
	
	
	
	
	/* #Misc
	================================================== */
	
	 
	 

	
	/* #Media Queries
	================================================== */


	
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
	
	.ctrl-pro a { padding: 4px 9px; margin: 5px 0px; }
	.portfolio article { width: 374px; height: 280px; }
	.blog article { width: 100%; }
	.plan-wrap { width: 100%; }
	.sub-h h5 { padding: 0;font-size:18px; }
	.blog-content .post-img { margin-bottom: 20px; }
	.blog-expression { width: 100%; }
	.img-team { margin-top:40px }
	#main-content-pin .container { width: auto; }
	.blog-date-sec { width: auto; display:block; margin:0; text-align:left; background:#fdfdfd; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: none; border-bottom: 2px solid #e3e3e3; margin-bottom: 5px; }
	.blog-date-sec span, .blog-date-sec h3 { display: inline; margin: 0 10px; line-height: 50px; }
	.blog-date-sec span { font-size: 20px; font-weight: 300; }
	.blog-date-sec h3 { font-size: 32px;}
	.sidebar, .rgt-cntt, .sidebar.leftside { padding-right:0; background:none; padding-top:40px; margin-top:40px; border-top:5px solid #e5e5e5;}
	.rgt-cntt, .sidebar.leftside { padding-top:0px; margin-top:0px; border-top:0 none;}
	
	}
	
	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	.pad { padding-top: 8%; }
	.blog-line img { float: none; }
	#boxed-wrap { width: 828px; }
	#tline-content { width: 800px; }
	.tline-box { width: 335px; }
	#testimonials-slider li { width:750px;}	
	}
	
	
	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	#boxed-wrap { width: 460px; }
	.pin-box { width: 166px; width: 164px\9; }
	#tline-content { width: 460px; }
	.tline-box { width: 165px; }
	#testimonials-slider li { width:400px;}

	
	}
	
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	
	#header { height: auto; position: relative; }
	#headline { margin-top:0;}
	.sticky { position: absolute; }
	.logo { text-align: center; float:none; margin-bottom:15px; width:100%; }
	#nav { display: none; }
	.portfolio article { width: 100%; height: 300px; }
	.blog article { width:auto; height:auto; float:none; }
	.plan-wrap article { width: 50%; }
	.twitter h3 { padding: 0; }
	.blog-post figure img { width: 100%; height: 100%; }
	.post-img { width:100%; float:none; clear:both; margin:0; margin-bottom:30px;}
	.post-img figure { width:auto; height:auto; float:none; clear:both;}
	.project-view .img-item-big img { border:none; margin-bottom:-0px;}
	.proj-title-x h2 { font-size:28px;}
	.ctrl-pro { padding:0 30px;}
	.icon-box1 { text-align:center;}
	.icon-box1 i { display:inline-block; float:none; margin:20px 0; }
	
	
	input[type="text"].header-saerch, input[type="text"].header-saerch:focus { width: 261px; margin-top: 10px; }
	.pin-box { width: 256px; }
	
	.tline-box .blog-date-sp { width: 80%; }
	.tline-box .blog-com-sp { width: 0; display: none; }
	.tabs-left > .nav-tabs, .tabs-left > .nav-tabs > li > a, .nav-tabs > li, .nav-tabs > li.active, .tabs-left > .nav-tabs > li.active > a, .tabs-left > .nav-tabs .active > a:hover { width:100%; display:block; padding-left:0; padding-right:0; }
	.tabs-left > .nav-tabs > li > a { border-right:0 none;}
	.tabs-left > .tab-content { border:0 none;}
	.tab-content .columns, .tab-content .column { margin:0 10px; max-width:90%; }
	
	.container hr { margin-left:0; margin-right:0;}
	.blog-post { border-bottom-width:3px;}
	.author-detail { margin: 20px 0; }
	
	.pad-r10, .pad-r20, .pad-r30, .pad-r40, .pad-l10, .pad-l20, .pad-l30, .pad-l40 { padding: 0; }
	.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth { width: 100%; float: none; margin-right: 0; }
	
	

	.date-sp-wrap { margin: 0; float: right; margin-bottom: 7px; }
	.blog-line .blog-date-sec { height: auto; }
	.v-shadow-r, .v-shadow-l { min-height: inherit; background: none; }
	.pad-r10, .pad-r20, .pad-r30, .pad-r40, .pad-l10, .pad-l20, .pad-l30, .pad-l40 { padding: 0; }
	.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth { width: 100%; float: none; margin-right: 0; }
	.latest-f-blog, .qot-week { margin:0;}
	.callout { margin:10px 0px 20px; }
	.brdr-l1, brdr-r1 { padding:0; border:0 none; }
	.brdr-l1 { margin-top:30px;}
	.tab-content p, .tab-content li { font-size: 12px; }
	}
	

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
	
	#boxed-wrap { width: 340px; }
	.ctrl-pro { text-align: left; }
	.ctrl-pro a { border-color: #eee; }
	.pad { padding-top: 2%; }
	.post-img { margin-bottom: 20px; }
	.plan-wrap article { width: 100%; }
	.commentin { width: 92%; }	
	#tline-content { width: 300px; }
	.tline-box { width: 250px; }
	.tline-row-l, .tline-row-r { display: none }
	.tline-box.rgtline { float: left; left: 0; }
	#testimonials-slider li { width:280px;}
	.quote-slider .testimonial-content h4 q { font-size:19px;}
	}
	
	
	@media only screen and (min-width: 1200px) {	
	
	 #boxed-wrap { width:1180px;}
	 .white-space { height:110px;}
	  h4.subtitle { margin:39px 0 21px 0; }
	 #main-content-pin .container { padding:0 40px; }
	 .sidebar.leftside { background-position: 295px; padding-right:70px; }
	 .blog-date-sec h3 { font-size:36px;}
	
	 } 
	
	
	/* ---------------------
