/* Header */
.fp-header{position: relative; height:500px; background: url('../../images/frontpage-slide.jpg') ; background-position: center top; background-size: cover; border-bottom: 1px solid #ddd;}
.fp-header > .upper{background:rgba(255,255,255,0.8); border-bottom: 1px solid #ddd;}
.fp-header > .upper > .middle{display: block; position: relative; width:1150px; height:72px; margin:0px auto; text-align: right;}

/* Content: intro */
.fp-intro{width:1150px; margin:0px auto; padding:35px 0px 0px 0px;}
.fp-intro > h1{display: block; margin:0px 0px 35px 0px; font-size:32px; line-height:36px; color:#333; font-weight: bold; text-align: center;}
.fp-intro > p{display: block;  margin:0px 0px 55px 0px; padding:0px 50px; font-size:15px; line-height:22px; color:#111; text-align: center;}

.fp-intro > .benefits{display: flex; flex-flow:row nowrap; margin:0px 0px 55px 0px; justify-content:space-between; align-items: stretch;}
.fp-intro > .benefits > .block{display: block; flex:0 1 auto;  width:31.5%; min-height:270px; padding:25px 25px; text-align: center; background: #fff; border:1px solid #e9e9e9; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);}
.fp-intro > .benefits > .block > .icon{display: block; margin:0px 0px 15px 0px;}
.fp-intro > .benefits > .block > .title{display: block; margin:0px 0px 15px 0px; font-size:22px; line-height:22px; font-weight: bold; color:#222;}
.fp-intro > .benefits > .block > .text{display: block; font-size:14px; line-height:22px; color:#222;}

.fp-intro > .actions{text-align: center;}
.fp-intro > .actions > .get-started{display:inline-block; vertical-align: middle; padding:15px 35px; font-size:14px; line-height:18px; color:#fff; background:#00a63f; border-radius: 3px; transition: all 0.5s; text-transform: uppercase;}
.fp-intro > .actions > .get-started:hover{background-color:#068737;}

@media all and (max-width: 1200px) {
    .fp-header > .upper > .middle{width:100%; padding:0px 20px;}
    .fp-intro{width:100%; padding-left:20px; padding-right:20px;}
}

@media all and (max-width: 800px) {
    .fp-header{height:300px;}
    .fp-intro{padding-top:30px;}
    .fp-intro > h1{margin-bottom:25px; font-size:28px; line-height:32px;}
    .fp-intro > p{margin-bottom:40px; padding:0px 20px;}
    .fp-intro > .benefits{margin-bottom:40px; padding:0px 20px;}
}

@media all and (max-width: 700px) {
    .fp-intro > .benefits{display: block;}
    .fp-intro > .benefits > .block{width:100%; margin:0px 0px 20px 0px; padding:15px 15px; min-height:0;}
    .fp-intro > .benefits > .block:last-child{margin-bottom: 0px;}
    .fp-intro > .benefits > .block > .icon{margin-bottom: 10px;}
    .fp-intro > .benefits > .block > .icon > img{width:80px;}
}

@media all and (max-width: 500px) {
    .fp-header{height:200px;}
    .fp-intro > .actions{padding:0px 20px;}
    .fp-intro > .actions > .get-started{width:100%;}
}