/* Variables o----o----o----o----o----o----o----o */
    
    :root {
        --thumb-bg-color: none;  /* thumbnail bg color  lightslategray*/
        --bg-color-content: none;   /* Content Background color */
        --ani-dur-slide: none;
    }

/* BODY FORMAT o----o----o----o----o----o----o----o */
    * {
        padding: 0;
        margin: 0;
        list-style: none;
        text-decoration: none;
        box-sizing: border-box; 
    }
    body {     
        background: #EFEFEF; /* #EFEFEF */
        font-family: "Verdana", Geneva, sans-serif;
        letter-spacing: 0.2px;
        min-width: 540px;	
    }
    a { text-decoration: none; }
/* BODY FORMAT o----o----o----o----o----o----o----o */

/* TOP ROW o----o----o----o----o----o----o----o */
    .top-row {
        width: 100%;
        height: 60px;
        background-color: black;
    }
    .nav-panel {
        position: absolute;
        left: -280px;        
        width: 280px;
        /* width: 15%; */
        max-height: 845px;
        background: #AFAFAF; 
        overflow: auto;
        z-index: 1;
        transition: 0.4s;
    }    
    .mid-row {
        margin: auto;
        max-width: 1920px;        
        min-height: 950px;        
        background-color: lightgrey;        
    }
    
/* TOP ROW o----o----o----o----o----o----o----o */
    
/* TOP NAV BAR o----o----o----o----o----o----o */ 
    .top-nav-bar {
        max-width: 1920px;
        margin: auto;
    }
    .tab {
        position: relative;
        display: inline-block;
        top: 15px;
        color: #DFDFDF;
        cursor: pointer;
        transition: 0.6s;
    }
    .tab:hover {
        color: #00B0F0;
        transition: 0.6s;
    }
    .tab-actv {
        color: #FF4500;
    }
    .explr {
        width: 30px;
        margin-left: 15px;
        font-weight: bold;
        cursor: pointer;
    }
    .explr img {
        width: 100%;
    }
    .etodubs {        
        margin-left: 8%;
        color: #FF4500;
        letter-spacing: 0.04px;
        font-size: 35px;
        font-weight: bold;    
    }
    .eto {
        color: #FFAA00;
        font-size: 33px;
    }
    .dotcom {
        color: #CFCFCF;
        letter-spacing: 0.04px;
        font-size: 25px;
        font-weight: bold;
    }
    .etodubs a {
        text-decoration: none;
        color: #FF4500;
    }
    .tpcs {
        margin-left: 5%;
    }
    #dtl-cnt {
        margin-left: 38%;
        transform: 0.2s;        
    }
    #dtl-abt {
        margin-left: 1.2%;        
    }
    #cntct, #about {
        color: #DFDFDF;
        transition: 0.6s;
    }
    #cntct:hover, #about:hover {
        color: #00B0F0;
        transition: 0.6s;
    }

    @media screen and (max-width: 1830px) { #dtl-cnt { margin-left: 35%; } }
    @media screen and (max-width: 1700px) { #dtl-cnt { margin-left: 33%; } }
    @media screen and (max-width: 1620px) { #dtl-cnt { margin-left: 30%; } }
    @media screen and (max-width: 1520px) { #dtl-cnt { margin-left: 27%; } }
    @media screen and (max-width: 1430px) { #dtl-cnt { margin-left: 24%; } }
    @media screen and (max-width: 1340px) { #dtl-cnt { margin-left: 20%; } }
    @media screen and (max-width: 1250px) { #dtl-cnt { margin-left: 15%; } }
    @media screen and (max-width: 1250px) { #dtl-cnt { margin-left: 13%; } }
    @media screen and (max-width: 1150px) { #dtl-cnt { margin-left: 10%; } }
    @media screen and (max-width: 1040px) { .dtls { display: none; } }
    @media screen and (max-width: 790px)  { .tpcs { display: none; } }

    #icon-cntct {
        width: 35px; 
    }
    #icon-about {
        width: 30px;
    }
/* TOP NAV BAR o----o----o----o----o----o----o */ 

/* FOOTER o----o----o----o----o----o----o----o  */
    .footer {        
        float: left;
        width: 100%;
        height: 130px;
        background: #AFAFAF;
    }
    .footer div {
        padding: 10px 0 5px 0;
        font-size: 14px;
        text-align: center;
    }
    .footer-dtls a {
        color: #2F2F2F;
    }
    .footer-logo img {
        margin: 0 10px 0 10px;
        height: 40px;
    }
    @media screen and (max-width: 780px) {    
        .footer { float: left; }
    }
/* FOOTER o----o----o----o----o----o----o----o  */

/* Left Nav List o----o----o----o----o----o----o----o----o  */
/* ACCORDION o----o----o----o----o----o----o----o----o  */
    .tpc-name {
        background-color: #3F3F3F;
        color: #DFDFDF;
        cursor: pointer;
        padding: 12px 10px 12px 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.5s;
    }
    .tpc-actv, .tpc-name:hover {
        color: #FF4500;
        background-color: #2F2F2F;
        font-weight: bold;
    }  
    .tpc-name:after {
        content: '\002B'; /* plus sign */
        color: #CFCFCF;        
        float: right;
        margin-left: 5px;
        font-weight: bold;
    }  
    .tpc-actv:after {
        content: "\2212"; /* minus sign */
        color: #FF4500;
    }  
    .tpc-list {        
        background-color: #EFEFEF;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }    
    .tpc-list-ach {     /* topic list anchored */
        display: block;
        padding: 8px 10px 8px 45px;        
        font-size: 13.7px;
        color: #2F2F2F;
    }
    .tpc-list-ach:hover {
        color: #00B0F0;        
        background-color: #4F4F4F;
    }
    .tpc-list-actv {        
        color: #FFAA00;
        background-color: #5F5F5F;
    }
/* ACCORDION o----o----o----o----o----o----o----o----o */

/* Dropdown Menu (Unused) o----o----o----o----o----o----o----o----o */
/* Menus - Basics / Systems / Mini-Sims * o----o----o----o */
   #menu-bsc,
   #menu-sys,
   #menu-sim {
       position: absolute;
       width: 60%;
       /* height: 0px; */
       margin-left: 20%;
       margin-right: 20%;
       background: lightgray;
       z-index: 1;
       transition: 0.5s;
   }
   #menu-bsc { background: #7F7F7F }
   #menu-sys { background: #8F8F8F }
   #menu-sim { background: #9F9F9F }

   @media screen and (max-width: 1260px) {    
        #menu-bsc, #menu-sys, #menu-sim {
            width: 80%;
            margin-left: 10%;
            margin-right: 10%;
        }
    }
    @media screen and (max-width: 780px) {    
        #menu-bsc, #menu-sys, #menu-sim {
            display: none;
        }
    } 
/* Menus - Basics / Systems / Mini-Sims * o----o----o----o  */

/* Content Format o----o----o----o----o----o----o----o */
    .content {      
        margin: auto;          
        width: 80%;
        height: 100%;
        padding-top: 2%;
        background: var( --bg-color-content ); 
        /*
        */
    }
    @media screen and (max-width: 1400px) {    
        .content {
            width: 100%;
            height: auto;
        }
    } 
    @media screen and (max-width: 630px) {    
        .content {
            max-width: 630px;
        }
    } 
/* Content Format o----o----o----o----o----o----o----o */

/* Index Thumbnails o----o----o----o----o----o----o----o */
    .indx-hdr {
        margin: auto;
        text-align: center;
        max-width: 100%;
        font-size: 27px;
        text-shadow: 0px 1.2px 3px #2F2F2F;        
        font-weight: bold;
        background: none;
    }    
    .sl-box {        
        max-width: 800px;
        margin: auto;
        margin-top: 20px;
        background: #000062;
    }
    .sl-img {
        display: block;
    }
    .sl-box img {
        width: 100%;
        transition: 0.5s;     
    }
    .dot-box {
        margin-top: 10px;
        max-width: 100%;
        text-align: center;
    }
    .sl-dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 5px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }
    .sl-dot:hover, .dot-actv {
        background-color: #717171;
        transition: 0.5s;
    }
    .sl-fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: var(--ani-dur-slide);
        animation-name: fade;
        animation-duration: var(--ani-dur-slide);
    }      
    @-webkit-keyframes fade {
        0% {opacity: 0}
        10% {opacity: 1}        
        90% {opacity: 1}
        100% {opacity: 0}
    }

    @keyframes fade {
        0% {opacity: 0}
        10% {opacity: 1}        
        90% {opacity: 1}
        100% {opacity: 0}
    }

/* o----o----o----o----o----o----o----o----o */
    .indx-th-contnr {
        width: 100%;
        text-align: center;
        /*
        background: lightslategrey;
        */
    }
    .indx-th {
        width: 420px;
        display: inline-block;
        overflow: hidden;
        box-sizing: border-box;
        padding: 20px 40px 15px 40px;
        /* background: lightseagreen; */
    }
    .indx-th:hover .indx-th-name {
        /* color: #00B0F0; */
        color: #00B0F0;
        text-shadow: 0px 1.2px 3px #a09b9b;
        transition: 0.5s;
    }    
    .indx-th-img {
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: 0.5s;
    }
    .indx-th-img:hover {
        transform: scale(1.1);
        transition: 0.5s;
    }
    .indx-th-name {
        width: 100%;
        text-align: center;
        margin-top: 15px;
        font-size: 19px;        
        font-weight: bold;
        color: #2F2F2F;
        transition: 0.5s;
        /*
        background: lightsalmon;
        */
    }
/* Index Thumbnails o----o----o----o----o----o----o----o */

/* FB Page Iframe  o----o----o----o----o----o----o----o */
    .fb-frame {        
        margin: auto;
        margin-top: 40px;                
        width: 100%;
        min-height: 500px;
        /* background: chartreuse; */
        text-align: center;
    }
    .fb-page {
        position: relative;
        display: inline-block;
        margin: 0 30px 0 30px;
        padding-bottom: 40px;
    }

/* About Page o----o----o----o----o----o----o----o */
    .about-contnr {
        width: 100%;
        height:100%;
        /* background: lightslategray; */
        text-align: center;
    }
    .about-th {
        display: inline-block;        
        margin: 30px 20px 30px 20px;
        width: 360px;
        height: 500px;
        color: #C2C2C2;        
        text-shadow: 0 0.4px 0.4px #5F5F5F;
        background-image: linear-gradient(rgb(80,155,222), rgb(70,120,170));
        border-radius: 20px;
        padding: 40px 20px 20px 20px;
        text-align: center;
        box-sizing: border-box;
        box-shadow: 0 4px 8px 0 #5F5F5F;
        overflow: hidden; /* maintains inline alignment of boxes */
    }
    .about-th div{
        text-align: left;
        text-indent: 30px;
    }
    .about-th h3 {
        color: #4F4F4F;
        margin: 20px 0 20px 0;
        text-shadow: 0 1px 1px #6F6F6F;
    }
    .about-th h2 {
        color: #4F4F4F;
        margin: 20px 0 20px 0;        
    }
    .about-th img {
        text-align: center;
        height: 110px;
        border-radius: 20px;
        filter: drop-shadow(0 3px 3px #4F4F4F); /*shadow for image only, NOT on box*/
    }
    .etoDubs {
        color: #C2C2C2;
        font-weight: 700;
    }
    .abt-eto {
        color: #FFAA00;
        text-shadow: 0px 2px 2px #3F3F3F;
    }
    .abt-dubs {
        color: #FF4500;
        text-shadow: 0px 2px 2px #3F3F3F;
    }
    .abt-com {
        color: #CFCFCF;
        text-shadow: 0px 2px 2px #3F3F3F;
    }
    .abt-list li {
        text-align: left;
        text-indent: 30px;
        margin-top: 3px;
        margin-bottom: 3px;
    }
    .cntcs-th {         /* contacts thumbnails container */
        display: inline-block;        
        width: 400px;
        height: 580px;
        margin: 30px 20px 30px 20px;
        padding: 30px 30px 20px 40px;
        color: #C2C2C2;        
        text-shadow: 0 0.4px 0.4px #5F5F5F;
        background-image: linear-gradient(rgb(80,155,222), rgb(70,120,170));
        border-radius: 20px;
        text-align: center;
        box-sizing: border-box;
        box-shadow: 0 4px 8px 0 #5F5F5F;
        overflow: hidden; /* maintains inline alignment of boxes */
    }
    .cntcs-th img {     /* logo image of contacts */
        height: 110px;        
        filter: drop-shadow(0 3px 3px #4F4F4F); /*shadow for image only, NOT on box*/
    }
    .cntcs-th h3 {      /* contacts header title */
        color: #4F4F4F;
        margin: 20px 0 20px 0;
        text-shadow: 0 1px 1px #6F6F6F;
    }
    .ct-icon{           /* contacts logo image box */
        margin-top: 30px;
        margin-bottom: 20px;
        text-align: left;        
        align-content: center;        
    }
    .ct-dtls {
       margin-left: 20px;
    }
    .ct-icon span {             /* alignment of icons boxes */
        vertical-align: middle;
    }
    .ct-icon span img {        /* logo images contacts */
        height: 35px;
        filter: drop-shadow(0 1px 1px #6F6F6F);
        cursor: pointer;        
    }
    .serv-icon {
        text-align: left;
    }
    .serv-icon span {       /* icon of services */
        vertical-align: middle;
    }
    .serv-icon span img{    /* services logo images */
        height: 60px;
        margin-top: 5px;
        margin-bottom: 5px;
        text-align: left;        
        align-content: center;        
        filter: drop-shadow(0 1px 1px #6F6F6F);
        cursor: pointer;
    }
    .serv-dtls {        /* service details text  */
        margin-left: 20px;
     }
    .cmn-soon {             /*coming soon text*/
        margin: 0 0 2px 0;
        font-size: 11px;
    }
/* About Page o----o----o----o----o----o----o----o */

/* Thumbnails o----o----o----o----o----o----o----o */
    .topic-title {
        margin-left: 7%;
        margin-right: 7%;
        padding: 5px 0 5px 0;
        font-size: 27px;
        font-weight: bold;
        border-bottom: 5px solid #1F1F1F;
        /*
        background: lightblue;
        */
    }
    .thumb-contnr {
        text-align: center;        
        min-height: 950px;
        overflow: none;
        background: var(--thumb-bg-color);
    }
    .thumb-box {
        display: inline-block;
        margin: 15px 20px 15px 20px;
        /*width: 280px;*/ /* property value set at javascript */
        /*height: 175px;*/ /* property value set at javascript */
    }
    /* Thumbnail Preset Sizes */
    .th-4 { width: 280px; height: 175px; }
    .th-3 { width: 410px; height: 220px; }
    .th-2 { width: 510px; height: 320px; }
    .thumb-box img {
        width: 100%;
        height: 100%;        
        object-fit: cover;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        cursor: pointer;
        transition: 0.4s;
    }
    .thumb-box img:hover {
        transition: 0.4s;
        transform: scale(1.1);
        filter: brightness(110%);
    }
    .th-name {
        width: 100%;
        height: 60px;
        margin-top: 2px;
        padding: 10px 3px 10px 3px;        
        font-size: 16px;
        font-weight: bold;
        overflow:hidden;
        transition: 0.4s;
        /*
        background: lightslategray;
        */
    }
    .thumb-box:hover .th-name {
        color: #00B0F0;
        font-size: 18px;
        transition: 0.4s;
    }
/* Thumbnails o----o----o----o----o----o----o----o */

/* Modal o----o----o----o----o----o----o----o */
    .modal-contnr {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;        
    }    
    /* Modal Animation */    
    .modal-contnr {  
        -webkit-animation-name: zoom;
        -webkit-animation-duration: 0.7s;
        animation-name: zoom;
        animation-duration: 0.7s;
    }
    @-webkit-keyframes zoom {
        from {-webkit-opacity: 0;} 
        to {-webkit-opacity: 1;}
    }
    @keyframes zoom {
        /*
        from {transform:scale(0)} 
        to {transform:scale(1)}
        */
        from {opacity: 0;} 
        to {opacity: 1;}
    }    
    .mod-bckgrnd {        
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;        
        height: 100%;
        background: #1F1F1F;
        opacity: 0.5;
        transition: 0.8s;
    }    
    .mod-box {
        display: none;
        position: relative;
        top: 11%;
        margin: auto;
        padding: 20px;
        max-width: 1000px;
        min-height: 600px;
        border-radius: 10px;        
        background: #2F2F2F; 
        /* 
        background: darkgreen; 
        background: #EFEFEF;
        */
    }
    @media screen and (max-width: 1000px) {    
        .mod-box {
            min-height: 400px;
        }
    }    
    .mod-name {
        max-width: 100%;
        text-align: center;
        font-size: 25px;
        font-weight: 900;
        color: #EFEFEF;
        
        /* 
        color: #0F0F0F;
        background: #EFEFEF;
        */
    }
    .mod-box-img {        
        display: block;
        /* width: 50%; */ /* declared in javascript */
        margin: auto;        
        margin-top: 15px;
    }
    /* Tab Image and Buttons */
    .tab-contnr {      
        position: relative;  
        margin-top: 1%;
        width: 100%;        
        text-align: center;
    }    
    .tab-img {
        width: 120px;
        height: 80px;
        object-fit: cover;
        box-sizing: border-box;
        filter: brightness(90%);
        cursor: pointer;
    }
    .tab-img:hover {
        border: 3px solid #9F9F9F;
        border-radius: 5px;
    }
    .tab-mod-actv {
        border: 3px solid #FF4500;
        filter: brightness(110%);
    }
    /* Close Button */
    .close-x {
        position: absolute;
        right: 15px;
        top: 5px;
        color: #CFCFCF;
        font-size: 35px;
        font-weight: bold;
        /*
        color: #0F0F0F;
        */
    }
    .close-x:hover,
    .close-x:focus {
        color: #FF4500;
        text-decoration: none;
        cursor: pointer;
    }
    /* Scroll Buttons */    
    .scr-bttn {
        position: absolute;
        top: 40%;
        font-size: 45px;
        color: #CFCFCF;
        width: 75px;
        padding: 20px 0 23px 0;
        text-align: center;        
        cursor: pointer;
    }
    .scr-bttn:hover {
        color: #FFAA00;
        background: #4F4F4F;
    }
    .scr-prev {
        left: 0;
        border-radius: 0 10px 10px 0;
    }
    .scr-next {
        right: 0;
        border-radius: 10px 0 0 10px;
    }
    .sld-xy {
        position: absolute;
        bottom: 5px;
        right: 5px;
        color: #CFCFCF;
        font-size: 16px;        
        /*
        color: #0F0F0F;
        */
    }
/* Modal o----o----o----o----o----o----o----o */