html {
	font-family: Arial, Helvetica, sans-serif; 
	font-size:20px;
    background-color:#F7F2FF;

}

.content{
    max-width:1000;
    width:100%;
    min-width:350px;
    margin-left:auto;
    margin-right:auto;
    display:block;
    vertical-align: top;

}

.btn_holder {
    width:100%;
   
    margin-left:auto;
    margin-right:auto;
    display:block;
    padding-top:20px;
    text-align:center;
 }
 
 .curve{   
    border-bottom: solid 1px black;
    padding:20px;
    background-color:#FFFFFF;
    position: fixed;    
    -webkit-transition: top 1s; /* Safari */
    transition: top 1s;
    top:-300;
    left:0px;
    width:calc(100% -45px);

}


.warning{
    background-color:#FF7777;
    text-align:center;
    padding:5px;
}

form{
    padding:5px;
    line-height: 200%;
    
}

table{ 
    margin:0 auto;
}

input[type=number] { 
    width:100;
}

input[type=color] { 
    width:50;
    height:50;
    border-radius: 5px;
}

th{
    text-align:center;
}

canvas{
width:100%;
display:block;
}

button{
  padding:5px;
  border:solid black 1px;
  margin-right:10px;
  width:80px;
  margin-top:15px;
  border-radius: 5px;
  	font-family: Arial, Helvetica, sans-serif; 
	font-size:16px;
  
}

.colors {
 width:48%;
 min-width:400px;
 display:inline-block;
    vertical-align: top;
    text-align:center;
}

.schem {

 width:48%;
 display:inline-block;
    vertical-align: top;
}

.step {
 width:48% ;
 min-width:350px;
 display:inline-block;
    vertical-align: top;
}

.step_title{
display:block;
font-size:22px;
font-weight:bold;
margin-bottom:10px;
margin-top:10px;
}

.howto {
    padding:20px;
    position: absolute; 
    top:0;
    background-color:#FFFFFF;
}

.open {
width:200px;
}

.close {
    float:right;
}

.sh{
 width:35!important;
}

.above{
display:block;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height:100%;
  background-color: rgba(0, 0, 0, 0.6);
  text-align:center;
  vertical-align:center;
}

.rotate {
    display:block;
    margin-top:25%;
    font-size:50;
    font-weight:bold;
    color:white;
    
  transform: rotate(-30deg);
   /* Safari */
  -webkit-transform: rotate(-30deg);

  /* Firefox */
  -moz-transform: rotate(-30deg);

  /* IE */
  -ms-transform: rotate(-30deg);

  /* Opera */
  -o-transform: rotate(-30deg);


}

.choice{
    text-decoration:none;
    display:inline-block;
    color:black;
    background-color:#FFFFF1;
    border: solid 1px black;
    text-align:center;
    margin:5px;
    border-radius:15px;
    height: 450px;
    width: 300px;
    vertical-align:top;

}

.choice:hover,.choice:active{

    background-color:#FFFFDF;
    border: solid 3px black;
    margin:2px;
}

.e{
  background-image:url('be.JPG');
  background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;  
}

.b{
  background-image:url('beads.jpg');
  background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: left center;  
}

.t{
background-image:url('bt.jpg');
background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;  
}

.do_btn{
display:inline-block;

}