/******************************
        GENERAL
*******************************/
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
    background: #000;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }

img {
    max-width: 100%;
}

body, h1 {
    padding: 0;
    margin: 0;
}

p, a {
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
}

#wrapper {
    margin: 0 auto;
}
.hidden {
	display: none;
}

/******************************
        HEADER
*******************************/

#pageheader {

    background: #212425;
    height: 45px;
    margin: 0 auto;
}

#logo {
    color: #ffffff;
    font-weight: normal;
    font-size: 22px;
    display: inline-block;
    margin-top: 8px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;

}
#header_imagefield {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

/******************************
        BANNER
*******************************/

#content_top {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
    height: 580px;
}
#content_box_left {
    margin: 0 auto;
    margin-top: 20px;
    width: 45%;
    position: relative;
    height: 200px;
}
#content_box_left img{
    width: 100%;
    max-width: 180px;
    position: absolute;
}
#content_box_right {
    padding: 15px;
}

#content_box_right_text {
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #fff;
    margin-bottom: 20px;
}

#content_box_right_text h1 {
    color: #fff;
    font-size: 1.8em;
}
#content_box_right_text p {
    font-size: 0.em;
    margin: 0;
    margin-top: 5px;
}

#prize {
    font-size: 1.1em;
    color: #0071bf;
    font-weight: 700;
    padding-left: 2px;
}

/******************************
        QUESTIONS
*******************************/

#questions {
    margin-top: 10px;
}
#questionfield {
    max-width: 400px;
    text-align: center;
    padding-top: 5px;
    margin: 0 auto;
    color: #fff;
}
#question_open {
    display: none;
}

#question_cover p{
    font-size: 1.2em;
    margin: 0;
    margin-bottom: 20px;
}

#question_cover a {
    display: inline-block;
    padding: 10px 30px;
    background: #0071bf;
    border-radius: 5px;
    max-width: 200px;
    font-size: 1.2em;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
}

#question_headline {
    font-size: 1.2em;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
}
.questionblock p {
    display: block;
    margin: 0;
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 1.1em;
}
.questionblock {
    max-width: 600px;
    margin: 0 auto;
}
.button {
    display: inline-block;
    border-radius: 5px;
    background-color: #0071bf;
    padding: 10px 10px;
    width: 40%;
    max-width: 200px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: #ffffff;
    border: 2px solid #0071bf;
    font-family: 'Open Sans', sans-serif;
}
.button:hover {
    color: #0071bf;
    background-color: #ffffff;
    border: 2px solid #0071bf;
}


.prozess_bar {
	background: url("../images/loader.gif") scroll right top transparent;
	width: 128px;
	height: 15px;
	margin-left: auto;
	margin-right: auto;
}
.prozess_status {
    font-size: 1.1em;
}

/******************************
        MEDIA QUERIES
*******************************/

@media (min-width: 450px) and (max-width: 599px){
    #content_box_left {
     width: 35%;   
    }
}

@media (min-width: 600px) and (max-width: 719px){
    #content_box_left {
     width: 28%;   
    }
}

@media (min-width: 720px) and (max-width: 899px){
#wrapper {
    background: url(../images/ss9-bg6-tab.jpg) top center no-repeat;
    background-size: contain;
}
    #content_box_right,
    #content_box_left {
    display: inline-block;
    vertical-align: top;
}

#content_top {
    height: 350px;
}    
    
#content_box_left {
    width: 41%;
    position: relative;
    height: 300px;
    margin-left: 5%;
}
#content_box_left img{
    max-width: 300px;
    position: absolute;
}

#content_box_right {
    width: 50%;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 1%;
}    
#content_box_right_text,
#question_cover p{
    text-align: left;
}
#content_box_right_text h1 {
    font-size: 2em;
}
#content_box_right_text p {
    font-size: 1em;
}  
}

@media (min-width: 900px) and (max-width: 1199px) {
#wrapper {
    background: url(../images/ss9-bg6-tab.jpg) top center no-repeat;
    background-size: contain;
}
    #content_box_right,
    #content_box_left {
    display: inline-block;
    vertical-align: top;
}
    
#content_top {
    height: 350px;
}   
#content_box_left {
    width: 32%;
    position: relative;
    height: 300px;
    margin-left: 15%;
}
#content_box_left img{
    max-width: 300px;
    position: absolute;
}

#content_box_right {
    width: 40%;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 1%;
}    
#content_box_right_text,
#question_cover p{
    text-align: left;
}
#content_box_right_text h1 {
    font-size: 2em;
}
#content_box_right_text p{
    font-size: 1em;
} 
    
}

@media (min-width: 1200px) {
#wrapper {
    background: url(../images/ss9-bg6.jpg) top center no-repeat;
    background-size: cover;
}
    #content_box_right,
    #content_box_left {
    display: inline-block;
    vertical-align: top;
}
#content_top {
    height: 350px;
}   
#content_box_left {
    width: 45%;
    position: relative;
    height: 300px;
    text-align: center;
}
#content_box_left img{
    max-width: 300px;
    position: absolute;
}

#content_box_right {
    width: 45%;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 1%;
}    
#content_box_right_text,
#question_cover p{
    text-align: left;
}
#content_box_right_text h1 {
    font-size: 2em;
}
#content_box_right_text p{
    font-size: 1em;
} 
}

/******************************
        ANIMATION
*******************************/

.animated {
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  animation-iteration-count: infinite;
}

.pulse2 {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  animation-iteration-count: infinite;
  animation-delay: -2s;
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

}