/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
*{margin:0;padding:0;}

* {-webkit-font-smoothing: antialiased !important;}
html {font-size: 100%;-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-weight: normal; line-height: 100%;
	text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; 
	overflow-x: hidden;
}

*::before, *::after,
.catDiv2 .item .catBG_l,
.catDiv2 .item:hover .catBG_l,
.catDiv2 .item .catBG_p,
.catDiv2 .item:hover .catBG_p {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
			box-sizing: border-box;
	-webkit-transition: all 700ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
	   -moz-transition: all 700ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
		 -o-transition: all 700ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
			transition: all 700ms cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}


body {
	width:100%; 
	color: #1b3138;
	background-color: #e4e5e6;
	font: 15px/200% "Lato", Tahoma, Verdana, sans-serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0em;
	overflow-x: hidden;
}
body::after_ {
	content: '';
	position: fixed;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 10000;
	transform: translateX(0);
	background-color: #fefefe;
	-webkit-transition: all 700ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
	   -moz-transition: all 700ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
		 -o-transition: all 700ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
			transition: all 700ms cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}
@font-face {
	font-family: 'fontello';
	src: url('./font/fontello.eot?80065337');
	src: url('./font/fontello.eot?80065337#iefix') format('embedded-opentype'),
		 url('./font/fontello.woff?80065337') format('woff'),
		 url('./font/fontello.ttf?80065337') format('truetype'),
		 url('./font/fontello.svg?80065337#fontello') format('svg');
	font-weight: normal;
	font-style: normal;
    }
.fontello {
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	speak: never;

	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	margin-right: .2em;
	text-align: center;
	/* opacity: .8; */

	/* For safety - reset parent styles, that can break glyph codes*/
	font-variant: normal;
	text-transform: none;

	/* fix buttons height, for twitter bootstrap */
	line-height: 1em;

	/* Animation center compensation - margins should be symmetric */
	/* remove if not needed */
	margin-left: .2em;

	/* You can be more comfortable with increased icons size */
	/* font-size: 120%; */

	/* Font smoothing. That was taken from TWBS */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-facebook {
	:before { content: '\f09a'; }
}


sub, sup {position: relative;font-size: 75%; line-height: 0; vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
b, strong {font-weight: 900;}
#content .art b,
#content .art strong {
	font-family: 'LatoLatinWebBlack';
	font-weight: normal;
}
i, em {font-style:italic;}
img {max-width: 100%;width: auto; height: auto;vertical-align: middle;border: 0;-ms-interpolation-mode: bicubic;}

*::selection {
	color: #fff;
	background: #1b3138;
}
*::-moz-selection {
	color: #fff;
	background: #1b3138;
}
:root {
  --sonicut-blue: #5aa6db;
  --sonicut-dark-blue: #1a3138;
  --sonicut-bg: #e4e5e6;
}

a, a:focus, a img, a:hover img, a:active, :active, :focus, button, button:focus, button:active {outline : 0; border : 0;}
a,a:hover, a span.back, a:hover span.back,
p.catHeader, p.catHeader:hover {
	color: var(--sonicut-blue);
	outline : none;
	text-decoration: none;
	z-index: 1000;
	pointer-events: auto;
	-webkit-transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		 -o-transition: all 0.5s ease;
			transition: all 0.5s ease;
}
a:hover {
	color: #383b43;
}

#resolution {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100px;
	height: 30px;
	color: #000;
	font-size: 1em;
}

.grid-lines {
    position: fixed;
	display: block;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-color: transparent;
    z-index: 0;
}
.container {
	margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}
.row {
    position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}
.grid-lines div:not(.row),
.grid-lines2 div:not(.row) {
    border-right: 1px solid rgba(0,0,0,0.05);
    height: 100%;
}
.ModBlock-faq .grid-lines div:not(.row),
.ModBlock-dlaczego .grid-lines div:not(.row) {
	border-right: 1px solid rgba(228,229,230,0.05);
}
#smart-slider .grid-lines div:not(.row),
footer .grid-lines div:not(.row) {
	border-right: 1px solid rgba(0,0,0,0.05);
	z-index: 1;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5 {
	float: left;
	position: relative;
    min-height: 1px;
    padding-left: 0;
    padding-right: 0;
    width: 16.6666%;
	box-sizing: border-box;
}



.top-block,
.content-block {
	display: flex; justify-content: left; align-items: center; height: 180px;
}
.top-block a.logo,
.top-block nav.top,
.top-block .lang-social {
	position: relative;
	float: left;
	display: block;
	margin-left: calc(100%/6);
	width: calc(100%/6);
	height: auto;
	z-index: 10;
}
.top-block nav.top {
	width: calc((100%/6)*3);
	margin-left: 0;
}
.top-block nav.top ul {
	display: flex; 
	flex-flow: raw wrap;
	width: 100%; 
	height: 180px; 
	align-items: stretch;
	align-content: center;
}
.top-block nav.top ul li {
	flex: 1;
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
	width: calc(100% / 3); 
	text-align: center; 
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.top-block nav.top ul li a {
	position: relative;
	font-size: 13px;
	font-weight: 900;
	font-style: normal;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #1a3138;
	width: 100%;
	height: 100%;
	line-height: 180px;
}
html.no-touchevents .top-block nav.top ul li a:hover {
	color: #1a3138;
	background-color: #f2f2f2;
}
html.no-touchevents .top-block nav.top ul li a::after,
html.no-touchevents .text_body .headers h2 a::after {
	content: ''; position: absolute; left: 30%; bottom: 43%; width: 0; height: 1px; background-color: black; transition: width 0.3s ease-in-out;
}
html.no-touchevents .top-block nav.top ul li a:hover::after {
	width: 40%;
	}
html.no-touchevents .top-block nav.top ul li a:not(:hover)::after,
html.no-touchevents .text_body .headers h2 a:not(:hover)::after {
	width: 0; transition: width 0.3s ease-in-out; left: auto; right: 30%;
	}
.top-block nav.top ul li a::before {
	
	} 
.top-block nav.top ul li a:hover::before {
	
	}
.top-block .lang-social {
	display: block; 
	float: left;
	height: 180px; 
	align-items: flex-start;
	align-content: flex-start;
	margin: 0;
}
.social-block {
	position: relative;
	display: block;
	float: left;
	width: calc(100vw/6);
	height: 90px;
	background-color: var(--sonicut-bg);
	margin: 0 calc((100vw/6)*2.5) 0 calc((100vw/6)*2.5);
	border-radius: 5px 5px 0px 0px;
	-webkit-box-shadow: 0px -5px 20px -9px rgba(66, 68, 90, 0.5);
	-moz-box-shadow: 0px -5px 20px -9px rgba(66, 68, 90, 0.5);
	 box-shadow: 0px -5px 20px -9px rgba(66, 68, 90, 0.5);
	z-index:10;
}
.top-block .lang-social .lang-box,
.lang-social .social-block {
	position: relative;
	display: block;
	float: left;
	width: 100%;
	height: 90px;
	background-color: #e9e9e9;
	margin: inherit;
	border-radius: inherit;
	-webkit-box-shadow: inherit;
	-moz-box-shadow: inherit;
	 box-shadow: inherit;
}
.top-block .lang-box .desc,
.social-block p.desc {
	display: block;
	text-align: center;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 2px;
	color: #abacac;
}
.top-block .lang-social .lang-box ul {
	width: 100%; 
	display: flex; 
	justify-content: center; 
	padding: 30px 0 0;
	list-style: none;
}
.top-block .lang-social .lang-box ul::before {
	content: '';
	position: absolute;
	left: 0; 
	top: 35px; 
	width: 100%; 
	height: 20px; 
	background-color: #f2f2f2;
	z-index: 0;
}
.top-block .lang-social .lang-box ul li {
	width: 30px; margin: 0 2px;
	text-align: center;
	z-index: 1;
	
}
.top-block .lang-social .lang-box ul li.lang-active {
	background-color: #fff;
}
.top-block .lang-social .lang-box ul li a {
	font-size: 13px;
	font-weight: 900;
	font-style: normal;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sonicut-dark-blue);
	text-align: center;
}
.top-block .lang-social .lang-box ul li a:hover {
	color: var(--sonicut-blue);
}
.top-block .social-block {
	background-color: #f1f7fc;
}
.logos-block {
	display: flex; justify-content: center; align-items: flex-start;
	height: 30px;
	width: 100%;
	text-align: center;
	margin: 28px 0 2px;
}
.logos-block a {
	
}
.social-block .icon {
	position: relative;
	display: block;
	float: left;
	width:30px;
	height: 30px;
	margin: 0 8px;
	opacity: 0.4;
	-webkit-transition: all 700ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
	   -moz-transition: all 700ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
		 -o-transition: all 700ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
			transition: all 700ms cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}
.logos-block a:hover .icon {
	opacity: 1;
}


.content-block,
main,
.modBlock,
.catDiv2,
.team,
.world,
.content-text,
.video-wide {
	position: relative;
	float: left;
	display:block;
	width: 100%;
	height: auto;
	z-index: 2;
}
.video-wide {
	margin: 100px 0 0 0;
}
.video-wide iframe {
	text-align: center;
	margin: 0 auto !important;
	width: calc(100vw/2) !important;
	height: calc(50vw*3/5) !important;
	box-shadow: 0 20px 30px -20px rgba(0,0,0,0.5)
}
.modBlock.division {
	
}
.modBlock.division h3,
.team h3,
.world h3,
.content-text h1,
.content-text .header h2 {
	width: calc((100%/6)*2);
	margin: -43px auto 0;
	text-align:center;
	font-size: 6em;
	line-height: 90%;
	text-transform: uppercase;
	font-weight: 900;
	color: var(--sonicut-dark-blue);
	text-shadow: 0 7px 12px rgba(0, 0, 0, 0.2);
}

.sonicut-slider div#n2-ss-4 .n2-ss-layers-container .sonicHeader1 h2 a {
	text-shadow: 2px 2px 10px rgba(255, 255, 255,0.9);
}

.catDiv2 {
	display: block; 
	width: 100%; 
	height: auto;
}
.catDiv2 .item {
	position: relative;
	display: block;
	float: left;
	/* display: flex;  */
	/* justify-content: flex-start;  */
	/* align-items: stretch;  */
	width: calc(50%); 
	height: 750px;
	text-align: center; 
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	
}
/* 
.catDiv2 .item:nth-child(2)::before {
	right: 0;
	left: calc(100vw/6);
}
.catDiv2 .item::before {
	position: absolute;
	top: 0px;
	right: calc(100vw/6);
	bottom: 0px;
	left: 0px;
	opacity: 0.35;
	content: "";
}
.catDiv2 .item:hover::before {
	opacity: 0.75;
}
 */
 
 .catDiv2 .catBG_l,
 .catDiv2 .catBG_p {
	position: absolute;
	display: block;
	width: calc((100vw/6)*2);
	height: 750px;
	opacity: 0.35;
}
.catDiv2 .catBG_p {
	right: 0;
}
.catDiv2 .item:hover .catBG_l,
.catDiv2 .item:hover .catBG_p {
	opacity: 0.75;
}
 
 
.catDiv2 .item img {
	position: absolute;
	z-index:1;
	width: calc(100vw/4);
	height: auto;
	right: calc(100vw/24);
	top: 30px;
}
.catDiv2 .item:nth-child(2) img {
	right: inherit;
	left: calc(100vw/24);
	border: none;
}
.catDiv2 .item a.catHeader,
.catDiv2 .item p.catHeader {
	position: relative;
	display: block;
	float: right;
	z-index:2;
	background-color: var(--sonicut-blue);
	color: white;
	line-height: 1em;
	padding: 0 10px 2px 10px;
	margin-right: calc(100%/3);
	margin-top: -40px;
	text-transform: uppercase;
	font-size: 2em;
	font-weight: 900;
}
.catDiv2 .item:nth-child(2) a.catHeader,
.catDiv2 .item:nth-child(2) p.catHeader {
	float: left;
	right: inherit;
	left: 0;
	margin-right: inherit;
	margin-left: calc(100%/3);
}
.catDiv2 .item a.catHeader:hover,
.catDiv2 .item p.catHeader:hover {
	background-color: var(--sonicut-dark-blue);
}
.catDiv2 .item a.catHeader::before,
.catDiv2 .item p.catHeader::before {
	content: '';
	position: absolute;
	display: block;
	width: 2px;
	height: 55px;
	right: 0;
	background-color: var(--sonicut-blue);
}
.catDiv2 .item:nth-child(2) a.catHeader::before,
.catDiv2 .item:nth-child(2) p.catHeader::before {
	right: inherit;
	left: 0;
}
.catDiv2 .item a.catHeader:hover::before,
.catDiv2 .item p.catHeader:hover::before {
	background-color: var(--sonicut-dark-blue);
}
.team {
	width: 95%;
	margin: 50px 2.5% 0 2.5%;
}
.team h3 {
	position: relative;
	width: calc((100vw/6)*4);
	color: #fff;
	margin: 20px auto -160px;
	top:-43px;
	z-index:2;
}
.team-photo .overlay {
	position: absolute;
	display: block;
	width: 100%;
	top: 150px;
	margin: 0 auto;
	text-align: center;
	font-size: 2em;
	font-style: italic;
	color: #fff;
}
.world {
	padding-top: 200px;
	margin-top: 100px;
	background: rgb(228,229,230);
	background: linear-gradient(180deg, rgba(228,229,230,0) 0%, rgba(228,229,230,1) 25%, rgba(228,229,230,1) 100%);
}
.world h3 {
	position: relative;
	width: 90%;
	color: #fff;
	margin: 0 auto -120px;
	z-index:2;
}
.world-class-logo {
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	text-align: center;
	top: 0;
}
.world-map {
	position: relative;
	display: block;
	float: left;
	width: 100%;
	background-color: #e4e5e6;
	text-align: center;
}
.world-map .overlay {
	position: relative;
	display: block;
	float: none;
	width: calc(100vw/2);
	margin: 0 auto;
	top: -50px;
}
.content-text {
	margin: 100px 0 100px;
}
.content-text h1 {
	font-size: 4em;
	text-align: left;
	margin: 0 0 50px calc((100%/6)*2);
	color: var(--sonicut-blue);
	text-shadow: none;
	font-weight: 900;
}
.content-text .header h2,
.category-desc {
	font-size: 2em;
	text-align: left;
	margin: -40px 0 50px calc((100%/6)*2);
	color: var(--sonicut-dark-blue);
	text-shadow: none;
	font-weight: 300;
	font-style: italic;
	text-transform: none;
}
.text_body {
	position: relative;
	display: block;
	float: left;
	width: calc(100% - (100%/6)*3);
	padding: 0 0 0 calc((100%/6)*2);
}
figure.full-art + div.text_body {
	padding: 0 0 0 0;
}
figure.full-art.wide + div.text_body {
	padding: 0 0 0 calc((100%/6)*2);
}

figure.full-art {
	position: relative;
	display: block;
	float: left;
	width: 50%;
	height: auto;
	text-align: right;
}
figure.full-art.wide {
	width: 100%;
	text-align: center;
}
figure.full-art img {
	height: 35vh;
	margin-bottom: 50px;
}
figure.full-art.wide img {
	height: 50vh;
}
figure.full-art-bg {
	position: absolute;
	display: block;
	width: calc((100vw/6)*4);
	left: calc(100vw/6);
	height: auto;
	z-index: 0;
	opacity: 0.2;
}
figure.full-art-bg img {
	width: 100%;
	height: auto;
}

.text_body h3,
.catsChildren h2.catHeader,
.world-map .overlay h2 {
	position: relative;
	display: block;
	float: none;
	width: calc(100vw/6);
	margin-left: calc(-100vw/6);
	font-size: 1.25em;
	text-transform: uppercase;
	font-weight: 900;
}
.text_body .headers {
	position: relative;
	display: block;
	float: left;
	width: 100%;
	height: auto;
	margin: 35px 0;
}
.text_body .headers h2 {
	position: relative;
	float: left;
	font-size: 1.75em;
	text-transform: uppercase;
	font-weight: 900;
	padding: 10px;
}
.text_body .headers h2 a::after {
	left: 0; 
	bottom: 0;
}
.text_body .headers h2 a:hover::after {
	width: 100%;
	}
.text_body .headers h2 a:not(:hover)::after {
	right: 0;
}
.world-map .overlay h2 {
	float: left;
	width: 46%;
	text-align: right;
	padding-right: 3%;
	margin-left: 0;
}
.world-map .overlay h2 strong {
	font-size: 85%;
	opacity: 0.35;
	padding: 5px;
	background-color: white;
}
.world-map .overlay h2 strong:before {
	content: '';
	position: absolute;
	left: 0; 
	bottom: 0px; 
	width: calc(100vw/2); 
	height: 1px; 
	background-color: #bbb;
}
.world-map .overlay p {
	position: relative;
	display: block;
	float: left;
	width: 46%;
	text-align: left;
	padding-left: 3%;
	margin-bottom: 10px;
}
.catsChildren h2.catHeader {
	margin-left: 0;
	margin-bottom: 20px;
}
.catsChildren .catDesc p {
	width: calc(100vw/6);
}
.cat-children,
.catsChildren {
	position: relative;
	display: block;
	float: left;
	width: 100%;
	height: auto;
}
.catsChildren.c2 {
	width: calc((100%/6)*2);
}
.catsChildren.c2:nth-child(1) {
	margin-left: calc(2*(100%/6));
}
.catsChildren img.catImage {
	position: relative;
	float: left;
	width: calc(100vw/12);
	margin-left: calc(calc(-100vw/12) + calc(-100vw/24));
}
main .text_body ul {
	list-style: square inside none;
	width: 75%;
	padding-left: 0;
	margin-bottom: 0;
	list-style-position: outside;
}
main .text_body ul li {
	float: none;
	position: relative;
	margin: 0 0 0 50px;
	padding-left: 10px;
}
main ul.pageNav {
	
}
main ul.pageNav li.previous,
a span.back {
	position: relative;
    float: left;
    display: inline-block;
    padding: 12px 12px 9px;
    margin: 0 15px 15px 0;
    top: -8px;
    color: #fff;
    background-color: var(--sonicut-blue);
    line-height: 100%;
    font-size: 1.5em;
    vertical-align: middle;
}
a:hover span.back {
	background-color: var(--sonicut-dark-blue);
	color: #fff;
}
.simple {
	position: absolute;
	top: 180px;
	width: 100vw;
	height: 100vw;
	left: 0;
	text-align:center;
	font-size: 15em;
	font-weight: 900;
	color: rgba(0,0,0,0.03);
}
main ul.pageNav li.previous:before,
a span.back:before {
	content: '\e812';
    font-family: 'fontello';
}
main ul.pageNav li.next {
	position: relative;
    float: left;
    display: inline-block;
    padding: 12px 12px 9px;
    margin: 0 15px 15px 0;
    top: -8px;
    color: #fff;
    background-color: var(--sonicut-blue);
    line-height: 100%;
    font-size: 1em;
    vertical-align: middle;
}
main ul.pageNav li.next:before {
	content: '\e813';
    font-family: 'fontello';
}
footer {
	position: relative;
	display: block;
	float: left;
	height: auto;
	width: 100%;
	text-align: center;
	padding: 10px 0;
	background-color: var(--sonicut-blue);
	color: #fff;
	line-height: 1.4em;
}
footer .menu-footer {
	position: relative;
	display: block;
	float: left;
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}
footer .menu-footer ul li.aos-init {
	opacity: 1 !important;
	transform: inherit !important;
}
footer .menu-footer ul li a {
	font-size: 1em;
	font-weight: 900;
	color: #fff;
	text-transform: uppercase;
}
.cookiesBlock {
	position: fixed;
	bottom: 10px;
	left: 10px;
	display: block;
	padding: 10px;
	background-color: var(--sonicut-dark-blue);
	width: 300px;
	height: auto;
	border-radius: 5px;
	-webkit-box-shadow: 0px -5px 20px -9px rgba(66, 68, 90, 0.5);
	   -moz-box-shadow: 0px -5px 20px -9px rgba(66, 68, 90, 0.5);
	        box-shadow: 0px -5px 20px -9px rgba(66, 68, 90, 0.5);
	z-index:20;
}
.cookiesBlock h3 {
	font-size: 1.0em;
	font-weight: 900;
	letter-spacing: 4px;
	color: #fff;
	margin-top: 5px;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.cookiesBlock button {
	padding: 2px 8px;
	margin: 8px 5px 3px;
	background-color: var(--sonicut-blue);
	color: #fff;
	border-radius: 3px;
	text-transform: uppercase;
	font-size: 0.85em;
}
.cookiesBlock button#reject-cookies {
	background-color: #315a65;
}
iframe {
	position: relative;
	display: block;
	width: calc((100vw/6)*2) !important;
	margin: 20px 0 0;
}

.corner-left,
.corner-right {
	position: fixed;
	width: 400px;
	top: calc(180px + 300px); /* wysokość top-block + połowa szerokości */
	text-transform: uppercase;
	font-weight: 900;
	font-size: 1em;
	line-height: 1.5em;
	letter-spacing: 0.2em;
	transform: rotate(90deg);
	/* Legacy vendor prefixes that you probably don't need... */
	/* Safari */
	-webkit-transform: rotate(90deg);
	/* Firefox */
	-moz-transform: rotate(90deg);
	/* IE */
	-ms-transform: rotate(90deg);
	/* Opera */
	-o-transform: rotate(90deg);
	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
	z-index: 5;
	
	animation-duration: 0.75s;
	animation-timing-function: cubic-bezier(0, 0, 0.35, 1); 
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
	
	opacity: 0;
}
@keyframes drive-in-left {
	0% {
		left: -50px;
	}
	100% {
		left: calc(-200px + calc(100%/12));
		opacity: 1;
	}
}
@keyframes drive-in-right {
	0% {
		right: -50px;
	}
	100% {
		right: calc(-200px + calc(100%/12));
		opacity: 1;
	}
}
.corner-left {
	animation-name: drive-in-left;
	left: calc(-200px + calc(100%/12)); /* połowa szerokości + 20px */	
}
.corner-right {
	animation-name: drive-in-right;
	right: calc(-200px + calc(100%/12)); /* połowa szerokości + 20px */	
}