/* HUBSPOT FORM STYLES */ .hbspt-form { width: 100%; } .hs-richtext { font-family: 'Source Sans Pro', Trebuchet, sans-serif; color: #616161; font-size: 13px; line-height: 18px; margin-top: 10px; margin-bottom: 10px; } .inputs-list { list-style-type: none; list-style: none; } .inputs-list li { font-family: 'Source Sans Pro', Trebuchet, sans-serif; color: #616161; font-size: 14px; line-height: 18px; } .hs-form-booleancheckbox label { font-family: 'Source Sans Pro', Trebuchet, sans-serif; color: #616161; font-size: 14px; line-height: 18px; font-weight: 400; } .hs-email > label, .hs-company > label, .hs-message > label, .hs-lastname > label, .hs-firstname > label, .hs-jobtitle > label, .hs-phone > label { display: none; } label { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 14px; line-height: 18px; margin: 0px; } input[type=text], input[type=email] { font-family: 'Source Sans Pro', Trebuchet, sans-serif; width: 100%; } .input textarea { font-family: 'Source Sans Pro', Trebuchet, sans-serif; border-style: solid; border-width: 1px; border-color:#E8E8E8; padding: 10px; width: 100%; margin-top: 10px; } .hbspt-form input { border-style: solid; border-width: 1px; border-color:#E8E8E8; padding: 10px; } .hs-error-msgs label { display: inline-block; margin-top: 7px; color: #AD1E1E; line-height: 15.6px; max-width: 100%; text-align: left; margin: 0; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 13px; position: relative; font-weight: 500; } /* END HUBSPOT FORM STYLES */ .clearfix_row { float: none!important; clear: both!important; display: block!important; position: relative; width: 100%; } /***************** ALL MENU STYLES - INCLUDING MEDIA QUERIES *********************/ @media only screen and (max-height: 667px) { #mobile_menu { display: block; height: 75vh!important; margin-top: -10px; padding-left: 20px; padding-bottom: 50px!important; overflow: scroll; } } #china_for_business_link a, #china_for_business_link_mobile a { border-style: solid; border-width: 1px; border-color:#fdb51b!important; border-radius: 5px; padding: 5px 10px; background-color:#ad1e1e; } /****************** END MENU STYLES ******************/ /* iOS only styles */ @supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */ #features_and_quotes_row { background-attachment: scroll!important; } #fixed_bkg_core_productivity { background-attachment: scroll!important; } #sd_row_1, #any_sd_wan, #scroll_anim_row, #sd_row_7 { background-attachment: scroll!important; background-image: url('images/new_photo_bkg3b_vert.png')!important; } } @supports not (-webkit-overflow-scrolling: touch) { /* CSS for other than iOS devices */ #features_and_quotes_row { background-attachment: fixed; } #fixed_bkg_core_productivity { background-attachment: fixed; } #scroll_anim_row, #sd_row_7 { background-attachment: fixed; } } #nav_icon, #mode_logo, #get_mode, #branding, #mode_amp_go_button, #mode_amp_go_button_b { -webkit-tap-highlight-color: rgba(0,0,0,0); } /* NEW HOME PAGE STYLES */ @media only screen and (max-width: 320px) and (orientation: portrait) { #mode_logo { width: 150px; margin-top: -33px; margin-left: 30px; filter:invert(1); } #mode_amp_go_button { width: 72px; margin-top: -34px; padding-top: 0px; margin-left: -24px; opacity: 0; transition: 0.4s; } #mode_amp_go_button_b { width: 72px; margin-top: -34px; padding-top: 0px; margin-left: -24px; opacity: 1; } .logo_scroll { filter: invert(0)!important; width: 120px!important; margin-top: -28px!important; transition: 0.5s; } .logo_start { filter: invert(1); width: 150px; transition: 0.5s; } .mode_go_start { opacity: 0!important; } .mode_go_scroll { opacity: 1!important; width: 70!important; margin-top: -30px!important; } .mode_go_start_b { opacity: 1!important; } .mode_go_scroll_b { opacity: 0!important; width: 70!important; margin-left: -70px!important; margin-top: -8px!important; } #inside_mode_logo { width: 150px; margin-top: -33px; margin-left: 30px; } #inside_mode_amp_go_button { width: 72px; margin-top: -30px; padding-top: 0px; margin-left: -26px; transition: 0.4s; } .inside_logo_scroll { width: 120px!important; margin-top: -28px!important; transition: 0.5s; } .inside_logo_start { width: 150px; transition: 0.5s; } .inside_mode_go_start { width: 72px; } .inside_mode_go_scroll { width: 70px!important; } #cloud_to_the_core_m { width: 90%; margin-left: auto; margin-right: auto; margin-top: 10vh; } #cloud_to_the_core_m img { width: 100%; max-width: 180px; margin-left: -20px; } #performance_text { position: relative; display: block; margin-top: 30px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 24px; line-height: 24px; font-weight: 600; text-transform: uppercase; color:#FFFFFF; } #for_SDWAN_text { width: 90%; margin-left: auto; margin-right: auto; max-width: 800px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 18px; line-height: 21px; margin-top: 0px; font-weight: 500; color:#FFFFFF; text-align: center; } .intro_bullet { color:#FFFFFF; font-size: 18px; font-weight: 600; line-height: 21px; text-align: left; margin: -5px 10px 0px -10px; } .intro_plus { color:#00b4dc; margin: 0px 0px 0px -30px; font-size: 36; font-weight: 800; float: left; } /* AWARDS */ #awards { display: block; float: none; clear: both; height: 480px; padding-top: 0px; margin-top: 10px; margin-bottom: 120px; padding-bottom: 90px; } .award_left { height: 300px; width: 95%; margin-right: 5%; float: none; background-color:rgba(0,0,0,0.6); text-align: right; } .award_left_img { float: none; } .award_left_img img { width: 180px; margin: 20px; } .award_left_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 20px; } .award_right { height: 300px; width: 95%; float: none; margin-left: 5%; background-color:rgba(0,0,0,0.6); margin-top: 30px; text-align: left; } .award_right_img { float: none; } .award_right_img img { width: 180px; margin: 20px; } .award_right_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 20px; } .news_text { color:#FFFFFF; font-size: 18px; line-height: 24px; font-weight: 500; margin: 0px 20px 10px 20px; padding-top: 0px; } #first_row { background-image: url('images/intro_fixed_cloud_bkg.png'); background-size: cover; background-attachment: fixed; background-color:#e7f1f4; width: 100%; margin: 0px; padding: 0px; height: 75vh; } } @media only screen and (min-width: 321px) and (max-width: 360px) and (orientation: portrait) { #mode_logo { width: 150px; margin-top: 0px; margin-left: -40px; filter:invert(1); } #mode_amp_go_button { width: 72px; margin-top: -60px; padding-top: 0px; margin-left: -24px; opacity: 0; transition: 0.4s; } #mode_amp_go_button_b { width: 72px; margin-top: -60px; padding-top: 0px; margin-left: -24px; opacity: 1; } .logo_scroll { filter: invert(0)!important; width: 120px!important; margin-top: 0px!important; transition: 0.5s; } .logo_start { filter: invert(1); width: 150px; transition: 0.5s; } .mode_go_start { opacity: 0!important; } .mode_go_scroll { opacity: 1!important; width: 70!important; margin-top: -54px!important; } .mode_go_start_b { opacity: 1!important; } .mode_go_scroll_b { opacity: 0!important; width: 70!important; margin-left: -70px!important; margin-top: -8px!important; } #inside_mode_logo { width: 150px; margin-top: 0px; margin-left: -40px; } #inside_mode_amp_go_button { width: 72px; margin-top: -60px; padding-top: 0px; margin-left: -24px; transition: 0.4s; } .inside_logo_scroll { width: 120px!important; margin-top: 0px!important; transition: 0.5s; } .inside_logo_start { width: 150px; transition: 0.5s; } .inside_mode_go_start { opacity: 1!important; } .inside_mode_go_scroll { opacity: 1!important; width: 70!important; margin-top: -54px!important; } #cloud_to_the_core_m { width: 90%; margin-left: auto; margin-right: auto; margin-top: 10vh; } #cloud_to_the_core_m img { width: 100%; max-width: 200px; margin-left: -10px; } #performance_text { position: relative; display: block; margin-top: 30px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 27px; line-height: 27px; font-weight: 600; text-transform: uppercase; color:#FFFFFF; } #for_SDWAN_text { width: 90%; margin-left: auto; margin-right: auto; max-width: 800px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 18px; line-height: 21px; margin-top: 0px; font-weight: 500; color:#FFFFFF; text-align: center; } .intro_bullet { color:#FFFFFF; font-size: 18px; font-weight: 600; line-height: 21px; text-align: left; margin: 0px; } .intro_plus { color:#00b4dc; margin: 0px 0px 0px -30px; font-size: 36; font-weight: 800; float: left; } /* AWARDS */ #awards { display: block; float: none; clear: both; height: 480px; padding-top: 0px; margin-top: 10px; margin-bottom: 120px; padding-bottom: 90px; } .award_left { height: 300px; width: 80%; margin-right: 20%; float: none; background-color:rgba(0,0,0,0.6); text-align: right; } .award_left_img { float: none; } .award_left_img img { width: 210px; margin: 20px; } .award_left_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 20px; } .award_right { height: 300px; width: 80%; float: none; margin-left: 20%; background-color:rgba(0,0,0,0.6); margin-top: 30px; text-align: left; } .award_right_img { float: none; } .award_right_img img { width: 210px; margin: 20px; } .award_right_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 20px; } .news_text { color:#FFFFFF; font-size: 21px; line-height: 30px; font-weight: 500; margin: 0px 20px 10px 20px; padding-top: 0px; } #first_row { background-image: url('images/intro_fixed_cloud_bkg.png'); background-size: cover; background-attachment: fixed; background-color:#e7f1f4; width: 100%; margin: 0px; padding: 0px; height: 480px; } } @media only screen and (max-width: 360px) and (orientation: portrait) { #mobile_landscape_modal_china, #modal_china { display: none!important; } #mobile_portrait_modal_china { width: 90%; max-width: 360px; min-width: 320px; margin-left: auto; margin-right: auto; height: 100vh; display: block; position: fixed; top: 20vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } #intro_modal_china { width: 90%; max-width: 360px; min-width: 320px; margin-left: auto; margin-right: auto; height: 100vh; display: block; position: fixed; top: 20vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } .china_modal_close_link { display: block; width: 90px; height: 25px; position: absolute; right: 30px; top: -25px; background-color:#ad1e1e; text-align: center; padding-top: 0px; padding-bottom: 4px; color:#ffffff; font-size: 20px; font-weight: 800; font-family: 'Source Sans Pro', Trebuchet, sans-serif; z-index: 1000004; } .china_modal_content img { width: 320px; } #china_form_image_desktop { display: none; width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #china_form_image_mobile { width: 90%; max-width: 300px; margin-bottom: -60px; } #enterprises_button { display: block; width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% - 155px); margin-top: 18px; } #asps_button { display: block; width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% - 155px); margin-top: 0px; } #terabit_core_logo { float: right; width: 90px; margin-top: 0px; margin-right: 10px; } #all_awards { width: 75%; padding: 20px; min-width: 240px; text-align: right; background-color:rgba(0,0,0,0.5); text-align: right; } .new_accolade { width: 210px; margin: 20px 10px; display: block; } #menu { overflow: hidden; opacity: 1; position: fixed; top: 60; padding-top: -10px; left: 0; width: 100%; height: 100vh; display: block; z-index:999997!important; background-color:#393939; background-image: url('images/menu_bkg_min.png'); background-size: cover; background-position: center center; } #mega_menu { display: none; } #mobile_menu { display: block; height: 100vh; margin-top: 0px; padding-left: 20px; padding-bottom: 50px!important; overflow: scroll; } .menu_start { top: 60!important; padding-top: -10px; transition: 0.5s; } .menu_scroll { top: 40!important; padding-top: 10px!important; transition: 0.5s; } /* Safari 4.0 - 8.0 */ #cloud_1 img { width: 50vw; z-index: 2; } #cloud_2 img { width: 20vw; z-index: 2; } #cloud_3 img { width: 40vw; z-index: 2; } #cloud_4 img { width: 60vw; z-index: 2; } #cloud_5 img { width: 70vw; z-index: 2; } #cloud_6 img { width: 30vw; z-index: 2; } #cloud_7 img { width: 24vw; z-index: 2; } #cloud_8 img { width: 42vw; z-index: 2; } #cloud_9 img { width: 36vw; z-index: 2; } #hex_1 img { width: 10vw; z-index: 2; } #hex_2 img { width: 50vw; z-index: 2; } #hex_3 img { width: 20vw; z-index: 2; } #sigma_1 img { width: 30vw; z-index: 2; } #sigma_2 img { width: 20vw; z-index: 2; } #sigma_3 img { width: 50vw; z-index: 2; } #cloud_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -50vw; } #cloud_2 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -20vw; } #cloud_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 10s; -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -40vw; } #cloud_4 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -60vw; } #cloud_5 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 8s; -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 6s; overflow: hidden; margin-left: -70vw; } #cloud_6 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 11s; -webkit-animation-duration: 11s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 4s; overflow: hidden; margin-left: -30vw; } #cloud_7 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 16s; -webkit-animation-duration: 16s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -24vw; animation-delay: 5s; } #cloud_8 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -42vw; animation-delay: 3s; } #cloud_9 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -36vw; animation-delay: 5s; } #hex_1 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 8s; -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; margin-top: 9vh; } #hex_2 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 21s; -webkit-animation-duration: 21s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -50vw; } #hex_3 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -20vw; } #sigma_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -30vw; } #sigma_2 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 10s; -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -20vw; animation-delay: 1s; } #sigma_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -50vw; animation-delay: 3s; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes cloud_anim_1 { 0% {left:100%; top:-5h; opacity:0.0; } 10% {left:90%; top:-5vh; opacity: 0.80; } 100% {left:0%; top:-5vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_2 { 0% {left:100%; top:10vh; opacity:0.0; } 10% {left:90%; top:10vh; opacity: 0.80; } 100% {left:0%; top:10vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_3 { 0% {left:100%; top:25vh; opacity: 0.0; } 10% {left:90%; top:25vh; opacity: 0.80; } 100% {left:0%; top:25vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_4 { 0% {left:100%; top:40vh; opacity: 0.0; } 10% {left:90%; top:40vh; opacity: 0.80; } 100% {left:0%; top:40vh; opacity: 0.0; } } /* Standard syntax */ @keyframes cloud_anim_1 { 0% {left: 100%; top:-5vh; opacity: 0.0; } 10% {left: 90%; top:-5vh; opacity: 0.80; } 100% {left: 0%; top:-5vh; opacity: 0.0; } } @keyframes cloud_anim_2 { 0% {left:100%; top:10vh; opacity: 0.0; } 10% {left:90%; top:10vh; opacity: 0.80; } 100% {left:0%; top:10vh; opacity: 0.0; } } @keyframes cloud_anim_3 { 0% {left:100%; top:25vh; opacity: 0.0; } 10% {left:90%; top:25vh; opacity: 0.80; } 100% {left:0%; top:25vh; opacity: 0.0; } } @keyframes cloud_anim_4 { 0% {left:100%; top:40vh; opacity: 0.0; } 10% {left:90%; top:40vh; opacity: 0.80; } 100% {left:0%; top:40vh; opacity: 0.0; } } #inside_header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:#231f20; z-index: 999998!important; transition: 0.5s; } .inside_header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:#231f20; z-index: 999998!important; transition: 0.5s;} .inside_header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 48px!important; background-color:#000000!important; z-index: 999998!important; transition: 0.5s;} .inside_bar1_start { background-color: #FFFFFF!important; } .inside_bar2_start { background-color: #FFFFFF!important; } .inside_bar1_scroll { background-color: #FFFFFF!important; margin-top: 15px!important; width: 4px!important; height: 18px!important; } .inside_bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #inside_plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #FFFFFF; margin-top: 20px; transition: 0.5s; z-index: 999999; } #inside_plus_horiz { width: 26px; height: 6px; background-color: #FFFFFF; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .inside_bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } #header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s; } .header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s;} .header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 48px!important; background-color:rgba(0,0,0,1)!important; z-index: 999998!important; transition: 0.5s;} /* HEADER CHANGE-ON-SCROLL STYLES */ .nav_icon { cursor: pointer; z-index: 999999; } .bar1_start { background-color: #000000!important; } .bar2_start { background-color: #000000!important; } .bar1_scroll { background-color: #FFFFFF!important; margin-top: 15px!important; width: 4px!important; height: 18px!important; } .bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 20px; transition: 0.5s; z-index: 999999; } #plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ /* NEW HOME INTRO/START */ #row_1 { position: relative; z-index: 12; width: 100vw; height: 45vh; background-color:#e7f1f4; background-image: url('images/intro_fixed_cloud_bkg2.png'); background-size: cover; background-attachment: fixed; text-align: center; } #cloud_to_the_core_top { display: none; } #cloud_to_the_core_bottom { display: none; } #start_switch { position: relative; display: inline-block; width: 100%; text-align: center; margin: 0px; padding: 0px; z-index: 18!important; } #turn_on_slider { position: relative; display: inline-block; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } #turn_on_lozenge { margin: 0px 10px -10px 0px; display: inline-block; position: relative; bottom: -5px; text-align: left; width: 120px; height: 45px; padding: 0px; background-color:#000000; box-shadow: 0px 0px 18px rgba(0, 180, 220, 0); border-radius: 45px; z-index: 9999913;} #turn_on_circle { text-align: center; display: inline-block; position: relative; width: 36px; height: 36px; background-color:#00b4dc; border-radius: 18px; padding-top: -5px; margin-top: 4px; margin-left: 78px; animation: slide 2s, fade 2s; animation-timing-function: linear; } #turn_on_circle img { margin-left: -2px; margin-top: -2px; width: 40px; } /* Standard syntax */ @keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } @keyframes fade_up { 0% {margin-top: 90px; opacity: 0;} 75% {margin-top: 90px; opacity: 0;} 100% {margin-top: 0px; opacity: 1;} } /* Safari 4.0 - 8.0 */ @-webkit-keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @-webkit-keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } @-webkit-keyframes fade_up { 0% {margin-top: 90px; opacity: 0;} 90% {margin-top: 90px; opacity: 0;} 100% {margin-top: 0px; opacity: 1;} } #intro_bullets { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-top: 10px; padding-bottom: 60px; } #intro_bullet_1 { display: none; } #intro_bullet_2 { display: none; } #intro_bullet_3 { display: none; } #intro_bullet_1_landscape { display: none; } #intro_bullet_2_landscape { display: none; } #intro_bullet_3_landscape { display: none; } #intro_bullet_1_m { position: relative; display: inline-block; margin-left: 70px; margin-top: 0px; opacity: 1; z-index: 18; text-align: left; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 3s; -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear;} #intro_bullet_2_m { position: relative; display: inline-block; margin-left: 70px; margin-top: 0px; padding-top: 20px; text-align: left; z-index: 18; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 3.5s; -webkit-animation-duration: 3.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear;} #intro_bullet_3_m { position: relative; display: inline-block; margin-left: 70px; margin-top: 0px; padding-top: 20px; padding-bottom: 20px; z-index: 18; text-align: left; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 4s; -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear;} /* END NEW HOME INTRO/START */ /* NEW HOME SWITCH AND VALUES */ #angle_top_turn_on { width: 100%; height: 60px; margin-top: -60px; } #angle_turn_top { width: 100%; height: 60px; margin-top: -61px; position: relative; z-index: 19; } #angle_turn_top > img { width: 100%; height: 60px; } #turn_content { position: relative; z-index: 19; width: 100%; min-height: 50vh; margin: -2px 0px 0px 0px; padding: 0px; background-image: linear-gradient(to right, #004a5c, #004a5c, #006d87, #008fb0, #0096b8); /*background-image: url('images/start_bottom_bkg.png');*/ background-size: 100% auto; } #angle_turn_bottom { position: relative; z-index: 19;width: 100%; height: 60px; } #angle_turn_bottom > img { width: 100%; height: 60px; margin-top: -1px; } #features_and_quotes_row { margin-top: -60px; background-image: url('images/new_mobile_features_bkg_vert2.png'); background-size: cover; background-attachment: fixed; min-height: 50vh; width: 100%; } #angle_after_quotes { display: none; } #angle_after_quotes img { height: 60px; width: 100%; margin-top: -40px; } #angle_spacer { display: none; } #angle_before_core_control img { height: 60px; width: 100%; position: relative; z-index:25; margin-top: -30px; } /* END NEW HOME SWITCH AND VALUES */ /* FEATURES */ .feature_group { width: 90%; max-width: 1200px; text-align: center; margin-left: auto; margin-right: auto; position: relative; margin-top: -91px; z-index: 20; } .resource_cell, .news_cell, .next_cell { width: 240px; height: 250px; position: relative; text-align: center; margin-left: auto; margin-right: auto; display: none; } .resource_cell img, .news_cell img, .next_cell img { width: 240px; height: 200px; position: absolute; top: 0; left: 0; } .resource_title_block, .news_title_block, .next_title_block { position: absolute; left: 0; width: 160px; background-color:#00b4dc; padding: 10px 20px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; color:#FFFFFF; font-weight: 600; } .resource_description, .news_description, .next_description { background-color:rgba(0,0,0,0.95); position: absolute; width: 240px!important; left: 0; top: 124; height: 50px!important; } .resource_description p, .news_description p, .next_description p { text-align: left; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 16px; line-height: 21px; font-weight: 500; margin-top: 3; color:#FFFFFF; padding: 0px 10px; } .resource_link, .news_link, .next_link { position: absolute; top: 159; width: 240px!important; font-weight: 600; margin-left: 0px; border-style: solid; border-color:#00b4dc; border-width: 1px 0px 0px 0px; } #features_bottom_angle { margin-top: -20px; width: 100%; } #features_bottom_angle img { margin-top: 0px; width: 100%; height: 60px; } #quote_fade_to_clouds { display: none; } #quote_fade_to_clouds img { display: none; } #cloud_spacer { display: none; } #cloud_fade_to_core_control { display: none; } #cloud_fade_to_core_control img { display: none; } #angle_before_core_control img { height: 120px; margin-top: -80px; width: 100%; position: relative; z-index: 25; } /* AWARDS */ #awards { display: block; float: none; clear: both; height: 510px; padding-top: 0px; margin-top: 10px; margin-bottom: 60px; padding-bottom: 30px; } .award_left { height: 200px; width: 80%; margin-right: 20%; float: none; background-color:rgba(0,0,0,0.6); text-align: right; } .award_left_img img { width: 210px; margin: 20px; } .award_left_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 20px; } .award_right { height: 200px; width: 80%; float: none; margin-left: 20%; background-color:rgba(0,0,0,0.6); margin-top: 30px; text-align: left; } .award_right_img img { width: 210px; margin: 20px; } .award_right_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 20px; } .news_text { color:#FFFFFF; font-size: 21px; line-height: 30px; font-weight: 500; margin: 0px 20px 10px 20px; padding-top: 0px; } /* QUOTES */ #laser_1 { display: none; } #laser_2 { display: none!important; } #laser_3 { margin-top: 30px; margin-bottom: 0px; } #laser_4 { margin-top: -15px; margin-bottom: 30px; } #quote_laser_2 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 1.5s; -webkit-animation-duration: 1.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 0px; } #quote_laser_3 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_right; -webkit-animation-name: laser_right; /* Safari 4.0 - 8.0 */ animation-duration: 1.75s; -webkit-animation-duration: 1.75s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; left:0; margin-top: 0px; } #quote_laser_4 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2s; -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 0px; } #quote_container { position: relative; width: 100%; margin: 0px auto 20px auto; text-align: center; z-index: 14; background-color:rgba(0,0,0,0.35); } #tata_quote { position: relative; width: 90%; max-width: 1200px; text-align: left; margin: 0px auto; clear: both; float: none; z-index: 14; } #tata_quote img { width: 120px; margin: 20px 20px -50px -5px; float: none; } #steve_garson_quote { position: relative; width: 90%; max-width: 1200px; max-height: 200px; text-align: right; margin: 0px auto 0px auto; clear: both; float: none; } #steve_garson_quote img { width: 150px; margin: 20px 0px -90px 0px; float: none; } #fourfiftyone_quote { position: relative; width: 90%; max-width: 1200px; text-align: left; margin: 50px auto 50px auto; clear: both; float: none; } #fourfiftyone_quote img { width: 120px; margin: 0px 20px -70px 0px; float: none; } #versa_quote { position: relative; width: 90%; max-width: 1200px; text-align: right; margin: 60px auto 0px auto; padding-bottom: 50px; clear: both; float: none; } #versa_quote img { width: 120px; margin: 0px 0px -60px 0px; float: none; } .home_quote_left { font-size: 21px; line-height: 24px; color:#f2f2f2; font-weight: 300; text-align: left;} .home_attribution_left { font-size: 12px; line-height: 15px; color:#B3B3B3; font-weight: 400; text-align: left; } .home_quote_right { font-size: 36px; line-height: 42px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_quote_right_medium { font-size: 21px; line-height: 24px; color:#f2f2f2; font-weight: 300; text-align: right; margin-right: 10px; } .home_quote_right_small { font-size: 24px; line-height: 30px; color:#f2f2f2; font-weight: 300; text-align: right; } .home_attribution_right { font-size: 12px; line-height: 15px; color:#B3B3B3; font-weight: 400; text-align: right; margin-right: 10px; } /* CORE CONTROL */ #fixed_bkg_core_control { position: relative; z-index: 13; width: 100vw; height: 600px; margin-top: -60px; padding-top: 100px; background-color:#FFFFFF; background-size: cover; background-image: url('images/new_photo_bkg3.png'); background-attachment: fixed; text-align: center; } #sd_wan_logos { position: absolute; top: 100; height: 100%; width: 100%; left: 0; z-index: 12; background-image: url('images/no_worry_sdWAN_logos2.png'); background-size: 100% auto; background-position: top center; background-attachment: fixed; } #core_control_header { text-align: center; font-size: 36px; color:#393939; font-weight: 700!important; margin-top: 0px; margin-bottom: 20px; position: relative; } #core_control_title { width: 100vw; position: relative; text-align: center; margin-top: 30px; text-align: center; } #core_control_title img { width: 80%; position: relative; text-align: center; margin-top: -10px; margin-left: auto; margin-right: auto; } #core_control_subtitle { display: none; } #core_control_subtitle_m { text-align: center; font-size: 20px; font-weight: 600; line-height: 27px; color:#616161; margin-top: 0px; margin-left: 20px; margin-right: 20px; margin-bottom: 20px; position: relative; } #core_control_base_m { position: relative: z-index: 13; } #core_control_base_m img { width: 240px; height: 280px; margin: 0px; padding: 0px; } #core_control_modeCore_m { text-align: center; margin-top: -280px; } #core_control_modeCore_m img { width: 240px; height: 280px; margin: 0px; padding: 0px; } #core_control_blueSDWAN_m { position: relative; margin-top: -280px; } #core_control_blueSDWAN_m img { width: 240px; height: 280px; margin: 0px; padding: 0px; } #core_control_multiCloud_m { margin-top: -280px; } #core_control_multiCloud_m img { width: 240px; height: 280px; margin: 0px; padding: 0px; } #core_control_collab_m { margin-top: -280px; } #core_control_collab_m img { width: 240px; height: 280px; margin: 0px; padding: 0px; } #core_control_desktop { display: none; } #core_control_mobile { margin-bottom: 30px; } #core_control_mobile_landscape { display: none; } /* STRESS LESS */ #angle_top_core_performance { position: relative; margin-top: -59px; z-index: 13; height: 60px; width: 100vw; } #angle_top_core_performance img { width: 100%; height: 60px; margin-top: 1px; } /* THIS IS THE BLUE ANGLE ABOVE STRESS LESS */ #core_performance_header { text-align: center; font-size: 36px; color:#f2f2f2; font-weight: 600; padding-top: 20px; margin-top: 0px; margin-bottom: 30px; position: relative; } #core_performance_middle { position: relative; margin-top: 0px; height: 530px; z-index:13; background-color:#036179; background-image: url('images/stress_less_bkg_new.png'); background-size: cover; width: 100vw; text-align: center; } .stress_less_icon { width: 90px; float: left; margin-right: 10px; } #core_performance_1 { float: none; clear: both; width: 90%; margin: 0px auto; padding: 10px; } #core_performance_2 { float: none; clear: both; width: 90%; margin: -20px auto 10px auto; padding: 10px; } #core_performance_3 { float: none; clear: both; width: 90%; margin: -20px auto 10px auto; padding: 10px; } #core_performance_4 { float: none; clear: both; width: 90%; margin: -20px auto 10px auto; padding: 10px; } #core_performance_5 { float: none; clear: both; width: 90%; margin: -20px auto 30px auto; padding: 10px; } #core_performance_1 h3 { font-size: 18px; text-align: left; line-height: 21px; } #core_performance_2 h3 { font-size: 18px; text-align: left; line-height: 21px; } #core_performance_3 h3 { font-size: 18px; text-align: left; line-height: 21px; } #core_performance_4 h3 { font-size: 18px; text-align: left; line-height: 21px; } #core_performance_5 h3 { font-size: 18px; text-align: left; line-height: 21px; } #angle_top_core_productivity { position: relative; margin-top: 0px; z-index: 13; height: 60px; width: 100vw; } #angle_top_core_productivity img { width: 100%; height: 60px; margin-top: 59px; } /* THIS IS THE BLUE ANGLE BELOW STRESS LESS */ /* DO MORE */ #core_productivity_header { text-align: center; font-size: 36px; color:#f2f2f2; font-weight: 600; margin-bottom: -40px; padding-top: 90px; position: relative; } #fixed_bkg_core_productivity { position: relative; z-index: 12; width: 100vw; height: 500px; margin-top: -60px; background-color:#121212; background-image: url('images/new_photo_bkg3b_vert.png'); background-size: cover; background-position: bottom right; background-attachment:fixed; text-align: center; } #core_productivity_interactive { text-align: center; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-bottom: 0px; position: relative; } #core_productivity_arrow_button { position: relative; clear: both; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; margin-top: -220px; } /* DO MORE SLIDER STYLES */ .slider { margin-left: auto; margin-right: auto; text-align: center; margin-top: -30px; } .slick-slide { -webkit-transform: translate3d(0,0,0); } .slick-slide, .slick-slide *{ outline: none !important; } .center { width: 100%!important; max-width: 750px; height: 400px; margin-top: 60px; text-align: center; } .slick-slide { margin: 0px 0px 0px 0px; text-align: center; width: 210px; transition: 0.5s; } .slick-prev:before, .slick-next:before { color: black; } .slick-slide { transition: all ease-in-out 0.3s; opacity: 1; } .slick-active { opacity: 1; } .slick-current { opacity: 1; } .slick-center img { width: 210px!important; opacity: 1!important; margin-left: -60px!important; margin-top: -10px!important; } .slick-center { width: 300px; transition: 0.5s; text-align: center; } .slick-slide img { width: 60px; margin-left: auto; margin-right: auto; opacity: 0.1; transition: 0.5s; margin-left: 20px; } .slider h3 { color:#616161; font-size: 4px; margin-top: -30px; transition: 0.5s; margin-left: -40px; margin-right: -40px;} .slick-center h3 { color:#f2f2f2; font-size: 11px; margin-top: -20px!important; margin-left: -40px; margin-right: -40px; } .core_productivity_title { font-size: 8px; color:#616161; margin-top: 30px; transition: 0.5s; margin-left: -40px; margin-right: -40px;} .slick-center .core_productivity_title { font-size: 18px; color:#f2f2f2; font-weight: 500; margin-top: 0px!important; margin-left: -40px; margin-right: -40px; } /* MODE AND GO */ #row_7 { width: 100vw; z-index: 13; margin-top: -20px; background-color:#F7F7F7; background-image: url('images/mode_and_go_bkg_gold_mobile2.png'); background-size: cover; background-position: center center; } #mode_go_more { display: none; } #mode_go_more_m { display: block; position: relative; width: 100vw; max-width: 1000px; margin-left: auto; margin-right: auto; text-align: center; } #mode_and_go { margin-top: 0px; width: 100%; height: 450px; float: none; margin-right: 0%; } #mode_and_go_header img { width: 100%; max-width: 300px; margin-top: 60px; } #mode_and_go_image img { width: 90%; margin-top: -40px; max-width: 300px; } #mode_and_more { margin-top: 0px; width: 100%; height: 450px; margin-left: 0%; float: none; } #mode_and_more_header img { width: 100%; max-width: 300px; margin-top: 50px; } #mode_and_more_image img { width: 90%; margin-top: -40px; margin-bottom: 20px; max-width: 300px; } #mode_and_go_header { text-align: center; font-size: 54px; color:#616161; font-weight: 600; margin-bottom: 60px; } #mode_and_more_header { text-align: center; font-size: 54px; color:#f2f2f2; font-weight: 600; margin-bottom: 60px; } } @media only screen and (min-width: 361px) and (max-width: 468px) and (orientation: portrait) { #mobile_landscape_modal_china, #modal_china { display: none!important; } #mobile_portrait_modal_china { width: 90%; max-width: 400px; min-width: 350px; margin-left: auto; margin-right: auto; height: 100vh; display: block; position: fixed; top: 20vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } #intro_modal_china { width: 90%; max-width: 400px; min-width: 350px; margin-left: auto; margin-right: auto; height: 100vh; display: block; position: fixed; top: 20vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } .china_modal_close_link { display: block; width: 90px; height: 25px; position: absolute; right: 30px; top: -25px; background-color:#ad1e1e; text-align: center; padding-top: 0px; padding-bottom: 4px; color:#ffffff; font-size: 20px; font-weight: 800; font-family: 'Source Sans Pro', Trebuchet, sans-serif; z-index: 1000004; } .china_modal_content img { width: 350px; } #china_form_image_desktop { display: none; width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #china_form_image_mobile { width: 90%; max-width: 300px; margin-bottom: -60px; } #enterprises_button { display: block; width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% - 155px); margin-top: 18px; } #asps_button { display: block; width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% - 155px); margin-top: 0px; } #terabit_core_logo { float: right; width: 120px; margin-top: -10px; margin-right: 10px; } #all_awards { width: 75%; padding: 20px; min-width: 300px; text-align: right; background-color:rgba(0,0,0,0.5); text-align: right; } .new_accolade { width: 240px; margin: 20px 10px; display: block; } #menu { overflow: hidden; opacity: 1; position: fixed; top: 60; padding-top: -10px; left: 0; width: 100%; height: 100vh; display: block; z-index:999997!important; background-color:#393939; background-image: url('images/menu_bkg_min.png'); background-size: cover; background-position: center center; } #mega_menu { display: none; } #mobile_menu { display: block; height: 100vh; margin-top: 0px; padding-left: 20px; padding-bottom: 50px!important; overflow: scroll; } .menu_start { top: 60!important; padding-top: -10px; transition: 0.5s; } .menu_scroll { top: 40!important; padding-top: 10px!important; transition: 0.5s; } #cloud_1 img { width: 50vw; z-index: 2; } #cloud_2 img { width: 20vw; z-index: 2; } #cloud_3 img { width: 40vw; z-index: 2; } #cloud_4 img { width: 60vw; z-index: 2; } #cloud_5 img { width: 70vw; z-index: 2; } #cloud_6 img { width: 30vw; z-index: 2; } #cloud_7 img { width: 24vw; z-index: 2; } #cloud_8 img { width: 42vw; z-index: 2; } #cloud_9 img { width: 36vw; z-index: 2; } #hex_1 img { width: 10vw; z-index: 2; } #hex_2 img { width: 50vw; z-index: 2; } #hex_3 img { width: 20vw; z-index: 2; } #sigma_1 img { width: 30vw; z-index: 2; } #sigma_2 img { width: 20vw; z-index: 2; } #sigma_3 img { width: 50vw; z-index: 2; } #cloud_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -50vw; } #cloud_2 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -20vw; } #cloud_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 10s; -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -40vw; } #cloud_4 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -60vw; } #cloud_5 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 8s; -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 6s; overflow: hidden; margin-left: -70vw; } #cloud_6 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 11s; -webkit-animation-duration: 11s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 4s; overflow: hidden; margin-left: -30vw; } #cloud_7 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 16s; -webkit-animation-duration: 16s; /* Safari 4.0 - 8.0 */animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -24vw; animation-delay: 5s; } #cloud_8 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -42vw; animation-delay: 3s; } #cloud_9 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -36vw; animation-delay: 5s; } #hex_1 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 8s; -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; margin-top: 9vh; } #hex_2 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 21s; -webkit-animation-duration: 21s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -50vw; } #hex_3 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -20vw; } #sigma_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -30vw; } #sigma_2 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 10s; -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -20vw; animation-delay: 1s; } #sigma_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -50vw; animation-delay: 3s; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes cloud_anim_1 { 0% {left:100%; top:-5h; opacity:0.0; } 10% {left:90%; top:-5vh; opacity: 0.80; } 100% {left:0%; top:-5vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_2 { 0% {left:100%; top:10vh; opacity:0.0; } 10% {left:90%; top:10vh; opacity: 0.80; } 100% {left:0%; top:10vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_3 { 0% {left:100%; top:25vh; opacity: 0.0; } 10% {left:90%; top:25vh; opacity: 0.80; } 100% {left:0%; top:25vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_4 { 0% {left:100%; top:40vh; opacity: 0.0; } 10% {left:90%; top:40vh; opacity: 0.80; } 100% {left:0%; top:40vh; opacity: 0.0; } } /* Standard syntax */ @keyframes cloud_anim_1 { 0% {left: 100%; top:-5vh; opacity: 0.0; } 10% {left: 90%; top:-5vh; opacity: 0.80; } 100% {left: 0%; top:-5vh; opacity: 0.0; } } @keyframes cloud_anim_2 { 0% {left:100%; top:10vh; opacity: 0.0; } 10% {left:90%; top:10vh; opacity: 0.80; } 100% {left:0%; top:10vh; opacity: 0.0; } } @keyframes cloud_anim_3 { 0% {left:100%; top:25vh; opacity: 0.0; } 10% {left:90%; top:25vh; opacity: 0.80; } 100% {left:0%; top:25vh; opacity: 0.0; } } @keyframes cloud_anim_4 { 0% {left:100%; top:40vh; opacity: 0.0; } 10% {left:90%; top:40vh; opacity: 0.80; } 100% {left:0%; top:40vh; opacity: 0.0; } } #header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s; } .header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s;} .header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 48px!important; background-color:rgba(0,0,0,1)!important; z-index: 999998!important; transition: 0.5s;} #mode_logo { width: 150px; margin-top: 0px; margin-left: -48px; filter:invert(1); } #mode_amp_go_button { width: 72px; margin-top: -60px; padding-top: 0px; margin-left: -24px; opacity: 0; transition: 0.4s; } #mode_amp_go_button_b { width: 72px; margin-top: -60px; padding-top: 0px; margin-left: -24px; opacity: 1; } /* HEADER CHANGE-ON-SCROLL STYLES */ .mode_go_start { opacity: 0!important; } .mode_go_scroll { opacity: 1!important; width: 70!important; margin-top: -54px!important; } .mode_go_start_b { opacity: 1!important; } .mode_go_scroll_b { opacity: 0!important; width: 70!important; margin-left: -70px!important; } .logo_scroll { filter: invert(0)!important; width: 120px!important; margin-top: 0px!important; transition: 0.5s; } .logo_start { filter: invert(1); width: 150px; transition: 0.5s; } .nav_icon { cursor: pointer; z-index: 999999; } .bar1_start { background-color: #000000!important; } .bar2_start { background-color: #000000!important; } .bar1_scroll { background-color: #FFFFFF!important; margin-top: 15px!important; width: 4px!important; height: 18px!important; } .bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 20px; transition: 0.5s; z-index: 999999; } #plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ #inside_header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color: #231f20; z-index: 999998!important; transition: 0.5s; } .inside_header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:#231f20; z-index: 999998!important; transition: 0.5s;} .inside_header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 48px!important; background-color:#000000!important; z-index: 999998!important; transition: 0.5s;} #inside_mode_logo { width: 150px; margin-top: 0px; margin-left: -48px; } #inside_mode_amp_go_button { width: 72px; margin-top: -60px; padding-top: 0px; margin-left: -24px; transition: 0.4s; } /* HEADER CHANGE-ON-SCROLL STYLES */ .inside_mode_go_start { } .inside_mode_go_scroll { width: 70px!important; margin-top: -54px!important; } .inside_logo_scroll { width: 120px!important; margin-top: 0px!important; transition: 0.5s; } .inside_logo_start { width: 150px; transition: 0.5s; } .inside_bar1_start { background-color: #FFFFFF!important; } .inside_bar2_start { background-color: #FFFFFF!important; } .inside_bar1_scroll { background-color: #FFFFFF!important; margin-top: 15px!important; width: 4px!important; height: 18px!important; } .inside_bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #inside_plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 20px; transition: 0.5s; z-index: 999999; } #inside_plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .inside_bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ /* NEW HOME INTRO/START */ #first_row { background-image: url('images/intro_fixed_cloud_bkg.png'); background-size: cover; background-attachment: fixed; background-color:#e7f1f4; width: 100%; margin: 0px; padding: 0px; height: 480px; } #row_1 { position: relative; z-index: 12; width: 100vw; height: 50vh; background-color:#e7f1f4; background-image: url('images/intro_fixed_cloud_bkg2.png'); background-size: cover; background-attachment: fixed; text-align: center; } #cloud_to_the_core_top { display: none; } #cloud_to_the_core_bottom { display: none; } #cloud_to_the_core_m { width: 90%; margin-left: auto; margin-right: auto; margin-top: 9vh; } #cloud_to_the_core_m img { width: 100%; max-width: 270px; margin-left: -10px; } #start_switch { position: relative; display: inline-block; width: 100%; text-align: center; margin: 0px; padding: 0px; z-index: 18!important; } #turn_on_slider { position: relative; display: inline-block; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } #turn_on_lozenge { margin: 0px 10px -10px 0px; display: inline-block; position: relative; bottom: -5px; text-align: left; width: 120px; height: 45px; padding: 0px; background-color:#000000; box-shadow: 0px 0px 18px rgba(0, 180, 220, 0); border-radius: 45px; z-index: 9999913;} #turn_on_circle { text-align: center; display: inline-block; position: relative; width: 36px; height: 36px; background-color:#00b4dc; border-radius: 18px; padding-top: -5px; margin-top: 4px; margin-left: 78px; animation: slide 2s, fade 2s; animation-timing-function: linear; } #turn_on_circle img { margin-left: -2px; margin-top: -2px; width: 40px; } /* Standard syntax */ @keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } @keyframes fade_up { 0% {top: 90px; opacity: 0;} 75% {top: 90px; opacity: 0;} 100% {top: 0px; opacity: 1;} } /* Safari 4.0 - 8.0 */ @-webkit-keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @-webkit-keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } @-webkit-keyframes fade_up { 0% {margin-top: 90px; opacity: 0;} 90% {margin-top: 90px; opacity: 0;} 100% {margin-top: 0px; opacity: 1;} } #performance_text { position: relative; display: block; margin-top: 30px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 32px; line-height: 32px; font-weight: 600; text-transform: uppercase; color:#FFFFFF; } #for_SDWAN_text { width: 90%; margin-left: auto; margin-right: auto; max-width: 800px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 21px; line-height: 24px; margin-top: 0px; font-weight: 500; color:#FFFFFF; text-align: center; } #intro_bullets { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-top: 10px; padding-bottom: 60px; } #intro_bullet_1 { display: none; } #intro_bullet_2 { display: none; } #intro_bullet_3 { display: none; } #intro_bullet_1_landscape { display: none; } #intro_bullet_2_landscape { display: none; } #intro_bullet_3_landscape { display: none; } #intro_bullet_1_m { position: relative; display: inline block; margin-left: 70px; margin-top: 0px; z-index: 18; text-align: left; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 3s; -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear;} #intro_bullet_2_m { position: relative; display: inline-block; margin-left: 70px; padding-top: 20px; margin-top: 0px; text-align: left; z-index: 18; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 3.5s; -webkit-animation-duration: 3.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear;} #intro_bullet_3_m { position: relative; display: inline-block; margin-left: 70px; padding-top: 20px; margin-top: 0px; padding-bottom: 40px; z-index: 18; text-align: left;opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 4s; -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear;} .intro_bullet { color:#FFFFFF; font-size: 20px; font-weight: 600; line-height: 24px; text-align: left; margin: 0px 10px 0px -10px; } .intro_plus { color:#00b4dc; margin: 0px 0px 0px -30px; font-size: 36; font-weight: 800; float: left; } /* END NEW HOME INTRO/START */ /* NEW HOME SWITCH AND VALUES */ #angle_top_turn_on { width: 100%; height: 60px; margin-top: -60px; } #angle_turn_top { width: 100%; height: 60px; margin-top: -61px; position: relative; z-index: 19; } #angle_turn_top > img { width: 100%; height: 60px; } #turn_content { position: relative; z-index: 19;width: 100%; min-height: 50vh; margin: -2px 0px 0px 0px; padding: 0px; background-image: linear-gradient(to right, #004a5c, #004a5c, #006d87, #008fb0, #0096b8); /*background-image: url('images/start_bottom_bkg.png');*/ background-size: 100% auto; } #angle_turn_bottom { position: relative; z-index: 19;width: 100%; height: 60px; } #angle_turn_bottom > img { width: 100%; height: 60px; margin-top: -1px; } #features_and_quotes_row { margin-top: -60px; background-image: url('images/new_mobile_features_bkg_vert2.png'); background-size: cover; background-attachment: fixed; min-height: 50vh; width: 100%; } #angle_after_quotes { display: none; } #angle_after_quotes img { height: 60px; width: 100%; margin-top: -40px; } #angle_spacer { display: none; } /* END NEW HOME SWITCH AND VALUES */ /* FEATURES */ #row_2 { background-color:#393939; margin-top: -1px; height: 840px; background-image: url('images/new_mobile_features_bkg.png'); background-size: cover; background-position: center center; } #angle_top_quotes { display: none; } /* THIS IS THE BLACK ANGLE BELOW THE INTRO PANE - BEHIND THE FEATURES ON DESKTOP*/ #angle_top_quotes_m { position: relative; margin-top: -60px; width: 100%; z-index: 15; } #angle_top_quotes_m img { margin-top: 0px; width: 100%; height: 60px; } #features_bottom_angle { margin-top: 0px!important; } #features_bottom_angle img { margin-top: 0px!important; width: 100%; height: 60px; } .feature_group { width: 90%; max-width: 1200px; text-align: center; margin-left: auto; margin-right: auto; position: relative; margin-top: -90px; z-index: 21; } .resource_cell, .news_cell, .next_cell { width: 300px; height: 290px; position: relative; text-align: center; margin-left: auto; margin-right: auto; display: none; } .resource_cell img, .news_cell img, .next_cell img { width: 300px!important; height: 250px!important; position: absolute; top: 0; left: 0; } .resource_title_block, .news_title_block, .next_title_block { position: absolute; left: 0; width: 160px; background-color:#00b4dc; padding: 10px 20px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; color:#FFFFFF; font-weight: 600; } .resource_description, .news_description, .next_description { background-color:rgba(0,0,0,0.75); position: absolute; width: 300px!important; left: 0; top: 157; height: 60px!important; } .resource_description p, .news_description p, .next_description p { text-align: left; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 16px; line-height: 21px; font-weight: 500; margin-top: 8; color:#FFFFFF; padding: 0px 20px; } .resource_link, .news_link, .next_link { position: absolute; top: 202; width: 300px!important; margin-left: 0px; border-style: solid; border-color:#00b4dc; border-width: 1px 0px 0px 0px; font-weight: 600; } /* AWARDS */ #awards { display: block; float: none; clear: both; height: 510px; padding-top: 0px; margin-top: 10px; margin-bottom: 60px; padding-bottom: 30px; } .award_left { height: 200px; width: 80%; margin-right: 20%; float: none; background-color:rgba(0,0,0,0.6); text-align: right; } .award_left_img { float: none; } .award_left_img img { width: 210px; margin: 20px; } .award_left_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 20px; } .award_right { height: 200px; width: 80%; float: none; margin-left: 20%; background-color:rgba(0,0,0,0.6); margin-top: 30px; text-align: left; } .award_right_img { float: none; } .award_right_img img { width: 210px; margin: 20px; } .award_right_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 20px; } .news_text { color:#FFFFFF; font-size: 21px; line-height: 30px; font-weight: 500; margin: 0px 20px 10px 20px; padding-top: 0px; } /* QUOTES */ #laser_1 { display: none; } #laser_2 { display: none!important; } #laser_3 { margin-top: 30px; margin-bottom: 0px; } #laser_4 { margin-top: -15px; margin-bottom: 30px; } #quote_laser_2 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 1.5s; -webkit-animation-duration: 1.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 0px; } #quote_laser_3 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_right; -webkit-animation-name: laser_right; /* Safari 4.0 - 8.0 */ animation-duration: 1.75s; -webkit-animation-duration: 1.75s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; left:0; margin-top: 0px; } #quote_laser_4 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2s; -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 0px; margin-bottom: 20px; } #quote_container { position: relative; width: 100%; margin: 0px auto 20px auto; text-align: center; z-index: 14; background-color:rgba(0,0,0,0.35); } #tata_quote { position: relative; width: 90%; max-width: 1200px; text-align: left; margin: 0px auto; clear: both; float: none; z-index: 14; } #tata_quote img { width: 120px; margin: 20px 20px -50px -5px; float: none; } #steve_garson_quote { position: relative; width: 90%; max-width: 1200px; max-height: 200px; text-align: right; margin: 0px auto 0px auto; clear: both; float: none; } #steve_garson_quote img { width: 150px; margin: 20px 0px -90px 0px; float: none; } #fourfiftyone_quote { position: relative; width: 90%; max-width: 1200px; text-align: left; margin: 50px auto 50px auto; clear: both; float: none; } #fourfiftyone_quote img { width: 120px; margin: 0px 20px -70px 0px; float: none; } #versa_quote { position: relative; width: 90%; max-width: 1200px; text-align: right; margin: 50px auto 50px auto; padding-bottom: 10px; clear: both; float: none; padding-bottom: 40px; } #versa_quote img { width: 120px; margin: 10px 0px -60px 0px; float: none; } .home_quote_left { font-size: 21px; line-height: 24px; color:#f2f2f2; font-weight: 300; text-align: left;} .home_attribution_left { font-size: 12px; line-height: 15px; color:#B3B3B3; font-weight: 400; text-align: left; } .home_quote_right { font-size: 36px; line-height: 42px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_quote_right_medium { font-size: 21px; line-height: 24px; color:#f2f2f2; font-weight: 300; text-align: right; margin-right: 10px; } .home_quote_right_small { font-size: 24px; line-height: 30px; color:#f2f2f2; font-weight: 300; text-align: right; } .home_attribution_right { font-size: 12px; line-height: 15px; color:#B3B3B3; font-weight: 400; text-align: right; margin-right: 10px; } #quote_fade_to_clouds { display: none; } #quote_fade_to_clouds img { display: none; } #cloud_spacer { display: none; } #cloud_fade_to_core_control { display: none; } #cloud_fade_to_core_control img { display: none; } #angle_before_core_control img { height: 90px; margin-top: -110px; width: 100%; position: relative; z-index: 25; } /* CORE CONTROL */ #sd_wan_logos { position: absolute; top: 100; height: 100%; width: 100%; left: 0; z-index: 12; background-image: url('images/no_worry_sdWAN_logos2.png'); background-size: 100% auto; background-position: top center; background-attachment: fixed; } #fixed_bkg_core_control { position: relative; z-index: 13; width: 100vw; height: 700px; margin-top: -65px; padding-top: 90px; background-color:#FFFFFF; background-image: url('images/new_photo_bkg3.png'); background-attachment: fixed; text-align: center; } #fixed_bkg_core_control > img { margin-top: 0px; width: 100%; height: 60px; } /* THIS IS THE BLACK ANGLE BELOW THE QUOTES */ #core_control_header { text-align: center; font-size: 36px; color:#393939; font-weight: 700!important; margin-top: 0px; margin-bottom: 20px; position: relative; } #core_control_title { width: 100vw; position: relative; text-align: center; margin-top: 30px; text-align: center; } #core_control_title img { width: 80%; position: relative; text-align: center; margin-top: -10px; margin-left: auto; margin-right: auto; } #core_control_subtitle { display: none; } #core_control_subtitle_m { text-align: center; font-size: 20px; font-weight: 600; line-height: 27px; color:#616161; margin-top: 0px; margin-left: 20px; margin-right: 20px; margin-bottom: 30px; position: relative; } #core_control_base_m { position: relative: z-index: 13; } #core_control_base_m img { width: 320px; height: 373px; margin: 0px; padding: 0px; } #core_control_modeCore_m { text-align: center; margin-top: -373px; } #core_control_modeCore_m img { width: 320px; height: 373px; margin: 0px; padding: 0px; } #core_control_blueSDWAN_m { position: relative; margin-top: -373px; } #core_control_blueSDWAN_m img { width: 320px; height: 373px; margin: 0px; padding: 0px; } #core_control_multiCloud_m { margin-top: -373px; } #core_control_multiCloud_m img { width: 320px; height: 373px; margin: 0px; padding: 0px; } #core_control_collab_m { margin-top: -373px; } #core_control_collab_m img { width: 320px; height: 373px; margin: 0px; padding: 0px; } #core_control_desktop { display: none; } #core_control_mobile_landscape { display: none; } /* STRESS LESS */ #angle_top_core_performance { position: relative; margin-top: -60px; z-index: 13; height: 60px; width: 100vw; } #angle_top_core_performance img { width: 100%; height: 60px; margin-top: 1px; } /* THIS IS THE BLUE ANGLE ABOVE STRESS LESS */ #core_performance_header { text-align: center; font-size: 36px; color:#f2f2f2; font-weight: 600; margin-top: 0px; padding-top: 20px; margin-bottom: 20px; position: relative; } #core_performance_middle { position: relative; margin-top: 0px; height: 560px; z-index:13; background-color:#036179; background-image: url('images/stress_less_bkg_new.png'); background-size: cover; width: 100vw; text-align: center; } .stress_less_icon { width: 90px; float: left; margin-right: 10px; } #core_performance_1 { float: none; clear: both; width: 90%; margin: 0px auto; padding: 10px; } #core_performance_2 { float: none; clear: both; width: 90%; margin: -20px auto 10px auto; padding: 10px; } #core_performance_3 { float: none; clear: both; width: 90%; margin: -20px auto 10px auto; padding: 10px; } #core_performance_4 { float: none; clear: both; width: 90%; margin: -20px auto 10px auto; padding: 10px; } #core_performance_5 { float: none; clear: both; width: 90%; margin: -20px auto 30px auto; padding: 10px; } #core_performance_1 h3 { font-size: 18px; text-align: left; line-height: 21px; } #core_performance_2 h3 { font-size: 18px; text-align: left; line-height: 21px; } #core_performance_3 h3 { font-size: 18px; text-align: left; line-height: 21px; } #core_performance_4 h3 { font-size: 18px; text-align: left; line-height: 21px; } #core_performance_5 h3 { font-size: 18px; text-align: left; line-height: 21px; } #angle_top_core_productivity { position: relative; margin-top: 0px; z-index: 13; height: 60px; width: 100vw; } #angle_top_core_productivity img { width: 100%; height: 60px; margin-top: 59px; z-index: 13; } /* THIS IS THE BLUE ANGLE BELOW STRESS LESS */ /* DO MORE */ #core_productivity_header { text-align: center; font-size: 42px; color:#f2f2f2; font-weight: 600; margin-bottom: -40px; padding-top: 90px; position: relative; } #fixed_bkg_core_productivity { position: relative; z-index: 12; width: 100vw; height: 540px; margin-top: -60px; background-color:#121212; background-image: url('images/new_photo_bkg3b_vert.png'); background-size: cover; background-position: bottom right; background-attachment: fixed; text-align: center; } #core_productivity_interactive { text-align: center; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-bottom: 0px; position: relative; } #core_productivity_arrow_button { position: relative; clear: both; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; margin-top: -210px; } /* DO MORE SLIDER STYLES */ .slider { margin-left: auto; margin-right: auto; text-align: center; margin-top: -30px; } .slick-slide { -webkit-transform: translate3d(0,0,0); } .slick-slide, .slick-slide *{ outline: none !important; } .center { width: 100%!important; max-width: 750px; height: 400px; margin-top: 60px; text-align: center; } .slick-slide { margin: 0px 0px 0px 0px; text-align: center; width: 210px; transition: 0.5s; } .slick-prev:before, .slick-next:before { color: black; } .slick-slide { transition: all ease-in-out 0.3s; opacity: 1; } .slick-active { opacity: 1; } .slick-current { opacity: 1; } .slick-center img { width: 210px!important; opacity: 1!important; margin-left: -48px!important; margin-top: -10px!important; } .slick-center { width: 300px; transition: 0.5s; text-align: center; } .slick-slide img { width: 90px; margin-left: auto; margin-right: auto; opacity: 0.1; transition: 0.5s; margin-left: 20px; } .slider h3 { color:#616161; font-size: 6px; margin-top: -30px; transition: 0.5s;} .slick-center h3 { color:#f2f2f2; font-size: 11px; margin-top: -20px!important; margin-left: -40px; margin-right: -40px; } .core_productivity_title { font-size: 12px; color:#616161; margin-top: 30px; transition: 0.5s; } .slick-center .core_productivity_title { font-size: 18px; color:#f2f2f2; font-weight: 500; margin-top: 0px!important; margin-left: -40px; margin-right: -40px; } /* MODE AND GO */ #row_7 { width: 100vw; z-index: 13; background-color:#F7F7F7; margin-top: -20px; background-image: url('images/mode_and_go_bkg_gold_mobile2.png'); background-size: cover; background-position: center center; } #mode_go_more { display: none; } #mode_go_more_m { display: block; position: relative; width: 100vw; max-width: 1000px; margin-left: auto; margin-right: auto; text-align: center; } #mode_and_go { margin-top: 0px; width: 100%; height: 490px; float: none; margin-right: 0%; } #mode_and_go_header img { width: 100%; max-width: 300px; margin-top: 50px; } #mode_and_go_image img { width: 90%; margin-top: -40px; max-width: 300px;} #mode_and_more { margin-top: -30px; width: 100%; height: 490px; margin-left: 0%; float: none; } #mode_and_more_header img { width: 100%; max-width: 300px; margin-top: 50px; } #mode_and_more_image img { width: 90%; margin-top: -40px; max-width: 300px; } #mode_and_go_header { text-align: center; font-size: 54px; color:#616161; font-weight: 600; margin-bottom: 60px; } #mode_and_more_header { text-align: center; font-size: 54px; color:#f2f2f2; font-weight: 600; margin-bottom: 60px; } } @media only screen and (min-width: 469px) and (max-width: 767px) and (orientation: portrait) { #mobile_landscape_modal_china, #modal_china { display: none!important;} #mobile_portrait_modal_china { width: 90%; max-width: 500px; min-width: 450px; margin-left: auto; margin-right: auto; height: 100vh; display: block; position: fixed; top: 10vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } #intro_modal_china { width: 90%; max-width: 500px; min-width: 450px; margin-left: auto; margin-right: auto; height: 100vh; display: block; position: fixed; top: 20vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } .china_modal_close_link { display: block; width: 90px; height: 25px; position: absolute; right: 30px; top: -25px; background-color:#ad1e1e; text-align: center; padding-top: 0px; padding-bottom: 4px; color:#ffffff; font-size: 20px; font-weight: 800; font-family: 'Source Sans Pro', Trebuchet, sans-serif; z-index: 1000004; } .china_modal_content img { width: 450px; } #china_form_image_desktop { width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -60px; } #china_form_image_mobile { display: none; width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #enterprises_button { width: 230px; height: 50px; text-align: center; position: relative; margin-left: calc(50% - 230px); margin-top: -60px; } #asps_button { width: 230px; height: 50px; text-align: center; position: relative; margin-left: calc(50% + 0px); margin-top: -50px; } #terabit_core_logo { float: right; width: 120px; margin-top: -30px; margin-right: 0px; } #all_awards { width: 65%; padding: 20px; min-width: 400px; text-align: right; background-color:rgba(0,0,0,0.5); text-align: right; } .new_accolade { width: 240px; margin: 20px 10px; display: block; } #menu { overflow: hidden; opacity: 1; position: fixed; top: 60; padding-top: -10px; left: 0; width: 100%; height: 100vh; display: block; z-index:999997!important; background-color:#393939; background-image: url('images/menu_bkg_min.png'); background-size: cover; background-position: center center; } #mega_menu { display: none; } #mobile_menu { display: block; height: 100vh; margin-top: 0px; padding-left: 20px; padding-bottom: 50px!important; overflow: scroll; } .menu_start { top: 60!important; padding-top: -10px; transition: 0.5s; } .menu_scroll { top: 40!important; padding-top: 10px!important; transition: 0.5s; } #cloud_1 img { width: 25vw; z-index: 2; } #cloud_2 img { width: 10vw; z-index: 2; } #cloud_3 img { width: 20vw; z-index: 2; } #cloud_4 img { width: 30vw; z-index: 2; } #cloud_5 img { width: 35vw; z-index: 2; } #cloud_6 img { width: 15vw; z-index: 2; } #cloud_7 img { width: 12vw; z-index: 2; } #cloud_8 img { width: 21vw; z-index: 2; } #cloud_9 img { width: 18vw; z-index: 2; } #hex_1 img { width: 5vw; z-index: 2; } #hex_2 img { width: 25vw; z-index: 2; } #hex_3 img { width: 10vw; z-index: 2; } #sigma_1 img { width: 15vw; z-index: 2; } #sigma_2 img { width: 10vw; z-index: 2; } #sigma_3 img { width: 25vw; z-index: 2; } #cloud_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; } #cloud_2 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #cloud_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 10s; -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -20vw; } #cloud_4 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -30vw; } #cloud_5 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 8s; -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 6s; overflow: hidden; margin-left: -35vw; } #cloud_6 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 11s; -webkit-animation-duration: 11s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 4s; overflow: hidden; margin-left: -15vw; } #cloud_7 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 16s; -webkit-animation-duration: 16s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -12vw; animation-delay: 5s; } #cloud_8 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -21vw; animation-delay: 3s; } #cloud_9 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -18vw; animation-delay: 5s; } #hex_1 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 8s; -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -5vw; margin-top: 9vh; } #hex_2 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 21s; -webkit-animation-duration: 21s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; } #hex_3 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #sigma_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -15vw; } #sigma_2 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 10s; -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; animation-delay: 1s; } #sigma_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; animation-delay: 3s; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes cloud_anim_1 { 0% {left:100%; top:-5h; opacity:0.2; } 50% {left:50%; top:-5vh; opacity: 0.70; } 100% {left:0%; top:-5vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_2 { 0% {left:100%; top:10vh; opacity:0.2; } 50% {left:50%; top:10vh; opacity: 0.70; } 100% {left:0%; top:10vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_3 { 0% {left:100%; top:25vh; opacity: 0.2; } 50% {left:50%; top:25vh; opacity: 0.70; } 100% {left:0%; top:25vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_4 { 0% {left:100%; top:40vh; opacity: 0.2; } 50% {left:50%; top:40vh; opacity: 0.70; } 100% {left:0%; top:40vh; opacity: 0.0; } } /* Standard syntax */ @keyframes cloud_anim_1 { 0% {left: 100%; top:-5vh; opacity: 0.2; } 50% {left: 50%; top:-5vh; opacity: 0.70; } 100% {left: 0%; top:-5vh; opacity: 0.0; } } @keyframes cloud_anim_2 { 0% {left:100%; top:10vh; opacity: 0.2; } 50% {left:50%; top:10vh; opacity: 0.70; } 100% {left:0%; top:10vh; opacity: 0.0; } } @keyframes cloud_anim_3 { 0% {left:100%; top:25vh; opacity: 0.2; } 50% {left:50%; top:25vh; opacity: 0.70; } 100% {left:0%; top:25vh; opacity: 0.0; } } @keyframes cloud_anim_4 { 0% {left:100%; top:40vh; opacity: 0.2; } 50% {left:50%; top:40vh; opacity: 0.70; } 100% {left:0%; top:40vh; opacity: 0.0; } } #header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s; } .header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s;} .header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 48px!important; background-color:rgba(0,0,0,1)!important; z-index: 999998!important; transition: 0.5s;} #mode_logo { width: 150px; margin-top: 0px; margin-left: -6px; filter:invert(1); } #mode_amp_go_button { width: 72px; margin-top: -19px; padding-top: 0px; margin-left: -24px; opacity: 0; transition: 0.4s; } #mode_amp_go_button_b { width: 72px; margin-top: -19px; padding-top: 0px; margin-left: -24px; opacity: 1; } /* HEADER CHANGE-ON-SCROLL STYLES */ .mode_go_start { opacity: 0!important; margin-top: -6px!important;} .mode_go_scroll { opacity: 1!important; width: 70!important; margin-top: -6px!important; } .mode_go_start_b { opacity: 1!important; margin-top: -32px!important; } .mode_go_scroll_b { opacity: 0!important; width: 70!important; margin-left: -70px!important; margin-top: -19px; } .logo_scroll { filter: invert(0)!important; width: 120px!important; margin-top: 0px!important; transition: 0.5s; } .logo_start { filter: invert(1); width: 150px; transition: 0.5s; } .nav_icon { cursor: pointer; z-index: 999999; } .bar1_start { background-color: #000000!important; } .bar2_start { background-color: #000000!important; } .bar1_scroll { background-color: #FFFFFF!important; margin-top: 15px!important; width: 4px!important; height: 18px!important; } .bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 20px; transition: 0.5s; z-index: 999999; } #plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ #inside_header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:#231f20; z-index: 999998!important; transition: 0.5s; } .inside_header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:#231f20; z-index: 999998!important; transition: 0.5s;} .inside_header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 48px!important; background-color:#000000!important; z-index: 999998!important; transition: 0.5s;} #inside_mode_logo { width: 150px; margin-top: 0px; margin-left: -6px; } #inside_mode_amp_go_button { width: 72px; margin-top: 0px; padding-top: 0px; margin-left: -24px; transition: 0.4s; } /* HEADER CHANGE-ON-SCROLL STYLES */ .inside_mode_go_start { margin-top: 0px!important;} .inside_mode_go_scroll { width: 70!important; margin-top: -6px!important; } .inside_logo_scroll { width: 120px!important; margin-top: 0px!important; transition: 0.5s; } .inside_logo_start { width: 150px; transition: 0.5s; } .inside_bar1_start { background-color: #FFFFFF!important; } .inside_bar2_start { background-color: #FFFFFF!important; } .inside_bar1_scroll { background-color: #FFFFFF!important; margin-top: 15px!important; width: 4px!important; height: 18px!important; } .inside_bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #inside_plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 20px; transition: 0.5s; z-index: 999999; } #inside_plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .inside_bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ /* NEW HOME INTRO/START */ #first_row { background-image: url('images/intro_fixed_cloud_bkg.png'); background-size: cover; background-attachment: fixed; background-color:#e7f1f4; width: 100%; margin: 0px; padding: 0px; height: 45vh; } #row_1 { position: relative; z-index: 12; width: 100vw; height: 45vh; background-color:#e7f1f4; background-image: url('images/intro_fixed_cloud_bkg2.png'); background-size: cover; background-attachment: fixed; text-align: center; } #cloud_to_the_core_top { width: 90%; margin-left: auto; margin-right: auto; margin-top: 14vh; } #cloud_to_the_core_top img { width: 100%; margin-top: 0vh; } #cloud_to_the_core_bottom { width: 90%; margin-left: auto; margin-right: auto; } #cloud_to_the_core_bottom img { width: 100%; margin-top: -1px; margin-bottom: 10vh; } #cloud_to_the_core_m {display: none;} #start_switch { position: relative; display: inline-block; width: 100%; text-align: center; margin: 0px; padding: 0px; z-index: 18!important; } #turn_on_slider { position: relative; display: inline-block; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } #turn_on_lozenge { margin: 0px 10px -10px 0px; display: inline-block; position: relative; bottom: -5px; text-align: left; width: 120px; height: 45px; padding: 0px; background-color:#000000; box-shadow: 0px 0px 18px rgba(0, 180, 220, 0); border-radius: 45px; z-index: 9999913;} #turn_on_circle { text-align: center; display: inline-block; position: relative; width: 36px; height: 36px; background-color:#00b4dc; border-radius: 18px; padding-top: -5px; margin-top: 4px; margin-left: 78px; animation: slide 3s, fade 3s; animation-timing-function: linear; } #turn_on_circle img { margin-left: -2px; margin-top: -2px; width: 40px; } /* Standard syntax */ @keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } @keyframes fade_up { 0% {margin-top: 90px; opacity: 0;} 75% {margin-top: 90px; opacity: 0;} 100% {margin-top: 0px; opacity: 1;} } /* Safari 4.0 - 8.0 */ @-webkit-keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @-webkit-keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } @-webkit-keyframes fade_up { 0% {margin-top: 90px; opacity: 0;} 90% {margin-top: 90px; opacity: 0;} 100% {margin-top: 0px; opacity: 1;} } #performance_text { position: relative; display: block; margin-top: 30px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 27px; line-height: 32px; font-weight: 600; text-transform: uppercase; color:#FFFFFF; } #for_SDWAN_text { width: 80%; margin-left: auto; margin-right: auto; max-width: 800px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 21px; line-height: 24px; margin-top: 0px; font-weight: 500; color:#FFFFFF; text-align: center; } #intro_bullets { width: 90%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-top: 10px; padding-bottom: 60px; } #intro_bullet_1 { display: none; } #intro_bullet_2 { display: none; } #intro_bullet_3 { display: none; } #intro_bullet_1_landscape { display: none; } #intro_bullet_2_landscape { display: none; } #intro_bullet_3_landscape { display: none; } #intro_bullet_1_m { position: relative; display: inline block; margin-left: 70px; margin-top: 0px; z-index: 18; text-align: left; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 3s; -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; } #intro_bullet_2_m { position: relative; display: inline-block; margin-left: 70px; margin-top: 0px; padding-top: 20px; text-align: left; z-index: 18; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 3.5s; -webkit-animation-duration: 3.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; } #intro_bullet_3_m { position: relative; display: inline-block; margin-left: 70px; margin-top: 0px; padding-top: 20px; padding-bottom: 40px; z-index: 18; text-align: left; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 4s; -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; } .intro_bullet { color:#FFFFFF; font-size: 21px; font-weight: 600; line-height: 24px; text-align: left; margin: 0px 10px 0px 0px; } .intro_plus { color:#00b4dc; margin: 0px 0px 0px -30px; font-size: 36; font-weight: 800; float: left; } /* END NEW HOME INTRO/START */ /* NEW HOME SWITCH AND VALUES */ #angle_top_turn_on { width: 100%; height: 60px; margin-top: -60px; } #angle_turn_top { width: 100%; height: 60px; margin-top: -61px; position: relative; z-index: 19; } #angle_turn_top > img { width: 100%; height: 60px; } #turn_content { position: relative; z-index: 19;width: 100%; min-height: 50vh; margin: -2px 0px 0px 0px; padding: 0px; background-image: linear-gradient(to right, #004a5c, #004a5c, #006d87, #008fb0, #0096b8); /*background-image: url('images/start_bottom_bkg.png');*/ background-size: 100% auto; } #angle_turn_bottom { position: relative; z-index: 19;width: 100%; height: 60px; } #angle_turn_bottom > img { width: 100%; height: 60px; } #features_and_quotes_row { margin-top: -60px; background-image: url('images/new_mobile_features_bkg_vert2.png'); background-size: cover; background-attachment: fixed; min-height: 50vh; width: 100%; } #angle_after_quotes { display: none; } #angle_after_quotes img { height: 60px; width: 100%; margin-top: -40px; } #angle_spacer { display: none; } /* END NEW HOME SWITCH AND VALUES */ /* FEATURES */ #row_2 { background-color:#393939; margin-top: -1px; height: 840px; background-image: url('images/new_mobile_features_bkg.png'); background-size: cover; background-position: center center; } #angle_top_quotes { display: none; } /* THIS IS THE BLACK ANGLE BELOW THE INTRO PANE - BEHIND THE FEATURES ON DESKTOP*/ #angle_top_quotes_m { position: relative; margin-top: -60px; width: 100%; z-index: 15; } #angle_top_quotes_m img { margin-top: 0px; width: 100%; height: 60px; } #features_bottom_angle { margin-top: 0px!important; } #features_bottom_angle img { margin-top: 0px!important; width: 100%; height: 60px; } .feature_group { width: 90%; max-width: 1200px; text-align: center; margin-left: auto; margin-right: auto; position: relative; margin-top: -90px; z-index: 21; } .resource_cell, .news_cell, .next_cell { width: 300px; height: 290px; position: relative; text-align: center; margin-left: auto; margin-right: auto; display: none; } .resource_cell img, .news_cell img, .next_cell img { width: 300px!important; height: 250px!important; position: absolute; top: 0; left: 0; } .resource_title_block, .news_title_block, .next_title_block { position: absolute; left: 0; width: 160px; background-color:#00b4dc; padding: 10px 20px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; color:#FFFFFF; font-weight: 600; } .resource_description, .news_description, .next_description { background-color:rgba(0,0,0,0.95); position: absolute; width: 300px!important; left: 0; top: 157; height: 60px!important; } .resource_description p, .news_description p, .next_description p { text-align: left; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 16px; line-height: 21px; font-weight: 500; margin-top: 8; color:#FFFFFF; padding: 0px 20px; } .resource_link, .news_link, .next_link { position: absolute; top: 202; width: 300px!important; margin-left: 0px; border-style: solid; border-color:#00b4dc; border-width: 1px 0px 0px 0px; } /* AWARDS */ #awards { display: block; float: none; clear: both; height: 300px; padding-top: 0px; margin-top: 10px; margin-bottom: 150px; padding-bottom: 120px; } .award_left { height: 200px; width: 80%; margin-right: 20%; float: none; background-color:rgba(0,0,0,0.6); text-align: right; } .award_left_img { float: none; } .award_left_img img { width: 210px; margin: 20px; } .award_left_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 0px 20px; } .award_right { height: 200px; width: 80%; float: none; margin-left: 20%; background-color:rgba(0,0,0,0.6); margin-top: 24px; text-align: left; } .award_right_img { float: none; } .award_right_img img { width: 210px; margin: 20px; } .award_right_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 0px 20px; } .news_text { color:#FFFFFF; font-size: 21px; line-height: 30px; font-weight: 500; margin-top: 0px; padding-top: 0px; } /* QUOTES */ #laser_1 { display: none; } #laser_2 { display: none!important; } #laser_3 { margin-top: 30px; margin-bottom: 0px; } #laser_4 { margin-top: -15px; margin-bottom: 0px; } #quote_laser_2 { height: 2px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2.5s; -webkit-animation-duration: 2.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 0px; } #quote_laser_3 { height: 2px!important; z-index: 16; position: absolute; animation-name: laser_right; -webkit-animation-name: laser_right; /* Safari 4.0 - 8.0 */ animation-duration: 1.75s; -webkit-animation-duration: 1.75s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; left:0; margin-top: 0px; } #quote_laser_4 { height: 2px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2s; -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 0px; } #quote_container { position: relative; width: 100%; margin: 0px auto 20px auto!important; text-align: center; z-index: 14; background-color:rgba(0,0,0,0.35); } #tata_quote { position: relative; width: 90%; max-width: 1200px; text-align: left; margin: 0px auto; clear: both; float: none; z-index: 14; } #tata_quote img { width: 120px; margin: 20px 20px -50px -5px; float: none; } #steve_garson_quote { position: relative; width: 90%; max-width: 1200px; max-height: 200px; text-align: right; margin: 0px auto 0px auto; clear: both; float: none; } #steve_garson_quote img { width: 150px; margin: 20px 0px -90px 0px; float: none; } #fourfiftyone_quote { position: relative; width: 90%; max-width: 1200px; text-align: left; margin: 50px auto 50px auto; clear: both; float: none; } #fourfiftyone_quote img { width: 120px; margin: 0px 20px -70px 0px; float: none; } #versa_quote { position: relative; width: 90%; max-width: 1200px; text-align: right; margin: 50px auto 50px auto; padding-bottom: 30px; clear: both; float: none; } #versa_quote img { width: 120px; margin: 10px 0px -60px 0px; float: none; } .home_quote_left { font-size: 21px; line-height: 24px; color:#f2f2f2; font-weight: 300; text-align: left;} .home_attribution_left { font-size: 12px; line-height: 15px; color:#B3B3B3; font-weight: 400; text-align: left; } .home_quote_right { font-size: 36px; line-height: 42px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_quote_right_medium { font-size: 21px; line-height: 24px; color:#f2f2f2; font-weight: 300; text-align: right; margin-right: 10px; } .home_quote_right_small { font-size: 24px; line-height: 30px; color:#f2f2f2; font-weight: 300; text-align: right; } .home_attribution_right { font-size: 12px; line-height: 15px; color:#B3B3B3; font-weight: 400; text-align: right; margin-right: 10px; } #quote_fade_to_clouds { display: none; } #quote_fade_to_clouds img { display: none; } #cloud_spacer { display: none; } #cloud_fade_to_core_control { display: none; } #cloud_fade_to_core_control img { display: none; } #angle_before_core_control img { height: 120px; margin-top: -110px; width: 100%; position: relative; z-index: 25; } /* CORE CONTROL */ #sd_wan_logos { position: absolute; top: 100; height: 100%; width: 100%; left: 0; z-index: 12; background-image: url('images/no_worry_sdWAN_logos2.png'); background-size: 100% auto; background-position: top center; background-attachment: fixed; } #fixed_bkg_core_control { position: relative; z-index: 13; width: 100vw; height: 810px; margin-top: -60px; padding-top: 100px; background-color:#FFFFFF; background-image: url('images/new_photo_bkg3.png'); background-attachment: fixed; text-align: center; } #core_control_header { text-align: center; font-size: 36px; color:#393939; font-weight: 700!important; margin-top: 0px; margin-bottom: 20px; position: relative; z-index: 26; } #core_control_mobile_horiz { display: none; } #core_control_mobile img { width: 90%; max-width: 400px; margin-top: 30px; margin-left: auto; margin-right: auto; } #core_control_title { width: 100vw; position: relative; text-align: center; margin-top: 30px; text-align: center; } #core_control_title img { width: 80%; max-width: 350px; position: relative; text-align: center; margin-top: -10px; margin-left: auto; margin-right: auto; } #core_control_subtitle { text-align: center; font-size: 20px; font-weight: 600; line-height: 27px; color:#616161; margin-top: 0px; margin-left: 20px; margin-right: 20px; margin-bottom: 30px; position: relative; } #core_control_subtitle_m { display: none; } #core_control_base_m { position: relative: z-index: 13; } #core_control_base_m img { width: 400px; height: 467px; margin: 0px; padding: 0px; } #core_control_modeCore_m { text-align: center; margin-top: -467px; } #core_control_modeCore_m img { width: 400px; height: 467px; margin: 0px; padding: 0px; } #core_control_blueSDWAN_m { position: relative; margin-top: -467px; } #core_control_blueSDWAN_m img { width: 400px; height: 467px; margin: 0px; padding: 0px; } #core_control_multiCloud_m { margin-top: -467px; } #core_control_multiCloud_m img { width: 400px; height: 467px; margin: 0px; padding: 0px; } #core_control_collab_m { margin-top: -467px; } #core_control_collab_m img { width: 400px; height: 467px; margin: 0px; padding: 0px; } #core_control_desktop { display: none; } #core_control_mobile_landscape { display: none; } /* STRESS LESS */ #angle_top_core_performance { position: relative; margin-top: -60px; z-index: 13; height: 60px; width: 100vw; } #angle_top_core_performance img { width: 100%; height: 60px; margin-top: 1px; } /* THIS IS THE BLUE ANGLE ABOVE STRESS LESS */ #core_performance_header { text-align: center; font-size: 42px; color:#f2f2f2; font-weight: 600; margin-top: 0px; padding-top: 20px; margin-bottom: 20px; position: relative; } #core_performance_middle { position: relative; margin-top: 0px; height: 530px; z-index:13; background-color:#036179; background-image: url('images/stress_less_bkg_new.png'); background-size: cover; width: 100vw; text-align: center; } .stress_less_icon { width: 90px; float: left; margin-right: 10px; } #core_performance_1 { float: none; clear: both; width: 80%; max-width: 400px; margin: 0px auto; padding: 10px; } #core_performance_2 { float: none; clear: both; width: 80%; max-width: 400px; margin: -20px auto 10px auto; padding: 10px; } #core_performance_3 { float: none; clear: both; width: 80%; max-width: 400px; margin: -20px auto 10px auto; padding: 10px; } #core_performance_4 { float: none; clear: both; width: 80%; max-width: 400px; margin: -20px auto 10px auto; padding: 10px; } #core_performance_5 { float: none; clear: both; width: 80%; max-width: 400px; margin: -20px auto 30px auto; padding: 10px; } #core_performance_1 h3 { font-size: 18px; text-align: left; line-height: 21px; } #core_performance_2 h3 { font-size: 18px; text-align: left; line-height: 21px; } #core_performance_3 h3 { font-size: 18px; text-align: left; line-height: 21px; } #core_performance_4 h3 { font-size: 18px; text-align: left; line-height: 21px; } #core_performance_5 h3 { font-size: 18px; text-align: left; line-height: 21px; } #angle_top_core_productivity { position: relative; margin-top: 0px; z-index: 13; height: 60px; width: 100vw; } #angle_top_core_productivity img { width: 100%; height: 60px; margin-top: 59px; } /* THIS IS THE BLUE ANGLE BELOW STRESS LESS */ /* DO MORE */ #core_productivity_header { text-align: center; font-size: 42px; color:#f2f2f2; font-weight: 600; margin-bottom: -40px; padding-top: 90px; position: relative; } #fixed_bkg_core_productivity { position: relative; z-index: 12; width: 100vw; height: 480px; margin-top: -60px; background-color:#121212; background-image: url('images/new_photo_bkg3b_vert.png'); background-size: cover; background-position: bottom right; background-attachment: fixed; text-align: center; } #core_productivity_interactive { text-align: center; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-bottom: 0px; position: relative; } #core_productivity_arrow_button { position: relative; clear: both; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; margin-top: -250px; } /* DO MORE SLIDER STYLES */ .slider { margin-left: auto; margin-right: auto; text-align: center; margin-top: -30px; } .slick-slide { -webkit-transform: translate3d(0,0,0); } .slick-slide, .slick-slide *{ outline: none !important; } .center { width: 100%; max-width: 750px; height: 400px; margin-top: 60px; text-align: center; } .slick-slide { margin: 0px 0px 0px 0px; text-align: center; width: 120px; transition: 0.5s; } .slick-prev:before, .slick-next:before { color: black; } .slick-slide { transition: all ease-in-out 0.3s; opacity: 1; } .slick-active { opacity: 1; } .slick-current { opacity: 1; } .slick-center img { width: 210px!important; opacity: 1!important; margin-left: -36px!important; margin-top: -10px!important; } .slick-center { width: 300px; transition: 0.5s; text-align: center; } .slick-slide img { width: 90px; margin-left: auto; margin-right: auto; opacity: 0.25; transition: 0.5s; margin-left: 20px; } .slider h3 { color:#616161; font-size: 8px; margin-top: -30px; transition: 0.5s;} .slick-center h3 { color:#f2f2f2; font-size: 10px; margin-top: -20px!important; } .core_productivity_title { font-size: 12px; color:#616161; margin-top: 30px; transition: 0.5s; } .slick-center .core_productivity_title { font-size: 18px; color:#f2f2f2; font-weight: 500; margin-top: 0px!important; } /* MODE AND GO */ #row_7 { width: 100vw; z-index: 13; background-color:#F7F7F7; margin-top: -20px; background-image: url('images/mode_and_go_bkg_gold_mobile2.png'); background-size: cover; background-position: center center; } #mode_go_more { display: none; } #mode_go_more_m { display: block; position: relative; width: 100vw; max-width: 1000px; margin-left: auto; margin-right: auto; text-align: center; } #mode_and_go { margin-top: 0px; width: 100%; height: 450px; float: none; margin-right: 0%; } #mode_and_go_header img { width: 100%; max-width: 300px; margin-top: 50px; } #mode_and_go_image img { width: 90%; margin-top: -40px; max-width: 300px; } #mode_and_more { margin-top: -30px; width: 100%; height: 450px; margin-left: 0%; float: none; } #mode_and_more_header img { width: 100%; max-width: 300px; margin-top: 50px; } #mode_and_more_image img { width: 90%; margin-top: -40px; max-width: 300px; } #mode_and_go_header { text-align: center; font-size: 54px; color:#616161; font-weight: 600; margin-bottom: 60px; } #mode_and_more_header { text-align: center; font-size: 54px; color:#f2f2f2; font-weight: 600; margin-bottom: 60px; } } @media only screen and (max-width: 568px) and (orientation: landscape) { #mobile_portrait_modal_china, #modal_china { display: none!important; } #mobile_landscape_modal_china { width: 90%; max-width: 500px; min-width: 400px; margin-left: auto; margin-right: auto; height: 100vh; display: block; position: fixed; top: -3vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } #intro_modal_china { width: 90%; max-width: 500px; min-width: 400px; margin-left: auto; margin-right: auto; height: 100vh; display: block; position: fixed; top: -3vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } .china_modal_close_link { display: block; width: 90px; height: 25px; position: absolute; right: -5; top: 40; background-color:#ad1e1e; text-align: center; padding-top: 0px; padding-bottom: 4px; color:#ffffff; font-size: 20px; font-weight: 800; font-family: 'Source Sans Pro', Trebuchet, sans-serif; z-index: 1000004; } .china_modal_content img { width: 400px; } #china_form_image_desktop { width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #china_form_image_mobile { display: none; width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #enterprises_button { width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% - 300px); margin-top: 0px; } #asps_button { width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% + 0px); margin-top: -50px; } #terabit_core_logo { float: right; width: 120px; margin-top: -10px; margin-right: 20px; } #all_awards { width: 65%; padding: 20px; min-width: 400px; text-align: right; background-color:rgba(0,0,0,0.5); text-align: right; } .new_accolade { width: 240px; margin: 20px 10px; display: block; } #menu { overflow: hidden; opacity: 1; position: fixed; top: 60; padding-top: -10px; left: 0; width: 100%; height: 100vh; display: block; z-index:999997!important; background-color:#393939; background-image: url('images/menu_bkg_min.png'); background-size: cover; background-position: center center; } #mega_menu { display: none; } #mobile_menu { display: block; height: 100vh; margin-top: 0px; padding-left: 20px; padding-bottom: 50px!important; overflow: scroll; } .menu_start { top: 60!important; padding-top: -10px; transition: 0.5s; } .menu_scroll { top: 40!important; padding-top: 10px!important; transition: 0.5s; } #cloud_1 img { width: 25vw; z-index: 2; } #cloud_2 img { width: 10vw; z-index: 2; } #cloud_3 img { width: 20vw; z-index: 2; } #cloud_4 img { width: 30vw; z-index: 2; } #cloud_5 img { width: 35vw; z-index: 2; } #cloud_6 img { width: 15vw; z-index: 2; } #cloud_7 img { width: 12vw; z-index: 2; } #cloud_8 img { width: 21vw; z-index: 2; } #cloud_9 img { width: 18vw; z-index: 2; } #hex_1 img { width: 5vw; z-index: 2; } #hex_2 img { width: 25vw; z-index: 2; } #hex_3 img { width: 10vw; z-index: 2; } #sigma_1 img { width: 15vw; z-index: 2; } #sigma_2 img { width: 10vw; z-index: 2; } #sigma_3 img { width: 25vw; z-index: 2; } #cloud_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; } #cloud_2 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #cloud_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 10s; -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -20vw; } #cloud_4 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -30vw; } #cloud_5 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 8s; -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 6s; overflow: hidden; margin-left: -35vw; } #cloud_6 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 11s; -webkit-animation-duration: 11s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 4s; overflow: hidden; margin-left: -15vw; } #cloud_7 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 16s; -webkit-animation-duration: 16s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -12vw; animation-delay: 5s; } #cloud_8 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -21vw; animation-delay: 3s; } #cloud_9 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -18vw; animation-delay: 5s; } #hex_1 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 8s; -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -5vw; margin-top: 9vh; } #hex_2 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 21s; -webkit-animation-duration: 21s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; } #hex_3 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #sigma_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -15vw; } #sigma_2 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 10s; -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; animation-delay: 1s; } #sigma_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; animation-delay: 3s; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes cloud_anim_1 { 0% {left:100%; top:-5h; opacity:0.2; } 50% {left:50%; top:-5vh; opacity: 0.70; } 100% {left:0%; top:-5vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_2 { 0% {left:100%; top:30vh; opacity:0.2; } 50% {left:50%; top:30vh; opacity: 0.70; } 100% {left:0%; top:30vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_3 { 0% {left:100%; top:50vh; opacity: 0.2; } 50% {left:50%; top:50vh; opacity: 0.70; } 100% {left:0%; top:50vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_4 { 0% {left:100%; top:70vh; opacity: 0.2; } 50% {left:50%; top:70vh; opacity: 0.70; } 100% {left:0%; top:70vh; opacity: 0.0; } } /* Standard syntax */ @keyframes cloud_anim_1 { 0% {left: 100%; top:-5vh; opacity: 0.2; } 50% {left: 50%; top:-5vh; opacity: 0.70; } 100% {left: 0%; top:-5vh; opacity: 0.0; } } @keyframes cloud_anim_2 { 0% {left:100%; top:30vh; opacity: 0.2; } 50% {left:50%; top:30vh; opacity: 0.70; } 100% {left:0%; top:30vh; opacity: 0.0; } } @keyframes cloud_anim_3 { 0% {left:100%; top:50vh; opacity: 0.2; } 50% {left:50%; top:50vh; opacity: 0.70; } 100% {left:0%; top:50vh; opacity: 0.0; } } @keyframes cloud_anim_4 { 0% {left:100%; top:70vh; opacity: 0.2; } 50% {left:50%; top:70vh; opacity: 0.70; } 100% {left:0%; top:70vh; opacity: 0.0; } } /* INTRO */ #header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s; } .header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s;} .header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 54px!important; background-color:rgba(0,0,0,1)!important; z-index: 999998!important; transition: 0.5s;} #mode_logo { width: 180px; margin-left: auto; margin-right: auto; margin-top: -7px; filter:invert(1); } #mode_amp_go_button { width: 90px; margin-top: -30px; padding-top: 10px; margin-left: -20px; opacity: 0; transition: 0.4s; } #mode_amp_go_button_b { width: 90px; margin-top: -40px; padding-top: 10px; margin-left: -90px; opacity: 1; } /* HEADER CHANGE-ON-SCROLL STYLES */ .mode_go_start { opacity: 0!important; } .mode_go_scroll { opacity: 1!important; width: 70!important; margin-top: -12px!important; } .mode_go_start_b { opacity: 1!important; margin-top: -40px!important; } .mode_go_scroll_b { opacity: 0!important; width: 70!important; margin-left: -70px!important; margin-top: -12px!important; } .logo_scroll { filter: invert(0)!important; width: 120px!important; transition: 0.5s; margin-top: 0px!important; } .logo_start { filter: invert(1); width: 180px!important; transition: 0.5s; } .nav_icon { cursor: pointer; z-index: 999999; } .bar1_start { background-color: #000000!important; } .bar2_start { background-color: #000000!important; } .bar1_scroll { background-color: #FFFFFF!important; margin-top: 18px!important; width: 4px!important; height: 18px!important; } .bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 20px; transition: 0.5s; z-index: 999999; } #plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ #inside_header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:#231f20; z-index: 999998!important; transition: 0.5s; } .inside_header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:#231f20; z-index: 999998!important; transition: 0.5s;} .inside_header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 50px!important; background-color:#000000!important; z-index: 999998!important; transition: 0.5s;} #inside_mode_logo { width: 180px; margin-left: auto; margin-right: auto; margin-top: -5px; } #inside_mode_amp_go_button { width: 90px; margin-top: -12px; padding-top: 10px; margin-left: -20px; transition: 0.4s; } /* HEADER CHANGE-ON-SCROLL STYLES */ .inside_mode_go_start { } .inside_mode_go_scroll { width: 70!important; margin-top: -14px!important; } .inside_logo_scroll { width: 120px!important; margin-top: 0px!important; transition: 0.5s; } .inside_logo_start { width: 180px!important; transition: 0.5s; } .inside_bar1_start { background-color: #FFFFFF!important; } .inside_bar2_start { background-color: #FFFFFF!important; } .inside_bar1_scroll { background-color: #FFFFFF!important; margin-top: 18px!important; width: 4px!important; height: 18px!important; } .inside_bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #inside_plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 20px; transition: 0.5s; z-index: 999999; } #inside_plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .inside_bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ /* NEW HOME INTRO/START */ #first_row { background-image: url('images/intro_fixed_cloud_bkg.png'); background-size: cover; background-attachment: fixed; background-color:#e7f1f4; width: 100%; margin: 0px; padding: 0px; height: 90vh; } #row_1 { position: relative; z-index: 12; width: 100vw; height: 75vh; background-color:#e7f1f4; background-image: url('images/intro_fixed_cloud_bkg2.png'); background-size: cover; background-attachment: fixed; text-align: center; } #cloud_to_the_core_top { width: 70%; margin-left: auto; margin-right: auto; margin-top: 24vh; } #cloud_to_the_core_top img { width: 100%; margin-top: 0vh; } #cloud_to_the_core_m { display: none; } #cloud_to_the_core_bottom { width: 70%; margin-left: auto; margin-right: auto; } #cloud_to_the_core_bottom img { width: 100%; margin-top: -3px; margin-bottom: 5vh; } #start_switch { position: relative; display: inline-block; width: 100%; text-align: center; margin: 0px; padding: 0px; z-index: 18!important; } #turn_on_slider { position: relative; display: inline-block; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } #turn_on_lozenge { margin: 0px 10px -20px 0px; display: inline-block; position: relative; bottom: -5px; text-align: left; width: 120px; height: 45px; padding: 0px; background-color:#000000; box-shadow: 0px 0px 18px rgba(0, 180, 220, 0); border-radius: 45px; z-index: 9999913;} #turn_on_circle { text-align: center; display: inline-block; position: relative; width: 36px; height: 36px; background-color:#00b4dc; border-radius: 18px; padding-top: -5px; margin-top: 4px; margin-left: 78px; animation: slide 3s, fade 3s; animation-timing-function: linear; } #turn_on_circle img { margin-left: -2px; margin-top: -2px; width: 40px; } /* Standard syntax */ @keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } /* Safari 4.0 - 8.0 */ @-webkit-keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @-webkit-keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } #performance_text { position: relative; display: inline; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 27px; line-height: 27px; font-weight: 600; text-transform: uppercase; color:#FFFFFF; } #for_SDWAN_text { width: 90%; margin-left: auto; margin-right: auto; max-width: 800px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 21px; line-height: 21px; margin-top: 0px; font-weight: 500; color:#FFFFFF; text-align: right; } #intro_bullets { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-top: 20px; } #intro_bullet_1 { display: none; } #intro_bullet_2 { display: none; } #intro_bullet_3 { display: none; } #intro_bullet_1_landscape { position: relative; width: 36%; float: left; margin: 0; z-index: 18; height: 80px; } #intro_bullet_2_landscape { position: relative; width: 33%; float: left; margin: 0; z-index: 18; height: 80px; } #intro_bullet_3_landscape { position: relative; width: 31%; float: left; margin: 0; z-index: 18; height: 80px; } #intro_bullet_1_m { display: none; } #intro_bullet_2_m { display: none; } #intro_bullet_3_m { display: none; } .intro_bullet { color:#FFFFFF; font-size: 21px; font-weight: 500; line-height: 27px; text-align: center; margin: 0px 10px; } .intro_plus { color:#00b4dc; margin: 0px 10px; font-size: 48; font-weight: 800; } /* END NEW HOME INTRO/START */ /* NEW HOME SWITCH AND VALUES */ #angle_top_turn_on { width: 100%; height: 60px; margin-top: -60px; } #angle_turn_top { width: 100%; height: 60px; margin-top: -61px; position: relative; z-index: 19; } #angle_turn_top > img { width: 100%; height: 60px; } #turn_content { position: relative; z-index: 19; width: 100%; height: 80vh; margin: -5px 0px 0px 0px; padding: 0px; background-image: linear-gradient(to right, #004a5c, #004a5c, #006d87, #008fb0, #0096b8); /*background-image: url('images/start_bottom_bkg.png');*/ background-size: 100% auto; } #angle_turn_bottom { position: relative; z-index: 19;width: 100%; height: 60px; } #angle_turn_bottom > img { width: 100%; height: 60px; } #features_and_quotes_row { margin-top: -60px; background-image: url('images/new_mobile_features_bkg.png'); background-size: cover; background-attachment: fixed; min-height: 50vh; width: 100%; } /* END NEW HOME SWITCH AND VALUES */ /* FEATURES */ #row_2 { background-color:#393939; margin-top: -1px; height: 820px; background-image: url('images/new_mobile_features_bkg.png'); background-size: cover; background-position: center center; } #angle_top_quotes { display: none; } /* THIS IS THE BLACK ANGLE BELOW THE INTRO PANE - BEHIND THE FEATURES ON DESKTOP*/ #angle_top_quotes_m { position: relative; margin-top: -60px; width: 100%; z-index: 15; } /* THIS IS THE BLACK ANGLE BELOW THE INTRO PANE - BEHIND THE FEATURES */ #angle_top_quotes_m img { margin-top: 0; width: 100%; height: 60px; } #features_bottom_angle { margin-top: 0px!important; } #features_bottom_angle img { margin-top: 0px!important; width: 100%; height: 60px; } .feature_group { width: 90%; max-width: 1200px; text-align: center; margin-left: auto; margin-right: auto; position: relative; margin-top: -90px; z-index: 21; } .resource_cell, .news_cell, .next_cell { width: 300px; height: 270px; position: relative; text-align: center; margin-left: auto; margin-right: auto; display: none; } .resource_cell img, .news_cell img, .next_cell img { width: 300px; height: 250px; position: absolute; top: 0; left: -100; } .resource_title_block, .news_title_block, .next_title_block { position: absolute; left: 100; top: 90; width: 160px; background-color:#00b4dc; padding: 10px 20px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; color:#FFFFFF; font-weight: 600; } .resource_description, .news_description, .next_description { background-color:rgba(0,0,0,0.75); position: absolute; width: 300px!important; left: 0; top: 130; left: 100; height: 60px!important; } .resource_description p, .news_description p, .next_description p { text-align: left; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 16px; line-height: 21px; font-weight: 500; margin-top: 8; color:#FFFFFF; padding: 0px 20px; } .resource_link, .news_link, .next_link { position: absolute; top: 175; left: 100; width: 300px!important; margin-left: 0px; border-style: solid; border-color:#00b4dc; border-width: 1px 0px 0px 0px; } /* AWARDS */ #awards { display: block; float: none; clear: both; height: 300px; padding-top: 0px; margin-top: 10px; margin-bottom: 150px; padding-bottom: 120px; } .award_left { height: 190px; width: 80%; float: none; margin-right: 20%; background-color:rgba(0,0,0,0.6); text-align: right; } .award_left_img img { width:210px; margin: 20px; } .award_left_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 0px 20px; } .award_right { height: 190px; width: 80%; float: none; margin-left: 20%; background-color:rgba(0,0,0,0.6); margin-top: 24px; text-align: left; } .award_right_img img { width: 210px; margin: 20px; } .award_right_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 0px 20px; } .news_text { color:#FFFFFF; font-size: 21px; line-height: 30px; font-weight: 500; margin-top: 40px; padding-top: 20px; } /* QUOTES */ #laser_1 { display: none; } #laser_2 { display: none!important; } #laser_3 { margin-top: 30px; margin-bottom: 0px; } #laser_4 { margin-top: -15px; margin-bottom: -30px; } #quote_laser_2 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2.5s; -webkit-animation-duration: 2.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 0px; } #quote_laser_3 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_right; -webkit-animation-name: laser_right; /* Safari 4.0 - 8.0 */ animation-duration: 1.75s; -webkit-animation-duration: 1.75s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; left:0; margin-top: 0px; } #quote_laser_4 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2s; -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 0px; } #quote_container { position: relative; width: 100%; margin: 0px auto 20px auto; text-align: center; z-index: 14; background-color:rgba(0,0,0,0.35); } #tata_quote { position: relative; width: 90%; max-width: 1200px; text-align: left; margin: 0px auto; clear: both; float: none; z-index: 14; } #tata_quote img { width: 120px; margin: 0px 20px -50px 20px; float: none; } #steve_garson_quote { position: relative; width: 90%; max-width: 1200px; max-height: 200px; text-align: right; margin: 0px auto 0px auto; clear: both; float: none; } #steve_garson_quote img { width: 150px; margin: 20px 0px -90px 0px; float: none; } #fourfiftyone_quote { position: relative; width: 90%; max-width: 1200px; text-align: left; margin: 50px auto 50px auto; clear: both; float: none; } #fourfiftyone_quote img { width: 120px; margin: 0px 20px -70px 0px; float: none; } #versa_quote { position: relative; width: 90%; max-width: 1200px; text-align: right; margin: 50px auto 50px auto; padding-bottom: 40px; clear: both; float: none; } #versa_quote img { width: 120px; margin: 20px 0px -60px 0px; float: } .home_quote_left { font-size: 21px; line-height: 24px; color:#f2f2f2; font-weight: 300; text-align: left;} .home_attribution_left { font-size: 12px; line-height: 15px; color:#B3B3B3; font-weight: 400; text-align: left; } .home_quote_right { font-size: 36px; line-height: 42px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_quote_right_medium { font-size: 21px; line-height: 24px; color:#f2f2f2; font-weight: 300; text-align: right; margin-right: 10px; } .home_quote_right_small { font-size: 24px; line-height: 30px; color:#f2f2f2; font-weight: 300; text-align: right; } .home_attribution_right { font-size: 12px; line-height: 15px; color:#B3B3B3; font-weight: 400; text-align: right; margin-right: 10px; } #quote_fade_to_clouds { display: none; } #quote_fade_to_clouds img { display: none; } #cloud_spacer { display: none; } #cloud_fade_to_core_control { display: none; } #cloud_fade_to_core_control img { display: none; } #angle_before_core_control img { height: 90px; margin-top: -90px; width: 100%; position: relative; z-index: 25; } /* CORE CONTROL */ #core_control_mobile { display: none; } #core_control_mobile_horiz img { width: 90%; max-width: 700px; margin-top: 30px; margin-left: auto; margin-right: auto; } #core_control_title { width: 100vw; position: relative; text-align: center; margin-top: 30px; text-align: center; } #core_control_title img { width: 400px; position: relative; text-align: center; margin-top: -10px; margin-left: auto; margin-right: auto; } #core_control_header { text-align: center; font-size: 42px; color:#393939; font-weight: 600; margin-bottom: 20px; position: relative; } #core_control_subtitle { text-align: center; font-size: 21px; font-weight: 600; line-height: 27px; color:#616161; margin-top: 0px; margin-left: 20px; margin-right: 20px; margin-bottom: 0px; position: relative; } #core_control_subtitle_m { display: none; } #core_control_base { position: relative: z-index: 13; } #core_control_base img { width: 550px; height: 306px; margin: 0px; padding: 0px; } #core_control_modeCore { text-align: center; margin-top: -306px; } #core_control_modeCore img { width: 550px; height: 306px; margin: 0px; padding: 0px; } #core_control_blueSDWAN { position: relative; margin-top: -306px; } #core_control_blueSDWAN img { width: 550px; height: 306px; margin: 0px; padding: 0px; } #core_control_multiCloud { margin-top: -306px; } #core_control_multiCloud img { width: 550px; height: 306px; margin: 0px; padding: 0px; } #core_control_collab { margin-top: -306px; } #core_control_collab img { width: 550px; height: 306px; margin: 0px; padding: 0px; } #core_control_mobile { display: none; } #core_control_desktop { display: none; } #sd_wan_logos { position: absolute; top: 100; height: 100%; width: 100%; left: 0; z-index: 12; background-image: url('images/no_worry_sdWAN_logos2.png'); background-size: 100% auto; background-position: top center; background-attachment: fixed; } #fixed_bkg_core_control { position: relative; z-index: 13; width: 100vw; margin-top: -48px; padding-top: 80px; height: 550px; background-color:#FFFFFF; background-image: url('images/new_photo_bkg3.png'); background-attachment: fixed; text-align: center; } #fixed_bkg_core_control > img { margin-top: -0px; width: 100%; height: 60px; } /* THIS IS THE BLACK ANGLE BELOW THE QUOTES */ /* STRESS LESS */ #angle_top_core_performance { position: relative; margin-top: 60px; z-index: 13; height: 60px; width: 100vw; } #angle_top_core_performance img { width: 100%; height: 60px; margin-top: -129px; } /* THIS IS THE BLUE ANGLE ABOVE STRESS LESS */ #core_performance_header { text-align: center; font-size: 42px; color:#f2f2f2; font-weight: 600; margin-top: -320px; margin-bottom: 20px; position: relative; } #core_performance_middle { position: relative; margin-top: 180px; height: 520px; z-index:13; background-color:#036179; background-image: url('images/stress_less_bkg_new.png'); background-size: cover; width: 100vw; } .stress_less_icon { width: 90px; float: left; margin-right: 10px; } #core_performance_1 { float: none; clear: both; width: 60%; text-align: center; margin: 0px auto; padding: 10px; } #core_performance_2 { float: none; clear: both; width: 60%; text-align: center; margin: -20px auto 10px auto; padding: 10px; } #core_performance_3 { float: none; clear: both; width: 60%; text-align: center; margin: -20px auto 10px auto; padding: 10px; } #core_performance_4 { float: none; clear: both; width: 60%; text-align: center; margin: -20px auto 10px auto; padding: 10px; } #core_performance_5 { float: none; clear: both; width: 60%; text-align: center; margin: -20px auto 20px auto; padding: 10px; } #core_performance_1 h3 { font-size: 21px; text-align: left; line-height: 24px; } #core_performance_2 h3 { font-size: 21px; text-align: left; line-height: 24px; } #core_performance_3 h3 { font-size: 21px; text-align: left; line-height: 24px; } #core_performance_4 h3 { font-size: 21px; text-align: left; line-height: 24px; } #core_performance_5 h3 { font-size: 21px; text-align: left; line-height: 24px; } #angle_top_core_productivity { position: relative; margin-top: 60px; z-index: 13; height: 60px; width: 100vw; } #angle_top_core_productivity img { width: 100%; height: 60px; margin-top: -1px; z-index: 13; } /* THIS IS THE BLUE ANGLE BELOW STRESS LESS */ /* DO MORE */ #core_productivity_header { text-align: center; font-size: 42px; color:#f2f2f2; font-weight: 600; margin-bottom: -40px; padding-top: 0px; position: relative; } #fixed_bkg_core_productivity { position: relative; z-index: 12; width: 100vw; height: 480px; margin-top: -60px; background-color:#121212; background-image: url('images/new_photo_bkg3b.png'); background-size: cover; background-position: bottom right; background-attachment: fixed; text-align: center; } #core_productivity_interactive { text-align: center; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-bottom: 0px; position: relative; } #core_productivity_arrow_button { position: relative; clear: both; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; margin-top: -250px; } /* DO MORE SLIDER STYLES */ .slider { margin-left: auto; margin-right: auto; text-align: center; margin-top: -30px; } .slick-slide { -webkit-transform: translate3d(0,0,0); } .slick-slide, .slick-slide *{ outline: none !important; } .center { width: 100%; max-width: 750px; height: 400px; margin-top: 60px; text-align: center; } .slick-slide { margin: 0px 0px 0px 0px; text-align: center; width: 120px; transition: 0.5s; } .slick-prev:before, .slick-next:before { color: black; } .slick-slide { transition: all ease-in-out 0.3s; opacity: 1; } .slick-active { opacity: 1; } .slick-current { opacity: 1; } .slick-center img { width: 240px!important; opacity: 1!important; margin-left: -36px!important; margin-top: -30px!important; } .slick-center { width: 300px; transition: 0.5s; text-align: center; } .slick-slide img { width: 90px; margin-left: auto; margin-right: auto; opacity: 0.25; transition: 0.5s; margin-left: 40px; } .slider h3 { color:#616161; font-size: 8px; margin-top: -30px; transition: 0.5s;} .slick-center h3 { color:#f2f2f2; font-size: 12px; margin-top: -20px!important; } .core_productivity_title { font-size: 12px; color:#616161; margin-top: 30px; transition: 0.5s; } .slick-center .core_productivity_title { font-size: 21px; color:#f2f2f2; font-weight: 500; margin-top: 0px!important; } /* MODE AND GO */ #row_7 { width: 100vw; z-index: 13; height: 320px; background-color:#F7F7F7; background-image: url('images/mode_and_go_bkg_gold4.png'); background-size: cover; background-position: center center; } #mode_go_more { display: block; position: relative; width: 100vw; max-width: 1000px; margin-left: auto; margin-right: auto; text-align: center; } #mode_go_more_m { display: none; } #mode_and_go { margin-top: 20px; width: 45%; float: left; margin-right: 5%; } #mode_and_go_header img { width: 100%; max-width: 200px; margin-bottom: -90px; } #mode_and_go_image img { width: 90%; margin-top: -20px; max-width: 200px; } #mode_and_more { margin-top: 20px; width: 45%; margin-left: 5%; float: left; } #mode_and_more_header img { width: 100%; max-width: 200px; margin-bottom: -90px;} #mode_and_more_image img { width: 90%; margin-top: -20px; max-width: 200px; } #mode_and_go_header { text-align: center; font-size: 54px; color:#616161; font-weight: 600; margin-bottom: 60px; } #mode_and_more_header { text-align: center; font-size: 54px; color:#f2f2f2; font-weight: 600; margin-bottom: 60px; } #row_7 > img { display: none; } } @media only screen and (min-width: 569px) and (max-width: 767px) and (orientation: landscape) { #mobile_portrait_modal_china, #modal_china { display: none!important; } #mobile_landscape_modal_china { width: 80%; max-width: 500px; min-width: 450px; margin-left: auto; margin-right: auto; height: 100vh; display: block; position: fixed; top: -3vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } #intro_modal_china { width: 80%; max-width: 500px; min-width: 450px; margin-left: auto; margin-right: auto; height: 100vh; display: block; position: fixed; top: -3vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } .china_modal_close_link { display: block; width: 90px; height: 25px; position: absolute; right: -5; top: 40; background-color:#ad1e1e; text-align: center; padding-top: 0px; padding-bottom: 4px; color:#ffffff; font-size: 20px; font-weight: 800; font-family: 'Source Sans Pro', Trebuchet, sans-serif; z-index: 1000004; } .china_modal_content img { width: 450px; } #china_form_image_desktop { width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #china_form_image_mobile { display: none; width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #enterprises_button { width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% - 300px); margin-top: 0px; } #asps_button { width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% + 0px); margin-top: -50px; } #terabit_core_logo { float: right; width: 120px; margin-top: -30px; margin-right: 20px; } #all_awards { width: 60%; padding: 20px; min-width: 450px; text-align: right; background-color:rgba(0,0,0,0.5); text-align: right; } .new_accolade { width: 240px; margin: 30px 10px; display: block; } #menu { overflow: hidden; opacity: 1; position: fixed; top: 60; left: 0; width: 100%; height: 100vh; display: block; z-index:999997!important; background-color:#393939; background-image: url('images/menu_bkg_min.png'); background-size: cover; background-position: center center; } #mega_menu { display: none; } #mobile_menu { display: block; height: 85vh; margin-top: 0px; padding-left: 20px; padding-bottom: 50px!important; overflow: scroll; } .menu_start { top: 60!important; transition: 0.5s; } .menu_scroll { top: 50!important; padding-top: 10px; transition: 0.5s; } #cloud_1 img { width: 25vw; z-index: 2; } #cloud_2 img { width: 10vw; z-index: 2; } #cloud_3 img { width: 20vw; z-index: 2; } #cloud_4 img { width: 30vw; z-index: 2; } #cloud_5 img { width: 35vw; z-index: 2; } #cloud_6 img { width: 15vw; z-index: 2; } #cloud_7 img { width: 12vw; z-index: 2; } #cloud_8 img { width: 21vw; z-index: 2; } #cloud_9 img { width: 18vw; z-index: 2; } #hex_1 img { width: 5vw; z-index: 2; } #hex_2 img { width: 25vw; z-index: 2; } #hex_3 img { width: 10vw; z-index: 2; } #sigma_1 img { width: 15vw; z-index: 2; } #sigma_2 img { width: 10vw; z-index: 2; } #sigma_3 img { width: 25vw; z-index: 2; } #cloud_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; } #cloud_2 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #cloud_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 10s; -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -20vw; } #cloud_4 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -30vw; } #cloud_5 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 8s; -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 6s; overflow: hidden; margin-left: -35vw; } #cloud_6 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 11s; -webkit-animation-duration: 11s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 4s; overflow: hidden; margin-left: -15vw; } #cloud_7 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 16s; -webkit-animation-duration: 16s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -12vw; animation-delay: 5s; } #cloud_8 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -21vw; animation-delay: 3s; } #cloud_9 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -18vw; animation-delay: 5s; } #hex_1 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 8s; -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -5vw; margin-top: 9vh; } #hex_2 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 21s; -webkit-animation-duration: 21s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; } #hex_3 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #sigma_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -15vw; } #sigma_2 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 10s; -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; animation-delay: 1s; } #sigma_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; animation-delay: 3s; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes cloud_anim_1 { 0% {left:100%; top:-5h; opacity:0.2; } 50% {left:50%; top:-5vh; opacity: 0.70; } 100% {left:0%; top:-5vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_2 { 0% {left:100%; top:30vh; opacity:0.2; } 50% {left:50%; top:30vh; opacity: 0.70; } 100% {left:0%; top:30vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_3 { 0% {left:100%; top:50vh; opacity: 0.2; } 50% {left:50%; top:50vh; opacity: 0.70; } 100% {left:0%; top:50vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_4 { 0% {left:100%; top:70vh; opacity: 0.2; } 50% {left:50%; top:70vh; opacity: 0.70; } 100% {left:0%; top:70vh; opacity: 0.0; } } /* Standard syntax */ @keyframes cloud_anim_1 { 0% {left: 100%; top:-5vh; opacity: 0.2; } 50% {left: 50%; top:-5vh; opacity: 0.70; } 100% {left: 0%; top:-5vh; opacity: 0.0; } } @keyframes cloud_anim_2 { 0% {left:100%; top:30vh; opacity: 0.2; } 50% {left:50%; top:30vh; opacity: 0.70; } 100% {left:0%; top:30vh; opacity: 0.0; } } @keyframes cloud_anim_3 { 0% {left:100%; top:50vh; opacity: 0.2; } 50% {left:50%; top:50vh; opacity: 0.70; } 100% {left:0%; top:50vh; opacity: 0.0; } } @keyframes cloud_anim_4 { 0% {left:100%; top:70vh; opacity: 0.2; } 50% {left:50%; top:70vh; opacity: 0.70; } 100% {left:0%; top:70vh; opacity: 0.0; } } /* INTRO */ #header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 100px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s; } .header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 100px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s;} .header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 54px!important; background-color:rgba(0,0,0,1)!important; z-index: 999998!important; transition: 0.5s;} #mode_logo { width: 180px; margin-left: auto; margin-right: auto; margin-top: -7px; filter:invert(1); } #mode_amp_go_button { width: 90px; margin-top: -30px; padding-top: 10px; margin-left: -20px; opacity: 0; transition: 0.4s; } #mode_amp_go_button_b { width: 90px; margin-top: -40px; padding-top: 10px; margin-left: -90px; opacity: 1; } /* HEADER CHANGE-ON-SCROLL STYLES */ .mode_go_start { opacity: 0!important; } .mode_go_scroll { opacity: 1!important; width: 70!important; margin-top: -12px!important; } .mode_go_start_b { opacity: 1!important; margin-top: -40px!important; } .mode_go_scroll_b { opacity: 0!important; width: 70!important; margin-left: -70px!important; margin-top: -12px!important; } .logo_scroll { filter: invert(0)!important; width: 120px!important; transition: 0.5s; margin-top: 0px!important; } .logo_start { filter: invert(1); width: 180px!important; transition: 0.5s; } .nav_icon { cursor: pointer; z-index: 999999; } .bar1_start { background-color: #000000!important; } .bar2_start { background-color: #000000!important; } .bar1_scroll { background-color: #FFFFFF!important; margin-top: 18px!important; width: 4px!important; height: 18px!important; } .bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 20px; transition: 0.5s; z-index: 999999; } #plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ #inside_header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:#231f20; z-index: 999998!important; transition: 0.5s; } .inside_header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:#231f20; z-index: 999998!important; transition: 0.5s;} .inside_header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 50px!important; background-color:#000000!important; z-index: 999998!important; transition: 0.5s;} #inside_mode_logo { width: 180px; margin-left: auto; margin-right: auto; margin-top: -5px; } #inside_mode_amp_go_button { width: 90px; margin-top: -10px; padding-top: 10px; margin-left: -20px; transition: 0.4s; } /* HEADER CHANGE-ON-SCROLL STYLES */ .inside_mode_go_start { } .inside_mode_go_scroll { width: 70!important; margin-top: -12px!important; } .inside_logo_scroll { width: 120px!important; transition: 0.5s; margin-top: 0px!important; } .inside_logo_start { width: 180px!important; transition: 0.5s; } .inside_bar1_start { background-color: #FFFFFF!important; } .inside_bar2_start { background-color: #FFFFFF!important; } .inside_bar1_scroll { background-color: #FFFFFF!important; margin-top: 18px!important; width: 4px!important; height: 18px!important; } .inside_bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #inside_plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 20px; transition: 0.5s; z-index: 999999; } #inside_plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .inside_bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ /* NEW HOME INTRO/START */ #first_row { background-image: url('images/intro_fixed_cloud_bkg.png'); background-size: cover; background-attachment: fixed; background-color:#e7f1f4; width: 100%; margin: 0px; padding: 0px; height: 75vh; } #row_1 { position: relative; z-index: 12; width: 100vw; height: 75vh; background-color:#e7f1f4; background-image: url('images/intro_fixed_cloud_bkg2.png'); background-size: cover; background-attachment: fixed; text-align: center; } #cloud_to_the_core_top { width: 70%; margin-left: auto; margin-right: auto; margin-top: 20vh; } #cloud_to_the_core_top img { width: 100%; margin-top: 0vh; } #cloud_to_the_core_m { display: none; } #cloud_to_the_core_bottom { width: 70%; margin-left: auto; margin-right: auto; } #cloud_to_the_core_bottom img { width: 100%; margin-top: -3px; margin-bottom: 5vh; } #start_switch { position: relative; display: inline-block; width: 100%; text-align: center; margin: 0px; padding: 0px; z-index: 18!important; } #turn_on_slider { position: relative; display: inline-block; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } #turn_on_lozenge { margin: 0px 10px -20px 0px; display: inline-block; position: relative; bottom: -5px; text-align: left; width: 120px; height: 45px; padding: 0px; background-color:#000000; box-shadow: 0px 0px 18px rgba(0, 180, 220, 0); border-radius: 45px; z-index: 9999913;} #turn_on_circle { text-align: center; display: inline-block; position: relative; width: 36px; height: 36px; background-color:#00b4dc; border-radius: 18px; padding-top: -5px; margin-top: 4px; margin-left: 78px; animation: slide 3s, fade 3s; animation-timing-function: linear; } #turn_on_circle img { margin-left: -2px; margin-top: -2px; width: 40px; } /* Standard syntax */ @keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } /* Safari 4.0 - 8.0 */ @-webkit-keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @-webkit-keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } #performance_text { position: relative; display: inline; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 27px; line-height: 27px; font-weight: 600; text-transform: uppercase; color:#FFFFFF; } #for_SDWAN_text { width: 90%; margin-left: auto; margin-right: auto; max-width: 800px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 21px; line-height: 21px; margin-top: 0px; font-weight: 500; color:#FFFFFF; text-align: right; } #intro_bullets { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-top: 30px; } #intro_bullet_1 { display: none; } #intro_bullet_2 { display: none; } #intro_bullet_3 { display: none; } #intro_bullet_1_landscape { position: relative; width: 36%; float: left; margin: 0; z-index: 18; height: 80px; } #intro_bullet_2_landscape { position: relative; width: 33%; float: left; margin: 0; z-index: 18; height: 80px; } #intro_bullet_3_landscape { position: relative; width: 31%; float: left; margin: 0; z-index: 18; height: 80px; } #intro_bullet_1_m { display: none; } #intro_bullet_2_m { display: none; } #intro_bullet_3_m { display: none; } .intro_bullet { color:#FFFFFF; font-size: 21px; font-weight: 500; line-height: 27px; text-align: center; margin: 0px 10px; } .intro_plus { color:#00b4dc; margin: 0px 10px; font-size: 48; font-weight: 800; } /* END NEW HOME INTRO/START */ /* NEW HOME SWITCH AND VALUES */ #angle_top_turn_on { width: 100%; height: 60px; margin-top: -60px; } #angle_turn_top { width: 100%; height: 60px; margin-top: -61px; position: relative; z-index: 19; } #angle_turn_top > img { width: 100%; height: 60px; } #turn_content { position: relative; z-index: 19; width: 100%; height: 80vh; margin: -5px 0px 0px 0px; padding: 0px; background-image: linear-gradient(to right, #004a5c, #004a5c, #006d87, #008fb0, #0096b8); /*background-image: url('images/start_bottom_bkg.png');*/ background-size: 100% auto; } #angle_turn_bottom { position: relative; z-index: 19;width: 100%; height: 60px; } #angle_turn_bottom > img { width: 100%; height: 60px; } #features_and_quotes_row { margin-top: -60px; background-image: url('images/new_mobile_features_bkg.png'); background-size: cover; background-attachment: fixed; min-height: 50vh; width: 100%; } #angle_after_quotes { display: none; } #angle_after_quotes img { height: 60px; width: 100%; margin-top: -40px; } #angle_spacer { display: none; } /* END NEW HOME SWITCH AND VALUES */ /* FEATURES */ #row_2 { background-color:#393939; margin-top: -1px; height: 820px; background-image: url('images/new_mobile_features_bkg.png'); background-size: cover; background-position: center center; } #angle_top_quotes { display: none; } /* THIS IS THE BLACK ANGLE BELOW THE INTRO PANE - BEHIND THE FEATURES ON DESKTOP*/ #angle_top_quotes_m { position: relative; margin-top: -60px; width: 100%; z-index: 15; } /* THIS IS THE BLACK ANGLE BELOW THE INTRO PANE - BEHIND THE FEATURES */ #angle_top_quotes_m img { margin-top: 0; width: 100%; height: 60px; } #features_bottom_angle { margin-top: 0px!important; } #features_bottom_angle img { margin-top: 0px!important; width: 100%; height: 60px; } .feature_group { width: 90%; max-width: 1200px; text-align: center; margin-left: auto; margin-right: auto; position: relative; margin-top: -110px; z-index: 21; } .resource_cell, .news_cell, .next_cell { width: 300px; height: 270px; position: relative; text-align: center; margin-left: auto; margin-right: auto; display: none; } .resource_cell img, .news_cell img, .next_cell img { width: 300px!important; height: 250px!important; position: absolute; top: 0; left: -120; } .resource_title_block, .news_title_block, .next_title_block { position: absolute; left: 120; top: 90; width: 160px; background-color:#00b4dc; padding: 10px 20px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; color:#FFFFFF; font-weight: 600; } .resource_description, .news_description, .next_description { background-color:rgba(0,0,0,0.75); position: absolute; width: 300px!important; left: 0; top: 130; left: 120; height: 60px!important; } .resource_description p, .news_description p, .next_description p { text-align: left; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 16px; line-height: 21px; font-weight: 500; margin-top: 8; color:#FFFFFF; padding: 0px 20px; } .resource_link, .news_link, .next_link { position: absolute; top: 175; left: 120; width: 300px!important; margin-left: 0px; border-style: solid; border-color:#00b4dc; border-width: 1px 0px 0px 0px; } /* AWARDS */ #awards { display: block; float: none; clear: both; height: 360px; padding-top: 0px; margin-top: 10px; margin-bottom: 120px; padding-bottom: 150px; } .award_left { height: 190px; width: 80%; float: none; margin-right: 20%; background-color:rgba(0,0,0,0.6); text-align: right; } .award_left_img img { width:210px; margin: 20px; } .award_left_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 0px 20px; } .award_right { height: 190px; width: 80%; float: none; margin-left: 20%; background-color:rgba(0,0,0,0.6); margin-top: 24px; text-align: left; } .award_right_img img { width: 210px; margin: 20px; } .award_right_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 0px 20px; } .news_text { color:#FFFFFF; font-size: 21px; line-height: 30px; font-weight: 500; margin-top: 40px; padding-top: 20px; } /* QUOTES */ #angle_mid_features { height: 720px!important; width:100%!important; } #laser_1 { display: none; } #laser_2 { display: none!important; } #laser_3 { margin-top: 30px; margin-bottom: 0px; } #laser_4 { margin-top: -15px; margin-bottom: -30px; } #quote_laser_2 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2.5s; -webkit-animation-duration: 2.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 0px; } #quote_laser_3 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_right; -webkit-animation-name: laser_right; /* Safari 4.0 - 8.0 */ animation-duration: 1.75s; -webkit-animation-duration: 1.75s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; left:0; margin-top: 0px; } #quote_laser_4 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2s; -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 0px; } #quote_container { position: relative; width: 100%; margin: 0px auto 20px auto!important; text-align: center; z-index: 14; background-color:rgba(0,0,0,0.35); } #tata_quote { position: relative; width: 90%; max-width: 1200px; text-align: left; margin: 0px auto; clear: both; float: none; z-index: 14; } #tata_quote img { width: 120px; margin: 0px 20px -50px 20px; float: none; } #steve_garson_quote { position: relative; width: 90%; max-width: 1200px; max-height: 200px; text-align: right; margin: 0px auto 0px auto; clear: both; float: none; } #steve_garson_quote img { width: 150px; margin: 20px 0px -90px 0px; float: none; } #fourfiftyone_quote { position: relative; width: 90%; max-width: 1200px; text-align: left; margin: 50px auto 50px auto; clear: both; float: none; } #fourfiftyone_quote img { width: 120px; margin: 0px 20px -70px 0px; float: none; } #versa_quote { position: relative; width: 90%; max-width: 1200px; text-align: right; margin: 50px auto 0px auto; padding-bottom: 50px; clear: both; float: none; } #versa_quote img { width: 120px; margin: 20px 0px -60px 0px; float: none; } .home_quote_left { font-size: 21px; line-height: 24px; color:#f2f2f2; font-weight: 300; text-align: left;} .home_attribution_left { font-size: 12px; line-height: 15px; color:#B3B3B3; font-weight: 400; text-align: left; } .home_quote_right { font-size: 36px; line-height: 42px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_quote_right_medium { font-size: 21px; line-height: 24px; color:#f2f2f2; font-weight: 300; text-align: right; margin-right: 10px; } .home_quote_right_small { font-size: 24px; line-height: 30px; color:#f2f2f2; font-weight: 300; text-align: right; } .home_attribution_right { font-size: 12px; line-height: 15px; color:#B3B3B3; font-weight: 400; text-align: right; margin-right: 10px; } #quote_fade_to_clouds { display: none; } #quote_fade_to_clouds img { display: none; } #cloud_spacer { display: none; } #cloud_fade_to_core_control { display: none; } #cloud_fade_to_core_control img { display: none; } #angle_before_core_control img { height: 90px; margin-top: -60px; width: 100%; position: relative; z-index: 25; } /* CORE CONTROL */ #core_control_title { width: 100vw; position: relative; text-align: center; margin-top: 30px; text-align: center; } #core_control_title img { width: 400px; position: relative; text-align: center; margin-top: -10px; margin-left: auto; margin-right: auto; } #core_control_subtitle { text-align: center; font-size: 21px; font-weight: 600; line-height: 27px; color:#616161; margin-top: 0px; margin-left: 20px; margin-right: 20px; margin-bottom: 0px; position: relative; } #core_control_subtitle_m { display: none; } #core_control_header { text-align: center; font-size: 42px; color:#393939; font-weight: 600; margin-top: 0px; padding-top: 20px; margin-bottom: 20px; position: relative; } #core_control_base { position: relative: z-index: 13; } #core_control_base img { width: 550px; height: 306px; margin: 0px; padding: 0px; } #core_control_modeCore { text-align: center; margin-top: -306px; } #core_control_modeCore img { width: 550px; height: 306px; margin: 0px; padding: 0px; } #core_control_blueSDWAN { position: relative; margin-top: -306px; } #core_control_blueSDWAN img { width: 550px; height: 306px; margin: 0px; padding: 0px; } #core_control_multiCloud { margin-top: -306px; } #core_control_multiCloud img { width: 550px; height: 306px; margin: 0px; padding: 0px; } #core_control_collab { margin-top: -306px; } #core_control_collab img { width: 550px; height: 306px; margin: 0px; padding: 0px; } #core_control_mobile { display: none; } #core_control_desktop { display: none; } #sd_wan_logos { position: absolute; top: 100; height: 100%; width: 100%; left: 0; z-index: 12; background-image: url('images/no_worry_sdWAN_logos2.png'); background-size: 100% auto; background-position: top center; background-attachment: fixed; } #fixed_bkg_core_control { position: relative; z-index: 13; width: 100vw; margin-top: -48px; padding-top:30px; height: 550px; background-color:#FFFFFF; background-image: url('images/new_photo_bkg3.png'); background-attachment: fixed; text-align: center; } #fixed_bkg_core_control > img { margin-top: -0px; width: 100%; height: 60px; } /* THIS IS THE BLACK ANGLE BELOW THE QUOTES */ /* STRESS LESS */ #angle_top_core_performance { position: relative; margin-top: 0px; z-index: 13; width: 100vw; } #angle_top_core_performance img { width: 100%; height: 60px; margin-top: -59px; } /* THIS IS THE BLUE ANGLE ABOVE STRESS LESS */ #core_performance_header { text-align: center; font-size: 42px; color:#f2f2f2; font-weight: 600; margin-top: 0px; padding-top: 20px; margin-bottom: 20px; position: relative; } #core_performance_middle { position: relative; z-index:13; height: 300px; background-color:#036179; background-image: url('images/stress_less_bkg_new.png'); background-size: cover; width: 100vw; text-align: center; } .stress_less_icon { width: 90px; } #core_performance_1 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_2 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_3 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_4 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_5 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_1 h3 { font-size: 16px; line-height: 21px; } #core_performance_2 h3 { font-size: 16px; line-height: 21px; } #core_performance_3 h3 { font-size: 16px; line-height: 21px; } #core_performance_4 h3 { font-size: 16px; line-height: 21px; } #core_performance_5 h3 { font-size: 16px; line-height: 21px; } #angle_top_core_productivity { position: relative; margin-top: 0px; z-index: 13; width: 100vw; } #angle_top_core_productivity img { width: 100%; height: 60px; margin-top: 59px; } /* THIS IS THE BLUE ANGLE BELOW STRESS LESS */ /* DO MORE */ #core_productivity_header { text-align: center; font-size: 42px; color:#f2f2f2; font-weight: 600; margin-bottom: -30px; padding-top: 0px; position: relative; } #fixed_bkg_core_productivity { position: relative; z-index: 12; width: 100vw; height: 500px; margin-top: -60px; background-color:#121212; background-image: url('images/new_photo_bkg3b.png'); background-size: cover; background-position: bottom right; background-attachment: fixed; text-align: center; } #core_productivity_interactive { text-align: center; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-bottom: 0px; position: relative; } #core_productivity_arrow_button { position: relative; clear: both; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; margin-top: -210px; } /* DO MORE SLIDER STYLES */ .slider { margin-left: auto; margin-right: auto; text-align: center; margin-top: -30px; } .slick-slide { -webkit-transform: translate3d(0,0,0); } .slick-slide, .slick-slide *{ outline: none !important; } .center { width: 100%; max-width: 750px; height: 400px; margin-top: 60px; text-align: center; } .slick-slide { margin: 0px 0px 0px 0px; text-align: center; width: 120px; transition: 0.5s; } .slick-prev:before, .slick-next:before { color: black; } .slick-slide { transition: all ease-in-out 0.3s; opacity: 1; } .slick-active { opacity: 1; } .slick-current { opacity: 1; } .slick-center img { width: 300px!important; opacity: 1!important; margin-left: -48px!important; margin-top: -30px!important; } .slick-center { width: 300px; transition: 0.5s; text-align: center; } .slick-slide img { width: 90px; margin-left: auto; margin-right: auto; opacity: 0.25; transition: 0.5s; margin-left: 50px; } .slider h3 { color:#616161; font-size: 8px; margin-top: -30px; transition: 0.5s;} .slick-center h3 { color:#f2f2f2; font-size: 14px; margin-top: -20px!important; } .core_productivity_title { font-size: 14px; color:#616161; margin-top: 90px; transition: 0.5s; } .slick-center .core_productivity_title { font-size: 24px; color:#f2f2f2; font-weight: 500; margin-top: 0px!important; } /* MODE AND GO */ #row_7 { width: 100vw; z-index: 13; height: 400px; background-color:#F7F7F7; background-image: url('images/mode_and_go_bkg_gold4.png'); background-size: cover; background-position: center center; } #mode_go_more { display: block; position: relative; width: 100vw; max-width: 1000px; margin-left: auto; margin-right: auto; text-align: center; } #mode_go_more_m { display: none; } #mode_and_go { margin-top: 30px; width: 45%; float: left; margin-right: 5%; } #mode_and_go_header img { width: 100%; max-width: 240px; margin-bottom: -70px; } #mode_and_go_image img { width: 90%; max-width: 240px; } #mode_and_more { margin-top: 30px; width: 45%; margin-left: 5%; float: left; } #mode_and_more_header img { width: 100%; max-width: 240px; margin-bottom: -70px;} #mode_and_more_image img { width: 90%; max-width: 240px; } #mode_and_go_header { text-align: center; font-size: 54px; color:#616161; font-weight: 600; margin-bottom: 60px; } #mode_and_more_header { text-align: center; font-size: 54px; color:#f2f2f2; font-weight: 600; margin-bottom: 60px; } #row_7 > img { display: none; } } @media only screen and (min-width: 768px) and (max-width: 890px) and (orientation: landscape) { #mobile_portrait_modal_china, #mobile_landscape_modal_china { display: none!important; } #modal_china { width: 80%; max-width: 500px; min-width: 450px; margin-left: auto; margin-right: auto; height: 100vh; display: block; position: fixed; top: -5vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } #intro_modal_china { width: 80%; max-width: 500px; min-width: 450px; margin-left: auto; margin-right: auto; height: 100vh; display: block; position: fixed; top: -5vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } .china_modal_close_link { display: block; width: 90px; height: 25px; position: absolute; right: -5; top: 40; background-color:#ad1e1e; text-align: center; padding-top: 0px; padding-bottom: 4px; color:#ffffff; font-size: 20px; font-weight: 800; font-family: 'Source Sans Pro', Trebuchet, sans-serif; z-index: 1000004; } .china_modal_content img { width: 450px; } #china_form_image_desktop { width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #china_form_image_mobile { display: none; width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #enterprises_button { width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% - 300px); margin-top: 0px; } #asps_button { width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% + 0px); margin-top: -50px; } #terabit_core_logo { float: right; width: 150px; margin-top: -30px; margin-right: 20px; } #all_awards { width: 90%; padding: 20px; min-width: 700px; text-align: right; background-color:rgba(0,0,0,0.5); text-align: right; } .new_accolade { width: 210px; margin: 0px 10px; display: inline; } #menu { overflow: hidden; opacity: 1; position: fixed; top: 60; left: 0; width: 100%; height: 100vh; display: block; z-index:999997!important; background-color:#393939; background-image: url('images/menu_bkg_min.png'); background-size: cover; background-position: center center; } #mega_menu { display: none; } #mobile_menu { display: block; height: 85vh; margin-top: 0px; padding-left: 20px; padding-bottom: 50px!important; overflow: scroll; } .menu_start { top: 60!important; transition: 0.5s; } .menu_scroll { top: 50!important; padding-top: 10px; transition: 0.5s; } #cloud_1 img { width: 25vw; z-index: 2; } #cloud_2 img { width: 10vw; z-index: 2; } #cloud_3 img { width: 20vw; z-index: 2; } #cloud_4 img { width: 30vw; z-index: 2; } #cloud_5 img { width: 35vw; z-index: 2; } #cloud_6 img { width: 15vw; z-index: 2; } #cloud_7 img { width: 12vw; z-index: 2; } #cloud_8 img { width: 21vw; z-index: 2; } #cloud_9 img { width: 18vw; z-index: 2; } #hex_1 img { width: 5vw; z-index: 2; } #hex_2 img { width: 25vw; z-index: 2; } #hex_3 img { width: 10vw; z-index: 2; } #sigma_1 img { width: 15vw; z-index: 2; } #sigma_2 img { width: 10vw; z-index: 2; } #sigma_3 img { width: 25vw; z-index: 2; } #cloud_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; } #cloud_2 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #cloud_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 10s; -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -20vw; } #cloud_4 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -30vw; } #cloud_5 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 8s; -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 6s; overflow: hidden; margin-left: -35vw; } #cloud_6 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 11s; -webkit-animation-duration: 11s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 4s; overflow: hidden; margin-left: -15vw; } #cloud_7 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 16s; -webkit-animation-duration: 16s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -12vw; animation-delay: 5s; } #cloud_8 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -21vw; animation-delay: 3s; } #cloud_9 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -18vw; animation-delay: 5s; } #hex_1 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 8s; -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -5vw; margin-top: 9vh; } #hex_2 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 21s; -webkit-animation-duration: 21s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; } #hex_3 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #sigma_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -15vw; } #sigma_2 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 10s; -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; animation-delay: 1s; } #sigma_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; animation-delay: 3s; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes cloud_anim_1 { 0% {left:100%; top:-5h; opacity:0.2; } 50% {left:50%; top:-5vh; opacity: 0.70; } 100% {left:0%; top:-5vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_2 { 0% {left:100%; top:30vh; opacity:0.2; } 50% {left:50%; top:30vh; opacity: 0.70; } 100% {left:0%; top:30vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_3 { 0% {left:100%; top:50vh; opacity: 0.2; } 50% {left:50%; top:50vh; opacity: 0.70; } 100% {left:0%; top:50vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_4 { 0% {left:100%; top:70vh; opacity: 0.2; } 50% {left:50%; top:70vh; opacity: 0.70; } 100% {left:0%; top:70vh; opacity: 0.0; } } /* Standard syntax */ @keyframes cloud_anim_1 { 0% {left: 100%; top:-5vh; opacity: 0.2; } 50% {left: 50%; top:-5vh; opacity: 0.70; } 100% {left: 0%; top:-5vh; opacity: 0.0; } } @keyframes cloud_anim_2 { 0% {left:100%; top:30vh; opacity: 0.2; } 50% {left:50%; top:30vh; opacity: 0.70; } 100% {left:0%; top:30vh; opacity: 0.0; } } @keyframes cloud_anim_3 { 0% {left:100%; top:50vh; opacity: 0.2; } 50% {left:50%; top:50vh; opacity: 0.70; } 100% {left:0%; top:50vh; opacity: 0.0; } } @keyframes cloud_anim_4 { 0% {left:100%; top:70vh; opacity: 0.2; } 50% {left:50%; top:70vh; opacity: 0.70; } 100% {left:0%; top:70vh; opacity: 0.0; } } /* INTRO */ #header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 100px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s; } .header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 100px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s;} .header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 54px!important; background-color:rgba(0,0,0,1)!important; z-index: 999998!important; transition: 0.5s;} #mode_logo { width: 180px; margin-left: auto; margin-right: auto; margin-top: -7px; filter:invert(1); } #mode_amp_go_button { width: 90px; margin-top: -30px; padding-top: 10px; margin-left: -20px; opacity: 0; transition: 0.4s; } #mode_amp_go_button_b { width: 90px; margin-top: -10px; padding-top: 10px; margin-left: -90px; opacity: 1; } /* HEADER CHANGE-ON-SCROLL STYLES */ .mode_go_start { opacity: 0!important; } .mode_go_scroll { opacity: 1!important; width: 70!important; margin-top: -12px!important; } .mode_go_start_b { opacity: 1!important; margin-top: -10px!important; } .mode_go_scroll_b { opacity: 0!important; width: 70!important; margin-left: -70px!important; margin-top: -12px!important; } .logo_scroll { filter: invert(0)!important; width: 120px!important; transition: 0.5s; margin-top: 0px!important;} .logo_start { filter: invert(1); width: 180px!important; transition: 0.5s; } .nav_icon { cursor: pointer; z-index: 999999; } .bar1_start { background-color: #000000!important; } .bar2_start { background-color: #000000!important; } .bar1_scroll { background-color: #FFFFFF!important; margin-top: 18px!important; width: 4px!important; height: 18px!important; } .bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 24px; transition: 0.5s; z-index: 999999; } #plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ #inside_header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:#231f20; z-index: 999998!important; transition: 0.5s; } .inside_header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 60px; background-color:#231f20; z-index: 999998!important; transition: 0.5s;} .inside_header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 50px!important; background-color:#000000!important; z-index: 999998!important; transition: 0.5s;} #inside_mode_logo { width: 180px; margin-left: auto; margin-right: auto; margin-top: -5px; } #inside_mode_amp_go_button { width: 90px; margin-top: -10px; padding-top: 10px; margin-left: -20px; transition: 0.4s; } /* HEADER CHANGE-ON-SCROLL STYLES */ .inside_mode_go_start { } .inside_mode_go_scroll { width: 70!important; margin-top: -12px!important; } .inside_logo_scroll { width: 120px!important; transition: 0.5s; margin-top: 0px!important; } .inside_logo_start { width: 180px!important; transition: 0.5s; } .inside_bar1_start { background-color: #FFFFFF!important; } .inside_bar2_start { background-color: #FFFFFF!important; } .inside_bar1_scroll { background-color: #FFFFFF!important; margin-top: 18px!important; width: 4px!important; height: 18px!important; } .inside_bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #inside_plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 20px; transition: 0.5s; z-index: 999999; } #inside_plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .inside_bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ /* NEW HOME INTRO/START */ #first_row { background-image: url('images/intro_fixed_cloud_bkg.png'); background-size: cover; background-attachment: fixed; background-color:#e7f1f4; width: 100%; margin: 0px; padding: 0px; height: 75vh; } #row_1 { position: relative; z-index: 12; width: 100vw; height: 75vh; background-color:#e7f1f4; background-image: url('images/intro_fixed_cloud_bkg2.png'); background-size: cover; background-attachment: fixed; text-align: center; } #cloud_to_the_core_top { width: 60%; margin-left: auto; margin-right: auto; margin-top: 20vh; } #cloud_to_the_core_top img { width: 100%; margin-top: 0vh; } #cloud_to_the_core_m { display: none; } #cloud_to_the_core_bottom { width: 60%; margin-left: auto; margin-right: auto; } #cloud_to_the_core_bottom img { width: 100%; margin-top: -3px; margin-bottom: 5vh; } #start_switch { position: relative; display: inline-block; width: 100%; text-align: center; margin: 0px; padding: 0px; z-index: 18!important; } #turn_on_slider { position: relative; display: inline-block; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } #turn_on_lozenge { margin: 0px 10px -20px 0px; display: inline-block; position: relative; bottom: -5px; text-align: left; width: 120px; height: 45px; padding: 0px; background-color:#000000; box-shadow: 0px 0px 18px rgba(0, 180, 220, 0); border-radius: 45px; z-index: 9999913;} #turn_on_circle { text-align: center; display: inline-block; position: relative; width: 36px; height: 36px; background-color:#00b4dc; border-radius: 18px; padding-top: -5px; margin-top: 4px; margin-left: 78px; animation: slide 2s, fade 2s; animation-timing-function: linear; } #turn_on_circle img { margin-left: -2px; margin-top: -2px; width: 40px; } /* Standard syntax */ @keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } @keyframes fade_up { 0% {top: 90px; opacity: 0;} 75% {top: 90px; opacity: 0;} 100% {top: 0px; opacity: 1;} } /* Safari 4.0 - 8.0 */ @-webkit-keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @-webkit-keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } @-webkit-keyframes fade_up { 0% {margin-top: 90px; opacity: 0;} 90% {margin-top: 90px; opacity: 0;} 100% {margin-top: 0px; opacity: 1;} } #performance_text { position: relative; display: inline; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 27px; line-height: 27px; font-weight: 600; text-transform: uppercase; color:#FFFFFF; } #for_SDWAN_text { width: 90%; margin-left: auto; margin-right: auto; max-width: 800px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 21px; line-height: 21px; margin-top: 0px; font-weight: 500; color:#FFFFFF; text-align: right; } #intro_bullets { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-top: 30px; } #intro_bullet_1 { display: none; } #intro_bullet_2 { display: none; } #intro_bullet_3 { display: none; } #intro_bullet_1_landscape { position: relative; width: 34%; float: left; margin: 0; z-index: 18; height: 80px; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 3s; -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; } #intro_bullet_2_landscape { position: relative; width: 32%; float: left; margin: 0; z-index: 18; height: 80px; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 3.5s; -webkit-animation-duration: 3.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; } #intro_bullet_3_landscape { position: relative; width: 34%; float: left; margin: 0; z-index: 18; height: 80px; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 4s; -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear;} #intro_bullet_1_m { display: none; } #intro_bullet_2_m { display: none; } #intro_bullet_3_m { display: none; } .intro_bullet { color:#FFFFFF; font-size: 21px; font-weight: 500; line-height: 27px; text-align: center; margin: 0px 10px; } .intro_plus { color:#00b4dc; margin: 0px 10px; font-size: 48; font-weight: 800; } /* END NEW HOME INTRO/START */ /* NEW HOME SWITCH AND VALUES */ #angle_top_turn_on { width: 100%; height: 60px; margin-top: -60px; } #angle_turn_top { width: 100%; height: 60px; margin-top: -61px; position: relative; z-index: 19; } #angle_turn_top > img { width: 100%; height: 60px; } #turn_content { position: relative; z-index: 19; width: 100%; height: 80vh; margin: -5px 0px 0px 0px; padding: 0px; background-image: linear-gradient(to right, #004a5c, #004a5c, #006d87, #008fb0, #0096b8); /*background-image: url('images/start_bottom_bkg.png');*/ background-size: 100% auto; } #angle_turn_bottom { position: relative; z-index: 19;width: 100%; height: 60px; } #angle_turn_bottom > img { width: 100%; height: 60px; } #features_and_quotes_row { margin-top: -60px; background-image: url('images/new_mobile_features_bkg.png'); background-size: cover; background-attachment: fixed; min-height: 50vh; width: 100%; } /* END NEW HOME SWITCH AND VALUES */ #quote_fade_to_clouds { width: 100%; height: 0px!important; } #quote_fade_to_clouds img { width: 100%; } #cloud_spacer { display: none; } #cloud_fade_to_core_control { display: none; } #angle_before_core_control img { height: 180px; margin-top: -90px; width: 100%; position: relative; z-index: 25; } #cloud_fade_to_core_control img { width: 100%; height: 180px; margin-bottom: -90px; margin-top:-90px; } /* CORE CONTROL*/ #sd_wan_logos { position: absolute; top: 100; height: 100%; width: 100%; left: 0; z-index: 12; background-image: url('images/no_worry_sdWAN_logos2.png'); background-size: 100% auto; background-position: top center; background-attachment: fixed;} #fixed_bkg_core_control { position: relative; z-index: 13; width: 100vw; margin-top: -70px; padding-top: 90px; height: 850px; background-color:#FFFFFF; background-image: url('images/new_photo_bkg3.png'); background-attachment: fixed; text-align: center; } #fixed_bkg_core_control > img { margin-top: -0px; width: 100%; height: 75px; } /* THIS IS THE BLACK ANGLE BELOW THE QUOTES */ #core_control_header { text-align: center; font-size: 42px; color:#393939; font-weight: 600; margin-bottom: 20px; position: relative; } #core_control_title { width: 100vw; position: relative; text-align: center; margin-top: 30px; text-align: center; } #core_control_title img { width: 600px; position: relative; text-align: center; margin-top: -10px; margin-left: auto; margin-right: auto; } #core_control_subtitle { text-align: center; font-size: 24px; font-weight: 600; line-height: 32px; color:#616161; margin-top: 0px; margin-left: 20px; margin-right: 20px; margin-bottom: -10px; position: relative; } #core_control_subtitle_m { display: none; } #core_control_base { position: relative: z-index: 13; } #core_control_base img { width: 740px; height: 411px; margin: 0px; padding: 0px; } #core_control_modeCore { text-align: center; margin-top: -411px; } #core_control_modeCore img { width: 740px; height: 411px; margin: 0px; padding: 0px; } #core_control_blueSDWAN { position: relative; margin-top: -411px; } #core_control_blueSDWAN img { width: 740px; height: 411px; margin: 0px; padding: 0px; } #core_control_multiCloud { margin-top: -411px; } #core_control_multiCloud img { width: 740px; height: 411px; margin: 0px; padding: 0px; } #core_control_collab { margin-top: -411px; } #core_control_collab img { width: 740px; height: 411px; margin: 0px; padding: 0px; } #core_control_mobile { display: none; } #core_control_desktop { display: none; } /* AWARDS */ #awards { display: block; float: none; clear: both; height: 180px; padding-top: 0px; margin-top: 10px; margin-bottom: 60px; padding-bottom: 60px; } .award_left { height: 210px; width: 70%; float: none; margin-right: 30%; background-color:rgba(0,0,0,0.6); text-align: right; } .award_left_img img { width:240px; margin: 20px; } .award_left_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 0px 20px; } .award_right { height: 210px; width: 70%; float: none; margin-left: 30%; background-color:rgba(0,0,0,0.6); margin-top: 24px; text-align: left; } .award_right_img img { width: 240px; margin: 20px; } .award_right_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 0px 20px; } .news_text { color:#FFFFFF; font-size: 21px; line-height: 30px; font-weight: 500; margin-top: 40px; padding-top: 20px; } /* QUOTES */ #laser_1 { display: none; } #laser_2 { display: none!important; } #laser_3 { margin-top: 30px; margin-bottom: 0px; } #laser_4 { margin-top: 30px; margin-bottom: -30px; } #quote_laser_2 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 1.5s; -webkit-animation-duration: 1.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 0px; } #quote_laser_3 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_right; -webkit-animation-name: laser_right; /* Safari 4.0 - 8.0 */ animation-duration: 1.75s; -webkit-animation-duration: 1.75s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; left:0; margin-top: 0px; } #quote_laser_4 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2s; -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 0px; } #quote_container { position: relative; width: 100%; margin: 0px auto 20px auto; text-align: center; z-index: 14; background-color:rgba(0,0,0,0.35); } #tata_quote { position: relative; width: 90%; max-width: 1200px; text-align: left; margin: 0px auto; clear: both; float: none; z-index: 14; } #tata_quote img { width: 120px; margin: 0px 20px -50px 20px; float: none; } #steve_garson_quote { position: relative; width: 90%; max-width: 1200px; max-height: 200px; text-align: right; margin: 0px auto 0px auto; clear: both; float: none; } #steve_garson_quote img { width: 150px; margin: 20px 0px -90px 0px; float: none; } #fourfiftyone_quote { position: relative; width: 90%; max-width: 1200px; text-align: left; margin: 50px auto 50px auto; clear: both; float: none; } #fourfiftyone_quote img { width: 120px; margin: 0px 20px -70px 0px; float: none; } #versa_quote { position: relative; width: 90%; max-width: 1200px; text-align: right; margin: 50px auto -20px auto; padding-bottom: 90px; clear: both; float: none; } #versa_quote img { width: 120px; margin: 40px 0px -60px 0px; float: none; } .home_quote_left { font-size: 21px!important; line-height: 24px!important; color:#f2f2f2; font-weight: 300; text-align: left;} .home_attribution_left { font-size: 12px!important; line-height: 15px!important; color:#B3B3B3; font-weight: 400; text-align: left; } .home_quote_right { font-size: 36px!important; line-height: 42px!important; color:#f2f2f2; font-weight: 300; text-align: right;} .home_quote_right_medium { font-size: 21px!important; line-height: 24px!important; color:#f2f2f2; font-weight: 300; text-align: right; margin-right: 10px; } .home_quote_right_small { font-size: 24px!important; line-height: 30px!important; color:#f2f2f2; font-weight: 300; text-align: right; } .home_attribution_right { font-size: 12px!important; line-height: 15px!important; color:#B3B3B3; font-weight: 400; text-align: right; margin-right: 10px; } /* STRESS LESS */ #core_performance_header { text-align: center; font-size: 42px; color:#f2f2f2; font-weight: 600; margin-top: -300px; margin-bottom: 20px; position: relative; } #angle_top_core_performance { position: relative; margin-top: 60px; z-index: 13; height: 90px; width: 100vw; } #angle_top_core_performance img { width: 100%; height: 90px; margin-top: -299px; } /* THIS IS THE BLUE ANGLE ABOVE STRESS LESS */ #core_performance_middle { position: relative; z-index:13; background-color:#036179; background-image: url('images/stress_less_bkg_new.png'); background-size: cover; width: 100vw; text-align: center; } .stress_less_icon { width: 120px; } #core_performance_1 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_2 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_3 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_4 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_5 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_1 h3 { font-size: 18px; line-height: 21px; } #core_performance_2 h3 { font-size: 18px; line-height: 21px; } #core_performance_3 h3 { font-size: 18px; line-height: 21px; } #core_performance_4 h3 { font-size: 18px; line-height: 21px; } #core_performance_5 h3 { font-size: 18px; line-height: 21px; } #angle_top_core_productivity { position: relative; margin-top: 60px; z-index: 13; height: 90px; width: 100vw; } #angle_top_core_productivity img { width: 100%; height: 90px; margin-top: -1px; } /* THIS IS THE BLUE ANGLE BELOW STRESS LESS */ /* DO MORE */ #core_productivity_header { text-align: center; font-size: 42px; color:#f2f2f2; font-weight: 600; margin-bottom: -20px; padding-top: 0px; position: relative; } #fixed_bkg_core_productivity { position: relative; z-index: 12; width: 100vw; height: 550px; margin-top: -60px; background-color:#121212; background-image: url('images/new_photo_bkg3b.png'); background-size: cover; background-position: bottom right; background-attachment: fixed; text-align: center; } #core_productivity_interactive { text-align: center; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-bottom: 0px; position: relative; } #core_productivity_arrow_button { position: relative; clear: both; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; margin-top: -190px; } /* DO MORE SLIDER STYLES */ .slider { margin-left: auto; margin-right: auto; text-align: center; margin-top: -30px; } .slick-slide { -webkit-transform: translate3d(0,0,0); } .slick-slide, .slick-slide *{ outline: none !important; } .center { width: 100%; max-width: 750px; height: 400px; margin-top: 60px; text-align: center; } .slick-slide { margin: 0px 0px 0px 0px; text-align: center; width: 150px; transition: 0.5s; } .slick-prev:before, .slick-next:before { color: black; } .slick-slide { transition: all ease-in-out 0.3s; opacity: 1; } .slick-active { opacity: 1; } .slick-current { opacity: 1; } .slick-center img { width: 300px!important; opacity: 1!important; margin-left: -36px!important; margin-top: -30px!important; } .slick-center { width: 300px; transition: 0.5s; text-align: center; } .slick-slide img { width: 120px; margin-left: auto; margin-right: auto; opacity: 0.25; transition: 0.5s; margin-left: 50px; } .slider h3 { color:#616161; font-size: 10px; margin-top: -20px; transition: 0.5s;} .slick-center h3 { color:#f2f2f2; font-size: 18px; margin-top: -10px!important; } .core_productivity_title { font-size: 18px; color:#616161; margin-top: 90px; transition: 0.5s; } .slick-center .core_productivity_title { font-size: 30px; color:#f2f2f2; font-weight: 500; margin-top: 0px!important; } /* FEATURES */ #row_2 { background-color:#393939; margin-top: -1px; height: 800px; background-image: url('images/new_mobile_features_bkg.png'); background-size: cover; background-position: center center; } #angle_top_quotes { display: none; } /* THIS IS THE BLACK ANGLE BELOW THE INTRO PANE - BEHIND THE FEATURES ON DESKTOP*/ #angle_top_quotes_m { position: relative; margin-top: -90px; width: 100%; z-index: 15; } /* THIS IS THE BLACK ANGLE BELOW THE INTRO PANE - BEHIND THE FEATURES */ #angle_top_quotes_m img { margin-top: 0; width: 100%; height: 90px; } #features_bottom_angle { margin-top: 0px!important; } #features_bottom_angle img { margin-top: 0px!important; width: 100%; height: 90px; } .feature_group { width: 90%; max-width: 1200px; text-align: center; margin-left: auto; margin-right: auto; position: relative; margin-top: -130px; z-index: 21; } .resource_cell, .news_cell, .next_cell { width: 300px; height: 270px; position: relative; text-align: center; margin-left: auto; margin-right: auto; display: none; } .resource_cell img, .news_cell img, .next_cell img { width: 300px!important; height: 250px!important; position: absolute; top: 0; left: -140; } .resource_title_block, .news_title_block, .next_title_block { position: absolute; left: 140; top: 90; width: 160px; background-color:#00b4dc; padding: 10px 20px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; color:#FFFFFF; font-weight: 600; } .resource_description, .news_description, .next_description { background-color:rgba(0,0,0,0.75); position: absolute; width: 300px!important; left: 0; top: 130; left: 140; height: 60px!important; } .resource_description p, .news_description p, .next_description p { text-align: left; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 16px; line-height: 21px; font-weight: 500; margin-top: 8; color:#FFFFFF; padding: 0px 20px; } .resource_link, .news_link, .next_link { position: absolute; top: 175; left: 140; width: 300px!important; margin-left: 0px; border-style: solid; border-color:#00b4dc; border-width: 1px 0px 0px 0px; } /* MODE AND GO */ #row_7 { width: 100vw; z-index: 13; height: 440px; background-color:#F7F7F7; background-image: url('images/mode_and_go_bkg_gold4.png'); background-size: cover; background-position: center center; } #mode_go_more { display: block; position: relative; width: 100vw; max-width: 1000px; margin-left: auto; margin-right: auto; text-align: center; } #mode_go_more_m { display: none; } #mode_and_go { margin-top: 20px; width: 45%; float: left; margin-right: 5%; } #mode_and_go_header img { width: 100%; max-width: 300px; margin-bottom: -60px; } #mode_and_go_image img { width: 90%; max-width: 300px; } #mode_and_more { margin-top: 20px; width: 45%; margin-left: 5%; float: left; } #mode_and_more_header img { width: 100%; max-width: 300px; margin-bottom: -60px;} #mode_and_more_image img { width: 90%; max-width: 300px; } #mode_and_go_header { text-align: center; font-size: 54px; color:#616161; font-weight: 600; margin-bottom: 60px; } #mode_and_more_header { text-align: center; font-size: 54px; color:#f2f2f2; font-weight: 600; margin-bottom: 60px; } #row_7 > img { display: none; } } @media only screen and (min-width: 768px) and (max-width: 890px) and (orientation: portrait) { #mobile_landscape_modal_china, #modal_china { display: none!important; } #mobile_portrait_modal_china { width: 80%; max-width: 700px; min-width: 600px; margin-left: auto; margin-right: auto; height: 90vh; display: block; position: fixed; top: 20vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } #intro_modal_china { width: 80%; max-width: 700px; min-width: 600px; margin-left: auto; margin-right: auto; height: 90vh; display: block; position: fixed; top: 10vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } .china_modal_close_link { display: block; width: 90px; height: 25px; position: absolute; right: -5; top: 40; background-color:#ad1e1e; text-align: center; padding-top: 0px; padding-bottom: 4px; color:#ffffff; font-size: 20px; font-weight: 800; font-family: 'Source Sans Pro', Trebuchet, sans-serif; z-index: 1000004; } .china_modal_content img { width: 600px; } #china_form_image_desktop { width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #china_form_image_mobile { display: none; width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #enterprises_button { width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% - 310px); margin-top: -60px; } #asps_button { width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% + 10px); margin-top: -50px; } #terabit_core_logo { float: right; width: 150px; margin-top: -30px; margin-right: 20px; } #all_awards { width: 70%; padding: 20px; min-width: 400px; text-align: right; background-color:rgba(0,0,0,0.5); text-align: right; } .new_accolade { width: 300px; margin: 30px 10px; display: block; } #menu { overflow: hidden; opacity: 1; position: fixed; top: 80; left: 0; width: 100%; height: 100vh; display: block; z-index:999997!important; background-color:#393939; background-image: url('images/menu_bkg_min.png'); background-size: cover; background-position: center center; } #mega_menu { display: none; } #mobile_menu { display: block; height: 85vh; margin-top: 0px; padding-left: 20px; padding-bottom: 50px!important; overflow: scroll; } .menu_start { top: 80!important; transition: 0.5s; } .menu_scroll { top: 50!important; padding-top: 10px; transition: 0.5s; } #cloud_1 img { width: 25vw; z-index: 2; } #cloud_2 img { width: 10vw; z-index: 2; } #cloud_3 img { width: 20vw; z-index: 2; } #cloud_4 img { width: 30vw; z-index: 2; } #cloud_5 img { width: 35vw; z-index: 2; } #cloud_6 img { width: 15vw; z-index: 2; } #cloud_7 img { width: 12vw; z-index: 2; } #cloud_8 img { width: 21vw; z-index: 2; } #cloud_9 img { width: 18vw; z-index: 2; } #hex_1 img { width: 5vw; z-index: 2; } #hex_2 img { width: 25vw; z-index: 2; } #hex_3 img { width: 10vw; z-index: 2; } #sigma_1 img { width: 15vw; z-index: 2; } #sigma_2 img { width: 10vw; z-index: 2; } #sigma_3 img { width: 25vw; z-index: 2; } #cloud_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; } #cloud_2 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #cloud_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 10s; -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -20vw; } #cloud_4 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -30vw; } #cloud_5 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 8s; -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 6s; overflow: hidden; margin-left: -35vw; } #cloud_6 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 11s; -webkit-animation-duration: 11s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 4s; overflow: hidden; margin-left: -15vw; } #cloud_7 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 16s; -webkit-animation-duration: 16s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -12vw; animation-delay: 5s; } #cloud_8 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -21vw; animation-delay: 3s; } #cloud_9 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -18vw; animation-delay: 5s; } #hex_1 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 8s; -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -5vw; margin-top: 9vh; } #hex_2 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 21s; -webkit-animation-duration: 21s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; } #hex_3 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #sigma_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -15vw; } #sigma_2 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 10s; -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; animation-delay: 1s; } #sigma_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; animation-delay: 3s; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes cloud_anim_1 { 0% {left:100%; top:-5h; opacity:0.2; } 50% {left:50%; top:-5vh; opacity: 0.60; } 100% {left:0%; top:-5vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_2 { 0% {left:100%; top:15vh; opacity:0.2; } 50% {left:50%; top:15vh; opacity: 0.60; } 100% {left:0%; top:15vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_3 { 0% {left:100%; top:30vh; opacity: 0.2; } 50% {left:50%; top:30vh; opacity: 0.60; } 100% {left:0%; top:30vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_4 { 0% {left:100%; top:50vh; opacity: 0.2; } 50% {left:50%; top:50vh; opacity: 0.60; } 100% {left:0%; top:50vh; opacity: 0.0; } } /* Standard syntax */ @keyframes cloud_anim_1 { 0% {left: 100%; top:-5vh; opacity: 0.2; } 50% {left: 50%; top:-5vh; opacity: 0.60; } 100% {left: 0%; top:-5vh; opacity: 0.0; } } @keyframes cloud_anim_2 { 0% {left:100%; top:15vh; opacity: 0.2; } 50% {left:50%; top:15vh; opacity: 0.60; } 100% {left:0%; top:15vh; opacity: 0.0; } } @keyframes cloud_anim_3 { 0% {left:100%; top:30vh; opacity: 0.2; } 50% {left:50%; top:30vh; opacity: 0.60; } 100% {left:0%; top:30vh; opacity: 0.0; } } @keyframes cloud_anim_4 { 0% {left:100%; top:50vh; opacity: 0.2; } 50% {left:50%; top:50vh; opacity: 0.60; } 100% {left:0%; top:50vh; opacity: 0.0; } } /* INTRO */ #header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 100px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s; } .header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 100px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s;} .header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 54px!important; background-color:rgba(0,0,0,1)!important; z-index: 999998!important; transition: 0.5s;} #mode_logo { width: 240px; margin-left: auto; margin-right: auto; margin-top: 3px; filter:invert(1); } #mode_amp_go_button { width: 90px; margin-top: 20px; padding-top: 10px; opacity: 0; transition: 0.4s; margin-top: 10px; } #mode_amp_go_button_b { width: 90px; margin-top: 20px; padding-top: 10px; margin-left: -90px; opacity: 1; margin-top: -60px; } /* HEADER CHANGE-ON-SCROLL STYLES */ .mode_go_start { opacity: 0!important; } .mode_go_scroll { opacity: 1!important; width: 70!important; margin-top: -8px!important; } .mode_go_start_b { opacity: 1!important; margin-top: -60px!important; } .mode_go_scroll_b { opacity: 0!important; width: 70!important; margin-left: -70px!important; margin-top: -30px!important; } .logo_scroll { filter: invert(0)!important; width: 120px!important; transition: 0.5s; } .logo_start { filter: invert(1); width: 240px!important; transition: 0.5s; } .nav_icon { cursor: pointer; z-index: 999999; } .bar1_start { background-color: #000000!important; } .bar2_start { background-color: #000000!important; } .bar1_scroll { background-color: #FFFFFF!important; margin-top: 18px!important; width: 4px!important; height: 18px!important; } .bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 40px; transition: 0.5s; z-index: 999999; } #plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ #inside_header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 80px; background-color:#231f20; z-index: 999998!important; transition: 0.5s; } .inside_header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 80px; background-color:#231f20; z-index: 999998!important; transition: 0.5s;} .inside_header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 54px!important; background-color:#000000!important; z-index: 999998!important; transition: 0.5s;} #inside_mode_logo { width: 210px; margin-left: auto; margin-right: auto; margin-top: -10px; } #inside_mode_amp_go_button { width: 90px; margin-top: -10px; padding-top: 10px; transition: 0.4s; } /* HEADER CHANGE-ON-SCROLL STYLES */ .inside_mode_go_start { } .inside_mode_go_scroll { width: 70!important; margin-top: -10px!important; } .inside_logo_scroll { width: 120px!important; transition: 0.5s; margin-top: 2px!important; } .inside_logo_start { width: 210px!important; transition: 0.5s; } .inside_bar1_start { background-color: #FFFFFF!important; } .inside_bar2_start { background-color: #FFFFFF!important; } .inside_bar1_scroll { background-color: #FFFFFF!important; margin-top: 18px!important; width: 4px!important; height: 18px!important; } .inside_bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #inside_plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 20px; transition: 0.5s; z-index: 999999; } #inside_plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .inside_bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ /* NEW HOME INTRO/START */ #first_row { background-image: url('images/intro_fixed_cloud_bkg.png'); background-size: cover; background-attachment: fixed; background-color:#e7f1f4; width: 100%; margin: 0px; padding: 0px; height: 60vh; } #row_1 { position: relative; z-index: 12; width: 100vw; height: 60vh; background-color:#e7f1f4; background-image: url('images/intro_fixed_cloud_bkg2.png'); background-size: cover; background-attachment: fixed; text-align: center; } #cloud_to_the_core_m { display: none; } #cloud_to_the_core_top { width: 90%; margin-left: auto; margin-right: auto; margin-top: 20vh; } #cloud_to_the_core_top img { width: 100%; margin-top: 0vh; } #cloud_to_the_core_bottom { width: 90%; margin-left: auto; margin-right: auto; } #cloud_to_the_core_bottom img { width: 100%; margin-top: -6px; margin-bottom: 10vh; } #start_switch { position: relative; display: inline-block; width: 100%; text-align: center; margin: 0px; padding: 0px; z-index: 18!important; } #turn_on_slider { position: relative; display: inline-block; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } #turn_on_lozenge { margin: 0px 10px -10px 0px; display: inline-block; position: relative; bottom: -5px; text-align: left; width: 120px; height: 45px; padding: 0px; background-color:#000000; box-shadow: 0px 0px 18px rgba(0, 180, 220, 0); border-radius: 45px; z-index: 9999913;} #turn_on_circle { text-align: center; display: inline-block; position: relative; width: 36px; height: 36px; background-color:#00b4dc; border-radius: 18px; padding-top: -5px; margin-top: 4px; margin-left: 78px; animation: slide 2s, fade 2s; animation-timing-function: linear; } #turn_on_circle img { margin-left: -2px; margin-top: -2px; width: 40px; } /* Standard syntax */ @keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } @keyframes fade_up { 0% {top: 90px; opacity: 0;} 75% {top: 90px; opacity: 0;} 100% {top: 0px; opacity: 1;} } /* Safari 4.0 - 8.0 */ @-webkit-keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @-webkit-keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } @-webkit-keyframes fade_up { 0% {margin-top: 90px; opacity: 0;} 90% {margin-top: 90px; opacity: 0;} 100% {margin-top: 0px; opacity: 1;} } #performance_text { position: relative; display: block; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 42px; line-height: 60px; font-weight: 600; margin-top: 30px; text-transform: uppercase; color:#FFFFFF; } #for_SDWAN_text { width: 80%; margin-left: auto; margin-right: auto; max-width: 800px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 30px; line-height: 36px; margin-top: -10px; font-weight: 500; color:#FFFFFF; text-align: right; } #intro_bullets { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-top: 40px; } #intro_bullet_1 { position: relative; width: 34%; float: left; margin: 0; z-index: 18; height: 80px; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 3s; -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear;} #intro_bullet_2 { position: relative; width: 32%; float: left; margin: 0; z-index: 18; height: 80px; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 3.5s; -webkit-animation-duration: 3.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear;} #intro_bullet_3 { position: relative; width: 34%; float: left; margin: 0; z-index: 18; height: 80px; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 4s; -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear;} #intro_bullet_1_m { display: none; } #intro_bullet_2_m { display: none; } #intro_bullet_3_m { display: none; } #intro_bullet_1_landscape { display: none; } #intro_bullet_2_landscape { display: none; } #intro_bullet_3_landscape { display: none; } .intro_bullet { color:#FFFFFF; font-size: 24px; font-weight: 600; line-height: 30px; text-align: center; margin: 0px 20px; } .intro_plus { color:#00b4dc; margin: 0px 10px; font-size: 56; font-weight: 800; } /* END NEW HOME INTRO/START */ /* NEW HOME SWITCH AND VALUES */ #angle_top_turn_on { width: 100%; height: 90px; margin-top: -90px; } #angle_turn_top { width: 100%; height: 90px; margin-top: -91px; position: relative; z-index: 19; } #angle_turn_top > img { width: 100%; height: 90px; } #turn_content { position: relative; z-index: 19;width: 100%; height: 45vh; margin: -2px 0px 0px 0px; padding: 0px; background-image: linear-gradient(to right, #004a5c, #004a5c, #006d87, #008fb0, #0096b8); /*background-image: url('images/start_bottom_bkg.png');*/ background-size: 100% auto; } #angle_turn_bottom { position: relative; z-index: 19; width: 100%; height: 90px; margin-top: -1px; } #angle_turn_bottom > img { width: 100%; height: 90px; } #features_and_quotes_row { margin-top: -180px; background-image: url('images/new_mobile_features_bkg_vert.png'); background-size: cover; background-attachment: fixed; min-height: 50vh; width: 100%; } /* END NEW HOME SWITCH AND VALUES */ #quote_fade_to_clouds { width: 100%; height: 0px!important; } #quote_fade_to_clouds img { width: 100%; } #cloud_spacer { display: none; } #cloud_fade_to_core_control { display: none; } #cloud_fade_to_core_control img { width: 100%; height: 180px; margin-bottom: -90px; margin-top:-90px; } #angle_before_core_control img { height: 150px; margin-top: -90px; width: 100%; position: relative; z-index: 25; } /* CORE CONTROL */ #sd_wan_logos { position: absolute; top: 100; height: 100%; width: 100%; left: 0; z-index: 12; background-image: url('images/no_worry_sdWAN_logos2.png'); background-size: 100% auto; background-position: top center; background-attachment: fixed; } #fixed_bkg_core_control { position: relative; z-index: 13; width: 100vw; margin-top: -60px; padding-top: 90px; height: 820px; background-color:#FFFFFF; background-image: url('images/new_photo_bkg3.png'); background-attachment: fixed; text-align: center; } #fixed_bkg_core_control > img { margin-top: -30px; width: 100%; height: 100px; } /* THIS IS THE BLACK ANGLE BELOW THE QUOTES */ #core_control_header { text-align: center; font-size: 54px; color:#393939; font-weight: 600; margin-bottom: 40px; position: relative; } #core_control_title { width: 100vw; position: relative; text-align: center; margin-top: 30px; text-align: center; } #core_control_title img { width: 600px; position: relative; text-align: center; margin-top: -10px; margin-left: auto; margin-right: auto; } #core_control_subtitle { text-align: center; font-size: 24px; font-weight: 600; line-height: 32px; color:#616161; margin-top: 0px; margin-left: 20px; margin-right: 20px; margin-bottom: -10px; position: relative; } #core_control_subtitle_m { display: none; } #core_control_base { position: relative: z-index: 13; } #core_control_base img { width: 740px; height: 411px; margin: 0px; padding: 0px; } #core_control_modeCore { text-align: center; margin-top: -411px; } #core_control_modeCore img { width: 740px; height: 411px; margin: 0px; padding: 0px; } #core_control_blueSDWAN { position: relative; margin-top: -411px; } #core_control_blueSDWAN img { width: 740px; height: 411px; margin: 0px; padding: 0px; } #core_control_multiCloud { margin-top: -411px; } #core_control_multiCloud img { width: 740px; height: 411px; margin: 0px; padding: 0px; } #core_control_collab { margin-top: -411px; } #core_control_collab img { width: 740px; height: 411px; margin: 0px; padding: 0px; } #core_control_mobile { display: none; } #core_control_mobile_landscape { display: none; } /* FEATURES */ #row_2 { background-color:#393939; margin-top: -1px; height: 800px; background-image: url('images/new_mobile_features_bkg.png'); background-size: cover; background-position: center center; } #angle_top_quotes { display: none; } /* THIS IS THE BLACK ANGLE BELOW THE INTRO PANE - BEHIND THE FEATURES ON DESKTOP*/ #angle_top_quotes_m { position: relative; margin-top: -89px; width: 100%; z-index: 15; } #angle_top_quotes_m img { margin-top: 0px; width: 100%; height: 90px; } #angle_mid_features { height: 720px!important; width:100%!important; } #features_bottom_angle { margin-top: 0px!important; } #features_bottom_angle img { margin-top: -1px!important; width: 100%; height: 90px; } .feature_group { width: 90%; max-width: 1200px; text-align: center; margin-left: auto; margin-right: auto; position: relative; margin-top: -120px; z-index: 21; } .resource_cell, .news_cell, .next_cell { width: 300px; height: 270px; position: relative; text-align: center; margin-left: auto; margin-right: auto; display: none; } .resource_cell img, .news_cell img, .next_cell img { width: 300px!important; height: 250px!important; position: absolute; top: 0; left: -140; } .resource_title_block, .news_title_block, .next_title_block { position: absolute; left: 140; top: 90; width: 160px; background-color:#00b4dc; padding: 10px 20px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; color:#FFFFFF; font-weight: 600; } .resource_description, .news_description, .next_description { background-color:rgba(0,0,0,0.75); position: absolute; width: 300px!important; left: 0; top: 130; left: 140; height: 60px!important; } .resource_description p, .news_description p, .next_description p { text-align: left; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 16px; line-height: 21px; font-weight: 500; margin-top: 8; color:#FFFFFF; padding: 0px 20px; } .resource_link, .news_link, .next_link { position: absolute; top: 175; left: 140; width: 300px!important; margin-left: 0px; border-style: solid; border-color:#00b4dc; border-width: 1px 0px 0px 0px; } /* AWARDS */ #awards { display: block; float: none; clear: both; height: 400px; padding-top: 0px; margin-top: 10px; margin-bottom: 120px; padding-bottom: 180px; } .award_left { height: 210px; width: 70%; float: none; margin-right: 30%; background-color:rgba(0,0,0,0.6); text-align: right; } .award_left_img img { width:240px; margin: 20px; } .award_left_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 0px 20px; } .award_right { height: 210px; width: 70%; float: none; margin-left: 30%; background-color:rgba(0,0,0,0.6); margin-top: 12px; text-align: left; } .award_right_img img { width: 240px; margin: 20px; } .award_right_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 0px 20px; } .news_text { color:#FFFFFF; font-size: 21px; line-height: 30px; font-weight: 500; margin-top: 40px; padding-top: 20px; } /* QUOTES */ #laser_1 { display: none; } #laser_2 { display: none!important; } #laser_3 { margin-top: -30px; margin-bottom: -30px; } #laser_4 { margin-top: 30px; margin-bottom: -60px; } #quote_laser_2 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2.5s; -webkit-animation-duration: 2.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 30px; } #quote_laser_3 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_right; -webkit-animation-name: laser_right; /* Safari 4.0 - 8.0 */ animation-duration: 1.75s; -webkit-animation-duration: 1.75s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; left:0; margin-top: 0px; } #quote_laser_4 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2s; -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 40px; margin-bottom: -30px; } #quote_container { position: relative; width: 100%; margin: -50px auto 0px auto; text-align: center; z-index: 14; background-color:rgba(0,0,0,0.38); } #tata_quote { position: relative; width: 100%; max-width: 900px; text-align: left; margin: 90px auto 0px auto; clear: both; float: none; z-index: 14; } #tata_quote img { width: 200px; margin: 0px 20px; float: left; } #steve_garson_quote { position: relative; width: 100%; max-width: 900px; height: 200px; text-align: right; margin: 50px auto 0px auto; clear: both; float: none; } #steve_garson_quote img { width: 200px; margin: 0px 20px; float: right; } #fourfiftyone_quote { position: relative; width: 100%; max-width: 900px; text-align: left; margin: 50px auto 0px auto; clear: both; float: none; } #fourfiftyone_quote img { width: 200px; margin: 20px; float: left; } #versa_quote { position: relative; width: 100%; max-width: 1200px; text-align: right; margin: 0px auto 0px auto; padding-bottom: 90px; clear: both; float: none; } #versa_quote img { width: 200px; margin: 20px 20px; float: right; } .home_quote_left { font-size: 24px; line-height: 30px; color:#f2f2f2; font-weight: 300; text-align: left;} .home_attribution_left { font-size: 15px; line-height: 18px; color:#B3B3B3; font-weight: 400; text-align: left; } .home_quote_right { font-size: 24px; line-height: 30px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_quote_right_medium { font-size: 24px; line-height: 30px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_quote_right_small { font-size: 24px; line-height: 30px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_attribution_right { font-size: 15px; line-height: 18px; color:#B3B3B3; font-weight: 400; text-align: right; } /* STRESS LESS */ #core_performance_header { text-align: center; font-size: 54px; color:#f2f2f2; font-weight: 600; margin-top: -300px; margin-bottom: 40px; position: relative; } #angle_top_core_performance { position: relative; margin-top: 60px; z-index: 13; height: 100px; width: 100vw; } #angle_top_core_performance img { width: 100%; height: 100px; margin-top: -289px; } /* THIS IS THE BLUE ANGLE ABOVE STRESS LESS */ #core_performance_middle { position: relative; z-index:13; height: 340px; background-color:#036179; background-image: url('images/stress_less_bkg_new.png'); background-size: cover; width: 100vw; text-align: center; } .stress_less_icon { width: 120px; } #core_performance_1 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_2 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_3 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_4 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_5 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_1 h3 { font-size: 18px; line-height: 21px; } #core_performance_2 h3 { font-size: 18px; line-height: 21px; } #core_performance_3 h3 { font-size: 18px; line-height: 21px; } #core_performance_4 h3 { font-size: 18px; line-height: 21px; } #core_performance_5 h3 { font-size: 18px; line-height: 21px; } #angle_top_core_productivity { position: relative; margin-top: 60px; z-index: 13; height: 100px; width: 100vw; } #angle_top_core_productivity img { width: 100%; height: 100px; margin-top: -1px; } /* THIS IS THE BLUE ANGLE BELOW STRESS LESS */ /* DO MORE */ #core_productivity_header { text-align: center; font-size: 54px; color:#f2f2f2; font-weight: 600; margin-bottom: 30px; position: relative; } #fixed_bkg_core_productivity { position: relative; z-index: 12; width: 100vw; height: 600px; margin-top: -90px; background-color:#121212; background-image: url('images/new_photo_bkg3b_vert.png'); background-size: cover; background-position: bottom right; background-attachment: fixed; text-align: center; } #core_productivity_interactive { text-align: center; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-bottom: 0px; position: relative; } #core_productivity_arrow_button { position: relative; margin-top: -120px; } /* DO MORE SLIDER STYLES */ .slider { margin-left: auto; margin-right: auto; } .slick-slide { -webkit-transform: translate3d(0,0,0); } .slick-slide, .slick-slide *{ outline: none !important; } .center { width: 100%; max-width: 750px; height: 400px; margin-top: 60px; text-align: center; } .slick-slide { margin: 0px 0px 0px 0px; text-align: center; width: 150px; transition: 0.5s; } .slick-prev:before, .slick-next:before { color: black; } .slick-slide { transition: all ease-in-out 0.3s; opacity: 1; } .slick-active { opacity: 1; } .slick-current { opacity: 1; } .slick-center img { width: 300px!important; opacity: 1!important; margin-left: -36px!important; } .slick-center { width: 300px; transition: 0.5s; text-align: center; } .slick-slide img { width: 120px; margin-left: auto; margin-right: auto; opacity: 0.25; transition: 0.5s; margin-left: 50px; } .slider h3 { color:#616161; font-size: 10px; margin-top: -20px; transition: 0.5s;} .slick-center h3 { color:#f2f2f2; font-size: 18px; margin-top: 0px!important; } .core_productivity_title { font-size: 18px; color:#616161; margin-top: 90px; transition: 0.5s; } .slick-center .core_productivity_title { font-size: 30px; color:#f2f2f2; font-weight: 500; margin-top: 0px!important; } /* MODE AND GO */ #row_7 { width: 100vw; z-index: 13; height: 540px; background-color:#F7F7F7; background-image: url('images/mode_and_go_bkg_gold4.png'); background-size: cover; background-position: center center; } #mode_go_more { display: block; position: relative; width: 100vw; max-width: 1000px; margin-left: auto; margin-right: auto; text-align: center; } #mode_go_more_m { display: none; } #mode_and_go { margin-top: 60px; width: 45%; float: left; margin-right: 5%; } #mode_and_go_header img { width: 100%; max-width: 300px; } #mode_and_go_image img { width: 90%; max-width: 300px;} #mode_and_more { margin-top: 60px; width: 45%; margin-left: 5%; float: left; } #mode_and_more_header img { width: 100%; max-width: 300px; } #mode_and_more_image img { width: 90%; max-width: 300px;} #mode_and_go_header { text-align: center; font-size: 54px; color:#616161; font-weight: 600; margin-bottom: 60px; } #mode_and_more_header { text-align: center; font-size: 54px; color:#f2f2f2; font-weight: 600; margin-bottom: 60px; } #row_7 > img { display: none; } } @media only screen and (min-width: 891px) and (max-width: 1024px) and (orientation: portrait) { #mobile_landscape_modal_china, #modal_china { display: none!important; } #mobile_portrait_modal_china { width: 80%; max-width: 800px; min-width: 700px; margin-left: auto; margin-right: auto; height: 90vh; display: block; position: fixed; top: 20vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } } @media only screen and (min-width: 891px) and (max-width: 1024px) and (orientation: landscape) { #mobile_portrait_modal_china, #mobile_landscape_modal_china { display: none!important; } #modal_china { width: 80%; max-width: 800px; min-width: 700px; margin-left: auto; margin-right: auto; height: 90vh; display: block; position: fixed; top: 10vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } } @media only screen and (min-width: 891px) and (max-width: 1024px) { #intro_modal_china { width: 80%; max-width: 800px; min-width: 700px; margin-left: auto; margin-right: auto; height: 90vh; display: block; position: fixed; top: 10vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } .china_modal_close_link { display: block; width: 90px; height: 25px; position: absolute; right: -5; top: 40; background-color:#ad1e1e; text-align: center; padding-top: 0px; padding-bottom: 4px; color:#ffffff; font-size: 20px; font-weight: 800; font-family: 'Source Sans Pro', Trebuchet, sans-serif; z-index: 1000004; } .china_modal_content img { width: 700px; } #china_form_image_desktop { width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #china_form_image_mobile { display: none; width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #enterprises_button { width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% - 310px); margin-top: -60px; } #asps_button { width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% + 10px); margin-top: -50px; } #terabit_core_logo { float: right; width: 150px; margin-top: -30px; margin-right: 20px; } #all_awards { width: 90%; padding: 20px; min-width: 800px; text-align: right; background-color:rgba(0,0,0,0.5); text-align: right; } .new_accolade { width: 210px; margin: 0px 10px; display: inline-block; } #menu { opacity: 1; position: fixed; top: 80; left: 0; width: 100%; height: 100vh; display: block; z-index:999997!important; background-color:#393939; background-image: url('images/menu_bkg_min.png'); background-size: cover; background-position: center center; overflow: scroll; } #mega_menu { padding-left: 40px; padding-top: 10vh; } #mobile_menu { display: none; } .menu_start { top: 80!important; } .menu_scroll { top: 50!important; } #cloud_1 img { width: 25vw; z-index: 2; } #cloud_2 img { width: 10vw; z-index: 2; } #cloud_3 img { width: 20vw; z-index: 2; } #cloud_4 img { width: 30vw; z-index: 2; } #cloud_5 img { width: 35vw; z-index: 2; } #cloud_6 img { width: 15vw; z-index: 2; } #cloud_7 img { width: 12vw; z-index: 2; } #cloud_8 img { width: 21vw; z-index: 2; } #cloud_9 img { width: 18vw; z-index: 2; } #hex_1 img { width: 5vw; z-index: 2; } #hex_2 img { width: 25vw; z-index: 2; } #hex_3 img { width: 10vw; z-index: 2; } #sigma_1 img { width: 15vw; z-index: 2; } #sigma_2 img { width: 10vw; z-index: 2; } #sigma_3 img { width: 25vw; z-index: 2; } #cloud_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; } #cloud_2 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #cloud_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -20vw; } #cloud_4 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 21s; -webkit-animation-duration: 21s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -30vw; } #cloud_5 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 6s; overflow: hidden; margin-left: -35vw; } #cloud_6 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 4s; overflow: hidden; margin-left: -15vw; } #cloud_7 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 21s; -webkit-animation-duration: 21s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -12vw; animation-delay: 5s; } #cloud_8 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 24s; -webkit-animation-duration: 24s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -21vw; animation-delay: 3s; } #cloud_9 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -18vw; animation-delay: 5s; } #hex_1 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -5vw; margin-top: 9vh; } #hex_2 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 36s; -webkit-animation-duration: 36s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; } #hex_3 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 24s; -webkit-animation-duration: 24s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #sigma_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 30s; -webkit-animation-duration: 30s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -15vw; } #sigma_2 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; animation-delay: 1s; } #sigma_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; animation-delay: 3s; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes cloud_anim_1 { 0% {left:100%; top:-5h; opacity:0.2; } 50% {left:50%; top:-5vh; opacity: 0.60; } 100% {left:0%; top:-5vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_2 { 0% {left:100%; top:30vh; opacity:0.2; } 50% {left:50%; top:30vh; opacity: 0.60; } 100% {left:0%; top:30vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_3 { 0% {left:100%; top:50vh; opacity: 0.2; } 50% {left:50%; top:50vh; opacity: 0.60; } 100% {left:0%; top:50vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_4 { 0% {left:100%; top:70vh; opacity: 0.2; } 50% {left:50%; top:70vh; opacity: 0.60; } 100% {left:0%; top:70vh; opacity: 0.0; } } /* Standard syntax */ @keyframes cloud_anim_1 { 0% {left: 100%; top:-5vh; opacity: 0.2; } 50% {left: 50%; top:-5vh; opacity: 0.60; } 100% {left: 0%; top:-5vh; opacity: 0.0; } } @keyframes cloud_anim_2 { 0% {left:100%; top:30vh; opacity: 0.2; } 50% {left:50%; top:30vh; opacity: 0.60; } 100% {left:0%; top:30vh; opacity: 0.0; } } @keyframes cloud_anim_3 { 0% {left:100%; top:50vh; opacity: 0.2; } 50% {left:50%; top:50vh; opacity: 0.60; } 100% {left:0%; top:50vh; opacity: 0.0; } } @keyframes cloud_anim_4 { 0% {left:100%; top:70vh; opacity: 0.2; } 50% {left:50%; top:70vh; opacity: 0.60; } 100% {left:0%; top:70vh; opacity: 0.0; } } /* INTRO */ #header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 100px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s; } .header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 100px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s;} .header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 54px!important; background-color:rgba(0,0,0,1)!important; z-index: 999998!important; transition: 0.5s;} #mode_logo { width: 240px; margin-left: auto; margin-right: auto; margin-top: 3px; filter:invert(1); } #mode_amp_go_button { width: 90px; margin-top: 20px; padding-top: 10px; opacity: 0; transition: 0.4s; margin-top: 10px; } #mode_amp_go_button_b { width: 90px; margin-top: 20px; padding-top: 10px; margin-left: -90px; opacity: 1; margin-top: -60px; } /* HEADER CHANGE-ON-SCROLL STYLES */ .mode_go_start { opacity: 0!important; } .mode_go_scroll { opacity: 1!important; width: 70!important; margin-top: -8px!important; } .mode_go_start_b { opacity: 1!important; margin-top: -60px!important; } .mode_go_scroll_b { opacity: 0!important; width: 70!important; margin-left: -70px!important; margin-top: -30px!important; } .logo_scroll { filter: invert(0)!important; width: 120px!important; transition: 0.5s; } .logo_start { filter: invert(1); width: 240px!important; transition: 0.5s; } .nav_icon { cursor: pointer; z-index: 999999; } .bar1_start { background-color: #000000!important; } .bar2_start { background-color: #000000!important; } .bar1_scroll { background-color: #FFFFFF!important; margin-top: 18px!important; width: 4px!important; height: 18px!important; } .bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 40px; transition: 0.5s; z-index: 999999; } #plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ #inside_header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 80px; background-color:#231f20; z-index: 999998!important; transition: 0.5s; } .inside_header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 80px; background-color:#231f20; z-index: 999998!important; transition: 0.5s;} .inside_header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 54px!important; background-color:#000000!important; z-index: 999998!important; transition: 0.5s;} #inside_mode_logo { width: 210px; margin-left: auto; margin-right: auto; margin-top: -2px; } #inside_mode_amp_go_button { width: 90px; margin-top: -2px; padding-top: 10px; transition: 0.4s; } /* HEADER CHANGE-ON-SCROLL STYLES */ .inside_mode_go_start { } .inside_mode_go_scroll { width: 70!important; margin-top: -10px!important; } .inside_logo_scroll { width: 120px!important; transition: 0.5s; margin-top: 3px!important; } .inside_logo_start { width: 210px!important; transition: 0.5s; } .inside_bar1_start { background-color: #FFFFFF!important; } .inside_bar2_start { background-color: #FFFFFF!important; } .inside_bar1_scroll { background-color: #FFFFFF!important; margin-top: 18px!important; width: 4px!important; height: 18px!important; } .inside_bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #inside_plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 30px; transition: 0.5s; z-index: 999999; } #inside_plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .inside_bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ /* NEW HOME INTRO/START */ #first_row { background-image: url('images/intro_fixed_cloud_bkg.png'); background-size: cover; background-attachment: fixed; background-color:#e7f1f4; width: 100%; margin: 0px; padding: 0px; height: 65vh; min-height: 400px; } #row_1 { position: relative; z-index: 12; width: 100vw; height: 60vh; background-color:#e7f1f4; background-image: url('images/intro_fixed_cloud_bkg2.png'); background-size: cover; background-attachment: fixed; text-align: center; } #cloud_to_the_core_m { display: none; } #cloud_to_the_core_top { width: 90%; margin-left: auto; margin-right: auto; margin-top: 20vh; } #cloud_to_the_core_top img { width: 100%; max-width: 800px; margin-top: 0vh; } #cloud_to_the_core_bottom { width: 90%; margin-left: auto; margin-right: auto; } #cloud_to_the_core_bottom img { width: 100%; max-width: 800px; margin-top: -6px; margin-bottom: 10vh; } #start_switch { position: relative; display: inline-block; width: 100%; text-align: center; margin: 0px; padding: 0px; z-index: 18!important; } #turn_on_slider { position: relative; display: inline-block; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } #turn_on_lozenge { margin: 0px 10px -10px 0px; display: inline-block; position: relative; bottom: -5px; text-align: left; width: 120px; height: 45px; padding: 0px; background-color:#000000; box-shadow: 0px 0px 18px rgba(0, 180, 220, 0); border-radius: 45px; z-index: 9999913;} #turn_on_circle { text-align: center; display: inline-block; position: relative; width: 36px; height: 36px; background-color:#00b4dc; border-radius: 18px; padding-top: -5px; margin-top: 4px; margin-left: 78px; animation: slide 2s, fade 2s; animation-timing-function: linear; } #turn_on_circle img { margin-left: -2px; margin-top: -2px; width: 40px; } /* Standard syntax */ @keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } @keyframes fade_up { 0% {top: 90px; opacity: 0;} 75% {top: 90px; opacity: 0;} 100% {top: 0px; opacity: 1;} } /* Safari 4.0 - 8.0 */ @-webkit-keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @-webkit-keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } @-webkit-keyframes fade_up { 0% {margin-top: 90px; opacity: 0;} 90% {margin-top: 90px; opacity: 0;} 100% {margin-top: 0px; opacity: 1;} } #performance_text { position: relative; display: block; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 42px; line-height: 60px; font-weight: 600; margin-top: 30px; text-transform: uppercase; color:#FFFFFF; } #for_SDWAN_text { width: 80%; margin-left: auto; margin-right: auto; max-width: 800px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 30px; line-height: 36px; margin-top: -10px; font-weight: 500; color:#FFFFFF; text-align: right; } #intro_bullets { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-top: 20px; } #intro_bullet_1 { position: relative; width: 34%; float: left; margin: 0; z-index: 18; height: 80px; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 3s; -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; } #intro_bullet_2 { position: relative; width: 32%; float: left; margin: 0; z-index: 18; height: 80px; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 3.5s; -webkit-animation-duration: 3.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; } #intro_bullet_3 { position: relative; width: 34%; float: left; margin: 0; z-index: 18; height: 80px; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 4s; -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; } #intro_bullet_1_m { display: none; } #intro_bullet_2_m { display: none; } #intro_bullet_3_m { display: none; } #intro_bullet_1_landscape { display: none; } #intro_bullet_2_landscape { display: none; } #intro_bullet_3_landscape { display: none; } .intro_bullet { color:#FFFFFF; font-size: 24px; font-weight: 600; line-height: 30px; text-align: center; margin: 0px; } .intro_plus { color:#00b4dc; margin: 0px 10px; font-size: 56; font-weight: 800; } /* END NEW HOME INTRO/START */ /* NEW HOME SWITCH AND VALUES */ #angle_top_turn_on { width: 100%; height: 90px; margin-top: -90px; } #angle_turn_top { width: 100%; height: 90px; margin-top: -91px; position: relative; z-index: 19; } #angle_turn_top > img { width: 100%; height: 90px; } #turn_content { position: relative; z-index: 19;width: 100%; height: 45vh; margin: -2px 0px 0px 0px; padding: 0px; background-image: linear-gradient(to right, #004a5c, #004a5c, #006d87, #008fb0, #0096b8); /*background-image: url('images/start_bottom_bkg.png');*/ background-size: 100% auto; } #angle_turn_bottom { position: relative; z-index: 19; width: 100%; height: 90px; margin-top: -2px; } #angle_turn_bottom > img { width: 100%; height: 90px; } #features_and_quotes_row { margin-top: -180px; background-image: url('images/new_mobile_features_bkg_vert.png'); background-size: cover; background-attachment: fixed; min-height: 50vh; width: 100%; } #angle_after_quotes { display: none; } #angle_after_quotes img { display: none; } #angle_spacer { display: none; } /* END NEW HOME SWITCH AND VALUES */ /* FEATURES */ #row_2 { background-color:#393939; margin-top: -1px; height: 800px; background-image: url('images/new_mobile_features_bkg.png'); background-size: cover; background-position: center center; } #angle_top_quotes { display: none; } /* THIS IS THE BLACK ANGLE BELOW THE INTRO PANE - BEHIND THE FEATURES ON DESKTOP*/ #angle_top_quotes_m { position: relative; margin-top: -89px; width: 100%; z-index: 15; } /* THIS IS THE BLACK ANGLE BELOW THE INTRO PANE - BEHIND THE FEATURES */ #angle_top_quotes_m img { margin-top: 0; width: 100%; height: 90px; } .feature_group { width: 90%; max-width: 1200px; text-align: center; margin-left: auto; margin-right: auto; position: relative; margin-top: -125px; padding-top: 70px; z-index: 21; } .resource_cell, .news_cell, .next_cell { width: 300px; height: 270px; position: relative; text-align: center; margin-left: auto; margin-right: auto; display: none; } .resource_cell img, .news_cell img, .next_cell img { width: 300px!important; height: 250px!important; position: absolute; top: 0; left: -140; } .resource_title_block, .news_title_block, .next_title_block { position: absolute; left: 140; top: 90; width: 160px; background-color:#00b4dc; padding: 10px 20px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; color:#FFFFFF; font-weight: 600; } .resource_description, .news_description, .next_description { background-color:rgba(0,0,0,0.75); position: absolute; width: 300px!important; left: 0; top: 130; left: 140; height: 60px!important; } .resource_description p, .news_description p, .next_description p { text-align: left; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 16px; line-height: 21px; font-weight: 500; margin-top: 8; color:#FFFFFF; padding: 0px 20px; } .resource_link, .news_link, .next_link { position: absolute; top: 175; left: 140; width: 300px!important; margin-left: 0px; border-style: solid; border-color:#00b4dc; border-width: 1px 0px 0px 0px; } #features_bottom_angle { margin-top: 0px!important; } #features_bottom_angle img { margin-top: 0px!important; width: 100%; height: 90px; } #angle_mid_features { height: 720px!important; width:100%!important; } /* AWARDS */ #awards { display: block; float: none; clear: both; height: 150px; padding-top: 0px; margin-top: 30px; margin-bottom: 90px; padding-bottom: 60px; } .award_left { height: 210px; width: 60%; float: none; margin-right: 40%; background-color:rgba(0,0,0,0.6); text-align: right; } .award_left_img img { width: 240px; margin: 20px; } .award_left_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 0px 20px; } .award_right { height: 210px; width: 60%; float: none; margin-left: 40%; background-color:rgba(0,0,0,0.6); margin-top: 12px; text-align: left; } .award_right_img img { width: 240px; margin: 20px; } .award_right_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 0px 20px; } .news_text { color:#FFFFFF; font-size: 21px; line-height: 30px; font-weight: 500; margin-top: 40px; padding-top: 20px; } /* QUOTES */ #quote_laser_2 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2.5s; -webkit-animation-duration: 2.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: -10px; } #quote_laser_3 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_right; -webkit-animation-name: laser_right; /* Safari 4.0 - 8.0 */ animation-duration: 1.75s; -webkit-animation-duration: 1.75s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; left:0; margin-top: -50px; } #quote_laser_4 { height: 1px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2s; -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 90px; } #laser_1 { display: none; } #laser_2 { display: none!important; } #quote_container { position: relative; width: 100%; margin: -15px auto 120px auto!important; text-align: center; z-index: 14; background-color: rgba(0,0,0,0.38); } #tata_quote { position: relative; width: 100%; max-width: 900px; text-align: left; margin: 0px auto 50px auto; clear: both; float: none; z-index: 14; } #tata_quote img { width: 200px; margin: 0px 20px; float: left; } #steve_garson_quote { position: relative; width: 100%; max-width: 900px; height: 200px; text-align: right; margin: 0px auto 50px auto; clear: both; float: none; } #steve_garson_quote img { width: 200px; margin: 0px 20px; float: right; } #fourfiftyone_quote { position: relative; width: 100%; max-width: 900px; text-align: left; margin: 50px auto -50px auto; clear: both; float: none; } #fourfiftyone_quote img { width: 200px; margin: 20px; float: left; } #versa_quote { position: relative; width: 100%; max-width: 1200px; text-align: right; margin: 50px auto 0px auto; padding-bottom: 90px; clear: both; float: none; } #versa_quote img { width: 200px; margin: 30px 20px; float: right; } .home_quote_left { font-size: 27px; line-height: 32px; color:#f2f2f2; font-weight: 300; text-align: left;} .home_attribution_left { font-size: 15px; line-height: 18px; color:#B3B3B3; font-weight: 400; text-align: left; } .home_quote_right { font-size: 27px; line-height: 32px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_quote_right_medium { font-size: 27px; line-height: 32px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_quote_right_small { font-size: 24px; line-height: 30px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_attribution_right { font-size: 15px; line-height: 18px; color:#B3B3B3; font-weight: 400; text-align: right; } #quote_fade_to_clouds { width: 100%; height: 0px!important; } #quote_fade_to_clouds img { width: 100%; } #cloud_spacer { display: none; } #cloud_fade_to_core_control { display: none; } #cloud_fade_to_core_control img { width: 100%; height: 180px; margin-bottom: -90px; margin-top:-90px; } #angle_before_core_control img { height: 150px; margin-top: -190px; width: 100%; position: relative; z-index: 25; } /* CORE CONTROL */ #sd_wan_logos { position: absolute; top: 100; height: 100%; width: 100%; left: 0; z-index: 12; background-image: url('images/no_worry_sdWAN_logos2.png'); background-size: 100% auto; background-position: top center; background-attachment: fixed; } #fixed_bkg_core_control { position: relative; z-index: 13; width: 100vw; margin-top: -120px; padding-top: 90px; height: 850px; background-color:#FFFFFF; background-image: url('images/new_photo_bkg3.png'); background-attachment: fixed; text-align: center; } #fixed_bkg_core_control > img { margin-top: -30px; width: 100%; height: 120px; } /* THIS IS THE BLACK ANGLE BELOW THE QUOTES */ #core_control_title { width: 100vw; position: relative; text-align: center; margin-top: 30px; text-align: center; } #core_control_title img { width: 600px; position: relative; text-align: center; margin-top: -10px; margin-left: auto; margin-right: auto; } #core_control_header { text-align: center; font-size: 48px; color:#393939; font-weight: 600; margin-bottom: 20px; position: relative; } #core_control_subtitle { text-align: center; font-size: 24px; font-weight: 600; line-height: 32px; color:#616161; margin-top: 0px; margin-left: 20px; margin-right: 20px; margin-bottom: -10px; position: relative; } #core_control_subtitle_m { display: none; } #core_control_base { position: relative: z-index: 13; } #core_control_base img { width: 850px; height: 472px; margin: 0px; padding: 0px; } #core_control_modeCore { text-align: center; margin-top: -472px; } #core_control_modeCore img { width: 850px; height: 472px; margin: 0px; padding: 0px; } #core_control_blueSDWAN { position: relative; margin-top: -472px; } #core_control_blueSDWAN img { width: 850px; height: 472px; margin: 0px; padding: 0px; } #core_control_multiCloud { margin-top: -472px; } #core_control_multiCloud img { width: 850px; height: 472px; margin: 0px; padding: 0px; } #core_control_collab { margin-top: -472px; } #core_control_collab img { width: 850px; height: 472px; margin: 0px; padding: 0px; } #core_control_mobile { display: none; } #core_control_mobile_landscape { display: none; } /* STRESS LESS */ #core_performance_header { text-align: center; font-size: 48px; color:#f2f2f2; font-weight: 600; margin-top: -300px; margin-bottom: 20px; position: relative; } #angle_top_core_performance { position: relative; margin-top: 60px; z-index: 13; height: 150px; width: 100vw; } #angle_top_core_performance img { width: 100%; height: 150px; margin-top: -289px; } /* THIS IS THE BLUE ANGLE ABOVE STRESS LESS */ #core_performance_middle { position: relative; z-index:13; height: 270px; background-color:#036179; background-image: url('images/stress_less_bkg_new.png'); background-size: cover; width: 100vw; text-align: center; } .stress_less_icon { width: 120px; } #core_performance_1 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_2 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_3 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_4 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_5 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_1 h3 { font-size: 21px; line-height: 24px; } #core_performance_2 h3 { font-size: 21px; line-height: 24px; } #core_performance_3 h3 { font-size: 21px; line-height: 24px; } #core_performance_4 h3 { font-size: 21px; line-height: 24px; } #core_performance_5 h3 { font-size: 21px; line-height: 24px; } #angle_top_core_productivity { position: relative; margin-top: 60px; z-index: 13; height: 150px; width: 100vw; } #angle_top_core_productivity img { width: 100%; height: 150px; margin-top: -1px; } /* THIS IS THE BLUE ANGLE ABOVE STRESS LESS */ /* DO MORE */ #core_productivity_header { text-align: center; font-size: 48px; color:#f2f2f2; font-weight: 600; margin-bottom: 30px; padding-top: 20px; position: relative; } #fixed_bkg_core_productivity { position: relative; z-index: 12; width: 100vw; height: 800px; margin-top: -60px; background-color:#121212; background-image: url('images/new_photo_bkg3b_vert.png'); background-size: cover; background-position: bottom right; background-attachment: fixed; text-align: center; } #core_productivity_interactive { text-align: center; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-bottom: 0px; position: relative; } #core_productivity_arrow_button { position: relative; clear: both; margin-left: auto; margin-right: auto; margin-top: -90px; text-align: center; } /* DO MORE SLIDER STYLES */ .slider { margin-left: auto; margin-right: auto; } .slick-slide { -webkit-transform: translate3d(0,0,0); } .slick-slide, .slick-slide *{ outline: none !important; } .center { width: 100%; max-width: 900px; height: 400px; margin-top: 90px; text-align: center; } .slick-slide { margin: 0px 0px 0px -10px; text-align: center; width: 180px;} .slick-prev:before, .slick-next:before { color: black; } .slick-slide { transition: all ease-in-out 0.3s; opacity: 1; } .slick-active { opacity: 1; } .slick-current { opacity: 1; } .slick-center img { width: 300px!important; opacity: 1!important; } .slick-center { width: 300px; transition: 0.5s; } .slick-slide img { width: 180px; margin-left: auto; margin-right: auto; opacity: 0.25; transition: 0.5s; } .slider h3 { color:#616161; font-size: 12px; margin-top: -20px; transition: 0.5s;} .slick-center h3 { color:#f2f2f2; font-size: 21px; margin-top: 0px!important; } .core_productivity_title { font-size: 24px; color:#616161; margin-top: 90px; transition: 0.5s; } .slick-center .core_productivity_title { font-size: 36px; color:#f2f2f2; font-weight: 500; margin-top: 0px!important; } /* MODE AND GO */ #row_7 { width: 100vw; z-index: 13; height: 620px; background-color:#F7F7F7; background-image: url('images/mode_and_go_bkg_gold4.png'); background-size: cover; background-position: center center; } #mode_go_more { display: block; position: relative; width: 100vw; max-width: 1000px; margin-left: auto; margin-right: auto; text-align: center; } #mode_go_more_m { display: none; } #mode_and_go { margin-top: 60px; width: 45%; float: left; margin-right: 5%; } #mode_and_go_header img { width: 100%; max-width: 300px; } #mode_and_go_image img { width: 90%; max-width: 300px; } #mode_and_more { margin-top: 60px; width: 45%; margin-left: 5%; float: left; } #mode_and_more_header img { width: 100%; max-width: 300px; } #mode_and_more_image img { width: 90%; max-width: 300px; } #mode_and_go_header { text-align: center; font-size: 54px; color:#616161; font-weight: 600; margin-bottom: 60px; } #mode_and_more_header { text-align: center; font-size: 54px; color:#f2f2f2; font-weight: 600; margin-bottom: 60px; } #row_7 > img { display: none; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { #mobile_portrait_modal_china, #mobile_landscape_modal_china { display: none!important; } #modal_china { width: 80%; max-width: 900px; min-width: 800px; margin-left: auto; margin-right: auto; height: 60vh; display: block; position: fixed; top: 10vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } #intro_modal_china { width: 80%; max-width: 900px; min-width: 800px; margin-left: auto; margin-right: auto; height: 60vh; display: block; position: fixed; top: 10vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } .china_modal_close_link { display: block; width: 90px; height: 25px; position: absolute; right: -5; top: 40; background-color:#ad1e1e; text-align: center; padding-top: 0px; padding-bottom: 4px; color:#ffffff; font-size: 20px; font-weight: 800; font-family: 'Source Sans Pro', Trebuchet, sans-serif; z-index: 1000004; } .china_modal_content img { width: 800px; } #china_form_image_desktop { width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #china_form_image_mobile { display: none; width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #enterprises_button { width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% - 310px); margin-top: -60px; } #asps_button { width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% + 10px); margin-top: -50px; } #terabit_core_logo { float: right; width: 180px; margin-top: -30px; margin-right: 20px; } #all_awards { width: 80%; padding: 20px; min-width: 340px; text-align: right; background-color:rgba(0,0,0,0.5); } .new_accolade { height: 120px; margin: 0px 20px; display: inline; } #menu { opacity: 1; position: fixed; top: 90; left: 0; width: 100%; height: 100vh; display: block; z-index:999997!important; background-color:#393939; background-image: url('images/menu_bkg_min.png'); background-size: cover; background-position: center center; overflow: scroll; } #mega_menu { display: block; padding-left: 60px; padding-top: 20vh; } #mobile_menu { display: none; } .menu_start { top: 90!important; } .menu_scroll { top: 50!important; } #cloud_1 img { width: 25vw; z-index: 2; } #cloud_2 img { width: 10vw; z-index: 2; } #cloud_3 img { width: 20vw; z-index: 2; } #cloud_4 img { width: 30vw; z-index: 2; } #cloud_5 img { width: 35vw; z-index: 2; } #cloud_6 img { width: 15vw; z-index: 2; } #cloud_7 img { width: 12vw; z-index: 2; } #cloud_8 img { width: 21vw; z-index: 2; } #cloud_9 img { width: 18vw; z-index: 2; } #hex_1 img { width: 5vw; z-index: 2; } #hex_2 img { width: 25vw; z-index: 2; } #hex_3 img { width: 10vw; z-index: 2; } #sigma_1 img { width: 15vw; z-index: 2; } #sigma_2 img { width: 10vw; z-index: 2; } #sigma_3 img { width: 25vw; z-index: 2; } #cloud_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; } #cloud_2 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #cloud_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -20vw; } #cloud_4 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 21s; -webkit-animation-duration: 21s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -30vw; } #cloud_5 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 6s; overflow: hidden; margin-left: -35vw; } #cloud_6 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 4s; overflow: hidden; margin-left: -15vw; } #cloud_7 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 21s; -webkit-animation-duration: 21s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -12vw; animation-delay: 5s; } #cloud_8 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 24s; -webkit-animation-duration: 24s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -21vw; animation-delay: 3s; } #cloud_9 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -18vw; animation-delay: 5s; } #hex_1 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -5vw; margin-top: 9vh; } #hex_2 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 36s; -webkit-animation-duration: 36s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; } #hex_3 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 24s; -webkit-animation-duration: 24s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #sigma_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 30s; -webkit-animation-duration: 30s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -15vw; } #sigma_2 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; animation-delay: 1s; } #sigma_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; animation-delay: 3s; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes cloud_anim_1 { 0% {left:100%; top:-5h; opacity:0.2; } 50% {left:50%; top:-5vh; opacity: 0.50; } 100% {left:0%; top:-5vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_2 { 0% {left:100%; top:30vh; opacity:0.2; } 50% {left:50%; top:30vh; opacity: 0.50; } 100% {left:0%; top:30vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_3 { 0% {left:100%; top:50vh; opacity: 0.2; } 50% {left:50%; top:50vh; opacity: 0.50; } 100% {left:0%; top:50vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_4 { 0% {left:100%; top:70vh; opacity: 0.2; } 50% {left:50%; top:70vh; opacity: 0.50; } 100% {left:0%; top:70vh; opacity: 0.0; } } /* Standard syntax */ @keyframes cloud_anim_1 { 0% {left: 100%; top:-5vh; opacity: 0.2; } 50% {left: 50%; top:-5vh; opacity: 0.50; } 100% {left: 0%; top:-5vh; opacity: 0.0; } } @keyframes cloud_anim_2 { 0% {left:100%; top:30vh; opacity: 0.2; } 50% {left:50%; top:30vh; opacity: 0.50; } 100% {left:0%; top:30vh; opacity: 0.0; } } @keyframes cloud_anim_3 { 0% {left:100%; top:50vh; opacity: 0.2; } 50% {left:50%; top:50vh; opacity: 0.50; } 100% {left:0%; top:50vh; opacity: 0.0; } } @keyframes cloud_anim_4 { 0% {left:100%; top:70vh; opacity: 0.2; } 50% {left:50%; top:70vh; opacity: 0.50; } 100% {left:0%; top:70vh; opacity: 0.0; } } /* INTRO */ #header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 100px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s; } .header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 100px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s;} .header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 54px!important; background-color:rgba(0,0,0,1)!important; z-index: 999998!important; transition: 0.5s;} #mode_logo { width: 240px; margin-left: auto; margin-right: auto; margin-top: 3px; filter:invert(1); } #mode_amp_go_button { width: 90px; margin-top: 20px; padding-top: 10px; opacity: 0; transition: 0.4s; margin-top: 10px; } #mode_amp_go_button_b { width: 90px; margin-top: 20px; padding-top: 10px; margin-left: -90px; opacity: 1; margin-top: 10px; } /* HEADER CHANGE-ON-SCROLL STYLES */ .mode_go_start { opacity: 0!important; } .mode_go_scroll { opacity: 1!important; width: 70!important; margin-top: -8px!important; } .mode_go_start_b { opacity: 1!important; } .mode_go_scroll_b { opacity: 0!important; width: 70!important; margin-left: -70px!important; margin-top: -8px!important; } .logo_scroll { filter: invert(0)!important; width: 120px!important; transition: 0.5s; } .logo_start { filter: invert(1); width: 240px!important; transition: 0.5s; } .nav_icon { cursor: pointer; z-index: 999999; } .bar1_start { background-color: #000000!important; } .bar2_start { background-color: #000000!important; } .bar1_scroll { background-color: #FFFFFF!important; margin-top: 18px!important; width: 4px!important; height: 18px!important; } .bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 40px; transition: 0.5s; z-index: 999999; } #plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ #inside_header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 90px; background-color:#231f20; z-index: 999998!important; transition: 0.5s; } .inside_header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 90px; background-color:#231f20; z-index: 999998!important; transition: 0.5s;} .inside_header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 54px!important; background-color:#000000!important; z-index: 999998!important; transition: 0.5s;} #inside_mode_logo { width: 210px; margin-left: auto; margin-right: auto; margin-top: 3px; } #inside_mode_amp_go_button { width: 90px; margin-top: 0px; padding-top: 10px; transition: 0.4s; } /* HEADER CHANGE-ON-SCROLL STYLES */ .inside_mode_go_start { width: 90px!important; margin-top: 0px; padding-top: 10px; } .inside_mode_go_scroll { width: 70px!important; margin-top: -8px!important; } .inside_logo_scroll { width: 120px!important; transition: 0.5s; } .inside_logo_start { width: 210px!important; transition: 0.5s; } .inside_bar1_start { background-color: #FFFFFF!important; } .inside_bar2_start { background-color: #FFFFFF!important; } .inside_bar1_scroll { background-color: #FFFFFF!important; margin-top: 18px!important; width: 4px!important; height: 18px!important; } .inside_bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #inside_plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 30px; transition: 0.5s; z-index: 999999; } #inside_plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .inside_bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ /* NEW HOME INTRO/START */ #first_row { background-image: url('images/intro_fixed_cloud_bkg.png'); background-size: cover; background-attachment: fixed; background-color:#e7f1f4; width: 100%; margin: 0px; padding: 0px; height: 65vh; min-height: 400px; } #row_1 { position: relative; z-index: 12; width: 100vw; height: 60vh; background-color:#e7f1f4; background-image: url('images/intro_fixed_cloud_bkg2.png'); background-size: cover; background-attachment: fixed; text-align: center; } #cloud_to_the_core_top { width: 800px; margin-left: auto; margin-right: auto; margin-top: 15vh; } #cloud_to_the_core_top img { width: 800px; margin-top: 0vh; } #cloud_to_the_core_m { display: none; } #cloud_to_the_core_bottom { width: 800px; margin-left: auto; margin-right: auto; } #cloud_to_the_core_bottom img { width: 800px; margin-top: -6px; margin-bottom: 10vh; } #start_switch { position: relative; display: inline-block; width: 100%; text-align: center; margin: 0px; padding: 0px; z-index: 18!important; } #turn_on_slider { position: relative; display: inline-block; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } #turn_on_lozenge { margin: 0px 10px -10px 0px; display: inline-block; position: relative; bottom: -5px; text-align: left; width: 120px; height: 45px; padding: 0px; background-color:#000000; box-shadow: 0px 0px 18px rgba(0, 180, 220, 0); border-radius: 45px; z-index: 9999913;} #turn_on_circle { text-align: center; display: inline-block; position: relative; width: 36px; height: 36px; background-color:#00b4dc; border-radius: 18px; padding-top: -5px; margin-top: 4px; margin-left: 78px; animation: slide 2s, fade 2s; animation-timing-function: linear; } #turn_on_circle img { margin-left: -2px; margin-top: -2px; width: 40px; } /* Standard syntax */ @keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } @keyframes fade_up { 0% {top: 90px; opacity: 0;} 75% {top: 90px; opacity: 0;} 100% {top: 0px; opacity: 1;} } /* Safari 4.0 - 8.0 */ @-webkit-keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @-webkit-keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } @-webkit-keyframes fade_up { 0% {margin-top: 90px; opacity: 0;} 90% {margin-top: 90px; opacity: 0;} 100% {margin-top: 0px; opacity: 1;} } #performance_text { position: relative; display: inline; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 42px; line-height: 60px; font-weight: 600; text-transform: uppercase; color:#FFFFFF; } #for_SDWAN_text { width: 90%; margin-left: auto; margin-right: auto; max-width: 800px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 30px; line-height: 36px; margin-top: -10px; font-weight: 500; color:#FFFFFF; text-align: right; } #intro_bullets { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-top: 40px; } #intro_bullet_1 { position: relative; width: 34%; float: left; margin: 0; z-index: 18; height: 80px; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 3s; -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; } #intro_bullet_2 { position: relative; width: 32%; float: left; margin: 0; z-index: 18; height: 80px; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 3.5s; -webkit-animation-duration: 3.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; } #intro_bullet_3 { position: relative; width: 34%; float: left; margin: 0; z-index: 18; height: 80px; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 4s; -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; } #intro_bullet_1_m { display: none; } #intro_bullet_2_m { display: none; } #intro_bullet_3_m { display: none; } #intro_bullet_1_landscape { display: none; } #intro_bullet_2_landscape { display: none; } #intro_bullet_3_landscape { display: none; } .intro_bullet { color:#FFFFFF; font-size: 24px; font-weight: 600; line-height: 30px; text-align: center; margin: 0px; } .intro_plus { color:#00b4dc; margin: 0px 10px; font-size: 56; font-weight: 800; } /* END NEW HOME INTRO/START */ /* NEW HOME SWITCH AND VALUES */ #angle_top_turn_on { width: 100%; height: 120px; margin-top: -120px; } #angle_turn_top { width: 100%; height: 120px; margin-top: -121px; position: relative; z-index: 19; } #angle_turn_top > img { width: 100%; height: 120px; } #turn_content { position: relative; z-index: 19;width: 100%; height: 40vh; min-height: 300px; margin: 0px; padding: 0px; background-image: linear-gradient(to right, #004a5c, #004a5c, #006d87, #008fb0, #0096b8); /*background-image: url('images/start_bottom_bkg.png');*/ background-size: 100% auto; } #angle_turn_bottom { position: relative; z-index: 19; width: 100%; height: 120px; } #angle_turn_bottom > img { width: 100%; height: 120px; } #features_and_quotes_row { margin-top: -150px; background-image: url('images/new_mobile_features_bkg.png'); background-size: cover; background-attachment: fixed; min-height: 50vh; width: 100%; } /* END NEW HOME SWITCH AND VALUES */ /* FEATURES */ #features_bottom_angle { display: none; } #angle_top_quotes_m { display: none; } .feature_group { width: 99%; max-width: 900px; text-align: center!important; margin-top: 0px; margin-left: auto; margin-right: auto; position: relative; z-index: 21; } .resource_cell { width: 33%; height: 390px; position: absolute; text-align: center; left: 0; top: 0; display: none; } .news_cell { width: 33%; height: 390px; position: absolute; text-align: center; left: 33%; top: 20; display: none; } .next_cell { width: 33%; height: 390px; position: absolute; text-align: center; left: 66%; top: 40; display: none; } .resource_cell img, .news_cell img, .next_cell img { width: 280px!important; height: 233px!important; position: absolute; top: 0; left: 0; } .resource_title_block, .news_title_block, .next_title_block { position: absolute; left: 0; width: 160px; background-color:#00b4dc; padding: 10px 20px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; color:#FFFFFF; font-weight: 600; } .resource_description, .news_description, .next_description { background-color:rgba(0,0,0,0.75); position: absolute; width: 280px!important; left: 0; top: 142; height: 60px!important; } .resource_description p, .news_description p, .next_description p { text-align: left; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 16px; line-height: 21px; font-weight: 500; margin-top: 8; color:#FFFFFF; padding: 0px 20px; } .resource_link, .news_link, .next_link { position: absolute; top: 187; width: 280px!important; margin-left: 0px; border-style: solid; border-color:#00b4dc; border-width: 1px 0px 0px 0px; } /* AWARDS */ #awards { display: block; float: none; clear: both; height: 260px; padding-top: 300px; margin-top: 40px; margin-bottom: 40px; padding-bottom: 90px; } .award_left { height: 210px; width: 49%; float: left; background-color:rgba(0,0,0,0.6); text-align: right; } .award_left_img img { width:240px; margin: 20px; } .award_left_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 0px 20px;} .award_right { height: 210px; width: 49%; float: right; background-color:rgba(0,0,0,0.6); margin-top: 72px; text-align: left; } .award_right_img img { width: 240px; margin: 20px; } .award_right_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 0px 20px;} .news_text { color:#FFFFFF; font-size: 21px; line-height: 30px; font-weight: 500; margin-top: 20px; } /* QUOTES */ #angle_top_quotes { position: relative; margin-top: -120px; width: 100%; z-index: 15; } #angle_top_quotes img { margin-top: 0px!important; width: 100%; height: 120px; } #quote_laser_1 { height: 2px!important; z-index: 16; position: absolute; animation-name: laser_right; -webkit-animation-name: laser_right; /* Safari 4.0 - 8.0 */ animation-duration: 2s; -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; left:0; margin-top: -120px; } #quote_laser_2 { height: 2px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2.5s; -webkit-animation-duration: 2.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: -10px; } #quote_laser_3 { height: 2px!important; z-index: 16; position: absolute; animation-name: laser_right; -webkit-animation-name: laser_right; /* Safari 4.0 - 8.0 */ animation-duration: 1.75s; -webkit-animation-duration: 1.75s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; left:0; margin-top: -50px; } #quote_laser_4 { height: 2px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2s; -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 0px; } #quote_container { position: relative; width: 100%; margin: 0px auto 0px auto; padding-top: 0px; text-align: center; z-index: 14; } #tata_quote { position: relative; width: 100%; max-width: 1200px; text-align: left; margin: -80px auto 50px auto; padding-top: 0px; clear: both; float: none; z-index: 14; } #tata_quote img { width: 200px; margin: 0px 20px; float: left; } #steve_garson_quote { position: relative; width: 100%; max-width: 1200px; height: 200px; text-align: right; margin: 0px auto 50px auto; clear: both; float: none; } #steve_garson_quote img { width: 200px; margin: 0px 20px; float: right; } #fourfiftyone_quote { position: relative; width: 100%; max-width: 1200px; text-align: left; margin: 50px auto 50px auto; clear: both; float: none; } #fourfiftyone_quote img { width: 200px; margin: 20px; float: left; } #versa_quote { position: relative; width: 100%; max-width: 1200px; text-align: right; margin: 50px auto 0px auto; padding-bottom: 90px; clear: both; float: none; } #versa_quote img { width: 200px; margin: 30px 20px; float: right; } .home_quote_left { font-size: 36px; line-height: 42px; color:#f2f2f2; font-weight: 300; text-align: left;} .home_attribution_left { font-size: 18px; line-height: 21px; color:#B3B3B3; font-weight: 400; text-align: left; } .home_quote_right { font-size: 36px; line-height: 42px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_quote_right_medium { font-size: 30px; line-height: 36px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_quote_right_small { font-size: 24px; line-height: 30px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_attribution_right { font-size: 18px; line-height: 21px; color:#B3B3B3; font-weight: 400; text-align: right; } #quote_fade_to_clouds { position: relative; z-index; 25!important; } #quote_fade_to_clouds img { width: 100%; height: 180px; margin-top: -100px; z-index: 25; } #cloud_spacer { display: none; } #cloud_fade_to_core_control { position: relative; z-index: 22; } #cloud_fade_to_core_control img { width: 100%; height: 360px; margin-bottom: 0px; margin-top:-240px; } #angle_before_core_control img { display: none; } /* CORE CONTROL */ #sd_wan_logos { position: absolute; top: 100; height: 100%; width: 100%; left: 0; z-index: 12; background-image: url('images/no_worry_sdWAN_logos2.png'); background-size: 100% auto; background-position: top center; background-attachment: fixed; } #fixed_bkg_core_control { position: relative; z-index: 13; width: 100vw; margin-top: -180px; padding-top: 180px; height: 900px; background-color:#FFFFFF; background-image: url('images/new_photo_bkg3.png'); background-attachment: fixed; text-align: center; } #fixed_bkg_core_control > img { margin-top: -0px; width: 100%; height: 200px; } /* THIS IS THE BLACK ANGLE BELOW THE QUOTES */ #core_control_header { text-align: center; font-size: 60px; color:#393939; font-weight: 600; margin-bottom: 40px; position: relative; } #core_control_title { width: 100vw; position: relative; text-align: center; margin-top: 30px; text-align: center; } #core_control_title img { width: 600px; position: relative; text-align: center; margin-top: -10px; margin-left: auto; margin-right: auto; } #core_control_subtitle { text-align: center; font-size: 24px; font-weight: 600; line-height: 32px; color:#616161; margin-top: 0px; margin-left: 20px; margin-right: 20px; margin-bottom: -10px; position: relative; } #core_control_subtitle_m { display: none; } #core_control_base { position: relative: z-index: 13; } #core_control_base img { width: 900px; height: 500px; margin: 0px; padding: 0px; } #core_control_modeCore { text-align: center; margin-top: -500px; } #core_control_modeCore img { width: 900px; height: 500px; margin: 0px; padding: 0px; } #core_control_blueSDWAN { position: relative; margin-top: -500px; } #core_control_blueSDWAN img { width: 900px; height: 500px; margin: 0px; padding: 0px; } #core_control_multiCloud { margin-top: -500px; } #core_control_multiCloud img { width: 900px; height: 500px; margin: 0px; padding: 0px; } #core_control_collab { margin-top: -500px; } #core_control_collab img { width: 900px; height: 500px; margin: 0px; padding: 0px; } #core_control_mobile { display: none; } #core_control_mobile_landscape { display: none; } /* STRESS LESS */ #core_performance_header { text-align: center; font-size: 60px; color:#f2f2f2; font-weight: 600; margin-top: -300px; margin-bottom: 40px; position: relative; } #angle_top_core_performance { position: relative; margin-top: 60px; z-index: 13; height: 200px; width: 100vw; } #angle_top_core_performance img { width: 100%; height: 200px; margin-top: -299px; } /* THIS IS THE BLUE ANGLE ABOVE STRESS LESS */ #core_performance_middle { position: relative; z-index:13; height: 350px; background-color:#036179; background-image: url('images/stress_less_bkg_new.png'); background-size: cover; width: 100vw; text-align: center; } .stress_less_icon { width: 120px; } #core_performance_1 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_2 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_3 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_4 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_5 { float: left; width: 18%; text-align: center; margin: 0px; padding: 1%; } #core_performance_1 h3 { font-size: 21px; line-height: 24px; } #core_performance_2 h3 { font-size: 21px; line-height: 24px; } #core_performance_3 h3 { font-size: 21px; line-height: 24px; } #core_performance_4 h3 { font-size: 21px; line-height: 24px; } #core_performance_5 h3 { font-size: 21px; line-height: 24px; } #angle_top_core_productivity { position: relative; margin-top: 60px; z-index: 13; height: 200px; width: 100vw; } #angle_top_core_productivity img { width: 100%; height: 200px; margin-top: -1px; } /* THIS IS THE BLUE ANGLE BELOW STRESS LESS */ /* DO MORE */ #core_productivity_header { text-align: center; font-size: 60px; color:#f2f2f2; font-weight: 600; margin-bottom: 30px; padding-top: 20px; position: relative; } #fixed_bkg_core_productivity { position: relative; z-index: 12; width: 100vw; height: 840px; margin-top: -120px; background-color:#121212; background-image: url('images/new_photo_bkg3b.png'); background-size: cover; background-position: bottom right; background-attachment: fixed; text-align: center; } #core_productivity_interactive { text-align: center; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-bottom: 0px; position: relative; } #core_productivity_arrow_button { position: relative; clear: both; margin-left: auto; margin-right: auto; margin-top: -50px; text-align: center; } /* DO MORE SLIDER STYLES */ .slick-slide { -webkit-transform: translate3d(0,0,0); } .slick-slide, .slick-slide *{ outline: none !important; } .center { width: 100%; max-width: 1200px; height: 400px; margin-top: 90px; text-align: center; } .slick-slide { margin: 0px 0px 0px -10px; text-align: center; width: 200px;} .slick-prev:before, .slick-next:before { color: black; } .slick-slide { transition: all ease-in-out 0.3s; opacity: 1; } .slick-active { opacity: 1; } .slick-current { opacity: 1; } .slick-center img { width: 400px!important; opacity: 1!important; } .slick-center { width: 400px; transition: 0.5s; } .slick-slide img { width: 200px; margin-left: auto; margin-right: auto; opacity: 0.25; transition: 0.5s; } .slider h3 { color:#616161; font-size: 12px; margin-top: -20px; transition: 0.5s;} .slick-center h3 { color:#f2f2f2; font-size: 24px; margin-top: 0px!important; } .core_productivity_title { font-size: 24px; color:#616161; margin-top: 90px; transition: 0.5s; } .slick-center .core_productivity_title { font-size: 48px; color:#f2f2f2; font-weight: 500; margin-top: 0px!important; } /* MODE AND GO */ #row_7 { width: 100vw; z-index: 13; height: 650px; background-color:#F7F7F7; background-image: url('images/mode_and_go_bkg_gold4.png'); background-size: cover; background-position: center center; } #mode_go_more { display: block; position: relative; width: 100vw; max-width: 1000px; margin-left: auto; margin-right: auto; text-align: center; } #mode_go_more_m { display: none; } #mode_and_go { margin-top: 60px; width: 45%; float: left; margin-right: 5%; } #mode_and_go_header img { width: 100%; max-width: 300px; } #mode_and_go_image img { width: 90%; max-width: 300px; } #mode_and_more { margin-top: 60px; width: 45%; margin-left: 5%; float: left; } #mode_and_more_header img { width: 100%; max-width: 300px; } #mode_and_more_image img { width: 90%; max-width: 300px; } #mode_and_go_header { text-align: center; font-size: 54px; color:#616161; font-weight: 600; margin-bottom: 60px; } #mode_and_more_header { text-align: center; font-size: 54px; color:#f2f2f2; font-weight: 600; margin-bottom: 60px; } #row_7 > img { display: none; } } @media only screen and (min-width: 1200px) { #mobile_portrait_modal_china, #mobile_landscape_modal_china { display: none!important; } #modal_china { width: 80%; max-width: 900px; min-width: 800px; margin-left: auto; margin-right: auto; height: 60vh; display: block; position: fixed; top: 10vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } #intro_modal_china { width: 80%; max-width: 900px; min-width: 800px; margin-left: auto; margin-right: auto; height: 60vh; display: block; position: fixed; top: 10vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 1000003; transition: 0.5s; } .china_modal_close_link { display: block; width: 90px; height: 25px; position: absolute; right: -5; top: 40; background-color:#ad1e1e; text-align: center; padding-top: 0px; padding-bottom: 4px; color:#ffffff; font-size: 20px; font-weight: 800; font-family: 'Source Sans Pro', Trebuchet, sans-serif; z-index: 1000004; } .china_modal_content img { width: 800px; } #china_form_image_desktop { width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #china_form_image_mobile { display: none; width: 90%; max-width: 900px; min-width: 240px; margin-bottom: -30px; } #enterprises_button { width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% - 330px); margin-top: -60px; } #asps_button { width: 300px; height: 50px; text-align: center; position: relative; margin-left: calc(50% + 30px); margin-top: -50px; } #terabit_core_logo { float: right; width: 180px; margin-top: -30px; margin-right: 20px; } #all_awards { width: 80%; padding: 20px; min-width: 340px; text-align: right; background-color:rgba(0,0,0,0.5); } .new_accolade { height: 150px; margin: 0px 20px; display: inline; } #menu { opacity: 1; position: fixed; top: 90; left: 0; width: 100%; height: 100vh; display: block; z-index:999997!important; background-color:#393939; background-image: url('images/menu_bkg_min.png'); background-size: cover; background-position: center center; overflow-y: scroll; } #mega_menu { display: block; padding-left: 60px; padding-top: 20vh; } #mobile_menu { display: none; } .menu_start { top: 90!important; } .menu_scroll { top: 50!important; } /* CLOUDS */ #cloud_1 img { width: 25vw; z-index: 2; } #cloud_2 img { width: 10vw; z-index: 2; } #cloud_3 img { width: 20vw; z-index: 2; } #cloud_4 img { width: 30vw; z-index: 2; } #cloud_5 img { width: 35vw; z-index: 2; } #cloud_6 img { width: 15vw; z-index: 2; } #cloud_7 img { width: 12vw; z-index: 2; } #cloud_8 img { width: 21vw; z-index: 2; } #cloud_9 img { width: 18vw; z-index: 2; } #hex_1 img { width: 5vw; z-index: 2; } #hex_2 img { width: 25vw; z-index: 2; } #hex_3 img { width: 10vw; z-index: 2; } #sigma_1 img { width: 15vw; z-index: 2; } #sigma_2 img { width: 10vw; z-index: 2; } #sigma_3 img { width: 25vw; z-index: 2; } #cloud_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; } #cloud_2 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #cloud_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -20vw; } #cloud_4 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 21s; -webkit-animation-duration: 21s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -30vw; } #cloud_5 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 6s; overflow: hidden; margin-left: -35vw; } #cloud_6 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 4s; overflow: hidden; margin-left: -15vw; } #cloud_7 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 21s; -webkit-animation-duration: 21s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -12vw; animation-delay: 5s; } #cloud_8 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 24s; -webkit-animation-duration: 24s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -21vw; animation-delay: 3s; } #cloud_9 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -18vw; animation-delay: 5s; } #hex_1 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -5vw; margin-top: 9vh; } #hex_2 { position: absolute; z-index: 7; animation-name: cloud_anim_3; -webkit-animation-name: cloud_anim_3; /* Safari 4.0 - 8.0 */ animation-duration: 36s; -webkit-animation-duration: 36s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; } #hex_3 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 24s; -webkit-animation-duration: 24s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #sigma_1 { position: absolute; z-index: 7; animation-name: cloud_anim_1; -webkit-animation-name: cloud_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 30s; -webkit-animation-duration: 30s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -15vw; } #sigma_2 { position: absolute; z-index: 7; animation-name: cloud_anim_4; -webkit-animation-name: cloud_anim_4; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; animation-delay: 1s; } #sigma_3 { position: absolute; z-index: 7; animation-name: cloud_anim_2; -webkit-animation-name: cloud_anim_2; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -25vw; animation-delay: 3s; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes cloud_anim_1 { 0% {left:100%; top:-5h; opacity:0.2; } 50% {left:50%; top:-5vh; opacity: 0.50; } 100% {left:0%; top:-5vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_2 { 0% {left:100%; top:30vh; opacity:0.2; } 50% {left:50%; top:30vh; opacity: 0.50; } 100% {left:0%; top:30vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_3 { 0% {left:100%; top:50vh; opacity: 0.2; } 50% {left:50%; top:50vh; opacity: 0.50; } 100% {left:0%; top:50vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_4 { 0% {left:100%; top:70vh; opacity: 0.2; } 50% {left:50%; top:70vh; opacity: 0.50; } 100% {left:0%; top:70vh; opacity: 0.0; } } /* Standard syntax */ @keyframes cloud_anim_1 { 0% {left: 100%; top:-5vh; opacity: 0.2; } 50% {left: 50%; top:-5vh; opacity: 0.50; } 100% {left: 0%; top:-5vh; opacity: 0.0; } } @keyframes cloud_anim_2 { 0% {left:100%; top:30vh; opacity: 0.2; } 50% {left:50%; top:30vh; opacity: 0.50; } 100% {left:0%; top:30vh; opacity: 0.0; } } @keyframes cloud_anim_3 { 0% {left:100%; top:50vh; opacity: 0.2; } 50% {left:50%; top:50vh; opacity: 0.50; } 100% {left:0%; top:50vh; opacity: 0.0; } } @keyframes cloud_anim_4 { 0% {left:100%; top:70vh; opacity: 0.2; } 50% {left:50%; top:70vh; opacity: 0.50; } 100% {left:0%; top:70vh; opacity: 0.0; } } /* INTRO */ #header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 100px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s; } .header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 100px; background-color:rgba(0,0,0,0); z-index: 999998!important; transition: 0.5s;} .header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 54px!important; background-color:rgba(0,0,0,1)!important; z-index: 999998!important; transition: 0.5s;} #mode_logo { width: 240px; margin-left: auto; margin-right: auto; margin-top: 3px; filter:invert(1); } #mode_amp_go_button { width: 90px; margin-top: 20px; padding-top: 10px; opacity: 0; transition: 0.4s; margin-top: 10px; } #mode_amp_go_button_b { width: 90px; margin-top: 20px; padding-top: 10px; margin-left: -90px; opacity: 1; margin-top: 10px; } /* HEADER CHANGE-ON-SCROLL STYLES */ .mode_go_start { opacity: 0!important; } .mode_go_scroll { opacity: 1!important; width: 70!important; margin-top: -8px!important; } .mode_go_start_b { opacity: 1!important; } .mode_go_scroll_b { opacity: 0!important; width: 70!important; margin-left: -70px!important; margin-top: -8px!important; } .logo_scroll { filter: invert(0)!important; width: 120px!important; transition: 0.5s; } .logo_start { filter: invert(1); width: 240px!important; transition: 0.5s; } .nav_icon { cursor: pointer; z-index: 999999; } .bar1_start { background-color: #000000!important; } .bar2_start { background-color: #000000!important; } .bar1_scroll { background-color: #FFFFFF!important; margin-top: 18px!important; width: 4px!important; height: 18px!important; } .bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 40px; transition: 0.5s; z-index: 999999; } #plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ #inside_header { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 90px; background-color:#231f20; z-index: 999998!important; transition: 0.5s; } .inside_header_start { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 90px; background-color:#231f20; z-index: 999998!important; transition: 0.5s;} .inside_header_scroll { position: fixed; -webkit-transform: translateZ(0); display: block; top: 0; left: 0; width: 100%; margin: 0px; padding: 0px; height: 54px!important; background-color:#000000!important; z-index: 999998!important; transition: 0.5s;} #inside_mode_logo { width: 240px; margin-left: auto; margin-right: auto; margin-top: -5px; } #inside_mode_amp_go_button { width: 90px; padding-top: 0px; transition: 0.4s; margin-top: 10px; } /* HEADER CHANGE-ON-SCROLL STYLES */ .inside_mode_go_start { } .inside_mode_go_scroll { width: 70!important; margin-top: 0px!important; } .inside_logo_scroll { width: 150px!important; transition: 0.5s; } .inside_logo_start { width: 240px!important; transition: 0.5s; } .inside_bar1_start { background-color: #FFFFFF!important; } .inside_bar2_start { background-color: #FFFFFF!important; } .inside_bar1_scroll { background-color: #FFFFFF!important; margin-top: 18px!important; width: 4px!important; height: 18px!important; } .inside_bar2_scroll { background-color: #FFFFFF!important; width: 18px!important; height: 4px!important; margin-top: -11px!important; margin-left: 15px!important; } #inside_plus_vert { width: 6px; height: 26px; margin-left: 22px; background-color: #000000; margin-top: 30px; transition: 0.5s; z-index: 999999; } #inside_plus_horiz { width: 26px; height: 6px; background-color: #000000; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:999999; } .change .inside_bar1_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_start { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar1_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .inside_bar2_scroll { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } /* END HEADER CHANGE-ON-SCROLL STYLES */ /* NEW HOME INTRO/START */ #first_row { background-image: url('images/intro_fixed_cloud_bkg.png'); background-size: cover; background-attachment: fixed; background-color:#e7f1f4; width: 100%; margin: 0px; padding: 0px; height: 75vh; min-height: 400px;} #row_1 { position: relative; z-index: 12; width: 100vw; height: 100vh; background-color:#e7f1f4; background-image: url('images/intro_fixed_cloud_bkg2.png'); background-size: cover; background-attachment: fixed; text-align: center; } #cloud_to_the_core_m { display: none; } #cloud_to_the_core_top { width: 900px; margin-left: auto; margin-right: auto; margin-top: 24vh; } #cloud_to_the_core_top img { width: 900px; margin-top: 0vh; } #cloud_to_the_core_bottom { width: 900px; margin-left: auto; margin-right: auto; } #cloud_to_the_core_bottom img { width: 900px; margin-top: -6px; margin-bottom: 10vh; } #start_switch { position: relative; display: inline-block; width: 100%; text-align: center; margin: 0px; padding: 0px; z-index: 18!important; } #turn_on_slider { position: relative; display: inline-block; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } #turn_on_lozenge { margin: 0px 10px -10px 0px; display: inline-block; position: relative; bottom: -5px; text-align: left; width: 120px; height: 45px; padding: 0px; background-color:#000000; box-shadow: 0px 0px 18px rgba(0, 180, 220, 0); border-radius: 45px; z-index: 9999913;} #turn_on_circle { text-align: center; display: inline-block; position: relative; width: 36px; height: 36px; background-color:#00b4dc; border-radius: 18px; padding-top: -5px; margin-top: 4px; margin-left: 78px; animation: slide 2s, fade 2s; animation-timing-function: linear; } #turn_on_circle img { margin-left: -2px; margin-top: -2px; width: 40px; } /* Standard syntax */ @keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } @keyframes fade_up { 0% {top: 90px; opacity: 0;} 75% {top: 90px; opacity: 0;} 100% {top: 0px; opacity: 1;} } /* Safari 4.0 - 8.0 */ @-webkit-keyframes slide { 0% {margin-left: 6px;} 66% {margin-left: 6px;} 100% {margin-left: 79px;} } @-webkit-keyframes fade { 0% {background-color:#FFFFFF;} 66% {background-color:#FFFFFF;} 100% {background-color:#00b4dc;} } @-webkit-keyframes fade_up { 0% {margin-top: 90px; opacity: 0;} 75% {margin-top: 90px; opacity: 0;} 100% {margin-top: 0px; opacity: 1;} } #performance_text { position: relative; display: inline; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 42px; line-height: 60px; font-weight: 600; text-transform: uppercase; color:#FFFFFF; } #for_SDWAN_text { width: 90%; margin-left: auto; margin-right: auto; max-width: 800px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 30px; line-height: 36px; margin-top: -10px; font-weight: 500; color:#FFFFFF; text-align: right; } #intro_bullets { position: relative; display: block; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-top: 40px; } #intro_bullet_1 { position: relative; display: block; width: 33%; float: left; margin: 0; z-index: 18; height: 80px; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 3s; -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; } #intro_bullet_2 { position: relative; display: block; width: 33%; float: left; margin: 0; z-index: 18; height: 80px; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 3.5s; -webkit-animation-duration: 3.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; } #intro_bullet_3 { position: relative; display: block; width: 34%; float: left; margin: 0; z-index: 18; height: 80px; opacity: 1; animation-name: fade_up; -webkit-animation-name: fade_up; /* Safari 4.0 - 8.0 */ animation-duration: 4s; -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; } #intro_bullet_1_m { display: none; } #intro_bullet_2_m { display: none; } #intro_bullet_3_m { display: none; } #intro_bullet_1_landscape { display: none; } #intro_bullet_2_landscape { display: none; } #intro_bullet_3_landscape { display: none; } .intro_bullet { color:#FFFFFF; font-size: 24px; font-weight: 600; line-height: 30px; text-align: center; margin: 0px; } .intro_plus { color:#00b4dc; margin: 0px 10px; font-size: 56; font-weight: 800; } /* END NEW HOME INTRO/START */ /* NEW HOME SWITCH AND VALUES */ #angle_top_turn_on { width: 100%; height: 180px; margin-top: -180px; } #angle_turn_top { width: 100%; height: 180px; margin-top: -181px; position: relative; z-index: 19; } #angle_turn_top > img { width: 100%; height: 180px; } #turn_content { position: relative; z-index: 19; width: 100%; height: 30vh; min-height: 300px; margin: -2px 0px; padding: 0px; background-image: linear-gradient(to right, #004a5c, #004a5c, #006d87, #008fb0, #0096b8); /*background-image: url('images/start_bottom_bkg.png');*/ background-size: 100% auto; } #angle_turn_bottom { position: relative; z-index: 19;width: 100%; height: 180px; } #angle_turn_bottom > img { width: 100%; height: 180px; } #features_and_quotes_row { margin-top: -180px; background-image: url('images/new_mobile_features_bkg.png'); background-size: cover; background-attachment: fixed; min-height: 50vh; width: 100%; } /* END NEW HOME SWITCH AND VALUES */ /* FEATURES */ #features_bottom_angle { display: none; } #angle_top_quotes_m { display: none; } .feature_group { width: 99%; max-width: 1200px; text-align: center!important; margin-left: auto; margin-right: auto; position: relative; z-index: 20; height: 420px; } .resource_cell { width: 33%; height: 390px; position: absolute; text-align: center; left: 0; top: 40; display: none; } .news_cell { width: 33%; height: 390px; position: absolute; text-align: center; left: 33%; top: 75; display: none; } .next_cell { width: 33%; height: 390px; position: absolute; text-align: center; left: 66%; top: 110; display: none; } .resource_cell img, .news_cell img, .next_cell img { width: 360px!important; height: 300px!important; position: absolute; top: 0; left: 0; } .resource_title_block, .news_title_block, .next_title_block { position: absolute; left: 0; width: 160px; background-color:#00b4dc; padding: 10px 20px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; color:#FFFFFF; font-weight: 600; } .resource_description, .news_description, .next_description { background-color:rgba(0,0,0,0.75); position: absolute; width: 360px!important; left: 0; top: 200; height: 60px!important; } .resource_description p, .news_description p, .next_description p { text-align: left; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 16px; line-height: 21px; font-weight: 500; margin-top: 8; color:#FFFFFF; padding: 0px 20px; } .resource_link, .news_link, .next_link { position: absolute; top: 245; font-weight: 600; width: 360px!important; margin-left: 0px; border-style: solid; border-color:#00b4dc; border-width: 1px 0px 0px 0px; } /* AWARDS */ #awards { height: 280px; margin-top: 40px; margin-bottom: 40px; } .award_left { height: 230px; width: 49%; float: left; background-color:rgba(0,0,0,0.6); text-align: right; } .award_left_img img { width: 270px; margin: 20px; } .award_left_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 0px 20px; } .award_right { height: 230px; width: 49%; float: right; background-color:rgba(0,0,0,0.6); margin-top: 72px; text-align: left; } .award_right_img img { width: 270px; margin: 20px; } .award_right_text a { color:#00b4dc; font-weight: 600; font-size: 16px; margin: 0px 20px; } .news_text { color:#FFFFFF; font-size: 21px; line-height: 30px; font-weight: 500; margin-top: 40px; } /* QUOTES */ #angle_top_quotes { position: relative; z-index: 12; height: 300px; width: 100vw; z-index: 15; } #angle_top_quotes img { margin-top: 0px; width: 100%; height: 180px; } #angle_mid_quotes { position: relative; z-index: 12; width: 100vw; margin-top: 100px; text-align: center; background-image:url('images/quotes_bkg_black.png'); background-size: cover; } #laser_1 { position: relative; display: block; } #quote_laser_1 { height: 2px!important; z-index: 16; position: absolute; animation-name: laser_right; -webkit-animation-name: laser_right; /* Safari 4.0 - 8.0 */ animation-duration: 2s; -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; left:0; margin-top: 0px; } #quote_laser_2 { height: 2px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2.5s; -webkit-animation-duration: 2.5s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 0px; } #quote_laser_3 { height: 2px!important; z-index: 16; position: absolute; animation-name: laser_right; -webkit-animation-name: laser_right; /* Safari 4.0 - 8.0 */ animation-duration: 1.75s; -webkit-animation-duration: 1.75s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; left:0; margin-top: 0px; } #quote_laser_4 { height: 2px!important; z-index: 16; position: absolute; animation-name: laser_left; -webkit-animation-name: laser_left; /* Safari 4.0 - 8.0 */ animation-duration: 2s; -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; right:0; margin-top: 0px; } #quote_container { position: relative; width: 100%; margin: 0px auto 0px auto; text-align: center; z-index: 14; } #tata_quote { position: relative; display: block; width: 100%; max-width: 1200px; text-align: left; margin: 50px auto 50px auto; padding-top: 40px; clear: both; float: none; z-index: 14; } #tata_quote img { width: 200px; margin: 0px 20px; float: left; } #steve_garson_quote { position: relative; width: 100%; max-width: 1200px; height: 200px; text-align: right; margin: 50px auto 0px auto; padding-top: 30px; clear: both; float: none; } #steve_garson_quote img { width: 200px; margin: 0px 20px; float: right; } #fourfiftyone_quote { position: relative; width: 100%; max-width: 1200px; text-align: left; margin: 50px auto 50px auto; clear: both; float: none; } #fourfiftyone_quote img { width: 200px; margin: 20px; float: left; } #versa_quote { position: relative; width: 100%; max-width: 1200px; text-align: right; margin: 50px auto 0px auto; padding-bottom: 40px; clear: both; float: none; } #versa_quote img { width: 200px; margin: 30px 20px; float: right; } .home_quote_left { font-size: 36px; line-height: 42px; color:#f2f2f2; font-weight: 300; text-align: left;} .home_attribution_left { font-size: 18px; line-height: 21px; color:#B3B3B3; font-weight: 400; text-align: left; } .home_quote_right { font-size: 36px; line-height: 42px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_quote_right_medium { font-size: 30px; line-height: 36px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_quote_right_small { font-size: 24px; line-height: 30px; color:#f2f2f2; font-weight: 300; text-align: right;} .home_attribution_right { font-size: 18px; line-height: 21px; color:#B3B3B3; font-weight: 400; text-align: right; } #quote_fade_to_clouds { position: relative; z-index; 25!important; } #quote_fade_to_clouds img { width: 100%; height: 180px; margin-top: -100px; z-index: 25; } #cloud_spacer { display: none; } #cloud_fade_to_core_control { position: relative; z-index: 22; } #cloud_fade_to_core_control img { width: 100%; height: 360px; margin-bottom: 0px; margin-top:-240px; } #angle_before_core_control img { display: none; } /* CORE CONTROL */ #sd_wan_logos { position: absolute; top: 0; height: 100%; width: 100%; left: 0; z-index: 12; background-image: url('images/no_worry_sdWAN_logos2.png'); background-size: 100% auto; background-attachment: fixed; background-position: top center; } #fixed_bkg_core_control { position: relative; margin-top: -180px; z-index: 13; width: 100vw; height: 1100px; background-color:#FFFFFF; background-image: url('images/new_photo_bkg3.png'); background-attachment: fixed; text-align: center; padding-top: 210px; } #core_control_title { width: 100vw; position: relative; text-align: center; margin-top: 30px; text-align: center; } #core_control_header { text-align: center; font-size: 60px; color:#393939; font-weight: 600; margin-top: 0px; margin-bottom: 20px; position: relative; } #core_control_title img { width: 600px; position: relative; text-align: center; margin-top: 10px; margin-left: auto; margin-right: auto; } #core_control_subtitle { text-align: center; font-size: 24px; font-weight: 600; line-height: 32px; color:#616161; margin-top: 0px; margin-left: 20px; margin-right: 20px; margin-bottom: -10px; position: relative; } #core_control_subtitle_m { display: none; } #core_control_base { position: relative: z-index: 13; } #core_control_base img { width: 1200px; height: 667px; margin: 0px; padding: 0px; } #core_control_modeCore { text-align: center; margin-top: -667px; } #core_control_modeCore img { width: 1200px; height: 667px; margin: 0px; padding: 0px; } #core_control_blueSDWAN { position: relative; margin-top: -667px; } #core_control_blueSDWAN img { width: 1200px; height: 667px; margin: 0px; padding: 0px; } #core_control_multiCloud { margin-top: -667px; } #core_control_multiCloud img { width: 1200px; height: 667px; margin: 0px; padding: 0px; } #core_control_collab { margin-top: -667px; } #core_control_collab img { width: 1200px; height: 667px; margin: 0px; padding: 0px; } #core_control_mobile { display: none; } #core_control_mobile_landscape { display: none; } /* STRESS LESS*/ #core_performance_header { text-align: center; font-size: 60px; color:#f2f2f2; font-weight: 600; margin-top: -300px; margin-bottom: 20px; position: relative; } #angle_top_core_performance { position: relative; margin-top: 60px; z-index: 13; height: 200px; width: 100vw; } #angle_top_core_performance img { width: 100%; height: 200px; margin-top: -289px; } /* THIS IS THE BLUE ANGLE ABOVE STRESS LESS */ #core_performance_middle { position: relative; z-index:13; height: 400px; background-color:#036179; background-image: url('images/stress_less_bkg_new.png'); background-size: cover; width: 100vw; } #core_performance_content { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; text-align: center; } .stress_less_icon { width: 150px; } #core_performance_1 { float: left; width: 200px; text-align: center; margin: 20px 10px; padding: 10px; } #core_performance_2 { float: left; width: 200px; text-align: center; margin: 20px 10px; padding: 10px; } #core_performance_3 { float: left; width: 200px; text-align: center; margin: 20px 10px; padding: 10px; } #core_performance_4 { float: left; width: 200px; text-align: center; margin: 20px 10px; padding: 10px; } #core_performance_5 { float: left; width: 200px; text-align: center; margin: 20px 10px; padding: 10px; } #angle_top_core_productivity { position: relative; margin-top: 60px; z-index: 13; height: 200px; width: 100vw; } #angle_top_core_productivity img { width: 100%; height: 200px; margin-top: -1px; } /* THIS IS THE BLUE ANGLE BELOW STRESS LESS */ /* DO MORE */ #core_productivity_header { text-align: center; font-size: 60px; color:#f2f2f2; font-weight: 600; margin-bottom: 30px; padding-top: 30px; position: relative; } #fixed_bkg_core_productivity { position: relative; z-index: 12; width: 100vw; height: 1000px; margin-top: -63px; background-color:#121212; background-image: url('images/new_photo_bkg3.png'); background-size: cover; background-position: bottom right; background-attachment: fixed; text-align: center; } #core_productivity_interactive { text-align: center; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-bottom: 0px; position: relative; } #core_productivity_arrow_button { position: relative; clear: both; margin-left: auto; margin-right: auto; margin-top: -50px; text-align: center; } /* DO MORE SLIDER STYLES */ .slick-slide { -webkit-transform: translate3d(0,0,0); } .slick-slide, .slick-slide *{ outline: none !important; } .center { width: 100%; max-width: 1200px; height: 400px; margin-top: 90px; text-align: center; } .slick-slide { margin: 0px 0px 0px -10px; text-align: center; width: 200px;} .slick-prev:before, .slick-next:before { color: black; } .slick-slide { transition: all ease-in-out 0.3s; opacity: 1; } .slick-active { opacity: 1; } .slick-current { opacity: 1; } .slick-center img { width: 400px!important; opacity: 1!important; } .slick-center { width: 400px; transition: 0.5s; } .slick-slide img { width: 200px; margin-left: auto; margin-right: auto; opacity: 0.25; transition: 0.5s; } .slider h3 { color:#616161; font-size: 12px; margin-top: -20px; transition: 0.5s;} .slick-center h3 { color:#f2f2f2; font-size: 24px; margin-top: 0px!important; } .core_productivity_title { font-size: 24px; color:#616161; margin-top: 90px; transition: 0.5s; } .slick-center .core_productivity_title { font-size: 48px; color:#f2f2f2; font-weight: 500; margin-top: 0px!important; } /* MODE AND GO / MODE AND MORE */ #row_7 { width: 100vw; z-index: 13; margin-top: -5px; height: 700px; background-color:#F7F7F7; background-image: url('images/mode_and_go_bkg_gold4.png'); background-size: cover; background-position: center center; } #mode_go_more { display: block; position: relative; width: 100vw; max-width: 1200px; margin-left: auto; margin-right: auto; text-align: center; } #mode_go_more_m { display: none; } #mode_and_go { margin-top: 80px; width:45%; float: left; margin-right: 5%; } #mode_and_go_header img { width: 100%; max-width: 400px; } #mode_and_go_image img { width: 90%; max-width: 400px; } #mode_and_more { margin-top: 80px; width: 45%; margin-left: 5%; float: left; } #mode_and_more_header img { width: 100%; max-width: 400px; } #mode_and_more_image img { width: 90%; max-width: 400px; } #mode_and_go_header { text-align: center; font-size: 54px; color:#616161; font-weight: 600; margin-bottom: 40px; } #mode_and_more_header { text-align: center; font-size: 54px; color:#f2f2f2; font-weight: 600; margin-bottom: 40px; } #row_7 > img { display: none; } } /* END NEW HOME STYLES SECTION */ /* BEGIN GENERAL STYLES - no media queries */ .modal_appear { display: block!important; } .modal_hide { display: none; } .intro_modal_hide { display: none!important; } #intro_modal_china, #china_modal_mask { animation-name: intro_modal_show; -webkit-animation-name: intro_modal_show; /* Safari 4.0 - 8.0 */ animation-duration: 8s; -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear;} /* Safari 4.0 - 8.0 */ @-webkit-keyframes intro_modal_show { 0% {left: -150%; } 99% {left: -150%; } 100% {left: 50%; } } /* Standard syntax */ @keyframes intro_modal_show { 0% {left: -150%; } 99% {left: -150%; } 100% {left: 50%; } } #china_modal_mask { width: 100%; height: 100%; background-color: rgba(0,0,0,0.75); position: fixed; top: 0; left: 0; z-index: 1000002; } #china_modal_link { color:#FFFFFF; } #modal_mask { display: none; width: 100%; height: 100%; background-color: rgba(0,0,0,0.75); position: fixed; top: 0; left: 0; z-index: 100002; } #modal_video_1, #modal_video_2, #modal_video_3 { width: 90%; max-width: 1024px; margin-left: auto; margin-right: auto; height: 56vh; display: none; position: fixed; top: 25vh; left: 50%; transform: translateX(-50%); padding: 15px 0px; z-index: 100003; transition: 0.5s; } #modal_video_1 iframe, #modal_video_2 iframe, #modal_video_3 iframe, #modal_video_1 object, #modal_video_2 object, #modal_video_3 object, #modal_video_1 embed, #modal_video_2 embed, #modal_video_3 embed { position:absolute; top:0; left:0; width:100%; height:100%; } .modal_close_link { display: block; width: 30px; height: 25px; position: absolute; right: -5; top: -20; background-color:#00b4dc; text-align: center; padding-top: 0px; padding-bottom: 4px; color:#f2f2f2; font-size: 20px; font-weight: 800; font-family: 'Source Sans Pro', Trebuchet, sans-serif; z-index: 1000; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes laser_left { 0% {right: 0%; width: 1vw; opacity: 0.0; } 5% {right: 0%; width: 50vw; opacity: 1.0; } 50% {right: 50%; width: 50vw; opacity: 1.0; } 100% {right: 99%; width: 1vw; opacity: 0.0; } } @-webkit-keyframes laser_right { 0% {left: 0%; width: 1vw; opacity: 0.0; } 25% {left: 0%; width: 50vw; opacity: 1.0; } 50% {left: 50%; width: 50vw; opacity: 1.0; } 100% {left: 99%; width: 1vw; opacity: 0.0; } } /* Standard syntax */ @keyframes laser_left { 0% {right: 0%; width: 1vw; opacity: 0.0; } 5% {right: 0%; width: 50vw; opacity: 1.0; } 50% {right: 50%; width: 50vw; opacity: 1.0; } 100% {right: 99%; width: 1vw; opacity: 0.0; } } @keyframes laser_right { 0% {left: 0%; width: 1vw; opacity: 0.0; } 25% {left: 0%; width: 50vw; opacity: 1.0; } 50% {left: 50%; width: 50vw; opacity: 1.0; } 100% {left: 99%; width: 1vw; opacity: 0.0; } } /* END NEW STYLES AS OF 052119 */ /* FONTS */ /* source-sans-pro-200 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 200; src: url('fonts/source-sans-pro-v11-latin-200.eot'); /* IE9 Compat Modes */ src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url('fonts/source-sans-pro-v11-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/source-sans-pro-v11-latin-200.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/source-sans-pro-v11-latin-200.woff') format('woff'), /* Modern Browsers */ url('fonts/source-sans-pro-v11-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/source-sans-pro-v11-latin-200.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* source-sans-pro-300 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; src: url('fonts/source-sans-pro-v11-latin-300.eot'); /* IE9 Compat Modes */ src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('fonts/source-sans-pro-v11-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/source-sans-pro-v11-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/source-sans-pro-v11-latin-300.woff') format('woff'), /* Modern Browsers */ url('fonts/source-sans-pro-v11-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/source-sans-pro-v11-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* source-sans-pro-regular - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: url('fonts/source-sans-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('fonts/source-sans-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/source-sans-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/source-sans-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */ url('fonts/source-sans-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/source-sans-pro-v11-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* source-sans-pro-600 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; src: url('fonts/source-sans-pro-v11-latin-600.eot'); /* IE9 Compat Modes */ src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url('fonts/source-sans-pro-v11-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/source-sans-pro-v11-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/source-sans-pro-v11-latin-600.woff') format('woff'), /* Modern Browsers */ url('fonts/source-sans-pro-v11-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/source-sans-pro-v11-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* source-sans-pro-700 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; src: url('fonts/source-sans-pro-v11-latin-700.eot'); /* IE9 Compat Modes */ src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('fonts/source-sans-pro-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/source-sans-pro-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/source-sans-pro-v11-latin-700.woff') format('woff'), /* Modern Browsers */ url('fonts/source-sans-pro-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/source-sans-pro-v11-latin-700.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* END FONTS */ .mobile_only_text { display: none; } .desktop_only_text { display: block; } #webinar_bt h3 { display: none!important; } #remote_workers_AO_switch, #video_voip_AO_switch, #multi_cloud_AO_switch, #site_to_site_AO_switch { position: relative; display: block; width: 100%; text-align: center; margin: 0px; padding: 0px; } #remote_workers_AO_slider, #video_voip_AO_slider, #multi_cloud_AO_slider, #site_to_site_AO_slider { position: relative; display: block; } #remote_workers_AO_lozenge, #video_voip_AO_lozenge, #multi_cloud_AO_lozenge, #site_to_site_AO_lozenge { margin: 0px auto; display: block; position: relative; text-align: left; width: 120px; height: 44px; padding: 0px; background-color:#000000; border-radius: 22px; z-index: 9999913;} #site_to_site_AO_circle { text-align: center; display: inline-block; position: relative; width: 36px; height: 36px; background-color:#00b4dc; border-radius: 18px; margin-top: 4px; margin-left: 79px; } #site_to_site_AO_circle img { width: 40px; margin-left: -1px; margin-top: -2px;} #remote_workers_AO_circle { text-align: center; display: inline-block; position: relative; width: 36px; height: 36px; background-color:#00b4dc; border-radius: 18px; margin-top: 4px; margin-left: 79px; } #remote_workers_AO_circle img { width: 40px; margin-left: -1px; margin-top: -2px;} #multi_cloud_AO_circle { text-align: center; display: inline-block; position: relative; width: 36px; height: 36px; background-color:#00b4dc; border-radius: 18px; margin-top: 4px; margin-left: 79px; } #multi_cloud_AO_circle img { width: 40px; margin-left: -1px; margin-top: -2px;} #video_voip_AO_circle { text-align: center; display: inline-block; position: relative; width: 36px; height: 36px; background-color:#00b4dc; border-radius: 18px; margin-top: 4px; margin-left: 79px; } #video_voip_AO_circle img { width: 40px; margin-left: -1px; margin-top: -2px;} @media only screen and (max-width: 768px) and (orientation: portrait) { .mobile_only_text { display: block; } .desktop_only_text { display: none; } } #contact_sales_form { position: relative; z-index: 999; } #contact_content form { text-align: left; } #contact_content h3, #contact_content h2 { position: relative; text-align: left; z-index: 9998; } #contact_sales_bkg { overflow: hidden; position: relative; background-color:#E7F1F4; width: 100vw; margin: 0px; padding: 0px; text-align: center; z-index:20;} #cloud_a { position: absolute; left: -50; top: 50vh; opacity: 0.75; z-index: 99; } #cloud_b { position: absolute; left: 70vw; top: 30vh; opacity: 0.75; z-index: 99; } #intro_content { width: 100vw; text-align: center; position: absolute; top:0; z-index: 14; } #contact_sales_bkg #cloud_1, #contact_sales_bkg #cloud_2, #contact_sales_bkg #cloud_3, #contact_sales_bkg #cloud_4, #contact_sales_bkg #cloud_5, #contact_sales_bkg #cloud_6, #contact_sales_bkg #cloud_7, #contact_sales_bkg #sigma_1, #contact_sales_bkg #sigma_3, #contact_sales_bkg #hex_2, #contact_sales_bkg #hex_3 { margin-top: -90px; margin-right: -30vw; animation-delay: 0s; } /* NEW RESOURCES LAYOUT STYLES */ @media screen and (max-width: 368px) { .listen_thumb { width: 170px!important; margin: 0px; padding: 0px; } .read_thumb { width: 170px!important; margin: 0px; padding: 0px; } .listen_prev, .listen_next, .read_prev, .read_next { width: 40px!important; margin: 0px -5px!important;} .watch_prev, .watch_next { width: 30px!important; margin: 0px;} .read_third { float: none; clear: both; background-color: rgba(255,255,255,0.5); padding: 5px; width: 98%!important; margin-top: 10px; margin-bottom: 10px; margin-left: auto; margin-right: auto; overflow: hidden; } .content_area { width: 98%!important; } .thumbs { padding: 0px -10px!important; margin: 0px -10px!important;} .watch_thumb { width: 200px!important; margin-bottom: 20px; } } @media screen and (max-width: 468px) { .watch_thumb { width: 200px!important; margin-bottom: 20px; } .listen_thumb, .read_thumb { width: 212px!important; margin: 0px; padding: 0px; } .listen_prev, .listen_next, .read_prev, .read_next { width: 50px!important; margin: 0px -5px!important;} .watch_prev, .watch_next { width: 30px!important; margin: 0px;} } @media screen and (max-width: 768px) { .map_mobile_show { display: block!important; } .map_mobile_hide { display: none!important; } .listen_thumb, .read_thumb { width: 240px; margin: 0px; padding: 0px; } .listen_prev, .listen_next, .read_prev, .read_next { width: 50px!important; margin: 0px -5px!important;} .watch_thumb { width: 400px; margin-bottom: 20px; } .watch_prev, .watch_next { width: 30px!important; margin: 0px;} #infosheets_thumbs, #whitepapers_thumbs, #infographics_thumbs, #infosheets_thumbs_2, #whitepapers_thumbs_2, #infographics_thumbs_2, #infosheets_thumbs_3, #whitepapers_thumbs_3, #infographics_thumbs_3, #podcasts_thumbs, #podcasts_2_thumbs, #podcasts_3_thumbs, #other_audio_thumbs, #other_audio_2_thumbs, #other_audio_3_thumbs, #webinars_thumbs, #videos_thumbs, #webinars_2_thumbs, #videos_2_thumbs, #webinars_3_thumbs, #videos_3_thumbs { display: none; } .read_plus { display: inline; float: right; margin-right: 10px; font-family: sans-serif; font-size: 48px; font-weight: bold; color:#d2cfd0; } .read_plus a { color: #00b4dc; } .read_minus a { color: #00b4dc; } .read_minus { display: inline; float: right; margin-right: 10px; font-family: sans-serif; font-size: 48px; font-weight: bold; color:#d2cfd0; margin-top: -5px; } .read_third { float: none; clear: both; background-color: rgba(255,255,255,0.5); padding: 10px 5px; width: 90%!important; margin-top: 10px; margin-bottom: 10px; margin-left: auto; margin-right: auto; overflow: hidden; } .read_third h2 { text-align: left!important; margin-top: 12px; text-transform: uppercase; font-weight: 500; font-size: 21px!important; margin-left: 10px; } .read_third h2:after { content: ""; display:none!important; } .listen_caption { background-color: #525252; padding: 5px; min-height: 60px; margin: 60px 30px 30px 0px; border-style: solid; border-width: 1px 1px 1px 0px; border-color: #666666; box-shadow: 3px 3px 4px #666666; } .listen_caption p:hover { color: #FFFFFF; } .listen_caption:hover { background-color:#00b4dc; color:#FFFFFF; } .listen_caption p { color:#FFFFFF; font-weight: 400; font-size: 21px; line-height: 27px; } .listen_half_center { float: none; background-color: rgba(255,255,255,0.5); width: 90%; padding: 10px 0px; margin: 10px; text-align: center; overflow: hidden; } .listen_half_center h2 { text-align: left!important; margin-top: 12px; text-transform: uppercase; font-weight: 500; font-size: 21px!important; margin-left: 10px; } .listen_half_center h2:after { content: ""; display:none!important; } .listen_half { float: none; background-color: rgba(255,255,255,0.5); width: 90%; padding: 10px 0px; margin: 10px; text-align: center; overflow: hidden; } .listen_half h2 { text-align: left!important; margin-top: 12px; text-transform: uppercase; font-weight: 500; font-size: 21px!important; margin-left: 10px; } .listen_half h2:after { content: ""; display:none!important; } .listen_plus { display: inline; float: right; margin-right: 10px; font-family: sans-serif; font-size: 48px; font-weight: bold; color:#d2cfd0; } .listen_plus a { color: #00b4dc; } .listen_minus a { color: #00b4dc; } .listen_minus { display: inline; float: right; margin-right: 10px; font-family: sans-serif; font-size: 48px; font-weight: bold; color:#d2cfd0; margin-top: -5px; } .watch_half { float: none; background-color: rgba(255,255,255,0.5); width: 90%; padding: 10px 0px; margin: 10px; text-align: center; overflow: hidden; } .watch_half h2 { text-align: left!important; margin-top: 12px; text-transform: uppercase; font-weight: 500; font-size: 21px!important; margin-left: 10px; } .watch_half h2:after { content: ""; display:none!important; } .watch_plus { display: inline; float: right; margin-right: 10px; font-family: sans-serif; font-size: 48px; font-weight: bold; color:#d2cfd0; } .watch_plus a { color: #00b4dc; } .watch_minus a { color: #00b4dc; } .watch_minus { display: inline; float: right; margin-right: 10px; font-family: sans-serif; font-size: 48px; font-weight: bold; color:#d2cfd0; margin-top: -5px; } } @media screen and (min-width: 769px) { .read_plus { display: none;} .read_minus { display: none;} .listen_plus { display: none;} .listen_minus { display: none;} .watch_plus { display: none;} .watch_minus { display: none;} } @media screen and (min-width: 769px) and (max-width: 890px) { .thumbs { padding: 0px -10px!important; margin: 0px -10px!important;} .listen_thumb, .read_thumb { width: 180px!important; margin: 0px; padding: 0px; } .watch_thumb { width: 250px!important; margin: 0px; padding: 0px; } .listen_prev, .listen_next, .read_prev, .read_next { width: 30px!important; margin: 0px -5px!important;} .watch_prev, .watch_next { width: 30px!important; margin: 0px;} } @media screen and (min-width: 891px) and (max-width: 1024px) { .thumbs { padding: 0px -10px!important; margin: 0px -10px!important;} .watch_thumb { width: 300px!important; margin: 0px; padding: 0px; } .listen_thumb, .read_thumb { width: 220px!important; margin: 0px; padding: 0px; } .listen_prev, .listen_next, .read_prev, .read_next { width: 40px!important; margin: 0px -5px!important;} .watch_prev, .watch_next { width: 40px!important; margin: 0px;} } @media screen and (min-width: 769px) and (max-width: 1024px) { .read_third { float: left; background-color: rgba(255,255,255,0.5); width: 29%; padding: 10px 5px; margin: 10px; text-align: center; } .read_third h2 { text-align: center; margin-top: 12px; font-size: 24px!important; } .read_third h2:after { content: ""; display: block; margin: 0px auto; width: 60px; padding-top: 6px; border-bottom: 2px solid #00b4dc; } .print_caption { background-color: #525252; padding: 5px; height: 90px; margin: 100px 20px 50px 0px; border-style: solid; border-width: 1px 1px 1px 0px; border-color: #666666; box-shadow: 3px 3px 4px #666666; } .print_caption p:hover { color: #FFFFFF; } .print_caption:hover { background-color:#00b4dc; color:#FFFFFF; } .print_caption p { color:#FFFFFF; font-weight: 400; font-size: 21px; line-height: 27px; } .listen_caption { background-color: #525252; padding: 5px; min-height: 60px; margin: 90px 60px 60px 0px; border-style: solid; border-width: 1px 1px 1px 0px; border-color: #666666; box-shadow: 3px 3px 4px #666666; } .listen_caption p:hover { color: #FFFFFF; } .listen_caption:hover { background-color:#00b4dc; color:#FFFFFF; } .listen_caption p { color:#FFFFFF; font-weight: 400; font-size: 21px; line-height: 27px; } .listen_half { float: left; background-color: rgba(255,255,255,0.5); width: 47%; padding: 10px 0px; margin: 10px; text-align: center; } .listen_half h2 { text-align: center; margin-top: 12px; font-size: 36px; } .listen_half h2:after { content: ""; display: block; margin: 0px auto; width: 60px; padding-top: 20px; border-bottom: 2px solid #00b4dc; } .listen_half_center { margin-left:auto; margin-right: auto; background-color: rgba(255,255,255,0.5); width: 50%; max-width: 500px; padding: 10px 0px; text-align: center; overflow: hidden;} .listen_half_center h2 { text-align: center; margin-top: 12px; font-size: 36px; } .listen_half_center h2:after { content: ""; display: block; margin: 0px auto; width: 60px; padding-top: 20px; border-bottom: 2px solid #00b4dc; } .watch_half { float: left; background-color: rgba(255,255,255,0.5); width: 47%; padding: 10px 0px; margin: 10px; text-align: center; } .watch_half h2 { text-align: center; margin-top: 12px; font-size: 36px; } .watch_half h2:after { content: ""; display: block; margin: 0px auto; width: 60px; padding-top: 20px; border-bottom: 2px solid #00b4dc; } } @media only screen and (min-width: 1201px) { .watch_thumb { width: 400px; margin-bottom: 20px; } .watch_prev, .watch_next { width: 50px!important; margin: 0px;} .watch_half { float: left; background-color: rgba(255,255,255,0.5); width: 48%; padding: 10px 0px; margin: 10px; text-align: center; } } @media only screen and (min-width: 1025px) and (max-width: 1200px) { .watch_thumb { width: 300px; margin-bottom: 20px; } .watch_prev, .watch_next { width: 40px!important; margin: 0px;} .watch_half { float: left; background-color: rgba(255,255,255,0.5); width: 47%!important; padding: 10px 0px; margin: 10px; text-align: center; } } @media screen and (min-width: 1025px) { .listen_thumb, .read_thumb { width: 220px!important; margin: 0px; padding: 0px; } .listen_prev, .listen_next { width: 50px!important; margin: 0px -5px!important;} .read_prev, .read_next { width: 40px!important; margin: 0px -5px!important;} .watch_prev, .watch_next { width: 40px!important; margin: 0px;} .read_third { float: left; background-color: rgba(255,255,255,0.5); width: 30%; padding: 10px 0px; margin: 10px; text-align: center; } .read_third h2 { text-align: center; margin-top: 12px; font-size: 36px; } .read_third h2:after { content: ""; display: block; margin: 0px auto; width: 60px; padding-top: 20px; border-bottom: 2px solid #00b4dc; } .print_caption { background-color: #525252; padding: 5px; height: 90px; margin: 180px 20px 50px 0px; border-style: solid; border-width: 1px 1px 1px 0px; border-color: #666666; box-shadow: 3px 3px 4px #666666; } .print_caption p:hover { color: #FFFFFF; } .print_caption:hover { background-color:#00b4dc; color:#FFFFFF; } .print_caption p { color:#FFFFFF; font-weight: 400; font-size: 21px; line-height: 27px; } .listen_caption { background-color: #525252; padding: 5px; min-height: 60px; margin: 90px 60px 60px 0px; border-style: solid; border-width: 1px 1px 1px 0px; border-color: #666666; box-shadow: 3px 3px 4px #666666; } .listen_caption p:hover { color: #FFFFFF; } .listen_caption:hover { background-color:#00b4dc; color:#FFFFFF; } .listen_caption p { color:#FFFFFF; font-weight: 400; font-size: 21px; line-height: 27px; } .listen_half { float: left; background-color: rgba(255,255,255,0.5); width: 48%; padding: 10px 0px; margin: 10px; text-align: center; } .listen_half h2 { text-align: center; margin-top: 12px; font-size: 36px; } .listen_half h2:after { content: ""; display: block; margin: 0px auto; width: 60px; padding-top: 20px; border-bottom: 2px solid #00b4dc; } .listen_half_center { margin-left: auto; margin-right: auto; background-color: rgba(255,255,255,0.5); width: 50%; max-width: 550px; padding: 10px 0px; text-align: center; overflow: hidden; } .listen_half_center h2 { text-align: center; margin-top: 12px; font-size: 36px; } .listen_half_center h2:after { content: ""; display: block; margin: 0px auto; width: 60px; padding-top: 20px; border-bottom: 2px solid #00b4dc; } .watch_half { float: left; background-color: rgba(255,255,255,0.5); width: 48%; padding: 10px 0px; margin: 10px; text-align: center; } .watch_half h2 { text-align: center; margin-top: 12px; font-size: 36px; } .watch_half h2:after { content: ""; display: block; margin: 0px auto; width: 60px; padding-top: 20px; border-bottom: 2px solid #00b4dc; } } @media screen and (max-width: 368px) { #sub_nav_content a { margin: 0px 5px!important; } .watch_thumb { width: 200px; margin-bottom: 20px; } } .read_columns, .watch_columns { min-height: 50vh; } #read_toggle_content { padding: 0px!important; } #read_toggle_content p { text-align: center; text-transform: uppercase; font-size: 18px; margin: 0px;} #watch_toggle_content { padding: 0px!important; } #watch_toggle_content p { text-align: center; text-transform: uppercase; font-size: 18px; margin: 0px;} #listen_toggle_content { padding: 0px!important; } #listen_toggle_content p { text-align: center; text-transform: uppercase; font-size: 18px; margin: 0px;} #read_toggle_content a, #watch_toggle_content a, #listen_toggle_content a { margin: 0px 20px; } .box { margin: 0px 5px 0px 20px; } #sub_nav_content { padding: 0px!important; } #sub_nav_content p { text-align: center; text-transform: uppercase; font-size: 18px; margin: 0px;} #sub_nav_content a { margin: 0px 10px; } /* END NEW RESOURCES LAYOUT STYLES */ .padded { margin-left: 20px!important; margin-right: 20px!important; } /* STYLE FOR ANNOUNCEMENT */ .announcement_fade { bottom: -50vh!important; transition: 0.75s; } .float_appear { opacity: 1!important; transition: 0.5s; } #announcement { display: block; position: fixed; bottom: 0vh; left: 0vw; width: 100vw; z-index: 1000000!important; background-color:#000000; background-size: cover; padding: 0px 30px; box-shadow: 0px -3px 12px #231f20; transition: 0.5s; } #announcement_content { text-align: center; width: 90%; max-width: 1100px; margin-left: auto; margin-right: auto; padding-right: 40px; } #announcement_content p { color:#FFFFFF; font-weight: 600; font-size: 21px; line-height: 27px; margin: 20px 30px 40px 30px; } #announcement_close { float: right; display: block; padding: 0px; width: 36px; height: 36px; } #announcement_close img { width:36px; height: 36px; position: relative; bottom: 40px; right: 30px; } sup { font-size: 10px; } h2 sup { font-size: 16px; font-weight: 500; padding-top: -25px; } .home_title { text-align: left; margin-top: 25vh; width: 40%; margin-left: 60%; } .home_sub_head { font-size: 36px; font-weight: 300; line-height: 48px; text-align: center; padding: 0px 60px; color:#231f20; } .home_blurb { font-size: 24px; font-weight: 300; line-height: 32px; width: 40%; margin-left: 60%; text-align: left; } .home_blurb_center { display: block; font-size: 24px; font-weight: 300; line-height: 32px; text-align: center; color: #231f20; margin-top: 60px; margin-bottom: 10px; } .news_float_left { background-color:#000000; background-image: linear-gradient(to right, #333333, #000000); border-style: solid; border-width: 0px 1px 0px 0px; border-color:#FFFFFF; padding: 40px; width: 125%; margin-left: -50%; text-align: left; margin-bottom: 40px; margin-top: 40px; } .news_float_right { background-color:#000000; background-image: linear-gradient(to left, #333333, #000000); border-style: solid; border-width: 0px 0px 0px 1px; border-color:#FFFFFF; padding: 40px; width: 150%; margin-right: -75%; text-align: left; margin-left: 15%; margin-top: 90px; margin-bottom: 40px; } .section h1:after { content: ""; display: none; margin: 0px; width: 60px; padding-top: 20px; border-bottom: 2px solid #00b4dc; } .news_quote { text-align: left; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 24px; line-height: 32px; font-weight: 300; font-style: italic; } .podcast_quote { text-align: left; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 24px; line-height: 32px; font-weight: 300; font-style: italic; width:90%; max-width: 750px; } .podcast_quote_logo { float: right; max-width: 180px; margin-right: 30px; } .podcast_attribution { font-size: 12px; line-height: 15px; margin: 0px; } #about_section_1_content sup { line-height: 1px!important; } .quote { text-align: left; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 24px; line-height: 36px; font-weight: 400; font-style: italic; width: 90%; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; color:#525252; } #home_cta_1 { width: 100%; min-height: 240px; background-image: url('images/menu_bkg_min.png'); background-size: cover; background-position: center center; margin: 0px; padding: 150px 0px; } #home_cta_1_content p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 36px; font-weight: 500; color:#FFFFFF; line-height: 42px; text-align: center; margin-bottom: 20px!important;} #hex_globe { float: right; max-width: 240px; padding-left: 60px; margin-right: 60px; margin-top: -10px; } #product_section_1_content h2 { margin-top: 0px!important; } #promo { float: none; width: 100%; margin: 0px 0px 30px 0px; } #product_intro { margin-top: -60px; } #blue_bar { background-color:#00b4dc; clear: both; width: 100%; margin: 0px; padding:0px; display: block; height: 1px; margin-bottom:0px; } #policy li { font-family: 'Source Sans Pro', Trebuchet, sans-serif; max-width: 100%; min-width: 60vw; list-style-type: disc; margin: 5px 0px 10px 0px; font-size: 18px; line-height: 30px; overflow-wrap: break-word; word-wrap: break-word; } #policy li li { list-style-type: circle; } #policy p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; margin-bottom: 0px; line-height: 30px; overflow-wrap: break-word; word-wrap: break-word; } #policy ul { font-family: 'Source Sans Pro', Trebuchet, sans-serif; margin-top: 0px; max-width: 100%; } #policy h2 { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 32px; font-weight: 600; margin: 20px 0px 10px 0px; } #policy h3 { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 25px; color:#525252; font-weight: 600; margin: 20px 0px 10px 0px; } #policy h4 { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 600; font-size: 22px; line-height: 27px; color:#7f7f7f; } #policy a { color:#00b4dc; } #news_section_1_content h3 { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 24px; line-height: 36px; margin-left: 20px; } #news_section_1_content p { margin-top: -20px; } #news_section_1_content a { color:#00b4dc; } #news_section_1_content hr { float:none; clear: both; border:0; margin:0; height:1px; background:#d2cfd0; width: 100%; margin: 20px 0px; } #careers_equation { width: 100%; max-width:600px!important; float: right; margin-top: 40px; margin-left: 40px; } #careers_BI_logo { width: 90%; max-width:400px!important; float: right; margin-top: -90px; margin-left: 40px; } #careers_section_1_content p { margin-top: -30px; } #about_section_2_content h2 { margin-left: 0px!important; } #about_section_3_content h3 { margin-left: 0px!important; } #about_section_3_content h2 { margin-left: 0px!important; } #top_of_page { height: 1px; visibility: hidden; background-color:#000000; margin-top: -1px; } #floating_back_to_top { display: inline-block; -webkit-transform: translateZ(0); position: fixed; right: 20px; bottom: 24px; width: 41px; text-align: right; z-index: 1000000!important; } #branding { float: left; width:60%; text-align: center; min-width: 240px; } #get_mode { float: right; width: 20%; text-align: right; min-width: 70px; padding-top: 9px; } #get_mode_button { width: 48px; height: 48px; margin: 6px 10px 0px 0px; padding: 0px; float: right; } #core_menu, #math_menu, #company_menu, #resources_menu { display: block; } #menu_col_1 { border-style: solid; border-width: 0px 1px 0px 0px; border-color:#525252; } #menu_col_2 { border-style: solid; border-width: 0px 1px 0px 1px; border-color:#525252; } #nav_icon { float: left; width: 20%; text-align: left; min-width: 70px; display: block; } #twitter_link { float: none; width: 36px; height: 36px; background-image: url('images/twitter_icon.gif'); background-size: cover; background-position: center center; } #twitter_link:hover { background-image: url('images/twitter_icon_ov.gif'); } #facebook_link { float: none; width: 36px; height: 36px; background-image: url('images/facebook_icon.gif'); background-size: cover; background-position: center center; margin-top: 18px; } #facebook_link:hover { background-image: url('images/facebook_icon_ov.gif'); } #linkedin_link { float: none; width: 36px; height: 36px; background-image: url('images/linkedin_icon.gif'); background-size: cover; background-position: center center; margin-top: 9px; } #linkedin_link:hover { background-image: url('images/linkedin_icon_ov.gif'); } #twitter_link_m { width: 30px; height: 30px; margin-top: 12px; margin-right: 5px; background-image: url('images/twitter_icon.gif'); background-size: cover; background-position: center center; float: left; } #twitter_link_m:hover { background-image: url('images/twitter_icon_ov.gif'); } #facebook_link_m { width: 30px; height: 30px; margin-top: 12px; background-image: url('images/facebook_icon.gif'); background-size: cover; background-position: center center; float: left; } #facebook_link_m:hover { background-image: url('images/facebook_icon_ov.gif'); } #linkedin_link_m { width: 30px; height: 30px; margin-top: 12px; background-image: url('images/linkedin_icon.gif'); background-size: cover; background-position: center center; float: left; } #linkedin_link_m:hover { background-image: url('images/linkedin_icon_ov.gif'); } #header_img { margin-top: 20px; height: 200px; } #lp_header_img { margin-top: 20px; height: 300px; } #footer_cta { background-size: cover; background-position: center center; } #footer_cta_content { text-align: center; margin-top: 0px; margin-bottom: 40px; } #footer_cta_content p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; color:#FFFFFF; font-size: 24px; line-height: 42px; text-align: center; } #copyright { background-color:#000000; margin: 0px 0px -20px 0px; height: 40px; padding: 10px 0px 20px 0px; font-weight: 400; position: relative; z-index: 20; } #copyright_content p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; color:#8e8e8d; font-size: 12px; line-height: 24px; text-align: center; } #bw_googleMap { width: 100%; max-width:700px; min-width: 240px; margin-bottom: 40px; border-style: solid; border-width: 1px; border-color:#525252;} #contact_section_1_content a { color:#00b4dc; } #mode_core_symbol { float: right; width: 100%; max-width: 280px; min-width: 240px; margin-top: -20px; padding-left: 60px; } #highest_perf_mode_core_symbol { float: right; width: 100%; max-width: 180px; min-width: 120px; margin-top: -20px; padding-left: 60px; } #product_features_content h2:after { content: ""; display: none; } #product_cta_row { width: 100%; background-image: url('images/product_CTA_bkg_3.jpg'); background-size: cover; background-position: center center; margin: 0px; padding: 30px 0px; } .product_cta_row_left { width: 75%; float: left; min-width: 240px; } .product_cta_row_right { width: 20%; float: left; min-width: 200px; text-align: center; padding-top: 24px; } .text_center { text-align: center; } body { margin: 0px; padding: 0px; width: 100vw; height: 100vh; overflow-x: hidden; background-color:#000000; } p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 300; font-size: 18px; line-height: 30px; margin: 15px 0px; } .small { font-size: 14px; line-height: 24px; } li { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 300; font-size: 18px; line-height: 30px; margin: 15px 20px; } h1 { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 48px; line-height: 60px; text-align: left; font-weight: 300; margin-top: -54px; } h1:after { content: ""; display: block; margin: 0px; width: 60px; padding-top: 20px; border-bottom: 2px solid #00b4dc; } h2:after { content: ""; display: block; margin: 0px; width: 60px; padding-top: 20px; border-bottom: 2px solid #00b4dc; } h3 { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 400; font-size: 24px; line-height: 32px; color:#525252; } a { font-family: 'Source Sans Pro', Trebuchet, sans-serif; text-decoration: none; font-weight: 600; color:#FFFFFF; } a { text-decoration: none!important; } input[type=text] { border-style: solid; border-width: 0px; padding: 10px 20px; width: 100%; max-width: 525px; margin-top: 10px!important; } input[type=email] { border-style: solid; border-width: 0px;padding: 10px 20px; width: 100%; max-width: 525px; margin-top: 10px!important; } input[type=submit] { background-image:url('images/submit_plus.png'); background-size: cover; background-position: center center; border: 0; display: block; height: 38px; width: 122px; border-radius: 0px; } input[type=submit]:hover { cursor: pointer; background-image:url('images/submit_plus_ov.png'); background-size: cover; background-position: center center; border: 0; display: block; height: 38px; width: 122px; border-radius: 0px; } .story_nav_glyph_plus { display: inline-block; width: 45px; height: 45px; background-image: url('images/story_nav_plus_on.gif'); background-size: cover; background-position: center center; } .story_nav_glyph_minus { display: inline-block; width: 45px; height: 45px; background-image: url('images/story_nav_minus_on.gif'); background-size: cover; background-position: center center; } .story_nav_glyph_plus_off { display: inline-block; width: 45px; height: 45px; background-image: url('images/story_nav_plus.gif'); background-size: cover; background-position: center center; } .story_nav_glyph_minus_off { display: inline-block; width: 45px; height: 45px; background-image: url('images/story_nav_minus.gif'); background-size: cover; background-position: center center; } .story_nav_glyph_minus:hover, .story_nav_glyph_plus:hover { cursor: pointer; } .story_nav_hex { display: inline-block; width: 30px; height: 45px; background-image: url('images/story_nav_hex.gif'); background-size: cover; background-position: center center; } .story_nav_hex:hover { display: inline-block; width: 30px; height: 45px; background-image: url('images/story_nav_hex_on.gif'); background-size: cover; background-position: center center; } .story_nav_hex_on { display: inline-block; width: 30px; height: 45px; background-image: url('images/story_nav_hex_on.gif'); background-size: cover; background-position: center center; } .story_nav_hex_group { margin-left: 30px; margin-right: 30px; } .story_nav_top_glyph_plus { display: inline-block; width: 45px; height: 20px; background-image: url('images/story_nav_plus_on.gif'); background-size: cover; background-position: center center; } .story_nav_top_glyph_minus { display: inline-block; width: 45px; height: 20px; background-image: url('images/story_nav_minus_on.gif'); background-size: cover; background-position: center center; } .story_nav_top_glyph_plus_off { display: inline-block; width: 45px; height: 20px; background-image: url('images/story_nav_top_plus.gif'); background-size: cover; background-position: center center; } .story_nav_top_glyph_minus_off { display: inline-block; width: 45px; height: 20px; background-image: url('images/story_nav_top_minus.gif'); background-size: cover; background-position: center center; } .story_nav_top_glyph_minus:hover, .story_nav_glyph_plus:hover { cursor: pointer; } .story_nav_top_hex { display: inline-block; width: 30px; height: 20px; background-image: url('images/story_nav_top_hex.gif'); background-size: cover; background-position: center center; } .story_nav_top_hex:hover { display: inline-block; width: 30px; height: 20px; background-image: url('images/story_nav_top_hex_on.gif'); background-size: cover; background-position: center center; } .story_nav_top_hex_on { display: inline-block; width: 30px; height: 20px; background-image: url('images/story_nav_top_hex_on.gif'); background-size: cover; background-position: center center; } .story_nav_top_hex_group { margin-left: 30px; margin-right: 30px; } .features_row .copy_third { width: 30%; border-style: solid; border-width: 1px 0px 0px 0px; border-color:#7f7f7f; margin-right: 12px; } .page_end_CTA { float: right; width:210px; margin-top: -20px; } .end_call_out { color: #FFFFFF; font-weight: 600; font-size: 24px!important; line-height: 36px!important; margin: 0px; } .figure_half_center { text-align: center; width: 100%; max-width: 700px; min-width: 280px; margin-left: auto; margin-right: auto; } .figure_half_center img { margin-left: auto; margin-right: auto; width: 100%; max-width: 700px; min-width: 280px; } .figure_half_center_vert { text-align: center; width: 100%; max-width: 700px; min-width: 280px; margin-left: auto; margin-right: auto; } .figure_half_center_vert img { margin-left: auto; margin-right: auto; width: 100%; max-width: 450px; min-width: 240px; } .features_row { width: 100%; margin: 0px; padding: 0px; clear: both; float: none; } .news_img { width: 240px; float: left; padding: 0px 20px 30px 0px; } .get_mode_title { font-size: 36px!important; line-height: 42px!important; font-weight: 300; margin-bottom: -20px; } .get_mode_img { float: right; width: 50%; max-width: 260px; min-width: 260px; margin-top: -90px; margin-right: 180px; } .hire-jobs { margin-top: 20px!important; margin-left: -72px; } .blog_content a { color:#00b4dc; } .social_share { font-family: 'Source Sans Pro', sans-serif; color: #525252; font-size: 15px; text-transform: uppercase; } .social_share img { width: 32px; margin: 0px 5px -10px 5px; } .blog_author { color:#525252; font-size: 15px; } .blog_nav_prev { text-align: left; } .blog_nav_all { text-align: center; } .blog_nav_next { text-align: right; } .blog_nav_third { width: 33%; float: left; } .blog_nav_third a { color:#00b4dc; font-family: 'Source Sans Pro', sans-serif; text-transform: uppercase; line-height: 36px; } .blog_nav_glyph { color: #d6d6d6; font-weight: 600; font-size: 36px; margin: 0px 10px; } .blog_nav_glyph a { color: #00b4dc; } .blog_article_img { width: 100%; max-width: 600px; float: right; margin-top: 10px; margin-left: 20px; margin-right: 40px; } .blog_excerpt { width: 100%; max-width: 700px; min-width: 240px; } .blog_excerpt p { margin: 20px; } .blog_excerpt a { color:#00b4dc; } .blog_excerpt h3 { margin: 0px 20px; font-weight: 400; } .blog_full a { color:#00b4dc; } .blog_full p { margin: 20px; } .blog_row {float: none; clear; both;} .blog_plus_link { display: inline-block; font-family: 'Source Sans Pro', sans-serif; font-size: 20px; font-weight: 200; color:#FFFFFF!important; padding: 12px 12px; background-color:#00b4dc; margin-bottom: 20px; margin-left: 20px; } .blog_minus_link { display: inline-block; font-family: 'Source Sans Pro', sans-serif; font-size: 21px; font-weight: 200; color:#FFFFFF!important; padding: 11px 13px; background-color:#00b4dc; margin-bottom: 20px; margin-left: 20px; } .exec_bio { float: left; width: 30%; min-width: 240px; margin: 15px 30px 15px 0px; padding: 0px; } .exec_photo { width: 100%; padding: 0px; } .exec_bio img { max-width: 300px; } .bod_logo { float: right; height: 80px; margin-right: 20px; margin-top: 0px; } .about_float_right { width: 360px; float: right; margin-top: -160px; margin-left: 40px; } .slider_nav_hex { font-size: 18px; line-height: 21px; color:#d6d6d6; margin: 0px 9px; } .slider_nav_hex a { color:#d6d6d6; } .slider_nav_hex:hover { font-size: 18px; line-height: 21px; color:#00b4dc; margin: 0px 9px; } .mySlides { transition: 1.0s; background-color:#f2f2f2; } .mySlides h2 { font-size: 36px; color:#525252; text-align: center!important; width: 90%; padding-right: 5px; margin-left: auto; margin-right: auto; } .mySlides h2:after { margin: 0px auto; } .mySlides img { width: 90%; max-width: 1050px; margin-left: auto; margin-right: auto; margin-top: -30px; } .w3-animate-opacity { animation: opac 1.5s; } @keyframes opac { from{opacity:0} to{opacity:1} } .demo { transition: 0.5s; } .nav_hex { width: 24px!important; } .slider_nav { width: 100%; text-align: center; padding-top: 15px; margin-bottom: -30px; } .slider_label { width: 100%; text-align: center; margin-top: -20px; } .slider_button { width: 100%; text-align: center; margin-top: -10px; } .home_content_area { display: block; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; margin-top: 10vh; } .home_left_image { float: left; width: 40%; max-width: 400px; min-width: 200px; text-align: left; } .home_left_image img { max-width: 350px; } .home_right_text { float: left; width: 60%; max-width: 800px; min-width: 240px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 18px; line-height: 24px; text-align: left; } .home_left_text { float: left; width: 60%; max-width: 800px; min-width: 240px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 18px; line-height: 24px; text-align: left; } .home_right_image { float: left; width: 40%; max-width: 400px; min-width: 200px; text-align: right; } .home_right_image img { max-width: 350px; } .two_products_half { float: left; width: 50%; max-width: 600px; min-width: 240px; text-align: center; } .mini_diagram { width: 100%; max-width: 495px; } .home_plus_link { display: inline-block; font-family: 'Source Sans Pro', sans-serif; font-size: 32px; font-weight: 400; color:#FFFFFF!important; padding: 8px 12px; background-color:#00b4dc; margin-top: 20px; margin-bottom: 20px; } .end_call_out p { padding-bottom: 30px!important; } .content_link { color:#00b4dc!important; } .on_dark { color:#F2F2F2; } .on_light { color:#231F20; } .on_light_fade { color:#7f7f7f; } .up_arrow { font-size: 36px; line-height: 36px; font-weight: 700; color:#FFFFFF; background-color:#525252; padding: 7px 12px 0px 11px; width: 18px; float: right; } .up_arrow:hover { background-color:#00b4dc; color: #FFFFFF; } .responsive_row { display: block; clear: both; width: 100%; margin: 0px; padding: 20px 0px; display: block; } .responsive_row_noPadding { display: block; clear: both; width: 100%; margin: 0px; padding: 0px; display: block; } .responsive_row_top_nav { display: block; clear: both; width: 100%; margin: 0px 0px -20px 0px; padding: 1px 0px 10px 0px; display: block; } .dark_bkg { background-color:#231F20; } .grey_bkg { background-color:#525252; } .white_bkg { background-color:#FFFFFF; } .light_bkg { background-color:#F2F2F2; } .clearfix:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; margin: 0px; padding: 0px; } .content_area { display: block; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } .content_area p { padding: 0px; } .content_area h1 { padding: 0px 0px; } .half_col { display: block; width: 45%; float: left; max-width: 600px; padding: 10px; } .third_col { display: block; width: 30%; float: left; min-width: 300px; padding: 0px 20px 20px 0px; } .figure_full { text-align: center; width: 100%; max-width: 1050px; min-width: 240px; margin-left:auto; margin-right: auto; } .figure_full img { text-align: center; width: 100%; max-width: 1050px; min-width: 240px; } .caption_link a { font-family: 'Source Sans Pro', Trebuchet, sans-serif; color: #00b4dc; text-align: center; margin: 20px; font-size: 14px; line-height: 27px; font-weight: 600; } .caption_on_light { font-family: 'Source Sans Pro', Trebuchet, sans-serif; color: #525252; text-align: left; margin: 20px; font-size: 12px; font-weight: 400; text-transform: uppercase; border-style: solid; border-color: #7f7f7f; border-width: 0.5px 0px 0px 0px; padding-top: 6px; } .caption_on_dark { font-family: 'Source Sans Pro', Trebuchet, sans-serif;color: #D2CFD0; text-align: left; margin: 20px; font-size: 12px; text-transform: uppercase; font-weight: 400; border-style: solid; border-color: #7f7f7f; border-width: 0.5px 0px 0px 0px; padding-top: 6px; } .figure_half_center { text-align: center; width: 100%; max-width: 700px; min-width: 280px; margin-left: auto; margin-right: auto; } .figure_half_center img { margin-left: auto; margin-right: auto; width: 100%; max-width: 700px; min-width: 280px; } .mega_menu_content_area, .mobile_menu_content_area, .header_content_area, .footer_content_area, .copyright_content_area { display: block; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } .menu_section { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 18px; color:#D2CFD0; text-transform: uppercase; font-weight: 400!important; margin-left: 0px; } .menu_sub_section, .menu_item { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 18px; line-height: 24px; font-weight: 400!important; } .menu_sub_section { margin-left: 0px; color:#D2CFD0; } .menu_item { margin-left: 6px; color:#FFFFFF; margin-top: 6px;} .menu_item_grey { margin-left: 6px; color:#D2CFD0; font-weight: 400; font-size: 18px; margin-top: 6px; } .menu_sub_item { margin-left: 40px; } .menu_sub_item:before { content: "-"; margin-right: 5px; color:#FFFFFF; } .menu_section:after { content: ""; display: block; margin: 0px; width: 120px; padding-top: 10px; border-bottom: 1px solid #00b4dc; margin-left: 0px; } .menu_column { float: left; width: 20%; padding-left: 42px; } .nav_icon { cursor: pointer; z-index: 999999; } .bar1 { width: 6px; height: 26px; background-color: #FFF; margin-left: 22px; margin-top: 26px; transition: 0.5s; z-index: 99999; } .bar2 { width: 26px; height: 6px; background-color: #FFF; margin-top: -16px; margin-left: 12px; transition: 0.5s; z-index:99999; } .change .bar1 { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2 { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .page_title, .page_title_long, .lp_page_title { height: 100%; } .lp_page_title p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 60px; line-height: 72px; font-weight: 200; padding-top: 100px; margin-bottom: 0px; color:#FFFFFF; text-align: center; } .page_title p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 60px; line-height: 72px; font-weight: 200; padding-top: 60px; margin-bottom: 0px; color:#FFFFFF; text-align: center; } .page_title_long p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 54px; line-height: 62px; font-weight: 200; padding-top: 50px; margin-bottom: 0px; color:#FFFFFF; text-align: center; } .page_title:after, .page_title_long:after, .lp_page_title:after { content: ""; display: block; margin-left: auto; margin-right: auto; width: 60px; padding-top: 20px; border-bottom: 2px solid #00b4dc; } .landing_page_title { height: 100%; padding: 0px; margin: 0px auto; text-align:center; } .landing_page_title p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 27px; line-height: 36px; font-weight: 200; padding-top: 0px; margin-bottom: 0px; color:#FFFFFF; text-align: center; } .landing_page_logo { width: 90%; max-width: 200px; margin: 0px auto; } .cta_bold { font-weight: 600; } .collateral_third { float: left; width: 33%; min-width: 280px; max-width: 370px; padding: 0px; } .collateral_third p { text-align: center!important; font-size: 21px!important; font-weight: 600; line-height: 32px; } .collateral_third img { width: 100%; max-width: 210px; } .collateral_third .fa-external-link-alt { color:#00B4DC!important; } .collateral_third a { color:#00b4dc!important; } .onDark a { color:#FFFFFF!important; } .onDark a:hover { color:#000000!important; } .onLight a { color:#000000!important; } .onLight a:hover { color:#FFFFFF!important; } .arrow_button_gold { display: inline; padding: 10px; background-color:#fdb51b; background-color:#fdb51b; } .arrow_button_red { display: inline; padding: 10px; background-color:#ad1e1e; background-color:#ad1e1e; } .arrow_button_grey { display: inline; padding: 10px; background-color:#b3b3b3; background-color:#b3b3b3; } .arrow_button_black { display: inline; padding: 10px; background-color:#000000; background-color:#000000; } .plus { position: relative; top: 2px; text-align: center; color:#000000; font-family: 'Source Sans Pro', sans-serif; border-style: solid; padding: 2px 15px 9px 5px; border-color:#FFFFFF; border-width: 0px 1px 0px 0px; font-size: 24px; } .arrow_button_gold .plus { position: relative; top: 2px; text-align: center; color:#ad1e1e; font-family: 'Source Sans Pro', sans-serif; border-style: solid; padding: 2px 15px 9px 5px; border-color:#000000; border-width: 0px 1px 0px 0px; font-size: 24px; } .arrow_button_red .plus { position: relative; top: 2px; text-align: center; color:#FFFFFF; font-family: 'Source Sans Pro', sans-serif; border-style: solid; padding: 2px 15px 9px 5px; border-color:#fdb51b; border-width: 0px 1px 0px 0px; font-size: 24px; } .arrow_button_grey .plus { position: relative; top: 2px; text-align: center; color:#FFFFFF; font-family: 'Source Sans Pro', sans-serif; border-style: solid; padding: 2px 15px 9px 5px; border-color:#FFFFFF; border-width: 0px 1px 0px 0px; font-size: 24px; } .plus_on_grey { position: relative; top: 2px; text-align: center; color:#000000; font-family: 'Source Sans Pro', sans-serif; border-style: solid; padding: 2px 15px 9px 5px; border-color:#525252; border-width: 0px 1px 0px 0px; font-size: 24px; } .plus_on_black { position: relative; top: 2px; text-align: center; color:#000000; font-family: 'Source Sans Pro', sans-serif; border-style: solid; padding: 2px 15px 9px 5px; border-color:#000000; border-width: 0px 1px 0px 0px; font-size: 24px; } .plus_on_blue { position: relative; top: 2px; text-align: center; color:#FFFFFF; font-family: 'Source Sans Pro', sans-serif; border-style: solid; padding: 2px 15px 9px 5px; border-color:#004a5c; border-width: 0px 1px 0px 0px; font-size: 24px; } .plus_on_blue:hover { color:#000000; } .link_on_blue { color:#FFFFFF; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; padding: 1px 5px 18px 15px; text-align: center; } .link_on_blue:hover { color:#000000; } .product_cta_row_right .product_CTA_plus { color: #FFFFFF; position: relative; top: 2px; text-align: center; font-family: 'Source Sans Pro', sans-serif; border-style: solid; padding: 7px 15px 9px 5px; border-color:#000000; border-width: 0px 1px 0px 0px; font-size: 24px; } .product_cta_row_right .product_CTA_plus:hover { color:#000000; } .product_cta_row_right .product_CTA_link { color:#FFFFFF; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; padding: 1px 5px 18px 15px; text-align: center; } .product_cta_row_right .product_CTA_link:hover { color:#000000; } .plus_glyph { display: inline; color:#000000; font-family: 'Source Sans Pro', sans-serif; font-size: 24px; line-height: 36px; font-weight: 600; } .link { color:#000000; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; padding: 1px 5px 18px 15px; text-align: center; } .arrow_button { display: inline; padding: 10px; background-color:#00b4dc; } #home_cta_1_button { text-align: center; margin-left: auto; margin-right: auto; } #home_cta_1_content { margin-top: 70px!important; margin-bottom: 30px!important; } .arrow_button_center { display: inline; padding: 10px; background-color:#00b4dc; margin-left: auto!important; margin-right: auto!important;} .arrow_button_black .link { color:#ffffff; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 36px; font-weight: 400; text-transform: uppercase; padding: 10px 5px 10px 15px; text-align: center; } .arrow_button_grey .link { color:#ffffff; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 36px; font-weight: 400; text-transform: uppercase; padding: 10px 5px 10px 15px; text-align: center; } .arrow_button_gold .link { color:#ad1e1e; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 36px; font-weight: 400; text-transform: uppercase; padding: 10px 5px 10px 15px; text-align: center; } .link_black_on_blue { color:#FFFFFF; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; padding: 1px 5px 18px 15px; text-align: center; } .plus_black_on_blue { position: relative; top: 3px; color:#FFFFFF; font-family: 'Source Sans Pro', sans-serif; font-size: 24px; line-height: 30px; font-weight: 400; border-style: solid; padding: 4px 15px 4px 5px; border-color:#207e98; border-width: 0px 1px 0px 0px; text-align: center; } .plus_black_on_blue:hover { color:#00b4dc; } .link_black_on_blue:hover { color:#00b4dc; } .link a { text-decoration: none!important; } .link:hover { color:#FFFFFF!important; } .plus:hover { color:#FFFFFF!important; } .plus_on_grey:hover { color:#FFFFFF!important; } .glyph { color:#000000; font-family: 'Source Sans Pro', sans-serif; font-size: 36px; line-height: 30px; font-weight: 600; padding: 0px 5px 0px 5px; text-align: center; } .figure_med_right { float: right; text-align: center; width: 100%; max-width: 700px; min-width: 280px; margin-left: 30px; margin-top: 20px; } .figure_med_right img { text-align: center; width: 100%; max-width: 700px; min-width: 280px; margin-top: -110px; } .figure_med_right_ULL { float: right; text-align: center; width: 100%; max-width: 700px; min-width: 280px; margin-left: 30px; } .figure_med_right_ULL img { text-align: center; width: 100%; max-width: 700px; min-width: 280px; } .copy_third { float: left; width: 33%; padding: 0px 0px 10px 0px; } .copy_third p { line-height: 27px; font-weight: 300; padding-right: 30px; margin: 0px; } .copy_third h3 { margin: 0px; } .copy_third h4 { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 500; font-size: 21px; line-height: 24px; color:#525252; margin: 20px 0px 5px 0px; padding-right: 20px; } #mobile_menu .active { color:#00b4dc!important; } .active { color:#00b4dc!important; } .figure_half_left { float: left; text-align: center; width: 50%; max-width: 550px; min-width: 280px; margin: 0px; padding: 0px; } .figure_half_left img { width: 99%; max-width: 525px; min-width: 240px; margin: 0px; padding: 0px; } #sp_intro_content .figure_small_right { float: right; text-align: center; width: 30%; max-width: 260px; min-width: 180px; margin: 0px 40px 0px 20px; padding: 0px; } #sp_intro_content .figure_small_right img { width: 99%; max-width: 180px; min-width: 150px; padding: 0px; } .figure_small_right { float: right; text-align: center; width: 30%; max-width: 300px; min-width: 240px; margin: 0px 0px 0px 20px; padding: 0px; } .figure_small_right img { width: 99%; max-width: 240px; min-width: 180px; margin: 0px; padding: 0px; } .mobile_show { display: none; } .mobile_hide { display: block; } .map_mobile_show { display: none; } .map_mobile_hide { display: block; } #contact_content { position: relative; z-index: 800; } .partner { width: 100%: clear: both; float: none; border-style: solid; border-width: 0px 0px 1px 0px; border-color:#7f7f7f; } .partner h3 { font-weight: 600; } .listen_button { display: block; width: 90%; min-width: 120px; max-width: 300px; background-color:#00b4dc; padding: 5px 10px; margin: 10px 0px 30px 0px; text-align: center; text-transform: uppercase; } .reg_button { display: block; width: 50%; min-width: 120px; max-width: 300px; background-color:#00b4dc; padding: 5px 10px; margin: 10px 0px 30px 0px; text-align: center; text-transform: uppercase; } .listen_button:hover, .reg_button:hover { color:#000000; } .webinar_thumb { float: right; width: 90%; max-width: 480px; border-style: solid; border-color:#525252; border-width: 1px; } .podcast_thumb { float: right; width: 90%; max-width: 300px; border-style: solid; border-color:#525252; border-width: 1px; margin-left: 30px; margin-bottom: 20px;} #webinar h3, #webinar li { margin-bottom: -10px; } .rsvp_button { display: inline-block; width: 20%; min-width: 60px; max-width: 120px; background-color:#00b4dc; padding: 5px 10px; margin: 10px 0px 30px 0px; text-align: center; text-transform: uppercase; } .rsvp_button:hover { color:#000000; } .tech_third ul { margin-left: -20px; } .tech_third li { line-height: 24px; } .tech_third img { height: 200px; } #coming_soon_header { font-size: 24px!important; font-weight: 500; color:#d2cfd0; margin-left: 20px; margin-bottom: 0px;} /******* STYLES THAT NEED TO BE DEFINED FOR SCREENS ABOVE 1201 *******/ @media only screen and (min-width: 1201px) { #sp_pdf_desktop { display: block;} #sp_pdf_mobile { display: none;} h2 { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 48px; line-height: 60px; text-align: left; font-weight: 300; } #mode_logo_careers { display: inline-block; height: 42px; margin-left: 6px; margin-bottom: -3px; } #backbone_down_arrow, #promise_down_arrow, #math_down_arrow { display: block; position: relative; width: 142px; z-index: 200; margin-left: auto; margin-right: auto; } .tech_third p { padding-right: 20px; } .partner_logo { width: 240px; margin-left: auto; margin-right: auto; } .partner_third { float: left; width: 33%; min-width: 280px; max-width: 370px; padding: 0px 30px 30px 0px; } #contact_content #blue_hex { position: absolute; right: 10vw; top: -5vh; z-index: 88888; } .blog_img { width: 100%; max-width: 600px; min-width: 240px; min-height: 325px; } .blog_item { background-color:#F2f2f2; padding: 0px 0px 10px 0px; margin-bottom: 20px; min-height: 650px; } .case_study_third_1 { display: block; width: 31%; float: left; min-width: 300px; padding: 0px 10px; margin-bottom: 20px; } .case_study_third_2 { display: block; width: 31%; float: center; min-width: 300px; padding: 0px 10px; margin-bottom: 20px; margin-left: 15px; } .case_study_third_3 { display: block; width: 31%; float: right; min-width: 300px; padding: 0px 10px; margin-bottom: 20px; } .intro_blurb { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 400; font-size: 24px; line-height: 32px; color:#525252; margin: 20px; } .intro_blurb_case { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 400; font-size: 24px; line-height: 32px; color:#525252; margin: 20px 0px; } #about_section_1_content p { padding-top: 30px; } .case_study_third_1 h2, .case_study_third_2 h2, .case_study_third_3 h2 { font-size: 36px; line-height: 42px; } .technology_half h2 { font-size: 36px; line-height: 42px; } .technology_half { float: left; width: 44%; max-width: 560px; min-width: 240px; padding: 0px 20px; margin-bottom: 20px; } .blog_half { float: left; width: 47%; max-width: 560px; min-width: 240px; padding: 10px; margin-bottom: -20px; } #promo_content .promo_text { margin-left: auto; margin-right: auto; text-align: center; font-family: 'Source Sans Pro', sans-serif; font-size: 36px!important; line-height: 36px!important; font-weight: 300; color:#525252; } #promo_content .promo_text:after { content: ""; display: block; margin: 0px auto; width: 90px; padding-top: 20px; border-bottom: 1px solid #00b4dc; } #careers_equation { margin-top: 0px; } #highest_perf_mode_core_symbol { padding-right: 0px; padding-left: 150px;} .highest_perf_para_1 { width: 85%; padding-right: 120px; } .home_responsive_row { display: block; clear: both; width: 100%; min-height: 70vh; max-height: 100vh; margin: 0px; padding: 20vh 0px 20vh 30px; overflow-x: hidden; } .intro_responsive_row { display: block; clear: both; width: 100%; height: 100vh; margin: 0px; padding: 20vh 0px; overflow-x: hidden; } #down_arrow { display: block; position: relative; width: 142px; z-index: 200; } .down_arrow { display: block; text-align: center; width: 100%; padding: 60px 0px 20px 0px; } #two_products { min-height: 100vh; } #two_products { padding: 10vh 0; } #two_products_content .product_title { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 200; font-size: 56px; line-height: 64px; } } @media only screen and (max-width: 768px) and (orientation: landscape) { #careers_BI_logo { width: 50%!important; max-width:200px!important; float: right; margin-top: 40px; margin-left: 40px; margin-bottom: 40px; } #careers_equation { width: 50%!important; max-width:500px!important; float: none; margin-top: 40px; margin-left: 40px; margin-bottom: 40px; } #sd_wan_image, #uc_image { width: 50%!important; max-width: 670px; float:right!important; margin-right: -40px; padding-left: -20px; margin-top: 0px!important; } #ull_image { width: 50%!important; max-width: 670px; float:right!important; margin-right: -40px; padding-left: -20px; margin-top: 0px!important; } .page_end_CTA { float: right!important; } #two_products_content .product_title { font-weight: 200; font-size: 24px!important; line-height: 36px!important; } #two_products_content p { padding: 0px 20px; } } @media only screen and (min-width: 769px) and (max-width: 890px) and (orientation: landscape) { .mySlides h2 { font-size: 27px; line-height: 30px; } #careers_equation { width: 50%!important; max-width:500px!important; float: none; margin-top: 40px; margin-left: 40px; margin-bottom: 40px; } #careers_BI_logo { width: 50%!important; max-width:200px!important; float: right; margin-top: 40px; margin-left: 40px; margin-bottom: 40px; } #sd_wan_image, #uc_image { width: 50%!important; max-width: 670px; float:right!important; margin-right: -40px; padding-left: -20px; margin-top: 0px!important; } #ull_image { width: 50%!important; max-width: 670px; float:right!important; margin-right: -40px; padding-left: -20px; margin-top: 0px!important; } .page_end_CTA { float: right!important; } } @media only screen and (max-width: 1200px) { h2 { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 36px; line-height: 48px; text-align: left; font-weight: 300; } .tech_third h2 { font-size: 36px; } .blog_img { width: 100%; max-width: 700px; min-width: 240px; min-height: 250px; } .blog_item { background-color:#F2f2f2; padding: 0px 0px 10px 0px; margin-bottom: 20px; min-height: 620px; } .case_study_third_1, .case_study_third_2, .case_study_third_3 { display: block; width: 100%; float: none; min-width: 300px; padding: 0px 10px; margin-bottom: 60px; text-align: center; z-index: 999;} .intro_blurb { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 400; font-size: 24px; line-height: 32px; color:#525252; margin: 20px; } .intro_blurb_case { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 400; font-size: 24px; line-height: 32px; color:#525252; margin: 20px 0px; } .technology_half h2 { font-size: 32px; line-height: 36px; } .case_study_third_1 h2, .case_study_third_2 h2, .case_study_third_3 h2 { font-size: 32px; line-height: 36px; } .home_content_area, .content_area, .mega_menu_content_area, .mobile_menu_content_area, .header_content_area, .footer_content_area, .copyright_content_area { width: 90%; margin-left: auto; margin-right: auto; } .third_col { min-width: 240px; } #down_arrow { display: none; } .down_arrow { display: none; } .home_right_text h2, .home_left_text h2 { margin-top: 0px; font-size: 36px; line-height: 48px; text-align: left; font-weight: 300; } .home_plus_link { margin-bottom: 90px; } #two_products { min-height: 10vh; padding: 5vh 0 10vh 0; } .partner_logo { width: 240px;} .partner_third { float: none; width: 100%!important; padding: 10px; } } @media only screen and (min-width: 1025px) and (max-width: 1200px) { .tech_third p { padding-right: 0px; } } @media only screen and (min-width: 1025px) { .coming_soon_webinar_detail { width: 50%; font-size: 18px!important; line-height: 27px; float: left; margin-left: 20px; color:#D2cfd0;} #coming_soon_img { width: 50%; min-width: 240px; max-width: 400px; margin-right: 20px; margin-top: 10px; float: right; } #sp_intro_globe{ float: right; width:50%; max-width: 260px; margin-left: 60px; margin-right: 20px; margin-top: -10px; } .tech_third { float: left; width: 30%; min-width: 200px; max-width: 370px; padding: 0px 0px 20px 20px; } #blue_hex_contact { position: absolute; right: 10vw; top: 10vh!important; width: 180px; z-index: 999; } #sd_wan_image, #uc_image { width: 100%; max-width: 670px; float:right; margin-right: -40px; padding-left: -20px; margin-top: -60px; } #ull_image { width: 100%; max-width: 670px; float:right; margin-right: -40px; padding-left: -20px; margin-top: -10px; } .print_tile { float: left; width: 22%; max-width: 300px; margin: 20px 10px; padding: 0px; text-align: center; background-color:#d2cfdo; border-style: solid; border-width: 1px; border-color:d2cfd0; } .video_tile { float: left; width: 45%; max-width: 600px; margin: 20px 10px; padding: 0px; text-align: center; background-color:#d2cfdo; border-style: solid; border-width: 1px; border-color:d2cfd0; } } @media only screen and (max-width: 1024px) { .tech_third { float: none; width: 100%!important; padding: 10px; } .blog_img { width: 100%; max-width: 600px; min-width: 240px; min-height: 150px; } .blog_item { background-color:#F2f2f2; padding: 0px 0px 10px 0px; margin-bottom: 20px; min-height: 560px; } #contact_content img { width: 200px; margin-right: -20px; } } @media only screen and (max-width: 890px) { p, li { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 300; font-size: 17px; line-height: 27px; } .quote { text-align: left; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 27px!important; line-height: 30px!important; font-weight: 400!important; font-style: italic; width: 90%; margin-left: auto; margin-right: auto; } #sp_intro_globe{ float: right; width:30%; max-width: 120px; margin-left: 40px; margin-right: 20px; margin-top: -5px;} .webinar_thumb { float: none; width: 90%; max-width: 480px; border-style: solid; border-color:#525252; border-width: 1px; margin-top: 20px; } .podcast_thumb { float: right; width: 90%; max-width: 150px; border-style: solid; border-color:#525252; border-width: 1px; margin-left: 20px; margin-top: 30px; } .podcast_quote_logo { float: none; display: block; margin: 0px; } .podcast_quote { margin-left: 0px; font-size: 21px; line-height: 27px; } .podcast_attribution { font-size: 12px; line-height: 15px; margin: 0px; } #contact_content #blue_hex img { max-width: 120px; } .product_cta_row_left { width: 100%; float: none; text-align: center; } .product_cta_row_right { width: 100%; float: none; text-align: center; padding-top: 36px; padding-bottom: 20px; } .mobile_show { display: block; } .mobile_hide { display: none; } .social_icons { padding-top: 10px!important; } .social_icons a { color:#FFFFFF; margin-right: 20px; font-size: 21px; } #footer_cta_content p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; color:#FFFFFF; font-size: 21px; line-height: 36px; text-align: center; } #header_img { margin-top: 0px; height: 140px; } #lp_header_img { margin-top: 0px; height: 180px; } .page_title, .page_title_long, .lp_page_title { margin-top: 50px; margin-bottom: -50px; } .lp_page_title p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 36px; line-height: 48px; font-weight: 200; margin-bottom: 0px; padding-top: 60px!important; color:#FFFFFF; text-align: center; } .page_title p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 36px; line-height: 48px; font-weight: 200; margin-bottom: 0px; padding-top: 50px!important; color:#FFFFFF; text-align: center; } .page_title_long p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 27px; line-height: 36px; font-weight: 200; margin-bottom: 0px; padding-top: 50px!important; color:#FFFFFF; text-align: center; } .page_title:after, .page_title_long:after, .lp_page_title:after { content: ""; display: block; margin-left: auto; margin-right: auto; width: 60px; padding-top: 10px; border-bottom: 2px solid #00b4dc; } .bar1 { width: 4px; height: 20px; background-color: #FFF; margin-left: 20px; margin-top: 20px; transition: 0.5s; z-index: 99999; } .bar2 { width: 20px; height: 4px; background-color: #FFF; margin-top: -12px; margin-left: 12px; transition: 0.5s; z-index:99999; } .change .bar1 { -webkit-transform: rotate(45deg) translate(3px, -3px); transform: rotate(45deg) translate(3px, -3px); } .change .bar2 { -webkit-transform: rotate(45deg) translate(3px, -#px); transform: rotate(45deg) translate(3px, -3px); } .figure_med_right_m { float: none; width: 90%; max-width: 700px; min-width: 240px; margin-top: 30px; margin-bottom: 20px; margin-left: auto; margin-right: auto; } .third_col { float: none; width: 90%; } #get_mode { float: right; width: 10%; text-align: right; min-width: 36px; padding-top: 11px; } #get_mode_button { width: 36px; height: 36px; margin: 0px; padding: 0px; float: right; } #intro { margin-top: 48px; } #mobile_menu p { padding: 0px; margin: 0px; font-size: 18px; line-height: 42px; } #mobile_menu a { font-family: 'Source Sans Pro', sans-serif; color:#D2CFD0; text-decoration: none; font-weight: 600; } #mobile_menu .menu_sub_section { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 18px; color:#D2CFD0; font-weight: 600!important; text-transform: capitalize; } #mobile_menu .menu_item { margin-left: 18px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 18px; color:#FFFFFF; font-weight: 600!important; text-transform: capitalize!important; } #mobile_menu .menu_item_grey { margin-left: 18px; color:#D2CFD0; font-weight: 400; font-size: 18px; } #mobile_menu .menu_sub_item { margin-left: 36px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 18px; color:#FFFFFF; font-weight: 600!important; text-transform: capitalize!important; } .menu_item a, .menu_sub_item a { color:#FFFFFF!important; } .menu_section:after { content: ""; display: block; margin: 0px; width: 90%; padding-top: 0px; border-bottom: 1px solid #00b4dc; } .story_nav_hex, .story_nav_hex_on { display: none; } .story_nav_top_hex, .story_nav_top_hex_on { display: none; } #product_cta_row_content .arrow_button { margin-left: 0px!important; } .end_call_out { font-size: 18px!important; line-height: 24px!important; margin-left: 0px!important; font-weight: 600!important; } .page_end_CTA { width: 120px; } .blog_article_img { float: none; width: 90%; margin: 0px; padding-left: 20px; } #policy p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 400; font-size: 17px; line-height: 27px; } #policy li { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 400; font-size: 17px; line-height: 27px; } .bod_logo_m { float: none; height: 80px; margin-right: 0px; margin-top: 0px; } } @media only screen and (min-width: 891px) and (max-width: 1024px) { .coming_soon_webinar_detail { width: 50%; font-size: 15px!important; line-height: 21px; float: left; margin-left: 20px; color:#D2cfd0;} #coming_soon_img { width: 30%; min-width: 180px; max-width: 240px; margin-right: 20px; margin-top: 30px; float: right; } #sp_intro_globe{ float: right; width:50%; max-width: 260px; margin-left: 60px; margin-right: 20px; margin-top: -10px;} .print_tile { float: left; width: 30%; max-width: 300px; margin: 20px 10px; padding: 0px; text-align: center; background-color:#d2cfdo; border-style: solid; border-width: 1px; border-color:d2cfd0; } .video_tile { float: left; width: 50%; max-width: 600px; margin: 20px 10px; padding: 0px; text-align: center; background-color:#d2cfdo; border-style: solid; border-width: 1px; border-color:d2cfd0; } #contact_content #blue_hex { position: absolute; right: 10vw; top: -5vh; z-index: 88888; } #blue_hex_contact { position: absolute; right: 10vw; top: 10vh; width: 180px; z-index: 999; } #promo_content .promo_text { margin-left: auto; margin-right: auto; text-align: center; font-family: 'Source Sans Pro', sans-serif; font-size: 36px!important; line-height: 36px!important; font-weight: 300; color:#525252; } #promo_content .promo_text:after { content: ""; display: block; margin: 0px auto; width: 90px; padding-top: 20px; border-bottom: 1px solid #00b4dc; } .menu_column { float: left; width: 20%; padding-left: 21px; } .home_content_area, .header_content_area { width: 90%; margin: 0px auto; } #down_arrow { display: none; } .down_arrow { display: none; } .page_title_long p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 36px; line-height: 48px; font-weight: 200; margin-bottom: 0px; padding-top: 50px!important; color:#FFFFFF; text-align: center; } } @media only screen and (min-width: 1025px ) and (max-width: 1200px) { #blue_hex_contact { position: absolute; right: 10vw; top: -0vh; z-index: 88888; } #promo_content .promo_text { margin-left: auto; margin-right: auto; text-align: center; font-family: 'Source Sans Pro', sans-serif; font-size: 36px!important; line-height: 36px!important; font-weight: 300; color:#525252; } #promo_content .promo_text:after { content: ""; display: block; margin: 0px auto; width: 90px; padding-top: 20px; border-bottom: 1px solid #00b4dc; } .content_area, .home_content_area, .header_content_area { width: 90%; margin: 0px auto; } #down_arrow { display: none; } .down_arrow { display: none; } } @media only screen and (min-width: 768px) and (max-width: 1200px) { #sp_pdf_desktop { display: block;} #sp_pdf_mobile { display: none;} .blog_img { width: 100%; max-width: 600px; min-width: 240px; min-height: 250px; } .blog_item { background-color:#F2f2f2; padding: 0px 0px 10px 0px; margin-bottom: 20px; min-height: 620px; } } @media only screen and (min-width: 769px) and (max-width: 1200px) { #home_cta_1_content p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 32px; font-weight: 500; color:#FFFFFF; line-height: 36px; text-align: center; margin-bottom: 40px!important;} #home_cta_1_content { margin-top: 30px!important;} .get_mode_img { float: right; max-width: 200px; min-width: 200px; margin-top: 40px; margin-right: 70px; } .technology_half { float: left; width: 44%; max-width: 560px; min-width: 240px; padding: 0px 20px; margin-bottom: 20px; } .blog_half { float: left; width: 47%; max-width: 560px; min-width: 240px; padding: 10px; margin-bottom: -20px; } #two_products_content .product_title { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 200; font-size: 36px; line-height: 48px; } .intro_responsive_row { display: block; clear: both; width: 100%; height: 100vh; margin: 0px; padding: -5vh 0px; display: block; overflow-x: hidden; text-align: center; } /* SEL NEW STYLE 092818*/ .home_responsive_row { display: block; clear: both; width: 100%; min-height: 10vh; margin: 0px; padding: 10vh 0px 10vh 0px; display: block; overflow: hidden; text-align: center; } /* SEL NEW STYLE 092818*/ #mode_logo_careers { display: inline-block; height: 24px; margin-left: 3px; margin-bottom: -1px; } } @media only screen and (min-width: 769px) and (max-width: 1024px) { #careers_BI_logo { width: 100%; max-width:360px!important; float: right; margin-top: -50px; margin-left: 40px; margin-bottom: 60px; } #careers_equation { width: 100%; max-width:420px!important; float: right; margin-top: 40px; margin-left: 40px; margin-bottom: 60px; } #sd_wan_image, #uc_image { width: 100%; max-width: 500px; float:right; margin-right: -40px; padding-left: -20px; } #ull_image { width: 100%; max-width: 500px; float:right; margin-right: -40px; padding-left: -20px; margin-top: 20px; } .exec_bio { float: none; clear: both; width: 100%; min-width: 240px; margin: 0px 0px 40px 0px!important; padding: 0px!important; } .exec_bio img { width: 240px; float: left!important; margin: 0px 30px 30px 0px; } .home_left_image img { max-width: 300px; margin-left: -20px;} .home_right_image img { max-width: 300px; } } @media only screen and (min-width: 769px) and (max-width: 890px) and (orientation: portrait) { #blue_hex_contact { display: none; } } @media only screen and (max-width: 890px) and (orientation: landscape) { #announcement { padding: 0px!important; } #announcement_content { text-align: left; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; } #announcement_content p { color:#FFFFFF; font-weight: 600; font-size: 18px; line-height: 21px; margin: 10px 20px; } #announcement_close img { width:36px; height: 36px; position: relative; bottom: 30px; left: 0px; } #coming_soon_img { display: none; } .blog_half { float: none; width: 100%; max-width: 700px; min-width: 240px; padding: 10px; } .blog_img { width: 100%; max-width: 700px; min-width: 240px; min-height: 250px; } #blue_hex_contact { display: none; } .technology_half { float: none; width: 100%; max-width: 700px; min-width: 240px; padding: 0px 20px; margin-bottom: 60px; } } @media only screen and (min-width: 769px) and (max-width: 890px) { .coming_soon_webinar_detail { width: 50%; font-size: 15px!important; line-height: 21px; float: left; margin-left: 20px; color:#D2cfd0;} #coming_soon_img { width: 40%; min-width: 120px; max-width: 400px; margin-right: 20px; margin-top: 30px; float: right; } .print_tile { float: left; width: 50%; max-width: 300px; margin: 20px 10px; padding: 0px; text-align: center; background-color:#d2cfdo; border-style: solid; border-width: 1px; border-color:d2cfd0; } .video_tile { float: left; width: 50%; max-width: 320px; margin: 20px 10px; padding: 0px; text-align: center; background-color:#d2cfdo; border-style: solid; border-width: 1px; border-color:d2cfd0; } #promo_content .promo_text { margin-left: auto; margin-right: auto; text-align: center; font-family: 'Source Sans Pro', sans-serif; font-size: 27px!important; line-height: 32px!important; font-weight: 300; color:#525252; } #promo_content .promo_text:after { content: ""; display: block; margin: 0px auto; width: 90px; padding-top: 20px; border-bottom: 1px solid #00b4dc; } .content_area, .home_content_area, .header_content_area { width: 90%; margin: 0px auto; } #down_arrow { display: none; } .down_arrow { display: none; } #highest_perf_mode_core_symbol { float: right; width: 100%; max-width: 120px; min-width: 90px; margin-top: 0px; padding-left: 30px; } #contact_content h2 { font-size: 36px; line-height: 42px; } .home_left_image img { max-width: 320px; margin-left: -40px; } .home_right_image img { max-width: 270px; } #product_intro_content h3 { font-size: 19px; line-height: 30px; margin-top: 0px; } #product_section_1_content h2, #product_features_content h2, #case_study_section_1_content h2 { font-size: 32px; } } @media only screen and (max-width: 768px) { .coming_soon_webinar_detail { width: 100%; font-size: 15px!important; line-height: 21px; float: none; margin-left: 20px; color:#D2cfd0; } #coming_soon_img { display: none; } #home_cta_1_content p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 24px; font-weight: 500; color:#FFFFFF; line-height: 30px; text-align: center; margin-bottom: 40px!important;} #home_cta_1_content { margin-top: 30px!important;} #blue_hex_contact { display: none; } #header_img { padding: 0px; height: 90px!important; } #lp_header_img { padding: 0px; height: 120px!important; } .blog_half { float: none; width: 100%; max-width: 700px; min-width: 240px; padding: 10px; } .blog_img { width: 100%; max-width: 700px; min-width: 240px; min-height: 50px; } .intro_blurb { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 400!important; font-size: 24px!important; line-height: 32px; color:#525252; margin: 20px 0px; } .intro_blurb_case { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 400!important; font-size: 24px!important; line-height: 32px; color:#525252; margin: 20px 0px; } .case_study_third_1 h2, .case_study_third_2 h2, .case_study_third_3 h2 { font-size: 27px; line-height: 32px; } .technology_half h2 { font-size: 27px; line-height: 32px; } #promo_content .promo_text { margin-left: auto; margin-right: auto; text-align: center; font-family: 'Source Sans Pro', sans-serif; font-size: 21px!important; line-height: 27px!important; font-weight: 300; color:#525252; } #promo_content .promo_text:after { content: ""; display: block; margin: 0px auto; width: 90px; padding-top: 20px; border-bottom: 1px solid #00b4dc; } body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* Prevents Mobile Safari from bumping up font sizes in landscape */ .intro_responsive_row { display: block; clear: both; width: 100%; height: 100vh; margin: 0px; padding: -5vh 0px; display: block; overflow-x: hidden; text-align: center; } /* SEL NEW STYLE 092818*/ .home_responsive_row { display: block; clear: both; width: 100%; min-height: 10vh; margin: 0px; padding: 10vh 0px 5vh 0px; display: block; overflow-x: hidden; text-align: center; } /* SEL NEW STYLE 092818*/ #down_arrow { display: none; } .down_arrow { display: none; } .content_area, .home_content_area, .header_content_area { width: 90%; margin: 0px auto; } #two_products_content .product_title { font-weight: 200; font-size: 36px; line-height: 48px; } #product_section_1_content h2, #product_features_content h2, #case_study_section_1_content h2 { font-size: 24px; } #product_intro_content h3 { font-size: 17px; line-height: 27px; margin-top: 0px; font-weight: 400; } .content_area p, .content_area li { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-weight: 300; font-size: 16px!important; line-height: 24px; } .copy_third { float: none; width: 100%; min-width: 230px; max-width: 700px; padding: 0px 0px 0px 0px; } .copy_third p { display: inline; padding-right: 10px!important; } .copy_third h3, .copy_third h4 { margin: 10px 0px 0px 0px; font-size: 18px; font-weight: 500;} .figure_half_left { float: none; text-align: center!important; width: 100%; min-width: 240px; margin: 0px; padding: 0px; } .figure_half_left img { width: 90%; margin-left:auto; margin-right: auto; padding: 0px; } .half_col { float: none; width: 90%; } h1, h2 { font-size: 27px; line-height: 32px; padding-left: 0px; } #mode_logo_careers { display: inline-block; height: 24px; margin-left: 3px; margin-bottom: -2px; } .slider_label h3 { font-weight: 400; } h3 { font-size: 21px; font-weight: 400; } .content_area p { padding: 0px; } .lp_page_title { margin-top: 50px; margin-bottom: 0px; } .page_title { margin-top: 50px; margin-bottom: -50px; } .page_title_long { margin-top: 50px; margin-bottom: -50px; } .page_title p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 24px; line-height: 32px; font-weight: 200; margin-bottom: 0px; padding-top: 24px!important; color:#FFFFFF; text-align: center; } .lp_page_title p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 27px; line-height: 32px; font-weight: 200; margin-bottom: 0px; padding-top: 36px!important; color:#FFFFFF; text-align: center; } .page_title_long p { font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 20px; line-height: 24px; font-weight: 200; margin-bottom: 0px; padding-top: 15px!important; color:#FFFFFF; text-align: center; } .get_mode_img { display: none; } #careers_BI_logo { width: 100%; max-width:300px!important; float: none; margin: 40px 0px 20px 0px; } #careers_equation { width: 100%; max-width:500px!important; float: none; margin: 40px 0px 20px 0px; } .hire-jobs { margin-top: -60px; margin-left: -14px; } #sd_wan_image, #uc_image, #ull_image { width: 100%; margin-left: auto; margin-right: auto; float:none; clear: both; margin-bottom: 40px; } .features_row .copy_third { float: none; width: 100%; border-style: solid; border-width: 1px 0px 0px 0px; border-color:#7f7f7f; margin-right: 12px; margin-bottom: 20px; } .mySlides h2 { font-size: 24px; line-height: 30px; } .mySlides h3 { font-size: 18px; line-height: 24px; } #two_products_left p { margin-left: -20px; margin-right: -10px; padding: 0px 20px; } #two_products_right { margin-right: -40px; } } @media only screen and (max-width: 767px) { #sp_pdf_desktop { display: none;} #sp_pdf_mobile { display: block;} #announcement { padding: 0px!important; } #announcement_content { text-align: left; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; } #announcement_content p { color:#FFFFFF; font-weight: 600; font-size: 18px; line-height: 21px; margin: 10px 20px; } #announcement_close img { width:36px; height: 36px; position: relative; bottom: 30px; right: 10px; } #sp_intro_content .figure_small_right img { width: 99%; max-width: 180px; min-width: 150px; padding: 0px; } #sp_intro_content .figure_small_right { float: none; text-align: center; width: 90%; max-width: 300px; min-width: 240px; margin: 0px auto; padding: 0px; } .blog_item { background-color:#F2f2f2; padding: 0px 0px 10px 0px; margin-bottom: 20px; min-height: 60px; } } @media only screen and (min-width: 641px) and (max-width: 768px) { .home_left_image img { max-width: 300px; margin-left: -40px; } .home_right_image img { max-width: 270px; } } @media only screen and (min-width: 668px) and (max-width: 768px) { .technology_half { float: left; width: 44%; max-width: 560px; min-width: 240px; padding: 0px 20px; margin-bottom: 60px; } } @media only screen and (min-width: 641px) and (max-width: 768px) { .print_tile { float: left; width: 50%; max-width: 280px; margin: 20px 10px; padding: 0px; text-align: center; background-color:#d2cfdo; border-style: solid; border-width: 1px; border-color:d2cfd0; } .video_tile { float: none; width: 90%; max-width: 640px; margin: 20px 10px; padding: 0px; text-align: center; background-color:#d2cfdo; border-style: solid; border-width: 1px; border-color:d2cfd0; } } @media only screen and (max-width: 667px) { .technology_half { float: none; width: 100%; max-width: 560px; min-width: 240px; padding: 0px 10px; margin-bottom: 60px; } } @media only screen and (min-width: 641px) { .blog_figure_small_right { float: right; width: 50%; max-width: 240px; min-width: 200px; margin: 0px 0px 10px 40px; padding: 0px; } .blog_figure_small_right_drake { float: right; width: 50%; max-width: 240px; min-width: 200px; margin: -50px 0px 10px 40px; padding: 0px; } .home_right_image_mobile { display: none; } .home_right_image_desktop { display: block; } } @media only screen and (min-width: 641px) and (max-width: 1200px) { .home_right_text h2, .home_left_text h2 { margin-top: 0px; font-size: 36px; line-height: 48px; text-align: left; font-weight: 300; } } @media only screen and (max-width: 640px) { .blog_figure_small_right, .blog_figure_small_right_drake { float: none; width: 90%; max-width: 240px; min-width: 200px; margin: 0px auto; padding: 0px; } .print_tile { float: none; width: 90%; max-width: 350px; margin: 20px auto 40px auto; padding: 0px; text-align: center; background-color:#d2cfdo; border-style: solid; border-width: 1px; border-color:d2cfd0; } .video_tile { float: none; width: 90%; max-width: 600px; margin: 20px auto 40px auto; padding: 0px; text-align: center; background-color:#d2cfdo; border-style: solid; border-width: 1px; border-color:d2cfd0; } .technology_half { float: none; width: 100%; padding: 0px 10px; margin-left: -10px; margin-bottom: 60px; } .blog_half { float: none; width: 100%; padding: 10px; margin-left: -10px; margin-bottom: -20px; } .feature_columns { -moz-column-width: 100%; -webkit-column-width: 100%; column-width: 100%; } .feature_columns li { display: inline-block; width: 100%; min-width: 240px; min-height: 100px; } .mySlides h3 { text-align: center!important; } .two_products_half { float: none; width: 100%; max-width: 600px; min-width: 240px; text-align: center; } .home_left_text, .home_right_text { float: none; width: 100%!important; max-width: 600px; min-width: 240px; font-family: 'Source Sans Pro', Trebuchet, sans-serif; font-size: 18px; line-height: 24px; text-align: left; } .home_left_text p, .home_right_text p { margin-bottom: -6px; } .home_right_text h2, .home_left_text h2 { margin-top: 0px; font-size: 27px; line-height: 36px; text-align: left; font-weight: 300; } .home_right_image, .home_left_image { float: none; width: 100%; text-align: center; } .home_right_image img, .home_left_image img { max-width: 200px; margin-top: -30px; margin-bottom: 10px; } .home_right_image_mobile { display: block; } .home_right_image_desktop { display: none; } } @media only screen and (max-width: 540px) { #hex_globe { float: right; width: 100%; max-width: 120px; margin-left: auto; margin-right: auto; padding: 0px; } #two_products { min-height: 60vh; padding-top: 5vx; padding-bottom: 5vh; } } @media only screen and (min-width: 469px) and (max-width: 768px) { #mode_core_symbol { float: right; width: 100%; max-width: 120px; min-width: 90px; margin-top: 0px; padding-left: 30px; } #highest_perf_mode_core_symbol { float: right; width: 100%; max-width: 120px; min-width: 90px; margin-top: 0px; padding-left: 30px; } .exec_bio { float: none; clear: both; width: 100%; min-width: 180px; margin: 0px 0px 40px 0px!important; padding: 0px!important; } .exec_bio img { width: 180px; float: left!important; margin: 0px 30px 30px 0px; } .exec_bio p { margin-top: -20px!important; padding: 0px!important; font-size: 16px!important; line-height: 21px!important; } #careers_equation { width: 100%; max-width:500px!important; float: none; margin-top: 40px; margin-left: 40px; margin-bottom: 40px; } .news_img { float: left; width: 180px; padding: 0px 20px 30px 0px; } #news_section_1_content h3 { line-height: 27px!important; font-size: 21px!important; } } @media only screen and (max-width: 468px) { .exec_bio { float: none; clear: both; width: 100%; min-width: 240px; margin: 0px 0px 30px 0px!important; padding: 0px!important; } .exec_bio img { float: none; width: 240px; margin: 0px; } #mode_core_symbol { float: none; clear:both; width: 100%; max-width: 120px!important; margin-top: -20px; padding-left: 0px; } #highest_perf_mode_core_symbol { float: right; width: 100%; max-width: 120px; min-width: 90px; margin-top: 0px; padding-left: 10px; } .caption_on_light, .caption_on_dark { margin: 20px 0px!important; } .news_img { float: none; clear: both; width: 100%; padding: 20px 00px 0px 0px; } #news_section_1_content h3 { line-height: 27px!important; font-size: 21px!important; margin-left: 0px; } .page_end_CTA { margin-top: 0px; margin-right: -30px; } } @media only screen and (max-width: 368px) { #nav_icon { margin-left: -10px; } .page_end_CTA { display: none; } } /* ----------- END MEDIA QUERIES --------------- */ /* NEW FOOTER CTA STYLES & ANIMATIONS */ #announce_hex_1 { position: absolute; z-index: 7; animation-name: announce_amin_1; -webkit-animation-name: announce_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 8s; -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-right: -20vw; } #announce_hex_2 { position: absolute; z-index: 7; animation-name: announce_amin_1; -webkit-animation-name: announce_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 6s; -webkit-animation-duration: 6s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-right: -5vw; } #announce_sigma_1 { position: absolute; z-index: 7; animation-name: announce_amin_1; -webkit-animation-name: announce_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 9s; -webkit-animation-duration: 9s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-right: -10vw; } #announce_sigma_2 { position: absolute; z-index: 7; animation-name: announce_amin_1; -webkit-animation-name: announce_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 12s; -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-right: -5vw; } #announce_cloud_1 { position: absolute; z-index: 7; animation-name: announce_amin_1; -webkit-animation-name: announce_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 10s; -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-right: -20vw; } #announce_cloud_2 { position: absolute; z-index: 7; animation-name: announce_amin_1; -webkit-animation-name: announce_anim_1; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-right: -5vw; } #footer_tag { font-family: 'Source Sans Pro', Trebuchet, sans-serif; color:#FFFFFF; font-size: 48px; line-height: 48px; font-weight: 300; margin-top: 72px; margin-right: 30px; float:right; } #footer_cta_new { overflow: hidden; position: relative; background-color:#217f9a; height: 190px; width: 100vw; margin: 0px; padding: 0px; text-align: center; } #footer_M { float: left; width: 130px; margin: 20px; z-index: 999!important; } #cloud_1b { position: absolute; z-index: 7; animation-name: cloud_anim_3b; -webkit-animation-name: cloud_anim_3b; /* Safari 4.0 - 8.0 */ animation-duration: 15s; -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -20vw; } #cloud_2b { position: absolute; z-index: 7; animation-name: cloud_anim_2b; -webkit-animation-name: cloud_anim_2b; /* Safari 4.0 - 8.0 */ animation-duration: 24s; -webkit-animation-duration: 24s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 3s; overflow: hidden; margin-left: -15vw; } #hex_1b { position: absolute; z-index: 7; animation-name: cloud_anim_1b; -webkit-animation-name: cloud_anim_1b; /* Safari 4.0 - 8.0 */ animation-duration: 30s; -webkit-animation-duration: 30s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -20vw; } #hex_2b { position: absolute; z-index: 7; animation-name: cloud_anim_4b; -webkit-animation-name: cloud_anim_4b; /* Safari 4.0 - 8.0 */ animation-duration: 18s; -webkit-animation-duration: 18s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -10vw; } #sigma_1b { position: absolute; z-index: 7; animation-name: cloud_anim_1b; -webkit-animation-name: cloud_anim_1b; /* Safari 4.0 - 8.0 */ animation-duration: 24s; -webkit-animation-duration: 24s; /* Safari 4.0 - 8.0 */ animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; margin-left: -15vw; } @media screen and (max-width: 890px) and (orientation: landscape) { #footer_tag { font-family: 'Source Sans Pro', Trebuchet, sans-serif; color:#FFFFFF; font-size: 30px; line-height: 24px; font-weight: 300; margin-top: 40px; margin-right: 10px; float:right; } #footer_cta_new { overflow: hidden; position: relative; background-image: url('images/footer-calltoaction-bg_new.png'); background-color:#217f9a; height: 110px; width: 100vw; margin: 0px; padding: 0px; text-align: center; } #footer_M { float: left; width: 70px; margin: 10px; z-index: 999!important; } } @media screen and (max-width: 767px) and (orientation: portrait) { #footer_tag { display: block; font-family: 'Source Sans Pro', Trebuchet, sans-serif; color:#FFFFFF; font-size: 30px; line-height: 24px; font-weight: 300; margin-top: 0px; padding-bottom: 20px; margin-right: 10px; float:none; clear: both; text-align: center; } #footer_cta_new { overflow: hidden; position: relative; background-image: url('images/footer-calltoaction-bg_new.png'); background-color:#217f9a; height: 160px; width: 100vw; margin: 0px; padding: 0px; text-align: center; } #footer_M { float: none; clear: both; width: 70px; margin: 10px; z-index: 999!important; } } @-webkit-keyframes cloud_anim_1b { 0% {left:100%; top:-15h; opacity:0.0; } 50% {left:50%; top:-15vh; opacity: 0.30; } 100% {left:0%; top:-15vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_2b { 0% {left:100%; top:1vh; opacity:0.0; } 50% {left:50%; top:1vh; opacity: 0.30; } 100% {left:0%; top:1vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_3b { 0% {left:100%; top:5vh; opacity: 0.0; } 50% {left:50%; top:5vh; opacity: 0.30; } 100% {left:0%; top:5vh; opacity: 0.0; } } @-webkit-keyframes cloud_anim_4b { 0% {left:100%; top:7vh; opacity: 0.0; } 50% {left:50%; top:7vh; opacity: 0.30; } 100% {left:0%; top:7vh; opacity: 0.0; } } @keyframes cloud_anim_1b { 0% {left: 100%; top:-15vh; opacity: 0.0; } 50% {left: 50%; top:-15vh; opacity: 0.30; } 100% {left: 0%; top:-15vh; opacity: 0.0; } } @keyframes cloud_anim_2b { 0% {left:100%; top:1vh; opacity: 0.0; } 50% {left:50%; top:1vh; opacity: 0.30; } 100% {left:0%; top:1vh; opacity: 0.0; } } @keyframes cloud_anim_3b { 0% {left:100%; top:5vh; opacity: 0.0; } 50% {left:50%; top:5vh; opacity: 0.30; } 100% {left:0%; top:5vh; opacity: 0.0; } } @keyframes cloud_anim_4b { 0% {left:100%; top:7vh; opacity: 0.0; } 50% {left:50%; top:7vh; opacity: 0.30; } 100% {left:0%; top:7vh; opacity: 0.0; } } @-webkit-keyframes announce_anim_1 { 0% {left:0%; top:0; opacity:0.0; } 50% {left:50%; top:0; opacity: 0.20; } 100% {left:100%; top:0; opacity: 0.0; } } @keyframes announce_anim_1 { 0% {left:0%; top:0; opacity:0.0; } 50% {left:50%; top:0; opacity: 0.20; } 100% {left:100%; top:0; opacity: 0.0; } }