/* --------------------------------------------- */
/* ~~~~~~~~~~~~~~~ CSS Document ~~~~~~~~~~~~~~~~*/
/* ------------------------------------------- */
/* ~~~~~~~~~~~~~ Coded by  Vepster ~~~~~~~~~~ */
/* ----------------------------------------- */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* --------------------------------------- */
:root {

	--vp_background: #F4F5FF;
	--vp_top-navbar: #3f7bbe;
	--vp_main_font: #FFFFFF;
	--vp_nav_font: #FFFFFF;
	--vp_banner_font: #FFFFFF;
	--vp_pack_color: #fafbff;
	--vp_pack_font: #000000;
	--vp_font_black: #000000;
	--vp_error_red:#AF5F5B;
	--vp_error_green:#64CE83;
	--vp_pack_hover: #49A299;
	--vp_border_color: #cfcfcf;

	--vp_gold: #DAA520;
	--vp_logo_box: #2B2C2C;
	--vp_head_black: #030708;
	--vp-input: #3E3E3E;
	--vp-event-box: #d3d3d3;


	--vp_pack_size: 590px;



	--vp-shadow: rgba(0, 0, 0, 0.35) 0px 0px 5px;
	--vp-shadow-hover: rgb(28 28 28 / 80%) 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);}
html { scroll-behavior:smooth; }
#vp-info, #vp-alad, #vp-kontakt, #vp-airsoft {scroll-margin-top: 90px;}
@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 { background:var(--vp_background); }
main { width:100%; margin:0 auto; }
main h2 { text-align:center; padding:0px 16px; }
#vp-header { width: 100%; box-sizing:border-box; caret-color:transparent; position:fixed; 
	z-index: 5; transition:var(--vp-media-trans);}

#vp-menu { font-size:1.6em; color:var(--vp_main_font); position:sticky;
height:70px; background-color:var(--vp_top-navbar); border-bottom:1px solid #e5e5e5; }

#cover {background-image: url(../img/cover.webp);background-position: 50%;background-repeat: no-repeat;
background-size: cover;width: 100%;height: 450px;}

#vp-logo .vp-logo-1 { height:70px; width:270px; margin-left: 26px;
text-align:center; letter-spacing:4px; font-family:'vp_roboto'; font-weight:700;}

#vp-wrap-cover { transition:var(--vp-media-trans);}
#cover { width:80%; margin:0 auto; }
#cover { color:var(--vp_banner_font); caret-color:transparent; }

#vp-wrap-cover article { width:650px; font-family:'vp_roboto'; font-size:1em; line-height:25px; letter-spacing:1px; font-weight:600; }

.htx-1, .htx-2 { width:100%; transition: var(--vp-media-trans);}

#cover .cover-txt { width:940px;  transition: var(--vp-media-trans);}
#cover .cover-big { width:100%; justify-content:center; }
#cover .cover-big .htx-1 h1 { font-size:3em; box-sizing: border-box; margin: 0px; font-weight: 100; text-align: center;
padding: 6px 6px; background-color: rgb(0 0 0 / 50%); font-family: 'vp_roboto_med'; letter-spacing: 5px; order:1;
 transition:var(--vp-media-trans); width: 100%;}

#cover .cover-big .htx-2 { font-size:inherit; font-family: 'vp_roboto_med'; font-weight: 100; 
	letter-spacing:10px; margin-top: 18px; text-align: center;  transition:var(--vp-media-trans); }

#vp-menu .vp-menu-navs { letter-spacing:5px; }
#vp-menu .vp-menu-navs a { height:100%; display:flex; align-items:center; color:var(--vp_nav_font); }
#vp-menu .vp-menu-item { padding: 0px 20px; }

#vp-menu .vp-menu-navs a:hover .vp-menu-item { transition: .5s; color: var(--vp_font_black); }

.vp-content-box { width:1200px; margin:0 auto; color:var(--vp_main_font); }

.vp-content-box p { font-family:'vp_roboto'; font-size:1em; line-height:25px; letter-spacing:2px; font-weight:600; 
opacity:70%; margin:18px; box-sizing:border-box; }



.vp-content-box form {}

.vp-content-box form label { font-family:'vp_roboto_med'; font-size:1em; color:var(--vp_font_black); margin-block:6px;
padding-left:24px; box-sizing:border-box; }

.vp-content-box form textarea, .vp-content-box form input {background-color:var(--vp_pack_color); color:var(--vp_font_black); 
	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:400px; }
.vp-content-box form button { width:800px; font-size:1.8em; font-family:'vp_roboto_med';
color:var(--vp_main_font); border-radius:12px; background-color:var(--vp_top-navbar); 
height:60px; border:1px solid #e5e5e5; }
.vp-content-box form button:hover, .event-item button:hover { transition: var(--vp-shadow-trans); background-color: var(--vp_pack_hover);color:var(--vp_banner_font); 
cursor:pointer;}

#event { white-space:nowrap; }
.event-box { background-color:var(--vp-event-box); }
.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_font_black);
font-weight:100; letter-spacing:1px; text-align: center;}
.event-info { width:100%; padding:12px; transition: var(--vp-shadow-trans); color:var(--vp_font_black);}
.event-info p { margin:2px; font-size:1em; }
.event-info .event-row { border-bottom:1px solid var(--vp_head_black); }
.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_top-navbar); color:var(--vp_main_font); height:50px; font-family:'vp_roboto_med'; font-size:1.4em;
 border-bottom:1px solid #e5e5e5; }

footer { text-align:center; margin:0 auto; width:100%; padding:26px; box-sizing:border-box; }
footer span { width:600px; font-size:12px; opacity:70%; margin-top:12px; }

/* */
.vp-pack  { width:var(--vp_pack_size); margin-bottom:14px; border: 1px solid var(--vp_border_color); border-radius:12px; }
.vp-pack .vp-pack-desc { font-family:"vp_roboto"; font-weight:600; text-align:center; height:230px; width:var(--vp_pack_size); }
.vp-pack p { padding:12px; box-sizing:border-box; margin:0px; font-size:1em; }
.vp-pack .vp-pack-desc h3 { font-family:"vp_roboto_med"; font-weight:700; letter-spacing:1px; margin:0px; }
.vp-pack .vp-pack-image { width:var(--vp_pack_size); height:240px; }
.vp-pack .vp-pack-image img { border-top-left-radius: 12px; border-top-right-radius:12px; width:var(--vp_pack_size); height:240px; }
.vp-pack-desc { background-color:var(--vp_pack_color); color:var(--vp_pack_font); 
border-bottom-left-radius:12px; border-bottom-right-radius:12px;}
.vp-pack-btn:hover { cursor:pointer; transition:var(--vp-media-trans); background-color: var(--vp_pack_hover);color:var(--vp_banner_font); }
.vp-location { margin: 12px; border: 1px solid var(--vp_border_color); border-radius:12px;}
.vp-location .vp-loc-img { height:300px; }
.vp-location img { border-top-left-radius: 12px; border-top-right-radius:12px; }
.vp-location p { margin:0px; padding:12px; background-color:var(--vp_pack_color); color:var(--vp_pack_font);
border-bottom-left-radius:12px; border-bottom-right-radius:12px; width:200px; height:75px; }
.er-msg { color:var(--vp_font_black); }
.error-msg-no, .error-msg-yes { margin:0 auto; text-align:center; width:100%; margin: 14px 0px; padding:16px 0px;
color:var(--vp_font_black); }
.error-msg-no { background-color:var(--vp_error_red); }
.error-msg-yes { background-color:var(--vp_error_green); }
/* */



@media(max-width:1500px){
	#cover { width:100%; transition:var(--vp-media-trans);}
	/* */
	/* */
}
@media(max-width:1250px){
	.vp-content-box { width:1000px; transition:var(--vp-media-trans); }
	#vp-menu { font-size:1.5em; transition: var(--vp-media-trans); }
	/* */
	.vp-pack { width:450px; }
	.vp-pack .vp-pack-desc { height:260px; width:450px; }
	.vp-pack .vp-pack-image { width:450px; height:186px; }
	.vp-pack .vp-pack-image img { width:100%; height:100%; }
	/* */
}

@media(max-width:1000px){
	.event-item { width:80%; }
	#vp-logo .vp-logo-1 { height:70px; width:220px; margin-left:20px;  font-size: 1em;
		transition:var(--vp-media-trans); }
	#vp-menu { font-size:1.3em; }
	.vp-content-box { width:100%; box-sizing: border-box; padding: 0px 26px; transition: var(--vp-media-trans); }
	/* */
	/* */
}
@media(max-width:950px){
	#cover .cover-big .htx-1 h1 { font-size:2.5em; }
	/* */
	.vp-pack { width:365px; }
	.vp-pack .vp-pack-desc { height:300px; width:365px; }
	.vp-pack .vp-pack-image { width:365px; height:152px;;}
	.vp-pack p { padding:8px; }
	/* */
}
@media(max-width:900px){
	#vp-menu, #vp-logo .vp-logo-1 { font-size:1em; }
	/* */
	/* */
}
@media(max-width:820px){
	.event-item { width:100%; }
	#cover .cover-txt { width:100%; }
	#vp-logo .vp-logo-1 { width:190px; }
	#vp-menu .vp-menu-item { padding:0px 12px; transition: var(--vp-media-trans);}
	.vp-content-box { transition: var(--vp-media-trans); }
	main .vp-btn { width:600px; transition:var(--vp-media-trans); }
	.vp-content-box form button { width:600px; transition:var(--vp-media-trans); }
	#vp-wrap-cover { padding-top:0px; }
	#cover .cover-big .htx-1 h1 { padding: 20px 6px; font-size: 2em; }
	/* */
	.vp-location { margin:4px; transition:var(--vp-media-trans);}
	/* */
}
@media(max-width:790px){
	/* */
	.vp-pack { width:var(--vp_pack_size); margin-bottom: 12px; }
	.vp-pack .vp-pack-desc { height:230px; width:var(--vp_pack_size);}
	.vp-pack .vp-pack-image { width:var(--vp_pack_size); height:240px;}
	/* */
}

@media(max-width:720px){
	#vp-header #vp-menu-space { box-shadow:none; }
	#vp-menu #vp-logo { display:none;}
	#vp-menu { border-radius:0px; }
	#vp-menu .vp-menu-item, #vp-menu .vp-menu-navs { width:100%; }
	#vp-header { padding: 0px; transition:var(--vp-media-trans);}
	#cover .cover-big .htx-2, #cover .cover-big .htx-1 { margin-right:0px; }
	#cover .cover-big .htx-1 h1 { font-size:2.7em;  text-align:center; }
	/* */
	#vp-wrap-cover article { width:100%; padding:0px 26px; box-sizing:border-box; }
	.vp-content-box form button { width:100%; }
	/* */
}
@media(max-width:620px){
	main .vp-btn button, .vp-content-box form button { font-size:1.2em; }
	/* */
	.vp-pack .vp-pack-desc { margin-top:-3px; width: 100%;}
	.vp-pack { width:100%;}
	.vp-pack .vp-pack-image { width:100%; height:fit-content;}
	footer span { width:100%; padding:0px 26px; box-sizing:border-box; }
	/* */
}
@media(max-width:550px){
	#cover .cover-big .htx-1 h1 { font-size:2.5em; }
	.htx-1, .htx-3, .vp-content-box form label, .vp-content-box form input, .vp-content-box form textarea, .vp-content-box form { width:100%; }
	#vp-menu { font-size:1em; }
	#vp-menu .vp-menu-navs { letter-spacing:0px; }
	/* */
	.vp-location .vp-loc-img { height:225px; }
	.vp-location .vp-loc-img img { width:150px; height:225px; }
	.vp-location p { width:150px; font-size:0.8em; padding:6px; }
	.event-box img { width:160px; height:160px; }
	.vp-content-box { padding:0px 12px; }
	/* */
}
@media(max-width:460px){
	/* */
	#cover .cover-big .htx-1 h1 { font-size:1.7em; }
	.vp-pack .vp-pack-desc { height:310px; }
	/* */
}
@media(max-width:390px){
	/* */
	.event-box img { width:130px; height:130px; }
	/* */
}