a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: top;
}
html {
    line-height: 1
}
ol,
ul {
    list-style: none
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
caption,
td,
th {
    text-align: left;
    font-weight: 400;
    vertical-align: middle
}
blockquote,
q {
    quotes: none
}
blockquote:after,
blockquote:before,
q:after,
q:before {
    content: "";
    content: none
}
a img {
    border: none
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}
.hidden {
    display: none!important;
    visibility: hidden
}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    min-width: 320px;
    color: #fff;
    background-color: #fdfdfd;
    font-family: "aleo", serif;
    line-height: 1.7em;
}
a,
a:active,
a:focus,
a:visited {
    color: #5FA0D6;
    text-decoration: none
}

a.hover{
    color: #fff9d0 !important;
}

.wrapper {
    position: relative;
    z-index: 1;
    min-height: 100%;
    width: 100%;
    background: url(//assets/images/splashscreen.jpg) no-repeat center #fdfdfd; /* todo */
    background-size: cover;
}
#app img.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    margin: -47px 0 0 -47px
}
.main {
    padding: 40px 20px 100px;
    text-align: center
}
@media screen and (max-width: 680px) {
    .main {
        padding-bottom: 20px
    }
}
h1 {
    font-weight: lighter;
    font-size: 1.8em;
    line-height: 1.7em;
    color: white !important;
}
h2 {
    margin: 0 auto 20px;
    max-width: 480px;
    font-size: 1.8em;
    line-height: 1.4em;
    color: white !important;
}
p {
    margin-bottom: 12px;
}


/* LAYOUT */


.header{
    height: 60px;
    top: 0px;
    background-color: #0e131b;
    width: 100%; 
    position: fixed;
    z-index: 10;
    text-align:center;
    border-bottom: 1px solid #5fa0d6;
}

.header.open{
    height: 260px;
}

.header.closed{
    height: 60px;
}

header h1{
    margin: auto;
    margin-top: 5px;
    display: inline-block;
    width: auto;
}

h1 a{
    color: white !important;
}

.enlarge{
    font-size: 3em;
    margin-top: 175px;
}

.down{
    margin-top: 208px;
}

.header .menu-btn{
    width: 21px;
    height: 19px;
    background-size: 21px 19px;
    background-repeat: no-repeat;
    background-position: center; 
    padding: 20px;
    float: right;
    position: fixed;
    right: 0px;
    top: 0px;
    background-image: url(/assets/images/menu.png);
}

.menu{
    position: fixed;
    left: 0px;
    right: 0px;
    width: auto;
    opacity: 0;
    text-align: center;
    top: 60px !important;
    display: none;
}

.menu-down{
    opacity: 1;
    display: inline-block;
}

.menu ul{
    position: relative;
    list-style-type: none;
    text-align: left;
    width: 200px;
    display: inline-block;
}

.menu li{

}

.header .exit{
    background-size: 21px 19px;
    background-image: url(/assets/images/close.png);
}

.overlay {
    opacity:    0.8; 
    background: #fff; 
    width:      100%;
    height:     100%; 
    z-index:    9;
    top:        0; 
    left:       0; 
    position:   fixed;
    display: none;
}

.show{
    display: block;
}

.fancybox-close {
    top: 0;
    right: 0;
}

html, body, .content{
	height: 100%;
    width: 100%;
}

.info{
    margin: 80px auto 0px auto;
    position: absolute;
    z-index: 2;
    width: 100%;
    text-align: center;
}

a.button{
    color: white;
    background-color: #5fa0d6;
    border-radius: 1px;
    padding: 6px 10px 6px 8px;
    line-height: 3em;
}

a.button:hover{
    background-color: #fff9d0;
    color: #000;
}


.display{
    display: inline-block !important;
}

.hide{
    display: none;
}

div.page{
    max-width: 800px;
    text-align: left;
    padding: 24px;
    color: #000;
    margin: 90px auto 10px auto;
    line-height: 2em;
    font-size: 1.2em;
}

div.page h1{
    color: #000 !important;
    margin-bottom: 24px;
}

section.spa{
    height: 100%;
    width: 100%;
    background-size: cover !important;
    background-repeat: no-repeat;
    cursor: pointer;
}

section.spa img{
    opacity: 0;
    width: 0px;
    height: 0px;
}

section.spa a img{
    opacity: 1;
    width: 24px;
    height: 24px;
}

div.page section.spa h1, div.page section.spa h2 {
    color: #fff !important; 
    font-size: 1.4rem;
    margin-bottom: 0px;
}

div.page section.spa{
    margin-bottom: 24px;
    transition: transform 4s;
}

.wrapper{
    overflow:hidden !important;
    width: 100% !important;
    height: 400px !important;
    margin-bottom: 80px;
}


div.page section.spa:hover{
    transform:scale(1.1) 
}

.page section.spa{
    height: 400px;
}

.outer {
    display: table;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: 320px;
    text-align: center;
} 

.inner h2{
    text-shadow: 4px 4px 16px rgba(0,0,0,0.8);
    font-weight: lighter;
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

img.pinterest-btn{
    width: 24px;
    height: 24px;
    opacity: 0.5 !important;
    margin: 24px 0px 0px 24px;
    animation: flickerAnimation 4s infinite;
}

img.pinterest-btn:hover{
    opacity: 1 !important;
    animation-play-state: initial;
}

.previews{
    width: 120px;
    position: fixed;
    left: 24px;
    top: 87px;
    height: 75%;
    background-color: red;
    overflow: scroll;
    opacity: 0;
}

.preview{
    width: 120px;
    height: 80px;
    background-size: cover !important;
    float: left;
    background-repeat: no-repeat;
    background-position: 50% 50%;

}

/* Responsive design */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    .menu ul{
        width: 100%;
        padding-left: 24px;
    }

    .header.open{
        height: 360px;
    }

    .enlarge{
        margin-top: 300px;
        font-size: 1.8em;
    }


}