@charset "UTF-8";

@font-face {
    font-family: 'Greycliff CF';
    src: url('../fonts/GreycliffCF-MediumOblique.eot');
    src: url('../fonts/GreycliffCF-MediumOblique.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-MediumOblique.woff2') format('woff2'),
        url('../fonts/GreycliffCF-MediumOblique.woff') format('woff'),
        url('../fonts/GreycliffCF-MediumOblique.ttf') format('truetype'),
        url('../fonts/GreycliffCF-MediumOblique.svg#GreycliffCF-MediumOblique') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('../fonts/GreycliffCF-HeavyOblique.eot');
    src: url('../fonts/GreycliffCF-HeavyOblique.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-HeavyOblique.woff2') format('woff2'),
        url('../fonts/GreycliffCF-HeavyOblique.woff') format('woff'),
        url('../fonts/GreycliffCF-HeavyOblique.ttf') format('truetype'),
        url('../fonts/GreycliffCF-HeavyOblique.svg#GreycliffCF-HeavyOblique') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('../fonts/GreycliffCF-Light.eot');
    src: url('../fonts/GreycliffCF-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-Light.woff2') format('woff2'),
        url('../fonts/GreycliffCF-Light.woff') format('woff'),
        url('../fonts/GreycliffCF-Light.ttf') format('truetype'),
        url('../fonts/GreycliffCF-Light.svg#GreycliffCF-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('../fonts/GreycliffCF-Bold.eot');
    src: url('../fonts/GreycliffCF-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-Bold.woff2') format('woff2'),
        url('../fonts/GreycliffCF-Bold.woff') format('woff'),
        url('../fonts/GreycliffCF-Bold.ttf') format('truetype'),
        url('../fonts/GreycliffCF-Bold.svg#GreycliffCF-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('../fonts/GreycliffCF-Medium.eot');
    src: url('../fonts/GreycliffCF-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-Medium.woff2') format('woff2'),
        url('../fonts/GreycliffCF-Medium.woff') format('woff'),
        url('../fonts/GreycliffCF-Medium.ttf') format('truetype'),
        url('../fonts/GreycliffCF-Medium.svg#GreycliffCF-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('../fonts/GreycliffCF-ExtraBold.eot');
    src: url('../fonts/GreycliffCF-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-ExtraBold.woff2') format('woff2'),
        url('../fonts/GreycliffCF-ExtraBold.woff') format('woff'),
        url('../fonts/GreycliffCF-ExtraBold.ttf') format('truetype'),
        url('../fonts/GreycliffCF-ExtraBold.svg#GreycliffCF-ExtraBold') format('svg');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('../fonts/GreycliffCF-Heavy.eot');
    src: url('../fonts/GreycliffCF-Heavy.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-Heavy.woff2') format('woff2'),
        url('../fonts/GreycliffCF-Heavy.woff') format('woff'),
        url('../fonts/GreycliffCF-Heavy.ttf') format('truetype'),
        url('../fonts/GreycliffCF-Heavy.svg#GreycliffCF-Heavy') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('../fonts/GreycliffCF-Regular.eot');
    src: url('../fonts/GreycliffCF-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-Regular.woff2') format('woff2'),
        url('../fonts/GreycliffCF-Regular.woff') format('woff'),
        url('../fonts/GreycliffCF-Regular.ttf') format('truetype'),
        url('../fonts/GreycliffCF-Regular.svg#GreycliffCF-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('../fonts/GreycliffCF-ExtraLightOblique.eot');
    src: url('../fonts/GreycliffCF-ExtraLightOblique.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-ExtraLightOblique.woff2') format('woff2'),
        url('../fonts/GreycliffCF-ExtraLightOblique.woff') format('woff'),
        url('../fonts/GreycliffCF-ExtraLightOblique.ttf') format('truetype'),
        url('../fonts/GreycliffCF-ExtraLightOblique.svg#GreycliffCF-ExtraLightOblique') format('svg');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('../fonts/GreycliffCF-DemiBold.eot');
    src: url('../fonts/GreycliffCF-DemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-DemiBold.woff2') format('woff2'),
        url('../fonts/GreycliffCF-DemiBold.woff') format('woff'),
        url('../fonts/GreycliffCF-DemiBold.ttf') format('truetype'),
        url('../fonts/GreycliffCF-DemiBold.svg#GreycliffCF-DemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff';
    src: url('../fonts/GreycliffCF-BoldOblique.eot');
    src: url('../fonts/GreycliffCF-BoldOblique.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-BoldOblique.woff2') format('woff2'),
        url('../fonts/GreycliffCF-BoldOblique.woff') format('woff'),
        url('../fonts/GreycliffCF-BoldOblique.ttf') format('truetype'),
        url('../fonts/GreycliffCF-BoldOblique.svg#GreycliffCF-BoldOblique') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('../fonts/GreycliffCF-RegularOblique.eot');
    src: url('../fonts/GreycliffCF-RegularOblique.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-RegularOblique.woff2') format('woff2'),
        url('../fonts/GreycliffCF-RegularOblique.woff') format('woff'),
        url('../fonts/GreycliffCF-RegularOblique.ttf') format('truetype'),
        url('../fonts/GreycliffCF-RegularOblique.svg#GreycliffCF-RegularOblique') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('../fonts/GreycliffCF-Thin.eot');
    src: url('../fonts/GreycliffCF-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-Thin.woff2') format('woff2'),
        url('../fonts/GreycliffCF-Thin.woff') format('woff'),
        url('../fonts/GreycliffCF-Thin.ttf') format('truetype'),
        url('../fonts/GreycliffCF-Thin.svg#GreycliffCF-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF Thin Oblique';
    src: url('../fonts/GreycliffCF-ThinOblique.eot');
    src: url('../fonts/GreycliffCF-ThinOblique.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-ThinOblique.woff2') format('woff2'),
        url('../fonts/GreycliffCF-ThinOblique.woff') format('woff'),
        url('../fonts/GreycliffCF-ThinOblique.ttf') format('truetype'),
        url('../fonts/GreycliffCF-ThinOblique.svg#GreycliffCF-ThinOblique') format('svg');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('../fonts/GreycliffCF-ExtraBoldOblique.eot');
    src: url('../fonts/GreycliffCF-ExtraBoldOblique.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-ExtraBoldOblique.woff2') format('woff2'),
        url('../fonts/GreycliffCF-ExtraBoldOblique.woff') format('woff'),
        url('../fonts/GreycliffCF-ExtraBoldOblique.ttf') format('truetype'),
        url('../fonts/GreycliffCF-ExtraBoldOblique.svg#GreycliffCF-ExtraBoldOblique') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('../fonts/GreycliffCF-LightOblique.eot');
    src: url('../fonts/GreycliffCF-LightOblique.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-LightOblique.woff2') format('woff2'),
        url('../fonts/GreycliffCF-LightOblique.woff') format('woff'),
        url('../fonts/GreycliffCF-LightOblique.ttf') format('truetype'),
        url('../fonts/GreycliffCF-LightOblique.svg#GreycliffCF-LightOblique') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('../fonts/GreycliffCF-DemiBoldOblique.eot');
    src: url('../fonts/GreycliffCF-DemiBoldOblique.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-DemiBoldOblique.woff2') format('woff2'),
        url('../fonts/GreycliffCF-DemiBoldOblique.woff') format('woff'),
        url('../fonts/GreycliffCF-DemiBoldOblique.ttf') format('truetype'),
        url('../fonts/GreycliffCF-DemiBoldOblique.svg#GreycliffCF-DemiBoldOblique') format('svg');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('../fonts/GreycliffCF-ExtraLight.eot');
    src: url('../fonts/GreycliffCF-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GreycliffCF-ExtraLight.woff2') format('woff2'),
        url('../fonts/GreycliffCF-ExtraLight.woff') format('woff'),
        url('../fonts/GreycliffCF-ExtraLight.ttf') format('truetype'),
        url('../fonts/GreycliffCF-ExtraLight.svg#GreycliffCF-ExtraLight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Abhaya Libre';
    src: url('../fonts/AbhayaLibre-Regular.eot');
    src: url('../fonts/AbhayaLibre-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AbhayaLibre-Regular.woff2') format('woff2'),
        url('../fonts/AbhayaLibre-Regular.woff') format('woff'),
        url('../fonts/AbhayaLibre-Regular.ttf') format('truetype'),
        url('../fonts/AbhayaLibre-Regular.svg#AbhayaLibre-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Abhaya Libre';
    src: url('../fonts/AbhayaLibre-Medium.eot');
    src: url('../fonts/AbhayaLibre-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AbhayaLibre-Medium.woff2') format('woff2'),
        url('../fonts/AbhayaLibre-Medium.woff') format('woff'),
        url('../fonts/AbhayaLibre-Medium.ttf') format('truetype'),
        url('../fonts/AbhayaLibre-Medium.svg#AbhayaLibre-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Abhaya Libre';
    src: url('../fonts/AbhayaLibre-SemiBold.eot');
    src: url('../fonts/AbhayaLibre-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AbhayaLibre-SemiBold.woff2') format('woff2'),
        url('../fonts/AbhayaLibre-SemiBold.woff') format('woff'),
        url('../fonts/AbhayaLibre-SemiBold.ttf') format('truetype'),
        url('../fonts/AbhayaLibre-SemiBold.svg#AbhayaLibre-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Abhaya Libre';
    src: url('../fonts/AbhayaLibre-Bold.eot');
    src: url('../fonts/AbhayaLibre-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AbhayaLibre-Bold.woff2') format('woff2'),
        url('../fonts/AbhayaLibre-Bold.woff') format('woff'),
        url('../fonts/AbhayaLibre-Bold.ttf') format('truetype'),
        url('../fonts/AbhayaLibre-Bold.svg#AbhayaLibre-Bold') format('svg');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Abhaya Libre';
    src: url('../fonts/AbhayaLibre-ExtraBold.eot');
    src: url('../fonts/AbhayaLibre-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AbhayaLibre-ExtraBold.woff2') format('woff2'),
        url('../fonts/AbhayaLibre-ExtraBold.woff') format('woff'),
        url('../fonts/AbhayaLibre-ExtraBold.ttf') format('truetype'),
        url('../fonts/AbhayaLibre-ExtraBold.svg#AbhayaLibre-ExtraBold') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* VARIABLES */

:root {
	--color-white: #fff;
	--color-black: #000;
	--color-green: #001a0b;
	--color-header: #447c6b;
	--font-serif: 'Abhaya Libre';
	--font-sans: 'Greycliff CF';
}

* { outline: none; }
a { text-decoration: none; color: var(--color-white); }
.columns { column-count: 2; column-gap: 5vw; display: block !important; vertical-align: text-top; }

/* Common */

body {
	display: block;
	position: relative;
	overflow-y: scroll;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	background: var(--color-green);	
	font-weight: 100;
	line-height: 1.4em;
}

header {
	width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 15px 25px;
	background-color: var(--color-header);
	z-index: 100;
}

#logo {
	display: block;
	position: relative;
	overflow: hidden;
	float: left;
	width: auto;
	font-weight: 300;
}

#logo img { width: auto; height: 50px; display: block; overflow: hidden; position: relative; }

header #menu {
	display: block;
	overflow: hidden;
	position: relative;
	float: right;
	list-style: none;
	padding: 16px 0 12px 0;
	margin: 0;
}

header #menu li {
	display: inline-block;
	overflow: hidden;
	position: relative;
	padding-right: 25px;
	box-sizing: border-box;
}

header #menu li a {
	text-decoration: none;
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: 90%;
}

header #menu li a.active {
	color: var(--color-black);
	font-weight: bold !important;
}

header #menu li a:hover { color: var(--color-black); }


#mobilemenu {
	display: none;
	overflow: hidden;
	position: relative;
	width: 34px;
	height: 34px;
	float: right;
	margin: 10px 0;
	background-image: url('../img/menubutt-open.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

#mobilemenu.active > div { background-color: var(--color-green); }

#menu.active { height: 100vh; margin-top: 10vh; }
#mobilemenu.active { background-image: url('../img/menubutt-close.png'); }


div img { width: 100%; height: auto; margin: 0; padding: 0; }

.column {
	position: relative;
	display: block;
	overflow: hidden;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	float: left;
}

.column.col1_2 { width: 50%; }
.column.col1_3 { width: calc(100% / 3); }
.column.col1_4 { width: 25%; }

.column img { width: 100%; height: auto; overflow: hidden; position: relative; display: block; }


.top {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 0;
	margin: 0;
	width: 100%;
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
}

.top .text {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 50%;
	left: 100px;
	bottom: 200px;
}
.top .text h3 {
	font-weight: 400;
	font-size: 90%;
	margin: 0;
}
.top .text h1 {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 300%;
	margin: 10px 0 0 0;
	line-height: 0.8em;
}
.top .text p {
	font-weight: 400;
	margin: 10px 0 0 0;
	padding: 0;
}

.page2 .top .text { bottom: 50px; width: 80%; }
.page2 .top .text h1 { width: 70%; }
.page3 .top .text h1 { width: 90%; margin-bottom: 30px; }
.page3 .top .text { bottom: 50px; width: 80%; }

.images {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 30px 0;
	margin: 0;
	width: 100%;
}

.middle {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 60px 0;
	margin: 0;
	width: 100%;
	height: auto;
	background: url('../pages/page2_back1.jpg') top center no-repeat;
	background-size: cover;
}

.middle .circular {
	position: relative;
	display: block;
	overflow: hidden;
}

.middle .circular .text {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 30%;
	left: 100px;
	top: 60px;
}

.middle .circular .text h3 {
	font-weight: 400;
	font-size: 90%;
	margin: 0;
}

.middle .circular .text h1 {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 240%;
	margin: 10px 0 0 0;
	line-height: 0.8em;
}

.middle .circular .text h2 {
	display: block;
	overflow: hidden;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 200%;
	margin: 40px 0 0 0;
	line-height: 1em;
}

.middle .circular .text p {
	font-weight: 400;
	margin: 30px 0 0 0;
	padding: 0;
}

.middle .circular .scheme {
	position: relative;
	display: block;
	overflow: hidden;
	float: right;
	width: 40%;	
	margin-right: 100px;
}

.page2 .middle .circular .scheme {
	position: relative;
	display: block;
	overflow: hidden;
	float: right;
	width: 25%;	
	margin-right: 80px;
}

.middle .circular .scheme .rotating {
	position: absolute;
	display: block;
	overflow: hidden;
	top: 0;
	left: 0;
    -webkit-animation: rotating 15s linear infinite;
}

h1 { line-height: 1.3em; }

.page2 .middle { padding-top: 0px; }
.page2 .middle .circular { min-height: 450px; }
.page2 .middle .circular .text { width: 50%; }

.page2 .middle .video {
	position: relative;
	display: block;
	overflow: hidden;
	float: right;
	width: calc(100% - 200px);	
	margin-right: 100px;
}

.middle .dett {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: auto;
	padding: 100px 0 50px 0;
}

.middle .dett .text {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 30%;
	right: 100px;
	top: 140px;
}

.middle .dett .text h3 {
	font-weight: 400;
	font-size: 90%;
	margin: 0;
}

.middle .dett .text h1 {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 240%;
	margin: 10px 0 0 0;
	line-height: 1em;
}

.middle .dett .text p {
	font-weight: 400;
	margin: 10px 0 0 0;
	padding: 0;
}

.middle .dett .pics {
	position: relative;
	display: block;
	overflow: hidden;
	float: left;
	width: 60%;	
	margin: 0;
}

.video {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	width: 100%;
	height: auto;
}

.video .pic {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	width: 100%;
	height: auto;
}

.play {
	position: absolute;
	display: block;
	overflow: hidden;
	margin: 0;
	width: 60px;
	height: 60px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 10;
}

.prodprod a.video.player .play { top: auto !important; bottom: 0 !important; }

.video h1 {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 40px;
	display: block;
	overflow: hidden;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 240%;
	padding: 0;
	margin: 0;
}

.box {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 0;
	margin: 0;
	width: 100%;
	height: auto;
}

.box .pic {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	width: 100%;
	height: auto;
}

.box h1 {
	position: absolute;
	top: 40px;
	transform: translateY(-50%);
	left: 0px;
	display: block;
	overflow: hidden;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 240%;
	width: 100%;
	text-align: center;
}
.box .box1, .box .box2 { width: 50%; height: auto; position: absolute; top: 20px; box-sizing: border-box; padding: 150px; }
.box .box1 { left: 0; }
.box .box2 { right: 0; }

.bottom {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	width: 100%;
	height: auto;
	padding: 20px 100px;
	background: url('../pages/page1_back2.jpg') top center no-repeat;
	background-size: cover;
	box-sizing: border-box;
}

.bottom h1 {
	position: relative;
	display: block;
	overflow: hidden;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 240%;
}

.bottom .pic {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	width: 100%;
	height: auto;
}

#highlights {
	background: url('../pages/page2_back1.jpg') top center no-repeat #1f553b;
	background-size: cover;
	box-sizing: border-box;
}

#sales {
	background: url('../pages/page3_back1.jpg') top center no-repeat #1f553b;
	background-size: cover;
	box-sizing: border-box;
}

.highlights {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	width: 100%;
	height: auto;
	padding: 40px 90px;
	background-size: cover;
	box-sizing: border-box;
	background: url('../pages/page2_back1.jpg') top center no-repeat;
	background-size: cover;
	box-sizing: border-box;
	font-weight: 500;
}

.middle.research { background-image: none; padding: 0; box-sizing: border-box; }
.middle.research h1 { font-size: 300% !important; }
#sales .bottom { background-image: none; }
#sales .bottom > h1 { font-size: 300%; line-height: 1.3em; }
.middle.research .circular .text { width: calc(45% - 100px) !important; float: left; }
.middle.research .circular .scheme { margin-right: 100px !important; width: calc(45% - 100px); }
.highlights.process { background-image: none; }
.highlights.process .box .play { left: 28%; }
.highlights.numbers { background-image: none; padding-bottom: 20px; }
.highlights.data { background: none; padding: 0px 80px 120px 80px; }
.middle.datas { background: url('../pages/page3_datas.jpg') top center no-repeat; background-size: cover; background-attachment: fixed; height: auto; display: block; position: relative; background-color: #1f553b; padding: 100px 0 100px 0; }
.middle.datas .circular { height: auto; display: block; position: relative; }
.middle.datas .text { display: block; position: relative; width: 45%; }
.middle.datas .texts { display: block; position: relative; width: 100%; box-sizing: border-box; padding: 80px 100px; font-weight: 500; }
.middle.datas figure { display: block; position: relative; width: 55%; margin: 30px 0; }
.highlights.data > h3 { font-weight: 300; font-size: 80%; padding: 0 10px; box-sizing: border-box; }
.highlights.data .box { font-weight: 300; font-size: 80%; width: calc((100% / 3) - 40px); margin: 0 20px; line-height: 1.3em; }
.highlights.data .box strong { font-weight: 600; }
.highlights.cert { background-image: none; }

.highlights > h1 {
	position: relative;
	display: block;
	overflow: hidden;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 300%;
	width: 100%;
	box-sizing: border-box;
	padding: 0;
	line-height: 1.3em;
}

.highlights > .text {
	position: relative;
	display: block;
	overflow: hidden;
	width: 85%;
	box-sizing: border-box;
	margin: 0 0 80px 0;
}

.highlights.process > .text.columns {
	width: 100%;
}

.highlights .box {
	position: relative;
	display: block;
	overflow: hidden;
	width: calc((100% / 3) - 20px);
	box-sizing: border-box;
	float: left;
	margin: 0 10px;
}

.highlights .pics {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
}

.highlights .box h3 {
	display: block;
	overflow: hidden;
	width: 100%;
	text-align: center;
	margin: 0 0 20px 0;
	font-weight: 500;
}

.stats {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	width: 100%;
	height: auto;
	padding: 40px 100px;
	background: url('../pages/page2_stats.jpg') top center no-repeat;
	background-size: cover;
	background-attachment: fixed;
	box-sizing: border-box;
}

.stats > h1 {
	position: relative;
	display: block;
	overflow: hidden;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 300%;
	width: 100%;
	box-sizing: border-box;
	padding: 0;
	margin: 0 0 20px 0;
	line-height: 1.3em;
}

.list {
	width: calc(100% - 100px);
	height: auto;
	border: 0;
	margin: 0 0 0 100px;
	padding: 0;	
}

.list td { height: 18px; padding: 0; font-weight: 500; }
.list tr.stop td { font-size: 50%; height: 10px; }
.list td img { height: 18px; width: 500px; vertical-align: middle; }
.list tr td:first-child { width: 50px; }
.list tr td span { display: inline-block; overflow: hidden; font-size: 140%; padding-left: 20px; font-style: normal; font-family: var(--font-serif); font-weight: 600; vertical-align: middle; }

#player { width: 100vw; height: calc((100vw / 16) * 9); display: block; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 520; }
.vidclose.active { opacity: 1; }
.vidclose {
	display: none;
	overflow: hidden;
	position: fixed;
	top: 20px;
	left: 20px;
	width: 58px;
	height: 58px;
	line-height: 1.3em;
	text-align: center;
	font-size: 42px;
	z-index: 530;
	opacity: 0;
	background-color: rgba(0,0,0,.8);
	border-radius: 51%;
	cursor: pointer;
}

.player.off .play { display: none !important; }

.prodprod a.video.player .play {
	position: absolute;
	display: block;
	top: 55% !important;
	bottom: auto !important;
	left: 50% !important;
	z-index: 20;
	transform: translate(-50%,-50%);
}

.box.prodprod .column.col1_2.video.player {
	position: relative !important;
	box-sizing: border-box;
	padding: 100px 40px 40px 40px;
	float: left;
	display: block;
	height: 50vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
}

.videoplay h1 {
	position: absolute !important;
	width: 100%;
	text-align: center;
	z-index: 20;
	margin: 0px;
	padding: 0;
	top: 60px;
}

.prodpic { display: block; }
.prodmob { display: none !important; }

/* ANIMATIONS */

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

#menu li a {
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition-timing-function: ease-in;
}
#logo,
#mobilemenu,
#menu {
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition-timing-function: ease-out;
}


/* RESPONSIVE DESIGN */
@media screen and (max-width: 1280px) {
	
	#menu { height: 1px; width: 100%; padding-top: 0 !important; padding-bottom: 0 !important; }
	#menu li { display: block; width: 100%; padding: 20px 20px; line-height: 1.1em; font-weight: 400; text-align: center; font-size: 260%; }
	#mobilemenu { display: block; }
	
	.column.col1_2 { width: 100% !important; display: block !important; top: 0 !important; left: 0 !important; position: relative !important; }
	.column.col1_4 { width: 50% !important; }
}

	@media screen and (max-width: 1000px) {
	
	#menu { font-size: 100%; }
	#logo img { width: auto; height: 90px; display: block; overflow: hidden; position: relative; }
	#mobilemenu { width: 60px; height: 60px; margin: 15px 0; }
	
	.top { height: 1000px; }
	.top img { display: none; }
	
	body { font-size: 130% !important; }
	
	.columns { column-count: 1; column-gap: 0; width: 100% !important; padding: 40px; }
	
	.highlights.numbers { width: 100% !important; padding: 40px; box-sizing: border-box; margin: 0px; float: none; }
	.highlights.data { width: 100% !important; padding: 0 40px 40px 40px; box-sizing: border-box; margin: 0px; float: none; }
	.highlights.data .box { width: 100% !important; padding: 0; box-sizing: border-box; margin: 0px; float: none; }
	.highlights.data h3 { padding: 0; margin: 0 0 20px 0; }
	.top .text { width: 100% !important; left: 0px !important; padding: 40px; box-sizing: border-box; }
	.middle .circular .text { width: 100% !important; padding: 40px 40px 0 40px; box-sizing: border-box !important; float: none !important; left: 0 !important; top: 0 !important; position: relative !important; }
	.middle.research .circular .text { width: 100% !important; padding: 40px 40px 0 40px; box-sizing: border-box; float: none; position: relative !important; }
	.middle .circular .scheme, .highlights.cert, .highlights.process { width: 100% !important; padding: 0 40px 40px 40px; box-sizing: border-box; float: none !important; margin: 0px !important; }
	.middle .circular .scheme, .highlights.cert, .highlights.process { width: 100% !important; padding: 0 40px 40px 40px; box-sizing: border-box; float: none !important; margin: 0px !important; }
	.highlights.cert .text, .highlights.process .text { width: 100% !important; padding: 0; box-sizing: border-box; float: none; }
	.highlights.cert .box, .highlights.process .box { width: calc(100% - 120px) !important; padding: 0 60px; margin: 0 auto 40px auto !important; box-sizing: border-box; float: none; display: block; }
	.middle.research .circular .scheme { width: 100% !important; padding: 0 40px 40px 40px; box-sizing: border-box; float: none !important; margin: 0px !important; }
	.middle .circular .scheme.column { text-align: center; }
	.middle.nopad { padding-bottom: 0px; }
	.video.player { width: 100% !important; padding: 0; box-sizing: border-box; float: none !important; margin: 0px !important; }
	.stats .text { width: 100% !important; padding: 40px 40px 0 40px; box-sizing: border-box; float: none; }
	.stats { width: 100% !important; padding: 40px; box-sizing: border-box; float: none !important; margin: 0px !important; }
	.stats .list { font-size: 60%; width: 100% !important; padding: 0px; box-sizing: border-box; float: none !important; margin: 0px !important; }
	.stats h1 { line-height: 1.1em; margin-bottom: 40px; }
	.stats .list tr td:first-child { width: 40px !important; }
	.stats .list tr td.bb { width: calc(100% - 110px) !important; }
	.stats .list tr td.bb { width: calc(100% - 110px) !important; }
	.middle .circular .scheme.player { margin-top: 80px !important; }
	.middle .circular .scheme.player .rotating { width: calc(100% - 80px) !important; margin: 0 0 0 40px; }
	.page1 .text { margin-top: 200px !important; }
	
	.middle .dett, .middle .dett .pics { width: 100% !important; display: block !important; padding: 0px; float: none; position: relative; }
	.middle .dett .text, #green { width: 100% !important; display: block !important; box-sizing: border-box; padding: 0 40px !important; left: 0; top: 0; float: none; right: 0; bottom: 0; position: relative; }
	.box.prodprod { left: 0; top: 0; float: none; right: 0; bottom: 0; position: relative; }
	.box.prodprod .pics { width: 205%; }
	.box.prodprod a .text { width: 100% !important; display: block !important; box-sizing: border-box; padding: 0 40px !important; }
	#green .text, #green .box { width: 100% !important; display: block !important; box-sizing: border-box; padding: 0 !important; margin: 0 !important; }
	#green .text { margin-bottom: 60px !important; padding: 20px 0 !important; }
	.box.prodprod h1 { padding: 40px; text-align: left; }
	.box.prodprod .column.col1_2.video.player { height: 100vw; }
	.videoplay h1 { display: block; position: relative; }
	.box.prodprod .column.col1_2.video.player .text { padding: 40px 0 !important; }
	
	.prodpic { display: none !important; }
	.prodmob { display: block !important; }
	
}