/** {
    border-style: solid;
}*/


/*--------------------------------------------------------------
1.0 - BASE SITE STYLES
--------------------------------------------------------------*/
*,*:after,*:before {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}


#donate {
  padding: 5px;
  background: linear-gradient(to right, rgba(16, 16, 16, 0.4);, rgba(255,0,0,1)); /* Standard syntax (must be last) */
}

#help_me {
    margin-top: 2vh;
    font-size: 1.5em;
    font-style: bold;
}


.donate_button {

  margin-top: 1vh;
  font-size:1em;
  color: #a17f1a;
  background: gold;
  border-radius: 4px;
  padding: 3px;
  border-color: #a17f1a;
  border-style: solid;
  font-style: italic;

}

.donate_button:hover {
    background-color: #8bc34a; /* Green */
    color: white;
}


/*--------------------------------------------------------------
2.0 - SEARCH FORM
--------------------------------------------------------------*/
.searchform {
  
  background:#f4f4f4;
  background:rgba(244,244,244,.79);
  border: 1px solid #d3d3d3;

    top: 12vh;
    right:4vw;

  padding: 2px 5px;
  position: absolute;
    margin: -22px 0 0 -170px;
  width:339px;
  box-shadow:0 4px 9px rgba(0,0,0,.37);
  -moz-box-shadow:0 4px 9px rgba(0,0,0,.37);
  -webkit-box-shadow:0 4px 9px rgba(0,0,0,.37);
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px

  z-index: 100;
    position: fixed;
}

.searchform input, .searchform button {
    float: left
}
.searchform input {
    background:#fefefe;
    border: none;
    font:15px/15px 'HelveticaNeue', Helvetica, Arial, sans-serif;
    margin-right: 5px;
    padding: 10px;
    width: 216px;
    box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px
}
    .searchform input:focus {
        outline: none;
        box-shadow:0 0 4px #0d76be inset;
        -moz-box-shadow:0 0 4px #0d76be inset;
        -webkit-box-shadow:0 0 4px #0d76be inset;
    }
    .searchform input::-webkit-input-placeholder {
    font-style: italic;
    line-height: 15px
    }

    .searchform input:-moz-placeholder {
      font-style: italic;
    line-height: 15px
    }

.searchform button {
    background: rgb(52,173,236);
    background: -moz-linear-gradient(top, rgba(52,173,236,1) 0%, rgba(38,145,220,1) 100%);
    /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52,173,236,1)), color-stop(100%,rgba(38,145,220,1)));*/
    /*background: -webkit-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
    background: -o-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
    background: -ms-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
    background: linear-gradient(to bottom, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);*/
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34adec', endColorstr='#2691dc',GradientType=0 );
    border: none;
    color:#fff;
    cursor: pointer;
    font: 15px/15px 'HelveticaNeue', Helvetica, Arial, sans-serif;
    padding: 10px;
    width:106px;
    box-shadow: 0 0 2px #2692dd inset;
    -moz-box-shadow: 0 0 2px #2692dd inset;
    -webkit-box-shadow: 0 0 2px #2692dd inset;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
    .searchform button:hover {
        opacity:.9;
    }













h1 { 
background: #fff;
    color: #59a7f6;
    padding: 0.5em;
    display: table;
    margin: 0 auto;
    display: none;
} |   

h2 {
    background: #fff;
    color: #59a7f6;
    padding: 0.5em;
    display: table;
    margin: 0 auto;
    display: none;
}

body {
background: #0c1a1f;
    font-family: "helvetica neue", "Arial";
    background-size: cover;
    color: #fff;
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
}

.alldata {
    position:fixed;
    top: 6vh;
    left:4vw;
    text-align:left;
    display:inline-block;

    font-weight: bold;
}

#details {
    padding-top: 60vh;
    text-align:center;
}

#weatherIconDegree {
    padding-top: 2vh;
    font-size:2em;
    color: #6b6f70;
    display:block;
}

#locationName {
    padding-top: 2vh;
    font-size:2em;
    text-align:left;
    display:block;
}


#best {
    padding-top: 1vh;
    padding-bottom: 1vh;
    font-style: italic;
    align-self: center;
    display:inline-block;
    font-size: 1em;
    display:block;

}

#time {
    display:inline-block;
    font-size: 3em;
    color: white;

}

#stars {
    padding-top: 1vh;
    text-align: left;
    display:block;
    font-size: 2em;

}

.recom {
    padding-top: 2vh;
    text-align: left;
    display:inline-block;
    font-style: italic;
}

#circleMini {
    font-size:1em;
    text-align:left;

    width: 10px;
    height: 10px;
    background: #8bc34a;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;

    display:inline-block;
}

#recomendation {
    font-size:1em;
    text-align:left;
    vertical-align:middle;
    margin-left:0.25em;
    display:inline-block;
}

.circle {
    border: 1px solid black;
    border-radius: 50%;
    display: inline-block;
    vertical-align:middle;
    border-color: #2dafe6;
    border-width: 3px;
    text-align:left;
}

.background-circle {
    height: 200px;
    width: 200px;
}

.waves {
    padding-top: 2vh;
    text-align: left;
}

.circle img {
    border-radius: 50%;
    display: block;
}

#wavesHeight {
    font-size:4em;
    vertical-align:middle;
    margin:0;
    margin-left:0.25em;
    display:inline-block;
    text-align:left;    
}

#ft-m {
    font-size:1em;
    display:inline-block;
    vertical-align:bottom;
    text-align:left;
}


.bg {
    /*background-image:url('https://images.unsplash.com/photo-1452723312111-3a7d0db0e024?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1024&h=768&fit=crop&s=01370a0807302120e83ed2f984f12cb6');*/
   background-image:url('./img/background-wave.jpg');
    /*background-image:url('http://bestanimations.com/Nature/Water/wave-ocean-animated-gif-6.gif')*/
    /*background-image:url('https://media.tenor.co/images/803ae3a6e74d9415523d2f7036bcecd6/raw');*/

    width:120vw;
    height:120vh;
    position:fixed;
    top:-5vh;
    right:0;
    z-index:-1;
    opacity:0.7;
    background-size:cover;
    filter:blur(4px);
    -webkit-filter:blur(5px);
}

.wind {
    padding-top: 2vh;
    font-size:1.5em;
    display:inline-block;
    vertical-align:bottom;
}

#wind-icon {
    color: #2dafe6;
    display:inline-block;
}

#wind-speed {
    display:inline-block;
}

#wind-direction-icon {
    display:inline-block;
    font-size: 1.5em;
    vertical-align:middle;
}

#wind-onshore {
    display:inline-block;
    font-size: 0.7em;
}







/*#chartContainer {
    position:fixed;
    bottom:-5vw;
    left:-4vw;
    height:30vw;
    width: 105vw;
}*/


@media screen and (max-width: 1020px) {

  #details {
  	padding-top: 70vh;
  }

  #mc_embed_signup, #feedbackcontainer {
  	display:none;
  }

  .searchform {
  	top: 4vh;
  	width: 100%;
  	right:0vw;
  }

  .searchform input {
  	width: 70%;
  }

   .searchform button {
  	width: 27%;
  }

  .alldata {
  	top: 7vh;
  }

  #details-detailed { 
	left: 25vw;
	font-size: 0.5em;

}

#best {
  font-size: 0.9em;
}

#time {
	font-size: 1.2em;
}

#stars {

  font-size: 1.5em;

}

#weatherIconDegree {
    font-size:1.3em;
}

#locationName {
    font-size:1.5em;
}

#wavesHeight {
	font-size:3em;
}

#wind-speed {
	font-size:0.75em;
}


}


/*@media (max-height:550px) {
    body {
        border:10px solid red;
    }
}*/