/* natUIve – rado.bg */

@charset 'utf-8';

@import 'natuive-setup';
@import 'theme-variables'; /* Rewrite base variables here; add theme CSS below this one in <head> */
@import 'natuive-grid';
@import 'natuive-typography';
@import 'natuive-button';
@import 'natuive-form';
@import 'natuive-table';
@import 'natuive-nav';
@import 'natuive-list';
@import 'natuive-fold';
@import 'natuive-tooltip';
@import 'natuive-card';
@import 'natuive-slider';

// Separate natuive-extra.css for JS-enhanced content
/*
@import 'natuive-slider-extra'; // Not core
@import 'natuive-parallax'; // Not core
@import 'natuive-lightbox'; // Not core
@import 'natuive-modal'; // Not core
*/

.contain {

	max-width: 82*$font-size;
	margin: 0 auto;
    width: 100%;

}
	
/* Basic elements */

html, body {
	
	height: 100%;
	margin: 0 auto;
	overflow-x: hidden;
	
}

body {

	position: relative;
	overflow: hidden;
	width: 100%;
	height: auto;
	min-height: 100%;
	display: flex;  /* Sticky footer */
	flex-direction: column;
	-webkit-tap-highlight-color: rgba(0,0,0,.5);
	
	color: $color; /* Fallback when CSS variables aren't supported */
	color: var(--color);
	background: $bg;
	background: var(--bg);
	
}

body * {
	
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0); /* iOS: Don't flash on tap */
	
}

img, picture, .lightbox a {
	
	max-width: 100%; // Prevent images overflowing
	height: auto;
	border: none;
	text-align: center;
	
}

html.nooverflow, html.nooverflow body {
	
	overflow: hidden;

}

html.can-touch.nooverflow, html.can-touch.nooverflow body {
	
	height: 100%;

}

.header-and-banner {

	flex: none;	

}

.viewport.header-and-banner {
	
	min-height: 100vh;
	overflow: auto;
	display: flex;
	flex-direction: column;

}

.viewport.header-and-banner .banner {

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

}

.viewport.header-and-banner.push-up:after { // Move centered content up, because the middle seems low
	
	content: '';
	flex-grow: 1;

}

header .row {
	
	padding: 0;
	
}


header a.logo {
	
	display: inline-block;
	min-height: 46px; /* Don't shift page after image is loaded */

}

.wide-screen {
	
	display: block;
	
}

.narrow-screen {
	
	display: none !important;
	
}
	
/* Main */

main#content {
	
	flex: 1 0 auto; // Sticky footer
	
}

/* Footer */

footer {
	
	flex: none;
	position: relative; // Because of the backtotop button
// 	padding-bottom: 3em;
    padding: 1em 0;
	
}

footer .row > * {
	
	position: static;

}

video {
	
	height: auto !important;
	background: #000;
	margin: 0 auto;
	display: block;
	max-width: 100%;

	a[href] {
		
		color: #fff;
	
	}

}

/* Overthrow CSS:
   For Mobile devices not supporting overflow: scroll. Enable overflow: auto on elements with overthrow class when html element has overthrow class too */
.overthrow-enabled .overthrow {

    overflow: auto;
    -webkit-overflow-scrolling: touch;

}

/* Element as a window to an image spanning viewpoert dimensions. iOS doesn't support it natively and requires div.fixed-bg-image */

.fixed-bg {

	background-size: cover;
	background-position: center center;

}

@supports (clip: rect(auto, auto, auto, auto)) {

	.fixed-bg { 
	
	    will-change: scroll;
	    background-size: 0;
	    position: relative;
	
	}
	
		.fixed-bg .fixed-bg-image, .fixed-bg .fixed-bg-image:before {
	
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: inherit;
	
		}
		
		.fixed-bg .fixed-bg-image {
			
			position: absolute;
			background-size: 0;
			z-index: -1;
			clip: rect(auto, auto, auto, auto);
		
		}
		
		.fixed-bg .fixed-bg-image:before {
			
			content: '';
			position: fixed;
			background-size: cover;
			background-position: center center;
			height: 100vh; // Mobile browser resize when hiding/showing toolbars
		
		}

		.fixed-bg .fixed-bg-image:before {

			transform: translate3d(0,0,0); // Force refresh while scrolling (iPad), fix missing image parts on (macOS Safari)

		}
		
}

@supports (-ms-ime-align:auto) { // Disable jumpy Edge
	
	.fixed-bg {
		
		background-size: cover;
		
	}
		
	.fixed-bg .fixed-bg-image {
		
		display: none;

	}
	
}

/* Notification bar */

.notify {

	background: rgba(0, 0, 0, .8);
	text-align: center;
	padding: 1em;
	color: #fff;
	cursor: pointer;

}

.notify:after {
	
	content: ' ✕';

}

.notify.fixed {

	font-weight: 500;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 2;

}

.fixed {
	
	position: fixed;

}

header.fixed {
	
	position: static;	
	
}

a[href].span-relative-parent {
	
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	
}

[data-animation] { // Speed up animated elements
	
	pointer-events: none;

}

// Fallback before loading the full parallax CSS

.parallax-back {

	position: absolute;

}

/* Narrow Screens */

@media screen and (max-width: $screen-narrow-max) {

	header {
		
		margin: 0;
		
	}
		
	.wide-screen {
		
		display: none !important;
		
	}

	.narrow-screen {
		
		display: block !important;
		
	}

	.viewport.header-and-banner {
		
		height: auto;
		overflow: hidden;
		
	}
	
	header > .row:first-child div {
		
		text-align: end;
		
	}
 		
		header .head-right {
			
			text-align: start;
		
		}
	
	header.fixed {
		
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #fff;
		z-index: 7;
	
	}

	header.fixed > .row {

		min-height: $line-height-em*2;

	}
		
	header.fixed .row > * {
		
		padding: 0;
		margin: 0;

	}
	
	header.fixed a.logo {
		
		padding: .5em;

	}
	
	header.fixed .logo img {
		
		height: 1.5em;

	}
	
	footer .row > * {
		
		display: inline-block;
		
	}

	footer .row p {
		
		margin: 0;
		
	}
	
	header a.logo {
		
		float: right;
	
	}

}
