/*
 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");*/
@import url("https://use.typekit.net/ysl6avt.css");
 
/* =Theme customization starts here
------------------------------------------------------- */

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

html,body {
   height:100%;
   font-size:16px;
   color: var(--first);}
a {color:var(--second);}
p {color: var(--black);}

:root {
  --first: #F7921E; /*ORANGE*/
  --second: #006585; /*BLUE*/
  --black: #333;
  --borderRadius: 0.5rem;		
}

h1, h2, h3, h4, h5 {
	font-family: aller,sans-serif;
	font-weight: 700;
	font-style: normal;
}

h1 {font-size: clamp(1.5rem, 2vw, 2rem)!important;}
h2 {font-size:2.5rem;}
h3 {font-size:1.5rem;}


/* ------------------------------ END BASICS ------------------------------*/

/* ------------------------------ START COLORS ------------------------------*/

/*background colors*/
.bg-color-first {background-color:var(--first);}
.bg-color-second {background-color:var(--second);}
.bg-color-black {background-color:var(--black);}

/*text colors*/
.h1-color-first h1, .h2-color-first h2, .h3-color-first h3, .h4-color-first h4, .h5-color-first h5, span.color-first, .text-color-first p, .text-color-first, .link-color-first a {color:var(--first)!important;}
.h1-color-second h1, .h2-color-second h2, .h3-color-second h3, .h4-color-second h4, .h5-color-second h5, span.color-second, .text-color-second p, .text-color-second, .link-color-second a {color:var(--second)!important;}
.h1-color-black h1, .h2-color-black h2, .h3-color-black h3, .h4-color-black h4, .h5-color-black h5, span.color-black, .text-color-black p, .text-color-black, .link-color-black a {color:var(--black)!important;}
.h1-color-white h1, .h2-color-white h2, .h3-color-white h3, .h4-color-black h4, .h5-color-black h5, span.color-white, .text-color-white p, .text-color-white, .link-color-white a {color:white!important;}

/* ------------------------------ END COLORS ------------------------------*/



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

.padding-top-0 {padding-top:0!important;}
.padding-bottom-0 {padding-bottom:0!important;}
.padding-x-0 {padding-left:0!important; padding-right:0!important;}
.padding-y-0 {padding-top:0!important; padding-bottom:0!important;}
.padding-0 {padding-top:0!important;}
.margin-top-0 {margin-top:0!important;}
.margin-bottom-0 {margin-bottom:0!important;}
.margin-x-0 {margin-left:0!important; margin-right:0!important;}
.margin-y-0 {margin-top:0!important; margin-bottom:0!important;}
.margin-0 {margin-top:0!important;}

.padding-top-05rem {padding-top:0.5rem!important;}
.padding-bottom-05rem {padding-bottom:0.5rem!important;}
.padding-x-05rem {padding-left:0.5rem!important; padding-right:0.5rem!important;}
.padding-y-05rem {padding-top:0.5rem!important; padding-bottom:0.5rem!important;}
.padding-05rem {padding-top:0.5rem!important;}
.margin-top-05rem {margin-top:0.5rem!important;}
.margin-bottom-05rem {margin-bottom:0.5rem!important;}
.margin-x-05rem {margin-left:0.5rem!important; margin-right:0.5rem!important;}
.margin-y-05rem {margin-top:0.5rem!important; margin-bottom:0.5rem!important;}
.margin-05rem {margin-top:0.5rem!important;}

.padding-top-1rem {padding-top:1rem!important;}
.padding-bottom-1rem {padding-bottom:1rem!important;}
.padding-x-1rem {padding-left:1rem!important; padding-right:1rem!important;}
.padding-y-1rem {padding-top:1rem!important; padding-bottom:1rem!important;}
.padding-1rem {padding-top:1rem!important;}
.margin-top-1rem {margin-top:1rem!important;}
.margin-bottom-1rem {margin-bottom:1rem!important;}
.margin-x-1rem {margin-left:1rem!important; margin-right:1rem!important;}
.margin-y-1rem {margin-top:1rem!important; margin-bottom:1rem!important;}
.margin-1rem {margin-top:1rem!important;}

.padding-top-1rem {padding-top:1rem!important;}
.padding-bottom-1rem {padding-bottom:1rem!important;}
.padding-x-1rem {padding-left:1rem!important; padding-right:1rem!important;}
.padding-y-1rem {padding-top:1rem!important; padding-bottom:1rem!important;}
.padding-1rem {padding-top:1rem!important;}
.margin-top-1rem {margin-top:1rem!important;}
.margin-bottom-1rem {margin-bottom:1rem!important;}
.margin-x-1rem {margin-left:1rem!important; margin-right:1rem!important;}
.margin-y-1rem {margin-top:1rem!important; margin-bottom:1rem!important;}
.margin-1rem {margin-top:1rem!important;}

.padding-top-15rem {padding-top:1.5rem!important;}
.padding-bottom-15rem {padding-bottom:1.5rem!important;}
.padding-x-15rem {padding-left:1.5rem!important; padding-right:1.5rem!important;}
.padding-y-15rem {padding-top:1.5rem!important; padding-bottom:1.5rem!important;}
.padding-15rem {padding-top:1.5rem!important;}
.margin-top-15rem {margin-top:1.5rem!important;}
.margin-bottom-15rem {margin-bottom:1.5rem!important;}
.margin-x-15rem {margin-left:1.5rem!important; margin-right:1.5rem!important;}
.margin-y-15rem {margin-top:1.5rem!important; margin-bottom:1.5rem!important;}
.margin-15rem {margin-top:1.5rem!important;}

.padding-top-2rem {padding-top:2rem!important;}
.padding-bottom-2rem {padding-bottom:2rem!important;}
.padding-x-2rem {padding-left:2rem!important; padding-right:2rem!important;}
.padding-y-2rem {padding-top:2rem!important; padding-bottom:2rem!important;}
.padding-2rem {padding-top:2rem!important;}
.margin-top-2rem {margin-top:2rem!important;}
.margin-bottom-2rem {margin-bottom:2rem!important;}
.margin-x-2rem {margin-left:2rem!important; margin-right:2rem!important;}
.margin-y-2rem {margin-top:2rem!important; margin-bottom:2rem!important;}
.margin-2rem {margin-top:2rem!important;}

.padding-top-25rem {padding-top:2.5rem!important;}
.padding-bottom-25rem {padding-bottom:2.5rem!important;}
.padding-x-25rem {padding-left:2.5rem!important; padding-right:2.5rem!important;}
.padding-y-25rem {padding-top:2.5rem!important; padding-bottom:2.5rem!important;}
.padding-25rem {padding-top:2.5rem!important;}
.margin-top-25rem {margin-top:2.5rem!important;}
.margin-bottom-25rem {margin-bottom:2.5rem!important;}
.margin-x-25rem {margin-left:2.5rem!important; margin-right:2.5rem!important;}
.margin-y-25rem {margin-top:2.5rem!important; margin-bottom:2.5rem!important;}
.margin-25rem {margin-top:2.5rem!important;}

.padding-top-3rem {padding-top:3rem!important;}
.padding-bottom-3rem {padding-bottom:3rem!important;}
.padding-x-3rem {padding-left:3rem!important; padding-right:3rem!important;}
.padding-y-3rem {padding-top:3rem!important; padding-bottom:3rem!important;}
.padding-3rem {padding-top:3rem!important;}
.margin-top-3rem {margin-top:3rem!important;}
.margin-bottom-3rem {margin-bottom:3rem!important;}
.margin-x-3rem {margin-left:3rem!important; margin-right:3rem!important;}
.margin-y-3rem {margin-top:3rem!important; margin-bottom:3rem!important;}
.margin-3rem {margin-top:3rem!important;}

.padding-top-5rem {padding-top:5rem!important;}
.padding-bottom-5rem {padding-bottom:5rem!important;}
.padding-x-5rem {padding-left:5rem!important; padding-right:5rem!important;}
.padding-y-5rem {padding-top:5rem!important; padding-bottom:5rem!important;}
.padding-5rem {padding-top:5rem!important;}
.margin-top-5rem {margin-top:5rem!important;}
.margin-bottom-5rem {margin-bottom:5rem!important;}
.margin-x-5rem {margin-left:5rem!important; margin-right:5rem!important;}
.margin-y-5rem {margin-top:5rem!important; margin-bottom:5rem!important;}
.margin-5rem {margin-top:5rem!important;}


/* ------------------------------ END MARGINS ------------------------------*/

/* ------------------------------ START MAX WIDTHS ------------------------------*/

.width90{width: 90%; margin: auto;}
.width80{max-width: 800px; margin: auto;}
.width75{max-width: 750px; margin: auto;}
.width65{width: 65%; margin: auto;}
.width50{width: 50%; margin: auto;}
.width45{width: 45%; margin: auto;}
.width40{width: 40%; margin: auto;}
.width25{width: 25%; margin: auto;}
.width10{width: 10%; margin: auto;}

/* ------------------------------ END MAX WIDTHS ------------------------------*/

/* ------------------------------ START CUSTOM MENU ------------------------------*/

.customMenu a{
	font-family: aller,sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size:1rem;
	color:var(--black);
}

.customMenu ul li a{
	padding: 20px 0!important;
}

.customMenu .et_pb_menu__logo-wrap {
	max-width: 240px!important;
}

/* ------------------------------ END CUSTOM MENU ------------------------------*/

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

.customButton a {
	padding:0.5rem 1rem!important;
	display: inline-block!important;
	width: fit-content!important;
	margin-top:1rem;
	margin-bottom:1rem;
	border-radius: var(--borderRadius);
}

.customButton-color-first a {
	background-color:var(--first);
	color:white;
}

.customButton-color-first a:hover {
	background-color:var(--second);
}

.customButton-color-second a {
	background-color:var(--second);
	color:white;
}

.customButton-color-second a:hover {
	background-color:var(--first);
}


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

/* ------------------------------ START CUSTOM FORMS ------------------------------*/
.customForm-column {
	background-color: white;
    border-radius: var(--borderRadius);
}

.customForm input, .customForm select {
	height: 40px;
    border: none;
    padding: 0 20px;
    width: 20%;
    float: left;
    margin: 10px 0;
	font-size:1rem;
}

.customForm input:first-child, .customForm input:last-child { 
	border-left:none;	
}

.customForm input[type=submit] {
	height: 60px;
	margin: 0;
	background-color:var(--first);
	border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
	color:white;
	font-weight:700;
	text-transform:uppercase;
	border:2px solid var(--first);
	border-left:none;
}

.customForm input[type=submit]:hover {
	background-color:var(--second);
	cursor: pointer;
	border:2px solid white;
	border-left:none;
}


/* --------------------------------- CUSTOM ARROW DROPDOWN --------------------------------------------*/

/*To remove button from IE11, thank you Matt */
.customForm select::-ms-expand {
     display: none;
}

.customForm .customDropDown {
  position: relative;
  width:20%;
  float: left;

}

.customForm .customDropDown:after {
    content: '>';
    font: 22px "Consolas", monospace;
	font-weight:700;
    color: var(--second);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 12px;
    top: 13px;
    padding: 0 0 2px;
    position: absolute;
    pointer-events: none;
	cursor:pointer!important;
  	padding: 0 0 2px;

  
}

.customForm select {
 -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  
  display: block;
  width: 100%;


  float: right;

  font-size: 16px;
  color: #333;

}

@media only screen and (min-width: 981px) {
	.customForm input, .customForm select {
	border-left:solid 2px var(--second);
	}
	
	.customForm .customDropDown:after {
	top: 18px;
	}
}

@media only screen and (max-width: 980px) {
	
	.customForm form {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.customForm input, .customForm select {
			width: 100%;
			border-bottom:solid 2px var(--second);
			padding:0 0 10px 10px;
			margin-bottom:0;
	}

	.customForm .customDropDown, .customForm .customSerch {
			width:95%;
	}

	.customForm input[type=submit] {
			border-radius: 0 0 var(--borderRadius) var(--borderRadius) ;
			margin-top: 20px;
			padding-bottom: 0;
	}
}

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

/* ------------------------------ START CUSTOM MISCELLANEOUS ------------------------------*/

.triangle-border-bottom:after{
	content: '';
    height: 0.5rem;
    display: block;
    background-image: url(https://wakala.development.2special.nl/wp-content/themes/Divichild/images/triangle.svg);
    background-color: white;

}

.pointer-header{
	position: absolute;
    z-index: 2;
	width: 100%;
}

@media only screen and (min-width: 981px) {
.pointer-header{
    
    bottom: -80px;
    background-image: url(https://wakala.development.2special.nl/wp-content/themes/Divichild/images/pointer-header.svg);
    background-repeat: no-repeat;
    background-size: contain;
    height: 90%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pointer-header h1 {
margin-top:-50px;	
}

.open-pointer-top:before {
    content: '';
    height: 140px;
    display: block;
    background-image: url(https://wakala.development.2special.nl/wp-content/themes/Divichild/images/open-pointer.svg);
    background-repeat: no-repeat;
    background-position: center;
    top: -140px;
    position: relative;
	}
		
}
@media only screen and (max-width: 980px) {
	
	.pointer-header {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}	
	
	.pointer-header h1 {
		color:var(--second)!important;
		font-size: clamp(2rem, 3vw, 3rem)!important;
	}
	
	.customMenu ul.et_mobile_menu {
		margin-top:1rem;
		border-top-color: var(--second);
	}	
	
	.customMenu ul li a {
    padding: 10px 0!important;
	}
	
	.customMenu .mobile_menu_bar:before {
		color:var(--second)!important;
		font-size: 2.5rem;
	}
	.customMenu .et_mobile_nav_menu {
    margin: 0;
	}
}

/* ------------------------------ END CUSTOM MISCELLANEOUS ------------------------------*/