/*
Theme Name: Pivotal Canvas WP
Theme URI: 
Author: Phil Hatfield
Author URI: 
Description: The 2018 theme for WordPress built on Bootstrap.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pivotalcanvaswp

CSS and actions to maintain
***************************
1*  Standard Styling
2*  Topbar, Header, Sticky
3*  Page Titles
4*  Parallax
5*  Soliloquy / Slider
6*  Menu
7*  Sidebar
8*  Blog / Case Studies
9*  Testimonials
10* Contact form
11* Woocommerce
12* Footer
13* Copyright
14* 404 / Search
15* Breakpoints


Colours:
Ammonite #274  =        #dcd8d0  -  A naturally understated grey  -  Lite Minky Taupe
Purebeck Stone #275  =  #c3beb5  -  An understated stone grey - Mid Minky Taupe
Sudbury Yellow #51  =   #d7b87b  -  A traditional mid yellow  -  Lite Golden Yellow
Railings #31  =         #46484b  -  A soft black with blue undertones

Pivotal Marketing Blue = #2181cb

*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600');
/* font-family: 'Montserrat', sans-serif; */
/* *1 */

html {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
}

body {
    font-size: 16px;
    color: #090909;
    font-family: 'Montserrat', sans-serif;
}


h1 {
    font-size: 2.5rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 3px;
}

h2 {
    font-size: 2.25rem;
    font-weight: 400;
    margin: 0 0 40px 0;
}

h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 400;
    margin-bottom: 25px;
}

h4 {
    font-size: 1.25rem;
    font-weight: 500;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.875rem;
}

p,
ul,
ol {
    font-size: 1rem;
    line-height: 1.75rem;
    color: #090909;
    margin-bottom: 20px;
}

img {
    max-width: 100%;
    height: auto;
}

.widget_media_image img {
    width: auto;
    height: 90px !important;
    margin-bottom: 20px;
}

a {
    color: #948e84;
    text-decoration: none;
}

a:hover {
    color: #202222;
    text-decoration: underline;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.fn {
    float: none;
}

.clear {
    clear: both;
}

.pull-right {
    text-align: right;
}

.padding-left0 {
    padding-left: 0;
}

.padding-right0 {
    padding-right: 0;
}

.margin-t20 {
    margin-bottom: 30px;
}

hr {
    display: block;
    width: 200px;
    margin: 10px auto 40px auto;
    border-bottom: 2px solid #dcd8d0;
}

.ff {
    display: block;
    margin: 0 auto;
    max-width: 600px;
    text-align: center;
    background: #dcd8d0;
    padding: 20px;
    color: #46484b;
}

.ff h3 {
    color: #46484b;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.ff p {
    color: #46484b;
}

.ff a {
    color: #46484b;
    text-decoration: underline;
}

.nopadding {
    padding: 0;
}

.nomargin {
    margin: 0;
}

span {
    color: #2181cb;
}

center {
    text-align: center;
}

.center {
    text-align: center;
}


.centered {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(-5%, -50%);
}

.centred {
    display: block;
    margin: 0 auto;
}

.alignnone {
    margin: 5px auto 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}


.container-fluid {
    padding: 0;
}

.container {
    max-width: 100% !important;
    width: 1270px;
    padding-left: 50px !important;
    padding-right: 50px !important;
}

section {
    padding: 40px 0 !important;
}

section.top {
    margin-top: -80px;
    background: #fff;
}


.spacer40 {
    height: 40px;
}

.home-whitebg {
    background: rgba(255, 255, 255, 0.8);
    padding: 30px;
}

h2.smalltxt {
    font-size: 1.5rem;
}

/***** Standard button *****/

.btn-default {
    width: auto;
    border-radius: 0;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    border: 0px;
    padding: 10px 30px;
    background: #c3beb5;
    color: #fff;
    font-size: 1rem;
    display: block;
    margin: 0 auto;
}


.btn-default:hover {
    background: #46484b;
    color: #fff;
    cursor: pointer;
}

.btn-back {
    width: auto;
    border-radius: 0;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    border: 0px;
    padding: 8px 15px;
    background: #c3beb5;
    color: #fff;
    font-size: .8rem;
    display: block;
    margin: -10px auto 30px auto;
}


.btn-back:hover {
    background: #46484b;
    color: #fff;
    cursor: pointer;
}

/****** Standard post image *****/

.wp-post-image {
    max-height: 400px;
    object-fit: cover;
    margin-bottom: 0;
}

/* *2 */

/***** Topbar *****/

.topbar {
    background: #1e1e1e;
    padding: 8px 0;
    margin: 0;
    color: #fff;
    font-size: .8rem;
    font-weight: 200;
}

.topbar a {
    color: #fff;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 200;
}

.header h1 {
    text-align: center;
}


.custom-logo {
    display: block;
    margin: 0 auto;
    max-width: 250px;
    padding: 5px;
    transition: all .5s cubic-bezier(0, 0.5, 0.2, 1);
}

/***** Header *****/

/* header with transparent background - To give header/menu/logo a background remove postition:absolute; */

.header {
    padding: 0;
    background: #dcd8d0;
    z-index: 999;
    position: static;
    /******************** Fixed Sticky header - for single line header and no Top Bar - See Sticky Menu below *******************/
    /******************** NOTE: Adding a border line can blur header text *******************/
    /* overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99; 
    */
    width: 100%;
    transition: 1s ease;
}

/***** Sticky Header *****/

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
    position: fixed !important;
    top: 0;
    width: 100%;
    height: auto;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16);
}



/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
    padding-top: 102px;
}

.sticky .custom-logo {
    max-width: 150px;
}

.sticky .header-right {
    padding-top: 10px;
    width: auto;
}

/* Top menu color change on sticky header */

.sticky #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {}

/* Height of menu on sticky */

.sticky #mega-menu-wrap-primary,
.navbar-default {}

/* Background block colour change on sticky header */

.sticky #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {}


/* Background block colour change on stickysticky header */

.sticky #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {}

.sticky #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {}

/* *3 */

/***** Page title area *****/

.header-wrap {
    text-align: center;
    padding: 150px 0;
    object-fit: cover;
}



.header-right {
    float: right;
    padding: 23px 0 0 0;
}

.header-right p {
    color: #231f20;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 14px;
    font-weight: 600;
    padding: 0 20px;
    text-align: right;
    margin: 0;
}


#mega-menu-wrap-primary,
.navbar-default {
    margin: 20px 0;
    font-size: 14px;
}

.page-title {
    color: #222;
    letter-spacing: 1px;
    font: 700 40px/40px"Questrial", sans-serif;
    text-align: center;
    width: 100%;
    padding: 20px;
}

/***** Home *****/

.activity-box {
    padding: 80px 10px;
    border: 3px solid #c3beb5;
    text-align: center;
}

.grocery {
    display: grid;
    align-items: center;
    height: 390px;
    background: url(/wp-content/uploads/2020/06/grocery.jpg);
    background-position: center;
}

.drinks {
    display: grid;
    align-items: center;
    height: 390px;
    background: url(/wp-content/uploads/2020/06/drinks.jpg);
    background-position: center;
    background-size: cover;
}

.grocery h3,
.drinks h3 {
    text-align: center;
    background: #fffc;
    padding: 20px;
    width: auto;
    display: block;
    margin: 0 auto;
}

/************************** Smooth scroll instructions ****************************/
/* https://github.com/cferdinandi/smooth-scroll */
/* Functions.php to enqueue :  wp_enqueue_script ("smooth-scroll", get_stylesheet_directory_uri()."/js/dist/js/smooth-scroll.js");    */
/* Footer script to include:  <script> 	var scroll = new SmoothScroll('a[href*="#"]');  </script>
   - See full script including speed of scroll in the footer.php of this theme  */

/* Then add links to page: e.g.  <a data-scroll href="#bazinga">Anchor Link</a>   &   <div id="bazinga">Scroll End</div>  */
/* Upload the JS  to /js/dist/js/smooth-scroll.js */

/* *4 */

/***** Parallax Images *****/

.parallax h1 {
    font-size: 3em;
    line-height: 1.2em;
    text-shadow: 2px 2px 8px #212121;
    color: #fff;
    text-align: center;
    font-weight: 700;
    margin-top: 20px;
    padding-top: 40px;

    display: flex;
    justify-content: center;

}

.parallax-gallery {
    /* The image used */
    /* Set a specific height */
    height: auto;
    /* Create the parallax scrolling effect */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax-gallery img {
    display: none;
}

.parallax-rooms {
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-attachment: fixed !important;
    height: 500px;
}



.bedrooms .home-whitebg {
    padding: 100px;
}

.bedrooms p {
    font-size: 1.2rem;
}

.bedrooms h2 {
    text-align: center;
    font-size: 1.5rem;
    margin: 80px 0 0 0;
}

.bedrooms hr {
    height: 30px;
    margin: 30px 0 0 0;
    background-size: 130px;
}


.ind-rooms {}

.ind-rooms img {
    height: 250px;
    object-fit: cover;
}

h3.ind-rooms {
    text-transform: uppercase;
    text-align: center;
    margin-top: -20px;
    margin-bottom: 30px;
}

a h3.ind-rooms,
.ind-rooms a {
    color: #353535;
}



/* .ind-rooms {
    border: 3px solid #c3beb5; 
    padding: 30px; 
    font-size: 1.5rem;
    height: 300px;
}

.ind-rooms h3 {
    text-transform: uppercase; 
}

.ind-rooms p {
    font-size:1.2rem;
}

.ind-rooms button {
    background:#c3beb5;
    color:#fff;
    padding:5px 30px; 
    border:none;
} */

.mtop15 {
    margin-top: 15px;
}

/***** Soliloquy / Slider *****/

img#soliloquy-image-16 {
    filter: brightness(0.6) contrast(1.2);
}

button.btn-sol {
    background: #5b5b5b;
    color: #fff;
    padding: 20px;
    font-weight: 200;
    letter-spacing: 3px;
    margin-top: 20px;
    text-transform: uppercase;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
}

button.btn-sol:hover {
    background: rgba(70, 72, 75, 0.8);
    color: #fff;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    cursor: pointer;
}

.soliloquy-outer-container {
    margin-top: 0;
}

.soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
    background: rgba(0, 0, 0, 0);
    transition: 1s ease;
    max-width: fit-content;
}

.soliloquy-container .soliloquy-caption.soliloquy-caption-bottom {
    /* margin-left: 20%!important; */
    top: 12%;
}

.soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
    text-align: right;
    background: rgb(220 216 208 / 55%) !important;
    margin: auto !important;
    padding: 30px !important;
}

.soliloquy-container .soliloquy-caption.soliloquy-caption-top {
    top: 40% !important;
}

.home-bg {
    padding: 50px 30px !important;
    background: rgba(85, 85, 85, .5) !important;
}

/* New Animated Caption Formattting */

.soliloquy-caption-inside .captiontext {
    max-width: 80%;
    color: transparent;
    position: relative;
    -webkit-animation-name: example;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 3s;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: forwards;
    /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

.soliloquy-caption-inside h2 {
    text-align: center !important;
    font-size: 45px;
    line-height: 60px;
    color: #5b5b5b !important;
    animation-name: example;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    text-shadow: none;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

.soliloquy-caption-inside h3 {

    font-size: 36px;
    line-height: 48px;
    text-align: left;
    color: transparent;
    animation-name: example;
    animation-duration: 3s;
    text-shadow: 2px 2px 8px #212121;
    animation-fill-mode: forwards;
}

.soliloquy-caption-inside h4 {
    color: #2077c2;
    font-size: 24px;
    text-align: left;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    width: 40em;
    animation-name: type;
    animation: type 4s steps(60, end);
    text-shadow: 1px 1px 2px #212121;
}



/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    from {
        left: 50px;
        top: 0px;
    }

    to {
        left: 50px;
        top: 250px;
        background-color: #fff;
        color: black;
    }
}

@keyframes example {
    from {
        left: 50px;
        bottom: 0px;
    }

    to {
        left: 50px;
        bottom: 100px;
        color: #fff;
    }
}


@keyframes type {
    0% {
        width: 0;
    }

    50% {
        width: 0;
    }

    100% {
        width: 100;
    }
}



.soliloquy-caption-inside .downarrow {
    color: black;
    font-size: 18px;
    text-align: center;
    color: transparent;
    position: relative;
    -webkit-animation-name: downarrow;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 3s;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: forwards;
    /* Safari 4.0 - 8.0 */
    animation-name: downarrow;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

.soliloquy-caption-inside .downarrow i {
    color: black;
    font-size: 48px;
}

@keyframes downarrow {
    from {
        bottom: 100px;
    }

    to {
        bottom: 0px;
        color: black;
    }
}


/* End New Animated Caption Formattting */

/***** Standard Menu Navigation *****/

.site-navigation {
    background: transparent;
}

.main-navigation {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

nav #site-navigation {}

.menu-header-menu-container {}

li.mega-menu-item h2 {
    font-size: 1.5rem;
    padding: 5px 0;
    border-bottom: 1px solid #999;
    margin: 0;
}

li.mega-menu-item h5,
li.mega-menu-item a h5 {
    border-left: 2px solid #777;
    padding: 10px;
    color: #666;
}

li.mega-menu-item a:hover {
    text-decoration: none;
}

li.mega-menu-item a:hover h5 {
    border-left: 2px solid #000;
    padding: 10px;
    color: #000;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
    float: none !important;
    display: inline-block !important;
}

ul.mega-sub-menu {
    text-align: center !important;
}

ul.menu-header-menu {
    float: right;
    text-align: right;
}

ul.menu li.menu-item {
    list-style: none;
    margin-left: 30px;
}

.sub-menu {
    display: none;
    position: absolute;
    background-color: #ff6600;
    width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 9999;
}

.sub-menu li {
    background: green;
    margin: 0;
    padding: 0;
    text-align: left;
}

.sub-menu > li > a {
    color: black;
    padding: 10px 5px;
    margin: 0;
    margin: 0;
    text-decoration: none;
    display: block;
    width: 160px;
}

/***** Mega Menu Styling ******/

#mega-menu-wrap-primary,
.navbar-default {
    background: transparent;
    border: 0px;
    float: none;
    padding: 0;
}

#mega-menu-wrap-primary #mega-menu-primary {
    text-align: center;
    justify-content: center;
}

/* Top Bar Styling - Hover */

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
    background: transparent;
    color: #202222;
}

/* Top Bar Styling - Active Page */

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
    color: #202222;
    text-decoration: underline;
    font-weight: 500;
}

.fa,
.fas {
    font-weight: 900;
    color: #202222;

}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
    color: #202222;
    padding: 0 0 0 40px;
    margin-bottom: 0;
    line-height: 20px;
    height: auto;
    text-transform: uppercase;
    font-weight: 500;
}

/* Dropdown Menu - Active */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    color: #231f20;
    padding: 10px 20px;
    margin: 0px;
    background: teal;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover {
    color: #2181cb;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu {
    width: 250px;
    margin-left: 30px;
}


/* Dropdown Level 2 Menu - Active */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu {
    width: 200px;
    margin-left: 0px;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    color: #231f20;
    padding: 10px 20px;
    margin: 0px;
    background: purple;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover {
    color: #231f20;
    padding: 10px 20px;
    margin: 0px;
    background: red;
}

/* Sub menu full width design */

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
    padding: 50px;
    margin-top: 20px;
    background: rgba(239, 239, 239, 0.9);
    transition: 1s ease;

}

/* Hover over main menu  */

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover {
    color: #202222;
    font-weight: 500;
}

span.mega-toggle-label-closed {
    color: #202222;
}

/* 7* */

/***** sidebar *****/


.blog-sidebar {
    text-align: right;
    background: #efefef;
    padding: 15px 10px;
    margin-bottom: 45px;
}

.blog-sidebar .textwidget {
    margin-bottom: 40px;
}

.blog-sidebar p {
    text-align: center;
}

.blog-sidebar h4 {
    text-align: center;
}

/* 8* */

/***** Main Blog  *****/

.blog-info {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 5px 0 0 0;
    text-align: center;
    background: #000000b0;
    margin-top: -30px;
    color: #fff;
    transition: 1s ease;
}

.blog-info p.blog-post-meta {
    color: #efefef;
    margin: 0;
}

.blog-container {
    position: relative;
    border: 3px solid transparent;
}

.blog-image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: 1s ease;
    backface-visibility: hidden;
}

.blog-image img {
    display: block;
    margin: 0 auto;
    max-height: 250px;
    height: 250px;
    width: auto;
}

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

.blog-container:hover .blog-image {
    filter: grayscale(1);
}

.blog-container:hover .blog-middle {
    opacity: 1;
}

.blog-container:hover .blog-info {
    opacity: 0;
}

.blog-text {
    background-color: #1e9dd8;
    color: #fff;
    font-size: 16px;
    padding: 10px 15px;
}

.blog-middle a,
.blog-middle a:hover {
    text-decoration: none;
}


/************ the house *******/


/***** image Hover Effect  4 column *****/

.hovereffect4 {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    margin-bottom: 20px;
}

.hovereffect4 .img-hex {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, .5);
    overflow: hidden;
    top: 0;
    left: 0;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.hovereffect4 .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 25%;
    left: 0;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.hovereffect4:hover .overlay {}

/* .hovereffect4:hover img {
    filter: grayscale(1)
} */


.hovereffect4:hover .img-hex {
    background: rgba(0, 0, 0, .5);
}

.hovereffect4 img {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
}

.hovereffect4 p {
    padding: 0;
    margin: 0;
    font-size: .8rem;
    color: #000;
}

.hovereffect4 h2 {
    color: #fff;
    font-weight: 400;
    text-align: center;
    position: relative;
    font-size: 14px;
    padding: 10px 0;
    margin: 0;
    -webkit-transform: translateY(45px);
    -ms-transform: translateY(45px);
    transform: translateY(45px);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    font-size: 1.3rem;
    font-family: 'Montserrat', sans-serif;
}

.hovereffect4:hover h2 {
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
    background: rgba(255, 255, 255, 0);
    font-size: 1.3rem;
    display: block;
}

.hovereffect4 h2.span {
    text-transform: capitalize;
    color: #000;
    text-align: center;
    position: relative;
    font-size: 0.9rem;
    padding: 10px 0;
    margin: 0;
    -webkit-transform: translateY(45px);
    -ms-transform: translateY(45px);
    transform: translateY(45px);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    display: none;
}

.hovereffect4:hover h2.span {
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
    background: rgba(255, 255, 255, 0);
    display: block;
}



.hovereffect4 a.info {
    display: inline-block;
    text-decoration: none;
    font-size: .9rem;
    color: #000;
    background-color: transparent;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    font-weight: normal;
    margin: 0;
    padding: 10px;
}

.hovereffect4:hover a.info {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    margin-top: 20px;
}

.hovereffect4 a.info:hover {}

.hovereffect4 .btn-default {
    display: none;
}

.hovereffect4:hover .btn-default {
    display: block;
    width: 100%;
    border: 0;
    padding: 8px;
    font-size: .9rem;
}

/***** Single Blog *****/

.featured-image {
    width: 300px;
    float: left;
    margin: 5px 20px 0 0;
}

/***** Case studies *****/

.case-study-excerpt {}

/* 9* */

/***** Testimonials *****/

.strong-view.pager-style-buttons .wpmslider-pager-link:before {
    width: 10px !important;
    height: 10px !important;
}

.strong-view .wpmslider-pager-item {
    margin-left: 10px !important;
}

.strong-form .form-field.wpmtst-submit {
    text-align: center;
}

.strong-rating label:before {
    zoom: 2;
    margin-right: 5px;
}

input#wpmtst_submit_testimonial.button {
    background: #dcd8d0;
    border: none;
    padding: 10px;
    font-weight: 600;
}

input#wpmtst_submit_testimonial.button:hover {
    background: #cfcbc3;
    border: none;
    cursor: pointer;
}

/* 10* */
/***** Contact Form CF7 WPCF7  *****/

.contactform {
    max-width: 80% !important;
    display: block;
    margin: 50px auto;
    background: #ecebea;
    text-align: center;
}


.wpcf7#wpcf7-f4-p88-o1 input,
.wpcf7#wpcf7-f4-p88-o1 textarea {
    width: 100%;
    max-width: 350px;
    padding: 5px;
}

.wpcf7#wpcf7-f4-p88-o1 .ajax-loader {
    display: none;
}

.wpcf7#wpcf7-f4-p88-o1 input.wpcf7-form-control.wpcf7-submit {
    background: #202222;
    color: #fff;
    border: none;
}

.wpcf7#wpcf7-f4-p88-o1 input.wpcf7-form-control.wpcf7-submit:hover {
    cursor: pointer;
    background: #bdbab3;
    border: none;
}

textarea {
    height: 100px;
}


.mailing-list .wpcf#wpcf7-f526-p88-o1 {
    max-width: 350px!important;
    margin: auto!important;
}
.mailing-list input.wpcf7-form-control.wpcf7-submit {
    background: #dcd8d0;
    border: none;
    padding: 5px 30px;
    margin: 0 auto;
    display: block;
}

.mailing-list input.wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email {
    border: none;
    background: #ecebea;
    padding: 5px;
    width: 100%;
}
.mailing-list span {
    color: #989083;
}

.mailing-list span.wpcf7-list-item {
    margin: 0;
}

/* 11* */
/***** woocommerce *****/

.woocommerce div.product .woocommerce-tabs .panel {
    border-left: 1px solid #d3ced2;
    border-right: 1px solid #d3ced2;
    border-bottom: 1px solid #d3ced2;
    padding: 20px;
    margin-top: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    border-radius: 5px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    margin: 0;
}

.woocommerce .header-wrap {
    text-align: left;
    padding: 10px 0px;
    object-fit: cover;
}

.woocommerce .header-wrap a {
    color: #fff;
}

.woocommerce ul.products li.product {
    padding: 10px;
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
}

li.product-category:hover {
    background: #efefef;
}


/* 12* */
/***** Footer *****/

.wb,
.footer a.wb {
    font-size: 1.8rem;
    color: #fff;
    margin-left: 10px;
}

.footer {
    background: #dcd8d0;
    padding: 25px 0 0 0;
    font-size: 0.75rem;
}

.footer h4 {
    font-size: 1.25rem;
    padding-bottom: 20px;
    margin: 0;
    color: #333;
    font-weight: 100;
    background: url(/wp-content/themes/pivotal-canvas-wp/assets/bg-underline.png) no-repeat bottom left;
}

.footer p,
.footer a {
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    text-transform: uppercase;
}



.footer strong {
    color: #fff;
}

.footer-menus {
    background-color: #646363;
    padding: 35px 0;
}

.footer ul.menu li.menu-item {
    list-style: circle;
}

.footer-menus ul {
    list-style: square;
    margin: 0;
    padding: 0;
}

.footer-menus li {
    list-style: square;
    margin: 0 0 4px 18px;
    padding: 0;
    color: #f78e34;
    line-height: 14px;
}

.footer-menus a {
    color: white;
    font-size: 12px;
    margin: 0;
    padding: 0;
    line-height: 14px;
}

/* 13* */
/***** Copyright *****/


.copyright {
    background-color: #46484b;
    font-size: 0.75rem;
    color: #fff;
    padding: 15px 0;
}

.copyright a {
    color: #fff;
}

.copyright p {
    line-height: 15px;
    font-size: 11px;
    margin-bottom: 0;
    color: #fff;
}

.copyright a:hover {
    color: #4CB3EA;
}

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

.copyright-left {
    text-align: left;
}

.form-control {
    margin-bottom: 10px;
    font-size: 1rem;
}

/* 14* */
/***** 404 / Search *****/

.page404 {
    margin-top: 50px;
    text-align: center;
    padding: 100px 30px;
}

.page404 h2 {
    font-size: 3rem;
    color: #fff;
    text-shadow: 2px 2px 8px #212121;
}

.page404 p {
    font-size: 1.5rem;
    color: #fff;
    text-shadow: 2px 2px 8px #212121;
}

.page404 form#searchform.searchform {
    max-width: 300px;
    margin: 0 auto;
}

/* 15* */
/***** Resolution Break Point / Media Screens *****/




@media only screen and (max-width: 1250px) {
    .soliloquy-caption-inside h2 {
        font-size: 35px;
        line-height: normal;
    }

    button.btn-sol {
        margin: 0;
        font-size: .85rem;
    }
}

@media only screen and (max-width: 991px) {
    .soliloquy-caption-inside h2 {
        font-size: 25px;
    }

    button.btn-sol {
        font-size: .75rem;
        padding: 15px;
    }

    .activity-box {
        padding: 50px 0;
    }

    .custom-logo {
        float: none;
    }

    .header-right {
        float: none;
        margin: 0 auto;
    }

    #mega-menu-primary {
        padding: 0 auto;
    }

    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
        padding: 0 0 0 20px;
    }
}

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

    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
        font-size: .8rem;
        padding: 0 0 0 20px;
    }

    #mega-menu-wrap-primary,
    .navbar-default {
        padding: 20px 0 0 0;
    }
}


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

    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
        padding: 5px 4px 0 4px;
        font-size: .7rem;
    }

    #mega-menu-wrap-primary .mega-menu-toggle,
    #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1:before,
    #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1:after {
        background: transparent;
        color: #222;
    }

    .header-right {
        margin-top: -10px;
    }


    .header-wrap {
        padding: 60px 20px;
    }

    .activity-box {
        padding: 30px 0;
    }

    .contactform {
        max-width: 100% !important;
    }
    
    .widget_media_image img {
        margin: 0 auto 20px auto;
        display: block;
    }
    .pull-right, .footer p, .footer a {
        text-align: center;
        margin: 0;
    }
    
    
}



@media only screen and (max-width: 600px) {
    .soliloquy-caption-inside h2 {
        display: none;
    }

    .soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
        background: transparent !important;
        padding: 0 !important;
    }

    .home-bg {
        padding: 0 !important;
        background: none !important;
    }

    #mega-menu-wrap-primary {
        padding: 0 !important;
        margin: 0 !important;
    }


    #mega-menu-wrap-primary,
    .navbar-default {
        padding: 12px 0 0 0;
    }

}

@media only screen and (max-width: 575px) {
    .padding-left0 {
        padding-left: 15px;
    }

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

    .parallax-gallery img {
        display: block;
    }

    .parallax-gallery {
        background-image: none !important;
        margin-bottom: 15px;
    }

    .order2 {
        order: 2;
    }

    .custom-logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .topbar {
        text-align: center;
    }

    .pull-right {
        text-align: center;
    }

    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
        padding: 10px 15px;
        line-height: 1rem;
    }

    .banner .btn-default {
        float: none;
    }

    .header-wrap h1.entry-title {
        font-size: 35px;
        line-height: 40px;
    }

    .header-right {
        text-align: center;
    }

    header {
        position: relative;
    }

    .logo h2 {
        font-size: 1.3rem;
    }

    #mega-menu-wrap-primary,
    .navbar-default {
        float: none;
    }

    #mega-menu-wrap-primary .mega-menu-toggle {
        background: transparent;
    }



    .copyright-left,
    .copyright-right {
        text-align: center;
    }


    .footer .widget_text {
        text-align: center;
    }
}


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

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