/* --------------------------------------------------------------
Theme Name: xxxxxxx
Description: xxxxxx
Author: xxxxxxxx
Author URI: http://www.xxxxxxxx.xxx/
Tags: xxxxxxxxx
-------------------------------------------------------------- */


/* --------------------------------------------------------------
* Colours
* Also need to update skeleton.css with these
*

pink - links: 					#de8aa8
grey - text: 					#000
blue background footer / logo: 	#364059
pink background on home:		#fcf6f8

-------------------------------------------------------------- */



/* --------------------------------------------------------------
* Icons Font
-------------------------------------------------------------- */
@font-face {
    font-family: 'shine-pr-v101';
    src:    url('../fonts/shine-pr-v101.eot?kzq3up');
    src:    url('../fonts/shine-pr-v101.eot?kzq3up#iefix') format('embedded-opentype'),
        url('../fonts/shine-pr-v101.ttf?kzq3up') format('truetype'),
        url('../fonts/shine-pr-v101.woff?kzq3up') format('woff'),
        url('../fonts/shine-pr-v101.svg?kzq3up#shine-pr-v101') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'shine-pr-v101' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

.icon-menu:before {
  content: "\e907";
}
.icon-info:before {
    content: "\e904";
}
.icon-mail:before {
    content: "\e900";
}
.icon-info2:before {
    content: "\e905";
}
.icon-information:before {
    content: "\e905";
}
.icon-link:before {
    content: "\e906";
}
.icon-twitter:before {
    content: "\e901";
}
.icon-instagram:before {
    content: "\e902";
}
.icon-facebook:before {
    content: "\e903";
}


/* --------------------------------------------------------------
* Generic Styles and Classes
-------------------------------------------------------------- */
body {
	/* Typography */
	font-kerning: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.alert {
	margin: 0px;
	padding:12px;
}
.alert-info {
	color: #00529B;
	background-color: #BDE5F8;
}
.alert-success {
	color: #4F8A10;
	background-color: #DFF2BF;
}
.alert-warning {
	color: #9F6000;
	background-color: #FEEFB3;
}

.container.first {
	padding-top: 70px;
}
.column img, .columns img {
	width: 100%;
	height: auto;
}

.columns input:not([type=button]):not([type=reset]):not([type=submit]),
.columns select,
.columns textarea {
	width: 100%;
	font-size: 1.4rem;
	line-height: 1.2;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}


.subhead {
	font-size: 1.33em;
	line-height: 1.9;
}
.shine {
	position: relative;
	cursor: pointer;
	
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.shine:hover {
	opacity: 0.8;
}
.shine:after {
	position: absolute;
	content: "";
	top: 0px;
	left: 0px;
	width: 0%;
	height: 100%;
	background-color: rgba(255,255,255,0.9);
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}
/* on hover we animate the width to
 * 100% and opacity to 0 so the element
 * grows and fades out
 */
.shine:hover:after {
	width: 120%;
	background-color: rgba(255,255,255,0);
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.shine:active:after {
  opacity: 0.9;
}
.anchor {
	padding-top: 70px;
	margin-top: -70px;
}
/* --------------------------------------------------------------
* Header
-------------------------------------------------------------- */

#top-header.sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	margin: 0 auto;
	z-index: 999;
}
#menubar {
	position: relative;
	height: 70px;
	font-size: 17px;
	line-height: 70px;
	margin: 0 0 0px 0;
	
	-webkit-box-shadow: 0px 6px 6px -1px rgba(210,210,210,0.5);
	-moz-box-shadow: 0px 6px 6px -1px rgba(210,210,210,0.5);
	box-shadow: 0px 6px 6px -1px rgba(210,210,210,0.5);
}
#menubar a {
	text-decoration: none;
}
.shine {
	position: absolute;
	top: 0;
	left: 0;
	
}
#head_logo {
	width: 100%;
	max-width: 180px;
	height: auto;
}

.social-media {
	text-align: right;
}
.social-media a {
	text-decoration: none;
	margin: 0 1em;
}
.social-media a:last-child {
	margin-right: 0;
}
.social-media i {
	color: #000;
	font-size: 20px;
	line-height: 70px;
}
.social-media a:hover i {
	text-decoration: none;
	color: #666;
}
header .social-media {
	display: none;
	float: right;
}
@media (min-width: 1000px) {
	header .social-media {
		display: inline-block;
	}
}
/* --------------------------------------------------------------
* Top Navigation
-------------------------------------------------------------- */
#primary_nav_wrap {
	display: inline-block;
	text-align: left;
	margin-left: 29%;
}
@media screen and (max-width:1000px) {
	#primary_nav_wrap {
		margin-left: 210px;
	}
}
#primary_nav_wrap ul {
	display: inline-block;
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0
}
#primary_nav_wrap ul a {
	display: block;
	color: #de8aa8;
	text-decoration: none;
	padding: 0 13px;
}

#primary_nav_wrap ul li {
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 0;
	text-align: left;
}
#primary_nav_wrap ul li.current_page {
	background: #f6f6f6
}
#primary_nav_wrap ul li:hover {
	background: #f6f6f6
}

#primary_nav_wrap ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	
	-webkit-box-shadow: 0px 6px 6px 1px rgba(210,210,210,0.5);
	-moz-box-shadow: 0px 6px 6px 1px rgba(210,210,210,0.5);
	box-shadow: 0px 6px 6px 1px rgba(210,210,210,0.5);
}
#primary_nav_wrap ul ul li {
	display: block;
	float: none;
	width: auto;
	height: auto;
	line-height: 120%;
}
#primary_nav_wrap ul ul a {
	display: block;
	line-height: 120%;
	padding: 10px 35px 10px 15px;
}
#primary_nav_wrap ul ul ul {
	top: 0;
	left: 100%
}
#primary_nav_wrap ul li:hover > ul {
	display: block;
	z-index: 999;
}


/* --------------------------------------------------------------
* Responsive Menu
-------------------------------------------------------------- */
#primary_nav_wrap ul li.mobile-button {
	display: none;
	font-size: 25px;
}
 /* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:1110px) {
	
	#primary_nav_wrap ul a {
		padding: 0 0.5em;
	}
}
@media screen and (max-width:820px) {
	
	#primary_nav_wrap {
		float: right;
		height: 70px;
		overflow: hidden;
	}
	#primary_nav_wrap ul.responsive {
		position: absolute;
		top: 70px;
		right: 0;
		left: 0;
		background-color: #fff;
		z-index: 999;
		padding: 1em 0;
		z-index: 999;
	
		-webkit-box-shadow: 0px 6px 6px 1px rgba(210,210,210,0.5);
		-moz-box-shadow: 0px 6px 6px 1px rgba(210,210,210,0.5);
		box-shadow: 0px 6px 6px 1px rgba(210,210,210,0.5);
		
	}
	#primary_nav_wrap ul li {
		display: none;
	}
	#primary_nav_wrap ul li.mobile-button {
		display: block;
		float: right;
	}
	#primary_nav_wrap ul.responsive li {
		display: block;
		float: none;
	}
	#primary_nav_wrap ul.responsive li.mobile-button {
		position: absolute;
		right: 0px;
		top: -70px;
	}
	#primary_nav_wrap ul.responsive li:not(.mobile-button) a {
		display: block;
		text-align: left;
		padding-left: 2em;
		line-height: 1.7;
		background-color: #fff;
	}
	#primary_nav_wrap ul.responsive a:hover {
		text-decoration: underline;
	}
	#primary_nav_wrap ul li > ul {
		display: block;
		position: relative;
		padding-left: 3em;
		box-shadow: none;
	}
	#primary_nav_wrap ul.responsive li:not(.mobile-button) ul a {
		line-height: 1;
		font-size: 0.9em;
	}
}





/* --------------------------------------------------------------
* Large image headers
-------------------------------------------------------------- */
#header_img {
	position: relative;
	width: 100%;
	height: auto;
	z-index: -1; /* Allow nav bottom shaddow to show */
}
#header_img img {
	width: 100%;
	height: auto;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; 
}
#header_img .container {
	position: absolute;
	top: 0%;
	left: 0;
	right: 0;
}






/* --------------------------------------------------------------
* Page elements
-------------------------------------------------------------- */
.page-id {
	padding-top: 70px;
}
.page-id h1.two {
	font-size: 7.5rem;
	color: #364059;
}
@media (max-width: 650px) {
	.page-id h1.two { font-size: 5.0rem }
	h1 { font-size: 5.0rem;	}
	h2 { font-size: 4.2rem;	}
	h3 { font-size: 3.6rem;	}
	h4 { font-size: 3.0rem;	}
	h5 { font-size: 2.4rem;	}
	h6 { font-size: 1.5rem;	}
}
.section {
	padding: 40px 0;
}


/* Inner Fullwidth */
#page_inner {
	text-align: center;
}
#page_inner h3 {
	width: 70%;
	padding: 0 15%;
	font-size: 	1.33em;
	line-height: 1.75;
	font-weight: 700;
}
.client_logo {
	display: block;
	margin: 2em auto;
}



/*
* Fullwidth images
*/
.fullwidth {
	width: 100%;
	margin: 2.5rem 0 5rem;
}
.fullwidth img {
	width: 100%;
	height: auto;
}


/* Bullets
------------------------- */
.alt1 li {
	list-style: none;
}
.alt1 li:before {
	content: '\2022';
	display: inline-block;
	position: relative;
	max-width: 0;
	max-height: 0;
	left: -10px;
	top: 0;
	color: #de8aa8;
	font-size: 20px;
}


/* Follow us / News
------------------------- */
#follow {
	margin: 40px auto;
	text-align: center;
}
#follow h2 {
	margin: 0 0 1em 0;
}
#follow i {
	display: inline-block;
	margin: 0 0 0.5em;
	width: 2em;
	height: 2em;
	font-size: 2em;
	line-height: 2em;
	text-align: center;
	color: #fff;
	background-color: #C5C5C5;
}
#follow i:hover {
	opacity: 0.8
}


/* Contact
------------------------- */
#contact {
	margin: 40px auto;
	text-align: left;
}
#contact p.head {
	text-align: center;
}
#contact textarea {
	height: 11em;
}




/* Back to top horizontal border */
.back-to-top {
	width: 83.3%;
	margin: 9rem auto 0;
	text-align: center;
}
.back-to-top:before,
.back-to-top:after {
	background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
	background-position: bottom;
	background-size: 4px 1px;
	background-repeat: repeat-x;
	
	content: "";
	display: inline-block;
	height: .1em;
	position: relative;
	vertical-align: middle;
	width: 40%;
}
.back-to-top:before {
	right: 1.5em;
	margin-left: -50%;
}
.back-to-top:after {
	left: 1.5em;
	margin-right: -50%;
}


/* Back to top diamond */
.back-to-top a {
	display: inline-block;
	position: relative;
	line-height: 50px;
	margin: 0 auto 20px auto;
	font-size: 15px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	
	/* diamond section */
	width: 50px;
	height: 50px;
}
.back-to-top a:after {
	position: absolute;
	display: block;
	content: "";
	width: 50px;
	height: 50px;
	margin: 0 auto;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	background-color: #de8aa8;
	z-index: -1;
}
.back-to-top a:hover:after {
	opacity: 0.8;
}
#contactWebsite {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}





/* --------------------------------------------------------------
* Footer
-------------------------------------------------------------- */
footer#bottom-footer {
	background-color: #364059;
	margin: 9rem 0 0 0;
	padding: 40px 0 100px;
}
footer#bottom-footer .column,
footer#bottom-footer .columns {
	padding-top: 80px;
	vertical-align: top
} 
footer#bottom-footer img {
	display: block;
	max-width: 209px;
	margin: -73px 0 20px 0;
	vertical align : top;
}
footer#bottom-footer h3, 
footer#bottom-footer p a, 
footer#bottom-footer p, 
footer#bottom-footer a {
	margin: 0;
	line-height: 2;
	font-size: 1em;
	color: #fff;
	text-decoration: none;
	text-align: left;
}
footer#bottom-footer .links a {
	display: block;
}

footer#bottom-footer a:hover {
	color: #de8aa8;
}

footer#bottom-footer .social-media {
	text-align: left;
}
footer#bottom-footer .social-media a {
	display: inline-block;
	margin: 0.5em 1em;
}
footer#bottom-footer .social-media a:first-of-type {
	margin-left: 0;
}
footer#bottom-footer .social-media i {
	line-height: 1;
	color: #fff;
}
.social-media a:hover i {
	text-decoration: none;
	color: #666;
}

/* --------------------------------------------------------------
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Media Queries
-------------------------------------------------------------- */

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
	
}

/* High resolution devices */
@media print,
	   (-webkit-min-device-pixel-ratio: 1.25),
	   (min-resolution: 1.25dppx),
	   (min-resolution: 120dpi) {
}