/*
####################################
STYLE.CSS FOR kinderarzt-kroepfl.at
START DATE: 	01.12.2011
LAST EDIT: 		17.10.2019
####################################
*/

html,body{
	font-family: 'Akzidenz Grotesk';
	font-size: 1.3vh;
	/*width: 604vh;*/
	margin: 0%;
}

a {
	color: #000;
}

a:hover {
	color: #333;
}

#main_wrapper{
	display: block;

	background: #fff;
	
	width: 557.15vh;
	/* max-height: 840px; */
	
	position: absolute;
	top: 1.5vh;
	left: 1.5vh;
	
	height: 97%;
	
	margin: 0%;
}

#spacer_right{
	display: block;
	
	background: #fff;
	
	width: 1.5vh;
	
	position: absolute;
	top: 0px;
	left: 558.65vh;
	bottom: 0px;
}

#linie_header_1{
	background: #000;
	
	width: 100%;
	height: 2px;
	
	position: absolute;
	top: 0px;
	left: 0px;
}

#linie_header_2{
	background: #8a888a;
	
	width: 100%;
	height: 1px;
	
	position: absolute;
	top: 2px;
	left: 0px;
}

#linie_header_3{
	background: #504d50;
	
	width: 100%;
	height: 1px;
	
	position: absolute;
	top: 6.25vh;
	left: 0px;
}

#linie_footer{
	background: #000;
	
	width: 100%;
	height: 2px;
	
	position: absolute;
	bottom: 0px;
	left: 0px;
}

@media only screen and (max-width: 768px) {
	body {
		width: auto !important;
		margin: 0px !important;
		padding: 0px !important;
	}
	
	#main_wrapper{
		top: 3vw;
		left: 3vw;
		
		width: 704vw;
	}
	
	#spacer_right {
		position: absolute;
		left: 707vw;
		height: 100%;
		
		width: 3vw;
	}
}

/* ---### ELEMENTS ###--- */

.title{
	font-size: 1.2vh;
	font-weight: bold;
	line-height: 1.9vh;
	
	margin-top: 4.5vh;
}

.headline{
	display: block;
	
	background-repeat: no-repeat;
	background-size: contain;
	
	height: 50vh;
	width: auto;
	
	position: absolute;
	top: 9.09vh;
}

.pic {
	background-image: url(../img/s_pic.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	
	width: 18vh;
	height: 24.2vh;
	
	position: absolute;
	left: 0px;
	bottom: 2.64vh;
}

.scribble {
	background-repeat: no-repeat;
	background-size: contain;
	
	width: 18vh;
	height: 24.2vh;
	
	position: absolute;
	left: 0px;
	bottom: 2.64vh;
}

.text {
	text-align: left;
	vertical-align: bottom;
	
	position: absolute;
	left: 19vh;
	bottom: 2.64vh;
	
	height: 24.2vh;
	
	width: 50%;
}

.text_top {
	text-align: left;
	vertical-align: top;
	
	height: 24.04vh;
	
	position: absolute;
	left: 19.3vh;
	bottom: 2.64vh;
}

.text_overtop {
	text-align: left;
	vertical-align: bottom;
	
	position: absolute;
	left: 191px;
	bottom: 275px;
}

.text .bottomtext {
	display: inline-block;
	
	width: 100%;
	height: auto;
	
	position: absolute;
	bottom: 0px;
}

.text .paragraph_sep {
	font-size: 50%;
}

@media only screen and (max-width: 768px) {
	.title {
		font-size: 2vh;
		line-height: 2.8vh;
		
		margin-top: 3.7vh;
	}
	
	.titelSubtitle {
		/*font-size: 60%;*/
	}
	
	.pic {
		background-image: url(../img/s_pic_mobile.jpg);
		background-repeat: no-repeat;
		background-size: contain;
	
		width: 23vw;
		height: 60vw;
	}

	.scribble {
		width: 23vw;
		height: 60vw;
	}
	
	.text {
		text-align: left;
		
		font-size: 3.7vw;
		
		width: 69vw;
		height: 60vw;
		
		left: 25vw;
		bottom: 2.64vh;
	}
}

/* #### BLAU #### */

#blau {
	display: block;
	
	width: 74.3vh;
	
	position: absolute;
	left: 5vh;
	top: 0px;
	bottom: 0px;
}

#blau .headline{
	background-image: url(../img/blau/headline.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	
	width: 74.3vh;
	margin-left: -6px;
}

#blau .scribble{
	background-image: url(../img/blau/scribble.png);
}

@media only screen and (max-width: 768px) {
	#blau {
		left: 0vw;
	}
	
	#blau .scribble{
		background-image: url(../img/blau/scribble_mobile.png);
	}
	
	#blau .headline{
		background-image: url(../img/blau/headline_mobile.jpg);
	}
}

/* #### LILA #### */

#lila {
	display: block;
	
	width: 100.3vh;
	
	position: absolute;
	left: 79.3vh;
	top: 0px;
	bottom: 0px;
}

#lila .headline{
	background-image: url(../img/lila/headline.jpg);
	background-repeat: no-repeat;
	
	width: 100.3vh;
}

#lila .scribble{
	background-image: url(../img/lila/scribble.png);
}

@media only screen and (max-width: 768px) {
	#lila {
		left: 122vw;
	}
	
	#lila .scribble{
		background-image: url(../img/lila/scribble_mobile.png);
	}
	
	#lila .headline{
		background-image: url(../img/lila/headline_mobile.jpg);
	}
}

/* #### ROT #### */

#rot {
	display: block;
	
	width: 98.88vh;
	
	position: absolute;
	left: 179.6vh;
	top: 0px;
	bottom: 0px;
}

#rot .headline{
	background-image: url(../img/rot/headline.jpg);
	background-repeat: no-repeat;
	
	width: 98.88vh;
	margin-left: -5px;
}

#rot .scribble{
	background-image: url(../img/rot/scribble.png);
}

@media only screen and (max-width: 768px) {
	#rot {
		left: 244vw;
	}
	
	#rot .scribble{
		background-image: url(../img/rot/scribble_mobile.png);
	}
	
	#rot .headline{
		background-image: url(../img/rot/headline_mobile.jpg);
	}
}

/* #### PINK #### */

#pink {
	display: block;
	
	width: 90.3vh;
	
	position: absolute;
	left: 278.48vh;
	top: 0px;
	bottom: 0px;
}

#pink .headline{
	background-image: url(../img/pink/headline.jpg);
	background-repeat: no-repeat;
	
	width: 90.3vh;
	margin-left: -6px;
}

#pink .scribble{
	background-image: url(../img/pink/scribble.png);
}

@media only screen and (max-width: 768px) {
	#pink {
		left: 366vw;
	}
	
	#pink .scribble{
		background-image: url(../img/pink/scribble_mobile.png);
	}
	
	#pink .headline{
		background-image: url(../img/pink/headline_mobile.jpg);
	}
}

/* #### GELB #### */

#gelb {
	display: block;
	
	width: 97.47vh;
	
	position: absolute;
	left: 368.78vh;
	top: 0px;
	bottom: 0px;
}

#gelb .headline{
	background-image: url(../img/gelb/headline.jpg);
	background-repeat: no-repeat;
	
	width: 90.3vh;
	margin-left: -7px;
}

#gelb .scribble{
	background-image: url(../img/gelb/scribble.png);
}

@media only screen and (max-width: 768px) {
	#gelb {
		left: 488vw;
	}
	
	#gelb .scribble{
		background-image: url(../img/gelb/scribble_mobile.png);
	}
	
	#gelb .headline{
		background-image: url(../img/gelb/headline_mobile.jpg);
	}
}

/* #### GRUEN #### */

#gruen {
	display: block;
	
	width: 90.9vh;
	
	position: absolute;
	left: 466.25vh;
	top: 0px;
	bottom: 0px;
}

#gruen .headline{
	background-image: url(../img/gruen/headline.jpg);
	background-repeat: no-repeat;
	
	width: 90.9vh;
	margin-left: -5px;
}

#gruen .scribble{
	background-image: url(../img/gruen/scribble.png);
}

#gruen #cv_img{
	 width: 8.7vh;
	 height: 2vh;
}

@media only screen and (max-width: 768px) {
	#gruen {
		left: 610vw;
	}
	
	#gruen .scribble{
		background-image: url(../img/gruen/scribble_mobile.png);
	}
	
	#gruen .headline{
		background-image: url(../img/gruen/headline_mobile.jpg);
	}
}

/* #### INTERACTIVE #### */

#interactive {
	display: block;
	
	width: 40.4vh;
	
	position: absolute;
	left: 557.15vh;
	top: 0px;
	bottom: 0px;
}

#interactive .title {
	text-align: right;
	margin-right: 12.02vh;
}

#interactive .flashapp{	
	width: 40.4vh;
	height: 42.02vh;
	
	position: absolute;
	right: 0px;
	bottom: 2.5vh;
}

@media only screen and (max-width: 768px) {
	#blau, #lila, #rot, #pink, #gelb, #gruen {
		width: 94vw;
	}
	
	#blau .headline, #lila .headline, #rot .headline, #pink .headline, #gelb .headline, #gruen .headline {
		width: 100%;
		
		background-repeat: no-repeat;
		background-size: contain;
	}
}

@media screen and (max-width: 600px) {
	html,body{
		width: 540vh;
	}
	
	#interactive {
		display: none;
		position: absolute;
		left: 0vh;
		top: 0vh;
		width: 0vh;
		height: 0vh;
	}
}