/*  -------------------------------------------------------------------------------
 *  [ 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) {

nav.navbar.bootsnav.navbar-transparent .logo {
    margin-top: -16px;
}

.navbar-scrollspy .logo img {
    margin-top: -22px;
}

.attr-nav > ul > li > a {
    color: #212121;
    display: block;
    padding: 13px 10px;
    position: relative;
}
}


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

@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.navbar.bootsnav .navbar-toggle {
    display: inline-block;
    float: left;
    margin-right: -200px;
    margin-top: 10px;
}


nav.navbar.bootsnav.navbar-transparent .logo {
    position: relative;
    display: inline-block;
    height: 60px;
}

.navbar-header .logo {
    display: inline-block;
    height: 60px;
    text-align: center;
}

nav.navbar.bootsnav .navbar-nav {
    background: #fff;
}
nav .logo > a {
    padding-top: 13px;
    padding-bottom: 0px;
}
}

/** 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: 80px 0;
}

.marg-top {
    margin-top: 0px;
}

.section-title h2 {
    text-transform: inherit;
    font-size: 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 {
    display: inline-block;
    float: left;
    margin-right: -200px;
    margin-top: 10px;
}


nav.navbar.bootsnav.navbar-transparent .logo {
    position: relative;
    display: inline-block;
    height: 60px;
}

.navbar-header .logo {
    display: inline-block;
    height: 60px;
    text-align: center;
}

nav.navbar.bootsnav .navbar-nav {
    background: #fff;
}
nav .logo > a {
    padding-top: 13px;
    padding-bottom: 0px;
}

/*-----------------------------------------------------------------------------------*/
/*   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;
    margin-bottom: 30px;
}

/* #about .about-descr h2 {
    font-size: 30px;
} */

/*-----------------------------------------------------------------------------------*/
/*  9- Our Team
/*-----------------------------------------------------------------------------------*/

#ourteam .item-ourteam{
    margin-bottom: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  10- My skills
/*-----------------------------------------------------------------------------------*/

#skills h2 {
    font-size: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  11- Counter
/*-----------------------------------------------------------------------------------*/
#counter .info-me{
    margin-bottom: 30px;
    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
/*-----------------------------------------------------------------------------------*/
#brands .brands-content h2 {
    font-size: 30px;
}


/*-----------------------------------------------------------------------------------*/
/* 13- Services
/*-----------------------------------------------------------------------------------*/
#services .cont-services .services-block{
    margin-bottom: 30px;
    border: 1px solid #f7f5f6;
}

#services .cont-services .services-block:hover {
    box-shadow: 0 5px 10px 0px rgba(17, 21, 23, .1);
    border: 1px solid #f7f5f6;
}

/*-----------------------------------------------------------------------------------*/
/*  17- PRICE
/*-----------------------------------------------------------------------------------*/

.table-offers{
    margin-bottom: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  18- journal
/*-----------------------------------------------------------------------------------*/
.journal-info{
    margin-bottom: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  20- footer
/*-----------------------------------------------------------------------------------*/

.footer-widgets .widget-info,
.footer-widgets .widget {
    margin-bottom: 30px;
}


}


/** 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: 80px 0;
}

.marg-top {
    margin-top: 0px;
}

.section-title h2 {
    text-transform: inherit;
    font-size: 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 {
    display: inline-block;
    float: left;
    margin-right: -200px;
    margin-top: 10px;
}


nav.navbar.bootsnav.navbar-transparent .logo {
    position: relative;
    display: inline-block;
    height: 60px;
}

.navbar-header .logo {
    display: inline-block;
    height: 60px;
    text-align: center;
}

nav.navbar.bootsnav .navbar-nav {
    background: #fff;
}
nav .logo > a {
    padding-top: 13px;
    padding-bottom: 0px;
}

/*-----------------------------------------------------------------------------------*/
/*   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;
    margin-bottom: 30px;
}

/* #about .about-descr h2 {
    font-size: 30px;
} */

/*-----------------------------------------------------------------------------------*/
/*  9- Our Team
/*-----------------------------------------------------------------------------------*/

#ourteam .item-ourteam{
    margin-bottom: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  10- My skills
/*-----------------------------------------------------------------------------------*/

#skills h2 {
    font-size: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  11- Counter
/*-----------------------------------------------------------------------------------*/
#counter .info-me{
    margin-bottom: 30px;
    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
/*-----------------------------------------------------------------------------------*/
#brands .brands-content h2 {
    font-size: 30px;
}


/*-----------------------------------------------------------------------------------*/
/* 13- Services
/*-----------------------------------------------------------------------------------*/
#services .cont-services .services-block{
    border: 1px solid #f7f5f6;
}

#services .cont-services .services-block:hover {
    box-shadow: 0 5px 10px 0px rgba(17, 21, 23, .1);
    border: 1px solid #f7f5f6;
}

/*-----------------------------------------------------------------------------------*/
/*  17- PRICE
/*-----------------------------------------------------------------------------------*/

.table-offers{
    margin-bottom: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  18- journal
/*-----------------------------------------------------------------------------------*/
.journal-info{
    margin-bottom: 30px;
}


/*-----------------------------------------------------------------------------------*/
/*  20- footer
/*-----------------------------------------------------------------------------------*/

.footer-widgets .widget-info,
.footer-widgets .widget {
    margin-bottom: 30px;
}


}


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

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

h1 {
    font-size: 34px !important;
}

h1 strong {
    font-size: 52px !important;
}

.paddsection {
    padding: 80px 0;
}

.marg-top {
    margin-top: 0px;
}

.section-title h2 {
    text-transform: inherit;
    font-size: 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 {
    display: inline-block;
    float: left;
    margin-right: -200px;
    margin-top: 10px;
}


nav.navbar.bootsnav.navbar-transparent .logo {
    position: relative;
    display: inline-block;
    height: 60px;
}

.navbar-header .logo {
    display: inline-block;
    height: 60px;
    text-align: center;
}

nav.navbar.bootsnav .navbar-nav {
    background: #fff;
}
nav .logo > a {
    padding-top: 13px;
    padding-bottom: 0px;
}

/*-----------------------------------------------------------------------------------*/
/*   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;
    margin-bottom: 30px;
}

/* #about .about-descr h2 {
    font-size: 30px;
}
 */
/*-----------------------------------------------------------------------------------*/
/*  9- Our Team
/*-----------------------------------------------------------------------------------*/

#ourteam .item-ourteam{
    margin-bottom: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  10- My skills
/*-----------------------------------------------------------------------------------*/

#skills h2 {
    font-size: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  11- Counter
/*-----------------------------------------------------------------------------------*/
#counter .info-me{
    margin-bottom: 30px;
    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
/*-----------------------------------------------------------------------------------*/
#brands .brands-content h2 {
    font-size: 30px;
}


/*-----------------------------------------------------------------------------------*/
/* 13- Services
/*-----------------------------------------------------------------------------------*/
#services .cont-services .services-block{
    border: 1px solid #f7f5f6;
}

#services .cont-services .services-block:hover {
    box-shadow: 0 5px 10px 0px rgba(17, 21, 23, .1);
    border: 1px solid #f7f5f6;
}

/*-----------------------------------------------------------------------------------*/
/*  17- PRICE
/*-----------------------------------------------------------------------------------*/

.table-offers{
    margin-bottom: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  18- journal
/*-----------------------------------------------------------------------------------*/
.journal-info{
    margin-bottom: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  20- footer
/*-----------------------------------------------------------------------------------*/

.footer-widgets .widget-info,
.footer-widgets .widget {
    margin-bottom: 30px;
}


}


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

@media (max-width: 480px) {

/*-----------------------------------------------------------------------------------*/
/*  1-GENERAL STYLING
/*-----------------------------------------------------------------------------------*/

h1 {
    font-size: 34px !important;
}

h1 strong {
    font-size: 52px !important;
}

.paddsection {
    padding: 80px 0;
}

.marg-top {
    margin-top: 0px;
}

.section-title h2 {
    text-transform: inherit;
    font-size: 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 {
    display: inline-block;
    float: left;
    margin-right: -200px;
    margin-top: 10px;
}


nav.navbar.bootsnav.navbar-transparent .logo {
    position: relative;
    display: inline-block;
    height: 60px;
}

.navbar-header .logo {
    display: inline-block;
    height: 60px;
    text-align: center;
}

nav.navbar.bootsnav .navbar-nav {
    background: #fff;
}
nav .logo > a {
    padding-top: 13px;
    padding-bottom: 0px;
}

/*-----------------------------------------------------------------------------------*/
/*   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;
    margin-bottom: 30px;
}

/* #about .about-descr h2 {
    font-size: 30px;
} */

/*-----------------------------------------------------------------------------------*/
/*  9- Our Team
/*-----------------------------------------------------------------------------------*/

#ourteam .item-ourteam{
    margin-bottom: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  10- My skills
/*-----------------------------------------------------------------------------------*/

#skills h2 {
    font-size: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  11- Counter
/*-----------------------------------------------------------------------------------*/
#counter .info-me{
    margin-bottom: 30px;
    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
/*-----------------------------------------------------------------------------------*/
#brands .brands-content h2 {
    font-size: 30px;
}


/*-----------------------------------------------------------------------------------*/
/* 13- Services
/*-----------------------------------------------------------------------------------*/
#services .cont-services .services-block{
    border: 1px solid #f7f5f6;
}

#services .cont-services .services-block:hover {
    box-shadow: 0 5px 10px 0px rgba(17, 21, 23, .1);
    border: 1px solid #f7f5f6;
}

/*-----------------------------------------------------------------------------------*/
/*  17- PRICE
/*-----------------------------------------------------------------------------------*/

.table-offers{
    margin-bottom: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  18- journal
/*-----------------------------------------------------------------------------------*/
.journal-info{
    margin-bottom: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  20- footer
/*-----------------------------------------------------------------------------------*/

.footer-widgets .widget-info,
.footer-widgets .widget {
    margin-bottom: 30px;
}

}


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

@media (max-width: 320px) {

/*-----------------------------------------------------------------------------------*/
/*  1-GENERAL STYLING
/*-----------------------------------------------------------------------------------*/

h1 {
    font-size: 34px !important;
}

h1 strong {
    font-size: 52px !important;
}

.paddsection {
    padding: 80px 0;
}

.marg-top {
    margin-top: 0px;
}

.section-title h2 {
    text-transform: inherit;
    font-size: 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 {
    display: inline-block;
    float: left;
    margin-right: -200px;
    margin-top: 10px;
}


nav.navbar.bootsnav.navbar-transparent .logo {
    position: relative;
    display: inline-block;
    height: 60px;
}

.navbar-header .logo {
    display: inline-block;
    height: 60px;
    text-align: center;
}

nav.navbar.bootsnav .navbar-nav {
    background: #fff;
}
nav .logo > a {
    padding-top: 13px;
    padding-bottom: 0px;
}

/*-----------------------------------------------------------------------------------*/
/*   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;
    margin-bottom: 30px;
}

#about .about-descr h2 {
    font-size: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  9- Our Team
/*-----------------------------------------------------------------------------------*/

#ourteam .item-ourteam{
    margin-bottom: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  10- My skills
/*-----------------------------------------------------------------------------------*/

#skills h2 {
    font-size: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  11- Counter
/*-----------------------------------------------------------------------------------*/
#counter .info-me{
    margin-bottom: 30px;
    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
/*-----------------------------------------------------------------------------------*/
#brands .brands-content h2 {
    font-size: 30px;
}


/*-----------------------------------------------------------------------------------*/
/* 13- Services
/*-----------------------------------------------------------------------------------*/
#services .cont-services .services-block{
    border: 1px solid #f7f5f6;
}

#services .cont-services .services-block:hover {
    box-shadow: 0 5px 10px 0px rgba(17, 21, 23, .1);
    border: 1px solid #f7f5f6;
}

/*-----------------------------------------------------------------------------------*/
/*  17- PRICE
/*-----------------------------------------------------------------------------------*/

.table-offers{
    margin-bottom: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  18- journal
/*-----------------------------------------------------------------------------------*/
.journal-info{
    margin-bottom: 30px;
}

/*-----------------------------------------------------------------------------------*/
/*  20- footer
/*-----------------------------------------------------------------------------------*/

.footer-widgets .widget-info,
.footer-widgets .widget {
    margin-bottom: 30px;
}
}