html{
        position: fixed;
      height: 100%;
  width: 100%;
  overflow: hidden;
    margin:0;
padding:0;
}

.hint{
    font-size: 5vw;
    text-align: center;
}

#drag{
    position: relative;
    top: 138vw;
}

#hold{
    position: relative;
    top: 138vw;
}

body{
    position: fixed;
    background-color: #373737;
    font-family: 'Roboto', sans-serif;
    font-size: 10vw;
    color: white;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    @import url('https://fonts.googleapis.com/css?family=Roboto:100');

}
.title{
    position: absolute;
    top: 115vw;
    left: 34vw;
}
#home{
    position: absolute;
    top: 158vw;
    left: 80vw;
    background: linear-gradient(#fd5a80 25%, #b5cc72 25%,#b5cc72 50%, #a8caff 50%,#a8caff 75%, #707070 75%, #707070 100%);
/*    background-color: none;*/
    border-style: solid;
    border-color: whitesmoke;
    border-radius: 10vw;
    border-width: .5vw;
    height: 15vw;
    width: 15vw;
}
#cover{
    height: 100%;
    width: 100%;
    background-color: #707070;
    position: absolute;
    top: 0;
    left: 0;
}
.label{
    margin-top: 16vw;
    margin-left: 5vw;
    position: absolute;
    left: 100vw;
}
.icon{
    width: 100%;
}
ul {
    background-color: #373737;

	list-style:none;
    margin: 0 auto;
	padding: auto;
	text-align: center;
    display: flex;
    align-items: center;
    margin:  auto;
    padding: 0vw 1vw 0vw 1vw;
    cursor: pointer;
   
}
li{
	height: 11vw;
	width: 11vw;
	border-radius: 0;
	cursor: pointer;
    display: inline-block;
    border: 0;
	margin: 2vw 1vw 2vw 1vw;
}
/*--------------LOGO MAINSCREEN MENU------------*/
.grayDark {
    background-color: #373737;
    width: 100vw;
    height: 200vw;
    position: absolute;
    top: 0vw;
    left: 0vw;
}
.grayLight {
    background-color: #707070;
    width: 100vw;
    height: 200vw;
    position: absolute;
    top: 0vw;
    left: 0vw;
}
.pinkDark{
    background-color: #fa295a;
    position: absolute;
    top: 45vw;
    left: 50vw;
    height: 30vw;
    width: 15vw;
    border-radius: 0vw 30vw 30vw 0vw;
}
.pinkLight{
    background-color: #fd5a80;
    position: absolute;
    top: 45vw;
    left: 35vw;
    height: 30vw;
    width: 15vw;
    border-radius: 30vw 0vw 0vw 30vw;    
}
.blueDark{
    background-color: #3b69b2;
    position: absolute;
    top: 60vw;
    left: 40vw;
    height: 30vw;
    width: 15vw;
    border-radius: 0vw 30vw 30vw 0vw;  
}
.blueLight{
    background-color: #a8caff;
    position: absolute;
    top: 60vw;
    left: 25vw;
    height: 30vw;
    width: 15vw;
    border-radius: 30vw 0vw 0vw 30vw;   
}
.greenDark{
    background-color: #99b250;
    position: absolute;
    top: 60vw;
    left: 60vw;
    height: 30vw;
    width: 15vw;
    border-radius: 0vw 30vw 30vw 0vw;    
}
.greenLight{
    background-color: #b5cc72;
    position: absolute;
    top: 60vw;
    left: 45vw;
    height: 30vw;
    width: 15vw;
    border-radius: 30vw 0vw 0vw 30vw;   
}
.colorName{
    position: absolute;
    top: 30vw;
    width: 100%;
    text-align: center;
    margin-left: auto;
}
.colors{
    position: absolute;
    top: 120vw;
}

/*--------------COLORS-------------------*/
.pink{
    background-color: rgb(250, 41, 90);
}
.red{
    background-color: rgb(249,61,61);
}
.orange{
    background-color: rgb(247,106,0);
}
.yellow{
    background-color: rgb(255,234,82);
}
.green{
    background-color: rgb(153,178,80);
}
.blue{
    background-color: rgb(59,105,178);
}
.purple{
    background-color: rgb(101,72,204);
}
.black{
    background-color:rgb(55,55,55);
}
.white{
        background-color: rgb(255,255,255);
}

/*------------------SCREENS--------------*/
#create{
    
    background-color: #fd5a80;
    position:absolute;
    top: 0vw;
    margin: 0;
    padding: auto;
    width: 44.5vw;
    height:44.5vw;
    text-align: center;
    -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
}
#learn{
    background-color: #b5cc72;
    position:absolute;
    top: 44.5vw;
/*    top: 0vw;*/
    margin: 0;
    padding: auto;
/*
    width: 100.5vw;
    height:200vw;
*/
    width: 44.5vw;
    height:44.5vw;
    text-align: center;
    -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
}
#discover{
    background-color: #a8caff;
    position:absolute;
    top: 89vw;
    margin: 0;
    padding-left: auto;
    width: 44.5vw;
    height:44.5vw;
    text-align: center;
    -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
}
#mix{
    background-color: #707070;
    position:absolute;
    top: 133.5vw;
    margin: 0;
    padding: auto;
    width: 44.5vw;
    height:44.5vw;
    text-align: center;
    -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
}

/*--------------CREATE-------------------*/
.createColorsContainer{
    position: absolute;
    top: 115vw;
    overflow: hidden;
}
#sketch{padding: 0vw;
        -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#createpad{
    padding: 0vw;
    position:relative;}

.selectColor{
    position:absolute;
    top: 131vw;
}
.selected{
    border: .5vw solid white; 
/*    background-color: #fa295a;*/
}
#selectContainer {
	background: #373737;
	border-radius: 2vw;
	clear: both;
	margin: 10vw auto 0;
	padding: 5vw;
	width: 65vw;
    height: 76vw;
	position: absolute;
    top: 35vw;
    left: 12.5vw;	
}
#selectContainer:after {
	bottom: -10%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #373737;
	border-width: 5vw;
	margin-left: -4vw;
}
canvas {
	background: #fff;
	display: block;
	margin: 7vw auto 1vw;
	border-radius: 0vw;
    width: 85vw;
    height: 100vw;
	cursor: url(../img/icon-17.png), crosshair;
}
#newColor {
	width: 20vw;
	height: 20vw;
	border-radius: 0vw;
	float: left;
	border: none;
	margin: 2vw;
    margin-right: -21vw;
}
.selectColor{
    background-color: none;
    border: .5vw solid ;
    color: white;
    margin-top: 5vw;
    margin-left: 30vw;
    width: 40vw;
    height: 13vw;
        
}
/*----COLOR SLIDERS-----*/
.sliders p {
	margin: 0 0;
	vertical-align: middle;
}
.sliders label {
	display: inline-block;
	margin-top: 2vw;
	font-size: 5vw;
    position: absolute;
    left: 32vw;
}
.sliders input {
	position: relative;
	top: 2vw;
    width: 32vw;
    height: 1vw;
}
#addNewColor{
    font-size: 5vw;
	border: .5vw solid white;
	clear: both;
	margin-top: 5vw;
	padding: 2vw 3vw;
	width: 55vw;
}
input[type=range] {
  -webkit-appearance: none;
  width: 36vw;
  margin-top: 9vw;
margin-bottom: 7vw;
    margin-left: 24vw;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 10vw;
  height: 1vw;
  cursor: pointer;
  background: #ffffff;
  border-radius: 2vw;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 7vw;
  width: 7vw;
  border-radius: 1vw;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3vw;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #e48ba7;
    width: 20vw;
}
input[type=range]::-moz-range-track {
  width: 10vw;
  height: 1vw;
  cursor: pointer;
  background: #ffffff;
  border-radius: 2vw;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 7vw;
  width: 7vw;
  border-radius: 1vw;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3vw;
}

/*--------------LEARN-------------------*/
#shapesContainer{
    position:absolute;
    top:16vw;
    left: 0vw;
    height: 50vw;
    width: 100.5vw;
    padding: 20vw;

}
.learnText{
    background-color: #b5cc72;
    border: .5vw solid ;
    position: absolute;
    top: 120vw;
    color: white;
    margin-top: 5vw;
    margin-left: 25vw;
    width: 50vw;
    height: 13vw; 
}
/*------SHAPES---------*/
#square {
	width: 50vw;
	height: 50vw;
	background-color: #99b250;
    position:absolute;
    left: 27vw; 
    top: 20vw;
}
#rectangle {
	width: 75vw;
	height: 40vw;
	background-color: #99b250;
    position:absolute;
    left: 13vw;
    top: 25vw;   
}
#circle {
	width: 50vw;
	height: 50vw;
    border-radius: 25vw; 
	background-color: #99b250;
    position:absolute;
    left: 27vw; 
    top: 20vw;
}
#oval {
	width: 80vw;
	height: 40vw;
    border-radius: 80vw / 40vw;
	background-color: #99b250;
    position:absolute;
    left: 11vw;
    top: 25vw;   
}
#triangle {
	width: 0vw;
	height: 0vw;
    border-left: 25vw solid transparent;
    border-right: 25vw solid transparent;
    border-bottom: 50vw solid #99b250;
    position:absolute;
    left: 27vw; 
    top: 20vw;
}
#diamond {
	width: 0vw;
	height: 0vw;
    border: 30vw solid transparent;
    border-bottom-color:#99b250;
    position:absolute;
    left: 23vw; 
    top: -10vw;
}
#diamond:after {
    content: '';
	width: 0vw;
	height: 0vw;
    border: 30vw solid transparent;
    border-top-color:#99b250;
    position:absolute;
    left: -30vw; 
    top: 30vw;
}
#cross {
	width: 10vw;
	height: 50vw;
    background-color:#99b250;
    position:absolute;
    left: 46vw; 
    top: 23vw;
}
#cross:after {
    content:"";
	width: 50vw;
	height: 10vw;
    background-color:#99b250;
    position:absolute;
    left: -20vw; 
    top: 18vw;
}
#octagon {
	width: 50vw;
	height: 50vw;
    background-color:#99b250;
    position:absolute;
    left: 26vw; 
    top: 20vw;
}
#octagon:before {
    content:"";
    border-bottom: 15vw solid #99b250;
	border-left: 15vw solid #b5cc72;
	border-right: 15vw solid #b5cc72;
    width: 20.5vw;
    height: 0vw;
    position:absolute;
    left: 0vw; 
    top: 0vw;
}
#octagon:after {
    content:"";
    border-top: 15vw solid #99b250;
	border-left: 15vw solid #b5cc72;
	border-right: 15vw solid #b5cc72;
    width: 20.5vw;
    height: 0vw;
    position:absolute;
    left: 0vw; 
    top: 35vw;
}
#pentagon {
	width: 39vw;
    border-width: 25vw 5vw 0;
    border-style: solid;
    border-color: #99b250 transparent;
    position:absolute;
    left: 26vw; 
    top: 39vw;
}
#pentagon:before {
    content:"";
       width: 0;
    height: 0;
    border-width: 0vw 24.5vw 20vw;
    border-style: solid;
    border-color: transparent transparent #99b250;
 
    position:absolute;
    left: -5vw; 
    top: -45vw;
}
#heart {
    position: absolute;
    width: 50vw;
    height: 45vw;
    top: 22vw;
    left: 27vw;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 25vw;
    top: 0;
    width: 25vw;
    height: 45vw;
    background: #99b250;
    -moz-border-radius: 25vw 25vw 0 0;
    border-radius: 25vw 25vw 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}
#star {
   margin: 25vw 0;
   position: absolute;
    top: 17vw;
    left: 17vw;
/*   display: block;*/
   color:  #99b250;
   width: 0vw;
   height: 0vw;
   border-right:  40vw solid transparent;
   border-bottom: 25vw  solid  #99b250;
   border-left:   35vw solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);

}
#star:before {
   border-bottom: 35vw solid  #99b250;
   border-left: 12vw solid transparent;
   border-right: 12vw solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -21vw;
   left: -26vw;
/*   display: block;*/
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
}
#star:after {
   position: absolute;
/*   display: block;*/
   color: red;
   top: 3vw;
   left: -42vw;
   width: -42vw;
   height: 0vw;
   border-right: 37vw solid transparent;
   border-bottom: 25vw solid  #99b250;
   border-left: 38vw solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   content: '';
}

/*------------------MIX-------------------*/
#colorWheel{
    position: absolute;
    top: 19vw;
    left: 19vw;
    background-color: rgb(112,112,112);
    width: 62vw;
    height: 62vw;
    border-radius: 42vw;
/*    box-shadow: .5vw 0vw black;*/
    border: .none;
    transform: rotate(0deg);
}
#wheelTop{
    position: absolute;
    top: 0vw;
    left: 0vw;
    background-color: rgb(112,112,112);
    width: 62vw;
    height: 31vw;
    border-radius: 31vw 31vw 0vw 0vw;
/*    box-shadow: .5vw 0vw black;*/
    border: .5vw solid white;
    border-bottom: none;
}
#wheelBottom{
    position: absolute;
    top: 31vw;
    left: 0vw;
    background-color: rgb(112,112,112);
    width: 62vw;
    height: 31vw;
    border-radius: 0vw 0vw 31vw 31vw;
/*    box-shadow: .5vw 0vw black;*/
    border: .5vw solid white;
    border-top: none;
}


#wheelText{
    position: absolute;
    top: 35vw;
    width: 100%;
}

#palette{
    position: absolute;
    display: inline-block;
    top: 120vw;
    left: 12vw;
    padding: 0vw;
    padding-left: 1vw;
    padding-top: 0vw;
    padding-bottom: 0vw;
    width: 75%;
    height: 17vw;
    border: .5vw solid white;
    background: #707070;
}



.colorMix{
    width: 13vw;
    height: 13vw;
/*    margin: 1vw;*/
/*    margin-left:1vw;*/
    display: inline-block;
}

#pinkMix{
    background-color: rgb(250, 41, 90);
}

#yellowMix{
    background-color: rgb(255,234,82);
}
#blueMix{
    background-color: rgb(59,105,178);
}
#whiteMix{background-color: rgb(255,255,255);}
#blackMix{background-color: rgb(55,55,55);}


/*--------------DISCOVER-------------------*/
.pinkHue{
    background-color: #fc94ad;
        -webkit-animation: pinkChange 2s linear infinite alternate;
        -moz-animation: pinkChange  2s linear infinite alternate;
    animation: pinkChange 2s linear infinite alternate;  
}
    @-webkit-keyframes pinkChange {
    0% {background-color:#fc94ad;}
    25% {background-color:#fb5f83;}
    50% {background-color:#f9295a;}
    75% {background-color:#d4234d;}
    100% {background-color:#ae1d3f;}
        }
    @-moz-keyframes pinkChange {
    0% {background-color:#fc94ad;}
    25% {background-color:#fb5f83;}
    50% {background-color:#f9295a;}
    75% {background-color:#d4234d;}
    100% {background-color:#ae1d3f;}
        }
@keyframes pinkChange {
    0% {background-color:#fc94ad;}
    25% {background-color:#fb5f83;}
    50% {background-color:#f9295a;}
    75% {background-color:#d4234d;}
    100% {background-color:#ae1d3f;}
} 

.redHue{
    background-color: #fc9e9e;
        -webkit-animation: redHue 2s linear infinite alternate;
        -moz-animation: redHue  2s linear infinite alternate;
    animation: redHue 2s linear infinite alternate;  
}
    @-webkit-keyframes redHue {
    0% {background-color:#fc9e9e;}
    25% {background-color:#fa6d6d;}
    50% {background-color:#f83c3c;}
    75% {background-color:#d33333;}
    100% {background-color:#ad2a2a;}
        }
    @-moz-keyframes redHue {
    0% {background-color:#fc9e9e;}
    25% {background-color:#fa6d6d;}
    50% {background-color:#f83c3c;}
    75% {background-color:#d33333;}
    100% {background-color:#ad2a2a;}
        }
@keyframes redHue {
    0% {background-color:#fc9e9e;}
    25% {background-color:#fa6d6d;}
    50% {background-color:#f83c3c;}
    75% {background-color:#d33333;}
    100% {background-color:#ad2a2a;}
} 

.orangeHue{
    background-color: #fbb580;
        -webkit-animation: orangeHue 2s linear infinite alternate;
        -moz-animation: orangeHue  2s linear infinite alternate;
    animation: orangeHue 2s linear infinite alternate;  
}
    @-webkit-keyframes orangeHue {
    0% {background-color:#fc9e9e;}
    25% {background-color:#fa6d6d;}
    50% {background-color:#f83c3c;}
    75% {background-color:#d33333;}
    100% {background-color:#ad2a2a;}
        }
    @-moz-keyframes orangeHue {
    0% {background-color:#fbb580;}
    25% {background-color:#f98f40;}
    50% {background-color:#f76a00;}
    75% {background-color:#d25a00;}
    100% {background-color:#ac4a00;}
        }
@keyframes orangeHue {
    0% {background-color:#fbb580;}
    25% {background-color:#f98f40;}
    50% {background-color:#f76a00;}
    75% {background-color:#d25a00;}
    100% {background-color:#ac4a00;}
} 

.yellowHue{
    background-color: #fff5a9;
        -webkit-animation: yellowHue 2s linear infinite alternate;
        -moz-animation: yellowHue  2s linear infinite alternate;
    animation: yellowHue 2s linear infinite alternate;  
}
    @-webkit-keyframes yellowHue {
    0% {background-color:#fff5a9;}
    25% {background-color:#ffef7d;}
    50% {background-color:#ffea52;}
    75% {background-color:#d9c746;}
    100% {background-color:#b2a339;}
        }
    @-moz-keyframes yellowHue {
    0% {background-color:#fff5a9;}
    25% {background-color:#ffef7d;}
    50% {background-color:#ffea52;}
    75% {background-color:#d9c746;}
    100% {background-color:#b2a339;}
        }
@keyframes yellowHue {
    0% {background-color:#fff5a9;}
    25% {background-color:#ffef7d;}
    50% {background-color:#ffea52;}
    75% {background-color:#d9c746;}
    100% {background-color:#b2a339;}
} 

.greenHue{
    background-color: #ccd8a8;
        -webkit-animation: greenHue 2s linear infinite alternate;
        -moz-animation: greenHue  2s linear infinite alternate;
    animation: greenHue 2s linear infinite alternate;  
}
    @-webkit-keyframes greenHue {
    0% {background-color:#ccd8a8;}
    25% {background-color:#b3c57c;}
    50% {background-color:#99b150;}
    75% {background-color:#829744;}
    100% {background-color:#6b7c38;}
        }
    @-moz-keyframes greenHue {
    0% {background-color:#ccd8a8;}
    25% {background-color:#b3c57c;}
    50% {background-color:#99b150;}
    75% {background-color:#829744;}
    100% {background-color:#6b7c38;}
        }
@keyframes greenHue {
    0% {background-color:#ccd8a8;}
    25% {background-color:#b3c57c;}
    50% {background-color:#99b150;}
    75% {background-color:#829744;}
    100% {background-color:#6b7c38;}
} 

.blueHue{
    background-color: #9db4d8;
        -webkit-animation: blueHue 2s linear infinite alternate;
        -moz-animation: blueHue  2s linear infinite alternate;
    animation: blueHue 2s linear infinite alternate;  
}
    @-webkit-keyframes blueHue {
    0% {background-color:#9db4d8;}
    25% {background-color:#6b8fc5;}
    50% {background-color:#3a69b1;}
    75% {background-color:#315997;}
    100% {background-color:#28497c;}
        }
    @-moz-keyframes blueHue {
    0% {background-color:#9db4d8;}
    25% {background-color:#6b8fc5;}
    50% {background-color:#3a69b1;}
    75% {background-color:#315997;}
    100% {background-color:#28497c;}
        }
@keyframes blueHue {
    0% {background-color:#9db4d8;}
    25% {background-color:#6b8fc5;}
    50% {background-color:#3a69b1;}
    75% {background-color:#315997;}
    100% {background-color:#28497c;}
}

.purpleHue{
    background-color: #b2a3e6;
        -webkit-animation: purpleHue 2s linear infinite alternate;
        -moz-animation: purpleHue  2s linear infinite alternate;
    animation: purpleHue 2s linear infinite alternate;  
}
    @-webkit-keyframes purpleHue {
    0% {background-color:#9db4d8;}
    25% {background-color:#6b8fc5;}
    50% {background-color:#3a69b1;}
    75% {background-color:#315997;}
    100% {background-color:#28497c;}
        }
    @-moz-keyframes purpleHue {
    0% {background-color:#9db4d8;}
    25% {background-color:#6b8fc5;}
    50% {background-color:#3a69b1;}
    75% {background-color:#315997;}
    100% {background-color:#28497c;}
        }
@keyframes purpleHue {
    0% {background-color:#b2a3e6;}
    25% {background-color:#8b75d9;}
    50% {background-color:#6447cc;}
    75% {background-color:#553cae;}
    100% {background-color:#46328e;}
}

#mixUL{
    padding:0vw;
}