::-webkit-scrollbar {
width: 0px;
height: 0px; }
@font-face {
src: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/fonts/Biennale-Bold.ttf);
font-family: BiennaleBold; }
@font-face {
src: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/fonts/Biennale-Light.ttf);
font-family: BiennaleLight; }
@font-face {
src: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/fonts/Biennale-Medium.ttf);
font-family: BiennaleMedium; }
@font-face {
src: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/fonts/Biennale-Regular.ttf);
font-family: BiennaleRegular; }
@font-face {
src: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/fonts/Biennale-SemiBold.ttf);
font-family: BiennaleSemiBold; }
:root {
scrollbar-width: none !important; }
.scrollbar-track {
background: rgba(0, 0, 0, 0) !important; }
body {
margin: 0;
padding: 0;
background-color: #0e141f; }
body.admin-bar .header {
position: fixed;
top: 28px;
z-index: 1000;
height: 40px; }
a {
text-decoration: none; }
main p.big-title {
width: fit-content;
font: normal normal normal calc(5.07vw + 9.78vh)/calc(5.17vw + 9.96vh) BiennaleRegular;
opacity: 0; }
@media (max-width: 767px) {
main p.big-title {
opacity: 1; } }
.light {
background-color: white; }
#viewport {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0; }
input[type="text"]::placeholder {
color: #0e141f; }
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none; }
input,
select,
textarea {
color: #0e141f; }
.email {
width: 466px;
height: 111px;
border: 2px solid #071447;
border-radius: 56px; }
input[type="text"], input[type=email], input[type=tel], textarea {
width: 308px;
background: none;
border-width: 0px;
margin-left: 35px;
position: relative;
top: 24px;
font: normal normal normal 22px/31px BiennaleRegular; }
::placeholder {
color: #071447;
opacity: 1; }
:-ms-input-placeholder { color: #071447; }
::-ms-input-placeholder { color: #071447; }
input[type="submit"] {
width: 107px;
height: 107px;
border-width: 0px;
box-sizing: border-box;
position: absolute;
margin-left: 10px;
border-radius: 50px;
transition: all 0.1s ease;
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/Button1.png) no-repeat center;
background-size: 100px 100px;
cursor: pointer; }
.cky-consent-container {
font-family: BiennaleMedium; }
.cky-consent-container .cky-consent-bar {
box-shadow: none !important; }
.cky-preference-center {
font-family: BiennaleMedium; }
.cky-preference-center .cky-footer-shadow {
display: none !important; }
.cky-preference-center [data-cky-tag="detail-powered-by"] {
display: none !important; }
.cky-preference-center .cky-show-desc-btn {
color: #81c41c !important; }
.cky-preference-center .cky-accordion-header .cky-always-active {
color: #81c41c !important; }
.split {
position: relative;
color: #ffffff00;
text-shadow: white 0px 0px 20px;
font: normal 2.8vw/3vw BiennaleMedium;
opacity: 0; }
.split span {
font: normal 6.16vw / 6.5vw BiennaleBold; }
@media (max-width: 767px) {
.split {
text-shadow: white 0px 0px 0px;
font: normal 6vw/8vw BiennaleMedium;
opacity: 1; }
.split span {
font: normal 8vw/9.5vw BiennaleBold; } } .button,
button:not(.cky-btn):not(.cky-accordion-btn):not(.cky-show-desc-btn):not(.cky-btn-close):not(.cky-banner-btn-close),
input[type="button"],
input[type="reset"],
input[type="submit"] {
transition: background 150ms ease-in-out;
background: #0073aa;
border: none;
border-radius: 5px;
box-sizing: border-box;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: 700;
line-height: 1.2;
width: calc(20.92vh + 11.77vw);
outline: none;
background: #071447;
padding: 0.76rem 1rem;
border-radius: 100px;
text-decoration: none;
font-size: 18px;
vertical-align: bottom; }
.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
background: #111;
cursor: pointer; }
.button:visited,
button:visited,
input[type="button"]:visited,
input[type="reset"]:visited,
input[type="submit"]:visited {
color: #fff;
text-decoration: none; }
.button:focus,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
background: #111;
outline: thin dotted;
outline-offset: -4px; }
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
-webkit-backface-visibility: hidden;
background: #fff;
border: solid 1px #ccc;
box-sizing: border-box;
outline: none;
width: calc(20.92vh + 11.77vw);
border-radius: 100px;
padding: 0.36rem 0.66rem;
-webkit-appearance: none;
border: 1px solid #071447;
outline-offset: 0;
font-size: 18px;
border-radius: 100px; }
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
border-color: #0073aa;
outline: thin solid rgba(0, 115, 170, 0.15);
outline-offset: -4px; }
input[type="search"]::-webkit-search-decoration {
display: none; }
textarea {
box-sizing: border-box;
display: block;
width: 100%;
max-width: 100%;
resize: vertical; }
form p {
margin: 1rem 0; }
li.p3 {
line-height: 1.6;
margin-top: 1em;
margin-bottom: 1em; }
.nav-bg {
position: fixed;
top: 0;
left: 0;
z-index: 9;
background: rgba(4, 13, 49, 0);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
height: 95px;
width: 100vw;
transition: all 0.5s ease; }
.nav-bg-light {
background: #ffffff24; }
nav {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0 50px;
z-index: 90; }
nav .home-logo {
width: 101px;
height: 100%;
margin-top: 13px;
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/new/ShipWatch.svg) center no-repeat;
background-size: contain;
cursor: pointer;
transition: all 0.5s ease; }
nav .dark-logo {
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/new/ShipWatch-Lb-2.svg) center no-repeat;
background-size: contain;
transition: all 0.5s ease; }
nav #menu {
margin-top: 45px;
margin-left: 30px;
transition: all 0.5s ease; }
nav #menu ul {
padding: 0;
margin: 0;
display: flex;
list-style-type: none; }
nav #menu ul .active-page {
color: #81c41c; }
nav a {
color: white;
text-align: center;
margin: 0 14px;
font: normal normal 17px/20px BiennaleRegular;
transition: all 0.2s ease; }
nav .dark-links {
color: #0e141f; }
nav a:hover {
color: #81c41c; }
nav .notifited {
width: 201px;
height: 59px;
right: 0;
top: 20px;
background-color: #0e141f;
position: absolute;
border-radius: 37px;
transition: all 0.1s ease;
display: none; }
nav .notifited p {
margin: 0;
padding: 0;
margin-top: 20px;
margin-left: 26px;
width: 104px;
height: 18px;
color: white;
font: normal normal 18px/22px BiennaleRegular;
transition: all 0.1s ease; }
nav .notifited .button {
width: 58px;
height: 58px;
border-radius: 58px;
margin-left: 13px;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/Button1.png) bottom no-repeat;
background-size: 58px 58px;
transition: all 0.1s ease; }
nav .notifited .button2 {
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/Button2.png) bottom no-repeat;
background-size: 58px 58px; }
nav #burger {
width: 45px;
height: 45px;
color: #0e141f;
text-align: center;
font-size: 25px;
vertical-align: middle;
box-sizing: border-box;
top: 12px;
right: calc(5vw + 96px);
position: absolute;
display: none;
cursor: pointer; }
nav #burger .b {
width: 20px;
height: 2px;
margin-left: 4px;
background-color: #0e141f;
left: 9px;
position: relative;
top: 15px; }
nav #burger .b1 {
margin-top: 0px; }
nav #burger .b2,
nav #burger .b3 {
margin-top: 4px; }
@media (max-width: 1290px) {
nav .home-logo {
width: 80px;
height: 52px; }
nav #menu {
margin-left: 20px; }
nav a {
margin: 0 10px;
font: normal normal 15px/19px BiennaleRegular; }
nav .notifited {
width: 160px; }
nav .notifited p {
margin: 0;
padding: 0;
margin-top: 20px;
margin-left: 15px;
width: 100px;
height: 18px;
color: white;
font: normal normal 15px/19px BiennaleRegular; }
nav .notifited .button,
nav .notifited .button2 {
width: 56px;
height: 56px;
border-radius: 56px;
margin-left: 0px;
background-size: 56px 56px; } }
nav .notif-button {
display: none;
background-color: #81c41c;
backdrop-filter: blur(0px);
border-radius: 25px;
right: 5vw;
top: 12px;
height: 45px;
width: 45px;
position: absolute;
cursor: pointer; }
nav .notif-button .git {
font: 12px BiennaleRegular;
font-weight: 400;
top: 10px;
left: 6px;
position: relative;
align-content: center;
line-height: 1; }
nav .notif-button .bn {
width: 20px;
height: 2px;
margin-left: 3.5px;
background-color: #0e141f;
left: 9px;
position: relative; }
nav .notif-button .bn-wrapper {
opacity: 0;
visibility: hidden;
position: absolute;
top: 15px; }
nav .notif-button .b1n {
background-color: #0e141f;
margin-top: 7px;
transform: rotate(45deg); }
nav .notif-button .b2n {
margin-top: 5px;
opacity: 0; }
nav .notif-button .b3n {
background-color: #0e141f;
margin-top: -9px;
transform: rotate(-45deg); }
nav .login-button {
display: none;
background-color: #9397A5;
backdrop-filter: blur(0px);
border-radius: 25px;
right: calc(5vw + 48px);
top: 12px;
height: 45px;
width: 45px;
position: absolute;
cursor: pointer; }
nav .login-button .login {
font: 12px BiennaleRegular;
font-weight: 400;
top: 16px;
left: 7px;
position: relative;
align-content: center;
line-height: 1; }
@media (max-width: 1290px) {
nav .notif-button, nav .login-button {
display: block; }
nav #menu {
display: none; }
nav .notifited {
display: none; }
nav #burger {
display: block; }
nav .home-logo {
margin-top: 10px; } }
@media (max-width: 1290px) {
nav {
margin: 0 0 0 5vw; }
.nav-bg {
height: 64px; } }
.blur-menu {
z-index: 79;
top: 12px;
height: 45px;
width: 45px;
right: calc(5vw + 96px);
border-radius: 50px;
background-color: #fff;
position: absolute;
display: none; }
@media (max-width: 1290px) {
.blur-menu {
display: block;
right: 94px; } }
.mobile-menu {
z-index: 90;
position: relative;
height: 100vh;
margin: -16px 0 0 0;
z-index: 79;
display: none; }
.mobile-menu ul {
text-align: center;
list-style-type: none;
padding: 0;
width: 80vw;
padding-top: 20vh;
margin-left: 10vw; }
.mobile-menu ul li {
padding-top: 30px; }
.mobile-menu .menu-item {
display: none;
opacity: 0; }
.mobile-menu a {
color: white;
text-align: center;
text-decoration: none;
font: normal normal 17px/18px BiennaleRegular; }
.mobile-menu .notifited {
width: 201px;
height: 59px;
z-index: 1;
left: calc(50% - 100.5px);
bottom: 10vh;
position: absolute;
border-radius: 37px;
display: flex;
display: none;
opacity: 0; }
.mobile-menu .notifited p {
margin: 0;
padding: 0;
margin-top: 20px;
margin-left: 30px;
width: 100px;
height: 18px;
color: white;
font: normal normal 18px/22px BiennaleRegular;
transition: all 0.1s ease; }
.mobile-menu .notifited .button {
width: 58px;
height: 58px;
border-radius: 58px;
margin-left: 13px;
cursor: pointer;
flex-shrink: 0;
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/Button1.png) bottom no-repeat;
background-size: 58px 58px;
transition: all 0.1s ease; }
.mobile-menu .notifited .button2 {
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/Button2.png) bottom no-repeat;
background-size: 58px 58px; }
.mobile-menu .notifited-mobile-menu-bg {
width: 201px;
height: 59px;
left: calc(50% - 100.5px);
bottom: 10vh;
position: absolute;
background: #0e141f 0% 0% no-repeat padding-box;
border-radius: 37px;
display: none;
opacity: 0; }
.mobile-menu .notifited-mobile-menu-bg h3 {
margin-top: 20vh;
margin-left: calc(45.91vw - 7.26vh); }
.mobile-menu .notifited-mobile-menu-bg .email {
margin-left: calc(44.11vw - 10.46vh);
margin-right: 0;
margin-top: 5vh; }
.mobile-menu .notifited-mobile-menu-bg img {
margin-left: calc(44.77vw - 5.81vh);
margin-top: 15vh;
margin-right: 0; }
.mobile-menu .notifited-mobile-menu-bg p {
margin-left: calc(45.89vw - 7.31vh);
margin-right: 0; }
.side-notification {
background-color: #81c41c;
z-index: 80;
width: 0;
height: 100vh;
right: 0;
top: 0;
position: absolute;
transition: all 0.1s ease; }
@media (max-width: 1290px) {
.side-notification {
transform: translate3d(-50%, -50%, 0);
left: 50%;
top: 50%;
border-radius: 25px;
height: auto;
width: 70vw;
transition: none; }
.side-notification .notif-menu {
padding: 30px;
position: relative;
width: calc(100% - 60px); }
.side-notification .notif-menu h3 {
opacity: 1;
display: block;
width: 100%;
margin: 0;
margin-top: 0px;
margin-left: 0px;
font: normal normal 35px BiennaleRegular; }
.side-notification .notif-menu form {
opacity: 1;
display: block;
margin-top: 0;
margin-bottom: 0px; }
.side-notification .notif-menu form .form-item {
width: 100%;
margin: 7px 0;
height: 50px;
font-size: 15px; }
.side-notification .notif-menu form input[type=submit] {
width: 100%;
margin: 31px 0;
height: 50px;
position: relative;
font-size: 15px; }
.side-notification .notif-menu img, .side-notification .notif-menu .privacy {
opacity: 1;
display: block;
margin: 0 auto; }
.side-notification .notif-menu .privacy {
width: 55%; } }
@media (max-height: 700px) and (max-width: 640px) {
.side-notification {
transform: translate3d(-50%, calc(-50% + 32px), 0); } }
@media (max-width: 480px) {
.side-notification .notif-menu h3 {
font: normal normal 7.1vw BiennaleRegular; } }
@media (max-width: 768px) {
.side-notification {
width: 85vw; } }
input[type="text"], input[type=email], input[type="tel"] {
transition: all 0.1s ease; }
input[type="text"], input[type=email], input[type="tel"], textarea {
width: 308px;
background: none;
border-width: 0px;
font: normal normal normal 22px/31px BiennaleRegular; }
.notif-menu {
position: absolute;
top: 0;
left: 0;
overflow-y: scroll;
width: 100%;
height: 100%; }
.notif-menu h3 {
width: calc((14.53vh + 8.17vw) * 1.3);
margin: 0;
margin-top: calc((5.44vw + 9.67vh) * 0.7);
margin-left: calc(3.93vh + 2.21vw);
font: normal normal calc((4.86vh + 2.73vw) * 0.8)/calc((4.86vh + 2.73vw) * 0.8) BiennaleRegular;
color: #071447;
padding: 0;
display: none;
opacity: 0; }
.notif-menu form {
width: 100%;
display: none;
margin-top: 5vh;
margin-bottom: calc((5.44vw + 9.67vh) * 1.2); }
.notif-menu form .your-comments textarea {
padding: calc(((5.44vw + 9.67vh) * 0.27 - 31px) / 2) 0.66rem;
padding-left: 3vw; }
@media (max-width: 1290px) {
.notif-menu form .your-comments textarea {
padding: 0.56rem 0.66rem;
padding-left: 3vw; } }
.notif-menu p.subm {
margin: 0; }
.notif-menu input[type="submit"] {
width: calc(20.92vh + 11.77vw);
height: calc((5.44vw + 9.67vh) * 0.27);
margin: calc((5.44vw + 9.67vh) * 0.06 + 24px) calc(1.29vh + 0.72vw) 0 calc(1.29vh + 0.72vw);
border-radius: 100px;
background: #071447;
color: white;
font-size: 18px;
background-size: calc(20.92vh + 11.77vw) calc((5.44vw + 9.67vh) * 0.27); }
.notif-menu .form-item {
width: calc(20.92vh + 11.77vw);
margin: calc((5.44vw + 9.67vh) * 0.06) calc(1.29vh + 0.72vw) 0 calc(1.29vh + 0.72vw);
border-radius: 100px;
border: 1px solid #071447;
height: calc((5.44vw + 9.67vh) * 0.27);
font-size: 18px;
padding-left: 3vw;
box-sizing: border-box; }
.notif-menu .wpcf7-not-valid-tip {
margin-top: 50px;
margin-left: 5vw;
font-family: BiennaleMedium; }
.notif-menu .wpcf7 form .wpcf7-response-output {
margin: calc((5.44vw + 9.67vh) * 0.59) 0.5em 1em;
padding: 0.2em 1em;
border: none;
color: red;
font-family: BiennaleMedium;
text-align: center; }
.notif-menu img {
width: calc(11.62vh + 6.53vw);
margin: 0 calc(6.09vh + 3.33vw);
display: none;
opacity: 0;
position: static;
bottom: 5vh; }
.notif-menu p.privacy {
width: calc(14.62vh + 8.22vw);
font: normal normal calc(0.74vh + 0.41vw) BiennaleRegular;
margin-left: calc(4.44vh + 2.5vw);
text-align: center;
display: none;
opacity: 0;
color: #071447;
position: static;
bottom: 0; }
.full-blur {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
right: 0;
z-index: 78;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
display: none;
opacity: 0; }
@media (max-width: 1290px) {
.side-notification {
display: none; } }
.close-btn svg {
width: 56px;
height: 56px;
right: 0;
top: 28px;
position: absolute;
cursor: pointer;
fill: #040D31;
opacity: 0;
visibility: hidden; }
.request-login-btn {
border-radius: 25px;
border: 2px solid #040D31;
background-color: #040D31;
position: absolute;
overflow: hidden;
font: normal normal 17px/20px BiennaleRegular;
right: 0px;
top: 28px;
z-index: 101;
display: flex;
justify-content: center;
height: 52px; }
@media only screen and (max-width: 1290px) {
.request-login-btn {
display: none; } }
.request-login-btn .active-elem {
z-index: -1;
border-radius: 25px;
background-color: #80C420;
position: absolute;
width: 100px;
left: 0;
top: 0;
height: calc(100% + 0px);
width: 149px;
transform: translate(91px, 0); }
.request-login-btn > div:not(.active-elem) {
padding: 16px 22px;
font-weight: 400;
color: #fff;
position: relative;
cursor: pointer;
text-align: center;
font-size: 18px; }
.request-login-btn > div:not(.active-elem).active {
transition: color 0.2s ease-in-out;
color: #040D31;
font-weight: 400;
cursor: pointer; }
main.on-progress {
background-color: #0e141f; }
main.on-progress img.shipwatch-logo {
margin: calc(40vh - 73px) calc(50vw - 393.5px) calc(30vh - 73px) calc(50vw - 393.5px);
width: 787px;
height: 146px; }
main.on-progress p.contruction-txt {
color: white;
text-align: center;
text-transform: uppercase;
letter-spacing: 0px;
font: normal normal bold 50px/50px BiennaleBold;
padding-bottom: calc(30vh - 100px); }
@media (max-width: 787px) {
main.on-progress img.shipwatch-logo {
margin-left: 0;
margin-right: 0;
width: 100vw;
height: auto; }
main.on-progress p.contruction-txt {
margin-left: 0;
margin-right: 0;
font: normal normal bold 40px/40px BiennaleBold; } }
main.home {
width: 100%;
margin: 0;
padding: 0 0;
background-color: #0e141f; }
main.home section.first {
width: 100%;
height: calc(100vh + 11.92vw + 5px);
background: transparent linear-gradient(0deg, RGBA(128, 196, 28, 0.1) 0%, RGBA(39, 59, 137, 0.32) 100%) 0% 0% no-repeat padding-box;
background-size: 100% calc(100% - 11.92vw / 2 - 5px);
overflow: hidden; }
main.home section.first .vid {
overflow: hidden;
width: 100vw;
height: calc(100% - 11.92vw / 2 - 5px); }
main.home section.first .vid video {
width: 100%;
height: 100%;
opacity: 0;
object-fit: cover; }
main.home section.first .vid img.gif {
width: 100%;
height: 100%;
object-fit: cover;
display: none; }
main.home section.first .intro {
opacity: 0; }
main.home section.first .intro img {
width: 100%;
height: 100%;
object-fit: cover; }
main.home section.first .title {
position: absolute;
top: 30vh;
opacity: 0; }
main.home section.first .title p {
text-shadow: #80c41c 0px 0px 60px;
color: #ffffff00;
margin: 0; }
main.home section.first .title p.f1,
main.home section.first .title p.f2,
main.home section.first .title p.f3 {
margin-left: calc(4.1vw + 7.9vh); }
main.home section.first .title .f3 {
display: flex; }
main.home section.first .title .f3 p.small {
color: white;
font: normal normal normal 1.1vw / 1.7vw BiennaleRegular;
margin: 0;
margin-left: 5vw;
padding-top: 1.8vw;
text-shadow: #ffffff00 0px 0px 0px;
opacity: 0; }
@media (max-width: 1024px) {
main.home section.first .title p.f1,
main.home section.first .title p.f2,
main.home section.first .title p.f3 {
margin-left: 50px; } }
main.home section.first .cards {
position: absolute;
display: flex;
top: 100vh;
transition: all 0.3s ease; }
main.home section.first .cards div {
width: 13.75vw;
height: 11.92vw;
background: RGBA(2, 8, 20, 0.5);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
margin: 0.25vw;
cursor: pointer; }
main.home section.first .cards div img {
width: 100%;
height: 3.4vw;
margin-top: 4.415vw;
object-fit: contain; }
main.home section.first .cards div.c1 {
margin-left: 8vw; }
@media (max-width: 767px) {
main.home section.first {
height: calc(100vh + 17.1vw);
background-size: 100% calc(100% - 17.1vw / 2 - 20px); }
main.home section.first .vid {
overflow: hidden;
width: 100vw;
height: calc(100% - 17.1vw / 2 - 20px); }
main.home section.first .vid video {
min-width: 100vw;
min-height: 100%;
object-fit: cover; }
main.home section.first .title p {
font: normal normal normal 12vw/11.5vw BiennaleRegular;
text-shadow: #80c41c 0px 0px 0px; }
main.home section.first .title .margin {
margin-right: 55vw; }
main.home section.first .title p.f1 {
word-spacing: 100vw; }
main.home section.first .title .f3 {
display: block;
margin: 0; }
main.home section.first .title .f3 p.small {
margin-left: 5vw;
padding-top: 2vw;
width: 80vw;
opacity: 1; }
main.home section.first .cards {
position: absolute;
display: flex;
top: 100vh;
width: calc(100% - 5vw); }
main.home section.first .cards div {
width: 17.1vw;
height: 14.7vw;
border-radius: 0;
background: RGBA(2, 8, 20, 0.5);
backdrop-filter: blur(30px);
margin: 0.25vw;
cursor: pointer; }
main.home section.first .cards div img {
height: 4.6vw;
margin-top: 5.2vw;
object-fit: contain; }
main.home section.first .cards div.c1 {
margin-left: 5vw; }
main.home section.first .cards div.c2 {
margin-left: 1vw; }
main.home section.first .cards div.c3 {
margin-left: 1vw; } }
main.home section.second {
width: 100%;
height: 450vh;
position: relative;
background-color: #0e141f;
overflow: hidden; }
main.home section.second .boat-section {
width: 100vw;
display: block;
position: absolute;
top: 10vh;
cursor: pointer; }
main.home section.second .boat-section .boat {
width: 55vw;
height: 100vh;
margin-left: 8vw;
margin-top: 0; }
main.home section.second .boat-section .boat .boat-mini-img {
width: auto;
height: calc((78.125vw + 150.489vh) * 0.3);
left: 0;
margin-left: calc(44vw);
margin-top: 80vh;
background-size: auto 100%;
position: absolute;
top: 0;
opacity: 0; }
main.home section.second .boat-section .boat .boat-img {
margin: auto;
margin-top: 15vh;
margin-left: 9vw;
left: 0;
background-image: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/Oil_Tanker.B01.png);
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
position: absolute;
opacity: 1; z-index: 1;
width: calc(13.53vw * 1.3 + 37.62vh);
height: calc((78.125vw + 150.489vh) * 0.7);
margin-left: calc((28.74vw - 18.71vh)*1.05);
margin-top: calc(((78.125vw + 150.489vh) * -0.66) + 0.5* 1.25 * (13.53vw + 37.62vh));
top: calc(-6.76vw + (50vh - 28.71vh)); }
main.home section.second .boat-section .boat .emissions img {
position: absolute;
width: calc(13.53vw * 1.4 + 37.62vh);
height: calc((78.125vw + 150.489vh) * 0.75);
margin-left: calc((28.74vw - 18.71vh)*1.05);
margin-top: calc(((78.125vw + 150.489vh) * -0.66) + 0.5* 1.25 * (13.53vw + 37.62vh));
top: calc(-6.76vw + (50vh - 28.71vh));
left: 0;
opacity: 0.5;
z-index: 2; }
main.home section.second .boat-section .boat .boat2-img {
width: 55vw;
height: calc((78.125vw + 150.489vh) * 0.7);
margin: auto;
margin-top: 15vh;
margin-left: 9vw;
left: 0;
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/Ship-tanker2.png) no-repeat center;
background-size: auto 100%;
position: absolute;
opacity: 0; }
main.home section.second .boat-section .boat .satelite-img {
width: 48vw;
height: 37vw;
left: 0;
margin-left: -30vw;
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/Satelite1.png) no-repeat center;
background-size: auto 100%;
position: absolute;
top: -30vh;
opacity: 0; }
main.home section.second .boat-section .circle {
width: calc(5.8vw + 10.31vh);
height: calc(5.8vw + 10.31vh);
background-color: #fd345260;
backdrop-filter: blur(30px);
border-radius: 100vw;
position: absolute;
top: 28vh;
left: 19.35vw;
z-index: 3;
opacity: 0; }
main.home section.second .boat-section .circle p {
width: calc(4.68vw + 8.33vh);
height: calc(3.88vw + 6.89vh);
text-align: center;
color: white;
margin: 0;
position: absolute;
top: calc(1.04vw + 1.85vh);
left: calc(0.57vw + 1.01vh);
text-transform: capitalize;
font: normal calc(0.62vw + 1.11vh)/calc(0.98vw + 1.75vh) BiennaleBold;
transition: all 0.1s ease; }
main.home section.second .boat-section .circle p span {
font: normal calc(1.04vw + 1.85vh)/calc(0.98vw + 1.75vh) BiennaleBold; }
main.home section.second .boat-section .circle .text2,
main.home section.second .boat-section .circle .text3 {
display: none;
opacity: 0; }
main.home section.second .boat-section .screen {
left: calc(28.74vw - 18.71vh);
top: calc(-6.76vw + (50vh - 28.71vh) * 1.35);
z-index: 0;
position: absolute;
opacity: 0; }
main.home section.second .boat-section .screen .screen-back img {
width: calc(13.53vw + 37.62vh);
height: auto;
position: absolute;
top: 0;
left: 0; }
main.home section.second .boat-section .screen .screen-inside img {
width: calc(13.53vw + 37.62vh);
height: auto;
position: absolute;
top: 0;
left: 0; }
main.home section.second .boat-section .sea {
background: #020814;
position: absolute;
z-index: -1;
border-radius: calc(6.76vw + 18.71vh);
width: calc(13.53vw + 37.62vh);
height: calc(13.53vw + 37.62vh);
left: calc(28.74vw - 18.71vh);
top: calc(-6.76vw + (50vh - 28.71vh)); }
main.home section.second .brands-part {
position: absolute;
margin-left: 5vw;
right: 5vw;
top: 0; }
main.home section.second .brands-part .brand {
margin-top: 50vh; }
main.home section.second .brands-part .brand img {
height: 95px; }
main.home section.second .brands-part .brand p {
width: 20.36vw;
margin-top: calc(1.38vw + 2.47vh);
font: normal 22px/35px BiennaleRegular;
color: white;
transition: all 0.1s ease; }
main.home section.second .brands-part .brand p span {
font: normal 16px/90px BiennaleBold;
letter-spacing: 2.08px;
cursor: pointer; }
main.home section.second .brands-part .brand a {
pointer-events: all; }
main.home section.second .brands-part .brand.carbon, main.home section.second .brands-part .brand.data, main.home section.second .brands-part .brand.fuel {
cursor: pointer; }
@media (max-width: 1600px) {
main.home section.second .brands-part .brand p {
font: normal 17px/33px BiennaleRegular; } }
@media (max-width: 1400px) {
main.home section.second .brands-part .brand p {
font: normal 17px/33px BiennaleRegular; } }
@media (max-width: 1024px) {
main.home section.second .brands-part .brand p {
width: 250px;
font: normal 15px/22px BiennaleRegular; } }
@media (max-width: 768px) {
main.home section.second .brands-part .brand p {
font: normal 16px/27px BiennaleRegular; } }
main.home section.second .brands-part .carbon {
margin-top: 40vh; }
main.home section.second .brands-part .fuel span {
color: #fd3453; }
main.home section.second .brands-part .voyage span {
color: #2dcbcb; }
main.home section.second .brands-part .hull span {
color: #fe9914; }
main.home section.second .brands-part .carbon span {
color: #9297A6; }
main.home section.second .brands-part .data span {
color: #BE9CFA; }
main.home section.second .brands-part .timecharter span {
color: #fcf062; }
main.home section.second .brands-part .navwatch span {
color: #648cf2; }
@media (max-width: 767px) {
main.home section.second .boat-section {
position: static;
top: 0;
height: 45vh; }
main.home section.second .boat-section .boat {
width: 84vw;
height: 40vh;
margin-left: 9vw;
overflow: hidden; }
main.home section.second .boat-section .boat .screen {
left: calc(50vw - (5.07vw + 14.03vh) * 1.35);
z-index: -1;
top: calc(-5.5vw + (24vh - 15.5vh)); }
main.home section.second .boat-section .boat .screen .screen-back img {
width: calc(13.53vw + 37.62vh);
height: auto;
position: absolute; }
main.home section.second .boat-section .boat .screen .screen-inside img {
width: calc(13.53vw + 37.62vh);
height: auto;
position: absolute; }
main.home section.second .boat-section .boat .boat-img {
position: static;
width: calc(10.14vw + 28.21vh);
height: calc((78.125vw + 150.489vh) * 0.7);
left: 0;
top: calc(-5.5vw + (24vh - 15.5vh));
margin-left: calc(0.85 * (50vw - (5.07vw + 14.03vh)));
margin-top: calc((-1*(78.125vw + 150.489vh) * 0.62) + 0.5*(10.14vw + 28.21vh)); }
main.home section.second .boat-section .boat .emissions img {
width: calc(10.14vw + 28.21vh);
height: calc((78.125vw + 150.489vh) * 0.7);
left: 0;
top: calc(-5.5vw + (24vh - 15.5vh));
margin-left: calc(1.25 * (50vw - (5.07vw + 14.03vh)));
margin-top: calc((-1*(78.125vw + 150.489vh) * 0.61) + 0.5*(10.14vw + 28.21vh));
opacity: 0.3;
position: absolute; }
main.home section.second .boat-section .boat .boat2-img {
margin-top: 0;
height: 80vw;
margin-left: 13vw;
top: 0; }
main.home section.second .boat-section .boat .boat-mini-img {
position: fixed;
margin-top: 40vh;
height: 30vh;
width: auto;
top: 0;
margin-left: 62vw;
opacity: 0; }
main.home section.second .boat-section .sea {
border-radius: calc(5.07vw + 14.03vh);
width: calc(10.14vw + 28.21vh);
height: calc(10.14vw + 28.21vh);
left: calc(50vw - (5.07vw + 14.03vh));
top: calc(-5.5vw + (24vh - 15.5vh));
z-index: -2; }
main.home section.second .brands-part {
left: 0;
position: static;
display: flex;
bottom: 0;
margin: 50px 0 0 0; }
main.home section.second .brands-part .brand {
margin: 0 5vw;
width: 90vw;
flex-shrink: 0; }
main.home section.second .brands-part .brand img {
height: 9vw; }
main.home section.second .brands-part .brand p {
width: 100%;
font: normal 4.1vw/6.3vw BiennaleMedium; }
main.home section.second .brands-part .brand p span {
font: normal 3.5vw/11vw BiennaleBold; }
main.home section.second .boat-section .circle {
top: 25vh; } }
main.home section.third {
width: 100vw;
height: 500vh;
background-color: #0f1520;
overflow: hidden; }
main.home section.third .pin {
width: 100vw;
height: 100vh; }
main.home section.third .pin p {
color: white; }
main.home section.third .pin .circle {
border: 2px solid #80c41c;
position: absolute; }
main.home section.third .pin .circle p.small {
text-align: center;
padding: 0;
font: normal calc((0.87vw + 1.69vh) * 1.7)/calc((1.17vw + 2.25vh) * 1.7) BiennaleBold;
opacity: 0; }
main.home section.third .pin .c1 {
width: calc(10.82vw + 29.86vh);
height: calc(10.82vw + 29.86vh);
border-radius: calc(calc(10.82vw + 29.86vh) / 2);
left: calc(50vw - calc(10.82vw + 29.86vh) / 2);
margin-top: calc(50vh - calc(10.82vw + 29.86vh) / 2); }
main.home section.third .pin .c1 .text {
position: absolute;
text-align: center;
width: 80%;
margin: 0;
margin-top: 22%;
margin-left: 10%;
transition-timing-function: ease-in-out;
transition: 0.5s; }
main.home section.third .pin .c1 .text .p1 {
padding-top: 5%;
font: normal calc(1.66vw + 3.19vh)/calc(0.83vw + 1.59vh) BiennaleBold; }
main.home section.third .pin .c1 .text .p2 {
padding: 0 calc(1.75vw + 3.38vh);
font: normal calc(0.67vw + 1.31vh)/calc(1vw + 1.96vh) BiennaleBold; }
main.home section.third .pin .c1 .t2 {
opacity: 0; }
main.home section.third .pin .c1 .t2 p {
font: normal calc((0.87vw + 1.69vh) * 1.2)/calc((1.17vw + 2.25vh) * 1.2) BiennaleBold; }
main.home section.third .pin .c2 {
width: calc(calc(10.82vw + 29.86vh) * 1.5);
height: calc(calc(10.82vw + 29.86vh) * 1.5);
border-radius: calc(calc(10.82vw + 29.86vh) / 2 * 1.5);
left: calc(50vw - calc(10.82vw + 29.86vh) / 2 * 1.5);
margin-top: calc(50vh - calc(10.82vw + 29.86vh) / 2 * 1.5); }
main.home section.third .pin .c3 {
width: calc(calc(10.82vw + 29.86vh) * 2);
height: calc(calc(10.82vw + 29.86vh) * 2);
border-radius: calc(calc(10.82vw + 29.86vh) / 2 * 2);
left: calc(50vw - calc(10.82vw + 29.86vh) / 2 * 2);
margin-top: calc(50vh - calc(10.82vw + 29.86vh) / 2 * 2); }
main.home section.third .pin .c4 {
width: calc(calc(10.82vw + 29.86vh) * 2.5);
height: calc(calc(10.82vw + 29.86vh) * 2.5);
border-radius: calc(calc(10.82vw + 29.86vh) / 2 * 2.5);
left: calc(50vw - calc(10.82vw + 29.86vh) / 2 * 2.5);
margin-top: calc(50vh - calc(10.82vw + 29.86vh) / 2 * 2.5); }
main.home section.third .pin .c5 {
width: calc(calc(10.82vw + 29.86vh) * 3);
height: calc(calc(10.82vw + 29.86vh) * 3);
border-radius: calc(calc(10.82vw + 29.86vh) / 2 * 3);
left: calc(50vw - calc(10.82vw + 29.86vh) / 2 * 3);
margin-top: calc(50vh - calc(10.82vw + 29.86vh) / 2 * 3); }
main.home section.third .pin .c6 {
width: calc(calc(10.82vw + 29.86vh) * 3.5);
height: calc(calc(10.82vw + 29.86vh) * 3.5);
border-radius: calc(calc(10.82vw + 29.86vh) / 2 * 3.5);
left: calc(50vw - calc(10.82vw + 29.86vh) / 2 * 3.5);
margin-top: calc(50vh - calc(10.82vw + 29.86vh) / 2 * 3.5); }
main.home section.third .pin .c7 {
width: calc(calc(10.82vw + 29.86vh) * 4);
height: calc(calc(10.82vw + 29.86vh) * 4);
border-radius: calc(calc(10.82vw + 29.86vh) / 2 * 4);
left: calc(50vw - calc(10.82vw + 29.86vh) / 2 * 4);
margin-top: calc(50vh - calc(10.82vw + 29.86vh) / 2 * 4); }
main.home section.third .pin .svg {
width: calc(calc(10.82vw + 29.86vh) * 1.7);
position: absolute;
margin-top: calc(50vh - (calc(10.82vw + 29.86vh) * 1.7) / 2.17);
left: calc(50vw - (calc(10.82vw + 29.86vh) * 1.7) / 1.98);
z-index: -1;
opacity: 0;
transform: rotate(-65deg); }
main.fuel {
width: 100%;
height: 430vh;
margin: 0;
padding: 0 0;
background-color: #0e141f; }
main.fuel section.boat-section {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
overflow: hidden; }
main.fuel section.boat-section .bg-shape {
width: 100%;
height: 100vh;
background: linear-gradient(#273b89, #fd2a43) no-repeat;
opacity: 0.1; }
main.fuel section.boat-section .boat {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0; }
main.fuel section.boat-section .boat img.boat-img {
position: absolute;
top: 0;
left: 0;
width: calc(19.86vw + 38.26vh);
height: calc(75.38vw + 145.2vh);
margin-top: 25vh;
margin-left: 50vw;
opacity: 0.3;
z-index: 2; }
main.fuel section.boat-section .boat img.boat-mini-img {
position: absolute;
top: 0;
left: 0;
width: calc((3.63vw + 6.99vh) * 1.5);
height: calc((13.41vw + 25.84vh) * 1.5);
margin-top: 60vh;
margin-left: calc((19.86vw + 38.26vh) * 0.78 + 50vw);
opacity: 0.3; }
main.fuel section.boat-section .boat img.randar-img {
position: absolute;
top: 0;
left: 0;
border-radius: calc((22.39vw + 39.81vh) * 0.9 / 2);
margin-top: calc(50vh - (19.91vh + 11.2vw) * 0.9);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 0.998);
width: calc((22.39vw + 39.81vh) * 0.9);
height: calc((22.39vw + 39.81vh) * 0.9);
transform: rotate(-65deg);
opacity: 0; }
main.fuel section.boat-section .boat .circle-text {
position: absolute;
top: 0;
left: 0;
width: calc((22.39vw + 39.81vh) * 0.9);
height: calc((22.39vw + 39.81vh) * 0.9);
margin-top: calc(50vh - (19.91vh + 11.2vw) * 0.9);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 0.998);
z-index: 3; }
main.fuel section.boat-section .boat .circle-text .p1, main.fuel section.boat-section .boat .circle-text .p2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
color: white;
text-align: center;
padding-top: 0; }
main.fuel section.boat-section .boat img.cloud {
position: absolute;
top: 0;
left: 0;
z-index: 4;
opacity: 0; }
main.fuel section.boat-section .boat img.c1 {
width: calc((19.86vw + 38.26vh) * 0.6);
margin-top: calc(50vh - (19.91vh + 11.2vw) * 1.2);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 1.2); }
main.fuel section.boat-section .boat img.c2 {
width: calc((19.86vw + 38.26vh) * 0.3);
margin-top: calc(50vh + (19.91vh + 11.2vw) * 0.35);
margin-left: calc(100vw - 26.39vw * 0.95 - 39.81vh * 1.2); }
main.fuel section.boat-section .boat img.c3 {
width: calc((19.86vw + 38.26vh) * 0.35);
margin-top: calc(50vh + (19.91vh + 11.2vw) * 0.5);
margin-left: calc(100vw - 26.39vw * 0.5 - 39.81vh * 0.3); }
main.fuel section.boat-section .boat img.ships {
position: absolute;
top: 0;
left: 0;
z-index: 2;
margin-top: 20vh;
width: calc((22.39vw + 39.81vh) * 1.2);
margin-left: calc(100vw - 26.39vw * 1.2 - 39.81vh * 1.2);
opacity: 0; }
main.fuel section.first {
width: 100%;
position: absolute;
margin-top: 27vh;
top: 0;
left: 0;
transition: 0.5s; }
main.fuel section.first .title {
opacity: 0; }
main.fuel section.first .title img {
height: 66px;
margin-left: calc((4.1vw + 7.9vh) * 1.1);
opacity: 0; }
main.fuel section.first .title p {
text-shadow: #fd3453 0px 0px 60px;
color: #ffffff00;
margin: 0;
margin-left: calc(4.1vw + 7.9vh); }
@media (max-width: 1024px) {
main.fuel section.first .title img {
margin-left: 52px; }
main.fuel section.first .title p {
margin-left: 50px; } }
@media (max-width: 767px) {
main.fuel section.first .title img {
margin-left: 6vw;
height: 48px; } }
main.fuel .paragraphs {
position: absolute;
top: 100vh;
left: 0;
width: 60vw;
margin-left: 8.54vw; }
main.fuel .paragraphs section.second {
width: 49vw;
margin-top: 30vh; }
main.fuel .paragraphs section.third,
main.fuel .paragraphs section.fourth {
margin-top: 50vh; }
main.fuel .paragraphs section.third p,
main.fuel .paragraphs section.fourth p {
width: 30vw; }
main.fuel .paragraphs section.third p.text,
main.fuel .paragraphs section.fourth p.text {
width: 420px; }
main.fuel .paragraphs section.second p,
main.fuel .paragraphs section.third p,
main.fuel .paragraphs section.fourth p {
font: normal 2vw/3.4vw BiennaleRegular;
color: white; }
main.fuel .paragraphs section.second p.text,
main.fuel .paragraphs section.third p.text,
main.fuel .paragraphs section.fourth p.text {
font: normal 22px/35px BiennaleRegular;
color: white; }
main.fuel .paragraphs section.third p,
main.fuel .paragraphs section.fourth p {
font: normal 2vw/2.8vw BiennaleRegular;
color: #fd3453; }
@media (max-width: 1600px) {
main.fuel .paragraphs section.second p,
main.fuel .paragraphs section.third p,
main.fuel .paragraphs section.fourth p {
font: normal 2.5vw/3.6vw BiennaleRegular; }
main.fuel .paragraphs section.second p.text,
main.fuel .paragraphs section.third p.text,
main.fuel .paragraphs section.fourth p.text {
font: normal 17px/33px BiennaleRegular; } }
@media (max-width: 1400px) {
main.fuel .paragraphs section.third p.text,
main.fuel .paragraphs section.fourth p.text {
font: normal 17px/33px BiennaleRegular; } }
@media (max-width: 1024px) {
main.fuel .paragraphs section.second p.text,
main.fuel .paragraphs section.third p.text,
main.fuel .paragraphs section.fourth p.text {
width: 340px;
font: normal 15px/22px BiennaleRegular; } }
@media (max-width: 768px) {
main.fuel .paragraphs section.second p.text,
main.fuel .paragraphs section.third p.text,
main.fuel .paragraphs section.fourth p.text {
font: normal 16px/27px BiennaleRegular; } }
@media (max-width: 1024px) {
main.fuel .paragraphs {
margin-left: 50px; } }
@media (max-width: 768px) {
main.fuel .paragraphs {
margin-left: 8vw; } }
@media (max-width: 767px) {
main.fuel {
height: calc(200vh + 200vw);
overflow: hidden; }
main.fuel section.first .title p {
text-shadow: #fd3453 0px 0px 0px; }
main.fuel section.first .title img {
height: 8vw;
opacity: 1; }
main.fuel section.boat-section .bg-shape {
width: 100%;
height: 100vh;
background: linear-gradient(#273b89, #fd2a43) no-repeat;
opacity: 0.1; }
main.fuel section.boat-section .boat {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0; }
main.fuel section.boat-section .boat img.boat-img {
position: absolute;
top: 0;
left: 0;
width: calc((19.86vw + 38.26vh) * 0.7);
height: calc((75.38vw + 145.2vh) * 0.7);
margin-top: 20vh;
margin-left: 22vw;
opacity: 1;
z-index: 2; }
main.fuel section.boat-section .boat img.boat-mini-img {
position: absolute;
top: 0;
left: 0;
width: calc((3.63vw + 6.99vh) * 1.2);
height: calc((13.41vw + 25.84vh) * 1.2);
margin-top: 35vh;
margin-left: calc((19.86vw + 38.26vh) * 0.47 + 29vw);
opacity: 1; }
main.fuel section.boat-section .boat img.randar-img {
position: absolute;
top: 0;
left: 0;
border-radius: calc((22.39vw + 39.81vh) * 0.9 / 2);
margin-top: calc(50vh - (19.91vh + 11.2vw) * 0.9);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 0.998);
width: calc((22.39vw + 39.81vh) * 0.9);
height: calc((22.39vw + 39.81vh) * 0.9);
transform: rotate(-65deg);
opacity: 0; }
main.fuel section.boat-section .boat .circle-text {
position: absolute;
top: 0;
left: 0;
width: 100vw;
margin-top: calc((22.39vw + 39.81vh) * 0.9 * 0.5);
margin-left: 0;
z-index: 3; }
main.fuel section.boat-section .boat .circle-text p {
position: absolute;
width: 100vw;
top: 0;
left: 0;
color: white;
text-align: center;
opacity: 0; }
main.fuel section.boat-section .boat .circle-text .p1 {
margin-top: -4px;
padding-left: 0; }
main.fuel section.boat-section .boat .circle-text .p2 {
margin-top: -1px;
padding-left: 0; }
main.fuel section.boat-section .boat img.cloud {
position: absolute;
top: 0;
left: 0;
z-index: 4;
opacity: 0; }
main.fuel section.boat-section .boat img.c1 {
width: calc((19.86vw + 38.26vh) * 0.4);
margin-top: 55px;
margin-left: 2vw; }
main.fuel section.boat-section .boat img.c2 {
width: calc((19.86vw + 38.26vh) * 0.3);
margin-top: 35vh;
margin-left: 10vw; }
main.fuel section.boat-section .boat img.c3 {
width: calc((19.86vw + 38.26vh) * 0.35);
margin-top: 30vh;
margin-left: 60vw; }
main.fuel section.boat-section .boat img.ships {
position: absolute;
top: 0;
left: 0;
z-index: 2;
margin-top: 10vh;
width: 80vw;
margin-left: 10vw;
opacity: 0; }
main.fuel .mobile {
position: static;
top: 153vh;
width: 100%;
height: 50vh;
opacity: 0; }
main.fuel .mobile .paragraphs {
position: static;
top: 0;
left: 0;
width: auto;
margin-left: 0;
display: flex; }
main.fuel .mobile .paragraphs section.second,
main.fuel .mobile .paragraphs section.third,
main.fuel .mobile .paragraphs section.fourth {
width: 90vw;
flex-shrink: 0;
position: static;
margin-top: 0;
margin: 0 5vw; }
main.fuel .mobile .paragraphs section.second p,
main.fuel .mobile .paragraphs section.third p,
main.fuel .mobile .paragraphs section.fourth p {
width: 100%;
font: normal calc(2.9vw + 1.7vh)/calc(3.3vw + 2vh) BiennaleRegular;
margin: 0; }
main.fuel .mobile .paragraphs section.second p.text,
main.fuel .mobile .paragraphs section.third p.text,
main.fuel .mobile .paragraphs section.fourth p.text {
font: normal calc(2.5vw + 1.3vh)/calc(2.8vw + 1.6vh) BiennaleRegular; }
main.fuel .mobile .paragraphs section.second p.title,
main.fuel .mobile .paragraphs section.third p.title,
main.fuel .mobile .paragraphs section.fourth p.title {
font: normal calc(2.9vw + 1.7vh)/calc(2.9vw + 1.7vh) BiennaleRegular; } }
main.carbon {
width: 100%;
height: 430vh;
margin: 0;
padding: 0 0;
background-color: #0e141f; }
main.carbon section.boat-section {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
overflow: hidden; }
main.carbon section.boat-section .pie-charts {
width: 100%;
height: 100vh;
opacity: 0;
overflow: hidden;
position: relative;
background: black;
z-index: 5;
position: absolute;
background: #101630a3;
display: flex;
justify-content: center; }
main.carbon section.boat-section .pie-charts img {
height: 80%;
padding: 10%;
opacity: 0; }
main.carbon section.boat-section .bg-shape {
width: 100%;
height: 100vh;
background: linear-gradient(#273b89, #9397a4) no-repeat;
opacity: 0.1;
overflow: hidden;
z-index: 3;
position: absolute; }
main.carbon section.boat-section .bg-shape .leaves {
opacity: 0;
width: 100%; }
main.carbon section.boat-section .bg-shape .leaves img {
width: 100%; }
main.carbon section.boat-section .checkmark {
border-radius: 50%;
background-color: #68C700;
border: 1px solid #707070;
position: absolute;
padding: 25px;
top: 0;
left: 0;
opacity: 0;
z-index: 5;
margin-top: calc(50vh - (11.2vw + 19.91vh) * 0.8);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 0.95); }
main.carbon section.boat-section .checkmark i {
color: white;
font-size: 70px; }
main.carbon section.boat-section .boat {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 4; }
main.carbon section.boat-section .boat .boat-img, main.carbon section.boat-section .boat .emissions img {
position: absolute;
top: 0;
left: 0;
height: 490vh;
margin-top: -370vh;
opacity: 0.7;
margin-left: 44vw;
z-index: 2; }
main.carbon section.boat-section .boat .emissions img {
opacity: 0.15; }
main.carbon section.boat-section .boat img.boat-mini-img {
position: absolute;
top: 0;
left: 0;
width: calc((3.63vw + 6.99vh) * 1.5);
height: calc((13.41vw + 25.84vh) * 1.5);
margin-top: 60vh;
margin-left: calc((19.86vw + 38.26vh) * 0.78 + 50vw);
opacity: 0.3; }
main.carbon section.boat-section .boat img.randar-img {
position: absolute;
top: 0;
left: 0;
border-radius: calc((22.39vw + 39.81vh) * 0.9 / 2);
margin-top: calc(50vh - (19.91vh + 11.2vw) * 0.9);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 0.998);
width: calc((22.39vw + 39.81vh) * 0.9);
height: calc((22.39vw + 39.81vh) * 0.9);
transform: rotate(-65deg);
opacity: 0; }
main.carbon section.boat-section .boat .circle-text {
position: absolute;
top: 0;
left: 0;
width: calc((22.39vw + 39.81vh) * 0.9);
height: calc((22.39vw + 39.81vh) * 0.9);
margin-top: calc(50vh - (19.91vh + 11.2vw) * 0.9);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 0.998);
z-index: 3; }
main.carbon section.boat-section .boat .circle-text .p1, main.carbon section.boat-section .boat .circle-text .p2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
color: white;
text-align: center;
padding-top: 0; }
main.carbon section.boat-section .boat img.cloud {
position: absolute;
top: 0;
left: 0;
z-index: 4;
opacity: 0; }
main.carbon section.boat-section .boat img.c1 {
width: calc((19.86vw + 38.26vh) * 0.6);
margin-top: calc(50vh - (19.91vh + 11.2vw) * 1.2);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 1.2); }
main.carbon section.boat-section .boat img.c2 {
width: calc((19.86vw + 38.26vh) * 0.3);
margin-top: calc(50vh + (19.91vh + 11.2vw) * 0.35);
margin-left: calc(100vw - 26.39vw * 0.95 - 39.81vh * 1.2); }
main.carbon section.boat-section .boat img.c3 {
width: calc((19.86vw + 38.26vh) * 0.35);
margin-top: calc(50vh + (19.91vh + 11.2vw) * 0.5);
margin-left: calc(100vw - 26.39vw * 0.5 - 39.81vh * 0.3); }
main.carbon section.boat-section .boat img.ships {
position: absolute;
top: 0;
left: 0;
z-index: 2;
margin-top: 20vh;
width: calc((22.39vw + 39.81vh) * 1.2);
margin-left: calc(100vw - 26.39vw * 1.2 - 39.81vh * 1.2);
opacity: 0; }
main.carbon section.first {
width: 100%;
position: absolute;
margin-top: 27vh;
top: 0;
left: 0;
transition: 0.5s; }
main.carbon section.first .title {
opacity: 0; }
main.carbon section.first .title img {
height: 66px;
margin-left: calc((4.1vw + 7.9vh) * 1.1);
opacity: 0; }
main.carbon section.first .title p {
text-shadow: #9397a4 0px 0px 60px;
color: #ffffff00;
margin: 0;
margin-left: calc(4.1vw + 7.9vh); }
@media (max-width: 1024px) {
main.carbon section.first .title img {
margin-left: 52px; }
main.carbon section.first .title p {
margin-left: 50px; } }
@media (max-width: 767px) {
main.carbon section.first .title img {
margin-left: 6vw;
height: 48px; } }
main.carbon .paragraphs {
position: absolute;
top: 100vh;
left: 0;
width: 60vw;
margin-left: 8.54vw; }
main.carbon .paragraphs section.second {
width: 49vw;
margin-top: 30vh; }
main.carbon .paragraphs section.third,
main.carbon .paragraphs section.fourth {
margin-top: 50vh; }
main.carbon .paragraphs section.third p,
main.carbon .paragraphs section.fourth p {
width: 30vw; }
main.carbon .paragraphs section.third p.text,
main.carbon .paragraphs section.fourth p.text {
width: 420px; }
main.carbon .paragraphs section.second p,
main.carbon .paragraphs section.third p,
main.carbon .paragraphs section.fourth p {
font: normal 2vw/3.4vw BiennaleRegular;
color: white; }
main.carbon .paragraphs section.second p.text,
main.carbon .paragraphs section.third p.text,
main.carbon .paragraphs section.fourth p.text {
font: normal 22px/35px BiennaleRegular;
color: white; }
main.carbon .paragraphs section.third p,
main.carbon .paragraphs section.fourth p {
font: normal 2vw/2.8vw BiennaleRegular;
color: #9397a4; }
@media (max-width: 1600px) {
main.carbon .paragraphs section.second p,
main.carbon .paragraphs section.third p,
main.carbon .paragraphs section.fourth p {
font: normal 2.5vw/3.6vw BiennaleRegular; }
main.carbon .paragraphs section.second p.text,
main.carbon .paragraphs section.third p.text,
main.carbon .paragraphs section.fourth p.text {
font: normal 17px/33px BiennaleRegular; } }
@media (max-width: 1400px) {
main.carbon .paragraphs section.third p.text,
main.carbon .paragraphs section.fourth p.text {
font: normal 17px/33px BiennaleRegular; } }
@media (max-width: 1024px) {
main.carbon .paragraphs section.second p.text,
main.carbon .paragraphs section.third p.text,
main.carbon .paragraphs section.fourth p.text {
width: 340px;
font: normal 15px/22px BiennaleRegular; } }
@media (max-width: 768px) {
main.carbon .paragraphs section.second p.text,
main.carbon .paragraphs section.third p.text,
main.carbon .paragraphs section.fourth p.text {
font: normal 16px/27px BiennaleRegular; } }
@media (max-width: 1024px) {
main.carbon .paragraphs {
margin-left: 50px; } }
@media (max-width: 768px) {
main.carbon .paragraphs {
margin-left: 8vw; } }
@media (max-width: 767px) {
main.carbon {
height: calc(200vh + 200vw);
overflow: hidden; }
main.carbon section.first .title p {
text-shadow: #9397a4 0px 0px 0px; }
main.carbon section.first .title img {
height: 8vw;
opacity: 1; }
main.carbon section.boat-section .bg-shape {
width: 100%;
height: 100vh;
background: linear-gradient(#273b89, #9397a4) no-repeat;
opacity: 0.1; }
main.carbon section.boat-section .checkmark {
border-radius: 50%;
background-color: #68C700;
border: 1px solid #707070;
position: absolute;
padding: 4.5vw;
top: 0;
left: 0;
opacity: 0;
z-index: 5;
margin-top: 20vw;
margin-left: 20vw; }
main.carbon section.boat-section .checkmark i {
color: white;
font-size: 7.3vw; }
main.carbon section.boat-section .boat {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0; }
main.carbon section.boat-section .boat img.boat-img, main.carbon section.boat-section .boat .emissions img {
position: absolute;
top: 0;
left: 0;
width: 180vw;
height: auto;
margin-top: -600vw;
opacity: 0.7;
margin-left: -24vw;
z-index: 2; }
main.carbon section.boat-section .boat .emissions img {
opacity: 0.5; }
main.carbon section.boat-section .boat img.boat-mini-img {
position: absolute;
top: 0;
left: 0;
width: calc((3.63vw + 6.99vh) * 1.2);
height: calc((13.41vw + 25.84vh) * 1.2);
margin-top: 35vh;
margin-left: calc((19.86vw + 38.26vh) * 0.47 + 29vw);
opacity: 1; }
main.carbon section.boat-section .boat img.randar-img {
position: absolute;
top: 0;
left: 0;
border-radius: calc((22.39vw + 39.81vh) * 0.9 / 2);
margin-top: calc(50vh - (19.91vh + 11.2vw) * 0.9);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 0.998);
width: calc((22.39vw + 39.81vh) * 0.9);
height: calc((22.39vw + 39.81vh) * 0.9);
transform: rotate(-65deg);
opacity: 0; }
main.carbon section.boat-section .boat .circle-text {
position: absolute;
top: 0;
left: 0;
width: 100vw;
margin-top: calc((22.39vw + 39.81vh) * 0.9 * 0.5);
margin-left: 0;
z-index: 3; }
main.carbon section.boat-section .boat .circle-text p {
position: absolute;
width: 100vw;
top: 0;
left: 0;
color: white;
text-align: center;
opacity: 0; }
main.carbon section.boat-section .boat .circle-text .p1 {
margin-top: -4px;
padding-left: 0; }
main.carbon section.boat-section .boat .circle-text .p2 {
margin-top: -1px;
padding-left: 0; }
main.carbon section.boat-section .boat img.cloud {
position: absolute;
top: 0;
left: 0;
z-index: 4;
opacity: 0; }
main.carbon section.boat-section .boat img.c1 {
width: calc((19.86vw + 38.26vh) * 0.4);
margin-top: 55px;
margin-left: 2vw; }
main.carbon section.boat-section .boat img.c2 {
width: calc((19.86vw + 38.26vh) * 0.3);
margin-top: 35vh;
margin-left: 10vw; }
main.carbon section.boat-section .boat img.c3 {
width: calc((19.86vw + 38.26vh) * 0.35);
margin-top: 30vh;
margin-left: 60vw; }
main.carbon section.boat-section .boat img.ships {
position: absolute;
top: 0;
left: 0;
z-index: 2;
margin-top: 10vh;
width: 80vw;
margin-left: 10vw;
opacity: 0; }
main.carbon .mobile {
position: static;
top: 153vh;
width: 100%;
height: 50vh;
opacity: 0; }
main.carbon .mobile .paragraphs {
position: static;
top: 0;
left: 0;
width: auto;
margin-left: 0;
display: flex; }
main.carbon .mobile .paragraphs section.second,
main.carbon .mobile .paragraphs section.third,
main.carbon .mobile .paragraphs section.fourth {
width: 90vw;
flex-shrink: 0;
position: static;
margin-top: 0;
margin: 0 5vw; }
main.carbon .mobile .paragraphs section.second p,
main.carbon .mobile .paragraphs section.third p,
main.carbon .mobile .paragraphs section.fourth p {
width: 100%;
font: normal calc(2.9vw + 1.7vh)/calc(3.3vw + 2vh) BiennaleRegular;
margin: 0; }
main.carbon .mobile .paragraphs section.second p.text,
main.carbon .mobile .paragraphs section.third p.text,
main.carbon .mobile .paragraphs section.fourth p.text {
font: normal calc(2.5vw + 1.3vh)/calc(2.8vw + 1.6vh) BiennaleRegular; }
main.carbon .mobile .paragraphs section.second p.title,
main.carbon .mobile .paragraphs section.third p.title,
main.carbon .mobile .paragraphs section.fourth p.title {
font: normal calc(2.9vw + 1.7vh)/calc(2.9vw + 1.7vh) BiennaleRegular; } }
main.data {
width: 100vw;
height: 400vh;
margin: 0;
padding: 0 0;
background-color: #0e141f;
overflow: hidden; }
main.data section.boat-section {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
overflow: hidden; }
main.data section.boat-section .bg-shape {
width: 100%;
height: 100vh;
background: linear-gradient(#273b89, #A67FD8) no-repeat;
opacity: 0.1; }
main.data section.boat-section .screen {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: 0.2; }
main.data section.boat-section .screen .screen-back {
z-index: 1;
position: absolute;
top: 0;
left: 0; }
main.data section.boat-section .screen .screen-back img {
width: calc((11.68vw + 9.51vh) * 3);
height: calc((6.26vw + 12.89vh) * 3);
margin-top: calc(80vh - (6.26vw + 12.89vh) * 2.545);
margin-left: 44vw;
position: absolute;
top: 0;
left: 0; }
main.data section.boat-section .screen .screen-inside, main.data section.boat-section .screen .screen-inside2 {
opacity: 1;
top: 0;
left: 0;
z-index: 0;
position: absolute; }
main.data section.boat-section .screen .screen-inside img, main.data section.boat-section .screen .screen-inside2 img {
width: calc((11.68vw + 9.51vh) * 3);
height: calc((6.26vw + 12.89vh) * 3);
margin-top: calc(80vh - (6.26vw + 12.89vh) * 2.545);
margin-left: 44vw; }
main.data section.boat-section .screen .screen-inside2 img {
opacity: 0; }
main.data section.boat-section .boat {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0; }
main.data section.boat-section .boat img.boat-img {
position: absolute;
top: 0;
left: 0;
width: calc((0.4*11.68vw + 0.4*9.51vh) * 0.9);
height: calc((2*6.26vw + 2*12.89vh) * 0.9);
margin-top: calc(80vh - (6.26vw + 12.89vh) * 2.34);
margin-left: calc(44vw + (11.68vw + 9.51vh) * 1.35);
opacity: 1;
z-index: 2; }
main.data section.boat-section .boat .line {
overflow: hidden;
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/DataWatch/line.svg) no-repeat left;
background-size: auto 100%;
opacity: 0;
width: 0; }
main.data section.boat-section .boat p.delays {
position: absolute;
top: 0;
left: 0;
width: calc((22.39vw + 39.81vh) * 0.8);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 0.95);
margin-top: 35vh;
text-align: center;
z-index: 2; }
main.data section.boat-section .boat .fakos-text {
position: absolute;
top: 0;
left: 0;
width: calc((22.39vw + 39.81vh) * 0.8);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 0.97);
margin-top: calc(50vh - (19.91vh + 11.2vw) * 0.5);
text-align: center;
z-index: 2; }
main.data section.first {
width: 100%;
position: absolute;
margin-top: 27vh;
top: 0;
left: 0;
transition: 0.5s; }
main.data section.first .title {
opacity: 0; }
main.data section.first .title img {
height: 66px;
margin-left: calc(4.1vw + 7.9vh);
opacity: 0; }
main.data section.first .title p {
text-shadow: #2dcbcb 0px 0px 60px;
color: #ffffff00;
margin: 0;
margin-left: calc(4.1vw + 7.9vh); }
@media (max-width: 1024px) {
main.data section.first .title img {
margin-left: 52px; }
main.data section.first .title p {
margin-left: 50px; } }
@media (max-width: 767px) {
main.data section.first .title img {
margin-left: 6vw;
height: 48px; } }
main.data .paragraphs {
position: absolute;
top: 100vh;
left: 0;
width: 60vw;
margin-left: 8.54vw; }
main.data .paragraphs section.second {
width: 49vw;
margin-top: 30vh; }
main.data .paragraphs section.third,
main.data .paragraphs section.fourth {
margin-top: 50vh; }
main.data .paragraphs section.third p,
main.data .paragraphs section.fourth p {
width: 30vw; }
main.data .paragraphs section.third p.text,
main.data .paragraphs section.fourth p.text {
width: 420px; }
main.data .paragraphs section.second p,
main.data .paragraphs section.third p,
main.data .paragraphs section.fourth p {
font: normal 2vw/3.4vw BiennaleRegular;
color: white; }
main.data .paragraphs section.second p.text,
main.data .paragraphs section.third p.text,
main.data .paragraphs section.fourth p.text {
font: normal 22px/35px BiennaleRegular;
color: white; }
main.data .paragraphs section.third p,
main.data .paragraphs section.fourth p {
font: normal 2vw/2.8vw BiennaleRegular;
color: #2dcbcb; }
@media (max-width: 1600px) {
main.data .paragraphs section.second p,
main.data .paragraphs section.third p,
main.data .paragraphs section.fourth p {
font: normal 2.5vw/3.6vw BiennaleRegular; }
main.data .paragraphs section.second p.text,
main.data .paragraphs section.third p.text,
main.data .paragraphs section.fourth p.text {
font: normal 17px/33px BiennaleRegular; } }
@media (max-width: 1400px) {
main.data .paragraphs section.third p.text,
main.data .paragraphs section.fourth p.text {
font: normal 17px/33px BiennaleRegular; } }
@media (max-width: 1024px) {
main.data .paragraphs section.second p.text,
main.data .paragraphs section.third p.text,
main.data .paragraphs section.fourth p.text {
width: 340px;
font: normal 15px/22px BiennaleRegular; } }
@media (max-width: 768px) {
main.data .paragraphs section.second p.text,
main.data .paragraphs section.third p.text,
main.data .paragraphs section.fourth p.text {
font: normal 16px/27px BiennaleRegular; } }
@media (max-width: 1024px) {
main.data .paragraphs {
margin-left: 50px; } }
@media (max-width: 768px) {
main.data .paragraphs {
margin-left: 8vw; } }
@media (max-width: 767px) {
main.data {
height: calc(200vh + 200vw);
overflow: hidden; }
main.data section.first .title p {
text-shadow: #A67FD8 0px 0px 0px; }
main.data section.first .title img {
height: 8vw;
opacity: 1; }
main.data section.boat-section .bg-shape {
width: 100%;
height: 100vh;
background: linear-gradient(#273b89, #A67FD8) no-repeat;
opacity: 0.1; }
main.data section.boat-section .boat img.boat-img {
width: 10vw;
margin-left: 46vw;
margin-top: calc(8vh + 17px);
height: auto;
opacity: 1; }
main.data section.boat-section .boat p.delays {
opacity: 0; }
main.data section.boat-section .screen {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: 1; }
main.data section.boat-section .screen .screen-back img {
width: 78vw;
margin-left: 11vw;
margin-top: 8vh;
height: auto; }
main.data section.boat-section .screen .screen-inside img, main.data section.boat-section .screen .screen-inside2 img {
width: 78vw;
margin-left: 11vw;
margin-top: 8vh;
height: auto; }
main.data section.boat-section .screen .screen-inside2 img {
opacity: 0; }
main.data .mobile {
position: static;
top: 153vh;
width: 100%;
height: 50vh;
opacity: 0; }
main.data .mobile .paragraphs {
position: static;
top: 0;
left: 0;
width: auto;
margin-left: 0;
display: flex; }
main.data .mobile .paragraphs section.second,
main.data .mobile .paragraphs section.third,
main.data .mobile .paragraphs section.fourth {
width: 90vw;
flex-shrink: 0;
position: static;
margin-top: 0;
margin: 0 5vw; }
main.data .mobile .paragraphs section.second p,
main.data .mobile .paragraphs section.third p,
main.data .mobile .paragraphs section.fourth p {
width: 100%;
font: normal calc(2.9vw + 1.7vh)/calc(3.3vw + 2vh) BiennaleRegular;
margin: 0; }
main.data .mobile .paragraphs section.second p.text,
main.data .mobile .paragraphs section.third p.text,
main.data .mobile .paragraphs section.fourth p.text {
font: normal calc(2.5vw + 1.3vh)/calc(2.8vw + 1.6vh) BiennaleRegular; }
main.data .mobile .paragraphs section.second p.title,
main.data .mobile .paragraphs section.third p.title,
main.data .mobile .paragraphs section.fourth p.title {
font: normal calc(2.9vw + 1.7vh)/calc(2.9vw + 1.7vh) BiennaleRegular; } }
main.voyage {
width: 100vw;
height: 430vh;
margin: 0;
padding: 0 0;
background-color: #0e141f;
overflow: hidden; }
main.voyage section.boat-section {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
overflow: hidden; }
main.voyage section.boat-section .bg-shape {
width: 100%;
height: 100vh;
background: linear-gradient(#273b89, #48c9c4) no-repeat;
opacity: 0.1; }
main.voyage section.boat-section .boat {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0; }
main.voyage section.boat-section .boat img.boat-img {
position: absolute;
top: 0;
left: 0;
width: calc((19.86vw + 38.26vh) * 0.2);
height: calc((75.38vw + 145.2vh) * 0.2);
margin-top: calc(80vh - (75.38vw + 145.2vh) * 0.145);
margin-left: 63vw;
opacity: 1;
z-index: 2; }
main.voyage section.boat-section .boat .line {
overflow: hidden;
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/line.svg) no-repeat left;
background-size: auto 100%;
opacity: 0;
width: 0; }
main.voyage section.boat-section .boat p.delays {
position: absolute;
top: 0;
left: 0;
width: calc((22.39vw + 39.81vh) * 0.8);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 0.95);
margin-top: 35vh;
text-align: center;
z-index: 2; }
main.voyage section.boat-section .boat .fakos {
position: absolute;
top: 0;
left: 0;
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/fakos.svg) no-repeat center;
background-size: auto 100%;
width: calc((22.39vw + 39.81vh) * 1.94);
height: calc((22.39vw + 39.81vh) * 1.94);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 1.4696);
margin-top: calc(50vh - (19.91vh + 11.2vw) * 1.947);
opacity: 0; }
main.voyage section.boat-section .boat .fakos-text {
position: absolute;
top: 0;
left: 0;
width: calc((22.39vw + 39.81vh) * 0.8);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 0.97);
margin-top: calc(50vh - (19.91vh + 11.2vw) * 0.5);
text-align: center;
z-index: 2; }
main.voyage .satelite {
position: absolute;
top: 0;
left: 50vw;
width: 50vw;
height: 70vh;
z-index: 2;
overflow: hidden; }
main.voyage .satelite .satelite-img {
position: absolute;
top: 0;
left: 0;
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/Satelite1.png) no-repeat center;
width: calc(39vw);
height: calc(32vw);
background-size: 100% auto;
transform: rotate(62deg);
margin-top: calc(80vh - (75.38vw + 145.2vh) * 0.261);
margin-left: 6vw; }
main.voyage section.first {
width: 100%;
position: absolute;
margin-top: 27vh;
top: 0;
left: 0;
transition: 0.5s; }
main.voyage section.first .title {
opacity: 0; }
main.voyage section.first .title img {
height: 66px;
margin-left: calc(4.1vw + 7.9vh);
opacity: 0; }
main.voyage section.first .title p {
text-shadow: #2dcbcb 0px 0px 60px;
color: #ffffff00;
margin: 0;
margin-left: calc(4.1vw + 7.9vh); }
@media (max-width: 1024px) {
main.voyage section.first .title img {
margin-left: 52px; }
main.voyage section.first .title p {
margin-left: 50px; } }
@media (max-width: 767px) {
main.voyage section.first .title img {
margin-left: 6vw;
height: 48px; } }
main.voyage .paragraphs {
position: absolute;
top: 100vh;
left: 0;
width: 60vw;
margin-left: 8.54vw; }
main.voyage .paragraphs section.second {
width: 49vw;
margin-top: 30vh; }
main.voyage .paragraphs section.third,
main.voyage .paragraphs section.fourth {
margin-top: 50vh; }
main.voyage .paragraphs section.third p,
main.voyage .paragraphs section.fourth p {
width: 30vw; }
main.voyage .paragraphs section.third p.text,
main.voyage .paragraphs section.fourth p.text {
width: 420px; }
main.voyage .paragraphs section.second p,
main.voyage .paragraphs section.third p,
main.voyage .paragraphs section.fourth p {
font: normal 2vw/3.4vw BiennaleRegular;
color: white; }
main.voyage .paragraphs section.second p.text,
main.voyage .paragraphs section.third p.text,
main.voyage .paragraphs section.fourth p.text {
font: normal 22px/35px BiennaleRegular;
color: white; }
main.voyage .paragraphs section.third p,
main.voyage .paragraphs section.fourth p {
font: normal 2vw/2.8vw BiennaleRegular;
color: #2dcbcb; }
@media (max-width: 1600px) {
main.voyage .paragraphs section.second p,
main.voyage .paragraphs section.third p,
main.voyage .paragraphs section.fourth p {
font: normal 2.5vw/3.6vw BiennaleRegular; }
main.voyage .paragraphs section.second p.text,
main.voyage .paragraphs section.third p.text,
main.voyage .paragraphs section.fourth p.text {
font: normal 17px/33px BiennaleRegular; } }
@media (max-width: 1400px) {
main.voyage .paragraphs section.third p.text,
main.voyage .paragraphs section.fourth p.text {
font: normal 17px/33px BiennaleRegular; } }
@media (max-width: 1024px) {
main.voyage .paragraphs section.second p.text,
main.voyage .paragraphs section.third p.text,
main.voyage .paragraphs section.fourth p.text {
width: 340px;
font: normal 15px/22px BiennaleRegular; } }
@media (max-width: 768px) {
main.voyage .paragraphs section.second p.text,
main.voyage .paragraphs section.third p.text,
main.voyage .paragraphs section.fourth p.text {
font: normal 16px/27px BiennaleRegular; } }
@media (max-width: 1024px) {
main.voyage .paragraphs {
margin-left: 50px; } }
@media (max-width: 768px) {
main.voyage .paragraphs {
margin-left: 8vw; } }
@media (max-width: 767px) {
main.voyage {
height: calc(200vh + 200vw);
overflow: hidden; }
main.voyage section.first .title p {
text-shadow: #2dcbcb 0px 0px 0px; }
main.voyage section.first .title img {
height: 8vw;
opacity: 1; }
main.voyage section.boat-section .bg-shape {
width: 100%;
height: 100vh;
background: linear-gradient(#273b89, #48c9c4) no-repeat;
opacity: 0.1; }
main.voyage section.boat-section .boat img.boat-img {
width: calc((19.86vw + 38.26vh) * 0.35);
height: calc((75.38vw + 145.2vh) * 0.35);
margin-top: calc(80vh - (75.38vw + 145.2vh) * 0.33);
margin-left: 25vw;
opacity: 0.3; }
main.voyage section.boat-section .boat p.delays {
opacity: 0; }
main.voyage section.boat-section .boat .fakos-text {
opacity: 0; }
main.voyage .satelite {
width: 100vw;
left: 0; }
main.voyage .satelite .satelite-img {
width: calc(121vw);
height: calc(76vw);
margin-top: calc(80vh - (75.38vw + 145.2vh) * 0.4);
margin-left: 3vw; }
main.voyage .mobile {
position: static;
top: 153vh;
width: 100%;
height: 50vh;
opacity: 0; }
main.voyage .mobile .paragraphs {
position: static;
top: 0;
left: 0;
width: auto;
margin-left: 0;
display: flex; }
main.voyage .mobile .paragraphs section.second,
main.voyage .mobile .paragraphs section.third,
main.voyage .mobile .paragraphs section.fourth {
width: 90vw;
flex-shrink: 0;
position: static;
margin-top: 0;
margin: 0 5vw; }
main.voyage .mobile .paragraphs section.second p,
main.voyage .mobile .paragraphs section.third p,
main.voyage .mobile .paragraphs section.fourth p {
width: 100%;
font: normal calc(2.9vw + 1.7vh)/calc(3.3vw + 2vh) BiennaleRegular;
margin: 0; }
main.voyage .mobile .paragraphs section.second p.text,
main.voyage .mobile .paragraphs section.third p.text,
main.voyage .mobile .paragraphs section.fourth p.text {
font: normal calc(2.5vw + 1.3vh)/calc(2.8vw + 1.6vh) BiennaleRegular; }
main.voyage .mobile .paragraphs section.second p.title,
main.voyage .mobile .paragraphs section.third p.title,
main.voyage .mobile .paragraphs section.fourth p.title {
font: normal calc(2.9vw + 1.7vh)/calc(2.9vw + 1.7vh) BiennaleRegular; } }
main.hull {
width: 100vw;
height: 500vh;
margin: 0;
padding: 0 0;
background-color: #0e141f;
overflow: hidden; }
main.hull section.boat-section {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
overflow: hidden; }
main.hull section.boat-section .bg-shape {
width: 100%;
height: 100vh;
background: linear-gradient(#273b89, #fe9914) no-repeat;
opacity: 0.1; }
main.hull section.boat-section .boat {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0; }
main.hull section.boat-section .boat .boat-img {
position: absolute;
top: 0;
left: 0;
width: 70vw;
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/Ship-tanker2.png) no-repeat center;
background-size: auto 100%;
height: 300vh;
margin-top: -205vh;
opacity: 1;
margin-left: 40vw;
z-index: 2; }
main.hull section.boat-section .boat .big-text {
position: absolute;
top: 0;
left: 0;
width: calc(22.39vw + 39.81vh);
margin-left: calc(100vw - 22.39vw - 39.81vh - 8.33vw);
margin-top: calc(58vh - (19.91vh + 11.2vw) * 0.55);
text-align: center;
z-index: 2; }
main.hull section.boat-section .boat .small-text {
position: absolute;
top: 0;
left: 0;
margin-left: calc(100vw - (26.39vw + 39.81vh) * 0.95);
width: calc((22.39vw + 39.81vh) * 0.8);
margin-top: calc(50vh - (19.91vh + 11.2vw) * 0.35);
text-align: center;
z-index: 2; }
main.hull section.boat-section .boat .dive1 {
position: absolute;
top: 0;
left: 0;
width: calc((9.25vw + 19.14vh) * 0.15);
height: calc((6.25vw + 12.94vh) * 0.15);
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/dive83.gif) no-repeat center;
background-size: auto 100%;
margin-left: calc(100vw - 22.39vw - 8.33vw + 9.25vw * 0.4 - 39.81vh + 19.14vh * 0.4);
margin-top: calc((13.04vw + 43.14vh) * 0.8);
z-index: 2;
opacity: 0; }
main.hull section.boat-section .boat .dive2 {
position: absolute;
top: 0;
left: 0;
width: calc((9.25vw + 19.14vh) * 0.17);
height: calc((6.25vw + 12.94vh) * 0.17);
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/dive83.gif) no-repeat center;
background-size: auto 100%;
transform: scaleX(-1);
margin-top: calc((28.25vw + 37.75vh) * 0.7);
margin-left: calc(100vw - 8.33vw - (9.25vw + 19.14vh) * 0.8);
z-index: 2;
opacity: 0; }
main.hull section.first {
width: 100%;
margin-top: 27vh;
position: absolute;
top: 0;
left: 0;
transition: 0.5s; }
main.hull section.first .title {
opacity: 0; }
main.hull section.first .title img {
height: 66px;
margin-left: calc((4.1vw + 7.9vh) * 1.1);
opacity: 0; }
main.hull section.first .title p {
text-shadow: #fe9914 0px 0px 60px;
color: #ffffff00;
margin: 0;
margin-left: calc(4.1vw + 7.9vh); }
@media (max-width: 1024px) {
main.hull section.first .title img {
margin-left: 52px; }
main.hull section.first .title p {
margin-left: 50px; } }
@media (max-width: 767px) {
main.hull section.first .title img {
margin-left: 6vw;
height: 48px; } }
main.hull .paragraphs {
position: absolute;
top: 100vh;
left: 0;
width: 60vw;
margin-left: 8.54vw; }
main.hull .paragraphs section.second {
width: 49vw;
margin-top: 30vh; }
main.hull .paragraphs section.third,
main.hull .paragraphs section.fourth {
margin-top: 50vh; }
main.hull .paragraphs section.third p,
main.hull .paragraphs section.fourth p {
width: 30vw; }
main.hull .paragraphs section.third p.text,
main.hull .paragraphs section.fourth p.text {
width: 420px; }
main.hull .paragraphs section.second p,
main.hull .paragraphs section.third p,
main.hull .paragraphs section.fourth p {
font: normal 2vw/3.4vw BiennaleRegular;
color: white; }
main.hull .paragraphs section.second p.text,
main.hull .paragraphs section.third p.text,
main.hull .paragraphs section.fourth p.text {
font: normal 22px/35px BiennaleRegular;
color: white; }
main.hull .paragraphs section.third p,
main.hull .paragraphs section.fourth p {
font: normal 2vw/2.8vw BiennaleRegular;
color: #fe9914; }
@media (max-width: 1600px) {
main.hull .paragraphs section.second p,
main.hull .paragraphs section.third p,
main.hull .paragraphs section.fourth p {
font: normal 2.5vw/3.6vw BiennaleRegular; }
main.hull .paragraphs section.second p.text,
main.hull .paragraphs section.third p.text,
main.hull .paragraphs section.fourth p.text {
font: normal 17px/33px BiennaleRegular; } }
@media (max-width: 1400px) {
main.hull .paragraphs section.third p.text,
main.hull .paragraphs section.fourth p.text {
font: normal 17px/33px BiennaleRegular; } }
@media (max-width: 1024px) {
main.hull .paragraphs section.second p.text,
main.hull .paragraphs section.third p.text,
main.hull .paragraphs section.fourth p.text {
width: 340px;
font: normal 15px/22px BiennaleRegular; } }
@media (max-width: 768px) {
main.hull .paragraphs section.second p.text,
main.hull .paragraphs section.third p.text,
main.hull .paragraphs section.fourth p.text {
font: normal 16px/27px BiennaleRegular; } }
@media (max-width: 1024px) {
main.hull .paragraphs {
margin-left: 50px; } }
@media (max-width: 768px) {
main.hull .paragraphs {
margin-left: 8vw; } }
main.hull section.fifth {
width: 100vw;
position: absolute;
top: 400vh;
left: 0;
background-color: #0e141f; }
main.hull section.fifth p.title {
position: relative;
top: 0;
left: 0;
font: normal 2.5vw/3vw BiennaleRegular;
color: #fe9914;
width: 100%;
margin-top: 4.07vh;
text-align: center; }
main.hull section.fifth .chart {
position: relative;
top: 0;
left: 0;
display: flex;
width: 100vw; }
main.hull section.fifth .chart div {
flex-shrink: 0;
background: #0e141f 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 99px #000000a7; }
main.hull section.fifth .chart img {
width: 100%; }
main.hull section.fifth .chart .performance {
width: 5.364vw;
z-index: 4; }
main.hull section.fifth .chart .performance p {
transform: rotate(-90deg);
margin: 0;
position: absolute;
top: 0;
left: 0;
margin-top: 35vh;
margin-left: calc(3.3vw - 85px); }
@media (max-width: 2450px) {
main.hull section.fifth .chart .performance p {
margin-left: calc(4.3vw - 85px); } }
@media (max-width: 1400px) {
main.hull section.fifth .chart .performance p {
margin-left: calc(5vw - 85px); } }
@media (max-width: 1080px) {
main.hull section.fifth .chart .performance p {
margin-left: calc(5.7vw - 85px); } }
main.hull section.fifth .chart .dock {
width: 44.791vw;
z-index: 3;
overflow: hidden; }
main.hull section.fifth .chart .dock .line {
background-color: #80c41c;
height: 0.5vw;
width: 106%;
margin-left: -5%;
margin-top: 35vh; }
main.hull section.fifth .chart .dock p {
width: 43.791vw;
position: absolute;
bottom: 0; }
main.hull section.fifth .chart .polish {
width: 24.87vw;
z-index: 2;
overflow: hidden; }
main.hull section.fifth .chart .polish .line {
background-color: #fe9914;
height: 0.5vw;
width: 110%;
margin-left: -5%;
margin-top: 35vh; }
main.hull section.fifth .chart .polish p {
width: 23.87vw;
position: absolute;
bottom: 0; }
main.hull section.fifth .chart .cleaning {
width: 24.87vw;
z-index: 1;
overflow: hidden; }
main.hull section.fifth .chart .cleaning .line {
background-color: #2dcbcb;
height: 0.5vw;
width: 110%;
margin-left: -5%;
margin-top: 35vh; }
main.hull section.fifth .chart .cleaning p {
width: 23.87vw;
position: absolute;
bottom: 0; }
main.hull section.fifth .chart p {
font: normal 20px/30px BiennaleRegular;
color: white;
margin-top: 25vh;
margin-right: 2vw;
text-align: end; }
main.hull section.fifth p.time {
position: absolute;
bottom: 3vh;
left: 0;
font: normal 20px/30px BiennaleRegular;
color: white;
margin: 0;
margin-left: 48.43vw;
z-index: 3; }
@media (max-width: 767px) {
main.hull section.fifth {
width: 100vw;
height: 50vh;
position: absolute;
top: calc(200vh + 200vw);
left: 0; }
main.hull section.fifth p.title {
position: absolute;
top: 0;
left: 0;
font: normal 4.7vw/7vw BiennaleRegular;
color: #fe9914;
width: 100%;
margin-top: 2.5vh;
text-align: center; }
main.hull section.fifth .chart {
position: absolute;
top: 8vh;
left: 0;
display: flex;
width: 100vw;
height: 73.33%; }
main.hull section.fifth .chart div {
flex-shrink: 0;
background: #0e141f 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 99px #000000a7; }
main.hull section.fifth .chart .performance {
width: 5.364vw;
z-index: 4; }
main.hull section.fifth .chart .performance p {
transform: rotate(-90deg);
margin: 0;
position: absolute;
top: 0;
left: 0;
margin-top: 19vh;
margin-left: -20px;
font-size: 3vw; }
main.hull section.fifth .chart .dock {
width: 44.7vw;
z-index: 3; }
main.hull section.fifth .chart .dock .line {
background-color: #80c41c;
height: 0.5vw;
width: 106%;
margin-left: -5%;
margin-top: 20vh; }
main.hull section.fifth .chart .polish {
width: 24.7vw;
z-index: 2; }
main.hull section.fifth .chart .polish .line {
background-color: #fe9914;
height: 0.5vw;
width: 110%;
margin-left: -5%;
margin-top: 20vh; }
main.hull section.fifth .chart .cleaning {
width: 24.8vw;
z-index: 1; }
main.hull section.fifth .chart .cleaning .line {
background-color: #2dcbcb;
height: 0.5vw;
width: 110%;
margin-left: -5%;
margin-top: 20vh; }
main.hull section.fifth .chart p {
font: normal 3vw/4.2vw BiennaleRegular;
color: white;
margin-top: 10vh;
margin-right: 2vw;
text-align: end; }
main.hull section.fifth p.time {
position: absolute;
bottom: 2.3vh;
left: 0;
font: normal 3vw/2.3vw BiennaleRegular;
color: white;
margin: 0;
margin-left: 48.43vw; } }
@media (max-width: 767px) {
main.hull {
height: calc(250vh + 200vw);
overflow: hidden; }
main.hull section.first .title p {
text-shadow: #fe9914 0px 0px 0px; }
main.hull section.first .title img {
height: 8vw;
opacity: 1; }
main.hull section.boat-section .bg-shape {
width: 100%;
height: 100vh;
background: linear-gradient(#273b89, #fe9914) no-repeat;
opacity: 0.1; }
main.hull section.boat-section .boat {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0; }
main.hull section.boat-section .boat .boat-img {
position: absolute;
top: 0;
left: 0;
width: 80vw;
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/Ship-tanker2.png) no-repeat center;
background-size: auto 100%;
height: 178vh;
margin-top: -113vh;
opacity: 0.7;
margin-left: 20vw;
z-index: 2; }
main.hull .mobile {
position: static;
top: 153vh;
width: 100%;
height: 50vh;
opacity: 0; }
main.hull .mobile .paragraphs {
position: static;
top: 0;
left: 0;
width: auto;
margin-left: 0;
display: flex; }
main.hull .mobile .paragraphs section.second,
main.hull .mobile .paragraphs section.third,
main.hull .mobile .paragraphs section.fourth {
width: 90vw;
flex-shrink: 0;
position: static;
margin-top: 0;
margin: 0 5vw; }
main.hull .mobile .paragraphs section.second p,
main.hull .mobile .paragraphs section.third p,
main.hull .mobile .paragraphs section.fourth p {
width: 100%;
font: normal calc(2.9vw + 1.7vh)/calc(3.3vw + 2vh) BiennaleRegular;
margin: 0; }
main.hull .mobile .paragraphs section.second p.text,
main.hull .mobile .paragraphs section.third p.text,
main.hull .mobile .paragraphs section.fourth p.text {
font: normal calc(2.5vw + 1.3vh)/calc(2.8vw + 1.6vh) BiennaleRegular; }
main.hull .mobile .paragraphs section.second p.title,
main.hull .mobile .paragraphs section.third p.title,
main.hull .mobile .paragraphs section.fourth p.title {
font: normal calc(2.9vw + 1.7vh)/calc(2.9vw + 1.7vh) BiennaleRegular; } }
main.timecharter {
width: 100vw;
height: 400vh;
margin: 0;
padding: 0 0;
background-color: #0e141f;
overflow: hidden; }
main.timecharter section.boat-section {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
overflow: hidden; }
main.timecharter section.boat-section .circle {
width: calc((5.8vw + 10.31vh)/1.4);
height: calc((5.8vw + 10.31vh)/1.4);
background-image: linear-gradient(rgba(252, 239, 98, 0.5) 0%, rgba(252, 239, 98, 0.5) 100%);
backdrop-filter: blur(30px);
border-radius: 100vw;
position: absolute;
top: 28vh;
left: 50.35vw;
z-index: 3;
opacity: 0; }
main.timecharter section.boat-section .circle p {
width: calc((4.68vw + 8.33vh)/1.4);
text-align: center;
color: white;
margin: 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
text-transform: capitalize;
font: normal calc(0.62vw + 1.11vh)/calc(0.98vw + 1.75vh) BiennaleBold;
transition: all 0.1s ease; }
main.timecharter section.boat-section .circle p span {
font: normal calc(1.04vw + 1.85vh)/calc(0.98vw + 1.75vh) BiennaleBold; }
main.timecharter section.boat-section .circle .text2 {
display: none; }
main.timecharter section.boat-section .bg-shape {
width: 100%;
height: 100vh;
opacity: 1;
z-index: 0;
overflow: hidden;
position: absolute;
transform-origin: center center; clip-path: inset(0% round 0%); }
main.timecharter section.boat-section .bg-shape video.mobile-vid {
display: none; }
main.timecharter section.boat-section .bg-shape video.desktop-vid {
display: block; }
main.timecharter section.boat-section video, main.timecharter section.boat-section .gradient-mask {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
transform-origin: center center; object-fit: cover; }
main.timecharter section.boat-section .gradient-mask {
background-image: linear-gradient(#B723FF 0%, #143450 100%);
opacity: 0.18;
z-index: 1; }
main.timecharter section.boat-section .screen {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: 0.2; }
main.timecharter section.boat-section .screen .screen-back {
z-index: 1;
position: absolute;
top: 0;
left: 0; }
main.timecharter section.boat-section .screen .screen-back img {
width: calc((11.68vw + 9.51vh) * 3);
height: calc((6.26vw + 12.89vh) * 3);
margin-top: calc(80vh - (6.26vw + 12.89vh) * 2.545);
margin-left: 44vw;
position: absolute;
top: 0;
left: 0; }
main.timecharter section.boat-section .screen .screen-inside, main.timecharter section.boat-section .screen .screen-inside2 {
opacity: 1;
top: 0;
left: 0;
z-index: 0;
position: absolute; }
main.timecharter section.boat-section .screen .screen-inside img, main.timecharter section.boat-section .screen .screen-inside2 img {
width: calc((11.68vw + 9.51vh) * 3);
height: calc((6.26vw + 12.89vh) * 3);
margin-top: calc(80vh - (6.26vw + 12.89vh) * 2.545);
margin-left: 44vw; }
main.timecharter section.boat-section .screen .screen-inside2 img {
opacity: 0; }
main.timecharter section.boat-section .boat {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0; }
main.timecharter section.boat-section .boat img.boat-img {
position: absolute;
top: 0;
left: 0;
width: calc((0.4*11.68vw + 0.4*9.51vh) * 0.9);
height: calc((2*6.26vw + 2*12.89vh) * 0.9);
margin-top: calc(80vh - (6.26vw + 12.89vh) * 2.34);
margin-left: calc(44vw + (11.68vw + 9.51vh) * 1.35);
opacity: 1;
z-index: 2; }
main.timecharter section.boat-section .boat .line {
overflow: hidden;
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/DataWatch/line.svg) no-repeat left;
background-size: auto 100%;
opacity: 0;
width: 0; }
main.timecharter section.boat-section .boat p.delays {
position: absolute;
top: 0;
left: 0;
width: calc((22.39vw + 39.81vh) * 0.8);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 0.95);
margin-top: 35vh;
text-align: center;
z-index: 2; }
main.timecharter section.boat-section .boat .fakos-text {
position: absolute;
top: 0;
left: 0;
width: calc((22.39vw + 39.81vh) * 0.8);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 0.97);
margin-top: calc(50vh - (19.91vh + 11.2vw) * 0.5);
text-align: center;
z-index: 2; }
main.timecharter section.first {
width: 100%;
position: absolute;
margin-top: 27vh;
top: 0;
left: 0;
transition: 0.5s; }
main.timecharter section.first .title {
opacity: 0; }
main.timecharter section.first .title img {
height: 66px;
margin-left: calc(4.1vw + 7.9vh);
opacity: 0; }
@media only screen and (max-width: 1024px) {
main.timecharter section.first .title img {
margin-left: 50px; } }
main.timecharter section.first .title p {
text-shadow: #2dcbcb 0px 0px 60px;
color: #ffffff00;
margin: 0;
margin-left: calc(4.1vw + 7.9vh); }
main.timecharter section.first .title .f3 {
display: flex; }
main.timecharter section.first .title p.small {
color: white;
font: normal normal normal 1.1vw / 1.7vw BiennaleRegular;
margin: 0;
margin-left: 5vw;
padding-top: 1.8vw;
text-shadow: #ffffff00 0px 0px 0px;
opacity: 0; }
@media (max-width: 1024px) {
main.timecharter section.first .title img {
margin-left: 52px; }
main.timecharter section.first .title p {
margin-left: 50px; } }
@media (max-width: 767px) {
main.timecharter section.first .title img {
margin-left: 6vw;
height: 48px; } }
main.timecharter .paragraphs {
position: absolute;
top: 100vh;
left: 0;
width: calc(100vw - 17.08vw);
margin-left: 8.54vw; }
main.timecharter .paragraphs section.second {
width: 49vw;
margin-top: 30vh; }
main.timecharter .paragraphs section.third video {
opacity: 0; }
main.timecharter .paragraphs section.third,
main.timecharter .paragraphs section.fourth {
display: flex;
margin-top: 50vh;
gap: 4vw; }
@media only screen and (max-width: 1400px) {
main.timecharter .paragraphs section.third,
main.timecharter .paragraphs section.fourth {
margin-top: calc(50vh + 15vw); } }
main.timecharter .paragraphs section.third h2,
main.timecharter .paragraphs section.fourth h2 {
width: 30vw; }
main.timecharter .paragraphs section.fourth .section-tables {
display: flex;
gap: 14px;
max-width: 575px;
width: 100%; }
main.timecharter .paragraphs section.fourth .section-table {
border: 1px solid rgba(252, 239, 98, 0.494);
width: 50%; }
main.timecharter .paragraphs section.fourth .section-table h3 {
border-bottom: 1px solid rgba(252, 239, 98, 0.494);
padding: 17px 33px;
margin: 0;
width: calc(100% - 66px); }
main.timecharter .paragraphs section.fourth .section-table p {
padding: 17px 33px;
width: calc(100% - 66px);
margin: 0; }
main.timecharter .paragraphs section.second h2,
main.timecharter .paragraphs section.third h2,
main.timecharter .paragraphs section.fourth h2 {
font: normal 2vw/3.4vw BiennaleRegular;
color: white;
position: relative; }
main.timecharter .paragraphs section.second h2:before,
main.timecharter .paragraphs section.third h2:before,
main.timecharter .paragraphs section.fourth h2:before {
content: '';
width: 3px;
height: 36px;
background-color: #FCF062;
position: absolute;
left: -1.5vw;
top: 1vw; }
main.timecharter .paragraphs section.second h3,
main.timecharter .paragraphs section.third h3,
main.timecharter .paragraphs section.fourth h3 {
color: #FCF062 !important;
font-weight: 800; }
main.timecharter .paragraphs section.second p, main.timecharter .paragraphs section.second h3,
main.timecharter .paragraphs section.third p,
main.timecharter .paragraphs section.third h3,
main.timecharter .paragraphs section.fourth p,
main.timecharter .paragraphs section.fourth h3 {
font: normal 22px/35px BiennaleRegular;
width: 575px;
color: white; }
@media (max-width: 1600px) {
main.timecharter .paragraphs section.second h2,
main.timecharter .paragraphs section.third h2,
main.timecharter .paragraphs section.fourth h2 {
font: normal 2.5vw/3.6vw BiennaleRegular; }
main.timecharter .paragraphs section.second h2:before,
main.timecharter .paragraphs section.third h2:before,
main.timecharter .paragraphs section.fourth h2:before {
top: 0.8vw;
height: 2.1vw; }
main.timecharter .paragraphs section.second p, main.timecharter .paragraphs section.second h3,
main.timecharter .paragraphs section.third p,
main.timecharter .paragraphs section.third h3,
main.timecharter .paragraphs section.fourth p,
main.timecharter .paragraphs section.fourth h3 {
font: normal 17px/33px BiennaleRegular; }
main.timecharter .paragraphs section.fourth {
gap: 4vw; }
main.timecharter .paragraphs section.fourth .text {
width: 50%; }
main.timecharter .paragraphs section.fourth video {
width: 50%;
object-fit: contain; } }
@media (max-width: 1400px) {
main.timecharter .paragraphs section.third p, main.timecharter .paragraphs section.third h3,
main.timecharter .paragraphs section.fourth p,
main.timecharter .paragraphs section.fourth h3 {
font: normal 17px/33px BiennaleRegular; } }
@media (max-width: 1024px) {
main.timecharter .paragraphs section.second p, main.timecharter .paragraphs section.second h3,
main.timecharter .paragraphs section.third p,
main.timecharter .paragraphs section.third h3,
main.timecharter .paragraphs section.fourth p,
main.timecharter .paragraphs section.fourth h3 {
width: 340px;
font: normal 15px/22px BiennaleRegular; } }
@media (max-width: 768px) {
main.timecharter .paragraphs section.second p, main.timecharter .paragraphs section.second h3,
main.timecharter .paragraphs section.third p,
main.timecharter .paragraphs section.third h3,
main.timecharter .paragraphs section.fourth p,
main.timecharter .paragraphs section.fourth h3 {
font: normal 16px/27px BiennaleRegular; } }
@media (max-width: 1024px) {
main.timecharter .paragraphs {
margin-left: 50px; } }
@media (max-width: 768px) {
main.timecharter .paragraphs {
margin-left: 8vw; } }
@media (max-width: 767px) {
.desktop-mobile-apps {
position: relative; }
main.timecharter {
height: auto;
overflow: hidden; }
main.timecharter section.first {
position: relative; }
main.timecharter section.first .title p {
text-shadow: #FCF062 0px 0px 0px; }
main.timecharter section.first .title img {
height: 8vw;
opacity: 1; }
main.timecharter section.boat-section .bg-shape {
width: 100%;
height: 100vh;
opacity: 1; }
main.timecharter section.boat-section .bg-shape video.desktop-vid {
display: none; }
main.timecharter section.boat-section .bg-shape video.mobile-vid {
display: block; }
main.timecharter section.boat-section .boat img.boat-img {
width: 10vw;
margin-left: 46vw;
margin-top: calc(8vh + 17px);
height: auto;
opacity: 1; }
main.timecharter section.boat-section .boat p.delays {
opacity: 0; }
main.timecharter section.boat-section .screen {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: 1; }
main.timecharter section.boat-section .screen .screen-back img {
width: 78vw;
margin-left: 11vw;
margin-top: 8vh;
height: auto; }
main.timecharter section.boat-section .screen .screen-inside img, main.timecharter section.boat-section .screen .screen-inside2 img {
width: 78vw;
margin-left: 11vw;
margin-top: 8vh;
height: auto; }
main.timecharter section.boat-section .screen .screen-inside2 img {
opacity: 0; }
main.timecharter .mobile {
position: relative;
width: 100%;
opacity: 1; }
main.timecharter .mobile .paragraphs {
position: static;
top: 0;
left: 0;
width: auto;
margin-left: 0;
display: block; }
main.timecharter .mobile .paragraphs .mobile-spacer {
height: 100vh; }
main.timecharter .mobile .paragraphs section.second,
main.timecharter .mobile .paragraphs section.third,
main.timecharter .mobile .paragraphs section.fourth {
position: relative;
width: 90vw;
flex-shrink: 0;
position: static;
margin-top: 0;
margin: 0;
padding: 0 5vw; }
main.timecharter .mobile .paragraphs section.second p,
main.timecharter .mobile .paragraphs section.third p,
main.timecharter .mobile .paragraphs section.fourth p {
width: 100%;
margin: 0; }
main.timecharter .mobile .paragraphs section.second p, main.timecharter .mobile .paragraphs section.second h3,
main.timecharter .mobile .paragraphs section.third p,
main.timecharter .mobile .paragraphs section.third h3,
main.timecharter .mobile .paragraphs section.fourth p,
main.timecharter .mobile .paragraphs section.fourth h3 {
font: normal calc(2.5vw + 1.3vh)/1.8 BiennaleRegular; }
main.timecharter .mobile .paragraphs section.second h2,
main.timecharter .mobile .paragraphs section.third h2,
main.timecharter .mobile .paragraphs section.fourth h2 {
font: normal calc(3.4vw + 2vh)/1.4 BiennaleRegular;
width: 100%; }
main.timecharter .mobile .paragraphs section.second h2:before,
main.timecharter .mobile .paragraphs section.third h2:before,
main.timecharter .mobile .paragraphs section.fourth h2:before {
display: none; }
main.timecharter .mobile .paragraphs section.fourth {
display: block;
padding-bottom: 25vh; }
main.timecharter .mobile .paragraphs section.fourth .text {
display: flex;
flex-direction: column;
gap: 40px;
width: 100%; }
main.timecharter .mobile .paragraphs section.fourth .text > h2, main.timecharter .mobile .paragraphs section.fourth .text p {
margin: 0; }
main.timecharter .mobile .paragraphs section.fourth .section-tables {
display: flex;
gap: 25px;
max-width: 100%;
width: 100%;
flex-direction: column; }
main.timecharter .mobile .paragraphs section.fourth video {
width: 100%;
margin-top: 63px; }
main.timecharter .mobile .paragraphs section.fourth .section-table {
width: 100%; } }
main.navwatch {
width: 100vw;
height: 400vh;
margin: 0;
padding: 0 0;
background-color: #0e141f;
overflow: hidden; }
main.navwatch section.boat-section {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
overflow: hidden; }
main.navwatch section.boat-section .circle {
width: calc((5.8vw + 10.31vh)/1.4);
height: calc((5.8vw + 10.31vh)/1.4);
background-image: linear-gradient(rgba(252, 239, 98, 0.5) 0%, rgba(252, 239, 98, 0.5) 100%);
backdrop-filter: blur(30px);
border-radius: 100vw;
position: absolute;
top: 28vh;
left: 50.35vw;
z-index: 3;
opacity: 0; }
main.navwatch section.boat-section .circle p {
width: calc((4.68vw + 8.33vh)/1.4);
text-align: center;
color: white;
margin: 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
text-transform: capitalize;
font: normal calc(0.62vw + 1.11vh)/calc(0.98vw + 1.75vh) BiennaleBold;
transition: all 0.1s ease; }
main.navwatch section.boat-section .circle p span {
font: normal calc(1.04vw + 1.85vh)/calc(0.98vw + 1.75vh) BiennaleBold; }
main.navwatch section.boat-section .circle .text2 {
display: none; }
main.navwatch section.boat-section .bg-shape {
width: 100%;
height: 100vh;
opacity: 1;
z-index: 0;
overflow: hidden;
position: absolute;
transform-origin: center center; clip-path: inset(0% round 0%); }
main.navwatch section.boat-section .bg-shape video.mobile-vid {
display: none; }
main.navwatch section.boat-section .bg-shape video.desktop-vid {
display: block; }
main.navwatch section.boat-section video, main.navwatch section.boat-section .gradient-mask {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
transform-origin: center center; object-fit: cover; }
main.navwatch section.boat-section .gradient-mask {
background-image: linear-gradient(#B723FF 0%, #143450 100%);
opacity: 0.18;
z-index: 1; }
main.navwatch section.boat-section .screen {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: 0.2; }
main.navwatch section.boat-section .screen .screen-back {
z-index: 1;
position: absolute;
top: 0;
left: 0; }
main.navwatch section.boat-section .screen .screen-back img {
width: calc((11.68vw + 9.51vh) * 3);
height: calc((6.26vw + 12.89vh) * 3);
margin-top: calc(80vh - (6.26vw + 12.89vh) * 2.545);
margin-left: 44vw;
position: absolute;
top: 0;
left: 0; }
main.navwatch section.boat-section .screen .screen-inside, main.navwatch section.boat-section .screen .screen-inside2 {
opacity: 1;
top: 0;
left: 0;
z-index: 0;
position: absolute; }
main.navwatch section.boat-section .screen .screen-inside img, main.navwatch section.boat-section .screen .screen-inside2 img {
width: calc((11.68vw + 9.51vh) * 3);
height: calc((6.26vw + 12.89vh) * 3);
margin-top: calc(80vh - (6.26vw + 12.89vh) * 2.545);
margin-left: 44vw; }
main.navwatch section.boat-section .screen .screen-inside2 img {
opacity: 0; }
main.navwatch section.boat-section .boat {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0; }
main.navwatch section.boat-section .boat img.boat-img {
position: absolute;
top: 0;
left: 0;
width: calc((0.4*11.68vw + 0.4*9.51vh) * 0.9);
height: calc((2*6.26vw + 2*12.89vh) * 0.9);
margin-top: calc(80vh - (6.26vw + 12.89vh) * 2.34);
margin-left: calc(44vw + (11.68vw + 9.51vh) * 1.35);
opacity: 1;
z-index: 2; }
main.navwatch section.boat-section .boat .line {
overflow: hidden;
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/DataWatch/line.svg) no-repeat left;
background-size: auto 100%;
opacity: 0;
width: 0; }
main.navwatch section.boat-section .boat p.delays {
position: absolute;
top: 0;
left: 0;
width: calc((22.39vw + 39.81vh) * 0.8);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 0.95);
margin-top: 35vh;
text-align: center;
z-index: 2; }
main.navwatch section.boat-section .boat .fakos-text {
position: absolute;
top: 0;
left: 0;
width: calc((22.39vw + 39.81vh) * 0.8);
margin-left: calc(100vw - (26.39vw + 39.81vh) * 0.97);
margin-top: calc(50vh - (19.91vh + 11.2vw) * 0.5);
text-align: center;
z-index: 2; }
main.navwatch section.first {
width: 100%;
position: absolute;
margin-top: 27vh;
top: 0;
left: 0;
transition: 0.5s; }
main.navwatch section.first .title {
opacity: 0; }
main.navwatch section.first .title img {
height: 66px;
margin-left: calc(4.1vw + 7.9vh);
opacity: 0; }
@media only screen and (max-width: 1024px) {
main.navwatch section.first .title img {
margin-left: 50px; } }
main.navwatch section.first .title p {
text-shadow: #2dcbcb 0px 0px 60px;
color: #ffffff00;
margin: 0;
margin-left: calc(4.1vw + 7.9vh); }
main.navwatch section.first .title .f3 {
display: flex; }
main.navwatch section.first .title p.small {
color: white;
font: normal normal normal 1.1vw / 1.7vw BiennaleRegular;
margin: 0;
margin-left: 5vw;
padding-top: 1.8vw;
text-shadow: #ffffff00 0px 0px 0px;
opacity: 0; }
@media (max-width: 1024px) {
main.navwatch section.first .title img {
margin-left: 52px; }
main.navwatch section.first .title p {
margin-left: 50px; } }
@media (max-width: 767px) {
main.navwatch section.first .title img {
margin-left: 6vw;
height: 48px; } }
main.navwatch .paragraphs {
position: absolute;
top: 100vh;
left: 0;
width: calc(100vw - 17.08vw);
margin-left: 8.54vw; }
main.navwatch .paragraphs section.second {
width: 49vw;
margin-top: 30vh; }
main.navwatch .paragraphs section.third video {
opacity: 0; }
main.navwatch .paragraphs section.third,
main.navwatch .paragraphs section.fourth,
main.navwatch .paragraphs section.fifth {
display: flex;
margin-top: 50vh;
gap: 4vw; }
@media only screen and (max-width: 1400px) {
main.navwatch .paragraphs section.third,
main.navwatch .paragraphs section.fourth,
main.navwatch .paragraphs section.fifth {
margin-top: calc(50vh + 15vw); } }
main.navwatch .paragraphs section.third h2,
main.navwatch .paragraphs section.fourth h2,
main.navwatch .paragraphs section.fifth h2 {
width: 30vw; }
main.navwatch .paragraphs section.third ul,
main.navwatch .paragraphs section.fourth ul,
main.navwatch .paragraphs section.fifth ul {
padding: 0;
list-style: none;
margin-top: 40px;
margin-bottom: 0; }
main.navwatch .paragraphs section.third ul li,
main.navwatch .paragraphs section.fourth ul li,
main.navwatch .paragraphs section.fifth ul li {
border-bottom: 1px solid rgba(100, 140, 242, 0.49);
padding: 14px 0;
color: white;
padding-left: 90px;
position: relative; }
main.navwatch .paragraphs section.third ul li:before,
main.navwatch .paragraphs section.fourth ul li:before,
main.navwatch .paragraphs section.fifth ul li:before {
background-color: #648CF2;
width: 4px;
height: 4px;
left: 0;
position: absolute;
top: 50%;
content: '';
border-radius: 50%; }
main.navwatch .paragraphs section.third ul li:first-child,
main.navwatch .paragraphs section.fourth ul li:first-child,
main.navwatch .paragraphs section.fifth ul li:first-child {
border-top: 1px solid rgba(100, 140, 242, 0.49); }
main.navwatch .paragraphs section.second h2,
main.navwatch .paragraphs section.third h2,
main.navwatch .paragraphs section.fourth h2,
main.navwatch .paragraphs section.fifth h2 {
font: normal 2vw/3.4vw BiennaleRegular;
color: white;
position: relative; }
main.navwatch .paragraphs section.second h2:before,
main.navwatch .paragraphs section.third h2:before,
main.navwatch .paragraphs section.fourth h2:before,
main.navwatch .paragraphs section.fifth h2:before {
content: '';
width: 3px;
height: 36px;
background-color: #648CF2;
position: absolute;
left: -1.5vw;
top: 1vw; }
main.navwatch .paragraphs section.second h3,
main.navwatch .paragraphs section.third h3,
main.navwatch .paragraphs section.fourth h3,
main.navwatch .paragraphs section.fifth h3 {
color: #648CF2 !important;
font-weight: 800; }
main.navwatch .paragraphs section.second p, main.navwatch .paragraphs section.second h3, main.navwatch .paragraphs section.second li,
main.navwatch .paragraphs section.third p,
main.navwatch .paragraphs section.third h3,
main.navwatch .paragraphs section.third li,
main.navwatch .paragraphs section.fourth p,
main.navwatch .paragraphs section.fourth h3,
main.navwatch .paragraphs section.fourth li,
main.navwatch .paragraphs section.fifth p,
main.navwatch .paragraphs section.fifth h3,
main.navwatch .paragraphs section.fifth li {
font: normal 22px/35px BiennaleRegular;
width: 575px;
color: white; }
@media (max-width: 1600px) {
main.navwatch .paragraphs section.second h2,
main.navwatch .paragraphs section.third h2,
main.navwatch .paragraphs section.fourth h2,
main.navwatch .paragraphs section.fifth h2 {
font: normal 2.5vw/3.6vw BiennaleRegular; }
main.navwatch .paragraphs section.second h2:before,
main.navwatch .paragraphs section.third h2:before,
main.navwatch .paragraphs section.fourth h2:before,
main.navwatch .paragraphs section.fifth h2:before {
top: 0.8vw;
height: 2.1vw; }
main.navwatch .paragraphs section.second p, main.navwatch .paragraphs section.second h3, main.navwatch .paragraphs section.second li,
main.navwatch .paragraphs section.third p,
main.navwatch .paragraphs section.third h3,
main.navwatch .paragraphs section.third li,
main.navwatch .paragraphs section.fourth p,
main.navwatch .paragraphs section.fourth h3,
main.navwatch .paragraphs section.fourth li,
main.navwatch .paragraphs section.fifth p,
main.navwatch .paragraphs section.fifth h3,
main.navwatch .paragraphs section.fifth li {
font: normal 17px/33px BiennaleRegular; }
main.navwatch .paragraphs section.fifth {
gap: 4vw; }
main.navwatch .paragraphs section.fifth .text {
width: 50%; }
main.navwatch .paragraphs section.fifth video {
width: 50%;
object-fit: contain; } }
@media (max-width: 1400px) {
main.navwatch .paragraphs section.third p, main.navwatch .paragraphs section.third h3, main.navwatch .paragraphs section.third li,
main.navwatch .paragraphs section.fourth p,
main.navwatch .paragraphs section.fourth h3,
main.navwatch .paragraphs section.fourth li,
main.navwatch .paragraphs section.fifth p,
main.navwatch .paragraphs section.fifth h3,
main.navwatch .paragraphs section.fifth li {
font: normal 17px/33px BiennaleRegular; } }
@media (max-width: 1024px) {
main.navwatch .paragraphs section.second p, main.navwatch .paragraphs section.second h3, main.navwatch .paragraphs section.second li,
main.navwatch .paragraphs section.third p,
main.navwatch .paragraphs section.third h3,
main.navwatch .paragraphs section.third li,
main.navwatch .paragraphs section.fourth p,
main.navwatch .paragraphs section.fourth h3,
main.navwatch .paragraphs section.fourth li,
main.navwatch .paragraphs section.fifth p,
main.navwatch .paragraphs section.fifth h3,
main.navwatch .paragraphs section.fifth li {
width: 340px;
font: normal 15px/22px BiennaleRegular; } }
@media (max-width: 768px) {
main.navwatch .paragraphs section.second p, main.navwatch .paragraphs section.second h3, main.navwatch .paragraphs section.second li,
main.navwatch .paragraphs section.third p,
main.navwatch .paragraphs section.third h3,
main.navwatch .paragraphs section.third li,
main.navwatch .paragraphs section.fourth p,
main.navwatch .paragraphs section.fourth h3,
main.navwatch .paragraphs section.fourth li,
main.navwatch .paragraphs section.fifth p,
main.navwatch .paragraphs section.fifth h3,
main.navwatch .paragraphs section.fifth li {
font: normal 16px/27px BiennaleRegular; } }
@media (max-width: 1024px) {
main.navwatch .paragraphs {
margin-left: 50px; } }
@media (max-width: 768px) {
main.navwatch .paragraphs {
margin-left: 8vw; } }
@media (max-width: 767px) {
.desktop-mobile-apps {
position: relative; }
main.navwatch {
height: auto;
overflow: hidden; }
main.navwatch section.first {
position: relative; }
main.navwatch section.first .title p {
text-shadow: #648CF2 0px 0px 0px; }
main.navwatch section.first .title img {
height: 8vw;
opacity: 1; }
main.navwatch section.boat-section .bg-shape {
width: 100%;
height: 100vh;
opacity: 1; }
main.navwatch section.boat-section .bg-shape video.desktop-vid {
display: none; }
main.navwatch section.boat-section .bg-shape video.mobile-vid {
display: block; }
main.navwatch section.boat-section .boat img.boat-img {
width: 10vw;
margin-left: 46vw;
margin-top: calc(8vh + 17px);
height: auto;
opacity: 1; }
main.navwatch section.boat-section .boat p.delays {
opacity: 0; }
main.navwatch section.boat-section .screen {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: 1; }
main.navwatch section.boat-section .screen .screen-back img {
width: 78vw;
margin-left: 11vw;
margin-top: 8vh;
height: auto; }
main.navwatch section.boat-section .screen .screen-inside img, main.navwatch section.boat-section .screen .screen-inside2 img {
width: 78vw;
margin-left: 11vw;
margin-top: 8vh;
height: auto; }
main.navwatch section.boat-section .screen .screen-inside2 img {
opacity: 0; }
main.navwatch .mobile {
position: relative;
width: 100%;
opacity: 1; }
main.navwatch .mobile .paragraphs {
position: static;
top: 0;
left: 0;
width: auto;
margin-left: 0;
display: block; }
main.navwatch .mobile .paragraphs .mobile-spacer {
height: 100vh; }
main.navwatch .mobile .paragraphs section.second,
main.navwatch .mobile .paragraphs section.third,
main.navwatch .mobile .paragraphs section.fourth,
main.navwatch .mobile .paragraphs section.fifth {
position: relative;
width: 90vw;
flex-shrink: 0;
position: static;
margin-top: 0;
margin: 0;
padding: 0 5vw; }
main.navwatch .mobile .paragraphs section.second p,
main.navwatch .mobile .paragraphs section.third p,
main.navwatch .mobile .paragraphs section.fourth p,
main.navwatch .mobile .paragraphs section.fifth p {
width: 100%;
margin: 0; }
main.navwatch .mobile .paragraphs section.second p, main.navwatch .mobile .paragraphs section.second h3, main.navwatch .mobile .paragraphs section.second li,
main.navwatch .mobile .paragraphs section.third p,
main.navwatch .mobile .paragraphs section.third h3,
main.navwatch .mobile .paragraphs section.third li,
main.navwatch .mobile .paragraphs section.fourth p,
main.navwatch .mobile .paragraphs section.fourth h3,
main.navwatch .mobile .paragraphs section.fourth li,
main.navwatch .mobile .paragraphs section.fifth p,
main.navwatch .mobile .paragraphs section.fifth h3,
main.navwatch .mobile .paragraphs section.fifth li {
font: normal calc(2.5vw + 1.3vh)/1.8 BiennaleRegular; }
main.navwatch .mobile .paragraphs section.second h2,
main.navwatch .mobile .paragraphs section.third h2,
main.navwatch .mobile .paragraphs section.fourth h2,
main.navwatch .mobile .paragraphs section.fifth h2 {
font: normal calc(3.4vw + 2vh)/1.4 BiennaleRegular;
width: 100%; }
main.navwatch .mobile .paragraphs section.second h2:before,
main.navwatch .mobile .paragraphs section.third h2:before,
main.navwatch .mobile .paragraphs section.fourth h2:before,
main.navwatch .mobile .paragraphs section.fifth h2:before {
display: none; }
main.navwatch .mobile .paragraphs section.fifth {
display: block;
padding-bottom: 25vh; }
main.navwatch .mobile .paragraphs section.fifth .text {
display: flex;
flex-direction: column;
gap: 40px;
width: 100%; }
main.navwatch .mobile .paragraphs section.fifth .text > h2, main.navwatch .mobile .paragraphs section.fifth .text p {
margin: 0; }
main.navwatch .mobile .paragraphs section.fifth video {
width: 100%;
margin-top: 63px; } }
main.plain {
background-color: #0e141f; }
main.plain section.plain-intro .section-in {
color: white;
font-family: BiennaleRegular;
padding: 141px 0;
margin: 0 auto;
width: 90%;
max-width: 1000px; }
main.plain section.plain-intro .section-in a {
color: #81c41c; }
main.plain section.plain-intro .section-in .title h2 {
font-weight: 500;
font-size: 3em; }
main.plain section.plain-intro .section-in .content p {
line-height: 1.6; }
main.plain section.plain-intro .section-in .content h4, main.plain section.plain-intro .section-in .content h5, main.plain section.plain-intro .section-in .content h3 {
font-weight: 600; }
main.plain section.plain-intro .section-in .content h4 {
font-size: 1.7em; }
main.plain section.plain-intro .section-in .content h3 {
font-size: 2em; }
main.plain section.plain-intro .section-in .content h5 {
font-size: 1.4em; }
main.plain .tablepress .odd td {
background-color: #121927; }
main.plain .tablepress .even td {
background-color: #090c13; }
main.plain .dataTables_info, main.plain .dataTables_paginate, main.plain .dataTables_length, main.plain .dataTables_filter {
display: none; }
main.plain .tablepress tfoot th, main.plain .tablepress thead th {
background-color: #81c41c; }
main.plain .tablepress .row-hover tr:hover td {
background-color: #090c13; }
main.plain .tablepress .sorting:hover, main.plain .tablepress .sorting_asc, main.plain .tablepress .sorting_desc {
background-color: #81c41c; }
main.plain .dataTables_wrapper {
width: 100%;
overflow: scroll; } .desktop-mobile-apps {
padding-bottom: 1.2vw;
background-color: rgba(129, 196, 28, 0.89); }
.desktop-mobile-apps .desktop-mobile-apps__heading {
color: #04134A;
font-size: 70px;
padding-top: 5vw; }
@media (max-width: 1250px) {
.desktop-mobile-apps .desktop-mobile-apps__heading {
padding-top: 6vw; } }
.desktop-mobile-apps .play-store {
display: flex;
width: 100%;
justify-content: center;
padding-top: 2vw;
gap: 12px; }
.desktop-mobile-apps .play-store div {
max-width: 240px;
width: 13.5vw;
min-width: 150px; }
.desktop-mobile-apps .play-store div img {
width: 100%; }
.desktop-mobile-apps .screenshots {
display: flex;
overflow: hidden;
padding-top: 70px;
gap: 0px;
margin-left: -29vw; }
.desktop-mobile-apps .screenshots .screenshot {
height: 25vw;
min-height: 90px; }
.desktop-mobile-apps .screenshots .screenshot img {
height: 100%; }
footer h3, .desktop-mobile-apps h3 {
margin: 0;
padding: 0;
text-align: center;
font: normal normal 105px BiennaleRegular;
padding-top: 185px;
color: #071447;
box-sizing: border-box;
transition: all 0.1s ease; }
footer {
width: 100%;
height: 662px;
background-color: #81c41c;
bottom: 0;
z-index: 2;
opacity: 0; }
footer .email {
width: 466px;
height: 111px;
margin-top: 39px;
margin-left: calc(50vw - 233px);
transition: all 0.1s ease; }
footer .email .button,
footer .email button,
footer .email input[type="button"],
footer .email input[type="reset"],
footer .email input[type="submit"] {
width: 107px;
height: 107px;
border-width: 0px;
box-sizing: border-box;
position: fixed;
border-radius: 50px;
transition: all 0.1s ease;
background: url(//www.ship-watch.com/wp-content/themes/shipwatch/assets/images/Button1.png) no-repeat center;
background-size: 100px 100px;
cursor: pointer; }
footer .email p.submit {
position: absolute;
right: 0;
width: 107px;
height: 107px;
margin-right: calc(50vw - 224px);
margin-top: -72px; }
footer .email .wpcf7 form.invalid .wpcf7-response-output,
footer .email .wpcf7 form.unaccepted .wpcf7-response-output {
border: none;
color: red;
margin-top: 61px;
font-family: BiennaleMedium; }
footer .email .wpcf7-not-valid-tip {
color: #dc3232;
font-size: 1em;
font-weight: normal;
display: block;
position: absolute;
top: 0;
margin-left: 47px;
margin-top: -19px;
font-family: BiennaleMedium; }
footer .email .wpcf7 form.failed .wpcf7-response-output,
footer .email .wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232;
border: none;
color: red;
margin-top: 56px;
font-family: BiennaleMedium; }
footer .email .wpcf7 form .wpcf7-response-output {
margin: 57px 0.5em 1em;
padding: 0.2em 1em;
border: none;
font-family: 'BiennaleMedium'; }
footer .menu {
margin-top: 98px;
display: flex;
transition: all 0.1s ease; }
footer .menu img {
width: 251px;
height: auto;
margin-left: 59px;
transition: all 0.1s ease; }
footer .menu > img {
width: 147px;
top: -26px;
position: relative; }
@media only screen and (max-width: 767px) {
footer .menu > img {
top: 0px; } }
footer .menu p {
margin-top: 10px;
font: normal normal 18px/22px BiennaleRegular;
color: #071447;
margin-left: 45px;
transition: all 0.1s ease; }
footer .menu #footer-menu {
margin-top: 10px;
margin-left: 7px;
transition: all 0.1s ease;
position: absolute;
right: calc(59px + 260px); }
footer .menu #footer-menu ul {
padding: 0;
margin: 0;
display: flex;
list-style-type: none;
transition: all 0.1s ease; }
footer .menu a {
color: #071447;
text-align: center;
margin: 0 22px;
text-decoration: none;
font: normal normal 18px/22px BiennaleRegular;
transition: all 0.2s ease; }
footer .menu a:hover {
color: white; }
footer #tweeter {
right: 113px;
bottom: 48px; }
footer #linkedin {
right: 53px;
bottom: 48px; }
footer .fab {
width: 36px;
height: 36px;
color: white;
position: absolute;
font-size: 36px;
transition: 0.2s ease;
cursor: pointer;
display: none; }
footer .fab:hover {
color: #071447; }
@media (max-width: 1920px) {
.desktop-mobile-apps .screenshots {
margin-left: -29vw; }
.desktop-mobile-apps .screenshots .screeshot {
height: 25vw; } }
@media (max-width: 1600px) {
.desktop-mobile-apps {
padding-bottom: 99px; }
.desktop-mobile-apps .desktop-mobile-apps__heading {
padding-top: 99px;
font-size: 50px; }
.desktop-mobile-apps .screenshots {
padding-top: 50px; }
footer {
height: 540px; }
footer h3 {
font-size: 73px;
padding-top: 99px; }
footer .email {
width: 326px;
height: 78px;
margin-top: 39px;
margin-left: calc(50vw - 163px); }
footer .email input[type="email"] {
width: 208px;
margin-left: 24.5px;
top: 7px;
font-size: 18px; }
footer .email .button,
footer .email button,
footer .email input[type="button"],
footer .email input[type="reset"],
footer .email input[type="submit"] {
width: 75px;
height: 75px;
background-size: 70px 70px; }
footer .email p.submit {
width: 75px;
height: 75px;
margin-right: calc(50vw - 151px);
margin-top: -73px; }
footer .email .wpcf7-not-valid-tip {
font-size: 12px;
width: 210px; }
footer .menu {
margin-top: 140px; }
footer .menu p {
font-size: 16px; }
footer .menu #footer-menu ul {
text-align: center;
position: relative; }
footer .menu a {
text-align: center;
margin: 0 10px;
font-size: 16px; } }
@media (max-width: 1572px) {
.desktop-mobile-apps {
padding-bottom: 99px; }
.desktop-mobile-apps .desktop-mobile-apps__heading {
padding-top: 99px;
font-size: 50px; }
.desktop-mobile-apps .screenshots {
padding-top: 50px; }
footer h3 {
font-size: 73px;
padding-top: 99px; }
footer .email {
width: 326px;
height: 78px;
margin-top: 39px;
margin-left: calc(50vw - 163px); }
footer .email input[type="text"] {
width: 208px;
margin-left: 24.5px;
top: 25px;
font-size: 18px; }
footer .email input[type="submit"] {
width: 75px;
height: 75px;
background-size: 70px 70px; }
footer .menu {
margin-top: 140px; }
footer .menu p {
font-size: 16px;
position: absolute;
bottom: 72px;
text-align: center;
padding: 0;
margin: 0;
left: 220px; }
footer .menu #footer-menu {
margin-top: 10px;
margin-left: 0px;
width: 596px;
position: absolute;
bottom: 40px;
left: 226px; }
footer .menu #footer-menu ul {
text-align: center;
position: relative; }
footer .menu a {
color: #071447;
text-align: center;
margin: 0 22px;
font-size: 16px; } }
@media (max-width: 1572px) and (max-width: 1090px) {
footer .menu p {
left: 330px; }
footer .menu #footer-menu {
left: 322px; }
footer .menu a {
margin: 0 6px; } }
@media (max-width: 1120px) {
.desktop-mobile-apps {
padding-bottom: 55px; }
.desktop-mobile-apps .desktop-mobile-apps__heading {
font-size: 39px; }
.desktop-mobile-apps .screenshots {
padding-top: 35px; }
footer {
height: 526px; }
footer h3 {
font-size: 44px;
padding-top: 55px; }
footer .email {
width: 282px;
height: 68px;
margin-left: calc(50vw - 149px);
margin-top: 18px; }
footer .email input[type="email"] {
width: 170px;
top: 0;
margin-left: 26px;
font-size: 16px; }
footer .email input[type="submit"] {
width: 68px;
height: 68px;
background-size: 65px 65px; }
footer .email p.submit {
margin-right: calc(50vw - 130px);
margin-top: -75px; }
footer .email .wpcf7-not-valid-tip {
margin-left: 37px; }
footer .email .wpcf7 form.failed .wpcf7-response-output,
footer .email .wpcf7 form.aborted .wpcf7-response-output,
footer .email .wpcf7 form.invalid .wpcf7-response-output,
footer .email .wpcf7 form.unaccepted .wpcf7-response-output {
margin-top: 0; }
footer .email .wpcf7-not-valid-tip {
font-size: 10px; }
footer .menu {
margin-top: 69px; }
footer .menu img {
width: 228px;
position: relative;
margin-left: calc(50vw - 114px); }
footer .menu p {
font-size: 16px;
position: absolute;
bottom: 10px;
width: 100vw;
text-align: center;
padding: 0;
margin: 0;
left: 0; }
footer .menu #tweeter {
left: calc(50vw - 51px);
bottom: 150px; }
footer .menu #linkedin {
right: calc(50vw - 51px);
bottom: 150px; }
footer .menu #footer-menu {
margin-top: 10px;
margin-left: 0px;
width: 100vw;
position: absolute;
bottom: 40px;
left: 0vw; }
footer .menu #footer-menu ul {
display: block;
text-align: center;
position: relative; }
footer .menu a {
color: #071447;
text-align: center;
margin: 0 22px;
font-size: 16px; } }
@media (max-width: 768px) {
.desktop-mobile-apps .desktop-mobile-apps__heading {
font-size: 30px; }
footer h3 {
font-size: 34px; }
footer .email {
width: 225px;
height: 54.4px;
margin-left: calc(50vw - 225px / 2);
margin-top: 18px; }
footer .email input[type="email"] {
width: 148px;
top: -7px;
margin-left: 16px;
font-size: 14px; }
footer .email input[type="submit"] {
width: 53px;
height: 53px;
margin-left: 2px;
margin-top: 1px;
background-size: 50px 50px; }
footer .email p.submit {
margin-right: calc(50vw - 133px); }
footer .menu {
margin-top: 110px; }
footer .menu img {
width: 195px;
height: 115px;
margin-left: calc(50vw - 195px / 2); }
footer .menu p {
font-size: 14px; }
footer .menu #tweeter {
left: calc(50vw - 40px);
bottom: 150px; }
footer .menu #linkedin {
right: calc(50vw - 40px);
bottom: 150px; }
footer .menu .fab {
width: 28px;
height: 28px;
font-size: 26px; }
footer .menu a {
font-size: 14px; } }
.footer-mobile {
display: none; }
.grecaptcha-badge {
visibility: hidden !important; }
.certificate {
position: absolute;
right: 59px; }
.certificate.only-low-res {
display: none;
text-align: center;
position: relative;
right: unset;
padding-top: 10px; }
.certificate.only-low-res img {
margin-top: 0; }
@media (max-width: 1280px) {
.certificate {
right: 31px; }
.certificate img {
width: 210px !important;
height: auto !important; } }
@media (max-width: 1120px) {
.certificate {
display: none; }
.certificate.only-low-res {
display: block; } }
.certificate img {
margin-left: 0 !important;
margin-top: -18px; }section .title {
position: relative;
width: 100%;
}
.floating-button {
position: absolute;
bottom: 20px;
right: 50px;
opacity: 0;
visibility: hidden;
font: normal 15px BiennaleRegular;
cursor: pointer;
pointer-events: all;
z-index: 1;
}
.floating-button a {
width: 100%;
height: 100%;
display: block;
z-index: 14;
position: absolute;
}
.floating-button .floating-button__top {
position: relative;
border-radius: 20px;
width: calc(76px + 1.7vw);
height: calc(76px + 1.7vw);
overflow: hidden;
}
.floating-button .floating-button__top .floating-button__top-image {
width: 100%;
height: 100%;
background-color: #80C420;
transition: 0.3s background-color;
}
.floating-button .floating-button__top .floating-button__top-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
transform: scale(1);
transition: 0.3s transform;
margin-left: unset !important;
}
.floating-button:hover .floating-button__top .floating-button__top-image img {
transform: scale(1.07);
}
.floating-button .floating-button__top .floating-button__play {
position: absolute;
top: 51%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 11;
overflow: hidden;
aspect-ratio: 1;
top: 51%;
width: calc(14px + 0.3vw);
}
.floating-button .floating-button__top .floating-button__play svg {
height: 100%;
object-fit: cover;
width: 100%;
}
.floating-button .floating-button__bottom {
color: white;
text-align: center;
margin-top: calc(10px + 0.24vw);
font-size: calc(8px + 0.3vw);
}
@media only screen and (max-width: 1024px) {
.mobile-menu .floating-button {
display: none;
}
.floating-button {
font: normal 13px BiennaleRegular;
right: 5vw;
}
.floating-button .floating-button__top {
width: 80px;
height: 80px;
margin: 0 auto;
}
.floating-button .floating-button_top .floating-button_play {
width: 14px;
}
}
@media only screen and (max-width: 768px) {
main .floating-button {
display: none;
}
.mobile-menu .floating-button {
display: block;
right: unset;
left: 50%; bottom: 14vh;
top: unset;
transform: translate(-50%, -50%);
}
.floating-button .floating-button__bottom {
color: white;
margin-top: calc(10px + 0.24vw);
font-size: 13px;
}
}
.mobile-menu ul {
padding-top: 16vh;
}
@media only screen and (max-width: 768px) {
.mobile-menu ul li {
padding-top: 25px;
}
}
section.data .floating-button .floating-button__top .floating-button__top-image {
background-color: #a382d5;
}
section.fuel .floating-button .floating-button__top .floating-button__top-image {
background-color: #f53e58;
}
section.voyage .floating-button .floating-button__top .floating-button__top-image {
background-color: #48caca;
}
section.hull .floating-button .floating-button__top .floating-button__top-image {
background-color: #f99a31;
}
section.carbon .floating-button .floating-button__top .floating-button__top-image {
background-color: #9397a3;
}
section.timecharter .floating-button .floating-button__top .floating-button__top-image {
background-color: #FCF062;
}
section.navwatch .floating-button .floating-button__top .floating-button__top-image {
background-color: #648cf2;
}
section.home .floating-button .floating-button__top .svg-color {
fill: #80c420;
}
section.data .floating-button .floating-button__top .svg-color {
fill: #a382d5;
}
section.fuel .floating-button .floating-button__top .svg-color {
fill: #f53e58;
}
section.voyage .floating-button .floating-button__top .svg-color {
fill: #48caca;
}
section.hull .floating-button .floating-button__top .svg-color {
fill: #f99a31;
}
section.timecharter .floating-button .floating-button__top .svg-color {
fill: #FCF062;
}
section.navwatch .floating-button .floating-button__top .svg-color {
fill: #648cf2;
}  body .cky-box-bottom-right {
right: calc(40px + 15px + 130px) !important;
} body main .floating-button {
display: none !important;
} body .floating-button-new {
display: block;
}
.floating-button-new {
display: none;
position: fixed;
bottom: 40px;
right: 40px;
opacity: 0;
visibility: hidden;
font: normal 15px BiennaleRegular;
cursor: pointer;
pointer-events: all;
z-index: 1;
border-radius: 20px;
overflow: hidden;
background-color: #050D31;
width: 130px;
}
.floating-button-new a {
width: 100%;
height: 100%;
display: block;
z-index: 14;
position: absolute;
}
.floating-button-new .floating-button-new__top {
position: relative;
height: 134.62px;
overflow: hidden;
}
.floating-button-new .floating-button-new__top .floating-button-new__top-image {
width: 100%;
height: 100%;
background-color: #80C420;
transition: 0.3s background-color;
}
.floating-button-new .floating-button-new__top .floating-button-new__top-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
transform: scale(1);
transition: 0.3s transform;
margin-left: unset !important;
}
.floating-button-new:hover .floating-button-new__top .floating-button-new__top-image img {
transform: scale(1.07);
}
.floating-button-new .floating-button-new__top .floating-button-new__play {
position: absolute;
top: 51%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 11;
overflow: hidden;
aspect-ratio: 1;
top: 51%;
width: 26px;
}
.floating-button-new .floating-button-new__top .floating-button-new__play svg {
height: 100%;
object-fit: cover;
width: 100%;
}
.floating-button-new .floating-button-new__bottom {
color: white;
text-align: center;
font-size: 17px;
line-height: 1.4;
padding: 14px;
}
@media only screen and (max-width: 768px) {
.floating-button-new {
display: none !important;
} body .cky-box-bottom-right {
right: 40px !important;
}
}
.mobile-menu ul {
padding-top: 16vh;
}
@media only screen and (max-width: 768px) {
.mobile-menu ul li {
padding-top: 25px;
}
}
body[data-page="home"] .floating-button-new .floating-button-new__top .floating-button-new__top-image {
background-color: #80c420;
}
body[data-page="data-watch"] .floating-button-new .floating-button-new__top .floating-button-new__top-image {
background-color: #a382d5;
}
body[data-page="fuel-watch"] .floating-button-new .floating-button-new__top .floating-button-new__top-image {
background-color: #f53e58;
}
body[data-page="voyage-watch"] .floating-button-new .floating-button-new__top .floating-button-new__top-image {
background-color: #48caca;
}
body[data-page="hull-watch"] .floating-button-new .floating-button-new__top .floating-button-new__top-image {
background-color: #f99a31;
}
body[data-page="emissions-watch"] .floating-button-new .floating-button-new__top .floating-button-new__top-image {
background-color: #9397a3;
}
body[data-page="timecharter-watch"] .floating-button-new .floating-button-new__top .floating-button-new__top-image {
background-color: #FCF062;
}
body[data-page="nav-watch"] .floating-button-new .floating-button-new__top .floating-button-new__top-image {
background-color: #648cf2;
}
body[data-page="home"] .floating-button-new .floating-button-new__top .svg-color {
fill: #80c420;
}
body[data-page="data-watch"] .floating-button-new .floating-button-new__top .svg-color {
fill: #a382d5;
}
body[data-page="fuel-watch"] .floating-button-new .floating-button-new__top .svg-color {
fill: #f53e58;
}
body[data-page="voyage-watch"] .floating-button-new .floating-button-new__top .svg-color {
fill: #48caca;
}
body[data-page="hull-watch"] .floating-button-new .floating-button-new__top .svg-color {
fill: #f99a31;
}
body[data-page="emissions-watch"] .floating-button-new .floating-button-new__top .svg-color {
fill: #9397a3;
}
body[data-page="timecharter-watch"] .floating-button-new .floating-button-new__top .svg-color {
fill: #FCF062;
}
body[data-page="nav-watch"] .floating-button-new .floating-button-new__top .svg-color {
fill: #648cf2;
}
.floating-banner {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999999;
}
.floating-banner-in {
display: flex;
width: 560px;
height: 280px;
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
overflow: hidden;
background-color: #050D31;
opacity: 0;
visibility: hidden;
} .floating-banner-bg {
z-index: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.floating-banner__left {
width: 50%;
position: relative;
overflow: hidden;
cursor: pointer;
}
.floating-banner__left:hover .floating-banner__left-image img {
transform: scale(1.07);
}
.floating-banner__left-image {
width: 100%;
height: 100%;
background-color: #80C420;
transition: 0.3s background-color;
}
.floating-banner__left img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
transform: scale(1);
transition: 0.3s transform;
margin-left: unset !important;
}
.floating-banner__left .floating-banner__play {
position: absolute;
top: 51%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 11;
overflow: hidden;
aspect-ratio: 1;
top: 51%;
width: 50px;
}
.floating-banner__left .floating-banner__play svg {
height: 100%;
object-fit: cover;
width: 100%;
}
.floating-banner__player {
opacity: 0;
visibility: hidden;
width: 70%;
height: 70%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 2;
}
.floating-banner__player iframe {
width: 100%;
height: 100%;
}
.floating-banner__close {
right: 5px;
top: 5px;
position: absolute;
cursor: pointer;
pointer-events: all;
width: 20px;
height: 20px;
}
.floating-banner__close:before {
width: 100%;
content: '';
display: block;
height: 2px;
background-color: #80C420;
transform: translateY(17px) rotate(-45deg);
position: absolute;
left: -5px;
top: 0;
}
.floating-banner__close:after {
width: 100%;
content: '';
display: block;
height: 2px;
background-color: #80C420;
transform: translateY(17px) rotate(45deg);
position: absolute;
left: -5px;
top: 0;
}
.floating-banner__right {
width: 50%;
background-color: #050D31;
color: white;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font: normal 30px BiennaleRegular;
line-height: 1.4;
}
.floating-mobile-play {
display: none;
border-radius: 50%;
background-color: #80C420;
width: 50px;
height: 50px;
position: fixed;
right: 15px;
bottom: 15px;
z-index: 1;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: all;
opacity: 0;
visibility: hidden;
}
.floating-mobile-play svg {
height: 20px;
object-fit: cover;
width: 20px;
}
.floating-mobile-play svg polygon {
fill: #050D31;
}  @media only screen and (max-width: 768px)
{    body .floating-mobile-play {
display: flex;
}
.floating-banner__player {
width: 90%;
aspect-ratio: 1.2;
}
.floating-banner-in {
width: 80vw;
height: 24vh;
min-height: 230px;
}
.floating-banner__right {
font-size: calc(12px + 2.1vw);
}
}@font-face{font-family:TablePress;src:url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPUAA0AAAAACZAAAAN+AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCUhEICoQIgnILFgABNgIkAygEIAWGcgeBARv6B8iuBzK53oAhKg2KWDsrezjalSefocfD9/uZ575PSbYEqJHAIdo6tMDGdCprFIHd+F9r+rZE46O2iHBJfoAuxwW0yfgKS8KGVFE4dHX1gPmgVhzwhcJbReQ9RWXcraeutbmNHE7T7B1sex8stfMfnkvv0XsgUZrYO1hirXme9TnUkBvQ22RGX50VAr48H54Cn9b8GD73edAAhjboBpIQ6kKOhCz7GA8V5HfzyeA6h0mnrFTJnPjxC7KCrl9caqIUg0EAYACGDBn6YGCxeIE+EkwANTWJX/brZpNfyE5o/7r9uPZjS4tESbCTExLCjxOEbxGi2dQeNEAXUMMlvADkqSV0IHXtkQXNOnI2ctJpRIPt8+HjNivx3rlQYA8FqGwdCxF2aZrdJluMnaqFvy+yngVKbBcn0fSOd1xTpnW4HTkptV8Gi2kvCeUHC0BD+D0VKMIqXniZPJyPya9D7gT6DvUpwJER6avgKDsOfW9jU+YGc/ng6MhA3VSar3NdtvrD9WHZurKVKYOi0RwlY9500YSuWDE084F+jMinu4sTudD5yBTTozA9Horpmb+M3TwIBHempnzdpu1/raWypX0JND/ki4p71CQQlFqnAvkijABrVFIq5BdNJbFncoBOF03/h3IINPQRBxJCYDoAOnkRIDR0w0BSmYiBzDinAuQ6eROg0DEGY6DUiEUYqKyILwFq2qS9GKhrpFsykdeFLmDjknYG4jKbNeNyQ1zhCoP840pdYiqu8jTW4mp6pMXH1HVJp8wRmHmQKTKiUOBVSMHrlKuBlYidxkMgw6/bMoG5RD6qfs8yO8LVqFCFa8ELrcVLEqTaS7UG5aqVq1GlWi28k3rRgCjbiU+qqOItvDEqXjkvwF/dUF595jB8LSqqgwIWAWsRmcJJ5GsHbYUqVbirBi5IpRMxLso/i2oSA6ZYDoMFCiknI7ZkGacSVYUjlLSXyG8n08nOQcXTeyzU5ozbiGRQZRt0vu/TMoEV8RLI3DiBSiVzMtNKAPgErlwLoqiAY2fJ9UbRMU/0rz38UP5FQtH3i8V3KYSHYJdSYRnwW8XazUAUop3gQY19hkEH98OA2QQ6wg0S+FjtwOwdOvF5J2VXBBLQmo2EAxsIKVJkkUcRZVRRa7NrP+my6Ns8cKszHYJf+fPPLPTq5vFcmYKZNL+fn1CZDgoYecKZHwA=) format('woff2'),url(//www.ship-watch.com/wp-content/plugins/tablepress/css/tablepress.woff) format('woff');font-weight:400;font-style:normal;font-display:block}.tablepress-table-description{clear:both;display:block}.tablepress{border-collapse:collapse;border-spacing:0;width:100%;margin-bottom:1em;border:none}.tablepress td,.tablepress th{padding:8px;border:none;background:0 0;text-align:left;float:none!important}.tablepress tbody td{vertical-align:top}.tablepress tbody td,.tablepress tfoot th{border-top:1px solid #ddd}.tablepress tbody tr:first-child td{border-top:0}.tablepress thead th{border-bottom:1px solid #ddd}.tablepress tfoot th,.tablepress thead th{background-color:#d9edf7;font-weight:700;vertical-align:middle}.tablepress .odd td{background-color:#f9f9f9}.tablepress .even td{background-color:#fff}.tablepress .row-hover tr:hover td{background-color:#f3f3f3}.tablepress img{margin:0;padding:0;border:none;max-width:none}.dataTables_wrapper{clear:both;margin-bottom:1em}.dataTables_wrapper .tablepress{clear:both;margin:0!important}.dataTables_length{float:left;white-space:nowrap}.dataTables_filter{float:right;white-space:nowrap}.dataTables_wrapper .dataTables_filter input{margin-left:.5em}.dataTables_info{clear:both;float:left;margin:4px 0 0}.dataTables_paginate{float:right;margin:4px 0 0}.dataTables_paginate a{color:#111!important;display:inline-block;outline:0;position:relative;text-decoration:underline;margin:0 5px}.dataTables_paginate a:first-child{margin-left:0}.dataTables_paginate a:last-child{margin-right:0}.paginate_button:hover{cursor:pointer;text-decoration:none}.paginate_button.disabled{color:#999!important;text-decoration:none;cursor:default}.paginate_button.current{font-weight:700;text-decoration:none;cursor:default}.dataTables_paginate.paging_simple{padding:0 15px}.paging_simple .paginate_button.next:after,.paging_simple .paginate_button.previous:before{text-align:left;font-family:TablePress;font-size:14px;font-weight:700;-webkit-font-smoothing:antialiased;content:"\f053";text-shadow:.1em .1em #666;position:absolute;top:0;right:auto;bottom:0;left:-14px;margin:auto;height:14px;width:14px;line-height:1}.paging_simple .paginate_button.next:after{text-align:right;content:"\f054";left:auto}.paginate_button:after,.paginate_button:before{color:#d9edf7}.paginate_button:hover:after,.paginate_button:hover:before{color:#049cdb}.paginate_button.disabled:after,.paginate_button.disabled:before{color:#f9f9f9}.dataTables_processing{display:none}.dataTables_scroll{clear:both}.dataTables_scrollBody{-webkit-overflow-scrolling:touch}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th>div.dataTables_sizing{height:0;overflow:hidden;margin:0!important;padding:0!important}.tablepress .sorting,.tablepress .sorting_asc,.tablepress .sorting_desc{position:relative;padding-right:20px;cursor:pointer;outline:0}.tablepress .sorting:after,.tablepress .sorting_asc:after,.tablepress .sorting_desc:after{font-family:TablePress;font-weight:400;font-size:14px;-webkit-font-smoothing:antialiased;position:absolute;top:0;bottom:0;left:auto;right:6px;margin:auto;height:14px;line-height:1}.tablepress .sorting:after{content:"\f0dc"}.tablepress .sorting_asc:after{content:"\f0d8";padding:0 0 2px}.tablepress .sorting_desc:after{content:"\f0d7"}.tablepress .sorting:hover,.tablepress .sorting_asc,.tablepress .sorting_desc{background-color:#049cdb}.dataTables_scrollBody .tablepress thead th:after{content:""}.dataTables_wrapper:after{content:"";display:block;clear:both;visibility:hidden;line-height:0;height:0}.dataTables_wrapper label input,.dataTables_wrapper label select{display:inline;margin:2px;width:auto}
.tablepress .odd td{background-color:#0e141f}.tablepress .even td{background-color:#090c13}.dataTables_info,.dataTables_paginate,.dataTables_length,.dataTables_filter{display:none}.tablepress tfoot th,.tablepress thead th{background-color:#81c41c}.tablepress .sorting:hover,.tablepress .sorting_asc,.tablepress .sorting_desc{background-color:#81c41c}.tablepress .row-hover tr:hover td{background-color:#0e141f}.dataTables_wrapper{width:100%;overflow:scroll}.tablepress tbody td,.tablepress tfoot th{border-top:1px solid #2b3850}.tablepress tbody tr:first-child td{min-width:230px}