*, *::before, *::after { 
    box-sizing: border-box; 
}

html {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    line-height: 1.6;
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
    min-height: 100dvh; 
    margin: 0;
    padding: 0;
}
h1,h2,h3,h4,h5,h6 {
    color: rgb(86, 65, 95);
    text-wrap: balance;
    text-align: center;
    font-weight: 600;
}
h1 {
    float: left;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0;
    display: flex;
    flex-direction: column;
    
}
h2 {font-size: 1.6rem;}
h3 {font-size: 1.4rem;}
h4 {font-size: 1.2rem;}
h5 {font-size: 1.1rem;}
h6 {font-size: 1rem;}
a {
    line-height: 1.8;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: underline;
    word-wrap: break-word;
}

a img {border: 0;}

p {word-wrap: break-word;}

p a {
    font-size: 1rem;
    font-weight: 600;
    word-wrap: break-word;
}

ul {margin: 0;}

li {list-style: none;}

li a {
word-break: break-all;}

p, li, figcaption { max-width: 75ch; text-wrap: pretty;}

a:link {color: rgb(0,133,123);}
a:visited {color: rgb(0,133,123);}
a:hover {color: rgb(222,113,15);}
a:focus {color: rgb(222,113,15);}
a:active {color: rgb(222,113,15);}

.center {text-align: center;}

/* ------ HEADER ------ */
header {
    float: left;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100px;
    padding: .5em 0;
}
.logo {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    justify-content: center;
}
.logo a {
    display: flex;
    width: 40%;
    justify-content: center;
    align-items: center;
}
.logo_img {
    max-width: 220px;
    height: auto;
}
.title {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    justify-content: center;
    padding: 0 0 0 .3rem;
}

.logo h2 {
    font-size: 1rem;
    color: rgb(255, 255, 255);
    font-weight: 400;
    margin: 0;
    padding: 0;
}

nav {
    float: left;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
nav ul {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around;
    width: 100%;
    margin: 0;
    padding: .3em 0 0;
}
nav li { 
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    font-size: 1.25rem;
}
nav li a {
    word-break: unset;
    transition: ease-in .4s;
    border-radius: 5%;
}
.login a {
    border-radius: 25px;
}
nav a {
    width: 100%;
    padding: .8em 1em;
}
nav a:link {
    color: rgb(70, 36, 74);
}
nav a:visited {
    color: rgb(70, 36, 74);
}
nav a:hover {
    color: rgb(70, 36, 74);
    background-color: rgb(81, 187, 176);
}
nav a:focus {
    color: rgb(70, 36, 74);
    background-color: rgb(81, 187, 176);
}
nav a:active {
    color: rgb(227, 242, 244);
    background-color: rgb(81, 187, 176);
}
nav li .active {
    color: rgb(227, 242, 244);
    background-color: rgb(70, 36, 74);
}
.login {
    color: rgb(70, 36, 74);
    background-color: rgb(3, 225, 215);
    border-radius: 25px;
}

.bkg-lg {
background: rgb(90,99,116);
background: linear-gradient(90deg, rgba(90,99,116,1) 40%, rgba(249,249,249,1) 100%);
padding: .25rem;
border-radius: 12.5px;
}
/* ------ MAIN ------ */
main {
    min-height: calc( 100vh - 412px);
    display: flex;
    flex-direction: column;
    width: 100%;
    float: left;
}

.row {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .8rem 1rem;
    margin: 0;
}
.row_inner {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1rem;
    margin-top: 1rem;
}

.bg_img {
    background: url(/img/jorvikmonitor_watermark.svg);
}
.bg_img_lrg {
    background: url(/img/jorvikmonitor_watermark_waves.svg) 100% no-repeat;
}
.bg_col_white {
    background-color: rgb(255, 255, 255);
}
.bg_col_lightgrey {
    background-color: rgb(243, 243, 243);
}
.bg_col_lightmint {
    background-color: rgb(224, 255, 251);
}
.bg_col_midmint {
    background-color: rgb(170, 239, 231);
}
.bg_col_mint {
    background-color: rgb(81, 187, 176);
}
.bg_col_lightpurple {
    background-color: rgb(86, 65, 95);
}
.bg_col_darkpurple {
    background-color: rgb(70, 36, 74);
}
.bg_col_darkgray {
    background-color:rgb(90, 99, 116);
}
.text_col_white {
    color: rgb(255,255,255);
}
.text_col_mint {
    color: rgb(81, 187, 176);
}
.text_col_darkpurple {
    color: rgb(70, 36, 74);
}

.blockquote {
    margin: 1rem;
}
.blockquote ul {
    padding: 0 1rem;
}

/* ---- other panels ----*/

.panel,
.panel_sm,
.panel_med,
.panel_equal,
.panel_lrg,
.panel_xlrg,
.panel_full,
.cookie_panel,
.site_panel {
    float: left;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin: 0;
    padding: .5rem 1rem;
}

.panel p,
.panel_sm p,
.panel_med p,
.panel_equal p,
.panel_lrg p,
.panel_xlrg p,
.panel_full p,
.cookie_panel p,
.site_panel p {
    margin: .375em 0;
}
.panel_text {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.large_img {
    height: auto;
    width: 100%;
    max-height: 300px;
    max-width: 450px;
    align-self: center;
}
.icon {max-height: 80px;}
hr {
    width: 60%;
    height: 1px;
    background-color: rgb(170, 239, 231);
    border: 0 none;
    margin: 1rem auto;
}
.about_order {order: -1;}

/* ----- Positioning ----- */
.f-direct_row {
    flex-direction: row;
    flex-wrap: wrap;
}
.justify-center {justify-content: center;}
.justify-around {justify-content: space-around;}
.align-center {align-items: center;}

/* ----- hi_light ----- */

.hi_light {
    font-size: 1.2rem;
    color: rgb(9, 109, 103);
    padding: 1rem;
    border: solid 1px;
    text-align: center;
    margin: 2rem 0 0 0;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2) inset;
}
.hi_light a {font-size: 1.2rem;}

/* ----- callout ----- */

.callout {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
}
.callout p {margin: .375em 0 0;}

/* ----- login button ----- */

.login_button {
    display: flex;
    justify-content: center;
    align-items: center;
}
.login_button a {
    width: 8rem;
    color: rgb(70, 36, 74);
    background-color: rgb(3, 225, 215);
    border-radius: 25px;
    padding: .8em 1em;
    text-align: center;
}
.login_button a:hover {
    color: rgb(70, 36, 74);
    background-color: rgb(81, 187, 176);
}

/* ----- coming soon list ----- */
.coming_soon li {list-style: url(/img/jorvikmonitor_flag.svg);}

/* ----- price panel ----- */
.price_panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 25px;
    padding: 0 0 .5rem;
    margin: 0;
    box-shadow: 0 1px 15px rgb(86, 65, 95);
}
.price_title {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    border-radius: 25px 25px 0 0;
}
.price_list {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
}
.price_list span {font-size: 2rem;}
.green {color: rgb(0, 100, 0);}
.red {color: rgb(255, 0, 0);}

/* ----- Form Fields ----- */

form {
float: left;
max-width: 600px; 
min-width: 100%;
margin: 0;
padding: 10px 20px;
background: rgb(248, 248, 255);
border: 2px solid rgb(101, 151, 174);
}

input,
textarea,
select {
cursor: pointer;
background: rgb(255,255,255);
font-family: inherit;
font-size: 16px;
height: auto;
outline: 0;
padding: 15px;
color: rgb(105, 108, 113);
border: 1px solid rgb(0, 128, 128);
box-shadow: 2px 2px 3px rgba(0,0,0,0.06) inset;
margin: 0 0 8px;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
}

input[type="checkbox"] {
  margin: 0 4px 8px 0;
}

select {
  padding: 6px;
  height: 32px;
  border-radius: 2px;
}

form button {
float: right;
cursor: pointer;
  padding: 1em;
  color: rgb(0, 128, 128);
  background-color: rgb(255, 255, 255);
  font-size: 1.1em;
  font-weight: 600;
  text-align: center;
  font-style: normal;
  border-radius: 5px;
  border: 1px solid rgb(0, 128, 128);
  box-shadow: 0 -2px 0 rgb(0, 128, 128) inset;
  margin-bottom: 10px;
}

label {
    font-size: 1.1em;
    font-weight: 600;
    color: rgb(67, 83, 99);
    display: block;
}

.error {
    color: rgb(220, 20, 60);
    font-size: 1.2em;
}

form button:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 128, 128);
}
/* ------ Footer ------ */

footer {
    float: left;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    color: rgb(37, 17, 41);
    margin: 1rem auto 0;
    background-color: rgb(170, 239, 231);
    padding: .5rem 0 0 0;
}

footer p,
footer h4,
footer h5 {
    color: rgb(0, 0, 0);
    text-align: left;
    margin: 0;
    padding: .3rem;
}
.foot a,
.jas_bar p a {
    color: rgb(37, 17, 41);
    text-decoration: underline;
    position: relative;
    font-weight: 600;
}
.jas_bar p a {
    color: rgb(255, 255, 255);
}
.foot a:before,
.jas_bar p a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: rgb(37, 17, 41);
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}
.jas_bar p a:before {
    background-color: rgb(255, 255, 255);
}
.foot a:hover:before,
.jas_bar p a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  background-color: rgb(37, 17, 41);
}
.jas_bar p a:hover:before {
    background-color: rgb(255, 255, 255);
}
.no_hover a:hover {
    text-decoration: none;
}
.foot {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 0 .5rem .5rem;
}
.address,
.social_link,
.foot_nav {
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.address {
    justify-content: space-between;
    text-align: center;
    order: 2;
}
.social_link {
    order: 1;
}
.foot_nav {
    order: 0;
}

.jas_bar {
    float: left;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 0 .5rem;
    background-color: rgb(65, 112, 129);
    justify-content: center;
    align-items: center;
}
.jas_bar p {
    color: rgb(255, 255, 255);
}
.jas_bar img {
    max-width: 140px;
    height: auto;
}
/*------------------ Media Queries -----------------------*/
  @media screen and (min-width: 320px) {
    html {
      font-size: calc(14px + 4 * ((100vw - 320px) / 680));
    }
  }
  @media screen and (min-width: 1000px) {
    html {
      font-size: 1.1rem;
    }
  }

@media only screen and (min-width: 33.75em) { /* 540px */
    
    .foot {
        flex-direction: row;
        flex-flow: wrap;
    }
    .social_link {
        order: 1;
        width: 50%;
        align-self: center;
        align-items: flex-end;
        padding-left: 1rem;
    }
    .address {
        order: 2;
        width: 100%;
    }
    .foot_nav {
        order: 0;
        width: 50%;
        align-self: center;
        align-items: flex-start;
        padding-right: 1rem;
    }
    .address p {
        text-align: center;
    }
}
@media only screen and (min-width: 48em) {

    header {
        flex-direction: row;
    }
    .logo {
        width: 60%;
        justify-content: flex-start;
        padding: 0 0 0 2rem
    }
    nav {
        width: 40%;
    }
    .row,
    .row_inner {
        flex-direction: row;
    }
    .panel_sm {
        width: 30%;
    }
    .panel_med {
        width: 40%;
    }
    .panel {
        width: 50%;
    }
    .panel_lrg {
        width: 60%;
    }
    .panel_xlrg {
        width: 70%;
    }
    .panel_full {
        width: 100%;
    }  
    .about_order {
        order: 0;
    }
}

@media only screen and (min-width: 50.5em) {
   
    .foot {
        flex-flow: nowrap;
    }
    .social_link {
        width: 30%;
        order: 2;
    }
    .address {
        width: 40%;
        order: 1;
        text-align: center;
    }
    .foot_nav {
        width: 30%;
        order: 0;
    }

}

@media only screen and (min-width: 64.5em) {

    .blockquote {
        margin: auto;
    }
    .blockquote ul {
        padding: auto;
    }
    header {
        flex-direction: row;
    }
    .logo {
        width: 45%;
    }
    nav {
        width: 55%;
    } 
}