@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
-webkit-perspective: 400px;
-webkit-transform: rotate3d(1, 0, 0, 90deg);
transform: rotate3d(1, 0, 0, 90deg);
background-color: rgba(26, 188, 156, 0.9);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: in-top 300ms ease 0ms 1 forwards;
animation: in-top 300ms ease 0ms 1 forwards;
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-animation: in-right 300ms ease 0ms 1 forwards;
animation: in-right 300ms ease 0ms 1 forwards;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
animation: in-bottom 300ms ease 0ms 1 forwards;
-webkit-transform-origin: 0% 0%;
-webkit-animation: in-left 300ms ease 0ms 1 forwards;
animation: in-left 300ms ease 0ms 1 forwards;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: out-top 300ms ease 0ms 1 forwards;
animation: out-top 300ms ease 0ms 1 forwards;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: out-right 300ms ease 0ms 1 forwards;
animation: out-right 300ms ease 0ms 1 forwards;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
animation: out-bottom 300ms ease 0ms 1 forwards;
-webkit-transform-origin: 0% 0%;
-webkit-animation: out-left 300ms ease 0ms 1 forwards;
animation: out-left 300ms ease 0ms 1 forwards;
@-webkit-keyframes in-top {
-webkit-transform: rotate3d(-1, 0, 0, 90deg);
transform: rotate3d(-1, 0, 0, 90deg);
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transform: rotate3d(-1, 0, 0, 90deg);
transform: rotate3d(-1, 0, 0, 90deg);
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
@-webkit-keyframes in-right {
-webkit-transform: rotate3d(0, -1, 0, 90deg);
transform: rotate3d(0, -1, 0, 90deg);
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transform: rotate3d(0, -1, 0, 90deg);
transform: rotate3d(0, -1, 0, 90deg);
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
@-webkit-keyframes in-bottom {
-webkit-transform: rotate3d(1, 0, 0, 90deg);
transform: rotate3d(1, 0, 0, 90deg);
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transform: rotate3d(1, 0, 0, 90deg);
transform: rotate3d(1, 0, 0, 90deg);
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
@-webkit-keyframes in-left {
-webkit-transform: rotate3d(0, 1, 0, 90deg);
transform: rotate3d(0, 1, 0, 90deg);
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transform: rotate3d(0, 1, 0, 90deg);
transform: rotate3d(0, 1, 0, 90deg);
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
@-webkit-keyframes out-top {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transform: rotate3d(-1, 0, 0, 104deg);
transform: rotate3d(-1, 0, 0, 104deg);
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transform: rotate3d(-1, 0, 0, 104deg);
transform: rotate3d(-1, 0, 0, 104deg);
@-webkit-keyframes out-right {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transform: rotate3d(0, -1, 0, 104deg);
transform: rotate3d(0, -1, 0, 104deg);
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transform: rotate3d(0, -1, 0, 104deg);
transform: rotate3d(0, -1, 0, 104deg);
@-webkit-keyframes out-bottom {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transform: rotate3d(1, 0, 0, 104deg);
transform: rotate3d(1, 0, 0, 104deg);
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transform: rotate3d(1, 0, 0, 104deg);
transform: rotate3d(1, 0, 0, 104deg);
@-webkit-keyframes out-left {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transform: rotate3d(0, 1, 0, 104deg);
transform: rotate3d(0, 1, 0, 104deg);
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transform: rotate3d(0, 1, 0, 104deg);
transform: rotate3d(0, 1, 0, 104deg);
color: rgba(255, 255, 255, 0.9);
color: rgba(255, 255, 255, 0.8);
background-color: #ECF0F1;
color: rgba(52, 73, 94, 0.6);
box-shadow: inset 0 2px 20px #e6ebed;
fill: rgba(52, 73, 94, 0.2);
font-family: 'Bree Serif', serif;
font-family: 'Bree Serif', serif;
color: rgba(52, 73, 94, 0.4);