@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500');


* {
	margin: 0;
}
::selection {
	background: #baefff;
}
body {
	font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
	font-weight: 300;
	font-size: 16px;
}
a {
	color: black;
}
#container { 
	width: 1000px;
	margin: auto;
	box-shadow: 0 0 40px -12px black;
}

/*Styling the banner*/
#header-banner {
	background: url(bilder/banner.jpg) 100% 27%/122% no-repeat;
	width: 100%;
	height: 300px;
}
#header-banner a {
	width: 100%;
	height: 100%;
	display: block;
}

/*Styling the menu*/
#container #header-nav {
	width: 100%;
	background: white;
}
#container #main-menu-list {
	padding: 0;
	list-style: none;
	overflow: auto;
	width: 100%;
}
#container #main-menu-list li {
	display: inline;
	float: left;
	width: 142.85px;
	text-align: center;
}
#container #main-menu-list a {
	text-decoration: none;
	display: block;
	background: white;
	padding: 16px 16px 11px 16px;
	border-bottom: 5px solid #b6b6b6;
}
#container #main-menu-list a:hover, #container #main-menu-list li#current-tab a:hover {
	background: #b6b6b6;
	border-color: #b6b6b6;
	color: white;
}
#container #main-menu-list li#current-tab a {
	border-color: black;
}

/*Styling for the main content*/
#content-container {
	width: 100%;
	background: white;
	padding-top: 2rem;
}
#content-container h1, #content-container h2 {
	text-align: center;
}
#content-container h1 {
	font-size: 6rem;
	font-weight: 100;
}
#content-container h2 {
	font-size: 3rem;
	font-weight: 200;
}
#content-container h3 {
	font-size: 1.5rem;
	font-weight: 300;
}
#content-container h4 {
	font-weight: 400;
	font-size: 1.17rem;
}
#content-container th {
	width: 25%;
    font-weight: 500;
    text-align: left;
}
#content-container #content-container-inner-slim {
	width: 630px;
	margin: auto;
	background: white;
	margin-bottom: 60px;
}
#content-container p {
	margin: 2.5rem 0;
	line-height: 1.5;
}
#content-container #content-container-inner-slim p.introtext {
	margin: 28px 0 2rem 0;
}
#content-container a, #content-container-inner-slim a {
	border: 1px solid black;
	border-radius: 5px;
	font-weight: 300;
	text-decoration: none;
	padding: 10px;
	transition: all 0.2s linear;
	color: black;
}
#content-container a:hover, #content-container-inner-slim a:hover {
	color: white;
	background: dimgray;
	border-color: dimgray;
}
#content-container a:active, #content-container-inner-slim a:active {
	background: #595959;
	border-color: #595959;
}
#content-container-inner-wide {
	width: 900px;
	margin: 60px auto;
}
#content-container-inner-slim #startintro-img {
	float: right;
	padding: 30px;
}
#content-container select {
	width: 130px;
	display: block;
	padding: 8px 13px;
	border: 1px solid black;
	border-radius: 5px;
	font-weight: 300;
	font-size: 16px;
	font-family: Montserrat;
}

/*Specific for index.html*/
#content-container .slideimg {
	width: 100%;
	margin: 2rem 0 3rem 0;
	display: block;
}
/*Specific for pics.html*/
#picfilter {
	padding: 1rem;
	border: 1px solid black;
	border-radius: 5px;
	width: 320px;
	margin-bottom: 2rem;
}
#picfilter h4 {
	display: inline;
	margin-right: 2rem;
}
#picfilter .filter-button {
	padding: 6px;
	margin-right: 0.5rem;
	border: none;
	background: gray;
	color: white;
	transition: all 0.1s linear;
}
#picfilter .filter-button:hover {
	background: gray;
}
#picfilter .filter-button-clicked {
	background: black;
}
#picfilter .filter-button-clicked:hover {
	background: black;
}
#pic-items-wrapper {
	overflow: auto;
}
#pic-items-wrapper .pic-item-container {
	width: calc(100% / 3);
	float: left;
	padding-bottom: 10px;
}
#pic-items-wrapper .pic-item-container .pic-item {
	width: 240px;
	margin: auto;
	text-align: center;
	font-weight: 300;
	padding: 29px 17px 15px 17px;
	cursor: pointer;
	background: white;
}
#pic-items-wrapper .pic-item-container .pic-item:hover {
	border-radius: 6px;
	background: #f7f7f7;
	box-shadow: inset 0px 0px 0px 1px #d0d0d0,0px 0px 15px 0px #d2d2d2;
}
#pic-items-wrapper .pic-item-container .pic-item p {
	margin: 15px 0;
}
#pic-items-wrapper .pic-item-container .pic-item img {
	width: 100%;
	border-radius: 5px;
}

/*Specific for compare.html*/
#compare-container {
	width: 950px;
	margin: 74px auto;
}
#compare-table {
	border-collapse: collapse;
	width: 100%;
	margin: auto;
	line-height: 1.5;
	font-weight: 400;
}
#compare-table > tr > td:nth-of-type(2) {
	width: 50px;
}
#compare-table select {
	margin: 0 auto 32px auto;
}
#compare-table table {
	width: 100%;
	margin-top: 20px;
	display: none;
}
#compare-table .comparetable-showed {
	display: table;
}
#compare-table img {
	margin: auto;
}

/*Specific for buy.html*/
.buy-item {
	padding: 30px;
	overflow: auto;
}
.buy-item img {
	vertical-align: middle;
}
.buy-item span, .buy-item .image-name-container {
	vertical-align: middle;
	display: inline-block;
	margin-left: 10px;
}
.buy-item table {
	float: right;
	border-collapse: collapse;
	margin-right: 15px;
}
.buy-item tr {
	height: 32px;
}
#content-container .buy-item tr:nth-child(1) {
	height: 55px;
}
#content-container .buy-item th {
	width: 90px;
}
#content-container .buy-item td:nth-child(2) {
	width: 130px;
}
.buy-item input[type="checkbox"] {
	width: 25px;
	height: 25px;
	margin: auto;
}
.buy-item input[type="number"] {
    width: 35px;
    font-family: Montserrat;
    font-size: 13px;
    background: #fbfbfb;
    border: 1px solid darkgray;
    padding: 4px;
    border-radius: 5px;
    font-weight: 500;
}
#order-container {
	margin-top: 30px;
	border-top: 1px solid #eaeaee;
	padding: 50px 30px;
	overflow: auto;
}
#order-info-left, #order-info-right {
	width: 49%;
	float: right;
	margin-top: 25px;
}
#order-info-left {
	float: left;
}
#order-info-left h4, #order-info-right h4, #order-payinfo-container h3 {
	text-align: center;
	margin: 35px;
}
#order-info-left .label, #order-info-right .label {
    margin: 8px 16px;
    width: 80%;
    float: right;
}
#order-container .label {
	display: block;
	font-weight: 500;
}
#order-container input[type="text"], #order-container input[type="email"] {
	border: 1px solid #999999;
	border-radius: 5px;
	font-family: Montserrat;
	width: 80%;
	display: block;
	font-size: 16px;
	padding: 8px 13px;
}
#order-payinfo-container {
	width: 600px;
	margin: 50px auto 30px auto;
	clear: both;
	padding-bottom: 25px;
	border: 1px solid #cecece;
	box-sizing: border-box;
	background: #f5f5f5;
}
#order-payinfo {
	width: 400px;
	margin: auto;
	padding-left: 16px;
}
#order-payinfo .label {
	margin: 16px 16px 16px 0;
}
#order-payinfo input[type="text"] {
	margin-top: 5px;
}
#expiry-container {
	display: block;
	width: 100%;
	overflow: auto;
}
#order-payinfo .placeholder-option {
	display: none;
}
#order-payinfo select {
	border-color: #999999;
	margin: 5px 15px 0 0;
	width: 105px;
	float: left;
}
#order-payinfo input[name="orderCardYear"] {
	width: 41%;
	float: left;
	box-sizing: border-box;
	height: 39px;
	margin-top: 5px;
    font-family: Montserrat;
    font-size: 15px;
    border: 1px solid #999999;
    padding: 8px 13px;
    border-radius: 5px;
    font-weight: 300;
}
#order-payinfo input[name="orderCardCvc"] {
	width: 80px;
}
input[type="submit"] {
	padding: 10px 15px;
	font-size: 16px;
	font-family: Montserrat;
	background: white;
	border: 1px solid #999999;
	border-radius: 5px;
	font-weight: 400;
	cursor: pointer;
	margin: auto;
	display: block;
}
input[type="submit"]:hover {
	background: #eeeeee;
}

/* Specific for faq.html */
.faq-container {
	background: #d0d0d0;
	width: 80%;
	margin: 30px auto;
	border-radius: 11px;
}
.faq-question {
	background: #eeeeee;
	padding: 13px;
	border-radius: 10px;
	cursor: pointer;
}
.faq-answer {
	background: #d0d0d0;
	padding: 13px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	display: none;
}

/* Specific for contact.html*/
#contactform-container {
	background: #f5f5f5;
	width: 100%;
	border: 1px solid #cecece;
	padding: 25px;
}
#contactform-container table {
	width: 95%;
}
#contactform-container tr:nth-of-type(2) {
	height: 60px;
}
#contactform-container th {
	text-align: right;
	width: 125px;
}
#contactform-container tr:nth-of-type(3) th {
	vertical-align: top;
}
#contactform-container input[type="text"], #contactform-container input[type="email"], #contactform-container textarea {
	border: 1px solid #999999;
	border-radius: 5px;
	padding: 5px;
	font-family: Montserrat;
	font-size: 14px;
	width: 93%;
}
#contactform-container input[type="text"] {
	width: 45%;
}
#contactform-container textarea	{
	height: 100px;
}

/* Specific for thanks.html */
#thanks-big-mobile {
	font-size: 68px;
	display: none;
}
#thanks-small-mobile {
	font-size: 34px;
	display: none;
}



/*Styling for footer*/
#container > footer {
	width: 100%;
	padding: 50px;
	background: #eeeeee;
	box-sizing: border-box;
	text-decoration: none;
	color: #666666;
	line-height: 1.8;
	overflow: auto;
}
#container > footer a {
	text-decoration: none;
	color: #666;
}
#container > footer a:active {
	color: #00c4ff;
}
#container > footer a:hover {
	text-decoration: underline;
}
#container > footer > table {
	width: 825px;
	margin: auto;
	border-collapse: collapse;
}
#container > footer > table > tbody > tr {
	width: 100%;
}
#container > footer > table > tbody > tr > td {
	vertical-align: top;
}
#container > footer > table > tbody > tr > td:nth-of-type(1) {
	width: 126px;
	line-height: 2;
}
#container > footer > table > tbody > tr > td:nth-of-type(2) {
	width: 500px;
	text-align: center;
	font-size: 2rem;
}
#container > footer > table > tbody > tr > td:nth-of-type(3) {
	width: 188px;
}
#container > footer table td #sm-icon-container {
	margin-bottom: 16px;
	margin-top: 10px;
}
#container > footer .sm-icon {
	padding: 0 7px;
}
#footer-info-3-mobile {
	display: none;
	width: 197px;
	margin: 0 auto 38px auto;
}
#footer-info-2-mobile {
	display: none;
	font-size: 1.6rem;
	text-align: center;
}

/* Used for clear divs */
.clear {
	clear: both;
	width: 100%;
}

/* Making the site responsive */

@media screen and (max-width: 1030px) {
	#container {
		width: 100%;
	}
	#header-banner {
		height: 200px;
		background: url(bilder/banner.jpg) 100% 32%/110% no-repeat;
	}
	#container #main-menu-list li {
		width: calc(100% / 7);
	}
	#content-container-inner-wide {
		max-width: 100%;
	}
	#pic-items-wrapper .pic-item-container {
		width: calc(100% / 2);
	}
	#picfilter {
		margin-left: 80px;
	}
	#container > footer > table {
		width: 96%;
	}
	#container > footer > table > tbody > tr > td:nth-of-type(1) {
		width: 15%;
	}
	#container > footer > table > tbody > tr > td:nth-of-type(2) {
		width: 60%;
	}
	#container > footer .sm-icon {
    	padding: 0 4px;
	}

}

@media screen and (max-width: 750px) {
	html {
		width: 100%;
	}
	body {
		width: 100%;
	}
	#header-banner {
		display: none;
	}
	#container #main-menu-list li:nth-of-type(7) {
		display: none;
	}
	#container #main-menu-list li {
		width: calc(100% / 3);
	}
	#content-container {
		max-width: 100%;
	}
	#content-container #content-container-inner-slim {
		max-width: 80%;
	}
	#content-container h1 {
		font-size: 4rem;
	}
	#content-container h2 {
		font-size: 2rem;
	}
	#startintro-img {
		display: none;
	}
	#container > footer {
		padding: 30px;
		line-height: 1.5;
	}
	#container > footer > table {
		display: none;
	}
	#footer-info-3-mobile {
		display: block;
	}
	#footer-info-2-mobile {
		display: block;
	}
	#sm-icon-container-mobile {
		margin-bottom: 10px;
	}
	#container > footer .sm-icon {
		padding: 0 2px;
	}
	#content-container-inner-wide #picfilter {
		width: 250px;
		margin: auto;
		margin-bottom: 40px;
		text-align: center;
		padding-bottom: 22px;
	}
	#picfilter h4 {
		margin-right: 0;
		margin-bottom: 1rem;
		display: block;
	}
	#pic-items-wrapper .pic-item-container {
		width: 100%;
	}
	.buy-item {
		margin-top: 10px;
	}
	.buy-item img {
		display: block;
		margin: auto;
	}
	.buy-item span, .buy-item .image-name-container {
		vertical-align: initial;
		display: block;
		margin: 10px auto 15px auto;
		text-align: center;
		width: 100%;
	}
	.buy-item table {
		float: none;
		margin: auto;
	}
	#order-container {
		padding: 50px 0;
	}
	#order-container h3 {
		margin-left: 30px;
		font-size: 1.3rem;
	}
	#order-info-left, #order-info-right {
		width: 100%;
		float: none;
		overflow: auto;
	}
	#order-payinfo-container {
		width: 100%;
	}
	#order-payinfo {
		width: 70%;
		margin: auto;
		padding-left: 16px;
	}
	#thanks-normal {
		display: none;
	}
	#thanks-big-mobile {
		display: block;
	}
	#thanks-small-mobile {
		display: block;
	}
}