*
{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	
}
body
{
	background-image: url(background.jpeg);
	background-size: cover;
	background-position: center;
	
	font-family: sans-serif;
}   
.menu-bar
{
	background: rgb(100,100,100);
	text-align: center;
}
.menu-bar ul
{
	display: inline-flex;
	list-style: none;
	color: #000;
}
.menu-bar ul li
{
	width: 120px;
	margin: 15px;
	padding: 15px;
}
.menu-bar ul li a
{
	text-decoration: none;
	color: #000;
}
.active, .menu-bar ul li:hover
{
	background: #F2F2F2;
	border-radius: 3px;
}
.menu-bar .fa
{
	margin-right: 8px;
}
.sub-menu-1
{
display: none;
}
.menu-bar ul li:hover .sub-menu-1
{
	display: block;
	position: absolute;
	background: rgb(100,100,100);
	margin-top: 15px;
	margin-left: -15px;
}
.menu-bar ul li:hover .sub-menu-1 ul
{
	display: block;
	margin: 10px;
}
.menu-bar ul li:hover .sub-menu-1 ul li
{
	width: 150px;
	padding: 10px;
	border-bottom: 1px dotted #fff;
	background: transparent;
	border-radius: 0;
	text-align: left;
}
.menu-bar ul li:hover .sub-menu-1 ul li:last-child
{
	border-bottom: none;
}
.menu-bar ul li:hover .sub-menu-1 ul li a:hover
{
	color: #fff;
}
.fa-angle-right
{
	float: right;
}
.sub-menu-2
{
	display: none;
}
.hover-me:hover .sub-menu-2
{
	position: absolute;
	display: block;
	margin-top: -40px;
	margin-left: 140px;
	background: rgb(100,100,100);
}
.loginbox
{
	width: 320px;
	height: 420px;
	background: #151515;
	color: #fff;
	top: 50%;
	left: 50%;
	position:absolute;
	transform: translate(-50%,-50%);
	box-sizing: border-box;
	padding: 70px 30px;
}
.avatar
{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	position: absolute;
	top: -50px;
	left: calc(50% - 50px);
}
h1
{
	margin: 0;
	padding: 0 0 20px;
	text-align: center;
	font-size: 22px;
}
.loginbox p
{
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input
{
width: 100%;
margin-bottom: 20px;
}
#div1
{
	background-image: url(bcka.jpeg);
	width: 1600px;
	height: 750px;
}   
#div2
{
	background-image: url(cos.jpeg);
	width: 1600px;
	height: 750px;
}   
#div3
{
	background-image: url(bcksx.jpeg);
	width: 1600px;
	height: 750px;
}   
.image1
{
	background-image: url(serie1.jpeg);
	width: 600px;
	height: 371px;
	position: relative;
	left: 50px;
	top: 30px;
}
.image2
{
	background-image: url(serie2.jpg);
	width: 474px;
	height: 316px;
	position: relative;
	left: 50px;
	top: 30px;
}
.image3
{
	background-image: url(serie3.jpeg);
	width: 600px;
	height: 427px;
	position: relative;
	left: 50px;
	top: 30px;
}
.image4
{
	background-image: url(serie4.jpeg);
	width: 600px;
	height: 330px;
	position: relative;
	left: 50px;
	top: 30px;
}
.image5
{
	background-image: url(serie5.jpeg);
	width: 600px;
	height: 430px;
	position: relative;
	left: 50px;
	top: 30px;
}
.image6
{
	background-image: url(serie6.jpeg);
	width: 600px;
	height: 430px;
	position: relative;
	left: 50px;
	top: 30px;
}
.image7
{
	background-image: url(serie7.jpeg);
	width: 600px;
	height: 420px;
	position: relative;
	left: 50px;
	top: 30px;
}
.image8
{
	background-image: url(x1.jpeg);
	width: 600px;
	height: 430px;
	position: relative;
	left: 50px;
	top: 30px;
}
.image9
{
	background-image: url(x2.jpeg);
	width: 600px;
	height: 360px;
	position: relative;
	left: 50px;
	top: 30px;
}
.image10
{
	background-image: url(x3.jpeg);
	width: 600px;
	height: 460px;
	position: relative;
	left: 50px;
	top: 30px;
}
.image11
{
	background-image: url(x4.jpeg);
	width: 600px;
	height: 400px;
	position: relative;
	left: 50px;
	top: 30px;
}
.image12
{
	background-image: url(x5.jpeg);
	width: 600px;
	height: 460px;
	position: relative;
	left: 50px;
	top: 30px;
}
.image13
{
	background-image: url(x6.jpeg);
	width: 600px;
	height: 470px;
	position: relative;
	left: 50px;
	top: 30px;
}
.image14
{
	background-image: url(x7.jpeg);
	width: 600px;
	height: 375px;
	position: relative;
	left: 50px;
	top: 30px;
}