@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lekton');
@import url("https://use.typekit.net/jta7wze.css");
@font-face {
    font-family: 'Riffic Free Medium';
    src: url(/fonts/rifficfree-bold-webfont.woff2) format('woff2'),
         url(/fonts/rifficfree-bold-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;}

/* code for outlining text:
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }

a {
	color: #0d63c5;
	text-decoration:none;
	transition: 0.2s;
    font-weight: bold;
}

a:hover {
	color: #e90f58;
}

a.lightlink {color:#88a7fa;
}

a.darklink {color:#153ca8;
}

a.darklink2 {color:#254288;
}

html {
    box-sizing: border-box;
}

body {background-color: black; }

@media only screen and (max-width: 575px) and (orientation: portrait){
body {background-color: #16264e;}} 

@media only screen and (min-width: 576px) and (orientation: portrait){
body {background-color: #16264e;}}  

@media only screen and (max-width: 1023px) and (orientation: landscape){
    body {background-color: #16264e;}}  
   
@media only screen and (min-width: 1024px) and (orientation: landscape)
{
body {background-color: #16264e;}}  
    
@media only screen and (min-width: 1366px) and (orientation: landscape) {
    body {background-color: #16264e;}}

@media only screen and (min-width: 1900px) and (orientation: landscape) {
    body {background-color: #16264e;}}

/* .maincontainer holds content below logo and above footer */
.maincontainer {
	width:98%;
	margin:auto;
	padding-bottom:40px;
    padding-left: 0px;
    padding-right: 0px;
	}

@media only screen and (min-width: 1024px) and (orientation: landscape){
    .maincontainer {
    width:95%;}}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
    .maincontainer {
	width:95%;}}

@media only screen and (min-width: 1900px) and (orientation: landscape) {
    .maincontainer {
	width:80%;}}

/* somehow prevents gap from appearing at top of page - not sure why! */
#main {
    padding: 0px;
    margin-bottom: 30px;
    padding-top: 30px;
    width:100%;
    margin:auto;
}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
    #main {
        padding: 0px;
        margin-bottom: 30px;
        padding-top: 0px;
        width:100%;
        margin:auto;
    }
}

/* Makes screen darken when navigation buttons are pressed */
#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 4;
}

#logo {
	width:100%;
    background-image: url(/bobpics/headerbackgroundstars.png);
    background-size: cover;   
    float: left;
    padding-top:0px;
    padding-bottom:0px;
    border-bottom-color: #37acef;
    border-bottom-style: solid;
    border-bottom-width: 10px;
	display: flex;
	align-items: center;
    justify-content: center;
}

#logo2 {
	width:100%;
    background-size: cover;   
    float: left;
    padding-top:0px;
    padding-bottom:0px;
    border-bottom-color: #37acef;
    border-bottom-style: solid;
    border-bottom-width: 10px;
	display: flex;
	align-items: center;
    justify-content: center;
}

.logoleftpanel {
    width:30%; 
    display: inline-block; 
    text-align: center;
    display: none;
}

.logoleftpanelimg {text-align: center; max-height: 100%; max-width: 100%;}

.logomiddlepanel {width:80%; 
    display: inline-block; 
    text-align: left;
}

.logomiddlepanelimg {text-align: center; max-height: 100%; max-width: 100%;}

.logorightpanel {width:30%; 
    display: inline-block; 
    text-align: center;
    display: none;
}

.logorightpanelimg {text-align: center; max-height: 100%; max-width: 100%;}

.menubutton {
	text-align:center;
	cursor: pointer;
	float:right;
	width:20%;
	color:black;
	font-family: 'Titillium Web', sans-serif;
	font-size:14px;
}
    
@media only screen and (min-width: 576px) and (orientation: portrait){
    .menubutton {display: none;}}

@media only screen and (max-width: 1023px) and (orientation: landscape){
#logo { 
    padding-bottom:20px;
	display: inherit;
	}}

@media only screen and (min-width: 1112px) and (orientation: landscape){
#logo { 
    padding-bottom:20px;
	display: inherit;
	}

.logoleftpanel {
    width:30%; 
    display: inline-block; 
    text-align: center;
}

.logoleftpanelimg {text-align: center; max-height: 100%; max-width: 100%;}

.logomiddlepanel {width:39%; 
    display: inline-block; 
    text-align: center;
}

.logomiddlepanelimg {text-align: center; max-height: 100%; max-width: 100%;}

.logorightpanel {width:30%; 
    display: inline-block; 
    text-align: center;   
}

.logorightpanelimg {text-align: center; max-height: 100%; max-width: 100%;}

.menubutton {display: none}}


h2 {font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-size:30px;
    letter-spacing: 1px;
    color: #000000;
    text-transform: uppercase;
}

@media only screen and (max-width: 500px) and (orientation: portrait){
h2 {
    font-size:24px;
    letter-spacing: 0px;
}}

h3 {font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size:30px;
    letter-spacing: 1px;
    color: #ffd724;
    text-transform: uppercase;}

@media only screen and (max-width: 575px) and (orientation: portrait){
    h3 {font-size:24px;}}

h4 {font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-size:26px;
    color: #0c1662;
    margin-top:20px;
    margin-bottom:10px;
}

h5 {font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-size:26px;
    color: #0c1662;
    margin-top:0px;
    margin-bottom:14px;
}

.standout {
  font-size: 120%;
    font-weight: bold;
    color:#e8402d;
}

/* dividers */
.sectiondivider {
    width: 100%;
    height: 30px;
}

.invisibledivider {
	clear:both;
    height:0px;
}

.divider10px {
    width: 100%;
    clear: both;
    height: 10px;
}

.divider20px {
    width: 100%;
    clear: both;
    height:20px;
}

.divider50px {
    width: 100%;
    clear: both;
    height:50px;
}

.hrblue0px {border: 6px dashed #37acef; margin-top:0px; margin-bottom:0px;}
.hrred0px {border: 6px dashed #e8402d; margin-top:0px; margin-bottom:0px;}
.hrorange0px {border: 6px dashed #ff6e14; margin-top:0px; margin-bottom:0px;}
.hryellow0px {border: 6px dashed #ffd724; margin-top:0px; margin-bottom:0px;}

.hrblue30px {border: 6px dashed #37acef; margin-top:30px; margin-bottom:30px;}
.hrred30px {border: 6px dashed #e8402d; margin-top:30px; margin-bottom:30px;}
.hrorange30px {border: 6px dashed #ff6e14; margin-top:30px; margin-bottom:30px;}
.hryellow30px {border: 6px dashed #ffd724; margin-top:30px; margin-bottom:30px;}


.hrblue60px {border: 6px dashed #37acef; margin-top:60px; margin-bottom:60px;}
.hrred60px {border: 6px dashed #e8402d; margin-top:60px; margin-bottom:60px;}
.hrorange60px {border: 6px dashed #ff6e14; margin-top:60px; margin-bottom:60px;}
.hryellow60px {border: 6px dashed #ffd724; margin-top:60px; margin-bottom:60px;}

.hrblue6030px {border: 6px dashed #37acef; margin-top:60px; margin-bottom:30px;}
.hrred6030px {border: 6px dashed #e8402d; margin-top:60px; margin-bottom:30px;}
.hrorange6030px {border: 6px dashed #ff6e14; margin-top:60px; margin-bottom:30px;}
.hryellow6030px {border: 6px dashed #ffd724; margin-top:60px; margin-bottom:30px;}

.hrblue3060px {border: 6px dashed #37acef; margin-top:30px; margin-bottom:60px;}
.hrred3060px {border: 6px dashed #e8402d; margin-top:30px; margin-bottom:60px;}
.hrorange3060px {border: 6px dashed #ff6e14; margin-top:30px; margin-bottom:60px;}
.hryellow3060px {border: 6px dashed #ffd724; margin-top:30px; margin-bottom:60px;}

.hrreducetopgap {margin-top:-40px;}

/* START OF MAIN SITE NAVIGATION */
/* Nav bar is situated at bottom of screen */
.navbarbottom {
    background-color: #254288;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 6;
    padding-top:15px;
    padding-bottom:15px;
    border-top-color: #37acef;
    border-top-style: solid;
    border-top-width: 10px;
}

@media only screen and (max-width: 500px) and (orientation: portrait){
.navbarbottom {
	display:none;
	position:relative;
	bottom:auto;
    border-top-width: 0px;
	}} 

/* Style the links inside the navigation bar */
.button1, .button2, .button3, .button4, .button1b, .button2b, .button3b, .button4b {
    float: left;
    display: block;
    text-align: center;
    text-decoration: none;
	padding: 10px 0px;
    background-color: #ffd724;
    -webkit-box-shadow: inset -10px -10px 0px 0px #e8bd00;
    -moz-box-shadow: inset -10px -10px 0px 0px #e8bd00;
    box-shadow: inset -10px -10px 0px 0px #e8bd00;
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    border-color: #000000;
    border-width: 2px;
    border-style: solid;
    color: black;
    transition:0.3s;
    margin-left:.5%;
    margin-right:.5%;
    width:32.3%;
}

.button1b, .button2b, .button3b, .button4b {
    display: none;
    background-color: #ff6e14;
    -webkit-box-shadow: inset -10px -10px 0px 0px #e06112;
    -moz-box-shadow: inset -10px -10px 0px 0px #e06112;
    box-shadow: inset -10px -10px 0px 0px #e06112;  
    color: #ffff14;
}


@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait) {
.button1, .button2, .button3, .button4, .button1b, .button2b, .button3b, .button4b {font-size:12px; font-weight: normal;}}   

@media only screen and (min-width: 1112px) and (orientation: landscape)
{
.button1, .button2, .button3, .button4, .button1b, .button2b, .button3b, .button4b {font-size:18px;}}  
    
@media only screen and (min-width: 1366px) and (orientation: landscape) {
.button1, .button2, .button3, .button4, .button1b, .button2b, .button3b, .button4b {font-size:24px;}}

@media only screen and (min-width: 1900px) and (orientation: landscape) {
.button1, .button2, .button3, .button4, .button1b, .button2b, .button3b, .button4b {font-size:24px;}}

.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover {
    color: white;
    transition: .1s;
    background-color: #37acef;
    -webkit-box-shadow: inset -10px -10px 0px 0px #2887be;
    -moz-box-shadow: inset -10px -10px 0px 0px #2887be;
    box-shadow: inset -10px -10px 0px 0px #2887be;
    font-family: 'Titillium Web', sans-serif;
    font-weight: bold;
    transition:0.3s;
}


.button1b:hover, .button2b:hover, .button3b:hover, .button4b:hover, .button5b:hover {
    color: white;
    transition: .1s;
    background-color: #ff6e14;
    font-family: 'Titillium Web', sans-serif;
    font-weight: bold;
    transition:0.3s;
    transform: scale(1.03);}

.sectioncontainerholder1, .sectioncontainerholder2, .sectioncontainerholder3, .sectioncontainerholder4 {
    display: none; 
    position: fixed; 
    bottom:120px;  
    z-index: 6;
    text-align: center; 
    border-radius: 25px;
    margin: 0% auto; /* Will not center vertically and won't work in IE6/7. */
    left: 0;
    right: 0;
}

.sectioncontainerholder1, .sectioncontainerholder3, .sectioncontainerholder4 {
    max-width:600px;
}

@media only screen and (min-width: 1112px) and (orientation: landscape){
    .sectioncontainerholder2 { 
        max-width:500px;}}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
    .sectioncontainerholder2 {
    max-width:600px;
}}

@media only screen and (min-width: 1900px) and (orientation: landscape) {
    .sectioncontainerholder1, .sectioncontainerholder2 {
    max-width:750px;
}}



@media only screen and (max-width: 500px) and (orientation: portrait) {
.sectioncontainerholder1, .sectioncontainerholder2, .sectioncontainerholder3, .sectioncontainerholder4 {	
	clear: both;
	display:none;
	position:relative;
	bottom:auto;
	width:100%;
}}


.navboxtitle {
    font-family: 'Strenuous', sans-serif;
    font-style: normal;
    font-weight: 400;
    max-width: 450px;
    margin:auto;
    background-color: #ffd724;
    color: black;
    letter-spacing: 0px;
    font-size:30px;
    border-color: #000000;
    border-width: 2px;
    border-style: solid;
    border-bottom-style: none;
    padding-top:10px;
    padding-bottom:10px;
    transform: skewX(-10deg);
     -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    
}

@media only screen and (min-width: 1112px) and (orientation: landscape){
    .navboxtitle {
        font-size:28px;}}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
    .navboxtitle {
        font-size:28px;}}


@media only screen and (min-width: 1900px) and (orientation: landscape) {
    .navboxtitle {
        font-size:30px;}}

.navboxtitletext{
    transform: skewX(10deg);
}

@media only screen and (max-width: 500px) and (orientation: portrait) {
    .navboxtitle {
	font-family: 'Strenuous', sans-serif;
    font-style: normal;
    font-weight: 400;
    width:100%;
    margin:auto;
    background-color: #ffd724;
    color: black;
    letter-spacing: 0px;
    font-size:16px;
    border-color: #000000;
    border-width: 2px;
    border-style: solid;
    border-bottom-style: none;
    padding-top:10px;
    padding-bottom:10px;
     -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
		transform:none;
        }

.navboxtitletext{
    transform:none;
}
}


.sectioncontainer1, .sectioncontainer2, .sectioncontainer3, .sectioncontainer4 {
    font-family: strenuous, sans-serif;
    font-style: normal;
    font-size:22px;
    padding:10px;
    display:grid;
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    grid-template-rows: auto;
    border-color: #000000;
    border-width: 2px;
    border-style: solid;
}

@media only screen and (min-width: 1112px) and (orientation: landscape){
    .sectioncontainer1, .sectioncontainer2, .sectioncontainer3, .sectioncontainer4 {
        font-size:18px;}}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
    .sectioncontainer1, .sectioncontainer2, .sectioncontainer3, .sectioncontainer4 {
        font-size:24px;}}


@media only screen and (min-width: 1900px) and (orientation: landscape) {
    .sectioncontainer1, .sectioncontainer2, .sectioncontainer3, .sectioncontainer4 {
        font-size:30px;}}

.sectioncontainer1 {
    background-color: #e8402d;
grid-template-columns: minmax(50px, 200px) minmax(50px, 200px)
                       minmax(50px, 200px) minmax(50px, 200px);}

.sectioncontainer2 {
    background-color: #ff6e14;
    grid-template-columns: minmax(50px, 200px) minmax(50px, 200px)
        minmax(50px, 200px) minmax(50px, 200px) minmax(50px, 200px);}

.sectioncontainer3 {
    background-color: #37acef;
grid-template-columns: minmax(100px, 200px) minmax(100px, 200px)
                       minmax(100px, 200px);}

.sectioncontainer4 {
    background-color: #ff36d0;
grid-template-columns: minmax(100px, 200px) minmax(100px, 200px)
                       minmax(100px, 200px);}


.sectioncontainer1 div, .sectioncontainer2 div, .sectioncontainer3 div, .sectioncontainer4 div{
    overflow: hidden;
}

@media only screen and (max-width: 500px) and (orientation: portrait) {
.sectioncontainer1, .sectioncontainer2, .sectioncontainer3, .sectioncontainer4 {
    background-color: #e8402d;
	grid-template-columns: 100%;
    grid-column-gap: 5%;
    grid-template-rows: auto;}
}

.image-item {
  background-color: white;
  padding: 0px;
  font-size: 0px;
  text-align: center;
}

@media only screen and (max-width: 500px) and (orientation: portrait) {
.image-item {
  display:none;
	}}

.gridboximage {
    max-width: 100%; 
    border: 2px solid #ffd724;
    outline: 2px solid black;
	transition: 0.3s;
}

.gridboximage:hover {
    max-width: 100%; 
    border: 2px solid #37acef;
    outline: 2px solid black;
}

a.grid-item {
  padding: 0px;
  text-align: center;
    margin-top:-7px;
    font-family: 'Titillium Web', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size:16px;
    color: white;
}

@media only screen and (min-width: 1112px) and (orientation: landscape){
    .grid-item {
        font-size:16px;}}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
    .grid-item {
        font-size:16px;}}


@media only screen and (min-width: 1900px) and (orientation: landscape) {
    .grid-item {
        font-size:16px;}}


@media only screen and (max-width: 500px) and (orientation: portrait) {
a.grid-item {
  	padding: 0px;
  	text-align: center;
    margin-top:0px;
    font-family: 'Titillium Web', sans-serif;
    font-weight:600;
    font-style: normal;
    font-size:14px;
    color: black;
	background-color: #ffd724;
    -webkit-box-shadow: inset -2px -2px 0px 0px #e8bd00;
    -moz-box-shadow: inset -2px -2px 0px 0px #e8bd00;
    box-shadow: inset -2px -2px 0px 0px #e8bd00;
	border: 2px solid black;
	}}

.innerplanetsitem {
  grid-column-start: 2;
  grid-column-end: 6;
  text-align: left;
  line-height: 28px;
  font-weight: normal;
}

@media only screen and (min-width: 1112px) and (orientation: landscape){
    .innerplanetsitem {
        line-height: 20px;}}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
    .innerplanetsitem {
        line-height: 20px;}}


@media only screen and (min-width: 1900px) and (orientation: landscape) {
    .innerplanetsitem {
        line-height: 28px;}}

@media only screen and (max-width: 500px) and (orientation: portrait) {
	.innerplanetsitem {
		display:none;}}

.outerplanetsitem {
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start:4;
  grid-row-end:5;
  text-align: left;
  line-height: 28px;
    margin-top: 10px;
    font-weight: normal;
}

@media only screen and (min-width: 1112px) and (orientation: landscape){
    .outerplanetsitem {
        line-height: 20px;
        margin-top: 6px;}}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
    .outerplanetsitem {
        line-height: 20px;
        margin-top: 6px;}}


@media only screen and (min-width: 1900px) and (orientation: landscape) {
    .outerplanetsitem {
        line-height: 28px;
        margin-top: 10px;}}

@media only screen and (max-width: 500px) and (orientation: portrait) {
	.outerplanetsitem {
		display:none;}}

.dwarfplanetsitem {
  grid-column-start: 1;
  grid-column-end: 6;
  grid-row-start:7;
  grid-row-end:8;
  text-align: left;
  line-height: 28px;
    margin-top: 10px;
    font-weight: normal;
}

@media only screen and (min-width: 1112px) and (orientation: landscape){
    .dwarfplanetsitem {
        line-height: 20px;
        margin-top: 6px;}}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
    .dwarfplanetsitem {
        line-height: 20px;
        margin-top: 6px;}}


@media only screen and (min-width: 1900px) and (orientation: landscape) {
    .dwarfplanetsitem {
        line-height: 28px;
        margin-top: 10px;}}

@media only screen and (max-width: 500px) and (orientation: portrait) {
	.dwarfplanetsitem {
		display:none;}}

.cometssitem {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start:10;
  grid-row-end:11;
  text-align: left;
  line-height: 28px;
    margin-top: 10px;
    font-weight: normal;
}

@media only screen and (min-width: 1112px) and (orientation: landscape){
    .cometssitem {
        line-height: 20px;
        margin-top: 6px;}}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
    .cometssitem {
        line-height: 20px;
        margin-top: 6px;}}


@media only screen and (min-width: 1900px) and (orientation: landscape) {
    .cometssitem {
        line-height: 28px;
        margin-top: 10px;}}

@media only screen and (max-width: 500px) and (orientation: portrait) {
	.cometssitem {
		display:none;}}


.smallbodiesitem {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start:10;
  grid-row-end:11;
  text-align: left;
  line-height: 28px;
    margin-top: 10px;
    font-weight: normal;
}

@media only screen and (min-width: 1112px) and (orientation: landscape){
    .smallbodiesitem {
        line-height: 20px;
        margin-top: 6px;}}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
    .smallbodiesitem {
        line-height: 20px;
        margin-top: 6px;}}


@media only screen and (min-width: 1900px) and (orientation: landscape) {
    .smallbodiesitem {
        line-height: 28px;
        margin-top: 10px;}}

@media only screen and (max-width: 500px) and (orientation: portrait) {
	.smallbodiesitem {
		display:none;}}

.emptyitem1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start:4;
  grid-row-end:5;
  background-color: none;
}

@media only screen and (max-width: 500px) and (orientation: portrait) {
.emptyitem1 {
  visibility:hidden;
	}}

.whitetext {color: white;}
.yellowtext {color: yellow;}

/* END OF MAIN NAVIGATION */

/* PAGE LAYOUT */

.planetspicholder {
    width:30%; float:right; text-align: right; 
}

@media only screen and (max-width: 500px) and (orientation: portrait) {
    .planetspicholder {
        width:100%; float:left; text-align: center; padding: 30px; 
    }}

.menuintrotext {
    float: left;
    width: 72%;
    margin-top:20px;
}

.maincontentcontainer {
    width:100%;
    padding-top:30px;
    clear: both;}

.maincontentcontainer p {
    clear: both;
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size:18px;
    color: white;}
    
@media only screen and (min-width: 1366px) and (orientation: landscape) {
    .maincontentcontainer p {
        font-size:20px;}}

.maincontentcontainer2 {
    width:100%;
    margin-top:0px;
    padding-bottom:0px;}

    @media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait) {    
.maincontentcontainer2 {
    margin-top:0px;
}}  

.maincontainerbreak {
    clear: both; width: 100%; height: 40px;
}

.maintextarea2 h1 {
    color: #0471af;
    display: inline-block;
    margin: 0;
    border-bottom: 5px solid #f4f4f4;
    }

.maintextarea2 {
    float:left; 
    width:73%; 
    margin-top:40px;
    border: 2px solid black;
    background-color: #f4f4f4;
    -webkit-box-shadow: inset -10px -10px 0px 0px #e8e8e8;
    -moz-box-shadow: inset -10px -10px 0px 0px #e8e8e8;
    box-shadow: inset -10px -10px 0px 0px #e8e8e8;
    padding:30px;
    padding-bottom: 0;
    clear: both;
    font-family: 'Titillium Web', sans-serif;
    position: relative;
    }

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait) {
	.maintextarea2 {
    float:left; 
    width:100%; 
    margin-top:20px;
	padding:20px;
	}}

.maintextarea2 p {
    font-family: 'Titillium Web', sans-serif;
    font-size:18px;
    line-height: 28px;
    
    }

.maintextarea2 h1 {
    color: #0471af;
    display: inline-block;
    margin: 0;
    border-bottom: 5px solid #f4f4f4;
    }

    .maintextarea3 {
        float:left; 
        width:73%; 
        margin-top:40px;
        padding:30px;
        clear: both;
        font-family: 'Titillium Web', sans-serif;
        position: relative;
        color: white;
        }
    
    @media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait) {
        .maintextarea3 {
        float:left; 
        width:100%; 
        margin-top:20px;
        padding:20px;
        }}
    
    .maintextarea3 p {
        font-family: 'Titillium Web', sans-serif;
        font-size:18px;
        line-height: 28px;
        
        }
    
    .maintextarea3 h1 {
        color: #0471af;
        display: inline-block;
        margin: 0;
        border-bottom: 5px solid #f4f4f4;
        }

/* editors */
    
.maintextarea4 h1 {
    color: #0471af;
    display: inline-block;
    margin: 0;
    border-bottom: 5px solid #f4f4f4;
    }

.maintextarea4 {
    float:left; 
    width:100%; 
    margin-top:40px;
    border: 2px solid black;
    background-color: #f4f4f4;
    -webkit-box-shadow: inset -10px -10px 0px 0px #e8e8e8;
    -moz-box-shadow: inset -10px -10px 0px 0px #e8e8e8;
    box-shadow: inset -10px -10px 0px 0px #e8e8e8;
    padding:30px;
    padding-bottom: 0;
    clear: both;
    font-family: 'Titillium Web', sans-serif;
    position: relative;
    }

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait) {
	.maintextarea4 {
    float:left; 
    width:100%; 
    margin-top:20px;
	padding:20px;
	}}

.maintextarea4 p {
    font-family: 'Titillium Web', sans-serif;
    font-size:18px;
    line-height: 28px;
    
    }

.maintextarea4 h1 {
    color: #0471af;
    display: inline-block;
    margin: 0;
    border-bottom: 5px solid #f4f4f4;
    }

.maintextarea4 h2 {
        color: black;
        display: block;
        margin-top: 10px;
        border-bottom: 5px solid #f4f4f4;
        }

.fieldbox {
    font-family: 'Titillium Web', sans-serif;
    font-size:16px;
    width: 300px;
}

select, textarea, input {
    font-family: 'Titillium Web', sans-serif;
    border: 1px solid #ccc;
    padding: 3px;
    /* Add more styles as required */
}


.editbutton {
	background-color: #ff6e14;
	padding: 5px 10px;
	margin:auto;
	color:white;
	font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
	font-size:14px;
	text-align:center;
	border:none;
    transition: 0.3s;
    cursor: pointer;
    border: 2px black solid;
    margin:5px;
    box-shadow: inset -5px -5px 0px 0px rgba(0,0,0,0.1),5px 5px 0px 0px rgba(0,0,0,0.7);
}

.editbutton:hover {
	background-color: #FFCE38;
}


    /* end of editors */

        
.pagetitle, .pagetitle2 {
    background-color: #ffd724;
    display: inline-block;
    left:0px;
    border: 4px solid black;
    padding:10px;
    padding-left:30px;
    padding-right:30px;
    transform: skewX(-10deg);
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
	animation-name: pagetitlefadein;
	animation-duration: 1s;
}

.pagetitle {
	float: left; 
    margin-top:10px;
	max-width:95%;
}

.pagetitle2 {
	position: relative;
	max-width:65%;
}

.pagetitle h1, .pagetitle2 h1 {
    font-family: strenuous, sans-serif;
    color: black;
    font-weight:normal;
    text-decoration: none;
    border-bottom: none;
    letter-spacing: 1px;
    font-size: 34px;
    transform: skewX(10deg);
    text-transform:none;
	text-align: center;
}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
.pagetitle2 {
    width:100%;
    max-width: 100%;
    background-color: #ffd724b2;
    left:0px;
    border: 4px solid black;
    padding:10px;
    padding-left:0px;
    padding-right:0px;
    transform: skewX(0deg);
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
	animation-name: pagetitlefadein;
	animation-duration: 1s;
    position: relative;
    text-align: center;
    }

.pagetitle h1, .pagetitle2 h1 {
	letter-spacing: 0px;
	font-size: 24px;
    transform: skewX(0deg);
}}

@keyframes pagetitlefadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

p.intro {
	font-style: normal;
	font-weight: bold;
    font-size:18px;
    color: black;
    line-height: 28px;
    display:block;
    margin-top:30px;
    margin-bottom:30px;
    position:relative;
}

p.intro2 {
	font-style: normal;
	font-weight: bold;
    font-size:18px;
    line-height: 28px;
    display:block;
    margin-top:30px;
    position:relative;
}

p.content {
    font-style: normal;
    font-size:18px;
    line-height: 28px;
    display:block;
    margin-top:0px;
    margin-bottom: 30px;
    position:relative;
}

p.contentbold {
    font-style: bold;
    font-size:18px;
    line-height: 28px;
    display:block;
    margin-top:0px;
    margin-bottom:30px;
    position:relative;
}

p.intro2 a {
    color: #0f99e9;
}

p.intro2 a:hover {color: #e90f58;}

.last {margin-bottom:0px !important;}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
    p.intro2 {
        font-style: normal;
        font-weight: bold;
        font-size:18px;
        color: black;
        line-height: 28px;
        display:block;
        margin-top:40px;
    }}

p.intro3 {
	font-style: normal;
	font-weight: bold;
    font-size:18px;
    color: black;
    line-height: 28px;
    display:block;
    margin-top:20px;
    position:relative;
}

.maintextareafullscreen {
    float:left;
    width:100%;
    margin-top:40px;
}


.maintextarea {
    float:left; 
    width:70%; 
    margin-top:40px;
    }

@media only screen and (max-width: 500px) and (orientation: portrait) {
.maintextarea {
    float:left; 
    width:100%; 
    }}

.bobanddogholder {
    width:100%; margin:auto;
}

.bobanddog {
    float: right; width: 20%;
    }

.mainpagegreeting {
    text-align: left;
}
    
.mainpageintro {
    float: left; width: 80%;
    }
    
@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
.bobanddogholder {
        width:60%; margin:auto;
    }

.bobanddog {
    float: left; width: 100%; margin:auto; text-align: center;
    }

.mainpagegreeting {
        text-align: center;
    }
        
.mainpageintro {
    float: left; width: 100%;
    }}

/* BOXES CONTAINING LINKS TO OTHER PARTS OF WEBSITE WITH SLANTED TEXT BOXES OVERLAID */

.menugridholder {
    float:left; 
    width:75%; 
    margin-top:20px;
}

.menugridholderfullscreen {
    float:left; 
    width:100%; 
    margin-top:20px;
}

@media only screen and (min-width: 1112px) and (orientation: landscape){
    .menuboxgrid {
    width:100%;
    display:grid;
    grid-template-columns: 45% 45%;
    grid-column-gap: 5%;
    grid-template-rows: auto;
}}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
    .menuboxgrid {
    width:100%;
    display:grid;
    grid-template-columns: 30% 30% 30%;
    grid-column-gap: 3%;
    grid-template-rows: auto;
}}

@media only screen and (max-width: 575px) and (orientation: portrait){
    .menuboxgridmain {
    width:80%;
    margin: auto;
    display:grid;
    grid-template-columns: 100%;
    grid-column-gap: 5%;
    grid-template-rows: auto;
}}

@media only screen and (min-width: 1112px) and (orientation: landscape){
    .menuboxgridmain {
    width:100%;
    display:grid;
    grid-template-columns: 30% 30% 30%;
    grid-column-gap: 5%;
    grid-template-rows: auto;
}}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
    .menuboxgridmain {
    width:100%;
    display:grid;
    grid-template-columns: 23% 23% 23% 23%;
    grid-column-gap: 3%;
    grid-template-rows: auto;
}}

.menuboxgridfullscreen {
    width:100%;
    display:grid;
    grid-template-columns: 23% 23% 23% 23%;
    grid-column-gap: 2%;
    grid-template-rows: auto;
    grid-row-gap: 2%;}

.menuboximg {
    width:100%;
    border: 2px solid #37acef;
    outline: 3px solid black;
}

a.menubox {
    width: 100%;
    position: relative;
    text-align: center;
    color: white;
    padding-top:20px;
    display: inline-block;
    opacity: 1;
    margin: 1%;
    transition: 0.3s;
}

a.menuboxright {
    width: 100%;
    position: relative;
    text-align: center;
    color: white;
    padding-top:20px;
    display: inline-block;
    opacity: 1;
    padding-bottom:30px;
}

a.menuboxright:hover {
    color: white;
    opacity: 0.7;
}

.menubox2 {
    width: 100%;
    position: relative;
    text-align: left;
    color: white;
    padding-top:20px;
    display: inline-block;
    opacity: 1;
    margin: 1%;
}

a.menubox:hover .top-left-yellow {
    transition: 0.3s;
    background-color: #37acef;
    -webkit-box-shadow: 2px 2px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #2887be;
    -moz-box-shadow: 2px 2px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #2887be;
    box-shadow: 2px 2px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #2887be;
}

a.menubox:hover .menuboximg {
    transition: 0.3s;
    border: 2px solid #ff6e14;
}

.menubox3 {
    min-height:160px; 
    padding: 20px; 
    text-align: left; 
    font-size:26px;
    color: #000;
    font-family: 'Titillium Web', sans-serif;
    font-weight: bold;
    text-transform: uppercase; 
    letter-spacing: 1px; 
    transition: 0.2s;
    -webkit-box-shadow: 10px 10px 0px 0px rgba(0,0,0,1);
    -moz-box-shadow: 10px 10px 0px 0px rgba(0,0,0,1);
    box-shadow: inset -10px -10px 5px 0px rgba(0,0,0,0.2),10px 10px 0px 0px rgba(0,0,0,0.4);
}

.menuboxyellow {border: 5px solid black; text-shadow: 2px 2px #e7dfa6; background: linear-gradient(0deg, rgba(238,196,8,1) 0%, rgba(255,215,36,1) 8%, rgba(255,215,36,1) 71%, rgba(255,236,152,1) 100%);}
.menuboxblue {border: 5px solid black; text-shadow: 2px 2px #a6d5e7;background: linear-gradient(0deg, rgba(18,131,195,1) 0%, rgba(55,172,239,1) 8%, rgba(55,172,239,1) 71%, rgba(141,213,255,1) 100%);}
.menuboxred {border: 5px solid black; text-shadow: 2px 2px #d47c7c; background: linear-gradient(0deg, rgba(190,44,27,1) 0%, rgba(232,64,45,1) 8%, rgba(232,64,45,1) 71%, rgba(249,135,122,1) 100%);}
.menuboxorange {border: 5px solid black; text-shadow: 2px 2px #f6bf89; background: linear-gradient(0deg, rgba(240,120,0,1) 0%, rgba(255,153,51,1) 8%, rgba(255,153,51,1) 71%, rgba(247,174,100,1) 100%);}
.menuboxgreen {border: 5px solid black; text-shadow: 2px 2px rgb(156, 228, 156); background: linear-gradient(0deg, rgba(82,212,82,1) 0%, rgba(102,255,102,1) 8%, rgba(102,255,102,1) 71%, rgba(131,247,131,1) 100%);}
.menuboxpink {border: 5px solid black; text-shadow: 2px 2px rgb(231, 169, 189); background: linear-gradient(0deg, rgba(219,74,123,1) 0%, rgba(255,102,153,1) 8%, rgba(255,102,153,1) 71%, rgba(252,142,179,1) 100%);}


.menubox3:hover {
    text-shadow: 0px 0px black;
    color: rgb(29, 82, 255);
}

.paragraphboxnormal {
    position: relative;
    width:100%;
}

.incontentbox {
    width:100%;
    margin-top:20px;
    padding-top:20px;
	padding-bottom:20px;
    position: relative;}

.bordered {border: 2px solid black;}

.rounded {border-radius: 15px;}

.innerboxleft {float: left; 
	width:50%; 
    padding-right:25px; 
	font-weight: normal;}

.innerboxright {float: right;
    padding-left:25px; 
	width:50%; }

.innerboxleft25 {float: left; 
	width:25%; 
	padding-right:25px;
	font-weight: normal;}

.innerboxleft75 {float: left; 
    width:75%; 
    padding-right:25px;
    font-weight: normal;}

.innerboxright25 {float: right; 
        width:25%; 
        padding-left:25px; 
        font-weight: normal;}
    
.innerboxright75 {float: right; 
        width:75%; 
        padding-left:25px; 
        font-weight: normal;}

.innerboxfull {
    float: left;
    width: 100%;
    padding: 0px 0px;
    font-weight: normal;
}

.innerboxfull2 {
    float: left;
    width: 100%;
    padding: 0px 0px;
    margin-bottom: 20px;
    font-weight: normal;
}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
    .innerboxleft , .innerboxright, .innerboxleft25, .innerboxleft75, .innerboxright25, .innerboxright75 {
        float: left; 
        width:100%; 
        padding:0px;
        padding-top:20px;
        font-weight: normal;
    }
}

/* UNIT BOX PADDING - GOES IN ORDER TOP RIGHT BOTTOM LEFT IF FOUR VALUES USED, TOP+BOTTOM, RIGHT+LEFT IF TWO VALUES USED */

.padding0 {
    padding: 0;}

/* padding1 is useful for units with a background colour with no images or full width images at bottom */ 
.padding1 {
    padding: 30px 30px 50px 30px;}

/* padding2 is useful for units with no background colour with no images */
.padding2 {
    padding: 30px 30px 30px 30px;}

/* padding3 is useful for units with a background colour with left or right images or a top full image and a title box in any position */    
.padding3 {
    padding: 50px 30px;}

/* padding4 is used for units with a background colour but with no images */
.padding4 {
    padding: 60px 30px 30px 30px;}

/* padding5 is used for units with no background colour but with images */
.padding5 {
    padding: 50px 0px 0px 0px;}


.noinnerbox {padding-top: 50px; padding-bottom: 40px; padding-left:30px; padding-right:30px;}

.bevelthick {-webkit-box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1);}

.bevelthin {
    -webkit-box-shadow: inset -5px -5px 0px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: inset -5px -5px 0px 0px rgba(0,0,0,0.1);
    box-shadow: inset -5px -5px 0px 0px rgba(0,0,0,0.1);}

.bevelthinwithshadowtransparent {    
    -webkit-box-shadow: inset -5px -5px 0px 0px rgba(0,0,0,0.1),5px 5px 0px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: inset -5px -5px 0px 0px rgba(0,0,0,0.1),5px 5px 0px 0px rgba(0,0,0,0.7);
    box-shadow: inset -5px -5px 0px 0px rgba(0,0,0,0.1),5px 5px 0px 0px rgba(0,0,0,0.7);}
    
.bevelthickwithshadowsolid {
    -webkit-box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1),5px 5px 0px 0px rgba(0,0,0,1);
    -moz-box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1),5px 5px 0px 0px rgba(0,0,0,1);
    box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1),5px 5px 0px 0px rgba(0,0,0,1);}
    
.shadowthintransparent {    
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.7);
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.7);}

.shadowthinsolid{    
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1);
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1);
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1);}

.imagecaption {
    text-align: center;
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    opacity: 0.9;
}

p.darkfont {color: black;}
p.lightfont {color: white;}
p.darkfontbold {color: black; font-weight: bold;}
p.lightfontbold {color: white; font-weight: bold;}
p.bluefont {color: #254288; font-weight: bold;}

p.lightfont a, p.lightfontbold a {color: #ffd724;}
p.lightfont a:hover, p.lightfontbold a:hover {color: #e90f58;}
p.bluefont a {color: #5687fa; font-weight: bold;}
p.bluefont a:hover {color: #e90f58; font-weight: bold;}

.darkfont {color: black;}
.lightfont {color: white;}
.darkfontbold {color: black; font-weight: bold;}
.lightfontbold {color: white; font-weight: bold;}
.bluefont {color: #254288; font-weight: bold;}
.greyfontbold {color: #37363b; font-weight: bold;}

.backgroundblue {background-color: #37acef; color: white;}
.backgrounddarkblue {background-color: #254288; color: white;}
.backgroundmidblue {background-color:#1c4388; color: white;}
.backgroundorange {background-color: #ff6e14; color: white;}
.backgroundyellow {background-color: #ffd724; color: black;}
.backgroundgrey {background-color: #908989; color: white;}
.backgroundlightgrey {background-color: #d3d2d2; color: black;}
.backgrounddarkgrey {background-color: #37363b; color: rgb(194, 194, 194);}
.backgroundred {background-color: #e8402d; color: white;}
.backgrounddarkred {background-color: #c23b2c; color: white;}
.backgroundneonorange {background-color: #FF9933; color: black;}
.backgroundneongreen {background-color:#66FF66; color: black;}
.backgroundneonpink {background-color:#FF6699; color: white;}
.backgroundneonblue {background-color:#66CCFF; color: white;}
.backgroundneonyellow {background-color:#f5d20a; color: black;}
.backgroundblack {background-color:#000000; color: rgb(194, 194, 194);}

.outlineyellow {border: 4px solid #ffd724; outline: 2px solid black;}
.outlineneongreen {border: 4px solid #cef724; outline: 2px solid black;}
.outlinegrey {border: 4px solid #908989; outline: 2px solid black;}
.outlinedarkgrey {border: 4px solid #37363b; outline: 2px solid black;}
.outlineblue {border: 4px solid #37acef; outline: 2px solid black;}
.outlineneonpink {border: 4px solid #FF6699; outline: 2px solid black;}
.outlinered {border: 4px solid #e8402d; outline: 2px solid black;}
.outlineorange {border: 4px solid #ff6e14; outline: 2px solid black;}

.backgrounddarkblueandyellow {
    background: linear-gradient(to right,
    #254288 50%, #ffd724 50%);
    color: white;
}

.backgroundredandgrey4060 {
    background: linear-gradient(to right,
    #e8402d 40%, #d3d2d2 40%);
    color: white;
}

.backgrounddarkblueandyellow4060 {
    background: linear-gradient(to right,
    #37acef 40%, #ffd724 40%);
    color: white;
}


.bevelyellowthick {-webkit-box-shadow: inset -10px -10px 0px 0px #f3c700;
    -moz-box-shadow: inset -10px -10px 0px 0px #f3c700;
    box-shadow: inset -10px -10px 0px 0px #f3c700;}

.bevelbluethick {-webkit-box-shadow: inset -10px -10px 0px 0px #2887be;
    -moz-box-shadow: inset -10px -10px 0px 0px #2887be;
    box-shadow: inset -10px -10px 0px 0px #2887be;}

.bevelredthick {-webkit-box-shadow: inset -10px -10px 0px 0px #cb3827;
    -moz-box-shadow: inset -10px -10px 0px 0px #cb3827;
    box-shadow: inset -10px -10px 0px 0px #cb3827;}

.bevelgreythick {-webkit-box-shadow: inset -10px -10px 0px 0px #797474;
    -moz-box-shadow: inset -10px -10px 0px 0px #797474;
    box-shadow: inset -10px -10px 0px 0px #797474;}

.bevelorangethick {-webkit-box-shadow: inset -10px -10px 0px 0px #de5d0e;
    -moz-box-shadow: inset -10px -10px 0px 0px #de5d0e;
    box-shadow: inset -10px -10px 0px 0px #de5d0e;}


.nobox {width:100%; display: block;}

.noboxtextareafull {
	width: 100%;
}

.noboxtextarea {
	float: right; 
	width:75%; 
	padding:20px;
}

.noboxtitle {
    display:inline-block;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:20px;
    padding-right:20px;
    font-size:26px;
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: bold;
	text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom:20px;
}

.noboximgleft {
	float: left; 
	width:25%; 
	margin-top:0px; 
	padding:20px;
}

@media only screen and (max-width: 500px) and (orientation: portrait){
.noboxtextarea {
	float: left; 
	width:100%; 
	padding:0px;
}
.noboxtitle {
	width: 100%;
	font-size:16px;
	letter-spacing: 0px;
	}

.noboximgleft {
	float: left; 
	width:100%; 
	margin-top:0px; 
	padding:0px;
}
}

.top-left {
    position: absolute;
    top: 0px;
    left: -15px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:20px;
    padding-right:20px;
    font-size:16px;
    font-family: strenuous, sans-serif;
    font-style: normal;
    font-weight: 400;
    border: 2px solid black;
    color: #000000;
    background-color: #ffd724;
    -webkit-box-shadow: 2px 2px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    -moz-box-shadow: 2px 2px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    box-shadow: 2px 2px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    transform:skewX(-10deg);
}

@media only screen and (min-width: 1112px) and (orientation: landscape){
    .top-left {
        font-size:16px;}}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
    .top-left {
        font-size:16px;}}

.top-left-text {
    transform:skewX(10deg);
}

.top-left-yellow {
    position: absolute;
    top: 0px;
    left: -15px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:20px;
    padding-right:20px;
    font-size:16px;
    font-family: strenuous, sans-serif;
    font-style: normal;
    font-weight: 400;
    border: 2px solid black;
    color: #000000;
    background-color: #ffd724;
    -webkit-box-shadow: 2px 2px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    -moz-box-shadow: 2px 2px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    box-shadow: 2px 2px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    transform:skewX(-10deg);
}

@media only screen and (min-width: 1112px) and (orientation: landscape){
    .top-left-yellow {
        font-size:16px;}}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
    .top-left-yellow {
        font-size:16px;}}

.top-left-title {
    position: absolute;
    top: -25px;
    left: -15px;
	text-align: center;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:20px;
    padding-right:20px;
    font-size:26px;
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media only screen and (max-width: 500px) and (orientation: portrait){
.top-left-title {
	font-size:16px;
	letter-spacing: 0px;
}}

.centre-title {
    width: max-content;
    min-width: 50%;
    top: -25px;
    position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:20px;
    padding-right:20px;
    font-size:26px;
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

@media only screen and (max-width: 500px) and (orientation: portrait){
.centre-title {
	font-size:16px;
	letter-spacing: 0px;
	width:80%;
}}

/* RIGHT HAND SIDE BOXES AND NAVIGATION */

.subnav {
    float: right; 
    width: 25%;
	animation-name: subnavfadein;
	animation-duration: 1.5s;
}

@keyframes subnavfadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
    .subnav {display:none;}
}

.subpagesnavtop { 
    width:100%;
    display:inline-block;
    margin-top:40px; 
    background-color: #ff6e14; 
    padding: 10px; 
    padding-left: 30px;
    padding-right: 30px;
    border-color: black; 
    border-width:2px; 
    border-style: solid;
    font-family: 'Titillium Web', sans-serif;
    text-transform: uppercase;
    font-size:28px;
    font-weight: bold;
    color: black;
}

a.subpagesnavtop:hover { 
    background-color: #ffd724;
}

.subnavatoz {
    float: right; 
    width: 25%;
	animation-name: subnavfadein;
	animation-duration: 1.5s;
}

@media only screen and (min-width: 320px) and (orientation: portrait){
.subnavatoz {
    float: left; 
    width: 100%;
	animation-name: subnavfadein;
	animation-duration: 1.5s;
	}}

.navpagetitle {
    width:100%;
    color: white;
    font-size:16px;
    font-weight: normal;
    line-height: 30px;
    font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 3px solid #2887be;
    display: block;
}

.navpagetitle:hover { 
    color:black;
    font-weight: bold;
}

.navpagetitledrop {
    width:100%;
    color: white;
    font-size:16px;
    font-weight: normal;
    line-height: 30px;
    font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 3px solid #2887be;
    display: block;
    cursor: pointer;
    transition: 0.3s;
}

.navpagetitledrop:hover { 
    color:black;
    font-weight: bold;
}

.navpagedropdownbuttons {
    width:100%;
    color: white;
    font-size:14px;
    font-weight: normal;
    line-height: 30px;
    font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
    padding-bottom: 5px;
    padding-top: 5px;
    border-bottom: 1px solid #2887be;
    display: block;
    text-indent: 20px;
}

.navpagenavpagedropdownbuttons:hover { 
    color:black;
    font-weight: bold;
}

.subpagesnav { 
    background-color: #37acef;
    padding: 30px;
    padding-top: 10px;
    padding-bottom: 40px;
    border-color: black; 
    border-width:2px; 
    border-style: solid;
    font-family: 'Titillium Web', sans-serif;
}

.menuboxhidden {
    display: none;
}

.navboxlink {
    width:100%;
    color: white;
    font-size:16px;
    font-weight: normal;
    line-height: 30px;
    font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 3px solid #2887be;
    display: block;
}

.navboxlink:hover {
    color:black;
    font-weight: bold;
}

.nodrop {
    width:100%;
}

.dropbox {
    width:100%;
    float: left;
    cursor: pointer;
    border-bottom: 3px solid #2887be;
    padding-bottom: 10px;
    padding-top: 10px;
}

.dropboxlink {
    color: white;
}


/* subpagesnav2 is used for pages with non-standard navigation, e.g. A-Z, timeline
of space exploration */
.subpagesnav2 { 
    background-color: #1c6ae8; 
    padding: 20px; 
    border-color: black; 
    border-width:2px; 
    border-style: solid;
    font-family: 'Titillium Web', sans-serif;
	margin-bottom:20px;
}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
    .subpagesnav2 {width:100%; padding: 30px;}}

.overviewfactsandstats {
    margin-top:20px; 
    clear: both; 
    border-radius: 20px;  
    position: relative;
}

.overviewfactsandstats2 {
    margin-top:20px; 
    clear: both; 
    border-radius: 20px 20px 0px 0px;
    position: relative;
}

.overviewpic {float:left; 
    width: 40%; 
    padding: 20px; 
    padding-left: 20px; 
    font-weight: normal; 
    text-align: left;}

    @media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
        .overviewpic {
            background-color:#37acef;
            float:left; 
            width: 100%; 
            padding: 20px; 
            padding-left: 20px; 
            font-weight: normal; 
            text-align: left;
            border-top-left-radius: 20px; 
            border-bottom-left-radius: 0px; 
            border-top-right-radius: 20px; 
            border-bottom-right-radius: 0px;
        }}

.overviewfacts {
    float:left; 
    width: 50%; 
    padding: 20px; 
    padding-left: 40px; 
    font-weight: normal; 
    text-align: left;
}

.overviewfactsli {
    margin-bottom: 3px;
}

.overviewstats {
    float:right;
    width: 50%; 
    padding:20px; 
    text-align: right; 
    border-top-left-radius: 0px; 
    border-bottom-left-radius: 0px; 
    border-top-right-radius: 20px; 
    border-bottom-right-radius: 20px;
}

.overviewstats2 {
    float:right;
    width: 60%; 
    padding:20px; 
    text-align: right; 
    border-top-left-radius: 0px; 
    border-bottom-left-radius: 0px; 
    border-top-right-radius: 20px; 
    border-bottom-right-radius: 20px;
}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
    .overviewstats2 {
        background-color:#ffd724;
        float:left;
        width: 100%; 
        padding:20px; 
        text-align: right; 
        border-top-left-radius: 0px; 
        border-bottom-left-radius: 20px; 
        border-top-right-radius: 0px; 
        border-bottom-right-radius: 20px;
    }}


.statsgridoverview {
    width:100%;
    display:grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    font-size:14px;
    grid-gap: 1px;
    background-color: rgb(0, 0, 0);
    outline: 2px solid rgb(0, 0, 0);
    text-align: left;
}

.statsgridleftoverview {
    background-color: #ff6e14;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
    color: rgb(255, 255, 255);
}

.statsgridleftoverviewmars {
    background-color: #c23b2c;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
    color: rgb(255, 255, 255);
}


.statsgridrightoverview {
    background-color: #ffffff;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
    color: #254288;
    font-weight: bold;
}

.keyinfocontainer {
    background-color: #ff6e14; 
    padding: 40px; 
    font-size: 16px; 
    font-weight: bold; 
    color: #000000; 
    margin-top: 40px; 
    margin-left:-50px; 
    margin-right:-50px;
    -webkit-box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1),5px 5px 0px 0px rgba(0,0,0,1);
    -moz-box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1),5px 5px 0px 0px rgba(0,0,0,1);
    box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1),5px 5px 0px 0px rgba(0,0,0,1); border-style:solid; border-color: rgb(0, 0, 0); border-width: 2px;
}

.keyinfocontainermars {background-color: #37363b; 
    padding: 40px; 
    font-size: 16px; 
    font-weight: bold; 
    color: #000000; 
    margin-top: 40px; 
    margin-left:-50px; 
    margin-right:-50px;
    -webkit-box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1),5px 5px 0px 0px rgba(0,0,0,1);
    -moz-box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1),5px 5px 0px 0px rgba(0,0,0,1);
    box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1),5px 5px 0px 0px rgba(0,0,0,1); border-style:solid; border-color: rgb(0, 0, 0); border-width: 2px;}

.keyinfobox {
    width:100%; 
    margin:auto; 
    background-color: #ffd724; 
    border-color:rgba(0,0,0,1); 
    border-style: solid; 
    border-width:5px; 
    padding: 40px; 
    border-radius: 50px; 
    position: relative;
    -webkit-box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1);
}

.keyinfoboxmars {
    width:100%; 
    margin:auto; 
    background-color: #d3d2d2; 
    border-color:rgba(0,0,0,1); 
    border-style: solid; 
    border-width:5px; 
    padding: 40px; 
    border-radius: 50px; 
    position: relative;
    -webkit-box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1);
}


.dashedunderline2 {
    border-bottom: 5px dashed; 
    padding-bottom: 3px; 
    width: 100%;
}


@media only screen and (min-width: 1366px) and (orientation: landscape) {
.menuboxgridright {
    width:100%;
    display:grid;
    grid-template-columns: 100%;
    grid-column-gap: 0%;
    grid-template-rows: auto;
}}

/* RELATED CONTENT AREA */

.relatedcontentwrapper {
    width:100%;
    background-color: #ff6e14; 
    padding-bottom: 30px;
    clear: both;
    border-top: 4px solid black;
}

.relatedcontentholder {
    width:95%; 
    margin: auto; 
    padding-top:30px;
    }

@media only screen and (max-width: 575px) and (orientation: portrait){
	.relatedcontentwrapper {
    width:100%;
    background-color: #ff6e14; 
    padding-bottom: 30px;
    clear: both;
    border-top: 4px solid black;
}}

@media only screen and (min-width: 1900px) and (orientation: landscape){
.relatedcontentholder {
    width:80%; 
    margin: auto; 
    padding-top:30px;
	}}
 
.dashedunderline {
    border-bottom: 5px dashed; 
    padding-bottom: 3px; 
    width: 50%;
}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait) {
	.dashedunderline {
    border-bottom: 5px dashed; 
    padding-bottom: 3px; 
    width: 100%;
	}}

.otherdestinationswrapper {
    width:100%; 
    background-color: #1c6ae8; 
    padding-bottom: 40px;
    border-top: 4px solid black;
}

.otherdestinationswrapper2 {
    width:100%; 
    background-color: #37acef; 
    padding-bottom: 40px;
    border-top: 4px solid black;
}


.slidercontainer {
    width:95%; 
    margin: auto; 
    padding-top:30px;
}

@media only screen and (min-width: 1900px) and (orientation: landscape) {
.slidercontainer {
    width:80%; 
    margin: auto; 
    padding-top:30px;
    }} 

.sliderpic {
    max-width:100%;
    height: auto;
    pointer-events: none;
}

.menuboxgridbottomholder{
	width:100%;
}

@media only screen and (max-width: 500px) and (orientation: portrait){
	.menuboxgridbottomholder{
	width:90%;
	margin: auto;
	}}

.menuboxgridbottom{
    max-width:100%;
    display:grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
}


@media only screen and (min-width: 1112px) and (orientation: landscape) {
.menuboxgridbottom{
    max-width:100%;
    display:grid;
    grid-template-columns: 32% 32% 32%;
    grid-column-gap: 2%;
    grid-template-rows: auto;
}}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
.menuboxgridbottom{
    max-width:100%;
    display:grid;
    grid-template-columns: 23% 23% 23% 23%;
    grid-column-gap: 2%;
    grid-template-rows: auto;
}}

/* CORPORATE AREA */

.boringstuffwrapper {
    width:100%; 
    background-color: #ffd724; 
    padding-bottom: 140px; 
    clear: both;
    border-top: 4px solid black;
}

.boringstuffholder {
    width:95%; 
    margin: auto; 
    padding-top:30px;
}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 575px) and (orientation: portrait){
	.boringstuffwrapper {
    width:100%; 
    background-color: #ffd724; 
    padding-bottom: 200px; 
    clear: both;
    border-top: 4px solid black;
}}
	

@media only screen and (min-width: 1900px) and (orientation: landscape) {
	.boringstuffholder {
    width:80%; 
    margin: auto; 
    padding-top:30px;
	}}

#sultanabarbecuebox {
	float: left;
}

.boringstufftextholder {
    width:95%; 
    margin: auto; 
    padding-top:0px; 
    clear: both;
}

@media only screen and (min-width: 1900px) and (orientation: landscape) {
	.boringstufftextholder {
    width:80%; 
    margin: auto; 
    padding-top:0px; 
    clear: both;
	}}

#sultanacopyright {
    float: left;
    color: #000000;
	font-family: 'Titillium Web', sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size:16px;
}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
#sultanacopyright {
    display:block;
	}}

.bottombarlinks {
	float:right;
}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
.bottombarlinks {
	padding-top:20px;
	clear: both;
    float:left;
	}}

.socialbox {
    float: right;    
}

a.footerbuttons {
	font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #254288;
    font-size:18px;
	margin-left:20px;
	text-decoration:none;
	transition:0.3s;
}

@media only screen and (max-width: 575px) and (orientation: portrait){
a.footerbuttons {
    font-size:16px;
	margin-left:0px;
	display:block;
	}}

@media only screen and (min-width: 576px) and (orientation: portrait){
    a.footerbuttons {
        font-size:16px;
        margin-right:20px;
        margin-left:0px;
    }}


/* images */
.imgcentre {
	text-align:center;
	margin-top:20px;
	max-width:100%;
    margin-bottom: 20px;
}

.imgcentrewide {
	text-align:center;
	margin-top:20px;
	max-width:100%;
    margin-bottom: 20px;
}

.imgcentrenarrow {
	text-align:center;
	margin-top:20px;
	max-width:100%;
    margin-bottom: 20px;
}

.imgcentrebig {
    width:70%; 
	margin: auto; 
	margin-top:20px;
}

.imgcentre100percent {
    width:100%; 
	margin: auto; 
	margin-top:20px;
    margin-bottom:20px;
}

.imgcentre80percent {
    width:80%; 
	margin: auto; 
	margin-top:20px;
    margin-bottom:20px;
}

.imgcentre70percent {
    width:70%; 
	margin: auto; 
	margin-top:20px;
    margin-bottom:20px;
}

.imgcentre60percent {
    text-align: center;
    width:60%; 
	margin: auto; 
	margin-top:20px;
    margin-bottom:20px;
}

@media only screen and (max-width: 575px) and (orientation: portrait){
    .imgcentre60percent, .imgcentre70percent {
        width:100%; 
        margin: auto; 
        margin-top:0px;
    }
}

.imghidden {
    display: none;
}

.imagedescription {
	color:black;
	font-size:14px;
	line-height:24px;
	text-align:center;
	width:100%;
	margin-bottom:20px;
}

.imgleft {
    margin-top:30px;
	float:left; 
	margin-right:15px;
    width:50%; 
}

.imgmax {
    max-width:100%;
}

.imgmaxbordered {
    max-width:100%;
    border: 2px solid black;
}

.imgleftcontainer {
	float:left; 
	width:40%;
	text-align: center;
}

.distanceimg {
	width:60%; 
	margin: auto; 
	margin-top:20px;
}

.imgsharpen {
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;}

@media only screen and (max-width: 500px) and (orientation: portrait){
	.distanceimg {
	width:100%; 
	margin: auto; 
	margin-top:40px;
	}}

.novisualsearch {
    pointer-events: none;
}

/* tables */
.planetstable {
    table-layout: fixed;
	width:100%;
	background-color:#254288;
	margin:auto;
	font-family: 'Titillium Web', sans-serif;
	font-size:16px;
    border-width:10px;
    padding-left:5px;
    padding-right:5px;
    padding-top:8px;
    padding-bottom:8px;
     border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 5px 3px; /* NOTE: syntax is <horizontal value> <vertical value> */
}

.planetstable a {color:#254288;}

.planetstablehead1, .planetstablehead2, .planetstablehead3, .planetstablehead4, .planetstablehead5, .planetstablehead6, .planetstablehead7, .planetstablehead8, .planetstablehead9, .planetstablehead10, .planetstablehead11, .planetstablehead12, .planetstablehead13, .planetstablehead14, .planetstablehead15, .planetstablehead16 {
	font-weight:normal;
	color:black;
	background-color: #ffd724;
	padding:5px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.pth1b, .pth2b, .pth3b, .pth4b, .pth5b, .pth6b, .pth7b, .pth8b, .pth9b, .pth10b, .pth11b, .pth12b, .pth13b, .pth14b, .pth15b, .pth16b {display: none;}

.planetstablehead:hover {
	background-color: #ecc721;
}

.planetstablehead1b, .planetstablehead2b, .planetstablehead3b, .planetstablehead4b, .planetstablehead5b, .planetstablehead6b, .planetstablehead7b, .planetstablehead8b, .planetstablehead9b, .planetstablehead10b, .planetstablehead11b, .planetstablehead12b, .planetstablehead13b, .planetstablehead14b, .planetstablehead15b, .planetstablehead16b {
	font-weight:normal;
	color:black;
	background-color: #ff6e14;
	padding:5px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    display:none; 
}

.planetstablehead1:hover, .planetstablehead2:hover, .planetstablehead3:hover, .planetstablehead4:hover, .planetstablehead5:hover, .planetstablehead6:hover, .planetstablehead7:hover, .planetstablehead8:hover, .planetstablehead9:hover, .planetstablehead10:hover, .planetstablehead11:hover, .planetstablehead12:hover, .planetstablehead13:hover, .planetstablehead14:hover, .planetstablehead15:hover, .planetstablehead16:hover {
    background-color: #ecc721;
}

.planetstablehead1 a, .planetstablehead4 a, .planetstablehead10 a, .planetstablehead13 a {
    color:#254288;}

.blankcell {
    background-color:#254288;
}

.planetname {
    background-color:#37acef;
	color:white;
	padding:5px;
    font-size:18px;
    letter-spacing: 1px;
	text-align:center;
    font-weight: bold;
    transition: 0.3s;
}

.planetname:hover {
    background-color:#2393d3;
	color:white;
	padding:5px;
    font-size:18px;
    letter-spacing: 1px;
	text-align:center;
    font-weight: bold;
}

.planetname1 {
    background-color:#37acef;
	color:white;
	padding:5px;
    font-size:18px;
    letter-spacing: 1px;
	text-align:center;
    font-weight: bold;
    transition: 0.3s;
}



.planetname a {
    color:white;
    font-weight: bold;
}

.planetstabledescription {
	background-color:#ffffff;
	color:#254288;
	padding:5px;
	text-align:center;
}

.planetstableenglishmeasure {
	color:#ff6e14;
}

.secretrow1, .secretrow2, .secretrow3, .secretrow4, .secretrow5, .secretrow6, .secretrow7, .secretrow8, .secretrow9, .secretrow10, .secretrow11, .secretrow12, .secretrow13, .secretrow14, .secretrow15, .secretrow16  {display:none; 
    max-height:200px;
    width:100%;
    background-color: #ff6e14 ;
    padding: 10px;
    color: white;
    position: relative;}

.windowclose {
    position: absolute;
    top:5px;
    right:10px;
    cursor: pointer;
    font-weight: bold;
}

.tableplanetdetails {
    max-height: 200px;
    display:none;
    width:100%;
    background-color: #e8402d;
    border: 2px solid black;
    color: white;
    -webkit-box-shadow: inset -5px -5px 0px 0px #cb3827;
    -moz-box-shadow: inset -5px -5px 0px 0px #cb3827;
    box-shadow: inset -5px -5px 0px 0px #cb3827;
    padding:10px;
    color: white;
}

.speaklikeascientisttitle {
  display: inline-block;
  background: #ffd724;
  transform: rotateY(20deg) skewY(-3deg);
  padding: 20px;
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #007aff;
    letter-spacing: 1px;
    font-size:26px;
    border: 6px dotted #e8402d;
    border-radius: 5px;
    position:absolute;
    top: -40px;
    left: 0px;
	-webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1);
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1);
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1);
}

.speaklikeascientistbox {
    width:100%;
    background-color: #e8402d;
    -webkit-box-shadow: inset -10px -10px 0px 0px #cb3827;
    -moz-box-shadow: inset -10px -10px 0px 0px #cb3827;
    box-shadow: inset -10px -10px 0px 0px #cb3827;
    margin-top:20px;
    padding:20px;
    padding-top:70px;
    position:relative;
    border: 4px solid #000000;
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #ffd724;
    font-size:18px;
    line-height: 28px;
    border-top-right-radius:30px;
    border-bottom-left-radius:30px;
}

@media only screen and (max-width: 500px) and (orientation: portrait){
	.speaklikeascientisttitle {
  	padding: 10px;
    color: #007aff;
    letter-spacing: 0px;
    font-size:18px;
    top: -40px;
    left: 0px;
}

.speaklikeascientistbox {
    font-size:16px;
    line-height: 26px;
	padding-top:50px;
	}}

.bottom-right-page-link, .bottom-right-page-link2 {
    position: absolute;
    font-family: 'Strenuous', sans-serif;
    font-style: normal;
    font-weight: 400;
    padding-left:20px;
    padding-right:20px;
    line-height: 35px;    
    bottom: -10px;
    right: -10px;
    font-size:20px;
    background-color: #ffd724;
    border: 2px solid black;
    color: black;
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    transition:0.3s;
    transform: skewX(-10deg);
}

.bottom-right-page-link:hover, .bottom-right-page-link2:hover {
    background-color: #37acef;
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #2887be;
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #2887be;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #2887be;
}

@media only screen and (max-width: 500px) and (orientation: portrait){
.bottom-right-page-link {
	font-size:16px;
	bottom: -30px;
	right: -5px;
}}

.bottom-right-page-link2 {   
    bottom: -25px;
    right: -25px;
}



.innerouttable {
	width:100%;
	background-color:rgb(0, 0, 0);
	margin:auto;
	font-family: 'Titillium Web', sans-serif;
	font-size:16px;
    border-width:5px;
    border-color: white;
    padding-left:3px;
    padding-right:3px;
    padding-top:3px;
    padding-bottom:3px;
}

.innerouttableold {
	width:100%;
	background-color:rgb(255, 255, 255);
	margin:auto;
	font-family: 'Titillium Web', sans-serif;
	font-size:16px;
    border-width:5px;
    border-color: white;
    padding-left:15px;
    padding-right:15px;
    padding-top:15px;
    padding-bottom:15px;
}

.inneroutergrid {
    width:100%;
    display:grid;
    grid-template-columns:50% 50%;
    background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 30px;
}

.innerouter-innertitle {background-color: #ff6e14;padding:20px; font-family: 'Titillium Web', sans-serif; font-size:20px; font-style: normal; color: black;
    font-weight: bold; border-bottom: 4px solid black; }
.innerouter-outertitle {background-color: #254288;padding:20px; font-family: 'Titillium Web', sans-serif; font-size:20px; font-style: normal; color: white;
    font-weight: bold; border-bottom: 4px solid black;}

.innerouter-innertitletext {display:inline-block;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:70px;
    padding-right:70px;
    font-size:30px;
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid black;
    color: #000000;
    background-color: #ffd724;
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.7),inset -5px -5px 0px 0px #f3c700;
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.7),inset -5px -5px 0px 0px #f3c700;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.7),inset -5px -5px 0px 0px #f3c700;
    margin-bottom:20px;
}

.innerouter-outertitletext {display:inline-block;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:70px;
    padding-right:70px;
    font-size:30px;
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid black;
    color: #ffffff;
    background-color: #37acef;
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.7),inset -5px -5px 0px 0px #2693d1;
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.7),inset -5px -5px 0px 0px #2693d1;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.7),inset -5px -5px 0px 0px #2693d1;
    margin-bottom:20px;
}


.innerboxtitle {background-color: #ffd724;
    
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size:24px;
    padding:20px;
    }

.outerboxtitle {background-color:#37acef;
    
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size:24px;
    padding:20px;
    color: white;
}

.innerboxcontent {background-color: #fff8d9;
    
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight:400;
    font-size:18px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top:20px;
    padding-bottom: 20px;
color: #254288;
}

.outerboxcontent {background-color:#cee3ef;
    
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight:400;
    font-size:18px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top:20px;
    padding-bottom: 20px;
color: #254288;
}

.weightonearth {
	display: block;
	width:10%;
 	margin: auto;
 	margin-top:5px;
  	background-color:black;
  	color:lime;
  	font-family: 'Lekton', sans-serif;
  	font-size: 30px;
  	border: thin lime solid;
  	border-radius: 5px;
  	padding:5px;
  	text-align:center;
}

.weightcalc {
	background-color: #ff6e14;
	padding: 10px 30px;
	margin:auto;
	color:white;
	font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
	font-size:20px;
	text-align:center;
	border:none;
    transition: 0.3s;
    cursor: pointer;
    border: 2px black solid;
}

.weightcalc:hover {
	background-color: #FFCE38;
}

.weighttable1,
.weighttable2,
.weighttable3,
.weighttable4,
.weighttable5
 {
	width:33%; 
	float:left;
	padding:1%;
	text-align:center;
	box-sizing: border-box;
	border:thin black solid;
	font-family: 'Strenuous', Arial, Helvetica, sans-serif;
	color:black;
	font-size:24px;
}

.weighttable1 {background-color:#FF9933}
.weighttable2 {background-color:#66FF66}
.weighttable3 {background-color:#FF6699}
.weighttable4 {background-color:#66CCFF}
.weighttable5 {background-color:rgba(245,210,10,1)}

.newweightdisplay {
	display: block;
	width:90%;
 	margin: auto;
 	margin-top:5px;
  	background-color:black;
  	color:yellow;
  	font-family: 'Lekton', sans-serif;
  	font-size: 28px;
  	border: thin lime solid;
  	border-radius: 5px;
  	padding:5px;
  	text-align:center;
}

.deskew{
    transform: skewX(10deg);
}


.glossarynavright {
    width:100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.glossaryboxa, .glossaryboxb, .glossaryboxc, .glossaryboxd, .glossaryboxe, .glossaryboxf, .glossaryboxg, .glossaryboxh, .glossaryboxi, .glossaryboxj, .glossaryboxk, .glossaryboxl, .glossaryboxm, .glossaryboxn, .glossaryboxo, .glossaryboxp, .glossaryboxq, .glossaryboxr, .glossaryboxs, .glossaryboxt, .glossaryboxu, .glossaryboxv, .glossaryboxw, .glossaryboxxyz {
    padding: 10px;
  font-size: 20px;
  text-align: center;
    font-family: strenuous, sans-serif;
    font-weight:600;
    font-style: normal;
    color: black;
    background-color: #ffd724;
    border: 2px solid black;
    cursor: pointer;
	user-select: none; 
    transition: 0.3s;
	letter-spacing: 1px;
}

.glossaryboxapressed, .glossaryboxbpressed, .glossaryboxcpressed, .glossaryboxdpressed, .glossaryboxepressed, .glossaryboxfpressed, .glossaryboxgpressed, .glossaryboxhpressed, .glossaryboxipressed, .glossaryboxjpressed, .glossaryboxkpressed, .glossaryboxlpressed, .glossaryboxmpressed, .glossaryboxnpressed, .glossaryboxopressed, .glossaryboxppressed, .glossaryboxqpressed, .glossaryboxrpressed, .glossaryboxspressed, .glossaryboxtpressed, .glossaryboxupressed, 
.glossaryboxvpressed, .glossaryboxwpressed, .glossaryboxxyzpressed {
    padding: 10px;
  font-size: 20px;
  text-align: center;
    font-family: strenuous, sans-serif;
    font-weight:600;
    font-style: normal;
    color: black;
    background-color: #ff6e14;
    border: 2px solid black;
    cursor: pointer;
	letter-spacing: 1px;
	user-select: none; 
    display:none;
}


.glossaryboxa:hover, .glossaryboxb:hover, .glossaryboxc:hover, 
.glossaryboxd:hover, .glossaryboxe:hover, .glossaryboxf:hover, 
.glossaryboxg:hover, .glossaryboxh:hover, .glossaryboxi:hover, 
.glossaryboxj:hover, .glossaryboxk:hover, .glossaryboxl:hover, 
.glossaryboxm:hover, .glossaryboxn:hover, .glossaryboxo:hover, 
.glossaryboxp:hover, .glossaryboxq:hover, .glossaryboxr:hover, 
.glossaryboxs:hover, .glossaryboxt:hover, .glossaryboxu:hover,
.glossaryboxv:hover, .glossaryboxw:hover, .glossaryboxxyz:hover {
    padding: 10px;
  font-size: 20px;
  text-align: center;
    font-family: strenuous, sans-serif;
    font-weight:600;
    font-style: normal;
    color: white;
    background-color: #37acef;
    border: 2px solid black;
    transform:scale(1.03);
	letter-spacing: 1px;
}

.atoztablea, .atoztableb, .atoztablec, .atoztabled, .atoztablee, .atoztablef, .atoztableg, .atoztableh, .atoztablei, .atoztablej, .atoztablek, .atoztablel, .atoztablem, .atoztablen, .atoztableo, .atoztablep, .atoztableq, .atoztabler, .atoztables, .atoztablet, .atoztableu, .atoztablev, .atoztablew, .atoztablexyz {
	background-color:black;
	margin:auto;
	width:100%;
	font-family: 'Titillium Web', sans-serif;
    margin-bottom:30px;
    display:none;
    border: 1px solid black;
    outline: 5px solid #254288;
}

.atozwordheader {
	background-color:#ff6e14;
	color:black;
	width:20%;
	padding:10px;
    font-size:20px;
	text-align:left;
}

.atozmeaningheader {
	background-color:#37acef;
	color:black;
	width:80%;
	padding:10px;
    font-size:20px;
	text-align:left;
}

.atozwordcontent{
	background-color:#ffd724;
	color:black;
	width:20%;
	padding:10px;
	text-align:left;
    font-size:18px;
	font-weight:bold;
}

.atozwordname {
    font-size:16px;
	font-weight:normal;
}

.atozcontent {
	background-color:#f4f4f4;
	color:#254288;
	width:80%;
	padding:10px;
    font-size:18px;
	text-align:left;
}

.selectedlettera, .selectedletterb, .selectedletterc, .selectedletterd, .selectedlettere, .selectedletterf, .selectedletterg, .selectedletterh, .selectedletteri, .selectedletterj, .selectedletterk, .selectedletterl, .selectedletterm, .selectedlettern, .selectedlettero, .selectedletterp, .selectedletterq, .selectedletterr, .selectedletters, .selectedlettert, .selectedletteru, .selectedletterv, .selectedletterw, .selectedletterxyz
{
    width:auto;
    max-width:95%;
    background-color: #ff6e14;
    display: inline-block;
    left:30px;
    border: 4px solid black;
    margin-top:10px;
    margin-left:30px;
    padding:10px;
    padding-left:30px;
    padding-right:30px;
    transform: skewX(-10deg);
    display: none;
}

.selectedlettera h1, .selectedletterb h1, .selectedletterc h1, .selectedletterd h1, .selectedlettere h1, .selectedletterf h1, .selectedletterg h1, .selectedletterh h1, .selectedletteri h1, .selectedletterj h1, .selectedletterk h1, .selectedletterl h1, .selectedletterm h1, .selectedlettern h1, .selectedlettero h1, .selectedletterp h1, .selectedletterq h1, .selectedletterr h1, .selectedletters h1, .selectedlettert h1, .selectedletteru h1, .selectedletterv h1, .selectedletterw h1, .selectedletterxyz h1 {
    font-family: strenuous, sans-serif;
    color: black;
    font-weight:normal;
    text-decoration: none;
    border-bottom: none;
    letter-spacing: 2px;
    font-size: 34px;
    transform: skewX(10deg);
    text-transform:none;
}

.showall {
	margin-top:10px;
	padding: 10px;
  font-size: 20px;
  text-align: center;
    font-family: strenuous, sans-serif;
    font-weight:600;
    font-style: normal;
    color: black;
    background-color: #ffd724;
    border: 2px solid black;
    cursor: pointer;
	user-select: none; 
    transition: 0.3s;
	letter-spacing: 1px;
}

.showallpressed {
	margin-top:10px;
    padding: 10px;
  font-size: 20px;
  text-align: center;
    font-family: strenuous, sans-serif;
    font-weight:600;
    font-style: normal;
    color: black;
    background-color: #ff6e14;
    border: 2px solid black;
    cursor: pointer;
	user-select: none; 
    display:none;
	letter-spacing: 1px;
}


.showall:hover {
    padding: 10px;
  font-size: 20px;
  text-align: center;
    font-family: strenuous, sans-serif;
    font-weight:600;
    font-style: normal;
    color: white;
    background-color: #37acef;
    border: 2px solid black;
    transform:scale(1.03);
	letter-spacing: 1px;
}

@media only screen and (max-width: 500px) and (orientation: portrait){
.glossarynavright {
    width:100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
	}


.glossaryboxa, .glossaryboxb, .glossaryboxc, .glossaryboxd, .glossaryboxe, .glossaryboxf, .glossaryboxg, .glossaryboxh, .glossaryboxi, .glossaryboxj, .glossaryboxk, .glossaryboxl, .glossaryboxm, .glossaryboxn, .glossaryboxo, .glossaryboxp, .glossaryboxq, .glossaryboxr, .glossaryboxs, .glossaryboxt, .glossaryboxu, .glossaryboxv, .glossaryboxw, .glossaryboxxyz {
    padding: 5px;
  	font-size: 14px;
	letter-spacing: 0px;
}

.glossaryboxapressed, .glossaryboxbpressed, .glossaryboxcpressed, .glossaryboxdpressed, .glossaryboxepressed, .glossaryboxfpressed, .glossaryboxgpressed, .glossaryboxhpressed, .glossaryboxipressed, .glossaryboxjpressed, .glossaryboxkpressed, .glossaryboxlpressed, .glossaryboxmpressed, .glossaryboxnpressed, .glossaryboxopressed, .glossaryboxppressed, .glossaryboxqpressed, .glossaryboxrpressed, .glossaryboxspressed, .glossaryboxtpressed, .glossaryboxupressed, 
.glossaryboxvpressed, .glossaryboxwpressed, .glossaryboxxyzpressed {
    padding: 5px;
  	font-size: 14px;
	letter-spacing: 0px;
}


.glossaryboxa:hover, .glossaryboxb:hover, .glossaryboxc:hover, 
.glossaryboxd:hover, .glossaryboxe:hover, .glossaryboxf:hover, 
.glossaryboxg:hover, .glossaryboxh:hover, .glossaryboxi:hover, 
.glossaryboxj:hover, .glossaryboxk:hover, .glossaryboxl:hover, 
.glossaryboxm:hover, .glossaryboxn:hover, .glossaryboxo:hover, 
.glossaryboxp:hover, .glossaryboxq:hover, .glossaryboxr:hover, 
.glossaryboxs:hover, .glossaryboxt:hover, .glossaryboxu:hover,
.glossaryboxv:hover, .glossaryboxw:hover, .glossaryboxxyz:hover {
    padding: 5px;
  	font-size: 14px;
	letter-spacing: 0px;
}

.atoztablea, .atoztableb, .atoztablec, .atoztabled, .atoztablee, .atoztablef, .atoztableg, .atoztableh, .atoztablei, .atoztablej, .atoztablek, .atoztablel, .atoztablem, .atoztablen, .atoztableo, .atoztablep, .atoztableq, .atoztabler, .atoztables, .atoztablet, .atoztableu, .atoztablev, .atoztablew, .atoztablexyz {
	background-color:black;
	margin:auto;
	width:100%;
	font-family: 'Titillium Web', sans-serif;
    margin-bottom:30px;
    display:none;
    border: 1px solid black;
    outline: 5px solid #254288;
}

.atozwordheader {
    font-size:16px;
}

.atozmeaningheader {
    font-size:16px;
}

.atozwordcontent{
    font-size:16px;
}

.atozcontent {
    font-size:16px;
}

.selectedlettera h1, .selectedletterb h1, .selectedletterc h1, .selectedletterd h1, .selectedlettere h1, .selectedletterf h1, .selectedletterg h1, .selectedletterh h1, .selectedletteri h1, .selectedletterj h1, .selectedletterk h1, .selectedletterl h1, .selectedletterm h1, .selectedlettern h1, .selectedlettero h1, .selectedletterp h1, .selectedletterq h1, .selectedletterr h1, .selectedletters h1, .selectedlettert h1, .selectedletteru h1, .selectedletterv h1, .selectedletterw h1, .selectedletterxyz h1 {
    letter-spacing: 1px;
    font-size: 24px;
   
}

.showall {
	padding: 5px;
  	font-size: 14px;
	letter-spacing: 0px;
}

.showallpressed {
	padding: 5px;
  	font-size: 14px;
	letter-spacing: 0px;
}


.showall:hover {
    padding: 5px;
  	font-size: 14px;
	letter-spacing: 0px;
	}}

.mobileonly {
	display: none;
}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
	.mobileonly {
	display:block;
	}}

.backtotop {
	float: left; 
    margin-top:10px;
    margin-bottom: 20px;
    width:auto;
    max-width:95%;
    left:30px;
    border: 4px solid black;
    padding:10px;
    padding-left:30px;
    padding-right:30px;
    transform: skewX(-10deg);
	background-color: #ffd724;
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
	transition: 0.3s;
	cursor: pointer;
	display: none;
}

.backtotop p {
    font-family: strenuous, sans-serif;
    color: black;
    font-weight:normal;
    text-decoration: none;
    border-bottom: none;
    letter-spacing: 1px;
    font-size: 26px;
    transform: skewX(10deg);
    text-transform:none;
}

.backtotop:hover {
	background-color: #37acef;
	-webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #2887be;
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #2887be;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #2887be;
}

.navbarmobile{
	display:none;
    font-family: 'Titillium Web', sans-serif; /* font used for the content of the drop down boxes */
    float:left;
	width:100%;
	text-transform: uppercase;
	-webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1);
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1);
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1);
}

.navbarmobile ul{
    list-style:none;
    margin:0;
    padding:0;
	width:100%;
}

.navbarmobile li{
    float:none;
    padding:0px;
    position: relative;
}
	
/* the main section titles (e.g. Planets, Sun and Moons). These aren't links, but hovering/clicking them brings up options in dropdowns */
.navbarmobile li .mobilebutton1,
.navbarmobile li .mobilebutton2,
.navbarmobile li .mobilebutton3,
.navbarmobile li .mobilebutton4,
.navbarmobile li .mobilebutton5{
	font-family: 'Strenuous', sans-serif;
    display:block;
    letter-spacing:1px;
    margin:0px;
    padding:0px 15px;
    text-decoration:none;
    transition: 0.3s;
    cursor: pointer;
	height:40px;
	line-height:40px;
    color:black;
    padding:0px 0px;
     background-color: #ffd724;
    -webkit-box-shadow: inset 0px -5px 0px 0px #f3c700;
    -moz-box-shadow: inset 0px -5px 0px 0px #f3c700;
    box-shadow: inset 0px -5px 0px 0px #f3c700;
    font-size:14px;
    text-align:center;
}


.navbarmobile li .mobilebutton1:hover,
.navbarmobile li .mobilebutton2:hover, 
.navbarmobile li .mobilebutton3:hover, 
.navbarmobile li .mobilebutton4:hover, 
.navbarmobile li .mobilebutton5:hover {
	background-color: #ff6e14;
    -webkit-box-shadow: inset -5px -5px 0px 0px #de5d0e;
    -moz-box-shadow: inset -5px -5px 0px 0px #de5d0e;
    box-shadow: inset -5px -5px 0px 0px #de5d0e;
}

/* Defines colour of the links in the submenu when top menu item is hovered */
.navbarmobile ul li:hover a{
    color:white;
    text-decoration:none;
}

.navbarmobile li ul.list1,
.navbarmobile li ul.list2,
.navbarmobile li ul.list3,
.navbarmobile li ul.list4,
.navbarmobile li ul.list5{
	background-color: #37acef;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:relative;
    left:0px;
    width:100%;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,1);	
}

.navbarmobile li:hover ul{
	display:none
}

.navbarmobile li li {
    display:block;
}

.navbarmobile li ul a{
    display:block;
    height:36px;
    font-size:14px;
    font-style:normal;
    margin:0px;
    padding:0px 0px 0px 0px;
    text-align:center;
    line-height:36px;
}

.navbarmobile li ul a:hover, .menu li ul li:hover a{
    background:blue;
    border:0px;
    color:#ffffff;
    text-decoration:none;
}


/* SECTION-SPECIFIC STYLINGS */

/* THE SUN */

.sunbeambackground {
	background-image: url(/bobpics/sunbeamback.png); 
	background-repeat: no-repeat; 
	background-size: cover;
	background-color: white;
	background-position: center;
}

.sunbackground {
    background-image: url(/bobpics/suncutout.png);
    background-repeat: no-repeat;
    background-position: right 50px top;
    background-size:30%;
}

@media only screen and (max-width: 500px) and (orientation: portrait){
	.sunbackground {
    background-image: url(/bobpics/suncutout.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size:80%;
	}}

.sunspotsformation {
    width:100%;
    display:grid;
    grid-template-columns: 32.3% 32.3% 32.3%;
    grid-column-gap: 1.5%;
    grid-template-rows: auto;
    grid-row-gap: 5px;
    margin-top:0px;
}

.sunspotsformationimagebox {
    max-width: 100%;
    margin-top:20px;
}

.sunspotsformationcontentmobile {
    display: none;
}

.sunspotsformationcontentdesktop {
    max-width: 100%;
    background-color: white;
    padding:10px;
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight:bold;
    font-size:16px;
    border: 2px solid black;
}


@media only screen and (max-width: 500px) and (orientation: portrait){
.sunspotsformation {
    width:100%;
    display:grid;
    grid-template-columns: 100%;
    grid-column-gap: 1.5%;
    grid-template-rows: auto;
    grid-row-gap: 5px;
    margin-top:40px;
}

.sunspotsformationimagebox {
    max-width: 100%;
    margin-top:20px;
}

.sunspotsformationcontentmobile {
    display: block;
	max-width: 100%;
    background-color: white;
    padding:10px;
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight:bold;
    font-size:16px;
    border: 2px solid black;
	}

.sunspotsformationcontentdesktop {
    display: none;
}
}

/* TEN FACTS ABOUT */

.tenfactscontainer {
	width:95%; 
	margin: auto;
	padding-top:20px;
}

.factbox {
	width:100%;
    margin-top:20px;
    padding:30px;
    border-radius: 25px;
    position:relative;
	-webkit-box-shadow: 10px 10px 10px 0px rgba(0,0,0,2);
    -moz-box-shadow: 10px 10px 10px 0px rgba(0,0,0,2);
    box-shadow: inset -10px -10px 10px 0px rgba(0,0,0,0.3),10px 10px 0px 0px rgba(0,0,0,0.4);
}

.factnumber {
    text-align: center;
	position: absolute;
    top: -30px;
    left: -30px;
	width: 60px;
    height: 60px;
    border-radius:30px;
	line-height: 50px;
	font-family: 'Strenuous', sans-serif;
	font-size:36px;
    color: black;
    border: 4px solid black;
    transform: rotate(-10deg);
    text-shadow: 1px 1px #949494;	
}

p.factsummary {
    font-weight: bold; 
    font-style: normal; 
	line-height:32px;
    font-size:26px;
	text-align: left;
	letter-spacing: 0px;
    display: block;
    clear: both;
    margin-bottom:20px;
}

p.facttext {
    font-weight:bold;
    font-style: normal; 
	line-height:26px;
    font-size:18px;
	text-align: justify;
	letter-spacing: 0px;
    display: block;
    clear: both;
}

.yellowborder {border: 5px solid black; text-shadow: 1px 1px #e7dfa6; background: linear-gradient(0deg, rgba(238,196,8,1) 0%, rgba(255,215,36,1) 8%, rgba(255,215,36,1) 71%, rgba(255,236,152,1) 100%);}
.blueborder {border: 5px solid black; text-shadow: 1px 1px #a6d5e7;background: linear-gradient(0deg, rgba(18,131,195,1) 0%, rgba(55,172,239,1) 8%, rgba(55,172,239,1) 71%, rgba(141,213,255,1) 100%);}
.redborder {border: 5px solid black; color: white; text-shadow: 1px 1px #4f0404; background: linear-gradient(0deg, rgba(190,44,27,1) 0%, rgba(232,64,45,1) 8%, rgba(232,64,45,1) 71%, rgba(249,135,122,1) 100%);}
.orangeborder {border: 5px solid black; text-shadow: 1px 1px #f6bf89; background: linear-gradient(0deg, rgba(240,120,0,1) 0%, rgba(255,153,51,1) 8%, rgba(255,153,51,1) 71%, rgba(247,174,100,1) 100%);}

.greenborder {border: 5px solid black; text-shadow: 1px 1px rgb(156, 228, 156); background: linear-gradient(0deg, rgba(82,212,82,1) 0%, rgba(102,255,102,1) 8%, rgba(102,255,102,1) 71%, rgba(131,247,131,1) 100%);}
.pinkborder {border: 5px solid black; text-shadow: 1px 1px rgb(231, 169, 189); background: linear-gradient(0deg, rgba(219,74,123,1) 0%, rgba(255,102,153,1) 8%, rgba(255,102,153,1) 71%, rgba(252,142,179,1) 100%);}


.yellowborder a {color: #1159ab;}
.blueborder a {color: #1159ab;}
.redborder a {color: #9ce0ff;}
.orangeborder a {color: #1159ab;}
.greenborder a {color: #1159ab;}
.pinkborder a {color: #1159ab;}


.yellow, .yellowdot {background: linear-gradient(0deg, rgba(238,196,8,1) 0%, rgba(255,215,36,1) 8%, rgba(255,215,36,1) 71%, rgba(255,236,152,1) 100%);
    -webkit-box-shadow: inset -5px -5px 0px 0px #f3c700;
    -moz-box-shadow: inset -5px -5px 0px 0px #f3c700;
    box-shadow: inset -5px -5px 5px 0px rgba(0,0,0,0.3), 5px 5px 0px 0px rgba(0,0,0,0.5);}

.blue, .bluedot {background: linear-gradient(0deg, rgba(18,131,195,1) 0%, rgba(55,172,239,1) 8%, rgba(55,172,239,1) 71%, rgba(141,213,255,1) 100%);
	-webkit-box-shadow: inset -5px -5px 0px 0px #2887be;
    -moz-box-shadow: inset -5px -5px 0px 0px #2887be;
    box-shadow: inset -5px -5px 5px 0px rgba(0,0,0,0.3), 5px 5px 0px 0px rgba(0,0,0,0.5);}

.red, .reddot {background: linear-gradient(0deg, rgba(190,44,27,1) 0%, rgba(232,64,45,1) 8%, rgba(232,64,45,1) 71%, rgba(249,135,122,1) 100%);
    -webkit-box-shadow: inset -5px -5px 0px 0px #cb3827;
    -moz-box-shadow: inset -5px -5px 0px 0px #cb3827;
    box-shadow: inset -5px -5px 5px 0px rgba(0,0,0,0.3), 5px 5px 0px 0px rgba(0,0,0,0.5);}

.orange, .orangedot {background: linear-gradient(0deg, rgba(240,120,0,1) 0%, rgba(255,153,51,1) 8%, rgba(255,153,51,1) 71%, rgba(247,174,100,1) 100%);
    -webkit-box-shadow: inset -5px -5px 0px 0px #de5d0e;
    -moz-box-shadow: inset -5px -5px 0px 0px #de5d0e;
    box-shadow: inset -5px -5px 5px 0px rgba(0,0,0,0.3), 5px 5px 0px 0px rgba(0,0,0,0.5);}

.green, .greendot {background: linear-gradient(0deg, rgba(82,212,82,1) 0%, rgba(102,255,102,1) 8%, rgba(102,255,102,1) 71%, rgba(131,247,131,1) 100%);
    -webkit-box-shadow: inset -5px -5px 0px 0px #de5d0e;
    -moz-box-shadow: inset -5px -5px 0px 0px #de5d0e;
    box-shadow: inset -5px -5px 5px 0px rgba(0,0,0,0.3), 5px 5px 0px 0px rgba(0,0,0,0.5);}

.pink, .pinkdot {background: linear-gradient(0deg, rgba(219,74,123,1) 0%, rgba(255,102,153,1) 8%, rgba(255,102,153,1) 71%, rgba(252,142,179,1) 100%); 
    -webkit-box-shadow: inset -5px -5px 0px 0px #de5d0e;
    -moz-box-shadow: inset -5px -5px 0px 0px #de5d0e;
    box-shadow: inset -5px -5px 5px 0px rgba(0,0,0,0.3), 5px 5px 0px 0px rgba(0,0,0,0.5);}   

.textrightcontainer {float:left;
width:60%;
text-align: left;}


/* 20 Largest Objects */
.twentylargestbox {
	width:100%;
    margin-top:60px;
	margin-bottom:100px;
    border: 3px solid black;
    position:relative;
	padding: 30px;
	padding-top:50px;
	border-bottom-left-radius: 20px;
	border-top-right-radius: 20px;
}

.numberboxleft {
    text-align: center;
	position: absolute;
    top: -50px;
    left: 30px;
}

.numberboxright {
    text-align: center;
	position: absolute;
    top: -50px;
    right: 30px;	
}

.imghalfsizeleft {width: 50%; float: left;}
.imghalfsizeright {width: 50%; float: right;}

@media only screen and (max-width: 575px) and (orientation: portrait){
.numberboxleft {left: 10px;}
.numberboxright {right: 10px;}
.imghalfsizeleft {width: 75%; float: left;}
.imghalfsizeright {width: 75%; float: right;}}

.classificationbox {
	text-align: center;
	float: left;
	width: 48%;
	background-color: #dddddd;
	font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight:bold;
    font-size:18px;
	padding:10px;
	border: 3px solid black;
	border-bottom-left-radius: 20px;
	border-top-right-radius: 20px;
}

.diameterbox {
	text-align: center;
	float: right;
	width: 48%;
	background-color: #dddddd;
	font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight:bold;
    font-size:18px;
	padding:10px;
	border: 3px solid black;
	border-bottom-left-radius: 20px;
	border-top-right-radius: 20px;
}

@media only screen and (max-width: 575px) and (orientation: portrait){
    .classificationbox {width: 100%;
    margin-bottom:10px;}
    .diameterbox {width: 100%;}}

.twentylargestcontentboxleft {
	width:65%;
	background-color: white;
	padding:20px;
	font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight:normal;
    font-size:18px;	
	border: 3px solid black;
	margin-top:20px;
	border-bottom-left-radius: 20px;
	border-top-right-radius: 20px;
    float: right;
}

.twentylargestcontentboxright {
	float:left;
	width:65%;
	background-color: white;
	padding:20px;
	font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight:normal;
    font-size:18px;	
	border: 3px solid black;
	margin-top:20px;
	border-bottom-left-radius: 20px;
	border-top-right-radius: 20px;
}

.twentylargestcontentboxleft {float:left;}
.twentylargestcontentboxright {float:right;}



@media only screen and (max-width: 575px) and (orientation: portrait){
.twentylargestcontentboxleft {float:left; width: 100%}
.twentylargestcontentboxright {float:left; width: 100%}
}

.twentylargestimageleft {
	margin-top:20px;
	width:30%;
	border-radius:20px;
    float:left;
}

.twentylargestimageright {
	margin-top:20px;
	width:30%;
	border-radius:20px;
    float:right;
}

.twentylargestimageleft {float:left;}
.twentylargestimageright {float:right;}


@media only screen and (max-width: 575px) and (orientation: portrait){
.twentylargestimageleft {float:left; width: 100%}
.twentylargestimageright {float:left; width: 100%}}

.twentyorangeback {background-color: #FF9933;
    -webkit-box-shadow: inset -10px -10px 0px 0px #f07c08;
    -moz-box-shadow: inset -10px -10px 0px 0px #f07c08;
	box-shadow: inset -10px -10px 0px 0px #f07c08;}
	
.twentygreenback {background-color: #66FF66;
    -webkit-box-shadow: inset -10px -10px 0px 0px #51d851;
    -moz-box-shadow: inset -10px -10px 0px 0px #51d851;
	box-shadow: inset -10px -10px 0px 0px #51d851;}

.twentypinkback {background-color: #FF6699;
    -webkit-box-shadow: inset -10px -10px 0px 0px #ff2f74;
    -moz-box-shadow: inset -10px -10px 0px 0px #ff2f74;
	box-shadow: inset -10px -10px 0px 0px #ff2f74;}

.twentyblueback {background-color: #66CCFF;
    -webkit-box-shadow: inset -10px -10px 0px 0px #3bbeff;
    -moz-box-shadow: inset -10px -10px 0px 0px #3bbeff;
	box-shadow: inset -10px -10px 0px 0px #3bbeff;}

.twentyyellowback {background-color: #f5d20a;
    -webkit-box-shadow: inset -10px -10px 0px 0px #d8ba13;
    -moz-box-shadow: inset -10px -10px 0px 0px #d8ba13;
	box-shadow: inset -10px -10px 0px 0px #d8ba13;}
	
	
.twentyorange {background-color:#FF9933}
.twentygreen {background-color:#66FF66}
.twentypink {background-color:#FF6699}
.twentyblue {background-color:#66CCFF}
.twentyyellow {background-color:#f5d20a}




.miniplanetstable {
    table-layout: fixed;
	width:100%;
	background-color:#254288;
	margin:auto;
	margin-bottom:30px;
	font-family: 'Titillium Web', sans-serif;
	font-size:14px;
    border-width:10px;
    padding-left:5px;
    padding-right:5px;
    padding-top:8px;
    padding-bottom:8px;
     border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 5px 3px; /* NOTE: syntax is <horizontal value> <vertical value> */
}

.miniplanetstable a {color:#254288;}

.miniplanetstablehead {
	font-weight:normal;
	color:black;
	background-color: #ffd724;
    -webkit-box-shadow: inset -5px -5px 0px 0px #f3c700;
    -moz-box-shadow: inset -5px -5px 0px 0px #f3c700;
    box-shadow: inset -5px -5px 0px 0px #f3c700;
	padding:5px;
    font-weight: bold;
}

.blankcell {
    background-color:#254288;
}

.miniplanetname {
    background-color:#37acef;
    -webkit-box-shadow: inset -5px -5px 0px 0px #2693d1;
    -moz-box-shadow: inset -5px -5px 0px 0px #2693d1;
    box-shadow: inset -5px -5px 0px 0px #2693d1;
	color:white;
	padding:5px;
    font-size:16px;
    letter-spacing: 1px;
	text-align:center;
    font-weight: bold;
    transition: 0.3s;
}

.miniplanetname:hover {
    background-color:#2393d3;
    -webkit-box-shadow: inset -5px -5px 0px 0px #1782bf;
    -moz-box-shadow: inset -5px -5px 0px 0px #1782bf;
    box-shadow: inset -5px -5px 0px 0px #1782bf;    
}

.miniplanetname a {
    color:white;
    font-weight: bold;
}

.miniplanetstabledescription {
	background-color:#ffffff;
    -webkit-box-shadow: inset -5px -5px 0px 0px #e6e6e6;
    -moz-box-shadow: inset -5px -5px 0px 0px #e6e6e6;
    box-shadow: inset -5px -5px 0px 0px #e6e6e6;
	color:#254288;
	padding:5px;
	text-align:center;
	font-size:14px;
}

.miniplanetstableenglishmeasure {
	color:#ff6e14;
}


/* Missions Menu */
.missionsmenuholder {
    width:100%;
    display:grid;
    grid-template-columns: 32.3% 32.3% 32.3%;
    grid-column-gap: 1.5%;
    grid-template-rows: auto;
    grid-row-gap: 15px;
}

@media only screen and (max-width: 500px) and (orientation: portrait){
.missionsmenuholder {
    width:100%;
    display:grid;
    grid-template-columns: 100%;
    grid-column-gap: 1.5%;
    grid-template-rows: auto;
    grid-row-gap: 15px;
    margin-top:40px;
}
}

.missionboxwrapper {
  	max-width:100%;
	min-height: 200px;
  	display: inline-block;
	border: 2px solid black;
	line-height: normal;
	position: relative;
}

.missionbox1,
.missionbox2 {
  	width:100%;
    margin-top:0px;
	min-height:200px;
	font-family: 'Titillium Web', sans-serif;
	font-style: normal;
	padding: 15px;
	text-transform: uppercase;
	color: black;
	transition: 0.3s;
	position: absolute;
	display: block;
}

.missionbox1 {
  	opacity: 1;
}

.nameandflag {
    font-size:20px;
	display: block;
	font-weight:bold;
	line-height: 30px;}

.missionname {
    float: left;
    max-width: 80%;
}


.missionbox2 {
  	opacity: 0;
  	font-size:16px;
	color: #e5e5e5;
	text-transform: none;
	line-height: 18px;
	display: block;
	font-weight:normal;
}

.missionboxwrapper:hover {
	background-color: #4b4b4b;
	-webkit-box-shadow: inset -10px -10px 0px 0px #414141;
    -moz-box-shadow: inset -10px -10px 0px 0px #414141;
	box-shadow: inset -10px -10px 0px 0px #414141;
}

.missionboxwrapper:hover .missionbox1 {
  opacity: 0;
}

.missionboxwrapper:hover .missionbox2 {
	opacity: 1;
}

.missiondetailsoverlay {
    position: absolute;
	bottom: 15px;
	font-family: 'Titillium Web', sans-serif;
	font-style: normal;
    font-weight:normal;
	font-size: 14px;
	color: white;
	background-color: rgba(0,0,0,0.3);
	text-align: left;
	text-transform:none;
	padding: 5px;
	width: 90%;
	border-radius: 10px;
	line-height: 20px;
}

.gobutton {
	position: absolute;
	bottom: 15px;
	right: 15px;
	font-family: 'Strenuous', sans-serif;
    font-style: normal;
    font-weight: 400;
	padding:10px;
	font-size:20px;
    background-color: #ffd724;
    border: 2px solid black;
    color: black;
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    transition:0.3s;
    transform: skewX(-10deg);
	text-align: right;
	float: right;
	text-transform:none;
}

.gobutton:hover {
    background-color: #37acef;
    border: 2px solid black;
    color: black;
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #2693d1;
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #2693d1;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #2693d1;
    transition:0.3s;
    transform: skewX(-10deg);
	text-align: right;
	float: right;
	text-transform:none;
}

.flagholder {
	position: absolute;
	top: 15px;
	right: 15px;
	float: right;
}

.flagicon {width:15%; float: right;}

.moonstable {
    table-layout: fixed;
	width:100%;
	background-color:#000000;
	margin:auto;
	margin-top:10px;
	margin-bottom:30px;
	font-family: 'Titillium Web', sans-serif;
	font-size:16px;
    border-width:10px;
    padding-left:1px;
    padding-right:1px;
    padding-top:1px;
    padding-bottom:1px;
     border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 2px 2px; /* NOTE: syntax is <horizontal value> <vertical value> */
}

.moonstable a {color:#254288;}

.moonstablehead {
	font-weight:normal;
	color:black;
	background-color: #ffd724;
	padding:5px;
    font-weight: bold;
}

.blankcell {
    background-color:#254288;
}

.moonstablename {
    background-color: whitesmoke;
	color:rgb(0, 0, 0);
	padding:5px;
    font-size:14px;
    letter-spacing: 1px;
	text-align:center;
    font-weight: bold;
}

.moonstabledescription {
	color:#000000;
	padding:5px;
	text-align:center;
	font-size:14px;
    background-color: white;
}

.moonstable tr:hover .moonstablename {
    transition: 0.3s;
    background-color: #2393d3 !important; 
}

.moonstable tr:hover .moonstablename a {
    color: white;
    font-weight: bold;
}

.moonstable tr:hover .moonstabledescription {
    transition: 0.3s;
    background-color: #37acef !important;
}

.moonstablename a {
    color:black;
    font-weight: bold;
}

.moonstablename a:hover {
    color:white;
    font-weight: bold;
}

.moonstableenglishmeasure {
	color:#b3561c;
}

.moonstable tr:hover {
    cursor: pointer;
}

.backgroundneonblue,
.backgroundneonblue .moonstablename,
.backgroundneonblue .moonstabledescription {
    background-color: #66CCFF; 
    color: black;
}

.backgroundred,
.backgroundred .moonstablename,
.backgroundred .moonstabledescription {
    background-color: #e8402d; 
    color: black;
}

.backgroundneongreen,
.backgroundneongreen .moonstablename,
.backgroundneongreen .moonstabledescription {
    background-color: #66FF66; 
    color: black;
}

.backgroundneonorange,
.backgroundneonorange .moonstablename,
.backgroundneonorange .moonstabledescription {
    background-color: #FF9933; 
    color: black;
}

.backgroundneonyellow,
.backgroundneonyellow .moonstablename,
.backgroundneonyellow .moonstabledescription {
    background-color: #f5d20a; 
    color: black;
}

.backgroundneonpink,
.backgroundneonpink .moonstablename,
.backgroundneonpink .moonstabledescription {
    background-color: #FF6699; 
    color: black;
}

.moongroupgrid {
    width:90%;
    display:grid;
    grid-template-columns: 15% 85%;
    grid-template-rows: auto;
    margin: auto;
    grid-gap: 2px;
    background-color: black;
    outline: 2px solid black;
    font-size:14px;
}

.moongroupgridleft {
    padding:10px;
    color: black;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
}

.moongroupgridright {
    padding:10px;
    color: black;
    font-weight: bold;
}

.moongroupInner, .moongroupCo-orbital, .missionoutcomefailure {background-color: #ffcccc !important;}
.moongroupGalilean, .moongroupShepherd, .missionoutcomeplanned {background-color: #f3ff85 !important;}
.moongroupUngrouped, .moongroupPortia {background-color: #ffd9f1 !important;}
.moongroupHimalia, .moongroupAlkyonides, .moongroupRetrograde, .missionoutcomeactive, .pubstatusready {background-color: rgb(228, 255, 228) !important;}
.moongroupAnanke, .moongroupMajor, .missionoutcomepartial {background-color: #fde8cd !important;}
.moongroupCarme, .moongroupInuit {background-color: #ccb0c8 !important;}
.moongroupPasiphae, .moongroupNorse, .moongroupPrograde, .missionoutcomesuccess {background-color: #bbd1ee !important;}
.moongroupG-Ring {background-color: #d8d8d8 !important;}
.moongroupGallic {background-color: #8abea0 !important;}

.moongroupnameInner, .moongroupnameCo-orbital, .missionnameoutcomefailure {background-color: #ff8383 !important;}
.moongroupnameGalilean, .moongroupnameShepherd, .missionnameoutcomeplanned {background-color:#eefd64 !important;}
.moongroupnameUngrouped, .moongroupnamePortia {background-color: #ffbbe6 !important;}
.moongroupnameHimalia, .moongroupnameAlkyonides,  .moongroupnameRetrograde, .missionnameoutcomeactive, .pubstatustitleready {background-color:#9eff9e !important;}
.moongroupnameAnanke, .moongroupnameMajor, .missionnameoutcomepartial {background-color:#ffd59f !important;}
.moongroupnameCarme, .moongroupnameInuit {background-color:#bd8ab6 !important;}
.moongroupnamePasiphae, .moongroupnameNorse, .moongroupnamePrograde, .moongroupnamenone, .missionnameoutcomesuccess {background-color:#7aabec !important;}
.moongroupnameG-Ring {background-color: #aaaaaa !important;}
.moongroupnameGallic {background-color: #599e76 !important;}

.moonstatsbox {
    margin-top:20px; 
    clear: both; 
    border-radius: 20px;  
    position: relative;
}

.moonstatspic {
    float:left; 
    width: 40%; 
    padding: 20px; 
    padding-left: 20px; 
    font-weight: normal; 
    text-align: left;
}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
    .moonstatspic {
        background-color:rgb(160, 179, 223);
        float:left; 
        width: 100%; 
        padding: 20px; 
        padding-left: 20px; 
        font-weight: normal; 
        text-align: left;
        border-top-left-radius: 20px; 
        border-bottom-left-radius: 0px; 
        border-top-right-radius: 20px; 
        border-bottom-right-radius: 0px;
    }}


.moonstats {
    float:right;
    width: 60%; 
    padding:20px; 
    text-align: right; 
    border-top-left-radius: 0px; 
    border-bottom-left-radius: 0px; 
    border-top-right-radius: 20px; 
    border-bottom-right-radius: 20px;
}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
    .moonstats {
        background-color:#90a2cc;
        float:left;
        width: 100%; 
        padding:20px; 
        text-align: right; 
        border-top-left-radius: 0px; 
        border-bottom-left-radius: 20px; 
        border-top-right-radius: 0px; 
        border-bottom-right-radius: 20px;
    }}

.moonstatsgrid {
    width:100%;
    display:grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    font-size:14px;
    grid-gap: 1px;
    background-color: rgb(0, 0, 0);
    outline: 2px solid rgb(0, 0, 0);
    text-align: left;
}

.moonstatsgridleft {
    background-color: #3f84df;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
    color: rgb(255, 255, 255);
}

.moonstatsgridright {
    background-color: #ffffff;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
    color: #254288;
    font-weight: bold;
}

.backgroundmoontwocolours4060 {
    background: linear-gradient(to right,
    rgb(160, 179, 223) 40%, #90a2cc 40%);
    color: white;
}

.backgroundmoontwocolours4060b {
    background: linear-gradient(to right,
    #1c4388 40%, #788fc5 40%);
    color: white;
}

.missionstatsbox {
    margin-top:20px; 
    clear: both; 
    border-radius: 20px;  
    position: relative;
}

.missionstatspic {
    float:left; 
    width: 40%; 
    padding: 20px; 
    padding-left: 20px; 
    font-weight: normal; 
    text-align: left;
    
}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
    .missionstatspic {
        background-color: #c2c2c2;
        float:left; 
        width: 100%; 
        padding: 20px; 
        padding-left: 20px; 
        font-weight: normal; 
        text-align: left;
        border-top-left-radius: 20px; 
    border-bottom-left-radius: 0px; 
    border-top-right-radius: 20px; 
    border-bottom-right-radius: 0px;
    }}

.missionstats {
    float:right;
    width: 60%; 
    padding:20px; 
    text-align: right; 
    border-top-left-radius: 0px; 
    border-bottom-left-radius: 0px; 
    border-top-right-radius: 20px; 
    border-bottom-right-radius: 20px;
}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
    .missionstats {
        background-color: #acacac;
        float:right;
        width: 100%; 
        padding:20px; 
        text-align: right; 
        border-top-left-radius: 0px; 
        border-bottom-left-radius: 20px; 
        border-top-right-radius: 0px; 
        border-bottom-right-radius: 20px;
    }}

.missionstatsgrid {
    width:100%;
    display:grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: auto;
    font-size:14px;
    grid-gap: 1px;
    background-color: rgb(0, 0, 0);
    outline: 2px solid rgb(0, 0, 0);
    text-align: left;
}

.missionstatsgridleft {
    background-color: #ffd724;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
    color: rgb(0, 0, 0);
}

.missionstatsgridright {
    background-color: #ffffff;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
    color: #254288;
    font-weight: bold;
}

.backgroundmissionstwocolours4060 {
    background: linear-gradient(to right,
    #c2c2c2 40%, #acacac 40%);
    color: white;
}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
    .backgroundmissionstwocolours4060 {
        background: none;
    }}


.morenavcontainer {
    background-color: #FF9933; 
    padding: 40px;
    padding-top:60px; 
    font-size: 16px; 
    font-weight: bold; 
    color: #000000; 
    margin-top: 40px; 
    margin-left:-30px; 
    margin-right:-30px;
    border-top-style: solid;
    -webkit-box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1);
}

@media only screen and (max-width: 575px) and (orientation: portrait){
.morenavcontainer {
    background-color: #FF9933;
    padding: 20px;
    padding-top:40px; 
    font-size: 14px; 
    font-weight: bold; 
    color: #000000; 
    margin-top: 40px; 
    margin-left: -30px;
    margin-right: -30px;
    border-style: solid;
    -webkit-box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    box-shadow: inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    margin:auto
}
}

.morenavbutton {
    background-color: #ffd724; 
    padding: 10px 50px; 
    float: right;
    margin-right:10px;
    font-family: 'Strenuous', sans-serif;
    font-style: normal;
    font-weight:normal;
    font-size: 24px; 
    border: 2px solid black; 
    display: block;
    cursor: pointer;
    transform:skewX(-10deg);
}

.morenavcurrentsectionlinksholder {
    width:48%; float: left;
}

@media only screen and (max-width: 575px) and (orientation: portrait){
    .morenavcurrentsectionlinksholder {
        width:100%; float: left;
    }
}

.morenavcurrentsectionlinkssubholder {
    position:relative;
    background-color: #37acef; 
    border: 2px solid black; 
    width:100%; padding: 20px;
    padding-top:30px;
    display:grid;
    grid-template-columns: 100%;
    grid-column-gap: 0%;
    grid-template-rows: auto;
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -10px -10px 0px 0px rgba(0,0,0,0.1);
}

@media only screen and (max-width: 575px) and (orientation: portrait){
    .morenavcurrentsectionlinkssubholder {
        position:relative;
        background-color: #37acef; 
        border: 2px solid black; 
        width:100%; padding: 10px;
        padding-top:30px;
        display:grid;
        grid-template-columns: 100%;
        grid-column-gap: 0%;
        grid-template-rows: auto;
        -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,1),inset -10px -10px 0px 0px rgba(0,0,0,0.1);
        -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,1),inset -10px -10px 0px 0px rgba(0,0,0,0.1);
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,1),inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    }}


a.morenavbuttons {
    font-family: 'Titillium Web', sans-serif; 
    width: 95%; 
        margin: auto; 
        padding: 5px 20px; 
        margin-bottom: 10px; 
        color: white; 
        font-weight: normal;
        border-radius: 10px;
        border-top: 5px solid rgba(255, 255, 255, 0.3); 
        border-left: 5px solid rgba(252, 252, 252, 0.3);
        border-bottom: 5px solid rgba(0,0,0,0.1); 
        border-right: 5px solid rgba(0,0,0,0.1);
}

a.morenavbuttons:hover {
    transition:0.3s;
    color: black; 
    background-color: #ffd724;
    font-weight: bold;
}

@media only screen and (max-width: 575px) and (orientation: portrait){
    a.morenavbuttons {
        font-family: 'Titillium Web', sans-serif; 
        width: 98%; 
            margin: auto; 
            padding: 5px 10px; 
            margin-bottom: 10px; 
            color: white; 
            font-weight: normal;
            border-radius: 10px;
            border-top: 5px solid rgba(255, 255, 255, 0.3); 
            border-left: 5px solid rgba(252, 252, 252, 0.3);
            border-bottom: 5px solid rgba(0,0,0,0.1); 
            border-right: 5px solid rgba(0,0,0,0.1);
    }
    
    a.morenavbuttons:hover {
        transition:0.3s;
        color: black; 
        background-color: #ffd724;
        font-weight: bold;
    }}

.morenavcurrentsectiontitle {
    background-color: #ffd724; 
        padding: 10px 50px; 
        float: left;
        margin-right:0px;
        font-family: 'Strenuous', sans-serif;
        font-style: normal;
        font-weight:normal;
        font-size: 24px; 
        border: 2px solid black; 
        display: block;
        transform:skewX(-10deg);
        top: -40px;
        left: -20px;
        position:absolute;
        -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
        -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
        box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
}

@media only screen and (max-width: 575px) and (orientation: portrait){
    .morenavcurrentsectiontitle {
        background-color: #ffd724; 
            padding: 10px 20px; 
            float: left;
            margin-right:0px;
            font-family: 'Strenuous', sans-serif;
            font-style: normal;
            font-weight:normal;
            font-size: 14px; 
            border: 2px solid black; 
            display: block;
            transform:skewX(-10deg);
            top: -30px;
            left: -10px;
            position:absolute;
            -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
            -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
            box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    }}


.morenavrelatedsectionholder {
    width:48%; float: right;
}

@media only screen and (max-width: 575px) and (orientation: portrait){
    .morenavrelatedsectionholder {
        width:100%; float: left;
    }}

.morenavrelatedsectionlinkssubholder {
    position:relative;
    background-color: #e8402d; 
    border: 2px solid black; 
    width:100%; padding: 20px;
    padding-top:30px;
    display:grid;
    grid-template-columns: 100%;
    grid-column-gap: 0%;
    grid-template-rows: auto;
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -10px -10px 0px 0px rgba(0,0,0,0.1);
}

@media only screen and (max-width: 575px) and (orientation: portrait){
    .morenavrelatedsectionlinkssubholder {
        margin-top:40px;
        position:relative;
        background-color: #e8402d; 
        border: 2px solid black; 
        width:100%; padding: 10px;
        padding-top:30px;
        display:grid;
        grid-template-columns: 100%;
        grid-column-gap: 0%;
        grid-template-rows: auto;
        -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,1),inset -10px -10px 0px 0px rgba(0,0,0,0.1);
        -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,1),inset -10px -10px 0px 0px rgba(0,0,0,0.1);
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,1),inset -10px -10px 0px 0px rgba(0,0,0,0.1);
    }
}    

.morenavrelatedsectiontitle {
    background-color: #ffd724; 
            padding: 10px 50px; 
            float: right;
            margin-right:0px;
            font-family: 'Strenuous', sans-serif;
            font-style: normal;
            font-weight:normal;
            font-size: 24px; 
            border: 2px solid black; 
            display: block;
            cursor: pointer;
            transform:skewX(-10deg);
            top: -40px;
            right: -20px;
            position:absolute;
            -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
            -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
            box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
}

@media only screen and (max-width: 575px) and (orientation: portrait){
    .morenavrelatedsectiontitle {
    background-color: #ffd724; 
    padding: 10px 20px; 
    float: left;
    margin-right:0px;
    font-family: 'Strenuous', sans-serif;
    font-style: normal;
    font-weight:normal;
    font-size: 14px; 
    border: 2px solid black; 
    display: block;
    cursor: pointer;
    transform:skewX(-10deg);
    top: -30px;
    left: -10px;
    right:unset;
    position:absolute;
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,1),inset -5px -5px 0px 0px #f3c700;
}}

.morenavbutton:hover {
    background-color: #37acef;
    color: white;
    transition:0.3s;
}

.morenavbuttonpressed {
    background-color: #ff6e14; 
    padding: 10px 50px; 
    float: right;
    margin-right:10px;
    font-family: 'Strenuous', sans-serif;
    font-style: normal;
    font-weight:normal;
    font-size: 24px; 
    border: 2px solid black; 
    display: none;
    transition:0.3s;
    color: black;
    cursor: pointer;
    transform:skewX(-10deg);
}

.morenavbuttonpressed:hover {
    transition:0.3s;
    transform: scale(1.03);
    color: white;
    transform:skewX(-10deg);
}


.morenavholder {
    display:none;
    clear: both; 
    width:100%;
}

.morenavlinksholder { 
    background-color: #37acef; 
    border: 2px solid black; 
    width:100%; padding: 20px;
    display:grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 0%;
    grid-template-rows: auto;
}

a.morenavlinks {
    font-family: 'Titillium Web', sans-serif; 
    width: 95%; 
    margin: auto; 
    padding: 20px 20px; 
    margin-bottom: 10px; 
    color: white; 
    font-weight: normal;
    border-radius: 10px;
    border-top: 5px solid rgba(255, 255, 255, 0.3); 
    border-left: 5px solid rgba(252, 252, 252, 0.3);
    border-bottom: 5px solid rgba(0,0,0,0.1); 
    border-right: 5px solid rgba(0,0,0,0.1);
}

a.morenavlinks:hover {
    transition:0.3s;
    color: black; 
    background-color: #ffd724;
    font-weight: bold;
}

.moredeskew{
    transform: skewX(10deg);
}

@media only screen and (max-width: 575px) and (orientation: portrait), only screen and (min-width: 576px) and (orientation: portrait){
    .morenavbutton {
        background-color: #ffd724; 
        padding: 10px 20px; 
        float: right;
        margin-right:10px;
        font-family: 'Strenuous', sans-serif;
        font-style: normal;
        font-weight:normal;
        font-size: 20px; 
        border: 2px solid black; 
        display: block;
        cursor: pointer;
        transform:skewX(0deg);
        width:100%;
        max-width: 100%;
        text-align: center;
    }
    
    .morenavbutton:hover {
        background-color: #37acef;
        color: white;
        transition:0.3s;
    }}
    
    .morenavbuttonpressed {
        background-color: #ff6e14; 
        padding: 10px 20px; 
        float: right;
        margin-right:10px;
        font-family: 'Strenuous', sans-serif;
        font-style: normal;
        font-weight:normal;
        font-size: 20px; 
        border: 2px solid black; 
        display: none;
        transition:0.3s;
        color: black;
        cursor: pointer;
        transform:skewX(0deg);
        width:100%;
        max-width: 100%;
        text-align: center;
    }
    
    .morenavbuttonpressed:hover {
        transition:0.3s;
        transform: scale(1.03);
        color: white;
        transform:skewX(0deg);
        width:100%;
        max-width: 100%;
        text-align: center;
    }
    
    
    .morenavholder, .mobilelinksholder {
        display:none;
        clear: both; 
        width:100%;
    }

    .morenavlinksholder {
        font-family: 'Titillium Web', sans-serif; 
        background-color: #37acef; 
        border: 2px solid black; 
        width:100%; padding: 20px;
        display:grid;
        grid-template-columns: 100%;
        grid-column-gap: 0%;
        grid-template-rows: auto;
    }
    
    a.morenavlinks {
        width: 95%; 
        margin: auto; 
        padding: 5px 10px; 
        margin-bottom: 5px; 
        color: white; 
        font-weight: normal;
        border-radius: 10px;
        border-top: 5px solid rgba(255, 255, 255, 0.3); 
        border-left: 5px solid rgba(252, 252, 252, 0.3);
        border-bottom: 5px solid rgba(0,0,0,0.1); 
        border-right: 5px solid rgba(0,0,0,0.1);
    }

    a.morenavlinks:hover {
        transition:0.3s;
        color: black; 
        background-color: #ffd724;
        font-weight: bold;
    }


.dropdownarrow, .dropdownarrowmore {
    display: inline-block;
}

.rotated {
    color: rgb(185, 4, 4);
    transform: rotate(-180deg);
    -ms-transform: rotate(-180deg); /* IE 9 */
    -moz-transform: rotate(-180deg); /* Firefox */
    -webkit-transform: rotate(-180deg); /* Safari and Chrome */
    transition: .3s;
  }

.rotated2 {
    transform: rotate(0deg);
    transition: .3s;
}

.mobilenavbutton {
    width: 100%;
    text-align: center;
    display: inline-block;
    font-family: 'Strenuous', sans-serif;
    letter-spacing:1px;
    margin:0px;
    padding:0px 15px;
    text-decoration:none;
    transition: 0.3s;
    cursor: pointer;
	height:40px;
	line-height:40px;
    color:black;
    padding:0px 0px;
     background-color: #ff6e14;
    -webkit-box-shadow: inset -5px -5px 0px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: inset -5px -5px 0px 0px rgba(0,0,0,0.1);
    box-shadow: inset -5px -5px 0px 0px rgba(0,0,0,0.1);
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: black;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: black;
    font-size:14px;
}


/* Start of carousel */

.mySlides {
    display: none
  }

  .carouselimg {
    vertical-align: middle;
  }

  .slideshow-container {
    max-width: 100%;
    position: relative;
    margin: auto;
  }

  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 10px;
    margin-top: -22px;
    color: #ffd724;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }

  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

  /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }

  /* Next & previous buttons for Solar System Formation page */
  .prevform,
  .nextform {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 10px;
    margin-top: -22px;
    color: #ffd724;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }

  /* Position the "next button" to the right */
  .nextform {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

  /* On hover, add a black background color with a little bit see-through */
  .prevform:hover,
  .nextform:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }

  /* Caption text */
  .slideshowtextbox {
    width: 95%; 
    background:#ffd724; 
    color:black; 
    padding:10px; 
    border: 2px solid black; 
    margin:auto;
  }


  .text {
    color: black;
    font-size: 15px;
    padding: 8px 12px;
    position: relative;
    bottom: 8px;
    width: 100%;
    text-align: center;
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight:bold;
    font-size:16px;
  }

  /* Number text (1/3 etc) */
  .numbertext {
    color: #ffffff;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }

  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #ffd724;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active,
  .dot:hover {
    background-color: #ff6e14;
  }
  /* Fading animation */
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1s;
    animation-name: fade;
    animation-duration: 1s;
  }
  @-webkit-keyframes fade {
    from {
      opacity: .4
    }
    to {
      opacity: 1
    }
  }
  @keyframes fade {
    from {
      opacity: .4
    }
    to {
      opacity: 1
    }
  }
  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 600px) {
    .prev,
    .next,
    .text {
      font-size: 8px
    }
  }

  
/* End of carousel */


.moonnav {
    width:30%; 
    float:right; 
    text-align: right;
    margin-right:20px;
}

a.arrow{
    position: relative;
    width:32%;
    background-color: #37acef;
    height: 40px;
    line-height: 40px;
    text-align:center;
    color:#fff;
    display:inline-block;
    font-weight: normal;
  }

  .arrowmiddle{
    position: relative;
    width:32%;
    background-color: #ffd724;
    height: 40px;
    line-height: 40px;
    text-align:center;
    color:#000;
    display:inline-block;
    font-weight: bold;
  }
  
  /*right arrow*/
  
  .arrow-right:after{
      content: "";
      position: absolute;
      right: -20px;
      top: 0;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 20px solid #37acef;;
      display:inline-block;
      transition: 0.3s;
  }
  
  /*left arrow*/
  
  .arrow-left:before{
      content: "";
      position: absolute;
      left: -20px;
      top: 0;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-right: 20px solid #37acef;
      display:inline-block;
      transition: 0.3s;
  }

  .arrow:hover {
    position: relative;
    width:32%;
    background-color: #ff6e14;
    height: 40px;
    line-height: 40px;
    text-align:center;
    color: black;
    display:inline-block;
    transition: 0.3s;
    font-weight: bold;
  }

.arrow-left:hover:before {
    border-right: 20px solid #ff6e14;
    transition: 0.3s;
  }

.arrow-right:hover:after {
    border-left: 20px solid #ff6e14;
    transition: 0.3s;
  }

.aboutlinkboxholder {
    display:grid; 
    grid-column-gap: 3%;  
    grid-template-columns: 5fr 5fr;
    grid-row-gap: 6%;
    position: relative;
}

@media only screen and (max-width: 575px) and (orientation: portrait){
.aboutlinkboxholder {
    grid-template-columns: 1fr;
    grid-row-gap: 5%;
}}

a.aboutlinkbox {
    float: left; 
    font-family: 'Titillium Web', sans-serif;
    min-height: 200px; 
}

.aboutlinktitle { 
    text-align: center; 
    margin:auto;
    font-size:26px;
    padding: 10px;
    font-weight: bold;
    background-color: #ff6e14;
    transition: 0.3s;
    border-width: 2px 2px 0px 2px;
    border-style: solid;
    border-color: #000000;
}

.aboutlinkcontent {
    min-height: 200px;  
    text-align: left; 
    margin:auto;
    padding: 15px;
    font-size:18px;
    font-weight: normal;
    background-color: #ffd724;
    transition: 0.3s; 
    border-width: 0px 2px 2px 2px;
    border-style: solid;
    border-color: #000000;
}

a.aboutlinkbox:hover .aboutlinktitle {
    background-color: #FF9933;
}

a.aboutlinkbox:hover .aboutlinkcontent {
    background-color: #f7ec6d;
}

a.emailerrorbutton {
    width:100%; 
    text-align: centre; 
    background-color: #ff6e14;
    color: black;
    display:block;
    padding:20px;
    font-family: 'Titillium Web', sans-serif;
    font-size: 26px;
}

a.emailerrorbutton:hover {
    width:100%;
    text-align: centre;
    background-color: #ffd724; 
    display:block;
}

.socialsholder {
    width: 70%;
    margin: auto;
    display:grid; 
    grid-column-gap: 3%;  
    grid-template-columns: 3.3fr 3.3fr 3.3fr;
    grid-row-gap: 6%;
    position: relative;
}

@media only screen and (max-width: 575px) and (orientation: portrait){
.socialsholder {
    grid-template-columns: 1fr;
    grid-row-gap: 5%;
}}

a.sociallinkbox {
    float: left; 
    font-family: 'Titillium Web', sans-serif;
    min-height: 200px; 
}

.sociallinktitle { 
    text-align: center; 
    margin:auto;
    font-size:26px;
    padding: 10px;
    font-weight: bold;
    background-color: #37acef;
    color: black;
    transition: 0.3s;
    border-width: 2px 2px 0px 2px;
    border-style: solid;
    border-color: #000000;
}

.sociallinkcontent {
    min-height: 200px;  
    text-align: left; 
    margin:auto;
    padding: 15px;
    font-size:18px;
    font-weight: normal;
    background-color: white;
    transition: 0.3s; 
    border-width: 0px 2px 2px 2px;
    border-style: solid;
    border-color: #000000;
}

a.sociallinkbox:hover .sociallinktitle {
    background-color: #FF9933;
}

a.sociallinkbox:hover .sociallinkcontent {
    background-color: #f7ec6d;
}

.missionsgrid {
    display:grid;  
    grid-template-columns: 20fr 15fr 15fr 15fr 30fr 5fr;
    grid-gap: 2px;
    background-color:#000;
    outline: 2px solid black;
    align-items: stretch;
    font-size:14px;
}

.missionsgridheader {
    font-weight:normal;
	color:black;
	background-color: #ffd724;
	padding:5px;
    font-weight: bold;
    padding:10px;
    text-align: center;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.missionsgridmissionname {
    padding:10px;
    color: black;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
  align-items: center;
  justify-content: center;
  background-color:rgb(228, 255, 228);
}

.missionsgridmissioninfo {
    padding:10px;
    color: black;
    display: flex;
    align-items: center;
    background-color: white;
}

.box1950s, .box1960s, .box1970s, .box1980s, .box1990s, .box2000s, .box2010s, .box2020s, .box2030s, .boxoldtonew, .boxnewtoold {
    width: 100%;
}

.boxoldtonew {
    display: none;
}

.showfiltersholder {
    height:40px;
    z-index: 2;
    position: sticky;
    top: 0px;
    margin-left:-10px;
    margin-right:-10px;
    background: rgb(244,244,244);
    display: none;
}

.showfiltersbutton {
    float:right;
    padding: 3px;
    font-size: 12px;
    text-align: center;
    font-family: 'Titillium Web', sans-serif;
    font-weight:600;
    font-style: normal;
    color: black;
    background-color: #37acef;
    cursor: pointer;
	user-select: none; 
    transition: 0.3s;
	letter-spacing: 1px;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding:5px;
    padding-left:20px;
    padding-right:20px;
    border: 2px solid black;
    background-color: #37acef;
}

.oldesttomostrecentbutton {
    float:left;
    padding: 3px;
    font-size: 12px;
    text-align: center;
    font-family: 'Titillium Web', sans-serif;
    font-weight:600;
    font-style: normal;
    color: black;
    background-color: #37acef;
    cursor: pointer;
	user-select: none; 
    transition: 0.3s;
	letter-spacing: 1px;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding:5px;
    padding-left:20px;
    padding-right:20px;
    border: 2px solid black;
    background-color: #908989;
    margin-right:5px;
}

.mostrecenttooldestbutton {
    float:left;
    padding: 3px;
    font-size: 12px;
    text-align: center;
    font-family: 'Titillium Web', sans-serif;
    font-weight:600;
    font-style: normal;
    color: black;
    background-color: #37acef;
    cursor: pointer;
	user-select: none; 
    transition: 0.3s;
	letter-spacing: 1px;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding:5px;
    padding-left:20px;
    padding-right:20px;
    border: 2px solid black;
    background-color: #ffd724;
    margin-right:5px;
}

.showfiltersbutton:hover {
    background-color: #ff6e14;
}

.showfiltersbutton2 {
    float:right;
    padding: 3px;
    font-size: 12px;
    text-align: center;
    font-family: 'Titillium Web', sans-serif;
    font-weight:600;
    font-style: normal;
    color: black;
    background-color: #37acef;
    cursor: pointer;
	user-select: none; 
    transition: 0.3s;
	letter-spacing: 1px;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding:5px;
    padding-left:20px;
    padding-right:20px;
    border: 2px solid black;
    background-color: #37acef;
    display: none;
}

.resetbutton {
    float:right;
    font-size: 12px;
    text-align: center;
    font-family: 'Titillium Web', sans-serif;
    font-weight:600;
    font-style: normal;
    color: black;
    background-color: #37acef;
    cursor: pointer;
    transition: 0.3s;
	letter-spacing: 1px;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding:5px;
    padding-left:20px;
    padding-right:20px;
    border: 2px solid black;
    background-color: #37acef;
}

.showfiltersbutton2:hover, .resetbutton:hover {
    background-color: #ffd724;
}

.filterscontainer {
    width: 100%; 
    padding: 20px 10px;  
    border-style: solid; 
    border-color: #254288; 
    border-width: 10px; 
    border-radius: 30px; 
    background-color:rgba(255, 255, 255, 0.9); 
    position: relative;
    display: none;
    z-index: 5;
    position: sticky;
    top: 20px;
}

.filterscontainer2 {
    width: 33%; 
    float: right;
    padding: 20px 10px;  
    border-style: solid; 
    border-color: #254288; 
    border-width: 10px; 
    border-radius: 30px; 
    background-color:rgba(255, 255, 255, 0.9); 
    position: relative;
    display: none;
    z-index: 5;
    position: sticky;
    top: 20px;
}

.filterscontainer3 {
    width: 100%; 
    padding: 20px 10px;  
    border-style: solid; 
    border-color: #254288; 
    border-width: 10px; 
    border-radius: 30px; 
    background-color:rgba(255, 255, 255, 0.9); 
    position: relative;
    z-index: 5;
    top: 20px;
    margin-bottom: 40px;
}

.filterscontainer4 {
    width: 33%; 
    float: right;
    padding: 20px 10px;  
    border-style: solid; 
    border-color: #254288; 
    border-width: 10px; 
    border-radius: 30px; 
    background-color:pink;
    position: relative;
    z-index: 5;
    position: sticky;
    top: 20px;
}

.filtertopic {
    width:40%; 
    float: left; 
    display: flex; 
    padding: 5px;
    font-size: 12px;
    text-align: center;
    font-family: 'Titillium Web', sans-serif;
    font-weight:600;
    font-style: normal;
    color: black; 
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    clear: both;
}

.filterhide {
    width:29.5%; float: left; margin-right:0.5%;
}

.filtershow {
    width:29.5%; float: left; margin-right:0.5%;
}

.filterhide50 {
    margin-left:10%; width:39.5%; float: left; margin-right:0.5%; bottom:20px;
}

.filtershow50 {
    width:39.5%; float: left; margin-right:0.5%; bottom:20px;
}

.filtertopicblank {
    width:100%; 
    float: left; 
    display: flex; 
    height: 50px;
    clear: both;
}

.filterbutton {
    padding: 3px;
    font-size: 12px;
    text-align: center;
    font-family: 'Titillium Web', sans-serif;
    font-weight:600;
    font-style: normal;
    color: black;
    border: 2px solid black;
    cursor: pointer;
	user-select: none; 
	letter-spacing: 1px;
    align-items: center;
    justify-content: center;
    
}

.showon1950, .showon1960, .showon1970, .showon1980, .showon1990, .showon2000, .showon2010, .showon2020, .showon2030, .showonvenus, .showonsuccess, .showonall, .showondecades, .showondestinations, .showonoutcomes,
.hideon1950, .hideon1960, .hideon1970, .hideon1980, .hideon1990, .hideon2000, .hideon2010, .hideon2020, .hideon2030, .hideonvenus, .hideonsuccess, .hideonall, .hideondecades, .hideondestinations, .hideonoutcomes,
.showonsun, .showonmercury, .showonvenus, .showonearth, .showonmars, .showonjupiter, .showonsaturn, .showonuranus, .showonneptune, .showonpluto, .showonthemoon, .showonmoons, .showoncomets, .showonasteroids, .showondeepspace,
.hideonsun, .hideonmercury, .hideonvenus, .hideonearth, .hideonmars, .hideonjupiter, .hideonsaturn, .hideonuranus, .hideonneptune, .hideonpluto, .hideonthemoon, .hideonmoons, .hideoncomets, .hideonasteroids, .hideondeepspace,
.showonactive, .showonsuccess, .showonfailure, .showonpartial, .showonplanned,
.hideonactive, .hideonsuccess, .hideonfailure, .hideonpartial, .hideonplanned
{
    background-color: #ffd724;
}

.showoff1950, .showoff1960, .showoff1970, .showoff1980, .showoff1990, .showoff2000, .showoff2010, .showoff2020, .showoff2030, .showoffvenus, .showoffsuccess, .showoffall, .showoffdecades, .showoffdestinations, .showoffoutcomes,
.hideoff1950, .hideoff1960, .hideoff1970, .hideoff1980, .hideoff1990, .hideoff2000, .hideoff2010, .hideoff2020, .hideoff2030, .hideoffvenus, .hideoffsuccess, .hideoffall, .hideoffdecades, .hideoffdestinations, .hideoffoutcomes,
.showoffsun, .showoffmercury, .showoffvenus, .showoffearth, .showoffmars, .showoffjupiter, .showoffsaturn, .showoffuranus, .showoffneptune, .showoffpluto, .showoffthemoon, .showoffmoons, .showoffcomets, .showoffasteroids, .showoffdeepspace,
.hideoffsun, .hideoffmercury, .hideoffvenus, .hideoffearth, .hideoffmars, .hideoffjupiter, .hideoffsaturn, .hideoffuranus, .hideoffneptune, .hideoffpluto, .hideoffthemoon, .hideoffmoons, .hideoffcomets, .hideoffasteroids, .hideoffdeepspace, 
.showoffactive, .showoffsuccess, .showofffailure, .showoffpartial, .showoffplanned, 
.hideoffactive, .hideoffsuccess, .hideofffailure, .hideoffpartial, .hideoffplanned
{
    background-color:rgb(194, 194, 194);
}

.showoff1950, .showoff1960, .showoff1970, .showoff1980, .showoff1990, .showoff2000, .showoff2010, .showoff2020, .showoff2030, .showoffvenus, .showoffsuccess, .showoffall, .showoffdecades, .showoffdestinations, .showoffoutcomes,
.hideon1950, .hideon1960, .hideon1970, .hideon1980, .hideon1990, .hideon2000, .hideon2010, .hideon2020, .hideon2030, .hideonvenus, .hideonsuccess, .hideonall, .hideondecades, .hideondestinations, .hideonoutcomes,
.showoffsun, .showoffmercury, .showoffvenus, .showoffearth, .showoffmars, .showoffjupiter, .showoffsaturn, .showoffuranus, .showoffneptune, .showoffpluto, .showoffthemoon, .showoffmoons, .showoffcomets, .showoffasteroids, .showoffdeepspace,
.hideonsun, .hideonmercury, .hideonvenus, .hideonearth, .hideonmars, .hideonjupiter, .hideonsaturn, .hideonuranus, .hideonneptune, .hideonpluto, .hideonthemoon, .hideonmoons, .hideoncomets, .hideonasteroids, .hideondeepspace,
.showoffactive, .showoffsuccess, .showofffailure, .showoffpartial, .showoffplanned,
.hideonactive, .hideonsuccess, .hideonfailure, .hideonpartial, .hideonplanned
 {
    display: none;
}

.filtersectiontitles {
    width:99%;
    margin:auto;
    padding:5px;
    font-size:16px;
    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid black;
    color: #ffffff;
    background-color: #37acef;
    -webkit-box-shadow: inset -5px -5px 0px 0px #2693d1;
    -moz-box-shadow: inset -5px -5px 0px 0px #2693d1;
    box-shadow: inset -5px -5px 0px 0px #2693d1;
    margin-bottom:20px;
    text-align: center;
    display:block;
}

.windowclose2 {
    position: absolute;
    top:-20px;
    right:-20px;
    cursor: pointer;
    font-weight: bold;
    border-color: #254288;
    border-width: 5px;
    border-radius: 15px;
    border-style: solid;
    background-color: #e8402d;
    padding:5px 10px;
    font-size: 20px;
    color: white;
    font-weight: bold;
    font-family: 'Strenuous', sans-serif;
    transition: 0.3s;
}

.windowclose2:hover {
    background-color: #ff6e14;
    color: white;
}

.filterbutton:hover {
    background-color: #37acef;
}

.decade {
    width:auto;
    max-width:95%;
    background-color: #ff6e14;
    display: inline-block;
    border: 4px solid black;
    margin-top:20px;
    margin-bottom:20px;
    padding:5px;
    padding-left:20px;
    padding-right:20px;
    transform: skewX(-10deg);
}

.decade h2 {
    font-family: strenuous, sans-serif;
    color: black;
    font-weight:normal;
    text-decoration: none;
    border-bottom: none;
    letter-spacing: 2px;
    font-size: 24px;
    transform: skewX(10deg);
    text-transform:none;
}

.missionlink {
    color: black;
}

.missionlink:hover {
    color: white;
}

.missionurlyes {
    background-color: #37acef !important;
    transition: 0.3s;
    text-align: center;
}

.missionurlyes:hover {
    background-color: #ff6e14 !important;
    color: white !important;
}

.missionurlno {
    color: black;
}

/* Start of new styles for missions list (December 2023) */


/* Style for select elements with a non-default selected option */
select.non-default-selected {
    color: rgb(56, 56, 56); /* Blue color for selected option */
}

/* Default style for select elements */
select {
    color: rgb(56, 56, 56); /* Default color */
}

/* Style for the default (first) option */
select option:first-child {
    color: #5c0404; /* Light grey for the default option */
}

.clear-button {
visibility: hidden; /* Initially hidden */
position: absolute; right: 0; top: 0; bottom: 0; height: 100%; display: flex; align-items: center; padding: 0 10px; background-color: #ffd724;
}

.button-placeholder {
display: inline-block;
}

.radio-buttons-container {
display: flex;
justify-content: space-between; /* Distributes space evenly */
}

.missionslistsearchbox {
width: 90%; margin: auto; background-color: white; border: 2px solid #37acef; border-radius: 5px; display: flex; align-items: stretch; position: relative; overflow: hidden;
}

.searchicon {
height: 20px; margin-left: 10px; align-self: center;
}

.missionslistsearchboxinputfield {
flex-grow: 1; font-size: 16px; padding: 10px; border: none; box-sizing: border-box; outline: none; background: none;
}


.clearsearchcontents {
cursor: pointer; padding: 0 10px; align-self: center; display: none;
}

.searchsubmit {
border: none; background-color: #37acef; color: white; font-size: 16px; cursor: pointer; padding: 0 15px; align-self: stretch; font-family: 'Titillium Web', sans-serif; transition: 0.3s;
}

.searchsubmit:hover {
background-color: #ffd724;
color: black;
}

.filter-section {
width: 90%; margin: auto; margin-top: 20px;
}

.filter-row {
display: flex; justify-content: space-between; margin-bottom: 10px;
}

.filter-container {
position: relative; margin-right: 10px; flex-basis: calc(20% - 10px);
}

.filter-container:last-child {
position: relative; margin-right: 0px; flex-basis: calc(20% - 10px);
}

.filter-container2 {
    position: relative; margin-right: 10px; flex-basis: calc(33.3% - 10px);
    }
    
    .filter-container2:last-child {
    position: relative; margin-right: 0px; flex-basis: calc(33.3% - 10px);
    }

.filter-dropdown {
width: 100%; height: 40px;
}


/* Align radio groups horizontally */
.radio-group {
display: flex;
position: relative; /* Positioning context for pseudo-elements */
flex: 1; /* Each radio group will take equal width */
margin-right: 10px; /* Adjust or remove as needed */
}

/* Remove margin from the last radio group to align properly */
.radio-group:last-child {
margin-right: 0;
}

/* Default styles for labels */
.radio-group label {
display: flex;
flex-grow: 1; /* Allows the label to grow and fill the space */
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
border: 2px solid #37acef;
border-radius: 5px;
padding: 8px 8px 8px 40px; /* Adjust padding to accommodate custom radio button */
cursor: pointer;
background-color: #fff;
color: #37363b;
position: relative; /* For positioning the custom radio button */
}

/* Hide actual radio button but make it accessible */
.radio-group input[type="radio"] {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}

/* Custom radio button */
.radio-group label::before {
content: '';
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font: inherit;
width: 18px;
height: 18px;
border: 2px solid #37acef;
border-radius: 50%;
background-color: #fff;
}

/* Styles for selected radio buttons */
.radio-group input[type="radio"]:checked + label {
background-color: #37acef;
color: white;
}

.radio-group input[type="radio"]:checked + label::before {
border-color: white;
background-color: #37acef;   
}

/* Inner circle for selected radio button */
.radio-group input[type="radio"]:checked + label::after {
content: '';
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ffd724
}

/* end of new styles for missions list (December 2023) */


ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;}

/* ads */
.bottomad {width:100%; margin-top:30px;}

.middlead {width:100%; margin-top:60px; margin-bottom:30px;}

.largestobjectsad {width:100%; margin-top:-40px;}

.navadbox {width:99%; margin:auto; margin-top: 30px;}

@media only screen and (min-width: 1900px) and (orientation: landscape) {
    .navadbox {width:75%; margin:auto; margin-top: 30px;}}


/* editors */

    .form-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr); 
        gap: 20px; 
    }
    .form-grid > div {
        display: flex;
        flex-direction: column;
    }

    .form-grid2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        gap: 20px; 
    }
    .form-grid2 > div {
        display: flex;
        flex-direction: column;
    }

    .form-grid3 {
        display: grid;
        grid-template-columns: repeat(4, 1fr); 
        gap: 20px; 
    }
    .form-grid3 > div {
        display: flex;
        flex-direction: column;
    }