html {
box-sizing:border-box;
}
*,*:before,*:after {
box-sizing :inherit;
}
* {
margin:0;
padding:0;
border:none;
}
ul {
list-style:none;
}
body {
background: #fff;
color: #000;
font-weight: 400;
font-family: 'Sora',Arial,sans-serif;
font-size:100%;
width:100%;
text-align: left;
overflow-x:hidden;
}
header {
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
header .logo {
flex-basis: 80%;
}
header .logo img {
max-width: 80%;
}
.mainmenucontainer {
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
max-width: 1440px;
margin: auto;
}
.menucloser {
display: block;
width: 50px;
height: 50px;
z-index: 80;
cursor: pointer;
background: #B00060;
position: relative;
}
.menucloser span {
display: block;
vertical-align: middle;
width: 20px;
height: 3px;
position: absolute;
background: #fff;
}
.menucloser span:first-child { top: 17px; left: 15px; }
.menucloser span:nth-child(2) { top: 24px; left: 15px; }
.menucloser span:last-child { top: 31px; left: 15px; }
header .menutitle {
padding: 20px;
text-align: center;
text-transform: uppercase;
font-size: 15px;
font-weight: 500;
}
.menucross {
display: block;
position: absolute;
top: 0;
right: 25px;
width: 50px;
height: 50px;
z-index: 120;
cursor: pointer;
background: #54368A;
}
.menucross span {
display: block;
vertical-align: middle;
width: 30px;
height: 3px;
position: absolute;
background: #fff;
}
.menucross span:first-child {
top: 22px;
left: 11px;
transform: rotate(45deg);
}
.menucross span:last-child {
top: 22px;
left: 11px;
transform: rotate(-45deg);
}
header nav {
position: absolute;
top: 0;
right: 5%;
z-index: 100;
width: 90%;
background: #fff url('../images/logo-simple-40procent.png') bottom +35px center no-repeat;
background-size: 190px;
padding: 35px 50px 110px 50px;
opacity: 0;
visibility: hidden; /* mÃsto display: none */
transform: scale(0.95) translateY(-20px);
transform-origin: top right;
transition: transform 0.2s ease-out, opacity 0.1s ease-out, visibility 0.05s;
}
header nav.open {
opacity: 1;
visibility: visible;
transform: scale(1) translateY(0);
}
header nav ul {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 5px;
}
header nav ul a {
display: block;
text-align: center;
text-decoration: none;
background-color: #f2f2f2;
color: #000;
display: block;
font-size: 14px;
font-weight: 700;
padding: 15px;
transition: 350ms all ease;
}
header nav ul a:hover {
background-color: #d9d9d9;
}
header nav ul a.dar {
font-size: 18px;
font-weight: 500;
color: #fff;
background-color: #93c23a;
}
header nav ul a.dar:hover {
background-color: #009DE0;
}
img {
max-width: 100%;
}
.container, .container-fluid {
width: 80%;
max-width: 1400px;
margin: auto;
}
.main {
padding: 20px 0;
color: #636363;
font-family: 'Sora',Helvetica,Arial,Lucida,sans-serif;
font-weight: 300;
font-size: 15px;
}
footer {
padding: 70px 0 10px 0;
color: #f4f4f4;
background-image: linear-gradient(rgba(0, 157, 224, 0.7) 0%, rgba(0, 157, 224, 0.7) 100%), url('../images/flower-2562079_1920.jpg');
background-size: cover;
background-position: center bottom;
position: relative;
}
.footer-content {
width: 80%;
max-width: 1400px;
margin: auto;
}
.footer-column {
padding-bottom: 40px;
}
.footer-column h6 {
color: #b2e8ff;
font-size: 15px;
font-weight: 500;
padding-bottom: 10px;
line-height: 1em;
}
.footer-logo {
max-width: 250px;
}
.footer-adress {
font-size: 20px;
font-weight: 300;
padding-top: 20px;
}
.footer a {
color: #fff;
text-decoration: none;
font-weight: 300;
font-size: 16px;
line-height: 26px;
}
.wpb-social-links a {
display: block;
padding: 3px 5px 3px 35px;
margin-bottom: 5px;
}
.wpb-social-links a:hover {
opacity: 0.8;
color: #fff;
}
.wpb-social-links a.facebook-link {
background: url('../images/facebook.svg') left no-repeat;
background-size: 25px;
}
.wpb-social-links a.instagram-link {
background: url('../images/instagram.svg') left no-repeat;
background-size: 25px;
}
.wpb-social-links a.youtube-link {
background: url('../images/youtube.svg') left no-repeat;
background-size: 25px;
}
.wpb-social-links a.linkedin-link {
background: url('../images/linkedin.svg') left no-repeat;
background-size: 25px;
}
.wpb-social-links a.twitter-link {
background: url('../images/twitter.svg') left no-repeat;
background-size: 25px;
}
.footer-contact {
width: 80%;
max-width: 1400px;
margin: auto;
}
.footer-contact a {
font-weight: 800;
font-size: 20px;
line-height: 30px;
transition: 350ms all ease;
}
.footer-contact a:hover {
color: #54368A;
}
.footer-bottom {
padding: 20px 0;
margin: 50px auto 0 auto;
color: rgb(244, 244, 244);
border-top: 1px solid rgba(255,255,255,0.3);
width: 80%;
max-width: 1400px;
text-align: center;
}
@media screen and (min-width:60em) {
.menucloser {
display: none;
}
.menucross {
display: none;
}
header .menutitle {
display: none;
}
.nav-sec {
display: none;
}
header .logo {
flex-basis: 30%;
}
header nav {
opacity: unset;
visibility: unset;
position: unset;
width: unset;
top: unset;
right: unset;
z-index: unset;
transform: unset;
transform-origin: unset;
background: transparent;
padding: 0;
}
header nav ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
header nav ul a {
display: block;
/*padding: 31px 20px;*/
padding: 20px;
font-weight: 700;
font-size: 20px;
color: #009DE0;
background: transparent;
text-decoration: none;
transition: 350ms all ease;
}
header nav ul a:hover {
color: #005282;
background: transparent;
}
.footer-content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 25px;
}
.footer-column {
flex-basis: calc(50% - 25px);
}
.footer-bottom {
text-align: unset;
display: flex;
justify-content: space-between;
}
}
@media screen and (min-width:80em) {
footer:after {
content: url('../images/darecky.png');
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
width: auto;
height: auto;
}
.footer-column {
flex-basis: calc(25% - 25px);
}
.footer-contact a {
font-size: 30px;
line-height: 40px;
}
}