@import url(//fonts.googleapis.com/earlyaccess/roundedmplus1c.css);

body{
	text-align:center;
	background-color:#000;
	width: 1800px;
	font-color:#ffffff;
     font:14px/1.8 monospace,sans-serif;
     font-size: 14px;
	 padding: 0;
	 margin: 0;
	 font-family: 'Rounded Mplus 1c',, sans-serif;
	background-image :url("../image/design.png");
	display: block;
	background-repeat:no-repeat; 
	background-attachment:fixed; 
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    word-break: normal;
}

.frame{
	width:800px
	margin:0 auto;
	border:1px solid #aaa;
}
.header{
	padding:90px 10px;
	text-align: center;
	background:#eee;
	margin-bottom:20px;
}
.logo{
	position: fixed;
	font-size:1em;
	font-weight: none;
	background:#000;
	color:#fff;
	display:inline-block;
	padding:0 15px;
}
.container{
	overflow:hidden;
	margin-top: 20px;
}
.nav{
	position: fixed;
	float:left;
	width:150px;
	background: #333;
	background-color: rgba(255,255,255,0.5);
	color:#fff;
	margin-right:50px;
	margin-top: 70px;
}
.nav-list{
	list-style: none;
	margin:0;
	padding:10px 0;
}
.nav-item{
	margin:4px 0;
	text-align: center;
}
.nav-link{
	display:block;
	text-decoration: none;
	padding:4px 10px;
	color:#fff;
}
.nav-link:hover{
	background:#7917fb;

}

.box1 {
	float:left;
	width:900px;

}

}
.footer{
	text-align: right;
	border-top:50px solid #aaa;
	margin-top: 50px;
	margin: 100px 200px 0;
	padding-top: 400px;
	font-size: 12px;
}

.container{
	display: table;
}
.nav,.content{
	display: table-cell;
}
.wrap{ align-content: center;
   width: 4500px;
     height: 500px;
     overflow-x: scroll;
     white-space:nowrap;
     padding-top: 200px;
   }
   .wrap img{
       width:350px;
       height:inherit;
       margin-top:20px;
     }
     .wrap img.full {
     	width: 100%;
     	margin-top: 0;
     }
     .wrap p{
     	width:400px;
     	overflow-wrap: break-word;
     	padding-right:50px;
     	margin-left:25px;
   
}
.scroll{
	width:1000px;
	height:300px;
	white-space:nowrap;
	overflow-x:scroll; }


.main{
	width:900px;
	text-align: center;
	margin-left:center;
	margin-right:center;
}
/*.sub{
	width:300px;
	margin-left:auto;
	margin-right:auto;
}
.clearfix{
	overflow:hidden;
	*zoom:1;
}
.container-image{
	float:right;
	width:40%;
}
.container-text{
	float:right;
	width:60%;
}*/

.menu{
	overflow:hidden;
	*zoom:1;
}
.menu-item{
	float:left;
	background-color:;
	color: #fff;
	width:33%;
	text-align:center;
}
h1{
 font-size:16px;
font-color: #0b3861;
 background-color:#facc2e;
 border-left:40px ;
 padding-left:1em;
 padding-top: 10px;
 padding-bottom:10px;
 border:1px solid #333333;
 margin-bottom: 50px;
 margin-right:70px;
 margin-left:70px;
 }

 .container-text{
 	font-size: 14px;
	 padding: 0;
	 margin-top: : 30px;
	 font-family: monospace;
font-color: #ffffff;
 background-color:#cccccc;
 
 }

p {
 width:500px;
font-color:#ffffff;
 text-align:center;
 background-color: #cccccc;
 border-left:10px solid #cccccc;
 padding-left:2em;
 padding:10px;
 }
em{
   font-size:15.5px

   }
span{
    color:#ffffff
	}
.blue{
      color: #58acfa;
 }
 .red{
 	color:#c42333;
 }
 .orange{
 	color:#ffbf00;
 }
 .yellow{
 	color:#C49E23;
 }
 .pink{
 		color:#f7819f;
 }
 .purple{
 	color:#9a2efe;
 }
 .green{
 	color:#5fb404;
 }
 .purple{
 	color:#ac58fa;
 }
 .lead{
       font-weight: bold;
	   font-color:#0000ff;
	   font-size: 14px;
	 padding: 0;
	 margin: 0;
	 font-family: sans;
 background-color:#cccccc;
	   }
img{ 

}

.box1{
	max-width:800px;
	height:500px;
	float:left;
	clear:none;
	background-color:#000000;
	margin-left:10px;
	


}
.boxl{
	float:left;
	margin: 0 auto;
	width:400px;
	height:auto;
	background-color:none;
}
.boxl img.full{
	width:100%;
	margin-top: 0;
}
.boxr{
	float:center;
	background-color:#010101;
	text-align:left;
	text-decoration-color:#ffffff;
	width:400px;
	margin-left:10px;
	margin-right: 15px;
	margin-top: 50px;
	padding-bottom: : 10px;
	height:auto;	
	overflow:hidden; 
	white-space:initial;
	
}
.b{
	width: 100px;
color: #fff;
text-align: left;


}

.multi{
	line-height: 50px;
	margin-top: 50%;
}

.box2 img{
	width: 500px;
	height:auto;
}
::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #000; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: url('./images/bg.png') #fcc91c}
::-webkit-scrollbar-track {background: #fcc91c; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.0)}
::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

body {
    font-family: 'Lato', sans-serif;
    background: ;
    color: #FFF;
}

span.icon {
    margin: 0 5px;
    color: #D64541;

}

.mrng-60-top {
    margin-top: 30px;
}
/* Global Button Styles */
a.animated-button:link, a.animated-button:visited {
    position: fixed;
    display: block;
    margin: 30px auto 0;
    padding: 14px 15px;
    color: #fff;
    font-size:14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    letter-spacing: .08em;
    border-radius: 0;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
    content: "";
    position: fixed;
    height: 0%;
    left: 50%;
    top: 50%;
    width: 150%;
    z-index: -1;
    -webkit-transition: all 0.75s ease 0s;
    -moz-transition: all 0.75s ease 0s;
    -o-transition: all 0.75s ease 0s;
    transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
    color: #FFF;
    text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
    height: 450%;
}
a.animated-button:link, a.animated-button:visited {
    position: fixed;
    display: block;
    margin: 30px auto 0;
    padding: 14px 15px;
    color: #fff;
    font-size:14px;
    border-radius: 0;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    letter-spacing: .08em;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}


/* Thar Buttons */

a.animated-button.thar-one {
    color: #fff;
    cursor: pointer;
    display: block;
    position: fixed;
    top:10px;
    left:5px;
    border: 2px solid #F7CA18;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-one:hover {
    color: #000 !important;
    background-color: transparent;
    text-shadow: none;
}
a.animated-button.thar-one:hover:before {
    bottom: 0%;
    top: auto;
    height: 100%;
}
a.animated-button.thar-one:before {
    display: block;
    position: fixed;
    left: 5px;
    top: 10px;
    height: 0px;
    width: 100%;
    z-index: -1;
    content: '';
    color: #000 !important;
    background: #F7CA18;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-two {
    color: #fff;
    cursor: pointer;
    display: block;
    position: fixed;
    top:10px;
    left: 170px;
    border: 2px solid #F7CA18;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-two:hover {
    color: #000 !important;
    background-color: transparent;
    text-shadow: ntwo;
}
a.animated-button.thar-two:hover:before {
    top: 0%;
    bottom: auto;
    height: 100%;
}
a.animated-button.thar-two:before {
    display: block;
    position: fixed;
    top:10px;
    left: 170px;
    bottom: 0px;
    height: 0px;
    width: 100%;
    z-index: -1;
    content: '';
    color: #000 !important;
    background: #F7CA18;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-three {
    color: #fff;
    cursor: pointer;
    display: block;
    position: fixed;
    top:10px;
    left:320px;
    border: 2px solid #F7CA18;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
a.animated-button.thar-three:hover {
    color: #000 !important;
    background-color: transparent;
    text-shadow: nthree;
}
a.animated-button.thar-three:hover:before {
    left: 0%;
    right: auto;
    width: 100%;
}
a.animated-button.thar-three:before {
    display: block;
    position: fixed;
    top: 10px;
    left:320px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: #000 !important;
    background: #F7CA18;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);


0s;
}