/*
 * #Grid circles
 */

.grid__circles {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
	font-size: 0;
}

.grid__circles .grid__circle_item {
	position: relative;
	display: inline-block;
	width: 25%;
	margin-bottom: 50px;
	padding: 0 2.5%;
	vertical-align: top;
}

.grid__circles .grid__circle_item .hover__circle__container {
	position: relative;
	width: 100%;
	padding-bottom: 100%;
}

/*
 * Hover circles
 */

.hover__circle {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.hover__circle_inner {
	position: relative;
	width: 85%;
	height: 85%;
	margin-top: 7.5%;
	margin-left: 7.5%;
	border-radius: 50%;
}

.hover__circle_inner .hover__circle_inner_layout {
	overflow: hidden;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 50%;
	background-color: transparent;
}

.hover__circle_inner .hover__circle_inner_layout > div {
	position: absolute;
	text-align: center;
}

.hover__circle_inner .hover__circle_inner_layout .hover__circle_inner_layout_heading {
	top: 0;
	left: 0;
	width: 100%;
	height: 25%;

}

.hover__circle_inner .hover__circle_inner_layout .hover__circle_inner_layout_heading p {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0.375em;
	width: 100%;
	margin: 0 auto;
	color: #23a6da;
	line-height: 1;
	font-weight: 200;
	font-size: 1.475rem;
}

.hover__circle_inner .hover__circle_inner_layout .hover__circle_inner_layout_heading p a {
    color: #fff;
}

.hover__circle_inner .hover__circle_inner_layout .hover__circle_inner_layout_content {
	top: 30%;
	left: 0;
	visibility: hidden;
	width: 100%;
	height: 70%;
	padding: 0.25em 1.5em;
	background-color: transparent;
}

.hover__circle_inner .hover__circle_inner_layout .hover__circle_inner_layout_content p {
	font-size: 0.875rem;
}

.hover__circle_inner .hover__circle_inner_layout .hover__circle_inner_layout_content a {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 1.5em;
	width: 100%;
	height: auto;
	margin: auto;
	padding: 0.25em;
	background: #ffc704;
	color: #000;
	transition: none;
    font-size: 0.875rem;
}

.hover__circle:not([class*="circle__bg_"]):hover .hover__circle_inner_layout .hover__circle_inner_layout_content {
	visibility: visible;
	background-color: rgba(255, 255, 255, 0.75);
	transition: all 0.25s;
}

.hover__circle:not([class*="circle__bg_"]):hover {
	background: transparent;
}

/*
 * Inner centered picture
 */

.circle__bg_1 {
	background: rgba(150, 220, 180, 0.65);
	background-image: -webkit-linear-gradient(45deg, rgba(155, 220, 245, 0.25) 1%, rgba(155, 170, 175, 0.3) 100%), -webkit-linear-gradient(135deg, rgba(155, 205, 255, 0.5) 0%, rgba(150, 220, 180, 0.65) 80%);
	background-image: linear-gradient(45deg, rgba(155, 220, 245, 0.25) 1%, rgba(155, 170, 175, 0.3) 100%), linear-gradient(-45deg, rgba(155, 205, 255, 0.5) 0%, rgba(150, 220, 180, 0.65) 80%);
}

.circle__bg_2 {
	background: rgba(155, 235, 245, 0.35);
	background-image: -webkit-linear-gradient(45deg, rgba(106, 229, 45, 0.2) 1%, rgba(130, 175, 85, 0.3) 100%), -webkit-linear-gradient(135deg, rgba(165, 255, 240, 0.35) 0%, rgba(155, 235, 245, 0.35) 80%);
	background-image: linear-gradient(45deg, rgba(106, 229, 45, 0.2) 1%, rgba(130, 175, 85, 0.3) 100%), linear-gradient(-45deg, rgba(165, 255, 240, 0.35) 0%, rgba(155, 235, 245, 0.35) 80%);
}

.circle__bg_3 {
	background: rgba(120, 220, 215, 0.35);
	background-image: -webkit-linear-gradient(45deg, rgba(80, 175, 65, 0.25) 1%, rgba(115, 185, 180, 0.55) 100%), -webkit-linear-gradient(135deg, rgba(130, 165, 205, 0.45) 0%, rgba(120, 220, 215, 0.35) 80%);
	background-image: linear-gradient(45deg, rgba(80, 175, 65, 0.25) 1%, rgba(115, 185, 180, 0.55) 100%), linear-gradient(-45deg, rgba(130, 165, 205, 0.45) 0%, rgba(120, 220, 215, 0.35) 80%);
}

.circle__bg_4 {
	background: rgba(60, 160, 195, 0.35);
	background-image: -webkit-linear-gradient(45deg, rgba(95, 170, 205, 0.1) 1%, rgba(70, 140, 165, 0.15) 100%), -webkit-linear-gradient(135deg, rgba(50, 120, 185, 0.30) 0%, rgba(60, 160, 195, 0.35) 80%);
	background-image: linear-gradient(45deg, rgba(95, 170, 205, 0.1) 1%, rgba(70, 140, 165, 0.15) 100%), linear-gradient(-45deg, rgba(50, 120, 185, 0.30) 0%, rgba(60, 160, 195, 0.35) 80%);
}

[class*="circle__bg_"] .hover__circle_inner {
	width: 50%;
	height: 50%;
	margin-top: 25%;
	margin-left: 25%;
}

[class*="circle__bg_"]:hover {
	/*background: inherit;*/
	-webkit-transition: none;
	transition: none;
}

.hover__circle_inner_layout_picture {
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*
 * Media Queries
 */

@media only screen and (max-width: 480px) {
	.grid__circles .grid__circle_item {
		width: 100% !important;
	}

	.hover__circle_inner .hover__circle_inner_layout .hover__circle_inner_layout_heading p {
		font-size: 2.125rem !important;
	}

	.hover__circle_inner .hover__circle_inner_layout .hover__circle_inner_layout_content p {
		overflow: inherit;
		height: auto;
		padding-right: 0.75em;
		padding-left: 0.75em;
		font-size: 1.25rem !important;
	}
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
	.grid__circles .grid__circle_item {
		width: 50% !important;
	}

	.hover__circle_inner .hover__circle_inner_layout .hover__circle_inner_layout_content p {
		padding-right: 0.75em;
		padding-left: 0.75em;
        font-size: 1rem !important;
	}
}

@media only screen and (min-width: 769px) and (max-width: 960px) {
    .grid__circles .grid__circle_item {
        width: 33.3% !important;
    }

	.hover__circle_inner .hover__circle_inner_layout .hover__circle_inner_layout_heading p {
		font-size: 1.25rem;
	}

	.hover__circle_inner .hover__circle_inner_layout .hover__circle_inner_layout_content p {
		overflow: hidden;
		height: 4.25em;
        font-size: 1rem !important;
	}
}

@media only screen and (min-width: 961px) {
    .hover__circle_inner .hover__circle_inner_layout .hover__circle_inner_layout_content p {
        line-height: 1.2;
    }
}
@media only screen and (max-width: 1080px) {
	.hover__circle_inner .hover__circle_inner_layout .hover__circle_inner_layout_heading p {
		font-size: 1.5rem;
	}

	.hover__circle_inner .hover__circle_inner_layout .hover__circle_inner_layout_content p {
		font-size: 0.875rem;
	}
}