@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap");
@import url("reset.css");
@font-face { font-family: 'Segoe UI SB'; src: url("../fonts/SegoeUI-Semibold.eot"); src: url("../fonts/SegoeUI-Semibold.eot?#iefix") format("embedded-opentype"), url("../fonts/SegoeUI-Semibold.woff2") format("woff2"), url("../fonts/SegoeUI-Semibold.woff") format("woff"), url("../fonts/SegoeUI-Semibold.ttf") format("truetype"), url("../fonts/SegoeUI-Semibold.svg#SegoeUI-Semibold") format("svg"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Segoe UI'; src: url("../fonts/SegoeUI.eot"); src: url("../fonts/SegoeUI.eot?#iefix") format("embedded-opentype"), url("../fonts/SegoeUI.woff2") format("woff2"), url("../fonts/SegoeUI.woff") format("woff"), url("../fonts/SegoeUI.ttf") format("truetype"), url("../fonts/SegoeUI.svg#SegoeUI") format("svg"); font-weight: normal; font-style: normal; font-display: swap; }
:root { --max-width: 1920px; --content-max-width: 1660px; --sb-font: 'Segoe UI SB', san-serif; --normal-font: 'Segoe UI', san-serif; --nav-font: 'Roboto', sans-serif; }

html { font-family: var(--normal-font); font-size: 14px; }

.__mobile { display: none; }

nav { position: fixed; width: 100%; top: 0; background: white; z-index: 10; }
nav .inner_nav { max-width: var(--content-max-width); margin-left: auto; margin-right: auto; padding: 2rem 3rem; display: flex; align-items: center; }
nav .inner_nav .logo img { width: 10rem; }
nav .inner_nav .mobile_menu { margin-left: auto; display: none; }
nav .inner_nav .mobile_menu:hover { opacity: .75; }
nav .inner_nav .links { margin-left: auto; height: auto; }
nav .inner_nav .links .links_wrap a { margin-right: 1rem; color: #707070; font-family: var(--nav-font); position: relative; padding: .75rem 0; }
nav .inner_nav .links .links_wrap a:nth-last-of-type(1) { margin-right: 0; }
nav .inner_nav .links .links_wrap a.active:after { height: 2px; background: red; position: absolute; left: 0; top: 100%; width: 100%; content: ''; }

.hero_top { margin-top: 10rem; background-image: linear-gradient(to right, #1B3B67 50%, #0F1A31 50%); background-position: 50% 50%; background-repeat: no-repeat; background-size: 100% 100%; position: relative; }
.hero_top:after { content: ''; background-image: url("../img/hero_desktop.jpg"); background-position: center top; background-repeat: no-repeat; background-size: auto 100%; position: absolute; top: 0; width: 100%; height: 100%; left: 50%; transform: translateX(-50%); }
.hero_top .hero_img { width: auto; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 0; }
.hero_top .inner_hero_top { padding: 3rem 3rem 8rem 3rem; max-width: var(--content-max-width); margin-left: auto; margin-right: auto; color: white; }
.hero_top .inner_hero_top .hero_content { width: 50%; display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 1; }
.hero_top .inner_hero_top .hero_content .text_below_microsoft { margin-top: 1rem; font-size: 1.2rem; }
.hero_top .inner_hero_top .hero_content p { font-size: 1.25rem; font-family: var(--sb-font); }
.hero_top .inner_hero_top h5 { font-size: 3rem; font-weight: normal; color: #50E6FF; margin-top: 3rem; margin-bottom: 1.5rem; cursor: pointer; }
.hero_top .inner_hero_top h5:hover { opacity: .75; }

h5.initial { display: block; text-align: center; margin: 2rem 0; font-size: 1.5rem; font-family: var(--sb-font); }

.features { padding-bottom: 3rem; }
.features .inner_features { max-width: var(--content-max-width); width: 100%; margin-left: auto; margin-right: auto; }
.features .inner_features .features { display: flex; width: 100%; display: flex; padding: 0 5rem; justify-content: space-between; }
.features .inner_features .each_feature { width: 22%; display: flex; flex-direction: column; align-items: center; }
.features .inner_features .each_feature strong { font-family: var(--sb-font); font-size: 1.25rem; margin: 1.5rem 0; text-align: center; }
.features .inner_features .each_feature p { text-align: center; }

.how { padding-top: 2rem; padding-bottom: 5rem; background: #F8F9FA; }
.how .inner_how { max-width: var(--content-max-width); width: 100%; margin-left: auto; margin-right: auto; padding-left: 10rem; padding-right: 10rem; }
.how .inner_how .slider { display: flex; padding: 2rem; background: white; }
.how .inner_how .slider .left { width: 50%; padding-right: 3rem; }
.how .inner_how .slider .left ul li { cursor: pointer; display: block; padding-left: 1.5rem; margin-bottom: 2rem; position: relative; }
.how .inner_how .slider .left ul li:nth-last-of-type(1) { margin-bottom: 0; }
.how .inner_how .slider .left ul li.active:after { width: 3px; background: #0078D4; position: absolute; left: 0; top: 0; height: 100%; content: ''; }
.how .inner_how .slider .left ul li strong { font-size: 1.25rem; color: #0078D4; display: block; margin-bottom: .5rem; }
.how .inner_how .slider .right { width: 50%; }
.how .inner_how .slider .right .swiper .swiper-slide img { width: 100%; }

.config .inner_config { max-width: var(--content-max-width); width: 100%; margin-left: auto; margin-right: auto; padding-left: 10rem; padding-right: 10rem; padding-bottom: 5rem; border-bottom: 1px solid #707070; }
.config .inner_config .configs_wrap { display: flex; align-items: center; justify-content: space-between; }
.config .inner_config .configs_wrap .each_config { background: #ECECEC; padding: 1rem 2rem; width: 31%; text-align: center; position: relative; }
.config .inner_config .configs_wrap .each_config.active:after { height: 3px; content: ''; position: absolute; width: 100%; left: 0; top: 100%; background: #0078D4; }
.config .inner_config .configs_wrap .each_config p { margin-bottom: 1rem; display: block; text-align: center; }
.config .inner_config .configs_wrap .each_config a { display: inline-block; padding: .5rem 2rem; background: #0078D4; color: white; }

.tab_content_desktop, .tab_content_mobile { width: 100%; display: none; }
.tab_content_desktop.active, .tab_content_mobile.active { display: block; }
.tab_content_desktop .devices, .tab_content_mobile .devices { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.tab_content_desktop .each_device, .tab_content_mobile .each_device { background: #F9F9F9; border: 1px solid #CCCCCC; padding: 2rem; width: 31%; margin-bottom: 2rem; display: flex; flex-direction: column; align-self: stretch; }
.tab_content_desktop .each_device strong, .tab_content_mobile .each_device strong { font-size: 1.25rem; font-family: var(--sb-font); color: #000000; display: block; text-align: center; margin-bottom: 1rem; cursor: pointer; }
.tab_content_desktop .each_device strong:hover, .tab_content_mobile .each_device strong:hover { opacity: .75; }
.tab_content_desktop .each_device p span, .tab_content_mobile .each_device p span { display: block; text-align: center; }

.tab_content_mobile.active { display: none; }

.faq .inner_faq { max-width: var(--content-max-width); width: 100%; margin-left: auto; margin-right: auto; padding-bottom: 5rem; }
.faq .inner_faq .dd { overflow: hidden; height: 0; /*transition: all .15s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0s;*/ }
.faq .inner_faq .dd .inner_dd { padding: 0 2rem; position: relative; overflow: hidden; }
.faq .inner_faq .faq_content { display: flex; }
.faq .inner_faq .faq_content .left { width: 48%; }
.faq .inner_faq .faq_content .right { width: 48%; margin-left: auto; }
.faq .inner_faq .faq_content ul li { padding: 1rem 0; border-bottom: 1px solid #707070; }
.faq .inner_faq .faq_content ul li.closed h5 img { transform: translateY(-50%) rotate(0deg); transition: all .15s linear; }
.faq .inner_faq .faq_content ul li h5 { position: relative; width: 100%; font-size: 1.15rem; font-family: var(--sb-font); display: block; cursor: pointer; padding-right: 3rem; }
.faq .inner_faq .faq_content ul li h5 img { position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(180deg); transition: all .15s linear; }
.faq .inner_faq .faq_content ul li .dd p { display: block; margin-top: 3rem; margin-bottom: 1rem; }
.faq .inner_faq .faq_content ul li .dd p span { display: block; margin-bottom: 1rem; }
.faq .inner_faq .faq_content ul li .dd p span:nth-last-of-type(1) { margin-bottom: 0; }

footer { background: #383838; padding: 5rem 0 0 0; font-family: 'Open Sans', sans-serif; }
footer .footer_bottom { background: #EF4C2A; padding: 2rem; padding-bottom: 2.5rem; text-align: center; color: white; }
footer .footer_bottom a { display: inline-block; color: white; padding: .5rem 1rem; }
footer .footer_bottom a:hover { opacity: .75; }
footer .footer_bottom p { display: block; margin-top: .5rem; text-align: center; }
footer .inner_footer { color: white; max-width: var(--content-max-width); width: 100%; margin-left: auto; margin-right: auto; display: flex; padding-bottom: 5rem; }
footer .inner_footer .left { width: 30%; position: relative; height: 100%; }
footer .inner_footer .left strong { font-size: 1.35rem; display: block; margin-bottom: 2rem; }
footer .inner_footer .left .details { font-weight: 300; display: flex; flex-direction: column; margin-bottom: 1.5rem; }
footer .inner_footer .left .details b { font-weight: 600; }
footer .inner_footer .left .or { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.35rem; }
footer .inner_footer .mid { display: flex; align-items: center; }
footer .inner_footer .mid span { font-size: 1.35rem; }
footer .inner_footer .right { width: 60%; margin-left: auto; }
footer .inner_footer .right strong { font-size: 1.35rem; display: block; margin-bottom: 2rem; }
footer .inner_footer .right form { width: 100%; display: flex; flex-wrap: wrap; }
footer .inner_footer .right form .each_fieldset { margin-bottom: .5rem; display: block; }
footer .inner_footer .right form .each_fieldset label { display: block; font-weight: 300; }
footer .inner_footer .right form .each_fieldset input { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding: .5rem 0; color: white; }
footer .inner_footer .right form .each_fieldset select { border: none; background: transparent; -webkit-appearance: none; appearance: none; border: none; color: white; padding: .5rem; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
footer .inner_footer .right form .each_fieldset .error_msg { color: red; display: block; padding: .5rem 0; }
footer .inner_footer .right form .form_left { width: 48%; }
footer .inner_footer .right form .form_right { width: 48%; margin-left: auto; }
footer .inner_footer .right form .form_btn { width: 100%; padding-top: 1.5rem; }
footer .inner_footer .right form .form_btn button { -webkit-appearance: none; appearance: none; border: 2px solid white; background: transparent; color: white; padding: 1rem 2rem; }

@media (max-width: 1680px) { .hero_top:after { background-position: right center; /*background-size: 100% auto;*/ }
  .faq .inner_faq .faq_content { padding: 0 3rem; }
  footer .inner_footer { padding-left: 3rem; padding-right: 3rem; }
  .how .inner_how, .features .inner_features .features { padding-left: 3rem; padding-right: 3rem; } }
@media (max-width: 1200px) { html { font-size: 14px; }
  footer .inner_footer { flex-direction: column; }
  footer .inner_footer .left { width: 100%; }
  footer .inner_footer .left strong { text-align: center; }
  footer .inner_footer .left .details { text-align: center; }
  footer .inner_footer .left .or { display: block; text-align: center; position: relative; padding: 1.5rem 0; top: 0; transform: none; margin-bottom: 1rem; }
  footer .inner_footer .right { width: 100%; }
  footer .inner_footer .right strong { text-align: center; }
  nav .inner_nav .mobile_menu { display: block; }
  .hero_top .inner_hero_top .hero_content { width: 60%; }
  .hero_top .inner_hero_top { padding-bottom: 5rem; }
  .hero_top:after { background-size: cover; }
  .config .inner_config { padding-left: 3rem; padding-right: 3rem; }
  nav .inner_nav .links { position: absolute; width: 100%; right: 0; top: 100%; background: white; }
  nav .inner_nav .links.__is_mobile { height: 0; overflow: hidden; }
  nav .inner_nav .links .links_wrap { display: flex; flex-direction: column; padding: 1rem 3rem 3rem 3rem; height: 100%; overflow: auto; }
  nav .inner_nav .links .links_wrap a { margin: .5rem 0; padding: .75rem 0; } }
@media (max-width: 980px) { .__mobile { display: block; }
  .tab_content_mobile.active { display: block; }
  .hero_top { background-image: linear-gradient(45deg, #224776, #122547); }
  .hero_top:after { display: none; }
  .hero_top .inner_hero_top h5 { text-align: center; margin-top: 0; font-size: 2.75rem; }
  .hero_top .inner_hero_top .hero_content { width: 100%; align-items: center; }
  .hero_top .inner_hero_top .hero_content p { text-align: center; }
  .hero_top .inner_hero_top .hero_content .text_below_microsoft { margin-bottom: 1rem; text-align: center; }
  .features .inner_features .features { flex-wrap: wrap; justify-content: space-around; }
  .features .inner_features .features .each_feature { width: 45%; margin-bottom: 3rem; }
  .how .inner_how .slider { background: transparent; padding: 0; flex-direction: column; }
  .how .inner_how .slider .right { order: 1; width: 100%; }
  .how .inner_how .slider .left { margin-top: 2rem; order: 2; width: 100%; padding-right: 0; }
  .faq .inner_faq .faq_content { flex-direction: column; }
  .faq .inner_faq .faq_content .left, .faq .inner_faq .faq_content .right { width: 100%; }
  .config .inner_config .configs_wrap { flex-direction: column; justify-content: center; }
  .config .inner_config .configs_wrap .each_config { width: 100%; margin-bottom: 2rem; }
  .config .inner_config .tab_content .each_device { width: 48%; } }
@media (max-width: 700px) { .config .inner_config .tab_content .each_device { width: 100%; } }
@media (max-width: 600px) { html { font-size: 13px; }
  .config .inner_config { padding-left: 2rem; padding-right: 2rem; padding-bottom: 3rem; }
  h5.initial, .how .inner_how, nav .inner_nav, .hero_top .inner_hero_top, .features .inner_features .features, .faq .inner_faq .faq_content, footer .inner_footer, nav .inner_nav .links .links_wrap { padding-left: 2rem; padding-right: 2rem; }
  footer .inner_footer .right form .form_left, footer .inner_footer .right form .form_right { width: 100%; }
  .features .inner_features .features .each_feature { width: 100%; } }

/*# sourceMappingURL=newstyle.css.map */