.tds-message-box { margin: 15px 0; padding: 25px 25px 25px 4.5rem; position: relative; font-style: italic; } .box-warning { /* border: 1px solid #BF360C; */ background: #FBE9E7; color: #BF360C; } .box-council { background: #E3F2FD; color: #0D47A1; } .box-note { /* border:1px solid #def1bf; */ background: #E8F5E9; color: #1B5E20; } .box-info { background: #FFF8E1; color: #de6000; /* border:1px solid #f7efcb; */ } .box-warning:before { content: "\f339"; } .box-council:before { content: "\f130"; } .box-note:before { content: "\f109"; } .box-info:before { content: "\f348"; } .box-warning:before, .box-council:before, .box-note:before, .box-info:before { font-family: "dashicons", monospace; font-size: 40px; display: inline-block; opacity: .4; vertical-align: top; float: left; font-style: normal; line-height: 40px; margin-right: 7px; position: absolute; left: 15px; top: 25%; } .ads-button a[class^="adsbtn-"] { text-decoration:none; box-shadow: none !important; } [class^="adsbtn-"] { position: relative; display: block; margin: 20px auto; width: 100%; height: 80px; max-width: 250px; text-transform: uppercase; overflow: hidden; border: 1px solid currentColor; line-height: 80px; text-align: center; z-index: 0; font-size: 1.1rem; } [class^="adsbtn-"]:before, [class^="adsbtn-"]:after { box-sizing: border-box; -webkit-transition: 0.5s; transition: 0.5s; z-index: -1; } [class^="adsbtn-"] span:before, [class^="adsbtn-"] span:after { box-sizing: border-box; -webkit-transition: 0.5s; transition: 0.5s; z-index: -1; } [class^="adsbtn-"] .dashicons, [class^="adsbtn-"] .dashicons-before:before { display: initial; width: 20px; height: 20px; font-size: 30px; line-height: 1; font-family: "dashicons"; text-decoration: inherit; font-weight: 400; font-style: normal; vertical-align: middle; text-align: center; -webkit-transition: color .1s ease-in; transition: color .1s ease-in; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .adsbtn-swipe { color: #c445cb !important; } .adsbtn-swipe:before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 80px; background: #701674 !important; } .adsbtn-swipe:hover { color: #eec8f0 !important; } .adsbtn-swipe:hover:before { width: 250px; } .adsbtn-swipe:active { background: #ba24c2 !important; } .adsbtn-diagonal { color: #5cc230 !important; } .adsbtn-diagonal:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: #266e07 transparent transparent transparent !important; position: absolute; top: 0; left: 0; } .adsbtn-diagonal:hover { color: #cfedc2 !important; } .adsbtn-diagonal:hover:after { border-width: 330px 330px 0 0; } .adsbtn-diagonal:active { background: #3fb70c !important; } .adsbtn-double { color: #799c80 !important; } .adsbtn-double:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #3a5340; position: absolute; bottom: 0; left: 0; } .adsbtn-double:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent #3a5340 transparent; position: absolute; right: 0; bottom: 0; } .adsbtn-double:hover { color: #d8e2da !important; } .adsbtn-double:hover:before { border-width: 206.25px 0 0 206.25px; } .adsbtn-double:hover:after { border-width: 0 0 206.25px 206.25px; } .adsbtn-double:active { background: #618b6a; } .adsbtn-diagonal-close { color: #7d88ac !important; } .adsbtn-diagonal-close:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #3d455e; position: absolute; bottom: 0; left: 0; } .adsbtn-diagonal-close:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #3d455e transparent transparent; position: absolute; top: 0; right: 0; } .adsbtn-diagonal-close:hover { color: #d9dce7 !important; } .adsbtn-diagonal-close:hover:before { border-width: 165px 0 0 165px; } .adsbtn-diagonal-close:hover:after { border-width: 0 165px 165px 0; } .adsbtn-diagonal-close:active { background: #66739d; } .adsbtn-zoning { color: #bad031 !important; } .adsbtn-zoning:before, .adsbtn-zoning:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-top: 40px solid #bad031; border-bottom: 40px solid #bad031; } .adsbtn-zoning:before { border-right: 40px solid transparent; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .adsbtn-zoning:after { border-left: 40px solid transparent; -webkit-transform: translateX(100%); transform: translateX(100%); } .adsbtn-zoning:hover span { color: #fff; } .adsbtn-zoning:hover:before { -webkit-transform: translateX(-30%); transform: translateX(-30%); } .adsbtn-zoning:hover:after { -webkit-transform: translateX(30%); transform: translateX(30%); } .adsbtn-zoning:active { background: #4ea729; } .adsbtn-4corners { color: #b0a9a1 !important; } .adsbtn-4corners:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #17493a transparent transparent !important; position: absolute; top: 0; right: 0; } .adsbtn-4corners:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #17493a !important; position: absolute; bottom: 0; left: 0; } .adsbtn-4corners:before, .adsbtn-4corners:after { border-color: #17493a !important; } .adsbtn-4corners span:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: #17493a transparent transparent transparent !important; position: absolute; top: 0; left: 0; } .adsbtn-4corners span:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent #17493a transparent; position: absolute; right: 0; bottom: 0; } .adsbtn-4corners span:before, .adsbtn-4corners span:after { border-color: #17493a !important; } .adsbtn-4corners:hover { color: #d4fff2 !important; } .adsbtn-4corners:hover:before { border-width: 20px 63px; } .adsbtn-4corners:hover:after { border-width: 20px 63px; } .adsbtn-4corners:hover span:before { border-width: 20px 62.5px; } .adsbtn-4corners:hover span:after { border-width: 20px 62.5px; } .adsbtn-4corners:active { background: #a29a90 !important; } .adsbtn-slice { color: #6287a7 !important; } .adsbtn-slice:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #2a445b transparent transparent; position: absolute; top: 0; right: 0; } .adsbtn-slice:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #2a445b; position: absolute; bottom: 0; left: 0; } .adsbtn-slice:hover { color: #d1dce5 !important; } .adsbtn-slice:hover:before, .adsbtn-slice:hover:after { border-width: 80px 262.5px; } .adsbtn-slice:active { background: #467298 !important; } .adsbtn-position-aware { color: #8A0028 !important; } .adsbtn-position-aware span { position: absolute; display: block; width: 0; height: 0; border-radius: 50%; background: #8A0028 !important; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: width 0.4s, height 0.4s; transition: width 0.4s, height 0.4s; z-index: -1; } .adsbtn-position-aware:hover { color: #ffddeb !important; } .adsbtn-position-aware:hover span { width: 562.5px; height: 562.5px; } .adsbtn-position-aware:active { background: #9A0038 !important; } .adsbtn-alternate { color: #cf8f91 !important; } .adsbtn-alternate:before, .adsbtn-alternate:after, .adsbtn-alternate span:before, .adsbtn-alternate span:after { content: ''; position: absolute; top: 0; width: 63.5px; height: 0; background: #774a4c !important; } .adsbtn-alternate:before { left: 0; } .adsbtn-alternate:after { left: 125px; } .adsbtn-alternate span:before, .adsbtn-alternate span:after { top: auto; bottom: 0; } .adsbtn-alternate span:before { left: 62.5px; } .adsbtn-alternate span:after { left: 187.5px; } .adsbtn-alternate:hover { color: #f1dedf !important; } .adsbtn-alternate:hover:before, .adsbtn-alternate:hover:after, .adsbtn-alternate:hover span:before, .adsbtn-alternate:hover span:after { height: 80px; } .adsbtn-alternate:active { background: #c67b7e !important; } .adsbtn-smoosh { color: #bc7ab7 !important; } .adsbtn-smoosh:before, .adsbtn-smoosh:after { content: ''; position: absolute; top: 0; left: 0; width: 250px; height: 0; background: #6a3b66 !important; } .adsbtn-smoosh:after { top: auto; bottom: 0; } .adsbtn-smoosh:hover { color: #ebd8ea !important; } .adsbtn-smoosh:hover:before, .adsbtn-smoosh:hover:after { height: 40px; } .adsbtn-smoosh:active { background: #b062aa; } @-webkit-keyframes criss-cross-left { 0% { left: -20px; } 50% { left: 50%; width: 20px; height: 20px; } 100% { left: 50%; width: 375px; height: 375px; } } @keyframes criss-cross-left { 0% { left: -20px; } 50% { left: 50%; width: 20px; height: 20px; } 100% { left: 50%; width: 375px; height: 375px; } } @-webkit-keyframes criss-cross-right { 0% { right: -20px; } 50% { right: 50%; width: 20px; height: 20px; } 100% { right: 50%; width: 375px; height: 375px; } } @keyframes criss-cross-right { 0% { right: -20px; } 50% { right: 50%; width: 20px; height: 20px; } 100% { right: 50%; width: 375px; height: 375px; } } .adsbtn-collision { position: relative; color: #8e6ca1 !important; } .adsbtn-collision:before, .adsbtn-collision:after { position: absolute; top: 50%; content: ''; width: 20px; height: 20px; background: #7a5290 !important; border-radius: 50%; } .adsbtn-collision:before { left: -20px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* animation: criss-cross-left 0.8s reverse; */ } .adsbtn-collision:after { right: -20px; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); /* animation: criss-cross-right 0.8s reverse; */ } .adsbtn-collision:hover:before, .adsbtn-collision:hover:after { /* @include size($adsbtn-width); */ } .adsbtn-collision:hover:before { -webkit-animation: criss-cross-left 0.8s both; animation: criss-cross-left 0.8s both; } .adsbtn-collision:hover:after { -webkit-animation: criss-cross-right 0.8s both; animation: criss-cross-right 0.8s both; } .adsbtn-collision:hover { color: #ebc7ff !important; } .adsbtn-horizontal-overlap { color: #859795 !important; } .adsbtn-horizontal-overlap:before, .adsbtn-horizontal-overlap:after, .adsbtn-horizontal-overlap span:before, .adsbtn-horizontal-overlap span:after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 80px; background: rgba(67, 80, 78, 0.25); -webkit-transition: 0.4s; transition: 0.4s; } .adsbtn-horizontal-overlap:after, .adsbtn-horizontal-overlap span:before { left: auto; right: 0; } .adsbtn-horizontal-overlap span:before, .adsbtn-horizontal-overlap span:after { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .adsbtn-horizontal-overlap:hover { color: #dbe1e0 !important; } .adsbtn-horizontal-overlap:hover:before, .adsbtn-horizontal-overlap:hover:after, .adsbtn-horizontal-overlap:hover span:before, .adsbtn-horizontal-overlap:hover span:after { width: 250px; } .adsbtn-horizontal-overlap:active { background: #708582; } @-webkit-keyframes criss-cross-left { 0% { left: -20px; } 50% { left: 50%; width: 20px; height: 20px; } 100% { left: 50%; width: 375px; height: 375px; } } @keyframes criss-cross-left { 0% { left: -20px; } 50% { left: 50%; width: 20px; height: 20px; } 100% { left: 50%; width: 375px; height: 375px; } } @-webkit-keyframes criss-cross-right { 0% { right: -20px; } 50% { right: 50%; width: 20px; height: 20px; } 100% { right: 50%; width: 375px; height: 375px; } } @keyframes criss-cross-right { 0% { right: -20px; } 50% { right: 50%; width: 20px; height: 20px; } 100% { right: 50%; width: 375px; height: 375px; } } .ads-row { display: flex; flex-wrap: wrap; } .cell { flex: 1; } [class^="cell"] { margin-right: 2%; margin-bottom: 1.5rem; } .cell:last-child, [class^="cell-"]:last-child { margin-right: 0; } /* Column Spans */ .cell-1of2 { flex: 0 0 49%; } .cell-1of3 { flex: 0 0 32.3333%; } .cell-2of3 { flex: 0 0 65.6666%; } .cell-1of4 { flex: 0 0 24%; } .cell-3of4 { flex: 0 0 74%; } .cell-1of5 { flex: 0 0 19%; } .cell-2of5 { flex: 0 0 39%; } .cell-3of5 { flex: 0 0 59%; } .cell-4of5 { flex: 0 0 79%; } .cell-1of8 { flex: 0 0 11.5%; } .cell-3of8 { flex: 0 0 36.5%; } .cell-5of8 { flex: 0 0 61.5%; } .cell-7of8 { flex: 0 0 86.5%; } @media (max-width: 500px) { [class^="cell"] { flex: 0 0 100%; } } [class^="hr-"]:before, [class^="hr-"]:after { content: ''; } [class^="hr-"] { border: 0; margin: 1.35em auto; max-width: 100%; background-position: 50%; box-sizing: border-box; } .hr-solid { height: 3px; width: 95%; background: #eaeaea; box-shadow: 0px 1px 0px 0px #bfbfbf; } .hr-fade { height: 2px; width: 100%; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #cccccc 50%, rgba(0, 0, 0, 0) 100%); } .hr-dots { color: #eee; height: 6px; border-width: 0 0 6px; border-style: solid; border-image: url('data:image/svg+xml,') 0 0 100% repeat; width: 28%; } .hr-vertical-lines { height: 8px; color: #b9b9b9; background-image: linear-gradient(90deg, currentColor, currentColor 33.33%, rgba(0, 0, 0, 0) 33.33%, rgba(0, 0, 0, 0) 100%); background-size: 3px 100%; width: 60%; } .hr-zigzag { position: relative; font-size: 7px; height: 1em; border: 0; width: 70%; } .hr-zigzag:before, .hr-zigzag:after { display: block; position: absolute; left: 0; right: 0; background-size: 8px 100%; height: inherit; } .hr-zigzag:before { background-image: linear-gradient(315deg, rgba(177, 177, 177, 0.75) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(134, 134, 134, 0.75) 25%, rgba(0, 0, 0, 0) 25%); background-position: 50%; top: -0.5em; } .hr-zigzag:after { background-image: linear-gradient(135deg, rgb(193, 192, 188) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(225deg, rgb(160, 159, 155) 25%, rgba(0, 0, 0, 0) 25%); background-position: -webkit-calc(50% - 0.5em); top: 0.5em; } .ads-color-box { padding: 1.8rem 2rem; border-radius: 3px; } .ads-dropcap { color: #444; display: block; float: left; font-size: 75px; line-height: 1.0em; font-weight: 600; margin: 0px 10px 0 0; } .ads-pullquote-left, .ads-pullquote-right { color: #444; font-weight: 600; width: 40%; } .ads-pullquote-left { border-left: 4px solid #e5e5e5; float: left; margin: 0.78em 1em 0.78em 0; padding: 0 0 0 20px; } .ads-pullquote-right { border-right: 4px solid #e5e5e5; float: right; margin: 0.78em 0 0.78em 1em; padding: 0 20px 0 0; } .ads-quote-center { width: 80%; margin: 2em auto; text-align: center; font-style: italic; font-weight: bold; position: relative; } .ads-quote-center:before { content: "\f122"; font-family: "dashicons"; font-size: 100px; display: inline-block; opacity: .02; vertical-align: top; float: left; font-style: normal; line-height: 40px; margin-right: 7px; position: absolute; left: 0; top: 25%; } .ads-quote-center-cite { text-align: center; font-style: italic; font-size: small; font-weight: normal; padding: 10px 0; } .ads-quote-center-cite span { position: relative; display: inline-block; } .ads-quote-center-cite span:before, .ads-quote-center-cite span:after { content: ""; position: absolute; height: 3px; border-bottom: 1px solid; border-top: 1px solid; top: 8px; width: 30px; } .ads-quote-center-cite span:before { right: 100%; margin-right: 10px; } .ads-quote-center-cite span:after { left: 100%; margin-left: 10px; } .ads-blur-spoiler { color: transparent; text-shadow: 0 0 20px #000 !important; transition: 0.3s all; } .ads-blur-spoiler:hover { color: #000 !important; text-shadow: none!important; } .ads-blur-spoiler-reverse { color: transparent; text-shadow: 0 0 20px #fff; transition: 0.3s all; } .ads-blur-spoiler-reverse:hover { color: #fff; text-shadow: none; } .ads-custom-box{ padding: 0rem 2.2rem 2.2rem; margin: 2rem 0; } .custom-box{ border-color: #e87e04; border-style: solid; border-width: 1px; } .ads-custom-box-title { position: relative; display: inline-block; top: -1rem; left: -1rem; background: #fff; padding: 0 1rem; font-size: 1.4rem; color: #e87e04; } @media only screen and (max-width: 920px) { } @media only screen and (max-width: 800px) { } @media only screen and (max-width: 768px) { .tds-message-box { margin: 10px 0; padding: 25px 25px 25px 25px; } .box-warning:before, .box-council:before, .box-note:before, .box-info:before { display: none; } } @media only screen and (max-width: 667px) { } @media only screen and (max-width: 600px) { } @media only screen and (max-width: 568px) { } @media only screen and (max-width: 480px) { } @media only screen and (max-width: 400px) { } @media only screen and (max-width: 320px) { }