body {
	width: 100%;
	margin:auto;
    background-color:rgb(245,245,248) ;
    padding-bottom:0px;
    padding-top: 0px ;
    font-family: "Vazirmatn", sans-serif;
    font-weight: normal ;
    font-style: normal;

  }    

#loginpage{
width:70%;
height:850px;
margin:40% auto;
font:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
border-radius:10px;
border:2px solid #ccc;
padding:10px 40px 25px;
text-align: center ;
background-color:white ;
}
@media only screen and (min-width: 600px) { #loginpage { width:20%; height:400px; margin:5% auto; } }
@media only screen and (max-width: 600px) { #loginpage { width:50%; height:300px; margin:40% auto; } }

#loginpage img {
	width:80%;
	height:auto;
	margin: 20% auto 10% ;
	text-align: center ;
}

/**-------------------------------------------------promo------------------------------------------------------**/

@media only screen and (min-width: 600px) { #promo2 {display: none ; margin:0; } #promo1 { margin:-5% 0 0 0; } }
@media only screen and (max-width: 600px) { #promo1 {display: none ; margin:0; } #promo2 { margin:17% 0 0 0; } }

/**------------------------------------------------items---------------------------------------------------------**/

#backheader{
	width: 100%;
	height: 10%;
}
@media only screen and (max-width: 600px) { #backheader {width:100% ; height: 8% ; } }

#head {
	width:100%;
	height: auto ;
	text-align: center;
	margin:0 auto  ; 
	-ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
	background-color:rgb(235,235,240) ;
	position:fixed;
	z-index:10;
	border-bottom:1px solid rgb(200,200,200);
}
@media only screen and (max-width: 600px) { #head { height: 6%; margin:1% auto 2%; padding:1% 0 0;  } }

#address{
	width: 100%;
	height: auto;
    overflow: hidden;
	text-align:left;
	margin:0 auto ; 
	background-color:rgb(255, 255, 255) ;
	border-bottom: 1px solid rgb(225,225,225);
	padding:0 0 0.4% 2%;
	position:relative;
	display: inline-block;
}

#title{
	width: 100%;
	height: auto;
    overflow: hidden;
	text-align:center;
	margin:0 auto ; /*center-aligned*/
	padding:2% 0 0 ;
	position:relative;
	display: inline-block;
}

#total  {
    width: 100%;
    height:auto;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    text-align: center;
    margin: 6% auto ;
}
@media only screen and (max-width: 600px) { #total { margin:10% auto 2% ;  } }

#rowbox {
    width: 100%;
    height: auto;
	text-align: center;
    padding:0px 1%;
    margin:0 auto ;
    border-bottom: 1px solid gray;
}

#row {
    width: 100%;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    border-collapse: collapse;
    padding: 0 1% ;  
    text-align: center;
    margin: 7% auto 0 ;
    min-height: 74.5vh ;
}
@media only screen and (max-width: 600px) { #row {  margin: 15% auto 0 ; min-height: 73.5vh ; } }

/**------------------------------------------------box---------------------------------------------------------**/

#boxA{
	width: 22%;
	height: 25px ;
	text-align:center;
	display: inline-block;
	margin: 5px auto;
	position: relative;
	overflow: hidden; 
}
@media only screen and (max-width: 600px) { #boxA {width:23%; height:25px; margin:0 ;  } }

#boxB{
	width: 50%;
	height: 60%;
    overflow: hidden;
	text-align:center;
	margin:3% 0 ;
	float:left;
}
@media only screen and (max-width: 600px) { #boxB {width: 90% ; height:auto; margin: 2% 5%; } #img2 {width: 70% ; margin: 2% 5%; } }

@media only screen and (min-width: 600px) {
#box1 {
	width: 15%;
	height: 60% ;
    overflow: hidden;
	text-align:center;
	display: inline-block;
	margin: 1% ;
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
    background-color:black ;
	position: relative;
}
#box1:hover {
	height: 60% ;
	width:20%;
	cursor:pointer;
	text-align:center;
} }
@media only screen and (max-width: 600px) { 
#box1 {
    width:68%; 
    height:40%; 
    margin:5%  ;     
    overflow: hidden; 
    text-align:center; 
    display: inline-block;
    position: relative;
} }

#box2A {
    width:20%; 
    height:45%; 
    margin: 1% ;     
    text-align:center; 
    display: inline-block;
    position: relative;
    border:0.5px solid gray;
}
@media only screen and (max-width: 600px) { 
    #box2A { 
    width:68%; 
    height:35.4%; 
    margin: 5% ;    
} }

#box2 {
    width:20%; 
    height:55%; 
    margin: 3% 1% ;     
    text-align:center; 
    display: inline-block;
    position: relative;
    border:0.5px solid gray;
}
@media only screen and (max-width: 600px) { 
    #box2 { 
    width:68%; 
    height:40%; 
    margin: 5% 0 15% ;    
} }

#box3 {
	width:12%;
	height: 335px ;
	text-align:left;
	display: inline-block;
	margin: 1% ;
	position: relative;
	overflow: hidden; 
	border:0.5px solid gray;
	background-color:white;
}
@media only screen and (max-width: 600px) { #box3 { width:22%; height:220px; margin: 1% ; } }
#box33 {
	width:12%;
	height: 240px ;
	text-align:left;
	display: inline-block;
	margin: 1% ;
	position: relative;
	overflow: hidden; 
	border:0.5px solid gray;
	background-color:white;
}
@media only screen and (max-width: 600px) { #box33 { width:22%; height:150px; margin: 1% ; } }

#box4 {
	width:14%;
	height: 30px ;
	text-align:center;
	display: inline-block;
	margin: 0 auto ;
	position: relative;
	overflow: hidden; 
	border-bottom:0.5px solid rgb(200,200,200);
}
@media only screen and (max-width: 600px) { #box4 { width:11%; height:35px; margin: 1% ; } }

#box5 {
	width:8.5%;
	height: 50px ;
	text-align:center;
	display: inline-block;
	margin: 0 auto ;
	position: relative;
	overflow: hidden; 
	border-bottom:0.5px solid rgb(200,200,200);
}
#box5 img {
	width:30%;
	height: auto ;
	text-align:center;
	display: inline-block;
	margin: 0 auto ;
	position: relative;
	overflow: hidden; 
}
@media only screen and (max-width: 600px) { #box5 img { width:50%; } }

#box6 {
	width:20%;
	height: 30px ;
	text-align:center;
	display: inline-block;
	margin: 0 auto ;
	position: relative;
	overflow: hidden; 
	border-bottom:0.5px solid rgb(200,200,200);
}
@media only screen and (max-width: 600px) { #box6 { width:80%; height:20px; margin: 1% ; } }

/**--------------------------------------------h-------------------------------------------------------------**/

#hA{
    width:100%;
	font-size: 30px;
    font-family: Century Gothic ;
    src: url('Century Gothic.ttf')  format('truetype');
	list-style: none;
	color:rgb(50, 50, 50);
	letter-spacing: 2px;
	margin:0% auto 1% ;
	font-weight:normal;
	float:left;
}
#hA a span {
	display: inline-block;
	position: relative;
	transition: 0.2s;
	color:rgb(0, 0, 0);
  }
@media only screen and (max-width: 600px) { #hA {font-size: 16px; margin: 2% 0px 2% ; letter-spacing: 0; } }
#hB{
    display: inline-block;
	width: 100%;
	height:11%;
	list-style: none;
	font-size: 15px;
	color:white;
	margin: 0px;
	bottom: 11% ;
	font-weight:lighter;
	text-align:center;
    font-family: 'Louis George Café', sans-serif;
    letter-spacing:1px;
	padding:10px 10px;
	background-color: rgba(50,50,50,0.8) ;
	position: relative;
}
@media screen and (max-width: 600px) { 
#hB {
    font-size: 16px; 
    font-weight:normal; 
    letter-spacing:1px; 
    width: 100%; 
    height:auto; 
    padding: 10px; 
    margin: 0px; 
    bottom: 12% ;
} }
#h11{
    display: inline-block;
	width: 100%;
	height:15%;
	list-style: none;
	font-size: 15px;
	color:white;
	margin: 0px;
	bottom: 15% ;
	font-weight:lighter;
	text-align:center;
    font-family: 'Louis George Café', sans-serif;
    letter-spacing:1px;
	padding:10px 10px;
	background-color: rgba(50,50,50,0.8) ;
	position: relative;
}
@media screen and (max-width: 600px) { 
#h11 {
    font-size: 16px; 
    font-weight:normal; 
    letter-spacing:1px; 
    width: 100%; 
    height:auto; 
    padding: 10px; 
    margin: 0px; 
    bottom: 14% ;
} }
#h1{
    display: inline-block;
	width: 100%;
	height:13%;
	list-style: none;
	font-size: 15px;
	color:black;
	margin: 0px;
	bottom: -13% ;
	font-weight:lighter;
	text-align:center;
    font-family: 'Louis George Café', sans-serif;
    letter-spacing:1px;
	padding:10px 10px;
	background-color: rgba(200,200,200,0.3) ;
	position: absolute;
	border:1px solid rgb(200,200,200);
}
@media screen and (max-width: 600px) { 
#h1 {
    font-size: 16px; 
    font-weight:normal; 
    letter-spacing:1px; 
    width: 100%; 
    height:13%;
    padding: 8px; 
    margin: 0px; 
    bottom: -13% ;
} }


/**-----------------------------------------------p----------------------------------------------------------**/

#p1{
	display: block;
    width: 80%;
    height: auto;
    margin: 2% 10%;
    float:left;
	color:rgb(50, 50, 50);
	font-size: 18px;
    font-family: Century Gothic ;
    src: url('Century Gothic.ttf')  format('truetype');
	text-align: left;
	font-weight: normal;
	line-height: 160%;
	
}
@media only screen and (max-width: 600px) { #p1 {width: 95%; font-size: 14px; margin:2%; text-align: center; float:left; line-height: 130%; } }


/**---------------------------------------------------------------------------------------------------------**/

@media only screen and (min-width: 600px) {
#imgA {
  width: auto;
  height: 100%;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
  opacity:0.4;
} 
#imgA:hover{
  opacity:1;
} 
#img1 {
  width: 100%;
  height: 100%;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
}
#img1:hover {
	cursor:pointer;
	text-align:center;
	display: inline-block;
	position: relative;
	opacity: 0.5 ;
} }

@media only screen and (max-width: 600px) { 
#imgA {
  width: auto;
  height: 100%;
} 
#img1 {
  width: 100%;
  height: 100% ;
}}

#imgB {
	width: 100%;
	height:auto;
    display: inline-block;
	position: relative;
	margin: -10% 0 ;
}
@media only screen and (max-width: 600px) { #imgB {
	width: 90%;
	height:auto;
} }










#boxp {
	width: 22%;
	height: auto;
	text-align:center;
	display: inline-block;
	margin:  2%;
	position: relative;
	overflow: hidden; 
	background-color: white;
}
@media only screen and (max-width: 600px) { #boxp {width:60%; height:auto; margin:  2%; } }
#boxp img{
  display: block;
  width: 100%;
  height: auto;
  text-align:center;
  display: inline-block;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
#contact ,#design ,#about {
	width: 100%;
	height: auto;
    overflow: hidden;
	text-align:center;
	position:relative;
	background-color:rgb(255, 255, 255) ;
	background-repeat: repeat;
	padding:2% 0px 2% 0px;
	border-bottom: 1px solid rgb(225,225,225);
}
#boxD {
	width: 40%;
	height: auto;
    overflow: hidden;
	text-align:center;
	position:relative;
	float:left;
	margin: 0% 0% 0% 5%;
}
@media only screen and (max-width: 600px) { #boxD {width: 90% ; margin:  0%;} }
#boxD img{
	width: 60%;
	height:auto;
    display: inline-block;
	position: relative;
	margin: 2% ;
}
@media only screen and (max-width: 600px) { #boxD img {width: 70% ; margin: 2% 20%; } }

#order {
    height: 0%;
    width: 60%;
    position: fixed;
    z-index: 500;
    bottom: 5%;
    left:20%;
    background-color: rgba(255,255,255,1);
    transition: 1s;
    opacity:0;
    text-align:center;
    padding-top:2%;
    border: solid 3px gray;
}
#order .closebtn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 50px;
    color:gray;
    text-decoration: none;
    font-family:verdana;
}
#form {
	width: 100%;
	height: auto;
	overflow: hidden;
	text-align:center;
	margin:5% auto;
	float:left;
}




 
 
 
 
 
/**---------------------------------------------------------------------------------------------------------**/


#space {
    width: 100%;
    height:80px;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    margin: 0px ;
}

#boxW {
	width: 100%;
	height: auto;
    overflow: hidden;
	position:relative;
	margin:0 auto; /*center-aligned*/
	background-color:rgb(252, 252, 252) ;
	border-bottom: 1px solid rgb(225,225,225);
}
#boxWa {
	width: 16%;
	margin:1%;
	height: auto;
	text-align:center;
	position:relative;
	display: inline-block;
	background-color:rgb(240, 240, 240) ;
}
#boxWa img{
  margin: 0px;
  width: 100%;
  height: auto;
}
/**---------------------------------------------------------------------------------------------------------**/


/**---------------------------------------------------------------------------------------------------------**/

/**---------------------------------------------------------------------------------------------------------**/

/**---------------------------------------------------------------------------------------------------------**/
#box3a {
	width: 18%;
	height: 52%;
    overflow: hidden;
	text-align:center;
	display: inline-block;
	position: relative;
	margin: 1% 2%;
}
#box3a img{
  display: block;
  width: 100%;
  height: auto;
  text-align:center;
  display: inline-block;
  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
#box3a img:hover {
	width: 110%;
	height:auto;
	cursor:pointer;
	text-align:center;
	display: inline-block;
	margin: -6.7% -6.7% ;
	position: relative;
	opacity: 0.5 ;
}
@media only screen and (max-width: 600px) { #box3a {width:24%; height:auto; margin: 0 ; } }
@media only screen and (max-width: 600px) { #box33a {width:10%; height:auto; margin: 0 ; } }


/**---------------------------------------------------------------------------------------------------------**/
#box4a {
	width: 22%;
	height: auto ;
	text-align:center;
	display: inline-block;
	margin: 5px auto;
	position: relative;
	overflow: hidden; 
}
@media only screen and (max-width: 600px) { #box4a {width:auto; height:auto; margin:0 2%;  } }

#box4a img{
  display: block;
  width: 100%;
  height: auto;
  text-align:center;
  display: inline-block;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
#box4a img:hover {
	cursor:pointer;
	text-align:center;
	display: inline-block;
	position: relative;
	opacity: 0.3 ;
}


#box7 {
	width:14%;
	height: 30px ;
	text-align:center;
	display: inline-block;
	margin: 0 auto ;
	position: relative;
	overflow: hidden; 
	border-bottom:0.5px solid rgb(200,200,200);
}
@media only screen and (max-width: 600px) { #box7 { width:11%; height:35px; margin: 1% ; } }
#pimg{
  display: block;
  width: 10%;
  height: auto;
  text-align:center;
  display: inline-block;
  margin: 0 5px ;
}
@media only screen and (max-width: 600px) { #pimg { width:11% ; margin: 0 2px ; } }
#fimg{
  display: block;
  width: 100%;
  height: auto;
  text-align:center;
  display: inline-block;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}


#box5a {
	width:13%;
	height: auto;
	text-align:center;
	display: inline-block;
	margin: 5% 0 2% ;
	position: relative;
	overflow: hidden; 
}
#box5a img{
  display: block;
  width: 20%;
  height: auto;
  text-align:center;
  display: inline-block;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
@media only screen and (max-width: 600px) { #box5a img { width:50% ;} }


/**---------------------------------------------------------------------------------------------------------**/

#title1 {
	width:50%;
	height:auto;
    text-align: center;
    display: inline-block;
    margin:2%;
	border: 2px solid rgb(120,120,120);
	border-radius: 30px ;
	transition: 0.2s;
}
@media only screen and (max-width: 600px) { #title1 {width: 80% ; height:6%; margin:2% 15%; } }

#title1:hover {
	background-color: rgb(230, 230, 230);
	cursor: pointer;
	
}

/**------------------------------------------------hhhhhhhhhhhh---------------------------------------------------------**/



#h3{
    width:100%;
	font-size: 15px;
    font-family: Trebuchet MS ;
    src: url('Trebuchet MS.ttf')  format('truetype');
	list-style: none;
	color:rgb(50, 50, 50);
	text-align:center;
	font-weight:normal;
}
@media only screen and (max-width: 600px) { #h3 {font-size: 14px; height:50px; } }
#h3 a span {
  display: inline-block;
  position: relative;
  transition: 0.2s;
  color:rgb(0, 0, 0);
  

}
#h3 a:hover span {
  color:rgb(100,100,100);
  cursor: pointer;
}

#h4{
	width: auto;
	font-size: 16px;
    font-family: Trebuchet MS ;
    src: url('Trebuchet MS.ttf')  format('truetype');
	list-style: none;
	line-height: 200%;
	color:white;
	margin: 0 auto;
	font-weight:normal;
	text-align:center;
	text-decoration: none;
}
@media only screen and (max-width: 600px) { #h4 {  font-size: 14px; } }
#h4 a span {
  display: inline-block;
  position: relative;
  transition: 0.2s;
  color:white;
  list-style: none;
}
@media only screen and (max-width: 600px) { #h4 a span { width: 100%; font-size: 10px; margin: 0 ; } }
#h5{
	width: 100%;
	font-size: 16px;
    font-family: Trebuchet MS ;
    src: url('Trebuchet MS.ttf')  format('truetype');
	list-style: none;
	line-height: 200%;
	color:rgb(50, 50, 50);
	letter-spacing: 2px;
	margin:5% 0px 0px 20%;
	font-weight:normal;
	display: inline-block;
	position: relative;
}
@media only screen and (max-width: 600px) { #h5 {font-size: 15px; margin:5% 0px 0px 20%; } }
#h6{
	list-style: none;
	font-weight:normal;
	font-family: 'verdana';
	text-align: center;
	text-decoration: none;
	color:white;
}
#h6 a span {
  display: inline-block;
  position: relative;
  font-size: 10px;
  margin: 7px auto ;
  cursor: pointer;
  text-align:center;
  color:white;
  list-style: none;
}
@media only screen and (min-width: 600px) { #h6 a span { font-size: 13px; margin:3px auto ; } }

#h7{
	list-style: none;
	font-weight:normal;
	font-family: 'verdana';
	text-align: center;
	text-decoration: none;
	color:black;
}
#h7 a span {
  display: inline-block;
  position: relative;
  font-size: 10px;
  margin: 7px auto ;
  cursor: pointer;
  text-align:center;
  color:black;
  list-style: none;
}
@media only screen and (min-width: 600px) { #h7 a span { font-size: 13px; margin:3px auto ; } }

#h8{
	list-style: none;
	font-weight:normal;
	font-family: 'verdana';
	text-align: center;
	text-decoration: none;
	color:black;
}
#h8 a span {
  display: inline-block;
  position: relative;
  font-size: 10px;
  margin: 0 auto ;
  cursor: pointer;
  text-align:center;
  color:black;
  list-style: none;
}
@media only screen and (min-width: 600px) { #h8 a span { font-size: 13px; margin:3px auto ; } }

/**--------------------------------------------------------------------------------------------------------**/

#p2{
	display: block;
    width: 30%;
    height: auto;
    margin: 1% 0px 0px 0px;
    float:left;
	color:rgb(50, 50, 50);
	font-size: 18px;
    font-family: Century Gothic ;
    src: url('Century Gothic.ttf')  format('truetype');
	text-align: center;
	padding-left: 2%;
}
#p3{
	display: block;
    width: 50%;
    height: auto;
    margin: 2% 0px 0px 0px;
	float:left;
	text-align: left;
	color:rgb(50, 50, 50);
	font-size-adjust: 0.6;
    font-family: Century Gothic ;
    src: url('Century Gothic.ttf')  format('truetype');
}
#p4{
	display: block;
    width: 100%;
    height: auto;
    margin: 4% 0px 0px 0px;
    float:left;
	color:rgb(50, 50, 50);
	font-size-adjust: 0.6;
    font-family: Century Gothic ;
    src: url('Century Gothic.ttf')  format('truetype');
}
#p5{
	display: block;
    height: auto;
    margin: 1px 0px 0px 38%;
    float:left;
	color:rgb(50, 50, 50);
	font-size: 12px ;
	font-family: 'Verdana';
	text-align: left;
}
@media only screen and (max-width: 600px) { #p5 {font-size: 9px; margin: 1% 0px 0px 20%; } }
#p6{
	display: block;
    width: 95%;
    height: auto;
    margin: 1% 0px 0px 0%;
    float:left;
	color:rgb(50, 50, 50);
	font-size: 12px;
    font-family: Century Gothic ;
    src: url('Century Gothic.ttf')  format('truetype');
	text-align: left;
	font-weight: normal;
	line-height: 120%;
}
#p7{
    width: 85%;
    height: auto;
    margin: 5px auto;
	color:white;
	font-size: 14px;
    font-family: Century Gothic ;
    src: url('Century Gothic.ttf')  format('truetype');
	text-align: center;
	font-weight: normal;
}
@media only screen and (max-width: 600px) { #p7 {font-size: 10px;margin: 0 auto 5px; } }
/**---------------------------------------------------------------------------------------------------------**/



#footer {
	width: 100%;
	height: 20px;
	overflow: hidden;
	text-align:center;
    background-color:rgb(240,240,240);
	border-bottom: 1px solid rgb(225,225,225);
	margin:0 auto;
    background-repeat: repeat;
}
#fbox {
	float:left;
	width: auto;
	height: auto;
    text-align:center;
    position: relative;
    margin:0px 0px 0px 43%;
    border:1px solid gray;
}
@media only screen and (max-width: 600px) { #fbox {width: 50%; margin:0px 0px 0px 25%; } }
.smedia{
	float:left;
	width:35%;
	height:auto;
	padding:2px;
}
@media only screen and (max-width: 600px) {.smedia { width:12%; } }
#copyright {
	width:100%;
	height: 4%;
	margin:0 auto;
	font-size-adjust: 0.4;
	font-family: verdana, Helvetica, sans-serif;
	background-color: rgb(230, 230, 230);
	font-weight:normal;
	float: left;
}
@media only screen and (max-width: 600px) { #copyright {height: 3%; font-size:10px;} }
/**---------------------------------------------------------------------------------------------------------**/
#add {
	width: auto;
	height: 25px ;
	text-align: center;
	border-radius: 20px;
    border: 1px solid rgb(150,150,150);
    margin:5% 5% 5% 20%;
    float:left;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    padding: 3px 20px ;
    background-color: rgb(240, 240, 240);
}
@media only screen and (min-width: 600px) { #add {height: 40px;  } }
.white   { color:white; }
.red   { color:rgb(200,50,50); }
.blue  { color:rgb(50,150,200); }
.green { color:rgb(50,150,50); }
.gray  { color:rgb(100,100,100); }
.wblue  { color:rgb(130,200,255); }
.backnone  { background-color:rgb(30,30,32) ; border: none;}

.btn-add {
    float:left;
    background-color:rgb(50,150,200);
    border-radius: 50px;
    margin:1% 5%;
}
.overlay {
     width:80%;
    height:auto;
    margin:0 7%;
   font:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
   border-radius:10px;
   border:2px solid #ccc;
   padding:30px 10px 25px;
   text-align: center ;
   background-color:rgb(250,250,250) ;
   bottom:20%;
  position: fixed;
  z-index: 150;
  display: none;
}
.closebtn {
    position: absolute;
    top:5px;
    left:10px;
    font-size: 40px;
    color:gray;
    text-decoration: none;
    font-family:verdana;
}
input[type=text], input[type=password], textarea, file, select {
    width: 90%;
    height:25px;
    padding: 0px 0;
    border: 1px solid #ccc;
    resize: vertical;
    margin:2% 5% ; 
    text-align: center;
    font-family: 'Verdana';
    font-size: 12px;
    background-color:white;
    border:1px solid gray;
}
@media only screen and (max-width: 600px) { 
    #filter ,#search { width: 150px; height:25px; font-size: 10px; margin:0 auto ;color:white;background-color:rgba(255,255,255,0); border:1px solid white;   } }
    #filter option { color:black; background-color:white; } 
@media only screen and (min-width: 600px) { 
    #filter ,#search { width: 200px; height:25px; font-size: 12px; margin:0 auto ;color:white; background-color:rgba(255,255,255,0); border:1px solid white;  } }
    
@media only screen and (max-width: 600px) { 
    #filter2 ,#search2 { width: 90px; height:22px; font-size: 10px; margin:3px auto ;background-color:rgba(255,255,255,0);   } }
@media only screen and (min-width: 600px) { 
    #filter2 ,#search2 { width: 200px; height:25px; font-size: 12px; margin:0 auto ; background-color:rgba(255,255,255,0);  }
    #filter2 option { color:black; background-color:white; border-radius:0; } }

input[type=submit] {
    width: 50%;
    background-color: white;
    color: white;
    cursor: pointer;
    font-family: 'Verdana';
    font-size: 30px;
    float:left;
    padding:0;
    margin:6px 0 0 0;
}

input[class=delete] {
    width: 90%;
    background-color: rgb(200,0,0);
    color: white;
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    margin:3% auto ;
    font-family: 'Verdana';
    font-size: 40px;
}
input[class=edit] {
    width: 90%;
    background-color: rgb(100,100,100);
    color: white;
    padding: 5px 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer15;
    margin:3% 8% ;
    font-family: 'Verdana';
    font-size: 15px;
}
@media only screen and (min-width: 600px) { input[class=edit],input[type=password] { width:80% ; height:30px; margin:3% 10% ; } }