* {
	padding: 0;
	margin: 0;
	border: 0;
}

html {
	height: 100%;
	background-color: #434343;
}

body {
	background-color: #e6e6e6;
	font: 94% "Open Sans", sans-serif;
	color: #4c4c4c;
	margin: auto;
}

/* p { clear: both; } */

h1, h2, h3, h4, h5
{
	font: "Open Sans Light", sans-serif;
	font-weight: 300;
}

h1 { font-size: 3em; color: #00b2ff; }
h2 { font-size: 2.5em; color: #00b2ff; }
h3 { font-size: 1.5em; color: #00b2ff; }
h4 { font-size: 1.5em; font-weight: 400; }
h5 { font-size: 1.2em; color: #555555; }


a, a:visited { color: #ff7c7b; text-decoration: none; }
p a:hover, .sgCrumb a:hover { border-bottom: 2px solid #ff7c7b; }
p a:active, .sgCrumb a:active {
	color: #00b2ff;
	border-bottom: 2px solid #00b2ff;
}

/* .sgCrumb a:hover { color: #00b2ff; } */

::selection { color: white;	background: #ff7c7b; }
::-moz-selection { color: white;	background: #ff7c7b; }

.clear, .sgFoot { clear: both; }
.small { font-size: 10px; }
.floatRight { float: right; }
.floatLeft { float: left; }
.noPadding { padding: 0 !important; }

.arrowLeft, .arrowRight {
	background: transparent url(img/arrowLeft.svg) center center no-repeat;
	background-size: 0.6em;
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.arrowRight {
	background-image: url(img/arrowRight.svg);
}

/* header */

#header {
	max-width: 1520px;
	/* min-width: 522px; */
	margin: auto;
	padding-top: 25px;
}

#headerBg {
	width: 100%;
	min-height: 160px;
	background: #434343 url(img/header_bg.png) center top repeat;
	/* box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25); */
}

#velebnyNet {
	float: right;
	position: relative;
	z-index: 1;
	font-size: 1.5em;
	top: -5px;
	max-width: 97vw;
}

#velebnyNetNet {
	color: #ff7c7b;
}

#velebnyNet a {
	color: #00b2ff;
}

#velebnyNetDessert a {
	float: right;
	position: relative;
	top: 18px;
	padding: 0 25px 0 28px;
	z-index: 3;
}

#nav {
	width: 100%;
	display: block;
	position: relative;
	top: -25px;
	float: left;
	border-top: 1px solid #00b2ff;
	z-index: 2;
	padding-left: 5px;
}

#nav ul {
	list-style: none;
	display: block;
	float: left;
}

#nav ul li {
	margin: 0px 15px;
	display: block;
	float: left;
	overflow: hidden;
}

#nav ul li a {
	display: block;
	float: left;
	color: #00b2ff;
	font: 1.9em "Open Sans", sans-serif;
	font-weight: 300;
	text-transform: lowercase;
	position: relative;
	top: -9px;
}

#nav ul li a:hover {
	color: #ff7c7b;
}

.sgContainer {
	max-width: 1500px;
	min-height: 600px;
	/* min-width: 502px; */
	background-color: #f5f5f5;
	padding: 10px;
	padding-bottom: 40px;
	margin: auto;
	overflow: hidden;
}

.sgContainerFullSize {
	min-height: auto;
}

.sgContainer > h2 { padding: 10px 5px; }
.sgContainer > p { padding: 5px; }

.sgContent {
	/* clear: both; */
}

#sgFooter {
	/* min-width: 522px; */

	width: 100%;
	min-height: 80px;
	background: #424242 url("img/header_bg.png") repeat scroll center top;
}

#sgFooter a[rel="license"] {
	display: block;
	margin: auto;
	position: relative;
	top: 25px;
	width: 88px;
	opacity: 0.4;
	transition: all 0.125s ease-out;
}

#sgFooter a[rel="license"]:hover {
	opacity: 1;
}

#sgNoticesTop {
	font-size: 0.85em;
	margin: -15px 5px 55px;
}

.sgNotice {
	float: left;
	/* max-width: 50%; */
}

.sgCrumb {
	float: right;
	/* max-width: 50%; */
}

.sgViewThumbnailsLink {
	float: right;
}

.sgImageWrapper {
	clear: both;
}

.sgImage {
	display: block;
	width: 100%;
	margin: 0 auto;
}

.sgImageWrapperFullsize {
	margin-top: -40px;
}

.sgImageWrapperFullsize .sgImage {
	width: auto;
	max-height: calc(100vh - 170px);
	min-height: 720px;
}

.sgImageWrapperFullsize .sgImageBox a.next, .sgImageWrapperFullsize .sgImageBox a.prev {
	height: calc(100% - 18px);
}

.sgImageBoxFullsize {
	overflow-x: auto;
	overflow-y: hidden;
}

.sgDetailsList {
	margin: 10px 0 30px;
	padding: 5px;
}

.sgDetailsList h3 {
	float: left;
	font-weight: 400;
	padding-right: 2.5px;
}

.sgDetailsList h3 a {
	padding: 0 5px;
	margin-left: -5px;
	transition: all 0.125s ease-out;
}

.sgDetailsList h3 a:hover {
	border-radius: 5px;
	text-decoration: none;
	color: white;
	background-color: #ff7c7b;
}

.sgDetailsList h3 a:active {
	background: #00b2ff;
	color: white;
	border-color: transparent;
}

.sgDescription p {
	font-size: 1.5em;
	font-weight: 300;
	/* float: left; */
	margin-right: 10px;
}

.sgDescription a {
	border-bottom: 2px solid #ff7c7b;
}

/* exif */

.exif dd, .exif dt { padding-right: 5px; }
.exif span { padding: 0 5px; border-right: 2px solid #DADADA; line-height: 1em; }
.exif span:last-child { border: 0; }
.exif dd { color: #898989; }

.exif {
	font-size: 0.8em;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	float: right;
	width: 75%;
	clear: both;
	margin-top: 7px;

	display: -webkit-flex;
	-webkit-flex-flow: row;
	-webkit-flex-flow: wrap;
	-webkit-justify-content: flex-end;
}
.exifDate {
	font-size: 1.5em;
	font-weight: 300;
	float: right;
}


/* inner controls */

/*
.sgFullsizeLink { clear: left; }
.sgGoUpLink, .sgTabDown, .sgZoomOutLink { float: right; }
.sgGoUpLinkGallery { margin-top: 20px; }

.sgSlideshowLink a { display: block; background: transparent url(img/slideshow_link.gif) top left no-repeat; }
.sgFullsizeLink a { display: block; background: transparent url(img/fullsize_link.gif) top left no-repeat; }
.sgGoUpLink a { display: block; background: transparent url(img/goup_link.gif) top left no-repeat; }
.sgZoomOutLink a { display: block; background: transparent url(img/zoomout_link.gif) top left no-repeat; }
.sgSlideshowLink a:hover, .sgFullsizeLink a:hover, .sgGoUpLink a:hover, .sgZoomOutLink a:hover { background-position: 0 -11px; }
*/

.sgVideoLink {
	position: absolute;
	width: 90px;
	left: 50%;
	margin-left: -45px;
	background: transparent url(img/bg_stripes.gif) top left repeat;
}

.sgVideoLink a, .sgVideoLink a:visited {
	display: block;
	width: 80px;
	height: 30px;
	line-height: 30px;
	margin: 5px;
	background: #bd0000 url(img/play_video.gif) top left no-repeat;
	text-indent: 35px;
	font-size: 16px;
	color: #fff6e8;
}

.sgVideoLink:hover { background: transparent url(img/bg_stripes_o.gif) top left repeat; }
.sgVideoLink a:hover { text-decoration: none; }

.videoPlaying .sgVideoLink { display: none; } /* hides button when playing video */

.mp4Video {
	margin: auto;
	position: relative;
	z-index: 4;
}

.mp4Video video {
	width: 100%;
}

.playButton {
	box-sizing: initial !important;
	display: block;
	position: absolute;
	width: 109px;
	height: 109px;
	top: calc(50% - 61px);
	left: calc(50% - 60px);
	z-index: 10;
	border-radius: 50%;
	border: 5px solid #00b2ff;
	background: #00b2ff url(img/playButton.svg) 43px center no-repeat;
	background-size: 35px;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
	text-indent: 200%;
	white-space: nowrap;
	overflow: hidden;
	transition: all 0.2s ease-out;
}

.playButton:hover {
	cursor: pointer;
	border: 5px solid white !important;
}

.playButtonClick {
	transform: scale(1.5);
}

.videoOverlay {
	/*! background-color: tomato; */
	display: block;
	width: 100%;
	height: calc(100% - 50px);
	position: absolute;
}

/* navigation thumbnails */

.sgPreview {
	margin: -10px 5px 5px;
	float: right;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-end;
	line-height: 1.8em;
	max-width: 97vw;

	display: -webkit-flex;
	-webkit-flex-flow: row;
	-webkit-flex-flow: nowrap;
	-webkit-align-items: space-between;
	-webkit-justify-content: flex-end;
}

.sgPreview a {
	display: block;
	color: #ff7c7b;
	transition: all 0.125s ease-out;
	overflow: hidden;
	background-color: white;
	border-radius: 3px;
	text-align: center;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
	margin-left: 15px;
}

.sgPreview a:hover {
	color: #00b2ff;
}

.sgPreview a:hover .arrowLeft {
	background-image: url(img/arrowLeftBlue.svg);
}

.sgPreview a:hover .arrowRight {
	background-image: url(img/arrowRightBlue.svg);
}

.sgPreview a:active {
	color: white;
	background-color: #00b2ff;
}

.sgPreview a:hover img {
	transform:scale(1.1);
	opacity: 0.75;
}

.sgPreview a:hover .sgThumbPreviewHighlight {
	background-color: #00b2ff;
}

.sgPreview .arrowLeft, .sgPreview .arrowRight {
	font-size: 1.3em;
	top: 1px;
	position: relative;
}

.sgPreview .arrowLeft {
	background-image: url(img/arrowLeftPink.svg);
}

.sgPreview .arrowRight {
	background-image: url(img/arrowRightPink.svg);
}

.sgThumbPreviewHighlight {
	line-height: 10px;
	overflow: hidden;
	transition: all 0.1s ease-out;
}

.sgThumbPreviewHighlight:hover { background-color: #00b2ff; }

.sgPreview img {
	transition: all 0.1s ease-out;
}

.sgPreview img:hover {
	transform:scale(1.1);
	opacity: 0.75;
}

/* in-image rollovers */

.sgImageBox {
	position: relative;
	overflow: hidden;
}

.sgImageBox a.next, .sgImageBox a.prev {
	position: absolute;
	top: 0;
	opacity: 0;
	width: 20%;
	max-width: 300px;
	height: 100%;
	font-size: 7em;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	background-image:
	linear-gradient(
		to right,
		rgba(0, 178, 255, 0.25) 5%,
		rgba(0, 178, 255, 0)
	);
	transition: all 0.125s ease-out;

	display: -webkit-flex;
	-webkit-flex-flow: row;
	-webkit-flex-flow: wrap;
	-webkit-align-items: center;
	-webkit-justify-content: center;
}

.sgImageBox a.next {
	right: 0;
	background-image:
	linear-gradient(
		to left,
		rgba(0, 178, 255, 0.25) 5%,
		rgba(0, 178, 255, 0)
	);
}

.sgImageBox a .arrowRight {
	background-image: url(img/arrowRightWhite.svg);
}

.sgImageBox a .arrowLeft {
	background-image: url(img/arrowLeftWhite.svg);
}

.sgImageBox a.next:hover, .sgImageBox a.prev:hover {
	opacity: 1;
	/* font-size: 8em; */
	/* transform:scale(1.1); */
}

/* error */

.error {
	margin: 115px auto;
	display: flex;
	flex-flow: column wrap;
	height: 375px;
	align-content: center;
	justify-content: center;

	display: -webkit-flex;
	/* -webkit-flex-flow: column; */
	/* -webkit-flex-flow: wrap; */
	-webkit-align-content: center;
	-webkit-justify-content: center;
}

.error * {
	color: #898989
}

.error h1 {
	text-align: center;
	font-size: 10em;
	line-height: 1.7em;
	font-weight: 400;
	height: 375px;
	width: 375px;
	margin: 0 40px;
	color: #F5F5F5;
	background: #898989 url(img/crewstrike.gif) 55px 210px no-repeat;
	border-radius: 50%;
}

.error h2 {
	font-size: 5em;
	font-weight: 100;
	margin-top: -2px
}

.error h3 {
	font-size: 2.5em;
	font-weight: 100;
	margin-top: -5px;
	margin-left: 5px;
}

/* google maps */

#map_canvasCont
{
	width: 100%;
	max-height: 50vh;
}

.mapSmall {
	height: 450px;
}

.mapBig {
	height: 843px;
}

#map_canvas
{
	width: 100%;
	height: 100%;
}

.mapButton {
	max-width: 1490px;
	/* min-width: 502px; */
	background-color: #f5f5f5;
	padding: 15px;
	margin: auto;
	margin-top: -40px;
	position: relative;
	z-index: 2;
}

#toggleMapButton {
	position: relative;
	top: 0;
	left: 0;
	width: 90px;
	text-align: center;
	margin-right: 0;
}

/* info balloon */

.gmapInfo {
	width: 270px;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	text-align: center;

	display: -webkit-flex;
	-webkit-flex-flow: row;
	-webkit-flex-flow: wrap;
	-webkit-align-items: center;
	-webkit-justify-content: center;
}

.gmapBut a {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: 3.5em;
	width: 40px;
	height: calc(100% - 80px);
	top: 40px;
	right: 0;
	padding: 0px 10px;

	display: -webkit-flex;
	-webkit-flex-flow: row;
	-webkit-flex-flow: wrap;
	-webkit-justify-content: flex-end;
}

.gmapButPrev a {
	justify-content: flex-start;
	left: 0;
}

.gmapBut .arrowLeft {
	background-image: url(img/arrowLeftPink.svg);
}

.gmapBut a:hover .arrowLeft {
	background-image: url(img/arrowLeftBlue.svg);
}

.gmapBut .arrowRight {
	background-image: url(img/arrowRightPink.svg);
}

.gmapBut a:hover .arrowRight {
	background-image: url(img/arrowRightBlue.svg);
}

.gmapInfoText p:first-of-type {
	margin-top: 10px;
}

.gmapInfoImg {
	margin-top: 10px;
	border-radius: 3px;
	min-height: 100px;
}


/* new styles 2015 */

.infoText {
	padding: 10px;
	margin: 0;
	position: relative;
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: space-between;

	display: -webkit-flex;
	-webkit-flex-flow: row;
	-webkit-flex-flow: wrap;
	-webkit-align-items: flex-start;
	-webkit-justify-content: space-between;
}

.infoText h2 { padding: 5px 5px 10px 5px; }

.infoText p { padding: 5px; }

a.buttonLink, a.buttonLink:visited, a.buttonLinkSmall, a.buttonLinkSmall:visited, a.sgFullsizeLink, a.sgFullsizeLink:visited {
	border-radius: 5px;
	padding: 5px 10px;
	text-decoration: none;
	color: white;
	background-color: #ff7c7b;
	border: 2px solid transparent;
	transition: all 0.125s ease-out;
}

a.buttonLinkSmall, a.buttonLinkSmall:visited {
	margin-left: 5px;
	padding: 0px 5px;
	border-radius: 2.5px;
	background-color: #898989;
}

a.buttonLink:hover, a.buttonLinkSmall:hover, a.sgFullsizeLink:hover {
	color: #ff7c7b;
	background-color: white;
	border: 2px solid #ff7c7b;
}

a.buttonLinkSmall:hover {
	border: 2px solid #898989;
	color: #4c4c4c;
}

a.buttonLink:active, a.buttonLinkSmall:active, a.sgFullsizeLink:active {
	background: #00b2ff;
	color: white;
	border-color: transparent;
}

a.sgFullsizeLink {
	/* float: left;
	margin-top: 5px; */
	padding: 0px 5px !important;
	border-radius: 2.5px !important;
	font-size: 0.95em;
	position: relative;
	top: 5px;
	/* left: 5px; */
}

#aboutPhoto {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	float: right;
	margin: 50px 30px 0 0;
}

#aboutColumn { width: 75%; }

.aboutColumnThumbs { float: left; width: 330px; margin-right: 10px; }

.aboutIcons {width: 360px}

.aboutIcons {
	margin-left: 5px;
}

.aboutIcons a {
	display: block;
	width: 60px;
	height: 60px;
	float: left;
	margin: 15px 10px 0 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 5px;
}

.aboutIcons a:hover { background-position: center !important; }
.aboutIcons a:active { background-position: bottom !important; }

#lnkin { background: transparent url(img/lnkinLogo.png) top center no-repeat; }
#inst { background: transparent url(img/instLogo.png) top center no-repeat; }
#github { background: transparent url(img/githubLogo.png) top center no-repeat; }
#artstn { background: transparent url(img/artstnLogo.png) top center no-repeat; }
#bndcmp { background: transparent url(img/bndcmpLogo.png) top center no-repeat; }

.emailLink {
	font: "Open Sans Light", sans-serif;
	font-weight: 300;
	font-size: 1.5em;
}

.flexContainer {
	max-width: 1350px;
	margin: auto;
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: center;

	display: -webkit-flex;
	-webkit-flex-flow: row;
	-webkit-flex-flow: wrap;
	-webkit-align-items: flex-start;
	-webkit-justify-content: center;
}

.flexItem {
	/* width: 440px; */
	/* min-width: 240px; */
	/* width: 33%;
	flex: auto; */
}

.portfolioThumb {
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
	background-color: #fcfcfc;
	margin: 10px;
	border-radius: 3px;
	overflow: hidden;
	transition: all 0.1s ease-out;
}

.portfolioThumb h3 a {
	color: #4C4C4C;
	font-size: 0.85em;
}

.portfolioThumb h3 a:hover {
	color: #ff7c7b;
}

.portfolioThumb h3 a:active {
	color: #00B2FF;
}

.portfolioThumb img {
	height: 335px;
	transition: all 0.1s ease-out;
}

.aboutThumb { width: 265px; margin: 10px 5px 20px 5px !important; }

.aboutThumb img {
	height: 149px;
	transition: all 0.1s ease-out;
}

.portfolioThumb a img:hover {
	opacity: 0.75;
}

.portfolioThumb:hover {
	transform:scale(1.02);
}

.portfolioThumb:hover a img {
	transform:scale(1.07);
}

.portfolioThumbHighlight {
	display: block;
	line-height: 10px;
	overflow: hidden;
	transition: all 0.1s ease-out;
}

.portfolioThumbHighlight:hover { background-color: #00b2ff; }

.portfolioContainer {
	/* min-height: 600px; */
}

.portfolioContainer p, .portfolioContainer ul, .portfolioThumb h3 {
	padding: 5px;
}

.portfolioContainer ul {
	padding: 0 25px;
}

.portfolioContainer li {
	padding: 3px 0;
}

.portfolioContainer .sgImage {
	margin: 5px auto;
}

.portfolioContainer .sgNotice {
	float: right !important;
	margin: -15px 0;
	font-size: 0.85em;
}

.portfolioContainer .sgContent {
	clear: both;
  padding-top: 15px;
}

.portfolioContainer .flexBreak {
	flex-basis: 100%;
	height: 0;
}

.portfolioColumn {
	width: calc(50% - 75px);
	float: left;
	padding-right: 75px;
}

.portfolioColumnFlex {
	display: flex;
}

.warning {
	display: block;
	text-align: center;
	font-size: 1.2em;
	font-weight: 600;
	border-radius: 5px;
	padding: 10px 20px !important;
	margin: 10px 0 20px !important;
	color: white;
	background-color: #ff3c3b;
}

/* albums */

.sgGallery h3 {	font-size: 1.2em; }
.sgGallery h3 a {	color: #00b2ff; }
.sgGallery h3 a:hover {	color: #ff7c7b; }

.sgGalleryFlexContainer {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	/* justify-content: flex-start; */
	justify-content: center;
	margin-top: -32px;
	/* padding-left: 10px; */
	padding: 0 2px;
	clear: both;

	display: -webkit-flex;
	-webkit-flex-flow: row;
	-webkit-flex-flow: wrap;
	-webkit-align-items: center;
	-webkit-justify-content: center;
}

.sgGallery {
	/* margin: 8px; */
	margin: 21px 17px;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
	background-color: #fcfcfc;
	border-radius: 3px;

	flex: auto;
	max-width: 350px;
}

.sgGalleryDesc {
	padding: 10px;
	margin: 0;
	position: relative;
}

.sgGallery img {
	/* width: 265px */
	width: 100%;
}

.sgGallery > a {
	/* max-height: 220px; */
}

.sgGallery p {
	padding-top: 5px;
}

.sgAlbum {
	/* margin: 10px 8px; */
	margin: 7px;
	flex: auto;
	/*
	image 200x150:
	*/
	max-width: 307px;
	max-height: 200px;

	/*
	image 120x90:

	max-width: 150px;
	max-height: 120px;
	*/
}
.sgAlbum img {
	/* width: 216px; */
	/* height: 150px; */
	/* width: auto; */
	width: 100%;
	border-radius: 3px;
}

.sgAlbum a {
	/* max-width: 216px; */
}

.sgViewThumbnailsButton a {
	position: absolute;
	right: 10px;
	top: 12px;
	font-size: 0.85em;
	min-width: 0;
	height: 1.45em;
	color: white;
	background-color: #d9d9d9;
	border-radius: 2.5px;
	padding: 2px 6px;
	white-space: nowrap;
	overflow: hidden;
	transition: all 0.125s ease-out;
}

.sgViewThumbnailsButton a:hover {
	min-width: 119px;
	background-color: #898989;
	color: white;
}

.sgViewThumbnailsButton a:active {
	background-color: #00b2ff;
}

.sgViewThumbnailsButton span {
	display: block;
	overflow: hidden;
	transition: all 0.125s ease-out;
	position: relative;
}

.sgViewThumbnailsNumber {
	top: 0;
}

.sgViewThumbnailsText {
	width: 0px;
	top: 0;
}

.sgViewThumbnailsButton a:hover .sgViewThumbnailsNumber {
	top: -1.45em;
}

.sgViewThumbnailsButton a:hover .sgViewThumbnailsText {
	width: 119px;
	top: -1.45em;
}

/* generic hover and highlight effect */
/* applty to parent div > a > img */

.thumbHighlight {
	overflow: hidden;
}
.thumbHighlight, .thumbHighlight * {
	transition: all 0.1s ease-out;
}

.thumbHighlight > a {
	line-height: 0;
	display: block;
	overflow: hidden;
}

.thumbHighlight > a:hover {
	background: #00b2ff;
}

.thumbHighlight > a > img:hover {
	opacity: 0.75;
}

.thumbHighlight:hover, .thumbHighlight:hover > a > img {
	transform:scale(1.05);
}