/* Style Sheet for RTR webpage*/

/* use this for variables */

/* use this for variables */
:root{
    --rtr_red: #b30000;
    --div_txt_background: #ffffff;
    --div_impressum_background: #080404;

    --txt_color: #080404;
    --txt_impressum: #ffffff;
    --line_color: #555555;
    --line_impressum: #ffffff;

    /*factors to downgrade text and symbol size in media
    boxes 
    - start with 1440 beacause font and symbols dont get bigger
    after 1440px screen width
    */
    --factor_1440_1280: calc(1280/1440);
    --factor_1440_1024: calc(1024/1440);
    --factor_1440_768: calc(768/1440);
    --factor_1440_640: calc(640/1440);
    --factor_1440_480: calc(480/1440);
    --factor_1440_320: calc(320/1440);

    /*setup font sizes */
    --font_size_logo_orig: 90px;
    --font_size_title_orig: 25px;
    --font_size_text_orig: 21px;

    /*setup social symbol sizes*/
    --social_symbol_height: 60px;
}

html,
body {
    height: 100%;
    width: 100vw;
    overflow-x: hidden; /* no scrolling on x-axis */
    margin: 0; 
}

/*---------------- stuff without media 

/*---------------- background images -------------------*/
.background-img-container {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover; 
    /*background-position: center center;*/
    height: 100vh;
    max-height: 100%;
    width: 100vw;
    max-width: 100%;
    /*color: #eeeeee;*/
    text-align: center;
    display: table;

    z-index:-1;
 }


 /*----- set up background images and media boxes */

/* set up how images should be position
- use center if it should focus towards the middle when downsizing screen
- add right or left respectively */

.head{
    background-position: center top;
    background-image: url("./img/backgrounds/rtr_web_header_landscape_orig.jpg"); /* is necessary for older browser which can not handle @media */
}

.one{
    background-position: center center;
    background-image: url("./img/backgrounds/rtr_web_one_landscape_orig.jpg");
}

.two{
    background-position: center top;
    background-image: url("./img/backgrounds/rtr_web_two_landscape_orig.jpg");
}

.three{
    background-position: center center;
    background-image: url("./img/backgrounds/rtr_web_three_landscape_orig.jpg");
}

.four{
    background-position: center top;
    background-image: url("./img/backgrounds/rtr_web_four_landscape_orig.jpg");
}

/* huge screen */
@media( (min-width:1920px) and (orientation:landscape) ){
    .head{
        background-image: url("./img/backgrounds/rtr_web_header_landscape_orig.jpg");
    }

    .one{
        background-image: url("./img/backgrounds/rtr_web_one_landscape_orig.jpg");
    }

    .two{
        background-image: url("./img/backgrounds/rtr_web_two_landscape_orig.jpg");
    }

    .three{
        background-image: url("./img/backgrounds/rtr_web_three_landscape_orig.jpg");
    }

    .four{
        background-image: url("./img/backgrounds/rtr_web_four_landscape_orig.jpg");
    }


}

@media( (max-width:1920px) and (orientation:landscape)  ){
    .head{
        background-image: url("./img/backgrounds/rtr_web_header_landscape_1920.jpg");
    }

    .one{
        background-image: url("./img/backgrounds/rtr_web_one_landscape_1920.jpg");
    }

    .two{
        background-image: url("./img/backgrounds/rtr_web_two_landscape_1920.jpg");
    }

    .three{
        background-image: url("./img/backgrounds/rtr_web_three_landscape_1920.jpg");
    }

    .four{
        background-image: url("./img/backgrounds/rtr_web_four_landscape_1920.jpg");
    }
}

@media( (max-width:1440px) and (orientation:landscape) ){
    .head{
        background-image: url("./img/backgrounds/rtr_web_header_landscape_1440.jpg");
    }

    .one{
        background-image: url("./img/backgrounds/rtr_web_one_landscape_1440.jpg");
    }

    .two{
        background-image: url("./img/backgrounds/rtr_web_two_landscape_1440.jpg");
    }

    .three{
        background-image: url("./img/backgrounds/rtr_web_three_landscape_1440.jpg");
    }
    
    .four{
        background-image: url("./img/backgrounds/rtr_web_four_landscape_1440.jpg");
    }
}

@media( (max-width:1280px) and (orientation:landscape) ){
    .head{
        background-image: url("./img/backgrounds/rtr_web_header_landscape_1280.jpg");
    }

    .one{
        background-image: url("./img/backgrounds/rtr_web_one_landscape_1280.jpg");
    }

    .two{
        background-image: url("./img/backgrounds/rtr_web_two_landscape_1280.jpg");
    }

    .three{
        background-image: url("./img/backgrounds/rtr_web_three_landscape_1280.jpg");
    }

    .four{
        background-image: url("./img/backgrounds/rtr_web_four_landscape_1280.jpg");
    }
}

/* tablets portrait*/
@media( (min-width:1024px) and (orientation:portrait) ){
    .head{
        background-image: url("./img/backgrounds/rtr_web_header_portrait_orig.jpg" );
        background-attachment: scroll; /* fixed not working in safari on iOs always freshly loads fixed image on scroll, start scorlling image on these devised */ 
    }

    .one{
        background-image: url("./img/backgrounds/rtr_web_one_portrait_orig.jpg");
        background-attachment: scroll; 
    }

    .two{
        background-image: url("./img/backgrounds/rtr_web_two_portrait_orig.jpg");
        background-attachment: scroll; 
    }

    .three{
        background-image: url("./img/backgrounds/rtr_web_three_portrait_orig.jpg");
        background-attachment: scroll; 
    }

    .four{
        background-image: url("./img/backgrounds/rtr_web_four_portrait_orig.jpg");
        background-attachment: scroll; 
    }
}


@media( (max-width:1024px) and (orientation:portrait) ){
    .head{
        background-image: url("./img/backgrounds/rtr_web_header_portrait_1024.jpg");
        background-attachment: scroll; 
    }

    .one{
        background-image: url("./img/backgrounds/rtr_web_one_portrait_1024.jpg");
        background-attachment: scroll; 
    }

    .two{
        background-image: url("./img/backgrounds/rtr_web_two_portrait_1024.jpg");
        background-attachment: scroll; 
    }

    .three{
        background-image: url("./img/backgrounds/rtr_web_three_portrait_1024.jpg");
        background-attachment: scroll; 
    }

    .four{
        background-image: url("./img/backgrounds/rtr_web_four_portrait_1024.jpg");
        background-attachment: scroll; 
    }
}

@media( (max-width:768px) and (orientation:portrait) ){
    .head{
        background-image: url("./img/backgrounds/rtr_web_header_portrait_768.jpg");
        background-attachment: scroll; 
    }

    .one{
        background-image: url("./img/backgrounds/rtr_web_one_portrait_768.jpg");
        background-attachment: scroll; 
    }

    .two{
        background-image: url("./img/backgrounds/rtr_web_two_portrait_768.jpg");
        background-attachment: scroll; 
    }

    .three{
        background-image: url("./img/backgrounds/rtr_web_three_portrait_768.jpg");
        background-attachment: scroll; 
    }

    .four{
        background-image: url("./img/backgrounds/rtr_web_four_portrait_768.jpg");
        background-attachment: scroll; 
    }
}

/* smartphone tilted */
@media( (max-width:1024px) and (orientation:landscape) ){
    .head{
        background-image: url("./img/backgrounds/rtr_web_header_landscape_1024.jpg");
        background-attachment: scroll; 
    }

    .one{
        background-image: url("./img/backgrounds/rtr_web_one_landscape_1024.jpg");
        background-attachment: scroll; 
    }

    .two{
        background-image: url("./img/backgrounds/rtr_web_two_landscape_1024.jpg");
        background-attachment: scroll; 
    }

    .three{
        background-image: url("./img/backgrounds/rtr_web_three_portrait_1024.jpg");
        background-attachment: scroll; 
    }

    .four{
        background-image: url("./img/backgrounds/rtr_web_four_portrait_1024.jpg");
        background-attachment: scroll; 
    }
}

@media( (max-width:768px) and (orientation:landscape) ){
    .head{
        background-image: url("./img/backgrounds/rtr_web_header_landscape_768.jpg");
        background-attachment: scroll; 
    }

    .one{
        background-image: url("./img/backgrounds/rtr_web_one_landscape_768.jpg");
        background-attachment: scroll; 
    }

    .two{
        background-image: url("./img/backgrounds/rtr_web_two_landscape_768.jpg");
        background-attachment: scroll; 
    }

    .three{
        background-image: url("./img/backgrounds/rtr_web_three_portrait_768.jpg");
        background-attachment: scroll; 
    }

    .four{
        background-image: url("./img/backgrounds/rtr_web_four_portrait_768.jpg");
        background-attachment: scroll; 
    }
}

/* smartphone */
@media( (max-width:640px) and (orientation:portrait) ){
    .head{
        background-image: url("./img/backgrounds/rtr_web_header_portrait_640.jpg");
        background-attachment: scroll; 
    }

    .one{
        background-image: url("./img/backgrounds/rtr_web_one_landscape_640.jpg");
        background-attachment: scroll; 
    }

    .two{
        background-image: url("./img/backgrounds/rtr_web_two_landscape_640.jpg");
        background-attachment: scroll; 
    }

    .three{
        background-image: url("./img/backgrounds/rtr_web_three_portrait_640.jpg");
        background-attachment: scroll; 
    }

    .four{
        background-image: url("./img/backgrounds/rtr_web_four_portrait_640.jpg");
        background-attachment: scroll; 
    }
}

@media( (max-width:480px) and (orientation:portrait) ){
    .head{
        background-image: url("./img/backgrounds/rtr_web_header_portrait_480.jpg");
        background-attachment: scroll; 
    }

    .one{
        background-image: url("./img/backgrounds/rtr_web_one_portrait_480.jpg");
        background-attachment: scroll; 
    }

    .two{
        background-image: url("./img/backgrounds/rtr_web_two_portrait_480.jpg");
        background-attachment: scroll; 
    }

    .three{
        background-image: url("./img/backgrounds/rtr_web_three_portrait_480.jpg");
        background-attachment: scroll; 
    }

    .four{
        background-image: url("./img/backgrounds/rtr_web_four_portrait_480.jpg");
        background-attachment: scroll; 
    }
}

@media( (max-width:320px) and (orientation:portrait) ){
    .head{
        background-image: url("./img/backgrounds/rtr_web_header_portrait_320.jpg");
        background-attachment: scroll; 
    }

    .one{
        background-image: url("./img/backgrounds/rtr_web_one_portrait_320.jpg");
        background-attachment: scroll; 
    }

    .two{
        background-image: url("./img/backgrounds/rtr_web_two_portrait_320.jpg");
        background-attachment: scroll; 
    }

    .three{
        background-image: url("./img/backgrounds/rtr_web_three_portrait_320.jpg");
        background-attachment: scroll; 
    }

    .four{
        background-image: url("./img/backgrounds/rtr_web_four_portrait_320.jpg");
        background-attachment: scroll; 
    }
}


/* ----------- set up basic containter --------------------------*/
/* basic container spanning whole screen width */
.section{
    max-width: 100%;
    width: 100vw;
    min-height: fit-content;

    margin:0;

    padding-top: 20px;
    padding-bottom: 20px;

    position: relative;

    display: block;
    /*overwrite for head*/
    background: var(--div_txt_background);

    /* centers sectionin the middle of the screen
    when stop scrolling */
    scroll-snap-align: start;
    
}

/* overwrite background color for head */
.head_bg{
    background: transparent
}

/* overwrite backrgorund color for impressum*/
.impressum_bg{
    background: var(--div_impressum_background);
}

/* section inside in v1 */
.section_content{
    min-height: fit-content;

    overflow:hidden; /* necessary that fit content works with float:left of release box*/

    /*center inside section */
    position:relative;
    left: 50%;
    transform: translate(-50%, 0%);
    /*border: 1px solid red;*/

}

/* set width of each colum*/
.tourdates_table{
    margin-left: auto;
    margin-right: auto;
    width:100%;
    max-width: 1008px; /*70% vo 1440px*/ 

}

.tourdates_table_col1{
    width: 15%;  
}

.tourdates_table_col2{
    width: 75%;
}

.tourdates_table_col3{
    width: 10%;
}

td, tr{
    padding-top:5px;
    padding-bottom:5px;
    padding-right:2px;
}

/* container for merch */
.merch_section {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    gap: 40px;
    justify-content: flex-start;

    /*hide y scroll bar */
    scrollbar-width: none; /*firefox*/
    -ms-overflow-style: none; /* IE/Edge */
}

.merch_box{
    /*media box at the bodom of the css*/
    position: relative  ;

    width:50%;
    min-width: fit-content;
    max-height: fit-content;
    /*Place side by side*/
    float: left;
    
    justify-content: right;   
}

/* merch box hovering */
.merch_box:hover .merch_description{
    visibility: visible;
    opacity: 1;
}

.merch_box:hover .merch_picture{
    opacity: 0.3;
}

/*set-up box with release description*/
.merch_description{
    transition: .3s ease;
    opacity: 0;
    /*set absolute position to fit img */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    text-align: center;
}

/* container for release */
.release_box{
    /*media box at the bodom of the css*/
    position: relative;

    width:50%;
    min-width: fit-content;
    max-height: fit-content;
    /*Place side by side*/
    float: left;
    
    justify-content: center;  

}

/*release hover */
.release_box:hover .release_description{
    visibility: visible;
    opacity: 1;
}

.release_box:hover .release_cover{
    opacity: 0.3;
}

/*set-up box with release description*/
.release_description{
    transition: .3s ease;
    opacity: 0;
    /*set absolute position to fit img */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    text-align: center;
}


/* ----------------Text setupts ------------------*/
@font-face {
    font-family: 'Trixie-Text';
    src: url('./font/Trixie-Text.otf')
  }
  
/* header text */
.logo{
    font-size: var(--font_size_logo);
    font-family: Trixie-Text;
    font-weight: normal;
    text-decoration: none;
    color: var(--txt_color);

    display:block
}

/*title  */
.title{
    font-size: var(--font_size_title);
    font-family: 'Courier New', Courier, monospace;
    background-color: var(--div_txt_background);
    font-weight: bold;
    text-transform: uppercase;
    color: var(--txt_color);
    text-align: center;

}

.line{
    position: relative;
    z-index: 1;

}

.line::after {
    border-top: 2px solid var(--line_color);
    content:"";
    margin: 0 auto; /* this centers the line to the full width specified */
    position: absolute; /* positioning  must be absolute here, and relative positioning must be applied to the parent */
    top: 45%; left: 0; right: 0; bottom: 0;

    width: 100%;
    z-index: -1;
}

span { 
    /* to hide the lines from behind the text, you have to set the background color the same as the container */ 
    background: var(--div_txt_background); 
    padding: 0 15px; 
    color: var(--txt_color);
}

.link{
    text-decoration: none;
}


.txt, .txt_press{
    /*line-height: 1.0;*/
    font-family: 'Courier New', Courier, monospace;
    color: var(--txt_color);
    text-align: center;
}

.txt{
    font-size: var(--font_size_text);
}

.txt_press{
    font-size:var(--font_size_text_press)
}

/* is used to set margin for text above/below video/image*/
.below{
    margin-top: 8px;
}
.above{
    margin-bottom: 8px;
}


/*overwrite line color impressum */
.impressum_txt{
    color: var(--txt_impressum);
    background-color: var(--div_impressum_background);
}

/* style of links */
a{
    font-size: var(--font_size_text);
    text-decoration: none;
    color: inherit;
    font-size: inherit;
}

/* -------------img / symbol set ups ---------------*/
.video{
    width:60vw;
    height: calc(60vw*0.5625);
    display: block;
    margin: auto;
}

.merch_picture{
    text-align: center;
    margin: auto; /*to center*/
    display:block;   

    opacity: 1;
    transition: .3s ease;
    backface-visibility: hidden;

}


.release_cover{
    text-align: center;
    margin: auto; /*to center*/
    display:block;   

    opacity: 1;
    transition: .3s ease;
    backface-visibility: hidden;

}

/* merch needs to be added in the media shizzle box */

/*media shizzle */
@media(min-width:1440px){
    :root{
        --font_size_logo: var(--font_size_logo_orig);
        --font_size_title: var(--font_size_title_orig);
        --font_size_text: var(--font_size_text_orig);
        --font_size_text_press: var(--font_size_text_orig);
    }

    .section_content{
        width: 1440px;
    }

    .social_symbol_head{
        height: var(--social_symbol_height);     
        margin-left: var(--social_symbol_height);
    }

    .social_symbol{
        height: var(--social_symbol_height);  
    }

    /*merch section*/
    .merch_description{
        /*start div in center of image*/
        width: 392px; /*400 - 2*4*/
        max-height: 392px;
        padding: 4px;
    }

    .ollie_cd{
        content: url("img/merch/CD_Ollie_Homepage_1440.png");
    }

    .ollie_hoodie{
        content: url("img/merch/Hoodie_Homepage_1440.png");
    }

    .hopking_skate{
        content: url("img/merch/Ollie_Skateboard_Homepage_1440.jpg");
    }

    .longsleeve_driving{
        content: url("img/merch/Longsleeve_Homepage_1440.jpg");
    }

    .shirt_2{
        content: url("img/merch/shirt_2_1440.jpg");
    }

    /*release section */
    .release_description{
        /*start div in center of image*/
        width: 392px; /*400 - 2*4*/
        max-height: 392px;
        padding: 4px;
    }

    .ozzy{
        content: url("img/releases/Ozzy_Osbourne_1440.jpg");
    }

    .disassembled{
        content: url("img/releases/Disassembled_Man_1440.jpg");
    }

    .dont_sleep{
        content: url("img/releases/Dont_Sleep_1440.jpg");
    }

    .driving_live{
        content: url("img/releases/Driving_Live_1440.png");
    }

    .driving_south{
        content: url("img/releases/Driving_South_1440.jpg");
    }
}

@media(max-width:1440px){
    :root{
        --font_size_logo: var(--font_size_logo_orig);
        --font_size_title: var(--font_size_title_orig);
        --font_size_text: var(--font_size_text_orig);
        --font_size_text_press: var(--font_size_text_orig);
    }
    
    .section_content{
        width: 1280px;
    }

    .social_symbol_head{
        height: var(--social_symbol_height);
        margin-left: var(--social_symbol_height);
    }

    .social_symbol{
        height: var(--social_symbol_height);
    }

    /*merch section*/
    .merch_description{
        width: 392px;
        max-height: 392px;
        padding: 4px;
    }

    .ollie_cd{
        content: url("img/merch/CD_Ollie_Homepage_1440.png");
    }

    .ollie_hoodie{
        content: url("img/merch/Hoodie_Homepage_1440.png");
    }

    .hopking_skate{
        content: url("img/merch/Ollie_Skateboard_Homepage_1440.jpg");
    }

    .longsleeve_driving{
        content: url("img/merch/Longsleeve_Homepage_1440.jpg");
    }

    .shirt_2{
        content: url("img/merch/shirt_2_1440.jpg");
    }

    /*release section */
    .release_description{
        width: 392px;
        max-height: 392px;
        padding: 4px;
    }

    .ozzy{
        content: url("img/releases/Ozzy_Osbourne_1440.jpg");
    }

    .disassembled{
        content: url("img/releases/Disassembled_Man_1440.jpg");
    }

   .dont_sleep{
    content: url("img/releases/Dont_Sleep_1440.jpg");
    }

    .driving_live{
        content: url("img/releases/Driving_Live_1440.png");
    }

    .driving_south{
        content: url("img/releases/Driving_South_1440.jpg");
    }
}

@media(max-width:1280px){
    :root{
        --font_size_logo: calc(var(--font_size_logo_orig)* var(--factor_1440_1280)) ;
        --font_size_title: var(--font_size_title_orig);
        --font_size_text: var(--font_size_text_orig);
        --font_size_text_press: calc(var(--font_size_text_orig)* var(--factor_1440_1280));
    }

    .section_content{
        width: 1024px;
    }
    
    /*merch section*/
    .merch_description{
        width: 347px; /* 355 - 4px*/
        max-height: 347px;
        padding: 4px;
    }

    .ollie_cd{
        content: url("img/merch/CD_Ollie_Homepage_1280.png");
    }

    .ollie_hoodie{
        content: url("img/merch/Hoodie_Homepage_1280.png");
    }

    .hopking_skate{
        content: url("img/merch/Ollie_Skateboard_Homepage_1280.jpg");
    }

    .longsleeve_driving{
        content: url("img/merch/Longsleeve_Homepage_1280.jpg");
    }

    .shirt_2{
        content: url("img/merch/shirt_2_1280.jpg");
    }

    /*release section */
    .release_description{
        width: 347px; /* 355 - 4px*/
        max-height: 347px;
        padding: 4px;
    }

    .social_symbol_head {
        height: calc(var(--social_symbol_height) * var(--factor_1440_1280));
        margin-left: calc(var(--social_symbol_height) * var(--factor_1440_1280));
    }

    .social_symbol{
        height: calc(var(--social_symbol_height) * var(--factor_1440_1280));
    }

    .ozzy{
        content: url("img/releases/Ozzy_Osbourne_1280.jpg");
    }

    .disassembled{
        content: url("img/releases/Disassembled_Man_1280.jpg");
    }
   
   .dont_sleep{
    content: url("img/releases/Dont_Sleep_1280.jpg");
    }

    .driving_live{
        content: url("img/releases/Driving_Live_1280.png");
    }

    .driving_south{
        content: url("img/releases/Driving_South_1280.jpg");
    }

}

@media(max-width:1024px){
    :root{
        --font_size_logo: calc(var(--font_size_logo_orig)* var(--factor_1440_1024)) ;
        --font_size_title: var(--font_size_title_orig);
        --font_size_text: var(--font_size_text_orig);
        --font_size_text_press: calc(var(--font_size_text_orig)* var(--factor_1440_1024));
    }

    .section_content{
        width: 768px;
    }
    
    /*merch section*/
    .merch_description{
        width: 278px; /*284 - 3px%*/
        max-height: 278px;
        padding: 3px;
    }

    .ollie_cd{
        content: url("img/merch/CD_Ollie_Homepage_1024.png");
    }

    .ollie_hoodie{
        content: url("img/merch/Hoodie_Homepage_1024.png");
    }

    .hopking_skate{
        content: url("img/merch/Ollie_Skateboard_Homepage_1024.jpg");
    }

    .longsleeve_driving{
        content: url("img/merch/Longsleeve_Homepage_1024.jpg");
    }

    .shirt_2{
        content: url("img/merch/shirt_2_1024.jpg");
    }

    /*release section */
    .release_description{
        width: 278px; /*284 - 3px%*/
        max-height: 278px;
        padding: 3px;
    }

    .social_symbol_head{
        height: calc(var(--social_symbol_height) * var(--factor_1440_1024));
        margin-left: calc(var(--social_symbol_height) * var(--factor_1440_1024))
    }

    .social_symbol{
        height: calc(var(--social_symbol_height) * var(--factor_1440_1024));
    }
    
    .ozzy{
        content: url("img/releases/Ozzy_Osbourne_1024.jpg");
    }

    .disassembled{
        content: url("img/releases/Disassembled_Man_1024.jpg");
    }

    .dont_sleep{
        content: url("img/releases/Dont_Sleep_1024.jpg");
    }

    .driving_live{
        content: url("img/releases/Driving_Live_1024.png");
    }

    .driving_south{
        content: url("img/releases/Driving_South_1024.jpg");
    }
}

@media(max-width:768px){
    :root{
        --font_size_logo: calc(var(--font_size_logo_orig)* var(--factor_1440_768)) ;
        --font_size_title: 21px;
        --font_size_text: 18px;
        --font_size_text_press: calc(var(--font_size_text_orig)* var(--factor_1440_768));
    }

    .section_content{
        width: 640px;
    }

    /*merch section*/
    .merch_box{
        /*Place below each other*/
        float: none;
        left: 50%;
        transform: translate(-50%, 0%);
    }

    .merch_description{
        width: 278px; /*284 - 1%*/
        max-height: 278px;
        padding: 3px;
    }

    .ollie_cd{
        content: url("img/merch/CD_Ollie_Homepage_1024.png");
    }

    .ollie_hoodie{
        content: url("img/merch/Hoodie_Homepage_1024.png");
    }
    
    .hopking_skate{
        content: url("img/merch/Ollie_Skateboard_Homepage_1024.jpg");
    }

    .longsleeve_driving{
        content: url("img/merch/Longsleeve_Homepage_1024.jpg");
    }

    .shirt_2{
        content: url("img/merch/shirt_2_1024.jpg");
    }

    /*release section */
    .release_box{
        /*Place below each other*/
        float: none;
        left: 50%;
        transform: translate(-50%, 0%);
    }

    .release_description{
        width: 278px; /*284 - 1%*/
        max-height: 278px;
        padding: 3px;
    }

    .social_symbol_head{
        height: calc(var(--social_symbol_height) * var(--factor_1440_768));
        margin-left: calc(var(--social_symbol_height) * var(--factor_1440_768));
    }

    .social_symbol{
        height: calc(var(--social_symbol_height) * var(--factor_1440_768));
    }

    .ozzy{
        content: url("img/releases/Ozzy_Osbourne_1024.jpg");
    }

    .disassembled{
        content: url("img/releases/Disassembled_Man_1024.jpg");
    }

    .dont_sleep{
        content: url("img/releases/Dont_Sleep_1024.jpg");
    }

    .driving_live{
        content: url("img/releases/Driving_Live_1024.png");
    }

    .driving_south{
        content: url("img/releases/Driving_South_1024.jpg");
    }
}

@media(max-width:640px){
    :root{
        --font_size_logo: calc(var(--font_size_logo_orig)* var(--factor_1440_640)) ;
        --font_size_title: 21px;
        --font_size_text: 18px;
        --font_size_text_press: calc(var(--font_size_text_orig)* var(--factor_1440_640));
    }

    .section_content{
        width: 480px;
    }

    /*merch section*/
    .merch_box{
        /*Place below each other*/
        float: none;
        left: 50%;
        transform: translate(-50%, 0%);
    }

    .merch_description{
        width: 278px; /*284 - 1%*/
        max-height: 278px;
        padding: 3px;
    }

    .ollie_cd{
        content: url("img/merch/CD_Ollie_Homepage_1024.png");
    }

    .ollie_hoodie{
        content: url("img/merch/Hoodie_Homepage_1024.png");
    }

    .hopking_skate{
        content: url("img/merch/Ollie_Skateboard_Homepage_1024.jpg");
    }

    .longsleeve_driving{
        content: url("img/merch/Longsleeve_Homepage_1024.jpg");
    }

    .shirt_2{
        content: url("img/merch/shirt_2_1024.jpg");
    }

    /*release section */
    .release_box{
        /*Place below each other*/
        float: none;
        left: 50%;
        transform: translate(-50%, 0%);
    }

    .release_description{
        width: 278px; /*284 - 1%*/
        max-height: 278px;
        padding: 3px;
    }

    /* use 768 ratio for symbol height*/
    .social_symbol_head{
        height: calc(var(--social_symbol_height) * var(--factor_1440_768));
        margin-left: calc(var(--social_symbol_height) * var(--factor_1440_640));
    }

    /* use 768 ratio for symbol height*/
    .social_symbol{
        height: calc(var(--social_symbol_height) * var(--factor_1440_768));
    }

    .ozzy{
        content: url("img/releases/Ozzy_Osbourne_1024.jpg");
    }

    .disassembled{
        content: url("img/releases/Disassembled_Man_1024.jpg");
    }

    .dont_sleep{
        content: url("img/releases/Dont_Sleep_1024.jpg");
    }

    .driving_live{
        content: url("img/releases/Driving_Live_1024.png");
    }

    .driving_south{
        content: url("img/releases/Driving_South_1024.jpg");
    }
}

@media(max-width:480px){
    :root{
        --font_size_logo: calc(var(--font_size_logo_orig)* var(--factor_1440_480)) ;
        --font_size_title: 18px;
        --font_size_text: 15px;
        --font_size_text_press: calc(var(--font_size_text_orig)* var(--factor_1440_480));
    }

    .section_content{
        width: 320px;
    }
   
    /*merch section*/
    .merch_box{
        /*Place below each other*/
        float: none;
        left: 50%;
        transform: translate(-50%, 0%);
    }

    .merch_description{
        width: 278px; /*284 - 1%*/
        max-height: 278px;
        padding: 3px;
    }

    .ollie_cd{
        content: url("img/merch/CD_Ollie_Homepage_1024.png");
    }

    .ollie_hoodie{
        content: url("img/merch/Hoodie_Homepage_1024.png");
    }

    .hopking_skate{
        content: url("img/merch/Ollie_Skateboard_Homepage_1024.jpg");
    }

    .longsleeve_driving{
        content: url("img/merch/Longsleeve_Homepage_1024.jpg");
    }

    .shirt_2{
        content: url("img/merch/shirt_2_1024.jpg");
    }

    /*release section */
    .release_box{
        /*Place below each other*/
        float: none;
        left: 50%;
        transform: translate(-50%, 0%);
    }

    .release_description{
        width: 278px; /*284 - 1%*/
        max-height: 278px;
        padding: 3px;
    }

    /* use 640 ratio for symbol height*/
    .social_symbol_head{
        height: calc(var(--social_symbol_height) * var(--factor_1440_640));
        margin-left: calc(var(--social_symbol_height) * var(--factor_1440_480))
    }

    /* use 640 ratio for symbol height*/
    .social_symbol{
        height: calc(var(--social_symbol_height) * var(--factor_1440_640));
    }

    .ozzy{
        content: url("img/releases/Ozzy_Osbourne_1024.jpg");
    }

    .disassembled{
        content: url("img/releases/Disassembled_Man_1024.jpg");
    }

    .dont_sleep{
        content: url("img/releases/Dont_Sleep_1024.jpg");
    }

    .driving_live{
        content: url("img/releases/Driving_Live_1024.png");
    }

    .driving_south{
        content: url("img/releases/Driving_South_1024.jpg");
    }

}

@media(max-width:320px){
    :root{
        --font_size_logo: calc(var(--font_size_logo_orig)* var(--factor_1440_320)) ;
        --font_size_title: 18px;
        --font_size_text: 15px;
        --font_size_text_press: calc(var(--font_size_text_orig)* var(--factor_1440_320));

    }

    .section_content{
        width: 300px;
    }

    /*merch section*/
    .merch_box{
        /*Place below each other*/
        float: none;
        left: 50%;
        transform: translate(-50%, 0%);
    }

    .merch_description{
        width: 278px; /*284 - 1%*/
        max-height: 278px;
        padding: 3px;
    }

    .ollie_cd{
        content: url("img/merch/CD_Ollie_Homepage_1024.png");
    }
    
    .ollie_hoodie{
        content: url("img/merch/Hoodie_Homepage_1024.png");
    }

    .hopking_skate{
        content: url("img/merch/Ollie_Skateboard_Homepage_1024.jpg");
    }

    .longsleeve_driving{
        content: url("img/merch/Longsleeve_Homepage_1024.jpg");
    }

    .shirt_2{
        content: url("img/merch/shirt_2_1024.jpg");
    }

    /*release section */
    .release_box{
        /*Place below each other*/
        float: none;
        left: 50%;
        transform: translate(-50%, 0%);
    }

    .release_description{
        width: 278px; /*284 - 1%*/
        max-height: 278px;
        padding: 3px;
    }

    /* use 640 ratio for symbol height*/
    .social_symbol_head{
        height: calc(var(--social_symbol_height) * var(--factor_1440_640));
        margin-left: calc(var(--social_symbol_height) * var(--factor_1440_320))
    }

    /* use 640 ratio for symbol height*/
    .social_symbol{
        height: calc(var(--social_symbol_height) * var(--factor_1440_640));
    }

    .ozzy{
        content: url("img/releases/Ozzy_Osbourne_1024.jpg");
    }

    .disassembled{
        content: url("img/releases/Disassembled_Man_1024.jpg");
    }

    .dont_sleep{
        content: url("img/releases/Dont_Sleep_1024.jpg");
    }

    .driving_live{
        content: url("img/releases/Driving_Live_1024.png");
    }

    .driving_south{
        content: url("img/releases/Driving_South_1024.jpg");
    }

}