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


html {
  box-sizing: border-box;
  background-color: #38383A;
  font-family: 'Roboto', sans-serif;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2em;
}

a {
  color: inherit;
  text-decoration: none;
}


img {
  max-width: 100%;
  height: auto;
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/

p {
  font-family: 'Roboto', sans-serif;
  color: #fff;
  font-size: 0.8em;
  line-height: 1.6em;
  padding-bottom: 1.4em;
}

h1 {
	font-family: 'Open Sans', sans-serif;
	color: #e79515;
	font-size: 1.8em;
	text-transform: capitalize;
	text-align: center;
	margin-bottom: 0.4em;
}



h2 {
	font-family: 'Open Sans', sans-serif;
	color: #e79515;
	font-size: 1.4em;
	text-transform: none;
	text-align: left;
	margin-bottom: 1.2em;
	margin-top: 1.0em;
	font-weight: normal;
	
}

h3 {
	font-family: 'Open Sans', sans-serif;
	color: #e79515;
	font-size: 1.2em;
	text-transform: none;
	text-align: right;
	font-weight: normal;
	line-height: 1.1em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

h4 {
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	font-size: 1.4em;
	text-align: left;
	margin-bottom: 1em;
	margin-top: 1em;
	font-weight: normal;
  
}

h5 {
	font-size: 0.6em;
	line-height: 0.8em;
	color: #FFF;
	text-align: right;
	font-family: 'Roboto', sans-serif;
	margin-bottom: .8em;
	font-weight: normal;
}

h6 {
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	font-size: 1.7em;
	text-align: justify;
	margin-bottom: 1em;
	margin-top: 1em;
	font-weight: normal;
}


* {
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  Padding: 0;
}

/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/

/*nav {
  position: relative;
  overflow: visible;
  height: 140px;
  background-image: url(images/Logos/Juice-Arch-Logo_RGB-300dpi-Grey-copy.jpg);
  background-repeat: no-repeat;
  background-position: right;
  border-bottom-width: 0.1em;
  border-bottom-style: solid;
  border-bottom-color: #C6722A;
  text-align: left;
  margin-bottom: 10px;
}*/


/*--------------------------------------------------------------
 main Navigation
--------------------------------------------------------------*/
nav {
  position: relative;
  overflow: visible;
  background-color: #38383A;
  background-image: url(images/Logos/Juice-Arch-Logo_RGB-300dpi-Grey-copy.jpg);
  background-repeat: no-repeat;
  background-position: right;
  height:140px;
  border-bottom-width: 0.1em;
  border-bottom-style: solid;
  border-bottom-color: #e79515;
  text-align: left;
  margin-bottom: 10px;
  z-index: 2;

}

.mainnav{
	position: absolute;
	bottom: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	color: #FFF;
	text-transform: uppercase;	
}
.mainnav a {
	float: left;
	display: block;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 1em;
	margin: .5em 1em .5em 1em;
}

.mainnav a:hover {
  color: #e79515;
}
.active {
 
  color: white;
}

.mainnav .icon {
  display: none;
}
/*--------------------------------------------------------------
 Project Navigation
--------------------------------------------------------------*/

.Project_Nav ul {
  text-align: center;
  padding-bottom: 10px;
  display: block;
}

.Project_Nav li {
  display: inline;
  padding-right: 25px;
  font-size: 14px;
  color: #FFF;
  font-family: 'Open Sans', sans-serif;
}

.Project_Nav li a {
  text-decoration: none;
  color: #FFF;
  text-transform: uppercase;
}

.Project_Nav li a:hover {
  color: #e79515;

}

.current{
color: #e79515;
}


/*--------------------------------------------------------------
HomePage
--------------------------------------------------------------*/
figure {
  margin-top: 0em;
  margin-bottom: 0em;
  max-width: 100%;
  max-height: 100%;
  background-color: #38383A;
}



.HomePageGrid {
  display: grid;
  grid-template-columns: 4fr  1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "images newsitem";
 /* "quote" */
 
  
  grid-gap: 20px;
  height: 100%;
}


.slides {

	grid-area : images;
	
	}
	
	.newsitem {

	grid-area : newsitem;
	
	}
	
		.homepage_quote {

	grid-area : quote;
	
	}
	.HomePageGrid p
{
  font-size: .7em;

	
	}
	
.more{
		color: #e79515;
text-align: right;
margin-right: 15px;

		}
		
   .more a{
	color: #e79515;
	
		}
		
		   .more a:hover{
	color: #fff;
	text-decoration:underline;
	
		}
		
		
figure img {
  

	vertical-align: bottom;
}

.homepage_quote {
}

.homepage_quote h4 {
	font-family: 'Open Sans', sans-serif;
	color: #e79515;
	font-size: 1em;
	text-align: left;
	margin-bottom: 1em;
	margin-top: 1em;
	font-weight: normal;
  
}

.homepage_quote span {
	color: #fff;
	font-size: 1.2em;
	font-style: italic;
}

.newstemp{

padding-top: 280px;

}


/*--------------------------------------------------------------
Home Page  Images - Animation
--------------------------------------------------------------*/
.HomePageGrid img {
    

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/*--------------------------------------------------------------
Central Images
--------------------------------------------------------------*/
.MapBox{

	}
	
	
figure {
  margin-top: 0em;
  margin-bottom: 0em;
  max-width: 100%;
  max-height: 100%;
  display: block;
  vertical-align: bottom;
  background-color: #38383A;
}

figure img {
  

	vertical-align: bottom;
}



/*--------------------------------------------------------------
Matrix Layouts
--------------------------------------------------------------*/
.matrix_tworow{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;
  height: 100%;
}
	
.matrix_item a{

}

.matrix_item {
display: grid;		
}
	
.matrix_item img,
.matrix_caption {
grid-column: 1;
grid-row: 1;
    		}

.matrix_caption {
	background: hsla(0, 0%, 0%, .1);
	font-size: 1em;
	transition: all .4s;
	display:none;

}


a:focus .matrix_caption,
a:hover .matrix_caption {
	background: hsla(666, 0%, 0%, .8);
	display:inline;
	display: flex;
	align-items: center;
	justify-content: center;

}



/*--------------------------------------------------------------
Section  - Projects 
--------------------------------------------------------------*/
.section {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "header header header"
  "left centre right";
  grid-gap: 10px;
  height: 100%;
}


.project_header {
	display: block;
	grid-area : header;
	
	}
	
/*--------------------------------------------------------------
Project Left
--------------------------------------------------------------*/

.project_left {
	text-align: center;
	grid-area: left;
	

}

/*--------------------------------------------------------------
Project Centre
--------------------------------------------------------------*/

.project_centre {
	
	grid-area : centre;}
	
.project_centre	ul li {
	font-family: 'Roboto', sans-serif;
	color: #fff;
	font-size: 0.8em;
	line-height: 1.6em;
	list-style-position: inside;
	padding-bottom:1em;
}
/*--------------------------------------------------------------
Project Right
--------------------------------------------------------------*/


.project_right {
	grid-area : right;
    display: block;
}

.project_right li {
  font-size: 10px;
  color: #FFF;
  text-decoration: none;
  list-style-type: none;
  padding-bottom: 1.2em;
  padding-right: 1.2em;
  
  
}

.project_right li:last-child {
    border-bottom-style: none;
}


.project_right-head {
	display: inherit;
	font-size: 1em;
	color: #e79515;
	border-bottom-width: 0.1em;
	border-bottom-style: solid;
	border-bottom-color: #555;
	padding-bottom: .5em;
}

.project_right-content {
  font-size: 12px;
  color: #FFF;
  padding-top:: 3em;
  padding-bottom: 3em;
}

.section p {
  font-size: 0.8em;
  line-height: 1.6em;
  padding-bottom: 1em;
}

.quote {
	font-size: 1em;
	font-style: italic;
	color: #e79515;
	text-align: center;
	}
	
.quote_caption p{
	text-color: white;
	font-size: 0.6em;
	text-align: center;
	color: #FFF;
	margin-top: 10px;
	font-style: italic;
		}





/*--------------------------------------------------------------
Section  - Insights 
--------------------------------------------------------------*/
.section {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "header header header"
  "left centre right";
  grid-gap: 10px;
  height: 100%;
}


.insights_header {
	display: block;
	grid-area : header;
	
	}
	
	
/*--------------------------------------------------------------
Scale Iframe Video 
--------------------------------------------------------------*/	
/*

.respons{
	
	width: 100%;
	position: relative;
	margin-bottom: 30px;
	border: 1px solid black;
	}
	
	
	.respons::before{
	
	content:'';
	position: relative;
	display:block;
	padding-bottom:56.3%;
	padding-top: 30px;
	height:0;
	overflow: hidden;
	
	}
	
	.respons iframe{
	
	border: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	
	}	
	*/
	
/*--------------------------------------------------------------
Insights Left
--------------------------------------------------------------*/

.insights_left {
	text-align: center;
	grid-area: left;
	

}

/*--------------------------------------------------------------
Insights Centre
--------------------------------------------------------------*/

.insights_centre {
	
	grid-area : centre;
}
	.insights_centre img, iframe{
	display: block;
	padding-top:20px;
	margin-right: auto;
	padding-bottom: 20px;
	margin-left: auto;
	}

/*--------------------------------------------------------------
Insights Right
--------------------------------------------------------------*/


.insights_right {
	grid-area : right;
    display: block;
}


.insights_right ul {
	margin-top: 45px;
	 
  
}


.insights_right li {
	font-size: 0.6em;
	display: block;
	color: #FFF;
	text-decoration: none;
	list-style-type: none;
	padding-right: 1.2em;
	 
  
}

.insights_right li a {
	display: inherit;
    color: fff;
	border-bottom-width: 0.1em;
	border-bottom-style: solid;
	border-bottom-color: #555;
	line-height: 3em; 
}

.insights_right li:last-child {
    border-bottom-style: none;
}

.insights_centre h2 {
	font-size: 1.1em;
	text-transform: none;
	margin-bottom: 1em;
	margin-top: 0em;	
}

.insights_centre ul{
	text-align: left;
	display: block;
	list-style-type: disc;
	list-style-position: outside;
	padding-left: 20px;
	padding-bottom: 20px;
  }


.insights_centre li{
	font-family: 'Roboto', sans-serif;
	sans-serif;	padding-right: 10px;
	font-size: 0.8em;
	color: #FFF;
	line-height: 1.8em;
	list-style-position: outside;
	margin-left: 1em;
	
	}

/*--------------------------------------------------------------
Section  - Clients 
--------------------------------------------------------------*/

.client_centre {
	}
	
	
	 .clients_ul {
	text-align: justify;	 
	 
	 
	 }
 
 .clients {
	display: inline;
	font-size: 2.5em;
	color: #FFF;
	padding-right: .2em;
	padding-bottom: 1em;
	line-height: 1.2em;
	 }
	 
.clients a:hover{

	color: #C6722A;
	
	 }
  
		
/*--------------------------------------------------------------
Section  - News 
--------------------------------------------------------------*/

.section_news  {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: auto;
  grid-template-areas:  "left centre";
  grid-gap: 10px;
  height: 100%;
}

/*--------------------------------------------------------------
News Left
--------------------------------------------------------------*/

.news_left {
	padding-top: 85px;
}

/*--------------------------------------------------------------
News Centre
--------------------------------------------------------------*/

.news_centre {
	
	grid-area : centre;}
	
	
.news_centre p{
	width: 680px;	
	}



/*--------------------------------------------------------------
News Right
--------------------------------------------------------------*/

.news_right {
	
	grid-area : right;}
	


.news li {
  font-size: .7em;
  color: #FFF;
  text-decoration: none;
  list-style-type: none;
  padding-bottom: 1.2em;
  padding-right: 1.2em;
}

.news li a {

  color: #FFF;

}

.news li a:hover {

  color: #e79515;

}

.news_right-head {
  display: inherit;
  font-size: 1em;
  color: #e79515;
  border-bottom-width: .1em;
  border-bottom-style: solid;
  border-bottom-color: #555;
  padding-bottom: .5em;
}

.news_right-content {
  font-size: 12px;
  color: #FFF;
  padding-top:: 3em;
	padding-bottom: 3em;
}



.news_centre h5 {
	

	text-align: left;
	}
	
	
.news_centre h2 {

	margin-bottom: .5em;
	margin-top: .5em;
	
}
.news_right h2 {

	margin-bottom: .5em;
	margin-top: .5em;
	
}

.news_div {

	clear:both;
	}


.news_image_right {
	float: right;
	clear:right;
	padding-left: 10px;
	}
/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/
address{
	text-align: center;
	font-style: normal;
	}

footer {
  width: 100%;
  height: 60px;
  position: relative;
  border-bottom-color: #e79515;
  border-top-color: #e79515;
  border-top-width: 0.1em;
  border-bottom-width: 0.1em;
  border-style: solid none solid none;
  margin-top: 10px;
}

.FooterLeft {

  Display: flex;
  flex-wrap: wrap;
  align-content: center;

  width: auto;
  float: left;
  margin-top: 20px;
  margin-left: 1em;
  height: 60px
}



  .FooterLeft img{
	
   width:18px;
    height: 18px;
}


img {
    	
    }
	

.FooterLeft a:hover {
 opacity: 0.1;
}

.FooterRight a:hover {
 opacity: 0.1;
}

.FooterLeft a {
  padding-right: 15px;
}

.FooterRight {

  width: auto;
  float: right;
  align: right;
  margin-right: 1em;
  margin-top:.6em;

}

Footer p {
    
color: #FFF;
  font-size: .7em;

}

.FooterOrangeText {
  color: #e79515;
}

/*--------------------------------------------------------------
Copyright
--------------------------------------------------------------*/
.CopyrightFooter{
	width: auto;	
	clear: left;}
	
	.CFooter{
	font-size: 0.5em;
	color: #FFF;
	line-height: 1.2em;
	text-align: right;
	margin-right: 10px;
	}
/*--------------------------------------------------------------
media Queries
--------------------------------------------------------------*/

/*Media Queries for Screens */
@media (max-width: 2500px) {
  nav {
    max-width: 1400px;
    background-position: right;
  }
  
    .insights_centre iframe{ 

width:640px;
height:480px;
	
	}
}

/*Media Queries for smaller Screens */
@media (max-width: 1280px) {

  .container {
  width: 85%;
}

nav {
   background-image: url(images/Logos/Juice180.jpg);
    background-position: right;
    height: 90px;}


.mainnav{
	position: absolute;
	bottom: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #FFF;
	text-transform: uppercase;	
}

.mainnav a {

	margin: .3em .5em .5em .5em;
}

	
.MainNav ul {
  padding-top: 62px;


  }
  
 h4{
	font-size: 1em;	 
	 }
 
    .FooterLeft img{
	
   width:18px;
    height: 18x;
}

}

/*Media Queries for Phones */
@media (max-width: 500px) {
 
   .container {
  width: 98%;
}
 
  nav {
  background-image: url(images/Logos/Juicesm.jpg);
    background-position: center;
    height: 100px;
  }
  
  .Project_Nav ul {
  text-align: center;
}
  
  
  .Project_Nav li {
	display: block;
	border-bottom-width: 0.1em;
	border-bottom-style: solid;
	border-bottom-color: #555;
	line-height: 2em;
}

  .Project_Nav li:first-child {
	border-top-width: 0.1em;
	border-top-style: solid;
	border-top-color: #555;
	line-height: 2em;
}
  
h1 {
	font-family: 'Open Sans', sans-serif;
	color: #e79515;
	font-size: 1.2em;
	text-transform: capitalize;
	text-align: center;
	margin-bottom: 0.4em;
	margin-top: .5em;
}

h4{
	
	display:none;
	}

h6 {
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	font-size: 1em;
	margin-bottom: .5em;
	margin-top: 1.5em;
	font-weight: normal;
}

 .mainnav  a {display: none;
 
 margin: .1em 1em .1em 1em;
 }
  .mainnav a.icon {
   float: left;
   display: block;

}



  



.HomePageGrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows:2fr;
  grid-template-areas: "images" "newsitem" ;
 grid-gap: 10px;
  height: 100%;
}


.slides {

	grid-area : images;
	
	}
	
	.newsitem {

	grid-area : newsitem;
	
	}
	
	
.news_centre p{
	width: 100%;	
	}	
	.HomePageGrid
{
  display: grid;
  grid-template-columns: none;
  grid-template-rows:auto;
 
}

.section {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas:
  "left"
  "header"
  "centre" 
  "right"
  ;
  grid-gap: 10px;
  height: 100%;
}

	

.project_right-content {
  font-size: 12px;
  color: #FFF;
  padding-top:: .5em;
  padding-bottom: 4em;
  
}
  .FooterLeft img{
	
   width:20px;
    height: 20px;
}

 .clients {
	display: inline;
	font-size: 1.2em;
	color: #FFF;
	padding-right: .2em;
	padding-bottom: 1em;
	line-height: 1.2em;
	 }
	 
.news_image_right {
	float: right;
	padding-left: 0px;
	}	 
	 

}

/*Media Queries for Phone Menu */
@media screen and (max-width: 550px) {
  .mainnav.responsive {
	  	position: relative;
		background-color: #38383a;

}
  .mainnav.responsive .icon {
    position: relative;
    top: 0;
  }
  .mainnav.responsive a {
	float: none;
	display: block;
	text-align: left;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #333;
	padding: 1em  0em 1em 1em;
  }
  
}
</pre>
  </body>
</html>