/* RELATED INFOGRAPHIC COVER 800x421*/

.related-graphic .left {background-image: url("https://multimedia.scmp.com/news/world/article/2177933/space-debris/img/thumbnail.jpg");}
.cover{margin-top: 46px; height: 100vh; width: auto;}
body{background-color: rgb(73,84,111);}
section.intro p{max-width: 100%;text-align: center;}
.top{position: absolute; top: 7%; left: calc((100% - 700px)/2);}
.gif{position: absolute;}
.showP{display: none;}
h2{font-size: 20px;}
.max960{max-width: 900px;margin: 0 auto;}
.max820{max-width: 800px;margin: 0 auto;}
.max700{max-width: 700px;margin: 0 auto;}
.max420{max-width: 420px;margin: 0 auto;}
#comet{width: 100px;position: absolute; right: 0;margin-right: -100px;}
img.gif{max-width: 700px;}
.graphic-header{position: absolute;top: 31%;max-width: 600px;left: calc((100% - 600px)/2);}
/* .graphic-header p{max-width: 650px !important;} */
#maintitle{margin-bottom: 40px;}
.author{margin-top: 40px;}
p,h1,h2,h3,.related-graphic h4,a:active, a:visited, footer .related-content a,footer .related-content h4 {color: #dedede !important;}
#videos .row{display: inline-table;margin: 0 auto;}
#videos .display{margin: 0 27px;}
#videos {max-width: 920px;margin-top: 70px;margin-bottom: 50px;}
.distance{position: relative;width: 100%;height: auto;margin-top: 50px;}
#distanceText{position: absolute;top:0%;width: 100%;}
.disText,.lineG,.disText2,.highlineArrow{opacity: 0;transition: all 1s ease-out;}
.lineG.fade-in,.disText.fade-in,.disText2.fade-in{opacity: 1;}
path.meoline,path.meoarrow,path.highline{opacity: 0;}
.explain{font-size: 14px;line-height:18px; font-weight: 300;margin-top: 10px;}
#stations{margin-top: 0px;margin-bottom: 50px;}
#launches{margin-top: 10px;margin-bottom: 50px;}
.related-graphic,footer,footer .related-label{background-color: #404864}
.author-bottom,.body, footer .topback{background-color: rgb(73,84,114);}
aside .related-links h3{border-bottom:2px solid #404864}
.author-bottom .author,footer .topback{border-bottom:1px solid #404864}
footer .related-label{border-top:1.5px solid rgb(73,84,114)}
.author-bottom .author .info .visual,aside .related-links p a,.author-bottom .author .info .authorname,.credits a{color: #DEDEDE !important;}
.v-sm{display: none;}
#gps1,#galileo1,#glonass1,#galileo2,#glonass2{display: none;}
.mobile-only{display: none;}
.highlight {
    border-bottom: 1px solid rgba(179,107,74,.5);
    box-shadow: inset 0 -4px 0 rgba(179,107,74,.5);
}
button{width:70px;background-color:#404864;color:white;border:none; margin-right:10px;}
/* #galileoB.active,#glonassB.active,#gpsB.active{background-color:rgb(140,147,166)} */
#galileoB.active,#glonassB.active,#gpsB.active{background-color:#ceb1a3}
#beidouB.active{background-color:#B36B4A}
.accuracy{max-width: 820px;margin: 0 auto;}
#acc1,#acc2{margin:10px}
/*------------------------- | KEYFRAMES | -----------------------------*/





/*------------------------- | MEDIA QUERIES | -----------------------------*/
/* 
@media only screen and (max-width: 1000px){
    #distanceSvg1,#distanceSvg3{display: none;}
    #distanceSvg2{display: block;}
}

@media only screen and (max-width:600px) {
    #distanceSvg1,#distanceSvg2{display: none;}
    #distanceSvg3{display: block;}
} */
@media only screen and (max-width:960px) {
    .max960{padding-left: 10px;padding-right: 10px;}
}

@media only screen and (max-width:820px) {
    .max820,.max700{max-width:520px;}


}

@media only screen and (max-width:720px) {
    .v-lg{display: none;}
    .v-sm{display: block;margin: 0 12px;}
    .display2{margin: 0 20px;}
    .v-sm .row{align-items:center;display: flex !important;}
    .v-sm h3{margin-top: 0px;text-align: left !important;}
    .v-sm .explain{text-align: left !important;}
    #videos .row{margin-bottom: 40px;}
    #videos{margin-top:30px}
    .accuracy{max-width: 520px;margin: 0 auto;}
    #acc1, #acc2{margin-left: 30px;margin-right: 30px;}


}

@media only screen and (max-width:620px) {
    .graphic-header{
        max-width: 430px;
        left: calc((100% - 430px)/2);
    }
    .desktop-only{display: none;}
    .mobile-only{display: block;}

}
@media only screen and (max-width:520px) {
 .text{padding-left: 10px;padding-right: 10px;}
 .max820,.max700{padding-left: 10px;padding-right: 10px;}
 section.intro p {line-height: 26px;}
 img.gif{max-width: 500px;}
 .top{top: 5%; left: calc((100% - 500px)/2);}
 .cols-6{width: 100%;}
}

@media only screen and (max-width:420px) {
    .v-lg{display: block;}
    .v-sm{display: none;margin: 0 12px;}
    .v-lg h3{margin-top: 0;}
    .bd1 { margin-top: -7px !important;}
    .v-lg .explain{margin-bottom: 50px;}
    .v-lg video{width: 70%;margin: 0 15%;}
    #stations{margin-top: 20px;}
    #videos .row{margin-bottom: 0px;}
    #videos .display {margin: 0 10px;}
    #videos img{padding:20px}
    section.intro h1{font-size: 34px;line-height: 45px;}
    #maintitle {margin-bottom: 30px;}
    .author{margin-top: 20px;}
    .showD{display: none;}
    .showP{display: block;}
    .graphic-header{top:23%;max-width: 350px;left: calc((100% - 350px)/2);}
    #launches{margin-bottom: 30px;}
}

@media only screen and (max-width:375px) {
    #acc1, #acc2{margin-left: 5px;margin-right: 5px;}
    section.intro p{margin-bottom: 20px;margin-top: 20px;}
}
@media only screen and (max-width:350px) {
    img.gif{max-width: 420px;}
    button{width:60px;font-size:13px}
    .top{top: 3%; left: calc((100% - 420px)/2);}
    section.intro h1{font-size: 25px;line-height: 34px;}
    section.intro p{font-size: 15px;line-height: 20px;margin-bottom: 20px;}
    .graphic-header{max-width: 300px;left: calc((100% - 300px)/2);}
    .author{margin-top: 0px;}
    .graphic-header{top:22%}
    #maintitle {margin-bottom: 0px;}
}