.contenedor{
width: 300px;
height: 300px;
margin: auto;
cursor: pointer;
}
.contenedor > div {
position: absolute
}
.circle-image {
width: 270px;
height: 270px;
border-radius: 180px;
position: relative;
top: 15;
left: 15;
margin: 15px;
}
.circle-image-big {
width: 300px;
height: 300px;
border-radius: 180px;
position: absolute;
top: 0;
left: 0;
z-index: 3;
background-color: #367EC4;
text-align: center; opacity: 0;
box-shadow: 1px 7px 8px 0px rgba(0,0,0,0.15);
-webkit-box-shadow: 1px 7px 8px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 1px 7px 8px 0px rgba(0,0,0,0.15);
}
.background-image-style {
background-position: center;
box-shadow: 1px 7px 8px 0px rgba(0,0,0,0.15);
-webkit-box-shadow: 1px 7px 8px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 1px 7px 8px 0px rgba(0,0,0,0.15);
}
.text-title {
text-align: center;
color: #FFFFFF;
background: linear-gradient(to top, #367EC4 0%, #367EC4 24%, rgba(175, 175, 175, 0) 1%, rgba(175, 175, 175, 0) 100%);
}
.circle-image.text-title{
position: absolute;
bottom: 0;
left: 0;
top: unset;
}
.text-title > div {
margin-top: 214px;
}
@keyframes showNavStarting {
from {opacity: 1;}
to {opacity: 0;}
}
@keyframes showNav {
from {opacity: 0;}
to {opacity: 1;}
}
.contenedor .circle-image-big {
animation: showNavStarting 250ms ease-in-out both;
}
.contenedor:hover .circle-image-big {
display: block;
animation: showNav 250ms ease-in-out both;
}
.circle-image-big .title {
margin-top: 40px;
font-weight: bold;
font-size: 23px;
color: #FFFFFF;
}
.circle-image-big .body {
margin-top: 15px;
color: #FFFFFF;
font-size: 18px;
line-height: 30px;
font-weight: 400;
}
.turquesa .text-title {
background: linear-gradient(to top, #60B9B9 0%, #60B9B9 24%, rgba(175, 175, 175, 0) 1%, rgba(175, 175, 175, 0) 100%) !important; 
}
.turquesa .circle-image-big {
background-color: #60B9B9 !important;
}
.orange .text-title {
background: linear-gradient(to top, #EBA026 0%, #EBA026 24%, rgba(175, 175, 175, 0) 1%, rgba(175, 175, 175, 0) 100%) !important; 
}
.orange .circle-image-big {
background-color: #EBA026 !important;
}
.just-front-white .text-title {
background: linear-gradient(to top, #FFFFFF 0%, #FFFFFF 24%, rgba(175, 175, 175, 0) 1%, rgba(175, 175, 175, 0) 100%) !important; 
color: #2F2F2F !important;
}
.circle-image-big .body > div {
width: 250px; 
margin: auto;
}
.div-bottom-arrow {
bottom: 0; 
position: absolute; 
margin: 0 auto 30px auto; 
width: 300px;
}
.div-bottom-arrow > div {
display: none;
}
@media only screen and (max-width: 1359px) {
.circle-image {
width: 200px;
height: 200px;
border-radius: 180px;
position: relative;
top: 0;
left: 0;
margin: 0px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.contenedor {
width: auto;
height: auto;
margin: 0;
cursor: pointer;
}
.contenedor > div {
position: inherit;
display: flex;
}
.circle-image.text-title {
display: none;
}
.circle-image-big .title {
margin-top: 0px;
color: #367EC4;
font-size: 18px;
}
.circle-image-big .body {
margin-top: 10px;
color: #2F2F2F;
font-size: 15px;
}
.circle-image-big .body > div {
width: auto; 
margin: 0;
}
.div-bottom-arrow > div {
display: block;
margin-right: 10px;
color: #367EC4;
font-size: 13px;
}
.div-bottom-arrow {
bottom: unset; 
position: relative; 
margin: 0; 
width: auto;
display: -webkit-inline-box;
}
.contenedor .circle-image-big {
animation: unset;
opacity: 1;
position: relative;
width: auto;
height: auto;
border-radius: unset;
background-color: transparent;
box-shadow: unset;
-webkit-box-shadow: unset;
-moz-box-shadow: unset;
text-align: left;
padding-left: 40px;
max-width: 50%;
}
.turquesa .circle-image-big ,
.orange .circle-image-big {
background-color: transparent !important;
}
.div-bottom-arrow img {
content:url(http://www.zigsheng.com/wp-content/uploads/2021/09/text-half-arrow-blue-1.png);
margin-bottom: 2px;
}
}
@media only screen and (max-width: 767px) {
.circle-image {
width: 95px;
height: 95px;
border-radius: 180px;
position: relative;
top: 0;
left: 0;
margin: 0px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-top: 10px;
}
.contenedor {
width: auto;
height: auto;
margin: 0;
cursor: pointer;
}
.contenedor > div {
position: inherit;
display: flex;
}
.circle-image.text-title {
display: none;
}
.circle-image-big .title {
margin-top: 0px;
color: #367EC4;
font-size: 18px;
}
.circle-image-big .body {
margin-top: 10px;
color: #2F2F2F;
font-size: 15px;
}
.circle-image-big .body > div {
width: auto; 
margin: 0;
}
.div-bottom-arrow > div {
display: block;
margin-right: 10px;
color: #367EC4;
font-size: 13px;
}
.div-bottom-arrow {
bottom: unset; 
position: relative; 
margin: 0; 
width: auto;
display: -webkit-inline-box;
}
.contenedor .circle-image-big {
animation: unset;
opacity: 1;
position: relative;
width: auto;
height: auto;
border-radius: unset;
background-color: transparent;
box-shadow: unset;
-webkit-box-shadow: unset;
-moz-box-shadow: unset;
text-align: left;
padding-left: 20px;
max-width: 70%;
}
.turquesa .circle-image-big ,
.orange .circle-image-big {
background-color: transparent !important;
}
.div-bottom-arrow img {
content:url(http://www.zigsheng.com/wp-content/uploads/2021/09/text-half-arrow-blue-1.png);
margin-bottom: 1.5px;
}
.circle-image {
margin-top: 5px;
}
}