/*#switch-current .spectrum-container { position: fixed; top:60px; left: 10px; }*/
#docs-content { 
  
  background:rgba(255, 55, 0, 1) ;
  width: 30%;
  margin:10%;
  height: auto;
  animation: colorchange 3.5s linear infinite;
  position: relative;
  float: left;
  top: -400px;
  left:0;
  
  z-index: 0;

}

#fuck{
  background: rgba(255, 55, 0, 1);
  width: 30%;
  margin:10%;
  height: auto;
  animation: colorchange2 15s linear infinite;
  position: relative;
  float: left;
  top: -400px;
  left:0;
  
  z-index: 0;
}




@keyframes colorchange {
    0%   {opacity: 1.0}
    50% {opacity: 0.5}
    100% {opacity: 1.0}
        

}



@keyframes colorchange2 {
    0% {background: rgba(255, 165, 0, 1);}
    7%{opacity: 0.8;}
    14%{background: rgba(255, 255, 0, 1);}
    21%{opacity: 0.8;}
    28% {background: rgba(0, 255, 0, 1);}
    35%{opacity: 0.8;}
    42% {background: rgba(0, 127, 255, 1);}
    49%{opacity: 0.8;}
    56% {background: rgba(0, 0, 255, 1);}
    63%{opacity: 0.8;}
    70% {background: rgba(139, 0, 255, 1);}
    77%{opacity: 0.8;}
    85% {background: rgba(255, 0, 0, 1);}
    92%{opacity: 0.8;}
    100% {background: rgba(255, 165, 0, 1);}
}


input[type="text"] { height: auto; }
.label {
  padding: 1px 4px 2px;
  font-size: 10.998px;
  font-weight: bold;
  line-height: 13px;
  color: #ffffff;
  vertical-align: middle;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #999999;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

@media screen and (min-width: 1200px) {

    #docs-content { 
  
  background:rgba(255, 55, 0, 1) ;
  width: 30%;
  margin:10%;
  height: auto;
  animation: colorchange 3.5s linear infinite;
  position: relative;
  float: left;
  top: -560px;
  left:0;
  z-index: 0;
  height:400px;

  }



  #fuck{
  background: rgba(255, 55, 0, 1);
  width: 30%;
  margin:10%;
  height: auto;
  animation: colorchange2 15s linear infinite;
  position: relative;
  float: left;
  top: -560px;
  left:0;
  z-index: 0;
  height:400px;
  }

  .color_con{

    height:500px;
    overflow:hidden;
  }
    

    
}

@media screen and (min-width: 992px) and (max-width: 1200px) {


    #docs-content { 
  
  background:rgba(255, 55, 0, 1) ;
  width: 30%;
  margin:10%;
  height: auto;
  animation: colorchange 3.5s linear infinite;
  position: relative;
  float: left;
  top: -450px;
  left:0;
  z-index: 0;
  height:300px;

  }



  #fuck{
  background: rgba(255, 55, 0, 1);
  width: 30%;
  margin:10%;
  height: auto;
  animation: colorchange2 15s linear infinite;
  position: relative;
  float: left;
  top: -450px;
  left:0;
  z-index: 0;
  height:300px;
  }

  .color_con{

    height:400px;
    overflow:hidden;
  }
   


    
}


@media screen and (min-width: 768px) and (max-width: 992px) {

  #docs-content { 
  
  background:rgba(255, 55, 0, 1) ;
  width: 30%;
  margin:10%;
  
  animation: colorchange 3.5s linear infinite;
  position: relative;
  float: left;
  top: -300px;
  left:0;
  z-index: 0;
  height:200px;

  }



  #fuck{
  background: rgba(255, 55, 0, 1);
  width: 30%;
  margin:10%;
  
  animation: colorchange2 15s linear infinite;
  position: relative;
  float: left;
  top: -300px;
  left:0;
  z-index: 0;
  height:200px;
  }

  .color_con{

    height:350px;
    overflow:hidden;
  }
   
   


    
}

@media screen and (min-width: 608px) and (max-width: 768px) {

  #docs-content { 
  
  background:rgba(255, 55, 0, 1) ;
  width: 30%;
  margin:10%;
  height: auto;
  animation: colorchange 3.5s linear infinite;
  position: relative;
  float: left;
  top: -300px;
  left:0;
  z-index: 0;
  height:220px;
  }



  #fuck{
  background: rgba(255, 55, 0, 1);
  width: 30%;
  margin:10%;
  height: auto;
  animation: colorchange2 15s linear infinite;
  position: relative;
  float: left;
  top: -300px;
  left:0;
  z-index: 0;
  height:220px;
  }


  .color_con{

    height:280px;
    overflow:hidden;
  }
   

    
}


@media screen and (min-width: 468px) and (max-width: 608px) {

  #docs-content { 
  
  background:rgba(255, 55, 0, 1) ;
  width: 30%;
  margin:10%;
  height: auto;
  animation: colorchange 3.5s linear infinite;
  position: relative;
  float: left;
  top: -420px;
  left:0;
  z-index: 0;
  height:350px;
  }



  #fuck{
  background: rgba(255, 55, 0, 1);
  width: 30%;
  margin:10%;
  height: auto;
  animation: colorchange2 15s linear infinite;
  position: relative;
  float: left;
  top: -420px;
  left:0;
  z-index: 0;
  height:350px;
  }


  .color_con{

    height:220px;
    overflow:hidden;
  }
   

    
}



@media screen and (max-width: 468px){

  #docs-content { 
  
  background:rgba(255, 55, 0, 1) ;
  width: 30%;
  margin:10%;
  height: auto;
  animation: colorchange 3.5s linear infinite;
  position: relative;
  float: left;
  top: -130px;
  left:0;
  z-index: 0;
  height:88px;
  }



  #fuck{
  background: rgba(255, 55, 0, 1);
  width: 30%;
  margin:10%;
  height: auto;
  animation: colorchange2 15s linear infinite;
  position: relative;
  float: left;
  top: -130px;
  left:0;
  z-index: 0;
  height:88px;
  }


  .color_con{

    height:155px;
    overflow:hidden;
  }
   

    
}