@charset "UTF-8";

/* cyrillic-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/DXI1ORHCpsQm3Vp6mXoaTa-j2U0lmluP9RWlSytm3ho.woff2) format('woff2');
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/DXI1ORHCpsQm3Vp6mXoaTZX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/DXI1ORHCpsQm3Vp6mXoaTT0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(fonts/MTP_ySUJH_bn48VBG8sNSq-j2U0lmluP9RWlSytm3ho.woff2) format('woff2');
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(fonts/MTP_ySUJH_bn48VBG8sNSpX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(fonts/MTP_ySUJH_bn48VBG8sNSj0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(fonts/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body, html {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    padding: 0;
    margin: 0;
    line-height: 1.3;
    font-weight: 300;
    color: #292c34;
    height: 100%;
}

.logo-marks-webb,
.logo-marks-webb_s,
.logo-marks-webb_g,
.logo-marks-webb_2019 {
    background: url(images/Markswebb_Internet.svg) no-repeat 0 0;
	background-size: contain;
    width:150px;
    height:150px;
    position: absolute;
    left: 5vw;
    top: 10vh;
    text-decoration: none !important;
}

.logo-marks-webb_s {
	left: 17vw;
	background-image: url(images/Markswebb_Business.svg);
}

.logo-marks-webb_g {
	left: 29vw;
	background-image: url(images/Markswebb_Mobile.svg);
}

.logo-marks-webb_2019 {
	left: 41vw;
	background-image: url(images/Markswebb_2019.svg);
}

.section {
    position: relative;
    height: 100%;
    min-height: 768px;
    background: url(images/welcome_new.jpg) no-repeat 122% 0;
    background-size: cover;
}

.article {
	position: absolute;
	min-height: 100%;
	background: #fff;
	width: 31.375rem;
	right: 0;
	top: 0;
	padding: 11.5625rem 5.313rem 0;
	transition: all 200ms linear 0s;
    box-shadow: 0 0 15px rgba(0,0,0,.15);
}

.logo__demo {
    width: 3.75rem;
    height: 1.625rem;
    position: absolute;
    top: 0.6875rem;
    right: 0.625rem;
    background: url(images/demo.svg) no-repeat 0 0;
}

a.logo {
    display: block;
    width: 140px;
    height: 26px;
    background: url(images/logo.svg) no-repeat 0 0;
    margin-bottom: 5.625rem;
}

.article__content {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.5;
}

.article__title {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: left;
}

.article__choice {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.63;
    padding: 5.9375rem 0 1.75rem;
}

.button {
    font-size: 1rem;
    position: relative;
    text-align: left;
    font-weight: 400;
    color: #ffffff;
    padding: 0 1.25rem;
    border-radius: 3px;
    display: block;
    max-width: 300px;
    margin-bottom: 1.313rem;
    height: 3.125rem;
    line-height: 3.125rem;
    opacity: 0.9;
    background-color: rgba(237,25,65,.9);
    text-decoration: none !important;
}

.button:hover {
    background-color: rgba(237,25,65,1);
}

.button:after {
    content: ">";
    font-size: 14px;
    position: absolute;
    right: 10px;
    transform: scaleY(2.5);
    color: #9f0e29;
    line-height: 20px;
    top: 50%;
    margin-top: -10px;
}

@media all and (max-width: 1450px) {
    .section {
        background-position: 103% 0%;
    }
}

@media all and (max-width: 1366px) {
    .article {
        right: 0;
        width: 28.125rem;
        padding: 5.125rem 3.875rem 0;
    }
	.logo-marks-webb,
	.logo-marks-webb_s,
	.logo-marks-webb_g {
		width: 140px;
		height: 140px;
	}
}

@media all and (max-width: 1128px) {

    .article {
        right: 0;
        width: 28.125rem;
        padding: 5.125rem 3.875rem 0;
    }
	.logo-marks-webb,
	.logo-marks-webb_s,
	.logo-marks-webb_g,
	.logo-marks-webb_2019 {
		left: 10vw;
		top: 5vh;
	}
	.logo-marks-webb_s {
		margin-top: 170px;
	}

	.logo-marks-webb_g {
		margin-top: 340px;
	}

	.logo-marks-webb_2019 {
		margin-top: 510px;
	}
}

@media all and (max-height: 700px) {
    .article {
        width: 28.125rem;
        padding: 5.125rem 3.875rem 0;
    }
}

@media all and (max-width: 950px) {
    .section {
		background-position: 100% 0;
	}
}

@media all and (max-width: 901px) {
    .article {
        width: 26.25rem;
        padding: 5.125rem 3.75rem 0;
    }
}

@media all and (max-width: 820px) {
    .section {
		background-position: 0 0;
	}
}

@media all and (max-width: 720px) {
	.article {
        width: 20.25rem;
    }
}

@media all and (max-width: 568px) {
    .article {
        min-height: 100%;
        background: #fff;
        width: 100%;
        right: 0;
        padding: 5.125rem 0 0;
    }
	.article__content {
		max-width: 350px;
		padding: 0 20px;
		margin: 0 auto;
	}
	a.logo {
		margin: 0 auto 5.625rem;
		width: 100%;
		max-width: 310px;
	}
}

/*iPad portrait media query*/
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    .section {
		background-position: 77% 0;
	}
}
/*iPad Pro portrait media query*/
@media all and (device-width: 1024px) and (device-height: 1366px) and (orientation:portrait) {
    .section {
		background-position: 77% 0;
	}
}