Default page

View File Name : _layout.scss

/* +----------------------------------------------------+
		TABLE OF CONTENTS
	+----------------------------------------------------+

	[1]		Header Wrapper
	[2]		Content Wrapper
	[3]		Footer Wrapper
	
*/

/* ************************************************************************************************
STRUCTURE
************************************************************************************************ */
//Non-responsive Bootstrap
@media  (max-width: 1024px) {.no-res{width: 1190px; }}
.wrapper-boxed,.wrapper-iframed,.wrapper-rounded  {max-width: 1200px;margin: 0 auto;background: #fff;box-shadow: 0 0 10px rgba(0,0,0,.2);
	header.navbar-compact{width:auto;}
}
.wrapper-iframed{margin: 20px auto;}
.wrapper-rounded{margin: 20px auto; border-radius:10px;overflow:hidden;}


/**************************************************************
	  Header Wrapper
**************************************************************/
.header-top{background:#eee; }
.header-center{padding: 35px 0;}
.header-bottom{background: #666666; min-height: 45px;margin-bottom: 15px;}

/**************************************************************
	  Content Wrapper
**************************************************************/

#content {margin-bottom: 30px; @include clearfix();}

/************************************************************************************************
    FOOTER DEFFAULT
*************************************************************************************************/
footer{ 
  @include rem(font-size, 12px); color: #666;
  a{ color: #444; }
  .module{ margin: 0; 
    h3.modtitle,
    h3.footer-title{
      font-size: 18px!important; font-weight: bold; border: none; color: #222!important; 
      text-transform: uppercase; margin: 0 0 15px 0!important; line-height: inherit; height: auto;
    }
  }

  /*FOOTER TOP*/
  .footer-top {  background-color: #222;  height: 70px; }

  /*FOOTER CENTER*/
  .footer-center{padding-bottom: 30px; padding-top: 25px; background-color: #eee;
    .module h3.modtitle:before{ display: none; }
    .module{
      .footer-logo{margin-bottom: 7px; margin-top: -3px;}
      ul.menu{
       li a{
        position: relative;
        padding-#{$left}: 10px;
        @include if-rtl {
          &:before{ content: "\f100"!important; font-family: FontAwesome}
        }
        &:before{content: "\f101"; top: 2px; line-height: 100%; vertical-align: middle; font-family: FontAwesome; position: absolute; #{$left}: 0;}
        &:hover{  color: $linkColor; } 
       }
      }
    }
    .footer-links{ p{ line-height: 20px; } }
    .contact-address{
        li{color: #444444;padding: side-values(0 0 5px 25px) ;position: relative;z-index: 1;line-height: 18px;}
        span{font-size: 15px;position: absolute;color: white; text-align: center;color: $linkColor; #{$left}: 0px;margin-#{$right}: 10px;
        }
         > li:nth-child(2) {padding-top: 7px;
         span{margin-top: -1px;}
      }
        > li:last-child{padding-top: 8px;}
        a:hover{color: $linkColor;}
    }
    .payment-list li{display: inline;}

  }
  .box-footer{min-height: 181px; border-#{$right}: 1px solid #ddd;
    .module{margin: 0;}
    &.box-account, &.box-information{
      padding-#{$left}: 30px;
      ul li{line-height: 32px;}
    }
    &:last-child{border-#{$right}: 0; padding-#{$left}: 30px; }
  }
  ul.payment-method{padding-top: 25px; border-bottom: 0;
    li{
      display: inline-block; margin-#{$right}: 7px;
      img:hover{opacity: 0.8;}
    }
  }

  /*FOOTER BOTTOM*/
  .footer-bottom{background: #ddd; padding: 6px 0;}

  /*HTML SOCIAL*/
  
  .social_block{ margin-bottom: 0; background: #3a3a3a;
    ul{
      padding: 0 15px;
      &.social-block li{float: $left; display: inline-block; margin: 0 7px; text-align: center;
        a{color: #fff; line-height: 70px; width: 30px; display: inline-block;
          &:hover{color: $linkColor;}
          i{font-size: 16px;}
        }
      }
    } 
  }

  /*NEWLETTER*/
  .news-letter{overflow: hidden; padding-top: 10px; float: $right; color: #fff; padding-#{$right}: 0;
    .title-block{
     max-width: 400px; min-height: 50px; display: inline-block; padding: side-values(3px 0 0px 57px);
      background: url("#{$base-url-theme}icons/icon-newletter-footer.png")  no-repeat $left center; margin-#{$left}: 23px;
    }
    .page-heading { font-size: 16px; text-transform: uppercase;font-weight: 600;color: #fff;margin: side-values(2px 2px 0); }
    .pre-text {margin: 0;line-height: 12px; font-size: 12px;}
    .block_content{ float: $right; padding-top: 7px;   
    form {margin: 0px;
      .form-group {margin: 0px; overflow: hidden;}
    }
      .input-box{float: $left;
        input { border-radius:0; height: 40px;padding: 5px 15px;background: #fff;color: #999;font-size: 12px;float: $left;width: 270px; height: 36px; transition: 0.3s all ease 0s;border: solid 1px #eee;border-#{$right}: none;}
      } 
      .subcribe{float: $left;
        button{ border-radius:0; height: 36px;float: $left;text-transform: uppercase;font-size: 12px;transition: 0.3s all ease 0s;font-weight: 500;text-transform: uppercase;background-color: $background; border-color: $linkColor; color: #fff;
          &:hover{background-color: darken($background, 10%); border-color: darken($background, 10%);}
        }  
      } 
    }
  }
}


/************************************************************************************************
    FOOTER V2
*************************************************************************************************/
footer.typefooter-2{ 
  @include rem(font-size, 13px); color: #666;
  a{ color: #fff; }
  .footer-navbar{
    position: relative;
    background: url("#{$base-url-theme}home8/bg-footer.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    text-align: center;
    .footer-link { padding-top: 24px;  padding-bottom: 23px;
      li {
        display: inline-block;
        color: #fff;
        text-transform: uppercase;
        padding: 0 10px;
        font-weight: bold;
        a{ color: #fff; font-size: 13px; &:hover{color: $linkColor;} }
      }
    }
    .footer-top{ background: transparent; height: auto; }
    .footer-bottom{ 
      background: transparent; 
      text-align: center;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 20px;
      .copyright-text {  padding-bottom: 10px; }
      .paymen { padding-bottom: 25px; }
    }
    .footer-about{
      .content-block-footer{
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 20px;
        @media (min-width: 991px){ padding-top: 49px; }
      }
    }
    .social-block{
      @media (min-width: 991px){  padding-bottom: 17px; }
      li{
        display: inline-block;
        width: 40px;
        height: 40px;
        text-align: center;
        border: 1px solid #fff;
        line-height: 40px;
        border-radius: 100%;
        @include transition(all 300ms ease-in-out);
        i{ color: #fff; line-height: 40px; text-align: center; font-size: 16px; @include transition(all 300ms ease-in-out); }
        &:hover{  border-color: $linkColor;
          i{ color: $linkColor; }
        }
      }
    }
    .footer-logo{margin-bottom: 37px;}
    p{ line-height: 25px; margin-bottom: 29px; color: #9e9e9e; }
    ul.menu{
     li a{ &:before{content: "\f101";font-family: FontAwesome;margin-right: 5px;} &:hover{color: $linkColor;}  }
    }
  }
}

/************************************************************************************************
  FOOTER V3
*************************************************************************************************/
footer.typefooter-3{
  .footer-top{ height: auto; background: transparent; }
  .footer-navbar{
    position: relative;
    background: #eeeeee;
    padding-top: 45px;
      .footer-links {
        padding-top: 24px;
        padding-bottom: 23px;
      .module{
          margin: 0;
        }

        li {
          display: inline-block;
          color: #fff;
          text-transform: uppercase;
          padding: 0 10px;
          font-weight: bold;
          a{ color: #fff; &:hover{color: $linkColor;} }
      }
      }
      .footer-right{
        border-#{$left}: 1px solid #ddd;
        @media (min-width:1200px){
          width: 73%;
          padding-#{$left}: 31px;
          
        }
        .module{
          margin-bottom: 26px;
        }
        @media (min-width:991px){
          .box-account{
            border-#{$right}: 1px solid #ddd;
            width: 32%;
          }
          .box-information{
            
            width: 34%;
            padding-#{$left}: 31px;
          }
          .collapsed-block{
            width: 34%;
            padding-#{$left}: 31px;
            border-#{$left}: 1px solid #ddd;
            .module{
              margin: 0;
            }
          }
        }
      }
      .footer-left{
        
        @media (min-width:1200px){
          width: 27%;
        }
        .module{
          margin: 0;
          .footer-contact-content p{
            margin-bottom: 0px;
            margin-top: 10px;
            
            &.des-ft{
              line-height: 26px;
            }
          }
        }
        .des-ft{
          color:#666666;
        }
        .footer-contact-content{
          margin-top: 30px;
          span{
            margin-#{$left}: 11px;
            color: #666;
          }
          .phone .fa{
            font-size: 18px;
            span{
              margin-#{$left}: 17px;
            }
          }
          .fa{
            font-size: 14px; 
            color: #ea3a3c;
          }
        }
      }
      .box-footer{
        .module{
          margin: 0;
        }
        .content-block-footer{
          border-top: 1px solid rgba(255,255,255,0.1);
          padding-top: 20px;
          @media (min-width: 991px){
            padding-top: 49px;
          }
        }
      }
      .social-block{
        @media (min-width: 991px){
          padding-bottom: 17px;
          margin-top: 19px;
        }
        li{
          display: inline-block;
          text-align: center;
          border-radius: 100%;
          padding-#{$right}: 22px;
          @include transition(all 300ms ease-in-out);
          i{ 
            color: #444;     
            line-height: 40px;
            text-align: center;
            font-size: 19px;
            @include transition(all 300ms ease-in-out);
        }
        &:hover{
          i{
            color: $linkColor;
          }
        }
        }
      }
      .footer-center{
        background: #333;
        margin-top: 25px;
        color: #fff;
        padding: 38px 0 0;
        .custom-sevicer{ margin-bottom: 15px!important; }
        .box-footer-sp{
          padding-#{$left}: 25px;
          &:before {
            content: "";
            width: 2px;
            height: 60px;
            top: -12px;
            position: absolute;
            background: #5c5c5c;
            -ms-transform: rotate(25deg);
            -webkit-transform: rotate(25deg);
            transform: rotate(25deg);
            #{$left}: -11px;
        }
      }
        .icon-sp{
          float: $left;
          padding-#{$right}: 20px;
          .fa {color: $linkColor;font-size: 35px;}
        }
        .content-sp {
          position: relative;
          top: -8px;
          a {color: #fff;text-transform: uppercase;font-size: 14px;letter-spacing: 0.3px;}
           span {line-height: 30px;    color:#a8a8a8;}
      }
      }
  }
  .box-footer{ border: none; }
  .footer-bottom{
    text-align: center;
    background: #333;
    
    .footer-bottom-pt{
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 20px;
    }
    .copyright-text{
      padding-bottom: 10px;
      color: #fff;
      font-size: 12px;
      text-align: $left;
      a{color: $linkColor;}
    }
  }

  footer,footer a{
      color:inherit;
  }
  footer a:hover{
      color:#337ab7;
  }

  .footer-navbar{
      .module{
      h3.modtitle{font-size: 18px; text-align: $left;  border-bottom: 0;color: #222;text-transform: uppercase; margin: 0 0 15px 0; border: 0; height: auto; line-height: inherit;
       &:before{display: none;}
      }
      .footer-logo{margin-bottom: 37px;}
      p{
        line-height: 25px;
        margin-bottom: 15px;
        color: #9e9e9e;
        font-size: 13px;
      }
      ul.menu{
       li a{
          line-height: 30px;
          font-size: 13px;
          color: #666;
          &:before{content: "\f101";font-family: FontAwesome;margin-#{$right}: 5px;}
          &:hover{color: $linkColor;} 
        }
      }
      }
      
  }
  div.clients_say .owl2-controls{display: none;}
  .contact-address{
      li{color: #444444;padding: side-values(0 0 5px 25px); position: relative; z-index: 1; line-height: 18px; }
      span{font-size: 15px; position: absolute; color: white; text-align: center; color: $linkColor;  #{$left}: 0px; margin-#{$right}: 10px;
      
      }
       > li:nth-child(2) {padding-top: 7px;
       span{margin-top: -1px;}
    }
      > li:last-child{padding-top: 8px;}
      a:hover{color: $linkColor;}
  }
  .payment-list li{display: inline;}

  .footer-directory-title{
    
    .label-link{
      color: #444;
      font-weight:bold;
      padding-bottom: 5px;
      font-size: 11px;
    }
  }
  ul.footer-directory{
    list-style: outside none none;
    padding: 0;
    margin: 0;
    li{
      padding-bottom: 3px;
      h2{
        color: #444;
        display: inline-block;
        font-weight: bold;
        line-height: 22px;
        text-transform: uppercase;
        font-size: 11px;
        margin: 0; margin-#{$right}: 5px;
      }
      a{
        font-size: 11px;
      }
    }
  }
  .back-to-top{z-index: 999;}

  .so-slider{
    .slide-left{
      padding-#{$right}: 5px;
      @media (min-width: 1200px){
        width: 74.10%;
          
      }
    }
    .slide-right{
      padding-#{$left}: 5px;
      @media (min-width: 1200px){
        width: 25.90%;
          
      }
      .col-s-1{
        margin-bottom: 10px;
      }
    }
  }
  .footer-bottom .copyright-text {
      padding-bottom: 20px;
      float: $left;
  }
  .footer-bottom .paymen {
      padding-bottom: 20px;
      float: $right;
  }
  //Clients Say
  .testimonial {clear: inherit;}
  div.clients_say {position: relative; top:0; background-color: #eee;border-bottom: 1px solid #ddd;
    .owl2-carousel .owl2-stage-outer{ direction: ltr; }
    .owl-carousel{background: none;}
    .block-title{position: relative;
       h3{font-size: 18px; font-weight: bold; margin:0; text-transform: uppercase; margin-bottom: 18px;color: #222;}
    }
    .image{ width: 90px; background-color: #eee; float: $left; margin-#{$right}: 15px;
        img{
          &:hover{opacity: 0.8;}
        }
    }
    .block_content{background-color: #eee; margin-top: 10px;
      .content-if{ position: relative; top: -8px;}
      .text{ font-size: 13px; font-style: italic; color:#666; line-height: 26px; }
      .author{ font-size: 16px; font-weight: bold;color: #ea3a3c; margin-top: 10px; line-height: 18px;}
      .name-if{ color: #666; }
    }
    .block-info { font-style: italic; position: relative; top: -4px; background-color: #eee; margin-#{$left}: 80px;       
      .info { padding: 17px 0px 0;
        .author {font-size: 15px; font-weight: 600;margin-top: -3px; font-style: normal; color: #e74c3c;}
      }
    }
    .owl2-controls {position: absolute; top: -40px; #{$right}: -3px; 
      .owl2-dots{display: none !important;} 
      .owl2-nav{
        div{font-size: 0; font-weight: bold;position: static; padding: 5px;  cursor: pointer; display: inline;background: none;color: #999;
          &.owl2-prev:before{content: "\f104"; font-family: FontAwesome; font-size: 20px;}
          &.owl2-next:before{content: "\f105"; font-family: FontAwesome; font-size: 20px;}
          &:hover{background-color: transparent !important; color: $linkColor;}
        }
      }   
    }
  }
  .news-letter{-webkit-appearance: none; overflow: hidden; float: none; padding-top: 28px; padding-#{$right}: 0; color: #fff;
     .title-block{margin-left: 20px;max-width: 400px; min-height: 50px; display: inline-block; padding: side-values(3px 0 0px 60px); display: none;}
     .page-heading {font-size: 150%;text-transform: uppercase;font-weight: 600;color: #fff;margin: 0px 0 6px;}
     .pre-text {margin: 0;line-height: 12px; font-size: 12px;}
    .block_content{  padding-top: 6px;      padding-#{$right}: 13px;  
    form {margin: 0px;
      .form-group {margin: 0px; overflow: hidden; width: 100%;position: relative;}
    }
      .input-box{
        input {box-shadow: none;padding: 5px 15px;background: #fff;color: #777;font-size: 13px;width: 100%; height: 36px; transition: 0.3s all ease 0s;border: solid 1px #fff;border-#{$right}: none;}
      } 
      .subcribe{position: absolute; #{$right}: 0; top: 0;
        button{padding: 0px 13px;line-height: 36px; height: 36px;text-transform: uppercase;font-size: 14px;transition: 0.3s all ease 0s;font-weight: 400;text-transform: uppercase;background-color: $background; border-color: $linkColor; color: #fff;
          &:hover{background-color: darken($background, 10%); border-color: darken($background, 10%);}
        }  
      } 
    }
  }
}