/* CSS Document */
@viewport {
  width: device-width ;
  height: device-height ;
  zoom: 1.0 ;
}
@-ms-viewport {
  width: device-width ;
  height: device-height ;
}
#wrapper
{
background-image : url("../images/bg.png");
background-attachment: fixed;
margin: 0 0 0 0; 
width:100%;
height:100vh;
z-index:0;
}
#header
{
margin : 0 auto;
margin-top: 0%;
margin-bottom: 0%;
width : 100%;
height : 100%;
text-align: center;
vertical-align: middle;
background-image : url("../images/header2.png");
background-size : 1000px 100%;
box-shadow: 0px 4px 20px 2px black;
background-repeat : no-repeat;
background-position : center;
}
#header ul li
{
display:inline;
padding-left:2%;
}
#header ul
{
line-height : 225%;
font-size: 50px;
font-family: 'Heebo', sans-serif;
text-shadow: 1px 1px 3px black; 
font-weight:900;
}
#navi
{
float : right;
margin-right:1%;
margin-top:0%;
width : 100%;
height : 100%;
}
#navi h1
{
display:inline;
font-size: 50px;
text-align: justify;
margin-right:3%;
width : 100%;
height : 6.4%;
}
#navi a
{
text-decoration : none;
margin-top:50%;
margin-bottom:50%;
color : burlywood;
}
#navi a:hover
{
color:blue
}
#content
{
clear:both;
margin:0px auto;
width:64%;
height:60%;
vertical-align : middle;
text-align:center;
font-size: 18px;
}
#content h1
{
height:40px;
font-size: 48px;
text-align:center;
font-family: 'Poppins', sans-serif;
font-weight:bold;
color:#FFF;
}
#content h2
{
	text-align: center;
	background: rgba(125, 125, 145, .75);
	font-family: 'Poppins', sans-serif;
	font-weight: bold;
	color: #FFF;
	text-decoration : none;
}
#content h3
{
font-size: 16px;
padding:0px 18px;
display:inline;
}
#content img
{
box-shadow: 0px 2px 10px 1px black;
}
#content p img
{
margin-right:1%;
}
#columnContent
{
position: absolute;
    margin: auto;
    left: 50%;
    transform: translateX(-50%);
}
#column1
{
float:left;
font-family: 'Heebo', sans-serif;
font-weight:bold;
color:#FFF;
width:33%;
height:570px;
}
#column1 p img
{
float:left;

	box-shadow: none;
}
#column2
{
float:left;
font-family: 'Heebo', sans-serif;
font-weight:bold;
color:#FFF;
width:33%;
height:570px;
}
#column3
{
float:left;
font-family: 'Heebo', sans-serif;
font-weight:bold;
color:#FFF;
width:33%;
height:570px;
}
#column3 p img
{
display:inline;
box-shadow: none;

}
#column3 p2 img
{
display:inline;
margin:0 10px;
margin-right : 1%;
box-shadow: 0px 2px 10px 1px black;
}
#bottomRow
{
clear:both;
padding-top:30px;
height:15%;
width:100%;
}
#bottomRow img
{
margin-right : 2%;
margin-left : 2%;
}
#video
{
padding-top: auto;
}
#video iframe
{
	box-shadow: 0px 2px 10px 1px black;
	position: absolute;
    margin: auto;
    left: 50%;
	width:900px;
height:600px;
    transform: translateX(-50%);
}
#sideBarLeft
{
	background-position: 100% 0%;
clear:both;
box-shadow: 0px 2px 10px 1px black;
position: absolute;
float:left;
left:0;
height:1000%;
width:18%;
margin-left:-1%;
background-color: rgba(0, 0, 45, 1);
z-index: -10;
background-image:url("../images/logo/jtearPart_left.png");
background-repeat: no-repeat;
background-attachment: none;

}
#sideBarRight
{
		background-position: 0% 0%;
clear:both;
box-shadow: 0px 2px 10px 1px border-left-color: #000;k;
transform: translateX(455%);
position: absolute;
float:right;
height:1000%;
width:18%;
margin-left:1%;
background-color: rgba(25, 0, 0, 1);
z-index: -10;
background-image:url("../images/logo/jtearPart_right.png");
background-repeat: no-repeat;
background-attachment: none;
}
#index-title
{
display:flex;
margin-top:400px;
transform: scale(.45);
justify-content: center;
}
#index-title h
{
font-size: 20px;
text-align: justify;
background: rgba(125, 125, 145, .75);
font-family: 'Poppins', sans-serif;
font-weight: bold;
color: #FFF;
}
h5 {
	grid area: gallery-h1;
	line-height : 100%;
	justify-content: space-evenly;
	align-content: space-evenly;
	height:10px;
	font-size: 22px;
	text-align:center;
	font-family: 'Poppins', sans-serif;
	font-weight:bold;
	color:#FFF;
	text-shadow: 1px 1px 5px black; 
}
.pexpressDesc {
	color: #FFFFFF;
}

/* Big Tablet-View */
@media only screen and (max-width:1025px) 
{
	#index-title
	{
	margin-top:200px;
	}
	#sideBarLeft
	{background-position: 100% 0%;}
 }
@media only screen and (min-height:1000px) 
{
	#index-title
	{
	margin-top:555px;
	}
	#sideBarLeft
	{background-position: 100% 0%;}
 }
/* Tablet-View */
@media only screen and (max-width:769px) 
{
	#index-title
	{
	margin-top:128px;
	}
	#video iframe
	{width:75%;
	height:75%;}
	#columnContent
	{
	margin-top:-100px;
    left: 11%;
    transform: translateX(-8%) scale(55%);
	}	
 }
/* Mobile-View */
@media only screen and (max-width:426px)
{
	#header{
	height : 75%;
	background-size : 100%;}
	#navi {
	margin-right: 3%;
	margin-top:-10%;}
	#navi h1{
	font-size: 20px;}
	#video
	{
	padding-top:25%;
	}
	#video iframe
	{width:300px;
	height:200px;}
	#columnContent
	{
	margin-top:-50px;
    left: 11%;
    transform: translateX(-25%) scale(40%);
	}	
	#index-title
	{
	display:flex;
	justify-content: center;
	margin-top:355px;
	margin-right:-17vw;
	transform: scale(.35);
	}
}
/* MobileMini-View */
@media only screen and (max-width:360px) 
{
	#header{
	height : 66%;
	background-size : 100%;}
	#navi {
	margin-right: 4%;
	margin-top:-14%;}
	#navi h1{
	font-size: 20px;}
	#video
	{
	padding-top:25%;
	}
	#video iframe
	{width:300px;
	height:200px;}
	#columnContent
	{
	margin-top:-50px;
    left: 6%;
    transform: translateX(-25%) scale(40%);
	}
	#index-title
	{
	display:flex;
	justify-content: center;
	margin-top:280px;
	margin-right:-7vw;
	transform: scale(.35);
	}
}
/* MobileMicro-View */
@media only screen and (max-width:321px) 
{
	#header{
	height : 60%;
	background-size : 100%;}
	#navi {
	margin-right: 5%;
	margin-top:-17%;}
	#navi h1{
	font-size: 20px;}
	#video
	{
	padding-top:25%;
	}
	#video iframe
	{width:300px;
	height:200px;}
	#columnContent
	{
	margin-top:-50px;
    left: -1%;
    transform: translateX(-25%) scale(40%);
	}
	#index-title
	{
	display:flex;
	margin-top:220px;
	margin-right:-18vw;
	transform: scale(.35);
	}
}