/* 
   CSS reset by Eric Meyer
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
a:active,
a:hover {
  outline: 0;
}
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clearer {
	clear: both;
}

/* End Reset */

body {
	font: 1.000em 'roboto', helvetica, arial sans-serif;
	font-weight: 300;
}

h1 {
	font-size: 1.750em;
	text-align: center;
}

h2 {
	font-size: 1.500em;
	font-weight: 300;
}

h3 {
	font-size: 1.250em;
	margin-top: 10px;
}

h4 {
	font-size: 1.250em;
	color: #36d7b6;
}

p {
	font-size: 1.000em;
	font-weight: 300;
}

p.gray {
	color: #999999;
	line-height: 2.000em;
	margin-top: 10px;
	font-weight: 300;
}

a {
	text-decoration: none;
	color: #000000;
}

a:hover {
	text-decoration: none;
	color: #36d7b6;
}

.maincolor {
	text-decoration: none;
	color: #36d7b6;
}

.maincolorbg {
	background-color: #36d7b6;
}

.christmasred {
	color: #dc202c!important;
}

.christmasredbg {
	background-color: #dc202c!important;
	color: #ffffff!important;
}

.main {
	padding: 40px 0;
}

.mainbehandlingar {
	padding: 40px 0;
}

.maincontact {
	padding: 40px 0;
	text-align: center;
}

	.maincontact .medium-5 {
		padding-bottom: 30px;
	}

.plainintro {
	padding: 200px 0 100px 0;
}

	.plainintro h1 {
		font-size: 1.500em;
		line-height: 1.000em;
		margin-top: 50px;
	}

	.plainintro img {
		max-width: 80%;
	}

.longtext p {
	text-align: left;
	margin-bottom: 20px;
}

.personal {
	text-align: center;
	font-size: 1.250em;
}

	.personal h2 {
		margin-bottom: 20px;
	}

	.personal h3 {
		font-weight: 300;
	}

	.personal img {
		display: block;
		width: 80%;
		margin: 0 auto;
	}

	.personal .medium-3:nth-child(2) {
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.personal .medium-3:nth-child(3) {
		margin-bottom: 40px;
	}

.informationpage {
	
}

	.informationpage h2 {
		margin: 20px 0 10px 0;
	}

	.informationpage a img {
		width: 200px;
	}

	.informationpage img {
		display: block;
		margin: 0 auto 10px auto;
	}

	.informationpage .medium-8 img, .informationpage .medium-10 img {
		width: 200px;
		display: block;
		margin-left: 0;
	}

	ul.informationpagelist {
		margin-bottom: 20px;
		list-style: disc;
		text-align: left;
	}

	.informationpagelist li {
		margin-left: 20px;
	}

	.ipoffering img {
		margin-top: -40px;
		border: 1px #e9e9e9 solid;
		padding: 5px;
	}

	.ipoffering .stegen {
		display: block;
		background-color: #428877;
		color: #ffffff;
		position: relative;
		top: 20px;
		left: 10px;
		width: 90px;
		padding: 5px;
	}

	.ipoffering .maincolor {
		margin-top: 8px;
	}

.behandlingar {

}

	.behandlingar .medium-12 p {
		margin-bottom: 40px;
		text-align: center;
		font-size: 1.250em;
	}

.behandlingarstyle {

}

	.behandlingarstyle a img {
		width: 200px;
	}

	.behandlingarstyle h2 {
		margin: 10px 0 10px 0;
		font-size: 2.000em;
	}

	.behandlingarstyle .medium-4, .behandlingarstyle .medium-3, .behandlingarstyle .medium-6 {
		margin-bottom: 20px;
	}

.behandlingarline {
	background: url(../graphics/small-dotted-bg.png)!important;
	text-align: left;
	padding-left: 0px;
	padding-right: 0px;
	font-size: 0.850em;
}

	.behandlingarline a.third {
		display: block;
		margin-bottom: 10px;
	}

	.behandlingarline span.first {
		background-color: #ffffff;
		padding-right: 2px;
	}

	.behandlingarline span.second {
		float: right;
		background-color: #ffffff;
		padding-left: 2px;
	}

.behandlingar .medium-4 {
	margin-top: 40px;
	font-size: 1.250em;
	text-align: center;
	
}

	.behandlingar img {
		z-index: 1;
		position: relative;
	}

	.behandlingar p {
		z-index: 2;
		position: relative;
		margin-top: -40px;
		background-color: rgba( 255, 255, 255, 0.7);
		padding-top: 5px;
		padding-bottom: 7px;
	}

	.behandlingar a:hover {
		color: #000000;
	}

	.behandlingar .new {
		text-align: right;
		position: relative;
		top: -165px;
		background-color: #36d7b6;
		color: #ffffff;
		padding-right: 10px;
		width: 85px;
		font-size: 1.250em;
	}

	.behandlingar .medium-4:nth-child(1) {
		margin-top: 0;
	}

.vilkasalonger {
	
}

	.vilkasalonger img {
		width: 150px;
		margin-bottom: 5px;
	}

	.vilkasalonger .small-6, .vilkasalonger .small-12 {
		margin-top: 30px;
		margin-bottom: 25px;
	}

	.vilkasalonger .telefon {
		font-size: 1.500em;
		margin-top: 2px;
	}

	.vilkasalonger h2 {
		font-size: 1.250em;
	}

.kontaktboka {
	margin-top: 60px!important;
}

.omoss {
	text-align: center;
	font-size: 1.250em;
}

	.omoss h2 {
		margin-bottom: 20px;
	}

	.omoss p {
		text-align: center;
	}

.sscpromo {
	font-size: 1.250em;
}

	.sscpromo p {
		margin-bottom: 5px;
	}

	.sscpromo ul {
		margin-bottom: 20px;
		list-style-type: circle;
	}

	.sscpromo li {
		margin-left: 25px;
	}

.aligncenter {
	text-align: center;
}

.alignright {
	text-align: right;
}

.graybg {
	background: #f6f6f6;
}

.blackbg {
	background: #000000;
}

	.blackbg h2 {
		color: #ffffff;
	}

.redtext {
	color: #F00;
}

.icons {
	display: block;
	margin: 0 10px 20px 0;
	width: 35px;
	display: inline-block;
	vertical-align: top;
}

.textblock {
	width: 80%;
	margin-top: 2px;
	display: inline-block;
}

.underlinetext {
	text-decoration: underline;
}

.bgbox {
	background-color: rgba(54,215,182,0.5);
	padding: 20px 0;
}

.companylogos .row .medium-3:nth-child(3) {
	margin-bottom: 30px;
}

.companylogos img {
	display: block;
	margin: 0 auto;
	width: 80%;

	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+, IE10 */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    opacity: 0.5;
}

.companylogos img:hover {
	filter: none;
    -webkit-filter: grayscale(0%);
    opacity: 1.0;
}

.bokatid {
	color: #ffffff;
	width: 150px;
	text-align: center;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin-top: 10px;
}

	.bokatid:hover {
		background-color: #30B797;
	}

	.bokatid p {
		text-align: center;
		vertical-align: center;
		line-height: 50px;
	}

	.bokatidcenter {
		margin: 10px auto 0 auto;
	}

	.bokatidlong {
		width: 300px;
	}

.bokatidlitenarrangebox {

}

.bokatidlitenarrange h3 {

}

.bokatidliten {
	color: #ffffff;
	width: 100px;
	height: 28px;
	text-align: center;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

	.bokatidliten:hover {
		background-color: #30B797;
	}

	.bokatidliten p {
		vertical-align: center;
		line-height: 25px;
	}

.bottomline {
	height: 5px;
}

#kontaktkarta {
    position: relative;
    padding-bottom: 12%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
    padding-top: 150px;
}

	#kontaktkarta iframe {
		margin-top: 80px;
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100% !important;
	    height: 100% !important;
	}

	#kontaktkarta h1 {
		z-index: 1;
		font-size: 3.000em;
		position: relative;
		top: 0;
		color: #000000;
		background-color: rgba(255,255,255,0.5);
	}

/* First media query*/
@media screen and (min-width: 1500px) {

.behandlingarline {
	background: url(../graphics/dotted-bg.png)!important;
	font-size: 1.250em;
}

.companylogos .row .medium-3:nth-child(3), .personal .medium-3:nth-child(2), .personal .medium-3:nth-child(3), .behandlingar .medium-4, .behandlingar .medium-4:nth-child(1) {
	margin-top: 0;
	margin-bottom: 0;
}

	.behandlingar .medium-4:nth-child(-n+9) {
		margin-bottom: 20px;
	}

	.behandlingar .medium-4:nth-child(10) {
		margin-right: 2px;
	}

.main {
	padding: 80px 0;
}

#kontaktkarta h1 {
	top: 40px;
}

.maincontact {
	text-align: left;
}

}

@media screen and (min-width: 1025px) and (max-width: 1500px) {

.behandlingarline {
	background: url(../graphics/dotted-bg.png)!important;
	font-size: 1.250em;
}

.companylogos .row .medium-3:nth-child(3), .personal .medium-3:nth-child(2), .personal .medium-3:nth-child(3), .behandlingar .medium-4, .behandlingar .medium-4:nth-child(1) {
	margin-top: 0;
	margin-bottom: 0;
}

	.behandlingar .medium-4:nth-child(-n+9) {
		margin-bottom: 20px;
	}

	.behandlingar .medium-4:nth-child(10) {
		margin-right: 2px;
	}

.main {
	padding: 70px 0;
}

#kontaktkarta h1 {
	top: 40px;
}

.maincontact {
	text-align: left;
}

}

@media screen and (min-width: 640px) and (max-width: 1024px) {

.behandlingarline {
	background: url(../graphics/dotted-bg.png)!important;
	font-size: 1.100em;
	width: 90%;
}

.companylogos .row .medium-3:nth-child(3), .personal .medium-3:nth-child(2), .personal .medium-3:nth-child(3), .behandlingar .medium-4, .behandlingar .medium-4:nth-child(1) {
	margin-top: 0;
	margin-bottom: 0;
}

	.behandlingar .medium-4:nth-child(-n+9) {
		margin-bottom: 20px;
	}

	.behandlingar .medium-4:nth-child(10) {
		margin-right: 2px;
	}

.main {
	padding: 60px 0;
}

#kontaktkarta h1 {
	top: 20px;
}

.maincontact {
	text-align: left;
}

.behandlingar .new {
	text-align: right;
	position: absolute;
	top: 40px;
	background-color: #36d7b6;
	color: #ffffff;
	padding-right: 10px;
	width: 85px;
	font-size: 1.250em;
}

}

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

.behandlingarline {
	width: 95%;
	font-size: 0.800em;
}

}