/*
Theme Name: BR Perssons Rör
Theme URI: http://brperssons.se
Description: WordPress-tema för BR Perssons Rör
Version: 1.0
Author: Rainy Days
Tags:
*/


* {
	list-style-type: none;
	text-decoration: none;
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;	
}

html {-webkit-text-size-adjust: none;}

body {
	font-family: 'Source Sans Pro', 'Arial', sans-serif;
	font-weight: 400;
	font-size: 100%;
	/*background: #eaeaea;*/
	background: url(img/tree_bark.png) repeat;
}

#background {
	position: absolute;
	top: 114px;
	left: 0;
	width: 100%;
	height: 600px;
	/*background: #eaeaea; /* Old browsers */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.content {
	min-height: 90%;
	height: auto !important;
	height: 90%;
	margin: 0 0 -104px 0;
	padding: 0 0 40px 0;
}

.push {
	height: 104px; /* '.push' must be the same height as 'footer' */
}


.wrap {
	width: 96%;
	max-width: 1200px;
	margin: 0 auto;
}

.main h3 {margin: 0 0 4px 0;}
.main p {margin: 0 0 22px 0;}


/* --- NAV ------------------------------------------------- */

nav {
	position: relative;
	float: left;
	width: 100%;
	background: #002372;
	/*border-top: 4px solid #3B147A;*/
	border-bottom: 2px solid rgba(0, 0, 0, .2);
}

	nav ul {
		position: relative; 
		float: right;
		line-height: 106px;
	}

		nav ul li  {
			display: inline-block;
			text-align: center;
		}

		nav ul li a:link,
		nav ul li a:visited {
			color: #fff;
			font-family: 'Roboto', sans-serif;
			font-weight: 700;
			margin: 0 12px;
			/*border-bottom: 2px solid #fff;*/
		}
		
		nav ul li a:hover,
		nav ul li a:active {
			color: #e6e6e6;
			/*border-bottom: 2px solid #3B147A;*/
		}

		/* ---- MOBIL --- */

		.mobnav {
			display: none;
			position: relative;
			float: right;
			cursor: pointer;	
		}

		.burger {position: relative; float: right; display: block; width: 26px; background: #fff; height: 5px; margin: 40px 0 0 0; border-bottom: 0;}
		.burger:before, .burger:after {content:""; display: block; position: relative; top: 8px; width: 26px; height: 5px; background: #fff;}
		.burger:after {top: -13px;}

/* -- CONTENT -- */

.notification {
	position: relative;
	float: left;
	margin: 16px 0 0 0;
	width: 100%;
	text-align: center;
}
	.notification h2 {
		position: relative;
		display: inline-block;
		margin: 0 auto;
		padding: 10px 0;
	}

.main-full {
	position: relative;
	float: left;
	margin: 16px 0 0 0;
	width: 100%;
}

.main, .sidebar {
	margin: 16px 0 0 0;
}

.main {
	position: relative;
	width: 72.28070175438596%;
	min-height: 200px;
}

.sidebar {
	position: relative;
	width: 26.31578947368421%;
}

	.sb-item {
		position: relative;
		float: left;
		margin: 16px 0 0 0;
		width: 100%;
		word-wrap: break-word;
	}
		.sb-item:first-child {margin: 0;}

	.sb-head {
		position: relative;
		float: left;
		width: 100%;
		padding: 0 0 16px;
	}
		.sb-head:after {
			content: "";
			position: relative;
			float: left;
			margin: 15px 0 0 -17.5px;
			width: calc(100% + 35px);
			height: 2px;
			background: #d7d9d6;
		}

		.sb-head p {
			font-family: 'Roboto', sans-serif;
			font-size: 1.25em;
			font-weight: 700;
			color: #000;
			word-wrap: break-word;
		}

			.sb-item p span {
				color: #5A1022;
			}

		.sb-buttons {
			position: relative;
			float: left;
			width: 100%;
		}

			a.blue-btn:link,
			a.blue-btn:visited,
			a.blue-btn-full:link,
			a.blue-btn-full:visited,
			a.grey-btn:link,
			a.grey-btn:visited,
			a.grey-btn-full:link,
			a.grey-btn-full:visited  {
				position: relative;
				float: left;
				width: 50%;
				font-size: .875em;
				background: #B21938;
				text-align: center;
				padding: 14px 0;
				color: #fff;
			}
				a.blue-btn:hover,
				a.blue-btn:active,
				a.blue-btn-full:hover,
				a.blue-btn-full:active,
				button.formbtn:hover,
				button.formbtn:active {background: #7F0F26;}

				a.blue-btn-full:link,
				a.blue-btn-full:visited,
				a.grey-btn-full:link,
				a.grey-btn-full:visited {width: 100%;}

				a.grey-btn:link,
				a.grey-btn:visited,
				a.grey-btn-full:link,
				a.grey-btn-full:visited {background: #010100;}

				a.grey-btn:hover,
				a.grey-btn:active, 
				a.grey-btn-full:hover,
				a.grey-btn-full:active {background: #333333;}

.catlist {
	margin: 10px 0 0 0;
}
	.catlist li {
		padding: 4px 0;
	}

.editable ul {
	color: #666666;
	line-height: 1.5;
	margin-left: 1em;
	margin-bottom: 22px;
}
	.editable ul li {
		list-style-type: disc;
	}

.editable h1 {
	padding-bottom: 8px;
	margin-bottom: .825em;
}

.editable h4,
.editable h3 {
	margin-bottom: .25em;
}

.editable h3 {
	font-size: 1.25em;
}

.editable .textcol-left {
	position: relative;
	float: left;
	margin: 2em 0;
	width: 45%;
	padding-right: 5%;
	border-right: 1px solid black;
}
.editable .textcol-right {
	position: relative;
	float: left;
	margin: 2em 0;
	width: 44%;
	padding-left: 5%;
}

.editable a:link,
.editable a:visited {
	color: #6185d7;
	border-bottom: 1px solid rgba(0,0,0,0.2);
}

.editable a:hover {
	color: #232323;
	border-bottom: 1px solid rgba(0,0,0,1);
}

/* -- INDEX -- */

.openhours, .indexnews {
	width: 100%;
}

	.hours,
	.fullhours {
		position: relative;
		float: left;
		margin: 0 0 16px 0;
	}

	.fullhours {
		width: 100%;
		max-width: 380px;
	}
		.fullhours li,
		.hours li {
			position: relative;
			float: left;
			width: 40%;
		}

		.fullhours li:nth-child(even),
		.hours li:nth-child(even) {
			text-align: right;
			width: 60%;
		}

	.shortstory a {
		position: relative;
		display: block;
		font-size: .875em;
	}

	a.articlelink:hover .shortstory {
		opacity: 0.5;
	}

/* -- BILDGALLERI -- */
.gallery--item {
	position: relative;
	float: left;
	width: 21.25%;
	margin: 0 5% 1em 0;
}

.gallery--item:nth-child(4n+4) {
	margin-right: 0;
}

.gallery--item img {
	width: 100%;
}

.gallery--item p {
	font-size: 12px;
	font-style: italic;
	margin: 0;
}

span.slb_template_tag_ui_group_status {
	display: none!important;
}

/* -- LEVERANTÖRER -- */

.lev {
	position: relative;
	float: left;
	width: 21.25%;
	margin-right: 5%;
	margin-bottom: 5%;
	border: 1px solid #eaeaea;
	box-sizing: border-box;
}

.lev:nth-child(4n) {
	margin-right: 0;
}

.lev img {
	width: 100%;
	height: auto;
}


/* -- NYHETSARKIV -- */

.story {
	margin: 15px 0;
}
	a.storylink {
		display: block;
		width: 100%;
	}
		a.storylink:hover > .storywrap,
		a.storylink:active > .storywrap {
			opacity: 0.5;
		}

	.storywrap {
		position: relative;
		float: left;
		display: inline-block;
		width: 100%;
		padding: 0 0 10px 0;
	}
		.storywrap:before {
			content: "";
			position: relative;
			float: right;
			display: inline-block;
			background: url('img/right.svg');
			height: 17px;
			width: 13px;
			margin: 14px 0 0 0;
		}

	.story h3 {
		max-width: 100%;
		width: 80%;		
		text-overflow: ellipsis;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		border: 1px solid #fff;
	}

	a.articlelink:hover .shortstory {
		opacity: 0.5;
	}

/* -- SVENSK DJURSJUKVÅRD -- */

.banner {
	position: relative;
	margin: 0 auto 20px 0;
	width: 100%; 
}

.sdsul {
	position: relative;
	margin: 20px 0;
}
	.sdsul li {
		margin: 10px 0;
		display: inline-block;
	}
		.sdsul li:before {
			position: relative;
			float: left;
			margin: -2px 10px 0 0;
			content: url('img/check.svg');
			display: inline-block;
		}

		.sdsul li p span {
			font-weight: 500;
		}

		.sdslogo {
			position: relative;
			display: block;
			margin: 0 auto 10px auto;
			width: 120px;
		}

/* -- KONTAKT -- */

#map_canvas {
	width: 100%;
	min-height: 240px;
}

.info {
	width: 300px;
}

	/* -- FORMULÄR -- */

	.form {
		position: relative;
		float: right;
		margin: 38px 0 0 0;
		width: 100%;
	}

		form {
			width: 100%;
			max-width: 400px;
		}

			select {
				padding: 14px;
				width: 100%;
				background: #EDF0F3;
				outline: none;
				border: 0;
				-moz-box-shadow:    inset 0px 1px 1px 0px #D3D8DE;
				-webkit-box-shadow: inset 0px 1px 1px 0px #D3D8DE;
				box-shadow:         inset 0px 1px 1px 0px #D3D8DE;
				height: 45px;
				border-radius: 0;
				font-size: 0.875em;
				margin: 0 0 12px 0;
			}

			input[type=text],
			input[type=email],
			textarea {
				padding: 14px;
				font-size: .875em;
				margin: 0 0 12px 0;
				-webkit-box-sizing: 	border-box;
				-moz-box-sizing: 		border-box;   
				box-sizing: 			border-box;
				width: 100%;
				background: #f7f7f7;
				border: 0;
				-moz-box-shadow:    inset 0px 1px 1px 0px #D3D8DE;
				-webkit-box-shadow: inset 0px 1px 1px 0px #D3D8DE;
				box-shadow:         inset 0px 1px 1px 0px #D3D8DE;
			}

			input[type=text]:focus,
			input[type=email]:focus,
			textarea:focus,
			button.formbtn:focus {
				outline: 2px solid #333333;
			}
				::-webkit-input-placeholder { font-family: 'Source Sans Pro', sans-serif; font-size: .875rem; font-weight: 300; color: #A0A3A6;}
				:-moz-placeholder 			{ font-family: 'Source Sans Pro', sans-serif; font-size: .875rem; font-weight: 300; color: #A0A3A6;}
				::-moz-placeholder 			{ font-family: 'Source Sans Pro', sans-serif; font-size: .875rem; font-weight: 300; color: #A0A3A6;}			
				:-ms-input-placeholder 		{ font-family: 'Source Sans Pro', sans-serif; font-size: .875rem; font-weight: 300; color: #A0A3A6;}

			textarea {
				width: 100%;
				resize: none;
				min-height: 200px;
				margin: 0;
			}
			
			input[type=submit],
			button.formbtn {
				width: 100%;
				height: 48px;
				background: #010100;
				border: 0;
				margin: 8px 0 0 0;
				color: #fff;
				font-size: .75rem;
				font-weight: 300;
				font-family: 'Source Sans Pro', sans-serif;
				cursor: pointer;
			 }

			 input[type=submit]:hover {
			 	background: #333333;
			 }

/* -- OM OSS -- */

.player {
	position: relative;
	float: left;
	width: 100%;
	padding: 32px 0;
	border-bottom: 2px solid #d7d9d6;
}
		.player:first-child {padding: 0 0 32px 0;}
		.player:last-child {padding: 32px 0 0 0; border: 0;}

	.player img {
		position: relative;
		float: left;
		width: 30.518518518518519%;
		margin: 0 30px 0 0;
	}

	.player h3 {
		font-size: 1em;
		margin: 0 0 20px 0;
	}

	.player ul {
		position: relative;
		float: left;
		margin: 20px 0 0 0;
	}

		.player ul li {
			position: relative;
			float: left;
			width: 100%;
		}

/* -- BUTIKEN -- */

a.imglink {
	position: relative;
	float: left;
	margin: 20px 0;
	text-align: center;
	width: 100%;
}

	a.imglink img {
		display: block;
		margin: 0 auto;
		width: 80%;
		max-width: 280px;
	}

	a.imglink:hover,
	a.imglink:active {
		opacity: .2;
	}

/* -- PRISER -- */

.pricelist {
	position: relative;
	float: left;
	width: 100%;
	margin: 0 0 40px 0;
}
		.pricelist h3 {padding: 0 0 12px 0}
		.pricelist p {margin: 0;}

	.price {
		position: relative;
		float: left;
		width: 100%;
		padding: 12px 0;
	}

	.price:nth-child(odd) {background: #F2F6F9;}
	.price:nth-child(even) {background: #D9E0E5;}
		.service, .pricetag {
			position: relative;
			float: left;
			padding: 0 16px 0;
		}

			.pricetag {
				float: right;
			}

/* -- FOOTER -- */

.pre-footer {
	position: relative;
	float: left;
	width: 100%;
	background: #fff;
	padding: 50px 0;
	border-top: 1px solid #e6e6e6;
}

.col-4 {
	float: left;
	width: 21.25%;
	margin-right: 5%;
}

.col-4:last-child {
	margin-right: 0;
}

footer {
	position: relative;
	float: left;
	width: 100%;
	height: 101px;
	background: #343434;
	padding: 20px 0;
	-webkit-box-sizing: 	border-box;
	-moz-box-sizing: 		border-box;   
	box-sizing: 			border-box;

}
	.foot {position: relative; float: left; color: #fff}
	p.company {color: #fff; margin-top: 20px; font-weight: bold; font-family: "Roboto", serif;}

	footer ul {
		position: relative;
		float: right;
		margin: 20px 0 0 0;
	}
		footer ul li {
			display: inline-block;
			margin: 0px 10px 0 10px;
			text-align: center;
		}

			footer ul li a:link,
			footer ul li a:visited {
				color: #fbfbfb;
				font-size: 1em;
				font-weight: 700;
			}

/* -- TYPE -- */

h1, h2, h3, h4, h5, p.stamp {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	color: #000;
}

h1 {
	position: relative;
}
h1:after {
	content: "";
	left: 0;
	bottom: 0;
	position: absolute;
	width: 36px;
	height: 4px;
	background: #6185d7;
}

h1, h2 {
	font-size: 2em;
	line-height: 1.5;
	margin: .25em 0 .25em 0;
}

h3 {
	font-size: 1.5em;
}

h3.rpwe-title a:link,
h3.rpwe-title a:visited {
	font-size: 1.15rem;
	color: #6185d7;
}
h3.rpwe-title a:hover {
	color: #232323;
}

h4 {
	margin-bottom: 1em;
}

h5 {
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
	font-weight: 300;
}

footer h4,
footer h5 {
	color: #fff;
}

p {
	color: #666666;
	line-height: 22px;
}
	p span {
		color: #5A1022;
	}
	
p.time-stamp,
p.stamp {
	font-size: .875em;
	color: #8B8784;
	margin: 0 0 12px 0;
}


p.stamp {
	margin: 0 0 0;
}


p.mail,
p.news {
	color: #000;
}

strong {
	font-weight: 700;
	color: #000;
}

.editable strong {
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 700;
	color: #000;
}
/* -- LINKS -- */

a:link,
a:visited {
	color: #6185d7;
}

a:link, 
a:visited, 
a:hover, 
a:active,
button:visited,
button:hover,
button:active {
	-webkit-transition: color .075s, background .075s;
	-moz-transition: 		color .075s, background .075s;
	-ms-transition: 		color .075s, background .075s;
	transition: 				color .075s, background .075s;
}
	
a:hover,
a:active {
	color: #232323;
}

a.logo {
	position: relative;
	float: left;
	margin-top: 35px;
	outline: none;
	border: none;
}

a.logo img {width: 100%; outline: none; border: none;}

/* -- FIXES -- */

.alignright {
	float: right;
	margin-left: 1em;
	margin-bottom: 1em;
}

.alignleft {
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}

.center {
	text-align: center;
}

.box {
	padding: 1.25em;
	background: #fff;
	-webkit-box-sizing: 	border-box;
	-moz-box-sizing: 		border-box;   
	box-sizing: 			border-box;
}
	.npd {
		padding: 0;
	}


.clock:before 	{content: url('img/clock.svg');}
.news:before 	{content: url('img/news.svg');}
.cross:before 	{content: url('img/cross.svg');}
.bulb:before 	{content: url('img/bulb.svg');}
.mail:before 	{content: url('img/mail.svg');}
.pin:before 	{content: url('img/pin.svg');}
.booking:before {content: url('img/booking.svg');}
.phone:before 	{content: url('img/phone.svg');}
.target:before 	{content: url('img/target.svg');}

	.clock:before, 
	.news:before, 
	.cross:before, 
	.bulb:before,
	.mail:before,
	.pin:before,
	.booking:before,
	.phone:before,
	.target:before {
		position: relative; 
		float: left; 
		display: inline-block; 
		margin: 0 6px 0 0;
		padding: 1px 0;
	}
	.mail:before {margin: -3px 6px 0 0;}
	.news:before {margin: -1px 6px 0 0;}

.full {width: 100%;}
.margin {margin: 16px 0 0 0;}
.heading {padding: 0 0 8px 0;}
.block {position: relative; float: left; display: block;}
.divider {position: relative; float: left; width: 100%; height: 2px; background: #d7d9d6; margin: 32px 0;}

.left {float: left;}
.right {float: right;}

.blue {color: #6185d7;}
.grey {color: #999}
a.notype {display: block; font-family: 'Source Sans Pro', sans-serif;}
a.active {color: #383838;}

p.break-word {word-wrap: break-word;}
p.align-c {text-align: center;}

p.italic {font-style: italic;}
p.small {font-size: 14px; margin-bottom: 0;}

.mbottom {
	margin-bottom: 16px;
}

/* -- MEDIA QUERIES -- */

@media only screen and (max-width: 820px) {
	body {font-size: 14px;}
	footer, .push {height: 95px;}
	.content {margin: 0 0 -95px 0;}
}

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

	/* BG */
	#background {
		top: 96px;
	}

	/* NAV MOBIL */
	.logo {float: left; width: 160px; margin: 10px 0 12px 0;}
	nav {min-height: 78px;}
	nav ul {display: none; position: relative; float: left; width: 100%; line-height: 0; z-index: 999; margin: 0 0 12px 0;}
		nav ul li {width: 100%; padding: 0; margin:4px 0; background: #6185D7; border-radius: 8px;}
		nav ul li:first-child {padding: 0;}
		nav ul li:last-child {padding: 0;}
			nav ul li a:link,
			nav ul li a:visited {color: #fff; display: block; height: 45px; line-height: 45px; font-size: 1.125em; width: 100%; border-radius: 8px; margin: 0; border-bottom: none;}
			nav ul li a:active,
			nav ul li a:hover {background: #6185D7; text-shadow: 1px 1px #062A46; border-bottom: none; color: #fff;}
	.mobnav {display: block;}	
	/* SDS */
	.banner {display: none;}

	/* FOOTER */
	footer, .push {height: 133px;}
	.content {margin: 0 0 -133px 0;}
	.foot {width: 100%; margin: 0 0 10px 0; text-align: center;}
	footer ul {
		position: relative;
		float: left;
		width: 100%;
		text-align: center;
		margin: 10px 0 0 0;
	}

	.col-4 {
		width: 100%;
		margin-bottom: 5%;
		margin-right: 0;
	}

	/* GALLERY */

	.gallery--item {
		width: 47.50%;
	}

	.gallery--item:nth-child(4n+4) {
		margin-right: 5%;
	}

	.gallery--item:nth-child(even) {
		margin-right: 0;
	}


}

@media only screen and (max-width: 640px) {
	.main, .main-alt, .sidebar, .sidebar-alt, footer {width: 100%;}
	footer, .push {height: 223px;}
	.content {margin: 0 0 -223px 0;}
}

@media only screen and (max-width: 480px) {
	footer ul li { display: block;}
}

.slick-slide img {
	height: 500px;
	width: 100%;
	object-fit: cover;
}
@media only screen and (max-width: 980px) {
	.slick-slide img {
		height: 450px;
	}
}
@media only screen and (max-width: 880px) {
	.slick-slide img {
		height: 400px;
	}
}
@media only screen and (max-width: 600px) {
	.slick-slide img {
		height: 350px;
	}
}