@charset "UTF-8";
/*------------------------------------------------------------------
Master Stylesheet

Project:		Itzy Interactive
Website: 		itzyinteractive.com
Version:		1.0.0
Last change:	
Author: 		Dariusz Konrad
Author Website:	GameWebDev.com
-------------------------------------------------------------------*/


h1, h2, h3 {color: #FFFAF0;}
p {color: #FFFAF0;}


.navbar-brand, .img-hover {opacity:0.75;}
.navbar-brand:hover, .img-hover:hover {opacity:1.0;}

.navbar-custom {
    background: linear-gradient(rgba(34, 34, 34, 0.95), rgba(34, 34, 34, 0.75));
    box-shadow: 0 2px 10px rgb(0 0 0 / 50%);
 
	border-color: #fff;

}

.navbar-brand {
padding-left: 0px;
height: 65px;
}

.minw { max-width:900px; } /* min width of paragraph text */

.txt-shadow-w {text-shadow: 1px 1px 10px rgba(255, 255, 255,.75)}
.txt-shadow-b {text-shadow: 2px 2px 2px rgba(3,3,3,1);}
.headline-shadow h1, .headline-shadow h2, .headline-shadow h3 {  text-shadow: 5px 5px 8px rgba(3, 3, 3, 1); }

/* HEADER BACKGROUND VIDEO */

header.vid-container{
  position: relative;
  background-color: black;
  height: 100vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header video {
  background-size: cover;
  background-color: rgba(0,0,0,0.2);
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;

  -ms-transform: translateX(-50%) translateY(-45%);
  -moz-transform: translateX(-50%) translateY(-45%);
  -webkit-transform: translateX(-50%) translateY(-45%);
  transform: translateX(-50%) translateY(-45%);
}

header .header-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  text-align: center;
}
header .header-logo-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 22%;
  text-align: center;
}
header .header-text-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 15%;
  text-align: center;
}


/* background vid mobile setup */
@media (max-width: 576px) {
  header .vid-container {height: 95vh}
  header video {top:55%; height: 50%; }
}



/* GAMES SECTION */
.card {
  border-color: #000;
  background-color: #343a40;
}

.card{
  transition: 0.3s;
}
.card:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgb(7, 7, 7);
  transform: translate(0, -5px);
  
}


.img-pop{
  transition: 0.3s;
}
.img-pop:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(7, 7, 7,0.5);
  transform: translate(0, -5px);
}

.img-shadow {box-shadow:  0px 0px 15px 2px rgb(49, 49, 49);}



/*------------------------------------------------------------------
TEXT OVER IMAGE SETUP
-------------------------------------------------------------------*/

.img-container {
  position: relative;
  background-size: cover;
  background-color: rgb(0,0,0);
  text-align: center;
  
}

.img-overlay {
  object-fit: cover;
   opacity: .4;
   
  
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
    
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
 }

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;

}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;

}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 
}


/*------------------------------------------------------------------
FULL BACKGROUND IMAGE WITH CENTERED TEXT
-------------------------------------------------------------------*/


.color-overlay {
  position: absolute;
  background-color: rgba(0,0,0,0.2);
  height: 100%;
  width: 100%;
}

@media (max-width: 992px) {
  .masthead {
      min-height: 30vh;
  }
  h1 {
      font-size: calc(1.525rem + 3.3vw);
  }
}

form {text-align: left;}



@media (min-width: 960px){
.page1-article {
    margin: 10% 95% 0 10%;
    padding-right: 25%
}
}


  .page-article {
    margin-top: 5%;
    background-color: rgb(6, 29, 36);
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 5%;
    padding-bottom: 10%;
    margin-right: 10%;
    margin-left: 10%;
    box-shadow: 12px 0 15px -4px rgba(43, 42, 42, 0.8), -12px 0 8px -4px rgba(43, 42, 42, 0.8);
  }
    

 .minht { min-height: 960px;}