/* --------------------------------------------- */
/* ~~~~~~~~~~~~~~~ CSS Document ~~~~~~~~~~~~~~~~*/
/* ------------------------------------------- */
/* ~~~~~~~~~~~~~ Coded by  Vepster ~~~~~~~~~~ */
/* ----------------------------------------- */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* --------------------------------------- */
:root {
	--vp_main_font: #fff;
	--vp_main_bg: #000;
	--vp_logo_colour: #fff;
	--vp_nav_colour: #FFF;
	--vp_nav_bg: #3b5620;
	--vp_nav_hover: #273a15;
	--vp_h1_colour: #FFF;
	--vp_item_bg: #416621;
	--vp_font_black: #fff;
	--vp_event_bg: #416621;
	--vp_base_color: #d7d7d7;
	--vp_gold: #DAA520;
	--vp_logo_box: #2B2C2C;
	--vp_btn_colour: #345617;
	--vp_btn_colour_hover: #406c1b;
	--vp_form_color: #345617;
	--vp_border_color: #496c2b;
	--vp_error_red:#AF5F5B;
	--vp_error_green:#64CE83;
	--vp-shadow: rgba(0, 0, 0, 0.35) 0px 0px 5px;
	--vp-shadow-hover: rgb(24 21 22) 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');
}


body { background-image: url(bg.svg); width: 100%; height: auto; background-repeat: no-repeat;
	background-position: center; background-size: cover; }


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_main_font); letter-spacing: 2px; opacity:80%; text-align:center; margin:12px 12px 0px 12px; }
h2 { color:var(--vp_main_font); }
.vp-item h2 { color:var(--vp_logo_colour); }
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:'arial'; margin:12px; text-align:center; font-size:1.1em; color:var(--vp_main_font); }
#vp-article article p { font-family:'arial'; font-size:1em; letter-spacing:1px; line-height:20px; }
.vp-content-box h2 { text-align:center; }

article a { width:100%; height:60px; background-color:var(--vp_btn_colour); display:flex; justify-content:center; 
	align-items:center; color:var(--vp_nav_colour); font-family:'arial'; border-radius:12px; }
article a:hover { transition:.3s; cursor:pointer; background-color:var(--vp_btn_colour_hover); }

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

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

.date { background-image: url(../img/date.svg); }
.location { background-image: url(../img/location.svg); }
.start { background-image: url(../img/start.svg); }
.ticket { background-image: url(../img/ticket.svg); }
.players { background-image: url(../img/players.svg); }

.icon-1, .icon-2 {
	width: 70px;
	height: 70px;
	background-repeat: no-repeat;
	background-position: center; 
	background-size: contain;
}
.date, .location, .start, .ticket, .players {
	width: 20px;
	height: 20px;
	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 { width: 100%; height: 100%; }
#vp-bg span { font-weight:700; color:var(--vp_main_font); }


#logo { color:var(--vp_logo_colour); font-size:1.2em; letter-spacing:2px; font-weight:700; opacity:45%; }
#nav-element { color:var(--vp_main_font); 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 { width:1000px; margin:0 auto; }
#vp-country { margin-top:46px; }
#vp-wrap a { width:450px; height:330px; background-color:var(--vp_item_bg); box-shadow: var(--vp-shadow); border-radius:12px; margin:24px 0px 0px 0px; }
#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_main_font); }
.vp-content-box article { font-family:'arial'; line-height:20px; letter-spacing:1px; font-size:1em; width:650px; }
.vp-content-box { width:1000px; margin:0 auto; color:var(--vp_main_font); }
.event-item button:hover { transition: var(--vp-shadow-trans); background-color: var(--vp_btn_colour_hover); cursor:pointer;}
#event { white-space:nowrap; }
.event-box { background-color:var(--vp_event_bg); border-top-left-radius:12px; border-top-right-radius:12px;}
.event-item { width:220px; margin:12px 15px 12px 15px; 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_main_font);
font-weight:100; letter-spacing:1px; text-align: center; font-weight: 700; height:60px; word-break:break-word; }


.event-info { width:100%; padding:12px; transition: var(--vp-shadow-trans); color:var(--vp_font_black); font-family: 'arial'; box-sizing: border-box;}
.event-info p { margin:2px; font-size:1em; color:var(--vp_font_black); }
.event-info .event-row { border-bottom:1px solid var(--vp_main_bg); margin:4px 0px; padding:4px 0px; }
.event-box img { width:220px; height:220px; border-top-left-radius:12px; border-top-right-radius:12px;}
.event-players { text-align:center; }
.event-players p{ color:var(--vp_font_black); font-size:1.2em; margin:8px; }
.event-item button { width:100%; background-color:var(--vp_btn_colour); color:#fff; height:50px; font-family:'vp_roboto_med'; font-size:1.4em;
 border-bottom-left-radius:12px; border-bottom-right-radius:12px;}


.vp-content-box form label { font-family:'vp_roboto_med'; font-size:1em; color:var(--vp_main_font); 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_main_font); 
	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.4em; font-family:'vp_roboto_med';
color:var(--vp_nav_colour); border-radius:12px; background-color:var(--vp_btn_colour); 
height:60px; border:1px solid var(--vp_border_color); }
.vp-content-box form button:hover { transition: var(--vp-shadow-trans); background-color: var(--vp_btn_colour_hover); 
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_h1_colour); }
.error-msg-no { background-color:var(--vp_error_red); }
.error-msg-yes { background-color:var(--vp_error_green); }

.vp-location { width: 180px; height: 180px; margin: 8px; border: 1px solid var(--vp_border_color); border-radius:12px;}
.vp-location .vp-loc-img { height:180px; }
.vp-location img { width: 180px; height: 180px; border-radius:12px; }

@media(max-width:1000px){
	.event-item { margin:12px auto 12px auto; }
	nav { width:100%; border-radius:0px; margin-top:0px; }
	.vp-content-box, #vp-wrap { width:100%; }
}

@media(max-width:900px){
	.event-item { width:190px; }
	.event-box img { width:190px; height:190px; }
}


@media(max-width:820px){
	.event-item { width:220px; }
	.event-box img { width:220px; height:220px; }
	#nav-element { font-size:1em; }
	#nav-element a { padding:8px 16px; }

	.vp-item p { font-size:0.9em; }
	.vp-content-box, #vp-wrap { padding:0px 16px; box-sizing:border-box; }

}
@media(max-width:730px){
	#vp-head { height:300px; transition: var(--vp-shadow-trans);}
	#vp-wrap, #vp-country { flex-wrap:wrap; }

	#vp-wrap a { width:100%; height: 280px;}
	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, .vp-content-box 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; }
}
@media(max-width:460px){
 h1 { font-size:1.5em; }
 .vp-location { margin:4px; }
 .vp-location, .vp-location .vp-loc-img, .vp-location img { width: 150px; height: 150px;}
}
@media(max-width:380px){
	.event-box img { border-radius:0px; }
	.event-box { align-items:center; }
	.event-item { width:95%; }
	#nav-element { font-size:0.8em; }
	#nav-element a { padding:8px 10px; }
	nav { padding:20px 0px; }
	#vp-wrap a { height: 320px;}
}