html, body {
    font-family: Roboto;
    margin: 0 auto;
    color: #222222;
    font-weight: 300;
    letter-spacing: 0.3px;
}

#header, #yacht, #contact {
    width: 100%;
    float: left;
    display: table;
    z-index: 1;
}

#header {
    background: url(img/bgheader.jpg) fixed center;
    background-size: cover;
    min-height: 80vh;
    text-shadow: 0 0 7px white;
}

#slogan {
font-family: 'Lobster Two', cursive;
font-size: 60px;
margin-bottom: 5vw;
text-align: center;
margin-top: 0;
font-weight: bold;
font-style: italic;
}

#yacht {
    background: radial-gradient(#FFFFFF, #BBBBBB);
    background-attachment: fixed;
}

#options {
    background: url(img/bgoptions.jpg) fixed center;
    background-size: cover;
}

#headertext, #yachttext, #options, #context {
    display: table-cell;
    vertical-align: middle;
    padding: 5vw;
    width: 100%;
    height: 100%;
}

#headertext, #yachttext > h2, p {
    width: 70%;
    min-width: 400px;
}
#navi {display: none;}
.santinicon {position: absolute; height: 66px; width: auto; margin: 9px; right: 0; top: 0;}

.w400 {font-weight: 400;}

.cruiseopt {
    float: left;
    width: 40%;
    border: 1px solid #444444;
    padding: 2.5%;
    background: url(img/bgoptionsblur.jpg) fixed center;
    background-size: cover;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
}

.a {
    margin: 5% 2.5% 0 0;
}

.b {
    margin: 5% 0 0 2.5%;
}

.c {
    margin: 5% 2.5% 0 0;
}

.d {
    margin: 5% 0 0 2.5%;
}

.fotsection {
    position: relative;
    left: -60px;
}

.fot {
    float: left;
    width: 240px;
    height: 180px;
    margin: 0 0 60px 60px;
}

.f01 {background: url(img/gallery/s/01.jpg);}
.f02 {background: url(img/gallery/s/02.jpg);}
.f03 {background: url(img/gallery/s/03.jpg);}
.f04 {background: url(img/gallery/s/04.jpg);}
.f05 {background: url(img/gallery/s/05.jpg);}
.f06 {background: url(img/gallery/s/06.jpg);}
.f07 {background: url(img/gallery/s/07.jpg);}
.f08 {background: url(img/gallery/s/08.jpg);}
.f09 {background: url(img/gallery/s/09.jpg);}
.f10 {background: url(img/gallery/s/10.jpg);}
.f11 {background: url(img/gallery/s/11.jpg);}
.f12 {background: url(img/gallery/s/12.jpg);}
.f13 {background: url(img/gallery/s/13.jpg);}
.f14 {background: url(img/gallery/s/14.jpg);}
.f15 {background: url(img/gallery/s/15.jpg);}
.f16 {background: url(img/gallery/s/16.jpg);}
.f17 {background: url(img/gallery/s/17.jpg);}
.f18 {background: url(img/gallery/s/18.jpg);}
.f19 {background: url(img/gallery/s/19.jpg);}

.show {
    color: white;
    text-shadow: 0 0 3px black;
    width: 240px;
    height: 100%;
    line-height: 180px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4);
    font-size: 24px;
    cursor: zoom-in;
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.show:hover {
    opacity: 1;}

h2 {
    font-size: 40px;
    margin: 0 0 12px 0;
    font-weight: 300;
}

h3 {
    font-size: 32px;
    margin: 0 0 12px 0;
    font-weight: 300;
}

p, ul {
    font-size: 24px;
    line-height: 36px;
    margin: 9px 0 0 0;
}

/* GALLERY */

.zobzdj {margin-top: 60px;}

.image {
    background-color: rgba(0, 0, 0, 0.7);
    cursor: zoom-out;
    display: none;
    height: 100vh;
    position: fixed;
    width: 100vw;
    z-index: 10;
}

.opensize {
    background-size: contain;
    z-index: 20;
    height: 90vh;
    margin: 5vh;
}

.opensize > img {
    width: 24px;
    height: 24px;
    float: left;
    margin: 0;
}

.mfot {display: none;}

.o01 {background: url(img/gallery/l/01.jpg) fixed center no-repeat;}
.o02 {background: url(img/gallery/l/02.jpg) fixed center no-repeat;}
.o03 {background: url(img/gallery/l/03.jpg) fixed center no-repeat;}
.o04 {background: url(img/gallery/l/04.jpg) fixed center no-repeat;}
.o05 {background: url(img/gallery/l/05.jpg) fixed center no-repeat;}
.o06 {background: url(img/gallery/l/06.jpg) fixed center no-repeat;}
.o07 {background: url(img/gallery/l/07.jpg) fixed center no-repeat;}
.o08 {background: url(img/gallery/l/08.jpg) fixed center no-repeat;}
.o09 {background: url(img/gallery/l/09.jpg) fixed center no-repeat;}
.o10 {background: url(img/gallery/l/10.jpg) fixed center no-repeat;}
.o11 {background: url(img/gallery/l/11.jpg) fixed center no-repeat;}
.o12 {background: url(img/gallery/l/12.jpg) fixed center no-repeat;}
.o13 {background: url(img/gallery/l/13.jpg) fixed center no-repeat;}
.o14 {background: url(img/gallery/l/14.jpg) fixed center no-repeat;}
.o15 {background: url(img/gallery/l/15.jpg) fixed center no-repeat;}
.o16 {background: url(img/gallery/l/16.jpg) fixed center no-repeat;}
.o17 {background: url(img/gallery/l/17.jpg) fixed center no-repeat;}
.o18 {background: url(img/gallery/l/18.jpg) fixed center no-repeat;}
.o19 {background: url(img/gallery/l/19.jpg) fixed center no-repeat;}

/* CONTACT */

#contact {
    background: radial-gradient(#777777, #333333);
    background-attachment: fixed;
    color: white;
}

#cdetails {font-size: 24px; font-weight: 300; width: 50%; float: left;}
.cinfo {min-height: 72px; margin: 18px 0;}
.cicon {float: left; width: 68px; height: 72px; margin-right: 9px;}
.cicon > img {width: 64px; height: 64px; margin: 4px 4px 4px 0;}
.ctext {float: left; background: none;}

.claw {line-height: 36px;}
.caddress {line-height: 36px; height: 108px;}
.cscreen {line-height: 72px;}
.cmail {line-height: 72px;}
.cphone {line-height: 36px; margin: 0;}

.caddress > .cicon {padding-top: 18px;}
.ctext > img {height: 18px; border-radius: 3px;}

.ccenter {margin-left: auto; margin-right: auto; display: inline-block; text-align: left;}

#collaboration {width: 50%; float: left;}
#collaboration > img {margin: 36px 18px 0 18px;}

img[src="img/Santini_new.svg"] {height: 132px;}