/*--------------general------------------*/
html, body {
  height: 100%;
  margin: 0;
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  background-color: #d7d7d7;
}
a{ color: black; }
a:hover{ text-decoration: none; }
ul{list-style-type: none}
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: 500;
  src: url('../font/IRANSansWeb.eot');
  src: url('../font/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
       url('../font/IRANSansWeb.woff2') format('woff2'),  /* Chrome36+, Opera24+*/
       url('../font/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('../font/IRANSansWeb.ttf') format('truetype');
}
@media (max-width: 990px){
  .container {
    max-width:100%;
  }
}
/*--------------general------------------*/
.general-style .left-panel{
  background-color: #e9e9e9;
  padding: 40px 0;
  box-shadow: 5px -1px 5px rgba(157, 170, 180, 0.6);
  z-index: 99;
}
.general-style .right-panel{
  background-color: #fff;
  padding: 0;
}
.left-panel h2{padding: 10px 0; color: #1a202c;}
.left-panel .hr{
  height: 3px;
  background-color: #f7f7f7;
}
.right-panel p > a{
  text-decoration: none;
  font-weight: 500;
  color: #006db9;
}
.right-panel p > a:hover{color: #008cf1;}
/*--------------general------------------*/

/*-------------leftPanel-----------------*/
/*--------------contact-----------------*/
.contact-me .very-small-screen{display: none}
.contact-me .very-small-scr2{display: none}
.contact-me .below img{
  position: absolute;
  display: inline-block;
  vertical-align: bottom;
  left:0;
  /*width: 60px;*/
  height: 40px;
}
.contact-me .icon-style{
  position: relative;
  left: -30px;
  top:5px;
  color: #fff;
  font-size: 26px;
  display: flex;
}
.contact-me ul li p, .contact-me ul li a{
  margin: -15px 10px 0 40px;
  display: flex;
}
@media (max-width: 890px) and (min-width: 576px){
  .contact-me ul li p, .contact-me ul li a{
  font-size: 14px;
    margin-left: 20px;
  }
  .contact-me .icon-style{font-size: 20px;}
  .contact-me .below img{height: 30px}
  .contact-me h2{font-size: 20px}
}
@media (max-width: 970px) and (min-width: 890px) {
  .contact-me .very-small-screen{display: block}
}
@media (max-width: 820px) and (min-width: 576px) {
  .contact-me .very-small-screen{display: block}
}
@media (max-width: 320px){
  .contact-me .very-small-screen{display: block}
}
@media (max-width: 730px) and (min-width: 576px){
  .contact-me .very-small-scr2{display: block}
}
/*--------------contact-----------------*/

/*---------------skill------------------*/
.skills ul li p{margin-bottom: 1px}
.skills .progress-bar{background-color: #016eb3}
.skills .progress{ background-color: #fff}
.skills ul{padding: 0 30px}
@media (max-width: 710px) and (min-width: 576px){
  .skills h2{font-size: 20px}
  .skills ul{padding:0 15px}
}
/*---------------skill------------------*/
/*---------------langs------------------*/

.langs .icon-style{width:60px; height:60px; color: #1a202c; padding:0 5px}
.langs .icon-style:hover{color: #00599b}
.langs .fa:hover p{ display: block}
.langs .en:hover p{ display: block}
@media (max-width: 710px) and (min-width: 576px) {
  .langs h2 {
    font-size: 20px
  }
  .langs .icon-style{width:50px; height:50px;}
}
/*---------------langs------------------*/
/*-------------leftPanel-----------------*/

/*--------------------menu--------------------*/
.top-menu-style{
  /*background: #1a202c url("../img/rightside-panel/menu-back-white.png")no-repeat top left;*/
  position: fixed;
  z-index: 9;
}
#top-nav::after{
  background: transparent url("../img/rightside-panel/menu-back-white.svg")no-repeat center center;
  content: '';
  height: 80px;
  width: 185px;
  position: absolute;
  margin-left: -182px;
}
.top-menu-style .cv-style .nav-link{color: #42a4e5; font-weight: bold}
@media (min-width: 1200px) {
  .top-menu-style{
    min-width: 50%;
  }
  #top-nav{
    max-width: max-content;
  }
  .top-menu-style .end-img{position: absolute; right: 460px}
}
@media (max-width: 990px){
  #top-nav{
    height: auto;
  }
  .navbar-collapse {
    margin-top: 30px;
    background-color: #1a202c;
    padding:0 5px;
  }
}
.navbar .nav-item{
  padding: 0 5px;
}
#top-nav{
  /*position: fixed;*/
  /*display: block;*/
  background-color: #1a202c;
  z-index: 99;
  height: 80px;
  top:0;
}
.top-menu-style img{
  position: fixed;
  /*display: inline-block;*/
  height: 80px;
  /*margin-right: -230px;*/
  top:0;
}
@media (max-width: 576px) {
  .top-menu-style{display: none}
  /* #top-nav {position:fixed} */
}
/*--------------------menu--------------------*/

/*-----------------rightPanel-----------------*/
.right-panel section{padding: 0 60px 40px 0;}
@media (max-width: 680px) {
.right-panel section{padding-right: 30px;}
}
.right-panel .section-title{
  display:inline-block;
  color: #fff;
  background-color: #0070b0;
  height: 40px;
  min-width: 72%;
  z-index: 999;
  padding-left: 50px;
}
.right-panel .section-title::after{
  background: transparent url("../img/rightside-panel/title-back.jpg")no-repeat center center;
  content: '';
  height: 40px;
  width: 55px;
  position: absolute;
  background-size: 55px 40px;
  right: 27%;
}
@media (max-width: 800px) and (min-width: 576px) {
  .right-panel .section-title::after{right: auto;}
}
@media (max-width: 450px) {
  .right-panel .section-title::after{display: none}
  .right-panel .section-title{width: 100%; border-bottom-right-radius: 50px;}
}

@media (max-width: 576px) and (min-width: 300px) {
  .right-panel .section-title{padding-left: 30px; font-size: 25px; padding-top: 2px;}
}
@media (max-width: 300px) {
  .right-panel .section-title{min-width: 0;padding-left: 10px; font-size: 25px;}
  .right-panel section{padding-right: 10px;}
}
@media (max-width: 270px){
  /*.right-panel section .title-back {display: none;}*/
  .right-panel #about h1{font-size: 22px; font-weight: bold}
  .right-panel #about h3{font-size: 18px}
}

/*-------------------about--------------------*/
#about{padding-top: 100px; padding-left: 50px}
.about-me h1{color: #1a202c;}
.about-me h3{font-size: 28px; letter-spacing:-1px; color: #00a5d2;}
@media (max-width: 576px) and (min-width: 300px){
  #about{padding-top: 70px; padding-left: 30px}
  .about-me h1{font-size: 32px;}
  .about-me h3{font-size: 20px}
}
@media (max-width: 300px) {
  #about{padding-top: 50px; padding-left: 10px}
  .about-me h1{font-size: 24px;}
  .about-me h3{font-size: 18px}
}
/*-------------------about--------------------*/
/*-----------------experience-----------------*/
.background-sec .content{padding: 20px 0 20px 50px;}
.background-sec .content .date{
  font-style: italic;
  color: #00a5d2;
  text-align: right;
  font-weight: 400;
}
.background-sec .content .location{color: #aaaaaa;}
.background-sec .content .very-small-screen{display: none}

.background-sec .content .comp-name{font-weight: bold; letter-spacing: -1px}
.background-sec .content h6{font-weight: bold; color: #006cb4; font-size: 18px; margin-bottom: 2px}
.background-sec .content .p-title{font-weight: bold}
.background-sec ul{list-style-type: square}
.background-sec .table td{padding: 0; vertical-align: middle; border:none}
.background-sec .table td[scope]{width: 74px}
.background-sec .iust-logo{background: transparent url("../img/uni/iust.png") no-repeat center center;
  height: 65px; width: 55px; content: ''; background-size: 55px 65px; /*margin: 0 auto*/}
.background-sec .sut-logo{background: transparent url("../img/uni/sut.png") no-repeat center center;
  height: 65px; width: 55px; content: ''; background-size: 55px 55px; /*margin: 0 auto*/}
.background-sec .kamal-logo{background: transparent url("../img/uni/kamal.png") no-repeat center center;
  height: 65px; width: 55px; content: ''; background-size: 55px 55px; /*margin: 0 auto*/}
@media (max-width: 576px) and (min-width: 300px){
  .background-sec .content{padding-left: 30px}
}
@media (max-width: 300px) {
  .background-sec .content{padding-left: 10px}
}
@media (max-width: 410px) {
  .background-sec .large-scr{display: none}
  .background-sec .content .very-small-screen{display: block; text-align: center}
  .background-sec .content .date{text-align: center;}
  .background-sec .content .location, .background-sec .content .comp-name{font-weight: 500}
}
/*-----------------experience-----------------*/
/*--------------------news--------------------*/
.news .news-content{padding: 20px 0 20px 50px; margin-left: 60px; text-align: center}
[dir='rtl'] .slick-next {left:0}
[dir='rtl'] .slick-prev {right:0}
.slick-dots{margin:0; left:0}
.slick-prev:before, .slick-next:before {color: #1a202c}
@media (max-width: 576px) and (min-width: 300px){
  .news .news-content{margin-right: auto; margin-left: 30px; text-align: center; padding: 20px 0}
}
@media (max-width: 300px) {
  .news .news-content{margin-right: auto; margin-left: 10px; text-align: center; padding: 20px 0}
}
/*--------------------news--------------------*/
/*--------------------pubs--------------------*/
.pubs-sec .content{padding: 20px 0 20px 50px;}
.pubs-sec .small-scr{display: none}
.pubs-sec table td{padding: 0; border: none}
.pubs-sec table .mag-name{height:35px}
.pubs-sec table .button-row{height:63px}
.pubs-sec table .logo{border:1px solid #ddd; padding: 10px; text-align: center}
.pubs-sec table .logo p{color: #ff9900; font-size: 20px; font-weight: bold}
.pubs-sec .mag2-logo{
  width: 100px;
  margin: 10px 0 4px 0;
}
.pubs-sec .mag2-logo-sm{
  width: 100px;
  margin: 10px 0 4px 0;
}
.pubs-sec table .name{padding:24px 8px 0 8px; height: 40px; text-align: left}
.pubs-sec table .date{padding-top: 24px; text-align: right; min-width: 100px; font-size: 15px}
.pubs-sec table .date-sm{padding-top: 10px; font-size: 15px; padding-left: 8px}
.pubs-sec table.large-scr .btn-row{text-align: right}
.pubs-sec table.small-scr .btn-row{padding: 4px 0 30px 8px}
.pubs-sec table.small-scr tr:last-child .btn-row{margin-bottom: 0}
.pubs-sec ul{list-style-type: square; padding-left: 15px}
.pubs-sec ul li{padding: 5px 0}
.pubs-sec ul li:first-child{padding-top: 0}
.pubs-sec ul li:last-child{padding-bottom: 0}
@media (max-width: 720px){
  .pubs-sec .large-scr{display: none}
  .pubs-sec .small-scr{display: block}
}
@media (max-width: 576px) and (min-width: 300px){
  .pubs-sec .content{padding-left: 30px}
}
@media (max-width: 300px) {
  .pubs-sec .content{padding-left: 10px}
}
/*--------------------pubs--------------------*/
/*------------------interest------------------*/
.interest_sec .content{padding: 20px 0 20px 50px;}
.interest_sec ul{list-style-type: square; padding-left: 15px}
.interest_sec ul li{padding: 5px 0}
.interest_sec ul li:first-child{padding-top: 0}
.interest_sec ul li:last-child{padding-bottom: 0}
@media (max-width: 576px) and (min-width: 300px){
  .interest_sec .content{padding-left: 30px}
}
@media (max-width: 300px) {
  .interest_sec .content{padding-left: 10px}
}
.other-interest .content{padding: 0}
.other-interest .content{display: block; text-align: center; padding: 20px 0 20px 10px;}
.other-interest .item{display: inline-block; text-align: center}
.other-interest .item .below{
  display: none;
  background-color: #efefef;
  border-radius: 50px;
  height: 100px;
  width: 100px;
  position: absolute;
  margin-right: -15px;
  margin-top: -15px;
}
.other-interest .item:hover .below{display: block;}
.other-interest .item .icon-style{width: 70px; height: 70px;
  color: #989898;}
.other-interest .item p{margin-top: 20px}
@media (min-width: 1200px) {
  .other-interest .content{text-align: left}
}
/*------------------interest------------------*/
/*-----------------rightPanel-----------------*/

/*-------------------footer-------------------*/
.footer-style{background-color: #292929; text-align: center; color: #989898; padding: 5px 0}
.footer-style p{font-size: 12px; margin-bottom: 1px}
/*-------------------footer-------------------*/