html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video{
    margin:0;
    padding:0;
    border:0;
    /*font-family:'Nunito Sans', sans-serif;*/

    font-size: 100%;
    font-family:inherit;
    vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

/*.column{*/
/*	float:left;*/
/*}*/

/*.left{*/
/*	width:25%;*/
/*}*/

/*.right{*/
/*	width:75%;*/
/*}*/

/*.row:after {*/
/*  content: "";*/
/*  display: table;*/
/*  clear: both;*/
/*}*/


/*Basic and MORE!!*/

html {
	box-sizing: border-box;
}

	body.is-preload *, body.is-preload *:before, body.is-preload *:after {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		-moz-transition: none !important;
		-webkit-transition: none !important;
		-ms-transition: none !important;
		transition: none !important;
	}
a {
	text-decoration: none;
	color: inherit;
	/*border-bottom: dotted 1px rgba(128, 128, 128, 0.5);*/
	-moz-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
	-webkit-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
	-ms-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
	transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
	outline: 0;
}


/* Sections/Article */

	/*section, article {*/
	/*	margin-bottom: 4em;*/
	/*}*/

		/*section > :last-child,*/
		/*section > .container, section:last-child, article > :last-child,*/
		/*article > .container, article:last-child {*/
		/*	margin-bottom: 0;*/
		/*}*/

		/*.row > section, .row > article {*/
		/*	margin-bottom: 0;*/
		/*}*/

/*icons in the sidebar*/
ul.icons {
    cursor: default;
    list-style: none;
    padding-left: 1em;
}

    ul.icons li {
        display: inline-block;
        padding-left: 0;
    }

    ul.icons a {
        display: inline-block;
        width: 2em;
        height: 2em;
        line-height: 2em;
        text-align: center;
        color:#000000;
        border: 0;
    }

/*HEADER QUESTION*/
#header {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    background: #ffffff;
    color: #fff;
    height: 100%;
    left: 0;
    overflow-y: auto;
    position: fixed;
    text-align: left;
    top: 0;
    width: 375px;

}

		#header .top {
			-moz-flex-grow: 1;
			-webkit-flex-grow: 1;
			-ms-flex-grow: 1;
			flex-grow: 1;
		}

		#header .bottom {
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
			padding: 2em 0em 1em 0;
		}

			#header .bottom > :last-child {
				margin-bottom: 0;
			}

		#header .icons {
			font-size: 1em;
			text-align: left;
		}

			#header .icons a {
				color: #41484c;
				-moz-transition: color 0.35s ease-in-out;
				-webkit-transition: color 0.35s ease-in-out;
				-ms-transition: color 0.35s ease-in-out;
				transition: color 0.35s ease-in-out;
			}

				#header .icons a:hover {
					color: #000000;
				}

/*title name*/
#logo {
		position: relative;
		margin: 0.5em 0.5em 0.5em 0.5em;
		min-height: 48px;
		cursor: default;
        list-style: none;
	}

		#logo h1 {
			position: relative;
			color: #000000;
			font-weight: 700;
			font-size: 1em;
			line-height: 1em;
		}

            #logo h1 a{
                display: block;
                padding: 0.75em 0.25em 0.75em 0.25em;
                font-family:'Nunito Sans', sans-serif;
                font-size:2.5em;
                color:#000000;
                text-decoration: none;
            }


/* nav sidebar: 6 categories */
#nav ul{
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

    #nav ul li{
        padding-left:0;
    }

        #nav ul li a {
            display: block;
            padding: 0.25em 1.5em 0.25em 1.5em;
            font-family:'Nunito Sans', sans-serif;
            font-size:0.8em;
            color:#000000;
            text-decoration: none;
            outline: 0;
            border: 0;
			-moz-transition: none;
			-webkit-transition: none;
			-ms-transition: none;
			transition: none;
        }

        #nav ul li a:hover{
            font-weight:700;
        }

		/*#nav ul li a span {*/
		/*			position: relative;*/
		/*			display: block;*/
		/*			font-size: 0.8em;*/
		/*		}*/

		/*			#nav ul li a span:before {*/
		/*				position: absolute;*/
		/*				left: 0;*/
		/*				color: #41484c;*/
		/*				text-align: center;*/
		/*				width: 1.25em;*/
		/*				line-height: 1.75em;*/
		/*			}*/

				/*#nav ul li a.active {*/
				/*	background: rgba(0, 0, 0, 0.15);*/
				/*	box-shadow: inset 0 0 0.25em 0 rgba(0, 0, 0, 0.125);*/
				/*	color: #fff;*/
				/*}*/

					/*#nav ul li a.active span:before {*/
					/*	color: #e27689;*/
					/*}*/

h2 {
	padding: 0em 0em 0.4em 0em;
	/*position:fixed;*/
	/*z-index: 1;*/
	/*!*display:flex;*!*/
	font-family:'Nunito Sans', sans-serif;
	font-size:1em;
	color:#000000;
	outline: 0;
	border: 0;
	-moz-transition: none;
	-webkit-transition: none;
	-ms-transition: none;
	transition: none;
	/*padding-left:10px;*/
}

h3 a {
	/*position:relative;*/
	font-family:'Nunito Sans', sans-serif;
	font-size:0.8em;
	font-weight: 700;
	list-style: none;
	text-decoration: none;
	color:#000000;
	outline: 0;
	border: 0;
	-moz-transition: none;
	-webkit-transition: none;
	-ms-transition: none;
	transition: none;
	/*padding-left:10px;*/
}

h3 a:hover{
	font-weight:600;

}

p{
	/*position:relative;*/
	font-family:'Nunito Sans', sans-serif;
	font-size:0.8em;
	color:#000000;
	outline: 0;
	border: 0;
	-moz-transition: none;
	-webkit-transition: none;
	-ms-transition: none;
	transition: none;
	/*padding-left:10px;*/
}

/* Carousel */

.carousel {
	position: relative;
	overflow: hidden;
	padding: 1.8em 0 0em 0em;
	margin-bottom: 0;
}

	.carousel .forward, .carousel .backward {
		position: absolute;
		top: 50%;
		width: 1.5em;
		height: 3em;
		margin-top: -1.5em;
		cursor: none ;
	}

		.carousel .forward:before, .carousel .backward:before {
			content: '';
			display: none;
			/*width: 1em;*/
			/*height: 1em;*/
			border-radius: 100%;
			/*background-color: rgba(72, 57, 73, 0.5);*/
			position: absolute;
			top: 50%;
			margin-top: -1em;
			-moz-transition: background-color 0.35s ease-in-out;
			-webkit-transition: background-color 0.35s ease-in-out;
			-o-transition: background-color 0.35s ease-in-out;
			-ms-transition: background-color 0.35s ease-in-out;
			transition: background-color 0.35s ease-in-out;
			-webkit-backface-visibility: hidden;
		}

		.carousel .forward:after, .carousel .backward:after {
			content: '';
			width: 6em;
			height: 6em;
			position: absolute;
			top: 50%;
			margin: -4em 0 0 0;
			background: url("images/arrow.svg") no-repeat center center;
		}

		/*.carousel .forward:hover:before, .carousel .backward:hover:before {*/
		/*	background-color: rgba(239, 131, 118, 0.75);*/
		/*}*/

	.carousel .forward {
		right: 0;
	}

		.carousel .forward:before {
			right: -3em;
		}

		.carousel .forward:after {
			right: -0.25em;
		}

	.carousel .backward {
		left: 0;
	}

		.carousel .backward:before {
			left: -3em;
		}

		.carousel .backward:after {
			left: -0.25em;
			-moz-transform: scaleX(-1);
			-webkit-transform: scaleX(-1);
			-ms-transform: scaleX(-1);
			transform: scaleX(-1);
		}

	.carousel .reel {
		white-space: nowrap;
		position: relative;
		-webkit-overflow-scrolling: touch;
		padding: 0 1em 0 0em;
	}

	/*.carousel h2{*/
	/*	position:fixed;*/
	/*	z-index:100;*/
	/*}*/


	.carousel article {
		display: inline-block;
		width: 22em;
		background: #fff;
		text-align: left;
		padding: 0 2em 3em 0em;
		margin: 0 0em 0 0;
		white-space: normal;
		opacity: 1.0;
		-moz-transition: opacity 0.75s ease-in-out;
		-webkit-transition: opacity 0.75s ease-in-out;
		-ms-transition: opacity 0.75s ease-in-out;
		transition: opacity 0.75s ease-in-out;
	}

		.carousel article.loading {
			opacity: 0;
		}

		.carousel article .image {
		position: relative;
		left: -0.5em;
		top: 0;
		width: auto;
		/*margin-right: -2em;*/
		/*margin-bottom: 3em;*/
		spect-ratio: 4 / 3;
		/*border-right-color:#000000;*/
		/*border-right-style: solid;*/
		/*border-right-width: 4px;*/
	}

		.carousel article .cropped1{
		/*width: 600px; !* width of container *!*/
    	/*height: 256px; !* height of container *!*/
		max-width: 100%;
		height: auto;
    	object-fit: fill;
    	/*border: 4px solid white;*/
		aspect-ratio: 4 / 3;
		/*!*position: absolute;*!*/
        /*bottom: 0px;*/
        /*left: 0px;*/
		}

		/*.carousel article .cropped1.resize{*/
		/*width: 120px; !* width of container *!*/
    	/*height: auto; !* height of container *!*/
    	/*object-fit: cover;*/
    	/*border: 10px solid white;*/
		/*}*/

		.carousel article p {
			text-align: left;
		}



/* Container */

	.container {
		margin: 0 auto;
		max-width: 100%;
		/*width: 100%;*/
		/*margin-left: 120px;*/
	}

		@media screen and (min-width: 961px) and (max-width: 1880px) {

			.container {
				width: 100%;
				/*margin-left: 120px;*/
			}

		}

		@media screen and (min-width: 961px) and (max-width: 1620px) {

			.container {
				width: 100%;
			}

		}

		@media screen and (min-width: 961px) and (max-width: 1320px) {

			.container {
				width: 100%;
			}

		}

		@media screen and (max-width: 960px) {

			.container {
				width: 100%;
			}

		}

		@media screen and (max-width: 736px) {

			.container {
				width: 100%;
			}

		}

/* Main */

	#main {
		margin-left: 320px;
	}

		#main > section {
			margin: 0;
			overflow: hidden;
			padding: 2em 0;
			box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), inset 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.025);
			text-align: center;
			/*background-image: url("images/overlay.png");*/
		}

			#main > section.dark {
				color: #ddd;
				color: rgba(255, 255, 255, 0.75);
			}

				#main > section.dark h2, #main > section.dark h3, #main > section.dark h4, #main > section.dark h5, #main > section.dark h6 {
					color: inherit;
				}

				#main > section.dark strong {
					color: #fff;
					border-color: inherit;
				}

				/*#main > section.dark a {*/
				/*	color: #fff;*/
				/*	border-color: inherit;*/
				/*}*/

					#main > section.dark a:hover {
						border-bottom-color: rgba(255, 255, 255, 0);
					}

			#main > section.cover {
				padding: 10em 0;
				background-size: cover;
				background-position: center center;
			}

			/*#main > section.one {*/
			/*	background-color: #81918E;*/
			/*	!*background-image: url("../../images/banner.jpg");*!*/
			/*}*/

			/*#main > section.two {*/
			/*	background-color: #f5fafa;*/
			/*}*/

			/*#main > section.three {*/
			/*	background-color: #ecf1f1;*/
			/*}*/

			/*#main > section.four {*/
			/*	background-color: #e8edec;*/
			/*}*/

/* Wide */

	@media screen and (min-width: 961px) and (max-width: 1880px) {
			/*html, body {*/
			/*	overflow-x: hidden;*/
			/*}*/

		/* Basic */

			body, input, textarea, select {
				font-size: 12pt;
			}

		/* Header */

			#header {
				width: 375px;
			}


		/*!* Footer *!*/

		/*	#footer {*/
		/*		margin-left: 200px;*/
		/*	}*/

		/* Main */

			/*#main {*/
			/*	margin-left: 200px;*/
			/*}*/

	}

/* Normal */

	@media screen and (min-width: 961px) and (max-width: 1620px) {
			/*html, body {*/
			/*	overflow-x: hidden;*/
			/*}*/
		/* Main */

			#main > section {
				padding: 2em 0;
			}

			/*#main section.cover {*/
			/*	padding: 4em 0;*/
			/*}*/

				#header {
				width: 375px;
			}
	}

/* Narrow */

	@media screen and (min-width: 961px) and (max-width: 1320px) {
			html, body {
				overflow-x: hidden;
			}
		/* Basic */

			body, input, textarea, select {
				font-size: 12pt;
			}

			.container {
				padding: 0 1em 0 1em;
			}

		/* Icons */

			ul.icons li a {
				width: 1.5em;
			}

		/*!* Item *!*/

		/*	.item {*/
		/*		margin-bottom: 10px;*/
		/*	}*/

		/* Header */

			/*#header {*/
			/*	width: 100%;*/
			/*}*/

			#logo .image {
				position: relative;
				margin: 0 0 0.25em 0;
			}

			#nav ul li a {
				font-size: 0.8em;
				padding-top: 0.25em;
				padding-bottom: 0.25em;

			}

				#nav ul li a span {
					padding-right: 1.5em;
				}

					#nav ul li a span:before {
						left: 100%;
						margin-left: -0.8em;
						line-height: 1.5em;
					}

		/*!* Footer *!*/

		/*	#footer {*/
		/*		margin-left: 20%;*/
		/*	}*/

		/* Main */

			#main {
				margin-left: 20%;
			}

	}
		.fa-brands{
			display: inline-block;
			font-size: 1.5em !important; /*size whatever you like*/
			padding: 0.8em 1em 0.8em 0.4em !important;
			/*margin-outside: 0.25em;*/
			/*box-sizing: border-box;*/
			/*margin: 0 20px 0 0;*/
		}

		.fa-github{
			margin: 0 15px 0 15px;
		}

		.fa-medium{
			margin: 0 15px 0 30px;
		}

/* Narrower */

	#headerToggle {
		display: none;
	}

	@media screen and (max-width: 960px) {

		/* Basic */

			html, body {
				overflow-x: hidden;
			}

			body, input, textarea, select {
				font-size: 12pt;
			}

			header br {
				display: none;
			}

			.container {
				padding: 0 1em 0 1em;
			}

			h2{
				padding-top:1.2em;
			}
		/* Item */

			.item {
				margin-bottom: 15px;
			}

		/* Icons */

		/*.fa-brands{*/
		/*	display: inline-block;*/
		/*	font-size: 1.5em !important; !*size whatever you like*!*/
		/*	padding: 0.8em 1em 0.8em 0.5em !important;*/
		/*	margin-outside: 0.25em;*/
		/*	box-sizing: border-box;*/
		/*	margin: 0 20px 0 0;*/
		/*}*/

		.fa-brands{
			display: inline-block;
			font-size: 1.5em !important; /*size whatever you like*/
			padding: 0.8em 1em 0.8em 0.4em !important;
			/*margin-outside: 0.25em;*/
			/*box-sizing: border-box;*/
			/*margin: 0 20px 0 0;*/
		}

		.fa-github{
			margin: 0 15px 0 15px;
		}

		.fa-medium{
			margin: 0 15px 0 30px;
		}
			/*ul.icons a {*/
			/*	width: 2em;*/

			/*}*/

		/* Header */

			#header {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateX(-275px);
				-webkit-transform: translateX(-275px);
				-ms-transform: translateX(-275px);
				transform: translateX(-275px);
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				-webkit-overflow-scrolling: touch;
				display: block;
				height: 100%;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 275px;
				z-index: 10002;

				/*background: #222729 url("images/overlay.png");*/
				/*box-shadow: inset -0.25em 0 0.25em 0 rgba(0, 0, 0, 0.125);*/
			}

				#header .top {
					position: relative;
				}

				#header .bottom {
					/*border-top: solid 1px rgba(255, 255, 255, 0.05);*/
					/*box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.15);*/
					padding-top: 1em;
					margin-top: 1em;
					position: relative;
				}

			#logo {
				margin: 1em 0.75em 0.75em 0.75em;
			}

			#nav ul li a {
				padding: 0.2em 0.5em 0.2em 2em;
			}

			#headerToggle {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 1.5em;
				left: 0;
				position: fixed;
				top: 0;
				width: 4em;
				z-index: 10001;
			}

				#headerToggle .toggle {
					text-decoration: none;
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					outline: 0;
					/*border: 0;*/
				}

					#headerToggle .toggle:before {
						-moz-osx-font-smoothing: grayscale;
						-webkit-font-smoothing: antialiased;
						display: inline-block;
						font-style: normal;
						font-variant: normal;
						text-rendering: auto;
						line-height: 1;
						text-transform: none !important;
						font-family: 'Font Awesome 5 Free';
						font-weight: 700;
					}

					#headerToggle .toggle:before {
						text-decoration: none;
						content: '\f0c9';
						color: white;
						font-size: 10px;
						background: rgba(169,169,169,0.5);
						border-radius: 0.5em;
						text-align: center;
						position: absolute;
						left: 0.2em;
						top: 0.2em;
						display: block;
						width: 3em;
						height: 2.5em;
						line-height: 2.5em;
					}

			body.header-visible #main {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.header-visible #headerToggle {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.header-visible #header {
				-moz-transform: translateX(0);
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
			}

		/* Footer */

			#footer {
				margin-left: 0;
			}

		/* Main */

			#main {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				padding-bottom: 1px;
				margin-left: 0;
			}

				#main > section {
					padding: 1.5em 0;
				}

				#main section.cover {
					padding: 2em 0;
				}

	}

/* Mobile */

	@media screen and (max-width: 736px) {

		/* Basic */
		body, input, textarea, select {
			font-size: 10pt;
		}

		h2 {
			font-size: 1em;
			letter-spacing: 0;
			font-weight: 600;
		}

		.container {
			padding: 0 5px 0 5px;
		}

		/* List */
		ul.icons a {
			width: 1em;
			font-size: 1em;
		}

		/* Main */
		#main > section {
			padding: 1em 0;
		}

		#main section.cover {
			padding: 2em 0em;
		}

		#main section.cover header {
			padding: 0 1em;
		}


	}