@media screen and (min-width: 1100px)  {
  .bloc 
  {
    display:block;
    clear:both;
  
    }	
	
	#container
			{
				padding-bottom:5vw;
				padding-top:5vw;
				
			
			}
	
	body
	{
		
	}
}


@media screen and (min-width: 150px)  {
  .bloc 
  {
    display:block;
    clear:both;
  
    }
    
    body
    {
        font-family: arial;
    }
    
    #containerButtons
    {
        display:flex;
        flex-direction: row;
        position: absolute;
        top:1vw;
        left:20vw;
    }

    #mainSelect
    {
        color:pink;
        width:7vw;
        padding:0.5vw;
        padding-right: 4.5vw;
        border-top-left-radius:1.9vw; 
        border-bottom-left-radius:1.9vw; 
        background:white;
        font-size: 1vw;
        cursor:pointer;
        border: solid 3px white;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
    }
    
    #assignsSelect
    {
        color:white;
        background:transparent;
        width:7vw;
        cursor:pointer;
        font-size: 1vw;
        padding:0.5vw;
        padding-left: 4.5vw;
        position:absolute;
        left:10vw;
        
        border-top-right-radius:1.9vw; 
        border-bottom-right-radius:1.9vw; 
       
        border: solid 3px white;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
        clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
    }
    
    #assignPart
    {
        display: none;
    }
    
    .assignParam
    {
        display:flex;
        flex-direction: row;
        padding-top:10vw;
        padding-left:20vw;
    }
    
    .assignParam p
    {
        margin-right:2vw;
        font-size: 1vw;
    }
    
    .assignFilter
    {
        max-width:25vw;
        margin-right: 3vw; 
    }

			#copyright
			{
				position: absolute;
				right:30px;
			}

			#container
			{
				display: flex;
				flex-wrap: nowrap;
				width:80%;
				padding-left:20vw;
				
				
				padding-top:1vw;
			}

			#logo
			{
				width:13vw;
				margin:1vw;
				left:0;
				position:absolute;
			}

			#do
			{
				width:7.5vw;
				height:20vw;
				max-height:400px;
				max-width:150px;
				overflow: hidden;
				cursor:pointer;
				border: 2px white solid;
			}
			#re
			{
				width:7.5vw;
				height:20vw;
				max-height:400px;
				max-width:150px;
				overflow: hidden;
				cursor:pointer;
				border: 2px white solid;
			}
			#mi
			{
				width:7.5vw;
				height:20vw;
				max-height:400px;
				max-width:150px;
				overflow: hidden;
				cursor:pointer;
				border: 2px white solid;
			}
			#fa
			{
				width:7.5vw;
				height:20vw;
				max-height:400px;
				max-width:150px;
				overflow: hidden;
				cursor:pointer;
				border: 2px white solid;
			}
			#sol
			{
				width:7.5vw;
				height:20vw;
				max-height:400px;
				max-width:150px;
				overflow: hidden;
				cursor:pointer;
				border: 2px white solid;
			}
			#la
			{
				width:7.5vw;
				height:20vw;
				max-height:400px;
				max-width:150px;
				overflow: hidden;
				cursor:pointer;
				border: 2px white solid;
			}
			#si
			{
				width:7.5vw;
				height:20vw;
				max-height:400px;
				max-width:150px;
				overflow: hidden;
				cursor:pointer;
				border: 2px white solid;
			}
			
			#do2
			{
				width:7.5vw;
				height:20vw;
				max-height:400px;
				max-width:150px;
				overflow: hidden;
				cursor:pointer;
				border: 2px white solid;
			}

			#re2
			{
				width:7.5vw;
				height:20vw;
				max-height:400px;
				max-width:150px;
				overflow: hidden;
				cursor:pointer;
				border: 2px white solid;
			}

			#mi2
			{
				width:7.5vw;
				height:20vw;
				max-height:400px;
				max-width:150px;
				overflow: hidden;
				cursor:pointer;
				border: 2px white solid;
			}



			#doDiese
			{
				width:4vw;
				height:10vw;
				background-color:black;
				cursor:pointer;
				display: block;
				position: absolute;
				left:26vw;
				box-shadow: 5px 5px 15px rgba(0, 0, 0, .4);;
			}

			#reDiese
			{
				width:4vw;
				height:10vw;
				background-color:black;
				cursor:pointer;
				left:33.5vw;
				position: absolute;
				box-shadow: 5px 5px 15px rgba(0, 0, 0, .4);;
			}

			#doDiese2
			{
				width:4vw;
				height:10vw;
				background-color:black;
				cursor:pointer;
				display: block;
				position: absolute;
				left:80.5vw;
				box-shadow: 5px 5px 15px rgba(0, 0, 0, .4);;
			}

			#reDiese2
			{
				width:4vw;
				height:10vw;
				background-color:black;
				cursor:pointer;
				left:88vw;
				position: absolute;
				box-shadow: 5px 5px 15px rgba(0, 0, 0, .4);;
			}


			#faDiese
			{
				width:4vw;
				height:10vw;
				background-color:black;
				cursor:pointer;
				left:49.5vw;
				position: absolute;
				box-shadow: 5px 5px 15px rgba(0, 0, 0, .4);;
			}

			#solDiese
			{
				width:4vw;
				height:10vw;
				background-color:black;
				cursor:pointer;
				left:57vw;
				position: absolute;
				box-shadow: 5px 5px 15px rgba(0, 0, 0, .4);;
			}

			#laDiese
			{
				width:4vw;
				height:10vw;
				background-color:black;
				cursor:pointer;
				left:64.5vw;
				position: absolute;
				box-shadow: 5px 5px 15px rgba(0, 0, 0, .4);;
			}

			body
			{
				margin:0;
				overflow-x: hidden;
				
                
                background: linear-gradient(270deg, #BEF9FE, #FFAABA);
                background-size: 400% 400%;
                animation: gradientAnim 30s ease-in-out infinite;
			}
    
            

            @-webkit-keyframes gradientAnim {
                0%{background-position:0% 50%}
                50%{background-position:100% 50%}
                100%{background-position:0% 50%}
            }
            @-moz-keyframes gradientAnim {
                0%{background-position:0% 50%}
                50%{background-position:100% 50%}
                100%{background-position:0% 50%}
            }
            @keyframes gradientAnim { 
                0%{background-position:0% 50%}
                50%{background-position:100% 50%}
                100%{background-position:0% 50%}
            }

			#keyboardBlack
			{
				display:flex;
				
			}

			#keyboard
			{
				display:flex;
				
				align-items: center;
			}
	
			.wave
			{
				margin-top:2vw;
				margin-bottom:3vw;
				-webkit-border-radius: 28;
				  -moz-border-radius: 28;
				  border-radius: 28px;
				  font-family: Arial;
				  color: #ffffff;
				  font-size: 20px;
				  background: black;
				  padding: 10px 20px 10px 20px;
				  text-decoration: none;
				  cursor: pointer;
			}

			p
			{
				font-family: arial;
				color:white;
			}

			#wavetype
			{
				margin-left:1em;
			}

			#sine
			{
				background-color: skyblue;
			}

			#sineOsc2
			{
				background-color: skyblue;
			}


			#osc1
			{
				background-color: skyblue;
			}

			#osc2
			{
				background-color: skyblue;
			}

			#controls
			{
				display:flex;
				padding-top:5vw;
			}

			#controlsOsc2
			{
				display:flex;
			}
    
            #changeAttack
            {

            }

			#octave
			{
				display:flex;
				flex-direction: column;
				margin: 1em;
			}

			.buttonOctaveOsc1
			{
			  
			  font-family: Arial;
			  color: black;
			  font-size: 10px;
			  background: #c3e0ff;
			  padding: 5px 10px 5px 10px;
			  text-decoration: none;
			  width:3vw;
			}

			.buttonOctaveOsc2
			{
			  font-family: Arial;
			  color: black;
			  font-size: 10px;
			  background: #c3e0ff;
			  padding: 5px 10px 5px 10px;
			  text-decoration: none;
			  width:3vw;
			}

			input[type=range] {
			  -webkit-appearance:none;
			  width: 100%;
            background:white;
			  outline:none;
                border-radius: 0.2vw;
                overflow:hidden;
			}
			input[type=range]:focus {
			  outline: none;
			}
			input[type=range]::-webkit-slider-runnable-track {
                
			  width: 1vw;
			  height: 1.5vw;
                
                
			  cursor: pointer;
			  
			  background:white;
			  
			}
    
			input[type=range]::-webkit-slider-thumb {
                
                -webkit-appearance:none;
                
                border-radius:1vw;
                box-shadow:-25vw 0 0 25vw rgb(190, 249, 254);

			  height: 4vw;
			  width: 0vw;
			  
			  background: rgb(190, 249, 254);
			  cursor: pointer;

			}
    
			input[type=range]:focus::-webkit-slider-runnable-track {
			  
			}
			

			

			#waveOsc1
			{
				width:90%;
				margin:0 auto;
				transition: 0.25s;
			}

			#waveOsc2
			{
				width:90%;
				text-align: center;
				
			}
	
			h1
			{
				text-indent: -5000px;
				position:absolute;
			}

			h2
			{
				font-family: arial;
				color:white;
				margin-left:20vw;
				font-size:2.2vw;
				padding-top: 2vh;
				margin-right:2vw;
			}

			h3
			{
				font-family: arial;
				letter-spacing: 0.5vw;
				text-transform: uppercase;
				font-weight:100;
				color:white;
				margin:0;
				margin-top:1vw;
			}


			.wavetype
			{
				margin:0;
				width:100%;
				cursor:pointer;
				width:15vw;
				height: 10vw;
				text-align: center;
				transition:0.25s;
			}



			.wavetype:hover
			{
				transform: scale(1.05);
			}

			.changeFilterOsc1
			{
				background: rgba(255,255,255,0.3);
				text-decoration: none;
				font-family:arial;
				border:none;
				padding:0.5vw;
				transition:0.25s;
				cursor:pointer;
			}

			.changeFilterOsc1:hover
			{
				background: rgba(255,255,255,1);
			}

			.changeFilterOsc2
			{
				background: rgba(255,255,255,0.3);
				text-decoration: none;
				font-family:arial;
				border:none;
				padding:0.5vw;
				transition:0.25s;
				cursor:pointer;
			}

			.changeFilterOsc2:hover
			{
				background: rgba(255,255,255,1);
			}

			

			.buttonOctaveOsc1, .buttonOctaveOsc2
			{
				background: rgba(255,255,255,0.3);
				text-decoration: none;
				font-family:arial;
				border:none;
				padding:0.5vw;
				transition:0.25s;
				cursor:pointer;
			}

			.buttonOctaveOsc1:hover, .buttonOctaveOsc2:hover
			{
				background: rgba(255,255,255,1);
			}
			
			#separation
			{		
				width:75%;
				margin-left:20vw;
				height:2px;
				background: white;
				margin-bottom:2vw;
				margin-top:2vw;
			}
	
			.key
			{
				font-family: arial;
				text-align: center;
				color:grey;
				padding-top:17vw;
				
			}

			#switch
			{
				
				width:3vw;
				height:1vw;
				background:rgba(255,255,255,0.3);
				cursor:pointer;
				transition:0.25s;
			}
	
			#switch:hover
			{
				background:rgba(255,255,255,1)
			}
	
	#portamento
    {
        display: none;
    }
	
    
    #mainControls
    {
        display: flex;
        flex-direction: column;
        padding-top:9vw;
        position: absolute;
        width:20vw;
        
    }
    
    .volumeOsc
			{
				margin-top: 3.2vw;
				margin-bottom: 0;
			}
    
    .atkRls
    {
        
    }

    .releaseP
    {
        font-size:1vw;
    }
    
    #recordingslist 
    {
        padding-left:0px;        
    }
    
    #recordingslist a
    {
        color:white;
        font-size: 1.75vw;
    }
    
    .recordedElement
    {
        list-style-type: none;
        padding-bottom: 1vw;
    }
    
    .recordedElement audio
    {
        width:14vw;
    }
}


@media screen and (max-width: 800px)  {
  .bloc 
  {
    display:block;
    clear:both;
  
    }	

    .key
    {
        display: none;
    }
    
    #releaseNote
    {
        display: none;
    }
    
    #container
	{
		display: flex;
		flex-wrap: nowrap;
		width:100%;
		padding-left:0vw;
		
		padding-bottom:10vw;
		padding-top:1vw;
	}
    
    #do
	{
		width:12vw;
		height:30vw;
		max-height:400px;
		max-width:150px;
		overflow: hidden;
		cursor:pointer;
		border: 2px white solid;
	}
	#re
	{
		width:12vw;
		height:30vw;
		max-height:400px;
		max-width:150px;
		overflow: hidden;
		cursor:pointer;
		border: 2px white solid;
	}
	#mi
	{
		width:12vw;
		height:30vw;
		max-height:400px;
		max-width:150px;
		overflow: hidden;
		cursor:pointer;
		border: 2px white solid;
	}
	#fa
	{
		width:12vw;
		height:30vw;
		max-height:400px;
		max-width:150px;
		overflow: hidden;
		cursor:pointer;
		border: 2px white solid;
	}
	#sol
	{
		width:12vw;
		height:30vw;
		max-height:400px;
		max-width:150px;
		overflow: hidden;
		cursor:pointer;
		border: 2px white solid;
	}
	#la
	{
		width:12vw;
		height:30vw;
		max-height:400px;
		max-width:150px;
		overflow: hidden;
		cursor:pointer;
		border: 2px white solid;
	}
	#si
	{
		width:12vw;
		height:30vw;
		max-height:400px;
		max-width:150px;
		overflow: hidden;
		cursor:pointer;
		border: 2px white solid;
	}
	
	#do2
	{
		width:12vw;
		height:30vw;
		max-height:400px;
		max-width:150px;
		overflow: hidden;
		cursor:pointer;
		border: 2px white solid;
	}

	#re2
	{
		display:none;
	}

	#mi2
	{
		display:none;
	}



	#doDiese
	{
		width:7vw;
		height:14vw;
		background-color:black;
		cursor:pointer;
		display: block;
		position: absolute;
		left:9vw;
		box-shadow: 5px 5px 15px;
	}

	#reDiese
	{
		width:7vw;
		height:14vw;
		background-color:black;
		cursor:pointer;
		left:21vw;
		position: absolute;
		box-shadow: 5px 5px 15px;
	}


	#faDiese
	{
		width:7vw;
		height:14vw;
		background-color:black;
		cursor:pointer;
		left:47vw;
		position: absolute;
		box-shadow: 5px 5px 15px;
	}

	#solDiese
	{
		width:7vw;
		height:14vw;
		background-color:black;
		cursor:pointer;
		left:59vw;
		position: absolute;
		box-shadow: 5px 5px 15px;
	}

	#laDiese
	{
		width:7vw;
		height:14vw;
		background-color:black;
		cursor:pointer;
		left:71.5vw;
		position: absolute;
		box-shadow: 5px 5px 15px;
	}
    
    #doDiese2
	{
		display:none;
	}

	#reDiese2
	{
		display:none;
	}
    
    #mainControls
    {
        display: flex;
        flex-direction: row;
        padding-top:12vw;
        text-align: center;
        align-content: center;
        width:100vw;
        align-content: center;
        align-items: center;
    }
    
    #waveOsc1
			{
				width:100%;
				margin:0 auto;
				transition: 0.25s;
			}

			#waveOsc2
			{
				width:100%;
				text-align: center;
				
			}
    
    #controls
	{
		display:flex;
		padding-top:25vw;
	}

	#controlsOsc2
	{
		display:flex;
	}
    
    h2
	{
		font-family: arial;
		color:white;
		margin-left:1vw;
		font-size:2.2vw;
		padding-top: 2vh;
		margin-right:2vw;
	}

	h3
	{
		font-family: arial;
		letter-spacing: 0.5vw;
		text-transform: uppercase;
		font-weight:100;
		color:white;
		margin:0;
		margin-top:1vw;
	}
    
    #containerButtons
    {
        display:flex;
        flex-direction: row;
        position: absolute;
        top:1vw;
        left:20vw;
    }

    #mainSelect
    {
        color:pink;
        width:15vw;
        padding:0.5vw;
        padding-right: 4.5vw;
        border-top-left-radius:1.9vw; 
        border-bottom-left-radius:1.9vw; 
        background:white;
        font-size: 2vw;
       
    }
    
    #assignsSelect
    {
        color:white;
        background:transparent;
        width:15vw;
        cursor:pointer;
        font-size: 2vw;
        padding:0.5vw;
        padding-left: 10vw;
        position:absolute;
        left:10vw;
        
    }
    
    #switchContainer
    {
        display:none;
    }
    
    #copyright
    {
        font-size: 2vw;
    }
    
    
}