/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark

, html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video
*/

@import url('https://fonts.googleapis.com/css2?family=PT+Serif&display=swap');

* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
	font-family: font-family: 'PT Serif', serif;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}


body {
--    background-image: url(../images/background.jpg);
    background-size:cover;
    background-attachment: fixed;
    line-height:1;
}

.bodytext{
	background: #fff;
	position: fixed;
	top: 5;
	left: 278px;
	width: 100%;
	height: 100%;
	font-family: font-family: 'PT Serif', serif;
    font-size:100%;
}

.normaltext{
	background: #fff;
	position: fixed;
	top: 40;
	left: 325px;
	width: 80%;
	height: 100%;
	font-size: 150%;
}

.wrapper .sidebar{
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 275px;
	height: 100%;
	padding: 30px 0;
	transition: all 0.5s ease;
}

.wrapper .sidebar .logo{
	margin-bottom: 30px;
	text-align: center;
	
}

.wrapper .sidebar .logo img{
	display: block;
	width: 250px;
	height: 100x;
	margin: 0 auto;
}

.wrapper .sidebar ul li a{
	display: block;
	padding: 13px 30px;
	border-bottom: 1px solid #ececec;
	color: #666;
    list-style:none;
	font-size: 18px;
	position: relative;
}

.wrapper .sidebar ul li a .icon{
	color: #c7cfdb;
	width: 30px;
	display: inline-block;
}

.wrapper .sidebar ul li a:before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 3px;
	height: 100%;
	background: #8d599f;
	display: none;
}

.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a:active{
	color: #a503fc;
	background: linear-gradient(to right, #fff, #f6edfc);
}

.wrapper .sidebar ul li a:hover .icon{
	color: #a503fc;
	
}


.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a:active:before{
	display: block;
}


/* ********************************************************* */
/*                        Green                              */
/* ********************************************************* */

.wrapper_g .sidebar_g{
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 275px;
	height: 100%;
	padding: 30px 0;
	transition: all 0.5s ease;
}

.wrapper_g .sidebar_g .logo_g{
	margin-bottom: 30px;
	text-align: center;
	
}

.wrapper_g .sidebar_g .logo_g img{
	display: block;
	width: 250px;
	height: 100x;
	margin: 0 auto;
}

.wrapper_g .sidebar_g ul li a{
	display: block;
	padding: 13px 30px;
	border-bottom: 1px solid #ececec;
	color: #666;
    list-style:none;
	font-size: 18px;
	position: relative;
}

.wrapper_g .sidebar_g ul li a .icon{
	color: #c7cfdb;
	width: 30px;
	display: inline-block;
}

.wrapper_g .sidebar_g ul li a:before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 3px;
	height: 100%;
	background: #8d599f;
	display: none;
}

.wrapper_g .sidebar_g ul li a:hover,
.wrapper_g .sidebar_g ul li a:active{
	color: #a503fc;
	background: linear-gradient(to right, #fff, #f6edfc);
}

.wrapper_g .sidebar_g ul li a:hover .icon{
	color: #a503fc;
	
}


.wrapper_g .sidebar_g ul li a:hover:before,
.wrapper_g .sidebar_g ul li a:active:before{
	display: block;
}



/* ********************************************************* */
/*                        Yellow                             */
/* ********************************************************* */



.wrapper_y .sidebar_y{
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 275px;
	height: 100%;
	padding: 30px 0;
	transition: all 0.5s ease;
}

.wrapper_y .sidebar_y .logo_y{
	margin-bottom: 30px;
	text-align: center;
	
}

.wrapper_y .sidebar_y .logo_y img{
	display: block;
	width: 250px;
	height: 100x;
	margin: 0 auto;
}

.wrapper_y .sidebar_y ul li a{
	display: block;
	padding: 13px 30px;
	border-bottom: 1px solid #ececec;
	color: #666;
    list-style:none;
	font-size: 18px;
	position: relative;
}

.wrapper_y .sidebar_y ul li a .icon{
	color: #c7cfdb;
	width: 30px;
	display: inline-block;
}

.wrapper_y .sidebar_y ul li a:before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 3px;
	height: 100%;
	background: #8d599f;
	display: none;
}

.wrapper_y .sidebar_y ul li a:hover,
.wrapper_y .sidebar_y ul li a:active{
	color: #a503fc;
	background: linear-gradient(to right, #fff, #f6edfc);
}

.wrapper_y .sidebar_y ul li a:hover .icon{
	color: #a503fc;
	
}


.wrapper_y .sidebar_y ul li a:hover:before,
.wrapper_y .sidebar_y ul li a:active:before{
	display: block;
}


#scroll-container {
  border: 3px solid black;
  border-radius: 5px;
  overflow: hidden;
}

#scroll-text {
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  
  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }