/*-------------------------------------------------*/
/* =  Banners
/*-------------------------------------------------*/
.tp-banner-container, 
.tp-banner, 
.tp-banner-fullscreen-container {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}

/*-------------------------------------------------*/
/* =  content
/*-------------------------------------------------*/

body {
	background: url(../../images/bg.jpg) fixed center center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	margin: 0;
	padding: 0;
}

.general-container {
	position: relative;
	width: 90%;
	margin: 2% 5%;
	padding: 0;
	border: none;	
}

h1,h2,h3,h4,h5,h6 {font-family: Roboto Condensed, sans-serif;}

p, ul, ol {
	font-family: Lato, sans-serif;
	color: #C0C0C0;
}

.Left {text-align: left;}
.Right {text-align: right;}
.Justify {text-align: justify;}
.Center {text-align: center;}


/*-------------------------------------------------*/
/* =  Header
/*-------------------------------------------------*/
.navbar-default {
	background-color: #003069;
	margin: 0;
}

.navbar-default .container {
	width: 98%;
	margin: 0 1%;
	padding: 0;
	border: none;
}

.top-branding {
	margin: 0;
	padding: 10px 0;
}

.top-branding .container {
	width: 96%;
	margin: 15px 2%;
	padding: 0;
	border: none;
}

.top-branding img {
	width: 90%;
	height: 90%;
}

/*-------------------------------------------------*/
/* =  Footer
/*-------------------------------------------------*/
footer {font-family: Open Sans, sans-serif;}

footer .container {
	width: 100%;
	margin: 0;
	padding: 15px 15px 0 15px;
	background-color: rgba(0,0,0,0.80);
}	

footer .container p,
footer .container a {
	font-size: 18px;
	line-height: 26px;
	color: #FFF;
	text-decoration: none;
}

footer .container a:hover {color: #FFF;}

/*-------------------------------------------------*/
/* =  content
/*-------------------------------------------------*/

.content-section  {
	position: relative;
	margin: 0;
	padding: 0;
}

.content-section .container {
	width: 100%;
	margin: 0;
	padding: 2% 3%;
	background-color: rgba(0,0,0,0.5);
}

.content-section h1 {
	font-size: 60px;
	line-height: 70px;
	font-weight: 700;
	color: #FFF;
	text-shadow: 2px 2px 4px #000;
	letter-spacing:0.02em;
	margin: 0;
	padding: 0;
}

.content-section h2 {
	font-size: 40px;
	line-height: 50px;
	color: #F0F0F0;
	margin: 0;
	padding: 0;
}

.content-section p,
.content-section ul,
.content-section ol {
	font-size: 24px;
	line-height: 32px;
	padding-bottom: 12px;
}

.full-size {width: 100%; height: 100%;}
.size90 {width: 90%; height: 90%;}
.size80 {width: 80%; height: 80%;}
.size70 {width: 70%; height: 70%;}
.size60 {width: 60%; height: 60%;}
.size50 {width: 50%; height: 50%;}
.size40 {width: 40%; height: 40%;}
.size30 {width: 30%; height: 30%;}
.size20 {width: 20%; height: 20%;}

.frame {
	padding: 15px;
	background-color: #FFF;
}

.mt20 {margin-top: 20px}
.mt40 {margin-top: 40px}
.mt60 {margin-top: 60px}
.mt80 {margin-top: 80px}
.mt100 {margin-top: 100px}

.mb20 {margin-bottom: 20px}
.mb40 {margin-bottom: 40px}
.mb60 {margin-bottom: 60px}
.mb80 {margin-bottom: 80px}
.mb100 {margin-bottom: 100px}

.mtb20 {margin: 20px 0}
.mtb40 {margin: 40px 0}
.mtb60 {margin: 60px 0}
.mtb80 {margin: 80px 0}
.mtb100 {margin: 100px 0}

.mlr20 {margin: 0 20px}
.mlr40 {margin: 0 40px}
.mlr60 {margin: 0 60px}
.mlr80 {margin: 0 80px}
.mlr100 {margin: 0 100px}

.m20 {margin: 20px}
.m40 {margin: 40px}
.m60 {margin: 60px}
.m80 {margin: 80px}
.m100 {margin: 100px}

.pt20 {padding-top:20px}
.pt40 {padding-top:40px}
.pt60 {padding-top:60px}
.pt80 {padding-top:80px}
.pt100 {padding-top:100px}

.pb20 {padding-bottom:20px}
.pb40 {padding-bottom:40px}
.pb60 {padding-bottom:60px}
.pb80 {padding-bottom:80px}
.pb100 {padding-bottom:100px}

.ptb20 {padding:20px 0}
.ptb40 {padding:40px 0}
.ptb60 {padding:60px 0}
.ptb80 {padding:80px 0}
.ptb100 {padding:100px 0}

.p20 {padding:20px}
.p40 {padding:40px}
.p60 {padding:60px}
.p80 {padding:80px}
.p100 {padding:100px}

.divider {
	clear: both;
	line-height: 100px;
}

.box {
	width: 98%;
	margin: 2% 1%;
	border: 1px solid rgba(250,250,250,0.2);
	background-color: rgba(0,0,0,0.5);
}

/*-------------------------------------------------*/
/* =  tables page
/*-------------------------------------------------*/
.tables-section {margin-bottom: 40px;}

.tables-section table {
	width: 100%;
	border: 1px solid rgba(0,0,0,0.2);
}

.tables-section table thead tr th {
	font-size: 16px;
	text-align: center;
	color: #FFF;
	background-color: #003069;
	padding: 8px 0;
	letter-spacing: 0.1em;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-right: 1px solid rgba(255,255,255,0.2);
	vertical-align: middle;
}

.tables-section table thead tr th span {
	font-size: 32px;
	padding: 40px 0;
	letter-spacing: 1.2em;
	text-transform: uppercase;
}

.tables-section table tbody tr.odd {background-color: rgba(255,255,255,0.8);}
.tables-section table tbody tr.even {background-color: rgba(170,208,255,0.8);}

.tables-section table tbody tr.fixture {
	text-align: center;
	vertical-align: middle;
	height: 64px;
}

.tables-section table tbody tr td {
	font-size: 20px;
	color: #000;
	padding: 10px 15px;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	border-right: 1px solid rgba(0,0,0,0.1);
}

.tables-section table tbody tr td a {color: #900;}
.tables-section table tbody tr td a:hover {color: #009;}

.tables-section table tbody tr td.team {
	font-size: 30px;
	line-height: 60px;
	color: #000;
}

.tables-section table tbody tr td.score {
	font-size: 40px;
	color: #000;
}

.tables-section table tbody tr td img.img-circle {
	/*border-radius: 50%;*/
	width: 64px;
	height: 64px;
}

.tables-section table tbody tr td img.info {
	width: 32px;
	height: 32px;
}

.tables-section table tfoot tr {
	background-color: #FFF;
	color: #292929;
	border-bottom: 4px double rgba(0,0,0,0.7);
}

.tables-section table tfoot tr td {
	font-size: 24px;
	color: #111;
	text-align: right;
	padding: 10px 15px;
	border-top: 2px solid rgba(0,0,0,0.4);
}

.tables-section table tfoot tr td.totalI {font-weight: bold;}

/*-------------------------------------------------*/
/* =  contact page
/*-------------------------------------------------*/

.form-section {
	margin: 0;
	padding: 0;
}

.form-section span.caption {
	font: 400 16px/36px Open Sans, sans-serif;
	color: #FFF;
	padding-left: 5px;
}
/*
.form-section .Form1 .HeaderLn {
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px 0;
	background-color: #292929;
}

.form-section .Form1 .ItemLnO,
.form-section .Form1 .ItemLnE {
	padding: 5px 0 0 0;
	border-bottom: 1px solid rgba(32,32,32,0.2);
	background-color: #FFF;
}

.form-section .Form1 .ItemLnE {background-color: #E0E0E0;}
*/
.form-section .Form1 img.TeamLogo {
	width: 20px;
	height: 20px;
}
/*
.form-section .Form1 .HeaderB,
.form-section .Form1 .ItemB {
	width: 100%;
	font: 18px Open Sans, sans-serif;
	color: #003069;
	padding: 2px 0;
	text-align: center;
	text-transform: uppercase;
}

.form-section .Form1 .HeaderB {color: #FFF;}
*/
.home .form-section .Form input[type="text"],
.home .form-section .Form select,
.general .form-section .Form input[type="text"],
.general .form-section .Form input[type="email"],
.general .form-section .Form input[type="password"],
.general .form-section .Form select {
/*	appearance: none; */
	width: 100%;
	font: 18px Open Sans, sans-serif;
	color: #E0E0E0;
	padding: 10px 15px;
	border: 1px solid rgba(255,255,255,0.4);
	background-color: rgba(32,32,32,0.75);
	margin-bottom: 5px;
	outline: none;
}

.home .form-section .Form input[type="text"]:focus,
.home .form-section .Form select:focus,
.general .form-section .Form input[type="text"]:focus,
.general .form-section .Form input[type="email"]:focus,
.general .form-section .Form input[type="password"]:focus,
.general .form-section .Form select:focus {
	color: #FFF;
	background-color: #000;
	border: 1px solid rgba(255,255,255,.75);
}

select option {
	transition-property: color, background;
	transition-duration: 0.5s;
	transition-timing-function: ease-out;
	&:where(:hover, :focus, :active) {
		background: #080;
		color: #008;
	}
	&:checked {
		background: #D60303;
		color: white;
	}
	&::checkmark {display: none;}
	&:first-child {border: 0;}
}

select option:focus {
	color: #080;
	background-color: #008;	
}

select .PageSel {
	width: 70px;
	font: 18px Open Sans, sans-serif;
	color: #900;
	padding: 8px;
	border: 1px solid rgba(0,0,0,0.1);
	background-color: #FFF;
}

.form-section .Form1 input[type="button"],
.form-section .Form2 input[type="submit"],
.form-section .Form input[type="button"],
button,
a.default {
	font: 18px Open Sans, sans-serif;
	color: #FFF;
	background-color: #A00;
	padding: 0 20px;
	margin: 0 5px 5px 0;
	line-height: 38px;
	outline: none;
	border: none;
	text-decoration: none;
	box-shadow: 1px 3px 10px -5px #000;
	-moz-box-shadow: 1px 3px 10px -5px #000;
	-webkit-box-shadow: 1px 3px 10px -5px #000;
}

.form-section a.default {padding: 12px 30px;}

.form-section .Form1 input[type="button"]:hover,
.form-section .Form2 input[type="submit"]:hover,
.form-section .Form2 input[type="button"]:hover,
button:hover,
a.default:hover {
	color: #FFF;
	background-color: #003069;
	text-decoration: none;
	transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
}

/*-------------------------------------------------*/
/* =  Responsive Part
/*-------------------------------------------------*/
@media (max-width: 1500px) {
}

@media (max-width: 1199px) {
}

@media (max-width: 991px) {

	body {background-image: url(../../images/bg-780.jpg);}

	.general-container {
		width: 94%;
		margin: 1% 3%;
	}	

	.Left, .Right {text-align: center;}

	.top-branding {padding: 5px 0;}
	
	.top-branding img {
		width: 100%;
		height: 100%;
	}

	footer {text-align: center;}
	
	footer .container {padding: 5px 5px 0 5px;}	

	footer .container p,
	footer .container a {
		font-size: 14px;
		line-height: 22px;
	}

	.content-section .container {
		padding: 1% 3%;
		background-color: rgba(0,0,0,0.5);
	}

	.content-section h1 {
		font-size: 28px;
		line-height: 36px;
		letter-spacing:0.01em;
		text-shadow: none;
	}

	.content-section h2 {
		font-size: 26px;
		line-height: 34px;
	}

	.content-section p,
	.content-section ul,
	.content-section ol {
		font-size: 18px;
		line-height: 26px;
		padding-bottom: 3px;
	}

	.full-size, .size90, .size80, .size70, .size60, .size50, .size40, .size30, .size20 {
		width: 98%; 
		height: 98%;
		margin: 0 1%;
	}

	.mt20, .mt40, .mt60, .mt80, .mt100 {margin-top: 2%}
	.mb20, .mb40, .mb60, .mb80, .mb100 {margin-bottom: 2%}
	.mtb20, .mtb40, .mtb60, .mtb80, .mtb100 {margin: 2% 0}
	.mlr20, .mlr40, .mlr60, .mlr80, .mlr100 {margin: 0 2%}
	.m20, .m40, .m60, .m80, .m100 {margin: 2%}

	.pt20, .pt40, .pt60, .pt80, .pt100 {padding-top:2%}
	.pb20, .pb40, .pb60, .pb80, .pb100 {padding-top:2%}
	.ptb20, .ptb40, .ptb60, .ptb80, .ptb100 {padding:2% 0}
	.p20, .p40, .p60, .p80, .p100 {padding:2%}

	.box {padding: 5px 20px 10px;}	

	.tables-section {margin-bottom: 20px;}

	.tables-section p {margin-bottom: 10px;}

	.tables-section table thead tr th {
		font-size: 14px;
		padding: 4px 0;
		letter-spacing: normal;
	}

	.tables-section table thead tr th span {
		font-size: 24px;
		padding: 12px 0;
		letter-spacing: 0.1em;
	}

	.tables-section table tbody tr td {
		font-size: 18px;
		padding: 5px;
	}

	.tables-section table tbody tr.fixture {height: 36px;}

	.tables-section table tbody tr td.team {
		font-size: 22px;
		line-height: 30px;
	}

	.tables-section table tbody tr td.score {font-size: 22px;}

	.tables-section table tbody tr td img.img-circle {
		width: 32px;
		height: 32px;
	}

	.tables-section table tbody tr td img.info {
		width: 24px;
		height: 24px;
	}

	.form-section span.caption {
		font-size: 12px;
		line-height: 24px;
		padding-left: 3px;
	}

	.home .form-section .Form input[type="text"],
	.home .form-section .Form select,
	.general .form-section .Form input[type="text"],
	.general .form-section .Form input[type="email"],
	.general .form-section .Form input[type="password"],
	.general .form-section .Form select {
		font-size: 16px;
		padding: 4px 8px;
		margin-bottom: 3px;
	}

	.form-section .Form1 input[type="button"],
	.form-section .Form2 input[type="submit"],
	.form-section .Form input[type="button"],
	button,
	a.default {
		font-size: 16px;
		line-height: 32px;
		padding: 0 10px;
		margin: 0 5px 5px 0;
	}

	.form-section a.default {padding: 12px 30px;}
	
}

@media (max-width: 767px) {

	body {background-image: url(../../images/bg-780.jpg);}

	.general-container {
		width: 94%;
		margin: 1% 3%;
	}	

	.Left, .Right {text-align: center;}

	.top-branding {padding: 5px 0;}
	
	.top-branding img {
		width: 100%;
		height: 100%;
	}

	footer {text-align: center;}
	
	footer .container {padding: 5px 5px 0 5px;}	

	footer .container p,
	footer .container a {
		font-size: 14px;
		line-height: 22px;
	}

	.content-section .container {
		padding: 1% 3%;
		background-color: rgba(0,0,0,0.5);
	}

	.content-section h1 {
		font-size: 28px;
		line-height: 36px;
		letter-spacing:0.01em;
		text-shadow: none;
	}

	.content-section h2 {
		font-size: 26px;
		line-height: 34px;
	}

	.content-section p,
	.content-section ul,
	.content-section ol {
		font-size: 18px;
		line-height: 26px;
		padding-bottom: 3px;
	}

	.full-size, .size90, .size80, .size70, .size60, .size50, .size40, .size30, .size20 {
		width: 98%; 
		height: 98%;
		margin: 0 1%;
	}

	.mt20, .mt40, .mt60, .mt80, .mt100 {margin-top: 2%}
	.mb20, .mb40, .mb60, .mb80, .mb100 {margin-bottom: 2%}
	.mtb20, .mtb40, .mtb60, .mtb80, .mtb100 {margin: 2% 0}
	.mlr20, .mlr40, .mlr60, .mlr80, .mlr100 {margin: 0 2%}
	.m20, .m40, .m60, .m80, .m100 {margin: 2%}

	.pt20, .pt40, .pt60, .pt80, .pt100 {padding-top:2%}
	.pb20, .pb40, .pb60, .pb80, .pb100 {padding-top:2%}
	.ptb20, .ptb40, .ptb60, .ptb80, .ptb100 {padding:2% 0}
	.p20, .p40, .p60, .p80, .p100 {padding:2%}

	.box {padding: 5px 20px 10px;}	

	.tables-section {margin-bottom: 20px;}

	.tables-section p {margin-bottom: 10px;}

	.tables-section table thead tr th {
		font-size: 12px;
		padding: 4px 0;
		letter-spacing: normal;
	}

	.tables-section table thead tr th span {
		font-size: 20px;
		padding: 8px 0;
		letter-spacing: 0.1em;
	}

	.tables-section table tbody tr td {
		font-size: 16px;
		padding: 4px;
	}

	.tables-section table tbody tr.fixture {height: 32px;}

	.tables-section table tbody tr td.team {
		font-size: 18px;
		line-height: 24px;
	}

	.tables-section table tbody tr td.score {font-size: 18px;}

	.tables-section table tbody tr td img.img-circle {
		width: 30px;
		height: 30px;
	}

	.tables-section table tbody tr td img.info {
		width: 20px;
		height: 20px;
	}

	.form-section span.caption {
		font-size: 12px;
		line-height: 24px;
		padding-left: 3px;
	}

	.home .form-section .Form input[type="text"],
	.home .form-section .Form select,
	.general .form-section .Form input[type="text"],
	.general .form-section .Form input[type="email"],
	.general .form-section .Form input[type="password"],
	.general .form-section .Form select {
		font-size: 16px;
		padding: 4px 8px;
		margin-bottom: 3px;
	}

	.form-section .Form1 input[type="button"],
	.form-section .Form2 input[type="submit"],
	.form-section .Form input[type="button"],
	button,
	a.default {
		font-size: 16px;
		line-height: 32px;
		padding: 0 10px;
		margin: 0 5px 5px 0;
	}

	.form-section a.default {padding: 12px 30px;}
	
}

@media (max-width: 500px) {

	body {background-image: url(../../images/bg-500.jpg);}

	.general-container {
		width: 94%;
		margin: 1% 3%;
	}	

	.Left, .Right {text-align: center;}

	.top-branding {padding: 5px 0;}
	
	.top-branding img {
		width: 100%;
		height: 100%;
	}

	footer {text-align: center;}
	
	footer .container {padding: 5px 5px 0 5px;}	

	footer .container p,
	footer .container a {
		font-size: 14px;
		line-height: 22px;
	}

	.content-section .container {
		padding: 1% 3%;
		background-color: rgba(0,0,0,0.5);
	}
	
	.content-section h1 {
		font-size: 28px;
		line-height: 36px;
		letter-spacing:0.01em;
		text-shadow: none;
	}

	.content-section h2 {
		font-size: 26px;
		line-height: 34px;
	}

	.content-section p,
	.content-section ul,
	.content-section ol {
		font-size: 18px;
		line-height: 26px;
		padding-bottom: 3px;
	}

	.full-size, .size90, .size80, .size70, .size60, .size50, .size40, .size30, .size20 {
		width: 98%; 
		height: 98%;
		margin: 0 1%;
	}

	.mt20, .mt40, .mt60, .mt80, .mt100 {margin-top: 2%}
	.mb20, .mb40, .mb60, .mb80, .mb100 {margin-bottom: 2%}
	.mtb20, .mtb40, .mtb60, .mtb80, .mtb100 {margin: 2% 0}
	.mlr20, .mlr40, .mlr60, .mlr80, .mlr100 {margin: 0 2%}
	.m20, .m40, .m60, .m80, .m100 {margin: 2%}

	.pt20, .pt40, .pt60, .pt80, .pt100 {padding-top:2%}
	.pb20, .pb40, .pb60, .pb80, .pb100 {padding-top:2%}
	.ptb20, .ptb40, .ptb60, .ptb80, .ptb100 {padding:2% 0}
	.p20, .p40, .p60, .p80, .p100 {padding:2%}

	.box {padding: 5px 20px 10px;}	

	.tables-section {margin-bottom: 20px;}

	.tables-section p {margin-bottom: 10px;}

	.tables-section table thead tr th {
		font-size: 10px;
		padding: 4px 0;
		letter-spacing: normal;
	}

	.tables-section table thead tr th span {
		font-size: 18px;
		padding: 8px 0;
		letter-spacing: 0.1em;
	}

	.tables-section table tbody tr td {
		font-size: 12px;
		padding: 3px 4px;
	}

	.tables-section table tbody tr.fixture {height: 24px;}

	.tables-section table tbody tr td.team {
		font-size: 14px;
		line-height: 20px;
	}

	.tables-section table tbody tr td.score {font-size: 14px;}

	.tables-section table tbody tr td img.img-circle {
		width: 24px;
		height: 24px;
	}

	.tables-section table tbody tr td img.info {
		width: 16px;
		height: 16px;
	}

	.form-section span.caption {
		font-size: 12px;
		line-height: 24px;
		padding-left: 3px;
	}

	.home .form-section .Form input[type="text"],
	.home .form-section .Form select,
	.general .form-section .Form input[type="text"],
	.general .form-section .Form input[type="email"],
	.general .form-section .Form input[type="password"],
	.general .form-section .Form select {
		font-size: 16px;
		padding: 4px 8px;
		margin-bottom: 3px;
	}

	.form-section .Form1 input[type="button"],
	.form-section .Form2 input[type="submit"],
	.form-section .Form input[type="button"],
	button,
	a.default {
		font-size: 16px;
		line-height: 32px;
		padding: 0 10px;
		margin: 0 5px 5px 0;
	}

	.form-section a.default {padding: 12px 30px;}
	
}