/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Variables
# Normalize
# CSS Reset
# Print Styles
# Animate.css
# Browser Selection
# Outline styles on focus
# iPhone phone number bug fix
# Basics & General
# Typography
# Youtube style progress bar
# Main header & navbar styles
# Banner section styles
# About Me section styles
# My works section styles
# Get In Touch section styles
# Copyrights sec
# Scroll to top anchor

--------------------------------------------------------------*/
/*------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root { --brselection: #3367d1; --anchor: #9aae59; --thmgreen: #9aae59; --lightblue: #f7fbfe; --fnt: "Raleway", sans-serif; }
/*--------------------------------------------------------------
# Mixins
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
main { display: block; }
h1 { font-size: 2em; margin: .67em 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; }
button::-moz-focus-inner, [type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring,
[type=submit]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: .35em .75em .625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; }
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button { height: auto; }
[type=search] { -webkit-appearance: textfield; outline-offset: -2px; }
[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }
/*--------------------------------------------------------------
# CSS Reset
--------------------------------------------------------------*/
*, *::before, *::after { box-sizing: inherit; }
html { box-sizing: border-box; }
::-moz-selection { text-shadow: none; }
::selection { text-shadow: none; }
a { text-decoration: none; color: inherit; cursor: pointer; }
button { background-color: transparent; color: inherit; border-width: 0; padding: 0; cursor: pointer; }
figure { display: block; margin: 0; line-height: 0; }
input::-moz-focus-inner { border: 0; padding: 0; margin: 0; }
ul, ol, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }
p, blockquote, address { margin: 0; padding: 0; }
dfn, cite, em, i { font-style: italic; }
fieldset { border-width: 0; padding: 0; margin: 0; }
pre { background: #eee; font-family: "Courier 10 Pitch", courier, monospace; margin-bottom: 20px; max-width: 100%; overflow: auto; padding: 20px; }
code, kbd, tt, var { font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace; }
abbr, acronym { cursor: help; }
mark, ins { text-decoration: none; }
big { font-size: 125%; }
table { max-width: 100%; }
hr, blockquote { display: block; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
button > * { pointer-events: none; }
/*--------------------------------------------------------------
# Print Styles
--------------------------------------------------------------*/
@media print {
 *, *::before, *::after { background: #fff !important; color: #000 !important; /* Black prints faster */ box-shadow: none !important; text-shadow: none !important; }
 a, a:visited { text-decoration: underline; }
 a[href]::after { content: " (" attr( href ) ")"; }
 abbr[title]::after { content: " (" attr( title ) ")"; }
 a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; }
 pre { white-space: pre-wrap !important; }
 pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
 thead { display: table-header-group; }
 tr, img { page-break-inside: avoid; }
 p, h2, h3 { orphans: 3; widows: 3; }
 h2, h3 { page-break-after: avoid; }
}
/*--------------------------------------------------------------
# Animate.css
--------------------------------------------------------------*/
.animated { animation-duration: 1s; animation-fill-mode: both; }
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}
.fadeIn { animation-name: fadeIn; }
@keyframes fadeInRight {
 from { opacity: 0; transform: translate3d( 100%, 0, 0 ); }
 to { opacity: 1; transform: none; }
}
.fadeInRight { animation-name: fadeInRight; }
/*-------------------------------------------------------------
# Browser Selection
--------------------------------------------------------------*/
::-moz-selection { background: var( --brselection ); color: white; }
::selection { background: var( --brselection ); color: white; }
/*--------------------------------------------------------------
# Outline styles on focus
--------------------------------------------------------------*/
a:focus, a:active, button:focus, .btn:focus, .btn:active:focus,
.btn.active:focus, input[type=submit]:focus, input[type=button]:focus,
input[type=reset]:focus { outline: 2px dashed var( --brselection ); }
/*--------------------------------------------------------------
# iPhone phone number bug fix
--------------------------------------------------------------*/
a[href^=tel] { color: inherit; text-decoration: none; }
/*--------------------------------------------------------------
# Basics and General
--------------------------------------------------------------*/
html { font-size: 16px; width: 100%; height: 100%; }
body { margin: 0; padding: 0; position: relative; font-size: 1rem; font-style: normal; font-weight: 400; font-family: var( --fnt ); line-height: 1.7; color: #545353; background-color: white; word-wrap: break-word; overflow-x: hidden; width: 100%; min-width: 17.5rem; min-height: 100%; display: flex; flex-direction: column; }
@media screen and (min-width: 2000px) {
 #bdywrp { max-width: 2000px; margin: 0 auto; border-left: 1px solid rgba( 0, 0, 0, .1 ); border-right: 1px solid rgba( 0, 0, 0, .1 ); }
}
figcaption { line-height: 1.7; }
img { max-width: 100%; height: auto; }
noscript { color: white; font-weight: 400; text-align: center; padding: .9375rem; display: block; width: 100%; background-color: red; font-size: 1rem; position: fixed; z-index: 999999; }
a { transition: all 100ms linear 0s; color: var( --anchor ); cursor: pointer; text-decoration: none; }
a:link { color: var( --anchor ); text-decoration: none; }
a:visited { color: black; text-decoration: none; }
a:hover, a:focus { color: black; text-decoration: none; }
a:active { color: var( --anchor ); text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect( 0, 0, 0, 0 ); white-space: nowrap; border: 0; }
.sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.skclnk { position: absolute !important; z-index: 99999; top: 0; left: 0; padding: 15px; background-color: black; color: white !important; text-decoration: none !important; display: inline-block; }
.skclnk:hover { background-color: rgba( 0, 0, 0, .8 ); }
.container { width: 100%; margin: 0 auto; padding: 0 .9375rem; }
@media screen and (min-width: 576px) {
 .container { max-width: 540px; }
}
@media screen and (min-width: 768px) {
 .container { max-width: 720px; }
}
@media screen and (min-width: 992px) {
 .container { max-width: 960px; }
}
@media screen and (min-width: 1200px) {
 .container { max-width: 1140px; }
}
@media screen and (min-width: 1400px) {
 .container { max-width: 1320px; }
}
.cont-narrow { width: 100%; max-width: 54.687rem; margin: 0 auto; padding: 0 .9375rem; }
.hide { visibility: hidden !important; display: none !important; }
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
p { font-size: 1.125rem; margin: 0 0 1.125rem 0; }
h1, .h1 { font-size: 2.875rem; }
h2, .h2 { font-size: 2.625rem; }
h3, .h3 { font-size: 2.375rem; }
h4, .h4 { font-size: 2.125rem; }
h5, .h5 { font-size: 1.875rem; }
h6, .h6 { font-size: 1.625rem; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var( --fnt ); color: black; font-weight: 700; margin: 0 0 1.8rem 0; line-height: 1.2; }
/*------------------------------------------------------------
# Youtube style progress bar
--------------------------------------------------------------*/
.prContainer { left: 0; width: 100%; height: 3px; margin-top: 0; z-index: 10; position: fixed; top: 0; overflow: hidden; background-color: transparent; }
@media screen and (min-width: 992px) {
 .prContainer { top: 65px; }
}
@media screen and (min-width: 2000px) {
 .prContainer { max-width: 2000px; left: 50%; transform: translateX( -50% ); }
}
.prBar { width: 0%; float: left; height: 100%; z-index: 99; max-width: 100%; background-color: #b0d4fb; transition: width .6s ease; }
/*----------------------------------------------------------
# Main header & navbar styles
--------------------------------------------------------------*/
#mainhead { background-color: var( --thmgreen ); display: flex; align-items: center; flex-wrap: wrap; position: static; transition: all 100ms linear 0s; }
@media screen and (min-width: 992px) {
 #mainhead { position: fixed; top: 0; right: 0; left: 0; z-index: 9; }
}
@media screen and (min-width: 1920px) {
 #mainhead { max-width: 2000px; margin: 0 auto; }
}
#logowrp { text-transform: uppercase; font-size: 1.6rem; font-weight: 700; padding: 1.2rem 3.2%; margin: 0 1rem 0 0; border-right: 1px solid rgba( 255, 255, 255, .2 ); flex-grow: 1; display: inline-block; line-height: 1; }
#logowrp span:nth-of-type(1) { color: black; }
#logowrp span:nth-of-type(2) { color: white; }
@media screen and (min-width: 992px) {
 #logowrp { padding: 1.2rem 2rem; flex-grow: 0; margin: 0; }
}
#mainav { margin: 0; padding: 0; display: none; order: 2; flex-basis: 100%; flex-grow: 1; }
@media screen and (min-width: 992px) {
 #mainav { display: inline-block !important; order: 0; flex-basis: auto; flex-grow: 0; }
}
#mainav ul { margin: 0; padding: 0; list-style-type: none; border-top: 1px solid rgba( 255, 255, 255, .2 ); }
@media screen and (min-width: 992px) {
 #mainav ul { border-top: 0; display: flex; align-items: center; }
}
#mainav li { border-bottom: 1px solid rgba( 255, 255, 255, .2 ); background-color: rgba( 0, 0, 0, .1 ); }
@media screen and (min-width: 992px) {
 #mainav li { border-bottom: 0; border-right: 1px solid rgba( 255, 255, 255, .2 ); }
}
#mainav a { display: inline-block; width: 100%; color: white; cursor: pointer; text-decoration: none; text-align: center; padding: 1.2rem 2rem; }
#mainav a.active { color: white; background-color: rgba( 0, 0, 0, .4 ); }
#mainav a:link { color: white; }
#mainav a:visited { color: white; }
#mainav a:hover, #mainav a:focus { color: white; background-color: rgba( 0, 0, 0, .1 ); }
#mainav a:active { color: white; }
#mob-menu { width: 2.5rem; height: 1.875rem; position: relative; margin: 0 1rem 0 0; transform: rotate( 0deg ); transition: .5s ease-in-out; cursor: pointer; }
#mob-menu:focus { outline: 0; }
@media screen and (min-width: 992px) {
 #mob-menu { display: none; }
}
#mob-menu span { display: block; position: absolute; height: 3px; width: 100%; background: white; border-radius: 6px; opacity: 1; left: 0; transform: rotate( 0deg ); transition: .25s ease-in-out; }
#mob-menu span:nth-child(1) { top: 0; }
#mob-menu span:nth-child(2) { top: .8125rem; left: 1.0625rem; width: 1.375rem; }
#mob-menu span:nth-child(3) { top: 1.625rem; }
#mob-menu.open span:nth-child(1) { top: .75rem; transform: rotate( 135deg ); }
#mob-menu.open span:nth-child(2) { opacity: 0; left: -3.75rem; }
#mob-menu.open span:nth-child(3) { top: .75rem; transform: rotate( -135deg ); }
/*----------------------------------------------------------
# Banner section styles
--------------------------------------------------------------*/
@media screen and (min-width: 992px) {
 main { padding-top: 4.15rem; }
}
.baner { background: #fff url( "images/banner-bg.png" ) no-repeat center; background-size: cover; text-align: center; display: flex; flex-direction: column; justify-content: space-around; padding: 3rem 0; border-bottom: 1px solid rgba( 0, 0, 0, .1 ); }
.baner h1 { font-size: clamp( 2.5rem, .047rem + 11.628vw, 10rem ); line-height: 1; font-weight: 900; text-transform: uppercase; padding: 0 1.25rem; margin: 3.75rem 0; color: #9aad59; }
.baner p, .baner h2 { line-height: 1.4; font-size: clamp( 1rem, .893rem + .857vw, 1.6rem ); font-weight: 400; margin: 0; }
.baner .name { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; }
.baner .name span { opacity: 0; }
/*----------------------------------------------------------
# About Me section styles
--------------------------------------------------------------*/
#aboutme { opacity: 0; background-color: var( --lightblue ); border-bottom: 1px solid rgba( 0, 0, 0, .1 ); }
#aboutme .cont-narrow { padding: 5rem .9375rem; }
#aboutme h2 { text-align: center; }
.ultp1 { margin: 1.875rem 1.875rem 1.875rem 0; }
.ultp1 li { position: relative; min-height: 1.5rem; padding: 0 0 0 2.625rem; margin-bottom: 1.25rem; }
.ultp1 li::before { content: ""; width: 1.8125rem; height: 1.375rem; display: inline-block; position: absolute; top: 0; left: 0; background-image: url( "images/bullet1.png" ); }
/*----------------------------------------------------------
# My works section styles
--------------------------------------------------------------*/
#worksec { opacity: 0; text-align: center; }
#worksec .cont-narrow { padding: 5rem .9375rem 3rem; }
#worksec h2 { margin-bottom: 4rem; }
.tabs-wrap .tabtn { display: block; margin: 0 auto 1.25rem; border-radius: 2.5rem; padding: .9375rem 1.25rem; color: black; background-color: rgb( 234.65, 234.65, 234.65 ); }
.tabs-wrap .tabtn:hover, .tabs-wrap .tabtn:focus { background-color: rgb( 197.6, 200.8, 203.2 ); }
@media screen and (min-width: 768px) {
 .tabs-wrap .tabtn { display: inline-block; margin: 0 .625rem 1.25rem; }
}
.tabs-wrap .tabtn[aria-selected=true] { color: white; background-color: rgb( 123.2, 139.2, 71.2 ); border-radius: 2.5rem; }
.flexitms { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding-bottom: 3rem; border-bottom: 1px solid rgba( 0, 0, 0, .1 ); }
@media screen and (min-width: 992px) {
 .flexitms { padding-bottom: 5rem; }
}
.folio-item { position: relative; max-width: 80%; margin: 0 auto 3.125rem; border-radius: .75rem; padding: 1.5625rem; background-color: rgba( 0, 0, 0, .035 ); }
@media screen and (min-width: 992px) {
 .folio-item { max-width: 25%; padding: .9375rem; margin: .9375rem; }
}
@media screen and (min-width: 1200px) {
 .folio-item { padding: 1.5625rem; margin: 1.25rem; }
}
.folio-item::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; border-radius: .75rem; background-color: rgba( 0, 0, 0, .3 ); transition: all .2s ease-out 0s; }
.folio-item:hover::before, .folio-item:focus::before { opacity: 1; }
.folio-item:hover .wrksamp, .folio-item:focus .wrksamp { opacity: 1; }
.folio-item:hover .lvst-btn, .folio-item:focus .lvst-btn { bottom: 20%; opacity: 1; }
.img-responsive { width: 100%; height: auto; }
.wrksamp { transition: all .2s ease-out 0s; width: 2.5rem; height: 2.5rem; position: absolute; bottom: 49%; left: 50%; margin: -1.25rem 0 0 -1.25rem; opacity: 0; border-radius: 50%; font-size: 3.75rem; font-weight: 100; line-height: 2.5rem; color: var( --thmgreen ); background-color: #fff; text-align: center; }
.lvst-btn { transition: all .4s ease-out 0s; width: 100%; max-width: 10.625rem; text-align: center; color: #fff !important; font-weight: 500; font-size: .875em; opacity: 0; text-transform: uppercase; background-color: var( --thmgreen ); padding: .9375rem 1.875rem; border-radius: 2.1875rem; border: 2px solid rgba( 255, 255, 255, .5 ); display: inline-block; position: absolute; bottom: 22%; left: 50%; transform: translateX( -50% ); }
.lvst-btn:hover, .lvst-btn:focus { background-color: rgb( 123.2, 139.2, 71.2 ); }
.lvst-btn svg { position: relative; top: -2px; }
/*----------------------------------------------------------
# Get In Touch section styles
--------------------------------------------------------------*/
#formsec { opacity: 0; background-color: var( --lightblue ); }
#formsec .cont-narrow { padding: 5rem .9375rem 3rem; max-width: 43.75rem; }
#formsec h2 { text-align: center; margin-bottom: 4rem; }
#contfrm { position: relative; display: block; max-width: 43.75rem; margin: 1.875rem auto; text-align: center; }
.hpwrp { margin: 0; padding: 0; position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; z-index: -1; }
@media screen and (min-width: 576px) {
 .row1 { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin: .9375rem 0 0; }
 .row1 .col1 { flex-grow: 1; margin: 0 2.1875rem 0 0; }
 .row1 .col1:last-of-type { margin: 0; }
}
.row1 label, .row2 label { font-weight: 600; text-align: left; display: block; font-size: 1.2rem; }
.row1 label.error, .row2 label.error { font-size: .9rem; font-weight: 500; color: red; font-style: italic; }
@media screen and (min-width: 576px) {
 .col1 { max-width: 20.8125rem; }
}
.col1, .col2 { margin: .9375rem 0 0; }
.col1 input, .col2 input { display: block; width: 100%; border: 1px solid #d7d7d7; font-size: 1rem; line-height: 1.2rem; padding: .3125rem .625rem; }
.col1 textarea, .col2 textarea { display: block; width: 100%; border: 1px solid #d7d7d7; font-size: 1rem; line-height: 1.5rem; padding: .3125rem .625rem; }
button[type=submit] { text-transform: uppercase; color: white; background-color: rgb( 123.2, 139.2, 71.2 ); border-radius: .75rem; padding: .9375rem 1.875rem; font-size: 1.2rem; font-weight: 600; display: inline-block; margin-top: 1.875rem; }
button[type=submit]:hover, button[type=submit]:focus { background-color: rgb( 107.8, 121.8, 62.3 ); }
button[type=submit] svg { position: relative; top: -2px; }
#form-result { margin: 2rem auto; max-width: 43.75rem; }
.sent-success { background-color: rgb( 234.65, 238.45, 241.3 ); border-radius: 1.875rem; padding: 1.875rem 3.125rem; }
.sent-success h3 { color: rgb( 138.6, 156.6, 80.1 ); margin-bottom: .9375rem; }
.sent-success p { margin: 0; font-style: italic; }
.sent-error { background-color: rgb( 234.65, 238.45, 241.3 ); border-radius: 1.875rem; padding: 1.875rem 3.125rem; }
.sent-error h3 { color: red; margin-bottom: .9375rem; }
.sent-error h3 svg { position: relative; top: -2px; }
.sent-error p { margin: 0; font-style: italic; }
/*----------------------------------------------------------
# Copyrights sec
--------------------------------------------------------------*/
.copy { background-color: var( --lightblue ); text-align: center; padding: 1.3rem 2rem 1rem; border-top: 1px solid rgb( 222.3, 225.9, 228.6 ); }
.copy p { max-width: 43.75rem; font-size: 1rem; margin: 0 auto; }
/*----------------------------------------------------------
# Scroll to top anchor
--------------------------------------------------------------*/
#top { width: 2.1875rem; height: 2.1875rem; display: flex; border-radius: 50%; background-color: rgba( 0, 0, 0, .4 ); position: fixed; right: 5px; transition: all 200ms ease-in 0s; z-index: 999991 !important; opacity: 0; }
@media screen and (min-width: 992px) {
 #top { width: 2.8125rem; height: 2.8125rem; right: 1.25rem; }
}
#top svg { margin: auto; color: #fff; font-size: 1rem; }
#top.sttcomein { opacity: 1; }