@charset "UTF-8";
/* CSS Document */
html {
    -webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;	
}
a {
	cursor: pointer;
}
body {
	margin: 0;
	padding: 0;
	font-family: 'Work Sans', sans-serif;
	background-color:white;
	border-top:solid 6px black;
}
header {
	padding:0;
	margin:0;
}
input[type=checkbox] {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
label {
	display: block;
	background: black;
	border: none;
	padding: 20px 5px 3px 5px;
	position: fixed;
	top:0;
	z-index: 1;
	right:25px;
	border-bottom:solid 2px white;
	border-right:solid 2px white;
	border-left:solid 2px white;
}
.upperMenu {
	transition: all;
	transition-duration: .5s;
	overflow: hidden;
	height: 0;
	background-color: black;
	text-align: center;
	text-align: left;
}
.upperMenu ul {
	list-style-type: none;
	margin: 40px 0;
	padding: 0 10px;
}
.upperMenu li {
	color:white;
	display: block;
	background-color: black;
	margin:  0;
	padding: 0;
}
.upperMenu a, .upperMenu a:visited {
	color:white;
	text-decoration: none;
	display: block;
	max-width: 400px;
	padding: 5px;
	margin-left: 15px;
	transition: all;
	transition-duration: .25s;
}
.upperMenu a:hover {
	background-color:white;
	color:black;
}
li.menuContactPhone {
	margin-top: 10px;
}
li.menuContact {
	color:#999999;
	font-size:13px;
	margin-left: 22px;
}
li.menuContactPhone a, li.menuContactPhone a:visited, li.menuContactPhone a:hover, li.menuContactPhone a:active {
	margin: 0;
	padding:0;
	display: inline;
	text-decoration: none;
	color:#999999;
}
.logoPhone a, .logoPhone a:visited, .logoPhone a:hover, .logoPhone a:active {
	color:black;
	text-decoration: none;
}
input[type=checkbox]:checked ~ .upperMenu {
	height: 200px;
}
input[type=checkbox]:checked ~ label {
	background:white;
}
input[type=checkbox]:checked ~ label span {
	background:black;
}
label span {
	display:block;
	background-color:white; 
	width:30px;
	height: 3px;
	margin-bottom: 5px;
}
main {
	margin:40px auto 0 auto;
	padding: 0 15px;
	max-width: 1200px;
	display: flex;
	flex-direction: column;
}
#logo {
	width: 80px;
	height: 80px;
	border-radius: 80px;
	float: left;
	flex-wrap: nowrap;
	margin:0 10px 0 -10px; 
}
.logo {
	
}
.logo ul {
	list-style-type: none;
	margin-top: 23px;
	font-size:14px;
}
.intro {
	margin-bottom: 80px;
}
.intro ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.intro li {
	margin-top:5px;
}
.intro li a, intro li a:visited {
	color: #666666;
	text-decoration: none;
}
.intro li a:hover {
	color:black;
}
.intro li a:active {
	color: #999999;
}
h1 {
	font-size:28px;
	letter-spacing: 1px;
	line-height: 1.125em;
	max-width: 900px;
}
.workContainer {
	display: flex;
    flex-wrap: wrap;
    flex-flow: row wrap;
}
.workContainer img {
	flex: 1 33.33%;
	width: 100%;
	height:100%;
	max-width: 33%;
}
footer {
	margin:40px auto 60px auto;
	padding: 0 15px;
	max-width: 1200px;
}
footer section {
	border-top: solid black 6px;
}
footer ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size:14px;
}
footer h2 {
	font-size:22px;
	letter-spacing: 1px;
	margin: 10px 0;
}

@media only screen and (max-width:600px) { 
	.workContainer img {max-width:50%;}
	.upperMenu a {max-width: 300px;}
}