body
	{
		background-image:url(images/plainsky.jpg);
		background-size: cover;
		background-attachment: fixed;
		color:white;
		font-family: sans-serif;
		font-size:18pt;
	}
	ul
	{
		margin-left:185px;
		width:500px;
		text-align:left;
	}
	li
	{
		margin-bottom:20px;
	}
	.reviewPic
	{
		width:150px;
		float:right;
	}
	
	@font-face {
  font-family: raleway;
  src: url(Raleway.woff);
}
	.header
	{
		top:0px;
		position:fixed;
		left:0px;
		width:100vw;
		font-size:25pt;
		height:250px;
		text-align:center;
		border-top:rgba(171, 228, 235, 0.3) 15px solid;
		border-bottom:rgba(171, 228, 235, 0.3) 15px solid;
		background-color:rgba(76, 98, 109, 0.8);
		z-index:2;
		font-family:raleway;
		
	}
	.title
	{
		width:850px;
	}
	.titlepaw
	{
		width:120px; 
		opacity:.1; 
		position:absolute; 
		top:80px; 
		left:50%; 
		margin-left:-60px;
	}
	a
	{
		color:rgb(183,180,84);
		text-decoration: none;
		font-weight:bold;
	}
	a:hover
	{
		filter: brightness(2);
	}
	
	.menu
	{
		width:100vw;
		text-align:center;
		margin-top:15px;
		left:0px;
		-webkit-transition: all;
		-moz-transition: all;
		transition: all;
		
	}
	.menuItem
	{
		display:inline-block;
		margin-right:25px;
		font-size:18pt;
		cursor:pointer;		
	}
	.menuItem::before
	{
		content:url('images/pawprintyellow.png');
		width:40px;
		height:40px;
		margin-right:5px;
	}
	.menuItem:hover
	{
		filter: brightness(2);
		color:#e0e07f;

	}
	.meed
	{
		opacity: 0;
		}
	
	.menuItem:after {
  display:block;
  content: '';
  border-bottom: solid 1px #e0e07f;  
  transform: scaleX(0);  
  transition: transform 500ms ease-in-out;
  transform-origin:100% 50%
}
.menuItem:hover:after { 
  transform: scaleX(1);
  transform-origin:0 50%;
}

	.menuRight
	{
		position:absolute;
		left:100%;
		margin-left:-120px;
		margin-top:-35px;
	}
	 .active
	{
		border-bottom: 2px solid #ffffff;
	}
	.social
	{
		width:30px;
	}
	
	.content
	{
		position:absolute;
		top:330px;
		left:50%;
		margin-left:-400px;	
		width:800px;
	
		text-shadow: 1px 1px 1px black;
			
	}
	.footer
	{
		left:0px;
		position: fixed;
		bottom: 0;
		width:100vw;
		height:80px;
		font-size:25pt;
		text-align:center;
	}
	.contactPhone
	{
		position:fixed;
		z-index:2;
		bottom: 10px;
		left:20px;
		height:75px;
		text-shadow: 1px 1px 1px black;
	}
	.grass
	{
		left:0px;
		width:100vw;
		height:88px;
		background-image:url(images/footer.png);
		background-size:contain;
		background-repeat: repeat-x;
		z-index:1;
	}
	.dog
	{
		position:fixed;
		z-index:0;
		bottom: 10px;
		left:900px;
		height:350px;
		pointer-events: none;
	}
	
	.portfolio
	{
		text-align:center;
	}
	.portfolioImage
	{
		width:200px;
		height:235px;
		display:inline-block;
		margin:5px;
		text-align:center;
		font-size:10pt;
		cursor:pointer;
		border:3px white solid;
	}
	.imageConstrain
	{
		overflow: hidden;
		width:200px;
		height:200px;
			
	}
	.imageConstrain img
	{
		height:280px;
	}
.lightbox
{
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,.8);
	display:none;
	z-index:20;
}
.lightbox img
{
	position:relative;
	z-index:21;
	height:800px;
	margin-top:-400px;
	border:solid 5px white;
	top:50%;
}
	
	
	table
	{
		border:none;
	}
	td
	{
		vertical-align:top;
	}
	h3
	{
		text-align:center;
	}
	
	/*--------------------------------------------------------Resonsive design------------------------------------------------*/
	@media screen and (max-width: 1200px)
	{
		
		.menu
		{
			position:fixed;
			top:0px;
			left:0px;
			height:100vh;
			width:100%;
			background-color:rgba(0,0,0,.85);
			text-align:center;
			display:none;
		}
		
		.menuItem
		{
			position:relative;
			text-decoration:none;
			display:block;
			color:white;
			margin-top:40px;
			font-size:36pt;

			letter-spacing: 1px;
			    opacity: 1;
		    filter: alpha(opacity=100);
		    -webkit-transition: all 0.2s linear;
		    -moz-transition: all 0.2s linear;
		    -o-transition: all 0.2s linear;
		    transition: all 0.2s linear;
		    visibility: visible;
		    transform:translate3d(0, 0, 0);
		
		
		
		}
		
		.active
		{
			text-decoration: none;
			color:#2d6a62;
			position:relative;
			display:block;
			margin-top:40px;
			font-size:48pt;
			letter-spacing: 1px;
			    opacity: 1;
		    filter: alpha(opacity=100);
		    -webkit-transition: all 0.2s linear;
		    -moz-transition: all 0.2s linear;
		    -o-transition: all 0.2s linear;
		    transition: all 0.2s linear;
		    visibility: visible;
		    transform:translate3d(0, 0, 0);
		
		  text-transform: uppercase;
		}
		
			
		.content
		{
			width:800px;
		}
		
	.dog
	{
		position:fixed;
		z-index:0;
		bottom: 10px;
		left:600px;
		height:250px;
	}
	
		.footer
	{
		left:0px;
		position: fixed;
		bottom: 0;
		width:100vw;
		height:70px;
		font-size:25pt;
		text-align:center;
	}
	
	
				
.burger-menu
{
position:fixed;
top:20px;
right:20px;
width:60px;
height:43px;
padding-top:17px;
cursor:pointer;
z-index:10;
border: 1px solid rgb(183,180,84);
}

.bar {
    height: 1px;
    width: 30px;
    display: block;
    margin: 5px auto;
    position: relative;
    background-color: rgb(183,180,84);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition:all 0.3s linear;
}


.exone {
	 background-color: white;
transform:translateY(6px) rotate(-45deg)
}

.extwo {
	 background-color: white;
opacity:0;
}

.exthree {
	 background-color: white;
transform:translateY(-6px) rotate(45deg)
}

.activeMenu
{
	display:block;
}

.activeBoxMenu
{
	border: 1px solid white;
}

	.menuRight
	{
		position:absolute;
		left:50%;
		margin-left:-110px;
		margin-top:30px;
	}
	.social
	{
		width:60px;
	}



	
	}
	

@media all and (orientation:landscape) and (max-width: 1200px) {

	.title
	{
		width:300px;
	}
	.titlepaw
	{
		width:50px;
		top:10px;
		margin-left:-25px;
	}
	.header
	{
		font-size:14pt;
		height:100px;
	}
	.dog
	{
		bottom:20px;
		height: 150px;
		left:700px;
	}
	.menuItem
	{
		font-size:18pt;
		margin-top:15pt;
	}
			.menu
		{
			top:-20px;
			height:100vh;
			width:100%;
		}
}