/* 
Theme Name: Active Text
Theme URI: http://www.emtek.pl
Description: 
Author: Mateusz Skrzypczak
Author URI: http://www.emtek.pl
Version: 3.0
*/

* {margin: 0}
html, body {height: 100%}
body {margin: 0; padding: 0; background: #FFF}
table {margin: 0; padding: 0; border: 0; border-spacing: 0; border-collapse: collapse}
tr {vertical-align: top}
img {border: 0; max-width: 100%; height: auto}
input::-moz-focus-inner {border: 0; padding: 0}
hr {border: 0; border-top: 1px solid #EEE; height: 1px; background: none; margin: 1em 0}

html {font-family: Roboto, Arial, sans-serif; font-weight: 300; font-size: 16px; line-height: 1.875; color: #000}
body {background: #FFF; padding-left: 240px}
p {font-size: 1.125em; line-height: 1.6667; margin: 1em 0}
h1, h2, h3, h4 {margin: 0.85em 0; padding: 0; font-weight: 300; font-size: 1.125em; line-height: 1.25}
h1, .h1 {font-size: 2em}
h2, .h2 {font-size: 2em}
h3, .h3 {font-size: 1.75em; color: #44A22F}
h4, .h4 {font-size: 1.5em}
b, strong {font-weight: 500}

a {color: #44A22F; text-decoration: none}
a:hover {color: #333}

.alignleft {float: left; margin: 0.4em 1.5em 0.4em 0}
.alignright {float: right; margin: 0.4em 0 0.4em 1.5em}
.nowrap {white-space: nowrap}
.clear {clear: both}
.mobile-only {display: none}
.screen-reader-only {position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden}

.vcenter {position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%)}

header {position: fixed; top: 0; left: 0; bottom: 0; width: 240px; text-align: center}
header img {width: 120px; height: auto}
header h1 {display: inline-block; font-size: 1.25em; font-weight: 500; text-transform: uppercase; margin-bottom: 2.5em; padding: 1em 0 0.5em; border-bottom: 2px solid #E5E5E5}

header .menu-btn {display: none}
header .menu {padding-left: 60px}
header .menu ul {margin: 0 0 1.5em 0; padding: 0; list-style: none; text-align: left}
header .menu ul li {margin: 0; padding: 0; list-style: none; font-size: 0.875em; line-height: 32px}
header .menu ul li a {display: block; padding-left: 2em; color: #666; position: relative; transition: all 0.2s}
header .menu ul li a::before {content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 2px; display: inline-block; width: 7px; height: 7px; border-radius: 12px; background: #CCC; transition: all 0.2s}
header .menu ul li a:hover,
header .menu ul li.active a {font-weight: 500; color: #388627}
header .menu ul li a:hover::before,
header .menu ul li.active a::before {background: #44A22F; width: 10px; height: 10px; left: 0}
header .ue {width: 122px; height: 27px; background: url('img/ue.png') no-repeat bottom center / 122px 27px; padding-top: 1rem; border-top: 2px solid rgba(0,0,0,0.1); margin: 2rem auto 0 auto}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	header .ue {background-image: url('img/ue@2x.png')}
}

.language-switcher {margin: 0 auto; padding: 0; list-style: none; text-align: center}
.language-switcher li {display: inline-block; margin: 0; padding: 0 0.5rem 0 0.75rem; border-left: 2px solid #EEE; font-size: 0.75rem; text-transform: uppercase}
.language-switcher li:first-child {border: 0}
.language-switcher a {color: #767676; transition: all 0.2s}
.language-switcher a:hover {color: #44A22F; text-decoration: underline}
.language-switcher .current-lang a {color: #767676; font-weight: 500}
.language-switcher .current-lang a:hover {color: #44A22F}

footer {clear: both; margin: 4.125em 0}
footer .container {margin-right: 0}
footer p {margin: 0; font-size: 0.875em; line-height: 1.5; color: #767676; text-align: center; text-transform: uppercase}

.container {max-width: 720px; margin-right: 2.5em}

section {clear: both; position: relative; padding: 1.75em 0 3em 2.5em}
section.light-gray {background: #FAFAFA}
section.medium-gray {background: #F2F2F2}
section.dark-gray {background: #383a38; color: #FFF}
section ul:not(.wp-block-gallery) {margin: 0; padding: 0; list-style: none}
section ul:not(.wp-block-gallery) li {margin: 0; padding: 0 0 0 1.5em; list-style: none; position: relative}
section ul:not(.wp-block-gallery) li::before {content: ''; display: block; width: 0.3125em; height: 0.3125em; background: rgba(0,0,0,0.66); border-radius: 5px; position: absolute; top: 0.75em; left: 0.5em}

section.medium-gray a {color: #287D17}
section.medium-gray a:hover {color: #333}

section table {width: 100%; margin: 1.75em 0}
section table th {padding: 1em; background: #333; color: #FFF; font-weight: 500; font-size: 0.75em; text-transform: uppercase; text-align: left; white-space: nowrap}
section table td {padding: 1em 0.85em; background: #FFF; border-top: 1px solid rgba(0,0,0,0.05); font-size: 0.875em; line-height: 1.5}
section a {text-decoration: underline}
section.dark-gray a:hover {color: #BBB}
section p + h3 {margin-top: 2em}

section.about {min-height: 100vh; overflow: hidden; padding: 0}
section.about .vcenter {left: 40px}
section.about .text {float: left; max-width: 520px; margin-right: 3em; margin-bottom: 1.5em}
section.about p {position: relative; padding-left: 1.25em; color: rgba(255,255,255,0.85)}
section.about p:first-child {margin-top: 0.25em}
section.about p::before {content: ''; display: block; position: absolute; top: 0.4em; bottom: 0.4em; left: 0; width: 2px; background: #44A22F}
section.about p strong {font-size: 1.375em; line-height: 1.36; color: #FFF}
section.about .video {position: relative; float: right}
section.about .video::before {content: ''; display: block; position: absolute; width: 560px; height: 560px; top: calc(50% - 20px); left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.2), rgba(255,255,255,0)); z-index: 1}
section.about .video .monitor {position: relative; z-index: 2; width: 440px; height: 264px; padding: 20px 20px 98px 20px; background: url('img/monitor.png') no-repeat center / cover}
section.about .video video {width: 100%; height: 100%}
section.about .cta {clear: both}
section.about button {display: inline-block; background: url('img/chevron-down-green.png') no-repeat 1.35em center; padding: 0 1.75em 0 3.85em; border: 1px solid rgba(255,255,255,0.2); font-family: Roboto, Arial, sans-serif; font-weight: 300; font-size: 1.625em; line-height: 2.7; text-transform: uppercase; color: #FFF; cursor: pointer; transition: all 0.2s}
section.about button:hover {background-color: rgba(255,255,255,0.1)}

section.services ol {margin: 0; padding: 0; list-style: none; counter-reset: sct; display: flex; flex-wrap: wrap}
section.services ol li {counter-increment: sct; margin: 0 0 3% 0; padding: 1.625em 1.625em 1.625em 6em; width: calc(48.5% - 7.625em); background: #FFF; box-shadow: 0 1px 3px rgba(0,0,0,0.1); min-height: 4.8em; position: relative; display: flex; align-items: center; font-size: 1.25em; line-height: 1.2; font-weight: 500; color: #44A22F}
section.services ol li:nth-child(2n) {margin-left: 3%}
section.services ol li::before {content: counter(sct); display: block; position: absolute; top: 50%; left: 0; transform: translateY(-53%); width: 1.33em; font-family: 'Roboto Slab', serif; font-weight: 100; font-size: 4.5em; line-height: 1; text-align: center; color: rgba(0,0,0,0.1)}
section.services ol li strong {position: absolute; top: 50%; transform: translateY(-50%); padding-right: 1em}
section.services ol li a {color: #44A22F; text-decoration: none}
section.services ol li a:hover {color: #333; text-decoration: underline}

section.contact a {color: #4EBA36; text-decoration: none}
section.contact a:hover {color: #CCC; text-decoration: underline}

.wp-block-gallery {display: block; margin: 1.75em 0}
.wp-block-gallery .blocks-gallery-item {display: block; float: none; margin: 0 10px 10px 0; width: calc(50% - 10px)}
.wp-block-separator {border-top: 2px solid rgba(0,0,0,0.1); margin: 2em auto}

#skip-header {position: absolute; top: 0; left: 50%; transform: translateX(-50%); border: 0; border-radius: 0; background: #44A22F; color: #FFF; padding: 0.5rem; margin: 0.25rem; opacity: 0}
#skip-header:focus {opacity: 1}



@media (min-width: 1600px) {

body {padding-left: 440px}
header {left: 180px}

section {padding-left: 3.75em}
section.about .vcenter {left: 60px}

}



@media (min-width: 1800px) {

section.about .video::before {width: 640px; height: 640px}
section.about .video .monitor {width: 528px; height: 316px; padding: 24px 24px 118px 24px; margin-right: 1em}

}



@media (min-width: 1440px) {

section.about .video {margin-right: calc((100% - 1080px)/2)}

}



@media (max-width: 1365px) {

section.about .text {max-width: calc(100% - 420px - 3em); margin-right: 0}
section.about .video {float: right}
section.about .video::before {width: 480px; height: 480px}
section.about .video .monitor {width: 384px; height: 230px; padding: 18px 18px 86px 18px; margin-right: 1em}

}



@media (max-width: 1240px) {

section.about .text {max-width: calc(100% - 308px - 2em)}
section.about p {font-size: 1em}
section.about p strong {font-size: 1.25em}
section.about .video::before {width: 420px; height: 420px}
section.about .video .monitor {width: 282px; height: 169px; padding: 13px 13px 63px 13px; margin-right: 0.5em}

}



@media (max-width: 1023px) {

body {padding-left: 220px}
p {font-size: 1em; line-height: 1.625}
h1, .h1 {font-size: 1.75em}
h2, .h2 {font-size: 1.75em}
h3, .h3 {font-size: 1.5em}
h4, .h4 {font-size: 1.25em}

header {width: 220px}
header .menu {padding-left: 50px}

section table th {white-space: normal; line-height: 1.25}

section.about {padding-bottom: 1.5em}
section.about .vcenter {position: static; transform: none; padding: 40px 40px 0 40px}
section.about .text {float: none; max-width: 100%; margin-bottom: 2em}
section.about p {font-size: 0.875em}
section.about p strong {font-size: 1.25em}
section.about .video {float: none; margin-bottom: 1.5em}
section.about .video .monitor {margin: 0 auto}
section.about .cta {text-align: center}

section.services ol li {width: 100%; min-height: 2.4em; padding-left: 5em; padding-right: 0.75em; font-size: 1.125em}
section.services ol li:nth-child(2n) {margin-left: 0}
section.services ol li::before {width: 1.75em; font-size: 3em; transform: translateY(-55%)}

}



@media (max-width: 767px) {

body {padding-left: 0; padding-top: 60px}
header {bottom: auto; right: 0; width: 100%; height: 60px; z-index: 500; background: #FFF; box-shadow: 0 2px 3px rgba(0,0,0,0.1)}
header .vcenter {position: static; transform: none; padding: 14px 0}
header img {width: 32px; display: inline-block; vertical-align: middle; margin-right: 0.5em}
header h1 {margin: 0; padding: 0; border: 0; vertical-align: middle; font-size: 1rem}

header .menu {position: relative; z-index: 1; padding: 0}
header .menu-btn {position: absolute; top: -38px; left: 20px; display: block; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; background: none; font-size: 32px; cursor: pointer}
header .menu-btn span {display: block; position: relative; width: 1em; height: 0.125em; margin: 0.16em 0; border-radius: 0.1em; background: #333; opacity: 1; transition: all 0.25s}
header .menu ul {width: auto; padding-top: 0; margin-left: -20px; margin-right: -20px; box-shadow: 0 2px 3px rgba(0,0,0,0.1); max-height: 0; overflow: hidden; transition: all 0.6s; position: absolute; top: 13px; left: 0; right: 0; background: rgba(255,255,255,0.95)}
header .menu ul li {display: block; text-align: center; margin: 0; padding: 5px 0; border-top: 1px solid rgba(0,0,0,0.07)}
header .menu ul li a::before {display: none}

header .menu.expanded .menu-btn span:nth-child(1) {transform: rotate(45deg); transform-origin: 0 0; top: -2px}
header .menu.expanded .menu-btn span:nth-child(3) {transform: rotate(-45deg); transform-origin: 0% 100%; top: 1px}
header .menu.expanded .menu-btn span:nth-child(2) {opacity: 0}
header .menu.expanded ul {max-height: 258px} /*234*/

.language-switcher {position: absolute; right: calc(20px - 0.5rem); top: 0.875rem}

header .ue {position: fixed; bottom: 0; left: 0; right: 0; background-color: white; width: 100%; padding: 0.5rem 0; border: 0; margin: 0; background-position: center; transition: all 0.2s}
header .ue.collapsed {bottom: calc(-27px - 1rem); opacity: 0}

section {overflow-wrap: break-word}

}



@media (max-width: 639px) {

.container {margin-right: 1.25em}
section {padding-left: 1.25em}

section table {width: calc(100% + 2.5em); margin-left: -1.25em; margin-right: -1.25em}
section table th {padding: 1em 0.75em; font-size: 0.625em}
section table td {padding: 1em 0.5em; font-size: 0.75em}

section.about .vcenter {padding-left: 20px; padding-right: 20px}
section.about button {font-size: 1.25em; background-size: 1.5em auto}

}



@media (max-width: 374px) {

section.about .video {margin-left: calc((100vw - 280px)/-4)}
section table th {font-size: 0.5em}
section table td {font-size: 0.5em}

}