body {
  margin: 0;
  background:#000000;
  font-family: Euclid Flex;

}

.btn {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
}
.kid-container{
	position: relative;
	width:100%;
	height:auto;
	max-width: 1500px;
    margin: 0 auto;
	padding:40px;
	box-sizing: border-box;
	background-color: #000000;
	
}

.kidid, .kid{
	width:48%;
	height: 400px;
	border-radius: 25px;
	background-color:#181717;
	transition: 0.3s;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	position: relative;
	cursor: pointer;

}
.kid{
	margin-right:1%;
	margin-bottom:20px;
}
.kidid{
	margin-left:1%;
}
.kid:hover, .kid:active{
	background-color:#03bd00;
}
.kid:hover .kid-logo{
	fill:#000;
}
.kid:hover .btn-kid{
visibility: visible;
  opacity: 1;
  transition: all 0.2s ease-in;
  left:20px;
  
}

.kidid:hover, .kidid:active {
		background-color:#91724b;
}
.kidid:hover .kidid-logo{
	fill:#000;
}
.kidid:hover .btn-kidid{
	visibility: visible;
	opacity: 1;
	transition: all 0.2s ease-in;
	left:20px;
  
}

.kid-logo-holder{
	width:200px;
	height:auto;
	box-sizing: border-box;
	padding: 40px;
}
.kidid-logo-holder{
	width:285px;
	height:auto;
	box-sizing: border-box;
	padding: 40px;
}

.kid-logo, .kidid-logo{
	fill:#fff;
	stroke-width:0px;
	transition: 0.3s;
}
.btn-kid, .btn-kidid {
	position: absolute;
  -webkit-border-radius: 35;
  -moz-border-radius: 35;
  border-radius: 35px;
  border: #e9ff6a solid 2px;
  font-family: Arial;
  color: #000000;
  font-size: 20px;
  background: #e9ff6a;
  padding: 15px 25px 15px 25px;
  text-decoration: none;
   visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-out;
  left: -500px;
  bottom:20px;
}
.btn-kid:hover, .btn-kid:active, .btn-kidid:hover, .btn-kidid:active {
	color: #e9ff6a;
	background: #000000;
	border: #e9ff6a solid 2px;
}
.heading2 {
    font-size: 25px;
    line-height: 1.31;
    font-weight: 400;
    color: #ccc;
    margin-top: 20px;
    margin-bottom: 20px;
     font-family: Euclid Flex;
}
.text-holder{
	position: relative;
}
.headertext{
	width:100%;
	max-width:60%;
	    margin-bottom: 90px;
}
.closebtn{
	position: absolute;
	top:0;
	right:0;
	width:30px;
	height: 30px;
}
.closebtn:hover{
	opacity:0.5;
	transition: all 0.2s ease-in;
}

@font-face {
    font-family: Euclid Flex;
    src: url(https://volt.se/wp-content/themes/volt-2016/dist/fonts/EuclidFlex-Regular-WebS.woff2) format("woff2"), url(https://volt.se/wp-content/themes/volt-2016/dist/fonts/EuclidFlex-Regular-WebS.woff) format("woff");
    font-weight: 400
}

@media (max-width: 768px) {
	.headertext{
		max-width:100%;
		padding-top: 30px;
		margin-bottom: 50px;
	}
	.kidid, .kid{
  	width:100%;
	height: 280px;
	margin-left: 0;
  }
/*
	.kid{
		background-color:#03bd00;
	}
	.kidid{
		background-color:#91724b;
	}
	.btn-kidid{
		visibility: visible;
		opacity: 1;
		left:20px;
	}
	.btn-kid{
		visibility: visible;
		opacity: 1;
		left:20px;
	}
	*/
	
}