/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* Primary: #d0202c */
/* Secondary: #0a1d4e */
html,body{ height: 100%; }

.main{ height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: 50%;
background-image: url('../img/testimonial.jpg'); background-size: cover;
}


.topbar{ position: absolute; top: 0; width: 100%; padding: 15px; background: rgba(255,255,255,1); color: #111; display: flex; justify-items: 'space-around'}
.bottombar{position: absolute; bottom: 0; width: 100%; padding: 15px; background: rgba(255,255,255,1); color: #111;}

.topbar, .bottombar,.phonebox small{ color: #0b1d4f; }
.topbar i, .bottombar i,.phonebox{ color: #d0202b; }

.sellingpoints{ display: flex; justify-content: space-around; flex-grow: 1; text-align: center; font-size: 16px; align-items: center; }
.sellingpoints i{ font-size: 32px; margin-bottom: 10px; }

.phonebox{ font-size: 48px; text-align: center;     
    line-height: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.phonebox small{ font-size: 12px; line-height: 24px; }

.hero{ color: #fff; font-size: 24px; text-align: center; max-width: 920px; padding: 0 60px; }


.cta{ margin-top: 30px; }
.cta a{ padding: 10px 30px; margin: 0 15px; width: 260px; border-radius: 3px; display: inline-block; color: #fff; transform: background 0.3s; text-decoration: none !important; }
.cta .primary{ background: #d0202b; }
.cta .primary:hover{ background: #e1323d; }
.cta .secondary{ background: #0b1d4f;}
.secondary:hover{ background: #175ca5; }

.cta a i{ margin-right: 10px; }

.fa-ul{ font-size: 18px; text-align: left; }


.splitlist li{
    width: 50%; float: left; padding: 5px 10px;
}

.firstfour,.lastfour{ display: none; }

@media(max-width: 1360px){
    .logo img{ width: 240px; }
}

@media(max-width: 1130px){
    .topbar .sellingpoints{ display: none; }
    .firstfour{ display: block; }
    .phonebox{ margin-left: auto; }
}

@media(max-width: 830px){
    .bottombar{ display: none; }
    .lastfour{ display: block; }
}

@media(max-width: 768px){
    .topbar{ position: relative; }
    .main{ height: auto; display: block; background: none; padding-top: 60px; }
    body{ background-image: url('../img/testimonial.jpg'); background-position: 40% 50%; background-size: cover !important; height: auto; padding-bottom: 60px; }
    html{ height: auto; }
    .splitlist li{ width: 100%; text-align: center; }
    .fa-li{ position: relative !important; left: inherit !important; }
    .splitlist{ margin-left: 0px !important; }
}

iframe{ border-radius: 10px; border: none; margin-top: 60px; margin-bottom: 60px; height: 1280px; }

@media(max-width: 991px){
    iframe{ height: 990px; }
}

@media(max-width: 460px){
    .topbar{ display: block; text-align: center; }
    .phonebox{ font-size: 32px; margin-top: 10px; }
    .hero{ padding: 15px; }
    .main{ padding-top: 0px; }
    .hidemob{ display: none; }

    html,body{ height: auto !important; min-height: 100% !important; }
    body{ background-position: 60%; }

    .hero h1{ font-size: 28px; }
}