.body {
    background-color: #f3f4e4;
    margin: 0;
    font-family: 'Open Sans';
    font-size: 1.0em;
    color: #202120;
}

h1 {
    font-size: 1.2em;
}

.backdrop {
    display: none;
    position: absolute;
    width: 100%;
    height: 1000px;
    background-color: black;
    opacity: 0.5;
    z-index: 8999;
}

.content {
    padding: 6px;
}

home-page .content {
    text-align: justify;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 5%;
    margin-top: 1rem;
    background: white;
    padding: 2rem;
    border-radius: 1rem;
}

.header {
    background-color:#d2601a;
    width:100%;
    margin-bottom: 3rem;
    z-index: 9000;
}

.title {   
    background-color:#d2601a;
    padding-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: white;
    font-size: 2.2rem;
    text-align: center;
    z-index: 9000;
}

/** How to */
.howto, .further-reading {
    text-align:center;
}

.howto .content, .further-reading .content {
    text-align: left;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 5%;
    background: white;
    padding: 2rem;
    border-radius: 1rem;
}

.howto .content .howto-item {
    margin-bottom: 1.2rem;
}

.howto .diagram {
    width:90%;
    height: auto;
}

/** Menu */
.menu {  
    color: white;
    padding-top: 0.5rem;
    width: 100%;
    background-color:#d2601a;
}

.menu-item {
    text-align: center;
    background-color:#d2601a;
    float: left;
    border-width: 2px;
    border-color:white;
    border-style: solid;
    width: calc(16.66% - 9px);
    font-size: 0.6rem;
    height: 1.7rem;
    padding-top: 0.1rem;
    padding-left:5px;
    overflow:hidden;
    margin: 0;
}

.menu-item.selected {
    background-color: #b4440a;
    font-weight: 900;
}

.menu a {
    font-size: 1rem;
    cursor: pointer;
}

.menu a:hover {
    text-decoration: none;
}

.menu a:first-child {
    margin-left: 0 !important;
}

/* Flash Cards */
.flash-cards {
    width: 100%;
    overflow: hidden;
    margin-top: 2rem;
}

.info {
    font-size: 1.8rem;
    margin-right: 0.75rem;
    margin-left: 0.75rem;
}

#card-image, #card-svg {
    width: 600px;
    height: auto; 
}

.explainatory-text {
    padding: 1rem;
    color: #ffffff;
    width:85%;
    font-size: 1rem;
    padding-left: 10%;
    font-weight: 100;
}

.extra-text {
    width: 90%;
    padding: 1rem;
    color: white;
    font-style: normal;
    border-color: green;
    border-style: solid;
    border-width: 1px;
    background-color: green;
    padding: 0.2rem;
    margin-left: 10%;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 100;
}


.spacer {
    display: block;
    height: 0.8rem;
}

.answer-left {
    width:50%;
}

.answer-right {
    float:left;
    width:50%;
}


.extra-text:empty {
    display:none;
}

.bold {
    font-weight:900;
}

.prev, .next {
    display:none;
}

.mobile-card-navigate {
    height: 1.8rem;
    width: calc(100% - 1rem);
}

.mobile-prev, .mobile-next {
    display: block;
    display: block;
   /* width: calc(50% - 1rem);*/
    height: 48px;
    border: 0;
    cursor: pointer;
    float: left;
    padding: 0.5rem;
    font-weight: normal;
    margin-bottom: 0.5rem;
}

.mobile-next {
   text-align: right;
   float:right;
}

.mobile-prev:hover, .mobile-next:hover {
    font-weight:bold
}

.flash-card {

    margin-left: 1rem;
    width: calc(100% - 50px);
    float:left;
    height: 600px;
    background-color: black;
    overflow:hidden;
    cursor: pointer;
    border-radius: 1rem;
    border-color:transparent;
    border-style:solid;
    border-width:3px;
    outline:none;

}

.flash-card.hidden {
    /*background-color: black;*/
    background-color:darkslategrey ;
    color:#ffffff;
}

.flash-card.visible {
    background-color: black;
}

.flash-card.hidden:focus {
    background-color:darkslategrey ;
    border-color:black;
    border-style:solid;
    border-width:3px;

}

.flash-card .number {
    float: left;
    font-size: 1.1rem;
    margin-left: 1rem;
    margin-top: 1rem;
    border-radius: 5rem;
    border-width: 1rem;
    border-style: solid;
    background: white;
    padding-left: 0px;
    padding-bottom: 0.3rem;
    color: black;
    text-align: center;
    width: 1.4rem;
    height: 1.2rem;
 }

.flash-card .question {
    float:left;
    padding-top: 1.2rem;  
    color:#ffffff;
    font-size: 4rem;

}

.flash-card .question-tip {
    float:left;
    padding-top: 1.2rem;  
    color:#ffffff;
    font-size: 1.2rem;
}

.flash-card.hidden .number {
    display: none;
}

.flash-card.visible .number {
    display: none;
}

/* If the card is hidden - the question is visible */
.flash-card.hidden .question {
    
    width: 100%;
    text-align: center;
    padding-top: 220px;
    display: block;
}

.flash-card.hidden .question-tip {
    width: 100%;
    text-align: center;
    display: block;
}


.flash-card.visible .question {
    display: none;
}

.flash-card.visible .question-tip {
    display: none;
}

.flash-card.hidden .answer {
    opacity: 0;
}

.flash-card.visible .answer {
 
    height: 100%;
    width: 100%;

    opacity:1;
    transition: opacity 2s; 
}

.large-icon {
    height: 100%;
    width: 100%;
    color: rgb(132, 132, 253);
}


/** Quiz Styles */
.correct {
    color:green;
    font-weight:bold;   
}

.incorrect {
    color: red;
    font-weight:bold;
}

.result {
    text-align: top;
    float: left;
    padding-top: 2rem;
}

.quiz {
   display: inline-block;
   width: calc(100% - 40px);
   margin-left: 1rem; 
   margin-right: 1rem; 
   background-color:white;
   border-radius: 1rem;
   margin-top:1rem;
}

.question-left {
    width: 45%;
    float: left;
    padding: 1rem;
}

.question-left.expanded {
    width: 90%;
}

.question-right {
    width: 40%;
    float: left;
    padding: 1rem;
}


.question-text {
    font-weight: bold;
}

#question-image {
    height: 450px;
    width: auto;
    border-radius: 1rem;
}

.options {
    padding: 1rem;
    width: 100%;
}

.option.locked {
    cursor: default;
}

.option-1, .option-2, .option-3, .option-4 {
    cursor: pointer;
    margin-top: 10px;
}

.option-1:hover, .option-2:hover, .option-3:hover, .option-4:hover {
    font-weight: bolder;
}


.continue {
    font-size: 1.0rem;
    margin-right: 2rem;
    float:right;
    cursor: pointer;
    font-weight:normal;
    padding-left: 4px;
}

.continue:hover {
    font-weight:bold;
}

.score {
    margin: 2rem;
}

.material-icons {
   vertical-align: middle;
}

.material-icons.large {
    font-size: 48px;
}

a {
   text-decoration:none;
   font-weight:normal;
   color: white;
}
a:hover {
    text-decoration:none;
    font-weight:bolder;
}
a:visited {
    text-decoration: none;
    color: white;
}

.further-reading .content a {
    padding-left: 2rem;
    color: inherit;
}

.card-navigation-item {
    font-size:1.5rem;
    margin-left: 1rem;
    margin-top: 1rem;
    border-radius: 5rem;
    border-width: 1rem;
    border-style: solid;
    background: black;
    padding-left: 0px;
    padding-bottom: 0px;
    color: white;
    text-align: center;
    width: 1.8rem;
    height: 1.8rem;
    cursor: pointer;
} 

.hamburger {
   display: none;
   position: absolute;
   left: 1rem;
   top: 1rem;
   z-index: 9000;
}

.hamburger .material-icons {
    color:white;
    font-size: 48px;
}

/* Always display menu on large screen */
.menu.visible, .menu.hidden {
    display:block;
}

svg text {
   font-size: 1rem;
}

/** small screen widths */
@media (max-width: 1300px) {

    .flash-card {
        height: 300px;
    }

    #card-image, #card-svg {
        width: 300px;
        height: auto;
    }
    
    .explainatory-text, .extra-text {
        font-size:0.7rem;
    }

    .flash-card.hidden .question {
        padding-top: 70px;
     }

    .flash-card.hidden .question-tip {
       padding-top:10px;
    }
    
}

@media (max-width: 1200px ) {

}


@media (max-width: 1100px ) {
    
}

@media (max-width: 1000px) {
    #question-image {
        height: 400px;
        width: auto;
    }
}


@media (max-width: 900px) {
    #question-image {
        height: 350px;
        width: auto;
      }
}

@media (max-width: 800px) {
    #question-image {
        height: 300px;
        width: auto;
      }
}


/** Phone support (or very small window) */
@media (max-device-width: 850px), (max-width: 700px) {

 
    .body {
        font-size: 1.2em;
    }

    h1 {
        font-size: 1em;
    }

    .howto .content {
        margin-left: 4%;
        margin-right: 4%;
    }
    
    .answer-left {
        width:100%;
    } 
    
    .answer-right  {
        width:100%;
    }
    
    .quiz {
        max-width: none;
    }

    .header {
        margin-bottom: 0;
    }

    .menu.visible {
        display:block;
    }
    
    .menu.hidden {
        display:none;
    }

    .flash-card {
        float: none;
        width: inherit;
        height: inherit;
        margin-left:0;
    }
    
    #card-image, #card-svg {
        width: 100%;
        height: auto; 
    }


    .explainatory-text {
        width: 95%;
        font-size: 24px;
        padding-left:4%
    }

    .extra-text {
        width: 92%;
        font-size: 24px;
        margin-left: 4%;
    }

    .spacer {
        display: block;
        height: 4px;
    }

    .prev, .next {
        display:none;
    }

    .mobile-card-navigate {
        width: 100%;
    }

    .mobile-prev, .mobile-next {
        display: block;
        width: calc(50% - 1rem);
        height: 3rem;
        border: 0;
        cursor: pointer;
        float: left;
        padding: 0.5rem;
        font-size: 1.5em;
    }

    .mobile-prev:hover, .mobile-next:hover {
        font-weight:bolder;
    }

    .mobile-next {
        text-align:right;
    }

    .hamburger {
        display: inline;
        cursor: pointer;
    }

    /** Menu */
    .menu {  
        display: none;
        position:fixed;
        top: 5rem;
        left: 0;
        color: white;
        padding-top: 0;
        width: 100%;
        background-color:#d2601a;
        z-index:9000;
    }

    .menu.on {
        visibility: hidden;
    }

    .menu.off {
        visibility: visible;
    }

    .menu-item {
        text-align: center;
        background-color:#d2601a;
        border-width: 2px;
        border-color:white;
        border-style: solid;
        width: calc(20% - 9px);
        font-size: 1.8rem;
        height: 4rem;
        padding-left:5px;
        overflow:hidden;
        width:100%;
    }

    .menu a {
        font-size: 2.5rem;
        cursor: pointer;
    }
    
    .menu .material-icons {
        font-size: 48px;
    }

    .menu a:hover {
        text-decoration: none;
    }

    .menu a:first-child {
        margin-left: 0 !important;
    }

    /* No point showing focus outline (keyboard interface) on mobile */
    .continue, .mobile-prev, .mobile-next, .hamburger {
        outline: none;
    }
    
}