html,body{
margin:0;
padding:0;
}


#productback{
width: 100%;
margin-top: 0%;
float:left;
background-image: url(productback2.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
padding-top: 60px;
padding-bottom: 60px;
text-align: center;
}

.producttext{
font-family: calibril;
font-weight: 200;
font-size: 280%;
display: inline-block;
padding-top: 15px;
padding-bottom: 15px;
width: 100%;
background: rgba(255,255,255,0.4);
text-align: center;
line-height: 15px;
color: darkslategray;
}

.producttext h3{
font-weight: 300;	
font-size: 130%;
	
}

.wordstyle{
font-family:candara;
font-weight: bold;
}


#wrappercolourguide{
	
width: 100%;
float: left;
text-align: center;	
margin-bottom: 3%;
	
}


#sidebarcolourguide{
display: inline-block;
width: 27%;
margin-top: 1%;
margin-bottom: 2%;
vertical-align: top;
font-family: calibril;	
margin-left: 3%;	
	
}


#sidebarcolourguide a{
color: white;
text-transform: uppercase;	
font-weight: 300;
font-size: 95%;
text-align: center;
float: left;
width: 100%; 
padding-top: 6px;
padding-bottom: 6px;
background: rgb(21,21,21);
	
}

#sidebarcolourguide a:link, #sidebarcolourguide a:visited{
	
color: white;	
	
	
}


#sidebarcolourguide a:hover, #sidebarcolourguide a:active{
	
color: white;	
background: firebrick;	
	
}


.sidebarcolourguideimage, .sidebarcolourguideimagea{
width: 100%;
display: inline-block;
vertical-align: top;
margin-top: 18px;	
position: relative;	
overflow: hidden;	
cursor: pointer;
}

.sidebarcolourguideimage:hover .sidebarcolourimagehover{


	
	
}


.sidebarcolourguideimage a, .sidebarcolourguideimagea a{
color: white;
text-transform: uppercase;	
font-weight: 300;
font-size: 100%;
text-align: center;
float: left;
width: 100%; 
padding-top: 6px;
padding-bottom: 6px;
background: transparent !important;	
}

.sidebarcolourguide a:link, #sidebarcolourguide a:visited{
	
color: white;	
	
	
}



.sidebarcolourguideimage img, .sidebarcolourguideimagea img{
	
width: 100%; 
height: auto;	
	
}


.sidebarcolourguide a:hover, #sidebarcolourguide a:active{
	
color: white;	
background: transparent !important;	
	
}


/* Chrome, Safari, Opera */
@-webkit-keyframes instruct {
    0%   {left: 100%;}
    100% {left: 0%}
}

/* Standard syntax */
@keyframes instruct {
    0%   {left: 100%;}
    100% {left: 0%}
}


/* Chrome, Safari, Opera */
@-webkit-keyframes instructback {
    0%   {left: 0%;}
    100% {left: 100%}
}

/* Standard syntax */
@keyframes instructback {
    0%   {left: 0%;}
    100% {left: 100%}
}




.sidebarcolourimagehover, .sidebarcolourimagehovera{
position: absolute;
top: 0%;
left: 0%;
z-index: 99999;
width: 100%;
display: none;	
background: rgba(0,0,0,0.5);
font-family: calibril;
color: white;
font-weight: 400;	
text-transform: uppercase;


}


.sidebarcolourimagehover{
padding-top: 25%;	
padding-bottom: 80%;	
	
	
}

.sidebarcolourimagehovera{
padding-top: 40%;	
padding-bottom: 70%;	
	
	
}


.sidebarcolourimagehover:hover{

	
}


#contentboxfloat{
display: inline-block;
width: 55%;
margin-top: 1%;
margin-bottom: 2%;
vertical-align: top;
font-family: calibril;
}


#contentboxfloat h1{
color: dimgray;
font-weight: 300;
font-size: 190%;
margin-top: 4%;
margin-bottom: 4%;	
text-align: center;	
}


#contentboxfloat h2{
color: darkslategray;
font-weight: 300;
font-size: 160%;
margin-top: 3%;
margin-bottom: 3%;	
text-align: center;	
}


#contentboxfloat h3{
color: dimgray;
border-bottom: 2px solid silver;
font-weight: 400;
font-size: 140%;
margin-top: 3%;
margin-bottom: 3%;		
text-align: left;
text-transform: uppercase;
}


#contentboxfloat p{
font-size: 110%;
line-height: 150%;
font-family: calibril;
font-weight: 200;
text-align: left;
margin-top: 3%;
margin-bottom: 4%;	
color: rgb(21,21,21);	
	
}


#contentboxfloat img{
width: 100%; 
height: auto;
	
	
}


#contentholdnew{
width: 100%;
display: inline-block;	
vertical-align: top;
text-align: center;
	
}

#contentholdnew img{
	
width: 50%;
display: inline-block;
vertical-align: top;

	
}


#contentholdc{
width: 60%;
margin-left: 2%;
margin-right: 2%;
float: left;
text-align: center;
}

#contentholdf{
width: 40%;
margin-left: 2%;
margin-right: 8%;
float: left;
text-align: center;
}




.titleb{
font-family: arial;
font-weight: bold;
font-size: 11pt;
color: gold;
text-shadow: 1px 1px 1px #000;
width: 150px;
padding: 3px;
border: 1px;
text-align: center;
border-radius: 5px;
background: crimson;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

.colorhead{
color: dodgerblue;
font-family: calibril;
font-size: 120%;
border: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
font-weight: 200;
}

.colorhead1{
color: darkseagreen;
font-family: calibril;
font-size: 120%;
border: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
font-weight: 200;
}

.colorhead2{
color: tomato;
font-family: calibril;
font-size: 120%;
border: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
font-weight: 200;
}

.colorhead3{
color: darkorange;
font-family: calibril;
font-size: 120%;
border: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
font-weight: 200;
}



#headj{
background: white;
padding:0%;
margin-left: 17%;
width: 66%;
float: left;
font-family: arial;
colour: rgba(0,0,0, 0.5);
}

#center{
margin-left: 47%;

}

.floatr{
float: right;
margin-left: 1%;
}

.floatl{
float: left;
margin-right: 1.5%;
margin-top: 2%;
}

.justified{
font-size: 110%;
line-height: 150%;
font-family: calibril;
font-weight: 200;
text-align: left;


}


.justified2{
font-size: 140%;
line-height: 150%;
font-family: calibril;
text-align: left;
}

@media (max-width: 750px) and (min-width: 400px){



#contentboxfloat{
width: 80%;
}


#contentboxfloat h1{
font-size: 135%;
	
}

#contentboxfloat h3{
font-size: 120%;
	
}

#contentboxfloat p{
font-size: 100%;
	
}

#sidebarcolourguide{
	
width: 60%;	
	
}


}



@media (max-width: 399px){



#contentboxfloat{
width: 90%;
}


#sidebarcolourguide{
	
width: 80%;	
	
}

#contentboxfloat h1{
font-size: 125%;
	
}

#contentboxfloat h3{
font-size: 110%;
	
}

#contentboxfloat p{
font-size: 100%;
	
}


}

@media (max-width: 950px) and (min-width: 450px) {

.producttext{
font-size: 180%;
}


}


@media (max-width: 449px){

.producttext{
font-size: 150%;
line-height: 30px;
}


}


@media (max-width: 950px) {
	
#productback{
margin-top: 0%;
background-image: url(productback2sc.png);
background-attachment: scroll;
}	

	
}

@media (max-width: 570px) {
	
#contentholdnew img{
	
width: 70%;

	
}	
	
}


@media (max-width: 600px) and (min-width: 300px) {
#headj{
background: white;
padding:0%;
width: 88%;
margin-left: 6%;
float: left;
font-family: arial;
colour: rgba(0,0,0, 0.5);
}


#contentholdc{
width: 90%;
margin-left: 5%;
margin-right: 5%;
float: left;
text-align: center;

}


}

@media (max-width: 299px) {
#headj{
background: white;
padding:0%;
width: 92%;
margin-left: 4%;
margin-right: 4%;
float: left;
font-family: arial;
colour: rgba(0,0,0, 0.5);
}


#contentholdc{
width: 90%;
margin-left: 5%;
margin-right: 5%;
float: left;
text-align: center;

}



}

@media (max-width: 1024px) and (min-width: 990px) and (orientation: Landscape) { 

.info4{
margin-top: 0.5%;
width: 35%;
float: left;
margin-left: 3%;
display: block;
}


}	


@media (max-width: 989px) and (min-width: 940px) and (orientation: Landscape) { 

.info4{
margin-top: 0.5%;
width: 30%;
float: left;
margin-left: 3%;
display: block;
}

#blocks{

background: white;
margin-left: 3%;
margin-right: 3%;
margin-top: 5%;
width: 300px;
height: 430px;
float: left;
font-family: arial;
font-size: 120%;
colour: rgba(0,0,0, 0.5);
text-align: center;	
}


}	

	

	
	
@media (max-width: 299px) and (orientation: Portrait) { 



	#blocks{

background: white;
margin-left: 0%;
margin-top: 5%;
width: 200px;
height: 430px;
float: left;
font-family: arial;
font-size: 120%;
colour: rgba(0,0,0, 0.5);
text-align: center;	
}
	
	}