:root {
/*
	If changed, update utils-highcharts.php as well
*/
    --blue: #0094C6;
    --white: #FFFFFF;
    --red: #DD1C1A;
    
    --lightblue: #63aec7;
    --lightred: #de7e7c;
    
    --black: #040F16;
    --grey: #C2C7C2;
    --black-op: rgba(0,0,0,0.9);
    --orange: #F7B538;
    
    --gold: #E3B505;
    --purple: #BD93BD;
    --yellow: #FFFD82;
    --green: #39cf38;

	--twitter-blue: #1DA1F2;
}


html {
	min-height:100%;
	background: var(--white);
	height:100%;
}

.notranslate {
    content: "notranslate";
}


@font-face {
	font-family: 'CCC'; /* Name your font family */
	src: url('font-title.otf'); /* Locate the .ttf file within your directory */
}
@font-face {
	font-family: 'Coolvetica'; 
	src: url('font.otf'); 
}


body {
    margin : 0;
	height:100%;
	font-family: 'Coolvetica', sans-serif;
	font-size: larger;
	letter-spacing: .08rem;
    color: var(--black);
}

div#all_page {
	width:100%;
}
div.header {
	display: inline-block;
	background: var(--white);
	font-size: 50px;
  	vertical-align: middle;
	height: 100px;
	line-height: 100px; /*V center*/
	top:0;
	width: 50%;
	z-index: 100;
}

iframe.full_width_video {
    width: 960px;
    height: 540px;
    text-align: center;
}
iframe.half_width_video {
    width: 480px;
    height: 270px;
    text-align: center;
}
video.full_width_video {
    width: 960px;
    height: 540px;
    text-align: center;
}
video.half_width_video {
    width: 480px;
    height: 270px;
    text-align: center;
}

ul.side {
	text-align: center;
	position: fixed;
	display: block;
	top: 0;
	width: min-content;
}
ul.side li {
	display: inline-block;
	width: 100%;
}
ul.side a {
	display: block;
	color: var(--white);
	text-decoration: none;
}
ul.side img {
	width: 60px;
}
ul.side a p {
	display: none;
	padding: 0 10px 0 10px;
}
ul.side li:hover a p {
	display: block;
	width: 250px;
}
ul.side li {
	height:70px;
	opacity: 0.2;
}
ul.side li:hover {
	width:330px;
	opacity: 1;
}
.left {
	float: left;
	left:0;
	text-align: left;
}
.right {
	float: right;
	right: 0;
	text-align: right;
}
ul.left_part a {
	background:var(--blue);
}
ul.right_part a {
	background:var(--red);
}


div.left_part {
    width:50%;
    background-color: var(--white);
    position: fixed;
    z-index: -1;
    height: 100%;
}
div.right_part {
    width:50%;
    background-color: var(--white);
    position:fixed;
    z-index: -1;
    height: 100%;
}

div#central_part {
	width: auto;
    border: 0;
	max-width: 1080px;
    background-color: var(--white);
	border-left: 100px solid var(--white);
	border-right: 100px solid var(--white);
	margin: auto;
	min-height: 100hv;
}
a.hide_link {
	text-decoration: none;
}



/*hr style: https://css-tricks.com/examples/hrs/*/
hr {
	border: 0;
	height: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
	
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--green), rgba(0, 0, 0, 0));
}
/*end hr*/



/*v Table v*/
table {
    width: 100%;
    border-collapse: collapse;
}

td, th {
    border: 1px solid var(--black);
    text-align: center;
	font-size: large;
}

tr {
	height: 40px;
}

table tr:hover {
	background-color: var(--green);
}
table th {
    background-color: var(--black);
    color: var(--green);
}
/*^ Table ^*/



.center {
	text-align: center;
}
.third_width {
	width: 33.33%;
}
.half_width {
	width: 50%;
}
.half_center {
	width: 50%;
	margin-left: 25%;
}
.full_width {
	width: 100%;
}
p {
	padding: 1em 2% 1em 2%;
	text-align: center;
}

img.border {
	border-radius: 20px;
}
p.empty {
	height: 90px;
}


/*Menu*/
ul {
	padding: 0;
	list-style: none;
	margin: 0;
}

/*end menu*/

/*Titles*/
h1 {
	background: var(--black);
	color: var(--green);
	text-align: center;
	padding: 12px 0px;
	font-family: 'CCC', sans-serif;
}



/*Footer*/
img.icon_footer {
    width: 5%;
    margin-left: 3%;
    margin-right: 3%;
    vertical-align: middle;
}


/*Links*/
a:link {
  color: var(--blue);
}
a:visited {
  color: var(--blue);
}
a:hover {
  color: var(--blue);
}
a:active {
  color: var(--blue);
}

/*End Links*/


/* Pictures overlay */
div#fs_pic_div {
	display: none;
	background-color: black;
	display:none;
	width:100%;
	height:100%;
	position: fixed;
	top:0;
	left:0;
	background-color: rgba(0,0,0,0.75);
	text-align: center;
	z-index: 3;
}

div#fs_youtube_div {
	display: none;
	background-color: black;
	display:none;
	width:100%;
	height:100%;
	position: fixed;
	top: 0;
	left: 0;
	padding-top: 15%;
	background-color: rgba(0,0,0,0.75);
	text-align: center;
}

.youtube_overlay {
	cursor: url(/micons/yt_cursor.png), pointer;
}

.flex {
	display: flex;
}
.half {
	flex: 50;
}
/* End Pictures overlay */

.hide {
	display: none;
}