/*------------------------------- HTML TAGS ------------------------------*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    min-width: 360px;
    font-family: calibri;
    background-color: rgb(179, 209, 255);
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: rgb(51, 102, 130);
}


/*------------- FONTS ------------*/

@font-face {
    font-family: calibri;
    src: url(fonts/Calibri.ttf);
}


/*------------- NAVIGATOR-TOP ----------*/

.nav-wrapper {
    width: 100%;
    min-width: 360px;
    position: fixed;
    z-index: 999;
}

.nav-top {
    background-color: rgb(51, 102, 130);
    background: linear-gradient(rgb(51, 120, 150), rgb(51, 80, 100));
    overflow: hidden;
    width: 100%;
}

.nav-top a {
    color: white;
}

.main-animation {
	position: relative;
}

.nav-top-logo-yellow {
	opacity: 0;
    margin: 10px 10px;
    height: 40px;
    width: 40px;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	animation: light-animation 25s infinite forwards;
}

@keyframes light-animation{
	0% { opacity: 0; }
	25% { opacity: 1; }
	35% { opacity: 1; }
	60% { opacity: 0; }
	100% { opacity: 0; }
}


.nav-top-logo {
    float: left;
    margin: 10px 10px;
    height: 40px;
}

.nav-top-text {
    float: left;
    margin-top: 9px;
    /*margin-top: 1px;*/
    /*background-color: red;*/
    /*padding: 9px;*/
}

#mvt-main{
    display: none;
}

.nav-top-title {
    float: left;
    font-size: 20px;
    letter-spacing: 0.05em;
    color: white;
    font-weight: bold;
}

.nav-top-description {
    float: left;
    font-size: 12px;
    /*font-size: 14px;*/
    font-weight: normal;
    color: white;
}

.nav-top-menu {
    float: left;
    overflow: hidden;
    margin-left: 2%;
}

.nav-top-menu a {
    float: left;
    color: rgb(238, 238, 238);
    margin: 11px 0px 9px 0px;
    padding: 8px 12px 10px 12px;
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 0.06em;
    border-radius: 2px;
}

.nav-top-menu a:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.menuBars {
    display: none;
}

.nav-top-right {
    float: right;
}

.nav-top-icon {
    float: left;
    width: 22px;
    height: 22px;
    margin: 4px 6px;
    /*transform: rotate(270deg);*/
}

.nav-top-icon-lightning{
    float: left;
    width: 22px;
    height: 22px;
    margin: 5px 6px 3px 6px;
}

@media screen and (max-width: 500px){
	.nav-top-icon{
	    display: none;
	}
}

.nav-top-clock {
    float: left;
    width: 90px;
    height: 40px;
    padding: 15px 5px;
    font-size: 0.5em;
}

.display-clock {
    height: 30px;
}

.utc-notice {
    margin-top: 12px;
    margin-right: 3px;
    float: left;
}

.nav-login a {
    float: right;
    margin: 14px 10px 10px 0px;
    padding: 6px 15px 8px 14px;
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 0.06em;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.nav-login a:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

@media screen and (max-width: 1020px) {
    .nav-top-right {
        display: none;
    }
}

@media screen and (max-width: 920px) {
    .nav-wrapper {
        position: relative;
    }
    .nav-top-menu a {
        display: none;
    }
    .nav-login a {
        display: none;
    }
    .menuBars {
        display: block;
        float: right;
        margin: 1%;
    }
    .nav-top-menu.responsive {
        width: 100%;
        position: relative;
    }
    .nav-top-menu {
        margin: 0;
    }
    .nav-top-menu.responsive a {
        float: none;
        display: block;
        text-align: left;
        font-size: 0.9em;
    }
    .nav-login.responsive {
        width: 100%;
        position: relative;
    }
    .nav-login {
        margin: 0;
    }
    .nav-login.responsive a {
        width: calc(50% - 20px);
        margin: 0px 10px 10px 10px;
        display: block;
        float: right;
        text-align: center;
    }
}


/*--------------------- NAV-TOP DROPDOWNS --------------------------*/

.nav-dropdown {
    float: left;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    margin-top: 60px;
    padding-bottom: 3px;
    border-radius: 0px 0px 4px 4px;
    background-color: rgb(51, 102, 130);
    color: white;
    min-width: 160px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.2);
    z-index: 1100;
}

.dropdown-content a {
    float: none;
    font-weight: normal;
    padding: 6px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    margin: 0;
}

.dropdown-content a:hover {
    background-color: rgb(255, 255, 255, 0.2);
}

.dropdown-content a img {
    width: 20px;
}

@media screen and (max-width: 920px) {
    .nav-dropdown,
    .dropdown-content {
        width: 100%;
        float: none;
        position: relative;
        margin: 0px;
    }
}


/*------------------------ MENU CLOSE BUTTON -----------------------*/

.bars-container {
    display: inline-block;
    cursor: pointer;
    margin-top: 3px;
}

.bar1,
.bar2,
.bar3 {
    width: 44px;
    height: 5px;
    background-color: white;
    margin: 6px 0;
    transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}


/*------------- NAVIGATOR-BOTTOM ----------*/

.nav-bottom {
    z-index: 999;
    background-color: rgb(89, 168, 210);
    width: 100%;
    /*height: 30px;*/
    overflow: hidden;
    box-shadow: 0 4px 4px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 4px 4px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 4px 4px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
}

.become-vip-note,
.global-sea-routes,
.global-sea-routes-mobile,
.qa-link,
.qa-link-mobile {
    font-size: 16px;
    float: left;
    color: rgb(243, 243, 2);
    padding: 6px 5px 4px;
}

.qa-link-mobile{
    display: none;
    padding: 6px 0px 4px;
}

.global-sea-routes {
    display: none;
    color: white;
}

.global-sea-routes-mobile {
    color: navy;
    background-color: rgb(100, 200, 100);
    text-align: center;
    width: 100%;
    font-weight: bold;
}

.nav-bottom-search {
    float: right;
    width: 280px;
    margin-left: 10px;
    margin-right: -11px;
}

.search-box-main {
    float: left;
    margin: 4px 0;
    padding: 5px;
    border: none;
    outline: none;
    height: 22px;
    width: 70%;
    min-width: 220px;
    outline: none;
    color: #5f5f5f;
    border-radius: 2px 0px 0px 2px;
}

.search-box-main:focus {
    outline: none;
    box-shadow: inset 0px 0px 2px gray;
    -moz-box-shadow: inset 0px 0px 1px gray;
    -webkit-box-shadow: inset 0px 0px 1px gray
}

.search-button-main {
    cursor: pointer;
    float: left;
    padding: 0;
    margin: 4px 0;
    border: none;
    height: 22px;
    width: 44px;
    background-color: white;
    border-left: 1px solid rgb(220, 220, 220);
    border-radius: 0px 2px 2px 0px;
}

.search-button-main:hover {
    background-color: rgb(220, 220, 220);
}


@media screen and (min-width: 530px){   
    .global-sea-routes-mobile{
	display: none;
    }
    .become-vip-note{
	display: none;
    }
    .global-sea-routes{
	display: block;
        font-weight: normal;
    }
}

/*-------------------- CONTAINER & CONTENT ----------------------*/

.container {
    width: 100%;
    min-height: 900px;
    padding-top: 90px;
}

@media screen and (max-width: 920px) {
    .container {
        padding: 0px;
    }
}


/*------------------------ 404 PAGE --------------------------------*/

.errorMessage {
    color: rgb(51, 102, 130);
    font-size: 0.9em;
    font-weight: bold;
    padding: 20px;
}

.table-results-404 {
    width: 100%;
    max-width: 1000px;
}

.yachts-btn-404 {
    width: 300px;
    display: inline-block;
    border-radius: 3px;
    padding: 10px 0px;
    color: white;
    background-color: rgb(51, 102, 130);
}

.yachts-btn-404:hover {
    background-color: rgb(51, 82, 110);
}


/*-------------------- GRIDS -----------------------------*/

.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
}


/* For mobile phones: */

[class*="col-"] {
    width: 100%;
}

@media screen and (max-width: 600px) {
    body {
        font-size: 21px;
    }
}

@media screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {
        width: 8.33%;
    }
    .col-s-2 {
        width: 16.66%;
    }
    .col-s-3 {
        width: 25%;
    }
    .col-s-4 {
        width: 33.33%;
    }
    .col-s-5 {
        width: 41.66%;
    }
    .col-s-6 {
        width: 50%;
    }
    .col-s-7 {
        width: 58.33%;
    }
    .col-s-8 {
        width: 66.66%;
    }
    .col-s-9 {
        width: 75%;
    }
    .col-s-10 {
        width: 83.33%;
    }
    .col-s-11 {
        width: 91.66%;
    }
    .col-s-12 {
        width: 100%;
    }
    body {
        font-size: 20px;
    }
}

@media screen and (min-width: 768px) {
    /* For desktop: */
    .col-m-1 {
        width: 8.33%;
    }
    .col-m-2 {
        width: 16.66%;
    }
    .col-m-3 {
        width: 25%;
    }
    .col-m-4 {
        width: 33.33%;
    }
    .col-m-5 {
        width: 41.66%;
    }
    .col-m-6 {
        width: 50%;
    }
    .col-m-7 {
        width: 58.33%;
    }
    .col-m-8 {
        width: 66.66%;
    }
    .col-m-9 {
        width: 75%;
    }
    .col-m-10 {
        width: 83.33%;
    }
    .col-m-11 {
        width: 91.66%;
    }
    .col-m-12 {
        width: 100%;
    }
    body {
        font-size: 20px;
    }
}

@media screen and (min-width: 992px) {
    /* For desktop: */
    .col-l-1 {
        width: 8.33%;
    }
    .col-l-2 {
        width: 16.66%;
    }
    .col-l-3 {
        width: 25%;
    }
    .col-l-4 {
        width: 33.33%;
    }
    .col-l-5 {
        width: 41.66%;
    }
    .col-l-6 {
        width: 50%;
    }
    .col-l-7 {
        width: 58.33%;
    }
    .col-l-8 {
        width: 66.66%;
    }
    .col-l-9 {
        width: 75%;
    }
    .col-l-10 {
        width: 83.33%;
    }
    .col-l-11 {
        width: 91.66%;
    }
    .col-l-12 {
        width: 100%;
    }
    body {
        font-size: 20px;
    }
}


/*----------------- MAIN MENU ---------------------*/

.main-menu {
    width: 100%;
    background-color: white;
    text-align: center;
}

.main-menu img {
    width: 50%;
    background-color: white;
}

.main-menu h1 {
    font-size: 1.5em;
    padding: 10px;
    text-align: center;
}

.main-menu h4 {
    padding: 20px 10px;
    font-weight: normal;
    font-size: 0.7em;
    color: black;
}

.main-menu h4:hover {
    text-decoration: underline;
}


/*---------------- TITLES -------------------*/

.title {
    margin: 10px;
    color: rgb(51, 102, 130);
}

.title h1 {
    font-size: 1.3em;
}

.title h2 {
    font-weight: normal;
    font-size: 16px;
    padding-bottom: 10px;
    text-align: justify;
    border-bottom: 1px solid rgba(51, 102, 130, 0.4);
}

.title-h2-vm div a {
    color: rgb(51, 102, 130);
    font-weight: bold;
    text-decoration: underline;
    text-transform: capitalize;
}


/*------------------- TABLES -------------------*/

.table-1k {
    max-width: 1000px;
}

.table {
    padding: 10px;
    border-collapse: collapse;
}

.vessel_table,
.vessel_tr,
.vessel_td,
.vessel_td_main,
.vessel_link,
.vessel_td_container {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 0.85em;
}

.vessel_table {
    width: 100%;
    border-collapse: collapse;
}

.vessel_row_main {
    background: rgb(51, 102, 130);
    color: white;
    font-weight: bold;
    text-align: center;
}

.vessel_row_main a {
    display: inline-block;
    width: 100%;
    color: white;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    padding: 19px 0px;
}

.vessel_row_main a:hover {
    color: rgb(89, 168, 210);
    border-bottom: 3px solid rgb(89, 168, 210);
}

.vessel_td_main {
    height: 60px;
}

.vessel_td_main a:hover {
    text-decoration: none;
}

.vessel_row {
    font-family: Calibri;
    background-color: transparent;
    color: rgb(44, 67, 78);
    text-align: center;
}

.vessel_row a {
    color: darkgreen;
}

.vessel_row:hover td {
    background-color: rgba(89, 168, 210, 0.2);
}

.vessel_link a {
    color: white;
    padding: 16px 5px;
    width: 100%;
    border: inset 1px;
    border-color: #4caf50;
    border-style: solid;
    font-size: 1.1em;
    display: block;
    background-color: #4caf50;
    text-align: center;
}

.vessel_link a:hover {
    background-color: rgb(56, 165, 65);
}

.vessel_td {
    height: 60;
    padding: 5px;
}

.vessel_td img {
    height: 22px;
    width: 34px;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 4px 4px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 4px 4px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 4px 4px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
}

.vessel_td_container {
    height: 60;
}

.vessel_td_container a:hover {
    text-decoration: underline;
}

.vessel_td_container a:visited {
    color: darkgreen;
}

.td-orange-text {
    color: darkorange;
    font-weight: normal;
}

.td-min100 {
    min-width: 100px;
}

.td-vessel-sort {
    margin: 0px 0px 0px 16px;
}

.td-vessel-arrow {
    font-size: 14px;
    float: right;
    font-weight: normal;
}

.yachts-table {
    max-width: 860px;
    font-size: 0.85em;
}

.yachts-size-owner {
    font-style: italic;
    font-size: 0.8em;
    color: gray;
}

@media screen and (max-width: 992px) {
    .td_length,
    .td_beam {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .td_call_sign,
    .td_type {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .td_imo,
    .td_mmsi {
        display: none;
    }
}


/*---------------------- SEARCH BARS ----------------------*/

#table-anchor {
    display: block;
    float: left;
    width: 100%;
    height: 0px;
}

.search-wrapper {
    margin: 10px 0px 10px;
    width: 100%;
}

.search-inner-wrapper {
    display: inline-block;
    width: 269px;
    margin-right: 10px;
    margin-bottom: 5px;
}

.focusedSearchBar {
    box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.searchBox {
    padding: 5px;
    border: none;
    height: 22px;
    width: 100%;
    max-width: 230px;
    outline: none;
    color: #5f5f5f;
    border-radius: 2px 0px 0px 2px;
}

.searchButton {
    cursor: pointer;
    padding: 0;
    margin-left: -10px;
    border: none;
    height: 22px;
    width: 44px;
    background-color: white;
    border-left: 1px solid rgb(220, 220, 220);
    border-radius: 0px 2px 2px 0px;
}

.searchButton:hover {
    background-color: rgb(220, 220, 220);
}

.orange-check-btn {
    max-width: 270px;
    border-radius: 4px;
    margin: 3px 0px 0px 5px;
    padding: 2px 7px 5px 35px;
    background-color: darkorange;
}

.gray-checkmark {
    background-color: gray;
    height: 20px;
    width: 20px;
    margin: 3px 0px 0px 3px;
}


@media screen and (min-width: 768px) {
    #table-anchor {
        display: none;
    }
}

/*------------------------- SIDEBARS ------------------------*/

.sidebar {
    display: block;
}

@media screen and (max-width: 767px) {
    .sidebar {
        display: none;
    }
}


/*----------------------------- AUTOCOMPLETE ---------------------------------*/

.vesselsList {
    position: absolute;
    z-index: 1200;
}

.vesselsList ul,
.flagsList ul {
    list-style-type: none;
    margin-top: 2px;
    width: 225px;
    box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 8px -6px rgb(100, 100, 100), 2px 0px 8px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 8px -6px rgb(100, 100, 100), 2px 0px 8px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 8px -6px rgb(100, 100, 100), 2px 0px 8px -6px rgb(100, 100, 100);
}

.vesselsList li,
.flagsList li {
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 7px 10px;
    border-bottom: 1px solid rgb(200, 200, 200);
    background-color: white;
}

.vesselsList li:hover,
.flagsList li:hover {
    cursor: pointer;
    background-color: #e3e7e9;
}

.vesselsList-name {
    display: block;
    color: black;
    width: 100%;
    font-size: 14px;
    padding-left: 5px;
    white-space: nowrap;
}

.vesselsList-type {
    display: block;
    width: 100%;
    white-space: nowrap;
    padding-left: 5px;
    font-size: 11px;
    color: rgb(170, 170, 170);
}

.vesselsList-flag {
    display: block;
    width: 32px;
    height: 24px;
    box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 8px -6px rgb(100, 100, 100), 2px 0px 8px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 8px -6px rgb(100, 100, 100), 2px 0px 8px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 8px -6px rgb(100, 100, 100), 2px 0px 8px -6px rgb(100, 100, 100);
}

.vesselsList-more {
    display: block;
    font-size: 14px;
}

.vesselsList-more a {
    display: inline-block;
    width: 100%;
    padding: 6px 0px;
    margin-left: 22px;
    color: #4caf50;
}

.flagsList {
    position: absolute;
}

.selected-result {
    background-color: #e3e7e9 !important;
}

.mainList {
    z-index: 115;
    position: absolute;
    margin-top: 28px;
}

.mainList-title {
    background-color: rgb(51, 102, 130) !important;
    color: white !important;
    font-size: 14px;
    padding: 5px 10px !important;
    border-bottom: 1px solid rgb(200, 200, 200);
    background-color: white;
}

.mainList-title:hover {
    cursor: text !important;
}


/*-------------------------- SEARCH HISTORY ------------------------*/

.search-history {
    float: right;
    height: 30px;
    overflow: hidden;
    width: calc(100% - 504px);
}

.search-history a {
    margin: 4px 0px;
}

.sh-wrapper {
    text-align: right;
    height: 30px;
    padding-left: 30px;
}

.sh-ship-wrapper{
    float: right;
    direction: ltr;
}

.sh-img {
    margin-bottom: -4px;
    height: 16px;
    width: 25px;
}

.sh-img-company {
    margin-bottom: -4px;
    height: 16px;
}

.sh-text {
    color: white;
    font-size: 14px;
    line-height: 30px;
    display: inline-block;
}

.sh-text:hover {
    color: lightgray;
    cursor: pointer;
}

.sh-delete {
    font-size: 16px;
    color: lightgray;
}

.sh-delete:hover {
    color: red;
    cursor: pointer;
}

.freeze-btn-f,
.freeze-btn-unf {
    float: right;
    width: 90px;
    margin: 5px 0px 0px 15px;
    border-radius: 2px;
    font-size: 14px;
    color: white;
    cursor: pointer;
    text-align: center;
}

.freeze-btn-f {
    padding: 2px 14px 3px 14px;
    background-color: rgb(51, 102, 130, 1);
}

.freeze-btn-f:hover {
    background-color: rgb(51, 102, 130, 0.5);
}

.freeze-btn-unf {
    padding: 2px 4px 3px 4px;
    color: rgb(47, 67, 78);
    background-color: rgb(255, 255, 255, 0.5);
}

.freeze-btn-unf:hover {
    background-color: rgb(255, 255, 255, 0.7);
}

@media screen and (max-width: 800px) {
    .search-history {
        display: none;
    }
}


/*------------------------------- ADS ------------------------------*/

.ad_hor {
    width: 100%;
    padding: 10px;
    float: left;
    /*overflow: hidden;*/
}

.ad_hor_map {
    width: calc(100% - 370px);
    float: left;
    margin-top: 25px;
}

@media screen and (max-width: 1300px) {
    .ad_hor_map {
        width: 100%;
        margin: 0px;
        padding: 10px;
    }
}

.ad_ver {
    width: 100%;
    padding: 10px 2px 10px 10px;
}

.ad-90{
	margin: 0 auto;
	height: 300px;
}


.ad_link_max{
	display: none;	
}

@media screen and (min-width: 769px){
   	.ad-90{
	     	height: 180px;
         }
	.ad_link_max{
		display: block;	
	}
}

/* ------------ PAGER ------------ */

.pager {
    padding: 20px 10px;
    width: 100%;
    text-align: center;
}

.pager a,
.pager p {
    text-decoration: none;
    display: inline-block;
    padding: 0px 9px;
    padding-bottom: 3px;
    border-radius: 2px;
    box-shadow: 0 2px 8px -3px rgb(100, 100, 100);
    -moz-box-shadow: 0 2px 8px -3px rgb(100, 100, 100);
    -webkit-box-shadow: 0 2px 8px -3px rgb(100, 100, 100);
}

.pager a:hover {
    background-color: rgb(51, 110, 140);
}

.pager-results {
    float: left;
    font-size: 0.85em;
}

.pager_box {
    outline: none;
    margin-left: 5px;
    margin-right: 5px;
    height: 26px;
    width: 70px;
    text-align: center;
}

.pager_box:focus {
    box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.previous {
    background-color: rgb(51, 90, 110);
    color: white;
}

.next {
    background-color: rgb(51, 90, 110);
    color: white;
}


/* ------------ FOOTER ------------ */

#footer {
    bottom: 0px;
    background-color: transparent;
    font-size: 0.8em;
    color: rgb(51, 102, 130);
    width: 100%;
    max-width: 400px;
    height: 150px;
    margin: 100px auto 0px;
    text-align: center;
    clear: both;
}

#footer ul {
    margin: 8px 0 8px 0;
    padding: 0;
    list-style-type: none;
}

#footer ul li {
    display: inline-block;
    margin-right: 5px;
}

#footer ul li a {
    color: rgb(51, 102, 130);
    font-family: calibri;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}

#footer ul li a:hover {
    text-decoration: underline;
}

#footer p {
    font-weight: bold;
}

.footer-img {
    width: 30%;
    min-width: 300px;
    max-width: 450px;
    margin: 0 auto;
    display: block;
}


/*.footer-main-page{
	background-color: white; 
	border-color: white;
	color: rgb(51, 102, 130);
}

.footer-main-page a {
	color: rgb(51, 102, 130);
}

.footer {
    bottom: 0px;
    padding: 20px;
    background-color: transparent;
    font-size: 0.8em;
    color: white;
    background-color: rgb(51, 102, 130);
    border-top: 2px solid rgb(89, 168, 210);
    width: 100%;
    min-height: 150px;
    margin: 0px;
    text-align: center;
    clear: both;
}

.footer ul {
    float: left;
    width: 33%;
    padding: 20px;
    list-style-type: none;
}

.footer ul li {
    display: inline-block;
    margin-right: 5px;
}

.footer ul li a {
    color: white;
    font-family: calibri;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}

.footer ul li a:hover {
    text-decoration: underline;
}

.footer p {
    font-weight: bold;
}

.footer-misc,
.footer-copyright {
	float: left;
	width: 33%;
	font-size: 20px;	
	line-height: 30px;
	text-align: left;
}

.footer-misc a,
.footer-copyright a {
	color: white;
}

.footer-misc a:hover,
.footer-copyright a:hover {
	text-decoration: underline;
}

.footer-copyright{
	text-align: right;
}

.footer-img {
    width: 30%;
    min-width: 30px;
    max-width: 420px;
}

@media screen and (max-width: 1320px){
	#footer ul,	
	.footer-misc,
	.footer-copyright {
		width: 100%;
		text-align: center;
	}	
}*/


/*------------------------ VESSELS MENU -----------------------*/

.try-dual-track{
    width: 100%; 
    font-size: 13px; 
    position: relative; 
    margin: -3px auto 10px;  
    text-align: center; 
}

.try-dual-click{
    cursor: pointer;
    pointer-events: all; 
}

.vessel-btn-wrapper {
    display: flex;
    justify-content: space-around;
    position: relative;
    z-index: 10;
    min-height: 50px;
    width: calc(100% - 20px);
    margin: 5px 10px 0px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.85);
}

.vbw-absolute {
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}

.vessel-btn-wrapper img {
    width: calc(100% - 44px);
    max-width: 24px;
    min-width: 20px;
    margin: 8px auto 0px;
    display: block;
}

.vessel-btn-wrapper p {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: black;
    text-align: center;
    margin-bottom: 5px;
}

.switch-maps,
.switch-maps-cruises,
.dual-mode,
.single-map,
.full-screen,
.btn-google-photos,
.btn-google-earth,
.youtube,
.btn-fleet-yellow,
.btn-fleet-yellow-2,
.go-to-fleets,
.btn-in-fleet {
    float: left;
    cursor: pointer;
    width: 30%;
    height: 50px;
    border: none;
    position: relative;
}

.full-screen,
.dual-mode {
    display: none;
}

#youtube{
    display: block;
}

#youtube-red{
    display: none;
}

#dual-map,
#switch-maps-light,
#switch-maps-dark,
#google-earth {
    display: none;
}

.refresh-map-img{
	margin: 6px auto 1px !important;
	max-width: 30px !important; 
	height: 25px;
	width: 32px !important;
}

.refresh-timer{
	position: absolute;
	top: 12px;
	text-align: center; 
	font-size: 10px !important;
}

.fleets-btn-menu{
	margin-top: 15px;
	margin-bottom: 5px;
}


.try-yellow{
   width: 100%;	
   border-radius: 3px; 
   padding: 2px 0 3px;
   background-color: rgba(255, 255, 153, 0.7);
}

@media screen and (min-width: 768px) {
    .try-dual-track{
	width: 100%; 
	font-size: 13px; 
	position: relative; 
	margin: 0px auto -760px; 
	padding-top: 740px;  
	text-align: center; 
	max-width: 320px;
	pointer-events: none; 
    }
     .youtube-info{
	display: none;
	font-size: 15px;
	margin: 0px auto -600px; 
	padding-top: 549px;
     }
     .fleets-btn-menu{
	margin: 35px auto -90px;
     }
    .vessel-btn-wrapper {
        margin: 35px auto -90px;
        height: 50px;
        max-width: 500px;
        width: 100%;
    }
    .vessel-btn-wrapper img {
        width: 24px;
        margin: 8px auto 0px;
    }
    .vessel-btn-wrapper p {
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 13px;
        color: black;
        text-align: center;
    }
    .switch-maps,
    .switch-maps-cruises,
    .dual-mode,
    .single-map,
    .full-screen,
    .btn-google-photos,
    .btn-google-earth,
    .youtube,
    .btn-fleet-yellow,
    .btn-fleet-yellow-2,
    .go-to-fleets,
    .btn-in-fleet {
        width: 16%;
    }
    .full-screen,
    .dual-mode {
        display: block;
    }
    .refresh-map-img{
	margin: 6px 23px 1px !important; 
    }
    .refresh-timer{
	width: 19px !important; 
	left: 28px; 
	text-align: center;
   }
   .max-350{
	max-width: 350px;
    }
   .vertical-vessel-wrapper {
	position: absolute; 
	left: 15px;
	top: 20%; 
        max-width: 58px;
        height: 250px; 
	margin: 0;
        flex-direction: column;
   }
   .vertical-100{
   	width: 100%;
   }
   .vertical-100 #switch-maps-gray{
   	display: none;
   }
   .vertical-100 #switch-maps-light {
   	display: block;
   }
}

.ad-desktop-map {
    display: block;
}

.ad-mobile-map {
    display: none;
}

.cruise-lines-list {
    display: none;
    padding: 10px;
}

@media screen and (min-width: 768px) {
    .cruise-lines-list {
        display: block;
    }
}

.mt-vf-table {
    width: 100%;
    border: 0;
    height: 0px;
    padding: 10px;
}

.mt-vf-absolute {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 90px;
    padding: 0px;
}

.google-map-wrapper{
    float: left;
    display: none;
    width: 100%; 
    overflow: hidden; 
    height: 300px;
    margin: 10px 0;
}

.object-google-map{
    width: 100%;
    margin-top: -150px;
}

.fs-regions {
    float: left;
    cursor: pointer;
    width: 150px;
    margin: 5px;
    padding: 20px 0px;
    font-size: 17px;
    text-align: center;
    background-color: red;
    color: white;
    border: none;
    border-radius: 3px;
    box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 8px -6px rgb(100, 100, 100), 2px 0px 8px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 8px -6px rgb(100, 100, 100), 2px 0px 8px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 8px -6px rgb(100, 100, 100), 2px 0px 8px -6px rgb(100, 100, 100);
}

.fs-regions {
    background-color: rgb(37, 53, 112);
    position: absolute;
    margin-left: 220px;
    margin-top: 15px;
    height: 80px;
    padding: 30px 0px;
}

.fs-region-menu {
    display: flex;
    justify-content: space-around;
    margin: 10px auto 0px;
    width: 100%;
    z-index: 100;
}

.sm-regions {
    width: 100%;
}

#sm-text1{
	display: none;
}

.fs-live-maps {
    position: absolute;
    display: flex;
    justify-content: space-around;
    z-index: 10;
    min-height: 50px;
    width: 90px;
    margin-left: 6px;
    margin-top: 25px;
    border-radius: 2px;
    border: 2px solid red;
    background-color: rgba(255, 255, 255, 0.85);
}

.fs-live-maps img {
    width: 24px;
    height: 24px;
    margin: 8px auto 0px;
    display: block;
}

.fs-live-maps p {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: black;
    text-align: center;
    margin-bottom: 5px;
}

@media screen and (max-width: 768px) {
    .fs-live-maps {
        display: none;
    }
}

.ft-button{
    display: none;
    border: 2px solid darkorange;
    cursor: pointer;
}

.ms-button {
    border: 2px solid rgb(37, 53, 112);
    cursor: pointer;
}

.nv-button {
    margin-left: 100px;
}

.fs-lm-mt {
    right: 180px;
    margin-top: 10px;
}
.ms-btn-mt{
    right: 280px;
    margin-top: 10px;
}

.live-maps-absolute {
    position: absolute;
    top: 0;
    left: 0;
    padding-right: 0px !important;
    width: 100%;
    margin-top: 90px;
    padding: 0px;
}

.mobile-btn-fleet {
    margin: 0px;
    padding: 28px 0px;
}

.yachts-img-wrapper {
    width: 100%;
    padding: 20px;
    text-align: center;
}

.yachts-img {
    width: 70%;
    margin: 10px;
}

.military-image{
    margin-bottom: 0px;
}

.military-image-text{
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: rgb(51, 102, 130);
}

#mt-map,
#vf-map {
    float: left;
}

#vf-map {
    width: 100%;
    box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -1px 0 4px -6px rgb(100, 100, 100), 1px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -1px 0 4px -6px rgb(100, 100, 100), 1px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -1px 0 4px -6px rgb(100, 100, 100), 1px 0px 4px -6px rgb(100, 100, 100);
}

#mt-map {
    display: none;
}

#vf-inner{
    /*background-image: url("https://www.marinevesseltraffic.com/Images/logo/try-dual-track.png");
    background-repeat: no-repeat;
    background-position: 50% 0;*/
}

.mobile-vessel-btn {
    padding: 10px;
    display: none;
    margin: 10px 0px;
}

.rain-mobile-btn{
   display: none;
}

.windy-mobile{
   display: none;
}

@media screen and (max-width: 768px) {
    .vessel-btn-wrapper {
        top: 0;
    }
    .rain-mobile-btn{
	display: block;
    }
    .fs-regions {
        display: none;
    }
    .sp-region {
        display: none;
    }
    .fs-live-maps {
        display: none;
    }
    .windy-mobile{
        display: block;
    }
    .windy-desktop{
        display: none;
    }
}

@media screen and (min-width: 578px) and (max-width: 1166px) {
    .live-maps-absolute {
        /*margin-top: 285px;*/
        margin-bottom: 0px !important;
    }
}

@media screen and (min-width: 1167px) {
    .live-maps-absolute {
        /*margin-top: 206px;*/
        margin-bottom: 0px !important;
    }
}


/*--- Similar Ships ---*/

.cfb-wrapper{
    position: relative;
}

.cruise-or-ferry-btn,
.ferry-button,
.df-button {
    display: block;
    z-index: 500;
    width: calc(100% - 20px);
    margin: 10px 10px 15px;
    font-size: 16px;
    text-align: center;
    padding: 3px 5px 4px;
    border-radius: 3px;
    border: 2px solid rgb(211, 5, 5);
    background-color: rgb(223, 6, 6);
    color: white;
    box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -1px 0 4px -6px rgb(100, 100, 100), 1px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -1px 0 4px -6px rgb(100, 100, 100), 1px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -1px 0 4px -6px rgb(100, 100, 100), 1px 0px 4px -6px rgb(100, 100, 100);
}

.cruise-or-ferry-btn:hover,
.ferry-button:hover,
.df-button:hover {
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    background-color: rgb(171, 5, 5);
}

.cfb-red{
   background-color: red;
   border: 2px solid red;
}

.cfb-red:hover{
   background-color: firebrick;
   border: 2px solid firebrick;
}

.cfb-orange{
   background-color: darkorange;
   border: 2px solid darkorange;
}

.cfb-orange:hover{
   background-color: rgb(200, 100, 0);
   border: 2px solid rgb(200, 100, 0);
}

.similar-box{
    position: relative;
    padding: 0 10px;
    margin-top: 10px;
}

.similar-wrapper {
    position: relative;
    z-index: 500;
    width: 100%;
    margin: 0 auto;
    font-size: 16px;
    border-radius: 3px;
    border: 1px solid rgb(51, 102, 130);
    background-color: rgba(89, 148, 180, 0.8);
    box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -1px 0 4px -6px rgb(100, 100, 100), 1px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -1px 0 4px -6px rgb(100, 100, 100), 1px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -1px 0 4px -6px rgb(100, 100, 100), 1px 0px 4px -6px rgb(100, 100, 100);
}

.similar-title-button,
.similar-title,
.similar-title-type,
.similar-type-or-flag,
.similar-title-particulars {
    border-radius: 3px 3px 0px 0px;
    padding: 4px 4px 6px;
    font-size: 16px;
    width: 100%;
    text-align: center;
    color: white;
    background-color: rgb(51, 102, 130);
}

.st-change {
    display: none;
}

.st-pb {
    padding: 4px 4px 0px;
}

.similar-type-or-flag{
    float: left; 
    width: 100%; 
    padding: 0px 0px 2px; 
    border-radius: 0px;
}

.stof-offset{
    float: left;
    width: 100%;
    height: 3px;
}

.type-or-flag-inner{
    margin: 0 auto; 
    display: block; 
    float: none; 
    width: 130px; 
    padding-left: 10px;
}

.similar-ships-lable {
  float: left;
  display: block;
  position: relative;
  padding-left: 15px;
  margin-bottom: 2px;
  cursor: pointer;
  color: rgb(200, 200, 200);
  font-size: 11px;
  font-family: calibri;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.similar-ships-lable:first-child {
  padding-right: 15px;
}

.similar-ships-lable input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.similar-ships-checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 10px;
  width: 10px;
  background-color: rgb(52, 102, 130);
  border-radius: 50%;
  border: 1px solid white;
}

.similar-ships-lable:hover input ~ .similar-ships-checkmark {
  background-color: #ccc;
}

.similar-ships-lable input:checked ~ .similar-ships-checkmark {
  background-color: rgb(161, 184, 197);
}

.similar-ships-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.similar-ships-lable input:checked ~ .similar-ships-checkmark:after {
  display: block;
}


.similar-company {
    text-align: left;
    padding-left: 7px;
    padding-right: 2px;
    width: calc(100% - 30px);
    float: left;
    color: white;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.similar-company:hover {
    text-decoration: underline;
}

.similar-count {
    float: left;
    text-align: right;
}

.similar-vessel {
    color: white;
    display: inline-block;
    width: 100%;
    padding: 0px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.similar-vessel:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.similar-list,
.similar-list-type {
    width: 100%;
    margin: 0 auto;
    padding-top: 7px;
    max-height: 210px;
    overflow-y: auto;
}

.sl-change {
    display: none;
}

.similar-info {
    display: none;
    z-index: 500;
}

.similar-details {
    height: 243px;
}

.similar-img {
    width: 40px;
    height: 27px;
    float: left;
    margin: 5px 5px;
}

.similar-country {
    width: 120px;
    float: left;
    font-size: 14px;
    font-weight: bold;
    margin-top: 2px;
}

.similar-type,
.similar-imo,
.similar-mmsi,
.similar-length,
.similar-beam,
.similar-call-sign {
    float: left;
    width: 100%;
    padding: 6px;
}

.similar-diff-pos {
    font-size: 11px;
    color: rgb(53, 175, 53);
}

.similar-diff-neg {
    font-size: 11px;
    color: red;
}

#similar-ships {
    display: none;
}

#similar-change-menu,
#similar-ships {
    position: relative;
    cursor: pointer;
    margin: 5px 0px 10px 0px;
}

#similar-change-menu:hover>div {
    background-color: rgb(55, 121, 156);
}

@media screen and (min-width: 768px) {
    /* similar ships absolute positions */   
    .cfb-wrapper-absolute{
        display: none;
	position: absolute;
	bottom: 0;
	right: 0;
    }
    .similar-box-absolute{
        display: none;
	position: absolute;
	bottom: 0;
	right: 0;
    }
}

@media screen and (min-width: 992px) {
    .similar-box{
	padding: 0;
        margin-top: 0
    }
    .similar-wrapper {
        position: absolute;
        margin-top: -285px;
        right: 40px;
        width: 170px;
        padding: 0;
        font-size: 14px;
    }
    .similar-list,
    .similar-list-type {
        margin: 0;
	padding-top: 3px;
    }
    .similar-info {
        display: none;
        position: absolute;
        margin-top: -285px;
        right: 220px;
        width: 170px;
        height: 243px;
        padding: 0;
        font-size: 14px;
        border-radius: 3px;
        background-color: rgba(255, 255, 255, 0.7);
    }
    .si-10 {
        height: 253px;
    }
    .cruise-or-ferry-btn {
        position: absolute;
        margin: 0;
        margin-top: -322px;
        right: 40px;
        width: 170px;
    }
    .ferry-button,
    .df-button {
	position: absolute;
        margin: 0;
        margin-top: -73px;
        right: 220px;
        width: 170px;
    }
    .df-button{
	margin-top: -110px;
    } 
    .similar-company {
        width: 100%;
        max-width: 130px;
    }
    .similar-ships-right {
	left: 40px;
 	right: auto;
    }
    .cfb-right {
        margin-top: -322px;
    }

    /* similar ships absolute positions */   
    .cfb-wrapper-absolute{
        display: block;
	position: absolute;
	bottom: 0;
	right: 0;
    }
    .similar-box-absolute{
        display: block;
	position: absolute;
	bottom: 0;
	right: 0;
    }

    /* similar ships right */
    .similar-ships-right {
	left: 30px;
 	right: auto;
    }
    .similar-info-right {
        left: 210px;
 	right: auto;
    }
}


/* width */

.similar-list::-webkit-scrollbar,
.similar-list-type::-webkit-scrollbar {
    width: 3px;
}


/* Track */

.similar-list::-webkit-scrollbar-track,
.similar-list-type::-webkit-scrollbar-track {
    background: #f1f1f1;
}


/* Handle */

.similar-list::-webkit-scrollbar-thumb,
.similar-list-type::-webkit-scrollbar-thumb {
    background: rgb(201, 201, 201);
}


/* Handle on hover */

.similar-list::-webkit-scrollbar-thumb:hover,
.similar-list-type::-webkit-scrollbar-thumb:hover {
    background: rgb(150, 150, 150);
}


.book-cruise-absolute{
    display: absolute;
    bottom: 10px;
    z-index: 100;
}

/*--------------- REGIONS NEARBY PORTS -----------------*/
.dist {
    float: right;
    padding-right: 6px;
    padding-left: 0px;
    color: yellow;
    cursor: default;
}

.dist-desktop {
    display: none;
}

.dist-mobile {
    display: inline-block;
}

.dist-tooltip {
    display: none;
}

.dist-no-tooltip {
    display: inline-block;
}

@media screen and (min-width: 992px) {
   .dist-desktop {
   	display: inline-block;
   } 
   .dist-mobile {
   	display: none;
   }

   .dist-tooltip {
    	position: relative;
   	display: inline-block;
    }

    .dist-no-tooltip {
    	display: none;
    } 
 
    .dist-tooltip .dist-tooltiptext {
    	display: grid;
    	justify-content: center;
    	grid-template-columns: minmax(auto, max-content) minmax(auto, max-content);
   	visibility: hidden;
    	width: 65px;
    	background-color: black;
    	color: #fff;
    	text-align: center;
    	border-radius: 6px;
    	padding: 5px 0;
    	position: absolute;
    	z-index: 1000;
    	bottom: 150%;
    	left: 50%;
    	margin-left: -36px;
    }
      
    .dist-tooltip .dist-tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
    }

    @keyframes tooltip {
    	0%   {opacity: 0;}
    	50%  {opacity: 1;}
    }
    
   .dist-tooltip:hover .dist-tooltiptext {
        visibility: visible;
    	animation-name: tooltip;
    	animation-duration: 2s;
    }

    .tooltip-grid-item-1 {
    	text-align: right;
    	margin-right: 5px;
    }

    .tooltip-grid-item-2 {
    	text-align: left;
    }
}

/*------------------- BOOK A CRUISE --------------------*/

.cruises-label {
    float: left;
    width: 100%;
    color: white;
    color: rgb(51, 102, 130);
    padding: 13px 0px 3px;
    margin-bottom: 7px;
    border-radius: 3px;
    border-bottom: 1px solid #7fa6cd;
    font-size: 20px;
}

.cruises-label b {
    display: block;
    float: left;
    padding-right: 7px;
}


.cruises-label p {
    float: left;
    font-size: 13px;
    padding-top: 5px;
}

.offers-wrapper {
    display: block;
    padding: 10px;
}

.review-wrapper,
.deck-plans-wrapper {
    display: none;
}

.offers {
    width: 100%;
    float: left;
    margin-bottom: 7px;
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid #7fa6cd;
    padding-bottom: 10px;
}

.offers-seascanner,
.offers-cleancruising {
    flex-grow: 1;
    height: 27px;
    cursor: pointer;
    padding: 2px 10px 24px;
    text-align: center;
    max-width: 300px;
    color: white;
    font-size: 18px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.55);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.55);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.55);
}

.offers-seascanner span,
.offers-cleancruising span {
    display: none;
}

.offers-seascanner b,
.offers-cleancruising b {
    font-size: 15px;
}

.offers-seascanner {
    color: black;
    background-color: whitesmoke;
}

.offers-cleancruising {
    margin-right: 10px;
    background-color: rgb(51, 102, 130);
}

.sc-iframe {
    display: none;
}

.cc-iframe,
.sc-iframe {
    width: 100%;
    height: 2000px;
    margin-bottom: 10px;
    border: 1px solid black;
}


.cc-iframe{
   height: 3000px;
}

.vessel-bottom-text {
    float: left;
    margin-bottom: 50px;
}

@media screen and (min-width: 431px) {
    .offers-seascanner span,
    .offers-cleancruising span {
        display: inline-block;
    }
}


/*------------------- CRUISE FLEETS --------------------*/

#img_cruise_fleets {
    vertical-align: middle;
    margin: -4px 0px 0px 10px;
    width: 25px;
}

#td_cruise_fleets {
    background: rgb(51, 102, 130);
    border-radius: 3px;
    padding-right: 5px;
    padding-bottom: 15px;
    padding-top: 5px;
}

.ship_list_scroll {
    max-height: 650px;
    overflow: auto;
    line-height: 1;
    padding-bottom: 10px;
}

.ship_list_scroll::-webkit-scrollbar {
    width: 8px;
    border-radius: 5px;
}

.ship_list_scroll::-webkit-scrollbar-track {
    background: rgb(51, 102, 130);
}

.ship_list_scroll::-webkit-scrollbar-thumb {
    background: rgb(201, 201, 201);
    border-radius: 5px;
}

.ship_list_scroll::-webkit-scrollbar-thumb:hover {
    background: rgb(150, 150, 150);
}

#td_cruise_fleets_name {
    background: #4caf50;
    color: white;
    text-transform: uppercase;
    text-align: left;
    font-weight: bold;
    font-family: calibri;
    font-size: 16px;
    border-radius: 3px;
}

#a_cruise_fleets {
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    font-family: calibri;
    font-size: 16px;
    letter-spacing: 0.02em;
    /*white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;*/
}

#p_cruise_fleets {
    padding-left: 5px;
    padding-bottom: 1px;
    margin: 10px 10px -6px 10px;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
    text-align: left;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

#p_cruise_fleets:hover {
    background: #e3e7e9;
    color: rgb(51, 102, 130);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

a:hover,
a:visited,
a:link,
a:active {
    text-decoration: none;
}

.company-shadow {
    text-shadow: 3px 3px 5px black;
}

.cruise-opt-bar {
    border-radius: 3px 3px 0px 0px;
    background: rgb(51, 102, 130);
}

.cruise-text-white {
    color: white
}

.cruise-text-red {
    color: red;
}

.toggle-cruise-names {
    padding: 2px 5px;
    border-radius: 2px;
    background-color: rgb(221, 221, 221);
}

.toggle-cruise-names:hover {
    background-color: rgb(190, 190, 190);
}

.youtube-iframe,
.youtube-iframe-2{
    display: none;
}

@media screen and (max-width: 992px) {
    .desktop-cruise-map {
        display: none;
    }
    .mobile-cruise-map {
        width: 100%;
    }
    #td_cruise_fleets {
        padding-bottom: 20px;
    }
}

@media screen and (min-width: 992px) {
    .mobile-cruise-map {
        display: none;
    }
}


/*------------------- FERRY TRACKER ------------------*/

.company-table,
.company-table-bottom {
    width: 100%;
    position: relative;
    justify-content: space-between;
}

.company-table-bottom {
    display: none;
}

.company-title {
    float: left;
    width: calc(100% - 10px);
    height: 24px;
    background-color: rgb(6, 87, 133);
    text-align: left;
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 3px 5px 0px;
    border-radius: 3px;
    margin-bottom: 5px;
}

.company-card {
    position: relative;
    float: left;
    max-width: 200px;
    width: calc(6.25% - 10px);
    margin: 5px 10px 5px 0px;
    background-color: rgb(89, 168, 210);
    border: 1px solid rgb(80, 80, 80);
    border-radius: 3px;
    cursor: pointer;
    -webkit-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
}

.company-card:hover {
    background-color: rgb(80, 142, 175);
    -webkit-box-shadow: 0px 3px 6px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 3px 6px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 3px 6px -2px rgba(0, 0, 0, 0.75);
}

.company-load {
    width: 100%;
    padding-top: 100%;
}

.company-img {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    border-radius: 3px 3px 3px 3px;
}

.company-name {
    text-align: center;
    color: white;
    padding: 5px;
    font-size: 12px;
    border-radius: 0px 0px 3px 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 1px 1px rgb(40, 40, 40);
}

.company-website {
    width: 100%;
    height: 1000px;
    padding: 0px 10px;
}

.company-routes {
    width: 100%;
    max-width: 570px;
    display: block;
    margin: 15px auto 20px;
    border: 3px solid rgb(6, 87, 133);
}

.ferry-legend {
    float: left;
    width: 100%;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 3px;
    padding-top: 2px;
    margin-top: 5px;
}

.ferry-legend-title {
    float: left;
    font-weight: bold;
    margin: 0px 10px 2px;
    padding: 2px 0px 2px; 
    font-size: 14px;
}

.ferry-legend-item {
    float: left;
}

.ferry-legend-item img {
    float: left;
    width: 15px;
    margin: 3px 5px 0px 15px;
}

.ferry-legend-item p {
    float: left;
    margin: 2px 0px;
    font-size: 12px;
}

.buy-a-ticket,
.buy-a-ticket-legend{
    height: 28px;
    color: white;
    background-color: red;
    text-align: center;
    border-radius: 3px;
    padding-top: 1px;
}

.buy-a-ticket:hover,
.buy-a-ticket-legend:hover{
    background-color: rgb(205, 0, 0);
}

.buy-a-ticket,
.buy-a-ticket-legend{
    float: left;
    position: relative;
    width: 100%;
    margin: 5px 0;
}

@media screen and (min-width: 992px){
    .ferry-legend {
        float: none;
    	width: 140px;
        height: 65px;
	position: absolute;
	bottom: 15px;
	right: 10px;
        margin-top: 0px;
    }
    .ferry-legend-title {
        border-bottom: 1px solid black;
    }
    .ferry-legend-item {
        float: left;
        width: 100%;
    }
    .buy-a-ticket,
    .buy-a-ticket-legend{
    	width: 140px;
    	margin: 0;
    	padding-top: 4px;
    }
    .buy-a-ticket{
        position: absolute;
        bottom: 25px;
        right: 20px;
    }
    .buy-a-ticket-legend{
        position: absolute;
        bottom: 90px;
        right: 10px;
    }
}

.all-ferries {
    color: rgb(243, 243, 2);
}

.white-shadow {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(68, 68, 68, 0.4);
    border-radius: 3px;
}

.company-card:hover .white-shadow {
    display: none;
}


.ferry-view-more,
.booking-view-more {
    display: none;
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 120;
    background: linear-gradient(transparent 100px, rgb(179, 209, 255) 180px);
}

.vm-button,
.vm-button-booking {
    pointer-events: auto;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px 10px;
    width: 110px;
    color: black;
    background-color: rgb(255, 255, 153, 0.7);
    font-size: 13px;
    text-decoration: none;
    z-index: 1000;
    margin: 160px auto 0;
    cursor: pointer;
    text-align: center;
}


/* Desktop */

@media screen and (min-width: 1050px) and (max-width: 1600px) {
    .company-card {
        width: calc(9.0909090909090909090909090909091% - 10px);
    }
    .company-name {
        font-size: 11px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1049px) {
    .company-card {
        width: calc(12.5% - 10px);
    }
    .company-name {
        display: none;
    }
}


/* Mobile */


@media screen and (min-width: 0px) and (max-width: 540px) {
    .company-card {
        width: calc(25% - 10px);
    }
    .company-name {
        display: none;
    }
}

@media screen and (min-width: 541px) and (max-width: 768px) {
    .company-card {
        width: calc(16.666666666666666666666666666667% - 10px);
    }
    .company-name {
        display: none;
    }
}


/*--- View More ---*/
@media screen and (min-width: 1050px) and (max-width: 1600px) {
    .company-table{
	max-height: 190px;
        overflow: hidden;
    }
    .ferry-view-more {
        display: block;
    }
}

@media screen and (min-width: 769px) and (max-width: 1049px) {
    .company-table{
	max-height: 190px;
        overflow: hidden;
    }
    .ferry-view-more {
        display: block;
    }
}

@media screen and (min-width: 541px) and (max-width: 768px) {
     .company-table{
	max-height: 300px;
        overflow: hidden;
    }
    .ferry-view-more {
        display: block;
        background: linear-gradient(transparent 220px, rgb(179, 209, 255) 300px);
    }
    .vm-button{
        margin: 270px auto 0;
    }
}

@media screen and (min-width: 0px) and (max-width: 540px) {
    .company-table{
	max-height: 270px;
        overflow: hidden;
    }
    .ferry-view-more {
        display: block;
        background: linear-gradient(transparent 190px, rgb(179, 209, 255) 270px);
    }
    .vm-button{
        margin: 240px auto 0;
    }
}


/*-------------- PORTS TABLE & MENU ------------------*/

#show-cruise-ports {
    padding: 2px 11px 4px 11px;
    color: white;
    display: inline-block;
    background-color: darkorange;
    border-radius: 2px 2px 2px 2px;
    font-size: 15px;
    box-shadow: 0 1px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 1px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 1px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

#show-cruise-ports:hover {
    background-color: rgb(235, 140, 0);
    box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.port-clock {
    display: none;
}

.port-data-clock {
    background-color: rgb(51, 102, 130);
}

@media screen and (min-width: 1250px) {
    .port-clock {
        display: block;
        width: 100%;
        padding: 5px 15px;
    }
}

.book-cruise{
	display: block;
	width: 200px;
	position: relative;
	padding: 5px 0px 0px;
	margin: 0 auto;
	background-color: rgba(255, 255, 255, 0.0);
	border: none;
	border-radius: 5px;
}

.book-cruise img{
	display: none;
}

.book-cruise p{
	width: 100%;
	max-width: 200px;
	color: white;
	background-color: red;
	font-size: 17px;
	text-align: center;
	margin: 10px auto 0px;
	padding: 7px 0 8px;
	border-radius: 5px;
}

.bc-vcf {
	margin-bottom: 20px;
}
		
		
@media screen and (min-width: 769px){
	.book-cruise{
		position: absolute;
		margin-top: -156px;
		right: 30px;
		padding: 5px 0px 0px;
		width: 96px;
		height: 134px;
		background-color: rgba(255, 255, 255, 0.8);
		border: 1px solid red;
		border-radius: 5px;
	}
	
	.book-cruise img{
		width: 58px;
		display: block;
		margin: 5px auto 10px;
	}
	
	.book-cruise p{
		width: 100%;
		float: left;
		color: white;
		background-color: red;
		font-size: 13px;
		text-align: center;
		margin: 0;
		padding: 4px 0 5px;
		border-radius: 0px 0px 4px 4px;
	}
}


/*--- View More ---*/

.title-h2-vm {
    max-height: 100px;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.booking-view-more {
     display: block;
     background: linear-gradient(transparent 30px, rgb(179, 209, 255) 90px);
     z-index: 100;
}

.title-h2-btns{
    text-align: center;
}

.vm-button-booking{
     margin: 70px auto 0;
}

@media screen and (min-width: 500px) {
    .title-h2-vm{
	max-height: 500px;
    }
    .booking-view-more {
        display: none;
    }
    .title-h2-btns{
	text-align: left;
    }
}


/*---------------------- REGIONS --------------------------*/
.regions-nav{
    width: 100%;
    max-width: 860px;
    margin: 0 auto 20px;
    padding: 20px;
    border-bottom: 1px solid rgba(51, 102, 130, 0.4);
    display: flex;
    align-content: flex-start; 
    flex-wrap: wrap; 
}

.regions-nav-link {
    flex: 0 1 30%;
    margin-bottom: 5px;
    text-align: center;
    cursor: pointer;
}

.regions-nav-link span {
    display: block;
    width: 80%;
    color: white;
    background-color: rgb(51, 102, 130); 
    border-radius: 2px;
    padding-bottom: 2px; 
    margin-bottom: 3px;
    font-size: 16px;
}

.active-region span {
    background-color: rgb(89, 168, 210);
}

@media screen and (min-width: 450px){
    .regions-nav-link {
    	flex: 0 1 25%;  
    }
}

@media screen and (min-width: 600px){
    .regions-nav-link {
    	flex: 0 1 20%;  
    }
}

@media screen and (min-width: 768px){
    .regions-nav-link {
    	flex: 0 1 14%;  
    }
}

.regions-list{
    display: grid;
    max-width: 900px;
    width: 100%;
    margin: 20px auto 200px;
    row-gap: 20px;
    column-gap: 20px;
    align-items: start;
}

.regions-cols{
    grid-template-columns: auto;
}

.region {
    margin: 0 auto;
    width: 100%;
    max-width: 235px;
    text-align: center;
    position: relative;
    border-radius: 4px;
    -webkit-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.45);
    box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.45);
}

.region-img {
    width: 235px;
    height: 150px;
    display: block;
    opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
    border-radius: 3px 3px 0px 0px;
}

.region-middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.region:hover .region-img {
    opacity: 0.2;
}

.region:hover .region-middle {
    opacity: 1;
}

.region-text {
    font-weight: bold;
    color: red;
    font-size: 36px;
    padding: 16px 32px;
}

.region p {
    color: white;
    width: 100%;
    background: rgb(51, 102, 130);
    border-radius: 0px 0px 3px 3px;
    padding: 5px 3px;
}


@media screen and (min-width: 600px){
    .regions-cols{
    	grid-template-columns: auto auto;
    }
}

@media screen and (min-width: 1140px){
    .regions-cols{
    	grid-template-columns: auto auto auto;
    }
}

.region-ads {
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
    display: block;
    height: 320px;
}

@media screen and (min-width: 769px){
	.region-ads{
		height: 200px;
	}
}


/*------------------------ NEARBY PORTS -----------------------*/
.nearby-box{
    float: left;
    width: 100%;
    position: relative;
    padding: 0 10px;
}

.nearby-wrapper {
    z-index: 500;
    width: 100%;
    margin: 0 auto;
    font-size: 16px;
    border-radius: 3px;
    border: 1px solid rgb(51, 102, 130);
    background-color: rgba(89, 148, 180, 0.8);
    box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -1px 0 4px -6px rgb(100, 100, 100), 1px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -1px 0 4px -6px rgb(100, 100, 100), 1px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -1px 0 4px -6px rgb(100, 100, 100), 1px 0px 4px -6px rgb(100, 100, 100);
}

.nearby-title {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px 3px 0px 0px;
    padding: 4px 8px 6px;
    font-size: 16px;
    width: 100%;
    text-align: center;
    color: white;
    background-color: rgb(51, 102, 130);
}

.nearby-title span{
    display: none;
}

.nearby-vessel {
    color: white;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 2px 7px 2px;
}

.nearby-vessel:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.nearby-vessel img{
    margin-right: 5px;
    height: 12px;
    width: 18px;
    -webkit-box-shadow: 0px 0px 4px 1px rgba(180,180,180,1);
    -moz-box-shadow: 0px 0px 4px 1px rgba(180,180,180,1);
    box-shadow: 0px 0px 4px 1px rgba(180,180,180,1);
    border: 1px solid black;
}

.nearby-list {
    width: 100%;
    margin: 0 auto;
    padding-top: 7px;
    max-height: 172px;
    overflow-y: auto;
}

.nearby-list-object {
    width: 100%;
    text-align: left;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nearby-lable {
    float: left;
    display: block;
    position: relative;
    padding-left: 15px;
    margin-bottom: 2px;
    cursor: pointer;
    color: lime;
    font-size: 11px;
    font-family: calibri;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dist {
    float: right;
    padding-right: 6px;
    padding-left: 0px;
    color: yellow;
    cursor: default;
}

.dist-desktop {
    display: none;
}

.dist-mobile {
    display: inline-block;
}

.dist-tooltip {
    display: none;
}

.dist-no-tooltip {
    display: inline-block;
}

.nearby-info {
    display: none;
    z-index: 500;
}

.nearby-text {
    float: left;
    width: 100%;
    padding: 4px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


@media screen and (min-width: 768px) {
    /* similar ships absolute positions */   
    .similar-box-absolute{
        display: none;
        position: absolute;
        bottom: 0;
        right: 0;
    }
}

@media screen and (min-width: 992px) {
   .dist-desktop {
   	display: inline-block;
   } 
   .dist-mobile {
   	display: none;
   }

   .dist-tooltip {
    	position: relative;
   	display: inline-block;
    }

    .dist-no-tooltip {
    	display: none;
    } 
 
    .dist-tooltip .dist-tooltiptext {
    	display: grid;
    	justify-content: center;
    	grid-template-columns: minmax(auto, max-content) minmax(auto, max-content);
   	visibility: hidden;
    	width: 65px;
    	background-color: black;
    	color: #fff;
    	text-align: center;
    	border-radius: 6px;
    	padding: 5px 0;
    	position: absolute;
    	z-index: 1000;
    	bottom: 150%;
    	left: 50%;
    	margin-left: -36px;
    }
      
    .dist-tooltip .dist-tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
    }

    @keyframes tooltip {
    	0%   {opacity: 0;}
    	50%  {opacity: 1;}
    }
    
   .dist-tooltip:hover .dist-tooltiptext {
        visibility: visible;
    	animation-name: tooltip;
    	animation-duration: 2s;
    }

    .tooltip-grid-item-1 {
    	text-align: right;
    	margin-right: 5px;
    }

    .tooltip-grid-item-2 {
    	text-align: left;
    }

    .nearby-box{
	padding: 0;
	float: none;
    }
    .nearby-wrapper {
        position: absolute;
        margin-top: -285px;
        right: 10px;
        width: 172px;
        padding: 0;
        font-size: 14px;
    }
    .nearby-title {
    	justify-content: space-between;
    }
    .nearby-title span{
	display: block;
    	float: right;
	color: yellow;
	font-size: 12px;
        margin-right: 5px;
    }
    .nearby-list {
        margin: 0;
	    padding-top: 3px;
    }
    .nearby-info {
        display: none;
        position: absolute;
        margin-top: -285px;
        right: 192px;
        width: 172px;
        height: 203px;
        padding: 0;
        font-size: 14px;
        border-radius: 3px;
        background-color: rgba(255, 255, 255, 0.7);
    }
    /* similar ships absolute positions */   
    .similar-box-absolute{
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
    }
}


/* width */
.nearby-list::-webkit-scrollbar,
.nearby-list-type::-webkit-scrollbar {
    width: 3px;
}

/* Track */
.nearby-list::-webkit-scrollbar-track,
.nearby-list-type::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.nearby-list::-webkit-scrollbar-thumb,
.nearby-list-type::-webkit-scrollbar-thumb {
    background: rgb(201, 201, 201);
}

/* Handle on hover */
.nearby-list::-webkit-scrollbar-thumb:hover,
.nearby-list-type::-webkit-scrollbar-thumb:hover {
    background: rgb(150, 150, 150);
}


/*-------------------- SHIPYARDS/AGENTS TABLE AND MENU -------------------------*/

@media screen and (max-width: 992px) {
    .td_service,
    .td_region {
        display: none;
    }
}

@media screen and (max-width: 1150px) {
    .td_country {
        display: none;
    }
}

.agents-content,
.bunkerers-content,
.suppliers-content,
.airports-add,
.cruise-ports-add,
.container-content,
.pallets-content,
.postal-content,
.who-is-who-content,
.google-earth-contnet {
    color: rgb(51, 102, 130);
    max-width: 1000px;
}

.shipyard-info {
    list-style-type: none;
    color: rgb(51, 102, 130);
}

.shipyard-wrapper {
    padding-bottom: 10px;
}

.shipyard-btn {
    width: 50%;
    padding: 10px 5px;
    display: inline-block;
    text-align: center;
    background-color: rgb(89, 168, 210);
    color: white;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    border-radius: 3px;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.shipyard-btn-2 {
    width: 90%;
    max-width: 500px;
    float: left;
}

.shipyard-btn:hover {
    background-color: rgb(89, 148, 180);
    box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.shipyard-btn-wrapper {
    float: left;
    text-align: center;
    width: 100%;
    padding: 5px 0px;
}

.shipyard-btn-wrapper-2 {
    width: 50%;
}

.agnets-flag-img {
    width: 65%;
    padding: 20px;
    border-radius: 25px;
}

.agents-info-title {
    float: left;
    width: 100%;
    padding: 5px;
    color: rgb(51, 102, 130);
}

.shipyard-btn-green {
    background-color: #4caf50;
}

.shipyard-btn-green:hover {
    background-color: rgb(56, 165, 65);
}

.shipyard-btn-orange {
    background-color: darkorange;
}

.shipyard-btn-orange:hover {
    background-color: rgb(235, 140, 0);
}

/*--------------------- DIRECT FERRIES -----------------------*/
.direct-ferries-flags{
   position: relative;
   width: calc(100% - 10px);
   float: left;
   margin: 0 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid rgba(51, 102, 130, 0.4);
}

.direct-ferries-flags p {
   font-weight: bold;
   width: 100%;
   float: left;
   text-align: center;
   font-size: 18px;
   padding-bottom: 8px;
   color: rgb(51, 102, 130);
}

.direct-ferries-flags div {
   width: 80%;
   margin: 0 auto;
   max-width: 500px;
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
   justfy-content: space-between;
}

.direct-ferries-flags div a {
   flex: 1 0 21%;
   text-align: center;
}

.direct-ferries-flags div a img{
   width: 30px;
   height: 20px;
}


.dff-button{
   display: block;
   width: 150px;
   height: 30px;
   font-size: 18px;
   padding-top: 4px;
   margin: 10px auto 5px;
   text-align: center;
   color: white;
   background-color: red;
   border-radius: 3px;
}

@media screen and (min-width: 600px){
   .direct-ferries-flags p {
      font-size: 19px;
   }
   .direct-ferries-flags div a {
      flex: 1 0 auto;
      text-align: center;
   }
}

@media screen and (min-width: 1100px){
   .dff-button{
	position: absolute;
        bottom: 10px;
        left: 10px;
        margin: 0;
   }
}

/*--------------------- CONTAINER TRACKER -----------------------*/

#container_pager {
    display: block;
    color: black;
    font-size: 0.9em;
    width: 100%;
    margin: 30px 0px 0px 0px;
    text-align: center;
}

#container_pager ul {
    margin: 15px 0 0 0;
    padding: 0;
    list-style-type: none;
}

#container_pager ul li {
    display: inline-block;
    padding: 5px 5px 5px 5px;
}

#container_pager ul li a {
    color: black;
    font-family: calibri;
    text-transform: uppercase;
    text-decoration: none;
}

#container_pager ul li a:hover {
    text-decoration: underline;
    font-weight: bold;
}

.con-track-text {
    text-align: justify;
    color: rgb(51, 108, 130);
    font-size: 0.85em;
}

.con-btn-wrapper {
    float: left;
    width: 100%;
    margin: 10px auto;
    padding: 5px;
}

.con-btn {
    width: 90%;
    padding: 5px 5px;
    margin: 5px;
    display: inline-block;
    text-align: center;
    background-color: rgb(89, 168, 210);
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 3px;
    box-shadow: 0 1px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 1px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 1px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.con-btn:hover {
    background-color: rgb(89, 148, 180);
    box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.con-btn-red,
.con-btn-orange{
     width: 90%; 
     margin-bottom: 15px;
}

.con-btn-red{
   background-color: red;
}

.con-btn-red:hover{
   background-color: firebrick;
}

.con-btn-orange{
   background-color: darkorange;
}


.con-btn-orange:hover{
   background-color: rgb(200, 100, 0);
}


.con-btn-green{
   background-color: green;
}


.con-btn-green:hover{
   background-color: darkgreen;
}



.con-btn-sbar {
    height: 22px;
    padding: 2px 10px;
}

.con-track-img {
    width: 90%;
    max-width: 600px;
}

.con-track-remark {
    width: 100%;
    display: inline-block;
    color: gray;
    font-size: 12px;
}

.con-track-pager {
    display: inline-block;
}

.con-table-img {
    width: 40px;
    height: 40px;
}

.cargo-btn-wrapper{
    float: left;
    width: calc(100% - 10px);
    text-align: center;
}

@media screen and (min-width: 768px){
    .con-btn {
    	width: auto;
    }
    .con-btn-red,
    .con-btn-orange,
    .con-btn-green {
	min-width: 150px;
    }
    .con-btn-vessel{
	margin: 0 5px 5px;
    }
    .con-btn-vessel:first-child{
	margin-left: 10px;
    }
    .btn-auto-width{
	width: auto;
    }
    .cargo-btn-wrapper{
	text-align: left;
    }
}

/*--------------------- CRUISE PORTS MENU ----------------------*/

#img_cruise_ports {
    vertical-align: middle;
    margin: 0px 10px 3px 0px;
    width: 25px;
    height: 15px;
    border-radius: 2px;
}

#cruise-table {
    background-color: rgba(51, 102, 130, 0.7);
    width: 100%;
    margin-top: 50px;
    max-width: 1000px;
    box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -2px 0 8px -6px rgb(100, 100, 100), 2px 0px 8px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -2px 0 8px -6px rgb(100, 100, 100), 2px 0px 8px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -2px 0 8px -6px rgb(100, 100, 100), 2px 0px 8px -6px rgb(100, 100, 100);
}

#td_cruise_ports {
    padding: 0px 0px 0px 0px;
    padding-left: 5px;
}

#td_cruise_ports_name {
    border-radius: 3px 3px 0px 0px;
    padding-top: 5px;
    background: rgb(51, 102, 130);
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-weight: normal;
    font-family: calibri;
    font-size: 40px;
}

#td_cruise_ports_stats {
    background: #00b0b5;
    color: white;
    text-transform: normal;
    text-align: center;
    font-weight: bold;
    font-family: calibri;
    font-size: 26px;
}

#p_cruise_ports {
    margin: 10px 10px -6px 10px;
    text-align: left;
}

#a_cruise_ports {
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    font-weight: normal;
    font-family: calibri;
    font-size: 16px;
}

#p_cruise_ports:hover {
    background: #e3e7e9;
    color: rgba(51, 102, 130, 0.7);
}

.cruise-title {
    text-shadow: 3px 3px 5px black;
}

.cruise-lightgray {
    color: lightgrey;
}

a:hover,
a:visited,
a:link,
a:active {
    text-decoration: none;
}


/*--------------------- CRUISE PORTS MAP ----------------------*/

#td_cruise_ports_2 {
    background: rgb(51, 102, 130);
    padding: 0px 0px 0px 0px;
}

#td_cruise_ports_2_name {
    border-radius: 3px 3px 0px 0px;
    background: rgb(51, 102, 130);
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-weight: normal;
    font-family: calibri;
    font-size: 40px;
}

#td_cruise_ports_2_stats {
    background: #00b0b5;
    color: white;
    text-transform: normal;
    text-align: center;
    font-weight: bold;
    font-family: calibri;
    font-size: 26px;
}

#p_cruise_ports_2 {
    margin: 10px 10px -6px 10px;
    text-align: left;
}

#a_cruise_ports_2 {
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    font-weight: normal;
    font-family: calibri;
    font-size: 16px;
}

#p_cruise_ports_2:hover {
    background: #e3e7e9;
    color: rgba(51, 102, 130, 0.7);
}

a:hover,
a:visited,
a:link,
a:active {
    text-decoration: none;
}


/*------------------ Checkbox menu CSS ------------------------*/

.container-check {
    display: inline-block;
    position: relative;
    margin: 0px 15px 0px 0px;
    cursor: pointer;
    color: white;
    font-size: 16px;
    font-family: calibri;
    text-align: left;
    text-transform: normal;
    font-weight: normal;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Hide the browser's default checkbox */

.container-check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}


/* Create a custom checkbox */

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 3px;
}


/* On mouse-over, add a grey background color */

.container-check:hover input~.checkmark {
    background-color: #ccc;
}


/* When the checkbox is checked, add a green background */

.container-check input:checked~.checkmark {
    background-color: #4caf50;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark when checked */

.container-check input:checked~.checkmark:after {
    display: block;
}


/* Style the checkmark/indicator */

.container-check .checkmark:after {
    left: 7px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/*----------------------- AIRPORTS ------------------------*/

#output_route {
    position: absolute;
    max-height: 30px;
    background-color: rgba(255, 255, 0, 0.8);
    padding: 2px 5px 2px 5px;
    margin-top: 470px;
    left: 42%;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    text-align: center;
    opacity: 1;
    z-Index: 1;
}

#output_route_1 {
    display: none;
}

#airport_name,
#airport_name_road {
    background: rgb(51, 102, 130);
    color: white;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    padding: 10px 5px 10px 5px;
    border-bottom: 2px solid #000;
    border-left: 1px solid #808080;
    vertical-align: middle;
    float: left;
}

#airport_name {
    width: 100%;
    border-right: 1px solid #808080;
}

#airports_flag {
    height: 22px;
    margin-top: 2px;
    padding: 0px;
    vertical-align: top;
    border-radius: 2px;
    box-shadow: 0 4px 4px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 4px 4px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 4px 4px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
}

.airport-clock {
    height: 25px;
    color: white;
    background-color: rgb(51, 102, 130);
    margin-bottom: 2px;
    padding-top: 5px;
}

.airport-name {
    color: #f4f0f9;
    font-weight: normal;
    font-size: 18px;
    vertical-align: top;
}

.airport-to-route {
    color: #f4f0f9;
    font-weight: normal;
}

.airport-route-img {
    height: 15px;
    vertical-align: middle;
    margin-bottom: 3px;
}

.airport-google-maps {
    width: 100%;
    height: 500px;
}

.flight-stats-iframe {
    width: 100%;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
}


/*----------------------------- LIVE MAPS ------------------------------*/

.live-maps-map {
    width: 100%;
    /*margin-bottom: 30px;*/
    /*padding-right: 10px;*/
}

.passenger-overlay-mobile{
	float: left;
	padding-bottom: 15px;
	border-bottom: 1px solid black;
	margin-bottom: 15px;
}

@media screen and (min-width: 631px){
	.passenger-overlay-mobile {
		display: none;
	}
}

/*----------------------------- VESSEL TYPE MENU --------------------------*/


.type-selector-title {
    width: calc(100% - 10px);
    height: 27px;
    color: white;
    background-color: rgb(6, 87, 133);
    margin-right: 10px;
    font-size: 16px;
    padding-left: 5px;
    padding-top: 3px;
}

.vesselTypeMenu {
    float: left;
    width: 100%;
    width: calc(100% - 10px);
    padding: 5px;
    background-color: rgb(180, 206, 236);
    margin-bottom: 10px;
    border: 1px solid rgb(6, 87, 133);
}

.vesselTypeMenu a {
    float: left;
    font-size: 15px;
    font-family: calibri;
    border-radius: 3px;
    color: white;
    margin: 5px 0px;
    padding-right: 5px;
    border-radius: 50px;
}

.vesselTypeMenu a:hover {
    background-color: rgba(154, 161, 165, 0.2);
}

.vesselTypeMenu a img {
    width: 30px;
    float: left;
    margin-right: 5px;
    border-radius: 50%;
}

.vesselTypeMenu a p {
    float: left;
    padding-top: 5px;
    color: rgb(0, 0, 0);
}

.innerTypeMenu {
    width: 100%;
}

.tst-fs {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 102;
    display: none;
}

.vtm-fs {
    margin-top: 25px;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 100;
    border: none;
    border-bottom: 1px solid rgb(6, 87, 133);
    display: none;
}

@media screen and (min-width: 578px) and (max-width: 820px) {
    .tst-fs,
    .vtm-fs {
        top: 90px;
    }
}

@media screen and (max-width: 450px) {
    .vesselTypeMenu a {
        width: calc(50% - 8px);
        margin-right: 8px;
    }
}

@media screen and (min-width: 451px) and (max-width: 577px) {
    .vesselTypeMenu a {
        width: calc(33% - 8px);
        margin-right: 8px;
    }
    .vtm-mt {
        display: block;
        float: none !important;
        margin: 0 auto !important;
    }
}

@media screen and (min-width: 578px) and (max-width: 1329px) {
    .vesselTypeMenu a {
        width: calc(25% - 8px);
        margin-right: 8px;
    }
}

@media screen and (min-width: 1330px) {
    .vesselTypeMenu a {
        width: calc(12.5% - 8px);
        margin-right: 8px;
    }
    .innerTypeMenu {
        width: 100%;
        max-width: 1167px;
        margin: 0 auto;
    }
    .vesselTypeMenu {
        font-size: 16px;
    }
}

@media screen and (min-width: 1300px) {
    .innerTypeMenu {
        padding-left: 30px;
    }
}


/*--------------------------------- CRUISE FLEETS LIST -------------------------------------*/

#main_frame {
    max-width: 1020px;
    padding: 10px;
    text-align: justify;
    text-justify: distribute-all-lines;
}

ul#menu {
    display: inline-block;
    list-style-type: none;
    border: 0px solid white;
}

li#menu {
    background-color: #b3d1ff;
    display: inline-block;
    border: 0px solid white;
    cursor: pointer;
}

li#menu a {
    list-style-type: none;
    display: inline-block;
    font-family: Calibri;
    font-size: 16px;
    color: black;
    padding: 5px 7px 5px 7px;
    transition: .3s;
    -o-transition: .3s;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

li#menu a:hover {
    background: orange;
    color: white;
}

#company_name {
    display: inline-block;
    background-color: #17c635;
    font-weight: bold;
    font-family: Calibri;
    font-size: 16px;
    margin: 0px 0px 0px 0px;
    text-transform: uppercase;
}

#company_name a {
    list-style-type: none;
    display: inline-block;
    font-family: Calibri;
    color: white;
    padding: 5px 10px 5px 5px;
    vertical-align: middle;
}

#company_name a:hover {
    background: green;
    transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
}

#company_logo {
    vertical-align: middle;
    height: 20px;
    padding: 0px 5px;
    background: #17c635;
    margin: 0px 0px 0px 0px;
}

#links_container {
    display: inline-block;
    margin: 5px 0px 5px 0px;
}

.cruise-btn-wrapper {
    float: left;
    padding: 5px;
}

.cruise-btn {
    padding: 10px 5px;
    display: inline-block;
    text-align: center;
    background-color: rgb(89, 168, 210);
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 3px;
}

.cruise-btn:hover {
    background-color: rgb(89, 148, 180);
}

.show-fleet-location {
    float: left;
    font-weight: bold;
    padding: 5px;
    text-shadow: 2px 2px 4px #667ea3;
    color: black;
    font-size: 20px;
    font-family: calibri;
    padding: 5px 3px 5px 3px
}

.cruise-fleets-table {
    /*padding-left: 20px;*/
    float:left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 630px) {
    .cruise-fleets-table {
        display: none;
    }
}

.div-separator {
    width: 100%;
    height: 20px;
    display: inline-block;
}

.cruise-info-title {
    color: black;
    font-size: 18px;
    display: inline-block;
    width: 100%;
}

.cruise-info-wrapper {
    text-align: justify;
    margin-bottom: 30px;
}

.cruise-line-info {
    background: #17c635;
    color: white;
    font-size: 16px;
}

.cruise-ship-info {
    background: orange;
    color: white;
    font-size: 16px;
}


/*----------------------------- IMO / MMSI SEARCH -----------------------------------*/

.searchBox_coordinates {
    padding: 5px;
    border: none;
    height: 25px;
    width: 100%;
    max-width: 200px;
    outline: none;
    color: #5f5f5f;
    border-radius: 2px 2px 2px 2px;
    margin-bottom: 10px;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.searchBox_coordinates:focus {
    box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.searchButton_coordinates,
.imo-mmsi-search {
    cursor: pointer;
    padding: 5px 5px;
    display: inline-block;
    text-align: center;
    background-color: #4caf50;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 3px;
    box-shadow: 0 1px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 1px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 1px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.imo-fs-menu{
    	display: flex;
    	justify-content: space-around;
    	z-index: 10;
	position: relative;
        margin: 25px auto -80px;
        width: 100%;
	z-index: 100;
	pointer-events: none;
}

.imo-fs-btn{
    min-height: 50px;
    width: 90px;
    border-radius: 2px;
    border: 2px solid rgb(37, 53, 112);
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.85);
    pointer-events: all;
}

.imo-fs-btn img {
    width: 24px;
    height: 24px;
    margin: 8px auto 0px;
    display: block;
}

.imo-fs-btn p {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: black;
    text-align: center;
    margin-bottom: 5px;
}

.imo-search-wrapper {
    margin-top: 10px;
}

.imo-mmsi-search {
    float: right;
    margin-top: 1px;
    background-color: darkorange;
}

.imo-mmsi-search:hover {
    background-color: rgb(235, 140, 0);
    box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.searchButton_coordinates:hover {
    background-color: rgb(56, 165, 65);
    box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.imo-text-wrapper {
    width: 100%;
    display: inline-block;
    margin-bottom: 10px;
}

.imo-search-p {
    color: rgb(51, 102, 130);
    font-size: 14px;
}

.imo-mmsi-mt {
    width: 150px;
    position: absolute;
    margin: 30px 10px;
    border-radius: 4px;
    cursor: pointer;
    display: block;
}

.imo-mmsi-mt img,
.imo-mmsi-vf img {
    width: 150px;
    border-radius: 0px 0px 4px 4px;
}

.imo-mmsi-mt p,
.imo-mmsi-vf p {
    width: 150px;
    font-size: 16px;
    color: white;
    background-color: rgb(51, 102, 130);
    text-align: center;
    padding: 1px 5px;
    border-radius: 4px 4px 0px 0px;
}

.imo-mmsi-vf {
    display: none;
    width: 150px;
    position: absolute;
    margin: 15px 10px;
    margin-left: 60px;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .imo-mmsi-mt {
        position: relative;
        margin: 10px 0px;
    }
    .imo-mmsi-vf {
        position: relative;
        margin: 10px 0px;
    }
    .imo-fs-menu {
	margin: 56px auto -110px;
    }
}

.similar-info-imo {
    position: relative;
    margin: 20px 0px;
    width: 170px;
    height: 243px;
    padding: 0;
    font-size: 14px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.7);
}

@media screen and (min-width: 768px) {
    .similar-info-imo {
        display: block;
        position: absolute;
        margin-top: -280px;
        right: 40px;
        width: 170px;
        height: 243px;
        padding: 0;
        font-size: 14px;
        border-radius: 3px;
        background-color: rgba(255, 255, 255, 0.7);
    }
    #similar-change-menu {
        position: absolute;
        cursor: pointer;
        width: 170px;
        right: 40px;
        margin-top: -320px;
    }
}


/*---------------------- NAUTICAL CHART -----------------------*/

.nautical-img-wrapper {
    width: 100%;
}

@media screen and (max-width: 600px) {
    .nautical-img-wrapper {
        display: none;
    }
}

.nautical-img {
    position: relative;
    text-align: center;
    max-width: 70%;
    min-height: 200px;
    max-height: 200px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.nautical-text {
    color: rgb(51, 102, 130);
    padding: 10px;
    text-align: center;
    display: inline-block;
    width: 90%;
}

.nautical-chart-info {
    color: rgb(51, 102, 130);
}


/*------------------ Lat Lon Coordiantes Search ----------------------*/

.lat-lon-wrapper {
    width: 100%;
    float: left;
}


/*---------------------------- MESSAGES ----------------------------*/

.mobile-info {
    color: red;
    background: white;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 5px;
    display: none;
    text-align: center;
}

@media screen and (max-width: 1150px) {
    .mobile-info {
        display: inline-block;
    }
}


/*---------------------------- CONTAINER TERMINALS ---------------------------*/

.cma-cgm-text {
    max-width: 620px;
    padding: 10px;
    font-size: 0.9em;
}


/*--------------------------- WHO IS WHO -------------------------------*/

.wiw-img {
    width: 90%;
    border-radius: 10px;
    margin: 20px 0;
}

.wiw-table-image {
    width: 80%;
    min-width: 65px;
    max-width: 180px;
    border-radius: 5px;
}

.wiw-table-title {
    font-weight: bold;
    margin: 10px 0px;
    float: left;
    font-size: 16px;
    text-align: left;
    width: 100%;
}

.wiw-text {
    width: 100%;
    text-align: justify;
}

.wiw-text-wrapper {
    margin: 20px 0px;
}

.wiw-085em {
    font-size: 0.85em;
}


/*------------------------------------ Navigable rivers --------------------------------*/

#navigable-btn a {
    position: absolute;
    margin: 10px 0px 0px 10px;
    padding: 27px 0px 0px 0px;
    background-color: #4caf50;
    color: white;
    width: 386px;
    height: 120px;
    font-family: calibri;
    display: inline-block;
    font-size: 24px;
    text-align: center;
    border-radius: 5px 5px 5px 5px;
    z-index: 2;
}

#navigable-btn a:hover {
    background-color: rgb(56, 165, 65);
}

.navigable-text {
    text-align: justify;
    color: rgb(51, 102, 130);
    padding-bottom: 10px;
}

.navigable-text a{
    color: inherit;
    text-decoration: underline;
}


/*--------------------------- TRACKING SEARCH AND BUTTON ------------------------------*/

.track-input {
    border-radius: 2px;
    height: 25px;
    padding: 0 5px;
    margin: 10px 0 40px 0;
    outline: none;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.track-input:focus {
    box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.track-btn {
    color: white;
    border-radius: 2px;
    height: 25px;
    padding: 0 5px;
    background-color: #4caf50;
    box-shadow: 0 1px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 1px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 1px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.track-btn:hover {
    cursor: pointer;
    background-color: rgb(56, 165, 65);
    box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}


/*------------------------------ PLANE FLIGHT TRACKER -----------------------------*/

.pft-butn-wrapper{
    width: 100%;
    float: left;
}

.pft-button {
    width: calc(50% - 10px);
    cursor: pointer;
    padding: 2px 0px;
    margin: 10px 5px;
    font-size: 16px;
    text-align: center;
    border-radius: 3px;
    box-shadow: 0 1px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 1px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 1px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.pft-button:hover {
    box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.ptf-radar-wrapper {
    float: left;
    padding: 5px;
}

.pft-input {
    border-radius: 2px;
    height: 25px;
    padding: 0 5px;
    margin: 10px 5px;
    outline: none;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.pft-input:focus {
    box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
}

@media screen and (min-width: 900px) {
    .pft-butn-wrapper{
        width: auto;
    }
    .pft-button {
        width: 150px;
        height: 40px;
    }
}


/*------------------------------- AIRPORTS TRAFFIC -------------------------*/

.airports-codes-db {
    color: white;
    background-color: #258ac0;
    padding: 5px;
    margin: 3px 0px;
    text-align: center;
    border-radius: 3px;
    font-size: 12px;
}

.airports-codes-db:hover {
    cursor: pointer;
}

.airports-p {
    color: rgb(51, 102, 130);
    font-size: 14px;
    margin: 10px 5px;
}

.iata-list {
    text-align: left;
    width: 280px;
}


/*------------------------------- BDI ---------------------------------*/

.bdi-content {
    max-width: 700px;
}


/*------------------------------ FLAG STATISTICS -----------------------------*/

.flags-textarea {
    width: 100%;
    max-width: 700px;
    height: 300px;
}

.flags-textarea-div {
    width: 702px;
    height: 458px;
}


/*----------------------------- INCOTERMS ----------------------------------*/

.incoterms {
    width: 95%;
}

.incoterms-img {
    margin-bottom: 30px;
}


/*---------------------------- MID CODES -------------------------------*/

.mid-list {
    display: inline-block;
}


/*---------------------------- PIRACY MAP --------------------------------*/

.piracy-map-contnet {
    max-width: 728px;
}


/*--------------------------- SHIPYARD MAP -------------------------------*/

.shipyards-map-content {
    width: 100%;
    max-width: 1000px;
}


/*-------------------------- AIR CARGO TRAFFIC -----------------------------*/

.icao-list {
    text-align: left;
    width: 280px;
}

.icao-codes-note {
    color: red;
    font-weight: bold;
    text-decoration: underline;
}


/*---------------------------- CONTAINER GALLERY -----------------------------*/

.gallery-wrapper {
    max-width: 1000px;
}

.gallery-column {
    padding: 10px;
}

.gallery-img {
    margin-top: 20px;
    width: 100%;
    vertical-align: middle;
    box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.gallery-text {
    font-size: 0.8em;
    padding: 10px;
    color: rgb(105, 105, 105);
}

.gallery-text:hover {
    text-decoration: underline;
}


/*---------------------------- GOOGLE EARTH --------------------------------*/

.google-earth-img {
    width: 95%;
}

.google-earth-text {
    text-align: justify;
    font-size: 16px;
    padding: 20px;
}

.google-earth-download {
    color: white;
    background-color: rgb(51, 102, 130);
    padding: 5px 20px;
    margin: 3px 0px;
    text-align: center;
    border-radius: 3px;
    font-size: 30px;
    box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.google-earth-download:hover {
    background: rgb(51, 110, 140);
    cursor: pointer;
    box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 4px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}


/*--------------------------- NAVY ------------------------------*/
.navyTypeMenu{
    width: 100%;
}

.navyInnerTypeMenu{
    max-width: 100%; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap;
    height: 240px;
}

.navyInnerTypeMenu a{
    width: auto; 
    font-size: 14px;
    height: 20px; 
}

.navyInnerTypeMenu a img{
    width: 20px;
    height: 20px;	
}
   
.navyInnerTypeMenu a p {
    padding-top: 0px;
}

.navy-wrapper{
    float: left;
    width: 100%;
    margin-top: 20px;
}

.navy-wrapper p {
    margin-bottom: 10px;
}

.navy-title{
    color: rgb(51, 102, 130);
    font-size: 1.3em;
    font-weight: bold;
}

.navy-text {
    float: left;
    width: 100%;
    font-weight: normal;
    font-size: 16px;
    padding-bottom: 10px;
    text-align: justify;
    color: rgb(51, 102, 130);
}


.navy-text a {
    font-weight: bold;
    text-decoration: underline;
    color: inherit;
}

.navy-ships-line{
    float: left;
    height: 1px;
    width: 100%;
    margin: 5px 0;
    background-color: rgba(51, 102, 130, 0.4);
}

/*--- Ship Type ---*/
.navy-type-table{
    float: left;
    width: 100%;
    max-width: 800px;
    margin: 10px 0;
}

.navy-type-row{
    float: left;
    width: 100%;
    color: rgb(51, 102, 130);
    font-size: 16px;
    margin-bottom: 5px;
}

.desktop-type-row{
    display: none;
}

.ship-type{
    float: left;
    width: 100%;
    padding-left: 10px;
    color: rgb(51, 102, 130); 
}

.ship-type span{
    font-weight: bold;
    letter-spacing: 0.03em;
    border-bottom: 1px solid rgb(51, 102, 130); 
}

.hull-number{
    float: left;
    width: 100%;
    margin: 10px 0;
    padding-left: 20px; 
}

/*--- Ships list ---*/
.navy-ship-table{
    float: left;
    width: 100%;
    margin: 10px 0 20px;
    color: rgb(51, 102, 130);
}

.navy-ship-row{
    float: left;
    width: 100%;
    border-bottom: 1px solid rgb(200, 200, 200); 
    padding: 5px 0;
    font-size: 14px;
}

.navy-ship-row:hover{
    background-color: rgba(225, 225, 225, 0.3);
}

.navy-ship-row:first-child {
    font-size: 18px;
    border-bottom: none;
}

.navy-ship-row:last-child {
    border-bottom: none;
}

.navy-class,
.navy-comm,
.navy-size,
.navy-photo,
.navy-map{
    float: left;
    text-align: center;
}

.navy-class{
    text-align: left;
    width: calc(100% - 160px);
}

.navy-comm,
.navy-size {
     display: none;
}

.navy-photo,
.navy-map{
    width: 80px;
}

.navy-photo div,
.navy-photo p,
.navy-map a,
.navy-map div {
    width: 90%;
    display: block;
    margin: 0 auto;
    color: white;
    font-weight: bold;
    letter-spacing: 0.03em;
    background-color: rgb(51, 102, 130);
}

.navy-photo div{
    cursor: pointer;
}

.navy-map a {
    background-color: rgb(56, 165, 65);
}

.navy-map div,
.navy-photo p{
    background-color: rgb(200, 200, 200); 
}

@media screen and (min-width: 580px){
   .navyInnerTypeMenu a{
   	font-size: 15px;
        height: 30px; 
   }
   .navyInnerTypeMenu a img{
	width: 30px;	
	height: 30px;	
   }
   .navyInnerTypeMenu a p {
        padding-top: 5px;
   }

    .navy-class{
        width: calc(60% - 80px);
    }

    .navy-comm{
        display: block;
    	width: calc(40% - 80px);
    }
}

@media screen and (min-width: 630px){
    .ship-type{
	width: 30%; 
    }
    .hull-number{
        width: 70%;
    	margin: 0px;
    	padding-left: 0px; 
    }
    .desktop-type-row{
    	display: block;
    }
    .desktop-type-mobile{
    	display: none;
    }
}

@media screen and (min-width: 768px){
    .navyInnerTypeMenu{ 
    	height: 240px;
    }
}

@media screen and (min-width: 1000px){
    .navyInnerTypeMenu{ 
    	height: 160px;
    }
    .navy-class{
	width: 30%;
    }
    .navy-comm{
	width: 25%;
    }
    .navy-size{
	display: block;
	width: 25%;
    }
}

@media screen and (min-width: 1720px){
    .navyInnerTypeMenu{ 
    	height: 85px;
    }
}

/*--------------------------- Q&A ------------------------------*/
.qa-list{
   float: left;
   padding: 65px 10px 10px; 
   width: 100%; 
}

.qa-title{
    width: 100%;
    max-width: 860px; 
    margin: 0 auto 10px;
    color: rgb(51, 102, 130);
    font-size: 24px;
}

.qa-tabs{
   padding: 18px 0px 10px;
   border-width: 2px; 
   border-top: 2px solid;
   border-color: rgba(51, 102, 130, 0.4);
}

.qa-tabs a{
   flex: 0 1 25%;  
}

.qa-wrapper{
    display: none;
    width: 100%;
    float: left;
}

.qa-question{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 860px; 
    margin: 0 auto;
    border-bottom: 1px solid rgba(51, 102, 130, 0.4);
    padding: 8px 0 10px;
    color: rgb(51, 102, 130);
    cursor: pointer;
}

.bold-question{
    font-weight: bold;
}

.qa-arrow{
    border: solid black;
    border-width: 0 2px 2px 0;
    border-color: rgb(51, 102, 130);
    display: inline-block;
    padding: 4px;
    margin: 0px 10px;
    max-height: 3px;
    max-width: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transition: .3s;
    -webkite-transition: .3s;
    -moz-transition: .3s;
}

.rotate-arrow{
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
}

.qa-answers{
    display: none;
    color: rgb(51, 102, 130);
    padding: 10px 0 25px;
    width: 100%;
    max-width: 860px; 
    margin: 0 auto; 
    text-align: justify;
    font-size: 18px;
}

@media screen and (min-width: 768px){
    .qa-tabs a{
       flex: 0 1 20%;  
    }
}

/*-------------------------- LOG IN ----------------------------*/

.login-container {
    width: 360px;
    height: 883px;
    margin: 0 auto;
    padding: 60px 0;
}

.login-text {
    display: block;
    margin: 0px 30px;
    padding-bottom: 10px;
    color: rgb(51, 102, 130);
    font-size: 26px;
}

.login-text a {
    color: rgb(51, 102, 130);
}

.login-input-wrapper {
    margin-bottom: 20px;
}

.login-input {
    outline: none;
    width: 300px;
    height: 40px;
    padding: 7px;
    padding-left: 38px;
    font-size: 16px;
    color: rgb(51, 102, 130);
    border-radius: 4px;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.login-input::placeholder {
    color: rgb(51, 102, 130);
}

.login-input:focus {
    box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.login-input-img {
    position: absolute;
    margin: 12px;
}

.input-email {
    position: absolute;
    margin: 13px;
}

.remember-me {
    display: block;
    width: 300px;
    margin-top: 10px;
    margin-left: 30px;
    font-size: 16px;
}

.remember-me a {
    color: rgb(51, 102, 130);
}

.remember-me a:hover {
    text-decoration: underline;
}

.login-btn {
    cursor: pointer;
    display: inline-block;
    width: 300px;
    height: 34px;
    margin: 20px 0;
    padding-top: 3px;
    color: white;
    font-size: 20px;
    background-color: rgb(51, 102, 130);
    border-radius: 4px;
    box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 2px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.login-btn:hover {
    background-color: rgb(51, 120, 150);
    box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 3px 8px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.login-errors {
    width: 300px;
    margin-left: 30px;
    margin-bottom: 20px;
    color: rgb(235, 63, 63);
    background-color: rgb(255, 239, 239);
    font-size: 16px;
    padding: 10px 10px 5px 10px;
    border: 1px solid rgb(235, 63, 63);
    border-radius: 5px;
}

.login-error {
    padding-bottom: 5px;
}

.trust-logo {
    width: 300px;
    margin: 30px 30px 0px 30px;
    padding: 30px;
    text-align: center;
    border-top: 1px solid rgb(51, 102, 130);
}

@media screen and (max-width: 800px) {
    .trust-logo {
        display: none;
    }
}


/*-------------------------------- ACCOUNT MAIN MENU -----------------------------------*/

.account-wrapper {
    padding: 100px 50px;
}

@media screen and (max-width: 992px) {
    .account-wrapper {
        padding: 60px 30px;
    }
}

@media screen and (max-width: 768px) {
    .account-wrapper {
        padding: 40px 20px;
    }
}

.account-item {
    width: 60%;
    margin: 30px;
    border: 1px solid rgb(51, 102, 130);
    border-radius: 4px;
    background-color: rgb(51, 102, 130);
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
}

.account-item:hover {
    box-shadow: 0 6px 15px -3px rgb(100, 100, 100), -2px 0 8px -6px rgb(100, 100, 100), 2px 0px 8px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 6px 15px -3px rgb(100, 100, 100), -2px 0 8px -6px rgb(100, 100, 100), 2px 0px 8px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 6px 15px -3px rgb(100, 100, 100), -2px 0 8px -6px rgb(100, 100, 100), 2px 0px 8px -6px rgb(100, 100, 100);
    background-color: rgb(51, 110, 140);
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
}

.account-item img {
    width: 100%;
    border-radius: 3px 3px 0px 0px;
}

.account-item p {
    font-size: 27px;
    color: white;
    padding: 10px 0px 15px 0px;
}


/*----- VERIFY EMAIL -----*/

.verify-email-msg {
    max-width: 600px;
    padding: 0px 20px;
    font-size: 30px;
    color: rgb(51, 102, 130);
}

.verify-welcome-msg {
    padding: 200px 50px 50px 50px;
    font-size: 60px;
    color: rgb(51, 102, 130);
}


/*----------- COOKIES -----------*/

.cookies {
    display: none;
    position: fixed;
    z-index: 9999;
    width: 100%;
    bottom: 0;
    left: 0;
    clear: both;
    background-color: rgba(43, 43, 43, 0.8);
}

.cookies-text {
    float: left;
    color: white;
    padding: 12px;
    font-size: 16px;
    text-align: justify;
}

.cookies-text a{
    color: lightblue;
}

.cookies-agree,
.register-agree,
.register-close,
.register-agree-2,
.register-close-2 {
    float: right;
    color: black;
    background-color: rgb(250, 226, 10);
    width: 100px;
    margin: 10px;
    padding: 3px;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    border-radius: 3px;
}

.cookies-agree:hover {
    background-color: rgb(223, 203, 28);
}

.register-agree,
.register-agree-2 {
    color: white;
    background-color: #4caf50;
}

.register-agree:hover {
    background-color: rgb(56, 165, 65);
}

.register-close,
.register-close-2 {
    color: white;
    background-color: red;
}

.full-screen-vip {
    display: none;
    position: absolute;
    z-index: 9999;
    width: 300px;
    top: 500px;
    left: 50%;
    margin-left: -150px;
    background-color: rgba(43, 43, 43, 1);
    border-radius: 5px;
    text-align: center;
}

.register-agree-2,
.register-close-2 {
    float: none;
    display: inline-block;
}

.full-screen-notice {
    width: 100%;
    padding: 10px;
    color: white;
    font-size: 16px;
}

@media screen and (max-width: 980px) {
    .cookies-text {
        width: 100%;
        text-align: center;
    }
    .cookies-agree {
        width: 300px;
        text-align: center;
        /*margin: 10px auto;*/
    }
}



/*ADITIONAL CSS*/

/*------------------------------- HTML TAGS ------------------------------*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    min-width: 360px;
    font-family: calibri;
}

a {
    text-decoration: none;
}


/*------------------------------ POSITIONS -------------------------------*/

.rel {
    position: relative;
}

.abs {
    position: absolute;
}

.fixed {
    position: fixed;
}


/*------------------------------- DISPLAY -----------------------------*/

.dspl-none {
    display: none !important;
}

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

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


/*-------------------------------- WIDTH ------------------------------*/

.w100 {
    width: 100%;
}


/*----------------------------- MARGINS ----------------------------*/


/*--- all ---*/

.m-5 {
    margin: 5px;
}

.m-10 {
    margin: 10px;
}

.m-15 {
    margin: 15px;
}

.m-20 {
    margin: 20px;
}


/*--- margin-top ---*/

.mt-5 {
    margin-top: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}


/*--- margin-bottom ---*/

.mb-5 {
    margin-bottom: 5px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}


/*--- margin-left ---*/

.ml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 15px;
}

.ml-20 {
    margin-left: 20px;
}


/*--- margin-right ---*/

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-15 {
    margin-right: 15px;
}

.mr-20 {
    margin-right: 20px;
}


/*--- margin top & bottom ---*/

.m-tb-5 {
    margin: 5px 0;
}

.m-tb-10 {
    margin: 10px 0;
}

.m-tb-15 {
    margin: 15px 0;
}

.m-tb-20 {
    margin: 20px 0;
}


/*--- margin left & right ---*/

.m-rl-5 {
    margin: 0 5px;
}

.m-rl-10 {
    margin: 0 10px;
}

.m-rl-15 {
    margin: 0 15px;
}

.m-rl-20 {
    margin: 0 20px;
}


/*-------------------------------- PADDINGS --------------------------------*/


/*--- all ---*/

.p-5 {
    padding: 5px;
}

.p-10 {
    padding: 10px;
}

.p-15 {
    padding: 15px;
}

.p-20 {
    padding: 20px;
}


/*--- padding-top ---*/

.pt-5 {
    padding-top: 5px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.pt-20 {
    padding-top: 20px;
}


/*--- padding-bottom ---*/

.pb-5 {
    padding-bottom: 5px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pb-20 {
    padding-bottom: 20px;
}


/*--- padding-left ---*/

.pl-5 {
    padding-left: 5px;
}

.pl-10 {
    padding-left: 10px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-20 {
    padding-left: 20px;
}


/*--- padding-right ---*/

.pr-5 {
    padding-right: 5px;
}

.pr-10 {
    padding-right: 10px;
}

.pr-15 {
    padding-right: 15px;
}

.pr-20 {
    padding-right: 20px;
}


/*--- padding top & bottom ---*/

.p-tb-5 {
    padding: 5px 0;
}

.p-tb-10 {
    padding: 10px 0;
}

.p-tb-15 {
    padding: 15px 0;
}

.p-tb-20 {
    padding: 20px 0;
}


/*--- padding left & right ---*/

.p-rl-5 {
    padding: 0 5px;
}

.p-rl-10 {
    padding: 0 10px;
}

.p-rl-15 {
    padding: 0 15px;
}

.p-rl-20 {
    padding: 0 20px;
}


/*------------------------------- BACKGROUND COLOURS --------------------------------*/

.red {
    color: white;
    background-color: #ee0000;
}

.red:hover {
    background-color: rgb(225, 10, 20);
}

.darkred {
    background: #800000;
    color: white;
}

.darkred:hover {
    background: #690404;
    color: white;
}

.orange {
    color: white;
    background-color: darkorange;
}

.orange:hover {
    background-color: rgb(235, 140, 0);
}

.gray {
    color: white;
    background-color: gray;
}

.gray:hover {
    color: white;
    background-color: rgb(116, 112, 112);
}

.green {
    color: white;
    background-color: #4caf50;
}

.green:hover {
    background-color: rgb(56, 165, 65);
}

.yellow {
    color: black;
    background-color: rgb(243, 243, 2);
}

.yellow:hover {
    color: black;
    background-color: rgb(224, 224, 19);
}

.darkyellow {
    background-color: #ffcc00;
    color: black;
}

.darkyellow:hover {
    background-color: #e9bc06;
    color: black;
}

.darkblue {
    color: white;
    background-color: darkblue;
}

.darkblue:hover {
    background-color: rgb(5, 5, 112);
}

.lightblue {
    color: white;
    background-color: rgb(89, 168, 210);
}

.lightblue:hover {
    background-color: rgb(89, 148, 180);
}


/*--------------------------------- FLOATS --------------------------------*/

.left {
    float: left;
}

.right {
    float: right;
}


/*------------------------------- TEXT ALIGNS ----------------------------*/

.t-center {
    text-align: center;
}

.t-left {
    text-align: left;
}

.t-right {
    text-align: right;
}

.t-justify {
    text-align: justify;
}


/*-------------------------------- FONT SIZES ----------------------------*/

@font-face {
    font-family: calibri;
    src: url(fonts/Calibri.ttf);
}

.fs8 {
    font-size: 8px;
}

.fs9 {
    font-size: 9px;
}

.fs10 {
    font-size: 10px;
}

.fs11 {
    font-size: 11px;
}

.fs12 {
    font-size: 12px;
}

.fs13 {
    font-size: 13px;
}

.fs14 {
    font-size: 14px;
}

.fs14 {
    font-size: 14px;
}

.fs15 {
    font-size: 15px;
}

.fs16 {
    font-size: 16px;
}

.fs17 {
    font-size: 17px;
}

.fs18 {
    font-size: 18px;
}

.fs19 {
    font-size: 19px;
}

.fs20 {
    font-size: 20px;
}

.fs21 {
    font-size: 21px;
}

.fs22 {
    font-size: 22px;
}

.fs23 {
    font-size: 23px;
}

.fs24 {
    font-size: 24px;
}

.fs25 {
    font-size: 25px;
}

.fs30 {
    font-size: 30px;
}

.fs35 {
    font-size: 35px;
}

.fs40 {
    font-size: 40px;
}

.fs45 {
    font-size: 45px;
}

.fs50 {
    font-size: 50px;
}

.bold {
    font-weight: bold;
}

.italic {
    font-weight: italic;
}

.underline {
    font-weight: underline;
}


/*------------------------------ CURSORS -------------------------------*/

.cursor-ptr {
    cursor: pointer;
}


/*----------------------------- BOX SHADOWS -----------------------------*/

.shdw {
    box-shadow: 0 4px 4px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -moz-box-shadow: 0 4px 4px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
    -webkit-box-shadow: 0 4px 4px -3px rgb(100, 100, 100), -2px 0 4px -6px rgb(100, 100, 100), 2px 0px 4px -6px rgb(100, 100, 100);
}

.shdw-bottom {
    box-shadow: 0px 3px 4px 0px rgb(100, 100, 100);
}


/*--------------------------- BORDERS ----------------------------------*/


/*--- border-radius ---*/

.brd-r-2 {
    border-radius: 2px;
}

.brd-r-3 {
    border-radius: 3px;
}

.brd-r-5 {
    border-radius: 5px;
}

.brd-r-7 {
    border-radius: 7px;
}

.brd-r-10 {
    border-radius: 10px;
}

.brd-r-12 {
    border-radius: 12px;
}

.brd-r-15 {
    border-radius: 15px;
}


/*--- border styles ---*/

.brd-dotted {
    border-style: dotted;
}

.brd-dashed {
    border-style: dashed;
}

.brd-solid {
    border-style: solid;
}

.brd-double {
    border-style: double;
}

.brd-groove {
    border-style: groove;
}

.brd-ridge {
    border-style: ridge;
}

.brd-inset {
    border-style: inset;
}

.brd-outset {
    border-style: outset;
}

.brd-none {
    border-style: none;
}

.brd-hidden {
    border-style: hidden;
}

.brd-mix {
    border-style: dotted dashed solid double;
}


/*--- border width ---*/

.brd-1 {
    border-width: 1px;
}

.brd-2 {
    border-width: 2px;
}

.brd-3 {
    border-width: 3px;
}

.brd-4 {
    border-width: 4px;
}

.brd-5 {
    border-width: 5px;
}

/*------------------------------ CARET DOWN ---------------------------------*/
.caret {
	position: relative;
	display: inline-block;
	padding-bottom: 6px;
}

.caret:before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  border-top: 4px solid white;
	  border-left: 4px solid transparent;
	  border-right: 4px solid transparent;
}

.caret:after {
	  content: '';
	  position: absolute;
	  left: 3px;
	  top: 0;
	  border-top: 2px solid transparent;
	  border-left: 2px solid transparent;
	  border-right: 2px solid transparent;
}


/*----------------------------- Magnifying Glass Icon -------------------------- */

.ico-mglass {
	position:relative;
	display:inline-block;
	background: transparent;
	border-radius: 30px;
	height: 9px;
	width: 9px;
	margin-right: 2px;
	border: 2px solid black;
  
}

.ico-mglass:after {
	content: "";
	height: 2px;
	width: 6px;
	background: black;
	position:absolute;
	top:7px;
	left:5px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

/*--------------------- IMAGE PREVIEW ---------------------*/

#myImg {
    border-radius: 5px;
    cursor: pointer;
}

#myImg:hover {
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.2);
}

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 100%;
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

@media only screen and (max-width: 768px) {
    .modal-content {
        width: 100%;
    }
}


/*----------------------------- IMAGE OVERLAY ---------------------------*/

.img-container {
    position: relative;
    cursor: pointer;
}

.img-overlay {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    background-color: rgb(51, 102, 130);
}

.img-container:hover .img-overlay {
    opacity: 0.7;
}

.img-text {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

/*----- SCROLL DESIGN -----*/

.login-bg-img{
	position: absolute;
	width: 100%;
	height: 878px;
	background-image: url("https://www.marinevesseltraffic.com/Images/Scroll/fleets1.PNG");
	background-repeat: no-repeat;
	background-position: 50% 0;
	opacity: 0.13;
	z-index: -1;
}

.scroll-wrapper{
	width: 100%;
	overflow: auto;
	background-color: white;
	box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 0.6);
}

.scroll-wrapper h1,
.scroll-track-pic h1{
	padding: 20px 0px;
	font-size: 45px;
}

.scroll-wrapper p,
.scroll-track-pic p{
	padding: 10px 0px;
	font-size: 25px;
	color: rgb(51, 102, 130);
}

.scroll-wrapper img{
	float: left;
	box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.2);
}

.scroll-info{
	float: left;
	width: 50%;
	padding: 10px;
}


.hr{
	height: 1px;
	width: 100%;
	max-width: 1280px;
	margin-bottom: 10px;
	background-color: rgb(51, 102, 130);	
}

.scroll-img-33{
	float: left;
	width: calc(33% - 50px);
	margin: 0px 25px 75px 25px;
}


.scroll-img-33 img{
	width: 100%;
}

.scroll-img-50{
	float: left;
	width: calc(50% - 90px);
	margin: 0px 45px 75px 45px;
}

.scroll-img-50 img{
	width: 100%;
	box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.2);
}

.scroll-track-pic {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px;
	text-align: right;
}

.scroll-img-100{
	margin: 20px;
	margin-bottom: 60px;
	box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.2);
	width: calc(100% - 40px);
	max-width: 1160px;
}

.scroll-text{
	float: left;
	font-size: 16px;
	width: 100%;
	text-align: center;
}

.max1280{
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px;
}

.back-to-top{
	display: none;
	position: fixed;
	right: 0;
	bottom: 0;
	color: whitesmoke;
	background-color: rgb(51, 102, 130);
	width: 50px;
	height: 50px;
	padding: 13px 10px;
	margin: 20px;
	border-radius: 50%;
}

.register-info{
	display: block;
	padding-bottom: 50px;
}

.register-now {
	color: white;
	border: 3px solid #4caf50;
	border-radius: 4px;
	font-size: 30px;
	padding: 15px 60px;
	background-color: #4caf50;
	text-align: center;
	box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.2);
	transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
}

.register-now:hover {
	border-color: rgb(56, 165, 65);
	background-color: white;
	color: rgb(56, 165, 65);
	transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
}

#box1, #box2, #box3, #box4, #box5, #box6, #box7 {
	opacity: 0;
}

@media screen and (max-width: 600px){
	.scroll-wrapper h1{
		padding: 20px 0px;
		font-size: 30px;
	}
}

@media screen and (max-width: 800px){
	.scroll-img-33, 	
	.scroll-img-50 {
		width: 100%;
		margin: 0 0 75px 0;
	}
}

@media screen and (max-width: 1440px){
	.register-info{
		display: none;
	}
}

/*----- CHEVRON -----*/

.chevron{
	cursor: pointer;
}

.chevron:before {
	border-style: solid;
	border-width: 0.20em 0.20em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	left: 0.15em;
	position: relative;
	top: 0.15em;
	transform: rotate(-45deg);
	vertical-align: top;
	width: 0.45em;
}

.chevron.right:before {
	left: 0;
	transform: rotate(45deg);
}

.chevron.bottom:before {
	top: 0;
	transform: rotate(135deg);
}

.chevron.left:before {
	left: 0.25em;
	transform: rotate(-135deg);
}

.up-down{
	color: deeppink;
	animation: updown 1.8s ease-in-out infinite;
	
}

@media screen and (max-width: 800px){
	.login-text.chevron.bottom{
		padding-top: 40px;
	}
}

@keyframes updown{
	0%, 100%{
		margin-top: 0px;
	}
	50%{
		margin-top: -10px;
	}
}


/*-------------------------------- WIDTH ------------------------------*/

.w100 {
    width: 100%;
}

.no-shadow {
    box-shadow: none !important;
    -mox-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/*----------------------------- MARGINS ----------------------------*/


/*--- all ---*/

.m-5 {
    margin: 5px;
}

.m-10 {
    margin: 10px;
}

.m-15 {
    margin: 15px;
}

.m-20 {
    margin: 20px;
}


/*--- margin-top ---*/

.mt-5 {
    margin-top: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}


/*--- margin-bottom ---*/

.mb-5 {
    margin-bottom: 5px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}


/*--- margin-left ---*/

.ml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 15px;
}

.ml-20 {
    margin-left: 20px;
}


/*--- margin-right ---*/

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-15 {
    margin-right: 15px;
}

.mr-20 {
    margin-right: 20px;
}


/*--- margin top & bottom ---*/

.m-tb-5 {
    margin: 5px 0;
}

.m-tb-10 {
    margin: 10px 0;
}

.m-tb-15 {
    margin: 15px 0;
}

.m-tb-20 {
    margin: 20px 0;
}


/*--- margin left & right ---*/

.m-rl-5 {
    margin: 0 5px;
}

.m-rl-10 {
    margin: 0 10px;
}

.m-rl-15 {
    margin: 0 15px;
}

.m-rl-20 {
    margin: 0 20px;
}


/*-------------------------------- PADDINGS --------------------------------*/


/*--- all ---*/

.p-5 {
    padding: 5px;
}

.p-10 {
    padding: 10px;
}

.p-15 {
    padding: 15px;
}

.p-20 {
    padding: 20px;
}


/*--- padding-top ---*/

.pt-5 {
    padding-top: 5px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.pt-20 {
    padding-top: 20px;
}


/*--- padding-bottom ---*/

.pb-5 {
    padding-bottom: 5px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pb-20 {
    padding-bottom: 20px;
}


/*--- padding-left ---*/

.pl-5 {
    padding-left: 5px;
}

.pl-10 {
    padding-left: 10px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-20 {
    padding-left: 20px;
}


/*--- padding-right ---*/

.pr-5 {
    padding-right: 5px;
}

.pr-10 {
    padding-right: 10px;
}

.pr-15 {
    padding-right: 15px;
}

.pr-20 {
    padding-right: 20px;
}


/*--- padding top & bottom ---*/

.p-tb-5 {
    padding: 5px 0;
}

.p-tb-10 {
    padding: 10px 0;
}

.p-tb-15 {
    padding: 15px 0;
}

.p-tb-20 {
    padding: 20px 0;
}


/*--- padding left & right ---*/

.p-rl-5 {
    padding: 0 5px;
}

.p-rl-10 {
    padding: 0 10px;
}

.p-rl-15 {
    padding: 0 15px;
}

.p-rl-20 {
    padding: 0 20px;
}


/*------------------------------- BACKGROUND COLOURS --------------------------------*/

.red {
    color: white;
    background-color: #ee0000;
}

.red:hover {
    background-color: rgb(225, 10, 20);
}

.darkred {
    background: #800000;
    color: white;
}

.darkred:hover {
    background: #690404;
    color: white;
}

.orange {
    color: white;
    background-color: darkorange;
}

.orange:hover {
    background-color: rgb(235, 140, 0);
}

.gray {
    color: white;
    background-color: gray;
}

.gray:hover {
    color: white;
    background-color: rgb(116, 112, 112);
}

.green {
    color: white;
    background-color: #4caf50;
}

.green:hover {
    background-color: rgb(56, 165, 65);
}

.yellow {
    color: black;
    background-color: rgb(243, 243, 2);
}

.yellow:hover {
    color: black;
    background-color: rgb(224, 224, 19);
}

.darkyellow {
    background-color: #ffcc00;
    color: black;
}

.darkyellow:hover {
    background-color: #e9bc06;
    color: black;
}

.darkblue {
    color: white;
    background-color: darkblue;
}

.darkblue:hover {
    background-color: rgb(5, 5, 112);
}

.lightblue {
    color: white;
    background-color: rgb(89, 168, 210);
}

.lightblue:hover {
    background-color: rgb(89, 148, 180);
}

/*--------------------------------- FLOATS --------------------------------*/

.left {
    float: left;
}

.right {
    float: right;
}


/*------------------------------- TEXT ALIGNS ----------------------------*/

.t-center {
    text-align: center;
}

.t-left {
    text-align: left;
}

.t-right {
    text-align: right;
}

.t-justify {
    text-align: justify;
}


/*-------------------------------- FONT SIZES ----------------------------*/

@font-face {
    font-family: calibri;
    src: url(fonts/Calibri.ttf);
}

.fs8 {
    font-size: 8px;
}

.fs9 {
    font-size: 9px;
}

.fs10 {
    font-size: 10px;
}

.fs11 {
    font-size: 11px;
}

.fs12 {
    font-size: 12px;
}

.fs13 {
    font-size: 13px;
}

.fs14 {
    font-size: 14px;
}

.fs14 {
    font-size: 14px;
}

.fs15 {
    font-size: 15px;
}

.fs16 {
    font-size: 16px;
}

.fs17 {
    font-size: 17px;
}

.fs18 {
    font-size: 18px;
}

.fs19 {
    font-size: 19px;
}

.fs20 {
    font-size: 20px;
}

.fs21 {
    font-size: 21px;
}

.fs22 {
    font-size: 22px;
}

.fs23 {
    font-size: 23px;
}

.fs24 {
    font-size: 24px;
}

.fs25 {
    font-size: 25px;
}

.fs30 {
    font-size: 30px;
}

.fs35 {
    font-size: 35px;
}

.fs40 {
    font-size: 40px;
}

.fs45 {
    font-size: 45px;
}

.fs50 {
    font-size: 50px;
}

.bold {
    font-weight: bold;
}

.italic {
    font-weight: italic;
}

.underline {
    font-weight: underline;
}