html, body
{padding: 0; margin: 0;}

body
{	background: #3c3c3c ; font-family: 'Pragati Narrow', sans-serif; width: 100%; height: auto; margin: 0;  overflow: auto; }

body *
{	text-shadow: none;}




h1, h2, h3, h4, h5, h6
{line-height: 1; margin: 0;}

h1{padding: 30px 7.5% 6px 30px; color: white;  margin: 0px;  font-weight:400;  font-size: 2em;  line-height: 1.8em;}

h2{font-size: 1.8em;   color: #ddd; padding: 12px 7.5% 6px 30px;   margin:0;   line-height: 1.2em; font-weight: 400;}

h3{	font-size: 1.2em; line-height: 1.8em; padding: 0px 7.5% 0px 30px; font-weight: 500; color: white;}

h4{	font-size: 1.2em; padding: 0 5% 0 5%; color: #FCA105; font-weight: 100; margin: 0;}


p{ font-size: 1em;  padding: 2px 7.5% 23px 30px;   
margin:0px;  font-weight: normal; color:#fff; 
line-height: 1.8em; 
max-width: 75em;}


@media only screen and (max-width: 480px) { 
 h1 {padding: 0 1%; font-size: 2em !important;} 
 h2 {font-size: 1.4em; padding:  0px 3% 0 30px !important;}
 h3 {font-size: 1.2em; padding: 12px 3% 0 30px; }
 p {padding:0px 3% 12px 30px; 	font-size: 1em;  }
}


ul li {list-style-type: disc; color: #400; margin: 0 0 0 18px; padding: 0;}

img {width: 100% ; height: auto; }

.look {color: orangered; font-size: 1.2em;}
.white {color: white; }

.sky {color: skyblue;}
.sky:hover {color: white;}

.spacer {
  clear: both;;
  height: 60px;
  }

@media only screen and (max-width: 480px) {	 
.big{  font-size:1.2em; opacity:.9; line-height: .8em;}
.red {color:#ED2939;  font-size:.8em; opacity:.5; line-height: .8em; border-bottom:0; padding: 0 0 23px 0; text-shadow: 0;}
 }


a, a:link, a:active, a:visited, a:hover
{color: yellow; border-bottom: 0; text-decoration: none; outline:none;}
a {outline: none;}
a:hover{  text-decoration: none; outline:none; background: transparent;  transition: 0.5s; color: #000;}
a:active {color: orangered;}



/* width */
::-webkit-scrollbar {
  width: 16px;
}


/* Track */


/* Handle */
::-webkit-scrollbar-thumb {
  background: #454545;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background:skyblue;
}



#contain 
{height: 100%; width: 12000px; background: #3c3c3c;}





.header
{	background: #2a2a2a;
	font-weight: normal;
	color: #fff;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%; top: 0;
	height: 46px; 
	padding: 0 50px; position: fixed; opacity: .8;}

		.header img {padding: 0 0 0 3.2%;}
	
	.header2
{	background: #000;
	font-weight: normal;
	color: #fff;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%; top: 0;
	height: 50px; opacity: .9;
	padding: 7px 0px 0 0; position: fixed;}
	
	@media only screen and (min-width: 600px) { 
		.header {width: 10%;}
		.header2 {display: none;}
			.header FixedTop {display: none}
	}
	

	
	.header a
{	background: center center no-repeat transparent;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	display: block;	width: 40px; height: 40px; position: absolute;	top: 5px;	left: 12px; }
	
	@media only screen and (min-width: 600px) 
{ .header a {display: none; }
.header {display: none;}
}
	
.header.fixed{ position: fixed; top: 0; left: 0;  }


/* for desktop yada */
#nav {width: 100%; height: 50px; background: #000;  position: fixed; }

@media only screen and (max-width: 480px) 
{ #nav {display: none;}
}

#nav h3 {padding: 15px 0 10px 0px; font-weight: normal; font-size: 1.08em; color: #555; margin: 0;}

@media only screen and (min-width: 720px) {
#nav h3 {padding: 15px 0 10px 130px; }	}


@media only screen and (max-width: 768px) {
#nav h3 { font-size: .85em; }	}

@media only screen and (max-width: 668px) {
#nav h3 { font-size: .8em; padding: 15px 0 0 125px; }	}






#nav 
{width: 100%;  background: #2a2a2a; position: fixed; border-bottom: #333 solid 8px; padding: 0;}

#nav a {border: 0; color: #fff; padding: 0 6px;}
#nav a:hover {color: skyblue;}

#nav a:active  {background: transparent; color:white !important;}/*{background: orangered;  padding: 40px 6px 25% 6px;  border-top: 22px solid #fff; color: #fff !important;  } */

@media only screen and (max-width: 600px) 
{ #nav {display: none;}
}

#nav h3 {padding: 8px 0 0 30px !important; font-weight: normal; font-size: 1.2em; 
color: skyblue; line-height: 56px;}

@media only screen and (min-width: 768px) {
#nav h3 {padding: 15px 23px 0 12px; }	}


/* menu stuff g'wan 'ere*/

nav:not(.mm-menu)
{display: none;}



#menu p{color: #ffc; padding: 20px; font-size: 1em; background: transparent; font-weight: normal;}
#menu li {font-size: 1.2em;}

#menu li a {color: white;}
#menu li a:hover {background: black;}

/*--------------- content */

#banner {width: 100%; height: auto; background: #3c3c3c; padding: 50px 0 0 0;}

#banner h3 {font-size: 1.2em; letter-spacing: 0.5em; padding: 0% 7.5% 5% 2% !important;  color: #ccc; margin: 0; font-weight: 400;}

@media only screen and (max-width: 480px) 
{ #banner h1  {font-size: 1.4em; padding:  15% 2.5% !important; line-height: 1.08em;}
}

#banner a {color: #fff;}
#banner a:hover {color: #ccc; background: transparent; text-shadow: 500px 500px 800px white;}


#intro {background:transparent; height: auto; padding: 0;}


#first { height: auto; background:transparent; width: auto; }
#first h1 {color: skyblue; padding: 23px 0% 3px 30px;}
#first img {max-width:100%;}
#first a {color: white; border-bottom: 0; padding: 0 4px}
#first a:hover {border:0; background: #2a2a2a; transition: 2.3s; opacity: .8; }



#pic {height: auto; width: auto; margin: 0px ;  padding:0px;  
 float: left; 
} 
#pic img {padding: 0;}
#pic h5 {color: #aaa; font-size: .9em; padding: 12px 0 0 0; text-align: center !important; color: #aaa;}
#pic li {display:inline-block; padding: 0 25px 0 25px; background: transparent;}

@media only screen and (max-width: 600px) {
#pic li {display:inline-block; padding: 0; background: #222; padding: 0 !important; margin: 0 !important;}
}



@media screen and (max-width: 767px) {
	#pic {height: 450px; width: auto;}
	#pic img {max-width: 60%; height: auto;}
}


.horizontal_scroll {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 1px 0px;
  display : -ms-flexbox ;
  display: flex; }

/* Cancel horizontal scrolling when screen width is 768px or more */
@media screen and (min-width: 768px) {
  .horizontal_scroll {
    overflow-x: inherit;
    padding: 0 8px 6px; } }

.horizontal_scroll  >  li {
  width: 100%;
  min-width: 140px; }

@media screen and (min-width: 768px) {
  .horizontal_scroll  >  li {
    min-width: inherit; } }

.horizontal_scroll > li:not(:last-child) {
  margin-right: 5px; }

.horizontal_scroll > li:last-child {
  padding-right: 5px; }

@media screen and (min-width: 768px) {
  .horizontal_scroll > li:last-child {
    padding-right: 0; } }

.horizontal_scroll img {
  vertical-align: bottom; }





#second { height: auto; width: 98%;    margin: 0 0 0 2%;}


#third { height: 50px; background: #3C3C3C;}
#third img {max-width: 10%; padding: 0 0 0 30px; }
#four{ height: auto;   background: #3c3c3c; width: 100%; padding: 0; margin: 0;} 






#footer
{ width: 100%; height: 80px; margin:0; padding: 0; float: left; background: #3c3c3c; } 

#footer h2 {font-size: 1.4em; color: skyblue;}
#footer h3 {font-size: 1.08em;  margin: 0; padding:0 0 0 30px; font-weight: normal; color: skyblue; } 

#footer a {color: #bbb; border:0;}
#footer a:hover {color: #fff;}


.sml {font-size: .666em; padding: 0; color: skyblue; }
.sml2 {font-size: .666em; padding: 0; color: purple;  }
.sml3 {font-size: .666em; padding: 0; color: goldenrod;  }

.sml2-line {font-size: .666em; padding: 0; color: purple; /*text-decoration-line: line-through;  */}


@media only screen and (max-width: 480px) {
  #footer	{ position: relative;	font-weight: normal;	width: 100%;	height: 80px;  margin: 0;  }
	
 #footer h3 {font-size: 1.2em !important; line-height: 1.8em; margin: 0; padding:23px 0 0 3% !important; font-weight: normal; bottom: 0;} 

}