/*
 
    |                                 |                   |      TM
    |______   ______   ______   ______|           ______  |___
    |      | |      | |      | |      | |      | |______  |
    |      | |______| |______| |______| |______|  ______| |______

    Copyright (C) 2017 Hoodust Enterprises
    hoodust.net/hoostyle.css
    
*/

/* Reset Button - it's the right thing to do */
*
{   
    border:none;
    margin:0;
    padding:0;
}

/* Background and Banner */
body, html
{
    height:100%;
    background-color: black;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}

.main
{
    height:100%;
}

div.shade
{
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    background-color:black;
    z-index:6;
}

img.blogo
{
    display:block;
    width:84.8%;
    height:auto;
    margin-left:7.6%;
    margin-right:7.6%;
    margin-top:27%;
    z-index:5;
}

img.dwn
{
    width:6%;
    height:auto;
    margin-left:47%;
    margin-right:47%;
    padding-top:10%;
    filter:alpha(opacity=10);
    opacity:0.1;
    z-index:6;
}

div.shim
{
    position:fixed;
    width:100%;
    height:20%;
    background-color:black;
    z-index:2;
}

img.logo
{
    position:fixed;
    margin:auto;
    width:84.8%;
    height:auto;
    margin-left:7.6%;
    margin-right:7.6%;
    padding-top:2%;
    z-index:3;
}

.img
{
    object-fit:cover;
    width:12.9vw;
    height:12.9vw;
    display:block;
}

.tint
{
    position:relative;
    cursor:pointer;
    float:left;
}

.tint:before
{
    content:"";
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,150,200,0.9);
    transition: all .5s linear;
}

.tint:hover:before
{
    background:none;
}

/* Heading One */
h1
{
    background-color:transparent;
    position:relative;
    margin-left:10%;
    margin-right:10%;
    padding-top:28px;
    padding-bottom:13px;    
    font-family:"Tahoma";
    font-size:20px;
    font-weight:bold;
    color:rgb(5,222,253);
}
h1de
{
    background-color:transparent;
    position:relative;
    margin-left:10%;
    margin-right:10%;
    padding-top:28px;
    padding-bottom:13px;    
    font-family:"Tahoma";
    font-size:20px;
    font-weight:bold;
    color:rgb(255,0,255);
/* Comment out the next two lines to show grid numbers (for placement) */
    visibility:hidden;
    display:none;  */
*/
}

/* Heading Two */
h2
{
    position:relative;
    margin-left:10%;
    margin-right:0px;
    padding-top:15px;
    padding-bottom:15px;    
    font-family:"Tahoma";
    font-size:18px;
    font-style:normal;
    font-weight:normal;
    color:rgb(2,2,10);
}
h3
{
    color:white;
    font-weight:bold;
    text-align:left;
    background-color:transparent;
    position:relative;
    font-family:"Tahoma";
    font-size:20px;
    padding-left:10px;
    padding-top:8px;
}
#linkH a:link,#linkH a:visited, #linkH a:active
{
    display:inline;
    font-size:18px;
    font-weight:normal;
    /*color:rgb(0,100,140);*/
    color:rgb(5,222,253);
    background-color:transparent;
    padding:0px;
    text-decoration:none;
}
#linkH a:hover
{
    display:inline;
    font-size:18px;
    font-weight:normal;
    /*color:rgb(0,100,140);*/
    color:rgb(5,222,253);
    background-color:transparent;
    padding:0px;
    text-decoration:none;
}

/* Paragraph */
p
{
    margin-left:50px;
    margin-right:50px;
    padding-top:14px;
    padding-bottom:14px;    
    font-family:"Tahoma";
    font-size:14px;
    color:white;
}
p2
{
    font-family:"Tahoma";
    font-size:14px;
    color:white;
    text-align:right;
}
#linkP a:link, #linkP a:visited, #linkP a:active
{
    display:inline;
    font-weight:normal;
    color:rgb(0,100,140);
    color:white;
    background-color:transparent;
    padding:0px;
    text-decoration:none;
    box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
}
#linkP a:hover
{
    display:inline;
    font-weight:normal;
    color:rgb(190,230,255);
    background-color:transparent;
    padding:0px;
    text-decoration:none;
    box-shadow: rgba(0,0,0,.2) 0px 0px 0px;
}

/* Transparent Boxes */
div.transbox
{
    margin-left:10%;
    margin-right:10%;
    background-color:rgb(0,150,200);
    grid-gap:1px;
    opacity:0.6;
    z-index:6;
    margin-bottom:3px;
    box-shadow: rgba(0,0,0,.2) 3px 3px 3px;
}   

.grid
{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    grid-gap:10px;
    grid-auto-rows:minmax(auto, auto);
    margin-left:10%;
    margin-right:10%;
    margin-bottom:10px;
}

.tb1a,.tb1b,.tb1c,.tb1d,.tb1e,.tb1f,
.tb2a,.tb2b,.tb2c,.tb2d,.tb2e,.tb2f
{
    overflow:hidden;
    width:12.9vw;
    height:12.9vw;
    background-color:rgb(0,150,200);
    opacity:0.6;
    z-index:6;
    text-align:center;
    box-shadow: rgba(0,0,0,.2) 3px 3px 3px;
    margin-bottom: 1.5%;
    transition:0.3s;
}

.tb1a:hover,.tb1b:hover,.tb1c:hover,.tb1d:hover,.tb1e:hover,.tb1f:hover,
.tb2a:hover,.tb2b:hover,.tb2c:hover,.tb2d:hover,.tb2e:hover,.tb2f:hover
{
    opacity:1;
    transition:0.3s;
}

.tb1a,.tb1b,.tb1c,.tb1d,.tb1e,.tb1f
{
    grid-row:1
}

.tb2a,.tb2b,.tb2c,.tb2d,.tb2e,.tb2f
{
    grid-row:2
}

.tb1a,.tb2a
{
    grid-column:1;
}

.tb1b,.tb2b
{
    grid-column:2;
}

.tb1c,.tb2c
{
    grid-column:3;
}

.tb1d,.tb2d
{
    grid-column:4;
}

.tb1e,.tb2e
{
    grid-column:5;
}

.tb1f,.tb2f
{
    grid-column:6;
}

img.wtrmk
{
    /* "H" Watermark Background */
    position:fixed;
    margin-top:60%;
    width:30%;
    height:auto;
    object-position: center;
    object-fit: cover;
    z-index:1;
}

div.cpyrt
{
    /* Copyright Notice */
    position:fixed;
    bottom:1%;
    width:100%;
    text-align:center;
    font-family:"Tahoma";
    font-size: 100%;
    font-size: .8vh;
    font-style:normal;
    font-weight:normal;
    color: rgb(63,63,63);
    z-index:10;
}

/* Mobile and Narrow Browser Overrides */
@media screen and (max-width:768px)
{
    div.shim
    {
        height:10%;
    }
    
    img.blogo
    {
        margin-top:70%;
    }
}

/* Preload Images 
#preload-01 
{background: url(content/20160801_163256.jpg) no-repeat -9999px -9999px; }
#preload-02 
{background: url(content/370z-dial.jpg) no-repeat -9999px -9999px; }
#preload-03
{background: url(content/tempetechlogo.jpg) no-repeat -9999px -9999px; }
*/