/*!
 * Start Bootstrap - Business Casual Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */


/* Video Background */
#bgvideo {
    position:fixed;
    left:0;
    top:0;
    z_right:0;
    z_bottom:0;
    min-width:99%;
    min-height:100%;
    z_height:100%;
    z_width:100%;
    z_max-width:99%;
    z-index:-100;
    background:url(../img/bga1.png) no-repeat ;
    background-size:cover;
}


/* Thin head with color pads */
.thin-head {
    margin: 0 auto;
    z_max-width: 940px;
    z_height:4px;
    height:auto;
    position: relative;
    z_position: fixed;
    width:100%;
}
.color-grid {
    width: 100%;
    height: 1.5vh;
    overflow: hidden;
    z_position: absolute;
    position:fixed;
    z-index:100;
    top: 0px;
    left: 0%;
}
.color-grid div {
    height: 100%;
    min-width: 15%;
    float: left;
    border:10px;
    border-color:rgb (50,50,50);
}
.pad-blu {
background-color:rgb(42, 82, 144);
border-color:#2a4e8b;
border-color:rgba(42, 42, 42,0.8);
width:20%;
}
.pad-gre {
background-color:rgb(1, 160, 80);
border-color:#029e4e;
}
.pad-yel {
background-color:rgb(224, 174, 10);
border-color: #e0ad08;
}
.pad-red {
background-color:rgb(223, 5, 8);
border-color:#df0407;
}





html {
  --scrollTrack: rgba(224, 224, 224, 0.90);
  --scrollTrack: rgba(255, 255, 255, 0.99); /* white */
  --scrollThumb: rgba(042, 082, 144, 0.80); /* blue */
  --scrollThumb: rgba(224, 174, 010, 0.80); /* yellow */

  --scrollWidth: 1.8em;
  --scrollRadius: 1.7em;
}

html {
    scrollbar-color: 
        var(--scrollThumb)
        var(--scrollTrack);
}

::-webkit-scrollbar {
  width: var(--scrollWidth);
  height: var(--scrollWidth);
  background: var(--scrollTrack);
} 

::-webkit-scrollbar-track-piece {
    background: var(--scrollTrack);
}

::-webkit-scrollbar-button {
    background: var(--scrollTrack);
}

::-webkit-scrollbar-track {
  background: rgba(223,005,008,.25);
  background: var(--scrollTrack);
}
::-webkit-scrollbar-thumb {
  width: var(--scrollWidth);
  background: var(--scrollThumb);
  border-radius: var(--scrollRadius);
  border: 3px solid var(--scrollThumb);
}



/* Body Main Settings */
body {
    z_font-family:"Century Gothic",CenturyGothic,AppleGothic,"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-family:"Century Gothic","Didact Gothic",CenturyGothic,AppleGothic,sans-serif;
    z_background: url('./img/bga1.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    line-height: 1.3;
    font-size=12pt;
    
}

/* Brand Name */
.brand-name {
    display: inherit;
    margin: 0;
    padding: 30px 0 10px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    z_font-family:"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
    z_font-family:"Didact Gothic","Futura PT",AppleGothic,sans-serif;
    font-size: 450%;
    font-weight: 700;
    line-height: normal;
    color: #fff;
    letter-spacing: 3px;
    z_font-size:72pt; 
}

/* Details */
.address-bar {
    display: inherit;
    margin: 0;
    padding: 0 0 40px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    font-family:"Century Gothic",CenturyGothic,AppleGothic,"didact Gothic",sans-serif;
    line-height: normal;
    color: #fff;
    font-size: 200%;
    font-weight: 500;
    letter-spacing: 2px;
}

/* Main Image */
.banner {
    position: relative;
    z_display: inline-block; /* Make the width of box same as image  */
    display: block; /* Make the width of box same as image  */
}

/* Image Legend (over) */
.title-over {
    position: absolute;
    top: 10%; /* Adjust this value to position div up and down */
    left:5%;
    align-self:center;
    width: 90%; /* Set the width of the positioned div */
    z-index: 999;
    color: #fff;
    text-shadow: -3px 4px 3px rgba(0,0,0,0.8);
    text-align:center;
    font-size:6vw;
    z_font-size:6vh;
    font-weight: 700;
    line-height: 1.05;
}

/* Image Legend (over) */
.text-over {
    position: absolute;
    z_top: 35%; /* Adjust this value to position div up and down */
    bottom: 20%; /* Adjust this value to position div up and down */
    left:10%;
    align-self:center;
    width: 80%; /* Set the width of the positioned div */
    z-index: 999;
    color: #fff;
    text-shadow: -3px 4px 3px rgba(0,0,0,0.8);
    text-align:center;
    font-size:4vw;
    z_font-size:6vh;
    font-weight: 700;
    line-height: 1.05;
}


/* Media screen - Smartphone <800 <600 */
@media screen and (max-width: 800px) {
  div.brand-name  {font-size: 360%;}  /* 500 */
  div.address-bar {font-size: 135%;}  /* 200 */
  div.text-over   {font-size: 5vw ;}  /* 420 */
  div.text-t1     {font-size: 6vw ;}  /* 250 */
  div.text-t2     {font-size: 4vw ;}  /* 180 */
  div.text-t3     {font-size: 3vw ;}  /* 160 */
}
@media screen and (max-width: 600px) {
  div.brand-name  {font-size: 340%;}
  div.address-bar {font-size: 100%;}
  div.text-over   {font-size: 5vw ;}
  div.text-t1     {font-size: 6vw ;} 
  div.text-t2     {font-size: 4vw ;} 
  div.text-t3     {font-size: 3vw ;} 
}
@media screen and (max-width: 400px) {
  div.brand-name  {font-size: 320%;}
  div.address-bar {font-size:  65%;}
  div.text-over   {font-size: 5vw ;}
  div.text-t1     {font-size: 6vw ;} 
  div.text-t2     {font-size: 4vw ;} 
  div.text-t3     {font-size: 3vw ;} 
}
/* Media Screen - Computer >1200 */
@media screen and (min-width:1200px) {
    .box:after {
        -content: '';
        display: table;
        -clear: both;
    }
}
/* --- End of Media Screen --- */


.container {
    opacity: 0.97; 
    max-width: 90%;
} 

.text-t1 {
    z_font-family:"Century Gothic",CenturyGothic,AppleGothic,sans-serif;  
    font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size:2.5em;
    opacity:0.9;
    color:rgb(68, 85, 135);
    color:rgba(68, 85, 135,1);
    line-height: 1.4;
}

.text-t2 {
    z_font-family:"Century Gothic",CenturyGothic,AppleGothic,sans-serif;  
    z_font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size:1.8em;
    opacity :0.7;
    color:rgb(0,0,0);
    color:rgba(0,0,0,1);
}

.text-t3 {
    z_font-family:"Century Gothic",CenturyGothic,AppleGothic,sans-serif;  
    z_font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size:1.6em;
    opacity:0.5;
    color:rgb(51, 122, 183);
    color:rgba(51, 122, 183,1);
    font-weight: 500;
}


.text-blu {
color:rgb(42, 82, 144) !important;
}
.text-gre {
color:rgb(1, 160, 80) !important;
}
.text-yel {
color:rgb(224, 174, 10);
}
.text-red {
color:rgb(223, 5, 8);
}





h1,h2,h3,h4,h5,h6 {
/*  z_font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif    ;
    z_font-family:"Century Gothic",CenturyGothic,AppleGothic,"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    z_font-family: "Tahaoma","Geneva","Helvetica","Arial",sans-serif;
*/

    font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

p {
    font-size: 1.25em;
    line-height: 1.6;
    color: #000;
}

hr {
    max-width: 400px;
    border-color: #999999;
}

.navbar-brand {
    font-weight: 900;
    letter-spacing: 2px;
}

.navbar-nav {
    font-weight: 400;
    letter-spacing: 3px;
}

.img-full {
    width: 100%;
}

.img-thumbnail {
    border: none;
    border-radius: 0;
    padding : 0.5em;
}

.brand-before {
    margin: 15px 0;
}


.tagline-divider {
    margin: 15px auto 3px;
    max-width: 250px;
    border-color: #999999;
}

.box {
    margin-bottom: 20px;
    padding: 20px 20px;
    background: rgb(255,255,255);
    background: rgba(255,255,255,1.0);
}

.intro-text {
    font-size: 1.25em;
    font-weight: 400;
    letter-spacing: 1px;
}

.img-border {
    float: none;
    margin: 0 auto 0;
    border: #999999 solid 1px;
}

.img-left {
    float: none;
    margin: 0 auto 0;
}

footer {
    background: #fff;
    background: rgba(255,255,255,0.9);
}

footer .copyright {
    margin: 0;
    padding: 20px 0;
}

ul.icons {
    padding: 20px 0;
    list-style: none;
}

ul.icons li {
    display: inline-block;
    padding: 0 1.25em 0 0;
    font-size: 1.75em;
}

ul.icons li a {
    text-decoration: none;
}


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

    .top-divider {
        margin-top: 0;
    }

    .img-left {
        float: left;
        margin-right: 25px;
    }

    .navbar {
        border-radius: 0;
    }

    .navbar-header {
        display: none;
    }

    .navbar {
        min-height: 0;
    }

    .navbar-default {
        border: none;
        background: #fff;
        background: rgba(255,255,255,0.9);
    }

    .nav>li>a {
        padding: 35px;
    }

    .navbar-nav>li>a {
        line-height: normal;
    }

    .navbar-nav {
        display: table;
        float: none;
        margin: 0 auto;
        table-layout: fixed;
        font-size: 1.25em;
    }
}




.glow-on-hover {
    width: 280px;
    height: 60px;
    border: none;
    outline: none;
    color: #fff;
    z_background:#111;
    background: rgb(68, 85, 135);
    background: rgba(68, 85, 135, 1);
    font-size : 22pt;
    font-weight:700;
    cursor: pointer;
    position: relative;
    z-index: 10;
    border-radius: 10px;
    display: inline-grid;
    align-items: center;
    justify-content: center;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #468; 
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(68, 85, 135);
    background: rgba(68, 85, 135, 1);
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}