﻿/*
	Theme Name: Cotton
	Theme URI: http://demo.digitalcookers.net/
	Description: Responsive One Page Theme
	Version: 1.0
	Author: digitalcookers™ (@digitalcookers)
	Author URI: http://digitalcookers.net
	Tags: Portfolio, One Page, Corporate
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
}
a {
	color:#444;
	text-decoration:none;
}
a:hover {
	color:#444;
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/* wrapper */
.wrapper {
	max-width:1280px;
	width:95%;
	margin:0 auto;
	position:relative;
}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#f4594e;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#f4594e;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#f4594e;
	color:#FFF;
	text-shadow:none;
}
   
/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/
   
.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}
.sticky {
	
}
.bypostauthor {
	
}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}

/* Theme specific styles */

/* ==========================================================================
   General Styles
   ========================================================================== */

html,body,#page{width: 100%;height: 100%;margin: 0px;padding: 0px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html{-webkit-font-smoothing: antialiased;}
body {background: #f2f2f2; font-family: 'Cabin','Helvetica Neue';line-height: 1.2em; overflow-x: hidden;}   
h1,h2,h3,h4,h5,h6{color: #f4594e;letter-spacing: -0.03em;font-weight: bold; font-weight: 900; font-family: 'Merriweather', Times, serif;}

a{color: #4a4a4a;}
a:hover{color: #f4594e; text-decoration: none;}
a{transition: color .3s ease-out;-moz-transition: color .3s ease-out;-webkit-transition: color .3s ease-out;-o-transition: color .3s ease-out;}
p{color: #4a4a4a;font-size: 1.125em;line-height: 1.5625em;}
select{color: white;padding: 0 1em; height: 2.4em;outline: none;border: 0;border-radius: 0 !important;background: url('./img/arrow-down.png') no-repeat right 0.8em #f4594e;-webkit-appearance: none;}
time{color:#f4594e;}
hr{border-color: #cccccc}
img{width:100%;}

.scroll.header{color:white !important;}

/* ==========================================================================
   Helpers
   ========================================================================== */

.text-right{text-align: right;}
.intro{margin-bottom: 1.125em;text-align: center;}
.fixed{position:fixed;top:-60px;}
.smooth,.smooth img{-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}

.center-list ul{position: relative;left: 50%;display: block;float: left;overflow:visible;}
.center-list ul li {position: relative;right: 50%;float: left;}

/*class to center lists, use this*/
.centerUl{text-align:center;padding:0;margin: 0 auto;}
/*distance between icons*/
.centerUl li{ display: inline;text-align: center; margin:0 5px;}

.align-horizontal{width: 100%; height: 100%; display: table;}
.align-vertical{display: table-cell; vertical-align: middle;}

/* ==========================================================================
   Header Styles
   ========================================================================== */


.no-touch #header{-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-attachment: fixed;}
.home #header{display:block;}

#logo{display:none;}
#logo img{width:100px;}
   
/* Intro Styles */
   
#intro{text-align: center; margin-top: 150px;}  
#caption{margin-top: .25em;margin-bottom: 0;color: white;font-size: 1.875em;opacity:0;  background-color: rgba(255,255,255, .8) }
#sub-caption{margin-bottom: 0;font-size: 1.5em;opacity:0;padding-top: .25em;  background-color: rgba(255,255,255, .8)}
#intro p{color:white;}

#explore {opacity:0;margin-top: 0em;}
#explore a {text-decoration: none;}
#explore a i{font-size:6em;margin:0 auto; color:white; cursor:pointer; color:white;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.touch #explore a i:hover,.no-touch #explore a i:hover{color:#f4594e;}

/* ==========================================================================
   Navigation Styles
   ========================================================================== */

#top-bar {position:fixed;top:-75px;z-index: 999;width:100%;height:auto;background-color:#1a1a1a;}
#top-navigation ul{display:none;font-size: 1em;margin-top: 0.7em; text-transform: lowercase;}
#top-navigation li{width:100%; margin-bottom: 1em; }
#top-navigation li a{text-decoration:none;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
#top-navigation li:not(active) a{color:#fff;}
#top-navigation li.active a, #top-navigation li:hover a{color:#f4594e;}

#logo-lettering{padding: 0.425em 0;}
#logo-lettering img{height: 3.125em;width:auto;}

#menu-mobile i{position:absolute;top:0.5em;right:0.6em; color: white; cursor:pointer;}
#menu-mobile:hover i,#menu-mobile.active i{color:#f4594e;}

/* ==========================================================================
   All Section Styles
   ========================================================================== */
   
.sections{padding-top: 2.125em;padding-bottom: 1.875em;text-align: center; overflow-x: hidden;}
.sections h1,.intro p{margin-bottom: 0; } 

.sections .row-layout{margin-bottom: 0em;}
.sections .row-layout:last-of-type{margin-bottom: 0;}
 
/* ==========================================================================
   Team Styles
   ========================================================================== */

.member{margin-bottom: 2em;min-height: 230px;}
.member:last-child{margin-bottom: 0em;}
.member h5{margin-top: 1em;margin-bottom: 0;font-size: 1.125em;}
.member p{margin-bottom: 0;font-size: 0.75em;}

.member-photo{position:relative; overflow: hidden; margin-bottom: 1.8em;}
.member-photo img{display:block;margin: 0 auto;}

.member-hover{position: absolute;top: 0;right: 0;width: 100%;height: 100%;background-color: rgb(244,89,78);background-color: rgba(244,89,78,0);-webkit-transition: background-color 0.4s ease-in-out;-moz-transition: background-color 0.4s ease-in-out;-o-transition: background-color 0.4s ease-in-out;transition: background-color 0.4s ease-in-out;}

/* Social List */

.member .list-container{position:relative;display:table;margin:0 auto;height:100%;opacity:0;-webkit-transition: opacity 0.4s ease-in-out;-moz-transition: opacity 0.4s ease-in-out;-o-transition: opacity 0.4s ease-in-out;transition: opacity 0.4s ease-in-out;}
ul.social{display:table-cell;margin: 0;padding: 0;vertical-align:middle;text-align:center;}
ul.social li{display:inline-block;margin:0 0.5em;margin-left: 0;}
ul.social li a{text-decoration: none;}
ul.social li a i{color: black;display: inline-block;}
ul.social li a:hover i{color:white;}


.image-hover{display:none;}

/* Adjusts for Mobile Version - social icons outside hover */
.member .list-container.visible-xs{opacity:1; margin-top: 0.5em;}
.member .list-container.visible-xs .list-inline{margin:0 auto;}
.member .list-container.visible-xs ul li a{color: black; margin-top: 3em; text-decoration: none;}


/* Animations */
.member-photo:hover .member-hover{background-color: rgba(244,89,78,0.5);}
.member-photo:hover .list-container{opacity:0.9;}

/* Team Images Change Hover */
.member-photo:hover .image{display:none;}
.member-photo:hover .image-hover{display:inherit;}

/* ==========================================================================
   Studio Styles
   ========================================================================== */
.sections#studio{padding-bottom: 0;overflow:hidden;}
#studio, #contacts{background:#f2f2f2;}	

/* Swiper - Mobile Touch Slider CSS 
   http://www.idangero.us/sliders/swiper 
*/

/* Swiper Styles */
.swiper-container {position:relative;z-index:1;overflow:hidden;margin:0 auto;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;z-index:1;}
.swiper-wrapper {position:relative;width:100%;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;-ms-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-duration:0s;-moz-transition-duration:0s;-ms-transition-duration:0s;-o-transition-duration:0s;transition-duration:0s;-webkit-transition-property:-webkit-transform, left, top;-moz-transition-property:-moz-transform, left, top;-ms-transition-property:-ms-transform, left, top;-o-transition-property:-o-transform, left, top;transition-property:transform, left, top;-webkit-transform:translate3d(0px,0,0);-moz-transform:translate3d(0px,0,0);-ms-transform:translate3d(0px,0,0);-o-transform:translate3d(0px,0,0);-o-transform:translate(0px,0px);transform:translate3d(0px,0,0);}
.swiper-free-mode > .swiper-wrapper {-webkit-transition-timing-function: ease-out;-moz-transition-timing-function: ease-out;-ms-transition-timing-function: ease-out;-o-transition-timing-function: ease-out;transition-timing-function: ease-out;margin: 0 auto;}
.swiper-slide {float: left;}
.swiper-slide img{width: 100%;}
.home .swiper-slide:not(.swiper-slide-active) img,.single-post .swiper-slide:not(.swiper-slide-active) img{-webkit-filter: grayscale(100%);filter: url("data:image/svg+xml;filter: gray;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {-ms-touch-action: pan-y;}
.swiper-wp8-vertical {-ms-touch-action: pan-x;}

/* Specify Swiper's Size: */
.swiper-container, .swiper-slide {width: 100%;}
.swiper-container{overflow: visible;margin: 0 auto;max-width: 800px; height: auto;}

/* ==========================================================================
   Services Styles
   ========================================================================== */
   
.service{padding:10px 0;color:#999;text-align: center;cursor:pointer;}
.service h5{margin-bottom: 0;margin-bottom: 0.5em;color:#999;font-size: 1.3125em;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.service p{padding:0 1em;font-size: 1em;line-height:1.2em;}
.service img{margin-top:0;width: 100%;height: auto;max-height: 100px;}
.service:not(active) img{opacity:0.5;}
.service:hover img, .service.active img{opacity:1;}

.skills-bar {display:none;padding:0; margin-top:2em;list-style: none;}
.skills-bar li {position:relative;margin-bottom: 30px;height: 40px;background: #333;}
.skills-bar li:last-child {margin-bottom: 0px;}
.skills-bar li em {position: absolute;left: 24px;top: 12px;color:white;font-weight: bold;}
.expand {position: absolute;left: 0;height: 40px;background: #f4594e;}

/* Animations */
.service:hover, .service.active{color: #1a1a1a;}
.service:hover h5, .service.active h5{color: #f4594e;}

/* ==========================================================================
   Work Styles
   ========================================================================== */
   
#works{padding-bottom: 3.25em;background-color:#f2f2f2;overflow-x: hidden;}
#works .intro{margin-bottom:1.5em;}
#w-filter.row select.visible-xs{width:100%;}

.work {position:relative;overflow:hidden; margin-bottom: 1.5em;cursor:pointer;}
.work img{position: relative; width:100%;top:0;-webkit-transition: top 0.3s ease-in-out;-moz-transition: top 0.3s ease-in-out;-o-transition: top 0.3s ease-in-out;transition: top 0.3s ease-in-out; display:block;-webkit-filter: grayscale(100%);filter: url("data:image/svg+xml;filter: gray;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");}

.work-filter{margin:0;margin-bottom: 0.5em;font-weight: bold;font-size: 1.3125em;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.work-filter li{cursor:pointer;}
.work-filter li.active, .work-filter li:hover{color:#f4594e;}
.work-filter ul {margin-bottom:2em;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
#works select{margin-bottom: 2em;}

.work-info{text-align:center;position:absolute;bottom:-15%;width:100%;height:15%;background-color: white;-webkit-transition: bottom 0.3s ease-in-out;-moz-transition: bottom 0.3s ease-in-out;-o-transition: bottom 0.3s ease-in-out;transition: bottom 0.3s ease-in-out;}
.work-info h3{font-size:18px; margin-top:11px;}


.no-touch .work:hover img, .touch .work img{top: -2.5em;-webkit-filter: grayscale(0%);filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");}
.no-touch .work:hover .work-info, .touch .work .work-info{bottom:0;}

/* MixUp Filtering */
.work-container .mix{display: none;opacity: 0;}
.work-container [class*="column"] + [class*="column"]:last-child {float: left;}

/* ==========================================================================
   Feed Styles
   ========================================================================== */

#feed{background-color:white; text-align: center;padding-bottom: 0;}
#feed .row{max-width: none;}
#feed .intro, #feed .intro h2{margin-bottom: 0;}

.social-feed{margin:0 0 3em 0;}
.social-feed li{cursor:pointer;}
.social-feed li i{display: inline-block;}

.button-feed.active i{text-decoration:none;color:#f4594e;}
.button-feed:not(.active) i{text-decoration:none;color:black; opacity:0.5;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.button-feed:hover i{text-decoration:none;color:#f4594e; opacity: 1;}

#twitter{position: relative; overflow-y: hidden;height: 22em;}
#flickr, #instagram, #twitter{display:none;overflow:hidden; margin-right: 0;
margin-left: 0;}

#flickr.active, #instagram.active, #twitter.active{display:inherit}

#twitter ul.tweetList {position: absolute;}
#twitter ul.tweetList li {list-style:none;height: 10em;font-size: 1.25em;}
#twitter ul.tweetList li p{font-size: 1em;}
#tweet_loader,.tweet_link{font-size: 2em;text-align: center; color:#f4594e;}
.tweet_link{font-size: 1.5em !important;}
#loading{color:#f4594e;}

#instagram li{list-style: none;}
#flickr .col-xs-3, #flickr .col-sm-2, #instagram .col-xs-6.col-sm-4.col-md-2 {margin: 0;padding: 0;}
#flickr img, #instagram img{position:relative;display:block;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;width: 100%;-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 3px rgba(0,0,0,.2);box-shadow: 0 1px 3px rgba(0,0,0,.2);-webkit-filter: grayscale(100%);filter: url("data:image/svg+xml;filter: gray;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");}
#flickr img:hover, #instagram img:hover{opacity: 0.8;filter: alpha(opacity=80);-webkit-filter: grayscale(0%);filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");}

.instagram-placeholder,.flickr-photo{margin-bottom: 1em;}

/* ==========================================================================
   Blog Styles
   ========================================================================== */

/* Featured Posts */

#featured-posts-container .featured-post{margin-bottom: 3em}
#featured-posts-container .featured-post:last-of-type{margin-bottom: 0;}
.featured-post img{opacity: 1;}

.featured-post-info{padding: 1.5em;background-color: #f2f2f2;margin-bottom: 30px;}
.featured-post-info h2{margin-top: 0;color:#2a2a2a;}
.featured-post-info hr {/*width: 25%; */ margin: 1.5em auto;padding: 0;border-top: 1px dashed #9a9a9a;}
.featured-post-info p:first-of-type{margin-bottom: 0;}

.featured-post-audio .jp-audio{height: 0px;}

.featured-post-gallery{overflow: hidden;}
.featured-post-gallery .swiper-slide:not(.swiper-slide-active) img{-webkit-filter: inherit;filter:inherit;}

.featured-post-link #link-header{height: 202px;}
.featured-post-link #link-header a{font-size: 22px;}

.view-posts{border-radius: 0; margin-top: 2em; background-color: #4a4a4a;text-transform: uppercase;}
.view-posts:hover{background-color: #f4594e}
.view-posts a{color: white; text-decoration: none;}

/* Single Post */ 

.post-section{background:#fff;}

#post-header{max-height: 450px; overflow: hidden;}
#post-header img{width:100%}

.post{margin: 2em 0px 2.5em 0px;}
.single-post .post a.post-edit-link{text-align: center;display: block;}
.single-post .post span{font-size: 14px; display: block;color: #4a4a4a; text-align: center;}
.single-post .post span:first-of-type{margin-bottom: 0.4em;}
.single-post .post h1, .single-post .post h2, .single-post .post h3, .single-post .post h4, .single-post .post h5, .single-post .post h6{font-family: 'Lora', 'Georgia', serif;color: #4a4a4a;margin-bottom: 20px;}
.single-post .post h1.post-title{font-size: 30px; font-family: 'Merriweather', serif; text-align: center; color: #2a2a2a;}
.single-post .post p{font-family: 'Lora', 'Georgia', serif; font-size: 18px; margin-bottom: 20px;color: #4a4a4a; line-height:1.5;}
.single-post .post hr {/*width: 25%; */ margin: 1.5em auto;padding: 0;border-top: 1px dashed #9a9a9a;}
.single-post blockquote p:last-of-type{margin-bottom: 0;}
.single-post .format-standard img{margin-bottom: 4em;}

#footer p{font-size:12px}

#post-details{margin-bottom: 4em;}

#video-header, #link-header{background: #2a2a2a;}
#link-header.background-image{background: rgba(42,42,42,0.6)}

.video-container{max-width: 900px;margin: 0 auto;}

#link-header{text-align: center; position: relative; overflow:hidden;}
#link-header img{position:absolute;top:0;left:0; z-index: -1;}
#link-header a{color:white;}
#link-header a:hover{color: #f4594e}

#gallery-header{overflow: hidden;}

.single-post #link-header{height:200px;}
.single-post #link-header a{font-size: 40px;}

/* Comment */

#comments{background: #f2f2f2;}
.comments ul{list-style: none;}
.comments-list{padding: 50px 0;}
.comment-author{font-size: 1.4em;font-weight: 600; margin-bottom: 0.4em;margin-top: 0.3em;}
.comment-meta{margin-bottom: 1em;}
.comment-reply-link{margin-right: 0.4em;}
.comment,.comment-body{margin-bottom: 2em;}
.comment:last-child, .comment-body:last-child{margin-bottom: 0;}
.comment-body p{font-size: 18px;}
.comment-awaiting-moderation{color: #FF6666; font-weight: bold;}

.comment-icons{position: absolute;top: 0;right: 15px;}

#reply-title{color: #4a4a4a;}
#commentform{margin-bottom: 2em;}

#cancel-comment-reply-link{float: left;padding-top: 0.5em;}
#commentform input[type="text"], #commentform textarea{background-color: #f2f2f2;}
#comments #commentform input[type="text"], #comments #commentform textarea{background-color:white;}
#comments #respond{margin-top: 3em;}
#submit{background-color: #4a4a4a; border: 0; color: white; font-family: 'Cabin', serif; padding: 10px;width: 100%;border-radius: 0;text-transform: uppercase;}
#submit:hover{background-color: #f4594e;}

#show-comments{padding-top: 0.5em;display: block;text-align: center;}
#show-comments.active a{color: #f4594e}
#previous-post{float:left;}
#next-post{float:right;}
#make-comment{display:none;}
#make-comment hr{margin-bottom: 2.5em;}

/* OffCanvas Navigation */

#page{left:0px; position:absolute;}
#page.move{position:absolute; left:250px;}

.page .show-offcanvas, .search .show-offcanvas, .category .show-offcanvas, .single-post .show-offcanvas, .archive .show-offcanvas, .single-portfolio #project-top-bar .show-offcanvas{display: block;}

.show-offcanvas{position: fixed; top:1.3em;display:none;left: 1.3em; z-index: 99999 !important; cursor: pointer;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out; z-index:999;}
.show-offcanvas i{color: #666666;}
.show-offcanvas .icon-remove, .show-offcanvas.active .icon-reorder{display:none;}
.show-offcanvas.active .icon-remove{display:block;}

.single-portfolio .show-offcanvas{top:0.8em;}
.single-portfolio #project-top-bar .show-offcanvas{position:inherit;top:inherit;left:inherit;text-align: center; margin-top: 0.2em;}

#offcanvas-navigation {color:#666666;width: 250px; z-index: 9999; overflow: hidden;position: fixed;top: 0;left: -250px;height: 100%; background-color: #0c0c0c; padding:70px 20px; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
#offcanvas-navigation.active{left:0px;}

#offcanvas-navigation form.search { border-bottom: 1px solid #2a2a2a; width:100%; }
#offcanvas-navigation form.search i{color:#2a2a2a;float:right;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
#offcanvas-navigation form.search i:hover{color:white; cursor: pointer;}

button.search-submit{padding:0; margin:0; background: none; border:none;}

#offcanvas-navigation form.search input{font-size: 16px;width: 85%; border: none; background:none; color:#2a2a2a; text-transform: uppercase; margin-bottom: 5px;font-family:'Montserrat';font-weight: 700; font-family: 'Cabin', sans-serif; }
#offcanvas-navigation form.search input:focus{ color:white !important;}

#offcanvas-navigation ul.sidebar-nav{font-weight:700;text-align: left; text-transform: uppercase; padding:0; margin:0; font-size: 18px; margin-top:20px;}
#offcanvas-navigation ul.sidebar-nav li{padding:0;padding-bottom:10px;color: #666666;}
#offcanvas-navigation ul.sidebar-nav li a{color: #666666;}
#offcanvas-navigation ul.sidebar-nav li a:hover, #offcanvas-navigation ul.sidebar-nav li.current-menu-item a{color: white;}
#offcanvas-navigation ul.sidebar-nav li:first-child{padding-top:10px}

#offcanvas-navigation .sidebar-widget h3{font-size: 18px;text-align: left; text-transform: uppercase; padding:0; margin:0;font-family: 'Cabin', sans-serif; padding-bottom:10px;color: #666666;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
#offcanvas-navigation .sidebar-widget h3:hover{color:white;cursor:pointer;}
#offcanvas-navigation .sidebar-widget ul{padding:0;}
#offcanvas-navigation .sidebar-widget ul li{padding:0; padding-left:10px; padding-bottom:8px}
#offcanvas-navigation .sidebar-widget ul li a{color:#666666;}
#offcanvas-navigation .sidebar-widget ul li a:hover, #offcanvas-navigation .sidebar-widget h3.active{color:white;}

::-webkit-input-placeholder {color:#2a2a2a;}
:-moz-placeholder {color:#2a2a2a;}
::-moz-placeholder {color:#2a2a2a;}
:-ms-input-placeholder {color:#2a2a2a;}

.show-offcanvas i.icon-remove{color:#f4594e;opacity:0.5;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.show-offcanvas .icon-remove:hover,{opacity:1;}

#offcanvas-navigation, #page {-moz-transition:left .6s, -moz-transform .6s;-webkit-transition:left .6s, -webkit-transform .6s;-o-transition:left .6s, -o-transform .6s;transition:left .6s, transform .6s;}

/* Blog Page */

#blog-header{height:300px;background-color:#2a2a2a; text-align: center;}
#blog-header h1{font-size: 54px;margin-top: 0;}
#blog-header .meta{color:white; text-transform: capitalize;}

.blog-section{background-color: #fff;}

.page .post, .search .post, .archive .post, .category .post, .page .portfolio, .search .portfolio, .archive .portfolio, .category .portfolio{margin: 2em 0; overflow:hidden; background: #f2f2f2;}
.page .post h2, .search .post h2, .archive .post h2, .category .post h2, .page .portfolio h2, .search .portfolio h2, .archive .portfolio h2, .category .portfolio h2{margin-top: 0;}
.page .post h2 a, .search .post h2 a, .archive .post h2 a, .category .post h2 a, .page .portfolio h2 a, .search .portfolio h2 a, .archive .portfolio h2 a, .category .portfolio h2 a{color: #2a2a2a;}
.page .post span, .search .post span, .archive .post span, .category .post span, .page .portfolio span, .search .portfolio span, .archive .portfolio span, .category .portfolio span{font-size: 0.9em; color: #4a4a4a;}
.page .post .post-edit-link, .search .post .post-edit-link, .archive .post .post-edit-link, .category .post .post-edit-link, .page .portfolio .post-edit-link, .search .portfolio .post-edit-link, .archive .portfolio .post-edit-link, .category .portfolio .post-edit-link{float:right;}
.page .post p, .search .post p, .archive .post p, .category .post p, .page .post p, .search .portfolio p, .archive .portfolio p, .category .portfolio p{font-size: 1.3em;}
.page .post .view-article, .search .post .view-article, .archive .post .view-article, .category .post .view-article{display: none;}
.page .post .swiper-container, .search .post .swiper-container, .archive .post .swiper-container, .category .post .swiper-container{overflow:hidden;}

.page .post #link-header, .search .post #link-header{height:150px;}
.page .post #link-header a, .search .post #link-header a{font-size: 22px;}

.post-data{padding: 2em;}
.post-data hr{/*width: 25%; */ margin: 1.5em auto;padding: 0;border-top: 1px dashed #9a9a9a;}

/* Pagination */

.pagination{margin-top: 0;margin-bottom: 4em;}
.page-numbers{padding: 0.5em 1em; background-color: #f2f2f2; color: black;}
.page-numbers.current, .page-numbers:hover{background-color:#f4594e; color: white;}

/* Page - custom, search, categories... */

#page-content{background-color:white; padding-top: 2em;}

/* Page - nothing to display */

.nothing{margin:40px 0; text-align: center;}

/* 404 Page */

.error404 .content{text-align: center; height:100%;}
.error404 section h1{line-height: 1.5;}

/* Animations */

.featured-post-info h2{transition: color .3s ease-out;-moz-transition: color .3s ease-out;-webkit-transition: color .3s ease-out;-o-transition: color .3s ease-out;}
.page-numbers, #submit, .view-posts{transition: background-color .3s ease-out;-moz-transition: background-color .3s ease-out;-webkit-transition: background-color .3s ease-out;-o-transition: background-color .3s ease-out;}

.page .post h2:hover a{color: #f4594e;}

/* ==========================================================================
   Contact Styles
   ========================================================================== */

input{color:#1a1a1a;font-weight: normal;background:#f2f2f2;}
input[type="text"]{ margin-bottom: 15px;height:40px;}
textarea{height:120px; resize: none;margin-bottom: 1.5em;background:#f2f2f2;}	
input[type="text"], textarea{padding:0.6em;width: 100%;outline: none;border: none;-webkit-border-radius:0px;box-shadow: none; color: #1a1a1a;}
/* input[type="text"]:focus, textarea:focus{-webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; transition: all 0.15s linear;} */


#contacts .btn{width:100%;margin-top:1em; border-radius:0; border:none; background-color: #f4594e; color: white; -webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
#contacts .btn:hover{background-color: #2a2a2a; color: white;}
.formContainer{position: relative;}

span.error,span.valid{position: absolute;top:0; right: 1em;width:40px;margin: 0.4em 0em;}
span.error i{color:#FF6666;}
span.valid i{color:#22B571;}

.alert{display:none;border: 0; border-radius: 0; background-color:#ff3333; color: white; margin-top:1.5em;}
.alert-success{background-color:#22b573; color: white;}

/* Each Contact Info */

.contact-info {margin-top:2em;}
.contact-info p{margin-top: 1em;font-size: 1em;}
.contact-info .icon a i{-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}

.contact-label{color:#999;font-size: 1.5em;font-family: 'Cabin', sans-serif;}

/* Social Footer */

#footer{padding: 2em 0; background-color:#f2f2f2;text-align: center;}
#footer hr{margin:0; margin-bottom:2em; display:none;}
#footer p{margin-bottom: 0;}
#social-profiles{margin-bottom: 1em;}
#social-profiles ul.centerUl li a i {text-decoration:none; color: black;opacity: 0.5;-webkit-transition: opacity 0.4s ease-in;-moz-transition: opacity 0.4s ease-in;-o-transition: opacity 0.4s ease-in;transition: opacity 0.4s ease-in;}
#social-profiles ul.centerUl li a:hover i{color:black;opacity: 1;}

#copyrights {padding:0; margin:0;margin-top:30px;font-size: 0.7em; color: grey; text-align: center;}

/* ==========================================================================
   Project Styles
   ========================================================================== */
   
#project-page{display:none;}
#project-page .button{border:none;box-shadow:inherit;}

#project-header{width:100%;position:relative;overflow:hidden; background: #2a2a2a;}

#project-top-bar{width:100%;height:50px; background: #1a1a1a; z-index:999;padding: 0.6em 0;}
#project-top-bar p{color: white;}

#project h2{margin-top: 0;}

#next-project, #previous-project, #close-project{margin-top: 0.3em; height:2em;cursor:pointer;}

#project-header img{display:block;width:100%;} 

#next-project{float:right;}

#next-project-name,#previous-project-name{display:none;}

#project-details{padding:3em 0;background-color:white;}
#project-details h5{margin-bottom: 0;}

#project-details #project-description{margin-bottom: 2em;}

#project-details img{width:100%; height:auto;margin-bottom: 2em;}

#project-client{ font-weight: bold;font-style: italic;}
#project-tags, #project-categories{font-size: 0.9em;text-transform: capitalize;}
#project-categories{margin-bottom: 0;}

#portfolio select{width: 100%;margin-bottom: 2em;}

/* Audio/Video jPlayer Skin -------------------------------------------- */
.jp-audio,
.jp-video {
	margin: 0 auto;
	display: block;
	width: 750px;
	max-width: 100%;
}

.jp-audio{
	height: 0;
}

.jp-video + .jp-audio,
.fluid-width-video-wrapper + .jp-audio { margin-top: 2.71428571428em; }

.jp-gui { margin-bottom: -35px; }

.jp-interface {
	background: #f4594e url('./img/player.png') 0 -132px repeat-x;
/*
	border: 1px solid #000000;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 0 #4B4E53 inset, 0 1px 3px rgba(0,0,0,.7);
	box-shadow: 0 1px 0 #4B4E53 inset, 0 1px 3px rgba(0,0,0,.7);
*/
	margin-bottom: 3px;
	position: relative;
	height: 33px;
	width: 91.25%; /* 438 / 480 */
	left: 4.545454545%; /* 20 / 440 */
	top: -53px;
}

.jp-video-full { position: relative; }

.jp-video-full .jp-jplayer {
	background: #000000;
	top: 0;
	left: 0;
	position: fixed !important;
	position: relative;
	overflow: hidden;
	z-index: 998;
}

.jp-video-full .jp-gui {
	z-index: 1000;
	display: block;
}
.jp-video-full .jp-interface { 
	bottom: 0;
	top: auto; 
	left: 0.25%;
	position: fixed;
	width: 99%;
	z-index: 1000;
}

.jp-jplayer{max-height: 450px;overflow: hidden;}

/* Controls ----- */
.jp-controls,.jp-toggles {float: left;margin: 0;padding: 0;z-index: 100;}
.jp-controls{list-style: none;}

.jp-controls li { float: left; }

.jp-controls a {
	bottom: 0;
	position: absolute;
	overflow: hidden;
	text-indent: -999em;
}

.jp-play,
.jp-pause,
.jp-mute,
.jp-unmute {
	background: #d2d6db url('./img/player.png') 0 0 no-repeat;
/* 	border-top: 1px solid #4b4e53; */
	border-bottom: none;
	display: block;
	z-index: 2;
	height: 100%;
	width: 30px;
}

.jp-play:hover,
.jp-pause:hover,
.jp-mute:hover,
.jp-unmute:hover { 
	background-color: #f4594e; 
	border-bottom: none;
}

.jp-pause { background-position: 0 -33px; }

.jp-mute { background-position: 0 -99px; }

.jp-unmute { background-position: 0 -66px; }

.jp-play,
.jp-pause { 
/*
	border-radius: 3px 1px 1px 3px;
	border-right: 1px solid #4b4e53; 
*/
}

.jp-mute,
.jp-unmute { 
/* 	border-left: 1px solid #4b4e53; */
	right: 52px; 
}

.jp-audio .jp-mute,
.jp-audio .jp-unmute { right: 52px; }

/* Scrubber ----- */
.jp-progress {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	padding: 0 95px 0 40px;
	margin: 12px 0;
	width: 100%;
	height: 9px;
}

.iphone .jp-progress { padding-right: 15px; }

.jp-volume-bar {
	float: right;
	margin: 12px 0;
	right: 8px;
	width: 40px;
	height: 8px;
}

.jp-audio .jp-volume-bar { right: 7px; }

.jp-seek-bar,
.jp-volume-bar {
	background: #000000;
/*
	border-bottom: 1px solid #2c2d2f;
	border-left: 1px solid #0f0f10;
	border-right: 1px solid #0f0f10;
	border-top: 1px solid #000000;
	border-radius: 2px;
*/
	cursor: pointer;
	padding: 0 0 1px 0;
	position: relative;
	z-index: 999;
}

.jp-seek-bar{width:100% !important;}

.jp-play-bar,
.jp-volume-bar-value {
	/* border-radius: 1px 2px 2px 1px; */
	background: #f4594e;
	-webkit-background-size: 8px 8px;
	-moz-background-size: 8px 8px;
	background-size: 8px 8px;
/*
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
*/
/*
	-webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .1) inset;
	box-shadow: 0 5px 5px rgba(255, 255, 255, .1) inset;
*/
	height: 8px;
}

.jp-play-bar {
	-webkit-animation: animate-stripes 3s linear infinite;
	-moz-animation: animate-stripes 3s linear infinite;       		
}

@-webkit-keyframes animate-stripes { 
	0% { background-position: 0 0; } 
	100% { background-position: 60px 0; }
}

@-moz-keyframes animate-stripes {
	0% { background-position: 0 0; } 
	100% { background-position: 60px 0; }
}

/*------------------------------------*\
    RESPONSIVE MEDIA QUERIES
\*------------------------------------*/


/* ==========================================================================
   Media Queries
   ========================================================================== */
@media (max-width: 568px){
#header{overflow:hidden;height:100%;background: url('./img/header.jpg') fixed no-repeat #1a1a1a; width:100%; display:none;} //background-position: -500px 50px;
	.post{margin: 4em 0px 2.5em 0px;}
	.single-post .post span{font-size: 16px;}
	.single-post .post span:first-of-type{margin-bottom: 0.4em;}
	.single-post .post h1.post-title{font-size: 36px; }
	.single-post .post p{font-size: 20px;}
	.single-post .post hr {width: 25%;}
	.single-post blockquote p:last-of-type{margin-bottom: 0;}

	#post-details{margin-bottom: 3em;}/* marigin em relaçao ao texto*/
	
}

@media (min-width: 568px){
#header{overflow:hidden;height:100%;background: url('./img/header.jpg') fixed no-repeat #1a1a1a; width:100%; display:none; } //background-position: -500px 50px;
	.post{margin: 4em 0px 2.5em 0px;}
	.single-post .post span{font-size: 16px;}
	.single-post .post span:first-of-type{margin-bottom: 0.4em;}
	.single-post .post h1.post-title{font-size: 36px; }
	.single-post .post p{font-size: 20px;}
	.single-post .post hr {width: 25%;}
	.single-post blockquote p:last-of-type{margin-bottom: 0;}

	#post-details{margin-bottom: 3em;}/* marigin em relaçao ao texto*/
	
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
#header{overflow:hidden;height:100%;background: url('./img/header.jpg') fixed no-repeat #1a1a1a; width:100%; display:none;}
	.single-post .post h1.post-title{font-size: 42px; }

	.single-post .post span{font-size: 16px;}
	#featured-posts-container .featured-post{margin-bottom: 0}

	.single-post #link-header{height:250px;}
	.single-post #link-header a{font-size: 55px;}
	
	.page .post #link-header{height:200px;}
	.page .post #link-header a{font-size: 32px;}
	
	.featured-post-link #link-header a{font-size: 32px;}
	
	.comment-icons{position:inherit;top:inherit; right:inherit;}
	#reply-title{width:35%; float:left; margin-top: 0;}
	#commentform{width: 65%; float:left;}
	
	.page .post .wp-post-image{margin-bottom: inherit;}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
#header{overflow:hidden;height:100%;background: url('./img/header.jpg') fixed no-repeat #1a1a1a; width:100%; display:none;}
	.video-container{padding: 4em 0;}
	.single .jp-video{padding: 4em 0;}

	.single-portfolio .show-offcanvas{top:1.3em;}
	.single-portfolio #project-top-bar .show-offcanvas{position: fixed; top:1.3em;left: 1.3em;}

	.single-post .post h1.post-title{font-size: 48px; }
	
	.intro{margin-bottom: 6.25em;}
	
	/* All Section Styles */
	
	.sections{padding-top: 2.25em;padding-bottom: 3.75em;}
	.sections h1 {font-size:3.125em;}
	.sections .intro p {font-size:1.3em;}
	
	/* Header */
#header{overflow:hidden;height:100%;background: url('./img/header.jpg') fixed no-repeat #1a1a1a; width:100%; display:none;}	
	#logo img{width:150px;}

	#caption{margin-top: .25em;font-size: 3em;}
	#sub-caption{font-size: 2.5em;}
	
	#explore{margin-top: 0em;}
	
	/* Navigation */
	
	#top-navigation ul{float:right;}
	#top-navigation ul{display:none;font-size: 1em;margin-top: 0.3em;}
	
	/* Logo */
	
	#logo-lettering{margin-top: 0;padding: 0.3em 0;}
	#logo-lettering.text{padding: 0.6em 0;}
	
	/* Top Navigation */
	
	#top-bar{top:0px;height:3.75em;z-index: 9999;}
	#top-navigation{margin-top: 1em;}
	#top-navigation ul{display:inherit;}
	#top-navigation li{width:inherit;}
	
	/* Team */
	
	.member{margin-bottom: 0;min-height: inherit;}
	.member h5{font-size: 1.3125em;}
	.member p{font-size: 1em;}
	.member-photo{max-height: inherit;}
	
	.member ul.social li a{width:2em;height:2em;background-size: 2em;}
	
	/* Services */
	.service img{margin-top:0;width:auto;height: 100px;}
	
	/* Feed */
	
	.instagram-placeholder,.flickr-photo{margin-bottom: inherit;}
	#twitter{height: 16em;}
	#twitter ul.tweetList li {height: 7em;}
	
	/* Contacts */
	#contacts{padding-bottom: 0;}
	
	/* Project */
	
	#project-title{margin-top: 0;}
	
	#project-details{padding:5em 0;}
	#project-details #project-description{margin-bottom: 0;}
	#project-sidebar{text-align: right;}
	
	#project-top-bar{height:auto; padding: 0;}
	
	#next-project,#previous-project,#close-project,#next-project-name, #previous-project-name{position:fixed; z-index: 999;}
	#close-project{top:10px; right:22px;}
	#next-project, #previous-project{top: 50%;margin-top: -20px;}
	#next-project{right:20px}
	#previous-project{left:20px;}
		
	#next-project-name, #previous-project-name{background-color:rgb(244,89,78);background-color:rgba(244,89,78,0.7);padding:0.75em 1em;opacity:0; display: inherit;color:white;}
	#next-project-name, #previous-project-name{top: 50%;margin-top: -27px;}
	#next-project-name{right:110px;}
	#previous-project-name{left:110px;}
	
	#next-project-name h2,#previous-project-name h2{color:white;font-size: 1.2em; padding:0;margin: 0;}
	
	#next-project, #previous-project, #close-project{opacity:0.6;-webkit-transition: opacity 0.3s ease-in-out;-moz-transition: opacity 0.3s ease-in-out;-o-transition: opacity 0.3s ease-in-out;transition: opacity 0.3s ease-in-out;}
	#next-project:hover,#previous-project:hover,#close-project:hover{opacity:1;}
	
	.single-post #link-header{height:300px;}
	.single-post #link-header a{font-size: 65px;}
	
	.page .post #link-header{height:250px;}
	.page .post #link-header a{font-size: 42px;}
	
	.featured-post-link #link-header a{font-size: 32px;}

}


/* Large devices (large desktops, 1200px and up) */
@media (min-width:1200px) {
#header{overflow:hidden;height:100%;background: url('./img/header.jpg') fixed no-repeat #1a1a1a; width:100%; display:none;}
	.single-post .post h1.post-title{font-size: 52px; }
	.single-post span{font-size:18px;}
	.single-post #link-header{height:350px;}
	.single-post #link-header a{font-size: 80px;}
	
	.page .post #link-header{height:300px;}
	.page .post #link-header a{font-size: 52px;}
	
	.featured-post-link #link-header a{font-size: 32px;}
}