@CHARSET "ISO-8859-1";

/* Iphone5 Portrait and Landscape */
@media only screen  and (min-device-width: 320px) and (max-device-width: 568px) {
      .section.home{
          background: url(../img/texture.png) no-repeat #201e2f;
          background-position: 43% 60%;
          background-size: 840px;
      }
      
      .logo img{
          width: 145px;
      }
      
      .headline-home h1{
          font-size: 16px;
          line-height: 20px;
      }
      
      .headline-home .heading{
          font-size: 12px;
      }
      
      .work-icon span, .about-icon span{
          opacity: 1;
      }
      
      .menu-links a i{
          font-size: 35px;
      }
      
      .menu-logo img{
          left: 45%;
          width: 37px;
          top: 60px;
      }
      
      .slide a.headline{
              font: 900 113% Roboto-bold;
              opacity: 0.9;
              letter-spacing: 0.1em;
              padding: 10px;
              min-width: 310px;
      }
      
      .project-head h3{
          font: 900 32px Roboto-bold;
      }
      
      #about .my-pic{
          padding-top: 60px;
      }
      
      #about .my-pic img{
        width: 330px;
      }
      
      #about .about-me h2{
          font-size: 50px;
      }
      
      .logo-project img{
          margin-top: 60px;
      }
      .single-project {
        padding-right: 30px;
        padding-left: 30px;
      }
      .project-view .screens{
        padding-top: 60px;
      }

      .project-view img{
        width: 100%;
      }
}

/* Iphone6 Portrait and Landscape */
@media only screen  and (min-device-width: 320px) and (max-device-width: 667px) {
      .section.home{
          background: url(../img/texture.png) no-repeat #201e2f;
          background-position: 38% 70%;
          background-size: 1100px;
      }
      
      .logo img{
          width: 135px;
      }
      
      .headline-home h1{
          font-size: 20px;
          line-height: 30px;
      }
      
      .headline-home .heading{
          font-size: 12px;
      }
      
      .work-icon span, .about-icon span{
          opacity: 1;
      }
      
      .menu-links a i{
          font-size: 35px;
      }
      
      .menu-logo img{
          left: 45%;
          width: 37px;
          top: 60px;
      }
      
      .slide a.headline{
              font: 900 113% Roboto-bold;
    opacity: 0.9;
    letter-spacing: 0.1em;
    padding: 10px;
    min-width: 310px;
      }
      
      .project-head h3{
          font: 900 32px Roboto-bold;
      }
      
      #about .my-pic{
          padding-top: 60px;
      }
      
      #about .about-me h2{
          font-size: 50px;
      }
      .logo-project img{
          margin-top: 60px;
      }
      
      .single-project {
        padding-right: 30px;
        padding-left: 30px;
      }
      
      .fp-slidesNav{
          left: 45%;
      }
      #about .about-me{
          border-right:0;
          padding-left: 0;
           padding-right: 0;
      }

      #about .skills{
          padding-left: 0;
          padding-right: 0;
          padding-top: 50px;
          padding-bottom: 90px;
      }

      .about-cont{
          padding-top: 150px;
      }
      #about .table>tbody>tr>td{
        padding: 10px;
        font-size: 12px;
      }
      #about .table img{
        max-width: 30px;
        padding-bottom: 10px;
      }
      .project-view .screens{
        padding-top: 60px;
      }

      .project-view img{
        width: 100%;
      }
}

@media only screen  and (min-device-width: 375px) and (max-device-width: 413px) {
      .fp-slidesNav{
          left: 42%;
      }
      .single-project {
        padding-right: 30px;
        padding-left: 30px;
      }
      .about-cont{
        padding-top:180px;
        margin-bottom:100px;
      }
      .about-button,.work-button{
        left: 42%;
      }
      #about .skills{
        padding:0px;
        margin-top:60px;
      }
      #about .about-me{
          padding:0px;
          border-right:0;
      }
      #about .table>tbody>tr>td{
        padding: 20px;
        font-size: 14px;
      }
      #about .table img{
        max-width: 50px;
      }
      .project-view .screens{
        padding-top: 60px;
      }
      .project-view img{
        width: 100%;
      }
}
@media only screen  and (min-device-width: 667px) and (max-device-width: 1024px) {
      .section.home{
          background: url(../img/texture.png) no-repeat #201e2f;
          background-position: 39% 70%;
          background-size: 1300px;
      }
      .logo img{
          width: 145px;
      }
      
      .headline-home h1{
          font-size: 20px;
          line-height: 30px;
      }
      
      .headline-home .heading{
          font-size: 12px;
      }
      
      .work-icon span, .about-icon span{
          opacity: 1;
      }
      
      .menu-links a i{
          font-size: 35px;
      }
      
      .menu-logo img{
          left: 46%;
          width: 47px;
          top: 60px;
      }
      
      .slide a.headline{
              font: 900 113% Roboto-bold;
    opacity: 0.9;
    letter-spacing: 0.1em;
    padding: 10px;
    min-width: 310px;
      }
      
      .project-head h3{
          font: 900 32px Roboto-bold;
      }
      
      .logo-project img{
          margin-top: 60px;
      }
      .single-project {
        padding-right: 30px;
        padding-left: 30px;
      }
       .about-cont{
        padding-top:180px;
        margin-bottom:100px;
      }
      .about-button,.work-button{
        left: 42%;
      }
      #about .skills{
        padding:0px;
        margin-top:60px;
      }
      #about .about-me{
          padding:0px;
          border-right:0;
      }
      .project-view .screens{
        padding-top: 60px;
      }
      .project-view img{
        width: 100%;
      }
}