@charset "utf-8";
/* CSS Document */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
	font-family:Helvetica, Arial, "sans-serif";
	font-size: 20px;
	background-color: #f3f3f7;
}
video, img{
	max-width: 100%;
}

h2{
	font-family: poster-gothic-round-cond-atf,sans-serif;
	font-weight: 600;
	font-style: normal;
}
h3{
	font-family: poster-gothic-round-cond-atf,sans-serif;
	font-weight: 600;
	font-style: normal;
}
h1{
	font-family: poster-gothic-round-cond-atf, sans-serif;
	font-weight: 600;
	font-style: normal;
}
.h1a{
	font-family: poster-gothic-round-cond-atf,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1em
}
h4{
	font-family: co-headline,sans-serif;
	font-weight: 900;
	font-style: normal;
	font-size: 1.2em
}
h5{
	font-family: poster-gothic-round-cond-atf,sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 1em
}
footer{
	background-color: #ffffff;
	border-top:1px solid #000000;
	margin-top:1em
}
footer a{
	text-decoration: none;
	color:black
}

#mmc{
	font-size: .65em;
	margin-top: 1em
}

.spacer{
	max-width: 90%;
	padding: 1em .5em;
	border-bottom:2px solid #000000;
}
.logo{
	position: relative;
	max-width: 306px;
	max-height: 202px;
	margin:0 auto;
	cursor: pointer
}
.ring{
	position: relative;
	max-width: 370px;
	max-height: 320px;
	margin:0 auto;
	cursor: pointer
}
.logoS, .ringS{
	position: absolute;
	top:0;
	left:0;
	z-index: -1000
}
.logoRoll, .ringRoll{
    transition: 1s;
}
.logoRoll:hover, .ringRoll:hover{
    opacity: 0.0;
}

.photo-nav img{
    box-shadow: 0 0 1px 1px #ab9a85;
    background-color: #15362e;
}

.ratio-1{
	max-width: 1280px
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pix{
	border: 6px solid #141520;
	border-radius: 12px
}

/*     my utilities     */
.centerText{
	text-align: center
}

.b{
	font-weight: bold
}
.i{
	font-style: italic
}
.block{
	display:block
}
.pad{
	padding:1em
}
.pad2{
	padding:.5em
}
.pad-top{
	padding-top:.6em
}
.pad-ends{
	padding: 0 .5em
}

.flex1 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:space-between;
	-ms-flex-pack: space-between;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	flex: none;
	flex-shrink: 0;
	align-items: flex-start;
	align-self: center
}
.flex2 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: space-evenly;
	-ms-flex-pack: space-evenly;
	justify-content: space-evenly;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	flex: none;
}
.flex3 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	flex: none;
	flex-shrink: 0;
	align-items: flex-start;
	align-self: center
}


.tenWide{
	max-width:1000px
}
.four20{
	max-width: 430px
}
.eightWide{
	max-width: 800px
}

.alignMid{
	margin: 0 auto
}
.margTop{
	margin-top:1em
}
.margLeft{
	margin-left: 3em
}
.margBot{
	margin-bottom:1em
}

.r{
	color:red
}
.smallFont{
	font-size: .7em
}
.i{
	font-style: italic
}
figcaption{
	font-size: .7em;
}

/*     end utilities     */

/* temp */

.UC{
	display: block;
	position: absolute;
	top:0;
	left: 80px;
	z-index: -100;
}
.head{
	max-width: 1000px;
	margin: 0 auto;
}
.headlogo{
	width: 420px; height:276px; margin: -80px auto
}
.mtile{
	position: relative;
	margin:.3em;
	height: 203px;
	width: 230px;
	background-color: #ffffff;
	border:1px solid #000000;
	overflow: hidden;
}
.mtile p{
	padding: .4em .5em
}
.mtile-head-here{
	font-family: co-headline,sans-serif;
	font-weight: 900;
	font-style: normal;
	color:#838383
}
.mtile-head{
	display: block;
	font-family: co-headline,sans-serif;
	font-weight: 900;
	font-style: normal;
	color:#1e1e1e;
	padding-bottom:.2em
}
.tilecopy{
	font-size: .9em;
}

.mtile2 {
	height: 200px;
	max-width: 485px;
	background-color: #ffffff;
	border:1px solid #000000;
	margin-bottom:10px
}
.fiveWide {
	max-width: 550px
}
.mtile-inf {
		position: absolute;
		height: 190px;
		width: 220px;
		padding:.25em 0;
		left:5px;
		top:168px;
		background-color: rgba(255, 255, 255, 0.5);
	}
.mtile-inf a{
		text-decoration: none;
		color:#000000;
	}
.hover {
  		position: absolute;
  		width:100%;
 		height: 100%;
 		bottom: 0;
}
.hover p {
  		-webkit-transition: all 0.4s; 
		-moz-transition: all 0.4s; 
		transition: all 0.4s;
}
.hover:hover p{
        top:3px;  
}
.footNav{
	max-width: 800px;
}
.footNav li a{
	background-color: white;
	padding: .4em 1em;
	border: 1px solid #000;
	border-radius: 6px;
	text-decoration: none;
	color: black
}
.footnava{
	list-style-type: none;
	margin:.5em
}
.wireship{
	position: absolute;
	
}
.shiptest{
	max-height: 220px;
}
#cj374{
	background-image: url("imgs/374bg.jpg");
}
#cj389{
	background-image: url("imgs/389bg.jpg");
}
#home{
	background-image: url("imgs/homeBG.jpg");
}
#about{
	background-image: url("imgs/aboutBG.jpg");
}
#contact{
	background-image: url("imgs/contactBG.jpg");
}
#unm{
	background-image: url("imgs/unmBG.jpg");
}
#uom{
	background-image: url("imgs/uomBG.jpg");
}
#ask{
	background-image: url("imgs/askBG.jpg");
}
#indy{
	background-image: url("imgs/indyBG.jpg");
}
#projects{
	background-image: url("imgs/projectsBG.jpg");
}
#services{
	background-image: url("imgs/servicesBG.jpg");
}
#logo{
	background-image: url("imgs/logostyle.jpg");
}
#reduce{
	background-image: url("imgs/reduce.jpg");
}
#recolor{
	background-image: url("imgs/recolor.jpg");
}
#plaids{
	background-image: url("imgs/plaids.jpg");
}
#m-1{
	background-image: url("imgs/m-1.jpg");
}
#m-2{
	background-image: url("imgs/m-2.jpg");
}
#m-3{
	background-image: url("imgs/m-3.jpg");
}
@media (max-width: 563px){
	.flex1{
		flex-direction:column
	}
}