@font-face {
  font-family: "Cooper Hewitt Semibold";
  src: url("../fonts/CooperHewitt-Semibold.woff") format("woff"); }

@font-face {
  font-family: "Cooper Hewitt";
  src: url("../fonts/CooperHewitt-Book.woff") format("woff"); }

@font-face {
  font-family: "Cooper Hewitt Medium";
  src: url("../fonts/CooperHewitt-Medium.woff") format("woff"); }

@font-face {
  font-family: "Cooper Hewitt Heavy";
  src: url("../fonts/CooperHewitt-Heavy.woff") format("woff"); }

@font-face {
  font-family: "Cooper Hewitt Heavy Italic";
  src: url("../fonts/CooperHewitt-HeavyItalic.woff") format("woff"); }

body, html {
  font-family: "Cooper Hewitt Medium";
  color: #0b1717;
  background: none;
  -webkit-overflow-scrolling: touch; }

.thankYou {
  display: flex;
  width: 100vw;
  height: 100vh;
  -webkit-transition: ease-out 3s;
  -moz-transition: ease-out 3s;
  -o-transition: fade ease-out 3s;
  transition: fade ease-out 3s;
  transition-delay: 2s; }
  .thankYou .thankYouContainer {
    max-width: 500px;
    padding: 15px;
    background: #ffffff;
    border: 3px solid #f9d026;
    font-size: 14px; }

.bold {
  font-family: "Cooper Hewitt Heavy"; }

.center {
  text-align: center; }

.subtext {
  font-size: .75rem;
  font-style: italic;
  margin: 5px 0 0 0;
  color: #d3d3d3; }

p {
    font-family: "Cooper Hewitt Heavy";
    color:#05004d;
}  

h2 {
  font-family: "Cooper Hewitt Heavy";
  font-size: 3rem;
  line-height: 3.5rem;
  margin: 0;
  padding-bottom: 20px; 
  color:#fff;
}

@media (max-width: 767px) {
  h2 {
    font-size: 2rem;
    line-height: 2.3rem; } }

@media (max-width: 575px) {
  h2 {
    font-size: 1.5rem;
    line-height: 1.7rem; } }

h3 {
  font-family: "Cooper Hewitt Heavy";
  font-size: .9rem;
}

h3 a:link {
  color: #e3ffe6;
}

h3 a:hover {
  color: #477744;
}

h3 a:visited {
  color: #93b48c;
}

h4 {
  font-family: "Cooper Hewitt Heavy";
  color:#05004d;
  font-size: 2rem;
  margin-bottom: 0;
  line-height: 2.5rem; }

@media (max-width: 575px) {
  h4 {
    font-size: 1.25rem;
    line-height: 1.4rem; } }

.siteContainer {
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)), url(../img/cloud_BG.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  width: 100vw;
  min-height: 60vh;
  overflow: scroll;  
}

/*  background: url("../img/cloud_BG.jpg") no-repeat;
  display: flex;
  width: 100vw;
  min-height: 60vh;
    overflow: scroll;  
    */

@media (max-width: 575px) {
  .siteContainer {
    background: url("../img/cloud_BG.jpg") no-repeat;
    flex-direction: column; } }

.contactTriangle {
  margin-left: 5px;
  transition: .2s;
  display: inline-block; }

.contactTriangle.contactClicked {
  transform: rotate(180deg);
  transition: .2s; }

.rulesBG {
  background: url("../img/cloud_BG.jpg") repeat;
  display: flex;
  margin: 0px auto;
  width: 100%;
  min-height: 100%;
  overflow: visible;
    }

h6.rules-link a {
  color:white;
  size:14px;
  font-weight:bold; 
    }

.siteLeft {
  background: url("../img/cloud_BG.jpg") no-repeat;
  display: flex;
  position: fixed;
  flex-grow: 2;
  padding-top: 0;
  justify-content: center;
  left: 0;
  margin: 0px auto;
  flex-direction: column;
  width: 65%;
  min-height: 100%;
  overflow: scroll; }

  .siteLeftTemp {
    background: url("../img/cloud_BG.jpg") no-repeat;
    display: flex;
    position: fixed;
    flex-grow: 2;
    padding-top: 0;
    justify-content: center;
    left: 0;
    margin: 0px auto;
    flex-direction: column;
    width: 65%;
    min-height: 100%;
    overflow: scroll; }

.over {
  width: 100% !important;
  background-size: cover; }

@media (max-width: 575px) {
  .siteLeft {
    position: relative;
    width: 100%;
    overflow-x: hidden; } }

.siteLeftContainer {
  width: calc(100% - 40px);
  display: flex;
  margin: 0px auto;
  align-items: center;
  flex-direction: column;
  z-index: 2;
  height: 100%;
  padding-bottom: 20px;
  justify-content: center;
  overflow: scroll; 
  position: relative;
}

.sogLogo {
  display: flex;
  justify-content: center;
  margin: 0px auto;
  width: 80%;
  overflow: hidden;
  padding: 5% 0; }

.sogLogo img {
  width: 100%;
  height: 100%;
  max-width: 500px; }

.contestCopyMobile {
  width: calc(100% - 40px);
  text-align: left;
  justify-content: center;
  margin: 0px auto;
  display: block;
  color: #00594a; }

@media only screen and (min-width: 576px) {
  .contestCopyMobile {
    display: none; } }

.contestCopyMobile h4 {
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.8rem; }

.contestCopy {
  color: #00594a;
  width: 80%;
  text-align: center;
  justify-content: center;
  margin: 0px auto;
  display: block;
  height: 100%; }
  @media (max-width: 575px) {
  .contestCopy h4 {
    font-size: 1.5rem;
    line-height: 1.8rem; }
    .contestCopy {
      display: none; } }

   /* .contestCopy {
      display: none; } } */

@media only screen and (max-height: 800px) {
  .contestCopy div p {
    font-size: 13px;
    line-height: 15px; } }

.siteContainer {flex-wrap:wrap;}
.siteLeft {position: relative; background-repeat:repeat; flex-grow:unset;margin:0px;}
.logoDesktop{height:auto;}
.contestCopy {height:auto;}

.siteRight {
  width: 35%;
  height:100%;
  box-sizing:border-box;
  overflow:scroll;
  display: flex;
  position:absolute;
  right: 0;
  color: #edfff3;
  margin: 0px auto;
  background:#05004d;
  border-left: 5px solid #0b1717; }

@media (max-width: 575px) {
  .siteRight {
    border-left: 0px;
    border-top: 3px solid hsl(235, 51%, 29%);
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; } }

@media (max-width: 575px) {
  .siteRight.click {
    min-height: 100%;
    transition: .5s;
    overflow: auto;
    top: 0;
    z-index: 10; } }

.landingButtons {
  flex-wrap: wrap; 
text-align:center;
}

@media (max-width: 575px) {
  .landingButtons {
    flex-wrap: nowrap; 
    justify-content: center;
  
  } }

.landingButtonsHeader {
  width: 100%;
  padding-top: 40px; }

@media (max-width: 575px) {
  .landingButtonsHeader {
    padding-top: 0px;
    text-align: center; } }

.button {
  text-decoration: none;
  border: 3px solid #0b1717;
  padding: 10px 15px 8px 15px;
  font-family: "Cooper Hewitt Medium";
  text-align: center;
  display: flex;
  flex-flow: wrap;
  border-radius: 50px;
  background: #0b1717;
  color: #90cfdf;
  margin: 10px 0;
  justify-content: center;
  font-size: 1rem;
  width: 160px;
  box-sizing: border-box; }

.button-white {
  background: #fff;
  color: #0b1717;
  text-decoration: none;
  border: 3px solid #fff;
  padding: 10px 15px 8px 15px;
  font-family: "Cooper Hewitt Medium";
  text-align: center;
  display: flex;
  flex-flow: wrap;
  border-radius: 50px;
  margin: 10px 0;
  justify-content: center;
  font-size: 1.5rem;
  box-sizing: border-box; 
}

.button-white:hover {
  background: #fff;
  color: #002159;
  transition: .3s; }

@media (max-width: 575px) {
  .button {
    font-size: .75rem;
    display: flex;
    width: 50%;
    margin: 0px auto; } }

.button1 {
  margin-right: 20px; }

.button:hover {
  background: #0a1a30;
  color: #ffffff;
  transition: .3s; }

.button1.active, .button2.active {
  background: #0f1c38;
  color:#ffffff;
  transition: .3s; }

.button.small1, .button.small2 {
  font-size: .75rem;
  border: 1px solid #0b1717;
  margin: 5px 0;
  align-self: flex-start;
  display: flex;
  width: max-content; }

.button.small1.clicked, .button.small2.clicked {
  background: #f9d026;
  color: #0b1717;
  transition: .3s; }

.socialIcons {
  display: flex;
  align-items: center;
  height: 35px; }

.socialIcons img {
  width: 35px;
  cursor: pointer;
  height: 35px;
  padding-right: 12px; }

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  cursor: pointer;
  margin: 0px auto;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  background: none;
  padding: 10px 10px 8px 10px;
  display: flex;
  justify-content: center;
  border: 2px solid #1e1e1e;
  font-family: "Cooper Hewitt Semibold";
  border-radius: 50px;
  margin: 10px auto;
  color: #1e1e1e; }

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.more, .accordion:hover {
  background: none;
  color: #1e1e1e; }

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: visible;
  transition: max-height 0.2s ease-out; }

.siteRightContainer {
  width: 100%;
  margin: 20px auto;
  padding: 150px 20px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  justify-content: center; }

@media (max-width: 575px) {
  .siteRightContainer {
    justify-content: flex-start;
    margin-bottom: 10px;
    min-height: 100%; } }

.formsContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: 0;
  margin: 0px auto; }

@media (max-width: 575px) {
  .formsContainer {
    padding: 0; } }

.form1Container, .form2Container {
  display: none; }

form {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0px auto; }

label {
  padding: 2rem 0 5px 0;
  font-family: "Cooper Hewitt Semibold";
  font-size: 1rem;
  line-height: 1; }

input {
  background: none;
  border: none;
  border-bottom: 1px solid #e7efe3;
  color: #fff; }

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #95bcc7;
  opacity: 1;
  /* Firefox */ }

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #95b7c7; }

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #95adc7; }

textarea {
  background: none;
  border: 1px solid #e7efe3;
  padding: 5px;
  color: #fff; }

select {
  background: none;
  border: 1px solid #e7efe3;
  color: #fff; 
  padding:10px;}

  @media (max-width: 775px) {
    select {
      color: rgb(33, 47, 78); }
    }

.divider {
  margin: 5px 0 0 0; }

.divider h5 {
  color: #0b1717;
  font-size: 1.5rem;
  font-family: "Cooper Hewitt Heavy";
  margin-bottom: 0px;
  line-height: 1; }

.dividerLine {
  width: 100%;
  height: 1px;
  background: #0b1717; }

.submit {
  background: none;
  color: #f9d026;
  border: 2px solid #f9d026;
  padding: 10px 5px 7px 5px;
  margin: 15px 0;
  border-radius: 50px;
  margin: 10px 0; }

.submit:hover {
  background: none;
  color: #1e1e1e;
  background: #f9d026;
  transition: .3s; }

/* --- RESPONSIVE VIDEO --- */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16/9 ratio */
  padding-top: 30px;
  /* IE6 workaround*/
  height: 0;
  overflow: hidden; }

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100; }

@media (max-width: 575px) {
  .logoDesktop {
    display: none; } }

.logoMobile {
  padding: 0 0 20px 0; }
  @media (min-width: 576px) {
    .logoMobile {
      display: none; } }

#thankYou {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  z-index: 10000000;
  width: 100vw;
  padding: 10px 10px 10px 20px;
  background: #f9d026;
  box-shadow: 2px 2px 2px rgba(30, 30, 30, 0.5); }
  #thankYou img {
    max-width: 350px;
    padding: 0;
    width: 90%;
    object-fit: contain; }
  #thankYou h4 {
    line-height: 1;
    margin: 0;
    text-align: center;
    font-size: 1.5rem; }
  #thankYou .close {
    color: #1e1e1e;
    position: absolute;
    top: 15px;
    right: 15px; }

/* --- This isn't needed, but helps demonstrate the "responsiveness" --- */
.wrapper {
  width: 90%;
  margin: 0 auto;
  max-width: 500px; }

  .imageArt {
    background: url("") no-repeat;
    display: flex;
    margin: 0px auto;
    flex-direction: column;
    width: 80%;
    justify-content: space-between;
 }
  
  @media (max-width: 575px) {
    .imageArt {
      position: relative;
      width: 50%;
 } }

.footer {
  border-top: 1px solid #4b4b4b;
  background: #0b1717;
  position: relative;
  bottom: 0;
  width: calc(100% - 40px);
  padding: 20px;
  margin: 0px auto;
  color: #f9d026;
  display: flex;
}

fieldset {
  background:none;
  position: relative;
  display: inline-block;
  padding: 5px;
}

legend {
  padding: 5px 10px;
}

.footer .socialTitle {
  color: #ffffff;
  font-size: 1rem;
  font-family: "Cooper Hewitt Medium";
  text-decoration: none;
  padding-left: 8px;
  display: flex;
  align-items: center; }

@media (max-width: 767px) {
  .footer .socialTitle {
    padding: 15px 0 0 0; } }

@media (max-width: 767px) {
  .footer {
    flex-direction: column;
    justify-content: center; } }

@media (max-width: 575px) {
  .footer {
    display: none; } }

    select {
      appearance: none;
    }

    fieldset {
      background:none;
      position: relative;
      display: inline-block;
      padding: 5px;
    }

    option {
      color:#0a1a30;
    }