/*   --------------------------------------------  */
/*   customizing css styles based on bootstrap 4   */
/*   written by karsten bremer - bremersystems.eu  */
/*   --------------------------------------------  */
/*              the hungarian beast                */
/*   --------------------------------------------  */



/* global settings */

html {
	-webkit-overflow-scrolling: touch;
}

html,
body {
	width: 100%;
	height: 100%;
	overflow-x: hidden !important;
}
body {
	font-size: 14px;
	overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
	font-family: 'Open Sans' !important;
}
h1,
h2 {
	font-size: 2.357rem;
}

.BS-h2 {
    font-size: 1.5rem;
    font-weight: 600;
}


.BS-h1 {
    font-weight:900;
}

p,
ul,
li,
a {
	font-weight: 300 !important;
	letter-spacing: 0.05rem;
	text-decoration: none;
	line-height:2;
	font-size: 1rem;
}


a:hover {text-decoration: none; }

.weight100 {
	font-weight: 100 !important;
}
.weight200 {
	font-weight: 200  !important;
}
.weight300 {
	font-weight: 300  !important;
}
.weight400 {
	font-weight: 400  !important;
}
.weight500 {
	font-weight: 500 !important;
}
.weight600 {
	font-weight: 600 !important;
}
.weight700 {
	font-weight: 700  !important;
}
.weight800 {
	font-weight: 800  !important;
}
.weight900 {
	font-weight: 900 !important;
}
.mr10 {
	margin-right: 10px;
}
.mt350 {
	margin-top: 350px;
}
.mt300 {
	margin-top: 300px;
}
.mt100 {
	margin-top: 100px;
}
/* define sections */

/* define buttons */

.btn {border-radius: 0px; font-weight: 600; letter-spacing: 0.05rem;}
.btn-dark {background: black;}


.BSborder {border: 1px solid #242424 !important;}

hr {border-top: 1px solid #242424 !important;}


.sec-content { 
    margin-top:8rem;
}

.sec-black {
	background: #242424;
	color: white;
}
.sec-black:after {
	content: url(../img/triangle-black.svg);
	position: relative;
	top: 40px;
	left: 10px;
}



.sec-white {
	background: white;
	color: black;
}
.sec-white:after {
	content: url(../img/triangle-white.svg);
	position: relative;
	top: 40px;
	left: calc(100% - 70px);
}
.sec-white-end {
	background: white;
	color: black;
}
/*  define sticky header */

header {
	position: fixed;
	width: 100%;
	background: #242424;
	z-index: 20;
}
/* define top navbar */

ul#TopNav>li {
	width: auto;
	display: table;
	margin: 0.5rem 0;
}
ul#TopNav li.nav-item.nav-link {
	display: block;
	padding: 0;
	margin: 0.5rem auto;
	font-weight: 900;
}
ul#TopNav>li>a {
	color: white;
	padding: 0px;
	margin: 0.5rem;
}
ul#TopNav>li>a.active {
	background: white;
	color: black;
	font-weight: 900;
	padding: 0px 3px;
}
/* define language toggler dropdown */

.BS-toggle-Down {
	position: relative;
	top: 2px;
	left: 4px;
}
.dropdown-toggle::after {
	display: none;
}
.navbar-toggler {
	border: 0px;
}
.BSdropdown {
	position: absolute;
	top: 20px;
	right: 70px;
}
.BSdropdownToggle {
	border: 0px;
	background: transparent;
}
.BSdropdownToggle:hover {
	border: 0px;
	background: transparent;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
	color: white;
	background: transparent;
	border-color: transparent;
}
.show>.btn-primary.dropdown-toggle:focus {
	box-shadow: none;
}
.BSdropdown-item {
	color: #000;
}
#BSlang {
	left: -40px !important;
	background: white;
	font-size: 14px;
	border-radius: 0px;
	min-width: auto;
	text-align: right;
}
/* image settings */


.rinsing-mockup {
	position: relative;
	margin-top: 30px;
	margin-bottom: -350px;
	z-index: 10;
}
.device {
	width: 105%;
	position: relative;
	left: 5%;
}
.storebuttons {
	width: 130px;
}
.profile-device {
	width: 110%;
	position: relative;
	left: -2%;
}
.isometric-device {
	width: 140%;
	margin: 3rem -25%;
}
.chat-device {
	width: 105%;
}
.duration-device {
	width: 110%;
	left: 5%;
	margin-bottom: -350px;
	position: relative;
	z-index: 10;
}
.likes-device {
	width: 105%;
}


/* footer settings */

footer {
	background: #242424;
	margin-bottom: -16px;
	padding: 40px 0px 50px 0px;
}
footer ul li a {
	color: white;
	font-weight: 300;
	font-size: 0.75rem;
}
footer ul li a:hover {
	color: white;
	text-decoration: none;
}
footer p {
	color: white;
}
footer ul {
	list-style-type: none;
}
.footer-links {
	padding: 0px;
	margin: auto;
	text-align: center;
}
.copyright {
	font-size: 0.75rem;
	text-align: center;
	position: relative;
	top: 30px;
}
.footer-links {
	position: relative;
	left: 5%;
}
/* Modal Settings */

.BSmodalBottomCloser {
    cursor: pointer;
    background: #242424;
    color: #fff;
    font-size: .75rem;
    padding: 3px 7px;
    position: absolute;
    top: 15px;
    right:15px;
}
.modal-content {
	border-radius: 0px;
}

/*  buttons */

a.btn.btn-dark.m-auto.BSdownload {display: table !important; padding:0.75rem 2rem; margin: auto;}

svg.svg-inline--fa.fa-image.fa-w-16.fig-caption-icon,
svg.svg-inline--fa.fa-file-archive.fa-w-12.fig-caption-icon {
	width:1.1rem;
	height:1.1rem;
	margin-right: 0.3rem;
	position: relative ;
	top:2px;
}


.figure-caption {
    font-size: 90%;
    color: #6c757d;
    display: table;
    padding: 0.5rem;
    margin:auto;
}

.float-right.BSfileFormat {
    font-size: 90%;
}


/* ----------------------------------- */
/*  Responsive Settings of Devices     */
/*  Set Media Queries of Responsives   */
/*  Acutally Device Settings of 2018   */
/* ----------------------------------- */

@media only screen and (min-width: 375px) {
	.storebuttons {
		width: 160px;
	}
	.footer-links {
		position: relative;
		left: 8%;
	}
}
/*  iphone 8 plus portraint*/

@media only screen and (min-width: 414px) {
	.footer-links {
		position: relative;
		left: 8%;
	}
}
/*  iphone 4 landscape */

@media only screen and (min-width: 480px) {


	.BS-screen-height {max-height: 138px;}
	

	.BSrow .col-sm-4 {max-width: 33% !important;}

	.col-sm-4 {
		max-width: 40%;
	}
	.col-sm-6 {
		max-width: 50%;
	}
	.col-sm-8 {
		max-width: 60%;
	}
	.rinsing-mockup {
		margin-top: 80px;
	}
	.sec-black:after {
		content: url(../img/triangle-black.svg);
		left: 20px;
	}
	.sec-white:after {
		left: calc(100% - 80px);
	}
	.storebuttons {
		width: 120px;
	}
	.flip-l-480 {
		position: relative;
		right: 50%;
	}
	.flip-r-480 {
		position: relative;
		left: 50%;
	}
	.weight900.mt350 {
		margin-top: 30%;
	}
	.profile-device {
		margin-top: 30%;
	}
	.isometric-device {
		width: 110%;
		margin: 3rem -10%;
		margin-bottom: -10px;
	}
	.chat-device {
		width: 105%;
		margin-top: 15%;
		position: relative;
		top: 15px;
	}
	.duration-device {
		width: 100%;
		left: 18%;
		margin-bottom: -50px;
		position: relative;
		z-index: 10;
		margin-top: 18%;
	}
	.weight900.mt300 {
		margin-top: 60px;
	}
	.likes-device {
		width: 105%;
		margin-top: 18%;
	}
	.BS-col-f1 {
		max-width: 80%;
		margin-left: 15%
	}
	.BS-col-f2 {
		max-width: 100%;
	}
	.footer-links {
		left: 3%;
	}

	.col-sm-6.BS-col-f1 {
		display: table !important;
	}
	
}
/*  iPphone SE landscape  */

@media only screen and (min-width: 568px) {

	.BS-screen-height {max-height: 190px;}
	.col-sm-6.BS-col-f1 {
		max-width: 100%;
		margin-left: 0;
	}
	.clearfix.fl2 {
		float: left;
		margin-left: 20px;
	}
	.float-left.mt-4.fl3 {
		margin-top: 0 !important;
		margin-left: 20px;
	}
	.mt-4.clearfix.fl4 {
		float: left;
		margin-top: 0 !important;
		margin-left: 20px;
	}

	.BSbuttonWrapper {
		max-width: 50%;
		margin: auto;
	}
}
/*  iPphone 8 landscape  */

@media only screen and (min-width: 667px) {

	.BS-screen-height {max-height: 173px;}
	.device {
		width: 135%;
		position: relative;
		left: 5%;
	}
	.dropdown.BSdropdown {
		right: 20%;
	}
	.storebuttons {
		width: 130px;
	}
	.TextChatting {
		width: 50%;
	}
	.isometric-device {
		margin-top: -30%;
		margin-left: 8%;
		width: 100%;
	}
	.TextChatting {
		position: relative;
		top: 40%;
	}
	.TextChatOverview {
		margin-top: 40%;
	}
	.duration-device {
		width: 110%;
		left: 10%;
		margin-bottom: -50px;
		position: relative;
		z-index: 10;
		margin-top: 18%;
	}
	.TextConversation {
		margin-top: 50%;
	}
	.TextLike {
		margin-top: 50%;
	}
	.footer-links {
		left: 0%;
	}
}
/*  iPphone 8 Plus landscape  */

/*  iPad  portrait */

@media only screen and (min-width: 768px) {
	.BS-screen-height {max-height: 279px;}
	.device {
		width: 145%;
		position: relative;
		left: 0%;
	}
	.dropdown.BSdropdown {
		right: 5%;
	}
	.weight900.mt100 {
		font-size: 3.438rem;
	}
	p {
		font-size: 1rem;
	}
	h2 {
		font-size: 3.438rem;
	}
	.isometric-device {
		margin-top: -20%;
	}
	.footer-links {
		margin: auto;
		display: table;
	}
	#TopNav {
		margin-left: calc(50% - 250px);
	}
	.storebuttons {
		width: 160px;
	}
	.TextChatting {
		position: relative;
		top: 45%;
	}
	.sec-black:after {
		content: url(../img/triangle-black.svg);
		left: 40px;
	}
	.sec-white:after {
		left: calc(100% - 100px);
    }
    
    .StoreButtons {
        margin-bottom: 10%;
    }
    .IntroBlock {
        margin-top: 30%;
    }
}

/* Range between 480 to 1024 */

@media only screen and (min-width: 480px) and (max-width: 1023px) {

	.BSfileType {float: none !important; display:block;}
	.BSfileFormat {float: none !important; display:block;}

}



/*  ipad landscape */

@media only screen and (min-width: 1024px) {

	.clearfix.BScopyrightWrapper {
		margin-top: -10px;
	}

	.BS-screen-height {max-height: 420px;}
	.sec-black:after {
		content: url(../img/triangle-black.svg);
		left: 50px;
	}
	.sec-white:after {
		left: calc(100% - 110px);
	}
	.mt-4.TextIntro {
		display: block;
		width: 90%;
		padding: 5px;
	}
	.device {
		width: 125%;
	}
	.ProfileBlock {
		padding: 13%;
		margin-top: 15%;
	}
	.isometric-device {
		margin-top: -10%;
		margin-left: 30%;
		width: 70%;
		margin-bottom: 5%
	}
	.duration-device {
		width: 80%;
		left: 15%;
		margin-bottom: -15%;
		position: relative;
		z-index: 10;
		margin-top: 10%;
	}
	.TextChatOverview {
		margin-top: 30%;
		padding: 10%;
	}
	.likes-device {
		width: 90%;
		margin-top: 18%;
	}
	.footer-links {
		margin: unset;
		display: unset;
	}
	.BS-col-f1 {
		max-width: 60%;
		margin-left: 0;
		float: left;
		margin-top: -5px;
	}
	.BS-col-f2 {
		max-width: 40%;
		float: right;
		margin-top: -20px;
	}
	.copyright {
		position: unset !important;
	}
	.clearfix.BScopyrightWrapper {
		text-align: right;
		display: table;
		float: right;
	}
}
/*  Desktop */

@media only screen and (min-width: 1260px) {

	.BS-screen-height {max-height: 525px;}

	.sec-black::after {
		content: url(../img/triangle-black.svg);
		left: calc(50% - 550px);
	}
	.sec-white::after {
		left: calc(50% + 520px);
	}
	.dropdown.BSdropdown {
		right: calc(50% - 550px);
	}
	.device {
		width: 110%;
	}
	.profile-device {
		width: 85%;
		position: relative;
		left: -2%;
		margin-top: 15%;
	}
	.weight900.mt350 {
		margin-top: 10%;
	}
	h1,
	h2 {
		font-size: 3.75rem;
	}
	.ProfileBlock {
		padding-left: 0;
		padding-right: 35%;
	}
	.mt-4.TextIntro {
		display: block;
		width: 85%;
		padding: 5px;
		margin-bottom: 5%;
	}
	.TextChatting {
		width: 40%;
	}
	.chat-device {
		width: 88%;
	}
	.TextChatOverview {
		padding-left: 0;
		padding-right: 20%;
	}
	.TextCopyOverview {
		padding-left: 2%;
	}
	p {
		line-height: 2;
	}
	.duration-device {
		width: 68%;
		left: 15%;
	}
	.likes-device {
		width: 80%;
		margin-top: 18%;
	}

	ul#TopNav>li>a {
		padding: 0px 3px;
		-webkit-transition: all 500ms ease-in-out;
		-moz-transition: all 500ms ease-in-out;
		-ms-transition: all 500ms ease-in-out;
		-o-transition: all 500ms ease-in-out;
		transition: all 500ms ease-in-out;
	}


	ul#TopNav>li>a:hover{
		text-decoration: none !important;
		background: white;
		color: black !important;
		padding: 0px 3px;
		-webkit-transition: all 500ms ease-in-out;
		-moz-transition: all 500ms ease-in-out;
		-ms-transition: all 500ms ease-in-out;
		-o-transition: all 500ms ease-in-out;
		transition: all 500ms ease-in-out;
		
	}

	
		.container.BScontainerContactForm,
		.container.BScontainerContact {
			width: 40% !important;
		}
	
}