:root 
{
    --colour-company: #8A0085;

    --colour-background-app: #000000;
    --colour-text-high: grey;
    --colour-text-mid: #515151;
    --colour-text-low: #3e3e3e;

    --colour-background-high: #4C4C4C;
    --colour-background-low: #373737;

    --colour-signal-green: #10c200;
    --colour-signal-yellow: #EAC800;
    --colour-signal-brown: #B55C02;
    --colour-signal-red: #A80014;

    --colour-alarm: #D59F00;

    --colour-warm-white: #FFEFFF;
    --colour-cold-white: #EEFFFF;
    --colour-amber: #FFB400;

    --account-margin-top: 20px;
    --account-space-between-buttons: 10px;

    /* --button-enabled:rgba(206, 206, 206, 0.455); */
    --button-enabled: rgb(246,246,246);
    
    --button-hover:rgba(138, 0, 133, 0.5);

    --footer-color: rgb(46,46,46);
    /* --header-color: rgb(51, 51, 51); */
    --header-color: var(--footer-color);
    --header-drop-down-color: rgb(37, 37, 37);
    
    --page-margin-sides: 5%;
    --page-margin-top: 1%;

    --product-page-padding: 8%;
    --product-page-padding-mobile: 4%;
    --mobile-padding-sides: 25px;

    --homepage-margin: 2vw;

    --border-thin: 1px;
    --border-thick: 2px;

    --website-header-size: 24px; 
    --website-desc-size: 16px;
    --website-header-padding: 5vw;
    /* --website-header-padding: 40px; */

    --product-padding: 80px;
    --product-padding-bottom: 80px;
    --product-padding-mobile-text: 20px;
    --product-padding-bottom-title: 15px;
    --product-title-size: 24px;
    --product-desc-size: 18px;


    --page-font-size-base: 18px;
    --page-font-size-breadcrum: 12px;
    --page-font-size-text-small: 14px;
    --page-font-size-text: 1em;
    --page-font-size-text-subtitle: 1.2em;
    --page-font-size-text-title: 1.4em;

    --product-page-main-title-size: var(--page-font-size-text-title);
    --product-page-title-size: var(--page-font-size-text-subtitle);
    --product-page-desc-size: var(--page-font-size-text);


    --header-font-size:14px;
    --header-margin: 4.2%;
    --header-margin-padded: calc(4.2% +15px);
    
    --footer-font-size: 13px;

    --dark-grey-font: #3e3e3e;  /*rgb(62,62,62) main i think*/
    --light-grey-font: #636363;
    /* --light-grey-font: rgb(167, 167, 167);  */
    /* --light-grey-font: blue; */


    --downloadable-width-small: 30%;
    --downloadable-width-big: 70%;



    --colour-item-hover: #3e3e3e;
    --colour-item-active: #3e3e3e;
    --colour-item-passive: rgb(167, 167, 167);

    --colour-table-line: grey;

    --font-main: 'helvetican-vp', 'light-sans', 'regular-sans', 'helvetica';
    --font-second: 'light-sans';


    --colour-ltgray: rgb(167, 167, 167) ;
    --footer-colour-ltgray: rgb(167, 167, 167) ;
    /* --colour-ltgray: red; */
    --colour-ltergray: rgb(191, 191, 191);
    
    --colour-dkgray: #3e3e3e;
    --colour-white: rgb(240, 248, 255); /*aliceblue;*/
    --footer-colour-white: aliceblue;
    --colour-offwhite: rgb(228, 228, 228);

    --header-light-grey: rgb(193, 193, 193);

    --showable-image-hover-opacity : 0.8;
}
@font-face {
    font-family: 'helvetican-vp';
    src: url(../fonts/helveticaneue.ttf);
}

@font-face {
    font-family: 'bold-sans';
    src: url(../fonts/OpenSans-Bold.ttf);
}

@font-face {
    font-family: 'light-sans';
    src: url(../fonts/OpenSans-Light.ttf);
}

@font-face {
    font-family: 'regular-sans';
    src: url(../fonts/OpenSans-Regular.ttf);
}

@font-face {
    font-family: 'helvetica-bold';
    src: url(../fonts/Helvetica-Neue-Medium-Extended.ttf);
}
/* * {
    font-family: 'helvetican-vp', 'light-sans', 'regular-sans', 'helvetica';
} */

#bluryImage {
    -webkit-animation: sharp 1s; /* Chrome, Safari, Opera */
    animation: sharp 1s;
}

/* img {
    -webkit-animation: sharp 4s; 
    animation: sharp 4s;
} */

@-webkit-keyframes sharp {
    from {-webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);}
    to {-webkit-filter: none;
  -moz-filter: none;
  -o-filter: none;
  -ms-filter: none;
  filter: none;}
}

@keyframes sharp {
     from {-webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);}
    to {-webkit-filter: none;
  -moz-filter: none;
  -o-filter: none;
  -ms-filter: none;
  filter: none;}
}