@font-face {font-family: 'Cuprum'; font-style: normal; font-weight: 400; src: local('Cuprum'), local('Cuprum-Regular'), url(../fonts/cuprum.woff2) format('woff2');}
@font-face {font-family: 'Cuprum'; font-style: italic; font-weight: 400; src: local('Cuprum Italic'), local('Cuprum-Italic'), url(../fonts/cuprum-italic.woff2) format('woff2');}
@font-face {font-family: 'Cuprum'; font-style: normal; font-weight: 700; src: local('Cuprum Bold'), local('Cuprum-Bold'), url(../fonts/cuprum-bold.woff2) format('woff2');}
@font-face {font-family: 'Cuprum'; font-style: italic; font-weight: 700; src: local('Cuprum Bold Italic'), local('Cuprum-BoldItalic'), url(../fonts/cuprum-italic-bold.woff2) format('woff2');}
@font-face {font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(../fonts/roboto.woff2) format('woff2');}
@font-face {font-family: 'Roboto'; font-style: italic; font-weight: 400; src: local('Roboto Italic'), local('Roboto-Italic'), url(../fonts/roboto-italic.woff2) format('woff2');}
@font-face {font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/roboto-bold.woff2) format('woff2');}


* {margin: 0; padding: 0;}
a:hover, a:focus, a:active {outline: none; -moz-outline-style: none;}


body {font-family: Roboto, verdana, arial, helvetica, sans-serif; background: #0a6 url(../elem/bg-body.png) top center fixed;}

span.bold {font-weight: bold;}
span.italic {font-style: italic;}
span.line28 {line-height: 28px;}
span.nodeco a, span.nodeco a:hover {background: transparent; border: 0;}
.clear {clear: both;}

img {display: block; width: auto; max-width: 100%; height: auto; border-radius: 3px;}
img.imgwide {box-shadow: 0px 0px 5px 0px #668;}
img.img200, img.img250, img.img325, img.img400 {float: right; margin: 7px -4% 20px 20px; box-shadow: 0px 0px 5px 0px #668;}
a img {color: #fff;}


/* ---------- navigation ---------- */

div.top {position: fixed; top: 0; width: 100%; padding: 10px 0; background: #0a6; border-bottom: 1px solid #095; box-shadow: 0px 0px 15px 0px #cc9;}
	p.nav {text-align: center; font-family: Cuprum, verdana, arial, helvetica, sans-serif; font-size: 17px; color: #fff;}
	p.nav a {padding: 2px 0; text-decoration: none; color: #fff; background: #008858;}
	p.nav a:hover {color: #003; background: #0e9; transition: color 0.1s ease-in-out; transition: background 0.2s ease-in-out;}

	@media (max-width: 802px)
	{
	div.top {display: none;}

	.toggleMobile {display: none;}
	#mobileMenu {display: none; position: fixed; top: 0; right: 0; width: 100%; padding: 50px 0 10px 0; background: url(../elem/bg-nav2.png) center repeat-y; border-bottom: 2px solid #fff;}
		#mobileMenu p {padding: 0 15%;}
		#mobileMenu p {margin-bottom: 8px;}
		#mobileMenu p a {display: block; padding: 6px 0 5px 0; text-decoration: none; text-align: center; font-size: 16px; color: #fff; background: #008858; border-radius: 5px; box-shadow: 0px 0px 5px 0px #4c6;}
		#mobileMenu p a:hover {color: #003; background: #fff;}

	#mobileMenu {display: block; z-index: 99;}
	.toggleMobile {position: fixed; top: 5px; right: 5px; display: block; width: 40px; height: 36px; cursor: pointer; z-index: 999;}
		.toggleMobile span.menu1,
		.toggleMobile span.menu2,
		.toggleMobile span.menu3 {display: block; position: absolute; width: 40px; height: 8px; left: 0; background: #0e9; -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);}
		.toggleMobile span.menu1 {top: 0;}
		.toggleMobile span.menu2 {top: 14px;}
		.toggleMobile span.menu3 {top: 28px;}

	.toggleMobile.active span.menu1 {top: 14px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95); background: #f66;}
	.toggleMobile.active span.menu2 {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95); background: #f66;}
	.toggleMobile.active span.menu3 {opacity: 0;}
	}

/* -------- end navigation -------- */


/* -------- logo -------- */

div.div-logo {margin-top: 30px;}
	img.logo, img.logo-c {margin: 0 auto; border-radius: 0;}
	img.logo-c {display: none;}

/* -------- end logo -------- */


/* -------- content -------- */

div.main-outer {max-width: 1000px; margin: 0 auto; background: url(../elem/bg-main.png); border-radius: 9px; box-shadow: 0px 0px 15px 0px #cc9;}
div.main-inner {max-width: 800px; margin: 0 auto;}

div.mainhead {margin-bottom: 20px; padding: 20px 6%; background: #008858; border-radius: 9px 9px 0 0;}

div.category {margin-bottom: 20px; padding: 11px 6%; background: #008858;}


div.mainfoot {margin-bottom: 20px; padding: 15px 6%; border-radius: 0 0 9px 9px; background: #008858;}
	div.mainfoot p {font-size: 13px; color: #ccc;}

div.item {margin-bottom: 20px; padding: 30px 6%; background: #fff; border-radius: 9px;}

	h1, h3 {font-family: Cuprum, verdana, arial, helvetica, sans-serif;}
	h1 {font-size: 50px; color: #ffe;}  /* main title */
	h2 {font-size: 18px; color: #ffe;}  /* sub title */
	h3 {font-size: 24px; color: #ffe;}  /* category head */

	h4 {padding: 8px 0; font-size: 32px; line-height: 34px; color: #042;}
	h5 {font-size: 24px; color: #042;}
	h5.tag {font-size: 24px; color: #092;}
	h6 {font-size: 18px; color: #021;}
		h6 a {color: #085;}
		h6 a:hover {color: #003; background: #0e9;}

	p {font-size: 16px; line-height: 21px; color: #020;}
		p a {color: #085;}
		p a:hover {color: #003; background: #0e9;}

	p.gallery {text-align: center;}
		p.gallery a img {display: inline; max-width: 215px; margin: 1%; box-shadow: 0px 0px 5px 0px #668;}
		p.gallery a:hover img {display: inline; max-width: 215px; margin: 1%; box-shadow: 0px 0px 5px 0px #4c6;}


/* -------- screenwidth settings -------- */

	@media (max-width: 1002px)
	{
	div.mainhead, div.mainfoot {border-radius: 0}
	}

	@media (max-width: 802px)
	{
	div.div-logo {margin-top: 0;}
	div.mainhead, div.item {border-radius: 0}
	span.display {display: none;}
	}

	@media (max-width: 750px) {img.img400 {float: none; margin: 0 0 20px 0;}}
	@media (max-width: 675px) {img.img325 {float: none; margin: 12px 0 20px 0;}}
	@media (max-width: 600px) {img.img250 {float: none; margin: 12px 0 20px 0;}}
	@media (max-width: 550px) {img.img200 {float: none; margin: 12px 0 20px 0;}}

	@media (max-width: 500px)
	{
	img.logo {display: none;}
	img.logo-c {display: block;}
	}

	@media (max-width: 450px)
	{
	h1 {font-size: 44px;}
	}

	@media (max-width: 340px)
	{
	div.mainhead {padding: 5px 6% 15px 6%;}
	h1 {margin-top: 15px; font-size: 36px;}
	}

/* -------- end screenwidth settings -------- */

/* -------- end content -------- */



/*   [ katesvoices.co.uk/stuff/cssjs/katesvoices_v02.css | updated: 190417 ]   */