/** 
 *------------------------------------------------------------------------------
 * @package       T3 Framework for Joomla!
 *------------------------------------------------------------------------------
 * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
 * @license       GNU General Public License version 2 or later; see LICENSE.txt
 * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github 
 *                & Google group to become co-author)
 * @Google group: https://groups.google.com/forum/#!forum/t3fw
 * @Link:         http://t3-framework.org 
 *------------------------------------------------------------------------------
 */
/*================================================================
=            Fix styles for Titles and Module headers            =
================================================================*/
/*----------  FIX sytles for all mutimodule titles  ----------*/
.skill, .team, .feature, .action, .clients, .pricing, .timeline, .hero, .tabs, .testimonial, .follow, .ut-ctc{
  h3[class*="-title"] {font-size: @font-size-h1;text-transform: uppercase;}
}
  
/*----------  Home Spotlight  ----------*/
.home-spotlight{background: @gray-lightest;}
/*----------  Class for headers of Title module class  ----------*/

.section{
  .section-ct{
    .section-header{margin-top: @mm-vertical-padding;margin-bottom: 25px;
      h3{text-align: center;font-size: @font-size-h1;text-transform: uppercase;}
    }
  }
}



/*==========================
/ This transition for mixins/
==========================*/
:hover, :focus, a, img, .btn, i, {
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

/*=======================================================
=            Delay animation for animate.css            =
=======================================================*/
.multidelay{
  &:nth-child(1){animation-delay:100ms;-webkit-animation-delay:100ms;}
  &:nth-child(2){animation-delay:400ms;-webkit-animation-delay:200ms;}
  &:nth-child(3){animation-delay:600ms;-webkit-animation-delay:300ms;}
  &:nth-child(4){animation-delay:800ms;-webkit-animation-delay:400ms;}
  &:nth-child(5){animation-delay:1000ms;-webkit-animation-delay:500ms;}
  &:nth-child(6){animation-delay:1200ms;-webkit-animation-delay:600ms;}
}
.delay2{animation-delay:400ms;-webkit-animation-delay:200ms;}
.delay3{animation-delay:600ms;-webkit-animation-delay:300ms;}
/*=====  End of Delay animation for animate.css  ======*/

// ---------------------------------------------------------
// MAIN TEMPLATE STYLES
// ---------------------------------------------------------
.p-l-0{padding-left: 0;}
.p-r-0{padding-right: 0;}
.p-0{padding: 0;}

/*==========================================
=            Content type Class            =
==========================================*/
//Responsive Video Embed
.video-embed{
  position: relative;
  padding-bottom: 51%;
  padding-top: 30px;
  height: 0;
  margin: 0 0 (@t3-global-margin / 2);
  border:1px solid @t3-border-color;
  // The video
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border:none;
  }
}

//Audio Embed
.audio-embed{margin-bottom: (@t3-global-margin / 2);
  iframe{display: block;width: 100%;border:none;}
}

//Type Gallery
.type-gallery{margin-bottom: (@t3-global-margin / 2);
  .carousel-inner{
    .item{margin-bottom: 0;}
  }
}

//Type Quote
.type-quote{margin-bottom: (@t3-global-margin / 2);background-color: @brand-primary;padding: 60px 50px;position: relative;z-index: 1;
  &:before{content: '\f347';font-family: 'Ionicons';font-size:100px;position: absolute;top: 0px;left: 20px;line-height: 1;transform:rotate(45deg);-webkit-tranform:rotate(45deg);color: fade(@white, 30%);z-index: -1;}
  blockquote{margin: 0;border:none;padding: 0;
    p{font-size: 16px;color: @white;}
    footer{font-size: @font-size-h3;color: @white;font-weight: 600;}
  }
}

//Type Link
.type-link{margin-bottom: (@t3-global-margin / 2);background-color: @brand-primary;text-align: center;position: relative;z-index: 1;
  &:before{content: '\f1fe';font-family: 'Ionicons';font-size:100px;position: absolute;top: 0px;left: 20px;line-height: 1;transform:rotate(-45deg);-webkit-tranform:rotate(45deg);color: fade(@white, 30%);z-index: -1;}
  a{display:block;padding: 120px 50px;color: @white;font-size: @font-size-h2;font-family: @headings-font-family;}
}

// Type in  Categories
.type-cat{
  .type-link{
    a{padding:90px 50px;}
  }
}

// 
// HEADER
// ---------------------------------------------------------

.t3-header {
  margin:0;
}


// Logo
// ----
.logo {

  text-align: center;

  // Left align the logo on  Tablets / Desktop
  @media screen and (min-width: @screen-sm) {
    text-align: left;
    display: inline-block;
    margin-right: 15px;
  }

  a {
    display: inline-block;
    line-height: 1;
    margin: 0;
  }
}

// Logo Image
// ----------
.logo-image {
  // Hide sitename and slogan
  span, small {
    display: none;
  }
}

// Logo Text
// ----------
.logo-text {

  a {
    text-decoration: none;
    font-size: ceil(@font-size-base * 2);
    font-weight: bold;
  }

  &:hover a,
  a:hover,
  a:active,
  a:focus {
    text-decoration: none;
  }

  // Taglines
  .site-slogan {
    display: block;
    font-size: @font-size-base;
    margin-top: 5px;
  }

}

// Head Search
// -----------
.head-search {

  margin-top: @t3-global-margin;
  .clearfix();

  form {
    margin: 0;
  }
  
  label {
    display: none;
  }
  
  .search {
    position: relative;
    // Place a search icon
    &:before {
      font-family: "FontAwesome";
      content: "\f002";
      display: block;
      position: absolute;
      left: 10px;
      top: 6px;
      color: @gray;
    }
    // Float to right on Tablets / Desktop
    @media screen and (min-width: @screen-sm) {
      float: right;
    }
  }
  
  .form-control {
    width : 100%;
    padding-left: 30px;

    // Width Control on Tablets / Desktop
    @media screen and (min-width: @screen-sm) {
      width: 150px;
      // focus state
      &:focus {
        width: 200px;
      }
    }

  }

}

// Search 
// -----------
.search {
    position: relative;
  
  .form-control {
    width : 100%;
  }
  button{position: absolute;top: 0;right: 0;width: 45px;height: 40px; text-indent: 100px;border-radius: 0 4px 4px 0;background: @brand-primary;color: @white;font-size: 0;
    &:hover, &:focus{background: @brand-primary;}
    &:after{content: "\f002";display: block;font-family: FontAwesome;font-size: 18px;color: #ffffff;line-height: 1;text-indent: 0;}
  }
}

// ---------------------------------------------------------
// SPOTLIGHTS
// ---------------------------------------------------------

.t3-sl {
  padding-bottom: @t3-global-padding + 24;
  padding-top: @t3-global-padding + 24;
  // Larger padding in Tablet / Desktop
  @media screen and (min-width: @screen-sm) {
    padding-bottom: @t3-global-padding * 2 + 8;
    padding-top: @t3-global-padding * 2 + 8;
  }  
}

// Spotlight 1
// -----------
.t3-sl-1 {
}

// Spotlight 2
// -----------
.t3-sl-2 {
}

// Spotlight 3
// -----------
.t3-sl-3 {
}

// Spotlight 4
// -----------
.t3-sl-4 {
}



// ---------------------------------------------------------
// MAIN BODY
// ---------------------------------------------------------
.t3-mainbody {
  padding-top: (@line-height-computed + 8);
  padding-bottom: (@line-height-computed + 8);
}

// Content
// -------
.t3-content {
  padding-top: @line-height-computed ;
  padding-bottom: @line-height-computed;
}

// Sidebars
// --------
.t3-sidebar {
  padding-top: @line-height-computed;
  padding-bottom: @line-height-computed;
}

.t3-sidebar-1 {
}

.t3-sidebar-2 {
}



// ---------------------------------------------------------
// FOOTER
// ---------------------------------------------------------
.t3-footer {
  border-top: 5px solid @gray-light;
  background: @t3-footer-background;
  color: @t3-footer-text-color;
  .clearfix();

  // small
  small {
    display: block;
    font-size: 100%; //Use global footer font size.
  }

  // links
  a {
    // Link States
    &:hover, &:active, &:focus {
    }
  }

}

// Foot Nav
// --------
.t3-footnav {
  padding: @t3-global-padding 0;
  .clearfix();

  // Larger padding on Tablet / Desktop
  @media screen and (min-width: @screen-sm) {
    padding: (@t3-global-padding * 2) 0;
  }

  // Footnav Modules
  .t3-module {
    background: @t3-footer-module-background;
    color: @t3-footer-module-text-color;
    margin-top: @line-height-computed / 2;
    margin-bottom: @line-height-computed / 2;

    .module-title {
      color: @t3-footer-module-title-color;
      font-size: @font-size-large;
      margin-bottom: @line-height-computed / 2;
      text-transform: uppercase;
    }

    ul {
      list-style: none;
      margin-left: 0;
      margin-bottom: 0;
      padding-left: 0;

      > li {
        line-height: 26px;
        // links
        > a {
          color: @t3-footer-module-text-color;
          // Link States
          &:hover, &:active, &:focus {
            color: @t3-footer-module-text-color;
          }
        }
        > i{font-size: @font-size-large;margin-right: 5px;position: relative;top: 1px;}
      }
    }
    .follow .follow-ct .follow-1 .follow-row a{border-color: @t3-footer-module-text-color;
      &:hover, &:focus{border-color: transparent;}
    }

  }

}

// Copyright
// ---------
.t3-copyright {
  border-top: 1px solid #333;
  font-size: @font-size-small;
  text-transform: uppercase;
  font-weight: 600;
  padding: (@t3-global-padding * 2) 0 (@t3-global-padding * 2);
  text-align: center;
  .clearfix();
  small {
    margin-bottom: 5px;
  }
}

.copyright {
    font-size: (@font-size-small - 2);
}

.poweredby {
  .clearfix();

  // Align right on Tablet / Desktop
  @media screen and (min-width: @screen-sm-min) {
    text-align: left;
  }

  .t3-logo,
  .t3-logo-small {
    opacity: .8;
    display: inline-block;
  }
}
.designedby{
  @media screen and (min-width:@screen-sm-min){
    text-align: right;
  }
}

// Back to Top
// -----------
#back-to-top {
  position: fixed;
  right: @t3-global-margin;
  top: auto;
  z-index: 999;
  display: none;
  bottom: -60px;
 
  @media (min-width: @screen-sm-min) {
    display: block;
  }
 
  .btn {
    background: @brand-primary;
    border: 1px solid @brand-primary;
    color: @white;
    height: 40px;
    width: 40px;
    border-radius: @border-radius-base;
    line-height: 1;
    padding: 0;
    text-align: center;
    .opacity(0.7);
    .transition(0.2s);
 
    &:hover, &:active, &:focus {
      background: @brand-primary;
      outline: none;
      .opacity(1);
    }
  }
 
  &.affix {
    bottom: @t3-global-margin * 2;
  }
 
  a {
    outline: none;
  }
 
  i {
    font-size: @font-size-large + 10;
    line-height: 22px;
  }
}