/*#############################-ANIMATION-#############################*/
/* All keyframes are written here so as to make a more oraganized CSS. But they work in conjuction with
their respective properties in their respective selectors below.
Author/source of the animation are written there as well */

/*Spinning spokes*/
@keyframes spinnerRotate{
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}

@-webkit-keyframes spinnerRotate{
    from{-webkit-transform: rotate(0deg);}
    to{-webkit-transform: rotate(360deg);}
}

@-moz-keyframes spinnerRotate{
    from{-moz-transform: rotate(0deg);}
    to{-moz-transform: rotate(360deg);}
}

@-ms-keyframes spinnerRotate{
    from{-ms-transform: rotate(0deg);}
    to{-ms-transform: rotate(360deg);}
}

@-o-keyframes spinnerRotate{
    from{-o-transform: rotate(0deg);}
    to{-o-transform: rotate(360deg);}
}

/*Moving dashed lines*/
@keyframes dash-animation {
	to {
	  stroke-dashoffset: -1000;
	}
  }

@keyframes dash-animation-opposite {
	to {
	  stroke-dashoffset: 1000;
	}
  }

/*Typing effect*/
@keyframes appear {
    from {
        opacity:0;
    }
    to {
        opacity:1;
	}
}

@keyframes typing {
	from { width: 0 }
	to { width: 100% }
}

/*Scroll arrow*/
@keyframes ScrollArrow {
	0% {opacity: 1; transform: translateY(0px) scale(1);}
	25%{opacity: 0; transform:translateY(10px) scale(0.5);}
	26%{opacity: 0; transform:translateY(-10px) scale(0.5);}
	55% {opacity: 1; transform: translateY(0px) scale(1);}
}

/*MAIN CSS*/
/*Rabin Joseph Gosal*/

/*#############################-BASE-#############################*/

html{
	background-color:#FFF;
	color:#fff;
	font-family:Helvetica, Arial, sans-serif;
	overflow-x: hidden;
}

a {
	text-decoration:none;
	color:inherit;
}

.FlexUndisplayedItem{
	width: 0;
	height: 0;
}

/*#############################-HEADER-#############################*/

header{
	height:100vh;
	width:100%;
	background-color:#F4CC06;
	z-index:5;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	color: #000;
}


.HeaderContainer{
	width: 950px;
	display: flex;
	flex-wrap: wrap;
}

.Banner{
	width: 100%;
	height: 250px;
	z-index :2;
	margin-bottom: 30px;
}

.Banner img{
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
}

.BannerCassette{
	width: 950px;
	position: absolute;
	z-index: 400;
}

.BannerSpokes{
	width: 92px;
	height: 92px;
	position: absolute;
	top: 101px;

	transform-box: fill-box;
	animation-name: spinnerRotate;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	/*spokes_r timing overridden below*/
}

.SpokesL{
	left: 392px;
}

.SpokesR{
	left: 772px;

	/*animation timing override*/
	animation-duration: 3s;
}

.Banner p{
	font-size:14px;
	position:absolute;
	left:55px;
	top:195px;
	color: #000;
	z-index: 700;
}

.DashedLine1  {
	stroke-dasharray: 10;
	animation: dash-animation 20s infinite linear;
  }

.DashedLine2{
	stroke-dasharray: 5;
	animation: dash-animation 40s infinite linear;
  }

.Slogan{
	width: 100%;
	height: 80px;

	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}

.Slogan p{
	font-size: 24px;
	font-weight: 600;
}

.Slogan p:first-child{
	margin-left: 15px;
}

.Slogan p:last-child{
	margin-right: 15px;
}

.Introduction{
	margin-top: 30px;
	text-align: left;
}

.Introduction p{
	margin-left: 15px; /*Reminder: Margin is on element, so right side of element is outside of container*/

	opacity: 0;
	overflow: hidden; /* Ensures the content is not revealed until the animation */
	white-space: nowrap; /* Keeps the content on a single line */
	animation: appear 0.1s, typing 2s steps(100, end);
	animation-delay: 1s;
	animation-fill-mode: forwards;
  }

.ScrollButton{
	height:35px;
	font-size: 12px;
	margin-bottom: 30px;
	padding: 0 10px 0 10px;
	border: #000;
	border-radius: 5px;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	background-color:#414141;
	color: #fff;
}

.ScrollInfo p{
	margin: 0 -3px 0 -3px;
}

.ScrollIcon {
	width: 40px;
	height: 40px;

    /*border: 2px solid #fff;
	border-radius: 100%; */


	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.ScrollArrow {
	width: 12px;
	height: 12px;
	background-size: contain;
	background-image: url("../images/elements/scroll_arrow.svg");
}

.ScrollArrow{
    animation-name: ScrollArrow; /* Scroll button animation from https://freefrontend.com/css-arrows/ */
    animation-duration:1.4s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}
.ScrollArrowTop{
	margin-top: 6px;
    animation-name: ScrollArrow;
    animation-duration:1.4s;
    animation-delay:0.2s;
    animation-iteration-count:infinite;
	animation-timing-function:linear;
}

nav{
	width: 100%;
	height: 100px;
	background-color: dodgerblue;
	text-align: center;
}

.CategoryNav{
	background-color: blueviolet;
}

.SubCategoryNav{
	background-color: coral;
}

.FixedHeader {
    position: fixed;
    top: 0;
}

/* nav{
	height:300px;
	width:100%;
	z-index:400;
	position:relative;
	background-color:#abcdf3;
	font-weight:600;
	font-size:14px;
}

nav ul{
	padding: 0;
	margin: 0;
	list-style: none;

	display: flex;

	flex-flow: row wrap;

	justify-content: space-between;
	align-content: space-between;
}


nav ul li{
	background: tomato;
	padding: 5px;
	width: 200px;
	height: 60px;

	color: white;
	font-weight: bold;
	text-align: center;
	display: flex;

}

nav ul li a{
	margin: auto;
}


nav ul li a{
	width: 230px;
	display: inline-block;
	float: left;
	color: #fff;
	background-color :#1a1290;
	text-align: center;
	margin: 0 10px 10px 0;
	padding: 10px 0 10px 0;
}


nav a:hover{
	color:#fff;
	background-color:#F53F42;
}

.sticky-menu-blocker{
	height:130px;
	width:100%;
	background-color:rgb(51, 255, 0);
	z-index:25;
	position:fixed;
	top:0;
}

.anchor{
	display:block;
    position:relative;
    top:-160px;
    visibility:hidden;
} */

/*#############################-MAIN CONTENT-#############################*/

main{
	height: 1200px;
	width: 100%;
	color: #333333
}

.MainContainer{
	height: 100%;
	width: 950px;
	margin: auto;
	background-color:;
}


#gallery{
	margin-top:230px;
	width:100%;
	z-index:20;
}

.shelf{
	width:950px;
	height:280px;
	margin-bottom:20px;
	margin-top:30px;
	position:relative;
}

h1{
	color:#FFD800;
	font-size:35px;
	font-weight:600;
	margin-bottom:50px;
}

h2{
	text-align:right;
	color:#FFD800;
	font-size:30px;
	font-weight:800;
	margin-bottom:60px;
}

h2 img{
	height:22px;
}

.item-2{
	width:310px;
	height:290px;
	color:#58585B;
	float:left;
	display:inline;
	position:relative;
	margin-right:10px;
	z-index:5;
	background-color:#F53F42
}

.item-2 p{
	font-weight:600;
	text-align:center;
	margin-top:245px;
}

.item-3{
	width:310px;
	height:290px;
	color:#58585B;
	float:left;
	display:inline;
	position:relative;
	margin-right:10px;
	z-index:5;
}

.item-3 p{
	font-weight:600;
	text-align:center;
	margin-top:245px;
}

.item-4{
	width:230px;
	height:290px;
	color:#939597;
	float:left;
	display:inline;
	position:relative;
	z-index:5;
}

.item-4 p{
	font-weight:600;
	text-align:center;
	margin-top:245px;
}

.shelf div{
	margin-right:10px;;
}

.s4 div:nth-child(4n+4) {
    margin-right:0;
}

.s3 div:nth-child(3n+3) {
    margin-right:0;
}

.shelf div:last-child {
    margin:0;
}

.model_subtitle{
	display:block;
	font-size:14px;
	margin-top:5px;
}

.board{
	width:910px;
	position:absolute;
	bottom:55px;
	z-index:1;
	overflow:hidden;
	border-bottom:30px solid #E6E7E8;
	border-left:20px solid transparent;
    border-right:20px solid transparent;
}

footer{
	width:100%;
	height:100px;
	background-color:#1a1290;
	margin-top:50px;
	min-width:950px;
}

/*Gallery Logos*/

.aiwa_logo{
	width:65px;
	margin-top:250px;
	margin-bottom:4px;
	margin-left:82px;
}

.kasuga_logo{
	width:130px;
	margin-top:245px;
	margin-bottom:1px;
	margin-left:50px;
}

.realistic_logo{
	width:150px;
	margin-top:248px;
	margin-bottom:3px;
	margin-left:40px;
}


.sanyo_logo{
	width:110px;
	margin-top:250px;
	margin-bottom:4px;
	margin-left:60px;
}

.sony_logo{
	width:78px;
	margin-top:250px;
	margin-bottom:4px;
	margin-left:76px;
}

.sunny_logo{
	width:84px;
	margin-top:242px;
	margin-bottom:4px;
	margin-left:73px;
}

.toshiba_logo{
	width:100px;
	margin-top:249px;
	margin-bottom:4px;
	margin-left:70px;
}

.unisef_logo{
	width:100px;
	margin-top:249px;
	margin-bottom:4px;
	margin-left:70px;
}


/*Gallery Sizing & Hover Animations*/

.gallery_wp, .gallery_wl, .gallery_wl_l, .gallery_psl, .gallery_2{
	transform:perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;

	transition-duration:0.3s;

	transition-property:transform;

    transform-origin : 50% 100%;
}

.gallery_wp:hover, .gallery_wl:hover, .gallery_wl_l:hover, .gallery_psl:hover, .gallery_2:hover{
	transform:scale(1.15);
}

.gallery_wp:focus, .gallery_wp:active, .gallery_wl:focus, .gallery_wl:active, .gallery_wl_l:focus, .gallery_wl_l:active, .gallery_psl:focus, .gallery_psl:active, .gallery_2:focus, .gallery_2:active{
	transform:scale(1);
}

.gallery_wp{
	width:140px;
	position:absolute;
	bottom:80px;
	margin-left:45px;
}


.gallery_wl{
	width:175px;
	position:absolute;
	bottom:80px;
	margin-left:27.5px;
}

.gallery_wl_l{
	width:207px;
	position:absolute;
	bottom:80px;
	margin-left:7.5px;
}

.gallery_psl{
	width:250px;
	position:absolute;
	bottom:80px;
	margin-left:27.5px;
}

.gallery_2{
	width:350px;
	position:absolute;
	bottom:80px;
	margin-left:27.5px;
}



/*Pop-up div*/

.black_overlay {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}
.white_content {
  display: none;
  position: fixed;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  z-index: 1002;
  overflow: auto;
}