/* --------------------------------------------- */
/* ~~~~~~~~~~~~~~~ CSS Document ~~~~~~~~~~~~~~~~*/
/* ------------------------------------------- */
/* ~~~~~~~~~~~~~ Coded by  Vepster ~~~~~~~~~~ */
/* ----------------------------------------- */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* --------------------------------------- */
:root {
	--vp_main_font: #000;
	--vp_main_bg: #000;
	--vp_logo_colour: #FFF;
	--vp_nav_colour: #FFF;
	--vp_nav_bg: #741199;
	--vp_nav_hover: #8214ab;
	--vp_h1_colour: #FFF;
	--vp_item_bg: #b777cf;
	--vp_font_black: #000;
	--vp_base_color: #fff;
	--vp_gold: #DAA520;
	--vp_logo_box: #2B2C2C;

	--vp_form_color: #741199;
	--vp_border_color: #000;
	--vp_error_red:#AF5F5B;
	--vp_error_green:#64CE83;
	--vp-shadow: rgba(0, 0, 0, 0.35) 0px 0px 5px;
	--vp-shadow-hover: rgb(191 164 201) 0px 0px 10px;
	--vp-shadow-trans: .7s ease-in-out,border-radius .7s ease-in-out;
	--vp-media-trans: .7s ease-in-out;
}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background: var(--vp_logo_box);}
::-webkit-scrollbar-thumb{background: #888;}
::-webkit-scrollbar-thumb:hover{background: var(--vp_gold);}
@font-face {
  font-family: 'vp_roboto';
  src: url('Roboto-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'vp_roboto_med';
  src: url('Roboto-Medium.ttf') format('truetype');
}

html, body, main { background-color:#4e0b66; }

html { scroll-behavior:smooth; }
main { width:100%; margin:0 auto; }
nav { display: flex; justify-content: space-between; align-items: center;
	position:fixed; width:1000px; margin-top:10px; background-color:var(--vp_nav_bg); z-index:1;
box-sizing:border-box; padding:20px 26px; border-radius:6px; }
h1 { color: var(--vp_h1_colour); letter-spacing: 2px; opacity:80%; text-align:center; margin:12px; }
h2 { color:var(--vp_base_color); }

html, body, main, nav, h1, h2, h3, h4, h5 ,h6 { font-family:'vp_roboto'; }
b, strong { font-family:'vp_roboto_med'; }
.vp-item p { font-family:'math'; margin:12px; text-align:center; font-size:1.1em; }
#vp-article article p { font-family:'arial'; font-size:1em; letter-spacing:1px; line-height:20px; }

footer { text-align:center; margin:0 auto; width:100%; padding:26px; box-sizing:border-box; color: var(--vp_base_color);}
footer span { width:600px; font-size:12px; opacity:70%; margin-top:12px; font-family:'arial'; }




#habe-hooldus, #habe-tellimus, #habe-sale, #habe-kontakt {scroll-margin-top: 130px;}

.icon-1 { background-image: url(../img/icon_1.svg); }

.icon-1 {
	width: 70px;
	height: 70px;
	background-repeat: no-repeat;
	background-position: center; 
	background-size: contain;
}
.item-icon { margin-top:12px; }

#vp-head { width:100%; height:250px; caret-color:transparent; transition: var(--vp-shadow-trans);}
#vp-bg { background-image: url(bg.svg); width: 100%; height: 100%; background-repeat: no-repeat;
	background-position: center; background-size: cover; }


#logo { color:var(--vp_logo_colour); font-size:1.2em; letter-spacing:2px; }
#nav-element { color:var(--vp_nav_colour); font-size:1.2em; font-weight:700; }
#nav-element a { padding:12px 20px; border-radius:6px; }
#nav-element a:hover { background-color:var(--vp_nav_hover); transition:var(--vp-media-trans); }

#vp-wrap { margin-top:-36px; }
#vp-country { margin-top:46px; }
#vp-wrap a { width:500px; height:300px; background-color:var(--vp_item_bg); box-shadow: var(--vp-shadow); border-radius:12px; margin:0px 8px; }
#vp-wrap a:hover, #vp-country a:hover { box-shadow:var(--vp-shadow-hover); transition:var(--vp-shadow-trans); }
.vp-item h2 { margin:12px 8px; text-align:center; }

#vp-country h3 { margin:0px; }
#vp-country a { width:500px; height:60px; background-color:var(--vp_item_bg); box-shadow: var(--vp-shadow); border-radius:12px; margin:0px 8px;
display:flex; justify-content:center; align-items:center; font-size:1.4em; color:var(--vp_base_color); }

#vp-article article { width:650px; color:var(--vp_base_color); }

.vp-content-box { width:1000px; margin:0 auto; }
.event-item button:hover { transition: var(--vp-shadow-trans); background-color: var(--vp_nav_bg); cursor:pointer;}
#event { white-space:nowrap; }
.event-box { background-color:var(--vp_item_bg); }
.event-item { width:45%; margin-top:12px; transition: var(--vp-shadow-trans);}
.event-item h3 { background-color: var(--vp_main_black); margin:0px; padding:8px; font-size:1.2em; color:var(--vp_base_color);
font-weight:100; letter-spacing:1px; text-align: center; font-weight: 700; }
.event-info { width:100%; padding:12px; transition: var(--vp-shadow-trans); color:var(--vp_font_black); font-family: 'arial'; }
.event-info p { margin:2px; font-size:1em; }
.event-info .event-row { border-bottom:1px solid var(--vp_main_bg); }
.event-box img { width:220px; height:220px; }
.event-players { text-align:center; }
.event-players p:last-child { color:var(--vp_font_black); font-size:1.2em; }
.event-item button { width:100%; background-color:var(--vp_nav_hover); color:#fff; height:50px; font-family:'vp_roboto_med'; font-size:1.4em;
 }



.vp-content-box form label { font-family:'vp_roboto_med'; font-size:1em; color:var(--vp_base_color); margin-block:6px;
padding-left:24px; box-sizing:border-box; }
.vp-content-box form textarea, .vp-content-box form input {background-color:var(--vp_form_color); color:var(--vp_base_color); 
	border: 1px solid var(--vp_border_color); outline:none; 
margin-bottom: 18px; border-radius:6px; height: 46px; box-sizing: border-box; padding: 8px 24px; 
font-family:'vp_roboto'; font-weight:600; letter-spacing:2px; }
.vp-content-box form input { font-size: 1em;}
.vp-content-box form textarea { resize:none;  font-size: 16px; height:150px; }
.vp-content-box form label, .vp-content-box form input, .vp-content-box form textarea { width:500px; }
.vp-content-box form button { width:500px; font-size:1.8em; font-family:'vp_roboto_med';
color:var(--vp_main_font); border-radius:12px; background-color:var(--vp_nav_bg); 
height:60px; border:1px solid #8600b9; }
.vp-content-box form button:hover { transition: var(--vp-shadow-trans); background-color: var(--vp_nav_hover);color:var(--vp_base_color); 
cursor:pointer;}


.er-msg { color:var(--vp_logo_colour); }
.error-msg-no, .error-msg-yes { margin:0 auto; text-align:center; width:100%; margin: 14px 0px; padding:16px 0px;
color:var(--vp_logo_colour); }
.error-msg-no { background-color:var(--vp_error_red); }
.error-msg-yes { background-color:var(--vp_error_green); }


@media(max-width:1000px){
	.event-item { width:80%; }

	nav { width:100%; border-radius:0px; margin-top:0px; }
	.vp-content-box { width:100%; }
}
@media(max-width:820px){
	.event-item { width:100%; }
	#nav-element { font-size:1em; }
	#nav-element a { padding:8px 16px; }

	.vp-item p { font-size:0.9em; }
	.vp-content-box { padding:0px 16px; box-sizing:border-box; }
	form { padding-top:36px; }
	form button { margin-bottom:36px; }
}
@media(max-width:730px){
	#vp-head { height:300px; transition: var(--vp-shadow-trans);}
	#vp-wrap, #vp-country { flex-wrap:wrap; }
	#vp-wrap a:not(:last-child), #vp-country a:not(:last-child) { margin-bottom:46px; } 
	#vp-wrap a { width:100%; height: 260px;}
	nav { flex-direction:column; justify-content:center; }
	#logo { margin-bottom:8px; }
	footer span, #vp-country a, form, .vp-content-box form label, .vp-content-box form input, .vp-content-box form textarea, .vp-content-box form button { width:100%; transition: var(--vp-shadow-trans);}
	#vp-article article { width:100%; box-sizing:border-box; padding:0px 16px; }
}
@media(max-width:560px){
	#nav-element { font-size:0.8em; display:flex; text-align:center;}
	#nav-element a { padding:8px 10px; }
	nav { padding:20px 0px; }
	.event-box img { width:150px; height:150px; }
}
@media(max-width:460px){
 h1 { font-size:1.5em; }
}
@media(max-width:380px){
	#nav-element { font-size:0.8em; }
	#nav-element a { padding:8px 10px; }
	nav { padding:20px 0px; }
	.event-box img { width:130px; height:130px; }
}