@import url('https://fonts.googleapis.com/css?family=Taviraj&display=swap');
@import url('/themes/bluedot2020/css/nav.css');

/* GLOBALS
----------------------------------------------- */
body {
	font-family: 'Taviraj', serif;
	font-size: 100%;
	background: rgba(190,181,176,1);
	}
	
img {
	max-width: 100%;
	}
	
a,
a:visited {
	color: rgb(93,151,195);
	}
	
a:hover {
	color: rgb(0,89,138);
	}
	
a.button,
input.button {
	background: rgb(93,151,195);
	}
	
a.button:hover,
input.button:hover {
	color: #fff;
	background: rgb(0,89,138);
	}
	
h1,
h2,
h3 {
	color: rgb(0,89,138);
	font-family: 'Taviraj', serif;
	}
	
h1.pageTitle {
	text-align: center;
	margin-bottom: 20px;
	}
	
.container {
	position: relative;
	z-index: 1;
	}
	
.section {
	max-width: 1140px;
	margin: 0 auto;
	clear: both;
	}
	
.sidePads {
	padding: 0 3%;
	}
	
.bgWhite {
	background: #fff;
	}
	
.colContent {
	outline: none;
	}
	
.colContent img {
	max-width: 100%;
	}

/* HEADER
----------------------------------------------- */
.container.navBar {
	width: 94%;
	max-height: 90px;
	color: #fff;
	background: url('/themes/bluedot2020/structure/bg_nav.jpg');
	border-bottom: 1px solid #777;
	box-shadow: 0 5px 10px #777;
	float: left;
	z-index: 3;
	}

.headerItem.logo,
.headerItem.menu {
	float: left;
	}
		
.headerItem.logo {
	width: 20%;
	position: relative;
	}
	
	
.headerItem.logo a {
	position: absolute;
	top: 5px;
	}
	
.headerItem.menu {
	width: 80%;
	padding-top: 4%;
	}

.container.header {
	}
		
.container.header img.headBanner {
	position: relative;
	z-index: -1;
	}

a.menu-toggle,
a.menu-toggle:visited,
a.close-menu,
a.close-menu:visited {
	color: #fff;
	}
	
a.close-menu:hover {
	color: rgb(3,152,194);
	}
	
/* CONTENT PAGES
----------------------------------------------- */	
.container.main {
	min-height: 300px;
	overflow: hidden;
	}
	
.contentBG {
	width: 100%;
	left: 0;
	top: -1px;
	z-index: -1;
	}
	
.mainItem {
	padding: 6% 0;
	}

/* FOOTER
----------------------------------------------- */	
.footer {
	overflow: hidden;
	padding-bottom: 30px;
	}
	
.shopCarousel {
	max-width: 800px;
	margin: 0 auto;
	}
	
a.shopLink {
	text-decoration: none;
	color: rgb(0,89,138);
	}
	
a.shopLink:hover .shopFrame img {
	transform: scale(1.1);
	}
	
a.shopLink:hover .shopName {
	color: rgb(92,151,196);
	}
	
.shopFrame {
	width: 184px;
	height: 184px;
	border-radius: 50%;
	margin: 0 auto;
	overflow: hidden;
	}
	
.shopName {
	font-size: 29px;
	text-align: center;
	padding: 3% 0;
	}
	
.container.shop {
	padding-bottom: 35px;
	}
	
.shopTitle img {
	margin: 0 auto;
	}
	
.container.footer {
	min-height: 150px;
	}
	
.bFrame {
	width: 65px;
	height: 65px;
	background: #fff;
	border-radius: 50%;
	top: 6px;
	right: 98px;
	z-index: 2;
	overflow: hidden;
	}
	
.bFrame img {
	width: 25px;
	display: block;
	margin: 12px auto 0 auto;
	}
	
.footerItem {
	position: relative;
	z-index: 2;
	}	
	
.footer a,
.footer a:visited {
	color: #333;
	}
	
	
.whiteCap {
	width: 100%;
	height: 40px;
	background: #fff;
	border-bottom: 1px solid rgba(93,151,195,1);
	position: relative;
	z-index: 1;
	
	}
	
.tanCap {
	width: 100%;
	height: 65px;
	background: rgba(190,181,176,1);
	position: relative;
	z-index: 1;
	
	}
	
.circMask {
	width: 80px;
	height: 80px;
	background: rgba(190,181,176,1);
	border: 1px solid rgba(93,151,195,1);
	border-radius: 50%;
	top: 0;
	right: 90px;
	z-index: 1;
	}
	
.curly {
	opacity: 0.75;
	top: 5px;
	right: -60px;
	z-index: 1;
	}

.social {
	text-align: center;
	}
	
.social a {
	width: 50px;
	height: 50px;
	display: inline-block;
	text-decoration: none;
	}
	
.social a:hover {
	opacity: 0.75;
	}
	
.copyright {
	font-size: 9px;
	text-align: right;
	line-height: 110%;
	}
	
@media handheld, only screen and (max-width: 800px) {
/* HEADER
----------------------------------------------- */
.container.navBar {
	max-height: 40px;
	}
	
.headerItem.menu {
	text-align: right;
	padding-top: 5px;
	}
	
/* FOOTER
----------------------------------------------- */
.circMask {
	right: 12px;
	}

.bFrame {
	right: 20px;
	}
	
.curly {
	right: -138px;
	}
}

@media handheld, only screen and (max-width: 650px) {
/* GLOBAL
----------------------------------------------- */
.impcol.impfour,
.impcol.impeight {
	width: 100%;
	}
	
.colContent img {
	display: block;
	margin: 0 auto;
	}
	
h1.impInner,
h2.impInner,
h3.impInner {
	text-align: center;
	margin-top: 20px;
	
	}
	
}

@media handheld, only screen and (max-width: 500px) {
/* GLOBAL
----------------------------------------------- */
img.imageLeft,
img.imageRight {
	display: block;
	margin: 20px auto;
	float: none;
	}
	
}

@media handheld, only screen and (max-width: 420px) {
/* GLOBAL
----------------------------------------------- */
h1 {
	font-size: 27px;
	}
}