/* CSS Document */
@font-face {
	font-family: 'TheSans';
	src: url('/fonts/TheSansOffice5_.eot');
	src: local('☺'), url('/fonts/TheSansOffice5_.woff') format('woff'), url('/fonts/TheSansOffice5_.ttf') format('truetype'), url('/fonts/TheSansOffice5_.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

* {
    margin: 0;
    padding: 0;
}

a img {
border: none
}

html {height: 100.1%}

body {
	background-color: #fff;
	color:#555;
	padding:0px ;
	font: 1.1em/140% 'TheSans', Verdana, 'Geneva, sans-serif';
    font-weight: 200;
}


/********************** HEADER ********************************/
.headerAround {width:100%; height:91px; position:relative; border-bottom: 1px solid #ccc;  z-index: 1; background-color: #fff }
.header {max-width:1120px; margin:0 auto; height:auto; position:relative; background-image: url(img/header_BG.png); background-position: top right; background-repeat: no-repeat;}
.header img {width:208px; margin:24px 0 24px 40px}
@media only screen and (max-width:600px) {
    .headerAround {height:80px;}
        .header img {width:160px; margin:24px 0 24px 25px}}

/********************** HEADER IMAGE ********************************/

.headimageAround {width:100%; height:auto; position:relative; background-color: #9dd5e8; z-index: 1;}
.headimageAround img {width:100%;}




/********************** CONTENT ********************************/


.contentWhiteHeader {max-width:700px; margin:-240px auto 0 auto; height:auto; position:relative; z-index: 100; padding:50px 80px; background-color: rgba(255,255, 255, 1); }
@media only screen and (max-width:1450px) {.contentWhiteHeader {margin:-200px auto 0 auto;}}
@media only screen and (max-width:1200px) {.contentWhiteHeader {margin:-200px auto 0 auto;}}
@media only screen and (max-width:1024px) {.contentWhiteHeader {max-width:760px; margin:-200px auto 0 auto; padding:40px; }}
@media only screen and (max-width:920px) {.contentWhiteHeader {max-width:920px; margin:0px auto 0 auto; padding:40px; }}
@media only screen and (max-width:600px) {.contentWhiteHeader { padding:25px; }}



.contentWhiteAround {width:100%; height:auto; position:relative; background-color: #fff;  border-top: 1px solid #e0e0e0 ; }
.content {max-width:1120px; margin:0 auto; height:auto; position:relative; z-index: 0; padding:40px; }

@media only screen and (max-width: 600px) {
.contentWhiteAround {width:100%; height:auto; position:relative; background-color: #fff;  border-top: 1px solid #e0e0e0 ; margin-top: 0;  }
.content {padding:25px; }
	
}



.infoicon {width:260px; margin:0 0em 0em 0; float: left;  }
.infoicon img {width:100% }

@media (max-width: 767px) {
	.infoicon {width:120px;} }


.infoBox {width: 100%; clear: both; margin:2em auto 0 auto; overflow: hidden; font-size:93%; display: flex;  align-items: stretch}
.infoBoxLI {width: 49%; float: left; border:1px dotted #00a9e0; margin-right: 1%}
.infoBoxRE {width: 49%; float: right; border:1px dotted #00a9e0; }
.infoBoxLI p, .infoBoxRE p {margin:15px 20px}
.infoBoxSmall {font-size: 80%; line-height: 120%}


@media only screen and (max-width:800px) {
    .infoBox {align-items: flex-start; flex-direction: column; flex-wrap: wrap }
	.infoBoxLI, .infoBoxRE {width: 99%!important; float: left; margin:0;}
    .infoBoxLI {margin-bottom: 1em}

}



.lineCONT {height:1px; border-bottom: 1px dotted #ccc; margin: 1em 0 2em 0; clear: both}


.CONTACTbox { background-color: #fff; padding:20px 25px ;  font-size:120%; line-height: 140%; margin-bottom: 2em; border:2px solid #009a49;
/*-moz-border-radius: 20px;
-webkit-border-radius: 20px; border-radius: 20px;*/}
.CONTACTboxBig { font-size:180%; line-height: 100%;}
.CONTACTboxTel { font-size:150%; line-height: 100%; color:#fff}


@media only screen and (max-width: 520px) {
    .CONTACTbox { font-size:100%; line-height: 130%}
    .CONTACTboxBig { font-size:140%; line-height: 100%;}
.CONTACTboxTel { font-size:130%; line-height: 100%;}
}

.BBoxAround {width: 100%; clear: both; margin:1em 0 3em -8px; overflow: hidden; display: flex;  align-items: stretch; line-height: 120%;}
.BBox {width: 25%; margin:0 8px; border:2px solid #d0f3ff; padding: 10px 15px; text-align: center}

@media only screen and (max-width: 1160px) {
    .BBoxAround {align-items: flex-start; flex-wrap: wrap; margin:1em 0 3em -8px;  }
    .BBox {width: 44%!important; float:left; margin-bottom: 16px}}

@media only screen and (max-width: 960px) {
    .BBoxAround {align-items: flex-start; flex-wrap: wrap; margin:1em 0 3em -8px;  }
    .BBox {width: 43%!important; float:left; margin-bottom: 16px}}

@media only screen and (max-width: 800px) {
    .BBox {width: 99%!important; float:left; margin-bottom: 1em}}


.BBox p {font-size:90%; margin-bottom: 3px}
.BBox .Yline {height:2px; background-color: #ffcb00; margin:1em 35%}
.BBox h3 {
	font: normal 100%/120%  'TheSans', Verdana, 'Geneva, sans-serif'; margin: 1.3em 0 0 0; color:#00a9e0
}

.icon {width:100px; height: 100px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-color: #aae9ff; margin:1em auto;  text-align:center}
.icon img {width:50px; margin-top:25px}

.iconPDF {width:36px; height: 36px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background-color: #aae9ff; margin:-12px 10px 0 0;  text-align:center; float:left}
.iconPDF img {width:26px; margin-top:6px}

.graph {width:100%; text-align: center; margin:2em 0}
.graph img {width:100%; }


/******************************************************/

a, a:visited {color:#00a9e0; text-decoration:none;}
a:hover {color:#00a9e0; text-decoration:underline}
.contact {font-size:130%}
h1 {
	color: #009a49;
	font: normal 220%/120%  'TheSans', Verdana, 'Geneva, sans-serif'; margin: 0 0 0.8em 0
}

h2 {
	color: #009a49;
	font: normal 160%/120% 'TheSans', Verdana, 'Geneva, sans-serif'; margin: 0 0 0.6em 0
} 


h3 {
	font: normal 110%/120%  'TheSans', Verdana, 'Geneva, sans-serif'; margin: 0 0 0.5em 0; color:#00a9e0
}
h4 {
	
	font: normal 120%/120%  'TheSans', Verdana, 'Geneva, sans-serif'; margin: 0 0 1em 0
}



p {margin-bottom:1.0em}

 ul.resonator {margin:0 ;list-style: none;}
ul.resonator li  {padding:10px 0 0.5em 20px; background: #e5f3fc; border-bottom:#000}
.bg-dblue {background:#cce8f9 !important}


ul.CryoEase {margin:0;list-style-type: circle;list-style: outside;font-size:85%;padding-left:15px}
ul.CryoEase li  {margin:2px 0px 5px 2px !important; line-height:140% }

.CryoEase-frame {border:1px solid #009a49;margin-left:35% !important; padding:10px; width:65%; margin-bottom:10px; -moz-border-radius: 20px;
-webkit-border-radius: 20px; border-radius: 20px; font-size:85%; background:#eafef7 }


@media only screen and (max-width: 1020px) {
	
}
@media only screen and (max-width: 640px) {

}
@media only screen and (max-width: 420px) {
	h1 {
	font: normal 160%/120%  'TheSans', Verdana, 'Geneva, sans-serif'; 
}
	
	
}


/******************************************************/
.green {color:#009a49}
.grey {color:#4d4f53}
.blue {color:#00a9e0}
.black {color:#000000; font-weight: normal}
.small {font-size:90%}


/********************** BUTTON BLUE ********************************/

.buttonBlue, .buttonBlueFooter {width:70px; margin:-36px auto 0 auto; height:auto; position:relative; z-index: 10 }
.buttonBlue img, .buttonBlueFooter img {width:100%; }


@media only screen and (max-width: 640px) {
	.buttonBlue {width:70px; margin:-42px auto 0 auto; height:auto; position:relative; z-index: 10 }
	.buttonBlueFooter {width:70px; margin:-36px auto 0 auto;  }
}
@media only screen and (max-width: 520px) {
	.buttonBlue {display: none }
}

.buttonBlueSmall {width:auto; margin:-46px auto 0 auto; height:auto; position:relative;  text-align: center; font-size: 85%}
.buttonBlueSmall img {width:60px; margin: 3px 0 2em 0 }
/********************** footer **************************/
.footerAround {width:100%; height:auto; position:relative; background-color: #f1f1f1; border-top: 1px solid #e0e0e0; 
}
.footer {max-width:700px; margin:0 auto; position:relative; padding: 25px; font-size: 80% }


.line {height:1px; width:100%; border-bottom: 1px solid #ccc; margin: 1em 0}
#socialmedia a, #socialmedia a:visited {color:#838383; text-decoration:none; }
#socialmedia a:hover {color:#838383; text-decoration:underline}
#socialmedia img {margin-right: 3px; vertical-align: -2px}



/********************** sticky box ********************************/

.stickybox {height:80px; width:80px; position: fixed; top:35%; right:-2px; z-index: 100; 
-moz-border-radius: 15px 0px 0px 15px;
-webkit-border-radius: 15px 0px 0px 15px;
border-radius: 15px 0px 0px 15px; border:0px solid #fff; background-color: #00a9e0;
background-size: cover; background-image: url(img/contact.png)}

.stickybox img {width:100%}

@media only screen and (max-width: 768px) {
	.stickybox { top:50%; height:60px; width:60px; }

}

/**************************************************************/

.containerVideo {
   position: relative;
   width: 100%;
   padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.video {
   position:  absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   text-align: center;
   font-size: 20px;
   color: white;
}

#videobereich {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}	
.videoextern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}