:root {
    /* Primary */
    --sky: rgb(64,176,225); /* #40B0E1 */
    --ocean: rgb(41,122,173); /* #297AAD */
    --navy: rgb(26,79,112); /* #1A4F70 */
    --space: rgb(14,46,65); /* #0E2E41 */
    
    /* Secondary */
    --cloud: rgb(247,248,249); /* #F7F8F9 */
    --smoke: rgb(199,200,201); /* #C7C8C9 */
    --shadow: rgb(114,114,114); /* #727272 */
    --charcoal: rgb(51,51,51); /* #333 */
    
    /* Other */
    --fathom-green: #11966e;
    --fathom-orange: #ffb24d;
    --fathom-red: #ff7070;
}
html, button { font-family: "europa", "helvetica", sans-serif; /*scroll-behavior: smooth;*/ }
h1, h2, h3 { font-family: "futura-pt-bold", sans-serif; text-transform: uppercase; }

body { background-color: var(--sky); margin:0 }

/* Nav Bar */
#navbar {
    display: flex;
    text-align: center;
    margin: auto;
    height:100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0 2px 100px 10px rgba(255,255,255,0.5), 0 2px 4px 1px rgba(0,0,0,0.5);
    z-index: 100;
    font-family: "europa", "helvetica", sans-serif;
    user-select: none
}
.navcontent {
    padding: 0;
    margin: 0 0 0 18px;
    width: 100%;
    /* float: left; */
}
.navcontent li {
    display: table-cell;
    vertical-align: middle;
    padding: 34px 15px 34px 15px;
    margin: auto;
}	
.navcontent li img {
    width: 250px;
    height: auto;
    max-width: 285px;
}
.navcontent a, .navcontent #login {
    color: #333;
    text-decoration: none;
    font-size:1.5em;
    float: left;
} 
.navcontent a:hover, .navcontent #login:hover {
    color: var(--sky) !important;
    cursor: pointer;
    text-decoration: none;
}
.navcontent.mobile { display: none; }

/*.superscript { color: #082333; font-size: 14px; font-family: "helvetica", "arial", sans-serif; font-weight: normal; position: relative; float:right; top:5px; left:0px; }*/

#header-logo-fathomreads { color:#333 !important }
#header-logo-fathomreads #brandlogo { display:flex; justify-content: center; align-items: center; flex-wrap: wrap; font-size:12px; max-width:250px }
#header-logo-fathomreads #brandlogo img:not(:first-child) { width:auto; height:20px }

@media (max-width: 380px) {
    #header-logo-fathomreads img { content:url('images/fathom-circle-512.png'); width:40px }
    #header-logo-fathomreads #brandlogo div { display:none }
    #header-logo-fathomreads #brandlogo img:not(:first-child) { display:none }
}

/* Buttons */
a.button, button {
    text-decoration: none;
    border-radius: 10px;
    border: 2px solid var(--sky);
    color: var(--sky);
    padding: 11px 20px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    font-size:24px;
    font-weight: 400;
    font-family: 'europa', 'helvetica', 'arial', sans-serif;
    transition: background-color 0.3s ease-out, color 0.3s ease-out;
    line-height: 1;
    background:none;
}
a.button:hover, button:hover {
    background-color: var(--sky);
    color: #229ED5;
    transition: 0.3s ease;
    text-decoration: none;
}

.fr.full {float: right;width: 470px;margin: auto;margin-right:18px;text-align: right; display:flex; align-items:center; justify-content:flex-end }
.fr.mobile {float: right;width:50px;padding:10px;margin: auto;margin-right:18px;/* margin-top: 6px; */font-size: 1.8em;}

.no-click, .disable-click { pointer-events:none !important }


/* Nav Menu (mobile) */
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-y: scroll;
    transition: 0.5s ease;
}
.overlay-content {
    margin-top: 105px;
    position: relative;
    width: 100%;
    text-align: center;
}
.overlay a {
    padding: 20px;
    text-decoration: none;
    font-size: 2em;
    color: var(--charcoal);
    display: block;
    transition: color 0.3s ease-out;
}
.overlay a:hover, .overlay a:focus {
    color: var(--sky);
}
.linebreak { width:100%; border-bottom: 1px solid #888; }


/* Text Section */
@keyframes slidein {
/*
    from { margin-top: 150px; }
    to   { margin-top: 100px; }
*/
    from { padding-top: 50px; }
    to   { padding-top: 0px; }
}
.contain, .container {
    padding-top:100px;
    margin:0;
    width:100%;
}
.textsection {
    height:30%;
    margin: 100px;
    padding-bottom:200px;
    font-size: calc((4.7vw + 4.7vh)/2);
    text-shadow: 0 0 10px var(--charcoal);
    text-align: center;
    color: #fff; 
    border-radius: 10px;
    animation: slidein 1.5s;
    box-sizing: unset;
}
.textsection#top { background: url('images/fathomreads_top_img.jpg') no-repeat; background-size: cover; background-position-x: 50%; background-position-y: 50%;}
.textsection#familyplan { background: url('images/familyreading.jpg') no-repeat; background-size: cover; background-position-x: 50%; background-position-y: 50%; }
.textsection#classroomplan { background: url('images/classroomreading.png') no-repeat; background-size: cover; background-position-x: 50%; background-position-y: 50%; }
.textsection#schoolplan { background: url('images/shutterstock_educator.png') no-repeat; background-size: cover; background-position-x: 50%; background-position-y: 20%; }
.textsection#classics { background: url('images/fathomclassics_top_img.jpg') no-repeat; background-size: cover; }


/* Box Section */
.boxsection {
    margin: 100px 100px 0px 100px;
    background-color: #fff;
    text-align: center;
    color: var(--space);
    border-radius: 10px;
}
.boxsection h1 { font-size:2.5em; padding: 20px 0 20px 0; }
.boxsection h2 { font-size:2.2em; margin-bottom: 0; }
.boxsection h3 { font-size:2em; } 
.boxsection h4 { font-size:1.8em; } 
.boxsection p { font-size: 1.5em; }
.boxsection ul { font-size: 1.5em; }

.nobg{
    background:none !important;
    color: #fff !important;
    margin-top: 0px;
}

.sectioncontent { padding: 100px 50px 100px 50px; }
.nobg .sectioncontent { padding: 100px 50px 0px 50px }
.sectioncontent img { width:40%; }


#features .sectioncontent p, #assessment .sectioncontent p {
    text-align: left;
    line-height: 1.5em;
}




/* Content */
#content .sectioncontent #row1 { display: inline-block; padding-bottom: 50px;}
#content .sectioncontent #row1 #column1 { position: relative; display: inline-block; float: left; width: 49%; }
#content .sectioncontent #row1 #column2 { position: sticky; top:200px; display: inline-block; float: right; width: 49%; }
#content .sectioncontent #row2 { display: inline-block; padding-bottom: 50px;}
#content .sectioncontent #row2 #column1 { position: sticky; top:200px; display: inline-block; float: left; width: 49%; }
#content .sectioncontent #row2 #column2 { position: relative; display: inline-block; float: right; width: 49%; }
#content .sectioncontent #row3 { display: inline-block; padding-bottom: 50px;}
#content .sectioncontent #row3 #column1 { position: relative; display: inline-block; float: left; width: 49%; }
#content .sectioncontent #row3 #column2 { position: sticky; top:200px; display: inline-block; float: right; width: 49%; }
#content .sectioncontent #row4 { display:flex; align-items:center; }

#content table { height:auto; width: 100%; }
#content table img { width:100%; height: auto; box-shadow: 4px -4px 10px rgba(0,0,0,0.2); border-radius: 10px 10px 10px 10px; }
#content h4 { margin-top: 0; }
#content p, #content ul { text-align: left; line-height: 1.5em; }
#content ul li { padding-bottom: 10px; }

#content td { position: relative }
#content td .img-overlay { transition: opacity 0.3s ease;  position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; background: #000; border-radius: 10px; cursor: unset }
#content td .img-overlay:hover { opacity: 0.7; cursor: default}
#content td .img-overlay .text { color: #fff; font-size: 1.5vw; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; line-height: 1.25em; }
#content #row2 #column1 img, #content #row3 #column2 img { box-shadow: 4px -4px 10px rgba(0,0,0,0.2); }

#content a { text-decoration: none; color: var(--sky); }
#content a:hover { text-decoration: underline; }

#content .game-button { width: 50%; height: auto; margin: 4vw; box-sizing: border-box; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px; box-shadow: 4px -4px 10px rgb(0 0 0 / 20%); cursor: pointer; user-select: none; }
#content .game-button video { width:100%; height:auto; opacity: .33; transition:opacity .3s ease }
#content .game-button div {  position: absolute; font-size: calc((3vh + 3vw)/2); font-weight: bold; color: var(--space); text-shadow:0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff; z-index: 1; transition:.3s ease }
#content .game-button:hover video { opacity: .66 }
#content .game-button:hover div { transform:scale(1.1); text-shadow:0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff }
#content .game-button:active { transform:scale(.96); }

/* Slideshow */
#content #row2 #column1 .mySlides {display: none;}
#content #row2 #column1 img {vertical-align: middle;}
#content #row2 #column1 .slideshow-container { max-width: 1000px; position: relative; margin: auto; }
#content #row2 #column1 .numbertext { color: #fff; font-size: 12px; padding: 8px 12px; position: absolute; bottom: 0; left: 0; background-color: #00000080; border-radius: 0 10px 0 10px }
#content #row2 #column1 .fade { -webkit-animation-name: fade; -webkit-animation-duration: 2s; animation-name: fade; animation-duration: 2s; }
#content #row2 #column2 ul { column-count:2 }
#content #row2 #column2 ul li { transition: color 1s ease; }
#content #row2 #column2 ul span { display: block; background: #40B0E1; transition: width 1s ease; height: 2px; width: 0px }

#content #row2 #column2 ul li { width:max-content; padding-bottom: 10px; border-radius:10px;}
#content #row2 #column2 ul li:hover { background:#f5f5f5; cursor:pointer }
#content #row2 #column2 ul li:last-child { background:none; cursor:default}

#content #slideshow {max-width: 1000px;height: 50vh;position: relative;margin: auto;}
#content #slideshow div { position: absolute; height:100%; width:100% }
#content #slideshow img { height:auto; width:100%; background-size:contain; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2) !important }


@-webkit-keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}

/* Fathom Modal */
.fathom-modal { display: none; position: fixed; z-index: 101; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); overflow: auto; justify-content: center; align-items: center; font-family: 'Europa', 'Helvetica', 'Arial', sans-serif; font-size: 18px; font-weight: 300; color:#333 }
.fathom-modal * { box-sizing: content-box }

/* Modal Content */
.fathom-modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 80%; max-width: 1000px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; border-radius: 10px; word-wrap: break-word }
/* Modal Body */
.fathom-modal-body { overflow-y: auto; padding:20px; max-height: calc(95vh - 40px) }
.fathom-modal-body:after { content: ""; display: table; clear: both; }
.fathom-modal-body h1 { font-family: europa, sans-serif; text-transform: none; font-weight: bold; font-size:32px; line-height: 1; margin:0}
.fathom-modal-body h2 { font-family: europa, sans-serif; text-transform: none; font-weight: bold; font-size:22px; line-height: 1; margin:0}
/* The Close Button */
.fathom-modal-close {position:absolute;right:-19px;top:-19px;height:38px;width: 38px;color: #fff;text-align:center;font-size: 21px;background: #ff9b9b;border-radius: 50%;user-select: none;z-index: 1}
.fathom-modal-close i { margin-top:10px }
.fathom-modal-close:hover, .book-modal-close:focus { text-decoration: none; cursor: pointer; opacity: 1.0; background: #ff7070; }

.fathom-modal-body { overflow-y: auto; padding:20px; }
.fathom-modal-body:after { content: ""; display: table; clear: both; }
.fathom-modal-content a { color: #40B0E1; text-decoration: none; }

/* fathom-modal animation */
@-webkit-keyframes animatetop {
  from {top:-5%; opacity:0} 
  to {top:0%; opacity:1}
}
@keyframes animatetop {
  from {top:-5%; opacity:0}
  to {top:0; opacity:1}
}



#pubModal #pub-name { width:100%; font-weight: bold; font-size: 32px; line-height: 1; text-align: center; padding-bottom:20px; }
#pubModal #pub-info { width:100%; font-size: 18px; white-space: pre-line }

#supportButton, #feedbackButton {position: fixed;right: -45px;width: 86px;height:40px;background: #505050cc;border-radius: 10px 10px 0 0;bottom: 7%;color: #fff;line-height: 1;padding: 10px;font-size: 20px;transform: rotate(-90deg);font-weight: normal;box-shadow: 0 2px 100px 10px rgba(255,255,255,0.5), 0 2px 4px 1px rgba(0,0,0,0.5);user-select: none;cursor: pointer;transition:.1s ease;border: 2px solid #ffffff60;z-index: 1;box-sizing: content-box;}
#supportButton { bottom: calc(7% + 80px); right: -12px; width: 20px; }
#supportButton:hover, #feedbackButton:hover {background:#333333cc;margin-right:8px; }
#feedbackModal .fathom-modal-body { min-width:585px; padding: 0 }
#feedbackModal .smcx-embed { border:none; border-radius:10px }
@media (max-width: 700px) { #feedbackModal .fathom-modal-body { min-width:80vw;} }

/* Features */
#features .sectioncontent #row1 { height: 25vw; padding-bottom: 50px;}
#features .sectioncontent #row1 #column1 { position: relative; float: left; height: 100%; width: 48%; }
#features .sectioncontent #row1 #column2 { position: relative; float: right; width: 48%; }
#features .sectioncontent #row2 { height: 25vw; padding-bottom: 50px;}
#features .sectioncontent #row2 #column1 { position: relative; float: left; height: 100%; width: 48%; }
#features .sectioncontent #row2 #column2 { position: relative; float: right; width: 48%; }
#features .sectioncontent img { border-radius: 10px; box-shadow: 4px -4px 10px rgba(0,0,0,0.2); }
#features .sectioncontent video { border-radius: 10px; box-shadow: 4px -4px 10px rgba(0,0,0,0.2); cursor: pointer }
#features .sectioncontent video:hover { box-shadow: 0 0 10px var(--sky); }
#features h4 { font-weight: 600; margin-bottom: 10px;}
#features #row1 p, #features #row2 p, #features #row3 p { margin: 0; padding: 0; line-height: 1.25em; text-align: center}
#features #row3 { padding-bottom: 100px }
#features #row3 p, #features #row4 p { padding: 0 10% 0 10% }
#features #wh-mutebutton, #features #as-mutebutton, #features #bilingual-mutebutton, #features #lang-mutebutton { cursor: pointer; position: absolute; bottom:3%; right: 3.5%; font-size: 2.0em; z-index: 2; opacity: 0.9 }
#features #rv-mutebutton, #features #popup-mutebutton { cursor: pointer; position: absolute; bottom:1%; right: 13%; font-size: 2.0em; z-index: 2; opacity: 0.9 }



/* Assessment */
#assessment .sectioncontent #row1 { height: 36vw; padding-bottom: 100px;}
#assessment .sectioncontent #row1 #column1 { position: relative; float: left; height: 100%; width: 68%; }
#assessment .sectioncontent #row1 #column2 { display: flex; justify-content: center; align-items: center; height: 100%; float: right; width: 27%; }
#assessment #column1 img { position: absolute; cursor: pointer; transition: top 1s ease, left 1s ease; border-radius: 10px; }
#assessment #column1 img:hover { box-shadow: 0 0 10px var(--sky); }
#assessment #dash-student { height:auto; width:95%; box-shadow: 4px -4px 10px rgba(0,0,0,0.2); }
#assessment #dash-teacher { height:auto; width:95%; box-shadow: 4px -4px 10px rgba(0,0,0,0.2); }
#assessment #dash-school { height:auto; width:95%; box-shadow: 4px -4px 10px rgba(0,0,0,0.2); }

#assessment .sectioncontent #row2 { height: 90vw; padding-bottom: 100px;}
#assessment .sectioncontent #row2 #column1 { height: 100%; float: left; width: 45%; }
#assessment .sectioncontent #row2 #column2 { position: relative; float: right; height: 100%; width: 50%; }
#assessment .sectioncontent #row2 #column2 #c2row1 { position: relative; height: 35%; padding-bottom: 50px }
#assessment .sectioncontent #row2 #column2 #c2row2 { position: relative; height: 25%; padding-bottom: 50px }
#assessment .sectioncontent #row2 #column2 #c2row3 { position: relative; height: 35%; }
#assessment #column2 img { position: absolute; cursor: pointer; transition: top 1s ease, right 1s ease; border-radius: 10px; }
#assessment #column2 img:hover { box-shadow: 0 0 10px var(--sky); }
#assessment #c2row2 img { cursor: unset; }
#assessment #c2row2 img:hover { box-shadow: 4px -4px 10px rgba(0,0,0,0.2); }
#assessment #createquiz1 { height:auto; width:95%; box-shadow: 4px -4px 10px rgba(0,0,0,0.2); }
#assessment #createquiz2 { height:auto; width:95%; box-shadow: 4px -4px 10px rgba(0,0,0,0.2); }
#assessment #assignquiz { height:auto; width:95%; box-shadow: 4px -4px 10px rgba(0,0,0,0.2); right: 8px; }
#assessment #gradequiz { height:auto; width:95%; box-shadow: 4px -4px 10px rgba(0,0,0,0.2); }
#assessment #analyzequiz { height:auto; width:95%; box-shadow: 4px -4px 10px rgba(0,0,0,0.2); }
#assessment #sticky { position: sticky; position: -webkit-sticky; top:200px; margin: 10% 10% 10% 10%; }
#assessment #sticky #scrollbar { position: absolute; height:0px; width: 3px; top: 0px; left: -20px; background-color: var(--sky); transition: top 1s ease, height 1s ease;}
#assessment #sticky a { text-decoration: none; color: #fff; transition: color 0.3s ease }
#assessment #sticky a:hover { color: var(--sky) }

#assessment .sectioncontent #row3 { display:flex; height:auto; flex-wrap: wrap }
#assessment .sectioncontent #row3 #column1 { position: relative; width:50%; height:auto; display:flex; }
#assessment .sectioncontent #row3 #column2 { position: relative; width:50%; height:auto; display:flex; align-items:center; justify-content:center; flex-direction:column }
#assessment #row3 img { cursor: unset; }
#assessment #row3 img:hover { box-shadow: 4px -4px 10px rgba(0,0,0,0.2); }
#assessment #msgsystem { height:auto; width:95%; box-shadow: 4px -4px 10px rgba(0,0,0,0.2); }

#assessment .sectioncontent .row:after { content: ""; display: table; clear: both; }
#assessment h4 { font-weight: 600; }
#assessment #sticky h4 { font-weight: 600; margin: 10px 0px 10px 0px; text-align: left }



/* Plans */
#plans .sectioncontent.row { padding: 100px 10px 100px 10px }
#plans .sectioncontent [id^="column"] {
    display: inline-block;
    width:40%;
    height: auto;
    padding: 20px 20px 40px 20px;
    margin: 10px;
    background-color: #fff;
    border-radius: 10px;
    color: var(--charcoal);
    float:none;
}
#plans .sectioncontent [id^="column"] ul { 
    text-align: left;
    font-size: 1.5em;
    padding: 0px 0px 0px 30px;
    line-height: 1.5em;
    list-style: square url('images/checkmark.png');
}
#plans .sectioncontent [id^="column"] img {
    height: 180px; 
    width: auto;
}
#plans .sectioncontent.row:after {
    content: "";
    display: table;
    clear: both;
}
#plans-table { padding: 4% 100px; max-width: 1000px; margin: auto; }
#plans-table table { width:100%; height:100px; color: #fff; border-spacing: 0px; border-radius:10px; border:1px solid #ffffff80; text-align:center; font-size:20px }
#plans-table th, #plans-table td { border:1px solid #ffffff80; padding:10px }
#plans-table tr:first-child th:first-child { border-radius:8px 0 0 0 }
#plans-table tr:first-child th:last-child { border-radius:0 8px 0 0 }
#plans-table tr:last-child td:first-child { border-radius:0 0 0 8px }
#plans-table tr:last-child td:last-child { border-radius:0 0 8px 0 }
#plans-table tr td:first-child { text-align: left; width:auto}
#plans-table tr td:nth-of-type(2),
#plans-table tr td:nth-of-type(3),
#plans-table tr td:nth-of-type(4) { width: 15% }
#plans-table tr td:nth-of-type(2) { background:var(--ocean) }
#plans-table tr td:nth-of-type(3) { background:var(--navy) }
#plans-table tr td:nth-of-type(4) { background:var(--space) }
#plans-table tr:first-child { background:#333333cc; }
@media (max-width: 1000px) {
    #plans-table { padding:0; max-width: none }
}
@media (max-width: 650px) {
    #plans-table table { font-size: 16px }
    #plans-table th, #plans-table td { padding:4px }
}

div#family-form div.filter-option,
div#class-form div.filter-option,
div#school-form div.filter-option { text-align:center }



/* Pricing */
.form label { font-size: 1.5em; }
.form select, .form input { font-size: 1.5em; height: 40px; text-align: center; }
.form { line-height: 3em;}



/* Footer */
#footer { 
    color: var(--cloud);
    padding:100px 5% 0 5%; 
    background: none;
    font-family: "europa", "helvetica", sans-serif;
}
#footer #row1 {
    padding: 0 5% 0 5%;
    height: auto;
    text-align: center;
}
#footer #row1:after {
  content: "";
  clear: both;
  display: table;
}
#footer #row2 {
    margin:45px 0 45px 0;
    text-align: center;
}
#footerline { width:100%; border-bottom: 1px solid #ffffff80; }
#footer .column > a {
    line-height: 1.8em; 
    font-size: 18px;
}
#footer a { 
    text-decoration: none; 
    color: #fff;
}
#footer a:hover {
    text-decoration: underline;
    text-decoration-color: #fff;
}
#footer .column {
    text-align: left;
    float:left;
    width: 33.3%;
}
#footer #column:after {
    content: "";
    display: table;
    clear: both;
}
#footer h3 { font-size:1.17em; }

#smlinks { margin-top:20px }
#smlinks a { display: inline-block; width:36px; height:36px; border-radius: 50%; margin-right: 10px }
#smlinks a:hover { box-shadow:0 0 0 2px #fff inset }
#smlinks a i { font-size: 22px; text-align: center; width:100%; margin-top:8px }
#smlinks #blog i { margin-left:2px }
#smlinks #instagram i { margin-top:7px }

#smlinks #blog { background:var(--shadow) }
#smlinks #facebook { background:#3B5998 }
#smlinks #instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
#smlinks #twitter { background:#1DA1F2 }


/* Mobile */

@media (max-width: 1500px) {
    #content #row2 #column2 ul span { display: none } 
    #content #row2 #column2 ul { column-count:1 }
}
@media (max-width: 810px) {
    #features .sectioncontent #row1 { height: 33vw; }
    /*.navcontent.full { display: none; }*/
    .navcontent.mobile.main { display: block; }
}

.header_right .dropdown {
  position: relative;
  display: inline-block;
  margin-left: 0px;
  /*border: 1px solid #ccc;*/
  padding: 8px;
  border-radius: 3px;
  cursor: pointer;
}

.header_right .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  z-index: 1;
  top: calc(100% - 5px);
  width: auto;
  min-width: 100px;
  white-space: nowrap;
  right: 0;
  border-radius: 10px;
}

.header_right .dropdown-content a {
  color: black;
  padding: 7px 12px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.header_right .dropdown:hover .dropdown-content {display: block;}
.header_right .dropdown-content a:hover { color: rgb(64,176,225);}
.header_right .dropdown:hover { color: var(--sky) }

@media (max-width: 1200px) {
    .contain, .container { padding-top: 15px }
    .textsection { margin: 100px 10px 10px 10px; padding-bottom: 0;}
    .boxsection { margin: 10px; }
    .sectioncontent { padding: 25px }
    
    .boxsection h1 { font-size:2em; }
    .boxsection h2 { font-size:1.8em; }
    .boxsection h3 { font-size:1.6em; } 
    .boxsection h4 { font-size:1.4em; } 
    .boxsection p, .boxsection ul { font-size: 1.25em; }
    
    #content .sectioncontent #row1 #column1 { width:100% }
    #content .sectioncontent #row1 #column2 { width:100% }   
    #content .sectioncontent #row2 #column1 { width:100% }
    #content .sectioncontent #row2 #column2 { width:100% }  
    #content .sectioncontent #row3 #column1 { width:100% }
    #content .sectioncontent #row3 #column2 { width:100% }  
    #content td .img-overlay .text { font-size: 3vw; }
    #content #row2 #column2 ul span { display: none } 

    #assessment .sectioncontent #row1 { height: 58vw; padding-bottom: 100px; }
    #assessment .sectioncontent #row1 #column1 { width: 90%; }
    #assessment .sectioncontent #row1 #column2 { width: 100%; height: auto }
    #assessment .sectioncontent #row2 { height: 185vw; padding-bottom: 100px; }
    #assessment .sectioncontent #row2 #column1 { width: 100%; height: auto }
    #assessment .sectioncontent #row2 #column2 { width: 100%; }
    #assessment .sectioncontent #row2 #column2 #c2row1, 
    #assessment .sectioncontent #row2 #column2 #c2row2 { padding: 10px; }
    #assessment #sticky p { padding:0px !important; text-align: center; }
    #assessment #sticky h4 { text-align: center }
    #assessment #sticky #scrollbar { display: none; }
    #assessment #sticky { margin: 6%;}
    #assessment .sectioncontent #row3 { height: 50vw; padding-bottom: 100px; }
    #assessment .sectioncontent #row3 #column1 { width: 100%;  }
    #assessment .sectioncontent #row3 #column2 { width: 100%; height: auto; padding-bottom: 100px; }
    
    #features .sectioncontent #row1 { height: 60vw !important; width: 100%; }
    #features .sectioncontent #row1 #column1 { width: 100%; padding-bottom: 10px; }
    #features .sectioncontent #row1 #column2 { width: 100%; padding-bottom: 50px; }
    #features .sectioncontent #row2 { height: 60vw; width: 100%; }
    #features .sectioncontent #row2 #column1 { width: 100%; padding-bottom: 50px; }
    #features .sectioncontent #row2 #column2 { width: 100%; padding-bottom: 100px; }
    #features #row3 p, #features #row4 p { padding: 0 0 0 0; }
    #features #wh-mutebutton, #features #as-mutebutton, #features #bilingual-mutebutton, #features #lang-mutebutton, #features #rv-mutebutton, #features #popup-mutebutton { font-size: 1.5em; }
    
    #plans .sectioncontent.row { padding: 10px 10px 20px 10px; }
    #plans .sectioncontent [id^="column"] { width:80%; margin: 0 0 15px 0}
    
    .form label { font-size: 1.25em; }
    .form select, .form input { font-size: 1.25em; }
    .form label { line-height: 1.5em; }
    
    #footer { padding: 50px 10px 10px 10px; }
    #footer #row1 { height: 330px; }
    #footer .column { width: 50%}
    #footer p { margin: 0; }
    
    
}
@media (max-width: 550px) {
    #footer .column { width: 100%}
    #footer #row1 { height: 490px; }
    #footer .column:nth-of-type(2) h3 { display:none }
}

/* navbar sizing */
@media (max-width: 1300px) {
  .navcontent.main > a:nth-of-type(3) { display:none }
}
@media (max-width: 1160px) {
  .navcontent.main > a:nth-of-type(5) { display:none }
}
@media (max-width: 980px) {
  .navcontent.main > a:nth-of-type(4) { display:none }
}
@media (max-width: 850px) {
  .navcontent.main > a:nth-of-type(6) { display:none }
/*   .navcontent.fr .button { display: none } */
}