/* Main styling to give a base structure to work from for the designs. */ body,html{ padding:0;margin:0;text-align:center;width:100%;height: 100%; min-height: 100%; font-family:arial,sans-serif; font-size: 12px; background-color: #fff; } *:focus { outline: none; } #headerbackground { position: absolute; top: 0px; left: 0px; width: 100%; text-align: center; z-index: 110; } #headerposition { width: 100%; margin: auto; } #headerfix { position: relative; top: 0px; left: 0px; width: 100%; } #headercenter { position: absolute; top: 0px; left: 0px; width: 100%; } #headerleft { position: absolute; top: 0px; left: 0px; z-index: 120; } #headerright { position: absolute; top: 0px; right: 0px; z-index: 110; } #searchfullscreenclose { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10100; background-color: rgba(0,0,0,0.2); display: none; } #searchheader { position: fixed; top: 0px; left: 0px; width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; z-index: 10200; background-color: #fff; height: 70px; text-align: center; display: none; } #searchheaderposition { margin: auto; width: 100%; max-width: 600px; } #searchheadericon { float: left; height: 22px; margin-right: 10px; margin-top: 24px; } #searchheadericon svg { height: 100%; width: auto; display: block; } #searchrequest { float: left; padding: 10px; background: none; border: 1px solid #000; width: calc(100% - 86px); font-size: 13px; margin-top: 17px; } #searchcloseicon { float: left; height: 22px; cursor: pointer; margin-left: 10px; margin-top: 24px; } #searchcloseicon svg { height: 100%; width: auto; display: block; } #footercontainer { position: relative; top: 0px; left: 0px; width: 100%; z-index: 100; } #footerbackground { float: left; width: 100%; text-align: center; z-index: 80; } #footerposition { width: 100%; margin: auto; } #footerfix { position: relative; top: 0px; left: 0px; width: 100%; } #footercenter { position: relative; top: 0px; left: 0px; width: 100%; text-align: center; } #footerleft { position: absolute; top: 0px; left: 0px; z-index: 100; } #footerright { position: absolute; top: 0px; right: 0px; z-index: 90; } #editfooterdesign { position: fixed; bottom: 0px; left: 0px; font-size: 13px; padding: 10px; border-top-right-radius: 7px; background-color: #FA4D0A; color: #fff; z-index: 9999; cursor: pointer; opacity: 0; transition: all 0.3s linear; } #editfooterdesign img { float: left; margin-right: 10px; height: 15px; display: block; } #footerbackground:hover #editfooterdesign { opacity: 1; } #footerright #footersocial, #footerright #footerbutton { float: right; } #footerleft #footersocial, #footerleft #footerbutton { float: left; } #footerright #footermenu { text-align: right; } #footerleft #footermenu { text-align: left; } #footerbuttonposition { display: inline-block; } #footerbuttonfix { position: relative; } #footerbutton a { position: relative; display: inline-block; color: #000; text-decoration: none; z-index: 10; margin: 0px; line-height: 100%; } #footersocial a, #footericons span { display: inline-block; cursor: pointer; } #footersocial img, #footericons img { height: 30px; display: block; } #footersocial svg, #footericons svg { height: 30px; display: block; } a#footerfirstsocial, span#footerfirsticon { margin-left: 0px; } #footericons div, #footersocial div { display: inline-block; cursor: pointer; } .halfwidthtextpadding, .overlaymaxwidth, .halfwidthtextpadding, .textcontents { outline: 0px solid transparent; } .textcontents { float: left; width: 100%; } .buttoncontents { float: left; width: 100%; } .textborder { float: left; width: 100%; } .contentlinkplacement { float: left; width: 100%; } #footermenu { display: block; text-align: center; overflow: hidden; } #footermenuposition { display: inline-block; text-align: center; } .verticalmenu ul, .horizontalmenu ul { margin: 0px; padding: 0px; } .horizontalmenu div { display: block; } .horizontalmenu p { display: block; margin: 0px; padding: 0px; line-height: 100%; position: relative; text-align: center; } .horizontalmenu li { display: inline-block; font-size: 15px; margin: 0px; padding: 0px; line-height: 80%; position: relative; } .horizontalmenu a { display: block; text-decoration: none; padding-left: 0px; padding-right: 0px; position: relative; z-index: 10; } .verticalmenu div { display: inline-block; vertical-align: top; } .verticalmenu p { display: block; margin: 0px; padding: 0px; line-height: 100%; position: relative; text-align: left; } .verticalmenu li { display: block; margin: 0px; padding: 0px; line-height: 100%; position: relative; text-align: left; } .verticalmenu a { display: inline-block; text-decoration: none; padding-left: 0px; padding-right: 0px; position: relative; z-index: 10; } .reordercontents, .reordercontents a { cursor: move; } .over { opacity: 0.5; } #footercopyright { display: block; text-align: center; } #footercopyrightposition { display: inline-block; } #footertext { display: block; text-align: center; } #footertext p { margin-top: 0px; padding-top: 0px; } #footertextposition { display: inline-block; } #footerleft #footercopyright, #footerleft #footertext { text-align: left; } #footerright #footercopyright, #footerright #footertext { text-align: right; } #footerlogos { display: block; text-align: center; } #footerlogoposition { display: inline-block; } #footerlogoposition div { display: inline-block; vertical-align: middle; } #footerlogoposition a { display: inline-block; text-decoration: none; } #footerlogoposition img { display: block; height: 35px; } #mobileheaderbackground { position: absolute; top: 0px; left: 0px; width: 100%; text-align: center; display: none; z-index: 90; } #mobileheaderposition { width: 100%; margin: auto; } #mobileheaderfix { position: relative; top: 0px; left: 0px; width: 100%; } #mobileheadercenter { position: absolute; top: 0px; left: 0px; width: 100%; } #mobileheaderleft { position: absolute; top: 0px; left: 0px; z-index: 100; } #mobileheaderright { position: absolute; top: 0px; right: 0px; z-index: 90; } #editheaderdesign { position: absolute; top: 0px; left: 0px; font-size: 13px; padding: 10px; border-bottom-right-radius: 7px; background-color: #FA4D0A; color: #fff; z-index: 9999; cursor: pointer; opacity: 0; transition: all 0.3s linear; } #editheaderdesign img { float: left; margin-right: 10px; height: 15px; display: block; } #editsidebardesign { position: absolute; top: 80px; left: -60px; font-size: 13px; padding: 10px; border-bottom-right-radius: 7px; background-color: #FA4D0A; color: #fff; z-index: 9999; cursor: pointer; opacity: 0; transition: all 0.3s linear; transform: rotate(270deg) translateY(-0%); -webkit-transform: rotate(270deg) translateY(-0%); -ms-transform: rotate(270deg) translateY(-0%); } #editsidebardesign img { float: left; margin-right: 10px; height: 15px; display: block; } #headerbackground:hover #editheaderdesign { opacity: 1; } #sidebarposition:hover #editsidebardesign { opacity: 1; } #headermenu { display: inline-block; } #headermenu ul { margin: 0px; padding: 0px; display: inline-block; } #headermenu li { display: inline-block; font-size: 15px; margin: 0px; padding: 0px; line-height: 80%; position: relative; } #headermenu a { display: block; text-decoration: none; padding-left: 0px; padding-right: 0px; position: relative; z-index: 10; } span.headermenuline { position: absolute; top: 25%; right: 0px; height: 50%; z-index: 11; display: block; opacity: 1; } span.headermenubackground { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: all 0.5s linear; } #headermenu ul li:hover span.headermenubackground { opacity: 1; } .headermenuhighlightborder { display: inline-block; } span.headersubmenubackground { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: all 0.5s linear; } #headermenu ul ul li:hover span.headersubmenubackground { opacity: 1; } #headermenu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0px; z-index: 598; width: 220px; text-align: left; } #headermenu ul ul li { position: relative; float: none; display: block; margin: 0px; } #headermenu ul ul li a { float: none; display: block; margin: 0px; } #headermenu ul li:hover > ul { visibility: visible; } #headerbutton { float: right; overflow: hidden; } #headerbuttonfix { position: relative; } #headerbutton a { position: relative; display: inline-block; color: #000; text-decoration: none; z-index: 10; margin: 0px; line-height: 100%; } #headermobilebuttoncontainer { width: 100%; margin: auto; text-align: left; max-width: 400px; } #headermobilebutton { margin-top: 30px; margin-left: 20px; margin-bottom: 30px; } #mobileheaderleft #headermobilebutton { display: inline-block; overflow: hidden; } #mobileheaderright #headermobilebutton { display: inline-block; overflow: hidden; } #headermobilebuttonfix { position: relative; } #headermobilebutton a { position: relative; display: inline-block; color: #000; text-decoration: none; z-index: 10; margin: 0px; line-height: 100%; } #headermobilelogo { color: #000; text-decoration: none; z-index: 10030; } #headermobilelogo img { display: block; } /*Sidebar Styling */ #sidebarbackground { position: fixed; top: 0px; width: 50%; min-height: 100%; max-width: 250px; display: none; z-index: 84; } #sidebarposition { position: fixed; top: 0px; width: 50%; max-width: 250px; display: none; z-index: 85; min-height: 100%; } .leftsidebar { left: 0px; right: auto; } .rightsidebar { right: 0px; left: auto; } #sidebarlogoposition, #sidebarbuttonposition, #sidebarmenuposition, #sidebarsocialposition { float: left; width: 100%; } .leftsidebar #sidebarbutton, .leftsidebar #sidebarsocial, .leftsidebar #sidebarlogo, .leftsidebar #sidebaricons { float: left; } .rightsidebar #sidebarbutton, .rightsidebar #sidebarsocial, .rightsidebar #sidebarlogo, .rightsidebar #sidebaricons { float: right; } .leftsidebar #sidebarmenu { float: left; text-align: left; } .rightsidebar #sidebarmenu { float: right; text-align: right; } #sidebarlogoposition a { text-decoration: none; } #sidebarmenu { display: none; } #sidebarmenu ul { margin: 0px; padding: 0px; } #sidebarmenu li { display: block; margin: 0px; padding: 0px; line-height: 100%; position: relative; } #sidebarmenu a { display: block; text-decoration: none; padding-left: 0px; padding-right: 0px; position: relative; z-index: 10; } span.sidebarmenubackground { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 0.5s linear; } #sidebarmenu ul li:hover span.sidebarmenubackground { opacity: 1; } span.sidebarsubmenubackground { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 0.5s linear; } #sidebarmenu ul ul li:hover span.sidebarsubmenubackground { opacity: 1; } #sidebarmenu ul ul { display: none; position: absolute; top: 0px; z-index: 598; text-align: left; } .leftsidebar #sidebarmenu ul ul { left: 100%; } .rightsidebar #sidebarmenu ul ul { right: 100%; left: auto; } #sidebarmenu ul ul li { position: relative; float: none; display: block; margin: 0px; white-space: nowrap; } #sidebarmenu ul ul li a { float: none; display: block; margin: 0px; } #sidebarmenu ul li:hover > ul { display: block; } #sidebarright #sidebarsocial, #sidebarright #sidebaricons, #mobilesidebarright #sidebarmobileicons { float: right; } #sidebarleft #sidebarlogo, #sidebarleft #sidebarsocial, #sidebarleft #sidebaricons, #mobilesidebarleft #sidebarmobileicons { float: left; } #sidebarlogo img { display: block; width: 100%; } #sidebarbutton { overflow: hidden; } #sidebarbuttonfix { position: relative; } #sidebarbutton a { position: relative; display: inline-block; color: #000; text-decoration: none; z-index: 10; margin: 0px; line-height: 100%; } #sidebarsocial a, #sidebaricons span { display: inline-block; margin-left: 10px; cursor: pointer; } #sidebarsocial img, #sidebaricons img { height: 30px; display: block; } #sidebarsocial svg, #sidebaricons svg { height: 30px; display: block; } a#sidebarfirstsocial, span#sidebarfirsticon { margin-left: 0px; } .leftsidebar #sidebaricons div, .leftsidebar #sidebarsocial div { display: inline-block; cursor: pointer; float: left; } .rightsidebar #sidebaricons div, .rightsidebar #sidebarsocial div { display: inline-block; cursor: pointer; float: right; } div#headermenu .hidelink { display: none; } .titleimage { margin: auto; width: 90%; max-width: 500px; } .titleimage img { display: block; width: 100%; } .overlaycentre { display: inline-block; margin: auto; } /*Mobile menu styling*/ #mobilemenufix { position: absolute; top: 0px; left: 0px; width: 100%; min-height: 100%; display: none; } .fullwidthfade { position: absolute; top: 0px; left: 0px; width: 100%; min-height: 100%; background-color: rgba(255,255,255,0.8); z-index: 10010; -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; display: none; opacity: 0; overflow: auto; } .fullwidthslide { position: absolute; top: 0px; left: 0px; width: 100%; min-height: 100%; background-color: rgba(255,255,255,0.8); z-index: 10010; -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: translate3d(0, 0, 0) translateX(100%); -moz-transform: translate3d(0, 0, 0) translateX(100%); -o-transform: translate3d(0, 0, 0) translateX(100%); transform: translate3d(0, 0, 0) translateX(100%); display: none; opacity: 0; overflow: auto; } .halfwidthfade { position: absolute; top: 0px; right: 0px; width: 100%; max-width: 300px; min-height: 100%; background-color: rgba(255,255,255,0.8); z-index: 10010; -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; display: none; opacity: 0; overflow: auto; } .halfwidthslide { position: absolute; top: 0px; right: 0px; width: 100%; max-width: 300px; min-height: 100%; background-color: rgba(255,255,255,0.8); z-index: 10010; -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: translate3d(0, 0, 0) translateX(100%); -moz-transform: translate3d(0, 0, 0) translateX(100%); -o-transform: translate3d(0, 0, 0) translateX(100%); transform: translate3d(0, 0, 0) translateX(100%); display: none; opacity: 0; overflow: auto; } .fullwidthfade.menucontentsopen { opacity: 1; } .fullwidthslide.menucontentsopen { opacity: 1; } .halfwidthfade.menucontentsopen { opacity: 1; } .halfwidthslide.menucontentsopen { opacity: 1; } .halfwidthslide.menucontentsopen, .fullwidthslide.menucontentsopen { -webkit-transform: translate3d(0, 0, 0) translateX(0%); -moz-transform: translate3d(0, 0, 0) translateX(0%); -o-transform: translate3d(0, 0, 0) translateX(0%); transform: translate3d(0, 0, 0) translateX(0%); } #mobilemenumargin { float: left; width: 100%; margin: 0px; } #mobilemenumargin p { margin: 0px; padding: 0px; text-align: left; padding: 20px; padding-top: 0px; padding-bottom: 30px; display: block; } #mobilemenumargin a { color: #000; text-decoration: none; display: block; } #mobilemenumargin span.submenutext { display: inline-block; } #mobilemenumargin span.submenuarrow { display: inline-block; width: 20px; height: 20px; margin-left: 20px; margin-right: 20px; } #mobilemenumargin svg { float: right; display: inline-block; height: 20px; width: auto; } #headerleft #headerdesktopmenuiconlocation { float: left; } #headerright #headerdesktopmenuiconlocation { float: right; } #headerdesktopmenuiconlocation { display: none; } #mobileheaderleft #headermobilemenuiconlocation { float: left; display: none; } #mobileheaderright #headermobilemenuiconlocation { float: right; display: none; } #mobilemenuiconposition { display: none; z-index: 10030; } #mobilemenuicon { position: relative; top: 0px; left: 0px; cursor: pointer; } .menuiconwidth20 { width: 20px; height: 20px; } .menuiconwidth30 { width: 30px; height: 30px; } .menuiconwidth40 { width: 40px; height: 40px; } #mobilemenubackground { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10010; opacity: 1; background-color: rgba(0,0,0,0.1); display: none; } .mobilesubmenu { float: left; width: calc(100% - 50px); margin-left: 50px; display: none; } #mobilemenucontents { float: left; width: 100%; z-index: 10020; opacity: 0; -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; text-align: center; } #mobilemenucontainer { display: inline-block; width: 100%; max-width: 400px; } #mobilemenuimage { float: left; width: calc(100% - 40px); margin-left: 20px; z-index: 10020; } #mobilemenuimage img { width: 100%; max-width: 200px; text-align: center; } #videobackground { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 20000; background-color: rgba(0,0,0,0.5); display: none; } .videoembedfix { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 20010; display: table; } .videoembedposition { display: table-cell; width: 100%; height: 100%; vertical-align: middle; } .videoembedbox { width: 96%; max-width: 1000px; margin: auto; background-color: #000; } /*Mobile Icon 1*/ .previewmenuTwotab1 { position: absolute; background-color: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .previewmenuTwotab2 { position: absolute; background-color: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .menuiconwidth20.menuiconthickness1 .previewmenuTwotab1 { top: 4px; right: 0px; width: 20px; height: 1px; } .menuiconwidth20.menuiconthickness1 .previewmenuTwotab2 { top: 15px; right: 0px; width: 20px; height: 1px; } .menuiconwidth20.menuiconthickness2 .previewmenuTwotab1 { top: 4px; right: 0px; width: 20px; height: 2px; } .menuiconwidth20.menuiconthickness2 .previewmenuTwotab2 { top: 14px; right: 0px; width: 20px; height: 2px; } .menuiconwidth20.menuiconthickness3 .previewmenuTwotab1 { top: 3px; right: 0px; width: 20px; height: 3px; } .menuiconwidth20.menuiconthickness3 .previewmenuTwotab2 { top: 14px; right: 0px; width: 20px; height: 3px; } .menuiconwidth20.menuopen .previewmenuTwotab1 { top: 9px; transform: rotate(45deg) translateY(-0%); -webkit-transform: rotate(45deg) translateY(-0%); -ms-transform: rotate(45deg) translateY(-0%); } .menuiconwidth20.menuopen .previewmenuTwotab2 { top: 9px; transform: rotate(-45deg) translateY(-0%); -webkit-transform: rotate(-45deg) translateY(-0%); -ms-transform: rotate(-45deg) translateY(-0%); } .menuiconwidth30.menuiconthickness1 .previewmenuTwotab1 { top: 8px; right: 0px; width: 30px; height: 1px; } .menuiconwidth30.menuiconthickness1 .previewmenuTwotab2 { top: 20px; right: 0px; width: 30px; height: 1px; } .menuiconwidth30.menuiconthickness2 .previewmenuTwotab1 { top: 8px; right: 0px; width: 30px; height: 2px; } .menuiconwidth30.menuiconthickness2 .previewmenuTwotab2 { top: 20px; right: 0px; width: 30px; height: 2px; } .menuiconwidth30.menuiconthickness3 .previewmenuTwotab1 { top: 8px; right: 0px; width: 30px; height: 3px; } .menuiconwidth30.menuiconthickness3 .previewmenuTwotab2 { top: 20px; right: 0px; width: 30px; height: 3px; } .menuiconwidth30.menuopen .previewmenuTwotab1 { top: 14px; transform: rotate(45deg) translateY(-0%); -webkit-transform: rotate(45deg) translateY(-0%); -ms-transform: rotate(45deg) translateY(-0%); } .menuiconwidth30.menuopen .previewmenuTwotab2 { top: 14px; transform: rotate(-45deg) translateY(-0%); -webkit-transform: rotate(-45deg) translateY(-0%); -ms-transform: rotate(-45deg) translateY(-0%); } .menuiconwidth40.menuiconthickness1 .previewmenuTwotab1 { top: 12px; right: 0px; width: 40px; height: 1px; } .menuiconwidth40.menuiconthickness1 .previewmenuTwotab2 { top: 26px; right: 0px; width: 40px; height: 1px; } .menuiconwidth40.menuiconthickness2 .previewmenuTwotab1 { top: 10px; right: 0px; width: 40px; height: 2px; } .menuiconwidth40.menuiconthickness2 .previewmenuTwotab2 { top: 26px; right: 0px; width: 40px; height: 2px; } .menuiconwidth40.menuiconthickness3 .previewmenuTwotab1 { top: 10px; right: 0px; width: 40px; height: 3px; } .menuiconwidth40.menuiconthickness3 .previewmenuTwotab2 { top: 26px; right: 0px; width: 40px; height: 3px; } .menuiconwidth40.menuopen .previewmenuTwotab1 { top: 19px; transform: rotate(45deg) translateY(-0%); -webkit-transform: rotate(45deg) translateY(-0%); -ms-transform: rotate(45deg) translateY(-0%); } .menuiconwidth40.menuopen .previewmenuTwotab2 { top: 19px; transform: rotate(-45deg) translateY(-0%); -webkit-transform: rotate(-45deg) translateY(-0%); -ms-transform: rotate(-45deg) translateY(-0%); } /*Mobile Icons 2 and 3*/ .previewmenuThreeRotate1, .previewmenuThreeSlide1 { position: absolute; background-color: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .previewmenuThreeRotate2, .previewmenuThreeSlide2 { position: absolute; background-color: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .previewmenuThreeRotate3, .previewmenuThreeSlide3 { position: absolute; background-color: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .menuiconwidth20.menuiconthickness1 .previewmenuThreeRotate1, .menuiconwidth20.menuiconthickness1 .previewmenuThreeSlide1 { top: 1px; left: 0px; width: 20px; height: 1px; } .menuiconwidth20.menuiconthickness1 .previewmenuThreeRotate2, .menuiconwidth20.menuiconthickness1 .previewmenuThreeSlide2 { top: 10px; left: 0px; width: 20px; height: 1px; } .menuiconwidth20.menuiconthickness1 .previewmenuThreeRotate3, .menuiconwidth20.menuiconthickness1 .previewmenuThreeSlide3 { top: 19px; left: 0px; width: 20px; height: 1px; } .menuiconwidth20.menuiconthickness2 .previewmenuThreeRotate1, .menuiconwidth20.menuiconthickness2 .previewmenuThreeSlide1 { top: 1px; left: 0px; width: 20px; height: 2px; } .menuiconwidth20.menuiconthickness2 .previewmenuThreeRotate2, .menuiconwidth20.menuiconthickness2 .previewmenuThreeSlide2 { top: 10px; left: 0px; width: 20px; height: 2px; } .menuiconwidth20.menuiconthickness2 .previewmenuThreeRotate3, .menuiconwidth20.menuiconthickness2 .previewmenuThreeSlide3 { top: 19px; left: 0px; width: 20px; height: 2px; } .menuiconwidth20.menuiconthickness3 .previewmenuThreeRotate1, .menuiconwidth20.menuiconthickness3 .previewmenuThreeSlide1 { top: 1px; left: 0px; width: 20px; height: 3px; } .menuiconwidth20.menuiconthickness3 .previewmenuThreeRotate2, .menuiconwidth20.menuiconthickness3 .previewmenuThreeSlide2 { top: 10px; left: 0px; width: 20px; height: 3px; } .menuiconwidth20.menuiconthickness3 .previewmenuThreeRotate3, .menuiconwidth20.menuiconthickness3 .previewmenuThreeSlide3 { top: 19px; left: 0px; width: 20px; height: 3px; } .menuiconwidth20.menuopen .previewmenuThreeRotate1 { top: 9px; transform: rotate(45deg) translateY(-0%); -webkit-transform: rotate(45deg) translateY(-0%); -ms-transform: rotate(45deg) translateY(-0%); } .menuiconwidth20.menuopen .previewmenuThreeRotate2 { opacity: 0; } .menuiconwidth20.menuopen .previewmenuThreeRotate3 { top: 9px; transform: rotate(-45deg) translateY(-0%); -webkit-transform: rotate(-45deg) translateY(-0%); -ms-transform: rotate(-45deg) translateY(-0%); } .menuiconwidth20.menuopen .previewmenuThreeSlide1 { left: -3px; } .menuiconwidth20.menuopen .previewmenuThreeSlide2 { left: 3px; } .menuiconwidth20.menuopen .previewmenuThreeSlide3 { left: -3px; } .menuiconwidth30.menuiconthickness1 .previewmenuThreeRotate1, .menuiconwidth30.menuiconthickness1 .previewmenuThreeSlide1 { top: 2px; left: 0px; width: 30px; height: 1px; } .menuiconwidth30.menuiconthickness1 .previewmenuThreeRotate2, .menuiconwidth30.menuiconthickness1 .previewmenuThreeSlide2 { top: 15px; left: 0px; width: 30px; height: 1px; } .menuiconwidth30.menuiconthickness1 .previewmenuThreeRotate3, .menuiconwidth30.menuiconthickness1 .previewmenuThreeSlide3 { top: 28px; left: 0px; width: 30px; height: 1px; } .menuiconwidth30.menuiconthickness2 .previewmenuThreeRotate1, .menuiconwidth30.menuiconthickness2 .previewmenuThreeSlide1 { top: 2px; left: 0px; width: 30px; height: 2px; } .menuiconwidth30.menuiconthickness2 .previewmenuThreeRotate2, .menuiconwidth30.menuiconthickness2 .previewmenuThreeSlide2 { top: 15px; left: 0px; width: 30px; height: 2px; } .menuiconwidth30.menuiconthickness2 .previewmenuThreeRotate3, .menuiconwidth30.menuiconthickness2 .previewmenuThreeSlide3 { top: 28px; left: 0px; width: 30px; height: 2px; } .menuiconwidth30.menuiconthickness3 .previewmenuThreeRotate1, .menuiconwidth30.menuiconthickness3 .previewmenuThreeSlide1 { top: 2px; left: 0px; width: 30px; height: 3px; } .menuiconwidth30.menuiconthickness3 .previewmenuThreeRotate2, .menuiconwidth30.menuiconthickness3 .previewmenuThreeSlide2 { top: 15px; left: 0px; width: 30px; height: 3px; } .menuiconwidth30.menuiconthickness3 .previewmenuThreeRotate3, .menuiconwidth30.menuiconthickness3 .previewmenuThreeSlide3 { top: 28px; left: 0px; width: 30px; height: 3px; } .menuiconwidth30.menuopen .previewmenuThreeRotate1 { top: 14px; transform: rotate(45deg) translateY(-0%); -webkit-transform: rotate(45deg) translateY(-0%); -ms-transform: rotate(45deg) translateY(-0%); } .menuiconwidth30.menuopen .previewmenuThreeRotate2 { opacity: 0; } .menuiconwidth30.menuopen .previewmenuThreeRotate3 { top: 14px; transform: rotate(-45deg) translateY(-0%); -webkit-transform: rotate(-45deg) translateY(-0%); -ms-transform: rotate(-45deg) translateY(-0%); } .menuiconwidth30.menuopen .previewmenuThreeSlide1 { left: -5px; } .menuiconwidth30.menuopen .previewmenuThreeSlide2 { left: 5px; } .menuiconwidth30.menuopen .previewmenuThreeSlide3 { left: -5px; } .menuiconwidth40.menuiconthickness1 .previewmenuThreeRotate1, .menuiconwidth40.menuiconthickness1 .previewmenuThreeSlide1 { top: 5px; left: 0px; width: 40px; height: 1px; } .menuiconwidth40.menuiconthickness1 .previewmenuThreeRotate2, .menuiconwidth40.menuiconthickness1 .previewmenuThreeSlide2 { top: 20px; left: 0px; width: 40px; height: 1px; } .menuiconwidth40.menuiconthickness1 .previewmenuThreeRotate3, .menuiconwidth40.menuiconthickness1 .previewmenuThreeSlide3 { top: 35px; left: 0px; width: 40px; height: 1px; } .menuiconwidth40.menuiconthickness2 .previewmenuThreeRotate1, .menuiconwidth40.menuiconthickness2 .previewmenuThreeSlide1 { top: 5px; left: 0px; width: 40px; height: 2px; } .menuiconwidth40.menuiconthickness2 .previewmenuThreeRotate2, .menuiconwidth40.menuiconthickness2 .previewmenuThreeSlide2 { top: 20px; left: 0px; width: 40px; height: 2px; } .menuiconwidth40.menuiconthickness2 .previewmenuThreeRotate3, .menuiconwidth40.menuiconthickness2 .previewmenuThreeSlide3 { top: 35px; left: 0px; width: 40px; height: 2px; } .menuiconwidth40.menuiconthickness3 .previewmenuThreeRotate1, .menuiconwidth40.menuiconthickness3 .previewmenuThreeSlide1 { top: 5px; left: 0px; width: 40px; height: 3px; } .menuiconwidth40.menuiconthickness3 .previewmenuThreeRotate2, .menuiconwidth40.menuiconthickness3 .previewmenuThreeSlide2 { top: 20px; left: 0px; width: 40px; height: 3px; } .menuiconwidth40.menuiconthickness3 .previewmenuThreeRotate3, .menuiconwidth40.menuiconthickness3 .previewmenuThreeSlide3 { top: 35px; left: 0px; width: 40px; height: 3px; } .menuiconwidth40.menuopen .previewmenuThreeRotate1 { top: 19px; transform: rotate(45deg) translateY(-0%); -webkit-transform: rotate(45deg) translateY(-0%); -ms-transform: rotate(45deg) translateY(-0%); } .menuiconwidth40.menuopen .previewmenuThreeRotate2 { opacity: 0; } .menuiconwidth40.menuopen .previewmenuThreeRotate3 { top: 19px; transform: rotate(-45deg) translateY(-0%); -webkit-transform: rotate(-45deg) translateY(-0%); -ms-transform: rotate(-45deg) translateY(-0%); } .menuiconwidth40.menuopen .previewmenuThreeSlide1 { left: -5px; } .menuiconwidth40.menuopen .previewmenuThreeSlide2 { left: 5px; } .menuiconwidth40.menuopen .previewmenuThreeSlide3 { left: -5px; } /*Mobile Icon 4*/ .previewmenuThreeArrow1 { position: absolute; background-color: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .previewmenuThreeArrow2 { position: absolute; background-color: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .previewmenuThreeArrow3 { position: absolute; background-color: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .menuiconwidth20.menuiconthickness1 .previewmenuThreeArrow1 { top: 1px; right: 0px; width: 20px; height: 1px; } .menuiconwidth20.menuiconthickness1 .previewmenuThreeArrow2 { top: 10px; right: 0px; width: 20px; height: 1px; } .menuiconwidth20.menuiconthickness1 .previewmenuThreeArrow3 { top: 19px; right: 0px; width: 20px; height: 1px; } .menuiconwidth20.menuiconthickness2 .previewmenuThreeArrow1 { top: 1px; right: 0px; width: 20px; height: 2px; } .menuiconwidth20.menuiconthickness2 .previewmenuThreeArrow2 { top: 10px; right: 0px; width: 20px; height: 2px; } .menuiconwidth20.menuiconthickness2 .previewmenuThreeArrow3 { top: 19px; right: 0px; width: 20px; height: 2px; } .menuiconwidth20.menuiconthickness3 .previewmenuThreeArrow1 { top: 1px; right: 0px; width: 20px; height: 3px; } .menuiconwidth20.menuiconthickness3 .previewmenuThreeArrow2 { top: 10px; right: 0px; width: 20px; height: 3px; } .menuiconwidth20.menuiconthickness3 .previewmenuThreeArrow3 { top: 19px; right: 0px; width: 20px; height: 3px; } .menuiconwidth20.menuopen .previewmenuThreeArrow1 { top: 4px; right: -2px; width: 15px; transform: rotate(45deg) translateY(-0%); -webkit-transform: rotate(45deg) translateY(-0%); -ms-transform: rotate(45deg) translateY(-0%); } .menuiconwidth20.menuopen .previewmenuThreeArrow3 { top: 15px; right: -2px; width: 15px; transform: rotate(-45deg) translateY(-0%); -webkit-transform: rotate(-45deg) translateY(-0%); -ms-transform: rotate(-45deg) translateY(-0%); } .menuiconwidth30.menuiconthickness1 .previewmenuThreeArrow1 { top: 2px; right: 0px; width: 30px; height: 1px; } .menuiconwidth30.menuiconthickness1 .previewmenuThreeArrow2 { top: 15px; right: 0px; width: 30px; height: 1px; } .menuiconwidth30.menuiconthickness1 .previewmenuThreeArrow3 { top: 28px; right: 0px; width: 30px; height: 1px; } .menuiconwidth30.menuiconthickness2 .previewmenuThreeArrow1 { top: 2px; right: 0px; width: 30px; height: 2px; } .menuiconwidth30.menuiconthickness2 .previewmenuThreeArrow2 { top: 15px; right: 0px; width: 30px; height: 2px; } .menuiconwidth30.menuiconthickness2 .previewmenuThreeArrow3 { top: 28px; right: 0px; width: 30px; height: 2px; } .menuiconwidth30.menuiconthickness3 .previewmenuThreeArrow1 { top: 2px; right: 0px; width: 30px; height: 3px; } .menuiconwidth30.menuiconthickness3 .previewmenuThreeArrow2 { top: 15px; right: 0px; width: 30px; height: 3px; } .menuiconwidth30.menuiconthickness3 .previewmenuThreeArrow3 { top: 28px; right: 0px; width: 30px; height: 3px; } .menuiconwidth30.menuopen .previewmenuThreeArrow1 { top: 8px; right: -3px; width: 20px; transform: rotate(45deg) translateY(-0%); -webkit-transform: rotate(45deg) translateY(-0%); -ms-transform: rotate(45deg) translateY(-0%); } .menuiconwidth30.menuopen .previewmenuThreeArrow3 { top: 22px; right: -3px; width: 20px; transform: rotate(-45deg) translateY(-0%); -webkit-transform: rotate(-45deg) translateY(-0%); -ms-transform: rotate(-45deg) translateY(-0%); } .menuiconwidth40.menuiconthickness1 .previewmenuThreeArrow1 { top: 5px; right: 0px; width: 40px; height: 1px; } .menuiconwidth40.menuiconthickness1 .previewmenuThreeArrow2 { top: 20px; right: 0px; width: 40px; height: 1px; } .menuiconwidth40.menuiconthickness1 .previewmenuThreeArrow3 { top: 35px; right: 0px; width: 40px; height: 1px; } .menuiconwidth40.menuiconthickness2 .previewmenuThreeArrow1 { top: 5px; right: 0px; width: 40px; height: 2px; } .menuiconwidth40.menuiconthickness2 .previewmenuThreeArrow2 { top: 20px; right: 0px; width: 40px; height: 2px; } .menuiconwidth40.menuiconthickness2 .previewmenuThreeArrow3 { top: 35px; right: 0px; width: 40px; height: 2px; } .menuiconwidth40.menuiconthickness3 .previewmenuThreeArrow1 { top: 5px; right: 0px; width: 40px; height: 3px; } .menuiconwidth40.menuiconthickness3 .previewmenuThreeArrow2 { top: 20px; right: 0px; width: 40px; height: 3px; } .menuiconwidth40.menuiconthickness3 .previewmenuThreeArrow3 { top: 35px; right: 0px; width: 40px; height: 3px; } .menuiconwidth40.menuopen .previewmenuThreeArrow1 { top: 11px; right: -4px; width: 25px; transform: rotate(45deg) translateY(-0%); -webkit-transform: rotate(45deg) translateY(-0%); -ms-transform: rotate(45deg) translateY(-0%); } .menuiconwidth40.menuopen .previewmenuThreeArrow3 { top: 29px; right: -4px; width: 25px; transform: rotate(-45deg) translateY(-0%); -webkit-transform: rotate(-45deg) translateY(-0%); -ms-transform: rotate(-45deg) translateY(-0%); } #headerbuttonfix { position: relative; top: 0px; left: 0px; } #headerbuttonbackground { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; transition: all 0.5s linear; z-index: 1; opacity: 0; } #headerbutton:hover #headerbuttonbackground { opacity: 1; } #sidebarbuttonfix { position: relative; top: 0px; left: 0px; } #sidebarbuttonbackground { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; transition: all 0.5s linear; z-index: 1; opacity: 0; } #sidebarbutton:hover #sidebarbuttonbackground { opacity: 1; } #headerlogo { color: #000; text-decoration: none; display: inline-block; } #headerlogo img { display: block; } #headerright #headersocial, #headerright #headersearch, #headerright #headercart, #headerright #headerlogin, #headerright #headericons, #mobileheaderright #headermobileicons { float: right; } #headerleft #headerlogo, #headerleft #headersocial, #headerleft #headersearch, #headerleft #headercart, #headerleft #headerlogin, #headerleft #headericons, #mobileheaderleft #headermobileicons { float: left; } .leftsidebar #sidebarsearch, .leftsidebar #sidebarcart, .leftsidebar #sidebarlogin { float: left; } .rightsidebar #sidebarsearch, .rightsidebar #sidebarcart, .rightsidebar #sidebarlogin { float: right; } #mobileheaderleft #headermobilesearch, #mobileheaderleft #headermobilecart { float: left; } #mobileheaderright #headermobilesearch, #mobileheaderright #headermobilecart { float: right; } #headersocial a, #headericons span { display: inline-block; cursor: pointer; } #headersocial img, #headericons img { height: 30px; display: block; } #headersocial svg, #headericons svg { height: 30px; display: block; } a#headerfirstsocial, span#headerfirsticon { margin-left: 0px; } #headericons div, #headersocial div, #headermobilesocial div { display: inline-block; cursor: pointer; } #headermobilesocial { text-align: left; margin-top: 40px; margin-bottom: 30px; float: left; width: 100%; } #mobileheaderleft .headermobilesocialicons { float: left; margin-right: 20px; } #mobileheaderright .headermobilesocialicons { float: left; margin-left: 20px; } #headersearch span, #headercart span, #headerlogin span, #sidebarsearch span, #sidebarcart span, #sidebarlogin span, #headermobilesearch span, #headermobilecart span, #headermobilelogin span { display: inline-block; cursor: pointer; } #headersearch a, #headercart a, #headerlogin a, #sidebarsearch a, #sidebarcart a, #sidebarlogin a, #headermobilesearch a, #headermobilecart a, #headermobilelogin a { display: inline-block; cursor: pointer; } #headersearch img, #headercart img, #headerlogin img, #sidebarsearch img, #sidebarcart img, #sidebarlogin img, #headermobilesearch img, #headermobilecart img { height: 30px; display: block; width: auto; } #headersearch svg, #headercart svg, #headerlogin svg, #sidebarsearch svg, #sidebarcart svg, #sidebarlogin svg, #headermobilesearch svg, #headermobilecart svg { height: 30px; display: block; width: auto; } #headermobilesocial { float: left; width: 100%; } #headermobilesocial a, #headermobileicons span { display: inline-block; margin-left: 10px; margin-right: 10px; cursor: pointer; } #headermobilesocial img, #headermobileicons img { height: 30px; display: block; } #headermobilesocial svg, #headermobileicons svg { height: 30px; display: block; } /* Parallax Animations */ .parallaxanimation { -webkit-transform: translate3d(0, 0%, 0) translateY(0%); transform: translate3d(0, 0%, 0) translateY(0%); opacity: 1; transition: transform 1.2s ease-out, opacity 1.2s ease-out; } .animatecontentsdown { -webkit-transform: translate3d(0, 50px, 0) translateY(0%); transform: translate3d(0, 50px, 0) translateY(0%); opacity: 1; transition: transform 1.2s ease-out, opacity 1.2s ease-out; } .animatecontentsup { -webkit-transform: translate3d(0, -50px, 0) translateY(0%); transform: translate3d(0, -50px, 0) translateY(0%); opacity: 1; transition: transform 1.2s ease-out, opacity 1.2s ease-out; } /* Content Fade In */ .contentfade { transition: transform 2s ease-out, opacity 2s ease-out; opacity: 1; } .contentfaded { transition: transform 2s ease-out, opacity 2s ease-out; opacity: 0; } div#maincontents { float: left; width: 100%; height: 100%; } div#pagecontents { float: left; width: 100%; height: 100%; } div#positioncontents { float: left; width: 100%; min-height: 80%; } div.contentmodule { float: left; width: 100%; } /*Default Module Containers*/ .modulecontainer { float: left; width: 100%; } .modulebackgroundpadding { text-align: left; float: left; width: 100%; } .modulewidth { margin: auto; width: 100%; text-align: justify; } .outermodulewidth { margin: auto; width: 100%; text-align: justify; } .fullwidthcontentsfix { position: relative; top: 0px; left: 0px; width: 100%; overflow: visible; } .clickthroughheight { height: 500px; } .sizefiximage svg { width: 100%; height: auto; display: block; } .contenteditingtoolsposition { float: left; width: 100%; z-index: 100; opacity: 0; } .contenteditingtools { position: relative; top: 0px; left: 0px; width: 100%; z-index: 100; } .addtoolsposition { z-index: 110; } .editingtoolsleft { position: absolute; top: 20px; right: 20px; } .editingtoolsright { position: absolute; top: 20px; left: 20px; } .contentseditoutline { position: absolute; top: 0px; left: 0px; width: 100%; height: 0px; border-top: 1px dashed #000; } .modulecontainer:hover .contenteditingtoolsposition { opacity: 1; } .stylebuttons { float: left; text-align: center; font-size: 15px; letter-spacing: 2px; font-weight: 600; padding: 12px; cursor: pointer; opacity: 1; margin-left: 0px; margin-top: 0px; margin-right: 15px; background-color: rgba(255,255,255,0.8); border: 1px solid #333; border-radius: 7px; color: #000; text-decoration: none; line-height: 100%; -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; } .stylebuttons span { margin-left: 8px; margin-top: 4px; display: inline-block; } .stylebuttons img { height: 22px; float: left; } .stylebuttons:hover { background-color: #fff; border: 1px solid #000; } .editbuttons { float: left; text-align: center; width: 27px; height: 27px; padding: 10px; cursor: pointer; opacity: 1; margin-left: 0px; margin-top: 0px; margin-right: 15px; background-color: rgba(255,255,255,0.8); border: 1px solid #333; border-radius: 7px; color: #000; text-decoration: none; line-height: 100%; -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; } .editbuttons img { height: 27px; float: left; } .editbuttons:hover { background-color: #fff; border: 1px solid #000; } .addcontentsbutton { position: absolute; top: -20px; left: 50%; width: 40px; height: 40px; margin-left: -20px; cursor: pointer; display: block; border-radius: 50%; border: 1px solid #333; opacity: 0.8; } .addcontentsbutton img { display: block; width: 100%; padding: 0px; margin: 0px; } .addcontentsbutton:hover { border: 1px solid #000; opacity: 1; } .editimagebutton { position: absolute; bottom: 10px; left: 10px; width: 26px; height: 26px; padding: 10px; cursor: pointer; display: block; border-radius: 7px; border: 1px solid #333; background-color: rgba(255,255,255,0.8); display: none; } .editimagebutton img { display: block; width: 100%; padding: 0px; margin: 0px; } .editimagebutton:hover { border: 1px solid #000; background-color: rgba(255,255,255,1); } .deleteimagebutton { position: absolute; bottom: 10px; left: 70px; width: 26px; height: 26px; padding: 10px; cursor: pointer; display: block; border-radius: 7px; border: 1px solid #333; background-color: rgba(255,255,255,0.8); display: none; } .deleteimagebutton img { display: block; width: 100%; padding: 0px; margin: 0px; } .deleteimagebutton:hover { border: 1px solid #000; background-color: rgba(255,255,255,1); } .rowcontainer:hover .editimagebutton, .gridcontainer:hover .editimagebutton, .rowcontainer:hover .deleteimagebutton, .gridcontainer:hover .deleteimagebutton { display: block; } .rotate45 { transform: rotate(45deg) translateY(-0%); -webkit-transform: rotate(45deg) translateY(-0%); -ms-transform: rotate(45deg) translateY(-0%); } .rotate90 { transform: rotate(90deg) translateY(-0%); -webkit-transform: rotate(90deg) translateY(-0%); -ms-transform: rotate(90deg) translateY(-0%); } .rotate135 { transform: rotate(135deg) translateY(-0%); -webkit-transform: rotate(135deg) translateY(-0%); -ms-transform: rotate(135deg) translateY(-0%); } .rotate180 { transform: rotate(180deg) translateY(-0%); -webkit-transform: rotate(180deg) translateY(-0%); -ms-transform: rotate(180deg) translateY(-0%); } .rotate225 { transform: rotate(225deg) translateY(-0%); -webkit-transform: rotate(225deg) translateY(-0%); -ms-transform: rotate(225deg) translateY(-0%); } .rotate270 { transform: rotate(270deg) translateY(-0%); -webkit-transform: rotate(270deg) translateY(-0%); -ms-transform: rotate(270deg) translateY(-0%); } .rotate315 { transform: rotate(315deg) translateY(-0%); -webkit-transform: rotate(315deg) translateY(-0%); -ms-transform: rotate(315deg) translateY(-0%); } .embedcontents { position: relative; padding: 0px; margin: 0px; height: 0; } .embedcontents iframe, .fullscreenembed iframe, .embedcontents video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; border: 0px; } .fullscreenembed video { position: absolute; top: 50%; left: 50%; min-width: 101%; min-height: 101%; width: auto; height: auto; z-index: 100; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .aspect16-9 { padding-bottom: 56.25%; /* 16:9 */ } .aspect21-9 { padding-bottom: 42.85%; /* 21:9 */ } .aspect9-16 { padding-bottom: 177.77%; /* 9:16 */ } .aspect4-3 { padding-bottom: 75%; /* 4:3 */ } .aspect1-1 { padding-bottom: 100%; /* 1:1 */ } div.fullscreenembed { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; z-index: 1; } .halfwidthmodule { display: flex; align-items: start; } .halfwidthimage { flex: 1; } .halfwidthtext { flex: 1; } .rowimage { display: inline-block; width: 100%; margin-bottom: -4px; } .rowfixposition { position: relative; top: 0px; left: 0px; } .rowimage img, .rowimage svg { width: 100%; height: auto; display: block; padding: 0px; margin: 0px; } .rowcontainer { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } .rowimageposition { position: relative; top: 0px; left: 0px; width: 100%; height: 100%; background: no-repeat center center; background-size: cover; transition: all 0.4s ease-out; } .rowcontainer a.lightboxgallery, .gridcontainer a.lightboxgallery, .rowcontainer a.lightboxgallery { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: none; } .rowcontainer a.imagelink, .gridcontainer a.imagelink, .rowcontainer a.imagelink { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; } .imagecolumns { display: block; width: 100%; } .column2container { display: inline-block; width: 100%; } .imagecolumnsgrid { display: flex; flex-direction: column; width: 100%; } .textbelowimage { display: block; width: 100%; } .columnsgrid { display: grid; grid-template-columns: repeat(3, 1fr); } /*Image effect styling*/ .imagegrid { float: left; margin: 0px; width: 100%; } .gridposition { float: left; margin: 0px; padding: 0px; width: 50%; } .desktopgrid1 { width: 100%; } .desktopgrid2 { width: 50%; } .desktopgrid3 { width: 33.33333333333333%; } .desktopgrid4 { width: 25%; } .desktopgrid5 { width: 20%; } .desktopgrid6 { width: 16.66666666666667%; } .desktopgrid7 { width: 14.28571428571429%; } .desktopgrid8 { width: 12.5%; } .desktopgrid9 { width: 11.11111111111111%; } .desktopgrid10 { width: 10%; } div.gridcontainer { position: relative; top: 0px; left: 0px; width: 100%; height: 0; padding-bottom: 100%; text-align: center; display: table; } .fullscreenmodule { height: 100%; background-color: #fff; } .fullscreenmodulefix { position: relative; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } .fullscreenimage { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background: no-repeat top center; overflow: hidden; background-size: cover; opacity: 0; transition: opacity 4s ease; z-index: 1; -webkit-background-size: cover; } .displayimage { opacity: 1; z-index: 2; transition: opacity 3s ease; } .fullwidthcontentsfix .prevarrow { position: absolute; top: 50%; left: 10px; height: 40px; margin-top: -20px; z-index: 10; cursor: pointer; } .fullwidthcontentsfix .nextarrow { position: absolute; top: 50%; right: 10px; height: 40px; margin-top: -20px; z-index: 10; cursor: pointer; transform: rotate(180deg) translateY(-0%); -webkit-transform: rotate(180deg) translateY(-0%); -ms-transform: rotate(180deg) translateY(-0%); } .fullwidthcontentsfix .prevarrow svg, .fullwidthcontentsfix .nextarrow svg { display: block; height: 100%; width: auto; transition: all 0.5s ease; } .rowcontainer { text-align: center; } .imagetextposition p { margin: 0px; padding: 0px; } .fullscreenscrollicon { position: absolute; bottom:0px; left:50%; height:36px; width:36px; margin-left: -18px; z-index: 6; cursor: pointer; } .scrolliconfix { position: relative; top: 0px; left: 0px; width: 100%; height: 100%; display: block; } .mousescrollicon { position: absolute; top: 0px; left: 6px; width: 22px; height: 32px; border: 2px solid #fff; border-radius: 12px; } .mousescrollanimation { position: absolute; top: 8px; left: 17px; width: 3px; height: 6px; background-color: #fff; animation-name: mousescrollpreview; animation-duration: 1.3s; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-timing-function: ease-in-out; animation-play-state: running; } @keyframes mousescrollpreview { 0% { -webkit-transform: translate3d(0, 0%, 0) translateY(0%); transform: translate3d(0, 0%, 0) translateY(0%); } 50% { -webkit-transform: translate3d(0, 14px, 0) translateY(0%); transform: translate3d(0, 14px, 0) translateY(0%); } 100% { -webkit-transform: translate3d(0, 0%, 0) translateY(0%); transform: translate3d(0, 0%, 0) translateY(0%); } } .circlescrollicon { position: absolute; top: 0px; left: 0px; width: 32px; height: 32px; border: 2px solid #fff; border-radius: 50px; } .circlescrollanimation { position: absolute; top: 8px; left: 14px; width: 8px; height: 8px; background-color: #fff; border-radius: 50px; animation-name: circlebouncepreview; animation-duration: 1.3s; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-timing-function: ease-in-out; animation-play-state: running; } @keyframes circlebouncepreview { 0% { -webkit-transform: translate3d(0, 0%, 0) translateY(0%); transform: translate3d(0, 0%, 0) translateY(0%); } 50% { -webkit-transform: translate3d(0, 14px, 0) translateY(0%); transform: translate3d(0, 14px, 0) translateY(0%); } 100% { -webkit-transform: translate3d(0, 0%, 0) translateY(0%); transform: translate3d(0, 0%, 0) translateY(0%); } } .arrowscrollanimation { position: absolute; top: 0px; left: 0px; width: 36px; height: 36px; animation-name: arrowbouncepreview; animation-duration: 1.3s; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-timing-function: ease-in-out; animation-play-state: running; } .arrowscrollanimation img, .arrowscrollanimation svg { display: block; margin: 0px; padding: 0px; width: 100%; height: auto; } @keyframes arrowbouncepreview { 0% { -webkit-transform: translate3d(0, 0%, 0) translateY(0%); transform: translate3d(0, 0%, 0) translateY(0%); } 50% { -webkit-transform: translate3d(0, 8px, 0) translateY(0%); transform: translate3d(0, 8px, 0) translateY(0%); } 100% { -webkit-transform: translate3d(0, 0%, 0) translateY(0%); transform: translate3d(0, 0%, 0) translateY(0%); } } .arrowscrollanimation .iconfill { fill: #fff; } /*Fade in animation*/ .fadein { opacity: 0; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -ms-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .gridfix:hover .fadein { opacity: 1; } .rowcontainer:hover .fadein { opacity: 1; } .fullscreenmodulefix:hover .fadein { opacity: 1; } /*Slide in animation*/ .slidein { -webkit-transform: translate3d(0, 100%, 0) translateY(0%); transform: translate3d(0, 100%, 0) translateY(0%); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .slidein.overlaytop { -webkit-transform: translate3d(0, -100%, 0) translateY(0%); transform: translate3d(0, -100%, 0) translateY(0%); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .gridfix:hover .slidein { -webkit-transform: translate3d(0, 0%, 0) translateY(0%); transform: translate3d(0, 0%, 0) translateY(0%); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .rowcontainer:hover .slidein { -webkit-transform: translate3d(0, 0%, 0) translateY(0%); transform: translate3d(0, 0%, 0) translateY(0%); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .fullscreenmodulefix:hover .slidein { -webkit-transform: translate3d(0, 0%, 0) translateY(0%); transform: translate3d(0, 0%, 0) translateY(0%); -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; -ms-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; transition: all 0.6s ease-out; } /*Fix Grid and image positions*/ .gridfix { position: absolute; top: 0px; left: 0px; padding: 0px; width: 100%; height: 100%; background-color: #fff; border: 0px; } .gridfix .gridimage { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } .gridfix .landscape img { height: 100%; width: auto; } .gridfix .portrait img { width: 100%; height: auto; } /*Overlay default styling*/ .fullscreenoverlay { position: absolute; bottom: 0px; left: 0px; width: calc(100% - 80px); z-index: 2; text-align: center; padding: 40px; } .fulloverlay { display: table; height: 100%; } .fulloverlay .overlayposition { display: table-cell; vertical-align: middle; text-align: center; } .overlaymaxwidth { max-width: 500px; margin: auto; } .baseoverlay .overlayposition { margin-bottom: 70px; } .fullscreenoverlay p { text-align: justify; color: #fff; line-height: 120%; margin: 0px; padding: 0px; padding-top: 5px; padding-bottom: 5px; font-family: arial; font-size: 16px; } .fixposition { position: relative; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } .gridoverlay { display: none; background-color: rgba(0,0,0,0.6); } .overlayfull { position: absolute; top: 0px; left: 0px; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 100%; display: table; } .overlaycenter { position: absolute; top: 0px; left: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 100%; display: table; } .overlaytop { position: absolute; top: 0px; left: 0px; padding: 10px; width: calc(100% - 20px); display: table; } .overlaybase { position: absolute; bottom: 0px; left: 0px; padding: 10px; width: calc(100% - 20px); display: table; } .overlayleft { position: absolute; top: 0px; left: 0px; padding: 10px; width: calc(50% - 20px); height: calc(100% - 20px); display: table; } .overlayright { position: absolute; top: 0px; right: 0px; left: auto; padding: 10px; width: calc(50% - 20px); height: calc(100% - 20px); display: table; } .imagetextposition { display: table-cell; width: 100%; line-height: 100%; vertical-align: middle; } .imagetextposition { color: #fff; } .alwaysvisible { display: table; } .hidecontents { display: none; } .imageoverlay { position: absolute; top: 0px; left: 0px; padding: 0px; width: 100%; height: 100%; display: block; filter: sepia(0) grayscale(0); } .logovertical { display: table; } .portrait .logogridposition { display: table-cell; vertical-align: middle; } .imagecolumnstextbelow { display: block; width: 100%; } .imagecolumnstextbelow p { margin: 0px; padding: 0px; } /*Zoom in animation*/ div.zoomin { transform: scale(1); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } div.zoomin:hover, .gridcontainer:hover div.zoomin { transform: scale(1.03); } /*Slide Up Animation*/ .slideup { -webkit-transform: translate3d(0, 0%, 0) translateY(0%); transform: translate3d(0, 0%, 0) translateY(0%); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } div.slideup:hover, .gridcontainer:hover div.slideup { -webkit-transform: translate3d(0, -12px, 0) translateY(0%); transform: translate3d(0, -12px, 0) translateY(0%); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } /*Slide Down Animation*/ div.slidedown { -webkit-transform: translate3d(0, 0%, 0) translateY(0%); transform: translate3d(0, 0%, 0) translateY(0%); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } div.slidedown:hover, .gridcontainer:hover div.slidedown { -webkit-transform: translate3d(0, 12px, 0) translateY(0%); transform: translate3d(0, 12px, 0) translateY(0%); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } /*Default image transition speed*/ .gridposition img { -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -ms-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } /*Colour to Sepia Transition*/ .colourtosepia { filter: sepia(0); } .colourtosepia:hover { filter: sepia(100%); } /*Colour to Grayscale Transition*/ .colourtograyscale { filter: grayscale(0); } .colourtograyscale:hover { filter: grayscale(100%); } /*Grayscale*/ .grayscale { filter: grayscale(100%); } /*Grayscale to Colour Transition*/ .grayscaletocolour { filter: grayscale(100%); } .grayscaletocolour:hover { filter: grayscale(0); } /*Grayscale to Sepie Transition*/ .grayscaletosepia { filter: sepia(50%) grayscale(100%); } .grayscaletosepia:hover { filter: sepia(100%); } /*Sepia*/ .sepia { filter: sepia(100%); } /*Sepia to Colour Transition*/ .sepiatocolour { filter: sepia(100%); } .sepiatocolour:hover { filter: sepia(0); } /*Sepia to Grayscale Transition*/ .sepiatograyscale { filter: grayscale(50%) sepia(100%); } .sepiatograyscale:hover { filter: grayscale(100%); } /*Separate Module and text for testing*/ .separatemodule { float: left; width: calc(100% - 40px); padding: 20px; text-align: center; background-color: #666; } .separatemoduletext { margin: auto; width: 100%; max-width: 400px; font-family: arial; color: #fff; font-size: 13px; } /*Dashboard page styling*/ .dashboardpage { float: left; width: 100%; min-height: 100%; background-color: #fff; } #dashboardheader { float: left; width: 100%; background-color: #fff; } #dashboardheaderpadding { float: left; width: 100%; } #dashboardheaderposition { margin: auto; width: 100%; } #dashboardheader h3 { text-align: left; float: left; margin: 0px; padding: 0px; line-height: 100%; } #dashboardheaderright { float: right; } .dashboardicons { float: right; height: 30px; margin-left: 20px; } .dashboardicons svg { height: 100%; width: auto; } .dashboardaccounticon { display: none; } #dashboardname { float: right; padding: 0px; margin: 0px; line-height: 100%; margin-top: 6px; } #dashboardcontent { float: left; width: 100%; } #dashboardcontentpadding { float: left; width: 100%; } #dashboardcontentposition { margin: auto; width: 100%; display: grid; grid-template-columns: auto auto; } #fullwidthdashboardcontentposition { margin: auto; width: 100%; column-count: 1; column-gap: 10px; } .dashboardbox { display: inline-block; width: 100%; text-align: left; } .dashboardboxpadding { padding: 10px; } .dashboardbuttonposition { margin-top: 20px; } .dashboardbutton { display: inline-block; padding: 10px; color: #fff; background-color: #000; text-decoration: none; } .dashboardlogoutbuttonposition { float: right; } .orderdetails { width: 120px; } .dashboardpages { float: left; width: 100%; text-align: left; padding-top: 20px; } .dashboardpagegrid { float: left; width: calc(25% - 40px); padding-right: 40px; padding-bottom: 40px; } .dashboardpagetext { position: absolute; bottom: 0px; left: 0px; width: calc(100% - 40px); padding: 20px; background-color: #000; text-align: left; } .dashboardpagetext h4 { color: #fff; font-size: 15px; margin: 0px; padding: 0px; line-height: 100%; } .dashboardtable { width: 100%; border-collapse: collapse; } .dashboardtableheader td { border-top: 1px solid #000; border-bottom: 1px solid #000; } .dashboardtabledata td { border-bottom: 1px solid #000; } #dashboardwelcome { margin: auto; width: 100%; text-align: left; margin-top: 0px; margin-bottom: 0px; padding: 0px; } #dashboardwelcome h3 { margin: 0px; padding: 0px; line-height: 100%; font-size: 16px; } #dashboardwelcomepadding { float: left; width: 100%; margin-top: 0px; margin-bottom: 0px; padding: 0px; } /*Cart page styling*/ .cartpage { float: left; width: 100%; min-height: 100%; background-color: #fff; } #cartpadding { padding: 20px; margin-bottom: 20px; float: left; width: calc(100% - 40px); } #cartposition { margin: auto; text-align: left; max-width: 1300px; } #cartheading { text-align: center; font-size: 18px; } .basket { float: left; width: 100%; margin-bottom: 20px; } .baskettitles { float: left; width: calc(100% - 40px); padding: 20px; background-color: #ccc; font-size: 15px; font-weight: bold; color: #333; } .basketitemtitle { float: left; width: calc(100% - 390px); } .basketpricetitle { float: left; width: 130px; } .basketqtytitle { float: left; width: 130px; } .baskettotaltitle { float: left; width: 130px; } .basketitems { float: left; width: calc(100% - 40px); padding: 20px; background-color: #eee; font-size: 14px; font-weight: 300; color: #333; border-bottom: 1px solid #ccc; } .basketitem { float: left; width: calc(100% - 390px); } .basketprice { float: left; width: 130px; } .basketqty { float: left; width: 130px; } .baskettotal { float: left; width: 130px; } .basket_thumbnail { float: left; width: 150px; height: 150px; text-align: center; margin-right: 20px; } .backetportrait { height: 100%; width: auto; display: inline-block; } .basketlandscape { width: 100%; height: auto; } #deliverydetails { font-size: 18px; } #deliveryform { margin-top: 20px; margin-bottom: 20px; float: left; width: 100%; } #deliveryform p { margin: 0px; padding: 0px; margin-bottom: 10px; } .cartformtextbox { padding: 10px; width: calc(100% - 22px); border: 1px solid #333; color: #333; } .cartformselect { padding: 10px; width: 100%; border: 1px solid #333; background-color: #fff; color: #333; } .fullwidthform { float: left; width: 100%; margin-bottom: 20px; } .leftform { float: left; width: 49%; } .rightform { float: right; width: 49%; } #yourorder { font-size: 18px; } .yourordertitle { width: 170px; padding: 10px; padding-left: 0px; font-size: 16px; } .yourordervalue { padding: 10px; font-size: 16px; } .totalcartprice { font-weight: 600; } #backetcheckoutposition { margin-top: 40px; margin-bottom: 40px; } #basketcheckout { display: inline-block; padding: 15px; background-color: #333; color: #fff; border-radius: 7px; cursor: pointer; } .cartmobile { display: none; } .cartitemname { font-weight: bold; } .buttoncontainer { display: inline-block; cursor: pointer; overflow: hidden; background: #eee; } .buttoncontainer a, .buttoncontainer input { position: relative; display: inline-block; color: #000; text-decoration: none; z-index: 10; margin: 0px; line-height: 100%; padding: 20px; border: 0px; background: none; cursor: pointer; text-align: center; } .buttonstylefix { position: relative; top: 0px; left: 0px; } .buttonbackground { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; opacity: 0; } .buttoncontainer:hover .buttonbackground { opacity: 1; } .accordianmenu { float: left; width: 100%; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .accordianmenu :focus { outline: none; } .accordiantab { float: left; width: 100%; cursor: pointer; -webkit-transition: background-color 0.3s ease, border 0.3s ease; -moz-transition: background-color 0.3s ease, border 0.3s ease; -ms-transition: background-color 0.3s ease, border 0.3s ease; -o-transition: background-color 0.3s ease, border 0.3s ease; transition: background-color 0.3s ease, border 0.3s ease; } .accordianicon { float: left; display: block; width: 20px; height: 20px; margin-right: 20px; } .accordianiconfix { position: relative; top: 0px; left: 0px; width: 100%; height: 100%; display: block; } .accordianplusvertical { position: absolute; top: 50%; left: 50%; width: 2px; height: 20px; margin-left: -1px; margin-top: -9px; background-color: #000; -webkit-transition: transform 0.3s ease, background-color 0.3s ease; -moz-transition: transform 0.3s ease, background-color 0.3s ease; -ms-transition: transform 0.3s ease, background-color 0.3s ease; -o-transition: transform 0.3s ease, background-color 0.3s ease; transition: transform 0.3s ease, background-color 0.3s ease; } .accordianplushorizontal { position: absolute; top: 9px; left: 0%; width: 20px; height: 2px; background-color: #000; -webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease; -ms-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .accordiantitle { float: left; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; width: calc(100% - 50px); } .accordianbox { display: none; float: left; width: 100%; } div.fullbleedimages { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } div.fullbleedclickthroughimage { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; opacity: 0; } div.fullbleedshowclickthroughimage { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; opacity: 1; } div.clickthroughimagefullbleed { position: relative; height: 100%; width: 100%; } .clickthroughimagefullbleed img, .clickthroughimagefullbleed img { width: 100%; height: 100%; display: block; } img.portraitimages { object-fit: contain; } img.landscapeimages { object-fit: cover; } .modulewidth ul, .modulewidth ol { padding: 0px; margin-left: 10px; } .modulewidth li { padding-left: 0px; margin-left: 0px; } .expandingimagecontainer { display: flex; width: 100%; height: 500px; overflow: hidden; } .expandingimagepanel { flex: 1; background-size: cover; background-position: center; transition: flex 0.6s ease, filter 0.6s ease; position: relative; } .expandingimagepanel::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.4); transition: background 0.6s ease; } .expandingimagepanel.active { flex: 5; } .expandingimagepanel.active::after { background: rgba(0,0,0,0); } .expandingimagepanel.inactive { flex: 0.5; } .fullscreenexpandingimagecontainer { display: flex; width: 100%; height: 100%; overflow: hidden; } /******************* Scrolling Text Styling *******************/ :root { --speed: 90; /* pixels per second */ --content-width: 0px; /* set by JS */ --duration: 10s; /* set by JS */ } .ticker { position: relative; overflow: hidden; white-space: nowrap; } .ticker__track { display: inline-flex; align-items: center; will-change: transform; animation: scroll var(--duration) linear infinite; } .ticker__content { display: inline-block; padding-right: 3rem; /* gap between repeats */ } .ticker:hover .ticker__track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; transform: none !important; } } @keyframes scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--content-width)), 0, 0); } } .scrollingtextcontents h1, .scrollingtextcontents h2, .scrollingtextcontents h3, .scrollingtextcontents h4, .scrollingtextcontents h5, .scrollingtextcontents P, .scrollingtextcontents li { display: inline-block; } #blogmenuposition { float: left; width: 100%; text-align: center; } #blogmenu { display: inline-block; width: 100%; } #blogmenu ul { margin: 0px; padding: 0px; } #blogmenu li { display: inline-block; font-size: 15px; margin: 0px; padding: 0px; line-height: 80%; position: relative; } #blogmenu a { display: block; text-decoration: none; padding-left: 0px; padding-right: 0px; position: relative; z-index: 10; } span.blogmenuline { position: absolute; top: 25%; left: 0px; height: 50%; z-index: 11; display: block; opacity: 1; } .blogmenuhighlightborder { display: inline-block; } .categorymenucontainer { float: left; width: 100%; } .categorymenubox { float: left; width: 100%; } .categorymenubox h2 { margin: 0px; padding: 0px; color: #000; } .categorymenubox p { margin: 0px; padding: 0px; color: #000; text-decoration: none; } .categorymenubox a { margin: 0px; padding: 0px; color: #000; text-decoration: none; display: inline-block; } /********************* Form Error messages *********************/ div.formerrorcontainer { float: left; width: 100%; margin-top: 20px; margin-bottom: 0px; } div.formerrortitle { width: calc(100% - 40px); max-width: 760px; padding: 20px; border: 1px solid #f00; background-color: #f00; float: left; border-radius: 7px; } .formerrortitle span { text-align: left; margin: 0px; padding: 0px; font-size: 16px; color: #fff; margin-top: 3px; } .formerrortitle img { float: left; height: 24px; width: auto; display: block; margin-right: 15px; } .formcontents form { margin: 0px; padding: 0px; } p.formquestion { margin: 0px; padding: 0px; line-height: 100%; } /********************* Form Success message *********************/ div.formsuccesscontainer { float: left; width: 100%; margin-top: 20px; margin-bottom: 20px; } div.formsuccesstitle { width: calc(60% - 40px); max-width: 760px; padding: 20px; border: 1px solid #3FA444; background-color: #3FA444; float: left; border-radius: 7px; } .formsuccesstitle span { text-align: left; margin: 0px; padding: 0px; font-size: 16px; color: #fff; margin-top: 3px; } .formsuccesstitle img { float: left; height: 24px; width: auto; display: block; margin-right: 15px; } /********************* Form Checkbox Styling *********************/ .fixcheckbox { position: relative; top: 0; left: 0; width: 100%; display: table; height: 35px; margin-top: 8px; } .customcheckbox { display: block; position: relative; top: 0; left: 0; width: 100%; min-height: 35px; max-height: 35px; overflow: hidden; padding-left: 0px; margin-bottom: 5px; cursor: pointer; font-size: 16px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .customcheckbox input[type="checkbox"] { height: 0; width: 0; opacity: 0; cursor: pointer; overflow: hidden; } .customcheckmark { position: absolute; top: 0; left: 0; height: 30px; width: 30px; background-color: #fff; border: 1px solid #666; border-radius: 7px; } .positioncheckboxtext3 { float: left; margin-top: 8px; padding: 0px; font-size: 15px; margin-left: 40px; } .customcheckbox .customcheckmark:after { position: absolute; left: 10px; top: 3px; width: 7px; height: 17px; border: solid #fff; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .customcheckbox input:checked ~ .customcheckmark::after { display: block; } .customcheckbox:hover input ~ .customcheckmark{background-color:#eee} .customcheckbox input:checked ~ .customcheckmark{background-color:#333;border:1px solid #333} .customcheckmark:after{content:"";position:absolute;display:none} .customcheckbox input:checked ~ .customcheckmark:after{display:block} .multiplechoicecolumns { column-count: 2; column-gap: 50px; } /*---------------------------------------- 700px breakpoint (mobile screens) ----------------------------------------*/ @media screen and (max-width:700px) { .multiplechoicecolumns { column-count: 1; column-gap: 0px; } } div.formbox { float: left; width: 100%; } div.highlighterror { padding: 20px; border: 1px solid #f00; background-color: #FDF2F2; width: calc(100% - 42px); margin-top: 20px; margin-bottom: 20px; } div.formerrormessages { margin-top: 20px; margin-bottom: 20px; font-size: 15px; color: #f00; font-weight: bold; } .formconfirmation { display: none; } /************************* Form Short Answer Styling *************************/ input.shortanswer { text-align: left; font-size: 14px; font-weight: 300; line-height: 100%; margin: 0px; color: #000; width: calc(100% - 2px); border: 1px solid #333; background-color: #fff; color: #000; } /************************* Form Longer Answer Styling *************************/ textarea.longeranswer { text-align: left; font-size: 14px; font-weight: 300; line-height: 100%; margin: 0px; padding: 0px; color: #000; width: calc(100% - 2px); border: 1px solid #333; background-color: #fff; color: #000; resize: none; height: 200px; } /************************* Form Drop-Down Answer Styling *************************/ select.dropdownanswer { text-align: left; font-size: 14px; font-weight: 300; line-height: 100%; margin: 0px; padding: 0px; color: #000; width: 100%; border: 1px solid #333; background-color: #fff; color: #000; } /************************* Form Date Answer Styling *************************/ input.dateanswer { text-align: left; font-size: 14px; font-weight: 300; line-height: 100%; margin: 0px; padding: 0px; color: #000; border: 1px solid #333; background-color: #fff; } /************************* Parallax Animation Styling *************************/ div.parallaxscrollbackground { float: left; width: 100%; height: 500px; transition: background .35s ease-in-out; } /*---------------------------------------- 900px breakpoint (mobile screens) ----------------------------------------*/ @media screen and (max-width:900px) { .basketitemtitle { width: calc(100% - 340px); } .basketpricetitle { width: 110px; } .basketqtytitle { width: 110px; } .baskettotaltitle { width: 110px; } .basketitem { width: calc(100% - 340px); } .basketprice { width: 110px; } .basketqty { width: 110px; } .baskettotal { width: 110px; } #yourorder, #deliverydetails, #cartheading { font-size: 17px; } .baskettitles, .basketitems, #deliveryform p, #basketcheckout { font-size: 14px; } } /*---------------------------------------- 800px breakpoint (mobile screens) ----------------------------------------*/ @media screen and (max-width:800px) { #cartpadding { padding: 20px; } .basketitemtitle { width: 100%; } .basketpricetitle { display: none; } .basketqtytitle { display: none; } .baskettotaltitle { display: none; } .basketitem { width: calc(100% - 150px); } .basketprice { width: 140px; margin-bottom: 10px; margin-left: 10px; } .basketqty { width: 140px; margin-left: 10px; margin-bottom: 10px; } .baskettotal { width: 140px; margin-left: 10px; margin-bottom: 10px; } .cartmobile { display: inline-block; width: 50px; font-weight: bold; } .basketitems { font-size: 13px; } .leftform { width: 100%; margin-bottom: 20px; } .rightform { width: 100%; } .cartitemname { float: left; display: block; width: 100%; } .basket_thumbnail { float: left; width: 100px; height: auto; text-align: center; margin-right: 0px; margin-bottom: 20px; } .backetportrait { height: auto; width: 100%; display: block; } .basketlandscape { width: 100%; height: auto; display: block; } } /*Orders page styling*/ .orderspage { float: left; width: 100%; min-height: 100%; background-color: #fff; } #orderspadding { padding: 20px; float: left; margin-bottom: 20px; width: calc(100% - 40px); } #ordersposition { margin: auto; text-align: left; max-width: 1300px; } #ordersheading { text-align: center; font-size: 18px; } .order { float: left; width: 100%; margin-bottom: 20px; } .ordertitles { float: left; width: calc(100% - 40px); padding: 20px; background-color: #ccc; font-size: 15px; font-weight: bold; color: #333; } .orderitemtitle { float: left; width: calc(100% - 390px); } .orderpricetitle { float: left; width: 130px; } .orderqtytitle { float: left; width: 130px; } .ordertotaltitle { float: left; width: 130px; } .orderitems { float: left; width: calc(100% - 40px); padding: 20px; background-color: #eee; font-size: 14px; font-weight: 300; color: #333; border-bottom: 1px solid #ccc; } .orderitem { float: left; width: calc(100% - 390px); } .orderprice { float: left; width: 130px; } .orderqty { float: left; width: 130px; } .ordertotal { float: left; width: 130px; } .order_thumbnail { float: left; width: 150px; height: 150px; text-align: center; margin-right: 20px; } .orderportrait { height: 100%; width: auto; display: inline-block; } .orderlandscape { width: 100%; height: auto; } #orderaddresses { margin-top: 20px; margin-bottom: 20px; float: left; width: 100%; } #shippingaddress { font-size: 18px; } #billingaddress { font-size: 18px; } #orderdetails { font-size: 18px; } .ordersmobile { display: none; } .ordersitemname { font-weight: bold; } #fullwidthaddress p { font-size: 16px; } #fullwidthaddress { float: left; width: 100%; margin-bottom: 20px; } #leftaddress { float: left; width: 33.33%; } #middleaddress { float: left; width: 33.33%; } #rightaddress { float: right; width: 33.33%; } #orderdetails { font-size: 18px; } .orderdetailstitle { width: 150px; padding: 10px; padding-left: 0px; font-size: 16px; } .orderdetailsvalue { padding: 10px; font-size: 16px; } .totalorderdetailsprice { font-weight: 600; } #trackorderposition { margin-top: 20px; margin-bottom: 40px; } #trackorder { display: inline-block; padding: 15px; background-color: #333; color: #fff; border-radius: 7px; cursor: pointer; } /*---------------------------------------- 900px breakpoint (mobile screens) ----------------------------------------*/ @media screen and (max-width:900px) { .orderitemtitle { width: calc(100% - 340px); } .orderpricetitle { width: 110px; } .orderqtytitle { width: 110px; } .ordertotaltitle { width: 110px; } .orderitem { width: calc(100% - 340px); } .orderprice { width: 110px; } .orderqty { width: 110px; } .ordertotal { width: 110px; } } /*---------------------------------------- 840px breakpoint (mobile screens) ----------------------------------------*/ @media screen and (max-width:840px) { #leftaddress { width: 100%; } #middleaddress { width: 100%; } #rightaddress { width: 100%; } #orderspadding { padding: 20px; } .orderitemtitle { width: 100%; } .orderpricetitle { display: none; } .orderqtytitle { display: none; } .ordertotaltitle { display: none; } .orderitem { width: calc(100% - 150px); } .orderprice { width: 140px; margin-bottom: 10px; margin-left: 10px; } .orderqty { width: 140px; margin-left: 10px; margin-bottom: 10px; } .ordertotal { width: 140px; margin-left: 10px; margin-bottom: 10px; } .ordersmobile { display: inline-block; width: 50px; font-weight: bold; } .orderitems { font-size: 13px; } .leftform { width: 100%; margin-bottom: 20px; } .rightform { width: 100%; } .ordersitemname { float: left; display: block; width: 100%; } .order_thumbnail { float: left; width: 100px; height: auto; text-align: left; margin-right: 0px; margin-bottom: 20px; } .orderportrait { height: auto; width: 100%; display: block; } .orderlandscape { width: 100%; height: auto; display: block; } } /*Search page styling*/ .searchpage { float: left; width: 100%; min-height: 100%; background-color: #fff; } #searchpadding { padding: 20px; float: left; margin-bottom: 20px; width: calc(100% - 40px); } #searchposition { margin: auto; text-align: left; max-width: 1300px; } #searchheading { text-align: center; font-size: 18px; } .searchitemname { margin-top: 0px; padding-top: 0px; } .searchitemname, .searchprice { font-size: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-top: 0px; } .search { float: left; width: 100%; margin-bottom: 20px; } .searchitems { float: left; width: calc(100% - 80px); padding: 40px; font-size: 14px; font-weight: 300; color: #333; border-bottom: 1px solid #ccc; } .search_thumbnail { float: left; width: 250px; margin-right: 40px; } .search_thumbnail img { width: 100%; height: auto; } .searchtext { float: left; width: calc(100% - 300px); } .searchbutton { display: inline-block; padding: 15px; background-color: #333; color: #fff; border-radius: 7px; cursor: pointer; margin-right: 10px; } .imageseo { width: 0px; height: 0px; overflow: hidden; } /*---------------------------------------- 820px breakpoint (mobile screens) ----------------------------------------*/ @media screen and (max-width:820px) { .searchtext { width: 100%; margin-top: 20px; } } /*---------------------------------------- 600px breakpoint (mobile screens) ----------------------------------------*/ @media screen and (max-width:600px) { .search_thumbnail { float: left; width: 100%; margin-right: 0px; } .searchbuttonmobile { display: block; margin-bottom: 20px; } } /*Account page styling*/ .accountpage { float: left; width: 100%; min-height: 100%; background-color: #fff; } #accountpadding { padding: 20px; float: left; margin-bottom: 20px; width: calc(100% - 40px); } #accountposition { margin: auto; text-align: left; max-width: 1300px; } #accountheading { font-size: 18px; } .accountform { margin-top: 20px; margin-bottom: 20px; float: left; width: 100%; } .accountform p { padding: 0px; margin: 0px; margin-bottom: 10px; } .accountformtextbox { padding: 10px; width: calc(100% - 22px); border: 1px solid #333; color: #333; } .accountformselect { padding: 10px; width: 100%; border: 1px solid #333; background-color: #fff; color: #333; } .accountsaveposition { margin-top: 40px; margin-bottom: 40px; } .accountsavebutton { display: inline-block; padding: 15px; background-color: #333; color: #fff; border-radius: 7px; cursor: pointer; } /*404 page not found styling*/ .notfoundpage { float: left; width: 100%; min-height: 100%; background-color: #fff; background-size: cover; background-position: center; } #notfoundposition { margin: auto; } #title404 { font-size: 50px; padding: 0px; margin-top: 5px; margin-bottom: 5px; } #heading404 { font-size: 22px; padding: 0px; margin-top: 5px; margin-bottom: 5px; } #paragraph404 { font-size: 15px; padding: 0px; margin-top: 5px; margin-bottom: 5px; } #buttonposition404 { margin-top: 40px; } #button404 { font-size: 14px; color: #fff; background-color: #000; padding: 15px; border-radius: 7px; text-decoration: none; display: inline-block; } #image404 img { display: block; width: 100%; } /*Login page not found styling*/ .loginpage { position: relative; width: 100%; height: 100%; background-color: #fff; background-size: cover; background-position: center; } #loginposition { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } #loginheading { font-size: 22px; padding: 0px; margin-top: 5px; margin-bottom: 5px; text-align: center; } #loginposition p { font-size: 15px; padding: 0px; margin-top: 5px; margin-bottom: 5px; line-height: 180%; } #loginposition a { color: #000; } #loginposition input { border: 1px solid #000; padding: 10px; width: calc(100% - 22px); } #loginimage { background-size: cover; background-position: center; } #logintext { margin: auto; text-align: left; } #loginbuttonposition { margin-top: 20px; margin-bottom: 20px; } input#loginbutton, span#loginbutton { font-size: 14px; color: #fff; background-color: #000; padding: 15px; border-radius: 7px; text-decoration: none; display: inline-block; border: 0px; cursor: pointer; width: auto; display: inline-block; } #loginimage img { display: block; width: 100%; } div.textboxcontainer { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; } div.textbox { padding: 15px; box-sizing: border-box; flex: 1 1 calc(50% - 20px); } .textbox img { width: 100%; } /*---------------------------------------- 900px breakpoint (mobile screens) ----------------------------------------*/ @media screen and (max-width:900px) { .tabletgrid1 { width: 100%; } .tabletgrid2 { width: 50%; } .tabletgrid3 { width: 33.33333333333333%; } .tabletgrid4 { width: 25%; } .tabletgrid5 { width: 20%; } .tabletgrid6 { width: 16.66666666666667%; } } /*---------------------------------------- 850px breakpoint (mobile screens) ----------------------------------------*/ @media screen and (max-width:850px) { #dashboardcontentposition { display: block; } .dashboardaccounticon { display: inline-block; } #dashboardname { display: none; } } /*---------------------------------------- 600px breakpoint (mobile screens) ----------------------------------------*/ @media screen and (max-width:600px) { .mobilegrid1 { width: 100%; } .mobilegrid2 { width: 50%; } .mobilegrid3 { width: 33.33333333333333%; } .mobilegrid4 { width: 25%; } .stylebuttons span { display: none; } .stylebuttons { float: left; text-align: center; width: 27px; height: 27px; padding: 10px; cursor: pointer; margin-left: 0px; margin-top: 0px; margin-right: 15px; text-decoration: none; line-height: 100%; } .stylebuttons img { height: 27px; float: left; } }