@font-face {
    font-family: 'SegoeUI';
    src:
        local("Segoe UI Semilight"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format("truetype");
    font-weight: 200;
}

@font-face {
    font-family: 'SegoeUI';
    src:
        local("Segoe UI"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: 'SegoeUI';
    src:
        local("Segoe UI Semibold"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format("truetype");
    font-weight: 700;
}

body {font-size:16px; color:#707070; font-family:'SegoeUI',Arial,sans-serif; font-weight:400;}
html {font-size:16px;}
a {color:#007AC3; text-decoration:none; transition:all 0.3s ease-out;}
a:hover, a:focus {color:#9C9C9C; text-decoration:none;}
.size12Text {font-size:12px;}
.size14Text {font-size:14px;}
.size15Text {font-size:15px;}
.size20Text {font-size:20px; line-height:28px;}
.highlightText {color:#003872;}
.level1Title {font-family:'SegoeUI'; font-weight:200; font-size:60px; margin-bottom:10px; line-height:56px; color:#007AC3;}
.level2Title {font-family:'SegoeUI'; font-weight:200; font-size:30px; margin-bottom:5px; color:#007AC3;}
.level2Title.lgTitle {font-size:40px; margin-bottom:24px; color:#707070;}
.level3Title {font-family:'SegoeUI'; font-weight:200; font-size:30px; margin-bottom:18px; color:#007AC3;}
.btn {position:relative; color:#9C9C9C; padding:0; font-size:20px; border-radius:0; height:37px; border:none;}
.btn-primary {color:#007AC3; background-color:#fff; padding:0 14px 0 58px; display:inline-flex; align-items:center; min-width:168px; transition:all 0.3s ease-out; font-family:'SegoeUI'; font-weight:700;}
.btn-primary:hover {color:#fff; background-color:#007AC3;}
.btn-primary::before {content:""; position:absolute; top:0; left:0; width:37px; height:37px; background:#007AC3 url(/images/arrow-white.svg) no-repeat center center;}
.btn-primary.secondary {background-color: #007AC3; color: #fff;}
.btn-primary.secondary::before {background:#fff url(/images/arrow-blue.svg) no-repeat center center;}
.btn-primary.secondary:hover {background-color:#fff; color:#007AC3;}
.section {padding:40px 0;}
.section.alt {background:#f0f0f0;}
.imgBorder {box-shadow: 0px 3px 6px 0px rgba(156,156,156,1);}
.imgPad {margin-top:20px;}
.box {background:#007AC3; color:#fff; padding:20px; margin:0 0 20px 0; position:relative;}
.box.dark {background:#003872;}
.box .level2Title {color:#fff;}
.box .level3Title {color:#fff;}
.boxTitle {position:absolute; bottom:-33px; left:20px; transform:rotate(-90deg); transform-origin:top left;}
.boxTitle .level3Title {font-size:40px;}

/* Header */
header {background:#007AC3; color:#fff;}
header a {color:#fff;}
.headerContainer {display:flex; align-items:center; justify-content:space-between; min-height:90px; font-size:20px;}
.headerContainer img {width:100%; max-width:100%; height:auto;}
.headerContainer .sbLogo img {max-width:240px;}
.headerContainer .sbLogo {padding-bottom:8px;}
.headerContact ul {list-style:none; margin:0; padding:0;}
.headerContact ul li {display:inline-block; margin:0 5px;}
.headerContact ul li a img {height:16px; width:auto; margin-top:-4px; opacity:1; transition:opacity 0.3s ease-out;}
.headerContact ul li a:hover img {opacity:0.6;}
.headerContainer .fgLogo img {max-width:168px;}
.headerContainer .fgLogo {padding-bottom:6px;}

/* Footer */
footer {font-size:11px; border-top:1px solid #007AC3; padding:44px 0;}
footer ul {list-style:none; margin:0 0 50px 0; padding:0;}
footer ul li {margin-bottom:20px;}
footer img {width:100%; max-width:100%; height:auto;}
footer .sbLogo img {max-width:175px;}
footer .fgLogo img {max-width:137px;}

/* Callback */
#callBack {position:fixed; top:140px; right:-280px; display:flex; transition:all 0.5s ease-out; z-index:999; box-shadow:-1px 0px 5px 0px rgba(0,0,0,0.3);}
#callBack.active {right:0;}
#callBack .callForm {background:rgba(0,56,114,0.76); color:#fff; padding:20px; width:280px;}
#callBack .callFormTitle {background:rgba(0,122,195,0.76); color:#fff; width:37px; position:relative; transition:all 0.3s ease-out;}
#callBack .callFormTitle::before {content:""; position:absolute; top:0; left:0; width:37px; height:37px; background:#fff url(/images/arrow-blue.svg) no-repeat center center;}
#callBack .callFormTitle .titleText {font-size:20px; white-space:nowrap; position:absolute; bottom:-12px; left:2px; transform:rotate(-90deg); transform-origin:top left;}
#callBack .callFormTitle:hover {cursor:pointer; background:rgba(0,56,114,0.76);}

label {display:none;}
label.error {color:#ffca00; margin-top:4px; display:block; font-size:12px; font-family:'SegoeUI'; font-weight:700;}
#success_fail_info.error {color:#fff; background:#ffca00; margin-top:20px; padding:8px 14px; margin-top:16px; font-size:14px;}
#success_fail_info.success {color:#fff; background:#35c786; margin-top:20px; padding:8px 14px; margin-top:16px; font-size:14px;}
.form-control {padding:.375rem .75rem; font-size:14px; color:#495057; border:1px solid #fff; border-radius:0; border:none;}
.formNotice {font-size:12px; line-height:12px; margin-bottom:0; margin-top:8px;}
.formNotice a {color:#fff; text-decoration:underline;}
.formNotice a:hover {text-decoration:none;}

/* Banner */
.banner {padding:0 20px 50px 20px; background:#fff url(/images/farego.jpg) no-repeat center center; background-size:cover; min-height:486px; color:#fff; display:flex; align-items:flex-end;}
.banner .level1Title {color:#fff; font-family:'SegoeUI'; font-weight:700;}
.banner p {font-family:'SegoeUI'; font-weight:200; font-size:44px; line-height:46px; margin-left:180px;}

.bannerContainer {display:flex; flex-wrap:wrap;}
.bannerTitle {order:2; flex:0 0 100%;}
.bannerLinks {order:1; flex:0 0 100%;}
.bannerLinks .col-md-6 > div {border-bottom:1px solid #fff; margin-bottom:20px; min-height:90px; background-repeat:no-repeat; background-position:50% -20px;}
.bannerLinks .aboutLink {background-image:url(/images/about-sb.jpg);}
.bannerLinks .qaLink {background-image:url(/images/article-qa.jpg);}

/* Welcome */
.welcome {color:#007AC3;}

/* Intro */
.intro {background:#e6f2f9;}
.intro .level2Title {font-size:40px; color:#003872; margin-bottom:20px;}
.intro .welcomeText {font-size:20px; color:#007AC3;}
.intro .level3Title {font-size:20px; font-weight:700; margin-bottom:12px; margin-top:4px;}
.intro .btn-primary::before {transform:rotate(90deg);}

/* About */
.about p {padding:0 10px;}

/* Benefits */
.benefits .box {padding-left:90px; height:calc(100% - 25px);}
.benefitsList {display:flex; text-align:center; justify-content:center; font-size:15px; margin-bottom:25px;}
.benefitsList div {padding:0 12px;}
.benefitsList div img {display:block; width:58px; margin:0 auto 8px auto;}

/* Transport */
.author {display:flex; align-items: flex-end; margin:0 0 12px 0; justify-content:flex-end;}
.author div {flex:0 0 auto; max-width:50%;}
.author div:last-child {flex:0 0 140px; max-width:140px;}
.author p {padding-right:5px; text-align:right;}
.author img {margin-top:0;}
.transport .readMoreMobile {display:none;}
.transport a.imageLink {display:block; margin:0 0 40px 0;}
.transport a.imageLink img {display:block; width:100%; max-width:360px; height:auto; transform:scale(1); transition: all 0.2s ease-out; margin:0 auto;}
.transport a.imageLink:hover img {transform:scale(1.05);}
a.videoLink {display:block; overflow:hidden; position:relative;}
a.videoLink::before {content:""; position:absolute; width:25px; height:39px; background:url(/images/play.svg) no-repeat 50% 50%; z-index:2; left:30px; bottom:30px;}
a.videoLink img {width:100%; max-width:100%; height:auto; transform:scale(1); transition:all 0.3s ease-out;}
a.videoLink:hover img {transform:scale(1.05);}
.transportLinks {display:flex; flex-wrap:wrap; align-content:space-between; justify-content:center; padding-bottom:20px;}

/* Links */
.section.links {padding-bottom:20px;}
.linkText {font-family:'SegoeUI'; font-weight:200; border-top:1px solid #003872; border-bottom:1px solid #003872; padding:16px 20px 20px 20px; font-size:25px; line-height:34px; font-style:italic;}
.linkList {list-style:none; display:flex; flex-wrap:wrap; margin-bottom:0;}
.linkList li {flex:0 0 50%; max-width:50%; margin-bottom:20px; padding-right:20px;}
.linkList li a {position:relative; min-height:37px; display:inline-flex; align-items:center; padding-left:44px; font-size:18px; font-family:'SegoeUI'; font-weight:700; color:#9C9C9C;}
.linkList li a::before {content:""; position:absolute; top:0; left:0; width:37px; height:37px; background:#007AC3 url(/images/arrow-white.svg) no-repeat center center;}
.linkList li a:hover {color:#007AC3;}

/* Articles */
.articles a {display:block;}
.articles a span {display:block;}
.articles a span.articleImg {overflow:hidden;}
.articles a span.articleImg img {transition:all 0.3s ease-out;}
.articles a:hover span.articleImg img {transform:scale(1.1);}
.articles a span.articleTitle {min-height:37px; position:relative; display:inline-flex; align-items:center; padding-left:44px; color:#9C9C9C;}
.articles a span.articleTitle::before {content:""; position:absolute; top:0; left:0; width:37px; height:37px; background:#007AC3 url(/images/arrow-white.svg) no-repeat center center;}
.articles a:hover span.articleTitle {color:#007AC3;}

/* Model */
.modal-content .close {float:none; font-size:24px; color:#007AC3; text-shadow:none; opacity:1; position:absolute; right:0; top:0; background-color:#fff; width:30px; height:30px; border-radius:50%; border:1px solid #707070; outline:none; transition:all 0.5s ease-out; z-index:2;}
.modal-content .close .close-inner {width:20px; height:20px; display:inline-block; position:relative; margin-top:-1px;}
.modal-content .close .close-inner::before {content:""; display:block; width:20px; height:2px; background:#007AC3; transform:rotate(45deg); position:absolute; top:50%; left:0;}
.modal-content .close .close-inner::after {content:""; display:block; width:20px; height:2px; background:#007AC3; transform:rotate(-45deg); position:absolute; top:50%; left:0;}
.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {opacity:1;}
.modal-content .close:hover {background:#007AC3;}
.modal-content .close:hover .close-inner::before, .modal-content .close:hover .close-inner::after {background:#fff;}
.modal-backdrop {opacity:0.84 !important; background:#fff;}
.modal-content {background-color:transparent; border:none; border-radius:0;}
#imageLoader {width:100%; max-width:768px; height:auto; margin:0 auto;}

/* Side Column */
.sideColumn {height:100%;}
.sideColumn .linkList {padding-left:0;}
.sideColumn .linkList li {flex:0 0 100%; max-width:100%; padding-right:0;}

/* Banners */
.banner.transportBanner {background-image:url(/images/banner-transport.jpg); min-height:280px;}
.banner.qaBanner {background-image:url(/images/banner-qa.jpg); min-height:280px;}

/* Carousel */
#carousel img {max-width:100%; height:auto; margin:0 auto;}
.slick-prev::before, .slick-next::before {color:#007AC3 !important;}
.slick-dots li.slick-active button:before {opacity:1 !important; background-color:#007AC3 !important;}
.slick-dots {bottom:-35px !important;}
.slick-dots li {width:12px !important; height:12px !important;}
.slick-dots li button:before {font-size:0 !important; opacity:1 !important; color:#fff !important; border:1px solid #003872 !important; border-radius:50% !important; background-color:#fff !important; width:12px !important; height:12px !important; transition:background-color 0.3s ease-out;}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {background-color:#007AC3 !important;}
.slick-prev:before, .slick-next:before {display:none !important;}
.slick-prev, .slick-next {width:30px !important; height:30px !important; z-index:2 !important;}
.slick-prev svg, .slick-next svg {width:100%; max-width:100%; height:auto;}
.slick-prev:hover svg path, .slick-next:hover svg path {stroke:#003872;}
.slick-prev {left:-30px !important;}
.slick-next {right:-30px !important;}
.carouselContainer {padding:0 30px;}


@media (max-width:1200px) {
	.level1Title {font-size:40px; line-height:46px;}
}

@media (min-width: 1200px) {
	.modal-dialog.modal-xl {max-width: 1140px;}
}

@media (max-width:992px) {
	.size12Text {font-size:16px;}
	.size14Text {font-size:16px;}
	.size15Text {font-size:16px;}
	/* About */
	.about .level3Title {margin-top:20px;}
	.about .level3Title br {display:none;}
	.about p {padding:0;}
	/* Links */
	.linkList {padding-left:20px;}
	/* Transport */
	.transport .box .row div:nth-child(2) p:first-child {font-size:16px;}
	/* Articles */
	.articles a {margin-bottom:20px;}
}

@media (max-width:768px) {
	/* Header */
	.headerContainer {flex-wrap:wrap;}
	.headerContainer .fgLogo {margin-top:-12px;}
	.bannerTitle {order:1;}
	.bannerLinks {order:2;}
	.bannerLinks .col-md-6 > div {margin-bottom:10px; min-height:10px; max-width:435px; margin-right:20px;}
	.bannerLinks .btn-primary {width:100%; text-align:left; height:auto; min-height:37px; line-height:18px; padding-top:6px; padding-bottom:6px;}
	.banner {padding:0 20px 20px 20px;}
	.banner .level1Title {margin-bottom:0;}
	/* Links */
	.linkList {margin-top:20px;}
	/* Banner */
	.banner .level1Title {font-size:44px; line-height:46px;}
	.banner p {font-size:34px; line-height:36px; margin-left:120px;}
	/* Transport */
	.transport .readMoreMobile {display:block;}
	.transport .readMoreDesktop {display:none;}	
}

@media (min-width:576px) {
	/* Model */
.modal-dialog {max-width:728px;}
}

@media (max-width:576px) {
	.level2Title {font-size:36px;}
	.level3Title {font-size:26px;}
	/* Links */
	.linkList li {flex:0 0 100%; max-width:100%;}
	/* Banner */
	.banner {padding:0 20px 40px 20px;}
	.banner p {margin-left:0}
}

@media (max-width:550px) {
	.benefits .box {padding-left:20px;}
	.boxTitle {transform:rotate(0); position:relative; bottom:auto; left:auto; transform-origin:top left;}
	/* Benefits */
	.benefitsList {flex-wrap:wrap; padding:0 20px;}
	.benefitsList div {margin-bottom:12px; min-width:110px;}
}

@media (max-width:479px) {
	/* Header */
	.headerContainer {flex-wrap:wrap; align-content:center;}
	.headerContainer .sbLogo {order:1; padding-bottom:0; flex:1 1 60%; max-width:60%; padding-right:16px;}
	.headerContainer .fgLogo {order:2; padding-bottom:0; flex:1 1 40%; max-width:40%;}
	.headerContact {order:3; flex:0 0 100%; max-width:100%; text-align:center; margin-top:5px;}
	.headerContainer .fgLogo {margin-top:0; text-align:right;}
}

@media (max-width:455px) {
	/* Banner */
	.banner {padding:0 20px 20px 20px;}
	.banner .level1Title {font-size:40px; line-height:42px;}
	.banner p {font-size:30px; line-height:32px;}
}

@media (max-width:380px) {
	/* Transport */
	.author img {margin-top:-10px;}
}

