/* css for media scree 1024px*/

@media (max-width: 1024px) {

    #container {
        margin-top: 0px;
    }

    #ho-lo{
        display: none;
    }

    #nav-lo{
        display: block;
    }

    #nav ul{
        display:none;
    }

    #nav-lo img{
        position: absolute;
        width: 7%;
        top: 3%;
        left: 4%;
    }


    #nav li{
        left: 46%;
        top: 1em;
    }
     
    #home-header{
 background: rgba(0, 0, 0, 0.5) ;    
    
}


    #home-intro {
        left: 28%;
        padding-top: 28%;
    }

    #home-intro h1 {
        font-size: 2em;
    }

    #home-intro h3 {
        font-size: 1.5em;
        margin-top: 4.5em;
        /* margin-left: 4em; */
        margin-bottom: 0.5em;
    }



    /*css for background images*/
    #first-image {
        background-position: 49% 17%;
    }

    #no-image {
        background-position: 49% 17%;
    }


    /*
**
css for for skils*/


    #skills h1{
        margin-bottom: 1.5em;
    }

    #skills li {
        margin: 0 auto;
        left: 0px;
        top: 0px;
        display: block;
        width: 100%;
        margin-top: -47px;
        margin-bottom: 80px;
    }

    .skills-two li:last-child {
        padding-top: 2em;
    }

    .skills-two {
        margin-top: -65px;
    }



    /*
**  css for hamburger menu for css
*/
    #navigation-bar{
        position: relative;
        z-index: 9999;
    }

    #menu-bar{
        display: block;
    }


    #menu-bar{
        display: block;
        color: #fff;
        position: fixed;
    }

    #menu{
        display:block;
    }

    #menu{
        transition: transform ease-in-out 200ms;
        -webkit-transition: -webkit-transform ease-in-out 200ms;
        width:275px;
        background: #fff;
        height:80vh;
        overflow: hidden;
        position: absolute;
        left:-275px;
        top:0;
        z-index: 100;
    }

    #menu ul li{
        position: relative;
        line-height: 46px;
        border-bottom: 1px solid #f4f2f1;
        font-size: 16px;
        text-transform: uppercase;
        list-style: none;
        color: #000000;
    }



    #menu ul li a{
        color: #000000;
    }

    .fa-bars{
        position: absolute;
        left: 1em;
        top: 0.5em;
    }

    #menu ul{
        padding-left: 1em;
    }

    #menu ul a i{
        position: absolute;
        right: 1em;
        top: 0.2em;
    }

    #menu ul li a{
        color: #000000;
    }

    #menu h1{
        color: #f05a1a ;
    }

    #container.menu-active #main-container,
    #container.menu-active #navigation-bar{
        -webkit-transform: translateX(275px);
        transform: translateX(275px);
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    }

    /*
**  css logo for monile
*/


    #mob-logo{
        display:block;
    }



    /*
    ** CSS FOR LOGO FOR MOBILE
    */
    #mob-logo a img{
        position: fixed;
        width: 5%;
        /* left: 44%; */
        left: 85%;
        top: .5em;
    }


    /*
    ** CSS BACKGROUND COLOR FOR LOGO AND HAMBUGER MENU
    */
 /*
 ** CSS FOR   #process img
 */

    #process img {
       width: 60%;
    }

    /*
**
CSS FOR NOSEE*/

    #nosee{
        display: block;
        /* width: 100%; */
        text-align: center;
        height: 41em;
        /* margin-top: -8em; */
        margin-bottom: 10em;
        padding-top: 10em;
    }

    #nosee p{
        width: 70%;
        font-size: 48px;
        font-weight: 900;
        margin: 0 auto;
    }

    #out-put{
        display: none;
    }

    /*
  ** CSS FOR IMAGEMAP CONTENT
  **/

    #picture img {
        width: 700px;
    }

    /*
   ** CSS FOR THE PAGE VOICE OVER CONTENT
   **/



    #gamev {
        margin-top: 10%;
    }



    /*
    ** CSS FOR THE FOOTER
    **/

    footer p {
        margin-top: 3.5%;
    }

    #social-med li {
        width: 12%;
        left: 25.5%;

    }


    #in-touch{
        margin-top: -6em;

    }


    #mijn-cv img{
        margin-top: 10px;
        width: 80%;

    }


    #con-container {
       margin-top: 68%;
    }



    #akwabagh {
        margin-top: 43%;
    }



   .akwa{
       display: none;
   }

   .about-text {
    margin-top: -35%;
}

    /* CSS FOR WORK CONTENT*/

    #con-work {
        margin-top: 30%;
    }

    #c-work {
        margin-top: 30%;
    }

    .makeme-small {
    width: 90%;
}


#contact-form {
    margin-top: -59%;
    
}


}



/* css for media scree 912px*/
@media (max-width: 912px){
footer.content {
    margin-top: 43%;
}





}


/* css for media scree 820px*/
@media (max-width: 820px){
#con-container {
    margin-top: 95%;
}





}






/* css for media scree 640px*/

@media (max-width: 640px) {


    #ho-lo{
        display: none;
    }

    #nav-lo img {
        left: 10%;
        top: 1%;
    }

    #nav-lo{
        display: block;
    }

    #nav ul{
        display:none;
    }

    #nav li{
        font-size: 1em;
    }

    #nav li {
        left: 50%;
    }



    #social-med {
        top: 12em;
    }


    #social-med .fa-3x {
        font-size: 2em;
    }

    #home-intro {
        top: 15em;

    }

    #home-intro h1 {
        font-size: 1em;
    }

    #home-intro h3 {

       margin-left: 0em;

    }

    /*
    ** css my work process
    */

    .desc-wrapper p {
        font-size: 50px;

    }

    #copy-r {
        font-size: 0.1em;
    }



    /*
**  css for hamburger menu for css
*/

    #menu-bar{
        display: block;
    }

    #menu{
        display: block;
    }

    #container {
        margin-top: 0px;
    }

    #home-intro h3 {
        margin-top: 5.5em;
    }



    #mijn-cv img{
        margin-top:175px;
        width: 80%;

    }


    #con-container {
        /* margin-top: 20%; */
            margin-top: 39%;
    }

    #mob-logo a img{
        top: 1.5em;
    }



    #nosee {
        height: 11em;
        padding-top: 7em;
        margin-top: -6em;
        margin-bottom: 15em;

    }

    #nosee p{
        font-size: 40px;
        font-weight: 900;
    }

    /*
 ** CSS FOR THE PAGE RESUME
 **/


    #mijn-cv {
        margin-top: -27%;
    }


    /*
  ** CSS FOR THE PAGE VOICE OVER CONTENT
  **/



    #gamev {
        margin-top: 10%;
    }


    /* CSS FOR WORK CONTENT */

    #center-me {
        width: 90%;
         margin:0 auto;
    text-align:center;
    }

    .main-discr {
        /* display: none; */
    }

    .main-discrtion{
        display: block;
    }

    .makeme-small{
    width: 84%;
}

    .pro-discript {
        /* display: none; */
    }


    .proje-image{
        /* display: none; */
    }

    .project-image {
        display: inline;

    }

    .project-image img {
        width: 80%;
    }

    .project-image p {
        margin: 33px 29px 0px 41px;
    }



    #con-work {
        margin-top: 55%;
    }

    #c-work {
        margin-top: 55%;
    }


    /*
**
css for for skils leaving this css code here beacuse i may need it for the future
*/

    .diepme {
        display: block;
    }

    .skills-one{
        display: none;
    }

    .skills-two{
        display: none;
    }

    .skills-three{
        display: none;
    }

    .skills-four{
        display: none;
    }


    /* css for image map*/

    #picture img {
        max-width: 80%;
    }


    #detail-container {
        width: 80%;
        margin-left: 2em;
    }



}







/* css for media scree 540px*/
@media (max-width: 540px){
#con-container {
    /* margin-top: 20%; */
    margin-top: 70%;
}

.about-text {
    margin-top: -20em;
}


}






/* css for media scree 412px*/
@media (max-width: 412px){
#con-container {
    margin-top: 43%;
}


#contact-form {
    margin-top: -15%;
}

.about-text {
    margin-top: -20em;
}


}




/* css for media scree 320px*/

@media (max-width: 320px) {

    #ho-lo {
        display: none;
    }

    #home-intro {
        top: 11em;
    }

    #nav-lo {
        display: block;
    }

    #nav ul {
        display: none;
    }

    #nav-lo img {
        left: 42%;
        width: 10%;
        top: 0%;
    }

    #nav ul li {
        margin: 1em;
    }

    #nav li {
        font-size: 1em;
        left: -4%;
    }

    #nav li a {
        margin: 0.4em;
    }

    /*
    ** CSS FOR MENU HEADER.
    */
    /*#container {*/
        /*margin-top: -20px;*/
    /*}*/
    #container {
        margin-top: 0px;
    }

    #mob-logo a img {
        width: 7%;
        top: 0.5em;
    }

    /*
    ** CSS FOR BACKGROUND IMAGE FIRST IMAGE.
    */
    #first-image {
        height: 45em;
        background-position: 20% 78%;
    }

    #no-image {
        height: 45em;
        background-position: 20% 50%;
    }


    /*
**
css for for skils leaving this css code here beacuse i may need it for the future
*/

    .diepme {
        display: block;
    }

    .skills-one{
        display: none;
    }

    .skills-two{
        display: none;
    }

    .skills-three{
        display: none;
    }

    .skills-four{
        display: none;
    }

    /*
   ** CSS FOR HOME INTRO
   */
    #home-intro h3 {
        margin-top: 6.5em;
    }

    /*
    ** CSS FOR BOUNCING ARROW
    */
    .hero_arrow img {
        margin-top: 2em;
    }

    /*
   ** CSS FOR FOOTER
   */
    #social-med {
        left: 1em;
        top: 7em;
    }

    #copy-r {
        font-size: 0.1em;
    }

    /*
**  css for hamburger menu for css
*/
    #menu-bar {
        display: block;
        top: 0.3em;
    }

    #menu {
        display: block;
    }

    /*
**  CSS FOR ABOUT ME
*/
    #aboutme p {
        text-align: center;
        font-size: 14px;
    }

    /*
**  CSS FOR SKILLS CONTENT
*/
    #skills img {
        width: 50%;
    }

    .skills-two {
        margin-top: -69px;
    }

    /*
    **
    css for footer*/
    footer p {
        font-size: 18px;

    }

    #social-med li {
        left: 18.5%;
        margin: 5px;
    }

  #social-med{
      font-size: 0.5em;
      margin-top: -13px;
  }


    #in-touch{
        margin-top: -15em;
       font-size: 2.5em;

    }


    #mijn-cv img{
        width: 80%;
        margin-top: 160px;

    }

    #no-image {
        background-position: 75% -14px;
    }


    #first-image {
        background-position: 75% -14px;
    }


    #con-container {
        margin-top: 100%;
    }

    #nosee {
        height: 14em;
        margin-top: -5em;
    }


    #nosee p{
        font-size: 30px;
        font-weight: 900;
    }


    /*
  ** CSS FOR THE PAGE VOICE OVER CONTENT
  **/



    #gamev {
        margin-top: 20%;
        margin-bottom: 16%;
    }

    /* CSS FOR AKWAABA CONTENT*/

    #akwabagh {
        margin-top: 45%;
    }


   .ghnama{
       margin-top: 30px;

   }

    /*
    **
    CSS FOC CV CONTENT r*/

    #mijn-cv{

        margin-top: -50%;


    }


    /* CSS FOR WORK CONTENT*/

    #center-me{
        width: 90%;
        margin: 0 auto;
    }

    .main-discr {
        width: 290px;
    }

    #con-work {
        margin-top: 85%;
    }

    #c-work {
        margin-top: 85%;
    }

    /* CSS FOR CONTACT  CONTENT*/

    #contact-form {
        margin-top: -85%;

    }

    /* css for image map*/


    #detail-container {
        width: 79%;
        margin-left: 2em;
    }


    .makeme-small {
    width: 90%;
}

.about-text {
    margin-top: -34em;
}




}