baueradvance/httpdocs/files/theme/assets/scss/components/_home.scss

body.nav-open {
	#header {
		.inside {
			background: #b4d7f7 !important;
		}
	}
}
body.home {
	background-color: #fff;
	#header {
		.inside {
			transition: 0.3;
			&[data-section="start"],
			&[data-section="ticker"],
			&[data-section="intouch"] {
				background: #0000dc;
				.logo {
					svg {
						path {
							fill: #fff !important;
						}
					}
				}
				.mod_changelanguage {
					ul {
						li {
							color: #fff;
							a {
								color: #fff;
							}
							&.active {
								&:after {
									background: #fff;
								}
							}
						}
					}
				}
				.nav-icon {
				    div,
				    &:before,
					&:after {
						background-color: #fff;
					}
				}
			}
			&[data-section="weare"],
			&[data-section="advance"],
			&[data-section="news"] {
				background: #fff;
			}
			&[data-section="brands"],
			&[data-section="cases"] {
				background: #b4d7f7;
			}
			&[data-section="weare"],
			&[data-section="advance"],
			&[data-section="news"],
			&[data-section="brands"],
			&[data-section="cases"] {
				.mod_changelanguage {
				ul {
					li {
						color: $main-color;
						a {
							color: #000;
						}
						&.active {
							&:after {
								background: $main-color;
							}
						}
					}
				}
			}
			.nav-icon {
			    div,
			    &:before,
				&:after {
					background-color: $main-color;
				}
			}
			}
		}
	}
	#main {
		padding: 0;
		.inside {
			padding: 0;
		}
	}
	.slick-arrow {
	  	  position: absolute;
	  	  top: 50%;
		  border: solid #fff;
		  border-width: 0 2px 2px 0;
		  display: inline-block;
		  padding: 2px;
		  background: transparent;
		  text-indent: -9999px;
		  width: 17px;
	      height: 17px;
	      z-index: 99;
		  &.slick-prev {
			transform: rotate(135deg) translateX(-50%);
			-webkit-transform: rotate(135deg) translateX(-50%);
			left: 2rem;
		  }
		  &.slick-next {
			transform: rotate(-45deg) translateY(-50%);
			-webkit-transform: rotate(-45deg) translateY(-50%);
			right: 2rem;
		  }
	 }
	.marquee {
	  width: 100%;
	  max-width: 1200px;
	  overflow: hidden;
	  background: $main-color;
	  .slick-list {
	  	max-width: 1050px;
	  	margin: 0 auto;
	  }
	  a {
	  	display: flex;
	  	min-height: 50px;
	  	img {
	  		max-height: 50px;
	  		object-fit: contain;
	  	}
	  }
	}
	.mod_article.section {
		padding-top: 100px;
		padding-left: 15px;
		padding-right: 15px;
		//min-height: 670px;
		@media (min-width: 992px) {
			padding-left: 0;
			padding-right: 0;
		}
		&.start {
			background: #0000dc url("../img/teamed-for-success.svg") no-repeat 89% 70.5%;
			background-size: 79% auto;
			padding: 7rem 0 0 0;
			//width: 75rem;
			//height: calc(42.1875rem + 7rem + 1.5rem);
			border-bottom: 1.5rem solid #fff;
			#start-intro-video {
				position: relative;
				z-index: 4;
			}
			&:hover {
				background-image: url("../img/teamed-for-success-active.svg");
			}
		}
		&.white {
			background: #fff;
		}
		&.inverted {
			background: $main-color;
			color: #fff;
		}
		.ce_hyperlink {
			a.btn {
				@include button;
				max-width: 155px;
				display: block !important;
				margin: auto;
				transition: 0.3s;
				&:hover {
					background: $main-color;
					color: #fff;
					text-decoration: none;
				}
			}
		}
		&.we-are {
			.ce_text {
				max-width: 500px;
				margin: 0 auto;
			}
			.ce_rsce_statistics {
				position: relative;
				max-width: 835px;
				margin-left: auto;
				margin-top: 3rem;
				.numbers {
					position: relative;
					max-width: 750px;
					background: $main-color;
					color: #fff;
					border-radius: 8px;
					padding: 1.5rem 0 0;
					margin: 0 5px;
					@media (min-width: 576px) {
						margin: 0;
					}
					.number-item {
						margin-bottom: 2rem;
						span {
							display: block;
							@include futura-medium;
							&.value {
								@include futura-bold;
								font-size: size(20);
								line-height: size(32);
								@media (min-width: 576px) {
									font-size: size(40);
									line-height: size(53);
								}
							}
						}
					}
					&:before {
						@media (min-width: 576px) { 
							position: absolute;
							top: 0;
							left: 10px;
							display: block;
							content: '';
							border: 4px solid $main-color;
							border-radius: 8px;
							width: 100%;
							max-width: 750px;
							height: 250px;
							transform: rotate(2deg);
						}
					}
				}
				.btn {
					display: block;
					max-width: 160px;
					margin: 2rem auto;
					@media (min-width: 992px) {
						transform: translateX(-55px);
					}
				}
				.source {
					display: flex;
					@include futura-medium;
					font-size: size(10);
					@media (min-width: 992px) {
						transform: translateX(-32px);
					}
				}
				&:before {
					@media (min-width: 992px) {
						display: block;
						position: absolute;
						top: -455px;
						right: 0;
						content: '';
						width: 325px;
						height: 526px;
						background-image: url(../img/hand_pickcard_transparent.svg);
						background-repeat: no-repeat;
						z-index: 98;
						pointer-events: none;
					}
				}
			}
		}
		&.brands {
			padding-bottom: 3rem;
			.ce_rsce_expandedText {
				max-width: 510px;
				margin: 0 auto;
				h2 {
					text-align: left;
					margin-left: 1rem;
					span {
						margin-left: -1rem;
					}
				}
			}
			.ce_text.extra {
				@include futura-bold;
				font-size: size(48);
				line-height: size(52);
				margin-top: 2rem;
				p {
					margin: 0;
					@media (min-width: 576px) { 
						&:nth-child(2) {
							padding-left: 8rem;
						}
						&:nth-child(3) {
							padding-left: 4rem;
						}
					}
					img {
						float: none;
						margin: auto;
					}
				}
			}
			.ce_hyperlink.facts {
				margin-top: 1rem;
				a.btn {
					max-width: 180px;
				}
			}
			
		}
		&.advance {
			position: relative;
			padding-top: 8rem;
			padding-bottom: 1rem;
			@media (min-width: 992px) {
				padding-bottom: 0;
			}
			.ce_rsce_advanceImagemap {
				max-width: 1060px;
				margin-left: auto;
				margin-right: 3rem;
			}
			.ce_rsce_solution {
				margin: 3rem auto;
				min-width: 325px;
				a {
					display: flex;
				}
    			h2 {
    				font-size: size(30);
    				line-height: size(32);
    			}
    			.icon {
    				margin-top: -10px;
    				position: static;
	      			svg {
	    				max-width: 60px;
	    			}  				
    			}
			}
			.ce_rsce_expandedText {
    			width: 100%;
    			max-width: 410px;
    			margin: auto;
    			@media (min-width: 992px) {
					position: absolute;
					top: 3rem;
	    			left: 7%;
    			}
 				h2 {
					text-align: left;
					margin-left: 1rem;
					span {
						margin-left: -1rem;
					}
				}
				p {
					max-width: 380px;
				}
			}
			.btn {
				margin-right: auto;
				margin-left: auto;
				@media (min-width: 992px) {
					margin-left: 7rem;
				}
			}
		}
		&.cases {
			padding-bottom: 3rem;
			.ce_rsce_expandedText {
				max-width: 455px;
				margin: 0 auto;
				padding-left: 3rem;
 				h2 {
					text-align: left;
					margin-left: 1rem;
					color: #fff;
					span {
						margin-left: -1rem;
					}
				}
			}
		}
		&.news {
			padding-bottom: 2rem;
			.ce_rsce_expandedText {
				margin-bottom: 4rem;
				h2 {
					max-width: 285px;
					margin: auto;
					span {
						display: block;
						text-align: left;
					}
				}
			}
			.mod_newslist {
				margin-bottom: 1rem;
				.layout_latest {
					.image_container {
						img {
							clip-path: polygon(24% 0, 100% 0, 76% 100%, 1% 100%);
						}
					}
					h3 {
						font-size: size(14);
						text-align: center;
						max-width: 200px;
					}
				}
			}
			.slick-arrow {
				display: none !important;
				width: 34px;
				height: 34px;
				border: solid $main-color;
				border-width: 0 2px 2px 0;
			}
			@media (min-width: 1200px) {
				.slick-arrow {
					display: inline-block !important;
					&.slick-prev {
						transform: rotate(135deg) translateX(-50%);
						-webkit-transform: rotate(135deg) translateX(-50%);
						left: -5rem;
					}
					&.slick-next {
						transform: rotate(-45deg) translateY(-50%);
						-webkit-transform: rotate(-45deg) translateY(-50%);
						right: -5rem;
						text-indent: 9999px;
					}
				}
			}
		}
		&.in-touch {
			padding-bottom: 7rem;
			@media (min-width: 1199px) {
				background-image: url(../img/hand_pick_white_outline.svg);
				background-repeat: no-repeat;
				background-position: right 0 bottom 22px;
			}
			.cite {
				@include futura-bold;
				font-size: size(20);
				line-height: size(29);
				text-transform: uppercase;
				max-width: 335px;
			}
			.headline {
				@include futura-bold;
				font-size: size(100);
				line-height: size(86);
				text-transform: uppercase;
				@media (min-width: 576px) {
					font-size: size(170);
					line-height: size(135);
				}
			}
			.ce_hyperlink {
				@media (min-width: 1199px) {
					transform: translateX(-188px);
				}
				a.btn {
					color: #fff;
					border: 2px solid #fff;
					max-width: 235px;
					transition: 0.3s;
					&:hover {
						background: #fff;
						color: $main-color;
					}
				}
			}
		}
	}
	footer {
		.inside {
			.top-link {
				top: -2rem;
				a {
					color: #fff;
					&:before {
						border-color: #fff;
					}
				}
			}
		}
	}
}