#page-header {
    position: relative;
    height: calc(100vh - 330px);
    min-height: 400px;
    max-height: 700px;
    overflow: hidden;
    background-color: #ccc;
}
#page-header #page-header-content { position: relative; display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 90%; max-width: 1400px; height: 100%; z-index: 2; }
#page-header #page-header-content .center { position: relative; margin-bottom: 45px; width: 50%; color: #fff; text-align: center; text-shadow: 0 0 45px rgba(0, 0, 0, 1); }
#page-header #page-header-content .center:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; border-radius: 50%; opacity: 0.25; opacity: 0.5; filter: blur(30px); transform: scale(1.5); z-index: -1; background-color: #222; }
#page-header #page-header-content .center h1 { display: flex; flex-direction: column; margin-bottom: 15px; color: #fff; }
#page-header #page-header-content .center h1 span { }
#page-header #page-header-content .center h1 span:nth-of-type(1) { margin-bottom: 15px; font-size: 24px; text-transform: uppercase; }
#page-header #page-header-content .center h1 span:nth-of-type(2) { font-size: 44px; line-height: 1.1; }
#page-header #page-header-content .center h2 { margin-bottom: 0; font-size: 36px; color: #fff; font-weight: 400; line-height: 1.2; }
#page-header #page-header-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
#page-header #page-header-image:before { position: absolute; top: 0; left: 0; width: 50%; height: 100%; content: ""; opacity: 0.25; background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); }
#page-header #page-header-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

#page-header #page-header-content .center { width: auto; }
#page-header #page-header-content .center h1 span:nth-of-type(1) { margin-bottom: 0; }
#page-header #page-header-content .center h1 span:nth-of-type(2) { display: none; }
#page-header #page-header-content .center h2 { font-size: 48px; font-weight: 700; }

#page-header #page-header-content { align-items: flex-end; justify-content: flex-start; }
#page-header #page-header-content .center { margin-bottom: 120px; text-align: left; }
#page-header #page-header-content .center h1 { margin-bottom: 10px; }
#page-header #page-header-content .center h1 span:nth-of-type(1) { font-size: 21px; }
#page-header #page-header-content .center h2 { font-size: 40px; }

#page-header #page-header-content .rvwbtn { position: absolute; display: flex; align-items: center; justify-content: center; flex-direction: column; top: 60px; right: -10px; padding: 25px 25px 29px 25px; width: 215px; height: 215px; font-size: 18px; color: #fff; line-height: 1.2; text-align: center; border-radius: 50%; box-sizing: border-box; transform: rotate(5deg) scale(0.9); transform-origin: top right; background-color: var(--green); }
#page-header #page-header-content .rvwbtn:hover span { color: rgb(255 255 255 / .8); }
#page-header #page-header-content .rvwbtn span.year { font-weight: 500; opacity: 0.9; }
#page-header #page-header-content .rvwbtn span.grade { font-size: 40px; font-weight: 700; }
#page-header #page-header-content .rvwbtn span.parents { font-weight: 300; opacity: 0.8; }

#page-header .arrow-down {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    bottom: 50px;
    cursor: pointer;
    transform: translateX(-50%);
}
#page-header .arrow-down svg {
    width: 30px;
    height: 30px;
    fill: var(--background);
}
#page-header .breadcrumbs {
    position: absolute;
    left: 20px;
    top: 20px;
}
#page-header .breadcrumbs ul {
    display: flex;
    text-transform: lowercase;
}
#page-header .breadcrumbs ul li {
    padding-right: 10px;
    color: var(--background);
}
#page-header .breadcrumbs ul li:not(:last-child):after {
    content: "›";
    padding-left: 10px;
}
#page-header .breadcrumbs ul li a {
    color: var(--background);
}

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

    #page-header { display: flex; flex-direction: column; height: calc(100vh - 210px); height: auto; min-height: 0; max-height: none; background-color: transparent; }
    
    #page-header #page-header-content { order: 2; width: 85%; }
    
    #page-header #page-header-content .rvwbtn { top: -105px; transform: rotate(5deg) scale(.6); }
    
    #page-header #page-header-content .center { margin: 45px 0; width: 100%; text-align: center; text-shadow: none; }
    #page-header #page-header-content .center:after { content: none; }
    #page-header #page-header-content .center h1 { margin-bottom: 10px; }
    #page-header #page-header-content .center h1 span:nth-of-type(1) { margin-bottom: 0; font-size: 21px; color: var(--brown); font-weight: 800; }
    #page-header #page-header-content .center h1 span:nth-of-type(2) { font-size: 24px; color: var(--brown); }
    #page-header #page-header-content .center h2 { font-size: 28px; color: var(--brown); line-height: 1.1; }
    
    #page-header #page-header-image { position: relative; order: 1; aspect-ratio: 10 / 4; }

}