/* my own version style, for index.html */
/* Edited by Nendar Wibarasta - January 2018 */

html {
    box-sizing: border-box;
}

*,*:before,*:after {
    box-sizing: inherit;
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

body,h1,h2,h3,h4,h5,h6 {
    font-family: "Lato", sans-serif;
}

body, html {
    height: 100%;
    color: #777;
    line-height: 1.8;
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
    background-image: url("../data/images/pexels-photo-92083.jpeg");
    min-height: 100%;
}

/* Second image (Portfolio) */
.bgimg-2 {
    background-image: url("../data/images/pexels-photo-768235.jpeg");
    min-height: 500px;
}

/* Third image (Contact) */
.bgimg-3 {
    background-image: url("../data/images/pexels-photo-169573.jpeg");
    min-height: 500px;
}

.nw-wide {
    letter-spacing: 1px;
}

.nw-hover-opacity {
    cursor: pointer;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3 {
        background-attachment: scroll;
    }
}

/*media rule for small screen */
@media (max-width:600px) {
  .nw-modal-content { 
      margin: 0 10px;
      width: auto!important;
    } 
  .nw-modal {
      padding-top: 30px
    }
    
  .nw-hide-small {
      display: none!important;
    } 
}

/* media rule for medium screen */
@media (max-width:992px) and (min-width:601px) {
    .nw-hide-medium{
        display:none!important;
    }
}

/* media rule for large screen */
@media (min-width:993px) {
    .nw-modal-content {width:900px}
    .nw-hide-large {display:none!important}
    .nw-sidebar.nw-collapse {display:block!important}
}


/* media rule min 601px */
@media (min-width:601px) {
  .nw-col.m1 {width:8.33333%}
  .nw-col.m2 {width:16.66666%}
  .nw-col.m3 {width:24.99999%}
  .nw-col.m4 {width:33.33333%}
  .nw-col.m5 {width:41.66666%}
  .nw-col.m6, .nw-half {width:49.99999%}
  .nw-col.m7 {width:58.33333%}
  .nw-col.m8 {width:66.66666%}
  .nw-col.m9 {width:74.99999%}
  .nw-col.m10 {width:83.33333%}
  .nw-col.m11 {width:91.66666%}
  .nw-col.m12 {width:99.99999%}
}

/* media rule max 768px */
@media (max-width:768px) {
    .nw-modal-content {width:500px}
    .nw-modal {padding-top:50px}
}

/* media rule min 993px */
@media (min-width:993px) {
  .nw-col.l1 {width:8.33333%}
  .nw-col.l2 {width:16.66666%}
  .nw-col.l3 {width:24.99999%}
  .nw-col.l4 {width:33.33333%}
  .nw-col.l5 {width:41.66666%}
  .nw-col.l6 {width:49.99999%}
  .nw-col.l7 {width:58.33333%}
  .nw-col.l8 {width:66.66666%}
  .nw-col.l9 {width:74.99999%} 
  .nw-col.l10 {width:83.33333%}
  .nw-col.l11 {width:91.66666%}
  .nw-col.l12 {width:99.99999%}
}

/* responsive s */
.nw-col.s1 {width:8.33333%} 
.nw-col.s2 {width:16.66666%}
.nw-col.s3 {width:24.99999%}
.nw-col.s4 {width:33.33333%}
.nw-col.s5 {width:41.66666%}
.nw-col.s6 {width:49.99999%} 
.nw-col.s7 {width:58.33333%}
.nw-col.s8 {width:66.66666%}
.nw-col.s9 {width:74.99999%}
.nw-col.s10 {width:83.33333%}
.nw-col.s11 {width:91.66666%}
.nw-col.s12 {width:99.99999%} 


/* section 1 */
.nw-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

.nw-bar {
    width: 100%;
    overflow: hidden;
}

.nw-bar .nw-bar-item {
    padding: 8px 16px;
    float: left;
    width: auto;
    border: none;
    /*outline: none;*/
    display: block;
}

.nw-bar .nw-button {
    white-space: normal;
}

/* clearfix */
.nw-container:after, .nw-container:before, .nw-panel:after, .nw-panel:before, .nw-row:after, .nw-row:before, .nw-row-padding:after, .nw-row-padding:before, .nw-bar:before, .nw-bar:after {
    content: "";
    display: table;
    clear: both;
}

.nw-bar-block .nw-bar-item {
    width: 100%;
    display: block;
    padding: 8px 16px;
    text-align: left;
    border: none;
    /*outline: none;*/
    white-space: normal;
    float: none;
}

.nw-button {
    border: none;
    display: inline-block;
    outline: 0;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}

.nw-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.nw-button:hover {
    color: #000!important;
    background-color: #ccc!important;
}

.nw-black, .nw-hover-black:hover {
    color: #fff!important;
    background-color: #000!important;
}

.nw-right {
    float: right!important;
}

.nw-hover-red:hover {
    color: #fff!important;
    background-color: #f44336!important;
}

.nw-white {
    color: #000!important;
    background-color: #fff!important;
}
/* end section 1 */

/* section 2 */
.nw-display-container {
    position: relative;
}

.nw-opacity-min {
    opacity: 0.75;
}

.nw-display-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

.nw-center {
    text-align: center!important;
}

.nw-padding-large {
    padding: 12px 24px!important;
}

.nw-xlarge {
    font-size: 24px;
}

.nw-animate-opacity {
    animation: opac 0.8s;
}
@keyframes opac {
    from{opacity:0} 
    to{opacity:1}
}
/* end section 2 */

/* section 3 */
.nw-content {
    max-width: 980px;
    margin: auto;
}

.nw-container,.nw-panel {
    padding: 0.01em 16px;
}

.nw-padding-64 {
    padding-top: 64px!important;
    padding-bottom: 64px!important;
}

.nw-row-padding, .nw-row-padding > .nw-half, .nw-row-padding > .nw-col {
    padding: 0 8px;
}

.nw-col, .nw-half {
    float: left;
    width: 100%;
}

.nw-margin-right {
    margin-right: 16px!important;
}
.nw-round {
    border-radius: 4px;
}

.nw-image {
    max-width: 100%;
    height: auto;
}

img {
    vertical-align: middle;
}

a {
    color: inherit;
}

.nw-opacity, .nw-hover-opacity:hover {
    opacity: 0.60;
}

.nw-opacity-off, .nw-hover-opacity-off:hover {
    opacity: 1;
}

.nw-large {
    font-size: 18px!important;
}

.nw-padding-16 {
    padding-top: 16px!important;
    padding-bottom: 16px!important;
}

.nw-light-grey {
    color: #000!important;
    background-color: #f1f1f1!important;
}

.nw-padding-small {
    padding: 4px 8px!important;
}

.nw-dark-grey {
    color: #fff!important;
    background-color: #616161!important;
}
/* end section 3 */

/* section 4 */
.nw-section {
    margin-top: 16px!important;
    margin-bottom: 16px!important;
}
/* end section 4 */

/* section 4a */
.nw-section1 {
    margin-top: 18px!important;
    margin-bottom: 18px!important;
}
/* end section 4a */

/* section 5 */
.nw-xxlarge {
    font-size: 36px!important;
}

.nw-text-white {
    color: #fff!important;
}
/* end section 5 */

/* section 7 */
.nw-modal {
    z-index: 3;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
}

.nw-modal-content {
    margin: auto;
    background-color: #fff;
    position: relative;
    padding: 0;
    outline: 0;
    width: 600px;
}

.nw-display-topright {
    position: absolute;
    right: 0;
    top: 0;
}

.nw-animate-zoom {
    animation: animatezoom 0.6s;
}
@keyframes animatezoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

.nw-transparent {
    background-color: transparent!important;
}
/*
.nw-blur {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);
}
/* end section 7 */

/* section 9 */
.nw-padding-32 {
    padding-top: 32px!important;
    padding-bottom: 32px!important;
}

.nw-round-large {
    border-radius: 8px;
}

.nw-greyscale {
    filter: grayscale(75%);
}

.nw-panel {
    margin-top: 16px;
    margin-bottom: 16px;
}

.nw-margin-bottom {
    margin-bottom: 16px!important;
}

.nw-hover-text-black:hover {
    color: #000!important;
}

.nw-input {
    padding: 8px;
    display: block;
    border: none;
    border-bottom: 1px solid #ccc;
    width: 100%;
}

.nw-border {
    border: 1px solid #ccc!important;
}
/* end section 9 */
    
/* style for toggle menu */
.nw-hide {
    display: none!important;
}

.nw-card {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

.nw-animate-top {
    position: relative;
    animation: animatetop 0.4s;
}

@keyframes animatetop {
    from {top:-300px;opacity:0}
    to {top:0;opacity:1}
}

.nw-show {
    display: block!important
}
/* end style for toggle menu */