.page-vocabbowl button.signup, .page-vocabbowl .button.signup { text-decoration: none; display: inline-block; text-align: center; background-color: #4db538; color: white; font-size: 1em; font-weight: normal; padding: 0 1em; line-height: 2.5em; border: none; height: auto; width: auto; background-image: none; margin: 1em 0; } .page-vocabbowl header { display: block; height: 50vh; } .page-vocabbowl h1 { font-size: 3.5em; font-weight: 300; margin: 1em 0 0 0; } .page-vocabbowl h2 { font-size: 1.8em; font-weight: 300; margin: 1.5em 0 .25em 0; } .page-vocabbowl h3 { font-size: 1.3em; font-weight: 300; margin: -.25em 0 .25em 0; } #map-canvas { top: 0; left: 0; height: 100%; position: absolute; width: 100%; } .page-vocabbowl > header { background-color: #3c3f44; ; position: relative; border-bottom: 1px solid #eee; -webkit-user-select: none; height: 65vh; } .page-vocabbowl > header > .wrapper { position: absolute; bottom: 0; width: 100%; pointer-events: none; z-index: 1; padding-top: 1.8em; padding-bottom: 1.8em; color: white; text-shadow: 0 0 5px black; /* background: rgba(0, 0, 0, 0.2); */ } .page-vocabbowl > header h1 { margin: 0; font-size: 3em; } .page-vocabbowl > header h2 { font-size: 1.5em; margin: 0 0 -.25em 0; } .page-vocabbowl blockquote { margin: 1em 2.5% 1em 2.5%; width: 45%; float: left; line-height: 175%; font-weight: 300; } .page-vocabbowl blockquote cite { display: block; margin-left: 20px; font-size: .9em; } .page-vocabbowl .content { padding: 0 0 2em 0; } .page-vocabbowl button.getinvolved { pointer-events: all; } .page-vocabbowl p { margin: 0 0 1em 0; line-height: 175%; font-size: .9em; } .page-vocabbowl aside { margin-top: 3em; } aside.leaderboard h3 { text-transform: none; font-size: 1.1em; } aside.leaderboard h3 a { color: inherit; } aside.leaderboard a.more { font-size: .8em; margin-top: .25em; text-decoration: none; display: block; clear: both; float: right; } aside.leaderboard a.more:hover { text-decoration: underline; } section.details h3 { margin-top: 1.5em; } @media only screen and (max-width: 760px) { .page-vocabbowl aside { float: none; width: auto; margin-right: 0; margin-left: 0; } } .page-vocabbowl > header button.green { position: absolute; right: 20px; top: 50%; margin-top: -.75em; line-height: 2.5em; font-size: 1.2em; box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.28); } .page-vocabbowl > header .limited-width { position: relative; } .exploremore { text-align: center; } .exploremore .button { font-weight: 300; line-height: 2.5em; background-color: #bdbdbd; } /* form */ form.profile { max-width: 500px; margin: 2em 0 2em 0; } .recap { margin-bottom: 3em; } .recap h3 { margin-bottom: 1em; border-bottom: 1px solid #eee; } form.profile select.prefix, form.profile .gradelevel { display: none; } form.profile select, form.profile input { padding-top: .5em; padding-bottom: .5em; font-size: 14px; } form.profile.student .gradelevel { display: inline-block; } form.profile .actions { margin-left: 0; } form.profile .country select, form.profile .field.school input { width: 100%; } form.profile input, form.profile select { height: 2.2em; font-size: 1em; } form.profile .field { margin-left: 0px; } form.profile.educator select.prefix { display: inline-block; } form.profile .field.school { display: none; } form.profile.schoolfinder-enabled .field.school { display: block; } form.profile .sorry { display: none; } form.profile .actions { display: none; } form.profile.schoolfinder-enabled .actions { display: block; } form.profile.with-sorry .sorry { display: block; } form.profile .field.iama select, form.profile .field.iama .value { width: auto; } form.profile .label { padding-right: 10px; position: static; text-align: left; padding-bottom: 5px; } /* bowl news */ .page-vocabbowl .story { display: block; border-bottom: none; max-width: 48%; } .page-vocabbowl .story .topics { display: none; } .page-vocabbowl .story .stars { display: none; } .page-vocabbowl .story .subtitle > a{ text-decoration: none; } .page-vocabbowl .articlelist { display: flex; flex-wrap:wrap; justify-content: space-between; } .page-vocabbowl .articlelist .story .abstract { font-size: .9em; font-weight: 300; } .page-vocabbowl .bowlnews { margin-top: 2em; clear: both; overflow: hidden; } .page-vocabbowl .bowlnews > h3 { margin-top: 1em; padding-bottom: .25em; border-bottom: 1px solid #eee; } @media only screen and (max-width: 760px) { .page-vocabbowl .story { max-width: 100%; } form.profile { margin-left: auto; margin-right: auto; } form.profile .field { margin-left: 0px; } form.profile .actions { margin-left: 0px; } form.profile .actions button { width: 100%; } } /* instagram feed */ .instagram h3 { border-bottom: 1px solid #eee; margin-bottom: 1em; margin-top: 1em; padding-bottom: .25em; } #instafeed { display: flex; overflow: hidden; flex-wrap: wrap; justify-content: space-between } #instafeed a { width: 23%; display: block; font-size: 13px; line-height: 150%; text-decoration: none; color: inherit; font-weight: 300; margin-bottom: 2em; background-color: #f5f5f5; outline: none; } #instafeed a > figure > div { width: 100%; padding-top: 100%; border: none; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } #instafeed figure { padding: 0; margin: 0; } #instafeed figcaption { padding: 15px; } @media only screen and (max-width: 760px) { #instafeed a { width: 48.5%; } } @media only screen and (max-width: 640px) { #instafeed a { width: 100%; } } @media only screen and (max-width: 790px) { .page-vocabbowl > header { font-size: 90%; } } @media only screen and (max-width: 720px) { .page-vocabbowl > header { font-size: 80%; } } @media only screen and (max-width: 640px) { .page-vocabbowl > header > .wrapper { padding-bottom: 70px; text-align: center; } .page-vocabbowl > header { font-size: 60%; } .page-vocabbowl > header > .wrapper button.getinvolved { left: 10%; top: auto; right: auto; width: 80%; bottom: -50px; margin: 0; font-size: 16px; } }