/************************   THE BASIC BODY SET UP  ******************************/

* {
        margin: 0px;
        padding: 0px;
        }


body {
        color: #000;
        background-color : #FFF;
        Arial, sans-serif;
        font-size: 100%;
        text-align: left;
        }




        
        
/**************************    H1 H2 H3 H4  ***************************/


h1, h1 a {
        font-size: 38px;
        font-size: 2vw;
        font-weight: 100;
        font-family: 'Bebas Neue', Arial, sans-serif;
        }

h2 {
        font-size: 18px;
        font-size: 1vw;
        line-height: 26px;
        line-height: 1.4vw;
        font-family: 'Roboto', Arial, sans-serif;
        font-weight: 400;
        text-decoration: none;
        }

h2 a {
        color: white;
        text-decoration: none;
        }

h3 {
        font-size: 18px;
        font-size: 1vw;
        line-height: 28px;
        line-height: 1.5vw;
        font-family: 'Roboto', Arial, sans-serif;
        font-weight: 350;
        text-decoration: none;
        }

h3 a {
        color: black;
        text-decoration: underline;
        }

h4 {
        font-size: 40px;
        line-height: 42px;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        }

h5 {
        font-size: 80px;
        font-size: 4vw;
        font-weight: 100;
        font-family: 'Bebas Neue', Arial, sans-serif;
        }

h6 {
        font-size: 50px;
        font-size: 2.8vw;
        line-height:56px;
        line-height: 3.5vw;
        font-family: 'Roboto', Arial, sans-serif;
        font-weight: 400;
        text-decoration: none;
        }




.mobilefactor {
        font-size = 160%;
        }




        
        
        
/**************** COLOURS OF TEXT AND BACKGROUNDS    *******************/


.bg-turquoise { background-color: #08B; }
.bg-firebrick { background-color: #EE1B24; }
.bg-grey { background-color: #F1F1F3; }
.bg-yellow { background-color:#F1C50E; }
.bg-elephant { background-color:#292D33; }
.bg-charcoal { background-color:#1E1E1E; }
.bg-green {background-color:#01723A; }
.bg-white {background-color:#FFF; }


.txt-white { color: white; }
.txt-black {color: #333; }


.padleft {
        padding-left: 20%;
        }

.pad24 {
        padding-top:16px;
        padding-bottom:24px;
        }

.pad30 {
        padding-top:30px;
        padding-bottom:30px;
        }

.pad40 {
        padding-top:40px;
        padding-bottom:40px;
        }


.bg-photo-customise {
        background-image: url("imgs/customise.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        }


.centre50 {
        width:50%;
        margin-left:auto;
        margin-right:auto;
        }
        
.centre70 {
        width:70%;
        margin-left:auto;
        margin-right:auto;
        }

.centre80 {
        width:80%;
        margin-left:auto;
        margin-right:auto;
        }
        
.centre90 {
        width:90%;
        margin-left:auto;
        margin-right:auto;
        }
        
        
        
        

/*************************  THE LOGO TEXT ********************************/

#textlogo {
        position:absolute;
        left:150px;
        top:64px;
        z-index:1;
        font-size:90px;
        font-family: 'Roboto', Arial, sans-serif;
        }
        

#mobilelogo {
        position:absolute;
        left:12vw;
        top:6px;
        z-index:1;
        font-size:30px;
        font-size:10vw;
        font-family: 'Roboto', Arial, sans-serif;
        }
        
        
        
#circlelogo {
        position:absolute;
        left:50px;
        top:68px;
        z-index:1;
        }
        
        
#circlelogo2 {
        position:absolute;
        left:5px;
        top:10px;
        z-index:1;
        width:10vw;
        height:auto;
        }
        
        
        
#toptext {
        margin-top:40px;
        width:100%;
        text-align:center;
        }
        
        
        


/********* THE RISING BLOCK OF TEXT ON THE HOME PAGE    ******************/

#riseup {
        position:absolute;
        bottom:10px;
        left:8%;
        z-index:1;
        width:25%;
        height:0;
        padding:1% 2% 2% 2%;
        background-color:#222;
        opacity:0.8;
        transition:all 2s;
        overflow:hidden;
        }





/**************** THE DROP DOWN BUTTONS ALONG THE TOP    *******************/


#tgb {
        margin: 0;
        padding: 0;
        float: right;
        z-index:10;
        opacity: 0;
        transition: all 2s;
        }


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


#tgb li a {
        display: block;
        margin: 0 1px 0 0;
        padding: 6px 0px 0px 0px;
        height: 34px;
        width: 200px;
        color: #FFF;
        font-family : 'Roboto', Arial, sans-serif;
        font-size: 18px;
        font-size: 1vw;
        font-weight: medium;
        text-align: center;
        text-decoration: none;
        }


#tgb li a:hover {
        background-color: #08B;
        }

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


#tgb div a {
        position: relative;
        display: block;
        margin: 0px;
        padding: 6px 10px; 0px; 10px;
        width: auto;
        height: auto;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        background-color: #222;
        color: #FFF;
        font-family : 'Roboto', Arial, sans-serif;
        font-size: 18px;
        font-size: 1vw;
        font-weight: medium;
        z-index:20;
        }


#tgb div a:hover {
        background-color: #8B;
        z-index: 20;
        }




#dropdowns {
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        background-color:#222;
        z-index:1;
        opacity:0.8;
        transition:all 2s;
        }



#sidemenu {
        position:fixed;
        top:40px;
        left:0px;
        width:0px;
        background-color:#FFF;
        color: #333;
        padding:20px 10px 10px 20px;
        font-size: 50px;
        font-size: 2.8vw;
        line-height:100px;
        line-height: 7vw;
        font-family: 'Roboto', Arial, sans-serif;
        font-weight: 400;
        text-decoration: none;
        z-index:10;
        visibility:hidden;
        transition:width 1s;
        }




/*********************    PREDEFINED PARAGRAPH BREAKS  ***********************/

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

.p30 {margin-top: 30px; margin-top: 1.7vw;}


.closingdiv { height:140px; clear:both;}
.closingmobile { height:40px; clear:both;}








/***************    ELEMENTS ANIMATED WHEN THEY COME INTO VIEW  **************/


.watched {
        clip-path: inset(0 100% 0 0);
        transition: all 2s;
        }

.watched.animated {
        clip-path: inset(0 0 0 0);
        }







/***************    TABLES  **************/

.oce-first { background-color: white;}


.bigtable { font-family: 'Roboto', Arial, Sans-Serif; font-size: 18px; font-size: 1vw; margin-left: 2px; text-align: left;}
.bigtable th { font-size: 18px; font-size: 1vw; font-weight: normal; padding: 6px 6px; color: white; background-color:#08B;}
.bigtable td { padding: 6px 6px; color: #111; background-color: white; border:1px solid #BBB;}
.bigtable tr:hover td { color: #222; background-color: #CCC; }


.mobtable { font-family: 'Roboto', Arial, Sans-Serif; font-size: 18px; font-size: 2vw; margin-left: 2px; text-align: left;}
.mobtable th { font-size: 18px; font-size: 2vw; font-weight: normal; padding: 6px 6px; color: white; background-color:#08B;}
.mobtable td { padding: 6px 6px; color: #111; background-color: white; border:1px solid #BBB;}
.mobtable tr:hover td { color: #222; background-color: #CCC; }




/*****************        CONTACT FORM      ******************/


.contact {
        width : 100%;
        height : 26px;
        font-size: 18px;
        font-size: 1vw;
        font-family : 'Roboto', Arial, sans-serif;
        color: #333;
        text-decoration : none;
        border: 1px solid #CCC;
        padding-left:6px;
        border-radius: 4px 4px 4px 4px;
        }


.contact2 {
        width : 100%;
        height : 26px;
        font-size: 18px;
        font-size: 2vw;
        font-family : 'Roboto', Arial, sans-serif;
        color: #333;
        text-decoration : none;
        border: 1px solid #CCC;
        padding-left:6px;
        border-radius: 4px 4px 4px 4px;
        }


.contacttbox {
        width : 100%;
        height : 200px;
        font-size: 18px;
        font-size: 1vw;
        line-height: 28px;
        line-height: 1.5vw;
        font-family : 'Roboto', Arial, sans-serif;
        color: #333;
        text-decoration : none;
        border: 1px solid #CCC;
        padding-left:6px;
        border-radius: 4px 4px 4px 4px;
        }



.contacttbox2 {
        width : 100%;
        height : 200px;
        font-size: 18px;
        font-size: 2vw;
        line-height: 28px;
        line-height: 1.5vw;
        font-family : 'Roboto', Arial, sans-serif;
        color: #333;
        text-decoration : none;
        border: 1px solid #CCC;
        padding:6px 6px 6px 6px;
        border-radius: 4px 4px 4px 4px;
        }





/*********************    OTHER ELEMENTS  ***********************/

.largebox {
        height: 38px;
        font-family: 'Roboto', Arial, Sans-Serif;
        font-size: 18px;
        color : #222;
        padding-left:10px;
        border: 1px solid white;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
        }


::placeholder {
        color: Grey;
        opacity: 0.8;
        text-decoration: italic;
        }
:-ms-input-placeholder {
        color: Grey;
        }
::-ms-input-placeholder {
        color: Grey;
        }
        
        
.emailerror {
        width:60%;
        height:40px;
        font-family:'Roboto',Arial,sans-serif;
        color:red;
        font-size:18px;
        font-size:1vw;
        background-color:white;
        padding:8px 0 0 10px;
        display:none;
        }


.picblock {
        position: relative;
        left: 0px;
        top: 0px;
        display: block;
        width: 100%;
        z-index: 0;
        transition: all 1.5s ease;
        }

.picblock:hover {
        transform: scale(1.3);
        }
        

.cssbutton {
        font-size: 20px;
        font-weight: 300;
        font-family: 'Roboto', Arial, sans-serif;
        text-align: center;
        padding: 8px 16px 8px 16px;
        border: 1px solid white;
        line-height: 18px;
        border-radius: 4px 4px 4px 4px;
        }

.cssbutton:hover {
        color: #08B;
        background-color:Gainsboro;
        cursor:pointer;
        }


.hiddenbutton {display:none;}
.shownbutton {display:block;}


.solidtab {
        height:266px;
        width:20%;
        padding:34px 2% 0 2%;
        }


.tweet {
        font-family:Helvetica, Arial;
        color:#292F33;
        font-size:30px;
        font-size:1.8vw;
        line-height:38px;
        line-height:2vw;
        }
        

.minht50 {
        position:relative;
        min-height:50px;
        }
        


#pageicon {
        position:absolute;
        left:15px;
        top:5px;
        }
        
#breadcrumb {
        position:absolute;
        left:100px;
        padding-top:12px;
        color: white;
        font-size: 16px;
        font-size: 0.8vw;
        font-family: 'Roboto', Arial, sans-serif;
        font-weight: 300;
        }
        
        
#copyright {
        position:relative;
        float:right;
        padding-right:60px;
        padding-top:12px;
        color: white;
        font-size: 16px;
        font-size: 0.8vw;
        font-family: 'Roboto', Arial, sans-serif;
        font-weight: 300;
        }

#copyright::before {
        content: "\a9\a0\a0 Copyright Supplier CRM";
        }



/*********************   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";
        }