/*
 font-family: 'Open Sans', sans-serif;*/

/*
Site Colours
Ivory = #fffff0
Dark purple = #434569
Light purple = #9980b1
Dark grey (text) = #575757


*/

body { 
margin: 0px;
color:#575757;
	background-color: #fffff0;
	

}



header, #banner, #topbar { 
color:#fffff0;
	font-family: 'Open Sans', sans-serif;
	font-size:1.125em;
	font-weight:400;
	padding-bottom: 10px;
	padding-top: 10px;
}



header
{background-color: #434569;
width: 100%;
margin: auto auto;
}





#banner {

	
	
	
	width: 100%;
	max-height: 543px;
	margin-bottom:0px;
}
.banner-content{
	width: 48%;
	margin-left: 3%;
	padding-top: 1%;
	margin-top: 0%;
	
	
}

.banner-content a.button-white{
	
	margin-left: 10%;
	margin-top: 0px;
	font-size:1.5vw;

}


.wrapper, #content{ 

width: 90%;
margin: auto auto;
padding-left: 5%;
padding-right: 5%;
}


.right { text-align: right; }

.spacer { clear: both; height: 5px; width: 100%;
}

.center {text-align: center;
margin-right: auto;
margin-left: auto;}



#content {
	
	background-color: #fffff0;
	padding-top:0px;
	
}




h1 {
	font-family: 'Open Sans', sans-serif;
	font-size: 36px;
	font-weight: 600;
	color: #434569;
	text-transform: uppercase;

}

h2 {
	font-family: 'Open Sans', sans-serif;
	font-size: 26px;
	font-weight: 700;
	color: #434569;
text-transform: uppercase;

}



h3 {font-family: 'Open Sans', sans-serif;
	font-size: 20px; 
	font-weight: 700;
	color: #434569;
margin-top: 0px;
text-transform: uppercase;
}


p, li {
	font-family: 'Open Sans', sans-serif;
	Font-size: 20px;
Font-weight: 400;
color: #575757;

	line-height: 1.5em; /* 36px */
}




a {
	color: #575757;
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	font-weight: 700;
	Font-size: 17px;
	text-transform: uppercase;
}

a:hover { color: #9980b1;}





a.button-white {
    color: #575757;
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
	text-transform: uppercase;
    padding: 10px;
	background-color: #fffff0;
	display: inline-block;
	margin-bottom: 10px;

	}
	
a.button-white:hover {
	background-color: #9980b1; 
	color: #fffff0;
}




.purplebg
{
	background-color: #434569;
	color: #fffff0;
	margin-top: 0px;
}
.purplebg p, .purplebg li, .purplebg h1, .purplebg h2 {color: #ffffff; padding: 10%;}  
.purplebg p {padding-bottom: 0; padding-top: 0;}
.purplebg h2 {padding-bottom: 0;}

.lilacbg
{
	background-color: #9980b1;
	color: #fffff0;
	
}

.lilacbg p, .lilacbg li, .lilacbg h2 {color: #fffff0;  margin-left: 10px;}  
.lilac h2 {margin-top: 10px;}
.lilac h3 {margin-left: 10px;} 

.lilacquote {
	color: #9980b1;
	font-weight: 400;
	font-size: 25px;
}

hr
{color: #434569;}







footer { 

color: #fffff0;
width: 100%;
margin-top:25px;
} 

.footer_content { 
background: #434569; 	
color:#fffff0;

	}
 footer h1, footer p {
	color:#fffff0;
	 line-height: 110%;
	
 }
 footer h2,  footer h3 {
	 color:#fffff0;
 }
 
 footer p{
	 font-size:1em;
	 font-weight:400;
	 color: #fffff0;
	  font-family: 'Open Sans', sans-serif;
	  
 }
footer a:visited, footer a:link

{ 
color: #fffff0;
text-decoration: none;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
	font-size:1em;
	
}
.bottom-bar {background-color: #fffff0;}	
.bottom-bar p{font-size:0.9em;  font-family: 'Open Sans', sans-serif; text-transform: none; color: #434569}
.bottom-bar a:visited, .bottom-bar a:link {text-transform: uppercase; color: #434569;}


.logo { 
width: 100%;
max-width: 509px;


}

.footer-button {text-align: right; margin-top: 80px;}



.clear {
	clear:both;
}


/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWELVE  */
.span_12_of_12 {
	width: 100%;
}

.span_11_of_12 {
  	width: 91.53%;
}
.span_10_of_12 {
  	width: 83.06%;
}

.span_9_of_12 {
  	width: 74.6%;
}

.span_8_of_12 {
  	width: 66.13%;
}

.span_7_of_12 {
  	width: 57.66%;
}

.span_6_of_12 {
  	width: 49.2%;
}

.span_5_of_12 {
  	width: 40.73%;
}

.span_4_of_12 {
  	width: 32.26%;
}

.span_3_of_12 {
  	width: 23.8%;
}



.span_2_of_12 {
  	width: 15.33%;
}

.span_1_of_12 {
  	width: 6.866%;
}

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF FIVE  */
.span_5_of_5 {
	width: 100%;
}
.span_4_of_5 {
	width: 79.68%;
}
.span_3_of_5 {
	width: 59.36%;
}
.span_2_of_5 {
	width: 39.04%;
}
.span_1_of_5 {
	width: 18.72%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_5, .span_2_of_5, .span_3_of_5, .span_4_of_5, .span_5_of_5 { width: 100%; }
}


#content img { 
width: 100% !important;
height: auto !important;
}



@media only screen and (max-width: 1024px) {
	img { 
float: none !important;
width: 100% !important;
height: auto !important;
display: block !important;
}



.gallery { 
width: calc(25% - 10px); 
float: left; 
margin: 5px;
}

.developers a { color: #000; text-decoration: none; }


.gallery_container { width: 100%; margin: auto auto; }


div.shop {
  width: 100%
  
  

}
div.shop img {
  height: 100%;
  width: 100%;

  object-fit: cover; /* Do not scale the image */
  object-position: center; 
  
}


div.shop:before{
  content:'';
  padding-top:100%;/* vertical value as  100% equals width */
  float:left;;
}

#form form { width: 100%; }

#form form input {
	width: 100%;
	border: 1px solid #cccccc;
	min-height: 30px;
	text-align:  left;
}

#form form textarea { width: 100%; min-height: 100px;}

#form form input[type="submit"] { text-align: center; font-weight: bold; background-color: #9980b1; color: #fffff0; }

#form form input[type="checkbox"] { text-align: left; font-weight: bold; width: 20px; }

form.contact input, form.contact textarea{width:100%;margin-top:10px;height:30px;line-height:30px;font-size:1em;border:0px;background:#ffffff;}
form.contact textarea{height:120px;}
form.contact{text-align:left;font-size:1em;}
form.contact submit {background-color: #9980b1; color: #fffff0;}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	
.col {  margin: 0% 0 0% 0%; }
    
    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
	width: 100%; 
	border-bottom: 0px solid #000;
	margin-bottom: 20px;
	}
	
	#banner { display: none; }
	
	.right { text-align: left; }
	
	
	.gallery { 
width: calc(100% - 10px); 
float: none; 
margin: 5px;
}

a.button-lilac, a.button-white, a.button-blue {display: block;}

	
}

.active { color: #9c9c9b; }


@media only screen and (min-width: 500px) and (max-width: 1425px) {
	h3 {font-size: 1.1em;}
	
	.span_3_of_12 {width: 47%;}
	.span_3_of_12:nth-child(2n+1) {
		clear: both;
	margin-left: 0;
 
}

.span_6_of_12 {width: 100%}
.bluebg h1 {font-size:20px;}
}



@media only screen and (max-width: 1124px) {
.bluebg h1 {font-size:30px;}
}