/*
Theme Name:     Detritus Journal Theme
Theme URI:      https://detritusjournal.com
Description:    Theme for Detritus Journal
Author:         ArcoPlan
Template:       reframe-plus-master
Version:        1.0
*/

:root {
	--container-width: 920px;
	--header-height: 234px;
}

.main-website-header {
	background: url(images/header_bg.jpg) no-repeat;
	background-size: 100% auto;
	margin-left: calc(-1*(100vw - var(--container-width))/2);
	margin-bottom: 0;
	width: calc(100vw - 5px);
	height: var(--header-height);
	position: relative;
}

.header-container {
	position: relative;
	margin: 0 auto;
	padding: 0;

	width: var(--container-width);
}

.support-logo-container {
	color: #fff;
	padding-top: 10px;
	text-align: center;
}

.support-logo-container span,
.support-logo-container img {
	display: block;
	margin: 0 auto;
}

.support-logo-container span {
	margin-top: 15px;
}

.support-logo-container img {
	width: 80px;
}

.main-logo {
	padding-top: 40px;
	max-width: 700px;
	width: 100%;
}

.main-website-header nav {
	margin-top: 10px;
}

.main-website-header .nor-cart {
	margin-right: 10px;
}

.main-website-header nav i {
	color: #fff;
}

.header-stripe {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 24px;
	clear: both;
	text-align: right;
	background-color: #349ea3;
	color: #fff;
	font-weight: bold;
}

@media (min-width: 959px) {
	.left-aligned-layout {
		width: 81%;
	}
}

@media only screen and (min-width: 1590px) {
	
	:root {
		--container-width: 1528px;
		--header-height: 240px;
	}

	.main-website-header {
		background-position-y: 30%;
	}
}

@media only screen and (min-width: 1380px) and (max-width: 1589px) {

	:root {
		--container-width: 1328px;
		--header-height: 240px;
	}

	.main-website-header {
		background-position-y: 30%;
	}
	
}

/* #1336px Full
================================================== */

@media only screen and (min-width: 1291px) and (max-width: 1379px) {

	:root {
		--container-width: 1264px;
		--header-height: 240px;
	}
	
}

/* #1280px Full
================================================== */

@media only screen and (min-width: 1200px) and (max-width: 1290px) {

	:root {
		--container-width: 1152px;
	}

}

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

	.main-website-header nav {
		position: absolute;
	    top: 0;
	    right: 0;
	    text-align: right;
	    padding-right: 10px !important;
	}
}

/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */

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

    .main-website-header {
		margin-left: -20px;
		background-size: 150% auto;
		height: 200px;
	}

    .header-container {
    	width: 100%;
    }

    .support-logo-container {
    	position: absolute;
	    right: 0;
	    top: 38px;
	    font-size: 12px;
    }

    .support-logo-container span {
    	margin-top: 2px;
    }

    .support-logo-container img {
    	width: 50px;
    }
}


/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */

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

    .main-website-header {
		margin-left: -20px;
		background-size: 210% auto;
		height: 160px;
	}

	.header-container {
		width: 100%;
		padding: 0 15px;
	}
}


/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {

    .main-website-header {
		margin-left: calc(-1*(100vw - 420px)/2);
		background-size: 150% auto;
		height: 180px;
	}

    .header-container {
    	width: 420px;
    }


	.main-logo {
		padding-top: 50px;
	}
}

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

	.main-website-header {
		width: calc(100vw + 5px);
	}

    .support-logo-container {
    	position: absolute;
	    left: 15px;
	    top: 0;
	    font-size: 10px;
    }

    .support-logo-container span,
    .support-logo-container img {
    	display: inline-block;
    }

    .support-logo-container span {
    	margin-top: 0;
    	margin-left: 5px;
    }

    .support-logo-container img {
    	width: auto;
    	max-width: 50px;
    	max-height: 35px;
    	padding: 0;
    	margin-left: 2px;
    }

	.header-stripe {
		height: 18px;
		font-size: 12px;
		line-height: 18px;
	}
	
}

.widget_wrapper .widget {
		margin-bottom:0px;
		padding-bottom:25px;
	}

.single-cpt .content p, .the_content p, form p, .commentlist p, div.comment p {
	margin: 0px 0 0px 0;
}

.homecontainer, .defaultpage {
	line-height: 1.5em;
}