/* Theme Name: Shapely Child - North King Lodge Theme URL: http://chemeleoncreative.com Description: The North King Lodge theme running as a Shapely child theme by Chameleon Creative Author: Chad @ Chameleon Creative Author URL: http://chemeleoncreative.com Template: shapely Version: 1.0.0 Text Domain: shapely-child */ /* Roboto:300,400,700 font-family: 'Roboto', sans-serif; */ @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700'); /*############################################################################################################################################################################################################## # # MISC # ################################################################################################################################################################################################################*/ html, body { height: 100%; margin:0px; padding:0px; font: 300 24px/normal 'Roboto', Arial, Helvetica, sans-serif; background:#fff; color:#4a4a4a; text-align:center;} @media all and (max-width: 767px) { p.lead { font-size: 18px; line-height: 24px; } p { font-size: 19px; } } .wpcf7-form div.wpcf7-validation-errors { background: #C00; color: #FFF; border: 1px solid #000; font-weight: bold; text-align:center;} div.wpcf7-response-output { padding: 1.5em; } .clear { clear: both; margin: 0; padding: 0; } .cta, a.wp-block-button__link { text-decoration:none; margin: 20px 0px 20px 0px; display:inline-block; text-decoration:none; background-color:#fff; padding:5px 40px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; color:#8b6b38; width:auto; font-size: 23px; line-height:normal; border:1px solid #8b6b38; text-transform:uppercase; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;} .cta:hover, a.wp-block-button__link:hover { background-color:#8b6b38; color:#fff; text-decoration:none;} body #primary p { color: #525252; line-height: 1.5em; /*line-height: 2.3em;*/ } .content-area h2, .content-area h3, .content-area h4, .content-area h5 { color: /*#8b6b38;*/ #745728} .content-area h2 { margin-top: 40px;} @media all and (max-width: 767px) { .content-area h2 { font-size: 35px; } .content-area h3 { font-size: 30px; } .content-area h4 { font-size: 30px; } .content-area h5 { font-size: 30px; } } body.home .header-callout { display:none;} section, footer { padding: 0px; } .right { text-align:right;} .left { text-align:left;} .no-float { float: none; margin-left: auto; margin-right: auto;} .no-pad { padding-left:0px; padding-right:0px;} p:empty { display: none; } /*############################################################################################################################################################################################################## # # CONTENT AREAS # ################################################################################################################################################################################################################*/ #primary { background:url(images/watermark.jpg) no-repeat left top;} #primary p { color: #525252; line-height:2.3em;} @media (min-width : 320px) { /* yellow */ #primary .padding { padding: 40px 20px;} } @media (min-width : 768px) { /* red */ #primary .padding { padding: 100px 150px;} } body.has-sidebar-right #primary .padding { padding: 0px 60px;} body.has-sidebar-right #primary, body.has-sidebar-right #secondary { padding-top:40px; text-align:left;} body.has-sidebar-right #primary .row { padding-right:40px; padding-left:40px;} body.has-sidebar-right #secondary .row { padding-right:20px; padding-left:20px;} /* center aligning page title for full width pages */ body.page-template-full-width #primary .row { padding: 100px 150px; text-align:center;} body.page-template-full-width #primary { text-align:center;} /* left aligning page title for two column pages body.has-sidebar-right .carousel-caption h2, body.has-sidebar-right .carousel-caption h2 { margin-left:40px;} body.has-sidebar-right .carousel-caption, body.has-sidebar-right .carousel-caption h2 { text-align:left;}*/ /* center aligning page title for full width pages */ body.page-template-full-width .carousel-caption h2, body.page-template-full-width .carousel-caption h2 { margin-left:0px;} body.page-template-full-width .carousel-caption, body.page-template-full-width .carousel-caption h2 { text-align:center;} /*############################################################################################################################################################################################################## # # FISHING REPORTS # ################################################################################################################################################################################################################*/ article.category-fishing-reports header { display:none;} /* hiding repeated title and blog poster */ article.category-fishing-reports h2.post-title {} article.category-fishing-reports div.entry-meta { /*display:none;*/} #comments { display:none;} article.post-grid-wide .entry-content p::first-line { font-weight:bold;} body.single article.post-grid-wide .entry-content p::first-line { font-weight: inherit;} #primary article .btn-filled { background: #fff !important; border: 1px solid #8b6b38 !important; color:#8b6b38;} #primary article .btn-filled:hover { color:#fff; border-width: 1px; background-color: #8b6b38 !important; } /*############################################################################################################################################################################################################## # # CAROUSEL # ################################################################################################################################################################################################################*/ #myCarousel { z-index:5000;} #myCarousel { padding:0px !important; overflow:hidden !important; background: transparent; position:relative; background: #333;} #myCarousel img.img-responsive { max-width:none; width:100%; height:} a.left:focus, a.right:focus, a.left, a.right { outline: 0;} .carousel-fade { overflow:hidden;} #carousel-wrapper { text-align:center;} #carousel-wrapper .img-responsive { float:none; margin: 0px auto; max-width:none; width:100%;} .carousel-control.left, .carousel-control.right { background-image: none !important; filter: none !important; } /* CROSSFADE */ .carousel-fade .carousel-inner .item { -webkit-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0; } .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-control { z-index: 2; } /* CAPTION */ .carousel-caption { bottom: -12px; padding-top: 0px; padding-bottom: 0px; text-shadow: 0 1px 2px rgba(0,0,0,.6); } .carousel-caption h2 { text-transform:uppercase; font-size: 75px; line-height:75px; text-shadow: 0 1px 2px rgba(0,0,0,.6); margin:0px; padding:0px; font-weight:700; } @media (min-width : 320px) { /* yellow */ .carousel-caption { bottom: 0px;} .carousel-caption h2 { font-size: 25px; line-height:25px} } @media (min-width : 480px) { /* orange */ .carousel-caption { bottom: 0px;} .carousel-caption h2 { font-size: 35px; line-height:35px} } @media (min-width : 768px) { /* red */ } @media (min-width : 992px) { /* purple */ .carousel-caption { bottom: -8px;} .carousel-caption h2 { font-size: 55px; line-height:55px} } @media (min-width : 1200px) { /* blue */ .carousel-caption { bottom: -10px;} .carousel-caption h2 { font-size: 75px; line-height:75px} } .carousel-caption { right: 1%; left: 1%; } /*############################################################################################################################################################################################################## # # HOME PAGE LOGO # ################################################################################################################################################################################################################*/ @media (min-width : 320px) and (max-width: 992px) { /* MOBILE ONLY */ #logo-wrapper { display:block; text-align:center; background:#8b6b38;} #logo-wrapper img.img-responsive { float:none; margin: 0px auto 0px auto; padding-top:10px; text-align:center; } } @media (min-width : 992px) { /* purple */ #logo { position: absolute; top: 130px; left: 40px; z-index:9000;} } /*############################################################################################################################################################################################################## # # INTERIOR PAGES LOGO # ################################################################################################################################################################################################################*/ @media (min-width : 320px) and (max-width: 992px) { /* MOBILE ONLY */ #interior-logo-wrapper { display:block; text-align:center;} #interior-logo-wrapper img.img-responsive { float:none; margin: 0px auto 0px auto; padding-top:10px; text-align:center; } } @media (min-width : 992px) { /* purple */ #interior-logo-wrapper { text-align:center;} #interior-logo-wrapper img.img-responsive {float:none; margin: 0px auto 0px auto; padding: 5px 0px 0px 5px; text-align:center;} #interior-logo-wrapper img a { height:auto !important} } /*############################################################################################################################################################################################################## # # HEADER BOOK ICON # ################################################################################################################################################################################################################*/ .book { height:auto;} .book a { margin-top:2px; padding: 3px 10px; height:auto !important; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; color:#fff; text-decoration:none; margin: 0px; display:inline-block; text-decoration:none; background-color:#fff; color:#8b6b38; border:2px solid #8b6b38; font-size: 22px; font-weight: 400; line-height:22px; text-transform:uppercase;} .book a:hover { background-color:#8b6b38; color:#fff;} @media (min-width : 992px) { /* purple */ .book { display: inline-block; margin-top: 13px; } } @media (min-width : 1200px) { /* blue */ .book { margin-top: 19px; } } /*############################################################################################################################################################################################################## # # HEADER CONTACT # ################################################################################################################################################################################################################*/ .phone { color:#c0c0c0; font-size:22px; line-height:22px; display: inline-block; margin: 0px 10px 0px 0px;} @media (min-width : 992px) { /* purple */ header .phone { display:none;} } @media (min-width : 1200px) { /* blue */ header .phone { display: inline-block;} } /*############################################################################################################################################################################################################## # # MOBILE MENU TOGGLE # ################################################################################################################################################################################################################*/ .mobile-toggle .fa-bars { background: #8b6b38; color:#fff !important; display:inline-block; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; height:auto; margin:0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; line-height: 14px !important; padding:15px;} .mobile-toggle .fa-bars:hover { color:#000 !important;} /*############################################################################################################################################################################################################## # # MENU # ################################################################################################################################################################################################################*/ @media (min-width : 992px) { /* purple */ #site-navigation { border:none;} nav.fixed { border-bottom: 1px solid #8b6b38 !important;} .nav-container { min-height: 10px;} .nav-bar, #menu, .main-navigation .menu > li { margin: 0px; padding:0px; height:auto; line-height:normal;} .main-navigation { padding: 0px; } .main-navigation .menu li a { font-size: 18px; line-height:18px; font-weight: 300; color: #8b6b38; padding: 20px 9px 20px 9px; height:auto; } .main-navigation .menu li a:hover, .main-navigation .menu li.current-menu-item a { background-color: #8b6b38; color:#fff !important; text-decoration:none; } } @media (min-width : 1100px) { .main-navigation .menu li a { padding: 22px 18px 22px 18px; } } @media (min-width : 1200px) { /* blue */ .main-navigation .menu li a { font-size: 20px; line-height:20px; padding: 25px 6px 25px 6px;} } @media (min-width : 1300px) { .main-navigation .menu li a { padding: 25px 12px 25px 12px; } } @media (min-width : 1400px) { /* PINK */ .main-navigation .menu li a { padding: 25px 20px 25px 20px; } } /* INTERIOR PAGES MENU CHANGES */ @media (min-width : 992px) { /* purple */ .navbar-collapse { padding:0px;} .main-navigation #interior-nav-bar .menu li a { font-size: 15px; padding: 22px 6px 22px 6 px; } } @media (min-width : 1100px) { .main-navigation #interior-nav-bar .menu li a { padding: 22px 12px 22px 12px; } } @media (min-width : 1200px) { /* blue */ .main-navigation #interior-nav-bar .menu li a { font-size: 16px; padding: 24px 5px 24px 5px; } } @media (min-width : 1400px) { /* PINK */ .main-navigation #interior-nav-bar .menu li a { font-size: 18px; padding: 24px 7px 24px 7px; } } @media (min-width : 1500px) { /* CYAN */ .main-navigation #interior-nav-bar .menu li a { padding: 24px 12px 24px 12px; } } @media (min-width : 1600px) { /* BROWN */ .main-navigation #interior-nav-bar .menu li a { padding: 24px 16px 24px 16Px; } } @media (min-width : 1700px) { /* GREEN */ .main-navigation #interior-nav-bar .menu li a { padding: 28px 20px 28px 20px; } } /*############################################################################################################################################################################################################## # # MENU DROPDOWN # ################################################################################################################################################################################################################*/ @media (min-width : 992px) { /* purple */ .main-navigation .menu > li ul { z-index: 9500;} /* HIDE CARET */ .dropdown:after, .dropdown-toggle { display:none;} .main-navigation .menu > li ul { background: #fff; border: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;} .main-navigation .menu > li ul a { } .main-navigation .menu > li ul a:hover, .main-navigation .menu > li ul li.current-menu-item a {} .main-navigation .menu > li > ul li a { font-size: 18px; line-height:18px; font-weight: 300; color: #8b6b38; padding: 10px 10px 10px 10px !important; height:auto; } .main-navigation .menu > li > ul li a:hover, .main-navigation .menu > li > ul li.current-menu-item a {background-color: #8b6b38; color:#fff !important; text-decoration:none; } } /*############################################################################################################################################################################################################## # # MOBILE MENU # ################################################################################################################################################################################################################*/ @media (min-width : 320px) and (max-width: 992px) { /* MOBILE ONLY */ .main-navigation .menu li { text-align:center; } .main-navigation .menu li a { font-size: 26px; font-weight: 300; color: #8b6b38; text-align:center; } .main-navigation .menu > li > ul li a { font-size:20px; } .main-navigation .menu a { padding: 10px 0; } .shapely-dropdown { position: absolute; right: 0px; top: 8px; } } /*############################################################################################################################################################################################################## # # HOME PAGE INTRO # ################################################################################################################################################################################################################*/ #index-intro { background:url(images/watermark.jpg) no-repeat left top;} #index-intro h1 { color:#13467f; text-transform:uppercase;} #index-intro p { color: #525252; line-height:2.3em;} @media (min-width : 320px) { /* yellow */ #index-intro .padding { padding: 40px 20px;} } @media (min-width : 768px) { /* red */ #index-intro .padding { padding: 100px 150px;} } /*############################################################################################################################################################################################################## # # HOME PAGE CALLS TO ACTION # ################################################################################################################################################################################################################*/ #index-ctas div { background-position: center center; background-repeat: no-repeat; background-size: cover /* contain*/; background-color:#666666;} #index-ctas { text-align:center;} #index-ctas a { text-shadow: 0px 0px 6px #000000; margin: 320px auto 40px auto; padding: 8px 20px; height:auto !important; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; text-decoration:none; display:inline-block; text-decoration:none; background-color: rgba(0, 0, 0, 0.4); color:#fff; border: 1px solid #fff; font-size: 22px; font-weight:700; line-height:22px; text-transform:uppercase;} #index-ctas a:hover { background-color:#8b6b38; border-color:#8b6b38;} /*############################################################################################################################################################################################################## # # HOME PAGE OUTRO # ################################################################################################################################################################################################################*/ #index-outro { background:url(images/watermark-two.jpg) no-repeat right top;} #index-outro h2 { color:#13467f; text-transform:uppercase;} #index-outro p { color: #525252; line-height:2.3em;} #index-outro a { margin: 40px auto 40px auto; padding: 8px 20px; height:auto !important; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; text-decoration:none; display:inline-block; text-decoration:none; background-color: #fff; color:#8b6b38; border: 1px solid #8b6b38; font-size: 22px; font-weight:700; line-height:22px; text-transform:uppercase;} #index-outro a:hover { text-shadow: 0px 0px 6px #000000; background-color:#8b6b38; border-color:#8b6b38; color:#fff} @media (min-width : 320px) { /* yellow */ #index-outro .padding { padding: 40px 20px;} } @media (min-width : 768px) { /* red */ #index-outro .padding { padding: 100px 150px;} } /*############################################################################################################################################################################################################## # # COUNTDOWN TIMER # ################################################################################################################################################################################################################*/ #wpdevart_countdown-2 { margin-top:-50px; margin-bottom:50px;} .wpdevart_countdown h2.widget-title { color: #666666; font-size:36px; font-weight:300;} #main_countedown_widget_2 .time_left { border-radius: 8px; background-color: rgba(0, 0, 0, 0.1) !important; font-size: 40px !important; font-family: 'Roboto', Arial, Helvetica, sans-serif !important; color: #8b6b38 !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; /*text-shadow: 0 1px 2px rgba(0,0,0,.6);*/ display:inline-block; } .time_left { padding: 20px 30px !important; } #main_countedown_widget_2 .time_description { font-size: 18px; font-family: 'Roboto', Arial, Helvetica, sans-serif !important; color: #666666 !important; font-weight:300; text-transform:uppercase; } /*############################################################################################################################################################################################################## # # ARCHIVED FISHING REPORTS # ################################################################################################################################################################################################################*/ #post-324 ul, #post-324 ul li { list-style:none; list-style-type:none; list-style-image:none; margin-left:0px; margin-right:0px; padding-left:0px; padding-right:0px;} /*############################################################################################################################################################################################################## # # FOOTER SUBSCRIBE BAR # ################################################################################################################################################################################################################*/ #footer-subscribe { background-color:#8b6b38; padding-top: 25px; padding-bottom: 25px; text-align:center;} #footer-subscribe h2 { font-size:18px; line-height: normal; font-weight:400; color:#fff; margin:0px; padding:0px; text-align:center;} /*############################################################################################################################################################################################################## # # FOOTER CALL TO ACTION BAR # ################################################################################################################################################################################################################*/ #footer-cta { background-color:#8b6b38; padding-top: 25px; padding-bottom: 25px; text-align:center;} #footer-cta h2 { font-size: 35px; line-height: normal; font-weight:700; color:#fff; margin:0px; padding:0px; text-align:right;} #footer-cta a { margin: 0px auto 0px auto; padding: 8px 20px; height:auto !important; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; text-decoration:none; display:inline-block; text-decoration:none; color:#fff; border: 1px solid #fff; font-size: 22px; font-weight:700; line-height:22px; text-transform:uppercase;} #footer-cta a:hover { text-shadow: 0px 0px 6px #000000; background-color:#8b6b38; border-color:#8b6b38; color:#fff} @media (min-width : 320px) and (max-width: 768px) { /* MOBILE ONLY */ #footer-cta h2 { font-size: 25px; padding-bottom:20px} #footer-cta, #footer-cta a, #footer-cta h2, #footer-cta .left { text-align:center;} } @media (min-width : 320px) { /* yellow */ } @media (min-width : 480px) { /* orange */ } @media (min-width : 768px) { /* red */ #footer-cta { padding-top: 20px; padding-bottom: 20px;} #footer-cta h2 { font-size: 20px; padding-bottom:0px; padding-top:7px;} #footer-cta a { font-size: 18px;} } @media (min-width : 992px) { /* purple */ } @media (min-width : 1200px) { /* blue */ #footer-cta { padding-top: 25px; padding-bottom: 25px;} #footer-cta h2 { font-size: 30px; padding-top: 0px;} #footer-cta a { font-size: 22px;} } /*############################################################################################################################################################################################################## # # FOOTER WIDGET 2 (INSTAGRAM) # ################################################################################################################################################################################################################*/ #footer-widget-2 { padding-bottom:40px;} #footer-widget-2 h2.widget-title { color:#acacac; font-size:30px; margin: 40px 0px 30px 0px; padding:0px; text-transform:uppercase;} /*############################################################################################################################################################################################################## # # FOOTER # ################################################################################################################################################################################################################*/ #footer-wrapper { background-color: #1d1d1d; } /*############################################################################################################################################################################################################## # # FOOTER SEO # ################################################################################################################################################################################################################*/ #footer-seo, #footer-seo p, #footer-seo h2, #footer-seo h3 { color:#fff; font-size:11px; line-height:normal; text-align:left; margin: 0px; padding:0px;} #footer-seo { padding-left:30px;} #footer-seo h2, #footer-seo h3 { font-weight:bold;} #footer-seo { margin: 20px 0px;} /*############################################################################################################################################################################################################## # # FOOTER CREDITS AND COPYRIGHT # ################################################################################################################################################################################################################*/ #copyright { color:#fff; font-size:11px; line-height:normal; text-align:left; padding-left:30px;} #credits { text-align: left; background: url(images/chameleon_creative.gif) no-repeat 30px 7px; padding: 5px 0px 5px 0px; margin-bottom:20px;} #credits a, #credits a:active, #credits a:link, #credits a:visited { margin: 0px 0px 0px 25px; color: #fff; text-decoration: none; display: block; font-size: 11px; line-height:11px; text-align:left; padding-left:30px;} #credits a:hover { color: #8b6b38; text-decoration: none; } @media (min-width : 320px) and (max-width: 768px) { /* MOBILE ONLY */ #copyright, #credits { text-align:center;} #credits { background-position: center bottom;} #credits a, #credits a:active, #credits a:link, #credits a:visited { margin: 0px 0px 25px 0px; padding-left:0px; text-align:center} #footer-seo, #footer-seo p, #footer-seo h2, #footer-seo h3 { text-align:center;} } /*############################################################################################################################################################################################################## # # FOOTER CONTACT # ################################################################################################################################################################################################################*/ .footer-contact { padding-bottom:10px;} @media (min-width : 320px) and (max-width: 768px) { /* MOBILE ONLY */ .footer-contact { padding-top:20px; text-align:center;} } /*############################################################################################################################################################################################################## # # FOOTER LOGO # ################################################################################################################################################################################################################*/ #footer-logo { text-align:center;} #footer-logo img { margin: 10px auto; width:75%; height:auto; float:none; max-width: max-content;} /*############################################################################################################################################################################################################## # # FOOTER MENU # ################################################################################################################################################################################################################*/ #footer-wrapper .menu-main-menu-container { text-align:left; padding-top:30px; padding-left:30px;} #footer-wrapper ul#menu-main-menu, #footer-wrapper ul#menu-main-menu li { margin:0px; padding:0px; display:inline-block; list-style:none; list-style-image:none; list-style-type:none; text-align:left;} #footer-wrapper ul#menu-main-menu li a { font-weight:300; color:#8b6b38; text-transform:uppercase; font-size:15px; line-height:normal; text-decoration:none; display:inline-block; margin: 0px 20px 0px 0px; padding:0px;} #footer-wrapper ul#menu-main-menu li a:hover { color:#fff; text-decoration:none;} #footer-wrapper ul#menu-main-menu ul { display:none;} @media (min-width : 320px) and (max-width: 768px) { /* MOBILE ONLY */ #footer-wrapper .menu-main-menu-container { text-align:center;} #footer-wrapper ul#menu-main-menu, #footer-wrapper ul#menu-main-menu li, #footer-wrapper ul#menu-main-menu li a { text-align:center;} } /*############################################################################################################################################################################################################## # # FOOTER SOCIAL # ################################################################################################################################################################################################################*/ #social { margin-top:30px;} #social a {color:#8b6b38;} #social a:hover {color:#fff;} #social li { font-size:24px;} @media (min-width : 320px) and (max-width: 768px) { /* MOBILE ONLY */ #social { float:none; margin-bottom:20px;} } /*############################################################################################################################################################################################################## # # CONTENT ROWS # ################################################################################################################################################################################################################*/ #content-rows { text-align:center;} #content-rows .row { border-top: 1px solid #ad8c56;} #content-rows .no-cta { padding-bottom: 50px;} #content-rows div { background-size: cover; background-position: 50%;} #content-rows h2 { color:#ad8c56; font-size:40px; font-weight:700; text-transform:uppercase; text-align:center; margin:0px; padding: 50px 40px 30px 40px;} #content-rows p { color:#525252; font-size:18px; line-height:26px; font-weight:300; text-align:center; padding-left: 40px; padding-right: 40px;} .odd { background-color: #fff;} .even { background-color: #fff;} @media (min-width : 320px) { /* yellow */ #content-rows .is-table-row [class*="col-"] { min-height: 380px;} } @media (min-width : 768px) { /* red */ /* EQUAL HEIGHT COLUMNS */ #content-rows .is-table-row { display: table; } #content-rows .is-table-row [class*="col-"] { float: none; display: table-cell; vertical-align: top;} } /*############################################################################################################################################################################################################## # # FORMS # ################################################################################################################################################################################################################*/ label { font-weight: 400; color:#ad8c56; } input[type="text"], input[type="search"], input[type="email"], input[type="tel"] { /*background: #f5f5f5; border: 1px solid #EEE;*/ background: #f5f5f5; border: 1px solid #CCC; width: 100%; height: 50px; padding-left: 20px; font-weight: 500; margin-bottom: 20px; border-radius: 0; } /*############################################################################################################################################################################################################## # # BOOKING FORM # ################################################################################################################################################################################################################*/ #booking-form { text-align:left;} #booking-form label { margin-bottom: 5px; font-size:20px; line-height:20px; display:block;} #booking-form input { margin: 0px 0px 10px 0px;} #booking-form p { margin: 0px; padding:0px; font-size:20px; line-height:20px;} #booking-form legend { padding: 3px 5px 3px 5px; margin-bottom: 0px; font-size: 26px; font-weight: 700; color: #fff; text-transform:uppercase; border: 1px solid #CCC; border-bottom:0px; background-color:#ad8c56; } #booking-form fieldset { border: 1px solid #ccc; padding:30px; margin-bottom:30px;} span.wpcf7-not-valid-tip { display: inline-block;} .rqd { font-weight:700; color: #900;} .wpcf7-form-control-wrap { padding-bottom: 20px; display:block; } .inline { display:inline;} /*############################################################################################################################################################################################################## # # MEDIA BREAKPOINTS # ################################################################################################################################################################################################################*/ @media (min-width : 320px) and (max-width: 768px) { /* MOBILE ONLY */ } @media (min-width : 320px) { /* yellow */ } @media (min-width : 480px) { /* orange */ } @media (min-width : 768px) { /* red */ } @media (min-width : 992px) { /* purple */ } @media (min-width : 1200px) { /* blue */ } /*############################################################################################################################################################################################################## # # MailChimp # ################################################################################################################################################################################################################*/ #mc_embed_signup{ clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;} body #mc_embed_signup #mc-embedded-subscribe-form .button {background-color: #fff !important; color: #8b6b38 !important;} body #mc_embed_signup #mc-embedded-subscribe-form .button:hover {background-color: #4a4a4a !important; color: #fff !important;} /*############################################################################################################################################################################################################## # # DEVELOPMENT COLORS # ################################################################################################################################################################################################################ @media (min-width : 320px) { .book a { background-color:yellow !important;} h1 {color:yellow !important;}} @media (min-width : 480px) { .book a { background-color:orange !important;} h1 {color:orange !important;}} @media (min-width : 768px) { .book a { background-color:red !important;} h1 {color:red !important;}} @media (min-width : 992px) { .book a { background-color:purple !important;} h1 {color:purple !important;}} @media (min-width : 1200px) { .book a { background-color:blue !important;} h1 {color:blue !important;}} @media (min-width : 1400px) { .book a { background-color:pink !important;} h1 {color:pink !important;} } @media (min-width : 1500px) { .book a { background-color:cyan !important;} h1 {color:cyan !important;} } @media (min-width : 1600px) { .book a { background-color:brown !important;} h1 {color:brown !important;} } @media (min-width : 1700px) { .book a { background-color:green !important;} h1 {color:green !important;} }*/