@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Play);
@import url(https://fonts.googleapis.com/css?family=Comfortaa);
@import url(https://fonts.googleapis.com/css?family=Arsenal);

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#09C;
	width:100%;
}

#productrange {
	position:absolute;
	text-align:center;
	display: inline-block;
	word-wrap:normal;
	width:15%;
	top:10%;
	left:2%;
	height:55%;
	padding:15px 15px;
	border: 2px hidden;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:Bold;
	color:#FFF;
	z-index:2;
}

.innovation2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:Bold;
	color:#FFF;
}



#innovation {
	position:absolute;
	display: inline-block;
	word-wrap:normal;
	width:15%;
	left:1%;
	bottom:13%;
	overflow:hidden;
	padding:15px 15px;
	border: 2px hidden;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:Bold;
	color:#FFF;
	z-index:2;
}



#innovation:Hover .SmallLiner {
	animation-name:Innov;
	animation-duration:2s;
	animation-direction:left;
	animation-delay:0ms;
	animation-fill-mode:forwards;
	animation-play-state:paused, 0ms;
}
#innovation:Hover .isoicon {
	text-align:center;
	opacity:1;
}

@keyframes Innov {
 	0% {opacity:0; margin-bottom:0;}
	100% {height:10%; opacity:1; margin-bottom:0;}
}

.prange {
	position:absolute;
	text-align:center;
	bottom:5%;
	height:0%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:Bold;
	color:#FFF;
	transition: .5s ease;
	z-index:1;
}

.SmallLiner {
	position:absolute;
	right:10%;
	bottom:45%;
	height:0%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:Bold;
	color:#FFF;
	transition: .5s ease;
	z-index:1;
}

.isoicon {
	opacity:0;
}

.bannerpic {
	position: absolute;
	top: 15%;
	width: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	z-index: 1;
	left: 1px;
}

.countriesDiv {
	position:absolute;
	bottom:5%;
	left:5%;
	width:50%;
	opacity:0.75;
	z-index:1;
}


.pageheading {
	position:relative;
	top:10%;
	width:80%;
	background-color:#FFF;
	opacity:0.25;
	text-align:right;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
}

.pagearea {
	position:relative;
	top:10%;
	width:80%;
	text-align:left;
	margin-left:auto;
	margin-right:auto;
}

.footerarea {
	position:relative;
	top:10%;
	width:100%;
	background-color:#333;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}
.footertablearea {
	position:relative;
	top:10%;
	width:90%;
	background-color:#666;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

.FontSmallWhite {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#CCC;
}

.FontRed {
	color:#FC0;
}


.Font_pageheading {
	font-family:'Play';
	font-weight:bold;
	font-size:30px;
	color:#CCC;
}
.Font_pageheading2 {
	font-family:'Play';
	font-weight:bold;
	font-size:25px;
	color:#333;
	background-color:#CCC;
}

.Font_pagematter {
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#FFF;
}

.Topbar {
	position:fixed;
	left:0%;
	top:0%;
	width:100%;
	height:10%;
	opacity:0.25;
	background-color:#FFF;
	z-index:2;
}

.zoom {
    padding: 50px;
    transition: transform .2s; /* Animation */
    height: auto;
    margin: 0 auto;
}

.zoom:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.Normal {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#666;
}

.Logo {
	position:absolute;
	left:3%;
	bottom:20%;
}
.Logo2 {
	position:fixed;
	left:3%;
	bottom:5%;
}


.Anim {
	position:absolute;
	left:0%;
	top:0%;
	width:100%;
}


#Mdiv {
    width: 35px;
    height: 4px;
    background-color: black;
    margin: 6px 0;
}


.leafanim {
	position:absolute;
	transform:translate(50%);
	top:15%;
	animation-name:HomeAnim;
	animation-duration:15s;
	animation-direction:left;
	animation-delay:0ms;
	animation-fill-mode:forwards;
	animation-play-state:paused, 0ms;
	animation-iteration-count:infinite;
}

.Liner {
	position:absolute;
	left:20%;
	top:35%;
	font-family: 'Play';
	font-size:40px;
	font-weight:Bold;
	color:#FFF;
	z-index:1;
	animation-name:HomeAnim2;
	animation-duration:15s;
	animation-direction:left;
	animation-delay:0ms;
	animation-fill-mode:forwards;
	animation-play-state:paused, 0ms;
}
.Liner2 {
	position:absolute;
	font-family: 'Play';
	font-size:40px;
	font-weight:Bold;
	color:#FFF;
	background-color:#3FF;
	z-index:1;
	animation-name:HomeAnim2A;
	animation-duration:15s;
	animation-direction:left;
	animation-delay:0ms;
	animation-fill-mode:forwards;
	animation-play-state:paused, 0ms;
}


.leafanim2 {
	position:absolute;
	top:15%;
	left:15%;
	animation-name:HomeAnim3;
	animation-duration:15s;
	animation-direction:left;
	animation-delay:0ms;
	animation-fill-mode:forwards;
	animation-play-state:paused, 0ms;
	animation-iteration-count:infinite;
}

.leafanim33 {
	position:absolute;
	top:30%;
	left:28%;
	animation-name:HomeAnim33;
	animation-duration:15s;
	animation-direction:left;
	animation-delay:0ms;
	animation-fill-mode:forwards;
	animation-play-state:paused, 0ms;
	animation-iteration-count:infinite;
}




.rotatethis {
	position:fixed;
    font-family:Play;
	font-size:22px;
	color:#FFF;
	transform: rotate(90deg);
	right:2%;
	top:30%;
	width:5px;
	z-index:2;
}


.NormalFont {
    font-family: 'Arsenal', sans-serif;
	font-size:20px;
	color:#FFF;
	z-index:1;
}

.aboutbox {
	position:absolute;
	display:block;
	top:89%;
	width:100%;
	
}
.about {
	position:relative;
    font-family: 'Arsenal', sans-serif;
	font-size:45px;
	text-align:center;
	font-weight:Bold;
	color:#000;
	z-index:1;
}



.RedLine {
	position:fixed;
	right:0%;
	top:0%;
	width:5px;
	height:100%;
	background-color:#F00;
	z-index:1;
}

.MenuLine {
	position:fixed;
    transform: translate(50%);    
    top:0%;
	width:50%;
	height:8%;
	background-color:#FFF;
	opacity:0.5;
	z-index:1;
}

.socialmedia {
	position:fixed;
	text-align:right;
    top:1%;
	right:5%;
	height:5%;
	width:15%;
	z-index:2;
}

.media1 {
	position:inherit;
	margin-left:7%;
	margin-top:0px;
	z-index:1;
}
.media1:hover {
	position:inherit;
	margin-left:7%;
	margin-top:2px;
	box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 2px;
	border-radius: 50%;
	z-index:1;
}

.media2 {
	position:inherit;
	margin-left:12%;
	margin-top:0px;
	z-index:1;
}
.media2:hover {
	position:inherit;
	margin-left:12%;
	margin-top:2px;
	box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 2px;
	border-radius: 50%;
	z-index:1;
}


.Company {
	position:fixed;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	text-align:right;
	font-weight:bolder;
	color:#F00;
	left:3%;
	top:2%;
}


*{ margin:0;}

@keyframes slider {
0% {left:0;	}	
20% {left:0; }	
25% {left:-100%; }	
45% {left:-100%; }	
50% {left:-200%; }	
70% {left:-200%; }
75% {left:-300%; }	
95% {left:-300%; }	
100% {left:-400%; }	
}

#slider{overflow:hidden;}

#slider figure img {
	width:20%;
	float:left;}
	
	#slider figure {
		position:relative;
		width:500%;
		margin:0;
		left:0;
		animation:50s slider infinite;
	}






.mnu {
	position:fixed;
	top:-1%;
	right:14%;
	z-index:1;
}

 /* Dropdown Button */
.dropbtn {
    background-color:transparent;
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:36px;
    color: white;
    padding: 16px;
    border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
	font-family:Arial, Helvetica, sans-serif;
    position: absolute;
    background-color:#FFF;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	text-align:left;
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover { background-color:#09F;
color:#FFF;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color:transparent;
} 


@keyframes HomeAnim {
    0% {opacity:0;}
	20% {opacity:1;}
	40% {opacity:1;}
	50% {opacity:0;}
	100% {opacity:0;}
}
@keyframes HomeAnim2 {
    0% {left:-50%;}
	10% {left:-50%;}
	100% {left:18%; top:35%;}
	40% {left:18%; top:35%;}
	50% {left:35%; top:20%;}
	70% {left:35%; top:20%;}
	80% {left:55%; top:55%;}
	100% {left:55%; top:55%;}
}

@keyframes HomeAnim2A {
 	0% {left:35%; top:20%; opacity:1;}
	50% {left:35%; top:20%; opacity:1;}
	60% {left:35%; top:20%; opacity:1;}
	100% {left:55%; top:55%; opacity:1;}
}

@keyframes HomeAnim3 {
    0% {opacity:0;}
	20% {opacity:0;}
	40% {opacity:0;}
	50% {opacity:1;}
	70% {opacity:1;}
	80% {opacity:0;}
	100% {opacity:0;}
}

@keyframes HomeAnim33 {
    0% {opacity:0;}
	20% {opacity:0;}
	40% {opacity:0;}
	50% {opacity:0;}
	70% {opacity:0;}
	80% {opacity:1;}
	90% {opacity:1;}
	100% {opacity:1;}
}



.MLine1 {
	position:absolute;
	font-family: 'Play';
	font-size:40px;
	font-weight:Bold;
	color:#FFF;
	z-index:1;
	animation-name:MLine1;
	animation-duration:15s;
	animation-direction:left;
	animation-delay:0ms;
	animation-fill-mode:forwards;
	animation-play-state:paused, 0ms;
	animation-iteration-count:infinite;
}
@keyframes MLine1 {
 	0% {left:0%; top:35%; opacity:1;}
	5% {left:25%; top:35%; opacity:1;}
	20% {left:25%; top:35%; opacity:1;}
	40% {left:25%; top:35%; opacity:1;}
	41% {left:25%; top:35%; opacity:0;}
	100% {left:25%; top:35%; opacity:0;}
}
.MLine2 {
	position:absolute;
	font-family: 'Play';
	font-size:40px;
	font-weight:Bold;
	color:#FFF;
	z-index:1;
	animation-name:MLine2;
	animation-duration:15s;
	animation-direction:left;
	animation-delay:0ms;
	animation-fill-mode:forwards;
	animation-play-state:paused, 0ms;
	animation-iteration-count:infinite;
}
@keyframes MLine2 {
 	0% {left:0%; top:35%; opacity:0;}
	5% {left:25%; top:35%; opacity:0;}
	35% {left:25%; top:35%; opacity:0;}
	40% {left:25%; top:35%; opacity:0;}
	41% {left:25%; top:35%; opacity:025;}
	50% {left:35%; top:20%; opacity:1;}
	70% {left:35%; top:20%; opacity:1;}
	71% {left:35%; top:20%; opacity:0;}
	100% {left:35%; top:20%; opacity:0;}
}
.MLine3 {
	position:absolute;
	font-family: 'Play';
	font-size:40px;
	font-weight:Bold;
	color:#FFF;
	z-index:1;
	animation-name:MLine3;
	animation-duration:15s;
	animation-direction:left;
	animation-delay:0ms;
	animation-fill-mode:forwards;
	animation-play-state:paused, 0ms;
	animation-iteration-count:infinite;
}
@keyframes MLine3 {
 	0% {left:0%; top:35%; opacity:0;}
	5% {left:25%; top:35%; opacity:0;}
	28% {left:25%; top:35%; opacity:0;}
	31% {left:25%; top:35%; opacity:0;}
	40% {left:35%; top:20%; opacity:0;}
	49% {left:35%; top:20%; opacity:0;}
	51% {left:35%; top:20%; opacity:0;}
	70% {left:35%; top:20%; opacity:0;}
	71% {left:35%; top:20%; opacity:1;}
	90% {left:60%; top:50%; opacity:1;}
	100% {left:60%; top:50%; opacity:0;}
}
a.menu:link {
	color: #CCC;
	text-decoration: none;
}
a.menu:hover {
	color:#F90;
	text-decoration: none;
}
a.menu:active {
	color: #CCC;
	text-decoration: none;
}
a.menu:visited {
	color:#CCC;
	text-decoration: none;
}

a:link {
	color:#000;
	text-decoration: none;
}
a:hover {
	color:#000;
	text-decoration: none;
}
a:active {
	color: #000;
	text-decoration: none;
}
a:visited {
	color:#000;
	text-decoration: none;
}