* {
    font-family: 'Raleway', sans-serif;
    margin: 0;
    box-sizing: border-box;
    color: var(--main-colour);

    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */

    cursor: default;
}

:root {
    --grid-pad: 2.5vw;
    --main-colour: rgba(255, 255, 255, 0.95);
    --btn-text-colour: #000000;
    --hover-colour: rgba(255, 221, 77, 0.9);
    --stroke-width: 2px;
    --corner-size: 50px;
    --tag-height: 30px;
    --cam-detail-size: 20px;
    --min-height: 550px;
    --min-width: 950px;
}

.loading {
    position: absolute;
    background-color: var(--btn-text-colour);
    width: 100%;
    height: 100%;
    z-index: 10;

    transition: opacity 1s ease-out;
    opacity: 1;

    display: flex;
    justify-content: center;
    align-items: center;

    pointer-events: none;
    /*    transition: height 0.4s ease-out;*/
}

.loading.loaded {
    /*    height: 0%;*/
    opacity: 0;
}

.loader-graphics {
    transition: opacity 0.3s ease-out, transform 0.3s ease-in;
    color: white;
    text-align: center;
}

.loader-graphics.loaded {
    opacity: 0;
    transform: scale(1.3);
}


.bm-logo {
    width: 16vw;
    height: 16vw;
    padding: 5%;
}


@keyframes blur {
    from {
        filter: blur(0px);
        transform: scale(1);
    }

    to {
        filter: blur(20px);
        transform: scale(1.1);
    }
}

@keyframes hover {
    from {
        transform: translateY(-10px)
    }

    to {
        transform: translateY(10px)
    }
}

a {
    text-decoration: none;
    cursor: pointer;
    /*    transition: color 0.2s ease-in-out;*/
}

a:hover {
    /*    color: var(--hover-colour);*/
    /*    border-color: var(--hover-colour);*/
}


.animation-blur {
    animation: blur 0.5s 2 alternate ease-in-out;
}

#rawvideo {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: var(--min-height);
    min-width: var(--min-width);
    object-fit: cover;
    overflow: hidden;
    z-index: -100;

}

.videoPoster {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: var(--min-height);
    min-width: var(--min-width);
    object-fit: cover;
    overflow: hidden;
    z-index: -110;
}

.mainGrid {
    display: grid;
    height: 100%;
    width: 100%;

    min-height: var(--min-height);
    min-width: var(--min-width);

    grid-template-columns: var(--grid-pad) 1fr 2fr 1fr var(--grid-pad);
    grid-template-rows: var(--grid-pad) 1fr var(--grid-pad);

    position: absolute;
    overflow: hidden;
    
    transition: opacity 0.5s ease-in-out;

    /*    transition: height 0.5s ease-in-out, width 0.5s ease-in-out;*/
}


.mainGrid.hide {
 opacity: 0;
}


.logoType {
    font-size: 43px;

    text-transform: uppercase;
    font-weight: 900;
    line-height: 0.9em;

    display: inline-block;
}

.logoType::after {
    content: '•';
    position: absolute;
    margin-left: 5px;

    pointer-events: none;

    transform: scale(0);
    opacity: 0;
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.logoType.active::after {
    transform: scale(1.4);
    opacity: 1;
}


.bloc_TopLeft {
    grid-column-start: 2;
    grid-column-end: 3;

    grid-row-start: 2;
    grid-row-end: 3;
}

.topLine {

    width: 80px;
    margin-left: -10px;
    margin-top: 3px;
    position: absolute;

    display: inline-block;

    height: var(--stroke-width);
    background-color: var(--main-colour);
}



.casting-banner {
    margin: 15px 0px;
}

.casting-banner svg {
    fill: var(--main-colour);
    height: var(--tag-height);
}

.casting-banner::before {
    content: '';
    width: var(--grid-pad);
    height: var(--tag-height);
    background-color: var(--main-colour);
    position: absolute;
    margin-left: calc(-1 * var(--grid-pad));
    pointer-events: none;
}


.TL_line-down {
    background-color: var(--main-colour);
    height: 20px;
    width: var(--stroke-width);
}

.bloc_BottomLeft {
    grid-column-start: 2;
    grid-column-end: 3;

    grid-row-start: 2;
    grid-row-end: 3;

    align-self: end;
}

.discriptionTextBlock {
    padding: var(--grid-pad) 20px 0px var(--grid-pad);
    font-weight: 500;
    font-size: 13px;
    line-height: 2em;
    border-left: var(--stroke-width) solid var(--main-colour);
}

.discriptionTextBlock a {
    text-decoration: underline;
}

.moreInfo-info a {
    text-decoration: underline;
}

.corner-Bottom-Left {
    width: var(--corner-size);
    height: var(--grid-pad);
    border-left: var(--stroke-width) solid var(--main-colour);
    border-bottom: var(--stroke-width) solid var(--main-colour);
}

.corner-bottom-left {
    width: var(--corner-size);
    height: var(--corner-size);
    border-right: var(--stroke-width) solid var(--main-colour);
    border-bottom: var(--stroke-width) solid var(--main-colour);
    display: inline-block;
}

.bloc_BottomRight {
    grid-column-start: 2;
    grid-column-end: 5;

    grid-row-start: 2;
    grid-row-end: 3;

    align-self: end;
    justify-self: end;
}

.bloc-TopLeft {
    grid-column-start: 2;
    grid-column-end: 5;

    grid-row-start: 2;
    grid-row-end: 3;

    /*    align-self:end;*/
    justify-self: end;
}

.corner-top-left {
    width: var(--corner-size);
    height: var(--corner-size);
    border-right: var(--stroke-width) solid var(--main-colour);
    border-top: var(--stroke-width) solid var(--main-colour);
}

.timeCode {

    display: inline-block;
    font-family: 'Rubik', sans-serif;

    margin-right: var(--grid-pad);
    transform: translateY(3px);
    font-size: 14px;

    letter-spacing: 2px;

    opacity: 0.8;
}

.block-title {
    grid-column-start: 2;
    grid-column-end: 5;

    grid-row-start: 2;
    grid-row-end: 3;

    align-self: center;
    justify-self: center;

    font-size: 10.7vw;
    font-weight: 900;


    text-align: center;

    /*    transition: font-size 0.5s ease-in-out;*/
}

.block-title p {
    display: none;
}

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

    .block-title {
        font-size: 100px;
    }
}

.block-title strong {
    -webkit-text-stroke: var(--stroke-width) var(--main-colour);

    font-weight: 900;
    color: rgba(240, 248, 255, 0);
}

.cameraDetail {
    grid-column-start: 3;
    grid-column-end: 4;

    grid-row-start: 2;
    grid-row-end: 3;

    align-self: center;
    justify-self: center;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    height: 70vh;
    width: 120%;
    transition: height 1s ease-out, width 1s ease-out;
}

.cameraDetail.squeeze {
    height: 50vh;
    width: 100%;
}

.arrow-base {
    grid-column-start: 1;
    grid-column-end: 2;

    grid-row-start: 1;
    grid-row-end: 2;

    border-color: transparent var(--main-colour);
    border-style: solid;

    height: 0px;
    width: 0px;

    /*    mix-blend-mode: overlay;*/

    opacity: 0.5;

    /*    backdrop-filter: blur(20px);*/
}

.a1 {
    border-width: 0px 0px var(--cam-detail-size) var(--cam-detail-size);
}

.a2 {
    border-width: 0px var(--cam-detail-size) var(--cam-detail-size) 0px;
    justify-self: end;
}

.a3 {
    border-width: var(--cam-detail-size) 0px 0px var(--cam-detail-size);
    align-self: end;
}

.a4 {
    border-width: var(--cam-detail-size) var(--cam-detail-size) 0px 0px;
    justify-self: end;
    align-self: end;
}

.slogen-wrapper {
    grid-column-start: 5;
    grid-column-end: 5;

    grid-row-start: 2;
    grid-row-end: 3;

    align-self: center;
    justify-self: center;
}

.slogen-text {
    width: 100vh;
    transform: rotate(90deg);
    text-align: center;
    font-size: 12px;
    opacity: 0.3;
}


.signUp-btn {
    grid-column-start: 3;
    grid-column-end: 4;

    grid-row-start: 2;
    grid-row-end: 3;

    justify-self: center;
    align-self: end;

    text-decoration: none;

    /*    button option 1 ----*/

    background-color: var(--main-colour);
    color: var(--btn-text-colour);

    /*    ---------------*/


    /*    button option 2 ----*/

    /*
    color: var(--main-colour);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    border: solid calc(var(--stroke-width) *2) var(--main-colour);
*/

    /*    ---------------*/

    font-size: 25px;
    font-weight: 700;

    border-radius: 50px;

    text-align: center;
    width: 230px;

    padding: 10px 10px;
    margin: 7vh;

    cursor: pointer;

    animation: hover 2s alternate infinite ease-in-out;

    opacity: 1;
    transition: opacity 0.5s, width 0.3s ease-in-out;
}

.signUp-btn:hover {
    width: 260px;
}

@keyframes side2side {
    from {
        transform: translateX(-3px);
    }

    to {
        transform: translateX(3px);
    }
}

@keyframes side2side2 {
    from {
        transform: translateX(3px);
    }

    to {
        transform: translateX(-3px);
    }
}

/*
.signUp-btn::before {
    content: '>';

    position: absolute;
    margin-top: -3px;
    margin-left: -35px;
    font-size: 27px;

    animation: side2side 0.7s ease-in-out alternate infinite;
}
*/

/*
.signUp-btn::after {
    content: '<';

    position: absolute;
    margin-top: -3px;
    margin-left: 24px;
    font-size: 27px;

    animation: side2side2 0.7s ease-in-out alternate infinite;
}
*/

.signUp-btn.fadeOut {
    opacity: 0;
}




.moreInfo-content {
    display: none;
}



.iFrame-container {
    position: absolute;

    width: 100%;
    height: 100%;

    z-index: 90;

    overflow: hidden;

/*    background-color: var(--main-colour);*/
    
/*    background-color: rgba(208, 208, 208, 0.34);*/
    
/*
    backdrop-filter: blur(40px) saturate(130%);
    -webkit-backdrop-filter: blur(40px) saturate(130%);
*/
    
    transition: opacity 0.5s ease-in-out;
    
    opacity: 0;
    pointer-events: none;
}

.iFrame-container.active {
    
    opacity: 1;
    pointer-events: all;
}

/*
.iframe-bg{
    background-color: var(--main-colour);
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.7;
}
*/


.jotform {
    min-width: 100%;
    min-height: calc(100% + 55px);
    
/*    min-height: 100%;*/

    border: none;
    
/*    display: none;*/
}

h4 {
    font-size: 15px;
    margin-top: 10px;
    min-width: 100%;
}

.hide {
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
    pointer-events: none;
}