/*--------------------------LANSCAPE*/
@media only screen and (orientation:landscape){

}



@media screen and (orientation:landscape) and (max-width: 480px){
.content-box{text-align: center; left: 55vw; top:50vh; transform: translate(-50%, -50%);}
.hrblumberg{width:50vw; left: 50%;  top:-35%; transform: translate(-50%, 35%);}
h1{font-size: 4vw;}
h2{font-size: 2.8vw;}
span{width: 100%;}
.scrollbluetenbox{display: none;}
} 


/*--------------------------*/
@media screen and (orientation:landscape) and (min-width: 481px)  {
.content-box{left:15vw; bottom:20vh; margin-bottom:1.5em;}
.hrblumberg{width:38vw; top:22px;}
h1{font-size: 2.3vw;}
h2{font-size: 2vw;}
.scrollbluete {height:6em ;width:6em;}
} 

/*--------------------------*/
@media screen and (orientation:landscape) and (min-width: 667px)  {
.content-box{margin-bottom:0;}    
.scrollbluete {height:8em ;width:8em; }    
}


/*--------------------------*/
@media screen and (orientation:landscape) and (min-width: 768px) {    
.hrblumberg{width:40vw; }
}

/*--------------------------*/
@media screen and (orientation:landscape) and (min-width: 1024px)  {
h1{font-size: 2vw;}
h2{font-size: 1.8vw;}   
}


/*--------------------------*/
@media screen and (orientation:landscape) and (min-width: 1280px)  {
h1{font-size: 1.8vw;}
h2{font-size: 1.6vw;}   
.scrollbluete {height:10em ;width:10em;}  
}


/*--------------------------*/
@media screen and (orientation:landscape) and (min-width: 1440px) {
.content-box{left:10vw; bottom:10vh; }  
.scrollbluete {height:12em; width:12em;}  
}



/*--------------------------*/
@media screen and (orientation:landscape) and (min-width: 1920px) {

.hrblumberg{width:30vw;}
h1{font-size: 1.6vw;}
h2{font-size: 1.4vw;}
.scrollbluete {height:14em ;width:14em;}


}


/*--------------------------*/
@media screen and (orientation:landscape) and (min-width: 3560px) {

.scrollbluete {height:28em ;width:28em;}  
.scrollbluetenbox{bottom:10em; right:10em;}
}




/*--------------------------PORTRAIT*/
/*--------------------------*/
@media only screen and (orientation:portrait){
.content-box{text-align: center; left: 50vw; top:50vh; transform: translate(-50%, -50%);}
.hrblumberg{width:75vw; left: 50%; top:-30%; transform: translate(-50%, 30%);}
h1{font-size: 5vw;}
h2{font-size: 4vw; font-weight: 500;}
span{width: 100%;}
}


/*--------------------------*/
@media screen and (orientation:portrait) and (max-height: 567px) {
.scrollbluetenbox{display: none;}
} 

/*--------------------------*/
@media screen and (orientation:portrait) and (min-height: 568px)  {
.scrollbluetenbox{display: block;}
.scrollbluetenbox{ left: 50%; bottom: 8%; transform: translate(-50%, -8%);}
.scrollbluete {height:8em ;width:8em;}    
}

/*--------------------------*/
@media screen and (orientation:portrait) and (min-height: 768px) {
.content-box{top:48vh;}
.hrblumberg{width:65vw;}
.scrollbluete {height:10em ;width:10em;} 
}


/*--------------------------*/
@media screen and (orientation:portrait) and (min-height: 1024px) {


}


/*--------------------------*/
@media screen and (orientation:portrait) and (min-height: 1280px) {
.scrollbluete {height:12em ;width:12em;} 
}


/*--------------------------*/
@media screen and (orientation:portrait) and (min-width: 1440px) {

}


/*--------------------------*/
@media screen and (orientation:portrait) and (min-height: 1920px) {
.scrollbluete {height:16em ;width:16em;} 
}


@media screen and (orientation:portrait) and (min-height: 3560px) {
.scrollbluete {height:30em ;width:30em;}  
}