/* CSS VARIABLES
Here you can change the values for all elements that use these variables. 
This way you only have to change them once and not for each element individually. 

--main-spacing: Adds padding in header, sidebar, content and footer
--border-radius: Rounded corners for boxes and links
--menu-link-spacing: Spacing between links in the sidebar, footer, etc.
--footer-columns: Amount of columns side by side
--footer-wide-column-width: If you use class="cell wide", the columns will be rearranged and resized automatically
--container-top-bottom-spacing: Container distance top and bottom
*/

:root {
	--main-spacing: 10px;
	--menu-link-spacing: 3px;
	--main-border-radius: 1px;
	--icons-border-radius: 100%;
	--footer-columns: 3;
	--footer-wide-column-width: 500px;
	--container-top-bottom-spacing: 20px;
}

.head2 {
	font-size: 1.1em;
	font-weight: bold;
	font-style: italic;
	color: #fff;
	background: #77abce;
	text-align: center;
	text-transform: uppercase;
}

.sub {
	border: none;
	text-align: left;
	padding: 2px;
	border-bottom: 1px solid #77abce;
	background-color: #;
	color: #77abce;
}

.subc {
	border: none;
	text-align: center;
	padding: 2px;
	border-bottom: 1px solid #77abce;
	background-color: #;
}

.sub2 {
	border: none;
	text-align: center;
	padding: 2px;
	border-bottom: 1px solid #77abce;
	border-top: 1px solid #77abce;
	background-color: #;
	color: #77abce;
}

.box2 {
         background: rgb(142, 194, 232, 0.08);
         padding: 5px;
         margin-bottom: 10px;
         border-top: 1px solid #77abce;
         border-bottom: 3px solid #77abce;}

::-webkit-scrollbar {
height:3px;
width:5px;
background:#a9dbea;
border:3px solid rgba(225,225,225,0.0);
-moz-background-clip: border;     /* Firefox 3.6 */
-webkit-background-clip: border;  /* Safari 4? Chrome 6? */
background-clip: border-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
-moz-background-clip: padding;     /* Firefox 3.6 */
-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
-moz-background-clip: content;     /* Firefox 3.6 */
-webkit-background-clip: content;  /* Safari 4? Chrome 6? */
background-clip: content-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */}
 
::-webkit-scrollbar-thumb:vertical {
background:#80bfd2;}

body {
	background-color: #f9f8f9;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #93b8db;
}

@font-face {
    font-family: 'Marons';
    src: url('tradecenter.kouyou-design.net/fonts/Marons-Regular.woff2') format('woff2'),
        url('tradecenter.kouyou-design.net/fonts/Marons-Regular.woff') format('woff'),
        url('tradecenter.kouyou-design.net/fonts/Marons-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}



/* STANDARDS
Headlines, normal links, text fields and formatting
*/

a {
	color: #9dd5e5;
}

a:hover {
	color: #f5b5be;
}

b,
strong {color: #f5b5be;}

i,
em {color: #9dd5e5;}

h1 {
font-family: 'Marons';
background-repeat:no-repeat;
text-align:left;
letter-spacing:2px;
border-bottom: 1px solid #77abce;
margin-bottom: 15px;
color: #77abce;
    font-size: 15pt;
	text-align:left;
}

h2 {
    background-color: #f9f7f7;
    border-bottom: 1px dashed #ed8b9d;
    color: #ed8b9d;
	margin-bottom: 5px;
	margin-top: 5px;
	margin-left: 50px;
	margin-right: 50px;
    font-family: consolas;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
h3 {}

input {
	width: 50%;
}

textarea {}

button {}

input,
select,
textarea,
button {
	border-radius: var(--main-border-radius);
}


/* Layout CSS starts here */

#container {
	width: 960px;
	margin: var(--container-top-bottom-spacing) auto;
	display: grid;
	grid-gap: var(--main-spacing);
	grid-template-columns: 230px 1fr 230px;
	grid-template-areas: 
		"topbar topbar topbar" 
		"header header header" 
		"sidebar content content" 
		"footer footer footer";
}


header {
	grid-area: header;
	background: #aaa;
	height: 200px;
	background: url('../images/header.png');
	background-position: center;
	border-radius: var(--main-border-radius);
	box-shadow: 0px 0px 30px rgba(0,0,0, 0.1);
	border: 5px solid #fff;
}

#sidebar {
	grid-area: sidebar;
}

#sidebar .box {
	padding: var(--main-spacing);
	margin-bottom: var(--main-spacing);
	background: #fff;
	border-radius: var(--main-border-radius);
	box-shadow: 0px 0px 30px rgba(0,0,0, 0.1);
}

#sidebar nav a {
	color: #93b8db;
	background: #;
	padding: 2px 2px;
	display: block;
	border-radius: var(--main-border-radius);
	border-bottom: 1px solid #93b8db;
}

#sidebar nav a:hover {
	background: #;
	color: #f4b2be;
	border-bottom: 1px solid #f4b2be;
	font-style:italic;
}

#sidebar nav:not(.table) a:not(:last-child) {
	margin-bottom: var(--menu-link-spacing);
}

#content {
	grid-area: content;
	background: #fff;
	border-radius: var(--main-border-radius);
	box-shadow: 0px 0px 30px rgba(0,0,0, 0.1);
	padding: var(--main-spacing);
	position: relative;
}

footer {
	grid-area: footer;
	background: #eee;
	border-radius: var(--main-border-radius);
	box-shadow: 0px 0px 30px rgba(0,0,0, 0.1);
	padding: var(--main-spacing);
}

footer .grid {
	display: grid;
	grid-gap: var(--main-spacing);
	grid-template-columns: repeat(var(--footer-columns), 1fr);
	/* 3 boxes side by side, 1fr = auto width */
}

footer .column {
	background: #fff;
	border-radius: var(--main-border-radius);
	padding: var(--main-spacing);
}

footer .column a {
	color: #777;
	background: #eee;
	padding: 5px 10px;
	display: block;
	border-radius: var(--main-border-radius);
}

footer .column a:hover {
	background: #ccc;
}

footer .column a:not(.table a):not(:last-child) {
	margin-bottom: var(--menu-link-spacing);
}

footer .wide {
	width: var(--footer-wide-column-width);
}

#sidebar nav.table, footer .column .table {
	display: grid;
	grid-gap: var(--menu-link-spacing);
	grid-template-columns: repeat(2, 1fr);
	/* 2 links side by side, 1fr = auto width */
}

/* Hides the sidebar toggle for desktop browsers */

label.sidebarToggle,
input.sidebarToggle {
	display: none;
	visibility: hidden;
}


/* Mobile adjustments */

@media only screen and (max-width: 768px) {
	input:not([type=checkbox]):not([type=radio]) {
		width: 70%;
	}
	header {
		background-size: cover;
	}
	#container {
		position: relative;
		margin: 0;
		padding: 0;
		width: 100%;
		grid-template-columns: 100%;
		grid-template-areas: 
			"topbar" 
			"header" 
			"content" 
			"footer";
	}
	#topbar #social {
		margin-right: 50px;
	}
	footer .grid {
		grid-template-columns: 100%;
	}
	footer .wide {
		width: 100%;
	}
	#sidebar {
		display: contents;
	}

	#sidebar .box {
		width: 100%;
	}

	/* Sidebar background and position */
	.slidebar {
		position: absolute;
		left: 0;
		top: -100%;
		width: 100%;
		background: #fff;
		padding-top: 50px;
		z-index: 1;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
	}

	/* Sidebar toggle */
	label.sidebarToggle:before {
		content: "\2261";
		font-size: 18pt;
		z-index: 2;
		position: relative;
		padding: var(--main-spacing);
	}
	label.sidebarToggle {
		display: block;
		visibility: inherit;
		cursor: pointer;
		grid-area: topbar;
		align-self: center;
		margin-left: auto;
	}
	/* Slide in the sidebar when the toggle is clicked */
	input.sidebarToggle:checked~.slidebar {
		top: 0;
	}
	/* Change toggle icon when the sidebar is visible */
	input.sidebarToggle:checked~label:before {
		content: "\039E";
	}
}