@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: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/roboto-bold.woff2) format('woff2');}
@font-face {font-family: 'Handlee'; font-style: normal; font-weight: 400; src: local('Handlee Regular'), local('Handlee-Regular'), url(../fonts/Handlee.woff2) format('woff2');}

/* ---------- fonts ---------- */

body {font-family: 'Roboto', 'trebuchet MS', verdana, helvetica, sans-serif;}
h3, h4 {font-family: 'Handlee', 'trebuchet MS', verdana, helvetica, sans-serif;}

/* -------- end fonts -------- */



/* ---------- general styles ---------- */

html {background: #85c634 url(../elem/bg-html.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

* {margin: 0; padding: 0; border: 0;}

div.content {max-width: 1140px; margin: 0 auto;}

a, a:hover {text-decoration: none;}
a:hover, a:focus, a:active {outline: none; -moz-outline-style: none;}

p {font-size: 16px; line-height: 20px;}
p a {font-weight: bold; color: #000;}
p a:hover {border-bottom: 1px solid #060;}

h3 {margin: 9px 0; padding-bottom: 2px; font-size: 26px; letter-spacing: 0.4px; border-bottom: 1px solid #469f9a;}

img {max-width: 100%; height: auto; border-radius: 7px;}

span.bold {font-weight: bold;}

div.clear {clear: both;}

/* -------- end general styles -------- */



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

div.logo {margin-bottom: 18px; background: #83ceca; border-top: 1px solid #60b6b1; border-bottom: 1px solid #60b6b1; box-shadow: 0px 0px 5px 1px #6a6;}
	div.logo img.logo1000 {display: block; max-width: 100%; height: auto; margin: 0 auto;}
	div.logo img.logo460 {display: none; max-width: 100%; height: auto; margin: 0 auto;}

	@media (max-width: 460px)
	{
	div.logo img.logo1000 {display: none;}
	div.logo img.logo460 {display: block;}
	}

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



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

	div.topnav {max-width: 1100px; height: 34px; margin: 0 2% 20px 2%;}
		div.topnav p {float: left; width: 15.416666666%; margin-right: 1.5%; text-align: center; font-size: 16px; font-weight: bold; overflow: hidden; border-radius: 7px; box-shadow: 0px 0px 5px 1px #6a6;}
		div.topnav p.last {margin-right: 0;}
		div.topnav p a {text-decoration: none; height: 30px; display: block; padding-top: 6px; color: #000; background: #ec6; border: 1px solid #e2bd38;}
		div.topnav p a:hover {color: #fff; background: #5c9b19; border: 1px solid #5c9b19;}

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

	.toggleMobile {display: none;}
	#mobileMenu {display: none; position: fixed; top: 0; right: 0; width: 100%; padding: 30px 0 10px 0; background: url(../elem/bg-nav2hb.png); border-bottom: 2px solid #5c9b19;}
		div.nav2col1 {float: left; width: 42%; margin-left: 6%;}
		div.nav2col2 {float: right; width: 42%; margin-right: 6%; text-align: right;}
			p.nav2hb {height: 44px;}
			p.nav2hb a {display: block; padding: 8px 10% 7px 10%; font-size: 16px; color: #000; background: #ec6; border-radius: 7px;}
			p.nav2hb a:hover {color: #fff; background: #5c9b19;}
			#on2 a, #on2 a:hover {color: #5c9b19; background: #eef; cursor: default;}

	#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: #4f4; -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 -------- */



/* ---------- left column ---------- */

div.left {float: left; width: 31.5789474%; margin-left: 2%;}
	div.map {margin-bottom: 20px; border-radius: 7px; box-shadow: 0px 0px 5px 1px #6a6;}
	div.map img {display: block; max-width: 100%; height: auto; background: url(../img/skydelights-map.png) center center no-repeat;}
	div.item-left {margin-bottom: 20px; padding: 7%; background: #fff; border: 1px solid #ff9; border-radius: 7px; box-shadow: 0px 0px 5px 1px #6a6;}
	div.item-left h3 {margin: 9px 0; padding-bottom: 2px; font-size: 26px; letter-spacing: 0.4px; border-bottom: 1px solid #469f9a;}

	h4.name {margin-top: 5px; font-size: 26px; font-weight: bold;}
	p.address {margin-bottom: 20px; font-size: 19px; font-weight: bold;}
	p.contact {margin: 20px 0 5px 0; font-size: 19px; line-height: 40px; font-weight: bold;}
	p.address, p.contact img {border-radius: 0;}

	@media (max-width: 760px)
	{
	p.address {font-size: 18px;}
	p.contact {font-size: 18px;}
	}

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

/* -------- end left column -------- */



/* ---------- right column ---------- */

div.right {float: right; width: 62.4210526%; margin-right: 2%;}
	div.item-right {margin-bottom: 20px; padding: 15px 3.4% 29px 3.4%; background: #fff; border: 1px solid #ff9; border-radius: 7px; box-shadow: 0px 0px 5px 1px #6a6;}
	div.item-right p {font-size: 16px;}

	span.more a {padding: 2px 10px 2px 15px; background: #e2bd38; border: 1px solid #deb626; border-radius: 5px;}
	span.more a:hover {text-decoration: none; color: #fff; background: #00f; border: 1px solid #00f;}

	div#imghome2 {display: none;}
		div#map2 {float: left; width: 48.5%; margin-bottom: 20px; border-radius: 7px; box-shadow: 0px 0px 5px 1px #6a6;}
		div#map2 img {display: block; max-width: 100%; height: auto; background: url(../img/skydelights-map.png) center center no-repeat;}
		div#shop2 {float: right; width: 48.5%; margin-bottom: 20px; border-radius: 7px; box-shadow: 0px 0px 5px 1px #6a6;}

	div.info2 {display: none; margin-bottom: 20px; padding: 4% 7%; background: #ec6; border: 1px solid #deb626; border-radius: 7px; box-shadow: 0px 0px 5px 1px #6a6;}

	@media (max-width: 1000px)
	{
	div.item-right {padding: 15px 2.5% 29px 2.5%;}
	}

	@media (max-width: 720px)
	{
	div.right {width: 96%;}
	div#imghome2 {display: inline;}
	div.info2 {display: block;}
	}

	@media (max-width: 460px)
	{
	div#map2 {float: none; width: auto; max-width: 360px; margin: 0 auto 20px auto;}
	div#shop2 {float: none; width: auto; max-width: 360px; margin: 0 auto 20px auto;}
	}

/* -------- end right column -------- */



/* ---------- footer ---------- */

div.footer {padding: 30px 2%; background: url(../elem/bg-footer.png); color: #fff; border-top: 1px solid #469f9a;}
	div.footer p {max-width: 1060px; margin: 0 auto; padding: 20px; text-align: center; font-size: 14px; font-weight: bold; background: #6caca9; border: 1px solid #83ceca; border-radius: 7px; box-shadow: 0px 0px 5px 1px #6a6;}
	div.footer p a {color: #fff;}
	div.footer p a:hover {border-bottom: 1px solid #ddd;}
	div.footer p span.nodeco a:hover {border-bottom: none;}
	div.footer p img {border-radius: 0;}


/* -------- end footer -------- */




/*    [ skydelights.co.uk/cssjs/sky-v03.css | 170206 ]   */