body {color:#ffffff;}

.bg-fullwidth {
    background:#fcfbff;
    background-image: url('images/bg-fullwidth.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    height: 100vh;
}

strong {font-weight:700}

.small {font-size: .7em}

.bg-frame {
    margin: 0px;
    padding: 0px;
    overflow-y: scroll !important;
    background-image: url("/images/textured_background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: repeat-y;
    /*border-radius: 19px 20px 20px 20px;*/
}

.belway-blue-bg {background-color:#021433}
a .active {color:#ff0000}

#hotlinks a {color:#ffffff; text-decoration:none}
#hotlinks a:hover {color:#dddddd; text-decoration:underline dotted}

.sticky-top {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0;
  z-index: 1020;
}

.ios-sticky-shim {
  position: fixed;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* iPhone frame container */
.iphone {
    width: min(98vw, 430px);    /* Responsive width limit */
    aspect-ratio: 9 / 16;       /* Keeps correct device shape */
    position: relative;
    margin: 0 auto;
}

/* The <iframe> sits behind */
.iphone .screen {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;     /* BELOW the frame */
}

/* iPhone frame drawn with a pseudo element on top */
.iphone::after {
    content: "";
    position: absolute;
    inset: 0;           /* stretch to all sides */
    
    /* render frame image */
    border: 13px solid transparent;
    border-image-source: url('images/phone-outline.png');
    border-image-slice: 200 125 155 120 fill;
    border-image-width: 10%;
    border-image-repeat: stretch;

    pointer-events: none; /* clicks go through to iframe */
    z-index: 2;     /* ABOVE iframe */
}

/* This is the INNER bounds where the iframe should live */
.screen-area {
    position: absolute;
    /*
        These percentages control how far INSIDE the phone the screen should start. They scale responsively.
        Adjust these until the iframe perfectly fits your outline.
    */
    inset: 1% 3.5% 1% 3.5%; /* top right bottom left */
    z-index: 1;
    overflow: hidden;  keep iframe inside
}

/* The iframe itself */
.screen-area .screen {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.vimeo-player {padding:177.78% 0 0 0; position:relative}

@media screen and (max-width: 720px) {
    .bg-fullwidth {
        background-image: none;
    }
}

@media screen and (min-width: 1450px) {
    #phoneframe {
        margin-top: calc((100vh - 770px) / 2);
    }
}

@media screen and (max-width: 1450px) {
    .iphone {
    width: min(98vw, 370px);    /* Responsive width limit */
    }
}