/*basic styling page*/

html{
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    line-height: 1.2;
    height:100%;
    margin:0;
    font-size:1em;
}
body {
    margin-bottom:0px;  /*important adding this margin if use "sticky footer" in bootstrap otherwise some content might get covered by footer space */
    background-image:url("../images/metro-city-eve0.jpg");
    background-repeat: round;
    min-height:100%;
    color:rgb(210, 210, 210);
}
#landing-filler-top{
    margin-top: 10%;
    display: block;
    min-height: 20% !important;
}
#brand{
    background-color: rgba(255, 255, 255, 0);
    padding-left: 3em;
}
.bg-dark{
    background-color: rgba(255, 255, 255, 0) !important;
}

.container{
    min-height:100%;
    /* background-color: rgba(0, 0, 0, 0.742); */

}
h1{
    font-size:2.3em;
    color:rgb(210, 210, 210);
    text-shadow: 0.03em 0.03em rgb(255, 255, 255);
}
h2{
    font-size:2em;
    color:rgb(210, 210, 210);
}
h4{
    font-size:1.7em ;
    color:rgb(210, 210, 210);
}
.imgButtons{
    max-height: 150px;
    display: block; 
}
.imgWrap{
    max-height: 170px;
    max-width: 170px;
    /* display: block;  */
}

.images{
    max-block-size: 200px;
    max-width: 230px;
    float:left;
    margin-left: auto; 
    margin-right: auto; 
}

.footer{
    clear: both;
    height:80px;
    /* backgrounsd-color: black; */
    /* border-top: 8px solid #66bce4; */
    margin-top: 150px;
    text-align:center;
    font-size: 1em;
}

#myform{
    margin-top:1.5em;
}

/* adjust bootstrap elements to mimic the assignment format*/

.header{
    text-align: center;
    margin: 0 auto;
    /* padding: 0.3em 0; */
    background-color: rgb(0, 0, 0);
    /* border: 0.3em solid #66bce4; */
    /* border-radius:.5em; */

}
.row{
    padding:0.8em;
    margin-top: 0.2em;
    /* background-color:rgba(211, 211, 211, 0.89) !important; */
}

.col-sm-12 > .jumbotron {
    height:100%;
}
.jumbotron {
    padding:0.8em;
    padding-bottom:0.3em; 
    margin-bottom:0.3em;
    background-color: rgba(0, 0, 0, 0);

    /* box-shadow: 0.05em 0.05em rgb(146, 146, 146); */
}

.imgWrap >p {
    /* visibility :hidden; */
    color: rgba(68, 94, 160, 255);
    font-size:0.9em;
    font-weight:normal;
    opacity:0;

}
.imgWrap:hover >p {
    margin-top:-8.5em;
    opacity:1;
}

.container{
    min-height:100%;
}

@media(max-width:768px) {
#futureLogo > img {
        /* max-block-size: 120px; */
    max-block-size: 180px;
    max-width: 180px;

    }
    .imgButtons{
        max-height: 120px;
        display: block; 
    }
    .imgWrap{
        max-height: 120px;
        max-width: 120px;
        font-size:0.6em ;
        /* display: block;  */
    }
    .imgWrap:hover >p {
        margin-top:-10.5em;
        opacity:1;
    }   
}
@media(max-width:578px) {
    .jumbotron{
        /* max-width: 50% !important; */
        margin-bottom:0.2em;
    }
    h1{
        font-size:1.2em;
    }
    h2{
        font-size:1.1em;
    }
    h4{
        font-size:1em;
    }
    span{
        font-size:1em;

    }

    .imgButtons{
        max-height: 120px;
        display: block; 
    }
    .imgWrap{
        max-height: 120px;
        max-width: 120px;
        /* display: block;  */
    }
    .imgWrap:hover >p {
        margin-top:-11em;
        opacity:1;
    }   

    html{
        line-height: 1.1;
        height:100%;
        margin:0;
        font-size:.7em;
    }
    /* img{
        max-block-size: 180px !important;
        float:left;
    } */

   .col-xs-6, .col-sm-6{
        max-width: 50%;
    }
    /* .footer{
        position: relative;
    } */
}
.table{
    opacity: 0.8;
}
.btn{
    background-color: rgb(255, 157, 80);
    color: black;
}
/* .text-center{
    color: rgb(37, 22, 10);
    font-weight: bolder;
    font-size: 20px;
    
} */
.city{
    color: rgb(255, 157, 80);
    /* margin-top: -25px; */
    /* margin-left: -62px */
}
.temp{
    color:  rgb(255, 145, 59);
}

.count{
    margin-left: 20px;
    color:  rgb(204, 167, 136);
    font-weight: bolder;
}