#modal {
	visibility:hidden;
	width:460px;
	height:305px;
	padding:8px;

	background:#717171;

	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;

	position:fixed !important;
	top:20%;
	left:50% !important;
	margin-top:-94px !important;
	margin-left:-230px !important;
	z-index:10000000;.reveal-modal-bg
	
}
    

#heading
{
	width: 460px;
	height: 44px;
	border-bottom: 1px solid #bababa;
	-webkit-box-shadow: inset 0px -1px 0px #fff, 0px 1px 3px rgba(0, 0, 0, .08);
	-moz-box-shadow: inset 0px -1px 0px #fff, 0px 1px 3px rgba(0, 0, 0, .08);
	box-shadow: inset 0px -1px 0px #fff, 0px 1px 3px rgba(0, 0, 0, .08);
	-webkit-border-radius: 4px 4px 0px 0px;
	-moz-border-radius: 4px 4px 0px 0px;
	border-radius: 4px 4px 0px 0px;
	font-size: small;
	font-weight: bold;
	text-align: center;
	line-height: 44px;
	color: #9c2e2e;	
    background: #fff;
	background-image: linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
}
.headModal
{
	width: 460px;
	height: 44px;
	border-bottom: 1px solid #bababa;
	-webkit-box-shadow: inset 0px -1px 0px #fff, 0px 1px 3px rgba(0, 0, 0, .08);
	-moz-box-shadow: inset 0px -1px 0px #fff, 0px 1px 3px rgba(0, 0, 0, .08);
	box-shadow: inset 0px -1px 0px #fff, 0px 1px 3px rgba(0, 0, 0, .08);
	-webkit-border-radius: 4px 4px 0px 0px;
	-moz-border-radius: 4px 4px 0px 0px;
	border-radius: 4px 4px 0px 0px;
	font-size: large;
	font-weight: bold;
	text-align: center;
	line-height: 44px;
	color: #999999;
	text-shadow: 0px 1px 0px #fff;
	background-image: linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
}

#content {
	width:460px;
	height:260px;

	background:#fcfcfc;

	-webkit-box-shadow:0px 1px 3px rgba(0,0,0,.25);
	-moz-box-shadow:0px 1px 3px rgba(0,0,0,.25);
	box-shadow:0px 1px 3px rgba(0,0,0,.25);

	-webkit-border-radius:0px 0px 4px 4px;
	-moz-border-radius:0px 0px 4px 4px;
	border-radius:0px 0px 4px 4px;
}
#content em
{
    font-size:0.8em;
    display:block;
    width:Calc(100% - 20px);
    text-align:center;
    float:left;
    margin:10px;
}
.contentModal
{
	width:460px;
	height:200px;

	background:#fcfcfc;

	-webkit-box-shadow:0px 1px 3px rgba(0,0,0,.25);
	-moz-box-shadow:0px 1px 3px rgba(0,0,0,.25);
	box-shadow:0px 1px 3px rgba(0,0,0,.25);

	-webkit-border-radius:0px 0px 4px 4px;
	-moz-border-radius:0px 0px 4px 4px;
	border-radius:0px 0px 4px 4px;
}
#content p
{
	font-size: large;
	font-weight: normal;
	text-align: center;
	line-height: 22px;
	color: #555555;
	width: 100%;
	float: left;
	margin: 5px 0 15px 0;
	text-align: center;
}
.quant
{
	position: relative;
	float: left;
	margin: 19px 0 19px 30px;
}

#content .button {
	width:137px;
	height:33px;

	font-size:13px;
	font-weight:bold;
	line-height:33px;

	color:#fff;
	text-shadow:0px 1px 0px rgba(0,0,0,.2);

	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;

	-webkit-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.5),
		0px 1px 2px rgba(0,0,0,.3);
	-moz-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.5),
		0px 1px 2px rgba(0,0,0,.3);
	box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.5),
		0px 1px 2px rgba(0,0,0,.3);

	float:left;
}
#content .button img { 
	float:left;
	width:33px;
	height:33px;
}



#content .button.green
{
	background: -webkit-linear-gradient(top,  rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
	background: -moz-linear-gradient(top,  rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
	background: -o-linear-gradient(top,  rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
	background: -ms-linear-gradient(top,  rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
	background: linear-gradient(top,  rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#aad44f' , endColorstr= '#609d29' ,GradientType=0 );
	border: 1px solid #5b8821;
	text-decoration: none;
	font-size: 1.2rem;
    font-family:'yekan';
	margin: 0 5px 0 35px;
}
#content .button.red
{
	    padding: 5px 10px ;
    background: -webkit-linear-gradient(top, rgba(248,114,136,1) 0%,rgba(243,71,85,1) 90%,rgba(225,65,77,1) 95%,rgba(206,59,70,1) 100%);
    background: -moz-linear-gradient(top, rgba(248,114,136,1) 0%,rgba(243,71,85,1) 90%,rgba(225,65,77,1) 95%,rgba(206,59,70,1) 100%);
    background: -o-linear-gradient(top, rgba(248,114,136,1) 0%,rgba(243,71,85,1) 90%,rgba(225,65,77,1) 95%,rgba(206,59,70,1) 100%);
    background: -ms-linear-gradient(top, rgba(248,114,136,1) 0%,rgba(243,71,85,1) 90%,rgba(225,65,77,1) 95%,rgba(206,59,70,1) 100%);
    background: linear-gradient(top, rgba(248,114,136,1) 0%,rgba(243,71,85,1) 90%,rgba(225,65,77,1) 95%,rgba(206,59,70,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#f87288' , endColorstr= '#ce3b46' ,GradientType=0 );
    text-decoration: none;
    border: 1px solid #b0333e;
    margin: 0 5px 0 35px;
    font-size: 1.3rem;
    font-family: 'yekan';
}

.reveal-modal-bg { 
	position: fixed; 
	height: 100%;
	width: 100%;
	background: #000;
	background: rgba(0,0,0,.8);
	z-index: 9999999;
	display: none;
	top: 0;
	left: 0; 
}
.failtext
{
	color:Red;
}
.up {
    -webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
    border: 0px none white;
    width: 50px;
    height: 50px;
    font-size: 50px;
    padding: 0;
    line-height: 55px;
    color: #5c5c5c;
    overflow: hidden;
    text-decoration: none;
    background: #d4d4d4;
    background-position: 0 0;
    cursor: pointer;
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   overflow:hidden;
   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}
.down {
    -webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
    overflow:hidden;
   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
    cursor: pointer;
    border: 0px none white;
    border: 0px none white;
    width: 50px;
    height: 50px;
    font-size: 80px;
    padding: 0;
    line-height: 60px;
    color: #5c5c5c;
    text-decoration: none;
    background: #d4d4d4;
    background-position: 0 0;
}
.wrapperripple
{
    background: #788;
      margin: 10px;
    position:relative;
     width: 50px;
    height: 50px;overflow: hidden; -webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;
}
.val {

margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
float: left;
font-size: 1.5em;
font-weight: 300;
text-align:center;
width:100px;
}
.unitspan
{
    float:left;
    padding:0 0.3em;
    direction:rtl;
    font-size:15px;
    font-size:1.5em;
    width:200px;
}
.buttonbox
{
     display:inline;float:left;margin-top: -40px;margin-left:20px;
}
@media only screen and (min-device-width : 320px) and (max-device-width :480px) {
    .quant {
        position: relative;
        float: right;
       
        width: 100%;
    }
    .buttonbox {
        margin-top: -80px !important;
    }
   
    .unitspan{
        margin-left:5%;font-size: 2em;
    }
	#modal {
		width:calc(100% - 100px);
		height:1200px;
		padding:8px;       
			top:1 0%;
	    left:50px!important;
	    margin-top:-94px !important;
	    margin-left:0 !important;
	}
	#heading {
		width:100%;
		height:70px;

		line-height:65px;
		font-size:1.2em;
	}
	#content {
		width:100% ;
		height:1142px;
   	}
   	#content p {
   		width:100%;
   		font-size:1.5em;
               line-height: 102px;
   	}
   	#content .button img { 
		width:100px;
		height:100px;
	}
	#content .button {
		width:108px;
		height:23px;

		line-height:23px;
		font-size:0.688em;
	}
	
    .up {
        -webkit-border-radius: 200px;
        -moz-border-radius: 200px;
        border-radius: 200px;
        border: 0px none white;
        width: 200px;
        height: 200px;
        font-size: 200px;
        padding: 0;
        line-height:210px;
        color: #5c5c5c;
        overflow: hidden;
        text-decoration: none;
        background: #d4d4d4;
        background-position: 0 0;
        cursor: pointer;
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        overflow: hidden;
        /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
        -ms-user-select: none;
        user-select: none;
    }
    .down {
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        overflow: hidden;
        /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        border: 0px none white;
        border: 0px none white;
        width: 200px;
        height: 200px;
        font-size: 260px;
        padding: 0;
        line-height: 240px;
        color: #5c5c5c;
        text-decoration: none;
        background: #d4d4d4;
        background-position: 0 0;
    }
    .wrapperripple {
        background: #788;
        margin: 20px;
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden;
        -webkit-border-radius:200px;
        -moz-border-radius: 200px;
        border-radius:200px;
    }
    .val {
        margin: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        float: left;
        font-size: 5em;
        font-weight: 300;
        text-align: center;
        width: 300px;
        height: 300px;
        
    }
    #content .button {
            width: Calc(100% - 60px);
        height:150px;
        font-size: 33px;
        font-weight: bold;
        line-height: 73px;
        color: #fff;
        text-shadow: 0px 1px 0px rgba(0,0,0,.2);
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.5), 0px 1px 2px rgba(0,0,0,.3);
        -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.5), 0px 1px 2px rgba(0,0,0,.3);
        box-shadow: inset 0px 1px 0px rgba(255,255,255,.5), 0px 1px 2px rgba(0,0,0,.3);
        float: left;
        text-align:center;
          
    }
        #content .button.green {
            font-size:2.2em;
            margin:100px 0  0 30px;
            padding:0 !important;
        }
        #content .button.red {
            font-size:2.2em;
                margin:100px 0  0 30px;
                padding:0 !important;

        }
}