/*
THEME NAME: Epsilon
THEME URI: http://www.epsilon.com
DESCRIPTION: Epsilon advises clients operating at the intersection of government, enterprise, technology and society.
VERSION: 1.0.0
AUTHOR: <a href="http://philipcronerud.com/">Philip Cronerud</a>
AUTHOR URI:
TAGS: Epsilon
*/

@font-face {
    font-family: 'Graphik-regular';
    src: url('./@fontface/graphik-regular.eot');
    src: url('./@fontface/graphik-regular.eot') format('embedded-opentype'),
         url('./@fontface/graphik-regular.woff') format('woff'),
         url('./@fontface/graphik-regular.ttf') format('truetype'),
         url('./@fontface/graphik-regular.svg#Graphik-regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik-medium';
    src: url('./@fontface/graphik-medium.eot');
    src: url('./@fontface/graphik-medium.eot') format('embedded-opentype'),
         url('./@fontface/graphik-medium.woff') format('woff'),
         url('./@fontface/graphik-medium.ttf') format('truetype'),
         url('./@fontface/graphik-medium.svg#Graphik-medium') format('svg');
    font-weight: medium;
         
}

@font-face {
    font-family: 'Graphik-bold';
    src: url('./@fontface/graphik-bold.eot');
    src: url('./@fontface/graphik-bold.eot') format('embedded-opentype'),
         url('./@fontface/graphik-bold.woff') format('woff'),
         url('./@fontface/graphik-bold.ttf') format('truetype'),
         url('./@fontface/graphik-bold.svg#Graphik-bold') format('svg');
    font-weight: bold;        
}

* {
margin: 0;
padding: 0;
}

body {
display:none;
}

html, body { 
color: #000; 
background-color:#fff;
font-family: 'Graphik-regular', Helvetica, Arial, sans-serif; 
wfont-size: 12px;
width: 100%; 
height: 100%; 
letter-spacing:1px; }

a { text-decoration: none; color:#000; }
a:hover { color:#000; }


.bottom{
	display: none;
	position: absolute;
	width: 100%;
	bottom: 1.5em;
	text-align: center;
	z-index: 200;
	font-size:12px;
	}

#logo { position:fixed; top:50%; left:50%; margin-top:-200px; margin-left:-200px;}

#logo img {
	max-width: 400px;
}
#logos { position:fixed; padding:25px; }
#logos li { opacity: 0; position: absolute; }
#logos li.current { opacity: 1; }

#fixed { background-color:#fff; position:fixed; z-index: 99; }

#nav { bottom:5px; position:fixed; font-size: 22px; width: 200px; line-height:30px; padding:30px; }
#nav li { border-bottom:0px solid #7d7d7d; }
#nav li a { color: #000; text-decoration: none; cursor: pointer; opacity: 1; }

ol,ul { list-style:none; }

#nav li a:hover { color: #fff; } 
#nav li.current { color: #000; }
#nav li.current a { color: #000; }
#nav li.current a:hover { color: #fff; }

.home #nav li.current { color: #000; }
.home #nav li.current a { color: #000; }
.home #nav li a { color: #000; }
.home #nav li a:hover { color: #fff; }

.epsilon #nav li.current a { color: #000; }
.epsilon #nav li a { color: #aaa; }
.epsilon #nav li a:hover { color: #000; }

.about #nav li.current a { color: #000; }
.about #nav li a { color: #fff; }
.about #nav li a:hover { color: #000; }

.contact #nav li.current a { color: #000; }
.contact #nav li a { color: #fff; }
.contact #nav li a:hover { color: #000; }

.section { width: 100%; height: 100%; height: auto !important; min-height: 100%; position: relative; }
.section-1 { width: 100%; height: 150%; padding-bottom: 5%; position: relative; }

.container { overflow: hidden; position: relative; z-index: 8; }

.left { font-size:12px; position: absolute; top: 0; width: 100%; }
.left p { float: left; padding: 30px; }

.right { font-size:12px; position: absolute; bottom: 0; width:420px; }
.right p { float: right; padding: 30px; }

.caption { border-top:1px dotted #000; font-size: 12px; color:#000; width: 75%; }
.caption p { float: left; padding-top: 25px; }

#epsilon { background: #f2f2f2; color:#000; }
#epsilon .container { top: 30px; margin-right: 120px; max-width:660px; width:65.5%; float:right; font-size: 25px; }

#about { background: #ccc8c6; width: 100%; color: #000; font-size:14px; }
#about .container { float:right; }

#contact { background: #e0dad7; }
#contact .container { top: 30px; width:420px; float:right; font-size: 25px;  }

.headline { font-family: 'Graphik-medium', Helvetica, Arial, sans-serif; }

.txt { display: inline-block; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; margin-left:20px; margin-right:20px; float: left; height: 600px; width: 25%; min-width: 100px; max-width:240px; }

.space {
margin-left: 160px; 
}

.clear { float: left; width: 35%; margin-left:auto; margin-right:0px; }

.col-1 { float:left; width: 20%; margin-right: 10px; }

.col-3 { position: absolute; top: 0px; padding: 5%; }

.col-16 { width: 16.66667%; }

.col-20 { width:20%; }

.col-25 { width:25%; }

.col-33 { width:33.33334%; }

.col-50 { width:50%; }

.col-75 { width:75%; }

.col-100 { width:100%; }

.circular img { height: 150px; width: 150px; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; }

.pic { margin-top: 30px; margin-bottom: 10px; height: 150px; width: 150px; overflow: hidden; }

.pic:hover { cursor: pointer; }

#icon { margin-bottom: 3px; height: 18px; margin-right:15px;}
#icon:hover { opacity:0.5; }

@media screen and (max-width: 800px), (max-height: 600px) {
	
.bottom{
	display: block;
	position: absolute;
	width: 100%;
	bottom: 1.5em;
	text-align: center;
	z-index: 200;
	font-size:12px;
	}

#fixed { position:fixed; width:100%; min-width:400px; }

.pic { margin-top: 85px; }

#nav { top: 20px; font-size: 12px; width: 100%; text-align:center; margin:0; padding: 0px; }
#nav li { padding-right:25px; display: inline; border-bottom:0px solid #eee; }

.clear { width: 0%;  }

.txt { margin-right: 2%; margin-left: 2%; width: 25%; height: 400px; }

.space {
margin-left: 0px; 
}

#epsilon .container { width:60%; padding:25px; margin-top:30px; float:left; font-size:16px; }
#contact .container { width:60%; padding:25px; margin-top:30px; float:left; font-size:16px; }

#about {font-size:10px; }

#logo { position:absolute; }
#logos { display:none; }

.right { display:none; }
.left { display:none; }

.circular img { height: 80px; width: 80px; }

.circular img:hover { width: 90px; height: 90px; }

.pic { height: 80px; width: 80px;  }

}