@charset "utf-8";

/* CSS Document */
@font-face {
	font-family: Brown;
	src: url('fonts/Brown-Regular.ttf') format('truetype');
	font-weight: normal;
}

body {
	background-image: url("images/bg.jpg");
	background-repeat: no-repeat;
	font: normal 14px/22px "Brown";
}
.clear{clear: both;}
.initialbox {
	text-align: center;
	margin:60px auto 0 auto;
	width: 100%;
	color: #ffffff;
}


.initiallft {
	text-align: right;
	width: 49%;
	margin: 0 5px 0 0;
	float: left;
}
.initialrght {
	text-align: left;
	width: 49%;
	float: right;
}
.bx_mid{ margin: 20px 0 0 0; width: 100%;}

h1 {
	font: normal 26px/42px "Brown" ;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 20px;
}


.footer{
	color: #fff;
	font-size: 12px;
	padding:40px 0 0 0;
}



@media only screen and (max-width: 1024px) {
	.initialup {
		text-align: center;
		height: calc(100vh - 795px);
		display: flex;
        flex-flow: column;
        justify-content: center;
	}
	.maininitials{
		padding: 15px;
		box-sizing: border-box;
		height: 420px;
        background-size: cover;
	}
	.initialmidlft{
		width: 100%;
        text-align: center;
		margin-top: 20px;
	}
	.initialmidlft img{
		width: 50%;
	}
	.initialmidrght{
		text-align: center;
		width: 100%;
	}
}

@media only screen and (max-width: 768px) {
	.initialbox {
		margin: 80px 0 0 0;
	}

	h1 {
		font: bold 28px/38px "Brown";
		color: #ffffff;
		text-transform: uppercase;
		letter-spacing: 10px;
	}

	h2 {
		font: normal 42px/60px "Playfair Display", Georgia, sans-serif;
		color: #ffffff;
	}

	.maininitials {
		display: flex;
		align-items: center;
		flex-flow: column;
		justify-content: center;
		height: 450px;
		background-size: cover;
	}

	.initialmidlft {
		width: 100%;
		margin-top: 0px;
		text-align: center;
	}

	.initialmidlft img {
		width: 50%;
		text-align: center;
	}

	.initialmidrght {
		width: 100%;
		text-align: center;
	}
	
	
}