html, body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
   color: #4a4a4a;
   font-size: 18px;
	 scroll-behavior: smooth;
}

@media (min-width: 1700px) {
.container {
    width: 1500px;
}
}

h1 {
	font-size: 48px;
	font-weight: 900;
}

h2, .h2 {
	font-size: 42px;
	font-weight: 900;
}

h3 {
	font-size: 36px;
	font-weight: 900;
}

h4 {
	font-size: 28px;
	font-weight: 900;
	margin-top: 30px;
}

@media (max-width: 992px) {
h2, .h2 {
	font-size: 32px;
}
}

a {
	text-decoration: none;
	color: #c65050;
	cursor: pointer;
}

a:hover {
	color: red;
}

.mensi {
	font-size: 14px;
}

.small-label {
	font-size: 15px;
	font-weight: normal;
}

.tlacitko {
	display: inline-block;
	padding: 5px 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 3px;
	margin-right: 3px;
	color: #000;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.3s;
	border: 0;
	border-radius: 10px 0 0 0;
	border-left: 3px solid #c65050;
	border-top: 2px solid #c65050;
	font-weight: bold;
	font-size: 16px;
	text-shadow: none;
	background: transparent;
	border-bottom: 0;
	border-right: 0;
}

@media (max-width: 992px) {
.tlacitko {
	width: 100%;
	text-align: center;
}
}

.tlacitko:hover {

	background-color: #e11919;
	color: #fff;
	text-decoration: none;
}

.tlacitko:before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
    120deg,
    transparent,
    rgba(252, 159, 159, 0.4),
    transparent
	);
	transition: all 1s;
}

.tlacitko:hover:before {
	left: 100%;
}

#show-more-refs {
	border-radius: 0;
	border: 0;
	background-color: #e11919;
	color: #fff;
}

.tlacitko-pulsing {
	display: inline-block;
	animation: tlacitko-pulsing-anim 1.5s infinite;
	box-shadow: 1px 1px 10px 3px rgba(255, 25, 25, 0.3);
	background-color: red;
}

@keyframes  tlacitko-pulsing-anim {
    0%   { box-shadow: 1px 1px 10px 3px rgba(255, 25, 25, 0.3); }
    50% { box-shadow: 1px 1px 10px 3px rgba(255, 255, 255, 0.3); }
    100%   { box-shadow: 1px 1px 10px 3px rgba(255, 25, 25, 0.3); }
}

.hero-text {
	text-shadow: 2px 2px #000000;
}

/* header*/

@keyframes anim-menu {
    0%   {border-top: 3px solid #fff;}
    100% {border-top: 3px solid #e11919;}
}

.navbar-nav a:hover {
	border-top: 3px solid #e11919;
	background-color: #fff!important;
	margin-top: -3px;
    animation-name: anim-menu;
    animation-duration: 1s;
}

/* header*/

/* css subheader leva strana*/

.red {
	background: linear-gradient(300deg,#45599a,#28345c,#45599a,#45599a,#28345c,#45599a);
	background-size: 320% 320%;
	animation: gradient-animation 24s ease infinite;
	padding: 0!important;
	min-height: 800px;
	position: relative;
	overflow: hidden;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.red h1 {
	font-size: 74px;
	font-weight: 900;
	color: white;
}

.red h2 {
	font-size: 60px;
	color: #e4e4e4;
	margin-top: 40px;
}

.red h3 {
	margin-bottom: 0;
	margin-top: 40px;
	font-size: 48px; 
}

@media (max-width: 1200px) {
.red h1 {
	font-size: 60px;
	font-weight: 900;
	color: white;
}

.red h2 {
	font-size: 50px;
	color: #e4e4e4;
	margin-top: 40px;
}

.red h3 {
	margin-bottom: 0;
	margin-top: 40px;
	font-size: 42px; 
}
}

@media (max-width: 767px) {
.red{
	min-height: 500px;
}
}

.posun-nadpis {
	margin-left: 50px;
	margin-top: 200px;
}

@media (max-width: 1550px) {
.posun-nadpis  {
	margin-left: 20px;
	margin-top: 100px;
}
}

@media (max-width: 1250px) {
.hero-text{
	font-size: 60px;
}
}


@media (max-width: 767px) {
.hero-text{
	font-size: 30px!important;
}
}

/* css subheader leva strana*/

.red-sm {
	background: linear-gradient(300deg,#45599a,#28345c,#45599a,#45599a,#28345c,#45599a);
	background-size: 320% 320%;
	animation: gradient-animation2 24s ease infinite;
	min-height: 400px;
	position: relative;
	overflow: hidden;
	color: #fff;
	padding-bottom: 50px;
	font-size: 28px;
	text-shadow: 2px 2px 2px #000;
}

.red-sm img {
    position: absolute;
    bottom: 0;
    right: 0;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.red-sm .tlacitko {
    color: #fff;
}

@media (max-width: 767px) {
.red-sm img {
    right: -250px;
}
}


@media (max-width: 767px) {
.red-sm {
	font-size: 20px;
}

.red-sm h1 {
	font-size: 32px;
}
}

.red-sm .headtext {
	font-size: 18px;
}

.red-sm .redtext {
	font-size: 18px;
	padding-top: 40px;
	display: inline-block;
	min-height: 60px;
	vertical-align: center;
}

@media (max-width: 1200px) {
.red-sm .redtext {
	font-size: 16px;
}
}

@media (max-width: 767px) {
.red-sm .redtext {
	font-size: 14px;
	padding-top: 20px;
}
}

.red-sm h3 {
	padding-top: 50px;
	padding-bottom: 0px;
}

@keyframes gradient-animation2 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.sm-tab {
	width: 100%;
	background-color: rgba(255,255,255,0.1);
	height: 200px!important;
	z-index: 54;
	position: relative;
	box-shadow: 0px 0px 15px #fff;
	padding-top: 20px;
	margin-top: 20px;
	font-size: 24px;
	text-shadow: 2px 2px 2px #000;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}

.sm-tab p {
	margin: 0;
}

.sm-tab .numero {
	font-size: 42px;
	font-weight: bold;
}

.sm-tab .numero-sm {
	font-size: 26px;
	font-weight: bold;
}

.sm-tab-ik {
	font-size: 52px;
}

/** animovane taby **/

.taby {
	margin-top: 140px;
	perspective: 200px;
	float: right;
	margin-right: 100px;
}

.hlavni-ikona {
	padding-top: 18px;
	font-size: 60px;
}

.tabs {
	width: 460px;
	background-color: rgba(255,255,255,0.1);
	height: 140px!important;
	z-index: 54;
	position: relative;
	transition: transform 0.4s, z-index 0.4s, background-color 0.4s, box-shadow 1s;
	transform: rotateY(-20deg) rotatex(-20deg);
	box-shadow: 0px 0px 15px #fff;
	border-radius: 30px 0 0 0;
	padding: 18px 12px 0 12px;
	margin: 10px;
	font-size: 24px;
	text-shadow: 2px 2px 2px #000;
}

.ca:hover .tabs {
	transform: rotateY(-1deg) rotatex(1deg);
	background-color: #A31621;
	box-shadow: 0px 0px 20px #fff;
}

.ta {
	font-size: 16px;
}

.tb {
	font-size: 16px;
	visibility: hidden;
	width: 0;
	height: 0;
}

@media (max-width: 1550px) {
.taby  {
	margin-right: 20px;
}
	
.tabs  {
	width: 420px;
	font-size: 22px;
}
}

.tab1 {
	color: #fff;
}

.tab2 {
	top: -15px;
	color: #fff;
}

.tab3 {
	top: -29px;
	color: #fff;
}
.tab4 {
	top: -43px;
	color: #fff;
}

.tab5 {
	top: -60px;
	color: #fff;
}

@keyframes taby {
    0%   {border-top: 3px solid #fff;}
    100% {border-top: 3px solid #e11919;}
}


@media (max-width: 1199px) {
.taby {
	margin-top: 100px;
	perspective: 0px;
	float: none;
	margin-right: 50px;
}
	
.tabs {
	width: 50%;
	float: left;
	position: static;
	margin: 0;
	transform: none;
}
}


@media (max-width: 992px) {
.taby {
	margin-top: 100px;
	perspective: none;
	transform: none;
	float: none;
	margin-right: 10px;
}
	
.tabs {
	width: 100%;
	float: left;
	position: static;
}
}

@media (max-width: 766px) {
.tabs {
	height: auto!important;
}
}

/** animovane taby **/


/* css animace šipek*/

#arrowAnim {
	max-width: 200px;
	height: 40px;
	display: flex;
	padding-top: 20px;
}

.arrow {
	width: 40px;
	height: 40px;
	border: 5px solid;
	border-color: #d2d2d2 transparent transparent #d2d2d2;
	transform: rotate(135deg);
}

.arrowSliding {
	position: absolute;
    animation: aslide 2.2s linear infinite;
}
@keyframes aslide {
    0% { opacity:0; transform: translateX(0px); }	
   20% { opacity:1; transform: translateX(0px); }	
   80% { opacity:1; transform: translateX(10px); }	
  100% { opacity:0; transform: translateX(200px); }	
}

.dej-sipku {
	float: left;
	font-family: 'Roboto', sans-serif;
	font-size: 60px;
	color: #dddcdc;
	margin-top: 0;
}

@media (max-width: 1199px) {
.arrow,#arrowAnim {
	display: none;
}
}

/* css animace šipek*/

/* css home*/

.onas {
	margin-top: 120px;
	margin-bottom: 100px;
}

.onas img {
	width: 100%;
	margin-top: -50px;
}

@media (max-width: 1700px) {
.onas img {
	margin-top: 20px;
}
}

@media (max-width: 992px) {
.onas {
	margin-top: 50px;
}
	
.onas img {
	margin-top: 0;
}
}

/*jak to funguje*/

.jak-obal {
	position: relative;
	top: 100px;
}

.jak {
	box-shadow: 0px 2px 8px rgba(0,0,0,0.5);
	font-style: italic;
	font-weight: bold;
	position: relative;
	border-radius: 20px;
	margin-top: -20px;
	padding: 10px 20px 40px 55px;
	width: 700px;
}


.h-jak {
	font-size: 24px;
	font-weight: bold;
	font-style: normal;
}

.jak-left {
	background-color: #fff;
	margin-left: 125px;
	float: left;
	border-top: 3px solid #677cab;
	border-left: 3px solid #677cab;
}

.jak-left .n-jak {
	font-size: 40px;
	width: 64px;
	display: block;
	position: absolute;
	top: -20px;
	left: -15px;
	border-radius: 50%;
	background-color: #fff;
	text-align: center;
	border: 2px solid #677cab;
	font-weight: bold;
	color: #677cab;

}

.jak-right {
	background-color: #fff;
	margin-left: 25px;
	margin-right: 100px;
	float: right;
	border-top: 3px solid #c65050;
	border-right: 3px solid #c65050;
}

.jak-right .n-jak {
	font-size: 40px;
	width: 64px;
	display: block;
	position: absolute;
	top: -20px;
	left: -15px;
	border-radius: 50%;
	background-color: #fff;
	text-align: center;
	border: 2px solid #c65050;
	font-weight: bold;
	color: #c65050;

}

@media (max-width: 1200px) {
.jak {
	width: 500px;
}
}

@media (max-width: 992px) {
.jak {
	width: 400px;
}
}

@media (max-width: 768px) {
.jak {
	width: 300px;
}
}

@media (max-width: 650px) {
.jak {
	width: 280px;
}
.jak-right {
	margin-right: 20px;
}
.jak-left {
	margin-left: 30px;
}
}

/*jak to funguje*/

/* css home*/


/* footer*/

footer {
    margin-top: 20px;
	padding-top: 20px;
    background-color: #232323;
    color: #dedede;
    font-weight: normal;
    font-size: 14px;
    line-height: 26px;
}

footer a {
	color: #dedede;
}

footer a:hover {
	color: #e11919;
}

footer h4 {
	font-weight: bold;
	font-size: 24px;
	color: #dedede;
	padding-top: 40px;
	padding-bottom: 20px;
	display: inline-block;
}

.reddown {
	border-bottom: 3px solid #e11919;
	padding-bottom: 10px;
}

.pod-footer {
	background-color: #e11919;
	width: 100%;
	margin-top: 40px;
	padding-top: 15px;
	padding-bottom: 10px;
}




/* footer*/







/* ---- dolu jen bordel  -----*/

.firmycz {
	display: inline-block;
	width: 650px;
}

@media (max-width: 767px) {
.firmycz {
	width: 300px;
}
}

.separator {
	width: 100%;
	height: 50px;
}

/* css zmenšení menu po scroll*/

.navbar-nav {
	margin-top: 6px;
}

.navbar-nav a {
	color: #000;
}

.navbar-brand {
	margin-top: -28px;
}

.telo {
	padding-top: 100px;
    overflow-x: hidden;
}

.maly {
	height: 60px!important;
	padding-top: 0!important;
	border-bottom: 2px solid #e11919;
	box-shadow: 2px 5px 10px #888888;
}

.schovej {
	visibility: hidden;
}

.upravlogo {
	margin-top: -12px;
}

.telo, .maly, .velky, .navbar-brand, .upravlogo {
	transition: .7s all;
	-moz-transition: .7s all;
	-webkit-transition: .7s all;
	-o-transition: .7s all;
}

/* konec menu zmenseni*/

/* fix*/

.bezliny {
	text-decoration: none!important;
}

.cervena {
	color: #e11919;
}

.popis {
	font-size: 15px;
	margin-right: 6px;
	color: black;
}


/* konec fix*/

.pravy-div {
	min-height: 800px;
}

@media (max-width: 1199px) {
.pravy-div {
	min-height: 500px;
}
}

@media (max-width: 992px) {
.pravy-div {
	min-height: 700px;
}
}

.navbar {
    border-radius: 0;
	margin-bottom: 0;
	position: fixed;
	background-color: #fff;
	width: 100%;
	height: 120px;
	padding-top: 30px;
	z-index: 99;
	font-size: 18px;
}

@media (min-width: 1900px) {
.navbar-brand {
	margin-right: 50px;
}
}

@media (max-width: 1100px) {
.navbar-nav a {
	padding: 15px 6px 10px 10px!important;
	font-size: 14px;
}
}

@media (max-width: 920px) {
.navbar-right {
	visibility: hidden;
	width: 0!important;
	height:0!important;
}
}

@media (max-width: 767px) {
.nav {
	background-color: #fff;
}

.icon-bar {
   background-color:#e11919 !important;
}

.navbar-toggle {
    padding: 11px 0px;
}
}

.refimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.refimg {
    overflow:
}

.reference {
	margin-bottom: 50px;
	width: 100%;
}

.reference2 {
	margin-bottom: 50px;
	background-color: #ebebeb;
	width: 100%;
}
        .rrr {
            display: none;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        }
        .rrr.visible {
            display: block; 
            opacity: 1;
            transform: translateY(0);
        }

.eshop-ikony .eshop-ikona {
  font-size: 48px;
  margin: 10px 0 4px 0;
}
.eshop-ikony .eshop-ikona-text {
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 8px;
}
@media (max-width: 767px) {
  .eshop-ikony .eshop-ikona {
    font-size: 36px;
		padding-top: 15px;
  }
  .eshop-ikony .eshop-ikona-text {
    font-size: 16px;
    margin-bottom: 8px;
  }
}

.eshop-ikona-blok {
	margin-top: 30px;
}

@media (max-width: 767px) {
	.eshop-ikona-blok {
		margin-top: 0;
	}
}