html {
height: 100%;
}
body {
font-size: 1.9em;
height: 100%;
text-align:center;
}
.container {
width:100%;
height:100%;
padding:0;
}
.navbar-brand {
color:#0f1933 !important;
}
.navbar {
background-color:#fff;
border:none;
}
.page-header {
text-align: center;
color:#fff;
margin-top:.6em;
font-size: 1em;
width: 100%;
border:none;
z-index:1;
}
.row {
margin: auto;
}
.column {
float: left;
}
.row3:after {
content: "";
display: table;
clear: both;
}
.star {
width: 5px;
height: 5px;
background-color:#fff;
border-radius: 50%;
-webkit-box-shadow: 0 0px 9px 2px rgba(255, 255, 255, 1);
-moz-box-shadow: 0 0px 9px 2px rgba(255, 255, 255, 1);
box-shadow: 0 0px 9px 2px rgba(255, 255, 255, 1);
position: absolute;
float:left;
left: 72%;
top:13%;
-webkit-animation: twinkle 4.5s linear 0s infinite normal; /* Safari 4.0 - 8.0 */
animation: twinkle 4.5s linear 0s infinite normal;
}
@keyframes hehkuanimaatio {
0% {
box-shadow: 0px -4px 4px 0px rgba(38, 127, 53, 1)/* , 0 -14px 12px 4px #03452d*/;
}
40% {
box-shadow: 0px -6px 6px 0px rgba(38, 127, 53, 0.7) /*, 0 -19px 15px 3px #03452d*/;
}
60% {
box-shadow: 0px -5px 5px 0px rgba(38, 127, 53, 0.5) /*, 0 -18px 15px 4px #03452d*/;
}
100% { box-shadow: 0 -4px 4px 0px rgba(38, 127, 53, 0.9)/* 0 -16px 14px 4px #03452d;*/}
}
@keyframes twinkle {
0% {
-webkit-transform:scale(1.0);
opacity: 1;
}
25% {
-webkit-transform:scale(.5);
opacity: 0;
}
50% {
-webkit-transform:scale(1.0);
opacity: 1;
}
75% {
-webkit-transform:scale(.5);
opacity: 0;
}
100% {
-webkit-transform:scale(1.0);
opacity: 1;
}
}
.isokuva {
background: rgb(7,13,30);
}
.isokuva h2, .isokuva h3 {
position: relative;
z-index: 1;
}
.korostus, .kuulas, .jade, .vaihtuvakuva h2, .nitesky p, .nitesky h2 {
color: #fff;
}
button, .nappi h4, .tumma h2, .tumma p, .container-fluid, .tumma h1 {
color: #0f1933;
}
.btn
{
white-space: normal;
}
.btn p {
margin-bottom:0;
}
.isokuva h3, .korostus, .kuulas, button.btn, .tumma p, .jade p, .nitesky p, #mailchimp, .container-fluid {
font-family: Open Sans;
}
h2, h4, .page-header, .navbar-brand, .tumma h1 {
font-family: Meddon;
}
.kuulas, .tumma p, .jade p, .nitesky p {
font-size:.8em;
line-height:2em;
}
.tumma h2, .vaihtuvakuva h2, .jade h2, .nitesky h2 {
font-size:1.5em;
}
.tumma h2, .vaihtuvakuva h2, .jade h2, .nitesky h2, .btn h4 {
margin-bottom: .8em;
}
.vaihtuvakuva {
background:linear-gradient(0deg, rgba(5,69,130,0.1) 30%, rgba(7,13,30,1) 60%),url("winterinhoneyvalley_matala.jpg");
/* https://source.unsplash.com/1600x1050/?scandinavia+nature */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.jade p {
margin-bottom:2%;
}
.tumma {
padding-top:3%;
}
.nitesky h2 {
background: none;
}
.nitesky p {
margin-top: 2em;
margin-bottom: 2em;
}
.container-fluid {
font-size:.8em;
line-height:1em;
}
.tumma h1 {
font-size: 2em;
margin-top:20%;
margin-bottom:.8em;
}
/* Mobiiliosasto - näkyy alle 768-levyisillä näytöillä */
@media only screen and (max-width: 767px) {
.isokuva {
padding-top:90px;
height:343px;
color:#fff9e8;
font-size: 2em;
}
.isokuva h3, .isokuva h2 {
margin-left: 10%;
margin-right: 10%;
}
.isokuva h2 {
font-size:1.3em;
}
.isokuva h3 {
margin-bottom:1em;
}
button {
display: inline-block;
width:100%;
position: relative;
margin:auto;
}
button.btn {
border-radius:0;
background-color:#fff;
-webkit-box-shadow: 0 -15px 40px 4px rgba(255, 171, 207, .3);
-moz-box-shadow: 0 -15px 40px 4px rgba(255, 171, 207, .3);
box-shadow: 0 -15px 40px 4px rgba(255, 171, 207, .3);
color:rgb(7,13,30);
}
.vaihtuvakuva h2 {
margin-left:5%;
margin-right:5%;
margin-top: 7em;
}
.korostus {
font-size:.8em;
line-height:2em;
margin-left:7%;
margin-right:7%;
}
.kuulas {
margin-top: 2em;
margin-bottom: 2em;
margin-left:7%;
margin-right:7%;
opacity: 0.8;
}
.row3 {
display: initial;
}
#keski {
width:100%;
}
.tumma h2 {
margin-top: 7%;
margin-bottom: .8em;
margin-left: 5%;
margin-right: 5%;
}
.tumma p {
margin-bottom:2%;
padding-bottom:5%;
}
.jade {
margin:auto;
-webkit-animation: hehkuanimaatio 1500ms infinite; /* Safari 4.0 - 8.0 */
animation: hehkuanimaatio 1500ms infinite;
width: 100%;
background: linear-gradient(0deg,rgba(255,255,255,1) 5%, rgba(2,100,65,1)70%, rgba(3,69,45,1)100%);
padding-top:2%
}
.jade h2 {
margin-top:11%;
}
.jade p {
padding-bottom:25%;
}
.tumma p, .jade p, .nitesky p {
padding-left: 7%;
padding-right:7%;
}
.nitesky {
width:100%;
background:linear-gradient(0deg, rgba(5,69,130,0.6) 20%, rgba(7,13,30,0.8) 60%), url("speis736x414.jpg");
position: relative;
padding-top:2%;
padding-bottom:2%;
}
.nitesky h2 {
margin-top:11%;
}
#mailchimp {
background: #none;
margin-left:5%;
margin-right:5%;
margin-bottom:5%;
text-align:center;
}
.container-fluid {
padding-top: 11%;
padding-bottom: 11%;
}
}
/* Näkyy 768+ px -levyisillä näytöillä: */
@media only screen and (min-width: 767px) {
.isokuva h2, .isokuva h3 {
margin-left: 10%;
margin-right: 10%;
color:#fff9e8;
text-shadow: 1px 1px 3px #070d1e;
}
.isokuva {
padding-top:100px;
margin-bottom:0px !important;
height: 310px;
}
.isokuva h2 {
font-size: 4.8vw;
}
.isokuva h3 {
margin-bottom:1em;
font-size: 4vw;
}
button {
width: 240px;
height: 240px;
position: relative;
left: 45%;
-webkit-transform: translate(-50%,-42%);
-ms-transform: translate(-50%,-42%);
transform: translate(-50%,-42%);
}
button.btn {
border-radius: 50%;
background-color:#fff;
-webkit-box-shadow: 0px 0px 50px 7px rgba(255, 171, 207, .85);
-moz-box-shadow: 0px 0px 50px 7px rgba(255, 171, 207, .85);
box-shadow: 0px 0px 50px 7px rgba(255, 171, 207, .85);
color:rgb(7,13,30);
}
.button h2 {
}
.vaihtuvakuva {
background-attachment: fixed;
}
.vaihtuvakuva h2 {
margin-top:15%;
}
.korostus, .kuulas {
margin-left:27%;
margin-right:27%;
}
.korostus {
font-size:.9em;
line-height:2em;
}
.kuulas {
margin-top: 2em;
margin-bottom: 3.5em;
opacity: 0.8;
}
.row3 {
display: flex;
}
#keski {
width:60%;
}
#oikea, #vasen {
width:25%;
background-image: url(knot_kulta.png);
background-repeat: repeat-y;
background-size:60%;
margin-top:2%;
background-position-x: center;
}
.tumma h2 {
margin-top: 7%;
}
.tumma p {
margin: auto;
padding-bottom:8%;
max-width:44em;
}
.jade {
margin:auto;
width: 100%;
background: linear-gradient(0deg,rgba(255,255,255,1) 5%, rgba(2,100,65,1)70%, rgba(3,69,45,1)100%);
padding-top:2%
}
.jade h2 {
margin-top:5%;
}
.jade p {
padding-left: 10%;
padding-right:10%;
padding-bottom:15%;
}
.nitesky {
width:100%;
margin:auto;
padding-top:2%;
padding-bottom:2%;
background:linear-gradient(0deg, rgba(5,69,130,0.6) 20%, rgba(7,13,30,0.8) 60%), url("speis.jpg");
/* Center and scale the image nicely */
position:relative;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size:cover;
}
.nitesky p {
padding-left: 2%;
padding-right:2%;
}
.nitesky h2 {
margin-top:5%;
}
.star {
visibility: hidden;
}
#mailchimp {
background: #none;
color: #0F1933;
margin-left:20%;
margin-right:20%;
margin-bottom:5%;
}
.container-fluid {
padding-top: 2%;
padding-bottom: 4%;
}
}
/*mailchimp-tyylit:*/
#mailchimp {
margin-left:7%;
margin-right:7%;
}
#mailchimp input {
border: 3px solid white;
color: #0F1933;
font-size: 1.1em;
font-family: Meddon;
height: 50px;
margin-bottom: 10px;
padding: 8px 10px;
width: 100%;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
#mailchimp input[type="submit"] {
background: #024482;
color: #fff;
cursor: pointer;
font-size: 1.1em;
font-family: Meddon;
width: 100%;
padding: 8px 0;
}
#mailchimp input[type="submit"]:hover {
color:#FFF;
}
#mailchimp input[type="email"] {
border: none;
color: #0F1933;
font-size: 1.1em;
font-family: Meddon;
height: 50px;
margin-bottom: 10px;
padding: 8px 10px;
width: 100%;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
#mailchimp input[type="text"] {
border: none;
color: #0F1933;
font-size: 1.1em;
font-family: Meddon;
height: 50px;
margin-bottom: 10px;
padding: 8px 10px;
width: 100%;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
text-align:top;
}
#mailchimp input::-webkit-input-placeholder {
color:#0F1933;
}
.mc-field-group{
margin:0;
}