/*  -------------------------------------------------------------------------------
 *  [ 16 ] - 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- navbar-top
 5- HEADER
 6- services
 7- about-us
 8- My skills
 9- portfolio
 10- resume
 11- journal
 12- newsletter
 13- contact
 14- footer
 15- Media Queries


*/


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

@media (min-width: 1200px) {}


/** Width between 992px to 1199px 
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */


/** Width between 992px to 1023px 
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

@media (min-width: 993px) and (max-width: 1023px) {

        /*-----------------------------------------------------------------------------------*/
    /*   6- Header 
/*-----------------------------------------------------------------------------------*/
    .header-two .header-content {
    text-align: center;
    width: 100%;
}

.header-four .header-content {
    width: 100%;
    left: 0;
    text-align: center;
}
.header-four:before {
    display: none !important;
}

    /*-----------------------------------------------------------------------------------*/
    /* 13- Services
    /*-----------------------------------------------------------------------------------*/
.cont-services .services-block-two i {
    font-size: 25px !important;
}

}


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

@media (max-width: 992px) {
    /*-----------------------------------------------------------------------------------*/
    /*  5- navbar-top  
/*-----------------------------------------------------------------------------------*/
    nav.navbar.bootsnav .navbar-header {
        float: none;
        display: block;
        text-align: center;
        padding-left: 30px;
        padding-right: 30px;
    }
    nav.navbar.bootsnav .navbar-header {
        padding-left: 15px;
        padding-right: 15px;
    }

    nav.bootsnav .container {
        position: relative;

        margin-right: 0 !important;
        left: auto;
        right: auto;
        width: 100%;
    }
    nav.navbar.bootsnav.navbar-transparent .logo {
        position: relative;
        display: inline-block;
        height: 60px;
    }
    .navbar-header .logo {
        display: inline-block;
        height: 60px;
        text-align: center;
        float: left;
    }

    nav .logo>a {
        padding-top: 13px;
        padding-bottom: 0px;
    }

        /*-----------------------------------------------------------------------------------*/
    /*   6- Header 
/*-----------------------------------------------------------------------------------*/
    .header-two .header-content {
    text-align: center;
    width: 100%;
}

.header-four .header-content {
    width: 100%;
    left: 0;
    text-align: center;
}
.header-four:before {
    display: none !important;
}

}


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

@media (min-width: 768px) and (max-width: 991px) {
    /*-----------------------------------------------------------------------------------*/
    /*  1-GENERAL STYLING
/*-----------------------------------------------------------------------------------*/
    h1 {
        font-size: 34px !important;
    }
    h1 strong {
        font-size: 52px !important;
    }
    .paddsection {
        padding: 50px 0;
    }
    .marg-top {
        margin-top: 0px;
    }
    .section-title h2 {
        text-transform: inherit;
        font-size: 30px;
    }
    .r-mb-30 {
        margin-bottom: 30px;
    }
    .r-mb-0 {
        margin-bottom: 0px;
    }
    /*-----------------------------------------------------------------------------------*/
    /*  5- navbar-top  
/*-----------------------------------------------------------------------------------*/
    nav.bootsnav .container {
        position: relative;
        padding-left: 0;
        padding-right: 0;
        margin-right: 0 !important;
        left: auto;
        right: auto;
        width: 100%;
    }
    nav.navbar.bootsnav .navbar-header {
        float: none;
        display: block;
        text-align: center;
        padding-left: 30px;
        padding-right: 30px;
    }
    nav.navbar.bootsnav .navbar-header {
        padding-left: 15px;
        padding-right: 15px;
    }
    nav.navbar.bootsnav .navbar-toggle {
        float: right;
        margin-right: 0;
        margin-top: 4px;
    }
    nav.navbar.bootsnav.navbar-transparent .logo {
        float: left;
        height: 60px;
    }
    .navbar-header .logo {
        display: inline-block;
        height: 60px;
        text-align: center;
        float: left;
    }
    nav.navbar.bootsnav .navbar-nav {
        background: #fff;
    }
    nav .logo>a {
        padding-top: 13px;
        padding-bottom: 0px;
    }
    .attr-nav>ul {
        padding: 0;
        margin: 0 -15px -7px 0;
        display: none;
    }

    /*-----------------------------------------------------------------------------------*/
    /*   6- Header 
/*-----------------------------------------------------------------------------------*/
    .header-two .header-content {
    text-align: center;
    width: 100%;
}
    /*-----------------------------------------------------------------------------------*/
    /*   7- About services 
/*-----------------------------------------------------------------------------------*/
    #about-services .cont-services .services-block.services-block {
        margin-bottom: 30px;
        border: 1px solid #f7f5f6;
    }
    #about-services .cont-services .services-block:hover {
        box-shadow: 0 5px 10px 0px rgba(17, 21, 23, .1);
        border: 1px solid #f7f5f6;
    }
    /*-----------------------------------------------------------------------------------*/
    /*  8- about-us
/*-----------------------------------------------------------------------------------*/
    #about .about-descr {
        margin-top: 0;
        text-align: center;
        padding-top: 0;
    }
    #about .about-descr .about-title {
        text-align: center;
    }
    /*-----------------------------------------------------------------------------------*/
    /*  9- Our Team
/*-----------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------*/
    /*  10- My skills
/*-----------------------------------------------------------------------------------*/
    #skills h2 {
        font-size: 30px;
    }
    /*-----------------------------------------------------------------------------------*/
    /*  11- Counter
/*-----------------------------------------------------------------------------------*/
    #counter .info-me {
        border: 1px solid #f7f5f6;
    }
    #counter .info-me:hover {
        box-shadow: 0 5px 10px 0px rgba(17, 21, 23, .1);
        border: 1px solid #f7f5f6;
    }
    /*-----------------------------------------------------------------------------------*/
    /*  12 - brands
/*-----------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------*/
    /* 13- Services
/*-----------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------*/
    /*  17- PRICE
/*-----------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------*/
    /*  18- journal
/*-----------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------*/
    /*  20- footer
/*-----------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------*/
    /*  21- seo-contact
/*-----------------------------------------------------------------------------------*/
    #seo-contact .content-seo {
        text-align: center;
    }
    #seo-contact .content-seo h3 {
        margin-bottom: 25px;
    }
    #seo-contact .seo-btn {
        text-align: center;
    }
    /*-----------------------------------------------------------------------------------*/
    /*  22- seo-contact
    /*-----------------------------------------------------------------------------------*/
    .domine-search h3 {
        margin-bottom: 25px;
    }
    .selectdomine {
        width: 100%;
        position: relative;
    }
    .domine-search .btn.btn-mdone {
        margin-left: 0;
    }
}


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

@media (max-width: 767px) {
    /*-----------------------------------------------------------------------------------*/
    /*  1-GENERAL STYLING
    /*-----------------------------------------------------------------------------------*/
    h1 {
        font-size: 34px !important;
    }
/*     h1 strong {
    font-size: 52px !important;
} */
    .paddsection {
        padding: 50px 0;
    }
    .marg-top {
        margin-top: 0px;
    }
    .section-title h2 {
        text-transform: inherit;
        font-size: 30px;
    }
    .r-mb-30 {
        margin-bottom: 30px;
    }
    /*-----------------------------------------------------------------------------------*/
    /*  5- navbar-top  
    /*-----------------------------------------------------------------------------------*/
    nav.navbar.bootsnav .navbar-header {
        float: none;
        display: block;
        text-align: center;
        padding-left: 30px;
        padding-right: 30px;
    }
    nav.navbar.bootsnav .navbar-header {
        padding-left: 15px;
        padding-right: 15px;
    }
    nav.navbar.bootsnav .navbar-toggle {
        float: right;
        margin-right: 0;
        margin-top: 4px;
    }
    nav.navbar.bootsnav.navbar-transparent .logo {
        float: left;
        height: 60px;
    }
    .navbar-header .logo {
        display: inline-block;
        height: 60px;
        text-align: center;
        float: left;
    }
    nav.navbar.bootsnav .navbar-nav {
        background: #fff;
    }
    nav .logo>a {
        padding-top: 13px;
        padding-bottom: 0px;
    }
    .attr-nav>ul {
        padding: 0;
        margin: 0 -15px -7px 0;
        display: none;
    }

        /*-----------------------------------------------------------------------------------*/
    /*   6- Header 
/*-----------------------------------------------------------------------------------*/
    .header-two .header-content {
    text-align: center;
    width: 100%;
}
    /*-----------------------------------------------------------------------------------*/
    /*   7- About services 
    /*-----------------------------------------------------------------------------------*/
    #about-services .cont-services .services-block.services-block {
        margin-bottom: 30px;
        border: 1px solid #f7f5f6;
    }
    #about-services .cont-services .services-block:hover {
        box-shadow: 0 5px 10px 0px rgba(17, 21, 23, .1);
        border: 1px solid #f7f5f6;
    }
    /*-----------------------------------------------------------------------------------*/
    /*  8- about-us
    /*-----------------------------------------------------------------------------------*/
    #about .about-descr {
        padding-top: 0;
        margin-bottom: 0;
        text-align: center;
    }
    #about .about-descr .about-title {
        text-align: center;
    }
    #about .abou-timg {
        display: none;
    }
    /*-----------------------------------------------------------------------------------*/
    /*  9- Our Team
    /*-----------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------*/
    /*  10- My skills
    /*-----------------------------------------------------------------------------------*/
    #skills h2 {
        font-size: 30px;
    }
    /*-----------------------------------------------------------------------------------*/
    /*  11- Counter
    /*-----------------------------------------------------------------------------------*/
    #counter .info-me {
        border: 1px solid #f7f5f6;
    }
    #counter .info-me:hover {
        box-shadow: 0 5px 10px 0px rgba(17, 21, 23, .1);
        border: 1px solid #f7f5f6;
    }
    /*-----------------------------------------------------------------------------------*/
    /*  12 - brands
    /*-----------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------*/
    /* 13- Services
    /*-----------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------*/
    /*  17- PRICE
    /*-----------------------------------------------------------------------------------*/
    /* 

    /*-----------------------------------------------------------------------------------*/
    /*  18- journal
    /*-----------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------*/
    /*  20- footer
    /*-----------------------------------------------------------------------------------*/
    /*  21 -Portfolio
    /*-----------------------------------------------------------------------------------*/
    .portfolio-list .nav li {
        display: inline-block;
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }
    .portfolio-list .nav li:last-child {
        margin-bottom: 0px;
    }
    .portfolio .portfolio-item .p-s-thre {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    /*-----------------------------------------------------------------------------------*/
    /*  22- seo-contact
/*-----------------------------------------------------------------------------------*/
    #seo-contact .content-seo {
        text-align: center;
    }
    #seo-contact .content-seo h3 {
        margin-bottom: 25px;
    }
    #seo-contact .seo-btn {
        text-align: center;
    }
    /*-----------------------------------------------------------------------------------*/
    /*  23- seo-contact
/*-----------------------------------------------------------------------------------*/
    .domine-search h3 {
        margin-bottom: 25px;
    }
    .selectdomine {
        width: 100%;
        position: relative;
    }
    .domine-search .btn.btn-mdone {
        margin-left: 0;
    }
}


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

@media (max-width: 600px) {
    /*-----------------------------------------------------------------------------------*/
    /*  1-GENERAL STYLING
/*-----------------------------------------------------------------------------------*/
}


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

@media (max-width: 480px) {
    /*-----------------------------------------------------------------------------------*/
    /*  1-GENERAL STYLING
/*-----------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------*/
}


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

@media (max-width: 320px) {
    /*-----------------------------------------------------------------------------------*/
    /*  1-GENERAL STYLING
/*-----------------------------------------------------------------------------------*/
}