@import url('https://fonts.googleapis.com/css?family=Roboto');
	@font-face {
    font-family: 'Clarendon';
    src: url('font/ClarendonBT.ttf');
    font-weight: bold;
	}	
	*{box-sizing: border-box;}
	body{
		background-color: #eee;
		margin: 10px;
		font-family: 'Roboto';
		display: flex;
		}

	h2{
		font-family: 'Clarendon';
		font-size: 62px;
		margin: 0 0 10px 0;
		line-height: 50px;
	}
	
	p {
		padding: 0;
		margin: 0 0 10px 0;
	}
	header{
		flex-direction: row;
		justify-content: center;
		padding: 20px 45px;
		width: 100%;
		border-bottom: dotted 1px #ccc;
		display: flex;
	}
	header #logo{width:150px;}
	header #logo img {
    width: 100%;
	}
	.wrapper {
		margin: auto;
		min-width: 976px;
		max-width: 1100px;
		background-color: white;
		display: flex;
		flex-direction: column;
	}	
	main {
		padding: 0 20px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		min-height: 300px;
	}	
	.col-1{width:33%;}
	.col-2{width:66%;}
	.col-1 img, .col-2 img{width:100%;}
	.col-1,.col-2{
		display:flex;
		flex-direction:column;
		padding-bottom:20px;

		padding: 30px;
	}
	#home .col-1, #home .col-2{		justify-content: center;}
	.flex-row {flex-direction:row;}
	.flex-col {flex-direction:column;}	
	
	
	
	.grey{color:#aaa;}
	.small, .small a{
	font-size: 12px;
	}	


	/* footer */	
	footer {    display: flex;}	
	footer{    
		margin: 0 auto;
		padding-top: 10px;
		padding-bottom: 50px;
		height: 100px;
		width:976px;
		justify-content:  space-between;
		border-top: dotted 1px #ccc;
		align-items: center;
		}
	
	footer  img.icon {height:25px;}
	footer ul li{display: inline-flex;}
	footer ul{display: flex;text-align: center;    flex-direction: column;align-items: flex-start;    margin: 0 20px;}
	footer ul.horiz{    flex-direction: row;width: 100%;
    justify-content: space-evenly;}
	footer ul.horiz li{    margin-right:20px;}
	footer ul li span ,footer ul li a{display:inline;}