@font-face {
    font-family: 'Yekan';
    src: url('fonts/Yekan.eot?#') format('eot'), url('fonts/Yekan.woff') format('woff'), url('fonts/Yekan.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}
.body {
    width: 99%;
    font-family:'Yekan';
    font-size: 60px;
    cursor:auto;
    direction:rtl
}
.header{
    width: 100%;
}
.header h1 {
    display: inline;
    padding:0px;
    margin:0px;
    font-size:0.7em;
    color: #009999;
    text-align: right;
    vertical-align: top;
}
.header h2 {
    padding-right:120px;
    margin:0px;
    font-size:0.4em;
    color: #009999;
    text-align: right;
    vertical-align: top;
}
.menu{
    font-size:0.4em;
    color: #009999;
    text-align: left;
}
.menu ul li {
    display: inline-block;
    padding-right:15px;
    padding-left:15px;
}
.menu ul li:hover {
    background: #009999;
    color:white;
}
.topImage{
    width: 100%;
    height: 4em;
    overflow: hidden;
    position: relative;
    border-top: solid;
    border-bottom: solid;
    border-color: #009999;
    border-width: 0.4em;
    text-align: center;
}

.Slides {  
    display: none;
    opacity: 1;
    position: absolute;
    top: 0px; 
    left:2%;
    font-size:0.5em;
    color: #009999;
    background-color: white;
        width: 100%;
}
.Slides img{
    max-width: 100%;
    height: auto;
object-fit: contain;
}
.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}
}
.topImage h2 {  
    opacity: 1;
    position: absolute;
    transform: translateX(0px);
    top: 30px; 
    left:60%;
    font-size:0.5em;
    color: #009999;
    background-color: white;
    padding: 20px;
    animation-name: example;
    animation-duration: 1s;
    animation-timing-function: ease-in;
}
@keyframes example {
    from {opacity: 0} 
    to {opacity: 1}

}
#responsive-image {  width: 100%;  height: 30%; } 
#responsive-image1 {  width: 100%;  height: 100%; } 
.introducdtion {
    font-family:'Yekan';
    width:100%;
}
.introducdtion h1{
    position: relative;
    text-align:center;
    font-size:0.5em;
    color:#009999;
}
.introducdtion p{
    background-color:white;
    color:black;
    margin-left:10%;
    margin-right:10%;
    text-align:right;
    float:left;
    font-size:0.4em;
    padding: 10px;
    text-align:justify;
    direction:rtl;
}
.capability {
    font-family:'Yekan';
    width:100%;
}

.capability h1{
    position: relative;
    text-align:center;
    font-size:0.5em;
    color:#009999;
}
.capability table tr td{
    width: 50%;
    padding-left: 3%;
}
.capability table tr td h1{
    font-size:0.5em;
    text-align:center;
}
.capability table tr td p{
    font-size:0.4em;
    text-align: center;
}
.capability table tr td h2{
    font-size:0.35em;
    text-align: center;
    color: #009999;
    cursor: pointer;
    padding: 10px;
}

.capability table tr td h2:hover {
    background-color: #009999;
    color:white;
}
.capability table tr td div {

    animation-name: fade-in;
    animation-duration: 1s;
    animation-timing-function: ease-in;
}

.capability table tr td div p{
    font-size:0.35em;
    text-align: right;
    padding: 0px;
}
.capability table tr td div li{
    font-size:0.35emx;
    text-align: justify;
    padding: 0px;
}
.capability table tr td div div table {
    border: 5px solid #009999;
}
.hide{
    display: none;
    transform: scaleY(0); 
    transform-origin: top;
    transition: transform 0.26s ease;
}
.show{
    display: block;
    transform: scaleY(1); 
    transform-origin: top;
    transition: transform 0.26s ease;
}
@keyframes fade-in {
    from   {transform: scaleY(0); }
    to  {transform: scaleY(1); }

}
@keyframes fade-out {
    from   {transform: scaleY(1); }
    to  {transform: scaleY(0); }

}
.Production {
    font-family:'Yekan';
    width:100%;
}

.Production h1{
    position: relative;
    text-align:center;
    font-size:0.5em;
    color:#009999;
}
.Production table tr td{
    width: 50%;
    padding-left: 3%;
}
.Production table tr td h1{
    font-size:0.5em;
    text-align:center;
}
.Production table tr td p{
    font-size:0.2em;
    text-align: center;
}

.close {
    position: absolute;
    opacity: 0.3;
    color: black;
}

.close:hover {
    opacity: 1;
    color: #009999;
}

.close:before, .close:after {
    position: absolute;
    left: 1em;
    top: 0.15em;
    content: ' ';
    height: 1em;
    width: 2px;
}

.close:before {
    transform: rotate(45deg);
}

.close:after {
    transform: rotate(-45deg);
}

.animateImgLeft{
    animation-name: animateImgLeft;
    animation-duration: 1s;
    animation-timing-function: ease-in;
}
@keyframes animateImgLeft {
    from   {transform: translateX(-150%);}
    to  {transform: translateX(0px);}

}
.animateImgRight{
    animation-name: animateImgRight;
    animation-duration: 1s;
    animation-timing-function: ease-in;
}
@keyframes animateImgRight {
    from   {transform: translateX(150%);}
    to  {transform: translateX(0px);}

}
/* inViewport */
.hidden {
    opacity: 0;
}
.address{
    background-color: #009999;
    color: white;
}
.address table tr td div a{
    font-size: 0.3em;
    vertical-align:middle;
    text-decoration: none;
    color: white;
}
.introducdtion li {
    background-color:#009999;
    color:black;
    text-align:right;
    float:right;
    font-family:'Yekan';
}
.introducdtion table{
    direction:ltr;
    width:100%;
    border: 1px solid black;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}
.introducdtion table tr{
    border: 1px solid black;
    border-collapse: collapse;
}
.introducdtion table th{
    background-color:rgb(0,0,150);
    color:white;
    width: 150px;
    border: 1px solid black;
    border-collapse: collapse;
    text-align:center;
    font-family: Times New Roman;
    padding: 3px;
}
.introducdtion table td{
    width: 2.5em;
    border: 1px solid black;
    border-collapse: collapse;
    text-align:center;
    font-family: Times New Roman;
    padding: 3px;
}
.footer {
    background-color:#99ffff;
    color:black;
    clear:both;
    text-align:center;
    padding:5px;	 
    font-size: 0.2em;
}

.Button {

}

#buttonExpireDate {

}
.panelDescription{
    font-family:'Yekan';
}
.panelDescription table tr td li{
    font-size: 0.3em;
}
.button {
    font-family:'Yekan';
    text-align:center;
    padding:5px;	 
    font-size: 0.3em;
}
.button:hover {
    background-color:#009999;
    color: white;
}
.MainBody {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    min-height: 2em;
    direction: rtl;
}

.MainBody h2 {
    font-size: 0.8em;
    color: #009999;
}

.MainBody h3 {
    font-size: 0.6em;
    color: #009999;
}
.container {
}

.container input, .container select {
    font-size: 0.6em;
    padding: 0.2em;
    margin-bottom: 1em;
    box-sizing: border-box;
    box-shadow: none;
    outline: none;
    border: none;
    border-bottom: 2px solid #999;
    text-align: center;
    width: 100%;
    color: gray;
    text-align-last: center;
    font-family:'Yekan';
    direction: rtl;
}

.container label {
    font-size: 0.6em;
    position: relative;
    bottom: 3.3em;
    pointer-events: none;
    right: 0;
    transition: .5s;
    text-align: right;
}

.container label a {
    font-size: 1.2em;
    bottom: 0.5em;
    color: #009999;
}

.container input:focus ~ label,
.container input:valid ~ label,
.container input:disabled ~ label,
.container select:focus ~ label,
.container select:valid ~ label {
    right: 0;
    bottom: 4.9em;
    color: #009999;
}

.container input:focus,
.container input:valid,
.container input:disabled {
    border-bottom: 2px solid rgb(66,133,244);
    color: gray;
}

.container input:hover {
    background-color: #e6f0ff;
}

.container a {
    position: relative;
    bottom: 3.3em;
    font-size: 0.5em;
    pointer-events: none;
    right: 0;
    transition: .5s;
    color: #009999;
    text-align: left;
}
.Label {
    font-size: 0.5em;
}
.Button {
    background-color: #009999;
    color: white;
    font-size: 0.5em;
    margin: 0.5%;
    padding: 5px;
    border-radius: 6px;
    border-width: 1px;
    width: 100%;
    white-space: normal;
    font-family:'Yekan';
}
.Button:hover,
.Button:focus {
    background-color: lightgray;
    color:black ;
}
.TextBox {
    font-size: 0.5em;
    background-color: white;
    border-color: gray;
    border-style: groove;
    border-width: 1px;
    margin: 5px;
    padding: 5px;
    border-radius: 6px;
    text-align: center;
    font-family:'Yekan';
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    overflow:hidden;
}
.TextBox:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    background-color: #ffffcc;
    color: black;
}
/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}
@media only screen and (max-width: 900px) {
    .body {
        font-size: 45px;
    }
}

@media only screen and (max-width: 600px) {
    .body {
        font-size: 30px;
    }
}

@media only screen and (max-width: 300px) {
    .body {
        font-size: 15px;
    }
}