LinkedIn Youtube Facebook Twitter Sales Rep Locator Document Search
 

/*Quick Resets*/ body { width: 100%; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } p { margin: 0; padding: 0; } input { outline: gray; } /*Typography*/ @import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Open+Sans:wght@300;400;700;800&family=Raleway:ital,wght@0,700;1,400&display=swap'); /* font-family: 'Open Sans', sans-serif; font-family: 'Open Sans Condensed', sans-serif; font-family: 'Raleway', sans-serif; */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*Colors*/ .light-green { color: #55B1A5; } .green { color: #2A9D8F; } .orange { color: #F7903F; } .indigo { color: #285466; } .dark-indigo { color: #264653; } .blue-gray { color: #516B75; } .light-yellow { color: #FFE7AE; } /* Layout */ .col-2 { display: inline-block; vertical-align: top; } #calculator { height: 469px; width: 100%; background-color: #50A8CC; position: relative; } /*Main Background*/ #background { overflow: hidden; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 1; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+100,ffffff+0&1+0,0+100 */ background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } #background span.cloud-left { background-image: url('../img/SVG/bg-left-clouds.svg'); background-size: 420px 145px; width: 420px; height: 145px; display: block; position: absolute; top: 30px; left: -80px; } #background span.buildings-left { background-image: url('../img/SVG/bg-buildings-left.svg'); background-size: 529px 114px; width: 529px; height: 114px; display: block; position: absolute; bottom: 30px; left: 0; } #background span.cloud-right { background-image: url('../img/SVG/bg-right-clouds.svg'); background-size: 292px 64px; width: 292px; height: 64px; display: block; position: absolute; top: 30px; right: -50px; } #background span.buildings-right { background-image: url('../img/SVG/bg-buildings-right.svg'); background-size: 310px 105px; width: 310px; height: 105px; display: block; position: absolute; bottom: 37px; right: 0; } /*Calculator*/ div#container { width: 845px; margin: 0 auto; z-index: 10; position: relative; vertical-align: bottom; padding-top: 70px; display: flex; } #calculator-form { width: 291px; height: 397px; } #building { width: 100%; height: 100%; background-image: url('../img/SVG/building-lg.svg'); background-position: bottom left; background-size: 291px 397px; background-repeat: no-repeat; position: relative; } .radio-button.EPDM { border-radius: 7px 0 0 7px; } .radio-button.TPO { border-radius: 0 7px 7px 0; } #form-section { position: relative; margin-left: 62px; padding: 0px 12px; } .roof-type { height: 120px; } .roof-sqft { height: 120px; } .number {} #form-section p.tool-tip { font-family: 'Open Sans', sans-serif; font-size: 11px; line-height: 13.6px; color: #000000; color: rgb(0, 0, 0); padding: 9px 18px; border-radius: 20px 20px 0 20px; background-color: #FFE7AE; display: block; position: absolute; top: -20px; left: -168px; width: 165px; box-sizing: border-box; box-shadow: 0px 3px rgba(136, 136, 136, 0.25); } @media screen and (min-width: 1024px) and (max-width: 1060px) { #form-section p.tool-tip { left: -132px; } } #calculator-form.no-tips #form-section p.tool-tip { display: none !important; transition-delay: 0s; } #form-section p.tool-tip.one, #form-section p.tool-tip.two, #form-section p.tool-tip.three { opacity: 0; -webkit-transition: .4s; transition: opacity .4s; } .appear { opacity: 1 !important; -webkit-transition: .2s; transition: opacity .2s; } #form-section p.tool-tip.two.appear, #form-section p.tool-tip.three.appear { transition: opacity .2 0s; } .disappear { opacity: 0 !important; -webkit-transition: .2s; transition: opacity .2s; } .faded { opacity: 0.3 !important; -webkit-transition: .2s; transition: opacity .2s; } #form-section h3 { font-family : 'Open Sans Condensed', sans-serif; font-weight : bold; font-size : 11px; color : #FFFFFF; color : rgb(255, 255, 255); padding-top: 5px; padding-bottom: 7px; } #form-section h3 span { font-family : 'Open Sans Condensed', sans-serif; font-size : 11px; line-height : 13.2px; color : #FFFFFF; color : rgb(255, 255, 255); font-weight: 300; } #form-section label#container { transition: all 0.2s; } .input-container input[type="number"] { border-radius: 0 6px 6px 0; height: 31px; font-family: 'Open Sans Condensed', sans-serif; font-weight: bold; font-size: 16px; color: #285466; color: rgb(40, 84, 102); line-height: 31px; border: none; width: 62px; /* padding: 0 0px 0 0; */ text-align: right; box-shadow: 0px 3px rgba(136, 136, 136, 0.4); } .input-container { width: 27%; display: inline-block; vertical-align: top; margin-top: 20px; } #form-section label#container input span.checkmark {} #form-section .descriptions { line-height: 12px; margin-top: -6px; } #form-section .descriptions p { font-family : 'Open Sans', sans-serif; font-size : 11px; line-height : 12.8px; color : #264653; color : rgb(38, 70, 83); /*display: none;*/ } #form-section .descriptions p { display: none; } .EPDM #form-section .descriptions p.EPDM { display: inline; } .MB #form-section .descriptions p.MB { display: inline; } .TPO #form-section .descriptions p.TPO { display: inline; } .range-slider { -webkit-appearance: none; width: 100%; height: 14px; background: rgba(255, 255, 255, 0.65); outline: none; border-radius: 10px; opacity: 1; -webkit-transition: .2s; transition: opacity .2s; text-align: center; } .range-value { margin-top: 13px; margin-bottom: 7px; height: 20px; font-family: 'Open Sans Condensed', sans-serif; font-weight: bold; font-size: 16px; color: #285466; color: rgb(40, 84, 102); text-align: center; width: 100%; } .roof-selected .range-slider:hover { background: rgba(255, 255, 255, 0.8); -webkit-transition: .2s; transition: opacity .2s; cursor: pointer; } .roof-selected .range-slider::-webkit-slider-thumb:hover { box-shadow: 0px 5px rgba(136, 136, 136, 0.3); top: -2px; transition: all .2s; position: relative; cursor: pointer; } .range-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 25px; background: #F7903F; transition: all .2s; box-shadow: 0px 3px rgba(136, 136, 136, 0.4); } .range-slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 25px; background: #F7903F; box-shadow: 0px 2px rgba(136, 136, 136, 0.5); } .roof-selected .range-slider::-webkit-slider-thumb, .roof-selected .range-slider::-moz-range-thumb { cursor: pointer; } .edge { font-family: 'Open Sans Condensed', sans-serif; font-weight: bold; font-size: 11px; color: #285466; color: rgb(40, 84, 102); display: inline-block; width: 50%; text-align: left; position: relative; top: -1px; } .edge + .edge { text-align: right; } button#btnbuilding { font-family : 'Open Sans Condensed', sans-serif; font-weight : bold; font-size : 16px; color : #55B1A5; color : rgb(85, 177, 165); background-color: #FFFFFF; height: 39px; border-radius: 20px; padding: 0 20px; width: 200px; border: none; position: absolute; bottom: 19px; left: 76px; box-shadow: 0px 3px rgba(136, 136, 136, 0.4); z-index: 3; transition: all .2s ease; outline: none; } .sqf-selected button#btnbuilding { cursor: pointer; } button#btnbuilding:hover span { transform: scale(1.42) !important; transition: all .1s ease; } button#btnbuilding span { opacity: 0; position: absolute; top: -6px; display: inline-block; background-size: 100% auto; background-repeat: no-repeat; width: 12.75px; height: 46.6px; background-image: url(../img/SVG/btn-sparkles-L.svg); left: 5px; transition: all .2s linear; transform: scale(0.5); } button#btnbuilding span + span { width: 14.1px; height: 36.1px; background-image: url(../img/SVG/btn-sparkles-R.svg); right: 7px; left: auto; top: 3px; } button#btnbuilding.ready:hover span { opacity: 1; } button#btnbuilding.sparkly:hover span { left: -7px; transform: scale(1.25); } button#btnbuilding.sparkly:hover span + span { right: -12px; left: auto; } p.description { font-family: 'Open Sans', sans-serif; font-size: 11px; line-height: 12.8px; color: #264653; color: rgb(38, 70, 83); display: inline-block; width: 63%; margin-right: 3%; margin-top: 20px; transition: opacity .2s; } span.roof-img { width: 265.5px; height: 116.4px; background-image: url(../img/SVG/roof-slate.svg); background-size: 265.5px 116.4px; background-repeat: no-repeat; background-position: top left; position: absolute; bottom: 331px; left: 8px; display: block; } span.roof-img.light { background-image: url('../img/SVG/roof-white.svg'); } /*Results*/ #results { width: 536px; height: 345px; background-color: rgba(255, 255, 255, 0.8); box-shadow: 0px 3px rgba(221, 221, 221, 0.5); position: relative; margin-left: 10px; } #slide {} #slide h5 { font-family : 'Open Sans', sans-serif; font-weight : bold; font-size : 23px; color : #264653; color : rgb(38, 70, 83); position: relative; z-index: 2; } .savings h5 { margin-top: 41px; } #slide h2 { font-family: 'Raleway', sans-serif; font-weight: bold; font-size: 90px; line-height: 100px; margin-top: 41px; color: #264653; color: rgb(38, 70, 83); position: relative; z-index: 2; } #slide h2.counter { margin-top: 0; } #slide h2.counter.small-numbers { font-size: 80px; } #slide p { font-family : 'Open Sans', sans-serif; font-size : 21px; font-weight: 300; line-height : 27.86px; color : #264653; color : rgb(38, 70, 83); position: relative; z-index: 2; } .start.hide { display: none; } .start { text-align: center; /*display: none;*/ } .start p { padding: 40px; } .savings { display: none; text-align: center; } .savings.show { display: block; position: relative; overflow: hidden; } #extras { background-color: rgba(255, 255, 255, 0.75); padding: 17px; margin-top: 18px; opacity: 0; transition: opacity .2s ease; } #extras.activate { opacity: 1; } #extras #improvements { width: 47%; display: inline-block; vertical-align: top; } #extras #improvements h3 { font-family : 'Open Sans Condensed', sans-serif; font-weight : bold; font-size : 13px; line-height : 15px; letter-spacing : 0.11px; color : #264653; color : rgb(38, 70, 83); margin-bottom: 10px; } #extras #coins {} #extras #coin-container { display: inline-block; width: 56.1px; margin: 0 3px; vertical-align: top; } #extras #coin-container.one span.image { background-image: url('../img/SVG/coin-sanitizer.svg'); } #extras #coin-container.two span.image { background-image: url('../img/SVG/coin-toilet.svg'); } #extras #coin-container.three span.image { background-image: url('../img/SVG/coin-faucet.svg'); } #extras #coin-container span.image { width: 56.1px; height: 56.1px; background-size: 56.1px; background-position: top left; background-repeat: no-repeat; display: inline-block; } #extras #coin-container p { font-family : 'Open Sans', sans-serif; font-weight : bold; font-size : 10px; line-height : 11px; color : #285466; color : rgb(40, 84, 102); } #reduced { width: 49%; display: inline-block; } #reduced h3 { font-family : 'Open Sans Condensed', sans-serif; font-weight : bold; font-size : 13px; line-height : 15px; letter-spacing : 0.11px; color : #264653; color : rgb(38, 70, 83); margin-bottom: 10px; } #pool { width: 158.7px; height: 77.8px; text-align: right; margin: 0 auto; position: relative; overflow: hidden; } p#pool-number { font-family: 'Raleway', sans-serif; font-size: 60px; padding: 13px 8px; color: #FFFFFF; color: rgb(255, 255, 255); position: relative; top: 11px; z-index: 5; opacity: 0; transition: 0.2s opacity ease-in-out; } #pool .gutters { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 4px solid #2A9D8F; box-sizing: border-box; z-index: 4; } #pool span.wave.one { width: 147px; height: 40px; background-image: url('../img/SVG/wave-big.svg'); background-size: 147px 40px; right: 0; bottom: 0; position: absolute; display: block; z-index: 3; } #pool span.wave.two { width: 114.5px; height: 31.2px; background-image: url('../img/SVG/wave-small.svg'); background-size: 114.5px 31.2px; right: 0; bottom: 0; position: absolute; display: block; z-index: 4; } #pool span.ladder { width: 33.6px; height: 20.6px; background-image: url('../img/SVG/pool-ladder.svg'); background-size: 33.6px 20.6px; left: 11px; top: -7px; position: absolute; display: block; z-index: 6; } #pool span.pool-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #264653; z-index: 1; } .savings span.paint-left { background-repeat: no-repeat; width: 438.9px; height: 124.2px; background-size: 438.9px 124.2px; background-image: url('../img/SVG/savings-cloud-left.svg'); top: 50px; left: -400px; display: block; position: absolute; } .savings span.sparkle-left { background-repeat: no-repeat; width: 55.5px; height: 90.4px; background-size:55.5px 90.4px; background-image: url('../img/SVG/savings-sparkles-left.svg'); top: 56px; left: 2px; display: block; position: absolute; } .savings span.paint-right { background-repeat: no-repeat; width: 438.9px; height: 124.2px; background-size: 438.9px 124.2px; background-image: url('../img/SVG/savings-cloud-right.svg'); top: 50px; right: -400px; display: block; position: absolute; } .savings span.sparkle-right { background-repeat: no-repeat; width: 86.8px; height: 113.8px; background-size: 86.8px 113.8px; background-image: url('../img/SVG/savings-sparkles-right.svg'); top: 56px; right: 2px; display: block; position: absolute; } #small-print { z-index: 2; position: relative; height: 35.7px; width: 100%; position: absolute; background-color: rgba(38, 70, 83, 0.8); bottom: 2px; } #small-print p { font-family: 'Open Sans', sans-serif; font-size: 8px; text-align: center; margin: 6px auto 0; color: #ffffff; width: 536px; position: relative; right: -141px; display: none; } body.TPO #small-print p.TPO { display: block; } body.EPDM #small-print p.EPDM { display: block; } body.MB #small-print p.MB { display: block; } #small-print p a { color: #fff; font-weight: bold; } /*Email Signup*/ #sign-up { visibility: hidden; opacity: 0; background-image: url(../img/SVG/bg-signup-real.svg); background-size: 89% auto; background-position: -40px -170px; background-repeat: no-repeat; height: 0; background-color: #0355A4; box-sizing: border-box; transition: all 0.5s ease-in; } #sign-up.show { visibility: visible; opacity: 1; height: 200px; padding: 30px 0 0; } .sign-up-container { width: 845px; margin: 0 auto; visibility: hidden; opacity: 0; transition: all 0.5s ease-in; } .sign-up-container.show { visibility: visible; opacity: 1; } #details { width: 300px; display: inline-block; vertical-align: top; } #details h5 { font-family : 'Open Sans', sans-serif; font-size : 19px; font-weight: 400; line-height : 27.8px; color : #FFFFFF; color : rgb(255, 255, 255); } #details h5 strong { } #contact-form { width: 538px; display: inline-block; text-align: right; } #contact-form input, #contact-form select { font-family: 'Open Sans Condensed', sans-serif; font-weight: bold; font-size: 13px; line-height: 10px; color: #264653; color: rgb(38, 70, 83); height: 35px; outline: none; border: none; padding: 15px 7px 7px 7px; box-sizing: border-box; margin-bottom: 5px; -webkit-appearance: none; appearance: none; } #contact-form select option { text-transform: uppercase; } #form-row { display: inline-block; } #contact-form h3 { display: none; font-family: 'Open Sans', sans-serif; font-size: 19px; font-weight: 400; line-height: 27.8px; color: #fff; margin-bottom: 30px; } #contact-form #close-form { font-size: 24px; color: #fff; text-align: right; padding: 13px; position: absolute; top: -11px; right: 0px; display: none; cursor: pointer; } #contact-form p.success { font-family: 'Open Sans', sans-serif; font-size: 19px; color: #fff; transition: 0.4s; margin-top: 10px; } .fullname { width: 49.75%; } .address { width: 49.5%; } .city { width: 38%; } .state { width: 11%; } .zip { width: 14%; } .email { width: 34.7%; } #contact-form button { font-family : 'Open Sans Condensed', sans-serif; font-weight : bold; font-size : 14px; color : #FFFFFF; color : rgb(255, 255, 255); height: 35px; padding: 0 20px; border-radius: 20px; background-color: #2A9D8F; border: 0; margin-top: 5px; cursor: pointer; -webkit-appearance: none; appearance: none; } #contact-form .little { display: none; } .error { font-family: 'Open Sans Condensed', sans-serif; font-weight: bold; font-size: 11px; text-transform: uppercase; color: #EC562E; } label.error { position: absolute; padding-left: 9px; padding-top: 2px; } input.error { border-color: #EC562E; } /* Customize the label (the container) */ label#container { display: inline-block; position: relative; margin-bottom: 12px; line-height: 32px; cursor: pointer; width: 32%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-family: 'Open Sans Condensed', sans-serif; font-weight: bold; font-size: 19px; text-align: center; background-color: white; color: #516B75; color: rgb(81, 107, 117); box-shadow: 0px 3px rgba(136, 136, 136, 0.25); margin-top: 20px; } label#container:hover { background-color: #ffc08f; color: white; } label#container.checked { background-color: #F7903F; color: white; } label#container.MB { font-size: 12px; line-height: 12px; padding: 4px 0; text-transform: uppercase; vertical-align: top; } /* Hide the browser's default checkbox */ label#container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .checkmark { display: none; position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } /* On mouse-over, add a grey background color */ label#container:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ label#container input:checked ~ .checkmark { background-color: #2196F3; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ label#container input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ label#container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #menu-toggle { display: none; padding: 0 20px; cursor: pointer; } #menu-toggle h3 { font-family: 'Open Sans Condensed', sans-serif; font-weight: bold; font-size: 14px; line-height: 42px; color: #FFFFFF; color: rgb(255, 255, 255); display: none; } #free-estimate { display: none; } @media screen and (max-width: 1023px) { body { overflow-x: hidden; } #contact-form .little { display: inline; } #contact-form .big { display: none; } #contact-form #close-form { display: block; } div#container { width: 100%; flex-direction: column-reverse; padding: 20px 20px 0; box-sizing: border-box; } #flex-container { display: flex; flex-direction: column-reverse; } #small-print { display: none; } #slide h2 { font-size: 68px; line-height: 80px; } #slide h2.counter { font-size: 60px; } #slide h2.counter.small-numbers { font-size: 55px; } .start p { padding-top: 20px; } #form-section label#container { line-height: 45px; font-size: 18px; } #form-section label#container.MB { padding: 0 0 9px; height: 45px; box-sizing: border-box; } #slide h5 { font-size: 16px; } #form-section .descriptions p { font-size: 13px; padding-top: 10px; } .EPDM #form-section .descriptions p.EPDM { display: inline-block; } .MB #form-section .descriptions p.MB { display: inline-block; } .TPO #form-section .descriptions p.TPO { display: inline-block; } .range-value { font-size: 18px; margin-bottom: 8px; } #calculator-form { width: 100%; height: auto; position: relative; } #building { background-image: none; background-color: #7FC4BC; background-size: 100% auto; background-position: top left; } #form-section { margin-left: 0; padding: 20px; padding: 0; height: auto; } #form-section.number { height: 180px; } #form-section h3 { background-color: #285466; padding: 10px 20px; font-size: 14px; } #form-section p.tool-tip { position: absolute; top: -4px; padding: 18px 18px; font-size: 13px; margin: 0 20px; width: calc(100% - 40px); left: 0; z-index: 4; } #form-section p.tool-tip br { display: none; } #results { width: 100%; height: auto; margin-left: 0; margin-bottom: 40px; } #reduced { width: 100%; } #calculator { height: auto; } span.roof-img { width: 100%; height: 130px; padding: 0 0px; background-size: 100% auto; left: 0; top: -90px; } div.spacer { padding: 20px; } .number .spacer { display: flex; justify-content: space-between; } .number .description { font-size: 13px; line-height: 16px; margin-top: 0; } .input-container { width: auto; margin-top: 0; } input[type="number"] { height: 45px; font-size: 18px; outline: gray; } #menu-toggle { height: 50px; width: calc(100% + 40px); margin-left: -20px; background-color: #285466; } #menu-toggle span { margin-left: 4px; display: inline-block; transform: rotate(180deg); } #menu-toggle.close span { transform: rotate(0); } button#btnbuilding { width: calc(100% - 80px); margin-left: 40px; left: 0; bottom: 20px; height: 42px; position: absolute; } .completed #background span.cloud-left, .completed #background span.cloud-right { display: none; } #extras { background-color: transparent; z-index: 2; position: relative; } #extras #improvements { width: 100%; margin-bottom: 40px; } #extras #improvements h3, #extras #reduced h3 { font-size: 15px; line-height: 18px; margin-bottom: 20px; } #extras #coins { display: inline-block; } .completed #calculator-form { position: fixed; z-index: 7; bottom: -100%; transition: 0.4s ease-out; left: 0; } .completed #calculator-form.show { bottom: 0; } .completed #menu-toggle { position: fixed; bottom: 0; z-index: 10; display: block; } .completed #menu-toggle h3 { display: block; /*padding-left: 20px;*/ line-height: 50px; } .completed div#container { padding-bottom: 180px; } #contact-form { display: none; position: fixed; top: 0; left: 0; background-color: #0355A4; width: 100%; padding: 40px; box-sizing: border-box; height: 100%; z-index: 100; } #contact-form.show { display: block; } form#email-signup { max-width: 400px; margin: 0 auto; } #sign-up { background-size: 128% auto; } #sign-up.show { padding: 0; height: auto; } .sign-up-container { width: 100%; margin: 0; padding: 20px; box-sizing: border-box; display: flex; justify-content: space-between; } #details { width: 60%; } #details h5 { font-size: 14px; line-height: 17px; padding-right: 10px; } #details h5 br:last-child { display: none; } button#free-estimate { display: inline-block; font-family : 'Open Sans Condensed', sans-serif; font-weight : bold; font-size : 16px; color : #FFFFFF; color : rgb(255, 255, 255); height: 35px; padding: 0 20px; border-radius: 20px; background-color: #2A9D8F; border: 0; width: 176px; cursor: pointer; } #contact-form { text-align: center; } #contact-form button { width: 90%; margin: 10px 0; font-size: 17px; } #contact-form h3 { display: block; } #contact-form input { margin-bottom: 12px; width: 100%; } #contact-form input.city { width: calc(100% - 54px); } #contact-form select.state { width: 50px; } #contact-form input.zip { width: 70px; } #contact-form input.email { width: calc(100% - 74px); } } /* One offs */ .br-small { display: none; } @media screen and (max-width: 600px) { #form-section label#container.MB { font-size: 15px; line-height: 16px; padding-top: 5px; } .br-small { display: block; } } @media screen and (max-width: 767px) { .start p { display: none; } .start { padding-bottom: 40px; margin-bottom: 0; } } /* Animations */ .tool-tip { animation-name: floating; animation-duration: 3.5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 3px); } 100% { transform: translate(0, 0px); } } .animation-box { width: 56.1px; height: 56.1px; perspective: 600px; margin-bottom: 5px; } #coin { width: 56.1px; height: 56.1px; position: relative; transition: transform 0.8s; transform-style: preserve-3d; margin-bottom: 5px; } #coin-container + #coin-container #coin { transition: transform 0.95s; } #coin-container + #coin-container + #coin-container #coin { transition: transform 1.1s; } #coin.is-flipped { transform: rotateY(540deg); } .coin-face { position: absolute; height: 100%; width: 100%; backface-visibility: hidden; background-size: 56.1px; background-position: top left; background-repeat: no-repeat; } #coin-container .coin-heads { background-image: url('../img/SVG/coin-money.svg'); background-size: 128% auto !important; /*transform: rotateY( 180deg );*/ } #coin-container.one .coin-tails { background-image: url('../img/SVG/coin-sanitizer.svg'); } #coin-container.two .coin-tails { background-image: url('../img/SVG/coin-toilet.svg'); } #coin-container.three .coin-tails { background-image: url('../img/SVG/coin-faucet.svg'); } .coin-tails { transform: rotateY( 180deg ); } @keyframes move_wave { 0% { transform: translateY(0) translateZ(0) scaleY(1) } 50% { transform: translateY(25%) translateZ(400px) scaleY(0.55) } 100% { transform: translateY(0) translateZ(0) scaleY(1) } } @keyframes move_wavetwo { 0% { transform: translateY(0) translateZ(0) scaleY(1) } 50% { transform: translateY(25%) translateZ(400px) } 100% { transform: translateY(0) translateZ(0) scaleY(1) } } .wave.one { animation: move_wave 7s linear infinite; } .wave.two { animation: move_wavetwo 3s linear infinite; } .wave-container { overflow: hidden; position: absolute; height: 100%; top: 40px; left: 0; width: 100%; transition: 2s ease-out; } .wave-container.rise { top: 0; transition: 1.5s ease-out; } @keyframes move_paint { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 50% { transform: translateX(100px) translateZ(0) scaleY(0.8) } 100% { transform: translateX(100px) translateZ(0) scaleY(0.8) } } @keyframes move_painttwo { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 50% { transform: translateX(-100px) translateZ(0) scaleY(0.8) } 100% { transform: translateX(-100px) translateZ(0) scaleY(0.8) } } span.paint-left { animation: move_paint 4s linear; animation-fill-mode: forwards; } span.paint-right { animation: move_painttwo 4s linear; animation-fill-mode: forwards; } @keyframes pop_out { 0% { transform: scale(1) } 50% { transform: scale(1.2) } 100% { transform: scale(1) } } .pop { animation: pop_out 0.35s linear; } #pool-number { animation-delay: 1.25s; } .activate p#pool-number { opacity: 1; } .slider-box { opacity: 1; transition: opacity .4s; } @keyframes text_glow { 0% { text-shadow: 0 0 0 white; } 20% { text-shadow: 0 0 10px white; } 40% { text-shadow: 0 0 0 white; } 100% { text-shadow: 0 0 0 white; } } .text-glow { animation: text_glow 3.5s linear infinite; }