html,body{
overflow-x:hidden;
}
.flip-card {
background-color: transparent;
width: 130px;
height: 130px;
display: inline-grid;
border-radius: 50%;
margin-left: 30px;
perspective: 1000px;
border-color: grey;
border-width: 3px;
transition: 1s;
z-index: 3;
}
.flip-card:hover
{
/*box-shadow: 2px 15px 15px rgba(55, 55, 55, 0.5);*/
border-color: #0072bc;
border-width: 10px;
transition: 0.2s;
bottom: 10px;
box-shadow: 0 13px 18px rgba(0,0,0,0.16), 0 22px 28px rgba(0,0,0,0.10);
transform: translateX(15px);
transform: translateY(-45px);
transition: 0.5s;
/*background-size: 150% 150%; padding: 2px 50px;margin-top: 20px; color: white; text-align: right; float: right;*/
/* width: 180px;
height: 180px;*/
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
border-width: 2px;
border-color: white;
border-style: solid;
border-radius: 50%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card-inner:hover
{
/*width: 180px;
height: 180px;
transition: transform 2s;
transition-property: width 2s;*/
}
/* Do an horizontal flip when you move the mouse over the flip box container */
/*.flip-card:hover .flip-card-inner {
transform: rotate3d(45, 45,0, 180deg);
}*/
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
backface-visibility: hidden;
text-align: center;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
/*background-color: #;*/
/* background: #1DC7EA;
background: -moz-linear-gradient(top, #1DC7EA 0%, #4091ff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1DC7EA), color-stop(100%, #4091ff));
background: -webkit-linear-gradient(right, #1DC7EA 0%, #4091ff 100%);
background: -o-linear-gradient(right, #1DC7EA 0%, #4091ff 100%);
background: -ms-linear-gradient(right, #1DC7EA 0%, #4091ff 100%);
background: linear-gradient(to right, #1DC7EA 0%, #4091ff 100%);*/
/*background-size: 150% 150%; padding: 2px 50px;margin-top: 20px; color: white; text-align: right; float: right;*/
/*background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 170%, #a1c4fd 20%);*/
/*background-color: #eee;*/
box-shadow: 0px 8px 18px rgba(102, 175, 233, 0.4);
border: none;
color: white;
}
/*.flip-card-front: hover
{
width: 180px;
height: 180px;
transition: width 1s;
transition: height 1s;
-webkit-transition-delay: 1s;
transition-delay: 1s;
}*/
/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
.flip-card .flip-card-inner .flip-card-front h3
{
font-size: 45px;
/*color: #0072bc;*/
color: white;
padding: 0;
margin: 0;
margin-top: 10%;
}
.flip-card .flip-card-inner .flip-card-back p
{
padding: 0;
margin: 0;
margin-left: 45px;
color: white;
}
.main-panel .content .picPanel
{
margin-top: -70px;
margin-left: 10px;
padding:30px;
}
.picPanel .AQI
{
margin-top: 80px;
}
.picPanel .AQI span
{
margin-top: 10px;
/*padding-top: 88px;*/
padding: 2px 10px;
color: white;
background-color: #0072bc;
border-radius: 10px;
}
.picPanel .AQI p
{
color: white;
display: inline-block;
}
.picPanel .AQI .AQI_status
{
margin-left: -12px;
font-size: 12px;
background-color: transparent;
}
.picPanel .AQI h1
{
margin-top: 2px;
font-size: 72px;
color: white;
margin-bottom: 1px;
}
.picPanel .Temp-hum
{
/* margin-top: -80px;
padding-top: -80px;
color: orange;*/
/*background-color: orange;*/
}
.picPanel .AQI img
{
width: 120%; height: 120%;
}
/* .main-panel .content .row2 .col2 .row1 .col-md-3 img
{
width: 30px; height: 30px;
}*/
.main-panel .content .row button
{
}
#temp
{
font-size: 45px;
}
@media (max-width: 991px){
.main-panel .navbar-default
{
/*display: inline;*/
}
.flip-card
{
width: 20px;
height: 20px;
margin-left: 50px;
/*margin-right: -50px;*/
/*margin-right: -50px;*/
}
.flip-card-inner{
background-color: #eee;
}
.flip-card:hover
{
box-shadow: 2px 5px 5px rgba(55, 55, 55, 0.5);
border-color: #0072bc;
border-width: 5px;
/*border-width: 10px;*/
transition: 0.2s;
/*background-size: 150% 150%; padding: 2px 50px;margin-top: 20px; color: white; text-align: right; float: right;*/
/* width: 180px;
height: 180px;*/
}
.flip-card .flip-card-inner .flip-card-front
{
text-align: center;
}
.flip-card .flip-card-inner .flip-card-front h3
{
font-size: 32px;
/*color: #0072bc;*/
padding: 0;
margin: 0;
margin-top: 5%;
color: white;
}
.flip-card .flip-card-inner .flip-card-front p
{
padding: 0;
margin-top: -10px;
font-size: 10px;
color: white;
/* background-color: orange;
width: 100%;
height: 20%;
/*padding: 3px;
border-radius: 1px 1px 5px 5px;*/
align-self: center;
text-align: center;
}
.flip-card .flip-card-inner .flip-card-back p
{
padding: 0;
margin: 0;
align-self: center;
justify-content: center;
font-size: 8px;
color: white;
}
.main-panel .content .picPanel
{
margin-top: -40px;
margin-left: 10px;
}
.picPanel .AQI
{
padding-top: 0px;
margin-top: 0px;
}
.picPanel .AQI img
{
padding-top: 40px;
margin-top: 30px;
width: 60%; height: 60%;
}
.picPanel .AQI span
{
margin-top: 50px;
/*padding-top: 88px;*/
padding: 2px 10px;
color: white;
background-color: #0072bc;
border-radius: 10px;
}
.picPanel .AQI h1
{
font-size: 60px;
color: white;
margin-bottom: 0;
}
.picPanel .blank
{
/* width: 0px;
height: 0px;*/
}
.picPanel .Temp-hum
{
margin-top: 0px;
padding-top: 0px;
/*color: orange;*/
/*background-color: orange;*/
}
#temp
{
font-size: 30px;
}
/* .content .row2 .col2 .row1 .col-md-3 img
{
width: 30px; height: 30px;
}*/
/*.flip-card-inner{
min-width: 120px;
min-height: 120px;
}*/
}
@media (max-width: :1920px)
{
.flip-card {
background-color: transparent;
width: 160px;
height: 160px;
border-radius: 50%;
display: inline-grid;
border-radius: 50%;
margin-left: 50px;
perspective: 1000px;
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotate3d(45, 45,0, 180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #eee;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
.flip-card .flip-card-inner .flip-card-front h3
{
font-size: 45px;
color: #0072bc;
}
.flip-card .flip-card-inner .flip-card-back p
{
padding: 0;
margin: 0;
margin-left: 45px;
color: white;
}
.picPanel
{
/*display: inline;*/
}
.picPanel .AQI
{
padding-top: 60px;
}
.picPanel .AQI span
{
margin-top: 10px;
/*padding-top: 88px;*/
padding: 2px 10px;
color: white;
background-color: #0072bc;
border-radius: 10px;
}
.picPanel .AQI h1
{
margin-top: 2px;
font-size: 72px;
color: white;
margin-bottom: 1px;
}
.picPanel .Temp-hum
{
/* margin-top: -80px;
padding-top: -80px;
color: orange;*/
/*background-color: orange;*/
}
.picPanel .AQI img
{
margin-left: 100px;
padding-top: 140px;
width: 120%; height: 120%;
}
}