/*----------------------------------------------------------- 

    Plugin Name: Weather Widget One
    Description: Weather Widget One is a simple plugin for displaying weather conditions and forecast for places across the world.
    Author: Stachethemes
    Author URL: http://www.stachethemes.com

    Content:

    0.  General Styles
    1.  Font Icon Styles
    2.  Weather Widget One Front Styles 

-----------------------------------------------------------*/



/*----------------------------------------------------------
  0. General Styles
-----------------------------------------------------------*/

/* CSS Resets */ 

.weather-widget-one * {
    margin:0;
    padding:0;
    line-height: 1;
    text-decoration: none;
    list-style: none;
}


/*----------------------------------------------------------
  1. Font Icon Styles by http://forecastfont.iconvau.lt/
-----------------------------------------------------------*/

.fa {
    font: normal normal normal 14px/1 FontAwesome !important;
}

@font-face {
    font-family: "iconvault";
    src: url("http://madeirabeachfl.gov/wp-content/plugins/weather-widget-one/site/css/iconvault_forecastfont.eot");
    src: url("http://madeirabeachfl.gov/wp-content/plugins/weather-widget-one/site/css/iconvault_forecastfont.eot?#iefix") format("embedded-opentype"),
        url("http://madeirabeachfl.gov/wp-content/plugins/weather-widget-one/site/css/iconvault_forecastfont.woff") format("woff"),
        url("http://madeirabeachfl.gov/wp-content/plugins/weather-widget-one/site/css/iconvault_forecastfont.ttf") format("truetype"),
        url("http://madeirabeachfl.gov/wp-content/plugins/weather-widget-one/site/css/iconvault_forecastfont.svg#iconvault") format("svg");
    font-weight: normal;
    font-style: normal;
}	




[class^="icon-"],
[class*=" icon-"] {
    font-family: 'iconvault' !important;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
}

@media only screen and (min-width: 479px) and (max-width: 678px){
    [class^="icon-"],
    [class*=" icon-"] {
        font-family: 'iconvault' !important;
        font-weight: normal;
        font-style: normal;
        text-decoration: inherit;
        -webkit-font-smoothing: antialiased;}
}

/* -----BaseCloud----- */

.basecloud:before  {
    font-family: 'iconvault' !important;
    content: '\f105';
    position:absolute;
    color:rgb(204, 204, 204);
}



/* -----windyraincloud----- */

.windyraincloud:before  {
    font-family: 'iconvault' !important;
    content: '\f111';
    position:absolute;
    color:rgb(204, 204, 204);
}

/* -----Windysnowcloud----- */

.windysnowcloud:before  {
    font-family: 'iconvault' !important;
    content: '\f109';
    position:absolute;
    color:rgb(204, 204, 204);
}

/* -----Basethundercloud----- */

.basethundercloud:before  {
    font-family: 'iconvault' !important;
    content: '\f105';
    position:absolute;
    color:#000;

}


/* -----Thunder----- */

.icon-thunder::before  {
    content: "\f114";
    position:absolute;
    color:rgb(255, 165, 0);
}

/* -----Sunny----- */

.icon-sunny::after {
    content: "\f101";
    color:rgb(255, 165, 0);
    position: absolute;
}


/* -----Drizzle----- */

.icon-drizzle::before  {
    content: "\f10a";
    color: #82b2e4;
    position: absolute;
}

/* -----Hail----- */

.icon-hail::before {
    content: "\f10f";
    position:absolute;
    color:rgb(204, 204, 204);}

/* -----Showers----- */

.icon-showers::before  {
    content: "\f104";
    position:absolute;
    color:#82b2e4;
}

/* -----Rainy----- */

.icon-rainy::before {
    content: "\f107";
    position:absolute;
    color:#4681c3;
}

/* -----Snowy----- */

.icon-snowy::before  {
    content: "\f10b";
    position:absolute;
    color:#acd3f3;
}

/* -----Frosty----- */

.icon-frosty::before {
    content: "\f102";
    position:absolute;
    color:#85d8f7;
}

/* -----Windy----- */

.icon-windy::before  {
    content: "\f115";
    position:absolute;
    color:rgb(204, 204, 204);
}

/* -----WindyRain----- */

.icon-windyrain::before {
    content: "\f10e";
    position:absolute;
    color:#acd3f3;
}

/* -----WindySnow----- */

.icon-windysnow::before {
    content: "\f103";
    position:absolute;
    color:#acd3f3;
}

/* -----Sleet----- */

.icon-sleet::before  {
    content: "\f10c";
    position:absolute;
    color:#acd3f3;
}

/* -----Moon----- */

.icon-moon::after {
    content: "\f10d";
    color:rgb(255, 165, 0);
    position: absolute;
}

/* -----Night----- */

.icon-night::after {
    content: "\f100";
    position:absolute;
    color:rgb(255, 165, 0);
}


/* -----Sun----- */

.icon-sun::after {
    content: "\f113";
    color:rgb(255, 165, 0);
    position: absolute;
}

/* -----Cloud----- */

.icon-cloud::after {
    content: "\f106";
    color:rgb(204, 204, 204);
    position: absolute;
}


/* -----Sunrise----- */

.icon-sunrise:before  {
    content: '\f112';
    color:rgb(255, 165, 0);
    position: absolute;
}

/* -----Sunset----- */

.icon-sunset:before  {
    content: '\f110';
    color:#f96f23;
    position: absolute;
}

/* -----Mist----- */

.icon-mist:before  {
    content: '\f108';
    color:rgb(204, 204, 204);
    position: absolute;
}


/*----------------------------------------------------------
  2. Weather Widget One Front Styles 
-----------------------------------------------------------*/

.weather-widget-one {
    height: 250px;
    position: relative;
    overflow: hidden;
    min-width: 225px;
    display: none;
}

.weather-widget-one .wwo-front {
    background:#fff;
    width:100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
}

.weather-widget-one .wwo-front-header {
    height:40px;
    width:100%;
    margin-top: 10px;
}

.weather-widget-one .wwo-front-expand {
    float:left;
}

.weather-widget-one .wwo-front-search {
    float:right;
}

.weather-widget-one .wwo-front-expand i,
.weather-widget-one .wwo-front-search i {
    color: #A19F92;
    text-decoration: none;
    text-align: center;
    width:40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    -webkit-transition: color 0.25s ease-out;
    transition: color 0.25s ease-out;
    cursor: pointer
}

.weather-widget-one .wwo-front-expand:hover i,
.weather-widget-one .wwo-front-search:hover i {
    color: #FF5555;
}

.weather-widget-one .wwo-front-date {
    text-align: center;
    position: absolute;
    left:40px;
    right: 40px;
    cursor: default;
}

.weather-widget-one .wwo-front-date {
    color: #828282;
    font-family: 'Roboto Condensed',sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 40px;
    text-transform: uppercase;
    float:none;
}

.wwo-front-condition p, .wwo-front-condition p span{
    font-size: 50px !important;
}

.weather-widget-one .wwo-front-footer {
    position: absolute;
    top: 0px;
    right: 0;
    margin-top: 10px;
}

.weather-widget-one .wwo-front-footer a {
    color: #BFBFBF;
    text-decoration: none;
    font-family: 'Roboto Condensed',sans-serif;
    font-size: 10px;
    font-weight: 300;
    line-height: 30px;
    text-transform: uppercase;
    -webkit-transition: color 0.25s ease-out 0s;
    transition: color 0.25s ease-out 0s;
}

.weather-widget-one .wwo-front-footer a:hover {
    color:#FF5555;
}

.weather-widget-one .wwo-front-footer .wwo-front-settings {
     height: 30px;
     position: relative;
     width: 30px;
}

.weather-widget-one .wwo-front-footer .wwo-front-settings i {
    color: #A19F92;
    cursor: pointer;
    font-size: 15px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    transition: color 0.25s ease-out 0s;
    width: 30px;
}

.weather-widget-one .wwo-front-footer .wwo-front-settings i:hover {
    color:#FF5555
}


.weather-widget-one .wwo-front-content {
    width:100%;
    float:left;
    display:none;
}

.weather-widget-one .wwo-front-icon {
    width:100%;
    float:left;
    margin-top:30px;
    cursor: default;
}

.weather-widget-one .wwo-front-icon ul, 
.weather-widget-one .wwo-front-icon li {
    margin:0;
    padding:0;
    line-height: 1 !important;
    font-size: 100px;
}

.weather-widget-one .wwo-front-icon ul {
    height:100px;
    width:100px;
    margin:0 auto;
    position: relative;
}

.weather-widget-one .wwo-front-condition {
    font-family: 'Roboto Condensed',sans-serif;
    font-weight: 300;
    width:100%;
    float:left;
    cursor: default;
}

.weather-widget-one .wwo-front-condition-data {
    width:220px;
    margin:15px auto 0;
}

.weather-widget-one .wwo-front-condition p {
    margin:0;
    padding:0;
    color:#828282;
    font-size: 71px;
    line-height: 1 !important;
    float:left;
    text-align: right;
    max-width: 165px;
    min-width: 145px;
}

.weather-widget-one .wwo-front-condition span {
    color:#BFBFBF;
}

.weather-widget-one .wwo-front-condition ul,
.weather-widget-one .wwo-front-condition li {
    margin:0;
    padding:0;
    line-height: 1;
}

.weather-widget-one .wwo-front-condition ul {
    height: 61px;
    margin-left: 10px;
    float: left;
    width: 45px;
    text-align: left;
}

.wwo-front-search i {
    display: none !important;
}

.weather-widget-one .wwo-front-condition li:first-child {
    font-weight: 400;
}

.weather-widget-one .wwo-front-condition li {
    line-height: 18px !important;
    float:left;
    width:100%;
    text-transform: uppercase;
    font-size: 13px;
    color:#828282;
}

.weather-widget-one .wwo-forecast {
    width:100%;
    height: 100%;
    position: absolute;
    top:0;
    left:-100%;
    background:#474D4B;
    overflow: hidden;
}

.weather-widget-one .wwo-forecast-header {
    height:40px;
    width:100%;
    background:#323635;
}

.weather-widget-one .wwo-forecast-close {
    float:right;
}

.weather-widget-one .wwo-forecast-close i {
    color: #A19F92;
    text-decoration: none;
    text-align: center;
    width:40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    -webkit-transition: color 0.25s ease-out;
    transition: color 0.25s ease-out;
    cursor: pointer;
    margin-top: 12px;
}

.wwo-forecast-footer a {
    display: none;
}

.weather-widget-one .wwo-forecast-close:hover i {
    color: #FF5555;
}

.weather-widget-one .wwo-forecast-title {
    text-align: left;
    position: absolute;
    left:0px;
    right: 40px;
    cursor: default;
    text-indent: 10px;
}

.weather-widget-one .wwo-forecast-title span {
    color: #FCB755;
    font-family: 'Roboto Condensed',sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 40px;
    text-transform: uppercase;
}

.weather-widget-one .wwo-forecast-footer {
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height:30px;
    text-align: center;
}

.weather-widget-one .wwo-forecast-footer a {
    color: #BFBFBF;
    text-decoration: none;
    font-family: 'Roboto Condensed',sans-serif;
    font-size: 10px;
    font-weight: 300;
    line-height: 30px;
    text-transform: uppercase;
    -webkit-transition: color 0.25s ease-out 0s;
    transition: color 0.25s ease-out 0s;
}

.weather-widget-one .wwo-forecast-footer a:hover {
    color:#FF5555;
}

.weather-widget-one .wwo-forecast-content {
    width:100%;
    position: absolute;
    top:40px;
    left:0;
}

.weather-widget-one .wwo-forecast-content-hourly {
    width: calc(100% - 10px);
    height: calc(100% - 75px);
    position: absolute;
    top:40px;
    left:-100%;
}

.weather-widget-one .wwo-forecast-content-hourly canvas {
    position: absolute;
    top: 5px;
    left: 5px;
}

.weather-widget-one .wwo-search {
    width:100%;
    height: 100%;
    position: absolute;
    top:0px;
    left:100%;
    background:#474D4B;
}

.weather-widget-one .wwo-search-header {
    height:40px;
    width:100%;
    background:#323635;
}

.weather-widget-one .wwo-search-close {
    float:right;
}

.weather-widget-one .wwo-search-close i {
    color: #A19F92;
    text-decoration: none;
    text-align: center;
    width:40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    -webkit-transition: color 0.25s ease-out;
    transition: color 0.25s ease-out;
    cursor: pointer
}

.weather-widget-one .wwo-search-close:hover i {
    color: #FF5555;
}

.weather-widget-one .wwo-search-title {
    text-align: left;
    position: absolute;
    left:0px;
    right: 40px;
    cursor: default;
    text-indent: 10px;
}

.weather-widget-one .wwo-search-title span {
    color: #FCB755;
    font-family: 'Roboto Condensed',sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 40px;
    text-transform: uppercase;
}

.weather-widget-one .wwo-search-content {
    width:100%;
    float:left;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:0 10px;
    
    font-family: 'Roboto Condensed',sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
}
.weather-widget-one .wwo-search-content p {
    color: #A19F92;
    margin:0;
    margin-top:20px;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
}

.weather-widget-one .wwo-search-content span {
    color: #E9AB54;
    margin:0;
    line-height: 1.2 !important;
}

.weather-widget-one .wwo-search-content input {
    background-color: #404644;
    border: 1px solid #2E3231;
    color: #FFFFFF;
    font-family: 'Roboto Condensed',sans-serif;
    font-size: 14px;
    height: 42px;
    margin-top: 10px;
    position: relative;
    text-indent: 10px;
    width: 100%;
}

.weather-widget-one .wwo-search-content a {
    background-color: #FD883B;
    color: #fff;
    float: left;
    font-family: 'Roboto Condensed',sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin-top: 10px;
    padding: 15px;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: background 0.25s ease-out;
    transition: background 0.25s ease-out;
}

.weather-widget-one .wwo-search-content a:hover {
    background:#000;
}












.weather-widget-one .wwo-settings {
    width:100%;
    height: 100%;
    position: absolute;
    top:100%;
    left:0;
    background:#474D4B;
}

.weather-widget-one .wwo-settings-header {
    height:40px;
    width:100%;
    background:#323635;
}

.weather-widget-one .wwo-settings-close {
    float:right;
}

.weather-widget-one .wwo-settings-close i {
    color: #A19F92;
    text-decoration: none;
    text-align: center;
    width:40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    -webkit-transition: color 0.25s ease-out;
    transition: color 0.25s ease-out;
    cursor: pointer;
    padding-top: 12px;
}

.weather-widget-one .wwo-settings-close:hover i {
    color: #FF5555;
}

.weather-widget-one .wwo-settings-title {
    text-align: left;
    position: absolute;
    left:0px;
    right: 40px;
    cursor: default;
    text-indent: 10px;
}

.weather-widget-one .wwo-settings-title span {
    color: #FCB755;
    font-family: 'Roboto Condensed',sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 40px;
    text-transform: uppercase;
}

.weather-widget-one .wwo-settings-content {
    width:100%;
    float:left;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:0 10px;
    
    font-family: 'Roboto Condensed',sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
}

.weather-widget-one .wwo-settings-content p {
    color: #A19F92;
    margin:0;
    margin-top:20px;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
}

.weather-widget-one .wwo-settings-content ul {
    margin:0;
    margin-top:10px;
}

.weather-widget-one .wwo-settings-content li {
    color: #828177;
    margin:0;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
    display: inline-block;
    margin-right: 5px;
    cursor: pointer;
    transition: color .25s ease-out;
}

.weather-widget-one .wwo-settings-content li:hover {
    color:#FFF;
}

.weather-widget-one .wwo-settings-content li.active {
    color: #E9AB54;
}






















.weather-widget-one .wwo-forecast-days {
    float:left;
    width:100%;
}

.weather-widget-one .wwo-forecast-day {
    width:100%;
    float:left;
    height:65px;
    cursor: pointer;
}

.weather-widget-one .wwo-forecast-day p {
   font-family: 'Roboto Condensed', sans-serif;
   color:#999;
   float:left;
   line-height:65px;
   text-align: left;
   width:40%;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding-left: 10px;
   font-size: 16px;
   -webkit-transition: color .25s ease-out;
    transition: color .25s ease-out;
}


.weather-widget-one .wwo-forecast-day ul {
    float:left;
    height: 65px;
    text-align: center;
    line-height: 65px;
    position: relative;
    width:20px;
}

.weather-widget-one .wwo-forecast-day-icon {
    width:20%;
    float:left;
    height: 65px;
}

.weather-widget-one .wwo-forecast-day ul li {
    position: absolute;
    left:50%;
}

.weather-widget-one .wwo-forecast-day ul li:before,
.weather-widget-one .wwo-forecast-day ul li:after {
    color:#999;
    font-size: 40px;
    line-height: 65px;
    -webkit-transition: color .25s ease-out;
    transition: color .25s ease-out;
}

.weather-widget-one .wwo-forecast-day span {
   font-family: 'Roboto Condensed', sans-serif;
   color:#999;
   float:right;
   line-height:65px;
   text-align: right;
   width:40%;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding-right: 10px;
   -webkit-transition: color .25s ease-out;
   transition: color .25s ease-out;
}

.weather-widget-one .wwo-forecast-day:hover p {
    color:#FFF;
}

.weather-widget-one .wwo-forecast-day:hover ul li:before,
.weather-widget-one .wwo-forecast-day:hover ul li:after {
    color:#FFF;
}

.weather-widget-one .wwo-forecast-day:hover span {
    color:#FFF;
}

.wwo-loader {
    width:30px;
    height:30px;
    background: crimson;
    overflow: hidden;
    position: absolute;
    margin-top:-15px;
    margin-left:-15px;
    top:50%;
    left:50%;
}

.wwo-loader-a,
.wwo-loader-b,
.wwo-loader-c,
.wwo-loader-d,
.wwo-loader-e {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
}

.wwo-loader-a {
    left:-100%;
    background: cornflowerblue ;
    -webkit-animation: loader-a 1.5s ease infinite forwards;
    animation: loader-a 1.5s ease infinite forwards;
}

.wwo-loader-b {
    top:-100%;
    background: darkseagreen ;
    -webkit-animation: loader-b 1.5s ease infinite forwards;
    animation: loader-b 1.5s ease infinite forwards;
}
.wwo-loader-c {
    left:100%;
    background: gold ;
    -webkit-animation: loader-c 1.5s ease infinite forwards;
    animation: loader-c 1.5s ease infinite forwards;
}
.wwo-loader-d {
    top:100%;
    background: crimson;
    -webkit-animation: loader-d 1.5s ease infinite forwards;
    animation: loader-d 1.5s ease infinite forwards;
}

@-webkit-keyframes loader-a {
    0% {
        left:-100%;
    } 
    
    25% {
        left:0%;
    }
    100% {
        left:0%;
    }
}

@-webkit-keyframes loader-b {
    25% {
        top:-100%;
    } 
    
    50% {
        top:0%;
    }
    
    100% {
        top:0%;
    }
}

@-webkit-keyframes loader-c {
    50% {
        left:100%;
    } 
    
    75% {
        left:0%;
    }
    
    100% {
        left:0%;
    }
}

@-webkit-keyframes loader-d {
    75% {
        top:100%;
    } 
    
    100% {
        top:0%;
    }
}

@keyframes loader-a {
    0% {
        left:-100%;
    } 
    
    25% {
        left:0%;
    }
    100% {
        left:0%;
    }
}

@keyframes loader-b {
    25% {
        top:-100%;
    } 
    
    50% {
        top:0%;
    }
    
    100% {
        top:0%;
    }
}

@keyframes loader-c {
    50% {
        left:100%;
    } 
    
    75% {
        left:0%;
    }
    
    100% {
        left:0%;
    }
}

@keyframes loader-d {
    75% {
        top:100%;
    } 
    
    100% {
        top:0%;
    }
}


.wwo-error {
    width:60px;
    height:40px;
    overflow: hidden;
    position: absolute;
    margin-top:-20px;
    margin-left:-30px;
    top:50%;
    left:50%;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 38px;
    display: none;
    color:#828282;
}

.wwo-front-location {
    position: absolute;
    top:40px;
    left:0;
    padding:0 10px;
    width:100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    display: table;
}

.wwo-front-location p {
    font-size: 12px;
    font-family: 'Roboto Condensed', sans-serif;
    color:#BFBFBF;
    height: 30px;
    display: table-cell;
    vertical-align: middle;
}

/* autocomplete */

.wwo-search-content ul  {
    width: 100%;
    top: -55px;
    position: relative;
    background:#404644;
    overflow: hidden;
    margin:0;
    padding: 0;
    border: 1px solid #2e3231;
}

.wwo-search-content li {
    padding: 15px;
    display: inline-block;
    float:left;
    width:100%;
    text-decoration: none;
    list-style: none;
    color: #fff;
    font-family: "Roboto Condensed";
    font-size: 12px;
    line-height: 1.2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.weather-widget-one .wwo-search-content li:focus,
.weather-widget-one .wwo-search-content li:active,
.weather-widget-one .wwo-search-content li:hover {
     background:#2e3231;
     color:#fff;
     cursor: pointer;
}