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

}



body{
overflow-x:hidden !important;		
}



#simplenav{
width: 100%;
height: 50px;
display: inline-block;
vertical-align: top;
background: rgb(21,21,21);

	
	
	
}


#logohold{
width: 100%;
height: auto;
position: absolute;
z-index: 2;
text-align: center;
	
	
}


.logo{
	
display: inline-block;
vertical-align: top;
width: auto;
height: auto;	
position: relative; 

	
}



.menuthis{
width: auto;
float: left;
height: auto;
margin-left: 2%;
margin-top: 8px;	
z-index: 10;	
position: relative;		
cursor: pointer;	
}


#hidecurrentlink{
	
display: none;	
text-transform: none !important;	
}

.menuthisopen{
position: fixed;
z-index: 12;
height: 100%;
width: 25%;
background: rgba(21,21,21,0.9);
color: gainsboro;
text-transform: uppercase;	
padding-top: 44px;
display: none;
font-family: calibri;
}


.menuthisopen p{
width: 96%;
padding-left: 2%;
padding-right: 2%;
padding-top: 14px;
padding-bottom: 14px;
border-bottom: 1px dotted gray;
font-weight: 300;
font-size: 85%;	
margin-top: 0%;	
margin-bottom: 0%;
cursor: pointer;
}



.menuthisopen a{
width: 96%;
padding-left: 2%;
padding-right: 2%;
padding-top: 14px;
padding-bottom: 14px;
border-bottom: 1px dotted gray;
font-weight: 300;
font-size: 85%;	
margin-top: 0%;	
margin-bottom: 0%;
}

.menuthisopen p:hover, .menuthisopen a:hover{
background: firebrick;
border-bottom: 1px solid firebrick;
color: white;	
	
	
}

.menuthisclose{
position: absolute; 
top: 3px;
right: 5px;
font-size: 17px; 	
color: white;
font-family: calibri;
text-transform: uppercase;	
font-weight: 300;
cursor: pointer;	
}


.menuthisactive{
background: firebrick;
border-bottom: 1px solid firebrick;
color: white;	
	
}




.callus{
width: auto;
float: right;
height: auto;
margin-right: 2%;
margin-top: 10px;	
z-index: 10;	
position: relative;	
	
}










.full_wrapper{
	
width: 100%;
position: relative;
float: left;
	
}

.canvas_wrapper{	
width: 94%;
float: left;
text-align: center;
position: relative;	
padding: 3%;
padding-top: 3%;
padding-bottom: 100px;
}

.canvas_wrapper_div_hold{
	width: auto;
	display: inline-block;
	padding: 30px;
	border: 2px solid gainsboro;
	
}

.canvas_wrapper_div{

width: 1100px;
height: 700px;
display: inline-block;
vertical-align: top;
position: relative;
overflow: hidden;

}


.canvas_wrapper_div img{
width: 100%;
height: auto;
display: inline-block;
	
}


.canvas_wrapper_div  > canvas{
position: absolute;
border: 1px solid silver;	
left: 0;
top: 0;
background: transparent;
cursor: crosshair;
}


#other_canvas{
	
z-index: 1;
background: transparent;	
opacity: 1;
}


#image_tut{
background: transparent;	
z-index: 3;
opacity: 1;	
}


#select_polygon_eraser{
	
display: none; 	
	
}

.canvas_wrapper h1{
font-size: 170%;
margin-top: 0;
color: rgb(55,55,55);	
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
font-family: arial;	
	
}

.canvas_wrapper h2{
font-size: 150%;
margin-top: 3%;
color: rgb(55,55,55);	
font-weight: 400;
text-transform: uppercase;
font-family: calibri;	
	
}




#image_show{
width: 100%;
float: left;
position: relative;
text-align: center;	
	
	
}



#image_show img{
display: inline-block;
vertical-align: top;
width: 20%;
height: auto;	
	
}


.radio-hide{
	
display: none;	
	
}



.colourpicker_toolbar{
width: 98%;
position: fixed; 
left: 0;
bottom: 0;
background: gainsboro;	
padding: 1%;	
font-family: calibri;
color: white;	
background: rgb(40,40,40);
text-align: center;	
z-index: 9999;
}

.colourpicker_hold_all{
width: auto;
display: inline-block;
vertical-align: top;	
	
	
}



.colourpicker_toolbar select{
width: auto;
padding: 2px;
padding-top: 6px;
padding-bottom: 6px;
font-size: 12px;
border-radius: 3px;
color: rgb(55,55,55);
background: gainsboro;	
margin-top: 3px;
}



.colourpicker_specialimg, .colour_selection_option{
width: 27px;
height: auto;
display: inline-block;
vertical-align: middle;
margin-left: 4px;
margin-right: 3px;	
position: relative;	
}

.colourpicker_specialimg img, .colour_selection_option img{
width: 100%;
height: auto;	
	
}




.app-functional-buttons, .app-functional-buttons-erase, .app-functional-buttons-paint{
width: 44px;
padding: 8px;
display: inline-block;
vertical-align: middle;
background: #a4adad;	
color: rgb(55,55,55);	
font-family: calibri;
font-weight: 300;
border: 0;
outline: none;	
text-align: center;
margin-left: 3px;
margin-right: 3px;
border-radius: 3px;
  -webkit-transition: background-color 1.2s ease-out;
  -moz-transition: background-color 1.2s ease-out;
  -o-transition: background-color 1.2s ease-out;
  transition: background-color 1.2s ease-out;
  cursor: pointer;
  position: relative;
}



.app-functional-color-selected{
width: 26px;
height: 26px;	
display: inline-block;
vertical-align: middle;
background: #1b919d;
margin-left: 3px;
margin-right: 3px;	
position: relative;
margin-top: 3px;
}

.app-functional-buttons img, .app-functional-buttons-erase img, .app-functional-buttons-paint img{
width: 100%;
height: auto;	
display: inline-block;
vertical-align: top;
	
}



.app-functional-buttons:hover{
background: firebrick;
color: white;	
  -webkit-transition: background-color 1.2s ease-out;
  -moz-transition: background-color 1.2s ease-out;
  -o-transition: background-color 1.2s ease-out;
  transition: background-color 1.2s ease-out;
}


.center_colour_picker_div{
width: 100%; 
text-align: center;	
float: left;	
margin-top: 10px;
margin-bottom: 10px;	
}

.colour-pick-chart-each{
width: auto;
display: inline-block;
vertical-align: top; 
padding: 8px;
background: #c6c1c1;
color: white;	
font-weight: 400;	
margin-top: 5px; 
margin-bottom: 5px;
margin-left: 3px; 
margin-right: 3px;	
text-transform: uppercase;
cursor: pointer;
font-weight: 600;
  -webkit-transition: background-color 1.2s ease-out;
  -moz-transition: background-color 1.2s ease-out;
  -o-transition: background-color 1.2s ease-out;
  transition: background-color 1.2s ease-out;	
	
}


.colour-pick-chart-each:hover{

background: firebrick;	

  -webkit-transition: background-color 1.2s ease-out;
  -moz-transition: background-color 1.2s ease-out;
  -o-transition: background-color 1.2s ease-out;
  transition: background-color 1.2s ease-out;	
}


#standard-chart-open{
	
background: firebrick;		
font-weight: bold;	
}


#standard-chart-colours, #accent-chart-colours, #greens-chart-colours, #blues-chart-colours, #yellows-chart-colours{
	
display: none;
vertical-align: top;
width: 100%;	
	
}

#standard-chart-colours{
	
display: inline-block;
	
}



.colourpicker-hover-options{
	
display: none;
position: absolute;
left: 5px;
top: -24px;
width: auto;
padding: 6px;
color: white;
background: rgba(65,65,65,0.9);
	
	
}


.app-functional-buttons:hover .colourpicker-hover-options, .colourpicker_specialimg:hover .colourpicker-hover-options, .colour_selection_option:hover .colourpicker-hover-options, .app-functional-buttons-erase:hover .colourpicker-hover-options, .app-functional-buttons-paint:hover .colourpicker-hover-options, .app-functional-color-selected:hover .colourpicker-hover-options{
display: block;	
	
}



.image_upload_section, .instructions_section, .colour_select_section{
display: none;
width: 100%;
position: fixed;
height: 100%;
z-index: 99;
background: rgb(255,255,255);	
top: 0;
left: 0;	
text-align: center;
font-family: calibri;
color: rgb(45,45,45);
overflow-y: scroll;
}


.colour_select_section{
background: white;

}



.instructions_section img{
width: 70%;
display: inline-block;
vertical-align: top;
height: auto; 
margin-top: 2%;
margin-top: 2%;	
}


.instructions_section a{
color: firebrick;
text-decoration: none;
	
}

.instructions_section a:hover{
text-decoration: underline;
	
}


.instructions_section_close{
width: auto;
position: absolute;
color: firebrick;
padding: 8px;
border: 1px solid firebrick;
font-family: calibri;
font-size: 16px;	
font-weight: 600;
top: 3%;
right: 3%;		
cursor: pointer;
}


.instructions_section_close:hover{
background: firebrick;
color: white;	
}


.image_upload_section h2, .instructions_section h2, .colour_select_section h2{
	width: 100%;
	font-family: calibri;
	font-weight: 400;
	font-size: 150%; 
box-sizing: border-box;
padding-left: 5%;
padding-right: 5%;
}


.colour_select_section h1{
font-size: 140%;
margin-top: 3%;
margin-bottom: 1%;
}

.image_upload_section p, .instructions_section p, .colour_select_section p{
font-weight: 300;
line-height: 30px;	
width: 100%;
box-sizing: border-box;
padding: 20%;
padding-top: 0;
padding-bottom: 2%;
text-align: left;
}

.styling-uploader-border{
display: inline-block;
vertical-align: top;
width: auto;
border: 1px solid gainsboro;
padding: 20px;	
width:45%;	
}

.styling-uploader{
	
width: 100%;
height: 450px;
display: inline-block;
vertical-align: top;	
overflow-y: hidden;	
position: relative;
}


.styling-uploader img{
width: 100%; 
height: 100%;
position: absolute;
background-attachment: scroll;
  background-repeat: no-repeat;
    background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;		
top: 0;
left: 0;
}


.upload-overlay{
width: 100%; 
height: 100%;
position: absolute;
background-attachment: scroll;
  background-repeat: no-repeat;
    background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
 z-index: 1;
top: 0; 
left: 0;

	
}


.style_button_upload{
width: auto;
padding: 8px;
padding-top: 12px;
padding-bottom: 12px;
border-radius: 3px;
font-weight: 400;
font-family: calibri;	
background: #2a2727;
display: inline-block; 
vertical-align: top;	
text-transform: uppercase;
color: white;
font-size: 16px;
letter-spacing: 1px;
margin-top: 12px;	
border: 0;
cursor: pointer;	
margin-left: 8px; 
margin-right: 8px;
  -webkit-transition: background-color 1.2s ease-out;
  -moz-transition: background-color 1.2s ease-out;
  -o-transition: background-color 1.2s ease-out;
  transition: background-color 1.2s ease-out;	
}

.style_button_upload:hover{
	
background: firebrick;	
  -webkit-transition: background-color 1.2s ease-out;
  -moz-transition: background-color 1.2s ease-out;
  -o-transition: background-color 1.2s ease-out;
  transition: background-color 1.2s ease-out;
}



.inputfile{
	
display: none;	
	
}


.colour-select-separator{
width: 100%;
display: inline-block;	
	
	
}

.colour-each-select-hold{
width: 80%;
display: inline-block;
vertical-align: top;
margin-top: 1%;
margin-bottom: 1%;	
text-align: left;
margin-left: 6%;	
}


.colour-each-select{
	
width: 9%; 
padding-bottom: 7%; 
display: inline-block; 	
vertical-align: middle;
background: beige;	
margin-left: 1px;
margin-right: 1px;
margin-top: 5px; 
margin-bottom: 5px;
position: relative;
}



.show-colour-details{
width: auto;
position: absolute;
color: white;
background: rgba(0,0,0,0.8);	
display: inline-block;
vertical-align: top;
padding: 8px;	
display: none;
top: -6px;
left: 3px;	
border-radius: 3px;
z-index: 5;
}

.colour-each-select:hover{
	
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:  inset 0 0 10px #000000;
}



.colour-each-select:hover .show-colour-details{
	display: block;
}



.colour-each-select input{
display: none;	
}

.colour-each-select-output, .colour-close-color-select{
margin-top: 4%;	
width: auto;
display: inline-block;
vertical-align: top;
padding: 11px;
color: firebrick;
border: 3px dashed firebrick;
font-weight: 500;
font-size: 118%;	
letter-spacing: 1px;
border-radius: 3px;	
margin-left: 3px;
margin-right: 3px;
}



.colour-close-color-select{
cursor: pointer;
background: rgb(55,55,55);	
color: white;
border: 3px solid rgb(55,55,55);	
  -webkit-transition: background-color 1.2s ease-out;
  -moz-transition: background-color 1.2s ease-out;
  -o-transition: background-color 1.2s ease-out;
  transition: background-color 1.2s ease-out;
}


.colour-close-color-select:hover{
	
border: 3px solid firebrick;
background: firebrick;	
  -webkit-transition: background-color 1.2s ease-out;
  -moz-transition: background-color 1.2s ease-out;
  -o-transition: background-color 1.2s ease-out;
  transition: background-color 1.2s ease-out;	
}


.colour_videohold{
margin-top: 2%;
margin-bottom: 0%;
width: 100%;
margin-left: 0%;
display: inline-block;	
text-align: center;	
	
}

.colour_videocontain{
	
width: 70%;
display: inline-block;	
position: relative;	
	
}


 .videoWrapper {
	position: relative;
	padding-bottom: 62%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 1%;
	width: 98%;
	height: 94%;
} 





@media(max-width: 1300px){
	
.styling-uploader-border{

width:55%;	
}

.styling-uploader{
	

height: 450px;
	
}


	
}



@media(max-width: 1200px){
	
	.canvas_wrapper_div{

width: 980px;
height: 580px;

	}
	
.canvas_wrapper_div_hold{

	padding: 10px;

	
}	
	
	
	
	
}



@media(max-width: 1050px){
	
	.canvas_wrapper_div{

width: 800px;
height: 500px;

	}
	
	
.styling-uploader-border{

width:75%;	
}

.styling-uploader{
	

height: 450px;
	
}
	
	
}



@media(max-width: 880px){
	
	.canvas_wrapper_div{

width: 640px;
height: 440px;

	}
	
	
	
.colour-each-select-hold{
width: 90%;

margin-left: 5%;	
}


.colour-each-select{
	
width: 11%; 
padding-bottom: 9%; 	
	
}
	
}



@media (max-width: 730px){
	
	
.styling-uploader-border{

width:85%;	
}

.styling-uploader{
	

height: 400px;
	
}	
	
	
}



@media(max-width: 710px){
	
	.canvas_wrapper_div{

width: 550px;
height: 330px;

	}
	
	
	
	
	
.colourpicker_toolbar select{

font-size: 11px;	
}



.colourpicker_specialimg, .colour_selection_option{
width: 22px;
height: auto;
display: inline-block;
vertical-align: middle;
margin-left: 4px;
margin-right: 3px;	
position: relative;	
margin-top: 4px;
}






.app-functional-buttons{
width: 30px;
padding: 5px;

}


.image_upload_section h2 {

    font-size: 130%;
}



.instructions_section img{
width: 80%;
}	



.colour-each-select-output, .colour-close-color-select, .colour-pick-chart-each{
font-size: 100%;	
font-size: 12px;	
	
}


.colour_videocontain{
	
width: 95%;
	
}
	
}




@media(max-width: 625px){
	
	.canvas_wrapper_div{

width: 450px;
height: 260px;

	}	
	
	
}

@media(max-width: 600px){
	
.styling-uploader-border{

width:86%;	
}

.styling-uploader{
	

height: 340px;
	
}	


.image_upload_section p, .instructions_section p, .colour_select_section p{
font-weight: 300;
line-height: 30px;	
width: 100%;
box-sizing: border-box;
padding: 10%;
padding-top: 0;
padding-bottom: 2%;
text-align: left;
}

	
.canvas_wrapper h2{
	
font-size: 130%;	
}	






}




@media(max-width: 560px){
	

	
	
.styling-uploader{
	

height: 280px;
	
}	


.style_button_upload{
	
font-size: 13px;
padding-top: 9px;
padding-bottom: 9px;	
	
	
}

.colour-each-select-hold{

margin-left: 3%;	
}


.colour-each-select{
	
width: 15%; 
padding-bottom: 13%; 	
}
		
	
	
}


@media(max-width: 500px){
	

	
	.canvas_wrapper_div{

width: 345px;
height: 210px;

	}
	
	
.styling-uploader{
	

height: 210px;
	
}		


.instructions_section img{
width: 90%;
}

.show-colour-details{
font-size: 11px;
}	
	
}


@media(max-width: 450px){
	
.colour-each-select-hold{

margin-left: 3%;	
}


.colour-each-select{
	
width: 18%; 
padding-bottom: 16%; 	
}	
	
	
.app-functional-color-selected {
    width: 19px;
    height: 19px;	
	
}


@media(max-width: 380px){
	
	.canvas_wrapper_div{

width: 290px;
height: 170px;

	}
	
.canvas_wrapper h2{
	
font-size: 130%;	
}	


.instructions_section img{
width: 100%;
}

	
	
}



@media(max-width: 350px){
	
.styling-uploader{
	

height: 170px;
	
}		
	
	
	
}




@media(max-width: 340px){
	
	.canvas_wrapper_div{

width: 240px;
height: 140px;

	}
	
}