:root {
--black: black;
--default: #dc5f00;
--transparent: #fff0;
--white: white;
--border-color: #292929;
--grey: #1e1e1e;
}
.w-layout-blockcontainer {
max-width: 940px;
margin-left: auto;
margin-right: auto;
display: block;
}
.w-commerce-commercecartwrapper {
display: inline-block;
position: relative;
}
.w-commerce-commercecartopenlink {
color: #fff;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background-color: #3898ec;
border-width: 0;
border-radius: 0;
align-items: center;
padding: 9px 15px;
text-decoration: none;
display: flex;
}
.w-commerce-commercecartopenlinkcount {
color: #3898ec;
text-align: center;
background-color: #fff;
border-radius: 9px;
min-width: 18px;
height: 18px;
margin-left: 8px;
padding-left: 6px;
padding-right: 6px;
font-size: 11px;
font-weight: 700;
line-height: 18px;
display: inline-block;
}
.w-commerce-commercecartcontainerwrapper {
z-index: 1001;
background-color: #000c;
position: fixed;
inset: 0;
}
.w-commerce-commercecartcontainerwrapper--cartType-modal {
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
.w-commerce-commercecartcontainerwrapper--cartType-leftSidebar {
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
display: flex;
}
.w-commerce-commercecartcontainerwrapper--cartType-rightSidebar {
flex-direction: row;
justify-content: flex-end;
align-items: stretch;
display: flex;
}
.w-commerce-commercecartcontainerwrapper--cartType-leftDropdown {
background-color: #0000;
position: absolute;
inset: 100% auto auto 0;
}
.w-commerce-commercecartcontainerwrapper--cartType-rightDropdown {
background-color: #0000;
position: absolute;
inset: 100% 0 auto auto;
}
.w-commerce-commercecartcontainer {
background-color: #fff;
flex-direction: column;
width: 100%;
min-width: 320px;
max-width: 480px;
display: flex;
overflow: auto;
box-shadow: 0 5px 25px #00000040;
}
.w-commerce-commercecartheader {
border-bottom: 1px solid #e6e6e6;
flex: none;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
display: flex;
position: relative;
}
.w-commerce-commercecartheading {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
padding-right: 0;
}
.w-commerce-commercecartcloselink {
width: 16px;
height: 16px;
}
.w-commerce-commercecartformwrapper {
flex-direction: column;
flex: 1;
display: flex;
}
.w-commerce-commercecartform {
flex-direction: column;
flex: 1;
justify-content: flex-start;
display: flex;
}
.w-commerce-commercecartlist {
-webkit-overflow-scrolling: touch;
flex: 1;
padding: 12px 24px;
overflow: auto;
}
.w-commerce-commercecartitem {
align-items: flex-start;
padding-top: 12px;
padding-bottom: 12px;
display: flex;
}
.w-commerce-commercecartitemimage {
width: 60px;
height: 0%;
}
.w-commerce-commercecartiteminfo {
flex-direction: column;
flex: 1;
margin-left: 16px;
margin-right: 16px;
display: flex;
}
.w-commerce-commercecartproductname {
font-weight: 700;
}
.w-commerce-commercecartoptionlist {
margin-bottom: 0;
padding-left: 0;
text-decoration: none;
list-style-type: none;
}
.w-commerce-commercecartquantity {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 60px;
height: 38px;
margin-bottom: 10px;
padding: 8px 6px 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecartquantity::placeholder {
color: #999;
}
.w-commerce-commercecartquantity:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecartfooter {
border-top: 1px solid #e6e6e6;
flex-direction: column;
flex: none;
padding: 16px 24px 24px;
display: flex;
}
.w-commerce-commercecartlineitem {
flex: none;
justify-content: space-between;
align-items: baseline;
margin-bottom: 16px;
display: flex;
}
.w-commerce-commercecartordervalue {
font-weight: 700;
}
.w-commerce-commercecartapplepaybutton {
color: #fff;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background-color: #000;
border-width: 0;
border-radius: 2px;
align-items: center;
height: 38px;
min-height: 30px;
margin-bottom: 8px;
padding: 0;
text-decoration: none;
display: flex;
}
.w-commerce-commercecartapplepayicon {
width: 100%;
height: 50%;
min-height: 20px;
}
.w-commerce-commercecartquickcheckoutbutton {
color: #fff;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background-color: #000;
border-width: 0;
border-radius: 2px;
justify-content: center;
align-items: center;
height: 38px;
margin-bottom: 8px;
padding: 0 15px;
text-decoration: none;
display: flex;
}
.w-commerce-commercequickcheckoutgoogleicon, .w-commerce-commercequickcheckoutmicrosofticon {
margin-right: 8px;
display: block;
}
.w-commerce-commercecartcheckoutbutton {
color: #fff;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
text-align: center;
background-color: #3898ec;
border-width: 0;
border-radius: 2px;
align-items: center;
padding: 9px 15px;
text-decoration: none;
display: block;
}
.w-commerce-commercecartemptystate {
flex: 1;
justify-content: center;
align-items: center;
padding-top: 100px;
padding-bottom: 100px;
display: flex;
}
.w-commerce-commercecarterrorstate {
background-color: #ffdede;
flex: none;
margin: 0 24px 24px;
padding: 10px;
}
.w-commerce-commerceaddtocartform {
margin: 0 0 15px;
}
.w-commerce-commerceaddtocartoptionpillgroup {
margin-bottom: 10px;
display: flex;
}
.w-commerce-commerceaddtocartoptionpill {
color: #000;
cursor: pointer;
background-color: #fff;
border: 1px solid #000;
margin-right: 10px;
padding: 8px 15px;
}
.w-commerce-commerceaddtocartoptionpill.w--ecommerce-pill-selected {
color: #fff;
background-color: #000;
}
.w-commerce-commerceaddtocartoptionpill.w--ecommerce-pill-disabled {
color: #666;
cursor: not-allowed;
background-color: #e6e6e6;
border-color: #e6e6e6;
outline-style: none;
}
.w-commerce-commerceaddtocartquantityinput {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 60px;
height: 38px;
margin-bottom: 10px;
padding: 8px 6px 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commerceaddtocartquantityinput::placeholder {
color: #999;
}
.w-commerce-commerceaddtocartquantityinput:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commerceaddtocartbutton {
color: #fff;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background-color: #3898ec;
border-width: 0;
border-radius: 0;
align-items: center;
padding: 9px 15px;
text-decoration: none;
display: flex;
}
.w-commerce-commerceaddtocartbutton.w--ecommerce-add-to-cart-disabled {
color: #666;
cursor: not-allowed;
background-color: #e6e6e6;
border-color: #e6e6e6;
outline-style: none;
}
.w-commerce-commercebuynowbutton {
color: #fff;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background-color: #3898ec;
border-width: 0;
border-radius: 0;
align-items: center;
margin-top: 10px;
padding: 9px 15px;
text-decoration: none;
display: inline-block;
}
.w-commerce-commercebuynowbutton.w--ecommerce-buy-now-disabled {
color: #666;
cursor: not-allowed;
background-color: #e6e6e6;
border-color: #e6e6e6;
outline-style: none;
}
.w-commerce-commerceaddtocartoutofstock {
background-color: #ddd;
margin-top: 10px;
padding: 10px;
}
.w-commerce-commerceaddtocarterror {
background-color: #ffdede;
margin-top: 10px;
padding: 10px;
}
.w-commerce-commercecheckoutformcontainer {
background-color: #f5f5f5;
width: 100%;
min-height: 100vh;
padding: 20px;
}
.w-commerce-commercelayoutcontainer {
justify-content: center;
align-items: flex-start;
display: flex;
}
.w-commerce-commercelayoutmain {
flex: 0 800px;
margin-right: 20px;
}
.w-commerce-commercecheckoutcustomerinfowrapper {
margin-bottom: 20px;
}
.w-commerce-commercecheckoutblockheader {
background-color: #fff;
border: 1px solid #e6e6e6;
justify-content: space-between;
align-items: baseline;
padding: 4px 20px;
display: flex;
}
.w-commerce-commercecheckoutblockcontent {
background-color: #fff;
border-bottom: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
padding: 20px;
}
.w-commerce-commercecheckoutlabel {
margin-bottom: 8px;
}
.w-commerce-commercecheckoutemailinput {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 0;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutemailinput::placeholder {
color: #999;
}
.w-commerce-commercecheckoutemailinput:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutshippingaddresswrapper {
margin-bottom: 20px;
}
.w-commerce-commercecheckoutshippingfullname {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 16px;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutshippingfullname::placeholder {
color: #999;
}
.w-commerce-commercecheckoutshippingfullname:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutshippingstreetaddress {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 16px;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutshippingstreetaddress::placeholder {
color: #999;
}
.w-commerce-commercecheckoutshippingstreetaddress:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutshippingstreetaddressoptional {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 16px;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutshippingstreetaddressoptional::placeholder {
color: #999;
}
.w-commerce-commercecheckoutshippingstreetaddressoptional:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutrow {
margin-left: -8px;
margin-right: -8px;
display: flex;
}
.w-commerce-commercecheckoutcolumn {
flex: 1;
padding-left: 8px;
padding-right: 8px;
}
.w-commerce-commercecheckoutshippingcity {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 16px;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutshippingcity::placeholder {
color: #999;
}
.w-commerce-commercecheckoutshippingcity:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutshippingstateprovince {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 16px;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutshippingstateprovince::placeholder {
color: #999;
}
.w-commerce-commercecheckoutshippingstateprovince:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutshippingzippostalcode {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 16px;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutshippingzippostalcode::placeholder {
color: #999;
}
.w-commerce-commercecheckoutshippingzippostalcode:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutshippingcountryselector {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 0;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutshippingcountryselector::placeholder {
color: #999;
}
.w-commerce-commercecheckoutshippingcountryselector:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutshippingmethodswrapper {
margin-bottom: 20px;
}
.w-commerce-commercecheckoutshippingmethodslist {
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
}
.w-commerce-commercecheckoutshippingmethoditem {
background-color: #fff;
border-bottom: 1px solid #e6e6e6;
flex-direction: row;
align-items: baseline;
margin-bottom: 0;
padding: 16px;
font-weight: 400;
display: flex;
}
.w-commerce-commercecheckoutshippingmethoddescriptionblock {
flex-direction: column;
flex-grow: 1;
margin-left: 12px;
margin-right: 12px;
display: flex;
}
.w-commerce-commerceboldtextblock {
font-weight: 700;
}
.w-commerce-commercecheckoutshippingmethodsemptystate {
text-align: center;
background-color: #fff;
border-bottom: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
padding: 64px 16px;
}
.w-commerce-commercecheckoutpaymentinfowrapper {
margin-bottom: 20px;
}
.w-commerce-commercecheckoutcardnumber {
-webkit-appearance: none;
appearance: none;
cursor: text;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 16px;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutcardnumber::placeholder {
color: #999;
}
.w-commerce-commercecheckoutcardnumber:focus, .w-commerce-commercecheckoutcardnumber.-wfp-focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutcardexpirationdate {
-webkit-appearance: none;
appearance: none;
cursor: text;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 16px;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutcardexpirationdate::placeholder {
color: #999;
}
.w-commerce-commercecheckoutcardexpirationdate:focus, .w-commerce-commercecheckoutcardexpirationdate.-wfp-focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutcardsecuritycode {
-webkit-appearance: none;
appearance: none;
cursor: text;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 16px;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutcardsecuritycode::placeholder {
color: #999;
}
.w-commerce-commercecheckoutcardsecuritycode:focus, .w-commerce-commercecheckoutcardsecuritycode.-wfp-focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutbillingaddresstogglewrapper {
flex-direction: row;
display: flex;
}
.w-commerce-commercecheckoutbillingaddresstogglecheckbox {
margin-top: 4px;
}
.w-commerce-commercecheckoutbillingaddresstogglelabel {
margin-left: 8px;
font-weight: 400;
}
.w-commerce-commercecheckoutbillingaddresswrapper {
margin-top: 16px;
margin-bottom: 20px;
}
.w-commerce-commercecheckoutbillingfullname {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 16px;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutbillingfullname::placeholder {
color: #999;
}
.w-commerce-commercecheckoutbillingfullname:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutbillingstreetaddress {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 16px;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutbillingstreetaddress::placeholder {
color: #999;
}
.w-commerce-commercecheckoutbillingstreetaddress:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutbillingstreetaddressoptional {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 16px;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutbillingstreetaddressoptional::placeholder {
color: #999;
}
.w-commerce-commercecheckoutbillingstreetaddressoptional:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutbillingcity {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 16px;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutbillingcity::placeholder {
color: #999;
}
.w-commerce-commercecheckoutbillingcity:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutbillingstateprovince {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 16px;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutbillingstateprovince::placeholder {
color: #999;
}
.w-commerce-commercecheckoutbillingstateprovince:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutbillingzippostalcode {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 16px;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutbillingzippostalcode::placeholder {
color: #999;
}
.w-commerce-commercecheckoutbillingzippostalcode:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutbillingcountryselector {
-webkit-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
height: 38px;
margin-bottom: 0;
padding: 8px 12px;
line-height: 20px;
display: block;
}
.w-commerce-commercecheckoutbillingcountryselector::placeholder {
color: #999;
}
.w-commerce-commercecheckoutbillingcountryselector:focus {
border-color: #3898ec;
outline-style: none;
}
.w-commerce-commercecheckoutorderitemswrapper {
margin-bottom: 20px;
}
.w-commerce-commercecheckoutsummaryblockheader {
background-color: #fff;
border: 1px solid #e6e6e6;
justify-content: space-between;
align-items: baseline;
padding: 4px 20px;
display: flex;
}
.w-commerce-commercecheckoutorderitemslist {
margin-bottom: -20px;
}
.w-commerce-commercecheckoutorderitem {
margin-bottom: 20px;
display: flex;
}
.w-commerce-commercecheckoutorderitemdescriptionwrapper {
flex-grow: 1;
margin-left: 16px;
margin-right: 16px;
}
.w-commerce-commercecheckoutorderitemquantitywrapper {
white-space: pre-wrap;
display: flex;
}
.w-commerce-commercecheckoutorderitemoptionlist {
margin-bottom: 0;
padding-left: 0;
text-decoration: none;
list-style-type: none;
}
.w-commerce-commercelayoutsidebar {
flex: 0 0 320px;
position: sticky;
top: 20px;
}
.w-commerce-commercecheckoutordersummarywrapper {
margin-bottom: 20px;
}
.w-commerce-commercecheckoutsummarylineitem, .w-commerce-commercecheckoutordersummaryextraitemslistitem {
flex-direction: row;
justify-content: space-between;
margin-bottom: 8px;
display: flex;
}
.w-commerce-commercecheckoutsummarytotal {
font-weight: 700;
}
.w-commerce-commercecheckoutplaceorderbutton {
color: #fff;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
text-align: center;
background-color: #3898ec;
border-width: 0;
border-radius: 3px;
align-items: center;
margin-bottom: 20px;
padding: 9px 15px;
text-decoration: none;
display: block;
}
.w-commerce-commercecheckouterrorstate {
background-color: #ffdede;
margin-top: 16px;
margin-bottom: 16px;
padding: 10px 16px;
}
.w-commerce-commercepaypalcheckoutformcontainer {
background-color: #f5f5f5;
width: 100%;
min-height: 100vh;
padding: 20px;
}
.w-commerce-commercecheckoutcustomerinfosummarywrapper {
margin-bottom: 20px;
}
.w-commerce-commercecheckoutsummaryitem, .w-commerce-commercecheckoutsummarylabel {
margin-bottom: 8px;
}
.w-commerce-commercecheckoutsummaryflexboxdiv {
flex-direction: row;
justify-content: flex-start;
display: flex;
}
.w-commerce-commercecheckoutsummarytextspacingondiv {
margin-right: .33em;
}
.w-commerce-commercecheckoutpaymentsummarywrapper {
margin-bottom: 20px;
}
.w-commerce-commercepaypalcheckouterrorstate {
background-color: #ffdede;
margin-top: 16px;
margin-bottom: 16px;
padding: 10px 16px;
}
.w-commerce-commerceorderconfirmationcontainer {
background-color: #f5f5f5;
width: 100%;
min-height: 100vh;
padding: 20px;
}
.w-commerce-commercecheckoutshippingsummarywrapper {
margin-bottom: 20px;
}
.w-layout-layout {
grid-row-gap: 20px;
grid-column-gap: 20px;
grid-auto-columns: 1fr;
justify-content: center;
padding: 20px;
}
.w-layout-cell {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
}
@media screen and (max-width: 991px) {
.w-layout-blockcontainer {
max-width: 728px;
}
}
@media screen and (max-width: 767px) {
.w-layout-blockcontainer {
max-width: none;
}
.w-commerce-commercelayoutcontainer {
flex-direction: column;
align-items: stretch;
}
.w-commerce-commercelayoutmain {
flex-basis: auto;
margin-right: 0;
}
.w-commerce-commercelayoutsidebar {
flex-basis: auto;
}
}
@media screen and (max-width: 479px) {
.w-commerce-commercecartcontainerwrapper--cartType-modal {
flex-direction: row;
justify-content: center;
align-items: stretch;
}
.w-commerce-commercecartcontainerwrapper--cartType-leftDropdown, .w-commerce-commercecartcontainerwrapper--cartType-rightDropdown {
flex-direction: row;
justify-content: center;
align-items: stretch;
display: flex;
position: fixed;
inset: 0;
}
.w-commerce-commercecartquantity, .w-commerce-commerceaddtocartquantityinput, .w-commerce-commercecheckoutemailinput, .w-commerce-commercecheckoutshippingfullname, .w-commerce-commercecheckoutshippingstreetaddress, .w-commerce-commercecheckoutshippingstreetaddressoptional {
font-size: 16px;
}
.w-commerce-commercecheckoutrow {
flex-direction: column;
}
.w-commerce-commercecheckoutshippingcity, .w-commerce-commercecheckoutshippingstateprovince, .w-commerce-commercecheckoutshippingzippostalcode, .w-commerce-commercecheckoutshippingcountryselector, .w-commerce-commercecheckoutcardnumber, .w-commerce-commercecheckoutcardexpirationdate, .w-commerce-commercecheckoutcardsecuritycode, .w-commerce-commercecheckoutbillingfullname, .w-commerce-commercecheckoutbillingstreetaddress, .w-commerce-commercecheckoutbillingstreetaddressoptional, .w-commerce-commercecheckoutbillingcity, .w-commerce-commercecheckoutbillingstateprovince, .w-commerce-commercecheckoutbillingzippostalcode, .w-commerce-commercecheckoutbillingcountryselector {
font-size: 16px;
}
}
body {
background-color: var(--black);
color: #fff;
background-image: url(//visualsimpact.co.za/wp-content/themes/darkyn/assets/images/hero-bg.jpg);
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
font-family: Clashdisplay, sans-serif;
font-size: 22px;
line-height: 28px;
cursor: none;
}
h2 {
margin-top: 20px;
margin-bottom: 10px;
font-size: 32px;
font-weight: 600;
line-height: 36px;
}
h4 {
margin-top: 0;
margin-bottom: 10px;
font-size: 30px;
font-weight: 400;
line-height: 28px;
}
p {
margin-bottom: 0;
line-height: 26px;
}
blockquote {
border-left: 5px solid #dc5f00;
margin-bottom: 10px;
padding: 10px 20px;
font-size: 18px;
line-height: 22px;
}
.header {
padding-top: 40px;
}
.menu-item {
border-bottom: 2px solid var(--transparent);
color: var(--white);
text-transform: uppercase;
margin-left: 15px;
margin-right: 15px;
padding: 10px 0;
font-size: 17px;
font-weight: 400;
}
.menu-item:hover {
color: #dc5f00;
}
.menu-item.w--current {
border-bottom-color: #dc5f00;
color: var(--white);
margin-left: 15px;
margin-right: 15px;
padding-right: 0;
}
.menu-item.w--current:hover {
color: #dc5f00;
}
.logo-img {
width: 200px;
}
.header-right-side {
margin-left: auto;
display: flex;
}
.cart-button {
border: 1px solid #292929;
text-align: left;
-webkit-text-stroke-color: #e8e7ef;
background-color: #fff0;
border-radius: 5px;
justify-content: center;
width: auto;
height: auto;
padding: 15px;
position: relative;
}
.header-inner {
background-color: var(--grey);
border: 1px solid #292929;
border-radius: 5px;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
padding: 22px;
display: flex;
padding-left: 32px;
}
.logo.w--current {
flex: none;
}
.main-menu {
border: 2px #f9dc4a;
border-radius: 0;
flex: 0 auto;
align-self: center;
margin-left: auto;
padding: 0;
}
.main-container {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
font-size: 17px;
font-weight: 400;
line-height: 20px;
}
.project-cursor-text {
opacity: 0;
text-align: center;
text-transform: uppercase;
}
.hero-section {
padding-top: 20px;
padding-bottom: 50px;
}
.hero-grid {
grid-column-gap: 50px;
grid-row-gap: 50px;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-columns: 1fr;
padding-top: 150px;
display: grid;
}
.hero-big-text {
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
font-size: 140px;
line-height: 100px;
}
.hero-paragraph {
margin-bottom: 0;
font-weight: 300;
}
.hero-projects-link {
color: var(--white);
justify-content: flex-start;
align-items: center;
margin-top: 30px;
text-decoration: none;
display: flex;
}
.hero-projects-link-text {
border-bottom: 1px solid var(--white);
font-weight: 300;
line-height: 22px;
text-decoration: none;
}
.hero-proect-link-arrow {
width: 20px;
margin-left: 10px;
}
.hero-under-text {
border-left: 5px solid #dc5f00;
text-transform: uppercase;
margin-top: 100px;
padding-left: 30px;
font-size: 30px;
font-weight: 200;
line-height: 40px;
}
.hero-partners {
border-top: 1px solid #292929;
border-bottom: 1px solid #292929;
margin-top: 50px;
padding-top: 15px;
padding-bottom: 15px;
overflow: hidden;
}
.hero-partners.partners-about {
margin-top: 0;
}
.hero-partners-moving {
white-space: nowrap;
word-break: normal;
overflow-wrap: normal;
}
.hero-client-logo {
margin-right: 100px;
}
.numbers-grid {
grid-column-gap: 20px;
grid-row-gap: 20px;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;
}
.numbers-item {
border-radius: 5px;
flex-flow: column;
height: auto;
min-height: 320px;
padding: 20px;
display: flex;
}
.numbers-item.numbers-item-grey {
background-color: #4a4a4a;
}
.numbers-item.numbers-item-orange {
background-color: #dc5f00;
}
.numbers-item.numbers-item-dark {
background-color: #191919;
}
.numbers-item.numbers-item-grey-light {
background-color: #939393;
}
.number-circle {
border-radius: 50%;
width: 20px;
height: 20px;
}
.number-circle.circle-dark {
background-color: #242424;
}
.number-circle.number-circle-black {
background-color: #0f0f0f;
}
.number-circle.circle-orange {
background-color: #dc5f00;
}
.number-circle.circle-grey {
background-color: #b7b7b7;
}
.number-text-box {
margin-top: auto;
}
.number-text-small {
text-transform: capitalize;
}
.number-text-big {
margin-bottom: 15px;
font-size: 70px;
font-weight: 500;
line-height: 50px;
}
.services-section {
padding-top: 150px;
}
.main-title {
border-bottom: 1px solid #dc5f00;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 50px;
font-size: 80px;
font-weight: 600;
line-height: 50px;
}
.services-item {
border-bottom: 1px solid #292929;
justify-content: flex-start;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
display: flex;
}
.service-nunmber {
border: 1px solid #292929;
background-color: #191919;
border-radius: 4px;
padding: 7px;
display: inline-block;
}
.service-text {
text-transform: uppercase;
flex: none;
margin-left: 15px;
font-size: 40px;
font-weight: 200;
line-height: 30px;
}
.service-img {
border-radius: 10px;
flex: none;
width: 600px;
margin-left: auto;
}
.service-img img {
border-radius: 10px !important;
}
.who-we-are-section {
padding-top: 150px;
}
.who-we-are-section.wo-we-are-about {
padding-top: 100px;
}
.mission-grid {
grid-column-gap: 20px;
grid-row-gap: 20px;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;
}
.mission-title {
justify-content: flex-start;
align-items: center;
margin-bottom: 30px;
display: flex;
}
.mission-title.mission-title-right {
justify-content: flex-end;
align-items: center;
}
.mission-plus {
flex: 0 auto;
width: 70px;
}
.mission-heading {
text-transform: uppercase;
flex: none;
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
font-size: 40px;
font-weight: 200;
line-height: 40px;
}
.mission-heading.mission-heading-right {
text-align: right;
margin-left: 0;
margin-right: 30px;
}
.mission-content {
border: 1px solid #292929;
border-radius: 10px;
justify-content: flex-start;
align-items: center;
padding: 10px;
display: flex;
}
.mission-text-box {
flex-flow: column;
flex: 0 auto;
display: flex;
}
.mission-paragraph {
margin-bottom: 100px;
font-size: 22px;
line-height: 28px;
}
.mission-paragraph.mission-paragraph-right {
margin-top: 100px;
margin-bottom: 0;
margin-left: 20px;
}
.mission-orange-box {
border: 1px solid #dc5f00;
background-color: #dc5f00;
border-radius: 5px;
align-self: flex-start;
width: 30px;
height: 30px;
}
.mission-orange-box.mission-transparent {
background-color: var(--transparent);
margin-top: 20px;
margin-left: 20px;
}
.mission-img {
border-radius: 10px !important;
flex: 0 auto;
width: 240px;
margin-left: 40px;
}
.mission-img.mission-img-right {
margin-left: 0;
}
.work-section {
padding-top: 150px;
}
.work-section.work-page-section {
padding-top: 50px;
padding-bottom: 50px;
}
.main-title-box {
position: relative;
}
.all-projects {
color: var(--white);
text-transform: uppercase;
font-size: 18px;
position: absolute;
top: 10px;
right: 0;
}
.work-list {
grid-column-gap: 40px;
grid-row-gap: 40px;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;
}
.work-item {
color: var(--white);
text-decoration: none;
display: block;
}
.work-img {
width: 100%;
}
.heading {
margin-top: 22px;
margin-bottom: 20px;
font-size: 46px;
font-weight: 500;
line-height: 40px;
}
.work-category {
text-transform: uppercase;
background-color: #dc5f00;
border-radius: 5px;
padding: 8px 11px 8px 12px;
font-size: 15px;
font-weight: 400;
line-height: 17px;
display: inline-block;
}
.testimonials-section {
padding-top: 150px;
}
.testimonials-grid {
grid-column-gap: 20px;
grid-row-gap: 20px;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;
}
.trstimonials-item {
border: 1px solid #292929;
border-radius: 10px;
padding: 30px;
}
.trstimonials-item:hover {
background-color: var(--transparent);
}
.testimonial-item-box {
border-bottom: 1px solid rgb(255 255 255 / 10%);
justify-content: flex-start;
align-items: center;
margin-bottom: 20px;
padding-bottom: 30px;
display: flex;
}
.testimonials-quote {
width: 20px;
}
.testimonial-heading {
text-transform: capitalize;
margin: 0 0 0 20px;
font-size: 25px;
font-weight: 500;
line-height: 26px;
}
.testimonials-img-txt {
justify-content: flex-start;
align-items: center;
display: flex;
}
.testimonial-img {
background-color: #191919;
border-radius: 10px;
width: 140px;
padding-top: 10px;
border-radius: 5px!important;!importan;!importa;!import;!impor;!impo;!imp;!im;!i;!;
}
.testimonials-txt {
margin-bottom: 0;
margin-left: 20px;
font-size: 22px;
line-height: 24px;
}
.blog-section {
padding-top: 150px;
}
.blog-list-wrapper {
margin-top: 50px;
}
.blog-list-wrapper.blog-list-page {
margin-top: 0;
}
.blog-list {
grid-column-gap: 40px;
grid-row-gap: 40px;
grid-template-rows: auto;
grid-template-columns: 1fr;
grid-auto-columns: 1fr;
display: grid;
}
.blog-arrow {
background-color: #333;
border-radius: 50%;
justify-content: center;
align-items: center;
width: 55px;
height: 55px;
margin-left: 10px;
text-decoration: none;
display: flex;
}
.blog-left {
border: 1px none #292929;
border-radius: 10px;
flex: 1;
padding: 0;
}
.blog-author img {
object-fit: cover;
border: 3px solid #333 !important;
border-radius: 50% !important;
width: 55px;
height: 55px;
}
.link-to-single {
margin-left: auto;
}
.blog-image {
border-radius: 5px !important;
width: 390px;
margin-left: auto;
}
.blog-image img {
border-radius: 5px !important;
}
.blog-item {
border: 1px solid #292929;
cursor: pointer;
border-radius: 5px;
justify-content: flex-start;
align-items: center;
padding: 30px;
text-decoration: none;
display: flex;
}
.blog-category {
border: 1px solid #dc5f007d;
color: var(--white);
border-radius: 10px;
padding: 7px 16px;
text-decoration: none;
display: inline-block;
}
.blog-heading {
color: var(--white);
width: 80%;
margin-bottom: 0;
font-size: 40px;
font-weight: 500;
line-height: 44px;
}
.blog-author-and-arrow {
border-top: 1px solid #292929;
width: 20%;
margin-top: 20px;
padding-top: 20px;
display: flex;
}
.blog-arrow-icon {
width: 25px;
}
.footer {
margin-top: 50px;
}
.phone-link {
color: #fff;
margin-top: 30px;
margin-bottom: 60px;
font-family: Clashdisplay, sans-serif;
font-size: 60px;
font-weight: 400;
line-height: 0px;
text-decoration: none;
display: block;
}
.copyright-text {
color: #fff;
}
.socials {
justify-content: center;
display: flex;
}
.inner-footer {
border-style: solid;
border-width: 1px 1px 15px;
border-color: #1e1e1e;
text-align: center;
border-radius: 5px;
padding-top: 110px;
padding-bottom: 110px;
}
.copyright {
justify-content: space-between;
align-items: center;
padding-top: 30px;
padding-bottom: 30px;
display: flex;
}
.backtotop {
border: 1px solid #292929;
border-radius: 5px;
justify-content: center;
align-items: center;
width: 80px;
height: 40px;
display: flex;
}
.mail-link {
color: #fff;
text-align: center;
font-size: 26px;
text-decoration: none;
display: inline-block;
!importan;!importa;!import;!impor;!impo;!imp;!im;!i;!;
margin-bottom: 29px;
border-bottom: 1px solid rgb(255 255 255 / 13%);
padding-bottom: 20px;
}
.social-link {
color: var(--white);
justify-content: flex-start;
align-items: center;
margin-right: 20px;
text-decoration: none;
display: flex;
}
.social-link.last-social {
margin-right: 0;
}
.social-text {
text-transform: capitalize;
font-size: 18px;
line-height: 18px;
}
.social-arrow {
width: 15px;
margin-left: 6px;
}
.right-copyright {
justify-content: flex-start;
align-items: center;
display: flex;
}
.license {
color: var(--white);
text-transform: capitalize;
margin-right: 20px;
text-decoration: none;
}
.sitemap {
margin-top: 20px;
}
.inner-sitemap {
border: 1px solid #292929;
border-radius: 5px;
justify-content: flex-start;
align-items: center;
padding: 50px;
display: flex
;
}
.sitemap-heading {
margin-top: 0;
margin-bottom: 0;
font-size: 38px;
font-weight: 300;
line-height: 60px;
}
.stemap-text {
border: 1px solid #292929;
background-color: #000000b3;
border-radius: 5px;
margin-left: 20px;
padding: 7px 9px;
}
.clients-section, .team-section {
padding-top: 150px;
}
.team-scials {
position: absolute;
inset: 10px 10px auto auto;
}
.social-link-2 {
border: 1px solid #292929;
border-radius: 5px;
justify-content: center;
align-items: center;
width: 50px;
height: 54px;
margin-bottom: 5px;
display: flex;
}
.team-job {
font-size: 16px;
line-height: 20px;
}
.team-image-wrapp {
border: 1px solid #292929;
background-color: var(--black);
color: #1d1d1d;
text-align: center;
border-radius: 5px;
padding: 60px 20px 0;
position: relative;
}
.team-grid {
grid-column-gap: 20px;
grid-row-gap: 20px;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;
}
.social-image {
width: 20px;
}
.team-img {
object-fit: cover;
width: auto;
overflow: hidden;
}
.team-heading {
margin-top: 0;
font-size: 28px;
font-weight: 500;
line-height: 28px;
}
.team-details {
padding-top: 20px;
padding-bottom: 20px;
}
.contact-section {
padding-top: 100px;
padding-bottom: 50px;
}
.contact-text {
border-bottom: 1px solid #fff;
margin-bottom: 30px;
padding-bottom: 30px;
font-size: 40px;
line-height: 40px;
}
.social-arrow-2 {
width: 16px;
margin-left: auto;
}
.input-style {
border: 1px solid #292929;
color: #fff;
background-color: #fff0;
border-radius: 5px;
flex: 1;
align-self: auto;
min-height: 50px;
margin-bottom: 0;
padding: 25px 20px 20px;
line-height: 20px;
}
.input-style:active {
color: #fff;
}
.input-style:focus {
color: #fff;
background-color: #fff0;
font-size: 20px;
font-weight: 400;
}
.input-style:focus-visible {
color: #fff;
font-weight: 400;
}
.input-style[data-wf-focus-visible] {
color: #fff;
font-weight: 400;
}
.input-style::placeholder {
color: #fff;
font-size: 20px;
font-weight: 400;
}
.input-style:lang(en) {
color: #fff;
font-weight: 400;
}
.input-style.textarea {
min-height: auto;
padding-bottom: 100px;
}
.form-stack {
grid-row-gap: 20px;
padding: 0;
}
.contact-stack {
margin-top: 0;
padding: 0;
}
.comtact-main-title {
text-transform: uppercase;
margin-top: 0;
margin-bottom: 30px;
font-size: 38px;
}
.comtact-main-title.contact-title-with-border {
text-transform: capitalize;
border-bottom: 1px #fff;
padding-bottom: 0;
font-size: 30px;
font-weight: 400;
line-height: 30px;
}
.social-item {
color: #fff;
align-items: center;
margin-right: 20px;
text-decoration: none;
display: flex;
}
.social-text-2 {
text-transform: capitalize;
margin-right: 10px;
line-height: 20px;
text-decoration: underline;
}
.contact-link {
color: #fff;
margin-bottom: 5px;
font-size: 18px;
line-height: 18px;
text-decoration: none;
}
.contact-link.contact-last-link {
border-bottom: 1px solid #fff;
margin-bottom: 30px;
padding-bottom: 30px;
}
.contact-location {
width: 100%;
margin-bottom: 30px;
}
.footer-socials {
align-self: stretch;
align-items: center;
margin-top: 65px;
display: flex;
}
.footer-socials.contact-socials {
margin-top: 0;
}
.submit-button {
float: none;
color: #fff;
text-transform: uppercase;
background-color: #dc5f00;
border: 1px solid #242424;
border-radius: 5px;
margin-top: 20px;
margin-left: auto;
padding: 20px 40px;
font-size: 20px;
font-weight: 500;
transition: all .3s;
}
.submit-button:hover {
color: #000;
background-color: #fff;
background-image: none;
}
.success-message {
background-color: #fff0;
border: 1px solid #272727;
}
.single-cell {
align-items: stretch;
}
.contact-form-block {
border: 5px #fff;
border-radius: 0;
margin-bottom: 0;
padding: 0;
}
.error-message {
background-color: #c4ecce;
}
.product-section {
padding-top: 50px;
padding-bottom: 50px;
}
.prod-description-title {
margin-top: 0;
margin-bottom: 20px;
font-size: 25px;
font-weight: 500;
}
.single-prod-right {
border: 1px solid #292929;
background-color: var(--transparent);
border-radius: 5px;
padding: 50px;
}
.prod-description {
border-top: 1px solid #292929;
border-bottom: 1px solid #292929;
margin-top: 30px;
padding-top: 30px;
padding-bottom: 30px;
}
.quantity {
float: left;
border-color: #292929;
background-color: #000;
border-radius: 0;
height: 43px;
margin-top: 20px;
margin-bottom: 0;
margin-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.single-prod-title {
margin: 0 0 20px;
font-size: 40px;
font-weight: 400;
}
.refund-title {
text-transform: uppercase;
margin-top: 0;
margin-bottom: 20px;
font-size: 24px;
font-weight: 400;
}
.option-list {
grid-column-gap: 16px;
grid-row-gap: 16px;
border-bottom: 1px solid #292929;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
padding-top: 20px;
padding-bottom: 20px;
display: grid;
}
.single-prod-left {
border: 1px solid #292929;
background-color: var(--transparent);
border-radius: 5px;
padding: 50px;
}
.select-field {
color: #fff;
background-color: #000;
border: 1px solid #303030;
margin-top: 0;
margin-bottom: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.refund-div {
border: 1px solid #292929;
background-color: var(--transparent);
border-radius: 5px;
margin-top: 20px;
padding: 40px;
}
.buy-now-button {
display: none;
}
.single-prod-price {
line-height: 21px;
}
.add-to-cart-button {
background-color: var(--white);
color: #000;
margin-top: 20px;
margin-left: 20px;
}
.single-prod-grid {
grid-column-gap: 20px;
grid-row-gap: 20px;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;
}
.paragraph {
margin-bottom: 0;
}
.shop-section {
padding-top: 50px;
padding-bottom: 50px;
}
.shop-list {
grid-column-gap: 20px;
grid-row-gap: 20px;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;
}
.shop-item {
border: 1px solid #292929;
border-radius: 5px;
transition: all .2s;
}
.shop-item:hover {
border-color: #dc5f00;
}
.shop-image-wrapper {
padding: 20px 40px;
display: block;
}
.shop-image-image {
width: 100%;
}
.shop-text-wrapp {
text-align: center;
background-color: #181818;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
padding: 30px;
}
.shop-prod-title {
border-bottom: 1px solid #292929;
margin-top: 0;
margin-bottom: 20px;
padding-bottom: 20px;
font-size: 24px;
font-weight: 500;
}
.default-button {
color: #000;
text-transform: uppercase;
background-color: #c4ef17;
border: 1px solid #c4ef17;
padding: 17px 23px;
font-weight: 600;
transition: all .2s;
}
.default-button:hover {
color: #c4ef17;
background-color: #000;
}
.default-button.order-button {
border-color: #292929;
background-color: var(--white);
margin-top: 20px;
padding: 10px 40px;
font-size: 20px;
font-weight: 400;
line-height: 25px;
}
.default-button.order-button:hover {
background-color: var(--black);
color: var(--white);
}
.sigle-work-section {
padding-top: 50px;
padding-bottom: 50px;
}
.single-work-grid {
grid-column-gap: 20px;
grid-row-gap: 20px;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;
}
.single-main-work-img {
margin-bottom: 20px;
}
.single-main-title-heading {
text-transform: uppercase;
margin-top: 0;
margin-bottom: 40px;
font-size: 50px;
font-weight: 200;
line-height: 40px;
}
.single-left-grid {
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;
}
.single-left-item {
border-left: 1px solid var(--white);
padding-left: 20px;
}
.single-detail-heading {
text-transform: uppercase;
margin-top: 0;
margin-bottom: 20px;
font-size: 20px;
font-weight: 200;
}
.single-details-text {
font-size: 18px;
}
.button {
border: 1px solid #dc5f00;
background-color: var(--transparent);
text-transform: uppercase;
border-radius: 5px;
margin-top: 50px;
padding: 10px 40px;
}
.single-post-section {
padding-top: 50px;
padding-bottom: 50px;
}
.blog-author-and-category {
margin-bottom: 20px;
}
.single-post-text-cell {
border: 1px solid #292929;
background-color: var(--transparent);
border-radius: 5px;
padding: 30px;
}
.single-post-img {
mix-blend-mode: normal;
border-radius: 0;
position: static;
}
.single-blog-heading {
color: #fff;
margin-top: 0;
margin-bottom: 0;
font-size: 40px;
font-weight: 500;
line-height: 50px;
position: static;
}
.blog-category-2 a {
color: #19191a;
border: 2px solid #0003;
border-radius: 50px;
padding: 10px 20px;
text-decoration: none;
display: inline-block;
}
.blog-category-2.single-category a {
border-color: #dc5f00;
color: #fff;
border-radius: 67px;
margin-left: 0;
}
.blog-category-2.single-category a:hover {
border-color: #dc5f00;
color: #fff;
border-radius: 0;
margin-left: 0;
}
.signel-post-image-cell {
background-color: #fff0;
border-radius: 0;
}
.single-img-wrapper {
margin-bottom: 40px;
}
.single-stack {
padding: 0;
}
.single-upper {
border: 1px solid #292929;
background-color: var(--transparent);
border-radius: 5px 5px 0px 0px;
padding: 30px 30px 40px;
}
.blog-page-section {
padding-top: 50px;
padding-bottom: 50px;
}
.pages-body {
cursor: auto;
}
.checkout {
color: var(--black);
margin-top: 40px;
}
.checkout-button {
background-color: #dc5f00;
border-style: solid;
border-color: #000;
}
.utility-section {
padding-top: 50px;
padding-bottom: 50px;
}
.utility-h4 {
margin-top: 20px;
margin-bottom: 20px;
}
.list-item.last-list-item {
margin-bottom: 0;
}
.h1-heading {
margin-top: 0;
margin-bottom: 0;
font-size: 60px;
line-height: 60px;
}
.style-guide {
margin-top: 0;
}
.h5-heading {
margin-top: 0;
margin-bottom: 0;
font-weight: 400;
line-height: 20px;
}
.block-quote {
border-left-color: #dc5f00;
}
.quick-stack-2 {
padding: 0;
}
.h6-heading {
margin-top: 0;
margin-bottom: 0;
font-weight: 400;
line-height: 16px;
}
.h3-heading {
margin-top: 0;
margin-bottom: 0;
font-size: 25px;
font-weight: 400;
line-height: 25px;
}
.h3-heading.list-heading {
margin-bottom: 30px;
font-weight: 600;
}
.sample-link {
color: #fff;
font-size: 20px;
font-weight: 400;
line-height: 25px;
text-decoration: underline;
}
.h2-heading {
margin-top: 0;
margin-bottom: 0;
font-size: 40px;
font-weight: 400;
line-height: 40px;
}
.ordered-list {
margin-top: 0;
margin-bottom: 0;
padding-left: 20px;
}
._30mb-space {
border-bottom: 1px solid #272727;
height: 30px;
margin-bottom: 30px;
}
.list-text {
font-size: 20px;
font-weight: 400;
line-height: 27px;
}
.h4-heading {
margin-top: 0;
margin-bottom: 0;
font-size: 22px;
font-weight: 400;
line-height: 23px;
}
.paragraph-6 {
margin-bottom: 0;
font-size: 20px;
font-weight: 400;
line-height: 25px;
}
.sample-link-2 {
color: var(--white);
font-size: 20px;
font-weight: 400;
line-height: 25px;
text-decoration: underline;
}
.utility-p {
text-align: center;
margin-bottom: 30px;
font-size: 20px;
line-height: 30px;
}
.utility-p.change-paragrap {
text-align: left;
margin-top: 0;
margin-bottom: 0;
}
.changelog-text {
margin-top: 10px;
font-size: 20px;
font-weight: 300;
line-height: 30px;
}
.cart-wrapper {
color: var(--black);
}
.close-button {
cursor: pointer;
}
.delete-me {
color: #fff;
text-transform: capitalize;
background-image: linear-gradient(#55bdbe, #3da9af);
border: 1px solid #7acfd8;
border-radius: 50px;
padding: 10px 40px;
font-size: 20px;
font-weight: 400;
transition: all .2s;
display: inline-block;
box-shadow: 0 2px 5px #00000017;
}
.delete-me:hover {
box-shadow: 0 2px 20px 5px #0000000d;
}
.delete-me.more-template {
z-index: 5555;
background-image: linear-gradient(180deg, #dc5f00, #6d2f00);
text-transform: uppercase;
border-style: none;
margin-bottom: 10px;
padding: 10px 20px;
font-size: 16px;
font-weight: 400;
display: block;
position: fixed;
inset: auto 20px 10px auto;
}
@media screen and (min-width: 1440px) {
.menu-item {
padding: 10px 0;
font-size: 17px;
}
.menu-item.w--current {
margin-left: 15px;
margin-right: 15px;
padding: 10px 0;
}
.header-inner {
justify-content: flex-end;
display: flex;
}
.main-menu {
flex: none;
align-self: center;
margin-left: auto;
}
.main-container {
max-width: 1400px;
padding-left: 0;
padding-right: 0;
}
.hero-big-text {
font-size: 201px;
}
.hero-under-text {
font-size: 39px;
}
.hero-partners {
border-style: solid none;
border-width: 1px;
border-color: #292929;
padding-top: 25px;
padding-bottom: 25px;
}
.service-img {
width: 770px;
}
.mission-paragraph {
margin-top: 20px;
margin-bottom: 130px;
margin-left: 20px;
}
.mission-paragraph.mission-paragraph-right {
margin-top: 130px;
margin-bottom: 20px;
}
.mission-orange-box {
border: 1px solid #dc5f00;
margin-bottom: 20px;
margin-left: 20px;
}
.mission-orange-box.mission-transparent {
background-color: var(--transparent);
align-self: flex-start;
}
.mission-img {
object-fit: cover;
border-radius: 10px !important;
align-self: stretch;
margin-left: 20px;
}
.mission-img.mission-img-right {
margin-left: 0;
margin-right: 20px;
}
.blog-image {
width: 420px;
}
.blog-heading {
font-size: 40px;
line-height: 40px;
}
.contact-stack {
grid-column-gap: 70px;
grid-row-gap: 70px;
}
.single-left-item {
padding-left: 40px;
}
.single-stack {
grid-column-gap: 50px;
grid-row-gap: 50px;
}
.paragraph-6 {
font-size: 22px;
line-height: 28px;
}
}
@media screen and (min-width: 1920px) {
.menu-item {
padding: 10px 0;
}
.menu-item.w--current {
padding-left: 0;
padding-right: 0;
}
.main-container {
max-width: 1700px;
}
}
@media screen and (max-width: 991px) {
body {
cursor: auto;
}
.menu-item {
color: var(--white);
font-weight: 300;
}
.menu-item.w--current {
color: #dc5f00;
border-bottom-style: none;
}
.cart-button {
justify-content: center;
width: auto;
height: auto;
padding: 15px;
}
.main-menu {
border: 1px solid var(--white);
background-color: #000;
border-radius: 0;
padding: 20px;
}
.icon {
color: var(--white);
font-size: 33px;
}
.shop-button {
color: var(--white);
align-self: flex-start;
margin-top: 25px;
}
.menu-button {
border: 1px solid var(--white);
flex: 0 auto;
order: 1;
margin-left: 20px;
padding: 8px;
}
.menu-button.w--open {
background-color: #fff0;
}
.hero-section {
background-position: 50% 100%;
}
.hero-grid {
grid-template-columns: 1fr;
}
.hero-under-text {
margin-top: 60px;
}
.numbers-grid {
grid-template-columns: 1fr 1fr;
}
.services-item {
display: block;
}
.service-text {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 0;
}
.service-img {
flex: 0 auto;
order: 0;
margin-left: 0;
display: block;
}
.mission-grid {
grid-column-gap: 60px;
grid-row-gap: 60px;
grid-template-columns: 1fr;
}
.testimonials-grid {
grid-template-columns: 1fr;
}
.blog-left {
flex: 1;
}
.blog-image {
width: 300px;
}
.blog-heading {
width: 100%;
}
.blog-author-and-arrow {
width: 50%;
}
.socials {
display: flex;
}
.team-image-wrapp {
padding: 60px 60px 0;
}
.team-grid {
grid-column-gap: 40px;
grid-row-gap: 40px;
grid-template-columns: 1fr;
}
.single-prod-grid {
grid-column-gap: 50px;
grid-row-gap: 50px;
}
.shop-list {
grid-column-gap: 20px;
grid-row-gap: 20px;
grid-template-columns: 1fr 1fr;
}
.single-stack {
grid-column-gap: 30px;
grid-row-gap: 30px;
}
.cart-wrapper {
color: var(--black);
}
}
@media screen and (max-width: 767px) {
.logo-img {
width: 150px;
}
.menu-button {
margin-left: 10px;
}
.service-img {
width: 100%;
}
.work-list {
grid-template-columns: 1fr;
}
.blog-left {
margin-bottom: 20px;
}
.blog-image {
width: 100%;
}
.blog-item {
margin-bottom: 0;
display: block;
}
.blog-heading, .blog-author-and-arrow {
width: 100%;
}
.phone-link {
font-size: 50px;
line-height: 50px;
}
.socials {
flex-flow: column;
justify-content: center;
align-items: center;
}
.copyright {
display: block;
}
.social-link {
margin-bottom: 20px;
margin-right: 0;
}
.right-copyright {
justify-content: space-between;
margin-top: 20px;
}
.inner-sitemap {
display: block;
}
.sitemap-heading {
margin-top: 0;
margin-bottom: 20px;
font-size: 60px;
line-height: 50px;
}
.stemap-text {
margin-left: 0;
}
.contact-stack {
grid-column-gap: 50px;
grid-row-gap: 50px;
margin-top: 60px;
}
.footer-socials {
margin-top: 40px;
}
.single-prod-grid, .shop-list {
grid-template-columns: 1fr;
}
.single-work-grid {
grid-column-gap: 50px;
grid-row-gap: 50px;
grid-template-columns: 1fr;
}
.single-left-grid {
grid-column-gap: 35px;
grid-row-gap: 35px;
grid-template-columns: 1fr;
}
.single-left-item {
border-bottom: 1px solid var(--white);
border-left-style: none;
padding-bottom: 20px;
padding-left: 0;
}
}
@media screen and (max-width: 479px) {
.logo-img {
width: 120px;
}
.header-right-side {
margin-top: 0;
}
.cart-button {
padding: 8px;
}
.header-inner {
justify-content: space-between;
align-items: center;
display: flex;
}
.icon {
font-size: 20px;
line-height: 20px;
}
.hero-grid {
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.hero-big-text {
font-size: 60px;
line-height: 40px;
}
.hero-under-text {
font-size: 26px;
line-height: 35px;
}
.numbers-grid {
grid-template-columns: 1fr;
}
.main-title {
font-size: 30px;
line-height: 19px;
}
.mission-content {
display: block;
}
.mission-paragraph {
margin-bottom: 20px;
}
.mission-paragraph.mission-paragraph-right {
margin: 10px 0 0;
}
.mission-orange-box.mission-transparent {
margin-left: 0;
}
.mission-img {
width: 100%;
margin-top: 20px;
margin-left: 0;
}
.all-projects {
top: 0;
}
.heading {
font-size: 30px;
line-height: 30px;
}
.testimonials-img-txt {
display: block;
}
.testimonial-img {
width: 100%;
}
.testimonials-txt {
margin-left: 0;
padding-top: 20px;
}
.phone-link {
font-size: 34px;
line-height: 40px;
}
.copyright-text {
padding-right: 20px;
}
.inner-footer {
padding-top: 60px;
padding-bottom: 60px;
}
.backtotop {
flex: none;
width: 60px;
height: 60px;
}
.mail-link {
font-size: 28px;
}
.inner-sitemap {
padding: 20px;
}
.sitemap-heading {
font-size: 40px;
line-height: 40px;
}
.team-image-wrapp {
padding-left: 20px;
padding-right: 20px;
}
.team-img {
width: auto;
}
.social-item {
margin-bottom: 15px;
}
.contact-location {
width: 80%;
}
.footer-socials {
margin-top: 30px;
display: block;
}
.submit-button {
float: none;
background-image: none;
margin-top: 10px;
padding: 20px 60px;
font-size: 19px;
}
.quantity {
float: none;
}
.option-list {
grid-template-columns: 1fr;
}
.select-field {
color: #fff;
}
.add-to-cart-button {
margin-left: 0;
}
.single-post-text-cell {
padding: 20px;
}
.single-blog-heading {
font-size: 40px;
line-height: 40px;
}
.delete-me {
text-align: center;
padding: 10px 20px;
font-size: 16px;
}
}
#darkyn21 {
align-self: end;
}
#w-node-_300d1045-815b-d871-744a-2aa00050ca14-3c872027 {
grid-area: span 1 / span 1 / span 1 / span 1;
}
#darkyn42, #darkyn36 {
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
}
#darkyn42 {
grid-template-rows: auto;
grid-template-columns: 2fr 1fr;
}
#darkyn30 {
grid-template-rows: auto auto auto;
grid-template-columns: 1fr 1fr;
}
#darkyn35 {
grid-column: span 2 / span 2;
}
#w-node-_08bc5feb-2130-9b76-71de-0ef14c34c536-affb563a {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr;
}
#w-node-_08bc5feb-2130-9b76-71de-0ef14c34c537-affb563a, #w-node-_08bc5feb-2130-9b76-71de-0ef14c34c539-affb563a, #w-node-_08bc5feb-2130-9b76-71de-0ef14c34c53b-affb563a, #w-node-_08bc5feb-2130-9b76-71de-0ef14c34c53d-affb563a, #w-node-_08bc5feb-2130-9b76-71de-0ef14c34c53f-affb563a, #w-node-_08bc5feb-2130-9b76-71de-0ef14c34c541-affb563a {
grid-area: span 1 / span 1 / span 1 / span 1;
}
@media screen and (max-width: 991px) {
#darkyn18 {
order: 9999;
}
#darkyn42 {
grid-template-rows: auto;
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 767px) {
#darkyn36 {
grid-template-rows: auto;
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 479px) {
#darkyn30 {
grid-template-rows: auto auto auto;
grid-template-columns: 1fr;
}
#darkyn31, #darkyn32, #darkyn33, #darkyn34 {
grid-column: span 2 / span 2;
}
#w-node-_08bc5feb-2130-9b76-71de-0ef14c34c536-affb563a {
grid-template-rows: auto auto;
grid-template-columns: 1fr;
}
}
@font-face {
font-family: 'Clashdisplay';
src: url(//visualsimpact.co.za/wp-content/themes/darkyn/assets/fonts/ClashDisplay-Light.otf) format('opentype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Clashdisplay';
src: url(//visualsimpact.co.za/wp-content/themes/darkyn/assets/fonts/ClashDisplay-Extralight.otf) format('opentype');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Clashdisplay';
src: url(//visualsimpact.co.za/wp-content/themes/darkyn/assets/fonts/ClashDisplay-Medium.otf) format('opentype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Clashdisplay';
src: url(//visualsimpact.co.za/wp-content/themes/darkyn/assets/fonts/ClashDisplay-Semibold.otf) format('opentype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Clashdisplay';
src: url(//visualsimpact.co.za/wp-content/themes/darkyn/assets/fonts/ClashDisplay-Bold.otf) format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Clashdisplay';
src: url(//visualsimpact.co.za/wp-content/themes/darkyn/assets/fonts/ClashDisplay-Regular.otf) format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@media only screen and (max-width: 991px){ 
.author-img {
width: 360px;
padding: 20px 10px;
padding-bottom: 0 !important;
background: #fff;
margin: 20px;
}
}
@media only screen and (max-width: 891px) {
.author-container {
display: block;
}
.author-img {
width: auto;
padding: 20px 10px;
padding-bottom: 0 !important;
background: #fff;
margin: 0;
text-align: center;
}
}
.author-img {
width: 450px;
padding: 30px;
padding-bottom: 0 !important;
background: #fff;
margin: 20px;
border-radius: 4px;
}
.author-container {
display: flex;
background-color: #1f1f1f;
align-items: center;
border: 1px solid #424242;
margin-top: 40px;
border-radius: 5px;
}
.author-image {
width: 150px;
height: 150px;
overflow: hidden;
}
.author-info h2 {
margin-top: 0;
color: #fff;
line-height: 26px;
font-size: 26px;
font-weight: 500;
}
.social-icons {
display: flex;
gap: 10px;
margin: 10px 0;
}
.social-icons  a{padding: 10px 10px;border-radius: 32px;border: 1px solid #ffffff2e;}
.social-icon img {
width: 24px;
height: 24px;
object-fit: fill;
}
.author-info {
border-left: 1px solid #424242;
padding: 20px 25px;
font-size: 16px;
line-height: 23px;
}
.author-info p {
margin: 10px 0;
}
@media only screen and (max-width: 991px){ 
.author-img {
width: 360px;
padding: 20px 10px;
padding-bottom: 0 !important;
background: #fff;
margin: 20px;
}
}
@media only screen and (max-width: 891px) {
.author-container {
display: block;
}
.author-img {
width: auto;
padding: 20px 10px;
padding-bottom: 0 !important;
background: #fff;
margin: 0;
text-align: center;
}
}
.post-coment-area {
border-top: 1px solid #424242;
margin-top: 50px;
padding-top: 40px;
color: #fff;
}
.coments-area-title {
margin-top: 0;
margin-bottom: 30px;
font-size: 26px;
color: #fff;
}
.post-comment-item {
border-bottom: 1px solid #424242;
margin-bottom: 30px;
padding-bottom: 40px;
display: flex;
}
.post-comment-item.post-comment-item-indent {
margin-left: 0;
padding-left: 100px;
}
.post-comment-description {
flex: 1;
}
.comment-author-name {
margin-top: 0;
margin-bottom: 0;
font-size: 18px;
display: inline-block;
color: #fff;
line-height: 20px;
font-weight: 500;
letter-spacing: 0.05em;
}
.post-author-time {
margin-left: 10px;
font-size: 13px;
line-height: 15px;
display: inline-block;
}
.post-author-image {
margin-right: 20px;
border-radius: 5px;
overflow: hidden;
}
.post-comment-paragraph {
margin-top: 10px;
margin-bottom: 0;
line-height: 24px;
}
.post-reply {
background:#dc5f00;
color: #fff;
margin-top: 25px;
padding: 7px 12px;
font-size: 13px;
line-height: 15px;
transition: all .2s;
}
.post-reply:hover {
opacity: 0.9;
color: #fff;
}
@media only screen and (max-width: 849px) {
.post-comment-item.post-comment-item-indent {
margin-left: 0;
padding-left: 30px;
}
}
.form-container {
width: 100%;
margin-top: 70px;
}
.form-row {
display: flex;
gap: 20px;
margin-bottom: 10px;
}
.form-input, .form-textarea {
background-color: #121212;
border: 1px solid #333;
padding: 16px 20px;
color: #fff;
width: 100%;
border-radius: 5px;
}
.form-textarea {
height: 100px;
resize: none;
}
.form-button {
background: #dc5f00;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 10px;
cursor: pointer;
transition: background 0.3s;
border-radius: 5px;
}
.form-button:hover {
background: #8c3f04;
} .sidebar {
}
.search-container {}
.search-form {
display: flex;
align-items: center;
}
.search-input {
background-color: #121212;
border: 1px solid #333;
padding: 11px 10px 11px;
color: #fff;
border-right: none;
width: 100%;
}
.search-button {
background-color: #dc5f00;
border: 1px solid #333;
padding: 12px;
cursor: pointer;
border-radius: 0px 5px 5px 0px;
}
.search-button img {
}
.aside-title {
margin: 0 0 20px;
font-size: 34px;
color: #fff;
line-height: 21px;
font-weight: 600;
text-transform: uppercase;
}
.category-list {
list-style-type: none;
padding: 0;
}
.category-list li {
margin: 10px 0;
}
.category-list a {
text-decoration: none;
color: #fff;
position: relative;
padding-left: 20px;
display: inline-block;
font-size: 18px;
}
.category-list a:before {
content: '•';
color: #fff;
position: absolute;
left: 0;
font-size: 30px;
}
.category-list a.active:before {
color: #dc5f00;
}
.category-list a:hover {
text-decoration: line-through;
}
.post-container {
margin: 60px 0 60px 0;
}
.post-listings {
margin: 20px 0 0 0;
}
.post {
display: flex;
transition: transform 0.3s;
align-content: center;
align-items: center;
margin-bottom: 20px;
text-decoration: none;
}
.post:hover {
transform: scale(1.05);
}
.post img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 5px;
border: 0px solid #333;
}
.post-text {
margin-top: 0px;
font-size: 19px;
color: #fff;
font-weight: 500;
line-height: 21px;
}
.aside-tags {
display: block;
margin-top: 0;
}
.aside-tags a {
margin-right: 10px;
display: inline-block;
margin-bottom: 10px;
font-size: 16PX;
}
.tags-container {
margin-top: 60px;
}
.aside-title {
margin: 0 0 20px;
font-size: 34px;
color: #fff;
line-height: 31px;
}
.single-post-tags {
margin-top: 40px;
}
.single-tags {
color: #fff;
font-size: 20px;
padding: 15px 20px;
border: 1px solid #2d2d2d;
text-decoration: none;
}
.single-tags:hover {
color: #dc5f00;
}
.menu-item {
position: relative;
}
.menu-item::before {
content: attr(title);
position: absolute;
top: 0;
left: 0;
transform: translateY(100%);
opacity: 0;
transition: all 0.4s ease;
}
.menu-item:hover::before {
transform: translateY(0%);
opacity: 1;
}
.cursor-wrapp {
position: fixed;
top: 0; left: 0;
width: 14px; height: 14px;
background: lime;
border-radius: 50%;
z-index: 9999;
pointer-events: none;
box-shadow: 0 0 20px lime;
}
.cursor-follower {
position: fixed;
top: 0; left: 0;
width: 50px; height: 50px;
background: rgba(0, 255, 0, 0.1);
border: 2px solid #dc5f00;
border-radius: 50%;
pointer-events: none;
z-index: 9998;
animation: radar 2s linear infinite;
}
@keyframes radar {
0% { transform: rotate(0deg) scale(1); opacity: 0.5; }
100% { transform: rotate(360deg) scale(1.1); opacity: 0.8; }
}
.cursor-wrapp {
position: fixed;
top: 0;
left: 0;
width: 14px;
height: 14px;
background: lime;
border-radius: 50%;
z-index: 9999;
pointer-events: none;
box-shadow: 0 0 20px #dc5f00;
transform: translate(-50%, -50%);
}
.cursor-follower {
position: fixed;
top: 0;
left: 0;
width: 50px;
height: 50px;
background: rgb(255 52 0 / 10%);
border: 2px solid #d96100;
border-radius: 50%;
pointer-events: none;
z-index: 9998;
animation: radar 2s linear infinite;
transform: translate(-50%, -50%);
}
.main-menu.w-nav-menu ul li > .submenu{
position:absolute;
left:0px;
top:100%;
width:165px;
opacity:0;
visibility:hidden;
border-radius: 5px;
background-color: #3a3a3a;
}
.main-menu.w-nav-menu ul li:hover > .submenu{
opacity:1;
visibility:visible;
}
.main-menu.w-nav-menu ul li > .submenu > li{
position:relative;
padding:0px;
}
.main-menu.w-nav-menu ul li > .submenu > li > a{
position:relative;
padding: 10px 15px 8px 20px;
color: #ffffff;
display:block;
font-size:13px;
font-weight:500;
text-decoration:none;
} .nav-outer .mobile-nav-toggler{
position: relative;
float: right;
font-size: 26px;
line-height: 50px;
cursor: pointer;
color:#111111;
display: none;
}
.mobile-menu{
position: fixed;
right: 0;
top: 0;
width: 300px;
padding-right:30px;
max-width:100%;
height: 100%;
visibility: hidden;
z-index: 999999;
}
.mobile-menu .nav-logo{
position:relative;
padding:20px 20px;
text-align:left;	
}
.mobile-menu .nav-logo img{
max-width:200px;
}
.mobile-menu-visible{
overflow: hidden;
}
.mobile-menu-visible .mobile-menu{
visibility: visible;
}
.mobile-menu .menu-backdrop{
position: fixed;
right: 0;
top: 0;
width: 0%;
height: 100%;
z-index: 1;
background: rgba(0,0,0,0.90);
-webkit-transform: translateX(101%);
-ms-transform: translateX(101%);
transform: translateX(101%);
transition: all 900ms ease;
-moz-transition: all 900ms ease;
-webkit-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-ms-transition-delay: 300ms;
-o-transition-delay: 300ms;
transition-delay: 300ms;
}
.mobile-menu-visible .mobile-menu .menu-backdrop{
opacity: 1;
width:100%;
visibility: visible;
transition: all 900ms ease;
-moz-transition: all 900ms ease;
-webkit-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
.mobile-menu .menu-box{
position: absolute;
right: -400px;
top: 0px;
width: 100%;
height: 100%;
max-height: 100%;
overflow-y: auto;
border: 1px solid var(--white);
background-color: #000;
border-radius: 0;
padding: 20px;
z-index: 5;
transition: all 900ms ease;
-moz-transition: all 900ms ease;
-webkit-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
}
.mobile-menu-visible .mobile-menu .menu-box{
right:0px;
-webkit-transition-delay: 600ms;
-moz-transition-delay: 600ms;
-ms-transition-delay: 600ms;
-o-transition-delay: 600ms;
transition-delay: 600ms;
}
.mobile-menu .close-btn{
position: absolute;
right: 15px;
top: 15px;
line-height: 30px;
width: 30px;
text-align: center;
font-size: 14px;
color: #ffffff;
cursor: pointer;
z-index: 10;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
-webkit-transform: translateY(-50px);
-ms-transform: translateY(-50px);
transform: translateY(-50px);
}
.mobile-menu-visible .mobile-menu .close-btn{
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 900ms;
-moz-transition-delay: 900ms;
-ms-transition-delay: 900ms;
-o-transition-delay: 900ms;
transition-delay: 900ms;
}
.mobile-menu .close-btn:hover{
opacity: 0.50;
}
.mobile-menu .navigation{
position: relative;
display: block;
width:100%;
border-top: 1px solid rgba(0,0,0,0.10);
}
.mobile-menu .navigation li{
position: relative;
display: block;
border-bottom: 1px solid #ffffff;
}
.mobile-menu .navigation li > ul > li:last-child{
border-bottom: none;
}
.mobile-menu .navigation li > ul > li:first-child{
border-top: 1px solid #ffffff;
}
.mobile-menu li > a{
position: relative;
display: block;
line-height: 24px;
padding: 10px 20px;
text-transform: capitalize;
}
.mobile-menu li:hover > a,
.mobile-menu li.current > a{
color:#ffffff;
}
.mobile-menu li.dropdown .dropdown-btn{
position:absolute;
right:0px;
top:0px;
width:44px;
height:44px;
text-align:center;
font-size:16px;
line-height:44px;
color:#ffffff;
cursor:pointer;
z-index:5;
}
.mobile-menu li.dropdown .dropdown-btn:after{
content:'';
position:absolute;
left:0px;
top:10px;
width:1px;
height:24px;
border-left:1px solid #ffffff;
}
.mobile-menu li > ul,
.mobile-menu li > ul > li > ul{
display: block;
}
.mobile-menu li > ul > li > a{
padding-left:0px;
color: #ffffff;
text-decoration: none;
}
.mobile-menu li > ul > li > ul{
padding-left:0px;
}
.mobile-menu li > ul > li > ul > li > a{
padding-left:0px;
color: #ffffff;
text-decoration: none;
} 
.mobile-menu li > ul > li > ul > li > a{
padding-left:0px;
color: #ffffff;
} 
.mobile-menu .w-nav-menu {
position: relative;
float: left;
} .work-item {
position: relative;
overflow: hidden;
perspective: 1000px;
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
.work-item:hover {
transform: rotateY(5deg) scale(1.03);
} .work-img-wrapp {
position: relative;
overflow: hidden;
border-radius: 10px;
}
.work-img {
transition: transform 0.8s ease, filter 0.8s ease;
transform-origin: center center;
border-radius: 30px;
overflow: hidden;
}
.work-item:hover .work-img {
transform: scale(1.1) rotate(2deg);
filter: brightness(1.1) contrast(1.1);
} .work-img-wrapp::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.3));
mix-blend-mode: overlay;
opacity: 0;
transition: opacity 0.5s ease;
z-index: 2;
}
.work-item:hover .work-img-wrapp::after {
opacity: 1;
} .heading {
position: relative;
z-index: 3;
transform: translateY(20px);
opacity: 0.3;
transition: all 0.5s ease-in-out;
}
.work-item:hover .heading {
transform: translateY(0);
opacity: 1;
} .work-category {
position: relative;
z-index: 3;
transform: translateY(10px);
opacity: 0;
transition: all 0.5s ease 0.2s;
}
.work-item:hover .work-category {
transform: translateY(0);
opacity: 1;
}
.blog-item {
position: relative;
overflow: hidden;
perspective: 1000px;
transition: transform 0.5s ease;
}
.blog-item::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(120deg, rgba(255,255,255,0.08), transparent);
transform: skewX(-20deg);
transition: left 0.5s ease;
}
.blog-item:hover::after {
left: 100%;
}
.blog-heading {
transition: transform 0.5s ease;
transform: rotateX(0deg);
transform-origin: bottom;
}
.blog-item:hover .blog-heading {
transform: rotateX(8deg);
}
.blog-image img {
transition: transform 0.6s ease;
}
.blog-item:hover .blog-image img {
transform: scale(1.08);
}
.blog-item {
transform-style: preserve-3d;
transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.blog-item:hover {
transform: scale(1.03) translateY(-4px);
box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.blog-left {
transition: transform 0.4s ease;
}
.blog-item:hover .blog-left {
transform: translateZ(0px);
}
.blog-heading, .blog-category {
opacity: 0.7;
transform: translateY(15px);
transition: all 0.4s ease;
}
.blog-item:hover .blog-heading,
.blog-item:hover .blog-category {
opacity: 1;
transform: translateY(0);
}
.social-link {
position: relative;
display: flex;
align-items: center;
gap: 10px;
transition: color 0.3s ease;
overflow: hidden;
}
.social-text {
transition: transform 0.3s ease, color 0.3s ease;
}
.social-arrow {
transition: transform 0.3s ease, opacity 0.3s ease;
transform: translateX(-10px);
opacity: 0;
}
.social-link:hover .social-text {
color: #fff; text-decoration:underline
}
.social-link:hover .social-arrow {
transform: translateX(0);
opacity: 1;
}
.backtotop:hover {
background-color: #dc5f00;
}
.backtotop img {
display: block;
margin: 0 auto;
transition: transform 0.2s ease;
}
.backtotop:hover img {
animation: popUp 0.4s ease;
}
@keyframes popUp {
0% {
transform: translateY(0) scale(1.5);
}
30% {
transform: translateY(-6px) scale(1.05);
}
60% {
transform: translateY(3px) scale(0.98);
}
100% {
transform: translateY(0) scale(1);
}
} .sidebar {
padding: 20px;
color: #fff;
} .aside-title {
position: relative;
font-size: 20px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 20px;
color: #ffffff;
transition: all 0.3s ease;
}
.aside-title::after {
content: '';
display: block;
width: 40px;
height: 2px;
background: #dc5f00;
margin-top: 6px;
transition: width 0.3s ease;
}
.aside-title:hover::after {
width: 100%;
} .search-form {
display: flex;
border-radius: 4px;
overflow: hidden;
background: #000000;
}
.search-input {
flex: 1;
padding: 10px;
background: #1c1c1c;
border: none;
color: #fff;
}
.search-input:focus {
outline: none;
background-color: #1c1c1c;
}
.search-button {
background: #dc5f00;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s;
}
.search-button:hover {
background: #ff7c1a;
}
.search-button img {
width: 16px;
height: auto;
} .widget_categories ul li {
list-style: none;
margin-bottom: 10px;
}
.widget_categories ul li a {
color: #ccc;
text-decoration: none;
position: relative;
padding-left: 6px;
transition: all 0.3s ease;
}
.widget_categories ul li a::before {
content: '▶';
position: absolute;
left: 6px;
color: #dc5f00;
opacity: 0;
transition: all 0.3s ease;
transform: scale(0.5);
}
.widget_categories ul li a:hover {
color: #dc5f00;
font-weight: 400;
letter-spacing: 0.5px;
}
.widget_categories ul li a:hover::before {
opacity: 1;
transform: scale(1);
} .post {
display: flex;
gap: 12px;
margin-bottom: 16px;
background-color: #1b1b1b;
padding: 20px;
border-radius: 6px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.post::after {
content: '';
position: absolute;
top: -100%;
left: -100%;
width: 200%;
height: 200%;
background: linear-gradient(120deg, transparent, rgba(220, 95, 0, 0.2), transparent);
transform: rotate(25deg);
transition: all 0.5s ease;
z-index: 0;
}
.post:hover::after {
top: 0;
left: 0;
}
.post img {
width: 80px;
height: auto;
border-radius: 4px;
z-index: 1;
}
.post-text {
color: #eee;
font-size: 15px;
z-index: 1;
}
.post:hover {
transform: scale(1.03);
box-shadow: 0 0 3px #dc5f00;
} .widget_archive ul li {
margin-bottom: 8px;
}
.widget_archive ul li a {
color: #aaa;
transition: all 0.3s ease;
text-decoration: none;
}
.widget_archive ul li a:hover {
color: #dc5f00;
font-weight: 600;
letter-spacing: 0.5px;
}
.tagcloud a {
position: relative;
display: inline-block;
margin: 4px 6px 6px 0;
padding: 6px 12px;
background: #1c1c1c;
color: #aaa;
font-size: 10pt !important;
border: 1px solid #333;
border-radius: 4px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, background 0.3s ease;
z-index: 1;
}
.tagcloud a::after {
content: '';
position: absolute;
top: -100%;
left: -150%;
width: 200%;
height: 200%;
background: linear-gradient(120deg, transparent, rgba(220, 95, 0, 0.2), transparent);
transform: rotate(25deg);
transition: top 0.3s ease, left 0.5s ease;
z-index: 0;
pointer-events: none;
}
.tagcloud a:hover::after {
top: 0;
left: 0;
}
.tagcloud a:hover {
background: #1c1c1c;
color: #dc5f00;
transform: scale(1.05);
box-shadow: 0 0 6px #dc5f00;
}
.blog-item {
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-item::after {
content: '';
position: absolute;
top: -100%;
left: -100%;
width: 200%;
height: 200%;
background: linear-gradient(120deg, transparent, rgb(127 127 127 / 20%), transparent);
transform: rotate(25deg);
transition: all 0.5s ease;
z-index: 0;
pointer-events: none;
}
.blog-item:hover::after {
top: 0;
left: 0;
}
.blog-item:hover {
transform: scale(1.02);
box-shadow: 0 0 5px #dc5f00;
}
.single-img-wrapper {
position: relative;
overflow: hidden;
}
.single-img-wrapper::after {
content: '';
position: absolute;
top: -100%;
left: -100%;
width: 200%;
height: 200%;
background: linear-gradient(120deg, transparent, rgba(220, 95, 0, 0.2), transparent);
transform: rotate(25deg);
transition: all 0.5s ease;
z-index: 1;
pointer-events: none;
}
.single-img-wrapper:hover::after {
top: 0;
left: 0;
}
.single-post-img {
position: relative;
z-index: 2; }
.single-post-img img {
transition: transform 0.3s ease;
}
.single-img-wrapper:hover .single-post-img img {
transform: scale(1.02);
}
.mission-img {
transition: transform 0.3s ease;
position: relative;
z-index: 2;
}
.mission-content {
position: relative;
overflow: hidden;
}
.mission-content::after {
content: '';
position: absolute;
top: -100%;
left: -100%;
width: 200%;
height: 200%;
background: linear-gradient(120deg, transparent, rgba(220, 95, 0, 0.2), transparent);
transform: rotate(25deg);
transition: all 0.5s ease;
z-index: 1;
pointer-events: none;
}
.mission-content:hover::after {
top: 0;
left: 0;
}
.mission-content:hover .mission-img {
transform: scale(1.03);
}
.trstimonials-item {
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-color: #1b1b1b; border-radius: 6px;
}
.trstimonials-item::after {
content: '';
position: absolute;
top: -100%;
left: -100%;
width: 200%;
height: 200%;
background: linear-gradient(120deg, transparent, rgba(220, 95, 0, 0.2), transparent);
transform: rotate(25deg);
transition: all 0.5s ease;
z-index: 0;
pointer-events: none;
}
.trstimonials-item:hover::after {
top: 0;
left: 0;
}
.trstimonials-item:hover {
transform: scale(1.03);
box-shadow: 0 0 4px #dc5f00;
} .testimonial-item-box,
.testimonials-img-txt,
.testimonials-quote,
.testimonial-heading,
.testimonial-img,
.testimonials-txt {
position: relative;
z-index: 1;
}
.author-container {
position: relative;
overflow: hidden;
padding: 30px;
margin-top: 40px;
background-color: #1b1b1b;
border-radius: 8px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.author-container::after {
content: '';
position: absolute;
top: -100%;
left: -100%;
width: 200%;
height: 200%;
background: linear-gradient(120deg, transparent, rgba(220, 95, 0, 0.2), transparent);
transform: rotate(25deg);
transition: all 0.5s ease;
z-index: 0;
pointer-events: none;
}
.author-container:hover::after {
top: 0;
left: 0;
}
.author-container:hover {
transform: scale(1.02);
box-shadow: 0 0 4px #dc5f00;
} .author-img,
.author-image,
.author-info,
.social-icons,
.author-info h2 {
position: relative;
z-index: 1;
} .team-item {
position: relative;
background: #1a1a1a;
border-radius: 6px;
overflow: hidden;
padding: 20px;
transition: transform 0.4s ease, box-shadow 0.4s ease;
z-index: 1;
}
.team-item::after {
content: '';
position: absolute;
top: -150%;
left: -150%;
width: 300%;
height: 300%;
background: linear-gradient(120deg, transparent, rgba(255, 102, 0, 0.12), transparent);
transform: rotate(30deg);
transition: all 0.6s ease;
pointer-events: none;
z-index: 0;
}
.team-item:hover {
transform: scale(1.01);
box-shadow: 0 0 12px rgba(255, 102, 0, 0.2);
}
.team-item:hover::after {
top: 0;
left: 0;
} .team-img img {
transition: 0.5s ease;
filter: none;
z-index: 2;
position: relative;
}
.team-item:hover .team-img img {
filter: grayscale(1) contrast(1.2);
transform: scale(1.03);
animation: glitch 0.5s ease-in-out;
} @keyframes glitch {
0% { transform: scale(1.03) translate(0px); }
20% { transform: scale(1.03) translate(2px, -2px); }
40% { transform: scale(1.03) translate(-2px, 2px); }
60% { transform: scale(1.03) translate(2px, 1px); }
80% { transform: scale(1.03) translate(-1px, -2px); }
100% { transform: scale(1.03) translate(0px); }
} .team-image-wrapp {
position: relative;
z-index: 2;
padding-top: 98px;
}
.team-scials {
display: flex;
justify-content: center;
gap: 10px;
position: absolute;
top: 20px;
left: 0;
right: 0;
z-index: 4;
} .social-link-2 {
display: flex;
align-items: center;
justify-content: center;
background: #2a2a2a;
padding: 8px;
border-radius: 6px;
transition: all 0.3s ease;
}
.social-link-2:hover {
background-color: #dc5f00;
box-shadow: 0 0 10px #dc5f00;
}
.social-link-2:hover img {
filter: brightness(200%) grayscale(1);
} .team-details {
margin-top: 15px;
z-index: 2;
position: relative;
text-align: center;
}
.team-heading {
color: #fff;
font-size: 24px;
font-weight: 600;
}
.team-job {
font-size: 20px;
color: #dc5f00;
margin-top: 4px;
} .services-item .service-img img {
transition: transform 0.3s ease;
}
.services-item:hover .service-img img {
transform: scale(1.03);
}
.services-item .service-nunmber {
transition: background-color 0.3s ease, color 0.3s ease;
}
.services-item:hover .service-nunmber {
background-color: #dc5f00;
color: #fff;
}
.single-post-text-cell {
background: rgba(41, 41, 41, 0.5); border: 1px solid #292929;
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 10px;
padding: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }
.widget_archive ul li a {
color: #ccc;
text-decoration: none;
position: relative;
padding-left: 5px;
transition: all 0.3s ease;
}
.widget_archive ul li a::before {
content: '▶';
position: absolute;
left: 5px;
color: #dc5f00;
opacity: 0;
transform: scale(0.5);
transition: all 0.3s ease;
}
.widget_archive ul li a:hover {
color: #dc5f00;
font-weight: 400;
letter-spacing: 0.5px;
}
.widget_archive ul li a:hover::before {
opacity: 1;
transform: scale(1);
}
.inner-footer {
background: linear-gradient(135deg, #1a1a1afc 0%, #1111118a 100%);
border: 1px solid #292929;
border-radius: 10px;
padding: 60px 40px;
box-shadow: 0 0 40px rgba(220, 95, 0, 0.1);
position: relative;
overflow: hidden;
}
.inner-footer::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(135deg, transparent 40%, rgba(255, 102, 0, 0.05), transparent 60%);
transform: rotate(25deg);
animation: diagonal-move 12s linear infinite;
pointer-events: none;
}
@keyframes diagonal-move {
0% {
transform: translateX(-50%) rotate(25deg);
}
100% {
transform: translateX(50%) rotate(25deg);
}
}
.mail-link:hover,
.phone-link:hover {
color: #dc5f00;
text-shadow: 0 0 8px #dc5f00;
}
.social-link {
display: flex;
align-items: center;
gap: 6px;
background: #1c1c1c;
padding: 10px 16px;
border-radius: 8px;
border: 1px solid #333;
color: #aaa;
transition: all 0.3s ease;
box-shadow: inset 0 0 0 transparent;
}
.social-link:hover {
background: #dc5f00;
color: #111;
transform: translateY(-2px) scale(1.05);
box-shadow: 0 0 10px #dc5f00;
}
.social-arrow {
width: 14px;
filter: brightness(0) invert(1);
transition: transform 0.3s ease;
}
.social-link:hover .social-arrow {
transform: rotate(45deg);
filter: brightness(1) saturate(2);
}