/* -------------------------------------------------------------*/
/* default settings for ALL elements */
/* -------------------------------------------------------------*/
* {
    box-sizing:border-box;
    margin:0;
    padding:0;
    border:none;
}

/* -------------------------------------------------------------*/
/* basic background and make body and html full height of browser window */
/* -------------------------------------------------------------*/
body{
    height:100%;
}
html{
    height:100%;
}
/* -------------------------------------------------------------*/


/* -------------------------------------------------------------*/
/* define all panel sizes to allow for automatic responsiveness */
/* -------------------------------------------------------------*/
.middle_panel{width:100%;max-width:1000px;margin:0 auto;}
.full_panel{width:100%;}
.sixth_panel{width:16.667%;}
.fifth_panel{width:20%;}
.quarter_panel{width:25%;}
.third_panel{width:33.333%;}
.twofifth_panel{width:40%;}
.half_panel{width:50%;}
.half_panel_fixed{width:50%;}
.threefifth_panel{width:60%;}
.twothird_panel{width:66.667%;}
.threequarter_panel{width:75%;}
.fourfifth_panel{width:80%;}
.fivesixth_panel{width:83.333%;}
.nineth_panel_fixed{width:11.1111%;}
.fifth_panel_fixed{width:20%;}

/* -------------------------------------------------------------*/
/* change widths dependent on window size for responsive pages */
/* choose different breakpoints if required */
/* -------------------------------------------------------------*/
@media screen and (max-width:699px){
    .third_panel_image{     width:100%;}
    .sixth_panel{           width:50%;}
    .fifth_panel{           width:50%;}
    .quarter_panel{         width:50%;}
    .third_panel{           width:50%;}
    .twofifth_panel{        width:50%;}
    .threefifth_panel{      width:100%;}
    .twothird_panel{        width:100%;}
    .threequarter_panel{    width:100%;}
    .fourfifth_panel{       width:100%;}
    .fivesixth_panel{       width:100%;}
    .half_panel{            width:100%;}
    .nineth_panel_fixed{    width:33.3333%;}
}

@media screen and (max-width:999px){
 body{padding-left:10px; padding-right:10px;}
/*     .middle_panel{margin-left:0.5%;padding-right:0.5%;width:99%;} */
}


/* -------------------------------------------------------------*/
/* on very narrow display everything is wide */
/* -------------------------------------------------------------*/
@media screen and (max-width:399px){
    .sixth_panel{           width:100%;}
    .fifth_panel{           width:100%;}
    .quarter_panel{         width:100%;}
    .third_panel{           width:100%;}
    .twofifth_panel{        width:100%;}
}
/* -------------------------------------------------------------*/

/* -------------------------------------------------------------*/
/* basic DIV controls */
/* -------------------------------------------------------------*/

/* -------------------------------------------------------------*/
/* basic DIV controls */
/* -------------------------------------------------------------*/
.clear{clear:both;}
.centre_div{margin-left:auto;margin-right:auto;}
.overflow{overflow:hidden;}
.scrollable{overflow:auto;}
.fll{float:left;}
.flr{float:right;}

/* -------------------------------------------------------------*/
/* now you see it now you don't controls */
/* -------------------------------------------------------------*/
.showElement{display:block;}
.hideElement{display:none;}

.transparent{opacity:0;}
.opaque{opacity:1;}
.centre{text-align:center;}
/* -------------------------------------------------------------*/

/* -------------------------------------------------------------*/
/* Padding and margin controls */
/* -------------------------------------------------------------*/
.small_h_padding{ padding-left:8px; padding-right:8px;}
.medium_h_padding{padding-left:16px;padding-right:16px;}
.large_h_padding{ padding-left:24px;padding-right:24px;}
.xlarge_h_padding{padding-left:32px;padding-right:32px;}
.small_v_padding{ padding-top:8px;  padding-bottom:8px;}
.medium_v_padding{padding-top:16px; padding-bottom:16px;}
.large_v_padding{ padding-top:24px; padding-bottom:24px;}
.xlarge_v_padding{padding-top:32px; padding-bottom:32px;}

.small_h_margin{ margin-left:8px;   margin-right:8px;}
.medium_h_margin{margin-left:16px;  margin-right:16px;}
.large_h_margin{ margin-left:24px;  margin-right:24px;}
.xlarge_h_margin{margin-left:32px;  margin-right:32px;}
.small_v_margin{ margin-top:8px;    margin-bottom:8px;}
.medium_v_margin{margin-top:16px;   margin-bottom:16px;}
.large_v_margin{ margin-top:24px;   margin-bottom:24px;}
.xlarge_v_margin{margin-top:32px;   margin-bottom:32px;}


/* -------------------------------------------------------------*/
/* basic DIV Formatting - border/radius/shadow */
/* -------------------------------------------------------------*/
.border_1{              border:1px;}
.border_left_1{         border-left:1px;}
.border_top_1{          border-top:1px;}
.border_right_1{        border-right:1px;}
.border_bottom_1{       border-bottom:1px;}
.border_colour_black{   border-color:black;}

.small_radius{          border-radius:4px;}
.medium_radius{         border-radius:8px;}
.large_radius{          border-radius:12px;}
.full_radius{           border-radius:50%;}
.small_radius_top{      border-radius:4px 4px 0 0;}
.medium_radius_top{     border-radius:8px 8px 0 0;}
.large_radius_top{      border-radius:12px 12px 0 0;}
.full_radius_top{       border-radius: 50% 50% 0 0;}

.shadow{    box-shadow:0px 0px 12px RGBA(0,0,0,0.6);}
.shadow2{   box-shadow:0px 0px 12px RGBA(0,0,0,0.8);}
.shadowbr{  box-shadow:6px 6px 12px RGBA(0,0,0,0.6);}

/* -------------------------------------------------------------*/
/* full width background for menu */
/* -------------------------------------------------------------*/
.topnav{ overflow: hidden; }

/* -------------------------------------------------------------*/
/* Style the links inside the navigation bar */
/* -------------------------------------------------------------*/
.topnav a {
    float: left;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* -------------------------------------------------------------*/
/* Hide the link that should open and close the topnav on small screens */
/* -------------------------------------------------------------*/
.topnav .icon { display: none; }
/* -------------------------------------------------------------*/
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
/* -------------------------------------------------------------*/
@media screen and (max-width: 599px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
    }
/* only show the top menu on a wide display */
    #toplogo{
        display:none;
    }
/* -------------------------------------------------------------*/
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
/* -------------------------------------------------------------*/
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

/* -------------------------------------------------------------*/
/* basic controls for static buttons on web page */
/* -------------------------------------------------------------*/
/* Social Media buttons */
/* -------------------------------------------------------------*/
.sidetab{
    position:fixed;
    left:40px;
    bottom:0px;
    padding:4px 4px;
    z-index:2;
    border-radius:5px 5px 0 0;
    box-shadow:0px 0px 6px RGBA(0,0,0,0.5);
}
.sidetab a {
    float:left;
    display: block; /* Make the links appear below each other instead of side-by-side */
    text-align: center; /* Center-align text */
    padding: 5px 10px; /* Add some padding */
}
/* -------------------------------------------------------------*/
/* second button on bottom to scroll to top */
/* -------------------------------------------------------------*/
.sidetab2{
    position:fixed;
    right:40px;
    bottom:0px;
    padding:4px 20px;
    z-index:2;
    border-radius:5px 5px 0 0;
    box-shadow:0px 0px 6px RGBA(0,0,0,0.5);
}
.sidetab2 button{
    background:none;
}

/* --------------------------------------------------------- */
/* define size of slideshow on screen (560px high and full width */
/* --------------------------------------------------------- */
#slideshowshell,
#slidecartridge{ height:450px; }
/* --------------------------------------------------------- */
/* fill the shell with the image and ensure it covers the page */
/* --------------------------------------------------------- */
#slidecartridge{
    position:relative;
    left0;
    top:0px;
    width:100%;
    height:100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../slideshow/img-1.jpg");
}
/* --------------------------------------------------------- */
/* Footer to page, maybe have contact details in here */
/* --------------------------------------------------------- */
.footerBlock{
    padding-bottom:40px;
}

/* ------------------------------------------------------------------------------------------------- */
/* qaud panel of images with
/* ------------------------------------------------------------------------------------------------- */
.quadpanels{
    width:100%;
    height:500px;
    background:#c0c0c0;
    position:relative;
    margin:0;
    clear: both;
}
div.topleft,
div.topright,
div.bottomleft,
div.bottomright{
    width:50%;
    height:250px;
    position:absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity:1.0;
}
div.topleft{
    top:0;
    left:0;
}
div.topright{
    top:0;
    right:0;
}
div.bottomleft{
    bottom:0;
    left:0;
}
div.bottomright{
    bottom:0;
    right:0;
}

/* -------------------------------------------------------------*/
/* default settings for image to be parallaxed */
/* -------------------------------------------------------------*/
.parallax {
    height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0px 0px 12px rgba(0,0,0,50%) inset;
}
/* -------------------------------------------------------------*/
/* Select appropriate image for each parallax zone */
/* -------------------------------------------------------------*/
#parallaximage_1{ background-image: url("../slideshow/img-6.jpg");}
#parallaximage_2{ background-image: url("../slideshow/img-8.jpg");}
/* -------------------------------------------------------------*/


/* ------------------------------------------------------------------------------------------------- */
/* don't change these styles for the quotes */
/* ------------------------------------------------------------------------------------------------- */
.quotepanel{
    width:70%;
    margin-left:15%;
    padding:20px;
    font-family:georgia;
    clear: both;
}
.quotepanel p{
    text-align:center;
    margin:0;
    font-family:inherit;
}
.quote{
    text-align:center;
    font-style:italic;
    margin:0;
    line-height:44px;
    font-family:inherit;
}
.quotepanel p.quoter{
    text-align:center;
    font-variant: small-caps;
    font-style:normal;
    font-weight:bold;
    text-align:right;
    margin:0;
    font-family:inherit;
}
.quotationmarks{
    font-weight:bold;
}
.quotepanel{
    border-left-width:20px;
    border-left-style:solid;
}

/* -------------------------------------------------------------*/
/* used for divs which have lots of text, the columns attempt to */
/* balance across all of them (images included) */
/* -------------------------------------------------------------*/
.text_two_column{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    text-align:justify;
   -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
.text_three_column{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    text-align:justify;
   -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
@media screen and (max-width:849px){
    .text_three_column{
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
       -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
        -moz-column-gap: 30px; /* Firefox */
        column-gap: 30px;
    }
}
@media screen and (max-width:549px){
    .text_three_column,
    .text_two_column{
        -webkit-column-count: 1; /* Chrome, Safari, Opera */
        -moz-column-count: 1; /* Firefox */
        column-count: 1;
        -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
        -moz-column-gap: 20px; /* Firefox */
        column-gap: 20px;
    }
}

/* -------------------------------------------------------------*/
/* specific image backgrounds for main page background images */
/* default settings to make image cover background */
/* -------------------------------------------------------------*/
.backgroundimage{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* -------------------------------------------------------------*/
/* background images for text on a background */
/* -------------------------------------------------------------*/
#about{  background-image: url("../images/bg.jpg");}


/* -------------------------------------------------------------*/
/* full_width images */
/* -------------------------------------------------------------*/
.full_width_image{
    width:100%;
    height:450px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.height500{height:500px;}
.height450{height:450px;}
.height400{height:400px;}

#wideimage{
    background-image: url("../slideshow/img-1.jpg");
}

/* -------------------------------------------------------------*/
/* full_width images */
/* -------------------------------------------------------------*/
.hoverimage{
    margin-left:auto;margin-right:auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow:hidden;
}
.hoverimage_overlay{
    opacity:0;
    transition: opacity 2s;
}

.hoverimage_overlay:hover{
    opacity:1;
}

@keyframes fadein {
    0%   {opacity:0}
    100% {opacity:1}
}


/* -------------------------------------------------------------*/
/* Basic css for the gallery images */
/* -------------------------------------------------------------*/
.galleryimage{
    padding:5px;
    border-radius:8px;
    float:left;
    border:1px solid #a0a0a0;
}
.galleryimage:hover{
border-color;red;
    box-shadow:0px 0px 16px rgba(0,0,0,0.7);
    }
.playstopimages,
.galleryprev,
.gallerynext{
    cursor: pointer;
    position: absolute;
    width: auto;
    padding: 8px 8px 16px 8px;
    font-weight: bold;
    font-size: 180%;
    transition: 0.6s ease;
    border-radius: 8px;
    color:white;
/*     background:rgba(0,0,0,0.2); */
}
.galleryprev{
    top: 45%;
    left:40px;
    z-index:4;
}
.gallerynext{
    top: 45%;
    right:40px;
    z-index:4;
}
.playstopimages{
    left:48%;
    font-size: 175%;
    bottom:30px;
    z-index:4;
}
.gallerynext:hover, .galleryprev:hover {
    color:white;
}
#gallerylogo{
    width:300px;
    margin-left:0;
    height:auto;
}
/* -------------------------------------------------------------*/
/* configure the gallery images to 4 on a row then 3 then 2 */
/* depending on the screen width */
/* -------------------------------------------------------------*/
.galleryimage{
    background-color:#202020;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* -------------------------------------------------------------*/

/* -------------------------------------------------------------*/
/* for images or text going to full screen */
/* -------------------------------------------------------------*/
#newsLightbox{
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 20px;
    padding-bottom: 20px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color:RGBA(0,0,0,0.99);
}
#galleryLightbox{
    display: none;
    position: fixed;
    z-index: 1;
    padding:20px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color:RGBA(0,0,0,0.99);
}
/* -------------------------------------------------------------*/
/* when an image is shown limit the dimensions */
/* -------------------------------------------------------------*/
#lightboximage{
    background-color: #222;
    margin:auto 0;
    padding: 0px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius:12px;
}
/* -------------------------------------------------------------*/
/* configure the close icon */
/* -------------------------------------------------------------*/
.close {
    color: white;
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 200%;
    font-weight: bold;
    cursor : pointer;
/*
    background:rgba(0,0,0,0.5);
 */
    border-radius:4px;
    padding:0px 10px 5px 10px;
}
/* -------------------------------------------------------------*/
.container {
    position: relative;
    text-align: center;
}
.centered {
    position: absolute;
    top: 2px;
    left: 12px;
}
.thumb{
    border:1px solid white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ----------------------------------------------------------------- */
/* images with text over the top and hover control on brightness */
/* ----------------------------------------------------------------- */
.container {
    position: relative;
    text-align: center;
}


/* -------------------------------------------------------------------- */
/* basic button formatting */
/* -------------------------------------------------------------------- */
.btn {
    padding:4px 10px;
    border-radius:4px;
    border: none; /* Remove borders */
    cursor: pointer; /* Add a pointer cursor on mouse-over */
}
/* -------------------------------------------------------------------- */
/* highlight active button - add class to button */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* format text block over slideshows
/* -------------------------------------------------------------------- */
#textoverslides{
margin:25px 20px;
height:400px;
padding:20px;
border-radius:10px;
overflow:hidden;
}
}

/* -------------------------------------------------------------------- */
/* product/person/service cards */
/* H2 is name/service */
/* img is photo/illustration */
/* p basic descriptive text  */
/* -------------------------------------------------------------------- */
#cards{
}
.data_card,
.person_card{
width:100%;
border-radius:4px;
margin-top:20px;
margin-bottom:20px;
padding:0;
box-shadow:2px 2px 8px rgba(0,0,0,0.5);
overflow:auto;
}
.data_card h2,
.person_card h2{
border-radius:4px 4px 0 0;
text-align:center;
padding:10px 0;
margin:0;
}
.data_card img,
.person_card img{
width:100%;
height:auto;
margin:0;
padding:0;
}
.data_card li,
.data_card p,
.person_card li,
.person_card p{
margin:0;
padding:10px 10px 5px 10px;
}
.data_card ul,
.person_card ul{
margin-left:30px;
padding:left:10px;
}

/* -------------------------------------------------------------------- */
/* Simple formatting for file download lists */
/* -------------------------------------------------------------------- */
.downloadlist h3 {
    text-align:center;
}
.download_icon,
.downloadlist h3 a{
    line-height:1.2em;
    letter-spacing:3px;
    text-decoration:none;
    }


/* -------------------------------------------------------------------- */
/* Simple formatting for vertical/horizontal tabs */
/* -------------------------------------------------------------------- */
div.vtablist {
    float: left;
    width: 30%;
    height:100%
}
div.htablist {
    width: 100%;
}

/* Style the buttons inside the tab */
div.vtablist button {
    display: block;
    padding: 22px 16px;
    width: 100%;
    height:75px;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-weight:bold;
    margin:0;
}
/* Style the buttons inside the tab */
div.htablist button {
    display: block;
    float:left;
    padding: 22px 8px;
    height:75px;
    outline: none;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    font-weight:bold;
    margin:0;
}



div.vtablist button:first-child{
    border-top:none;
}
div.htablist button:first-child{
    border-left:none;
    }
/* Style the tab content  edit your styles based on the "tab_target" class*/
.tab_target {
    transition: 1s ease;
    float: left;
    display:none;
    padding:10px 20px;
    overflow:auto;
}
.tab_target ul{
    margin-left:20px;
    padding-left:20px;
    }

.hovertext:hover .overlay {
    opacity:1;
}
.hovertext:hover{
    cursor:pointer;
}

.hovertext {
    width:100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.hoverimage {
    display: block;
    width: 100%;
    height: auto;
}
.hovertextcontainer {
    position: relative;
    text-align: center;
    color: green;
}

.textoverlay_mask{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

.textoverlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: 1s ease;
}
.textoverlay:hover{
    opacity:1;
    cursor:pointer;
}
/* -------------------------------------------------------------*/
/* sort out the font sizes */
/* -------------------------------------------------------------*/
* {
/* -------------------------------------------------------------*/
/* Choose site font - basic ones are googlefonts */
/* -------------------------------------------------------------*/
    font-family: 'Raleway','Quicksand', sans-serif,verdana;
    font-size:100%; /* base font size */
}
h1{font-size:180%;letter-spacing:4px;line-height:1em;margin:0 0 0.25em  0;word-break:keep-all;}
h2{font-size:160%;letter-spacing:3px;line-height:1em;margin:0 0 0.25em 0;word-break:keep-all;}
h3{font-size:130%;letter-spacing:2px;line-height:1em;margin:0 0 0.25em  0;word-break:keep-all;}
.pdiv,
p{ font-size:100%;letter-spacing:2px;line-height:1.5em;margin:0 0 0.75em 0;word-break:keep-all;}
ul{margin: 1em 0 1em 1em;}
li{font-size:100%;letter-spacing:2px;line-height:1.5em;margin:0 0 0 1em;}
.topnav a {
    font-size:130%;
}
.sidetab2,.sidetab a {
    font-size:125%;
}
.quotationmarks,
.quote{
    font-size:200%;
}
.quotepanel p.quoter{
    font-size:110%;
}
.btn {
    font-size:100%;
}
.openshut,
.download_icon,
.downloadlist h3 a{
    font-size:130%;
}
.accordian_button,
div.htablist button,
div.vtablist button {
    font-size:130%;
}
.hovertext {
    font-size: 180%;
}
/* -------------------------------------------------------------*/
/* reduce font size as window gets smaller */
/* -------------------------------------------------------------*/
@media screen and (max-width:699px){
    * {font-size:14px;}
}

@media screen and (max-width:500px){
    .quote{
        font-size:160%;
    }
    .quotepanel p.quoter{
        font-size:100%;
    }
    .hovertext {
        font-size: 130%;
    }
}
@media screen and (max-width:599px){
    div.vtablist button,
    div.htablist button {
        font-size:110%;
    }
}
.slidesbackground{
position:relative;
}
.slideimage{
    position:absolute;
    left:0;
    top:0;
    transition:4s ease;
}
.slide_invisible{
opacity:0;
}
.slide_visible{
opacity:1;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
/*     width: 120px; */
/*
    background-color: #555;
    color: #fff;
 */
    text-align: center;
    padding: 5px 5px;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.accordian{
box-shadow:2px 2px 8px rgba(0,0,0,0.5);
}
.acc_visible{
    display:block;
}
.acc_invisible{
    display:none;
}
.accordian_button{
width:100%;
    padding:12px 0;
    text-align:center;
    border-width:0px 0px 0px 0px;
    border-style:solid;
}

.accordian_panel{
width:100%;
    transition: 1s;
    padding:12px 20px;
}
.openshut{
    content: '\02795'; /* Unicode character for "plus" sign (+) */
}
.openshut{
float:right;
margin-right:20px;
}

.openshut.active {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}
.squarethumb{
width:200px;
height:200px;
}
.textoverlay_mask{
color:RGBA(0,0,0,0);
background:red;
font-size:120px;
}

#underconstruction{
background-image: url("../graphics/uc.jpg");
height:64px;
}

#underconstruction p{
font-size:48px;
color:red;
}

@media screen and (max-width:899px){
#underconstruction p{
font-size:32px !important;
}
}