/* -- End EACH CSS Template -- */ /* ------------------ edit END -- */ /* ------- global ------ */ #stacks_in_2 *{ box-sizing: border-box !important; } #stacks_in_2 .HYPE_document { direction:ltr !important; margin:auto; display: block; width: 100%; max-width: 2800px !important; } /* ------- main BG colour --- background-color: transparent; --- */ #stacks_in_2 .bg-hype-color-css { } /* ------- BG IMG ------ */ #stacks_in_2 .bg-hype-css, #stacks_in_2 .bg-hype-css path { background-size: cover !important; background-image: url(https://images.unsplash.com/reserve/uZYSV4nuQeyq64azfVIn_15130980706_64134efc6e_o.jpg?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEzMjQ5fQ) !important; background-position: 50% 45% !important; filter: contrast(100%) brightness(100%) grayscale(0%) blur(7px) !important; -webkit-filter: contrast(100%) brightness(100%) grayscale(0%) blur(7px) !important; opacity: 100; } @media screen and (min-width: 800px) { #stacks_in_2 .bg-hype-css, #stacks_in_2 .bg-hype-css path { background-attachment: scroll; } } /* filter visibility fixed bg on mobile */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {#stacks_in_2 .bg-hype-css, #stacks_in_2 .bg-hype-css path { background-attachment: scroll; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {#stacks_in_2 .bg-hype-css, #stacks_in_2 .bg-hype-css path { background-attachment: scroll; } } @media only screen and (min-device-width: 834px) and (max-device-width: 834px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {#stacks_in_2 .bg-hype-css, #stacks_in_2 .bg-hype-css path { background-attachment: scroll; } } @media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {#stacks_in_2 .bg-hype-css, #stacks_in_2 .bg-hype-css path { background-attachment: scroll; } } @media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {#stacks_in_2 .bg-hype-css, #stacks_in_2 .bg-hype-css path { background-attachment: scroll; } } @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { #stacks_in_2 .bg-hype-css, #stacks_in_2 .bg-hype-css path { background-attachment: scroll; } } /* source 2 */ @media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) { #stacks_in_2 .bg-hype-css, #stacks_in_2 .bg-hype-css path { background-attachment: scroll; } } @media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) { #stacks_in_2 .bg-hype-css, #stacks_in_2 .bg-hype-css path { background-attachment: scroll; } } @media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {#stacks_in_2 .bg-hype-css, #stacks_in_2 .bg-hype-css path { background-attachment: scroll; } } /* filter visibility fixed bg END */ @media screen and (max-width: 600px) { #stacks_in_2 .bg-hype-css, #stacks_in_2 .bg-hype-css path { } } /* reset 3d with BG fixed */ #stacks_in_2 .bg-hype-css, #stacks_in_2 .bg-hype-css path, #stacks_in_2 .bg-hype-move-img { } #stacks_in_2 .shape-top { } #stacks_in_2 .shape-bottom { } /* shift stripes */ #stacks_in_2 .shape-top-wrapper { margin-top: -14px !important; } #stacks_in_2 .shape-bottom-wrapper { margin-top: 14px !important; } /* shift stripes with BP */ @media only screen and (max-width: ) { #stacks_in_2 .shape-top-wrapper { margin-top: -14px !important; } #stacks_in_2 .shape-bottom-wrapper { margin-top: 14px !important; } } /* stripe style */ #stacks_in_2 .shape-top path, #stacks_in_2 .shape-bottom path { stroke-style: solid !important; fill: rgba(255, 255, 255, 1.00) !important; stroke-width: 0px !important; stroke: rgba(202, 202, 202, 1.00) !important; stroke-dasharray: 2500, 0; stroke-linecap: round; stroke-dashoffset: 0%; } #stacks_in_2 .shape-bottom path { stroke-dasharray: 2500, 0; stroke-linecap: round; stroke-dashoffset: 0%; } /* redu */ /* ------- BG ------ end */ /* ------- slice ------ start */ #stacks_in_2 .inner-slice-wrapper { z-index: 2; position: relative; pointer-events: none; } #stacks_in_2 .inner-slice-vertical-main { display:table; width: 100%; height: 70vh; min-height: 350px; } @media (max-width: 800px) { #stacks_in_2 .inner-slice-vertical-main { } } @media (max-width: 600px) { #stacks_in_2 .inner-slice-vertical-main { } } #stacks_in_2 .inner-slice-vertical-box { display:table-cell; vertical-align:middle; } /* removed width: auto !important; bwlow to fix in IE11 */ #stacks_in_2 .inner-slice-content { pointer-events: auto; margin-left: auto; margin-right: auto; /*margin-top: 5%; margin-bottom: 5%;*/ margin-top: 135px; margin-bottom: 135px; max-width: 1200px; padding: 0px !important; -webkit-animation: fade-slicecss 0.30s ease-in-out both; animation: fade-slicecss 0.30s ease-in-out both; } @keyframes fade-slicecss { 0% {opacity: 0;} 100% {opacity: 1;} } @-webkit-keyframes fade-slicecss { 0% {opacity: 0;} 100% {opacity: 1;} } #stacks_in_2 .inner-slice-content, #stacks_in_2 .inner-slice-content p, #stacks_in_2 .inner-slice-content span, #stacks_in_2 .inner-slice-content [class*="fa fa-"], #stacks_in_2 .inner-slice-content h1, #stacks_in_2 .inner-slice-content h2, #stacks_in_2 .inner-slice-content h3, #stacks_in_2 .inner-slice-content h4, #stacks_in_2 .inner-slice-content h5, #stacks_in_2 .inner-slice-content h6 { -webkit-font-smoothing: antialiased; color:#FFFFFF !important; } #stacks_in_2 .inner-slice-content a:link [class^="fa fa-"], #stacks_in_2 .inner-slice-content a:visited [class^="fa fa-"], #stacks_in_2 .inner-slice-content a:link, #stacks_in_2 .inner-slice-content a { color:#FFCBD6 !important; } #stacks_in_2 .inner-slice-content a:hover [class^="fa fa-"], #stacks_in_2 .inner-slice-content a:active [class^="fa fa-"], #stacks_in_2 .inner-slice-content a:hover { color:#FFFFFF !important; } #stacks_in_2 .inner-slice-content { } /* ------- slice ------ end */ /* scroll button */ #stacks_in_2 .scrollButton-element { display: block !important; position: absolute; left: 0; z-index: 5; margin-right: auto; margin-left: auto; right: 0; bottom: 0%; border-radius: 55px; -webkit-border-radius: 55px; -moz-border-radius: 55px; padding: 0; width: 92px; display: block; -webkit-animation: element-button_pulse 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; -moz-animation: element-button_pulse 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: element-button_pulse 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-iteration-count: 2; animation-delay: 0.1s; text-align: center !important; } @keyframes element-button_pulse { 0%{ opacity: 1; transform: scale(1.0) translate(0px, 0px); -moz-transform: scale(1.0) translate(0px, 0px); -webkit-transform: scale(1.0) translate(0px, 0px);} 30%{ opacity: 0.8; transform: scale(0.9) translate(0px, 4px); -moz-transform: scale(0.9) translate(0px, 4px); -webkit-transform: scale(0.9) translate(0px, 4px);} 75%{ opacity: 1; transform: scale(1.0) translate(0px, 0px); -moz-transform: scale(1.0) translate(0px, 0px); -webkit-transform: scale(1.0) translate(0px, 0px); } 100%{ opacity: 1; transform: scale(1.0) translate(0px, 0px); -moz-transform: scale(1.0) translate(0px, 0px); -webkit-transform: scale(1.0) translate(0px, 0px);} } @-webkit-keyframes element-button_pulse { 0%{ -webkit-transform: scale(1.0) translate(0px, 0px); opacity: 1;} 30%{-webkit-transform: scale(0.9) translate(0px, 4px); opacity: 0.8;} 75%{ -webkit-transform: scale(1.0) translate(0px, 0px); opacity: 1;} 100%{ -webkit-transform: scale(1.0) translate(0px, 0px); opacity: 1;} } #stacks_in_2 .scrollButton-element a { font-size: 66px !important; line-height: 1em; transition: 0.06s linear; -webkit-transition: 0.06s linear; -moz-transition: 0.06s linear; -webkit-animation: element-button_pulse_initial 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; -moz-animation: element-button_pulse_initial 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: element-button_pulse_initial 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-iteration-count: 1; animation-delay: 0.4s; color: #DD9CAA !important; } #stacks_in_2 .scrollButton-element [class^="fa fa-"], #stacks_in_2 .scrollButton-element #stacks_in_2 [class*="fa fa-"] { color: #DD9CAA !important; } @keyframes element-button_pulse_initial { 0%{ opacity: 0; } 100%{ opacity: 1;} } @-webkit-keyframes element-button_pulse_initial { 0%{ opacity: 0;} 100%{ opacity: 1;} } #stacks_in_2 .scrollButton-element a:hover { text-shadow: 0 0 7px rgba(0, 0, 0, 0.2); } #target-popbands { position: absolute; height: 0px; width: 100%; bottom: 0px; } @media only screen and (max-height: 601px) { #stacks_in_2 .scrollButton-element { display: none !important; } #stacks_in_2 .scrollButton-element a { font-size: 0 !important; display: none !important; } } /* new UPG button animated on mouse over */ #stacks_in_2 .scrollButton-element [class^="fa fa-"] { transition: all 0.15s linear; -moz-transition: all 0.15s linear; -webkit-transition: all 0.15s linear; } #stacks_in_2 .scrollButton-element [class^="fa fa-"]:active {transform: scale(0.75) !important; -webkit-transform: scale(0.75) !important; -moz-transform: scale(0.75) !important; } /* scroll button end */ /* --- HYPE ELEMENTS---- */ #stacks_in_2 .bg-grid { } #stacks_in_2 .bg-grad { background: linear-gradient(0deg, rgba(255, 186, 205, 1.00) 3%, rgba(58, 31, 43, 0.42) 71%); } #stacks_in_2 .bg-hype-shading-box { /*background-color: #000000;*/ background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(rgba(221, 156, 170, 0.42)), to(rgba(142, 100, 117, 1.00))); background-image: -webkit-radial-gradient(50% 50%, rgba(221, 156, 170, 0.42), rgba(142, 100, 117, 1.00)); background-image: -moz-radial-gradient(50% 50%, rgba(221, 156, 170, 0.42), rgba(142, 100, 117, 1.00)); background-image: radial-gradient(50% 50%, rgba(221, 156, 170, 0.42), rgba(142, 100, 117, 1.00)); } #stacks_in_2 .bgscale-trigger { opacity: 0.7; top: 10vh !important; } #stacks_in_2 .shading-trigger { opacity: 0.7; top: 10vh !important; } #stacks_in_2 .top-trigger { opacity: 0.7; top: 10vh !important; } /* -- End EACH CSS Template end -- */#stacks_in_3>.s3_row { margin: 0 -0px; } #stacks_in_3>.s3_row>.s3_column_left { width: 50.00%; } #stacks_in_3>.s3_row>.s3_column_right { width: 50.000000%; } #stacks_in_3>.s3_row>.s3_column { padding: 0 0px; } @media only screen and (max-width: 770px) { #stacks_in_3>.s3_row { margin: -0px 0; } #stacks_in_3>.s3_row>.s3_column { padding: 0px 0; width:100%; } } @media only screen and (max-width: 400px) { } #stacks_in_3 { padding: 11px 13px 6px 16px; } #stacks_in_23 h1,#stacks_in_23 h1 a,#stacks_in_23 p,#stacks_in_23 p a{ color:rgba(153, 153, 153, 1.00); -webkit-font-smoothing: antialiased; transition: color 0.2s ease-in-out; font-style:normal; text-decoration:none; text-align:left; font-weight: bolder ; font-variant:small-caps; text-shadow: 0px 1px 1px rgba(85, 85, 85, 1.00); } #stacks_in_23 p a:hover, #stacks_in_23 h1 a:hover{ color:rgba(204, 204, 204, 1.00); } #stacks_in_25 h3,#stacks_in_25 h3 a,#stacks_in_25 p,#stacks_in_25 p a{ color:rgba(153, 153, 153, 1.00); -webkit-font-smoothing: antialiased; transition: color 0.2s ease-in-out; font-style:normal; text-decoration:none; text-align:left; font-weight: bold ; text-shadow: 0px 1px 1px rgba(85, 85, 85, 1.00); } #stacks_in_25 p a:hover, #stacks_in_25 h3 a:hover{ color:rgba(204, 204, 204, 1.00); } #stacks_in_4 { padding: 0px 15px 20px 15px; } #stacks_out_4 { margin-left:0; } #stacks_out_7 { width: 140px; } #stacks_in_11 { margin: 30px 0px 0px 0px; } #stacks_out_11 { width: 250px; } #stacks_in_19 { background-color: rgba(65, 114, 154, 1.00); border: solid rgba(77, 77, 77, 1.00); border-width: 2px; } #stacks_in_85>.s3_row { margin: 0 -10px; } #stacks_in_85>.s3_row>.s3_column_left { width: 33.33%; } #stacks_in_85>.s3_row>.s3_column_center { width: 33.339996%; } #stacks_in_85>.s3_row>.s3_column_right { width: 33.33%; } #stacks_in_85>.s3_row>.s3_column { padding: 0 10px; } @media only screen and (max-width: 770px) { } @media only screen and (max-width: 400px) { #stacks_in_85>.s3_row { margin: -10px 0; } #stacks_in_85>.s3_row>.s3_column { padding: 10px 0; width:100%; } } #stacks_in_75 { position: absolute; z-index: 300; width: 100px; font-size: 14px; } #stacks_in_75 { top: 3%; right: 3%; float: right; }