/*
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{
	
	
	--black: #000;
	--grey: #e6e6e6;
	--darkgrey: #999;
	--lightgrey: #f5f5f5;
	--white: #fff;
	--whiteop: #ffffffb8;
	--gold: #E7C97B;
	
		
	--xsmall: 14px;
	--small: 16px;
	--medium: 1.2rem;
	--large: 1.8rem;
	--standard: 18px;
	

	
	
  	
	/* 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;
	--10: 1000px;
	--09: 900px;
	
	/*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; }
body { font-size: var(--body-size);  font-weight: var(--normal-weight); }
div {font-size: var(--body-size); color:  font-weight: var(--normal-weight);  }

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

a { }

.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;}



.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,
.apg {margin: 110px 0px 0px; --bs-gutter-x: 0; --bs-gutter-y: 0;}

.row > ul {padding: 0px 0px 0px 2rem ;}
.sfull {max-width:100%;}
.s15 {max-width:1500px;}

.white {background: var(--white);}
.grey {background: var(--lightgrey);}
.black {background: var(--black);}
.primary {background: var(--color-1);}
.secundary {background: var(--color-2);}
.accentcolor-1 {background: var(--color-3);}
.accentcolor-2 {background: var(--color-13);}
.accentcolor-3 {background: var(--color-14);}

.white-c {color: var(--white);}
.grey-c {color: var(--lightgrey);}
.black-c {color: var(--black);}
.primary-c {color: var(--color-1);}
.secundary-c {color: var(--color-2);}
.accentcolor-1-c {color: var(--color-3);}
.accentcolor-2-c {color: var(--color-13);}
.accentcolor-3-c {color: var(--color-14);}


.section {scroll-margin-top: 200px;}

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

h1 {line-height: var(--line-height-medium);  text-transform: var(--upper); font-weight: var(--big-weight);}
h2 {line-height: var(--line-height-medium);  font-weight: var(--bold-weight); margin: 0 0 1.25rem;}
h3 {line-height: var(--line-height-medium);  font-weight: var(--normal-weight);}
h4 {line-height: var(--line-height-medium); font-weight: var(--bold-weight);} /*footer title*/
h5 {line-height: var(--line-height-medium);  font-weight: var(--bold-weight); /*-webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;*/}
h6 {line-height: var(--line-height);  font-weight: var(--normal-weight);}



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

.btn-link {font-weight: 500;color: var(--white); background-color: var(--color-1); padding:10px 30px;border-radius: 0px; margin-bottom: 20px; white-space: normal; }
.btn-link:hover, .btn-link:active, .btn-link:focus {background-color: var(--color-2); 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;}



/* ------------------------------------------------------------------------------------------ */
/* -------------------------------------- ANIMATIE ------------------------------------ */

/* BASIS: alles wat geobserveerd wordt */
.animate-on-scroll {
    opacity: 0;
    /* LET OP: hier GEEN transform meer! */
    transition: opacity .45s ease-out, transform .45s ease-out;
	will-change: transform, opacity;
}

/* Eindtoestand als element zichtbaar is */
.animate-on-scroll.animate-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ---- VARIANTEN: beginpositie ---------------------------- */

/* vanaf links */
.animate-from-left {
    transform: translate3d(-40px, 0, 0);
}

/* vanaf rechts */
.animate-from-right {
    transform: translate3d(40px, 0, 0);
}

/* vanaf onder / standaard fade-up */
.animate-from-bottom {
    transform: translate3d(0, 30px, 0);
}

/* vanaf onder / standaard fade-up */
.animate-from-top {
    transform: translate3d(0, -30px, 0);
}

/* zoom-in variant */
.animate-zoomIn {
    transform: scale(.85);
}
.animate-zoomIn.animate-visible {
    transform: scale(1);
}



@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

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

.footer {padding:20px 0px; border-top: 1px solid var(--grey); border-bottom: 1px solid var(--grey); background: var(--color-2); color: var(--white);}
.footer a {font-size: var(--footer-size, 14px); text-decoration: none; color: var(--color-3, --black);}
.footercolumn a {font-size: var(--footer-size, 14px); text-decoration: none; color: var(--color-3, --black);}
.footercolumn p {font-size: var(--footer-size, 14px, inherit) !important; text-decoration: none; color: var(--color-3, --black);}
.footercolumn h6 {color: var(--color-3);}
.footercolumn a:hover {color: var(--color-5); text-decoration: underline;}
.footer2 {background: var(--color-2); color: var(--color-3, --black); padding: 20px 0px !important;}
.footer2 a,
.footer2 p {color: var(--color-3, --black);}
.footercol2 .icon-bart {text-align: left; /*left:10px;*/ padding: 30px 20px;}
.footercol2 .icon-bart i {color: var(--color-1); margin: 0px 5px 0px 0px; font-size: var(--h4-size)!important;}
.footercol3 {padding:30px 20px; }
.footercol3 a { font-size: var(--footer-size, 14px); margin-right:10px;}
.footercol3 .ram, .footercol3 .ram a { font-size: var(--footer-size, 14px); }
.ram {margin-top:10px; color: var(--color-3, --black);}
.footerimg {width:100px; height: auto;}
.footer h2 {color: var(--white) !important;}


/* ------------------------------------------------------------------------------------------ */
/* -------------------------------------- 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(--color-14);}
.back-to-top i;hover, .back-to-top i:active, .back-to-top i:focus {color: var(--color-12);}


/* ------------------------------------------------------------------------------------------ */
/* -------------------------------------- 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;}

:root{	
	--xsmall: 14px;
	--small: 16px;
	--medium: 1.2rem;
	--large: 1.8rem;
	--standard: 18px;
	--bodytext: 18px;
	--h1: 2.375rem /*83.2px*/;
	--h2: 2rem /*56px*/;
	--h3: 1.7rem /*40px*/;
	--h4: 1.5rem /*32px*/; 
	--h5: 1.2rem /*24px*/;
	--h6: 1.2rem /*16px*/;
	}	
	
	
	
}


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

	
	
}

/* -------- BOOTSTRAP TABLET XS -----------------*/
@media only screen and (max-width: 575px)
{
	
}