@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Oxygen');
@import url('https://fonts.googleapis.com/css?family=Comfortaa|Permanent+Marker');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700');
* {
    margin: 0px;
    padding: 0px;
}
a {
    text-decoration: none;
}
.mobfix{
    display: block;
}
.tb-cal-product-col{
    display: none;
}
.hideDesk{
    display: none;
}
.calendar{
    margin-left: 40px;
    width: calc(100% - 80px);
}
.formHeader{
    width: 100%;
    padding: 10px;
    padding-left: 0px;
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    color: dimgrey;
}
.formBlocks{
    width: 60%;
    padding: 10px;
    padding-left: 40px;
}
.formInput{
    padding: 5px;
    width: 100%;
    color: dimgrey;
    border-radius: 5px;
    border: 1px solid grey;
}
input.formButton{
    border: 0px;
    padding: 10px;
    margin-left: 40px;
    color: white;
    background-color: dodgerblue;
    border-radius: 5px;
}
input.formButton:hover{
    border: 0px;
    padding: 10px;
    margin-left: 40px;
    background-color: goldenrod;
    border-radius: 5px;
    color: white;
}
.heightSpace{
    height: 80px;
    margin-top: 0px;
    padding-top: 0px;
    display: block;
    width: 100%;
}
.php{
    color: darkred;
    padding-left: 40px;
    font-family: 'Oxygen', sans-serif;
}
.mobileNav {
    display: none;
}
.mainNav {
    height: 70px;
    position: relative;
    width: inherit;
    display: block;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 150;
}
div.navDiv {
    position: fixed;
    width: 100%;
    z-index: 149;
}
.navButton {
    display: inline-block;
    height: 70px;
    width: calc(100% / 8);
    vertical-align: top;
    margin-left: 5px;
    margin-right: 5px;
    z-index: 151;
}
.navButton:hover {
    background-color: rgba(0, 0, 0, 0.3);
    border-bottom: 2px yellow solid;
}
.navButton:hover h4 {
    color: white;
}
.navButton:hover h3 {
    color: goldenrod;
}
.bookNowButton:hover {
    background-color: midnightblue;
}
.bookNowBox {
    display: inline-block;
    height: 70px;
    width: calc(100% / 4);
    vertical-align: top;
    margin: 5px;
    z-index: 151;
}
.bookNowInfo {
    display: inline-block;
    height: 50px;
    width: calc(100% / 1.9);
    vertical-align: top;
    text-align: center;
    margin-top: 5px;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 151;
}
.bookNowInfo:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
.bookNowButton {
    display: inline-block;
    height: 70px;
    width: calc(100% / 4.3);
    vertical-align: top;
    text-align: center;
    height: 50px;
    color: white;
    background-color: darkblue;
    padding: 0 20px 0 20px;
    margin-top: 5px;
    font-size: 0.75em;
    z-index: 151;
}
.bookNowButton h3 {
    line-height: 50px;
    font-weight: 100;
}
.bookNowInfo h3 {
    line-height: 25px;
}
.bookNowInfo h4 {
    line-height: 20px;
    color: darkgoldenrod;
}
.homeButton {
    display: inline-block;
    height: 70px;
    width: calc(100% / 6);
    vertical-align: top;
}
.navContainer {
    margin: 10px;
    text-align: right;
}
nav h3 {
    font-family: 'Oxygen', sans-serif;
    color: white;
    text-decoration: none;
    line-height: 30px;
}
nav h4 {
    font-family: 'Oxygen', sans-serif;
    color: gray;
    text-decoration: none;
    line-height: 30px;
}
img.navHome {
    margin: 5px;
    height: auto;
    width: 100%;
    max-width: 110px;
}
a.homeButton div.navContainer {
    padding: 0xp;
    margin: 0px;
}
.sidebar {
    position: fixed;
    display: block;
    right: -10px;
    top: 200px;
    height: 200px;
    width: 65px;
    padding: 0px;
    z-index: 100;
}
/* Style all font awesome icons */

.fa {
    padding: 20px;
    font-size: 30px;
    width: 15px;
    height: 15px;
    margin: 0px;
    margin-right: -3px;
    text-align: center;
    text-decoration: none;
    border-radius: 0;
}
/* Add a hover effect if you want */

.fa:hover {
    opacity: 0.9;
}
/* Set a specific color for each brand */
/* Facebook */

.fa-facebook {
    background: #3B5998;
    color: white;
}
.fa-instagram {
    background-color: purple;
    color: white;
}
nav.sidebar a img.ta {
    width: 55px;
    height: auto;
    margin: 0px;
    margin-bottom: -5px;
}
nav.sidebar a img.ta:hover {
    opacity: 0.9
}
#crewimg {
    width: 60%;
    margin-left: 20%;
    height: auto;
    display: block;
}
div.GannetSection {
    height: ;
    background-position: center;
    background-size: cover;
    background-image: url(../img/Gannet-Fishing.jpg);
}
.pilot {
    height: 800px;
    background-position: center;
    background-size: cover;
    background-image: url(../img/Pilot-Whales.jpg);
}
.whale {
    height: 800px;
    background-position: center;
    background-size: cover;
    background-image: url(../img/Brydes-Whale-Dolphins-Swimming.JPG);
}
.whale2 {
    height: 800px;
    background-position: center;
    background-size: cover;
    background-image: url(../img/Whales-Dolphins-Underwater.jpg);
}
.img_3224 {
    height: 800px;
    background-position: center;
    background-size: cover;
    background-image: url(../img/Leatherback-Turtle-Swimming.jpg);
}
h1.section1 {
    color: white;
    font-size: 5em;
    text-align: center;
    line-height: auto;
    font-weight: 100;
    height: auto;
    padding-left: 5px;
    padding-right: 5px;
    font-family: 'Permanent Marker', cursive;
}
h2.section1 {
    color: white;
    font-size: 1em;
    text-align: center;
    margin-top: 0px;
    line-height: auto;
    font-weight: 200;
    font-family: 'Roboto', sans-serif;
    font-stretch: expanded;
    letter-spacing: 2px;
}
.section2 {
    height: 800px;
    background-position: center;
    background-size: cover;
    background-image: url(../img/Dolphins-Swimming-Jumping.jpg);
}
.section3 {
    height: 800px;
    background-position: center;
    background-size: cover;
    background-image: url(../img/Dolphin-Swimming-Boat.jpg);
}
.sectionContent {
    height: 600px;
    display: block;
    background-color: white;
}
.sectionContent2 {
    height: auto;
    display: block;
    width: calc(100% - 80px);
    background-color: white;
    padding: 40px;
}
h3.book {
    color: goldenrod;
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 25px;
    font-size: 3em;
    font-weight: 100;
    display: inline-block;
    margin-left: 40px;
}
.sectionContent1 {
    height: auto;
    display: block;
    width: 100%;
}
.background {
    position: fixed;
    width: 100%;
    height: 0px;
    left: 0px;
    top: 0px;
    background-image: url(../img/Dolphin-Swimming-Leap.JPG);
    background-position: center;
    background-size: cover;
    z-index: -10;
}
.oneDiv {
    width: 50%;
    display: inline-block;
    height: 600px;
}
.oneDivl {
    width: 50%;
    display: inline-block;
    height: 600px;
    float: right;
}
#boat {
    background-image: url(../img/Dolphin-Swimming-Boat.jpg);
    background-position: center;
    background-size: cover;
}
#mat {
    background-image: url(../img/Swim-Mat.jpg);
    background-position: center;
    background-size: cover;
}
#swimming {
    background-image: url(../img/Swimming-Dolphins.JPG);
    background-position: center;
    background-size: cover;
}
#orca {
    background-image: url(../img/Orca-Close-Swimming-Dolphins.JPG);
    background-position: center;
    background-size: cover;
    background
}
#dolphininfo {
    background-image: url(../img/Dolphin-Playing-Jump.jpg);
    background-position: center;
    background-size: cover;
}
#whalest {
    background-image: url(../img/Pilot-Whales-Swimming.jpg);
    background-position: center;
    background-size: cover;
}
#whalesb {
    background-image: url(../img/Brydes-Whale.jpg);
    background-position: center;
    background-size: cover;
}
#seals {
    background-image: url(../img/Seal-Close-Swimming.jpg);
    background-position: center;
    background-size: cover;
}
#birds {
    background-image: url(../img/Sooty-Bird-Swimming.JPG);
    background-position: center;
    background-size: cover;
}
#fish {
    background-image: url(../img/Leatherjacket-Fish-Swimming.jpg);
    background-position: center;
    background-size: cover;
}
#offer {
    background-image: url(../img/Dolphin-Swimming-Calm.jpg);
    background-position: center;
    background-size: cover;
}
#success {
    background-image: url(../img/Dolphins-Swimming-Playing.jpg);
    background-position: center;
    background-size: cover;
}
.dummy {
    color: gold;
    text-decoration: underline;
}
.dso{
    display: none;
}
.twoDiv {
    width: calc(50% - 40px);
    height: 600px;
    margin-top: 0px;
    display: inline-block;
    float: right;
    padding: 20px;
    overflow-y: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
}
.twoDivl {
    width: calc(50% - 40px);
    height: 600px;
    margin-top: 0px;
    display: inline-block;
    padding: 20px;
    overflow-y: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
}
.section4 {
    height: 800px;
    background-position: center;
    background-size: cover;
    background-image: url(../img/Underwater-Archway-Fish.jpg)
}
#moreBtn {
    display: block;
    /* Hidden by default */
    
    position: absolute;
    /* Fixed/sticky position */
    
    top: ;
    /* Place the button at the bottom of the page */
    
    left: calc(50% - 25px);
    /* Place the button 30px from the right */
    
    z-index: 99;
    /* Make sure it does not overlap */
    
    border: none;
    /* Remove borders */
    
    outline: none;
    /* Remove outline */
    
    margin-top: ;
    color: white;
    margin-bottom: 2.5px;
    /* Text color */
    
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    /* Add a mouse pointer on hover */
    
    width: 50px;
    height: auto;
}
.smaller {
    display: none;
}
img.arrow {
    width: 50px;
    height: auto;
}
#moreBtn:hover {
    opacity: 0.8;
    padding-top: 2px;
}
h2.dolph {
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 25px;
    font-size: 3em;
    font-weight: 100;
    color: white;
}
h4.dolph {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    color: white;
}
p.dolph {
    font-family: 'Oxygen', sans-serif;
    margin-top: 25px;
    font-size: 1.1em;
    color: white;
}
p.pdolph3 {
    color: dimgrey;
    margin: 20px;
    letter-spacing: 2.5px;
    font-size: 1em;
}
h2.h2dolph3 {
    color: darkgoldenrod;
    text-decoration-line: underline;
    margin: 20px;
    text-align: center;
    font-weight: 100;
    font-size: 1em;
}
h4.book {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    color: dimgrey;
    padding: 5px 5px 5px 40px;
}
div.crewinfoml {
    width: 40%;
    display: inline-block;
    margin-top: 0px;
}
div.crewinfom {
    width: 40%;
    text-align: left;
    display: block;
    float: right;
    margin-right: 20px;
    margin-left: auto;
    margin-top: 0px;
}
div.crewinfo {
    width: 10px;
}
div.info {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 20px;
    padding-left: 0;
    width: 35%;
    position: absolute;
    left: 0px;
    top: 0px;
    border-right: yellow 5px solid;
}
div.info2 {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    padding-right: 0;
    width: 25%;
    position: absolute;
    left: 0px;
    top: 0px;
    border-left: dodgerblue 5px solid;
}
div.info3 {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 20px;
    padding-right: 0;
    width: 25%;
    position: absolute;
    left: 0px;
    top: 0px;
    border-left: forestgreen 5px solid;
}
div.info:hover {
    border-right: yellow 25px solid;
}
div.info2:hover {
    border-left: dodgerblue 25px solid;
}
div.info3:hover {
    border-left: forestgreen 25px solid;
}
.taBox{
    width: auto;
    display: inline-block;
    height: auto;
    padding: 0px;
    margin: 0px;
    
}
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    position: absolute;
    height: 60px;
    left: calc(50% - 30px);
    top: 300px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.googlemap{
    width: calc(100% - 20px);
    height: 450px;
}
.loading11{
    background-color: white;
    z-index: 200;
    width: 100%;
    height: 4000px;
    position: fixed;
}
.taBox1{
    position: absolute;
    left: 00px;
    top: 60px;
    padding: 0px;
}
footer {
    background-color: white;
    width: calc(96.95% - 25px);
    height: 400px;
    padding: 20px;
    border-top: yellow 5px solid;
}
h5#clickMore11 {
    font-family: 'Oxygen', sans-serif;
    font-size: 1em;
    color: white;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 135px;
    height: 21px;
    font-weight: 100;
    z-index: 99;
    text-align: right;
}
h5#clickMore22 {
    font-family: 'Oxygen', sans-serif;
    font-size: 1em;
    color: dimgrey;
    display: none;
    top: 0px;
    left: 0px;
    width: 135px;
    height: 21px;
    position: absolute;
    font-weight: 100;
    z-index: 99;
    text-align: left;
}
h5#clickMore33 {
    font-family: 'Oxygen', sans-serif;
    font-size: 1em;
    color: white;
    display: none;
    top: 0px;
    left: 0px;
    width: 135px;
    height: 21px;
    position: absolute;
    font-weight: 100;
    z-index: 99;
    text-align: right;
}
.contP {
    color: dimgrey;
    font-family: 'Oxygen', sans-serif;
    margin-top: 25px;
    font-size: 1.1em;
    display: inline-block;
}
.contP1 {
    color: dimgrey;
    font-family: 'Oxygen', sans-serif;
    margin-top: 0;
    font-size: 1.1em;
    background-color: white;
    padding: 40px;
    width: calc(100% - 80px);
    margin-bottom: 100px;
    display: inline-block;
}
.contP1h {
    font-family: 'Oxygen', sans-serif;
    margin-top: 25px;
    font-size: 1.6em;
    padding: 40px;
    background-color: white;
    width: calc(100% - 80px);
    color: indianred;
    display: inline-block;
}
.contH2 {
    color: goldenrod;
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 25px;
    font-size: 3em;
    font-weight: 100;
    display: inline-block;
}
.contH2G {
    color: forestgreen;
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 25px;
    margin-bottom: 50px;
    font-size: 3em;
    font-weight: 100;
    display: inline-block;
}
.wide{
width: calc(100% - 40px);
overflow-y: scroll;
}
.contH2W {
    color: dodgerblue;
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 25px;
    font-size: 3em;
    font-weight: 100;
    display: inline-block;
}
.contH2F {
    color: orangered;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 3em;
    background-color: white;
    width: calc(100% - 80px);
    padding: 40px;
    font-weight: 100;
    padding-top: 140px;
    display: inline-block;
}
.navButtonb {
    display: inline-block;
    height: 50px;
    width: 100%;
    vertical-align: top;
    margin-left: 0px;
    margin-right: 0px;
    z-index: 151;
    display: none;
    background-color: rgba(dodgerblue);
}
.b {
    display: none;
}
.info2m {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
    display: none;
}
@media only screen and (max-width: 1250px) {
    nav h4 {
        display: none;
    }
    .bookNowInfo {
        display: none;
    }
    .bookNowButton {
        width: 100%;
    }
    .bookNowBox {
        width: 20%;
    }
    .twoDiv {
        overflow-y: scroll;
    }
    .twoDivl {
        overflow-y: scroll;
    }
}
@media only screen and (max-width: 670px) {
    nav h3 {
        font-family: 'Oxygen', sans-serif;
        color: white;
        font-size: 0.7em;
        text-decoration: none;
        line-height: 30px;
        line-height: 50px;
    }
}
@media only screen and (max-width: 470px) {
    .arrow {
        display: none;
    }
    .taBox1{
    position: absolute;
    left: 10px;
        display: none;
    bottom: 10px;
    padding: 0px;
}
    .info2 {
        display: none;
    }
    .info {
        display: none;
    }
    #crewinfo {
        display: none;
    }
    .info3 {
        display: none;
    }
    .info2m {
        display: block;
        bottom: 0px;
        border-bottom: yellow 5px solid
    }
    .navButton {
        display: inline-block;
        height: 50px;
        width: 100%;
        vertical-align: top;
        margin-left: 0px;
        margin-right: 0px;
        z-index: 151;
        background-color: rgba(dodgerblue);
    }
    h1.section1 {
        font-size: 2.8em;
        width: 100%;
        margin-bottom: 50px;
    }
    #JavaMove3 {
        display: none;
    }
    .b {
        display: relative;
        font-family: 'Oxygen', sans-serif;
        color: white;
        text-decoration: none;
        line-height: 30px;
    }
    .mob {
        font-size: 0.8em;
        display: none;
    }
    .navButtonb {
        display: inline-block;
        height: 50px;
        width: 100%;
        vertical-align: top;
        margin-left: 0px;
        margin-right: 0px;
        z-index: 151;
        display: inline-block;
        background-color: rgba(dodgerblue);
        border-bottom: red 4px solid;
    }
    .mainNav {
        height: 300px;
        position: relative;
        width: inherit;
        display: none;
        background-color: rgba(dodgerblue);
        z-index: 150;
    }
    div.navDiv {
        position: relative;
        width: 100%;
        z-index: 149;
        display: none;
    }
    .homeButton {
        display: none;
    }
    .navContainer {
        margin: 10px;
        text-align: center;
    }
    .navContainer h4 {
        display: none;
    }
    .bookNowButton {
        display: inline-block;
        height: 70px;
        width: calc(100% / 4.2);
        vertical-align: top;
        text-align: center;
        height: 50px;
        color: white;
        background-color: darkblue;
        padding: 0 20px 0 20px;
        margin-top: 5px;
        font-size: 0.5em;
        z-index: 151;
    }
    .bookNowBox {
        display: inline-block;
        height: 70px;
        width: 100%;
        vertical-align: top;
        margin: 5px;
        z-index: 151;
        display: none;
    }
    .bookNowInfo {
        display: inline-block;
        height: 50px;
        width: calc(100% / 2.5);
        vertical-align: top;
        text-align: center;
        margin-top: 5px;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 151;
    }
    .sidebar {
        top: -1000px;
    }
    .te {
        width: 100%;
        float: none;
    }
    .ds {
    }
    .mobileNav {
        display: block;
        height: 100px;
        background-color: dodgerblue;
    }
    .navMob {
        height: 100px;
    }
    .topline {
        height: 50px;
    }
    .bottomline {
        height: 50px;
    }
    a.mobnav {
        padding: 10px;
        color: white;
        height: 30px;
        text-align: center;
        width: calc((100% / 3) - 20px);
        display: inline-block;
        line-height: 30px;
        font-family: 'Oxygen', sans-serif;
    }
    a.mobnav:hover {
        padding: 10px;
        color: white;
        height: 30px;
        border-bottom: yellow solid 4px;
        text-align: center;
        width: calc((100% / 3) - 20px);
        display: inline-block;
        line-height: 30px;
        background-color: rgba(0, 0, 0, 0.3);
        font-family: 'Oxygen', sans-serif;
    }
    .hidemob {
        display: none;
    }
    div.GannetSection {
        height: ;
        background-position: center;
        background-size: cover;
        display: none;
        background-image: url(../img/Gannet-Fishing.jpg);
    }
    .pilot {
        height: 800px;
        background-position: center;
        background-size: cover;
        display: none;
        background-image: url(../img/Pilot-Whales.jpg);
    }
    .whale {
        height: 800px;
        background-position: center;
        background-size: cover;
        display: none;
        background-image: url(../img/Brydes-Whale-Dolphins-Swimming.JPG);
    }
    .whale2 {
        height: 800px;
        background-position: center;
        background-size: cover;
        display: none;
        background-image: url(../img/Whales-Dolphins-Underwater.jpg);
    }
    .img_3224 {
        height: 800px;
        background-position: center;
        background-size: cover;
        display: none;
        background-image: url(../img/Leatherback-Turtle-Swimming.jpg);
    }
    .formHeader{
    width: 100%;
    padding: 10px;
    padding-left: 0px;
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    color: dimgrey;
    }
    .formBlocks{
        width: 80%;
        padding: 10px;
        padding-left: 40px;
    }
    .formInput{
        width: 100%;
        padding: 5px;
        color: dimgrey;
        border-radius: 5px;
        border: 1px solid grey;
    }
    .heightSpace{
        height: 80px;
        display: block;
        width: 100%;
        display: none;
    }
    .php{
        color: darkred;
        padding-left: 40px;
        font-family: 'Oxygen', sans-serif;
    }
    .mobfix{
        display: block;
    }
    .hideDesk{
        display: block;
        height: 400px;
        width: 100%;
        padding-top: 50px;
        padding: 5px;
        background-position: center;
        background-size: cover;
        background-image: url(../img/Dolphin-Swim-Beauty.jpg);
    }
    h1.section1 {
        color: white;
        font-size: 2.2em;
        text-align: center;
        line-height: auto;
        font-weight: 100;
        margin-top: 50px;
        height: auto;
        width: 80%;
        margin-left: 10%;
        font-family: 'Permanent Marker', cursive;
    }
    h2.section1 {
        color: white;
        font-size: 1em;
        padding: 10px;
        text-align: center;
        margin-top: 0px;
        line-height: auto;
        font-weight: 200;
        font-family: 'Roboto', sans-serif;
        font-stretch: expanded;
        letter-spacing: 2px;
    }
    .sectionContent {
        height: auto;
        display: block;
        background-color: white;
    }
    .twoDiv {
        width: calc(100%);
        height: auto;
        margin-top: 0px;
        display: block;
        padding: 20px;
        overflow-y: hidden;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: 20px;
    }
    .twoDivl {
        width: calc(100%);
        height: auto;
        margin-top: 0px;
        display: block;
        padding: 20px;
        overflow-y: hidden;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: 20px;
    }
    .oneDiv {
        width: calc(100% + 40px);
        display: block;
        left: 0px;
        height: 400px;
    }
    .oneDivl {
        left: 40px;
        width: calc(100% + 40px);
        display: block;
        height: 400px;
        display: none;
    }
    .dso{
        display: block;
    }
}