: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 */
}
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);
    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: #fff;
    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;}




/* 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((3.8vw + 3.8vh)/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: 50px; }
.nobg .sectioncontent { padding: 100px 50px 0px 50px }
.sectioncontent img { width:40%; }

/* Main nav button */
#nav-button { display: flex;padding: 10px 13px;height: 100px;align-items: center;justify-content: center; box-sizing:border-box; }
#nav-button i { font-size:30px; }

/* Notif Button */
#notif-button { width: auto; height: 100px; font-size: 34px; display: inline-flex; justify-content: center; align-items: center;cursor: pointer; padding: 10px; margin-right: 10px; float:none; box-sizing:border-box; }
#notif-button #notif-num { display:none; padding: 3px 6px; align-items: center; justify-content: center; background: #ff7070; transform: translate(12px,-15px); border-radius: 99px; min-width: 21px; box-shadow: -1px 1px 4px #00000040; color: #fff; font-size: 12px; position: absolute; width: auto;text-align: center; box-sizing: border-box; transition:transform .3s ease; animation: anim-notifnum .3s ease; }
#notif-button i { vertical-align:top; font-size:30px }
@keyframes anim-notifnum { from { transform: translate(12px,0px)} to { transform: translate(12px,-15px)} }


/* Content */
#content .sectioncontent #row1 { display: inline-block; padding-bottom: 50px;}
#content .sectioncontent #row1 #column1 { position: relative; float: left; width: 49%; }
#content .sectioncontent #row1 #column2 { position: sticky; top:200px; float: right; width: 49%; }
#content .sectioncontent #row2 { display: inline-block; padding-bottom: 50px;}
#content .sectioncontent #row2 #column1 { position: sticky; top:200px; float: left; width: 49%; }
#content .sectioncontent #row2 #column2 { position: relative; float: right; width: 49%; }
#content .sectioncontent #row3 { display: inline-block; padding-bottom: 50px;}
#content .sectioncontent #row3 #column1 { position: relative; float: left; width: 49%; }
#content .sectioncontent #row3 #column2 { position: sticky; top:200px; 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; -webkit-user-drag: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 }


#games-container { display:flex; flex-wrap:wrap; width:100%; box-sizing:border-box; }
#games-container .game-link { margin:20px; flex:1 0 20%; max-width:calc(50% - 40px); max-height:400px; border-radius:10px; overflow:hidden; box-shadow:0 0 10px #33333340; background:var(--navy); background-image:linear-gradient(to bottom, var(--ocean), var(--navy)); text-decoration:none; cursor:pointer; transition:transform .3s ease }
#games-container .game-link:hover { transform:scale(1.05); text-decoration:none !important }
#games-container .game-link:active { transform:scale(1.02); transition:none }
#games-container .game-link-title { padding:10px; color:#fff; font-size:30px; font-weight:bold; text-shadow:0 0 5px #33333340; text-decoration:none; background:#333; background-image:linear-gradient(to bottom, #555, #333); }
#games-container .game-link-video { position:relative; display:flex; align-items:center; justify-content:center; width:100%; }
#games-container .game-link-video video { width:100%; opacity:0; transition:opacity .3s ease }
#games-container .game-link-video.fadein video { opacity:1 }
#games-container .game-link-loader { position: absolute;top: 0;left: 0;width: 50%;height: 150%;display: block;background-image: linear-gradient(90deg, transparent 0%, #ffffff40 50%, transparent); animation:anim-game-loader 2s ease 0s infinite; transition:opacity .3s ease; opacity:1 }
#games-container .game-link-video.fadein .game-link-loader { opacity:0; }

@media only screen and (max-width: 1000px) {
    #games-container .game-link { flex:1 0 60%; }
}
@media only screen and (max-width: 700px) {
    #games-container .game-link { margin:10px; max-width:100%; max-height:200px; }
}
@keyframes anim-game-loader {
    0% { transform:translateX(-100%) }
    100% { transform:translateX(200%) }
}


@-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 }

/* 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 p, #assessment .sectioncontent p { text-align: left; line-height: 1.5em; opacity: .75; }
#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; opacity:.75 }
#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: 30%; padding-bottom: 50px }
#assessment .sectioncontent #row2 #column2 #c2row2 { position: relative; height: 30%; 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 #createquiz { height:auto; width:95%; box-shadow: 4px -4px 10px rgba(0,0,0,0.2); right: 8px; }
#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 */
#plan-types { display: flex; justify-content: center; }
#plan-types .plan { display: flex; flex-direction: column; width:30%; max-width:400px; padding: 20px; margin: 10px; background-color: #fff; border-radius: 10px; color: var(--charcoal); flex:1 0 auto; box-sizing:border-box; position:relative }
#plan-types .plan h2 { margin:0; font-size:35px }
#plan-types .plan img { margin:0 auto; }
#plan-types .plan-price-container { margin: 30px 0;font-size: 18px;display: flex;align-items: center;justify-content: center;flex-wrap: wrap; }
#plan-types .plan-price-container span {font-weight: normal;opacity: .66;line-height: 1;}
#plan-types .plan-price-container sup { font-size:25px; font-weight:bold; margin-right:5px }
#plan-types .plan-price-container .starting-at {width:100%;margin-bottom: 5px;}
#plan-types .plan-price-container .time-billed {margin-top: .5em;}
#plan-types .plan-price-container .plan-price {font-size:35px;font-weight:bold;opacity:1;}
#plan-types .plan-details { text-align:left;margin: 0 0 20px 0;padding-left: 20px;width: max-content;max-width:100% }
#plan-types .plan-details div:not(:first-child) { margin-top:10px }
#plan-types .button { margin-top:auto; background-image:linear-gradient(-30deg, var(--ocean), var(--sky)); color:#fff !important; border:0; box-shadow:-2px 2px 10px #33333340; line-height:1.2; transition:transform .3s ease; }
#plan-types .button:hover { transform:scale(1.05) }
#plan-types .button:active { transform:scale(1); transition:transform 0s }

@media (max-width: 900px) {
    #plan-types { flex-direction:column; }
    #plan-types .plan { width:100%; max-width:none; margin:0 0 20px 0; box-sizing:border-box }
}

#more-plan-types { display:flex; justify-content:center; margin-top:40px; }
#more-plan-types .plan { display:flex; align-items:center; justify-content:center; background:#ffffff40; color:#fff; border-radius:10px; font-size:20px; padding:0 20px; height:60px; line-height:1.15; cursor:pointer; user-select:none; text-decoration:none }
#more-plan-types .plan:hover { background-image:linear-gradient(180deg, var(--ocean), var(--navy)); text-decoration:none }
#more-plan-types .plan:active { transform:scale(0.97) }
#more-plan-types .plan i { margin-right:15px; font-size:32px; }

#plans #switch-plan-price { color: #fff;width: 100%; display:flex; align-items:center; justify-content: center; font-size:20px }
#switch-plan-price .toggle { position:relative; display:inline-block; background:none; margin:0 10px; padding:3px; height:32px; width:65px; border-radius:99px; cursor:pointer; overflow:hidden; box-sizing:border-box; transition:background .3s ease; box-shadow:0 0 0 2px #fff }
#switch-plan-price .toggle:hover { opacity:.9 }
#switch-plan-price .toggle:active { transform:scale(.92) }
#switch-plan-price .toggle.toggle-on { background:none }
#switch-plan-price .toggle.toggle-on .toggle-switch { left:36px }
#switch-plan-price .toggle-switch { width:26px; height:26px; background:white; border-radius:50%; box-shadow:0 0 20px #00000040; position:absolute; top:3px; left:3px; z-index:1; transition:left .3s ease }
#switch-plan-price .toggle-text { width:100px; text-align:left }
#switch-plan-price .toggle-text:first-child { text-align:right }
#switch-plan-price + div { width:100%; font-size:16px; margin:10px 0 30px 0; opacity:.66; }


#plans .sectioncontent.row { padding: 100px 10px 100px 10px }
#plans .sectioncontent [id^="column"] {
    display: inline-block;
    width:26%;
    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:1200px; margin:auto; display:none }
#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; overflow:hidden }
#plans-table th, #plans-table td { border:1px solid #ffffff80; padding:10px }
#plans-table tr td:first-child { text-align:left; width:auto }
#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;}


#rosteringLogos { width:100%; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; max-width:1000px; margin:auto }
#rosteringLogos .rostering-logo,
#rosteringLogos > a { width:auto; height:80px; background:var(--cloud); display:flex; align-items:center; justify-content:center; border-radius:10px; padding:0 10px; margin:5px; position:relative; }
#rosteringLogos .rostering-logo.asterisk { cursor:pointer }
#rosteringLogos .rostering-logo.asterisk:after { content:'\2a'; font:var(--fa-font-solid); color:#333; position:absolute; top:0; right:0; padding:10px; }
#rosteringLogos img { width:250px; height:auto }


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

#fathomFooterLogo { width:200px;height:auto;margin: 25px auto 0 auto }
#fathomFooterLogo:after {
    content: '®';
    color: #fff;
    font-size: 14px;
    font-family: 'helvetica', 'arial', sans-serif;
    font-weight: normal;
    position: relative;
    float:right;
    bottom:40px;
    left:12px;
}

#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 { background:linear-gradient(to bottom, var(--ocean), var(--navy)) }
#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 }
#smlinks #linkedin { background:#0a66c2 }

/* 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 .column { width: 50%}
    #footer p { margin: 0; }
    
    
}
@media (max-width: 550px) {
    #footer .column { width: 100%}
    #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 } */
}