/* - - GENERAL - - */

	div, ul, li, input, button { padding: 0; margin: 0; box-sizing: border-box; }
	ul, li { list-style: none; }
	input, button, textarea, select { outline: none; color: #333; font-size: 16px; }
	body { margin: 20px 2%; text-align: center; background-color: #222; color: #333; }
	body, textarea, input { font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; }


/* QUICK */
	.uppercase { text-transform: uppercase; }

/* BOOTSTRAP LOOKALIKES */
	.h1, .h2, .h3, h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; font-weight: 500; }
	button, .button { cursor: pointer; }

/* LAY OUT STYLING */
	#top { position: relative; text-align: center; z-index: 5; margin-bottom: 30px; }

	#main { margin-bottom: 25px; }
	#main { position: relative; }
	#main .info { color: #fff; font-size: 16px; font-style: italic; font-weight: 600; }
	h3 { font-weight: 500; font-style: italic; text-shadow: 0 1px 10px rgba(0,0,0,.2); }
	h3.main-headline { font-size: 200%; font-weight: 500; margin: 0; margin-bottom: 10px; color: #fff; }
	span.underline { border-bottom: 1px solid #fff; }
	.buttons { position: relative; clear: both; margin: 15px 0; overflow: hidden; text-align: center; }

/* BUTTONS */
	.button { position: relative; font-size: 17px; border: 1px solid #777; display: inline-block; padding: 4px 12px; margin: 5px 10px; font-weight: bold; font-style: italic;
		border-radius: 3px; background-color: #fff; color: #555; }
	.button.big { font-size: 140%; padding: 5px 15px; }
	.button:not(.big) { top: 3.5px; vertical-align: top; }
	.button.primary { background-color: #559E1A; color: #fff; border-color: #356B0A; }
	.button.secondary { background-color: #9CAD5C; color: #fff; border-color: #708039; }

	.button.warning { background-color: #B3344D; color: #fff; border-color: #8C142C; }
	.button.grey { background-color: #999; color: #555; border-color: #555; }
	.button.no { background-color: #B3344D; color: #fff; border-color: #8C142C; }
	.button.yes { background-color: #559E1A; color: #fff; border-color: #356B0A; }
	.button { transition: all .2s; -webkit-transition: all .2s;
					-webkit-box-shadow: inset 0px 20px 40px -20px rgba(255,255,255,0.15);
					-moz-box-shadow: inset 0px 20px 40px -20px rgba(255,255,255,0.15);
					box-shadow: inset 0px 20px 40px -20px rgba(255,255,255,0.15); }
	.button:hover { transition: all .2s; -webkit-transition: all .2s;
					-webkit-box-shadow: inset 0px 40px 39px -20px rgba(255,255,255,0.15);
					-moz-box-shadow: inset 0px 40px 39px -20px rgba(255,255,255,0.15);
					box-shadow: inset 0px 40px 39px -20px rgba(255,255,255,0.15); }
	.button:not(.grey):not(.passive):active { transition: all .2s; -webkit-transition: all .2s;
					-webkit-box-shadow: inset 0px 40px 39px -20px rgba(0,0,0,0.15);
					-moz-box-shadow: inset 0px 40px 39px -20px rgba(0,0,0,0.15);
					box-shadow: inset 0px 40px 39px -20px rgba(0,0,0,0.15); }
 	
	.button#prev { float: left; }
	.button#next { float: right; }
	.button#view { margin-right: 20px; }


/* WYSIWYG AND USER = #PAGE-CONTENT */
 	#page-content { font-size: 15px; }
 	#page-content img { max-width: 30vw; height: auto; width: auto; }
 	#page-content p { font-size: 110%; }
 	#page-content h2  { font-size: 175%; font-weight: 500; margin: 10px 0; }
 	#page-content h3 { font-size: 140%; font-weight: 500; margin: 7px 0; }
 	#page-content span  { font-size: 110%; line-height: 22px; }
	@media screen and (max-width : 599px) {
		#page-content span  { font-size: 110%; line-height: 20px; }
		#page-content { font-size: 13px; }
		#page-content img { max-width: 100%; } }



/* OTHER */

	/* TOGGLE LANGS */
	#toggle-langs { position: relative; background-color: #999; color: #fff; border-color: #555;
		margin: 0; top: 5px; padding: 5px 37px 5px 8px; text-align: center; }
	#toggle-langs.closed { background-color: #666; color: #fff; border-color: #444;
		/* border-bottom: none; border-radius: 3px 3px 0 0; */ }
	#toggle-langs .lang-bar { font-size: 0; }
	#toggle-langs i.fa-chevron-down { position: absolute; top: 50%; font-size: 110%; right: 8px; margin-top: -11px;}
	#toggle-langs .lang-bar .one-lang { position: relative; display: inline-block;
		max-width: 100px; overflow: hidden; margin: 5px; border: 1px solid #777; border-radius: 2px; }
	#toggle-langs.closed .lang-bar .one-lang:not(.active) { max-width: 0px; border-width: 0px; margin: 5px 0px; }
	#toggle-langs .lang-bar .one-lang.active { border-color: #fff; }
	#toggle-langs .lang-bar .one-lang .fade { background-color: #fff; opacity: .5;
		position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	#toggle-langs .lang-bar .one-lang.active .fade,
	#toggle-langs .lang-bar .one-lang .fade:hover { opacity: 0; }
	#toggle-langs .lang-bar .one-lang .lang-icon { width: auto; height: 30px; }


/* BOX N ANIMS */
	.big-box { box-shadow: 0 2px 12px 1px rgba(0,0,0,0.25); border-radius: 7px; }
	.box { box-shadow: 0 1px 8px 1px rgba(0,0,0,0.2); border-radius: 3px; }
	.hideable { opacity: 1; transition: opacity .3s ease-out; -webkit-transition: opacity .3s ease-out; }
	.hideMe { opacity: 0; transition: opacity .3s ease-out; -webkit-transition: opacity .3s ease-out; }
	.slowFade { transition: opacity .4s .2s ease-out; -webkit-transition: opacity .4s .2s ease-out; }
	.anim { transition: all .3s ease-out; -webkit-transition: all .3s ease-out; }
	.invisible, #main .invisible { display: none; height: 0; width: 0; margin: 0; padding: 0; }
	.sort-handle { cursor: move; cursor: -webkit-grabbing; }