body{
    width: 100%;
    margin: 0;
    padding: 0;
    min-width: 320px;
    background-color: #F9F7F4;
}

h1{
    font-family: 'Bontang', sans-serif;
    font-size: 48pt;
    font-weight: 400;
    padding: 0;
    margin: 0;
    color: #9BC1BC;
    line-height: 0.5;
}

.h1-sub{
    font-family: 'Mitr', sans-serif;
    font-size: 22pt;
    line-height: 0;
    margin-top: 20px;
}

h2{
    font-family: 'Mitr', sans-serif;
    font-size: 28pt;
    font-weight: 400;
    padding: 0;
    margin: 0;
    color: #9BC1BC;
    line-height: 1;
}

h3{
    font-family: 'Bontang', sans-serif;
    font-size: 28pt;
    font-weight: 400;
    padding: 0;
    margin: 0;
    color: #F4F1BB;
    line-height: 1;
}

h4{
    font-family: 'Mitr', sans-serif;
    font-size: 22pt;
    font-weight: 400;
    padding: 0;
    margin: 0;
    color: #5D576B;
    line-height: 1;
}

h5{
    font-family: 'Mitr', sans-serif;
    font-size: 18pt;
    font-weight: 300;
    line-height: 1;
    color: #5D576B;
}

p{
    font-family: 'Mitr', sans-serif;
    font-size: 18pt;
    font-weight: 300;
    line-height: 1;
    color: #5D576B;
}

ul{
    font-family: 'Mitr', sans-serif;
    font-size: 18pt;
    font-weight: 300;
    line-height: 1;
    color: #5D576B;
}

li{
    margin-bottom: 10px;
}

b{
    font-weight: 500;
}

strong{
    font-weight: 500;
}

a{
    font-family: 'Mitr', sans-serif;
    text-decoration: none;
    color: #ED6A5A;
    font-size: 18pt;
    font-weight: 500;
    line-height: 1;
    transition: color 0.25s;
}

a:hover{
    color: #CF5647;
    transition: color 0.25s;
}

.bold{
    font-weight: 500;
}

.light{
    color: #5D576B;
}

.dark{
    color: #F4F1BB;
}

.dark p{
    color: #F9F7F4;
}

a.dark:hover{
    color: #D9D472;
}

.lineheight-2{
    line-height: 2 !important;
}

.lineheight-1-and-half{
    line-height: 1.5 !important;
}

.lineheight-1{
    line-height: 1 !important;
}

.lineheight-half{
    line-height: 0.5 !important;
}

::selection{
    background-color: #F4F1BB;
    color: #ED6A5A;
}

/* width */
::-webkit-scrollbar {
    width: 15px;
    background: none;
}

/* Track */
::-webkit-scrollbar-track {
    background: #ef8c72;
    border-color: #e06859;
    border-style: solid;
    border-width: 1px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #F4F1BB;
    border-radius: 10px;
    transition: background 0.5s;
    border-color: #D9D472;
    border-style: solid;
    border-width: 1px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #D9D472;
    transition: background 0.5s;
}

.mobile-only{
    display: none;
}

.mobile-nav{
    display: none;
    position: absolute;
}
    
.mobile-nav-page{
     display: none;
}

.check{
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    position: absolute;
}

.btn-blue{
    width: 250px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    background-color: #9BC1BC;
    border-radius: 30px;
    filter: drop-shadow(0 10px 0 #7B9C98);
    transition: filter 0.5s, background 0.5s, margin 0.5s, transform 0.5s;
}

.btn-blue:hover{
    filter: drop-shadow(0 5px 0 #7B9C98);
    transform: translateY(5px);
    background-color: #9BC1BC;
    transition: filter 0.75s, background 0.75s, transform 0.75s;
}

.btn-blue:active{
    filter: drop-shadow(0 5px 0 #7B9C98);
    transform: translateY(10px);
    background-color: #7B9C98;
    transition: filter 0.75s, background 0.75s, transform 0.75s;
}

.btn-red{
    width: 250px;
    display: block;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 50px;
    padding: 10px;
    background-color: #ED6A5A;
    border-radius: 30px;
    text-align: center;
    filter: drop-shadow(0 10px 0 #CF5647);
    transition: filter 0.5s, background 0.5s, margin 0.5s, transform 0.5s;
}

.btn-red:hover{
    filter: drop-shadow(0 5px 0 #CF5647);
    transform: translateY(5px);
    background-color: #ED6A5A;
    transition: filter 0.75s, background 0.75s, transform 0.75s;
}

.btn-red:active{
    filter: drop-shadow(0 5px 0 #CF5647);
    transform: translateY(10px);
    background-color: #CF5647;
    transition: filter 0.75s, background 0.75s, transform 0.75s;
}


.right{
    text-align: right !important;
}

.left{
    text-align: left !important;
}

.center{
    text-align: center !important;
    margin: auto !important;
}

.no-select{
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.border{
    border-style: solid;
    border-width: 1px;
    border-color: #c7c4c0;
    border-radius: 20px;
}





/*****NAV*****/
.nav{
    height: 75px;
    width: 100%;
    margin: 0;
    z-index: 200;
    background-color: #9BC1BC;
    filter: drop-shadow(0p0pcx 3px 14px #2E413F);
    position: fixed;
    overflow: hidden;
}

.nav-logo{
    height: 80%;
    overflow: hidden;
    object-position: center;
    vertical-align: middle;
    padding: 8px;
    padding-left: 20px;
    margin-right: 20px;
    display: inline-block;
    position: relative;
}

.nav-logo-img{
    object-fit: cover;
    object-position: center;
    height: 100%;
    transition: filter 0.5s;
}

.nav-logo-img:hover{
    filter: hue-rotate(-58deg) saturate(500%) brightness(98%);
    transition: filter 0.5s;
}

.nav-link{
    display: inline-block;
    position: relative;
    font-family: 'Bontang', sans-serif;
    font-size: 18pt;
    font-weight: 400;
    margin: auto;
    margin-left: 20px;
    padding: 10px;
    color: #5D576B;
    background-color: #F4F1BB;
    border-radius: 30px;
    filter: drop-shadow(0 8px 0 #D9D472);
    transform: translateY(0);
    transition: filter 0.5s, background 0.5s, margin 0.5s, transform 0.5s;
}

.nav-link:hover{
    margin-bottom: 0;
    filter: drop-shadow(0 4px 0 #D9D472);
    background-color: #F4F1BB;
    transform: translateY(4px);
    transition: filter 0.75s, background 0.75s, margin 0.75s, transform 0.75s;
}

.nav-link:active{
    filter: drop-shadow(0 0 0 #D9D472);
    background-color: #D9D472;
    transform: translateY(8px);
    transition: filter 0.75s, background 0.75s, margin 0.75s, transform 0.75s;
}

.nav-link a{
    color: #5D576B;
    font-weight: 400;
}

.get-quote{
    color: #F4F1BB;
    background-color: #ED6A5A;
    filter: drop-shadow(0 8px 0 #CF5647);
    transition: filter 0.5s, background 0.5s, margin 0.5s, transform 0.5s;
}

.get-quote:hover{
    filter: drop-shadow(0 4px 0 #CF5647);
    background-color: #ED6A5A;
    transition: filter 0.75s, background 0.75s, margin 0.75s, transform 0.75s;
}

.get-quote:active{
    filter: drop-shadow(0 0 0 #CF5647);
    background-color: #CF5647;
    transition: filter 0.75s, background 0.75s, margin 0.75s, transform 0.75s;
}

.get-quote a{
    color: #F4F1BB;
}

.nav-social{
    display: block;
    height: 30%;
    float: right;
    margin: auto;
    margin-right: 20px;
    margin-top: 10px;
}

.social-link{
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin: auto;
    margin-left: 10px;
    padding: 10px;
    color: #5D576B;
    background-color: #f9f7f4;
    border-radius: 30px;
    filter: drop-shadow(0 8px 0 #e0dbd2);
    transform: translateY(0);
    transition: filter 0.5s, background 0.5s, margin 0.5s, transform 0.5s;
}

.social-link:hover{
    margin-bottom: 0;
    filter: drop-shadow(0 4px 0 #e0dbd2);
    background-color: #f9f7f4;
    transform: translateY(4px);
    transition: filter 0.75s, background 0.75s, margin 0.75s, transform 0.75s;
}

.social-link:active{
    filter: drop-shadow(0 0 0 #e0dbd2);
    background-color: #e0dbd2;
    transform: translateY(8px);
    transition: filter 0.75s, background 0.75s, margin 0.75s, transform 0.75s;
}

.social-link img{
    height: 100%;
    display: inline-block;
}



/*****HOME*****/
.hero{
    width: 100%;
    height: 105vh;
    min-height: 900px;
    z-index: 100;
    overflow: hidden;
    object-position: bottom;
    padding-bottom: 15px;
}

.hero-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    filter: drop-shadow(0 5px 10px #722B22);
}

.hero-cont{
    position: absolute;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -65%);
    text-align: center;
}

.tagline{
    font-family: 'Bontang', sans-serif;
    font-size: 56pt;
    font-weight: 400;
    padding: 0;
    margin: 0;
    color: #F4F1BB;
    line-height: 1;
}

.hero-cont img{
    width: 200px;
}

.cta-btn{
    width: 250px;
    margin: auto;
    margin-top: 20px;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #9BC1BC;
    border-radius: 30px;
    filter: drop-shadow(0 10px 0 #7B9C98);
    transition: filter 0.5s, background 0.5s, margin 0.5s, transform 0.5s;
}

.cta-btn:hover{
    filter: drop-shadow(0 5px 0 #7B9C98);
    transform: translateY(5px);
    background-color: #9BC1BC;
    transition: filter 0.75s, background 0.75s, transform 0.75s;
}

.cta-btn:active{
    filter: drop-shadow(0 5px 0 #7B9C98);
    transform: translateY(10px);
    background-color: #7B9C98;
    transition: filter 0.75s, background 0.75s, transform 0.75s;
}

.home-cont{
    width: 100%;
    margin-top: -40px;
}




/***INTRODUCTION***/
.introduction{
    width: 80%;
    text-align: center;
    position: relative;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 80px;
}

.introduction h1{
    line-height: 0.8;
}

.introduction p{
    width: 75%;
    margin: auto;
    text-align: left;
    margin-top: 30px;
}

.intro-cta{
    width: 250px;
    display: block;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 50px;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #ED6A5A;
    border-radius: 30px;
    text-align: center;
    filter: drop-shadow(0 10px 0 #CF5647);
    transition: filter 0.5s, background 0.5s, margin 0.5s, transform 0.5s;
}

.intro-cta:hover{
    filter: drop-shadow(0 5px 0 #CF5647);
    transform: translateY(5px);
    background-color: #ED6A5A;
    transition: filter 0.75s, background 0.75s, transform 0.75s;
}

.intro-cta:active{
    filter: drop-shadow(0 5px 0 #CF5647);
    transform: translateY(10px);
    background-color: #CF5647;
    transition: filter 0.75s, background 0.75s, transform 0.75s;
}



/***SERVICES***/
.services{
    width: 100%;
    text-align: center;
}

.srv-h2{
    display: block;
    float: none;
    background-color: #5D576B;
    width: 30%;
    min-width: 200px;
    padding-bottom: 20px;
    padding-top: 20px;
    margin: auto;
    border-radius: 50px 50px 0 0;
}

.srv-web-design{
    background-color: #F4F1BB;
    text-align: center;
    display: block;
    padding-top: 20px;
    margin-bottom: 0;
}

.srv-brand-design{
    background-color: #EF8C72;
    padding-top: 20px;
    margin-top: 0;
}

.srv-graphic-design{
    background-color: #9BC1BC;
    padding-top: 20px;
}

.srv-cont{
    width: 90%;
    max-width: 1000px;
    height: 400px;
    float: none;
    display: block;
    margin: auto;
}

.srv-img{
    width: 40%;
    border-radius: 200px 200px 0 0;
    display: inline-block;
    vertical-align: middle;
}

.srv-txt{
    width: 50%;
    margin-left: 20px;
    margin-right: 20px;
    text-align: left;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-top: 50px;
}

.srv-txt p{
    display: block;
}



/***SHOP***/
.shop{
    width: 100%;
}

.shop-h2{
    text-align: center;
    width: 30%;
    margin: auto;
    margin-top: 30px;
}

.shop-cont{
    width: 90%;
    margin: auto;
    text-align: center;
}

.shop-tile{
    width: 22%;
    display: inline-block;
    margin: 10px;
    border-radius: 200px 200px 0 0;
    overflow: hidden;
    background-color: #9BC1BC;
}

.shop-tile img{
    width: 100%;
    height: 100%;
    overflow: hidden;
    filter: brightness(90%);
    transition: filter 0.5s;
}

.shop-tile img:hover{
    filter: brightness(100%);
    transition: filter 0.5s;
}

.shop-tile-txt{
    width: 90%;
    height: 150px;
    text-overflow: wrap;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.prod-desc{
    text-align: left;
    margin: 0;
    display: block;
    margin-top: 10px;
}

.prod-price-button{
    vertical-align: middle;
    display: flex;
    justify-content: space-between;
}
    
.price{
    font-weight: 500;
    vertical-align: middle;
}

.buy-btn{
    color: #F4F1BB;
    vertical-align: middle;
}

.buy-btn p{
    font-family: 'Mitr', sans-serif;
    text-decoration: none;
    color: #F4F1BB;
    font-size: 18pt;
    font-weight: 500;
    line-height: 1;
    transition: color 0.25s;
}

.buy-btn p:hover{
    color: #CF5647;
    transition: color 0.25s;
}

.shop-btn{
    width: 250px;
    display: block;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 50px;
    padding: 10px;
    background-color: #ED6A5A;
    border-radius: 30px;
    text-align: center;
    filter: drop-shadow(0 10px 0 #CF5647);
    transition: filter 0.5s, background 0.5s, margin 0.5s, transform 0.5s;
}

.shop-btn:hover{
    filter: drop-shadow(0 5px 0 #CF5647);
    transform: translateY(5px);
    background-color: #ED6A5A;
    transition: filter 0.75s, background 0.75s, transform 0.75s;
}

.shop-btn:active{
    filter: drop-shadow(0 5px 0 #CF5647);
    transform: translateY(10px);
    background-color: #CF5647;
    transition: filter 0.75s, background 0.75s, transform 0.75s;
}



/***ABOUT ME***/
.about-me{
    background-color: #F4F1BB;
    filter: drop-shadow(0 10px 10px #5a5726);
    z-index: 100;
    padding-top: 50px;
    padding-bottom: 50px;
}

.abt-me-cont{
    width: 90%;
    max-width: 1200px;
    display: block;
    margin: auto;
    text-align: left;
}

.portrait{
    width: 30%;
    border-radius: 200px 200px 0 0;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

.portrait img{
    width: 100%;
}

.bio{
    display: inline-block;
    width: 60%;
    margin-left: 30px;
    margin-top: 0;
    text-align: left;
    vertical-align: middle;
}

.abt-cta-btn{
    width: 250px;
    margin-top: 20px;
    padding: 10px;
    padding-left: 40px;
    padding-right: 40px;
    text-align: center;
    background-color: #9BC1BC;
    border-radius: 30px;
    filter: drop-shadow(0 10px 0 #7B9C98);
    transition: filter 0.5s, background 0.5s, margin 0.5s, transform 0.5s;
}

.abt-cta-btn:hover{
    filter: drop-shadow(0 5px 0 #7B9C98);
    transform: translateY(5px);
    background-color: #9BC1BC;
    transition: filter 0.75s, background 0.75s, transform 0.75s;
}

.abt-cta-btn:active{
    filter: drop-shadow(0 0 0 #7B9C98);
    transform: translateY(10px);
    background-color: #7B9C98;
    transition: filter 0.75s, background 0.75s, transform 0.75s;
}



/***NEWSLETTER***/
.newsletter{
    background-color: #9BC1BC;
    width: 80%;
    margin: auto;
    border-radius: 0 0 50px 50px;
    margin-bottom: 50px;
}

.newsletter-bar{
    background-color: #9BC1BC;
}

.newsletter-cont{
    width: 80%;
    max-width: 550px;
    text-align: center;
    margin: auto;
    padding-top: 40px;
}



/*****MAILCHIMP*****/
.indicates-required{
    font-family: 'Mitr', sans-serif;
    font-weight: 300;
    color: #F4F1BB;
}

.mc-field-group input{
    border-radius: 20px;
    border: none;
    color: #9BC1BC;
    background-color: #F9F7F4;
    font-family: 'Mitr', sans-serif;
    font-size: 18px;
    padding: 8px;
    margin: auto;
    margin-top: 20px;
    width: 100%;
}

.mc-button{
    width: 250px;
    margin-top: 20px;
    margin-bottom: 50px;
    padding: 10px;
    padding-left: 40px;
    padding-right: 40px;
    border: none;
    font-family: 'Bontang', sans-serif;
    color: #5D576B;
    font-size: 18pt;
    text-align: center;
    background-color: #F4F1BB;
    border-radius: 30px;
    filter: drop-shadow(0 10px 0 #D9D472);
    transition: filter 0.5s, background 0.5s, margin 0.5s, transform 0.5s;
}

.mc-button:hover{
    filter: drop-shadow(0 5px 0 #D9D472);
    transform: translateY(5px);
    background-color: #F4F1BB;
    transition: filter 0.75s, background 0.75s, transform 0.75s;
}

.mc-button:active{
    filter: drop-shadow(0 0 0 #D9D472);
    transform: translateY(10px);
    background-color: #D9D472;
    transition: filter 0.75s, background 0.75s, transform 0.75s;
}

.footer{
    width: 100%;
    height: 550px;
    position: relative;
    display: block;
    text-align: center;
    overflow: hidden;
}

.footer-back{
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    position: relative;
    display: block;
}

.footer-cont{
    width: 250px;
    position: absolute;
    display: block;
    text-align: left;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.footer-cont a{
    display: block;
    margin-top: 20px;
    color: #F4F1BB;
}

.footer-cont a:hover{
    color: #D9D472;
}

.footer-logo{
    width: 150px;
    object-fit: cover;
    display: block;
    margin: auto;
}




/***COMING SOON PAGE***/
.coming-soon{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.cs-cont{
    width: 100%;
    height: 100%;
    margin: none;
    overflow: hidden;
}

.cs-cont img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-txt{
    width: 80%;
    max-width: 600px;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cs-txt h2{
    font-size: 24pt;
    margin-top: 30px;
    margin-bottom: 30px;
}



.mobile-only{
    display: none;
}


/***HEADER***/
.header{
    width: 100%;
    height: 450px;
    z-index: 100;
    overflow: hidden;
    object-position: bottom;
}

.header-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    filter: drop-shadow(0 3px 5px #722B22);
}

.header-cont{
    position: absolute;
    width: 90%;
    top: 30%;
    left: 20%;
    transform: translate(-50%, -65%);
    text-align: center;
}

/***PORTFOLIO***/
.portfolio-cat{
    margin: auto;
    display: block;
    width: 100%;
    text-align: center;
}

.web-cat{
    width: 20%;
    min-width: 300px;
    display: inline-block;
    margin: 10px;
}

.web-cat-img{
    width: 100%;
    border-radius: 300px 300px 0 0;
    overflow: hidden;
}

.brand-cat{
    width: 20%;
    min-width: 300px;
    display: inline-block;
    margin: 10px;
}

.brand-cat-img{
    width: 100%;
    border-radius: 300px 300px 0 0;
    overflow: hidden;
}

.graphic-cat{
    width: 20%;
    min-width: 300px;
    display: inline-block;
    margin: 10px;
}

.graphic-cat-img{
    width: 100%;
    border-radius: 300px 300px 0 0;
    overflow: hidden;
}

.cat-txt{
    margin-top: 10px;
}

.portfolio-cont{
    width: 100%;
    margin-top: 40px;
}

.portfolio-box{
    position: relative;
    width: 33.33%;
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    float: left;
    line-height: 0;
    background-color: #EF8C72;
}

.portfolio-box img{
    width: 100%;
    height: 100%;
    padding-top: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    transition: opacity 0.2s;
}

.portfolio-box:hover > img{
    opacity: 0.1;
    transition: opacity 0.2s;
}

.portfolio-box-lbl{
    width: 75%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    vertical-align: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.portfolio-box:hover > .portfolio-box-lbl{
    opacity: 1;
    transition: opacity 0.2s;
}


/*ABOUT*/
.about-cont{
    width: 60%;
    margin: auto;
    display: block;
}

.about-cont div{
    margin-bottom: 20px;
}

.about-txt{
    width: 60%;
    padding: 30px;
    display: inline-block;
    vertical-align: middle;
}

.abt-icon{
    width: 30%;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}

.abt-icon img{
    width: 100%;
    object-fit: cover;
    vertical-align: middle;
}


/*DOWNLOADS*/
.download-intro{
    width: 40%;
    text-align: center;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.download-cont{
    width: 90%;
    display: block;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 20px;
    background: none;
}

.download-box{
    width: 31%;
    margin: 0;
    padding: 10px;
    display: inline-block;
    overflow: hidden;
    line-height: 0;
    text-align: center;
}

.download-box img{
    width: 100%;
    height: 100%;
    padding-top: 100%;
    border-radius: 10px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
}

.download-box h2{
    margin-top: 20px;
    margin-bottom: 0;
}

.download-box p{
    margin-top: 10px;
}

.download-btn h3{
    font-size: 18pt;
}



/*****NEWS*****/
.news-label{
    margin-top: 20px;
}

.news-cont{
    width: 75%;
    margin: auto;
    margin-top: 20px;
    text-align: center;
}

.news-listing{
    display: block;
    text-align: left;
    margin-bottom: 20px;
}

.news-sub{
    margin-bottom: 40px;
}

.news-img{
    width: 35%;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
}

.news-img img{
    width: 100%;
    border-radius: 20px;
    padding: 0;
}

.news-txt{
    width: 60%;
    display: inline-block;
    text-align: left !important;
    vertical-align: middle;
    padding: 20px;
}

.news-btn{
    font-size: 18pt;
    margin: 0;
}

.blog-cont{
    width: 60%;
    margin: auto;
    margin-bottom: 40px;
    text-align: center;
}

.blog-cont h2{
    text-align: left;
}

.blog-cont p{
    text-align: left;
}

.blog-cont ul{
    text-align: left;
}

.blog-img{
    width: 70%;
    margin: auto;
    text-align: center;
}






.mobile-only{
    display: none;
}



/*****TABLET & SMALLER*****/
@media all and (max-width: 1200px){
    h1{
        font-size: 48pt;
    }
    
    .h1-sub{
        font-size: 22pt;
    }
    
    .mobile-left{
        text-align: left!important;
    }
    
    .mobile-nav{
        display: block;
        position: fixed;
        width: 50px;
        right: 20px;
        top: 12px;
        z-index: 301;
    }

    .mobile-nav img{
        object-fit: cover;
        display: block;
        z-index: 199;
        width: 100%;
    }
    
    input[type=checkbox]:checked ~ .mobile-nav-page {
        display: block;
        z-index: 300;
        width: 100vw;
        height: 100vh;
        text-align: center;
        position: fixed;
    }
    
    input[type=checkbox]:checked ~ .mobile-nav img{
        display: none;
    }
    
    .mobile-nav-bk{
        display: block;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        position: static;
    }
    
    .mobile-nav-bk img{
        height: 100%;
        z-index: 200;
        position: static;
    }
    
    
    .mobile-nav-bar{
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 201;
        transform: translate(-50%, -35%);
        text-align: center;
        margin: auto;
    }
    
    .mobile-nav-logo{
        width: 200px;
        margin: auto;
    }
    
    .mobile-nav-logo img{
        width: 100%;
        object-fit: cover;
    }
    
    .nav-link{
        display: block;
        text-align: center;
        width: 150px;
        margin: auto;
        margin-top: 20px;
    }
    
    .get-quote{
        margin-top: 40px;
    }
    
    .nav-social{
        float: none;
        margin-right: 10px;
    }
    
    .social-link{
        height: 25px;
        margin-right: 0;
        margin: auto;
        margin-top: 20px;
        margin-left: 10px;
    }
    
    .hero{
        min-height: 900px;
    }
    
    .hero-cont{
        margin-top: 20px;
        text-align: left;
        width: 75%;
    }
    
    .hero-cont h2{
        margin-top: 20px;
        margin-bottom: 10px;
    }
    
    .cta-btn{
        text-align: center;
        margin-left: 0;
    }
    
    .srv-h2{
        padding-bottom: 40px;
    }
    
    .srv-cont{
        display: block;
        position: relative;
        text-align: center;
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .srv-img{
        display: block;
        width: 75%;
        max-width: 400px;
        position: relative;
        text-align: center;
        margin: auto;
    }
    
    .srv-txt{
        display: block;
        width: 75%;
        max-width: 400px;
        margin: auto;
        margin-top: 20px;
        margin-bottom: 20px;
        position: relative;
    }
    
    .shop-tile{
        width: 45%;
    }
    
    .abt-me-cont{
        width: 80%;
        max-width: 800px;
        margin: auto;
    }
    
    .portrait{
        display: block;
        width: 100%;
        max-width: 400px;
        margin: auto;
    }
    
    .bio{
        display: block;
        width: 100%;
        margin: auto;
        margin-top: 30px;
    }
    
    .abt-cta-btn{
        margin: auto;
    }
    
    .newsletter{
        width: 90%;
    }
    
    .newsletter-cont{
        width: 80%;
    }
    
    
    
    .header-cont{
        position: absolute;
        width: 90%;
        top: 20%;
        left: 40%;
        transform: translate(-50%, -65%);
        text-align: center;
    }
    
    .portfolio-cat{
        margin: auto;
        text-align: center;
    }
    
    .web-cat{
        display: block;
        margin: auto;
        margin-bottom: 20px;
    }
    
    .brand-cat{
        display: block;
        margin: auto;
        margin-bottom: 20px;
    }
    
    .graphic-cat{
        display: block;
        margin: auto;
        margin-bottom: 20px;
    }
    
    .portfolio-box-lbl p{
        display:none;
    }
    
    .download-intro{
        width: 80%;
    }
    
    .download-cont{
        width: 90%;
        padding: 0;
        text-align: center;
        margin: auto;
    }
    
    .download-box{
        width: 45%;
        margin: 0;
        padding: 10px;
        display: block;
        overflow: hidden;
        float: left;
        line-height: 0;
        text-align: center;
    }

    .download-box img{
        width: 100%;
        height: 100%;
        padding-top: 100%;
        border-radius: 10px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        object-fit: cover;
        object-position: center;
    }
    
    .download-btn{
        width: auto;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .download-btn h3{
        font-size: 18pt;
    }
    
    .about-cont{
        width: 80%;
        margin: auto;
        margin-top: 50px;
        margin-bottom: 30px;
    }
    
    .about-txt{
        width: 100%;
        padding: 0;
        text-align: left;
        display: block;
    }
    
    .about-cont .mobile-only{
        display: block;
    }
    
    .abt-icon{
        width: 50px;
        margin-bottom: 20px;
        text-align: left;
    }
    
    .news-img{
        display: block;
        width: 50%;
    }
    
    .news-txt{
        width: 100%;
        display: block;
    }
    
    .blog-cont{
        width: 80%;
    }
    
    .blog-img{
        width: 75%;
        margin-top: 15px;
    }
    
    
    
    
    .desktop-only{
        display: none;
    }
}



/*****MOBILE*****/
@media all and (max-width: 600px){
    
    .mobile-hidden{
        display: none;
    }
    
    .desktop-only{
        display: none;
    }
    
    h1{
        font-size: 36pt;
    }
    
    .h1-sub{
        font-size: 18pt;
    }

    h2{
        font-size: 22pt;
    }

    h3{
        font-size: 22pt;
    }

    h4{
        font-size: 16pt;
    }

    h5{
        font-size: 14pt;
    }

    p{
        font-size: 14pt;
    }

    a{
        font-size: 14pt;
    }
    
    ul{
        font-size: 14pt;
    }
    
    .mobile-left{
        text-align: left!important;
    }
    
    .hero-cont{
        top: 50%;
    }
    
    .tagline{
        font-size: 46pt;
    }
    
    .introduction{
        margin-top: 20px;
        width: 90%;
    }
    
    .introduction p{
        width: 90%;
    }
    
    .srv-web-design{
        display: block;
        margin-top: 20px;
        margin-bottom: 0;
    }
    
    .srv-h2{
        margin-bottom: 40px;
    }
    
    .srv-img{
        width: 80%;
        max-width: 400px;
    }
    
    .srv-txt{
        display: block;
        width: 80%;
        max-width: 400px;
        margin: auto;
        margin-top: 20px;
        text-align: left;
    }
    
    .shop-h2{
        margin-bottom: 20px;
    }
    
    .shop{
        width: 100%;
    }
    
    .shop-cont{
        width: 100%;
    }
    
    .shop-tile{
        width: 45%;
        display: inline-block;
        margin: 5px;
    }
    
    .shop-tile img{
        filter: none;
    }
    
    .shop-tile-txt{
        height: 90px;
    }
    
    .prod-desc{
        font-size: 12pt;
    }
    
    .prod-price-button p{
        font-size: 12pt;
    }
    
    .header{
        height: 350px;
    }
    
    .header-img{
        object-position: left bottom;
        overflow-y: visible;
    }
    
    .header-cont{
        position: absolute;
        width: 90%;
        top: 23%;
        left: 50%;
        transform: translate(-50%, -65%);
        text-align: center;
    }
    
    .portfolio-box{
        width: 50%;
    }
    
    .download-cont{
        width: 90%;
        padding: 0;
    }
    
    .download-box{
        width: 100%;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 40px;
        padding: 0;
        display: block;
        overflow: hidden;
        float: none;
        line-height: 0;
    }

    .download-box img{
        width: 100%;
        height: 100%;
        padding-top: 100%;
        border-radius: 10px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        object-fit: cover;
        object-position: center;
    }
    
    .download-btn{
        width: auto;
        margin: auto;
        padding-left: 0;
        padding-right: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .download-btn h3{
        font-size: 18pt;
        padding: 0;
    }
    
    .news-img{
        width: 100%;
    }
    
    
    
    
    
    .desktop-only{
        display: none;
    }
}