body, html {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}

/* universal styles */
h1 {
    margin: 2.5rem 0;
    text-transform: uppercase;
    font-family: 'Saira Stencil One', cursive;
    font-size: 4.6875rem;
}

h2 {
    margin: 1rem 0;
    font-family: 'Saira Stencil One', cursive;
    font-size: 2.8125rem;
}

h3 {
    font-size: 1.875rem;
    font-weight: bold;
}

h4 {
    font-size: 1.1rem;
    margin: 0;
}

ul {

}

.centered {
    text-align: center;
}

.wrapper {
    background-color: white;
    padding: 0.75rem 1.5rem;
    width: 90vw;
    max-width: 1092px;
    margin: 0 auto;
    font-size: 1.375rem;
    min-height: 100vh;
}
.page {

}

.row {
    margin: 5rem 0;
}

.row.menu-item {
    margin: 0;
}

.box-row {
    position: relative;
}

.box-row * {
    max-width: 100%;
}

.slider {
    background: rgb(64,0,247);
    background: linear-gradient(90deg, rgba(64,0,247,1) 0%, rgba(0,86,146,1) 16%, rgba(0,195,31,1) 33%, rgba(98,222,7,1) 50%, rgba(250,253,0,1) 67%, rgba(255,78,0,1) 84%, rgba(195,0,0,1) 100%);
    height: 2.25rem;
    margin: 20px 30px;
    position: relative;
}
.slider-value {
    width: 1px;
    height: 100%;
    position: absolute;
}

.table {
    padding: .5rem .5rem;
    border-bottom-width: 1px;
    border-collapse: collapse;
}

.table thead {
    vertical-align: bottom;
}

.table tbody {
    vertical-align: inherit;
}

.table th, .table td {
    padding: .5rem .5rem;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f2f2f2;
}

.accent-container {
    text-align: center;
}
.accent-container img {
    max-width: 100%;
}

.accent-right, .accent-left {
    display: inline-block;
    max-width: 100%;
}

.accent-right {
    padding: 1.5rem 1.5rem 1.5rem 0;
}

.accent-left {
    padding: 1.5rem 0 1.5rem 1.5rem;
}

.marginbox {
    margin: 1rem;
    padding: 1.35rem 0.4rem;
}

.infobox {
    font-size: 1.2rem;
    font-weight: bold;
    padding: 1.5rem 4rem;
}

.resourcebox {
    background-color: black;
    color: white;
    font-weight: bold;
    font-size: 1.25rem;
    padding: 1rem 1.25rem;
}

.resourcebox label { cursor: pointer; }

.navigation button {
    color: white;
    background-color: black;
    padding: 0.75rem 1rem;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
}
.navigation div:nth-child(1) {

}
.navigation div:nth-child(2) {
    text-align:center;
}
.navigation div:nth-child(3) {
    text-align:right;
}


.tooltip {
    display:inline-block;
    position:relative;
    border-bottom:1px dotted #666;
    text-align:left;
}

.tooltip .top {
    top: -1.125rem;
    left:50%;
    transform:translate(-50%, -100%);
    padding: 5px 20px;
    color:black;
    background-color:white;
    font-weight:normal;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 3px rgba(0,0,0,0.5);
    text-align: center;
    font-size: 0.85rem;
    max-width:none;
}


.tooltip .top i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip .top i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#EEEEEE;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

.tinytext {
    font-size: 0.7em;
}

.biggertext {
    font-size: 1.1em;
}

.goodbox {
    padding: 1.5rem;
    margin: 1rem auto;
    background: #D5F2EA;
}

.badbox {
    padding: 1.5rem;
    margin: 1rem auto;
    background: #FBE4E8;
}

.otherbox {
    padding: 1.5rem;
    margin: 1rem auto;
    background: #D5E9FA;
}

.plainbox {
    background: #F7F5F9;
}

.plainbox > div {
    padding: 1.5rem;
}

.yellowbox {
    background: #FFCF5C;
}

.yellowbox > div {
    padding: 1.5rem;
}

.borderbox {
    border: 2px solid;
}

.borderbox > div {
    padding: 1.5rem;
}

.plainborderbox {
    border: 2px solid black;
}

.plainborderbox > div {
    padding: 1.5rem;
}

.selectedbox {
    border: 2px solid #fff;
    position: relative;
}


.good {
    color: #00C48C;
}
.bad {
    color: #FF647C;
}

.halfbox {
    width: 50%;
}

.menu-item {
    border: 1px solid black;
}
.menu-item > div {
    width: 49%;
}

.menu-item img:nth-child(1) {
    display: block;
    border-right: 1px solid black;
}

.menu-item p { margin: 0; padding: 1.5rem; text-align:center;}

.oval-thought {
    position:relative;
    display:inline-block;
    padding:50px 40px;
    margin:1em auto 80px;
    text-align:center;
    color:#fff;
    background:#075698;
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
    background:-moz-linear-gradient(#2e88c4, #075698);
    background:-o-linear-gradient(#2e88c4, #075698);
    background:linear-gradient(#2e88c4, #075698);
    /*
    NOTES:
    -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4
    -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4
    Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
    */
    -webkit-border-top-left-radius:200px 180px;
    -webkit-border-top-right-radius:200px 180px;
    -webkit-border-bottom-right-radius:200px 180px;
    -webkit-border-bottom-left-radius:200px 180px;
    -moz-border-radius:200px / 180px;
    border-radius:200px / 180px;
}

.oval-thought p {
    font-size: 1.28rem;
    font-weight: bold;
    max-width: 20rem;
    margin: 0;
}

/* creates the larger circle */
.oval-thought:before {
    content:"";
    position:absolute;
    bottom:-20px;
    left:50px;
    width:30px;
    height:30px;
    /* css3 */
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
}

/* creates the smaller circle */
.oval-thought:after {
    content:"";
    position:absolute;
    bottom:-30px;
    left:30px;
    width:15px;
    height:15px;
    /* css3 */
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    border-radius:15px;
}

.oval-thought-right {
    position:relative;
    display:inline-block;
    padding:50px 40px;
    margin:1em auto 80px;
    text-align:center;
    color:#fff;
    background:#075698;
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
    background:-moz-linear-gradient(#2e88c4, #075698);
    background:-o-linear-gradient(#2e88c4, #075698);
    background:linear-gradient(#2e88c4, #075698);
    /*
    NOTES:
    -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4
    -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4
    Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
    */
    -webkit-border-top-left-radius:200px 180px;
    -webkit-border-top-right-radius:200px 180px;
    -webkit-border-bottom-right-radius:200px 180px;
    -webkit-border-bottom-left-radius:200px 180px;
    -moz-border-radius:200px / 180px;
    border-radius:200px / 180px;
}

.oval-thought-right p {
    font-size: 1.28rem;
    font-weight: bold;
    max-width: 20rem;
    margin: 0;
}

.oval-thought-right:before {
    content:"";
    position:absolute;
    bottom:-20px;
    right:50px;
    width:30px;
    height:30px;
    background:#075698;
    /* css3 */
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
}

/* creates the smaller circle */
.oval-thought-right:after {
    content:"";
    position:absolute;
    bottom:-30px;
    right:30px;
    width:15px;
    height:15px;
    background:#075698;
    /* css3 */
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    border-radius:15px;
}



.checkmark {
    position: absolute;
    display: inline-block;
    margin: auto;
    z-index: 99999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: none;
    font-size: 4em;
    font-weight: bolder;
    color: #FFCF5C;
    height: 120px;
    width: 70px;
}

.resource-section h3 {
    cursor:pointer;
    position:relative;
    border-bottom: 1px solid #999999;
}

.resource-section h3:after {
    content:'\25BC';
    position: absolute;
    right: 0;
}

.resource-section.active-slidedown h3:after {
    content: '\25B2' !important;
}

.resource-slidedown {
    display: none;
}

.active-slidedown .resource-slidedown {
    display: block !important;
}

/* intro specific styles */
#intro { background-color: #FFCF5C;}
#intro .accent-right {
    background: linear-gradient(90deg, white 30%, #FFCF5C 30%);
}
#intro .accent-left {
    background: linear-gradient(90deg, #FFCF5C 70%, white 70%);
}
#intro .infobox {
    background: #FFCF5C;
    color: white;
}
#intro .wrapper-filled {
    background: #FFCF5C;
}

/* menu specific styles */
#menu { background-color: #FFCF5C;}
#menu .accent-right {
    background: linear-gradient(90deg, white 30%, #FFCF5C 30%);
}
#menu .accent-left {
    background: linear-gradient(90deg, #FFCF5C 70%, white 70%);
}
#menu .infobox {
    background: #FFCF5C;
    color: white;
}
#menu .menu-item.regular, #menu .menu-item.dimmed {
    cursor:pointer;
}

#menu .menu-item > div:nth-child(1) {
    background: black;
    position: relative;
}
#menu .menu-item.regular:hover {
    border-width: 3px;
}
#menu .menu-item.regular:hover img:nth-child(1) {
    opacity:0.6;
}
#menu .menu-item.dimmed img:nth-child(1) {
    opacity: 0.4;
}
#menu .menu-item.regular:hover img:nth-child(2) {
    display:block;
}

#menu .menu-item.regular .checkmark, #menu .menu-item.disabled .checkmark {
    display: none;
}

#menu .menu-item.disabled {
    opacity: 0.4;
}

#menu .menu-item.disabled img {
    filter: grayscale(100%);
}

#menu .menu-item.regular {
    background: #FFCF5C;
    filter: drop-shadow(10px 10px 6px #aaa);
}
.menu-arrow {
    margin: auto;
    z-index: 99999;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    border: none;
}

/* sleep specific styles */
#sleep { background-color: #BE52F2;}
#sleep .accent-right {
    background: linear-gradient(90deg, white 30%, #BE52F2 30%);
}
#sleep .accent-left {
    background: linear-gradient(90deg, #BE52F2 70%, white 70%);
}
#sleep .infobox {
    background: #BE52F2;
    color: white;
}

/* work specific styles */
#work { background-color: #0084F4;}
#work .accent-right {
    background: linear-gradient(90deg, white 30%, #0084F4 30%);
}
#work .accent-left {
    background: linear-gradient(90deg, #0084F4 70%, white 70%);
}
#work .infobox {
    background: #0084F4;
    color: white;
}

/* identity specific styles */
#identity { background-color: #00C48C;}
#identity .accent-right {
    background: linear-gradient(90deg, white 30%, #00C48C 30%);
}
#identity .accent-left {
    background: linear-gradient(90deg, #00C48C 70%, white 70%);
}
#identity .infobox {
    border: 3px solid #00C48C;
}

#identity .oval-thought, #identity .oval-thought:before, #identity .oval-thought:after {
    background: #00C48C;
}

#identity .oval-thought-right, #identity .oval-thought-right:before, #identity .oval-thought-right:after {
    background: #00C48C;
}

/* stress specific styles */
#stress { background-color: #00C2CB;}
#stress .accent-right {
    background: linear-gradient(90deg, white 30%, #00C2CB 30%);
}
#stress .accent-left {
    background: linear-gradient(90deg, #00C2CB 70%, white 70%);
}
#stress .infobox {
    background: #00C2CB;
    color: white;
}

#stress .col-xs-3 img {
    max-width: 150px;
}

#stress .borderbox {
    border-color: #00C2CB;
}

#stress .selectedbox {
    background: #BFF0F2;
    border-color: #fff;
    outline: 5px solid #00C2CB;
}

/* alcohol-use specific styles */
#alcohol-use { background-color: #FFA26B;}
#alcohol-use .accent-right {
    background: linear-gradient(90deg, white 30%, #FFA26B 30%);
}
#alcohol-use .accent-left {
    background: linear-gradient(90deg, #FFA26B 70%, white 70%);
}
#alcohol-use .infobox {
    background: #FFA26B;
    color: white;
}

#alcohol-use .col-xs-3 img {
    max-width: 150px;
}

#alcohol-use .borderbox {
    border-color: #FFA26B
}

/* alcohol-expectancies specific styles */
#alcohol-expectancies { background-color: #FF647C;}
#alcohol-expectancies .accent-right {
    background: linear-gradient(90deg, white 30%, #FF647C 30%);
}
#alcohol-expectancies .accent-left {
    background: linear-gradient(90deg, #FF647C 70%, white 70%);
}
#alcohol-expectancies .infobox {
    background: #FF647C;
    color: white;
}

#alcohol-expectancies .col-xs-3 img {
    max-width: 150px;
}

#alcohol-expectancies .borderbox {
    border-color: #FF647C
}

#alcohol-expectancies .selectedbox {
    background: #FBE4E8;
    border-color: #fff;
    outline: 5px solid #ff93a3;
}

.afc-table td:last-child {
    text-align: right;
}

/* alcohol-tips specific styles */
#alcohol-tips { background-color: #7481E9;}
#alcohol-tips .accent-right {
    background: linear-gradient(90deg, white 30%, #7481E9 30%);
}
#alcohol-tips .accent-left {
    background: linear-gradient(90deg, #7481E9 70%, white 70%);
}
#alcohol-tips .infobox {
    background: #7481E9;
    color: white;
}

#alcohol-tips .col-xs-3 img {
    max-width: 150px;
}

#alcohol-tips .borderbox {
    border-color: #7481E9
}

#alcohol-tips .flip-front {
    background-color: #7481E9;
    color: white;
}

.flip-tile {
    height: 400px;
    width: 400px;
    perspective: 500px;
}

.flip-content {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);

    transition: transform 1s;
    transform-style: preserve-3d;
}

.flip-flipped {
    transform: rotateY( 180deg ) ;
    transition: transform 0.5s;
}

.flip-front, .flip-back {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center;
    backface-visibility: hidden;
}

.flip-back {
    background: #fff;
    color: black;
    font-size: 18px;
    transform: rotateY( 180deg );
}



/* resources specific styles */
#resources { background-color: #FFCF5C;}
#resources .accent-right {
    background: linear-gradient(90deg, white 30%, #FFCF5C 30%);
}
#resources .accent-left {
    background: linear-gradient(90deg, #FFCF5C 70%, white 70%);
}
#resources .infobox {
    background: #FFCF5C;
    color: white;
}

#resources .col-xs-3 img {
    max-width: 150px;
}

#resources .borderbox {
    border-color: #FFCF5C
}

#resources .resource-item {
    margin: 1.5rem 0;
}

#resources .resource-item p {
    margin: 0;
    font-style: italic;
}

#resources .resource-item a {
    color: black;
    font-weight: bold;
    font-style: normal;
}