/*Desktop styling*/
html,
* {
  cursor: none;
  overscroll-behavior: none;
}

body {
  background: #000000;
}

::-webkit-scrollbar {
  display: none;
}

/* Preload modal */
.preloadModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background-color: #000000;
  display: flex;
  justify-content: center;
}

.preloadNumber {
  font-family: "BeausiteClassicWeb-Ultrablack";
  font-size: 8vw;
  letter-spacing: -1px;
  align-self: center;
  color: #ffffff;
}

/*Styles for main container*/
.mainContainer {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  background-position: center center;
  background-size: cover;
  background-color: #000000;
  background-image: url("../assets/img/akinola-davies-jr-image-1.jpg");
}

/* Styles for container that wraps around video sections in order for mobile slider to work */
.sectionContainerWrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
}

/*Styles for section container*/
.sectionContainer {
  flex-grow: 1;
}

.sectionContainer:hover .videoTitleContainer {
  opacity: 1;
}

.imageContainer {
  display: none;
}

.videoTitleContainer {
  opacity: 0;
  z-index: 9999;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 2.5rem;
  text-align: center;
  color: #ffffff;
  mix-blend-mode: difference;
  pointer-events: none;
}

.videoTitleContainer h1,
.contactButton h1,
.rotateToViewModal h1,
.videoCloseButton {
  font-family: "BeausiteClassicWeb-Ultrablack";
  font-size: 1.7rem;
  line-height: 1.7rem;
  letter-spacing: -1px;
}

.videoContainer {
  background: #000000;
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999999;
}

.videoClose {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  display: none;
  mix-blend-mode: difference;
}

.videoContainer iframe {
  width: 100%;
  height: 100%;
}

/*Styles for logo*/
.logoContainer {
  z-index: 9999;
  position: fixed;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}

.logoContainer img {
  width: 90%;
  display: block;
  margin: 0 auto;
}

#logoSvg {
  width: 90%;
  display: block;
  margin: 0 auto;
  fill: #000000;
}

/*Contact button styling (display none on desktop and tablet)*/
.contactButton {
  position: fixed;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  top: 2.5rem;
  color: #ffffff;
  mix-blend-mode: difference;
  text-align: center;
  display: none;
}

/*videoCloseButton styling (display none on desktop)*/

.videoCloseButton {
  display: none;
  color: #ffffff;
  position: fixed;
  top: 2%;
  left: 2%;
}

/*Home page large screen xl. screens bigger than 1441px*/
@media only screen and (min-width: 1441px) {
  .videoTitleContainer h1,
  .contactButton h1 {
    font-size: 2.3rem;
  }
}

/*Home page contact button visable on touch screens smaller than 824px */
@media only screen and (max-width: 1024px) and (hover: none) {
  .contactButton {
    display: block;
    z-index: 9998;
  }

  .logoContainer {
    pointer-events: none;
  }
}

/* Rotate to view modal on portrait touch devices eg. phones and tablets */
.rotateToViewModal {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99999;
  background: #000000;
  background-size: cover;
}

@media only screen and (max-width: 768px) and (orientation: portrait) and (hover: none) {
  .rotateToViewModal {
    display: block;
  }
  .preloadNumber {
    font-size: 1.7rem;
    line-height: 1.7rem;
    letter-spacing: -1px;
  }
  .customCursor {
    display: none !important;
  }
}

@media only screen and (max-width: 1200px) and (orientation: portrait) and (hover: none) {
  .rotateToViewModal {
    display: block;
  }
  .rotateToViewModal h1 {
    position: fixed;
    text-align: center;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    mix-blend-mode: difference;
  }
  .customCursor {
    display: none !important;
  }

  .preloadNumber {
    font-size: 1.7rem;
    line-height: 1.7rem;
    letter-spacing: -1px;
  }
}

/* Slider styles on landscape touch devices eg. phones and tablets */
@media only screen and (max-width: 1400px) and (hover: none) {
  .mainContainer {
    overflow-x: scroll;
    overflow-y: hidden;
    background-image: none;
  }
  .sectionContainer {
    min-width: 100%;
    position: relative;
  }
  .imageContainer {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .imageContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .videoTitleContainer {
    position: absolute;
    opacity: 1;
  }
  .customCursor {
    display: none !important;
  }
  #logoSvg {
    fill: #000000;
  }
  #logoSvg path {
    mix-blend-mode: difference;
  }

  /* videoCloseButton on devices without hover */

  .videoCloseButton {
    display: block;
  }
}