@font-face{ 
  font-family:'Raleway-Bold';
  font-style:normal;
  src:local('Raleway-Bold'), local('Raleway-Bold'),
  url('/template/baf-stiftung/fonts/Raleway-Bold.ttf') format('truetype')
}

* {
margin:0;
padding:0;
}

html, body {
height:100%;
} 

body {
font-size: 15px;
color: #333;  
font-family: 'Open Sans', sans-serif;      
} 

h2 { 
margin-bottom: 50px;
}

.leftCol, .rightCol { 
width: 50%;
float: left;
}

.leftCol { 
background-image: url(images/bg-weiterleitung.jpg);
background-size: cover;
height: 100vh;
}

.leftCol img {
width: 100%
}

 .rightCol { 
padding: 200px 100px;
box-sizing: border-box; 
text-align: center;
}

.btn {
    position: relative;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
padding: 20px 50px 20px 35px;
background-color: #fee018;
font-family: 'Raleway-Bold';
font-size: 14px;
font-weight: bold;
color: #333;  
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.btn:after {
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
content: "";
width: 44px;
height: 16px;
position: absolute;
top: 20px;
right: 15px;
background: url(images/btn-arrow.png) right center no-repeat;
}

.btn:hover{
letter-spacing: 1px;
background-color: #fec818;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
text-decoration: none;
}

.btn:hover:after {
right: 4px;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}

@media screen and (max-width: 1366px) { 
  .rightCol { padding: 100px 50px 0px 50px;}
}


@media screen and (max-width: 1024px) { 
  .leftCol { float: none; width: 100%; position: absolute; z-index: -1;}
  .rightCol { background-color: #fff; float: none; margin: 0 auto; padding: 50px;}
  .rightCol img { width: 90%; margin: 0 auto;}
  body { font-size: 18px; }
  .hinweis { font-size: 15px;}
}

@media screen and (max-width: 768px) { 
   .rightCol { width: 60%; padding: 30px 20px;}
}


@media screen and (max-width: 660px) { 
  h2 { margin-bottom: 20px;}
   .rightCol { width: 90%; }
}
