html {
  position: relative;
  min-height: 100%;
}

body {
    padding-left: calc(100vw - 100%);
    padding-top: 85px;
    padding-bottom: 20px;
    /*background-image: linear-gradient(ghostwhite 40%, lightskyblue);*/
    background-image: url("../images/earth.png");
}

.container{ 
    padding-top: 25px;
    padding-bottom: 15px;
    /*margin-bottom: 60px;*/
}

.navbar{
    padding-left: calc(100vw - 100%);
    background-image: linear-gradient(lightskyblue, ghostwhite 100%); 
}

.footer {
  position: absolute;
  bottom: 0;
  height: 60px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-top: 35px;
    padding-left: 15px;
    padding-right: 15px;
}

.body-content-extra {
    padding-top: 25px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

.btn-link {
  color: #2196f3;
}


.carousel-caption {
    top: 60%;
    text-align:left;
    left: 85px;
}

.carousel-inner > .item > img {
    margin: 0 auto;
}

/* Carousel */
/*.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}*/

/* buttons and links extension to use brackets: [ click me ] */
.btn-bracketed::before {
    display:inline-block;
    content: "[";
    padding-right: 0.5em;
}
.btn-bracketed::after {
    display:inline-block;
    content: "]";
    padding-left: 0.5em;
}

/* Hide/rearrange for smaller screens */
/*@media only screen and (min-device-width: 992px) {
    #myCarousel {
        display: none;
    }
}*/

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md {
        display: block !important;
    }
}

.visible-lg, .visible-md, .visible-sm, .visible-xs {
    display: none !important;
}

#mycarousel {
    background-color:aquamarine;
    opacity: 2;
}