@font-face {
font-family: 'BwModelicaSS02';
font-style: normal;
font-weight: 400;
src: url(//strapa.cz/wp-content/themes/jst/fonts/BwModelicaSS02-Light.eot);  src:local('BwModelicaSS02 Light'), local('BwModelicaSS02-Light'), url(//strapa.cz/wp-content/themes/jst/fonts/BwModelicaSS02-Light.eot?#iefix) format('embedded-opentype'), url(//strapa.cz/wp-content/themes/jst/fonts/BwModelicaSS02-Light.woff2) format('woff2'), url(//strapa.cz/wp-content/themes/jst/fonts/BwModelicaSS02-Light.woff) format('woff');
}
@font-face {
font-family: 'BwModelicaSS02';
font-style: normal;
font-weight: 500;
src: url(//strapa.cz/wp-content/themes/jst/fonts/BwModelicaSS02-Regular.eot);  src:local('BwModelicaSS02 Regular'), local('BwModelicaSS02-Regular'), url(//strapa.cz/wp-content/themes/jst/fonts/BwModelicaSS02-Regular.eot?#iefix) format('embedded-opentype'), url(//strapa.cz/wp-content/themes/jst/fonts/BwModelicaSS02-Regular.woff2) format('woff2'), url(//strapa.cz/wp-content/themes/jst/fonts/BwModelicaSS02-Regular.woff) format('woff');
}
@font-face {
font-family: 'BwModelicaSS02';
font-style: normal;
font-weight: 700;
src: url(//strapa.cz/wp-content/themes/jst/fonts/BwModelicaSS02-Medium.eot);  src:local('BwModelicaSS02 Medium'), local('BwModelicaSS02-Medium'), url(//strapa.cz/wp-content/themes/jst/fonts/BwModelicaSS02-Medium.eot?#iefix) format('embedded-opentype'), url(//strapa.cz/wp-content/themes/jst/fonts/BwModelicaSS02-Medium.woff2) format('woff2'), url(//strapa.cz/wp-content/themes/jst/fonts/BwModelicaSS02-Medium.woff) format('woff');
}
@font-face {
font-family: 'BwModelicaSS02';
font-style: normal;
font-weight: 900;
src: url(//strapa.cz/wp-content/themes/jst/fonts/BwModelicaSS02-Black.eot);  src:local('BwModelicaSS02 Black'), local('BwModelicaSS02-Black'), url(//strapa.cz/wp-content/themes/jst/fonts/BwModelicaSS02-Black.eot?#iefix) format('embedded-opentype'), url(//strapa.cz/wp-content/themes/jst/fonts/BwModelicaSS02-Black.woff2) format('woff2'), url(//strapa.cz/wp-content/themes/jst/fonts/BwModelicaSS02-Black.woff) format('woff');
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
*::selection {
color: #fff;
background: #000;
}
.jst-divider {
margin: 4em 0 !important;
} body:not(.home) .site-header { }
@media (max-width: 768px) {
.header-aligned-right .site-header, .header-widget, .site-header {
text-align: left;
}
}
.site-logo a {
box-shadow: none !important;
opacity: 0.3;
transition: all 0.5s;
}
.site-logo a:hover {
opacity: 1.0;
transition: all 0.2s;	
}
#site-navigation {
position: fixed;
top: 24px;
right: 32px;
display: none;
}
#site-navigation a {
color: #fff;
box-shadow: none;
text-transform: uppercase;
letter-spacing: 0.2em;
opacity: 0.5;
font-weight: 700;
font-size: 0.8em;
}
#site-navigation a:hover {
color: #fff !important;
opacity: 1;
}
body.light-mode #site-navigation a {
color: #000;
}
body.light-mode #site-navigation a:hover {
color: #000 !important;
}
.inside-navigation .main-nav {
background: rgba(0, 0, 0, 0.85);
}
.main-navigation.toggled .main-nav li {
text-align: right;
}
button.menu-toggle {
text-align: right;
}
.inside-header {
position: fixed;
z-index: 10;
} .intro {
padding-top: 64px;
padding-bottom: 64px;
margin-bottom: 0;
min-height: 50vh;
display: flex;
align-items: center;
}
.intro p {
text-align: left;
}  .page-hero .inside-article {
background: transparent;
}
.shadow img {
box-shadow: 0 20px 70px rgba(128, 255, 255, 0.2);
}
.jst-photo {
float: right;
margin-top: -33vh;
} body.single .page-hero {
min-height: 66vh;
display: flex;
align-items: center; }
.inside-page-hero {
width: 100%;
}
.rsDefault .rsGCaption {
bottom: 20%;
font-size: 14px;
padding: 8px 16px;
}
.visibleNearbySimple .rsSlide img {
opacity: 0.15;
}
.visibleNearbySimple .rsActiveSlide img {
opacity: 1;
}
.entry-content > [class*="wp-block-"]:not(:last-child) {
margin-bottom: 2.5em;
}
@media screen and (min-width: 782px) {
body.single h2 { }	
}
.t--left {
text-align: left !important;
}
.o--50 {
opacity: 0.5;
}
h2, h3, h4, h5, h6 {
color: #fff;
}
strong {
color: #fff; }
body.light-mode strong {
color: #000;
}
h2, h3, h4, h5,
.wp-block-columns {
transition: all 0.5s;
}
.more-works .wp-block-wpm-background h3 {
font-size: 24px !important;
}
.more-works p {
margin-bottom: 0;
padding-top: 1em;
}
.more-works .wp-block-wpm-background {
height: 180px; }
.more-works .wp-block-wpm-background p {
padding-top: 1em;
}
body.light-mode .more-works .featured-transp .wp-block-wpm-background h3 a {
color: #000 !important;
}
.more-works h3 {
padding-top: 1em;
margin-bottom: 0;
}
.wp-block-wpm-background h3 {
padding-left: 1em;
padding-right: 1em;
line-height: 1.4em;
}
@media (max-width: 599px) {
.more-works .wp-block-column {
margin-bottom: 4em;
}
} @keyframes textShine {
to {
background-position: 200%;
}
}
@media only screen and (max-width: 781px) {
.wp-block-columns {
display: block;
}
.has-2-columns .wp-block-column,
.has-3-columns .wp-block-column,
.has-4-columns .wp-block-column,
.has-5-columns .wp-block-column,
.has-6-columns .wp-block-column {
width: 100%;
}
}
.wp-block-wpm-background {
align-items: stretch;
}
.wp-block-wpm-background .entry-content { }
h3 a { transition: all 0.5s;
}
h3 a:hover {
transition: all 0.1s;
}
.site-content h3 a {
text-decoration: none;
}
body { background: #1d262d;
background: #181a1e;  }
@media screen and (min-width: 782px) {
body {
z-index: 1;
}
.overlay {
background: #081021; background: -webkit-radial-gradient(top left, #212121, #1F495C);
background: -moz-radial-gradient(top left, #212121, #1F495C);
background: radial-gradient(to bottom right, #212121, #1F495C); }
.revealHeading {
cursor: pointer;
} .site-footer {  }
}
.footer-widgets {
padding: 0;
}
footer.site-info {
padding-left: 0;
padding-right: 0;
padding-top: 0;
} a {
box-shadow: inset 0 -10px 0 rgba(0,255,255,0.2); transition: all 0.5s;
}
body.light-mode #page a {
box-shadow: inset 0 -10px 0 rgba(0,255,255,0.8);
transition: all 0.5s;
}
a:hover {
box-shadow: inset 0 -40px 0 rgba(0,255,255,1);
transition: all 0.2s;
color: black !important;
}
@media screen and (max-width: 800px) {
.has-large-font-size { }
}
.wp-block-wpm-background .entry-content h3 {
font-size: 28px;
}
body.home .wp-block-column.description p {
padding-bottom: 0;
margin-bottom: 0;
padding-top: 1em;
}
@media screen and (max-width: 781px) {
body.home .wp-block-column.description p {
padding-left: 30px;  }
body.home .wp-block-column.description h2 {
padding-left: 30px;
padding-top: 1.5em;
margin-bottom: 0;
}
}
.vertical {
color: rgba(0,0,0,0.3);
font-size: 48px;
text-transform: uppercase;
letter-spacing: 8px;
}
@media screen and (min-width: 1300px) {
.vertical {
transform: rotate(-90deg);
transform-origin: left bottom 0;
margin-left: -80px;
margin-top: 720px;
position: absolute;
font-size: 96px;
}
}
p.tags { font-size: 12px;
font-weight: 700;
word-spacing: 1em;
color: #fff; padding-bottom: 0 !important;
}
.wp-container-core-columns-is-layout-1 {
flex-wrap: wrap !important;
} .card--clickable,
.wp-block-wpm-background,
.wp-block-wpm-background .background-image,
.wp-block-video video { }
body.home .card--clickable .wp-block-wpm-background .entry-content {
padding-top: 96px;
padding-bottom: 96px;  }
.wp-block-video video {
box-shadow: 0 20px 70px rgba(0, 255, 255, 0.2);
}
.card--clickable .wp-block-wpm-background,
.wp-block-wpm-background.card--clickable {
cursor: pointer;
transition: all 0.5s;
}
.card--clickable:hover .wp-block-wpm-background,
.wp-block-wpm-background.card--clickable:hover {
box-shadow: 0 20px 70px rgba(0, 255, 255, 0.2);
transition: all 0.2s;
}
.card--clickable:hover a {
box-shadow: inset 0 -40px 0 rgba(0,255,255,1) !important;
color: black !important;
}
.wp-block-wpm-background.card--clickable.featured-transp,
.wp-block-wpm-background.card--clickable.featured-transp:hover {
box-shadow: none !important;
}
.entry-content .wp-block-wpm-background.has-background-image {
transition: all 1s;
}
.entry-content .wp-block-wpm-background.has-background-image:not(.stay):hover  {
transform: 
scale(1.04,1.04) ;
transition: all 0.5s;
}
@media screen and (max-width: 800px) {
.has-large-font-size {
font-size: 24px;	
}
} .wdi_feed_thumbnail_1 .wdi_photo_wrap_inner {
border: 5px solid #151515 !important;
background-color: #151515 !important;
}
.wdi_feed_thumbnail_1 .wdi_feed_container {
border-bottom: 5px solid #151515 !important;
background-color: #151515 !important;
}
.wdi_feed_theme_1 .wdi_feed_wrapper {
background: #151515 !important;
}
.trim--ponavia,
.trim--as {
height: 1600px;
overflow: hidden;
border-radius: 8px;
border: 8px solid rgba(255, 255, 255, 0.1);
}
.gallery--screens img {
border-radius: 8px;
border: 8px solid rgba(255, 255, 255, 0.1);  transition: all 0.5s;
}
.gallery--mobile li {
margin-right: 0 !important;
}
.gallery--mobile img {
border-radius: 8px;
border: 8px solid rgba(255, 255, 255, 0.7);
transform: rotateX(30deg) rotateY(0deg) rotateZ(-27deg);
box-shadow: -40px 40px 40px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
}
.gallery--mobile img:hover {
border: 8px solid rgba(255, 255, 255, 1);
transform: rotateX(30deg) rotateY(0deg) rotateZ(-27deg) translateZ(10px);
box-shadow: -50px 50px 80px rgba(0, 0, 0, 0.3);
transition: all 0.2s;
z-index: 10;
}
.gallery--desktop img {
border-radius: 8px;
border: 4px solid rgba(255, 255, 255, 0.7); box-shadow: -40px 40px 40px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
}
.gallery--desktop img:hover {
border: 4px solid rgba(255, 255, 255, 1); transform: scale(1.05);
z-index: 10;
box-shadow: -50px 50px 80px rgba(0, 0, 0, 0.3);
transition: all 0.2s; } .wp-block-gallery img ,
.royalSlider img {  }
.royalSlider .rsCaption {
padding: 32px;
max-width: 540px;
margin: 0 auto;
}
#new-royalslider-2 {
padding-top: 64px;
padding-bottom: 64px;
margin-bottom: 2.5em;
}
#new-royalslider-2,
#new-royalslider-2 .rsOverflow,
#new-royalslider-2 .rsSlide {
background: #ddd;
}
#new-royalslider-2 .rsSlide img {
border: 16px solid rgba(0, 0, 0, 0.2);
border-radius: 24px;
}
.wp-block-column:hover .wp-block-wpm-background.has-parallax {
background: #0ff;
background: rgba(0,255,255,0.5);
}
@media screen and (min-width: 782px) {
.project--alternate .wp-block-column:first-child {
order: 2;
}
.project--alternate .wp-block-column:nth-child(2) { margin-right: 64px;
}
}
@media (max-width: 781px) {
body.home .entry-content .wp-block-column.description h2,
body.home .entry-content .wp-block-column.description p {
padding-right: 30px;
}
}
@media (min-width: 600px) and (max-width: 781px) {
body.home .entry-content .wp-block-column:nth-child(even) { }
body.home .entry-content .wp-block-column:nth-child(odd) { }
}
@media (max-width: 781px) {
body.home .entry-content .wp-block-column {  }
body.home .entry-content .wp-block-column p {  }
}
@media (min-width: 782px) {
.wp-block-column:not(:first-child) {
margin-left: 72px; 
} 
}
body.home .wp-block-columns p:last-child {
margin-bottom: 0;
}
article.post-password-required {
min-height: 33vh;
display: flex;
align-items: center;
} .wpnm-button {
font-size: 18px;
position: fixed;
right: 32px;
bottom: 32px;
opacity: 0.5;
transition: all 0.2s;
}
.wpnm-button:hover {
transition: 0.2s;
opacity: 1;
}
.wpnm-button-inner-left:empty {
margin-left: -0.625em 
}
.wpnm-button-inner-left:before, .wpnm-button-inner-left:after {
box-sizing: border-box;
margin: 0;
padding: 0; -webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
outline: none 
}
.wpnm-button .wpnm-button-inner, .wpnm-button .wpnm-button-inner-left {
display: inline-block;
font-size: 0.875em;
position: relative;
padding: 0em;
line-height: 1em;
cursor: pointer;
color: rgba(149, 149, 149, 0.51);
font-weight: normal 
}
.wpnm-button .wpnm-button-inner-left:before {
content: '';
display: block;
position: absolute;
z-index: 1;
line-height: 2.125em;
text-indent: 2.5em;
height: 1em;
width: 1em;
margin: 0.25em; -webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
right: 1.625em;
bottom: 0em;
background: #FFB200;
transform: rotate(-45deg);
box-shadow: 0 0 0.8em white ;
border: 1px solid #fff;
}
.wpnm-button .wpnm-button-inner-left:after {
content: "";
display: inline-block;
width: 2.5em;
height: 1.5em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em; background: rgba(255, 255, 255, 0.3);
vertical-align: middle;
margin: 0 0.625em; }
.wpnm-button.active .wpnm-button-inner-left:before {
right: 1.0625em;
box-shadow: 0.3125em 0.3125em 0 0 #eee;
background: transparent;
border: none; 
}
.wpnm-button.active .wpnm-button-inner-left:after { background: rgba(0, 255, 255, 0.3); }
.wpnm-button .wpnm-button-inner-left {
color: rgba(250, 250, 250, 0.51);
font-weight: bold 
}
.wpnm-button.active .wpnm-button-inner-left {
color: rgba(149, 149, 149, 0.51);
font-weight: normal 
}
.wpnm-button.active .wpnm-button-inner-left + .wpnm-button-inner {
color: rgba(250, 250, 250, 0.51);
font-weight: bold 
}
body.light-mode .wpnm-button .wpnm-button-inner-left:after,
body.light-mode .wpnm-button.active .wpnm-button-inner-left:after { background: rgba(0, 255, 255, 0.5);
}
body.light-mode,
body.light-mode .overlay {
background: #eee; }
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5 {
color: #000 !important;
transition: all 0.5s;
}
body.light-mode #page p { color: #555 !important;
transition: all 0.5s;
}
body.light-mode a { }
body.light-mode .comments-area a,
body.light-mode .comments-area a:visited,
body.light-mode .inside-article div:not(.wp-block-wpm-background) a,
body.light-mode .inside-article div:not(.wp-block-wpm-background) a:visited,
body.light-mode .page-header a,
body.light-mode .page-header a:visited,
body.light-mode .insert-page-331 a,
body.light-mode .insert-page-331 a:visited,
body.light-mode .paging-navigation a,
body.light-mode .paging-navigation a:visited {
color: #333;
transition: all 0.5s;
}
body.light-mode .site-logo svg polygon,
body.light-mode .site-logo svg path {
fill: #000;
}
body.light-mode hr {
color: #ccc !important;
background-color: #ccc !important;
} body.light-mode svg.wave-small { }
body.light-mode svg.wave-small path.path01,
body.light-mode svg.wave-big path.path02 {
stroke: #fff;
opacity: 1;
}
body.light-mode svg.wave-small path.path02 {  }
body.light-mode.single .page-hero {
box-shadow: 0 50px 80px rgba(0, 0, 0, 0.2);
}
svg.wave-small, svg.wave-big {
max-width: 100%;
}
@media screen and (min-width: 782px) {
svg#model { }
}
svg#model g[data-name="frame"] path,
svg#model path#arrow {
fill: #fff;
opacity: 0.1;
}
svg#model g#UX g#frame circle {
fill: #0ff;
opacity: 0.05;
}
svg#model g#UX g#frame circle#_02 { }
svg#model g#UX g#frame circle#_03 {  }
svg#model g[data-name="text"] path,
svg#model g#product path,
svg#model g#UX g#text path {
fill: #fff;
opacity: 1;
}
svg#model g#magic path,
svg#model g#cognitive path,
svg#model g#context path,
svg#model g#experience path {
fill: #fff;
opacity: 0;
transition: opacity 1s;
}
svg#model {
transition: all 2s; }
svg#model g[data-name="frame"],
svg#model path#arrow {
transition: all 1s;
}
svg#model g[data-name="text"],
svg#model g#product {
transition: all 2s;
}
svg#model g#UX,
svg#model g#UX g#text,
svg#model g#UX g#frame circle {
transition: all 3s;
}
svg#model:hover {
transform: rotateX(48deg) rotateY(0deg) rotateZ(8deg) skew(0deg, -8deg);
}
svg#model:hover g[data-name="frame"],
svg#model:hover path#arrow {
opacity: 0;
}
svg#model:hover g[data-name="text"],
svg#model:hover g#product {
opacity: 0.03;
}
svg#model:hover g#UX g#text {
transition-delay: 2s;
transform: translateY(-300px) translatex(-30px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
svg#model:hover g#UX g#frame circle#_01 {
transition-delay: 2s;
transform: translateY(-300px) translateX(-30px);
box-shadow: 0 20px 20px 20px rgba(0, 0, 0, 1);
opacity: 0.5;
}
svg#model:hover g#UX g#frame circle#_02 {
transition-delay: 3s;
transform: translateY(-150px) translateX(-15px);
box-shadow: 0 20px 20px rgba(0, 0, 0, 1);
opacity: 0.2; }
svg#model:hover g#magic path,
svg#model:hover g#cognitive path,
svg#model:hover g#context path,
svg#model:hover g#experience path {
transition: opacity 3s 5s;
opacity: 1;
}
body.light-mode svg#model g[data-name="frame"] path,
body.light-mode svg#model path#arrow {
fill: #000;
}
body.light-mode svg#model g#UX g#frame circle#_01 {
fill: #000;
}
body.light-mode svg#model g#UX g#frame circle {
fill: #099;
opacity: 0.06;
}
body.light-mode svg#model g[data-name="text"] path,
body.light-mode svg#model g#product path,
body.light-mode svg#model g#UX g#text path {
fill: #000;
opacity: 1;
}
body.light-mode svg#model g#magic path,
body.light-mode svg#model g#cognitive path,
body.light-mode svg#model g#context path,
body.light-mode svg#model g#experience path {
fill: #000; }
@keyframes pulse {
0% {
opacity: 0.02;
}
50% {
opacity: 0.05;
}
70% {
opacity: 0.07;
}
100% {
opacity: 0.02;
}
}