html {
	scroll-behavior: smooth;
}

@keyframes bounce {
	0% {top: 85%;}
	25% {top: 82.5%;}
	50% {top: 85%;}
	75% {top: 82.5%;}
	100% {top: 85%;}
}

.navbar {
	background: white;
	padding-left: 5%;
	padding-right: 5%;
}

.navbar-brand img {
	max-width: 100%;
	height: 50px;
}

.hero {
	height: 100vh;
	width: 100vw;
	margin: 0;
	background: url('../res/images/technology.gif');
	background-repeat: no-repeat;
	background-size: cover;
}

.hero .logo-and-roll-text {
	width: 100%;
	height: auto;
	position: absolute;
	top: 40%;
}

.hero .roll-text {
	display: inline-block;
	overflow: hidden;
	background: rgba(0,0,0,0.4);
	width: 60%;
	vertical-align: top;
}

.hero .roll-text span.hide {
	top: 40px;
}

.hero .roll-text span {
	color: white;
	position: relative;
	top: 0;
	display: inline-block;
	transition-property: top;
	transition-duration: 1s;
	transition-delay: initial;
	transition-timing-function: initial;
}

.hero .roll-text span h2 {
	text-align: center;
}

.hero svg {
	top: 87.5%;
	opacity: 0.7;
	transition: opacity 1s;
	animation-name: bounce;
	animation-duration: 2s;
	animation-delay: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.hero svg:hover {
	opacity: 1;
}

.underline {
	width: 30%;
	height: 5px;
	background: cornflowerblue;
}

.company {
	width: 100vw;
	height: auto;
	padding-top: 7%;
}

.content {
	width: 83.33%;
	position: relative;
}

.swiper-container {
	padding: 5% 0 5% 0;
	overflow: hidden;
	position: relative;
}

#company, #people, #markets, #services {
	padding: 3.5% 0 3.5% 0;
	border-bottom: 1px solid;
	border-image-slice: 1;
	border-image-source: linear-gradient(to right, #fff 8%, #333, #888, #333, #fff 92%);
}

#company .description {
	padding: 5% 0 5% 0;
}

#company {
	padding-top: 5%;
}

#company.col-sm {
	width: 50%;
}

#people .row {
	padding: 5% 0 5% 0;
}

#people .col-sm-4 {
	position: relative;
}

#people .cv {
	text-align: center;
}

#people .read-more:hover {
	text-decoration: underline;
}

#services .col-sm {
	height: 20vw;
	border: 5px solid white;
	background-repeat: no-repeat;
	background-size: cover;
}

#services .col-sm .banner {
	width: 80%;
	background: white;
	position: relative;
	top: 49.5%;
	left: 10%;
	text-align: center;
	opacity: 0.8;
}

#services .col-sm:hover > .banner {
	opacity: 1;
}

.hide {
	display: none;
}

.info {
	padding: 2.5% 0% 2.5% 2.5%;
}

.swiper-slide img {
	margin: 0 auto 0 auto;
	display: block;
}

.contact {
	background: #3243A8;
	text-align: center;
	padding: 5em 0 5em 0;
}

.contact h2 {
	color: white;
}

@media only screen and (max-width: 461px) {
	* {
		max-width: !important 100%;
		padding: !important 0;
	}

	.navbar-toggler {
		width: 100%;
	}

	.hero .roll-text span h2 {
		font-size: 20px;
	}

	.hero .roll-text span.hide {
		top: 100px;
	}

	.navbar-brand img {
		width: calc(100vw - 10%);
		max-width: 100%;
		height: auto;
	}

	.navbar-brand {
		width: 100vw;
		max-width: 100%;
	}

	.navbar {
		padding: 1%;
		width: 100vw;
		max-width: 100%;
	}
}