.circle-popup {
visibility: hidden;
width: 100%;
height: 100%;
z-index: 9999;
transition: visibility 0.4s;
position: fixed;
top: 0;
left: 0
}
.circle-popup.open {
visibility: visible
}
.circle-popup.open .overlay {
background-color: rgba(2, 47, 43, 0.7)
}
.circle-popup.open .content {
opacity: 1;
top: calc(50% - (665px / 2));
transition: all 0.4s;
transition-delay: 0.25s
}
.circle-popup .btn {
cursor: pointer;
}
.circle-popup .overlay {
width: 100%;
height: 100%;
transition: background-color 0.4s;
z-index: 20;
position: absolute;
background-color: rgba(2, 47, 43, 0)
}
.circle-popup .content {
width: 665px;
height: 665px;
color: #fff;
border-radius: 50%;
margin: 0;
transition: all 0.4s;
transition-delay: 0;
opacity: 0;
z-index: 100;
position: absolute;
top: 0;
left: calc(50% - (665px / 2))
}
.circle-popup .content.show-results .inner .front {
transform: rotateY(-180deg)
}
.circle-popup .content.show-results .inner .front .btn-calculate {
opacity: 0
}
.circle-popup .content.show-results .inner .back {
transform: rotateY(0deg)
}
.circle-popup .content .inner {
width: 100%;
height: 100%;
color: #fff;
text-align: center;
border-radius: 50%;
background-color: transparent;
perspective: 1000;
position: absolute;
z-index: 110;
left: 0;
top: 0
}
.circle-popup .content .inner .d-table {
width: 100%;
height: auto
}
.circle-popup .content .front,
.circle-popup .content .back {
position: absolute;
width: 100%;
height: 100%;
padding: 100px;
border-radius: 50%;
background-color: var(--wp--preset--color--contrast-2);
left: 0;
right: 0;
backface-visibility: hidden;
transform-style: preserve-3d;
transition: all .5s
}
@media (max-width: 600px) {
.circle-popup {
margin-top: 0;
}
.circle-popup .content .front,
.circle-popup .content .back {
padding: 50px;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 0;
}
}
.circle-popup .content .front {
transform: rotateY(0deg);
z-index: 10
}
.circle-popup .content .front .icon {
width: 150px;
margin: auto;
margin-bottom: 45px
}
.circle-popup .content .front h3 {
font-size: 24px;
font-weight: 300;
margin-top: 0;
margin-bottom: 20px;
color: #fff;
}
.circle-popup .content .front .input {
margin-bottom: 45px
}
.circle-popup .content .front .input input {
width: 95px;
height: 58px;
font-size: 30px;
color: #3b88ae;
text-align: center;
background-color: #fff;
border-radius: 0;
padding: 0;
margin: 0;
border: 0;
outline: 0;
appearance: none
}
.circle-popup .content .front .input input[type='number'] {
-moz-appearance: textfield
}
.circle-popup .content .front .input input[type=number]::-webkit-inner-spin-button,
.circle-popup .content .front .input input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0
}
.circle-popup .content .front .btn-calculate {
opacity: 1;
transition: opacity 0.5s;
}
.circle-popup .btn-calculate,
.circle-popup .btn-share,
.circle-popup .btn {
background-color: var(--wp--preset--color--base-2);
border-radius: 30px;
color: var(--wp--preset--color--contrast-2);
font-size: 16px;
font-style: normal;
font-weight: 700;
text-decoration: none;
padding-top: var(--wp--preset--spacing--10);
padding-right: var(--wp--preset--spacing--20);
padding-bottom: var(--wp--preset--spacing--10);
padding-left: var(--wp--preset--spacing--20);
border: 0;
}
.circle-popup .content .back {
padding-left: 80px;
padding-right: 80px;
transform: rotateY(180deg);
z-index: 1
}
.circle-popup .content .back h3 {
font-size: 35px;
font-weight: 300;
margin-top: 0;
margin-bottom: 20px;
color: #fff;
}
.circle-popup .content .back .result {
display: block;
white-space: nowrap;
margin: auto;
margin-bottom: 15px;
position: relative
}
.circle-popup .content .back .result .number,
.circle-popup .content .back .result .icon {
display: inline-block;
vertical-align: top
}
.circle-popup .content .back .result .number {
font-size: 34px;
font-weight: 600;
text-align: right;
color: #fff;
letter-spacing: 1px;
line-height: 40px
}
.circle-popup .content .back .result .icon img {
height: 35px;
vertical-align: top
}
.circle-popup .content .back .result-item .result {
max-width: 100%
}
.circle-popup .content .back .result-item .descriptions {
font-size: 12px;
color: #fff;
}
.circle-popup .content .back .result-item.co2 {
width: 300px;
margin: auto;
margin-bottom: 30px
}
.circle-popup .content .back .result-item.co2 .result {
max-width: 180px
}
.circle-popup .content .back .result-item.co2 .result img {
height: 40px
}
.circle-popup .content .back .equal {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px
}
.circle-popup .content .back .equal .result-item {
position: relative;
flex: 0 0 25%;
max-width: 25%;
padding-right: 15px;
padding-left: 15px
}
.circle-popup .content .back .equal .result-item.aluminium {
padding-right: 0
}
.circle-popup .content .back .equal .result-item .result .number {
font-size: 30px
}
.circle-popup .content .back .equal .result-item .or {
color: #022f49;
position: absolute;
right: -7px;
top: 25px
}
.circle-popup .content .back .equal-sign {
width: 30px;
height: 18px;
margin: auto;
margin-bottom: 35px;
position: relative
}
.circle-popup .content .back .equal-sign:before,
.circle-popup .content .back .equal-sign:after {
display: block;
content: '';
width: 30px;
height: 4px;
background-color: #022f49;
position: absolute;
top: 0
}
.circle-popup .content .back .equal-sign:after {
top: 10px
}
.circle-popup .content .back .share-popup {
display: block;
width: 240px;
margin: auto;
margin-top: 45px;
position: relative
}
.circle-popup .content .back .share-popup .share-result {
width: 100%;
height: auto;
background-color: #3b88ae;
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.3);
visibility: hidden;
transition: visibility 0.3s, bottom 0.5s, opacity 0.3s;
opacity: 0;
z-index: 0;
position: absolute;
bottom: calc(100% + 40px);
left: 0
}
.circle-popup .content .back .share-popup .share-result:before {
content: " ";
position: absolute;
height: 0;
width: 0;
border: solid transparent;
border-color: rgba(255, 255, 255, 0);
border-top-color: #3b88ae;
border-width: 16px;
margin-left: -16px;
top: 100%;
left: 50%;
pointer-events: none
}
.circle-popup .content .back .share-popup .share-result.open {
visibility: visible;
bottom: calc(100% + 20px);
opacity: 1;
z-index: 50
}
.circle-popup .content .back .share-popup .share-result .shares {
padding: 30px 40px;
margin: 0;
text-align: left;
position: relative
}
.circle-popup .content .back .share-popup .share-result .shares .share a {
font-size: 14px;
color: #fff;
line-height: 32px;
letter-spacing: 2px;
opacity: 1;
transition: opacity 0.2s
}
.circle-popup .content .back .share-popup .share-result .shares .share a:hover {
opacity: 0.5
}
.circle-popup .content .back .share-popup .share-result .shares .share a .img {
display: inline-block;
width: 20px;
text-align: center;
margin-right: 10px
}
.circle-popup .content .back .share-popup .share-result .shares .share a .img img {
height: 15px
}
.circle-popup .content .back .share-popup .share-result .shares .share-close {
display: block;
width: 10px;
height: 10px;
transition: opacity 0.2s ease-in-out;
position: absolute;
top: 20px;
right: 30px
}
.circle-popup .content .back .share-popup .share-result .shares .share-close:hover {
opacity: 0.5
}
.circle-popup .content .back .share-popup .share-result .shares .share-close img {
vertical-align: top
}
.circle-popup .content .back .btn-share:before {
background-image: url(//evvonow.com/wp-content/plugins/custom-evvo/images/share.svg);
background-size: 20px auto;
background-position: 11% 50%;
background-repeat: no-repeat
}
.circle-popup .content .back .btn-share:focus:before,
.circle-popup .content .back .btn-share:active:before,
.circle-popup .content .back .btn-share:hover:before {
background-image: url(//evvonow.com/wp-content/plugins/custom-evvo/images/share_blue.svg)
}
.circle-popup .content .close {
display: block;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #fff;
background-image: url(//evvonow.com/wp-content/plugins/custom-evvo/images/close_dark_blue.svg);
background-size: 13px auto;
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: 150;
position: absolute;
right: 70px;
top: 70px
}