@media only screen and (max-width: 1024px) {
.contenthome{ left: 50%;}
.contentpage{ width: 100%; top:5%; overflow:scroll; padding-right:3%; margin-top: 2%;}
#contentgallery { width:100%; padding-left:4%;}
#navfilter{ top:5%; }
.contentintro{ width: 100%; }
.headingintro{ font-size:39pt; }
.subheadingintro{ font-size:28pt; }
#home, #about, #resume, #skill, #portofolio, #contact {
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    overflow: hidden;
    }
/*nav mobile*/
#nav-icon {
  position:fixed;
  background: none;
  left: 15px;
  top: 15px;
  width: 30px;
  height: 30px;
  z-index: 1000;
  cursor: pointer;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.menu-line {
  position: absolute;
  width: 100%;
  height: 2px!important;
  background-color:#959595;
  top: 0px;
  -webkit-transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -moz-transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -ms-transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -o-transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
}

.menu-line1 {
  position: absolute;
  width: 100%;
  height: 2px!important;
  background-color:#959595;
  top: 5px;
  -webkit-transition: top 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -moz-transition: top 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -ms-transition: top 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -o-transition: top 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  transition: top 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
}

.menu-line2 {
  position: absolute;
  width: 100%;
  height: 2px!important;
  background-color:#959595;
  top: 10px;
  -webkit-transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -moz-transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -ms-transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -o-transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
}

#nav-icon.open .menu-line {
  top: 5px;
  background-color: #fff;
  -webkit-transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -moz-transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -ms-transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -o-transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
}

#nav-icon.open .menu-line1 {
  opacity: 0;
  background-color: #fff;
  -webkit-transition: top 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -moz-transition: top 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -ms-transition: top 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -o-transition: top 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  transition: top 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
}

#nav-icon.open .menu-line2 {
  top: 5px;
  opacity: 0;
  background-color: #fff;
  -webkit-transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -moz-transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -ms-transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  -o-transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
  transition: 0.4s  cubic-bezier(.165, 0.840, 0.440, 1.000), opacity 0.4s linear;
}
.holdsidebar { width:0px;}
}

@media only screen and (max-width: 980px) {
#galleryporto{width:800px;}
#navfilter{ margin-top:5%;}
}

@media(max-width:360px) {
button{ width:40%; height:auto; font-size:12pt; padding:5px; }
#galleryporto{ width:100%; height:70%; }
#nav-icon { width: 25px;height: 25px; }
#soundintro{ width:10%; height:10%; }
#navfilter{ width:100%; margin-top:10%;}
#filters li.filt-modern{ font-size:65%; padding: 12px 3px 0px 3px; }
#contentgallery {padding-left:5.5%; height:80%;}
h3{ font-size:18pt; font-weight:600; }
input[type="text"], textarea { width:100%; }
input[type="email"]{ width:80%; }
.bgmodern img{  width: 100%; height:auto; }
.contenthome{ top: 50%; }
.contentpage{ top:10%; padding:0; }
}

@media(max-width:320px) {
#filters li.filt-modern{ font-size:60%; }
.contentintro{ width: 92%; }
.contentpage{ width:100%; margin-left:2px; }
.sidebar-nav > .sidebar-brand { margin:10% 0 10% 0; }
.sidebar-nav ul{ margin-top:15%; }
.sidebar-nav li { font-size:14pt;line-height:40px; }
.bgmodern img{  width: 100%; height:auto; }
}