@charset "UTF-8";

@keyframes bg-color-anim {
    0% { background-color: #ced; }
    50% { background-color: #fff; }
    100% { background-color: #cef; }
}

.top-stripe {
    background: linear-gradient(to right, #b3e5bc 0%, #d9f2de 10%, #b3e5bc 30% );
    height: 8px;
}

.lc-promo section {
    padding: 80px 240px;
}
.lc-promo section.lc-section-title {
    background-repeat: no-repeat;
    background-color: rgb(44,43,50);
    background-position:  center, right 150px, center, -100px -50px;
    background-size: 100%, 10% auto, 10% auto, 10% auto;
    background-image: linear-gradient(12deg, rgba(44,43,50,1) 0%, rgba(255,45,32,0.6502976190476191) 100%),url('/images/logos/laravel-logomark-grey.svg'), url('/images/logos/laravel-logomark.svg'), url('/images/logos/laravel-logomark-grey.svg');
    padding: 80px 240px;
}

@media (max-width: 1023px) {
    .lc-promo section.lc-section-title {
        padding: 20px;
    }
}

.lc-promo section.lc-section-title,
.lc-promo section.lc-section-title * {
    color: #fff;
    text-shadow: 0px 0px 5px #000;
}
.lc-promo section.lc-section-text {
    background: #fff no-repeat;
    background-position: 0 0;
    background-image: url('/images/gray_curve_background.svg');
    background-size: cover;
}
.lc-promo section.lc-section-panels {
    background-position: top;
    background-image: url("/images/trianglify-laravel.png");
    background-size: cover;
    animation: bg-color-anim 10s infinite linear alternate;
    text-align: center;
}

.lc-promo section.lc-section-panels h2 {
    border-bottom: 5px solid transparent;
}

@media (max-width: 1023px) {
    .lc-promo section {
        padding: 20px;
    }
}
@media (min-width: 1024px) {
    .lc-promo section.lc-section-text {
        background-position: center;
        background-image:url('/images/gray_curve_background.svg');
        background-size: cover;
        background-attachment: fixed;
    }
    .lc-promo section.lc-section-text {
        padding: 0 240px;
    }
}


.lc-section-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    padding: 0;
    text-align: center;
}

.lc-section-row h1 {
    /*color: #1D3D90;*/
    /*color: #F05F1D;*/
    color: #333;

    border-bottom: 5px solid #F05F1D;
    display: inline-block;
    padding-bottom: 10px;
}

.lc-section-col {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px
}

.lc-section-col p {
    line-height: 2.5rem;
}

@media (min-width: 576px) {
    .lc-section-row {
        padding: 80px 0;
    }

    .lc-section-col {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .lc-section-col-left {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .lc-section-col-right {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }
}

.align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important
}


.lc-section-features-bg {
    background-image: url("/images/logos/laravel-logomark-grey.svg"), url("/images/logos/laravel-logomark-grey.svg");
    background-repeat: no-repeat, no-repeat;
    background-size: 30%;
    background-position: -10vw 50px, 85vw 400px;
    background-color: #E7E7EC
}

.lc-section-features {
    padding-right: 0;
    padding-left: 0;
    border-radius: 0
}

.lc-section-features-inner {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width: 576px) {
    .lc-section-features-inner {
        max-width: 540px
    }
}

@media (min-width: 768px) {
    .lc-section-features-inner {
        max-width: 720px
    }
}

@media (min-width: 992px) {
    .lc-section-features-inner {
        max-width: 960px
    }
}

@media (min-width: 1200px) {
    .lc-section-features-inner {
        max-width: 1140px
    }
}

.lc-section-text ul li, .lc-section-features ul li {
    background-image: url('/images/lucidcrystal_tick.svg');
    background-repeat: no-repeat;
    background-size: 50px;
    line-height: 50px;
    padding-left: 55px;
    list-style-type: none;
    margin: 20px 0;
}
@media (max-width: 576px) {
    .lc-section-text ul li, .lc-section-features ul li {
        background-size: 35px;
        line-height: 35px;
        padding-left: 45px;
    }
}

.lc-section-text, .lc-section-features {
    font-family: 'Open Sans', Calibri, Arial, Helvetica, Georgia, sans-serif;
}

.lc-logo {
    max-width: 224px;
    width: 15vw;
    padding: 50px 0;
}

@media (max-width: 576px) {
    .lc-logo {
        width: 36vw;
        text-align: center;
    }

    .lc-section-text .text-align-left h1 {
        text-align: center !important;
    }
}

.text-align-left {
    text-align: left !important;
}

.no-vertical-padding {
    padding-bottom: 0;
    padding-top: 0;
}

.lc-promo .lc-section-panels > h2 {
    color: #fff;
}

/* Animation */
.flip-in-x {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flip-in-x;
    animation-name: flip-in-x;
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@-webkit-keyframes flip-in-x {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
@keyframes flip-in-x {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    65% {
        -webkit-transform: scale3d(1.2, 1.2, 1.2);
        transform: scale3d(1.2, 1.2, 1.2);
    }
    95% {
        -webkit-transform: scale3d(1.2, 1.2, 1.2);
        transform: scale3d(1.2, 1.2, 1.2);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    65% {
        -webkit-transform: scale3d(1.2, 1.2, 1.2);
        transform: scale3d(1.2, 1.2, 1.2);
    }
    95% {
        -webkit-transform: scale3d(1.2, 1.2, 1.2);
        transform: scale3d(1.2, 1.2, 1.2);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}