/*---------------------------------------------GENERAL----*/
html, body {font-size:12px; font-family:'Open Sans', sans-serif; font-weight:300; box-sizing:border-box; color:#333;}
body {position:relative; width: 100%; min-height: 100vh; overflow-x:hidden;}

body.portfolio, body.snippet {font-size:14px;}

a, a:hover {text-decoration:none; color:inherit;}
a.disabled {pointer-events:none;}

*::-webkit-scrollbar {display:none;}
* {-ms-overflow-style:none; scrollbar-width:none;}

.hidden {display:none!important;}

.img100 > img {max-width:100%;}
.rule {height:1px; background:#333;}

/*---------------------------------------------HEADINGS----*/
.pageHeader {display:flex; align-items:center;}
.pageHeader::before {display:block; content:''; height:1px; background:#333; flex-grow:1;}
.pageHeader::after {display:block; content:''; height:1px; background:#333; flex-grow:1;}
.pageHeader h2 {flex-grow:0; padding:0 15px; font-style:italic; font-size:22px;}

h3 {font-size:14px; font-weight:600;}
h4 {font-size:12px; font-weight:600;}

/*---------------------------------------------STYLING----*/
.prel {position:relative;}
.pabs {position:absolute;}
.psta {position:static;}
.pfix {position:fixed;}

.noPadding {padding:0;}
.noMargin {margin:0;}

.noStyle {list-style:none;}
.inlineList li {display:inline-block;}

.m-b-2 {margin-bottom:2px;}
.m-b-5 {margin-bottom:5px;}
.m-b-10 {margin-bottom:10px;}
.m-b-15 {margin-bottom:15px;}
.m-b-20 {margin-bottom:20px;}
.m-b-30 {margin-bottom:30px;}
.m-b-40 {margin-bottom:40px;}
.m-b-50 {margin-bottom:50px;}
.m-b-60 {margin-bottom:60px;}

.m-t-2 {margin-top:2px;}
.m-t-5 {margin-top:5px;}
.m-t-10 {margin-top:10px;}
.m-t-15 {margin-top:15px;}
.m-t-20 {margin-top:20px;}
.m-t-30 {margin-top:30px;}
.m-t-40 {margin-top:40px;}
.m-t-50 {margin-top:50px;}
.m-t-60 {margin-top:60px;}

.m-r--5 {margin-right:-5px;}
.m-r-2 {margin-right:2px;}
.m-r-3 {margin-right:3px;}
.m-r-5 {margin-right:5px;}
.m-r-10 {margin-right:10px;}
.m-r-15 {margin-right:15px;}
.m-r-20 {margin-right:20px;}

.m-l--10 {margin-left:-10px;}
.m-l-0 {margin-left:0;}
.m-l-5 {margin-left:5px;}
.m-l-10 {margin-left:10px;}
.m-l-15 {margin-left:15px;}
.m-l-20 {margin-left:20px;}

.p4 {padding:4px;}
.p5 {padding:5px;}
.p10 {padding:10px;}

.p-t-2 {padding-top:2px;}
.p-t-5 {padding-top:5px;}
.p-t-10 {padding-top:10px;}
.p-t-15 {padding-top:15px;}
.p-t-20 {padding-top:20px;}
.p-t-30 {padding-top:30px;}
.p-t-40 {padding-top:40px;}
.p-t-60 {padding-top:60px;}

.p-b-2 {padding-bottom:2px;}
.p-b-5 {padding-bottom:5px;}
.p-b-10 {padding-bottom:10px;}
.p-b-15 {padding-bottom:15px;}
.p-b-20 {padding-bottom:20px;}
.p-b-30 {padding-bottom:30px;}
.p-b-40 {padding-bottom:40px;}
.p-b-60 {padding-bottom:60px;}

.p-l-2 {padding-left:2px;}
.p-l-5 {padding-left:5px;}
.p-l-10 {padding-left:10px;}
.p-l-15 {padding-left:15px;}
.p-l-20 {padding-left:20px;}
.p-l-25 {padding-left:25px;}
.p-l-30 {padding-left:30px;}

.p-r-2 {padding-right:2px;}
.p-r-5 {padding-right:5px;}
.p-r-10 {padding-right:10px;}
.p-r-15 {padding-right:15px;}
.p-r-20 {padding-right:20px;}
.p-r-25 {padding-right:25px;}
.p-r-30 {padding-right:30px;}

.fullw {width:100%;}
.fullw.m-l-5 {width:calc(100% - 5px);}

.cp {cursor:pointer;}

.up2 {bottom:2px;}

.border5 {border-radius:5px;}
.border10 {border-radius:10px;}
.border15 {border-radius:15px;}

.gap1 {height:1px; clear:both;}
.gap5 {height:5px; clear:both;}
.gap10 {height:10px; clear:both;}
.gap15 {height:15px; clear:both;}
.gap20 {height:20px; clear:both;}
.gap25 {height:25px; clear:both;}
.gap30 {height:30px; clear:both;}
.gap35 {height:35px; clear:both;}
.gap40 {height:40px; clear:both;}
.gap50 {height:50px; clear:both;}
.gap60 {height:60px; clear:both;}

.di {display:inline;}
.dib {display:inline-block;}
.db {display:block;}
.df {display:flex;}

/*---------------------------------------------TEXT----*/
.fontSemiBold {font-weight:600;}
.fontBold {font-weight:700;}
.fontItalic {font-style:italic;}
.fontNormal {font-style:normal; font-weight:normal;}

.textCentre {text-align:center;}
.textLeft {text-align:left;}
.textRight {text-align:right;}

.textUpper {text-transform:uppercase;}

.font9 {font-size:9px;}
.font10 {font-size:10px;}
.font11 {font-size:11px;}
.font12 {font-size:12px;}
.font13 {font-size:13px;}
.font14 {font-size:14px;}
.font16 {font-size:16px;}
.font18 {font-size:18px;}
.font20 {font-size:20px;}
.font24 {font-size:24px;}
.font30 {font-size:30px;}
.font40 {font-size:40px;}
.font50 {font-size:50px;}
.font60 {font-size:60px;}
.font70 {font-size:70px;}

.fontWeightLight {font-weight:300;}
.fontWeightRegular {font-weight:400;}
.fontWeightSemiBold {font-weight:600;}
.fontWeightBold {font-weight:700;}

.wordBreak {word-break:break-word; overflow-wrap:break-word;}

.fontBlue {color:#1E3F42;}
.fontLightGrey {color:#777;}

/*---------------------------------------------HOME PAGE----*/
/*.homeSection {min-height:100vh;}*/

/*---------------------------------------------HEADER----*/
header {padding-top:10px;}
#headerLogo {width:95%; max-width:160px; margin:0 auto; display:block;}

#notificationBar {background:#222; padding:15px 5px; color:#fff; margin-bottom:20px;}

/*---------------------------------------------NAVIGATION----*/
.headerNavigation {text-align:right;}
#navBar {background:#fff; position:fixed; top:0; right:-100%; height:100vh; z-index:50; width:95%; max-width:200px; box-shadow:0 0 5px rgba(0,0,0,0.25); transition:right 0.4s; font-size:24px;}
#navBar.open {right:0;}

#navBar ul {padding-right:10px; color:#777; font-weight:300;}
#navBar a {display:block; padding:2px 10px; transition:color 0.4s padding 0.4s;}
#navBar a.active, #navBar a:hover {color:#1E3F42; padding-right:15px;}

#navbarTrigger {font-size:20px; position:absolute; top:0; right:0; padding:10px; cursor:pointer; line-height:0; z-index:40;}

#navbarClose {font-size:20px; padding:10px; cursor:pointer; line-height:0;}

@media (min-width:992px) {

    body {padding-top:30px;}

    #navBar {max-width:unset; box-shadow:none; width:100%; font-size:16px; position:fixed; top:0; right:0; height:30px;}
    #navBar li {display:inline-block;}
    #navBar a.active, #navBar a:hover {padding-right:10px;}
    #navbarTrigger, #navbarClose {display:none;}
}

/*---------------------------------------------HOME PAGE----*/
#skillset .iconset li {background:#aaa; border-radius:2px; display:inline-block; width:50px; height:50px; line-height:47px; text-align:center; transition:background 0.4s; cursor:pointer;}
#skillset .iconset li.active, #skillset .iconset li:hover {background:#333;}
#skillset .iconset li img {width:40px; pointer-events:none;}
#skillset .iconset li.smaller img {width:30px;}

#skillset .skillset_description {position:relative; transition:height 0.4s;}

#skillset .skillset_description li {font-size:11px; opacity:0; position:relative; left:10px; transition:left 0.4s, opacity 0.4s; width:100%; display:none;}
#skillset .skillset_description li.active {opacity:1; left:0;}
#skillset .skillset_description li.show {display:block;}

#portfolio_filters {font-size:0;}
#portfolio_filters li {font-size:9px; margin:0 2px;}

#portfolio_container {list-style:none; padding:0; margin:0; text-align:center; font-size:0;}
#portfolio_container li {width:150px; height:150px; background:#333; border-radius:2px; overflow:hidden; display:inline-block; font-size:1rem; margin:3px;}
#portfolio_container li a {display:block; height:100%;}
#portfolio_container li img {width:100%;}

.portfolio_selector {list-style:none; padding:0; margin:0; text-align:center; font-size:0;}
.portfolio_selector li {width:80px; height:80px; background:#333; border-radius:2px; overflow:hidden; display:inline-block; font-size:1rem; margin:3px;}
.portfolio_selector li a {display:block; height:100%;}
.portfolio_selector li img {width:100%;}
.portfolio_selector li.current {opacity:0.5;}

.snippet_selector {list-style:none; padding:0; margin:0; text-align:center; font-size:0;}
.snippet_selector li {width:60px; height:60px; background:#333; border-radius:2px; overflow:hidden; display:inline-block; font-size:1rem; margin:3px;}
.snippet_selector li a {display:block; height:100%;}
.snippet_selector li img {width:100%;}
.snippet_selector li.current {opacity:0.5;}

#snippets_container {font-size:0; list-style:none; margin:0; padding:0;}
#snippets_container li {font-size:1rem; display:inline-block; width:100%; padding:5px; margin-bottom:20px;}
#snippets_container .snippetItem {display:flex;}
#snippets_container .snippetThumbnail {display:block; height:80px; width:80px; background-color:#333; border-radius:2px; overflow:hidden; margin-right:8px; flex-shrink:0; background-size:contain;}
#snippets_container .snippetLabel {margin-top:-5px; padding-right:5px;}

@media (min-width:576px) {
    #snippets_container li {width:50%;}
}

@media (min-width:992px) {
    #snippets_container li {width:calc(100% / 3);}
}

@media (min-width:1200px) {
    #snippets_container li {width:25%;}
}

/*---------------------------------------------FORMS----*/
input, textarea {border:1px solid #aaa; padding:8px 12px; border-radius:2px;}
input.error, textarea.error {border-color:#1E3F42;}

label.error {background:#1E3F42; color:#fff; font-weight:600; font-size:9px; font-style:italic; position:absolute; bottom:-5px; right:0; padding:3px 15px; border-radius:2px 0 2px 0;}

.formGroup {position:relative;}

/*---------------------------------------------BUTTONS----*/
.iconBtn {display:inline-block; cursor:pointer;}
.iconBtn > div {display:flex; align-items:stretch;}
.iconBtn .icon, .iconBtn .label {display:inline-block; transition:background 0.4s;}
.iconBtn .icon {background:#555; color:#fff; padding:6px 7px; border-radius:2px 0 0 2px; font-size:1.4em; display:flex; align-items:center;}
.iconBtn .label {margin-left:1px; background:#888; padding:6px 16px; border-radius:0 2px 2px 0; color:#fff; display:flex; align-items:center;}

.iconBtn.slimBtn .icon {padding:4px 7px;}
.iconBtn.slimBtn .label {padding:3px 10px 5px;}

.iconBtn.activeBtn .icon {background:#1E3F42;}
.iconBtn.activeBtn .label {background:#333;}

/*---------------------------------------------CONTACT FORM----*/
#contact_feedback {padding:10px 20px;text-align:center; font-style:italic; font-size:12px; opacity:0; max-height:0; transition:all 0.5s;}
#contact_feedback.success, #contact_feedback.error {opacity:1; max-height:500px;}
#contact_feedback i.fas {min-height:30px;}

#contact_feedback.success i.fas {color:#1E3F42;}
#contact_feedback.success i.fas::before {content:'\f658';}
#contact_feedback.error i.fas {color:#CC1414;}
#contact_feedback.error i.fas::before {content:'\f071';}

/*--------------------------------------------- ----*/