html, body{
	margin:0;
	position: relative;
	overflow-x: hidden;
}


#main{
  width: 90vw;
  margin: auto;
  height: 110vh;

  display: flex;
  justify-content: center;
	align-items: center;
	
	margin-top: 100px;
}


iframe {
	height: 80vh;
	width: 80vw;
	margin: auto;
}

.video-wrap{
	position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    height: 0;
    overflow: hidden;

	margin-bottom: 100px;
}

.video-wrap iframe{
	position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

/* Cookies Banner */
.cookie-banner{
	position: fixed;

	bottom: 0;

	z-index: 999999999;

	margin: auto;

	width: calc(100vw - 80px);
	height: auto;

	background-color: whitesmoke;
	border-top: 1px solid #aaa;


	text-align: center;

	padding: 2.5px 40px 0px 40px;
	line-height:30px;
}
.cookie-banner p{
	font-size: 12px;
}

.cookie-button{
	border: none;
	background: black;
	color: white;
	padding: 10px;
	margin: auto;
	text-align: center;

	font-size: 14px;
	font-family: 'Univers';
	letter-spacing: 1.5px;
	text-transform: uppercase;

	margin-left: 25px;

	cursor: pointer;
}
/* /Cookie Banner */


/* Maintenance Page */ 
.maintenance{
	background-image: url('Images/Background/mondial-header.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top left;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;

	position: relative;

	padding: 0;
	margin:auto;

	height: 100vh;
	width:100vw;

	text-align: left;

	overflow: hidden;
}
	.maintenance-content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;

		width: 50%;
	}
		.maintenance h2{
		font-size: 72px;
		margin-bottom: 25px;
		margin-left: -5px;
		}
		.maintenance h5{
			
			margin-bottom: 10px;
			}	
			.social-link{
				font-size: 48px;
				color: #FFFFFF;

				display: inline;

				margin: 10px;

				transition: all 0.5s ease-in-out;
			}
				.social-link:hover{
					color: #A2A2A2;
				}
					.maintenance-logo{
						width: 500px;
						text-align: left;
					}
						.maintenance-mockup{
							position: absolute;
							bottom: -5%;
							right: 0;

							height: 400px;
							width: auto;
						}
/* End */ 

/* Font Imports */
	@font-face {
			font-family: 'Magistral';
			src:          url(Fonts/Magistral/Magistral-Book.ttf);
			font-weight:  normal;
	}
	@font-face {
			font-family: 'Univers';
			src:          url(Fonts/Univers/UniversLTW01-59UltCondensed.ttf);
			font-weight:  lighter !important;
	}
	@font-face {
			font-family: 'roboto';
			src:          url(Fonts/Roboto/Roboto-Regular.ttf);
			font-weight:  lighter !important;
	}

	@font-face {
		font-family: 'Montserrat';
		src:          url(Fonts/Montserrat/Montserrat-Bold.ttf);
		font-weight:  lighter !important;
	}

	@font-face {
		font-family: 'Montserrat-regular';
		src:          url(Fonts/Montserrat/Montserrat-Regular.ttf);
		font-weight:  lighter !important;
	}

		/* Type */ 
		h1{
			font-family: 'Univers';
			font-size: 48px;
			
			letter-spacing: 0.1em;

			color: #FFFFFF;
		}
			h1.h1smaller{
				font-family: 'Univers';
				font-size: 38px;
				
				letter-spacing: 0.1em;

				color: #006AB3;
			}

		h2{
			font-family: 'Univers';
			font-size: 48px;
			
			letter-spacing: 0.1em;
			margin: 0;

			color: #FFFFFF;
		}
		h2.h1smaller{
			font-family: 'Univers';
			font-size: 38px;
			
			letter-spacing: 0.1em;

			color: #006AB3;
			text-transform: uppercase;
			text-align: left;
		}


		h3{
			font-family: 'Univers';
			font-size: 32px;
			
			letter-spacing: 0.1em;
			margin: 0;

			color: #006AB3;
		}

		h5{
			font-family: 'Univers';
			font-size: 18px;

			letter-spacing: 0.15em;

			text-transform: uppercase;

			color: white;

			margin: 0;
		}


		p{
			font-family: Helvetica;
			font-size: 16px;
			letter-spacing: 0.1em;
		}
			.grey{
					font-family: Helvetica;
					font-size: 16px;
					letter-spacing: 0.1em;
					
					color: #A2A2A2 !important;
					margin-bottom: 25px !important;
				}

		a{
			color: black;
			text-decoration: none;
		}

		.trade{
			font-size: 22px;
			vertical-align: super;
		}

/* Navigation Bar */
.menu {
	position:   fixed;
	top:        0;
	left:       0;
	width:      102%;
	z-index:    99999999;
	background: black;
	height:     90px;}
.container {
	position: relative;
	margin:   0 auto;
	width:    calc(100vw - 200px);
	padding:  0 200px;}

.logo{
	height:   40px;
	width:    auto;
	position: absolute;
	top:      25px;
	left:     40px;}

.menu-trigger {
	position:           absolute;
	top:                18.5px;
	right:              255px;
	height:             55px;
	width:              60px;
	cursor:             pointer;
	transition:         opacity 130ms ease-out;
	-webkit-transition: opacity 130ms ease-out;
	-moz-transition:    opacity 130ms ease-out;
	-ms-transition:     opacity 130ms ease-out;}
	.menu-trigger:hover {
		opacity: 1;}
		.menu-trigger h5 {
			position:           absolute;
			right:              10px;
			top:                9px;
			text-transform:     uppercase;
			color:              #fff;
			user-select:        none;
			-webkit-user-select:none;
			-moz-user-select:   none;
			-ms-user-select:    none;
			-o-user-select:     none;
			-khtml-user-select: none;
			transition:         color 300ms ease-out;
			-webkit-transition: color 300ms ease-out;
			-moz-transition:    color 300ms ease-out;
			-ms-transition:     color 300ms ease-out;}


.menu-trigger .bar {
	position:           absolute;
	left:               10px;
	width:              40px;
	height:             5px;
	background:         #fff;
	transition:         transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
	-webkit-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
	-moz-transition:    transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
	-ms-transition:     transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;}
	.bar--1 {
		top: 15px; }
	.bar--2 {
		top: 25px}
	.bar--3 {
		top: 35px;}

.open, .open:hover {
	opacity: 1 !important;}
	.open h5 {
		color: #fff;}
		.open .bar {
			background: #fff; }
			.open .bar--1 {
				top:               21px;
				transform:         rotate(135deg);
				-webkit-transform: rotate(135deg);
				-moz-transform:    rotate(135deg);
				-ms-transform:     rotate(135deg); }
			.open .bar--2 {
				opacity: 0;
				width:   0px; }
			.open .bar--3 {
				top:                21px;
				transform:         rotate(-135deg);
				-webkit-transform: rotate(-135deg);
				-moz-transform:    rotate(-135deg);
				-ms-transform:     rotate(-135deg);}

.navigation {
	visibility:                  hidden;
	position:                    fixed;
	z-index:                     99999999;
	top:                         20px;
	left:                        0;
	width:                       100%;
	max-width:                   100%;
	background:                  #FFFFFF;
	box-shadow:                  0px 6px 8px rgba(0,0,0,0.13);
	padding:                     100px 0 20px 0;
	opacity:                     0;
	transform-origin:            center top;
	-webkit-transform-origin:    center top;
	-moz-transform-origin:       center top;
	-ms-transform-origin:        center top;
	transform:                   scale(0.9);
	-webkit-transform:           scale(0.9);
	-moz-transform:              scale(0.9);
	-ms-transform:               scale(0.9);
	backface-visibility:         hidden;
	-webkit-backface-visibility: hidden;
	transition:                  opacity 190ms ease-out, transform 40ms ease-out;
	-webkit-transition:          opacity 190ms ease-out, transform 40ms ease-out;
	-moz-transition:             opacity 190ms ease-out, transform 40ms ease-out;
	-ms-transition:              opacity 190ms ease-out, transform 40ms ease-out;}
	.navigation .container {
		padding: 0 18px; }
.nav-open {
	visibility:         visible;
	opacity:            1;
	transform:         scale(1);
	-webkit-transform: scale(1);
	-moz-transform:    scale(1);
	-ms-transform:     scale(1);}

nav {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-flow: row wrap;}
	nav h3 {
		font-family:    'Univers';  
		position:       relative;
		display:        block;
		margin:         0 0 15px 0;
		color:          black;
		font-size:      1.2em;
		font-weight:    600;
		text-transform: uppercase;}
		nav ul {
			position:        relative;
			padding:         0 0;
			margin:          0 0;
			width:           100%;
			max-width:       100%;
			list-style-type: none;}
			nav li {
				display:       block;
				color:         #919191;
				font-size:     0.88em;
				font-family:   'Magistral';
				margin:         6px 0;
				font-weight:    400;
				letter-spacing: 0.025em;}
				nav li > a > i {
					color: #121212;
					font-size:         1.4em;
					margin-right:      8px;
					display:           inline-block;
					transform:         translateY(1px);
					-webkit-transform: translateY(1px);
					-moz-transform:    translateY(1px);
					-ms-transform:     translateY(1px);
					opacity:           0.6; }

		nav .social-link {
			float:         left;
			width:         44px;
			height:        44px;
			line-height:   48px;
			border-radius: 44px;
			text-align:    center;
			margin:        5px;
			cursor:        pointer;
			transition:    all 0.25s ease-in-out;}
				nav .social-link > i:hover {
					color: black; }
				nav .social-link:last-child {
					margin-right: 0px;  }
					nav .social-link > i {
						color:     #B5B5B5;
						font-size: 22px;
						margin:    0 auto; }

	nav .col {
		min-height:                   auto;
		width:                        auto;
		flex-direction:               row;
		margin:                       0 auto;
		margin-bottom:                25px;
		text-align:                   left;
		transform:                    translateY(25px);
		-webkit-transform:            translateY(25px);
		-moz-transform:               translateY(25px);
		-ms-transform:                translateY(25px);
		opacity:                      1;
		backface-visibility:         hidden;
		-webkit-backface-visibility: hidden;
		will-change:                 transform, opacity; }
		.c-in {
			animation-name:                    fadeInUp;
			-webkit-animation-name:            fadeInUp;
			-moz-animation-name:               fadeInUp;
			-ms-animation-name:                fadeInUp;
			animation-duration:                860ms;
			-webkit-animation-duration:        860ms;
			-moz-animation-duration:           860ms;
			-ms-animation-duration:            860ms;
			animation-fill-mode:               forwards;
			-webkit-animation-fill-mode:       forwards;
			-moz-animation-fill-mode:          forwards;
			-ms-animation-fill-mode:           forwards;
			animation-timing-function:         cubic-bezier(0.190, 1.000, 0.220, 1.000);
			-webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
			-moz-animation-timing-function:    cubic-bezier(0.190, 1.000, 0.220, 1.000);
			-ms-animation-timing-function:     cubic-bezier(0.190, 1.000, 0.220, 1.000);  }
			.col:first-child {
				animation-delay:         50ms;
				-webkit-animation-delay: 50ms;
				-moz-animation-delay:    50ms;
				-ms-animation-delay:     50ms;}
			.col:nth-child(2) {
				animation-delay:         130ms;
				-webkit-animation-delay: 130ms;
				-moz-animation-delay:    130ms;
				-ms-animation-delay:     130ms; }
			.col:nth-child(3) {
				animation-delay:         210ms;
				-webkit-animation-delay: 210ms;
				-moz-animation-delay:    210ms;
				-ms-animation-delay:     210ms; }
			.col:nth-child(4) {
				animation-delay:         290ms;
				-webkit-animation-delay: 290ms;
				-moz-animation-delay:    290ms;
				-ms-animation-delay:     290ms; }
		
				main {
					position:  relative;
					width:     100%;
					max-width: 100%;
						margin:    0 auto;  }
					main .container {
							padding: 82px 18px 0 18px;  }
			
				@media screen and (min-width: 680px) {
					nav .col {
						width:      50%;
						min-height: 136px;}   }
				@media screen and (min-width: 992px) {
					nav .col {
						width:      auto;
						min-height: 136px;}

						.logo{
							height:   40px;
							width:    auto;
							position: absolute;
							top:      25px;
							left:     40px;}

					.search {
						max-width: 235px; } }
				@media screen and (max-width: 480px) {

					.logo{
						height:   30px;
						width:    auto;
						position: absolute;
						top:      35px;
						left:     40px;}

					.container {
						position: relative;
						margin:   0 auto;
						width:    calc(100vw - 100px);
						padding:  0 50px;}
			
					.menu-trigger{
						right: 20px;
						top:25px;}
			
					nav .col {
						width:      100% !important;
						min-height: 136px; }
			
					nav .social-link{
						margin:1px; }  }
				@media screen and (max-width: 1024px) {
					nav{
						justify-content: flex-start !important;
						align-items:     flex-start !important;}
			
					nav .social-link{
						margin: 10px;  }
			
					nav .col {
						min-height: auto !important;
						text-align: center; }
			
					.col:nth-child(5) {
						display:         flex;
						justify-content: center !important;
						flex-direction:  column;   }
					.search {
						max-width: 235px; }   }
			
			
/* Header */ 
	.header-wrapper{
		width: 100vw;
		height: 50vh;
			min-height: 700px;
		
		background-image: url('Images/Header/mondial-green_blue.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top left;

		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;

		position: relative;

	}
		.header-content{
			width: 50%;
			height: 100%;

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;

			padding-right: 75px;
		}
			.header-mockup{
				position: absolute;
				bottom: 0;
				left: 0;

				height: 400px;
				width: auto;
			}
	
/* Body */
.body-wrapper{
	width: 70vw;
	max-width: 1000px;
	height: auto;

	margin: auto;

	text-align: center;
} 

	.body-wrapper.blue{
		width: 100vw;
		max-width: unset;
		background: #006AB3;
		text-align: center;

		padding-top: 50px;
		padding-bottom: 50px;

		position: relative;
	} 

		.body-wrapper.dark{
			width: 100vw;
			max-width: unset;
			background: #2e2e2e;
			text-align: center;

			padding-top: 50px;
			padding-bottom: 50px;
		} 
			.body-wrapper.dark ul{
				color: white ;
				text-align: left;
			}
				.body-wrapper.dark p{
					color: white ;
					text-align: left;
				}
					.body-wrapper.dark h1{
						text-align: left;
						margin-bottom: 0;
					}
						.body-wrapper.dark .btn{
							margin-top: 50px;
						}



.body-wrapper-content{
	width: 70vw;
	max-width: 1000px;
	margin:auto;
}

.intro-block{
	height: auto;
		min-height: 350px;
	width: 100%; 

	display: flex;
	flex-direction: row;

	justify-content: center;
	align-items: center;

	margin-top: 50px;
}
		.col.right{
		width: 70%; 
		min-width: 300px;
		height: 100%;

		padding:50px;

		display: flex;
		flex-direction: column;
		justify-content: center;

		text-align: left;

		}
		.col.left{
			background-image: url('Images/mobile-lifestyle.jpg');
			background-size: cover;
			background-position: top;
			background-repeat: no-repeat;

			width: 40%; 
			height: 550px;
		}	

		.col.right2{
			width: 50%; 
			min-width: 300px;
			height: auto;
	
			padding:50px;
	
			display: flex;
			flex-direction: column;
			justify-content: center;
	
			text-align: left;
	
			}
			.col.left2{
	
				width: 50%; 
				height: auto;
			}	
			.app-icons{
				width: 300px;
				height: auto;
			}



	.intro-block.second{
		height: auto;
			min-height: 500px;
		width: 100%; 
	
		display: flex;
		flex-direction: row;
	
		justify-content: center;
		align-items: unset !important;
	
		margin-top: 50px;
	}
			.col.even{
				width: 50%; 
				height: 100%;

				display: flex;
				flex-direction: column;
				justify-content: center;

				text-align: left;
			}
				ul p{
					margin: 0;}
					ul ul{
						list-style: disc;}
						li{
							color: #006AB3;}
							p{
							color: black;}


	.image-wrapper{
		width: 100%; 
		height: 65vh;
			min-height: 700px;
		
		background-image: url('Images/Mockups/Tracker_Touch_screens-MotorcycleVantage.png');
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;

		margin-bottom: 100px;
	}

	.features-wrapper{
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: flex-start;

		height: auto;
		width: 100%;

		margin-bottom: 25px; 

		text-align: center;
	}
		.key-feature-wrapper{
			height: 100%;
			width: 27.5%;

			display: flex;
			flex-direction: column;
			align-items: flex-start;

			justify-content: space-evenly;
			align-items: flex-start;
		}
			.feature-content-wrapper{
				display: flex;
				flex-direction: column;

				justify-content: flex-start;
				align-items: flex-start;

				margin-top: 25px;
			}
				.feature-content-wrapper p {
					margin: 0;
					font-size: 18px;
					text-align: left;
				}
					.feature-content-wrapper .grey{
						font-size: 14px !important;
						padding-left: 15px
					}

		.mockups{
			height: 450px;
			width: auto;
			
		}
			.small-mockups{
				height: 200px;
				width: auto;
				
			}
			.img{
				width: 70vw;
				max-width: 1000px; 
				height: auto;

				
				margin: auto;
				margin-bottom: 50px;
				margin-top: -50px;
			}

		.btn {
			margin: auto;
		
			padding: 16px 32px;
	
	
			background-color: #006AB3;
	
			color: black !important;
			font-size: 1.25em !important;
	
			border: 0;
			outline: none;
		}
			.btn:hover {
				background-color:#0090b9;
				cursor: pointer;
				border: 0;
				outline: none;
		
			}
				.btn:focus {
					background-color:#0090b9;
					outline: 0;
				}

		.intro-block.third{
			height: auto;
				min-height: 750px;
			width: 70vw; 
			max-width: 1000px;
		
			display: flex;
			flex-direction: row;
		
			justify-content: center;
			align-items: unset !important;
		
			margin: auto;
			margin-top: 50px;
			margin-bottom: 50px;

			padding: 0;

		
		}
			.intro-block.third .col.even{
				width: 70%; 
				height: 750px;


				display: flex;
				flex-direction: column;
				justify-content: center;

				text-align: left;

				padding-right: 25px;
			}
				.intro-block.third .col.second{
					width: 30% !important; 
					background-image: url('Images/bike-liestyle3.jpg');
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				}
					.intro-block.third .col{
						padding: 0 ;
					}
	
		.accordion {
			width: 100%;
			border-radius: 0px;
			-webkit-border-radius: 0px;
			-moz-border-radius: 0px;

			position: relative;
			z-index: 9999999;
		}
			.accordion .item {
				width: 100%;
				position: relative;
				overflow: hidden;
				margin-bottom: 3px;
				border: 1px solid #dddddd;
			}
				.accordion .item:hover label.menulabel {
					color: #006AB3;;
				}
					.accordion .item label.menulabel {
						width: 100%;
						background-color: #fff;
						color: black !important;
						font-size: 16px !important;
						font-weight: normal;
						display: block;
						width: auto;
						border-bottom: 1px solid #dddddd;
						cursor: pointer;
						position: relative;
						padding: 25px 25px;
						overflow: hidden;
					}
						.accordion .item label.menulabel:after {
							display: none;
							content: "+";
							position: absolute;
							right: 5px;
							margin-top: -20px;
							font-size: 40px;
							color: black !important;
							transition: transform 200ms ease-out;
							-webkit-transition: transform 200ms ease-out;
							-moz-transition: transform 200ms ease-out;
						}
							label.menulabel p {
								font-size: 16px !important;
								font-weight: bold;
							}

								.accordion .item input[type="radio"],
								.accordion .item input[type="checkbox"] {
									position: absolute;
									top: 15px;
									right: 15px;
									width: 15px;
									height: 15px;
									border: 0px;
									z-index: 999;
								}
									.accordion .item input[type="radio"][hidden="hidden"],
									.accordion .item input[type="checkbox"][hidden="hidden"] {
										visiblity: hidden;
										top: -100%;
									}
										.accordion .item input[type="radio"][hidden="hidden"] + label:after,
										.accordion .item input[type="checkbox"][hidden="hidden"] + label:after {
											display: block;
										}
											.accordion .item input[type="radio"]:focus,
											.accordion .item input[type="checkbox"]:focus {
												outline: none;
											}
												.accordion .item input[type="radio"]:checked ~ .acoordion-content,
												.accordion .item input[type="checkbox"]:checked ~ .acoordion-content {
													padding: 10px 20px;
													height: auto;
												}
													.accordion .item input[type="radio"]:checked + label.menulabel,
													.accordion .item input[type="checkbox"]:checked + label.menulabel {
														color: black;
													}
														.accordion .item input[type="radio"]:checked + label.menulabel:after,
														.accordion .item input[type="checkbox"]:checked + label.menulabel:after {
															-ms-transform: rotate(45deg);
															-webkit-transform: rotate(45deg);
															-moz-transform: rotate(45deg);
															transform: rotate(45deg);
														}
															.accordion .item .acoordion-content {
																padding: 0px 20px;
																height: 0px;
																background-color: #fff;
																color:black;
																overflow: hidden;
																transition: padding 200ms ease-in-out;
																-webkit-transition: padding 200ms ease-in-out;
																-moz-transition: padding 200ms ease-in-out;
															}
																.accordion .item .acoordion-content p.grey{
																font-size: 16px;
															}
				
		.intro-block.fourth{
			height: auto;
			width: 90vw;
			max-width: 750px; 
		
			display: flex;
			flex-direction: column;
		
			justify-content: center;
			align-items: unset !important;
		
			margin: auto;
			margin-top: 50px;
			margin-bottom: 50px;

			padding: 0;

			color: White;
			text-align: center;

		
		}
			.intro-block.fourth p {
				color: white;

				font-family: 'Montserrat-regular';
				font-size: 16px;

				margin-top: 50px;
			}

		.tracker-logo{
			margin:auto;
			margin-top: 25px;
			margin-bottom: 0;
			width: 250px;
		}

		.footer-mockup{
			position: absolute;
			bottom: 0;
			right:0px;

			height: 400px;
			width: auto;
		}

		.video-review-wrapper iframe {
			width: 560px;
			height: 315px;
			margin: auto;
			margin-top: 25px;
	}

	.video-review-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    position: relative;
}

		@media screen and (max-width: 950px) {


			iframe {
				height: 80vh;
				width: 100%;
				margin: auto;
			}

			.footer-mockup{
				position: absolute;
				bottom:0;
				right: 0;
	
				height: 250px;
				width: auto;
			}

			.maintenance{
				background-image: url('Images/Background/mondial-header.jpg');
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
			
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-end;
			
				position: relative;
			
				padding: 0;
				margin:auto;
			
				height: 100vh;
				width:100vw;
			
				text-align: left;
			}
				.maintenance-content{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				
					width: 100%;

					text-align: center;
				}
					.maintenance h2{
					font-size: 36px;
					margin-bottom: 25px;
					}	
						.maintenance h5{
							
							margin-bottom: 10px;
							}
						
				.social-link{
					font-size: 22px;
					color: #FFFFFF;
				
					display: inline;
				
					margin: 10px;
				}
					.maintenance-logo{
						width: 250px;
						text-align: left;
					}
					.maintenance-mockup{
						position: absolute;
						bottom: 0%;
						right: 0;

						height: 250px;
						width: auto;
					}


			h1{
				font-family: 'Montserrat';
				font-size: 38px;
				
				letter-spacing: 0.1em;
			
				color: #FFFFFF;
			}
				h1.h1smaller{
					font-family: 'Montserrat';
					font-size: 28px;
					
					letter-spacing: 0.1em;
				
					color: #006AB3;
				}

			h2{
				font-family: 'Montserrat';
				font-size: 28px;
				
				letter-spacing: 0.1em;
				margin: 10px;
			
				color: #FFFFFF;
			}

			h3{
				font-family: 'Univers';
				font-size: 32px;
				
				letter-spacing: 0.1em;
				margin: 0;
	
				color: #006AB3;
			}

			p{
				font-family: Helvetica;
				font-size: 16px;
				letter-spacing: 0.15em;
			}
				.grey{
						font-family: Helvetica;
						font-size: 16px;
						letter-spacing: 0.15em;
						
						color: #A2A2A2 !important;
						margin-bottom: 25px !important;
					}

			ul{
				padding-inline-start: 20px; 
			}

			.hide{
				display: none;
			}

			.header-wrapper{
				width: 100vw;
				height: 50vh;
					min-height: 700px;
				
				background-image: url('Images/Header/mondial-green_blue.jpg');
				background-size: cover;
				background-repeat: no-repeat;
				background-position: 30%;
		
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: flex-end;
		
				position: relative;
		
			}
				.header-content{
					width: 100%;
					height: 100%;
		
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
				}
					.header-mockup{
						position: absolute;
						bottom: 0;
						left: 0;
			
						height: 225px;
						width: auto;
					}
			
		
			.intro-block{
				height: auto;
					min-height: 500px;
				width: 100%; 
			
				display: flex;
				flex-direction: column-reverse;
			
				justify-content: center;
				align-items: center;
			
				margin-top: -50px;
			}
				.col.right{
					width: 100%; 
					height: 100%;
				
					padding:50px;
				
					display: flex;
					flex-direction: column;
					justify-content: center;
				
					text-align: left;
				
					}
				.col.left{
					background-image: url('Images/mobile-lifestyle.jpg');
					background-size: cover;
					background-position: top;
					background-repeat: no-repeat;
			
					width: 100%; 
					height: 500px;
				}	
		
				.intro-block.second{
				height: auto;
					min-height: 500px;
				width: 100%; 
			
				display: flex;
				flex-direction: column;
			
				justify-content: center;
				align-items: unset !important;
			
				margin-top: 50px;
			}
				.col.even{
					width: 100%; 
					height: 100%;
		
					padding:0;
		
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
		
					text-align: left;
				}
					.col.even.second h1{
						display: none;	
					}

			.app-icons{
				width: 250px;
				height: auto;
			}

			.img{
				width: 70vw;
				max-width: 1000px; 
				height: auto;

				margin-bottom: 25px;
				margin-top: 0px;
			}


			.features-wrapper{
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;

				height: auto;
				width: 100%;

				text-align: center;

				margin: 0 !important;
			}

			.key-feature-wrapper{
				height: 100%;
				width: 100%;

				display: flex;
				flex-direction: column;

				justify-content: space-evenly;
				align-items: center;
			}
				.feature-content-wrapper{
					display: flex;
					flex-direction: column;

					justify-content: flex-start;
				}
					.feature-content-wrapper p {
						margin: 0;
					}

			.mockups{
				height: 350px;
				width: auto;
				
			}

			.tracker-logo{
				margin:auto;
				margin-top: 0;
				margin-bottom: 0;
				width: 250px;
			}

			.intro-block.fourth p {
				color: white;
	
				font-family: 'Montserrat-regular';
				font-size: 22px;
			}

			label.menulabel p {
				font-size: 14px !important;
				font-weight: bold;
			}

			.accordion .item .acoordion-content p.grey {
				font-size: 12px !important;
			}
				.accordion .item label.menulabel:after {
					display: none;
					content: "+";
					position: absolute;
					top: unset;
					right: 25px;
					margin-top: -20px;
					font-size: 40px;
					color: black !important;
					transition: transform 200ms ease-out;
					-webkit-transition: transform 200ms ease-out;
					-moz-transition: transform 200ms ease-out;
				}
					.accordion .item label.menulabel {
						width: 100%;
						background-color: #fff;
						color: black !important;
						font-size: 18px !important;
						font-weight: normal;
						display: block;
						width: 90%;
						border-bottom: 1px solid #dddddd;
						cursor: pointer;
						position: relative;
						padding: 20px 20px;
						overflow: hidden;
					}


	}
	@media screen and (max-width: 1025px) {
		.body-wrapper{
			width: 85vw;
			height: auto;
		
			margin: auto;
		
			text-align: center;
		} 



	}

		@media screen and (max-width: 1490px){

			.header-content {
				width: 50%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				padding-right: 50px;
		}
	

			.intro-block{
				height: auto;
					min-height: 350px;
				width: 100%; 
			
				display: flex;
				flex-direction: row;
			
				justify-content: center;
				align-items: center;
			
				margin-top: 25px;
			}

			h1.h1smaller{
				font-family: 'Montserrat';
				font-size: 32px;
				
				letter-spacing: 0.1em;

				color: #006AB3;
			}

			h2{
				font-family: 'Montserrat';
				font-size: 38px;
				
				letter-spacing: 0.1em;
				margin: 0;
	
				color: #FFFFFF;
			}

			.intro-block.third{
				height: auto;
				width: 90vw; 
			
				display: flex;
				flex-direction: column;
			
				justify-content: center;
				align-items: unset !important;
			
				margin: auto;
				margin-top: 50px;
				margin-bottom: 50px;

				padding: 0;
			}

				.maintenance-mockup{
					position: absolute;
					bottom: 0%;
					right: 0;

					height: 300px;
					width: auto;
				}

			}
				.intro-block.third .col.even{
					width: 100%; 
					height: auto;


					display: flex;
					flex-direction: column;
					justify-content: center;

					text-align: left;

				}
					.intro-block.third .col.even{
						width: 100%; 
						height:auto;


						display: flex;
						flex-direction: column;
						justify-content: center;

						text-align: left;

						padding-right: 0;

						margin-bottom: 50px;
					}
						.intro-block.third .col.second{
							width: 80% !important;
							height: 500px;
							margin: auto;
							margin-left: 25px;
						}
		



		 /* Footer */
		 .footer{
      width:          calc(100vw - 80px);
      height:         55px;
      background:     black;

      display:        flex;
      flex-direction: row;
      align-items:    center;

      padding-left:   40px;
      padding-right:  40px;
      margin: 0;

		}
		
      .footer-left{
        width:          100%;
        display:        flex;
        flex-direction: row;
      }
        .footer-left h3{
		  font-family: 'Helvetica';
		  font-weight: 100;
          font-size:  14px;
          margin:     auto 15px;
          color: white !important;

          text-decoration: none !important;
        }
        .footer-left a{
          text-decoration: none;
        }
		
				.footer-right{
        width:           50%;
        display:         flex;
        flex-direction:  row;
        align-items:     center;
        justify-content: flex-end;
      }
        .footer-icon{
          color:       #B5B5B5;
          font-size:   22px;
          margin: auto 15px;
        }
          .footer-icon:hover{
            color:      white;
            font-size:   22px;
            margin: auto 15px;
          }
  /* /Footer */


  @media screen and (max-width: 1025px) {
	
    .footer{
        flex-direction: column;
        height:         auto;
        padding:        5px !important;
        width:          100vw !important;
        padding:        0;
        margin:         0;
    }
        .footer-left{
            width:          100%;
            justify-content: center;
        }
   
        .footer-right{
            width:          100%;
            justify-content: center;
            
        }

    .footer{
        width:          calc(100vw - 80px);
        height:         55px;
        background:     black;

        display:        flex;
        flex-direction: row;
        align-items:    center;

        padding-left:   40px !important;
        padding-right:  40px !important;
        padding: 0 !important;
        margin: 0;
    }
}

@media screen and (max-width: 780px) {
    .footer{
        flex-direction: column;
        height:         150px;
        padding:        0 !important;
        margin: 0;
				padding-top:    20px !important;
				bottom: -150px !important;
      }
    
        .footer-left{
          width:           100%;
          justify-content: center;
          flex-direction:  column;
          text-align:      center;
        }
        .footer-right{
          width:           100%;
          justify-content: center;
          margin-top:      20px;
				}
				
				.header-content {
					width: 90%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					padding-right: 0;
			}

			.cookie-button{
				background: black;
				color: white;
				padding: 10px;
				margin: auto;
				text-align: center;
			
				font-size: 16px;
				font-family: 'Univers';
				letter-spacing: 1.5px;
			
				text-transform: uppercase;
			
				margin-left: 0;

				margin-top: 10px;
			
				cursor: pointer;
			}
    
    
    
}


@media screen and (max-width: 320px){
.logo {
    height: 25px;
    width: auto;
    position: absolute;
    top: 35px;
    left: 10px;
}
}