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

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font-weight:normal;
	vertical-align: baseline;
	background: transparent;
}

ol, ul {
	list-style: none;
}

body {
	background-color: #00A79D;
	color:#146282;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	background-image: url(../images/BkgrdPattern.svg);
	background-repeat:repeat;
}

/*  */

#container {
    margin: 20px auto;
    overflow: hidden;
	max-width: 1000px;
	width:90%;
	display:block;
}


/* HEADNGS */

h1 {
	font-size: 1.3em; 
	line-height: 1.6em;
	color:#146282;
	text-transform:uppercase;
	font-weight:bold;
	margin-bottom:10px;
}


h2 {
	font-size: .9em; 
}

h3 {
	font-size:.75em;
}

h4 {
	font-size: .5em; 
}



h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: 1.5em;
	margin-bottom: 0.3em;
}


/* LINKS */

a {
	outline: 0;
}

a img {
	text-decoration: none;
}

a:link, a:visited {
	color: #333;
	text-decoration: none;
}

a:hover, a:active {
	color: #000000;
	
}


/* PARAGRAPHS */

p {
	font-size:0.75em;
	line-height:1.2em;
	font:Arial, Helvetica, sans-serif;
	color: #999999;
	font-style:normal;
	margin-bottom:15px;
	text-align:center;
}

strong, b {
	font-weight: bold;
}

em, i {
	font-style: italic;
}

.line {
	margin:10px auto;
	width:100%;	
	display:block;
	height: 2px;
	background-color: #CCCCCC;
}


/* IMAGES */

img {
	max-width: 100%;
}

/* SELECTED TEXT */

::selection {background: #00A79D; color: #FFFFFF;}
::-moz-selection {background: #00A79D; color: #FFFFFF;}
::-webkit-selection {background: #00A79D; color: #FFFFFF;}


.clear {
	clear:both;	
	margin:0;
	padding:0;
	
}

.content {
	background-color:#FFFFFF;
	display:block;
	padding:30px;
	max-width:1000px;
	margin:-5px 0 0;
}

.three, .four {
	display:block;
	margin:20px 0 0;
	padding:0;
}

.three ul li, .four ul li {
	display:inline-block;
	white-space: nowrap;
	text-align:center;
	vertical-align: top;
	margin-bottom: 10px;
	padding:0 8px;
}

.three ul li img {
	max-width:300px;
	max-height:auto;	
}

.four ul li img {
	max-width:400px;
	max-heigt:auto;	
}

.three ul li {
	width: 30.5%;
}

.four ul li {
	width: 22.75%;
}

.four ul li img, .three ul li img {
	width:100%;	
}

.three ul li a, .four ul li a {
	font-style:normal;
	font-weight:bold;
	text-decoration:none;
	color:#146282;
}

.three ul li a:hover, .four ul li a:hover  {
	text-decoration:underline;
}

/* VIDEO */
 .video {
	width:800px;
	height:450px;
	display:block;
	margin:0 auto 15px;
}

.oldvideo {
	width:720px;
	height:480px;
	display:block;
	margin:0 auto 15px;
}

/* IMAGES */

.gif {
	width:75%;
	max-width:500px;
	padding:0 30px;
	margin: 0 auto 30px;
	
}

.infographic {
	width:90%;
	max-width:800px;
	margin: 0 auto 30px;
	display:block;	
}

.cover-design, .sculpture {
	width:50%;
	max-width:800px;
	margin: 0 auto 30px;
	display:block;	
}

.books {
	width:95%;
	max-width:800px;
	margin: 0 auto 30px;
	display:block;	
}

.misc {
	width:100%;
	max-width:500px;
	margin: 0 auto 30px;
	display:block;	
}


@media screen and (max-width: 1100px) {
.video {
	width:650px;
	height:366px;
}

.four ul li, .three ul li{
	width: 45.75%;	
}
}

@media screen and (max-width: 980px) {

.content h1, .content h2 {
	text-align:center;	
}
.oldvideo {
	width:600px;
	height:400px;
}
	
}

@media screen and (max-width: 790px) {
.video {
	width:100%;
}
.oldvideo {
	width:500px;
	height:333px;
}

}

@media screen and (max-width: 650px) {
.oldvideo {
	width:425px;
	height:283px;
}
.cover-design, .sculpture {
	width:75%;
}
}


@media screen and (max-width: 600px) {
.video {
	width:100%;
}
.four ul li, .three ul li {
	width: 100%;	
}
.oldvideo {
	width:450px;
	height:300px;
}

}

@media screen and (max-width: 550px) {
.oldvideo {
	width:300px;
	height:200px;
}
.three ul li, .four ul li {
	padding:0px;	
}
#container {
    width:100%;
	margin:0px;
}

}
@media screen and (max-width: 500px) {
.video {
	width:320px;
	height:180px;
}
}

@media screen and (max-width: 400px) {
.video {
	width:100%;
}

.content {
	padding:15px 10px;
}

.oldvideo {
	width:225px;
	height:150px;
}
.cover-design, .sculpture {
	width:90%;
}
}