hazmat-suite/assets/scss/_project.scss

/*
 * GENERAL
 */

// fonts
@font-face {
	font-family:"Fira Sans";
	src:url("../fonts/fira-sans-v6-latin-300.eot");
	src:url("../fonts/fira-sans-v6-latin-300.eot?#iefix") format("embedded-opentype"),
		url("../fonts/fira-sans-v6-latin-300.ttf?") format("truetype"),
		url("../fonts/fira-sans-v6-latin-300.woff?") format("woff"),
		url("../fonts/fira-sans-v6-latin-300.svg?") format("svg");
	font-weight:300;
	font-style:normal;
	font-display: swap;
}
@font-face {
	font-family:"Fira Sans";
	src:url("../fonts/fira-sans-v6-latin-regular.eot");
	src:url("../fonts/fira-sans-v6-latin-regular.eot?#iefix") format("embedded-opentype"),
	url("../fonts/fira-sans-v6-latin-regular.ttf?") format("truetype"),
	url("../fonts/fira-sans-v6-latin-regular.woff?") format("woff"),
	url("../fonts/fira-sans-v6-latin-regular.svg?") format("svg");
	font-weight:normal;
	font-style:normal;
	font-display: swap;
}
@font-face {
	font-family:"Fira Sans";
	src:url("../fonts/fira-sans-v6-latin-700.eot");
	src:url("../fonts/fira-sans-v6-latin-700.eot?#iefix") format("embedded-opentype"),
	url("../fonts/fira-sans-v6-latin-700.ttf?") format("truetype"),
	url("../fonts/fira-sans-v6-latin-700.woff?") format("woff"),
	url("../fonts/fira-sans-v6-latin-700.svg?") format("svg");
	font-weight:600;
	font-style:normal;
	font-display: swap;
}

h2 {
	margin-bottom: 0.5rem;
}

h3, h4, h5, h6,
.h3, .h4, .h5, .h6 {
	margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	&:first-child {
		margin-top: 0;
	}
}

h3,
.h3 {
	margin-top: 40px;
	margin-bottom: 0.5rem;
}

h4,
.h4 {
	margin-top: 30px;
}

h4 + hr {
	margin-top: 10px;
}

.dropdown-item-important {
	color: rgba($antrazit, .6);
	font-weight: bold;
	@include hover-focus() {
		color: $body-color;
	}
}

.dropdown-item-important:last-child {
	margin-top: 15px;
}

@include media-breakpoint-down(md) {
	.dropdown-menu {
		box-shadow: none; 
	}
	
}

@include media-breakpoint-up(lg) {
	.dropdown-divider {
		margin-left: $dropdown-item-padding-x;
		margin-right: $dropdown-item-padding-x;
	}
}

.ch-ggs-web-suite-h2 {
	color: $primary;
	font-weight: bold;
}

.text-muted-dark {
	color: $gray-700;
}

.btn-back {
	padding-left: 0;
}

.btn-white {
	@include button-variant($white, $white);
	color: $primary;
}

.ch-ggs-web-suite-landing-section-hero,
.ch-ggs-web-suite-cta-box {
	.btn-white:hover,
	.btn-white:focus {
		color: $primary;
	}
}

//modal
.modal-dialog {
	max-width: 540px;
}
.modal-content {
	padding: 40px 40px 60px;
}

.modal-header .close {
	margin: 0;
	padding: 0;
}

.modal-header {
	padding: 0 0 10px 0;
}

.modal-header [data-dismiss*="modal"] {
	align-self: center;
	text-decoration: none;
}

.modal-header [data-dismiss*="modal"] .ifc {
	font-size: 20px;
}

.modal-footer {
	padding: 0;
	display: block;
}

.modal-title {
	color: $primary;
	font-size: $font-size-lg;
}

.modal-body {
	padding: $common-padding 0;
}


//Forms

form > .form-group:first-child > h3:first-child,
form > .form-group:first-child > .h3:first-child {
	margin-top: 1rem;
}

label {
	margin-bottom: .25rem;
}

.input-group {
	background: white;
}

.input-group .btn {
	border-width: $input-border-width;
	border-color: $input-border-color;
}

.ch-ggs-web-suite-input-group-iconed .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
}




//links

.ch-ggs-web-suite-card-link {
	margin-top: auto;
	font-weight: bold;
	color: $antrazit60;
	transition: $transition-base;
	transition-property: color;
	.ifc {
		margin-left: 5px;
		display: inline-block;
		position: relative;
		transform: translateX(0);
		transition: $transition-base;
		transition-property: transform;
	}
}

.ch-ggs-web-suite-article:hover,
.ch-ggs-web-suite-card-simple:hover,
.ch-ggs-web-suite-card-simple:focus {
	.ch-ggs-web-suite-card-link {
		color: $primary;
		.ifc {
			transform: translateX(8px);
		}
	}
}


.ch-ggs-web-suite-file-input-box {
	background: $antrazit05;
	padding: 20px;
}

// seelct

.ch-ggs-web-suite-select {
	position: relative;
	background: $input-bg;
	overflow: hidden;
}

.ch-ggs-web-suite-select:after {
	content: "\e901";
	font-family: icomoon;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0px;
	right: 0px;
	bottom: 0px;
	width: 2.2em;
	margin: auto;
	pointer-events: none;
	transform: scale(1.5);
}

//background
.ch-ggs-web-suite-select:before {
	content: "";
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	width: 2.2em;
	background: $antrazit15;
	border: 1px solid $input-border-color;
	pointer-events: none;
}

.ch-ggs-web-suite-select select {
	background: transparent;
	width: 100%;
	padding-right: 2.5em;
	appearance: none;
	// Disable ugly ass outline on firefox 
    &:-moz-focusring {
		color: transparent;
		text-shadow: 0 0 0 #000;
	}
	// Disable default arrow on IE 11+
    &::-ms-expand {
	display: none;
	}
}

// IE 9 only 
@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
	.ch-ggs-web-suite-select{ 
	  select {
		padding-right: 0;
	  }
  
	  &:after, &:before {
		display: none;
	  }
	}
  }


// step navigation

$step-number-block-margin:	20px;
$step-margin:				30px;

ol.ch-ggs-web-suite-order-steps {
    counter-reset: section;
    list-style-type: none;
    text-align: left;
    margin-bottom: -$step-margin/4;
	padding-left: 0;
	
	li.error,
	li.loading,
	li.done,
	li.active {
		color: $primary;

		& .nav-link:before {
			background: $white;
			color: $primary;
			border-color: $white;
		}
		& .nav-link:after {
			background: $primary;
		}
	}

	li {
		display: block;
		position: relative;
		color: $antrazit25;
		margin-bottom: $step-margin/4;
		.nav-link {
			padding: 0px 30px 0px 0;
			background: $antrazit05;
			font-weight: bold;
			position: relative;
			display: flex;
			align-items: center;
			z-index: 0;
			&:before {
				// counter-increment: section;
				// content: counters(section,"");
				content: "";
				display: inline-block;
				flex: 0 0 2em;
				width: 2em;
				height: 2em;
				border-radius: 2em;
				line-height: 2em;
				margin: $step-number-block-margin $step-number-block-margin*2 $step-number-block-margin $step-number-block-margin;
				font-size: 1.25rem;
				background: $antrazit08;
				color: $antrazit25;
				border: 1px solid $antrazit25;
				text-align: center;
			}
			&:after {
				z-index: -1;
				content: "";
				background: $antrazit08;
				position: absolute;
				left: 0;
				top: 0;
				width: calc(2em + #{$step-number-block-margin*2});
				height: calc(2em + #{$step-number-block-margin*2});
				font-size: 1.25rem;
			}
		}

		.ch-ggs-web-suite-order-step-link-multi {
			// display: inline-flex;
			// flex-direction: column;
			position: relative;
			top: -10px;
		}


		a:link:not(:hover):not(:focus), 
		a:visited:not(:hover):not(:focus) {
			color: inherit;
		}
	}

	li.active,
	li.error,
	li.done {
		.nav-link {
			&:before {
				content: unicode("e900");
				font-family: $font-family-icons;
				line-height: 1.8em;
				speak: none;
				font-style: normal;
				font-weight: normal;
				font-variant: normal;
				text-transform: none;
			}
		}
	}

	li.error {
		.nav-link {
			&:before {
				content: unicode("e906"); 
			}
		}
	}

	li.loading { 
		.nav-link {
			&:before {
				opacity: 0;
			}
		}
	}

	.ch-ggs-web-suite-order-steps-loader {
		position: absolute;
		left: 19px;
		top: 19px;
		width: calc(2em + 10px);
		height: calc(2em + 10px);
		border-width: 0.2em;
	}
}

// step navigation
ol.ch-ggs-web-suite-steps {
    counter-reset: section;
    list-style-type: none;
    display: inline-block;
    text-align: left;
    margin-bottom: -15px;
    margin-left: -30px;
	padding-left: 0;
	
	li.active {
		color: $primary;

		&::before {
			border-color: $primary;
		}	
	}

	li {
		display: block;
		float: left;
		position: relative;
		color: $antrazit60;
		font-weight: bold;
		white-space: nowrap;
		margin: 0 30px 15px;
		&::before {
			counter-increment: section;
			content: counters(section,"");
			position: relative;
			display: inline-block;
			margin-right: 10px;
			width: 2em;
			height: 2em;
			border-radius: 2em;
			background: #fff;
			border: 1px solid #ababab;
				border-top-color: rgb(171, 171, 171);
				border-right-color: rgb(171, 171, 171);
				border-bottom-color: rgb(171, 171, 171);
				border-left-color: rgb(171, 171, 171);
			text-align: center;
			line-height: 2em;
			font-size: 1.25rem;
		}

		a:link:not(:hover):not(:focus), 
		a:visited:not(:hover):not(:focus) {
			color: inherit;
		}
	}
}


// image

.ch-ggs-web-suite-image {
	margin-bottom: $paragraph-margin-bottom;
}


// download

.ch-ggs-web-suite-download {
	display: flex;
	margin-bottom: $paragraph-margin-bottom;
}

a.ch-ggs-web-suite-download { 
	text-decoration: none;
}

.ch-ggs-web-suite-download-icon {
	width: 70px;
	height: 70px;
	flex: 0 0 70px;
	background: $primary;
	color: $white;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: $grid-gutter-width;
	transition: $transition-base;
	transition-property: background;
	a.ch-ggs-web-suite-download:hover &, 
	a.ch-ggs-web-suite-download:focus & {
		background: $link-hover-color;
	}
	> .ifc {
		font-size: 24px;
	}
}

.ch-ggs-web-suite-download-info > *:last-child {
	margin-bottom: 0;
}

.ch-ggs-web-suite-download-title {
	font-weight: bold;
	color: $primary;
	display: inline-block;
	margin-bottom: 5px;
	transition: $transition-base;
	transition-property: color;
	&:first-child {
		margin-top: 22px;
	}

	a.ch-ggs-web-suite-download:hover &, 
	a.ch-ggs-web-suite-download:focus & {
		color: $link-hover-color;

	} 
}

.ch-ggs-web-suite-download-text {
	color: $text-muted;
} 


// cards

.ch-ggs-web-suite-card-group {
	margin-bottom: 70px;
}

.ch-ggs-web-suite-card-holder {
	margin-bottom: -30px;
}

.ch-ggs-web-suite-card {
	position: relative;
    display: flex;
    flex-direction: column;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #efefef;
	box-shadow: 0 0 15px 0 rgba(0,0,0,0);
	transition: $transition-base;
	transition-property: box-shadow;
	margin-bottom: 30px;
}

a.ch-ggs-web-suite-card {
	text-decoration: none;
}



.ch-ggs-web-suite-card-img-fake {
	background: $antrazit08;
	color: $primary;
	display: flex;
	transition: $transition-base;
	transition-property: background-color;
}

.ch-ggs-web-suite-card-img-fake:before {
	content: "";
	display: table;
	float: left;
	padding-bottom: 100%;
}

.ch-ggs-web-suite-card-img-fake .ifc {
	font-size: 120px;
	align-self: center;
	margin-left: auto;
	margin-right: auto;
	transition: $transition-base;
	text-shadow: 4px 8px 12px rgba(black, 0);
	transition-property: text-shadow, color;
}

.ch-ggs-web-suite-card-img-fake .ifc-train-front {
	font-size: 130px;
}

.ch-ggs-web-suite-card-img-fake .ifc-sea-ship-with-containers {
	font-size: 150px;
}

.ch-ggs-web-suite-card-img-fake .ifc-air-transport {
	font-size: 150px;
}

.ch-ggs-web-suite-card:hover .ch-ggs-web-suite-card-img-fake,
.ch-ggs-web-suite-card:focus .ch-ggs-web-suite-card-img-fake {
	background: $primary-d-100;
	color: white;
	text-shadow: 4px 8px 12px rgba(black, 0.2);
}

.ch-ggs-web-suite-card:hover .ch-ggs-web-suite-card-img-fake .ifc,
.ch-ggs-web-suite-card:focus .ch-ggs-web-suite-card-img-fake .ifc {
	text-shadow: 4px 8px 12px rgba(black, 0.2);
}

.ch-ggs-web-suite-card-main {
	flex: 1 1 auto;
	padding: 30px 15px 15px;
	display: flex;
	flex-direction: column;
}

.ch-ggs-web-suite-card:hover,
.ch-ggs-web-suite-card:focus {
	box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

.ch-ggs-web-suite-card .btn {
	background: white;
	border-color: white;
}

.ch-ggs-web-suite-card .btn,
.ch-ggs-web-suite-card .btn .ifc {
	color: $antrazit60;
}

.ch-ggs-web-suite-card:hover .btn,
.ch-ggs-web-suite-card:focus .btn {
	background: $antrazit15;
	border-color: $antrazit15;
}

.ch-ggs-web-suite-card-title {
	text-align: center;
	font-weight: bold;
	font-size: 1.25rem;
	color: $body-color;
	margin-bottom: 15px;
}

.ch-ggs-web-suite-card:hover .ch-ggs-web-suite-card-title,
.ch-ggs-web-suite-card:focus .ch-ggs-web-suite-card-title {
	color: $primary-d-100;
}

.ch-ggs-web-suite-card-text {
	color: $body-color;
}

.ch-ggs-web-suite-card-plain-group {
	margin-bottom: 70px;
}

.ch-ggs-web-suite-card-plain-holder {
	margin-bottom: -30px;
}

.ch-ggs-web-suite-card-plain {
	padding: 25px 25px 0px;
	position: relative;
	z-index: 0;
    display: flex;
	flex-direction: column;
	background: $white;
	margin-bottom: 30px;
}

a.ch-ggs-web-suite-card-plain {
	text-decoration: none;
	&,
	&:hover,
	&:focus {
		color: $body-color;
	}
}

.ch-ggs-web-suite-card-plain-img-icon {
	color: $primary;
	display: flex;
	transition: $transition-base;
	transition-property: background-color;
	margin-bottom: 20px;
}

.ch-ggs-web-suite-card-plain-img-icon .ifc {
	font-size: 40px;
	align-self: center;
	margin-left: auto;
	margin-right: auto;
}

.ch-ggs-web-suite-card-plain-main {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.ch-ggs-web-suite-card-plain-title {
	text-align: center;
	font-weight: bold;
	font-size: $h4-font-size;
	color: $body-color;
	margin-bottom: 0.75em;
}

.ch-ggs-web-suite-card-plain:hover .ch-ggs-web-suite-card-plain-title,
.ch-ggs-web-suite-card-plain:focus .ch-ggs-web-suite-card-plain-title {
	color: $primary-d-100;
}

.ch-ggs-web-suite-card-plain-text {
	text-align: center;
	font-size: $font-size-md;
	margin-bottom: 0;
}

.ch-ggs-web-suite-card-simple-group {
	margin-bottom: 70px;
}

.ch-ggs-web-suite-card-simple-holder {
	margin-bottom: -30px;
}

.ch-ggs-web-suite-card-simple {
	position: relative;
	z-index: 0;
    display: flex;
	flex-direction: column;
	background: $white;
	margin-bottom: 30px;
	&:after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 8px 24px 0 rgba(0,0,0,0.2);
		opacity: 0;
		transition: $transition-base;
		transition-property: opacity;
	}

	&:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		border: 3px solid $primary;
		opacity: 0;
		transition: $transition-base;
		transition-property: opacity;
	}
}

.ch-ggs-web-suite-card-simple:hover,
.ch-ggs-web-suite-card-simple:focus {
	&:before,
	&:after {
		opacity: 1;
	}
}

a.ch-ggs-web-suite-card-simple {
	text-decoration: none;
	&,
	&:hover,
	&:focus {
		color: $body-color;
	}
}

.ch-ggs-web-suite-card-simple-img-icon {
	color: $primary;
	display: flex;
	transition: $transition-base;
	transition-property: background-color;
}

.ch-ggs-web-suite-card-simple-img-icon .ifc {
	margin-top: 60px;
	font-size: 60px;
	align-self: center;
	margin-left: auto;
	margin-right: auto;
}

.ch-ggs-web-suite-card-simple-main {
	flex: 1 1 auto;
	padding: 25px;
	display: flex;
	flex-direction: column;
}

.ch-ggs-web-suite-card-simple-title {
	text-align: center;
	font-weight: bold;
	font-size: 1.25rem;
	color: $body-color;
	margin-bottom: 15px;
}

.ch-ggs-web-suite-card-simple:hover .ch-ggs-web-suite-card-simple-title,
.ch-ggs-web-suite-card-simple:focus .ch-ggs-web-suite-card-simple-title {
	color: $primary-d-100;
}

.ch-ggs-web-suite-card-simple-text {
	color: $body-color;
}


// article

.ch-ggs-web-suite-article {
	margin-bottom: 90px;
}

a.ch-ggs-web-suite-article {
	color: inherit;
	text-decoration: none;
}

.ch-ggs-web-suite-article-content {
	padding: 40px 25px 0;
	position: relative;
	z-index: 0;

	> *:last-child {
		margin-bottom: 0;
	}
}

.ch-ggs-web-suite-article-title {
	color: $primary;
	transition: $transition-base;
	transition-property: color;

	.ch-ggs-web-suite-article:hover & {
		color: $primary-d-100;
	}
}

@include media-breakpoint-up(md) {
	.ch-ggs-web-suite-article-content {
		padding: 40px 25px;
	}
}

@include media-breakpoint-up(lg) {
	.ch-ggs-web-suite-article {
		margin-bottom: 120px;
	}
}



// link with icons

.ch-ggs-web-suite-icon-link {
	display: inline-flex;
}

a.ch-ggs-web-suite-icon-link {
	text-decoration: none;
}

.ch-ggs-web-suite-icon-link:hover,
.ch-ggs-web-suite-icon-link:focus {
	opacity: 0.8;
}

.ch-ggs-web-suite-icon-link .ifc {
	margin-right: 10px;
	top: 5px;
	width: 15px;
	position: relative;
}

/*
 * STEP 3
 */

.ch-ggs-web-suite-dropdown .btn-block + .btn-block {
	margin-top: 0.3125rem;
}

.ch-ggs-web-suite-btn-group {
	margin-top: -$btn-block-spacing-y;
}

.ch-ggs-web-suite-btn-group-btn-group .btn {
	margin-top: $btn-block-spacing-y;
}

#ch-ggs-web-suite-packing-details {
	background-color: $antrazit08;
	padding: 20px;
}

.ch-ggs-web-suite-packing-cmds a {
	color: $antrazit25;
	text-decoration: none;
}

.ch-ggs-web-suite-packing-cmds a .ifc {
	width: 40px;
	height: 40px;
	margin-top: -10px;
	margin-bottom: -10px;
	font-size: 20px;
	color: $body-color;
}

.ch-ggs-web-suite-packing-cmds a:hover,
.ch-ggs-web-suite-packing-cmds a:focus,
.ch-ggs-web-suite-packing-cmds a:hover .ifc,
.ch-ggs-web-suite-packing-cmds a:focus .ifc {
	color: $primary;
}


//step 4

.ch-ggs-web-suite-steps-pricing-details {
	margin-bottom: $common-padding;
}

.ch-ggs-web-suite-steps-pricing-details .ch-ggs-web-suite-steps-price {
	font-size: $font-size-xl;
	color: $primary;
	font-weight: bold;
	line-height: 20px;
	margin-top: 15px;
}

.ch-ggs-web-suite-steps-pricing-details .ch-ggs-web-suite-steps-tax {
	margin-top: 12px;
}


// product Option

.ch-ggs-web-suite-aside-box {
	position: sticky;
	top: 30px;
}

.ch-ggs-web-suite-boxed-gray {
	background: $gray-100;
	border: 1px solid $gray-200;
	padding: 25px 20px;
	margin-bottom: $grid-gutter-width;
}

.ch-ggs-web-suite-boxed-gray > *:last-child {
	margin-bottom: 0;
}

.ch-ggs-web-suite-payment-info {
	margin-top: $grid-gutter-width;
}


// new common box

.ch-ggs-web-suite-boxed {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	background: $gray-100;
	border: 1px solid $gray-200;
	padding: 25px 20px;
	margin-bottom: $grid-gutter-width;
}

.ch-ggs-web-suite-boxed-main {
	width: 100%;
}

.ch-ggs-web-suite-boxed-main:last-child > *:last-child {
	margin-bottom: 0;
}

.ch-ggs-web-suite-boxed-footer {
	margin-top: auto;
	width: 100%;
}

.ch-ggs-web-suite-boxed-big {
	padding: 25px 30px;
}

.ch-ggs-web-suite-boxed-xl {
	padding: 30px 40px;
}

// accordion

.ch-ggs-accordion {
	margin-bottom: $paragraph-margin-bottom;
	border-radius: $border-radius;
}

.ch-ggs-accordion-group .ch-ggs-accordion {
	margin-bottom: 0;
	border-radius: 0;
	border: 1px solid $antrazit15;
}

.ch-ggs-accordion-group .ch-ggs-accordion + .ch-ggs-accordion {
	margin-top: -1px;
}

.ch-ggs-accordion-group .ch-ggs-accordion:first-child .ch-ggs-accordion-head,
.ch-ggs-accordion-group .ch-ggs-accordion:first-child {
	border-top-left-radius: $accordion-border-radius;
	border-top-right-radius: $accordion-border-radius;
}
.ch-ggs-accordion-group .ch-ggs-accordion:last-child:not([open]) .ch-ggs-accordion-head,
.ch-ggs-accordion-group .ch-ggs-accordion:last-child .ch-ggs-accordion-content,
.ch-ggs-accordion-group .ch-ggs-accordion:last-child {
	border-bottom-left-radius: $accordion-border-radius;
	border-bottom-right-radius: $accordion-border-radius;
}

.ch-ggs-accordion-head {
	background: $antrazit05;
	list-style: none;
	display: flex;
	padding: 17px 20px;
	font-size: $font-size-base;
	@include hover() {
		color: $primary;
	}
}

.ch-ggs-accordion-content {
	padding: 30px;
	border-top: 1px solid $antrazit15;
	margin-top: -1px;
}

.ch-ggs-accordion-icon {
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	color: $primary;
	&:before {
		margin-right: 5px;
	}
}

.ch-ggs-accordion-icon:before {
	transition: $transition-base;
	transition-property: transform;
	transform: rotate(0deg);
	margin-right: 0;
	margin-left: 5px;
}

.ch-ggs-accordion[open] .ch-ggs-accordion-icon:before {
	transform: rotate(180deg);
}

// package

.ch-ggs-packages {
	margin-bottom: $paragraph-margin-bottom;
}

.ch-ggs-package:not(:last-child) {
	padding-bottom: $grid-gutter-width;
	margin-bottom: $grid-gutter-width;
	border-bottom: 1px solid $antrazit15;
}

.ch-ggs-package-title {
	display: flex;
	font-weight: bold;
}

.ch-ggs-package-icon {
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: $primary;
	&:before {
		margin-right: 5px;
	}
}


// account

.tab-content {
	border-top: none;
}

.ch-ggs-web-suite-account-tabs-box > .nav-tabs {
	flex-wrap: nowrap;
}
.ch-ggs-web-suite-account-tabs-box > .nav-tabs .nav-item {
	flex: 1 1 100%;
}

.ch-ggs-web-suite-account-tabs-box > .nav-tabs .nav-link.active {
	background: $gray-100;
}

.ch-ggs-web-suite-book-progress {
	height: 4px;
	margin-top: -1px;
}

// loading bar

.ch-ggs-web-suite-loading-bar {
	position: relative;
	padding: 20px 30px;
	text-align: center;
	background: $antrazit05;
	margin-bottom: $paragraph-margin-bottom;
	overflow: hidden;
	&:before,
	&:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		height: 4px;
		background: $antrazit08;
		width: 100%;
	}

	&:after {
		background: $primary;
		left: -200px;
		width: 200px;
		animation: loading 2s linear infinite;
	}
}

@keyframes loading {
	from{left:-200px; width: 10%;}
	50% { width: 30%; }
	80% { left: 50%; }
	95% { left: 120%; width: 80%}
	to { left: 100%; }
  }


// new landing

.ch-ggs-web-suite-landing-section {
	min-height: 100vh;
	padding: 120px 0;
}

.ch-ggs-web-suite-landing-section-dark {
	color: $white;
	background: $primary-d-200;
}

.ch-ggs-web-suite-landing-section-hero {
	min-height: calc(100vh - 91px);
	background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-xs.jpg');
	background-size: cover;
	display: flex;
	align-items: center;
}

.ch-ggs-web-suite-landing-section-title {
	font-size: 32px;
	display: flex;
	font-weight: 700;
	margin-bottom: 20px;
}

.ch-ggs-web-suite-landing-section-title-image {
	margin-bottom: 80px;
}

.ch-ggs-web-suite-landing-section-title-icon {
	margin-right: 12px;
}

.ch-ggs-web-suite-landing-hero-title,
.ch-ggs-web-suite-landing-hero-text {
	color: $white;
}

.ch-ggs-web-suite-landing-hero-title {
	font-size: 52px;
	font-size: 1.75rem;
    font-size: clamp(1.75rem, 4vw, 3.5rem);
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 20px;
}

.ch-ggs-web-suite-article-landing {
	color: $body-color;
	
	&:hover,
	&:focus {
		text-decoration: none;
	}
}

.ch-ggs-web-suite-article-landing-image {
	margin-bottom: 80px;
}

.ch-ggs-web-suite-article-landing {
	display: block;
}

.ch-ggs-web-suite-article-landing:not(:last-child) {
	margin-bottom: 180px;
}

.ch-ggs-web-suite-article-landing .lead {
	font-size: 20px;
}

.ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-article-landing {
	color: $white;
}

.ch-ggs-web-suite-landing-article-content-aside {
	color: $primary-d-100;
}

.ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-landing-article-content-aside {
	color: $primary-l-200;
}

.ch-ggs-web-suite-landing-hero-text {
	font-size: 22px;
	margin-bottom: 80px;
}

.ch-ggs-web-suite-card-hover-text {
	opacity: 1;
	transition: $transition-base;
	transition-property: opacity;
	font-size: 18px;
	color: $body-color;
}

.ch-ggs-web-suite-card-hover-title {
	margin-bottom: 20px;
	font-weight: 700;
}

.ch-ggs-web-suite-card-hover {
	margin-bottom: $grid-gutter-width;
	padding: 30px;
	position: relative;
	z-index: 0;
	display: flex;
	width: 100%;
	&:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: white;
		transition: $transition-base;
		transition-property: transform;
		transform: scale(1);
		z-index: -1;
	}
	
	&:hover,
	&:focus {
		text-decoration: none;
		.ch-ggs-web-suite-card-hover-title {
			color: $primary;
		}
		.ch-ggs-web-suite-card-hover-text {
			opacity: 0;
		}
		&:after {
			transform: scale(1.025);
		}

	}
}

.ch-ggs-web-suite-card-hover-logo {
	max-height: 40px;
	width: auto;
	align-self: start;
	margin-bottom: 20px;
}

.ch-ggs-web-suite-card-hover-main {
	display: flex;
	flex-direction: column;
	position: relative;
}

.ch-ggs-web-suite-card-hover-title {
	display: flex;
	font-size: 21px;
}

.ch-ggs-web-suite-card-hover-icon {
	margin-right: 12px;
}

.ch-ggs-web-suite-landing-article-title {
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 2.625rem;
	display: flex;
	align-items: start;
	gap: 30px;
}


.ch-ggs-web-suite-article-landing {
	font-size: 20px;
}

.ch-ggs-web-suite-simple-list {
	padding-left: 22px;
	@-moz-document url-prefix() {
		padding-left: 20px;
	}
}

.ch-ggs-web-suite-facts-list {
	list-style: none;
	padding-left: 0;
	font-size: 22px;
}


.ch-ggs-web-suite-facts-list-item {
	margin-bottom: 10px;
}

.ch-ggs-web-suite-facts-list-item-important {
	margin-top: 20px;
	font-weight: bolder;
}

.ch-ggs-web-suite-landing-nav {
	font-size: 1.125rem;
}

.ch-ggs-web-suite-landing-nav .nav-link .ifc {
	transform: rotate(-90deg);
	display: inline-block;
}

.ch-ggs-web-suite-landing-nav .nav-link.active {
	color: $primary-l-200;
}

.ch-ggs-web-suite-cta-box {
	background: $primary;
	color: $white;
	padding: 80px 60px;
	display: block;
	font-size: 1.375rem;
}

.ch-ggs-web-suite-cta-box-title {
	font-size: 2.625rem;
	margin-bottom: 20px;
	font-weight: 700;
}

a.ch-ggs-web-suite-cta-box {
	text-decoration: none;
}

.ch-ggs-web-suite-cta-box-btn {
	margin-top: 80px;
}

@include media-breakpoint-up(sm) {
	.ch-ggs-web-suite-landing-section-hero {
		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-sm.jpg');
	}
}

@include media-breakpoint-up(md) {
	.ch-ggs-web-suite-landing-section-hero {
		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-md.jpg');
	}

	.ch-ggs-web-suite-card-hover-text {
		opacity: 1;
		transition: $transition-base;
		transition-property: opacity;
		margin-bottom: 0;
	}

	.ch-ggs-web-suite-card-hover-link {
		margin-top: auto;
		position: absolute;
		opacity: 0;
		transition: $transition-base;
		transition-property: opacity;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.ch-ggs-web-suite-card-hover {
		&:hover,
		&:focus {
			.ch-ggs-web-suite-card-hover-text {
				opacity: 0;
			}
			.ch-ggs-web-suite-card-hover-link {
				opacity: 1;
			}
		}
	}

	.ch-ggs-web-suite-landing-nav {
		position: sticky;
		z-index: 1;
		overflow: hidden;
		top: 0;
		margin-top: -75px;
		&,
		& a {
			color: $white;
		}
		.container {
			position: relative;
			z-index: 0;
			background: $primary-d-200;
			&:before,
			&:after {
				content: "";
				background: $primary-d-200;
				position: absolute;
				top: 0;
				bottom: 0;
				z-index: -1;
				transition: $transition-base;
				transition-duration: 0.5s;
				transition-property: transform;
				width: calc((100vw - 720px)/2);
				transform: scaleX(0.3);
			}

			&:before {
				right: 100%;
				transform-origin: right;
			}
			&:after {
				left: 100%;
				transform-origin: left;
			}
		}
	}

	.ch-ggs-web-suite-landing-nav.stuck .container:before,
	.ch-ggs-web-suite-landing-nav.stuck .container:after {
		// max-width: 100%;
		transform: scaleX(1);
	}
}

@include media-breakpoint-up(lg) {
	.ch-ggs-web-suite-landing-section-hero {
		min-height: calc(100vh - 98px);
		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-lg.jpg');
	}

	.ch-ggs-web-suite-landing-nav {
		.container {
			&:before,
			&:after {
				width: calc((100vw - 960px)/2);
			}
		}
	}
}

@include media-breakpoint-up(xl) {
	.ch-ggs-web-suite-landing-section-hero {
		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-xl.jpg');
	}

	.ch-ggs-web-suite-landing-nav {
		.container {
			&:before,
			&:after {
				width: calc((100vw - 1140px)/2);
			}
		}
	}
}