/********************************************************** // CSS Reset, Vars and Colours **********************************************************/ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ /**:where(:not(html, iframe, canvas, img, svg, video, audio, input):not(svg *, symbol *)) { all: unset; display: revert; } */ /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ /*:where([hidden]) { display: none; } */ /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ /*:where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } */ /* apply back the draggable feature - exist only in Chromium and Safari */ /*:where([draggable="true"]) { -webkit-user-drag: element; } */ /********************************************************** // Fonts **********************************************************/ /********************************************************** // General CSS **********************************************************/ body { background-color: #fff; } /********************************************************** // Page Level Elements **********************************************************/ /* Set width on the form input elements since they're 100% wide by default */ /*input, select, textarea { max-width: 280px; } */ .pageWrapper { width: 100%; overflow: hidden; min-height: 100vh; } .pageContent { background-color: #fff; width: 80%; margin: 0 auto; overflow: hidden; min-height: 60vh; margin-top: 4rem; } .innerPage { margin: 0 auto; width: 100%; min-height: 70vh; } .veryRed { color: #FF0000; } input[type="radio"], input[type="checkbox"] { color: #5E5E5E; accent-color: #5E5E5E; } /********************************************************** // Navigation **********************************************************/ .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: #777; border-color: #fff; } .navbar-collapse ul { margin-top: 1rem; } .navbar-collapse ul li a { display: inline; } /********************************************************** // Home Page **********************************************************/ .hpBanner { margin-top: 8rem; min-height: 400px; display: flex; width: 100%; flex-flow: row; justify-content: center; align-items: center; font-family: Lora, serif; text-transform: uppercase; } .hpBanner h2 { font-size: 18px; font-weight: bold; } .hpFtrHdr { margin-top: 4rem; font-family: Yellowtail, sans-serif; } .hpFtrHdr h1 { color: #a28da8; text-align: center; font-weight: 400; font-size: 6rem; } .hpFtrProds { width: 50%; margin: 0 auto 5rem auto; display: flex; flex-flow: row nowrap; justify-content: center; } .hpFtrProds .hpFftProd { flex: 0 1 20%; display: flex; flex-flow: column; padding: 0.3rem; } .hpFtrProds .hpFftProd .fpImage { display: flex; justify-content: center; } .hpFtrProds .hpFftProd .fpImage img { max-width: 120px; width: 120px; } .hpFtrProds .hpFftProd .fpDetail { padding: 0.1rem; } .hpFtrProds .hpFftProd .fpDetail p { font-family: Laro, serif; width: 90%; text-align: center; font-size: 1.2rem; margin: 0.5rem auto; } .hpFtrProds .hpFftProd .fpDetail p a { color: #A685B0; text-transform: uppercase; } .hpFtrProds .hpFftProd .fpDetail p a:hover { color: #5E5E5E; text-decoration: none; } /********************************************************** // Header **********************************************************/ .dtHeader { width: 100%; font-family: Lora, serif; letter-spacing: 0.5rem; } .dtHeader .hdrBar { width: 100%; display: flex; flex-flow: row; justify-content: center; align-items: center; } .dtHeader .hdrBar .hdrBlkLeft { flex: 0 1 20%; width: 20%; } .dtHeader .hdrBar .hdrBlkMid { flex: 0 1 80%; width: 80%; display: flex; flex-flow: row; justify-content: center; } .dtHeader .hdrBar .hdrBlkMid .hpBrand { flex: 1; display: flex; justify-content: center; } .dtHeader .hdrBar .hdrBlkMid .hpBrand a { color: #1b1b1b; font-weight: bold; font-size: 3rem; text-transform: uppercase; border-bottom: 1px solid #a685b0; } .dtHeader .hdrBar .hdrBlkMid .hpBrand a:hover { text-decoration: none; } .dtHeader .hdrBar .hdrBlkRight { flex: 0 1 20%; width: 20%; display: flex; flex-flow: row; justify-content: flex-end; } .dtHeader .hdrBar .hdrBlkRight div { margin-left: 2rem; } .dtHeader .hdrBar .hdrBlkRight .hpCart a { color: #1b1b1b; text-decoration: none; } .dtHeader .hdrBar .hdrBlkRight .hpCart a:hover { text-decoration: none; color: #A685B0; } .dtHeader .hdrBar .hdrBlkRight .hpCart a div { display: inline; margin-left: 0; } .dtHeader .hdrNav { display: flex; flex-flow: row; justify-content: center; padding-top: 2rem; } .dtHeader .hdrNav .navItem { flex: 0 1 auto; margin-inline: 1rem; font-weight: bold; font-size: 1.5rem; } .dtHeader .hdrNav .navItem a { text-transform: uppercase; color: #a685b0; text-decoration: none; } .dtHeader .hdrNav .navItem a:hover { color: #553f5a; text-decoration: none; } .dtHeader .hdrNav .navItem a.navActive { color: #553f5a; text-decoration: none; } .navActive { color: #553f5a; text-decoration: none; } /********************************************************** // Footer **********************************************************/ .dtFooter { width: 100%; font-family: Lora, serif; } .dtFooter p { text-align: center; } .dtFooter .pLinks { width: 100%; display: flex; justify-content: center; margin: 2rem auto; } .dtFooter .pLinks .pLink { flex: 0 1 auto; display: flex; justify-content: center; padding-inline: 1rem; } .dtFooter .pLinks .pLink a { color: #A685B0; text-transform: uppercase; } .dtFooter .pLinks .pLink a:hover { color: #5E5E5E; text-decoration: none; } /********************************************************** // Store **********************************************************/ .storeHdr { width: 100%; text-align: center; margin-bottom: 5rem; } .storeProducts { width: 100%; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: stretch; } .storeNoProducts { font-size: 1.5rem; } .storeProdItem { border-right: 2px solid white; padding: 10px; flex: 1 1 20%; width: 20%; max-width: 20%; display: flex; flex-direction: column; justify-content: flex-start; align-self: flex-start; } .storeProdItem a { color: #553f5a; text-transform: uppercase; text-decoration: none; } .storeProdItem a:hover { color: #A28DA8; } .storeProdItem:hover { box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; } .storeProdItem:hover a { color: #A28DA8; } .storeProdItem .prodImg { flex: 1 1 auto; width: 100%; justify-content: flex-start; } .storeProdItem .prodImg a { position: relative; display: block; width: 100%; } .storeProdItem .prodImg a img { max-width: 200px; margin: 2rem auto; } .storeProdItem .prodDetail { margin-top: 2rem; flex: 1 1 auto; width: 100%; padding-bottom: 0.5em; } .storeProdItem .prodDetail p { max-width: 80%; margin: 0 auto; text-align: center; font-size: 1em; } .storeProdItem .prodDetail p.productPrice { position: relative; max-width: 80%; font-size: 1em; color: #5E5E5E; text-align: center; font-weight: bold; margin-top: 1rem; } .storeProduct { display: flex; flex-flow: row; width: 100%; } .storeProduct .spLeft { margin-top: 3rem; flex: 0 1 50%; width: 50%; display: flex; flex-flow: column; } .storeProduct .spLeft .spMainImg { width: 100%; display: flex; justify-content: center; } .storeProduct .spLeft .spMainImg .spMainImgBox { max-width: 600px; flex: 1; } .storeProduct .spLeft .spMainImg .spMainImgBox img { display: block; width: 80%; margin: 0 auto; } .storeProduct .spLeft .spThumbs { margin-top: 2rem; width: 100%; display: flex; flex-flow: row wrap; } .storeProduct .spLeft .spThumbs .spThumbList { width: 100%; display: flex; flex-flow: row wrap; justify-content: center; } .storeProduct .spLeft .spThumbs .spThumbList li { flex: 1; width: 18%; max-width: 18%; display: flex; padding: 2%; } .storeProduct .spLeft .spThumbs .spThumbList li a { cursor: pointer; border: 1px solid #A685B0; } .storeProduct .spLeft .spThumbs .spThumbList li a img { width: 100%; } .storeProduct .spRight { margin-top: 3rem; flex: 0 1 50%; width: 50%; display: flex; flex-flow: column; } .storeProduct .spRight .spProductHdr { margin-bottom: 3rem; } .storeProduct .spRight .spProductHdr h1 { font-size: 3rem; } .storeProduct .spRight .spProductHdr .spStockState { margin-top: 2rem; font-family: Yellowtail, sans-serif; font-size: 3rem; color: #A28DA8; } .storeProduct .spRight .spOptionsCart { display: flex; flex-flow: column; } .storeProduct .spRight .spOptionsCart .spOptions { flex: 0 1 100%; display: flex; margin-bottom: 4rem; } .storeProduct .spRight .spOptionsCart .spOptions .spOption { flex: 1 1 auto; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; margin-bottom: 0.3em; } .storeProduct .spRight .spOptionsCart .spOptions .spOption .spOptChkBox { margin-right: 3rem; } .storeProduct .spRight .spOptionsCart .spOptions .spOption .spLabel { padding-top: 6px; margin-right: 4rem; } .storeProduct .spRight .spOptionsCart .spOptions .spOption .spOptPrice span { font-weight: bold; } .storeProduct .spRight .spOptionsCart .spCart .spAddContainer { display: flex; flex-flow: row nowrap; } .storeProduct .spRight .spOptionsCart .spCart .spAddContainer .spAddLink { flex: 5 1 auto; display: flex; align-items: center; justify-content: flex-start; } .storeProduct .spRight .spOptionsCart .spCart .spAddContainer .spAddLink a { background-color: #A28DA8; color: #fff; padding: 5px 7px; cursor: pointer; } .storeProduct .spRight .spOptionsCart .spCart .spAddContainer .spAddLink a:hover { color: #5E5E5E; text-decoration: none; } .storeProduct .spRight .spOptionsCart .spCart .spAddContainer .spQuantity { flex: 2 1 auto; display: flex; flex-flow: row; align-items: center; } .storeProduct .spRight .spOptionsCart .spCart .spAddContainer .spQuantity div.sqQtyInput { display: inline; margin-left: 4rem; } .storeProduct .spRight .spOptionsCart .spCart .spAddContainer .spQuantity div.sqQtyInput input { width: 20%; } .storeProduct .spRight .spDesc { margin-top: 5rem; } /********************************************************** // Cart **********************************************************/ .cartSection { margin-top: 2rem; min-height: 65vh; } .cartSection .csHdr { border-top: 1px solid black; margin-top: 2rem; } .cartSection .csHdr h1, .cartSection .csHdr h2 { color: #5E5E5E; font-size: 2rem; text-transform: uppercase; font-family: Lora, serif; text-align: center; } .cartSection .cartHolder { width: 100%; } .cartSection .cartHolder .cartEmpty { width: 100%; margin-top: 2rem; } .cartSection .cartHolder .cartEmpty h3 { color: #A685B0; font-size: 1.5rem; font-family: Lora, serif; text-align: center; } .cartSection .cartHolder table.cartSummary { width: 100%; border-bottom: 1px solid black; } .cartSection .cartHolder table.cartSummary th h3 { color: #5E5E5E; font-size: 1.5rem; text-transform: uppercase; font-family: Lora, serif; } .cartSection .cartHolder table.cartSummary tr td { color: #5E5E5E; font-size: 1.3rem; text-transform: uppercase; font-family: Lora, serif; } .cartSection .cartHolder table.cartSummary tr td img { width: 150px; max-width: 150px; } .cartSection .cartHolder table.cartSummary .csProdName, .cartSection .cartHolder table.cartSummary .csOptName { margin-left: 3em; display: block; color: #5E5E5E; font-size: 1.5rem; text-transform: uppercase; font-family: Lora, serif; } .cartSection .cartHolder table.cartSummary div.csQtyControl ul.csQtyList { margin: 2em auto 0 auto; padding: 0; display: table; } .cartSection .cartHolder table.cartSummary div.csQtyControl ul.csQtyList li { margin: 0 0.2em 0 0; padding: 0 0.2em; line-height: 1.1em; display: table-cell; } .cartSection .cartHolder table.cartSummary div.csQtyControl ul.csQtyList li p { margin: 0; padding: 0 0.4em; color: #5E5E5E; background-color: #ccc; cursor: pointer; line-height: 1.1em; font-size: 1.1em; text-align: center; vertical-align: bottom; } .cartSection .cartHolder table.cartSummary div.csQtyControl ul.csQtyList li input[type=text] { margin-top: 0.8em; height: 2.1em; width: 2.1em; text-align: center; border: 2px solid black; padding-bottom: 0; } .cartSection .cartHolder table.cartSummary div.csQtyControl a.csRemoveItem { display: block; padding: 0; cursor: pointer; width: 40%; margin: 1em auto 0 auto; text-align: center; color: #A685B0; text-transform: uppercase; } .cartSection .cartHolder table.cartSummary div.csQtyControl a.csRemoveItem img { cursor: pointer; } .cartSection .cartHolder table.cartSummaryTotal { margin-top: 2em; width: 100%; } .cartSection .cartHolder table.cartSummaryTotal h3 { color: #5E5E5E; font-size: 1.5rem; text-transform: uppercase; font-family: Lora, serif; font-weight: bold; } .cartSection .cartHolder .csNext { margin-top: 5em; margin-bottom: 10em; width: 100%; } .cartSection .cartHolder .csNext a.csNextLink { float: right; background-color: #A28DA8; color: #fff; padding: 5px 7px; cursor: pointer; } .cartSection .cartHolder .csNext a.csNextLink:hover { color: #5E5E5E; text-decoration: none; } .cartSection .cartHolder .csNext:after { clear: right; } /********************************************************** // Checkout **********************************************************/ .checkoutSection { margin-top: 2rem; margin-bottom: 8rem; font-family: Lora, serif; } .checkoutSection .csHdr { border-top: 1px solid black; margin-top: 2rem; } .checkoutSection .csHdr h1, .checkoutSection .csHdr h2 { color: #5E5E5E; font-size: 2rem; text-transform: uppercase; text-align: center; } .checkoutSection .csSubHdr { color: #5E5E5E; text-align: center; } .checkoutSection .csSubHdr .main { display: block; font-size: 1.3rem; } .checkoutSection .csSubHdr .secondary { display: block; font-size: 0.9rem; } .checkoutSection .checkoutHolder { width: 60%; margin: 1em auto; display: flex; flex-flow: column nowrap; padding-bottom: 5rem; } .checkoutSection .checkoutHolder .invAddr, .checkoutSection .checkoutHolder .delAddr { flex: 0 1 auto; display: flex; flex-flow: column nowrap; margin-bottom: 3rem; border-top: 1px solid #A685B0; } .checkoutSection .checkoutHolder .invAddr .groupHdr, .checkoutSection .checkoutHolder .delAddr .groupHdr { color: #5E5E5E; text-align: center; font-size: 1.3em; margin: 2rem auto 1em auto; } .checkoutSection .checkoutHolder .invAddr .controlGroup, .checkoutSection .checkoutHolder .delAddr .controlGroup { margin-bottom: 1em; } .checkoutSection .checkoutHolder .invAddr .controlGroup label, .checkoutSection .checkoutHolder .delAddr .controlGroup label { color: #5E5E5E; width: 100%; } .checkoutSection .checkoutHolder .invAddr .controlGroup input, .checkoutSection .checkoutHolder .delAddr .controlGroup input { color: #5E5E5E; width: 100%; font-family: Lato, sans-serif; } .checkoutSection .checkoutHolder .invAddr .controlGroup select, .checkoutSection .checkoutHolder .delAddr .controlGroup select { color: #5E5E5E; font-family: Lato, sans-serif; } .checkoutSection .checkoutHolder .invAddr .controlGroup label.halfWidth, .checkoutSection .checkoutHolder .delAddr .controlGroup label.halfWidth, .checkoutSection .checkoutHolder .invAddr .controlGroup input.halfWidth, .checkoutSection .checkoutHolder .delAddr .controlGroup input.halfWidth { display: inline; width: 50%; } .checkoutSection .checkoutHolder .checkoutTerms { display: flex; flex-flow: column; margin-bottom: 3rem; border-top: 1px solid #A685B0; } .checkoutSection .checkoutHolder .checkoutTerms .groupHdr { color: #5E5E5E; text-align: center; font-size: 1.3em; margin: 2rem auto 1em auto; } .checkoutSection .checkoutHolder .checkoutTerms .termsAccept { display: flex; flex-flow: row wrap; justify-content: flex-start; } .checkoutSection .checkoutHolder .checkoutTerms .termsAccept .taLeft { padding-right: 2rem; } .checkoutSection .checkoutHolder .checkoutTerms .termsAccept .taRight { padding-left: 2rem; } .checkoutSection .checkoutHolder .checkoutTerms .termsAccept .taRight label { font-weight: normal; } .checkoutSection .checkoutHolder .checkoutTerms .termsAccept .taRight label a { color: #A685B0; text-transform: uppercase; } .checkoutSection .checkoutHolder .checkoutTerms .termsAccept .taRight label a:hover { color: #5E5E5E; text-decoration: none; } .checkoutSection .checkoutHolder .checkoutShip { display: flex; flex-flow: column; margin-bottom: 5rem; border-top: 1px solid #A685B0; padding-bottom: 3rem; border-bottom: 1px solid #A685B0; } .checkoutSection .checkoutHolder .checkoutShip .groupHdr { color: #5E5E5E; text-align: center; font-size: 1.3em; margin: 2rem auto 1em auto; } .checkoutSection .checkoutHolder .checkoutShip .shipOpts { display: flex; flex-flow: column; } .checkoutSection .checkoutHolder .checkoutShip .shipOpts .shipOpt { display: flex; flex-flow: row wrap; justify-content: flex-start; } .checkoutSection .checkoutHolder .checkoutShip .shipOpts .shipOpt .soLeft { padding-right: 2rem; } .checkoutSection .checkoutHolder .checkoutShip .shipOpts .shipOpt .soRight { padding-left: 2rem; } .checkoutSection .checkoutHolder .checkoutShip .shipOpts .shipOpt .soRight label { font-weight: normal; } .controlLink { margin-top: 3rem; width: 100%; display: flex; justify-content: center; } .controlLink input[type="submit"] { background-color: #A28DA8; color: #fff; padding: 5px 7px; cursor: pointer; margin: 0 auto; } .controlLink input[type="submit"]:hover { color: #5E5E5E; text-decoration: none; } .controlLinkExt { margin-top: 3rem; width: 40%; display: flex; justify-content: center; background-color: #dce7e1; color: #343434; padding: 5px 7px; cursor: pointer; margin: 0 auto; } .controlLinkExt:hover { color: #fff; background-color: #045219; text-decoration: none; } .cartGridWrapper { width: 80%; margin: 0 auto; display: flex; flex-flow: column; font-family: Lora, serif; } .cartGridWrapper .cgHdr { flex: 1; display: flex; flex-flow: column; justify-content: center; margin-bottom: 2rem; } .cartGridWrapper .cgHdr h1, .cartGridWrapper .cgHdr h2 { color: #5E5E5E; font-size: 2rem; text-transform: uppercase; text-align: center; } .cartGridWrapper .cgHdr span { color: #5E5E5E; font-size: 1rem; text-transform: uppercase; text-align: center; } .cartGridWrapper .cgCardContent { margin-bottom: 5rem; align-self: center; display: flex; width: 500px; min-width: 500px; font-family: lato, sans-serif; flex-flow: column; } .cartGridWrapper .cgCardContent .cgDetails { flex: 1; display: flex; flex-flow: column; } .cartGridWrapper .cgCardContent .cgDetails .cgDetailRow { width: 80%; margin: 0 auto 1rem auto; } .cartGridWrapper .cgCardContent .cgDetails .cgDetailRow label { width: 25%; margin-right: 2rem; } .cartGridWrapper .cgCardContent .cgDetails .cgDetailRow input[type=text] { width: 65%; } .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf { width: 80%; margin: 0 auto 3rem auto; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; } .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailLeft, .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailRight { flex: 0 1 50%; display: flex; flex-flow: row; align-items: center; } .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailLeft label, .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailRight label { padding-top: 5px; width: 31.5%; margin-right: 2rem; } .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailLeft input[type=text], .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailRight input[type=text] { width: 60%; } .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailRight label:last-of-type { padding-left: 2rem; } .cartGridWrapper .cgCardContent .cgDetails button.controlLink { width: 30%; margin-top: 5rem; background-color: #A28DA8; color: #fff; padding: 5px 7px; cursor: pointer; margin: 0 auto; } .cartGridWrapper .cgCardContent .cgDetails button.controlLink:hover { color: #5E5E5E; text-decoration: none; } .cartGridWrapper .cgCardContent .cgMessage { flex: 1; display: flex; flex-flow: column; margin-top: 2rem; } .cartGridWrapper .cgCardContent .cgMessage .cgMsgRow { width: 100%; margin: 0 auto 1rem auto; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; } .cartGridWrapper .cgCardContent .cgMessage .cgMsgRow p { color: red; text-transform: uppercase; text-align: center; } #cardErrors { margin-top: 5rem; margin-bottom: 5rem; } .cartGridOrderStatus { width: 60%; margin: 0 auto; display: flex; flex-flow: column; font-family: Lora, serif; min-height: 70vh; } .cartGridOrderStatus .osStatusContent .osHdr h1 { color: #5E5E5E; font-size: 2rem; text-transform: uppercase; text-align: center; } .cartGridOrderStatus .osContent { display: flex; flex-flow: column; align-items: center; } .cartGridOrderStatus .osContent .osImage { flex: 0 1 auto; margin-bottom: 5rem; } .cartGridOrderStatus .osContent .osImage img { max-height: 300px; height: 300px; } .cartGridOrderStatus .osContent .osMsg { flex: 0 1 auto; } .cartGridOrderStatus .osContent .osMsg p { font-size: 1.5rem; text-align: center; } .cartGridOrderStatus .osContent .osMsg p a { color: #A685B0; } .cartGridOrderStatus .osContent .osMsg p a:hover { color: #5E5E5E; } /********************************************************** // Message Fade styles **********************************************************/ .messageFade { font-family: Laro, serif; position: fixed; top: 0; left: 0; width: 100%; padding: 1rem; height: 50px; background-color: #000000; opacity: 0.9; color: #FFFFFF; font-size: 2rem; text-align: center; z-index: 10000; } .messageFade.error { border-top: 5px solid #FF0000; } .messageFade .messageClose { position: absolute; top: 0; right: 0; display: block; margin: 5px 10px; cursor: pointer; } /********************************************************** // Policy Doc **********************************************************/ .infoDocContainerGrid { width: 80%; margin: 2em auto 0 auto; display: flex; flex-flow: row wrap; } .infoDocContainerGrid .infoDocMain { font-family: Lato, sans-serif; } .infoDocContainerGrid .infoDocMain .infoDocHeader { margin-bottom: 2em; } .infoDocContainerGrid .infoDocMain .infoDocHeader h1 { font-size: 1.3em; } .infoDocContainerGrid .infoDocMain .infoDocHeader .infoDocBlockPara { margin-top: 1em; } .infoDocContainerGrid .infoDocMain .infoDocBlock { margin-bottom: 2em; } .infoDocContainerGrid .infoDocMain .infoDocBlock h2 { font-size: 1.1em; } .infoDocContainerGrid .infoDocMain .infoDocBlock .infoDocBlockPara { margin-top: 1em; } .infoDocContainerGrid .infoDocMain .infoDocBlock span.infoDocUnderline { text-decoration: underline; } .infoDocContainerGrid .infoDocMain .infoDocBlock span.infoDocParaEm1 { text-decoration: underline; font-style: italic; } .infoDocContainerGrid .infoDocMain .infoDocBlock .infoDocIndent { padding-left: 1.3em; display: block; } .infoDocContainerGrid .infoDocMain .infoDocBlock .infoDocSmaller { font-size: smaller; } /********************************************************** // Contact Page **********************************************************/ .contactPage { width: 100%; display: flex; flex-flow: column; min-height: 70vh; margin-top: 3rem; font-family: Lora, serif; } .contactPage .contactPagePageHdr h1 { text-transform: uppercase; font-size: 18px; font-weight: bold; color: #A28DA8; text-align: center; } .contactPage .contactPageContent { width: 100%; display: flex; flex-flow: row; padding: 0 2rem; justify-content: center; border: 1px solid #A28DA8; } .contactPage .contactPageContent .ctPageLeft { width: 50%; display: flex; flex-flow: column; margin: 0 auto 5rem auto; justify-content: center; } .contactPage .contactPageContent .ctPageLeft .ctContactRow { width: 80%; margin: 5rem auto; display: flex; flex-flow: row nowrap; align-items: center; } .contactPage .contactPageContent .ctPageLeft .ctContactRow .ctRowL { flex: 0 1 50%; color: #5E5E5E; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; } .contactPage .contactPageContent .ctPageLeft .ctContactRow .ctRowL span { font-size: 2rem; margin-left: 3rem; color: #A685B0; } .contactPage .contactPageContent .ctPageLeft .ctContactRow .ctRowR { flex: 0 1 50%; display: flex; align-content: center; color: #A28DA8; } .contactPage .contactPageContent .ctPageLeft .ctContactRow .ctRowR span { margin-right: 2rem; } .contactPage .contactPageContent .ctPageLeft .ctContactRow .ctRowR a { margin-top: 5px; color: #A685B0; } .contactPage .contactPageContent .ctPageLeft .ctContactRow .ctRowR a:hover { color: #5E5E5E; text-decoration: none; } .contactPage .contactPageContent .ctPageLeft .ctContactRow .ctRowR address { margin: 0; } .contactPage .contactPageContent .ctPageRight { width: 50%; display: flex; flex-flow: column; margin: 0 auto 5rem auto; } .contactPage .contactPageContent .ctPageRight .ctFormHdr { font-family: Laro, serif; margin-block: 2rem; } .contactPage .contactPageContent .ctPageRight .ctFormHdr span { font-size: 15px; font-weight: bold; color: #A28DA8; text-transform: uppercase; } .contactPage .contactPageContent .ctPageRight .ctContactForm { width: 100%; display: flex; flex-flow: column; } .contactPage .contactPageContent .ctPageRight .ctContactForm .ctFormRow { width: 100%; display: flex; flex-flow: column; margin-bottom: 1.5rem; color: #A28DA8; } .contactPage .contactPageContent .ctPageRight .ctContactForm .ctFormRow textarea { resize: none; } .contactPage .contactPageContent .ctPageRight .ctContactForm .captchaDiv { display: flex; flex-flow: row nowrap; justify-content: center; } .contactPage .contactPageContent .ctPageRight .ctContactForm .ctFormActions { width: 80%; display: flex; flex-flow: row; margin: 5rem auto 0 auto; } .contactPage .contactPageContent .ctPageRight .ctContactForm .ctFormActions .ctSubmit { flex: 0 1 50%; display: flex; justify-content: center; align-items: center; } .contactPage .contactPageContent .ctPageRight .ctContactForm .ctFormActions .ctSubmit a { background-color: #A28DA8; color: white; padding: 5px 7px; margin: 0 auto; cursor: pointer; } .contactPage .contactPageContent .ctPageRight .ctContactForm .ctFormActions .ctSubmit a:hover { background-color: #5E5E5E; text-decoration: none; } .contactPage .contactPageContent .ctPageRight .ctContactForm .ctFormActions .ctReset { flex: 0 1 50%; display: flex; justify-content: center; align-items: center; } .contactPage .contactPageContent .ctPageRight .ctContactForm .ctFormActions .ctReset a { background-color: #A28DA8; color: white; padding: 5px 7px; margin: 0 auto; cursor: pointer; } .contactPage .contactPageContent .ctPageRight .ctContactForm .ctFormActions .ctReset a:hover { background-color: #5E5E5E; text-decoration: none; }