@font-face {
    font-family: "Yekan";
    src: url(../fonts/Yekan.eot);
    src: url(../fonts/Yekan.eot?#iefix) format("embedded-opentype"),
         url(../fonts/Yekan.woff) format("woff"),
         url(../fonts/Yekan.ttf) format("truetype"),
         url(../fonts/Yekan.svg#BYekan) format("svg");
    font-weight: normal;
    font-style: normal;
}

@media screen and (max-width: 480px) {

    .container>h1 { font-size: 18px; }
    .container>h2 { font-size: 16px; }
    .container>h3 { font-size: 14px; }
    .container>h4 { font-size: 12px; }
    .container>h5 { font-size: 10px; }
    .container>h6 { font-size: 8px;  }
    .container>p { font-size: 14px;}

    footer>p {
        
        font-size: 10px;
    }
    
    .enamad {
        
        margin-right: auto;
        margin-left: auto;
    }
}

@media screen and (max-width: 800px) {
    
    .container{
        
        margin-left: 10px;
        margin-right: 10px;
    }
}

body{
    
    background-color: #f6f6f6;
    font-family: Yekan, Arial !important;
	height: 100%;
	width: 100%;
    text-align: justify;
}

h1{font-size: 24px;}
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 12px; }
h6 { font-size: 10px; }
hr{
    border:0;
    height: 1px;
    background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));
}

.center{
    
    text-align: center;
}
/* -------------- logobar ----------------------- */
.slide-right {
    
    width: 100%;
    overflow: hidden;
    background-image: url(../pattern/bk.svg);
}

.inner {
    animation: slide-right 4s;
    
}
@keyframes slide-right {
    
    from{
        margin-right: 100%;
    }
    to{
        margin-right: 0%;
    }
}

/* ---------------navbar ------------------------*/
.navbar {
    
      margin-bottom: 0;
      background-color:  #1e6963;
      background-image: none;
    }

.navbar-inverse {
    
    background-color:   #297073 ;
    border-radius: 0.5;
    border: none ;
}

.navbar-inverse .navbar-brand{
    
    color: lightsalmon;
    font-size: 26px;
}
.dropdown-toggle:focus {
    
    background: lightsalmon !important;
}
.container {
    
    background-color: white;
	min-height: 100%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 50px;
    box-shadow: 1px 1px 2.5px 1px #b8b8b8 ;
    border-radius: 10px;
	padding-bottom: 50px;

}

.pic-slider{
    
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.btn-btn {
    
	padding-top: 7px;
	
	}	
	

.jumbotron {
    
    background-image: url(../pattern/bk.svg);
    overflow: hidden;
}

@keyframes example {
    
    0%   { left:0px;}
    25%  { left:50px;}
    50%  { left:100px; }
    75%  { left:150px; }
    100% { left:200px; }
}

@-webkit-keyframes example {
    
    0%   { left:0px;}
    25%  { left:50px;}
    50%  { left:100px; }
    75%  { left:150px; }
    100% { left:200px; }
}

@keyframes example2 {
    
    0%   { right:0px;}
    25%  { right:50px;}
    50%  { right:100px; }
    75%  { right:150px; }
    100% { right:200px; }
}

@-webkit-keyframes example2 {
    
    0%   { right:0px;}
    25%  { right:50px;}
    50%  { right:100px; }
    75%  { right:150px; }
    100% { right:200px; }
}

@keyframes example3 {
    
    0%   { left:0px;}
    25%  { left:40px;}
    50%  { left:90px; }
    75%  { left:140px; }
    100% { left:190px; }
    
}

@-webkit-keyframes example3 {
    
    0%   { left:0px;}
    25%  { left:40px;}
    50%  { left:90px; }
    75%  { left:140px; }
    100% { left:190px; }
    
}

@keyframes example4 {
    
    0%   { right:0px;}
    25%  { right:40px;}
    50%  { right:90px; }
    75%  { right:140px; }
    100% { right:190px; }
   
}

@-webkit-keyframes example4 {
    
    0%   { right:0px;}
    25%  { right:40px;}
    50%  { right:90px; }
    75%  { right:140px; }
    100% { right:190px; }
   
}

@keyframes example5 {
    
    0%   { left:0px;}
    25%  { left:30px;}
    50%  { left:80px; }
    75%  { left:130px; }
    100% { left:180px; }
    
}

@-webkit-keyframes example5 {
    
    0%   { left:0px;}
    25%  { left:30px;}
    50%  { left:80px; }
    75%  { left:130px; }
    100% { left:180px; }
    
}

@keyframes example6 {
    
    0%   { right:0px;}
    25%  { right:30px;}
    50%  { right:80px; }
    75%  { right:130px; }
    100% { right:180px; }
   
}

@-webkit-keyframes example6 {
    
    0%   { right:0px;}
    25%  { right:30px;}
    50%  { right:80px; }
    75%  { right:130px; }
    100% { right:180px; }
   
}
.label-banner{
    width: 90%;
    right: 40%;
    position: relative;
    top: 9px;
}

.labelex {
    
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.labelex2 {
    
    position: relative;
    animation-name: example2;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    
}

.labelex3 {
    
    position: relative;
    animation-name: example3;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    
}

.labelex4 {
    
    position: relative;
    animation-name: example4;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    
}

.labelex5 {
    
    position: relative;
    animation-name: example5;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    
}

.labelex6 {
    
    position: relative;
    animation-name: example6;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    
}
p.style{
    
    line-height: 200%;
    
}
.lineheight {
    
    line-height: 200%;
}

img.mobile{
    
    width:100%;
    margin-top: -30px;
}

#smart-boiler-banner{
    
    opacity: 1;
    width:20%;
    margin-top: -40px;
    margin-left: 5px;
    border-radius: 25px;
}

#bank-shahr-banner {
    
    margin-top: -40px;
    margin-right: 5px;
    border-radius: 25px;

}

#bank-shahr-banner-mobile{
    
    width: 100%;
    
}
img.center {
    
    margin-left: auto;
    margin-right: auto;
}

img.light-hover:hover {
    
    opacity: 0.85;
    transform: scale(1.01);
    
}

img.dark-hover:hover {
    
    opacity: 0.6;
}

p.error{
    
    color: #ff4141 ;
}

.test {
    
    font-size: 50px;
    color: darkorange;
}

.container ul>li {
    
    font-size: 16px;
    padding-top: 10px;
}
.icon {
  position: relative;
  overflow: hidden;
  display: inline-block;
  
}
/**
 * The "shine" element
 */

.icon:after {
  
  animation: shine 5s ease-in-out  infinite;
  animation-fill-mode: forwards;  
  content: "";
  position: absolute;
  top: -110%;
  left: -210%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);
  
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

/* Hover state - trigger effect */


/* Active state */

.icon:active:after {
  opacity: 0;
}

@keyframes shine{
  10% {
    opacity: 1;
    top: -30%;
    left: -30%;
    transition-property: left, top, opacity;
    transition-duration: 0.7s, 0.7s, 0.15s;
    transition-timing-function: ease;
  }
  100% {
    opacity: 0;
    top: -30%;
    left: -30%;
    transition-property: left, top, opacity;
  }
}