/*
 Theme Name:   Portfolio Suave
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  All content from about page
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteenchild
*/




.twocolabout {
	margin-bottom: 50px;
	
}

.twocolabout:last-child {
	margin-bottom: 0;
}

@media screen and (min-width:600px) {
	.twocolabout {
		display: flex;
		justify-content: space-between;
		/*margin-bottom: 200px; I dont know why this doesnt work. I want this only for desktopview*/
	}
}


.twocol__colaboutONE {
	margin-bottom: 25px;
	margin-right: auto;
	margin-left: auto;
}

.twocol__colaboutONE:last-child {
	margin-bottom: 0;
}

@media screen and (min-width:600px) {
	.twocol__colaboutONE {
		margin-left:10px;
		margin-right:10px;
	}
}

.twocol__colaboutTWO {
	margin-bottom: 50px;
}

.twocol__colaboutTWO:last-child {
	margin-bottom: 0; 
}

@media screen and (min-width:600px) {
	.twocol__colaboutTWO {
		position: relative; 
		margin-left: 350px; 
		min-width: 250px; 
	}
}



.twocol__colabout {
	margin-bottom: 50px;
}

.twocol__colabout:last-child {
	margin-bottom: 0;
}

@media screen and (min-width:600px) {
	.twocol__colabout {
		flex: 0 0 48%;
		margin: 0;
	}
}

	
.imagewrapperabout {
	border: 10px solid #96dec7;
	height: 110px;
	padding-top: 100%;
	margin-top: 30px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: ;
}

@media screen and (min-width:600px) {
	.imagewrapperabout {
		width: 320px;
	}
}

.imagecoloroverlayabout {
	border: 10px solid #96dec7;
	height: 20px;
	padding-top: 100%;
	margin-top: 30px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border: 10px solid #3B6253;/*96dec7;*/
}/*Does not work*/


.threecol {
	margin-bottom: 0px;
	-ms-box-orient: horizontal;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	flex: 1 0 auto!important;
	-webkit-justify-content: center;
	justify-content: center;
	flex-direction: row;
	flex-wrap:nowrap;
	gap:0px;
}

.threecol:last-child {
	margin-bottom: 0;
}

@media screen and (min-width:600px) {
	.threecol {
		-webkit-justify-content: flex-start; 
		justify-content: flex-start;
		gap:0px;
	}
}

.threecol__col {
	margin-bottom: 0px;
	max-width: 100px;
	min-height:50px;
	flex: 50%;
}

.threecol__col:last-child {
	margin-bottom: 0;
}

@media screen and (min-width:600px) {
	.threecol__col {
		flex: 0 0 48%;
		margin: 0;
	}
}



.textabout_UXD {
	padding-top: 0px;
	font-family: var(--emphazized-inter30-font-family);
	font-weight: bold;
	font-size: 30px;
	text-align: center;
	color: var(--logocolor);/*#34b28a;*/
}

@media screen and (min-width:600px) {
	.textabout_UXD {
		text-align: left;
	}
}



.imagewrappercontacticons {
	height: 5px;
	padding-top: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 50px;
}

@media screen and (min-width:600px) {
	.imagewrappercontacticons {
		background-position: left;
	}
}


.contactabout {
	width: 100%;
	padding: 10px 0px;
	/*margin-top: 50px;*/
	margin-bottom: 0px;
}

@media screen and (min-width:600px) {
	.contactabout {
		flex: 0 0 48%;
		margin: 0;
		margin-top: 30px;
		margin-bottom: 0px;
	}
}

/*bodytext_leftmobilecenter*/
.contact_text {
	font-size: var(--body_mobile);
	line-height: 20px;
	font-family: var(--font_body);
	margin-bottom: 20px;
	color: var(--color_body);
	text-align: center;
}

@media screen and (min-width:600px) {
	.contact_text {
	font-size: var(--body_desktop);
	text-align: left;
	}
}


.twocolwrapper {
	margin-left:0%;
	margin-right:0%;
}


@media screen and (min-width:600px) {
	.twocolwrapper {
	margin-left:10%;
	margin-right:10%;
	}
}

@media screen and (min-width:2000px) {
	.twocolwrapper {
	margin-left:20%;
	margin-right:20%;
	}
}

.textoverlaymail {

}


/* Tooltip text */
.threecol__col .tooltiptext {
  visibility: hidden;
  width: auto;
  background-color: #D9F2EA;/*#96dec7;#34b28a;#black;*/
  color: var(--color_body);/*#fafafa;*/
  text-align: right;
  padding: 5px 5px;
  border-radius: 6px;
  font-size: 15px;
  font-family: Roboto Light;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  /*right: 5%;*/ 
  left:35%;
}

@media screen and (min-width:600px) {
	.textoverlaymail {
	text-align: center;
	left:;
	
	}
}

/* Show the tooltip text when you mouse over the tooltip container */
.threecol__col:hover .tooltiptext {
  visibility: visible;
}





.impressum {
	width: 100%;
	padding: 10px 0px;
	/*margin-top: 50px;*/
	margin-bottom: 0px;
}

@media screen and (min-width:600px) {
	.impressum {
		flex: 0 0 48%;
		margin: 0;
		margin-top: 30px;
		margin-bottom: 0px;
	}
}

/*bodytext_leftmobilecenter
.impressumtext {
	font-size: var(--body_mobile);
	line-height: 20px;
	font-family: var(--font_body);
	margin-bottom: 20px;
	color: var(--color_body);
	text-align: center;
}

@media screen and (min-width:600px) {
	.impressumtext {
	font-size: var(--body_desktop);
	text-align: center;
	}
}*/

:root {
	--basecolor: #96dec7;
	--lightcolor: #D9F2EA;
	--background-color: #C7EFE3;
	--strongcolor: #34b28a;
}



.impressumtext {
	padding-top: 15px;
	padding-bottom: 15px;
	font-family: var(--font_body);
	font-weight: bold;
	text-align: center;
	color: #34b28a;
}