.packImg{
    width: 75%;
    height: auto;
    border-radius: 30px;
    box-shadow: 0px 0px 25px -5px black;
}


.article{
    padding: 25px;
    margin: 50px;
    direction: rtl;
    border-style: solid;
    border-width: 2px;
    border-color: #ddd;
    background-color: #eee;
    border-radius: 15px;
}
p{
    direction: rtl;
    font-size: 18px;
}

.textbox{
    border-style: solid;
    border-width: 2px;
    border-color: #0000FF;
    background-color: #00FFFF;
    border-radius: 15px;
    padding: 25px;
    margin: 20px;
    direction: rtl;
}

img{
	alt: "موبایل بارون";
}

* {box-sizing: border-box;
    margin:0;
padding:0;
}
body{
	font-family: Vazir, Verdana, sans-serif;
	background: #FFFFFF;
}
.moreLink{
  text-decoration: none;
  outline: none;
  color: #00ddff;
  background: none;
}

.moreLink:hover{
    color: #00bbdd;
}


.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  width:auto;
  height:auto;
  max-width: 100%;
  max-height: 20%;
  
 
   position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.9s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
   animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 10px}
}
.img_slider {width: 100%; height:20%;}




*,*::after,*::before{
   box-sizing: border-box;
}

.menu-btn {
   font-size: 16px;
   display: inline-block;
   text-align: center;
   background-color: #017575;
   color: white;
   padding: 20px;
   font-weight: bold;
 font-family:vazir-font@26, sahel-font@v3,samim-font@v4,shabnam-font@v5,tanha-font@v0,nahid-font@v0, Tahoma, Geneva, sans-serif;  
  border: none;
   width: 100%;
}
.dropdown-menu {
   position: relative;
   display: inline-block;
   font-weight: bold;
   font-family:vazir-font@26, sahel-font@v3,samim-font@v4,shabnam-font@v5,tanha-font@v0,nahid-font@v0, Tahoma, Geneva, sans-serif;
   font-size: 16px;

}
.menu-content {
   display: none;
   position: absolute;
   width: 100%;
   background-color: #017575;
   min-width: 160px;
   z-index: 1;
}
nav{
   background-color: #017575;
   font-family:vazir-font@26, sahel-font@v3,samim-font@v4,shabnam-font@v5,tanha-font@v0,nahid-font@v0, Tahoma, Geneva, sans-serif;

   padding-left:20px;
   padding-right:10px;
   width: 100%;
}
.links,.links-hidden{
   display: inline-block;
   color: rgb(255, 255, 255);
   text-decoration: none;
   font-size: 16px;
   font-weight: bold;
   font-family:vazir-font@26, sahel-font@v3,samim-font@v4,shabnam-font@v5,tanha-font@v0,nahid-font@v0, Tahoma, Geneva, sans-serif;
   padding: 20px;
}
.links-hidden:hover,.links:hover {
   background-color: rgb(8, 107, 46);
}
.dropdown-menu:hover .menu-content {
   display: block;
}
.dropdown-menu:hover .menu-btn {
   background-color: #3e8e41;
}
.hamburger {
   color: red;
   font-weight: bolder;
   font-size:30px;
   display: none;
}
@media screen and (max-width: 880px) {
      nav a:not(:first-child) {
      display: none;
   }
   nav a.hamburger {
      float: right;
      display: block;
      padding: 12px;
	  color: red;
   }
}
   .dropdown-menu{
      display: none;
   }
   nav.openNav a.hamburger {
      position: relative;
	  color: red;
   }
   nav.openNav a {
      float: none;
      display: block;
      text-align: center;
   }

nav.openNav div.dropdown-menu{
   display: block;
   width: 100%;
}




	#gallery_porfroosh { 
		max-width: 100%;
		margin: auto;
		background: #eee;
		border: 0px solid black;
		padding: 5px;
	}
	
	* {
	    box-sizing: border-box;
	}
	.container_porfroosh {
		width: 100%;
		padding-right: 15px;
		padding-left: 15px;
		margin-right: auto;
		margin-left: auto;
	}
	.row::after {
	    content: "";
	    clear: both;
	    display: table;
	}
	[class*="col-"] {
	    float: left;
	    padding: 15px;
	    width: 100%;
	}

	/* For Mobile: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;
        text-align: center;
    }
	
	@media (min-width: 768px) {
	    /* For desktop: */
	    .col-md-1 {width: 8.33%;}
	    .col-md-2 {width: 16.66%;}
	    .col-md-3 {width: 25%;}
	    .col-md-4 {width: 33.33%;}
	    .col-md-5 {width: 41.66%;}
	    .col-md-6 {width: 50%;}
	    .col-md-7 {width: 58.33%;}
	    .col-md-8 {width: 66.66%;}
	    .col-md-9 {width: 75%;}
	    .col-md-10 {width: 83.33%;}
	    .col-md-11 {width: 91.66%;}
	    .col-md-12 {width: 100%;}
	}

	.image_por_{
		max-width: 100%;
		width: 160px;
		height: 212px;
	}
	.image_por_:hover{
		opacity:0.7;
		border-radius:20px;
	}
	.image_por{
		max-width: 100%;
		width: 244px;
		height: auto;
	}
	.image_por:hover{
		opacity:0.7;
		border-radius:20px;
	}

	.columntop {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.rowtop:after {
  content: "";
  display: table;
  clear: both;
}

.respic {
 width: 70px;
 height: 128px;
 height:auto;
}

.link{
	text-decoration:none;
	color:black;
	}
	
	
	
	
	
	
/* Full-width input fields */
input[type=text], input[type=password] , input[type=email] {
  width: 100%;
  padding: 10px 10px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
button {
  background-color: #04AA6D;
  color: white;
  padding: 10px 10px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 2% auto 2% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
}

.logo_top_form{
	display: block;
	margin-left: auto;
	margin-right: auto;
  width: 25%;
	}
	
/* Add Zoom Animation
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
} */

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
}

.not_found{
  color:red;
  font-weight:bold;
  text-align:right;
  padding:5px;
  margin:5px;
  font-family: Vazir, Verdana, sans-serif;
}

::placeholder {
  text-align:right;
  font-family: Vazir, Verdana, sans-serif;
}