/*------------------------------------------
    -   SERVICES  -
--------------------------------------------*/

.service{
    border-top          : 1px solid #ececec;
    background-color    : #f8f8f8;
}
.service .col-md-5{
    padding-top         : 65px;
}
.service .col-md-2{
    padding-top         : 40px;
}
.left-column .media {
    text-align          : right;
}
.media{
    margin-top          : 50px;
}

.left-column .media-left {
    float               : right;
    padding-left        : 20px;
    padding-right       : 0;
}
.media-left>a>.fa{
    height                  : 56px;
    width                   : 56px;
    border-radius           : 50%;
    border                  : 2px solid #cfcece;
    padding                 : 15px;
    margin-bottom           : 13px;
    display                 : table-cell;
    -webkit-transition      : all 0.2s ease 0s;
    -moz-transition         : all 0.2s ease 0s;
    -ms-transition          : all 0.2s ease 0s;
    -o-transition           : all 0.2s ease 0s;
    transition              : all 0.2s ease 0s;
}
.media-left>a>.fa:before{
    color                   : #ccc;
    font-size               : 25px;
}
.image-box img {
     width                  : 100%;
}

.media:hover .media-left a .fa{
    color                   : #999;
    border                  : 2px solid #e84711;
    background-color        : #e84700;
}

.media:hover .media-left a,
.media:hover .media-left > a > .fa:before{
    color               : #fff;
    text-decoration     : none;
}
.left-column .media-body {
    display         : block;
}
 .media-body {
    text-align: center;
    margin-top: -50px;
} 
.right-column .media-left.media-middle {
float               : left;
padding-right       :20px;
}
.media-body h2{
    font-size       : 15px;
    line-height     : 30px;
    color           : #515151;
}
.media-body h3{
    font-size       : 14px;
    color           : #777777;
}
.media-body span{
    color           : #777777;
}

/*FLAT ICON OVER WRITE*/

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
    font-family    : Flaticon;
    font-size      : 20px;
    font-style     : normal;
    margin-left    : 0;
}

.media.block-6.services.py-4.d-block.text-center {
    margin-top: 90px;
    
    width: 250px;
}
.media.block-6.services.py-4.d-block {
    height: 200px;
}
h3.heading.mb-3 {
    margin-top: 80px;
}
section.ftco-section.ourservice {
    margin-top: -60px;
    margin-bottom: -100px;
}


.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    justify-content: center;
}
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    
}
section.ourservice {
margin-top: -80px;
}
.ftco-section {
position: relative;
width: 100%;
display: block;
}
.ftco-section {
padding: 6em 0;
position: relative;
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}

@media (min-width: 768px){
    .pr-md-1, .px-md-1 {
        padding-right: 0.25rem !important;
    }}
    .align-self-stretch {
      /*  -ms-flex-item-align: stretch !important;
        -ms-grid-row-align: stretch !important;*/
        align-self: stretch !important;
    }
    
    .services .icon span {
        font-size: 54px;
        color: #6c87a9;
    }
    
    .fa-credit-card:before {
        content: "\f09d";
    }
    .fa-credit-card:before {
        content: "\f09d";
    }
    .fa-credit-card:before {
        content: "\f09d";
    }
    *, *::before, *::after {
        /*-webkit-box-sizing: border-box;*/
        box-sizing: border-box;
    }
/************************************************************************/
    .services {
        /* width: 100%;*/
         background: #f8f9fa;}
         /*-moz-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
         -webkit-transition: all 0.3s ease;
         -ms-transition: all 0.3s ease;
         transition: all 0.3s ease;
         -webkit-border-radius: 2px;
         -moz-border-radius: 2px;
         -ms-border-radius: 2px;**/
       /*  border-radius: 2px;*/
       /*  margin-left: 100px;
     }*/
     
     
     .fadeInUp {
        /* -webkit-animation-name: fadeInUp;*/
         animation-name: fadeInUp;
     }
     
     @media print {
         *,
         *::before,
         *::after {
           text-shadow: none !important;
           -webkit-box-shadow: none !important;
           box-shadow: none !important; }
         a:not(.btn) {
           text-decoration: underline; }
         abbr[title]::after {
           content: " (" attr(title) ")"; }
         pre {
           white-space: pre-wrap !important; }
         pre,
         blockquote {
           border: 1px solid #adb5bd;
           page-break-inside: avoid; }
         thead {
           display: table-header-group; }
         tr,
         img {
           page-break-inside: avoid; }
         p,
         h2,
         h3 {
           orphans: 3;
           widows: 3; }
         h2,
         h3 {
           page-break-after: avoid; }
         @page {
           size: a3; }
         body {
           min-width: 992px !important; }
         .container {
           min-width: 992px !important; }
         .navbar {
           display: none; }
         .badge {
           border: 1px solid #000; }
         .table {
           border-collapse: collapse !important; }
           .table td,
           .table th {
             background-color: #fff !important; }
         .table-bordered th,
         .table-bordered td {
           border: 1px solid #dee2e6 !important; }
         .table-dark {
           color: inherit; }
           .table-dark th,
           .table-dark td,
           .table-dark thead th,
           .table-dark tbody + tbody {
             border-color: #dee2e6; }
         .table .thead-dark th {
           color: inherit;
           border-color: #dee2e6; } }

           
           html {
            overflow-x: hidden; }
          
          body {
            font-family: "Nunito Sans", Arial, sans-serif;
            background: #fff;
            font-size: 16px;
            line-height: 1.8;
            font-weight: 400;
            color: #999999;
            overflow-x: hidden; }
            body.menu-show {
              overflow: hidden;
              position: fixed;
              height: 100%;
              width: 100%; }
          
          a {
            -webkit-transition: .3s all ease;
            -o-transition: .3s all ease;
            transition: .3s all ease;
            /*color: #fdfafa;*/
           }
            a:hover, a:focus {
              text-decoration: none;
              color: #fff;
              outline: none !important; }
          
          h1, h2, h3, h4, h5,
          .h1, .h2, .h3, .h4, .h5 {
            line-height: 1.5;
            color: #000000;
            font-weight: 400;
            font-family: "Nunito Sans", Arial, sans-serif; }
          
          .text-primary {
            color: #f54828 !important; }
        

/****************************************************************/
                 
.services {
    /*  width: 100;
      background: #f8f9fa;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      transition: all 0.3s ease;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      -ms-border-radius: 2px;
      border-radius: 2px; }*/

      @media (max-width: 767.98px) {
          margin-bottom: 4em; } }
      .services .icon {
        line-height: 1.3;
        position: relative;
        width: 120px;
        height: 120px;
        background: #fff;/*خلفية الايقونات */
        margin-bottom: 10px;
        margin-top: -80px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
        -webkit-box-shadow: 0px -4px 15px -15px rgba(0, 0, 0, 0.42);
        -moz-box-shadow: 0px -4px 15px -15px rgba(0, 0, 0, 0.42);
        box-shadow: 0px -4px 15px -15px rgba(0, 0, 0, 0.42); }
        .services .icon span {
          font-size: 54px;
          color: #6c87a9; }/*لون الايقونات*/
      .services .media-body h3 {
        font-size: 20px; 
      
      }
      .services:hover {
        background:rgb(244, 140, 96);/*rgb(235, 108, 53);/* #2f89fc; */
        padding: 10px;
        display: flex;
      
      }
        .services:hover .icon {
          -webkit-box-shadow: 0px -4px 15px -12px rgba(0, 0, 0, 0.32);
          -moz-box-shadow: 0px -4px 15px -12px rgba(0, 0, 0, 0.32);
          box-shadow: 0px -4px 15px -12px rgba(0, 0, 0, 0.32); }
          .services:hover .icon span {
            color: rgba(232,71,0, 1);/*#2f89fc;*/}/*لون الايقونات عند جعل الماوس يوشر عليها*/
        .services:hover h3 {
          color: #fff; }/*لون الخط تحت الايقونات */
          
        .text-center {
          text-align: center !important;
      }
      .pb-4, .py-4 {
          padding-bottom: 1.5rem !important;
      }
      .pt-4, .py-4 {
          padding-top: 1.5rem !important;
      }




        .align-items-center {
          -webkit-box-align: center !important;
          -ms-flex-align: center !important;
          align-items: center !important;
      }
      .justify-content-center {
          -webkit-box-pack: center !important;
          -ms-flex-pack: center !important;
          justify-content: center !important;
      }


      .services .media-body h3 {
        font-size: 20px;
      
    }
    
    .mb-3, .my-3 {
        margin-bottom: 1rem !important;
    }





    .d-block {
      display: block !important;
  }

                    
  .media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start; }
  
  .media-body {
    /*-webkit-box-flex: 1;
    -ms-flex: 1;*/
    flex: 1; 
    display         : block;
  }
  
  .list-group {
    display: block;
  /*  display: -ms-flexbox;*/
    display: flex;
    /*-webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;*/
    padding-left: 0;
    margin-bottom: 0; }
  
  .list-group-item-action {
  /*  width: 100%;*/
    color: #495057;
    text-align: inherit; }
    .list-group-item-action:hover, .list-group-item-action:focus {
      z-index: 1;
      color: #495057;
      text-decoration: none;
      background-color: #f8f9fa; }
    .list-group-item-action:active {
      color: #212529;
      background-color: #e9ecef; }
  


                        /* card */
                        
                        .card-block .btn-outline-primary {
                            width: 100%;
                            border-top-left-radius: 0;
                            border-top-right-radius: 0;
                            bottom: 0;
                            left: 0;
                            position: absolute;
                          }
                          
                          .card {
                            margin: 20px 0;
                          }
                          
                          /* Flip Cards CSS */
                          .card-container {
                            perspective: 700px;
                            margin-top: 50px;
                          }
                        
                          .card-flip {
                            position: relative;
                            margin-top: 200px;
                            width: 100%;
                            transform-style: preserve-3d;
                            height: 200px;
                            transition: all 0.5s ease-out;
                            background: white;
                            border: none;
                            box-shadow: 5px 5px 5px 5px rgb(0 0 0 / 20%);
                        }
                          
                          .card-flip div {
                            backface-visibility: hidden;
                            transform-style: preserve-3d;
                            width: 100%;
                            border: none;
                           
                          }
                          .frontbody {
                            text-align: center;
                        }
                          
                          .card-flip .front {
                            position: relative;
                            z-index: 1;
                          }
                          /* under our service*/
                         
                          .card-flip .back {    
                            position: relative;
                            z-index: 0;
                            transform: rotateY(-180deg);
                            margin-top: 50px;
                          }
                          
                          /* .card-container:hover .card-flip {
                            transform: rotateY(180deg);
                          } */
                          
                        
                         .container.servicecontainer {      /*our service*/
                            margin-top: 60px;
                        }
                        .card-block .btn-outline-primary {
                          width: 100%;
                          border-top-left-radius: 0;
                          border-top-right-radius: 0;
                          bottom: 0;
                          left: 0;
                          position: absolute;
                        }
                        
                        .card {
                          margin: 20px 0;
                        }
                        
                        
                        
                        .owl-stage-outer {
                            margin-top: 30px;
                        }
                        .front.card-block {
                            height: 116px;
                            position: absolute;}
                        
                            .wow.zoomIn.col-xs-12.text-center.p-padding.animated {
                                visibility: visible;
                                animation-name: zoomIn;
                               
                            }
                            .section-title {
                                position: relative;
                               
                            }
   
/*image*/
/*button*/
.formservice button.btn.btn-primary {
    width: 400px;
    border-radius: 20px;
}

  
.formservice *,
.formservice  *::before,
.formservice  *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
 
  
  
  .formservice .imgforms {
    height: 1350px;
    width: 100%;
}


.formservice .input-group-icon {
    position: relative;
    margin: 10px;
  
  }
  
  .formservice .input-group-icon .input-box {
    padding-left: 2.8rem;
    vertical-align: middle;
  }
  
  .formservice .input-group-icon .input-box-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    color: #053e74;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  
  
  .formservice .form-label {
    margin-bottom: 0.5rem;
  }
  
  .col-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  
  .col-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 8.33333%;
  }
  
  .col-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.66667%;
  }
  
  .col-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
  }
  
  .col-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.33333%;
  }
  
  .col-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 41.66667%;
  }
  
  .col-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
  }
  
  .col-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 58.33333%;
  }
  
  .col-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 66.66667%;
  }
  
  .col-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 75%;
  }
  
  .col-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 83.33333%;
  }
  
  .col-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 91.66667%;
  }
  
  .col-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }
  .formservice .col-form-label {
    padding-top: calc(0.5rem + 1px);
    padding-bottom: calc(0.5rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
  }
  
  .formservice .col-form-label-lg {
    padding-top: calc(0.7rem + 1px);
    padding-bottom: calc(0.7rem + 1px);
    font-size: 1rem;
  }
  
  .formservice .col-form-label-sm {
    padding-top: calc(0.1rem + 1px);
    padding-bottom: calc(0.1rem + 1px);
    font-size: 0.875rem;
  }
  
  .formservice .container,
  .formservice .container-fluid,
  .formservice  .container-sm,
  .formservice .container-md,
  .formservice .container-lg,
  .formservice .container-xl,
  .formservice  .container-xxl {
    width: 100%;
    padding-right: var(--bs-gutter-x, 1rem);
    padding-left: var(--bs-gutter-x, 1rem);
    margin-right: auto;
    margin-left: auto;
  }
  
  @media (min-width: 576px) {
    .formservice .container,  .formservice .container-sm {
      max-width: 540px;
    }
  }
  
  @media (min-width: 768px) {
    .formservice .container,  .formservice .container-sm,  .formservice .container-md {
      max-width: 720px;
    }
  }
  
  @media (min-width: 992px) {
    .formservice .container {
      max-width: 960px;
    }
  }
  
  @media (min-width: 1200px) {
    .formservice  .container {
      max-width: 1140px;
    }
  }
  
  @media (min-width: 1540px) {
    .formservice .container {
      max-width: 1480px;
    }
  }
  

  @media (min-width: 576px) {
    .col-sm {
      -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
      flex: 1 0 0%;
    }
    .col-sm-auto {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: auto;
    }
    .col-sm-1 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 8.33333%;
    }
    .col-sm-2 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 16.66667%;
    }
    .col-sm-3 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 25%;
    }
    .col-sm-4 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 33.33333%;
    }
    .col-sm-5 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 41.66667%;
    }
    .col-sm-6 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 50%;
    }
    .col-sm-7 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 58.33333%;
    }
    .col-sm-8 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 66.66667%;
    }
    .col-sm-9 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 75%;
    }
    .col-sm-10 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 83.33333%;
    }
    .col-sm-11 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 91.66667%;
    }
    .col-sm-12 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 100%;
    }
  }
  
  @media (min-width: 768px) {
    .col-md {
      -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
      flex: 1 0 0%;
    }
   
    .col-md-auto {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: auto;
    }
    .col-md-1 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 8.33333%;
    }
    .col-md-2 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 16.66667%;
    }
    .col-md-3 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 25%;
    }
    .col-md-4 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 33.33333%;
    }
    .col-md-5 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 41.66667%;
    }
    .col-md-6 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 50%;
    }
    .col-md-7 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 58.33333%;
    }
    .col-md-8 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 66.66667%;
    }
    .col-md-9 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 75%;
    }
    .col-md-10 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 83.33333%;
    }
    .col-md-11 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 91.66667%;
    }
    .col-md-12 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 100%;
    }}
   
  @media (min-width: 992px) {
    .col-lg {
      -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
      flex: 1 0 0%;
    }
    .col-lg-auto {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: auto;
    }
    .col-lg-1 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 8.33333%;
    }
    .col-lg-2 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 16.66667%;
    }
    .col-lg-3 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 25%;
    }
    .col-lg-4 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 33.33333%;
    }
    .col-lg-5 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 41.66667%;
    }
    .col-lg-6 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 50%;
    }
    .col-lg-7 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 58.33333%;
    }
    .col-lg-8 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 66.66667%;
    }
    .col-lg-9 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 75%;
    }
    .col-lg-10 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 83.33333%;
    }
    .col-lg-11 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 91.66667%;
    }
    .col-lg-12 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 100%;
    }}
  @media (min-width: 1200px) {
    .col-xl {
      -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
      flex: 1 0 0%;
    }
    .row-cols-xl-auto > * {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: auto;
    }
    .row-cols-xl-1 > * {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 100%;
    }
    .row-cols-xl-2 > * {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 50%;
    }
    .row-cols-xl-3 > * {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 33.33333%;
    }
    .row-cols-xl-4 > * {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 25%;
    }
    .row-cols-xl-5 > * {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 20%;
    }
    .row-cols-xl-6 > * {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 16.66667%;
    }
    .col-xl-auto {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: auto;
    }
    .col-xl-1 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 8.33333%;
    }
    .col-xl-2 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 16.66667%;
    }
    .col-xl-3 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 25%;
    }
    .col-xl-4 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 33.33333%;
    }
    .col-xl-5 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 41.66667%;
    }
    .col-xl-6 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 50%;
    }
    .col-xl-7 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 58.33333%;
    }
    .col-xl-8 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 66.66667%;
    }
    .col-xl-9 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 75%;
    }
    .col-xl-10 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 83.33333%;
    }
    .col-xl-11 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: 91.66667%;
    }
    .col-xl-12 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex:1 0 0%;
      width: 100%;
    }
        .col-xl-13 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width:   9000px;
    }
  }