/* Reset

http://meyerweb.com/eric/tools/css/reset/

   v2.0 | 20110126

   License: none (public domain)

*/



html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

}



@font-face {

  font-family: 'AvantGarde Bk BT';

  src: url(../fonts/AvantGarde%20Bk%20BT.ttf);

}



a {

	text-decoration: none;

}



.replace {

	display: block;

	background: transparent no-repeat left top;

	text-indent: -9999px;

	overflow: hidden;

	font-size: 0;

	line-height: 0;

}





/*Layout*/

html, body {
	background-color: #FBF8FF;
	font-family: "AvantGarde Bk BT";
	font-size: 12px;
	color: #7F7F7F;
	overflow-x: hidden;
}



html {

	overflow-y:scroll;

}


header {

	position:relative;

	width: 100%;

	padding: 28px 0 10px 0;

	font-family:"AvantGarde Bk BT";

}



header li a {

	font-size:16px;

	letter-spacing:1px;

	text-transform:uppercase;

	text-decoration:none;

}



header li a.active {

	color:#25aad9;

}

#logo, #inner {
	width: 100%;
	text-align: center;
}

#logo {
	margin-top: 20px;
}


#inner {
	line-height: 1.6em;
	font-size: 13px;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 1px;
	margin-top: 20px;
	position: relative;
	z-index: 890;
	left:0 !important;
}

nav li {

	display: inline-block;
	padding-inline: 20px;

}




h15 {
	width: 120px;
	display:block;
	margin-left: auto;
	margin-right: auto;

}



h15 a.replace {

	width: 120px;

	height: 120px;

	background-image:url(../img/GeoffCiccarelli_Logo_2023_Small.png);

}



hr {

	margin:0;

	height: 3px;

	border: none;

	background: transparent url(../img/dottedLine.png) repeat-x left top;

}



nav#menu {

	float:right;

	display: inline-block;

	padding: 50px 10px 0 10px;

}



nav#menu li {

	display: inline-block;

	padding: 0 10px 0 0;

}



nav#menu li #buttonImg1 {

	background:url(../img/Btn_Youtube_R.png);

}

nav#menu li #buttonImg2 {

	background:url(../img/Btn_Zerply_R.png);

}

nav#menu li #buttonImg3 {

	background:url(../img/Btn_Vimeo_R.png);

}

nav#menu li #buttonImg4 {

	background:url(../img/Btn_Twitter_R.png);

}

nav#menu li #buttonImg5 {

	background:url(../img/Btn_Email_R.png);

}



nav#menu li #buttonImg6 {

	background:url(../img/Btn_Insta_R.png);

}



#bannerContainer {

	padding: 30px;

	overflow:hidden;

}





.slide:nth-child(1) {

	background-image:url(../img/image-1.png);

	height:362px;

	width:696px;

}



.slide:nth-child(2) {

	background-image:url(../img/image-1.png);

	height:362px;

	width:696px;

}





#pages {

	width:138px;

	height: 18px;

	margin: 5px auto 0 auto;

}



.bullet {

	background:url(../img/page-off.png) center center no-repeat;

	display: block;

	width: 18px;

	height: 18px;

	margin: 0;

	margin-right: 5px;

	float: left;

}



#navArrowNext {

	float: right;

	z-index:2000;

	margin-top:30px;

	margin-left: 10px;

	margin-right: 30px;

	opacity: .8;

}







#navArrowPrev {
	float: left;
	z-index: 2000;
	margin-top: 30px;
	margin-left: 30px;
	margin-right: 10px;
	opacity: .8;
}





div.slide {

    width: 696px;

    height: 362px;

    float: left;

    border:1px solid red;

    text-align: center;

    position: relative;



}











	div.slide div {
		width: 696px;
		height: 80px;
		padding: 10px;
		text-align: left;
		color: #FFFFFF;
		display: none;
		position: absolute;
		bottom: 0px;
		background-color: #25aad9;
	}





div.slide div h4 {

	padding-right:10px;

	font-size:24px;

}



div.slide div p {

	font-size:16px;

	padding-right:20px;

	padding-left:10px;

}



/*Illustration Page */



#gallery {

	padding-left:0px;

	padding-right: 40px;

	padding-top: 20px;

}



#gallery div {

	position:absolute;

	transform: translateX(-50%) translateY(-50%);

	display:inline-block;

}



#animGallery {

	padding-left:0px;

	padding-right: 40px;

	padding-top: 20px;

	display:inline-block;

	float:left;

}



#animGallery div {

	position:absolute;

	transform: translateX(-50%) translateY(-50%);

	display:inline-block;

	cursor:pointer;

}



.image {

	position:relative;

	widows:100%;

}



#gallery div img {

	 -webkit-transition:.2s -webkit-filter linear;

    -moz-transition:all .2s -webkit-filter linear;

    -ms-transition:all .2s -webkit-filter linear;

    -o-transition:all .2s -webkit-filter linear;

    transition:all .2s -webkit-filter linear;



	-webkit-filter:grayscale(80%);

    -moz-filter:grayscale(80%);

    -ms-filter:grayscale(80%);

    -o-filter:grayscale(80%);

    filter:grayscale(80%);

}



#gallery div img:hover {

	-webkit-filter:grayscale(0%);

    -moz-filter:grayscale(0%);

    -ms-filter:grayscale(0%);

    -o-filter:grayscale(0%);

    filter:grayscale(0%);

}



#featuredVid {

	padding-left:40px;

	padding-right:40px;

	padding-bottom:40px;

	display:inline-block;

}







	#featuredVid h4 {
		font-size: 24px;
		color: #25aad9;
	}





#featuredVid p {

	font-size: 30px;

	display:block;

	clear:both;

}





#featuredVid div{

	padding-top: 20px;

}





.caption {

	color: #fff;

    font-size: 1.4em;

    background: #96c42e;

    padding: 8px 8px 10px 8px;

    position: absolute;

    display: block;

    top:0px;

    left:auto;

    right:0px;

    margin-top: -8px;

    margin-right: -10px;

    -moz-transform: rotate(8deg);

    -webkit-transform: rotate(8deg);

    -ms-transform: rotate(8deg);

    z-index:100;

}







#aboutContainer {
	padding: 10px 10px 10px 10px;

	margin-left: 25%;
	margin-right: 25%;
}







	#aboutContainer h4 {
		font-size: 28px;
		color: #25aad9;
	}







	#aboutContainer p2 {
		font-size: 20px;
		color: #25aad9;
		text-align: left;
	}



#aboutContainer p {

	font-size: 14px;

}



#imageRow {

	display:inline-block;

	align:center;

}



/*Game Page*/





.text-section {

    padding: 0 10%;

}





div {

    display: block;

}

body {

    padding: 0;

    margin: 0;

    font-family: 'AvantGarde Bk BT';

    src: url(../fonts/AvantGarde%20Bk%20BT.ttf);

    font-size: 18px;

    color: #333333;

    -webkit-font-smoothing: antialiased;

    letter-spacing: 1px;

    height: 100%;

}



.entryRed {

	background-color: #F26445;

}



.entryRed h3 {

	font-size:40px;

	color:#EFE4B2;

}



.entryRed p {

    display: block;

	text-align:center;

	font-size:25px;

	color:#0A2648;

    -webkit-margin-before: 1em;

    -webkit-margin-after: 1em;

    -webkit-margin-start: 0px;

    -webkit-margin-end: 0px;

}



.entryPurple {

	background-color: #855487;

}



.entryPurple h3 {

	font-size:40px;

	color:#EFE4B2;

}



.entryPurple p {

    display: block;

	text-align:center;

	font-size:25px;

	color:#EFE4B2;

    -webkit-margin-before: 1em;

    -webkit-margin-after: 1em;

    -webkit-margin-start: 0px;

    -webkit-margin-end: 0px;

}







.entry h3 {
	font-size: 40px;
	color: #25aad9;
}



.entry p {

    display: block;

	font-size:25px;

    -webkit-margin-before: 1em;

    -webkit-margin-after: 1em;

    -webkit-margin-start: 0px;

    -webkit-margin-end: 0px;

}



.gameImg {

	position:relative;

	text-align:center;

}



.gameImg img {

	display:block;

	margin:0 auto;

	height:auto;

	width:auto;

	max-width: 100%;

	background-size:cover;

}



.uk-grid:before {

	content:" ";

	display: table;

}



#softwareList {

	text-align: justify;

	padding: 5px 80px 5px 80px;

}



span{

  width:100%;

  display:inline-block;

}



#animBar video {

  pointer-events: none;

		max-width: 19%;

}



#animBar {

	text-align: center;

	display: inline-block !important;

}



#indexGallery {

	text-align: center;

}



#indexGallery img {

	max-width: 10% !important;

	padding: 10px;

}



#AnimationGallery, #stillsGallery {

	text-align: center;

}


#stillsGallery img {

	max-width: 48% !important;

	padding: 10px;

}



#stillsGallery video {

	max-width: 48% !important;

	padding: 10px;

}



.galleryImage {

	position: relative;

   width: 100%; /* for IE 6 */

	 display: inline;

}







h20 {
	position: absolute;
	padding-top: 40%;
	left: 0;
	width: 100%;
	opacity: 0;
	font-size: 28px;
	color: #25aad9;
}







h30 {
	position: absolute;
	padding-top: 20%;
	left: 0;
	width: 100%;
	opacity: 0;
	font-size: 48px;
	color: #25aad9;
}