body{
  font-family: 'Share Tech Mono';
}
 ul {
	padding: 0;
	margin: 0 ;
	list-style: none;
text-align: center;
}
ul li{
  display: inline-block;

}
ul a{
	text-decoration: none;
	color:black;

}

html, body{
	width: 100%;
	height: 100%;
	margin: 0;

}

#wrapper{

	margin:auto;
	top: 10px;
	 ;
}
#logo{
  background: url("../images/logo.svg")no-repeat center;
  width:200px;
  height:100px;
  margin: auto;
}
#slideshow {
    margin: 50px auto;
    position: relative;
    width: 380px;
    height: 300px;
    padding: 10px;

}

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}
#container{

  display:grid;
  grid-template-areas: ". . ."
                        ". box ."
                        ". . .";
  grid-template-rows: 1fr 3fr 1fr;
  grid-template-columns:1fr 3fr 1fr ;

}
#photo{
	grid-area:box;
font-family: 'Share Tech Mono';

}
.bg-modal{
  background-color:rgba(0, 0, 0, 0.8);
  width:100%;
  height:200%;
  position:absolute;
  top:0;
  display: none;
  justify-content:center;
  align-items:center;

}
.modal-contents{
  display: grid;
  grid-template-areas: "a"
                        "t"
                        "b";
  grid-template-columns: 400px;
  grid-template-rows:100px 320px 300px;
  background-color:white;
  text-align:center;
  padding:20px;
  position:relative;
  border-radius: 4px;
}
.modal-contents h2{
  grid-area:a;
}



.responsive img{
	width: 100%;
	max-width: 380px;
}
.close {
	position: absolute;
	top: 0;
	right: 10px;
	font-size: 42px;
	color: #333;
	transform: rotate(45deg);
	cursor: pointer;
	&:hover {
		color: #666;
	}
}
#map {
  grid-area:t;
   width: 100%;
   height: 300px;
   background-color: grey;
 }
 .form-style-9{
   grid-area:b;
   display: grid;
   grid-template-areas: "name"
                        "email"
                        "text"
                        "sumbit";
  grid-template-columns: 250px;
  grid-template-rows:50px 50px 100px 50px;
   border: 1px solid red;
    justify-content: space-around;
    padding: 10px;
 }
 .form-style-9 >*{
   margin:10px;
 }


@media  screen and (min-width:321px) and (max-width:479px){
	#wrapper{min-width:321px;
	}

.responsive img{
	margin-left:auto;
	margin-right: auto;
	width: 100%;
	max-width: 100%;
}

}

@media  screen and (min-width:480px) and (max-width:767px){
	#wrapper{min-width:480px;
overflow: none;
	}

.responsive img{
	width: 100%;
	max-width: 100%;
}

}

@media screen and (min-width:768px) and (max-width:959px){
	#wrapper{min-width:768px;}

.responsive img{
	width: 100%;
	max-width: 100%;
}


}
@media  screen and (min-width:960px) and (max-width:1400px){
	#photo {
    display: block;
margin: auto;
  }


		}