html {
padding: 0;
margin: 0;
}
#content {
position: relative;
}
body {
font-family: "Saira", sans-serif;
font-weight: 300;
color:#4d4d4f;
background-color: white;
font-size: 18px;
text-align: left;
}
a {
color: #0066b3;
font-weight: 400;
}
a:hover {
color: #7ac143;
text-decoration: none;
}
img {
width: 100%;
height: auto;
}
.zelenab {
color: #7ac143;
font-weight: 500;
text-transform: uppercase;
}
.zelenam {
color: #7ac143;
font-weight: 500;
}
h1 {
text-transform: uppercase;
font-size: 40px;
position: relative;
color: #0066b3;
font-weight: 300;
}
h2 {
text-transform: uppercase;
font-size: 40px;
position: relative;
color: #0066b3;
}
h2, h3 {
margin-bottom: 4rem;
font-weight: 200;
}
p {
margin-top: 20px;
margin-bottom: 20px;
}
.page p {
margin-bottom: 0.5rem;
}
ul {
list-style-type: square;
}
.article-detail p {
margin-bottom: .9rem;
}
.d-flex {
display: -ms-flexbox !important;
display: flex !important;
}
.align-items-center {
-ms-flex-align: center !important;
align-items: center !important;
}
.tlacitko {
margin: 4rem 0;
}
.tlacitko a {
background-color: #0066b3;
padding: 20px 30px;
color: white;
}
.tlacitko a:hover {
-webkit-transition: 0.2s all;
-webkit-transform: scale(1.1);
-ms-transition: 0.2s all;
-ms-transform: scale(1.1);
-moz-transition: 0.2s all;
-moz-transform: scale(1.1);
transition: 0.2s all;
transform: scale(1.1);
background-color: #7ac143;
color: white;
}
#myBtn {
display: none;
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 99;
font-size: 30px;
border: none;
outline: none;
background-color: #0066b3;
color: white;
cursor: pointer;
border-radius: 50%;
transition: opacity 0.5s;
opacity: 100%;
-webkit-box-shadow: 0px 0px 15px 2px rgba(166,159,166,1);
-moz-box-shadow: 0px 0px 15px 2px rgba(166,159,166,1);
box-shadow: 0px 0px 15px 2px rgba(166,159,166,1);
width: 50px;
height: 50px;
-webkit-transition: all .3s;
transition: all .3s;
}
#Btnback {
font-size: 30px;
border: none;
outline: none;
background-color: #222222;
color: white;
cursor: pointer;
border-radius: 50%;
transition: opacity 0.5s;
opacity: 100%;
-webkit-box-shadow: 0px 0px 15px 2px rgba(166,159,166,1);
-moz-box-shadow: 0px 0px 15px 2px rgba(166,159,166,1);
box-shadow: 0px 0px 15px 2px rgba(166,159,166,1);
width: 50px;
height: 50px;
-webkit-transition: all .3s;
transition: all .3s;
margin: 2rem 0;
}
.scale-up-center {
-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
#myBtn:hover, #Btnback:hover {
background-color: white;
color: #222222;
}
.back-to-top:hover {
opacity: 60%;
}
.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color:#0066b3;
border: 1px solid transparent;
border-radius: .25rem;
}
.button:focus {
outline: none;
}
.btn-primary.focus, .btn-primary:focus {
box-shadow: none;
}
.dropdown-toggle::after {
font-family: FontAwesome !important;
content: '\f107';
border: none;
vertical-align: unset;
}
#main-header {
background-color: white;
height: 105px;
}
#main-header.nav-up {
top: -5em;
}
#main-navbar {
padding: 0;
}
#main-navbar .nav-link, #main-navbar .dropdown-item {
font-size: 1rem;
padding: 0.5em 2em;
color: #0066b3;
font-size: 19px;
line-height: 3;
font-weight: 400;
}
#main-navbar .dropdown:hover > .dropdown-menu {
display: block;
}
#main-navbar .nav-item {
background-color: white;
border-bottom: 1px solid #0066b3;
}
#main-navbar .nav-item.active a {
color:#0066b3;
background-color: white;
}
#main-navbar .nav-link:focus, #main-navbar .nav-link:hover {
text-decoration: none;
color: #0066b3;
background-color: white;
}
/* #main-navbar .dropdown-item.active, #main-navbar .dropdown-item:hover {*/
/* color: #999999;*/
/* background-color: white;*/
/*}*/
#main-navbar .navbar-brand img {
width: 270px;
height: auto;
}
#main-header .navbar-toggler-icon {
background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
#main-navbar .dropdown-menu {
background: white;
border-radius: 0;
}
.nav-item a {
color: #0066b3;
position: relative;
text-decoration: none;
}
#main-navbar .collapse.show .nav-item,
#main-navbar .collapsing .nav-item {
/*background: rgba(0, 42, 77, 0.9);*/
}
#main-navbar .collapse.show .nav-item:last-child,
#main-navbar .collapsing .nav-item:last-child {
}
#main-navbar .navbar-collapse {
background-color: white;
padding: 0;
z-index: 2;
}
.cursor {
cursor: pointer;
}
.btn {
border-radius: 0;
}
.btn-primary {
font-size: 1rem;
font-weight: 600;
background-color: white;
padding: 0.3rem 2rem;
text-transform: uppercase;
cursor: pointer;
}
.btn-primary:hover,.btn-primary:active {
color: #0066b3;
border: 1px solid #0066b3;
background-color: white;
cursor: pointer;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:focus-visible {
border: 1px solid #999999;
color: #999999;
background-color: white;
cursor: pointer;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
[type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner, button::-moz-focus-inner {
padding: 0;
border-style: none;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle, .btn-primary:not(:disabled):not(.disabled):active {
border: 1px solid #999999;
color: #999999;
background-color: white;
cursor: pointer;
}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
box-shadow: none;
}
.uvod, #procmy, #onas, #novinky {
padding: 4rem 0;
}
#programy {
padding-top: 4rem;
}
.slogan {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: left;
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin: 0 auto;
}
.vlevo h1 {
font-size: 46px;
}
.vpravo h1 {
font-size: 35px;
color: white;
text-transform: none;
}
.pozadi {
height: 30rem;
width: 100%;
object-fit: cover;
}
.pozadi {
position: relative;
}
.ikona {
cursor: pointer;
}
.ikona-list {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 4rem;
}
.ikona p {
font-size: 15px;
font-weight: 500;
}
.ikona a {
color: #4d4d4f;
}
.ikona a:hover p, .ikona a:active p, .ikona a:focus p {
font-weight: 700;
color: #4d4d4f;
}
.ikona img {
height: 75px;
width: auto;
}
.upoutavka {
font-size: 22px;
font-weight: 400;
margin: 1rem 0;
margin-left: -13px;
line-height: 2;
width: 68%;
border-radius: 2rem;
border: 3px solid #C69C6D;
color: #C69C6D;
}
.upoutavka p {
padding-left: 10px;
}
.mysl-clanek {
margin: 4rem 0;
}
.proimg {
position: relative;
background-repeat: no-repeat;
background-size: 100%;
height: 740px;
}
.pro {
position: absolute;
font-size: 40px;
color: #0066b3;
bottom: 3rem;
left: 3rem;
}
#procmy .obsah {
color: white;
background-color: #7ac143;
}
.programy-seznam {
margin-top: 10rem;
}
.novinka {
margin-bottom: 1.5rem;
}
.novinka .zelenab {
margin-bottom: 2rem;
}
.contact-form .btn-primary {
border: none;
color: white;
margin-top: 1rem;
background: #0066b3;
padding: 10px 30px;
}
.contact-form .btn-primary:hover, .contact-form .btn-primary:active {
color: #0066b3;
background: white;
}
.contact-form {
padding: 5px 0;
border: none;
}
.contact-form-wrapper {
text-align: left;
color:white;
background-color: transparent;
}
.form-control::placeholder {
color: white !important;
opacity: 1; /* Firefox */
}
.form-control::-ms-input-placeholder { /* Edge 12 -18 */
color: white !important;
}
.contact-form .action {
text-align: left;
}
.contact-form .row {
margin-top: 3rem;
margin-bottom: 3rem;
}
.form-group {
border: 1px solid white;
margin: 5px 0;
}
.form-group:focus {
border-bottom: 1px solid #999999;
}
.form-control {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 16px;
line-height: 1.5;
color: #0066b3;
background-color: inherit;
background-clip: padding-box;
border: none;
border: unset;
border-radius: 0;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control:focus {
border-bottom: 1px solid;
box-shadow: none;
border-color: #4d4d4f;
}
.form-control::placeholder {
color:#4d4d4f;
opacity: 1;
}
.radek {
display: flex;
flex-direction: row;
gap: 5px;
}
.radek .form-group {
flex-grow: 1;
}
.zprava::placeholder {
padding-top: 60px;
}
.recaptcha-container {
text-align: center;
}
.g-recaptcha {
display: inline-block;
}
.eu-cookies {
position: fixed;
left:0;
bottom: 0;
width: 100%;
z-index: 1000;
text-align: center;
color: white;
background-color:#0066b3;
padding: 20px 0;
}
.eu-cookies .btn {
border: none;
background-color: white;
color: #4d4d4f;
padding: 10px 30px;
border-radius: 2rem;
}
.eu-cookies .btn:hover {
background-color:#0066b3;
color: white;
}
.eu-cookies a {
color: #7ac143;
}
.eu-cookies a:hover {
color: white;
}
#footer {
color: #4d4d4f;
padding-top: 4rem;
line-height: 1.5;
text-align: left;
font-size: 16px;
font-weight: 400;
}
#footer a {
color: #0066b3;
font-weight: normal;
}
#footer a:hover {
color: #7ac143;
}
#footer p {
margin: 0;
}
.kontakt img {
height: auto;
width: 58%;
}
#contact {
padding: 2rem 0;
height: auto;
background-size: 130%;
background-color: #7ac143;
background-repeat: no-repeat;
text-align: center;
}
.tel:before {
font: normal normal normal 14px/1 FontAwesome;
content: "\f095 ";
color: #0066b3;
font-size: 20px;
padding-right: 5px;
}
.tel {
padding-bottom: 20px;
}
.gdpr {
}
.devel {
text-align: right;
font-size: 0.7rem;
letter-spacing: unset;
}
.social {
margin-top: 2rem;
}
#footer .social a {
margin-right: 5px;
font-size: 25px;
display: inline-flex;
justify-content: center;
align-items: center;
}
#footer .social a:hover {
color: #7ac143;
}
.lide {
color: white;
}
.funkce {
font-size: 14px;
}
.nadpis-kontakt {
color: white;
font-size: 18px;
font-weight: 300;
text-transform: uppercase;
margin-bottom: 5px;
}
.article {
margin-bottom: 5rem;
}
@media only screen and (min-width: 768px) and (max-width: 991px){
.procmy {
padding: 2rem;
}
}
@media only screen and (min-width: 500px) {
.social {
width: 100%;
}
#main-navbar .navbar-brand img {
width: 280px;
height: auto;
}
.form-group {
margin-bottom: 0;
}
.form-control {
padding: 10px;
}
.contact-address {
flex-direction: row;
}
}
@media only screen and (min-width: 768px) {
.podklad {
text-align: center;
}
.mimg {
width: 60%;
}
}
@media only screen and (min-width: 880px) {
.slogan {
}
.vlevo {
float: left;
}
.vpravo {
float: right;
width: 60%;
}
}
@media only screen and (min-width: 992px) {
.menu-wraper {
/*margin: -3em 0 0 -2em; */
background: none;
}
.galery {
width: 800px;
}
.ikona-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.ikona {
margin-right: 2rem;
}
.ikona h3 {
margin-top: 8px;
}
.lide {
text-align: left;
}
.link {
margin-left: 18%;
}
.prehled {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.prehled .novinka {
border-right: 1px solid #0066b3;
flex: 1;
margin-bottom: 0;
padding: 0 30px;
}
.prehled .novinka:first-child {
padding-left: 0;
}
.prehled .novinka:last-child {
border-right: none;
padding-right: 0;
}
#contact {
padding: 3rem 0;
height: 35rem;
background-size: cover;
background-position: center;
}
.tlacitko {
margin: 4rem 0 0 0;
}
#contact {
padding: 2rem 0;
height: auto;
background-size: cover;
background-position: 55%;
text-align: left;
}
}
@media only screen and (min-width: 1200px) {
.container {
max-width: 80%;
}
.ikony .container {
max-width: 100%;
}
.podklad {
text-align: center;
}
h3 {
font-size: 22px;
}
.novinka h3 {
font-size: 20px;
}
#main-navbar .navbar-brand img {
height: 60px;
width: auto;
}
#main-header {
margin: 0 auto;
height: 105px;
position: fixed;
z-index: 100;
width: 100%;
padding: 20px 0;
background-color: white;
}
#main-navbar .navbar-collapse {
margin: 1rem;
z-index: 2;
padding: 10px 0;
}
.navbar-expand-lg .navbar-nav {
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
}
.navbar-expand-xl .navbar-collapse {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
justify-content: flex-end;
}
.navbar-nav {
text-align: left;
}
#main-navbar .nav-item {
background-color: transparent;
border: none;
}
#main-navbar .navbar-collapse {
background-color: transparent;
}
#main-navbar .nav-item.active a {
color: white;
background-color: transparent;
}
.ml-auto, .mx-auto {
margin-left: 0 !important;
}
.nav-item {
padding-right: 30px;
}
#main-navbar .nav-link, #main-navbar .dropdown-item {
color: #0066b3;
}
#main-navbar .nav-item.active a {
color:#0066b3;
}
#main-navbar .nav-link:focus, #main-navbar .nav-link:hover {
text-decoration: none;
color: #0066b3;
}
#main-navbar .nav-link {
font-size: 19px;
line-height: 1;
padding: 0;
}
#main-navbar .nav-link:focus, .nav-link:hover {
color: #0066b3;
}
#main-navbar .dropdown-item {
font-size: 1.1rem;
line-height: 1.4;
padding: 0;
}
#main-navbar .nav-item .nav-link:hover::before {
transform-origin: left;
transform: scaleX(1);
}
#main-navbar .nav-link:focus, #main-navbar .nav-link:hover {
text-decoration: none;
color: #0066b3;
background-color: transparent;
}
#main-navbar .nav-item.active .nav-link::before, #main-navbar .nav-item .nav-link::before {
content: '';
position: absolute;
width: 100%;
height: 4px;
border-radius: 4px;
background: #7ac143;
bottom: -1rem;
transform-origin: unset;
transform: unset;
}
#main-navbar .nav-item .nav-link::before {
transform: scaleX(0);
transition: transform .0s;
}
#main-navbar .navbar-brand img {
height: 60px;
}
.uvod, #procmy, #onas, #novinky {
padding: 0;
}
.uvod {
margin-top: 2rem;
}
#programy {
margin-top: 5rem;
}
#novinky {
margin-top: 5rem;
}
.pozadi {
object-position: center bottom;
height: auto;
width: 100%;
}
.podklad {
position: relative;
}
.hp .podklad .pozadi {
padding-top: 6rem;
}
.podklad .pozadi {
padding-top: 0;
height: auto;
margin-left: auto;
margin-right: auto;
}
.podklad .text {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.obsah {
text-align: left;
}
#potreby .obsah {
width: 50%;
margin-top: 2rem;
}
#procmy .obsah {
background-color: unset;
}
#procmy .obsah, #onas .obsah {
width: 60%;
margin-top: 2rem;
}
#procmy h2, #onas h2 {
margin-bottom: 2rem;
}
.slogan {
width: 80%;
}
.ikona {
margin-right: 3rem;
}
.ikona:last-of-type {
margin-right: 0;
}
}
@media only screen and (min-width: 1500px) {
#procmy {
position: relative;
}
#novinky, .programy-seznam {
position: relative;
}
.ikona {
margin-right: 5rem;
}
#potreby .obsah {
margin-top: 0;
}
}
@media only screen and (min-width: 1920px) {
.pozadi {
width: 1920px;
}
.container {
max-width: 1218px;
}
}
div.flash {
color: #000;
background: #FFF9D7;
border: .1rem solid #E2C822;
padding: 1.5em 1em;
margin: 0;
position: fixed;
top: 0;
width: 100%;
font-size: 1.25rem;
font-weight: 500;
z-index: 9999;
opacity: 0.9; }
div.flash.success {
background: #E6EFC2;
color: #264409;
border-color: #C6D880; }
div.flash.info {
background: #FFF6BF;
color: #514721;
border-color: #FFD324; }
div.flash.error {
background: #FBE3E4;
color: #8a1f11;
border-color: #FBC2C4; }
div.flash .close-flash {
border: none;
background: none;
position: relative;
float: right;
padding-left: 20px; }