@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Oswald:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap');

body {
font-family: 'Roboto', sans-serif;
/* background: url(/classof2020/img/2020/Seniors.png); */
background: url(/classof2020/img/2020/bg.png);
display: block;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: contain;
background-repeat: no-repeat;
/* background-size: cover; */
/* background-attachment: fixed; */
}
/* .grads {
background: url(/classof2020/img/2020/grads.png);
background-repeat: no-repeat;
background-size: 43%;
background-attachment: fixed;
width: 40%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0em 0em;
z-index: 0;
} */

.news {
width: 160px
}

.news-scroll a {
text-decoration: none
}

.dot {
height: 6px;
width: 6px;
margin-left: 3px;
margin-right: 3px;
margin-top: 2px !important;
background-color: rgb(207, 23, 23);
border-radius: 50%;
display: inline-block
}

header {
position: relative;
background-color: black;
height: 75vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}

header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

header .container {
position: relative;
z-index: 2;
}

header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
h1.display-3 {
font-family: 'Oswald', sans-serif;
}
a p.lead.mb-0 {
color: #ffce44;
text-transform: uppercase;
}
footer.py-5 {
background: #333;
}
.drive-thru-text-box0 {
border: solid #fec139 .25em;
border-top: none;
padding: 1em 1em 0em 1em;
margin: 0em auto 2em auto;
}
.drive-thru-text-box {
border: solid #fec139 .25em;
border-top: none;
padding: 3em;
display: block;
margin: 0em auto 1em auto;
}
h4 {
color: #FFF;
font-size: 1.1em;
margin: 1em auto;
text-align: center;
}
.border-left  {
border-bottom: solid #fec139 .25em;
margin: 0;
width: 30%;
float: left;
}
.border-right  {
border-bottom: solid #fec139 .25em;
margin: 0;
width: 30%;
float: right;
}
.drive-thru-text-box p {
color: #fff;
text-align: center;
font-size: 1.2em;
}
#drivethru {
background: #020202;
background-attachment: fixed;
background-size: cover;
padding: 5%;
}
#drivethru img {
width: 100%;
}
.drivethru-container, .container {
/* max-width: 1000px; */
}
.drivethru-container {
background:#000;
padding: 4em 0;
}
#drivethru img {
width: 100%;
}
.yt-box {
width: 100%;
display: block;
margin: auto;
top: 0;
right: 0;
padding: 3em;
}



.clear-btn-square {
border: 2px solid #ffce44;
/* font-family: "BebasNeue"; */
font-size: 22px;
background-color: transparent;
margin-bottom: 3px;
padding: 8px 17px 4px 17px;
color: #00AEEF;
color: #ffce44;
}

.clear-btn-square:hover {
background-color: #ffce44;
color: white;
}
@media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
display: none;
}
}
.top-btns a {
color: #ffce44;
}
.btn-section {
margin: auto;
width: 80%;
}
.ytp-embed:not(.ad-showing) .ytp-title-text {
padding-top: 21px;
display: none;
}
blockquote strong {
font-size: 1.8em;
/* font-family: 'Alex Brush', cursive; */
}
blockquote {
font-size: 1em;
background: #ffffff;
padding: 2em 4em 3em;
text-align: left;
border: solid #b3b3b3;
border-radius: .25em;
box-shadow: 0.5em 0.5em 0.5em rgba(0,0,0,.2);
-webkit-box-shadow: 0.5em 0.5em 0.5em rgba(0,0,0,.2);
}
.btns p {
font-size: 1.6em;
text-shadow: 4px 4px 0px rgba(0,0,0,0.2);
color: #FFF;
font-family: 'Oswald', sans-serif;
text-align: left;
display: inline-block;
margin: 0 1em 0 0;
}
.quote-left {
font-size: 14em;
font-family: 'Alex Brush', cursive;
margin: -1.7em -3.37em;
position: absolute;
color: #212529;
display: none;
}
.quote-right {
font-size: 14em;
font-family: 'Alex Brush', cursive;
display: block;
margin: .1em -.2em;
position: absolute;
color: #ffc107;
}
.grad-img-fixed {
background: url(/classof2020/img/2020/grads.png);
background-repeat: no-repeat;
background-size: contain;
background-size: 59%;
background-attachment: fixed;
}
h1.item, .item h1 {
font-size: 3em;
color: #FFF;
text-align: center;
background: #CCC;
padding: 3.5em 2em;
margin: .5em 0;
}
h2, .h2 {
/* font-size: 1.5em; */
}
.row0 {
}
.row0 p {
color: #FFF;
font-size: 1.2em;
text-align: left;
}
.row1 {
background: #10254c;
background: #161d29;
background: #ffffff;
margin-top: 0em;
padding: 0;
}
.row2 {
background: #21120c;
padding: 1em 0;
}
#quotes {
margin-top: 11em;
}
.rowquotes {
padding: 2em;
background: #353a44;
/* background: url(http://www.scsk12.org/classof2020/img/2020/g2.jpg); */
background: url(http://www.scsk12.org/classof2020/img/2020/Seniors2.jpg);
background-size: contain;
background-attachment: fixed;
min-height: 60em;
}
.rowquotes h2 {
/* text-align: center !important;
color: #fff;
background: #333;
background: #bd2130;
padding: .7em .3em;
margin: -3em auto;
position: absolute;
display: inline-block;
width: 100%;
left: 0;
right: 0;
font-size: 2em !important;
text-transform: uppercase;
text-align: center !important;
color: #fff; */
padding: .7em .3em;
margin: .5em auto;
text-shadow: 4px 4px 0px rgba(0,0,0,0.2);
position: absolute;
display: inline-block;
width: 100%;
left: 0;
right: 0;
font-size: 2.7em !important;
text-transform: uppercase;
text-align: center;
color: #FFF;
}
.last-row {
/* background: url(http://www.scsk12.org/graduation/img/grad-bg.jpg); */
/* background-attachment: fixed; */
background-size: cover;
position: absolute;
width: 100%;
height: 100em;
/* opacity: .5; */
}
.dark-row {
/* background: rgba(66, 112, 186, .5); */
position: absolute;
width: 100%;
height: 100em;
}
iframe {
border: none;
display: block;
padding: 0;
margin: 0;
width: 100%;
}
.val-sals-container {
background: rgba(255, 255, 255, 1);
background: rgb(49, 56, 105);
background: rgb(15, 15, 16);
padding: 3em 5em 12em 5em;
margin-bottom: 0em;
}
.val-sals-container h2 {
text-align: center !important;
color: #fff;
/* background: #313869; */
padding: 1em 0 0 0;
/* margin: -3em auto; */
/* position: absolute; */
width: 100%;
left: 0;
right: 0;
font-size: 2.5em !important;
text-transform: uppercase;
padding-bottom: 5em;
}

.val-sals-container p {
font-size: 1.45em;
text-align: center;
padding-bottom: 2em;
padding-top: 1em;
color: #FFF;
}
.hs-container {
background: #adadad;
background: #152031;
background: #dcdcdc;
padding-top: 4em;
/* background: url(/classof2020/img/2020/grads.png); */
background-size: 50%;
background-repeat: no-repeat;
padding-top: 4em;
background-position: left;
background-position-y: 88em;
}
.hs-container p {
font-size: 1.2em;
color: #2d2b2b;
padding-bottom: 2em;
}
.hs-container h2 {
text-align: center !important;
/* text-shadow: 4px 4px 0px rgba(0,0,0,0.2); */
color: #3e3939;
/* background: #1d3050; */
padding: .7em .3em;
/* margin: -6em auto; */
/* position: absolute; */
width: 100%;
left: 0;
right: 0;
font-size: 2.5em !important;
text-transform: uppercase;
}

.hs-container h3 {
font-size: 2.4rem;
padding: 3em 0 1em 0;
color: #ffffff;
text-align: center;
/* font-family: 'Oswald', sans-serif; */
text-transform: uppercase;
margin: 0;
}

.b1 div {
margin: 10%;
}
.b1 p {
font-size: 1.4em;
text-align: left;
}

.col.b1 div {
padding: 5em 5em 5em 14em;
}
.col.b1 p {
color: #FFF;
font-size: 1.2em;
text-align: left;
}
.col.b1 h2 {
font-size: 1.8em;
}
.col.b2 {
padding-right: 2em;
/* background: #0e0e0e;
background: #244889; */
}
.b2 video {
padding-bottom: 5em;
}
.video-container h2 {
text-align: center;
text-transform: uppercase;
color: #244889;
}
.site-header {
background-color: rgb(36, 72, 137);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-bottom: solid #dcdcdc .12em;
border: none;
}
.coming-soon {
display: block;
width: 50%;
margin: 0em auto 20em auto;
z-index: 9;
}

.row.btns {
background: #2d3748;
padding: 2em 0;
}
.top-btns img {
width: 5em;
float: left;
}

.tops-btns button {
margin-top: 0;
margin-bottom: 0;
font-size: 1.4em;
font-weight: bold;
background: #bd2130;
display: inline;
padding: .3em .5em;
color: #FFF;
border: none;
border-radius: .2em;
transition: .2s;
}
.tops-btns button:hover {
background:#333;
}
.b2 {
background: black;
}

.b2 div:nth-child(1){
/* padding: 1em; */
}
.margin0 {
margin: 0;
}
.padding-0, .padding0 {
padding: 0;
}
h2.blue, h2.red {
background: #FFF;
display: inline-block;
padding: .25em .5em;
font-size: 1.6em;
}
h2 {
font-family: 'Oswald', sans-serif;
}
h3, .h3 {
font-size: 1.75rem;
color: #464646;
text-align: center;
/* font-family: 'Oswald', sans-serif; */
text-transform: uppercase;
margin: 1em auto;
}
.btn-outline-secondary {
color: #ffffff;
background: #9d2d33;
border-color: #6c757d;
}
.red {
color:#9d2d33 !important;
}
h2.red {
color: #ffffff !important;
background: #9d2d33 !important;
}
.blue {
color:#244889 !important;
}
.gold {
color: #ffb102 !important;
}
.logos .col-sm {
background: #FFF;
border: solid #eaeaea .2em;
height: 10em;
border-radius: .4em;
padding: 1.5em;
margin: .3em;
}
.logos img {
margin: auto;
display: block;
cursor: pointer;
transition: .3s;
}
.logos img:hover {
transform: scale(1.1);
}
img.width {
width: 100%;
}
img.height {
height: 100%;
}
.container {
max-width: 960px;
}
.bg-light {
background-color: #ffffff !important;
}

.site-header {
background-color: rgba(0, 0, 0, .85);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
.site-header a {
color: #e8e8e8;
transition: ease-in-out color .15s;
font-size: 1.5em;
font-weight: bold;
margin: auto;
}
.site-header a:hover {
color: #fff;
text-decoration: none;
}
#quotes img {
width: 8em;
margin: 1em 2.7em;
border: solid #333;
background: #dce0ed;
}
.embed-responsive-16by9::before {
padding-top: 51%;
}

.p-b-5 {
/* padding-bottom: 5em; */
}
.b2 div {
padding: 5em 5em 5em 5em;
}

@media only screen and (max-width: 1750px) {
.grad-img-fixed {
background-size: 100%;
}
.b1 div {
padding: 3em 1em 3em 1em;
}
.b2 div {
padding: 4em 0em;
}
}
@media only screen and (max-width: 1300px) {

.coming-soon {
display: block;
width: 90%;
margin: 8em auto;
}
.grad-img-fixed {
background-size: 100%;
}
h2.blue, h2.red {
font-size: 1em;
}
.col.b1 p {
font-size: 1em;
padding: 2em;
}
h2 {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
}
.row1 {
background: #244889;
margin-top: 5em;
}
}


@media only screen and (max-width: 700px) {
.btn-section {
margin: auto;
width: 94%;
}
.btns p {
font-size: 1.6em;
text-shadow: 4px 4px 0px rgba(0,0,0,0.2);
color: #FFF;
font-family: 'Oswald', sans-serif;
text-align: center;
display: inline-block;
margin: 0 1em 1em 0;
width: 80%;
}
.hs-container h2 {
font-size: 1.7em !important;
}
.val-sals-container {
padding: 3em;
margin-bottom: 0em;
}
blockquote {
padding: 1em;
}
.top-btns img {
width: 3em;
padding-left: 1em;
padding-top: 2em;
}
.b1 div {
padding: 1em .5em;
color: #FFF;
font-size: 1.1em;
text-align: left;
}
.b2 div {
padding: 1em;
}
.b2 video {
padding-bottom: 1em;
}
.rowquotes h2 {
font-size: 1.7em;
}
#quotes img {
width: 8em;
margin: 0em 0.7em;
border: solid #333;
background: #dce0ed;
}

.rowquotes h2 {
font-size: 1.5em !important;
}
.row1 {
background: #244889;
margin-top: 5em;
}
.mb-5, .my-5 {
margin-bottom: 0em !important;
}
.coming-soon {
display: block;
width: 80%;
margin: 4em auto;
}
.top-btns span {
border-bottom: solid;
display: block;
padding: .5em 0 1em 0;
}
.logos .col-sm {
margin: .5em 3em;
}
}