@font-face {
    font-family: "avenir";
    src: url('../fonts/AvenirNextLTPro-Regular.otf')
}

@font-face {
    font-family: "avenir-bold";
    src: url('../fonts/AvenirNextLTPro-Bold.otf')
}

@font-face {
    font-family: "avenir-italic";
    src: url('../fonts/AvenirNextLTPro-It.otf')
}

body {
  background: rgb(2,0,36);
  background: linear-gradient(0deg, rgba(0,44,70,1) 0%, rgba(0,73,123,1) 100%);
  color: #fff;
  font-family: "avenir", sans-serif;
  text-align: center;
}

header {
  padding: 2vw 8vw 0 8vw;
}

.header_banner, .header_banner svg {
  width: 100%;
  height: 7.29vw;
}

header p {
  padding: 2vw 2.5vw 0 2.5vw;
}

p {
  font-size: clamp(16px, 2.71vw, 2.71vw);
  line-height: clamp(20px, 3.13vw, 3.13vw);
  margin: 0 0 clamp(20px, 3.13vw, 3.13vw) 0;
  padding: 0;
}

p.big {
  font-family: "avenir-bold", sans-serif;
  font-size: clamp(24px, 4.17vw, 4.17vw);
}

.button button {
  border: 0;
  border-radius: 60px;
  background-color: #0077C8;
  color: #fff;
  cursor: pointer;
  font-size: clamp(14px, 1.25vw, 1.25vw);
  padding: 20px 30px;
  width: clamp(200px, 17.2vw, 17.2vw);
}

.button button:hover {
  background-color: #002C46;
  transition: 0.2s ease-out;
}





/*photo block*/

.photo-grid-desktop {
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: clamp(20px,4.69vw,4.69vw);
  grid-row-gap: 0;
  padding: 5vw 8vw 0 8vw;
  overflow: hidden;
  margin-bottom: -27vw;
  display: none;
}

.photo-grid-mobile {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: clamp(20px,4.69vw,4.69vw);
  grid-row-gap: 0;
  padding: 5vw 8vw 0 8vw;
  overflow: hidden;
  margin-bottom: 0;
}

.photo-column:nth-of-type(2) {
  padding-top: 19.6vw;
}

.photo {
  color: #fff;
  position: relative;
  margin-bottom: clamp(20px,4.69vw,4.69vw);
  overflow: hidden;
}

.photo:hover {
  background-color: #002C46;
  cursor: pointer;
}

.photo:hover .image img {
  opacity: 0.2;
}

.photo:hover::after {
  background: transparent;
}

.photo::after {
  background: linear-gradient(to top, #002C46, transparent);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 2;
}

.photo.no-gradient::after {
  background: transparent;
}

.photo .image img {
  width: 100%;
}

.photo .reel{
  margin-bottom:0px;
}
.photo_copy {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  z-index: 3;
}

.photo_copy_hover {
  visibility: hidden;
  font-size: 3.5vw;
  padding: 0 clamp(15px,2.6vw,2.6vw);
  overflow: hidden;
}

.photo_copy_hover .button {
  margin-top: 3vw;
  margin-bottom: 3vw;
}

.photo_copy_hover .button button {
  border-radius: 6.25vw;
  font-size: 3vw;
  padding: 2.3vw 3.125vw;
  width: 31.25vw;
}

.photo:hover .photo_copy_hover {
  visibility: initial;
}

.name {
  font-family: "avenir-bold", sans-serif;
  font-size: 3.5vw;
  letter-spacing: clamp(2px,0.5vw,0.5vw);
  text-transform: uppercase;
}

.title {
  font-size: 3vw;
  line-height: 1;
  padding: 0 20px 10px 20px;
}

/*photo block end*/








/*reel*/

.reel {
  color: #fff;
  height: clamp(170px,49.375vw,49.375vw);
  position: relative;
  overflow: hidden;
}



.reel-copy {
  padding: 1vw;
  /*padding-top: clamp(1px,21vw,21vw);*/
  padding-top: 18vw;
  position: relative;
  z-index:2;
}

.reel p {
  font-family: "avenir-bold", sans-serif;
  font-size: clamp(28px,7.29vw,7.29vw);
  line-height: clamp(36px,7.5vw,7.5vw);
  margin-bottom: 0;
  overflow-wrap: break-word;
}

.reel .button {
  width: 100%;
  position: absolute;
  bottom: 2vw;
}

.reel button {
  border: 0;
  border-radius: 0;
  background: url(../images/watchreel.png);
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
  cursor: pointer;
  margin: 0 auto;
  padding: 0;
  width: clamp(150px, 25.36vw, 25.36vw);
  height: clamp(56px, 9.48vw, 9.48vw);
  z-index: 4;
  position: relative;
}

.reel .logo {
  margin: 0 auto;
  padding: 0;
  top: 3vw;
  width: 100%;
  z-index: 3;
  position: absolute;
}

.reel .logo img {
  width: 25vw;
}

.reel button:hover {
  border: 0;
  border-radius: 0;
  background: url(../images/watchreel-hover.png);
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: 0.2s ease-out;
  color: #fff;
  cursor: pointer;
  margin: 0;
  padding: 0;
  margin-top: clamp(1px, 3.5vw, 3.5vw);
  width: clamp(150px, 25.36vw, 25.36vw);
  height: clamp(56px, 9.48vw, 9.48vw);
}

.reel-video {
  position: absolute;
  top: 0;
  height: 56.25vw;
  width: 100%;
  left: 0;
  z-index: 1;
}

.reel.photo {
  margin-bottom: 0;
}


/*reel end*/

/*footer*/

footer {
  background-color: #fff;
  color: #002C46;
  padding: clamp(40px,4.7vw,4.7vw) 1vw clamp(60px,9.38vw,9.38vw) 1vw;
}

footer p {
  font-size: clamp(14px, 1.875vw, 1.875vw);
  overflow-wrap: break-word;
}

footer div.slides {
  padding-bottom: clamp(60px,9.38vw,9.38vw);
}

div.stw, div.roer {
  width: 39.22vw;
  height: 21.25vw;
  margin: 0 2.35vw;
  display: inline-block;
}

div.stw {
  background: url(../images/stw.png);
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

div.stw:hover {
  background: url(../images/stw-on.png);
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

div.roer {
  background: url(../images/roer.png);
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

div.roer:hover {
  background: url(../images/roer-on.png);
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

footer a {
  color: #002C46;
  text-decoration: none;
}

/*footer end*/

























/*modals*/

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 20; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow-y: auto; /* Enable scroll if needed */
  background-color: rgba(0,73,123,0.8);
}
.modal.vid-pop {
  background-color: rgba(0,0,0,0.8) !important;
}

.modal.vid-pop .modal_content {
  display: grid;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-columns: 1fr;
}

.modal.vid-pop .modal_content .modal_copy {
  background: #000;
  padding: 0;
}

.popup {
  position: relative;
  margin: 5.2vw auto;
  width: 80%;
}

.popup .close {
  font-size: 40px;
  text-decoration: none;
  color: #333;
  position: absolute;
  width: 80px;
  height: 80px;
  top: 0;
  right: 0;
  z-index: 30;
}

.popup .close .closex {
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  width: 35px;
  height: 30px;
  text-align: center;
  padding: 0 5px 20px 5px;
}

.vid-pop .popup .close {
  color: #fff;
  position: absolute;
  width: 80px;
  height: 80px;
  top: 0;
  right: 0;
  z-index: 30;
}

.vid-pop .popup .close .closex {
  background: #000;
}

.popup .close:hover {
  cursor: pointer;
}

.modal_content {
  color: #002C46;
  display: grid;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-columns: 1fr;
}

.modal_content .modal_copy {
  background: #fff;
  padding: 5.73vw 5.2vw;
}

.modal_content p {
  font-size: 3vw;
  line-height: 4vw;
  text-align: left;
  padding: 0;
  margin: 0 0 clamp(10px, 1.25vw, 1.25vw) 0;
}

.modal_content .modal_copy p.name {
  font-size: 4vw;
  margin-bottom: 0;
}

.modal_content .modal_image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: none;
}

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */}
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */}
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
  .photo-grid-desktop {display: grid;}
  .photo-grid-mobile {display: none;}
  .photo_copy_hover {
      visibility: hidden;
      font-size: clamp(9px,1.6vw,1.6vw);
      padding: 0 clamp(5px,2.6vw,2.6vw);
      overflow: hidden;
    }
    .photo_copy_hover .button button {
      border-radius: clamp(30px,3.125vw,3.125vw);
      font-size: clamp(10px, 1.25vw, 1.25vw);
      padding: clamp(10px,1.04vw,1.04vw) clamp(15px,1.5625vw,1.5625vw);
      width: clamp(100px, 17.2vw, 17.2vw);
    }

    .photo:hover .photo_copy_hover {
      visibility: initial;
    }


    .name {
      font-family: "avenir-bold", sans-serif;
      font-size: clamp(12px,1.875vw,1.875vw);
      letter-spacing: clamp(2px,0.5vw,0.5vw);
      text-transform: uppercase;
    }

    .title {
      font-size: clamp(10px,1.25vw,1.25vw);
      line-height: 1;
      padding: 0;
      padding-bottom: clamp(10px,3.64vw,3.64vw);
    }

    .modal_content p {
      font-size: clamp(14px, 1.25vw, 1.25vw);
      line-height: clamp(20px,1.875vw,1.875vw);
      text-align: left;
      padding: 0;
      margin: 0 0 clamp(10px, 1.25vw, 1.25vw) 0;
    }

    .modal_content .modal_copy p.name {
      font-size: clamp(14px,1.875vw,1.875vw);
      margin-bottom: 0;
    }
}
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */
  .modal_content .modal_image img{ display:grid; }
  .modal_content { grid-template-columns: repeat(2, 1fr); }
  .modal.vid-pop .modal_content {
    grid-template-columns: 1fr;
  }
}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */}
@media (min-width:1281px) { /* hi-res laptops and desktops */ }