@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700i|Lobster|Roboto:300,300i,400,400i,700,700i&display=swap');
/* MAIN COLOR: #2a77b9, hr #6460d1, darker #3e39c6 */

/* GENERAL */
html, body {
	width: 100%;
	height: auto; }
	
* {
	box-sizing: border-box;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; }

h1, h2:not(.Lobster), h3, h4, h5 {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-style: italic;
	}

	
body {
	font-size: 15px;
	margin: 0; padding: 0;
	scroll-behavior: smooth; }

a, p, i, font {
	font-family: 'Roboto', sans-serif;
	font-weight: 300; }
	
a { padding: 0; margin: 0; }
a:visited { }
p:not(#footer p) { font-size: 1em; text-align: left; }
.cog { 
    cursor: pointer;
    padding: 0;
    z-index: 551;
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    width: 35px;
    height: 35px;
    color: #FFF;
    background: transparent;
    transition: 0.3s;
    margin: 0; }
.cog:hover { opacity: 0.8; }
.cog i {
    line-height: 35px;
    font-size: 22px;
    padding: 0;
    margin: 0;}


/* FULLSCREEN Msg */
.fullscreen-cover {
	width: 100%; height: 100%;
	position: fixed; top: 0; left: 0;
	z-index: 99994;
	background: rgba(0,0,0,0.45); 
	display: none; }
	
.fullscreen-msg {
	border-radius: 10px;
	box-shadow: 4px 4px 4px rgba(255,255,255,0.3);
	text-align: left;
	position: relative; z-index: 99999;
	margin: 20vh auto 0 auto;
	display: none;
	background: #FFFFFF;
	color: #505050;
	padding: 0 0 20px 0; 
	width: 50%; height: auto;
	min-width: 350px; 
	box-shadow: 4px 4px 4px #808080;}
.fullscreen-msg h2 { text-align: center; padding: 80px 20px 10px 20px; }
.fullscreen-msg p { padding: 0 50px 20px 50px; margin: 0 auto; }
.fullscreen-msg a { text-decoration: none; color: #FFFFFF; }
.fullscreen-msg a:hover { color: #2a77b9; }
.fullscreen-msg hr {position: absolute; width: 100%; height: 50px; top: -8px; background: #2a77b9; border: none; border-top-right-radius: 10px; border-top-left-radius: 10px; } 

/* LOGO */
.logo-twoline * { opacity: 0; }
.logo-twoline {
	position: relative;
	font-family: 'Lobster', cursive !important; background: none;
	max-width: 550px; height: auto; max-height: 200px;
	display: block; padding: 4px !important;
	margin: 0 auto !important;  margin-top: 5% !important; }
.logo-twoline * { display: inline-block; }
.logo-twoline h2 {
	font-size: 5.5em; font-weight: normal;
	margin: 0 auto; letter-spacing: 4px;
	vertical-align: middle;
	color: #6460d1; }
.logo-twoline hr {display: none; background: #808080; border: none; height: 2px; width: 60%; margin: 10px auto; animation: anini 1s ease 0.5s forwards; }
.logo-twoline img { height: 80%; max-height: 120px; width: auto; margin: 2px auto; vertical-align: middle; }

.logo-oneline {
	position: relative; background: none;
	font-family: 'Lobster', cursive !important;
	width: auto; height: auto; max-height: 100px;
	display: block; padding: 4px !important;
	margin: 0 auto !important; }
.logo-oneline * { display: inline-block; }
.logo-oneline hr { display: none; }
.logo-oneline h2 { font-size: 4.5em; font-weight: normal; margin: 0 auto; margin-left: 3px; color: #6460d1; vertical-align: top; border-left: none; letter-spacing: 2px; }
.logo-oneline img { height: 100%; max-height: 100px; width: auto; margin: 2px auto; vertical-align: top; }

.logo-oneline:hover, .logo-twoline:hover { cursor: pointer; }

@keyframes anini {
	0% { width: 0; opacity: 1; }
	50% { width: 80%; }
	60% { width: 80%; }
	100% { width: 60%; opacity: 1; }
}

/* HEADER */

#header {
	display: none;
	position: fixed;
	top: 15px; right: 0;
	width: 100px;
	max-width: 100%; 
	height: 10vh;
	padding: 1vh 2vw; 
	z-index: 9999;}

#logo { width: 130px;
		margin-bottom: 90%;
		position: absolute;
		top: 20px; left: 25px;
		opacity: 0;  }

.intro { animation: intro 1.5s ease-in-out forwards; animation-iteration-count: 1; }
.intro-delay { animation: intro 1.5s 1.1s ease-in-out forwards; }
.intro-delay-quick { animation: intro 0.8s 1.2s ease-in-out forwards; }
	@keyframes intro {
	from{ opacity: 0; }
	to { opacity: 1; }
	}
#nav-btn { display: block; position: absolute; font-size: 3em; float: right; right: -100%; transition: 0.3s; text-decoration: none;  color: #2a77b9; }
#nav-btn:active { color: #808080; }

#topper { transition: 0.3s; }
.bottomline {
	position: relative; z-index: 1005; 
	border-top: 1px solid #505050;
	border-bottom: 1px solid #505050;
	top: 0; left: 0;
	width: 100%;
	margin: 0;
	background: #FFFFFF; }
.infobox {
	animation: intro 0.8s 1.6s linear forwards;
	opacity: 0; 
	color: #505050; font-size: 1.2em; font-weight: bold;
	width: auto; min-width: 100px; 
	margin: 40px auto!important; }

.infobox h2 { display: inline-block; font-size: 1em; font-style: normal; margin: 20px; }
.infobox h2 i { color: #2a77b9; }

.bottomline a {
	font-weight: 700;
	font-size: 1.05em; transition: 0.3s;
	display: inline-block;
	width: auto;
	padding: 10px 15px;
	margin: 5px auto; 
	text-decoration: none; 
	color: #505050; float: left; }
.bottomline a:hover { border-bottom: 2px solid #2a77b9; margin: 0 auto; }
.bottomline a:nth-last-of-type(-n+3) { float: right; }

.bottomline .topline {
	border-bottom: 1px solid #f1f1f1; 
	overflow: hidden;
	height: 0;
	transition: 0.3s; }

#topline .logo-oneline { float: left; margin-left: 50px !important; margin-top: 5px; height: 50px !important; }
#topline .logo-oneline img { height: 40px; vertical-align: middle; }
#topline .logo-oneline h2 { font-size: 2em; margin-left: 0px; vertical-align: middle; }
#topline .infobox { margin: 0 auto 20px auto !important; float: right; font-size: 1em !important; position: relative; right: 0; }
#topline .infobox button { margin-right: 20px; cursor: pointer; }

.dd:hover { margin-bottom: 0; padding-bottom: 20px; }
.bottomline ul {
	transition: 0.3s;
	border-top: 1px solid #505050;
	border-bottom: 1px solid #505050;
	height: auto;
	width: 100%; padding: 0; padding-left: 50px;
	display: none;
	background: #F1f1f1;
	position: absolute;
	top: 3.3em;  left: 0;
	margin: 0 auto; }
.bottomline ul:hover {display: block; }
.bottomline ul li {
	float: left; 
	display: inline-block;
	margin: 0 5px;
	padding: 0;
	color: #505050; }
.bottomline ul li a {
	font-size: 1.05em;
	text-decoration: none; 
	color: #505050; }
.dd:hover + ul { display: block; }
/* NAVIGATION */

/* The side navigation menu */
.sidenav {
    height: 0; /* 100% Full-height */
    width: 100%; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 99992; /* Stay on top */
    top: 0;
    right: 0;
    background-color: #FFF;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding: 0; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

.sidenavOpen { height: 100%; padding-top: 60px; }

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 1.1em;
    color: #818181;
    transition: 0.3s;
    text-align: left;
}

.sidenav a:not(.lesser) { clear: both; }
.sidenav a:not(.a-img) { display: block; }

.sidenav a.lesser {
	float: left;
	font-size: 0.8em;
	padding-left: 50px;
	display: inline-block;
	width: 49%; }

.sidenav a.lesser:hover {
	background: #818181; color: #FFF; }
	
.hr {
	border: none; 
	height: 1px;
	width: 60%;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }
/*.sidenav hr { width: 55%; margin: 0 auto; padding-left: 8px; height: 3px; background: #FFFFFF; }*/

/* When you mouse over the navigation links, change their color */
.sidenav a:not(.closebtn):not(.a-img):not(.lesser):hover{
	width: 100%;
    background: #818181; color: #FFF;
}

.sidenav a.a-img { display: inline-block; width: 32%; }
.sidenav a.a-img img { width: 25px; }

/* Position and style the close button (top right corner) */
.sidenav .closebtn, .fullscreen-msg .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.sidenav .closebtn {
	color: #818181; }


.sidenav .logo-oneline h2 { font-size: 3em; }
.sidenav .logo-oneline img { height: 60px; width: auto; margin: 0;}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
   
}
	

/* FOOTER */

#footer {
	z-index: 550;
    position: relative;
    bottom: 0;
    min-height: 200px;
    background: rgba(179, 179, 179, 0.29);
    width: 100%;
    height: auto;
    text-align: center; }
#footer a, #footer p { font-weight: 700; }
#footer a { color: #888; text-decoration: none; }
#footer > span {
	background: rgba(160, 155, 228, 0.85);
    z-index: 550;
    padding: 20px 0;
    margin: 0px 50px 40px 50px;
    vertical-align: top;
    text-align: center;
    font-size: 1em;
    color: #FFFFFF;
    line-height: 1;
    display: inline-block;
    width: auto;
    min-width: 300px;
    height: 100%;
    min-height: 255px;
    max-width: 500px; }

#footer > span > table { margin: 20px auto; color: #FFFFFF; width: 100%;}
#footer table h2 { padding: 0; margin: 8px; }
#footer > span > table td:nth-child(even) { text-align: right; padding: 0; margin: 0; }
#footer table p { padding: 0 0 0 5px; margin: 4px auto; text-align: justify; line-height: 1.3;}
.closed { color: #f70d0d; }

.footer-book-button { font-size: 1.2em; margin: 4px auto; cursor: pointer;}
.footer-book-button, .findusbutton {
	display: block;
	font-size: auto; font-weight: bold; padding: 20px 25px; text-align: center;
	min-width: 190px; width: 50%; text-transform: uppercase; color: auto !important; }
.findusbutton { width: 90%; text-decoration: none; margin: 0 auto !important;}
.button-white { background: transparent; color: #FFF; border: 3px solid #FFF; transition: 0.3s; } 
.button-white:hover { background: #FFF; color: #2a77b9; }
	
	
.bottomspan {
	z-index: 550;
    text-align: center;
    box-shadow: none;
    height: 30px;
    padding-top: 5px;
    margin: 0;
    background: #e6e6e6;
    color: #505050;
    transition: all 0.3s ease-out;
    position: absolute;
    left: 0; 
    width: 100%; }
.bottomspan img { height: 20px; }
	
.bottomspan > div {
		display: -webkit-box;
    	display: -webkit-flex;
    	display: -moz-box;
    	display: -ms-flexbox;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap; 
		-webkit-flex-wrap: wrap;
      	-ms-flex-wrap: wrap;
	flex-basis: 100%; } 

/* MAIN PAGE */
#wrapper {
	max-width: 1920px;
	width: 100%; height: 100%;
	background: #FFFFFF;
	text-align: center;
	margin: 0 auto; padding: 0;
	display: block; }

section {
	position: relative;
	margin: 0 auto;
	width: 100%; height: auto;
	display: block; }

section.first { min-height: 100vh; }

.subsection { margin: 0 auto; padding: 0; position: relative; }

#index-textsect { max-width: 1200px; }
#index-textsect > .subsection {
	display: inline-block; width: 45%; }
.text-section {
	color: #2a77b9; 
	/*min-width: 50%;*/
	padding: 50px 20px;
	margin: 0; min-width: 49.9%;
	height: auto;
	display: flex;
		display: -webkit-box;
    	display: -webkit-flex;
    flex: 0 0 49.9%;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center; }


.text-section:nth-of-type(1) { order: 1; }
.text-section:nth-of-type(2) { order: 2; }
.text-section:nth-of-type(3) { order: 3; }
.text-section:nth-of-type(4) { order: 4; }
.text-section:nth-of-type(5) { order: 5; }
.text-section:nth-of-type(6) { order: 6; }
.text-section:nth-of-type(7) { order: 7; }
.text-section:nth-of-type(8) { order: 8; }

.text-section h2 { width: 100%; text-align: center; }
.text-section p { padding: 20px; width: 100%; text-align: justify; margin: 0; max-width: 500px; }
.text-section img { height: 50%; padding: 0; margin: 0;}

.info-big, .info-normal, .info-full {
	cursor: pointer;
	position: relative;
	z-index: 1;
	background: white;
	margin: 5px !important;
	min-height: 250px; height auto; width: auto;
	padding: 0 !important;
	vertical-align: top; overflow: hidden; }

.info-overlay {
	position: absolute; top: 0;
	transition: 0.5s;
	width: 100%;
	height: 100%;
	padding: 20px 30px !important;
	text-align: left;
	}
.info-overlay h2 { font-size: 1.4em; margin: 5px auto !important; }

.sr { left: -100%; }
.sl { left: 100%; }

.bg { background: rgb(42, 143, 185); background: rgba(42, 143, 185, 0.85); }
.or { background: rgb(255, 179, 102); background: rgba(255, 179, 102, 0.85); } 
.bl { background: rgb(42, 119, 185); background: rgba(42, 119, 185, 0.85); }
.gr { background: rgb(128, 255, 128); background: rgba(128, 255, 128, 0.85); }
	
.infosect > h4 { display: none; color: #2a77b9; font-weight: normal; }
.info-big > img, .info-normal > img, .info-full > img {
	border: 1px solid #808080;
	z-index: 10;
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%; min-height: 100%;
	transition: 0.5s; }

.info-big > img, .info-normal > img { object-fit: cover; }
.info-full > img { object-fit: contain; margin: 0 auto; }

.info-big:hover .info-overlay, .info-normal:hover .info-overlay, 
.info-full:hover .info-overlay { z-index: 20; left: 0; }
.info-full:hover .slide-in  { color: #808080; transition: 0.5s; }
.info-big:hover > img, .info-normal:hover > img { transform: scale(1.1); }


.info-big { min-width: 450px; width: 40%; padding-top: 20% !important;}
.info-normal { min-width: 250px; width: 25%; padding-top: 20% !important;}
.info-full {
	outline: 1px solid #808080;
	padding: 30px 20px 20px 50px !important;
	width: 66%; min-width: 710px;
	min-height: 200px; height: 200px;
	display: block !important;
	margin: 5px auto !important; }
.info-full h2 { margin: 15px auto; }

.info-overlay > img {
	position: absolute;
	background: #FFF; 
	bottom: 5%; outline: 1px solid #505050;
	padding: 5px;
	margin: 10px;
	left: 5%;
	max-width: 30%;
	object-fit: contain; }
	
@media screen and (max-width: 1170px) {
.info-normal p { font-size: 0.9em; }
.info-normal h2 { font-size: 1.1em; }
}

.flexcont {	
    	display: -webkit-flex;
    	display: -ms-flexbox;
	display: flex;
	width: 100%; 
	flex-direction: row; 
		-webkit-flex-wrap: wrap;
      	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: center;
	align-content: space-around;
	align-items: stretch;
	padding: 0; }

.flexcont > div { width: 45%; min-width: 450px; color: #808080; align-self: center;}
.flexcont > div img { width: 75%; object-fit: contain; margin: 0 auto; }

.contact {
	padding: 50px 50px 0 50px;
	position: relative;
    	display: -webkit-flex;
    	display: -ms-flexbox;
	display: flex;
	width: 100%; 
	flex-direction: row;
		-webkit-flex-wrap: wrap;
      	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: center; 
	align-content: space-between;
	align-items: stretch; }

.contact > div {
	opacity: 0;
	background: #FFFFFF; 
	height: auto; margin: 0 0 50px 0px !important;
	width: 30%; min-width: 300px; max-width: 450px;
	text-align: center !important; color: #2a77b9; }

.contact > div:not(:first-child){
	border-left: 1px dotted #2a77b9; }
	
.contact > div:first-child p { padding: 5px; }
.contact > div table { margin: 0 auto; text-align: justify; }

.contact > div p { margin: 0 !important; padding: 0; font-weight: 700; }

.impl { padding-bottom: 50px; }
.impl > div:not(.topimpl) { width: 49%; display: inline-block; position: relative; padding: 0 !important; min-width: 400px !important; }
.impl > div > div { display: block; width: 100%; }
#modvid > img { width: 70%; cursor: pointer; padding: 10px; background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.85); }
.impl > div > div > img { padding: 10px; background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.85); width: 80%; }
.impl > .topimpl { width: 100%; display: block; position: relative; padding: 10px; }
#Modal > iframe { width: 60%; min-height: 400px; }

.topimpl > h2 { color: #2a77b9; }

/* SIX IMPL */
.sixImplPic { height: 420px; background-image: url('img/straumann/Straumann_Logo.svg'); background-position: center; background-size: 80% 80%; }
.sixreasonswhy {
	margin: 0; padding: 10vh 50px 5px 50px;
	position: absolute; bottom: 0; left: 0;
	width: 100%; background: #FFF; text-align: center;
	color: #2a77b9;
	border-top-right-radius: 5px; }
#six-impl .clickable:hover { box-shadow: 1px 4px 10px 0 rgba(0,0,0,0.3); }
#six-impl { padding: 0 20px 20px 20px;  height: auto; }
#six-impl > div {
	align-self: stretch; 
	opacity: 0;
	box-shadow: 2px 8px 16px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	margin: 20px 10px;
	flex: 0 0 15%; min-width: 200px; max-width: 210px;
	vertical-align: top;
	padding: 0;
	/*border: 1px solid #505050; */}
#six-impl > div > span {
	display: table-row;
	vertical-align: middle;
	padding: 0;
	display: block; 
	width: 100%; height: auto; }
#six-impl > div > span p {margin: 0; color: #505050; }
#six-impl > div > span:first-of-type {
	background: black;
	vertical-align: middle;
	padding: 0; margin: 0;
	position: relative;
	padding-top: 75%; }
#six-impl > div > span:first-of-type p {
	display: table-cell; vertical-align: middle;
	color: #FFF; color: rgba(255, 255, 255, 0.65);
	font-weight: 900;
	font-size: 10em; line-height: 100%;
	position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
#six-impl > div > span:last-of-type p {
	text-align: left;
	padding: 15px 20px !important; }
#six-impl > div > span > img {
	position: absolute; top: 0; left: 0; bottom: 0; right: 0;
	height: 100%; width: 100%; object-fit: contain; margin: 0; padding: 0;}
	
@keyframes scale-up {
	from { transform: scale(0.75); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

/* END SIX IMPL */

/* SLIDE SECTIONS */

.leftarrow {
	color: #2a77b9; font-size: 3em;
	width: 5%; height: 100%;
	float: left;
	position: absolute; top: 0; left: 0; }
.leftarrow > i, .rightarrow > i {
	z-index: 1000;
	position: absolute;
	top: 38%;
	padding: 15px 25px;
	height: auto;
	font-weight: bold;
	background: #FFF; 
	border: 0.5px solid #2a77b9; }
.rightarrow > i {
	right: 0; border-right: none;
	box-shadow: -5px 8px 8px #888888;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px; }
.leftarrow > i {
	left: 0; border-left: none;
	box-shadow: 5px 8px 8px #888888;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px; }

.rightarrow {
	color: #2a77b9; font-size: 3em;
	width: 5%; height: 100%;
	float: right;
	position: absolute; top: 0; right: 0; }

.rightarrow > i:hover, .leftarrow > i:hover {
 	cursor: pointer;
	transition: 0.3s;
	color: #505050;
	background: #FFFFFF; }
.leftarrow > i:hover {
	box-shadow: 8px 14px 8px #888888; }
.rightarrow > i:hover {
	box-shadow: -8px 14px 8px #888888; }

#slidecontainer {
	width: 100%;
	height: 100%; 
	margin: 0; padding: 0 !important;
	white-space: nowrap;
	overflow-x: hidden; }
.logotype-left {
	max-width: 20%; 
	object-fit: contain;
	z-index: 999; }
.image-right-bottom {
	width: 30%; object-fit: contain;
	position: absolute;
	bottom: 0; right: 0; }
.slide {
	vertical-align: top;
	display: inline;
	width: 100%;
	height: 100%;
	padding: 20px 6.5% !important; }
.slide-content {
	overflow: hidden;
	position: relative;
	width: 100%; height: 100%; }
.animcont {
	white-space: normal;
	display: none; position: relative;
	animation: slide-down 0.5s ease-out forwards; 
	margin-left: 5%;}

.leftside {
	font-size: 1.8em !important;
	float: left; left: 5%;
	clear: both; text-align: left;
	max-width: 50%;
    margin: 10px auto; }

.slide-content h1:not(.introheader) {
	font-weight: bold;
	font-size: 2em; }
.slide-content p {
	white-space: normal; word-wrap: wrap; height: auto;
	text-align: left;
	padding: 20px;
	clear: both;
	color: #505050;
	font-size: 1.3em;
	display: block; }

.slide-content > div {
	display: inline-block;
	max-width: 50%; height: 100%;
	vertical-align: top; }

.slide-content > img:not(.dental-icons) {
	max-width: 80%; margin: 0 auto; object-fit: contain; }
.introheader { font-size: 3.4em; font-weight: bold; }
.dental-icons {
	position: absolute;
	bottom: 0; right: 10%;
	display: inline-block;
	max-width: 40%;
	margin: 0 auto; }
.dental-icons:first-of-type { left: 10%; right: auto; }
/*.dental-icons-top { max-width: 80%; max-height: 20%; object-fit: contain; }*/


	.text { min-width: 60%; padding: 30px; }
	.image { max-width: 40%; }
	a.moreinf {
		display: inline-block; float: right;
   		text-decoration: none; clear: both;
   		padding: 7px 14px; margin: 1px 1px 0 0;
   		background: rgb(110, 169, 222);
   		color: #fff;
   		text-transform: uppercase;
   		-webkit-box-shadow: 0 0 1px #000;
   		-moz-box-shadow: 0 0 1px #000;
   		box-shadow: 0 0 1px #000; }
   	a.moreinf:hover {
   		cursor: pointer;
   		-webkit-box-shadow: 0 0 5px #000;
   		-moz-box-shadow: 0 0 5px #000;
   		box-shadow: 0 0 5px #000;
   		background: rgb(42, 119, 185);
   		background: linear-gradient(to right, rgb(110, 169, 222), rgb(42, 119, 185)); }
   		
	.single {
		width: 40%; min-width: 400px; min-height: 225px; 
		padding-top: 22.5%; position: relative; margin: 50px auto;}
	.single > span, .two > span {
		overflow-x: hidden; 
		position: absolute;
		top: 25%; left: 0;
		bottom: 0; right: 0; }
	.two {
		min-height: 100px; min-width: 200px;
		display: inline-block;
		width: 20%; padding-top: 11.25%;
		position: relative; margin: 50px;
		box-shadow: 5px 5px 4px #808080; }
	.two:hover { font-size: 1.05em; box-shadow: 8px 8px 7px #808080; cursor: pointer; transition: 0.3s;}
	.two:active { width: 18%; padding-top: 10.5%; font-size: 0.9em; box-shadow: 2px 2px 2px #808080; }
	.est { top: 0; }
	.est > img { object-fit: contain; width: 70%; }
	.est > p { display: inline-block; padding: 0 10px; }
	.estoverlay {
		background: transparent; background: rgba(255, 255, 255, 0.85);
		height: 100%; width: 80%; position: relative; 
		padding: 10px 10px 20px 10px;
		 }
		 .estoverlay > h2 { width: 70%; margin: 10px auto; font-size: 1em; color: #2a77b9; }
		 .estoverlay > ol {
		 	display: inline-block;
		 	width: 70%;
		 	margin: 10px auto 20px auto;
		 	padding: 0;
		 	text-align: left;
		 	list-style-type: none;
		 	color: #333;}
		 .estoverlay > ol > li { padding:none; display: none; }
		 .estoverlay > ol > li:first-child { display: block; }
		 .estoverlay > p {
		 	color: #2a77b9;
		 	vertical-align: top;
		 	width: 10%;
		 	font-size: 1.5em; 
		 	font-weight: bold;
		 	display: inline-block;
		 	position: relative;
		 	bottom: -2%; right: auto;
		 	padding: 0; margin:10px 0; }
		 .nextbut, .prevbut { color: #2a77b9; }
		 .nextbut { position: absolute; float: right; top: 35%; right: 0; font-size: 2em !important; margin: 10px; cursor: pointer; }
		 .prevbut { position: absolute; float: left; top: 35%; left: 0; font-size: 2em !important; margin: 10px; cursor: pointer; visibility: hidden; }
		 .source { position: absolute; margin-top: 50px !important; float: left; bottom: 0; left: 0; font-size: 0.6em; color: #333; font-style: italic; }
		 .source a { color: inherit; text-decoration: none; }
		 .source a + p { display: none; color: #000; margin-left: 5px; }
		 .source a:hover { text-decoration: underline dotted; color: #000;}
		 .source a:hover + p { display: inline; }
		 
	.single > .overlay {
		overflow: hidden;
		background: #FFFFFF;
		position: absolute;
		left: 100%; top: 0;
		transition: 0.5s ease-in-out; }
	.above {
		width: 100%; margin: 0 auto;
		position: absolute;
		top: 0; bottom: 0; left: 0; right: 0; }
	.slide-in {
		color: #2a8fb9;
		text-align: left;
		position: relative;
		margin: 20px auto 0 auto;}
	.slide-in i { color: rgb(42, 119, 185); }
	.overlay img { object-fit: cover; height: 100%; float: right; }
	.single:hover > .overlay { left: 0; }
	.single > span h1 { font-size: 2em; }
	.single > span p { font-style: italic; }
	
section + h3 { width: 100%; background: #2a77b9; color: #FFFFFF; text-transform: uppercase; padding: 10px 0; margin-bottom: 0; }

.break-pic { height: 500px; }

.topslider { font-size: 30px !important; color: #808080; }
.top { padding-top: 50px !important; }
.clear-txt {
	position: relative;
	font-family: 'Lato', sans-serif;
	color: #2a77b9;
	border: none;
	padding: 30px; }
.clear-txt:not(.top) { height: auto; top: 35%; } 
.clear-txt > h3 { font-size: 3em; width: 100%; margin: 0; }
.clear-txt > p { font-size: 1.1em; width: 30%; }
.right { float: right; max-width: 50%; }
.left { float: left; max-width: 50%;  }

.bottom-span {
	width: 50%; min-width: 550px;
	margin: 0 auto;
	position: absolute; bottom: 10%; left: 25%; right: 25%;
	padding: 50px 20px; 
	opacity: 0;}
.bottom-span > button, .abc, .button-whitee, .button-whitee-rev, .cont-butt {
	font-size: 1.25em; font-weight: bold; padding: 16px 20px;
	width: 40%; max-width: 220px; min-width: 180px; margin: 10px 20px; text-transform: uppercase; }
.bottom-span > button:hover { cursor: pointer; }
.button-blu { background: #6460d1; color: #FFFFFF; border: 3px solid #6460d1; }
.button-whitee { font-size: 1.1em; padding: 12px 14px !important; background: #6460d1; color: #FFF; border: 3px solid #6460d1; }
.button-whitee-rev { font-size: 1.1em; padding: 12px 14px !important; background: none; color: #FFF; border: 3px solid #FFF; }
.button-clear { background: transparent; color: #3e39c6; border: 3px solid #3e39c6; transition: 0.3s; }
.cont-butt { background: transparent; color: rgb(42, 143, 185) !important; border: 3px solid rgb(42, 143, 185); transition: 0.3s; }
	.button-blu:hover { background: #3e39c6; border: 3px solid #3e39c6; }
	.button-whitee:hover { cursor: pointer; color: #6460d1; background: none; background: rgba(255, 255, 255, 0.25); border: 3px solid #6460d1; transition: 0.3s; }
	.button-whitee-rev:hover { cursor: pointer; background: #3e39c6; border: 3px solid #3e39c6; transition: 0.3s; }
	.button-clear:hover { background: #3e39c6; color: #FFFFFF; border: 3px solid #3e39c6; }
	.cont-butt:hover { background: rgb(42, 143, 185); color: #FFFFFF; }

.topcont { padding-top: 80px !important; width: 100%; height: 100%; background: none; background: rgba(179, 179, 179, 0.29); }
.topcont h3, .topcont h1 { color: #FFF; padding: 0; margin: 0; }
.topcont h3 { font-weight: normal; }
.topcont h1 { text-transform: uppercase; }

section div:not(.tab):not(.tabcontent):not(.clear-txt):not(.subcontent):not(.mySlides):not(.slideshow-container):not(.card):not(.container):not(.not):not(.bottDiv):not(.bottomspan){
	display: inline-block;
	margin: 0; padding: 10px 20px; overflow: auto; }


/* GALLERY */
.beh-gall-beh { display: inline-block;}
.beh-menu {
	z-index: 560;
	animation: intro 0.2s linear 0s forwards;
	font-size: 1.05em;
	color: #808080; text-align: left;
	float: left; top: 120px; left: 40px;
    padding: 0; margin: 0;
	min-height: 10px; height: auto;
	width: auto; min-width: 250px; max-width: 315px;
	white-space: nowrap;
  	overflow: hidden;
  	display: inline-block;
  	text-overflow: ellipsis;
	position: -webkit-sticky;
	position: sticky; }
.beh-menu:not(:first-of-type) { display: none; }
.beh-menu h3 {
	width: 100%;
	text-transform: uppercase;
	padding: .75em;
	padding-left: 1.5em;
	margin: 0;
	font-size: 1em;
	background: #2a77b9;
	color: #FFFFFF; }
.beh-menu > a:not(.nextprev) {
	width: 100%;
	max-width: 315px;
	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
	display: block;
	padding: .75em 1.5em;
	text-decoration: none;
	font-weight: normal;
	color: inherit; }
.beh-menu > a.nextprev {
	font-size: 1.2em;
	width: 49%; text-align: center;
	display: inline-block;
	padding: .75em 1.5em;
	text-decoration: none;
	font-weight: normal;
	color: inherit; }
.beh-menu > a:not(:last-of-type):not(.nextprev) { border-bottom: 1px solid #808080; }
.beh-menu > a:hover { color: #505050; transition: 0.3s; cursor: pointer; }
	.beh-menu > a:not(.nextprev):hover:before { content: "\00bb\00a0\00a0"; color: #2a77b9; margin-left: -10px;}
.act { color: #505050 !important; pointer-events: none; font-weight: bold !important; }
	.beh-menu > a.act:before { content: "\00bb\00a0\00a0"; color: #2a77b9; }
.beh-cont {
	font-size: 1.1em; line-height: 1.5;
	position: relative;
	left: 70px; float: left;
	text-align: left;
	width: 60%; }
	
.beh-menu > h3 > .arw {
	display: none;
	background: inherit; transition: 0.3s;
	float: right;
	margin-top: -11.5px; margin-right: -10px;
	padding: 10px 10px;
	font-size: 1.5em; text-shadow: 2px 2px 2px #505050; }

#beh-dl dt { background: #f1f1f1; }
#oh-dl dt { background: #6ea9de; }
#misc-dl dt { background: #ffb366; }
dl { width: 40%; display: inline-block; min-width: 350px; margin: 0 auto; vertical-align: middle; }
dt { font-family: 'Lato', Sans-serif; text-align: left; padding: 15px; font-weight: bold; color: #303030; border-bottom: 2px solid #FFFFFF; cursor: pointer; transition: 0.5s; }
dt > i { font-size: 1.5em !important; transition: 0.4s;}
dd { display: none; font-style: italic; font-size: 0.9em; text-align: left; max-height: 0; overflow: scroll; margin-left: 5px; transition: 0.5s; border-left: 2px dotted #ccc; padding: 10px 20px; }
dd > b { height: inherit; width: 10%; display: inline-block; float: left; font-weight: bold; margin: 10px; }
dd > p { height: 100%; width: 90%; display: inline-block; overflow: hidden; float: right; margin: 0; padding-left: 15px; margin: 10px;}
dd > p > a { color: #2a77b9; text-decoration: underline dotted; }
dd > p > a:hover { text-decoration: none; }
dd ul { font-family: 'Lato', Sans-serif; width: 90%; float: right; }
dd ul li { }
.cho { background: #2a77b9 !important; color: #FFF; border-bottom: none;}
.cho + dd { max-height: 1200px; display: block;}
.cho i { transform: rotateX(180deg);}

/* CARDS */

/* NEW BEH */

#newbeh > h2 { color: #2a77b9; }
#newbehCont {
	align-items: flex-start;
	justify-content: center;
	flex-flow: row wrap; 
	padding-bottom: 50px; padding-top: 0;}
#newbehCont > div {
	flex: 0 0 370px;
	display: inline-block; 
	background: #FFF;
	height: auto;
	transform: scale(0.75); opacity: 0;
	position: relative; margin: 25px 20px; 
	box-shadow: 2px 8px 16px 0 rgba(0,0,0,0.2); }
#newbehCont > div > div {
	transition: max-height 0.6s;
	color: #505050;
	overflow: auto;
	margin: 0;
	width: 100%; padding: 0 !important;
	display: block; position: relative;
	left: 0; top: 0;  vertical-align: top;
	text-align: left;}
#newbehCont > div > div:last-child { margin-top: -3px; max-height: 0 !important; overflow: hidden; }
#newbehCont > div > div:first-child:hover +div, #newbehCont > div > div:last-child:hover { max-height: 300px !important; }
#newbehCont > div > div > img {
	margin: 0; padding: 0;
	width: 100%; max-height: 180px; object-fit: cover; }
#newbehCont > div > div:first-child {
	padding: 0; 
	height: auto;
	top: 0; }
#newbehCont > div > div:first-child h2 {
	border-top-left-radius: 5px; 
	position: absolute; right: 0; bottom: 0; padding: 10px 20px; margin: 0 0 3px 0; 
	background: #FFFFFF; }
#newbehCont > div > div:last-child {
	height: auto;
	background: #FFFFFF;
	text-align: left; padding: 10px 20px;}
#newbehCont > div > div:last-child p{
	width: 100%; padding: 0 20px 15px 20px;}

/* END NEW BEH */
/* BEH */

.beh-cards-cont { padding-top: 10vh !important; }
#Teamet, #Nyheter, .glow { text-shadow: 0 0 3px #FFFFFF; }

.card {
	opacity: 0;
	background: #FFFFFF; color: #2a77b9; 
	background: rgba(255, 255, 255, 0.9);
	display: inline-block; 
    margin: 20px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 22%; 
    min-width: 250px;
    max-width: 270px;
    vertical-align: top; }

#sampar .card.short {
	height: 100px; }
#sampar .card.short img {
	max-height: 100px; }

.card img { width: 100%; object-fit: cover; max-height: 300px;}

/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); }

/* Add some padding inside the card container */
.container { padding: 2px 16px !important; margin: 0; }
.container p, .container h4 { margin: 8px; line-height: 1;}
.container p { font-style: italic; text-align: center; }
.container h4 { font-size: 1.2em; }

/* NEW NEWS */

.news {
		display: -webkit-box;
    	display: -webkit-flex;
    	display: -moz-box;
    	display: -ms-flexbox;
	display: flex !important; 
    /*align-content: stretch;*/
    /*justify-content: space-around;
    	-webkit-justify-content: space-around;
    	-moz-justify-content: space-around;*/
    flex-wrap: nowrap;
	color: #2a77b9; 
	width: 100%; padding: 50px; margin: 0 auto;
	overflow-x: scroll; }

#newnews h2 { color: #2a77b9; }
#newnews .inf { color: #505050; font-style: italic; width: auto; max-width: 49%; display: inline-block; margin-top: -20px; cursor: pointer;}
#newnews .inf:hover { color: #808080; }
#newnews .inf > i { box-shadow: 2px 2px #888888; font-size: 0.7em; height: 10px; widht: 10px; padding: 0 5px 0 5px; border: 1px solid #808080; border-radius: 4px; }

#news { width: 90%; margin: 0 auto; padding-bottom: 50px;}
#news > div {
	max-height: 320px;
	max-width: 300px;
	/*animation: scale-up 0.35s ease-in-out 0.3s forwards; */
	transform: scale(0.75); opacity: 0;
	vertical-align: top;
	position: relative; margin: 10px; 
	min-width: 300px;
    min-height: 280px;
	padding-top: 10%; 
	box-shadow: 2px 8px 16px 0 rgba(0,0,0,0.2); }

#news .clickable:hover { cursor: pointer; box-shadow: 1px 4px 10px 0 rgba(0,0,0,0.3); }
#news > div > span {
	width: 100%; 
	display: table-row; position: absolute;
	left: 0; top: 0;}
#news > div > span:first-child {
	border: 1px solid #909090;
    overflow: hidden;
    font-size: 2.5em;
    font-weight: 900;
    padding: 10px;
    text-align: center;
    height: 15%;
    top: 0; }

#news > div > span:first-child > p {
	color: #FFF; opacity: 0.15; 
	margin: -8px 0; padding: 0;
	line-height: 100%; }
#news > div > span:last-child {
	width: 100%;
	background: #FFFFFF;
	text-align: left;
	top: 15%; height: 85%; padding: 10px 20px;}
#news > div > span:last-child > h2 {
	font-size: 1.2em;
	margin: 0; }
#news > div > span:last-child > p {
	overflow-Y: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical; 
    line-height: 18px;        /* fallback */
   	max-height: 112px;       /* fallback */ 
	height: auto;
	vertical-align: middle; 
	color: #505050; 
	font-size: 1em; margin: 5px 0; }
	
.newscol { background: rgb(42, 143, 185); }
.ofrcol { background: rgb(153, 153, 255); }
#news .date {
	font-size: 0.8em; color: #808080; 
	position: absolute; bottom: 2.5%; right: 2.5%; }

/* NEW NEWS END */



.newscard {
	max-height: 400px;
	margin: 10px !important; position: relative; 
	width: 33%; min-width: 380px; min-height: 250px; height: auto; padding-top: 20% !important; 
	transition: 0.3s; }

.newscard:hover { 
	box-shadow: 0 0 4px 1px rgba(0, 140, 186, 0.7);
	width: 33%; }

.newscard:hover .newscard-cover { background: transparent; }
.newscard:hover .newscard-txt.rgt { margin-left: -40%; width: 90%; }
.newscard:hover .newscard-txt.lft { margin-right: -40%; width: 90%; }


/* GALLERY MODAL */
.newscard > img { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.gall-txt { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; }
.newscard:hover .gall-txt { z-index: 10; transition: 0.3s; background: #FFFFFF; background: rgba(255,255,255,0.8); }
.clickable { cursor: pointer; }

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999; /* Sit on top */
    padding: 0;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.85); /* Black w/ opacity */
}

.modal-content-cover {
	width: 100%; height: 100%; }

.modal-content {
    margin: 0 auto;
    display: inline-block;
    height: 100%; width: 100%;
    vertical-align: middle;
    text-align: center;
    object-fit: contain;
}

#caption {
	background-color: rgba(0,0,0,0.85);
	position: absolute;
	bottom: 10px;
	right: 10px;
	vertical-align: bottom;
    margin: 0 auto 10px auto;
    display: inline-block;
    width: auto;
    max-width: 900px;
    text-align: left;
    color: #ccc;
    padding: 10px 10px;
    min-height: 150px;
}
#caption p.date { text-align: right; margin-right: 10px; font-size: 0.8em; }
#caption a { color: #ccc; text-decoration: underline dotted;}
#caption a:hover { color: #fff;}

/* The Close Button */
.close {
	z-index: 10;
    position: fixed;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 1000px){
    .modal-content, #caption { width: 100%; display: block; margin: 0 auto; }
}

@media only screen and (max-width: 700px){
    .modal-content {
    	min-width: 90%;
        width: 90%;
        display: block; margin: 0 auto; }
    
    #caption {
    	bottom: auto; display: block; position: relative;
    	top: 0; left: 0; width: 100%;
    }
    .close { top: 5px; right: 20px; }
    
}


.clearfix::after {
    content: "";
    clear: both;
    display: table; }

.tabs {
	margin: 0 auto;
	width: 95%; height: max-content;
	min-width: 400px; 
	background-color: #f1f1f1; }
.tabs h2 { color: #2a77b9; border: 1px solid #ccc; border-bottom: none; }

.select { display: none; }
.full button { display: block; }

.select {
	list-style-type: none;
	background: #F1F1F1;
	color: #505050;
	width: 100%;
	margin: 0 auto; padding: 0;
	z-index: 30000; position: relative; }
	
.select li { padding: 22px 16px; border: 1px solid #ccc; cursor: pointer; }
.select li:nth-child(n+2) { display: none; }

/* Style the tab */
.tab {
    float: left;
    border: 1px solid #ccc;
    width: 30%;
    height: 300px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
	font-size: 0.8em;
    background-color: inherit;
    color: #505050;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
}

#Behandlingar { width: 100%; background: #f1f1f1; margin: 0; padding: 14px 0;}
/* Change background color of buttons on hover */
.tab button:hover, .select li:hover {
    background-color: #2a77b9; color: #FFFFFF;
}

/* Create an active/current "tab button" class */
.tab button.active, #li-selected {
    background-color: #6ea9de;
}

/* Style the tab content */
.tabcontent {
	background: #FFF;
    float: left;
    padding: 0px;
    border: 1px solid #ccc;
    width: 70%;
    border-left: none;
    height: 300px;
}

@keyframes ex {
from { opacity: 0; }
to { opacity: 1; }
}

.tabcontent:nth-of-type(n+3) { display: none; }

.tabcontent p {
	color: #505050;
	animation: ex 0.4s ease-in 0s 1 normal;
	align-self: center;
	vertical-align: middle;
	width: 50%; height: auto; max-height: 100%;
	float: left;
	text-align: left; 
	margin: 0; margin-top: 0.5%;
	padding: 20px;
	overflow: auto; }

.tabcontent img {
	animation: ex 0.4s ease-in 0s 1 normal;
	float: right;
	vertical-align: middle;
	height: 100%; width: 50%;
	padding: 0; margin: 0;
	object-fit: cover; }

@media only screen and (max-width: 1080px) {
.tabs { width: 100%; }
.tabcontent img { width: 40%; }
.tabcontent p { width: 60%; }
.tab, .tabcontent { height: 350px; }
}

@media only screen and (max-width: 768px) {
.tabs { min-width: 0px; width: 100%; margin-bottom: 10px; height: auto; }

.tab { width: 100%; height: auto; }
.tabcontent { width: 100%; min-height: 30vh; }
.tabcontent p { padding: 30px; }
.full button { display: inline; width: auto; }
}

@media only screen and (max-width: 633px) {
.full button { display: none; }
.select { display: block; }
}

/* SLIDESHOW STYLING */

/* Index Slideshow container */
.slideshow-container {
  width: 45%; margin: 0 auto 100px auto;
  height: auto; max-height: auto;
  position: relative; 
  padding-top: 25%;
  left: auto;
  top: 0;
  overflow: hidden; 
  background: transparent;
  vertical-align: center; }

.mySlides img { object-fit: cover; }

/* Hide the images by default */
.mySlides {
	width: 100%;
	position: absolute; top: 0; left: 0; bottom: 0;
	display: none;
    margin: 0 auto; padding: 0; }


.slide-logo {
	opacity: 1;
	position: absolute;
	top: 0; right: 0;
	width: auto; max-width: 40%;
	margin: 0; }
	.slide-logo img { width: 90%; object-fit: contain; }

/* Caption text */
  
.Slide-text {
	color: #2a77b9; background: rgba(255, 255, 255, 0.7);
	padding: 0;
	position: absolute;
	top: -100%; right: 0;
	width: 100%; height: auto;
	margin: 0 auto; 
	text-align: center; 
  	opacity: 1;
  	font-size: 1.1em;
  	transition: all 0.4s; }
  	
.Slide-text-var {
	color: #2a77b9; 
	padding: 0;
	position: absolute;
	top: 50%; right: 0;
	width: auto; height: 100%;
	margin: 0 auto; 
	text-align: center; 
  	opacity: 1;
  	font-size: 1.1em;
  	text-shadow: 1px 1px 1px #FFFFFF; }
  
.Slide-logo { position: absolute; top: 0; left: 0; }
.Slide-logo > img { width: 20%; float: left;}
  
.slide-text p, .slide-text-var p { font-size: 0.6em; }

.drop-down { animation: drop-down 0.5s 1.5s forwards; }

@keyframes drop-down {
	from { }
	to { top: 0; }
	}
  	
/* The dots/bullets/indicators */
.dot {
  box-shadow: 0 0 4px 1px rgba(0, 140, 186, 0.5);
  padding: 0; margin: 5px;
  position: relative; 
  cursor: pointer; 
  height: 12px;
  width: 12px;
  margin: auto;
  background-color: transparent;
  /*border: 1px solid #2a77b9;*/ 
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dothold {
	background: #fff; 
  position: relative;
  padding: 0; margin: 0; 
  width: 100%;
	}

.activee, .dot:hover {
  box-shadow: 0 0 4px 1px rgba(0, 140, 186, 0.7);
  height: 14px; width: 14px;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 1s;
}

@-webkit-keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}

.slide-in-an { animation: slide-in 1s 0s forwards; color: #6460d1; }

@keyframes slide-in {
  from {right: -100%; opacity: 0; } 
  to {right: 0; opacity: 1; }
}

@-webkit-keyframes slide-in {
  from {right: -100%; opacity: 0; } 
  to {right: 0; opacity: 1; }
}

.slide-down { animation: slide-down 0.5s ease-out forwards; }
@keyframes slide-down {
	from { bottom: 15%; opacity: 0; }
	to { bottom: 10%; opacity: 1; }
}

@-webkit-keyframes slide-down {
	from { bottom: 15%; opacity: 0; }
	to { bottom: 10%; opacity: 1; }
}
.slide-down-all { animation: slide-down-all 0.5s ease-out forwards; }
@keyframes slide-down {
	from { bottom: 5%; opacity: 0; }
	to { bottom: 0; opacity: 1; }
}

@-webkit-keyframes slide-down-all {
	from { bottom: 5%; opacity: 0; }
	to { bottom: 0; opacity: 1; }
}
/* FORM */

/* CONTACT */

#msgSent { 
	display: none;
	position: absolute; top:0; left: 0;
	height: 100%; width: 100%;
	background: inherit; color: #505050;
	padding: 25%; }

.form-sect { min-height: 50px; }

.form-style-9 {
	height: 100%;
	width: 100%;
	background: #FFFFFF;
	padding: 30px;
	margin: 0 auto; }
	
.form-style-9 h2 {color: #505050; }

.form-style-9 ul{
	padding:0;
	margin:0;
	list-style:none;
}
.form-style-9 ul li{
	display: block;
	margin-bottom: 10px;
	min-height: 35px;
}
.form-style-9 ul li  .field-style{
	background: #FAFAFA;
	box-sizing: border-box; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	padding: 8px;
	outline: none;
	border: 1px solid #ccc;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;

}.form-style-9 ul li  .field-style:focus{
	box-shadow: 0 0 5px #6460d1;
	border:1px solid #6460d1;
}
.form-style-9 ul li .field-split{
	width: 49%;
}
.form-style-9 ul li .field-full{
	width: 100%;
}
.form-style-9 ul li input.align-left{
	float:left;
}
.form-style-9 ul li input.align-right{
	float:right;
}
.form-style-9 ul li textarea{
	width: 100%;
	height: 100px;
	resize: none;
}

.form-style-9 .invalid { background: #ffdddd !important; }

/*
.form-style-9 ul li button, 
.form-style-9 ul li input[type="submit"],
.msgButton {
	-moz-box-shadow: inset 0px 1px 0px 0px #3985B1;
	-webkit-box-shadow: inset 0px 1px 0px 0px #3985B1;
	box-shadow: inset 0px 1px 0px 0px #3985B1;
	background-color: #6460d1;
	border: 1px solid #6460d1;
	display: inline-block;
	cursor: pointer;
	color: #FFFFFF;
	padding: 8px 18px;
	text-decoration: none;
	transition: 0.3s;
}
.form-style-9 ul li button:hover, 
.form-style-9 ul li input[type="submit"]:hover,
.msgButton:hover {
	background-color: #3e39c6;
}*/




/* MEDIA */

@media only screen and (max-width: 861px) {
#slide-us { width: 70% !important; }
#news > div { min-width: 343px; }


}

@media only screen and (max-width: 450px) {
 #six-impl > div > span:first-of-type {
	padding-top: 42% !important; }
.sixreasonswhy { left: 0; width: 100%; }

}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 320px) {
.infobox { font-size: 0.8em !important; margin-top: 40% !important; }
#mySidenav .infobox { font-size: 0.65em !important; }
dl { min-width: 300px; }
dl dt i, dl dt { font-size: 0.85em; }

.info-overlay > p { font-size: 0.8em !important;; }
#footer > span { min-width: auto !important; }
#footer > span table { width: 100% !important; }
}

@media only screen and (max-width: 670px) {
#anim-t .dental-icons { height: auto !important; bottom: 30% !important; right: 0; }
#anim-t .leftside {max-width: 65% !important; }
#est-slide h1:last-of-type, #est-slide h1:last-of-type + p {
	position: relative !important; bottom: auto !important; float: none !important; text-align: center; }
#est-slide h1 { font-size: 1.7em; }
#est-slide br { display: none; }
#est-slide * { white-space: normal; }
#est-slide { background-size: contain !important; }
}

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

.cog { display: none; }
* { background-attachment: scroll !important; }
#firstsection { height: 50vh; }
.bgpic { padding: 10vh 0 10vh 0 !important; background-image: none !important; background: #F3F3F3; }
#nav-btn { right: 25% !important; }
#header { display: block; }
.bottomline { display: none !important; }
#topper { height: 160px !important; }

#mySidenav .infobox { font-size: 0.7em; }

.logo-twoline {
	margin-top: 20px;
	width: auto; height: auto; max-height: 200px;
	margin: 15px !important; }
.logo-twoline * { display: inline-block; }
.logo-twoline hr { display: none; }
.logo-twoline h2 { font-size: 3.5em; padding-left: 10px; font-weight: normal; margin: 0 auto; margin-top: 10px; vertical-align: top; letter-spacing: 4px; }
.logo-twoline img {
    height: auto;
    max-height: 60px;
    object-fit: contain;
    width: auto;
    margin: 30px auto -20px auto;
    max-width: 100%; }
.infobox {
	display: inline-block;
	font-size: 0.85em;
	margin: 0 !important; width: auto;
	float: left; width: 100%;
	border-bottom: 1px solid #505050;  }

.fullscreen-msg {
	margin: 25vh auto 0 auto;
	width: 90%; height: auto;
	min-width: auto; 
	max-height: 74vh; }

.bottom-span  { width: 100%; bottom: 0; left: 0; min-width: 90%; padding: 10px;}
.bottom-span > button { font-size: 0.8em; min-width: 50px; width: 40%; margin: 0 5px; }
	
.fullscreen-msg h2 { font-size: 0.9em; padding: 0 10px 5px 10px; }
.fullscreen-msg p { font-size: 0.9em; padding: 0 20px 10px 20px; }
.fullscreen-msg hr {position: relative; width: 100%; height: 40px; top: 0px; background: #2a77b9; border: none;} 

#wrapper { max-width: 100vw; width: 100vw; overflow-Y:hidden;}
#logo { max-width: 10%; top: 5%; left: 2.5%; }	
	
.leftarrow, .rightarrow {font-size: 1.8em !important; }
.leftarrow > i, .rightarrow > i {font-size: 2em !important; top: 43% !important; padding: 8px 12px !important; }
#anim-t .dental-icons { bottom: auto; top: 0; transform: rotate(-20deg); }
#anim-t .leftside {
	background: rgb(42, 143, 185); background: rgba(42, 143, 185, 0.8);
	z-index: 1;
	max-width: 100% !important;
	padding: 5px 10px; margin: 0;
    font-size: 1.4em !important; }
#anim-t .introheader {
	margin-top: 38%;
    z-index: 1;
    margin-bottom: 5%;
    bottom: 0; }
#anim .introheader {
	padding-top: 10% !important;
	margin-top: 0%;
    z-index: 1;
    margin-bottom: 5%;
    bottom: 0; }
#anim .animcont { margin-left: 6% !important; }
#est-slide h1 { font-size: 1.5em !important; margin: 5px; }
#est-slide p { padding: 0; white-space: pre-line; text-align: left !important; float: left; margin: 0 10px;}
#est-slide button {
	position: relative !important; float: none !important;
	bottom: auto; right: auto;
	margin: 15px auto; }

#strauP {
	background: rgba(230, 230, 230, 0.8);
	width: auto; max-width: 100%; position: relative; 
	z-index: 999; padding: 0; }
#strauP-introh { margin-top: 80px; margin-bottom: -50px; }
#strauP > p { text-align: center; padding: 5px; }
.image-right-bottom {
	width: 80%;
	bottom: -6%;
    right: -8%;} 

.info-big, .info-normal {
	width: 90% !important;
	display: block;
	min-height: 100px;
	padding-top: 60% !important;
	outline: 1px solid #808080; }
.info-full {
	display: block;
	width: 90% !important;
	padding-left: 5px !important;
	padding-top: 50% !important;
	padding-bottom: 10%;
	min-height: 60px; height: auto; }
.info-overlay button { font-size: 0.7em !important; margin: 0; min-width: auto; padding: 6px 7px !important; }
.info-big button, .info-normal button { visibility: hidden; }
.info-full h2 { font-size: 1.05em !important; position: relative; margin: 10px; width: 100% !important; min-height: 0 !important;}
.info-full h2:first-of-type { margin-top: -50%; }
.info-overlay { padding: 10px !important; left: 0 !important; background: rgba(0, 0, 0, 0.15); color: #FFF !important; z-index: 20;}
.info-overlay > p { width: 90% !important; }
.info-normal h2 {font-size: 1.4em !important; }
.info-normal p { font-size: 1em !important; }
.info-full > .info-overlay > h2 { display: none; }
.info-overlay > h2 { color: #2a77b9; }
.info-overlay > p { color: #FFFFFF; width: 70%; margin: 0 auto; visibility: hidden; text-align: left; }
.info-overlay:hover > p, .info-overlay:hover > button { visibility: visible; transition: 0.3s; }

.sixImplPic { height: 200px; }
.sixreasonswhy { max-width: 100% !important; font-size: 1.2em !important; padding: 10px !important; }
#six-impl { padding: 0; align-items: center;}
#six-impl > div { flex: 0 1 99%; width: 99% !important; max-width: 100% !important; margin: 5px auto; height: auto;}
#six-impl > div > span {
	display: table-cell; }
#six-impl > div > span:first-of-type {
	padding-top: 30%; width: 35%; }
#six-impl > div > span:last-of-type {
	width: 64%; }
	
#news { padding: 0 0 50px 0;  width: 100%;}
#news > div {
	width: 99% !important; min-width: 300px !important; }
#news > div > span:first-child {
	text-align: right !important; }

.clear-txt { font-size: 1.1em !important; width: 100%; }
.topslider { font-size: 1.1em !important; margin-top: -40px !important; width: 100%; }
.clear-txt.right { max-width: 100%; width: 80%; margin: -90px auto 0 auto; float: none; }
.single { min-width: 10px; max-width: 80%; min-height: 10px; padding: 0 10px 10px 10px; padding-top: 39.38%; }
#wasa .slide-in-an { top: 100% !important; }

.single > span h1 { font-size: 1.5em; }
.single > span p { text-align: center; font-style: italic; padding: 10px; }

.news { width: 100%; padding: 10px 0px !important; }
.newscard { width: 90%; min-width: 90%; min-height: 230px; height: auto; padding-top: 60% !important; }
.newscard-txt { width: 70%; }
dl { width: 100%; }

.newscard:hover { width: 100%; }
.newscard:hover .newscard-cover { background: transparent; }
.newscard:hover .newscard-txt.rgt, .newscard:hover .newscard-txt.lft { width: 100%; }

.tab, .tabcontent { width: 100%; }
.tabcontent { flex-direction: column-reverse; height: auto; }
.tabcontent p { width: 80%; width: 100%; }
.tabcontent img { max-height: 30vh; margin: 0 auto; width: 100%; }
.tabcontent p { padding: 20px 30px; }

.est > p { margin: 0; }
.est > img { width: 100%; }

.topcont h1 { font-size: 1.2em; }
.topcont h3 { font-size: 1em; padding-top: 5px;}
.button-whitee { font-size: 1em; }

.clear-txt > p { font-size: 0.8em; width: 90%; }

.slideshow-container { width: 100% !important; padding-top: 70% !important; margin-top: -85px; margin-bottom: -10px;}
.Slide-text-var { top: 5% !important; }
.dothold { display: none !important; }
.text-section { min-width: 100%; padding: 20px 10px;}
.text-section p { text-align: left; padding: 5px; margin-bottom: 15px; line-height: 1.2;}

.beh-cards-cont { padding: 10vh 0 10vh 0 !important; }

.flexcont > div { width: 100%; min-width: auto; }
.contact { padding: 0; }
.contact > div {
	margin: 5px !important;
	width: 100%; min-width: 250px; }
.contact > div:first-child p { padding: 0; line-height: 2;}
.contact > div:not(:first-child) { border-left: none; border-top: 1px dotted #2a77b9; }
.contact > div table { width: 90%; }

.form-style-9 {
	max-height: auto;
	min-width: 100%; max-width: 100%;
	width: 100%; }

#footer > span { padding: 10px; width: 90%; margin: 0px auto 30px auto;}
#footer > span table { width: 90%; }

.footer-book-button {
	display: inline-block;
	margin: 10px 10px; 
	padding: 14px 7px;
	font-size: 0.9em; min-width: 130px; 
	width: 40%;}


.impl { 
	width: 100%;
	padding-bottom: 0; padding-top: 0;
	background-size: 100vw 30vh !important;
	background-position: top !important; }
.impl > div:nth-child(2){ margin-top: 0;  }
.impl > div:not(:first-child) { 
	width: 100%; display: inline !important; }
.impl > div > div { padding: 0 !important;}
.impl > div > div img { width: 100%; }

#newbehCont { width: 100%; padding-left: 0; padding-right: 0;}
#newbehCont > div {
	margin: 25px 0;
	flex: 0 0 100% !important; min-width: 280px; }

#modvid { 
	width: 100%;
	background: rgb(255, 255, 255);
	background: rgba(255, 255, 255, 0.85);
	padding-top: 0; }
.estoverlay { width: 100%; }
#Modal iframe {width: 100%; }
#Modal #caption h3 { font-size: 1em; }


.beh-menu { top: 30px; transition: 0.3s; background: #FFF;  }
.beh-menu > h3 > .arw { display: block; }
.beh-cont { width: 100%; float: none; left: 0; }

#tab { display: block; border: 1px solid black; border-left: none; float: left; padding: 5px; font-size: 1.5em; }
#tab:hover d { left: 0; }
}

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

#wasa { overflow: hidden; }
section * { background-attachment: scroll !important; }

section:not(#firstsection-cont).first { 
min-height: auto; max-height: 50vh;
background-size: auto 100% !important;
background-position: 25% 0;} 

.bottomline a:nth-of-type(5) { display: none; }
.bottomline { padding: 0 !important;  }

.bottom-span  { width: 90%; bottom: 0; left: 5%;}

.bgpic, .break-pic { background-position: 50% 0; }

#wrapper { max-width: 100vw; width: 100vw; overflow-Y:hidden;}
.Slide-text-var { top: 0; }
.topslider { font-size: 1.3em !important; width: 100%; }
.single { min-width: 10px; width: 60% !important; }
.single > span h1 { font-size: 1.5em; }
#logo { max-width: 15%; }

.sixreasonswhy { max-width: 80%; font-size: 1.5em; }
#six-impl > div { width: 30%; max-width: 33%; }

.infosect > h4 { display: block; }
.info-big { width: 60%; min-width: 10px; }
.info-normal { width: 35%; min-width: 10px; }
.info-normal h2 { font-size: 1.1em; }
.info-normal p { font-size: 0.9em; }
.info-full { width: 95%; min-width: 10px;}
.info-full h2 { font-size: 1.3em; }
.info-overlay { padding: 20px; }
.info-overlay button { font-size: 0.9em !important; margin: 0; min-width: auto; padding: 6px 7px !important;}

#slidecontainer-section { font-size: 0.9em; }
#slide-us { width: 100% !important; background: rgba(255, 255, 255, 0.7) !important; }

.introheader { font-size: 2.9em !important; white-space: normal; }
.leftarrow, .rightarrow {font-size: 3.5em; margin-top: 4% !important; }
.rightarrow > i:hover { box-shadow: -5px 8px 8px #888888; }
.leftarrow > i:hover { box-shadow: 5px 8px 8px #888888; }
#strauP { margin-top: 70px !important; }
#strauP > p{ font-size: 1.1em !important; }

#news > div { width: 47%; min-width: 280px; }
#news > div > span:first-child  { text-align: left; font-size: 3em; }
#news > div > span:first-child > p { margin: -4px 0; }

#Kontakta-Oss {
	flex-grow: 1; }

.impl > div:nth-child(2){ padding-top: 20vh !important; }
.impl > div:not(.topimpl) { width: 100%; min-width: 100px !important;  }
.impl > div > img { margin-top: 20px; }

#newbehCont  { width: 100%; padding: 0;}
#newbehCont > div {
	vertical-align: top;
	flex: 0 0 320px; min-width: 0px; }

.beh-menu { left: 25px; }

}

@media only screen and (max-width: 600px) and (orientation: portrait) {
.text-section:nth-of-type(3) { order: 4; }
.text-section:nth-of-type(4) { order: 3; }
.text-section:nth-of-type(7) { order: 8; }
.text-section:nth-of-type(8) { order: 7; }
.text-section { width: 100%; min-height: 35vh; }
.single { width: 90% !important; font-size: 0.9em;}

section:not(#firstsection-cont).first { 
min-height: auto; max-height: 50vh;
background-size: auto 100% !important;
background-position: 25% 0;} 


.bgpic, .break-pic { background-position: 50% 0; }

 }
 
@media only screen and (max-width: 768px) and (orientation: landscape) {
section:not(#firstsection-cont).first { min-height: auto; max-height: 100%;	}
* { background-attachment: scroll !important; }
.tabcontent div { width: 50%; min-width: 250px; }

}

@media only screen and (max-width: 1024px) and (orientation: portrait) {

* { background-attachment: scroll !important; }
#logo { max-width: 20%; }
.slideshow-container { width: 70%; padding-top: 38.9%; }
.Slide-text-var { top: 50%; }

section:not(#firstsection-cont).first { 
min-height: auto; max-height: 50vh;
background-size: auto 100% !important;
background-position: 25% 0;} 

#firstsection-cont { background-position: 50% 10% !important; }


.bgpic, .break-pic { background-position: 50% 0; }
}

@media only screen and (max-width: 823px) and (orientation: landscape) {
* { background-attachment: scroll !important; }
#logo { max-width: 10%; }
.topslider { font-size: 1.1em; width: 100%; }
.bottom-span  { width: 100%; bottom: 0; left: 0; min-width: 90%; padding: 10px;}
.slideshow-container { width: 70%; padding-top: 38.9%; }
}

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

.bottomline ul { margin-top: -5px; }
body { font-size: 18px; }
#fullscreen-msg { width: 40%; }
.subsection.single {
	width: 45% !important;
	display: inline-block;
	vertical-align: middle;
	margin: 50px 20px !important; padding: 0; padding-top: 15%; max-width: 650px;}

.break-pic { height: 650px; }
#index-textsect { width: 70%; }
#wasa .slide-in-an { font-size: 1em; }


}

/*
/* Pointer devices 
@media (any-pointer: coarse) {

h2 { font-size: 1.2em; }
#nav-btn { font-size: 2.5em; color: #2a77b9; }
.sidenav a { font-size: 1.25em; line-height: 0.9;}
.sidenav a.lesser { font-size: 1em; line-height: 1.1;}

}

*/