html {
font-size: 62.5%;
}
body {
font-size: 2.0rem;
line-height: 2.2rem;
font-family: "cabrito-sans",sans-serif;
background-color:#f9f9f9;
}
img, video {
max-width: 100%;
}
p{
font-size: 2.0rem;
line-height: 2.2rem;
}
ul{
}
li{
list-style-type: square;
}
h1{
font-size: 4.0rem;
line-height: 1.4rem;
}
h2{
font-size: 2.0rem;
line-height:2.2rem;
font-weight:bold;
}
h3{
font-size: 2.0rem;
line-height: 2.2rem;
}
a {text-decoration:none;color:black;
}
a:link {text-decoration:none;
color:#434c32;}
a:hover {text-decoration:none;
color:red;}
a:visited {text-decoration:none;
color: #434c32;}
header+a{
position: absolute;
top: 25px;
left: 25px;
max-width: 130px;
padding: 15px;
background: rgba(255,255,255,2);
z-index:1;
}
div:not(.home_page) header+a{
top: 5px;
left: 15px;
max-width: 100px;
padding: 5px;
}
.hamburger {
position: absolute;
top: 25px;
right: 25px;
}
nav {
position: absolute;
top: 0;
width: 100%;
padding: 30px 200px;
background-color: rgba(255,255,255,0.9);
}
nav > ul{
display: flex;
gap: 25px;
justify-content: center;
}
nav li{
list-style-type:none;
}
nav ul li a{
color: #333333;
font-size: 20px;
}
nav ul li ul{
position: absolute;
padding: 6px 0;
display:none;
}
nav ul li:hover ul{
display:block;
}
nav ul li ul li {
background-color: white;
padding: 2px;
margin-bottom: 1px;
}
main {padding: 0 0px;}
#home{position: relative;margin: 0 25px;}
#home > .flex {
display: flex;
justify-content: center;
max-width: 1250px;
margin: -120px auto 50px;
background: white;
box-shadow: 2px 5px 10px #999;
flex-wrap: wrap;
}
#home > .flex + div > h6,
div.slogan > h6{font-family:'shadows-into-light';}
.flex-25 {
flex-basis: 25%;
padding: 15px 25px 25px;
text-align:center;
}
.flex-25[data-href] {
cursor: pointer;
position: relative;
}
.mulistall .flex-25[data-href]:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
padding: 0;
background-image: url('/assets/templates/files/arru.svg');
background-color: white;
background-size: contain;
color: black;
width: 25px;
height: 25px;
}
.mulistall .flex-25[data-href]:hover:before {
background-image: url('/assets/templates/files/arrd.svg');
}
.flex-25:nth-child(even) {
background: white;
}
#home > .flex > .flex-25 > img {
max-width: 80px;
}
#home > .flex > .flex-25 > h3 {
font-weight: bold;
font-size: 16px;
margin-bottom: 5px;
line-height:20px;
text-align:center;
}
#home > .flex > .flex-25 > p {
font-weight: 300;
font-size: 16px;
line-height:20px;
text-align:center;
}
#home > .flex.events{
margin-top: 50px;
box-shadow: none;
gap: 0;
justify-content: space-between;
}
#home > .flex.events > .flex-25 {
padding: 10px;
flex-basis: 24%;
background-color: #c3d5a2;
}
#home > .flex.events > .flex-25:nth-child(even) {
background-color: #c3d5a2;
}
#home > .flex.events > .flex-25 > img {
max-width: 100%;
height: 250px;
width: 100%;
object-fit: cover;
margin-bottom: 10px;
}
#home > .flex.events > .flex-25 > h3 {
font-size: 16px;
line-height:20px;
font-weight: 300;
color:white;
}
#home > .flex.events > .flex-25 > h4 {
margin-top: 5px;
margin-bottom: 10px;
font-size: 20px;
line-height:25px;
font-weight:bold;
text-align:center;
}
footer {
padding-top: 20px;
padding-bottom:20px;
background: #9f9f9f;
font-weight: 300;
font-size: 20px;
line-height: 25px;
text-align: left;
color:white;
}
footer .flex{
max-width: 90%;
margin:auto;
padding-top:10px;
padding-bottom:10px;
display:flex;
flex-direction: row;
justify-content: space-evenly;
}
.mulistall_page .content{
max-width: 90%;
margin:auto;
margin-top:20px;
}
#mulistall h1{
font-size: 28px;
margin-bottom: 50px;
line-height: 34px;
font-weight:700;
color:#80A147;
}
#mulistall > .flex {
display: flex;
justify-content: center;
flex-wrap: nowrap;
margin-bottom: 50px;
flex-direction:row;
}
.flex.mulistall > div {
}
.flex-20 {
flex-basis: 25%;
}
#mulistall > .flex > .flex-20 h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
}
#mulistall > .flex > .flex-20 p {
font-size: 20px;
line-height: 28px;
}
.flex.mulistall > div:last-child {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
padding: 0 25px;
overflow: hidden;
}
.flex.mulistall > div:last-child > .flex-25 {
flex-basis: 31%;
box-shadow: 4px 1px 5px #eee;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
padding: 0 0 25px 0;
background: #888;
color: white;
position: relative;
text-align:left;
}
.flex .spacer {
height: 100%;
flex-basis: 100%;
}
.flex.mulistall > div:last-child > .flex-25 span,
.flex.mulistall > div:last-child > .flex-25 h3,
.flex.mulistall > div:last-child > .flex-25 h4,
.flex.mulistall > div:last-child > .flex-25 p,
.flex.mulistall > div:last-child > .flex-25 a {
padding: 0 15px;
}
.flex.mulistall > div:last-child > .flex-25 span[class*='ribon_'] {
position: absolute;
left: auto;
right: 0;
}
.flex.mulistall > div:last-child > .flex-25 span.ribon_30,
.flex.mulistall > div:last-child > .flex-25 span.ribon_31,
.flex.mulistall > div:last-child > .flex-25 span.ribon_32,
.flex.mulistall > div:last-child > .flex-25 span.ribon_33,
.flex.mulistall > div:last-child > .flex-25 span.ribon_34 {
line-height: 20px;
background: black;
}
.flex.mulistall > div:last-child > .flex-25 h3{
font-size: 18px;
font-weight: 900;
line-height:20px;
margin-top: 10px;
}
.flex.mulistall > div:last-child > .flex-25 h4{
font-size: 18px;
line-height:20px;
}
.flex.mulistall > div:last-child > .flex-25 p,
.flex.mulistall > div:last-child > .flex-25 a {
font-size: 18px;
line-height:20px;
}
.flex.mulistall > div:last-child > .flex-25 a {
color: #fff;
}
form > div > div > label {
margin: 10px 0;
display:block;
}
form button,
form input[type="submit"] {
background-color: transparent;
cursor: pointer;
height: 39px;
border: 1px solid #999;
line-height: normal;
margin: 0;
padding: 0 18px;
color: #000;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 10px;
margin-top: 10px;
font-size: 18px;
border-radius: 4px;
}
form input[type="file"] {
background-color: transparent;
cursor: pointer;
height: 39px;
line-height: normal;
margin: 0;
padding: 0;
color: #000;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0;
border-radius: 4px;
}
form input[type="text"] {
background-color: #eee;
color: #000;
height: 39px;
padding: 0 1%;
border: none;
font-size: 18px;
margin-bottom: 10px;
letter-spacing: 0.05em;
width: 100%;
border-radius: 4px;
}
form textarea {
background-color: #eee;
padding: 1%;
color: #000;
font-size: 18px;
height: 98px;
border: none;
margin-bottom: 10px;
letter-spacing: 0.05em;
width: 100%;
border-radius: 4px;
}
form select {
background-color: #eee;
color: #000;
height: 39px;
padding: 0 1%;
border: none;
font-size: 18px;
font-family: 'Roboto', sans-serif;
width: 544px;
margin-bottom: 10px;
letter-spacing: 0.05em;
width: 100%;
border-radius: 4px;
}
form option {
background-color: #eee;
}
form input[type="checkbox"],
form input[type="radio"] {
background-color: #eee;
margin: 0 0 10px 0;
padding: 0;
color: #000;
display: inline;
}
form .form_error,
form .form_success {
float: left;
color: #000000;
padding-top: 3px;
padding-bottom: 8px;
}
form .errors {
margin-bottom: 1em;
}
form .error {
color: red;
}
form p.error,
form p.success {
margin-bottom: 5px;
}
form input.formfield_error {
background-color: #FFCCCC;
}
.flex.mulistall h2,
#content h2 {}
.flex.mulistall h3,
#content h3{font-weight: bold;}
.flex.mulistall > .map + div > .flex-25 > img,
.flex.mulistall.event > div > .flex-25 > img{
height: 180px;
width: 100%;
object-fit: cover;
object-position: bottom;
}
#content {
width:90%;
margin:auto;
margin-top:20px;
}
@media only screen and (max-width: 1300px) {
#content {
max-width: 100%;
padding: 0 0px;
}
}
#content h1{font-size: 28px;font-weight: bold;line-height: 34px;margin-bottom: 10px;}
#content .flex{display:flex;flex-wrap:wrap;flex-direction:column;}
#content .flex .flex-25{flex-basis:25%;}
#content .flex .flex-25 a{display:block;}
#content .flex .flex-25 a img{vertical-align: bottom;}
.muliboerse h2{font-size: 2.0rem;margin-bottom:10px;}
#mulistall.muliboerse h2+.flex{justify-content: flex-start;}
#mulistall.muliboerse h2+.flex .flex-20 {flex-basis:50%;}
#mulistall.muliboerse h2+.flex .flex-20:nth-child(even) {background-color:#eee;padding:20px;}
#mulistall.muliboerse h2+.flex .flex-20:nth-child(odd) {background-color:#ddd;padding:20px;}
#mulistall.muliboerse .flex.mulistall > div {
display:flex;
flex-direction: row;
flex-wrap: wrap;
flex-basis: 50%;
}
#mulistall.muliboerse .flex.mulistall > div:first-child {
gap: 20px;
overflow: hidden;
padding: 0 0px;
}
#mulistall.muliboerse .flex.mulistall > div > div:not([class*="flex-"]) {
flex-basis:100%;
}
#mulistall.muliboerse .flex.mulistall > div:first-child > div.flex-25 {
padding: 0 0 15px 0;
flex-basis: 31%;
}
#mulistall.muliboerse .flex.mulistall > div:first-child > div.flex-25 h3,
#mulistall.muliboerse .flex.mulistall > div:first-child > div.flex-25 h4,
#mulistall.muliboerse .flex.mulistall > div:first-child > div.flex-25 p,
#mulistall.muliboerse .flex.mulistall > div:first-child > div.flex-25 a {
padding: 5px;
font-size: 18px;
}
img.max-2 {
max-height: 460px;
width: 100%;
object-fit: cover;
object-position: center;
}
.flex-25 img.max-2 {
height: 200px;
}
img.icon{max-width: 50px;height:auto;}
.column{max-width:1250px;}
/** HERO SLIDER **/
.cd-header,
.cd-hero__nav{display:none;}
.cd-hero__content--img img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
@media only screen and (min-width: 1170px) {
.cd-hero__slider {
height: 100vH;
}
}
.cd-hero__slide .cd-hero__content h2 {
font-size: 6rem;
font-weight: normal;
line-height: 1em;
font-family: "cabrito-normal",sans-serif;
text-shadow: #000000 1px 0 5px;
}
.cd-hero__slide .cd-hero__content p {
font-family: "cabrito-normal",sans-serif;
background: rgba(0,0,0,0.8);
padding: 15px;
}
@media only screen and (max-width: 1170px) {
header+a{
top: 15px;
left: 15px;
max-width: 100px;
padding: 10px;
z-index:2;
}
.hamburger {
width: 50px;
height: 50px;
display: flex;
align-items: center;
cursor: pointer;
z-index: 2;
right: 25px;
position: absolute;
top: 10px;
background: white;
padding: 5px 10px;
}
.hamburger div {
width: 100%;
height: 9px;
background: #666;
position: relative;
}
.hamburger div:before, .hamburger div:after {
position: absolute;
content: '';
width: 100%;
height: 9px;
background: #666;
left: 0;
}
.hamburger div:before {
top: -19px;
}
.hamburger div:after {
top: 18px;
}
.hamburger+nav{display:none;}
.hamburger.open div{background: transparent;}
.hamburger.open div:after{top: 0;
transform: rotate(45deg);}
.hamburger.open div:before{top: 0;
transform: rotate(-45deg);}
.hamburger+nav.open{display:block;display:flex;width:100vW;min-height:100vH;z-index:1;justify-content:center;}
.hamburger+nav.open ul{flex-direction:column;justify-content: flex-start;padding-top:50px;text-align:center;}
.hamburger+nav.open ul li ul {
display: block;
position: relative;
padding-top: 5px;
}
.hamburger+nav.open ul li ul li {
background: transparent;
}
#home > .flex.events > .flex-25 {
padding-bottom: 25px;
flex-basis: 49%;
}
#home > .flex {
margin-top: -60px;
}
}
@media only screen and (max-width: 768px) {
h6 {
font-size: 40px;
line-height: 40px;
}
#mulistall.muliboerse .flex.mulistall > div:first-child > div.flex-25 {
flex-basis: 100%;
}
.cd-hero__content.cd-hero__content--img {
display: block;
}
.cd-hero__slide .cd-hero__content h2 {
font-size: 3rem;
}
.cd-hero__slide .cd-hero__content p {
font-size: 2rem;
}
header+a{
top: 5px;
left: 5px;
max-width: 70px;
padding: 5px;
}
#home > .flex {
margin-top: -30px;
}
#home > .flex > .flex-25 {
flex-basis: 50%;
}
#home > .flex > .flex-25:nth-child(2) {
order: -1;
}
}
@media only screen and (max-width: 480px) {
h6 {
font-size: 40px;
line-height: 40px;
}
#footer > .flex > .flex-20 {
flex-basis: 100%;
}
#content .flex{display:block;flex-wrap:wrap;flex-direction:column;}
.flex.mulistall > div:last-child {
display: block;
flex-direction: column;
flex-wrap: wrap;
gap: 20px;
/* padding: 0 05px; */
overflow: hidden;
}
.flex.mulistall > div {
flex-basis: 100%;
}
.flex-25 {
flex-basis: 100%;
padding: 15px 25px 25px;
text-align: center;
}
#mulistall.muliboerse .flex.mulistall > div:first-child > div.flex-25 {
padding: 0 0 15px 0;
flex-basis: 100%;
}
#mulistall > .flex {
display: flex;
justify-content: center;
flex-wrap: nowrap;
margin-bottom: 50px;
flex-direction:column;
}
#mulistall.muliboerse h2+.flex .flex-20 {flex-basis:100%;}
#mulistall.muliboerse .flex.mulistall > div {
display:flex;
flex-direction: column;
flex-wrap: wrap;
flex-basis: 100%;
}
#home > .flex > .flex-25 {
flex-basis: 100%;
}
}
@media only screen and (max-width: 360px) {
h6 {
font-size: 40px;
line-height: 40px;
}
#footer > .flex > .flex-20 {
flex-basis: 100%;
}
#content .flex{display:block;flex-wrap:wrap;flex-direction:column;}
.flex.mulistall > div:last-child {
display: block;
flex-direction: column;
flex-wrap: wrap;
gap: 20px;
/* padding: 0 05px; */
overflow: hidden;
}
.flex.mulistall > div {
flex-basis: 100%;
}
.flex-25 {
flex-basis: 100%;
padding: 15px 25px 25px;
text-align: center;
}
#mulistall.muliboerse .flex.mulistall > div:first-child > div.flex-25 {
padding: 0 0 15px 0;
flex-basis: 100%;
}
#mulistall > .flex {
display: flex;
justify-content: center;
flex-wrap: nowrap;
margin-bottom: 50px;
flex-direction:column;
}
#mulistall.muliboerse h2+.flex .flex-20 {flex-basis:100%;}
#mulistall.muliboerse .flex.mulistall > div {
display:flex;
flex-direction: column;
flex-wrap: wrap;
flex-basis: 100%;
}
#home +6 {
flex-basis: 100%;
}
}