* { margin: 0; padding: 0; }


body {
        font-family: Inter, Arial, sans-serif;
        font-size: 100%;
        text-align: left;
        height:100%;
        }


.inter {font-family: Inter, Arial, sans-serif;}
 
.whitetext {color:white;}
.offwhitetext{color:#EEE;}
.redtext {color:#C5392D;}
.bluetext {color:#1F7177;}
.greytext {color:#333;}
.slatetext {color:#21252B;}
.masontext {color:#3A95A8;}

.whitebg {background-color:white;}
.redbg {background-color:#C5392D;}
.bluebg {background-color:#1F7177;}
.greybg {background-color:#333;}
.slatebg {background-color:#21252B;}
.masonbg {background-color:#3A95A8;}

.p6 { margin-top: 6px;}
.p10 { margin-top: 10px;}
.p14 { margin-top: 14px;}
.p16 { margin-top: 16px;}
.p20 { margin-top: 20px;}
.p24 { margin-top: 24px;}
.p36 { margin-top: 36px;}

.width100 {width:100%;}
.width50 {width:50%;}




.titletext { font-size: 1.2em;
        font-weight: medium;
        text-align: left;
        text-decoration: none;
		white-space: nowrap;
		}

.welcometext { font-size: 3.4em;
        text-align: left;
        text-decoration: none;
		}

.journeytext { font-size: 1.4em;
        text-align: left;
        text-decoration: none;
		line-height: 1.6em;
		}



.buttonbar {position:absolute;left:40%;width:60%;}



/*********************   DROPDOWN TABS  ********************/

#tgb {
        margin: 0;
        padding: 0;
        z-index: 30;
        }


#tgb li {
        margin: 0;
        padding: 0;
        list-style: none;
        float: left;
        }
        

#tgb li a {
        display: block;
        margin: 0 1px 0 0;
        padding: 8px 0px 0px 0px;
        height: 40px;
        width: 200px;
        background-color: #21252B;
        color: #EEE;
        font-family : Inter, Arial, sans-serif;
        font-size: 1.2em;
        font-weight: medium;
        text-align: left;
        text-decoration: none;
		white-space: nowrap;
        }


#tgb li a:hover {
        color:#3A95A8;
        }


#tgb div {
        position: absolute;
        visibility: hidden;
        margin: 0 0 0 10px;
        padding: 0;
        background-color: #3A95A8;
        border: none;
        z-index: 20;
        height: 0px;
        }


#tgb div a {
        position: relative;
        display: block;
        margin: 0px;
        padding: 6px 10px; 0px; 4px;
        width: auto;
        height: auto;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        background-color: #21252B;
        color: #DDD;
        font-family : Inter, Arial, sans-serif;
        font-size: 1.2em;
        font-weight: medium;
        z-index:20;
        }


#tgb div a:hover {
        color:#3A95A8;
        z-index: 20;
        }





/*********************   PICTURE ELEMENTS  ********************/
     
.thirdblock {
        width:30%;
        display: block;
        }
        
.thirdtwothirds {
        width:66%;
        display: block;
        }
.blockborder {border: 2px solid #AAA;}
.noborder {border: none;}

.overflowhidden {
        overflow:hidden;
        }
        
.col1 { float:left;margin-left:0%;}
.col2 { float:left;margin-left:4%;}
.col3 { float:right;}
        
        
.picblock {
        position: relative;
        left: 0px;
        top: 0px;
        display: block;
        width: 100%;
        z-index: 0;
        transition: all 1.5s ease;
        }
        
.pictitle {
        position: relative;
        left: 4%;
        width: 90%;
        top: -10px;
        line-height: 30px;
        background-color:#21252B;;
        color: #FFF;
        font-size: 16px;
        font-weight: normal;
        font-family: Inter, Arial, sans-serif;
        text-align: center;
        border: 2px solid #AAA;
        z-index: 3;
        }
        
        
.pictext {
        position: relative;
        left: 0px;
        width: 90%;
        padding-left:5%;
        padding-right:5%;
        top: -34px;
        padding-top: 40px;
        height: 100px;
        background-color: white;
        color: #21252B;
        font-size: 1.3em;
        line-height: 1.5em;
        font-weight: 200;
        font-family: Inter, sans-serif;
        text-align: center;
        border-top:2px solid #AAA;
        z-index: 1;
        }
        
        







/*********************   CLICKABLE AND HOVERABLE ELEMENTS  ********************/

.clickable :{border:0}
.clickable:hover{cursor:pointer}

.brightable:{opacity:.5;filter:alpha(opacity = 50)}
.brightable:hover{opacity:1;filter:alpha(opacity = 100)}

.dimmable:{opacity:1;filter:alpha(opacity = 100)}
.dimmable:hover{opacity:.5;filter:alpha(opacity = 50)}

.borderable:{border:1px solid white}
.borderable:hover{border:1px solid gray}



/*********************   OBFUSCATABLE ****************************************/

obfusc::after {
        content: attr(whereat) ".com";
        }
obfusc::before {
        content: attr(me) "\0040";
        }