/*
 Theme Name:     2Special
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    2Special customizations
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/

@import url("../Divi/style.css");

/* =Theme customization starts here
------------------------------------------------------- */

/* ------------------------------ START BASICS ------------------------------*/

html,
body, p {
   /* height: 100%;*/
    color: var(--color-third);
    font-weight: 400;
	line-height: 200%;
	font-family: "bio-sans", sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 16px;
}

body {
	font-size: 16px;
}

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

strong {
    font-weight: 700;
}

:root {

    /*------------------- DEFINE COLORS IN RGB ----------------*/
    --RGB-color-first: 11, 107, 118;
    /*DARK GREEN*/

    --RGB-color-second: 8, 88, 100;
    /*LIGHT GREEN*/

    --RGB-color-third: 218, 158, 86;
    /*GREY*/

    --RGB-color-fourth: 247, 246, 238;
    /*Fel-green*/

    /*--------------- DEFINE COLORS SHORTCODE -----------------*/
	
    --color-first: rgb(var(--RGB-color-first));
    --color-second: rgb(var(--RGB-color-second));
    --color-third: rgb(var(--RGB-color-third));
    --color-fourth: rgb(var(--RGB-color-fourth));

    /*---------- DEFINE OPACITY STEPS COLOR PRIMARY -----------*/
	
    --color-first-10: rgba(var(--RGB-color-first), .1);
    --color-first-20: rgba(var(--RGB-color-first), .2);
    --color-first-30: rgba(var(--RGB-color-first), .3);
    --color-first-40: rgba(var(--RGB-color-first), .4);
    --color-first-50: rgba(var(--RGB-color-first), .5);
    --color-first-60: rgba(var(--RGB-color-first), .6);
    --color-first-70: rgba(var(--RGB-color-first), .7);
    --color-first-80: rgba(var(--RGB-color-first), .8);
    --color-first-90: rgba(var(--RGB-color-first), .9);
    --color-first-95: rgba(var(--RGB-color-first), .95);

    /*---------- DEFINE OPACITY STEPS COLOR second ----------*/
    --color-second-10: rgba(var(--RGB-color-second), .1);
    --color-second-20: rgba(var(--RGB-color-second), .2);
    --color-second-30: rgba(var(--RGB-color-second), .3);
    --color-second-40: rgba(var(--RGB-color-second), .4);
    --color-second-50: rgba(var(--RGB-color-second), .5);
    --color-second-60: rgba(var(--RGB-color-second), .6);
    --color-second-70: rgba(var(--RGB-color-second), .7);
    --color-second-80: rgba(var(--RGB-color-second), .8);
    --color-second-90: rgba(var(--RGB-color-second), .9);
    --color-second-95: rgba(var(--RGB-color-second), .95);

    /*---------- DEFINE OPACITY STEPS COLOR third ----------*/
    --color-third-10: rgba(var(--RGB-color-third), .1);
    --color-third-20: rgba(var(--RGB-color-third), .2);
    --color-third-30: rgba(var(--RGB-color-third), .3);
    --color-third-40: rgba(var(--RGB-color-third), .4);
    --color-third-50: rgba(var(--RGB-color-third), .5);
    --color-third-60: rgba(var(--RGB-color-third), .6);
    --color-third-70: rgba(var(--RGB-color-third), .7);
    --color-third-80: rgba(var(--RGB-color-third), .8);
    --color-third-90: rgba(var(--RGB-color-third), .9);
    --color-third-95: rgba(var(--RGB-color-third), .95);

    /*---------- DEFINE OPACITY STEPS COLOR fourth ----------*/
    --color-fourth-10: rgba(var(--RGB-color-fourth), .1);
    --color-fourth-20: rgba(var(--RGB-color-fourth), .2);
    --color-fourth-30: rgba(var(--RGB-color-fourth), .3);
    --color-fourth-40: rgba(var(--RGB-color-fourth), .4);
    --color-fourth-50: rgba(var(--RGB-color-fourth), .5);
    --color-fourth-60: rgba(var(--RGB-color-fourth), .6);
    --color-fourth-70: rgba(var(--RGB-color-fourth), .7);
    --color-fourth-80: rgba(var(--RGB-color-fourth), .8);
    --color-fourth-90: rgba(var(--RGB-color-fourth), .9);
    --color-fourth-95: rgba(var(--RGB-color-fourth), .95);

    --border-radius: clamp(16px, 0.75vw, 24px);
	--border-radius-s: calc(var(--border-radius) / 2);
	--icon-size: 26px;
}
	.shadow{
	webkit-box-shadow: 0 .2rem 1rem #0f434c;
    box-shadow: 0 .2rem 1rem #0f434c;
	}


  /*-------------------- grids ------------------*/
	
	
  /*------------------ colomns ------------------*/

  --column-count-1: repeat(auto-fill, minmax(100%, 1fr));
  --column-count-1-gap: .5rem;	
	
  --column-count-2: repeat(auto-fill, minmax(45%, 1fr));
  --column-count-2-gap: .5rem;

  @media only screen and (max-width: 980px) {
    --column-count-2: repeat(auto-fill, minmax(100%, 1fr));
    --column-count-2-gap: .5rem;
  }
	
  --column-count-3: repeat(auto-fill, minmax(27%, 1fr));
  --column-count-3-gap: .5rem;

  @media only screen and (max-width: 980px) {
    --column-count-3: repeat(auto-fill, minmax(45%, 1fr));
    --column-count-3-gap: .5rem;
  }	
}

/*------------------ end colomns ------------------*/
/*-------------------- end grids ------------------*/
	

/*------------------ START TRANSITIONS--------------*/
  
.transition-all, .transition-all:hover{
	transition: all .5s;
}

.transition-bg-color, .transition-bg-color:hover {
	transition: background-color 0.5s ease;
}

/*------------------ END TRANSITIONS--------------*/


/*----------------- DEFINE TEXT SIZES ----------------------*/


h1,
h2,
h3,
h4 {
    padding-bottom: unset;
}


h1 {
    font-size: clamp(28px, 4vw, 4rem);
	font-weight: 100;
	line-height: 130%;
   /* font-weight: 500;
    */
}



.h1-arrow,
.h1-arrow h1,
.h1-arrow .et_pb_text_inner {
    width: 100%;
}


.h1-size-l h1 {
    font-size: clamp(2.25rem, 9vw, 9vw);
}

.h1-size-m h1 {
    font-size: clamp(3rem, 6vw, 6vw);
}

.h1-size-s h1 {
    font-size: clamp(2.5rem, 2vw, 2vw);
}


h2 {
    font-size: clamp(1.75rem, 2.5vw, 38px)!important;
	margin-bottom: clamp(1rem, 1.5vw, 1.5rem) !important;
    font-weight: 300;
    line-height: 130%;

}

.h2-size-l h2 {
	    font-size: clamp(24px, 3vw, 3rem)!important;
    font-weight: 800!important;
    line-height: 120%;
	text-transform:uppercase;
	
}

.h2-size-m h2 {
    font-size: clamp(1.75rem, 3vw, 3vw);
}

.h2-size-s h2 {
    font-size: clamp(1.125rem, 2.5vw, 38px)!important;
    /*text-transform: uppercase;
    letter-spacing: 1.1px;*/
    line-height: 120%;
}


h3 {
    font-size: 18px !important;
    line-height: 150%;
	font-weight:700;
	margin-top:1rem;

}

.h3-size-s h3 {
    font-size: clamp(1.25rem, 1vw, 1vw) !important;
    font-weight: 600;
    line-height: 150%;
}

h4 {
    font-size: clamp(18px, 1.5vw, 24vw) !important;
    font-weight: normal;
	line-height: 150%;
}

.p-roboto p{
font-family: 'Roboto Slab', Georgia, "Times New Roman", serif;
	font-weight:100;
}

.p-size-xl p, .p-size-xl {
    font-size: clamp(1rem, 1.4vw, 1.4rem);
	/*line-height:130%;*/
	font-weight:300;
}

.p-size-l p {
    font-size: clamp(18px, 2vw, 32px);
	font-weight:300;
	/*line-height:130%;*/
}

.p-size-m p {
    font-size: 1.2rem;;
	/*line-height:130%;*/
}




.p-size-s p, .p-size-s, .link-size-s a {
    font-size: clamp(0.9rem, 0.9vw, 0.9rem);
}

.p-uppercase p, .p-uppercase, .link-uppercase a {
	text-transform:uppercase!important;
}

.text-align-center h1,
.text-align-center h2,
.text-align-center h3,
.text-align-center h4,
.text-align-center h5,
.text-align-center p,
.text-align-center span,
.text-align-center a {
    text-align: center;
}



.text-semibold {
    font-weight: 600;
}

.text-bold {
    font-weight: 700;
}

.border-radius, .border-radius.et_pb_image img {
	border-radius: var(--border-radius);
	overflow: hidden;
}

.border-radius-s, .border-radius-s.et_pb_image img, .custom-button.border-radius-s a {
	border-radius: var(--border-radius-s)!important;
	overflow: hidden;
}

/*---------------DEFINE TEXT COLORS -------------------------*/

.h1-color-first h1,
.h2-color-first h2,
.h3-color-first h3,
.h4-color-first h4,
.span-color-first span,
.link-color-first a,
.text-color-first p,
.text-color-first {
    color: var(--color-first) !important;
}

.h1-color-second h1,
.h2-color-second h2,
.h3-color-second h3,
.h4-color-second h4,
.span-color-second span,
.link-color-second a,
.text-color-second p,
.text-color-second,
.text-strong-color-second strong{
    color: var(--color-second) !important;
}

.h1-color-third h1,
.h2-color-third h2,
.h3-color-third h3,
.h4-color-third h4,
.span-color-third span,
.link-color-third a,
.text-color-third p,
.text-color-third,
.text-strong-color-third strong{
    color: var(--color-third) !important;
}

.link-color-third a {
	text-decoration:underline;
	font-weight:600;
	transition: all 0.5s ease;
}

.link-color-third a:hover {
	opacity:0.6;
}

.h1-color-fourth h1,
.h2-color-fourth h2,
.h3-color-fourth h3,
.h4-color-fourth h4,
.span-color-fourth span,
.link-color-fourth a,
.text-color-fourth p,
.text-color-fourth,
.text-strong-color-fourth strong{
    color: var(--color-fourth) !important;
}

.h1-color-white h1,
.h2-color-white h2,
.h3-color-white h3,
.h4-color-white h4,
.span-color-white span,
.link-color-white a,
.text-color-white,
.text-color-white p {
    color: white;
}

.h1-color-black h1,
.h2-color-black h2,
.h3-color-black h3,
.h4-color-black h4,
.span-color-black span,
.link-color-black a,
.text-color-black,
.text-color-black p {
    color: black;
}





/*--------------------  START BACKGROUND COLORS ----------------------------*/
.bg-none {
    background-color: rgba(0,0,0,0)!important;
}

.bg-color-first {
    background-color: var(--color-first);
}

.bg-color-first-20 {
    background-color: var(--color-first-20);
}

.bg-color-second {
    background-color: var(--color-second);
}
.bg-color-second-10 {
    background-color: var(--color-second-10);
}

.bg-color-second-90 {
    background-color: var(--color-second-90);
}
.bg-color-second-80 {
    background-color: var(--color-second-80);
}
.bg-color-second-70 {
    background-color: var(--color-second-70);
}

.bg-color-third {
    background-color: var(--color-third);
}
.bg-color-third-10 {
    background-color: var(--color-third-10);
}

.bg-color-fourth {
    background-color: var(--color-fourth);
}

.bg-color-fourth-90 {
    background-color: var(--color-fourth-90);
}
.bg-color-fourth-80 {
    background-color: var(--color-fourth-80);
}
.bg-color-fourth-70 {
    background-color: var(--color-fourth-70);
}

.bg-color-white {
    background-color: rgba(255,255,255,1)!important;
}

.bg-color-white-80 {
    background-color: rgba(255,255,255,.8)!important;
}


.bg-gradient {
	    background-image: linear-gradient(90deg,var(--color-second) 66%,white 66%)!important;
}

/* -------------------- start template styles --------------------------*/

/*header {
	z-index:9;
	position:absolute;
}*/

.et_pb_section {
    padding-top: clamp(1.85rem, 3vw, 48px) !important;
    padding-bottom: clamp(1.85rem, 3vw, 48px) !important;
}

.et_pb_row {
    padding-top: clamp(1.85rem, 3vw, 48px) !important;
    padding-bottom: clamp(1.85rem, 3vw, 48px) !important;
	max-width: 1120px;
    /*width: 100% !important;
    padding-left: clamp(10vw, 10vw, 160px)!important;
    padding-right: clamp(10vw, 10vw, 160px)!important;
	max-width: 1600px;*/
}

@media only screen and (max-width: 768px) {
	.et_pb_row{
	/*padding-left: clamp(32px, 2.5vw, 40px)!important;
    padding-right: clamp(32px, 2.5vw, 40px)!important;*/
		width:90%;
	}
}

.et_pb_row.row-header:after {
	display:none;
}

.row-full {
	max-width:100%!important;
	width: 100%;
}

@media only screen and (min-width: 981px) {
	.row-m{
		max-width: clamp(800px, 90%, 1280px)!important;
		margin:auto;
		max-width:1280px;
	}
	
	.row-s{
		max-width: clamp(500px, 85%, 1440px)!important;
		margin:auto;
	}
		.row-xs {
		max-width: clamp(500px, 50%, 1200px)!important;
		margin:auto;
	}
}



/*
@media only screen and (min-width: 1591px) {
.et_pb_row {
    padding-left: 160px!important;
    padding-right: 160px!important;
}

}*/






/*START HEADER ****************************** HEADER **************************/

/*custom margin max screen size*/

.section-main-menu {
	height:80px;
}


.section-main-menu .et_pb_row {
    width: 100% !important;
    max-width: 1120px;
}

@media only screen and (max-width: 1199px) {
.section-main-menu {
	height:72px;
}
	
	.et_pb_row, .section-main-menu .et_pb_row {
   /* width: 100% !important;
    max-width: 1120px;*/
		width: 100% !important;
    max-width: calc(100% - 5.75rem);
}
}

.section-main-menu.bg-transparent {
	background-color: rgba(255,0,0,0)!important;
}

.section-main-menu .et_pb_menu {
	background-color: rgba(255,0,0,0)!important;
}

.section-main-menu .et_pb_menu .et-menu {
    margin-left: 0px;
    margin-right: 0px;
}

.section-main-menu .et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li {
    margin-top: 0px;
	margin-left:0px;
	font-size:16px;
	padding-left: 11px;
    padding-right: 37px;
}
}

.section-main-menu .et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li:first-child {
margin-left:0!important;	
}

.section-main-menu .et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li>a {
    padding-bottom: 0px;
}

.section-main-menu .et_pb_menu .et-menu-nav>ul, .et_pb_menu--without-logo .et_pb_menu__menu>nav>ul  {
	padding-left:0!important;
}

.section-main-menu .et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li.highlight>a {
    padding: 1rem;
	background: var(--color-first);
	color:white;
}

/* hover menu-item */
.main-menu ul li a:hover {
	color:var(--color-third)!important;
}


/* active menu-item */
.main-menu ul li.current_page_item a {
	color:var(--color-third)!important;
}

.section-main-menu .et_mobile_nav_menu {
	display:none!important;
}

.section-main-menu .et_pb_menu__menu {
	display:flex!important;
}

.section-main-menu .main-menu a {
	display: flex;
    align-items: center;
    padding-bottom: 0;
	font-weight:500;
	
	font-family: "bio-sans", sans-serif;
	font-weight: 400;
	font-style: normal;
	
}

.section-main-menu .et-menu .menu-item-has-children>a:first-child:after {
    display: flex;
    align-items: center;
    height: 100%;
}

.section-main-menu .et_pb_menu .nav li ul.sub-menu {
	background-color:var(--color-second)!important;
	box-shadow: none;
	border: none;
    top: calc(100% - 0px) !important;
}

.section-main-menu .et_pb_menu .nav li ul.sub-menu a {
	color:white!important;
}

.section-main-menu .et_pb_row:after {
	display:none;
	}





.hide-scrollbar {
	overflow:hidden;
  }

/*---- customization - size van logo */
.logo .et_pb_image_wrap {
    width:144px;
  }  
  
.line {
  display: block;
  height: 3px;
  width: 100%;
  background: white;
  opacity: 1;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  margin-bottom: 4px;

}

.line-2 {
	/*top: clamp(10px, 0.75vw, 0.75vw);*/
}

.line-3 {
	margin-bottom: 0;
}

.hamburger-menu ul li a{
	text-align: left;
	line-height:140%;
}

.hamburger.open .line {
	background:white;	
}

.hamburger.open .line-1 {
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
  margin-bottom: 0;
  position: absolute;
  /*background: var(--color-first);*/
}

.hamburger.open .line-2 {
	opacity:0;
  height:0;
  margin:0;
  /*margin-bottom: 0;*/
  transition-delay: 100ms;
   transition: all 0.5s ease;
}

.hamburger.open .line-3 {
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
  margin-bottom: 0;
  position: absolute;
 /* background: var(--color-first);*/
}  


.slide-in-menu-container {
  -webkit-transition: all 0.3s ease !important;
  -moz-transition: all 0.3s ease !important;
  -o-transition: all 0.3s ease !important;
  -ms-transition: all 0.3s ease !important;
  transition: all 0.3s ease !important;
  opacity: 0;
  height:100vh;
  left:100%!impomrtant;
  overflow-y:scroll;
  padding:5rem!important;
  padding-bottom:10rem;
	width:50%;
}

@media only screen and (max-width: 980px) {
	.slide-in-menu-container {
	  padding-left: 48px!important;
		width:100%;
	}
}

.slide-in-menu-container .et_pb_menu .et_pb_menu__menu {
    display: block !important;
}

.slide-in-menu-container .et_pb_menu .et_pb_menu__menu .et-menu li {
	width:100%;
}

.slide-in-menu-container .et_pb_menu .et_pb_menu__menu .et-menu li>a {
	font-size:clamp(1rem, 2vw, 24px);
	margin-bottom:0;
}

.slide-in-menu-container  .et_pb_menu .et_mobile_nav_menu {
    display: none !important;
}
  
.slide-in-menu-open {
  opacity: 1 !important;
  left:50%!important;
}

.slide-in-menu-container .sub-menu {
	padding-left:2rem!important;
}

.slide-in-menu-container {
	padding-left:clamp(2rem, 4vw, 4rem);!important;
}



@media (max-width: 980px) {  
	.slide-in-menu-open {
		left:0!important;
	}
}
  
.hamburger {
  width: clamp(55px, 4.5vw, 55px);
  height: clamp(50px, 4.5vw, 50px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:rgba(255, 255, 255, 0);
  padding:clamp(15px, 1vw, 16px);
  cursor: pointer;
  margin-left:2rem;
}


  
  
.hidden {
    opacity: 0;
    /*transition: all .5s;*/
}
  


@media (max-width: 980px) {  
.row-mobile-1_2 .et_pb_column {
		width:50%!important;		    
  }  
  .hamburger {
    background:none;
    padding:0;
    width:24px;
    height:25px;
  }  

  .line {
 /* background: white;*/
  
}
	/*.hamburger:before {
		content:"menu";
		display: block;
		float:left;
		
		background:red;
	}*/
	
  }

.section-header-image {
	height:37.5vw;
	max-height:600px;
	min-height:175px;
}

.section-header-image:before, .section-header-image:after {
    width: 7.9375vw;
    height: 14.5vw;
    content: '';
	background-image: url(https://tonify.nl/wp-content/themes/Divichild/images/swirl.svg);
	background-size: contain;
	padding-right: clamp(32px, 10vw, 100px);
    background-repeat: no-repeat;
}

.section-header-image:after {
	transform: rotate(180deg);
}

.section-header-image-home {
	
}

.section-header-image-content {
	
}

@media (min-width: 981px) {  
	.section-header-image-home{
	height:35vw;
	min-height:250px;
	}
	
	.section-header-image-content {
	height:25vw;
	min-height:130px;
	max-height:480px;	
	}
}

@media (max-width: 640px) { 
	.section-header-image .et_pb_row{
	flex-direction:column;	
	}
	
	.section-header-image h1 {
		margin-bottom:0.5rem;
	}
}

	




.custom-menu.et_pb_menu .et-menu-nav>ul, .et_pb_menu--without-logo .et_pb_menu__menu>nav>ul {
	padding-left: 0!important;
    margin-left: 0!important;
}

.custom-menu ul li {
	padding-left:0!important;
	padding-right:1rem!important;
}

.custom-menu ul li a {
	display: flex;
    font-size:1rem;
    align-items: center;
	color:white;
	line-height: 110%;
	font-weight:500;
}

.custom-menu ul li a:before {
	display: block;
    content: '';
    -webkit-mask-size: cover;
    -webkit-mask: url(https://novumnetwork.nl/wp-content/themes/Divichild/images/bullit.svg) no-repeat 50% 50%;
    mask: url(https://novumnetwork.nl/wp-content/themes/Divichild/images/bullit.svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    background-color: var(--color-fourth);
    width: 26px;
    height: 26px;
	min-width:26px;
	margin-right:0.5rem;
}

.custom-menu-bullits-color-first ul li a:before {
	background-color: var(--color-first);
}

.custom-menu-bullits-color-white ul li a:before {
	background-color: var(--color-first);
}




.section-main-menu li.custom-button {
	align-items: center!important;
	display: flex!important;
	
}

/*
@media (max-width: 640px) { 
	.section-header-image .custom-menu ul li	{
		width:100%!important;
	}
	
	.section-header-image .custom-menu 	{
		margin-bottom:2rem!important;
	}
}

@media (min-width: 981px) { 
.section-main-menu li {
	height: 120px;

}
}

.section-main-menu li ul li {
	height: unset;

}

.section-main-menu li ul li a {
	padding-bottom:6px!important;

}
*/
.custom-menu.et_pb_menu .et_pb_menu__menu, .slide-in-menu-container .et_pb_menu .et_pb_menu__menu {
  	display: block !important;
}

.custom-menu.et_pb_menu .et_mobile_nav_menu, .slide-in-menu-container .et_mobile_nav_menu {
  	display: none !important;
}



/* -------------------------------------------------------------------***** END HEADER ***** */

/*START BODY ****************************** BODY **************************/

#et-main-area {
	z-index: 1;
    position: relative;
}


/*.section-header-image, .margin-top-for-sticky-menu{
	margin-top:120px!important;
}

@media (max-width: 980px) {  
	.section-header-image, .margin-top-for-sticky-menu {
	margin-top:clamp(65px, 15.5dvw, 100px)!important;
}
}
*/
/*.section-body .et_pb_section {
	width:100%;
}

.section-body .et_pb_section .et_pb_row {
	padding-left:0!important;
	padding-right:0!important;
}


.intro-text, .intro-text p{
	font-size:1.25rem!important;
	line-height:160%!important;
	font-weight:300!important;
}
*/
.checkmarks ul {
    list-style-type: none!important;
    padding: 0!important;
    padding-bottom: clamp(1rem, 1.75vw, 32px)!important;
	padding-bottom: 0!important;
    float: left;
	padding-top: clamp(0.5rem, 0.5vw, 16px)!important;
}



.checkmarks ul li {
   
    margin-bottom: 0.5rem!important;
    margin-right: 2vw;
    min-height: 1.75rem;
    display: flex;
    align-items: center;
    width: 100%;
    clear: both;
    line-height: 200%!important;
	font-size:1rem;
}

.checkmarks ul li:last-child {
    /* background: red; */
    margin-bottom: 0 !important;
}

.checkmarks li:before {
    -webkit-mask: url(https://tonify.nl/wp-content/themes/Divichild/images/swirl.svg) no-repeat 50% 50%;
    mask: url(https://tonify.nl/wp-content/themes/Divichild/images/swirl.svg) no-repeat 50% 50%;
    background-color: white;
    display: block;
    content: '';
    min-width: 24px!important;
    height: 20px!important;
    float: left;
    margin-right: clamp(8px, 0.5vw, 0.5vw)!important;
	margin-top: 3px;
}

.checkmarks-color-first li:before {
	background-color: var(--color-first);
}

.et_pb_blurb_content {
	display:flex!important;
}

.et_pb_main_blurb_image {
margin-top: auto;
    margin-bottom: auto;
	    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

.dp-dfg-custom-content {
	visibility: hidden;
	opacity:0;
	transition: all 300ms ease 0ms!important;
}

.dp-dfg-items article:hover .dp-dfg-custom-content {
	visibility: visible;
	opacity:1;
	transition: all 300ms ease 0ms!important;cursor:pointer;
}


.dp-dfg-custom-content {
	background-color:rgba(255,255,255,0.95);
	position:absolute!important;
	height:100%;
	width: 100%;
	display:flex;
	padding:2rem!important;
}

.dp-dfg-item h2 {
	margin-bottom:0.5rem!important;
	margin-top:0.5rem!important;
	text-align:center;
	font-size:20px!important;
}

/*.custom-icon {
	display: flex;
    justify-content: center;
	height: 60px;
}

.custom-icon:before {
	font-size: 48px;
	font-family: 'streamline-small-cs';
	color:var(--color-first);
	display: flex;
    align-items: center;
}

.icon-service::before {
    content: "\2e";
}

.icon-expertise::before {
    content: "\6c";
}

.icon-schadeherstel::before {
    content: "\26";
}

.icon-garantie::before {
    content: "\28";
}

.icon-autoservice::before {
    content: "\40";
}

.icon-reclame::before {
    content: "\34";
}

.icon-spotrepair::before {
    content: "l";
}

.icon-uitdeuken::before {
    content: "\6e";
}

.icon-voorruit::before {
    content: "\52";
}

.row-home-services h2 {
	padding-top:1rem;
}

.hexagon {
    position: relative;
    width: 116px;
    height: 66.97px;
    background-color: transparent;
    margin: 33.49px 0;
    border-left: solid 2px #1E69B8;
    border-right: solid 2px #1E69B8;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    transform: rotate(0.0001deg);
    -webkit-transform: rotate(0.0001deg);
    -ms-transform: rotate(0.0001deg);
    -webkit-backface-visibility: hidden;
	margin-bottom: 33.49px;
}

.hexagon::before {
    top: -41.0122px;
    border-top: solid 2.8284px #1E69B8;
    border-right: solid 2.8284px #1E69B8;
	    content: "";
    position: absolute;
    z-index: 1;
    width: 82.02px;
    height: 82.02px;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background-color: inherit;
    left: 14.9878px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.hexagon::after {
    bottom: -41.0122px;
    border-bottom: solid 2.8284px #1E69B8;
    border-left: solid 2.8284px #1E69B8;
	    content: "";
    position: absolute;
    z-index: 1;
    width: 82.02px;
    height: 82.02px;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background-color: inherit;
    left: 14.9878px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.row-merken img {
	opacity:0.6;
	transition: all 300ms ease 0ms!important;
}

.row-merken img:hover {
	opacity:1;
	transition: all 300ms ease 0ms!important;
}




.row-verzekeraars img {
	opacity:1;
	transition: all 300ms ease 0ms!important;
}

.row-verzekeraars img:hover {
	opacity:0.6;
	transition: all 300ms ease 0ms!important;
}

@media (max-width: 980px) {  
	.row-merken .et_pb_image_wrap, .row-verzekeraars .et_pb_image_wrap {
		max-width:50%;
		width:50%;
		margin:auto;
}
	
	.row-merken .et_pb_module, .row-verzekeraars .et_pb_module {
		text-align: center;
	}
}

.row-services .et_pb_column{
	display:grid;
	grid-template-columns: var(--column-count-2);
    column-gap: var(--column-count-2-gap);
    row-gap: var(--column-count-2-gap);
}

.row-services .et_pb_code {
	background:white;
	padding:2rem;
	margin-bottom:0!important;
}

.row-services .et_pb_code .et_pb_code_inner {
	display:flex;
	align-items: center;
}

.row-services .et_pb_code .et_pb_code_inner .hexagon {
	min-width: 88px;
}

.hexagon.small {
    width: 90px;
    height: 51.96px;
    margin: 25.98px auto;
    border-left: solid 1px #E2E6E7;
    border-right: solid 1px #E2E6E7;
}

.hexagon.small::before {
    top: -31.8198px;
    border-top: solid 1.4142px #E2E6E7;
    border-right: solid 1.4142px #E2E6E7;
}

.hexagon.small::before, .hexagon.small::after {
    width: 63.64px;
    height: 63.64px;
    left: 12.1802px;
}

.hexagon.small::after {
    bottom: -31.8198px;
    border-bottom: solid 1.4142px #E2E6E7;
    border-left: solid 1.4142px #E2E6E7;
}

.row-services div:first-child {
	
}

.row-services div.content{
	padding-left:1rem;
}*/



/* -------------------------------------------------------------------***** END BODY ***** */

/*START FOOTER ****************************** FOOTER **************************/
@media (min-width: 981px) {  
.footer-menu ul li {
	width:100%;
	justify-content: flex-end;
}
}
.footer-menu ul li a{
	font-size:1rem!important;
	padding-bottom: 0!important;
    line-height: 175%;
	text-align: left;
}

.footer-menu.et_pb_menu ul li, .footer-menu .et_pb_menu__menu {
  	/*width: 100% !important;*/
	padding-left:0!important;
	margin-top:0!important;
}

@media (max-width: 980px) {  
	.footer-menu.et_pb_menu ul li, .footer-menu .et_pb_menu__menu {
  	width: 100% !important;
}
}

.footer-menu.et_pb_menu .et_pb_menu__menu, .slide-in-menu-container .et_pb_menu .et_pb_menu__menu {
  	display: block !important;
}

.footer-menu.et_pb_menu .et_mobile_nav_menu, .slide-in-menu-container .et_mobile_nav_menu {
  	display: none !important;
}

.list li {

    list-style: none;
    padding-top: 1px;
    padding-bottom: 1px;
    font-family: 'Open Sans';
    font-size: 14px;
    line-height: 24px;
 
    border: none;
}

.list.simple li span {
    float: left;
    min-width: 40%;
}

ul.list.simple  {
    padding-left:0!important;
}

/*.section-footer p {
	font-size:15px;
}*/

.section-footer h3 {
	margin-top:0;
}

.section-footer .et_pb_column:last-child {
	min-width:200px;
}

.section-footer .et_pb_column:nth-child(2) {
	min-width:255px;
}
/* -------------------------------------------------------------------***** END FOOTER ***** */


/* ***** START CUSTOM BUTTONS *****----------------------------------------------------------------------------------------- */

/*.custom-form .gform_button {
    background: var(--color-first) !important;
    color: white !important;
    border: 0 !important;
	width:fit-content;
	border-radius:100px!important;
	margin-top:1rem!important;
	
}

.custom-form input.gform_button  {
	min-width:0;
	font-family: 'ancient_adregular'!important;
}

.gform_button:hover {
	background-color: var(--color-first) !important;
	cursor:pointer;
}

.header-buttons .et_pb_code_inner {
	display:grid;
	grid-template-columns: var(--column-count-2);
    column-gap: var(--column-count-2-gap);
    row-gap: var(--column-count-2-gap);
}
@media (max-width: 1280px) {  
	.header-buttons .et_pb_code_inner {
		grid-template-columns: var(--column-count-1);
	}
}*/

a.custom-button,
.custom-button a, .custom-form.custom-button input.gform_button {
   /* padding: 13px!important;
    line-height: 100%!important;*/
    text-align: center!important;
    display: flex!important;
    transition: all 300ms ease 0ms!important;
    height: 39px!important;
    transition: all 300ms ease 0ms!important;
	align-items: center;
	width:fit-content;
	border-radius:0!important;
	
	        padding: .3rem 1rem!important;
        font-size: 15.6px!important;
        font-weight: 600!important;
/*	line-height: 30.6px!important;*/
padding-bottom: 3.2px!important;
padding-left: 16px!important;
padding-right: 16px!important;
padding-top: 3.2px!important;
	border: 1px solid #da9e56!important;
}

.custom-form.custom-button input.gform_button {
	margin-top:2rem!important;	
}

.custom-button-center p {
	width:fit-content;
	margin: auto;
}

.custom-form .gform_footer {
	justify-content: center;
}

a.custom-button-wide,
.custom-button-wide a {
    width:100%;
	
}

/*.custom-button a:after {
    content: '';
    width: 1rem;
    position: absolute;
    float: right;
    margin-left: clamp(1.4rem, 1.4vw, 1.4vw);
    width: clamp(1rem, 1vw, 1vw);
    height: clamp(2rem, 2vw, 2vw);
}*/

.custom-button-color-first a {
    background: var(--color-first)!important;
    color: white!important;
}

.custom-button-color-white a {
    background: white!important;
    color: var(--color-first)!important;
}


a.custom-button:hover,
.custom-button a:hover { 
    opacity: 0.6;
}


.button-wide {
    width: 100%;
}

a.custom-button-icon {
	font-size:16px;
	font-weight:500;
}

.custom-button-icon a:before{
    /* display: inline-block; */
    content: '';
    /* min-width: clamp(26px, 2vw, 2vw); */
    /* height: 10px; */
    -webkit-mask-size: cover;
    -webkit-mask: url(https://novumnetwork.nl/wp-content/themes/Divichild/images/bullit.svg) no-repeat 50% 50%;
    mask: url(https://novumnetwork.nl/wp-content/themes/Divichild/images/bullit.svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    /* mask-size: cover; */
    background-color: white;
    /* transform: rotate(-90deg); */
    width: var(--icon-size);
    height: var(--icon-size);
	margin-right:var(--icon-size);
	font-size:16px;
}

.custom-button-icon-contact a:before{
	width: var(--icon-size);
    height: var(--icon-size);
    color: var(--color-fourth);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 15px;
	background-color:var(--color-first)!important;
	margin-right:8px;
}

a.custom-button-icon-phone:before{
	font-family: FontAwesome !important;
	font-weight: 900 !important;
	content: "\f095"!important;
	transform: rotate(90deg);
}

a.custom-button-icon-mail:before{
	font-family: FontAwesome !important;
	font-weight: 900 !important;
	content: "\f0e0"!important;
	
}


.custom-button-color-second a {
    background: var(--color-second);
    color: var(--color-first)!important;
}


.custom-button-color-second a:before {
	background-color: var(--color-first);
	
}

.custom-button-color-second a:hover {
    background: var(--color-second-70);
}

.custom-button-color-third a, .custom-form.custom-button-color-third input.gform_button {
    background: var(--color-third)!important;
    color: white;
}

.custom-form.custom-button-color-third input.gform_button:hover {
opacity:0.6!important;	
}

.custom-button-color-third a:hover {
    background: var(--color-third-70);
}

.custom-button-color-fourth a {
    background: var(--color-fourth);
    color: var(--color-first)!important;
}

.custom-button-color-fourth a:before {
	background-color: var(--color-first);
}

.custom-button-color-fourth a:hover {
    background: var(--color-fourth-70);
}

.custom-button-download a {
	padding: 8px 16px!important;
    margin-bottom: 0.5rem;
    font-size: 15px;
	font-weight: 500;
	background-color:#ddd!important;
	color:#333!important;
	justify-content: space-between;
}

.custom-button-download a:after{
	/*width: var(--icon-size);
    height: var(--icon-size);*/
  
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 15px;
	font-family: FontAwesome !important;
	font-weight: 900 !important;
	content: "\f019"!important;
}







.link-button-arrow a:after,
.link-button-arrow span:after {
    display: inline-block;
    content: '';
    width: 13px;
    margin-left: 5px;
    height: 10px;
    -webkit-mask-size: cover;
    -webkit-mask: url(https://spiegellicht.nl/wp-content/themes/Divichild/images/arrow.svg) no-repeat 50% 50%;
    mask: url(https://spiegellicht.nl/wp-content/themes/Divichild/images/arrow.svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: cover;
    background-color: var(--color-first);
}

.link-button-arrow-down a:after,
.link-button-arrow-down span:after {
   transform: rotate(0deg);
}

.link-button-arrow-right a:after,
.link-button-arrow-right span:after {
   transform: rotate(-90deg);
}

.link-button-back a:before {
   /* display: block;
    content: '';
    width: clamp(26px, 2vw, 2vw);
    height: clamp(1rem, 1.15vw, 1.15vw);
    -webkit-mask-size: cover;
    -webkit-mask: url(https://spiegellicht.nl/wp-content/themes/Divichild/images/arrow.svg) no-repeat 50% 50%;
    mask: url(https://spiegellicht.nl/wp-content/themes/Divichild/images/arrow.svg) no-repeat 50% 50%;
    mask-size: cover;
    background-color: white;
    float: left;
    margin-right: 0.75vw;
    transform: rotate(180deg);
    z-index: 999999999;*/
}

.link-button-back a:hover::before {
    background-color: var(--color-primary);
}

/* -----------------------------------------------------------------***** END CUSTOM BUTTONS ***** */

/* -----------------------------------------------------------------***** START CUSTOM BORDERS ***** */
.border-right {
    border-right: 2px solid white;
}

.border-left {
    border-left: 2px solid white;
}

.border-top {
    border-top: 1px solid black;
}

.border-bottom {
    border-bottom: 1px solid var(--color-fourth-50);
    margin: auto;
}
/* -----------------------------------------------------------------***** END CUSTOM BORDERS ***** */


/* ------------------------------ ***** START CUSTOM FORMS ***** ------------------------------*/

.custom-form .gform-theme--foundation .gform_fields{
grid-row-gap: 1rem;
}


.custom-form p.gform_required_legend {
	display:none;
}

.custom-form .gform-theme--framework .gform-field-label>.gfield_required {
   
}

.gf_login_links a:first-child {
	display:none;
}

.gform_heading {
    display: none !important;
}
.custom-form input,
.custom-form textarea {

}



.custom-form input[type=text], .custom-form input[type=email], .custom-form input[type=tel], .custom-form input[type=password], .custom-form input[type=textarea] {
    height: clamp(36px, 3vw, 50px)!important;
	padding: 0 16px!important;
	width:100%;
	border:1px solid var(--color-third)!important;
	background:white!important;
	box-shadow:none!important;
	border-radius:0!important;
}

.custom-form  textarea {
	padding: 10px 16px!important;
	width:100%;
	border:1px solid var(--color-third)!important;
	background:white!important;
	box-shadow:none!important;
	border-radius:0!important;
}

.custom-form input::placeholder {
  color: black;
}

.custom-form .gform_wrapper.gravity-theme .gfield_required {
    color: #999;
}



.gform_footer, .gform_wrapper.gravity-theme .gform_page_footer {
    margin: 0!important;
    padding: 8px 0!important;
}

.custom-form label {
	font-size:1rem!important;
	color: var(--color-first)!important;
	font-family: "bio-sans", sans-serif;
	font-weight:300!important;
}

.custom-form.custom-form-white label {
	color:white!important;
}

.gform-theme--framework .gform-field-label>.gfield_required {
	color:var(--color-first);
}

.custom-form .gform-theme--framework .gform-field-label>.gfield_required {
	color:white;
}

.gfield_required {
	display:none;
}

/*--------------------------------- END CUSTOM FORMS ------------------------------*/

/*START CUSTOM TOGGLE*/

.et_pb_toggle h5{
	color:var(--color-third)!important;
    /*font-size: clamp(16px, 1.25rem, 20px);*/
    font-weight: 500;	
	font-family: "bio-sans", sans-serif;
}

.et_pb_toggle_open h5 {
	font-weight: 600;	
}

.et_pb_toggle p {
	color:var(--color-third);
}

.et_pb_toggle_open p {
	color:var(--color-first);
}

.et_pb_toggle {
    border: none;
    border-bottom: 1px solid var(--color-third) !important;
    transition: 0.4s;
	margin-bottom: clamp(8px, 1vw, 16px)!important;	
}

.et_pb_toggle_close .et_pb_toggle_content {
    padding-right: 70px;
		animation-duration: 0;
	    transition: 0s;
}

.et_pb_toggle_open .et_pb_toggle_content {
    padding-right: 50px;
	animation-duration: 0;
	transition: 0s;
}



.et_pb_toggle_open{
    border-bottom: 1px solid var(--color-third) !important;
    }

.et_pb_toggle_title:before {
    font-size: clamp(18px, 2.25vw, 36px)!important;
    content: "3" !important;
    -webkit-transition: 0.3s;
    transition: 0.3s;
	color:var(--color-third);
}

.et_pb_toggle_open .et_pb_toggle_title:before {
    color: #d09e56;
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.et_pb_toggle_close {

	 background-color: rgba(255,0,0,0)!important;

    padding: 20px 20px 20px 0;
}

.et_pb_toggle_open {

	 background-color: #f5f4ea!important;
}

/*END CUSTOM TOGGLE*/

/* ------------------------------ START MARGINS ------------------------------*/


/*.vertical-height {
    height: clamp(320px, 55vw, 55vw);

}

.vertical-height-home {
    height: clamp(100vh, 100vh, 100vh);
}

@media only screen and (max-width: 980px) {
    .vertical-height-home {
        height: 50vh;
    }

}*/

.pt-0,
.template-standard .pt-0 {
    padding-top: 0 !important;
}

@media only screen and (min-width: 981px) {
    .pt-0-screen {
        padding-top: 0 !important;
    }
}

.pb-0,
.template-standard .pb-0 {
    padding-bottom: 0 !important;
}


.px-0 {
    padding-left: 0!important;
    padding-right: 0!important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


.p-0 {
    padding: 0 !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mr-0 {
    margin-right: 0 !important;
}



.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.m-0 {
    margin: 0 !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.mb-05 {
	margin-bottom: 0.5rem!important;
}


.pb-05 {
	padding-bottom: 0.5rem!important;
}



@media only screen and (min-width: 981px) {
    .pl-0-screen {
        padding-left: 0 !important;
    }

    .pr-0-screen {
        padding-right: 0 !important;
    }	
}



.pt-1 {
    padding-top: clamp(1rem, 1vw, 1vw) !important;
}

.pb-1 {
    padding-bottom: clamp(1rem, 1vw, 1vw) !important;
}

@media only screen and (max-width: 780px) {
	.pt-1 {
    padding-top: clamp(1%, 1vw, 1vw) !important;
}

.pb-1 {
    padding-bottom: clamp(1%, 1vw, 1vw) !important;
}
}


.px-1 {
    padding-left: clamp(1rem, 1vw, 1vw) !important;
    padding-right: clamp(1rem, 1vw, 1vw) !important;
}

.py-1 {
    padding-top: clamp(1rem, 1vw, 16px) !important;
    padding-bottom: clamp(1rem, 1vw, 16px) !important;
}

.pr-1 {
	padding-right:1rem;
}

.p-1 {
    padding: clamp(1rem, 1vw, 16px) !important;
}

.mt-1 {
    margin-top: clamp(1rem, 1vw, 1vw) !important;
}

.mb-1 {
    margin-bottom: clamp(1rem, 1vw, 1vw) !important;
}

.mr-1 {
    margin-right: clamp(1rem, 1vw, 1vw) !important;
}

.ml-1 {
    margin-left: clamp(1rem, 1vw, 1vw) !important;
}

.mx-1 {
    margin-left: clamp(1rem, 1vw, 1vw) !important;
    margin-right: clamp(1rem, 1vw, 1vw) !important;
}

.my-1 {
    margin-top: clamp(1rem, 1vw, 1vw) !important;
    margin-bottom: clamp(1rem, 1vw, 1vw) !important;
}

.m-1 {
    margin-top: clamp(1rem, 1vw, 1vw) !important;
}

@media only screen and (max-width: 980px) {
	.mb-1-screensize-m {
    margin-bottom: clamp(1rem, 1vw, 1vw) !important;
}
}

.py-1_5 {
	    padding-top: clamp(1.5rem, 1.5vw, 1.5vw) !important;
    padding-bottom: clamp(1.5rem, 1.5vw, 1.5vw) !important;
}

.pt-2 {
    padding-top: clamp(1.75rem, 2vw, 32px) !important;
}

.pb-2 {
    padding-bottom: clamp(1.75rem, 2vw, 2vw) !important;
}

.pl-2 {
	padding-left: clamp(1.75rem, 2vw, 2vw) !important;
}

.px-2 {
    padding-left: clamp(1.75rem, 2vw, 2vw) !important;
    padding-right: clamp(1.75rem, 2vw, 2vw) !important;
}

.py-2 {
    padding-top: clamp(2rem, 2vw, 2vw) !important;
    padding-bottom: clamp(2rem, 2vw, 2vw) !important;
}

.p-2 {
    padding: clamp(1.75rem, 2vw, 2vw) !important;
}

.mt-2 {
    margin-top: clamp(1.75rem, 2vw, 2vw) !important;
}

.mb-2 {
    margin-bottom: clamp(1.75rem, 2vw, 2vw) !important;
}


.mr-2 {
    margin-right: clamp(1.75rem, 2vw, 2vw) !important;
}

.mx-2 {
    margin-left: clamp(1.75rem, 2vw, 2vw) !important;
    margin-right: clamp(1.75rem, 2vw, 2vw) !important;
}

.my-2 {
    margin-top: clamp(1.75rem, 2vw, 2vw) !important;
    margin-bottom: clamp(1.75rem, 2vw, 2vw) !important;
}

.m-2 {
    margin-top: clamp(1.75rem, 2vw, 2vw) !important;
}

.px-2_5 {
	padding-left:clamp(32px, 2.5vw, 40px)!important;
	padding-right:clamp(32px, 2.5vw, 40px)!important;
}

.pl-2_5 {
	padding-left:clamp(32px, 2.5vw, 40px)!important;

}

.pr-2_5 {
	padding-right:clamp(32px, 2.5vw, 40px)!important;
}

.pt-3 {
    padding-top: clamp(2rem, 3vw, 3vw) !important;
}

.pb-3 {
    padding-bottom: clamp(2rem, 3vw, 3vw) !important;
}

.px-3 {
    padding-left: clamp(2rem, 3vw, 3vw) !important;
    padding-right: clamp(2rem, 3vw, 3vw) !important;
}

.py-3 {
    padding-top: clamp(2rem, 3vw, 3vw) !important;
    padding-bottom: clamp(2rem, 3vw, 3vw) !important;
}

.p-3 {
    padding-top: clamp(2rem, 3vw, 3vw) !important;
}

.mt-3 {
    margin-top: clamp(2rem, 3vw, 3vw) !important;
}

.mb-3 {
    margin-bottom: clamp(2rem, 3vw, 3rem) !important;
}

.mx-3 {
    margin-left: clamp(2rem, 3vw, 3vw) !important;
    margin-right: clamp(2rem, 3vw, 3vw) !important;
}

.my-3 {
    margin-top: clamp(2rem, 3vw, 3vw) !important;
    margin-bottom: clamp(2rem, 3vw, 3vw) !important;
}

.m-3 {
    margin-top: clamp(2rem, 3vw, 3vw) !important;
}


.pt-4 {
    padding-top: clamp(2.5rem, 4vw, 4vw) !important;
}

.pb-4 {
    padding-bottom: clamp(2.5rem, 4vw, 4vw) !important;
}

.px-4 {
    padding-left: clamp(2.5rem, 4vw, 4vw) !important;
    padding-right: clamp(2.5rem, 4vw, 4vw) !important;
}

.py-4 {
    padding-top: clamp(2.5rem, 4vw, 4vw) !important;
    padding-bottom: clamp(2.5rem, 4vw, 4vw) !important;
}

.p-4 {
    padding-top: clamp(2.5rem, 4vw, 4vw) !important;
}

.mt-4 {
    margin-top: clamp(2.5rem, 4vw, 4vw) !important;
}

.mb-4 {
    margin-bottom: clamp(2.5rem, 4vw, 4vw) !important;
}

.mx-4 {
    margin-left: clamp(2.5rem, 4vw, 4vw) !important;
    margin-right: clamp(2.5rem, 4vw, 4vw) !important;
}

.my-4 {

    margin-top: clamp(2.5rem, 4vw, 4vw) !important;
    margin-bottom: clamp(2.5rem, 4vw, 4vw) !important;
}

.m-4 {
    margin-top: clamp(2.5rem, 4vw, 4vw) !important;
}

.pt-5 {
    padding-top: clamp(3rem, 5vw, 5vw) !important;
}

.pb-5 {
    padding-bottom: clamp(3rem, 5vw, 5vw) !important;
}

.px-5 {
    padding-left: clamp(3rem, 5vw, 80px) !important;
    padding-right: clamp(3rem, 5vw, 80px) !important;
	
}

.py-5 {
    padding-top: clamp(3rem, 5vw, 5vw) !important;
    padding-bottom: clamp(3rem, 5vw, 5vw) !important;
}

.p-5 {
    padding-top: clamp(3rem, 5vw, 80px) !important;
}

.pr-5 {
    padding-right: clamp(3rem, 5vw, 80px) !important;
}

.pl-5 {
    padding-left: clamp(3rem, 5vw, 80px) !important;
}

@media only screen and (min-width: 981px) {

    .pl-5-screen {
        padding-left: 5vw !important;
    }

    .pr-5-screen {
        padding-right: 5vw !important;
    }

}

.mt-5 {
    margin-top: clamp(3rem, 5vw, 5vw) !important;
}

.mb-5 {
    margin-bottom: clamp(3rem, 5vw, 5vw) !important;
}

.mx-5 {
    margin-left: clamp(3rem, 5vw, 5vw) !important;
    margin-right: clamp(3rem, 5vw, 5vw) !important;
}

.my-5 {
    margin-top: clamp(3rem, 5vw, 5vw) !important;
    margin-bottom: clamp(3rem, 5vw, 5vw) !important;
}

.m-5 {
    margin-top: clamp(3rem, 5vw, 5vw) !important;
}



.pt-6 {
    padding-top: clamp(3.5rem, 6vw, 6vw) !important;
}

.pb-6 {
    padding-bottom: clamp(3.5rem, 6vw, 6vw) !important;
}

.px-6 {
    padding-left: clamp(3.5rem, 6vw, 6vw) !important;
    padding-right: clamp(3.5rem, 6vw, 6vw) !important;
}

.py-6 {
    padding-top: clamp(3.5rem, 6vw, 6vw) !important;
    padding-bottom: clamp(3.5rem, 6vw, 6vw) !important;
}

.p-6 {
    padding-top: clamp(3.5rem, 6vw, 6vw) !important;
}

.m-6 {
    margin-top: clamp(3.5rem, 6vw, 6vw) !important;
}

.mb-6 {
    margin-bottom: clamp(3.5rem, 6vw, 6vw) !important;
}

.mx-6 {
    margin-left: clamp(3.5rem, 6vw, 6vw) !important;
    margin-right: clamp(3.5rem, 6vw, 6vw) !important;
}

.my-6 {
    margin-top: clamp(3.5rem, 6vw, 6vw) !important;
    margin-bottom: clamp(3.5rem, 6vw, 6vw) !important;
}

.m-6 {
    margin-top: clamp(3.5rem, 6vw, 6vw) !important;
}

.pt-7 {
    padding-top: clamp(4rem, 7vw, 7vw) !important;
}

.pb-7 {
    padding-bottom: clamp(4rem, 7vw, 7vw) !important;
}

.px-7 {
    padding-left: clamp(4rem, 7vw, 7vw) !important;
    padding-right: clamp(4rem, 7vw, 7vw) !important;
}

.py-7 {
    padding-top: clamp(4rem, 7vw, 7vw) !important;
    padding-bottom: clamp(4rem, 7vw, 7vw) !important;
}

.p-7 {
    padding-top: clamp(4rem, 7vw, 7vw) !important;
}

.mt-7 {
    margin-top: clamp(4rem, 7vw, 7vw) !important;
}

.mb-7 {
    margin-bottom: clamp(4rem, 7vw, 7vw) !important;
}

.mx-7 {
    margin-left: clamp(4rem, 7vw, 7vw) !important;
    margin-right: clamp(4rem, 7vw, 7vw) !important;
}

.my-7 {
    margin-top: clamp(4rem, 7vw, 7vw) !important;
    margin-bottom: clamp(4rem, 7vw, 7vw) !important;
}

.m-7 {
    margin-top: clamp(4rem, 7vw, 7vw) !important;
}

.px-7_5 {
	padding-left:7.5vw!important;
	padding-right:7.5vw!important;
}

.pt-8 {
    padding-top: clamp(4.5rem, 8vw, 8vw) !important;
}

.pb-8 {
    padding-bottom: clamp(4.5rem, 8vw, 8vw) !important;
}

.px-8 {
    padding-left: clamp(4.5rem, 8vw, 8vw) !important;
    padding-right: clamp(4.5rem, 8vw, 8vw) !important;
}

.py-8 {
    padding-top: clamp(4.5rem, 8vw, 8vw) !important;
    padding-bottom: clamp(4.5rem, 8vw, 8vw) !important;
}

.p-8 {
    padding-top: clamp(4.5rem, 8vw, 8vw) !important;
}

.mt-8 {
    margin-top: clamp(4.5rem, 8vw, 8vw) !important;
}

.mb-8 {
    margin-bottom: clamp(4.5rem, 8vw, 8vw) !important;
}

.mx-8 {
    margin-left: clamp(4.5rem, 8vw, 8vw) !important;
    margin-right: clamp(4.5rem, 8vw, 8vw) !important;
}

.my-8 {
    margin-top: clamp(4.5rem, 8vw, 8vw) !important;
    margin-bottom: clamp(4.5rem, 8vw, 8vw) !important;
}

.m-8 {
    margin-top: clamp(4.5rem, 8vw, 8vw) !important;
}



.pt-9 {
    padding-top: clamp(5rem, 9vw, 9vw) !important;
}

.pb-9 {
    padding-bottom: clamp(5rem, 9vw, 9vw) !important;
}

.px-9 {
    padding-left: clamp(5rem, 9vw, 9vw) !important;
    padding-right: clamp(5rem, 9vw, 9vw) !important;
}

.py-9 {
    padding-top: clamp(5rem, 9vw, 9vw) !important;
    padding-bottom: clamp(5rem, 9vw, 9vw) !important;
}

.p-9 {
    padding-top: clamp(5rem, 9vw, 9vw) !important;
}

.mt-9 {
    margin-top: clamp(5rem, 9vw, 9vw) !important;
}

.mb-9 {
    margin-bottom: clamp(5rem, 9vw, 9vw) !important;
}

.mx-9 {
    margin-left: clamp(5rem, 9vw, 9vw) !important;
    margin-right: clamp(5rem, 9vw, 9vw) !important;
}

.my-9 {
    margin-top: clamp(5rem, 9vw, 9vw) !important;
    margin-bottom: clamp(5rem, 9vw, 9vw) !important;
}

.m-9 {
    margin-top: clamp(5rem, 9vw, 9vw) !important;
}

.pt-10 {
    padding-top: clamp(5.5rem, 10vw, 10vw) !important;
}

.pb-10 {
    padding-bottom: clamp(5.5rem, 10vw, 10vw) !important;
}

.px-10 {
    padding-left: clamp(5.5rem, 10vw, 10vw) !important;
    padding-right: clamp(5.5rem, 10vw, 10vw) !important;
}

.py-10 {
    padding-top: clamp(5.5rem, 10vw, 10vw) !important;
    padding-bottom: clamp(5.5rem, 10vw, 10vw) !important;
}

.pl-10 {
    padding-left: clamp(5.5rem, 10vw, 10vw) !important;
}

.pr-10 {
    padding-right: clamp(5.5rem, 10vw, 10vw) !important;
}

@media only screen and (min-width: 981px) {
	.pl-10-screen {
    padding-left: clamp(5.5rem, 10vw, 10vw) !important;
}
}


.p-10 {
    padding-top: clamp(5.5rem, 10vw, 10vw) !important;
}

.mt-10 {
    margin-top: clamp(5.5rem, 10vw, 10vw) !important;
}

.mb-10 {
    margin-bottom: clamp(5.5rem, 10vw, 10vw) !important;
}

.mx-10 {
    margin-left: clamp(5.5rem, 10vw, 10vw) !important;
    margin-right: clamp(5.5rem, 10vw, 10vw) !important;
}

.my-10 {
    margin-top: clamp(5.5rem, 10vw, 10vw) !important;
    margin-bottom: clamp(5.5rem, 10vw, 10vw) !important;
}

.m-10 {
    margin-top: clamp(5.5rem, 10vw, 10vw) !important;
}

.py-11 {
    padding-top: clamp(6rem, 11vw, 11vw) !important;
    padding-bottom: clamp(6rem, 11vw, 11vw) !important;
}

.py-12 {
    padding-top: clamp(6.5rem, 11vw, 11vw) !important;
    padding-bottom: clamp(6.5rem, 11vw, 11vw) !important;
}

.py-18 {
    padding-top: clamp(9.5rem, 15vw, 15vw) !important;
    padding-bottom: clamp(9.5rem, 15vw, 15vw) !important;
}

.py-20 {
    padding-top: clamp(14.5rem, 21vw, 21vw) !important;
    padding-bottom: clamp(14.5rem, 22vw, 22vw) !important;

}


.row-p3 {

    padding-left: 3vw !important;
    padding-right: 3vw !important;

}

@media only screen and (min-width: 1620px) {
	.px-l-0 {
		padding-left: 0!important;
    	padding-right: 0!important;
	}
}

@media only screen and (min-width: 981px) {
	.px-m-0 {
		padding-left: 0!important;
    	padding-right: 0!important;
	}
	
	.pr-m-5 {
		padding-right: clamp(3rem, 5vw, 80px) !important;
	}
	
	.pl-m-5 {
		padding-left: clamp(3rem, 5vw, 80px) !important;
	}
	.px-m-3 {
		padding-left: clamp(2rem, 3vw, 3vw) !important;
		padding-right: clamp(2rem, 3vw, 3vw) !important;
	}
}

@media only screen and (max-width: 980px) {
	.px-s-0 {
		padding-left: 0!important;
    	padding-right: 0!important;
	}
	
	.py-s-1 {
		padding-top: clamp(1rem, 1vw, 16px) !important;
		padding-bottom: clamp(1rem, 1vw, 16px) !important;
	}
	
	
}

@media only screen and (max-width: 768px) {
	.p-xs-1 {
		padding: 1rem!important;
	}
	
	.px-xs-05 {
		padding-left: clamp(8px, 0.5vw, 0.5rem) !important;
    	padding-right: clamp(8px, 0.5vw, 0.5rem) !important;
	}
	
	
	
}

/* ------ START FLEXBOX STYLES :-)------- */

.flex {
    display: flex;
}


.justify-content-space-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center !important;
}

.align-items-flex-start {
    align-items: flex-start!important;
}

.align-items-flex-end {
    align-items: flex-end;
}

.align-content-flex-start {
    align-content: flex-start!important;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-flex-start {
    justify-content: flex-start;
}

.justify-content-flex-end {
    justify-content: flex-end !important;
}

.flex-direction-column {
    flex-direction: column;
}

.flex-direction-row {
    flex-direction: row;
}

.flex-grow-1{
	flex-grow: 1;
}



.flex-wrap-wrap {
    flex-wrap: wrap;
}

.align-content-stretch {
	align-content:stretch;
}
.align-content-space-between {
align-content: space-between;
}

.align-content-space-around {
    align-content: space-around;
}

@media only screen and (max-width: 980px) {
	
	
}

@media only screen and (min-width: 981px) {
	.flex-screensize-l {
    display: flex;
	}
}

@media only screen and (min-width: 769px) {
	.flex-s {
    display: flex;
	}
}

.gap-size-1 {
	gap:1rem;
}

.gap-size-2 {
	gap:26px;
}

/* ------ END FLEXBOX STYLES :-)------- */