/*
Theme Name: Port
Theme URI: http://themetrust.com/port
Description: A sleek and stylish agency theme
Version: 1.1.1-wpcom
Author: ThemeTrust
Text Domain: port
Author URI: http://themetrust.com
Tags: custom-colors, art, portfolio, blog, fashion, lifestream, travel, bright, clean, elegant, light, minimal, modern, one-column, custom-background, custom-header, editor-style, rtl-language-support, sticky-post, artwork, journal, photoblogging, design, simple, sophisticated, contemporary, featured-images, infinite-scroll, flexible-header, fluid-layout, responsive-layout, theme-options, white, two-columns, threaded-comments, translation-ready, custom-menu
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html

TABLE OF CONTENTS

00 - Colors and Fonts
01 - Reset
02 - Global
03 - General Layout
04 - Header
05 - Architecture
06 - Fiction
07 - Advertising
08 - Footer
09 - Media Queries
*/

/* /////////////////////////////////////////////////////////////////////
//  00 - Colors and Fonts
/////////////////////////////////////////////////////////////////////*/

/* Fonts */

body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}


/* /////////////////////////////////////////////////////////////////////
//  01 - Reset
/////////////////////////////////////////////////////////////////////*/

/**

 HTML5 & 4 reset stylesheet
 Adapted from YUI & HTML5 Doctor
 v1.0

**/


html,body,div,span,h1,h2,h3,h4,h5,h6,p,header,footer {
    margin:0;
    padding:0;
    border:0;
    font-weight:inherit;
    font-style:inherit;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

html {
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    -webkit-text-size-adjust:none;
        -ms-text-size-adjust:none;
	overflow-y: scroll;
}

header, footer {
    display:block;
}

a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}


/* /////////////////////////////////////////////////////////////////////
//  02 - Global
/////////////////////////////////////////////////////////////////////*/

html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

body {
	font-size: 100%;
	width: 100%;
	height: 100%;
	margin: 0;
	color: #484848;
	background: #f1f0f0;
}

p {
	line-height: 1.7em;
	font-size: 1em;
	margin: 0 0 20px 0;
}

a {
	text-decoration: none;
	outline: none;
	color: #ffffff;
	opacity: 0.8;
	
	transition-property: color;
	
	-webkit-transition:.5s;
	   -moz-transition:.5s;
	    -ms-transition:.5s;
	     -o-transition:.5s;
	        transition:.5s;
}

a:hover {
	color: #ffffff;
	opacity: 1.0;
}

a img {
	border:none;
}

h1, h2, h3, h4, h5, h6{
	margin: 0 0 15px 0;
	color: #1f1f1f;
}

h1 {font-size: 2.5em;}
h2 {font-size: 2.2em;}
h3 {font-size: 1.9em;}
h4 {font-size: 1.6em;}
h5 {font-size: 1.3em;}


/* //////////////////////////////////////////////////////////////////////
//  03 - General Layout
//////////////////////////////////////////////////////////////////////*/

#container {
	width: 100%;
	margin: 0 auto;
	background: #fff;
}

#footer {
	width: 100%;
	margin: 0 auto;
}


/*////////////////////////////////////////////////////////////////////////
//  04 - Header
///////////////////////////////////////////////////////////////////////*/

#header {
	position: relative;
	margin: 0 0 0 0!important;
	padding: 0 0 0 0;
	width: 100%;
    min-height: 100%;
	height: 100% !important;
	text-align: center;
}

#header .bottom {
	width: 100%;
	background-color: #000;
    min-height:100%
	height: 100% !important;
}


/* Banner ------------------*/

#home-banner {
	width: 100%;
	margin: 0 !important;
	background: #000;
}

#home-banner #banner-text {
	display: inline-block;
	margin: 0 30px;
	padding: 25% 50px;
	background: rgba(0,0,0,0.4);
	min-height: 100% !important;
	text-align: center;
}

#home-banner #banner-text .main h2{
	color: #fff;
	font-size: 3.0rem;
	margin-bottom: 30px !important;
	line-height: 1em;
}

#home-banner #banner-text .secondary {
	display: block;
	font-size: 1.5rem;
	color: rgba(255,255,255,.5);
	margin: 0;
	line-height: 1rem !important;
}

#home-banner #banner-text .secondary a {
	margin: 0 16px;
	line-height: 1rem !important;
	margin-bottom: 40px;
}

#home-banner #banner-text .secondary a .fa{
	font-size: 1.5rem;
}

#home-banner #banner-text .button {
	font-size: 0.6rem;
}

#down-button {
	position: absolute;
	display: inline-block;
	color: #ffffff;
	margin: 0 auto;
	width: 50px;
	left: 0;
	right: 0;
	bottom: 30px;
	font-size: 3.0em;
	line-height: 50px;
	z-index: 99;
	text-align: center !important;
	cursor: pointer;
	opacity: 0.7;
	
	-webkit-transition:0.5s;
	   -moz-transition:0.5s;
	    -ms-transition:0.5s;
	     -o-transition:0.5s;
	        transition:0.5s;
}

#down-button:hover {
	opacity: 1;
}

/*////////////////////////////////////////////////////////////////////
//  05 - Architecture
////////////////////////////////////////////////////////////////////*/

#architecture {
	width: 100%;
}

#architecture .wrapper {
	max-width: 1000px;
	display: block;
	margin: 0 auto;
	padding-top: 80px;
	padding-bottom: 100px;
	text-align: center;
}

#architecture h2 {
	padding-bottom: 20px;
}

#architecture p {
	margin-top: 20px;
	margin-bottom: 0px;
	font-size: 0.9rem;
}

#architecture img {
	max-width: 100%;
}

#architecture .size-half {
	max-width: 49.7%;
	display: inline-block;
}

#architecture .pad-left,
#architecture .pad-right {
	max-width: 47.7%;
	display: inline-block;
}

#architecture .pad-left {
	padding-left: 20px;
}

#architecture .pad-right {
	padding-right: 20px;
}



/*////////////////////////////////////////////////////////////////////
//  06 - Fiction
////////////////////////////////////////////////////////////////////*/

#fiction {
	width: 100%;
	background: #202020;
	color: #949494;
}

#fiction .wrapper {
	max-width: 1000px;
	display: block;
	margin: 0 auto;
	padding-top: 80px;
	padding-bottom: 100px;
	text-align: center;
}

#fiction h2 {
	padding-bottom: 20px;
	color: #949494;
}

#fiction p {
	margin-top: 20px;
	margin-bottom: 0px;
	font-size: 0.9rem;
}

#fiction img {
	max-width: 100%;
}

#fiction .size-half {
	max-width: 49.7%;
	display: inline-block;
}

#fiction .pad-left {
	max-width: 28%;
	display: inline-block;
	padding-left: 20px;
}

#fiction .pad-right {
	max-width: 67%;
	display: inline-block;
	padding-right: 20px;
}



/*////////////////////////////////////////////////////////////////////
//  05 - Advertising
////////////////////////////////////////////////////////////////////*/

#advertising {
	width: 100%;
}

#advertising .wrapper {
	max-width: 1000px;
	display: block;
	margin: 0 auto;
	padding-top: 80px;
	padding-bottom: 100px;
	text-align: center;
}

#advertising h2 {
	padding-bottom: 20px;
}

#advertising p {
	margin-top: 20px;
	margin-bottom: 0px;
	font-size: 0.9rem;
}

#advertising img {
	max-width: 100%;
}

#advertising .size-half {
	max-width: 49.7%;
	display: inline-block;
}

#advertising .size-third {
	max-width: 33.0%;
	display: inline-block;
}

#advertising .pad-left,
#advertising .pad-right {
	max-width: 47.7%;
	display: inline-block;
}

#advertising .pad-left {
	padding-left: 20px;
}

#advertising .pad-right {
	padding-right: 20px;
}



/*////////////////////////////////////////////////////////////////////
//  08 - Footer
////////////////////////////////////////////////////////////////////*/

#footer {
	position: relative;
	background: #202020;
	color: #949494;
	margin: 0 auto;
	padding: 60px 0;
	z-index: 301;
}

#footer .secondary {
	margin: 0;
	padding: 0 30px 10px;
}

#footer .secondary a{
	font-weight: normal;
}

#footer .secondary .inside{
	padding: 30px 0 0;
	margin: 0 auto;
	max-width: 800px;
}

#footer .secondary p{
	font-size: 0.9em;
}

#footer .secondary .left {
	float: left;
}

#footer span.footer-text {
	margin-right: 7px;
}

#footer .secondary .right {
	text-align: right;
	float: right;
}

#footer .secondary .right span{
	padding: 0 5px;
	color: #4d4d4d;
}

#footer .fa, .widget-box .fa {
	font-size: 2em;
	font-weight: normal !important;
	margin-right: 12px;
	margin-bottom: 12px;
}

#footer a {
	color: #868485;
}

#footer a:hover {
	color: #2c2c2c;
}

#footer a.fa {
	color: #8e8d8d;
}

#footer a.fa:hover {
	color: #2c2c2c;
}


/*////////////////////////////////////////////////////////////////////
//  09 - Media Queries
////////////////////////////////////////////////////////////////////*/

/* iPads */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

	#down-button {
		bottom: 30px;
	}

	body .home-section {
		padding: 50px 0 !important;
	}

	/*Projects ------------------*/
	#content .project.small .title {
		font-size: .8em;
	}

	/*Footer ------------------*/
	.footer-box {
		width: 29%;
		margin: 0 25px 40px 0 !important;
	}
}

@media only screen and (max-width: 820px) {

	#comments { width: 100%;}

	#sidebar {
		float: none;
		width: 100% !important;
		margin-left: 0;
		padding: 10px 0 0 0 !important;
	}

	#content {
		width: 100% !important;
		float: none;
	}

	#sidebar .sidebar-box {
		float: left;
		margin: 0 3% 30px 0 !important;
		width: 30%;
	}

	#comments { width: 100%;}
}

/*layouts smaller than 700px, iPhone and mobiles*/

@media only screen and (max-width: 700px) {
	html {
	    -webkit-text-size-adjust: none;
	}

	h1 { font-size: 1.7em;}
	h2 { font-size: 1.5em;}
	h3 { font-size: 1.4em;}
	h4 { font-size: 1em;}
	h5 { font-size: .8em;}

	#wrap {
		padding: 1px 20px;
	}

	.home #wrap {
		padding-top: 0 !important;
	}

	#page-head {
		margin-bottom: 25px;
	}

	#page-head .inside{
		padding: 25px 0;
		margin-bottom: 0;
	}
	#page-head h1 {
		font-size: 1.3em;
	}
	/*Header ------------------*/

	#header .inside {
		padding: 15px 20px 15px 0px !important;
	}

	#header .top { position: relative; }

	#header #logo {
		margin-left: 20px !important;
	}

	#header #logo img{
		max-height: 20px;
		height: auto;
	}

	.menu-toggle {
		right: 20px;
	}

	#pageslide { width: 200px !important; }

	.admin-bar #header .top {
		top: 0;
	}

	/*Home Banner ----------*/

	#header #home-banner #banner-text .main h2{
		font-size: 2.1em;
		margin-top: -100px !important;
	}

	#header #home-banner #banner-text .secondary {
		font-size: 1.2em;
		line-height: 1em;
	}

	#down-button {
		bottom: 10px;
		font-size: 1.6em;
	}



	/*Footer------------------*/
	.footer-box {
		width: 40%;
		float: none;
		margin: 0 20px 40px 0!important;
	}

	#footer .main .inside{ padding: 0 0 !important;  width: auto !important;margin: 0 0px!important;}

	#footer #flickr-box .flickr-image {
		margin: 0 5px 5px 0;
	}

	#footer .secondary{
		text-align: center;
		margin: 0 0;
	}
	#footer .secondary p{
		margin: 0px;
		padding: 0px;
	}

	#footer .secondary .left,
	#footer .secondary .right{
		float: none;
	}

	#footer .secondary .right{
		float: none;
		padding: 10px 0 15px 0;
		text-align: center;
	}

	.gallery-item img{
		width: 90%;
	}

	/*Column Shortcodes------------------*/

	.one_half{ width:100%; }
	.one_third{ width:100%; }
	.two_third{ width:100%; }
	.one_half,.one_third,.two_third{ position:relative; margin-right:0%; float:none; }
	.last{ margin-right:0 !important; clear:right; }
	.clearboth {clear:both;display:block;font-size:0;height:0;line-height:0;width:100%;}
}

/* iPhone Landscape */
@media screen and (max-width: 600px) {
	.slides .jetpack-testimonial {
		width: auto;
		height: 300px;
	}
}

/* iPhone Portrait */
@media screen and (max-width: 480px) {

	#header #logo img {
		max-width: 300px;
	}

	.home .flex-caption p {
		font-size: 1em !important;
	}
}