/*  -------------------------------------------------------------------------------
 *  Media Queries
 *  -------------------------------------------------------------------------------
 *  
 *  This part contains the all changes that needed for elements for the Bootsrap
 *  widths like iPhone image in About me section
 *  
 *  It's divided to the following sections:
 *  
 *     |
       |-->   - Width between 1200px to 0
       |-->   - Width between 767px to 0
*/

/*-----------------------------------------------------------------------------------*/
/*  Start GLOBAL CSS Style Responsive
/*-----------------------------------------------------------------------------------*/

@media (max-width: 767px) {
    
    .contents-titles-section p.paragraph-title {
        width: 100%;
    }

}

@media (max-width: 300px) {
    
    .contents-titles-section h2.section-title,
    .about .about-box-story .about-story h2,
    .welcome-services .welcome-sev h2 {
        font-size: 30px;
    }

}

/*-----------------------------------------------------------------------------------*/
/*  Start Home Header
/*-----------------------------------------------------------------------------------*/

@media (max-width: 767px) {
    
    .home .section-right-home .box-me .contents-header-home h2 {
        font-size: 60px;
    }
    
    .home .section-left-home {
        display: none;
    }
    
    .about .about-box-story .about-story h2 {
        margin-bottom: 12%;
    }
    
    .about .about-box-story .about-story h3 {
        font-size: 20px;
    }

}

@media (max-width: 414px) {

    #wrapper.toggled #sidebar-wrapper {
        width: 100%;
    }

    .hamburger.is-open .hamb-top,
    .hamburger.is-open .hamb-middle,
    .hamburger.is-open .hamb-bottom {
        background-color: white;
    }

    .sidebar-nav li a {
        font-size: 20px;
        line-height: 2;
    }
}

/*-----------------------------------------------------------------------------------*/
/*  Start About Me
/*-----------------------------------------------------------------------------------*/

@media (max-width: 767px) {

    .about .about-box-info:nth-child(3) {
        float: right;
    }
    
}

@media (max-width: 344px) {
    
    .about .about-box-story .about-story button.btn-download-cv {
        margin: 0;
    }
    
}

@media (max-width: 332px) {
    
    .about .about-box-story .about-story button {
        margin-bottom: 20px;
    }
    
}

/*-----------------------------------------------------------------------------------*/
/*  Start Welcome Services
/*-----------------------------------------------------------------------------------*/

@media (max-width: 767px) {

    .welcome-services .welcome-sev p {
        width: 100%;
    }
    
}

/*-----------------------------------------------------------------------------------*/
/*  Start My Services
/*-----------------------------------------------------------------------------------*/

@media (max-width: 930px) {

    .service p {
        width: 100%;
        padding: 0 10px;
    }
    
}

@media (max-width: 930px) {

    .services .box-services:nth-child(5) {
        float: right;
    }
    
    .box-services {
        border-bottom: 1px solid rgba(204, 204, 204, 0.45);
        border-left: 1px solid rgba(204, 204, 204, 0.45);
    }

}

@media (max-width: 430px) {

    .box-services {
        width: 100%;
        border-bottom: 1px dashed #ccc;
    }
    
    .spaceing-service .box-services:nth-child(1),
    .spaceing-service .box-services:nth-child(2),
    .spaceing-service .box-services:nth-child(3) {
    border-bottom: 1px dashed #ccc;
    }

}

/*-----------------------------------------------------------------------------------*/
/*  Start My Skills
/*-----------------------------------------------------------------------------------*/

@media (max-width: 767px) {

    .skills .box-what-i-do-img {
        padding: 0;
        display: none;
    }

}

@media (max-width: 500px) {

    .ox-what-i-do p {
        width: 100%;
    }

}

@media (max-width: 344px) {

    .ox-what-i-do h2 {
        line-height: 2;
    }

}


/*-----------------------------------------------------------------------------------*/
/*  Start Portfolio
/*-----------------------------------------------------------------------------------*/

@media (max-width: 767px) {

    ul.filter-menu li {
        line-height: 2;
    }

}

/*-----------------------------------------------------------------------------------*/
/*  Start Want To Work Me!
/*-----------------------------------------------------------------------------------*/

@media (max-width: 767px) {
    
    .box-w-info .contents-talk-me h2 {
        font-size: 35px;
    }
    
    .w-btn-contant-me button.btn {
        padding: 3% 12%;
        margin-top: 36px;
        margin: auto;
    }
    
}

/*-----------------------------------------------------------------------------------*/
/*  Start Contact
/*-----------------------------------------------------------------------------------*/

@media (max-width: 767px) {
    
    .contact .form-contact form {
        margin-right: 2%;
        margin-left: 2%;
    }
    
    .contact .form-contact form input:nth-child(1), 
    .contact .form-contact form input:nth-child(3)  {
        margin-right: 3%;
    }
    
    .contact .form-contact form input,
    .contact .form-contact form textarea.form-control {
        margin-left: 0;
    }
    
    .contact .form-contact form textarea.form-control {
        width: 100%;
    }
}

/*-----------------------------------------------------------------------------------*/
/*      * End  
/*-----------------------------------------------------------------------------------*/