body {
		margin: 0;
		overflow-x: hidden;
	}
#gl {
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	position: relative;
	background-image: url(../images/bg.jpg);
	background-repeat: no-repeat; 
	background-size: cover;	
	
}
	p {font-family: 'Open Sans', sans-serif;}

	 html {
	  scroll-behavior: smooth;
	}

	p.a {font-size: 18px;}  
	p.b {font-size: 18px;}  
	H2 {font-size: 40px;line-height: 0.9;}
	H3 {
	  letter-spacing: 5px;
	  text-transform: uppercase;
	  font: 20px "Lato", sans-serif;
	  color: #111;
	}
	H4 {font-size: 30px;font-family: 'Open Sans', sans-serif;}
	H5 {font-size: 100px;color: #000000;}
	H6 {font-size: 30px;color: #000000;}
	a {	color: #f2f2f2;	font-size: 18px;text-decoration: none;}	
	
	
	.slide-content {
		position: absolute;
		top: 0; 
		left: 0;
		width: 100%;
		height:100%; 
		display: flex; 
		justify-content: center; 
		align-items: center;
		opacity:1;
		width: 100%;
		background-repeat: no-repeat; 
		background-position: center;
		transition: 0.5s;		
	}
	
	.slide-content:hover {
		opacity:0.8;
		transform: scale(1.1);
		 
	}	
/*! menü start */
	.topnav {
		overflow: hidden;
		background-color: rgba(0, 0, 0, 0.9);
		height: 80px;
		width: 100%;
		clip-path: polygon(0 0, 100% 0, 150% calc(140% - 5vw),0 100%);
	}

	.topnav a {
		float: right;
		display: block;
		text-align: center;
		padding: 22px 16px;
		font-family: 'Open Sans', sans-serif;
		text-decoration: none;
	}

	.topnav .logo {
		float: left;
		display: block;
		color: #ffffff;
		text-align: center;
		padding: 4px 20px;
		text-decoration: none;
		z-index: 10000;
	}

	.topnav a:hover {
		color: #ff21e1;
	}

	.active {
		color: #28bbff;
	}

	.topnav .icon {
		display: none;
	}


/*! menü end */
/*! scrollbar start */

	/* width */
	::-webkit-scrollbar {
		width: 10px;
	}

	/* Track */
	::-webkit-scrollbar-track {
		box-shadow: inset 0 0 5px grey; 
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.7); 
	}
	 
	/* Handle */
	::-webkit-scrollbar-thumb {
		background: #00A0E3; 
		border-radius: 4px;
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
		background: #004d6e; 
	}

	/* width */
	.scrollbar {
		scrollbar-color: #00A0E3;
		scrollbar-width: thin;	 
	}
 
	/* Handle on hover */
	.scrollbar:hover {
		scrollbar-color: #004d6e;	  
	}
/*! scrollbar end */

	.bgimg-1, .bgimg-2, .bgimg-3 {
		position: relative;
		opacity: 1;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.bgimg-1 {
		background-image: url("../images/back.jpg");
		min-height: 100%;
	}

	.bgimg-2 {
		background-image: url("../images/back2.jpg");
		min-height: 100%;
	}

	.bgimg-3 {
		background-image: url("../images/back3.jpg");
		min-height: 100%;
	}

	.caption {
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		text-align: center;
		color: #000;
	}

	.caption span.border {
		background-color: #111;
		color: #fff;
		padding: 18px;
		font-size: 25px;
		letter-spacing: 10px;
	}
 
	#preload {
		bottom: 0;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999999;
		overflow: hidden;
	}

	#preload .box1 {
		background: #fff;
		top: 0;
		left: 0;
		position: fixed;
		width: 50%;
		height: 100%;
		z-index: 9999999;
		overflow: hidden;
		-webkit-animation: animate-box 3s;
		-moz-animation: animate-box 3s;
		-ms-animation: animate-box 3s;
		animation-delay: 1s;
	}

	#preload .box2 {
		background: #fff;
		top: 0;
		right: 0;
		position: fixed;
		width: 50%;
		height: 100%;
		z-index: 9999999;
		overflow: hidden;
		-webkit-animation: animate-box 3s;
		-moz-animation: animate-box 3s;
		-ms-animation: animate-box 3s;
		animation-delay: 1s;
	}

	#preload .line {
		position: fixed;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
		top: 0;
		width: 2px;
		height: 100%;
		background-color: #24a4e5;
		-webkit-animation: animate-line 1s;
		-moz-animation: animate-line 1s;
		-ms-animation: animate-line 1s;
		opacity: 0;
		z-index: 999999999;
	}

	@keyframes animate-line {
		0% {
			height: 0;
		}
		100% {
			height: 100%;
			opacity: 1;
		}
	}

@keyframes animate-box {
    0% {
        width: 50%;
    }
    100% {
        width: 0;
    }
}
 
/* MOBILE */
@media (max-width: 420px) {
	.logo-fooldal {
		position: absolute; 
		bottom:30px;
		width:80%;
		height: auto;
	}	
/*! elérhetőség start */
	.elerhetoseg {
		position: flex;
		width: 100%;     
		background-image: linear-gradient(135deg, #004a70, #000000);
		clip-path: polygon(0 0, 100% 0, 100% 100%,0 calc(100% - 0vw));
	}	
	.elerhetosega {
		font-family: 'Open Sans', sans-serif;
		position: relative;
		width: 90%; 
		height:auto; 
		height: auto; 
		display: flex; 
		flex-wrap: wrap; 
		justify-content:   center;
		text-align: center;
		color:white;
		margin: auto auto; 
		text-align: center;
	}
	.harom-div {
		color:white; 
		width: 100%; 
		margin-top: 20px;
		margin-bottom: 20px;
	}
/*! elérhetőség end */
/*! who am i start */
	#who-am-i {
		margin: 0;
		height: auto; 
		margin-top:-70px; 
		margin-bottom: 100px; 
		background-color: rgba(255, 255, 255, 1);
		display: inline-block; 
	}
	.whoarewe {
 		position: relative;    
		width: 90%;  
		height: auto; 
		z-index:5;
		margin: auto auto;  
		margin-top: 20px;
	}
	.bevezeto {
		position: flex;
		width: 90%;
		 
		padding: 10px;
		color: black;
		text-align: left;
 	
	}	
	.whoarewe-cimsor {
		font-family: 'Stoke', serif;
		font-size: 40px;
		color: #000000;
		background: linear-gradient(to right, #000000 10%, #00aae3 40%, #000000 100%);
		-webkit-background-clip: text; -webkit-text-fill-color: transparent;
	}
	.whoarewe-szoveg {
		margin-top: -50px;	
	}
	.bevezetokep {
		position: relative;
		 
		 
		padding: 10px;
		 
		text-align: center;
		top: 20px;
		width: 90%;
		height: 600px;
		background-image: url('../images/attila.jpg'); 
		background-position: top center; 
		background-repeat: no-repeat; 
		background-size: cover; 
		margin: auto auto;
		
	}	
/*! who am i end */

/*! my works start */
	#my-works {
		z-index: 3;
		margin-top:  0px; 
		height: auto;   
		display: inline-block; 
		background-image: linear-gradient(135deg, #b5e3e6, #ffffff);  
	}
	
	.myworks {
		position: flex; 
		width: 90%; 
		display: flex; 
		flex-wrap: wrap; 
		justify-content:   center;
		margin: auto auto;
 
		margin-bottom:  140px;
	}
	
	.myworks-bevezeto {
		position: flex;
		width: 100%;
		height: auto;
		margin: auto auto;
		margin-top:  0px;
		border-bottom: 1px dashed #000000;
	}
	.myworks-cimsor {
		font-family: 'Stoke', serif; 
		font-size: 40px; 
		margin:40px 20px; 
		background: linear-gradient(to right, #000000 30%, #00aae3 50%, #000000 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
		text-align: center;
	}
	
	.branddesign-box {
		position: flex; 
		width: 100%; 
		height: auto; 
		background-color: rgba(255, 255, 255, 0);
		padding: 2%;
		border-right: 0px dashed #000000;
		text-align: center;
	}
	.graphicdesign-box {
		position: flex; 
		width: 100%; 
		height: auto; 
		background-color: rgba(255, 255, 255, 0);
		padding: 2%;
		border-right: 0px dashed #000000;
		text-align: center;
	}	
	.websitebuilding-box {
		position: flex; 
		width: 100%; 
		height: auto; 
		background-color: rgba(255, 255, 255, 0);
		padding: 2%;
		text-align: center;
	}		
	.photovideo-box {
		position: flex; 
		width: 100%;
		height: auto; 
		background-color: rgba(255, 255, 255, 0);  
		padding: 2%;
		text-align: center;
		border-top: 0px dashed #000000;
		border-bottom: 0px dashed #000000;
	}		
	
	
	.szolgaltatasok-box {
		/* position: relative; */
 		width: 100%;
		height: 270px;
		box-shadow: 0 0 0 1px #00A0E3;
		position:  relative;
		position: relative;
		overflow: hidden;
		border-radius: 4px;
		
	}
 
	.szolg-anim {
		position: absolute;
		top: 0; 
		left: 0;
		width: 100%;
		height:100%; 
		display: flex; 
		justify-content: center; 
		align-items: center;
		opacity:1;
		width: 100%;
		background-repeat: no-repeat; 
		background-position: center;
		transition: 0.5s;
	}
	
	.szolg-anim:hover {
		opacity:0.8;
		transform: scale(1.1);
	}
	
	.szolg-aniddm:hover {
		transform: rotate(20deg);
		opacity: 1;
		background-color: rgba(199,220,255,0.3);
		box-shadow: 0 0 20px 3px #cccccc inset, 0 0 0 15px #ffffff inset, 0 0 10px 20px #00A0E3 inset;
	}
	
	
	.whatwedo-ablak {
		top:  0px;
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 500;
		left: 0px;
		background-image: linear-gradient(#00A0E3, #f06894);
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 60px;
		display: flex; 
		flex-wrap: wrap; 
		justify-content: center;
	} 
	
	.whatwedo-ablak a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 25px;
		color: #ffffff;
		display: block;
		transition: 0.3s;
		
	}

	.whatwedo-ablak a:hover {
		color: #f1f1f1;
	}

	
	.whatwedo-ablak .closebtn {
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 36px;
		margin-left: 50px;
	}

	.whatwedo-ablak .box1 {
		position:fixed; width: 0;height:90%; overflow-x: hidden;
	}
	.whatwedoimage {
		display: inline-block;	
		position: relative;	
		margin: 1%;	
		overflow: hidden; 
		height:202px; 
		width: 45%;
		float: left; 
		border: 3px solid #ffffff;
	}
	.whatwedoimage-b {
		 position: relative;
		 margin: 0%;
		 height:250px;
		 width: 100%;
	}
	
	.whatwedoimage-c {
		display: inline-block;	
		position: relative;	
		margin: 1%;
		overflow: hidden; 
		width: 95%;
		height: 100%; 
		border: 0px solid #ffffff; 
	}			
	.whatwedovideo {
		display: inline-block;	
		position: relative;
		margin: 1%;	
		overflow: hidden; 
		height:220px;
		width: 90%;
		float: left; 
		border: 3px solid #ffffff; 
	}		
	.whatwedoszoveg {
		 position: relative;
		 margin: 0%;
		 height:auto;
		 width: 100%;
	}
	
	 .tovabb_gomb {
		position: relative;
		padding:20px;
		font-size:18px;
		background-color:#eeeeee;
		color: #000000;
		text-align: center;
		right: 0px;
		bottom: 0px;
		border: 1px solid #00A0E3;
		transition: 0.3s;	
		font-family: 'Open Sans', sans-serif;text-decoration: none; 
		text-transform: uppercase;
	}

	.tovabb_gomb:hover {
		background-color:#00A0E3;
		color: #ffffff;
		transform: scale(0.9);	
	}	
/*! my works end */	
	#job-interview {
		position: flex; 
		width: 100%; 
		height: auto;
		display: flex; 
		flex-wrap: wrap; 
		justify-content: center; 
		margin: auto auto; 
		background-color: #ffffff;margin-top: -100px;
	}
	.jobinterview-cimsor {
		font-family: 'Stoke', serif; 
		font-size: 40px;  
		background: linear-gradient(to right, #000000 30%, #00aae3 50%, #000000 70%); 
		-webkit-background-clip: text; 
		-webkit-text-fill-color: transparent;
		margin-top: 80px;
		margin-bottom: 30px;
		text-align: center;
	}
	.jobinterview-text {
		z-index: 5;
		font-family: 'Stoke', serif; 
		font-size: 25px; 
		width:100%; 
		position: relative; 
		
	}
	.bubblea {
		width: 300px;
		margin: 20px auto;
		background: #00bfb6;
		padding: 20px;
		text-align: center;
		color: #fff;
		font-family: 'Open Sans', sans-serif;
		position: relative;
		transition: 0.4s;
	}	
	
	.bubble {
		width: 300px;
		margin: 20px auto;
		background: #00bfb6;
		padding: 20px;
		text-align: center;
		color: #fff;
		font-family: 'Open Sans', sans-serif;
		position: relative;
		transition: 0.4s;
	}

	.bubble:hover {
		color: #630085;
		text-shadow: 0 0 15px #ffffff, 0 0 15px #ffffff, 0 0 15px #ffffff;
	}
	
	.sb1:before {
		content: "";
		width: 0px;
		height: 0px;
		position: absolute;
		border-left: 10px solid #00bfb6;
		border-right: 10px solid transparent;
		border-top: 10px solid #00bfb6;
		border-bottom: 10px solid transparent;
		right: -19px;
		top: 6px;
	}

	.sb2:before {
		content: "";
		width: 0px;
		height: 0px;
		position: absolute;
		border-left: 10px solid transparent;
		border-right: 10px solid #00bfb6;
		border-top: 10px solid #00bfb6;
		border-bottom: 10px solid transparent;
		left: -19px;
		top: 6px;
	}

	.sb3:before {
		content: "";
		width: 0px;
		height: 0px;
		position: absolute;
		border-left: 10px solid #00bfb6;
		border-right: 10px solid transparent;
		border-top: 10px solid #00bfb6;
		border-bottom: 10px solid transparent;
		left: 19px;
		bottom: -19px;
	}
	
	.video-box {
		position: relative; 
		width: 100%; 
		min-height: 290px; 
		max-height: auto; 
		margin-bottom: 0px; 
		background-color: #ffffff; 
		z-index: 1;
				
	}
	
/*! job interview start */
 

 

 
	
/*! job interview end */
/*! references start */
	#appetizer {
		position: relative;
		z-index: 50;
		margin-top:  0px;
		height: auto;  
		background-image: linear-gradient(135deg, #b5e3e6, #ffffff);
	}
	
	.appetizer {
		position: relative; 
		margin-top:	75px;
		margin-bottom:	75px;
		width: 100%; 
		height: auto; 
		display: inline-block;
	}
	
	.appetizer-b {
		position: flex;
		width: 90%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center; 
		margin: auto auto;
	}		
	.appetizer-c {
		position: flex;   
		width: 100%; 
		height: auto; 
		margin: auto auto;  
		margin-top:  -40px; 
		margin-bottom: 50px; 
		border-bottom: 1px dashed #000000;
	}	
	.appetizer-text {
		font-family: 'Stoke', serif; 
		font-size: 40px; 
		margin:40px 20px; 
		background: linear-gradient(to right, #000000 30%, #00aae3 50%, #000000 70%); 
		-webkit-background-clip: text; 
		-webkit-text-fill-color: transparent;
		text-align: center;
	}
	
	
	.appetizer-box {
		/* position: relative; */
 		width: 100%;
		height: 270px;
		box-shadow: 0 0 0 1px #00A0E3;
		position:  relative;
		position: relative;
		overflow: hidden;
		 float: left;
		
	}
 
	.appetizer-anim {
		position: absolute;
		top: 0; 
		left: 0;
		width: 100%;
		height:100%; 
		display: flex; 
		justify-content: center; 
		align-items: center;
		opacity:1;
		width: 100%;
		background-repeat: no-repeat; 
		background-position: center;
		transition: 0.5s;
		 
	}
	
	.appetizer-anim:hover {
		opacity:0.8;
		transform: scale(1.1);
	}
	
 
	
	
 
/*! references end */ 


/*! footer start */

.container {
	margin: 0 auto;
	padding: 20px;
	width: 480px;
	background-image: url(http://static2.grsites.com/archive/textures/lgren/lgren020.jpg);
}

.footer {
	position:relative; 
	top: 0px;
	margin:auto;   
	width: 90%;
	height:auto;  
	z-index:5; 
 
	justify-content: center;
}
.footer-bal {
	position:relative;  
	border: 0px solid #ff0000; 
	width:100%; 
	height:auto;
	text-align:left;
	font-family: 'Open Sans', sans-serif;
	color: #ffffff;
	text-decoration: none;
}
.footer-jobb {
	position:relative;
	width:100%; 
	height:auto;
	border: 0px solid #ff0000;  
}
.footer-logo {
 
	justify-content: center;
	position:relative;
	  
	width:100%; 
	margin-bottom: 65px; 
	text-align:center; 
}
.footer-contactus-cim {
	font-family: 'Open Sans', sans-serif;
	color: #ffffff;
	text-decoration: none;
	font-weight: 900;
	font-size: 25px;
}
.footer-scottishdesign {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	color: #ffffff;
	text-decoration: none;
	position:relative; 
	bottom: 0px;
	margin:auto; 
	margin-bottom: 40px; 
	margin-top: 20px; 
	width: 90%;
	height:auto;  
	z-index:5; 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center;
}

button{
	background-color: blue;
	color: white;
	border-radius: 20%;
	padding: 10px;
	cursor: pointer;
}

button:hover{
	background-color: red;
}

.controlpanel{
	margin: 10px;
	border: 2px solid;
	padding: 20px;
	position: relative;
}

.title{
	float: left;
	padding: 0 2px;
	margin: -30px 0 0 0px;
	background-image: url(http://static2.grsites.com/archive/textures/lgren/lgren020.jpg);
}

section {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  height: 100vh;
  background-color: #ffffff;
  background-image: url(../images/bg.jpg);
  background-repeat: no-repeat; 
  background-size: cover;
}
footer, nav {
  height: 10vh;
  background-color: grey;
}
#home {
  
  }
#contact {
  background-image: url('../images/victoriastr2.jpg');
  margin-top:  0px;
   height: 1200px;
}
/*! footer end */
/*! modal ablak start */
	.modal {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 99999; /* Sit on top */
		padding-top: 100px; /* Location of the box */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: rgba(199,220,255,0.8); /* Black w/ opacity */
		font-family: 'Open Sans', sans-serif;
	}

	/* Modal Content */
	.modal-content {
		position: relative;
		background-color: #ffffff;
		font-family: 'Open Sans', sans-serif;
		border-radius: 8px;
		margin: auto;
		padding: 0;
		border: 3px solid #00A0E3;
		width: 90%;
		max-width: 500px;
		height: 50%;
		top:10%;
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
		-webkit-animation-name: animatetop;
		-webkit-animation-duration: 0.4s;
		animation-name: animatetop;
		animation-duration: 0.4s
	}

	.modal-circle {
		 border-radius: 100%;
		 width: 200px;
		 height: 200px;
		 background-color: #00A0E3;
		
		background: linear-gradient(207deg, rgba(27,185,255,1) 0%, rgba(0,49,121,1) 80%);	
		 position: absolute;
		 left: 50% ;
		 margin-left: -100px;
		 top: -100px;
		 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	}

	/* Add Animation */
	@-webkit-keyframes animatetop {
		from {top:-300px; opacity:0} 
		to {top:10%; opacity:1}
	}

	@keyframes animatetop {
		from {top:-300px; opacity:0}
		to {top:10%; opacity:1}
	}

	/* The Close Button */
	.close {
		color: #00A0E3;;
		float: right;
		font-size: 28px;
		font-weight: bold;
		margin-right: 10px;
	}

	.close:hover,
	.close:focus {
		color: #ccc;
		text-decoration: none;
		cursor: pointer;
	}

 	.modal-body {
		padding: 5%;
		margin-top: 120px;
		font-family: 'Open Sans', sans-serif;
		font-weight: 900;
		padding:20px;
		font-size:22px;
		text-align: center;
		color: #000000;
		text-transform: uppercase;
	}

	.modal_gomb {
		position: absolute;
		font-family: Roboto-Thin;
		font-weight: 900;
		padding:2%;
		width:20%;
		height: 60px;
		font-size:18px;
		background-color:#00A0E3;
		color: #ffffff;
		text-align: center;
		bottom: 30px;
		 
		border: 1px solid #00A0E3;
		transition: 0.3s;
		left: 50%;
		margin-left: -11%;
	}

	.modal_gomb:hover {
		background-color:#eeeeee;
		color: #00A0E3;
		transform: scale(0.9);	
	} 

/*! modal ablak end */

}
/* TABLET */
@media (min-width: 421px) and (max-width: 949px) {
	.logo-fooldal {
		position: absolute; 
		bottom:20px;
		width:80%;
		height: auto;
	}	
/*! elérhetőség start */
	.elerhetoseg {
		position: flex;
		width: 100%;     
		background-image: linear-gradient(135deg, #004a70, #000000);
		clip-path: polygon(0 0, 100% 0, 100% 100%,0 calc(100% - 0vw));
	}	
	.elerhetosega {
		font-family: 'Open Sans', sans-serif;
		position: relative;
		width: 90%; 
		height:auto; 
		height: auto; 
		display: flex; 
		flex-wrap: wrap; 
		justify-content:   center;
		text-align: center;
		color:white;
		margin: auto auto; 
		text-align: center;
	}
	.harom-div {
		color:white; 
		width: 100%; 
		margin-top: 20px;
		margin-bottom: 20px;
	}
/*! elérhetőség end */
/*! who am i start */
	#who-am-i {
		margin: 0;
		height: auto; 
		margin-top:-120px; 
		margin-bottom: 100px; 
		background-color: rgba(255, 255, 255, 1);
		display: inline-block; 
	}
	.whoarewe {
 		position: relative;    
		width: 90%;  
		height: auto; 
		z-index:5;
		margin: auto auto;  
		margin-top: 20px;
	}
	.bevezeto {
		position: flex;
		width: 100%;
		 
		padding: 10px;
		color: black;
		text-align: left;
 	
	}	
	.whoarewe-cimsor {
		font-family: 'Stoke', serif;
		font-size: 60px;
		color: #000000;
		background: linear-gradient(to right, #000000 10%, #00aae3 40%, #000000 100%);
		-webkit-background-clip: text; -webkit-text-fill-color: transparent;
	}
	.whoarewe-szoveg {
		margin-top: -50px;	
	}
	.bevezetokep {
		position: relative;
		 
		 
		padding: 10px;
		 
		text-align: center;
		top: 20px;
		width: 90%;
		height: 600px;
		background-image: url('../images/attila.jpg'); 
		background-position: top center; 
		background-repeat: no-repeat; 
		background-size: cover; 
		margin: auto auto;
		
	}	
/*! who am i end */

/*! my works start */
	#my-works {
		z-index: 3;
		margin-top:  0px; 
		height: auto;   
		display: inline-block; 
		background-image: linear-gradient(135deg, #b5e3e6, #ffffff);  
	}
	
	.myworks {
		position: flex; 
		width: 90%; 
		display: flex; 
		flex-wrap: wrap; 
		justify-content:   center;
		margin: auto auto;
 
		margin-bottom:  140px;
	}
	
	.myworks-bevezeto {
		position: flex;
		width: 100%;
		height: auto;
		margin: auto auto;
		margin-top:  0px;
		border-bottom: 1px dashed #000000;
	}
	.myworks-cimsor {
		font-family: 'Stoke', serif; 
		font-size: 60px; 
		margin:40px 20px; 
		background: linear-gradient(to right, #000000 30%, #00aae3 50%, #000000 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
		text-align: center;
	}
	
	.branddesign-box {
		position: flex; 
		width: 100%; 
		height: auto; 
		background-color: rgba(255, 255, 255, 0);
		padding: 2%;
		border-right: 0px dashed #000000;
		text-align: center;
	}
	.graphicdesign-box {
		position: flex; 
		width: 100%; 
		height: auto; 
		background-color: rgba(255, 255, 255, 0);
		padding: 2%;
		border-right: 0px dashed #000000;
		text-align: center;
	}	
	.websitebuilding-box {
		position: flex; 
		width: 100%; 
		height: auto; 
		background-color: rgba(255, 255, 255, 0);
		padding: 2%;
		text-align: center;
	}		
	.photovideo-box {
		position: flex; 
		width: 100%;
		height: auto; 
		background-color: rgba(255, 255, 255, 0);  
		padding: 2%;
		text-align: center;
		border-top: 0px dashed #000000;
		border-bottom: 0px dashed #000000;
	}		
	
	
	.szolgaltatasok-box {
		/* position: relative; */
 		width: 100%;
		height: 270px;
		box-shadow: 0 0 0 1px #00A0E3;
		position:  relative;
		position: relative;
		overflow: hidden;
		border-radius: 4px;
		
	}
 
	.szolg-anim {
		position: absolute;
		top: 0; 
		left: 0;
		width: 100%;
		height:100%; 
		display: flex; 
		justify-content: center; 
		align-items: center;
		opacity:1;
		width: 100%;
		background-repeat: no-repeat; 
		background-position: center;
		transition: 0.5s;
	}
	
	.szolg-anim:hover {
		opacity:0.8;
		transform: scale(1.1);
	}
	
	.szolg-aniddm:hover {
		transform: rotate(20deg);
		opacity: 1;
		background-color: rgba(199,220,255,0.3);
		box-shadow: 0 0 20px 3px #cccccc inset, 0 0 0 15px #ffffff inset, 0 0 10px 20px #00A0E3 inset;
	}
	
	
	.whatwedo-ablak {
		top:  0px;
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 500;
		left: 0px;
		background-image: linear-gradient(#00A0E3, #f06894);
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 60px;
		display: flex; 
		flex-wrap: wrap; 
		justify-content: center;
	} 
	
	.whatwedo-ablak a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 25px;
		color: #ffffff;
		display: block;
		transition: 0.3s;
		
	}

	.whatwedo-ablak a:hover {
		color: #f1f1f1;
	}

	
	.whatwedo-ablak .closebtn {
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 36px;
		margin-left: 50px;
	}

	.whatwedo-ablak .box1 {
		position:fixed; width: 0;height:90%; overflow-x: hidden;
	}
	.whatwedoimage {
		display: inline-block;	
		position: relative;	
		margin: 1%;	
		overflow: hidden; 
		height:202px; 
		width: 45%;
		float: left; 
		border: 3px solid #ffffff;
	}
	.whatwedoimage-b {
		 position: relative;
		 margin: 0%;
		 height:300px;
		 width: 100%;
	}
	
	.whatwedoimage-c {
		display: inline-block;	
		position: relative;	
		margin: 1%;
		overflow: hidden; 
		width: 95%;
		height: 100%; 
		border: 0px solid #ffffff; 
	}			
	.whatwedovideo {
		display: inline-block;	
		position: relative;
		margin: 1%;	
		overflow: hidden; 
		height:280px;
		width: 90%;
		float: left; 
		border: 3px solid #ffffff; 
	}		
	.whatwedoszoveg {
		 position: relative;
		 margin: 0%;
		 height:auto;
		 width: 100%;
	}
	
	 .tovabb_gomb {
		position: relative;
		padding:20px;
		font-size:18px;
		background-color:#eeeeee;
		color: #000000;
		text-align: center;
		right: 0px;
		bottom: 0px;
		border: 1px solid #00A0E3;
		transition: 0.3s;	
		font-family: 'Open Sans', sans-serif;text-decoration: none; 
		text-transform: uppercase;
	}

	.tovabb_gomb:hover {
		background-color:#00A0E3;
		color: #ffffff;
		transform: scale(0.9);	
	}	
/*! my works end */	
	#job-interview {
		position: flex; 
		width: 100%; 
		height: auto;
		display: flex; 
		flex-wrap: wrap; 
		justify-content: center; 
		margin: auto auto; 
		background-color: #ffffff;margin-top: -100px;
	}
	.jobinterview-cimsor {
		font-family: 'Stoke', serif; 
		font-size: 60px;  
		background: linear-gradient(to right, #000000 30%, #00aae3 50%, #000000 70%); 
		-webkit-background-clip: text; 
		-webkit-text-fill-color: transparent;
		margin-top: 80px;
		margin-bottom: 30px;
		text-align: center;
	}
	.jobinterview-text {
		z-index: 5;
		font-family: 'Stoke', serif; 
		font-size: 25px; 
		width:100%; 
		position: relative; 
		
	}
	.bubblea {
		width: 300px;
		margin: 20px auto;
		background: #00bfb6;
		padding: 20px;
		text-align: center;
		color: #fff;
		font-family: 'Open Sans', sans-serif;
		position: relative;
		transition: 0.4s;
	}	
	
	.bubble {
		width: 400px;
		margin: 20px auto;
		background: #00bfb6;
		padding: 20px;
		text-align: center;
		color: #fff;
		font-family: 'Open Sans', sans-serif;
		position: relative;
		transition: 0.4s;
	}

	.bubble:hover {
		color: #630085;
		text-shadow: 0 0 15px #ffffff, 0 0 15px #ffffff, 0 0 15px #ffffff;
	}

	.sb1:before {
		content: "";
		width: 0px;
		height: 0px;
		position: absolute;
		border-left: 10px solid #00bfb6;
		border-right: 10px solid transparent;
		border-top: 10px solid #00bfb6;
		border-bottom: 10px solid transparent;
		right: -19px;
		top: 6px;
	}

	.sb2:before {
		content: "";
		width: 0px;
		height: 0px;
		position: absolute;
		border-left: 10px solid transparent;
		border-right: 10px solid #00bfb6;
		border-top: 10px solid #00bfb6;
		border-bottom: 10px solid transparent;
		left: -19px;
		top: 6px;
	}

	.sb3:before {
		content: "";
		width: 0px;
		height: 0px;
		position: absolute;
		border-left: 10px solid #00bfb6;
		border-right: 10px solid transparent;
		border-top: 10px solid #00bfb6;
		border-bottom: 10px solid transparent;
		left: 19px;
		bottom: -19px;
	}
	
	.video-box {
		position: relative; 
		width: 100%; 
		min-height: 500px; 
		max-height: auto; 
		margin-bottom: 100px; 
		background-color: #ffffff; 
		z-index: 1;
				
	}
	
/*! job interview start */
 

 

 
	
/*! job interview end */
/*! references start */
	#appetizer {
		position: relative;
		z-index: 50;
		margin-top:  0px;
		height: auto;  
		background-image: linear-gradient(135deg, #b5e3e6, #ffffff);
	}
	
	.appetizer {
		position: relative; 
		margin-top:	75px;
		margin-bottom:	75px;
		width: 100%; 
		height: auto; 
		display: inline-block;
	}
	
	.appetizer-b {
		position: flex;
		width: 90%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center; 
		margin: auto auto;
	}		
	.appetizer-c {
		position: flex;   
		width: 100%; 
		height: auto; 
		margin: auto auto;  
		margin-top:  -40px; 
		margin-bottom: 50px; 
		border-bottom: 1px dashed #000000;
	}	
	.appetizer-text {
		font-family: 'Stoke', serif; 
		font-size: 60px; 
		margin:40px 20px; 
		background: linear-gradient(to right, #000000 30%, #00aae3 50%, #000000 70%); 
		-webkit-background-clip: text; 
		-webkit-text-fill-color: transparent;
		text-align: center;
	}
	
	
	.appetizer-box {
		/* position: relative; */
 		width: 50%;
		height: 270px;
		box-shadow: 0 0 0 1px #00A0E3;
		position:  relative;
		position: relative;
		overflow: hidden;
		 float: left;
		
	}
 
	.appetizer-anim {
		position: absolute;
		top: 0; 
		left: 0;
		width: 100%;
		height:100%; 
		display: flex; 
		justify-content: center; 
		align-items: center;
		opacity:1;
		width: 100%;
		background-repeat: no-repeat; 
		background-position: center;
		transition: 0.5s;
		 
	}
	
	.appetizer-anim:hover {
		opacity:0.8;
		transform: scale(1.1);
	}
	
 
	
	
 
/*! references end */ 


/*! footer start */

.container {
	margin: 0 auto;
	padding: 20px;
	width: 480px;
	background-image: url(http://static2.grsites.com/archive/textures/lgren/lgren020.jpg);
}

.footer {
	position:relative; 
	top: 0px;
	margin:auto;   
	width: 90%;
	height:auto;  
	z-index:5; 
 
	justify-content: center;
}
.footer-bal {
	position:relative;  
	border: 0px solid #ff0000; 
	width:100%; 
	height:auto;
	text-align:left;
	font-family: 'Open Sans', sans-serif;
	color: #ffffff;
	text-decoration: none;
}
.footer-jobb {
	position:relative;
	width:100%; 
	height:auto;
	border: 0px solid #ff0000;  
}
.footer-logo {
 
	justify-content: center;
	position:relative;
	  
	width:100%; 
	margin-bottom: 65px; 
	text-align:center; 
}
.footer-contactus-cim {
	font-family: 'Open Sans', sans-serif;
	color: #ffffff;
	text-decoration: none;
	font-weight: 900;
	font-size: 25px;
}
.footer-scottishdesign {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	color: #ffffff;
	text-decoration: none;
	position:relative; 
	bottom: 0px;
	margin:auto; 
	margin-bottom: 40px; 
	margin-top: 20px; 
	width: 90%;
	height:auto;  
	z-index:5; 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center;
}

button{
	background-color: blue;
	color: white;
	border-radius: 20%;
	padding: 10px;
	cursor: pointer;
}

button:hover{
	background-color: red;
}

.controlpanel{
	margin: 10px;
	border: 2px solid;
	padding: 20px;
	position: relative;
}

.title{
	float: left;
	padding: 0 2px;
	margin: -30px 0 0 0px;
	background-image: url(http://static2.grsites.com/archive/textures/lgren/lgren020.jpg);
}

section {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  height: 100vh;
  background-color: #ffffff;
  background-image: url(../images/bg.jpg);
  background-repeat: no-repeat; 
  background-size: cover;
}
footer, nav {
  height: 10vh;
  background-color: grey;
}
#home {
  
  }
#contact {
  background-image: url('../images/victoriastr2.jpg');
  margin-top:  0px;
   height: 1200px;
}
/*! footer end */
/*! modal ablak start */
	.modal {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 99999; /* Sit on top */
		padding-top: 100px; /* Location of the box */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: rgba(199,220,255,0.8); /* Black w/ opacity */
		font-family: 'Open Sans', sans-serif;
	}

	/* Modal Content */
	.modal-content {
		position: relative;
		background-color: #ffffff;
		font-family: 'Open Sans', sans-serif;
		border-radius: 8px;
		margin: auto;
		padding: 0;
		border: 3px solid #00A0E3;
		width: 60%;
		max-width: 500px;
		height: 50%;
		top:2%;
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
		-webkit-animation-name: animatetop;
		-webkit-animation-duration: 0.4s;
		animation-name: animatetop;
		animation-duration: 0.4s
	}

	.modal-circle {
		 border-radius: 100%;
		 width: 200px;
		 height: 200px;
		 background-color: #00A0E3;
		
		background: linear-gradient(207deg, rgba(27,185,255,1) 0%, rgba(0,49,121,1) 80%);	
		 position: absolute;
		 left: 50% ;
		 margin-left: -100px;
		 top: -100px;
		 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	}

	/* Add Animation */
	@-webkit-keyframes animatetop {
		from {top:-300px; opacity:0} 
		to {top:2%; opacity:1}
	}

	@keyframes animatetop {
		from {top:-300px; opacity:0}
		to {top:2%; opacity:1}
	}

	/* The Close Button */
	.close {
		color: #00A0E3;;
		float: right;
		font-size: 28px;
		font-weight: bold;
		margin-right: 10px;
	}

	.close:hover,
	.close:focus {
		color: #ccc;
		text-decoration: none;
		cursor: pointer;
	}

 	.modal-body {
		padding: 5%;
		margin-top: 120px;
		font-family: 'Open Sans', sans-serif;
		font-weight: 900;
		padding:20px;
		font-size:22px;
		text-align: center;
		color: #000000;
		text-transform: uppercase;
	}

	.modal_gomb {
		position: absolute;
		font-family: Roboto-Thin;
		font-weight: 900;
		padding:2%;
		width:20%;
		height: 60px;
		font-size:18px;
		background-color:#00A0E3;
		color: #ffffff;
		text-align: center;
		bottom: 30px;
		 
		border: 1px solid #00A0E3;
		transition: 0.3s;
		left: 50%;
		margin-left: -11%;
	}

	.modal_gomb:hover {
		background-color:#eeeeee;
		color: #00A0E3;
		transform: scale(0.9);	
	} 

/*! modal ablak end */

}

/* COMPUTER */
@media (min-width: 950px) {
	.logo-fooldal {
		position: absolute; 
		bottom:50px;
		width:40%;
		height: auto;
	}
/*! elérhetőség start */
	.elerhetoseg {
		position: flex;
		width: 100%;     
		background-image: linear-gradient(135deg, #004a70, #000000);
		clip-path: polygon(0 0, 100% 0, 100% 100%,0 calc(100% - 5vw));
	}	
	.elerhetosega {
		font-family: 'Open Sans', sans-serif;
		position: relative;
		width: 90%; 
		height:auto; 
		height: auto; 
		display: flex; 
		flex-wrap: wrap; 
		justify-content:   center;
		text-align: center;
		color:white;
		margin: auto auto; 
		text-align: center;
	}
	.harom-div {
		color:white; 
		width: 28%; 
		margin-top: 20px;
		margin-bottom: 60px;
	}
/*! elérhetőség end */
/*! who am i start */
	#who-am-i {
		margin: 0;
		height: auto; 
		margin-top:-120px; 
		background-color: rgba(255, 255, 255, 1);
		display: inline-block; 
	}
	.whoarewe {
 		position: relative;    
		width: 90%;  
		height: auto; 
		z-index:5;
		margin: auto auto;  
		margin-top: 20px;
	}
	.bevezeto {
		position: flex;
		width: 60%;
		float: left;
		padding: 10px;
		color: black;
		text-align: left;
		-webkit-transform: rotate(+3deg);
		-moz-transform: rotate(+3deg);
		-ms-transform: rotate(+3deg);
		-o-transform: rotate(+3deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);	
	}	
	.whoarewe-cimsor {
		font-family: 'Stoke', serif;
		font-size: 60px;
		color: #000000;
		background: linear-gradient(to right, #000000 10%, #00aae3 40%, #000000 100%);
		-webkit-background-clip: text; -webkit-text-fill-color: transparent;
	}
	.whoarewe-szoveg {
		margin-top: -50px;
	
	}
	.bevezetokep {
		position: relative;
		display: inline-block;
		float: right;
		padding: 10px;
		color: black;
		text-align: left;
		top: 100px;
		width: 30%;
		height: 700px;
		background-image: url('../images/attila.jpg'); 
		background-position: top center; 
		background-repeat: no-repeat; 
		background-size: cover; 
	}	
/*! who am i end */

/*! my works start */
	#my-works {
		z-index: 3;
		margin-top:  0px; 
		height: auto;   
		display: inline-block; 
		background-image: linear-gradient(135deg, #b5e3e6, #ffffff); clip-path: polygon(0 calc(6vw - 0px), 100% 0, 100% calc(100% - 6vw),0 100%);
	}
	
	.myworks {
		position: flex; 
		width: 90%; 
		display: flex; 
		flex-wrap: wrap; 
		justify-content:   center;
		margin: auto auto;
		-webkit-transform: rotate(-4deg);
		-moz-transform: rotate(-4deg);
		-ms-transform: rotate(-4deg);
		-o-transform: rotate(-4deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-4);
		margin-bottom:  80px;
	}
	
	.myworks-bevezeto {
		position: flex;
		width: 100%;
		height: auto;
		margin: auto auto;
		margin-top:  40px;
		border-bottom: 1px dashed #000000;
	}
	.myworks-cimsor {
		font-family: 'Stoke', serif; 
		font-size: 60px; 
		margin:40px 20px; 
		background: linear-gradient(to right, #000000 30%, #00aae3 50%, #000000 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
		text-align: center;
	}
	
	.branddesign-box {
		position: flex; 
		width: 28.33%; 
		height: auto; 
		background-color: rgba(255, 255, 255, 0);
		padding: 2%;
		border-right: 1px dashed #000000;
		text-align: center;
	}
	.graphicdesign-box {
		position: flex; 
		width: 28.33%; 
		height: auto; 
		background-color: rgba(255, 255, 255, 0);
		padding: 2%;
		border-right: 1px dashed #000000;
		text-align: center;
	}	
	.websitebuilding-box {
		position: flex; 
		width: 28.33%; 
		height: auto; 
		background-color: rgba(255, 255, 255, 0);
		padding: 2%;
		text-align: center;
	}		
	.photovideo-box {
		position: flex; 
		width: 100%;
		height: auto; 
		background-color: rgba(255, 255, 255, 0);  
		padding: 2%;
		text-align: center;
		border-top: 1px dashed #000000;
		border-bottom: 1px dashed #000000;
	}		
	
	
	.szolgaltatasok-box {
		/* position: relative; */
 		width: 100%;
		height: 270px;
		box-shadow: 0 0 0 1px #00A0E3;
		position:  relative;
		position: relative;
		overflow: hidden;
		border-radius: 4px;
		
	}
 
	.szolg-anim {
		position: absolute;
		top: 0; 
		left: 0;
		width: 100%;
		height:100%; 
		display: flex; 
		justify-content: center; 
		align-items: center;
		opacity:1;
		width: 100%;
		background-repeat: no-repeat; 
		background-position: center;
		transition: 0.5s;
	}
	
	.szolg-anim:hover {
		opacity:0.8;
		transform: scale(1.1);
	}
	
	.szolg-aniddm:hover {
		transform: rotate(20deg);
		opacity: 1;
		background-color: rgba(199,220,255,0.3);
		box-shadow: 0 0 20px 3px #cccccc inset, 0 0 0 15px #ffffff inset, 0 0 10px 20px #00A0E3 inset;
	}
	
	
	.whatwedo-ablak {
		height: 400px;
		width: 0;
		position: fixed;
		z-index: 9999;
		left: 0px;
		background-image: linear-gradient(#00A0E3, #f06894);
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 60px;
		display: flex; 
		flex-wrap: wrap; 
		justify-content: center;
	} 
	
	.whatwedo-ablak a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 25px;
		color: #ffffff;
		display: block;
		transition: 0.3s;
		
	}

	.whatwedo-ablak a:hover {
		color: #f1f1f1;
	}

	
	.whatwedo-ablak .closebtn {
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 36px;
		margin-left: 50px;
	}

	.whatwedo-ablak .box1 {
		position:fixed; width: 0;height:370px; overflow-x: hidden;
	}
	.whatwedoimage {
		display: inline-block;	
		position: relative;	
		margin: 1%;	
		overflow: hidden; 
		height:202px; 
		width: 17%;
		float: left; 
		border: 3px solid #ffffff;
	}
	.whatwedoimage-b {
		 position: relative;
		 margin: 1%;
		 height:auto;
		 width: 47%;
		 float: left; 
	}	
	.whatwedoimage-c {
		display: inline-block;	
		position: relative;	
		margin: 1%;
		overflow: hidden; 
		height:21vw; 
		width: 95%;
		float: left; 
		border: 0px solid #ffffff; 
	}	
	.whatwedovideo {
		display: inline-block;	
		position: relative;
		margin: 1%;	
		overflow: hidden; 
		height:21vw;
		width: 95%;
		float: left; 
		border: 3px solid #ffffff; 
	}		
	.whatwedoszoveg {
		 position: relative;
		 margin: 1%;
		 height:auto;
		 width: 47%;
		 float: right;
	}	
	 .tovabb_gomb {
		position: relative;
		padding:20px;
		font-size:18px;
		background-color:#eeeeee;
		color: #000000;
		text-align: center;
		right: 0px;
		bottom: 0px;
		border: 1px solid #00A0E3;
		transition: 0.3s;	
		font-family: 'Open Sans', sans-serif;text-decoration: none; 
		text-transform: uppercase;
	}

	.tovabb_gomb:hover {
		background-color:#00A0E3;
		color: #ffffff;
		transform: scale(0.9);	
	}	
/*! my works end */	
	#job-interview {
		position: flex; 
		width: 100%; 
		display: flex; 
		flex-wrap: wrap; 
		justify-content: center; 
		margin: auto auto; 
		background-color: #ffffff;margin-top: -100px;
	}
	.jobinterview-cimsor {
		font-family: 'Stoke', serif; 
		font-size: 60px;  
		background: linear-gradient(to right, #000000 30%, #00aae3 50%, #000000 70%); 
		-webkit-background-clip: text; 
		-webkit-text-fill-color: transparent;
		margin-top: 80px;
		margin-bottom: 30px;
		text-align: center;
	}
	.jobinterview-text {
		z-index: 5;
		font-family: 'Stoke', serif; 
		font-size: 25px; 
		width:40%; 
		position: relative; 
		float:left;
	}
	
	.bubblea {
		width: 300px;
		margin: 20px auto;
		background: #00bfb6;
		padding: 20px;
		text-align: center;
		color: #fff;
		font-family: 'Open Sans', sans-serif;
		position: relative;
		transition: 0.4s;
	}	
	
	.bubble {
		width: 300px;
		margin: 20px auto;
		background: #00bfb6;
		padding: 20px;
		text-align: center;
		color: #fff;
		font-family: 'Open Sans', sans-serif;
		position: relative;
		transition: 0.4s;
	}

	.bubble:hover {
		color: #630085;
		text-shadow: 0 0 15px #ffffff, 0 0 15px #ffffff, 0 0 15px #ffffff;
		  background-image:
    radial-gradient(
      #00fff2,
      #00bfb6, #00bfb6
    );
	}
	.sb1:before {
		content: "";
		width: 0px;
		height: 0px;
		position: absolute;
		border-left: 10px solid #00bfb6;
		border-right: 10px solid transparent;
		border-top: 10px solid #00bfb6;
		border-bottom: 10px solid transparent;
		right: -19px;
		top: 6px;
	}

	.sb2:before {
		content: "";
		width: 0px;
		height: 0px;
		position: absolute;
		border-left: 10px solid transparent;
		border-right: 10px solid #00bfb6;
		border-top: 10px solid #00bfb6;
		border-bottom: 10px solid transparent;
		left: -19px;
		top: 6px;
	}

	.sb3:before {
		content: "";
		width: 0px;
		height: 0px;
		position: absolute;
		border-left: 10px solid #00bfb6;
		border-right: 10px solid transparent;
		border-top: 10px solid #00bfb6;
		border-bottom: 10px solid transparent;
		left: 19px;
		bottom: -19px;
	}
	
	.video-box {
		position: relative; 
		width: 60%; 
		height: 100%; 
		margin-bottom: 0px; 
		background-color: #fffccc; 
		z-index: 1;
		float:right;		
	}
	
/*! job interview start */
 

 

 
	
/*! job interview end */
/*! references start */
	#appetizer {
		position: relative;
		z-index: 50;
		margin-top:  0px;
		height: auto;  
		background-image: linear-gradient(135deg, #b5e3e6, #ffffff);
		clip-path: polygon(0 0, 100%  6vw, 100% 100%, 0 calc(100% - 6vw));
	}


	.appetizer {
		position: relative; 
		margin-top:	75px;
		margin-bottom:	75px;
		width: 100%; 
		height: auto; 
		display: inline-block;
	}
	
	.appetizer-b {
		position: flex;
		width: 90%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center; 
		margin: auto auto;
		-webkit-transform: rotate(4deg);
		-moz-transform: rotate(4deg);
		-ms-transform: rotate(4deg);
		-o-transform: rotate(4deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-4);
	}		
	.appetizer-c {
		position: flex;   
		width: 100%; 
		height: auto; 
		margin: auto auto;  
		margin-top:  -40px; 
		margin-bottom: 50px; 
		border-bottom: 1px dashed #000000;
	}	
	.appetizer-text {
		font-family: 'Stoke', serif; 
		font-size: 60px; 
		margin:40px 20px; 
		background: linear-gradient(to right, #000000 30%, #00aae3 50%, #000000 70%); 
		-webkit-background-clip: text; 
		-webkit-text-fill-color: transparent;
		text-align: center;
	}
	
	
	.appetizer-box {
		/* position: relative; */
 		width: 25%;
		height: 270px;
		box-shadow: 0 0 0 1px #00A0E3;
		position:  relative;
		position: relative;
		overflow: hidden;
		 float: left;
		
	}
 
	.appetizer-anim {
		position: absolute;
		top: 0; 
		left: 0;
		width: 100%;
		height:100%; 
		display: flex; 
		justify-content: center; 
		align-items: center;
		opacity:1;
		width: 100%;
		background-repeat: no-repeat; 
		background-position: center;
		transition: 0.5s;
		 
	}
	
	.appetizer-anim:hover {
		opacity:0.8;
		transform: scale(1.1);
	}
	
 
	
	
 
/*! references end */ 

/*! footer start */

.container {
	margin: 0 auto;
	padding: 20px;
	width: 480px;
	background-image: url(http://static2.grsites.com/archive/textures/lgren/lgren020.jpg);
}

.footer {
	position:relative; 
	bottom: 0px;
	margin:auto;   
	width: 90%;
	height:auto;  
	z-index:5; 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center;
}
.footer-bal {
	position:relative;  
	border: 0px solid #ff0000; 
	width:48%; 
	height:500px;
	text-align:left;
	font-family: 'Open Sans', sans-serif;
	color: #ffffff;
	text-decoration: none;
}
.footer-jobb {
	position:relative;
	width:50%; 
	border: 0px solid #ff0000;  
}
.footer-logo {
 
	justify-content: left;
	position:relative;
	 
	width:100%; 
	margin-bottom: 50px; 
	text-align:left; 
}
.footer-contactus-cim {
	font-family: 'Open Sans', sans-serif;
	color: #ffffff;
	text-decoration: none;
	font-weight: 900;
	font-size: 25px;
}
.footer-scottishdesign {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	color: #ffffff;
	text-decoration: none;
	position:relative; 
	bottom: 0px;
	margin:auto; 
	margin-bottom: 40px; 
	margin-top: 20px; 
	width: 90%;
	height:auto;  
	z-index:5; 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center;
}

button{
	background-color: blue;
	color: white;
	border-radius: 20%;
	padding: 10px;
	cursor: pointer;
}

button:hover{
	background-color: red;
}

.controlpanel{
	margin: 10px;
	border: 2px solid;
	padding: 20px;
	position: relative;
}

.title{
	float: left;
	padding: 0 2px;
	margin: -30px 0 0 0px;
	background-image: url(http://static2.grsites.com/archive/textures/lgren/lgren020.jpg);
}

section {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  height: 100vh;
  background-color: #ffffff;
  background-image: url(../images/bg.jpg);
  background-repeat: no-repeat; 
  background-size: cover;
}
footer, nav {
  height: 10vh;
  background-color: grey;
}
#home {
  
  }
#contact {
  background-image: url('../images/victoriastr2.jpg');
  margin-top: -100px;
}
/*! footer end */
/*! modal ablak start */
	.modal {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 99999; /* Sit on top */
		padding-top: 100px; /* Location of the box */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: rgba(199,220,255,0.8); /* Black w/ opacity */
		font-family: 'Open Sans', sans-serif;
	}

	/* Modal Content */
	.modal-content {
		position: relative;
		background-color: #ffffff;
		font-family: 'Open Sans', sans-serif;
		border-radius: 8px;
		margin: auto;
		padding: 0;
		border: 3px solid #00A0E3;
		width: 60%;
		max-width: 500px;
		height: 50%;
		top:100px;
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
		-webkit-animation-name: animatetop;
		-webkit-animation-duration: 0.4s;
		animation-name: animatetop;
		animation-duration: 0.4s
	}

	.modal-circle {
		 border-radius: 100%;
		 width: 200px;
		 height: 200px;
		 background-color: #00A0E3;
		
		background: linear-gradient(207deg, rgba(27,185,255,1) 0%, rgba(0,49,121,1) 80%);	
		 position: absolute;
		 left: 50% ;
		 margin-left: -100px;
		 top: -100px;
		 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	}

	/* Add Animation */
	@-webkit-keyframes animatetop {
		from {top:-300px; opacity:0} 
		to {top:100px; opacity:1}
	}

	@keyframes animatetop {
		from {top:-300px; opacity:0}
		to {top:100px; opacity:1}
	}

	/* The Close Button */
	.close {
		color: #00A0E3;;
		float: right;
		font-size: 28px;
		font-weight: bold;
		margin-right: 10px;
	}

	.close:hover,
	.close:focus {
		color: #ccc;
		text-decoration: none;
		cursor: pointer;
	}

 	.modal-body {
		padding: 5%;
		margin-top: 120px;
		font-family: 'Open Sans', sans-serif;
		font-weight: 900;
		padding:20px;
		font-size:22px;
		text-align: center;
		color: #000000;
		text-transform: uppercase;
	}

	.modal_gomb {
		position: absolute;
		font-family: Roboto-Thin;
		font-weight: 900;
		padding:2%;
		width:20%;
		height: 60px;
		font-size:18px;
		background-color:#00A0E3;
		color: #ffffff;
		text-align: center;
		bottom: 30px;
		 
		border: 1px solid #00A0E3;
		transition: 0.3s;
		left: 50%;
		margin-left: -11%;
	}

	.modal_gomb:hover {
		background-color:#eeeeee;
		color: #00A0E3;
		transform: scale(0.9);	
	} 

/*! modal ablak end */

}
 

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
  }
}





 

/*! rotate start */
.rotate {

/* Safari */
-webkit-transform: rotate(-4deg);

/* Firefox */
-moz-transform: rotate(-4deg);

/* IE */
-ms-transform: rotate(-4deg);

/* Opera */
-o-transform: rotate(-4deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

}
 
.rotateb {

/* Safari */
-webkit-transform: rotate(+3deg);

/* Firefox */
-moz-transform: rotate(+3deg);

/* IE */
-ms-transform: rotate(+3deg);

/* Opera */
-o-transform: rotate(+3deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

.rotatec {

/* Safari */
-webkit-transform: rotate(-4deg);

/* Firefox */
-moz-transform: rotate(-4deg);

/* IE */
-ms-transform: rotate(-4deg);

/* Opera */
-o-transform: rotate(-4deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-4);

}

.rotated {

/* Safari */
-webkit-transform: rotate(4deg);

/* Firefox */
-moz-transform: rotate(4deg);

/* IE */
-ms-transform: rotate(4deg);

/* Opera */
-o-transform: rotate(4deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-4);

} 
/*! rotate end */

video.loading {
  background: black url(../images/loader.gif) center center no-repeat;
}