body{
	
	font-family: 'Source Sans Pro', sans-serif;
	font-size:18px;
}

main, .cwidth{
	max-width:1024px;
	width:80%;
	margin: 0 auto;
	position:relative;
	display:block;
}
.cwidth{
	height:100%;
	
}
.mincwidth{
	max-width:600px;
	width:80%;
	margin: 0 auto;
	display:block;
}
main{
	
}

section{
	margin-bottom:20px;
	padding:10px;
}
	
header{
	background:black;
	color:#fff;
	height:150px;
	margin-bottom:50px;
}
footer{
	color:#fff;
	padding-bottom:20px;
	padding-top:10px;
	position:relative;
	background:black;
	padding-top:20px;
}

footer a{
	text-decoration:none;
	color:#fff;
	text-decoration:underline;
}


footer ul li{
	margin-bottom:10px;
	list-style-type:none;
	text-align:center;
}

footer ul{

}
#footnote1{
	position:absolute;
	bottom:10px;
	left:10px;
}
#footnote2{
	position:absolute;
	bottom:10px;
	right:10px;
}
footer h3{
	text-align:center;
}

header nav{
	position:absolute;
	right:20px;	
	bottom:0px;
}
header nav ul li{
	display:inline-block;
	margin-right:15px;	
	border-bottom: 2px solid transparent;
	width: 80px;
	text-align:center;
	padding-bottom:10px;
}
header nav ul li:last{
	margin-right:0;
}
header nav ul li a{
	text-decoration:none;
	color:#fff;
}
/*replace this with a chevron that zooms out*/
/*
header nav ul li:hover{
	cursor:pointer;
	border-bottom: 2px solid #fff;
}
*/

nav{
	position:relative;
}

nav:after{
	content:'';
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #000;
	width:0px;
	height:0px;
	position:absolute;
	bottom: -15px;
	left:0px;
	right:0px;
	margin: 0 auto;
	z-index:1;
	transition: all 900ms ease;
	-webkit-transition: all 900ms ease-in-out;
    -moz-transition: all 900ms ease-in-out;
    
    transition: top 900ms ease;
    transition: bottom 900ms ease;
	transition: left 500ms cubic-bezier(.86,.5,.65,.41);
	transition: right 500ms cubic-bezier(.86,.5,.65,.41);
	
	-webkit-transition: top 900ms ease;
    -webkit-transition: bottom 900ms ease;
	-webkit-transition: left 500ms cubic-bezier(.86,.5,.65,.41);
	-webkit-transition: right 500ms cubic-bezier(.86,.5,.65,.41);
	
	-ms-transition: top 900ms ease;
    -ms-transition: bottom 900ms ease;
	-ms-transition: left 500ms cubic-bezier(.86,.5,.65,.41);
	-ms-transition: right 500ms cubic-bezier(.86,.5,.65,.41);
}

.home:after{
	right:311px;
}

.portfolio:after{
	right:112px;
}

.contact:after{
	right:-90px;
}
.blog:after{
	right:-287px;
}

.clicked:after{
	bottom: -9px;
}


#logocontainer{
	position:absolute;
	left:20px;
	bottom:0px;	
}
#logocontainer img{
	width:175px;	
	margin-bottom:15px;
}
.hidden{
	display:none;
}



/*not a fidget spinner spinner */

#spinner{
	padding-top:25px;
}
#spinbody{
	margin-left:50px;
	width:100px;
	height:100px;
	
	border-radius:50%;
	position:relative;
	border:2px solid #000;
	transition:transform 300ms;
	-webkit-transition: transform 300ms;
	-ms-transition: transform 300ms;
}
#spinbody:hover{
	cursor:pointer;
}

.point-red{
	background: #DD3B3B !important;
	
}

#point-0, #point-1, #point-2{
	border-radius:50%;
	width:25px;
	height:25px;
	position:absolute;
	border:1px solid  #000;
	content:'';
	background: #000;
	transition:background 200ms;
	-webkit-transition: background 200ms;
	-ms-transition: background 200ms;
}

#point-0{
	top:-15.5px;
	left:0px;
	right:0px;
	margin:0 auto;
	
}
#point-1{
	left:-8.7px;
	bottom:11.7px;	
	
}

#point-2{
	right:-7.7px;
	bottom:8.7px;	
	
}


h3{
	
	font-size:25px;
	margin-bottom:10px;
	padding-top:10px;
	
}

#principles .col2{
	width:29%;
}
#principles .col2last{
	width: 69%;
} 


.point-0, .point-1, .point-2{
	transition: opacity 100ms;	
}

.point-0{
	display:block;
}
.point-1, .point-2{
	display:none;
	opacity:0;
}


#principles p{
	padding-top:10px;
	display:inline-block;
	font-size:20px;
}
h2{
	font-size:40px;
	
	font-weight:bold;
	margin-bottom:10px;
}

/*
	responsive part
*/

#responsive{
	min-height:300px;	
	
}
#addressbar{
	padding-top:20px;
	overflow:hidden;
	display:block;
	width:100%;
	
}
#responsive ul{
	display:block;
	padding-top:30px;
}
#addressbar #refresh{
	transition: transform 800ms;
	-webkit-transition: transform 800ms;
	-ms-transition: transform 800ms;
	transform-origin: center center;
	
}
#addressbar #back, #addressbar #refresh, #addressbar #star{
	margin-left:10px;
	float:left;
	font-size:28px;
}
#addressbar #star, #addressbar #refresh{
	margin-top:1px;	
}
#addressbar #back{
	font-size:40px;
	margin-top:-4px;
	margin-right:-9px;
}
#addressbar span{
	display:block;
}
#address{
	margin-bottom:10px;
	border:1px solid #000;
	padding:5px 10px 5px 15px;
	float:left;
	overflow:hidden;
	margin-top:1px;
	
}
.sm #address{
	width:45%;
}
.med #address{
	width:60%;
}
.big #address{
	width:70%;
}

.screenborder{
	border-left:5px solid #000;
	border-right:5px solid #000;	
	width:auto;
	border-top:20px solid #000;
	border-radius: 15px 15px 0 0;
	
	padding-left:10px;
	padding-right:10px;
	position:relative;
}
#psuedoscreen{
	margin: 0 auto;
	transition:opacity 300ms;
	-webkit-transition: opacity 300ms;
	-ms-transition: opacity 300ms;
	opacity:1;
	
}

#psuedoscreen.nullscreen{
	opacity:0;
}
.nullscreen .screenborder{
	display:none;
}
.nullscreen ul li{
	display:none;
}

#psuedoscreen ul li {
	transition: width 500ms;
	-webkit-transition: width 500ms;
	-ms-transition: width 500ms;
	transition: background 200ms;
	-webkit-transition: background 200ms;
	-ms-transition: background 200ms;
}
#psuedoscreen ul li:hover{
	
	background: #fff;
	color:#141518;
	cursor:pointer;
}
.big{
	width:100%:
	max-width:1280px;
	min-width:800px;
}
.med{
	width:60%;
	max-width:720px;
	min-width:500px;
}
.sm{
	width:30%;
	max-width:420px;
	min-width:300px;
}

.big ul {
	overflow:hidden;
}

.big ul li{
	width:32.25%;
	margin-right:1.61%;
	float:left;
	background: #141518;
	color:#fff;
	
}
.big ul li h4{
	display:block;
	text-align:center;
	font-size:20px;
	margin-bottom:20px;
	padding-top:20px;
}

.big ul li:last-child{
	margin-right:0%;
}


.med ul li{
	width:100%;
	margin-right:0;
	margin-bottom:10px;
	background:#141518;
	color:#fff;
}
.med ul li:first-child{
	position:relative;
}
.med ul li:first-child:before{
	content:'';
	background-image: url(../images/x.svg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position: 50% 50%;
	position:absolute;
	height:25px;
	width:25px;
	color:#000;
	top:-35px;
	right:0px;
	
}


.med ul li h4{
	text-align:center;
	font-size:16px;
	padding-top:10px;
	padding-bottom:10px;
}


.sm ul li{
	width:100%;
	margin-bottom:5px;
	background:#141518;
	color:#fff;
}
.sm ul li h4{
	text-align:left;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:10px;
}

.sm ul li:first-child{
	position:relative;
}

.sm ul li:first-child:before{
	content:'';
	background-image: url(../images/x.svg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position: 50% 50%;
	position:absolute;
	height:25px;
	width:25px;
	color:#fff;
	top:-30px;
	right:0px;
	
}


/*maintenance section*/
#maintenance{
	min-height:250px;
	position:relative;
	padding-top:20px;
	overflow:hidden;
}
#maintenance #maintenancetext{
	
	display:none;
}

#maintenance ul {
	position:absolute;
	right: 250px;
	top: 70px;
}

#maintenance h2{
	margin-bottom:80px;
}
#maintenancepic{
	transform-origin: 0 0;	
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transition: transform 900ms;
	-webkit-transition: transform 900ms;
	-ms-transition: transform 900ms;
	position:absolute;
	left:50px;
}

.project h3{
	font-size:26px;
	margin-bottom:10px;
}
.project p{
	line-height:1.8;	
}
.project h4{
	
	margin-left:10px;
	font-size:18px;
	margin-bottom:20px;
}
.project figcaption{
	padding-top:15px;
}
.project figure{
	padding:20px;
	text-align:center;
}
.project ul li{
	display:none;
	min-height:320px;
}

.project ul li:first-child{
	display:block;
}

.gallerynav{
	height:50px;
	overflow:hidden;
	position:relative;
}

.gallerynav .larr, .gallerynav .rarr{
	width:60px;
	height:60px;
	
}

.gallerynav .larr:hover, .gallerynav .rarr:hover{
	cursor:pointer;
}
	

.gallerynav .larr:after{
	content: '';
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid #000;
	width: 0px;
	height: 0px;
	position:absolute;
	
	top:0px;
	bottom:0px;
	margin: auto 0;
	right:40px;
}

.gallerynav .rarr:after{
	content: '';
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid #000;
	width: 0px;
	height: 0px;
	position:absolute;
	
	top:0px;
	bottom:0px;
	margin: auto 0;
	left:40px;

}

.gallery .rarr:hover, .gallery .larr:hover{
	cursor:pointer;
}

.project img{
	width:100%;

	
}
.projectreadmore{
	padding-top:30px;
}

.projectreadmore a{
	border-right: 1px solid #cecece;
	padding:10px;
}
.projectreadmore a:active, .projectreadmore a:visited, .projectreadmore a:hover, .projectreadmore a{
	color: #000;
}
.projectreadmore a:last-child{
	border-right:1px solid transparent;
}


.red{
	color:#DD3B3B;
}



/*contact form*/
#contact form{
	padding-top:20px;
}
#main-form{
	width:49%;
	margin-right:2%;	
	float:left;
}
#sub-form{
	width:49%;
	margin-right:0%;
	float:left;
}
#contact .formrow{
	padding: 0 20px;
	margin-bottom:30px;	
	max-width:450px;
	overflow:hidden;
	
}
#contact label{
	line-height: 28px;
}
	
#contact label{
	margin-right:2%;
	width:20%;	
	float:left;
	display:block;
}
#contact i{
	float:left;
	width: 8%;
	line-height:28px;
	text-align:center;
}
	


#contact input, #contact select{
	float:left;
	box-sizing: border-box;	
	width: 70%;
	height:28px;
	line-height:28px;
	padding: 2px 2px 2px 8px;
	max-width:150px;
	float:right;
}

#contact textarea{
	width:92%;
	float:right;	
	box-sizing:border-box;
	height:150px;
	text-resize:none;
}

#contact .newline{
	width: 88%;
	margin-bottom:10px;
}

#contact .formicon{
	width:45px;
}
#contact #coffee{
	font-size:80px;
	display:block;
	width:80px;
	height:80px;
	margin: 0 auto;
	margin-top:50px;
	float:none;
	
}

#contact #coffeeserver{
	overflow:hidden;
	width:100%;
	
	position:relative;
}

#contact #coffeemsg{
	position:absolute;
	
	
}

#contact #coffeebutton, form button{
	border:2px solid #000;
	padding: 5px 10px;
	width:150px;
	margin: 0 auto;
	transition:background 200ms;
	-webkit-transition: background 200ms;
	-ms-transition: background 200ms;
}

#contact #coffeebutton:hover, form button:hover{
	background:#000;
	color:#fff;	
	cursor:pointer;
}
form button{
	display:block;
	margin: 0 auto;
}

#contact input[name='animals']{
	display:none;	
	
	
}

#sugar{
	float:none;
	position:absolute;
	left:111px;
	top:102px;
		
}

#showmmenu, #hidemmenu{
	color:#fff;
	width:20px;
	height:20px;
	font-size:18px;
	display:none;
}

#contact input[type='radio']:checked+img{
	-webkit-animation: rock 2.4s infinite; /* Safari 4+ */
	-moz-animation:    rock 2.4s infinite; /* Fx 5+ */
	-o-animation:      rock 2.4s infinite; /* Opera 12+ */
	animation:         rock 2.4s infinite; /* IE 10+, Fx 29+ */
}
/*
#contact #coffeebutton:active+#sugar{
	-webkit-animation: addsugar 2.4s 1 cubic-bezier(0.310, 0.440, 0.445, 1.650); 
	-moz-animation:    addsugar 2.4s 1 cubic-bezier(0.310, 0.440, 0.445, 1.650); 
	-o-animation:      addsugar 2.4s 1 cubic-bezier(0.310, 0.440, 0.445, 1.650);
	animation:         addsugar 2.4s 1 cubic-bezier(0.310, 0.440, 0.445, 1.650);
}
*/


#contact #sugar.sugaranimation{
	-webkit-animation: addsugar .9s 1 cubic-bezier(0.310, 0.440, 0.445, 1.650); /* Safari 4+ */
	-moz-animation:    addsugar .9s 1 cubic-bezier(0.310, 0.440, 0.445, 1.650); /* Fx 5+ */
	-o-animation:      addsugar .9s 1 cubic-bezier(0.310, 0.440, 0.445, 1.650); /* Opera 12+ */
	animation:         addsugar .9s 1 cubic-bezier(0.310, 0.440, 0.445, 1.650); /* IE 10+, Fx 29+ */
}

/*some css keyframe animations*/

@keyframes rock{
	0%{
		transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		
		
	}
	
	50%{
		transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
			
	}

	100%{
		transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	
  
}

@keyframes addsugar{
	0%{
		left:111px;
		top:102px;
		transform:rotate(0deg);
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
	}
	
	60%{
		
		top:20px;
		
	}
	100%{
		top:50px;
		left:190px;
		transform:rotate(180deg);
		-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
	}
	
	
}

@media screen and (max-width:1050px){
	
	#maintenance ul{
		right:100px;
	}
	
}



@media screen and (max-width:1024px){
	
	#responsive .big{
		display:none;
	}	
	
	
}

@media screen and (max-width:850px){
	.project .col2, .project .col2last{
		width:100%;
		float:none;
		margin-bottom:20px;	
		
	}
	
	#maintenance ul{
		position:static;
		margin-top:-100px;	
	}
	
}

@media screen and (max-width: 800px){
	main, .cwidth{
		width:95%;
		margin: 0 auto;
	}
	section{
		margin-bottom:35px;
	}
	
}

@media screen and (max-width: 700px){
	#principles .col2, #principles .col2last{
		
		width:100%;
		float:none;
		margin:0;	
	}
	#spinner{
		padding-top:0px;
	}
	#spinbody{
		margin: 0 auto;
		margin-bottom:20px;
	}
	header{
		margin-bottom:25px;
	}
	#maintenance ul{
		margin-top:0;
	}
	#maintenance #maintenancetext{
		display:block;
	}
}



@media screen and (max-width: 650px){
	
	#responsive .med{
		display:none;
	}
	
	#maintenance img{
		display:none;
	}
	#maintenance h3{
		display:block;
	}
}


@media screen and (max-width:640px){
	
	#navigation ul li{
		display:block;
		text-align:left;
	}	
	#navigation:after{
		display:none;
	}
	section{
		margin-bottom:15px;
	}
	#navigation{
		position:relative;
		display:block;
		margin: 0 auto;	
		padding-left:40px;
		padding-right:20px;
		right:0;
		top:0;
		min-height:50px;
	}
	#logocontainer{
		position:relative;
		top:0;
		left:0;
	}
	header{
		height:auto;
	}
	
	#navigation #hidemmenu{
		display:block;	
		position:absolute;
		top:0px;
		left:0px;
	}
	#navigation #showmmenu{
		position:absolute;
		top:0px;
		left:0px;
	}
	
}
@media screen and (max-width:600px){
	.project ul li{
		min-height:250px;	
	}	
	#main-form, #sub-form{
		width:100%;
		float:none;
		margin:0;
		margin-bottom:20px;	
		
	}
	#footnote1, #footnote2{
		display:block;
		padding-bottom:10px;
		position:static;
	}
	
}

@media screen and (max-width: 540px){
	
	#sugar{
		left:20%;
	}
	
}


@media screen and (max-width:500px){
	
	main{
		width:100%;
		margin: 0;
	}
	#pseudoscreen{
		margin-left: -5%;
		margin-right: -5%;
	}
}

@media screen and (max-width:430px){
	#sugar{
		left:10%;	
	}	
}