/* ############# GENERAL TAGS & CLASSES ############# */      
body {
    height: 100%;
    margin: 0px;
    padding: 0px;        
    overflow: hidden;    
    text-align: center;     
    font-family: Verdana , sans-serif;       
}   
a {
    color: #000000;
    text-decoration: none;
}
a:hover {            
    text-decoration: underline;
}  
hr {
    border: 0;               /* Remove any default borders */
    height: 1px;             /* Set height to 1 pixel */
    background-color: #343434; /* Set the color to #000000 */
    margin: 5px auto;         /* Optional: Add a margin to give it some space */
    width: 75%;
}
                                                       
/* ############# HEADER AND MENU ############# */
.header {
    position: absolute;
    display: inline-block;  
    width: 100%;            
    height: 100px;     
    background: linear-gradient(to top, #ABABAB, #FFFFFF);  
    top: 0px;
    left: 0px;  
    opacity: 0.9;  
    clip-path: polygon(0 0, 100% 0, 100% 40px, 215px 40px, 180px 100%, 0% 100%);      
    z-index: 100;   
}    
.header-border {
    display: inline-block;  
    width: 100%;            
    height: 103px;          
    background: linear-gradient(to top, #1c295b, #1c295b);        
    position: absolute;
    top: 0px;
    left: 0px;  
    opacity: 0.9;  
    clip-path: polygon(0 0, 100% 0, 100% 43px, 217px 43px, 182px 100%, 0% 100%);    
    z-index: 99;   
}    
.logo {  
    display: block;                                                                          
    position: absolute;
    height: 70px;    
    width: 150px;    
    top: 0px;
    left: 0px;  
    margin: 15px 20px;    
    z-index: 101;        
    background-image: url("images/logo.png");   
    background-size: 150px 70px;               
}  
.logo a {
    display: block; 
    height: 70px;    
    width: 150px;                         
}
.menu {                                                     
    position: absolute;    
    top: 10px;
    right: 10px;           
    display: inline-block;  
    width: 100%;       
    z-index: 101;     
    text-align: right;
}
.menu a:not(:last-child) {
    border-right: 1px solid #000000;
}
.menu a {                               
    font-family: Arial,sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #000000;
    padding: 5px 15px;   
    cursor: pointer; 
} 
.menu span {          
    font-family: Arial,sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #1a4a6d;
    padding: 5px 15px;   
}
.menu a:hover { 
    color: blue;
    text-decoration: none;
}

.menu .dropdown {          
    position: absolute;
    display: inline-block;       
    z-index: 101;  
    position: relative; 
    background-image: url("images/icon_dropdown.png");   
    background-size: 15px 15px; 
    background-repeat: no-repeat;
    background-position: 0px 0px;
    padding-left: 5px;
    margin-left: 10px;
}

.menu .dropdown-content {
    display: none;             
    position: absolute;
    top: 20px;
    left: -10px;
    background: linear-gradient(to top, #ABABAB, #EFEFEF);  
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);    
    border: 1px solid #343434;  
}
.menu .dropdown:hover .dropdown-content {
    display: block;           
}  
.menu .dropdown-content a:before {
    content: "\00BB "; /* This is the » character */
    display: inline-block;
    margin-right: 5px; /* Optional: Adjust spacing between the prefix and the link text */
}
.menu .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;     
    z-index: 55;
    position: relative;  
    text-align: justify;
    white-space: nowrap;
}
.menu .dropdown-content a + a {
    border-top: 1px solid #343434;
}
.menu .dropdown-content a:hover {
    background-color: #EEEEEE;
    color: blue;
    font-weight: bold;
}  
      
/* ############# COMMON ELEMENTS FOR SUPPORTING CLIPPED HEADER ############# */
.bottom-border {
    border-bottom: 2px solid #1c295b;
}
.main {
    position: fixed;
    top: 0px;
    height: 100%;
    width: 100%;   
    overflow: auto;     
    margin: 0px;
    padding: 0px;   
    background: #CDCDCD;        
}
.empty-space {
    display: block;
    height: 43px;                      
}  

/* ############# MAIN PAGE ITEMS ############# */
.flex-container {       
    position: relative;                       
    padding: 15px 15px; 
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* this will set a gap between each box */  
    justify-content: center;   
}   
.flex-box {     
    display: block;         
    flex: 0 0 200px; /* grow, don't shrink, and base width is 20% of the container */      
    padding: 15px 15px 25px 15px;
    border: 1px solid #343434;
    border-radius: 10px;
}  
.extra-wide {               
    flex-basis: 500px; /* grow, don't shrink, and base width is 20% of the container */    
} 
.bottomlink, .bottomlink:hover {
    text-decoration: none;
}     

/* ############# MAIN CAROUSEL ############# */
.main-carousel {
    position: relative;    
    width: 100%;    
    height: 65%;  
    min-height: 400px;           
}
.main-carousel .slides {
    height: 100%;
    width: 100%;             
}
.main-carousel .slides div {
    position: absolute;     
    height: 100%;
    width: 100%;
    background-color: #F4F4F4;
    background-position: center center;
    background-repeat: no-repeat;  
    opacity: 0;
    transition: opacity 1.5s ease;
}
.main-carousel .slides div img {   
    position: relative;     
    height: 100%;
    width: 100%;
    border: none;
}
.main-carousel .slides div.active {
    opacity: 1;
}
.main-carousel-dots {  
    position: absolute;  
    bottom: 20px;        
    width: 100%;               
    z-index: 200;     
}     
.main-carousel-dots li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    border: 2px solid #FFFFFF;
    border-radius: 10px;
    cursor: pointer;
    background-color: #000 \9;         
    background-color: rgba(0,0,0,0);   
    z-index: 200; 
}
.main-carousel-dots li.active {
    margin: 0;
    width: 12px;
    height: 12px;
    background-color: #084096;
}                


/* ############# SIDE CAROUSEL ############# */  
.flex-container2 {   
    display: flex;   
}
.side-carousel {
    position: relative;    
    top: 0px;             
    width: 30%;    
    min-width: 300px;    
    max-width: 600px; 
    height: 100%;  
    background-color: #F4F4F4;
    background-position: center;
    background-repeat: no-repeat; 
    border-right: 2px solid #1c295b; 
    z-index: 40;
}     
.side-carousel-images {
    height: 100%;
    width: 100%;
}  
.side-carousel-images div {
    position: absolute;       
    height: 100%;
    width: 100%;
    background-color: #F4F4F4;
    background-position: bottom;
    background-repeat: no-repeat;  
    background-size: cover;    
    opacity: 0;
    transition: opacity 1.5s ease;
}
.side-carousel-images div img {
    position: relative;      
    display: flex;
    height: inherit;
    width: inherit;
}
.side-carousel-images div.active {
    opacity: 1;
}
.flex-fill {
    flex: 1;          
    height: 100%;  
    overflow: auto;                        
}  
.flex-fill>div {            
    padding: 5px 0px;       
}   
.small-side-menu {
    position: relative;    
    top: 0px;             
    width: 180px;      
    height: 100%;  
    background-color: #F4F4F4;
    background-position: center;
    background-repeat: no-repeat; 
    border-right: 2px solid #1c295b; 
    z-index: 40;
}
.small-side-menu .spacer {
    padding-top: 100px;
}
.small-side-menu .inner {
    padding: 20px 10px;
}
.small-side-menu .title {
    font-weight: bold;    
}
.small-side-menu ul {  
    display: block;
    margin: 0px auto;
    margin-top: 5px;
    padding-left: 20px;        
    list-style-type: disc;   
}
.small-side-menu ul li {  
    line-height: 22px;
    margin: 0px;
    padding: 0px;    
    text-align: left;
}   
.sadf {
    width: 300px;
    position: relative;  
}
.location-carousel {    
    position: relative;    
    width: 100%;    
    height: 200px;  
    border: 1px solid #000000;
}
.location-carousel-images {
    height: 100%;
    width: 100%;
}   
.location-carousel-images div {
    position: absolute;       
    height: 100%;
    width: 100%;
    background-color: #F4F4F4;
    background-position: bottom;
    background-repeat: no-repeat;  
    background-size: cover;    
    opacity: 0;
    transition: opacity 1.5s ease;
}
.location-carousel div img {
    position: relative;      
    display: flex;
    height: inherit;
    width: inherit;
}
.location-carousel div.active {
    opacity: 1;
}
.location-carousel .spacer {
    height: 50px;
}
.top-padding {
    padding-top: 20px;
}
.line-spacing {
    line-height: 25px;
}
      
.list {
    display: block;
    margin: 0px auto;
    margin-top: 5px;
    padding-left: 20px;        
    list-style-type: disc;   
    /* list-style-image: url('arrows.gif'); */ 
    width: 600px;           
}
.list li {
    line-height: 22px;
    margin: 0px;
    padding: 0px;    
    text-align: left;
}
    
.split-box {
    display: inline-box;
    margin: 40px 0px 0px 0px;
    position: absolute;
    right: 0px;
    background-color: #DFDFDF;
    width: 70%;    
    height: 100%;   
    z-index: 1;        
    padding: 50px 0px;
    text-align: center;
    margin: 0px solid;
    border-left: 2px solid #1c295b;  
    overflow: auto;         
}

.vdiv-small-left {      
    display: inline-box;       
    position: absolute;
    background-color: #F4F4F4;            
    width: 180px;    
    height: 100%;    
    padding-top: 115px;      
    text-align: center;   
    border-right: 2px solid #1c295b; 
    text-align: left;   
    z-index: 2;               
}  
.vdiv-small-right {
    display: inline-box;           
    margin: 0px 0px 180px 0px;
    position: absolute;
    right: 0px;
    background-color: #DFDFDF;
    width: 100%;    
    height: 100%;   
    z-index: 1;        
    padding: 0px;      
    padding-top: 120px;      
    border: 2px solid #red;  
}   
.vdiv-small-header {
    margin-left: 10px;
    font-weight: bold;
    font-size: 14pt;
    font-family: Arial;
}
.vdiv-small-list {
    margin-top: 5px;
    padding-left: 20px;        
    list-style-type: none;     
}
.vdiv-small-list li {
    line-height: 22px;
    margin: 0px;
    padding: 0px;    
}
.vdiv-small-list a {
    text-decoration: none;
}
.vdiv-small-list a:hover {
    font-size: 13pt;
    text-decoration: none;
    color: blue;
}

.content-split-left {
    display: inline-block;   
    min-width: 200px;
    margin-right: 10px;  
    vertical-align: top;     
}
.content-split-right.text-left {
    height: auto; /* Ensure there's no fixed height */
    overflow: visible; /* Allow content to be visible outside the container */
}
.content-split-right {
    display: inline-block;  
    min-width: 400px;
    vertical-align: top;   
}  
.h1 {
    display: block;     
    line-height: 30px;
    font-size: 20pt;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
} 
.h2 {
    display: block;     
    line-height: 30px;
    font-size: 16pt;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
}
      
.map {                         
    display: inline-block;
    border: 2px solid #000000;
    margin: 0px solid;
    text-align: center;
}   


div.bg-tt {
    background-image: url("images/bg-tt.png");
    background-size: cover;    
    z-index: 1; 
}  
div.bg-ab {
    background-image: url("images/bg-ab2.png");
    background-size: auto;     
    z-index: 1;
}        
div.side-header {
    margin-top: 100px;
    color: #FFFFFF;
    font-size: 40px;
    font-weight: bold;
    font-family: Verdana;
} 


    
.gradiant-1 {
    background: linear-gradient(to top,#ccc,#555);      
}           
.gradiant-2 {                                                     
    background: linear-gradient(to top, #efbd57, #5d2f09);  
}         
.gradiant-3 {                                                        
    background: linear-gradient(to top, #9ccbdb, #003057);   
}         
.gradiant-4 {                                                        
    background: linear-gradient(to top, #1a4a6d, #003057);   
}                                         
span.title {    
    display: block;    
    color: #FFFFFF;   
    font-family: 'Oswald',sans-serif;
    font-size: 23px;
    line-height: 30px;
    letter-spacing: 1px;
    text-align: center;
    font-weight: 700;
}                                      
span.content {   
    display: block;   
    color: #D8D8D8;  
    font-family: 'Oswald',sans-serif;
    font-size: 14px;
    margin: 0px;                 
    padding-top: 10px;                
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: normal;
    white-space: normal;   
}     
.thumb {
    width: 200px;
    height: 160px;     
    border-radius: 5px;     
    position: relative;    
    top: 10px;
    display: block;
    margin: 0 auto;   
    border-radius: 20px;    
    border: 1px solid #CBCBCB;      
}
.thumb-2 {
    width: 300px;
    height: 240px;             
    border: 1px solid #000000;  
    border-radius: 5px;          
    position: relative;    
    top: 10px;
    display: block;
    margin: 0 auto;    
}
.thumb-3 {
    width: 200px;
    height: 160px;             
    border: 1px solid #000000;  
    border-radius: 5px;          
    position: relative;    
    top: 10px;
    display: block;
    margin: 0 auto;          
}
.wrap {
    width: 600px;
    white-space: normal;
    word-wrap: normal;  
}             
.wrap + .wrap {     
    margin-top: 15px;    
}

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