html{
  scroll-behavior: smooth;
}

body {
height: 100%;         /* IMPORTANT */
}


#BGTable { 
width: 1100px;
background: url('../../IMG/BckBG-4.png');
-webkit-transition: height 1s;
transition: height 1s;
overflow: auto;      /* IMPORTANT */
overflow-x: hidden;  /* IMPORTANT */
overflow-y: hidden
}


#IconLocation {
  position: relative;
  font-size: 45px;
  display: block;
  margin: 0 auto;
  float: none;
  text-align: center;
  margin-top: 10px;
 -webkit-animation: MoveBackTop 0.3s;
 -webkit-animation-fill-mode: forwards;
  animation: MoveBackTop 0.3s;
  animation-fill-mode: forwards;
  transition: all 0.2s ease-in-out;
  transform: scale(1);
}

.screen-reader-text{
  position: relative;
  font-family: 'Eng1' , 'IranSans-Light';
  font-size: 14x;
  display: block;
  margin: 0 auto;
  float: none;
  text-align: center;
  margin-top: -2px;
 -webkit-animation: MoveBackBottom 0.3s;
 -webkit-animation-fill-mode: forwards;
  animation: MoveBackBottom 0.3s;
  animation-fill-mode: forwards;
}

.nav {
  text-align: center;
  display: inline-block;
  list-style-type: none;
  direction: rtl;   /* IMPORTANT */
  padding: 130px 0px 0px 0px;
}

.nav li {
  position: relative;
  display: inline-block;
  margin-right: -4px;
  padding: 0px 0px 70px 0px;
  float: center;   /* IMPORTANT */
  z-index: 1;  /* IMPORTANT */
}

.nav li:before {
  content: "";
  display: block;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #fff;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: -1;  /* IMPORTANT */
  margin: -30px 0px 0px 0px;

}

.nav a:link, .nav a:visited {
  display: block;
  text-decoration: none;
  background: url('../../IMG/BckBG-3.png'); 
  color: #7e7e7e;
  margin: 0px 36px;
  width: 100px;
  height: 100px;
  position: relative;
  text-align: center;
  border-radius: 5%;
  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
  border: 1px solid transparent;
}

.nav a:before {
  position: absolute;
  content: "";
  display: block;
  background: url('../../IMG/BckBG-3.png'); 
  border-top: 2px solid #ddd;
  top: -18px;
  left: -18px;
  bottom: -18px;
  right: -18px;
  border-radius: 5%;
  box-shadow: inset 0px 8px 48px #ddd;
  outline: none;
  z-index: -1
}



.nav a:hover {
  text-decoration: none;
  color: #a2bc38;
}
.nav a:hover  #IconLocation {
 -webkit-filter: blur(1px);
  filter: blur(1px);
  opacity: 0.05;
  transition: opacity 500ms;
 -webkit-animation: MoveDown 0.3s;
 -webkit-animation-fill-mode: forwards;
  animation: MoveDown 0.3s;
  animation-fill-mode: forwards;
  transition: all 0.2s ease-in-out;
  transform: scale(1.8);
}
.nav a:hover  .screen-reader-text {
 -webkit-animation: MoveUp 0.3s;
 -webkit-animation-fill-mode: forwards;
  animation: MoveUp 0.3s;
  animation-fill-mode: forwards;
  transition: all 0.2s ease-in-out;
  transform: scale(1);
}


.nav a:active {
  border: 1px solid #dddddd;
  box-shadow: inset 2px 2px 2px 1px rgba(0,0,0,0.2);
  outline: none;
  background: url('../../IMG/BckBG-3.png');
  color: #505326;
 -webkit-filter: none;
  filter: none;
  opacity: 1;
  transition: opacity 500ms
}
.nav a:active #IconLocation{
 -webkit-filter: none;
  filter: none;
  opacity: 1;
  transition: opacity 500ms;
  transition: all 0.1s ease-in-out;
  transform: scale(1);
}
.nav a:active .screen-reader-text{
  opacity: 0;
  transition: opacity 500ms;
}





@-webkit-keyframes MoveBackTop {
    from {top: 20px;}
    to {top: 0px;}
}
@keyframes MoveBackTop {
    from {top: 20px;}
    to {top: 0px;}
}


@-webkit-keyframes MoveBackBottom {
    from {top: -35px;}
    to {top: 0px;}
}
@keyframes MoveBackBottom {
    from {top: -35px;}
    to {top: 0px;}
}


@-webkit-keyframes MoveUp {
    from {top: 0px;}
    to {top: -30px;}
}
@keyframes MoveUp {
    from {top: 0px;}
    to {top: -30px;}
}


@-webkit-keyframes MoveDown {
    from {top: 0px;}
    to {top: 22px;}
}
@keyframes MoveDown {
    from {top: 0px;}
    to {top: 22px;}
}





#nom1,
#nom2,
#nom3,
#nom4,
#nom5,
#nom6{
  transition: opacity 1000ms,visibility 1500ms;
}


#Capability,
#ProgramImages,
#DownloadAV,
#BuyLic,
#HelpPDF,
#OfflineUpdate{
background: url('../../IMG/BckBG-4.png');
z-index: 0
}


.panel{
    width: 950px;
    height: auto;
    z-index: -2; 
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
	display: block;
	position: relative;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 0;
	*border: 1px solid red;
}

.panel h1 {
	display: block;
	position: relative;
    color: #0090ff;
    font-family: 'Eng4' , 'IranSans-Light';
    font-size: 17px;
    text-align: right;
    direction: rtl;
    padding: 0px 60px 30px 0px;
    margin-top: -75px;
}

.panel a,
.panel p {
	margin: 0px;
    color: #000;
    font-family: 'IranSans-Light';
    font-size: 17px;
    text-align: justify;
    direction: rtl;
    line-height: 40px;
}


#IconBodyPosition{
	display: block;
    color: #4a4a4a;
    font-size: 40px;
    text-align: right;
    direction: rtl;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;
}




/* SLIDING */

a#Capability:target ~ #main article.panel{
    -webkit-transform: translateY( 0px);
    transform: translateY( 0px );
}
a#ProgramImages:target ~ #main article.panel {
    -webkit-transform: translateY( -662px );
    transform: translateY( -662px );
}
a#DownloadAV:target ~ #main article.panel {
    -webkit-transform: translateY( -1495px );
    transform: translateY( -1495px );
}
a#BuyLic:target ~ #main article.panel {
    -webkit-transform: translateY( -2190px );
    transform: translateY( -2190px );
}
a#HelpPDF:target ~ #main article.panel {
    -webkit-transform: translateY( -3480px );
    transform: translateY( -3480px );
}
a#OfflineUpdate:target ~ #main article.panel {
    -webkit-transform: translateY( -4320px );
    transform: translateY( -4320px );
}


.WinIcon {
    font-family: 'Eng2';
    font-size: 17px;
    text-align: center;
    direction: ltr;
    margin: 60px 0px 50px 0px;
}

p.Notify{
    font-family: 'IranSans-Light';
    font-size: 17px;
    color: #0887f3;
    direction: rtl;
    text-align: center;
    margin: 0;
    padding: 0;
    margin-top: 50px;
   -webkit-animation: fadein 1s;
   -moz-animation: fadein 1s;
   -ms-animation: fadein 1s;
   -o-animation: fadein 1s;
    animation: fadein 1s;
}

.ZipPass {
    text-align: center;
    font-family: 'IranSans-Light';
    font-size: 17px;
    color: #ff6600;
    direction: rtl;
	-ms-animation: wiggle 2s linear infinite;
	-moz-animation: wiggle 2s linear infinite;
	-webkit-animation: wiggle 2s linear infinite;
	animation: wiggle 2s linear infinite;
	margin-top: -40px;
}
.VersionNumber {
    text-align: center;
    font-family: 'Eng2' , 'IranSans-Light';
    font-size: 30px;
    color: #3d3d3d;
    direction: ltr;
}





.Catalog {
	margin-top: 30px;
}
.Help-table {
	width: 475px;
	height: 475px;
	align: center;
	text-align: center;
}
.Help-table p {
	font-family: 'IranSans-Light';
    font-size: 17px;
    color: #2f2f2f;
    direction: rtl;
    text-align: center;
}
.Help-Catalog img {
	margin-top: 20px;
}
.Icon-Table img{
	position: absolute;
    margin-top: 0px;
}
.Icon-Table div {
	margin-right: 20px;
	margin-top: -10px;
}
.Icon-Table a{
	display: inline-block;
	font-family: 'IranSans-Light';
    font-size: 17px;
    color: #0096ff;
    direction: rtl;
    padding-right: 5px;
}

/* HORIZONTAL LINE */
hr.style10 {
	width: 900px;
	border-top: 1px dotted #e4e4e4;
	border-bottom: 1px dashed #d1d1d1;
}
/* DASHED EMPTY BOX */
.blank-box{
width: 300px;
height: 350px;
border: 10px dashed #f1f1f1;
display: block;
margin: 0 auto;
margin-top: 20px;
}



.Text-Offline p {
	font-family: 'IranSans-Light';
    font-size: 17px;
    color: #164864;
    direction: rtl;
}
.last-update {
  font-family: 'IranSans-Light';
  font-size: 14x;
  text-align: center;
  direction: rtl;
  color: #444444;
  margin: 30px 0px 20px 0px;
}
.every-update {
  font-family: 'IranSans-Light';
  font-size: 18px;
  text-align: center;
  direction: rtl;
  color: #557e3a;
  margin-top: 50px;
}
.shadow{
  font-family: Eng4;
  color: #2d2d2d;
  font-size: 100px;
  text-align:center;
  text-shadow: 0 -3px 0 #333,
    0 6px 8px rgba(0,0,0,.4),
    0 9px 10px rgba(0,0,0,.15),
    0 30px 10px rgba(0,0,0,.18),
    0 15px 10px rgba(0,0,0,.21);
}

.depth-text {
    margin: 0 auto;
    display: block;
    color: #6e6e6e;
    font-size: 23px;
    font-family:  Eng4;
    position: relative;
    text-transform:uppercase;
    direction: ltr;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 25px;
}
.depth-text:before,
.depth-text:after {
    content: attr(title);
    padding: 50px;
    color: rgba(255,255,255,.2);
    position: absolute;
}
.depth-text:before{
	top: 1px;
	left: 1px;
}
.depth-text:after{
	top: 2px;
	left: 2px;
}




#ServerText a{
	position: absolute;
	display: inline-block;
	margin: 0 auto;
    font-size: 20px;
    font-family:  Eng2;
    line-height: 40px;
	color: #d3d3d3;
	margin-bottom: 25px;
	text-shadow: 1px 0px 0px rgba(0,0,0,0.3);
}
#srv-btn-1{
	position: relative;
	left: 197px;
	bottom: 40px;
}
#srv-btn-2{
	position: relative;
	left: 435px;
	bottom: 40px;
}
	#srv-btn-3{
	position: relative;
	right: 197px;
	bottom: 40px;
}





/* SEPARATOR */

#or-spacer {
  width: 400px;
  height: auto;
  left: 30.25%;
  position: relative;
  margin: 100px 0px 20px 0px;
  z-index: 100;
}
#or-spacer .mask {
  overflow: hidden;
  height: 20px;
  z-index: 100;
}
#or-spacer .mask:after {
  content: '';
  display: block;
  margin: -25px auto 0;
  width: 100%;
  height: 25px;
  border-radius: 125px / 12px;
  box-shadow: 0 0 8px black;
  z-index: 100;
}
#or-spacer span {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 100%;
  margin-bottom: -25px;
  left: 50%;
  margin-left: -25px;
  border-radius: 100%;
  box-shadow: 0 2px 4px #999;
  background: white;
  z-index: 100;
}

#or-spacer span li {
  list-style: none;
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  border-radius: 100%;
  border: 1px dashed #aaa;
  text-align: center;
  line-height: 35px;
  font-style: normal;
  font-size: 30px;
  color: #999;
  cursor: pointer;
  z-index: 100;
}





@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-5deg);
  }
  20% {
    transform: rotateZ(3deg);
  }
  25% {
    transform: rotateZ(-2.5deg);
  }
  30% {
    transform: rotateZ(1.5deg);
  }
  35% {
    transform: rotateZ(-1deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
 
}



@-webkit-keyframes bubbleover {
  0%   {
  	-webkit-transform:translate(0, 1em);
  	z-index:-1
  	}
  50% {
  	-webkit-transform:translate(0, -0.5em);
  	z-index:-1
  } 
  100% {
  	-webkit-transform:translate(0, 0);
  	z-index:1;
  	}
}

@keyframes bubbleover {
  0%   {
    top:0;
    transform:translate(0, 0);
    z-index:-1;
    }
  50% {
    transform:translate(0, -12px);
    z-index:-1
    } 
  100% {
    transform:translate(0, 6px);
    z-index:1;
    }
}