/*
Theme Name: Aradi Aqua
Author: Digitalform
Author URI: https://digitalform.hu
Version: 1.0
*/

*{
margin: 0;
padding: 0;
border: 0;
text-decoration: none; 
}

*, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

@font-face { 
	font-family: 'FuturaPT'; 
	src: url("fonts/FuturaPT-Book.eot"); 
	src: url("fonts/FuturaPT-Book.eot?#iefix") format('embedded-opentype'),url("fonts/FuturaPT-Book.woff") format('woff'),url("fonts/FuturaPT-Book.ttf") format('truetype'),url("fonts/FuturaPT-Book.svg#MetaSerifPro-Book") format('svg');
	font-weight: 400; 
	font-style: normal;
	font-stretch: normal;
	font-display: swap;
}


body { font-family: 'FuturaPT', sans-serif; font-size: 18px; font-weight: 300; color: white; line-height: 22px; background: #d3e6ed; overflow-x: hidden; }

.vertical_middle { top: 50%; position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.uppercase { text-transform: uppercase; }
.center { text-align: center; }
.b_r_50p { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }

/* Animation */
.anim, #bgr .boxes .box:before { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.anim_1 { -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; }
.anim_cubic { -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); }

/* Button */
.button { height: 50px; padding: 0 30px; font-size: 16px !important; font-weight: 400; text-decoration: none !important; text-align: center; color: white !important; line-height: 50px; background: transparent; border: 1px solid white; display: inline-block; position: relative; cursor: pointer; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.button:hover { color: #0f1518 !important; background: white; }
.button:disabled { color: white; background: #999; border-color: #999; }

.button.button_red { color: white !important; background: #d82c41; border: none; }
.button.button_red:hover { background: #0f1518; }


/*
-----------------
	MAIN LOGO
-----------------
*/
#main_logo { width: 390px; height: 140px; left: 50%; top: 50%; position: absolute; z-index: 10; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#main_logo .logo { width: auto; height: 100%; display: inline-block; }
#main_logo .logo.active { animation: fill 1s ease forwards 2s, hide-fill 1s ease forwards 2s, small-logo 1s ease forwards 3s; }

/* Hide effect */
#main_logo.hide .logo { opacity: 0; }


/*
----------------------
	LOGO ANIMATION
----------------------
*/
.logo.active { width: auto; height: 100%; display: inline-block; animation: fill 1s ease forwards 2s, hide-fill 1s ease forwards 2s; }
.logo.active path { stroke-dasharray: 100; }
.logo.active path:nth-child(1) { stroke-dasharray: 1517; stroke-dashoffset: 1517; animation: line-anim 2s ease forwards; -moz-animation: line-anim 2s ease forwards; -webkit-animation: line-anim 2s ease forwards; }
.logo.active path:nth-child(2) { stroke-dasharray: 243; stroke-dashoffset: 243; animation: line-anim 2.1s ease forwards; -moz-animation: line-anim 2.1s ease forwards; -webkit-animation: line-anim 2.1s ease forwards; }
.logo.active path:nth-child(3) { stroke-dasharray: 676; stroke-dashoffset: 676; animation: line-anim 2.2s ease forwards; -moz-animation: line-anim 2.2s ease forwards; -webkit-animation: line-anim 2.2s ease forwards; }
.logo.active path:nth-child(4) { stroke-dasharray: 1414; stroke-dashoffset: 1414; animation: line-anim 2.3s ease forwards; -moz-animation: line-anim 2.3s ease forwards; -webkit-animation: line-anim 2.3s ease forwards; }
.logo.active path:nth-child(5) { stroke-dasharray: 808; stroke-dashoffset: 808; animation: line-anim 2.4s ease forwards; -moz-animation: line-anim 2.4s ease forwards; -webkit-animation: line-anim 2.4s ease forwards; }
.logo.active path:nth-child(6) { stroke-dasharray: 356; stroke-dashoffset: 356; animation: line-anim 2.5s ease forwards; -moz-animation: line-anim 2.5s ease forwards; -webkit-animation: line-anim 2.5s ease forwards; }
.logo.active path:nth-child(7) { stroke-dasharray: 823; stroke-dashoffset: 823; animation: line-anim 2.6s ease forwards; -moz-animation: line-anim 2.6s ease forwards; -webkit-animation: line-anim 2.6s ease forwards; }
.logo.active path:nth-child(8) { stroke-dasharray: 591; stroke-dashoffset: 591; animation: line-anim 2.7s ease forwards; -moz-animation: line-anim 2.7s ease forwards; -webkit-animation: line-anim 2.7s ease forwards; }
.logo.active path:nth-child(9) { stroke-dasharray: 938; stroke-dashoffset: 938; animation: line-anim 2.8s ease forwards; -moz-animation: line-anim 2.8s ease forwards; -webkit-animation: line-anim 2.8s ease forwards; }
.logo.active path:nth-child(10) { stroke-dasharray: 592; stroke-dashoffset: 592; animation: line-anim 2.9s ease forwards; -moz-animation: line-anim 2.9s ease forwards; -webkit-animation: line-anim 2.9s ease forwards; }
.logo.active path:nth-child(11) { stroke-dasharray: 609; stroke-dashoffset: 609; animation: line-anim 3s ease forwards; -moz-animation: line-anim 3s ease forwards; -webkit-animation: line-anim 3s ease forwards; }

/* Line anim */
@keyframes line-anim {
	to {
		stroke-dashoffset: 0;
	}
}

	
@-moz-keyframes line-anim {
	to {
		stroke-dashoffset: 0;
	}
}

@-webkit-keyframes line-anim {
	to {
		stroke-dashoffset: 0;
	}
}

/* Fill */
@keyframes fill	{
	from {
		fill: transparent; 
	}
	to {
		fill: #192145;
	}
}

@-moz-keyframes fill {
	from {
		fill: transparent; 
	}
	to {
		fill: #192145;
	}
}

@-webkit-keyframes fill {
	from {
		fill: transparent; 
	}
	to {
		fill: #192145;
	}
}

/* Hide fill */
@keyframes hide-fill {
	from {
		stroke-opacity: 1;
	}
	to {
		stroke-opacity: 0;
	}
}

@-moz-keyframes hide-fill {
	from {
		stroke-opacity: 1;
	}
	to {
		stroke-opacity: 0;
	}
} 

@-webkit-keyframes hide-fill {
	from {
		stroke-opacity: 1;
	}
	to {
		stroke-opacity: 0;
	}
}

/* Small logo */
@keyframes small-logo {
	from {
		transform: scale(1,1);
		-webkit-transform: scale(1,1);
		-ms-transform: scale(1,1);
	}
	to {
		transform: scale(0.5,0.5);
		-webkit-transform: scale(0.5,0.5);
		-ms-transform: scale(0.5,0.5);
	}
}

@-moz-keyframes small-logo {
	from {
		transform: scale(1,1);
		-webkit-transform: scale(1,1);
		-ms-transform: scale(1,1);
	}
	to {
		transform: scale(0.5,0.5);
		-webkit-transform: scale(0.5,0.5);
		-ms-transform: scale(0.5,0.5);
	}
} 

@-webkit-keyframes small-logo {
	from {
		transform: scale(1,1);
		-webkit-transform: scale(1,1);
		-ms-transform: scale(1,1);
	}
	to {
		transform: scale(0.5,0.5);
		-webkit-transform: scale(0.5,0.5);
		-ms-transform: scale(0.5,0.5);
	}
}


/*
-------------
	LINES
-------------
*/
#lines { width: 1px; height: 100vh; left: 50%; top: 0; position: absolute; z-index: 9; }
#lines .line { width: 1px; height: 0; left: 0; background: #192145; position: absolute; }
#lines .line.line_top { top: 0; }
#lines .line.line_bottom { bottom: 0; }
#lines .line.line_top.active, 
#lines .line.line_bottom.active { animation: full-line-height 1s ease forwards 3s; -moz-animation: full-line-height 1s ease forwards 3s; -webkit-animation: full-line-height 1s ease forwards 3s; } 

/* Hide effect */
#lines.hide { opacity: 0; } 

/* Full height */
@keyframes full-line-height {
	from {
		height: 0;
	}
	to {
		height: calc(50% - 100px);
	}
}

@-moz-keyframes full-line-height {
	from {
		height: 0;
	}
	to {
		height: calc(50% - 100px);
	}
} 

@-webkit-keyframes full-line-height {
	from {
		height: 0;
	}
	to {
		height: calc(50% - 100px);
	}
}


/* 
-----------------
	BACKGROUND
------------------
*/
#bgr { width: 100%; height: 100vh; left: 0; top: 0; background: url(images/bgr.jpg) no-repeat center; background-size: cover; position: absolute; z-index: 1; opacity: 0; }
#bgr.active { animation: show-bgr 1s ease forwards 3s; -moz-animation: show-bgr 2s ease forwards 3s; -webkit-animation: show-bgr 2s ease forwards 3s; } 


/*
-------------
	BOXES
-------------
*/
#bgr .boxes { width: 100%; height: 100%; font-size: 0; } 
#bgr .boxes .box { width: 50%; height: 100%; vertical-align: top; display: inline-block; position: relative; } 
#bgr .boxes .box a { width: 250px; margin: auto; color: #192145; display: block; position: relative; z-index: 2; } 
#bgr .boxes .box a .icon { width: 250px; height: 250px; margin-bottom: 30px; border: 2px solid #d82c41; } 
#bgr .boxes .box a .icon img { width: auto; height: 150px; margin: auto; display: block; } 
#bgr .boxes .box a h3 { font-size: 30px; line-height: 1; } 
#bgr .boxes .box a .logo { width: 160px; height: auto; left: 50%; bottom: -80px; position: absolute; opacity: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
#bgr .boxes .box a:hover .logo { opacity: 1; }

#bgr .boxes .box:before { width: 100%; height: 100%; left: -110%; top: 0; background: rgba(0,0,0,0.8); position: absolute; content: ''; z-index: 3; -moz-box-shadow: 0 0 20px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.7); box-shadow: 0 0 20px rgba(0,0,0,0.7); } 
#bgr .boxes .box.box_right:before { left: auto; right: -110%; } 
#bgr .boxes .box.box_left.open_cover:before { left: 0; } 
#bgr .boxes .box.box_right.open_cover:before { right: 0; } 

/* Show bgr */
@keyframes show-bgr {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@-moz-keyframes show-bgr {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
} 

@-webkit-keyframes show-bgr {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}



/*
-------------------
	RWD DESIGN
-------------------
*/
@media only screen and (max-width: 1200px) { 

	/* BOXES */
	#bgr .boxes .box a { width: 200px; } 
	#bgr .boxes .box a .icon { width: 200px; height: 200px; } 
	#bgr .boxes .box a .icon img { height: 80px; } 
	#bgr .boxes .box a h3 { font-size: 26px; } 
}

@media only screen and (max-width: 960px) { 

	/* DISPLAY: None */
	.hide_in_960 { display: none !important; }

	/* MAIN LOGO */
	#main_logo { width: 280px; height: 100px; }
	
	/* BOXES */
	#bgr .boxes .box a { width: 150px; } 
	#bgr .boxes .box a .icon { width: 150px; height: 150px; margin-bottom: 10px; } 
	#bgr .boxes .box a .icon img { height: 80px; } 
	#bgr .boxes .box a h3 { font-size: 22px; } 
}

@media only screen and (max-width: 960px) and (orientation: portrait) { 
	
	/* LINES */
	#lines { width: 100%; height: 1px; left: 0; top: 50%; }
	#lines .line { width: 0; height: 1px; top: 0; }
	#lines .line.line_top { left: 0; }
	#lines .line.line_bottom { left: auto; right: 0; }

	/* Hide effect */
	#lines.hide { opacity: 0; } 

	/* Full height */
	@keyframes full-line-height {
		from {
			height: 1px;
			width: 0;
		}
		to {
			height: 1px;
			width: calc(50% - 100px);
		}
	}

	@-moz-keyframes full-line-height {
		from {
			height: 1px;
			width: 0;
		}
		to {
			height: 1px;
			width: calc(50% - 100px);
		}
	} 

	@-webkit-keyframes full-line-height {
		from {
			height: 1px;
			width: 0;
		}
		to {
			height: 1px;
			width: calc(50% - 100px);
		}
	}
	
	/* BOXES */
	#bgr .boxes { height: 100vh; }
	#bgr .boxes .box { width: 100%; height: 50%; display: block; } 
	
	#bgr .boxes .box:before { display: none !important; } 
}

@media only screen and (max-width: 640px) { 

	/* BOXES */
	#bgr .boxes .box a { width: 100px; } 
	#bgr .boxes .box a .icon { width: 100px; height: 100px; } 
	#bgr .boxes .box a .icon img { height: 60px; } 
	#bgr .boxes .box a h3 { font-size: 20px; } 
}

@media only screen and (max-width: 480px) { 

	/* MAIN LOGO */
	#main_logo { width: 196px; height: 70px; }
}