/*-------------------------
	EXTRA CSS
	border: 1px solid #ddd;
--------------------------*/

.advert{
    padding-bottom: 50px;
}

.right{
	float: right;
}

.left{
	float: left;
}

.clear {
  clear: both;
}

.small {
	font-size: small;
	display: block;
}

.large {
	font-size: large;
	display: block;
}

.halfwidth {
	max-width: 800px;
	display: block;
}

.center {
	text-align: center;
}

.bold {
	font-weight: bold;
}

.clickable:hover {
	cursor: pointer;
}

.gauge {
  width: 50%;
  margin: 20px 0 20px 0;
}

.divcenterwrapper {
  text-align: center;
  width: 100%;
}

.divcenter {
  display: inline-block;
  justify-content: center;
}

.launch-item-wrapper {
	text-align: center;
    width: 100%;
}

.launch-item {
  display: inline-block;
  justify-content: center;
}

.launch-item.header {
  padding: 15px;
  width: 90%;
  margin-bottom: 50px;
  border: 1px;
  border-color: black;
  border-style: solid;
}

.launch-credits
{
	padding-top: 50px;
	font-size: x-small;
}

.launch-image{
   padding:1px;
   border:1px solid #021a40;
   width: 100%;
}

.groundtracker {
  position: absolute;
}

#progressbar{
	display: none;
}

#objectstablehtml {
	width: 100%;
	table-layout: fixed;
}

#objectfilters {
	width: 100%;
	padding-bottom: 50px;
	padding-top: 25px;
}

#satellite-data{
	width: 100%;
}

#launchtable{
	padding-top: 100px;
}

#launchtable .launchtableheader {
	padding: 20px;
}

.launchtableheader {
	padding: 50px;
}

.addReadMore.showlesscontent .SecSec,
.addReadMore.showlesscontent .readLess {
	display: none;
}

.addReadMore.showmorecontent .readMore {
	display: none;
}

.addReadMore .readMore,
.addReadMore .readLess {
	font-weight: bold;
	margin-left: 2px;
	color: gray;
	cursor: pointer;
}

.addReadMoreWrapTxt.showmorecontent .SecSec,
.addReadMoreWrapTxt.showmorecontent .readLess {
	display: block;
}

.launch-info-popup {
	width: 95% !important;
}

.dataselectors {
	padding: 25px;
}

.countdown-timestamp {
	font-style: normal;
	font-weight: bold;
	font-size: smaller;
	text-align: center;
	font-family: monospace !important;
	margin-bottom: 0em !important;
}

.satinfosummary {
	font-family: monospace;
	font-size: large;
	font-weight: bold;
}

.satdatasummary {
	font-family: monospace;
	font-size: large;
	font-weight: bold;
}

.satobjtrend {
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 5px;
	display: inline-block;
	border: 1px dotted #d0cece;
}

pre.countdown-timer {
	max-width: 15em !important;
    background: #f4f4f4 !important;
    border: 1px solid #ddd !important;
    color: red !important;
    page-break-inside: avoid !important;
    font-family: monospace !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 1.6em !important;
    overflow: auto !important;
    padding: 1em 1.5em !important;
    display: block !important;
    word-wrap: break-word !important;
	text-align: center;
}

pre {
	max-width: 100% !important;
    background: #f4f4f4 !important;
    border: 1px solid #ddd !important;
    border-left: 3px solid rgb(124, 181, 236) !important;
    color: #666 !important;
    page-break-inside: avoid !important;
    font-family: monospace !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 1.6em !important;
    overflow: auto !important;
    padding: 1em 1.5em !important;
    display: block !important;
    word-wrap: break-word !important;
	text-align: center;
}

.graph {
	width: 100%;
	margin-top: 50px;
}

/* LOADING */
.toggle-loading {
  position: absolute;
}
.toggle-loading  .icon {
  display: inline-block;
  display: flex;
  justify-content: center;
  padding: 10px 0 10px 10px;
}
.toggle-loading  .copy {
  float: left;
  padding: 10px 0;
  color: #666666;
}

/* BUTTONS https://fdossena.com/?p=html5cool/buttons/i.frag */
a.button4{
	display:inline-block;
	padding:0.3em 1.2em;
	margin:0 0.1em 0.1em 0;
	border:0.16em solid rgba(255,255,255,0);
	border-radius:2em;
	box-sizing: border-box;
	text-decoration:none;
	font-family:'Roboto',sans-serif;
	font-weight:300;
	color:#FFFFFF;
	text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
	text-align:center;
	transition: all 0.2s;
}
a.button4:hover{
border-color: rgba(255,255,255,1);
}

@media all and (max-width:30em){
	a.button4{
	display:block;
	margin:0.2em auto;
	}
}

.orbit-container {
   padding: 20px;
}

.out-cir {
   margin-top: -23%;
}

.blue1 {}

.big-cir {
   height: 300px;
   width: 300px;
   border-radius: 50%;
   position: relative;
   display: block;
   border-color: rgb(167, 183, 254);
   border-style: solid;
   border-width: 2px;
   animation: dotmove cubic-bezier(1,1,1,1) 4s infinite;
}

.big-cir > .small-cir {
   background-color: #000;
   border-radius: 50%;
   position: absolute;
   border-color: rgb(167, 183, 254);
   border-style: solid;
   border-width: 2px;
   padding: 5px;
   content: "";
   left: 90px; // you may need to change this
}

.big-cir > .small-cir2 {
   background-color: #000;
   border-radius: 50%;
   position: absolute;
   border-color: rgb(167, 183, 254);
   border-style: solid;
   border-width: 2px;
   padding: 5px;
   content: "";
   left: 290px;
   top: 130px;
}

.big-cir > .small-cir3 {
   background-color: #000;
   border-radius: 50%;
   position: absolute;
   border-color: rgb(167, 183, 254);
   border-style: solid;
   border-width: 2px;
   padding: 5px;
   content: "";
   left: 150px;
   top: 290px;
}

.terra-circle {
	width: 300px;
	float: left;
}

@keyframes dotmove {
   from {
      transform: rotate(360deg);
   }
   to {
      transform: rotate(0deg);
   }
}

@media only screen
  and (min-device-width: 768px)
  and (-webkit-min-device-pixel-ratio: 1) {

	.ucsdata {
		width: 100%;
	    -webkit-column-count: 4;
	    -moz-column-count: 4;
	    column-count: 4;
	}

	.satdatasummary {
		width: 100%;
	    -webkit-column-count: 4;
	    -moz-column-count: 4;
	    column-count: 4;
	}

	.launch-image{
	   float:left;
	   width: 25% !important;
	   margin-right: 2em;
	   margin-bottom: 2em;
	}
}