: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;
}
.navcontent {
    padding:15px;
    margin-left:18px;
    width: 100%;
}
.navcontent li {
    display: table-cell;
    vertical-align: middle;
    padding-right: 40px;
    margin: auto;
}	
.navcontent li img {
    height: 40px;
    width: auto;
}
.navcontent li a, .navcontent #login {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease-out;
    font-size:1.5em;
} 
.navcontent li a:hover, .navcontent #login:hover {
    color: var(--sky);
    transition: 0.3s ease;
    cursor: pointer;
}
.navcontent.mobile { 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:1.5em;
    transition: background-color 0.3s ease-out, color 0.3s ease-out;
    line-height: 1.0em;
}
a.button:hover, button:hover {
    background-color: var(--sky);
    color: #fff;
    transition: 0.3s ease;
}

.fr.full {float: right; width:400px; padding:15px; margin: auto; margin-right:18px; text-align: right; }
.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: 1s;
}
.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; }
}
.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;
}
.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: relative; display: inline-block; float: right; width: 49%; }
#content .sectioncontent #row2 { display: inline-block; padding-bottom: 50px;}
#content .sectioncontent #row2 #column1 { position: relative; 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: relative; display: inline-block; float: right; width: 49%; }

#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: context-menu}
#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; }

/* 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; }
@-webkit-keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}



/* 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; 100%; 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; 100%; 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 { height: 20vw; }
#assessment .sectioncontent #row3 #column1 { position: relative; float: left; height: 100%; width: 45%; }
#assessment .sectioncontent #row3 #column2 { position: relative; float: right; height: 100%; width: 50%; }
#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: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;
}




/* 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;
}
#footer #row1 {
    padding: 0 5% 0 5%;
    height: 120px;
    text-align: center;
}
#footer #row2 {
    margin:45px 0 45px 0;
    text-align: center;
}
#footerline { width:100%; border-bottom: 1px solid #fff; }
#footer a { 
    text-decoration: none; 
    color: #fff; 
    line-height: 1.8em; 
    font-size: 1.1em;
}
#footer a:hover {
    text-decoration: underline;
    text-decoration-color: #fff;
}
#footer .column {
    text-align: left;
    float:left;
    width: 50%;
}
#footer #column:after {
    content: "";
    display: table;
    clear: both;
}


/* Mobile */
@media (max-width: 1200px) {
    .container { padding-top: 25px }
    .textsection { margin: 100px 10px 10px 10px; padding-bottom: 0;}
    .boxsection { margin: 25px 10px 10px 10px; }
    .sectioncontent { padding: 25px }
    .navcontent li { padding-right: 0; }
    #plans .sectioncontent.row { padding: 10px 10px 20px 10px; }
    
    .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; }
    
    #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; }
    
    .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: 160px; }
    #footer .column { width: 50%}
    #footer p { margin: 0; }
}
@media (max-width: 1300px) {
    
    #plans .sectioncontent [id^="column"] { width:80%; margin: 0 0 15px 0}
    #features .sectioncontent #row1 { height: 33vw; }
    .navcontent.full { display: none; }
    .navcontent.mobile { 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: 38px;
  width: 100%;
  left: 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;
}

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