@import url("https://use.typekit.net/afd7fct.css");
@import url("https://use.typekit.net/fzm6yco.css");
@import url("https://use.typekit.net/ukt0mux.css");

body{
  background: whitesmoke;
  margin: 0;
}

ul {
	list-style-type: none;
	display: flex;
	justify-content: space-between;
  margin-right: 90px;
	font-size: 20px;
	font-family: area-normal, sans-serif;
	font-weight: 100;
	font-style: normal;
}

.menu {
  background-color: springgreen;
  padding-top: 10px;
  padding-bottom: 1px;
}

.menu a {
  text-decoration: none;
	color: black;
}

.dropdown {
    display: none;
    position: absolute;
    background-color: whitesmoke;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.mi:hover .dropdown {
    display: block;
}

.dropdown a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 18px;
}

.dropdown a:hover {
    background-color: lightgray;
}

.logomain {
	max-height: 75px;
	padding-top: 40px;
}

.ad {
	background-color: whitesmoke;
	padding-bottom: 1px;
	padding-top: 1px;
}

.add {
	color: black;
	font-family: proxima-nova, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	margin-left: 40px;
	text-align: center;
}

.adl {
	color: black;
}

.headline {
	background-image: url(dia.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	height: 800px;
	margin-top: -22px;
}

.hh1 {
	font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-style: normal;
	color: white;
	padding-top: 70px;
	margin-left: 40px;
}

.hp {
	color: white;
	font-size: 20px;
	font-family: proxima-nova, sans-serif;
	font-weight: 300;
	font-style: normal;
	margin-left: 40px;
	max-width: 500px;
}

.button {
	background-color: whitesmoke;
	max-width: 160px;
	max-height: 80px;
	margin-left: 40px;
	border-radius: 10px;
	transition: .5s;
}

.button:hover {
	background-color: springgreen;
	transition: .5s;
}

.btn {
	text-decoration: none;
	color: black;
}

.buttontitle {
	font-family: proxima-nova, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 25px;
	text-align: center;
}

.lp {
	font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-style: normal;
	margin-left: 100px;
	padding-bottom: 20px;
}

.imgo {
	max-width: 400px;
	max-height: 250px;
}

.hline {
	max-width: 400px;
	font-family: proxima-nova, sans-serif;
	font-weight: 600;
	font-style: normal;
	line-height: 25px;
	font-size: 23px;
}

.cone {
	max-width: 400px;
	padding-bottom: 10px;
}

.cone a {
	text-decoration: none;
	color: black;
}

.cone a:hover {
	text-decoration: underline;
}

h3 {
	font-family: proxima-nova, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	text-align: center;
}

h4 {
	font-family: proxima-nova, sans-serif;
	font-weight: 300;
	font-style: italic;
	margin-top: -7px;
}

.styleg {
	font-family: proxima-nova, sans-serif;
	font-weight: 300;
	font-style: normal;
	color: white;
	margin-top: 40px;
}

.lf a {
	text-decoration: none;
	color: white;
}

.lf a:hover {
	text-decoration: underline;
	color: white;
}

.sport {
	background-color: springgreen;
	max-width: 75px;
	max-height: 30px;
}

.lps {
	display: flex;
	justify-content: space-between;
	margin: 100px;
	margin-top: -5px;
}

.lpstwo {
	display: flex;
	justify-content: space-between;
	margin: 100px;
	margin-top: -50px;
}

.quote {
	background-color: springgreen;
	margin-bottom: -15px;
	padding: 10px;
}

.pq {
	font-family: proxima-nova, sans-serif;
	font-weight: 800;
	font-style: italic;
	font-size: 35px;
	margin-left: 80px;
	padding-top: 40px;
}

.qn {
	font-family: proxima-nova, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 23px;
	margin-left: 90px;
	margin-top: -20px;
	padding-bottom: 40px;
}

.contacts {
  text-align: center;
  padding: 70px;
}

.question {
	font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 30px
}

.buttontwo {
	background-color: springgreen;
	width: 150px;
	height: 38px;
	margin-left: 40px;
	border-radius: 10px;
	transition: .5s;
}

.buttontwo:hover {
	background-color: black;
	transition: .5s;
}

.buttontitletwo {
	font-family: proxima-nova, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 25px;
	color: white;
	margin-top: -1px;
}

.centerer {
	display: flex;
	justify-content: space-around;
}

.footer {
  background-color: black;
	display: flex;
	justify-content: space-between;
	padding-bottom: 30px;
}

.info {
	margin-top: 60px;
	margin-left: -100px;
	text-align: center;
	display: block;
}

.flist {
	display: block;
}

.list {
	float: left;
	clear: left;
	margin-bottom: 15px;
}

.oh {
	font-family: acumin-pro-condensed, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 30px;
	padding-bottom: 10px;
}

.space {
	margin-top: 10px;
	font-family: proxima-nova, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 22px;
	color: white;
}


.mi {
	padding-top: 85px;
	margin-right: 40px;
	font-family: "proxima-nova", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.footerlogo {
	max-height: 70px;
	padding-top: 50px;
	margin-left: 40px;
}

.line {
	font-family: proxima-nova, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 25px;
	margin-right: 50px;
	color: white;
}

.logo {
	max-height: 35px;
	padding: 10px;
}

.social {
	padding-top: 10px;
}

.sm {
	margin-top: -10px;
}

label {
	background-color: springgreen;
	font-family: proxima-nova, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 17px;
	color: white;
	border-radius: 5px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
}

input {
	font-family: proxima-nova, sans-serif;
	font-weight: 100;
	font-style: normal;
	font-size: 17px;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-style: none;
	margin-left: -10px;
}

.introduction {
	margin-left: 150px;
	padding-top: 20px;
}

.space {
	padding-bottom: 20px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  padding: 20px;
}

.first {
	display: flex;
	justify-content: center;

}

.firstitle {
  text-align: left;
  font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 35px;
	padding-top: 20px;

}

.firstimg {
	width: 800px;
}

.publ {
	text-align: left;
	font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-style: normal;
	color: gray;
	font-size: 15px;
}

.publisher {
	text-align: left;
	font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-style: normal;
}

.container a {
	text-decoration: none;
	color: blue;
}

.container a:hover {
	text-decoration: underline;
}

.title {
	text-align: left;
	font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-style: normal;
	color: gray;
	margin-top: -20px;
}

.first {
	padding-top: 30px;
}

.desc {
	text-align: center;
	font-family: proxima-nova, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: gray;
	font-size: 15px;
}

.text {
	font-family: proxima-nova, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
}

.schedule {
  max-width: 600px;
  margin: 20px auto;
  padding: 40px;
}

.game {
  display: flex;
  align-items: center;
  border: 1px solid lightgray;
  padding: 10px;
  margin-bottom: 10px;
}

.logos {
  width: 50px;
  margin-right: 10px;
}

.team {
	font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 19px;
}

.date {
  color: gray;
  font-family: proxima-nova, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 14px;
}

.bottom {
	padding-bottom: 60px;
}

.ucltable {
  max-width: 600px;
  margin: 20px auto;
  padding-top: 27px;
  padding-bottom: 45px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

thead {
  background-color: whitesmoke;
}

th, td {
  border: 1px solid lightgray;
  padding: 8px;
  text-align: center;
}

th {
	font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-style: normal;

}

.position {
	font-family: proxima-nova, sans-serif;
	font-weight: 600;
	font-style: normal;

}

tbody tr:nth-child(even) {
  background-color: snow;
}

.tlogos {
  max-width: 25px;
  margin-right: 8px;
  margin-bottom: -4px;
}

.tvlogos {
  max-width: 22px;
  margin-right: 8px;
  margin-bottom: -4px;
  padding-right: 3px;
}

.aflogos {
  max-width: 30px;
  margin-right: 8px;
  margin-bottom: -4px;
}

.afblogos {
  max-width: 30px;
  margin-right: 8px;
  margin-left: -2px;
  margin-bottom: -4px;
  padding-right: 3px;
}

.afslogos {
  max-width: 27px;
  margin-right: 8px;
  margin-bottom: -4px;
  padding-right: 3px;
}

.aftlogos {
  max-width: 26px;
  margin-right: 8px;
  margin-bottom: -4px;
  padding-right: 4px;
}

.afrlogos {
  max-width: 33px;
  margin-right: 8px;
  margin-left: -2px;
  margin-bottom: -4px;
  padding-right: -3px;
}


.wc {
	text-align: center;
	font-weight: bold;
	font-style: italic;
}

td {
	font-family: proxima-nova, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.clubname {
	text-align: left;
}

.styleguide {
  max-width: 700px;
  margin: 20px auto;
  padding: 30px;
  background-color: lightgray;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-top: 60px;
  margin-bottom: 90px;
}

.sg {
	font-family: proxima-nova, sans-serif;
	font-weight: 900;
	font-style: normal;
	font-size: 40px;
	color: black;
	margin-top: -1px;
}

.colors {
  margin-bottom: 20px;
}

.cb {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  display: inline-block;
}

.green {
  background-color: springgreen;
}

.whitesmoke {
  background-color: whitesmoke;
}

.black {
	background-color: black;
}

.typography {
  margin-bottom: 20px;
}

.heading {
  font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 30px;
}

.bodytext {
	font-family: proxima-nova, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
}

.link {
	font-family: proxima-nova, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
  color: black;
  text-decoration: underline;
}

.desctwo {
	font-family: proxima-nova, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: gray;
	font-size: 15px;
}

.descthree {
	font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-style: normal;
	color: gray;
	font-size: 15px;
}

.buttons {
  margin-bottom: 20px;
}


.pbtn {
	font-family: proxima-nova, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 25px;
  background-color: whitesmoke;
  padding: 10px 20px;
  margin-right: 10px;
  border: none;
  color: black;
  border-radius: 10px;
}

.pbtn:hover {
	background-color: springgreen;
	transition: .5s;
}

.sbtn {
	font-family: proxima-nova, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 25px;
  background-color: springgreen;
  padding: 10px 20px;
  margin-right: 10px;
  border: none;
  color: white;
  border-radius: 10px;
  transition: .5s;
}

.sbtn:hover {
	background-color: black;
	transition: .5s;
}

.sname {
	font-family: proxima-nova, sans-serif;
	font-weight: 800;
	font-style: italic;
	font-size: 35px;
}