@import url('https://fonts.googleapis.com/css?family=Open+Sans|Playball');

body {
  background: #1D1F20;
  color: white;
  line-height: 1;
  font-family:'Open Sans',sans-serif;
}

a {
  text-decoration: none;
  color: #0066cc;
}
a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

.hexagon {
  position: relative;
  width: 80px; 
  height: 46.19px;
  margin: 23.09px 0;
  background-image: url("cf.jpg");
  background-size: auto 92.3760px;
  background-position: center;
  box-shadow: 0 0 20px rgba(0,105,255,0.6);
  margin-top: 25px;
}

.hexTop,
.hexBottom {
  position: absolute;
  z-index: 1;
  width: 56.57px;
  height: 56.57px;
  overflow: hidden;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background: inherit;
  left: 11.72px;
  box-shadow: 0 0 20px rgba(0,105,255,0.6);
}

/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
  content: "";
  position: absolute;
  width: 80.0000px;
  height: 46.188021535170066px;
  -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-23.0940px);
  -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-23.0940px);
  transform:          rotate(45deg) scaleY(1.7321) translateY(-23.0940px);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  background: inherit;
}

.hexTop {
  top: -28.2843px;
}

.hexTop:after {
  background-position: center top;
}

.hexBottom {
  bottom: -28.2843px;
}

.hexBottom:after {
  background-position: center bottom;
}

.hexagon:after {
  content: "";
  position: absolute;
  top: 0.0000px;
  left: 0;
  width: 80.0000px;
  height: 46.1880px;
  z-index: 2;
  background: inherit;
}

.hexCircle {
	border-radius: 50%;
	width: 70px;
	height: 70px; 
	/* width and height can be anything, as long as they're equal */
  background: #1D1F20;
  z-index: 4;
  position: absolute;
  margin-top: 12px;
  margin-left: 4px;
  margin-bottom: 20px;
  top: 1px;
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

.floating-title {
  z-index: 100;
  position: absolute;
  margin-left: 90px;
  margin-top: -27px;
}
.floating-subtitle {
  z-index: 100;
  position: absolute;
  margin-left: 90px;
  margin-top: 34px;
}

.alignment-rack {
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  max-width: 500px;
  min-width: 500px;
  overflow: hidden;
  /* border-color: #006699;
  border-style: solid;
  border-width: 1px; */
}

.textright {
  float: right;
  text-align: left;
  width: 200px;
  margin-top: 10;
  margin-right: 10;
  margin-bottom: 10;
}
.textleft{
  float: left;
  text-align: left;
  width: 200px;
  margin-top: 10;
  margin-left: 10;
  margin-bottom: 10;
}

.oval {
  width: 200px;
  height: 100px;
  background: #FFFFFF;
  color: #0066cc;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
  text-align: center;
  z-index: 1;
  margin-top: 10;
  margin-left: 10;
  margin-bottom: 10;
}
.ovaltext{
  color: #0066cc;
  font-size: 210%;
  font-weight: bold;
  font-style: oblique;
  font-family: 'Playball', cursive;
  padding-top: 30;
  position: static;
  z-index: 2;
}


.bluerect {
  float: right;
  width: 160px;
  height: 100px;
  background: #006699;
  z-index: 1;
  margin-top: 50;
  margin-right: 30;
}
.goldcross {
  background: gold;
  height: 100px;
  width: 20px;
  z-index: 2;
  margin-left: 40px;
  position: relative;
}
.goldcross:after {
  background: gold;
  content: "";
  height: 20px;
  left: -40px;
  position: absolute;
  z-index: 3;
  top: 40px;
  width: 160px;
  color: black;
}
.saabtext{
  z-index: 4;
  position: relative;
  margin-left: -23px;
  padding-top: 37px;
  font-size: 170%;
  /*
  "its actually Helvetica Neue Black Extended that has been tweekedned a bit"
  But that font costs money.
  */
  font-weight: 800;
  color: black;
}

.dropbtn {
    background: #1D1F20;
    color: white;
    padding: 5px;
    font-size: 16px;
    border: none;
    cursor: default;
    overflow: visible;
    width: 200px;
    text-align: right;
}

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

.dropdown-content {
    display: block;
    color: white;
    position: relative;
    background-color: #006699;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 5;
    overflow: visible;
    left: 200px;
    top: -10px;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    overflow: visible;
}

.dropdown-content a:hover {
    background-color: darkblue;
    overflow: visible;
}


.tv {
  position: relative;
  width: 200px;
  height: 150px;
  border-radius: 50% / 10%;
  color: white;
  background: red;
  z-index: 1;
  margin-left: 10;
  margin-bottom: 10;
}
.tv:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  border-radius: 5% / 50%;
  background: inherit;
}
.tvtext {
  position: absolute;
  font-size: 89%;
  font-weight: bold;
  z-index: 2;
}
.tvtext a {
  color: white;
  text-decoration: none;
}