/*
Mobile
______ overwrite to make site responsive
*/


.container, header, .nav-row, .elevator, .about {
	max-width: 980px;
	width: 100%;
}

iframe {
	width: 100% !important;
}

.logo {
	width: 290px;
	height: 87px;
	background-size: contain;
}


@media only screen and (min-width: 320px) {

		.logo {
			margin-top: 40px;
		}

		/* 	Second nav - faq */

		.sec-nav {
			position: absolute;
			bottom: 0;
		}

		/* 	Language navigation */

		.lang-nav {
			position: absolute;
			right: 50px;
		}

		/* 	Search field */

		.header-search {
			width: 100%;
			margin-bottom: 60px;
			padding-top: 0px;
		}
		.header-search .inputText {
			width: 100%;
			padding: 10px;
			height: 0%;
			border-right: 1px solid #e4e4e4;
		}
		.header-search button {
			width: 100%;
			padding: 10px;
			height: 0%;
		}
		.ui-autocomplete {
			width: 80% !important;
		}

		/* 	Main navigation */

		.main-nav .bottom {
			display: none;
		}
		.main-nav ul li {
			display: block;
			float: none;
		}
		.main-nav a {
			padding: 10px;
		}
		.main-nav li.home a, .main-nav li.home a:hover {
			width: 100%;
			background-position: center center;
		}
		.nav-row {
			border-bottom: 0px solid #e4e4e4;
		}


		/* Grid */

		.col-2, .col-3, .col-4, .col-6, .col-8, .col-12 {
			width: 100%;
			display: inline;
			float: left;
		}

		/* Elevator banner homepage */

		.elevator img {
			display: none;
		}

		/* Teasers articles */

		.sub-pages .col-6 {
			margin-bottom: 40px;
		}
		.sub-pages .row.overview {
			margin-bottom: 0;
		}
		img.right-align {
			float: none;
			margin: 10px 0 10px 0;
		}

		/* Inset image button */

		.inset-image {
			position: relative;
  		top: -41px;
  		display: block;
  		width: 100px;
  		text-align: center;
		}

		/* Contactpage form fields */
		.contact .inputText, .contact textarea {
			width: 100%;
		}


		/* ------------------
		---- Mobile menu ----
		------------------ */

			.c-mobile-menu {
			  border-right: 1px solid #e5e5e5;
			  padding: 40px 0;
				position: fixed;
				left: 0;
				top: 0;
				height: 100%;
				width: 250px !important;
				left: -250px;
				background: #fff;
				overflow-x: hidden;
				overflow-y: auto;
				transition: all .2s ease-in-out;
				z-index: 1000;
			}
			.c-mobile-menu {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			.c-mobile-menu ul li {}
			.c-mobile-menu ul li a {
				display: block;
				padding: 10px 15px;
			}
			.c-mobile-menu--push {
				left: 0 !important;
				transition: all .2s ease-in-out;
			}
			.c-menu-icon {
				width: 3rem;
				height: 3rem;
				position: absolute;
				top: 0px;
				right: 10px;
			}


		/* ------------------
		---- Lines button ---
		---- http://sarasoueidan.com/blog/navicon-transformicons/
		------------------ */

			.lines-button {
			  padding: 0;
			  transition: .3s;
			  cursor: pointer;
			  user-select: none;
			  border-radius: 0.57143rem;
			  background: transparent;
			}
			.lines-button:hover {
			  opacity: 1;
			}
			.lines-button:active {
			  transition: 0;
			}

			.lines {
			  display: inline-block;
			  width: 2.5rem;
			  height: 0.4rem;
			  background: #484d5a;
			  border-radius: 0.28571rem;
			  transition: 0.3s;
			  position: relative;
			}
			.lines:before, .lines:after {
			  display: inline-block;
			  width: 2.5rem;
			  height: 0.4rem;
			  background: #484d5a;
			  border-radius: 0.28571rem;
			  transition: 0.3s;
			  position: absolute;
			  left: 0;
			  content: '';
			  -webkit-transform-origin: 0.28571rem center;
			  transform-origin: 0.28571rem center;
			}
			.lines:before {
			  top: 0.8rem;
			}
			.lines:after {
			  top: -0.8rem;
			}
			.lines-button.open {
			  -webkit-transform: scale3d(0.8, 0.8, 0.8);
			  transform: scale3d(0.8, 0.8, 0.8);
			}
			.lines-button.x.open .lines {
			  background: transparent;
			}
			.lines-button.x.open .lines:before, .lines-button.x.open .lines:after {
			  -webkit-transform-origin: 50% 50%;
			  transform-origin: 50% 50%;
			  top: 0;
			  width: 3rem;
			}
			.lines-button.x.open .lines:before {
			  -webkit-transform: rotate3d(0, 0, 1, 45deg);
			  transform: rotate3d(0, 0, 1, 45deg);
			}
			.lines-button.x.open .lines:after {
			  -webkit-transform: rotate3d(0, 0, 1, -45deg);
			  transform: rotate3d(0, 0, 1, -45deg);
			}
}

@media only screen and (min-width: 480px) {

	.logo {
		margin-top: 10px;
	}

		/* 	Search field */

		.header-search {
			width: 266px;
			padding-top: 70px;
		}
		.header-search .inputText {
			width: 180px;
			padding: 10px;
			height: 40px;
			border-right: 1px solid #e4e4e4;
		}
		.header-search button {
			width: 86px;
			padding: 10px;
			height: 40px;
		}


		/* Contactpage form fields */

		.contact .inputText, .contact textarea {
			width: 400px;
		}

}
@media only screen and (min-width: 768px) {

		/* 	Second nav - faq */

		.sec-nav {
			display: block;
			position: absolute;
			right: 20px;
			bottom: 0px;
		}

		/* Grid */

		.col-2 {width: 16.66667%;}
		.col-3 {width: 25%;}
		.col-4 {width: 33.33333%;}
		.col-6 {width: 50%;}
		.col-8 {width: 66.66667%;}
		.col-12{width: 100%;}

		/* Teasers articles */

		img.right-align {
			float: right;
	  	margin: 0 0 10px 10px;
		}

		/* Elevator banner homepage */

		.elevator img {
			display: block;
		}
}

@media only screen and (min-width: 930px) {

		/* 	Second nav - faq */

		.sec-nav {
			position: relative;
			top: 0;
		}

		/* 	Main navigation */

		.main-nav .bottom {
			display: block;
		}
		.main-nav ul li {
			display: inline-block;
			background: none;
			float: left;
		}
		.main-nav a {
			padding: 0px;
		}
		.main-nav li.home a {
			width: 22px;
		}
		.nav-row {
			border-bottom: 1px solid #e4e4e4;
		}

		/* 	Mobile menu */
		.c-menu-icon {
			display: none;
		}

		/* 	Search field */

		.ui-autocomplete {
			width: 395px !important;
		}
}