/*--------------------------------------------------------------
# Global Style Variables
--------------------------------------------------------------*/

:root {
  --Jumbo_bg_color:  #191c3b;  
  --pagetitle_color: white;
  --champlogo: url("../images/OpenLogoWhite.png");
  --logopos: 50%;
  --logoposmob: 50%;
  --logosize: 75px;
  --logosizemob: 45px;
}


/* Masters Variables
  --Jumbo_bg_color: linear-gradient(#009969, #006747);
  --pagetitle_color: white;  
  --champlogo: url("../images/MastersLogoWhite.png"); 
  --logopos: 50%;
  --logoposmob: 50%;
  --logosize: 75px;
  --logosizemob: 45px;
*/

/* PGA Championshop Variables
  --Jumbo_bg_color: linear-gradient(#eff, #4678a0);
  --pagetitle_color: white;
  --champlogo: url("../images/pga-2024.png");
  --logopos: 50%;
  --logoposmob: 50%;
*/

/* US Open Variables
  --Jumbo_bg_color: linear-gradient(#fff, #04446D);  
  --pagetitle_color: white;
  --champlogo: url("../images/USOpen2025Logo.png");
  --logopos: 50%;
  --logoposmob: 50%;
*/

/* Open Championship Variables
  --Jumbo_bg_color:  #191c3b;  
  --pagetitle_color: white;
  --champlogo: url("../images/OpenLogoWhite.png");
  --logopos: 50%;
  --logoposmob: 50%;
*/

/* General Variables
  --Jumbo_bg_color: linear-gradient(#8c8c8c, #565656);
  --pagetitle_color: white;
  --champlogo: url("../images/MastersLogoHead.png"), url("../images/USOpenLogo.png"), url("../images/OpenLogo.png"), url("../images/PGAlogo.png");
  --logopos: 15%, 40%, 60%, 85%;
  --logoposmob: 10%, 45%, 65%, 90%;
*/

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

body {
	font: 400 15px Lato, sans-serif;
	line-height: 1.8;
	color: #818181;
  background-color: #222629;
}

p {
	margin-bottom: 1.5em;
}

h1 {
	font-size: 36px;
	font-weight: 800;
	color: #61892f;
	margin: 0 0 20px 0;
	text-align: center;
}

h2 {
	font: 24px Lato, sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	margin-top: 15px;
}

h4 {
	font: 18px Lato, sans-serif;
	text-transform: uppercase;
	line-height: 1.375em;
	font-weight: 600;
  margin-top: 5px;
	margin-bottom: 0px;
}

h4-select {
	font: 18px Lato, sans-serif;
	text-transform: uppercase;
	line-height: 1.375em;
	font-weight: 600;
	margin-bottom: 0px;
}

h4-select:after {
	font-family: "Glyphicons Halflings";
	content: "\e080";
	font-size: 1.0rem;
	border: 1px solid #86C232;
	border-radius: 50%;
	color: #86C232;
	padding: 5px;
}

a {
  cursor: pointer;
}

newstitle {
  font: 18px Lato, sans-serif;
	text-transform: capitalize;
	font-weight: 1000;
	margin-top: 0px;
}

table {
	border: none;
	display: table;
	margin: 0px;
	overflow: auto;
}

tbody {
	width: 100%;
}

th,
td {
	padding: 15px;
	text-align: left;
	border-bottom: 1px solid #ddd;
	border-left: none;
	border-right: none;
}

th {
	background-color: #eee;
}

tr.other {
  font-style:italic;
}

tr.total {
  font-weight:bold;
  background-color: #ddd;
}

tr.final {
  font-weight:bold;
  color: #fff;
  background-color: #5cb85c;
}

tr.final:hover {
  color: #fff;
}

label {
	font: 15px Lato, sans-serif;
	font-weight: 800;
}

img {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

pagetitle {
	font-size: 48px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--pagetitle_color);
	margin: 0 0 20px 0;
	/*text-shadow: 1px 1px #000;*/
}

timer {
	font: 18px Orbitron, sans-serif;
	text-transform: uppercase;
	line-height: 1.375em;
	font-weight: 600;
	margin-bottom: 10px;
}

footer {
	background-color: #222629;
	font-family: Comfortaa;
	clear: both;
}

footer .glyphicon {
	font-size: 1.5em;
	margin: 0 10px 0 20px;
	color: #fff;
	background-color: #222629;
}

@font-face {
    font-family: masterplan;
    src: url("../includes/fonts/MASTERPLAN___.ttf");
}

@font-face {
    font-family: National-Light;
    src: url("../includes/fonts/NationalWeb-Light.woff2");
}

@font-face {
    font-family: National-Regular;
    src: url("../includes/fonts/NationalWeb-Regular.woff2");
}

@font-face {
    font-family: National-Bold;
    src: url("../includes/fonts/NationalWeb-Bold.woff2");
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

.navbar-default .navbar-nav>li>a {
  color: #fff !important;
}

.navbar {
	margin-bottom: 0;
	background-color: #222629;
	z-index: 9999;
	border: 0;
	font-family: Comfortaa;
	font-size: 16px !important;
	line-height: 1.2 !important;
	letter-spacing: 4px;
	border-radius: 0;
	box-shadow: 0px 0px 14px #000;
}

.navbar li a,
.navbar .navbar-brand {
	color: #fff !important;
  white-space: nowrap;
}

.navbar-nav li a:hover,
.navbar-nav li a:active {
	color: #222629 !important;
	background-color: #fff !important;
}

.navbar-default .navbar-toggle {
	border-color: transparent;
	color: #fff !important;
  margin: 3px;
  padding: 10px;
  height: 50px;
}

.logo {
  font-size: 20px;
	font-family: Comfortaa;
}

.inline-logo {
  display: inline;
  margin: 0;
}

.navbar img {
  display: inline;
  margin: 0;
}

.navbar-brand:hover, .logo a:hover {
  color: #2B9153 !important;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  overflow-x: visible;
  position: relative;
  display: inline-block;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown, .dropbtn {
  cursor: pointer;   
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  padding: 0px;
  max-height: 50px;
}

.dropbtn a {
  line-height: 20px;
  padding: 15px;
  letter-spacing: 4px;
}

.navbar-nav a:hover, .dropdown:hover .dropbtn, .dropbtn:hover {
  background-color: white;
  color: #222629 !important;
}

.dropdown-content {
  display: none;
  white-space: nowrap;
  position: absolute;
  top: 49.2px;
  background-color: #222629;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99999;
}

.dropdown-content a {
  float: none;
  color: black;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

#nav-icon {
  width: 30px;
  height: 22px;
  position: relative;
  margin: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: white;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
  top: 9px;
}

#nav-icon span:nth-child(4) {
  top: 18px;
}

#nav-icon.open span:nth-child(1) {
  top: 9px;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

/*--------------------------------------------------------------
# Page Layout
--------------------------------------------------------------*/

.champlogo {
  background-image: var(--champlogo);
  background-repeat: no-repeat;
  background-size: var(--logosize);
	background-position: var(--logopos);
  min-height: 80px;
  height: 100%;
  width: auto;
}

.jumbotron {
	font-family: National-Bold;
	/*background-color: #004990;*/
  background: var(--Jumbo_bg_color);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	padding: 60px 5% 5px 5%;
	margin: auto auto 0px;
  height: 100%;
	/*box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.4);*/
}

.container-fluid {
	padding: 0px;
	float: left;
	width: 100%;
/*  background-image: var(--BGimage); */
  background-attachment: fixed;
	background-position: center 20px;
	background-repeat: no-repeat;
	background-size: cover;
  background-color: #c2c2c2;
}

.main {
	width: 67%;
	float: left;
}

.main-blog {
	width: 55%;
	float: left;
	margin-right:20px;
}

.panel {
	border: 1px solid #c2c2c2;
	transition: box-shadow 0.5s;
	display: inline-block;
	padding: 10px;
	margin: 5px;
	width: 98%;
	background-color: rgba(255,255,255,0.9);
	/*box-shadow: 0px 0px 14px #000000;*/
}

.panel-center {
	border: 1px solid #c2c2c2;
	transition: box-shadow 0.5s;
	display: inline-block;
  padding: 10px;
	margin: 5px 16.5% auto 16.5%;
	clear: both;
 /*float: left;*/
	width: 67%;
	background-color: #fff;
	border-radius: 5px;
	/*box-shadow: 0px 0px 14px #000000;*/
	background-color: rgba(255,255,255,0.9);
}

.panel-main {
	border: 1px solid #c2c2c2;
	transition: box-shadow 0.5s;
	padding: 10px;
	margin: 5px;
	float:left;
	width: 67%;
	background-color: #fff;
	border-radius: 5px;
	/*box-shadow: 0px 0px 14px #000000;*/
	background-color: rgba(255,255,255,0.9);
}

.panel-heading {
	color: #fff !important;
	background-color: #474B4f !important;
	padding: 15px;
	border-bottom: 1px solid transparent;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.panel-tweets {
 	height: auto;
	display: inline-block;
	width: 30%;
	padding: 10px;
	top: 50px; 
  background-color: #fff;
	border-radius: 5px;
	/*box-shadow: 0px 0px 14px #000000;*/
	border: 1px solid #c2c2c2;
	transition: box-shadow 0.5s;
  margin: 5px;
}

.panel-right-fixed{
 	height: auto;
	display: inline-block;
	width: 30%;
	padding: 10px;
 /* position: fixed;*/
  background-color: #fff;
	border-radius: 5px;
	transition: box-shadow 0.5s;
  margin: 5px;
  right: 0px;
}

.panel-right{
 	height: auto;
	display: inline-block;
	width: 30%;
	padding: 10px;
  position: absolute;
  background-color: #fff;
	border-radius: 5px;
	transition: box-shadow 0.5s;
  margin: 5px;
  right: 0px;
}

.anchor {
	display: block;
	position: relative;
	top: -50px;
	visibility: hidden;
}

.sidepanel {
	height: auto;
	float: left;
	width: 32%;
	padding: 0px;
  margin: 5px;
	position: -webkit-sticky;
	position: sticky;
	top: 50px;
}

.blogpanel {
	height: auto;
	float: left;
	width: 20%;
	padding: 10px;
	position: -webkit-sticky;
	position: sticky;
	top: 50px;
	background-color: #fff;
	border-radius: 5px;
	/*box-shadow: 0px 0px 14px #000000;*/
	border: 1px solid #222629;
	transition: box-shadow 0.5s;
	margin: 10px;
}

/*--------------------------------------------------------------
# Player Boxes
--------------------------------------------------------------*/

.box1,
.box2,
.box3,
.box4 {
	width: 100px;
	height: 125px;
	padding: 5px 0px 10px 0px;
	border: 1px solid #aaaaaa;
	background-color: #f6f6f6;
	margin: 5px;
	float: left;
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	text-align: center;
	border-radius: 45% 45% 5% 5%;
	cursor: pointer;
}

.box1.clicked,
.box2.clicked,
.box3.clicked,
.box4.clicked {
	background-color: #3cc8ff;
	border: 1px solid #3cc8ff;
	color: white;
	box-shadow: none;
}

.box1:hover,
.box2:hover,
.box3:hover,
.box4:hover {
	background-color: #cacaca;
	border: 1px solid #cacaca;
	color: white;
}

.profile {
	position: relative;
	display: inline-block;
	margin: auto;
	height: auto;
	width: 90%;
}

.flag {
	z-index: 1;
	position: relative;
	height: 20px;
	width: 30%;
	float: left;
	margin-top: -25px;
	margin-left: 1px;
  margin-bottom: 0px;
	border-radius: 15%;
}

.rank {
	z-index: 1;
	position: relative;
	float: right;
	width: 30%;
	height: 20px;
	margin-top: -25px;
	background-color: green;
	border-radius: 15%;
}

.position {
	z-index: 1;
	position: relative;
	float: right;
	width: 30%;
	height: 20px;
	margin-top: -20px;
	background-color: #222629;
	border-radius: 15%;
  font-size: 1.2rem;
}

.info {
	z-index: 1;
	position: absolute;
	float: right;
	width: 20px;
	height: 20px;
  margin-left: 75px;
	margin-top: -5px;
	background-color: #00aaff;
	border-radius: 50%;
  font-size: 1.2rem;
  color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.position_mc {
	z-index: 1;
	position: relative;
	float: right;
	width: 30%;
	height: 20px;
	margin-top: -20px;
	background-color: red;
	border-radius: 15%;
  font-size: 1.2rem;
}

.underpar, .overpar, .evenpar {
	z-index: 1;
	position: relative;
	left: 33.75%;
	width: 32.5%;
	height: 25px;
	margin-top: -30px;
	box-shadow: inset 0 0 10px #000000;
	border-color: lightgrey;
	background-color: white;
	font-weight: bold;
}

.underpar{
	color: red;
}

.overpar {
	color: green;
}

.evenpar {
	color: black;
}

.playerrank {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	font-size: 1.0rem;
	text-align: center;
	color: white;
	margin: 0px 0px 12.5px 0px;
}

.playername {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	font-size: 1.0rem;
	text-align: center;
	margin: 0px auto 0px auto;
	padding: 2px;
}

.subbedOut {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='red' stroke-width='4'/><path d='M0 0 L100 100 ' stroke='red' stroke-width='4'/></svg>");
  background-repeat:no-repeat;
  background-position:center center;
  background-size: 100% 100%, auto;
}

.players {
	color: #D3D3D3;
}

/*--------------------------------------------------------------
# Form Layouts
--------------------------------------------------------------*/

.teamform {
	/*float: left;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0px 0px 14px #000000;
	opacity: 0.9;
  border: 0px solid #222629;
	transition: box-shadow 0.5s;
	padding: 10px;
	width: 100%; */
  
  width: 100%;
	padding: 10px;
	margin: 5px auto;
	clear: both;
}

.gridform {
	display: inline-block;
	width: 50%;
	padding-right: 5px;
}

.mailform {
	padding-right: 5px;
	display: inline-block;
	width: 100%;
}

.help-block {
  display: inline;
}

.table-responsive {
	display:inline-block;
	width: 100%;
	overflow: auto;
	}

.input-container {
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

.icon {
  padding: 15px;
  background: dodgerblue;
  border: 1px solid dodgerblue;
  color: white;
  min-width: 50px;
  text-align: center;
  font-size: 20px;
  vertical-align: bottom;
  white-space: nowrap;
  border-radius: 5% 0% 0% 5%;
}

.icon-eye {
  padding: 15px;
  font-size: 20px;
  min-width: 50px;
  text-align: center;
}

.input-field {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 0% 2% 2% 0%;
}

.input-field:focus {
  border: 1px solid dodgerblue;
}

.input-field-valid {
 border: 1px solid green;
}

.input-field-invalid {
 border: 1px solid red;
}

.poolselect {
  display: inline-block;
	border: 1px solid #aaaaaa;
  background-color: white;
  padding: 2px 5px;
  margin: 5px 5px 0px 0px;
	min-height: 30px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
}

.poolselect:hover {
  background-color: #cacaca;
  color: white;
}

.poolselect.clicked {
  display: inline-block;
	border: 1px solid #aaaaaa;
  background-color: #3cc8ff;
  padding: 2px 5px;
  border-radius: 10px;
  color: white;
  font-size: 13px;
}

.poolselect.private::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f023";
  vertical-align: middle;
  left: 90%;
  display: inline-block;
  padding-left: 5px;

}

.formflag {
  border-radius: 50%;
  position: relative;
	height: 15px;
	width: 15px;
  float: left;
  margin: 5px 5px 0px 0px;
}

.more { 
  width:100%;
  text-align:center; 
  /*border-bottom: 1.5px solid #cacaca; */
  line-height:0.1em; 
  margin:5px 0 20px; 
  cursor: pointer;
} 
.more span { 
  padding:0 10px; 
}


.poolBtn {
	cursor: pointer;
}

.btn {
	display: block;
	margin: 10px auto 10px auto;
	min-width: 25%;
}

.btn-inline {
  display: inline-block;
	margin: 10px;
	min-width: 20%;
}

.btn-group {
  width: 80%;
}

.formatBtn{
  margin-top: 0px;
  margin-right: -1px;
  border-radius: 0px 0px 5px 5px;
}

/* The message box is shown when the user clicks on the password field */
#message, #messageconf {
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 5px;
}

#message p, #messageconf p {
  padding: 5px;
  font-size: 14px;
  margin: 0;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -5px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f058";
}

/* Add a red text color and an "x" icon when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -5px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f057";
}

/*--------------------------------------------------------------
# Other Page Features
--------------------------------------------------------------*/

#pickSearch, #subSearch, #punterSearch, #searchInput
 {
  background-image: url('https://www.w3schools.com//css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 5px 35px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

.aspect-video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 51%;
  opacity: 1; 
  background-color:white;
  z-index: 1;
}

.aspect-video iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}

.newsblock {
  width: 33.3%;
  padding: 0.5%;
  display: inline-block;
  vertical-align: top;
}
  
.charts {
  width:47.5%;
  display: inline-block;
}

.teamPanel {
  width:100%; 
  height:150px;
}

.bottom-bar {
  width: 100%;
  background-color: #ccc;
  bottom: 50px;
  height: 50px;
  position: fixed;
  z-index: 9999;
   /* visibility: hidden; */
}

.tile {
	width: 120px;
	height: 160px;
	padding: 5px;
	border: 1px solid #aaaaaa;
	background-color: #f6f6f6;
	margin: 5px;
	float: left;
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	text-align: center;
  border-radius: 5% 5% 5% 5%;
	cursor: pointer;
}

/*--------------------------------------------------------------
# Icons - Font Awesome
--------------------------------------------------------------*/


.fab {
	padding: 5px 5px 5px 5px;
	font-size: 25px;
	width: 35px;
	height: 35px;
	margin: 5px;
	text-align: center;
	text-decoration: none;
	border-radius: 10%;
}

.fab:hover {
	text-decoration: none;
}

/* Set a specific color for each brand */

/* Twitter */

.fa-twitter.footer {
	background: #222629;
	color: white !important;
}

.fa-twitter.footer:hover {
	background: #55ACEE;
	color: white;
}

/* Instagram */

.fa-instagram {
	background: #222629;
	color: white;
}

.fa-instagram:hover {
	background: #fb3958;
	color: white;
}

.checkbox {
	float: left;
	padding: 0px 10px 10px 0px;
}

/*--------------------------------------------------------------
# Pool Form
--------------------------------------------------------------*/

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  /*left: 0;*/
  z-index: 9999;
  height: auto;
	float: left;
	width: 33%;
	padding: 10px;
	top: 155px;
}

/* Add styles to the form container */
.form-container {
  float: left;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0px 0px 14px #000000;
	opacity: 0.9;
	border: 0px solid #222629;
	transition: box-shadow 0.5s;
	padding: 10px;
	width: 100%;
}

/*--------------------------------------------------------------
# Page Actions
--------------------------------------------------------------*/

.slideanim {
	visibility: hidden;
}

.slide {
	/* The name of the animation */
	animation-name: slide;
	-webkit-animation-name: slide;
	/* The duration of the animation */
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	/* Make the element visible */
	visibility: visible;
}

#topBtn {
	display: none;
	position: fixed;
	bottom: 110px;
	right: 0px;
	z-index: 99;
	border: 0px solid #fff;
	border-right: 0;
	outline: none;
	background-color: #222629;
	color: #fff;
	cursor: pointer;
	padding: 5px;
	border-radius: 10px 0px 0px 10px;
	font-size: 1.0rem;
	margin-right: 0px;
	width: 30px;
	box-shadow: 0px 0px 14px #000;
}

#topBtn:hover {
	background-color: #fff;
	color: #222629;
}

/*--------------------------------------------------------------
# Image Gallery
--------------------------------------------------------------*/

.container .gallery a img {
  float: left;
  width: 100%;
  height: auto;
  border: 2px solid #fff;
  -webkit-transition: -webkit-transform .15s ease;
  -moz-transition: -moz-transform .15s ease;
  -o-transition: -o-transform .15s ease;
  -ms-transition: -ms-transform .15s ease;
  transition: transform .15s ease;
  position: relative;
}

.container .gallery a:hover img {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  z-index: 5;
}

div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 20%;
}

/*--------------------------------------------------------------
# Screen Size Adjustments
--------------------------------------------------------------*/

/*Adjusting for medium screen sizes */

@media screen and (max-width: 1160px) {
pagetitle {
	font-size: 36px;
	font-weight: 300;
	margin: 0 0 10px 0;
}
  
.bottom-bar {
  width: 100%;
  background-color: #ccc;
  bottom: 0;
  height: 50px;
  position: fixed;
  z-index: 9999;
}

}

/* Adjusting for smaller screen sizes */

@media screen and (max-width: 820px) {
  
  pagetitle{
		font-size: 26px;
    font-weight: 300;
	  margin: 0 0 10px 0;
	}

  .dropdown {
    display: none;
  }
  
  .navbar a, .dropdown, .dropbtn {float: none;}
  .dropbtn {position: relative;}
  .dropdown-content {
    position: relative;
    top: 0px;
  }
  
  .navbar a, .dropdown, .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
  
  .jumbotron{
    padding-top: 60px;
  }
  
  .champlogo {
    background-position: var(--logoposmob);
    background-size: var(--logosizemob);
    min-height: 45px;
    /*background-size: auto 70%; */
  }
  
	.container-fluid {
   background-image: none; 
  }
  
  .sidepanel {
		width: 95%;
		position: relative;
		float: left;
		top: 10px;
	}
  
  .form-popup {
    width:100%;
    top: 55px;
  }

	h4-select:after {
		content: "\e114";
	}

	.table-responsive {
		display:inline-block;
		width: 100%;
		overflow: scroll;
	}

	.teamform {
    width: 100%;
		margin: 10px;
	}

	.main {
		width: 100%;
		float: left;
    margin-top: 10px;
	}

	.panel, .panel-center, .panel-main, .panel-tweets, .panel-right-fixed {
		width: 95%;
    margin: 5px auto;
	}
  
  .panel-right-fixed{
 	height: auto;
	display: inline-block;
	padding: 10px;
  position: relative;  
  background-color: #fff;
	border-radius: 5px;
	/*box-shadow: 0px 0px 14px #000000;*/
	transition: box-shadow 0.5s;
  margin: 10px;  
}

	.bg-grey {
		margin: 15px 5px 10px 5px;
	}

	.container-fluid {
		padding: 0px 5px 5px;
	}

	.box1,
	.box2,
	.box3,
  .box4 {
		width: 90px;
		height: 115px;
		margin: 5px;
		float: left;
	}
  
  .newsblock{
  width:100%;
}
  
.charts {
  width:100%;
}  
  
.teamPanel { 
  height:300px;
}  
  
}

@media screen and (max-width: 375px) {
   .navbar a {
    font-size: 16px;
  }  
  
  img {
  max-width: 345px;
}
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */

@keyframes slide {
	0% {
		opacity: 0;
		transform: translateY(70%);
	}
	100% {
		opacity: 1;
		transform: translateY(0%);
	}
}

@-webkit-keyframes slide {
	0% {
		opacity: 0;
		-webkit-transform: translateY(70%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0%);
	}
}