/*
       Style sheet

*/





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



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



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




p {
        margin-top: 1.4em;
        }










/************************   PAGE HEADER  *************************************/



.headerstripe {
        position: relative;
        top: 0px;
        left: 0px;
        width : 100%;
        z-index: 1;
        background-color : #FFF;
        }
        
        
.logo {
        position: absolute;
        top : 10px;
        left: 30px;
        z-index: 2;
        }



.socialbar {
        position: absolute;
        top : 10px;
        left: 75%;
        width: 25%;
        z-index: 2;
        background-color : #FFF;
        }

.socialcontainer {
        width:auto;
        float: right;
        text-align: right;
        margin-right:100px;
        line-height: 40px;
        color: #777;
        font-size: 16px;
        font-weight: bold;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        }



/************** SOCIAL MEDIA BUTTONS  **************/

.social-button{
        float:left;
        height:30px;
        width:30px;
        border-radius: 17px;
        margin-left:10px;
        -webkit-border-radius: 17px;-moz-border-radius: 17px;
        border:2px solid #cccccc;
        }



.facebook{background: url(/imgs/facebook_icon_over.jpg) center center no-repeat;}
.twitter{background: url(/imgs/twitter_icon_over.jpg) center center no-repeat;}
.google{background: url(/imgs/google_icon_over.jpg) center center no-repeat;}
.linkedin{background: url(/imgs/linkedin_icon_over.jpg) center center no-repeat;}
.instagram{background: url(/imgs/instagram_icon_over.jpg) center center no-repeat;}
.youtube{background: url(/imgs/youtube_icon_over.jpg) center center no-repeat;}


.facebook:hover{background: url(/imgs/facebook_icon.jpg) center center no-repeat;}
.twitter:hover{background: url(/imgs/twitter_icon.jpg) center center no-repeat;}
.google:hover{background: url(/imgs/google_icon.jpg) center center no-repeat;}
.linkedin:hover{background: url(/imgs/linkedin_icon.jpg) center center no-repeat;}
.instagram:hover{background: url(/imgs/instagram_icon.jpg) center center no-repeat;}
.youtube:hover{background: url(/imgs/youtube_icon.jpg) center center no-repeat;}









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

.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;}



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





/*********************    H1 H2 etc  ***********************/


h1, h1 a {
        color: #0453E8;
        font-size: 2vw;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        margin: 0 0 0 0;
        padding: 0;
        text-decoration: none;
        }


h2  {
        color: #333333;
        font-size: 1.1vw;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        line-height: 1.8vw;
        margin: 0 0 0 0;
        padding: 0;
        text-decoration: none;
        }




h3, h3 a {
        color: #0453E8;
        font-size: 1.7vw;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        margin: 0 0 0 0;
        padding: 0;
        text-decoration: none;
        }




h4  {
        color: #333;
        font-size: 1vw;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        line-height: 1.8vw;
        margin: 0 0 0 0;
        padding: 0;
        text-decoration: none;
        }



h5, h5 a {
        color: #222;
        font-size: 0.7vw;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        line-height: 0.96vwm;
        padding: 0;
        text-decoration: none;
        }



h6, h6 a {
        color: #333333;
        font-size:1.4em;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        line-height: 1.6em;
        margin:00 0 0;
        padding: 0;
        text-decoration: none;
        }



.mindexsection {
        color: #333;
        font-size:1.2em;
        font-weight: normal;
        line-height:1.4em;
        font-family: 'Open Sans',Verdana,Arial,sans-serif;
        }


.mindexhr {
        width:100%;
        border-top:1px solid #222;
        }



.textinput {
        height: 30px;
        margin-top:6px;
        margin-bottom:6px;
        font-family: 'Roboto', Verdana, Arial, Sans-Serif;
        font-size: 2vw;
        color : #333;
        padding-left:10px;
        border: 1px solid #777;
        }



.btn-general {
        font-size: 2vw;
        font-weight: normal;
        font-family : 'Raleway', Verdana, Arial, sans-serif;
        background-color: #0D3C75;
        color:white;
        text-align: left;
        padding: 10px 10px 10px 10px;
        height: auto;
        border:1px solid white;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
        }


.btn-general:hover {
        background-color: #ECD384;
        color:#333;
        border:1px solid grey;
        cursor:pointer;
        }


/**************** THE BUTTONS ALONG THE FOOTER    *************/

.buttonbar {
        position:relative;
        top:6px;
        left:0px;
        width : 1000px;
        height: 22px;
        margin-left:auto;
        margin-right:auto;
        background-color : #FFF;
        }


#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 0 0 0;
        padding: 6px 0px 0px 0px;
        height: 22px;
        width: 141px;
        background-color: #0453E8;
        color: #FFF;
        font-family : 'Open Sans', Verdana, Arial, sans-serif;
        font-size: 0.8em;
        font-weight: normal;
        text-align: center;
        text-decoration: none;
        border-right: 1px solid #1E698B;
        }

#tgb li a:hover {
        color : #333;
        background-color: #E6E7E8;
        }





/************************   FOOTER *************************************/


.footer {
        width : 100%;
        height : 156px;
        background-color: #E6E7E8;
        margin-top:20px;
        }



.footercontent {
        background-color: #E6E7E8;
        width : 91%;
        height : 150px;
        margin-left:auto;
        margin-right:auto;
        position: relative;
        overflow: none;
        }
        
        
        
        
.thirdblock {width:30%;display: block;}

.blockborder {border: 2px solid #AAA;}
.noborder {border: none;}

.col1 { float:left;margin-left:0%;}
.col2 { float:left;margin-left:4%;}
.col3 { float:right;}




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

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

.copyrightbar {
        display: block;
        position:relative;
        top:26px;
        left:0px;
        width : 1000px;
        height: 30px;
        margin-left:auto;
        margin-right:auto;
        background-color : #FFF;
        font-family: Verdana, Arial;
        font-weight: normal;
        font-size: 12px;
        text-align: center;
        }



.sidebar {
        background: -webkit-linear-gradient(#014F83, #0453E8); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#014F83, #0453E8); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#014F83, #0453E8); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#014F83, #0453E8); /* Standard syntax */
        color: white;
        font-size: 16px;
        font-weight: normal;
        font-family: Verdana, Arial, sans-serif;
        height: 24px;
        margin: 0 0 0 0;
        padding: 4px 4px 4px 4px;
        text-decoration: none;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        }






.prodselect {
        background: -webkit-linear-gradient(#014F83, #0453E8); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#014F83, #0453E8); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#014F83, #0453E8); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#014F83, #0453E8); /* Standard syntax */
        color: white;
        font-size: 16px;
        font-weight: normal;
        font-family: Verdana, Arial, sans-serif;
        margin: 0 0 0 0;
        padding: 4px 6px 4px 6px;
        text-decoration: none;
        height:24px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        }

.prodselect:hover { cursor : pointer;
        background: -webkit-linear-gradient(#444, #555); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#444, #555); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#444, #555); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#444, #555); /* Standard syntax */
        }



.prodselected {
        background: -webkit-linear-gradient(#444, #555); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#444, #555); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#444, #555); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#444, #555); /* Standard syntax */
        color: white;
        font-size: 16px;
        font-weight: normal;
        font-family: Verdana, Arial, sans-serif;
        margin: 0 0 0 0;
        padding: 4px 4px 4px 4px;
        text-decoration: none;
        height:24px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        }


        
        
        









/********************  UNORDERED LISTS, SIDEBOXES ETC. ***************/

.mylist {
        color: #333333;
        font-size: 1vw;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        line-height: 1.6vw;
        margin: 0 0 0 10px;
        padding: 0;
        text-decoration: none;
        }



.sidebox {
        background: white;
        color: #333;
        font-size: 0.8vw
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        margin: 0 0 0 0;
        padding: 4px 4px 4px 4px;
        text-decoration: none;
        border : 1px solid #DDD;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        }
        


.sideboxheader {
        background-color : #FFF;
        border-top : 1px #A7A7A7 solid;
        border-left : 1px #A7A7A7 solid;
        border-right : 1px #A7A7A7 solid;
        }
        
        
.sideboxtitle {
        background-color : #FFF;
        border-left : 1px #A7A7A7 solid;
        border-right : 1px #A7A7A7 solid;
        color : #0077CB;
        font-size: 100%;
        font-weight: normal;
        font-family: Verdana, Arial, sans-serif;
        line-height: 1.2em;
        padding: 12px 10px 6px 10px;
        }


.sideboxbody {
        background-color : #FFF;
        border-bottom : 1px #A7A7A7 solid;
        border-left : 1px #A7A7A7 solid;
        border-right : 1px #A7A7A7 solid;
        color : #333;
        font-size: 70%;
        font-weight: normal;
        font-family: Verdana, Arial, sans-serif;
        line-height: 1.2em;
        padding: 6px 10px 15px 10px;
        }
        
        
        
.sideboxinput {
        background-color : #FFF;
        width : 180px;
        color : #333;
        font-size: 100%;
        font-weight: normal;
        font-family: Verdana, Arial, sans-serif;
        }
        
        
        
        
        




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


.contact {
        width : 400px;
        height : 26px;
        font-size : 12px;
        font-family : 'Open Sans', Verdana, Arial, sans-serif;
        color: #333;
        text-decoration : none;
        border: 1px solid #CCC;
        padding-left:6px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
        }
        


.contacttbox {
        width : 400px;
        height : 150px;
        font-size : 12px;
        font-family : Verdana, Arial, sans-serif;
        color: #333333;
        text-decoration : none;
        border: 1px solid #CCC;
        padding-left:6px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
        }









/********************   CSS ROUNDED BUTTONS ***************/

.cssbutton {
        color: white;
        background-color:#0453E8;
        font-size: 1vw;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        text-align: center;
        padding: 4px 10px 4px 10px;
        border-width:1px;
        border-color:#777;
        border-style:solid;
        line-height: 18px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
        }

.cssbutton:hover {color:#0453E8; background:#AAA; cursor:pointer;}


.yellowbutton {
        color: #222;
        background-color:#E9CF00;
        font-size: 1vw;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        text-align: center;
        padding: 4px 10px 4px 10px;
        border-width:1px;
        border-color:#777;
        border-style:solid;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
        }

.yellowbutton:hover {background:#AAA; cursor:pointer;}








/********************    CLICKABLE ELEMENTS    ***************/

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









/********************    SCROLLABLE ELEMENTS    ***************/

.scrollable : {
        border : 0px;
        -o-transition: all .5s;
        -ms-transition: all .5s;
        -moz-transition: all .5s;
        -webkit-transition: all .5s;
        transition: all .5s;
        }
.scrollable:hover { cursor : pointer; }











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

/* Let the width find itself ! */
#one-column-whateverwidth { font-family: Verdana, Arial, Sans-Serif; font-size: 12px; margin: 2px; text-align: left; border-collapse: collapse; }
#one-column-whateverwidth th { font-size: 12px; font-weight: normal; padding: 6px 6px; color: #111; }
#one-column-whateverwidth td { padding: 6px 6px; color: #111111; border-top: 1px solid #888; }
#one-column-whateverwidth tr:hover td { color: #222; background: #AAA; }

/* Second option */
#one-column-whateverwidth2 { font-family: Verdana, Arial, Sans-Serif; font-size: 12px; margin: 2px; text-align: left; border-collapse: collapse; }
#one-column-whateverwidth2 th { font-size: 12px; font-weight: normal; padding: 6px 6px; color: #111; }
#one-column-whateverwidth2 td { padding: 6px 6px; color: #111111; border-top: 1px solid #888; }
#one-column-whateverwidth2 tr:hover td { color: #222; background: #999; }


/* Contact form */
#one-column-contact { font-family: Verdana, Arial, Sans-Serif; font-size: 14px; margin: 2px; text-align: left; border-collapse: collapse; }
#one-column-contact th { font-size: 14px; font-weight: normal; padding: 6px 6px; color: #111; }
#one-column-contact td { padding: 6px 6px; height:40px; color: #111111; }
#one-column-contact tr:hover td { color: #222; background: #BBB; }










/********************    SUITE OF INPUT BOXES, TEXT AREAS AND DROPDOWNS    ***************/

input.onecol_txt_70 { width: 70px; height: 20px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777777; }
input.onecol_txt_120 { width: 120px; height: 20px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; }
input.onecol_txt_150 { width: 150px; height: 20px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; }
input.onecol_txt_210 { width: 210px; height: 20px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777777; }
input.onecol_txt_350 { width: 350px; height: 20px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777777; }
input.onecol_txt_650 { width: 650px; height: 20px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777777; }
input.onecol_txt_800 { width: 800px; height: 20px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777777; }

.onecol_drop_70 { width: 70px; height: 20px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; }
.onecol_drop_150 { width: 150px; height: 20px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; }
.onecol_drop_210 { width: 210px; height: 20px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; }

.onecol_txtarea { width: 210px; height: 80px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; }
.onecol_txtarea400 { width: 400px; height: 80px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; }
.onecol_txtarea600 { width: 600px; height: 100px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; }
.onecol_txtarea_deep { width: 210px; height: 160px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; }
.onecol_txtarea_shallow { width: 210px; height: 20px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; }
.onecol_txtarea_800 { width: 800px; height: 120px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; }
.onecol_txtarea_800g { width: 800px; height: 120px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #7777777; }
.onecol_txtarea_800x250 { width: 800px; height: 250px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; }

.onecol_upload_150 { width: 150px; height: 20px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; }
.onecol_upload_210 { width: 210px; height: 20px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; }
.onecol_upload_400 { width: 400px; height: 20px; font-family: Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #61B7C6; }









/* Outline Inward */

.outline-inward {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.outline-inward:before {
  pointer-events: none;
  content: '';
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -16px;
  opacity: 0;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}

.outline-
inward:hover:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  opacity: 1;
}



/*B&W*/
.bw {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.bw:hover {
  -webkit-filter: grayscale(100%);
}







/*    Pop elements    */

@-webkit-keyframes pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}


@keyframes pop {
  50% {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}


.pop {
        display: block;
        margin:auto;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }



.pop:hover {
        -webkit-animation-name: pop;
        animation-name: pop;
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
        }






/*  AJAX TEXT BAR */
.ajaxtextbar {
        z-index: 2;
        background: -webkit-linear-gradient(#014F83, #0453E8); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#014F83, #0453E8); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#014F83, #0453E8); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#014F83, #0453E8); /* Standard syntax */
        text-align: center;
        opacity: 0.7;
        -moz-transition:all 0.3s ease-in-out;
        -webkit-transition:all 0.3s ease-in-out;
        -moz-border-radius: 0px;
        -webkit-border-radius: 37px 37px 0px 0px;
        border-radius: 37px 37px 0px 0px;
        width: 500px;
        height: 0px;
        visibility: hidden;
        color: #FFFFFF;
        font-size: 1em;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        line-height: 1.6em;
        padding-top:20px;
        }



.pancontainer{
        position:relative; /*keep this intact*/
        overflow:hidden; /*keep this intact*/
        width:500px;
        height:500px;
        border:1px solid grey;
        }




/*  POPUP COOKIES BOX */
.cookiebox {
        display:none;
        z-index:100;
        position:fixed;
        left: 10%;
        top: 80%;
        width: 25%;
        height: 100px;
        color: #FFF;
        background-color: #333;
        opacity: 0.8;
        font-size: 0.8vw;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        padding: 10px 10px 10px 10px;
        border-width:2px;
        border-color:#FFF;
        border-style:solid;
        line-height: 1vw;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
        }