html, body { margin:0; padding:0; }
body { background-color:#111111; }

.container {
    background-image:url('../images/self-storage-page-bg.avif');
    background-position:center bottom;
    background-repeat:no-repeat;
    background-size:cover;
    min-height:100vh;
    width:100%;
    height:100%;
}

.container.absolute {
    position:absolute;
}

.topline {
    background-color:#de0000;
    padding:8px 0;
}

.topline p {
    color:#fff;
    font-family:"Bebas Neue", system-ui;
    text-align:center;
    font-size:40px;
    padding:0;
    margin:0;
}

.content {
    text-align:center;
    width:1080px;
    height:max-content;
    margin:auto;
    padding:60px 0;
}

.center {
    position:absolute !important;
    height:max-content !important;
    left:0; right:0;
    top:0; bottom:0;
    margin:auto !important;
}

h1 {
    color:#fff;
    font-family:"Bebas Neue",sans-serif;
    text-align:center;
    margin:0;
    padding:0;
    font-size:100px;
    line-height:88px;
    font-weight:normal;
}
h1 span { color:#de0000; font-style: italic; }

.content p {
    color:#dcdcdc;
    font-family: "Roboto", sans-serif !important;
    font-weight: 300;
    text-align:center;
    font-size:32px;
}

iframe {
    width:100%;
    height:calc(1080px / 16 * 9);
    display:block;
    margin:60px auto 60px auto
}

button.red {
    background-color:#de0000;
    color:#fff;
    text-shadow:0px 0px 10px #6b0000;
    font-family:"Bebas Neue",sans-serif;
    padding:8px 60px;
    font-size:58px;
    border:0;
    cursor:pointer;
    box-shadow: 0 0 20px -2px rgb(222 0 0 / 90%);
    animation:button 2s linear infinite;
}

@keyframes button {
    0% {
        transform:scale(1);
        box-shadow: 0 0 20px -2px rgb(222 0 0 / 90%);
    }
    50% {
        transform:scale(1.05);
        box-shadow: 0 0 50px -1px rgb(222 0 0 / 90%);
    }
    100% {
        transform:scale(1);
        box-shadow: 0 0 20px -2px rgb(222 0 0 / 90%);
    }
}

.shine-btn {
    position: relative;
    overflow: hidden;
}

.shine-btn:after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    top: 0;
    width: 70px;
    left: 0;
    background: rgba(255,255,255,.5);
    transform:translateX(-100px) skewX(-30deg);
    -webkit-transform:translateX(-100px) skewX(-30deg);
}

.shine-btn:hover:after {
    animation:shineBtn 0.5s ease-in-out;
}

@keyframes shineBtn {
  0% {
    transform:translateX(-100px) skewX(-30deg);
    -webkit-transform:translateX(-100px) skewX(-30deg);
  }
  100% {
    transform:translateX(600px) skewX(-30deg);
    -webkit-transform:translateX(600px) skewX(-30deg);
  }
}

@keyframes buttonShineLarge{0%{-webkit-transform:skewX(-20deg) translateX(0);transform:skewX(-20deg) translateX(0)}to{-webkit-transform:skewX(-20deg) translateX(2000px);transform:skewX(-20deg) translateX(2000px)}}

.topline {padding:8px 0;}
.topline p {font-size:22px;}

.content {width:740px;}

h1 { font-size:62px;line-height:56px; }

.content p {font-size:21px; }

iframe {
    height:calc(740px / 16 * 9);
    margin:40px auto 40px auto
}

button.red { padding:6px 58px; font-size:38px; }

@media (max-width:1400px) {
    .topline {padding:8px 0;}
    .topline p {font-size:20px;}

    .content {width:600px;}

    h1 { font-size:56px;line-height:48px; }

    .content p {font-size:18px; }

    iframe {
        height:calc(600px / 16 * 9);
        margin:40px auto 40px auto
    }

    button.red { padding:6px 60px; font-size:28px; }
}

@media (max-width:760px) {
    .topline { padding:12px; }
    .topline p {font-size:18px; }

    .content { width:80%; }

    h1 { font-size:36px; line-height:36px; }

    .content p {font-size:16px; line-height:22px; }

    iframe {
        height:calc(100vw / 16 * 9);
        margin:20px auto 20px auto
    }

    button.red { padding:12px; font-size:18px; text-align:center; width:100%; }
}

.shadow { display:none; position:absolute; z-index:9; top:0; left:0; bottom:0; right:0; background-color:rgba(0,0,0,.45); width:100%; height:100%;}

.form-fixed {
    display:none;
    background-color:#fff;
    padding:60px;
    position:fixed;
    margin: auto;
    top: 0;
    right: 0px;
    left: 0px;
    bottom: 0;
    width: 75%;
    max-width:600px;
    height: max-content;
    z-index:10;
}

.form-fixed-container {
    margin:30px;
}

.form-fixed h2 {
    margin:0; padding:0;
    margin-bottom:30px;
    font-family:"Bebas Neue", system-ui;
     text-align:center;
     font-size:40px;
     font-weight:normal;
}

.form-fixed input {
    width:100%;
    margin-bottom:14px;
    display:block;
    font-family: "Roboto", sans-serif;
    border:1px solid #333;
    color:#333;
    padding:9px;
    font-size:24px;
    box-sizing:border-box;
}

.form-fixed button {
    background-color:#de0000;
    color:#fff;
    text-shadow:0px 0px 10px #6b0000;
    font-family:"Bebas Neue",sans-serif;
    padding:8px 0;
    width:100%;
    font-size:30px;
    border:0;
    margin-bottom:40px;
    cursor:pointer;
 }

.form-fixed p {
    font-family: "Roboto", sans-serif;
    text-align:center;
    color:#333;
    font-size:16px;
    font-weight:normal;
}

.leadbox__close {
    z-index: 1;
    position: absolute;
    top: 1em;
    right: 1em;
    cursor: pointer;
    line-height: 0;
    border-radius: 50%;
    padding: 10px;
    background: #dde2eb;
    width: 20px;
    height: 20px;
    fill: #999999;
}

#warnings { font-size:20px; display:none; font-family: "Montserrat", sans-serif; color:#de2020; padding:10px 0 30px 0 }
#warnings img { width:22px; }

@media (max-width:760px) {
    .form-fixed { padding:40px; }
    .form-fixed-container { margin:10px; }
    .form-fixed h2 { margin-bottom:26px; font-size:31px; line-height:26px; }
    .form-fixed input { margin-bottom:12px; padding:8px; font-size:20px; }
    .form-fixed button { padding:8px 0; width:100%; font-size:24px; margin-bottom:20px; }
    .form-fixed p { font-size:15px; }
}

@media (max-width:400x) {
    .form-fixed { padding:30px; }
}