.container-fluid{
    margin: 0;

}
.topnav{
     overflow: hidden; 
    background-color: #333;
    
   
}
.topnav a{
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 19px;
   
}
.topnav a:hover{
    background-color: #ddd;
    color: black;
}
.topnav a.active{
    background-color: #04aa62;
    color:white;
}
.topnav .icon{
    display: none;
}/* 
.topnav input[type=text]{
    float: right;
    padding: 6px;
    border: none;
    margin: 8px 16px;
    font-size: 17px;
    width: 300px;
    border-radius: 5px;
} */

@media screen and (max-width:767px){
    .topnav a, .topnav input[type=text]{
        float: none;
        padding: 14px;
        margin: 0;
        font-size: 17px;
        width: 100%;
        border-radius: 5px;
        text-align: left;
        height: auto;
    }
    .topnav input[type=text]{
        border: 1px solid #ccc;
    }
}
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child){
        display: none;
    }
    .topnav a.icon{
        float: right;
        display: block;
    }
}
 
@media screen and (max-width:600px){
    .topnav .responsive{
        position: relative
    }
    .topnav .responsive .icon{
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav .responsive a{
        float: none;
        display: block;
        text-align: left;
    }
}
.container{
    width: 70%;
    margin: 0 auto;
    padding: 0 15px;
}

@media ( min-width: 768px){
    .container{
        width:750px;
    }
}
@media ( min-width: 992px){
    .container{
        width: 970px;
    }
}
@media ( min-width: 1200px){
    .container{
        width:1170px;
    }
}
@media ( min-width: 1280px){
    .container{
        width:1250px;
    }
}
.flex{
    display: flex;
    
}
.row{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-gap:15px;
}
.column-xs-12{
    grid-column:span 12;
}
.column-xs-11{
    grid-column: span 11;
}
.column-xs-10{
    grid-column: 10;
}
.column-xs-9{
    grid-column: 9;
}
.column-xs-8{
    grid-column: 8;
}
.column-xs-7{
    grid-column: 7;
}
.column-xs-6{
    grid-column: span 6;
}
.column-xs-6{
    grid-column: span 6;
}
.column-xs-5{
    grid-column: span 5;
}
.column-xs-4{
    grid-column: span 4;
}
.column-xs-3{
    grid-column: span 3;
}
.column-xs-2{
    grid-column: span 2;
}
.column-xs-1{
    grid-column: span 1;
}


@media (max-width: 500px){
    .column-xxs-12{
        grid-column:span 12;
    }
 
    .column-xxs-11{
        grid-column:span 11;
    }
    .column-xxs-10{
        grid-column: span 10;
    }
    .column-xxs-9{
        grid-column:span 9;
    }
    .column-xxs-8{
        grid-column: span 8;
    }
    .column-xxs-7{
        grid-column: span 7;
    }
    .column-xxs-6{
        grid-column: span 6;
    }
    .column-xxs-5{
        grid-column: span 5;
    }
    .column-xxs-4{
        grid-column: span 4;
    }
    .column-xxs-3{
        grid-column: span 3;
    }
    .column-xxs-2{
        grid-column: span 2;
    }
    .column-xxs-1{
        grid-column: span 1;
    }
}


@media (min-width: 780px){
    .column-xs-12{
        grid-column:span 12;
    }
 
    .column-xs-11{
        grid-column:span 11;
    }
    .column-xs-10{
        grid-column: span 10;
    }
    .column-xs-9{
        grid-column:span 9;
    }
    .column-xs-8{
        grid-column: span 8;
    }
    .column-xs-7{
        grid-column: span 7;
    }
    .column-xs-6{
        grid-column: span 6;
    }
    .column-xs-5{
        grid-column: span 5;
    }
    .column-xs-4{
        grid-column: span 4;
    }
    .column-xs-3{
        grid-column: span 3;
    }
    .column-xs-2{
        grid-column: span 2;
    }
    .column-xs-1{
        grid-column: span 1;
    }
}


@media (min-width: 992px){
    .column-sm-12{
        grid-column:span 12;
    }
    .column-sm-11{
        grid-column:span 11;
    }
    .column-sm-10{
        grid-column: span 10;
    }
    .column-sm-9{
        grid-column:span 9;
    }
    .column-sm-8{
        grid-column: span 8;
    }
    .column-sm-7{
        grid-column: span 7;
    }
    .column-sm-6{
        grid-column: span 6;
    }
    .column-sm-5{
        grid-column: span 5;
    }
    .column-sm-4{
        grid-column: span 4;
    }
    .column-sm-3{
        grid-column: span 3;
    }
    .column-sm-2{
        grid-column: span 2;
    }
    .column-sm-1{
        grid-column: span 1;
    }
}

@media(min-width:1200px){
    .col-lg-12{
        grid-column: span 12; 
    }
    .col-lg-11{
        grid-column: span 11;
    }
    .col-lg-10{
        grid-column: span 10;
    }
    .col-lg-9{
        grid-column: span 9;
    }
    .col-lg-8{
        grid-column: span 8;
    }
    .col-lg-7{
        grid-column: span 7;
    }   
    .col-lg-6{
        grid-column: span 6;
    }   
    .col-lg-5{
        grid-column: span 5;
    }    
    .col-lg-4{
        grid-column: span 4;
    }    
    .col-lg-3{
        grid-column: span 3;
    }   
    .col-lg-2{
        grid-column: span 2;
    }
    .col-lg-1{
        grid-column: span 1;
    }
    
}


@media(min-width:1280px){
    .col-xl-12{
        grid-column: span 12; 
    }
    .col-xl-11{
        grid-column: span 11;
    }
    .col-xl-10{
        grid-column: span 10;
    }
    .col-xl-9{
        grid-column: span 9;
    }
    .col-xl-8{
        grid-column: span 8;
    }
    .col-xl-7{
        grid-column: span 7;
    }   
    .col-xl-6{
        grid-column: span 6;
    }   
    .col-xl-5{
        grid-column: span 5;
    }    
    .col-xl-4{
        grid-column: span 4;
    }    
    .col-xl-3{
        grid-column: span 3;
    }   
    .col-xl-2{
        grid-column: span 2;
    }
    .col-xl-1{
        grid-column: span 1;
    }
    
}
.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}
.text-justify{
    text-align: justify;
}
.text-5{
    font-size: 5px;
}
.text-10{
    font-size: 10px;
}
.text-12{
    font-size: 12px;
}
.text-13{
    font-size: 13px;
}
.text-14{
    font-size: 14px;
}
.text-15{
    font-size: 15px;
}
.text-20{
    font-size: 20px;
}
.text-25{
    font-size: 25px;
}
.text-30{
    font-size: 30px;
}
.text-35{
    font-size: 35px;
}
.text-40{
    font-size: 5px;
}
.text-45{
    font-size: 45px;
}
.text-50{
    font-size: 50px;
}

.btn{
    border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    cursor:pointer;
    display: inline-block;
    transition-duration: 0.4s;
}
.btn-primary{
    background-color: blue;
}
.btn-success{
    background-color: green;
}
.btn-danger{
    background-color: red;
}
.btn-info{
    background-color: skyblue;
}
.btn-warning{
    background-color: orange;
}
.btn-default{
    background-color: white;
}
.btn-sm{
    width: 100px;
}
.btn-medium{
    width: 120px;
}
.btn-lg{
    width: 250px;
}
.btn-xl{
    width: 500px;
}
.btn-block{
    width: 100%;
}
.rounded-2{
    border-radius: 2px;
}
.rounded-4{
    border-radius: 4px;
}
.rounded-6{
    border-radius: 6px;
}
.rounded-8{
    border-radius: 8px;
}
.rounded-10{
    border-radius: 10px;
}.rounded-12{
    border-radius: 12px;
}
.rounded-14{
    border-radius: 14px;
}
.rounded-16{
    border-radius: 16px;
}
.rounded-18{
    border-radius: 18px;
}
.rounded-20{
    border-radius: 20px;
}
.rounded-22{
    border-radius: 22px;
}
.rounded-24{
    border-radius: 24px;
}
.rounded-26{
    border-radius: 26px;
}
.rounded-28{
    border-radius: 28px;
}

.rounded-32{
    border-radius: 32px;
}
.rounded-34{
    border-radius: 34px;
}
.rounded-36{
    border-radius: 36px;
}
.rounded-38{
    border-radius: 38px;
}
.rounded-40{
    border-radius: 40px;
}
.rounded-42{
    border-radius: 42px;
}
.rounded-44{
    border-radius: 44px;
}.rounded-46{
    border-radius: 46px;
}
.rounded-48{
    border-radius: 48px;
}
.rounded-50{
    border-radius: 50px;
}
.rounded-52{
    border-radius: 52px;
}
.rounded-54{
    border-radius: 54px;
}
.rounded-56{
    border-radius: 56px;
}
.rounded-58{
    border-radius: 58px;
}
.rounded-60{
    border-radius: 60px;
}
.rounded-62{
    border-radius: 62px;
}
.rounded-64{
    border-radius: 64px;
}
.rounded-66{
    border-radius: 66px;
}
.rounded-68{
    border-radius: 68px;
}
.rounded-70{
    border-radius: 70px;
}
.rounded-72{
    border-radius: 72px;
}
.rounded-74{
    border-radius: 74px;
}
.rounded-76{
    border-radius: 76px;
}
.rounded-78{
    border-radius: 78px;
}
.rounded-80{
    border-radius: 80px;
}
.rounded-80{
    border-radius: 82px;
}
.rounded-84{
    border-radius: 84px;
}
.rounded-86{
    border-radius: 86px;
}
.rounded-88{
    border-radius: 88px;
}
.rounded-90{
    border-radius: 90px;
}
.rounded-92{
    border-radius: 92px;
}
.rounded-94{
    border-radius: 94px;
}
.rounded-96{
    border-radius: 96px;
}
.rounded-98{
    border-radius: 98px;
}
.rounded-100{
    border-radius: 100px;
}

.bg-default{
    background-color: white;
}
.bg-primary{
    background-color: blue;
}
.bg-success{
    background-color: green;
}
.bg-danger{
    background-color: red;
}
.bg-info{
    background-color: skyblue;
}
.bg-warning{
    background-color: orange;
}
.bg-default{
    background-color: white;
}
.bg-black{
    background-color: black;
}
.text-primary{
    color: blue;
}
.text-success{
    color: green;
}
.text-danger{
    color: red;
}
.text-info{
    color: skyblue;
}
.text-warning{
    color: orange;
}
.text-default{
    color: white;
}
.ml-1{
    margin-left: 1px;
}
.ml-2{
   margin-left: 2px;
}
.ml-3{
    margin-left: 3px;
}
.ml-5{
    margin-left: 5px;
}
.ml-6{
    margin-left: 6px;
}
.ml-10{
    margin-left: 10px;
}
.ml-15{
    margin-left: 15px;
}
.ml-20{
    margin-left: 20px;
}
.ml-25{
    margin-left: 25px;
}
.ml-30{
    margin-left: 30px;
}
.ml-35{
    margin-left: 35px;
}
.ml-40{
    margin-left: 40px;
}
.ml-45{
    margin-left: 45px;
}
.ml-50{
    margin-left: 50px;
}
.ml-55{
    margin-left: 55px;
}
.ml-60{
    margin-left: 60px;
}
.ml-65{
    margin-left: 65px;
}
.ml-70{
    margin-left: 70px;
}
    .ml-80{
        margin-left: 65px;
}
.ml-85{
    margin-left: 85px;
}
.ml-90{
    margin-left: 90px;
}
.ml-95{
    margin-left: 95px;
}
.ml-100{
    margin-left: 100px;
}
.ml-200{
    margin-left: 200px;
}
.ml-250{
    margin-left: 250px;
}
.mr-1{
    margin-right: 1px;
}
.mr-2{
    margin-right: 2px;
}
.mr-3{
    margin-right: 3px;
}
.mr-5{
    margin-right: 5px;
}
.mr-6{
    margin-right: 6px;
}
.mr-10{
  margin-right: 10px;
}
.mr-15{
    margin-right: 15px;
}
.mr-20{
    margin-right: 20px;
}
.mr-25{
    margin-right: 25px;

}
.mr-30{
    margin-right: 30px;

}
.mr-35{
    margin-right: 35px;

}
.mr-40{
    margin-right: 40px;

}
.mr-45{
    margin-right: 45px;

}
.mb-0{
    margin-bottom: 0px;
}
.mb-10{
    margin-bottom: 10px;
}
.mb-15{
    margin-bottom: 15px;
}
.mb-20{
    margin-bottom: 20px;
}
.mb-25{
    margin-bottom: 25px;
}
.mb-30{
    margin-bottom: 30px;
}
.mb-35{
    margin-bottom: 35px;
}
.mb-40{
    margin-bottom: 40px;
}
.mb-45{
    margin-bottom: 45px;
}
.mb-50{
    margin-bottom: 50px;
}
.mt-0{
    margin-top: 0px;
}
.mt-5{
    margin-top: 5px;
}
.mt-10{
    margin-top: 10px;
}
.mt-20{
    margin-top: 20px;
}
.mt-25{
    margin-top: 25px;
}
.mt-30{
    margin-top: 30px;
}
.mt-35{
    margin-top: 35px;
}
.mt-40{
    margin-top: 40px;
}
.mt-45{
    margin-top: 45px;
}
.mt-50{
    margin-top: 50px;
}
.mt-55{
    margin-top: 55px;
}
.mt-60{
    margin-top: 60px;
}
.mt-65{
    margin-top: 65px;
}
.mt-70{
    margin-top: 70px;
}
.mt-755{
    margin-top: 75px;
}
.mt-80{
    margin-top: 80px;
}
.mt-85{
    margin-top: 85px;
}
.mt-90{
    margin-top: 90px;
}
.mt-95{
    margin-top: 95px;
}
.mt-100{
    margin-top: 100px;
}
.mt-200{
    margin-top: 200px;
}







.pt-0{
    padding-top: 0px;
}
.pt-1{
    padding-top: 1px;
}
.pt-2{
    padding-top: 2px;
}
.pt-3{
    padding-top: 3px;
}
.pt-5{
    padding-top: 1px;
}
.pt-10{
    padding-top: 10px;
}
.pt-15{
    padding-top: 15px;
}
.pt-20{
    padding-top: 20px;
}
.pt-25{
    padding-top: 25px;
}
.pt-30{
    padding-top: 30px;
}
.pt-35{
    padding-top: 35px;
}
.pt-40{
    padding-top: 40px;
}
.pt-45{
    padding-top: 45px;
}
.pt-50{
    padding-top: 50px;
}

.pl-1{
    padding-left: 1px;
}
.pl-2{
    padding-left: 2px;
}
.pl-3{
    padding-left: 3px;
}
.pl-5{
    padding-left: 5px;
}
.pl-6{
    padding-left: 6px;
}
.pl-10{
    padding-left: 10px;
}
.pl-15{
    padding-left: 15px;
}
.pl-20{
    padding-left: 20px;
}
.pl-25{
    padding-left: 25px;
}
.pl-30{
    padding-left: 30px;
}
.pl-35{
    padding-left: 35px;
}
.pl-40{
    padding-left: 40px;
}
.pl-45{
    padding-left: 45px;
}
.pl-50{
    padding-left: 50px;
}
.pl-55{
    padding-left: 55px;
}
.pl-60{
    padding-left: 60px;
}
.pl-65{
    padding-left: 65px;
}
.pb-0{
    padding-top: 0px;
}
.pb-1{
    padding-top: 1px;
}
.pb-2{
    padding-top: 2px;
}
.pb-3{
    padding-top: 3px;
}
.pb-5{
    padding-top: 1px;
}
.pb-10{
    padding-top: 10px;
}
.pb-15{
    padding-top: 15px;
}
.pb-20{
    padding-top: 20px;
}
.pb-25{
    padding-top: 20px;
}
.pb-30{
    padding-top: 20px;
}
.pb-35{
    padding-top: 20px;
}
.pb-40{
    padding-top: 20px;
}
.pb-45{
    padding-top: 20px;
}
.pb-50{
    padding-top: 20px;
}
.pr-35{
    padding-right: 35px;
}

.underline{
    border-bottom: 1px solid grey;
}


.img-responsive{
    border-radius: 5px;
    width: 100%;
    height: 300px;
}
.img-thumbnail{
    border: 1px solid #ddd;
    width: 150px;
    border-radius: 4px;
    padding: 5px;
}
.img-thumbnail:hover{
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.img-hover:hover{
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
    border: 1px solid rgb(129, 129, 129);
}
ul.breadcrumb{
    padding: 10px 16px;
    list-style: none;
    background-color: #eee;
}
ul.breadcrumb li{
    display: inline;
    font-size: 18px;

}
ul.breadcrumb li+li:before{
    padding: 8px;
    color: black;
    content: "/\00a0";
}
ul.breadcrumb li a{
    color: #01447e;
    text-decoration: none;

}

/* Couter*/
.counter-row{
    margin: 0 -5px;
}
.counter-row:after{
    content: "";
    display: table;
    clear: both;
}


@media (min-width:768px){
    .counter-column-4{
        float: left;
        width: 24%;
        padding: 0 5px;
    
    }
   .counter-column-3{
            float: left;
            width: 32%;
            padding: 0 5px;

        }

   .counter-column-2{
     float: left;
     width: 49%;
     padding: 0 5px;
            
     }
     .counter-column-1{
        float: left;
        width: 99%;
        padding: 0 5px;         
     }
            
    }

 @media (max-width:600px){
    .counter-column{
    width: 100%;
     display: block;
     margin-bottom: 10px;
        
     }
  }


     @media (max-width:767px){
     .counter-column{
        width: 100%;
     display: block;
     margin-bottom: 10px;         
     }
     .counter-column-4{
      float: left;
      width: 100%;
      margin-bottom: 10px;
                
     }
                
     .counter-column-3{
        float: left;
        width: 100%;
       margin-bottom: 10px;                            
        }
        .counter-column-2{
            float: left;
            width: 100%;
           margin-bottom: 10px;
        }
        .counter-column-1{
            float: left;
            width: 100%;
           margin-bottom: 10px;
        }
     }
    .counter-card{
        box-shadow: 0 4px 8px 0 rgba((0), 0, 0, 0.2);
        padding: 16px;
        text-align: center;
        background-color: #444;
        color: #fff;
    }
    .counter-fa{
        font-size:50px;
    }
.flex{
    display: flex;
}

/* search bar */

.search-container .searchBox{
    display: flex;
    justify-content: center;
    margin: 5% auto;
   
}
form{
    width: 80%;
}
#searchbox{
   width: 50%;
   height: 5vh;
   border-radius: 8px;
   border: none;
   outline: none;
   padding:1.5% ;
   background-color: #8997a6;
   color: #fff;
}
#searchbox::placeholder{
    color: #fff;
}
.search-button{
    height: 5vh;
 
}
#searchbox:hover{
    background-color: #0056b3;
    transform: scale(1.05);
}
#searchbox:active{
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(162, 178, 195, 0.4);
}