@charset "utf-8";
/* CSS Document */
/*
Theme Name: Blisss Onepager
Author: networkerz gmbh
Author URI: https://networkerz.de/
Description: main css
Version: 1.0
License: private
License URI: https://www.networkerz.de
*/
/* font-faces */
/* suisse-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'suisse';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Suisse_BP_Intl_Regular.otf') format('otf'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* suisse-bold - latin */
@font-face {
  font-display: swap; 
  font-family: 'suisse';
  font-style: bold;
  font-weight: 600;
  src: url('fonts/Suisse_BP_Intl_Bold.otf') format('otf'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

* {
	 margin: 0; padding: 0;
	 box-sizing: border-box;
	 }

html, body {
	font-family: 'Barlow', sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size:18px;
	line-height: 28px;
	line-height: 1.45;
	margin:0px;
	padding:0px;
}
strong {
	font-weight:600;
}
 p, main p a {
    font-size:2.25rem;
    line-height:1.2;
    color:#980CE2;
   margin-bottom:30px;
  }
@media (max-width:1919px) {
  html,body {
    font-size:16px;
  }
}
@media (max-width:1439px) {
  html,body {
    font-size:14px;
  }
}
@media (max-width:1023px) {
  html,body {
    font-size:12px;
  }
}
@media (max-width:767px) {
  html,body {
    font-size:10px;
  }
}
@media (max-width:475px) {
  html,body {
    font-size:8px;
  }
}
/* @media (min-width:768px) {
  main p a, main p a:visited {
    text-decoration:none;
  }
  main p a:hover {
    text-decoration:underline;
  } 
} */
.main-wrap {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  height: auto;
}
.background {
  position: absolute;
  width: 100%;
  background: url('img/bild-mit-den-models-2.jpg') no-repeat;
  height: 100%; 
  background-size: auto 120%;
  background-position: 0 top;
}





@media (min-width:475px){
  .background {
    background-position: 10% top;
  }
}
@media (min-width:768px){
  .background {
  background-size: auto 100%;
  background-position: 0 top;
    }
}
@media (min-width:1024px) {
  .background {
  background-size: auto 100%;
    background-position: 35%;
    }
}
@media (min-width:1440px) {
  .background {
  background-size: 120% auto;
    background-position: top;
    }
  
}
@media (min-width:1920px) {
  .background {
  background-size: 110% auto;
    background-position: top;
    }
}
/* LOGO */
.logo {
  position: relative;
  width:20%;
  margin:0 auto;
  z-index: 2;
}
  .logo img {
    width: 100%;
    height: auto;
  }
/* CTA */
.cta {
  position: relative;
  position: relative;
  z-index: 10;
  width: 25%;
  margin: 5% auto 0;
}
  .cta img {
    width:100%;
    height:auto;
  }

/* TRANSPARENT OVERLAY TEXT */
.overlay-text {
  width: 100%;
  background: rgba(255,255,255,0.7);
  position: relative;
  z-index: 2;
  margin-top: -7%;
}
  .overlay-text .text-wrap {
    text-align:center;
    padding: 100px 10%;
  margin: 0 auto 0px auto;
  }
@media (max-width:1023px) {
  .overlay-text .text-wrap {
    padding: 50px;
  }
}
@media (max-width:767px) {
  .overlay-text .text-wrap {
    padding: 50px 30px;
  }
}
@media (max-width:474px){
  .logo, .cta {
    margin:0 60px 0 auto;
  }
}
/* FOOTER */
.footer {
 /* background: linear-gradient(180deg, #8a00ff, #c000ff);*/
  background-color:#A215ED;
  color: white;
  padding: 80px 20px 40px;
  text-align: center;
}

.footer-logo {
  margin-bottom: 40px;
}

.footer-logo-placeholder {
  width: 160px;
  height: 60px;
  border: 2px dashed white;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SOCIALS */
.socials {
  margin: 30px 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.socials div {
  width: 30px;
  height: 30px;
  border: 1px solid white;
}

/* FOOTER BOTTOM */
.footer-bottom {
  margin-top: 40px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
