/* natUIve – rado.bg */

@charset 'utf-8';

// Maybe drop SCSS when CSS variables become widely supported in March 2016. Combine with Grunt.
@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-accordion';
@import 'natuive-tooltip';
@import 'natuive-slider';
@import 'natuive-modal';
@import 'natuive-parallax';
@import 'natuive-card';

.contain {

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

}
	
/* Basic elements */

html {
	
	overflow-x: hidden;

}

html, body {
	
	height: 100%;
	margin: 0 auto;
	
}

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);
	
}

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

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

}

.animate-scroll {

	pointer-events: none !important;
	-webkit-transition: -webkit-transform .4s ease;
	transition: transform .4s ease;

}

.no-hover {

	pointer-events: none !important;

}

.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 {
	
	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 */

}

header form#language-selector select {
	
	padding-right: 2em;

}

.wide-screen {
	
	display: block;
	
}

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

main#content {
	
	flex: 1 0 auto;
	
}

/* Footer */

footer {
	
	flex: none;
	position: relative; // backtotop button
	
}

footer .row > * {
	
	position: static;

}

.quote, blockquote {
	
	margin-left: 1em;
	border-left: 1px solid #bbb;
	padding-left: 1em;
	
}

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

}

video a[href] {
	
	color: #fff;

}

/* Image aspect ratio – don't shift the page after loading the image */

.aspect {
	
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    
}

	@-moz-document url-prefix() { // Disabled in FF because it doesn't work there

		.aspect { display: block; }

	}

	.aspect > img {
		
		max-width: 100%;
		height: auto;
		margin: 0 auto;
	
	}
	
	.aspect span { /*  Ratio can be overwritten with inline CSS padding-bottom */
	
		padding-bottom: 56.25%; /*    y / x * 100   default 16:9    */
	
	}

/* 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;

}

.fixed-background { /* Element as a window to an image spanning viewpoert dimensions */

	background-attachment: fixed;
	background-size: cover;
	
}

/* 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;

}

/* Narrow Screens */

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

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

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

	.viewport.header-and-banner {
		
		height: auto;
		
	}
	
	header > .row:first-child div {
		
		text-align: end;
		
	}
 	
		form#language-selector select {
			
			height: auto;
			width: 100%;
			background-position: calc(100% - .5em);
			margin-left: 0;
			
		}

		header .head-right {
			
			text-align: start;
		
		}
	
	.semi-transparent main, .semi-transparent footer, .semi-transparent header > .row {
		
		opacity: .1;
	
	}
	
	footer .row > * {
		
		display: inline-block;
		
	}

	footer .row p {
		
		margin: 0;
		
	}
	
}
