/*
Theme Name: 	Purple Planet Theme
Theme URI: 		https://www.tinytimcentre.co.uk/purpleplanet/
Description: 	Wordpress theme!
Version: 		1.0
Author: 		Bryony Snell
Author URI: 	https://www.dynamek.co.uk
Tags: 			bespoke
*/

@import "css/reset.css";

div, article, section, header, footer, nav, li { position:relative; }
.group:after { display:block; height:0; clear:both; content:"."; visibility:hidden;  }
::-moz-selection { background:#ff0; color:#333; }
::selection { background:#ff0; color:#333; }

body, input, textarea {font-family: 'Alegreya Sans', sans-serif;color:#fff;font-size:18px;}
body {background: url('/wp-content/themes/purpleplanet/images/bg.jpg') repeat center center #000;}
h1, h2, h3, h4, h5, h6 { }
h2 {font-weight:500;font-size:28px;}
h3 {font-weight:500;font-size:28px;}
h4 {font-weight:500;font-size:20px;}

a {color:#fff;text-decoration:none;}
a:hover {color:#fff;text-decoration:underline;}
a.buttonLink {float:right;padding:7px 14px;background-color:#d1558d;border-bottom:2px solid #80007e;}
a.buttonLink:hover {text-decoration:none;background-color:#80007e;border-bottom:2px solid #000;}
p {padding:10px 0;}

img {border:none !important;}
img.alignright {float:right;margin:10px 0 10px 20px;}
img.alignleft {float:left;margin:10px 20px 10px 0;}
img.aligncenter {}

div.wrapGlobal {overflow: hidden;
	background: url('/wp-content/themes/purpleplanet/images/planets.png') no-repeat center top transparent;
	background: url('/wp-content/themes/purpleplanet/images/planets.png') no-repeat center top / 100% auto transparent;}
div.wrapHeader, div.wrapCol, div.copyright {
	margin:0 auto;max-width: 1280px;}
div.wrapCol {overflow: hidden;clear: both;padding-top: 20px;}

header {height:350px;}
div#header {position:relative;overflow:hidden;}
div#header:before {
    background: url("/wp-content/themes/purpleplanet/images/crater.png") no-repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 73px;
    position: absolute;
    left: 230px;
    width: 248px;
    z-index: 100;
}
div#header:after {
    background: url("/wp-content/themes/purpleplanet/images/crater2.png") no-repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 73px;
    position: absolute;
    right: 0;
    width: 248px;
    z-index: 100;
}
div#header h1 {
	display:block;padding:50px 0 0 50px;
	width:187px;float:left;
	height:194px;}
div#header h1 a {
	background: url('/wp-content/themes/purpleplanet/images/logo.png') no-repeat center center transparent;
	background: url('/wp-content/themes/purpleplanet/images/logo.png') no-repeat center center / 100% auto transparent;
	text-indent:-9999px;
	width:100%;
	display:block;
	height:100%;
	}
div.linkTinyTim {position:absolute;top:-40px;right:-40px;}
div.linkTinyTim a {width:210px;height:215px;text-indent:-9999px;display:block;position:relative;z-index:100;
background: url('/wp-content/themes/purpleplanet/images/tiny-tims-link.png') no-repeat 0 0 transparent;
	background: url('/wp-content/themes/purpleplanet/images/tiny-tims-link.png') no-repeat 0 0 / 100% auto transparent;}
#header p {float: right;
    font-size: 28px;
    font-weight: 500;
    padding: 0;
    position: relative;
    right: 20px;
    top: 210px;}
#header p:before {content: "";
    display: block;
    height: 35px;
    left: -50px;
    position: absolute;
    top: -40px;
    width: 32px;
	background: url('/wp-content/themes/purpleplanet/images/star.png') no-repeat 0 0 transparent;}
#header p:after {content: "";
    display: block;
    height: 35px;
    right: -50px;
    position: absolute;
    bottom: -60px;
    width: 32px;
	background: url('/wp-content/themes/purpleplanet/images/star.png') no-repeat 0 0 transparent;}

nav ul li div.menu {}
nav {margin: 0 auto;width: 1280px;}
nav ul li {display:block;float:left;list-style:none;padding:0;margin:0;}
nav ul li a.respMenu {display:none;}
nav ul ul li {float:left;display:block;}
nav ul ul li a {float:left;display:block;margin:10px 15px;font-size:24px;}
nav ul ul li a:hover, nav ul ul li.current_page_item a {text-decoration:none;border-bottom:2px solid #d1558d;}

div.wrapContent:before {
	background-color: #982397;
    content: "";
    display: block;
    height: 60px;
    position: absolute;
    top: -60px;
    width: 100%;
	-webkit-border-radius: 100% 100% 0 0;
	-moz-border-radius: 100% 100% 0 0;
	border-radius: 100% 100% 0 0;
	}
div.wrapContent:after {
	background-color:#982397;
    content: "";
    display: block;
    height: 30px;
    position: absolute;
    bottom: -30px;
    width: 100%;
	-webkit-border-radius: 0 0 100% 100%;
	-moz-border-radius: 0 0 100% 100%;
	border-radius: 0 0 100% 100%;
	}
div.wrapContent {
	position:relative;
    background-color:#982397;clear:both;margin:0 auto;width:100%;padding:30px 0;}
div.contCol {clear:both;}

div.slider, div.noticeboard, div.col2A, div.col2B, div.col4A, div.col4B, div.col4C, div.col4D {padding:20px 10px;}

div.slider {box-sizing:border-box;width:60%;padding:0 10px;float:left;}
div.noticeboard {box-sizing:border-box;width:40%;padding:0 10px;float:left;}
div.noticeboard ul li a {font-weight:800;}
div.noticeboard h3 {
	background: url("/wp-content/themes/purpleplanet/images/h3pink.png") no-repeat scroll left 0 transparent;
	background: url("/wp-content/themes/purpleplanet/images/h3pink.svg") no-repeat scroll left 0 / 100% auto transparent;
    font-size: 24px;
    margin-bottom: 20px;
    padding-left: 43px;
	line-height: 74px;
    position: relative;
    z-index: 10;}
div.noticeboard {font-size:16px;}

div.col2A {box-sizing:border-box;width:50%;float:left;}
div.col2B {box-sizing:border-box;width:50%;float:left;}
div.col2B h3 {font-weight:400;margin-top:7px;}
div.col2C {box-sizing:border-box;width:75%;float:left;padding:20px 10px;}
div.col2D {box-sizing:border-box;width:25%;float:left;padding:20px 10px;}

div.col2C ul {margin:10px 0 10px 40px;}
div.col2C ul li {list-style:disc;padding:4px 0 4px 5px;}
div.col2C article {margin:20px 0;}
div.col2C article time {display: block;
    font-size: 16px;
    font-style: italic;
    text-align: right;
    width: 100%;float:right;}

div.col2D div.col4A, div.col2D div.col4B, div.col2D div.col4C, div.col2D div.col4D {width:100%;margin:0;padding: 0 10px;}

div.col3A, div.col3B {box-sizing:border-box;width:37.5%;float:left;padding: 0 10px;}

/*div.col4A, div.col4B, div.col4C, div.col4D {box-sizing:border-box;width:25%;float:left;margin-top: 20px;}*/
div.col4A, div.col4B, div.col4C, div.col4D {box-sizing:border-box;width:33.33%;float:left;margin-top: 20px;}
div.col4A h3, div.col4B h3, div.col4C h3, div.col4D h3 {
	font-size: 24px;
	/*line-height: 64px;*/
	line-height: 84px;
    padding-left: 27px;
    position: relative;
	box-sizing:border-box;
    width: 100%;
    z-index: 10;}
div.row div.col4A h3, div.row div.col4B h3, div.row div.col4C h3, div.row div.col4D h3 {
		box-sizing:border-box;width: 100%;}
div.col2D div.col4A h3, div.col2D div.col4B h3, div.col2D div.col4C h3, div.col2D div.col4D h3 {box-sizing:border-box;width: 100%;line-height: 60px;}
div.col4A h3 {
	background:url("/wp-content/themes/purpleplanet/images/h3blue.png") no-repeat scroll left 0 transparent;
	background:url("/wp-content/themes/purpleplanet/images/h3blue.svg") no-repeat scroll left 0 / 100% auto transparent;}
div.col4B h3 {
	background:url("/wp-content/themes/purpleplanet/images/h3orange.png") no-repeat scroll left 0 transparent;
	background:url("/wp-content/themes/purpleplanet/images/h3orange.svg") no-repeat scroll left 0 / 100% auto transparent;}
div.col4C h3 {
	background:url("/wp-content/themes/purpleplanet/images/h3green.png") no-repeat scroll left 0 transparent;
	background:url("/wp-content/themes/purpleplanet/images/h3green.svg") no-repeat scroll left 0 / 100% auto transparent;}
div.col4D h3 {
	background:url("/wp-content/themes/purpleplanet/images/h3red.png") no-repeat scroll left 0 transparent;
	background:url("/wp-content/themes/purpleplanet/images/h3red.svg") no-repeat scroll left 0 / 100% auto transparent;}

a.mapPin {background:url("/wp-content/themes/purpleplanet/images/map-pin.png") no-repeat scroll left 0 transparent;
	padding:7px 0 10px 37px;}
a.menuIcon {background:url("/wp-content/themes/purpleplanet/images/cup.png") no-repeat scroll left 0 transparent;
	padding:2px 0 10px 45px;}
a.mapPin:hover, a.partiesIcon:hover, a.menuIcon:hover {text-decoration:none;}

div.whiteBox {background-color:#fff;padding:20px 20px 10px;height: auto;z-index: 0;top: -20px;}
div.whiteBox p, div.whiteBox a {color:#666;font-size:16px;}
div.whiteBox em {color:#666;font-size:14px;}

span.dayMargin {display: inline-block;width: 110px;}

article ol li {list-style: decimal;padding: 0 0 0 10px;margin: 0 0 0 30px;}

ul.offerList {margin:20px 0 !important;max-width:600px;}
ul.offerList li {
	list-style:none !important;
	background:url("/wp-content/themes/purpleplanet/images/icons.png") no-repeat scroll left 0 transparent;
	background:url("/wp-content/themes/purpleplanet/images/icons.svg") no-repeat scroll left 0 / 50px auto transparent;font-size:20px;
	margin:0 0 20px 20px;
	padding:0 0 0 70px !important;
	height:50px !important;}
ul li.listSlides, ul li.listCafe {height: 38px !important;padding: 12px 0 0 70px !important;}
ul li.listCafe {background-position:0 -54px;}
ul li.listWatch {background-position:0 -108px;}
ul li.listSecure {background-position:0 -162px;}
ul li.listSafe {background-position:0 -216px;}

div.footer {clear:both;}
div.copyright {overflow:hidden;padding-top: 30px;}

div.footer div.col2A {font-size:14px;width:45%;box-sizing:border-box;}
div.footer div.col2B {width:55%;box-sizing:border-box;}
ul#menu-footer-menu {float:right;}
div.colFooterA div.menu-footer-menu-container ul li {float:left;display:block;}
div.colFooterA div.menu-footer-menu-container ul li a {border-right: 1px solid #fff;
    display: block;
    float: left;
    font-size: 14px;
    line-height: 14px;
    margin: 2px 0;
    padding: 0 5px;}
div.colFooterA div.menu-footer-menu-container ul li:last-child a {border:none;}

/* Testimonial slider styles */
.bx-wrapper {background-color:#80007e;margin:40px 10px !important;}
.bx-wrapper ul {
    margin: auto !important;}
.bx-wrapper:before {content:" ";display:block;position:absolute;width:39px;height:33px;
	background-image:url('/wp-content/themes/purpleplanet/images/quote.png');top:-22px;left:-10px;}
.bx-wrapper:after {content:" ";display:block;position:absolute;width:39px;height:33px;
	background-image:url('/wp-content/themes/purpleplanet/images/quote-r.png');bottom:-22px;right:-10px;}
.tslider blockquote {padding:10px 40px 20px !important;}
.tslider blockquote p {color:#fff !important;font-size:18px !important;margin: 0 !important;}
.tslider blockquote footer, .tslider blockquote footer a {color: #fff !important;}
.tslider blockquote footer:before {content: " " !important;}
.tslider .cbp-qtcontent img {
    float: right !important;
    margin: 20px 40px !important;}

/* Banner */
div.soliloquy-controls-direction {display:none;}
.soliloquy-container .soliloquy-caption {width:60% !important;font-weight:300;font-size:32px;text-align:left;bottom:40px !important;}
.soliloquy-container .soliloquy-caption-inside {
    text-align: left !important;
    text-shadow: none !important;
	padding:15px 20px !important;
}

/* Form styling */
input, textarea {background-color:transparent;border:1px solid #fff;padding:5px;margin:10px 0;width: 280px;}
input[type=submit] {background-color:#d1558d;border-right:none;border-left:none;border-top:none;
    border-bottom: 2px solid #80007e;max-width:110px;
    padding: 7px 14px;}
input[type=submit]:hover {
    background-color: #80007e;
    border-bottom: 2px solid #000;border-right:none;border-left:none;border-top:none;
    text-decoration: none;
}
textarea {min-height:140px;}
input.wpcf7-captchar {margin-left: 20px;
    width: 187px;}

/* For size 960 - 1280, so wrap would be 980 */
@media screen and (max-width: 1336px) {
 	.soliloquy-container .soliloquy-caption-inside {font-size:23px !important;}
	div.col4A h3, div.col4B h3, div.col4C h3, div.col4D h3 {font-size: 19px;line-height:64px;}
	div.whiteBox {top: -30px;}
	div.whiteBox p, div.whiteBox a {font-size:14px;}
	a.menuIcon {padding:3px 0 3px 45px;}
	div.col2D div.col4A, div.col2D div.col4B, div.col2D div.col4C, div.col2D div.col4D {padding:20px 0;}
	div.col2D div.col4A h3, div.col2D div.col4B h3, div.col2D div.col4C h3, div.col2D div.col4D h3 {box-sizing:border-box;width: 100%;}
}
 
@media screen and (max-width: 1200px) {
	div.noticeboard h3 {line-height: 58px;}
	div.col4A h3, div.col4B h3, div.col4C h3, div.col4D h3 {line-height: 50px;top: -15px;}
	div.whiteBox {top: -35px;}
}

/* For size 748 - 960, so wrap would be 768 */
@media screen and (max-width: 980px) {
	nav ul ul li a {font-size:22px;}
	div.noticeboard h3 {font-size: 19px;}
	div.col4A, div.col4B, div.col4C, div.col4D {margin-top: 30px;}
	div.col4A h3, div.col4B h3, div.col4C h3, div.col4D h3 {line-height: 44px;top: -4px;}
	div.whiteBox {top: -20px;}
	div.whiteBox, div.col3C div.whiteBox {padding: 15px;}
	div.col2C {}
	div.col2D {clear:both;width:100%;padding:20px 0;}
	div.col2D div.col4A, div.col2D div.col4B, div.col2D div.col4C, div.col2D div.col4D {box-sizing:border-box;width:25%;padding: 20px 10px;}
	div.col2D div.col4A h3, div.col2D div.col4B h3, div.col2D div.col4C h3, div.col2D div.col4D h3 {
		width: 100%;line-height:55px;top: -10px;}
	
	div.col2D div.whiteBox {padding: 20px 20px 10px;}
	div.col3A, div.col3B {width: 50%;}
	div.col3C {clear:both;width:100%;}
}
/* nav menu to change */
@media screen and (max-width: 930px) {
	div#header:before {background:none;}
	div.whiteBox {top: -40px;}
	div.noticeboard h3 {line-height: 53px;}
	
	nav {position:absolute;width:100%;z-index:1000;}
	nav ul li {width:100%;}
	nav ul li a.respMenu {
		background: url("/wp-content/themes/purpleplanet/images/menu.png") no-repeat scroll 0 0 transparent;
		display: block;
		top:-50px;
		left:10px;
		height: 40px;
		position: absolute;
		text-indent: -9999px;
		width: 40px;}
	nav ul ul {
		width:100%;background-color: #982397;position: relative;
    	top: -10px;display:none;}
	nav ul li:hover ul {display: block;}
	nav ul li div.menu-main-menu-container {
		clear: both;
		left: 0;margin:0;
		width: 100%;}
	nav ul ul li {width: 100%;margin:0;}
	nav ul ul li a {
		font-size:18px;
		background-color: #982397;
		border-bottom: 1px dotted #80007e;
		margin: 0;color:#fff;
		padding: 15px 10px;
		box-sizing:border-box;
    	width: 100%;
		}
	nav ul ul li a:hover, nav ul ul li.current_page_item a {border-bottom: 1px dotted #80007e;}
	nav ul ul li a:hover {background-color: #80007e;}
	nav ul ul ul {display:block;top:0;}
	
	nav ul ul li a:hover,
	nav ul ul li.current-menu-item a,
	nav ul ul li.current-page-ancestor a,
	body.single-case-study nav ul ul li.case-study-menu a,
	body.case-studies nav ul ul li.case-study-menu a,
	body.single-post nav ul ul li.noticeboard-menu a {background-color:#80007e;color:#fff;}
	nav ul ul li.current_page_item ul li a {background-color:#982397;}
	
	div.col4A, div.col4B, div.col4C, div.col4D, div.col2D div.col4A, div.col2D div.col4B, div.col2D div.col4C, div.col2D div.col4D {width:50%;}
	div.col4A h3, div.col4B h3, div.col4C h3, div.col4D h3 {line-height: 52px;padding-top: 11px;top: -25px;}
	
	div.col2D div.col4A h3, div.col2D div.col4B h3, div.col2D div.col4C h3, div.col2D div.col4D h3 {width: 100%;line-height: 42px;top:-18px;}
}
/* For size 548 - 748, so wrap would be 568 */
@media screen and (max-width: 768px) {
	div#header h1 {height: 154px;padding: 30px 0 0 20px;width: 147px;}
	div.linkTinyTim a {width:190px;height:195px;}
	header {height: 300px;}
	#header p {top:170px;}
    div.slider {width:100%;margin-bottom:20px;}
	div.noticeboard {width: 100%;}
	
	ul.offerList li {font-size:16px;}
	div.footer div.col2A, div.footer div.col2B {width:100%;}
	
	div.noticeboard h3 {line-height: 57px;padding-top: 10px;}
	div.col4A h3, div.col4B h3, div.col4C h3, div.col4D h3 {line-height: 55px;top: -25px;}
	div.col2D div.col4A h3, div.col2D div.col4B h3, div.col2D div.col4C h3, div.col2D div.col4D h3 {width: 100%;}
	div.col2A, div.col2B {width: 100%;}
}
@media screen and (max-width: 680px) {
	div.col4A h3, div.col4B h3, div.col4C h3, div.col4D h3 {line-height: 41px;top: -25px;}
	div.col2D div.col4A h3, div.col2D div.col4B h3, div.col2D div.col4C h3, div.col2D div.col4D h3 {line-height: 35px;top: -15px;}
	div.col3A, div.col3B {width: 100%;}
}
/* For size 300 - 500, so wrap would be 320 and fluid */
@media screen and (max-width: 568px) {
	.soliloquy-container .soliloquy-pager, .soliloquy-container .soliloquy-caption, .soliloquy-container .soliloquy-controls-auto {display: block !important;}
	.soliloquy-container .soliloquy-caption {width:70% !important;}
	.soliloquy-container .soliloquy-caption-inside{font-size:20px !important;}
	div.col4A h3, div.col4B h3, div.col4C h3, div.col4D h3 {line-height: 35px;top: -18px;}
	div.col2C {width: 100%;}
	div.col2D {padding: 0; width: 100%;}
	div.col2D div.col4A, div.col2D div.col4B, div.col2D div.col4C, div.col2D div.col4D {width:50%;padding:20px 10px;}
	div.col2D div.col4A h3, div.col2D div.col4B h3, div.col2D div.col4C h3, div.col2D div.col4D h3 {line-height: 34px;width: 100%;top: -15px;}
	
	div.noticeboard h3 {line-height: 46px;padding-top: 7px;}
}
@media screen and (max-width: 500px) {
	#header p {top: 230px;position: absolute;z-index: 1000;}
	.soliloquy-container .soliloquy-caption {width:100% !important;bottom:0px !important;}
	
	div.col4A, div.col4B, div.col4C, div.col4D {width:100%;}
	div.col4A h3, div.col4B h3, div.col4C h3, div.col4D h3 {line-height: 49px;top: -25px;}
	div.col2D div.col4A, div.col2D div.col4B, div.col2D div.col4C, div.col2D div.col4D {width: 100%;}
	div.col2D div.col4A h3, div.col2D div.col4B h3, div.col2D div.col4C h3, div.col2D div.col4D h3 {line-height: 45px;top: -20px;width: 100%;}	
}
@media screen and (max-width: 320px) {
	header {height: 270px;}
	div.wrapGlobal, div#header:after {background:none;}
	div.linkTinyTim {right: -18px;top: -18px;}
	div.linkTinyTim a {width:100px;height:105px;}
	.soliloquy-container .soliloquy-caption-inside{font-size: 16px !important;padding: 10px !important;}
	.soliloquy-container .soliloquy-controls {display:none !important;}
	
	div.col4A h3, div.col4B h3, div.col4C h3, div.col4D h3 {line-height: 47px;padding-top: 7px;top: -16px;width: 100%;}
	div.col2D div.col4A h3, div.col2D div.col4B h3, div.col2D div.col4C h3, div.col2D div.col4D h3 {width:100%;}
	div.col2D div.col4A, div.col2D div.col4B, div.col2D div.col4C, div.col2D div.col4D {width:100%; }
	ul li.listSlides, ul li.listCafe {height: 44px !important;padding: 7px 0 0 70px !important;}
	ul li.listCafe{margin: 0 0 30px 20px;}
	ul li.listWatch {margin: 0 0 60px 20px;}
	ul li.listSecure {margin: 0 0 40px 20px;}
	
	div.noticeboard h3 {line-height:42px;padding-top:0;}
}