:root { --main-back-col: #394F98; }

body{ color:#4f4f4f; line-height:200%; background-color:#FFFFFF; margin: 0px; font-size:17px}

.main-text-heading-unstyled, .main-text-heading-blue{font-family: 'Playfair', serif; font-size:35px; display:block; margin:0px 0px 30px 0px; font-weight:bold;}
.main-text-heading-blue{color:#394F98;}
.main-text-standard-blue{font-family: 'Playfair', serif; font-size:22px; display:block; margin:30px 0px 30px 0px; font-weight:bold; color:#394F98;}
.main-text-standard{font-family: 'Playfair', serif; font-size:16px;}

.navs{font-size: 16px;
  display: inline-block;
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-weight: bold;
  border: #394F98 1px solid;
  border-radius: 18px;
  background-color: #394F98;
  padding: 6px 10px 6px 10px !important;
  margin: 4px 4px;
  border-bottom: none !important;}
  
.navs:hover {
  background-color: #ef3a3e;
  border: #ef3a3e 1px solid;
  }

.n-group{ width:180px; text-align:center;}
.n-group-im{ border-bottom:none !important; padding-bottom:0px !important; }
.n-group-container{display:flex; flex-wrap:wrap; justify-content:center;}

.footer{width:100%; margin: 3px 0px 0px 0px; z-index:100; background-color:#fef4e0; padding:0px; height:auto; margin-top:0px; position:relative }
.footer-content{width:90%; padding: 20px 0px; margin:auto}
.footer p{color:#394F98; line-height: 140%;}
.footer a{text-decoration:none; border-bottom:thin dotted #394F98}
.footer a:link {color:#394F98}
.footer a:visited {color:#394F98}
.footer a:active {color:#394F98}
.footer a:hover {color:#CCCCCC;}

/*	HEADER - STANDARD */

/* .header{width:100%; margin: 0px; z-index:100; background-color:#CCCCCC; padding:0px; height:200px } */   

/*	HEADER - ANIMATED REDUCING IN SIZE */

header{ /*Important not specified as a class because header is reducing*/
position: fixed; 
height: 0px; 
width:100%; 
z-index:100; 
background-position:center center; 
background-repeat: repeat;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s;
/*opacity:.95;*/
border-bottom: none;
}

.header-back{width:100%; height:100%; background-color:#FFFFFF; opacity:.8;}

header.smaller {
    height: 160px;
	background-color: #fef4e0;
	border-bottom: medium solid #FFF;
/*	opacity:.95;*/
}

header #logo{
/*    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;*/
	margin-top: 7px;
	}

@keyframes heightAnimation {
    0% {
        opacity: 0;
        background-image: url(../graphics/logo-large.png);
        width: 300px;
        height: 254px;
    }
    50% {
        opacity: 0;
        background-image: url(../graphics/logo-large.png);
    }
    51% {
        margin-top: 0;
        right: 50%;
        transform: translateX(50%);
        opacity: 0;
        background-image: url(../graphics/logo-large-new.png);
		background-size: contain;
		background-repeat:no-repeat;
    }
    100% {
        opacity: 1;
        right: 50%;
        transform: translateX(50%);
        width: 260px; /* Adjusted the width here, as the previous setting was redundant */
		height:83px;
        margin-top: 20px;
        background-image: url(../graphics/logo-large-new.png);
		background-size: contain;
		background-repeat:no-repeat;
    }
}

@keyframes heightAnimationRev {
  0%{
	margin-top: 0px;
	width: 80px; 
	opacity: 1; 
  }
  40% {
  	opacity: 0;
	margin-top: 10vh;
    width: 300px;

  }
  60% {
	opacity: 0;
	margin-top: 25vh;
    width: 300px;
  }
  100% {
   	margin-top: 30vh;
    width: 220px;
  }
}


header.smaller #logo{margin-top: 13px; } /*width:80px;*/

/*#logo-container {position:absolute; z-index:10; animation: fadeInLogo 2s forwards; animation-delay:.5s; margin-top: 100px; right:100px; opacity:0; width:300px; height:254px; background-size: cover; background-image:url(../graphics/logo-large.png);}*/

#logo-container {
    position: absolute;
    z-index: 10;
    margin-top: 100px;
	animation: fadeInLogo 2s forwards; animation-delay:.5s; 
    right: 100px;
    opacity: 0;
    width: 300px;
    height: 254px;
    background-size: cover;
    background-image: url(../graphics/logo-large.png);
}



#logo-container img{width:100%;}

header.smaller #logo-container{width:80px; animation: heightAnimation 1s forwards;}

.header-fixed-padding{width:100%; height:160px;} /* If fixed header padding required to shift content down below */  

.header-links-bar{ position:absolute; width:100%; text-align:center; font-size:16px; color:#394F98; opacity:0}
header.smaller .header-links-bar{ animation: fadeInText 3s forwards; animation-delay:.5s}

@keyframes fadeInLogo {
  0%{ opacity: 0; }
  100% { opacity: 1; }
}

.color-bar, .color-bar-alt{ width:100%; padding:60px 0px; text-align:center; font-size:35px;  color:#394F98; font-family: 'Playfair'; border-bottom:medium solid #FFF; border-top:medium solid #FFF;}
.color-bar{background-color:#ebeffd; margin-bottom:40px;}
.color-bar-alt{background-color:#fef4e0;}

.home-content, .owls-container{display:flex; flex-wrap:wrap; justify-content:space-between;}
.owls-container {width:1200px; margin: 40px auto;}
.owls-img, .owls-txt {width: 49%; position:relative; text-align:justify}
.owls-img img{width:100%;}
.owls-img-title{width:100%;  font-family: 'Playfair', serif; color:#ef3a3e; font-size:35px; margin-top:-50px; margin-left:40px}

.main-home-content{width:59%;}
.side-home-content{width:37%;}


.network-left{ width:100%; height:400px; overflow:hidden;  display: flex; justify-content: center; align-items: flex-start;}

.network-left img {
    min-width:100%;
	opacity: 1;
    transform: translateY(0);
    transition: opacity 2s ease, transform 2s ease; /* Add transitions for opacity and transform */
}

/* Applied when the container enters the view */
.network-left.visible img {
    opacity: 1;
    transform: translateY(-150px);
    transition: fadeAndMove 2s ease-out 2s 1 normal forwards; /* Adjust transitions for longer duration */
}

.top-quote span{ opacity: 0; animation: fadeOutText 2s forwards;}
.top-quote.visible span{
    animation: fadeInText 3s forwards;
}

/* CSS animation keyframes */
@keyframes fadeAndMove {
    0%, 19.9% { opacity: 1; transform: translateY(0); }
    20%, 100% { opacity: 1; transform: translateY(-150px); }
}

@keyframes fadeInText {
  0%{ opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOutText {
  0%{ opacity: 1; }
  100% { opacity: 0; }
}
/*.header-line{width:100%; height:2px; position:absolute; bottom: 2px; background-color:#9f9f9f }
.header-contacts{width:700px;  z-index:100; height:20px; position:absolute; top: 25px; right:3%; padding-right:3px; text-align:right; color:#FFFFFF; font-size:15px; font-weight:bolder; }*/

a.pageanchor {
    display: block;
    position: relative;
   /* top: -100px;*/
    visibility: hidden;
}

/*	MAIN CONTENT GRAPHICS */

.main-container {width:65%; margin:0px auto}
.main-container-columns {width:65%; margin:0px auto}
/*.main-container {overflow:hidden;} /*Important if slider in place*/
.main-content {padding: 10px 0px 0px 0px; position:relative}
.main-content{width:100%; margin:auto}  

.SliderMainClass{width:100% !important;; height:100vh !important;;}
.sliderwidth{width:100% !important; height:100vh !important;}

.hg-logo-container{position:absolute; top:30vh; width:100%; z-index:10;}
.hg-logo{width:200px; margin:auto;}

.colour-bar{background-color:#394F98; width:100%; display: flex; align-items:stretch; margin-top:30px}
.half-split{float:left; width:50%; display:flex;  flex-direction: column; justify-content: center;}
.full-split{float:left; width:100%; display:flex;  flex-direction: column; justify-content: center;}
.mobrem{visibility:visible;}
.mobvis{visibility:hidden; display:none;}

.contact-form-enq{width:100%;}
.contact-form-enq p{ color:#FFFFFF; margin-bottom: 0px; margin-top:6px}
.contact-form-enq h2{ color:#FFFFFF; text-align:center; border-bottom: none; font-size:24px}
.contact-form-enq input, .contact-form-enq textarea { border: none; border-bottom:thin #FFFFFF solid; background-color:#394F98; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:14px;  outline: none; padding:10px}

.contact-form-enq textarea { background-color:#FFF !important; color:#394F98;}
.contact-form-enq textarea:focus{background-color:#FFF !important;}


.bootstrap-frm input[type=text]:focus, textarea:focus{
  background-color:#394F98 !important; outline: none !important;
}

.contact-form-enq strong {font-size:25px; line-height: 200%;}
.contact-container{width:60%; margin:auto}
.contact-container-main{width:80%; margin: 30px auto }

.form-button-enq input {
  padding: 6px 20px;
  color: #FFFFFF;
  background: #394F98;
  border: 1px solid #394F98;
  border-radius: 10px;
  text-shadow: none;
  box-shadow: none;
  font-weight: bold;
}

.form-button-enq input:hover {
  color: #FFFFFF;
  background: #ef3a3e;
  border: #394F98 1px solid;
  cursor:pointer;
}

/*Handle Content Display*/

.im-cont-left{float:left; padding:5px 20px 10px 3px; z-index:3; position:relative;  margin:-3px 0px 0px -3px}
.im-cont-right{float:right; padding:3px 3px 10px 20px; z-index:3; position:relative;  margin:-3px -3px 0px 0px;}
.im-cont-above{padding:0px 0px; z-index:3; position:relative; text-align:center; margin:0px auto;}
.im-cont-above-column{padding:0px; z-index:3; position:relative; text-align:center; margin:0px auto;}
.im-cont-right img, .im-cont-left img, .im-cont-above img, .im-cont-above-column img{width:100%;}
.image-link a{text-decoration: none !important; border-bottom: none !important;}

.hide-content{visibility:hidden; display:none;}

/*Anchor Return Point Adjustment*/

:target:before {
content:"";
display:block;
height:0px; /* fixed header height*/
margin:30px 0 0; /* negative fixed header height */
}

/*Handle Video Sizing in iframes*/
.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
	width:80%;
	margin-bottom:20px;
	margin-left:auto;
	margin-right:auto;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/*Flex Container for Columns*/
.main-flex-container{display:flex; width:100%; flex-direction: row; justify-content: space-between; margin:0px; align-items:stretch}
.para-flex-col{display:flex; flex-direction: column; background-image: url(../graphics/admin-buttons/column-back.png)}
.para-flex-col-1{display:flex; flex-direction: column;}
/*End*/

/*Simple Navigation Button*/	
.nav-but-sm a{ display:inline-block; color: #FFFFFF !important; font-size:15px !important; text-decoration:none !important; font-weight:normal; border:var(--main-back-col) 2px solid; border-radius: 10px; background-color: var(--main-back-col); height:38px; padding: 4px 10px 20px 10px; margin: 0px 10px; min-width:60px}
.nav-but-sm a:hover{background-color:#CCCCCC; border:#CCCCCC 2px solid;}
	
/*An Attractive Form Button*/	
.form-button input, .form-button a{ padding: 10px 20px; color:#FFFFFF !important; background:var(--main-back-col); border: 1px solid var(--main-back-col); border-radius: 10px; text-shadow:none; box-shadow: none;}
.form-button input:hover, .form-button a:hover{ background-color:#CCCCCC;  border: 1px solid #CCCCCC; cursor:pointer;  color:#FFFFFF;}	

/*Social Media Share Buttons*/	
.share-but{display:inline-block; width:40px; margin: 0px 2px}
.share-but img{width:100%;}
.share-but a{text-decoration:none; border-bottom:none;}
.share-but a:hover{opacity: .7;}


/*CK EDITOR STYLES - If styles used*/

/*End*/

.cookie
	{
	width:100%; min-height: 70px; background-color: #666666; text-align:center;
    position:fixed;
    bottom:0px;
    left:auto;
    right:auto;
    margin-bottom:0px;
	z-index:1000;
	padding:0px 5%;
		
}

.cookie p, .cookie a{color: #FFFFFF; line-height:200%;}

.cookie-button a{ display:inline-block; height:46px; padding:12px 8px 5px 8px; font-weight:bold; border:#FFFFFF 2px solid;  border-radius: 10px; margin-left:5px}
.cookie-button a{ font-weight:bold;  color: #FFFFFF !important; font-size:16px !important; text-decoration:none !important;  line-height:normal}
.cookie-button a:hover{background-color:#FFFFFF; color: #666666 !important; border:#FFFFFF 2px solid; }

.NewsCheck{visibility:hidden; display:none;}

.home-content-container{width:65%; margin:0px auto; padding:10px 0px}
.content-container-padded, .content-container-mailing{padding: 30px 0px}

.cont-text p, .home-menu-text p{color:#4f4f4f; line-height:200%;  font-size:17px} 
.cont-text ul{font-size: 17px; margin-left:20px; overflow: hidden; }
.cont-text td{font-size: 17px; color: #1E1E1E; line-height: 200%;}

/*Home News Display*/
.large-news-box {width: 100%; border:#999999 thin solid;}
.news-box{margin:1%; width:98%; height:180px} 
.news-small-title{display: flex; align-items: center; height:99px; margin-left:20px; margin-right:10px}
.news-small-right{float:left; width:74%; margin-bottom:1%; height:99px; background:url(../layout/graphics/more_news_background.gif) no-repeat left center;} 
.news-small-text{width:100%; margin-bottom:1%; height:99px; background:url(../layout/graphics/more_news_background.gif) no-repeat left center;}
.news-small-left{float:left; width:25%; margin-right:1%; margin-bottom:1%}
.news-small-left img{width:100%; height:99px}

img.largebutton:hover {opacity: 0.8; filter: alpha(opacity=80);}
img.clients:hover {opacity: 0.5; filter: alpha(opacity=50);}

/*Social Media Icons and Search*/
.header-sm{position:absolute; top:20px; right:30px; width:301px; /*background-color:#000033*/}
.SearchBox{float:right; width:190px; background-image:url(../graphics/search_box.gif)}
.SearchBox form{height:37px; margin:0px; padding:0px;}
.SearchBox form input[type=text]{height:20px; margin:6px; border: 2px solid white;}	

.mob-basket{visibility:hidden; display:none;}

#s-button{
    background-image:url('../graphics/search_off.gif');
    width: 37px;
    height: 37px;
    border-style: none;
    background-color: transparent;
    text-indent: 480px;    /* hack to hide the text */
  }

#s-button:hover {
    background-image: url('../graphics/search_on.gif')
  }

.shop-cats-img{padding:2%; border:#CCC thin solid;}

.paging{padding-top: 20px; text-align:center}
.paging-container, .paging-chosen{padding: 14px; text-align:center; margin-right:6px; display:inline-block}
.paging-container {background-color:var(--main-back-col); width:48px; height:48px; border-radius: 24px}
.paging-container:hover{background-color:#CCC;}
.paging a{border-bottom:none; color:white;}

.shopbuts{
  background-image: url(../layout/graphics/shop-buttons.png);
  background-repeat: no-repeat;
  height: 50px;
}
.shopbuts:hover{
opacity:0.7;
}
.shopbut1 {background-position: 0px 0px; width: 70px;} 
.shopbut2 {background-position: 0px -50px; width: 60px;}
.shopbut3 {background-position: 0px -100px; width: 180px;}
.shopbut4 {background-position: 0px -150px; width: 180px;}
.shopbut5 {background-position: 0px -200px; width: 180px;}
.shopbut6 {background-position: 0px -250px; width: 180px;}
.shopbut7 {background-position: 0px -300px; width: 70px;}
.shopbut8 {background-position: 0px -350px; width: 70px;}
.shopbutform{border:none; background-color: Transparent; cursor: pointer;}


/*
   Layout of content pages
    -----------------------------
*/

/* Left and right content divs casestudies and news/articles/blog */
.left_side{width:78%; float:left;}
.right_side{width:20%; margin-left:2%; float:left; margin-top:51px}

.heading_c, .heading_d {font-size: 16px; font-weight: bold; margin-top:0px; color:#605f60;}
.heading_d {font-size: 12px;}

/* Image Box Layout(Used in casestudies) */

.cimage_case {float:left; width: 186px; height: 186px; border:#999999 thin solid; background-color:#FFFFFF;}
.cimage_case img {padding: 3px; width:180px; height:180px}
.cimage_case a {border:none; margin: 0px}

.cimage_large {float:left; width: 136px; height: 136px; border:#999999 thin solid; background-color:#FFFFFF;}
.cimage_large img {padding: 3px; width:130px; height:130px}
.cimage_small_container {float:left; width: 69px; margin-left:3px; margin-top:14px}

.cimage_small {width: 69px; border:#999999 thin solid; background-color:#FFFFFF; margin-bottom: 3px}
.cimage_small img {padding: 3px; width:63px; height:63px}
.c_content_im {position: relative; overflow: hidden; padding-left:16px;}
.c_content {position: relative; overflow: hidden;}

.gal_flex_outer {display: flex; flex-wrap: wrap; justify-content:space-evenly}
.gal_image_outer {width: 350px; height:350px; border:#999999 thin solid; background-color:#FFFFFF;  margin-left:auto; margin-right:auto;}
.gal_image_large {width: 344px; overflow:hidden; margin-left:auto; margin-right:auto; padding-top:2px;  display: flex; justify-content: center;  }
.gal_image_large img {height:344px; width: auto;}
.gal_image_large img:hover {height:340px; width: auto; margin-top:2px}
.gal_container {width:350px;  margin-bottom:20px}
.gal_container_content {width:90%; margin-left:auto; margin-right:auto; }

.related-files{border:thin solid #CCCCCC; width:92%; margin-left:auto; margin-right:auto; padding: 0px 15px 0px 15px; margin-top:20px; background-color:#FFFFFF}

.date_text {font-size: 11px; font-weight: bold;}

.c_title {font-size: 16px; font-weight: bold; border-bottom: thin dotted #605f60; display:block; color: #605f60; text-align:center}

.c_title a{font-size: 16px; border:none; text-decoration:none;}
.c_title a:link {color: #605f60; border:none; text-decoration:none;}
.c_title a:visited {color: #605f60; border:none; text-decoration:none;}
.c_title a:active {color: #605f60; border:none; text-decoration:none;}
.c_title a:hover {color: #000000; border:none; text-decoration:none;}

.breadcrumb {font-size: 10px !important; color: #605f60 !important;}
.breadcrumb a{font-size: 10px; text-decoration:none;}
.breadcrumb a:link {color: #605f60; font-size: 10px;  text-decoration:none;}
.breadcrumb a:visited {color: #605f60; font-size: 10px;  text-decoration:none;}
.breadcrumb a:active {color: #605f60; font-size: 10px;  text-decoration:none;}
.breadcrumb a:hover {color: #000000; font-size: 10px;  text-decoration:none;}

.right_side a:link {font-size: 12px;}
.right_side a:visited {font-size: 12px;}
.right_side a:active {font-size: 12px;}
.right_side a:hover {font-size: 12px;}

#slidercontainer{margin:30px 0px 30px -120px;}

.login-box, .login-box-right {border:thin solid #605f60; margin-top:15px; padding: 2%; float:left; min-height:400px}
.login-box {width:58%;}
.login-box-right{width:40%; margin-left:2%;}
.mob-log{visibility:hidden; display:none;}

.cat-cont-cont{display:flex; flex-wrap:wrap; justify-content: space-between}
.cat-sub-contain{width:24%; background-color:#96629a; margin-bottom:1%}
.cat-cont{ width:100%; height:100%; position:relative}
.cat-cont-content{float:left; width:74%; margin: 1%}
.cat-cont img{width:100%;}
.cat-cont-title{padding:1%; height:100%}
.cat-cont:hover .cat-cont-title {background-color:#af9968;}
.cat-cont:hover img {opacity: 0.9; filter: alpha(opacity=90);}
.cat-cont-title p{color:#FFFFFF; text-align:center; font-weight:bold; line-height:160%}
.marg{padding:20px 0px}

.case-npl{width:49%; float:left; text-align:center}
.case-npr{width:49%; float:right; text-align:center}
.case-np-cont{width:100%; margin: 20px auto}
.case-flex-1-a{width:132px; float:left; height:80px; overflow:hidden;}
.case-flex-2-a{width:60%; background-color: #6da82a; color:#FFFFFF; padding:15px; font-size:18px;  float:left;  min-height:80px;}

.case-flex-1-b{width:132px; float:right; height:80px; overflow:hidden;}
.case-flex-2-b{width:60%; background-color: #6da82a; color:#FFFFFF; padding:15px; font-size:18px;  float:right;  min-height:80px;}
.case-npl:hover .case-flex-2-a{background-color: #999999}
.case-npr:hover .case-flex-2-b{background-color: #999999}

@keyframes cats-move {
from {margin-bottom:20px; margin-top:8px; background-color:#FFFFFF;}
to {margin-bottom:28px; margin-top:0px; background-color: #E8E8E8;}
}
@keyframes cats-moveback {
from {margin-bottom:28px; margin-top:0px; background-color: #E8E8E8;}
to {margin-bottom:20px; margin-top:8px; background-color:#FFFFFF;}
}
.cats-content-ds2{display:flex; flex-wrap:wrap; justify-content: flex-start; align-items:stretch;}
.cats-content-box{display:flex; flex-direction: column; width:47%; border:thin #CCCCCC solid; margin: 8px 1% 20px 1%; background-color:#FFFFFF; animation-name: cats-moveback; animation-duration: .8s;  border-radius: 30px;}
.cats-content-box:hover{margin-bottom:28px; margin-top:0px;  background-color:#E8E8E8; animation-name: cats-move; animation-duration: .5s;}
.cats-content-box img{width:100%}
.cats-content-box p{width:90%; margin: 10px auto;}
.cats-content-box h3{width:90%; margin: 20px auto 10px; text-align:center; border-bottom: none; line-height:150%}
.cats-content-box a{ text-decoration:none !important; border-bottom: none !important; padding-bottom: 0px !important }
.cats-content-sm{font-size:12px; font-weight:bold}

.case-image-container {padding-top: 65%; overflow:hidden; background-size: cover;  border-radius: 30px 30px 0px 0px;}	

.prod-dropdown{background-color:#FFFFFF; height: 100vh; width:100%; position:fixed; margin-top:12px; top:200; left:0; z-index:99; visibility:hidden; display:none }
.nav-button:hover > .prod-dropdown{visibility:visible; display:block;}

/*Standard Navigation Buttons*/
.navbuts{background-image: url(../layout/graphics/buttons-v2.png); background-repeat: no-repeat; height: 48px;}
.navbuts:hover{cursor:pointer}
.navbut1 {background-position: 0px 0px; width: 220px;}
.navbut2 {background-position: 0px -48px; width: 220px;}
.navbut3 {background-position: 0px -96px; width: 220px;}
.navbut4 {background-position: 0px -144px; width: 220px;}
.navbut5 {background-position: 0px -192px; width: 220px;}
.navbut1:hover {background-position: -223px 0px;}
.navbut2:hover {background-position: -223px -48px;}
.navbut3:hover {background-position: -223px -96px;}
.navbut4:hover {background-position: -223px -144px;}
.navbut5:hover {background-position: -223px -192px;}
.navbutmain {background-position: 0px -240px; width: 40px; margin-left:auto; margin-right:auto} 
.navbutbasket {background-position: -150px -240px; width: 60px;}
.nbbmob {position:absolute; top:8px; right:20px}
.navbutbasket:hover {background-position: -373px -240px;}

@media screen and (max-width:1600px)
{ 
.main-container {width:85%; margin:0px auto}
.main-container-columns {width:85%; margin:0px auto}
}
@media screen and (max-width:1400px)
{
.contact-container{width:70%; margin:auto}
.owls-container {width:90%;}
.owls-img-title{margin-top:-20px; margin-left:20px}

}
@media screen and (max-width:1350px)
{
.main-container {width:90%;}
.main-container-columns {width:90%;}
}
@media screen and (max-width:1200px)
{ 
.cats-content-box{ width:47%; }
.contact-container{width:80%; margin:auto}
}
@media screen and (max-width:1100px)
{ 
.case-np-cont{width:96%; margin:auto}
.case-npl{width:465px; float:none; margin-left:-16px}
.case-npr{width:465px; float:none; margin-top:10px; margin-left:16px}
.case-np-cont{width:470px; margin:auto}

.desktop-pad{width:100%; height:40px}
}

@media screen and (max-width:1050px)
{ 
.colour-bar{display:block;}
.half-split{width:100%; float:none;}
.full-split{width:100%; float:none;}
.mobrem{visibility:hidden; display:none;}
.mobvis{visibility:visible; display:block; height:250px; overflow:hidden;}
.mobpad{padding:20px 0px;}
}

@media screen and (max-width:990px)
{ 

.header-links-bar{visibility:hidden; display:none;}
.owls-img-title{margin-top:10px; text-align:center; margin-left:0px}

.color-bar, .color-bar-alt{ padding:30px 0px; line-height:150%; }

.main-container {width: 100%;}
.main-content {width: 94%; margin-left:auto; margin-right:auto}
.main-home-content{width:100%;}
.side-home-content{width:100%;}

.header-contacts{width:50%; top:auto; bottom: 25px; right:3%;}

.im-cont-above { margin:0px auto 4px auto}
.im-cont-left { float:none; min-width:40%; padding:3px 0px 10px 0px; margin: 0px auto 20px auto}
.im-cont-right { float:none; min-width:40%; padding:3px 0px 10px 0px; margin: 0px auto 20px auto}

.main-container-columns {width:100%;}
.main-flex-container{flex-direction: column; width:100%;}
.para-flex-col-1{width:100% !important; margin: 10px 0px}

.prod_main_im img {padding:3%; width:94%}

.mob-basket{visibility:visible; display:block; position:absolute; bottom:0px; text-align:center; width:100%;}
.mob-basket p{line-height:0px}

.left_side{margin-left:auto; margin-right:auto; width:94%; float:none;}
.right_side{visibility:hidden; display:none;}

.cimage_large {float:left; width: 96px; height: 96px;}
.cimage_large img {padding: 3px; width:90px; height:90px}

.cimage_case {float:left; width: 146px; height: 146px;}
.cimage_case img {padding: 3px; width:140px; height:140px;}

.gal_container {float:none; width:100%;}

.prod_medium, .prod_large {width: 100%; height: auto; border:#999999 thin solid; background-color:#FFFFFF; margin-left:auto; margin-right:auto}
.prod_medium img {padding: 2%; width:96%; height:auto}
.prod_large img {padding: 2%; width:96%; height:auto}
.prod_large_container {width:92%; float:left; margin-left:auto; margin-right:auto; padding: 10px 0px 14px 0px}

.login-box select{width:100%;}
.login-box, .login-box-right {width:94%; float:none; margin-left:auto; margin-right:auto}
.mob-log{visibility:visible; display:block}

/*header #logo{ left: 50%; top: 20px; transform: translate(-50%, 0);}*/
header{height: 200px;}
header.smaller { height: 130px; }

.header-contacts{width:90%; text-align:center;  right:5%; bottom:15px}
.header-fixed-padding{height:200px;} /* If fixed header padding required to shift content down below */  
.cat-sub-contain{width:32.33%;}

.network-left{ height:auto; }

/* Applied when the container enters the view */
.network-left.visible img {
    opacity: 1;
    transform: none;
    transition: fadeAndMove 2s ease-out 2s 1 normal forwards; /* Adjust transitions for longer duration */
}


}
@media screen and (max-width:850px)
{ 
.cats-content-box{ width:96%;}
.cat-sub-contain{width:48%;}

.owls-img, .owls-txt{width:100%;}
.ot-order{order:2}
.oi-order{order:1}

}
@media screen and (max-width:500px)
{ 
header{height: 170px;}
/*header #logo{ width: 200px; height: 80px}*/
.header-contacts{bottom:40px}
.header-fixed-padding{height:165px;}

/*header.smaller { height: 85px; }
header.smaller #logo{ width: 125px; height: 50px; left: 3%; top: 15px; transform: translate(0, 0); }
header.smaller .header-contacts{visibility:hidden; display:none}*/

.footer{height:auto;}

.desktop-pad{visibility:hidden; display:none}

.im-cont-left { min-width:60%; }
.im-cont-right { min-width:60%; }

.video-container {width:100%;}

.quote-content{padding:20% 0px 20% 0px; font-size:24px;}
.quote-strip{background-size:100%}

.res-cont{float:none; width:80%; margin: 10px auto;}

.case-image{display:none;}
.case-flex-1-a{width:32px; }
.case-flex-2-a{width:260px; }
.case-flex-1-b{width:32px; }
.case-flex-2-b{width:260px; }
.case-npl{width:340px; margin:auto}
.case-npr{width:340px; margin-left:auto; margin-right:auto; margin-top:10px}
.case-np-cont{width:auto; margin:auto}
}

/* Blinks forever times */
.blink {
    -webkit-animation: blink 2s infinite;
    -moz-animation: blink 2s infinite;
    -ms-animation: blink 2s infinite;
    -o-animation: blink 2s infinite;
    animation: blink 2s infinite;
}

@-webkit-keyframes blink {/* percentages are the times so 0% is the start and 100% is the end of the cycle */
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    50.01% { opacity: 1; }
    100% { opacity: 0.3; }
}

@-moz-keyframes blink {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    50.01% { opacity: 1; }
    100% { opacity: 0.3; }
}

@-ms-keyframes blink {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    50.01% { opacity: 1; }
    100% { opacity: 0.3; }
}

@-o-keyframes blink {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    50.01% { opacity: 1; }
    100% { opacity: 0.3; }
}

@keyframes blink {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    50.01% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* @end */