/*TEMPLATE*/

@font-face {
    font-family: "Nova Flat";
    src: url(../fonts/NovaFlat-Regular.ttf);
}

:root {

    /*GLOBABL VARIABLES*/
    --overallcolor:hsla(2, 72%, 20%, 1);
    --overallcolorbright: hsla(2, 72%, 30%, 1);
    --darkcolor: rgb(0, 0, 0);
    --defaulttextcolor: rgb(214, 214, 214);
    --boldbigtextcolor: rgb(214, 214, 214);
    --overallwidth: clamp(250px, 80vw, 2923px);
    --employeeoverallwidth: clamp(250px, 80vw, 1423px);
    --modaloverallwidth: clamp(250px, 80vw, 923px);
    --postercontainerwidth: clamp(250px, 95vw, 3000px);
    --defaulttext: clamp(0.7rem ,2vw, 1rem);
    --heavytext: clamp(1rem ,2.3vw, 1.3rem);
    --googlewidth: clamp(300px, 60vw, 400px);
    --googleheight: clamp(200px, 60vw, 300px);

    /*FIREFOX SPECIFIC*/
    scrollbar-color: var(--overallcolor) var(--darkcolor);
}

html {
    scroll-behavior: smooth;
}

body::-webkit-scrollbar {
    width: 17px;
}

body::-webkit-scrollbar-track {
    background: rgba(0, 64, 80, 0);
}

body::-webkit-scrollbar-thumb {
    background: var(--overallcolor);
    border: 0px solid var(--overallcolor);
}

body {
    background: var(--darkcolor);
    box-sizing: border-box;
    margin: 0%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    color: var(--defaulttextcolor);
}

a {
    color: var(--overallcolorbright);
    text-decoration: none;
}

.stop-transitions {
    transition: none !important;
}

.mainbg {
    position: fixed;
    box-sizing: border-box;
    top: 0px;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(rgb(0, 0, 0, 0.1), rgb(134, 0, 0, 0.1), rgb(0, 195, 255, 0.05), rgb(94, 0, 94, 0.1), rgb(0, 0, 0, 0.1));
    background-size: 1000% 1000%;
    animation: gradBG 30s ease-in-out infinite alternate;
    filter: blur(50px);*/
    z-index: -1;
}
/*
@keyframes gradBG {
    from {
        background-position: 50% 0%;
    }

    50% {
        background-position: 50% 100%;
    }

    to {
        background-position: 0% 50%;

    }
}*/

.banner {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    margin: auto;
    padding: 0%;
    /*padding: clamp(25px, 2.5vw, 100px) 0vw 0vw 0vw;*/
    background-color: rgb(0, 0, 0);
}

.banner > img {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 80vw;
    /*width: 90vw;*/
    margin: auto;
    padding: 0%;
    /*padding: clamp(50px, 2.5vw, 100px) 0vw 0vw 0vw;*/
    filter: hue-rotate(20deg);
}

.celebrating {
    position: relative;
    margin: auto;
    padding: 0%;
    text-align: center;
    width: 100%;
    letter-spacing: 2.5px;
    font-size: 2vw;
    /*font-size: clamp(0.2rem ,2vw, 3.5rem);*/
    background-color: rgb(0, 0, 0);
}

.celebrating > p {
    padding-top: 0%;
    margin-top: 0%;
    background-color: rgb(0, 0, 0);
    background: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0));
}

.banner-fluid {
    height: auto;
    margin: auto;
    width: 100%;
}

.navi-banner {
    position: sticky;
    position: -webkit-sticky;
    display: flex;
    top: 0px;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: clamp(5px, 1vw, 10px) 0;
    margin: 0%;
    align-content: start;
    background-color: var(--darkcolor);
    border-bottom: solid 2px rgba(255, 255, 255, 0);
    z-index: 11;
}

.menu-button {
    display: flex;
    justify-content: space-evenly;
}

.hamburger {
    padding-left: clamp(5px, 1vw, 12px);
    margin: auto clamp(5px, 1vw, 12px);
}

.menu-buttonText {
    font-family: "Nova Flat", sans-serif;
    text-align: center;
    color: var(--boldbigtextcolor);
    text-decoration: none;
    letter-spacing: 5px;
    transform: scale(0.8,1.7);
    font-size: clamp(0.7rem ,2vw, 1.6rem);
    padding: clamp(2.5px, 1vw, 12px) clamp(2.5px, 1vw, 12px);
    transition: 0.25s ease-in-out;
}

.reel-buttonText {
    font-family: "Nova Flat", sans-serif;
    text-align: center;
    color: var(--boldbigtextcolor);
    text-decoration: none;
    font-size: clamp(0.7rem ,2vw, 1.6rem);
    padding: clamp(2.5px, 1vw, 12px) clamp(2.5px, 1vw, 12px);
    transition: 0.25s ease-in-out;
}

#buttontextdown {
    transform: scale(2, 1) rotate(90deg);
}

#hamAnim {
    height: auto;
    width: clamp(20px, 2.5vw, 50px);
    filter: saturate(0%) brightness(250%);
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

#hamAnim2 {
    height: auto;
    width: clamp(20px, 2.5vw, 50px);
    filter: saturate(0%) brightness(250%);
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}
/*
.menu {
    position: fixed;
    visibility: hidden;
    top: calc(clamp(0.7rem ,2vw, 1.6rem) +3%);
    left: 10%;
    transform: translateY(-60px);
    box-sizing: border-box;
    width: 80vw;
    padding: clamp(0px, 0.5vw, 20px) 0;
    margin: auto;
    background-color: rgb(0, 0, 0);
    border-radius: 0 0 5vw 5vw;
    border-bottom: solid 2px rgba(255, 255, 255, 0.5);
    border-left: solid 2px rgba(255, 255, 255, 0.5);
    border-right: solid 2px rgba(255, 255, 255, 0.5);
    transition: 0.5s ease-in-out;
    z-index: 10;
}

.menu-flex {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: auto;
    width: clamp(50px, 80vw, 1923px);
}

.menu-text {
    font-family: "Nova Flat", cursive;
    text-align: center;
    color: hsla(2, 72%, 40%, 1);
    text-decoration: none;
    letter-spacing: 5px;
    transform: scale(0.8,1.7);
    font-size: clamp(0.7rem ,2vw, 1.6rem);
    padding: 15px clamp(2.5px, 1vw, 12px);
}
*/

.menu {
    position: fixed;
    visibility: hidden;
    top: calc(clamp(0.7rem ,2vw, 1.6rem) +3%);
    left: 0%;
    transform: translateY(-600px);
    box-sizing: border-box;
    width: auto;
    height: auto;
    padding: clamp(0px, 1vw, 20px) 0;
    margin: auto;
    background-color: rgb(0, 0, 0);
    border-radius: 0 0 2.5vw 0vw;
    border-bottom: solid 2px rgba(255, 255, 255, 0.25);
    border-right: solid 2px rgba(255, 255, 255, 0.25);
    transition: 0.5s ease-in-out;
    z-index: 10;
}

.menu-flex {
    display: flex;
    justify-content: left;
    flex-direction: column;
    align-items: left;
    margin: auto;
    width: auto;
}

.menu-text {
    font-family: "Nova Flat", sans-serif;
    text-align: left;
    color: var(--overallcolorbright);
    text-decoration: none;
    letter-spacing: 5px;
    transform: scale(0.8,1.7);
    font-size: clamp(0.7rem ,2vw, 1.6rem);
    padding: clamp(15px, 2vw, 30px) clamp(5px, 2vw, 75px) clamp(15px, 2vw, 100px) clamp(2.5px, 1vw, 15px);
}

#selected {
    color: var(--boldbigtextcolor);
}


.line {
    width: var(--overallwidth);
}

.contact {
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: auto;
    margin: auto;
    width: 100%;
    padding: clamp(10px, 5vw, 40px);
    background-color: rgb(0, 0, 0);
    border-top: solid 2px rgba(255, 255, 255, 0.25);
}

.call {
    width: 100%;
}

.contact > p {
    display: inline;
    margin: 2px;
    text-align: center;
    width: 100%;
    font-size: var(--defaulttext);
}

.footer {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 7.5px;
    background-color: var(--overallcolor);
}

.footer > p {
    margin: auto;
    text-align: center;
    font-size: var(--defaulttext);
    width: var(--overallwidth);
}

/*TEMPLATE HOVER*/

a:hover {
    text-decoration: underline;
}

/*GLOBAL*/

.text-banner-fluid {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 auto;
    /*NEW RESPONSIVE*/
    width: auto;
    row-gap: clamp(.1vw, 1vw, 1vw);
    padding: clamp(1.2px, .5vw, 5.5px);
}

.text-banner {
    box-sizing: border-box;
    font-family: "Nova Flat", sans-serif;
    color: var(--boldbigtextcolor);
    font-weight: 100;
    transform: scale(1,2);
    /*NEW RESPONSIVE*/
    font-size: clamp(0.7rem, 4vw, 1.6rem);
}

#sprocket {
    height: auto;
    width: clamp(20px, 2.5vw, 50px);
    filter:  saturate(100%) brightness(80%);
}

#pointer {
    cursor: pointer;
}

/*HOME PAGE*/

.work {
    position: relative;
    margin: 0 auto clamp(50px, 5vw, 100px) auto;
    padding: clamp(25px, 2.5vw, 50px) 0;
    z-index: 3;
    box-sizing: border-box;
    background-color: var(--darkcolor);
    overflow: hidden;
    width: var(--postercontainerwidth);
    border: solid 2px rgba(255, 255, 255, 0.25);
    border-radius: 2.5vw;
    box-shadow: 0px 0px clamp(50px, 5vw, 100px) rgba(130, 25, 21, 0.5);
}

#workexpand {
    height: 50vh;
}

.flexposters {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.postercontainer {
    position: relative; 
    overflow: hidden;
    margin: clamp(5px, 1vw, 12px);
    transition: 0.25s ease-in-out;
    cursor: pointer;
}

.posters {
    border-radius: .5vw;
    width: clamp(72.5px ,10vw, 140px);
    height: clamp(108.75px , 15vw, 200px);
}

#blur {
    filter: saturate(0%) blur(0.5px);
}

.content > a {
    margin: 5% auto;
    line-height: 1em ;
    color: var(--boldbigtextcolor);
    text-decoration: none;
}

.content {
    position: absolute;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    visibility: hidden;
    overflow: hidden;
    bottom: 20%;
    left: -150%;
    width: 100%;
    height: auto;
    text-align: center;
    background-color: var(--overallcolor);
    box-shadow: 0px 10px 30px 0px rgb(0, 0, 0);
    transition: 0.5s ease-in-out;
    z-index: 8;
    font-size: var(--defaulttext);
}

.more {
    position: relative;
    z-index: 9;
    width: auto;
}

.morebutton {
    position: absolute;
    left: calc(50% - calc(clamp(45px, 6vw, 90px) / 2));
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
    margin: 0 auto;
    width: clamp(45px, 6vw, 90px);
    padding: clamp(5px, 1vw, 25px) 0;
    transform: scale(0.75) translateY(-50%);
    border: solid 2px rgba(255, 255, 255, 0.25);
    border-radius: 1.5vw;
    background-color: rgba(0, 0, 0, 1);
    opacity: 0.25;
    transition: 0.25s ease-in-out;
}

.reelbutton {
    position: absolute;
    left: calc(50% - calc(clamp(45px, 6vw, 90px) / 2));
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
    margin: 0 auto;
    width: clamp(45px, 6vw, 90px);
    padding: 0;
    transform: translateY(-10%);
    border: solid 2px rgba(255, 255, 255, 0.25);
    border-radius: clamp(1px, 2.5vw, 20px);
    background-color: rgba(0, 0, 0, 1);
    opacity: 1;
    transition: 0.25s ease-in-out;
}

.expandbutton {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
    margin: 0 auto;
    width: clamp(200px, 25vw, 500px);
    padding: clamp(5px, 1vw, 10px) 0;
    transform: translateY(clamp(20px, 5vw, 40px));
    border: solid 2px rgba(255, 255, 255, 0.25);
    border-radius: 1.5vw;
    background-color: rgba(0, 0, 0, 1);
}

/*HOME HOVERS*/

.content > a:hover {
    color:rgb(255, 255, 255);
    font-weight: 500;
}

.menu-button:hover #hamAnim {
    filter:  saturate(100%) brightness(80%);
}

.expandbutton:hover #hamAnim2 {
    filter:  saturate(100%) brightness(80%);
}

.expandbutton:hover a {
    text-decoration: none;
}

.menu-button:hover .menu-buttonText {
    color: var(--overallcolorbright);
    font-weight: bolder;
    text-decoration: none;
}

.morebutton:hover .menu-buttonText, .morebutton:hover a {
    color: var(--overallcolorbright);
    font-weight: bolder;
    text-decoration: none;
}

.reelbutton:hover .reel-buttonText {
    color:  var(--overallcolorbright);
    font-weight: bolder;
    text-decoration: none;
}

.expandbutton:hover .menu-buttonText, .expandbutton:hover a {
    color: var(--overallcolorbright);
    font-weight: bolder;
    text-decoration: none;
}

.morebutton:hover {
    transform: scale(0.75) translateY(calc(-50% + 10px));
}

.reelbutton:hover {
    transform: translateY(calc(-10% + 5px));
}

.menu-text:hover {
    color: var(--boldbigtextcolor);
    font-weight: normal;
    text-decoration: none;
}

#selected:hover {
    color: var(--boldbigtextcolor);
    font-weight: normal;
}

.postercontainer:hover > .content { 
    visibility:visible;
    left: 0px;
}

.postercontainer:hover {
    transform: scale(110%);
}

/*ABOUT PAGE*/

.padding {
    width: 100%;
    height: clamp(50px, 10vw, 100px);
}

.producerswrapper {
    box-sizing: border-box;
    margin: clamp(50px, 5vw, 100px) auto clamp(50px, 5vw, 100px) auto;
    border-top: solid 2px rgba(255, 255, 255, 0.25);
    border-bottom: solid 2px rgba(255, 255, 255, 0.25);
    box-shadow: 0px 0px clamp(50px, 5vw, 100px) rgba(130, 25, 21, 0.5);
    padding: clamp(25px, 3vw, 65px) 8vw;
    width: 100%;
    transform: translateY(clamp(-60px));
    background: rgb(0, 0, 0);
}

.contactbannerwrapper {
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
    margin: 0 auto;
    width: clamp(200px, 25vw, 500px);
    padding: clamp(5px, 1vw, 10px) 0;
    border: solid 2px rgba(255, 255, 255, 0.25);
    border-radius: 1.5vw;
    background-color: rgba(0, 0, 0, 1);
    z-index: 5;
}

.producers, .contactbanner {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    background-image: linear-gradient(90deg, rgb(197, 197, 197), rgb(194, 116, 116), rgb(197, 196, 196));
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.producers  p {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: clamp(1rem ,2.3vw, 2rem);;
    font-weight: bold;
}

.contactbanner  p {
    box-sizing: border-box;
    padding: 0;
    margin: auto;
    text-align: center;
    font-size: clamp(1rem ,2.3vw, 2rem);;
    font-weight: bold;
}

.factoryname {
    color: var(--overallcolor);
    text-align: center;
    font-weight: bolder;
    font-size: clamp(1rem ,2.3vw, 2rem);
    margin: auto auto clamp(15px, 2.55vw, 25px) auto;
}

.BIG::first-letter {
    color: var(--overallcolor);
    font-size: clamp(2rem ,2.3vw, 4rem);;
    font-weight: bold;
}

.BIGE::first-letter {
    color: var(--overallcolor);
    font-weight: bold;
    font-size: var(--heavytext);
}

.jobs {
    box-sizing: border-box;
    margin: clamp(50px, 5vw, 100px ) auto;
    border: solid 2px rgba(255, 255, 255, 0.25);
    border-radius: 2.5vw;
    box-shadow: 0px 0px clamp(50px, 5vw, 100px) rgba(130, 25, 21, 0.5);
    padding: 4vw;
    width: 80vw;
    background-color: rgb(0, 0, 0);
}

.jobs p {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    text-align: left;
    font-size: var(--defaulttext);
}

.factorynamejobs {
    color: var(--overallcolorbright);
    text-align: center;
    font-weight: bolder;
    font-size: clamp(1rem ,2.3vw, 2rem);
    margin: auto auto clamp(15px, 2.55vw, 25px) auto;
}

#stronglinks {
    color: var(--overallcolorbright);
    font-weight: bolder;
}

.BIGjobs::first-letter {
    color: var(--overallcolor);
    font-weight: bold;
    font-size: var(--heavytext);
}

.image-l {
    box-sizing: border-box;
    float: left;
    height: auto;
    width: clamp(100px , 20vw, 200px);
    margin: 0 clamp(5.5px, 2vw, 23px);
}

.image-r {
    box-sizing: border-box;
    float: right;
    height: auto;
    border-radius: 15%;
    width: clamp(100px , 20vw, 235px);
    margin: 0 clamp(5.5px, 2vw, 23px);
}

.image-j {
    box-sizing: border-box;
    float: right;
    height: auto;
    width: clamp(100px , 20vw, 250px);
    margin: 0 clamp(5.5px, 2vw, 23px);
}

.employeegroups {
    box-sizing: border-box;
    display: flex;
    justify-content: space-evenly;
    align-items: top;
    flex-wrap: wrap; 
}

.employee-container {
    box-sizing: border-box;
    display: flex;
    justify-content: space-evenly;
    align-items: top;
    flex-wrap: wrap;
    width: var(--employeeoverallwidth);
    row-gap: clamp(10px,4vw,40px);
    column-gap: clamp(10px,4vw,40px);
    margin: 0 auto clamp(11px, 4vw, 46px) auto;
    padding: clamp(25px, 2.5vw, 50px) 0;
    background-color: rgb(0, 0, 0);
    border: solid 2px rgba(255, 255, 255, 0.25);
    border-radius: 2.5vw;
    box-shadow: 0px 0px clamp(50px, 5vw, 100px) rgba(130, 25, 21, 0.5);
}

.employee {
    border: 2px solid rgba(130,24,21,0);
    border-radius: 15%;
    width: clamp(150px, 20vw, 200px);
    padding: 5px 5px clamp(5.5px, 2vw, 23px) 5px;
    margin: 0px clamp(5.5px, 1vw, 23px);
    transition: 0.25s ease-in-out;
}

.employee > a > p {
    font-size: var(--heavytext);
}

.employee p {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    font-size: var(--defaulttext);
}

.center-image {
    display: flex;
    justify-content: center;
}

.employee-images {
    height: auto;
    border-radius: 15%;
    width: clamp(150px, 20vw, 200px);
    filter: saturate(0%);
}

.hr-image {
    height: auto;
    border-radius: 15%;
    width: clamp(150px, 20vw, 200px)
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 11;
}

.reelmodal {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 11;
}

.modal-content {
    box-sizing: border-box;
    height: auto;
    margin: 0 auto;
    font-weight: 400;
    line-height: 1.5;
    color: var(--defaulttextcolor);
    text-align: left;
    background-clip: padding-box;
    background-color: var(--darkcolor);
    border: 2px solid var(--overallcolor);
    width: var(--modaloverallwidth);
    padding: clamp(5.5px, 2vw, 23px);
    font-size: var(--defaulttext);
    border-radius: clamp(1rem, 1vw, 2rem);
} 

.modal-title {
    display: flex;
    justify-content: center;
    align-items: top;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
}

.modal-title  p {
    box-sizing: border-box;
    text-align: center;
    padding: 0;
    margin: 0;
    font-style: normal;
    color: var(--boldbigtextcolor);
    width: 100%;
    font-size: var(--heavytext);
}

.modal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
}

.close {
    box-sizing: border-box;
    margin: 0;
    color: var(--boldbigtextcolor);
    background-color: var(--darkcolor);
    border: solid 2px var(--overallcolor);
    border-radius: 15%;
    cursor: pointer;
    padding: clamp(5.5px, 1vw, 11.5px);
    font-size: clamp(1rem ,2vw, 1.5rem);
}

.blurBG {
    filter: blur(30px);
}

/*EMPLOYEE PAGE HOVERS*/

.producers a:hover {
    text-decoration: none;
    color: var(--overallcolorbright);
}

.employee a:hover{
    text-decoration: none;
    color: var(--overallcolorbright);
}

.employee:hover {
    transform: scale(110%);
}

.employee:hover .employee-images {
    filter: saturate(50%);
}

#blur:hover {
    filter: saturate(50%) blur(0.5px)
}

.close:hover {
    background-color: var(--overallcolor);
}

/*REEL PAGE*/

#hidden-reels {
    display: none;
    flex-wrap: wrap;

}

.wrapper {
    height:100%;
    margin: clamp(35px, 2.55vw, 55px) auto clamp(35px, 2.55vw, 55px) auto;
    padding: clamp(10px, 2.5vw, 25px) clamp(10px, 2.5vw, 25px);
    width: clamp(350px, 45vw, 1500px);
    border: solid 2px rgba(255, 255, 255, 0.25);
    border-radius: 2.5vw;
    box-shadow: 0px 0px clamp(50px, 5vw, 100px) rgba(130, 25, 21, 0.5);
    background-color: rgb(0, 0, 0);
}

.wrapperreel {
    height:auto;
    margin: clamp(20px, 2.55vw, 25px) auto clamp(20px, 2.55vw, 25px) auto;
    padding: clamp(10px, 2.5vw, 25px) clamp(10px, 2.5vw, 25px);
    width: clamp(350px, 45vw, 1500px);
    border: solid 2px rgba(255, 255, 255, 0.25);
    border-radius: 2.5vw;
    box-shadow: 0px 0px clamp(50px, 5vw, 100px) rgb(0, 0, 0);
    background-color: rgb(0, 0, 0);
}

.reelcover {
    width: 100%;
    height: auto;
}

.playbutton {
    position:relative;
    width: 0;
	height: 0;
    border-top: 2.5vw solid transparent;
	border-left: 5vw solid rgba(255, 255, 255, 0.5);
	border-bottom: 2.5vw solid transparent;
    transition: 0.25s ease-in-out;
}

.playborder {
    position:absolute;
    /*top: 44%;*/
    bottom: 0%;
    /*left: 45.25%;*/
    width: 4vw;
    height: 4vw;
    padding: .5vw 2.5vw 1.5vw 2vw;
    border: solid .5vw rgba(255, 255, 255, 0.5);
    border-radius: 1.5vw;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0px 0px 1vw var(--overallcolor);
    transition: 0.25s ease-in-out;
    transform: scale(0.5);
}

.wrappermodalreel {
    height:auto;
    margin: clamp(20px, 2.55vw, 25px) auto clamp(20px, 2.55vw, 25px) auto;
    padding: clamp(10px, 2.5vw, 25px) clamp(10px, 2.5vw, 25px);
    width: clamp(350px, 80vw, 1900px);
    border: solid 2px rgba(255, 255, 255, 0.25);
    border-radius: 2.5vw;
    box-shadow: 0px 0px clamp(50px, 5vw, 100px) rgb(0, 0, 0);
    background-color: rgb(0, 0, 0);
}

.wrapperbg {
    position: relative;
    margin: clamp(35px, 2.55vw, 55px) auto clamp(35px, 2.55vw, 55px) auto;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--darkcolor);
    width: 100%;
    border-top: solid 2px rgb(100, 100, 100);
    border-bottom: solid 2px rgb(100, 100, 100);
    box-shadow: 0px 0px clamp(50px, 5vw, 100px) rgba(130, 25, 21, 0.5), inset 0px 0px clamp(25px, 5vw, 100px) rgb(0, 0, 0);
    background-image: url('../images/posters/BgPosters_web_small_blur.jpg');
    background-size: cover;
}

.h_iframe {
    position:relative;
}

.h_iframe .ratio {
    display:block;
    width: 100%;
    height: auto;
    visibility: hidden;
}

.h_iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

#squeeze-contact {
    margin: auto;
    width: var(--overallwidth);
    border: solid 2px rgba(255, 255, 255, 0.25);
    border-radius: 2.5vw;
    box-shadow: 0px 0px clamp(50px, 5vw, 100px) rgba(130, 25, 21, 0.5);
    background-color: rgb(0, 0, 0);
}

.projects {
    box-sizing: border-box;
    margin: auto;
    width: var(--overallwidth);
}

.projects h2 {
    text-align: center;
    color: var(--boldbigtextcolor);
    font-size: var(--defaulttext);
}

.projects p {
    text-align: center;
    font-size: var(--defaulttext);
}

.project-list {
    display: flex;
    justify-content: center;
    align-items: top;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto clamp(50px, 5vw, 100px) auto;
    padding: clamp(25px, 2.5vw, 50px) 25px;
    background-color: rgb(0, 0, 0);
    border: solid 2px rgba(255, 255, 255, 0.25);
    border-radius: 2.5vw;
    box-shadow: 0px 0px clamp(50px, 5vw, 100px) rgba(130, 25, 21, 0.5);
}

.project-list h2{
    width: 100%;
}
.project-list p {
    width: 33.3333%;
}

/*REEL HOVERS*/

.makered:hover {
    color: var(--overallcolor);
}

.playborder:hover .playbutton{
    border-left: 5vw solid rgba(255, 255, 255, 1);
}

.playborder:hover {
    border: solid .5vw var(--overallcolor);
    transform: scale(0.6);
}

/*CONTACTS PAGE*/

.contactflex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;

}

#and {
    width: 100%;
    text-align: center;
}

.map-info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin:  clamp(5px, 2vw, 15px) auto clamp(50px, 5vw, 100px) auto;
    width: clamp(300px, 60vw, 600px);
    border: solid 2px rgba(255, 255, 255, 0.25);
    border-radius: 2.5vw;
    box-shadow: 0px 0px clamp(50px, 5vw, 100px) rgba(130, 25, 21, 0.5);
    padding: clamp(25px, 2.5vw, 50px);
    background-color: rgb(0, 0, 0);
}

.map-info2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin:  clamp(5px, 2vw, 15px) auto clamp(50px, 5vw, 100px) auto;
    width: clamp(300px, 60vw, 600px);
    border: solid 2px rgba(255, 255, 255, 0.25);
    border-radius: 2.5vw;
    box-shadow: 0px 0px clamp(50px, 5vw, 100px) rgba(130, 25, 21, 0.5);
    padding: clamp(25px, 2.5vw, 50px);
    background-color: rgb(0, 0, 0);
}

.map-info > h3, .map-info2 > h3 {
    font-weight: 400;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    margin-top: 0;
    text-align: center;
    font-size: var(--defaulttext);
}

.map-info > h2, .map-info2 > h2 {
    color: var(--boldbigtextcolor);
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 0;
    text-align: center;
    width: 100%;
    font-size: var(--heavytext);
}

.map-info > p, .map-info2 > p {
    width: 100%;
    text-align: center;
    margin-top: 0;
    font-size: var(--defaulttext);
}

.google-container {
    box-sizing: border-box;
    width: 100%;
    height: var(--googleheight);
    margin: clamp(5.5px, 1vw, 11.5px) 0 clamp(20px, 2vw, 25px) 0;
    padding: 0 0 clamp(2.8px, 2vw, 23px) 0;
}

.google {
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: auto;
    height: 100%;
    width: var(--googlewidth);
}

.map-text {
    text-align:left;
    font-size: var(--defaulttext);
}