body
{
	padding: 0;
	margin: 0;
	font-family: 'Poppins', sans-serif;
}

#svgHolder
{
	position: relative;
	width: 70%;
	border: 5px solid rgb(246,159,67);
	box-sizing: border-box;
	border-radius: 10px;
	background-color: rgb(246,159,67);
	margin-left:4%;
	margin-top: 1%;
}

#can
{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	z-index: -1;
}

#svgHolder svg
{
	float: left;
	margin: 1%;
	width: 98%;
	box-sizing: border-box;
	cursor: pointer;
	padding: 0;
}

svg *
{
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.greyedOut
{
	opacity: 0.3;
}

.clearfix
{
	overflow: auto;
}

.coloured
{
	stroke: none;
}

.unavailable
{
	opacity: 0.3;
}

.copyright
{
	clear: both;
	width: 100%;
	text-align:center; 
	color: rgb(255,255,255);
	font-size: 1.3em;
	padding-top:  5%;
}

.floatLeft
{
	float:left;
	width: 14%;
	box-sizing: border-box;
	margin-left: 4%;
	margin-bottom: 2%;
	margin-top: 0;
}

ul
{
	list-style-type: none;
	padding: 0;
	display: inline;
	margin-bottom: 5%;
}

li img
{
	width: 15%;
	border: 5px solid rgb(255,255,255);
	-webkit-transition : border 900ms ease-out;
	-moz-transition : border 900ms ease-out;
	-o-transition : border 900ms ease-out;
	transition : border 900ms ease-out;
}

li
{		display: inline;
}

li img:hover
{
	cursor: pointer;
	border: 5px solid rgba(27,55,101,1);
}

#namePlate, .namePlate
{
	position: absolute;
	left: 30%;
	top: 0%;
	font-family: 'Poppins', sans-serif;
	z-index: 3;
	position: absolute;
	text-align: center;
	background-color: rgb(246,159,67);
	padding: 2%;
	color: #f2f7ee;
	font-size: 1.2em;
	width: 40%;
	border-radius: 0 0 8px 8px;
	margin: 0;
	font-weight: bold;
}

.namePlate
{
	position: relative;
	left: 0%;
	width: 100%;
	padding: 0;
	font-size:1em;
	background-color: transparent;
	border-radius: 0;
	margin-bottom: 10%;
}

.namePlate img
{
	width: 60%;
	margin-left: 5%;
}


.palette
{		
	width: 25%;
	position: absolute;
	right: 1%;
	top: 3%;
	box-sizing: border-box;
	background-color: rgb(255,255,255);
	padding: 2%;
	border-top: 2px solid rgb(246,159,67);
	border-right: 2px solid rgb(246,159,67);
	border-bottom: 2px solid rgb(246,159,67);
	border-left: 2px solid rgb(246,159,67);
}

.tools
{
	width: 100%;
	float: left;
	margin-top: 10%;
	margin-bottom: 20%;
}

.tools img:hover
{
	cursor: pointer;
}

.showImages
{
	margin-top:2%;
	box-sizing: border-box;
	background-color: rgb(246,159,67);
	padding: 2%;
	border: 2px solid rgb(246,159,67);
	font-family: 'Poppins', sans-serif;
	text-align: center;
	color: #f2f7ee;
	font-size: 1.3em;
	font-weight: bold;
	cursor: pointer;
}

.more
{		
	position: absolute;
	width: 92%;
	left: 5%;
	bottom: 1%;
	margin:0%;
	box-sizing: border-box;
	background-color: rgb(246,159,67);
	padding: 2%;
	border: 2px solid rgb(246,159,67);
	border-radius: 2px;
	font-family: 'Poppins', sans-serif;
	text-align: center;
	color: #f2f7ee;
	font-size: 1.3em;
	font-weight: bold;
	cursor: pointer;
}


[data-swatch]
{
	width: 24%;
	padding: 5% 2.5% 10% 2.5%;
	margin: .5%;
	box-sizing: border-box;
	float: left;
	stroke: none;
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid rgba(255,255,255,1);
}

.stroke
{
	background-color: transparent !important;
	fill: transparent !important;
}

.colour1
{
	background-color: rgba(233,0,20,1);
	fill: rgba(233,0,20,1);
	stroke: rgba(233,0,20,1);
}

.colour2
{
	background-color: rgba(233,107,13,1);
	fill: rgba(233,107,13,1);
	stroke: rgba(233,107,13,1);
}

.colour3
{
	background-color: rgba(242,168,7,1);
	fill: rgba(242,168,7,1);
	stroke: rgba(242,168,7,1);
}

.colour4
{
	background-color: rgba(251,221,12,1);
	fill: rgba(251,221,12,1);
	stroke: rgba(251,221,12,1);
}

.colour5
{
	background-color: rgba(174,203,3,1);
	fill: rgba(174,203,3,1);
	stroke: rgba(174,203,3,1);
}

.colour6
{
	background-color: rgba(92,139,32,1);
	fill: rgba(92,139,32,1);
	stroke: rgba(92,139,32,1);
}		

.colour7
{
	background-color: rgba(10,120,130,1);
	fill: rgba(10,120,130,1);
	stroke: rgba(10,120,130,1);
}	

.colour8
{
	background-color: rgba(0,157,225,1);
	fill: rgba(0,157,225,1);
	stroke: rgba(0,157,225,1);
}	

.colour9
{
	background-color: rgba(182,225,242,1);
	fill: rgba(182,225,242,1);
	stroke: rgba(182,225,242,1);
}	


.colour10
{
	background-color: rgba(0,96,167,1);
	fill: rgba(0,96,167,1);
	stroke: rgba(0,96,167,1);
}	


.colour11
{
	background-color: rgba(0,80,127,1);
	fill: rgba(0,80,127,1);
	stroke: rgba(0,80,127,1);
}	


.colour12
{
	background-color: rgba(94,78,150,1);
	fill: rgba(94,78,150,1);
	stroke: rgba(94,78,150,1);
}	


.colour13
{
	background-color: rgba(78,23,99,1);
	fill: rgba(78,23,99,1);
	stroke: rgba(78,23,99,1);
}	


.colour14
{
	background-color: rgba(175,115,168,1);
	fill: rgba(175,115,168,1);
	stroke: rgba(175,115,168,1);
}	


.colour15
{
	background-color: rgba(246,146,154,1);
	fill: rgba(246,146,154,1);
	stroke: rgba(246,146,154,1);
}	


.colour16
{
	background-color: rgba(249,220,232,1);
	fill: rgba(249,220,232,1);
	stroke: rgba(249,220,232,1);
}	


.colour17
{
	background-color: rgba(171,134,61,1);
	fill: rgba(171,134,61,1);
	stroke: rgba(171,134,61,1);
}	


.colour18
{
	background-color: rgba(241,187,81,1);
	fill: rgba(241,187,81,1);
	stroke: rgba(241,187,81,1);
}	

.colour19
{
	background-color: rgba(116,67,15,1);
	fill: rgba(116,67,15,1);
	stroke: rgba(116,67,15,1);
}	

.colour20
{
	background-color: rgba(255,255,255,1);
	fill: rgba(255,255,255,1);
	stroke: rgba(255,255,255,1);
	border-color: rgb(220,220,220) !important;
}	

.colour21
{
	background-color: rgba(235,235,235,1);
	fill: rgba(235,235,235,1);
}	

.colour22
{
	background-color: rgba(217,217,220,1);
	fill: rgba(217,217,220,1);
	stroke: rgba(217,217,220,1);
}	

.colour23
{
	background-color: rgba(71,67,65,1);
	fill: rgba(71,67,65,1);
	stroke: rgba(71,67,65,1);
}	

.colour24
{
	background-color: rgba(51,49,47,1);
	fill: rgba(51,49,47,1);
	stroke: rgba(51,49,47,1);
}	

.colour25
{
	background-color: rgba(243,157,147,1);
	fill: rgba(243,157,147,1);
	stroke: rgba(243,157,147,1);
}

.colour26
{
	background-color: rgba(240,128,116,1);
	fill: rgba(240,128,116,1);
	stroke: rgba(240,128,116,1);
}

.colour27
{
	background-color: rgba(231,52,75,1);
	fill: rgba(231,52,75,1);
	stroke: rgba(231,52,75,1);
}

.colour28
{
	background-color: rgba(231,98,120,1);
	fill: rgba(231,98,120,1);
	stroke: rgba(231,98,120,1);
}

.colour29
{
	background-color: rgba(188,211,102,1);
	fill: rgba(188,211,102,1);
	stroke: rgba(188,211,102,1);
}

.colour30
{
	background-color: rgba(165,187,51,1);
	fill: rgba(165,187,51,1);
	stroke: rgba(165,187,51,1);
}

.colour31
{
	background-color: rgba(200,87,31,1);
	fill: rgba(200,87,31,1);
	stroke: rgba(200,87,31,1);
}

.colour32
{
	background-color: rgba(237,201,163,1);
	fill: rgba(237,201,163,1);
	stroke: rgba(237,201,163,1);
}


.colour33
{
	background-color: rgba(27,55,101,1);
	fill: rgba(27,55,101,1);
	stroke: rgba(27,55,101,1);
}

.colour34
{
	background-color: rgba(15,142,128,1);
	fill: rgba(15,142,128,1);
	stroke: rgba(15,142,128,1);
}

.colour35
{
	background-color: rgba(235,183,155,1);
	fill: rgba(235,183,155,1);
	stroke: rgba(235,183,155,1);
}

.colour36
{
	background-color: rgba(0,0,0,1);
	fill: rgba(0,0,0,1);
	stroke: rgba(0,0,0,1);
}

.colour37
{
	background-color: rgba(255,252,207,1);
	fill: rgba(255,252,207,1);
	stroke: rgba(255,252,207,1);
}

.colour38
{
	background-color: rgba(232,213,171,1);
	fill: rgba(232,213,171,1);
	stroke: rgba(232,213,171,1);
}

.colour39
{
	background-color: rgba(178,147,117,1);
	fill: rgba(178,147,117,1);
	stroke: rgba(178,147,117,1);
}


.colour40
{
	background-color: rgba(72,132,168,1);
	fill:rgba(72,132,168,1);
	stroke: rgba(72,132,168,1);
}

.opaque 
{
	background-image: url('../icons/tick.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 80% 80%;
}

[data-tool]
{
	text-align: center;
	margin-right: 5%;
	margin-bottom: 0%;
}

[data-weight]
{
	margin-right: 2%;
}

[data-tool].opaque
{
	background-image: none;
}

[data-tool].opaque img
{	
	background-image: none;
	border: 5px solid rgba(27,55,101,1);
	background-color: rgba(246,159,67,.2);
}

.error
{
	text-align: center;
	background-color: rgba(231,52,75,1);
	color: #f2f7ee;
	padding: 3%;
	margin: 5%;
}

.back
{
	width:  30%;
	font-size: 1.4em;
	text-align: center;
	padding:  2%;
	background-color: #7baa55;
	margin-left: 35%;
}

.back a
{	
	color: rgb(255,255,255);
	text-decoration: none;
}

.back:hover
{
	cursor: pointer;
	background-color:rgba(231,52,75,1);
}

.imgHolder
{
	width: 47%;
	margin-top: 5%;
	margin-left: 2%;
	box-sizing: border-box;
	float: left;
}

.imgHolder p
{
	color: #f2f7ee;
	font-size: 1.3em;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 800px) 
{
	.palette
	{		
		width: 84%;
		margin: 8% 1% 2% 9%;
		position: relative;
	}
	
	[data-swatch]
	{
		padding: 2.5% 1% 2% 1%;
		width: 10%;
	}
	
	li img
	{
		width: 40%;
		
	}
	
	#svgHolder
	{
		width: 84%;
		margin-left: 8%;
	}
	
	li[data-tool] img
	{
		
		width: 9%;
	}
	
	.more
	{
		font-size: .8em;
	}

	#namePlate
	{
		left: 10%;
		width:  80%;
		font-size: .7em !important;
	}
}

@media only screen and (min-width: 767px) {

	[data-tool]
	{
		margin-right: 1%;
	}

	[data-weight]
	{
		margin-right: 0;
	}
}