/*  -------------------------------------------------------------------------------
 *  [ 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 
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

@media (min-width: 992px) and (max-width: 1199px) {
    /* nav two */
    .header-menu-toggle {
        right: 15px;
    }
    .logo a {
        padding-left: 0;
    }
    /* portfolio style 1*/
    /* portfolio style 3*/
    .portfoio-style-3 .grid .item-1,
    .portfoio-style-3 .grid .item-2,
    .portfoio-style-3 .grid .item-3 {
        width: 31%;
        margin: 0 1% 20px 1%;
    }
    .portfoio-style-3 .grid .item-2 {
        height: 520px !important;
    }
    .portfoio-style-3 .grid .item-3 {
        width: 64%;
    }
    /* portfolio style 4*/
    .portfoio-style-4 .grid .item-1,
    .portfoio-style-4 .grid .item-3,
    .portfoio-style-4 .grid .item-2 {
        height: 250px;
        width: 31%;
        margin: 0 1% 20px 1%;
    }
    /* portfolio colmun two */
    body#colmuntwo .portfoio-style-4 .grid .item-1 {
        width: 48%;
        height: 400px;
    }
    body#colmunfive .portfoio-style-4 .grid .item-1 {
        width: 48%;
        height: 400px;
        margin-left: 1%;
        margin-right: 1%;
    }
}


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

@media (min-width: 768px) and (max-width: 991px) {
    /* General styling */
    .mb-0 {
        margin-bottom: 0px !important;
    }
    .mb-20 {
        margin-bottom: 20px !important;
    }
    .d-none-r {
        display: none;
    }
    .max-width {
        max-width: 350px;
        margin: 0px auto 0 auto;
    }
    /* navbar top */
    .navbar-toggle {
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 0;
        border-radius: 0px;
    }
    .navbar-toggle span {
        display: block;
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 25px;
        margin-bottom: 5px;
        margin-top: 5px;
        text-transform: uppercase;
    }
    .navbar-default .navbar-collapse {
        background: #fff;
        border-top: none;
    }
    .navbar-nav {
        margin: 0;
        padding-top: 4px;
        padding-bottom: 0;
    }
    #menu .navbar-collapse .navbar-nav li {
        /* width: 100%; */
        margin: 0;
    }
    #menu .navbar-nav li a {
        padding-left: 0;
    }
    /* nav two */
    .header-menu-toggle {
        right: 15px;
    }
    .logo a {
        padding-left: 0;
    }
    /* SLIDER STYLE 1 */
    .carousel .carousel-inner .item .carousel-caption {
        min-width: 100%;
        text-shadow: none;
    }
    #slider-style-1 .carousel .btn-btm {
        display: inherit;
    }
    #slider-style-1 .carousel .carousel-indicators {
        right: 12.40%;
    }
    /* portfolio style 1*/
    .portfolio-list .nav {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .portfolio-list .nav li {
        display: inline-block;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .portfolio-list .nav li:last-child {
        margin-bottom: 0px;
    }
    .portfolio-style-1 .grid .grid-item,
    .portfoio-style-2 .grid .grid-item {
        width: 48%;
        margin: 0 1% 20px 1%;
        float: left;
    }
    .grid .portfolio-thumbnail {
        height: 100%;
    }
    .on {
        padding: 10px !important;
    }
    /* portfolio style 3*/
    .portfoio-style-3 .grid .item-1,
    .portfoio-style-3 .grid .item-2,
    .portfoio-style-3 .grid .item-3,
    .portfoio-style-3 .grid .item-4,
    .portfoio-style-3 .grid .item-5,
    .portfoio-style-3 .grid .item-6,
    .portfoio-style-3 .grid .item-7,
    .portfoio-style-3 .grid .item-8,
    .portfoio-style-3 .grid .item-9 {
        width: 48%;
        margin-bottom: 20px;
        margin-left: 1%;
        margin-right: 1%;
    }
    /* portfolio style 4*/
    .portfoio-style-4 .grid .item-1,
    .portfoio-style-4 .grid .item-3,
    .portfoio-style-4 .grid .item-2,
    .portfoio-style-4 .grid .item-4,
    .portfoio-style-4 .grid .item-5,
    .portfoio-style-4 .grid .item-6,
    .portfoio-style-4 .grid .item-7,
    .portfoio-style-4 .grid .item-8,
    .portfoio-style-4 .grid .item-9 {
        height: 250px;
        width: 48%;
        margin-left: 1%;
        margin-right: 1%;
        margin-bottom: 20px;
    }
    /* portfolio style 5*/
    .portfolio-style-5 .grid .item-1,
    .portfolio-style-5 .grid .item-2 {
        width: 48%;
    }
    /* portfolio colmun contained */
    body#colmuntwo .portfoio-style-4 .grid .item-1,
    body#colmunthre .portfoio-style-4 .grid .item-1,
    body#colmunfour .portfoio-style-4 .grid .item-1,
    body#colmunfive .portfoio-style-4 .grid .item-1,
    body#colmun-two-contined .portfoio-style-4 .grid .item-1,
    body#colmun-thre-contined .portfoio-style-4 .grid .item-1,
    body#colmun-four-contined .portfoio-style-4 .grid .item-1 {
        width: 48%;
        height: 400px;
        margin-left: 1%;
        margin-right: 1%;
    }
    /* Price */
    .info-me {
        margin-bottom: 20px;
    }
    /* blog */
    .blog-item {
        margin-bottom: 20px;
    }
    /* instagrame */
    .instagram-footer .instagram-images ul li {
        height: 117px;
        width: 16.6667%;
    }
    /* About us */
    #our-team .team-block {
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
}


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

@media (max-width: 767px) {
    /* General styling */
    .mb-0 {
        margin-bottom: 0px !important;
    }
    .mb-20 {
        margin-bottom: 20px !important;
    }
    .d-none-r {
        display: none;
    }
    .max-width {
        max-width: 350px;
        margin: 0px auto 0 auto;
    }
    /* navbar top */
    .navbar-toggle {
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 0;
        border-radius: 0px;
    }
    .navbar-toggle span {
        display: block;
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 25px;
        margin-bottom: 5px;
        margin-top: 5px;
        text-transform: uppercase;
    }
    .navbar-default .navbar-collapse {
        background: #fff;
        border-top: none;
    }
    .navbar-nav {
        margin: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #menu .navbar-collapse .navbar-nav li {
        width: 100%;
        margin: 0;
    }
    #menu .navbar-nav li a {
        padding-left: 0;
    }
    /* nav two */
    .header-menu-toggle {
        right: 15px;
    }
    .logo a {
        padding-left: 0;
    }
    /* SLIDER STYLE 1 */
    .carousel .carousel-inner .item .carousel-caption {
        min-width: 100%;
        text-shadow: none;
    }
    #slider-style-1 .carousel .btn-btm {
        display: inherit;
    }
    #slider-style-1 .carousel .carousel-indicators {
        right: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    /* SLIDER STYLE 2 */
    #slider-style-2 .carousel .carousel-indicators {
        left: 0;
        right: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    #slider-style-2 .carousel .carousel-indicators li {
        border: 1px solid #252525 !important;
    }
    /* portfolio style 1*/
    .portfolio-list .nav {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .portfolio-list .nav li {
        display: inline-block;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .portfolio-list .nav li:last-child {
        margin-bottom: 0px;
    }
    .portfolio-style-1 .grid .grid-item,
    .portfoio-style-2 .grid .grid-item {
        width: 48%;
        max-width: 48%;
        margin-left: 1%;
        margin-right: 1%;
        margin-bottom: 20px;
        float: left;
    }
    .on {
        padding: 10px !important;
    }
    /* portfolio style 3*/
    .portfoio-style-3 .grid .item-1,
    .portfoio-style-3 .grid .item-2,
    .portfoio-style-3 .grid .item-3 {
        width: 48%;
        margin-bottom: 20px;
        margin-left: 1%;
        margin-right: 1%;
    }
    /* portfolio style 4*/
    .portfoio-style-4 .grid .item-1 {
        height: 250px;
        width: 48%;
        margin-left: 1%;
        margin-right: 1%;
        margin-bottom: 20px;
    }
    /* portfolio style 5*/
    .portfolio-style-5 .grid .item-1,
    .portfolio-style-5 .grid .item-2 {
        width: 48%;
    }
    /* portfolio colmun wide */
    body#colmuntwo .portfoio-style-4 .grid .item-1,
    body#colmunthre .portfoio-style-4 .grid .item-1,
    body#colmunfour .portfoio-style-4 .grid .item-1,
    body#colmunfive .portfoio-style-4 .grid .item-1,
    body#colmun-two-contined .portfoio-style-4 .grid .item-1,
    body#colmun-thre-contined .portfoio-style-4 .grid .item-1,
    body#colmun-four-contined .portfoio-style-4 .grid .item-1 {
        width: 48%;
        height: 400px;
        margin-left: 1%;
        margin-right: 1%;
    }

        /* Masonry style */
    #masonry-style-4 .portfoio-style-2 .grid .item-1,
    #masonry-style-4 .portfoio-style-2 .grid .item-2,
    #masonry-style-4 .portfoio-style-2 .grid .item-4,
    #masonry-style-4 .portfoio-style-2 .grid .item-5,
    #masonry-style-4 .portfoio-style-2 .grid .item-6,
    body#masonry-style-1 .masonry-style-1 .grid .item-1,
    body#masonry-style-1 .masonry-style-1 .grid .item-2,
    body#masonry-style-1 .masonry-style-1 .grid .item-3,
    body#masonry-style-1 .masonry-style-1 .grid .item-4 {
        width: 100% !important;
    }

    /* Masonry style 5*/
    body#masonry-style-5 .masonry-style-5 .grid .item-1,
    body#masonry-style-5 .masonry-style-5 .grid .item-2,
    body#masonry-style-6 .portfoio-style-3 .grid .item-1,
    body#masonry-style-6 .portfoio-style-3 .grid .item-2{
        width: 100% !important;
    }

    /* Price */
    .info-me {
        margin-bottom: 20px;
    }
    /* blog */
    .blog-item {
        margin-bottom: 20px;
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
    /* instagrame */
    .instagram-footer .instagram-images ul li {
        height: 117px;
        width: 16.6667%;
    }
    /* About us */
    #our-team .team-block {
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
    /* newsletter */
    form.form-inline {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}


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

@media (max-width: 600px) {
    /* General styling */
    .mb-0 {
        margin-bottom: 0px !important;
    }
    .mb-20 {
        margin-bottom: 20px;
    }
    .d-none-r {
        display: none;
    }
    .max-width {
        max-width: 350px;
        margin: 0px auto 0 auto;
    }
    /* navbar top */
    .navbar-toggle {
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 0;
        border-radius: 0px;
    }
    .navbar-toggle span {
        display: block;
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 25px;
        margin-bottom: 5px;
        margin-top: 5px;
        text-transform: uppercase;
    }
    .navbar-default .navbar-collapse {
        background: #fff;
        border-top: none;
    }
    .navbar-nav {
        margin: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #menu .navbar-collapse .navbar-nav li {
        width: 100%;
        margin: 0;
    }
    #menu .navbar-nav li a {
        padding-left: 0;
    }
    /* nav two */
    .header-menu-toggle {
        right: 15px;
    }
    .logo a {
        padding-left: 0;
    }
    /* SLIDER STYLE 1 */
    .carousel .carousel-inner .item .carousel-caption {
        min-width: 100%;
        text-shadow: none;
    }
    #slider-style-1 .carousel .btn-btm {
        display: inherit;
    }
    #slider-style-1 .carousel .carousel-indicators {
        right: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    /* SLIDER STYLE 2 */
    #slider-style-2 .carousel .carousel-indicators {
        left: 0;
        right: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    #slider-style-2 .carousel .carousel-indicators li {
        border: 1px solid #252525 !important;
    }
    /* portfolio style 1*/
    .portfolio-list .nav {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .portfolio-list .nav li {
        display: inline-block;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .portfolio-list .nav li:last-child {
        margin-bottom: 0px;
    }
    .portfolio-style-1 .grid .grid-item,
    .portfoio-style-2 .grid .grid-item {
        width: 48%;
        max-width: 48%;
        margin: 0 1% 20px 1%;
        float: left;
    }
    .on {
        padding: 10px !important;
    }
    /* portfolio style 2*/
    /* portfolio style 3*/
    .portfoio-style-3 .grid .item-1,
    .portfoio-style-3 .grid .item-2,
    .portfoio-style-3 .grid .item-3 {
        width: 48%;
        margin-bottom: 20px;
    }
    /* portfolio style 4*/
    .portfoio-style-4 .grid .item-1 {
        height: 250px;
        width: 48%;
        margin: 0 1% 20px 1%;
    }
    /* portfolio colmun wide */
    body#colmuntwo .portfoio-style-4 .grid .item-1,
    body#colmunthre .portfoio-style-4 .grid .item-1,
    body#colmunfour .portfoio-style-4 .grid .item-1,
    body#colmunfive .portfoio-style-4 .grid .item-1,
    body#colmun-two-contined .portfoio-style-4 .grid .item-1,
    body#colmun-thre-contined .portfoio-style-4 .grid .item-1,
    body#colmun-four-contined .portfoio-style-4 .grid .item-1 {
        width: 100%;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
    }

        /* Masonry style */
    #masonry-style-4 .portfoio-style-2 .grid .item-1,
    #masonry-style-4 .portfoio-style-2 .grid .item-2,
    #masonry-style-4 .portfoio-style-2 .grid .item-4,
    #masonry-style-4 .portfoio-style-2 .grid .item-5,
    #masonry-style-4 .portfoio-style-2 .grid .item-6,
    body#masonry-style-1 .masonry-style-1 .grid .item-1,
    body#masonry-style-1 .masonry-style-1 .grid .item-2,
    body#masonry-style-1 .masonry-style-1 .grid .item-3,
    body#masonry-style-1 .masonry-style-1 .grid .item-4 {
        width: 100% !important;
    }

    /* Masonry style 5*/
    body#masonry-style-5 .masonry-style-5 .grid .item-1,
    body#masonry-style-5 .masonry-style-5 .grid .item-2,
    body#masonry-style-6 .portfoio-style-3 .grid .item-1,
    body#masonry-style-6 .portfoio-style-3 .grid .item-2{
        width: 100% !important;
    }

    /* Price */
    .info-me {
        margin-bottom: 20px;
    }
    /* blog */
    .blog-item {
        margin-bottom: 20px;
    }
    /* instagrame */
    .instagram-footer .instagram-images ul li {
        height: 117px;
        width: 33%;
    }
    /* About us */
    #aboutme-block .content-aboutme {
        width: 100%;
    }
}


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

@media (max-width: 480px) {
    /* General styling */
    .mb-0 {
        margin-bottom: 0px !important;
    }
    .mb-20 {
        margin-bottom: 20px;
    }
    .d-none-r {
        display: none;
    }
    .max-width {
        max-width: 350px;
        margin: 0px auto 0 auto;
    }
    /* navbar top */
    .navbar-toggle {
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 0;
        border-radius: 0px;
    }
    .navbar-toggle span {
        display: block;
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 25px;
        margin-bottom: 5px;
        margin-top: 5px;
        text-transform: uppercase;
    }
    .navbar-default .navbar-collapse {
        background: #fff;
        border-top: none;
    }
    .navbar-nav {
        margin: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #menu .navbar-collapse .navbar-nav li {
        width: 100%;
        margin: 0;
    }
    #menu .navbar-nav li a {
        padding-left: 0;
    }
    /* nav two */
    .header-menu-toggle {
        right: 15px;
    }
    .logo a {
        padding-left: 0;
    }
    /* SLIDER STYLE 1 */
    .carousel .carousel-inner .item,
    .carousel .carousel-inner {
        background: #f1f1f1;
    }
    .carousel .carousel-inner .item img {
        display: none;
    }
    .carousel .carousel-inner .item .carousel-caption {
        min-width: 100%;
        text-shadow: none;
    }
    #slider-style-1 .carousel .btn-btm {
        display: none;
    }
    #slider-style-1 .carousel .carousel-indicators {
        right: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    /* SLIDER STYLE 2 */
    .carousel .carousel-inner .item .overlay-img {
        display: none;
    }
    .carousel .carousel-inner .item .carousel-caption h2,
    .carousel .carousel-inner .item .carousel-caption h1,
    .carousel .carousel-inner .item .carousel-caption a,
    .carousel-control .lnr-chevron-left,
    .carousel-control .lnr-chevron-right {
        color: initial;
    }
    .carousel .carousel-inner .item .carousel-caption h1 {
        font-size: 36px;
    }
    #slider-style-2 .carousel .carousel-control.left,
    #slider-style-2 .carousel .carousel-control.right {
        display: none;
    }
    /* portfolio style 1*/
    .portfolio-list .nav {
        display: inline-block;
        justify-content: center;
        width: 100%;
    }
    .portfolio-list .nav li {
        display: inline-block;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .portfolio-list .nav li:last-child {
        margin-bottom: 0px;
    }
    .portfolio-style-1 .grid .grid-item,
    .portfoio-style-2 .grid .grid-item {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        left: 0 !important;
        right: 0 !important;
    }
    .grid .portfolio-thumbnail {
        /* height: 100%; */
    }
    .on {
        padding: 10px !important;
    }
    /* portfolio style 2*/
    /* portfolio style 3*/
    .portfoio-style-3 .grid .item-1,
    .portfoio-style-3 .grid .item-2,
    .portfoio-style-3 .grid .item-3 {
        width: 100%;
        margin-bottom: 20px;
    }
    /* portfolio style 4*/
    .portfoio-style-4 .grid .item-1 {
        height: 250px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
    /* portfolio colmun wide */
    body#colmuntwo .portfoio-style-4 .grid .item-1,
    body#colmunthre .portfoio-style-4 .grid .item-1,
    body#colmunfour .portfoio-style-4 .grid .item-1,
    body#colmunfive .portfoio-style-4 .grid .item-1,
    body#colmun-two-contined .portfoio-style-4 .grid .item-1,
    body#colmun-thre-contined .portfoio-style-4 .grid .item-1,
    body#colmun-four-contined .portfoio-style-4 .grid .item-1 {
        width: 100%;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
    }

        /* Masonry style */
    #masonry-style-4 .portfoio-style-2 .grid .item-1,
    #masonry-style-4 .portfoio-style-2 .grid .item-2,
    #masonry-style-4 .portfoio-style-2 .grid .item-4,
    #masonry-style-4 .portfoio-style-2 .grid .item-5,
    #masonry-style-4 .portfoio-style-2 .grid .item-6,
    body#masonry-style-1 .masonry-style-1 .grid .item-1,
    body#masonry-style-1 .masonry-style-1 .grid .item-2,
    body#masonry-style-1 .masonry-style-1 .grid .item-3,
    body#masonry-style-1 .masonry-style-1 .grid .item-4 {
        width: 100% !important;
    }

    /* Masonry style 5*/
    body#masonry-style-5 .masonry-style-5 .grid .item-1,
    body#masonry-style-5 .masonry-style-5 .grid .item-2,
    body#masonry-style-6 .portfoio-style-3 .grid .item-1,
    body#masonry-style-6 .portfoio-style-3 .grid .item-2{
        width: 100% !important;
    }

    /* Price */
    .info-me {
        margin-bottom: 20px;
    }
    /* blog */
    .blog-item {
        margin-bottom: 20px;
    }
    /* instagrame */
    .instagram-footer .instagram-images ul li {
        height: 117px;
        width: 50%;
    }
    /* About us */
    #aboutme-block .content-aboutme {
        width: 100%;
    }

    /* newsletter */
    form.form-inline {
        width: 100%;
    }
}


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

@media (max-width: 360px) {
    /* SLIDER STYLE 2 */
    .carousel .carousel-inner .item .carousel-caption h1 {
        font-size: 20px;
    }
    #slider-style-2 .carousel .carousel-control.left,
    #slider-style-2 .carousel .carousel-control.right {
        display: none;
    }
    /* portfolio style 1*/
    .portfolio-list .nav {
        display: block;
        justify-content: center;
        width: 100%;
    }
    .portfolio-style-1 .grid .grid-item,
    .portfoio-style-2 .grid .grid-item {
        width: 100%;
    }
    /* About us */
    #aboutme-block .content-aboutme {
        width: 100%;
    }
}


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

@media (max-width: 375px) {
    /* SLIDER STYLE 2 */
    .carousel .carousel-inner .item .carousel-caption h1,
    #header .content-header h1 {
        font-size: 20px;
    }
    #slider-style-2 .carousel .carousel-control.left,
    #slider-style-2 .carousel .carousel-control.right {
        display: none;
    }
    /* portfolio style 1*/
    .portfolio-list .nav {
        display: block;
        justify-content: center;
        width: 100%;
    }
    .portfolio-style-1 .grid .grid-item,
    .portfoio-style-2 .grid .grid-item {
        width: 100%;
    }
    /* Blog */
    body#blog-two-colmun #blog .blog-item .top-blog-item {
        height: 250px;
        width: 100%;
    }
    /* About us */
    #aboutme-block .content-aboutme {
        width: 100%;
    }
    /* newsletter */
    .form-control {
        min-width: 100%;
    }

    form.form-inline {
        width: 100%;
    }
}


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

@media (max-width: 320px) {
    /* General styling */
    .mb-0 {
        margin-bottom: 0px !important;
    }
    .mb-20 {
        margin-bottom: 20px;
    }
    .d-none-r {
        display: none;
    }
    .max-width {
        max-width: 350px;
        margin: 0px auto 0 auto;
    }
    /* navbar top */
    .navbar-toggle {
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 0;
        border-radius: 0px;
    }
    .navbar-toggle span {
        display: block;
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 25px;
        margin-bottom: 5px;
        margin-top: 5px;
        text-transform: uppercase;
    }
    .navbar-default .navbar-collapse {
        background: #fff;
        border-top: none;
    }
    .navbar-nav {
        margin: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #menu .navbar-collapse .navbar-nav li {
        width: 100%;
        margin: 0;
    }
    #menu .navbar-nav li a {
        padding-left: 0;
    }
    /* nav two */
    .header-menu-toggle {
        right: 15px;
    }
    .logo a {
        padding-left: 0;
    }
    /* SLIDER STYLE 1 */
    .carousel .carousel-inner .item .carousel-caption {
        min-width: 100%;
        text-shadow: none;
    }
    #slider-style-1 .carousel .btn-btm {
        display: none;
    }
    #slider-style-2 .carousel .carousel-indicators {
        left: 0;
        right: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    #slider-style-2 .carousel .carousel-indicators li {
        border: 1px solid #252525 !important;
    }
    /* SLIDER STYLE 2 */
    .carousel .carousel-inner .item .carousel-caption h1,
    #header .content-header h1 {
        font-size: 20px;
    }
    #slider-style-2 .carousel .carousel-control.left,
    #slider-style-2 .carousel .carousel-control.right {
        display: none;
    }
    /* portfolio style 1*/
    .portfolio-list .nav {
        display: block;
        justify-content: center;
        width: 100%;
    }
    .portfolio-list .nav li {
        display: inline-block;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .portfolio-list .nav li:last-child {
        margin-bottom: 0px;
    }
    .portfolio-style-1 .grid .grid-item,
    .portfoio-style-2 .grid .grid-item {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .grid .portfolio-thumbnail,
    .portfolio-style-1 .grid .item-thumbnail2,
    .portfolio-style-1 .grid .item-thumbnail5,
    .portfolio-style-1 .grid .item-thumbnail6 {
        /* height: 250px; */
    }
    .on {
        padding: 10px !important;
    }
    /* portfolio style 2*/
    /* portfolio style 3*/
    .portfoio-style-3 .grid .item-1,
    .portfoio-style-3 .grid .item-2,
    .portfoio-style-3 .grid .item-3 {
        width: 100%;
        margin-bottom: 20px;
    }
    /* portfolio style 4*/
    .portfoio-style-4 .grid .item-1 {
        height: 250px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
    /* portfolio style 5*/
    .portfolio-style-5 .grid .item-1,
    .portfolio-style-5 .grid .item-2 {
        width: 100%;
    }
    /* portfolio colmun wide */
    body#colmuntwo .portfoio-style-4 .grid .item-1,
    body#colmunthre .portfoio-style-4 .grid .item-1,
    body#colmunfour .portfoio-style-4 .grid .item-1,
    body#colmunfive .portfoio-style-4 .grid .item-1,
    body#colmun-two-contined .portfoio-style-4 .grid .item-1,
    body#colmun-thre-contined .portfoio-style-4 .grid .item-1,
    body#colmun-four-contined .portfoio-style-4 .grid .item-1 {
        width: 100%;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Masonry style 4*/
    #masonry-style-4 .portfoio-style-2 .grid .item-1,
    #masonry-style-4 .portfoio-style-2 .grid .item-2,
    #masonry-style-4 .portfoio-style-2 .grid .item-4,
    #masonry-style-4 .portfoio-style-2 .grid .item-5,
    #masonry-style-4 .portfoio-style-2 .grid .item-6,
    body#masonry-style-1 .masonry-style-1 .grid .item-1,
    body#masonry-style-1 .masonry-style-1 .grid .item-2,
    body#masonry-style-1 .masonry-style-1 .grid .item-3,
    body#masonry-style-1 .masonry-style-1 .grid .item-4 {
        width: 100% !important;
    }

    /* Masonry style 5*/
    body#masonry-style-5 .masonry-style-5 .grid .item-1,
    body#masonry-style-5 .masonry-style-5 .grid .item-2,
    body#masonry-style-6 .portfoio-style-3 .grid .item-1,
    body#masonry-style-6 .portfoio-style-3 .grid .item-2{
        width: 100% !important;
    }




    /* Price */
    .info-me {
        margin-bottom: 20px;
    }
    /* blog */
    .blog-item {
        margin-bottom: 20px;
    }
    body#blog-two-colmun #blog .blog-item .top-blog-item {
        height: 250px;
        width: 100%;
    }
    #blog .blog-item .btm-blog-item a h4 span {
        display: none;
    }
    /* instagrame */
    .instagram-footer .instagram-images ul li {
        height: 117px;
        width: 50%;
    }
    /* About us */
    #aboutme-block .content-aboutme {
        width: 100%;
    }
    /* newsletter */
    .form-control {
        min-width: 100%;
    }
    form.form-inline {
    width: 100%;
}
}