@charset "UTF-8";
/* CSS Document */


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#303030; background-color:#FFF;}



.red-band-top {width: 100%; height: 2px; background-color: rgb(225, 15, 33); height: 112px; position: absolute; z-index: -2;}
   
.black-line-top {width: 100%; height: 2px; background-color: #303030; height: 25px; position: absolute; z-index: -1;}  



.grey-band-bottom {width: 100%; height: 280px; background-color: #F0F3F5; position: absolute; left: 0; z-index: -1}

.hero-background {width: 100%; background-color: #F0F3F5; z-index: -1; position: absolute; height: 395px; top: 112px;}


.container {
	padding-left:25px;
	padding-right:25px;
	/*background-color:white;*/
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: 112px auto auto 0px;
	grid-gap: 3px;
	width: 95%;
	max-width:1200px;
	/*max-width:1100px;*/
	margin: auto auto;
	-moz-box-shadow: 0 0 30px 5px #999;
	/*-webkit-box-shadow: 0 0 30px 5px #999;*/
	grid-template-areas:
		"header header header header header header"
		"hero hero hero hero hero hero"
		"content content content content content content"
		"footer footer footer footer footer footer"
	

}

/* Start of Header */

.header {
	grid-area: header;
	/*background-color:#FFF;*/
	display: grid;
	padding:15px 10px 10px 10px;
	grid-template-columns: repeat(12, 1fr); /*thereby giving 6 columns */
	grid-template-rows: 33px 33px 25px;
	align-items: center;
	/*border-bottom: black;
    border-width: 0px 0px 1px 0px;
    border-style: solid;*/
		
}

.header-logo {
	grid-row: 1 / 3;
	grid-column: 1 / -1;
	background-image:url(../images/spectite-logo1.svg);
	background-repeat:no-repeat;
	height:100%;
	
}

.header-flags {
	margin-left:auto;
	margin-bottom:5px;
	text-align:right;
	font-size:20px; 
	font-family:Arial, Helvetica, sans-serif;
	color:white;
	grid-column: 1 / -1;
	grid-row: 1 / 2;
	letter-spacing:1px;
	z-index:999;


}

.header-email {
	margin-left:auto;
	text-align:right;
	font-size:15px; 
	font-family:Arial, Helvetica, sans-serif;
	grid-column: 1 / -1;
	grid-row: 2 / 3;
	margin-top: -13px;
	letter-spacing:1px;
	

}

.mobnav {
  display:none;
}

.strapline {
   margin-top: 50px;
    color: #fff;
    font-size: 17px;
	letter-spacing: 0.5px;
	font-family: "Lato";
	letter-spacing:0.5px;

}


.breadcrumbs {
	float:left;
	width:98%;
	padding:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #303030;
	text-align:left;
    margin-top: 10px;
    margin-bottom: 15px;
}
.breadcrumbs a:link {color:#669900; text-decoration: none; }
.breadcrumbs a:visited {color:#669900; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }



@media only screen and (max-width: 500px ) {
  
	.container {padding-left:5px; padding-right:5px;}

	.header-flags {display:none;}

	.header-email {display: none;}

	.hero {padding-top:10px;}

	.nav-wrapper {display: none;}

	.nav-link-wrapper {display: none;}
	
	.strapline {font-size: 12px;}
	
}

/* End of Header */


/*mobile header*/
.mobile-header {
    
    position: relative;
    color: #fff;
    padding: 10px;
    background-color: rgb(225, 15, 33);
;
    color: #fff;
}

.top-row {
    display: flex;
    align-items: center;
}

.mob-logo img {
    width: 160px;
}

.mob-logo {
    padding-top: 3px;
}

	   .flex-space {
    flex-grow: 1; /* This div will take up the available space */
}
.mob-strapline {
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.5px;
    font-family: "Lato";
    letter-spacing: 0.5px;
}

.call img {
    width: 15px;
	margin-right: 0px;
	margin-bottom: -3px;
}

.call {
    padding-top: 3px;
	margin-right: 17px;
	font-size: 13px;
}

.mob-menu-icon {
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 3px 0;
    display: block;
}

.mob-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    background-color: #333;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.mob-menu-open .mob-menu {
    display: block;
    width: 100%;
}

.mob-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mob-menu li {
    margin: 10px 0;
}

.mob-menu a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    display: block;
    padding: 10px;
}
	   
	   a.phone-number {text-decoration: none;
	   color: #fff;
	   }	
	   

	   a.phone-number:hover {text-decoration: underline;}


/*end mobile header*/



.hero {
	grid-area: hero;
	margin: 1px auto;

	
}

.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

#accept-cookies {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}



/*content defines the overall grid area into which the actual content will go eg product1 */
.content {
	grid-area: content;	
}
.footer {
	grid-area: footer;
	
	margin-top:30px;
	margin-bottom:25px;	
	
	display: grid;
	padding:0px 10px 0px 10px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));/*was 370px*/
	
	align-items: left;
	/*padding-bottom: 40px;*/
    grid-gap: 10px;
	clear:left;
	background-color: #F0F3F5;
	
		
	
}

.footer-products {font-size: 14px; line-height: 24px; padding-top: 12px;}

.footer-address {font-size: 16px; line-height: 26px; padding-top: 12px; margin-left: 60px;}

/* product1 is a grid within the content grid area into which further content can be placed */
.product1 {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));/*was 370px*/
	padding-top: 20px;
	
	
}

.product2 {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
	
	
	
}

.product3 {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(165px, 165px));
	
	
	
}

.product4 {
	display: grid;
	/*grid-column-gap: 70px;*/
	grid-column-gap: 45px;
	grid-row-gap: 20px;
	/*grid-template-columns: repeat(auto-fill, minmax(500px, 0.5fr));*/
	grid-template-columns: repeat(auto-fill, minmax(430px, 0.5fr));
	/*background-color:#F2F2F2;*/
	margin: /*2*/5px 0px 0px 0px;
	padding: 10px 0px 10px 0px;
	clear:both;
	
	
	
}

.product5 {
	display: grid;
	grid-gap: 30px;
	grid-template-columns: repeat(auto-fill, minmax(1fr, 1fr));
	margin-top:20px;
	min-height:500px;
	
	
	
	
}

.product4-red {
	display: grid;
	/*grid-column-gap: 70px;*/
	grid-column-gap: 45px;
	grid-row-gap: 20px;
	/*grid-template-columns: repeat(auto-fill, minmax(500px, 0.5fr));*/
	grid-template-columns: repeat(auto-fill, minmax(430px, 0.5fr));
	/*background-color:#F2F2F2;*/
	
	padding: 0px 10px 10px 0px;
	clear:both;
	background-color: rgb(225, 15, 33);
	
	
		
}


.image-main {
	max-width: 650px;
    display: block;
    margin: 0 auto;}


}



#2-col-span {grid-column: span 2;}



@media only screen and (max-width: 768px ) {
	
	.product1 {grid-template-columns: 1fr;}
	
	.product2 {grid-template-columns: 1fr;}
	
	.product3 { grid-template-columns: 1fr;}
	
	.product4 {grid-template-columns: 1fr; margin:0px; padding:0px;}
	
	.product4-red {grid-template-columns: 1fr; margin:0px; padding:0px; background-color: rgb(225, 15, 33); border-radius: 20px;}
	
	.product5 {grid-template-columns: 1fr;}
	
	.header {padding:0px;}
	
	.container {width: 97%;}
	



}



	
	




/*navbar*/

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  font-family: "Lato", sans-serif;
  margin-left: auto;
  grid-column: 4 / -1
}

.left-side {
  display: flex;
}

.nav-wrapper > .left-side > div {
  margin-left: 20px;
  text-transform: uppercase;
  font-size: 0.9rem;
}
.nav-link-wrapper {
  height: 22px;
/*  border-bottom: 1px solid transparent;
  transition: border-bottom 0.5s;*/
}

.active-nav-link {
  border-bottom: 1px solid black;
}

.active-nav-link a {
  color: black !important;
}

.nav-link-wrapper a {
  color: #fff;
  text-decoration: none;
  transition: color 0.5s;
}

.nav-link-wrapper:hover {
 /* border-bottom: 1px solid black;*/
}

.nav-link-wrapper a:hover {
  color: black;
}


.nav-link-wrapper1 {
  height: 22px;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.5s;
}



.nav-link-wrapper1 a {
  color: #8a8a8a;
  text-decoration: none;
  transition: color 0.5s;
}

.nav-link-wrapper1:hover {
  border-bottom: 1px solid black;
}

.nav-link-wrapper1 a:hover {
  color: #818181;
}





/* end of navbar */

@media screen and (max-width: 768px){
	
	#newlanguages {z-index: 20;	display: none;}	
	
	
}




@media screen and (min-width: 769px){
	
	#newlanguages {z-index: 20;	display: block;}	
}



@media only screen and (max-width: 500px ) {
	
	.content {padding-top:10px;}
	
	.image-main {max-width: 350px; display: block; margin: 0 auto;}
	
	.footer {grid-template-columns: 1fr;}	
	
	
}	

@media only screen and (max-width: 1024px) {
	
	.footer-address {margin-left: 0px!important;}	
	
	
	
}

@media only screen and (max-width: 980px) {
	
	.grey-band-bottom {display: none;}
	
	
}