/*
Theme Name: Chaplin Child
Template: chaplin
Version: 2.6.7
Aanpassingen: https://www.wordpress-design.nl
-------------------------------------------------------- 
	
	KLEUREN
	donkerblauw: #1e2833
	lichtblauw:  #b5c8e1
	rood:        #ed1b2f
	

------------------------------------------------------ */

/* SCROLLING TEXT BANNER */

@media screen and (max-width: 668px /*788px*/) {
     .coblocks-column-row-123202312447 {
          display: none;
     }
}

.scrolling_text {
    margin-top: -3em;
    width: 100%;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
    background: #beb4c1;
    padding-top: 13px;
    padding-bottom: 10px;
    border-top: 3px #1e2833 solid;
    border-bottom: 3px #1e2833 solid;
}

.text span {
    font-family: 'Oswald';
    margin: 0 20px;
    font-weight: normal;
}

@keyframes animate_text {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(-100%, 0, 0);
    }
}

.text {
    font-family: 'Oswald';
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase;
    color: #1e2833;
    letter-spacing: 0.2em;
    animation: animate_text 30s linear infinite !important; 
   }
/* EINDE SCROLLING TEXT */

/* ----------------------------------------------------------------- */

/* WEBFONTS */

@font-face {
font-family: 'MonaSans';
src:
    url('fonts/Mona-Sans.woff2') format('woff2 supports variations'),
    url('fonts/Mona-Sans.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
}

body,
p,
h1,h2,h3,h4,h5,h6 {
  font-family: 'MonaSans';
  font-feature-settings: "ss01" on, "ss03" on, "ss05" on;
}

h1 {
  font-weight: 500;
  font-stretch: 125%;	
}

p {
  font-weight: 500;
  font-stretch: 125%;
  letter-spacing:1px;
}

/* ----------------------------------------------------------------- */

/* STYLE */

html {
	font-size: 62.5%; /* 1rem = 10px */
}

body {
	background-color: #b5c8e1 !important;
	scrollbar-gutter: stable;
}

a.post-edit-link {
display: none;
}

.theme-credits {
     display: none;
}


/* SITE-HEADER */

#site-header {
	text-align: center;
}

.header-inner {
	max-height: 7rem;
}

.header-inner .section-inner {
	max-height: 7.4rem;
}

@media ( max-width: 700px ) {
     .header-inner {
          margin-top: 2rem !important;
     }
}


/* Banner */

/*
<center>
<div class="parent">
<img class="image1" src="https://janbennink.com/design/banners/bergsma-en-bennink-background.svg"/>
<img class="image2" 
src="https://janbennink.com/design/banners/bergsma-en-bennink-letters.svg"/>
</div> <!-- parent -->
</center>
*/

.banner-logo {
text-align: center;
}

.banner-logo p {
    text-align: center;
    color: #aaa;
    text-decoration: none;
}

.banner-logo .parent {
position: relative;
top: 0;
left: 0;
max-width: 200px;
max-height: 200px;
margin-bottom: 30px;
}

.banner-logo .image1 {
position: relative;
top: 0;
left: 0;
}    

.logo .image2 {
position: absolute;
top: 0;
left: 0;
animation-name: spin !important;
animation-duration: 25000ms !important;
animation-iteration-count: infinite !important;
animation-timing-function: linear !important;
}

@keyframes spin {
     from {
         transform:rotate(360deg);
     }
     to {
          transform:rotate(0deg);
     }
}





/* CONTENT */

.header-titles { /* Naam Burgercomite */
}

.site-logo img {
     /*max-height: 4rem;*/
	max-height: 9rem;
	width: auto;
}

@media ( min-width: 700px ) {
.site-logo img {
	max-height: 10rem;
	transition: height .15s linear, width .15s linear, max-height .15s linear;
	}
}

.cover-header { border: 0px yellow solid; }
.cover-header-inner-wrapper { border: 0px orange solid; }
.cover-header-inner { border: 0px white solid; }

.post-2 h1.entry-title {
border: 5px red solid;
text-align: center;
height: 300px;
width: 300px;
font-size: 30px;
color: #b5cbe1;
margin-right: auto;
margin-left: auto;
background-image: url('design/banner/logo-onder-lichtblauw-transparent.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
  
.post-2 .intro-text {
color: #b5cbe1;
min-width: 100% !important;
border: 3px blue solid;
}


/* To The Content ---------------------------- */

.to-the-content-wrapper {
	margin-top: 2.5rem;
}

.to-the-content {
	align-items: center;
	display: flex;
	text-decoration: none;
}

.to-the-content .icon {
     transition: transform 330ms ease-in-out !important;
	margin-left: auto;
	margin-right: auto;
}

.to-the-content .icon svg {
	height: 8rem !important; /* was 3.2 */
	width: 8rem !important; /* was 3.2 */	
	color: #fff;
}

.to-the-content:hover .icon { 
	transform: scale( 1.4 );
}

.to-the-content .text {
}


.home .header-navigation-wrapper {
     padding-right: 20px;
     padding-left: 5px;
     border-radius: 5px;
     max-height: 63px;
	border: 0px white solid;
}

.header-navigation-wrapper {
     background: none;
}

.main-menu-alt-container {
      margin-left: 15px;
}

.menu-item a {
     font-family: 'MonaSans';
     color: #1e2833;
     display: inline;
     position: relative;
     overflow: hidden;
     text-decoration: none !important;
     text-transform: uppercase;
     font-size: ;
}

@media (max-width: 1200px) {        
          .menu-item-705 { display: none; }
}

@media (max-width: 1100px) {        
          .menu-item-705 { display: none; }
}

.menu-item a:after {
     content: "";
     position: absolute;
     z-index: -1;
     left: 0;
     right: 100%;
     bottom: -5px;
     background: #1e2833;
     height: 3px;
     transition-property: left right;
     transition-duration: 0.3s;
     transition-timing-function: ease-out;
}

.menu-item a:hover:after,
.menu-item a:focus:after,
.menu-item a:active:after {
     right: 0;
}

/* MENU MODAL */

/* <div class="menu-modal-toggles">
     <a href="#" class="toggle nav-toggle nav-untoggle"> 
          <div class="toggle-text">Sluiten</div>
     </a>
</div> */

.menu-modal {
	background-image: radial-gradient(#ebddc8, #e6e3e8) !important;
}

.menu-modal-inner { 
	background-color: none !important;
}

.menu-modal-toggles a.toggle { /* header (tekst sluiten) */
     font-size: ;
     background: transparent !important;
}

.menu-modal .toggle-text { /* header (kruisje) */
     font-size: ;
     margin-left: -50px !important;
}

.menu-modal .bars .bar { /* kruisje) */
     border: 2px #1e2833 solid !important;
}

.main-menu .ancestor-wrapper { 
     border-bottom: 2px #1e2833 solid; 
}

.main-menu .ancestor-wrapper a { 
     font-size: ;
     text-align: center;
}

.menu-modal li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-191 { 
     border-top: 2px #1e2833 solid; 
}

.menu-wrapper .menu-bottom {
     margin-bottom: 50px;
}

.menu-wrapper.section-inner .menu-copyright { 
     color: #1e2833; 
     font-weight: normal;
}


/* Navigation Toggle ------------------------- */

.header-toggles {      
     display: flex;
	flex-shrink: 0;
	justify-content: flex-end;
	margin: 0 -2.6rem 0 2rem;
	overflow: hidden;
}

.header-toggles .toggle {
     text-decoration: none;
}

.header-toggles .toggle:hover,
.header-toggles .toggle:focus {
	text-decoration: none;
}

.toggle-text {
     font-family: 'MonaSans' !important;
     font-size: 2rem !important;
	font-weight: normal;
	color: #1e2833;
	border-bottom: 2px transparent solid;
}

.toggle-text:hover {
     border-bottom: 2px #1e2833 solid;    
}

.nav-toggle .bar {
	background: #1e2833 !important;
}

.menu-modal-inner  .header-toggles {
     background: #fff !important;
     border-radius: 0;
}



/* SHAPE DIVIDERS */

.is-style-waves svg {
     fill: #1e2833; 
}

.is-style-waves .wp-block-coblocks-shape-divider__alt-wrapper {
     margin-top: -1px;
     background-color: #1e2833;
}

/* ----------------------------------------------------------------- */

/* DRAAIEND LOGO
	
<center>
<div class="banner">

<img class="onder" src="https://hetburgercomite.nl/design/onder.png" />
<img class="boven" src="https://hetburgercomite.nl/design/boven.png" />

</div> <!-- banner -->
</center>

.banner {
position: relative;
top: 0;
left: 0;
width: 200px;
height: 200px;
}

.onder {
position: relative;
top: 0;
left: 0;
width: 200px;
height: 200px;
}    

.boven {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
animation-name: spin !important;
animation-duration: 25000ms !important;
animation-iteration-count: infinite !important;
animation-timing-function: linear !important;
}

@keyframes spin {
     from {
         transform:rotate(0deg);
     }
     to {
          transform:rotate(360deg);
     }
}

/* ----------------------------------------------------------------- */

/* ANIMATIE IN HEADER 
#particles-js {
/* script staat in child-theme/parts/page-header-cover 

			<!-- particles.js container -->
			<div id="particles-js"></div>
			<script src="https://wefpapers.nl/particles/particles.js"></script>
			<script src="https://wefpapers.nl/particles/js/app.js"></script>
			<!-- einde particles.js container -->

  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* ----------------------------------------*/