/* Fonts */
@font-face { font-family: 'Gotham Bold'; src: url('fonts/Gotham-Bold.otf'); }
@font-face { font-family: 'Gotham Book'; src: url('fonts/Gotham-Book.otf'); }

/* Body */
html { height: 100%; }
body { width: 100%; height: 100%; margin: 0; padding: 0; }

/* Images */
/*img { width: 100%; max-width: 100%; max-height: 100%; }*/

/* Nav */
nav                   { background: transparent; box-shadow: none; border: none; }
nav .brand-logo       { font-weight: 500; font-size: 1.75rem; }
.brand-logo img       { border: 0; position: absolute; margin-top: 8px; margin-left: 2px; }
#logo1                { font-family: 'Gotham Book'; }
#logo2                { font-family: 'Gotham Bold'; }
#logo1, #logo2        { text-transform: uppercase; }
nav ul a, #learn-txt  { text-transform: uppercase; font-weight: 500; font-size: 1rem; }
nav ul li             { margin-left: 30px; }
nav ul li a i         { margin-right: 15px; }
#register-btn         { background: white; line-height: 40px; border-radius: 5px; width: 150px; text-align: center; margin-top: 1vh; transition: all .3s ease-out; }
#register-btn a       { color: rgb(0, 151, 167); }
#register-btn:hover a { background: none !important; }


/* Side Nav */
#side-nav     { background: #263238; }
#side-nav li  { margin-left: 0; border-bottom: 1px solid white; }
#side-nav  a  { color: white; text-transform: none; font-weight: 300; font-size: 1.25rem; }
#side-logo    { background: rgb(0, 151, 167); }
#side-logo a  { color: white; font-size: 1.5rem; }

/* Jumbotron */
#landing-jumbotron    { padding: 15px 50px; background: linear-gradient(rgba(38, 50, 56, 0.75), rgba(38, 50, 56, 0.35)), url(/images/mynah.jpg); background-position: 50% 20%; }
#landing-jumbotron h3 { margin: 0; font-weight: 100; text-transform: uppercase; }
#landing-jumbotron h5 { margin: 25px auto; font-weight: 300; font-style: italic; max-width: 800px; }
#jumbotron-text       { text-align: center; margin-top: 15vh; color: white; }
#learn-txt            { margin-top: 12vh; }
#learn-btn            { border: 2px solid white; width: 70px; padding: 20px; border-radius: 50%; margin: auto; transition: all .3s ease-out;}
#learn-btn i          { font-size: 24px; }
#learn-btn:hover      { background: white; color: rgb(0, 151, 167); cursor: pointer; }

/* Sponsors */
#sponsor-box            { background: rgb(0, 151, 167); margin-bottom: 0; }
#sponsor-box .container { margin-bottom: 5vh; }
#sponsor-text           { text-align: center; color: white; font-weight: bold; font-size: 1.35rem; margin-top: 8vh; }
.sponsor                { cursor: pointer; display: flex; align-items: center; justify-content: center; height: 200px; }
.sponsor img            { width: 85%; }

/* What Box */
#what-box    { background: #ECEFF1; margin: 0; padding-bottom: 6vh; padding-top: 8vh; }
#what-box h4 { color: #263238; font-weight: 300; margin-top: 0; }
#what-box p  { color: #263238; font-size: 1.45rem; font-weight: 300; }
#what-list   { margin: 0; }

/* Feature Box */
#feature-box           { background: #263238; color: white; margin: 0; padding: 4vh 0 5vh 0;}
.detail-icon-wrapper   { width: 20%; position: relative; }
.detail-icon-wrapper i { font-size: 3rem; position: absolute; top: 25px; }
.detail-text-wrapper   { width: 70%; }
.detail-header         { font-weight: bold; font-size: 1.35rem; }
.detail-text           { font-weight: 300; font-size: 1.15rem; }
.detail-icon-wrapper,
.detail-text-wrapper   { display: inline-block; height: 180px; vertical-align: middle; }

/* Works Box */
#works-box             { background: #ECEFF1; margin: 0; padding: 6vh 0; }
#works-box h4          { margin-bottom: 8vh; font-weight: 300; }
#works-box .col        { padding: 4vh; }
.works-header          { color: rgb(0, 151, 167); font-weight: 900; font-size: 1.35rem; }
.works-text            { font-weight: 300; font-size: 1.15rem; }
.works-box-top         { border-bottom: 1px solid #263238; }
.number-box            { border: 2px solid rgb(0, 151, 167); color: rgb(0, 151, 167); width: 80px; padding: 20px; border-radius: 50%; margin: auto; transition: all .3s ease-out; font-size: 1.5rem; font-weight: 300; }
.number-box:hover,
.number-box.hover      { background: rgb(0, 151, 167); color: white; cursor: pointer; }
#top-left,
#bottom-left           { border-right: 1px solid #263238; }

/* Clients Box */
#clients-box       { background: #ECEFF1; margin: 0; padding: 6vh 0; position: relative; }
#clients-box h4    { margin-bottom: 6vh; font-weight: 300; color: #263238; }
.swiper-slide img  { max-height: 100%; max-width: 100%; object-fit: contain; position: relative; top: 50%; transform: translateY(-50%); }
.swiper-container  { overflow: hidden; }
.next-button       { position: absolute; right: 10%; top: 51%; }
.prev-button       { position: absolute; left: 10%; top: 51%; }
.next-button i     { margin-left: 14px; }
.prev-button i     { margin-left: 8px; }
.next-button,
.prev-button       { background: rgb(0, 151, 167); color: white; font-size: 2rem; width: 55px; padding: 5px; border-radius: 50px; }
.next-button:hover,
.prev-button:hover { cursor: pointer; }

/* Swiper Container (within Clients Box)*/
.swiper-container                            { width: 100%; height: auto; margin-left: auto; margin-right: auto; background: #ECEFF1; }
.swiper-wrapper                              { margin: auto; }
.swiper-slide                                { font-size: 18px; background: #ECEFF1; height: 150px !important; overflow: hidden; }
.swiper-container-multirow > .swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.swiper-button-disabled                      { background: grey; color: #263238; }

/* Questions Box */
#questions-box      { background: rgb(0, 151, 167); margin: 0; padding: 6vh 0; color: white; }
#questions-box h4   { margin-bottom: 6vh; font-weight: 300; color: white; }
.question-btn       { background: transparent; box-shadow: none; border: 1px solid white; border-radius: 5px; padding: 20px 55px; margin-right: 20px; font-weight: bold; line-height: 0px; width: 265px; transition: all .3s ease-out;}
.question-btn:hover { background: white; color: rgb(0, 151, 167); box-shadow: none; }

/* Cookies */
.cookie-consent        { background: black; color: white; position: sticky; z-index: 1000000; position: -webkit-sticky; bottom: 0; padding: 40px; font-weight: 300; }
.cookie-consent__agree { cursor: pointer; background: rgb(0, 151, 167); color: white; padding: 40px; text-transform: uppercase; font-size: 15px; font-weight: 200; letter-spacing: 4px; width: 50%; height: 50px; display: flex; align-items: center; justify-content: center; float: right; }

/* Browser Fixes */




/* Smaller Screen Sizes */
@media screen and (max-width: 323px) {
  #feature-box { padding: 4vh 0 8vh 0; }
}

@media screen and (max-width: 414px) {
  #landing-jumbotron { padding: 15px 20px; background-position: 50% 30%; }
  .swiper-container  { width: 70%; }
  #works-box .col    { border: none !important; }
  .prev-button       { left: 2%; }
  .next-button       { right: 2%; }
  .prev-button,
  .next-button       { width: 51px; top: 60%; }
  #consent-agree     { width: 100vw; }
  .cookie-consent__agree { float: none; margin-top: 20px; width: calc(100% - 80px); height: 25px; }
}

@media screen and (min-width: 415px) and (max-width: 600px) {
  #works-box .col { border: none !important; }
}

@media screen and (max-width: 600px) {
  .question-btn   { margin-bottom: 10px; margin-right: 0; }
  .brand-logo img { margin-top: 4px; }
}

@media screen and (min-width: 415px) and (max-width: 768px) {
  .brand-logo img         { margin-top: 6px; }
  #sponsor-box .container { margin-bottom: 0vh; }
  #sponsor-text           { margin-top: 4vh; }
  #what-box               { padding-top: 4vh; }
  .works-box-top          { height: 400px; }
  #top-right .works-text  { margin-top: 47px; }
  .swiper-container       { width: 78%; }
  .prev-button            { left: 2%; }
  .next-button            { right: 2%; }
  .prev-button,
  .next-button            { width: 52px; }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
  .swiper-container       { width: 90%; }
  .prev-button            { left: 2%; }
  .next-button            { right: 2%; }
}


@media screen and (min-width: 993px) and (max-width: 1135px) {
  #what-box .col          { width: 100%; height: }
  #feature-box .col       { width: 100%; height: }
}

@media screen and (min-width: 993px) and (max-width: 1335px) {
  nav ul li               { margin-left: 10px; }
  #sponsor-box .container { margin-bottom: 0vh; }
  #sponsor-text           { margin-top: 4vh; }
  #what-box p             { font-size: 1.25rem; }
  .works-box-top          { height: 360px; }
  .prev-button            { left: 5%; }
  .next-button            { right: 5%; }
}

@media screen and (min-width: 1136px) and (max-width: 1444px) {
  .detail-text         { font-size: 1rem; }
  .detail-text-wrapper { margin-left: 15px; }
  #mockup-div          { height: 400px; display: flex; align-items: center; justify-content: center; }
}