// Variables
// ==========================================
@navbar-btn-radius : 0px;

body {
  position: relative;
  .transition(all .25s ease-out);
}
.op-section{ outline: 0; }
/* ==========================================
   Blocks: Common
 ============================================ */
 .btn{ .transition(all .25s ease-out); }
.op-section {
  // Subtitle(aka desc) and media objects
  > .desc,
  > .media p {
    font-size: 1.143em;
  }
}

// Section + Button
.op-section .btn {
  border: 0;
}

// Utilities
// -------------------------------------------
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
  // Margin Left Big
  .ml-big{ margin-left: 1rem;}
  // Margin Right Big
  .mr-big{ margin-right: 1rem;}
  // Padding Left Big
  .pl-big { padding-left: 20px; }
  // Padding Right Big
  .pr-big { padding-right: 20px; }

}
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
  // Big Margin Left
  .ml-big{ margin-left: 4rem;}
  // Big Margin Right
  .mr-big{ margin-right: 4rem;}
  // Padding Left Big
  .pl-big { padding-left: 40px; }
  // Padding Right Big
  .pr-big { padding-right: 40px; }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {
  // Big Margin Left
  .ml-big{ margin-left: 8rem;}
  // Big Margin Right
  .mr-big{ margin-right: 8rem;}
  // Padding Left Big
  .pl-big { padding-left: 60px; }
  // Padding Right Big
  .pr-big { padding-right: 60px; }
}

// Social icons based on wildcard slector
// -------------------------------------------
.social-links {
  > a {
    font-family: FontAwesome;
    font-size: 20px;
    display: inline-block;
    text-decoration: none;
    margin: 0 5px;
    &:hover{ text-decoration: none; }
  }
  > a[href*='facebook.com']{
    &:before { content: '\f09a';}
    &:hover:before{ color: #3b5998; }
  }
  > a[href*='instagram.com']{
    &:before { content: '\f16d';}
    &:hover:before{ color: #3b5998; }
  }
  > a[href*='twitter.com']{
    &:before {content: '\f099';}
    &:hover:before { color : #00abf0; }
  }
  > a[href*='linkedin.com']{
    &:before {content: '\f0e1';}
    &:hover:before { color: #105b88;}
  }
  > a[href*='plus.google.com']{
    &:before { content: '\f0d5'; }
    &:hover:before { color : #df4b38; }
  }
  // Design Community
  > a[href*='behance.net']{
    &:before { content: '\f1b4'; }
    &:hover:before { color: #1478ff; }
  }
  > a[href*='dribbble.com']{
    &:before { content: '\f17d'; }
    &:hover:before { color: #f16396; }
  }
  > a[href*='flickr.com']{
    &:before { content: '\f16e'; }
    &:hover:before { color: #fe0084; }
  }
  // Coding Community
  > a[href*='github.com']:before {
    content: '\f09b';
  }
  > a[href*='codepen.io']:before {
    content: '\f1cb';
  }

}

/* ==========================================
   Blocks: Navbar
 ============================================ */


/* OFF CANVAS MENU
-------------------------------------------------- */

/* ==========================================
   Blocks: Header
 ============================================ */

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {}

/* Since positioning the image, we need to help out the caption */
.carousel-caption { z-index: 10; }

/* Declare heights because of positioning of img element */
.carousel .item {}

.carousel-inner > .item > .slide-image {
  position: absolute; top: 0; left: 0;
  min-width: 100%;
}

.carousel-inner > .item .carousel-caption {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.carousel-indicators li{
  width: 15px; height: 15px;
  border-color: transparent;
  background: rgba(50,50,50,.1);
}
.carousel-indicators li.active{
  width: 18px; height: 18px;
  background: rgba(50,50,50,.4);
}

/* ==========================================
   Blocks: Contents
 ============================================ */

/*
	Button
*/
// .content-4
// .content-5 {
//   .btn {
//     margin-top: 20px;
//     border-radius: 0px;
//     .transition(all 0.2s linear);
//   }
// }

/* ==========================================
   Blocks: Portfolios
 ============================================ */
.portfolios figure {
  margin-top: 15px;
  margin-bottom: 15px;
}

/* ==========================================
  Blocks: Blogs
============================================ */
.blogs .row {
  margin-top: 30px;
}

.blog-1 {
  .title {
    margin-top: 0;
    margin-bottom: 1rem;
  }
}

/* ==========================================
  Blocks: Team
============================================ */
.teams{
  figure{ margin-bottom: 15px; }

  .overlay-background{
    .social-links a{ color: #fff; }
  }
}

/* ==========================================
  Blocks: coming soon
============================================ */
.coming-soon{
  @media(max-width:767px){
    min-height:100%;
    .uk-position-center{
      position:relative !important;
      top:auto;
      left:auto;
      transform: none;
    }
  }
}