/* CUSTOM CSS GOES HERE
----------------------------------------------------------*/
#home-slider.carousel .btn-slide {
    padding: 18px 80px;
    /*background: linear-gradient(to top,#00476b,#0099e6);*/
    background: #0078d7;
    color: #f15a24;
    border-radius: 10px;
    margin-top: 15px;
    display: inline-block;
    font-size: 20px;
}

.bg-mask-blue {
    /*position: absolute;*/
    /*top: 0;*/
    left: 0;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(to top,#00476b,#0099e6, #00476b);*/
    /*background: linear-gradient(to top,#0078d7,#66aee7, #0078d7);*/
    /*background: linear-gradient(45deg, #005c8d 20%, #179bd7 80%);*/
    background: linear-gradient(60deg, #005c8d 20%, #179bd7 80%);
    opacity: 0.93;
    /*z-index: 1;*/
}

.bg-mask-blue1 {
    /*position: absolute;*/
    /*top: 0;*/
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(60deg, #1b75bc 30%, #179bd7 70%);
    opacity: 0.92;
    /*z-index: 1;*/
}


.left-shape {
    shape-outside: polygon(0 0, ...);
    float: left;
    width: 50%;
    border-right: 100px solid red;
    height: 100%;
}

.right-shape {
    shape-outside: polygon(100% 0, ...);
    float: right;
    width: 100%;
    border-right: 100px solid red;
    height: 100%;
}

#home-slider .active .animation.animated-item-1 {
    -webkit-animation: fadeInUp 300ms linear 300ms both;
    -moz-animation: fadeInUp 300ms linear 300ms both;
    -o-animation: fadeInUp 300ms linear 300ms both;
    -ms-animation: fadeInUp 300ms linear 300ms both;
    animation: fadeInUp 300ms linear 300ms both;
}

#home-slider .active .animation.animated-item-2 {
    -webkit-animation: fadeInUp 300ms linear 600ms both;
    -moz-animation: fadeInUp 300ms linear 600ms both;
    -o-animation: fadeInUp 300ms linear 600ms both;
    -ms-animation: fadeInUp 300ms linear 600ms both;
    animation: fadeInUp 300ms linear 600ms both;
}

#home-slider .active .animation.animated-item-3 {
    -webkit-animation: fadeInUp 300ms linear 900ms both;
    -moz-animation: fadeInUp 300ms linear 900ms both;
    -o-animation: fadeInUp 300ms linear 900ms both;
    -ms-animation: fadeInUp 300ms linear 900ms both;
    animation: fadeInUp 300ms linear 900ms both;
}

#home-slider .active .animation.animated-item-4 {
    -webkit-animation: fadeInUp 300ms linear 1200ms both;
    -moz-animation: fadeInUp 300ms linear 1200ms both;
    -o-animation: fadeInUp 300ms linear 1200ms both;
    -ms-animation: fadeInUp 300ms linear 1200ms both;
    animation: fadeInUp 300ms linear 1200ms both;
}

btn {
    margin-right: 4px;
    margin-bottom: 4px;
    font-family: "Varela Round", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    /*-ms-border-radius: 30px;*/
    border-radius: 30px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    padding: 4px 20px;
}

.fa-calendar-plus-o:before {
    content: "\f271";
}

.fa-pause-circle:before {
    content: "\f28b";
}

.fa-percent:before {
    content: "\f295";
}

.bg-feature {
    /*background-color: #e2f1f6;*/
    background-color: #fff;
    /*color: #EEE;*/
}

.nav-tabs > li > a.active {
    color: #1BBD36;
    border-radius: 0;
}

.menu {
    font-size: 14px;
    float: right;
    text-transform: uppercase;
    font-weight: 500;
}

    .menu ul.nav-tabs li {
        color: #000;
    }

#pricing-3 .boarder {
    /*text-align: center;*/
    border: 1px solid #AAA;
    border-top: 5px solid #AAA;
}

@media print {
    body {
        width: 1200px;
    }

    div[class|=col-] {
        float: left;
    }

    .col-sm-3 .col-sm-6 {
        width: 50%
    }
}

.introtxt {
    text-align: center;
    line-height: 58px;
    font-size: 30px;
    color: aqua;
}

#why {
    /*background: url(images/page-bg.png);*/
    background-color: #0077b3;
    background-size: cover;
    /*color: #006699;*/
    background: linear-gradient(45deg, #3F69AA 0%, #179bd7 100%);
    /*opacity: 8;*/
}

    #why .content h1 {
        font-size: 50px;
        line-height: 50px;
        margin-top: 0;
        font-weight: 300;
        color: aqua
    }

    #why .content .list-item li {
        color: #fff;
        line-height: 50px;
        font-size: 18px;
        text-transform: uppercase;
    }

        #why .content .list-item li i {
            font-size: 32px;
            padding-right: 5px;
            vertical-align: middle;
        }

    #why img {
        float: right;
    }

    #why .feature-item {
        padding: 48px 0;
    }

#hd-services-section,
#hd-services-section,
#hd-content-section, hd-work-section
#hd-work-section_2 {
    padding: 7em 0;
    /*background:url(images/page-bg.png);*/
    background-size: cover;
    color: #e5eff4;
    opacity: 8;
}

@media screen and (max-width: 768px) {
    #hd-work-section,
    #hd-services-section,
    #hd-content-section,
    #hd-work-section_2 {
        padding: 4em 0;
    }
}
/*.hd-grid {
    height: 302px;
    background-size: cover;
    background-position: center center;
    margin-bottom: 30px;
    position: relative;
}
.js .animate-box {
    opacity: 0;
}*/
.hd-grid {
    height: 280px;
    background-size: cover;
    background-position: center center;
    margin-bottom: 30px;
    position: relative;
    border-radius: 10px;
    /*border-color: #FF6633;*/
    border-color: orange;
    border: 3px solid #615550;
}

@media screen and (max-width: 480px) {
    .hd-grid {
        height: auto;
        /*border-color: #FF6633;*/
        border-color: orange;
    }
}

.hd-grid .image-popup {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    /*background: linear-gradient(0deg, #005c8d 50%, #179bd7 80%);*/
    opacity: 0;
    border-radius: 10px;
    border-color: #615550;
    /*border-color: #005c8d;*/
}

    .hd-grid .image-popup .prod-title {
        position: absolute;
        top: 50%;
        bottom: 20px;
        left: 20px;
        right: 20px;
        margin-top: -25px;
    }

        .hd-grid .image-popup .prod-title h3 {
            margin-bottom: 10px;
            color: #fff;
            font-size: 30px;
        }

        .hd-grid .image-popup .prod-title span {
            color: #fff;
        }

.hd-grid:hover .image-popup {
    opacity: 100;
}

.hd-grid h1 {
    font-size: 40px;
    line-height: 100px;
    margin-top: 0;
    font-weight: 500;
    color: #fff
}

.hd-grid h2 {
    font-size: 35px;
    line-height: 35px;
    margin-top: 0;
    font-weight: 200;
    color: #fff
}


.btn-primary {
    background-color: #fc0;
    color: #fff;
    border: 2px solid;
    border-color: #fc0;
    border-radius: 6px;
}

    .btn-primary.btn-outline {
        background: transparent;
        color: aqua;
        border: 4px solid #118DF0;
        border-radius: 15px;
        font-size: 30px;
    }

.btn.with-arrow {
    position: relative;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

    .btn.with-arrow i {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        right: 0px;
        top: 50%;
        margin-top: -8px;
        -webkit-transition: 0.2s;
        -o-transition: 0.2s;
        transition: 0.2s;
    }

    .btn.with-arrow:hover {
        padding-right: 50px;
    }

        .btn.with-arrow:hover i {
            color: #fff;
            right: 18px;
            visibility: visible;
            opacity: 1;
        }

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-control {
    border-radius: 20px
}

.form-right {
    position: relative;
    background-size: cover;
    color: #e5eff4;
    opacity: 8;
    height: 775px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.header-text {
    font-weight: 100;
    color: #fff;
    font-size: 36px;
    line-height: 40px;
}

.light {
    font-weight: lighter;
}

.regular {
    font-weight: 400;
}

.bold {
    font-weight: bold;
}
/* Colors */

.white {
    color: white;
}

.light-white {
    color: rgba(255, 255, 255, 0.5);
}

.white-bg {
    background: white;
}

.gray-bg {
    background: #f7f7f7;
}

.blue {
    color: #00a8ff;
}

.blue-bg {
    background: #00a8ff;
}

.muted {
    color: #989da0;
}

label {
    font-size: small;
}

.white_svg {
    position: absolute;
    left: 0;
    bottom: -11px;
    width: 100%;
    overflow: hidden;
}

.svg_white svg {
    fill: #223A5E;
    /*fill: #0074D9;*/
    /*fill: #001f3f;*/
    width: 101%;
}

.triangle {
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1 1'  preserveAspectRatio='none' enable-background='new 0,0  1,0  0,1' xml:space='preserve'><polyline points='0,0  1,0  0,1' fill='#f7fdff'/><polyline points='1,0  1,1  0,1' fill='#def7ff'/></svg>");
    /*height: 70px;*/
}

.polyg {
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1 1'  preserveAspectRatio='none' enable-background='new 0,0  1,0  0,1' xml:space='preserve'><polyline points='0,0 0.5,0 0,0.5 1,1 0.6,0.4,1 0,0.8 0,0.6' fill='#d0dbe2' /></svg>");
    /*height: 70px;*/
}

.tridown {
    border-radius: 10px;
    background: linear-gradient(to top left, #3F69AA 50%, transparent 50%), linear-gradient(to top right, #343148 50%, transparent 50%),#00539C;
}

.tridownb {
    background: linear-gradient(to top left, #3F69AA 31%, transparent 60%),linear-gradient(to bottom right, #223a5e 22%, transparent 55%), linear-gradient(to top right, #3F69AA 40%, transparent 55%),linear-gradient(to bottom, #def7ff 20%, transparent 20%),#3F69AA;
}


.vertical {
    float: left;
    border-right: 3px solid #343148;
    height: 135px;
}

    .vertical:last-child {
        border-right: 0;
    }

.boxed {
    position: relative;
    background: #343148;
    border: 4px solid #d75317;
    border-radius: 10px;
    height: auto;
}

.arrow_box {
    position: relative;
    background: #343148;
    border: 4px solid #d75317;
    border-radius: 10px;
}

    .arrow_box:after, .arrow_box:before {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .arrow_box:after {
        border-color: rgba(136, 183, 213, 0);
        border-top-color: #d75317;
        border-width: 30px;
        margin-left: -30px;
    }

    .arrow_box:before {
        border-color: rgba(194, 225, 245, 0);
        border-top-color: #485167;
        border-width: 26px;
        margin-left: -26px;
    }

.arrow_rightbox {
    position: relative;
    background: #343148;
    border: 4px solid #d75317;
    border-radius: 10px;
}

    .arrow_rightbox:after, .arrow_box:before {
        left: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .arrow_rightbox:after {
        border-color: rgba(136, 183, 213, 0);
        border-left-color: #d75317;
        border-width: 30px;
        margin-top: -30px;
    }

    .arrow_rightbox:before {
        border-color: rgba(194, 225, 245, 0);
        border-left-color: #d75317;
        border-width: 36px;
        margin-top: -36px;
    }

.tripoly {
    background: url(images/tripoly.svg);
}

.svgsize {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 110px;
    border: none;
}

.tripolyd {
    background: url(images/tripolyd.svg);
}

.tripolydb {
    background: url(images/tripolydb.svg);
}

.tripolydl {
    background: url(images/tripolydl.svg);
}