/*LAYOUT*/ .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { padding-left: 0px; padding-right: 0px; } .container {padding-left:0px; padding-right: 0px;} .row {margin-left: 0px; margin-right: 0px;} #headerhidden { position: relative; height: 70px !important; width:100%; margin-left: 0%; margin-right: 0%; max-width:100%; } #header { max-width:100%; } header#hero > .container { width: 100%; margin-left: 0%; margin-right: 0%; } #header2 { display: none; } .container { max-width: 100% !important; } main > .container, .container2, .container3 { width: 100%; max-width: 100%; margin-left: 0%; margin-right: 0%; padding-left:0px; padding-right: 0px; } footer { width: 100%; margin-left: 0%; margin-right: 0%; padding-left: 10%; padding-right: 10%; } body > footer #footer-nav ul li a { font-family: "Circular-Book", Arial; color: #004ea8; } #optionally-add-video, #optionally-add-video_2, #benefits, #benefits2, #key-features, #intermediate-cta-section, #quotes-recommendations_heading, #form-section, #container3 > #about-genetec { padding-left: 10%; padding-right: 10%; padding-top: 50px; padding-bottom: 50px; } /*HEADERS & FONTS*/ h1 { margin-bottom: 20px !important; } div.mktoText > h1 { font-family: "Circular-Medium", Arial; color: #000000; font-weight: 600; } #header-content > #slogan-container { margin-top: 0px !important; } #header-content > #slogan-container > #slogan > p { padding-bottom:0px; } #header-content > #slogan-container > #slogan > p, #header-content > #slogan-container > #slogan > h2, #header-content > #slogan-container > #slogan > h1 { color: #ffffff; } .fa.fa-stack-1x.fa-fw.fa-linkedin, .fa.fa-stack-1x.fa-fw.fa-facebook, .fa.fa-stack-1x.fa-fw.fa-twitter, .fa.fa-stack-1x.fa-fw.fa-envelope { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #header-content > #slogan-container > #slogan > h2 { font-family: "Circular-Book", Arial; font-size: 20px; margin-top: 20px; margin-bottom: 20px; line-height: 1.5; } body > main { line-height: 1.5; } @media only screen and (max-width: 767px) { #header-content > #slogan-container > #slogan > h2, #videodescription > .video-headline > p, body > main, #videodescription2 > .video-headline > p, body > main { font-size: 16px; line-height: 1.2; } } /*HERO*/ #header-content > #slogan-container { margin-top: 95px; } #header-content > #slogan-container > #slogan { background-color: rgba(64, 60, 60, 0.2); width: 100%; height: 100%; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; flex-direction: column; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; padding: 0% 50% 0% 10%; } @media only screen and (max-width: 950px) { #header-content > #slogan-container > #slogan { padding: 0% 0% 0% 10%; } } body > header #slogan { margin-top:0px; margin-bottom:0px; } @media only screen and (min-width: 992px) { body#top > header#hero { min-height: 420px !important; height: 420px !important; } } .video-cta-button { display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; } .video-cta-button-hero { font-size: 18px; font-family: 'Circular-Medium', Arial; min-width: 200px; height: 3em; color: #ffffff; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items:center; -ms-flex-align: center; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; text-align: center; background-color: rgba(0,78,168,1); transition: all .7s; } .video-cta-button-hero:hover, .video-cta-button-hero:focus, .video-cta-button-hero:active{ background-color: rgba(0,78,168,0.7); color: #ffffff; text-decoration: none; transition: all .7s; } .video-cta-button:hover,.video-cta-button:focus,.video-cta-button:active { opacity: 0.8;transition: all .9s; } .video-cta-button-hero > a { color: #ffffff; width:100%; height:100%; color: #ffffff; text-decoration: none; transition: all .7s; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items:center; -ms-flex-align: center; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .video-cta-symbol-hero { width: 54px; text-align: center; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items:center; -ms-flex-align: center; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; background: rgba(255,255,255,1); transition: all .7s; } .video-cta-symbol-hero:hover, .video-cta-symbol-hero:focus, .video-cta-symbol-hero:active { background: rgba(255,255,255,0.7); transition: all .7s; } .video-cta-symbol-hero > a { height: 100%; width: 100%; text-align: center; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items:center; -ms-flex-align: center; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .video-cta-symbol-hero > a > svg { stroke: #004ea8; fill: #004ea8; } @media only screen and (max-width: 767px) { .video-cta-button { height:52px; } .video-cta-button-hero { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; align-items:center; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; -o-align-items:center; -ms-flex-align: center; } } #slogan-container-wrapper { background-image: url("http://info.genetec.com/rs/752-WRB-240/images/GENE-Events-Mkto-Page-Background-Generic.png"); -webkit-animation: fadein 12s; /* Safari and Chrome */ -moz-animation: fadein 2s; /* Firefox */ -ms-animation: fadin 2s; /* Internet Explorer */ -o-animation: fadin 2s; /* Opera */ animation: fadein 2s; background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 1; height:100%; width:100%; } @keyframes fadein { from {opacity: 0;} to {opacity: 1;} } /* Firefox */ @-moz-keyframes fadein { from {opacity: 0;} to {opacity: 1;} } /* Safari and Chrome */ @-webkit-keyframes fadein { from {opacity: 0;} to {opacity: 1;} } /* Internet Explorer */ @-ms-keyframes fadein { from {opacity: 0;} to {opacity: 1;} } /* Opera */ @-o-keyframes fadein { from {opacity: 0;} to {opacity: 1;} } /*MENU*/ @media screen and (max-width: 1300px) { #header > #nav { display: none; } .mobile-nav-button { display: block !important; z-index: 9888000000 !important; position: relative !important; margin-top: 0px !important; } } #header { margin-left: 10%; margin-right: 10%; width: 90%; display: -webkit-flex !important; display: -ms-flex !important; display: -ms-flexbox !important; display: flex !important; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items:center; -ms-flex-align: center; min-height:70px; height: 70px; } #header2 { padding: 0px 0px 140px 0px; } #headerhidden { display: block; padding: 0px 0px 65px 0px; } #ribbon { display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -ms-flex-align: center; background: #ffffff; position: fixed; width:100%; } #header > .logo { position: inherit !important; width: 20%; margin-top: 0px !important; } #header > #nav { width: 80%; } #header > #nav > ul { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -ms-flex-align: center; height: inherit; line-height: inherit; list-style: none; margin: 0; padding: 0 0.35em; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; -moz-justify-content: flex-end; -webkit-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end; -ms-flex-pack: end; } /*Header Vision*/ #header nav ul { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -ms-flex-align:center; height: inherit; line-height: inherit; list-style: none; margin: 0; padding: 0 0.35em; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; -moz-justify-content: flex-end; -webkit-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end; -ms-flex-pack: end; } #header nav ul li { padding: 0; margin: 0 0 0 0.35em; text-align: center; } #header nav ul li a { -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; display: block; border: 0; line-height: 1.5; height: 3em; border-radius: 4px; padding: 0 2em; font-family: "Circular-Black","Bitter", serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.7em; outline: 0; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; align-items:center; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; -o-align-items:center; -ms-flex-align: center; } #header nav ul li a:hover, #header nav ul li a:active, #header nav ul li a:focus { background-color: rgba(4, 88, 156, 0.15); text-decoration: none; } #header nav ul li a:active { background-color: rgba(255, 255, 255, 0.3); text-decoration: none; } #header nav ul li:first-child { margin-left: 0; } #header nav ul li.active a { background-color: #ffffff; color: #04589c; } @media screen and (max-width: 980px) { #header nav ul li { width: 100%; } #header nav ul li a { padding: 0 1.5em; } #header nav ul li a .extra { display: none; } } @media screen and (max-width: 736px) { #header { display: none; } } /*Mobile Menu*/ #overview{overflow-x:hidden;overflow-y:auto;} #header {z-index: 50000000;} #main > nav {opacity:0;} #main nav > * {background-image: url(/rs/752-WRB-240/images/arrow-vision3.svg);background-size: 105% !important;} #main nav {-moz-justify-content: space-between;-webkit-justify-content: space-between;-ms-justify-content: space-between;justify-content: space-between;height: 100%;} #main nav > * {width: 3em;height: 3em;margin: 0 1.5em;background-size: 45%;} /*TN*/ #header nav ul li a {text-transform:none;font-family: "Circular-Book","Bitter", serif;} #header nav ul {justify-content: flex-end;} #header nav ul li.active a {background:rgba(255,255,255,0);color:#ffffff;} #nav > ul > li:last-child { color: #ffffff; height:65%; margin-left:1em;display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; align-items:center; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; -o-align-items:center; -ms-flex-align: center; } #nav > ul > li:last-child > a {padding: 0 1em; -ms-flex-negative: 1; flex-shrink:1; -moz-flex-shrink:1; -webkit-flex-shrink:1; -ms-flex-shrink:1; -o-flex-shrink:1; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; align-items:center; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; -o-align-items:center; -ms-flex-align: center; min-width: 200px; min-height:0; color: #ffffff; background-color: rgba(255,158,27,1); border-radius: 0px; transition: all .8s; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; text-align: center; } #nav > ul > li:last-child > a:hover, #nav > ul > li:last-child > a:focus, #nav > ul > li:last-child > a:active { background-color: rgba(255,158,27,0.6); color: #ffffff; transition: all .8s; } #header nav ul li a{letter-spacing: 0;font-size: 1.1em;} /*TN End*/ /*Sliders*/ /*Sliders End*/ /*Mobile Menu*/ .mobile-nav-button {display:none;z-index: 9888000000;position:relative;margin-top: 0px;} .mobile-menu { display: block; max-width: 500px; width: 100%; right: -100%; height: 100vh; background: rgba(230,230,230,0.99); position: fixed; z-index: 999800000; transition: 0.6s ease; top: 0; opacity: 0; } .mobile-menu ul { position: relative; top: 50%; transform: translateY(-50%); padding: 0; } .mobile-menu ul li { list-style: none;padding: 0% 0%; } .mobile-menu ul li a { width: 100%; max-width: 1200px; margin: 0 auto; display: block; text-align: center; text-decoration: none; color: #04589c; font-size: 2rem; font-weight: bold; overflow: hidden; position: relative; border-bottom: 1px solid #04589c; } .mobile-menu ul li a:after { content: ''; background: #04589c; width: 100%; height: 100%; position: absolute; right: -100%; top: 0; z-index: -1; transition: 0.4s ease; } .mobile-menu ul li a:hover { color: #fff; } .mobile-menu ul li a:hover:after { right: 0; } .mobile-menu img { position: absolute; width: 150px; display: block; left: 50%; top: 3rem; transform: translatex(-50%); padding: 0; text-align: center; } .mobile-menu--open { right: 0; opacity: 1; } /*Button*/ .mobile-nav-button { width: 35px; position:fixed; margin: 0px; right: 0; top: 0; z-index: 9888000000; cursor: pointer; width: 35px; height: 30px; margin-right: 10%; } .mobile-nav-button .mobile-nav-button__line { width: 100%; height: 4px; background: #004ea8; position: relative; transition: 1s ease; } .mobile-nav-button .mobile-nav-button__line:nth-of-type(2) { margin: 0.5rem 0; } .mobile-nav-button .mobile-nav-button__line--1 { transform: rotate(45deg); top: 13px; position: absolute; } .mobile-nav-button .mobile-nav-button__line--2 { display: none; } .mobile-nav-button .mobile-nav-button__line--3 { transform: rotate(135deg); top: 13px; position: absolute; } /*End Mobile Menu*/ /*Arws*/ #nav-arrow-cell-1 { width:100%; text-align:center; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; align-items:center; -moz-align-items: flex-end; -webkit-align-items: flex-end; -ms-align-items: flex-end; -o-align-items:flex-end; align-items: flex-end; ms-flex-align:end; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; height:6%; } #nav-arrow-cell-1 > #nav-arrow {margin-bottom:5%;margin-left:-0.99%;} #nav-arrow-cell-2 { width:100%; text-align:center; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; align-items:center; -moz-align-items: flex-end; -webkit-align-items: flex-end; -ms-align-items: flex-end; -o-align-items:flex-end; align-items: flex-end; ms-flex-align:end; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; padding:0% 0% 1% 0%; height:3%; margin-left:1.3%; } #nav-arrow-cell-3 { width:100%; text-align:center; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; align-items:center; -moz-align-items: flex-end; -webkit-align-items: flex-end; -ms-align-items: flex-end; -o-align-items:flex-end; align-items: flex-end; ms-flex-align:end; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; padding:0% 0% 1% 0%; height:3%; margin-left:1.3%; } #nav-arrow-cell-4 > #nav-arrow {margin-left:-0.99%;} #nav-arrow{background-image: url(/rs/752-WRB-240/images/arrow-vision-vertical2.svg); position:absolute; margin-bottom:5px; background-position: center center; background-repeat: no-repeat; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 0px solid rgba(233,70,103,0); display: block; left: 49%; margin-left: -2em; overflow: hidden; position: absolute; white-space: nowrap; width: 65px; height:65px; z-index: 100; transition: all 0.6s; bottom: 0.5em; display: block; overflow: hidden; text-indent: 4em; } .extra-arrow {margin-left: -1.5em !important;} /*Arws*/ /*Screens & Devices*/ @media screen and (max-width: 1300px) { .mobile-nav-button {display:block;z-index: 9888000000;position:relative;margin-top: 0px;} #mission-text {font-size:2em;} #header > #nav {display:none;} .extra-arrow {margin-left: -1.5em !important;} } @media screen and (max-width: 736px) { #header {display: block;} #header nav {display: none;} #mission-text {font-size:1.5em;} #video-headline > h2 {font-size:1.5em;} #findoutmore {padding: 5% 5% 0% 5%;} .mobile-nav-button {display:block;z-index: 9888000000;position:relative;margin-top: 15px;} #header > #nav {display:none;} .extra-arrow {margin-left: -2em !important;} } @media screen and (max-width: 500px) { #mission-text {font-size:1.5em;} #video-headline > h2 {font-size:1.5em;} #findoutmore {padding: 5% 5% 0% 5%;} .mobile-nav-button {display:block;z-index: 9888000000;position:relative;margin-top: 15px;} #header > #nav {display:none;z-index: 9888000000;} #illustrationbottom {width: inherit;} .extra-arrow {margin-left: -2em !important;} #main .slide > .inner > h2 {color: #04589c; font-size:1.5em;} #main .slide > .inner > p {font-size:1em; line-height:1.5; font-weight:700;} } @media screen and (min-width: 992px) and (max-width: 1680px) { #city-fact-header > p {font-size: 40px !important;} } @media screen and (min-width: 1681px) and (max-width: 1900px) { .extra-arrow {margin-left: -0.8em !important;} #city-fact-header > p {font-size: 40px !important;} } @media screen and (min-width: 1901px) { .extra-arrow {margin-left: -0.6em !important;} .video-section-stats-box1-upper, .video-section-stats-box2-upper, .video-section-stats-box3-upper, #city-fact-header > p {font-size: 60px !important;} .video-section-stats-box1-lower, .video-section-stats-box2-lower, .video-section-stats-box3-lower {font-size: 24px;} #city-fact-text > p {font-size: 24px !important; line-height: 1 !important;} } /*VIDEO SECTION*/ #mobile-video-h1 { display: none; } #optionally-add-video, #optionally-add-video_2 { width:100%; display: -moz-flex !important; display: -webkit-flex !important; display: -ms-flex !important; display: -ms-flexbox !important; display: flex !important; } #video { width:100%; } #videodescription, #videodescription2 { padding-right: 10%; } #videodescription2 > .video-headline > p { font-size: 18px; font-family: "Circular-Book", Arial; } #video > #videodescription > h1, #video2 > #videodescription2 > h1 { font-family: "Circular-Medium", Arial; color: #000000; font-weight: 600; } .video-section-stats { display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; padding: 20px 0px 20px 0px; width:100%; } .video-section-stats > div > div > p { margin: 0px; } .video-section-stats > div { line-height: 1; } .video-section-stats-box1, .video-section-stats-box2, .video-section-stats-box3 { display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; width:30%; } .video-section-stats-box2 { margin: 0% 5% 0% 5%; } .video-section-stats-box1-upper, .video-section-stats-box2-upper, .video-section-stats-box3-upper { font-family: 'Circular-Black', Arial; font-size: 40px; text-align: center; color: #004ea8; } .video-section-stats-box1-lower, .video-section-stats-box2-lower, .video-section-stats-box3-lower { font-family: 'Circular-Book', Arial; text-align: center; color: #004ea8; } /*FLICKITY*/ /* external css: flickity.css */ * { box-sizing: border-box; } body { font-family: sans-serif; } .carousel { background: #EEE; } .carousel-cell { width: 66%; height: 200px; margin-right: 10px; background: -webkit-linear-gradient(321deg, rgb(248, 247, 245) 0%, rgb(209, 209, 209) 93%, rgb(190, 189, 187) 100%); background: -o-linear-gradient(321deg, rgb(248, 247, 245) 0%, rgb(209, 209, 209) 93%, rgb(190, 189, 187) 100%); background: -ms-linear-gradient(321deg, rgb(248, 247, 245) 0%, rgb(209, 209, 209) 93%, rgb(190, 189, 187) 100%); background: -moz-linear-gradient(321deg, rgb(248, 247, 245) 0%, rgb(209, 209, 209) 93%, rgb(190, 189, 187) 100%); background: linear-gradient(129deg, rgb(248, 247, 245) 0%, rgb(209, 209, 209) 93%, rgb(190, 189, 187) 100%); border-radius: 5px; counter-increment: carousel-cell; } /* cell number */ .carousel-cell:before { display: block; text-align: center; content: counter(carousel-cell); line-height: 200px; font-size: 80px; color: white; } /*SECTIONS*/ /*VIDEO*/ @media only screen and (max-width: 991px) { #optionally-add-video, #optionally-add-video_2 { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } #mobile-video-h1 { display: block; } #mobile-video-h1 > div { font-family: "Circular-Medium", Arial; color: #000000; font-weight: 600; } body > main .youtube_caption { margin: 0px; } #videodescription, #videodescription2 { padding-right: 0%; padding-top: 20px; } #video { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; -o-flex-direction: column-reverse; flex-direction: column-reverse; } #videodescription > h1, #videodescription2 > h1 { display: none; } .video-section-stats { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } .video-section-stats-box1, .video-section-stats-box2, .video-section-stats-box3 { -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; } .video-section-stats-box2 { padding: 0% 0% 0% 0%; } .video-section-stats-box1-lower, .video-section-stats-box2-lower, .video-section-stats-box3-lower { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; align-items:center; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; -o-align-items:center; -ms-flex-align: center; } .video-section-stats-box1-upper, .video-section-stats-box2-upper, .video-section-stats-box3-upper { padding-right: 10%; } .video-section-stats > div > div > p { text-align:left; } .video-section-stats-box2 {margin: 20px 0px 20px 0px;} } /*BENEFITS*/ #solutions_heading > h3 { font-family: "Circular-Book", Arial; text-transform: uppercase; color: #848484; text-align: center; padding-bottom: 20px; } #benefits { background-color: #f3f2f0; } #benefits2 { background-color: #ffffff; } #product_definition_copy, #product_definition_copy2 { padding-right: 10%; } #product_definition_copy > p, #product_definition_copy2 > p, body > main #benefits p, body > main #benefits2 p { text-align: left; font-family: 'Circular-Book', Arial; } #benefit-one, #benefit-two, #benefit-three { font-family: 'Circular-Book', Arial; text-align: center !important; } #solutions-cards-container { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; width:100%; -moz-justify-content: space-around; -webkit-justify-content: space-around; -ms-justify-content: space-around; -o-justify-content: space-around; justify-content: space-around; -ms-flex-pack: space-around; } #solutions-card-1, #solutions-card-2, #solutions-card-3 { background-color: #fff; padding: 15px; width:30%; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } #solutions-card-2 { margin: 0% 5% !important; } .solutions-cards-logo { text-align: center; } .solutions-cards-logo > img { width: 100%; max-width: 120px; } .solutions-cards-tb { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -moz-justify-content: space-between; -webkit-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; height: 100%; } .solutions-cards-text { padding: 10px 0px; } .solutions-cards-button { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; text-align: center; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } body > main #benefits .row div, body > main #benefits2 .row div {margin: 0px 0px !important;} .solutions-cards-button > a.bluebutton, .solutions-cards-button > a.bluebutton:hover, .solutions-cards-button > a.bluebutton:focus, .solutions-cards-button > a.bluebutton:active { padding: 10% 15%; white-space: nowrap; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; width:90%; } #benefits2 > .row > div > .mktoImg { padding: 2%; } #benefits2 > .row > div > .mktoImg > img { width: 100%; } @media only screen and (max-width: 991px) { #product_definition_copy, product_definition_copy2 { padding-right: 0%; } #benefits2 > .row > div > .mktoImg { padding: 0%; } } @media only screen and (max-width: 767px) { #solutions-cards-container { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } #solutions-cards-container > #solutions-card-2 { margin: 20px 0px 20px 0px !important; } #solutions-card-1, #solutions-card-2, #solutions-card-3 { width: 100%; } .solutions-cards-tb { -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; } .solutions-cards-button { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -moz-justify-content: flex-end; -webkit-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end; -ms-flex-pack: flex-end; } .solutions-cards-logo { text-align: left; } .solutions-cards-text > #benefit-one, .solutions-cards-text > #benefit-two, .solutions-cards-text > #benefit-three { text-align: left !important; padding: 0% 5% 0% 0%; } } /*KEY FEATURES*/ #key-features { padding-top: 10%; padding-bottom: 10%; position: relative; } #key-features-one { background-color: rgba(255, 158, 27, 0) !important; } #key-features-two { background-color: rgba(0,78,168,0.7) !important; padding: 5% } #key-features-two > h1 { color: #ffffff; } #key-features-two > ul, #key-features-three > ul { margin-left: 0px; } #key-features-two > ul > li, #key-features-three > ul > li { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -moz-align-items: flex-start; -webkit-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; -ms-flex-align: flex-start; } #key-features-two > ul > li > i, #key-features-three > ul > li > i { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; } .fa-long-arrow-right:before { margin-top: -15%; } #key-features-two > ul > li > .fa-circle, #key-features-three > ul > li > .fa-circle { display: none; } #key-features-two > ul > li > .fa-lightbulb-o, #key-features-two > ul > li > .fa-long-arrow-right, #key-features-three > ul > li > .fa-lightbulb-o, #key-features-three > ul > li > .fa-long-arrow-right { font-size: 50px; min-width: 70px; } #key-features-two > ul > li > .fa-lightbulb-on, #key-features-three > ul > li > .fa-lightbulb-on { font-size: 40px; min-width: 70px; } #key-features-three > ul > li, #key-features-three > ul > li > i { color: #000000; } .fa-long-arrow-right:before { font-weight: 100; } @media only screen and (max-width: 767px) { #key-features-two > ul > li:nth-child(1), #key-features-three > ul > li:nth-child(1) { align-items:center; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; -o-align-items:center; -ms-flex-align: center; } #key-features-two > ul > li > .fa-lightbulb-on,#key-features-two > ul > li > .fa-long-arrow-right, #key-features-three > ul > li > .fa-lightbulb-on,#key-features-three > ul > li > .fa-long-arrow-right { font-size: 30px; min-width: 50px; } } /*INTERMEDIATE CTA*/ #intermediate-cta-section { background-color: #d6d2cd; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; text-align: center; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -ms-flex-align:center; } #intermediate-cta-section_heading { padding: 0px 50px; } #intermediate-cta-section_heading > h3 { color: #000000; margin: 0px; } a.bluebutton { font-family: 'Circular-Medium', Arial; padding: 10px 40px; background-color: rgba(0,78,168,1); color: #ffffff; transition: all .7s; white-space: nowrap; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; align-items:center; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; -o-align-items:center; -ms-flex-align: center; max-height: 50px; } a.bluebutton:hover, a.bluebutton:focus, a.bluebutton:active { padding: 10px 40px; background-color: rgba(0,78,168,0.6); color: #ffffff; transition: all .7s; text-decoration: none; } body > main #benefits i.benefits-icon, body > main #benefits2 i.benefits-icon { width:100%; } #solutions-cards { width:100%; } #solutions-cards > .col-sm-12.col-md-4 { width:30%; } #solutions-cards > div:nth-child(2) { margin: 0% 5%; } @media only screen and (max-width: 767px) { #intermediate-cta-section { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; padding: 20px 5%; } #intermediate-cta-section_heading { padding-bottom: 20px; padding-left: 0px; padding-right: 0px; } } /*ABOUT*/ #about-genetec { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; } #container3 > #about-genetec { background-color: #004ea8; } #about-genetec_heading > h1 { color: #ffffff; } #about-genetec_text { padding: 0% 15% 0% 0%; } #about-genetec_text > p { font-family: 'Circular-Book', Arial; color: #ffffff; line-height: 1.5; font-size: 18px; } #about-genetec_text > p > a { font-family: 'Circular-Medium', Arial; color: #ffffff; } #about-diagram-image { text-align: center; padding: 0% 5% 15% 5%; } #about-diagram-image > img { width: 100%; max-width: 450px; } @media only screen and (max-width: 991px) { #about-genetec_text { padding: 0% 0% 0% 0%; } } /*QUOTES*/ #quotes-recommendations_heading {text-align: center;} #quotes-recommendations_heading > h1 {color: #000000;} .flickity-viewport { background: #ffffff; } .flickity-enabled.is-draggable, .flickity-viewport { min-height:400px !important; } .flickity-slider > .carousel-cell { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; min-height:400px !important; background-size: cover; background-repeat: no-repeat; background-position-x: 95%; background-position-y: center; } .carousel-cell:before { display: none; } .gen-quote { font-family: 'Circular-Medium',Arial; color: #000; font-size: 30px; width: 50%; padding: 0% 0% 0% 5%; line-height:1; font-weight:600; } .quote-author-name, .quote-author-position { font-family: 'Circular-Book',Arial; color: #004ea8; font-size: 20px; padding: 0% 50% 0% 5%; margin: 0px; height: 25px; } .quote-author-name { text-transform: uppercase; } .flickity-button { background: rgba(0,78,168,1); transform: all .7s; } .flickity-button:hover, .flickity-button:focus, .flickity-button:active { background: rgba(0,78,168,0.7); transform: all .7s; } .flickity-button-icon { fill: #ffffff; } .flickity-prev-next-button { border-radius: 0px; } @media only screen and (min-width: 1700px) { .flickity-viewport, .flickity-slider > .carousel-cell { height: 500px !important; min-height: 500px !important; } } @media only screen and (max-width: 900px) { .flickity-slider { transform: translateX(0%); !important; } .carousel-cell { width:95% !important; } #quotes-recommendations > div.carousel.flickity-enabled.is-draggable > div > div > div:nth-child(1) {left: 0%;} #quotes-recommendations > div.carousel.flickity-enabled.is-draggable > div > div > div:nth-child(2) {left: 100%;} #quotes-recommendations > div.carousel.flickity-enabled.is-draggable > div > div > div:nth-child(3) {left: 200%;} #quotes-recommendations > div.carousel.flickity-enabled.is-draggable > div > div > div:nth-child(4) {left: 300%;} #quotes-recommendations > div.carousel.flickity-enabled.is-draggable > div > div > div:nth-child(5) {left: 400%;} .gen-quote, .quote-author-name { padding: 0% 0% 0% 8%; } .quote-author-position { padding: 0% 50% 0% 8%; } } @media only screen and (min-width: 2000px) { .flickity-prev-next-button.next { right: 16%; } .flickity-prev-next-button.previous { left:16% } } @media only screen and (min-width: 901px) and (max-width: 1999px) { .flickity-prev-next-button.next { right: 15%; } .flickity-prev-next-button.previous { left:15% } } @media only screen and (max-width: 600px) { .flickity-slider > .carousel-cell { background-position-x: 75%; background-position-y: center; } .flickity-prev-next-button { top: 90%; } .flickity-prev-next-button.next { left: 80px; } .gen-quote { font-size: 20px; padding: 0% 0% 0% 2%; } .quote-author-name, .quote-author-position { font-size: 12px; padding: 0% 0% 0% 2%; } } /*FORM SECTION*/ #form-section { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; } @media only screen and (max-width: 800px) { #form-section { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } } .fa-window-minimize { -webkit-transform: rotate(90deg) !important; -moz-transform: rotate(90deg) !important; -ms-transform: rotate(90deg) !important; -o-transform: rotate(90deg) !important; transform: rotate(90deg) !important; margin-left: 7px !important; font-weight: 400 !important; color: #004ea8; } .fa.fa-circle-o { font: normal normal normal 14px/1 FontAwesome; color: #004ea8; font-size: 18px; } #signup-description { padding-right: 10%; } @media only screen and (max-width: 800px) { #signup-description { padding-right: 0%; } } #signup_text > p { font-family: 'Circular-Book', Arial; padding-bottom: 40px; } #signup-sequence { padding-bottom: 20px; line-height: 1.3; } #signup-sequence > .mktoText { font-family: 'Circular-Medium', Arial; color: #004ea8; } /*FOOTER*/ body > footer #back-to-top-link { width: 55px; height: 55px; border: 3px solid #fff; } footer > .container { border-top: 0px; } .footer_links.fa-ul { margin-left: 0px; } .footer_links.fa-ul > li > .fa-circle, .footer_social.fa-ul > li > .fa-circle { display: none; } .footer_links.fa-ul > li > a, .footer_social.fa-ul > li > a { color: #ffffff; text-decoration:none; } .footer_links.fa-ul > li > a:hover, .footer_links.fa-ul > li > a:focus, .footer_links.fa-ul > li > a:active { text-decoration:none; } #about-genetec > hr { display: none; } .container.nav_footer { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; margin-left: 0px; margin-right: 0px; width: 100%; border-top: 2px solid #fff; padding-top: 10px; } .nav_footer_row_default { width: 100%; } .nav_footer_row_default > .col-xxs-12.col-xs-6.col-sm-6.col-md-6 { width: 50%; } .footer_social.fa-ul { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -moz-justify-content: flex-end; -webkit-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end; -ms-flex-pack: end; } footer > div#back-to-top-link > a:hover, footer > div#back-to-top-link > a:focus, footer > div#back-to-top-link > a:active { text-decoration: none; } @media only screen and (max-width: 800px) { #signup_text > p { padding-bottom: 10px; } } /*MOBILE MENU*/ #ribbon > .mobile-menu > ul > li:last-child > a { background-color: rgba(255,158,27,1); margin: 10% 15%; width: 70%; padding: 2.5% 5%; border: 0px solid; color: #fff; transition: all .7s; } #ribbon > .mobile-menu > ul > li:last-child > a:hover, #ribbon > .mobile-menu > ul > li:last-child > a:focus, #ribbon > .mobile-menu > ul > li:last-child > a:active { background: rgba(255,158,27,0.7); transition: all .7s; } #ribbon > .mobile-menu > ul > li:last-child > a:hover:after, #ribbon > .mobile-menu > ul > li:last-child > a:focus:after, #ribbon > .mobile-menu > ul > li:last-child > a:active:after { background: rgba(255,255,255,0) !important; } #ribbon > .mobile-menu > ul > li:last-child > a:after { background: rgba(255,255,255,0) !important; } @media only screen and (min-width: 1301px) { .mobile-menu { display: none; } } /*FORM MODULE*/ .form-container { background-color: #f8f7f6; padding: 20px 20px 20px 20px !important; } #call-to-form > #action-section { background-color: #f8f7f6; } h1#call-to-action { color: #000000; margin: 0px 0px 20px 0px !important; text-align:left; } .mktoHtmlText.mktoHasWidth { width: 100% !important; text-align: left !important; color: #000 !important; } .mktoFormRow.checkbox_field > .mktoFieldDescriptor.mktoFormCol .mktoFieldWrap.mktoRequiredField > .mktoLogicalField.mktoCheckboxList.mktoHasWidth.mktoRequired { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -moz-justify-content: flex-start; -webkit-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: flex-start; align-items:center; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; -o-align-items:center; -ms-flex-align: center; } body .form-container section .mktoForm input[type="checkbox"] { max-width: 20px; } body .form-container section .mktoForm input[type="checkbox"] + label { width: 100%; padding: 0px 10px; color: #004ea8 !important; } .mktoForm .mktoCheckboxList > label { line-height: 100% !important; padding-bottom: 0px !important; margin-bottom: 0px !important; color: #004ea8 !important; } .mktoForm input[type="checkbox"]:not(:checked), .mktoForm input[type="checkbox"]:checked { position: absolute !important; left: -9999px !important; } /* Label setup */ .mktoForm input[type="checkbox"]:not(:checked) + label, .mktoForm input[type="checkbox"]:checked + label { position: relative !important; /* permet de positionner les pseudo-elements */ padding-left: 20px !important; /* fait un peu d'espace pour notre case a venir */ cursor: pointer !important; /* affiche un curseur adapte */ } .mktoForm input[type="checkbox"]:not(:checked) + label:before, .mktoForm input[type="checkbox"]:checked + label:before { content: '' !important; position: absolute !important; left:0 !important; top: 0px !important; width: 12px !important; height: 12px !important; /* dim. de la case */ border: 1px solid color: #004ea8 !important; background-color: rgba(0, 0, 0, 0) !important; border-radius: 0px !important; /* angles non-arrondis */ box-shadow: none !important; /* sans ombre interne */ } .mktoForm input[type="checkbox"]:not(:checked) + label:after, .mktoForm input[type="checkbox"]:checked + label:after { content: '✓' !important; position: absolute !important; margin-top: -1px; left: 1px !important; font-family: 'circular-book', 'futura-pt', Arial, "Helvetica Neue", Helvetica, sans-serif !important; font-size: 12px !important; color: color: #004ea8 !important; transition: all .2s !important; /* on prevoit une animation */ } .mktoForm input[type="checkbox"]:not(:checked) + label:after { opacity: 0 !important; /* coche invisible */ transform: scale(0) !important; /* mise a l'echelle ÃÆ’Æ’ 0 */ } .mktoForm input[type="checkbox"]:checked + label:after { opacity: 1 !important; /* coche opaque */ transform: scale(1) !important; /* mise ÃÆ’Æ’ l'ÃÆ’Æ’©chelle 1:1 */ } .mktoForm input[type=text] { color: #004ea8 !important; } select, input[type="text"] { border-bottom: 2px solid #004ea8 !important; } .mktoForm input[type="checkbox"]:not(:checked) + label:before, .mktoForm input[type="checkbox"]:checked + label:before { border: 1px solid #004ea8 !important; } #Language, #CompanyType, #UnsubscribedReason, #Industry, #Country, #State, .mktoFormRow.select_field > .mktoFieldDescriptor.mktoFormCol > .mktoFieldWrap.mktoRequiredField > select, .mktoFormRow.select_field > .mktoFieldDescriptor.mktoFormCol > .mktoFieldWrap > select { background-image:url("data:image/svg+xml;utf8,") !important; border-bottom-color: #004ea8 !important; color: #004ea8 !important; } .mktoForm input[type=text], .mktoForm input[type=url], .mktoForm input[type=email], .mktoForm input[type=tel], .mktoForm input[type=number], .mktoForm input[type=date], .mktoForm select.mktoField, .mktoForm textarea.mktoField { color: #004ea8 !important; } input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea { border-bottom: 2px solid #004ea8 !important; } .mktoFieldWrap.mktoRequiredField > input::-webkit-input-placeholder { color: #004ea8 !important; } .mktoFieldWrap.mktoRequiredField > input:-moz-placeholder { /* Firefox 18- */ color: #004ea8 !important; } .mktoFieldWrap.mktoRequiredField > input::-moz-placeholder { /* Firefox 19+ */ color: #004ea8 !important; } .mktoFieldWrap.mktoRequiredField > input:-ms-input-placeholder { color: #004ea8 !important; } .mktoFieldWrap > input::-webkit-input-placeholder { color: #004ea8 !important; } .mktoFieldWrap > input:-moz-placeholder { /* Firefox 18- */ color: #004ea8 !important; } .mktoFieldWrap > input::-moz-placeholder { /* Firefox 19+ */ color: #004ea8 !important; } .mktoFieldWrap > input:-ms-input-placeholder { color: #004ea8 !important; } .mktoFieldWrap > input::-webkit-input-placeholder { color: #004ea8 !important; } .mktoFieldWrap > #Comments::-webkit-input-placeholder { color: #004ea8 !important; } .mktoFieldWrap > #Comments:-moz-placeholder { /* Firefox 18- */ color: #004ea8 !important; } .mktoFieldWrap > #Comments::-moz-placeholder { /* Firefox 19+ */ color: #004ea8 !important; } .mktoFieldWrap > #Comments:-ms-input-placeholder { color: #004ea8 !important; } .mktoFieldWrap > #Comments::-webkit-input-placeholder { color: #004ea8 !important; } .mktoForm input[type="checkbox"]:not(:checked) + label, .mktoForm input[type="checkbox"]:checked + label { padding-left: 30px !important; } /*PAGE SPECIFIC FORM ADJUSTMENTS*/ input#mktoCheckbox_90405_0 + label { color: #000000 !important; } input#mktoCheckbox_90405_0 + label:before { border: 2px solid #004ea8 !important; width: 18px !important; height: 18px !important; } input#mktoCheckbox_90405_0 + label:after { font-size: 18px !important; } #mktoForm_4869 > div:nth-child(4) { margin-top: -30px; border-bottom: 2px solid; padding: 0px 0px 0px 0px; } #mktoForm_4869 > div:nth-child(4) > div.mktoFieldDescriptor.mktoFormCol{ margin-bottom: 30px !important; } #gen_temp1 { width: 47.5% !important; margin-left: 0% !important; } .mktoForm.mktoHasWidth.mktoLayoutLeft > .mktoButtonRow { text-align: right !important; } body .form-container section .mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton { background-color: rgba(0,78,168,1); text-transform: none !important; transition: all .7s !important; color: #ffffff !important; border: 0px !important; font-size: 16px !important; font-family: 'Circular-Book', Arial !important; letter-spacing: 0 !important; font-weight: 100 !important; } body .form-container section .mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton:hover, body .form-container section .mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton:focus, body .form-container section .mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton:active { background-color: rgba(0,78,168,0.7); text-transform: none !important; transition: all .7s !important; color: #ffffff !important; border: 0px !important; font-size: 16px !important; font-family: 'Circular-Book', Arial !important; letter-spacing: 0 !important; font-weight: 100 !important; } @media only screen and (max-width: 480px) { .mktoForm .mktoFormRow .mktoFormCol { clear: none !important; } } /*TY*/ #confirmform { padding: 15% 20%; background: #004ea8; } #confirmform > div > i.far.fa-check { font-size: 80px; color: rgba(255,158,27,1); } #confirmform > div > h1 { font-size: 30px; font-family: 'Circular-Medium', Arial; } #confirmform > div { font-family: 'Circular-Book', Arial; color: #ffffff; } /*SPOTLIGHTS*/ .spotlights { -moz-transform: translateX(0) translateY(0); -webkit-transform: translateX(0) translateY(0); -ms-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); -moz-transition: opacity 1s ease, -moz-transform 1s ease; -webkit-transition: opacity 1s ease, -webkit-transform 1s ease; -ms-transition: opacity 1s ease, -ms-transform 1s ease; transition: opacity 1s ease, transform 1s ease; opacity: 1; } .spotlights.inactive, body.is-loading .spotlights { -moz-transform: translateX(-1em); -webkit-transform: translateX(-1em); -ms-transform: translateX(-1em); transform: translateX(-1em); opacity: 0; } @media screen and (max-width: 980px) { .spotlights.inactive, body.is-loading .spotlights { -moz-transform: translateY(1em); -webkit-transform: translateY(1em); -ms-transform: translateY(1em); transform: translateY(1em); } } /*MOBILE CTA PANEL*/ @media only screen and (min-width: 813px) { .mobile-cta-sdsc { display: none; } } @media only screen and (max-width: 812px) { .mobile-cta-sdsc { background-color: #004ea8; text-align: center; height: 100px; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; align-items:center; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; -o-align-items:center; -ms-flex-align: center; } .mobile-cta-sdsc > a.orange-button, .mobile-cta-sdsc > div > a.orange-button { font-family: 'Circular-Medium', Arial; color: #ffffff; background-color: rgba(255,158,27,1); min-height: 50px; width: 50%; padding: 10px 50px; text-decoration: none; } .mobile-cta-sdsc > a.orange-button:hover, .mobile-cta-sdsc > a.orange-button: active, .mobile-cta-sdsc > a.orange-button:focus, .mobile-cta-sdsc > div > a.orange-button:hover, .mobile-cta-sdsc > div > a.orange-button: active, .mobile-cta-sdsc > div > a.orange-button:focus { background-color: rgba(255,158,27,0.7); } } /*CITY SECTION*/ #key-features-two-city-specific { background-color: rgba(0,78,168,0.7) !important; padding: 5%; } #key-features-two-city-specific > h1 { color: #ffffff; } #key-features-two-city-specific > p { font-family: 'Circular-Book', Arial; color: #ffffff; } #key-features-two-city-specific > ul { margin-left: 0px; } #key-features-two-city-specific > ul > li > .fa-circle { display: none; } #key-features-two-city-specific > ul > li { font-family: 'Circular-Book', Arial; font-size: 18px; color: #ffffff; padding: 5px 10px; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; align-items:center; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; -o-align-items:center; -ms-flex-align: center; } #key-features-two-city-specific > ul > li > i { color: #ffffff; font-size: 50px; min-width: 60px; } #key-features-two-city-specific > #solutions-cards-container > div { background-color: rgba(255,255,255,0); } a.whitebutton { font-family: 'Circular-Medium', Arial; padding: 10% 15%; background-color: rgba(255,255,255,1); color: rgba(0,78,168,1); white-space: nowrap; max-height: 50px; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; align-items:center; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; -o-align-items:center; -ms-flex-align: center; transition: all .7s; text-decoration: none; } a.whitebutton:hover, a.whitebutton:focus, a.whitebutton:active { background-color: rgba(255,255,255,0.7); text-decoration: none; } #key-features-one-city-specific { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; align-items: flex-end; -moz-align-items: flex-end; -webkit-align-items: flex-end; -ms-align-items: flex-end; -o-align-items: flex-end; -ms-flex-align: flex-end; padding: 0px 5% 0px 0px; } #city-facts { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; } #city-fact-1, #city-fact-2, #city-fact-3 { width: 30%; } #city-fact-2 {margin: 0% 5%;} #city-fact-header > p { font-family: 'Circular-Medium', Arial; font-size: 25px; color: #ffffff; } #city-fact-text > p { font-family: 'Circular-Book', Arial; font-size: 18px; color: #ffffff; } #key-features { background-size: cover; background-repeat: no-repeat; background-position-y: bottom; } #key-features-two-city-specific > #solutions-cards-container > div > .solutions-cards-logo { height: 100%; padding: 10px 0px; } #key-features-two-city-specific > #solutions-cards-container > div > .solutions-cards-logo > img { max-width: 120px; } #key-features-two-city-specific > #solutions-cards-container > div > .solutions-cards-tb { -moz-justify-content: flex-end; -webkit-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end; -ms-flex-pack: flex-end; height: 100%; } #img-back-section-overlay { position: absolute; height: 100%; width: 100%; margin-left: -10%; margin-top: -10%; background: rgba(0,0,0,0.3); } @media only screen and (max-width: 1200px) { #key-features > .row { -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; -o-flex-direction: column-reverse; flex-direction: column-reverse; } #key-features-one-city-specific { width: 100%; padding: 20px 0px 20px 0px; } #key-features-two, #key-features-two-city-specific { width: 100%; } #city-facts { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; width: 100%; } #city-fact-1, #city-fact-2, #city-fact-3 { width: 100%; margin: 2.5% 0%; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: -ms-flexbox; display: flex; align-items:center; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; -o-align-items:center; -ms-flex-align: center; } #city-fact-header { margin: 0% 20px 0% 0%; } } @media (max-width: 767px) { #key-features > .row { display: -moz-flex !important; display: -webkit-flex !important; display: -ms-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; -o-flex-direction: column-reverse; flex-direction: column-reverse; } #key-features-two-city-specific > ul > li > .fa-long-arrow-right { font-size: 30px; min-width: 50px; } #key-features-two-city-specific > ul > li { padding: 5px 0px; } #key-features-two-city-specific > #solutions-cards-container { -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; } #key-features-two-city-specific > #solutions-cards-container > #solutions-card-1, #key-features-two-city-specific > #solutions-cards-container > #solutions-card-2, #key-features-two-city-specific > #solutions-cards-container > #solutions-card-3 { width:30%; margin-top: 0px !important; margin-bottom: 0px !important; padding: 0px; } #key-features-two-city-specific > #solutions-cards-container > #solutions-card-2 { margin-left: 5%; margin-right: 5%; } #key-features-two-city-specific > #solutions-cards-container > div > .solutions-cards-tb { -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } } /*MLA*/ @media only screen and (max-width: 650px) { #optionally-add-video, #optionally-add-video_2, #benefits, #benefits2, #key-features, #quotes-recommendations_heading, #form-section, #container3 > #about-genetec { padding-left: 5%; padding-right: 5%; padding-top: 10px; padding-bottom: 10px; } body > main { padding-top: 0px; } #header-content > #slogan-container > #slogan { padding: 0% 0% 0% 5%; } #header { margin-left: 5%; margin-right: 5%; width: 80%; } .mobile-nav-button { margin-right: 5%; } #img-back-section-overlay { margin-left: -5%; margin-top: -10px; } section#action-section > #form-wrapper { padding: 0px 0px; } section#action-section > #form-wrapper > div > span > form.mktoForm.mktoHasWidth.mktoLayoutLeft { padding: 0px 0px; } .mktoForm input[type="checkbox"]:not(:checked) + label:after, .mktoForm input[type="checkbox"]:checked + label:after { margin-top: 3px; } .mobile-cta-sdsc > a.orange-button, .mobile-cta-sdsc > div > a.orange-button { width: 90%; white-space: nowrap; } .solutions-cards-text { padding-bottom: 0px; } #intermediate-cta-section_heading > h3 { text-align: left; } #intermediate-cta-section { align-items:flex-end; -moz-align-items: flex-end; -webkit-align-items: flex-end; -ms-align-items: flex-end; -o-align-items:flex-end; -ms-flex-align: flex-end; } } @media screen and (max-width: 750px) { #header-content > #slogan-container { min-height: 400px !important; } #header-content > #slogan-container > #slogan-container-wrapper { min-height: 400px; } } /*Opt Banner*/ #optanon #optanon-popup-bg { background: rgba(0,0,0,0) !important; }