@font-face{
font-family:"droid";
src:url("../templates/8/font/DroidNaskh-Regular.eot");
src:local("‚??"),url("../templates/8/font/DroidNaskh-Regular.woff") format("woff"),
url("../templates/8/font/DroidNaskh-Regular.ttf") format("truetype");
font-weight:normal;font-style:normal
}
@font-face{
font-family:"titr";
src:url("BTITRBD.eot");
src:local("‚??"),url("BTITRBD.woff") format("woff"),
url("BTITRBD.ttf") format("truetype");
font-weight:normal;font-style:normal
}
*:focus {
    outline: 0;
}
div , li {
border-radius:3px;
}
textarea {
    resize: none;
}
h1 , h2 , h3 , h4 , p , ol {font-weight:normal;margin:0px;padding:0px;font:inherit}
a {
text-decoration:none;
transition: background 0.3s ;
-moz-transition:  background 0.3s ;
-webkit-transition:  background 0.3s; 
-o-transition: background 0.3s ;
color:inherit;
}
li {list-style:none;}
ul {margin:0px;padding:0px;}
body {
    direction: rtl;
    margin: 0 auto;
    font: 18px 'droid';
    background-image: url(car.jpg);
    background-repeat: repeat;
	background-attachment: fixed;
}
.LastStep {
    min-width: 300px;
    margin: 0 auto;
    text-align: center;
    font: 1.5em 'droid';
    line-height: 10px;
    height: 30px;
    margin-top: 10px;
    color: #fff;
    width: 32%;
    border-bottom: dashed 1px #fff;
    font-family: titr;
}
.LastStep p {
	float:right;
	    text-shadow: 0px 0px 4px #000;
}
.LastStep p , .LastStep span {
		font-size:0.8em;
	    padding: 0px 5px;
}
.LastStep .Final , .LastStep .Final2 , .LastStep .Final3 , .LastStep span {
	float:left;
}
.LastStep .Final , .LastStep .Final2 {
    color: #9e9e9e;
}
.LastStep .Final3 {
	    color: #FFC107;
}
.header {
    display: block;
    min-width: 320px;
    margin: 0 auto;
    height: 50px;
    width: 33%;
    background: url(../templates/8/img/sprite.png) 0px 4px no-repeat;
    color: #fff;
    font-size: 0.7em;
    margin-top: 28px;
}
h1 {
    font-size: 1.7em;
    float: right;
    margin-top: 19px;
    color: #FF9800;
    font-weight: bold;
    line-height: 35px;
}
.EndLink {
	    width: 240px;
    height: 40px;
    background: #C34A4A;
    margin: 35px auto;
    color: #FFFFFF;
    line-height: 39px;
    font-size: 1.3em;
    cursor: pointer;
    text-align: center;
    text-shadow: -1px 1px 0px #862424;
    display: block;
    border-radius: 3px;
}
.FooterP {
    text-align: center;
    font: 12px 'tahoma';
    margin-bottom: 10px;
    color: #888;
}
.header span {
    float: left;
    margin-left: 50px;
    margin-top: 25px;
}
.btn {
    width: 240px;
    height: 40px;
    background: #8BC34A;
    margin: 10px auto;
    color: #FFFFFF;
    line-height: 39px;
    font-size: 1.3em;
    cursor: pointer;
    text-align: center;
    text-shadow: -1px 1px 0px #446B17;
}
#Form1 , #Form2 , #Form3 , #Form4 {
    width: 30%;
    margin: 0 auto;
    background: #FBFBFB;
    padding: 10px 10px;
    border: dashed 1px #1A2D75;
    border-radius: 3px;
    margin-top: 5px;
}
#Form1 .Tozih , #Form2 .Tozih , #Form3 .Tozih , #Form4 .Tozih {
	color: #2196F3;
}
#Form1 label {
    display: block;
    border-radius: 5px;
    cursor: pointer;}
.Coment {
	min-width:300px;
	width:33%;
	margin:0 auto;
    font-size: 0.8em;
}
.Coment span {
    color: #FF9800;
}
.Coment p {
	color:#fff;
}






.container {
  display: block;
  position: relative;
  padding-right: 35px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
      border-radius: 5px;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 13px;
    background-color: #eee;
    border-radius: 0;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #afdcff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 6px;
    right: 0px;
    width: 10px;
    height: 13px;
    border-radius: 50%;
    background: #afdcff;
}








#Form1 p , #Form2 p , #Form3 p , #Form4 p , #Form2 select  {
    text-align: right;
    padding: 0px 10%;
    background: #F7F7F7;
    margin: 5px 0px;
    border-radius: 5px;
    border: solid 1px #EFEFEF;
	
	transition: color 0.1s , background 0.5s ;
-moz-transition: color 0.1s , background 0.5s ;
-webkit-transition: color 0.1s , background 0.5s;
-o-transition: color 0.1s , background 0.5s ;
}
#Form2 select  {
    height: 50px;
    width: 100%;
    font-size: 20px;
}

#Form1 .active , #Form2 .active , #Form3 .active , #Form4 .active  {
	background: #62ace6;
    color: fff;

	transition: color 0.1s , background 0.5s ;
-moz-transition: color 0.1s , background 0.5s ;
-webkit-transition: color 0.1s , background 0.5s;
-o-transition: color 0.1s , background 0.5s ;
}
.kopen-hide {
	display: none;
}
.kopen-hide-show {
	display: block !important;
}

@media only screen and (min-device-width : 1px) and (max-device-width : 768px) {
#Form1 , #Form2 , #Form3, #Form4 {
	width:80%
}

}
@media only screen and (min-device-width : 768px) and (max-device-width : 959px) {
#Form1 , #Form2 , #Form3, #Form4 {
	width:80%
}

}