/*
Theme Name:  RAM - OWN THEME
Theme URI: https://
Description: CSS OWN THEME
Author: Reclamebureau RAM
Author URI: https://www.reclamebureauram.nl/
Version: 1.0
*/


/* ------------------------------------------------------------------------------------------ */
/* -------------------------------------- STANDARDS ------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

.container_full {/* remember to set a width */margin-right: auto; margin-left: auto;}
.container_size {/* remember to set a width */ margin-right: auto; margin-left: auto;}



:root{
	/* colors */
	--pri: #7FA8D6; /*pastelblauw*/
	--sec: #E6DFC4; /*beige/zand*/
	--ter: #DDBFA8; /*pastel/terracotta*/
	--qua: #E5C14A; /*heldergoud*/
	--qui: #003b7e;  /*donkerblauw*/
	
	--black: #000;
	--grey: #e6e6e6;
	--darkgrey: #999;
	--lightgrey: #f5f5f5;
	--white: #fff;
	--whiteop: #ffffffb8;
	
	--add1: #BDD2E4; /*blue-grey*/
	--add2: #F2A0BE;  /*pink*/
	--add3: #88A7C5; /*blue-light*/
	--add4: #e1f7d5;
	--add5: #f1cbff;
	--add6: #c9c9ff;
	--add7: #d5e4c0 /*#b4d3b2*/;
	--add8: #B1DBFF4F;
	
	--text-color: #111;
	--head-color: #333;
	--shadow-color: #444;
	--border-color: #000;
	
	/* fonts */
	--body-fonts: "Lexend-light", sans-serif !important;
	--title-font: "Lexend-Black", sans-serif !important;
	--head-fonts: "Lexend-Bold", sans-serif !important;
	--div-fonts: "Lexend-Light", "Helvetica", sans-serif !important;
	


	
	
	/* font-sizes */
	--small: 12px;
	--standard: 16px;
	--bodytext: 16px;
	--h1: 5.2rem /*83.2px*/;
	--ph1: 4rem /*64px*/;
	--h2: 3.5rem /*56px*/;
	--h3: 2.5rem /*40px*/;
	--h4: 2rem /*32px*/; 
	--h5: 1.5rem /*24px*/;
	--h6: 1rem /*16px*/;
	
	--smallm: 12px;
	--standardm: 16px;
	--bodytextm: 16px;
	--h1m: 2.9rem /*46px*/;
	--ph1m: 2.7rem /*42px*/;
	--h2m: 2.5rem /*40px*/;
	--h3m: 2rem /*32px*/;
	--h4m: 1.5rem /*24px*/; 
	--h5m: 1rem /*16px*/;
	--h6m: 0.8rem /*14px*/;
	
	
	
  	
	/* font-weight */
	--thin-weight: 300;
	--normal-weight: 500;
	--bold-weight: 700;
	--big-weight: 900;
	
	/* text-transform */
	--upper: uppercase;
	
	/* line-height */
  	--line-height-normal: 1.5;
	--line-height-medium: 1;
	
	/* max-width + 30 container + 30 row + 30 col */
	--full: 100%;
	--19: 1900px;
	--18: 1800px;
	--17: 1700px;
	--16: 1600px;
	--15: 1500px;
	--14: 1400px;
	--13: 1300px;
	--12: 1200px;
	--11: 1100px;
	
	/*padding*/
	--padding: 15px;
	--padding-left-right: 0px 15px;
	--nopadding: 0px ;
	
}

body, p, div, span {
  overflow-wrap: break-word;  /* breek woorden als nodig */
  word-wrap: break-word;      /* ouder alternatief */
  hyphens: auto;              /* breekt op natuurlijke plekken */
  word-break: normal;         /* voorkom willekeurige splitsingen */
}

html,body {height:100%; margin:0; background: #fefefe; }
html,body, ul, p {font-family: var(--body-fonts); font-size: var(--standard); color: var(--text-color); font-weight: var(--normal-weight); }
div {font-family: var(--div-fonts); font-size: var(--h5); color: var(--text-color); font-weight: var(--normal-weight);  }

p {height: unset !important; font-size: var(--h5) !important; line-height: var(--line-height-normal) !important;}
b, strong {font-weight: var(--bold-weight);}

a {color: var(--text-color); }

.row.no-gutters {margin-right: 0; margin-left: 0;}
.row.no-gutters > [class^="col-"],.row.no-gutters > [class*=" col-"] {padding-right: 0;padding-left: 0;}
.row > .card {padding-left: 0px; padding-right: 0px;}

.nopadding {padding: 0px !important;}



/* ------------------------------------------------------------------------------------------ */
/* -------------------------------------- FONTS ------------------------------------ */

@font-face {
   	font-family: Lexend-ExtraLight;
	src: url(/wp-content/themes/owntheme/fonts/Lexend/static/Lexend-ExtraLight.ttf);  
	font-display: 
}

@font-face {
   	font-family: Lexend-Light;
	src: url(/wp-content/themes/owntheme/fonts/Lexend/static/Lexend-Light.ttf);  
	font-display: 
}

@font-face {
   	font-family: Lexend-Thin;
	src: url(/wp-content/themes/owntheme/fonts/Lexend/static/Lexend-Thin.ttf);  
	font-display: 
}

@font-face {
   	font-family: Lexend-Medium;
	src: url(/wp-content/themes/owntheme/fonts/Lexend/static/Lexend-Medium.ttf);  
	font-display: 
}

@font-face {
   	font-family: Lexend-Regular;
	src: url(/wp-content/themes/owntheme/fonts/Lexend/static/Lexend-Regular.ttf);  
	font-display: 
}

@font-face {
   	font-family: Lexend-SemiBold;
	src: url(/wp-content/themes/owntheme/fonts/Lexend/static/Lexend-SemiBold.ttf);  
	font-display: 
}

@font-face {
   	font-family: Lexend-Bold;
	src: url(/wp-content/themes/owntheme/fonts/Lexend/static/Lexend-Bold.ttf);  
	font-display: 
}

@font-face {
   	font-family: Lexend-ExtraBold;
	src: url(/wp-content/themes/owntheme/fonts/Lexend/static/Lexend-ExtraBold.ttf);  
	font-display: 
}

@font-face {
   	font-family: Lexend-Black;
	src: url(/wp-content/themes/owntheme/fonts/Lexend/static/Lexend-Black.ttf);  
	font-display: 
}


/* ------------------------------------------------------------------------------------------ */
/* -------------------------------------- HEADLINERS ------------------------------------ */

h1 {font-family: var(--title-font); font-size: var(--h1); line-height: var(--line-height-medium); color: var(--head-color); text-transform: var(--upper); font-weight: var(--big-weight);}
h2 {font-family: var(--head-fonts); font-size: var(--h2); line-height: var(--line-height-medium); color: var(--head-color); font-weight: var(--bold-weight);}
h3 {font-family: var(--head-fonts); font-size: var(--h3); line-height: var(--line-height-medium); color: var(--add3); font-weight: var(--normal-weight);}
h4 {font-family: var(--head-fonts); font-size: var(--h4); line-height: var(--line-height-medium); color: var(--head-color); font-weight: var(--bold-weight);} /*footer title*/
h5 {font-family: var(--head-fonts); font-size: var(--h5); line-height: var(--line-height-medium); color: var(--add1); font-weight: var(--bold-weight); /*-webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;*/}
h6 {font-family: var(--head-fonts); font-size: var(--h6); line-height: var(--line-height); color: var(--head-color); font-weight: var(--normal-weight);}
















/* ------------------------------------------------------------------------------------------ */
/* -------------------------------------- PAGE STANDARDS ------------------------------------ */

.stdc {position:relative;  padding:120px 0px;}
.stdm {position:relative;  }
.stdr {position:relative; max-width: var(--13); margin: 0 auto; padding: var(--padding-left-right);}
.stco {text-align:left;}
.pg {margin: 110px 0px; --bs-gutter-x: 0; --bs-gutter-y: 0;}







/* ------------------------------------------------------------------------------------------ */
/* -------------------------------------- MENU DESKTOP ------------------------------------ */

.menubar {background-color: var(--qui); border-bottom: 1px solid var(--grey);}

.dklg {margin:10px 15px; width:250px /*200px*/; height: 199px /*159px*/; position: absolute; left: 0; top: -50px;}
.lgsml {	-webkit-animation: scalelg 1s forwards; /* Safari 4+ */
  	-moz-animation:    scalelg 1s forwards; /* Fx 5+ */
  	-o-animation:      scalelg 1s forwards; /* Opera 12+ */
  	animation:         scalelg 1s forwards; /* IE 10+, Fx 29+ */
} 

.lgsmlbk {-webkit-animation: scalelgbk 1s forwards; /* Safari 4+ */
  	-moz-animation:    scalelgbk 1s forwards; /* Fx 5+ */
  	-o-animation:      scalelgbk 1s forwards; /* Opera 12+ */
  	animation:         scalelgbk 1s forwards; /* IE 10+, Fx 29+ */}

@keyframes scalelg {
    from {width:250px; height:199px; top: -50px;}
    to {width:175px; height:139px; top: -50px;}
}

@keyframes scalelgbk {
    from {width:175px; height:139px; top: -50px;}
    to {width:250px; height:199px; top: -50px;}
}





.fixed-top {position: fixed !important;}
.sticky-top {position: -webkit-sticky !important;position: sticky !important;}
.sticky-top1 {position: -webkit-sticky !important;position: sticky !important; top:45px /*45.5px*/; z-index: 1020;}

.icon-bard {/*width: 100%;*/ position: absolute; right: 15px; top: 8px; text-align: right; /*left:10px;*/}
.icon-bard i {color: var(--white);}
.icon-bard .btn-oned:hover i, .icon-bard .btn-threed:hover i {color: var(--black); }
.icon-bard .btn-twod i {color: var(--black);}
.icon-bard .btn-twod:hover i  {color: var(--white); }
.icon-bard .fa-xl {font-size: 2em !important; line-height: 1 !important;}


.btn-oned, .btn-threed {padding: 6px 7px; border: 2px solid var(--qua); background-color: var(--qua);}
.btn-oned:hover,  .btn-threed:hover {border: 2px solid var(--qui); background-color: var(--white);}
.btn-twod {padding: 7px; border: 2px solid var(--qui); background-color: var(--white); font-size: var(--h5);}
.btn-twod:hover {border: 2px solid var(--qua); background-color: var(--qua); color: var(--white);}

.menu {padding-top: 25px !important; }
.menu li {text-transform: uppercase; font-size:15px; padding-right: 15px !important; margin-left: 0px !important; list-style: none!important; float:left; padding-left:0px!important; font-weight: 500; }

.navbarh {top: 20px; width: 100%; /* Full width */ transition: top 0.3s; display: block; /* Transition effect when sliding down (and up) */}
.navbarh a {float: left; display: block; color: var(--black); text-align: center; padding: 15px; text-decoration: none !important; }
.navbarh a:hover, .navbarh a:active, .navbarh a:focus {color: var(--grey);}

.navbar {float: right; padding: 15px 0px 0px;}

.hmenu ul, hmenu li {color: var(--black); }
.telnr a {color:#000; text-decoration: none!important;}
.telnr a:hover, .telnr a:active, .telnr a:focus {color: #f39201 /* #955a2c */ !important;}


/* Zorg dat dropdowns boven hero/headers liggen */
.navbar .dropdown-menu { z-index: 2000; }

/* Als je een wrapper met overflow hidden hebt, stop daarmee voor de header */
.header, .site-header, .navbar, .menu-wrapper {
  overflow: visible;
}

/* Optioneel: iets grotere klikdoel en nette spacing */
.navbar .dropdown-menu { margin-top: -.5rem; }


.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .active > .nav-link , .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {color: var(--white); text-transform: var(--upper); padding-right: 1.2rem;}
.navbarh a:active, .navbarh a:focus, .navbarh a:hover {color: var(--qua) !important;}
.navbar-light .navbar-nav .nav-link {color: var(--white); text-transform: var(--upper);}

.dropdown-menu {color: var(--white); text-transform: var(--upper); background-color: var(--black); /* #f5950a */; background-clip: padding-box; border: none; border-radius: 0px; min-width: 20em; left: -75%;}
.dropdown-item:focus, .dropdown-item:hover, .dropdown-item:active {background-color: transparent;}


[data-toggle="collapse"] .fa:before {content: "\f139";margin-right:10px;}
[data-toggle="collapse"].collapsed .fa:before {content: "\f13a"; margin-right:10px;}

.dkml {}
.dkmm {text-align: right;}
.dkmr {right: 15px;}

.dropdown-menu {color: #000; text-transform: uppercase; background-color: #fff /* #f5950a */; background-clip: padding-box; border: none; border-radius: 30px; min-width: 15em; left: -75%; box-shadow: 3px 3px 10px rgba(0,0,0,.3); }
.dropdown-item {text-align: left !important; padding-left: 35px !important;}
.dropdown-item:focus, .dropdown-item:hover, .dropdown-item:active {/*background-color: #e8f1f8 !important; font-weight: bold;*/ border-top: none !important;}
li.dropdown:hover > .dropdown-menu {display: block;}
ul .dropdown-menu li {margin-right: 0px !important;}
 .navbar-expand-md .navbar-nav .dropdown-menu {
      top: 100%;
  }

/* ------------------------------------------------------------------------------------------ */
/* -------------------------------------- MENU MOBIEL ------------------------------------ */

.mbml {}
.mbmr {text-align: right}


.icon-barm {width: 100%; position: absolute; right: 5px; top: 7px; text-align: right; /*left:10px;*/}
.icon-barm i {color: var(--white);}
.icon-barm .btn-onem:hover i, .icon-barm .btn-twom:hover i, .icon-barm .btn-threem:hover i {color: var(--black); }




.btn-onem, .btn-twom, .btn-threem {padding: 6px 7px; border: 2px solid var(--black); background-color: var(--black);}
.btn-onem:hover, .btn-twom:hover, .btn-threem:hover {border: 2px solid var(--black); background-color: var(--white);}



.toggle-menu {width:40px; height: 40px; top: 0px !important; right: 0 !important; position: relative; z-index: 1003; display: inline-block; border: 2px solid var(--black); background: var(--white);}
.toggle-menu:hover {background-color: var(--black); border: 2px solid var(--black); }
.toggle-menu:hover i {background: var(--white);}

.toggle-menu:active {background-color: var(--white); border: 2px solid var(--black); }
.toggle-menu:active i {background: var(--black);}

.toggle-menu:focus {background-color: var(--white); border: 2px solid var(--black); }
.toggle-menu:focus i {background: var(--black);}

.toggle-menu i {position: absolute; display: block; height: 3px; background: var(--black); width: 30px; left: 5px; -webkit-transition: all .3s; transition: all .3s; color: var(--white);}



a .toggle-menu {color: var(--white);}
.toggle-menu i:nth-child(1) {top: 9px; width: 12px;}
.toggle-menu i:nth-child(2) {top: 15px; width: 25px;}
.toggle-menu i:nth-child(3) {top: 21px; width: 18px;}
.toggle-menu.active i:nth-child(1) {top: 17px; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); background: #000; width:25px;}
.toggle-menu.active i:nth-child(2) {background: transparent;}
.toggle-menu.active i:nth-child(3) {top: 17px; -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); background: #000; width:25px;}
	

	
.overlay {height: 0%; width: 100%; position: fixed; z-index: 1002; top: 0px; right: 0; background-color: var(--white);  overflow-x: hidden; transition: 0.5s; }	
.overlay-content {position: relative; top: 15%; width: 100%; text-align: left; /*margin-top: 30px;*/}
.overlay a {padding: 8px; text-decoration: none; font-size: 18px; color: var(--black); display: block; }
.overlay a:hover, .overlay a:focus, .overlay a:active {color: var(--qui);}
.overlay .closebtn {/*position: absolute; top: -35px; right: 20px; font-size: 72px;*/ color: var(--white) ;margin-right:15px; position: absolute; top: 15px; left: 0px; font-size:24px; z-index: 1002; display:inline-block;}

.open {height: 100%; }








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

.btn-link {font-weight: 500;color: #fff;background-color: #f39301; padding:10px 30px;border-radius: 0px; margin-bottom: 20px; white-space: normal; }
.btn-link:hover, .btn-link:active, .btn-link:focus {background-color: #fbc379; text-decoration: none; color:#fff !important;}

.breadcrumbs {padding-top: 40px; text-transform: uppercase;}
.breadcrumbs a {color: #000 ; text-decoration: none! important; font-weight:600;}
.breadcrumbs a:hover, .breadcrumbs a:active, .breadcrumbs a:focus {color: #f39301 !important;}






/* COLORS */


/* -------- HEADLINES ---------*/





/* -------- SOCIALS ------------ */



/* -------- HOME PAGE HEADER ---------*/



/* -------- PAGE HEADER ---------*/


/* -------- PAGE CONTENT ---------*/






/* ------------------------------------------------------------------------------------------ */
/* -------------------------------------- FOOTER ------------------------------------ */

.footer {padding:40px 0px; border-top: 1px solid var(--grey); border-bottom: 1px solid var(--grey); background: var(--qui); color: var(--white);}
.footercolumn a {font-size: var(--standard); text-decoration: none; color: var(--white);}
.footercolumn p {font-size: var(--standard) !important; text-decoration: none; color: var(--white);}
.footercolumn h6 {color: var(--qua);}
.footercolumn a:hover {color: var(--ter); text-decoration: underline;}
.footer2 {background: var(--qui); color: var(--white); padding: 40px 0px !important;}
.footer2 a,
.footer2 p {color: var(--white);}
.footercol2 .icon-bart {text-align: left; /*left:10px;*/ padding: 30px 20px;}
.footercol2 .icon-bart i {color: var(--add3); margin: 0px 5px 0px 0px; font-size: var(--h4)!important;}
.footercol3 {padding:30px 20px; }
.footercol3 a { font-size: var(--h6); margin-right:10px;}
.footercol3 .ram, .footercol3 .ram a { font-size: var(--standard); }
.ram {margin-top:10px; color: var(--white);}




/* ------------------------------------------------------------------------------------------ */
/* -------------------------------------- BACK-TO-TOP ------------------------------------ */
.back-to-top { cursor: pointer; position: fixed; bottom: 20px; right: 30px; opacity:0; background-color: transparent /*var(--black)*/; z-index: 999; width: 50px; color: var(--white);}
.back-to-top:hover, .back-to-top:active, .back-to-top:focus { background-color: transparent !important;}
.back-to-top-visible { opacity: 1; pointer-events: auto;}
.back-to-top i {color: var(--qua);}
.back-to-top i;hover, .back-to-top i:active, .back-to-top i:focus {color: var(--pri);}


/* ------------------------------------------------------------------------------------------ */
/* -------------------------------------- ICON BLOCK FOOTER MOBILE ------------------------------------ */

.iconblock {position:relative; padding: var(--nopadding);}
.iconblockrow {position:relative; padding: var(--nopadding);}
.fx-bottom {position:fixed; right: 0; bottom: 0px; left: 0; z-index: 1030; padding: var(--nopadding); }
.icon-barf {width: 100%;  overflow:unset; background-color: var(--grey); display: flex; height:100px; justify-content: center; border-top:1px solid var(--white); }

.icon-barf a {width:20%;}
.icon-barf .btn-threef a:hover{color: var(--pri); }
.icon-barf .btn-twof a:hover {color: var(--sec); }

.icon-barf .btn-onef {background-color: var(--pri); padding: var(--nopadding); border: 1px solid var(--white); border-radius: 0px;}
.icon-barf .btn-onef:hover {background-color: var(--sec); border: 1px solid var(--black); }
.icon-barf .btn-onef i {color: var(--sec); padding:10px 5px 10px;}
.icon-barf .btn-onef:hover i {color: var(--pri); }

.icon-barf .btn-twof {background-color: var(--sec); padding: var(--nopadding);  border-radius: 0px; border-top: 1px solid var(--white); border-bottom: 1px solid var(--white) ;}
.icon-barf .btn-twof:hover {background-color: var(--pri); }
.icon-barf .btn-twof i {color: var(--pri); padding:10px 5px 10px;}
.icon-barf .btn-twof:hover i {color: var(--sec); }

.icon-barf .btn-threef {background-color: var(--pri); padding: var(--nopadding); border: 1px solid var(--white);  border-radius: 0px;}
.icon-barf .btn-threef:hover {background-color: var(--sec); border: 1px solid var(--black); ;}
.icon-barf .btn-threef i {color: var(--sec); padding:10px 5px 10px; }
.icon-barf .btn-threef:hover i {color: var(--pri); }

.btn-onef h6, .btn-threef h6 {font-family: var(--div-fonts); font-size: var(--h4); color: var(--sec);}
.btn-onef:hover h6, .btn-threef:hover h6 {color: var(--pri);}

.btn-twof h6 {font-family: var(--div-fonts); font-size: var(--h4); color: var(--pri);}
.btn-twof:hover h6 {color: var(--sec);}


@media only screen and (max-width: 600px) {
	
	.icon-barf a {width:25%;}
}

@media only screen and (max-width: 450px) {
	
	.icon-barf .btn-onef , .icon-barf .btn-twof  .icon-barf .btn-threef  {padding:5px 5px 10px;}
	.icon-barf a {width:33.3%;}
	.icon-barf h6.iconb {font-size: 11px !important; }
}



@media only screen and (max-width: 401px) {
	
	.icon-barf .btn-onef  {padding:6px; margin-right:1px}
	.icon-barf .btn-twof  {padding:6px; margin-right:1px}
	.icon-barf .btn-threef  {padding:6px; margin-right:1px}
	
}




/* ---------  BOOTSTRAP Desktop GRID XL ---------- */
@media only screen and (min-width: 1201px) 
{
.mobile {display:none !important;}
}



/* ------- BOOTSTRAP Desktop GRID LG ----------- */
@media only screen and (min-width: 992px) and (max-width: 1200px)
{

.mobile {display:none !important;}

}


/* -------- BOOTSTRAP TABLET MD -----------------*/
@media only screen and (max-width: 991px)
{

	.desktop{display:none;}

.menu {padding-top: 100px !important; padding-left: 15px;}
.mobbut {margin-top:40px;}

.menu li {/*float:none !important;*/}
	.lgtm {width: 150px; height: 119px;}
	.stdc {padding:50px 0px;}
	
}


/* -------- BOOTSTRAP TABLET MD -----------------*/
@media only screen and (max-width: 767px)
{

	h1 {font-size: var(--ph1);}
	h2 {font-size: var(--h2m);}
	p {font-size: h5m;}
	
}

/* -------- BOOTSTRAP TABLET XS -----------------*/
@media only screen and (max-width: 575px)
{
	h1 {font-size: var(--h1m);}
	h2 {font-size: var(--h2m);}
}