body{
    font-family: inria-sans;
}
.table-text-align {
	max-width: 11rem;
	text-align: end;
}
.font-bold{
    font-weight: bold;
}

.font-light{
    font-weight: lighter;
}

.modal-dialog-centered {
    display: block;
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
pointer-events:none;
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
pointer-events:none;
}
.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:inherit;
height:inherit;
/* To center horizontally */
margin: 0 auto;
pointer-events:all;
}

.color-navy{
    color: #033142;
}

.color-turq{
    color: #14adbd;
}

.bg-navy{
    background-color: #033142;
}

.bg-turq{
    background-color: #14adbd;   
}
.mt-landing {
    position: absolute;
    width: 100%;
    bottom: 5vh;
}

@font-face {
    font-family: inria-sans;
    src: url(Fonts/InriaSans-Regular.ttf);
}

@font-face {
    font-family: inria-sans;
    src: url(Fonts/InriaSans-Bold.ttf);
	font-weight: bold;
}

@font-face {
    font-family: inria-sans;
    src: url(Fonts/InriaSans-Light.ttf);
	font-weight: lighter;
}

.bg-bild {
	display:flex; 
	flex-direction:column;
	min-height: 100vh;
    background-position: center center;
    background-repeat: no-repeat;	
	background-size: cover;	
}

.bg-transpweiss {
    background-color: rgba(255,255,255,0.9);
}

@keyframes move {
	0% {
		background-position: left center;
	}
	100% {
		background-position: right center;
	}
}

.mb-5{
	margin-bottom: 5rem;	
}
.mb-3{
    margin-bottom: 3vw;
}
.mt-3{
    margin-top: 3vw;
}
.mb-15{
	margin-bottom: 15rem;	
}
.mb-35{
	margin-bottom: 35vh;	
}

.mt-15{
	margin-top: 15rem;	
}

.nav-link {
	color: #14adbd;
}

.bg-weiss {
	background: rgba(0,0,0,0);
}
.bg-grau {
	background: rgba(0,0,0,0.65);
	color: white;
}

.dropdown-menu-style {
        right:4vw !important;
        background: rgba(255,255,255,0.7);
    }

    @media (max-width: 576px){
        .dropdown-menu-style {
            background: rgba(255,255,255,0.9);
        }

    .info-text {
        display: flex;
        justify-content: center;
    }
    .info-text-start {
        display: flex;
        justify-content: center;
    }
}

    .navi {
        color: #000000;
        font-size: 3em;
    }

    #scrolling-container {
        scroll-behavior: smooth;
        overflow-Y: scroll;
    }

@media screen and (min-width: 1201px) {
	h1 {
		font-size:3.5em;
		text-align:center;
	}
	h2 {
		font-size:3em;
		text-align:center;
	}
	h3 {
		font-size:2.5em;
	}
	h4 {
		font-size:1.5em;
	}
	
	.bg-bild {
		animation: move infinite alternate ease-in-out 12s;
	}
	.info-text {
		height: 20vh;
	}
	.info-text-start {
		height: 20vh;
	}
	.mt-vh {
		margin-top: 3vh;
	}
	.mt-vh2 {
		margin-top: 2.5vh;
	}
    .circle-sell{
        width: 20vw;
        height: 20vw;
        position: relative;
        left: 77vw;
    }
    .margin-circle-sell{
        margin-top: -10vw;
    }
    .circle-header {
        font-size: 3vw;
    }
    .circle-content {
        font-size: 2vw;
    }
    .circle-text-margin {
        margin-top: -1vw;
    }
    .pricelist-header{
        text-align: center;
    }
    .pricelist-content{
        text-align: center;
    }
    .pricelist-font-size{
        font-size: 2vw;
    }
    .cat-align{
        text-align: center;
    }
    .res-content{
        text-align: center;
        font-size: 3vw;
    }
    .res-icon{
        height: 3vw;
    }
    .phone-icon{
        height: 3vw;
    }    
    .phone-number{
        font-size: 2vw;
    }
    
    .btn-spotify {
        font-size: 2.5vw;
        text-align: center;
    }
    .btn-spotify-icon {
        margin-top: -1.3vw;
        font-size:4vw;
        text-align: center;
        position: relative;
        left: 2vw;
    }
    .btn-sifly {
        font-size: 2.5vw;
        text-align: center;
    }
    .btn-soko {
        font-size: 2.5vw;
        text-align: center;
    }
    .services-font {
        font-size: 2.5vw;
    }
    .services-header {
        font-size: 3.5vw;
    }
    .palme-background{
    background-image: url('img/Bastis_Strandkoerbe_2023_Palme_rechts.png');
    background-size: 50vw;
    background-repeat: no-repeat;
    background-position: center;
    
    }
    .mt-landing {
        #position: relative;
        #top: 20vw;
    }
    .bubble-modal {
        border-radius: 50%;
        width: auto;
        height: 600px;
        max-width: 600px;
    }
    .img-sifoil-size {
        width: 40vw;
        height: auto;
    }
    .close-btn {
        position: absolute;
        right: 30vw;
        font-size: 1.5em;
    }
    .button-link {
        width: 30vw;
    }
	.banner-schlafstrand {
		position: relative;
		width: 32em;
		background-color: #e6007e;
		color: #ffffff;
		rotate: -15deg;
		font-size: 0.6em;
		left: -2em;
	}
	.row-banner-schlafstrand {
		position: absolute;
		width: 100%;
		margin: 0;
		bottom: 16em;
	}
	.button-strandschlafen {
		max-width: 8em;
		height: auto;
	}
	.start-strandschlafen {
		bottom: 8em;
	}
	.start-banner {
		bottom: 1.5em;
	}
	.logo {
		max-width: 40vh;
		height: auto;
	}
}

@media screen and (max-width: 1200px) {
	h1 {
		font-size:3.5em;
		text-align:center;
	}
	h2 {
		font-size:3em;
		text-align:center;
	}
	h3 {
		font-size:2.5em;
	}
	h4 {
		font-size:1.5em;
	}
	
	.bg-bild {
		animation: move infinite alternate ease-in-out 12s;
	}
	.info-text {
		height: 20vh;
	}
	.info-text-start {
		height: 20vh;
	}
	.mt-vh {
		margin-top: 3vh;
	}
	.mt-vh2 {
		margin-top: 2.5vh;
	}
    .circle-sell{
        width: 22vw;
        height: 22vw;
        position: relative;
        left: 74vw;
    }
    .margin-circle-sell{
        margin-top: -15vw;
    }
    .circle-header {
        font-size: 3.5vw;
    }
    .circle-content {
        font-size: 2.4vw;
    }
    .circle-text-margin {
        margin-top: -2vw;
    }
    .pricelist-header{
        text-align: center;
    }
    .pricelist-content{
        text-align: center;
    }
    .pricelist-font-size{
        font-size: 2vw;
    }
    .cat-align{
        text-align: center;
    }
    .res-content{
        text-align: center;
        font-size: 3vw;
    }
    .res-icon{
        height: 3vw;
    }
    .phone-icon{
        height: 3vw;
    }    
    .phone-number{
        font-size: 2vw;
    }
    
    .btn-spotify {
        font-size: 2.5vw;
        text-align: center;
    }
    .btn-spotify-icon {
        margin-top: -1.4vw;
        font-size:4vw;
        text-align: center;
        position: relative;
        left: 1vw;
    }
    .btn-sifly {
        font-size: 2.5vw;
        text-align: center;
    }
    .btn-soko {
        font-size: 2.5vw;
        text-align: center;
    }
    .services-font {
        font-size: 3.5vw;
    }
    .services-header {
        font-size: 4.5vw;
    }
    .palme-background{
    background-image: url('img/Bastis_Strandkoerbe_2023_Palme_rechts.png');
    background-size: 70vw;
    background-repeat: no-repeat;
    background-position: center;
    
    }
    .mt-landing {
        #position: relative;
        #top: 350px;
    }
    .bubble-modal {
        border-radius: 50%;
        width: auto;
        height: auto;
        max-width: 600px;
    }
    .img-sifoil-size {
        width: 50vw;
        height: auto;
    }
    .close-btn {
        position: absolute;
        right: 25vw;
        font-size: 1.5em;
    }
    .button-link {
        width: 35vw;
    }
	.banner-schlafstrand {
		position: relative;
		width: 32em;
		background-color: #e6007e;
		color: #ffffff;
		rotate: -15deg;
		font-size: 0.6em;
		left: -2em;
	}
	.row-banner-schlafstrand {
		position: absolute;
		width: 100%;
		margin: 0;
		bottom: 16em;
	}
	.button-strandschlafen {
		max-width: 8em;
		height: auto;
	}
	.start-strandschlafen {
		bottom: 8em;
	}
	.start-banner {
		bottom: 1.5em;
	}
	.logo {
		max-width: 40vh;
		height: auto;
	}
}

@media screen and (max-width: 992px) {
	h1 {
		font-size:3.5em;
		text-align:center;
	}
	h2 {
		font-size:3em;
		text-align:center;
	}
	h3 {
		font-size:2.5em;
	}
	h4 {
		font-size:1.5em;
	}
	
	.bg-bild {
		animation: move infinite alternate ease-in-out 12s;
	}
	.info-text {
		height: 20vh;
	}
	.info-text-start {
		height: 20vh;
	}
	.mt-vh {
		margin-top: 3vh;
	}
	.mt-vh2 {
		margin-top: 2.5vh;
	}
    .circle-sell{
        width: 22vw;
        height: 22vw;
        position: relative;
        left: 74vw;
    }
    .margin-circle-sell{
        margin-top: -15vw;
    }
    .circle-header {
        font-size: 3.5vw;
    }
    .circle-content {
        font-size: 2.4vw;
    }
    .circle-text-margin {
        margin-top: -2vw;
    }
    .pricelist-header{
        text-align: center;
    }
    .pricelist-content{
        text-align: center;
    }
    .pricelist-font-size{
        font-size: 2vw;
    }
    .cat-align{
        text-align: center;
    }
    .res-content{
        text-align: center;
        font-size: 3vw;
    }
    .res-icon{
        height: 3vw;
    }
    .phone-icon{
        height: 3vw;
    }    
    .phone-number{
        font-size: 2vw;
    }
    .btn-spotify {
        font-size: 3vw;
        text-align: center;
    }
    .btn-spotify-icon {
        margin-top: -2vw;
        font-size:6vw;
        text-align: center;
        /*position: relative;
        left: 2vw;*/
    }
    .btn-sifly {
        font-size: 3vw;
        text-align: center;
    }
    .btn-soko {
        font-size: 3vw;
        text-align: center;
    }
    .services-font {
        font-size: 3.5vw;
    }
    .services-header {
        font-size: 4.5vw;
    }
    .palme-background{
    background-image: url('img/Bastis_Strandkoerbe_2023_Palme_rechts.png');
    background-size: 75vw;
    background-repeat: no-repeat;
    background-position: center;
    
    }
    .mt-landing {
        #position: relative;
        #top: 400px;
    }
    .bubble-modal {
        border-radius: 50%;
        width: auto;
        height: auto;
        max-width: 600px;
    }
    .img-sifoil-size {
        width: 60vw;
        height: auto;
    }
    .close-btn {
        position: absolute;
        right: 20vw;
        font-size: 1.5em;
    }
    .button-link {
        width: 45vw;
    }
	.banner-schlafstrand {
		position: relative;
		width: 32em;
		background-color: #e6007e;
		color: #ffffff;
		rotate: -15deg;
		font-size: 0.5em;
		left: -1em;
	}
	.row-banner-schlafstrand {
		position: absolute;
		width: 100%;
		margin: 0;
		bottom: 15em;
	}
	.button-strandschlafen {
		max-width: 7em;
		height: auto;
	}
	.start-strandschlafen {
		bottom: 8em;
	}
	.start-banner {
		bottom: 1.5em;
	}
	.logo {
		max-width: 40vh;
		height: auto;
	}
}

@media screen and (max-width: 768px) {
	h1 {
		font-size:2.5em;
		text-align:center;
	}
	h2 {
		font-size:2.5em;
		text-align:center;
	}
	h3 {
		font-size:2em;
	}
	h4 {
		font-size:1.2em;
	}
	
	.bg-bild {
		animation: move infinite alternate ease-in-out 18s;
	}

	.info-text {
		height: 25vh;
	}
	.info-text-start {
		height: 25vh;
	}
	.mt-vh {
		margin-top: 3vh;
	}
	.mt-vh2 {
		margin-top: 2.5vh;
	}
    .circle-sell{
        width: 22vw;
        height: 22vw;
        position: relative;
        left: 74vw;
    }
    .margin-circle-sell{
        margin-top: -15vw;
    }
    .circle-header {
        font-size: 3.5vw;
    }
    .circle-content {
        font-size: 2.4vw;
    }
    .circle-text-margin {
        margin-top: -3vw;
    }
    .pricelist-header{
        text-align: center;
    }
    .pricelist-content{
        text-align: center;
    }
    .pricelist-font-size{
        font-size: 4vw;
    }
    .cat-align{
        text-align: left;
    }
    .res-content{
        text-align: center;
    }
    .res-icon{
        height: 3vw;
    }
    .phone-icon{
        height: 7vw;
    }
    .phone-number{
        font-size: 4vw;
    }
    .btn-spotify {
        font-size: 3vw;
        text-align: center;
    }
    .btn-spotify-icon {
        margin-top: 0vw;
        font-size: 6vw;
        text-align: center;
        /*position: relative;
        left: 2vw;*/
    }
    .btn-sifly {
        font-size: 3vw;
        text-align: center;
    }
    .btn-soko {
        font-size: 3vw;
        text-align: center;
    }
    .services-font {
        font-size: 4vw;
    }
    .services-header {
        font-size: 5vw;
    }
    .palme-background{
    background-image: url('img/Bastis_Strandkoerbe_2023_Palme_rechts.png');
    background-size: 85vw;
    background-repeat: no-repeat;
    background-position: center;
    
    }
    .mt-landing {
        #position: relative;
        #top: 500px;
    }
    .bubble-modal {
        border-radius: 50%;
        width: auto;
        height: auto;
    }
    .img-sifoil-size {
        width: 90vw;
        height: auto;
    }
    .close-btn {
        position: absolute;
        right: 5vw;
        font-size: 1.5em;
    }
    .button-link {
        width: 65vw;
    }
	.banner-schlafstrand {
		position: relative;
		width: 26em;
		background-color: #e6007e;
		color: #ffffff;
		rotate: -15deg;
		font-size: 0.7em;
		left: -1em;
	}
	.row-banner-schlafstrand {
		position: absolute;
		width: 100%;
		margin: 0;
		bottom: 12.9em;
	}
	.button-strandschlafen {
		max-width: 7em;
		height: auto;
	}
	.start-strandschlafen {
		bottom: 6em;
	}
	.start-banner {
		bottom: 1.5em;
	}
	.logo {
		max-width: 40vh;
		height: auto;
	}
}

@media screen and (max-width: 576px) {
	h1 {
		font-size:2em;
		text-align:center;
	}
	h2 {
		font-size:2em;
		text-align:center;
	}	
	h3 {
		font-size:1.5em;
	}
	h4 {
		font-size:1em;
	}
	
	.bg-bild {
		animation: move infinite alternate ease-in-out 24s;
	}

	.info-text {
		height: 50vh;
	}
	.info-text-start {
		height: 30vh;
	}    
	.mt-vh {
		margin-top: 5vh;
	}
	.mt-vh2 {
		margin-top: 1vh;
	}
    .circle-sell {
        width: 25vw;
        height: 25vw;
        position: relative;
        left: 73vw;
    }
    .margin-circle-sell {
        margin-top: -18vw;
    }
    .circle-header {
        font-size: 4vw;
    }
    .circle-content {
        font-size: 2.3vw;
    }
    .circle-text-margin {
        margin-top: -4vw;
    }
    .pricelist-header {
        text-align: center;
        font-size: 4vw;
        margin-top: 0vw;
    }
    .pricelist-content {
        text-align: center;
        font-size: 5vw;
        margin-bottom: 1vw;
        margin-left: 1.5vw;
        vertical-align: top
    }
    .pricelist-font-size {
        font-size: 4vw;
    }
    .res-content {
        text-align: center;
    }
    .res-icon{
        height: 4vw;
    }
    .cat-align {
        text-align: center;
    }
    .phone-icon {
        height: 8vw;
    }    
    .phone-number {
        font-size: 5vw;
    }
    .btn-spotify {
        font-size: 4.5vw;
        text-align: center;
    }
    .btn-spotify-icon {
        margin-top: -3vw;
        font-size:6vw;
        text-align: center;
        /*position: relative;
        left: 2vw;*/
    }
    .btn-sifly {
        font-size: 4.5vw;
        text-align: center;
    }
    .align-sifly {
        text-align: center;
    }
    .btn-soko {
        font-size: 4.5vw;
        text-align: center;
    }
    .services-font {
        font-size: 5vw;
    }
    .services-header {
        font-size: 6vw;
    }
    .palme-background {
    background-image: url('img/Bastis_Strandkoerbe_2023_Palme_rechts.png');
    background-size: 85vw;
    background-repeat: no-repeat;
    background-position: center;
    }
    .slides-cont-size {
        margin-bottom: -5vw;
    }
    .slides-size {
        width: 100%;
        height: auto;
    }
    .mt-landing {
        #position: relative;
        #top: 500px;
    }
    .bubble-modal {
        border-radius: 50%;
        width: auto;
        height: auto;
    }
    .img-sifoil-size {
        width: 90vw;
        height: auto;
    }
    .close-btn {
        position: absolute;
        right: 5vw;
        font-size: 1.2em;
    }
    .button-link {
        width: 65vw;
    }
	.banner-schlafstrand {
		position: relative;
		width: 21em;
		background-color: #e6007e;
		color: #ffffff;
		rotate: -15deg;
		font-size: 0.8em;
		left: -1em;
	}
	.row-banner-schlafstrand {
		position: absolute;
		width: 100%;
		margin: 0;
		bottom: 12.9em;
	}
	.button-strandschlafen {
		max-width: 7em;
		height: auto;
	}
	.start-strandschlafen {
		bottom: 6em;
	}
	.start-banner {
		bottom: 1.5em;
	}
	.logo {
		max-width: 40vh;
		height: auto;
	}
}

@media screen and (max-width: 432px) {
	.start-strandschlafen {
		bottom: 8em;
	}
	.banner-schlafstrand {
		position: relative;
		width: 21em;
		background-color: #e6007e;
		color: #ffffff;
		rotate: -15deg;
		font-size: 0.8em;
		left: -1em;
	}
	.row-banner-schlafstrand {
		position: absolute;
		width: 100%;
		margin: 0;
		bottom: 14.9em;
	}
}

@media screen and (max-width: 320px) {
    h2 {
		font-size:1.5em;
		text-align:center;
	}
	.res-content{
        text-align: center;
        font-size: 5vw;
    }
    .res-icon{
        height: 4vw;
    }
	.banner-schlafstrand {
		position: relative;
		width: 17em;
		background-color: #e6007e;
		color: #ffffff;
		rotate: -15deg;
		font-size: 0.8em;
		left: -1em;
	}
	.row-banner-schlafstrand {
		position: absolute;
		width: 100%;
		margin: 0;
		bottom: 14.8em;
	}
	.button-strandschlafen {
		max-width: 7em;
		height: auto;
	}
	.start-strandschlafen {
		bottom: 8em;
	}
	.start-banner {
		bottom: 1.5em;
	}
	.logo {
		max-width: 40vh;
		height: auto;
	}
}