/* --------------------------------------------- */
/* ~~~~~~~~~~~~~~~ CSS Document ~~~~~~~~~~~~~~~~*/
/* ------------------------------------------- */
/* ~~~~~~~~~~~~~ Coded by  Vepster ~~~~~~~~~~ */
/* ----------------------------------------- */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* --------------------------------------- */
:root {
	--vp_main_font: #000;
	--vp_main_bg: #000;
	--vp_logo_colour: #000;
	--vp_nav_colour: #FFF;
	--vp_nav_bg: #FCAF3C;
	--vp_nav_hover: #d98e1d;
	--vp_h1_colour: #FFF;
	--vp_item_bg: #8d4408;
	--vp_font_black: #000;
	--vp_event_bg: #8d4408;
	--vp_base_color: #d7d7d7;
	--vp_gold: #DAA520;
	--vp_logo_box: #2B2C2C;
	--vp_btn_colour: #66350d;
	--vp_btn_colour_hover: #c3691f;
	--vp_form_color: #601a26;
	--vp_border_color: #a7233a;
	--vp_error_red:#AF5F5B;
	--vp_error_green:#64CE83;
	--vp-shadow: rgba(0, 0, 0, 0.35) 0px 0px 5px;
	--vp-shadow-hover: rgb(98 63 35) 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:#ad5207; }

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; }
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; }

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'; }

#vp-margariin { margin-top:-100px; }


#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:300px; 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_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 { margin-top:36px; }
#vp-country { margin-top:46px; }
#vp-wrap a { width:500px; height:330px; 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_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); }
.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_main_font);
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_btn_colour); color:#fff; height:50px; font-family:'vp_roboto_med'; font-size:1.4em;
 }





@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; }

}
@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: 280px;}
	nav { flex-direction:column; justify-content:center; }
	#logo { margin-bottom:8px; }
	footer span, #vp-country a { 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; }
	.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; }
	#vp-wrap a { height: 320px;}
}