body{

	width: 100%;

	height: 100%;

	overflow:hidden;

	background: black !important;

}

.container{

	margin-top: 5%;

	width: 60% !important;

	margin-left: 20% !important;

	background-color: #243E4E;



	/*background: url(../images/bg.jpg) no-repeat center;*/

	background-size: cover;

	height: 80%;

}

.row.group{

	margin-top: 5%;

}

.row.groupb{

	margin-top: 2.9%;

}

.row.opts{

	margin-top: 2%;

}

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

.container{

	

	width: 100% !important;

	margin-left: 0% !important;

	background-color: #243E4E;

	background-size: cover;

	height: 100%;

}





	}

.logo{

	background: url(../images/logo.png) no-repeat center;

	background-size: contain;

	width: 40%;

	height: 35px;

	margin-left: auto;

	margin-right: auto;

}

.option-margin{

	margin-top: -30px;

}

.sub-heading{

	font-family: 'Roboto', sans-serif;

	color: white;

	opacity: 0.5;

	text-align: center;

	width: 80%;

	margin-left: 10%;

	margin-top: 10px;

	/*padding-bottom: 10px;*/

	font-size: 27px;

	position : relative;



}

.opts#patternr{



	margin-left: 20% !important;

}

.input-label{

	font-family: 'Roboto', sans-serif;

	color: white;

	opacity: 0.5;

	text-align: center;

	font-size: 20px;

}

.input-label-w{

	font-family: 'Roboto', sans-serif;

	color: white;

	opacity: 1;

	text-align: right;

	font-size: 16px;

}

.input-label-w-m{

	margin-left: 20%;

	font-size: 20px !important;

}

.middle-col{

	/*margin-top: 10px;

	margin-left: 0%;*/

}

.icon-vol{

	background: url(../images/signal.png) no-repeat;

	background-size: contain;

	width: 80%;

	height: 20px;

	margin-left: 35%;

}

.m-icon-vol{

	display:none;

	background: url(../images/signal.png) no-repeat;

	width: 40px;

	height: 40px;

	margin-top: -7%;

	margin-left: 55%;

}

.icon-pattern{

	background: url(../images/p1.png) no-repeat 0 0;

	width: 50px;

	height: 15px;

	margin-left: 35%;

	background-size: contain;

}

.m-icon-pattern{

	display:none;

	background: url(../images/p1.png) no-repeat 0 0;

	width: 50px;

	height: 50px;

	margin-top: -7%;

	margin-left: 55%;

	background-size: contain;

}

.icon-sound{

	font-family: 'Roboto', sans-serif;

	color: white;

	opacity: 1;

	font-size: 16px;

	width: 100%;

	height: 30px;

	/*margin-left: 20%;*/

}

.m-icon-sound{

	display:none;

	font-family: 'Roboto', sans-serif;

	color: white;

	opacity: 1;

	font-size: 20px;

	width: 50px;

	height: 50px;

	margin-top: -6%;

	margin-left: 55%;

}

.icon-speed{

	background: url(../images/speed.png) center no-repeat;

	width: 50%;

	height: 20px;

/*	margin-left: 35%;*/

	background-size: contain;

}

.icon-fullscreen{

	background: url(../images/fullscreen.png) center no-repeat;

	width: 50%;

	height: 20px;

	margin-left: -15%;

	background-size: contain;

}

.m-icon-speed{

	display:none;

	background: url(../images/speed.png) no-repeat;

	width: 50px;

	height: 50px;

	margin-top: -7%;

	margin-left: 55%;

}

.icon-duration{

	/*background: url(../images/duration.png) no-repeat;*/

	width: 80%;

	height: 15px;

	margin-left: 10%;

	padding-top: 3px;

}

.m-icon-duration{

	display:none;

	/*background: url(../images/duration.png) no-repeat;*/

	height: 40px;

	width: 80px;

	margin-top: -7%;

	

	padding-top: 5px;

	background-size: contain;

}

.icon-color

{

	width: 80%;

	height: 15px;

	margin-left: 20%;

}



.m-icon-color

{

	display:none;

	width: 50px;

	height: 50px;

	margin-top: -6%;

	margin-left:55%;

}

.icon-shape

{

	width: 80%;

	height: 15px;

	margin-left: -15%;

}

.m-icon-shape

{

	display:none;

	width: 50px;

	height: 50px;

}

#startbtn{

	background: url(../images/start.png) no-repeat;

	width: 80%;

	height: 80px;

	background-size: contain;

	margin-left: 10%;

}

.colorshape{

	-webkit-box-sizing: content-box;

  -moz-box-sizing: content-box;

  box-sizing: content-box;

  width: 20px;

  height: 20px;

  background: red;

  -webkit-transform: rotateZ(-45deg)   ;

  transform: rotateZ(-45deg)   ;

  -webkit-transform-origin: 0 100% 0deg;

  transform-origin: 0 100% 0deg;

}

.m-colorshape{

	display:none;

	-webkit-box-sizing: content-box;

  -moz-box-sizing: content-box;

  box-sizing: content-box;

  width: 30px;

  height: 30px;

  background: red;

  -webkit-transform: rotateZ(-45deg)   ;

  transform: rotateZ(-45deg)   ;

  -webkit-transform-origin: 0 100% 0deg;

  transform-origin: 0 100% 0deg;

}

#diamond

{

	-webkit-box-sizing: content-box;

  -moz-box-sizing: content-box;

  box-sizing: content-box;

  width: 20px;

  height: 20px;

  background: red;

  -webkit-transform: rotateZ(-45deg)   ;

  transform: rotateZ(-45deg)   ;

  -webkit-transform-origin: 0 100% 0deg;

  transform-origin: 0 100% 0deg;

}



#square {

	width: 20px;

	height: 20px;

	background: red;

}

#circle {

	width: 20px;

	height: 20px;

	background: #24a7dd;

	-moz-border-radius: 50px;

	-webkit-border-radius: 50px;

	border-radius: 50px;

}

.size{

	width: 20px;

	height: 20px;

	background: red;

	margin-left: 3%;

}

.back{

	width:20px; 

    height:20px; 

    margin-left: 20%;

    background: transparent url(../images/backgrounds/s_2.png) no-repeat 0 0;

     background-size: contain;

}

.m-back{

	display:none;

	margin-left: -25px;

	width:40px; 

    height:40px; 

    background: transparent url(../images/backgrounds/s2.png) no-repeat 0 0;

     background-size: contain;

}

#duration{

	font-family: 'Roboto', sans-serif;

	color: white;

	opacity: 0.5;

	

	margin-left: 1%;

	font-size: 15px;

}

#duration-m{

	font-family: 'Roboto', sans-serif;

	color: white;

	opacity: 0.5;

	margin-left: 25%;

	font-size: 15px;

}

/*===========================================*/





/*===================================================*/



input[type=radio].css-checkbox {

	position:absolute; 

	z-index:-1000; 

	left:-1000px; 

	overflow: hidden; 

	clip: rect(0 0 0 0); 

	height:0.5px; 

	width:0.5px; 

	margin:-1px; 

	padding:0; 

	border:0;

}



input[type=radio].css-checkbox + label.css-label {

	padding-left:21px;

	height:30px; 

	width: 30px;

	display:inline-block;

	line-height:16px;

	background-repeat:no-repeat;

	background-position: 0 0;

	font-size:16px;

	vertical-align:middle;

	cursor:pointer;

	margin-left: 30px;

}



input[type=radio].css-checkbox:checked + label.css-label {

	background-position: 0 -30px;

}

label.css-label {

	/*background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_a3fb699834e80920889649e3d3b8feea.png);*/

	background-image:url(../images/check-bg.png);

	-webkit-touch-callout: none;

	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-ms-user-select: none;

	user-select: none;

}

label.css-label.red{

	background-image:url(../images/check-bgr.png) !important;

}

label.css-label.green{

	background-image:url(../images/check-bgg.png) !important;

}

label.css-label.yellow{

	background-image:url(../images/check-bgy.png) !important;

}

label.css-label.blue{

	background-image:url(../images/check-bgb.png) !important;

}

label.css-label.b1{

	background-image:url(../images/check-bg1.png) !important;

}

label.css-label.b2{

	background-image:url(../images/check-bg2.png) !important;

}

label.css-label.b3{

	background-image:url(../images/check-bg3.png) !important;

}

label.css-label.b4{

	background-image:url(../images/check-bg4.png) !important;

}

label.css-label.b5{

	background-image:url(../images/check-bg5.png) !important;

}

label.css-label.s1{

	background-image:url(../images/check-bgs1.png) !important;

}

label.css-label.s2{

	background-image:url(../images/check-bgs2.png) !important;

}

label.css-label.s3{

	background-image:url(../images/check-bgs3.png) !important;

}

label.css-label.p1{

	background-image:url(../images/check-bgp1.png) !important;

}

label.css-label.p2{

	background-image:url(../images/check-bgp2.png) !important;

}

label.css-label.p3{

	background-image:url(../images/check-bgp3.png) !important;

}

label.css-label.p4{

	background-image:url(../images/check-bgp4.png) !important;

}

.spinner {

    display:    none;

    position:   fixed;

    z-index:    2000;

    top:        0;

    left:       0;

    height:     100%;

    width:      100%;

    background: rgba( 255, 255, 255, .8 ) 

                background: rgba( 255, 255, 255, .8 ) 

                url('http://i.stack.imgur.com/FhHRx.gif') 

                50% 50% 

                no-repeat;

                

}