@charset "UTF-8";
/* CSS Document */




/*Schriftart Ende */


  html {
    box-sizing: border-box;
  }
  *,*::before,*::after {
    box-sizing: inherit;
  }








.flexbox-selectcategory{
	position:relative;	
	margin:auto;	
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;	
	flex-direction:row;
	flex-wrap: wrap;
    border: 0px solid #333;
	margin-bottom:5px;
	max-width:400px;
	align-items: center;
	-ms-flex-pack: center;
    justify-content: space-around;	
}


.selectcategory-btn{	
	margin:10px;	
	height:100px;
	width:100px;
	cursor: pointer;
	text-align:center;	
	border: double 2px transparent;
	border-radius: 10px;
	background-image: linear-gradient(#FFFFFF, #FFFFFF), radial-gradient(circle at top left, #F73F9B, #090541);	
	background-origin: border-box;
	background-clip: content-box, border-box;
	transition: all 0.3s ease-out;	
}


.selectcategory-btn:hover{
	background-image: radial-gradient(circle at top left,#000000, #000000), radial-gradient(circle at top left, #000000, #000000);	
	transition: all 0.3s ease-out;	
	box-shadow: rgba(43,13,99, 0.5) 2px 2px, rgba(112,30,118, 0.5) 4px 4px, rgba(153, 40, 129, 0.5) 6px 6px, rgba(199, 51, 141, 0.5) 8px 8px, rgba(245,205,228, 5) 10px 10px;
}




.selectcategory-btn-text{	
	font-family: 'Mainfont-Medium';	
	font-size:15px;
	color:#101010;
}

.selectcategory-btn:hover .selectcategory-btn-text{
	transition: all 0.3s ease-out;
	color:#FAFAFA;
}




.selectcategory-btn svg{	
	fill: #303030;
	pointer-events: auto;
	transition: all 0.3s ease-out
}

.selectcategory-btn:hover svg{
	fill: #FAFAFA;
	transition: all 0.3s ease-out;
}







.calculator{
	/*background: linear-gradient(to bottom, #FFFFFF, #F1F1F1);*/
	background: #FFFFFF;
	border: 0px solid #BABABA;
}








.calculatorflex {	
	margin-top:20px;
	padding:5px 0px 0px 0px; 
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;  	
	width:100%;
	 -ms-flex-direction: column;
    flex-direction: column;  
	justify-content: space-between;	
	border: 0px solid #000000;	
	
}


.calculatorflex-textbox {	
	-ms-flex-order: 2;
    order: 2;
	background: no-repeat url("../img/blob_mobile_png.png");
	background-position: right center;
}

.calculatorflex-imagebox {	
	-ms-flex-order: 1;
    order: 1;
	margin-top:30px;	
}

.calculatorflex-imagebox-image{
	width:300px;	
}



.mark {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    rgba(255, 225, 0, 0.1),
    rgba(255, 225, 0, 0.7) 4%,
    rgba(255, 225, 0, 0.3)
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}




/*Tablet View*/
@media (min-width: 768px){	



.flexbox-selectcategory{
    justify-content: space-around;
	max-width:600px;
}



.selectcategory-btn{
	border: double 2.5px transparent;
	border-radius: 15px;
	height:130px;
	width:130px;
}


.selectcategory-btn-text{	
	font-family: 'Mainfont-Medium';	
	font-size:17px;	
}


.selectcategory-btn:hover{
	box-shadow: rgba(43,13,99, 0.5) 3px 3px, rgba(112,30,118, 0.5) 6px 6px, rgba(153, 40, 129, 0.5) 9px 9px, rgba(199, 51, 141, 0.5) 12px 12px, rgba(245,205,228, 5) 15px 15px;
}







.calculatorflex {
	flex-direction: row; 
	padding:7px 15px 7px 15px; 
	-ms-flex-align: center;
    align-items: center;	
}



.calculatorflex-imagebox {
    -ms-flex: 0 0 48%;
    flex-basis: 48%;
	-ms-flex-order: 2;
    order: 2;
	margin-top:0px;
}

.calculatorflex-imagebox-image{
	width:350px;	
}


.calculatorflex-textbox {
    -ms-flex: 0 0 52%;
    flex-basis: 52%;
	-ms-flex-order: 1;
    order: 1;
}


}





/*Desktop View*/

@media (min-width: 1024px){		
	
.flexbox-selectcategory{
    justify-content: space-around;
	max-width:700px;
}
	
	
	
.selectcategory-btn{	
	border: double 3px transparent;
	border-radius: 18px;
	height:150px;
	width:150px;
}


.selectcategory-btn-text{
	margin-top: 0px;
	font-family: 'Mainfont-Medium';	
	font-size:19px;	
}	


.selectcategory-btn:hover{
	box-shadow: rgba(43,13,99, 0.5) 5px 5px, rgba(112,30,118, 0.5) 10px 10px, rgba(153, 40, 129, 0.5) 15px 15px, rgba(199, 51, 141, 0.5) 20px 20px, rgba(245,205,228, 5) 25px 25px;
}


	
	

	
	
	
	
.calculatorflex {
    flex-direction: row; 
	padding: 10px 0px 10px 0px; 
	-ms-flex-align: start;
    align-items: flex-start;		
}
	


.calculatorflex-imagebox {
    -ms-flex: 0 0 35%;
    flex-basis: 35%;
	
}


.calculatorflex-imagebox-image{
	width:400px;	
}



.calculatorflex-textbox {
    -ms-flex: 0 0 65%;
    flex-basis: 65%;
	background: no-repeat url("../img/blob_desktop_png.png");
	background-position: right center;
}



	
	
}