/* 
	-- CSS documet
	-- Default look and feel
*/

@keyframes ripple {
	
	0% { transform: scale(0, 0); opacity: 1; }
	20% { transform: scale(25, 25); opacity: 1; }
	100% { opacity: 0; transform: scale(40, 40); }
	
}

@keyframes animateBeforeX {
	
	0%{ transform: translate(0px, 0px); }
	50%{ transform: translate(0px, 16px); border-radius: 0px; }
	100%{ transform: translate(0px, 16px) rotate(45deg); border-radius: 4px; }
	
}

@keyframes animateAfterX {
	
	0%{ transform: translate(0px, 0px); }
	50%{ transform: translate(0px, -16px); border-radius: 0px; }
	100%{ transform: translate(0px, -16px) rotate(-45deg); border-radius: 4px; }
	
}

@keyframes animateBeforeO {
	
	0%{ transform: translate(0px, 16px) rotate(45deg); border-radius: 4px; }
	50%{ transform: translate(0px, 16px) rotate(0deg); border-radius: 0px; }
	100%{ transform: translate(0px, 0px); }
	
}

@keyframes animateAfterO {
	
	0%{ transform: translate(0px, -16px) rotate(-45deg); border-radius: 4px; }
	50%{ transform: translate(0px, -16px) rotate(0deg); border-radius: 0px; }
	100%{ transform: translate(0px, 0px); }
	
}
		
/* ------------------------------------------------------------------------------------------------------------------- */

* { margin: 0px; padding: 0px; outline: none;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	
	}

html { height: 100%; }

body { height: 100vh; font-family: 'Quicksand', sans-serif; font-size: 14px; color: #a9a9a9; font-weight: 400; background: #363636;
	
	display: flex; 
	flex-direction: column;
	
	/*background: linear-gradient(80deg,  #f9f9f9 0%, #f9f9f9 30%, #ffffff 30%) no-repeat fixed;*/
	
	}

h1 { font-size: 36px; padding: 0px 0px 22px 0px; color: #a9a9a9; line-height: 32px; }
h2 { font-size: 28px; padding: 36px 0px 20px 0px; color: #a9a9a9; line-height: 26px; }
h3 { font-size: 18px; padding: 10px 0px; color: #a9a9a9; line-height: 20px; }
h4 { padding: 0px 0px 12px 0px; }

p { margin: 0px 0px 12px 0px; }
	p img.svg { width: 50px; height: auto; }

/* --- */

ul { list-style: none; }
ul.contentList { list-style: disc; padding: 0px 0px 20px 13px; }

ul.ulerrors { list-style: url(../images/ulError.png); margin: 0px 0px 30px 0px; padding: 20px 20px 20px 40px; border: 1px dashed #84bed3;; background: none; 
	
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	}
	
	ul.ulerrors li { padding: 6px 0px 0px 0px; font-weight: bold; color: #84bed3; }
	ul.ulerrors li:first-child { padding: 0px; }

ul.ulsuccess { list-style: url(../images/ulSuccess.png); margin: 0px 0px 30px 0px; padding: 20px 20px 20px 40px; border: 1px dashed #8dc63f; background: none; 
	
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	}
	
	ul.ulsuccess li { padding: 6px 0px 0px 0px; font-weight: bold; color: #8dc63f; }
	ul.ulsuccess li:first-child { padding: 0px; }

ol { margin: 5px 0px 0px 0px; padding: 0px 0px 0px 20px; }
	ol li { padding: 0px 0px 20px 0px; }
		ol li h4 { margin: 0px; padding: 0px; }

/* --- */

img.icon-medium { width: 48px; height: auto; margin: 0px 8px 0px 0px; }

/* --- */
/* --- Form elements --- */
/* --- */

a { color: #ffa273; text-decoration: none; transition: color 0.5s; }

a:hover,
a.active { color: #eae0d0; }

button,
a.button,
input[type="submit"] { line-height: 42px; padding: 0px 15px; cursor: pointer; border: 0px; border-radius: 4px; font-size: 14px; color: #4a4a4a; background: #ebebeb; transition: background 0.3s ease-out; }

button:hover,
a.button:hover,
input[type="submit"]:hover { background: #dfd8ec; }

button.white { background: #ffffff; }
button.white:hover { background: #eff7ed; }

/* --- Ripple effect for buttons --- */

button:before,
a.button:before,
input[type="submit"]:before { content: ''; position: absolute; top: 50%; left: 50%; transform-origin: 50% 50%; width: 5px; height: 5px; opacity: 0; border-radius: 100%; background: rgba(255, 255, 255, 0.5); }

button:focus:not(:active)::before,
a.button:focus:not(:active)::before,
input[type="submit"]:focus:not(:active)::before { animation: ripple 1s ease-out; }

/* --- */

input,
textarea,
select { min-width: 150px; font-family: 'Quicksand', sans-serif; font-size: 14px; color: #a9a9a9; transition: border 0.5s  ease-out,  background-image 0.5s ease-out; }

select { background: url("../images/drop-down.png") no-repeat #ffffff 98% center; }
select:focus { background: url("../images/drop-downSelected.png") no-repeat #ffffff 98% center; outline: none; }
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; } 

select {
	
	/* --- Hide the default drop-down arrow -- */
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	
	}

/* --- For IE - hidding the drop-down arrow --- */

select::-ms-expand { display: none; }
select:focus::-ms-value { color: #3d3c4c; background-color: transparent; }

/* --- */

input[type="checkbox"], 
input[type="radio"] { opacity: 0; }

.form-checks { display: block !important; margin: 0px 12px 12px 0px; }
	.form-checks input { position: absolute; }
	.form-checks label { display: inline-block; position: relative; padding: 0px 0px 0px 26px; cursor: pointer; vertical-align: middle; }
	.form-checks label:before { content: ""; position: absolute; display: inline-block; width: 22px; height: 22px; margin: -2px 0px 0px -26px; }
	
	.form-checks input[type="checkbox"] + label:before { background: url("../images/sprite-inputCheck.png") no-repeat -1px -1px; }
	.form-checks input[type="checkbox"]:focus + label:before { background: url("../images/sprite-inputCheck.png") no-repeat -1px -93px; }
	.form-checks input[type="checkbox"]:checked + label:before { background: url("../images/sprite-inputCheck.png") no-repeat -1px -24px; }
	.form-checks input[type="checkbox"]:checked:focus + label:before { background: url("../images/sprite-inputCheck.png") no-repeat -1px -116px; }
	.form-checks input[type="checkbox"]:disabled + label:before { background: url("../images/sprite-inputCheck.png") no-repeat -1px -47px; }
	.form-checks input[type="checkbox"]:checked:disabled + label:before { background: url("../images/sprite-inputCheck.png") no-repeat -1px -70px; }
	
	.form-checks input[type="radio"] + label:before { background: url("../images/sprite-inputCheck.png") no-repeat -25px -1px; }
	.form-checks input[type="radio"]:focus + label:before { background: url("../images/sprite-inputCheck.png") no-repeat -25px -93px; }
	.form-checks input[type="radio"]:checked + label:before { background: url("../images/sprite-inputCheck.png") no-repeat -25px -24px; }
	.form-checks input[type="radio"]:checked:focus + label:before { background: url("../images/sprite-inputCheck.png") no-repeat -25px -116px; }
	.form-checks input[type="radio"]:disabled + label:before { background: url("../images/sprite-inputCheck.png") no-repeat -25px -47px; }
	.form-checks input[type="radio"]:checked:disabled + label:before { background: url("../images/sprite-inputCheck.png") no-repeat -25px -70px; }
	
	.form-checks input:disabled + label { color: #c6c4c1; }

/* --- */

textarea { resize: none; }

/* --- */

.modal-overlay { display: none; z-index: 1000; position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; background: #61615f; opacity: 0.5; }

.wrapper-header { flex-shrink: 0; padding: 0px 25px; border-bottom: 1px solid #8C8B8B; background: url("../images/bg-header4.png") center center no-repeat; }
.wrapper-body { flex: 1 0 auto; flex-direction: column; padding: 0px 25px 25px 25px; background: url("../images/bg-body2.png") center top no-repeat; }

.main-wrapper { max-width: 850px; margin: 0px auto; }

/* --- */
/* ------------ HEADER --- */
/* ------------ NAVIGATION --- */
/* --- */

header { display: flex; justify-content: space-between; padding: 0px 0px 10px 0px; height: auto; }
	
	header .logo { flex-direction: column; height: 99px; }
		header .logo h1 { margin: 0px; padding: 0px; font-size: 70px; line-height: 99px; }
	
	header nav { flex-direction: column; height: auto; text-align: right; }
		
		header nav .main-wrapper { padding: 0px; }
		header nav .menu-toggle { display: none; }
		
		header nav ul { display: flex; border-radius: 0px; overflow: hidden; }
			header nav ul li { width: auto; margin: 0px 11px 0px 0px; }
			header nav ul li:last-child { margin: 0px; }
				header nav ul li a { display: block; width: 78px; height: 99px; line-height: 102px; text-align: center; text-decoration: none; border-radius: 0px 0px 6px 6px; background: rgba(97, 97, 95, 0.3); transition: color 0.3s ease-out, background 0.3s ease-out; }
				
				header nav ul li a.active, 
				header nav ul li a:hover { background: rgba(88, 88, 88, 0.7); }

.header-img { height: 331px; background: center center; background-size: cover; border-radius: 8px 8px 0px 0px; }

/* --- */
/* ------------ SITE CONTENT --- */
/* --- */

.site-content { padding: 0px 0px 25px 0px; background: url("../images/bg-imageShade2.png") center top no-repeat; }

.flex-container { display: flex; flex-flow: column wrap; align-items: stretch; margin: 0px 0px 15px 0px; }
	.flex-container  .flex-item { flex: 1 1 auto; width: 100%; margin: 5px; padding: 20px; border-radius: 4px; background: rgba(88, 88, 88, 0.2); }
		
		.flex-container .flex-item .article-headerDate { margin: 0px 0px 15px 0px; }
			.flex-container .flex-item .article-headerDate h3.contentheading { margin: 0px; padding: 0px; }
			.flex-container .flex-item .article-headerDate p.createdate { margin: 0px; padding: 0px; font-size: 10px; }
			
		.flex-container  .flex-item .img-article { float: left; margin: 0px 20px 0px 0px; border-radius: 4px; }
		.flex-container  .flex-item .btn-article {  }
		.flex-container  .flex-item p:last-child { margin: 0px; }

/* --- */

.form-slidingLabel { margin: 0px 0px 20px 0px; padding: 24px; }
	.form-slidingLabel .form-rowSpace { margin: 0px 0px 24px 0px; }
	.form-slidingLabel .form-row-button { display: flex; flex-flow: row wrap; justify-content: space-between; margin: 24px 0px 12px 0px; }
	
	.form-slidingLabel .form-row { display: flex; flex-flow: row wrap; align-items: stretch; padding: 0px; }
		.form-slidingLabel .form-row .form-col { position: relative; display: flex; flex-flow: row wrap; flex: 1 1 auto; width: 350px; padding: 0px 12px 12px 0px; }
		.form-slidingLabel .form-row .form-col:empty { padding: 0px 6px; }
			
			.form-slidingLabel .form-row .form-col label.slideLabel { position: absolute; top: 0px; right: 12px; bottom: 0px; left: 0px; pointer-events: none; padding: 0px 0px 6px 0px; cursor: pointer; border-radius: 4px 0px 0px 4px; }
				
				.form-slidingLabel .form-row .form-col label.slideLabel span.labelText { display: block; padding: 18px 0px 0px 0px; text-overflow: ellipsis; white-space:nowrap; overflow: hidden; font-size: 18px; color: #cdcdcd; transition: 0.3s ease-out; }
				.form-slidingLabel .form-row .form-col label.activeLabel span.labelText { padding: 0px; font-size: 14px; color: #ff9800; }
			
			.form-slidingLabel .form-row .form-col input, 
			.form-slidingLabel .form-row .form-col textarea, 
			.form-slidingLabel .form-row .form-col select { flex: 1 0 auto; padding: 0px; margin: 12px 0px 0px 0px; border-top: 0px; border-right: 0px; border-bottom: 2px solid #ebebeb; border-left: 0px; background-color: rgba(225, 225, 225, 0); transition: border-bottom 0.3s ease-out; }

			.form-slidingLabel .form-row .form-col input, 
			.form-slidingLabel .form-row .form-col select { height: 42px; line-height: 40px; white-space: nowrap; }

			.form-slidingLabel .form-row .form-col textarea { height: 200px; padding: 12px 0px 0px 0px; }
			
			.form-slidingLabel .form-row .form-col input:focus, 
			.form-slidingLabel .form-row .form-col textarea:focus, 
			.form-slidingLabel .form-row .form-col select:focus { border-bottom: 2px solid #ff9800; }
			
			.form-slidingLabel .form-row .form-col input:invalid, 
			.form-slidingLabel .form-row .form-col textarea:invalid, 
			.form-slidingLabel .form-row .form-col select:invalid { border-bottom: 2px solid #ff0000; box-shadow: none; }

/* --- */

.ad-sense {  }
	/*.ad-sense .adgoogle_responsive,
	.ad-sense .adgoogle_responsive * { width: 100%; height: 100px; }*/

/* --- */

.img-gallery { display: flex; flex-flow: row wrap; justify-content: flex-end; list-style: none; margin: 0px 0px 12px 0px; }
	.img-gallery li { flex: 1 1 auto; width: 200px; min-height: 100px; margin: 5px; }
		.img-gallery li a { display: block; }
			.img-gallery li a img { width: 100%; height: auto; opacity: 0.5; border-radius: 6px; transition: opacity 0.3s ease-out; }
			.img-gallery li a:hover img, 
			.img-gallery li a:focus img { opacity: 1; transition: opacity 0.3s ease-out; }

/* --- Lightbox --- */

#jquery-overlay { z-index: 90; position: absolute; top: 0; left: 0; width: 100%; height: 500px; }

#jquery-lightbox { z-index: 100; position: absolute; top: 0; left: 0; width: 100%; padding: 0px 25px; text-align: center; line-height: 0; }
	#jquery-lightbox a img { border: none; }

#lightbox-container-image-box { position: relative; width: auto !important; max-width: 850px !important; height: auto !important; margin: 0 auto; background-color: #efefef; border-radius: 8px 8px 0px 0px; }
	#lightbox-container-image-box > #lightbox-nav { left: 0; }

#lightbox-container-image { padding: 10px; }
	#lightbox-container-image img { width: 100%; border-radius: 6px; }

#lightbox-loading { position: absolute; top: 40%; left: 0%; width: 100%; height: 25%; line-height: 0px; text-align: center; }

#lightbox-nav { z-index: 10; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	#lightbox-nav a { outline: none;}

#lightbox-container-image-data-box { width: auto !important; max-width: 850px !important; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px 0; border-radius: 0px 0px 8px 8px; background: #efefef; }
#lightbox-container-image-data { padding: 0 10px;  color: #666; }
	#lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; }

#lightbox-image-details-caption { font-weight: bold; color: #666666; }
#lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em; color: #666666; }

/* --- */

#lightbox-nav-btnPrev, 
#lightbox-nav-btnNext { width: 49%; height: 100% !important; zoom: 1; display: block; }

#lightbox-nav-btnPrev {  left: 0;  float: left; }
#lightbox-nav-btnNext {  right: 0;  float: right; }
#lightbox-secNav-btnClose { float: right; }

/* --- END - Lightbox --- */

/* --- */

.holder { margin: 20px 0px 0px 0px; padding: 0px; }
	.holder a { display: inline-block; margin: 0px 1px 0px 0px; padding: 4px 10px; text-align: center; color: #ffa273; cursor: pointer; background: rgba(88, 88, 88, 0.2); transition: background 0.3s ease-out; }
	.holder a:hover { background: rgba(88, 88, 88, 0.5); }
	
	.holder a.jp-previous, 
	.holder a.jp-next { width: 60px; }
	
	.holder a.jp-previous { border-radius: 8px 0px 0px 8px; }
	.holder a.jp-next { border-radius: 0px 8px 8px 0px; }
	
	.holder a.jp-current, 
	a.jp-current:hover { color: #ffa273; background: rgba(88, 88, 88, 0.5); }
	
	.holder a.jp-disabled,
	a.jp-disabled:hover { color: #8c8b8b; }
	
	.holder a.jp-current, 
	a.jp-current:hover, 
	.holder a.jp-disabled, 
	a.jp-disabled:hover { cursor: default; }
	
	.holder a.jp-disabled,
	a.jp-disabled:hover { background: none; }
	
	.holder span { display: inline-block; margin: 0px 4px 0px 0px; padding: 4px 6px; color: #383838; }
		
/* --- */
/* ------------ FOOTER --- */
/* --- */

footer { min-height: 25px; padding: 25px 0px 0px 0px; }

/* --- */
/* ------------ MEDIA SCREEN RULES --- */
/* --- */

@media screen and (max-width: 768px) {
	
	.show { display: block; }
	
	header { display: block; }
		
		header .logo { text-align: center; }
			header nav .menu-toggle { position: relative; display: block; width: 40px; height: 40px; margin: 0px auto 12px auto; cursor: pointer; }
			
			header nav .menu-toggle .menu-animate, 
			header nav .menu-toggle .menu-animate:before, 
			header nav .menu-toggle .menu-animate:after { content: ''; position: absolute; left: 0px; width: 40px; height: 8px; background: rgba(97, 97, 95, 1); transition: 0.5s; }
			
			header nav .menu-toggle .menu-animate { top: 16px; }
			header nav .menu-toggle .menu-animate:before { top: -16px; }
			header nav .menu-toggle .menu-animate:after { top: 16px; }
			
			/* - Forward animation - */
			
			header nav .menu-toggle.nav-animatedX .menu-animate { background: rgba(0, 0, 0, 0); }
			header nav .menu-toggle.nav-animatedX .menu-animate:before { transform-origin: 50% 50%; animation: animateBeforeX 0.5s; animation-fill-mode: forwards; }
			header nav .menu-toggle.nav-animatedX .menu-animate:after { transform-origin: 50% 50%; animation: animateAfterX 0.5s; animation-fill-mode: forwards; }
			
			/* - Backwards animation - */
			
			header nav .menu-toggle.nav-animatedO .menu-animate { background: rgba(97, 97, 95, 1); }
			header nav .menu-toggle.nav-animatedO .menu-animate:before { transform-origin: 50% 50%; animation: animateBeforeO 0.5s; animation-fill-mode: forwards; }
			header nav .menu-toggle.nav-animatedO .menu-animate:after { transform-origin: 50% 50%; animation: animateAfterO 0.5s; animation-fill-mode: forwards; }
		
		header nav {  }
			header nav ul { display: none; clear: both; flex-flow: column wrap; width: 100%; height: auto; margin: 0px 0px 10px 0px; border-radius: 8px; }
				header nav ul li { width: 100%; margin: 0px 0px 2px 0px; }
				header nav ul li:last-child { margin: 0px; }
					header nav ul li a { position: relative; display: block; width: 100%; height: 48px; line-height: 46px; border-radius: 0px; }
	
	.header-img { height: 260px; }
	
	/* --- */
	
	.flex-container .flex-item:nth-child(odd) { background: rgba(88, 88, 88, 0.2); }
	.flex-container .flex-item:nth-child(even) { background: rgba(88, 88, 88, 0.4); }

	/* --- */

	/*.ad-sense .adgoogle_responsive { width: 600px; }*/
	
}

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

	/*.ad-sense .adgoogle_responsive { width: 450px; }*/

}

@media screen and (max-width: 480px) {
	
	.header-img { height: 140px; }
	
	/* --- */
	
	.flex-container  .flex-item .img-article { float: none; width: 100%; }
	
	/* --- */
	
	/*.ad-sense .adgoogle_responsive { width: 400px; }*/
	
}

@media screen and (max-width: 360px) {
	
	.header-img { height: 120px; }
	
	/* --- */
	
	/*.ad-sense .adgoogle_responsive { width: 300px; }*/
	
}

@media screen and (max-width: 320px) {
	
	/*.ad-sense .adgoogle_responsive { width: 280px; }*/
	
}

/* --- */

.clearfix:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; }

/* --- */

.fontColorGrey02 { color: #6c6c6c; }

.divImportant { margin: 25px 0px; padding: 15px 30px 15px 30px; color: #ffa273; border-radius: 6px; background: url("../images/bg-important.gif") repeat-y; background-color: rgba(0, 0, 0, 0.1); }
.divNotice { margin: 25px 0px; padding: 15px 30px 20px 30px; color: #6c6c6c; border-radius: 6px; background: url("../images/bg-notice.gif") repeat-y; background-color: rgba(0, 0, 0, 0.1); }

.divImportant p:last-child,
.divNotice p:last-child { margin: 0px; }

.error .labelText { color: #ff0000 !important; }

/* --- */



















