@charset "utf-8";
/* CSS Document */
html, body {
	height:100%;	
}

*{
	margin: 0;
	padding:0;
	box-sizing:border-box;	
}

ul{
	list-style:none;
}


body{
	width: 100%;
	margin: 0 auto;
	font-size:1.5rem;
	line-height:1;
	color:#666;
	font-family: 'Roboto Condensed', sans-serif;
	background-color:gray;
	
}
.logo{
	
	color:#fff;
	font-weight:700;
	background-color: black;
	margin-left:150px;
}

/*Nav Style*/

nav{
	width:1550px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
	background-color:black;
	padding:1rem 0;
	margin-right:20px;
	
}

.menu >li, .menu > a{
	display:inline-block;
	background-color: black;
	margin-right:50px;
	
}
.menu li{
	position:relative;
	
	
}
.menu a{
	text-decoration:none;
	color:#fff;
	display:block;
	padding:10px 1.5rem;
	transition:background-color .22s ease, color .27s ease;
}
.menu a:hover{
	background-color:#f34949;
	color:#fff;
}
.submenu{
	position:absolute;

	width:160px;
	left:0;
	display:none;
}

.submenu2 {
	position:absolute;

	left:100%;
	width:160px;
	top:0;
	display:none;
}

.submenu3 {
	position:absolute;

	left:100%;
	width:160px;
	top:0;
	display:none;
}

.submenu4 {
	position:absolute;

	left:100%;
	width:160px;
	top:0;
	display:none;
}
.submenu5 {
	position:absolute;

	left:100%;
	width:160px;
	top:0;
	display:none;
}

.menu li:hover > .submenu{
	display:block;
	animation:slideup .3s ease;
	
}
.submenu li:hover > .submenu2{
	display:block;
	animation:slideup .3s ease;
}
.submenu li:hover > .submenu3{
	display:block;
	animation:slideup .3s ease;
}
.submenu li:hover > .submenu4{
	display:block;
	animation:slideup .3s ease;
}
.submenu li:hover > .submenu5{
	display:block;
	animation:slideup .3s ease;
}

/* Header */
.header{
}

.header h2 {
	height:100%;
	width:100%;
	
	
}
h1 {	
	padding:1rem 0;		
	text-align: center;
	color:white;	
}

#container {
	
	width:100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;	
}

/*    Sidebar     */

.sidebar1{

	font-size:20px;
	font-family:arial;
	width:30%;
	float:left;
}
.sidebar1, h2{
	text-align: center;
	color:white;
	padding:1rem 0;
}
.sidebar1 il{
	float:left;
	margin-left:10px;
}

/*main body style*/

.MainBody{
	
	overflow:hidden;
	height: auto;
	width:70%;	
	margin-bottom:0px;
	margin-top:0px;
	float:left;
	
	}

.MainBody p{
    font-size: 1em;
	margin:25px;
	color:white;
	
}

.MainBody figure div {
	float:left;
	width:20%;
	margin:0px;
	margin-left:0px;
}
.MainBody figure img {
	width:100%;	
	margin:0px;
}
.MainBody figure{
	position:relative;
	width:500%;
	margin:0px;
	left:0;
	animation: 30s ravi infinite;
}

 .leftsidebar {
  display: block;
  list-style-type: disc;  
  
  margin-right:20px;
 
  color: white;
  width:300px;
  font-size:20px;
  float:left;
  height: auto;
  
}


#MainBody form {
    margin:0px auto;
    width:300px;
	float:left;
}
input, textarea {
	width:300px;
	height:20px;
	background:white;
	border:1px solid #dedede;
	padding:10px;
	margin-top:5px;
	font-size:0.9em;
	color:#3a3a3a;
	 -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:3px;
	margin-left:30px;
	
}
textarea {
	height:50px;
	background:#ccc;
}
input:focus, textarea:focus {
    border:1px solid #97d6eb;
}


label {
    display:block;    
    letter-spacing:2px;
	margin-left:30px;
	margin-top:3px;
}
#submit {
	width:127px;
    height:38px;
    background:orange;    
    border:none;
    margin-top:10px;
    cursor:pointer;
	float:left;
}
   #submit:hover {
	    opacity:.9;
	}



.center{
	width:600px;
	float:left;
	height:100%;


	
}

.rightSide{
	margin: 0;
	padding: 0;
	width:300px;
	float:right;
	height:100%;	
	
}






/*Animation Keyfram*/
@keyframes slideup{
	0%{
		opacity:0;
		transform:translate(18px);
	}
	100%{
		opacity:1;
		transform:none;
	}
}

@keyframes slideleft{
	0%{
		opacity:0;
		transform:translateY(18px);
	}
	100%{
		opacity:1;
		transform:none;
	}
}






#flatRate{
	text-align:center;
	color:yellow;
	font-size:25px;
}
#container #MainBody {

	width:1000px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	
	
}

.slider {	
	overflow:hidden;
	height: auto;
	width:900px;	
	margin-bottom:0px;
	margin-top:0px;
	float:right;
	
	
}
input[type=text] {
  width: 25%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
.slider h2{
	font-size: 2em;
	margin-top: 10px;
	text-align: center;
	margin-bottom: 15px;
	color:yellow;
	
}
.slider p{
	font-size: 1.5em;
	margin:25px;
	color:white;
	
	
	
}
.slider figure div {
	float:left;
	width:20%;
	margin:0px;
	margin-left:0px;
}
.slider figure img {
	width:100%;	
	margin:0px;
}
.slider figure{
	position:relative;
	width:500%;
	margin:0px;
	left:0;
	animation: 30s ravi infinite;
}

@keyframes ravi{
	0%{left:0%;}
	10%{left:0%;}
	12%{left:-100%;}
	22%{left:-100%;}
	24%{left:-200%;}
	34%{left:-200%;}
	36%{left:-300%;}
	46%{left:-300%;}
	48%{left:-400%;}
	58%{left:-300%;}
	60%{left:-300%;}
	70%{left:-300%;}
	72%{left:-200%;}
	82%{left:-200%;}
	84%{left:-100%;}
	94%{left:-100%;}
	96%{left:0%;}
	
	
}
#SideBar {
	width: 300px;
	height: auto;
	background-color: gray;
	float:left;
	
	
	
}
   #SideBar img{
	   margin:5px;
	   margin-bottom:20px;	
    }
	#SideBar #Sidebar_title {
		margin-top: 10px;
		color:yellow;
		font-size:20px;
		font-family:arial;
		
		text-align:center;
    }
	#SideBar h4{
		color:yellow;
		font-size:20px;
		font-family:arial;
		padding:0px;
		text-align:center;
    }
	
	


    #MainBody h1{
		text-align:center;
		margin:5px;
		color:yellow;
		font-size:25px;
		
    }
	#MainBody h2{
		text-align:center;
		color:yellow;
		font-size:25px;
		
    }
	#MainBody h3{
		text-align:center;
		color:yellow;
		font-size:25px;
		
    }
	
	#MainBody img{
		margin-left:10px;	
    }
	#MainBody p{
		margin:25px;
		font-size:20px;	
		color:white;
		margin-left:25px;
    }


#Footer {
	
	height: 60px;
	margin-bottom: 0px;
	background-color:black;
	text-align: center;
	clear: both;
	
	
}

	
@media only screen and (max-width: 1199px){
	#container {width:100%;}
	.header{width:100%;}	
	.SideBar1 {width: 30%;}	
	.MainBody {width: 70%;}
	
	form {width:70%;}
	input, textarea {width:70%;}
	.Footer {width:100%;}
	.MainBody table{width:90%;}
	.slider {width:100%;}
	.slider figure img {width:100%;}
}

@media only screen and (max-width: 640px){
    .header{width:100%;}
    .SideBar1 {width:100%;}
    .MainBody {width: 100%;}
    form {width:100%;}
    table{width:100%;}
	
}

@media screen and (max-width: 320px){
	#container {width:320px;}
}