@font-face {
    font-family: Century_Gothic;
    src: url(../fonts/century-gothic-font/Century_Gothic.ttf);
}

html body{
    font-family: "Century_Gothic", "Century_Gothic";
}


/*hero box custom*/
.hero-box {
    flex-basis: 33.3%;
    background: #fff;
    min-height: 100%;
    padding: 40px 30px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.hero-box:hover .hero-box__circle {
    width: 100%;
    height: 100%;
    -webkit-transition: width 0.3s ease, border-bottom-left-radius 0.3s ease, border-bottom-right-radius 0.1s ease, border-top-left-radius 0.1s ease, border-top-right-radius 0.1s ease;
    transition: width 0.3s ease, border-bottom-left-radius 0.3s ease, border-bottom-right-radius 0.1s ease, border-top-left-radius 0.1s ease, border-top-right-radius 0.1s ease;
    top: 0;
    right: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.hero-box:hover .hero-box__circle:after {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.hero-box:hover .hero-box__circle:before {
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    position: absolute;
    right: 10px;
    top: 10px;
}
.hero-box:hover .hero-box__body {
    color: #e6e6e6;
    -webkit-transition: 0.15s ease;
    transition: 0.15s ease;
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}
.hero-box:hover .hero-box__title {
    color: white;
    -webkit-transition: 0.1s ease;
    transition: 0.1s ease;
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

.hero-box__title {
    font-weight: 600;
    position: relative;
    color: #091517;
}

.hero-box__body {
    font-size: 16px;
    /*font-size: 14px;*/
    color: #969696;
    position: relative;
}

.hero-box__circle {
    width: 50px;
    height: 50px;
    background: #c8c8c8;
    border-top-left-radius: 100rem;
    border-top-right-radius: 100rem;
    border-bottom-right-radius: 100rem;
    border-bottom-left-radius: 100rem;
    position: absolute;
    display: block;
    right: 50px;
    top: 30px;
    -webkit-transition: width 0.15s ease, height 0.15s ease, border-bottom-left-radius 0.3s ease, border-bottom-right-radius 0.3s ease, border-top-left-radius 0.3s ease, border-top-right-radius 0.3s ease;
    transition: width 0.15s ease, height 0.15s ease, border-bottom-left-radius 0.3s ease, border-bottom-right-radius 0.3s ease, border-top-left-radius 0.3s ease, border-top-right-radius 0.3s ease;
}
.hero-box__circle:after {
    width: 300px;
    height: 300px;
    position: absolute;
    top: -100px;
    right: -100px;
    background: rgba(255, 255, 255, 0.2);
    content: "";
    border-radius: 100rem;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.hero-box__circle:before {
    width: 25px;
    height: 25px;
    opacity: 0;
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItYXJyb3ctdXAtcmlnaHQiPjxsaW5lIHgxPSI3IiB5MT0iMTciIHgyPSIxNyIgeTI9IjciPjwvbGluZT48cG9seWxpbmUgcG9pbnRzPSI3IDcgMTcgNyAxNyAxNyI+PC9wb2x5bGluZT48L3N2Zz4=);
    background-size: cover;
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
}

.hero-box__circle--green {
    background-color: #999999;
    /*background-image: linear-gradient(#005ca8, #fd7d02);*/
}

.hero-box__circle--blue {
    background-color:  #005ca8;
}

.hero-box__circle--orange {
    /*background-color: #fd7d02;*/
    background-color: #ff8000;
}

/* End off hero box card*/



.mar-b-xs {
    margin-bottom: 16px!important;
}
._3Jcbm {
    border-spacing: 0;
    table-layout: fixed;
    min-width: 100%;
}

table {
    /*border-collapse: separate;*/
    /*border-spacing: 2px;*/
    color: #1d2329;
}

._3Jcbm td, ._3Jcbm th {
    width: 15%;
    position: relative;
    padding: 10px;
    border: 1px solid #d3d3d3;
    /*background-clip: padding-box;*/
}

._3Jcbm th{
    background-color: #005ca8;
}
.bg-ui-background-gray {
    background-color: #f2f2f2;
}
.color-ui-black {
    color: #1d2329;
}
.text-left {
    text-align: left;
}
*, :after, :before {
    box-sizing: border-box;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    hanging-punctuation: last;
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
}

th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: -internal-center;
}
.att_bold, .font-bold {
    font-family: font-bold, att_bold, sans-serif;
    font-weight: bold;
}


/*support*/
.support_card_title{
    position: absolute;
    bottom: 0;
    padding: 20px;
}

/*custom timeline*/

.timeline{

    background-color:#ff8000;
    /*background-color:#072736;*/
    color:#fff;
    padding:15px 10px;
    margin-bottom: 20px;
    /*box-shadow:0px 0px 10px rgba(0,0,0,.5);*/
}
.timeline ul{
    list-style-type:none;
    border-left:2px solid #fff;
    /*border-left:2px solid #094a68;*/
    padding:10px 5px;
}
.timeline ul li{
    padding:10px 20px;
    position:relative;
    cursor:pointer;
    transition:.5s;
}
.timeline ul li span{
    display:inline-block;
    background-color:#005ca8;
    /*background-color:#ff8000;*/
    border-radius:25px;
    padding:10px;
    font-size:15px;
    font-weight: 800;
    text-align:center;
}
.timeline ul li .content h3{
    color:#fff;
    /*color:#ff8000;*/
    font-size:17px;
    font-weight: 900;
    padding-top:10px;
}
.timeline ul li .content p{
    /*padding:5px 0px 15px 0px;*/
    margin-top: -20px;
    font-size:15px;
    color: #fff;
}
.timeline ul li:before{
    position:absolute;
    content:'';
    width:10px;
    height:10px;
    background-color:#fff;
    /*background-color:#34ace0;*/
    border-radius:50%;
    left:-11px;
    top:30px;
    transition:.5s;
}
.timeline ul li:hover{
    background-color: rgba(7, 31, 42, 0.72);
    color:#fff;
    /*background-color:#071f2a;*/
}

.timeline ul li:hover:before{
    background-color:#005ca8;
    box-shadow:0px 0px 10px 2px #005ca8;
    /*background-color:#ff8000;*/
    /*box-shadow:0px 0px 10px 2px #ff8000;*/

}
@media (max-width:300px){
    .timeline{
        width:100%;
        padding:30px 5px 20px 50px;
    }
    .timeline ul li .content h3{
        color:#34ace0;
        font-size:15px;
    }

}

/*custom timeline*/

@media only screen and (max-width: 300px) {

    /*.custom_banner_title{*/
    /*    position: absolute;*/
    /*    margin-top: 100px;*/

    /*    position: absolute;*/

    /*}*/

    /*.custom_banner_title .title{*/
    /*    !*color: #fff;*!*/
    /*    background-color: rgba(0,92,168,0.51);*/
    /*    font-size: 12px;*/
    /*    width: 100%;*/
    /*    margin-top: 4px;*/
    /*    margin-right: 5px;*/


    /*    font-weight: 600;*/
    /*    !*position: absolute;*!*/
    /*    !*bottom: 0px; top: 120px;left: 10px;*!*/
    /*    !*background-color: rgba(0,92,168,0.51);padding: 10px;*!*/
    /*}*/
}

@media only screen and (max-width: 767px) {

    /*.color-overlay {*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    background: blue;*/
    /*    opacity: .6;*/
    /*    position: absolute;*/
    /*}*/


    /*.custom_banner_title{*/
    /*    !*position: absolute;*!*/
    /*    !*margin-top: 160px;*!*/
    /*    !*background: rgb(0,92,168);*!*/
    /*    !*width: 100%;*!*/
    /*    !*height: 100%;*!*/
    /*    !*background-size: cover;*!*/

    /*}*/

    /*.custom_banner_title .title{*/

    /*    color: #fff;*/
    /*    font-size: 24px;*/
    /*    width: 100%;*/
    /*    padding: 10px;*/
    /*    margin: auto;*/
    /*    font-weight: 600;*/
    /*    !*position: absolute;*!*/
    /*    !*bottom: 0px; top: 120px;left: 10px;*!*/
    /*    !*background-color: rgba(0,92,168,0.51);padding: 10px;*!*/
    /*}*/
}

@media only screen and (max-width: 991px) {


   .title{
        color: #fff;
        font-size: 24px;
        width: 100%;
        padding: 10px;
        margin: auto;
        font-weight: 600;
        /*position: absolute;*/
        /*bottom: 0px; top: 120px;left: 10px;*/
        /*background-color: rgba(0,92,168,0.51);padding: 10px;*/
    }
}

.suptitle{
    font-size: 20px;
}

/*@media only screen and (max-width: 720px) {*/


/*   .suptitle{*/
/*       margin-top: -40px;*/
/*   }*/
/*}*/

/*@media only screen and (max-width: 500px) {*/


/*   .suptitle{*/
/*       margin-top: -70px;*/
/*   }*/
/*}*/


@media (min-width:200px) and (max-width: 335px) {

    .suptitle{
        margin-top: -140px;
        font-size: 14px;

    }

    .offer_seaction{
        /*background-color: red;*/
        margin-top: -140px;
    }
}

@media (min-width:401px) and (max-width: 530px) {


   .suptitle{
       margin-top: -80px;
       font-size: 17px;

   }

    .offer_seaction{
        /*background-color: red;*/
        margin-top: -80px;
    }
}

@media (min-width:501px) and (max-width:568px) {


   .suptitle{
       margin-top: -80px;
       font-size: 17px;
   }
}

@media (min-width:569px) and (max-width:768px) {


   .suptitle{
       margin-top: -70px;
       font-size: 17px;
   }
}
@media (min-width:340px) and (max-width: 400px) {


   p.suptitle{
       margin-top: -120px;
       font-size: 17px;
   }

    .offer_seaction{
        /*background-color: red;*/
        margin-top: -120px;
    }
}



@media (min-width:1px) and (max-width: 991px) {


    .outil_text{
        text-align: center;
    }
}

@media (min-width:768px) and (max-width:991px) {

    .custom-card .img-cont span{
        font-size: 30px;
    }

    .custom-card .content-cont .custom-card-body{
        font-size: 11px;
    }

    .custom-card .content-cont .custom-card-header{
        font-size: 20px;
    }

    /*.drop-down-window{*/
    /*    color: red;*/
    /*    text-align: center;*/
    /*    font-size: 18px;*/
    /*}*/
}