:root {
  --main-bg-color: #edf3f7;
  --live-bg-color: lightgray;
  --OLDtop-bg-color: #66ccff;
  --top-bg-color: #003399;
  --link-color: black;
  --link-visited-color: black;
  --link-active-color: #ff0066;
  --logoname-bg-color: #003399;

}
body{
width:100%;
height:100%;
padding: 0px;
margin: 0px;
font-family: 'centurygothic', 'helvetica', sans-serif;
/*font-size: 12px;
/*font: 12px verdana, tahoma, arial, helvetica, sans-serif; edf3f7 = gray*/
text-align: center; 
background: var(--main-bg-color);
/*background-image: linear-gradient(90deg, white, var(--top-bg-color));
background-attachment: fixed;*/
  /*animation-name: chngyell;
  background-image: linear-gradient(90deg, #ffff99, var(--top-bg-color));
  animation-duration: 1s;
  animation-iteration-count: infinite;*/
}
a:link{color: var(--link-color); text-decoration: none;}
a:visited{color: var(--link-visited-color); text-decoration: none;}
a:active,a:hover{color: var(--link-active-color);text-decoration: none;}
a.awhite:link,a.awhite:visited,a.awhite:active,a.awhite:hover{
color: white;
text-decoration: none;}
.fullscreen {
	display: inline;
}
.logonameback0 {
    max-width: 1035px;
    margin: 0px auto;
	opacity: 1;
	width:100%;	
	height: 16px;
	margin-top: 5px;
	background-image: url("/img/ano.jpg");
	background-size: auto 16px;
	background-repeat: repeat-x;	
}
.logonameback1 {
    max-width: 1035px;
    margin: 0px auto;
	position: relative;
	opacity: 1;
	width:100%;	
}
.logonameback1x {
    max-width: 1035px;
    margin: 0px auto;
	position: absolute;
	top: 0px;
	left: 0px;	
	opacity: 1;
	width:100%;	
}
.logonameback2 {
    max-width: 1035px;
    margin: 0px auto;
	position: absolute;
	top: 0px;
	left: 0px;
    opacity:.50;
} 
.logonameback3 {
    max-width: 1035px;
    margin: 0px auto;
    background: var(--logoname-bg-color);
	color: white;
	padding: 5 0;
}
.logonameback3mobile {
	display: none;
    background: var(--logoname-bg-color);
	color: white;
	padding: 5;
}
.bannerlive {
    max-width: 1035px;
    margin: 15px auto;
	background: var(--live-bg-color);
	display: grid;
	grid-template-columns: 15% 85%;
    grid-template-areas: "livelogo livedata"
}
.livelogo {
    grid-area: livelogo;
    padding: 10px 20px;
    text-align: center;
}        
.livedata {
    grid-area: livedata;
    padding: 10px 10px 0px 10px;
    font-size: 110%;
	text-align: left;
    color: white;
    font-weight:normal;
	line-height: 1.5;
} 
/*futureall-(calendar)*/
.all {
    max-width: 1035px;
    margin: 0px auto;
    display: grid;
	grid-template-columns: 12% 88%;
    grid-template-areas: "alldate allbutton"
}   
.allbutton {
    background: white;
    grid-area: allbutton;
    padding: 0px;
	text-align: left;
	border-bottom: 2px solid var(--top-bg-color);
}       
.allinner1 {
    background: white;
    margin: 0px auto;
    display: grid;
	grid-template-columns: 8% 70% 22%;
    grid-template-areas: "alllogo allname allname"
                         "alllogo allplace allicons";
    grid-template-rows: repeat(3, auto);
} 
.allinner2 {
    width: 100%;
    background: white;
    margin: 0px auto;
    display: grid;
	grid-template-columns: 8% 70% 22%;
    grid-template-areas: "alllogo allname allname"
                         "alllogo allplace allicons";
    grid-template-rows: repeat(3, auto);
}   
.allinnerADMIN {
    width: 100%;
    background: gray;
    margin: 0px auto;
    display: grid;
	grid-template-columns: 8% 70% 22%;
    grid-template-areas: "alllogo allname allname"
                         "alllogo allplace allicons";
    grid-template-rows: repeat(3, auto);
}  
.alllogo {
    grid-area: alllogo;
    padding: 5px 0px 0px 0px;
    text-align: center;
    font-size: 11px;
}        
.allname {
    grid-area: allname;
    padding: 5px 5px;
    font-size: 110%;
	text-decoration: none;
	font-weight: bold;
	text-align: left;
    color: #336666;
    font-weight:bold;
}        
.allplace {
    grid-area: allplace;
    padding: 2px 5px 10px 5px;
	text-align: left;
    font-size: 80%;
	font-weight:normal;
}     
.allicons {
    grid-area: allicons;
    padding: 2px 5px 10px 5px;
	text-align: right;
}     
.alldate {
    background: white;
    grid-area: alldate;       
    padding: 10px 0px;
    text-align: center;
	vertical-align: middle;
    font-size: 30px;
    color: var(--top-bg-color);
	border-top: 2px solid white;
    border-bottom: 2px solid var(--top-bg-color);
	border-top-left-radius: 18px;
}        
/*future*/
.future {
    max-width: 1035px;
    margin: 0px auto;
    display: grid;
	grid-template-columns: 12% 12% 19% 19% 19% 19%;
    grid-template-areas: "fdate flogo fname fname fname fname"
                         "fdate flogo fplace fplace flinks flinks"
                         "fdate flogo fbutton fstat fstat fstat";
    grid-template-rows: repeat(3, auto);
}
.fdate {
    background: var(--top-bg-color);
    grid-area: fdate;       
    padding: 10px 0px;
    text-align: center;
	vertical-align: middle;
    font-size: 30px;
    color: white;
    border-bottom: 4px solid white;
}        
.flogo {
    background: white;
    grid-area: flogo;
    padding: 27px 0px 0px 0px;
    text-align: center;
    font-size: 11px;
    border-bottom: 4px solid var(--top-bg-color);
}        
.fname {
    background: white;
	border-top-right-radius: 18px;
    grid-area: fname;
    padding: 15px 5px;
    font-size: 110%;
	text-align: left;
    color: #336666;
    font-weight:bold;
}        
.fplace {
    background: white;
    grid-area: fplace;
    padding: 5px;
	text-align: left;
    font-size: 80%;
}        
.fbutton {
    background: white;
    grid-area: fbutton;
    padding: 5px;
    font-size: 130%;
	text-align: left;
    color: #336666;
    font-weight:bold;    
	border-bottom: 4px solid var(--top-bg-color);
}        
.flinks {
    background: white;
    grid-area: flinks;
    text-align: right;
    font-size: 20px;
    padding: 5 10 5 5;
}
.fstat {
    background: white;
    grid-area: fstat;
    padding: 10 15 10 10;
    font-size: 80%;	
	text-align: right;
    border-bottom: 4px solid var(--top-bg-color);
}
/*results*/
.resultss {
    max-width: 1035px;
    margin: 5px auto;
    display: grid;
	grid-template-columns: 12% 40%  40% 8%;
    grid-template-areas: "reslogo resplace resplace resplace"
                         "reslogo resname resname resname"
                         "reslogo resreso reslink reslink";
	grid-template-rows: repeat(3, auto);					 
} 
.reslogo {
    grid-area: reslogo;
    padding: 10px 5px 10px 5px;
    text-align: center;
	background:white;
	border-top-left-radius: 18px;
}        
.resname {
    grid-area: resname;
    font-size: 110%;
	text-align: left;
    color: black;
	background: white;
    font-weight:bold;
    padding: 5px;
}        
.resplace {
    grid-area: resplace;
    font-size: 90%;
	text-align: left;
    padding: 5px;
	background: white;
}              
.reslink {
    grid-area: reslink;
    text-align: right;
    padding: 0px 8px 8px 0px;
	background:white;
	border-bottom-right-radius: 18px;
}
.resreso {
    grid-area: resreso;
	text-align: left;
    padding: 5px;
    background: white;
}
/*personal-page*/
.lgrid {
	width: 100%;
	margin: 0 auto;
    max-width: 1035px;
    margin: 0px auto;
    display: grid;
    grid-template-columns: 25% 40% 35%;
    grid-template-areas: "lname lname lname"
						 "lphoto lmaininfo lextrainfo"
						 "lentry lentry lentry"
						 "lres lres lres";	
    grid-template-rows: repeat(4, auto);						 
}
.lname {
     padding: 15px 5px;
    font-size: 180%;
	text-align: center;
    color: var(--logoname-bg-color);
    font-weight:bold;       
	grid-area: lname;
}
.lphoto {
	text-align: center;
	margin:5pt;
	padding:0pt;
	grid-area: lphoto;
}
.lphotoin {
	text-align: center;
	clear:both;
	margin: 0 0 -30 0;
	display: inline-block;
	padding: 0;
}
.lmaininfo {
	margin:5pt;
	padding:0pt;
	align: center;
	grid-area: lmaininfo;
}
.lextrainfo {
	margin:5pt;
	padding:0pt;
    align: center;
	grid-area: lextrainfo;	
}
.lentry {
	margin:5pt;
	padding:0pt;
    align: center;
	grid-area: lentry;	
}
.lres {
	margin:5pt;
	padding:0pt;
    align: center;
	grid-area: lres;	
}
.about {
	width: 100%;
    display: grid;
    grid-template-columns: 35% 65%;
    grid-template-areas: "about1 about2";
}
.aboutqual {
	width: 100%;
    display: grid;
    grid-template-columns: 85% 15%;
    grid-template-areas: "about1 about2";
}
.about1 {
    grid-area: about1;
    text-align: right;
	margin-bottom: 5px;
}
.about2 {
    grid-area: about2;
    text-align: left;
	font-weight: bold;
	margin-bottom: 5px;
}
#editmobilelink {
	display: none;
}
/*START:start-list*/
.start-top {
    max-width: 1035px;
	min-width: 900px;
    margin: 0px auto;
    display: grid;
    grid-template-columns: 10% 10% 10% 25% 40% 5%;
    grid-template-areas: "st dist group name region pay";
    background:#999999;
}
.start1 {
    max-width: 1035px;
    margin: 0px auto;
    display: grid;
    grid-template-columns: 10% 10% 10% 25% 40% 5%;
    grid-template-areas: "st dist group name region pay"
						 "mmm mmm mmm mmm mmm mmm";
	grid-template-rows: repeat(2, auto);					 
	background:white;
}
.start2 {
    max-width: 1035px;
    margin: 0px auto;
    display: grid;
    grid-template-columns: 10% 10% 10% 25% 40% 5%;
    grid-template-areas: "st dist group name region pay"
						 "mmm mmm mmm mmm mmm mmm";
	grid-template-rows: repeat(2, auto);					 
    background: var(--main-bg-color);
}
.st {
    grid-area: st;
    text-align: center;
    padding: 5px;
    font-size: 12px;
    color: black;
    font-weight: bold;
}        
.dist {
    grid-area: dist;
    text-align: center;
    padding: 5px;
    font-size: 12px;
    color: black;
}
.group {
    grid-area: group;
    text-align: center;
    padding: 5px;
    font-size: 12px;
    color: black;
}    
.name {
    text-align: left;
    padding: 5px;
    font-size: 12px;
    color: black;  
}  
.year {
    grid-area: year;
    text-align: center;
    padding: 5px;
    font-size: 12px;
    color: black; 
} 
.region {
    grid-area: region;
    text-align: left;
    padding: 5px;
    font-size: 12px;
    color: black;
}
.pay {
	grid-area: pay;
    text-align: right;
    padding: 5 10 10 0;
    font-size: 12px;
    color: black;    
}
/*START:result-list*/
.results-top {
    max-width: 1035px;
    margin: 0px auto;
    display: grid;
    grid-template-columns: 5% 5% 25% 25% 12% 7% 7% 14%;
    grid-template-areas: "rank rbib rname rteam rres rank_g rank_a rpace";
    background:#999999;
}
.results1 {
    max-width: 1035px;
    margin: 0px auto;
    display: grid;
    grid-template-columns: 5% 5% 25% 25% 12% 7% 7% 14%;
    grid-template-areas: "rank rbib rname rteam rres rank_g rank_a rpace"
						 "mmm mmm mmm mmm mmm mmm mmm mmm";
	grid-template-rows: repeat(2, auto);					 
    background: white;
}
.results2 {
    max-width: 1035px;
    margin: 0px auto;
    display: grid;
    grid-template-columns: 5% 5% 25% 25% 12% 7% 7% 14%;
    grid-template-areas: "rank rbib rname rteam rres rank_g rank_a rpace"
						 "mmm mmm mmm mmm mmm mmm mmm mmm";
	grid-template-rows: repeat(2, auto);					 
    background: var(--main-bg-color);
}
.rank {
	grid-area: rank;
    text-align: center;
    padding: 5px;
    font-size: 12px;
    color: black;  
    font-weight: bold;
}  
.rbib {
	grid-area: rbib;
    text-align: center;
    padding: 5px;
    font-size: 12px;
    color: black;  
}  
.rname {
	grid-area: rname;
    text-align: left;
    padding: 5px;
    font-size: 12px;
    color: black;  
}  
.rteam {
	grid-area: rteam;
    text-align: left;
    padding: 5px;
    font-size: 12px;
    color: black;  
}  
.rres {
	grid-area: rres;
    text-align: left;
    padding: 5px;
    font-size: 12px;
    color: black;  
    font-weight: bold;
} 
.rank_g {
	grid-area: rank_g;
    text-align: center;
    padding: 5px;
    font-size: 12px;
    color: black;  
} 
.rank_a {
	grid-area: rank_a;
    text-align: center;
    padding: 5px;
    font-size: 12px;
    color: black;  
} 
.rpace {
	grid-area: rpace;
    text-align: left;
    padding: 5px;
    font-size: 12px;
    color: black;  
} 
.mmm {
	grid-area: mmm;
    text-align: center;
    padding: 5px;
    font-size: 12px;
    color: black;  
    background:lightgray;
}
/*START:infoblocks*/       
.fitinfoblock {
	width: 100%;
	text-align: center;
	clear:both;
	margin: 0 auto;
	border: 0px solid red;
    max-width: 1035px;
	min-width: 900 px;
	margin: 0px auto;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-areas: "block11 block22 block33 block44"
}
.block11 {
	margin:5pt;
	padding:0pt;
	border:2px solid var(--top-bg-color);
	border-radius:10pt;
	width:95%;
	height:200px;
	background: white;
    color: black;
	display:inline-block;
	vertical-align: middle;
	overflow: hidden;
}
.block22 {
	margin:5pt;
	padding:0pt;
	border:2px solid var(--top-bg-color);
	border-radius:10pt;
	width:95%;
	height:200px;
	background: white;
    color: black;
	display:inline-block;
	vertical-align: middle;
	overflow: hidden;
	
}
.block33 {
	margin:5pt;
	padding:0pt;
	border:2px solid var(--top-bg-color);
	border-radius:10pt;
	width:95%;
	height:200px;
	background: white;
    color: black;
	display:inline-block;
	vertical-align: middle;
	overflow: hidden;

}
.block44 {
	margin:5pt;
	padding:0pt;
	border:2px solid var(--top-bg-color);
	border-radius:10pt;
	width:95%;
	height:200px;
	background: white;
    color: black;
	display:inline-block;
	vertical-align: middle;
	overflow: hidden;
} 
/*START:logo&name*/
.logoname {
    max-width: 1035px;
    margin: 10 0 0 0;
	padding: 10;
    display: grid;
	opacity: 1;
    /*grid-template-columns: 20% 80%;*/
    grid-template-areas: "startlogo startname";
}
.startlogo {
     padding: 10 10 0 10;
	text-align: right;
	grid-area: startlogo;
}
.startname {
    padding: 10 10 5 10;
	text-align: left;
    color: var(--top-bg-color);
	grid-area: startname;
}
/*   */
.pp {
	position: relative;
	top: -5px;
	right: 5px;
    color: var(--top-bg-color); /*   */
	font-weight: bold;
	text-align: right;
}
.pp a{
	text-decoration: none;
}
.pp a:link {
	color: var(--logoname-bg-color);
}
.pp a:visited {
	color: var(--logoname-bg-color);
}
.pp a:active {
	color: var(--logoname-bg-color);
}
.pp a:hover {
	color: var(--logoname-bg-color);
}
input[id="btn-menu"] {
    display: none;
}
nav{ 
    color: #ffffff;
    text-align: center;
	display:inline-block;
	vertical-align: bottom;
    line-height: 1.5;
	margin: -5;
}
nav ul{
    margin: 0;
    padding: 0;
}
nav li{
    display: inline-block;
    vertical-align: top;
    list-style-type: none;
   font-size: 14px; /*    . */
   margin: 0px;
}
nav a{
    padding: 0px 10px;
    text-decoration: none;
    color: black; /*     . */
	background-color: white;
	border-radius: 9px 0px 9px 0px;
	font-weight: bold;
}
nav label {    
    display: none;
    cursor: pointer;
    transition: 0.3s;
}
nav li a:hover {
   background: white; /*     . */
   color: black;  /*     . */
   text-decoration: underline;
}   
navstart{ 
    text-align: center;
	display:inline-block;
	vertical-align: bottom;
    line-height: 1.5;
}
navstart ul{
    margin: 0;
    padding: 0;
}
navstart li{
    display: inline-block;
    vertical-align: top;
    list-style-type: none;
   font-size: 14px; /*    . */
   margin: 5px 3px;
}
navstart a{
    padding: 5px 10px;
    text-decoration: none;
	background-color: white;
	border-radius: 0px 0px 0px 0px;
	font-weight: bold;
}
navstart label {    
    display: none;
    cursor: pointer;
    transition: 0.3s;
}
navstart li a:hover {
   text-decoration: underline;
}  
/*===========================================================================================*/ 
@media screen and (max-width: 900px) {
.logonameback3 {
	display: none;
}
.logonameback3mobile {
	display: block;
    background: var(--logoname-bg-color);
	color: white;
	padding: 5;
}	
    nav label{
         display: inline-block;
    }
    nav > ul {
        display: none;
    }
    input[id="btn-menu"]:checked + label + ul{
        display: block; 
		margin-left:-12px;
		width: 100%;
		padding: 0px 0px;
        word-spacing: 1000px;
    }
    input[id="btn-menu"]:checked + label + ul li{
        display: block; 
		background-color: white;
		border: 0px solid var(--top-bg-color);
		width: 100%;
		padding: 4px 0px;
    }
	#logotime {
		display: none;
	}
.fullscreen {
	display: none;
}	
/*START:logo&name*/
.logoname {
    max-width: 1035px;
    margin: 5px;
	padding: 5px;
    display: grid;
     grid-template-areas: "startlogo"
						  "startname";
    grid-template-rows: repeat(2, auto);
}
.startlogo {
     padding: 5px 10px;
	text-align: center;
	grid-area: startlogo;
}
.startname {
    padding: 5px 10px;
	text-align: center;
    color: white;
	grid-area: startname;
}	
.bannerlive {
    max-width: 1035px;
    margin: 15px auto;
	background: var(--live-bg-color);
	display: grid;
	grid-template-columns: 25% 75%;
    grid-template-areas: "livelogo livedata"
}
.livelogo {
    grid-area: livelogo;
    padding: 10px;
    text-align: center;
}
.livedata {
    grid-area: livedata;
    padding: 10px 15px;
    font-size: 100%;
	text-align: left;
    color: white;
    font-weight:normal;
	line-height: 1.2;
} 
/*futureall*/
.all {
    max-width: 1035px;
    margin: 0px auto;
    display: grid;
	grid-template-columns: 15% 85%;
    grid-template-areas: "alldate allbutton"
}   
.allbutton {
    background: white;
    grid-area: allbutton;
    padding: 0px;
	text-align: left;
	border-bottom: 2px solid var(--top-bg-color);
}       
.allinner1 {
    background: white;
    margin: 0px auto;
    display: grid;
	grid-template-columns: 16% 84%;
    grid-template-areas: "alllogo allname"
                         "alllogo allplace";
    grid-template-rows: repeat(2, auto);
} 
.allinner2 {
    width: 100%;
    background: white;
    margin: 0px auto;
    display: grid;
	grid-template-columns: 16% 84%;
    grid-template-areas: "alllogo allname"
                         "alllogo allplace";
    grid-template-rows: repeat(2, auto);
}   
.allinnerADMIN {
    width: 100%;
    background: gray;
    margin: 0px auto;
    display: grid;
	grid-template-columns: 16% 84%;
    grid-template-areas: "alllogo allname"
                         "alllogo allplace";
    grid-template-rows: repeat(2, auto);
}   
.alllogo {
    grid-area: alllogo;
    padding: 5px 3px 0px 3px;
    text-align: center;
    font-size: 11px;
}        
.allname {
    grid-area: allname;
    padding: 5px 5px;
    font-size: 100%;
	text-align: left;
    color: #336666;
    font-weight:bold;
}        
.allplace {
    grid-area: allplace;
    padding: 2px 0px 10px 5px;
	text-align: left;
    font-size: 70%;
	font-weight:normal;
}  
.allicons {
    display: none;
}  
.alldate {
    background: white;
    grid-area: alldate;       
    padding: 10px 0px;
    text-align: center;
	vertical-align: middle;
    font-size: 30px;
    color: var(--top-bg-color);
	border-top: 2px solid white;
    border-bottom: 2px solid var(--top-bg-color);
	border-top-left-radius: 9px;
}                         
.future {
    max-width: 1035px;
    margin: 0px auto;
    display: grid;
	grid-template-columns: 18% 25% 19% 19% 19%;
    grid-template-areas: "fdate fname fname fname fname"
                         "fdate fplace fplace flinks flinks"
                         "flogo fbutton fstat fstat fstat";
    grid-template-rows: repeat(3, auto);
}	
.fdate {
    background: var(--top-bg-color);
    grid-area: fdate;       
    padding: 10px 0px;
    text-align: center;
	vertical-align: middle;
    font-size: 30px;
    color: white;
    border-bottom: 4px solid  var(--top-bg-color);
} 
.flogo {
    background: var(--top-bg-color);
    grid-area: flogo;
    padding: 0px 0px 5px 0px;
    text-align: center;
    font-size: 11px;
    border-bottom: 4px solid white;
}
.fname {
    background: white;
    grid-area: fname;
    padding: 15 5 15 15;
    font-size: 110%;
	text-align: left;
    color: #336666;
    font-weight:bold;
}        
.fplace {
    background: white;
    grid-area: fplace;
    padding: 5 5 5 15;
	text-align: left;
    font-size: 80%;
}        
.fbutton {
    background: white;
    grid-area: fbutton;
    padding: 5 5 5 15;
	text-align: left;
    border-bottom: 4px solid var(--top-bg-color);
}
.flinks {
    background: white;
    grid-area: flinks;
    text-align: right;
    font-size: 20px;
    padding: 5;
}
.fstat {
    background: white;
    grid-area: fstat;
    padding: 10 10 10 5;
	font-size: 70%;
	text-align: right;
    border-bottom: 4px solid var(--top-bg-color);
}       
.start-top {
	min-width: 0px;
    margin: 0px;
    display: grid;
    grid-template-columns: 15% 20% 65%;
    grid-template-areas: "st dist name"
                         "st group region";
    grid-template-rows: repeat(2, auto);
    background:gray;
    font-size: 10px;
}
.start1 {
    margin: 0px;
    display: grid;
    grid-template-columns: 15% 20% 65%;
    grid-template-areas: "st dist name"
                         "st group region"
						 "mmm mmm mmm";
    grid-template-rows: repeat(3, auto);
	background:white;
}
.start2 {
    margin: 0px;
    display: grid;
    grid-template-columns: 15% 20% 65%;
    grid-template-areas: "st dist name"
                         "st group region"
						 "mmm mmm mmm";
    grid-template-rows: repeat(3, auto);
    background: var(--main-bg-color);
}
.results-top {        
    margin: 0px;
    display: grid;
    grid-template-columns: 15% 10% 45% 30%;
    grid-template-areas: "rank rbib rname rres"
						 "rank_g rbib rteam rres"
                         "rank_a rbib rteam rpace";
    grid-template-rows: repeat(3, auto);
    background:gray;
}
.results1 {        
    margin: 0px;
    display: grid;
    grid-template-columns: 15% 10% 45% 30%;
    grid-template-areas: "rank rbib rname rres"
						 "rank_g rbib rteam rres"
                         "rank_a rbib rteam rpace"
						 "mmm mmm mmm mmm";
    grid-template-rows: repeat(4, auto);
    background: white;
}
.results2 {        
    margin: 0px;
    display: grid;
    grid-template-columns: 15% 10% 45% 30%;
    grid-template-areas: "rank rbib rname rres"
						 "rank_g rbib rteam rres"
                         "rank_a rbib rteam rpace"
						 "mmm mmm mmm mmm";
    grid-template-rows: repeat(4, auto);
    background: var(--main-bg-color);
}
.fitinfoblock {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-areas: "block11 block22"
						 "block33 block44";
}
.region {
    grid-area: region;
    text-align: left;
    padding: 5px;
    font-size: 10px;
    color: black;
} 
.pp {
	position: relative;
	top: -2px;
	right: 25px;
    color: white; /*   */
	font: 14px verdana, tahoma, arial, helvetica, sans-serif;
	font-weight: bold;
	text-align: right;
}
.lgrid {
	width: 100%;
	margin: 0 auto;
    max-width: 1035px;
    margin: 0px auto;
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas: "lname"
						 "lentry"
						 "lres"
						 "lphoto"
						 "lmaininfo"
						 "lextrainfo";	
    grid-template-rows: repeat(2, auto);						 
}
.lphotoin {
width: 50%;
	text-align: center;
	clear:both;
	margin: 20 0 -30 0;
	display: inline-block;
	padding: 0;
}
#editmobilelink {
	display:inline-block;
	margin-left:0px;
	margin-right:5px;
}	
}
@media screen and (max-width: 500px) {
.fitinfoblock {	
	display: grid;
	grid-template-columns: 100%;
	grid-template-areas: "block11"
						 "block22"
						 "block33" 
						 "block44";
}
}
.sportfilter {
	padding-top: 8px;
	text-align: center;
	border: 0px solid #4CAF50;
	vertical-align: top;
	display: inline-block;
	margin-left: 2px;
	margin-right: 2px;
}
.findd {
	text-align: center;
	border: 0px solid #4CAF50;
	vertical-align: top;
	display: inline-block;
	margin: 10 25 0 25;
}
.step1 {
	text-align: left;
	vertical-align: bottom;
	max-width: 700px;
	font-weight: bold;
	float: left;
	border: 0px solid #4CAF50;
	margin-bottom: 10px;
	margin-left: 5px;
	margin-right: 5px;
}
.step1center {
	text-align: left;
	vertical-align: top;
	display: inline-block;
	margin: 0 5 10 5;
}
.divleft {
	text-align: left;
	vertical-align: top;
	display: inline-block;
	margin: 5 0 5 5;
}
.divright {
	text-align: right;
	vertical-align: top;
	display: inline-block;
	margin: 5 5 5 0;
}
.overfitbox {
	width: 100%;
	text-align: center;
	clear:both;
	margin: 0 auto;
}
.fitbox {
	max-width:900px;
	text-align: center;
	clear:both;
	margin: 0 auto;
	display: inline-block;
	padding: 0 0;
}
.fitbox400 {
	text-align: center;
	clear:both;
	max-width:400px;
	margin: 0 auto;
	display: inline-block;
	padding: 0 10;
}
.step1top {
	text-align: center;
	vertical-align: bottom;
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
}
.mores {
	text-align: center;
	font-weight: bold;
	float: left;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 15px;
	margin-right: 15px;
}
.ontop {
	width: 100%;	
	margin: 0px;
	padding: 0px;
	background-color: white;
	border-bottom: 4px solid var(--logoname-bg-color);
	text-align: center;
	vertical-align: bottom;
	overflow: hidden;
}	
.ontopin {
	width: 100%;	
	margin: 0px;
	padding: 7px;
}	
.block {
	margin:5pt;
	padding:0pt;
	border:2px solid var(--top-bg-color);
	border-radius:10pt;
	width:220px;
	height:200px;
	background: white; /*   */
    color: black; /*   */
	display:inline-block;
	vertical-align: middle;
	overflow: hidden;
	
}
.infotag {
	text-align: left;
    font-size: 14px; /*    . */
	border: 0px solid var(--top-bg-color);
	border-radius: 10px 10px 0px 0px;
	padding: 3px 10px 3px 10px;
	margin: 0px;
	background: var(--top-bg-color); /*   */
    color: white; /*   */
}
.infotbl {
	text-align: left;
    font-size: 12px;
	border: 0px solid var(--top-bg-color);
	border-radius: 0px 0px 10px 10px;
	padding: 10px;
	margin: 0px;
	overflow: auto;
	height: 80%;
}
#header_gift {
	width: 100%;
	height: 100px;	
	margin: 0px;
	padding: 0px;
    background: #ffff99; /*   */
    color: #fff; /*   */
	background-image: url("img/style/gift_top.gif");
	background-repeat: repeat-x;
   }
#footer {
    position: fixed; /*   */
    left: 0; bottom: 0; /*    */
    padding: 10px; /*    */
    background: #ffff99; /*   */
    color: #fff; /*   */
    width: 100%; /*   */
   }
#mainfooter {
    position: fixed; /*   */
    left: 0; bottom: 0; /*    */
    padding: 5px; /*    */
    background: white; /*   */
	border-top: 4px solid #003399;
    color: gray; /*   */
    width: 100%; /*   */
	font-weight: normal;
  }   
input[type=checkbox] {
    transform: scale(1.5);
	margin: 5px;
}	
input[type=radio] {
    transform: scale(1.5);
	vertical-align: top;
}   
#phonecode {
color: #000000;
font: 14px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: bold;
padding: 0;
}	
.step2d {
	display: inline-block;
	margin-left: 10px;
}
.form0100 {
width: 100%;
background-color: #F5FAF4;
color: #000000;
font: 14px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: bold;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.texterror0100 {
width: 100%;
background-color: #FF6600; /*   */
color: #000000; /*   */
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.form40 {
width: 40px; 
background-color: #F5FAF4;
color: #000000;
font: 14px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: bold;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.texterror40 {
width: 40px; 
background-color: #FF6600; /*   */
color: #000000; /*   */
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.form60 {
width: 60px; 
background-color: #F5FAF4;
color: #000000;
font: 14px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: bold;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.texterror60 {
width: 60px; 
background-color: #FF6600; /*   */
color: #000000; /*   */
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.emptyform80 {
width: 80px; 
background-color: #F5FAF4;
color: gray;
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.form80 {
width: 80px; 
background-color: #F5FAF4;
color: #000000;
font: 14px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: bold;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.texterror80 {
width: 80px; 
background-color: #FF6600; /*   */
color: #000000; /*   */
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.emptyform100 {
width: 100px; 
background-color: #F5FAF4;
color: gray;
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.form100 {
width: 100px; 
background-color: #F5FAF4;
color: #000000;
font: 14px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: bold;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.texterror100 {
width: 100px; 
background-color: #FF6600; /*   */
color: #000000; /*   */
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.form120 {
width: 120px; 
background-color: #F5FAF4;
color: #000000;
font: 14px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: bold;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.texterror120 {
width: 120px; 
background-color: #FF6600; /*   */
color: #000000; /*   */
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.slim120 {
width: 120px; 
background-color: #F5FAF4;
color: #000000;
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: normal;
text-align: left;
outline: 0;
height: 25px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.form140 {
width: 140px; 
background-color: #F5FAF4;
color: #000000;
font: 14px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: bold;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.texterror140 {
width: 140px; 
background-color: #FF6600; /*   */
color: #000000; /*   */
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.form170 {
width: 170px; /*   170  */
background-color: #F5FAF4;
color: #000000;
font: 14px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: bold;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.texterror170 {
width: 170px; /*   170  */
background-color: #FF6600; /*   */
color: #000000; /*   */
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.emptyform190 {
width: 190px; 
background-color: #F5FAF4;
color: gray;
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.form190 {
width: 190px; 
background-color: #F5FAF4;
color: #000000;
font: 14px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: bold;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.texterror190 {
width: 190px; 
background-color: #FF6600; /*   */
color: #000000; /*   */
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.form240 {
width: 220px; 
background-color: #F5FAF4;
color: #000000;
font: 14px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: bold;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.texterror240 {
width: 240px; 
background-color: #FF6600; /*   */
color: #000000; /*   */
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
text-align: center;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.slim240 {
width: 240px; 
background-color: #F5FAF4;
color: #000000;
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: normal;
text-align: left;
outline: 0;
height: 25px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.form360 {
width: 100%;
max-width: 360px; 
background-color: #F5FAF4;
color: #000000;
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: normal;
text-align: left;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.form400 {
width: 400px; 
background-color: #F5FAF4;
color: #000000;
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: normal;
text-align: left;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 5;
}
.form500 {
width: 500px;
background-color: #F5FAF4;
color: #000000;
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 0;}
.texterror500 {
width: 500px;
background-color: #FF6600; /*   */
color: #000000; /*   */
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
outline: 0;
height: 33px;border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 0;}

p {display:inline;}
H1 { font-size: 200%; color: black;}
H2 { font-size: 150%; text-align: center; margin-top: 10px; margin-bottom: 5px;}
H3 { font-size: 130%; text-align: center; margin-top: -5px; margin-bottom: -5px; color: #336666;}
H4 { font-size: 130%; text-align: center; font-weight: bold; margin-top: 5px; margin-bottom: 5px; color: var(--logoname-bg-color);}
H5 { font-size: 120%; text-align: center; font-weight: bold; margin-top: 15px; margin-bottom: 10px; color: var(--logoname-bg-color);background: radial-gradient(rgba(255, 255, 255, 1),rgba(237, 243, 247, 1));border-radius:18px;}

.c{margin-bottom: 10px;}
.cn{
background-color: #d2d6bc;
padding: 2px 4px;
margin-bottom: 4px;
}
textarea {
width: 300px;	
background-color: #F5FAF4;
color: #000000;
font: 14px verdana, tahoma, arial, helvetica, sans-serif;
outline: 0;
height: 130px;
border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 0px;
padding: 10px;
}
.formname{
background-color: var(--top-bg-color);
color: white;
font: 13px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: bold;
height: 33px;
text-align: center;
border : 1px white;
outline: 0;
border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 3 0 3 0;
padding: 0 10 0 10;
cursor:pointer;
}
.formname_red{
background-color: #FF0000;
color: white;
font: 14px verdana, tahoma, arial, helvetica, sans-serif;
font-weight: bold;
height: 33px;
text-align: center;
border : 1px solid blue;
outline: 0;
height: 33px;
border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 0;
padding: 0 10 0 10;
cursor:pointer;
}
.formname2{
background-color: #cccccc;
color: #000000;
font: 10px verdana, tahoma, arial, helvetica, sans-serif;
font-color: white;
text-align: center;
border : 1px solid blue;
outline: 0;
height: 38px;
border-radius: 9px;
border: 1px solid #d7d7d7;
margin: 0;
padding: 0 5 0 5;
}
.font
{
font: 9px verdana, tahoma, arial, helvetica, sans-serif;
}
.disclaimer
{
max-width: 480px;
font: 10px verdana, tahoma, arial, helvetica, sans-serif;
font-style: italic;
text-align : justify; 
}
.alarm {
  font: 12px verdana, tahoma, arial, helvetica, sans-serif;
  color: red;
  font-style: italic;
}
.text {
  font: 12px verdana, tahoma, arial, helvetica, sans-serif;
}
.t0 { background-color : lightgrey;
 font: 10px verdana, tahoma, arial, helvetica, sans-serif;
 font-weight :bold;
 border : 0px solid blue;
 text-align : center;  }
.t1 { background-color : #FFFFFF;
      font: 12px verdana, tahoma, arial, helvetica, sans-serif;
      border: 1px solid blue;	  
    }
.t2 { background-color : #CCFFFF;
      font: 12px verdana, tahoma, arial, helvetica, sans-serif;
      border: 1px solid blue;
	}
.t3 { background-color : #FF9999;
      font: 12px verdana, tahoma, arial, helvetica, sans-serif;
      border: 1px solid blue;
	}
.t10 { background-color : #FFFFFF;
      font: 10px verdana, tahoma, arial, helvetica, sans-serif;
      border: 1px solid blue;	  
    }
.t20 { background-color : #CCFFFF;
      font: 10px verdana, tahoma, arial, helvetica, sans-serif;
      border: 1px solid blue;
	}	
td {padding: 3;
}	
td.split {padding: 0;
	font: 10px verdana, tahoma, arial, helvetica, sans-serif;
}	
.block1 { 
    width: 920px; 
	margin: auto;
   }
.block2 { 
    width: 720px; 
	margin: auto;
   }
#eachevent {
    display: none;
   }
.div_animate {
margin: 0px;
padding:1px;
height:100%;
  /*background-image: linear-gradient(0deg, #ffff99, var(--top-bg-color));*/
  background-color: blue;
  animation-name: grow0100;
  animation-duration: 2s;
  /*animation-iteration-count: infinite;*/
}

@keyframes grow0100 {
  0% {width:0%;}
  5% {width:5%;}
  10% {width:10%;}
  15% {width:15%;}
  20% {width:20%;}
  25% {width:25%;}
  30% {width:30%;}
  35% {width:35%;}
  40% {width:40%;}
  45% {width:45%;}
  50% {width:50%;}
  55% {width:55%;}  
  60% {width:60%;}
  65% {width:65%;}
  70% {width:70%;}
  75% {width:75%;}
  80% {width:80%;}
  85% {width:85%;}
  90% {width:90%;}
  95% {width:95%;}
  100% {width:100%;}
}

@keyframes chngyell {
  20% {background-image: linear-gradient(90deg, #ffffcc, var(--top-bg-color));}
  40% {background-image: linear-gradient(90deg, #ffff99, var(--top-bg-color));}
  60% {background-image: linear-gradient(90deg, #ffff66, var(--top-bg-color));}
  80% {background-image: linear-gradient(90deg, #ffff99, var(--top-bg-color));}
  100% {background-image: linear-gradient(90deg, #ffffcc, var(--top-bg-color));}
}
/*  */
.topnav2 {
   margin-left: -38px
}
.topnavigation {
   list-style: none; /*   . */
}
.topnavigation li {
   float: left; /*      . */
   margin-right: 3px; /*    ,     . */
   font-size: 14px; /*    . */
   font-weight: bold;
}
.topnavigation li a {
   display: block; /*            . */
   padding: 5px 10px;  /*  . */
   background: white; /*   . */
   color: #3f3f3f; /*     . */
   text-decoration: none; /*   . */
   position: relative; /*     Internet Explorer 6  ,        . */
}
.topnavigation li a:hover {
   background: #0066cc; /*     . */
   color: white;  /*     . */
}
/*ski.o-time*/
.backdrop {
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 20;
	margin: 10;
}

/* alert*/   
.alertm_overlay {    width:100%;    height:100%;    position:fixed;    left:0px;    top:0px;    z-index:99998;    background:rgba(51, 51, 51, 0.82);   display:none;}
.alertm_all {font-family: Arial;    width:396px;    padding:29px 43px;    border-radius: .25rem;  background:#fff;    position:fixed;    left:50%;    margin-left:-241px;    top:50%;    z-index:99999;    }
.alertm_all a {    -webkit-transition: all .2s ease-in-out;    -o-transition: all .2s ease-in-out;    transition: all .2s ease-in-out;    text-decoration: none;    color: #0275d8;}
.alertm_all a:hover {    color: #222;}
.alertm_h1 {    color: #0275d8;    font-size: 19px;    margin-bottom: 15px;}
.alertm_text {    font-size: 16px;    line-height: 23px;}
.alertm_wrapper { }
.alertm_but {    display: inline-block;    font-weight: 400;    line-height: 1.25;    text-align: center;    white-space: nowrap;    vertical-align: middle;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;    border: 0px solid transparent;    padding: .5rem 2rem;    font-size: 1rem;    border-radius: .25rem;    -webkit-transition: all .2s ease-in-out;    -o-transition: all .2s ease-in-out;    transition: all .2s ease-in-out;    color: #fff;    background-color: var(--top-bg-color);    border-color: #0275d8;    display: block;    margin-top: 25px;    cursor: pointer;}
.alertm_but:hover {    color: #fff;    background-color: #336666;    border-color: #01549b;}
a.alertm_close {    color: red;    text-decoration: none;    position: absolute;    right: 7px;    top: 0px;    font-size: 25px;}

