#masthead{
width: 100%;
top: 0px;
position: absolute;
}
.scrolled #masthead{
position: fixed;
}
#masthead{
height: 160px; 
}
#mini_logo{
display: none;
z-index: 100;
}
@keyframes mastheadScrolled{
from { height: 160px; }
to   {  height: 70px; }
}
.scrolled #masthead{
background: rgba(0, 116, 125, 1);
padding-top: 0px;
animation-name: mastheadScrolled;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.scrolled #masthead  #menu-mainmenu2 a, 
.scrolled #masthead  #menu-mainmenu a{
text-shadow: none;
color: #fff;
}
.scrolled #masthead .primary-navigation-wrapper{
top: -5px;
position: relative;
}
@keyframes logoScrolled{
from { width: 180px; }
to   {  width: 40px; }
}
#logo{
width: 180px;
height: 180px;
display: block;
position: relative;
}
.scrolled #masthead #logo{
animation-name: logoScrolled;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
@keyframes logoScrolled{
from { width: 180px; height: 180px;}
to   {  width: 40px; height: 60px;}
}
#logo img{
display: block;
width: 100%;
}
@keyframes biglogoScrolled{
from { width: 100%; }
to   {  width: 0%; }
}
.scrolled #logo{
margin-left: 15px;
margin-right: 15px;
}
.scrolled #masthead .desktop-logo{
display: block;
position: absolute;
animation-name: biglogoScrolled;
animation-duration: 0.5s;
animation-fill-mode: forwards;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@keyframes vaseScrolled{
from { width: 68px;  left: 32%; top: 25%;}
to   {  width: 40px; left: 0%; top: 0%;}
}
#logo .vase{
position: absolute;
left: 32%;
top: 25%;
width: 68px;
}
.scrolled #masthead .vase{
animation-name: vaseScrolled;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
#logo .vase img{
width: 100%;
}
h1.wp-block-post-title{
color: #000 !important;
}
h1.hyphens,
h2.hyphens,
h3.hyphens,
h4.hyphens,
h5.hyphens,
h6.hyphens{
hyphens: auto;
}
#menu-mainmenu2 a, #menu-mainmenu a{
text-shadow: 0 0 10px #FAEBDC;
}
.leistungcarousel .box{
overflow: hidden;
}
.amelia-v2-booking #amelia-container.am-fs__wrapper{
margin-top: 0px !important;
margin-bottom: 0px !important;
} #additional-top-menu{
display: flex;
flex-wrap: wrap;
align-items: center;
line-height: 100%;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
padding-top: 20px;
justify-content: center;
}
#additional-top-menu ul li a{
font-weight: normal;
display: block;
line-height: 100%;
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: #fff;
font-weight: 600;
letter-spacing: 0px;
text-transform: uppercase;
letter-spacing: 4px;
}
#additional-top-menu ul li:last-child a{
border-right: none;
}
#additional-top-menu ul li a{
border-right: 1px solid #fff;
}
.toggle-menu {
right: 15px;
top: 15px;
width: 40px;
height: 25px;
position: absolute;
cursor: pointer;
transition: 0.5s;
display: none;
}
.toggle-menu .stroke-1,
.toggle-menu .stroke-2,
.toggle-menu .stroke-3 {
height: 2px;
width: 100%;
background-color: #fff;
position: absolute;
transition: 0.5s;
border-radius: 9999px;
}
.toggle-menu .stroke-1 {	
top: 0px;
}
.toggle-menu .stroke-2 {	
top: 50%;
transform: translateY(-50%);
width: 80%;
}
.toggle-menu:hover .stroke-2{
width: 100%;
}
.toggle-menu .stroke-3 {
bottom: 0px;
}
.close{
color: #fff;
border: 3px solid #fff;
border-radius: 9999px;
padding: 10px;
line-height: 100%;
width: 40px;
height: 40px;
text-align: center;
text-shadow: 3px 3px rgba(0,0,0,1);
margin: auto auto;
cursor: pointer;
position: fixed;
margin-bottom: 20px;
right: 30px;
top: 25px;
display: none;
z-index: 1;
}
.close:after{
content: "";
display: block;
height: 50%;
width: 50%;
position: absolute;
background-color: #fff;
-webkit-mask-image: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/close-nav.svg);
mask-image: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/close-nav.svg);
-webkit-mask-size: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); 
}
@keyframes rotateClose{
from {  transform: rotate(0deg);}
to   {  transform: rotate(270deg);}
}
.close.rotate{
animation-name: rotateClose;
animation-duration: 1s;
}
.close .close-content{
position: absolute;
left: 50%; 
top: 50%;
transform: translate(-50%, -50%);
text-indent: -9999px;
}
#primary-navigation-left,
#primary-navigation-right{
max-width: 550px;
}
#menu-mainmenu{
justify-content: flex-end;
padding: 20px 20px 17px 20px;
display: block;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding-right: 0px;
}
#menu-mainmenu2{
padding: 20px 20px 17px 20px;
padding-left: 0px;
display: block;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#menu-mainmenu2,
#menu-mainmenu{
display: flex;
flex-wrap: wrap;
align-items: center;
}
#menu-mainmenu2 a,
#menu-mainmenu a{
font-family: Open Sans;
font-size: 25px;
padding-left: 20px;
padding-right: 20px;
color: #111;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
font-size: 15px;
font-weight: 500;
}
#menu-footer ul{
display: block;
background: red;
}
#menu-footer ul li{
display: block;
}
#menu-footer ul li a{
border-top: 1px solid #fff;
padding-top: 10px;
padding-bottom: 10px;
background: red;
}
.section-content .menu-footer-container #menu-footer li{
display: block;
padding-left: 0px !important;
}
.section-content .menu-footer-container li a{
display: block;
margin-bottom: 10px;
padding-left: 0px !important;
display: flex;
align-items: center; 
}
.section-content .menu-footer-container li a:before{
content: "";
width: 20px;
height: 20px;
display: block;
background: #fff;
margin-right: 10px;
-webkit-mask-image: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/arrow-right.svg);
mask-image: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/arrow-right.svg);
}
.section-content .menu-footer-container li a:hover{
color: #278B8E !important;
}
.section-content .menu-footer-container li a:hover:before{
background: #278B8E;
}
#block-8 .item:last-child{
border-right: none;
}
#block-8 table tr{
}
#block-8 table td{
padding-top: 10px;
padding-bottom: 10px;
}
@keyframes hoverLetter{
0%  { letter-spacing: 1px;}
50% { letter-spacing: 3px;  }
100% {  letter-spacing: 1px; }
}
#primary-navigation ul li .sub-menu{
width: 100%;
display: none;
}
#primary-navigation ul li .sub-menu a{
text-shadow: none;
padding: 6px 0 6px 0;
color: #fff;
text-shadow: none;
letter-spacing: 3px;
font-size: 22px;
-webkit-text-stroke: 0;
letter-spacing: 4px;
text-transform: uppercase;
line-height: 120%;
}
#primary-navigation ul li .sub-menu li:last-child{
margin-bottom: 0px;
}
#primary-navigation .toggle-subemenu{
position: relative;
width: 30px;
height: 30px; top: 40px;
cursor: pointer;
}
@keyframes togglelinerotate{
from{height: 100%;}
to{height: 0;}
}
@keyframes fillline1{
from{height: 0%;}
to{height: 100%;}
}
@keyframes fillline2{
from{width: 0%;}
to{width: 100%;}
}
#primary-navigation .toggle-subemenu .line1{
position: absolute;
top: 50%;
left: 50%;
background: #fff;
width: 2px;
height: 90%;
transform: translate(-50%, -50%);
position: relative;
}
#primary-navigation .toggle-subemenu.active .line1{
animation: togglelinerotate 0.3s;
animation-fill-mode: forwards;
}
#primary-navigation .toggle-subemenu .line2{
position: absolute;
top: 50%;
left: 50%;
background: #fff;
height: 2px;
width: 90%;
transform: translate(-50%, -50%);
}
#primary-navigation .toggle-subemenu.active{
transform: rotate(-180deg);
}
.primary-navigation-call{
color: #fff;
text-align: center;
margin-top: 40px;
letter-spacing: 5px;
text-transform: uppercase;
}
.primary-navigation-call a{
color: #fff;
}
.primary-navigation-call a:hover{
color: #FF6700;
}
#top{
background: #222;
font-size: 14px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
#top li{
display: inline-block;
padding-right: 10px;
padding-left: 10px;
border-right: 1px solid #fff;
line-height: 100%;
}
#top li:last-child{
border-right: none;
}
#top a{
color: #fff;
display: inline-block;
line-height: 100%;
letter-spacing: 2px;
text-transform: uppercase;
}
#headnavigation{
height: 100px;
}
.nav-bgvideo{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
object-fit: cover;
opacity: 0.7;
-webkit-filter: grayscale(100%); filter: grayscale(100%);
mix-blend-mode: multiply;
}
.swiper-button-prev, .swiper-button-next{
width: 60px;
height: 60px;
}
.swiper-container-rtl .swiper-button-next{
}
.swiper-button-prev,
.swiper-button-next{
mask-repeat: no-repeat;
mask-size: contain;
width: 50px;
height: 50px;
}
.swiper-button-prev{
background: blue;
-webkit-mask-image:  url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/arrow-left.svg);
mask-image: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/arrow-left.svg);
}
.swiper-button-next{
background: red;
-webkit-mask-image:  url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/arrow-right.svg);
mask-image: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/arrow-right.svg);
}
.swiper-button-prev:after, .swiper-button-next:after{
display: none;
}
@keyframes bookingButtonColorchange{
from { background-color: #278B8E; }
to   {  background-color: #F4A496; }
}
#menu-mainmenu2 .bookingbutton a{
background-color: #278B8E;
padding: 10px 20px 10px 17px;
border-radius: 999px;
text-shadow: none !important;
display: flex;
position: relative;
box-shadow: 3px 3px #F4A597;
font-weight: 400;
color: #fff;
margin-left: 25px;
font-family: Open Sans;
font-size: 14px;
transition: all 0.3s;
}
#menu-mainmenu2 .bookingbutton a:hover{
background-color: #F4A597;
box-shadow: 3px 3px #278B8E;
}
#menu-mainmenu2 .bookingbutton a:before{
content: "";
width: 20px;
height: 20px;
display: block;
background: pink;
margin-right: 15px;
background: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/icon-booking.svg) no-repeat;
background-size: contain;
}
.scrolled #menu-mainmenu2 .bookingbutton a{
animation-name: bookingButtonColorchange;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
#mini_logo{
width: 70px;
height: auto;
position: absolute;
left: 10px;
top: 10px;
}
#mini_logo img{
width: 100%;
}
.header-logo-left #logo, .header-logo-right #logo{
background: #fff;
margin: auto auto;
margin-top: -7px;
}
.header-logo-left #logo img, .header-logo-right #logo img{
padding-left: 20px;
padding-right: 20px;
}
.header-logo-left #logo, .header-logo-right #logo{
height: 110px  !important;
}
.slider {
height: 60px;
position: relative;
width: 100%;
display: grid;
place-items: center;
overflow: hidden;
} .slide-track2 {
width: calc(355px * 15);
display: flex;
animation: scroll2 15s linear infinite;
justify-content: space-between;
}
.slide {
width: 355px;
height: 60px;
padding-left: 20px;
padding-right: 20px;
display: grid;
place-items: center;
transition:0.5s;
cursor:pointer;
}
.slide img{
width: 100%;
display: block;
} @keyframes scroll {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(calc(-355px * 10));
}
}
@keyframes scroll2 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(calc(-255px * 5));
}
}
.primary-navigation-wrapper{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center; background: linear-gradient(to bottom,  rgba(249,236,221,1) 0%,rgba(249,236,221,0) 98%,rgba(249,236,221,0) 100%); }
.column {
display: flex;
flex-wrap: wrap;
}
.content.columns_1 .column {
width: 100%;
}
.content.columns_2 .column {
width: 50%;
}
.content.columns_3 .column {
width: 33.33%;
}
.diensleistung-box .item-content{
display: flex;
flex-wrap: wrap;
}
.diensleistung-box .item:nth-child(even) .svg {
margin-left: auto;
}
.diensleistung-box .boxspacer{
width: calc(50% - 60px);
}
.diensleistung-box .nummer{
width: 120px;
text-align: center;
position: relative;
font-weight: 700;
color: #278B8E !important;
position: relative;
background: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/pen-line-1.png) no-repeat right 37px top;
background-size: 20% 100%;
opacity: 0.6;
}
.diensleistung-box .item:nth-child(even) .nummer{
background: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/pen-line-2.png) no-repeat left 37px top;
background-size: 20% 100%;
}
.diensleistung-box .textwrapper{
width: calc(50% - 60px);
}
.diensleistung-box .image.spaltenbild{
padding-bottom: 30px;
}
.diensleistung-box .image{
margin-bottom: 30px;
overflow: hidden;
}
.diensleistung-box .image img {
width: 60px; 
height: 60px;
}
.diensleistung-box .item:nth-child(even) .image{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.diensleistung-box .item:nth-child(odd) .preis{
text-align: left;
}
.diensleistung-box .item:nth-child(even) .textwrapper{
order: 1;
text-align: right;
}
.diensleistung-box .item:nth-child(even) .text .aufzaehlung ul li{
padding-left: 7px;
padding-right: 45px !important;
}
.diensleistung-box .item:nth-child(even) .text ul li:before {
right: 10px;
left: auto;
transform: rotate(180deg);
}
.diensleistung-box .item:nth-child(even) .aufzaehlung-button{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.diensleistung-box .item:nth-child(even) .nummer{
order: 2;
}
.diensleistung-box .item:nth-child(even) .boxspacer{
order: 3;
}
.diensleistung-box .item:nth-child(even) .aufzaehlung-button span.plus{
order: 2;
}
.diensleistung-box .text .aufzaehlung  ul li{
background: rgba(255,255,255,0.4);
padding-top: 12px;
padding-bottom: 12px;
padding-left: 45px !important;
padding-right: 10px;
}
.diensleistung-box .text .aufzaehlung{
display: none;
}
.footer_opening_column table{
width: 100%;
}
.footer_opening_column table td{
border-top: 1px solid rgba(255,255,255,0.3);
}
.footer_opening_column table tr:last-child td{
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.amelia-app-booking .el-input-number:before {
content: "Personenzahl";
display: block;
font-weight: 500;
font-size: 13px;
color: #555;
margin: 4px 0 8px 4px;
} .button_all_projects {
transform: scale(0.9);
opacity: 0.8;
transition: transform 0.5s ease, opacity 0.4s ease;
will-change: transform, opacity;
}
.button_all_projects.is-inview {
transform: scale(1);
opacity: 1;
}
.footer_links_column{
width: 230px !important;
}
.footer-2 td:first-child{
hyphens: auto;
line-height: 120%;
}
@media screen and (max-width: 768px) {
.footer_opening_column table{
max-width: 500px;
}
.slide-track {
width: calc(80px * 20);
}
.slide-track2 {
width: calc(80px * 15);
}
.slide {
width: 80px;
}
@keyframes scroll {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(calc(-80px * 10));
}
}
@keyframes scroll2 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(calc(-80px * 5));
}
}
}
#socialmedia-box{
justify-content: center;
}
.text-mit-bild-box .spaltennummer{
display: flex;
flex-wrap: wrap;
}
.text-mit-bild-box .nummer{
font-size: 74px;
line-height: 100%;
width: 65px;
margin-top: -26px;
font-family: Open Sans Bold;
color: #F0C526;
}
.text-mit-bild-box .spaltennummer .textcontainer{
width: calc(100% - 65px);
}
.nummer{
display: block !important;
}
.nummer[data-aos^="fade"][data-aos^="fade"] {
opacity: 1.0 !important;
}
.carousel-box .flexibleheight img{
object-fit: contain !important;
}
.header-logo-left #logo{
left: 0px;
}
#colophon .content{
width: 100%;
display: flex;
flex-wrap: wrap;
padding-left: 40px;
padding-right: 40px;
}
#colophon .footer-logo-nav{
width: calc(100% - 700px);
margin-bottom: 40px;
}
#colophon .width100{
width: 100%;
}
#colophon .footer-logo img{
width: 240px;
} 
#colophon #menu-footer{
justify-content: left;
}
#colophon .footer-nav-menu{
font-size: 20px;
}
#colophon .footer-nav-menu li{
margin-bottom: 20px;
width: 100%;
}
#colophon .footer-nav-menu{
columns: 1;
max-width: 400px;
}
#colophon .footer-nav-menu a{
color: #fff;
line-height: 130%;
}
#colophon ul li{
padding-left: 0px;
padding-right: 0px;
}
h1{ }
h1 .anim:nth-child(odd){
position: relative;
top: -30px;
opacity: 0;
animation: slideinposition 0.2s linear forwards; 
}
h1 .anim:nth-child(even){
position: relative;
top: 30px;
opacity: 0;
animation: slideinposition 0.2s linear forwards; 
}
@keyframes slideinposition {
to { 
top: 0px;
opacity: 1;
}
}
.icon-on-the-left .item .item-content{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.icon-on-the-left .text {
width: calc(100% - 90px);
padding-left: 40px;
}
.icon-on-the-left .spaltenbild{
margin-top: 0px !important;
}
.gradienttitel h1,
.gradienttitel h2,
.gradienttitel h3,
.gradienttitel h4,
.gradienttitel h5,
.gradienttitel h6{
} .wpcf7-acceptance .wpcf7-list-item-label{
margin-bottom: 0px !important;
}
.marquee .contItem { 
display:inline-block; 
vertical-align:top; 
padding:20px; 
white-space:normal;
}
.marquee .contItem img{
object-fit:contain;
} 
.single .section-content{
padding-left: 30px;
padding-right: 30px;
}
.single .single-referenzbilder-nav .spaltenbild {
padding-top: 60%;
}
.single .single-referenzbilder-nav .item-content, 
.single .single-referenzbilder-nav .spaltenbild {
height: 100%;
}
.single .single-referenzbilder-nav .section-content{
padding-left: 0px;
padding-right: 0px;
padding-top: 20px;
}
.single-referenzbilder-nav .item{
width: 25%;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 40px;
}
.single-referenzbilder-nav .flex-wrap{
margin-left: -20px;
margin-right: -20px;
} 
.single-referenzbilder-nav .text {
left: 0px;
top: 0px;
position: absolute;
width: 100%;
height: 100%;
display: flex; background: linear-gradient(to right,  rgba(185,21,126,0.95) 0%,rgba(242,144,36,0.95) 100%); align-items: center;
justify-content: center;
display: none;
}
.single-referenzbilder-nav .text strong{
font-family: Rostack !important;
font-weight: normal;
text-align: center;
color: #ffffff;
font-size: 20px;
line-height: 1.1;
}
.single-referenzbilder-nav .item{
border-radius: 1em;
overflow: hidden;
}
.single-referenzbilder-nav img{
position: absolute;
top: 0px;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: 10px;
}
.single-referenzbilder-nav .box:hover .text{
display: block;
}
.single-referenzbilder-nav  .text .text-content {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;	
}
.single-referenzbilder-nav .text .text-content strong{
max-width: 400px;
padding-left: 20px;
padding: 25px 20px;
right: 0px;
bottom: 0px;
position: relative;
font-weight: normal;
font-size: 30px;
max-width: calc(100% - 60px);
letter-spacing: 1px;
}
.single-referenzbilder-nav strong:before { 
content: ""; 
position: absolute; 
top: -2px; 
left: -2px; 
width: 0; 
height: 0; 
background: transparent; 
border: 2px solid transparent; 
} 
.single-referenzbilder-nav strong:before { 
animation: borderanimate 0.5s linear forwards; 
} 
.single-referenzbilder-nav strong:after { 
content: ""; 
position: absolute; 
top: -2px; 
left: -2px; 
width: 0; 
height: 0; 
background: transparent; 
border: 2px solid transparent; 
} 
.single-referenzbilder-nav strong:after { 
animation: borderanimate2 0.5s linear forwards; 
} 
.single-projekte .content{
max-width: 1500px;
margin: auto auto;
}
.single-projekte .item-content a{
overflow: hidden;
display: block;
}
.single-projekte .item-content{
overflow: hidden;
border-radius: 10px;
}
.single-header-wrapper{
position: relative;
}
.single-header-wrapper:before{
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1;
background: linear-gradient(135deg,  rgba(195,42,112,1) 0%,rgba(238,135,43,1) 100%);
transform: none !important;
}
.sh-title,
.sh-image{
width: 50%;
}
.sh-title{
padding-right: 50px;
}
.sh-title h1{
display: block;
width: 100%;
}
.sh-title h2{
font-size: 25px !important;
display: block;
width: 100%;
}
.sh-image{
width: 50%;
padding-top: 50%;
border-radius: 10px;
position: absolute;
right: 0px;
overflow: hidden;
}
.sh-image img{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
object-fit: contain;
}
.sh-button{
background: #fff;
display: block;
padding: 10px 25px;
border-radius: 9999px;
color: #000;
}
.spalten-links-box a{
transition: all 0.5s;
}
@keyframes arrowSlide{
from { left: 0;}
to   {  left: 12px; }
}
.spalten-links-box a:hover .arrow-wrapper .arrow{
animation-name: arrowSlide;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.spalten-links-box .arrow-wrapper{
width: 50px;
height: 50px;
display: block;
position: relative;
transition: all 0.5s;
}
.spalten-links-box .arrow-wrapper .circle{
display: block;
width: 35px;
height: 35px;
border-radius: 9999px;
border: 1px solid #D2525B;
align-self: flex-end;
position: relative;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spalten-links-box .arrow-wrapper .arrow{
mask-image: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/right-arrow.svg);
-webkit-mask-image: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/right-arrow.svg);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center center;
-webkit-mask-position: center center;
mask-size: contain;
-webkit-mask-size: contain;
background: #D2525B;
position: absolute;
display: block;
width: 25px;
height: 25px;
top: 50%;
transform: translateY(-50%);
transition: all 0.5s;
}
.spalten-links-box.icon-on-the-left .text{
padding-left: 30px;
}
.spalten-links-box.icon-on-the-left .text{
width: calc(100% - 120px)
}
.spalten-links-box.icon-on-the-left .item .item-content{
align-items: center;
}
.hide{
display: none;
}
@media(max-width: 1500px){ }
@media(max-width: 1200px){
.swiper-button-prev, .swiper-button-next{
width: 50px;
height: 50px;
}
.dienstleistungbox h3{
text-align: center;
}
.dienstleistungbox{
text-align: center;
}
.dienstleistungbox .item{
max-width: 800px;
margin: auto auto;
}
.icon-on-the-left .text{
width: 100%;
padding-left: 0px;
}
.icon-on-the-left .text{
padding-top: 20px;
}
.projekte-box .spalten-titel{
padding: 25px 20px;
}
.single-referenzbilder-nav .item{
width: 50%;
}
}
#colophon .content{
padding-top: 20px;
}
#footer-navigation #menu-law{
display: flex;
flex-wrap: wrap;	
justify-content: center;
}
#footer-navigation #menu-law a{
display: block;
padding-left: 10px;
padding-right: 10px;
}
#footer-navigation #menu-law li:first-child a{
padding-left: 0px;
}
#footer-navigation #menu-law li:last-child a{
padding-right: 0px;
}
.data-policy h2,
.imprint h2{
font-size: 22px;
letter-spacing: 1px;
font-family: Open Sans;
hyphens: auto;
color: #288B8E;
}
.data-policy h3,
.imprint h3{
font-size: 18px;
font-family: Open Sans;
hyphens: auto;
color: #288B8E;
}
.overflowhidden{
overflow: hidden;
}
.aboutbox .item{
position: relative;
}
.aboutbox .item:after{
content: "";
background: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/line.svg) no-repeat;
background-size: contain;
width: 10px;
height: 55px;
position: absolute;
right: 0px;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.aboutbox .spalten-box .item{
padding-bottom: 45px !important;
}
.aboutbox.spalten-box .item{
padding-bottom: 80px !important;
} textarea::-webkit-scrollbar {
display: none;
} textarea {
-ms-overflow-style: none; scrollbar-width: none; resize: none;
}
@keyframes slidetextarea{
from { height: 84px;}
to   {  height: 300px; }
}
.close.rotate{
animation-name: rotateClose;
animation-duration: 1s;
}
.kontaktformular-box input[type="text"],
.kontaktformular-box input[type="email"],
.kontaktformular-box input[type="tel"],
.kontaktformular-box textarea{
transition: all 0.8s;
}
.opening-contact-box table td{
padding-top: 10px;
padding-bottom: 10px;
}
.contactform-help span[data-name="your-message"]:before{
}
.kontaktformular-box#kontaktformular-block_c5fa4e316d9be666a847583b753893d1 textarea{
-ms-overflow-style: none; scrollbar-width: none; }
.kontaktformular-box#kontaktformular-block_c5fa4e316d9be666a847583b753893d1 textarea::-webkit-scrollbar {
display: none;
}
.kontaktformular-box .flex-wrap{
margin-left: -15px;
margin-right: -15px;
}
.kontaktformular-box input[type="submit"]{
cursor: pointer;
}
.kontaktformular-box .wpcf7 .wpcf7-acceptance input[type="checkbox"]{
width: 20px;
height: 20px;
border: none;
}
.kontaktformular-box .wpcf7 .wpcf7-acceptance .wpcf7-list-item{
width: 100%;
display: block;
}
.kontaktformular-box .wpcf7 .wpcf7-acceptance label{
display: flex;
flex-wrap: wrap;
width: 100%;
}
.kontaktformular-box .wpcf7 .wpcf7-acceptance  .wpcf7-list-item-label{
width: calc(100% - 30px);
display: block;
}
.kontaktformular-box .wpcf7-not-valid-tip{
font-size: 15px;
color: #F62D73;
padding-top: 5px;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
font-size: 16px;
}
.kontaktformular-box .button-fa{
position: relative;
max-width: 200px;
margin: auto auto;
}
.kontaktformular-box .button-fa input[type="submit"]{
display: flex;
align-items: center;
height: 60px;
transition: all 0.5s;
padding-left: 30px;
padding-right: 80px;
font-size: 20px;
text-transform: uppercase;
line-height: 100%;
border-radius: 9999px;
background-image: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/right-arrow.svg);
background-repeat: no-repeat;
background-size: 30px auto;
background-position: right 25px center;
transition: all 0.3s;
}
.kontaktformular-box .button-fa input[type="submit"]:hover{
background-position: right 140px center;
padding-left: 80px;
}
.exzellenteswebdesign .text-content{
max-width: 600px;
}
.gridgalerie-box.custommockupgrid  .image-wrapper{
grid-auto-rows: minmax(50vh, auto)
}
.contactform-help textarea,
.contactform-help input[type="text"],
.contactform-help input[type="email"]{
border-bottom-width: 4px;
border-bottom-style: solid;
border-image: linear-gradient(to right, #EC8C39, #F53270) 1;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 70px;
position: relative;
}
form .width50,
form .width100{
margin-right: 15px;
margin-left: 15px;
}
form .width50{
width: calc(50% - 30px);
}
form .width100{
width: calc(100% - 30px);
}
.contactinfobox .titel{
font-size: 150px;
line-height: 80%;
}
.minspacer,
.minspacer80{
height: 80px;
}
.aboutbox .item:last-child:after{
content: "";
display: none;
}
.leistungcarousel .content{
padding-left: 50px;
padding-right: 50px;
}
.leistungcarousel .text-detail h2{
font-size: 100px;
font-size: 5vw;
}
.blur1px{
filter: blur(1px);	
}
.dienstleistungbox {
border-bottom: 1px solid #000;
}
.projekte-box .section-content .content{
padding-left: 40px;
padding-right: 40px;
}
.projektnavigation{
padding-left: 15px;
display: flex;
flex-wrap: wrap;
}
.projektnavigation .nav-links{
display: flex;
flex-wrap: wrap;
}
.projektnavigation .arrow-left,
.projektnavigation .arrow-right{
background: #fff;
padding: 10px 10px;
line-height: 100%;
display: block;
transition: all 0.3s; }
.projektnavigation a .arrow-left ,
.projektnavigation a .arrow-right {
color: #000;
}
.projektnavigation .arrow-right{
margin-right: 4px;
}
.projektnavigation a:hover .arrow-left,
.projektnavigation a:hover .arrow-right{
background: none;
box-shadow: inset 0 0 0 2px #fff;
color: #fff;
}
.linebetween .section-content:before{
content: "";
display: block;
position: absolute;
width: 1px;
height: 100%;
background: #333;
left: 50%;
}
.linebetween .section-content .image {
opacity: 1 !important;
}
.h1title{
z-index: 50;
position: relative;
}
.h1title h1{
max-width: 550px;
}
.box-title .marked{
-webkit-text-stroke-width: 0;
-webkit-text-fill-color: #fff;
}
.archive h1{
font-size: 110px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
-webkit-text-fill-color: transparent;
text-align: center;
}
.exzellenteswebdesign{
z-index: 10;
position: relative;
}
.spaltenbild svg{
width: 100%; 
height: auto;
}
.single-leistungen h1{
display: block;
text-align: left;
font-size: 60px;
margin-bottom: 30px;
-webkit-text-stroke-width: 0.5px; 
-webkit-text-stroke-color: #fff; 
color: transparent;
font-family: Rostack;
letter-spacing: 3px;
line-height: 80% !important;
text-align: left;
}
.servicedescription_header{
display: flex;
flex-wrap: wrap;
position: relative;
}
.servicedescription_header .servicedescription_image{
position: relative;
}
.servicedescription_header img{
position: absolute;
left: 0px;
top: 0px;
width: 60%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.servicedescription_header .servicedescription_text{
padding-top: 120px;
padding-bottom: 120px;
padding-left: 50%;
z-index: 1;
}
.servicedescription_text_content{
background: #000;
padding: 10%; background: linear-gradient(135deg,  rgba(195,42,112,1) 0%,rgba(238,135,43,1) 100%); border-radius: 10px;
}
.servicedescription_text h1{
font-size: 50px;
line-height: 90%;
}
.servicedescription_text h2{
font-size: 30px;
}
.servicedescription_text a{
background: #fff;
padding: 20px 30px;
font-family: Rostack;
display: block;
color: #000;
border-radius: 9999px;
letter-spacing: 1px;
line-height: 100%;
text-align: center;
}
.single #angebotanfordern{ background: linear-gradient(135deg,  rgba(195,42,112,1) 0%,rgba(238,135,43,1) 100%); }
.single-leistungen-nav ul{
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(4, 1fr);
}
.single-leistungen-nav ul li{
display: flex;
flex-wrap: wrap;	
border: 3px solid #fff;
transition: all 0.3s;
border-radius: 5px;
width: 100%;
}
.single-leistungen-nav ul li strong{
width: calc(100% - 180px);
display: block;
transition: all 0.3s;
position: relative;
left: 0px;
display: flex;
align-items: flex-end;
line-height: 130%;
color: #fff;
font-weight: normal;
bottom: 0px;
width: 100%;
z-index: 1;
font-size: 17px;
padding: 6px 20px 8px 20px;
letter-spacing: 1px;
}
.single-leistungen-nav ul li a{
display: flex;
flex-wrap: wrap;
align-items: center;
border-radius: 3px;
color: #333;
font-size: 20px;
position: relative;
border-radius: 8px;
width: 100%; overflow: hidden;
}
.single-leistungen-nav ul li strong span{
display: block;
}
.single-leistungen #angebotanfordern input[type="text"],
.single-leistungen #angebotanfordern input[type="email"]{
padding: 17px 40px 17px 80px;
background: none;
border-bottom: 3px solid #fff;
}
.single-leistungen #angebotanfordern textarea{
border-radius: 10px;
padding: 20px 40px;
min-height: 130px;
}
.single-leistungen #angebotanfordern form .width50, 
.single-leistungen #angebotanfordern form .width100{
margin-bottom: 20px;
}
.single-leistungen .basic_columns_box li{
width: 33.33%;
}
.leistungen_header{
background: linear-gradient(135deg, #c02474 1%, #f08c26 100%);
padding-top: 80px;
padding-bottom: 200px;
}
.leistungen_header h1{
font-size: 150px;
color: #ffffff;
}
.leistungen_header h2{
font-family: Cyber Brush !important;
color: #ffffff;
font-size: 40px;
line-height: 1.0;
margin-bottom: 40px;
}
.leistungen_images_wrapper{
background: #111;
}
.leistungen_images_wrapper ul{
display: flex;
flex-wrap: wrap;
margin-left: -30px;
margin-right: -30px;
}
.leistungen_images_wrapper .item{
width: calc(33.33% - 40px);
position: relative;
margin-left: 20px;
margin-right: 20px;
}
.leistungen_images_wrapper .item a{
display: block;
width: 100%;
padding-top: 100%;	
overflow: hidden;
border-radius: 5px;
}
.leistungen_images_wrapper .item img{
position: absolute;
width: 100%;
height: 100%;	
object-fit: cover;
top: 0px;
left: 0px;
border-radius: 5px;
}
.flex_block_columns{
display: flex;
flex-wrap: wrap;
}
.flex_block_columns h2,
.flex_block_columns h3,
.flex_block_columns h4,
.flex_block_columns h5,
.flex_block_columns h6{
font-family: Rostack;
font-size: 35px;
font-weight: normal;
}
.flex_block_columns{
margin-left: -20px;
margin-right: -20px;
}
.flex_block_columns li{
padding-left: 20px;
padding-right: 20px;
}
.flex_block_columns.columns_1 li{
width: 100%;
}
.flex_block_columns.columns_2 li{
width: 50%;
}
.flex_block_columns.columns_3 li{
width: 33.33%;
}
.flex_block_columns.columns_4 li{
width: 25%;
}
.flex_block_columns.columns_5 li{
width: 20%;
}
.flex_block_columns.columns_6 li{
width: 12.5%;
}
#breadcrumbs{
font-size: 12px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 60px;
}
#breadcrumbs a{
color: #fff;
}
.dl_wrapper .dl_item{
border-bottom: 1px solid rgba(255,255,255,0.4);
padding-bottom: 20px;
padding-top: 20px;
}
.dl_wrapper .dl_item h3{
line-height: 100%;
margin-bottom: 0px;
}
.leistungen img{
border-radius: 10px;
}
.textundblocks-box .tub_blocks_text{
width: 35%;
padding-right: 30px;
}
.textundblocks-box .tub_blocks_wrapper{
width: 65%;
}
.textundblocks-box .tub_blocks_wrapper .item-content{
border-radius: 10px !important;
}
.textundblocks-box .tub_blocks_wrapper .item{
padding: 40px;
border-radius: 20px; background: linear-gradient(to right,  #eb8f36 0%,#ef5f53 100%); width: calc(50% - 25px);
}
.textundblocks-box .tub_blocks_wrapper .item:last-child{
width: 100%;
}
.textundblocks-box .tub_blocks_wrapper .item .image{
max-width: 60px;
margin-bottom: 20px;
}
.textundblocks-box .tub_blocks_wrapper .item .spalten-titel{
font-size: 40px;
font-family: Rostack;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 3px;
}
.textundblocks-box .tub_blocks_wrapper .item{
font-size: 24px;
}
.textundblocks-box .tub_blocks_text .titlecontent{
font-size: 100px;
font-family: Rostack;
line-height: 80%;
font-weight: 400;
letter-spacing: 2px;
padding-right: 20px;
}
.textundblocks-box .tub_blocks_wrapper{
grid-gap: 50px;
}
.textundblocks-box .tub_blocks_wrapper .item{
display: flex;
}
.textundblocks-box .tub_blocks_wrapper .item .item-content{
align-self: flex-end;
}
.textundblocks-box .tub_blocks_wrapper .item p{
margin-bottom: 0px;
}
.textundblocks-box .tub_blocks_wrapper a{
color: #fff;
padding-right: 50px;
background: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/long-arrow-right.svg) no-repeat;
background-size: 35px auto;
background-position: right 18px;
transition: all 0.3s;
}
.textundblocks-box .tub_blocks_wrapper a:hover{
background-position: left 18px;
padding-left: 50px;
padding-right: 0px;
}
#more-leistungen{
background: #111;
}
.brlbs-cmpnt-dialog-entrance-description{
height: 200px !important;
overflow-y: scroll;
}
.icon-on-the-left.spalten-links-box {
display: none;
}
.divider-in-the-middle .section-content{
position: relative;
}
.divider-in-the-middle .section-content:before{
content: "";
position: absolute;
display: block;
width: 3px;
height: 100%;
background: #000;
left: 50%;
}
.divider-in-the-middle video{
opacity: 0.5;
}
.box-more-text{
position: relative;
}
.spalten-box  .item.swiper-slide .spaltenbild{
margin-bottom: 0px;
}
.wpcf7-spinner{
position: absolute;
}
.page-id-4513 #content{
overflow: inherit;
}
.page-id-4513 section{
top: 0px;
}
.diensleistung-box .svg{
width: 70px;
margin-bottom: 20px;
}
.diensleistung-box .svg svg{
width: 100%;
height: auto;
}
.diensleistung-box .nummer{
font-size: 50px;
line-height: 100%;
color: #000;
}
.fi_tabelle td{
border-top: 1px solid #ccc;
}
.fi_tabelle td:first-child{
font-weight: 700;
}
.fi_tabelle td:last-child{
padding-left: 30px;
}
.fi_tabelle tr:last-child td{
border-bottom: 1px solid #ccc;
}
.flexible-content-aufzahlung .item-aufzahlung{
padding-bottom: 0px;
}
.aktuelles-box  .item.no-image .text{
padding-left: 0px;
width: 100%;
}
.aktuelles-box .item-content.box{
display: flex;
flex-wrap: wrap;
}
.aktuelles-box .item,
.aktuelles-box .item-content{
border-radius: 5px;
}
.aktuelles-box .image{
width: 40%;
}
.aktuelles-box .text{
width: 60%;
padding-left: 30px;
}
#socialmedia-footer-box{
display: flex;
flex-wrap: wrap;
}
#socialmedia-footer-box a{
width: 25px;
display: block;
margin-left: 15px;
}
#colophon .content{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.wpcf7-radio .wpcf7-list-item label{
border: 2px solid #278B8E;
padding: 5px 10px;
border-radius: 5px;
margin-right: 15px;
cursor: pointer;
}
.spalten-mit-icon-box .moretext{
display: none;
}
.spalten-mit-icon-box .image.spaltenbild{
margin-top: 0px !important;
}
.scrolled .primary-navigation-wrapper{
background: transparent;
}
.spalten-mit-icon-box .moretext_button{
border: none; 
padding: 5px 5px 7px 5px;
color: #fff;
background-color: #ddd;
border-radius: 9999px;
display: flex;
flex-wrap: wrap;
padding-left: 15px;
padding-right: 10px;
font-size: 14px;
border: 2px solid #278B8E;
color: #278B8E;
background: none;
font-weight: 500;
font-family: Open Sans;
align-items: center;
cursor: pointer;
margin-top: 7px;
}
.spalten-mit-icon-box .moretext_button.active:after{
transform: rotate(180deg);
}
.spalten-mit-icon-box .moretext_button:after{
width: 15px;
height: 15px;
content: "";
display: block; 
margin-left: 8px;
-webkit-mask: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/arrow-down.svg); 
mask: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/arrow-down.svg); 
mask-size: contain; 
mask-position: center bottom;
background-color: #278B8E;
position: relative;
top: 1px;
}
.spalten-mit-icon-box  .moretext {
margin-top: 10px;
}
.footer-2 .icb-3{
}
[data-aos="fade-up"] {
transform: translateY(50px); }
[data-aos="fade-up"].aos-animate {
transform: translateY(0);
}
.button-right .item-content.box .text-content{
display: flex;
flex-wrap: wrap;
}
.button-right .item-content.box .text-content .preis{
width: 50px;
flex-grow: 2;
text-align: left;
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid #666;
}
.button-right .item-content.box .text-content .spalten-titel {
margin-bottom: 0px !important;
}
.button-right .item-content.box .text-content .moretext_button {
margin-top: 0px !important;
}
#flexibler-inhalt-block_def747cb31526e82e2c0bd69d0d58640  table td{
padding-top: 10px;
padding-bottom: 10px;
}
.button-right .item-content.box .text-content{
padding-right: 170px;
}
.button-right .item-content.box .text-content .text-detail{
width: 100%;
display: block;
padding-top: 6px;
}
.button-right .item-content.box .text-content .moretext_button{
position: absolute;
right: 30px;
top: 20px;
}
@media(max-width: 1400px){
.single-leistungen h1 span{
font-size: 100px;
}
.textundblocks-box .tub_blocks_text{
width: 100%;
padding-right: 0px;
}
.textundblocks-box .tub_blocks_text .titlecontent{
text-align: center;
font-size: 120px;
padding-right: 0px;
margin-bottom: 50px;
}
.textundblocks-box .tub_blocks_wrapper{
width: 100%;
max-width: 850px;
margin: auto auto;
}
.contactinfobox .titel{
font-size: 80px;
}
.contactinfobox .titel br{
display: none;
}
}
@media(max-width: 1300px){
.flex_block_columns.columns_3 li{
width: 50%;
}
#menu-mainmenu2 a, #menu-mainmenu a{
padding-left: 10px;
padding-right: 10px;
}
#logo {
width: 120px;
height: 120px;
display: block;
position: relative;
}
#logo .vase {
position: absolute;
left: 32%;
top: 25%;
width: 44px;
}
}
@media(max-width: 1200px){
#logo{
width: 90px;
}
#menu-mainmenu2 .bookingbutton a{
margin-left: 15px;
}
#menu-mainmenu2 a, #menu-mainmenu a{
font-size: 14px;
}
#logo{
height: 90px;
}
#logo .vase{
width: 35px;
}
#primary-navigation-left, #primary-navigation-right{
width: 445px;
}
}
@media(max-width: 1100px){
.kontaktformular-box .button-fa input[type="submit"]{
height: 50px;
font-size: 18px;
padding-left: 20px;
padding-right: 50px;
}
.footer-logo img{
width: 100px;
}
.footer-logo-nav{
margin: auto auto;
margin-top: -20px;
}
.footer-logo-nav{
display: none;
}
}
@media(max-width: 1024px){
.button-right.spalten-mit-icon-box  .item{
margin-bottom: 10px;
}
.table_first_column .item-content{
padding-bottom: 0 !important;
}
.table_first_column table tr:last-child td{
border-bottom: none; 
}
.table_second_column .item-content{
padding-top: 0 !important;
}
.content.columns_2 .column{
width: 100%;
}
.section-content{
padding-left: 50px;
padding-right: 50px;
}
.single-leistungen h1{
font-size: 50px;
max-width: 600px;
}
.single-leistungen-nav ul{
grid-gap: 17px;
}
.single-leistungen-nav ul li:nth-child(2) img, .single-leistungen-nav ul li:nth-child(3) img, .single-leistungen-nav ul li:nth-child(4) img{
width: 130px;
height: 130px;
}
.single-leistungen-nav ul li:nth-child(2) strong, .single-leistungen-nav ul li:nth-child(3) strong, .single-leistungen-nav ul li:nth-child(4) strong{
font-size: 17px;
padding-top: 10px;
padding-bottom: 10px;
width: calc(100% - 130px);
}
.single-leistungen-nav ul li:nth-child(1) strong{
font-size: 17px;
padding-top: 10px;
padding-bottom: 10px;
}
.section-content .single-leistungen-nav ul li:nth-child(1), 
.section-content .single-leistungen-nav ul li:nth-child(2), 
.section-content .single-leistungen-nav ul li:nth-child(3), 
.section-content .single-leistungen-nav ul li:nth-child(4){
padding-left: 0px;
}
.single-leistungen-nav ul li:nth-child(1){
grid-row: 1 / 3;
}
.single-leistungen-nav ul li:nth-child(2){
grid-row: 1 / 2;
}
.single-leistungen-nav ul li:nth-child(3){
grid-row: 2 / 3;
}
.single-leistungen-nav ul li:nth-child(4){
grid-column: 1 / 3; 
grid-row: 3 / 4;
}
.single-referenzbilder-nav .flex-wrap{
margin-left: -10px;
margin-right: -10px;
}
.single-referenzbilder-nav .item{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
}	
.h1title{
margin-bottom: -15px !important;
}
.aboutbox .item:after{
content: "";
background: #fff;
width: 1px;
height: 60px;
position: absolute;
right: 0px;
bottom: 25px;
left: 50%;
}
.projektheader_titel h1{
font-size: 35px;
letter-spacing: 3px;
}
.projekttitleinfo{
font-size: 18px;
}
.projektheader_description{
font-size: 18px;
}
.spacer250{
height: 100px;
}
#mini_logo{
display: block;
}
.scrolled #masthead,
#masthead{
height: 90px; background: transparent;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
animation-name: none;
}
.content.columns_3 .column{
width: 100%;
}
#primary-navigation-left, #primary-navigation-right{
width: 100%;
}
#menu-mainmenu2 .bookingbutton a{
margin-left: 0px;
margin-top: 30px;
background-color: rgb(244, 164, 150);
}
#menu-mainmenu,
#menu-mainmenu2,
#primary-navigation-left, #primary-navigation-right{
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
#menu-mainmenu2 a, #menu-mainmenu a{
display:block;
width: 100%;
padding: 20px;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
#menu-mainmenu2 a:hover, #menu-mainmenu a:hover{
color: #fff;
}
.toggle-menu{
display: block;
background: #288B8E;
width: 50px;
height: 50px;
padding: 13px 10px;
border-radius: 3px;
}
.toggle-menu-inner{
position: relative;
width: 100%;
height: 100%;
}
.close{
background: #288B8E;
width: 50px;
height: 50px;
padding: 12px 10px;
z-index: 1000;
}
.scrolled #masthead .primary-navigation-wrapper,
.primary-navigation-wrapper{
display: none;
position: fixed;
width: 100%;
height: 100vh;
background: #288B8E;
top: 0px;
width: 400px;
right: 0px;
padding: 20px 30px 20px 30px;
animation:inherit;
align-items: flex-start;
flex-direction: column;
}
.primary-navigation-wrapper #logo{
display: none;
}
#menu-mainmenu2, #menu-mainmenu{
display: block;
width: 100%;
}
#menu-mainmenu2 li, 
#menu-mainmenu li{
display: block;
width: 100%;
}
}
@media(max-width: 1000px){
section.contactinfobox.textundblocks-box .tub_blocks_wrapper{
display: block;
}
section.contactinfobox.textundblocks-box .tub_blocks_wrapper .item{
width: 100%;
margin-bottom: 20px;
}
section.contactinfobox.textundblocks-box .tub_blocks_wrapper .item .item-content{
width: 100%;
}
}
@media(max-width: 920px){
.aktuelles-box .text{
width: 100%; 
padding-left: 0px;
}
.aktuelles-box .image{
width: 100%; 
margin-bottom: 20px !important;
}
.aktuelles-box .section-content .content{
padding-left: 40px !important;
padding-right: 40px !important;
}
.aktuelles-box .content {
max-width: 650px;
}
.swiper-button-prev, .swiper-button-next{
width: 30px;
height: 30px;
}
.contactform-help span[data-name="your-phone"]:before, 
.contactform-help span[data-name="your-company"]:before, 
.contactform-help span[data-name="your-name"]:before, 
.contactform-help span[data-name="your-email"]:before, 
.contactform-help span[data-name="your-message"]:before{
width: 35px;
height: 35px;
}
.contactform-help h2 .titel{
-webkit-text-stroke-width: 0.5px;
}
.contactform-help textarea, 
.contactform-help input[type="tel"], 
.contactform-help input[type="text"], 
.contactform-help input[type="email"]{
padding-top: 10px;
padding-bottom: 10px;
}
.servicedescription_header img{
width: 100% !important;
display: block !important; 
}
.servicedescription_header .servicedescription_text{
padding-top: 0px;
padding-left: 0px;
}
.single-leistungen-nav ul li:nth-child(1) strong{
font-size: 15px;
}
.single-leistungen-nav ul li:nth-child(2) strong, 
.single-leistungen-nav ul li:nth-child(3) strong, 
.single-leistungen-nav ul li:nth-child(4) strong{
padding: 10px 15px;
width: calc(100% - 100px);
font-size: 15px;
}
.single-leistungen-nav ul li:nth-child(2):hover img,
.single-leistungen-nav ul li:nth-child(3):hover img,
.single-leistungen-nav ul li:nth-child(4):hover img{
width: 80px;
}
}
@media(max-width: 768px){
.diensleistung-box .nummer{
width: 60px;
}
.diensleistung-box .textwrapper {
width: calc(50% - 30px);
}
.diensleistung-box .boxspacer {
width: calc(50% - 30px);
}
.section-content{
padding-left: 40px;
padding-right: 40px;
}
.scrolled #masthead .primary-navigation-wrapper, .primary-navigation-wrapper{
width: 100%;
}
.swiper-button-prev{
left: 0px;
}
.swiper-button-next{
right: 0px;
}
.single-leistungen-nav ul li:nth-child(2) img, .single-leistungen-nav ul li:nth-child(3) img, .single-leistungen-nav ul li:nth-child(4) img{
width: 100px;
height: 100px;
}
.flex_block_columns.columns_2 li,
.flex_block_columns.columns_3 li,
.flex_block_columns.columns_4 li,
.flex_block_columns.columns_5 li,
.flex_block_columns.columns_6 li{
width: 100%;
}
.h1title{
text-align: center;
max-width: 400px;
margin: auto auto;
margin-bottom: 0px;
padding-bottom: 50px;
}
.exzellenteswebdesign {
padding-top: 40px;
}
.dienstleistungbox .section-content{
max-width: 500px;
margin: auto auto;
}
.dienstleistungbox .section-content h3,
.dienstleistungbox .section-content .text{
text-align: center;
}
.contactform-help span[data-name="your-company"]:before, 
.contactform-help span[data-name="your-phone"]:before, 
.contactform-help span[data-name="your-name"]:before, 
.contactform-help span[data-name="your-email"]:before, 
.contactform-help span[data-name="your-message"]:before{
width: 40px;
height: 40px;
}
.contactform-help span[data-name="your-phone"]:before, 
.contactform-help span[data-name="your-company"]:before, 
.contactform-help span[data-name="your-name"]:before, 
.contactform-help span[data-name="your-email"]:before, 
.contactform-help span[data-name="your-message"]:before{
top: 0px;
left: 0;
}
.contactform-help textarea, 
.contactform-help input[type="text"], 
.contactform-help input[type="tel"], 
.contactform-help input[type="email"]{
padding-left: 70px;
}
.kontaktformular-box form .width100{
margin-bottom: 0px;
}
.exzellenteswebdesign .text-content{
max-width: 500px;
margin: auto auto;
text-align: center;
}
.projektheader_titel h1{
font-size: 35px;
}
.marquee .contItem{
padding: 15px;
}
}
@media(max-width: 720px){
.contactinfobox .titel br{
display: block;
}
.contactinfobox .titel{
font-size: 120px;
}
.textundblocks-box .tub_blocks_text .titlecontent{
margin-bottom: -40px;
}
}
@media(max-width: 700px){
.button-right .item-content.box .text-content{
padding-right: 0px;
}
.button-right .item-content.box .text-content .text-detail{
width: 100%;
display: block;
padding-top: 6px;
padding-bottom: 7px;
}
.button-right .item-content.box .text-content .moretext_button{
position: relative;
right: inherit;
top: inherit;
}
}
@media (hover: hover) {
#primary-navigation ul li a:hover{
color:  #FF6700;
text-shadow: none;
animation-duration: 0.5s;
animation-name: hoverLetter;
-webkit-text-stroke: 0px;
color: #FF6700;
}
#primary-navigation ul li a:hover {
color: #D82A64;
text-shadow: none;
color: rgba(0,0,0,0);
}
#primary-navigation ul li li a:hover {
color: #fff;
}
}
@media(max-width: 650px){
.diensleistung-box .item-content{
display: block;
}
form .width50{
width: calc(100% - 30px);
}
.diensleistung-box .nummer{
width: 2px;
height: 50px;
background: #278B8E;
display: block; 
margin: auto auto;
margin-top: 20px;
margin-bottom: 20px;
}
.diensleistung-box .textwrapper{
width: 100%;
text-align: center;
}
.diensleistung-box  .text-content{
text-align: center;
}
.diensleistung-box .image img{
margin: auto auto;
}
}
@media(max-width: 550px){
.section-content{
padding-left: 35px;
padding-right: 35px;
}
}
@media(max-width: 480px){
.button-right.spalten-mit-icon-box .image{
width: 100%;
padding-bottom: 20px;
} 
.button-right.spalten-mit-icon-box .image img{
width: 70px;
margin: auto auto;
} 
.button-right.spalten-mit-icon-box .text-content{
justify-content: center;
}
.button-right .item-content.box .text-content .preis{
flex-grow: inherit;
min-width: 70px;
}
.button-right.spalten-mit-icon-box .text{
width: 100%;
padding-left: 0px;
text-align: center;
}
#colophon .content{
padding-left: 20px;
padding-right: 20px;
}
.header-box .text-wrapper{
padding-top: 130px;
}
.section-content{
padding-left: 25px;
padding-right: 25px;
}
.must-have-box .item-content .text .text-content{
padding: 30px;
}
.must-have-box .item-content .text{
width: calc(100% - 48px) !important;
}
.textundblocks-box .tub_blocks_wrapper a{
background-position: right 15px;
}
.textundblocks-box .tub_blocks_wrapper .item{
padding: 30px;
}
.textundblocks-box .tub_blocks_wrapper .item .image{
max-width: 50px;
margin-bottom: 10px;
}
.textundblocks-box .tub_blocks_wrapper .item .spalten-titel{
font-size: 30px;
}
.textundblocks-box .tub_blocks_wrapper .item .text-detail{
font-size: 20px;
}
.contactinfobox .titel{
font-size: 100px;
}
.textundblocks-box .tub_blocks_text .titlecontent{
margin-bottom: -32px;
}
#primary-navigation .toggle-subemenu{
top: 30px;
margin-left: 0px;
}
.single-referenzbilder-nav .text .text-content strong{
hyphens: auto;
}
.gridgalerie-box .image-wrapper .image:first-child{
padding-top: 150%;
}
.gridgalerie-box .image-wrapper .image:nth-child(4){
padding-top: 50%;
}
.galerie-box.bunnyimage .spaltenbild{
padding-top: 100% !important;
}
.nav-logo,
#logo{
padding-left: 5px;
width: 60px;
}
.close,
.toggle-menu{
top: 10px;
right: 10px;
}
#primary-navigation ul li  a{
font-size: 60px !important;
}
#primary-navigation ul li li a{
font-size: 22px !important;
letter-spacing: 1px !important;
}
.primary-navigation-call{
font-size: 14px;
letter-spacing: 1px;
}
.marquee .contItem{
padding: 10px;
}
.primary-navigation-wrapper{
padding-top: 55px;
}
}
@media(max-width: 420px){
#primary-navigation ul li a{
font-size: 50px !important;
}
#primary-navigation ul li li a{
font-size: 18px !important;
}
.primary-navigation-wrapper{
padding-left: 20px;
padding-right: 20px;
}
#primary-navigation .toggle-subemenu{
width: 20px;
height: 20px;
}
}
@media(max-width: 380px){
#colophon .content{
display: block;
}
#colophon #footer-navigation{
margin-bottom: 12px;
}
#colophon #socialmedia-footer-box{
justify-content: center;
}
}
@media(max-width: 350px){
#primary-navigation ul li a{
font-size: 40px;
padding-top: 18px;
padding-bottom: 18px;
}
} .booking-modal {
display: none;
position: fixed !important;
z-index: 2147483647 !important;
inset: 0 !important;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.65);
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
}
.booking-modal.is-open {
display: flex !important;
}
.booking-modal-content {
position: relative;
z-index: 1;
background: #fff;
width: 100%;
height: calc(100% - 20px);
max-width: 800px;
padding: 40px;
border-radius: 10px;
box-sizing: border-box;
}
.booking-modal-text{
overflow-y: auto;
overflow-x: hidden;
height: calc(100% - 60px);
margin-bottom: 20px;
}
body.booking-modal-open {
overflow: hidden;
}
.booking-modal-content h2 {
margin-top: 0;
}
.booking-modal-close {
position: absolute;
top: 10px;
right: 15px;
border: 0;
background: transparent;
font-size: 32px;
line-height: 1;
cursor: pointer;
}
#booking-confirm {
margin-top: 20px;
padding: 14px 22px;
border: 0;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
a.booking-popup{
background-color: #278B8E;
padding: 13px 25px 13px 22px;
border-radius: 999px;
text-shadow: none !important;
display: flex;
position: relative;
box-shadow: 3px 3px #F4A597;
font-weight: 400;
color: #fff;
margin-left: 25px;
font-family: Open Sans;
font-size: 20px;
transition: all 0.3s;
text-transform: uppercase;
font-family: Open Sans;
letter-spacing: 1px;
max-width: 270px;
margin: auto auto;
justify-content: center;
}
a.booking-popup:before{
content: "";
width: 24px;
height: 24px;
display: block;
background: pink;
margin-right: 15px;
background: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/icon-booking.svg) no-repeat;
background-size: contain;
}
button#booking-confirm{
display: block;
background-color: #278B8E;
padding: 10px 20px 10px 17px;
border-radius: 999px;
text-shadow: none !important;
display: flex;
position: relative;
box-shadow: 3px 3px #F4A597;
font-weight: 400;
color: #fff;
margin-left: 25px;
font-family: Open Sans;
font-size: 14px;
transition: all 0.3s;
text-transform: uppercase;
font-family: Open Sans;
letter-spacing: 1px;
margin: auto auto;
justify-content: center;
}
button#booking-confirm:before{
content: "";
width: 20px;
height: 20px;
display: block;
background: pink;
margin-right: 15px;
background: url(//kerambia.de/wp-content/themes/flexawesomebygalano/images/icon-booking.svg) no-repeat;
background-size: contain;
}
a.booking-popup:hover,
button#booking-confirm:hover{
background-color: #F4A597;
box-shadow: 3px 3px #278B8E;
}
@media (max-width: 600px) {
.booking-modal-content {
padding: 30px 20px;
}
}