@import url("https://fonts.googleapis.com/css?family=Mukta+Malar:400,500,700,800&display=swap&subset=latin-ext");
html, body
{
background: white;
color: #333333;
font-size: 20px;
font-weight: 500;
font-family: 'Mukta Malar', sans-serif;
}
body
{
overflow-x: hidden;
}
body.caseStudyBody
{
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/case-study-bg.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
}
*
{
margin: 0;
padding: 0;
border: none;
outline: none;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:focus
{
outline: none;
}
input, textarea, select
{
font-family: 'Mukta Malar', sans-serif;
font-weight: 500;
}
a
{
color: black;
text-decoration: none;
}
a:hover
{
text-decoration: none;
}
a, label, input[type=button], input[type=submit]
{
cursor: pointer;
}
.clear 
{
width: 100%;
height: 0px;
display: block;
overflow: hidden;
clear: both;
}
.clear hr
{
display: none;
}
.floatleft
{
float: left;
}
.floatright
{
float: right;
}
.hidden
{
display: none;
}
::-webkit-input-placeholder { opacity: 1;
}
::-moz-placeholder { opacity: 1;
}
:-ms-input-placeholder { opacity: 1;
}
:-moz-placeholder { opacity: 1;
} .noselect {
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }  .c-hamburger
{
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 35px;
height: 35px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
}
.c-hamburger:focus
{
outline: none;
}
.c-hamburger span {
display: block;
position: absolute;
top: 15px;
left: 0px;
right: 0px;
height: 5px;
background: black;
}
.c-hamburger span::before,
.c-hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 5px;
background-color: black;
content: "";
}
.c-hamburger span::before {
top: -10px;
}
.c-hamburger span::after {
bottom: -10px;
}
.c-hamburger--htx {
background: transparent;
}
.c-hamburger--htx span {
}
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s;
}
.c-hamburger--htx span::before {
transition-property: top, transform;
}
.c-hamburger--htx span::after {
transition-property: bottom, transform;
} .c-hamburger--htx.is-active {
background: transparent;
}
.c-hamburger--htx.is-active span {
background: none;
}
.c-hamburger--htx.is-active span::before {
top: 0;
transform: rotate(45deg);
}
.c-hamburger--htx.is-active span::after {
bottom: 0;
transform: rotate(-45deg);
}
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
transition-delay: 0s, 0.3s;
}  header
{
width: 100%;
height: 120px;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
background: transparent;
-webkit-transition: background 0.3s ease, height 0.3s ease;
-moz-transition: background 0.3s ease, height 0.3s ease;
-o-transition: background 0.3s ease, height 0.3s ease;
transition: background 0.3s ease, height 0.3s ease;
}
header.scrolled
{
height: 60px;
background: rgba(255,255,255,0.8);
}
.headerWhite4CaseStudy
{
width: 100%;
height: 120px;
background: white;
}
header .center
{
max-width: 1600px;
margin: 0 auto;
position: relative;
}
header #mobileMenu
{
display: none;
}
header .gradient
{
width: 100%;
height: 137px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
display: block;
background: linear-gradient(#fff 0%, rgba(252, 252, 253, 0) 100%);
opacity: 0.92;
}
header .logo
{
width: 132px;
height: 57px;
position: absolute;
left: 120px;
top: 44px;
z-index: 501;
-webkit-transition: top 0.3s ease, width 0.3s ease, height 0.3s ease;
-moz-transition: top 0.3s ease, width 0.3s ease, height 0.3s ease;
-o-transition: top 0.3s ease, width 0.3s ease, height 0.3s ease;
transition: top 0.3s ease, width 0.3s ease, height 0.3s ease;
}
header.scrolled .logo
{
height: 30px;
top: 15px;
}
header .logo:before,
header .logo:after
{
content: " ";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/logo.svg) no-repeat 0 center;
background-size: contain;
-webkit-transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
-moz-transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
-o-transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
}
header .logo:after
{
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/logo4scroll.png) no-repeat 0 center;
background-size: contain;
opacity: 0;
}
header.scrolled .logo:before
{
opacity: 0;
}
header.scrolled .logo:after
{
opacity: 1;
}
header .logo strong
{
display: none;
}
header ul
{
width: 100%;
position: absolute;
right: 120px;
top: 0;
z-index: 500;
display: block;
list-style: none;
text-align: right;
}
header ul li
{
padding: 24px 0 0 0;
margin: 0 0 0 110px;
position: relative;
display: inline-block;
vertical-align: top;
-webkit-transition: padding 0.3s ease;
-moz-transition: padding 0.3s ease;
-o-transition: padding 0.3s ease;
transition: padding 0.3s ease;
}
header.scrolled ul li
{
padding: 15px 0 0 0;
}
header ul li a
{
padding: 10px 0;
display: inline-block;
vertical-align: top;
color: black;
font-size: 22px;
line-height: 28px;
-webkit-transition: color 0.3s ease, background 0.3s ease;
-moz-transition: color 0.3s ease, background 0.3s ease;
-o-transition: color 0.3s ease, background 0.3s ease;
transition: color 0.3s ease, background 0.3s ease;
}
header ul li a:hover
{
color: #40B494;
}
header ul li.crisismenu a
{
padding-left: 14px;
padding-right: 14px;
color: white;
border: 1px solid #41b495;
background: #41b495;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
header ul li.crisismenu a:hover
{
color: #40B494;
background: white;
}
header ul li:after
{
content: " ";
width: 78px;
height: 78px;
margin: 0 0 0 -39px;
position: absolute;
left: 50%;
top: -70px;
z-index: 10;
display: none;
background: #40B494;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
header ul li.active:after,
header ul li.current-menu-item:after
{
display: block;
}
header ul li.crisismenu.active:after,
header ul li.crisismenu.current-menu-item:after
{
display: none;
}
@media screen and (max-width: 1340px)
{
header ul li
{
margin: 0 0 0 80px;
}
}
@media screen and (max-width: 1200px)
{
header .logo
{
left: 30px;
}
header ul
{
right: 30px;
}
}
@media screen and (max-width: 1030px)
{
header #mobileMenu
{
position: absolute;
right: 30px;
top: 13px;
z-index: 505;
display: block;
}
.headerWhite4CaseStudy
{
height: 90px;
}
header .logo,
header.scrolled .logo
{
top: 15px;
}
header ul
{
width: 100%;
padding-top: 80px;
position: absolute;
left: 0;
top: -10000px;
z-index: 500;
background: white;
text-align: right;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
header.withMenu ul
{
top: 0;
opacity: 1;
}
header ul li,
header.scrolled ul li
{
padding: 20px 90px 20px 30px;
display: block;
}
header ul li:after
{
display: none !important;
}
header ul li a
{
font-size: 26px;
line-height: 28px;
}
header ul li.active a,
header ul li.current-menu-item a
{
color: #40B494;
}
header ul li.crisismenu.active a,
header ul li.crisismenu.current-menu-item a
{
color: #40B494;
background: white;
}
}  footer
{
padding: 120px 30px;
background: #222222 url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/footer-circle.svg) no-repeat right bottom;
background-size: 267px auto;
}
footer .center
{
width: 1140px;
max-width: 100%;
margin: 0 auto;
position: relative;
} footer .column
{
float: left;
}
footer .column.col1
{
width: 436px;
width: 38.17%;
}
footer .column.col2
{
width: 298px;
width: 26.14%;
}
footer .column.col3
{
width: 298px;
width: 26.14%;
}
footer .column.col4
{
width: 108px;
width: 9.55%;
} footer .copyright
{
position: absolute;
left: 0;
bottom: 0;
color: white;
font-size: 16px;
line-height: 40px;
opacity: 0.5;
} footer .logo
{
width: 110px;
height: 48px;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/logo-white.svg) no-repeat center center;
background-size: contain;
}
footer .logo strong
{
display: none;
} footer h4
{
margin: 0 0 16px 0;
color: white;
font-size: 20px;
line-height: 30px;
font-weight: bold;
}
footer p,
footer address
{
color: white;
color: rgba(255,255,255,0.5);
font-size: 18px;
line-height: 46px;
font-style: normal;
}
footer p a,
footer address a
{
color: rgba(255,255,255,0.5);
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
footer a[href^="tel:"]
{
font-size: 21px;
}
footer p a:hover,
footer address a:hover
{
color: white;
}
footer p small,
footer address small
{
padding: 10px 0 0 0;
display: block;
font-size: 14px;
line-height: 20px;
} footer ul.social
{
display: block;
list-style: none;
}
footer ul.social li
{
padding: 0 16px 0 0;
display: inline-block;
vertical-align: top;
}
footer ul.social li a
{
width: 28px;
height: 28px;
position: relative;
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
footer ul.social li a:after
{
content: " ";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
footer ul.social li a:hover:after
{
opacity: 1;
}
footer ul.social li a span
{
display: none;
}
footer ul.social li a.facebook
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/footer-facebook.svg);
}
footer ul.social li a.facebook:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/footer-facebook-hover.svg);
}
footer ul.social li a.linkedin
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/footer-linkedin.svg);
}
footer ul.social li a.linkedin:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/footer-linkedin-hover.svg);
}
@media screen and (max-width: 1220px)
{
footer .column.col1
{
width: 35%;
}
footer .column.col2
{
width: 298px;
width: 25%;
}
footer .column.col3
{
width: 298px;
width: 25%;
}
footer .column.col4
{
width: 108px;
width: 15%;
}
}
@media screen and (max-width: 1000px)
{
footer
{
padding: 70px 30px;
text-align: center;
}
footer .column
{
width: 100% !important;
padding-bottom: 40px;
float: none;
}
footer .logo
{
margin: 0 auto;
}
footer .copyright
{
display: block;
position: static;
}
footer ul.social li
{
padding: 0 8px;
}
}  section
{
padding: 0 30px;
position: relative;
z-index: 1;
}  .sideCircle
{
width: 512px;
height: 491px;
position: absolute;
z-index: 0;
display: block;
background: #e7ecf6;
opacity: 0.2;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
@media screen and (max-width: 1030px)
{
.sideCircle
{
display: none;
}
}  h1,
h2,
h3
{
color: black;
font-weight: bold;
letter-spacing: -0.01em;
}
h1
{
font-size: 50px;
line-height: 67px;
}
h2
{
font-size: 36px;
line-height: 48px;
text-align: center;
}
h3
{
font-size: 28px;
line-height: 37px;
letter-spacing: -0.01em;
text-align: center;
}
h1 strong,
h2 strong,
h3 strong
{
color: #40B494;
font-weight: bold;
}  #intro
{
height: 540px;
padding-top: 210px;
margin: 0 auto 50px auto;
background-size: cover !important;
}
#intro:after
{
content: " ";
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: -2px;
z-index: 0;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/intro-bottom-large.svg) no-repeat center bottom;
background-size: 102% auto;
}
#intro .center
{
max-width: 1140px;
margin: 0 auto;
position: relative;
z-index: 10;
}
#intro .whiteCircleButton
{
margin: 0 0 0 -44px;
position: absolute;
left: 50%;
bottom: -44px;
z-index: 50;
}
#intro .overlay
{
display: none;
}
@media screen and (max-width: 1590px)
{
#intro:after
{
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/intro-bottom.svg) no-repeat center bottom;
background-size: 1600px auto;
}
}
@media screen and (max-width: 1030px)
{
#intro
{
height: auto !important;
padding-top: 150px !important;
padding-bottom: 200px !important;
}
#intro h1
{
max-width: 600px;
margin: 0 auto;
}
#intro h1 br
{
display: none;
}
#intro .overlay
{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
display: block;
background: white;
opacity: 0.8;
}
#intro .center
{
text-align: center;
}
}  .whiteCircleButton
{
width: 88px;
height: 88px;
position: relative;
display: block;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/arrow-down-green.svg) no-repeat center center;
background-size: 13.29px auto;
box-shadow: 0px 60px 80px rgba(27, 48, 91, 0.15);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.whiteCircleButton:after
{
content: " ";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: block;
opacity: 0;
background: #40b494 url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/arrow-down-white.svg) no-repeat center center;
background-size: 13.29px auto;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.whiteCircleButton:hover:after
{
opacity: 1;
}  .btn
{
padding: 11px 32px 11px 32px;
display: inline-block;
background: #40b494;
border: 1.5px solid #40b494;
color: white;
font-size: 20px;
line-height: 34px;
font-weight: 500;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
-moz-transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
-o-transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.btn:hover
{
background: white;
color: #40b494;
box-shadow: 0px 15px 20px rgba(64, 180, 148, 0.16);
}  .imageTextBox
{
width: 354px;
height: 376px;
margin: 0 10px 40px 10px;
position: relative;
display: inline-block;
vertical-align: top;
overflow: hidden;
background-color: #F6F7F9;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
text-align: left;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-transition: box-shadow 0.3s ease;
-moz-transition: box-shadow 0.3s ease;
-o-transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
}
.imageTextBox:hover
{
box-shadow: 0px 40px 50px rgba(4, 31, 23, 0.1);
}
.imageTextBox.hidden
{
display: none;
} .imageTextBox .text
{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
display: block;
}
.imageTextBox .text .bg
{
width: 100%;
height: 135px;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(20, 30, 55, 0.8) 100%);
opacity: 1;
-webkit-transition: background 0.3s ease, height 0.3s ease, opacity 0.3s ease;
-moz-transition: background 0.3s ease, height 0.3s ease, opacity 0.3s ease;
-o-transition: background 0.3s ease, height 0.3s ease, opacity 0.3s ease;
transition: background 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}
.imageTextBox:hover .text .bg
{
height: 100%;
background: #40b494;
background: rgba(64,180,148,0.85);
background: linear-gradient(#40b494 0%, #40b494 100%);
opacity: 0.85;
}
.imageTextBox .text .t
{
width: 100%;
height: 100%;
padding: 64px 10.54% 0 10.54%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
display: block;
color: white;
font-size: 18px;
line-height: 36px;
letter-spacing: 0.02em;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.imageTextBox:hover .text .t
{
opacity: 1;
}
.imageTextBox.person .text .t
{
padding-top: 40px; font-size: 16px;
line-height: 32px;
} .imageTextBox .logo
{
width: 160px;
height: 48px;
position: absolute;
left: 32px;
bottom: 32px;
z-index: 10;
display: block;
background-repeat: no-repeat;
background-position: 0 center;
background-size: contain;
} .imageTextBox .name
{
position: absolute;
left: 35px;
bottom: 26px;
z-index: 10;
line-height: 36px;
}
.imageTextBox .name span,
.imageTextBox .name strong
{
color: white;
}
.imageTextBox .name span
{
font-size: 14.5px;
line-height: 36px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.imageTextBox .name strong
{
font-size: 24px;
line-height: 30px;
font-weight: bold;
} .imageTextBox .circleArrow
{
width: 48px;
height: 48px;
position: absolute;
right: 32px;
bottom: 32px;
z-index: 10;
display: block;
border: 1px solid white;
background: transparent;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.imageTextBox:hover .circleArrow
{
background: white;
}
.imageTextBox .circleArrow:before,
.imageTextBox .circleArrow:after
{
content: " ";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: block;
background-repeat: no-repeat;
background-position: center center;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.imageTextBox .circleArrow:before
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/arrow-right-green.svg);
opacity: 0;
}
.imageTextBox:hover .circleArrow:before
{
opacity: 1;
}
.imageTextBox .circleArrow:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/arrow-right-white.svg);
opacity: 1;
}
.imageTextBox:hover .circleArrow:after
{
opacity: 0;
}
@media screen and (max-width: 500px)
{
.imageTextBox
{
width: 100%;
margin: 0 0 40px 0;
display: block;
}
}     .hp
{
}
.hp .sideCircle
{
top: 1220px;
left: -382px;
} .hp #intro
{
height: 760px;
padding-top: 230px;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/intro-homepage.jpg) no-repeat center bottom;
}
.hp #intro h1
{
margin-bottom: 48px;
}  .hp #knowhow
{
width: 100%;
max-width: 1200px;
padding-top: 100px;
padding-bottom: 80px;
margin: 0 auto;
} .hp #knowhow .left
{
width: 700px;
padding: 50px 0 0 0;
float: left;
}
.hp #knowhow .left h2
{
padding: 0 0 24px 0;
text-align: left;
}
.hp #knowhow .left p
{
padding: 0 0 48px 0;
line-height: 40px;
} .hp #knowhow .right
{
width: 440px;
height: 444px;
position: relative;
right: -110px;
float: left;
}
.hp #knowhow .right ul
{
list-style: none;
}
.hp #knowhow .right a
{
width: 172px;
height: 172px;
padding: 98px 0 0 0;
position: absolute;
display: block;
background: white;
color: #1b305b;
font-size: 20px;
line-height: 29px;
font-weight: bold;
text-align: center;
box-shadow: 0px 40px 80px rgba(27, 48, 91, 0.12);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: background 0.3s ease, color 0.3s ease;
-moz-transition: background 0.3s ease, color 0.3s ease;
-o-transition: background 0.3s ease, color 0.3s ease;
transition: background 0.3s ease, color 0.3s ease;
}
.hp #knowhow .right a:hover
{
background: #40B494;
color: #40B494;
}
.hp #knowhow .right a.brand
{
left: 0;
top: 0;
}
.hp #knowhow .right a.content
{
right: 0;
top: 0;
}
.hp #knowhow .right a.communication
{
margin-left: -86px;
left: 50%;
bottom: 0;
}
.hp #knowhow .right a.nm
{
margin: 0 0 0 -86px;
left: 50%;
top: 103px;
background: #222222 url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/hp-knowhow-logo.svg) no-repeat center center;
background-size: 85px auto;
box-shadow: none;
}
.hp #knowhow .right a em
{
width: 96px;
height: 58px;
padding: 0 10px;
margin: -29px 0 0 -48px;
position: absolute;
left: 50%;
top: 50%;
display: block;
background: transparent;
color: white;
font-size: 20px;
line-height: 29px;
font-weight: bold;
text-align: left;
font-style: normal;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.hp #knowhow .right a:hover em
{
opacity: 1;
}
.hp #knowhow .right a.nm em
{
color: white;
background: #222222;
}
.hp #knowhow .right a:before,
.hp #knowhow .right a:after
{
content: " ";
width: 54px;
height: 50px;
position: absolute;
left: 50%;
top: 39.5px;
margin: 0 0 0 -27px;
display: block;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.hp #knowhow .right a:before
{
opacity: 1;
}
.hp #knowhow .right a:hover:before
{
opacity: 0;
}
.hp #knowhow .right a:after
{
opacity: 0;
}
.hp #knowhow .right a:hover:after
{
opacity: 0;
}
.hp #knowhow .right a.brand:before,
.hp #knowhow .right a.brand:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-brand-green.svg);
background-size: 54px auto;
}
.hp #knowhow .right a.brand:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-brand-white.svg);
}
.hp #knowhow .right a.content:before,
.hp #knowhow .right a.content:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-content-green.svg);
background-size: 46px auto;
}
.hp #knowhow .right a.content:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-content-white.svg);
}
.hp #knowhow .right a.communication:before,
.hp #knowhow .right a.communication:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-commnunication-green.svg);
background-size: 52px auto;
}
.hp #knowhow .right a.communication:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-commnunication-white.svg);
}
@media screen and (max-width: 1420px)
{
.hp #knowhow .right
{
right: 0;
}
}
@media screen and (max-width: 1220px)
{
.hp #knowhow .left
{
width: 100%;
padding: 0 0 40px 0;
float: none;
text-align: center;
}
.hp #knowhow .left h2
{
text-align: center;
}
.hp #knowhow .left p br
{
display: none;
}
.hp #knowhow .right
{
max-width: 100%;
margin: 0 auto;
float: none;
}
}  .hp #references
{
width: 100%;
max-width: 1200px;
padding-top: 50px;
padding-bottom: 100px;
margin: 0 auto;
text-align: center;
}
.hp #references h2
{
padding: 0 0 56px 0;
text-align: center;
}
.hp #references .button
{
padding: 30px 0 0 0;
text-align: center;
}   .aboutus
{
width: 100%;
overflow: hidden;
}
.aboutus .sideCircleHolder
{
width: 172px;
height: 491px;
position: absolute;
top: 540px;
right: 0px;
z-index: 0;
display: block;
overflow: hidden;
}
.aboutus .sideCircleHolder .sideCircle
{
left: 0;
top: 0;
} .aboutus #intro
{
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/intro-aboutus.jpg) no-repeat center bottom;
}  .aboutus #introText
{
max-width: 735px;
margin: 0 auto 0 auto;
padding-top: 50px;
padding-bottom: 100px;
text-align: center;
}
.aboutus #introText h2
{
padding: 0 0 24px 0;
}
.aboutus #introText p
{
line-height: 40px;
}  .aboutus #points
{
text-align: center;
}
.aboutus #points .center
{
max-width: 1140px;
margin: 0 auto;
}
.aboutus #points h2
{
padding: 0 0 60px 0;
}
.aboutus #points article
{
width: 464px;
margin: 0 106px 78px 106px;
display: inline-block;
vertical-align: top;
}
.aboutus #points article:nth-of-type(2n-1)
{
margin-left: 0;
}
.aboutus #points article:nth-of-type(2n)
{
margin-right: 0;
}
.aboutus #points article span,
.aboutus #points article span:after
{
width: 144px;
height: 144px;
margin: 0 auto 32px auto;
position: relative;
display: block;
background-color: white;
background-repeat: no-repeat;
background-position: center center;
box-shadow: 0px 40px 80px rgba(27, 48, 91, 0.12);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.aboutus #points article span:after
{
content: " ";
position: absolute;
left: 0;
top: 0;
background-color: #40b494;
box-shadow: none;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.aboutus #points article:hover span:after
{
opacity: 1;
}
.aboutus #points article span.sense
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-sense-green.svg);
background-size: 75px auto;
}
.aboutus #points article span.sense:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-sense-white2.svg);
background-size: 75px auto;
}
.aboutus #points article span.etics
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-etics-green.svg);
background-size: 52px auto;
}
.aboutus #points article span.etics:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-etics-white2.svg);
background-size: 52px auto;
}
.aboutus #points article span.knowledge
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-knowledge-green.svg);
background-position: 44px center;
background-size: 57px auto;
}
.aboutus #points article span.knowledge:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-knowledge-white2.svg);
background-position: 44px center;
background-size: 73px auto;
}
.aboutus #points article span.sincerity
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-sincerity-green.svg);
background-size: 64px auto;
}
.aboutus #points article span.sincerity:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-sincerity-white2.svg);
background-size: 64px auto;
}
.aboutus #points article h3
{
padding: 0 0 9px 0;
}
.aboutus #points article p
{
line-height: 40px;
}
@media screen and (max-width: 1240px)
{
.aboutus #points article
{
margin-left: 40px !important;
margin-right: 40px !important;
}
}
@media screen and (max-width: 1000px)
{
.aboutus #points article.animated span:after
{
opacity: 1;
}
}
@media screen and (max-width: 650px)
{
.aboutus #points article
{
width: auto;
display: block;
margin-left: 0px !important;
margin-right: 0px !important;
}
}  .aboutus #people
{
padding-top: 110px;
padding-bottom: 60px;
background: #F6F7F9;
}
.aboutus #people .center
{
max-width: 1140px;
margin: 0 auto;
}
.aboutus #people h2
{
padding-bottom: 56px;
text-align: center;
}
@media screen and (max-width: 1200px)
{
.aboutus #people
{
text-align: center;
}
}  .aboutus #guide
{
padding: 0;
}
.aboutus #guide .left,
.aboutus #guide .right
{
width: 50%;
float: left;
display: block;
padding: 125px 0;
background: white;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.aboutus #guide .left:hover,
.aboutus #guide .right:hover
{
background: #F6F7F9;
}
.aboutus #guide .left
{
border-right: 1px solid #F6F7F9;
text-align: right;
}
.aboutus #guide .left .text
{
width: 506px;
display: inline-block;
vertical-align: top;
text-align: left;
}
.aboutus #guide .right
{
padding-left: 64px;
}
.aboutus #guide h2
{
padding: 0 0 5px 0;
text-align: left;
}
.aboutus #guide p
{
padding: 0 0 40px 0;
}
.aboutus #guide
{
} .aboutus #guide .circleArrow
{
width: 48px;
height: 48px;
position: relative;
display: inline-block;
border: 1px solid #40B494;
background: transparent;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.aboutus #guide .left:hover .circleArrow,
.aboutus #guide .right:hover .circleArrow
{
background: #40B494;
}
.aboutus #guide .circleArrow:before,
.aboutus #guide .circleArrow:after
{
content: " ";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: block;
background-repeat: no-repeat;
background-position: center center;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.aboutus #guide .circleArrow:before
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/arrow-right-green.svg);
opacity: 1;
}
.aboutus #guide .left:hover .circleArrow:before,
.aboutus #guide .right:hover .circleArrow:before
{
opacity: 0;
}
.aboutus #guide .circleArrow:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/arrow-right-white.svg);
opacity: 0;
}
.aboutus #guide .left:hover .circleArrow:after,
.aboutus #guide .right:hover .circleArrow:after
{
opacity: 1;
} @media screen and (max-width: 1100px)
{
.aboutus #guide .left,
.aboutus #guide .right
{
width: 100%;
float: none;
padding: 100px 30px;
}
.aboutus #guide .left .text,
.aboutus #guide .right .text
{
width: auto;
display: block;
text-align: center;
}
.aboutus #guide .left
{
border: none;
border-bottom: 1px solid #F6F7F9;
}
.aboutus #guide h2
{
text-align: center;
}
}   .crisis
{
width: 100%;
overflow: hidden;
}
.crisis .sideCircleHolder
{
width: 172px;
height: 491px;
position: absolute;
top: 540px;
right: 0px;
z-index: 0;
display: block;
overflow: hidden;
}
.crisis .sideCircleHolder .sideCircle
{
left: 0;
top: 0;
} .crisis #intro
{
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/intro-crisis.jpg) no-repeat center bottom;
}
@media screen and (min-width: 1930px)
{
.crisis #intro
{
background-position: 11px 51%;
}
}  .crisis #introText
{
max-width: 1040px;
margin: 0 auto 0 auto;
padding-top: 50px;
padding-bottom: 80px;
text-align: center;
}
.crisis #introText h2
{
padding: 0 0 24px 0;
}
.crisis #introText p
{
margin: 0 0 40px 0;
line-height: 40px;
}
.crisis #introText .btn
{
}  .crisis #points
{
padding-bottom: 10px;
text-align: center;
}
.crisis #points .center
{
max-width: 1140px;
margin: 0 auto;
}
.crisis #points h2
{
padding: 0 0 60px 0;
}
.crisis #points article
{
width: 450px;
margin: 0 40px 70px 40px;
display: inline-block;
vertical-align: top;
}
.crisis #points article span,
.crisis #points article span:after
{
width: 144px;
height: 144px;
margin: 0 auto 32px auto;
position: relative;
display: block;
background-color: white;
background-repeat: no-repeat;
background-position: center center;
box-shadow: 0px 40px 80px rgba(27, 48, 91, 0.12);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.crisis #points article span:after
{
content: " ";
position: absolute;
left: 0;
top: 0;
background-color: #40b494;
box-shadow: none;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.crisis #points article:hover span:after
{
opacity: 1;
}
.crisis #points article span.capacity
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-capacity-green.svg);
background-size: 80px auto;
}
.crisis #points article span.capacity:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-capacity-white.svg);
background-size: 80px auto;
}
.crisis #points article span.communication
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-communication1-green.svg);
background-size: 80px auto;
}
.crisis #points article span.communication:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-communication1-white.svg);
background-size: 80px auto;
}
.crisis #points article span.consultation
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-consultation-green.svg);
background-size: 80px auto;
}
.crisis #points article span.consultation:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-consultation-white.svg);
background-size: 80px auto;
}
.crisis #points article span.future
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-future-green.svg);
background-size: 80px auto;
}
.crisis #points article span.future:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-future-white.svg);
background-size: 80px auto;
}
.crisis #points article span.online
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-online-green.svg);
background-size: 80px auto;
}
.crisis #points article span.online:after
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-online-white.svg);
background-size: 80px auto;
}
.crisis #points article h3
{
padding: 0 0 9px 0;
}
.crisis #points article p
{
line-height: 40px;
}
.crisis #points article p a
{
color: #40B494;
text-decoration: underline;
}
.crisis #points article p a:hover
{
text-decoration: none;
}
@media screen and (max-width: 1680px)
{
.crisis #points .clear
{
display: none;
}
}
@media screen and (max-width: 1000px)
{
.crisis #points article.animated span:after
{
opacity: 1;
}
}
@media screen and (max-width: 650px)
{
.crisis #points article
{
width: auto;
display: block;
margin-left: 0px !important;
margin-right: 0px !important;
}
}  .crisis #digital
{
padding-top: 60px;
padding-bottom: 110px;
background: #f6f7f9;
}
.crisis #digital .center
{
max-width: 700px;
margin: 0 auto;
}
.crisis #digital h2
{
padding-bottom: 26px;
text-align: center;
}
.crisis #digital p
{
line-height: 40px;
text-align: center;
}
.crisis #digital .person
{
min-height: 250px;
padding: 40px 0 0 390px;
margin: 50px 0 0 0;
position: relative;
}
.crisis #digital .person .image
{
width: 250px;
height: 250px;
position: absolute;
left: 0;
top: 0;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
box-shadow: -2px 14px 43px 0px rgba(37, 37, 37, 0.13);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.crisis #digital .person .image img
{
display: none;
}
.crisis #digital .person .text
{
font-size: 21px;
line-height: 40px;
}
.crisis #digital .person .text strong
{
font-size: 35px;
font-weight: bold;
}
.crisis #digital .person .text em
{
font-style: normal;
}
.crisis #digital .person .text a
{
color: #41b495;
font-weight: bold;
text-decoration: underline;
}
.crisis #digital .person .text a[href^="tel:"]
{
font-size: 24px;
}
.crisis #digital .person .text a:hover
{
text-decoration: none;
}
@media screen and (max-width: 800px)
{
.crisis #digital p br
{
display: none;
}
.crisis #digital .person
{
padding-left: 0;
}
.crisis #digital .person .image
{
position: static;
margin: 0 auto 40px auto;
}
.crisis #digital .person .text
{
text-align: center;
}
}   .whatWeDo
{
} .whatWeDo #intro
{
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/intro-whatwedo.jpg) no-repeat right bottom;
}  .whatWeDo #services
{
padding-top: 50px;
padding-bottom: 100px;
text-align: center;
}
.whatWeDo #services h2
{
padding: 0 0 20px 0;
}
.whatWeDo #services article
{
width: 394px;
padding: 130px 20px 0px 20px;
display: inline-block;
vertical-align: top;
}
.whatWeDo #services article .in
{
max-width: 100%;
min-height: 480px;
padding: 68px 68px 30px 68px;
position: relative;
background: #FAFBFD;
text-align: left;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.whatWeDo #services article .head
{
width: 100%;
height: 32px;
padding: 3px 128px 3px 0;
position: absolute;
left: 0;
top: -16px;
background: transparent;
color: white;
font-size: 20px;
line-height: 26px;
font-weight: bold;
text-align: center;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
border-top-right-radius: 8px;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.whatWeDo #services article:hover .head
{
background: #40B494;
}
.whatWeDo #services article .head .icon
{
width: 88px;
height: 88px;
position: absolute;
right: 40px;
top: -28px;
display: block;
background-color: #40b494;
background-repeat: no-repeat;
background-position: center center;
border: 1.7px solid #40B494;
box-shadow: 0px 30px 40px rgba(64, 180, 148, 0.24);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: border 0.3s ease;
-moz-transition: border 0.3s ease;
-o-transition: border 0.3s ease;
transition: border 0.3s ease;
}
.whatWeDo #services article:hover .head .icon
{
border-color: white;
}
.whatWeDo #services article.brand .head .icon
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-brand-bolder-white.svg);
background-size: 37px auto;
}
.whatWeDo #services article.content .head .icon
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-content-bolder-white.svg);
background-size: 30px auto;
}
.whatWeDo #services article.communication .head .icon
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-communication-bolder-white.svg);
background-size: 34px auto;
}
.whatWeDo #services article .head .title
{
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.whatWeDo #services article:hover .head .title
{
opacity: 1;
}
.whatWeDo #services article h3
{
padding: 0 0 24px 0;
text-align: left;
}
.whatWeDo #services article ul
{
counter-reset: ol-counter;
list-style: none;
font-size: 20px;
line-height: 26px;
letter-spacing: 0.02em;
}
.whatWeDo #services article ul li
{
counter-increment: ol-counter;
padding: 7px 0 7px 16px;
position: relative;
display: block;
}
.whatWeDo #services article ul li:before
{
content: counter(ol-counter) ". ";
content: " ";
width: 7px;
height: 7px;
position: absolute;
left: 0;
top: 15.5px;
display: block;
background: #40B494;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
@media screen and (max-width: 1000px)
{
.whatWeDo #services article.animated .head
{
background: #40B494;
}
.whatWeDo #services article.animated .head .icon
{
border-color: white;
}
.whatWeDo #services article.animated .head .title
{
opacity: 1;
}
}
@media screen and (max-width: 860px)
{
.whatWeDo #services h2 br
{
display: none;
}
.whatWeDo #services article
{
width: 100%;
padding-left: 0;
padding-right: 0;
}
}  .whatWeDo #workflow
{
padding-top: 100px;
padding-bottom: 100px;
background: #F6F7F9;
}
.whatWeDo #workflow h2
{
}
.whatWeDo #workflow article
{
max-width: 1140px;
margin: 0 auto;
}
.whatWeDo #workflow article .text
{
width: 950px;
padding: 90px 0;
margin: 0 0 0 190px;
position: relative;
float: left;
border-bottom: 1px solid #E1E2E3;
}
.whatWeDo #workflow article:last-of-type .text
{
border: none;
}
.whatWeDo #workflow article .text h3
{
width: 280px;
float: left;
text-align: left;
}
.whatWeDo #workflow article .text p
{
width: 670px;
float: left;
} .whatWeDo #workflow .number
{
height: 100%;
float: left;
position: absolute;
left: -190px;
top: 0;
}
.whatWeDo #workflow .number span
{
position: absolute;
display: block;
}
.whatWeDo #workflow .number span.start,
.whatWeDo #workflow .number span.end
{
width: 1.7px;
height: 50%;
height: calc(50% - 48px);
left: 23.15px;
z-index: 1;
background: #E1E2E3;
}
.whatWeDo #workflow .number span.start
{
top: 0;
}
.whatWeDo #workflow article:first-of-type span.start
{
display: none;
}
.whatWeDo #workflow .number span.end
{
bottom: -1px;
}
.whatWeDo #workflow article:last-of-type span.end
{
display: none;
}
.whatWeDo #workflow .number span.start em,
.whatWeDo #workflow .number span.end em
{
width: 100%;
height: 0px;
position: absolute;
left: 0;
top: 0;
display: block;
background: #40B494;
-webkit-transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
-o-transition: height 0.3s ease;
transition: height 0.3s ease;
}
.whatWeDo #workflow .number span.start.active em,
.whatWeDo #workflow .number span.start.animated em,
.whatWeDo #workflow .number span.end.active em,
.whatWeDo #workflow .number span.end.animated em
{
height: 100%;
}
.whatWeDo #workflow .number .num
{
width: 48px;
height: 48px;
margin: -24px 0 0 0;
position: absolute;
left: 0;
top: 50%;
z-index: 2;
display: block;
background: #E1E2E3;
color: #000;
font-size: 20px;
line-height: 48px;
letter-spacing: -0.01em;
font-weight: bold;
text-align: center;
box-shadow: none;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
-moz-transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
-o-transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.whatWeDo #workflow .number .num.active,
.whatWeDo #workflow .number .num.animated
{
background: #40b494;
color: white;
box-shadow: 0px 20px 30px rgba(64, 180, 148, 0.24);
}
.whatWeDo #workflow
{
}
@media screen and (max-width: 1220px)
{
.whatWeDo #workflow article .text
{
width: 80%;
margin-left: 20%;
}
.whatWeDo #workflow article .text h3,
.whatWeDo #workflow article .text p
{
width: auto;
float: none;
}
.whatWeDo #workflow article .text h3
{
padding: 0 0 20px 0;
}
.whatWeDo #workflow article .text h3 br
{
display: none;
}
.whatWeDo #workflow .number
{
left: -20%;
}
}
@media screen and (max-width: 650px)
{
.whatWeDo #workflow article .text
{
width: 100%;
padding-top: 130px;
margin: 0;
text-align: center;
}
.whatWeDo #workflow article .text h3
{
text-align: center;
}
.whatWeDo #workflow article .text br
{
display: none;
}
.whatWeDo #workflow .number
{
width: 100%;
left: 0;
top: 0;
}
.whatWeDo #workflow .number .num
{
margin: 0 0 0 -24px;
top: 45px;
left: 50%;
}
.whatWeDo #workflow .number span.start,
.whatWeDo #workflow .number span.end
{
display: none;
}
}  .whatWeDo #references
{
width: 100%;
max-width: 1200px;
padding-top: 100px;
padding-bottom: 100px;
margin: 0 auto;
text-align: center;
}
.whatWeDo #references h2
{
padding: 0 0 56px 0;
text-align: center;
}
.whatWeDo #references .button
{
padding: 30px 0 0 0;
text-align: center;
}   .references
{
}
.references .sideCircleHolder
{
width: 172px;
height: 491px;
position: absolute;
top: 540px;
right: 0px;
z-index: 0;
display: block;
overflow: hidden;
}
.references .sideCircleHolder .sideCircle
{
left: 0;
top: 0;
} .references #intro
{
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/intro-references2.jpg) no-repeat center bottom;
}  .references #references
{
width: 100%;
max-width: 1200px;
padding-top: 50px;
padding-bottom: 50px;
margin: 0 auto;
text-align: center;
}
.references #references h2
{
padding: 0 0 56px 0;
}
@media screen and (max-width: 900px)
{
.references #references h2 br
{
display: none;
}
}  .references #clients
{
padding-top: 100px;
padding-bottom: 40px;
background: #F6F7F9;
text-align: center;
}
.references #clients .center
{
max-width: 1500px;
margin: 0 auto;
}
.references #clients h2
{
padding: 0 0 20px 0;
}
.references #clients a,
.references #clients span
{
width: 160px;
height: 60px;
margin: 60px 100px;
display: inline-block;
vertical-align: top;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
@media screen and (max-width: 1600px)
{
.references #clients a,
.references #clients span
{
margin: 60px 60px;
}
}
@media screen and (max-width: 900px)
{
.references #clients a,
.references #clients span
{
margin: 50px 40px;
}
}   .contact
{
}
.contact .sideCircleHolder
{
width: 172px;
height: 491px;
position: absolute;
top: 540px;
right: 0px;
z-index: 0;
display: block;
overflow: hidden;
}
.contact .sideCircleHolder .sideCircle
{
left: 0;
top: 0;
} .contact #intro
{
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/intro-contact.jpg) no-repeat center bottom;
}  .contact #introText
{
padding-top: 50px;
padding-bottom: 100px;
}
.contact #introText p
{
max-width: 750px;
margin: 0 auto;
color: black;
font-size: 36px;
line-height: 48px;
letter-spacing: -0.01em;
font-weight: bold;
text-align: center;
}
@media screen and (max-width: 800px)
{
.contact #introText p br
{
display: none;
}
}  .contact #contacts
{
max-width: 1200px;
padding-bottom: 100px;
margin: 0 auto;
}
.contact #contacts h2
{
padding: 0 0 56px 0;
text-align: left;
}
.contact #contacts .people
{
width: 740px;
float: left;
}
.contact #contacts .company
{
width: 400px;
float: left;
} .contact #contacts .person
{
width: 370px;
padding: 0 0 50px 0;
display: inline-block;
vertical-align: top;
}
.contact #contacts .person h3
{
padding: 0 0 40px 0;
color: #000;
font-size: 24px;
line-height: 32px;
letter-spacing: -0.01em;
font-weight: bold;
text-align: left;
}
.contact #contacts .person .img
{
width: 144px;
height: 144px;
margin: 0 0 30px 0;
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
box-shadow: 0px 30px 80px rgba(27, 48, 91, 0.12);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.contact #contacts .person h4
{
padding: 0;
margin: 0;
color: #000;
font-size: 28px;
line-height: 37px;
letter-spacing: -0.01em;
font-weight: bold;
text-align: left;
}
.contact #contacts .person h5
{ color: #000;
font-size: 16px;
line-height: 40px;
letter-spacing: 0.1em;
font-weight: 500;
text-align: left;
text-transform: uppercase;
}
.contact #contacts .person p
{
padding: 30px 0 0 0;
font-size: 20px;
line-height: 40px;
letter-spacing: 0.02em;
}
.contact #contacts .person p a
{
color: #40B494;
text-decoration: underline;
}
.contact #contacts .person p a[href^="tel:"]
{
font-size: 23px;
}
.contact #contacts .person p a:hover
{
text-decoration: none;
}  .contact #contacts .data
{
width: 100%;
display: inline-block;
vertical-align: top;
}
.contact #contacts .data .in
{
max-width: 100%;
min-height: 480px;
padding: 68px 68px 68px 68px;
position: relative;
background: #FAFBFD;
text-align: left;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.contact #contacts .data .head
{
width: 100%;
height: 32px;
padding: 3px 128px 3px 0;
position: absolute;
left: 0;
top: -16px;
background: transparent;
color: white;
font-size: 20px;
line-height: 26px;
font-weight: bold;
text-align: center;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
border-top-right-radius: 8px;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.contact #contacts .data:hover .head
{
background: #40B494;
}
.contact #contacts .data .head .icon
{
width: 88px;
height: 88px;
position: absolute;
right: 40px;
top: -28px;
display: block;
background-color: #40b494;
background-repeat: no-repeat;
background-position: center center;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/icon-contact-white.svg);
background-size: 37px auto;
border: 1.7px solid #40B494;
box-shadow: 0px 30px 40px rgba(64, 180, 148, 0.24);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: border 0.3s ease;
-moz-transition: border 0.3s ease;
-o-transition: border 0.3s ease;
transition: border 0.3s ease;
}
.contact #contacts .data:hover .head .icon
{
border-color: white;
}
.contact #contacts .data .head .title
{
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.contact #contacts .data:hover .head .title
{
opacity: 1;
}
.contact #contacts .data h3
{
padding: 0 0 12px 0;
color: #000;
font-size: 24px;
line-height: 32px;
letter-spacing: -0.01em;
font-weight: bold;
text-align: left;
}
.contact #contacts .data a
{
color: #40B494;
text-decoration: underline;
}
.contact #contacts .data a[href^="tel:"]
{
font-size: 25px;
}
.contact #contacts .data a:hover
{
text-decoration: none;
}
.contact #contacts .data p
{
color: #333;
font-size: 20px;
line-height: 40px;
letter-spacing: 0.02em;
}
.contact #contacts .data p.contact
{
padding: 0 0 40px 0;
border-bottom: 1px solid #E1E2E3;
font-weight: bold;
}
.contact #contacts .data p.invoice
{
padding: 40px 0 0 0;
} @media screen and (max-width: 1240px)
{
.contact #contacts h2
{
text-align: center;
}
.contact #contacts .people
{
width: 100%;
}
.contact #contacts .company
{
width: 100%;
}
.contact #contacts .data
{
padding-top: 100px;
}
.contact #contacts .people
{
text-align: center;
}
.contact #contacts .person
{
width: 45%;
}
.contact #contacts .person h3,
.contact #contacts .person h4,
.contact #contacts .person h5
{
text-align: center;
}
.contact #contacts .person .img
{
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 850px)
{
.contact #contacts .person
{
width: auto;
padding: 0 0 100px 0;
display: block;
}
.contact #contacts .data
{
padding-top: 0;
}
}  .contact #map
{
max-width: 1600px;
min-height: 504px;
margin: 0 auto;
}
.contact #map .map
{
width: 100%;
height: 504px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/contact-map.jpg) no-repeat center center;
background-size: cover;
}
.contact #map .marker
{
width: 83px;
height: 83px;
margin: -10px 0 0 -85px;
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
display: block;
background: #222222 url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/hp-knowhow-logo.svg) no-repeat center center;
background-size: 41px auto;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.contact #map .info
{
width: 545px;
min-height: 144px;
padding: 23px 20px 23px 215px;
position: absolute;
right: 120px;
top: 53px;
z-index: 3;
background: white;
box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.05);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.contact #map .info:before
{
content: " ";
width: 190px;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/contact-map-image.jpg) no-repeat center center;
background-size: cover;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
border-top-left-radius: 8px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-bottom-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.contact #map .info h4
{
padding: 0 0 5px 0;
color: #333;
font-size: 20px;
line-height: 30px;
letter-spacing: 0.02em;
font-weight: bold;
text-align: left;
}
.contact #map .info p
{
padding: 0 0 5px 0;
color: #333333;
font-size: 16px;
line-height: 28px;
letter-spacing: 0.02em;
}
.contact #map .info p:last-of-type
{
padding: 0;
}
.contact #map .info a
{
color: #40B494;
text-decoration: underline;
}
.contact #map .info a[href^="tel:"]
{
font-size: 19px;
}
.contact #map .info a:hover
{
text-decoration: none;
}
@media screen and (max-width: 860px)
{
.contact #map
{
padding: 0;
}
.contact #map .map
{
position: relative;
}
.contact #map .info
{
width: 100%;
position: relative;
right: 0;
top: 0;
border-radius: 0;
}
.contact #map .info:before
{
border-radius: 0;
}
}   .textPage
{
} .textPage #intro
{
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/intro-aboutus.jpg) no-repeat center bottom;
}  .textPage #content
{
}
.textPage #content .center
{
max-width: 1140px;
padding: 50px 0 100px 0;
margin: 0 auto;
}
.textPage #content h2,
.textPage #content h3
{
padding: 10px 0 20px 0;
text-align: left;
}
.textPage #content p,
.textPage #content ol,
.textPage #content ul
{
margin: 0 0 40px 0;
line-height: 40px;
}
.textPage #content ol,
.textPage #content ul
{
margin-left: 30px;
}
.textPage #content
{
}
.textPage #content
{
}   .caseStudy
{
position: relative;
z-index: 50;
}
.caseStudy .overlay
{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background: white;
opacity: 0.8;
display: none;
}
@media screen and (max-width: 1150px)
{
.caseStudy .overlay
{
display: block;
}
}  .caseStudy section
{
padding: 0; }
.caseStudy section .middle
{
max-width: 1430px;
padding: 0 30px;
margin: 0 auto;
position: relative;
background: white; -webkit-backface-visibility: hidden;
}
.caseStudy section .center
{
min-height: 300px;
max-width: 1017px;
margin: 0 auto;
position: relative;
z-index: 50;
}
@media screen and (max-width: 1350px)
{
.caseStudy section
{
background: none;
}
}  .caseStudy h1,
.caseStudy h2
{
color: inherit;
font-size: 81px;
line-height: 81px;
font-weight: 800;
text-align: inherit;
}
.caseStudy h1.green,
.caseStudy h2.green
{
color: #00c89a;
}
.caseStudy p
{
color: inherit;
font-size: 26px;
line-height: 35px;
}
.caseStudy cite
{
padding: 28px 45px 28px 45px;
position: relative;
display: block;
background: #00c89a;
color: white;
font-size: 23px;
font-style: normal;
}
.caseStudy cite:before
{
content: " ";
position: absolute;
display: block;
background-repeat: no-repeat;
background-position: 0 0;
background-size: contain;
}
.caseStudy cite.left:before
{
width: 53px;
height: 50px;
left: -52px;
top: 29px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/cite-arrow-left.png);
}
.caseStudy cite.top:before
{
width: 51px;
height: 51px;
right: 52px;
top: -50px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/cite-arrow-top.png);
}
.caseStudy cite span
{
display: block;
line-height: 29px;
}
.caseStudy cite strong
{
display: block;
line-height: 32px;
}
@media screen and (max-width: 600px)
{
.caseStudy h1,
.caseStudy h2
{
font-size: 72px;
line-height: 72px;
}
.caseStudy p
{
font-size: 23px;
line-height: 32px;
}
.caseStudy cite
{
font-size: 21px;
}
}  .caseStudy #csintro
{
}
.caseStudy #csintro .center
{
padding: 70px 0 0 0;
}
.caseStudy #csintro .client
{
height: 110px;
font-size: 27px;
line-height: 27px;
}
.caseStudy #csintro .arrow
{
width: 88px;
height: 67px;
margin-left: -44px;
position: absolute;
left: 50%;
bottom: 63px;
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.caseStudy #csintro .arrow.green
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/intro-arrow-green.png);
}
.caseStudy #csintro .arrow.white
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/intro-arrow-white.png);
}  .caseStudy #points
{
text-align: center;
}
.caseStudy #points h2
{
}
.caseStudy #points p
{
}
.caseStudy #points .points
{
}
.caseStudy #points .points article
{
width: 360px;
display: inline-block;
vertical-align: top;
}
.caseStudy #points .points article strong
{
width: 295px;
height: 295px;
margin: 0 auto 22.5px auto;
display: table;
table-layout: fixed;
background: #00c89a;
color: white;
font-size: 72px;
line-height: 63px;
font-weight: 800;
text-align: center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.caseStudy #points .points article strong span
{
display: table-cell;
vertical-align: middle;
}
.caseStudy #points .points article strong span em
{
font-style: normal;
}
.caseStudy #points .points article h3
{
padding: 0 0 29px 0;
font-size: 31.5px;
line-height: 31.5px;
font-weight: bold;
}
.caseStudy #points .points article p
{
max-width: 320px;
margin: 0 auto;
font-size: 22.5px;
line-height: 31.5px;
}
@media screen and (max-width: 600px)
{
.caseStudy #points .points article
{
width: 100%;
display: block;
}
}  #caseStudyFooter
{
padding: 324px 27px 198px 27px;
background: #00c89a;
color: white;
text-align: center;
}
#caseStudyFooter h3
{
padding: 0 0 36px 0;
position: relative;
color: white;
font-size: 36px;
line-height: 45px;
font-weight: 800;
}
#caseStudyFooter h3:before
{
content: " ";
width: 88px;
height: 67px;
margin: 0 0 0 -44px;
position: absolute;
left: 50%;
top: -126px;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/casestudy-footer-arrows.png) no-repeat center center;
background-size: contain;
}
#caseStudyFooter p
{
padding: 0 0 54px 0;
font-size: 36px;
line-height: 45px;
}
#caseStudyFooter a
{
padding: 14px 27px;
display: inline-block;
vertical-align: top;
background: white;
color: #00c89a;
font-size: 36px;
line-height: 45px;
font-weight: 800;
-webkit-border-radius: 7.2px;
-moz-border-radius: 7.2px;
border-radius: 7.2px;
-webkit-transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
-moz-transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
-o-transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
#caseStudyFooter a:hover
{
box-shadow: 0px 40px 50px rgba(4, 31, 23, 0.1);
}   .csAgatinSvet
{
} .csAgatinSvet #csintro
{
color: white;
}
.csAgatinSvet #csintro .middle
{
height: 890px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/agatin-svet/bg-intro.jpg) no-repeat 0 0;
}
.csAgatinSvet #csintro .middle p
{
max-width: 405px;
}  .csAgatinSvet #content1
{
}
.csAgatinSvet #content1 .middle
{
height: 934px;
padding-top: 99px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/agatin-svet/bg-content1.jpg) no-repeat center 0;
text-align: right;
}
.csAgatinSvet #content1 .text
{
padding-left: 423px;
}
.csAgatinSvet #content1 h2
{
padding: 0 0 22px 0;
color: #00c89a;
}
.csAgatinSvet #content1 p
{
color: #696969;
}
@media screen and (max-width: 1035px)
{
.csAgatinSvet #content1 .text
{
padding-left: 30%;
}
}
@media screen and (max-width: 840px)
{
.csAgatinSvet #content1 .text
{
padding-left: 0;
}
}  .csAgatinSvet #content2
{
height: 904px;
}
.csAgatinSvet #content2 .middle
{
height: 1115px;
position: relative;
top: -207px;
padding-top: 310px;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/agatin-svet/bg-content2.jpg) no-repeat 0 0;
}
.csAgatinSvet #content2 h2
{
max-width: 432px;
padding: 0 0 36px 0;
color: white;
}
.csAgatinSvet #content2 p
{
max-width: 432px;
color: white;
}  .csAgatinSvet #person
{
height: 1094px;
}
.csAgatinSvet #person .middle
{
min-height: 1166px;
padding-top: 144px;
position: relative;
top: -4.5px;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/agatin-svet/bg-person.jpg) no-repeat center 0;
text-align: right;
}
.csAgatinSvet #person .text
{
}
.csAgatinSvet #person h2
{
padding: 0 0 18px 0;
padding-left: 495px;
color: #00c89a;
}
.csAgatinSvet #person p
{
padding-left: 495px;
color: #052e42;
}
.csAgatinSvet #person cite
{
margin-top: 36px;
margin-left: 223px;
}
@media screen and (max-width: 1180px)
{
.csAgatinSvet #person
{
height: auto;
}
.csAgatinSvet #person h2,
.csAgatinSvet #person p
{
padding-left: 30%;
}
.csAgatinSvet #person cite
{
margin-left: 0;
}
.csAgatinSvet #person cite:before
{
display: none;
}
}
@media screen and (max-width: 790px)
{
.csAgatinSvet #person .middle
{
padding-top: 18px;
padding-bottom: 108px;
}
.csAgatinSvet #person h2,
.csAgatinSvet #person p
{
padding-left: 0;
}
}  .csAgatinSvet #points
{
height: 1062px;
color: white;
}
.csAgatinSvet #points .middle
{
height: 1195px;
padding-top: 216px;
position: relative;
top: -132px;
z-index: 50;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/agatin-svet/bg-points.png) no-repeat center 0;
}
.csAgatinSvet #points .middle .mockup
{
content: " ";
width: 938px;
height: 433px;
margin: 0 0 0 -441px;
position: absolute;
left: 50%;
bottom: -194px;
z-index: 50;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/agatin-svet/mockups.png) no-repeat center center;
background-size: contain;
}
.csAgatinSvet #points h2
{
padding: 0 0 45px 0;
color: white;
}
.csAgatinSvet #points p.text
{
}
.csAgatinSvet #points .points
{
}
.csAgatinSvet #points .points article
{
}
.csAgatinSvet #points .points article strong
{
background: white;
color: #00c89a;
font-size: 90px;
line-height: 63px;
}
.csAgatinSvet #points .points article:nth-of-type(2) strong
{
padding-top: 18px;
}
.csAgatinSvet #points .points article:nth-of-type(3) strong
{
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/agatin-svet/points-like.png) no-repeat center center;
background-size: 178px auto;
}
.csAgatinSvet #points .points article strong small
{
font-size: 72px;
font-style: normal;
}
.csAgatinSvet #points .points article h3
{
color: white;
}
.csAgatinSvet #points .points article p
{
}
@media screen and (max-width: 1170px)
{
.csAgatinSvet #points,
.csAgatinSvet #points .middle
{
height: auto;
}
.csAgatinSvet #points .middle
{
padding-bottom: 180px;
margin-bottom: -135px;
}
.csAgatinSvet #points .points article
{
padding-bottom: 90px;
}
}
@media screen and (max-width: 1035px)
{
.csAgatinSvet #points .middle:after
{
width: 80%;
left: 10%;
margin: 0;
background-size: contain;
}
}
@media screen and (max-width: 900px)
{
.csAgatinSvet #points .middle .mockup
{
width: 90%;
left: 6%;
margin: 0;
}
}
@media screen and (max-width: 720px)
{
.csAgatinSvet #points .middle
{
padding-bottom: 0;
}
.csAgatinSvet #points .middle:after
{
display: none;
}
.csAgatinSvet #points .middle .mockup
{
height: 250px;
bottom: -170px;
}
}
@media screen and (max-width: 550px)
{
.csAgatinSvet #points .middle .mockup
{
display: none;
}
}   .csAuresLab
{
} .csAuresLab #csintro
{
height: 853px;
color: white;
}
.csAuresLab #csintro .middle
{
height: 864px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/aureslab/bg-intro.jpg) no-repeat 0 0;
}
.csAuresLab #csintro .middle p
{
max-width: 464px;
}  .csAuresLab #content1
{
}
.csAuresLab #content1 .middle
{
min-height: 934px;
padding-top: 134px;
background: white;
text-align: right;
}
.csAuresLab #content1 .middle .car
{
width: 879px;
height: 232px;
position: absolute;
left: 0;
bottom: 218px;
display: block;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/aureslab/car2.jpg) no-repeat right center;
background-size: auto 100%;
}
.csAuresLab #content1 .text
{
padding-left: 293px;
}
.csAuresLab #content1 h2
{
padding: 0 0 4px 0;
color: #00c89a;
}
.csAuresLab #content1 p
{
color: #696969;
}
@media screen and (max-width: 1080px)
{
.csAuresLab #content1 .text
{
padding: 0 0 495px 0;
}
.csAuresLab #content1 .middle .car
{
width: 80%;
}
}  .csAuresLab #content2
{
height: 905px;
position: static;
}
.csAuresLab #content2 .middle
{
height: 1000px;
padding-top: 225px;
position: relative;
top: -138px;
z-index: 50;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/aureslab/bg-content2.jpg) no-repeat center 0;
text-align: left;
}
.csAuresLab #content2 .middle .speed
{
width: 902px;
height: 601px;
position: absolute;
right: 0;
bottom: 162px;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/aureslab/speed.png) no-repeat right center;
background-size: contain;
}
.csAuresLab #content2 .text
{
}
.csAuresLab #content2 h2
{
padding: 0 0 18px 0;
color: white;
}
.csAuresLab #content2 p
{
color: white;
max-width: 533px;
}
@media screen and (max-width: 1350px)
{
.csAuresLab #content2 .middle .speed
{
width: 60%;
background-size: contain;
}
}
@media screen and (max-width: 900px)
{
.csAuresLab #content2 .middle .speed
{
display: none;
}
}  .csAuresLab #content3
{
height: 1096px;
}
.csAuresLab #content3 .middle
{
height: 1225px;
padding-top: 275px;
position: relative;
top: -114px;
background: #15284b url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/aureslab/bg-content3.jpg) no-repeat center 0;
text-align: right;
}
.csAuresLab #content3 .middle .logos
{
width: 548px;
height: 450px;
position: absolute;
left: 102px;
bottom: 453px;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/aureslab/logos.png) no-repeat center center;
background-size: contain;
}
.csAuresLab #content3 .text
{
padding-left: 496px;
}
.csAuresLab #content3 h2
{
padding: 0 0 22px 0;
color: white;
}
.csAuresLab #content3 p
{
color: white;
}
@media screen and (max-width: 1440px)
{
.csAuresLab #content3 .middle .logos
{
width: 35%;
}
}
@media screen and (max-width: 1080px)
{
.csAuresLab #content3 .middle
{
padding-top: 90px;
}
.csAuresLab #content3 .middle .logos
{
width: 100%;
height: 315px;
left: 0;
bottom: 405px;
}
.csAuresLab #content3 .text
{
padding-left: 0;
text-align: center;
}
.csAuresLab #content3 p
{
max-width: 540px;
margin: 0 auto;
}
}
@media screen and (max-width: 495px)
{
.csAuresLab #content3 .middle .logos
{
height: 243px;
}
}  .csAuresLab #person
{
height: 1067px;
}
.csAuresLab #person .middle
{
min-height: 1440px;
padding-top: 288px;
position: relative;
top: -370px;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/aureslab/bg-person.jpg) no-repeat center 0;
text-align: left;
}
.csAuresLab #person .text
{
}
.csAuresLab #person h2
{
padding: 0 0 36px 0;
color: #00c89a;
}
.csAuresLab #person p
{
max-width: 484px;
color: black;
}
.csAuresLab #person cite
{
max-width: 644px;
position: relative;
left: -13.5px;
margin-top: 27px;
}
@media screen and (max-width: 900px)
{
.csAuresLab #person .middle
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/aureslab/bg-person-nophoto.jpg);
}
.csAuresLab #person p,
.csAuresLab #person cite
{
max-width: 100%;
}
.csAuresLab #person cite:before
{
display: none;
}
}  .csAuresLab #points
{
height: 798px;
}
.csAuresLab #points .middle
{
height: 818px;
padding-top: 25px;
position: relative;
top: -20px;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/aureslab/bg-points.jpg) no-repeat center 0;
}
.csAuresLab #points h2
{
padding: 0 0 37px 0;
color: #00c89a;
}
.csAuresLab #points p.text
{
max-width: 869px;
padding: 0 0 54px 0;
margin: 0 auto;
color: black;
}
.csAuresLab #points .points
{
}
.csAuresLab #points .points article
{
}
.csAuresLab #points .points article strong
{
font-size: 108px;
line-height: 108px;
}
.csAuresLab #points .points article h3
{
color: white;
}
.csAuresLab #points .points article p
{
}
@media screen and (max-width: 1170px)
{
.csAuresLab #points .points article
{
width: 270px;
}
.csAuresLab #points .points article strong
{
width: 225px;
height: 225px;
font-size: 81px;
}
}
@media screen and (max-width: 900px)
{
.csAuresLab #points .middle
{
padding-top: 0;
}
.csAuresLab #points .points article h3
{
text-shadow: 2px 2px 5px rgba(0,160,123,1);
}
.csAuresLab #points h2,
.csAuresLab #points p.text,
.csAuresLab #points .points
{
position: relative;
top: -180px;
}
}
@media screen and (max-width: 630px)
{
.csAuresLab #points .points article
{
width: 180px;
display: inline-block !important;
}
.csAuresLab #points .points article strong
{
width: 153px;
height: 153px;
font-size: 54px;
}
.csAuresLab #points .points article h3
{
font-size: 27px;
}
.csAuresLab #points h2,
.csAuresLab #points p.text,
.csAuresLab #points .points
{
position: relative;
top: -180px;
}
}
@media screen and (max-width: 540px)
{
.csAuresLab #points .points article
{
width: 180px;
display: inline-block;
vertical-align: top;
}
}   .csEON
{
} .csEON #csintro
{
color: white;
}
.csEON #csintro .middle
{
height: 846px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/eon/bg-intro.jpg) no-repeat 0 0;
}
.csEON #csintro .middle h1
{
padding: 0 0 21px 0;
}
.csEON #csintro .middle p
{
max-width: 405px;
}
.csEON #csintro .arrow
{
bottom: 18px;
}  .csEON #content1
{
position: static;
}
.csEON #content1 .middle
{
height: 932px;
padding-top: 189px;
background: white;
text-align: right;
}
.csEON #content1 .middle .glass
{
width: 362px;
height: 733px;
position: absolute;
left: 207px;
top: 82px;
z-index: 50;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/eon/glass.jpg) no-repeat center center;
background-size: contain;
}
.csEON #content1 .text
{
padding: 0 0 0 498px;
}
.csEON #content1 h2
{
padding: 0 0 27px 0;
color: #00c89a;
}
.csEON #content1 p
{
color: #696969;
}
@media screen and (max-width: 1350px)
{
.csEON #content1 .middle .glass
{
width: 30%;
left: 10%;
}
}
@media screen and (max-width: 1000px)
{
.csEON #content1 .text
{
padding-left: 40%;
}
}
@media screen and (max-width: 837px)
{
.csEON #content1 .text
{
padding-left: 0;
text-align: left;
}
.csEON #content1 .middle .glass
{
display: none;
}
}  .csEON #content2
{
height: 905px;
}
.csEON #content2 .middle
{
height: 1072px;
padding-top: 267px;
position: relative;
top: -167px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/eon/bg-content2.jpg) no-repeat center 0;
text-align: left;
}
.csEON #content2 .text
{
}
.csEON #content2 h2
{
padding: 0 0 30px 0;
color: white;
}
.csEON #content2 p
{
color: white;
max-width: 405px;
}
@media screen and (max-width: 1010px)
{
.csEON #content2 .middle
{
background-position: 0 0;
}
}
@media screen and (max-width: 900px)
{
.csEON #content2 p
{
max-width: 80%;
}
}
@media screen and (max-width: 600px)
{
.csEON #content2 p
{
max-width: 100%;
}
}  .csEON #content3
{
height: 1093px;
}
.csEON #content3 .middle
{
height: 1116px;
padding-top: 328px;
position: relative;
top: -23px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/eon/bg-content3.jpg) no-repeat center 0;
text-align: right;
}
.csEON #content3 .middle .globe
{
width: 526px;
height: 848px;
position: absolute;
left: 148px;
top: 232px;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/eon/globe.png) no-repeat center bottom;
background-size: contain;
}
.csEON #content3 .text
{
padding-left: 472px;
}
.csEON #content3 h2
{
padding: 0 0 22px 0;
color: #00c89a;
}
.csEON #content3 p
{
color: #747474;
}
@media screen and (max-width: 1350px)
{
.csEON #content3 .middle .globe
{
width: 35%;
left: 10%;
}
}
@media screen and (max-width: 1010px)
{
.csEON #content3 .middle
{
background-position: 0 0;
}
.csEON #content3 p br
{
display: none;
}
}
@media screen and (max-width: 930px)
{
.csEON #content3 .middle .globe
{
display: none;
}
.csEON #content3 .text
{
padding: 0;
text-align: left;
}
}  .csEON #points
{
}
.csEON #points .middle
{
padding-top: 162px;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/eon/bg-points.png) no-repeat center 0;
}
.csEON #points h2
{
padding: 0 0 14px 0;
color: #000000;
}
.csEON #points p.text
{
color: #696969;
}
.csEON #points .points
{
padding: 0 0 72px 0;
}
.csEON #points .points article
{
padding: 81px 0 45px 0;
}
.csEON #points .points article strong
{
font-size: 108px;
}
.csEON #points .points article:nth-of-type(2) strong
{
}
.csEON #points .points article:nth-of-type(3) strong
{
background: #00c89a url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/eon/icon-breakfast.png) no-repeat center center;
background-size: 177px auto;
}
.csEON #points .points article h3
{
color: #696969;
}
.csEON #points .points article p
{
color: #696969;
}
@media screen and (max-width: 1010px)
{
.csEON #points .middle
{
background-position: 0 0;
}
}   .csEONRadce
{
} .csEONRadce #csintro
{
color: white;
}
.csEONRadce #csintro .middle
{
height: 855px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/eon-radce/bg-intro.jpg) no-repeat 0 0;
}
.csEONRadce #csintro .middle h1
{
padding: 0 0 102px 0;
}
.csEONRadce #csintro .middle p
{
max-width: 486px;
}
.csEONRadce #csintro .middle .arrow
{
bottom: 25px;
}  .csEONRadce #content1
{
}
.csEONRadce #content1 .middle
{
height: 936px;
padding-top: 182px;
background: white;
text-align: right;
}
.csEONRadce #content1 .middle .pc
{
width: 873px;
height: 720px;
position: absolute;
left: 15px;
top: 60px;
z-index: 1;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/eon-radce/pc.png) no-repeat center center;
background-size: contain;
}
.csEONRadce #content1 .text
{
position: relative;
z-index: 51;
}
.csEONRadce #content1 h2
{
padding: 0 0 22px 0;
color: #00c89a;
}
.csEONRadce #content1 p
{
color: #696969;
padding-left: 432px;
}
@media screen and (max-width: 1422px)
{
.csEONRadce #content1 .middle
{
padding-top: 90px;
}
.csEONRadce #content1 .middle .pc
{
width: 60%;
left: 5%;
}
.csEONRadce #content1 h2,
.csEONRadce #content1 p
{
padding-left: 50%;
}
}
@media screen and (max-width: 963px)
{
.csEONRadce #content1 .middle
{
padding-top: 135px;
padding-bottom: 225px;
height: auto;
}
.csEONRadce #content1 .middle .pc
{
display: none;
}
.csEONRadce #content1 .text
{
text-align: left;
}
.csEONRadce #content1 h2,
.csEONRadce #content1 p
{
padding-left: 0;
}
}  .csEONRadce #content2
{
height: 909px;
}
.csEONRadce #content2 .middle
{
height: 1187px;
padding-top: 340px;
position: relative;
top: -278px;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/eon-radce/bg-content2.png) no-repeat center 0;
text-align: left;
}
.csEONRadce #content2 .middle .info
{
width: 553px;
height: 636px;
position: absolute;
right: 221px;
bottom: 146px;
z-index: 50;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/eon-radce/info.png) no-repeat center center;
background-size: contain;
}
.csEONRadce #content2 .text
{
}
.csEONRadce #content2 h2
{
padding: 0 0 32px 0;
color: white;
}
.csEONRadce #content2 p
{
max-width: 435px;
color: white;
}
@media screen and (max-width: 1440px)
{
.csEONRadce #content2 .middle .info
{
width: 48%;
right: 5%;
}
}
@media screen and (max-width: 1035px)
{
.csEONRadce #content2 .middle .info
{
width: 40%;
right: 3%;
}
.csEONRadce #content2 .text
{
max-width: 50%;
}
.csEONRadce #content2 p
{
max-width: 100%;
}
}
@media screen and (max-width: 930px)
{
.csEONRadce #content2 .middle
{
background-position: right 0;
}
}
@media screen and (max-width: 810px)
{
.csEONRadce #content2 .middle
{
padding-top: 360px;
}
.csEONRadce #content2 .middle .info
{
display: none;
}
.csEONRadce #content2 .text
{
max-width: 100%;
}
}  .csEONRadce #content3
{
height: 1096px;
}
.csEONRadce #content3 .middle
{
height: 1162px;
padding-top: 297px;
position: relative;
top: -4px;
z-index: 50;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/eon-radce/bg-content3.jpg) no-repeat center 0;
text-align: right;
}
.csEONRadce #content3 .text
{
}
.csEONRadce #content3 h2
{
padding: 0 0 40px 0;
color: white;
}
.csEONRadce #content3 p
{
padding-left: 468px;
color: white;
}
@media screen and (max-width: 927px)
{
.csEONRadce #content3 .middle
{
background-position: right 0;
}
.csEONRadce #content3 p
{
padding-left: 20%;
}
}
@media screen and (max-width: 792px)
{
.csEONRadce #content3 .text
{
text-align: left;
}
.csEONRadce #content3 p
{
padding: 0;
}
}  .csEONRadce #content4
{
position: static;
}
.csEONRadce #content4 .middle
{
padding-top: 175px;
padding-bottom: 234px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/eon-radce/bg-content4.jpg) no-repeat center 0;
background-size: cover;
text-align: center;
}
.csEONRadce #content4 .text
{
}
.csEONRadce #content4 h2
{
padding: 0 0 29px 0;
color: black;
text-align: center;
}
.csEONRadce #content4 p
{
max-width: 774px;
padding: 0 0 100px 0;
margin: 0 auto;
color: #696969;
text-align: center;
}
.csEONRadce #content4 .timeline
{
max-width: 1146px;
min-height: 270px;
margin: 0 auto;
position: relative;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/eon-radce/timeline.png) no-repeat center 0;
background-size: 100% auto;
}
.csEONRadce #content4 .timeline .year
{
width: 202px;
height: 202px;
padding: 55px 0 0 0;
position: absolute;
top: 13px;
display: block;
background: #00c89a;
color: white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.csEONRadce #content4 .timeline .year:nth-of-type(1)
{
left: 66px;
}
.csEONRadce #content4 .timeline .year:nth-of-type(2)
{
left: 330px;
}
.csEONRadce #content4 .timeline .year:nth-of-type(3)
{
left: 596px;
}
.csEONRadce #content4 .timeline .year:nth-of-type(4)
{
left: 858px;
}
.csEONRadce #content4 .timeline .year strong
{
display: block;
font-size: 54px;
line-height: 54px;
font-weight: 800;
}
.csEONRadce #content4 .timeline .year strong em
{
font-style: normal;
}
.csEONRadce #content4 .timeline .year span
{
display: block;
font-size: 31px;
line-height: 31px;
font-weight: 800;
}
.csEONRadce #content4 .timeline .year small
{
width: 100%;
position: absolute;
left: 0;
top: 225px;
display: block;
color: #696969;
font-size: 40px;
line-height: 40px;
font-weight: bold;
font-style: normal;
}
@media screen and (max-width: 1220px)
{
.csEONRadce #content4 .timeline
{
max-width: 803px;
background-size: contain;
}
.csEONRadce #content4 .timeline .year
{
width: 141px;
height: 141px;
padding: 38px 0 0 0;
top: 9px;
}
.csEONRadce #content4 .timeline .year:nth-of-type(1)
{
left: 47px;
}
.csEONRadce #content4 .timeline .year:nth-of-type(2)
{
left: 231px;
}
.csEONRadce #content4 .timeline .year:nth-of-type(3)
{
left: 418px;
}
.csEONRadce #content4 .timeline .year:nth-of-type(4)
{
left: 602px;
}
.csEONRadce #content4 .timeline .year strong
{
font-size: 38px;
line-height: 38px;
}
.csEONRadce #content4 .timeline .year span
{
font-size: 22px;
line-height: 22px;
}
.csEONRadce #content4 .timeline .year small
{
top: 158px;
font-size: 29px;
line-height: 29px;
}
}
@media screen and (max-width: 930px)
{
.csEONRadce #content4 .middle
{
background-position: right 0;
}
}
@media screen and (max-width: 890px)
{
.csEONRadce #content4 .middle
{
padding-bottom: 90px;
}
.csEONRadce #content4 .timeline
{
max-width: 100%;
background: none;
}
.csEONRadce #content4 .timeline .year
{
width: 184px;
height: 184px;
padding: 50px 0 0 0;
margin: 0 18px 81px 18px;
position: relative;
left: auto !important;
top: auto !important;
display: inline-block;
vertical-align: top;
}
.csEONRadce #content4 .timeline .year strong
{
font-size: 49px;
line-height: 49px;
}
.csEONRadce #content4 .timeline .year span
{
font-size: 29px;
line-height: 29px;
}
.csEONRadce #content4 .timeline .year small
{
top: 190px;
font-size: 38px;
line-height: 38px;
}
}   .csGumotex
{
} .csGumotex #csintro
{
height: 857px;
z-index: 50;
color: white;
}
.csGumotex #csintro .middle
{
height: 911px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/bg-intro.jpg) no-repeat 0 0;
}
.csGumotex #csintro .middle h1
{
padding: 0 0 38px 0;
}
.csGumotex #csintro .middle p
{
max-width: 450px;
padding: 0 0 97px 0;
}
.csGumotex #csintro .arrow
{
bottom: 81px;
}
.csGumotex #csintro ul
{
list-style: none;
}
.csGumotex #csintro ul li
{
padding: 0 9px;
display: inline-block;
vertical-align: top;
}
.csGumotex #csintro ul li a
{
width: 99px;
padding: 126px 0 0 0;
position: relative;
display: block;
color: white;
font-size: 27px;
line-height: 27px;
text-align: center;
}
.csGumotex #csintro ul li a:hover
{
text-decoration: underline;
}
.csGumotex #csintro ul li a:before
{
content: " ";
width: 99px;
height: 99px;
position: absolute;
left: 0;
top: 0;
display: block;
background-color: #d63d44;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: box-shadow 0.3s ease, background 0.3s ease;
-moz-transition: box-shadow 0.3s ease, background 0.3s ease;
-o-transition: box-shadow 0.3s ease, background 0.3s ease;
transition: box-shadow 0.3s ease, background 0.3s ease;
}
.csGumotex #csintro ul li a.web:before
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/icon-web.png);
background-size: 51px auto;
}
.csGumotex #csintro ul li a.video:before
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/icon-video.png);
background-size: 29px auto;
}
.csGumotex #csintro ul li a:hover:before
{
}
@media screen and (max-width: 540px)
{
.csGumotex #csintro h1 br
{
display: none;
}
}  .csGumotex #content1
{
}
.csGumotex #content1 .middle
{
min-height: 936px;
padding-top: 104px;
padding-bottom: 405px;
background: white;
text-align: right;
}
.csGumotex #content1 .text
{
}
.csGumotex #content1 h2
{
padding: 0 0 85px 0;
color: #00c89a;
}
.csGumotex #content1 p
{
padding: 0 0 0 547px;
color: #696969;
}
.csGumotex #content1 .boat1,
.csGumotex #content1 .boat2
{
position: absolute;
display: block;
}
.csGumotex #content1 .boat1
{
width: 710px;
height: 233px;
left: 0;
top: 261px;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/content1-boat1.jpg) no-repeat right center;
background-size: auto 100%;
}
.csGumotex #content1 .boat2
{
width: 1044px;
height: 168px;
margin-left: -522px;
left: 50%;
bottom: 114px;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/content1-boat2.jpg) no-repeat center center;
background-size: contain;
}
@media screen and (max-width: 1386px)
{
.csGumotex #content1 .boat1
{
width: 50%;
}
.csGumotex #content1 p
{
padding-left: 55%;
}
}
@media screen and (max-width: 1110px)
{
.csGumotex #content1 .boat2
{
width: 80%;
left: 10%;
margin-left: 0;
background-size: contain;
}
}
@media screen and (max-width: 810px)
{
.csGumotex #content1 .boat1
{
display: none;
}
.csGumotex #content1 .text
{
text-align: left;
}
.csGumotex #content1 p
{
padding: 0;
}
.csGumotex #content1 p br
{
display: none;
}
}
@media screen and (max-width: 540px)
{
.csGumotex #content1 .middle
{
min-height: 1px;
padding-bottom: 90px;
}
.csGumotex #content1 .boat2
{
display: none;
}
}  .csGumotex #content2
{
height: 908px;
}
.csGumotex #content2 .middle
{
height: 920px;
padding-top: 99px;
position: relative;
top: -11px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/bg-content2.jpg) no-repeat center 0;
text-align: left;
}
.csGumotex #content2 .text
{
}
.csGumotex #content2 h2
{
padding: 0 0 58px 0;
color: white;
}
.csGumotex #content2 p
{
max-width: 612px;
color: white;
}
.csGumotex #content2 .paper1,
.csGumotex #content2 .paper2,
.csGumotex #content2 .paper3,
.csGumotex #content2 .paper4,
.csGumotex #content2 .paper5
{
position: absolute;
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.csGumotex #content2 .paper1
{
width: 392px;
height: 220px;
right: 225px;
bottom: 473px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/paper1.png);
}
.csGumotex #content2 .paper2
{
width: 403px;
height: 216px;
right: 75px;
bottom: 283px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/paper2.png);
}
.csGumotex #content2 .paper3
{
width: 423px;
height: 240px;
right: 29px;
bottom: 62px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/paper3.png);
}
.csGumotex #content2 .paper4
{
width: 400px;
height: 250px;
right: 432px;
bottom: 60px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/paper4.png);
}
.csGumotex #content2 .paper5
{
width: 420px;
height: 197px;
right: 782px;
bottom: 75px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/paper5.png);
}
@media screen and (max-width: 1440px)
{
.csGumotex #content2 .paper1,
.csGumotex #content2 .paper2,
.csGumotex #content2 .paper3,
.csGumotex #content2 .paper4,
.csGumotex #content2 .paper5
{
width: 20%;
}
}
@media screen and (max-width: 1110px)
{
.csGumotex #content2
{
height: auto;
margin-bottom: -18px;
}
.csGumotex #content2 .middle
{
height: auto;
padding-top: 180px;
padding-bottom: 180px;
background-size: cover;
}
.csGumotex #content2 .paper1,
.csGumotex #content2 .paper2,
.csGumotex #content2 .paper3,
.csGumotex #content2 .paper4,
.csGumotex #content2 .paper5
{
display: none;
}
.csGumotex #content2 p
{
max-width: 100%;
}
}  .csGumotex #points
{
}
.csGumotex #points .middle
{
padding-top: 36px;
padding-bottom: 73px;
background: #f7f7f7;
}
.csGumotex #points h2
{
padding: 0 0 45px 0;
color: #00c89a;
text-align: center;
}
.csGumotex #points p.text
{
}
.csGumotex #points .points
{
}
.csGumotex #points .points article
{
padding: 0 0 108px 0;
}
.csGumotex #points .points article strong
{
margin-bottom: 45px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.csGumotex #points .points article h3
{
color: #222222;
}
.csGumotex #points .points article p
{
max-width: 292px;
color: #696969;
}
@media screen and (max-width: 810px)
{
.csGumotex #points .points article
{
width: 100%;
display: block;
}
.csGumotex #points .points article h3 br
{
display: none;
}
.csGumotex #points .points article p
{
max-width: 540px;
}
}  .csGumotex #content3
{
height: 1066px;
}
.csGumotex #content3 .middle
{
height: 1080px;
padding-top: 153px;
position: relative;
top: -103px;
background: #7a8286 url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/bg-content3.jpg) no-repeat 0 0;
text-align: right;
}
.csGumotex #content3 .text
{
}
.csGumotex #content3 h2
{
padding: 0 0 153px 0;
color: white;
}
.csGumotex #content3 p
{
padding-left: 540px;
color: white;
}
@media screen and (max-width: 1330px)
{
.caseStudy #content3 .center
{
max-width: 100%;
}
.csGumotex #content3 p
{
padding-left: 55%;
}
}
@media screen and (max-width: 1230px)
{
.csGumotex #content3 .middle
{
background-position: right 0;
}
}
@media screen and (max-width: 1080px)
{
.csGumotex #content3 .middle
{
background-position: right 0;
}
.csGumotex #content3 p
{
padding-left: 50%;
}
}
@media screen and (max-width: 765px)
{
.csGumotex #content3 h2,
.csGumotex #content3 p
{
text-align: center;
}
.csGumotex #content3 p
{
padding: 0;
}
}  .csGumotex #content4
{
height: 927px;
}
.csGumotex #content4 .middle
{
height: 1197px;
padding-top: 192px;
position: relative;
top: -302px;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/bg-content4.png) no-repeat center 0;
text-align: left;
}
.csGumotex #content4 .text
{
}
.csGumotex #content4 h2
{
padding: 0 0 27px 0;
color: #00c89a;
}
.csGumotex #content4 p
{
max-width: 653px;
color: #292929;
}
.csGumotex #content4 .stand
{
width: 1762px;
height: 504px;
position: absolute;
left: -132px;
bottom: 0px;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/stand.png) no-repeat center bottom;
}
.csGumotex #content4 .photo
{
width: 490px;
height: 490px;
position: absolute;
right: 18px;
bottom: 480px;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/photo.jpg) no-repeat center 0;
background-size: cover;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
@media screen and (max-width: 1845px)
{
.csGumotex #content4 .stand
{
width: 110%;
left: -5%;
background-size: contain;
}
}
@media screen and (max-width: 1620px)
{
.csGumotex #content4 .stand
{
width: 104%;
left: -2%;
background-size: contain;
}
}
@media screen and (max-width: 1530px)
{
.csGumotex #content4 .stand
{
width: 100%;
left: 0;
}
}
@media screen and (max-width: 1314px)
{
.csGumotex #content4
{
height: 800px;
}
.csGumotex #content4 .middle
{
height: 1080px;
}
.csGumotex #content4 .stand
{
width: 100%;
left: 0;
}
.csGumotex #content4 .photo
{
width: 360px;
height: 360px;
top: 180px;
bottom: auto;
background-size: contain;
}
}
@media screen and (max-width: 1080px)
{
.csGumotex #content4 h2,
.csGumotex #content4 p
{
max-width: 100%;
text-align: center;
}
.csGumotex #content4 .stand
{
display: none;
}
.csGumotex #content4 .photo
{
margin: 45px auto 0 auto;
position: static;
}
}
@media screen and (max-width: 675px)
{
.csGumotex #content4 .photo
{
width: 225px;
height: 225px;
}
}
@media screen and (max-width: 585px)
{
.csGumotex #content4 .photo
{
display: none;
}
}
@media screen and (max-width: 540px)
{
.csGumotex #content4 .photo
{
width: 180px;
height: 180px;
margin-top: 27px;
display: block;
z-index: 150;
}
}  .csGumotex #content5
{
height: 1050px;
}
.csGumotex #content5 .middle
{
height: 1236px;
padding-top: 105px;
position: relative;
top: -31px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/bg-content5.jpg) no-repeat center 0;
text-align: left;
}
.csGumotex #content5 .center
{
position: relative;
}
.csGumotex #content5 .text
{
max-width: 486px;
}
.csGumotex #content5 h2
{
padding: 0 0 36px 0;
color: #00c89a;
}
.csGumotex #content5 p
{
color: #696969;
}
.csGumotex #content5 cite
{
max-width: 1017px;
margin: 85px auto 0 auto;
padding: 67px 108px 49px 108px;
background: rgba(255,255,255,0.5);
color: #6c6d6d;
font-size: 32px;
line-height: 41px;
text-align: center;
}
.csGumotex #content5 cite:before
{
content: "“";
position: absolute;
left: 38px;
top: -9px;
color: #00c89a;
font-size: 180px;
line-height: 180px;
font-weight: bold;
}
.csGumotex #content5 iframe
{
width: 498px;
height: 327px;
position: absolute;
right: 0px;
top: 86px;
}
.csGumotex #content5 .catalog
{
width: 944px;
height: 567px;
position: absolute;
left: -93px;
bottom: -113px;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/catalog.png) no-repeat center center;
background-size: contain;
}
.csGumotex #content5 .tablet
{
width: 625px;
height: 446px;
position: absolute;
left: 487px;
bottom: -132px;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/tablet.png) no-repeat center center;
background-size: contain;
}
.csGumotex #content5 .leaflet
{
width: 684px;
height: 684px;
position: absolute;
right: -85px;
bottom: -202px;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/leaflet.png) no-repeat center center;
background-size: contain;
}
@media screen and (max-width: 1630px)
{
.csGumotex #content5 .catalog
{
width: 756px;
height: 454px;
left: -27px;
bottom: -117px;
}
.csGumotex #content5 .tablet
{
width: 500px;
height: 357px;
left: 567px;
bottom: -99px;
}
.csGumotex #content5 .leaflet
{
width: 547px;
height: 547px;
right: -18px;
bottom: -189px;
}
}
@media screen and (max-width: 1485px)
{
.csGumotex #content5 .catalog
{
left: 0px;
bottom: -117px;
}
.csGumotex #content5 .tablet
{
left: 50%;
bottom: -99px;
margin-left: -180px;
}
.csGumotex #content5 .leaflet
{
right: -18px;
bottom: -189px;
}
}
@media screen and (max-width: 1260px)
{
.csGumotex #content5 .catalog
{
width: 630px;
height: 454px;
left: 0px;
bottom: -117px;
}
.csGumotex #content5 .tablet
{
width: 360px;
height: 357px;
left: 50%;
bottom: -99px;
margin-left: -117px;
}
.csGumotex #content5 .leaflet
{
width: 630px;
height: 547px;
right: -72px;
bottom: -99px;
}
}
@media screen and (max-width: 1080px)
{
.csGumotex #content5
{
height: auto;
margin-top: -27px;
}
.csGumotex #content5 .middle
{
height: auto;
padding-top: 90px;
padding-bottom: 90px;
top: 0;
background-size: cover;
}
.csGumotex #content5 .text
{
max-width: 48%;
}
.csGumotex #content5 iframe
{
width: 45%;
}
.csGumotex #content5 .catalog,
.csGumotex #content5 .tablet,
.csGumotex #content5 .leaflet
{
display: none;
}
.csGumotex #content6
{
display: none;
}
.csGumotex #content5 cite br
{
display: none;
}
}
@media screen and (max-width: 840px)
{
.csGumotex #content5 .text
{
max-width: 100%;
padding-bottom: 36px;
text-align: center;
}
.csGumotex #content5 iframe
{
width: 100%;
position: static;
}
}
@media screen and (max-width: 590px)
{
.csGumotex #content5 cite
{
padding: 90px 36px 54px;
}
}  .csGumotex #content6
{
height: 156px;
z-index: 0;
background-size: auto 1183px;
}   .csSpolecne
{
} .csSpolecne #csintro
{
height: 855px;
color: white;
}
.csSpolecne #csintro .middle
{
height: 864px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/spolecne/bg-intro.jpg) no-repeat 0 0;
}
.csSpolecne #csintro .middle h1
{
max-width: 504px;
padding: 0 0 54px 0;
}
.csSpolecne #csintro .middle p
{
max-width: 445px;
}
.csSpolecne #csintro .middle .arrow
{
bottom: 27px;
z-index: 100;
}  .csSpolecne #content1
{
height: 936px;
position: static;
}
.csSpolecne #content1 .middle
{
height: 1003px;
padding-top: 138px;
position: relative;
z-index: 20;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/spolecne/bg-content1.jpg) no-repeat center 0;
text-align: right;
}
.csSpolecne #content1 .text
{
padding-left: 504px;
}
.csSpolecne #content1 h2
{
padding: 0 0 72px 0;
color: #00c89a;
}
.csSpolecne #content1 p
{
color: #696969;
}
.csSpolecne #content1 .card
{
width: 596px;
height: 487px;
position: absolute;
left: 63px;
top: 113px;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/spolecne/card.png) no-repeat center center;
background-size: contain;
}
@media screen and (max-width: 1350px)
{
.csSpolecne #content1 .text
{
padding-left: 50%;
}
.csSpolecne #content1 .card
{
width: 40%;
left: 0;
}
}
@media screen and (max-width: 900px)
{
.csSpolecne #content1 .text
{
padding: 0;
text-align: left;
}
.csSpolecne #content1 .card
{
display: none;
}
}  .csSpolecne #content2
{
height: 900px;
position: static;
}
.csSpolecne #content2 .middle
{
height: 1032px;
padding-top: 187px;
position: relative;
top: -128px;
z-index: 30;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/spolecne/bg-content2.jpg) no-repeat center 0;
text-align: left;
}
.csSpolecne #content2 .text
{
}
.csSpolecne #content2 h2
{
padding: 0 0 30px 0;
color: #e5eaee;
}
.csSpolecne #content2 p
{
max-width: 846px;
color: #3a7cb6;
}
.csSpolecne #content2 .cz,
.csSpolecne #content2 .sk
{
}
@media screen and (max-width: 900px)
{
.csSpolecne #content2 .middle
{
padding-top: 90px;
}
}
@media screen and (max-width: 630px)
{
.csSpolecne #content2 h2
{
font-size: 54px;
line-height: 54px;
}
.csSpolecne #content2 .middle
{
padding-top: 90px;
}
}  .csSpolecne #content3
{
}
.csSpolecne #content3 .middle
{
height: 1095px;
padding-top: 70px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/spolecne/bg-content3.jpg) no-repeat center bottom;
background-size: 100% 100%;
text-align: right;
}
.csSpolecne #content3 .text
{
}
.csSpolecne #content3 h2
{
padding: 0 0 45px 0;
color: #00c89a;
}
.csSpolecne #content3 p
{
padding-left: 621px;
color: #696969;
}
.csSpolecne #content3 .websites
{
width: 1057px;
height: 793px;
position: absolute;
left: -102px;
top: 135px;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/spolecne/websites.png) no-repeat center center;
background-size: contain;
}
.csSpolecne #content3 .stamps
{
width: 486px;
height: 238px;
position: absolute;
left: 496px;
bottom: 237px;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/spolecne/stamps.png) no-repeat center center;
background-size: contain;
}
@media screen and (max-width: 1440px)
{
.csSpolecne #content3 p
{
padding-left: 40%;
}
.csSpolecne #content3 .websites
{
width: 50%;
left: -18px;
top: 63px;
}
.csSpolecne #content3 .stamps
{
left: 50%;
bottom: 180px;
margin-left: -243px;
}
}
@media screen and (max-width: 1080px)
{
.csSpolecne #content3 .middle
{
padding-top: 90px;
padding-bottom: 450px;
height: auto;
}
.csSpolecne #content3 .text
{
text-align: center;
}
.csSpolecne #content3 p
{
padding: 0;
}
.csSpolecne #content3 .websites
{
display: none;
}
}
@media screen and (max-width: 630px)
{
.csSpolecne #content3 .stamps
{
width: 90%;
left: 5%;
margin: 0;
}
}  .csSpolecne #points
{
height: 900px;
}
.csSpolecne #points:after
{
content: " ";
width: 100%;
height: 447px;
position: absolute;
left: 0;
bottom: -18px;
display: block;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/spolecne/footer-illustration.png) no-repeat center bottom;
background-size: contain;
}
.csSpolecne #points .middle
{
height: 1131px;
padding-top: 180px;
position: relative;
top: -231px;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/spolecne/bg-points.png) no-repeat center 0;
}
.csSpolecne #points h2
{
padding: 0 0 69px 0;
color: #00c89a;
}
.csSpolecne #points p.text
{
}
.csSpolecne #points .points
{
}
.csSpolecne #points .points article
{
}
.csSpolecne #points .points article strong
{
background: white;
color: black;
font-weight: 800;
}
.csSpolecne #points .points article:nth-of-type(1) strong
{
font-size: 108px;
line-height: 81px;
}
.csSpolecne #points .points article:nth-of-type(2) strong
{
font-size: 225px;
}
.csSpolecne #points .points article:nth-of-type(3) strong
{
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/spolecne/target.svg) no-repeat center center;
background-size: 228px auto;
}
.csSpolecne #points .points article h3
{
color: white;
}
.csSpolecne #points .points article p
{
max-width: 288px;
color: white;
}
@media screen and (max-width: 1200px)
{
.csSpolecne #points .points article
{
width: 320px;
}
.csSpolecne #points .points article strong
{
width: 243px;
height: 243px;
}
.csSpolecne #points .points article:nth-of-type(1) strong
{
font-size: 90px;
line-height: 63px;
}
.csSpolecne #points .points article:nth-of-type(2) strong
{
font-size: 180px;
}
.csSpolecne #points .points article:nth-of-type(3) strong
{
background-size: 180px auto;
}
.csSpolecne #points .points article p
{
max-width: 270px;
}
}
@media screen and (max-width: 1050px)
{
.csSpolecne #points
{
height: auto;
margin-bottom: -270px;
}
.csSpolecne #points .middle
{
height: auto;
padding-bottom: 90px;
}
.csSpolecne #points:after
{
height: 270px;
bottom: 225px;
background-position: center bottom;
background-size: contain;
}
.csSpolecne #points .points article
{
padding-bottom: 72px;
}
}
@media screen and (max-width: 630px)
{
.csSpolecne #points:after
{
display: none;
}
}
@media screen and (max-width: 600px)
{
.csSpolecne #points .points article
{
width: 100%;
}
.csSpolecne #points .points article h3 br
{
display: none;
}
.csSpolecne #points .points article p
{
max-width: 100%;
}
}            .csStern
{
}
@media only screen and (max-width:600px)
{
.csStern h1,
.csStern h2{
font-size:50px;
line-height:54px;
}
} .csStern #csintro
{ z-index: 50;
color: white;
}
.csStern #csintro .middle
{
height: 911px;
background-image: linear-gradient(to right, rgba(0,200,154,1) 0%,rgba(0,200,154,0) 63%,rgba(0,200,154,0) 100%), url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/bg-intro.jpg);
background-position:center center,center center;
background-repeat:no-repeat,no-repeat;
background-size:cover, cover;
}
.csStern #csintro .middle h1
{
padding: 0 0 38px 0;
}
.csStern #csintro .middle p
{
max-width: 450px;
padding: 0 0 97px 0;
}
.csStern #csintro .arrow
{
bottom: 81px;
}
.csStern #csintro ul
{
list-style: none;
}
.csStern #csintro ul li
{
padding: 0 9px;
display: inline-block;
vertical-align: top;
}
.csStern #csintro ul li a
{
width: 99px;
padding: 126px 0 0 0;
position: relative;
display: block;
color: white;
font-size: 27px;
line-height: 27px;
text-align: center;
}
.csStern #csintro ul li a:hover
{
text-decoration: underline;
}
.csStern #csintro ul li a:before
{
content: " ";
width: 99px;
height: 99px;
position: absolute;
left: 0;
top: 0;
display: block;
background-color: #eee019;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: box-shadow 0.3s ease, background 0.3s ease;
-moz-transition: box-shadow 0.3s ease, background 0.3s ease;
-o-transition: box-shadow 0.3s ease, background 0.3s ease;
transition: box-shadow 0.3s ease, background 0.3s ease;
}
.csStern #csintro ul li a.web:before
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/icon-web.svg);
background-size: 51px auto;
}
.csStern #csintro ul li a.video:before
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/icon-video.png);
background-size: 29px auto;
}
.csStern #csintro ul li a:hover:before
{
}
@media screen and (max-width: 540px)
{
.csStern #csintro h1 br
{
display: none;
}
}  .csStern #content1
{
}
.csStern #content1 .middle
{  padding-top: 104px; padding-bottom: 335px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/bg-beer-big.jpg);
background-color:#fff;
background-size: 100% auto;
background-repeat:no-repeat; background-position:top center;
text-align: right;
}
.csStern #content1 .text
{
}
.csStern #content1 h2
{
padding: 0 0 85px 0;
color: #fff;
}
.csStern #content1 p
{
padding: 0 0 0 468px;
color: #fff;
}
@media screen and (max-width: 1365px)
{
.csStern #content1 .middle
{
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkKAAAAHYAckOR8l0AAAAASUVORK5CYII=), url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/bg-beer-big.jpg);
background-repeat:repeat, no-repeat;
background-position: top left, top center;
}
}
@media screen and (max-width: 1386px)
{
.csStern #content1 p
{
padding-left: 46%;
}
}
@media screen and (max-width: 1365px)
{
.csStern #content1 .middle
{
background-size: auto 100%;
}
}
@media screen and (max-width: 1110px)
{
}
@media screen and (max-width: 810px)
{
.csStern #content1 .text
{
text-align: left;
}
.csStern #content1 p
{
padding: 0;
}
.csStern #content1 p br
{
display: none;
}
}
@media screen and (max-width: 540px)
{
.csStern #content1 .middle
{
min-height: 1px;
padding-bottom: 90px;
}
}  .csStern #content2
{
height: 908px;
z-index:3;
}
.csStern #content2 .middle
{
height: 1253px; padding-top: 445px;
position: relative;
top: -296px;
background-image:url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/bg-grass-n-bubbles.png), linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 180px,rgba(255,255,255,1) 260px,rgba(255,255,255,1) 800px,rgba(255,255,255,0) 801px,rgba(255,255,255,0) 100%); background-repeat:no-repeat;
background-position: center 0;
text-align: left;
background-color:transparent;
}
.csStern #content2 .text
{
}
.csStern #content2 h2
{
padding: 0 0 58px 0;
color: #000;
}
.csStern #content2 p
{
max-width: 484px;
color: #000;
}
.csStern #content2 .badges
{
position: absolute;
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 669px;
height: 436px;
right: 75px;
bottom: 283px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/badges.png);
}
@media screen and (max-width: 1440px)
{
}
@media screen and (max-width: 1110px)
{
.csStern #content2
{  }
.csStern #content2 .middle
{    }
.csStern #content2 .badges
{
display: none;
}
.csStern #content2 p
{
max-width: 100%;
}
}  .csStern #content3
{
z-index:2; }
.csStern #content3 .middle
{    
height: 1072px;
padding-top: 153px;
padding-bottom:220px;
position: relative;
top: -165px;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/bg-bar.png);
text-align: right;
background-repeat: no-repeat;
background-size: 100% auto;
background-position:top center;
}
.csStern #content3 .text
{
}
.csStern #content3 h2
{
padding: 110px 0 64px 0;
color: white;
}
.csStern #content3 p
{
padding-left: 470px;
color: white;
}
.csStern #content3 .bottle
{
position: absolute;
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.csStern #content3 .bottle1
{
width: 589px;
height: 530px;
left: -148px;
bottom: 251px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/07-amer.png);
}
.csStern #content3 .bottle2
{
width: 593px;
height: 533px;
left: -46px;
bottom: 251px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/07-maor.png);
}
.csStern #content3 .bottle3
{
width: 593px;
height: 535px;
left: 55px;
bottom: 251px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/07-czecho.png);
}
.csStern #content3 .bottle4
{
width: 546px;
height: 570px;
left: 159px;
bottom: 231px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/07-komarovska.png);
}
@media screen and (max-width: 1365px)
{
.csStern .bottle{
display:none!important;
}
}
@media screen and (max-width: 1432px)
{
.csStern #content3 .middle
{
background-size: 1432px auto;
}
.csStern #content4 .middle
{
background-size: 1432px auto!important;
}
.csStern #content3 h2 br
{ }
}
@media screen and (max-width: 1244px)
{
.csStern #content3 p {
padding-left: 44%;
}
}
@media screen and (max-width: 1330px)
{
.caseStudy #content3 .center
{
max-width: 100%;
}
.csStern #content3 p
{
padding-left: 44%;
}
}
@media screen and (max-width: 1080px)
{    .csStern #content3 p
{
padding-left: 50%;
}
}
@media screen and (max-width: 765px)
{
.csStern #content3 h2,
.csStern #content3 p
{
text-align: center;
}
.csStern #content3 p
{
padding: 0;
}
}  .csStern #content4
{ }
.csStern #content4 .middle
{ padding-top: 360px;
padding-bottom:470px;
position: relative;
top: -341px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/bg-hops.jpg);
background-repeat:no-repeat;
background-size:100% auto;
text-align: left;
background-position: top center;
}
.csStern #content4 .text
{
text-align:right;   
}
.csStern #content4 h2
{
color: #fff;
padding-bottom:64px;
}
.csStern #content4 p
{
display: inline-block;
max-width: 588px;
color: #fff;
}
.csStern #content4 .star
{
position: absolute;
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-blend-mode: soft-light;
width: 644px;
height: 618px;
left: 55px;
top: 457px;
opacity: 1;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/black-star.png);
}
@media screen and (max-width: 1080px)
{
.csStern #content4 h2,
.csStern #content4 p
{
max-width: 100%;
text-align: center;
}
}  .csStern #content5
{ }
.csStern #content5 .middle
{ height: 1143px;
padding-top: 105px; position: relative;
top: -661px;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/bg-leaves.png);
background-repeat:no-repeat;
background-position: center 0;
background-size: 1430px auto;
text-align: left;
}
.csStern #content5 .center
{
position: relative;
}
.csStern #content5 .text
{
background:rgba(255,255,255,0.85);
max-width: 845px;
padding: 65px 65px 100px;
}
.csStern #content5 h2
{
padding: 0 0 36px 0;
color: #000;
}
.csStern #content5 p
{
color: #000;
}
@media screen and (max-width: 840px)
{
.csStern #content5 .middle
{
padding-left: 10px;
padding-right: 10px;
}
.csStern #content5 .text
{
max-width: 100%;
padding: 10px 10px 36px;
text-align: center;
}
}  .csStern #content6
{
height:323px;
z-index: 0;
background-size: auto 1183px;
}
.csStern #content6 .middle
{
position:relative;
top:-916px;
background-color: transparent;
background-color: #ffed00;
padding:296px 0 0;
height: 1239px;
text-align:center;
}
.csStern #content6 .text h2
{
padding-bottom: 40px;
}
.csStern #content6 .text 
{
width: 748px;
max-width:100%;
display:inline-block;
}
.csStern #content6 .merch
{
position: absolute;
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.csStern #content6 .merch1
{
width: 589px;
height: 530px;
left: calc(50% - 589px/2 - 432px);
bottom: -66px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/merch-bottle.png);
}
.csStern #content6 .merch2
{
width: 593px;
height: 535px;
left: calc(50% - 535px/2 + 110px);
bottom: -98px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/merch-pack.png);
}
.csStern #content6 .merch3
{
width: 593px;
height: 533px;
left: calc(50% - 533px/2 - 160px);
bottom: -125px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/merch-shirt.png);
}
.csStern #content6 .merch4
{
width: 546px;
height: 570px;
left: calc(50% - 570px/2 + 382px);
bottom: -122px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/merch-duel.png);
}
@media only screen and (max-width:820px)
{
.csStern #content6
{
height: 104px;
}
.csStern #content6 .middle
{
height: 1020px;
}
.csStern #content6 .merch1
{
width: 172px;
height: 186px;
left: calc(50% - 172px/2 - 143px);
bottom: -30px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/merch-bottle.png);
}
.csStern #content6 .merch2
{
width: 172px;
height: 186px;
left: calc(50% - 172px/2 + 55px);
bottom: -43px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/merch-pack.png);
}
.csStern #content6 .merch3
{
width: 172px;
height: 186px;
left: calc(50% - 172px/2 - 40px);
bottom: -43px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/merch-shirt.png);
}
.csStern #content6 .merch4
{
width: 172px;
height: 186px;
left: calc(50% - 172px/2 + 131px);
bottom: -43px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/stern/merch-duel.png);
}
}   .csSip
{
}
@media only screen and (max-width:600px)
{
.csSip h1,
.csSip h2{
font-size:50px;
line-height:54px;
}
} .csSip #csintro
{ z-index: 50;
color: white;
}
.csSip #csintro .middle
{
height: 911px;
background-color: #000;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/sip/bg-intro.png);
background-position:center center,center center;
background-repeat:no-repeat,no-repeat;
background-size:cover, cover;
}
.csSip #csintro .middle h1
{
padding: 0 0 38px 0;
}
.csSip #csintro .middle p
{
max-width: 450px;
padding: 0 0 97px 0;
}
.csSip #csintro .arrow
{
bottom: 81px;
}
.csSip #csintro ul
{
list-style: none;
}
.csSip #csintro ul li
{
padding: 0 9px;
display: inline-block;
vertical-align: top;
}
.csSip #csintro ul li a
{
width: 99px;
padding: 126px 0 0 0;
position: relative;
display: block;
color: white;
font-size: 27px;
line-height: 27px;
text-align: center;
}
.csSip #csintro ul li a:hover
{
text-decoration: underline;
}
.csSip #csintro ul li a:before
{
content: " ";
width: 99px;
height: 99px;
position: absolute;
left: 0;
top: 0;
display: block;
background-color: #42356b;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: box-shadow 0.3s ease, background 0.3s ease;
-moz-transition: box-shadow 0.3s ease, background 0.3s ease;
-o-transition: box-shadow 0.3s ease, background 0.3s ease;
transition: box-shadow 0.3s ease, background 0.3s ease;
}
.csSip #csintro ul li a.web:before
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/sip/icon-web.png);
background-size: 51px auto;
}
.csSip #csintro ul li a.video:before
{
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/gumotex/icon-video.png);
background-size: 29px auto;
}
.csSip #csintro ul li a:hover:before
{
}
@media screen and (max-width: 1024px)
{
.csSip #csintro .middle
{
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkKAAAAHYAckOR8l0AAAAASUVORK5CYII=), url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/sip/bg-intro.png);
background-repeat:repeat, no-repeat;
background-position: top left, top center;
}
}
@media screen and (max-width: 540px)
{
.csSip #csintro h1 br
{
display: none;
}
}  .csSip #content1
{
z-index:2;
height: 590px;
}
.csSip #content1 .middle
{  padding-top: 104px;  background-color:transparent;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=), url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/sip/sea-drop.png);
background-size: 100% calc(100% - 370px), 100% 370px;
background-repeat:no-repeat, no-repeat; background-position:top left,bottom center;
text-align: right;
height: calc(100% + 370px);
}
.csSip #content1 .text
{
}
.csSip #content1 h2
{
padding: 0 0 85px 0;
color: #fff;
}
.csSip #content1 p
{
padding: 0 0 0 468px;
color: #fff;
}
.csSip #content1 .photos
{
position: absolute;
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 593px;
height: 701px;
left: 75px;
top: 46px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/sip/obj-photos.png);
}
@media screen and (max-width: 1365px)
{
.csSip #content1 .middle
{
}
}
@media screen and (max-width: 1386px)
{
.csSip #content1 p
{
padding-left: 46%;
}
}
@media screen and (max-width: 1365px)
{
.csSip #content1 .middle
{ background-size: 1430px calc(100% - 333px), 1430px 335px;
}
.csSip #content1 .photos{
width: 353px;
height: 418px;
}
}
@media screen and (max-width: 810px)
{
.csSip #content1 p{
font-size: 22px;
line-height: 29px;
}
.csSip #content1 .photos{
top: 556px;
left:calc(50% - 353px/2)
}
.csSip #content1 .text
{
text-align: left;
}
.csSip #content1 p
{
padding: 0;
}
.csSip #content1 p br
{
display: none;
}
}
@media screen and (max-width: 540px)
{
.csSip #content1 .middle
{
min-height: 1px;
padding-bottom: 90px;
}
.csSip #content1 .photos{
display:none;
}
}  .csSip #content2
{  }
.csSip #content2 .middle
{
height: 1253px; padding-top: 476px;
position: relative;
top:1px; background-image:url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/sip/bg-sea.jpg);
background-repeat:no-repeat;
background-position: top center;
text-align: left;
background-color:transparent;
}
.csSip #content2 .text
{
}
.csSip #content2 h2
{
padding: 0 0 58px 0;
color: #fff;
}
.csSip #content2 p
{
max-width: 484px;
color: #fff;
}
.csSip #content2 .circles
{
position: absolute;
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 620px;
height: 646px;
right: 75px;
top: 516px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/sip/obj-circles.png);
}
@media screen and (max-width: 1365px)
{
.csSip #content2 .circles
{
width: 354px;
height: 368px;
}
}
@media screen and (max-width: 1110px)
{
.csSip #content2
{  }
.csSip #content2 .middle
{    }
.csSip #content2 p
{
max-width: 100%;
}
.csSip #content2 .circles
{
display:none;
}
}  .csSip #content3
{
z-index:2; }
.csSip #content3 .middle
{
padding-top: 153px;
padding-bottom:220px;
position: relative; background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/sip/bg-gold.jpg);
text-align: right;
background-repeat: no-repeat;
background-size: auto 100%;
background-position:top center;
}
.csSip #content3 .text
{
text-align:right;   
}
.csSip #content3 h2
{
padding: 0 0 64px 0;
color: white;
}
.csSip #content3 p
{
color: white;
background-image:url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/sip/bg-brush.png);
background-repeat:no-repeat;
background-position: center center;
width: 550px;
max-width:90%;
background-size: contain;
display:inline-block;
padding: 138px 69px 121px;
margin-right: -69px;
}
.csSip #content3 .poster
{
position: absolute;
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.csSip #content3 .poster1
{
width: 318px;
height: 450px;
left: 85px;
bottom: 522px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/sip/obj-poster1.png);
}
.csSip #content3 .poster2
{
width: 318px;
height: 450px;
left: 413px;
bottom: 522px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/sip/obj-poster2.png);
}
.csSip #content3 .poster3
{
width: 645px;
height: 275px;
left: 85px;
bottom: 237px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/sip/obj-poster-long.png);
}
@media screen and (max-width: 1432px)
{
.csSip #content3 .middle
{
background-size: 1590px auto;
}
.csSip #content4 .middle
{
background-size: 1590px calc(100% - 370px), 1590px 370px!important;
}
.csSip #content3 h2 br
{ }
}
@media screen and (max-width: 1244px)
{
}
@media screen and (max-width: 1330px)
{
.caseStudy #content3 .center
{
max-width: 100%;
}
.caseStudy #content3 .center .text p
{
margin-right:0;
}
}
@media screen and (max-width: 1080px)
{
}
@media screen and (max-width: 1296px)
{
.csSip #content3 .middle {
padding-top: 73px;
padding-bottom: 610px;
}
.csSip #content3 h2{
padding-bottom:0;
}
.csSip #content3 h2,
.csSip #content3 p
{
text-align: center;
}
.csSip #content3 .text{
text-align:center;
}
.csSip #content3 p
{
display:inline-block;
padding: 60px 60px;
box-sizing: content-box;
width: 310px;
font-size: 22px;
}
.csSip #content3 .poster3 {
width: 476px;
height: 203px;
left: calc(50% - 476px/2);
bottom: 177px;
}
.csSip #content3 .poster1 {
width: 158px;
height: 230px;
left: calc(50% - 190px);
bottom: 384px;
}	
.csSip #content3 .poster2 {
width: 158px;
height: 230px;
left: calc(50% - -32px);
bottom: 384px;
}	
}
@media only screen and (max-width:400px){
.csSip #content3 p {
margin-left: -35px;
margin-right: -35px;
}
}  .csSip #content4
{
z-index:2;
height: 870px;
}
.csSip #content4 .middle
{ padding-top: 170px;
padding-bottom:800px;
position: relative;
top: -261px;
background-color:transparent;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/sip/bg-whitenoise.png), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWP4/+//fwAJ+AP8AStX+gAAAABJRU5ErkJggg==);
background-position: top left, top 50% left;
background-size: 100% calc(100% - 370px), 100% 370px;
background-repeat:no-repeat, no-repeat;
background-position:top left,bottom center;
text-align: left;
}
.csSip #content4 .text
{
color: #000;
text-align:left; 
}
.csSip #content4 h2
{
color: #000;
padding-bottom:64px;
max-width:730px;
}
.csSip #content4 p
{
display: inline-block;
color: #000;
}
.csSip #content4 .banner1
{
position: absolute;
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 692px;
height: 559px;
left: calc(50% - 690px);
top: 590px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/sip/obj-banner1.png);
}
.csSip #content4 .banner2
{
position: absolute;
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 938px;
height: 662px;
right: calc(50% - 620px);
top: 467px;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/sip/obj-banner2.png);
}
@media screen and (max-width: 1080px){
.csSip #content4 .banner1
{
width: 555px;
height: 449px;
left: calc(50% - 420px);
top: 670px;
}
.csSip #content4 .banner2
{
width: 668px;
height: 471px;
right: calc(50% - 530px);
top: 597px;
}
}
@media screen and (max-width: 500px){
.csSip #content4 .banner1
{
bottom: 350px;
top: auto;
}
.csSip #content4 .banner2
{
top: auto;
bottom: 390px;
}
}
@media screen and (max-width: 1080px)
{
.csSip #content4 h2,
.csSip #content4 p
{
max-width: 100%;
text-align: center;
}
}  .csSip #points
{
z-index:5;
}
.csSip #points .middle
{
padding-top: 216px; background-color:transparent;
background-image: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/sip/bg-bluenoise.png),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM01Az4DwAC6AGrUcEvRgAAAABJRU5ErkJggg==);
background-repeat:no-repeat;
background-position: top left, top 50% left; background-size: 100% 1099px, 100% calc(100% - 500px);
background-repeat:no-repeat, no-repeat;
background-position:top left,bottom center;
}
.csSip #points h2
{
padding: 0 0 45px 0;
color: #fff;
text-align: center;
}
.csSip #points p.text
{
color: #fff;
max-width:900px;
display:inline-block;
margin-bottom:20px;
}
.csSip #points .points
{
}
.csSip #points .points article
{
padding: 0 0 78px 0;
}
.csSip #points .points article strong
{
margin-bottom: 45px;
background-color: #318fb8;
}
.csSip #points .points article:last-child strong
{    
font-size: 92px;
}
.csSip #points .points article h3
{
max-width: 205px;
display: inline-block;
color: #fff;
}
.csSip #points .points article p
{
max-width: 292px;
color: #fff;
}
@media screen and (max-width: 1430px){
.csSip #points .middle
{
background-size: 1591px 1099px, 100% calc(100% - 500px);
}
}
@media screen and (max-width: 810px)
{
.csSip #points .points article
{
width: 100%;
display: block;
}
.csSip #points .points article h3 br
{
display: none;
}
.csSip #points .points article p
{
max-width: 540px;
}
}            .csCaseStudyTemplate
{
} .csCaseStudyTemplate #csintro
{
color: white;
}
.csCaseStudyTemplate #csintro .middle
{
height: px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/template/bg-intro.jpg) no-repeat 0 0;
}
.csCaseStudyTemplate #csintro .middle p
{
max-width: px;
}  .csCaseStudyTemplate #content1
{
height: px;
}
.csCaseStudyTemplate #content1 .middle
{
height: px;
padding-top: px;
position: relative;
top: -px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/template/bg-content1.jpg) no-repeat center 0;
text-align: right;
}
.csCaseStudyTemplate #content1 .text
{
}
.csCaseStudyTemplate #content1 h2
{
padding: ;
color: ;
}
.csCaseStudyTemplate #content1 p
{
color: ;
}  .csCaseStudyTemplate #content2
{
height: px;
}
.csCaseStudyTemplate #content2 .middle
{
height: px;
padding-top: px;
position: relative;
top: -px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/template/bg-content2.jpg) no-repeat center 0;
text-align: right;
}
.csCaseStudyTemplate #content2 .text
{
}
.csCaseStudyTemplate #content2 h2
{
padding: ;
color: ;
}
.csCaseStudyTemplate #content2 p
{
color: ;
}  .csCaseStudyTemplate #content3
{
height: px;
}
.csCaseStudyTemplate #content3 .middle
{
height: px;
padding-top: px;
position: relative;
top: -px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/template/bg-content3.jpg) no-repeat center 0;
text-align: right;
}
.csCaseStudyTemplate #content3 .text
{
}
.csCaseStudyTemplate #content3 h2
{
padding: ;
color: ;
}
.csCaseStudyTemplate #content3 p
{
color: ;
}  .csCaseStudyTemplate #content4
{
height: px;
}
.csCaseStudyTemplate #content4 .middle
{
height: px;
padding-top: px;
position: relative;
top: -px;
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/template/bg-content4.jpg) no-repeat center 0;
text-align: right;
}
.csCaseStudyTemplate #content4 .text
{
}
.csCaseStudyTemplate #content4 h2
{
padding: ;
color: ;
}
.csCaseStudyTemplate #content4 p
{
color: ;
}  .csCaseStudyTemplate #person
{
height: px;
}
.csCaseStudyTemplate #person .middle
{
min-height: px;
padding-top: px;
position: relative;
top: -px;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/template/bg-person.jpg) no-repeat center 0;
text-align: right;
}
.csCaseStudyTemplate #person .text
{
}
.csCaseStudyTemplate #person h2
{
padding: ;
padding-left: ;
color: ;
}
.csCaseStudyTemplate #person p
{
padding-left: ;
color: ;
}
.csCaseStudyTemplate #person cite
{
margin-top: px;
margin-left: px;
}  .csCaseStudyTemplate #points
{
height: px;
color: ;
}
.csCaseStudyTemplate #points .middle
{
height: px;
padding-top: px;
position: relative;
top: -px;
background: url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/template/bg-points.png) no-repeat center 0;
}
.csCaseStudyTemplate #points h2
{
padding: ;
color: ;
}
.csCaseStudyTemplate #points p.text
{
}
.csCaseStudyTemplate #points .points
{
}
.csCaseStudyTemplate #points .points article
{
}
.csCaseStudyTemplate #points .points article strong
{
}
.csCaseStudyTemplate #points .points article:nth-of-type(2) strong
{
}
.csCaseStudyTemplate #points .points article:nth-of-type(3) strong
{
background: white url(//www.narrativemedia.cz/wp-content/themes/narrative-media/css/images/case-study/template/.png) no-repeat center center;
}
.csCaseStudyTemplate #points .points article h3
{
}
.csCaseStudyTemplate #points .points article p
{
}