/* bootstrap-switch - v3.3.2*/
.bootstrap-switch{display:inline-block;direction:ltr;cursor:pointer;border-radius:4px;border:1px solid #ccc;position:relative;text-align:left;overflow:hidden;line-height:8px;z-index:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.bootstrap-switch .bootstrap-switch-container{display:inline-block;top:0;border-radius:4px;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.bootstrap-switch .bootstrap-switch-handle-off,.bootstrap-switch .bootstrap-switch-handle-on,.bootstrap-switch .bootstrap-switch-label{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block!important;height:100%;padding:6px 12px;font-size:14px;line-height:20px}.bootstrap-switch .bootstrap-switch-handle-off,.bootstrap-switch .bootstrap-switch-handle-on{text-align:center;z-index:1}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary{color:#fff;background:#337ab7}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info{color:#fff;background:#5bc0de}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success{color:#fff;background:#5cb85c}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning{background:#f0ad4e;color:#fff}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger{color:#fff;background:#d9534f}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default{color:#000;background:#eee}.bootstrap-switch .bootstrap-switch-label{text-align:center;margin-top:-1px;margin-bottom:-1px;z-index:100;color:#333;background:#fff}.bootstrap-switch .bootstrap-switch-handle-on{border-bottom-left-radius:3px;border-top-left-radius:3px}.bootstrap-switch .bootstrap-switch-handle-off{border-bottom-right-radius:3px;border-top-right-radius:3px}.bootstrap-switch input[type=radio],.bootstrap-switch input[type=checkbox]{position:absolute!important;top:0;left:0;margin:0;z-index:-1;opacity:0;filter:alpha(opacity=0)}.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label{padding:1px 5px;font-size:12px;line-height:1.5}.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label{padding:5px 10px;font-size:12px;line-height:1.5}.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label{padding:6px 16px;font-size:18px;line-height:1.3333333}.bootstrap-switch.bootstrap-switch-disabled,.bootstrap-switch.bootstrap-switch-indeterminate,.bootstrap-switch.bootstrap-switch-readonly{cursor:default!important}.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label{opacity:.5;filter:alpha(opacity=50);cursor:default!important}.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container{-webkit-transition:margin-left .5s;-o-transition:margin-left .5s;transition:margin-left .5s}.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on{border-radius:0 3px 3px 0}.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off{border-radius:3px 0 0 3px}.bootstrap-switch.bootstrap-switch-focused{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label{border-bottom-right-radius:3px;border-top-right-radius:3px}.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label{border-bottom-left-radius:3px;border-top-left-radius:3px}


//Custom CSS

html, body {
    height: 100%;    
}

body {
  background-color: #000000;
  font-family: 'Roboto', sans-serif; 
  color: rgba(255,255, 255, 0.8);
  background:  url('weather-images/lighthouse-clouds-4.jpg') fixed center bottom no-repeat; 
}

@media only screen and (min-width:1200px){

body.sunny  {
	background:  url(weather-images/lighthouse-sunset.png) fixed center bottom no-repeat;
}

body.night {
	background:  url() fixed center bottom no-repeat;
}

body.rainy {
	background: url() fixed center bottom no-repeat;
}

body.snow {
	background:  url() fixed center bottom no-repeat;
}

body.mist {
	background: #000000 url() fixed center bottom no-repeat;
}

#weather-condition h6 {
    font-size: 36px;
    margin-bottom: 2px;
}

#weather-condition p {
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: 400;
    
}
}

@media only screen and (min-device-width: 320px) 
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 2) {

body.sunny  {
  	background:  url('weather-images/lighthouse-sunset.jpg') fixed center top no-repeat;
  	  font-size: 200%;
  	background-color: #000;  
}

#weather-condition h6 {
    font-size: 72px;
    margin-bottom: 2px;
}

#weather-condition p {
    margin-bottom: 3px;
    font-size: 28px;
    font-weight: 400;
    
}
}

a { color: #fff; text-decoration: underline }
a:hover { color: #fff; text-decoration: underline }
a:visited { color: #fff; text-decoration: underline }

.container {
  max-width: 900px;
  max-width: none !important;
  width: 900px;
}

h1 {
  font-size: 72px;
  line-height: 62px;
  vertical-align: middle;
  font-weight: 200;
  margin-top: 50px;
  margin-bottom: 20px;
  text-transform:capitalize;
  color: white;
}

h1 .title {
  font-size: 60px;
  line-height: 80px;
  vertical-align: middle;
  color: #2c3e50;  
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}

hr {
    margin-top: 3px;
    border-width: 1px 0;
    //border-color: #EEEEEE -moz-use-text-color #FFFFFF;
    //border-color: #888485;
    border-color: white;
}

hr#hr-bottom {
    margin-top: 0px;
    margin-bottom: 5px;
   
}

.panel  {
   -webkit-box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.3);
   -moz-box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.3);
   box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.3);
    //background-color: #00a6a7;
    background-color: RGBA(0, 0, 0, 0.3);
    
}

.panel-body {
  position: relative;
  margin-right: 20px;
  margin-left: 20px;
  padding-top: 5px;
  
}


.vcenter {
    display: block;
    vertical-align: middle;
    float: none;
}

#weather-icon-display {
    height: 307px;
    line-height: 307px;
    margin-top: 20px;
}

#weather-icon {
    font-size: 180px; 
    vertical-align: middle;
    display: inline-block;
    margin-top: -100px;
}

#temperature h4 {
    text-align: left;
    font-size: 32px;
    font-weight: 400;
    
}

#temperature p {
    text-align: left;
    font-size: 150px;
}

#temperature p {
    font-size: 300px;
    margin-top: -10px;
    margin-left: -10px;
    margin-bottom: 0;
    text-align: left;  
    font-weight: 500;
    line-height: 230px;

}

#temperature p sup {
    vertical-align: baseline;
    position: relative;
    top: -185px;
    line-height: 0;
    font-size: 40px;
    font-weight: 400;    
}

#temperature h5 {
    text-align: left;
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: 0;
    font-weight: 300;

}

#weather-condition h6 {
    font-size: 3em;
    margin-bottom: 2px;
}

#weather-condition p {
    margin-bottom: 3px;
    font-size: 1em;
    font-weight: 400;
    
}


#condition {
    text-transform: capitalize;
}

.temp-switch input {
    font-size: 100px;
}

#city, h6 {
    color: white;
}

#footer {
    font-size: 12pt;
    text-transform: capitalize;
    color: rgba(255,255,255);
    margin-bottom: 100px;
    
}