/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/

@import url("../twentyfourteen/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

/* CUSTOM FONTS */

@font-face {
font-family: 'Neusa-ExtraBold';
src: url('http://seattleopera.adagetechnologies.com/fonts/Neusa-ExtraBold.eot');
src: url('http://seattleopera.adagetechnologies.com/fonts/Neusa-ExtraBold.eot?#iefix') format('embedded-opentype'), url('http://seattleopera.adagetechnologies.com/fonts/Neusa-ExtraBold.woff') format('woff'), url('http://seattleopera.adagetechnologies.com/fonts/Neusa-ExtraBold.ttf') format('truetype'), url('http://seattleopera.adagetechnologies.com/fonts/Neusa-ExtraBold.svg#Neusa-ExtraBold') format('svg');
font-weight: 800;
font-style: normal;
font-stretch: normal;
unicode-range: U+0020-25CA;
}

@font-face {
font-family: 'RionaSans-Bold';
src: url('http://seattleopera.adagetechnologies.com/fonts/2D36AC_1_0.eot');
src: url('http://seattleopera.adagetechnologies.com/fonts/2D36AC_1_0.eot?#iefix') format('embedded-opentype'), url('http://seattleopera.adagetechnologies.com/fonts/2D36AC_1_0.woff2') format('woff2'), url('http://seattleopera.adagetechnologies.com/fonts/2D36AC_1_0.woff') format('woff'), url('http://seattleopera.adagetechnologies.com/fonts/2D36AC_1_0.ttf') format('truetype');
}


@font-face {
font-family: 'RionaSans-Italic';
src: url('http://seattleopera.adagetechnologies.com/fonts/2D36AC_2_0.eot');
src: url('http://seattleopera.adagetechnologies.com/fonts/2D36AC_2_0.eot?#iefix') format('embedded-opentype'), url('http://seattleopera.adagetechnologies.com/fonts/2D36AC_2_0.woff2') format('woff2'), url('http://seattleopera.adagetechnologies.com/fonts/2D36AC_2_0.woff') format('woff'), url('http://seattleopera.adagetechnologies.com/fonts/2D36AC_2_0.ttf') format('truetype');
}


@font-face {
font-family: 'RionaSans-Regular';
src: url('http://seattleopera.adagetechnologies.com/fonts/2D36AC_3_0.eot');
src: url('http://seattleopera.adagetechnologies.com/fonts/2D36AC_3_0.eot?#iefix') format('embedded-opentype'), url('http://seattleopera.adagetechnologies.com/fonts/2D36AC_3_0.woff2') format('woff2'), url('http://seattleopera.adagetechnologies.com/fonts/2D36AC_3_0.woff') format('woff'), 	url('http://seattleopera.adagetechnologies.com/fonts/2D36AC_3_0.ttf') format('truetype');
}

/** STYLES **/

#secondary { background: #bc7f55; }
.site:before, .site-header { display:none; }
.site-content { margin-left: 0; }
body, .site { background: transparent; font-family: 'RionaSans-Regular', sans-serif;}
.content-area, .site-main { padding-top: 0 !important; margin-top: 0 !important;}

.quiz { width: 100%; max-width:1180px; margin: 0; color:#2d2c31; font-size:16px;}
.quiz h1 { font-size: 4.9em; margin:0 0 .4464em 0; color:#bc7f55; font-family: 'Neusa-ExtraBold', sans-serif; text-transform:uppercase; line-height:1em; letter-spacing:.01em;}
.quiz h4{ font-size:16px; }

.questions{with:100%; max-width: 660px;}

.answer { background: #FFF; border: solid 1px #2d2c31; cursor: pointer;}

.answer.disabled { cursor: default; background-color: #FFF; opacity: .7;}
.answer.disabled:hover { background: #eaff00; border:1px solid #eaff00; }

.answer.selected { background-color: #23cec8; border:1px solid #23cec8; color:#FFF; }
.answer.selected:hover { background-color: #23cec8; border:1px solid #23cec8;}
.answer.selected i { color: #FFF;}

.answer i { margin-right: .5em; color: #2d2c31; }
.answer:hover { background: #eaff00; border:1px solid #eaff00;}

.answer.grid { width: 30%; display:inline-block; vertical-align: top; text-align: center; margin-right: 4%; margin-bottom: 1em; margin-top: 1em;}
.answer.grid img { max-width: 90%; margin-top: 10px;}
.answer.grid:nth-child(3n+3) { margin-right: 0;}
.answer.grid:nth-child(1n+4) {margin-top: auto;}
.answer.grid h4 { margin: .5em;}

.answer.list { margin: 1em auto;}
.answer.list h4 { margin: .3em 1em; line-height: 2em;}

.question { margin-top: 2em; }
.question h2 { padding-top: 1em; font-family: 'Neusa-ExtraBold', sans-serif; text-transform:uppercase; line-height:1em; letter-spacing:.01em; font-size:1.8em; margin-bottom:.4545em;}
.question:first-child{margin-top:0;}
.question:first-child h2{margin-top:0; padding-top:0;}
.question_image { text-align: center; }

.result {border: solid 3px #181a19;  padding: 30px; clear: both; margin-bottom: 1em; position: relative; }
.result img { float: left; padding-right: 1em;}
.result h2 { clear: none; margin-top: 0; font-family: 'Neusa-ExtraBold', sans-serif; text-transform:uppercase; line-height:1em; letter-spacing:.01em; font-size:1.8em; margin-bottom:.4545em;}

.result .share { text-align: right; position: absolute; top: 30px; right: 30px; }
.result .share i { cursor: pointer; background-color:#23cec8; font-size:1.15em; margin:0 10px 0 0; color:#fff; width:30px; height:30px; border-radius:50%; text-align:center; padding-top:7px; box-sizing:border-box;}
.result .share i:hover{background-color:#181a19;}
.result .share i.fa-twitter{margin-right:0;}

.right { text-align: right; }

a, a:hover { color: #23cec8;}
a:hover { text-decoration:underline;}

@media screen and (max-width:770px){
.answer.grid{width: 31%; margin-right:2%;margin-bottom:.5em;}

.result { padding: 23px; }
.result .content{width:80%;}
.result .share {top: 23px; right: 23px; }
}

@media screen and (max-width:500px){
.quiz h4{font-size:12px;}

.question, .question:first-child { margin-top: 1em; }
.question h2 { padding-top:0; margin-bottom:.15em; }

.answer.grid img {margin-top: 5px;}

.result img { float: none; margin-bottom:23px;}
.result .content{width:100%;}
}