let map;

function initMap() {
	const bounds = new google.maps.LatLngBounds();
	const templateDirectoryUri = scriptParams.template_directory_uri;	
	const markers = [
		['Cologne',50.941710,6.952570, templateDirectoryUri + '/assets/images/marker.svg'],
		['London',51.512870,-0.103940, templateDirectoryUri + '/assets/images/marker.svg'],
	];

	const map = new google.maps.Map(document.getElementById("map"), {
		zoom: 5,
		center: {lat: 46.739861, lng: 8.516725},
		disableDefaultUI: true,
		styles: [
			{
			  "elementType": "geometry",
			  "stylers": [
				{
				  "color": "#212121"
				}
			  ]
			},
			{
			  "elementType": "labels",
			  "stylers": [
				{
				  "visibility": "off"
				}
			  ]
			},
			{
			  "elementType": "labels.icon",
			  "stylers": [
				{
				  "visibility": "off"
				}
			  ]
			},
			{
			  "elementType": "labels.text.fill",
			  "stylers": [
				{
				  "color": "#757575"
				}
			  ]
			},
			{
			  "elementType": "labels.text.stroke",
			  "stylers": [
				{
				  "color": "#212121"
				}
			  ]
			},
			{
			  "featureType": "administrative",
			  "elementType": "geometry",
			  "stylers": [
				{
				  "color": "#757575"
				},
				{
				  "visibility": "off"
				}
			  ]
			},
			{
			  "featureType": "administrative.country",
			  "elementType": "labels.text.fill",
			  "stylers": [
				{
				  "color": "#9e9e9e"
				}
			  ]
			},
			{
			  "featureType": "administrative.land_parcel",
			  "stylers": [
				{
				  "visibility": "off"
				}
			  ]
			},
			{
			  "featureType": "administrative.locality",
			  "elementType": "labels.text.fill",
			  "stylers": [
				{
				  "color": "#bdbdbd"
				}
			  ]
			},
			{
			  "featureType": "administrative.neighborhood",
			  "stylers": [
				{
				  "visibility": "off"
				}
			  ]
			},
			{
			  "featureType": "landscape",
			  "elementType": "geometry.fill",
			  "stylers": [
				{
				  "color": "#faefee"
				}
			  ]
			},
			{
			  "featureType": "poi",
			  "stylers": [
				{
				  "visibility": "off"
				}
			  ]
			},
			{
			  "featureType": "poi",
			  "elementType": "labels.text.fill",
			  "stylers": [
				{
				  "color": "#757575"
				}
			  ]
			},
			{
			  "featureType": "poi.park",
			  "elementType": "geometry",
			  "stylers": [
				{
				  "color": "#181818"
				}
			  ]
			},
			{
			  "featureType": "poi.park",
			  "elementType": "labels.text.fill",
			  "stylers": [
				{
				  "color": "#616161"
				}
			  ]
			},
			{
			  "featureType": "poi.park",
			  "elementType": "labels.text.stroke",
			  "stylers": [
				{
				  "color": "#1b1b1b"
				}
			  ]
			},
			{
			  "featureType": "road",
			  "stylers": [
				{
				  "visibility": "off"
				}
			  ]
			},
			{
			  "featureType": "road",
			  "elementType": "geometry.fill",
			  "stylers": [
				{
				  "color": "#2c2c2c"
				}
			  ]
			},
			{
			  "featureType": "road",
			  "elementType": "labels.icon",
			  "stylers": [
				{
				  "visibility": "off"
				}
			  ]
			},
			{
			  "featureType": "road",
			  "elementType": "labels.text.fill",
			  "stylers": [
				{
				  "color": "#8a8a8a"
				}
			  ]
			},
			{
			  "featureType": "road.arterial",
			  "elementType": "geometry",
			  "stylers": [
				{
				  "color": "#373737"
				}
			  ]
			},
			{
			  "featureType": "road.highway",
			  "elementType": "geometry",
			  "stylers": [
				{
				  "color": "#3c3c3c"
				}
			  ]
			},
			{
			  "featureType": "road.highway.controlled_access",
			  "elementType": "geometry",
			  "stylers": [
				{
				  "color": "#4e4e4e"
				}
			  ]
			},
			{
			  "featureType": "road.local",
			  "elementType": "labels.text.fill",
			  "stylers": [
				{
				  "color": "#616161"
				}
			  ]
			},
			{
			  "featureType": "transit",
			  "stylers": [
				{
				  "visibility": "off"
				}
			  ]
			},
			{
			  "featureType": "transit",
			  "elementType": "labels.text.fill",
			  "stylers": [
				{
				  "color": "#757575"
				}
			  ]
			},
			{
			  "featureType": "water",
			  "elementType": "geometry",
			  "stylers": [
				{
				  "color": "#000000"
				}
			  ]
			},
			{
			  "featureType": "water",
			  "elementType": "geometry.fill",
			  "stylers": [
				{
				  "color": "#001533"
				}
			  ]
			},
			{
			  "featureType": "water",
			  "elementType": "labels.text.fill",
			  "stylers": [
				{
				  "color": "#3d3d3d"
				}
			  ]
			}
		  ],
	});

	for( i = 0; i < markers.length; i++ ) {
		var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
		bounds.extend(position);
		marker = new google.maps.Marker({
			position: position,
			map: map,
			icon: markers[i][3],
		});


	}
	// Automatically center the map fitting all markers on the screen
	map.fitBounds(bounds);
	//(optional) restore the zoom level after the map is done scaling
	var listener = google.maps.event.addListener(map, "idle", function () {
		map.setZoom(4);
		google.maps.event.removeListener(listener);
	});

}

jQuery(function ($) {
var menu = document.querySelector(".overlay");
var header = document.querySelector("header");
var ham = document.querySelector(".ham");
var ham2 = document.querySelector(".ham2");
var ham3 = document.querySelector(".ham3");
var xIcon = document.querySelector(".xIcon");
var xIcon2 = document.querySelector(".xIcon2");
var xIcon3 = document.querySelector(".xIcon3");
var menuIcon = document.querySelector(".menuIcon");
var legallink = document.querySelectorAll(".legal-toggle");
var legalcontent = document.getElementById("legal-information");
var legalwrapper = $(".legal-information-wrapper");
var reportslink = document.querySelectorAll(".reports-toggle");
var reportscontent = document.getElementById("reports-information");
var reportswrapper = $(".reports-information-wrapper");

ham.addEventListener("click", clickham);
legallink.forEach(function(e) {
	e.addEventListener("click", toggleLegalMenu);
});
reportslink.forEach(function(e) {
	e.addEventListener("click", toggleReportsMenu);
});
ham2.addEventListener("click", toggleLegalMenu);
ham3.addEventListener("click", toggleReportsMenu);

function clickham(e){
	e.preventDefault();
	toggleMenu();
}

function toggleMenu() {
	if (menu.classList.contains("showMenu")) {
	  header.classList.remove("headeropen");
	  menu.classList.remove("showMenu");
	  xIcon.style.display = "none";
	  xIcon2.style.display = "none";
	  xIcon3.style.display = "none";
	  menuIcon.style.display = "block";
	} else {
	  if (legalcontent.classList.contains("legal-show")) {
		toggleLegalMenu();
	  } else if(reportscontent.classList.contains("reports-show")) {
		toggleReportsMenu();
	  } 
	  menu.classList.add("showMenu");
	  header.classList.add("headeropen");
	  xIcon.style.display = "block";
	  menuIcon.style.display = "none";
	}
}
function toggleLegalMenu(e) {
	e.preventDefault();
	if (legalcontent.classList.contains("legal-show")) {
		legalcontent.classList.remove("legal-show");
		ham.style.display = "block";
		ham2.style.display = "none";
		xIcon2.style.display = "none";
		legalwrapper.scrollTop(0);
	} else {
		var href = this.getAttribute("href").substring(1);
		var legalboxcontentoffset = parseInt($(".legal-box-content").css('margin-bottom'));
		var offperc = 1;
		if(href == 'point1'){offperc = 1;}
		var offset = legalboxcontentoffset * offperc;

		var targetlink = document.getElementById(href);
		legalcontent.classList.add("legal-show");
		var targettop = targetlink.offsetTop - offset;
		legalwrapper.scrollTop(targettop);
		ham.style.display = "none";
		ham2.style.display = "inline-block";
		xIcon2.style.display = "block";
	}
}
function toggleReportsMenu(e) {
	e.preventDefault();
	if (reportscontent.classList.contains("reports-show")) {
		reportscontent.classList.remove("reports-show");
		ham.style.display = "block";
		ham3.style.display = "none";
		xIcon3.style.display = "none";
		reportswrapper.scrollTop(0);
	} else {
		var href = this.getAttribute("href").substring(1);
		var reportsboxcontentoffset = parseInt($(".reports-box-content").css('margin-bottom'));
		var offperc = 1;
		if(href == 'point4'){offperc = 1;}
		var offset = reportsboxcontentoffset * offperc;
		
		var targetlink = document.getElementById(href);
		reportscontent.classList.add("reports-show");
		var targettop = targetlink.offsetTop - offset;
		reportswrapper.scrollTop(targettop);
		ham.style.display = "none";
		ham3.style.display = "inline-block";
		xIcon3.style.display = "block";
		
	}
}
var menuLinks = document.querySelectorAll(".menuLink");

!(function (d) {
	var carousel = d.getElementsByClassName("carousel-wrapper")[0];
	const itemClassName = "team-member";
	var refreshIntervalId;
	var items = d.getElementsByClassName(itemClassName),
	  totalItems = items.length,
	  moving = true;
	const initialitems = $('.carousel-wrapper').children();


	let touchstartX = 0;
	let touchendX = 0;

	// Set classes
	function setInitialClasses() {
	  items.forEach(function(e) {
		e.classList.remove('visible', 'prev', 'center-slide', 'next');
	  });
	  items[1].classList.add("visible", "prev");
	  items[2].classList.add("visible", "center-slide");
	  items[3].classList.add("visible", "next");
	}

	// Set event listeners
	function setEventListeners() {
	  var next = d.getElementsByClassName("btn-next")[0],
		prev = d.getElementsByClassName("btn-prev")[0];
	  next.addEventListener("click", clickNext);
	  prev.addEventListener("click", clickPrev);
	  items[3].addEventListener("click", clickNext);
	  items[1].addEventListener("click", clickPrev);
	}
	function clickNext(){
		clearInterval(refreshIntervalId);
		moveNext();
	}
	function clickPrev(){
		clearInterval(refreshIntervalId);
		movePrev();
	}

	function moveNext() {
	  if (!moving) {
		disableInteraction('loadingright');
		setTimeout(function () {
			items = Array.from(carousel.querySelectorAll(".team-member"));
			items[0].className = itemClassName;
			array_move(items, 0, totalItems - 1);
			carousel.appendChild(items[totalItems - 1]);
			for (i = 0; i < items.length; i++) {
				items[i].removeEventListener("click", clickNext);
				items[i].removeEventListener("click", clickPrev);
			}

			items[0].className = itemClassName + " prev visible";
			items[1].className = itemClassName + " visible center-slide";
			items[2].className = itemClassName + " next visible";
			items[2].addEventListener("click", clickNext);
	  		items[0].addEventListener("click", clickPrev);
		  }, 500);

	  }
	}

	function movePrev() {
	  if (!moving) {
		disableInteraction('loadingleft');
		setTimeout(function () {
			items = Array.from(carousel.querySelectorAll(".team-member"));

			carousel.prepend(items[totalItems - 1]);
			array_move(items, totalItems - 1, 0);
			for (i = 0; i < items.length; i++) {
				items[i].removeEventListener("click", clickNext);
				items[i].removeEventListener("click", clickPrev);
			}

			items[0].className = itemClassName + " prev visible";
			items[1].className = itemClassName + " visible center-slide";
			items[2].className = itemClassName + " next visible";
			items[3].className = itemClassName;
			items[2].addEventListener("click", clickNext);
	  		items[0].addEventListener("click", clickPrev);
		}, 500);
	  }
	}

	function disableInteraction(directionclass) {
	  moving = true;
	  carousel.classList.add(directionclass);
	  setTimeout(function () {
		moving = false;
		carousel.classList.remove(directionclass);
	  }, 1000);
	}

	function initCarousel() {
	  carousel.prepend(items[totalItems - 1]);
	  items = array_move(Array.from(items), totalItems - 1, 0);
	  setInitialClasses();
	  setEventListeners();
	  carousel.addEventListener('touchstart', e => {
		touchstartX = e.changedTouches[0].screenX;
	  });

	  carousel.addEventListener('touchend', e => {
		touchendX = e.changedTouches[0].screenX;
		handleGesture();
	  });

	  moving = false;
	}

	initCarousel();

	function array_move(arr, old_index, new_index) {
		if (new_index >= arr.length) {
			var k = new_index - arr.length + 1;
			while (k--) {
				arr.push(undefined);
			}
		}
		arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
		return arr; // for testing
	}




	function handleGesture() {
		if (touchendX + 50 < touchstartX){
			moveNext();

		};
		if (touchendX > touchstartX + 50){
			movePrev();


		};
	}

	//initialize positions

	var body = $('body');
	var shape1 = $('.shape-1');
	var shape2 = $('.shape-2');
	var shape3 = $('.shape-3');

	var section1 = $('.section-1');
	var section5 = $('.section-5');
	var section6 = $('.section-6');
	var section7 = $('.section-7');
	var section9 = $('.section-9');

	var section1row = section1.find('.row');

	var anchor1 = $('#level1');
	var anchor2 = $('#level2');
	var anchor3 = $('#level3');
	var anchor4 = $('#level4');
	var anchor5 = $('#level5');
	var anchor6 = $('#level6');
	var anchor7 = $('#level7');
	var anchor8 = $('#level8');
	var anchor9 = $('#level9');

	var Manchor1 = $('#Mlevel1');
	var Manchor2 = $('#Mlevel2');
	var Manchor7 = $('#Mlevel7');
	var Manchor9 = $('#Mlevel9');

	var transitionSection = $('#transition-section');



	var windowheight = window.innerHeight;
	var windowwidth = $(window).width();


	var limits;


	var progress = $('.progress-bar');

	function animateprogress(scrolltop){
		var newwidth = (scrolltop/($('body').height()-windowheight))*100;
		if(newwidth < 0){
			newwidth = 0;
		}
		if(newwidth > 90){
			newwidth = 100;
		}
		progress.css('width',newwidth+'%');
	}


	//animation
	var scrolllevel = 0;

	function calculateheight(windowheight, widthdifference = 1){
		if(widthdifference){
			var setheight;
			if(windowwidth > 1620 && windowheight < 740){
				setheight = 740;
			}else if(windowwidth > 1449 && windowheight < 715){
				setheight = 715;
			}else if(windowwidth > 0 && windowheight < 650){
				setheight = 650;
			}else{
				setheight = windowheight;
			}
			$('.br-section').css('height',setheight+'px');
		}else{
			//do nothing
		}

	}
	function debounce(func, wait, immediate) {
		var timeout;
		return function() {
			var context = this, args = arguments;
			var later = function() {
				timeout = null;
				if (!immediate) func.apply(context, args);
			};
			var callNow = immediate && !timeout;
			clearTimeout(timeout);
			timeout = setTimeout(later, wait);
			if (callNow) func.apply(context, args);
		};
	};

	var animatevariable = debounce(function(target){
		animatescroll(target);
	}, 300, true);

	$(document).on('scroll', function(e){
		animateprogress($(document).scrollTop());
		$('.Mlevel2').each(function () {
			if (isScrolledIntoView(this, 1, 320) === true) {
				$(this).find('.circle-tech').addClass('draw');
			}else{
				// $(this).removeClass('filter_show');
			}
		});
		$('.Mlevel3').each(function () {
			if (isScrolledIntoView(this, 1, 430) === true) {
				$(this).find('.circle-inv').addClass('draw');
			}else{
				// $(this).removeClass('filter_show');
			}
		});
		$('.Mlevel4').each(function () {
			if (isScrolledIntoView(this, 1, 430) === true) {
				$(this).find('.circle-ins').addClass('draw');
			}else{
				// $(this).removeClass('filter_show');
			}
		});
		$('.Mlevel5').each(function () {
			if (isScrolledIntoView(this, 1, 450) === true) {
				$(this).find('.logo-mark').addClass('logo-s');
			}else{
				// $(this).removeClass('filter_show');
			}
		});
		$('.Mlevel6').each(function () {
			if (isScrolledIntoView(this, 1, 350) === true) {
				$(this).addClass('loaded-6');
			}else{
				// $(this).removeClass('filter_show');
			}
		});
		$('.Mlevel7').each(function () {
			if (isScrolledIntoView(this, 1, 350) === true) {
				$(this).addClass('loaded-7a');
			}else{
				// $(this).removeClass('filter_show');
			}
		});
	});

	function isScrolledIntoView(elem, bool, offset) {

		var docViewTop = $(window).scrollTop();
		var docViewBottom = docViewTop + $(window).height();
		var elemTop = $(elem).offset().top;
		var elemBottom = elemTop + $(elem).height();
		if (bool) {
			return (docViewBottom >= elemTop + offset);
		}
		return (docViewBottom <= elemBottom);
	}






	$('a.levelanchor').click(function(e){
		e.preventDefault();

		if($(this).hasClass('menuLink')){
			var targetid = $(this).attr('id');
			var targetscroll = $('.'+targetid).offset().top;
			toggleMenu();
			window.scrollTo({
				top: targetscroll
			});
			//animatescroll(target);
			//animatevariable(target);
		}else{
			var trans_color = '#FAEFEE';
			if(scrolllevel <= 2){
				trans_color = '#FAEFEE';
			}else if(scrolllevel > 2 && scrolllevel <= 7){
				trans_color = '#FFF';
			}else if(scrolllevel > 7 && scrolllevel <= 9){
				trans_color = '#fcbaa5';
			}else if(scrolllevel > 9 && scrolllevel <= 11){
				trans_color = '#031533';
			}else{
				trans_color = '#FFF';
			}

			transitionSection.css('background-color',trans_color).addClass('transitioning');
			var target = $(this).data('targetlevel');

			setTimeout(function () {
				transitionSection.removeClass('transitioning');
				animatescroll(target);
				//animatevariable(target);
			}, 800);
		}
	});
	onWindowLoad();

	function onWindowLoad() {
		meetingpoints = initshapepoints();
		circlepoints = initcirclepoints();
		initanimation();

		transitionSection.removeClass('transitioning');
		documentheight = document.body.scrollHeight;

		$(window).on('resize', function () {
			newwindowheight = window.innerHeight;
			var newwindowwidth = $(window).width();
			var diffwidth = newwindowwidth - windowwidth;
			if (diffwidth != 0) {
				diffwidth = 1;
			}


			windowheight = newwindowheight;
			windowwidth = newwindowwidth;

			if (diffwidth) {
				meetingpoints = initshapepoints();
				circlepoints = initcirclepoints();
			}

			calculateheight(windowheight, diffwidth);
			documentheight = $(document).height();
		});
	}

	function initshapepoints(){
		var scale = 1;
		var windowwidth = $(window).width();
		var shape1offsettop = 115;
		var shape1offsetleft = 100;
		var shape2offsettop = 0;
		var shape2offsetleft = 100;
		var shape3offsettop = 50;
		var shape3offsetleft = 100;
		var meetingleft = 22;
		var newmeetingpointtop1 = 0;
		var newmeetingpointleft1 = 0;


		if(windowwidth > 1450){
			scale = 1;
		}else if(windowwidth > 1200 && windowwidth <= 1450){
			scale = 0.75;
			meetingleft = -21;

		}else if(windowwidth > 992 && windowwidth <= 1200){
			scale = 0.6;
			meetingleft = -44;
			shape2offsetleft = 0;
			shape3offsetleft = 0;
			shape1offsettop = 0;
			shape2offsettop = -100;
			shape3offsettop = 0;
			newmeetingpointtop1 = 70;
		}else if(windowwidth > 768 && windowwidth <= 992){
			scale = 0.5;
			meetingleft = -64;
			shape1offsetleft = 200;
			shape2offsetleft = -100;
			shape3offsetleft = -100;
			shape1offsettop = 0;
			shape2offsettop = -100;
			shape3offsettop = 0;
			newmeetingpointtop1 = 70;
			newmeetingpointleft1 = 130;
		}else if(windowwidth > 0 && windowwidth <= 768){
			scale = 0.6;
			meetingleft = -44;
			shape1offsetleft = 200;
			shape2offsetleft = -100;
			shape3offsetleft = -100;
			shape1offsettop = 0;
			shape2offsettop = -100;
			shape3offsettop = 0;
			newmeetingpointtop1 = 70;
			newmeetingpointleft1 = 200;
		}

		var headerheight = $('header').height();
		var contentheight = window.innerHeight - headerheight;
		var section1contwidth = section1.children('.container').width();



		var shape1top = (contentheight/2) - (shape1.children().height()*scale/2) + shape1offsettop;
		var shape1left = (section1contwidth/2) - shape1.children().width()*scale - shape1offsetleft;

		var meetingpoint1top = (contentheight/2) - 5 - newmeetingpointtop1;
		var meetingpoint1left = (section1contwidth/2) - 22 - newmeetingpointleft1;


		var shape2top = (contentheight/2) - shape2.children().height()*scale + shape2offsettop;
		var shape2left = (section1contwidth/2) + shape2offsetleft;

		var meetingpoint2top = (contentheight/2) - shape2.children().height()*scale - newmeetingpointtop1;
		var meetingpoint2left = (section1contwidth/2) - 22 - newmeetingpointleft1;


		var shape3top = (contentheight/2) + shape3offsettop;
		var shape3left = (section1contwidth/2) + shape3offsetleft + (shape2.children().width()*scale/2);

		var meetingpoint3top = (contentheight/2) - 5 - newmeetingpointtop1;
		var meetingpoint3left = (section1contwidth/2) + shape2.children().width()*scale - shape3.children().width()*scale - meetingleft - newmeetingpointleft1;

		var startingpoint = {
			shape1 : {
				top: shape1top,
				left: shape1left,
				rotate: 20,
				scale: scale
			},
			shape2 : {
				top: shape2top,
				left: shape2left,
				rotate: -10,
				scale: scale
			},
			shape3 : {
				top: shape3top,
				left: shape3left,
				rotate: -10,
				scale: scale
			}
		}

		shape1.css({'opacity': '1','transform':'translate('+startingpoint.shape1.left+'px,'+startingpoint.shape1.top+'px) rotate('+startingpoint.shape1.rotate+'deg) scale('+startingpoint.shape1.scale+')'});
		shape2.css({'opacity': '1','transform':'translate('+startingpoint.shape2.left+'px,'+startingpoint.shape2.top+'px) rotate('+startingpoint.shape2.rotate+'deg) scale('+startingpoint.shape2.scale+')'});
		shape3.css({'opacity': '1','transform':'translate('+startingpoint.shape3.left+'px,'+startingpoint.shape3.top+'px) rotate('+startingpoint.shape3.rotate+'deg) scale('+startingpoint.shape3.scale+')'});

		var meetingpoint = {
			shape1 : {
				top: meetingpoint1top,
				left: meetingpoint1left,
				rotate: 0,
				scale: scale
			},
			shape2 : {
				top: meetingpoint2top,
				left: meetingpoint2left,
				rotate: 0,
				scale: scale
			},
			shape3 : {
				top: meetingpoint3top,
				left: meetingpoint3left,
				rotate: 0,
				scale: scale
			}
		}
		var differencepoint = {
			shape1 : {
				top: shape1top - meetingpoint1top,
				left: shape1left - meetingpoint1left,
				rotate: startingpoint.shape1.rotate - meetingpoint.shape1.rotate
			},
			shape2 : {
				top: shape2top - meetingpoint2top,
				left: shape2left - meetingpoint2left,
				rotate: startingpoint.shape2.rotate - meetingpoint.shape2.rotate
			},
			shape3 : {
				top: shape3top - meetingpoint3top,
				left: shape3left - meetingpoint3left,
				rotate: startingpoint.shape3.rotate - meetingpoint.shape3.rotate
			}
		}
		var meetingpoints = {
			startingpoint: startingpoint,
			meetingpoint: meetingpoint,
			differencepoint: differencepoint

		}
		return meetingpoints;


	}

	function initcirclepoints(){
		var scale = 1;
		var logoscale = 1;
		var titleoffset = 0;
		var perc1, perc2;
		var windowwidth = $(window).width();
		if(windowwidth > 1450){
			scale = 1;
			logoscale = 1;
			titleoffset = 0;
			perc1 = 0.75;
			perc2 = 0.25;

		}else if(windowwidth > 1300 && windowwidth < 1450){
			scale = 0.8;
			logoscale = 0.6;
			titleoffset = 80;
			perc1 = 0.75;
			perc2 = 0.25;

		}else if(windowwidth > 992 && windowwidth <= 1300){
			scale = 0.7;
			logoscale = 0.7;
			titleoffset = 80;
			perc1 = 0.65;
			perc2 = 0.35;

		}else if(windowwidth > 768 && windowwidth <= 992){
			scale = 0.7;
			logoscale = 0.7;
			titleoffset = 80;
			perc1 = 0.65;
			perc2 = 0.35;

		}
		else if(windowwidth > 500 && windowwidth <= 768){
			scale = 0.7;
			logoscale = 0.7;
			titleoffset = 80;
			perc1 = 0.65;
			perc2 = 0.35;

		}else if(windowwidth > 0 && windowwidth <= 500){
			scale = 0.7;
			logoscale = 0.7;
			titleoffset = 80;
			perc1 = 0.65;
			perc2 = 0.35;

		}
		var circle = section5.find('.circle-tech');
		var circleheight = circle.outerHeight();
		var circlewidth = circle.outerWidth();
		var logo = $('.logo-mark');
		var logoheight = logo.height();
		var logowidth = logo.width();
		var title = section5.find('h2.overtitle');
		var titleheight = title.outerHeight();
		var titlewidth = title.outerWidth();

		var windowwidth = $(window).width();
		var headerheight = $('header').height();
		var contentheight = windowheight - headerheight;

		var centertop = contentheight/2;
		var centerleft = windowwidth/2;
		var techleft, insleft, invleft;
		if(windowwidth < 501){
			techleft = '50%';
			insleft = '50%';
			invleft = '50%';
		}else{
			techleft = centerleft - circlewidth*0.5;
			invleft = centerleft - circlewidth*perc1;
			insleft = centerleft - circlewidth*perc2;
		}

		var circlepoints = {
			tech: {
				top: centertop - circleheight*perc1,
				left: techleft
			},
			inv: {
				top: centertop - circleheight*perc2,
				left: invleft
			},
			ins: {
				top: centertop - circleheight*perc2,
				left: insleft
			},
			logo: {
				top: centertop - 10,
				left: centerleft - logowidth*0.5
			},
			title: {
				top: centertop - circleheight*perc1 - titleheight - 50 + titleoffset,
				left: centerleft - titlewidth*0.5
			}
		}
		circle.css({'top':circlepoints.tech.top, 'left': circlepoints.tech.left, 'transform':'scale('+scale+')'});
		section5.find('.circle-inv').css({'top':circlepoints.inv.top, 'left': circlepoints.inv.left, 'transform':'scale('+scale+')'});
		section5.find('.circle-ins').css({'top':circlepoints.ins.top, 'left': circlepoints.ins.left, 'transform':'scale('+scale+')'});
		logo.css({'top':circlepoints.logo.top, 'left': circlepoints.logo.left, 'transform':'scale('+logoscale+')'});
		title.css({'top':circlepoints.title.top, 'left': circlepoints.title.left});
		return circlepoints;
	}
	function initanimation(){
		setTimeout(function() {
			body.addClass('loaded');
			calculateheight(windowheight);
			window.scrollTo({
				top: 0
			});
			setTimeout(function(){
				// The logo animation
				shape1.css({transition: 'all 1s ease-in-out'});
				shape2.css({transition: 'all 1s ease-in-out'});
				shape3.css({transition: 'all 1s ease-in-out'});
				shape1.css({'opacity':'1', 'transform':'translate('+meetingpoints.meetingpoint.shape1.left+'px,'+meetingpoints.meetingpoint.shape1.top+'px) rotate('+meetingpoints.meetingpoint.shape1.rotate+'deg) scale('+meetingpoints.meetingpoint.shape1.scale+')'});
				shape2.css({'opacity':'1', 'transform':'translate('+meetingpoints.meetingpoint.shape2.left+'px,'+meetingpoints.meetingpoint.shape2.top+'px) rotate('+meetingpoints.meetingpoint.shape2.rotate+'deg) scale('+meetingpoints.meetingpoint.shape1.scale+')'});
				shape3.css({'opacity':'1', 'transform':'translate('+meetingpoints.meetingpoint.shape3.left+'px,'+meetingpoints.meetingpoint.shape3.top+'px) rotate('+meetingpoints.meetingpoint.shape3.rotate+'deg) scale('+meetingpoints.meetingpoint.shape1.scale+')'});

			},2300);
		}, 1000);
	}

})(document);

});