/*
Theme Name: SuBlackwell
Theme URI: http://www.sublackwell.co.uk
Description: Responsive WordPress Theme for Su Blackwell
Version: 1
Author: Su Blackwell
Author URI: http://www.sublackwell.co.uk
*/

@import url("css/normalise.css");
@import url("css/defaults.css");
@import url(https://fonts.googleapis.com/css?family=Cutive+Mono);
@import url(https://fonts.googleapis.com/css?family=Advent+Pro:300,100,200);
* {
    margin: 0;
}
html {
    font-size: 100%;
}
html,
body {
    height: 100%;
}
body {
    background-color: #1b191a;
    padding: 0;
    font-family: "Cutive Mono", Courier New, Courier, monospace;
    /* Background image doesn't tile */
    
    background-repeat: no-repeat;
    /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
    
    background-attachment: fixed;
    /* This is what makes the background image rescale based
     on the container's size */
    
    background-size: cover;
    color: #FFF;
	
}
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}
body#home {
    /* Location of the image */
    
    background-image: url(img/homepage-bg.png);
    /* Background image is centered vertically and horizontally at all times */
    
    background-position: bottom right;
}
body#profile {
    /* Location of the image */
    
    background-image: url(img/the-baron-in-the-trees-crop.jpg);
    /* Background image is centered vertically and horizontally at all times */
    
    background-position: 20% 40%;
}

body#contact {
    /* Location of the image */
    
    background-image: url(img/contact_bg.jpg);
    /* Background image is centered vertically and horizontally at all times */
    
    background-position: 20% 40%;
}
h1 {
    font-size: 1em;
    line-height: 1.3em;
    color: #FFF;
    margin-bottom: 1em;
    text-transform: uppercase;
    font-weight: bold;
}
h2 {
	font-size: 1em;
	line-height: 1.3em;
	color: #FFF;
	margin-bottom: 2em;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
}
h5 a {
    color: #FFF;
}
h6 {
    font-size: 1.15em;
    line-height: 1.3em;
    color: #FFF;
    margin-bottom: 1em;
    text-transform: uppercase;
    font-weight: bold;
}
p {
    font-size: 1.1em;
    line-height: 1.3em;
    color: #FFF;
    margin-bottom: 1em;
}
blockquote {
	font-size: 1.1em;
	line-height: 1.3em;
	color: #FFF;
	quotes: "\201C" "\201D" "\2018" "\2019";
	margin-top: 1.4em;
}
blockquote:before {
    content: open-quote;
}
blockquote:after {
    content: close-quote;
}
em {
	font-weight: bold;
}
a {
    text-decoration: underline;
    cursor: pointer;
    color: #FFF;
}
a:hover {
    text-decoration: none;
}
#page-wrapper {
    min-height: 100%;
    /* equal to footer height */
    
    margin-bottom: -30px;
}
#page-wrapper:after {
    content: "";
    display: block;
}
footer,
#page-wrapper:after {
    height: 30px;
    padding-top: 5px;
}
header {
    width: 100%;
}
#logo {
    width: 30%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    margin-top: 0px;
    padding-top: 26px;
}
#logo img {
    height: auto;
    width: 230px;
}
main {
    margin-right: auto;
    margin-left: auto;
    padding-top: 1%;
}
#profile main,
#contact main {
    width: 100%;
    max-width: 1100px;
    padding-right: 6%;
    padding-left: 6%;
    padding-top: 4%;
}



#profile main {
	padding-bottom: 250px;
}

#press main,
#showcase main {
    width: 90%;
    max-width: 1200px;
}
#shop main {
    width: 90%;
    max-width: 1200px;
}

#notfound { width: 70%;
    max-width: 1200px;
	text-align: center;
	margin-top: 50px;}
#blog main {
    width: 72%;
    float: left;
    max-width: 890px;
    padding-right: 0%;
    padding-left: 5%;
    padding-top: 2%;
}
#blog_wrap {
    width: 100%;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}
.gradient {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+64,0+100 */
    
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0) 100%);
    /* FF3.6-15 */
    
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 74%, rgba(0, 0, 0, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
    /* IE6-9 */
}
/*Navigation */




#nav {
    width:100%;
    /* 1000 */
    margin-top: 17px;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
    text-align: center;
    z-index: 9999999999;
    margin-bottom: 0px;
	max-width: 1300px;
    
}
#nav > a {
    display: none;
}
#nav li {
    position: relative;
	padding-left: 3.5%;
    padding-right: 3.5%;
}

#nav li:first-child {padding-left: 5%}
#nav li a {
    color: #fff;
    display: block;
    text-decoration: none;
    font-weight: bold;
	
	
}
#nav li a:active {
    text-decoration: underline;
}
/* first level */

#nav > ul {
    height: 3.75em;
}
#nav > ul > li {
    height: 100%;
    float: left;
    
    z-index: 9999999999;
}
#nav > ul > li:last-child {
    padding-right: 0%;
}

#nav > ul > li > a {
    height: 100%;
    font-size: 1.1em;
    line-height: 2.5em;
    text-align: center;
}
#nav > ul > li:hover > a,
#nav > ul:not(:hover) > li.active > a {
    text-decoration: underline;
}
/* second level */

#nav li ul {
    display: none;
    position: absolute;
    top: 65%;
}
#nav li:hover ul {
    display: block;
    left: 0;
    right: 0;

}
#nav li:not(:first-child):hover ul {
    left: -1px;
}
#nav li ul a {
    font-size: 1.1em;
    /* 20 */
    
    border-top: none;
    /* 15 (20) */
    
    text-align: center;
    background-color: rgba(27, 25, 26, 1);
    padding-top: 0.75em;
    padding-bottom: 0.75em;
}
#home nav li ul a {
    background-color: rgba(27, 25, 26, 0);
}
#nav li ul li a:hover,
#nav li ul:not(:hover) li.active a {
    text-decoration: underline;
}
/*active links*/

#showcase a.port,
#shop a.shop,
#profile a.profile,
#contact a.contact,
#press a.press,
#blog a.blog,
.current_page_item {
    text-decoration: underline;
}
/* Blog*/

aside {
    width: 13%;
    float: left;
    max-width: 200px;
    margin-top: 71px;
    margin-left: 113px;
}
img.profile {
    height: auto;
    width: 100%;
    max-width: 120px;
}
img.social {
    height: auto;
    width: 24px;
    opacity: 0.7;
    margin-right: 10px;
}
img.social:hover {
    opacity: 1;
}
.widget {
    font-size: 0.9em;
    margin-bottom: 30px;
}
.widget h3 {
    text-transform: uppercase;
    color: #FFF;
    margin-bottom: 7px;
}
.widget ul {
    margin-left: 0px;
}
.widget ul li {
    margin-top: 3px;
}
.widget a {
    text-decoration: none;
    color: #fff;
}
.widget a:hover {
    text-decoration: underline;
}
article {
    clear: both;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
}
.blog_post {
    width: 100%;
}
.blog_post img {
    width: 100%;
    height: auto;
}
.blog_image {
    height: auto;
    width: 45%;
    float: left;
    margin-bottom: 35px;
}
.blog_copy {
    width: 50%;
    padding-top: 1%;
    float: right;
}
.blog_post_full {
    justify-content: center;
    margin-left: 7%;
}

.blog_post_gallery p img {width: 130%}
.blog_post_gallery {
    justify-content: center;
    margin-left: 10%;
}
.blog_post_full h1 {
    text-align: center;
    margin-bottom: 45px;
    width: 85%;
    padding-left: 15%;
}

.blog_post_gallery h1 {
    text-align: center;
    margin-bottom: 45px;
    width: 100%;
    padding-left: 25%;
}

.blog_post_full p, .blog_post_gallery p {
    padding-bottom: 10px;
}
.blog_post_full img, .blog_post_gallery img {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
	margin-top:30px;
}
.blog_post_full.port img, .blog_post_gallery.port img {
    width: 87%;
    margin-bottom: 30px;
}



.blog_post_full.port, .blog_post_gallery.port {
    text-align: center;
    margin-left: 0%;
}
.blog_post_full p img,
.blog_post_full.port p img,

.blog_post_gallery p img,
.blog_post_gallery.port p img {
    margin-bottom: -3px;
}

.blog_post_full .back, .blog_post_full .forward {margin-top: -75px;}

.back {
    clear: both;
    text-align: left;
    padding-left: 0%;
    font-family: 'Advent Pro', sans-serif;
    font-size: 2.3em;
    font-weight: 100;
    margin-bottom: 20px;
    float: left;
    width: 20px;
}
.forward {
    clear: both;
    text-align: left;
    padding-left: 0%;
    margin-top: -65px;
    font-family: 'Advent Pro', sans-serif;
    font-size: 2.3em;
    font-weight: 100;
    margin-bottom: 20px;
    float: right;
}
.back.padding {
    padding-left: 7%;
}
.forward.padding {
    padding-right: 7%;
}
.back a,
.forward a {
    text-decoration: none;
}
.back a:hover,
.forward a:hover
{
    opacity: 0.7;
}
/*press */

.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1;
    /* For IE 6/7 */
}
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}
.col {
    display: block;
    float: left;
    margin-top: 3%;
    margin-right: 0;
    margin-bottom: 0%;
    margin-left: 2%;
}
.col:first-child {
    margin-left: 0;
}
.col:nth-child(5n+1) {
    margin-left: 0;
}
.span_1_of_5 {
    width: 18.4%;
    height: auto;
}
.span_1_of_5 img {
    width: 100%;
    height: auto;
}
.col h5 {
    text-align: center;
    font-weight: 300;
    margin-top: 10px;
    font-size: 1.1em;
    margin-bottom: 5px;
    line-height: 1.3em;
    text-transform: capitalize;
    letter-spacing: -1px;
}
.title {
    height: 60px;
    overflow: hidden;
}
/*  Portfolio  */

#portfolio {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    max-width: 1300px;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 0%;
    margin-top: 5px;
}

/*  Shop  */

#shop {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    max-width: 1300px;
   
    padding-top: 0%;
    margin-top: 5px;
}



aside#sidebar {
	
	float: left;
	width: 14%;
	
}

#online-shop #my-store-152233 {
	
	float: right;
	width: 84%;
}

/*  Contact  */

.contact_wrap {
    float: left;
    width: 55%;
    padding-left: 0%;
    padding-top: 0%;
}
#textfield, #mce-EMAIL {
    display: inline-block;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-color: #FFF;
    color: #333;
    font-size: 12px;
    line-height: 16px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    vertical-align: super;
    padding-left: 5px;
}
.narrow {
	/* width: 63%; */
	width: 118px;
}
.wide {
	
	width: 200px;
}
.arrow {
	font-family: 'Advent Pro', sans-serif;
	display: inline-block;
	height: 25px;
	width: 25px;

	line-height: 35px;
	display: block;
	color: white;
	text-align: center;
	font-size: 2em;
	float: right;
	margin-right:30px !important;

}
.arrow a {
	font-family: 'Advent Pro', sans-serif;
    text-decoration: none;
}
.arrow:hover {
    opacity: 0.6;
}
.arrow1 {
	font-family: 'Advent Pro', sans-serif;
	display: inline-block;
	height: 25px;
	width: 25px;
	margin-top: -4px;
	line-height: 35px;
	display: block;
	color: white;
	text-align: center;
	font-size: 2em;
	float: right;

}
.arrow1 a {
	font-family: 'Advent Pro', sans-serif;
    text-decoration: none;
}
.arrow1:hover {
    opacity: 0.6;
}

/*  footer  */

#sidebar h3 {
	font-size:14px;
}
#sidebar ul {
	padding-top:6px;
}
#sidebar ul li a {
	font-size:14px;
	text-decoration:none;
}
#sidebar ul li a:hover {
	text-decoration:underline;
}

footer {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    clear: both;
    padding-top: 7px;
    padding-bottom: 1px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.1);
    height: auto;
}
footer p {
    font-size: 80%
}





@media (min-width: 1200px) {
	.ms-slide, .ms-sl-selected, .ms-slide-auto-height, .ms-view, .ms-fade-view, .ms-grab-cursor .ms-slide-bgcont img { width:98% !important;background:none !important }
	
	.ms-skin-black-1 .ms-nav-next {
		right:20px !important;
	}
	.ms-skin-black-1 .ms-nav-prev {
		left:30px !important;
	}
	.master-slider-parent {
		margin-left:10px;
	}
}

/* Medium Devices Styles Starts */

@media (min-width: 832px) and (max-width: 1199px) {
	.ms-slide, .ms-sl-selected, .ms-slide-auto-height, .ms-view, .ms-fade-view, .ms-grab-cursor .ms-slide-bgcont img { width:98% !important;background:none !important }
	
	.ms-skin-black-1 .ms-nav-next {
		right:10px !important;
	}
	.ms-skin-black-1 .ms-nav-prev {
		left:25px !important;
	}
}



@media only screen and ( max-width: 1200px) {
    #nav > ul > li {
        padding-left: 4.5%;
        padding-right: 4.5%;
    }
	
	
	/*  Shop  */

aside#sidebar {
	

	width: 14%;
	
}

#online-shop #my-store-152233 {
	

	width: 74%;
}
	
	
}


@media only screen and ( max-width: 1050px) {
    #nav > ul > li {
        padding-left: 4%;
        padding-right: 4%;
    }
	
	
}
@media only screen and ( max-width: 925px) {
    html {
        font-size: 110%;
        /* 12 */
    }
    #nav {
        font-size: 140%;
        /* 12 */
        
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
    }
    #nav > a {
        width: 4.1em;
        /* 50 */
        
        height: 3em;
        /* 50 */
        
        text-align: left;
        text-indent: -9999px;
        position: relative;
    }
    #nav > a:before,
    #nav > a:after {
        position: absolute;
        border: 2px solid #fff;
        top: 35%;
        left: 18%;
        right: 25%;
        content: "";
    }
    #nav > a:after {
        top: 50%;
    }
    #nav:not(:target) > a:first-of-type,
    #nav:target > a:last-of-type {
        display: block;
    }
    /* first level */
	

    
    #nav > ul {
        height: auto;
        display: none;
        left: 5;
        right: 0;
        background-color: rgba(27, 25, 26, 0.8);
    }
    #nav:target > ul {
        display: block;
    }
    #nav > ul > li {
        width: 100%;
        float: none;
    }
    #nav > ul > li > a {
        height: auto;
        text-align: left;
        padding: 0 0.833em;
        /* 20 (24) */
    }
    #nav > ul > li:not(:last-child) > a {
        border-right: none;
        border-bottom: none;
    }
    /* second level */
    
    #nav li ul {
        position: static;
        /* 20 */
        
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0em;
        padding-left: 1.8em;
    }
    #nav li ul a {
        text-align: left;
        background-color: rgba(0, 0, 0, 0)
    }
    .span_1_of_5 {
        width: 23.5%;
        height: auto;
    }
    .col:nth-child(6n+0) {
        margin-left: 2%;
    }
    .col:nth-child(5n+1) {
        margin-left: 0;
    }
    #blog main, #showcase main {
        width: 100%;
        padding-left: 0%;
        max-width: 100%;
		float: left;
    }
	
	
    .blog_post_full, .blog_post_full.port, .blog_post_gallery {
        margin-left: 5%;
        margin-right: 5%;
    }
	
	.blog_post_gallery h1 {
    text-align: center;
    margin-bottom: 45px;
    width: 85%;
    padding-left: 15%;
}
	
    .blog_post_full img, .blog_post_full.port img, .blog_post_gallery img {
        width: 100%;
    }
	
	.blog_post_gallery p img {width: 100%!important}
	
	.blog_post_full.port img {
        width: 100%;
    }
	.blog_post {width: 96%; margin-left: 3%; padding-bottom: 35px; float: left;}
	
	
	.blog_post {
        display: block;
    }
    .blog_post img {
        width: 98%;
        height: auto;
    }
    .blog_copy {
        align-self: center;
        width: 100%;
        padding-left: 0%
    }
    .blog_image {
        height: auto;
        width: 100%;
        margin-bottom: 25px;
    }
    aside {
        margin-top: 40px;
        text-align: center;
		padding-left: 5%;
        width: 90%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    img.profile {
        height: auto;
        width: 30%;
        max-width: 30%;
    }
    img.social {
        height: auto;
        width: 10%;
        max-width: 10%;
    }
}
@media only screen and ( max-width: 850px) {
    .span_1_of_5 {
        width: 31%;
        height: auto;
    }
    .col:nth-child(5n+1) {
        margin-left: 2%;
    }
    .col:nth-child(4n+1) {
        margin-left: 2%;
    }
    
	
    article {
        margin-top: 25px;
    }
    #wrap {
        max-width: 97%
    }
    
    #showcase main {
        width: 100%
    }
	.contact_wrap {
    width: 90%;
    padding-top: 1%;
}
#textfield, #mce-EMAIL {width: 80%}
.wide {width: 100%;}

}

@media only screen and ( max-width: 736px) {.span_1_of_5 {
        width: 48%;
        height: auto;
    }
	
    .col:nth-child(2n+1) {
        margin-left: 0%;
    }
	
	#logo {
        width: 60%;}
		
		/*  Shop  */

aside#sidebar {
	

	width: 100%;
	
}

#online-shop #my-store-152233 {
	

	width: 100%;
}}
	
	@media only screen and ( max-width: 414px) {.span_1_of_5 {
        width: 100%;
        height: auto;
    }
	
    .col {
        margin-left: 0%;
    }
	#logo {
        width: 80%;
    }

}