body{
    font-family:Cabin,sans-serif;
    padding:0;
    margin:0;
    text-align:center;
    -webkit-font-smoothing:antialiased
}
.container{
    max-width:1200px;
    padding:0 20px;
    margin:0 auto
}
.icon{
    width:120px;
    height:120px;
    background:url(images/icon.svg) no-repeat;
    background-size:contain;
    margin:100px auto 0;
    display:block
}
h1{
    color:#263238;
    margin-top:30px;
    font-size:40px;
    font-size:2.5rem
}
p{
    font-size:19.2px;
    font-size:1.2rem;
    color:#546e7a;
    line-height:140%;
    max-width:600px;
    margin:10px auto 0
}
.button{
    margin-top:50px;
    padding:20px 30px;
    font-size:19.2px;
    font-size:1.2rem;
    border-radius:50px;
    color:black;
    text-decoration:none;
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    font-weight:500;
    border:1px solid #c4c4c4
}
.button img{
    margin-right:10px
}
.separator{
    width:100px;
    height:1px;
    margin:80px auto 0;
    background:#b0bec5
}
h2{
    font-weight:400;
    color:#37474f;
    line-height:150%;
    max-width:800px;
    margin:80px auto 0;
    font-weight:700;
    font-size:32px;
    font-size:2rem
}
.showcase{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin:50px -25px 150px
}
.showcase__scene{
    margin:0 25px;
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    border-radius:40px;
    background:-webkit-linear-gradient(top,#ffe2d1 0,#ffceb1 100%);
    background:linear-gradient(180deg,#ffe2d1 0,#ffceb1 100%);
    min-height:600px;
    position:relative;
    overflow:hidden;
    z-index:1
}
.showcase__scene:after{
    content:'';
    width:500px;
    height:500px;
    border-radius:50%;
    background:-webkit-radial-gradient(circle,#ffe5d5 0,transparent 50%);
    background:radial-gradient(circle,#ffe5d5 0,transparent 50%);
    position:absolute;
    z-index:-1;
    left:calc(50% - 250px);
    top:-180px
}
.type-icon{
    height:50px;
    width:50px;
    margin:50px auto 0
}
h3{
    font-size:28px;
    color:#13283e;
    margin-bottom:15px;
    font-weight:500
}
.wide-paragraph{
    max-width:850px;
    margin-top:20px
}
.showcase p{
    color:#305675;
    margin-top:5px;
    padding:0 40px
}
.scene{
    position:absolute;
    bottom:0;
    top:0;
    left:0;
    right:0;
    pointer-events:none
}
.scene__front{
    position:absolute;
    left:calc(50% - 207px);
    bottom:-400px;
    -webkit-animation:scene-front 5s 1s ease-in-out infinite alternate;
    animation:scene-front 5s 1s ease-in-out infinite alternate;
    -webkit-transform:translate3d(0,50px,0);
    transform:translate3d(0,50px,0)
}
.scene__back{
    position:absolute;
    left:calc(50% - 207px);
    bottom:-300px;
    -webkit-animation:scene-back 5s 1s ease-in-out infinite alternate;
    animation:scene-back 5s 1s ease-in-out infinite alternate;
    -webkit-transform:translate3d(0,50px,0);
    transform:translate3d(0,50px,0)
}
@-webkit-keyframes scene-back{
    0%{
        -webkit-transform:translate3d(0,50px,0);
        transform:translate3d(0,50px,0)
    }
    100%{
        -webkit-transform:translate3d(0,-20px,0);
        transform:translate3d(0,-20px,0)
    }
}
@keyframes scene-back{
    0%{
        -webkit-transform:translate3d(0,50px,0);
        transform:translate3d(0,50px,0)
    }
    100%{
        -webkit-transform:translate3d(0,-20px,0);
        transform:translate3d(0,-20px,0)
    }
}
@-webkit-keyframes scene-front{
    0%{
        -webkit-transform:translate3d(0,50px,0);
        transform:translate3d(0,50px,0)
    }
    100%{
        -webkit-transform:translate3d(0,-50px,0);
        transform:translate3d(0,-50px,0)
    }
}
@keyframes scene-front{
    0%{
        -webkit-transform:translate3d(0,50px,0);
        transform:translate3d(0,50px,0)
    }
    100%{
        -webkit-transform:translate3d(0,-50px,0);
        transform:translate3d(0,-50px,0)
    }
}
.showcase__scene--morning{
    background:-webkit-linear-gradient(top,#e97822 0,#fad25d 100%);
    background:linear-gradient(180deg,#e97822 0,#fad25d 100%)
}
.showcase__scene--morning h3{
    color:#57380b
}
.showcase__scene--morning p{
    color:#7d5419
}
.showcase__scene--morning:after{
    background:-webkit-radial-gradient(circle,#f2a520 0,transparent 50%);
    background:radial-gradient(circle,#f2a520 0,transparent 50%)
}
.showcase__scene--morning .scene__front,.showcase__scene--morning .scene__back{
    -webkit-animation-delay:0s;
    animation-delay:0s
}
.showcase__scene--night{
    background:-webkit-linear-gradient(top,#24162c 0,#3f41a2 100%);
    background:linear-gradient(180deg,#24162c 0,#3f41a2 100%)
}
.showcase__scene--night h3{
    color:#bfbcf1
}
.showcase__scene--night p{
    color:#8e94e9
}
.showcase__scene--night:after{
    background:-webkit-radial-gradient(circle,#3c3b8f 0,transparent 50%);
    background:radial-gradient(circle,#3c3b8f 0,transparent 50%)
}
.showcase__scene--night .scene__front,.showcase__scene--night .scene__back{
    -webkit-animation-delay:2s;
    animation-delay:2s
}
.features-grid{
    display:-ms-grid;
    display:grid;
    -ms-grid-columns:(minmax(20rem,1fr))[auto-fill];
    grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));
    grid-gap:20px;
    margin-top:40px
}
.feature{
    padding:20px 40px;
    border-radius:40px
}
h4{
    font-size:24px;
    color:#13283e;
    margin-bottom:15px;
    font-weight:500
}
.copyright{
    margin:50px auto
}
@media(max-width:600px){
    .showcase{
        display:block;
        max-width:414px;
        margin:50px auto
    }
    .showcase__scene{
        margin:50px 0
    }
}