/*** CUSTOM CSS FOR MASCHATJAKKES.NL by Jaydot, updated to J!4 February 2022 ***/

/*** COLORCODES ***
oker		#f8b119	rgb(0, 0, 0)
zwart		#000000	rgb(13,12,12)
donkoker	#7C5604
donkgrjs	#231F20


/*** ROOT SETTINGS, VARS ***/
:root {
  --zwart: hsl(0, 0%, 0%);
  --oker: hsl(41, 94%, 54%);  
  --bleekoker: hsl(41, 94%, 69%);
  --donkoker: hsl(41, 94%, 25%);
  --donkgrijs: hsl(345, 6%, 13%);
  
  --cassiopeia-color-primary: var(--donkoker);
    
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
		  
  scroll-behavior: smooth;
}

.clearfix {
  clear: both;
}

/*** CUSTOM SANSA FONT ***/
@font-face {
	font-family: 'Sansa';
	src: url('../fonts/Sansa-Normal.eot');
	src: local('☺'), url('../fonts/Sansa-Normal.woff') format('woff'),
      url('../fonts/Sansa-Normal.ttf') format('truetype'),
      url('../fonts/Sansa-Normal.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Sansa';
	src: url('../fonts/Sansa-NormalItalic.eot');
	src: local('☺'), url('../fonts/Sansa-NormalItalic.woff') format('woff'),
      url('../fonts/Sansa-NormalItalic.ttf') format('truetype'),
      url('../fonts/Sansa-NormalItalic.svg') format('svg');
	font-weight: italic;
	font-style: italic;
}
@font-face {
	font-family: 'Sansa';
	src: url('../fonts/Sansa-Bold.eot');
	src: local('☺'), url('../fonts/Sansa-Bold.woff') format('woff'),
      url('../fonts/Sansa-Bold.ttf') format('truetype'),
      url('../fonts/Sansa-Bold.svg') format('svg');
	font-weight: bold;
	font-style: bold;
}

/*** BODY FONT ***/
body {
	font-family: 'Sansa', sans-serif;
	color: var(--donkgrijs);
  	font-size: 18px;
  	line-height: 150%;
}
/* woorden met nadruk span */
.nadruk{
  color: var(--oker);
  font-weight: 600;
}
/* wat grotere tekst */
.groter {
  font-size: 5em;
}

/*** KOPPEN ***/
h1,h2,h3,h4,h5,h6 {font-family: Sansa, sans-serif; font-weight: 600; color: var(--donkgrijs); margin: 0.5em 0; text-rendering: optimizelegibility;}
h1 {font-size: 1.3em;}
h2 {font-size: 1.2em;}
h3 {font-size: 1.1em;}

/*maar koppen op foon wat kleiner */
@media (max-width: 979px){
h1 {font-size: 1.2em; }
h2 {font-size: 1.1em;}
h3 {font-size: 1.1em;} 
}
/*** LINKS ***/
a:link, a:visited{
	color: var(--oker);
	text-decoration: underline;
}
a:hover{
	color: var(--donkoker);
}
/* links op gele achtergrond */
.modgeel a:link, .modgeel a:visited,
.geelachter a:link, .geelachter a:visited {
    color: var(--donkgrijs);
}

/*** STYLING TOPBALK ***/
.container-topbar {
  background-color: black;
  font-size: .75em;
  padding: 0 1em;
}
.container-topbar p {
  margin-bottom: 0;
}
.container-topbar a:link, .container-topbar a:visited {
  color: white;
  text-decoration: none;
}
.container-topbar a:hover {
  color: var(--oker);
}

/* Menu section codering */
/*** MENU SECTIE ***/

 /* Styling dropdown menu on mobile */
 .navbar-collapse.collapse.show ul li {
	 padding-top: 1em;
 }
 .collapse.show ul li a {
	 font-weight: 400;
 }

.container-header {
    background-color: white;
    background-image: none;
    border-bottom: 1px solid var(--donkoker);
    position: sticky!important;
}
.container-header .mod-menu {
  color: var(--donkgrijs);
  text-transform: uppercase;
}
.container-header .grid-child {
  justify-content: space-between;
  padding-bottom: 0;
}
@media (min-width:992px){
.metismenu.mod-menu .metismenu-item {
    font-size: .9rem;
    font-weight: bold;
    line-height: 1.5;
    padding: 0 1em;
}
}
.container-header nav {
  margin-top: 0;
}
.container-header .navbar-toggler {
  color: var(--donkgrijs);
  font-size: 2em;
  border: none;
  outline: none;
}
.container-header .navbar-toggler:focus {
  outline: none;
}

.container-header .metismenu-item.active {
  color: var(--oker);
}
.container-header .metismenu>li>a:hover:after {
	background: var(--oker);
    opacity: .9;
  }


/***** EINDE MENU CODERING *****/

/*** HEADER MODULES ***/
/* remove top margin headers */
.container-top-a .moduletable {
	margin: 0;
}

/* nepkop h1, nodig om tekst binnen .geelachter te houden */
.nepkop {
  font-size: 1.3em;
  font-weight: 600;
  color: #231F20;
  color: var(--donkgrijs);
  margin: 0.5em 0; 
  text-rendering: optimizelegibility;
}

/* OPSOMMINGEN */
.colorbull {
  list-style: none;
  padding-left: 2em;
}
.colorbull li {
  padding-top: .5em;
}
.colorbull li::before {
  content: "\f0c8";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--donkgrijs);
  margin-left: -2em;
  margin-right: 15px;
  font-size: .8em;
}

/*** STYLING TEKST VOORPAGINA ***/
.item-pagehallo {
  text-align: center;
  padding: 1.5em 0;
  font-size: 1.2em;
  line-height: 150%;
}
@media (min-width: 768px){
.item-pagehallo {
  padding: 3em 0;
  font-size: 1.2em;
}}

/*** STYLING BLOKKEN VOORPAGINA ***/
.site-grid>.container-bottom-a {
	grid-column-start: 1;
    grid-column-end: 7;
    flex-direction: column;
    margin: 0;
}
/* voorpag blokken bovenmarge op klein scherm */
.site-grid>.container-bottom-a .moduletable{
    margin: 1em 0 0 0;
}
@media (min-width: 768px){
.site-grid>.container-bottom-a .moduletable{
    margin: 0;
}
}

/*** STYLING PAG LETSELSCHADE ***/
.letselpag .container-bottom-a {
   grid-column-start: 2;
    grid-column-end: 6;
}
.radertjes p {
  text-align: center;
}

/** ALINEA MET GELE ACHTERGROND **/
.geelachter {
  background-color: var(--oker);
  padding: 1em;
}

/*** STYLING PAG OVER ***/
.fotootje {
  border-radius: 12px;
}
.fotolaag {
  width: 40%;
}
.itemid-107 .geelachter {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-flex: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.textlaag {
  width: 60%;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

/*** STYLING BLOG ***/
.boxed .blog-item {
	box-shadow: 0 0 2px rgba(51,57,66,.1),0 2px 5px rgba(51,57,66,.08),0 5px 15px rgba(51,57,66,.08),inset 0 3px 0 var(--oker);
}
.blogpag h2 a:link, .blogpag h2 a:visited {
  color: var(--oker);
}
.blogpag h2 a:hover {
  color: var(--donkoker);
}
.blogpag .btn-secondary {
  color: var(--donkgrijs);
  background-color: var(--oker);
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-size: .7em;
  padding: 2px 15px;
}
.blogpag .btn-secondary:hover {
	background: var(--bleekoker);
}
/* geen chevronnetje voor lees meer */
.icon-chevron-right:before {
    content: " ";
}
.blogpag h6 {
  text-transform: uppercase;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.5em;
}
.blogpag h3 {
  font-weight: normal;
}
.blogpag dt{
  display: none;
}
.blogpag dd, .blogpag dd .published {
  font-size: .65em;
}

/*** STYLING AGENDA PAGINA ***/
.itemid-171 .float-start {
  padding: 0 1em 1em 0;
}

/*** STYLING PAG CONTACT ***/
/* verbergen nep artikel */
.itemid-108 .com-content-article {
  display: none;
}


/*** FOOTER STYLING ***/
.footer {
  background-color: black;
  background-image: none;
}
.footer .grid-child {
  padding: 0.5em;
}

.footerstijl {
  background-color: var(--zwart);
  color: #fff;
  padding: 0;
  line-height: 2em;
}
.footcopy p {
  font-family: Arial, sans-serif;
  font-size: .5em;
  line-height: 1em;
  margin: 0;
}
.footplaatjemaat {
  width: 4vw;
  margin: 0 5px;
}
.footplaatjemaat.bgwit {
  background-color: white;
}
/* start footer klein scherm */
 
.footplaatje {
  align-self: center;
  }
 
.foottext {
    font-size: .9em;
  }  
.foottext, .footcopy {
    width: 100%;
  }
.footplaatjemaat {
  width: 16vw;
}
.footfloats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
   flex-direction: column-reverse;
}  

/* eind footer klein scherm */
/* footer op groot scherm */
@media (min-width: 992px) {
.footfloats {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.footplaatje {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
.footcopy, .footplaatje {
  -ms-flex-item-align: end;
      align-self: flex-end;
  width: 40%;
}
}
/* eind footer groot scherm */

/*** STYLING CONTACT PAGINA ***/


/*** FLOATER (MET DIE BEUGEL) STYLING  ***/
/*niet op homepage */
.itemid-101 #mod-custom153 {
  display:none;
}
#mod-custom153 {
    position: fixed;
    left: -25px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  background-color: transparent;
  overflow: hidden;
  border: 2px solid #f8b119;
  border: 2px solid var(--oker);
  border-radius: 25px;
  width: 10vh;
  height: 50vh;
  margin: 0;
}
/* en niet op kleine schermen */
@media (max-width: 979px){
 #mod-custom153 {
    display:none;
  }
}