.work-1 {
	grid-area: work-1;
}

.work-2 {
	grid-area: work-2;
}

.work-3 {
	grid-area: work-3;
}

.work-4 {
	grid-area: work-4;
}

.header-grid {
    display: grid;
    grid-gap: 5px;
	grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
		"work-1	work-2	work-3	work-4";
    color: #444;
}





/* GRID */
.sidebar {
  grid-area: sidebar;
}

.sidebar1 {
  grid-area: sidebar1;
}


.content {
  grid-area: content;
  position: relative;
}

.header {
  grid-area: header;
}

.footer {
  grid-area: footer;
}

.wrapper {
    display: grid;
    grid-gap: 5px;
	grid-template-columns: repeat(7, 1fr);
    grid-template-areas:
		".	header	header	header	header	header	."
		".	sidebar1	sidebar1	sidebar1	sidebar1	sidebar1	."
        ".	sidebar	content	content	content	content	."
        ".	footer	footer	footer	footer	footer	.";
    color: #444;
}

@media (min-width:320px)  { 
/* smartphones, iPhone, portrait 480x320 phones */
	.wrapper {
		grid-template-areas:
			"header	header	header	header	header header header"
			"sidebar1	sidebar1	sidebar1	sidebar1	sidebar1 sidebar1 sidebar1"
			"content	content	content	content	content content content"
			"sidebar	sidebar	sidebar	sidebar	sidebar sidebar sidebar"
			"footer	footer	footer	footer	footer footer footer";
	}
	
	.header-grid {
		grid-template-areas:
			"work-1	work-1	work-1	work-1"
			"work-2	work-2	work-2	work-2"
			"work-3	work-3	work-3	work-3"
			"work-4	work-4	work-4	work-4";
	}
	
}
@media (min-width:561px)  { 
	.wrapper {
		grid-template-areas:
			".	header	header	header	header	header	."
			".	sidebar1	sidebar1	sidebar1	sidebar1	sidebar1	."
			".	sidebar	content	content	content	content	."
			".	footer	footer	footer	footer	footer	.";
	}
	
	.header-grid {
		grid-template-areas:
			"work-1	work-2	work-3	work-4";
	}
	/* tablet, landscape iPad, lo-res laptops ands desktops */
}

@media (min-width:1025px) { 
		/* big landscape tablets, laptops, and desktops */ 
}

@media (min-width:1281px) { 
		/* hi-res laptops and desktops */ 
}


.box {
  background-color: rgba(255,255,255,0.8);
  /*color: #fff;
  border-radius: 5px;
  font-size: 150%; */
  padding: 10px;
}

.navbar-light {
	background-color: rgba(255,255,255,0.85);
}

.header,
.footer {
  /*background-color: #999;*/
}

.topleft {
  position: absolute;
  top: 0;
  left: 0;
}

.topright {
  position: absolute;
  top: 0;
  right: 0;
}

.bottomleft {
  position: absolute;
  bottom: 0;
  left: 0;
}

.bottomright {
  position: absolute;
  bottom: 0;
  right: 0;
}

.back-header {
	background-image: url('/site/images/header.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}

.headerimg {
	
}

.header {
	padding: 0px;
}

.footer {
	padding: 0px;
}

.back-img2 {
	background-image: url('img/back2.jpg');
}


.bg-img {
	position:absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff;
	min-width:100%;
	min-height:100vh;
	z-index: -100;
	top:0px;
	left:0px;
}


.nav-item-border .nav-item {
	border-bottom: 1px solid #ccc;
}


.text-header {
	font-size: 20px;
	font-weight: bold;
	text-shadow: 1px 1px 2px white, 0 0 1em black; 
}

.text-with-shadow {
	text-shadow: 1px 1px 1px white, 0 0 1px white;
}

.text-phone {
	font-size: 20px;
	font-weight: bold;
}

.header-container-fluid {
	min-height:200px;
}


.footer-container-fluid {
	float:left;
	min-height:200px;

}

.footer-container-fluid .row{
	
}

.header-logo {
	height:200px;
}

.back-footer {
	background-image: url('/site/images/footer.jpg');
	background-size: cover;
}

.wrapper {
	background-image: url('/site/images/image.jpg?v1');
	background-size: cover;
	background-repeat: no-repeat;
}

.navbar-nav  a{
border-left: 1px solid #666; padding: 0 20px; margin: 0 1px 0 -1px;
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,1);
	font-size: 18px;
}

.box {
background-color: rgba(255,255,255,0.95);
}