/*!
Theme Name: Fixed & Growth Mindset
Theme URI: http://www.belearning.com.au
Author: Sam Hill
Author URI:
Version: 1.0.9
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: mindset

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/* GLOBAL */

h1, h2, h3, h4
{
    font-family:Arial, Helvetica, sans-serif;
}
body:not(.page-template-login) h1 { 
    font-size: 1.8rem;
    line-height: 1.1;
}
.page-template-login h1,
body {
    font-family: 'Open Sans', sans-serif;
}
.fade-in
{
    opacity:1 !important;
}
button:disabled
{
 cursor:default;
}

.no-wrap { white-space: nowrap; }
.form-control,
.btn
{
    border-radius:0;
    line-height:2;
    height:auto;
}

body { max-width: 800px; margin: 0 auto 2px auto; display: flex; flex-direction: column; border: 1px solid #343a40; }
#page { flex: 1; display: flex; flex-direction: column; }
#main { flex: 1; padding: 2rem; }

@media (min-width: 1px) and (max-width: 374px) {
    .navbar-brand { margin-right: 0.25rem; }
}
.bottom-btns .btn.focus,
.bottom-btns .btn:focus,
.bottom-btns .btn:not(:disabled):not(.disabled).active:focus,
.bottom-btns .btn:not(:disabled):not(.disabled):active:focus,
.btn-collection .btn.focus,
.btn-collection .btn:focus,
.btn-collection .btn:not(:disabled):not(.disabled).active:focus,
.btn-collection .btn:not(:disabled):not(.disabled):active:focus { box-shadow: inset 0 0 0 0.2rem rgba(38,143,255,.5); }

.base-navigation .btn,
.option-btns .btn,
.bottom-btns .btn,
#result-btns .btn { padding: .75rem;}

.base-navigation { display: flex; justify-content: center; } 
.base-navigation .btn { display: block; width: 33.33333%; }
.base-navigation .btn,
.base-navigation .btn:not(:disabled):not(.disabled):active,
.base-navigation .btn:not(:disabled):not(.disabled).active { color: #000; background: #CCC; background: linear-gradient(to bottom, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 2%, rgba(204,204,204,1) 4%, rgba(204,204,204,1) 100%); border: 1px solid #FFF; }

.base-navigation .btn:not(:disabled):not(.disabled):hover,
.base-navigation .btn:not(:disabled):not(.disabled):focus
{
    background: #CCC; background: linear-gradient(to bottom, rgba(180, 180, 180,1) 0%, rgba(255,255,255,1) 2%, rgba(180, 180, 180,1) 4%, rgb(180, 180, 180) 100%);
}

.base-navigation.two-btns > .btn:first-of-type,
.base-navigation.two-btns > .btn:first-of-type:not(:disabled):not(.disabled):active,
.base-navigation.two-btns > .btn:first-of-type:not(:disabled):not(.disabled).active { border-right-color: #CCC; }
.base-navigation.three-btns > .btn:nth-of-type(2),
.base-navigation.three-btns > .btn:nth-of-type(2):not(:disabled):not(.disabled):active,
.base-navigation.three-btns > .btn:nth-of-type(2):not(:disabled):not(.disabled).active { border-left-color: #CCC; border-right-color: #CCC; }

.option-btns { display: flex;  border-color: #FFF; border-style: solid; border-width: 1px 0 0 0; }
.option-btns .btn { width: 33.33333%; border: none; border-radius: 0; color: #000; text-shadow: 0px 0px 3px rgba(0,0,0,0);}
.option-btns > .btn:nth-of-type(1) { background: rgba(27, 160, 27, 0.5); }
.option-btns > .btn:nth-of-type(2) { background: rgba(228, 182, 0, 0.5); border: 1px solid #FFF; border-top: none; border-bottom: none;  }
.option-btns > .btn:nth-of-type(3) { background: rgba(195, 0, 0, 0.5); }
.option-btns > button:hover,
.option-btns > button:focus{
    text-shadow: 0px 0px 3px rgba(0,0,0,0.8);
    color:#FFF;
}
.option-btns > button:nth-of-type(1):hover,
.option-btns > .btn:nth-of-type(1):not(:disabled):not(.disabled):active,
.option-btns > .btn:nth-of-type(1):not(:disabled):not(.disabled).active,
.option-btns > .btn:nth-of-type(1).selected { background: rgba(27, 160, 27, 1); }
.option-btns > button:nth-of-type(2):hover,
.option-btns > .btn:nth-of-type(2):not(:disabled):not(.disabled):active,
.option-btns > .btn:nth-of-type(2):not(:disabled):not(.disabled).active,
.option-btns > .btn:nth-of-type(2).selected { background: rgba(228, 182, 0, 1); }
.option-btns > button:nth-of-type(3):hover,
.option-btns > .btn:nth-of-type(3):not(:disabled):not(.disabled):active,
.option-btns > .btn:nth-of-type(3):not(:disabled):not(.disabled).active,
.option-btns > .btn:nth-of-type(3).selected { background: rgba(195, 0, 0, 1);}

.bottom-btns { display: flex; }
.bottom-btns.one-btn { justify-content: flex-end; }
.bottom-btns.two-btns { justify-content: space-between; }
.bottom-btns .btn { display: block; min-width: 33.33333%; border-bottom: none; border-radius: 0; }
.bottom-btns .btn,
.bottom-btns .btn:not(:disabled):not(.disabled):active,
.bottom-btns .btn:not(:disabled):not(.disabled).active { color: #000; border-color: #FFF; background: #CCC; background: linear-gradient(to bottom, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 2%, rgba(204,204,204,1) 4%, rgba(204,204,204,1) 100%); }
.bottom-btns .btn:not(:disabled):not(.disabled):hover,
.bottom-btns .btn:not(:disabled):not(.disabled):focus
{
    background: #CCC; background: linear-gradient(to bottom, rgba(180, 180, 180,1) 0%, rgba(255,255,255,1) 2%, rgba(180, 180, 180,1) 4%, rgb(180, 180, 180) 100%);
}
.bottom-btns .btn.left,
.bottom-btns .btn.middle { border-left: none; }
.bottom-btns .btn.right,
.bottom-btns .btn.middle { border-right: none; }

/* PROGRESS */

#progress-bar-container { padding: 0; margin: 0; }
#progress-bar { height:15px;overflow:hidden;background-color:rgb(255, 231, 124);padding:0; }
#progress-bar > div
{
    height:15px;
    float:left;
}
#progress-bar > div
{
    background-color:rgb(255, 208, 0);
}

/* 
    PASSWORD SCREEN
*/

.page-template-login #main { display: flex; flex-direction: column; align-items: center; justify-content: space-around; justify-content: space-evenly; }
.page-template-login #main > h1 { text-align: center; }
.page-template-login #logo { width: 100%; max-width: 240px; }
@media(min-width:576px)
{
    .page-template-login #logo { width: 50%; }  
}

.page-template-login #logo > img { display: block; width: 100%; }
.page-template-login #rebus_login { background: #000; padding:1rem; }
.page-template-login #rebus_login > p { color: #fff; }
.page-template-login #controls { display: flex; align-items: center; justify-content: space-evenly; }
.page-template-login #controls input,
.page-template-login #controls button { width: 40%; max-width: 12rem; }
.page-template-login .copy-right { text-align: right; margin: 1rem 0 0 0; }
.page-template-login #error { color: #ff0000; line-height: 1.1; margin-top: 15px; max-width: 500px; }

/* 
    HOME & INSTRUCTIONS
*/
#page-logo {  margin: 0 0 2rem 0; text-align: right; }
#page-logo > img { width: 25%; max-width:150px; min-width:100px; }

/* HOME */

/* INSTRUCTIONS */

.page-template-instructions #main { padding-bottom: 20px; }
.page-template-instructions #base-navigation-container,
.page-template-instructions #option-btns-container { margin: 2rem 0; }
.page-template-instructions .base-navigation .btn,
.page-template-instructions .option-btns .btn { cursor: default; }

.page-template-instructions #base-navigation-container { margin-left: -15px; margin-right: -15px; }
.page-template-instructions #base-navigation-container .btn { display: flex; align-items: center; justify-content: center;  }

.page-template-instructions #option-btns-container { padding: 0 0.625rem; }
.page-template-instructions .option-btns { border-width: 1px; }
.page-template-instructions .option-btns > .btn:nth-of-type(1):active { background: rgba(27, 160, 27, 0.5) !important; }
.page-template-instructions .option-btns > .btn:nth-of-type(2):active { background: rgba(228, 182, 0, 0.5) !important; }
.page-template-instructions .option-btns > .btn:nth-of-type(3):active { background: rgba(195, 0, 0, 0.5) !important; }

@media(max-width:575px)
{
    .page-template-instructions #base-navigation-container
    {
        margin-left:0;
        margin-right:0;
        padding: 0 0.625rem;
    }
    .page-template-instructions #base-navigation-container > .base-navigation > .btn
    {
        width: 50%;
    }
}
/* STATEMENTS */

#statement { font-size: 1.8rem; line-height: 1.1; text-align: center; max-width: 18rem; margin: 1.4rem auto; opacity:0; transition: opacity 100ms ease-in; }
.page-template-statement #main { display: flex; flex-direction: column; justify-content: space-around; }

@media (min-width: 375px) {
    #statement { font-size: 2rem; margin: 3rem auto; }
}

/* RESULTS */

.page-template-results #results h1,
.page-template-explanation #main h1 { text-align: center; font-size: 1.8rem; line-height: 1.1; }

.page-template-results #results { margin: 3rem 0; }
.page-template-results #results h1 { max-width: 22rem; margin: 0 auto 3rem auto; }
.page-template-results #result-btns { border: 1px solid #FFF; width: 100%; max-width: 21rem; margin: 0 auto; }
.page-template-results #result-btns .btn { display: block; width: 100%; }
.page-template-results #result-btns .btn,
.page-template-results #result-btns .btn:not(:disabled):not(.disabled):active,
.page-template-results #result-btns .btn:not(:disabled):not(.disabled).active { color: #000; background: #CCC; background: linear-gradient(to bottom, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 2%, rgba(204,204,204,1) 4%, rgba(204,204,204,1) 100%); border-radius: 0; border: none; border-bottom: 1px solid #FFF; }
.page-template-results #result-btns > .btn:last-of-type,
.page-template-results #result-btns > .btn:last-of-type:not(:disabled):not(.disabled):active,
.page-template-results #result-btns > .btn:last-of-type:not(:disabled):not(.disabled).active { border-bottom-color: #CCC; }

.page-template-explanation #main h1 { margin: 40px 0; }
.page-template-explanation #main > p { max-width: 600px; margin: 0 auto;  }

/* REVIEW TRIGGERS */

.page-template-triggers #main { display: flex; flex-direction: column; justify-content: space-around; } 
#triggers { font-size: 1.8rem; line-height: 1.1; text-align: center; max-width: 18rem; margin: 1.4rem auto; opacity:0; transition: opacity 100ms ease-in; }
.page-template-triggers .trigger-num { display: inline-block; margin-bottom: 0.6rem; }
.page-template-triggers .response { display: inline-block; margin-top: 0.6rem; }

@media (min-width: 375px) {
    #triggers { font-size: 2rem; margin: 3rem auto; }
}

@media(max-width:499px)
{
    .bottom-btns.two-btns > .btn
    {
        width:50%;
        
    }
    .bottom-btns.two-btns > .btn:first-of-type,
    .bottom-btns.two-btns > .btn:first-of-type:not(:disabled):not(.disabled):active,
    .bottom-btns.two-btns > .btn:first-of-type:not(:disabled):not(.disabled).active { border-right-color: #CCC; }

    .bottom-btns.one-btn > .btn
    {
        width:100%;
        border-left: none;
        border-right: none;
    }
}