body{
    font-family: 'Open Sans', sans-serif;
    background: black;
    font-size: 62.5%;
}
h1{    
    font-size: 6rem;
    font-weight: 100;
    line-height: 1;
}
h4, h5{    
    width: 100%;
}
p {
    font-size: .9rem;
}
#searchPanel h4{    
    font-size: 1.5rem;
    font-weight: 300;
}
#searchPanel h5{    
    font-size: 1.2rem;
    font-weight: 300;
    text-align: left;
}
:focus {
    outline:0 !important;
}
footer{
    background-color:black;
    height: 10rem;
    margin-top: 1.1rem;
}
.footer {
    text-align: center;
    color: #b9b9b9;
    padding-top: 6rem;
    font-weight: 100;
    font-size: .8rem;
}
.title {
    font-size: 2.5rem;
    text-align: center;
    font-weight: 200;
    padding: 1rem;
    background-color:black;
    color: white;
}
#rightPanel {
    display: inline-block;
}
#current{
    padding: 6rem 1rem;
}
#cityName{
    font-size: 3rem;
}
.detail{
    list-style: none;
    float: left;
    padding-top: 8rem;
}
.date{
    font-size: 18rem;
}
.list-group {
    text-align: center;;
}
.card{
    margin: 5px 0;
}
#searchPanel {
    display: block;
    float: left;
    margin: 4rem 0 3rem 0;
}
ul#cityList {
    list-style: none;
    font-size: 1.1rem;
    padding-left: 0;
    height: 30rem;
}
#city,
ul#cityList li button{
    font-size: 1rem;
    text-align: left;
    border: 1px solid #7d7979;
    border-right: 0;
    padding: .5rem;
    width: 80%;
}
ul#cityList li button,
ul#cityList li button.remove{
    margin-bottom: .2rem;
}
ul#cityList li button.remove{
    text-align: center;
}
ul#cityList li button:hover,
ul#cityList li button:active:hover,
ul#cityList li button.remove:hover,
ul#cityList li button.remove:active:hover,
#go:hover,
#go:active:hover{
    background-color: #333;
    color: white;
}
#go,
ul#cityList li button.remove{
    width: 20%;
    font-size: 1rem;
    padding: .5rem;
    border: 1px solid rgba(51,51,51,.5);
    border-left: 0;
}
#go{
    background-color:rgba(51,51,51,.5);
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #c4c4c4;
    opacity: 1; /* Firefox */
  } 
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: r#c4c4c4;
  } 
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: #c4c4c4;
  }
.form-group {
    margin-bottom: 0 !important;
    margin-top: 2.5rem;
}
#error{
    font-size: .8rem;
    color:red;
    height: 1.2rem;
    margin-bottom: .5rem;
    text-align: left;
}
#errorList{
    font-size: .8rem;
    color:rgb(87, 101, 230);
    height: 1.2rem;
    margin-bottom: .5rem;
    text-align: left;
}
.detail{
    font-weight: 400;
    font-size: 1.3rem;
    /* height: 6rem !important; */
}
.deg, .hum, .wind, .uv{
    font-size: 1.8rem;
}
.country{
    font-size: 3rem;
}
#curCityData{
    line-height: 1;
    margin: 4rem 2rem 0;
    width: 100%;
    border: 1px solid transparent;
}
#curCityData span{
    font-size: 3rem;
}
#curCityData h1{
    font-family: 'Roboto', sans-serif;
    width: 100%;
    text-align: left;
}
#curCityData h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: .9rem;
    margin-left: .6rem;
    margin: 0 0 5rem .6rem
}
#curCityData ul {
    font-size: 1.2rem;
    font-weight: 100;
    line-height: 1.5rem;
}
ul#look{
    font-family: 'Roboto', sans-serif;
    width: 45%;
    padding-left: 1.5rem;
}
ul#look > li img{
    width: 7rem;
    height: 7rem;
    margin-left: 20%;
}
ul#look > li span{
    font-size: 1.8rem;
    margin-left: 2rem;
}
ul#look > li{
    text-align:right;
    display: block;
    list-style: none;
    font-size: 2.5rem;
}
#detail{
    float:right;
}
ul#detail > li{
    text-align:left;
    display: block;
    list-style: none;;
}
#curForecast{
    margin-left: 2rem;
    width: 100%;
    margin: auto;
}
#forecastTitle h2{
    font-weight: 300;
    font-size: 1.5rem;
    text-align: left;
    margin-left: 2rem;
}
#curForecast ul li{
    list-style:none;
    margin: auto;
}
#curForecast li img{
    width: 6rem;
    height: auto;
}
#curForecast ul{
    padding: 1rem 1rem 1.3rem;
    margin: 1rem .2rem;
}
.mainF{
    font-size: 1.5rem;
    font-weight: 200;
    padding: .8rem 0;
}
.dayF{
    font-size: 1rem;
    font-weight: 400;
}
.dropbtn {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    padding: 0 1.5rem 4px;
    background-color:orange;
    color: white;
    border-radius: 0 0 .2rem .2rem;
    border: none;
    position: relative;
    z-index: 2;
  }
.dropdown {
    position: relative;
    display: inline-block;
    right: 2rem;
    width: 30rem;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 16rem;
    box-shadow: 0 .8rem 1.6rem 0 rgba(0,0,0,0.2);
    z-index: 1;
    padding: 1.5rem;
}
.dropdown-content a {
    color: black;
    padding: 1.2rem 1.6rem;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    background-color: rgb(181, 171, 171);
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: #333;
}
#weather{
    margin-top: -100vh;
    background: rgba(255,255,255,.7);
    padding: 0 0 1.5rem 0;
    border-radius: 0 0 1rem 1rem;
    overflow: scroll;
    height: 90vh;
}
/******** CAROUSEL *********/
.carousel-fade .carousel-item {
	opacity: 0;
	transition-duration: .6s;
    transition-property: opacity;
    height: 100vh;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
	opacity: 1;
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
	opacity: 0;
}
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
	transform: translateX(0);
	transform: translate3d(0, 0, 0);
}
/*----- MAKE CAROUSEL A BACKGROUND --------*/
.slider-block{
	height: 3.5rem;
	display: inline-block;
}
#carousel {
	height: 100%;
}
#carousel .carousel-inner{
	height: 100%;
}
#carousel .item{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	width: 100%;
	height: 100%;
}
.carousel-inner {
    z-index: -100;
    background-size: cover !important;
}
/********** RESPONSIVE ***********/
@media (max-width: 991px){
#curCityData {
    margin: 5rem 1.5rem 5rem;
}
#curCityData h4 {
    margin: 0 0 2rem .6rem
}
#detail {
    margin-top: 0;
}
span.country{
    margin-top: -1rem;
}
ul#look,
ul#detail {
    width: 100%;
    padding-left: 0;
}
ul#look > li,
ul#detail > li {
    text-align: center;
}
ul#look > li img {
    margin:auto;
}
ul#look > li span{
    margin-left: 0;
}
#forecastTitle h2 {
    margin-left: 0;
}
}
@media (max-width: 768px){
h1{    
    font-size: 4.5rem;
}
#curCityData {
    margin: 3rem 1rem 2rem;
}
.dayF {
    font-size: .8rem;
}
#curForecast ul {
    width: 9rem;
    padding: .8rem;
    margin: 0 .3rem .3rem 0;
}
ul#look > li img {
    width: 7rem;
}
#detail {
    margin-top: 0;
}
#curForecast{
    padding-left: 0;
    justify-content: flex-start;
}
#forecastTitle{
    padding-left: 8%;
    font-size: 1rem;
}
.form-group {
    margin-top: 0;
}
#searchPanel h4,
#searchPanel h5 {
    font-size: 1rem;
}
#searchPanel {
    margin: 6rem 0 2rem 0;
}
}
@media (max-width: 767px){
ul#cityList {
    display:none;
}
#curCityData h1,
#curCityData h4 {
    font-family: 'Roboto', sans-serif;
    width: 100%;
    text-align: center; 
}
#searchPanel {
    margin: 6rem 0 0;
}
#curCityData {
    margin: 0rem 1rem 2rem;
}
#forecastTitle {
    padding-left: 15%;
}
.dropdown {
    position: inherit;
    width: 28rem;
}
#weatherPanel {
    margin-left: 0px;
}
}
@media (max-width: 767px){
    #curForecast {
        justify-content: center;
    }
}
@media (max-width: 667px){
    .title {
        font-size: 1.5rem;
    }
}
@media (max-width: 480px){
h1{    
    font-size: 4rem;
    line-height: 1;
}
#curForecast{
    padding-left: 0;
}
#forecastTitle{
    font-size: 1.1rem;
    padding-left: 0;
    width: 100%;
    justify-content: center;
}
#weatherPanel{
    margin-right: 0;
    padding-right: 0;
    padding-left: 0;
}
#forecastTitle h2 {
    margin-left: 25px;
    text-align: center;
}
#error {
    margin-bottom: 2rem;
}
#errorList {
    display:none;
}
}