/*
 Theme Name: Great Sandy Straits Marina Theme
 Template: Divi
 Version: 2.0.06
 Text-Domain: GreatSandyStraitsMarina
*/

/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Imports
 * =====================================================================================================================
 */

@import 'https://fonts.googleapis.com/css?family=Roboto:400,900';


/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Theme Overrides
 * =====================================================================================================================
 */
@media only screen and (max-width: 980px) {

.et_pb_text_2, 
.et_pb_text_3 {
    border-right: none !important;
}

}

#main-header {
    height: 106px;
    background-color: rgba(255,255,255, 0.8);
    border-bottom: solid 1px #5f98c9;
}

#logo {
    max-height: 85px !important;
    margin-top: 0.8em;
}

#et_top_search {
    display: none;
}

@media only screen and ( max-width:1135px ) {
    #et_mobile_nav_menu { display:block }
    #top-menu-nav { display:none; }
}

@media only screen and (min-width: 1136px) {
    nav#top-menu-nav, #top-menu, nav.fullwidth-menu-nav, .fullwidth-menu {
        position: relative;
        top: 0.8em;
    }
}

.et_header_style_left #et-top-navigation nav > ul > li {
    width: 95px;
}

.et_header_style_left #et-top-navigation nav > ul > li > a, .et_header_style_split #et-top-navigation nav > ul > li > a {
    color: #5f98c9;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.2em !important;
    text-align: center;
    text-transform: uppercase;
}

.et_header_style_left #et-top-navigation nav > ul > li > a:hover, .et_header_style_split #et-top-navigation nav > ul > li > a:hover {
    color: #fff;
    background-color: #5f98c9;
}

.et_header_style_left #et-top-navigation nav > ul > li.menu-item-230 > a:hover, .et_header_style_split #et-top-navigation nav > ul > li.menu-item-230 > a:hover {
    color: #5f98c9;
    background-color: transparent;
}

.et_header_style_left #et-top-navigation nav > ul > li > a, .et_header_style_split #et-top-navigation nav > ul > li > a {
    padding-bottom: 26px;
    padding-top: 40px;
}

ul#top-menu {
    margin-top: -4em;
}

#top-menu li {
    padding-right: 0;
}

.et_header_style_left #et-top-navigation nav > ul > li.current_page_item > a, .et_header_style_split #et-top-navigation nav > ul > li.current_page_item > a {
    color: #fff;
    background-color: #5f98c9;
}

#top-menu-nav .gssm-mttd-menu {
    width: 210px !important;
}

#top-menu-nav .gssm-wwcb-menu {
    width: 200px !important;
}

.gssm-mttd-menu li a {
    word-spacing: normal;
}

.container.et_menu_container {
    /*margin-top: -0.9em;*/
}

.page-id-39 #post-39 {
    margin-top: -13em;
}

#et_mobile_nav_menu .et_mobile_menu li#menu-item-230 {
    display: none;
}

.et_mobile_menu {
    left: -13%;
    width: 126%;
}

.et_mobile_menu li a {
    color: #5f98c9;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 1.3em;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    margin: 1em 0;
    border-bottom: solid 1px;
}




@media only screen and (max-width: 1024px) {
    .page-id-39 #post-39 {
        margin-top: -7em;
    }
}

@media only screen and (max-width: 768px) {
    .page-id-39 #post-39 {
        margin-top: -7em;
    }
}

@media only screen and (max-width: 360px) {
    .page-id-39 #post-39 {
        margin-top: 0;
    }

    #main-header {
        background-color: rgba(255,255,255, 1);
    }
}


.et_pb_slider .et_pb_slide {
    height: 901px;
    background-size: cover;
}

.et-pb-active-slide .et_pb_slide_image, .et-pb-active-slide .et_pb_slide_video {
    animation-name: fadeLeft;
}

ol {
    display: table;
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

ol li {
    display: table-row;
    counter-increment: table-ol;
}
ol li::before {
    content: counter(table-ol) ".";
    display: table-cell;
    padding-right: 0.4em;
    text-align: right;
    padding-bottom: 1em;
}

#main-footer {
    background-color: #fff;
}

#footer-bottom {
    background-color: #fff;
}

#footer-info {
    font-family: Arial, Helvetica, sans-serif;
    color: #5f98c9;
}

.footer-widget {
    border-right: 1px solid rgb(255, 255, 255);
}

.footer-widget:last-of-type {
    border-right: transparent;
}

@media only screen and (max-width: 1024px) {
    .footer-widget {
        border-right: transparent;
    }
}

.footer-widget .textwidget h3 {
    color: #fff;
}

.footer-widget .textwidget p {
    line-height: 1.2em;
}

.btn-center {
    margin: 0 auto;
}


/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Modal
 * =====================================================================================================================
 */

#pum_popup_title_261 {
    font-family: Arial, Helvetica, sans-serif;
    color: #5f98c9;
    font-weight: 600;
}

.pum-theme-255 .pum-content, .pum-theme-default-theme .pum-content {
    font-family: Arial, Helvetica, sans-serif !important;
    color: #5f98c9 !important;
}


/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Meta Slider
 * =====================================================================================================================
 */

#metaslider-id-244 {
     margin-top: 180px !important;
 }
#metaslider-id-244 .slider-wrapper .nivoSlider { position: static; }


/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Fonts
 * =====================================================================================================================
 */

@media only screen and (min-width: 1681px) {
    .metaslider {
        margin-bottom: 21em !important;
    }
    
    .title-home-slider {
        text-align: center;
     	padding-bottom: 2em;
        font-family: Roboto, Arial, Helvetica, sans-serif;
        font-weight: 900;
        color: #fff;
        font-size: 148px;
        text-shadow: 5px 5px 5px rgba(0,0,0, 0.8);
        margin-top: -5em;
        
    }    
}

@media only screen and (max-width: 1680px) {
 
    .title-home-slider {
        text-align: center;
     	padding-bottom: 2em;
        font-family: Roboto, Arial, Helvetica, sans-serif;
        font-weight: 900;
        color: #fff;
        font-size: 148px;
        text-shadow: 5px 5px 5px rgba(0,0,0, 0.8);    
        margin-top: -4em;
           }
  
     .metaslider {
        padding-bottom: 10em;
    }
}

@media only screen and (max-width: 1366px) {
    .title-home-slider {
        margin-top: -35%;
    }

    .metaslider {
        padding-bottom: 4em;
    }
}

@media only screen and (max-width: 1280px) {
    .title-home-slider {
        margin-top: -30%;
    }
    .metaslider {
        padding-bottom: 0;
    }    
}

@media only screen and (max-width: 1024px) {
    .title-home-slider {
        margin-top: -27%;
     	padding-bottom: 0.8em;      
    }
  #metaslider-id-244 { margin-top: 98px !important; }
}

@media only screen and (max-width: 768px) {
    .title-home-slider {
    	margin-top: -30%;
        padding-bottom: 0.5em;
     }
}

@media only screen and (max-width: 480px) {
    .title-home-slider {
        margin-top: -1.8em;
        padding-bottom: 0.5em;
        font-size: 60px;
  }
}

@media only screen and (max-width: 360px) {
      #metaslider-id-244 { margin-top: 0 !important; }
}

.et_pb_fullwidth_header_0.et_pb_fullwidth_header .header-content h1 {
    text-align: center;
    text-transform: uppercase;
}

.gssm-title h1 {
    font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
    font-size: 40px;
    color: #5f98c9 !important;
    text-transform: uppercase;
}

.gssm-tag h2 {
    font-size: 28px;
    color: #5f98c9;
    text-transform: uppercase;
}

.gssm-tag p {
    font-size: 18px;
    font-weight: 600;
    color: #59595b;
    text-transform: uppercase;
    line-height: 1.5em;
    margin-top: -2em;
}

.gssm-rhs {
    margin-top: -2em;
    font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
    font-size: 18px;
    line-height: 2em;
}

.gssm-rules h2 {
    font-size: 28px;
    color: #5f98c9;
    text-transform: uppercase;
    padding-bottom: 2em;
}

.gssm-rules p {
    font-size: 18px;
    font-weight: 400;
    color: #59595b;
}

.gssm-rules li {
    padding-bottom: 1em;
}



.et_pb_team_member_description h4 {
    font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
    font-size: 19px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: solid 1px #fff;
    padding-bottom: 2em;
}

.gssm-person-tl .et_pb_team_member_description h4 {
    padding-bottom: 1em;
}

.et_pb_team_member_description p {
    font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
    font-size: 18px;
}

.page-id-91 .et_pb_team_member_description p:first-of-type {
    margin-top: 21px;
}

.gssm-directory h1 {
    font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
    font-size: 39px;
    font-weight: 600;
    color: #5f98c9;
    text-transform: uppercase;
    text-align: center;
}

.gssm-directory h4 {
    font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
    font-size: 19px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: none !important;
}

.gssm-directory-tl h4 {
    font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
    font-size: 19px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: none !important;
    padding-bottom: 1em !important;
}

.gssm-directory .et_pb_team_member_description p:first-of-type {
    /*margin-top: 1em !important;*/
}

.gssm-directory a, .gssm-directory-tl a {
    color: #fff;
    font-weight: 600;
}

.gssm-enquiry h1 {
    font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
    font-size: 39px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
}

.gssm-enquiry h2 {
    font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #5f98c9;
    text-transform: uppercase;
    margin-bottom: 1em;
}

.social-icons-footer {
    font-size: 2.4em !important;
    color: #fff;
    letter-spacing: 0.3em;
    margin-top: 1em;
}

@media only screen and (max-width: 480px) {
    .blue-tag-text p {
        font-size: 25px;
    }
}


/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Forms
 * =====================================================================================================================
 */

.form-full {
    width: 100%;
    padding-right: 1em;
}

.form-half {
    width: 50%;
    padding-right: 1em;
    float: left;
}

input[type=text], input[type=email], input[type=url], textarea {
    font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
    background-color: #fff !important;
    border: none !important;
    width: 100%;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    font-size: 17px;
    font-weight: 600;
    color: #5f98c9 !important;
    padding: 16px !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 1em;
}
textarea {
    height: 6em;
}
.wpcf7-submit {
    font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
    color: #fff !important;
    margin: 8px auto 0;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 6px 20px;
    line-height: 1.7em;
    background: transparent;
    border: 5px solid;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    width: 50%;
    text-transform: uppercase;
}
.wpcf7-submit:hover {
    background-color: rgba(238,238,238, 0.3);
    border-color: rgba(238,238,238, 0.3);
    padding: 6px 20px !important;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #5f98c9;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #5f98c9;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #5f98c9;
}
:-moz-placeholder { /* Firefox 18- */
    color: #5f98c9;
}



/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Weather bar
 * =====================================================================================================================
 */

#weather-bar-desktop {
    background-color: #5f98c9;
    height: 120px;
    width: 100%;
    position: relative;
    z-index: 999;
    display: block;
}

#weather-bar-desktop p {
    font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
    color: #fff;
    font-weight: normal;
}

#weather-bar-desktop h4 {
    font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
    color: #fff;
    font-weight: 600;
}

.weather-container {
    position: absolute;
    width: 80%;
    max-width: 1080px;
    margin: 0 auto;
    left: 20%;
}

.clear-weather {
    width: 100%;
    max-width: 100%;
}


.current-weather {
    width: 8%;
    float: left;
    margin-top: 0.9em;
    text-align: center;
}

.current-temp {
    margin-top: -1em;
    font-size: 0.9em;
}

.low-tide, .high-tide {
    width: 10%;
    float: left;
    margin-top: 4em;
    text-align: center;
}

.low-tide h4, .high-tide h4 {
    padding-bottom: 0 !important;
}

.broadcast-channels {
    width: 15%;
    float: left;
    margin-top: 2em;
    text-align: center;
    line-height: 1.2em;
}

.day-one-weather, .day-two-weather, .day-three-weather {
    width: 8%;
    float: left;
    margin-top: 0.9em;
    text-align: center;
}

.high-low-temp {
    width: 50%;
    height: 1.4em;
    background-color: #fff;
    text-align: center;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: -0.8em;
}

#weather-bar-desktop .low-temp p {
    width: 50%;
    float: left;
    color: #5f98c9;
}

#weather-bar-desktop .high-temp p {
    width: 50%;
    float: right;
    color: #5f98c9;
}

.upcoming-day {
    text-transform: uppercase;
}

.loc-coordinates {
    width: 15%;
    float: left;
    margin-top: 4em;
    text-align: center;
}

.loc-date-time {
    width: 15%;
    float: left;
    margin-top: 4em;
    text-align: center;
}

.loc-date-time h4 {
    padding-bottom: 0 !important;
}

.close-weather {
    padding-top: 4em;
    position: relative;
    left: 2em;
}

@media only screen and (max-width: 1366px) {
    .weather-container {
        left: 10%;
    }
}

@media only screen and (max-width: 1285px) {
    .broadcast-channels {
        width: 20%;
    }
    
    .loc-coordinates, .loc-date-time {
        width: 18%;
        margin: 0.5em 0 0.5em 0;
    }
}

/*@media only screen and (max-width: 1024px) {
    .day-three-weather {
        display: none;
    }

    .loc-coordinates {
        margin: 4em 0 0 0;
    }

    .loc-date-time {
        display: none;
    }
}*/

@media only screen and (max-width: 1024px) {
    #weather-bar-desktop {
        display: none;
    }
}


/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Weather bar - mobile
 * =====================================================================================================================
 */

@media only screen and (min-width: 1025px) {
    .weather-bar-mobile{
        display: none;
    }
}

@media only screen and (max-width: 1024px) {

    .weather-bar-mobile {
        clear: both;
        background-color: #5f98c9;
        height: 200px;
        margin-left: -41px;
        width: calc( 100% + 82px);
        position: relative; 
        z-index: 999;
        display: block;
    }
 

    .mob-loc-date-time {
        width: 38%;
        float: left;
        margin-top: 3em;
        text-align: center;
        color: #fff;
    }

    .mob-loc-date-time h4 {
        padding-bottom: 0 !important;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
    }

    .mob-loc-date-time p {
        padding-bottom: 0 !important;
        font-size: 0.8em;
    }

    .mob-current-weather {
        width: 23%;
        float: left;
        margin-top: 1.4em;
        font-size: 0.9em;
        text-align: center;
    }

    .mob-current-weather h4 {
        color: #fff;
        font-size: 14px;
        font-weight: 600;
    }

    .mob-current-temp {
        margin-top: -1em;
        color: #fff;
    }

    .mob-low-tide, .mob-high-tide {
        width: 18%;
        float: left;
        margin-top: 3em;
        text-align: center;
    }

    .mob-low-tide h4, .mob-high-tide h4 {
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        padding-bottom: 0 !important;
    }

    .mob-low-tide p, .mob-high-tide p {
        color: #fff;
        font-size: 0.9em;
    }

    .mob-loc-coordinates {
        width: 40%;
        float: left;
        margin-top: 3em;
        text-align: center;
        color: #fff;
        font-size: 0.9em;
        line-height: 1.3em;
    }

    .mob-broadcast-channels {
        width: 23%;
        float: left;
        margin-top: 2em;
        text-align: center;
        line-height: 1.2em;
    }

    .mob-broadcast-channels h4 {
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        padding-bottom: 0.2em;
    }

    .mob-broadcast-channels p {
        font-size: 0.7em;
        color: #fff;
        line-height: 1.2em;
    }

    .mob-day-one-weather, .mob-day-two-weather, .mob-day-three-weather {
        width: 18%;
        float: left;
        margin-top: 0em;
        text-align: center;
    }

    .mob-high-low-temp {
        width: 50%;
        height: 1.4em;
        background-color: #fff;
        text-align: center;
        margin-left: 25%;
        margin-right: 25%;
        margin-top: -0.8em;
    }

    .mob-low-temp p {
        width: 50%;
        float: left;
        color: #5f98c9;
    }

    .mob-high-temp p {
        width: 50%;
        float: right;
        color: #5f98c9;
    }

    p.mob-upcoming-day {
        font-size: 0.9em;
        text-transform: uppercase;
        color: #fff;
    }

}