/*  -------------------------------------------------------------------------------
 *  [ 13 ] - Media Queries
 *  -------------------------------------------------------------------------------
 *  
 *  This part contains the all changes that needed for elements for the Bootsrap
 *  widths like iPhone image in About Us section
 *  
 *  It's divided to the following sections:
 *  
 *     |
       |-->   - Width between 1200px to 0
       |-->   - Width between 992px to 1199px
 *     |-->   - Width between 768px to 991px
       |-->   - Width between 767px to 0
       |-->   - Width between 600px to 0
 *     |-->   - Width between 480px to 0
 *     |-->   - Width between 320px to 0



=Table of contents
1- GENERAL STYLING
2- PAGE LOADER
3- BOTTON SCROLL TO TOP
4- HEADER
  1-1-NAVBAR-TOP
  1-2-headear
5- ABOUT US
6- SERVICES
7- PORTFOLIO
8- TEAM
9- JOURNAL 
10- TESTIMONIALS
11- CONTACTS
12- COPYRIGHT
13- Media Queries


*/


/** Width between 1200x to 0 
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

@media (min-width: 1200px) {

    
}


/** Width between 768px to 991px 
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

@media (min-width: 992px) and (max-width: 1199px) {

    /* GENERAL STYLING */

    .title-section {
        margin-bottom: 40px;
    }

    .title-section h5 {
        line-height: 20px;
    }

    .btn-default {
        padding: 10px 11px;
    }

    /* HEADER */

    .navbar-default .navbar-nav li a {
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        padding: 0 13px;
        text-transform: uppercase;
        transition: all 0.8s ease-in-out 0s;
    }

    #header .item .carousel-caption {
        bottom: 33%;
        left: 0;
        padding: 0 10px;
        right: 0;
        z-index: 10;
    }

    #header .item .carousel-caption h1 {
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 20px;
    }

    /* testimonials */

    .carousel-inner .item .client-information {
        left: 0;
        margin-left: auto;
        margin-right: auto;
        margin-top: 70px;
        position: absolute;
        right: 0;
        width: 50%;
    }

    .controls.carousel-indicators {
        display: inline-block;
        left: 0;
        margin-left: 0;
        position: relative;
        top: 299px;
        width: auto;
    }

}


/** Width between 768px to 991px 
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

@media (min-width: 768px) and (max-width: 991px) {

    /* GENERAL STYLING */

    .title-section {
        margin-bottom: 40px;
    }

    .title-section h5 {
        line-height: 20px;
    }

    .btn-default {
        padding: 10px 11px;
    }

    /* HEADER */

    #header .item .carousel-caption {
        bottom: 33%;
        left: 0;
        padding: 0 10px;
        right: 0;
        z-index: 10;
    }

    #header .item .carousel-caption h1 {
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 20px;
    }

    /* ABOUT */

    #about .about-description p {
        margin-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
    }

    #about .about-description .soial-media {
        display: block;
        margin-bottom: 20px;
        text-align: center;
    }

    #about .about-description .soial-media ul {
        float: none;
    }

    /*portfolio*/

    #portfolio .portfolio-list ul li {
        cursor: pointer;
        display: inline-block;
        float: none;
        letter-spacing: 2px;
        padding: 5px 9px;
        text-transform: uppercase;
        transition: all 0.8s ease-in-out 0s;
    }

    .portfolio-thumbnail {
        height: 246px;
        margin: 0 1% 20px;
        width: 48%;
    }

    .portfolio-thumbnail:nth-of-type(2) {
        height: 246px;
        width: 48%;
    }
    .portfolio-thumbnail:nth-of-type(3) {
        height: 246px;
        width: 48%;
    }

    .portfolio-thumbnail:nth-of-type(4) {
        height: 246px;
        width: 48%;
    }
    .portfolio-thumbnail:nth-of-type(5) {
        height: 246px;
        width: 48%;
    }

    .portfolio-thumbnail:nth-of-type(6) {
        height: 246px;
        width: 48%;
    }

    .portfolio-thumbnail:last-child {
        height: 246px;
        width: 48%;
    }

    /* team */

    #team .team-info {
        margin-bottom: 20px;
    }

    /* journal */

    #journal .blog-description {
        border: 1px solid #f5f5f5;
        margin-bottom: 20px;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    /* testimonials */

    .carousel-inner .item .client-information {
        left: 0;
        margin-left: auto;
        margin-right: auto;
        margin-top: 90px;
        position: absolute;
        right: 0;
        width: 100%;
    }

    .controls.carousel-indicators {
        top: 300px;
    }

    /* contact */

    #contact .address {
        margin-bottom: 20px;
        text-align: center;
    }

    #contact h3 {
        text-align: center;
    }

    #contact .address p {
        text-align: center;
    }

    .soial-media {
        display: inline-block;
        text-align: center;
    }

    .address ul {
        float: none;
        margin-bottom: 20px;
        text-align: center;
        width: 100%;
    }

    .office ul {
        margin-bottom: 20px;
        text-align: center;
        width: 100%;
    }

    .contact-form .btn {
        padding: 10px;
        width: 100%;
    }

}


/** Width between 767px to 0 
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

@media (max-width: 767px) {

    /* GENERAL STYLING */

    .title-section {
        margin-bottom: 40px;
    }

    .title-section h5 {
        line-height: 20px;
    }

    .btn-default {
        padding: 10px 11px;
    }

    /* HEADER */

    .navbar-wrapper {
        background: #fff none repeat scroll 0 0;
        position: relative;
        z-index: 50;
    }

    .navbar-default {
        text-align: center;
    }

    .navbar-toggle {
        float: none;
        margin-bottom: 8px;
        margin-right: 0;
        margin-top: 8px;
    }

    .navbar-header span {
        padding-bottom: 0px;
        padding-top: 0px;
    }

    .navbar-wrapper .navbar .navbar-nav {
        display: inline;
    }

    .navbar-default .navbar-nav li {
        float: none;
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-default .navbar-nav li a {
        color: #000;
        padding: 5px 0;
    }

    #header .item .carousel-caption {
        bottom: 40%;
        left: 0;
        padding: 0 10px;
        right: 0;
        z-index: 10;
    }

    #header .item .carousel-caption h1 {
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 20px;
    }

    /* ABOUT */

    #about .about-description p {
        margin-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
    }

    #about .about-description .soial-media {
        display: block;
        margin-bottom: 20px;
        text-align: center;
    }

    #about .about-description .soial-media ul {
        float: none;
    }

    /*portfolio*/

    #portfolio .portfolio-list ul li {
        cursor: pointer;
        display: inline-block;
        float: none;
        letter-spacing: 2px;
        padding: 5px 9px;
        text-transform: uppercase;
        transition: all 0.8s ease-in-out 0s;
    }

    .portfolio-thumbnail {
        height: 246px;
        margin: 0 1% 20px;
        width: 48%;
    }

    .portfolio-thumbnail:nth-of-type(2) {
        height: 246px;
        width: 48%;
    }

    .portfolio-thumbnail:nth-of-type(3) {
        height: 246px;
        width: 48%;
    }

    .portfolio-thumbnail:nth-of-type(4) {
        height: 246px;
        width: 48%;
    }

    .portfolio-thumbnail:nth-of-type(5) {
        height: 246px;
        width: 48%;
    }

    .portfolio-thumbnail:nth-of-type(6) {
        height: 246px;
        width: 48%;
    }

    .portfolio-thumbnail:last-child {
        height: 246px;
        width: 48%;
    }

    /* team */

    #team .team-info {
        margin-bottom: 20px;
    }

    /* journal */

    #journal .blog-description {
        border: 1px solid #f5f5f5;
        margin-bottom: 20px;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    /* testimonials */

    .carousel-inner .item .client-information {
        left: 0;
        margin-left: auto;
        margin-right: auto;
        margin-top: 90px;
        position: absolute;
        right: 0;
        width: 100%;
    }

    .controls.carousel-indicators {
        top: 300px;
    }

    /* contact */

    #contact .address {
        margin-bottom: 20px;
        text-align: center;
    }

    #contact h3 {
        text-align: center;
    }

    #contact .address p {
        text-align: center;
    }

    .soial-media {
        display: inline-block;
        text-align: center;
    }

    .address ul {
        float: none;
        margin-bottom: 20px;
        text-align: center;
        width: 100%;
    }

    .office ul {
        margin-bottom: 20px;
        text-align: center;
        width: 100%;
    }

    .contact-form .btn {
        padding: 10px;
        width: 100%;
    }

}


/** Width between 600px to 0 
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

@media (max-width: 600px) {

    /* GENERAL STYLING */

    .title-section {
        margin-bottom: 40px;
    }

    .title-section h5 {
        line-height: 20px;
    }

    .btn-default {
        padding: 10px 11px;
    }

    /* HEADER */

    .navbar-wrapper {
        background: #fff none repeat scroll 0 0;
        position: relative;
        z-index: 50;
    }

    .navbar-default {
        text-align: center;
    }

    .navbar-toggle {
        float: none;
        margin-bottom: 8px;
        margin-right: 0;
        margin-top: 8px;
    }

    .navbar-header span {
        padding-bottom: 0px;
        padding-top: 0px;
    }

    .navbar-wrapper .navbar .navbar-nav {
        display: inline;
    }

    .navbar-default .navbar-nav li {
        float: none;
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-default .navbar-nav li a {
        color: #000;
        padding: 5px 0;
    }

    #header .item .carousel-caption {
        bottom: 40%;
        left: 0;
        padding: 0 10px;
        right: 0;
        z-index: 10;
    }

    #header .item .carousel-caption h1 {
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 20px;
    }

    /* ABOUT */

    #about .about-description p {
        margin-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
    }

    #about .about-description .soial-media {
        display: block;
        margin-bottom: 20px;
        text-align: center;
    }

    #about .about-description .soial-media ul {
        float: none;
    }

    /*portfolio*/

    #portfolio .portfolio-list ul li {
        cursor: pointer;
        display: inline-block;
        float: none;
        letter-spacing: 2px;
        padding: 5px 9px;
        text-transform: uppercase;
        transition: all 0.8s ease-in-out 0s;
    }

    .portfolio-thumbnail {
        height: 246px;
        margin: 0 1% 20px;
        width: 48%;
    }

    .portfolio-thumbnail:nth-of-type(2) {
        height: 246px;
        width: 48%;
    }

    .portfolio-thumbnail:nth-of-type(3) {
        height: 246px;
        width: 48%;
    }

    .portfolio-thumbnail:nth-of-type(4) {
        height: 246px;
        width: 48%;
    }

    .portfolio-thumbnail:nth-of-type(5) {
        height: 246px;
        width: 48%;
    }

    .portfolio-thumbnail:nth-of-type(6) {
        height: 246px;
        width: 48%;
    }

    .portfolio-thumbnail:last-child {
        height: 246px;
        width: 48%;
    }

    /* team */

    #team .team-info {
        margin-bottom: 20px;
    }

    /* journal */

    #journal .blog-description {
        border: 1px solid #f5f5f5;
        margin-bottom: 20px;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    /* testimonials */

    .carousel-inner .item .client-information {
        left: 0;
        margin-left: auto;
        margin-right: auto;
        margin-top: 90px;
        position: absolute;
        right: 0;
        width: 100%;
    }

    .controls.carousel-indicators {
        top: 300px;
    }

    /* contact */

    #contact .address {
        margin-bottom: 20px;
        text-align: center;
    }

    #contact h3 {
        text-align: center;
    }

    #contact .address p {
        text-align: center;
    }

    .soial-media {
        display: inline-block;
        text-align: center;
    }

    .address ul {
        float: none;
        margin-bottom: 20px;
        text-align: center;
        width: 100%;
    }

    .office ul {
        margin-bottom: 20px;
        text-align: center;
        width: 100%;
    }

    .contact-form .btn {
        padding: 10px;
        width: 100%;
    }

}


/** Width between 480px to 0 
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

@media (max-width: 480px) {

    /* GENERAL STYLING */

    .title-section {
        margin-bottom: 40px;
    }

    .title-section h5 {
        line-height: 20px;
    }

    .btn-default {
        padding: 10px 11px;
    }

    /* HEADER */

    .navbar-wrapper {
        background: #fff none repeat scroll 0 0;
        position: relative;
        z-index: 50;
    }

    .navbar-default {
        text-align: center;
    }

    .navbar-toggle {
        float: none;
        margin-bottom: 8px;
        margin-right: 0;
        margin-top: 8px;
    }

    .navbar-header span {
        padding-bottom: 0px;
        padding-top: 0px;
    }

    .navbar-wrapper .navbar .navbar-nav {
        display: inline;
    }

    .navbar-default .navbar-nav li {
        float: none;
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-default .navbar-nav li a {
        color: #000;
        padding: 5px 0;
    }

    #header .item .carousel-caption {
        bottom: 40%;
        left: 0;
        padding: 0 10px;
        right: 0;
        z-index: 10;
    }

    #header .item .carousel-caption h1 {
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 20px;
    }

    /* ABOUT */

    #about .about-description p {
        margin-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
    }

    #about .about-description .soial-media {
        display: block;
        margin-bottom: 20px;
        text-align: center;
    }

    #about .about-description .soial-media ul {
        float: none;
    }

    /* SERVICES */

    #services .block-services {
        margin-bottom: 20px;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    /*portfolio*/

    #portfolio .portfolio-list ul li {
        cursor: pointer;
        display: inline-block;
        float: none;
        letter-spacing: 2px;
        padding: 5px 10px;
        text-transform: uppercase;
        transition: all 0.8s ease-in-out 0s;
    }

    .portfolio-thumbnail {
        height: 256px;
        margin: 0 0 20px;
        width: 100%;
    }

    .portfolio-thumbnail:nth-of-type(2) {
        margin: 0 0 20px;
        height: 256px;
        width: 100%;
    }

    .portfolio-thumbnail:nth-of-type(3) {
        margin: 0 0 20px;
        height: 256px;
        width: 100%;
    }

    .portfolio-thumbnail:nth-of-type(4) {
        margin: 0 0 20px;
        height: 256px;
        width: 100%;
    }

    .portfolio-thumbnail:nth-of-type(5) {
        margin: 0 0 20px;
        height: 256px;
        width: 100%;
    }

    .portfolio-thumbnail:nth-of-type(6) {
        margin: 0 0 20px;
        height: 256px;
        width: 100%;
    }

    .portfolio-thumbnail:last-child {
        margin: 0 0 20px;
        height: 256px;
        width: 100%;
    }

    /* team */

    #team .team-info {
        margin-bottom: 20px;
    }

    /* journal */

    #journal .blog-description {
        border: 1px solid #f5f5f5;
        margin-bottom: 20px;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    /* testimonials */

    .carousel-inner .item .client-information {
        left: 0;
        margin-left: auto;
        margin-right: auto;
        margin-top: 70px;
        position: absolute;
        right: 0;
        width: 100%;
    }

    .controls.carousel-indicators {
        top: 300px;
    }

    /* contact */

    #contact .address {
        margin-bottom: 20px;
        text-align: center;
    }

    #contact h3 {
        text-align: center;
    }

    #contact .address p {
        text-align: center;
    }

    .soial-media {
        display: inline-block;
        text-align: center;
    }

    .address ul {
        float: none;
        margin-bottom: 20px;
        text-align: center;
        width: 100%;
    }

    .office ul {
        margin-bottom: 20px;
        text-align: center;
        width: 100%;
    }

    .contact-form .btn {
        padding: 10px;
        width: 100%;
    }

}


/** Width between 320px to 0 
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

@media (max-width: 320px) {

    /* GENERAL STYLING */

    .title-section {
        margin-bottom: 40px;
    }

    .title-section h5 {
        line-height: 20px;
    }

    .btn-default {
        padding: 10px 11px;
    }

    /* HEADER */

    .navbar-wrapper {
        background: #fff none repeat scroll 0 0;
        position: relative;
        z-index: 50;
    }

    .navbar-default {
        text-align: center;
    }

    .navbar-toggle {
        float: none;
        margin-bottom: 8px;
        margin-right: 0;
        margin-top: 8px;
    }

    .navbar-header span {
        padding-bottom: 0px;
        padding-top: 0px;
    }

    .navbar-wrapper .navbar .navbar-nav {
        display: inline;
    }

    .navbar-default .navbar-nav li {
        float: none;
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-default .navbar-nav li a {
        color: #000;
        padding: 5px 0;
    }

    #header .item .carousel-caption {
        bottom: 26%;
        left: 0;
        padding: 0 10px;
        right: 0;
        z-index: 10;
    }

    #header .item .carousel-caption h1 {
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 20px;
    }

    /* ABOUT */

    #about .about-description p {
        margin-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
    }

    #about .about-description .soial-media {
        display: block;
        text-align: center;
    }

    #about .about-description .soial-media ul {
        float: none;
        margin-bottom: 20px;
    }

    /* SERVICES */

    #services .block-services {
        margin-bottom: 20px;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    /*portfolio*/

    #portfolio .portfolio-list ul li {
        cursor: pointer;
        display: block;
        letter-spacing: 2px;
        padding: 5px 10px;
        text-transform: uppercase;
        transition: all 0.8s ease-in-out 0s;
    }



    .portfolio-thumbnail {
        height: 256px;
        margin: 0 0 20px;
        width: 100%;
    }

    .portfolio-thumbnail:nth-of-type(2) {
        margin: 0 0 20px;
        height: 256px;
        width: 100%;
    }

    .portfolio-thumbnail:nth-of-type(3) {
        margin: 0 0 20px;
        height: 256px;
        width: 100%;
    }

    .portfolio-thumbnail:nth-of-type(4) {
        margin: 0 0 20px;
        height: 256px;
        width: 100%;
    }

    .portfolio-thumbnail:nth-of-type(5) {
        margin: 0 0 20px;
        height: 256px;
        width: 100%;
    }

    .portfolio-thumbnail:nth-of-type(6) {
        margin: 0 0 20px;
        height: 256px;
        width: 100%;
    }

    .portfolio-thumbnail:last-child {
        margin: 0 0 20px;
        height: 256px;
        width: 100%;
    }

    /* team */

    #team .team-info {
        margin-bottom: 20px;
    }

    /* journal */

    #journal .blog-description {
        border: 1px solid #f5f5f5;
        margin-bottom: 20px;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    /* testimonials */

    .carousel-inner .item .client-information {
        left: 0;
        margin-left: auto;
        margin-right: auto;
        margin-top: 35px;
        position: absolute;
        right: 0;
        width: 100%;
    }

    .controls.carousel-indicators {
        top: 320px;
    }

    /* contact */

    #contact .address {
        margin-bottom: 20px;
        text-align: center;
    }

    #contact h3 {
        text-align: center;
    }

    #contact .address p {
        text-align: center;
    }

    .soial-media {
        display: inline-block;
        text-align: center;
    }

    .address ul {
        float: none;
        margin-bottom: 20px;
        text-align: center;
        width: 100%;
    }

    .office ul {
        margin-bottom: 20px;
        text-align: center;
        width: 100%;
    }

    .contact-form .btn {
        padding: 10px;
        width: 100%;
    }
    
}