@media (max-width: 1400px) {
    div.maxWidth {
        max-width: 90%;
        margin: auto;
    }
    div#topright {
        width: 517px;
        height: 192px;
    }
    div#topleft {
        width: 344px;
        height: 256px;
        background-size: contain;
    }
}

@media (max-width: 1200px) {
    div.maxWidth {
        max-width: 90%;
        margin: auto;
    }
    #blogPostsArchive .postExcerpt {
        width: 50%;
    }
    #blogPostsArchive .button {
        bottom: 1%;
        left: 50%;
    }
    a.thunb img {
        max-width: 100%;
        width: 100%;
    }
    .postExcerpt {
        width: 100%;
        float: none;
    }
}

@media (max-width: 1000px) {
    #mt4page .secondcontententry {
        width: 100%;
    }
    #mt4page .oexp {
        width: 50%;
        margin: 2em 0;
    }
    #backHome {
        position: relative;
    }
    div#bx-pager {
        position: absolute;
        bottom: 5%;
        left: 25%;
        width: 50%;
        top: initial;
    }
    div#bx-pager a {
        display: block;
        padding: 10px;
        width: 100%;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        text-transform: uppercase;
        margin-top: 2px;
        margin-bottom: 2px;
        text-align: center;
        padding-left: 0px;
        padding-right: 0px;
    }
    div.slideOverlay {
        bottom: initial;
        top: 2%;
    }
    div#topleft {
        width: 237px;
        height: 177px;
    }
    div#topright {
        width: 388px;
        height: 196px;
    }
    div#globe {
        #transform: scale(0.5);
        #left: -20%;
        position: relative;
        max-width: 50%;
    }
    div#companyLocations {
        padding-top: 150px;
    }
    div#locationsTabs {
        margin-left: 50%;
        margin-top: 0px;
    }
    div#locationDesc {
        margin-left: 0px;
    }
    #locationsTabs a {
        /*         color: #00ADCF; */
        padding: 5px;
        padding-left: 2px;
        padding-right: 2px;
        width: 106px;
        display: inline-block;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin-left: 0px;
        margin-right: 0px;
    }
}

@media (max-width: 900px) {
    .footerBox {
        width: 48%;
        margin-right: 1%;
        margin-top: 15px;
    }
    .footerContactBox {
        top: 0px;
        width: 98%;
        padding-left: 0%;
    }
}

@media (max-width: 799px) {
    #fxSection .fxb {
        width: 100%;
    }
    #topMenu ul li {
        transform: scale(0.8);
    }
    #topMenu .maxWidth {
        max-width: 100%;
    }
    div#topleft {
        display: none;
    }
    div#topright {
        display: none;
    }
    div#companyLocations {
        padding-top: 10px;
    }
    div#whiteSection {
        position: relative;
        min-height: 300px;
    }
}

@media (max-width: 600px) {
    div#bx-pager {
        left: 15%;
        width: 70%;
    }
    div.slideOverlay {
        top: 2%;
    }
    .slideTitle {
        font-size: 30px;
    }
    .sliderMore {
        font-size: 20px;
    }
    #topMenu {
        display: none;
    }
    div#locationsTabs {
        margin-left: 0px;
        margin-top: 0px;
    }
    div#locationDesc {
        margin-left: 0px;
    }
    div#globe {
        position: relative;
        #margin-left: 25%;
        transform-origin: 0 0;
        max-width: 50%;
    }
    .homePost {
        width: 100%;
    }
    a.thunb img {
        width: 100%;
        max-width: 100%;
        height: 240px;
        object-fit: cover;
    }
    #blogPostsArchive .postExcerpt {
        width: 100%;
        margin-bottom: 50px;
    }
    #blogPostsArchive .button {
        display: none;
    }
}

@media (max-width: 400px) {
    div.slideOverlay p {
        display: none;
    }
    div.slideOverlay {
        top: 2%
    }
    .footerBox {
        width: 80%;
        margin: 10%;
    }
    div#globe {
        margin-left: 0%;
    }
}

/* *************************** */

:root {
    --mercury-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/mercury2.jpg);
    --mercury-tilt: rotate(0.034deg);
    --mercury-day: 1407.6;
    --mercury-color: #999999;
    --venus-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/venus2.jpg);
    --venus-tilt: rotate(177.3deg);
    --venus-day: 5832.5;
    --venus-color: #e8cda2;
    --earth-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/earth.jpg);
    --earth-tilt: rotate(23deg);
    --earth-day: 55;
    --earth-color: #b3caff;
    --mars-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/mars.jpg);
    --mars-tilt: rotate(25.2deg);
    --mars-day: 24.6;
    --mars-color: #c07158;
    --jupiter-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/jupiter.jpg);
    --jupiter-tilt: rotate(3.1deg);
    --jupiter-day: 9.9;
    --jupiter-color: #c9b5a4;
    --saturn-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/saturn.jpg);
    --saturn-tilt: rotate(26.7deg);
    --saturn-day: 10.7;
    --saturn-color: #f0e2c4;
    --uranus-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/uranus2.jpg);
    --uranus-tilt: rotate(97.8deg);
    --uranus-day: 17.2;
    --uranus-color: #b8d8e1;
    --neptune-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/neptune.jpg);
    --neptune-tilt: rotate(28.3deg);
    --neptune-day: 16.1;
    --neptune-color: #5e73bb;
    --pluto-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/pluto.jpg);
    --pluto-tilt: rotate(122.5deg);
    --pluto-day: 153.3;
    --pluto-color: #c3b6aa;
    --sun-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/sun.jpg);
    --sun-tilt: rotate(0deg);
    --sun-day: 600;
    --sun-color: #cc9f4c;
}

@keyframes planetRotate {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: -200% center;
    }
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.card--mercury .planet__atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--mercury-color);
}

.card--mercury .planet__surface {
    background-image: var(--mercury-image);
    transform: var(--mercury-tilt) scale(1.2);
    animation: planetRotate calc(var(--mercury-day)*.1s) linear infinite;
}

.card--mercury .card__planet::before {
    transform: var(--mercury-tilt) scale(1.2);
    border-color: var(--mercury-color);
    color: var(--mercury-color);
}

.card--mercury .tilt__icon {
    transform: var(--mercury-tilt);
    color: var(--mercury-color);
}

.card--venus .planet__atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--venus-color);
}

.card--venus .planet__surface {
    background-image: var(--venus-image);
    transform: var(--venus-tilt) scale(1.2);
    animation: planetRotate calc(var(--venus-day)*.1s) linear infinite;
}

.card--venus .card__planet::before {
    transform: var(--venus-tilt) scale(1.2);
    border-color: var(--venus-color);
    color: var(--venus-color);
}

.card--venus .tilt__icon {
    transform: var(--venus-tilt);
    color: var(--venus-color);
}

.card--earth .planet__atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--earth-color);
}

.card--earth .planet__surface {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/earth.jpg');
    transform: var(--earth-tilt) scale(1.2);
    animation: planetRotate calc(var(--earth-day)*.1s) linear infinite;
}

.card--earth .card__planet::before {
    transform: var(--earth-tilt) scale(1.2);
    border-color: var(--earth-color);
    color: var(--earth-color);
}

.card--earth .tilt__icon {
    transform: var(--earth-tilt);
    color: var(--earth-color);
}

.card--mars .planet__atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--mars-color);
}

.card--mars .planet__surface {
    background-image: var(--mars-image);
    transform: var(--mars-tilt) scale(1.2);
    animation: planetRotate calc(var(--mars-day)*.1s) linear infinite;
}

.card--mars .card__planet::before {
    transform: var(--mars-tilt) scale(1.2);
    border-color: var(--mars-color);
    color: var(--mars-color);
}

.card--mars .tilt__icon {
    transform: var(--mars-tilt);
    color: var(--mars-color);
}

.card--jupiter .planet__atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--jupiter-color);
}

.card--jupiter .planet__surface {
    background-image: var(--jupiter-image);
    transform: var(--jupiter-tilt) scale(1.2);
    animation: planetRotate calc(var(--jupiter-day)*.1s) linear infinite;
}

.card--jupiter .card__planet::before {
    transform: var(--jupiter-tilt) scale(1.2);
    border-color: var(--jupiter-color);
    color: var(--jupiter-color);
}

.card--jupiter .tilt__icon {
    transform: var(--jupiter-tilt);
    color: var(--jupiter-color);
}

.card--saturn .planet__atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--saturn-color);
}

.card--saturn .planet__surface {
    background-image: var(--saturn-image);
    transform: var(--saturn-tilt) scale(1.2);
    animation: planetRotate calc(var(--saturn-day)*.1s) linear infinite;
}

.card--saturn .card__planet::before {
    transform: var(--saturn-tilt) scale(1.2);
    border-color: var(--saturn-color);
    color: var(--saturn-color);
}

.card--saturn .tilt__icon {
    transform: var(--saturn-tilt);
    color: var(--saturn-color);
}

.card--uranus .planet__atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--uranus-color);
}

.card--uranus .planet__surface {
    background-image: var(--uranus-image);
    transform: var(--uranus-tilt) scale(1.2);
    animation: planetRotate calc(var(--uranus-day)*.1s) linear infinite;
}

.card--uranus .card__planet::before {
    transform: var(--uranus-tilt) scale(1.2);
    border-color: var(--uranus-color);
    color: var(--uranus-color);
}

.card--uranus .tilt__icon {
    transform: var(--uranus-tilt);
    color: var(--uranus-color);
}

.card--neptune .planet__atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--neptune-color);
}

.card--neptune .planet__surface {
    background-image: var(--neptune-image);
    transform: var(--neptune-tilt) scale(1.2);
    animation: planetRotate calc(var(--neptune-day)*.1s) linear infinite;
}

.card--neptune .card__planet::before {
    transform: var(--neptune-tilt) scale(1.2);
    border-color: var(--neptune-color);
    color: var(--neptune-color);
}

.card--neptune .tilt__icon {
    transform: var(--neptune-tilt);
    color: var(--neptune-color);
}

.card--pluto .planet__atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--pluto-color);
}

.card--pluto .planet__surface {
    background-image: var(--pluto-image);
    transform: var(--pluto-tilt) scale(1.2);
    animation: planetRotate calc(var(--pluto-day)*.1s) linear infinite;
}

.card--pluto .card__planet::before {
    transform: var(--pluto-tilt) scale(1.2);
    border-color: var(--pluto-color);
    color: var(--pluto-color);
}

.card--pluto .tilt__icon {
    transform: var(--pluto-tilt);
    color: var(--pluto-color);
}

.card--sun .planet__atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--sun-color);
}

.card--sun .planet__surface {
    background-image: var(--sun-image);
    transform: var(--sun-tilt) scale(1.2);
    animation: planetRotate calc(var(--sun-day)*.1s) linear infinite;
}

.card--sun .card__planet::before {
    transform: var(--sun-tilt) scale(1.2);
    border-color: var(--sun-color);
    color: var(--sun-color);
}

.card--sun .tilt__icon {
    transform: var(--sun-tilt);
    color: var(--sun-color);
}

.card__planet::before {
    content: '';
    position: absolute;
    height: 190px;
    z-index: -2;
    left: 50%;
    top: 0%;
    border-left: 1px dashed rgba(255, 255, 255, 0.25);
}

.planet__atmosphere {
    height: 190px;
    width: 190px;
    position: relative;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 65%);
    border-radius: 100px;
    overflow: hidden;
}

.planet__surface {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    background-size: cover;
}

.card--sun .planet__atmosphere {
    box-shadow: 0px 0px 10px 0px var(--sun-color), 0px 0px 1000px -2px var(--sun-color);
}

.card__info {
    width: 100%;
}

.info__title {
    text-align: center;
    font-size: 28px;
}

.info__form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.info__item {
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
    font-size: 14px;
}

.info__item .tilt__icon {
    margin: 0 5px;
}

.info__label {
    font-size: 11px;
}

.info__line {
    flex: 1;
    margin: 0 5px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}