/*
Theme Name: Tjolahåpp 2017

Author: Skärgårds reklam

*/


/**
 * Table of Contents
 *
 * 1.0 - Normalize
 * 2.0 - Genericons
 * 3.0 - Typography
 * 4.0 - Elements
 * 5.0 - Forms
 * 6.0 - Navigation
 *   6.1 - Links
 *   6.2 - Menus
 * 7.0 - Accessibility
 * 8.0 - Alignments
 * 9.0 - Clearings
 * 10.0 - Widgets
 * 11.0 - Content
 *    11.1 - Header
 *    11.2 - Posts and pages
 *    11.3 - Post Formats
 *    11.4 - Comments
 *    11.5 - Sidebar
 *    11.6 - Footer
 * 12.0 - Media
 *    12.1 - Captions
 *    12.2 - Galleries
 * 13.0 - Multisite
 * 14.0 - Media Queries
 *    14.1 - >= 710px
 *    14.2 - >= 783px
 *    14.3 - >= 910px
 *    14.4 - >= 985px
 *    14.5 - >= 1200px
 * 15.0 - Print
 */


/**
 * 1.0 - Normalize
 *
 * Normalizing styles have been helped along thanks to the fine work of
 * Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
 */

html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: 700;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 0;
}

hr {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

code,
kbd,
pre,
samp {
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

select {
	text-transform: none;
}

button {
	overflow: visible;
}

button,
input,
select,
textarea {
	max-width: 100%;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
	opacity: .5;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input[type="checkbox"],
input[type="radio"] {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-right: 0.4375em;
	padding: 0;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-outer-spin-button,
input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-outer-spin-button,
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-outer-spin-button,
input[type="week"]::-webkit-inner-spin-button,
input[type="week"]::-webkit-outer-spin-button,
input[type="month"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"] {
	-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #d1d1d1;
	margin: 0 0 1.75em;
	min-width: inherit;
	padding: 0.875em;
}

fieldset > :last-child {
	margin-bottom: 0;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

optgroup {
	font-weight: bold;
}


/**
 * 2.0 - Genericons
 */

.menu-item-has-children a:after,
.social-navigation a:before,
.dropdown-toggle:after,
.bypostauthor > article .fn:after,
.comment-reply-title small a:before,
.pagination .prev:before,
.pagination .next:before,
.pagination .nav-links:before,
.pagination .nav-links:after,
.search-submit:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-family: "Genericons";
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 1;
	speak: none;
	text-align: center;
	text-decoration: inherit;
	text-transform: none;
	vertical-align: top;
}

.image100{
	width: 100%;
	height: auto;
}
div{
	box-sizing: border-box;
}

/**
 * 2.0 - Font
 */
@font-face {
  font-family: 'eligible';
  font-weight: normal;
  font-style: normal;
  src: url('font/Eligible-Regular.eot'); /* IE9 Compat Modes */
  src: url('font/Eligible-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font/Eligible-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/Eligible-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('font/Eligible-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('font/Eligible-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'eligible';
  font-weight: bold;
  font-style: normal;
  src: url('font/Eligible-Bold.eot'); /* IE9 Compat Modes */
  src: url('font/Eligible-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font/Eligible-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/Eligible-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('font/Eligible-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('font/Eligible-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'eligible';
  font-weight: normal;
  font-style: italic;
  src: url('font/Eligible-italic.eot'); /* IE9 Compat Modes */
  src: url('font/Eligible-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font/Eligible-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/Eligible-italic.woff') format('woff'), /* Pretty Modern Browsers */
       url('font/Eligible-italic.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('font/Eligible-italic.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'eligible';
  font-weight: bold;
  font-style: italic;
  src: url('font/Eligible-Bold-italic.eot'); /* IE9 Compat Modes */
  src: url('font/Eligible-Bold-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font/Eligible-Bold-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/Eligible-Bold-italic.woff') format('woff'), /* Pretty Modern Browsers */
       url('font/Eligible-Bold-italic.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('font/Eligible-Bold-italic.svg#svgFontName') format('svg'); /* Legacy iOS */
}





/**
 * 3.0 - Site
 */
body{
	 text-rendering: geometricPrecision;
	 font-size: 15px;
	 font-family: 'eligible';
	 word-break: break-word;
}
#page{
	 position: relative;
	 width: 100%;
	 height: 100vh;
	 display: flex;
	 flex-direction: column;
}
#armLeft, #armRight {
	 width: 12vw;
	 position: absolute;	 
}
#armRight{
	 right: 0;
}
#content{
	max-width: 1366px;
	margin: 0 auto;
}




#header{
	display: flex;
	background-color: rgba(255,255,255,0.9);
	width: 100%;
}
#headerLogo{
	width:30vw;
}
#headerNav{
	margin-left: 5vw;
	padding-top: 1vw;
}
#headerNav ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}
#headerNav ul li{
	font-size: 2.5vw;
	margin-right: 2vw;
}
#headerNav a{
	text-transform: uppercase;
	text-decoration: none;
	color: #813827;
}
.current-menu-item a{
	color:#EF6934 !important;
}


 /**
 * 4.0 - Index
 */

#indexMain{
	display: flex;
	flex-direction: column;	
	flex: 1;
}

#indexHeader{
	max-width: 1366px;
	margin: 0 auto;
	width: 100%;
}
#indexLogo{
	width: 80%;
	margin: 0 auto;
}
#indexNav{
	position: relative;
}
#indexNav ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}
#indexNav ul li{
	margin: 0 1.2vw;
	text-align: center;
}
#indexNav a{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 2.5vw;
	text-decoration: none;
	color: #1885CE;
}

.indexContent{
	color: #1885CE;
	flex: 1;
}
#indexText{
	padding: 0 15vw;
	max-width: 1366px;
	width: 100%;
}

#indexFooter{
	width: 100%;
	 display: flex;
	 justify-content: space-between;
 }
#masken{
	width: 12vh;
	position: absolute;
	bottom: 0;
	left: 0;
}
#masken img{
	position: absolute;
	bottom: 0;
}
#bla{
	width: 40vh;
	position: absolute;
	bottom: 0;
	right: 0;
}
#bla a{
	display: block;
}
#indexSocial{
	display: flex;
	margin: 5vw auto;;
}
#indexSocial a{
	margin: 0 2vw;
	align-self: flex-end;
	width: 5vw;
}
#indexSocial a img{
	
}


 /**
 * 4.1 - Childpage
 */


#deltaMain{	
	flex: 1;
}
.deltaContent{
	padding-top: 10vw;	
}
#deltaNav{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
#deltaNav div{
	width: 22.5%;
	height: 4vw;
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	margin-top: 1vw;
}
#deltaNav a{
	color: #23572C;
	font-size: 2vw;
	text-decoration: none;
	font-weight: bold;
}


#lyssnaMain{
	flex: 1;
}
.lyssnaContent{
	padding-top: 10vw;	
}
#lekaMain{
	flex: 1;
}
.lekaContent{
	padding-top: 10vw;	
}
.lekaContent a{
	color: #fff;
	text-decoration: none;
}


#kontaktMain{
	padding: 0 10vw;
}
.kontaktContent{
	padding-top: 10vw;	
}


#platserMain{
	padding: 0 10vw;
}
.platserContent{
	padding-top: 10vw;	
}
#platserText{
	background-color: rgba(255,255,255,0.8);
	padding: 1vw 2vw;
}

 
 /**
 * 5.0 - fondfooter
 */
 #indexFond{
	 width: 100%;
	 height: 80px;
	 background-color: #22c7fb;
	 text-align: center;
	 padding-top: 10px;
	 
 }
 #indexFond svg{
	 height: 60%;
	margin: 0 2vw;
 }
 
 
 /**
 * 5.0 - Webshop
 */
#container, #butikMain{
	height: 100%;
	display: inline-table;
	width: 100%;
}
#butikLogo{
	width: 70%;
	margin: 0 auto;
}
#butikNav{
	margin-bottom: 4vw;
}
#butikNav ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}
#butikNav ul li{
	margin: 0 2vw;
}
#butikNav a{
	text-decoration: none;
	color: #333;
	font-size: 2vw;
	text-transform: uppercase;
}
.butikContent img{
	width: 100%;
	height: auto;
}
.woocommerce ul.products li.product a img, .woocommerce div.product div.images img{
	filter: drop-shadow(0px 0px 4px #666);
}
.woocommerce .products ul, .woocommerce ul.products{
	display: flex;
}  
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
	width: 33%;
	margin: 0 0.25%;
	text-align: center;
}
.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3{
	text-align: center;
	color:#333;
	font-size: 2vw;
}
.woocommerce ul.products li.product .price{
	color: #333;
	text-align: center;
	font-size: 2vw;
}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
	background-color: #ffdf42;
}
#page button:active{
	background-color: #ffdf42;
}
#page button:visited{
	background-color: #ffdf42;
}
#page button:hover{
	background-color: #ffdf42;
}

.woocommerce button.button.alt:active{
	background-color: #ffdf42;
}
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt{
	background-color: #ffdf42;
	color: #333;
}
.woocommerce div.product p.price, .woocommerce div.product span.price{
	color: #333;
}
.woocommerce-message{
	    border-top-color: #ffdf42;
}
.woocommerce-message::before{
	color: #ffdf42;
}
.woocommerce-error, .woocommerce-info, .woocommerce-message{
	background-color: rgba(255,255,255,0.8);
}
.woocommerce-cart-form{
	background-color: rgba(255,255,255,0.8);
}
.cart_totals table{
	background-color: rgba(255,255,255,0.8);
}
.woocommerce table.shop_table{
	background-color: rgba(255,255,255,0.8);
}
.single-product-main-image.alpha a {
pointer-events: none;
}

.momsText{
	font-size: 10px;
}

@media screen and (max-width: 1900px){
	.deltaContent {
	padding-top: 10vw;
	padding-left:15vw;
	padding-right: 15vw;
	}
	.butikContent {
	
	padding-left:15vw;
	padding-right: 15vw;
	}
	.lyssnaContent {
	padding-top: 10vw;
	padding-left:15vw;
	padding-right: 15vw;
	}
	.lekaContent {
	padding-top: 10vw;
	padding-left:15vw;
	padding-right: 15vw;
	}
	
}


@media screen and (max-width: 100px){
	
}

@media screen and (max-width: 800px){
	body{
		font-size: 14px;
	}
	
	#deltaNav div{
	width: 31.5%;
	height: 4vw;
	}
	#content{
	padding-left:5vw;
	padding-right: 5vw;
	padding-bottom: 5vw;
	}
	#indexLogo{
		width: 70%;
	}
	#page{
		
	}
	
	
	#indexFooter{
		
	}
	
	
	#masken{
		
	}
	#indexNav{
		
		width: 100%;
		
	}
	#indexNav div{
		
	}
	#indexNav a{
	
	}
	#bla{
	width: 35vw;
	
	}
	
	
	#delta{
	margin-left: -33vw;
	}
	#lyssna{
	margin-left: -16vw;
    top: 41px;
	}
	#leka{
	margin-left: 5vw;
	}
	#platserMain{
		padding: 0;
	}
	
}
@media screen and (max-width: 400px){
	
	#deltaNav div{
	width: 31.5%;
	height: 7vw;
	margin-top: 1vw;
	}
	#deltaNav a{
	font-size: 3vw;
	}
	
	
}

@media screen and (orientation: portrait){
	
	#masken{
	width: 12vw;
	}
	#bla{
	width: 35vw;
	}
	#indexFooter{
		flex-wrap: wrap;
	}
	#masken{
		order: 2;
	}
	#indexSocial{
		order: 1;
		width: 100%;
		justify-content: center;
	}
	#bla{
		order: 3;
	}
	#indexSocial{
		margin-bottom: 10vw;
	}
	#indexSocial a{
		width: 10vw;
	}
	#indexText{
		padding: 0 5vw;
	}

}
@media screen and (max-height:400px){
	#indexMain{
		display: block;
	}
}