/*setting a custom font and calling it 'cf' to be used later in css*/
font-family: 'Avenir', 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;

/*setting php variables for the colors to be used throughout the site*/




/****home page 'static' background/s and photogallery******/

* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	/*background: #b4b4b4;*/
}

.clear::after {
	content: "";
	display: table;
	clear: both;
}
/*intro-contaier is the main home 'splash screen'*/
.intro_container {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background: url(/images/mybackgrounds/17.jpg)no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align: center;
}
.gallerytop_container {
	margin: 0;
	padding: 0;
	height: 80%;
	width: 100%;
	background: url("/images/photo/californiadotheader.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align: center;
}
.landing-wrapper {
	margin: 0;
	padding: 0;
    height: 80%;
}
.landing {
    height: 100%;
    width: 100%;
    position: fixed;
}

.social_container {
	width: 100%;
	position: absolute;
	bottom: 10%;
	text-align: center;
	z-index: 99;
	
}

.arrow_container {
	width: 100%;
	position: absolute;
	bottom: 6%;
	text-align: center;
	z-index: 99;
}
.arrow a {
	display: inline-block;
	width: 60px;
	height: 60px;
	background: url('/images/resources/whitearrow.png') no-repeat center;
	opacity: 0;
	/* make things invisible upon start */
	-webkit-animation: fadeIn ease-in 1;
	/* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation: fadeIn ease-in 1;
	animation: fadeIn ease-in 1;
	-webkit-animation-fill-mode: forwards;
	/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	animation-duration: 2s;
	z-index: 99;
}
.arrow a:hover {}

/*photogrid contains the photos with the links to photo gallery*/
.photogrid {
	width: 100%;
	margin: 0 auto 0 auto;
	z-index: 99;
	position: relative;
	background-color: rgba(34,34,34,0.75);
	overflow: auto;
}

/*other content to fill screen overlay background*/
.overlay_other_content {
	width: 100%;
	height: 50%;
	margin: 0 auto 0 auto;
	z-index: 99;
	position: relative;
	/*background-color: rgba(34,34,34,0.75);*/
}


/*an overlay of a map, not used at the moment*/
.overlay_contentone {
	position: relative;
	top: 0px;
	width: 100%;
	height: 100%;
	background: white;
	margin: 0px auto 0 auto;
	z-index: 98;
	position: relative;
	background: url('https://dalzell.co/images/resources/worldmap.png') no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align: center;
}
/*cbackground-ontentone is the same background as the splash, giving illusion that it's the same background*/
/*change the background to have it scroll onto different image*/
.background_contentone {
	width: 100%;
	height: 200px;
	margin: 0 auto 0 auto; /*was -50px*/
	z-index: 98;
	position: relative;
	background: url(/images/mybackgrounds/17.jpg)no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align: center;
	overflow: hidden;
}
.background_gallerybottom {
	width: 100%;
	height: 100%;
	margin: -33% auto 0 auto; /*was -50px*/
	z-index: 98;
	position: relative;
	background: url("/images/photo/californiabottom.jpg")no-repeat center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align: center;
}
/*footer*/
.overlay_footer {
	width: 100%;
	height: 70px;
	margin: 0px auto 0 auto;
	z-index: 98;
	position: relative;
	background: #181818;
	text-align: center;
}


/*css3 images screen photo layout (the old photo.php - the big picture links to the juicebox albums used on frag)*/

.grid {
	padding: 20px 20px 100px 20px;
	max-width: 1024px;
	/*was 800*/
	margin: 0 auto;
	list-style: none;
	text-align: center;
}
.grid li {
	display: inline-block;
	width: 300px;
	/*440/was 800*/
	margin: 0;
	padding: 20px;
	text-align: left;
	position: relative;
}
.grid figure {
	margin: 0;
	position: relative;
}
.grid figure img {
	max-width: 100%;
	display: block;
	position: relative;
}
.grid figcaption {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	/*background: #2c3f52;*/
	background: #222222;
	color: #b7b7b7;
	font-size: 1em;
}
.grid figcaption h3 {
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-size: 1.2em;
}
.grid figcaption span:before {
	/*content: 'by ';*/
}
.grid figcaption a {
	text-align: center;
	padding: 5px 10px;
	border-radius: 2px;
	display: inline-block;
	background: #16a8c7;
	color: #ffffff;
	text-decoration: none;
	font-size: 1em;
	-webkit-appearance: none;
}
.grid figcaption a:hover {
	background: #008FAE;
}

/* css3 photo Caption Style 4 */


/*.cs-style-4 li {
	-webkit-perspective: 1700px;
	-moz-perspective: 1700px;
	perspective: 1700px;
	-webkit-perspective-origin: 0 50%;
	-moz-perspective-origin: 0 50%;
	perspective-origin: 0 50%;
}

.cs-style-4 figure {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}*/

.cs-style-4 figure>div {
	overflow: hidden;
}
.cs-style-4 figure img {
	width: 600px;
	-webkit-transition: -webkit-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	transition: transform 0.5s;
}
.no-touch .cs-style-4 figure:hover img, .cs-style-4 figure.cs-hover img {
	-webkit-transform: translateX(25%);
	-moz-transform: translateX(25%);
	-ms-transform: translateX(25%);
	transform: translateX(25%);
}
.cs-style-4 figcaption {
	height: 100%;
	width: 80%;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s 0.5s;
	-moz-transition: -moz-transform 0.5s, opacity 0.5s 0.5s;
	transition: transform 0.5s, opacity 0.5s 0.5s;
}
.no-touch .cs-style-4 figure:hover figcaption, .cs-style-4 figure.cs-hover figcaption {
	opacity: 1;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-webkit-transition: -webkit-transform 0.6s, opacity 0.1s;
	-moz-transition: -moz-transform 0.6s, opacity 0.1s;
	transition: transform 0.6s, opacity 0.1s;
}
.cs-style-4 figcaption a {
	position: absolute;
	bottom: 20px;
	right: 20px;
}
@media screen and (max-width: 800px) {
	.grid {
		padding: 10px 10px 100px 10px;
	}
	.grid li {
		width: 100%;
		min-width: 300px;
	}
}
*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}




/*FIREPAD d.co/e*/

.firepad {
	width: 700px;
	height: 450px;
	background-color: rgba(34,34,34,0.75);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 3px;
	-moz-box-shadow: 0px 0px 20px 2px #000;
	-webkit-box-shadow: 0px 0px 20px 2px #000;
	box-shadow: 0px 0px 20px 2px #000;
}
a.powered-by-firepad {
	display: none;
}

/* Note: CodeMirror applies its own styles which can be customized in the same way.
   To apply a background to the entire editor, we need to also apply it to CodeMirror. */

.CodeMirror {
	background-color: rgba(235, 235, 235, 0.0);
	color: #ffffff;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 3px;
}

/*********************************/


/* everything else */


/*hides scrollbar*/

::-webkit-scrollbar {
	width: 0 !important
}

/*main style and set background to session variable*/
html {
	/*background-image: url("/images/backgrounds/rotate.php");*/
	/*background-image: ;*/
	background-image: url(/images/mybackgrounds/17.jpg);
	/*background-color: #585858;*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
    font-family: 'Avenir', 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
	text-transform: lowercase;
	outline: 0;
}
body, ul, li, h1, h2, span {
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 2em;
	color: #ffffff;
}
h2 {
	color: #16a8c7;
}
h3 {
	color: #b7b7b7;
}
h3 a {
	color: inherit;
	text-decoration: none;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
h3 a:hover {
	color: #bf1652;
}
h4 {
	font-size: 6em;
	color: #ffffff;
	margin: -70px;
	padding: 0;
}

p {
	color: #ffffff;
	text-align: center;
}

.truecenter {
	width: 300px;
	height: 300px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -150px;
	margin-top: -110px;
}
.middle {
	margin-left: auto;
	margin-right: auto;
}
.center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	width: 500px;
}

/* This parent can be any width and height */

.experblock {
	text-align: center;
	height: 100%;
	width: 100%;
}

/* The ghost, nudged to maintain perfect centering */

.experblock:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.25em;
	/* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */

.centered {
	display: inline-block;
	vertical-align: middle;
	width: 600px;
}
.transdiv {
	width: 600px;
	padding: 10px 10px;
	color: #16a8c7;
	background-color: rgba(34,34,34,0.75);
	margin-top: 50px;
	margin-bottom: 50px;
	border: 1px solid #222222;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 3px;
	-moz-box-shadow: 0px 0px 20px 2px #000;
	-webkit-box-shadow: 0px 0px 20px 2px #000;
	box-shadow: 0px 0px 20px 2px #000;
}



/*Home logo*/

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
		opacity: 1\9;
		/* IE9 only */
	}
	to {
		opacity: 1;
	}
}
@-moz-keyframes fadeIn {
	from {
		opacity: 0;
		opacity: 1\9;
		/* IE9 only */
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
		opacity: 1\9;
		/* IE9 only */
	}
	to {
		opacity: 1;
	}
}
.homelogo {
	height: 220px;
	opacity: 0;
	/* make things invisible upon start */
	-webkit-animation: fadeIn ease-in 1;
	/* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation: fadeIn ease-in 1;
	animation: fadeIn ease-in 1;
	-webkit-animation-fill-mode: forwards;
	/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-duration: 1.5s;
	-moz-animation-duration: 1.5s;
	animation-duration: 1.5s;
}

/*social white to colour Hover image changer*/


img.whitelogo
{
	filter: brightness(0%) invert(100%);
	    	-webkit-backface-visibility: hidden; /* Fix for transition flickering */
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-o-transition: all .5s linear;
	transition: all .5s linear;
	opacity: 0;
	/* make things invisible upon start */
	-webkit-animation: fadeIn ease-in 1;
	/* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation: fadeIn ease-in 1;
	animation: fadeIn ease-in 1;
	-webkit-animation-fill-mode: forwards;
	/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	animation-duration: 2s;
    
}

img.whitelogo:hover {
    filter: none;
    	-webkit-backface-visibility: hidden; /* Fix for transition flickering */
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-o-transition: all .5s linear;
	transition: all .5s linear;
}

/*image preloader*/

div#preload {
	display: none;
}


/*animated arrow*/

.bounce {
	z-index: 99;
	animation: bounce 6s infinite;
	-webkit-animation: bounce 6s infinite;
	-moz-animation: bounce 6s infinite;
	-o-animation: bounce 6s infinite;
}
@-webkit-keyframes bounce {
	0%, 80%, 100% {
		-webkit-transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-30px);
	}
}
@-moz-keyframes bounce {
	0%, 80%, 100% {
		-webkit-transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-30px);
	}
}
@-o-keyframes bounce {
	0%, 80%, 100% {
		-webkit-transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-30px);
	}
}
@keyframes bounce {
	0%, 80%, 100% {
		-webkit-transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-30px);
	}
}

/*about me section that sits within the overlay 'section'*/

.aboutpiccont {
	width: 50%;
	height: 100%;
	float: left;
	/*background: url("/images/resources/menc2.png")no-repeat center center;*/

}
.img-circle{
	display: block;
    margin: auto;
    height:100%;}

.abouttext {
	width: 50%;
	height: 100%;
	background-color: #383838;
	float: right;
	text-align: center;
}

.myinfo {
	padding: 9% 0%;
	width: 50%;
	height: 100%;
	float: left;
}
.mygear {
	padding: 8% 0%;
	width: 50%;
	height: 100%;
	float: right;
}
.socialcenter {
	padding: 15% 0%;
	text-align: center;
}
.footer {
	padding: .4% 2%;
	text-align: center;
}

/******Style the responsive photogrid on the index/galleries that sits within the photogrid 'section'**********/


#rig {
	max-width: 100%;
	margin: 0 auto;
	/*center aligned*/
	padding: 0;
	font-size: 0;
	/* Remember to change it back to normal font size if have captions */
	list-style: none;
}
#rig li {
	display: inline-block;
	/*display: inline;*/
	/*for IE6 - IE7*/
	width: 25%;
	vertical-align: middle;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* The wrapper for each item */

.rig-cell {
	/*margin:12px;
    box-shadow:0 0 6px rgba(0,0,0,0.3);*/
	display: block;
	position: relative;
	overflow: hidden;
}

/* If have the image layer */

.rig-img {
	display: block;
	width: 100%;
	height: auto;
	border: none;
	-webkit-filter: brightness(100%); /* Safari */
    filter: brightness(100%);
	transform: scale(1);
	transition: all 1s;
}
#rig li:hover .rig-img {
	transform: scale(1.05);
	-webkit-filter: brightness(75%); /* Safari */
    filter: brightness(75%);
}

/* If have the overlay layer */

.rig-overlay {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	background: #bf1652;
	background-size: 50px 50px;
	opacity: 0.0;
	filter: alpha(opacity=0);
	/*For IE6 - IE8*/
	transition: all 0.6s;
}
#rig li:hover .rig-overlay {
	opacity: 0;/*change this to one to make it show on hover*/
}

/* If have captions */

.rig-text {
	display: block;
	padding: 0 20px;
	box-sizing: border-box;
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 40px; 
	font-size: 5vw;
	top: 28%;
	color: white;
    text-shadow: 2px 2px 4px #000000;
	opacity: 1;
	filter: alpha(opacity=0);
	/*For older IE*/
	/*transform: translateY(-20px);*/
	transition: all .3s;
}
#rig li:hover .rig-text {
	transform: translateY(0px);
	opacity: 1;
}
@media (max-width: 9000px) {
	#rig li {
		width: 25%;
	}
}
@media (max-width: 700px) {
	#rig li {
		width: 33.33%;
	}
}
@media (max-width: 550px) {
	#rig li {
		width: 50%;
	}
}

/*****************END PHOTOGRID*****************************/






/*image grid for about me - work in progress*/

#rig2 {
	max-width: 100%;
	margin: 0 auto;
	/*center aligned*/
	padding: 0;
	font-size: 0;
	/* Remember to change it back to normal font size if have captions */
	list-style: none;
}
#rig2 li {
	display: inline-block;
	/*display: inline;*/
	/*for IE6 - IE7*/
	width: 50%;
	vertical-align: middle;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* The wrapper for each item */

.rig2-cell {
	/*margin:12px;
    box-shadow:0 0 6px rgba(0,0,0,0.3);*/
	display: block;
	position: relative;
	overflow: hidden;
}

/* If have the image layer */

.rig2-img {
	display: block;
	width: 100%;
	height: 25%;
	height: auto;
	border: none;
	transform: scale(1);
	transition: all 1s;
}
#rig2 li:hover .rig-img {
	transform: scale(1.05);
}

/* If have the overlay layer */

.rig2-overlay {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	background: #16a8c7;
	background-size: 50px 50px;
	opacity: 0;
	filter: alpha(opacity=0);
	/*For IE6 - IE8*/
	transition: all 0.6s;
}
#rig2 li:hover .rig-overlay {
	opacity: 0.8;
}

/* If have captions */

.rig2-text {
	display: block;
	padding: 0 30px;
	box-sizing: border-box;
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
	text-transform: capitalize;
	font-size: 18px;
	font-weight: bold;
	font-family: 'Oswald', sans-serif;
	font-weight: normal!important;
	top: 40%;
	color: white;
	opacity: 0;
	filter: alpha(opacity=0);
	/*For older IE*/
	transform: translateY(-20px);
	transition: all .3s;
}
#rig2 li:hover .rig-text {
	transform: translateY(0px);
	opacity: 0.9;
}
@media (max-width: 9000px) {
	#rig2 li {
		width: 50%;
		height: 25%;
	}
}
@media (max-width: 700px) {
	#rig2 li {
		width: 100%;
		height: 25%;
	}
}
@media (max-width: 550px) {
	#rig2 li {
		width: 100%;
		height: 25%;
	}
}

/*********GOOGLE MAPS STYLE***********/

  /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#headmap {
        height: 90%;
      }
#footmap{
        height: 100%;
      }
#indexmap{
        height: 100%;
      }


/*hide google maps logo*/
a[href^="http://maps.google.com/maps"]{display:none !important}
a[href^="https://maps.google.com/maps"]{display:none !important}

.gmnoprint a, .gmnoprint span, .gm-style-cc {
    display:none;
}
.gmnoprint div {
    background:none !important;
}
}