@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}


body {
  margin: 0;
  font-family:'Roboto', 'Arial', sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-weight: normal;
  font-size: 11pt;
  color: #53565A; 
  line-height: 1.3;
  width: 100%;
  height: 100%;
  background-color:#FFFFFF;
  overflow-y: scroll;
  overflow-x:hidden;
}

a, a:visited, a:link, a:hover {
  color:#53565A; 
  text-decoration: none;
}

.highlight {
  color:#D20032;
}

::selection {
	background: #2DBBE1;
	color: #ffffff;
}
::-moz-selection {
	background: #2DBBE1;
	color: #ffffff;
}

/* Paragraphs */
p, table, ul, ol {
	margin:0px 0px 20px 0px;
	padding:0px;
}
ul, ol {
	list-style-position: outside;
	padding-left: 18px;
}
li {
	line-height: 1.4;
	margin-bottom: 5px;
}
address {
	font-style:normal;
}

/* Table */
table {
	border-collapse: collapse;
}

td {
	padding: 0px;
	border:none;
	vertical-align:top;
}

/* Image */
img {
	border: 0;
	margin: 0;
	max-width: 100%;
	-webkit-user-select:none;
	-moz-user-select:none;

}

figure {
    margin:0px;
}
/* Misc */
mark {
	background-color:transparent;
}

/* Helpers */
.right {
	float:right;
}
.left {
	float:left;
}

.clear {
	clear:both;
}


h1,h2,h3,h4,h5 {
  color:#D20032;
  margin-bottom:20px;
  margin-top:0px;
  padding:0px;
}

.row {
  display:table;
  width:100%;
}

.col-md-4 {
  display:table-cell;
  width:25%;
  vertical-align:bottom;
}

.col-md-4:nth-child(1) {
  width:18%;
  padding-right:15px;
  min-width:200px;
}

.col-md-4:nth-child(2) {
  padding-right:15px;
  width:35%;
}


.col-md-4:last-child {
  text-align:right;
}


/* Layout */

header {
  max-width:1024px;
  height:188px;
  background:url(../images/bkg_header.png) right top no-repeat;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:40px;
}

footer {
  max-width:1000px; 
  margin-left:auto;
  margin-right:auto;
  color:#90989E;
  font-size:9.5pt;
  width:100%;    

}

footer .in {
  padding:20px 20px 30px 20px;
}

footer a {
  color:#90989E !important;
}

.logo_frame {
  padding-left:20px;
  padding-top:70px;
  padding-right:20px;
}

.logo2 {
  margin-bottom:-10px;
}

.content_frame {
  max-width:840px;
  margin-left:auto;
  margin-right:auto;  
}

.anim_img_frame {
  display:inline-block;
  position:relative;
  max-width:200px;
}


.anim_info {
  display:block;
  position:absolute;
  right:0px;
  bottom:0px;
  width:48px;
  height:55px;
  background:url(../images/klick.png) no-repeat;
}

.anim_img {
  width:100%;
}

.img1 img {
  margin-top:-30px;  

}


.img2 img {
  margin-top:-80px;  
  margin-left:-20px;
}

.img3 img {
  width:115%;
  margin-top:-50px;
}

.img4 {
  max-width:300px;
}

.img4 img {
  margin-left:-20px;
  margin-top:-65px; 
}

.img4 .anim_info {
  right:40%;
  bottom:-25px;
}

.img5 {

}

.img5 img {
  margin-top:-50px;  

}

.offset {
  display:inline-block;
  min-width:335px;
}

.content {
  padding:20px;
}

.mobile {
  display:none;
}

@media only screen and (max-width: 799px) {
 .col-md-4:nth-child(2) {
    padding-right:15px;
    width:25%;
  }
} 

@media only screen and (max-width: 779px) {
  
  h2 {
    text-align:center;
  }

  .desktop, .col-md-4:nth-child(1), .col-md-4:nth-child(2) {
    display:none;
  }
  .mobile {
    display:block;
  }
  
  .left, .right {
    float:none;
  }
  
  .anim_img_frame {
    margin-bottom:20px;
    margin-left:auto;
    margin-right:auto;
    display:block;

  } 
  
  .img1 img {
    margin-top:0px;  
  }
  
  .img2 img {
    margin-top:-60px;  
    margin-left:0px;
    margin-bottom:20px;
  }
  
  .img3 img {

    margin-left:-20px;
    margin-top:0px;
  }
  
  .img4 {
    max-width:300px;
    margin-bottom:50px;
  }
  
  .img4 img {
    margin-left:0px;
    margin-top:0px; 

  }
  
  .img4 .anim_info {
    right:40%;
    bottom:-25px;
  }
  
  .img5 img {
    margin-top:-100px;
  }
  
  .offset {
    min-width:0px;
  }

}

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

  header {
    background:none;
    border-bottom:1px dashed #23A27D;
    height:70px;
    margin-bottom:15px;
    position:fixed;
    top:0px;
    background-color:white;
    z-index:100;
  }
  
  footer {
    position:fixed;
    z-index:100;
    bottom:0px;
    left:0px;
    height:38px;
    background-color:white;
  }
  
  footer .in {
    padding-bottom:8px;
    padding-top:10px;
  }
    
  .logo2 {
    margin-top:-50px;
    width:100px;
    position:relative;
    z-index:101;
  }
  
  body {
    padding-top:80px;
  }
  
  .logo_frame {
    padding-left:20px;
    padding-top:20px;
    padding-right:20px;
  }
  
  .logo_frame img {
    width:100%;
  }
  
  .content_frame {
    padding-bottom:20px;
  }
  


}