@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    html{
    overflow-y:scroll !important;
 padding:0;
margin:0;} 
html, body, #wrapper{
    overflow-y:scroll !important;
}

#contactfooter{
bottom:0;
height:42px;
width:100%;
background-color:rgba(0,0,0,0.2);
position: relative;
margin-top: 1050%;	
height:11em;
text-align: justify;}
.linkblock a{
text-decoration:none;
font-size:20px;
padding-top:9px;
position:absolute;
text-align:center;
padding:10px;
border:solid 4px;
color:#fc880f;
width:70%;
margin: 8% 11%}
.linkdescription{
margin:  2em auto 4em;}
#section8 {
width: 100%;
display: inline-block;
height: 920px;  
background-color: #ed4694;
}
#hotcoldblock h2{
padding:.08em}

header p:first-child{
padding:0 1em}

} 
 

@media all and (max-width:60em){

#colorpickblock{
    display:none
    }
}

@media (max-width: 56.250em){
    
	#colorwheel{
		text-align: justify;
		padding-top: 250px;
		width: 100%;
	}
	
	#exempleblock{
		width: 100%;
		height: auto;
	}
	
	#section9{
		height: auto;
	}
	
	#exempleblock h2{
		padding-left: 0;
		text-align: center;
		width: 210px;
		margin: 0 auto;
		padding-top: 100px;
	}
	
	.exemple1{
		display: block;
		margin: 0 auto;
	}
	
	#finalblock{
		width: 100%;
	}
	
	#linkblock{
		width: 100%;
	}
	
	.linkblock{
		margin: 0 auto;
		margin-bottom: 30px;
		display: block;
	}
	
	.linkblock#kuler{
		padding-bottom: 0;
	}
	
	.linkdescription{
		width: 96%;
		margin:  0 auto;
	}
	
	p{
		width: 90% !important;
		margin: 0 auto !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
	
	#section6 h4{
		width: 90% !important;
		margin: 0 auto !important;
	}
	
	#block3 p{
		text-align: center;
		display: block;
	}
	
	.textstyle1 h2{
		text-align: center;
	}
	
	.distro-bar{
		width: 75%;
		margin: 0 auto;
		border: 1px solid white;
		height: 60px;
		display: block;
	}
	
	#secondary{
		display: none !important;
	}
	
	#secondary-alternate{
		display: block;
	}
	
	.textstyle1{
		width: 98%;
		margin: 0 auto;
		z-index: 2;
	}
	
	.textstyle1 p{
		padding: 0px;
	}
	
	.section#block2 {
		height: 640px;
		padding-bottom: 80px;
	}
	
	.separator1#bottom{
		top:1056px;
	}
	
	#wheel{
		position: absolute;
		top: 380px;
		left: 50%;
		margin-left: -120px;
	}
	
	#colorblock{
		width: 100%;
		height: auto;
	}
	
	#harmonyblock p{
		text-align: left;
	}
	
	#hotcoldblock p{
		text-align: left;
	}
	
	#block3{
		height: auto;
	}
	
	.definitionblock{
		text-align: justify;
		width: 98%;
		margin: 0 auto;
		height: auto;
	}
	
	.interactiveblock{
		margin: auto;
		display: inline-block;
		height: 36px;
		padding-right: 10px;
		padding-top: 0px;
		position: relative;
		top: -20px;
	}
	
	.definitionwheel{
		width: 150px;
		margin: 0 auto;
	}
	
	.definitionblock .definitionwheel{
		display: block;
	}
	
	#text{
		display: none;
	}
	
	p.numberstyle{
		display: none !important;
	}
	
	.section#block3 {
	height: auto;
	padding-bottom: 40px;
	}
	
	#relationshipblock{
		width: 98%;
		margin: 0 auto;
	}
	
	.blockrelationship{
		width: 100%;
		height: auto;
		padding: 0;
	}
	
	#harmonyblock{
		height: auto;
		padding-bottom: 100px;
	}
	
	#harmonytext .colordeck{
		display: block;
		margin: 0 auto;
	}
	
	#harmonytext .colordeck:nth-child(3){
		width: 139px;
	}
	
	#harmonytext .colordeck:nth-child(2){
		width: 181px;
		margin-bottom: 30px;
	}
	
	h3.relationship{
		text-align: center;
		margin-bottom: 0;
	}
	
	#section4{
		height: auto;
		padding-bottom: 40px;
	}
	
	#section5{
		height: auto;
		padding-bottom: 40px;
		min-height: 790px;
	}
	
	#hotcoldblock{
		width: 100%;
		height: auto;
		padding-top: 60px;
	}
	
	#hotcoldblock h2{
		text-align: center;
		padding-bottom: 0px;
	}
	
	#hotcoldblock h3, h4{
		text-align: center;
		width: 96%;
		display: block;
		padding-left: 0px !important;
		padding-top: 30px;
		margin: 0 auto;
		margin-bottom: 12px;
	}
	
	#hotcoldtext p {
		color: rgba(0,0,0,.3);
		font-size: 18px;
		line-height: 26px;
	}
	
	#hotcoldtext{
		display: block;
		text-align: justify;
		width: 98%;
		margin: 0 auto;
	}
	
	#hotcold{
		margin: 0 auto;
		width: 230px;
		height: 230px;
	}
	
	#section6{
		height: auto;
		position: relative;
	}
	
	#howmanyblock{
		width: auto;
		padding-top: 80px;
		padding-bottom: 60px;
	}
	
	#section6 p{
		text-align: left;
	}
	
	#howmanyblock p{
		margin-bottom: 30px;
	}
	
	#separator4{
		bottom: -25px;
		z-index: 2;
	}
	
	#section7{
		height: auto;
		position: relative;
	}
	
	#separator5{
		bottom: -44px;
	}
	
	.distro-bar{
		width: 75%;
		margin: 0 auto;
		border: 1px solid white;
		height: 60px;
		display: block;
	}
	
	#triadicblock{
		padding-top: 120px;
		width: 100%;
		height: auto;
		padding-bottom: 100px;
	}
	
	.triadicwheel{
		width: 100%;
		height: auto;
		display: block;
		text-align: justify;
		padding: 0;
		margin: 0;
		margin-bottom: 20px;
	}
	
	.triadictext{
		text-align: justify;
	}
	
	P.triadictext{
		text-align: left;
		width: 98%;
	}
	
	.separator6{
		margin-top: -54px;
	}
	
	.triadicwheel svg{
		width: 100% !important;
	}
	
	#triadicblock h2{
		text-align: center;
	}
	
	#coloruseblock{
		width: 100%;
		margin-top: -54px;
		height: auto !important;
	}
	
	#coloruseblock p{
		text-align: justify;
		width: 98%;
		margin: 0 auto;
	}
	
	#backwhite{
		display: none;
	}
	
	.p60{
		width: 60%;
		height: 100%;
		background: #E53C8D;
		display: inline-block;
		padding: 0;
		margin: 0;
		position: relative;
	}
	
	.p30{
		width: 30%;
		height: 100%;
		background: #7DB928;
		display: inline-block;
		padding: 0;
		margin: 0;
		position: relative;
	}
	
	.p10{
		width: 10%;
		height: 100%;
		background: #F8B100;
		display: inline-block;
		padding: 0;
		margin: 0;
		position: relative;
	}
	
	.label{
		position: absolute;
		text-align: center;
		width: 100%;
		top: 22px;
		font-size: 14px;
		font-weight: 300;
	}
	
	.usepourcent{
		display: none;
	}

.bar{display:none}
  


}




@media all and (min-width:92.500em){
   #separator4 {
margin: -2.5em auto;
}
@media all and (min-width:117.500em){
.separator2 {
border-width: 70px 1827px 0px 0;
-webkit-transform: scale(2);
}
.separator2#top {
border-width: 70px 1809px 0px 0;
-webkit-transform: scale(2);
}

#section5 {
height: 600px;
width: 100%;
background-color: #fc880f;
}
.separator3 {
border-width: 0px 1827px 70px 0;
-webkit-transform: scale(2);
}
.separator31 {
border-width: 0px 1827px 70px 0;
-webkit-transform: scale(2);
}
#howmanyblock {
width: 600px;
margin: auto;
padding-top: 150px;
position: relative;
z-index: 1;
}
#separator4 {
margin: -1.8em auto;
z-index: 0;
}
.wideZoom{-webkit-transform:scale(2)}
.wideZoom .minZoom{-webkit-transform: scale(.5) !important;}

.herebutton {
width: 310px;
height: 30px;
border: solid 5px;
color: black;
opacity: 0.3;
display: block;
margin-top: -4em;
}
#hotcold svg {
display: inline-block;
float: left;
margin-top: 20px;
margin: 0 -.3em;
}
.rollinv{
margin: 0 -.3em;
}
.decl{margin-left: -2em;}

.separator6 {
z-index: 7;
position: relative;
}
.lastsep{margin-top:.2em}
#coloruseblock p{

position: relative;
z-index: 9;
}
#section9 {

position: relative;
z-index: 6;
} 
.exemple1 {
width: 280px;
height: auto;
display: block;
padding: 16px;
vertical-align: top;
line-height: 22px;
float: left;
margin: 0;
  
}
.exempletexte{
  position: relative;
z-index: 9;}
.exemple1 svg{
display:block;
width:180px;
margin:auto}

#section6 {
height: 700px;}
#section6{margin-top:0em}

}

@media all and (min-width:1920px){
.separator3{
        border-width: 0px 1827px 70px 0;
-webkit-transform: scale(2);}
#section6{margin-top:-2em} 
}