/*
 * Title:   Miracle | Responsive Multi-Purpose HTML5 Template - Responsive Style file
 * Author:  http://themeforest.net/user/soaptheme
 */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[Table of contents]

1. New Grid System
2. Add clearfix in the grid system
3. Styles for devices(>=1200px)
4. Styles for devices(>=992px and <=1199px)
5. Styles for devices(<=1199px)
6. Styles for devices(<=991px )
7. Styles for devices(>=768px and <= 991px)
8. Styles for devices(<=767px )
9. Styles for devices(>=481px and <= 767px)
10. Styles for devices(<=480px )
11. Styles for devices(<=320px )


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/*
 * Title:   Miracle | Responsive Multi-Purpose HTML5 Template - SCSS Mixin
 * Author:  http://themeforest.net/user/soaptheme
 */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[Table of contents]

1) BORDER RADIUS
2) OPACITY
3) BACKGROUND GRADIENT
4) BOX SHADOW
5) TEXT SHADOW
6) TRANSITION
7) ANIMATION
8) TRANSFORM
9) DESATURATE
10) RETINA
11) GRADIENT IMAGE

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 1) BORDER RADIUS */

/* 2) OPACITY */

/* 3) BACKGROUND GRADIENT */

/* 4) BOX SHADOW */

/* 5) TEXT SHADOW */

/* 6) TRANSITION */

/* 7) ANIMATION */

/* 8) TRANSFORM */

/* 9) DESATURATE */

/* 10) RETINA */

/* 11) GRADIENT IMAGE */

/* 1. New Grid System */

/* 2. Add clearfix in the grid system */



@media (min-width: 992px) {
  .mobile-menu {
    display: none !important;
  }

  .visible-mobile {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .container {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .container {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 1199px) {
  [class^="col-lg-"].pull-right {
    float: none !important;
  }
}

@media (max-width: 991px) {
  .hidden-mobile {
    display: none !important;
  }

  [class^="col-md-"].pull-right,  [class*=" col-md-"].pull-right {
    float: none !important;
  }

  .container {
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
  }

  .callout-box {
    text-align: center;
  }

  .callout-box .callout-content,  .callout-box .callout-text,  .callout-box .callout-action {
    display: block;
    padding: 0;
  }

  .callout-box.style1 .callout-box-wrapper {
    padding: 20px 0 0;
  }

  .callout-box.style1 .callout-text:after {
    display: block;
    content: "";
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 auto 20px;
    width: 300px;
  }

  .callout-box.style1 .callout-text h2 {
    border-right: none;
    padding-right: 0;
    margin-bottom: 20px;
    font-size: 2.5em;
  }

  .callout-box.style1 .callout-stripe-container {
    padding: 0;
  }

  .callout-box.style1 .callout-stripe {
    position: static;
    padding: 15px 20px;
  }

  .callout-box.style1 .callout-stripe img {
    display: block;
    margin: 0 auto 5px;
  }

  .callout-box.style1 .callout-stripe:after {
    display: none;
  }

  .callout-box.style2,  .callout-box.style3 {
    text-align: center;
  }

  .callout-box.style2 .callout-action,  .callout-box.style3 .callout-action {
    text-align: center;
    margin-top: 30px;
  }

  #header {
    /*background: #0f2541;*/
    background: rgba(0,0,0,0.8);
    /*height: 75px;*/
  }

  #header .logo {
    margin: 0 !important;
  }

  #header .logo a {
    color: #fff !important;
  }

  #header .header-top-nav > li {
    margin: 0;
  }

  #header .header-top-nav > li > a {
    /*line-height: 75px;*/
    padding: 10px 5px;
  }

  #header .header-top-nav > li > a .fa {
    color: #ff6600;
    border-color: #ff6600;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }

  #header .header-top-nav > li:hover .fa {
    color: #fff;
    border-color: #fff;
  }

  #header .header-top-nav > li:last-child > a {
    padding-right: 0;
  }

  .responsive-section .callout-image-container .callout-image img {
    margin-top: 30px;
  }
}

/* 7. Styles for devices(>=768px and <= 991px) */

/* 8. Styles for devices(<=767px ) */

@media (max-width: 767px) {
  img {
    max-height: 500px;
  }
  #footer .back-to-top {
    left: 50%;
    margin-left: -25px;
  }

  .same-height > * {
    height: auto !important;
  }

  [class^="col-sm-"].pull-right,  [class*=" col-sm-"].pull-right {
    float: none !important;
  }

  .callout-box.style1 .callout-box-wrapper {
    padding-top: 80px;
  }

  .callout-box.style1 .callout-text:after {
    margin: 0 auto 30px;
    width: 220px;
  }

  .callout-box.style1 .callout-text h2 {
    margin-bottom: 30px;
    font-size: 2em;
  }

  .callout-box.style1 .callout-text h3 {
    margin-bottom: 25px;
    font-size: 1.6666em;
  }

  .callout-box.style1 .callout-action {
    margin-bottom: 20px;
  }

  .callout-box.style3 .callout-text * {
    font-size: 1.8em;
  }

  #footer .footer-wrapper .container > .row > div {
    padding-top: 15px;
    /*padding-bottom: 40px; */
  }

  #footer .footer-wrapper .container > .row > div + div {
    padding-top: 0;
  }

  #footer .footer-wrapper .container > .row > div:last-child {
    padding-top: 15px;
  }

  .animated {
    visibility: visible;
  }
}

/* 9. Styles for devices(>=481px and <= 767px) */

@media (min-width: 481px) and (max-width: 767px) {
  .hidden-xs {
    display: block !important;
  }
}

/* 10. Styles for devices(<=480px ) */

@media (max-width: 480px) {
  .hidden-xs {
    display: none !important;
  }
}