:root {
   --h1-font: 'Gilroy', sans-serif;
   --h1-size: 6rem;
   --h1-weight: 900;
   --h2-font: 'Poppins', sans-serif;
   --h2-size: 3rem;
   --h2-weight: 600;
   --p-font: 'Poppins', sans-serif;
   --p-size: 1rem;
   --p-weight: 400;
   --header-bg-color: #040402;
   --nav-brand-height: 35px;
   --nav-item-color: #f5f5f5;
   --top-nav-item-color: #f5f5f5;
   --hero-bg-color: #040402;
   --footer-brand-height: 80px;
   --primary-color: #dd1e4b;
   --secondary-color: #E0040B;
   --white-color: #f9f9f9;
   --black-color: #040402;
   --dark-grey-color: #191919;
   --primary-t-color: #2f323a;
   --secondary-t-color: #f5f5f5;
   --primary-p-color: #6f6f6f;
   --secondary-p-color: #8e8e8e;
   --primary-b-color: #f5f5f5;
   --primary-l-color: rgba(0, 0, 0, .25);
   --secondary-l-color: rgba(255, 255, 255, 0.25);
   --valid-color: #007a4d;
   --invalid-color: #e34f4f;

   --primary-bg-color: #f5f5f5;
   --primary-bg-color-2: #eeeeee;
   --primary-bg-color-3: #e5e5e5;
   --secondary-bg-color: #040402;
   --secondary-bg-color-2: #111111;
   --secondary-bg-color-3: #191919;
   --card-bg-color: #f5f5f5;
   --footer-bg-color: #040402;

   --section-1-bg-color: #040402;
   --section-2-bg-color: #040402;
   --section-3-bg-color: #040402;
   --section-4-bg-color: #040402;
   --section-5-bg-color: #040402;
   --section-6-bg-color: #040402;
   --section-7-bg-color: #040402;
}
/* #endregion Root */
/*----------------------------------------------2. Button----------------------------------------------*/
/* #region Button */
.primary-button,.primary-button:visited, .primary-button:active {
   position: relative;
   z-index: 2;
   padding: 10px 25px;
   background-color: var(--primary-color);
   border-radius: 2px;
   color: var(--primary-b-color);
   font-weight: 400;
}
.primary-button:hover, .primary-button:focus {
   background-color: var(--primary-color);
   background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
   background-image: linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
   color: var(--primary-b-color);
}
.dark-button,.dark-button:visited, .dark-button:active {
   position: relative;
   z-index: 2;
   padding: 10px 25px;
   background-color: var(--hero-bg-color);
   border-radius: 0;
   color: var(--white-color);
   font-weight: 400;
}
.dark-button:before {
   content: '';
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
   border-radius: 0;
   background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
   background-image: linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
}
.dark-button:after {
   content: '';
   position: absolute;
   z-index: -1;
   top: 2px;
   left: 2px;
   bottom: 0;
   right: 0;
   width: calc(100% - 4px);
   height: calc(100% - 4px);
   border-radius: 0;
   background-color: inherit;
}
.dark-button.inherit:after {
   background-color: inherit;
}
.dark-button:hover, .dark-button:focus,.dark-button:hover:after, .dark-button:focus:after {
   background-color: var(--primary-color)!important;
   background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%)!important;
   ;
   background-image: linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%)!important;
   ;
   color: var(--white-color)!important;
   ;
}
footer .dark-button {
   background-color: var(--footer-bg-color);
}
/* #endregion Button */
/*----------------------------------------------3. Effect----------------------------------------------*/
/* #region Effect */
.effect-static-text {
   background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
   background-image: linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
   -webkit-background-clip: text;
   -moz-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}
.effect-static-text i {
   -webkit-text-fill-color: var(--primary-color);
}
.effect-motion-text,.effect-motion-hover:hover {
   background-image: linear-gradient(to right, var(--primary-color) 20%, var(--primary-t-color) 40%, var(--primary-t-color) 60%, var(--primary-color) 80%);
   background-size: 200% auto;
   -webkit-background-clip: text;
   -moz-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   -webkit-animation: effect 1s linear infinite;
   animation: effect 1s linear infinite;
}
.effect-motion-text i,.effect-motion-hover:hover i {
   -webkit-text-fill-color: var(--primary-color);
}
.effect-static-bg {
   background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
   background-image: linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
}
.effect-motion-bg {
   background-image: -webkit-linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
   background-image: linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%);
   background-size: 200% auto;
   -webkit-animation: effect 1s linear infinite;
   animation: effect 1s linear infinite;
}
/* #endregion Effect */
.e-mail-anti-spam {
   display: inline-block
}
.e-mail-anti-spam:after {
   content: '@topimepodlahou.cz';
}
@media (max-width: 768px) {
	.hide-desktop {
		 display: inline-block !important
	}
	.hide-mobile {
		display: none !important
	}
}

@media (min-width: 767px) {
	.hide-desktop {
		display: none !important
	}
	.hide-mobile {
		display: inline-block !important
	}
}