@import url('https://fonts.googleapis.com/css?family=Raleway:400,700,900&display=swap&subset=latin-ext');
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  line-height: 1 !important;
}
html {
  scroll-behavior:smooth;
}

body {
  /* font-family: 'Josefin Sans', sans-serif; */
  background-color: black;
   overflow-x: hidden;
}


section#home-section{

}

section#home-section #backgroundVideoContainer{
  /* position: absolute;
  height: 100vh;
  z-index: -900;
  background-color: black;
  overflow:hidden; */
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /* position: fixed; */
  z-index: -100;
}

section#home-section #backgroundVideoContainer video{
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
@media screen and (min-width: 768px) {
  section#home-section #backgroundVideoContainer video{
    display: none;
  }
}

.vimeo-wrapper {
   /* position: fixed; */
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   z-index: -900;
   pointer-events: none;
   overflow: hidden;
}
.vimeo-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}



/*  */
.crossfade > figure {
  animation: imageAnimation 30s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100vh;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}
.crossfade > figure:nth-child(1) { background-image: url('../img/THUMBNAILS/CHAT-Africa.png'); }

.crossfade > figure:nth-child(2) {
  animation-delay: 6s;
  background-image: url('../img/THUMBNAILS/Hendricks Gin - The Hour.png');
}

.crossfade > figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url('../img/THUMBNAILS/Jaguar - Project 8 Track.png');
}

.crossfade > figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('../img/THUMBNAILS/Jakotgano - Patagonia Safari.png');
}

.crossfade > figure:nth-child(5) {
  animation-delay: 24s;
  background-image: url('../img/THUMBNAILS/Manchester United Chevrolet Fan Cup - Denis Irwin.png');
}
@media screen and (min-width: 768px) {
  .crossfade{
    display: none;
  }
}
@keyframes
imageAnimation {  0% {
 animation-timing-function: ease-in;
 opacity: 0;
}
 8% {
 animation-timing-function: ease-out;
 opacity: 1;
}
 17% {
 opacity: 1
}
 25% {
 opacity: 0
}
 100% {
 opacity: 0
}
}


#home-section .over-video{
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  /* left: calc(50% - 400px); */
}
#home-section .over-video img{

}
/* @media only screen and (max-width: 576px) {
  #home-section .over-video{
      width: 800px;
      left: calc(50% - 400px);
  }
}
@media only screen and (min-width: 576px) {
  #home-section .over-video{
      width: 800px;
      left: calc(50% - 400px);
  }
}
@media only screen and (min-width: 768px) {
  #home-section .over-video{
    width: 800px;
    left: calc(50% - 400px);
  }
}
@media only screen and (min-width: 992px) {
  #home-section .over-video{
    width: 800px;
    left: calc(50% - 400px);
  }
} */
@media only screen and (min-width: 1200px) {
  #home-section .over-video{
    width: 1000px;
    left: calc(50% - 500px);
  }
}
@media only screen and (min-width: 2560px) {
  #home-section .over-video{
    width: 1200px;
    left: calc(50% - 600px);
  }
}




#reel-section{
  /* margin-top: 70px; */
  font-family: 'Raleway', sans-serif !important;
  /* padding-top: 70px; */
  background-color: #1A1A1A;
  color: white;
  overflow: hidden;
}
#reel-section h2, h6{
  margin: 20px;
  text-align: center;
}
@media only screen and (max-width: 600px) {
  #reel-section{
    /* padding-top: 44px; */
  }
}



#contact{
font-family: 'Raleway', sans-serif !important;
background-color: #1A1A1A;
  /* font-family: Nunito,sans-serif !important; */

}
#contact h6{
  font-weight: 900 !important;
  font-style: normal !important;
  font-size: 1.1rem;
  padding: 5px;
  /* text-align: center; */
  /* display: inline; */
}


#contact {
  min-height: 33.3vh;
}
#contact .info{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  color: #FFD600;
}
#contact .logo_footer{
  margin-top: 2%;
  width: 90px;
  margin-bottom: 10px;
}
#contact .logo_footer img{
  width: 100%;
}

#contact .info i{
  /* display: block; */
  padding-top: 5px;
  text-align: center;
  /* margin-bottom: 10px; */
  font-size: 40px;
}
#contact .info a{
text-decoration: none;
color: inherit;
/* display: inline; */
}




.display_background{
  background-color: rgb(121, 121, 121);
  /* min-height: 100vh; */
}

.videoBox{
  padding:56.25% 0 0 0;
  position:relative;
}
.videoBox iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.videoBoxInfo{
  text-align: center;
  padding: 10px;
}
.card_hov {
  width: 100%;
  /* height: 100%; */
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.card_hov .overlay {
  position: absolute;
  overflow: hidden;
  padding: 1%;
  width: 90%;
  height: 90%;
  left: 5%;
  top: 5%;
  opacity: 0;
  /* border-bo
  ttom: 1px solid #FFF;
  border-top: 1px solid #FFF; */
  -webkit-transition: opacity 0.75s;
  transition: opacity 0.75s;
  /* -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; */
  /* transition: opacity 0.35s, transform 0.35s; */
  /* -webkit-transform: scale(0,1);
  -ms-transform: scale(0,1);
  transform: scale(0,1); */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card_hov:hover .overlay {
  opacity: 1;
  /* filter: alpha(opacity=100); */
  /* -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1); */
}

.card_hov img {
  position: relative;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

.card_hov:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
  filter: brightness(0.4);
  -webkit-filter: brightness(0.4);
}

.overlay{
  cursor: pointer;
}
.overlay h5, .overlay h6, .overlay p{
  margin: 0;
  padding: 0;
  /* color:rgb(31, 170, 141); */
  color:white;
}







/*laoder stuff  */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('../img/loader2.gif') center no-repeat #fff;
}
/*laoder stuff  ends*/




/* scroll */
/* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */

/* total width */
body::-webkit-scrollbar {
  background-color:#fff;
  width:16px
}

/* background of the scrollbar except button or resizer */
body::-webkit-scrollbar-track {
  background-color:#fff
}

/* scrollbar itself */
body::-webkit-scrollbar-thumb {
  background-color:#babac0;
  border-radius:16px;
  border:4px solid #fff
}

/* set button(top and bottom of the scrollbar) */
body::-webkit-scrollbar-button {display:none}
/* scroll end */

















/* Video Modal
-----------------------------------------*/
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content/Box */
.modal-data {
  background-color: rgba(#000000, 0.44);
  margin: 3% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}
p#modal-info{
  color:white;
}

/* The Close Button */
.close-modal {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  z-index: 100;
  line-height: 20px;
}

.close-modal:hover,
.close-modal:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}



/* .redips-drag{
  border-style: none !important;
}
.redips-drag img{
  width: 100%;
  max-width: 300px;
} */





/* drag objects */
.redips-drag {
    cursor: move;
    margin: auto;
    background-color: white;
    text-align: center;
    font-size: 22pt; /* needed for cloned object */
    width: 250px;
    /* height: 35px; */
    line-height: 35px;
    /* round corners */
    border-radius: 4px; /* Opera, Chrome */
    -moz-border-radius: 4px; /* FF */
}

@media only screen and (max-width: 768px) {
  .redips-drag{
    width: 175px;
  }
}
@media only screen and (max-width: 600px) {
  .redips-drag{
    width: 100px;
  }
}




/* tables */
div#redips-drag table {
    background-color: #ddd;
    border-collapse: collapse;
    margin: 10px;
}

/* table cells */
div#redips-drag td {
    border: 1px white solid;
    /* height: 50px; */
    text-align: center;
    font-size: 10pt;
}

.filterMenu{
  color: white ;
  /* height:  70px; */
  display: flex;
  padding: 10px;
  justify-content: center;
}



.filterButton {
  font-family: 'Raleway', sans-serif !important;
  font-weight: 900;
  margin: 0 10px;
  background:none;
  border:none;
  padding: 5px;
  font-size:1em;
  color:white !important;
}
.filterButton:focus {outline:0;}
.filterButton:active {
  outline: none;
border: none;}

/* Style the active class, and buttons on mouse-over */
.activa, .filterButton:hover {
  background-color: #FFD600 !important;
  color: #1A1A1A !important;
}

@media only screen and (max-width: 600px) {
  .filterButton{
    font-size:0.6em;
  }
}