/*
Theme Name: Scarab4
Theme URI: https://www.scarab4.com/
description: >-
  Scarab4 child theme of TwentySeventeen
Author: Vicky Bower
Author URI: https://www.scarab4.com/
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: scarab4
*/

@font-face {
    font-family: Avenir;
    src: url('fonts/Avenir.woff') format('woff'),
    url('fonts/Avenir.ttf') format('truetype'),
    url('fonts/Avenir.otf') format('opentype'),
    url('fonts/Avenir.eot') format('embedded-opentype');
}

body,
h1,h2,h3,h4,h5,h6 {
    font-family: Avenir,sans-serif;
    font-weight:200;
}

a:hover {text-decoration:none; box-shadow:none !important;}
.vp-portfolio__items-style-fade .vp-portfolio__item a:hover,
.vp-portfolio__items-style-fade .vp-portfolio__item a:focus,
.vp-portfolio__items-style-fade .vp-portfolio__item a:focus-within{color:#fff;}



h1,h2,h3,h4,h5,h6 {font-weight:700;}


.single-portfolio aside#secondary,
.page-id-169 header, .byline {display:none;}
.single-portfolio #primary {width:100% !important;}


.single-featured-image-header img{ width: 335px !important; height: 250px !important; margin:0; float:right;}

.single-featured-image-header {float:right; border: 0; background:transparent;}

.single-portfolio .post-thumbnail {position: relative}

.single-portfolio h1.entry-title { padding:0; position: absolute; bottom: 50px; color: #fff; text-transform: uppercase; font-size: 50px; font-weight: 300;}

header{margin-top: 55px;}
header .col-4 {height: 250px;}

.site-content {
    padding:0 !important;
}

.navigation-top {
    background: #181818;
    border-bottom: 0;
    border-top: 0;
    font-size: 16px;
    font-size: 1rem;
    position: fixed;
    clear: both;
    top: 0;
    height: 55px;
}

.navigation-top .current-menu-item > a, .navigation-top .current_page_item > a {color:#fff; }

.navigation-top a {
    color: #fff;
    font-weight: 400;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

.main-navigation li:hover a {
    padding: 10px 15px;
    border-bottom: 5px solid #eee;
    -webkit-transition: border 0.2s;
    transition: border 0.2s;
}

.main-navigation a {
    padding: 3px;
    border: 0px solid #000;
    -webkit-transition: border 0.2s;
    transition: border 0.2s;
    text-transform:uppercase;
}

.main-navigation a:hover {
    color: #ED1558;
}


.custom-logo-link img {
    display: inline-block;
    max-height: 156px;
    max-width: 600px;
    width: auto;
}

.custom-logo-link {
    width:100%;
}



#sub-title {
    color: #fff;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.5em;
    letter-spacing: 3px;
    margin: 10px 0 30px;
    text-align: center;
}



.btn-outline {
    border: 0;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.5em;
    color: #fff;
    letter-spacing: 3px;
}

.btn {
    padding: 14px 70px;
}

.main-navigation ul {text-align:right;}

.site-header .menu-scroll-down {right:-50px;}

.site-header .navigation-top .menu-scroll-down {color:#fff; top:0; border:none;}

.main-navigation ul {background:url('//scarab4.com/wp-content/uploads/2019/07/new-beetle-2.png') no-repeat 0 100% / contain}

.twentyseventeen-front-page.has-header-image .custom-header-media:before,
.twentyseventeen-front-page.has-header-video .custom-header-media:before,
.home.blog.has-header-image .custom-header-media:before,
.home.blog.has-header-video .custom-header-media:before {
    height:0;
}

.page-one-column .panel-content .wrap {max-width: 1000px; padding-left:0; padding-right:0;}

section#arrow {text-align: center;
    position: relative;
    top: 75vh;}

.home .site-content-contain {
    z-index: 2; position:relative; top:100vh;}

.site-navigation-fixed .menu-scroll-down, .twentyseventeen-front-page.page-one-column .entry-header, .sliceWrapper2 .widgettitle, .sliceWrapper3 .widgettitle {display:none;}

.single-featured-image-header {max-height: 250px;}

 .page .entry-title {font-size: 36px !important;
position:absolute; width: 100%; top: 140px; left: 0; text-align: center; color:#292652 !important;text-shadow: 0px 0px 25px rgba(255,255,255,0.7)}

.single-post .entry-title {font-size: 36px !important;
     width: 100%;  text-align: center; color:#212121 !important;text-shadow: 0px 0px 25px rgba(255,255,255,0.7)}

.page #primary .entry-header, .single .byline {display:none;}



@media screen and (min-width: 67em) {
    .navigation-top .wrap { padding:0;
    }
}

@media screen and (min-width: 48em) {
    .navigation-top .wrap { padding:0;
    }
}




/*header#masthead .navigation-top, a.menu-scroll-down{display:none;}*/

body:not(.title-tagline-hidden) .site-branding-text {width:100%;}
.custom-logo-link {padding:0;}

body:not(.has-sidebar):not(.page-one-column) .page-header, body.has-sidebar.error404 #primary .page-header, body.page-two-column:not(.archive) #primary .entry-header, body.page-two-column.archive:not(.has-sidebar) #primary .page-header.important.blog:not(.has-sidebar) #primary article, .archive:not(.page-one-column):not(.has-sidebar) #primary article, .search:not(.has-sidebar) #primary article, .error404:not(.has-sidebar) #primary .page-content, .error404.has-sidebar #primary .page-content, body.page-two-column:not(.archive) #primary .entry-content, body.page-two-column #comments
{
    float: none;
    width: 100%;
}


.sliceWrapper {
     position: relative;
     border: 1px solid black;
     padding: 0;
     width: 800px;
     height: 800px;
     border-radius: 50%;
     list-style: none;
     overflow: hidden;
 }

.sliceWrapper2 {
    position: absolute;
    padding: 0;
    width: 800px;
    height: 400px;
    list-style: none;
    overflow: hidden;
    z-index:1;
    top:800px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.sliceWrapper3 {
    position: absolute;
    padding: 0;
    width: 800px;
    height: 400px;
    list-style: none;
    overflow: hidden;
    z-index:1;
    top:-400px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.slice {
    position: absolute;
    left: -100%;
    width: 200%;
    height: 200%;
}

.sliceWrapper li {
    overflow: hidden;
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    transform-origin: 0% 100%;
}

.sliceWrapper li:first-child {
    transform: rotate(0deg) skewY(135deg);
}

.sliceWrapper li:nth-child(2) {
    transform: rotate(45deg) skewY(135deg);
}

.sliceWrapper li:nth-child(3) {
    transform: rotate(90deg) skewY(135deg);
}

.sliceWrapper li:nth-child(4) {
    transform: rotate(135deg) skewY(135deg);
}

.sliceWrapper li:nth-child(5) {
    transform: rotate(180deg) skewY(135deg);
}
.sliceWrapper li:nth-child(6) {
    transform: rotate(225deg) skewY(135deg);
}
.sliceWrapper li:nth-child(7) {
    transform: rotate(270deg) skewY(135deg);
}
.sliceWrapper li:nth-child(8) {
    transform: rotate(315deg) skewY(135deg);
}

.sliceWrapper li:first-child .slice {
    background: #ED1558;

}

.sliceWrapper li:nth-child(2) .slice {
    background: #000E1E;

}

.sliceWrapper li:nth-child(3) .slice {
    background: #371E55;

}

.sliceWrapper li:nth-child(4) .slice {
    background: #7E2564;

}

.sliceWrapper li:nth-child(5) .slice {
    background: #000E1E;

}

.sliceWrapper li:nth-child(6) .slice {
    background:#ED1558;

}

.sliceWrapper li:nth-child(7) .slice {
    background:#7E2564;

}
.sliceWrapper li:nth-child(8) .slice {
    background: #000E1E;

}




.sliceWrapper li:first-child a span {

position: absolute;
top: 610px;
left: 40px;
z-index: 1;
transform: skewY(-135deg) rotate(22deg);
color: #fff;
font-size: 28px;
text-align: center;

}

.sliceWrapper li:nth-child(2) a span {

    position: absolute;
    top: 600px;
    left: 90px;
    z-index: 1;
    transform: skewY(-135deg) rotate(22deg);
    color: #fff;
    font-size: 28px;
    text-align: center;

}

.sliceWrapper li:nth-child(3) a span {

    position: absolute;
    top: 600px;
    left: 40px;
    z-index: 1;
    transform: skewY(-135deg) rotate(22deg);
    color: #fff;
    font-size: 28px;
    text-align: center;

}

.sliceWrapper li:nth-child(4) a span {

    position: absolute;
    top: 600px;
    left: 40px;
    z-index: 1;
    transform: skewY(-135deg) rotate(22deg);
    color: #fff;
    font-size: 28px;
    text-align: center;

}

.sliceWrapper li:nth-child(5) a span {

    position: absolute;
    top: 600px;
    left: 50px;
    z-index: 1;
    transform: skewY(-135deg) rotate(22deg);
    color: #fff;
    font-size: 28px;
    text-align: center;

}

.sliceWrapper li:nth-child(6) a span {

    position: absolute;
    top: 600px;
    left: 40px;
    z-index: 1;
    transform: skewY(-135deg) rotate(22deg);
    color: #fff;
    font-size: 28px;
    text-align: center;

}

.sliceWrapper li:nth-child(7) a span {

    position: absolute;
    top: 600px;
    left: 60px;
    z-index: 1;
    transform: skewY(-135deg) rotate(22deg);
    color: #fff;
    font-size: 28px;
    text-align: center;

}

.sliceWrapper li:nth-child(8) a span {

    position: absolute;
    top: 600px;
    left: 60px;
    z-index: 1;
    transform: skewY(-135deg) rotate(22deg);
    color: #fff;
    font-size: 28px;
    text-align: center;

}


.wheeldots {
    position: absolute;
    border: 5px dotted white;
    padding: 0;
    width: 710px;
    height: 710px;
    border-radius: 50%;
    list-style: none;
    top:50px;
    left:50px;
}

#portfolio-examples {padding-bottom:0;}
#news-posts .post_content {padding: 20vh 10%;}
#news-posts figure {margin:0;}
#news-posts figure img {width:100%;}
#news-posts .kc-list-item-2 {padding:0; border:0; margin:0;}
#news-posts .kc-container {padding:0 !important;}
.kc-blog-posts-2 .kc-list-item-2 .post-item-left {padding-right: 0 !important;}


.open .sliceWrapper2 {
    top:400px;
}

.sliceWrapper2 .bottom {
    background: #e5e5e5;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0px;
    width: 800px;
    height: 400px;
    z-index: 9;
    text-align: center;

}

.sliceWrapper3 .top {
    background: #e5e5e5;
    left: 0;
    overflow: hidden;
    position: absolute;
    width: 800px;
    height: 400px;
    z-index: 9;
    text-align: center;
    top: 0;

}


.open .sliceWrapper3{
    top:0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

}

#service-wheel {position:relative ;
    border-radius: 50%;
    overflow: hidden;
    width: 800px;
    height: 800px;
}

.bottom.slice a span { color:#fff;  position:relative;}
.top.slice a span { color:#000;  position:relative;}

.js .menu-toggle, .js .dropdown-toggle {
    display: block !IMPORTANT;}

.menu-toggle{height:50px;}

.main-navigation .menu-toggle a {float:right;}
.navigation-top .wrap {max-width: 100%;}
#media_image-2.widget {padding:0;}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {float:left;}


#top-menu li {display: inline; float: right; padding: 0 10px;}
#site-navigation {position:relative;z-index:1;}
#menu-drawer.shut{ width:80%;position:absolute; top:-60px; right: 120px;padding-bottom:10px;z-index: 1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index:999;}
#menu-drawer.shut.open{ top:-10px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;}

.site-branding a {color:#FFF;}
.site-branding-text .about {margin-top:55vh;}

.site-branding a:hover {opacity:1; color:#ED1558;}

.single-post:not(.has-sidebar) #primary, .page.page-one-column:not(.twentyseventeen-front-page) #primary, .archive.page-one-column:not(.has-sidebar) .page-header, .archive.page-one-column:not(.has-sidebar) #primary {
    max-width:1200px;
}


i.fa {font-size:20px;}
#arrow i.fa {font-size:50px;color:#fff;}
#arrow i.fa:hover {color:#ED1558;}

footer h2.widgettitle {display:none;}

footer {
    background-color: #262626; position:relative; z-index:3;}

.home footer{top:100vh}

.post-169 figure {margin:0 !important;}

li.menu-item a, p.readmore a {display:inline-block;position:relative;}



*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#footer a {color:#fff; text-decoration:none;box-shadow:none;}
#footer a:hover{color:#ED1558;text-decoration:none;box-shadow:none;}

#page {background:#181818;}

.has-sidebar:not(.error404) #primary {width:100%;}

.blog h1.page-title {font-size:72px; color:#181818; text-align: center;}

.wrap {
    max-width: 1200px;}

@media screen and (min-width: 48em) {
    .has-sidebar #secondary {
        float: right;
        padding-top: 0;
        width: 25%;
    }
}

.kc_accordion_section.strategy h3, #amp-service-accordion .apac h5.acc-lbl.Visual {background: url('//scarab4.com/wp-content/uploads/services/S4-services-770px-1.jpg') center center;}
.kc_accordion_section.pr h3,#amp-service-accordion .apac h5.acc-lbl.Strategy  {background: url('//scarab4.com/wp-content/uploads/services/S4-services-770px-2.jpg') center center; }
.kc_accordion_section.design h3, #amp-service-accordion .apac h5.acc-lbl.PR {background: url('//scarab4.com/wp-content/uploads/services/S4-services-770px-3.jpg') center center;}
.kc_accordion_section.websites h3, #amp-service-accordion .apac h5.acc-lbl.Social {background: url('//scarab4.com/wp-content/uploads/services/S4-services-770px-4.jpg') center center;}
.kc_accordion_section.content h3, #amp-service-accordion .apac h5.acc-lbl.Advertising {background: url('//scarab4.com/wp-content/uploads/services/S4-services-770px-5.jpg') center center;}
.kc_accordion_section.advert h3, #amp-service-accordion .apac h5.acc-lbl.Design {background: url('//scarab4.com/wp-content/uploads/services/S4-services-770px-6.jpg') center center;}
.kc_accordion_section.social h3, #amp-service-accordion .apac h5.acc-lbl.Websites {background: url('//scarab4.com/wp-content/uploads/services/S4-services-770px-7.jpg') center center;}
.kc_accordion_section.visual h3, #amp-service-accordion .apac h5.acc-lbl.Content {background: url('//scarab4.com/wp-content/uploads/services/S4-services-770px-8.jpg') center center;}

.kc_accordion_section .kc_accordion_header > a, .flipper .front h3 {color:#ED1558; text-align:center;}


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

    .custom-header-media {
        bottom: 50%;}
    .site-branding .wrap {
        top: -65%;
    }
}
#logo img {padding-top:10px;}
.home #logo img {padding-top:0;}
#top-menu li.menu-item a {color:#fff;}
#top-menu li.menu-item:hover a {color:#ED1558;}

.hidden {display:none;}

.previous-thumbnail, .next-thumbnail {height:400px;
    text-align: center;
    padding: 190px 0;
    font-size: 28px;
    color: #fff;}
.post-navigation {margin: 0;}
.post-navigation .nav-links {padding:0; display:flex;}
.nopad {padding: 0 !important;}

span.hidden {display:none;}
.covid-banner {
    width: 100%;
    text-align: center;
    background: #ed1558;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}

a:hover .covid-banner {color:#aaaaaa}