publik-base-theme/static/nancy-en-direct/_custom.scss

#header-wrapper, #footer-wrapper {
	background-color: #333333;
}

#logo {
	a {
		height: 100px;
		display: block;
		text-indent: -9999px;
		background-image: url('img/logo.svg');
		background-position: center left;
		background-repeat: no-repeat;
		background-size: auto 75%;
		@media screen and ($max-mobile-viewport) {
			background-position: center center;
		}
	}
}

div#toplinks {
	background: $primary-color;
	height: 100%;
	border: 0;
	border-radius: 0;
	padding: 0 1em;
	box-shadow: none;
	display: flex;
	align-items: center;
	color: #ffffff;
	@media screen and ($max-mobile-viewport) {
		display: none;
	}
	a {
		color: #ffffff;
	}
}

div.carrousel-item-content {
	margin-top: 1.5rem;
	&::before {
		content: "";
		overflow: hidden;
		width: 800px;
		height: 800px;
		border-radius: 50%;
		background: rgba(40, 45, 51, 0.8);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%);
		z-index: -1;
		@media screen and ($max-mobile-viewport) {
			width: 100%;
			left: 0;
			border-radius: 0;
		}
	}
	> a {
		width: 40%;
		float: right;
		font-size: 90%;
		margin: 0 6rem;
	}
}

div.carrousel-content input + div div.carrousel-item {
	text-align: center;
	align-items: center;
	@media screen and ($max-mobile-viewport) {
		justify-content: center;
		padding: 0;
	}
	div.carrousel-item-content > a {
		@media screen and ($max-mobile-viewport) {
			margin: 0;
			width: 100%;
		}
	}
}

div.cell.wcsformsofcategorycell {
	h2:first-child {
		padding-top: 15px;
		padding-bottom: 15px;
		border-radius: 0;
		color: $link-color;
		text-transform: uppercase;
		background-color: #ffffff;
		&.with-asset {
			padding-left: 110px;
			background-size: contain;
			background-position: center left;
			background-repeat: no-repeat;
		}
	}
	&.foldable > div {
		> h2:first-child {
			font-weight: bold;
			padding-right: calc(1em + 15px);
			background-color: #cdcdcd;
			min-height: 3.5em;
			display: flex;
			align-items: center;
			&::after {
				content: '\f146';
				font-family: FontAwesome;
				position: absolute;
				top: calc(50% - 0.5em);
				right: 15px;
			}
			span {
				font-size: 85%;
			}
		}
	}
	&.folded > div {
		> h2:first-child::after {
			content: '\f0fe';
		}
	}
	ul li a {
		color: $primary-color;
		text-transform: uppercase;
		border: 0;
		padding-left: 1.3rem;
		&::before {
			content: '\f061';
			font-family: FontAwesome;
			position: absolute;
			left: 0;
			top: 1rem;
			font-size: 85%;
		}
	}
}

div#nav-wrapper {
	@media screen and ($min-desktop-viewport) {
		background: #efefef;
	}
	div.gru-nav {
		@media screen and ($min-desktop-viewport) {
			background: transparent;
		}
	}
	ul {
		@media screen and ($min-desktop-viewport) {
			margin-top: 0;
		}
	}
}

div#pwa-navigation {
	a {
		background-size: auto $nav-mobile-bottom-bar-height - 35px;
		background-position: 50% 5px;
		padding-top: $nav-mobile-bottom-bar-height - 25px;
	}
	li.page-profil {
		background-color: $primary-color;
	}
}

div.cell.trackingcodeinputcell {
	margin: 20px 0;
	h2:first-child {
		border-left: 1px solid #ffffff;
		border-right: 1px solid #ffffff;
	}
	input.tracking-code--input {
		background: url('img/code.png') center left no-repeat;
		padding-left: 30px;
		float: left;
		width: 83%;
	}
	button {
		width: 15%;
		float: right;
		text-indent: -10000px;
		background: url('img/validate.png') center center no-repeat;
		border: 0;
		box-shadow: none;
		margin: 0;
	}
	&.homepage {
		color: #ffffff;
		background: $primary-color;
		padding-bottom: 5px;
		h2:first-child {
			color: #ffffff;
			background: $primary-color;
		}
		button {
			background-color: $button-background;
		}
	}
}

#footer a {
	color: #ffffff;
}

div#content .cell div.wcs-tracking-code-input h2,
div#tracking-code h3,
.wcs-steps h2 {
	display: block;
	font-size: 1.5em;
	color: black;
	font-weight: 400;
	padding-bottom: 10px;
	margin-bottom: 10px;
	text-transform: uppercase;
	border-bottom: 2px solid $primary-color;
	text-align: center;
	position: relative;
	&::after {
		content: "";
		speak: none;
		width: 7px;
		height: 7px;
		background: $primary-color;
		position: absolute;
		bottom: -5px;
		left: 50%;
		-webkit-transform: translateX(-50%) rotate(45deg);
		-ms-transform: translateX(-50%) rotate(45deg);
		transform: translateX(-50%) rotate(45deg);
	}
}

.wcs-steps {
	@media screen and ($max-mobile-viewport) {
		margin-bottom: 10px;
	}
}

div#tracking-code {
	h3 {
		font-size: 130%;
	}
	a {
		background: transparent url('img/code.png') center left no-repeat;
		padding-left: 30px;
		font-size: 125%;
	}
}
.form-content--sidebox div#tracking-code a {
	@media screen and ($max-mobile-viewport) {
		padding-left: 30px;
	}
}

// Steps
.wcs-steps {
	&--list {
		margin-top: $wcs-steps-spacing * 2;
		justify-content: center;
	}
}
.wcs-step {
	&--label {
		font-size: .8em;
		text-align: center;
	}
	&.current {
		font-weight: normal;
	}
	&.step-before & {
		&--marker {
			background-color: #000;
		}
	}
}
@include desktop-vertical-steps() {
	.wcs-steps {
		background: #fff;

		&--list {
			margin-top: $wcs-steps-spacing * 2;
		}
	}
	.wcs-step {
		&--marker {
			background-color: #EBECED;
		}
		&--label {
			font-size: 0.6em;
			text-align: left;
		}
		&.current & {
			&--label {
				font-weight: bold;
			}
		}
	}
}

form p {
	line-height: 1.3em;
}

.form-content {
	&--titlebar {
		h1 {
			padding-left: 0.5rem;
		}
	}

	#rub_service {
		h2 {
			padding-left: 0;
		}
		div.comment-field h2 {
			padding-left: 0;
			padding-right: 0;
			color: #333333;
			font-weight: bold;
		}
	}
}

span.login {
	span.sep, a.registration {
		display: none;
	}
}

span.required {
	color: $primary-color;
}

div#side {
	@media screen and ($max-mobile-viewport) {
		flex-direction: column-reverse;
	}
}

input, input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea, select {
	&:focus:not([readonly]) {
		border-bottom-color: transparent;
	}
}

button.cancel-button, div.cancel-button button {
	background: #aaaaaa;
}

div.buttons div.submit-button {
    float: right;
}