:root {
  --bs-primary: #0f2151;
  /* Set the primary RGB color (required for background utilities) */
  --bs-primary-rgb: 15, 33, 81;
}

body {color:#000000;}

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

.menu-bg{background-color: #ebe7e1}

.nav-link{color:#0f2151; font-weight:700; font-size:1.1em;}

strong {font-weight:700}

.small {font-size: .7em}

.bg-frame {
    margin: 0px;
    padding: 0px;
    background-color: #ebe7e1;
    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 24px;
}

.blue-bg {background-color:#0f2151}
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;
}

/* stop any horizontal overflow in the phone screen */
#pagebody {
  overflow-x: hidden;
  overscroll-behavior-x: none; /* helps modern iOS */
  touch-action: pan-y;         /* helps other browsers */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* common offenders inside: media + iframes */
#pagebody img,
#pagebody iframe,
#pagebody video,
#pagebody canvas {
  max-width: 100%;
}

/* Bootstrap .container adds left/right padding; this can contribute to tiny overflows */
#pagebody > .container {
  padding-left: 0;
  padding-right: 0;
}

.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 */
    }
}