/*!
Theme Name: cocosportfishing
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cocosportfishing
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

cocosportfishing is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


/* RESET STYLES */
*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
    border: 0;
    color: #2C3A47;
	font-size: inherit;
	font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
html, body {
    font-family: 'Merriweather', serif;
    line-height: 1.8;
    width: 100%; 
    z-index: -1500;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
h1, h2, h3, h4, h5 {
    font-family: 'Merriweather Sans', sans-serif;
    margin-top: 0;
    font-weight: 700;
}
h1 {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    font-size: 36px;
    text-align: center;
    text-transform: uppercase;
    line-height: 45px;
}
a {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}
a:hover {
    text-decoration: none;
    color: #fff;
}
a:focus {
    outline: none
}
button {
    cursor: pointer; 
    border: none; 
    background: none;
	-webkit-border-radius: 0; 
	-moz-border-radius: 0; 
	border-radius: 0; 
	-webkit-box-shadow: none; 
	-moz-box-shadow: none; 
	box-shadow: none;
}
button:focus {
    outline: none
}
img {
    max-width: 100%;
    height: auto
}
.cf:before, .cf:after {
    content: '';
    display: table;
}
.cf:after {
    clear: both;
}
@media screen and (max-width: 1024px) {
    body {
        font-size: 80%;
    }
}
@media only screen and (max-width: 480px) {
    h1 {
        font-size: 24px;
        line-height: 30px;
    }
}
/* RESET */

.flex-container-sb, .flex-container-sa {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.flex-container-sb {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.flex-container-sa {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.inner2 {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  padding: 0 20px;
}

.inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.alignright{
    width: 100%;
    margin-bottom: 1rem;
}

  

@media screen and (min-width: 1200px) {
    .alignright{
        float: right;
        max-width: 500px;
        margin-left: 1rem;
    }
  .inner {
    padding-left: 6.5rem;
    padding-right: 6.5rem;
  }
  .inner2 {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding: 0;
  }
}

body.home #main-nav{
    background: rgba(44, 58, 71,0);
}

/* MENU */
#main-nav {
    padding: 0;
    background: rgba(44, 58, 71,0.6);
    padding-left: 80px;
    height: 75px;
    line-height: 75px;
}
#main-nav.open {
    background: rgba(44, 58, 71,0.9) !important;
    transition-duration: 2s;
} 
body.home #main-nav.color, #main-nav.color{
    background-color: rgba(44, 58, 71,0.6);
    transition-duration: 1s;
}
.navToggle {
    position: fixed;
    top: 0;
    left: 0;
    margin-right: 15px;
    width: 75px;
    height: 75px;
    transition-duration: 0.5s;
    background: #EAB543;
    cursor: pointer;
    z-index: 3000;
}
.navToggle .icon, .navToggle .icon:before, .navToggle .icon:after{
    transition-duration: 0.25s;
    position: absolute;
    width: 20px;
    height: 3px;
    background-color: #2C3A47;
}
.navToggle .icon{
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%)
}
.navToggle .icon:before, .navToggle .icon:after {
    content: "";
}
.navToggle .icon:before {
    top: -7px;
    left: 0;
}
.navToggle .icon:after {
    top: 7px;
    left: 0;
}
.navToggle.open {
    animation-name: small;
    animation-duration: 2s;
}
@keyframes small{
    0% { width: 75px; }
    50% { width: 0px; }
    100% { width: 75px; }
}
.navToggle.open .icon {
    transition-duration: 0.5s;
    background-color: transparent;
}
.navToggle.open .icon:before, .navToggle.open .icon:after {
    transition-duration: 0.5s;
    top: 0;
}
.navToggle.open .icon:before {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.navToggle.open .icon:after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
#sideNav {
    position: relative;
    left: -900px;
}
#sideNav.navSlide {
    transition-duration: 1.5s;
    left: 0;
}

.navbar-expand-lg .navbar-nav .nav-link, .navbar-expand-lg .navbar-nav a  {
    font-family: 'Merriweather Sans', sans-serif;
    color: #fff;
    padding-right: 1rem;
    padding-left: 1rem;
    text-transform: uppercase;
}
.search i {
    vertical-align: -webkit-baseline-middle;
    color: #fff;
}
.navbar-expand-lg .navbar-nav .nav-link:hover, .search i:hover, .navbar-expand-lg .navbar-nav a:hover {
    color: #EAB543;
}
.navbar-expand-lg .navbar-nav li{
    position: relative;
}
.navbar-expand-lg .navbar-nav li .sub-menu{
    display:none;
    position: absolute;
    width: 300px;
    background-color: rgba(44, 58, 71,0.9);
}
.navbar-expand-lg .navbar-nav li .sub-menu li{
    line-height: 32px;
    display: block;
}
.navbar-expand-lg .navbar-nav li .sub-menu a{
    font-size: 13px;
    display: block;
    text-transform: capitalize;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
#logo {
    position: fixed;
    right: 10%;
    top: 8px;
    z-index: 3000;
    max-width: 230px;
}
@media only screen and (max-width: 1024px) {
    #logo {
        right: 0;
    }
    #logo img {
        max-width: 50%;
    }
}
@media only screen and (max-width: 990px) {
    #main-nav {
        /*height: 100%;*/
        line-height: 60px;
        padding: 0;
    }
    #main-nav.open {
        height: 100%;
    }
    .menu-wrap {
        width: 100%;
        text-align: center;
    }
    .navbar-expand-lg .navbar-nav li .sub-menu{
        position: relative;
        width: 100%;
    }
}
@media only screen and (max-width: 480px) {
    #logo {
        right: -12%;
    }
    #logo img {
        max-width: 60%;
    }
    .navToggle {
        width: 60px;
        height: 60px;
    }
}
/* MENU */

main {
    background: #fff;
    margin-bottom: 0;
}
body.home main{
    
    margin-bottom: 600px;

  
}

@media only screen and (max-width: 768px) {
    main, body.home main{
        margin-bottom: 20px;
    }
   
}
.main {
    padding-top: 6rem;
}
body.page .main {
    padding-top: 0;
}
.page-slider{
    position:relative;
    
}
.page-slider .slider-item{background-size:cover;background-position:center;background-repeat:no-repeat;height:40vh;width:100%}.page-slider .slider-item .caption{color:#fff;position:absolute;bottom:.5rem;left:0;padding:.5rem;background-color:rgba(0,0,0,.8);right:0;font-size:1.5rem;text-align:center}.page-slider .slick-arrow{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:1.5rem;z-index:2;background-color:rgba(0,0,0,.4);color:#fff;padding:1rem;cursor:pointer}.page-slider .arrow-left{left:0}.page-slider .arrow-right{right:0}@media screen and (min-width:768px){.page-slider .slider-item{height:70vh;background-size:cover}.page-slider .slick-arrow{font-size:3rem;padding:1.5rem 1rem}}


/* SLIDER */
.carousel-item {
    width: 100%;
    height: 100vh;
    background-position: center 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
.carousel-caption {
    bottom: 60%;
    opacity: 0;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-duration: 2s;
    animation-fill-mode: forwards; 

    animation-name: fadein; 
}
@keyframes fadein {
    0% {
        bottom: 60%;
        opacity: 0;
    }
    100% {
        bottom: 40%;
        opacity: 1;
    }
}
.carousel-caption h3{
    color: #EAB543;
    font-size: 60px;
}
@media only screen and (max-width: 760px) {
    .carousel-caption {
        display: block !important;
        bottom: 50%;
    }
    .carousel-caption h3 {
        font-size: 25px;
        line-height: 30px;
    }
}
/* SLIDER */

/* ABOUT */
.about {
    border-top: 8px solid #2C3A47;
    background-color: #CAD3C8;
    padding-bottom: 40px;
}
#boat01 {
    background-image:  url(./img/boat.jpg);
}
#boat02 {
    background-image:  url(./img/boat02.jpg);
}
#boat03 {
    background-image:  url(./img/boat03.jpg);
}
.about .card {
    background: none;
    border: 0;
}

.about .card:hover .card-img-top:after{
    background-color: rgba(0,0,0,0);
}
.about .card-img-top {
    width: 100%;
    height: 500px;
    background-position: center 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    position: relative;
}

.about .card-img-top:after{
    content: '';
    background-color: rgba(0,0,0,.25);
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;

}
.about .card-body {
    text-align: center;
}
.about .card-title {
    font-size: 1.3rem;
    text-transform: uppercase;
}
.about .card-text, .about .card-body p  {
    padding-bottom: 20px;
}
.about .card .btn {
    border-radius: 0;
    background: #EAB543;
    color: #2C3A47;
}
.about .card .btn:hover {
    background: #2C3A47;
    color: #EAB543;
}
/* ABOUT */

/* WAVES */
.waves {
    position: relative;
    top: -5px;
    width: 100%;
    height: 6px;
    background-image: url(./img/wave.png);
    background-repeat: repeat-x;
    background-position: 50% 0;
    background-size: initial;
}

/* FISHES */
.bx-wrapper{
    margin: 0 auto;
    box-shadow: none;
    border: 0;
}
.bx-viewport {
    height: 250px !important;
}
.bx-wrapper .bx-caption {
    bottom: -60px;
    background: none;
    text-align: center; 
    font-size: 20px;
    font-weight: 700;
}
.bx-wrapper .bx-caption span {
    color: #2C3A47;
}
.fishes {
    padding-bottom: 40px;
}
.fish{
    background: #F8EFBA;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 50%;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}
.fish:hover {
    background: #EAB543;
}
.fish img{
    max-width: 260px;
    max-height: 160px;
    margin: 0 -35px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}
.fish:hover img {
    transform: scale(1.05, 1.05);
    top: 0;
}
/* FISHES */

/* REPORTS */
.reports {
    padding-bottom: 80px;
}
.reports .card {
    max-width: 100%;
    border-radius: 0;
    -webkit-box-shadow: 0px 0px 25px 0px rgba(202,211,200,0.5);
    -moz-box-shadow: 0px 0px 25px 0px rgba(202,211,200,0.5);
    box-shadow: 0px 0px 25px 0px rgba(202,211,200,0.5);
}
.reports .card:hover {
    -webkit-box-shadow: 0px 0px 25px 0px rgba(202,211,200,1);
    -moz-box-shadow: 0px 0px 25px 0px rgba(202,211,200,1);
    box-shadow: 0px 0px 25px 0px rgba(202,211,200,1)
}
.reports .card-header{
    width: 100%;
    height: 140px;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
@media only screen and (max-width: 480px) {
    .card-deck {
        padding-left: 15px;
        padding-right: 15px;
    }
}
/* REPORTS */

/* FOOTER */
body.home .footer{
    
    position: fixed;

  
}
body.home .footer{
    
     z-index: -30;

  
}

.footer {
    position: relative;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 0
}
.footer-top {
    padding: 40px 0;
    background: #2C3A47;
}
.footer-top h4{
    color: #a1a0a0;
    font-size: 16px;
    padding-bottom: 5px;
}
.footer-top p, .footer-top span, .footer-top strong, .footer-top legend {
    color: #a1a0a0;
    font-size: 12px;
}
.footer-top i {
    color: #a1a0a0;
    padding-right: 10px;
}
.footer-top span {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid rgba(202, 211, 200,0.2);
}
.footer-top span:last-child {
    border-bottom: 0;
}
.footer-top .card {
    background: none;
    border-color: rgba(202, 211, 200,0.2);
    border-radius: 0;
}
.footer-top .card-header {
    background: rgba(202, 211, 200,0.2);
    border-radius: 0;
}
.footer-top .card-header button {
    color: #a1a0a0;
    font-size: 16px;
}
.footer-top .card-body {
    color: #a1a0a0;
    font-size: 14px;
}
.questions-form, .wpcf7-form{
    border: 1px solid rgba(202, 211, 200,0.2);
    padding: 15px;
}
.questions-form, .wpcf7-form span{
    padding: 0;
}
.questions-form input[type="text"],
.questions-form input[type="email"],
.questions-form input[type="submit"],
.questions-form textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="submit"],
.wpcf7-form textarea {
    width: 100%;
    background: none;
    margin-top: 15px;
    padding: 5px;
    border: 1px solid rgba(202, 211, 200,0.2);
    color: #a1a0a0;
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 14px;
    cursor: pointer;
}
.send-grp {
    margin-top: 15px;
}
.questions-form input[type="submit"]:hover, .wpcf7-form input[type="submit"]:hover {
    background: rgba(202, 211, 200,0.2);
    color: #1b232b
}
.questions-form textarea, .wpcf7-form textarea{
    resize: none;
    height: 90px;
}
.wpcf7-response-output{
    color:white;
}
.footer-bottom {
    padding: 10px 0;
    background: #1b232b;
}
.footer-bottom p, .footer-bottom a, .footer-bottom span  {
    color: #a1a0a0;
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 12px;
}
.footer-logo p {
    display: inline-block;
}
.footer-logo img {
    width: 15%;
    height: auto;
    vertical-align: middle;
}
@media only screen and (max-width: 768px) {
    .footer {
        position: relative;
    }
}
@media only screen and (max-width: 460px) {
    .footer-logo{
        text-align: center!important;
    }
}
/* FOOTER */
article.page .entry-content{
    padding-bottom: 4rem;
}
.tour-container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.tour-featured-img {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 60vh;
  position: relative;
}
.tour-featured-img::after{
    content: '';
    position: absolute;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.25);
}
.tour-title {
  text-align: center;
  margin-bottom: 0;
}

.tour-info {
  width: 100%;
}
.tour-info p{
  margin-bottom: 1rem;
}

.tour-sidebar {
  width: 100%;
  text-align: center;
}

@media screen and (min-width: 900px) {
  .tour-info {
    width: 60%;
  }
  .tour-sidebar {
    width: 30%;
  }
}


/* woocommerce */

.woocommerce .woocommerce-breadcrumb, .product_meta{
    display: none;
}
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary{
    float:none;
    width: 100%;
}

.woocommerce div.product div.images{
    margin-bottom: 0;
}

.woocommerce div.product p.price, .woocommerce div.product span.price{
    color: #2C3A47;
    font-size: 2rem;
    font-weight: 900;
}

.woocommerce #respond input#submit.alt.disabled, .woocommerce #respond input#submit.alt.disabled:hover, .woocommerce #respond input#submit.alt:disabled, .woocommerce #respond input#submit.alt:disabled:hover, .woocommerce #respond input#submit.alt:disabled[disabled], .woocommerce #respond input#submit.alt:disabled[disabled]:hover, .woocommerce a.button.alt.disabled, .woocommerce a.button.alt.disabled:hover, .woocommerce a.button.alt:disabled, .woocommerce a.button.alt:disabled:hover, .woocommerce a.button.alt:disabled[disabled], .woocommerce a.button.alt:disabled[disabled]:hover, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled:hover, .woocommerce button.button.alt:disabled[disabled], .woocommerce button.button.alt:disabled[disabled]:hover, .woocommerce input.button.alt.disabled, .woocommerce input.button.alt.disabled:hover, .woocommerce input.button.alt:disabled, .woocommerce input.button.alt:disabled:hover, .woocommerce input.button.alt:disabled[disabled], .woocommerce input.button.alt:disabled[disabled]:hover,
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt{
    background-color: #2C3A47;
}
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover{
    background-color: #EAB543;
}
.wc-bookings-date-picker .ui-datepicker td.bookable a{
    background-color: #EAB543 !important;
}
.wc-bookings-date-picker .ui-datepicker td.ui-datepicker-current-day a{
    background-color: #2C3A47 !important;
}
.wc-bookings-date-picker .ui-datepicker td.fully_booked a, .wc-bookings-date-picker .ui-datepicker td.fully_booked span{
    background-color: rgba(0, 0, 0, 0.8) !important;
}
.select2-container--default .select2-selection--single{
    border-radius: 0;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2{
    max-width: 100%;
}
.form-row{
    display: block;
}
/** blog **/

.blog-container {
  background-color: white;
}

.blog-container a:hover {
  text-decoration: underline;
}

.blog-container h1, .blog-container h2 {
  font-size: 32px;
  text-align: left;
  margin-bottom: 1rem;
}

.blog-info, .blog-sidebar {
  width: 100%;
  padding: 2rem 1rem;
}

.blog-info ul, .blog-sidebar ul {
  margin-left: 35px;
}

.blog-info .widget-area .widget, .blog-sidebar .widget-area .widget {
  margin-bottom: 2rem;
}

.blog-info .widget-area .widget-title, .blog-sidebar .widget-area .widget-title {
  margin-bottom: 0;
  font-size: 26px;
  text-align: left;
}

.blog-info .widget-area .widget_search .screen-reader-text,
.blog-info .widget-area .widget_search .search-submit, .blog-sidebar .widget-area .widget_search .screen-reader-text,
.blog-sidebar .widget-area .widget_search .search-submit {
  display: none;
}

.blog-info .post, .blog-sidebar .post {
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.blog-info .entry-header, .blog-sidebar .entry-header {
  position: relative;
}

.blog-info .entry-meta, .blog-sidebar .entry-meta {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #EAB543;
  color: white;
  padding: 0 .5rem;
}

.blog-info .entry-meta a, .blog-sidebar .entry-meta a {
  color: white;
}

.blog-info .entry-content, .blog-sidebar .entry-content {
  margin-top: .5rem;
}

.blog-sidebar {
  padding-top: 0;
}

.blog-banner {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 30vh;
  position: relative;
  margin: 0;
}

.blog-banner a {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.search .search-submit {
  margin-top: 1rem;
}

@media screen and (min-width: 768px) {
  .blog-info {
    width: 68%;
    padding: 2rem 4rem 2rem 4rem;
  }
  .blog-sidebar {
    width: 30%;
    border-left: 1px solid #ddd;
    padding: 2rem;
  }
}

.contact-button{
    border-radius: 0;
    background: #EAB543;
    color: #2C3A47;
}
.contact-button:hover{
    background: #2C3A47;
    color: #EAB543;
}