@charset "utf-8";
/* Paolo Doyle v1 */


/* COLOURS

#484b52
#a49f7f rgba(164,159,127,1.00)
#9c9992
#c5c6c0 rgba(197,198,192,0.4)
#aba8b1 rgba(171,168,177,1.00)

#D2CFE0 rgba(210,207,224,1.00)

*/

/* FONTS

    font-family: 'Cabin', sans-serif;
    font-family: 'Noto Sans', sans-serif;

*/


/*     -----[ TYPOGRAPHY ]-----     */


html, body {height: auto;}
body {font-family: 'Noto Sans', sans-serif; overflow-x: hidden; background-color: #fff/*#fdfdfe*/;}
h1, h2, h3, h4 {color: #9c9992; font-family: 'Cabin', sans-serif;}
h1 {font-size: 2rem; font-weight: 500; margin: 0px;}
#name {font-family: 'Cabin', sans-serif; font-size: 2.5rem; color: #707486;}
.main-heading h1 {padding-left: 1.3rem; color: #707486;}
h2 {font-size: 1.8rem;}
h3 {font-size: 1.6rem; color: #707486;}
aside h3 {font-size: 1rem; font-weight: 500;}
p {font-family: 'Noto Sans', sans-serif; color: #484b52; font-size: 0.875rem; padding-right: 1.4rem; }
a {color: #c5c6c0;}
.button a {color: #fefefe;}
.button a:hover {color: #fefefe;}
span {display: block; float: left; width: 50%;}
span.left {width: 70%;}
span.right {width: 30%; font-style:italic; font-size: 0.75rem;}
aside span {float: left; width: 100%; height: auto;}
footer span { color: #D2CFE0; text-shadow: 1px 1px 3px #fff; margin-bottom: -3px;}
article a , aside a {font-family: 'Cabin', sans-serif; font-size: 1rem;  color: #707486; font-weight: 500; }
article a:hover , aside a:hover {color: #000; text-decoration: underline;}

blockquote {border-left: none;}

.formBox input[type="text"], .formBox textarea {background-color: #fff!important;}
ul {font-size: 0.875rem;}

/*     -----[ NAVIGATION ]-----     */


nav {float: right; clear: left; width: auto; height: auto; margin-top: -1rem; text-align: right;}
nav a {display: block; width: 100%; height: auto; padding: 3px 0.3rem; font-size: 0.9rem; text-transform: uppercase; text-shadow: 2px 2px 7px #fff;}
nav a:hover {text-decoration: underline;}
nav a.current {color: #484b52;}
nav ul {width: auto; list-style-type: none; margin: 0px;}
nav li {width: auto; float: left; margin-right: 8px;}

#nav ul li a.active {
/*    background: rgba(0, 0, 0, 0.15) none repeat scroll 0 0;
    box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.125) inset;
    color: #fff;*/
}

#subNav {float: left; width: 70%; height: auto; margin: 7px 15%; /*background-color: rgba(255,255,255,0.1);*/ border-top: dotted 1px #D2CFE0;}
#subNav ul {list-style-type: none; margin: 0px;}
#subNav li {float: left; width: 14.28571428571429%; margin-top: 7px; padding: 0.1rem 0.4rem; text-align: center;}
#subNav a {display: block; text-shadow: 2px 2px 7px #fff;}
#subNav a:hover {text-decoration: underline; color: #484b52;}

#toggle-nav {width: 32px; height: 32px; padding: 3px; display: none;}
#inner-nav {float: left; width: 100%; height: auto; display: none;}
#inner-nav ul {list-style-type: none; padding-top: 1rem; font-size: 1.2rem;}
#inner-nav li {width: 100%; text-align: center;}
#inner-nav li:last-child {margin-bottom: 1.4rem;}
#inner-nav a {display: block;}
#inner-nav a:hover {text-decoration: underline;}


/*     -----[ LAYOUT ]-----     */


header {position: fixed; top: 0; float: left; width: 100vw; min-height: 10vh; background-color: rgba(255,255,255,1); z-index: 100; border-bottom: solid 7px #D2CFE0;}
section {width: 100vw; height: auto;}
article {float: left; width: 100%; height: auto; margin-bottom: 20px; padding: 1.3rem; display: none;}
aside {float: left; width: 100%; height: auto; margin-bottom: 20px; padding: 1.3rem; display: none;}
figure {width: 60%;  margin: 0.45rem 20% 0px 20%; text-align: center;}

footer {float: left; width: 100vw; min-height: 10vh; color: #fff; font-size: 0.75rem; background-color: rgba(255,255,255,1.00); border-bottom: solid 35px rgba(210,207,224,0.5);}

#wrapper {float: left; width: 100%;}

#main-content {float: left; width: 72.5%; margin: 0px 13.75%; height: auto; clear: both;}
#sub-content {float: left; width: 100%; height: auto; clear: both;}
#thumbnails {float: left; width: 80%; margin: 0px 10%;}

#background {position: absolute; top: 0px; left: 0px; width: 100vw; height: 100%; z-index: -1; text-align: center;}
#background img {width: 72.5%; padding-top: 7px;}


#header-items {float: left; width: 100%; height: auto;}
#img-large {float: left; width: 100%; height: auto; }

#contact-form {float: left; width: 40%; height: auto;  margin: 1rem 30%; padding-top: 1.8rem; display: none;}
#copyright {width: 100vw; margin: 1rem auto 0px auto; padding-bottom: 0.7rem; text-align: center; color: #c5c6c0; border-bottom: solid 2px #D2CFE0;}


#name {float: left;}
#title-image {float: left; width: 45px; height: 45px; margin: 10px auto 0px 1.4rem; opacity: 1; overflow: hidden;}
#title-image img {max-width: 100%;}
#social {float: right;}

/* contact form */
#warning-message {float: left; width: 100%; height: auto;}
.wm {color: red;}
.formBox {float: left; width: 100%;}
#thanks {float: left; width: 30%; height: auto; margin: 50px 35%; text-align: center;}

/* photograph gallery */
 #gallery-container {position: relative; width: 80%; height: auto; min-height: 600px; margin: 20px 10%; padding-bottom: 100px;}
 .gallery-item {text-align: center; width: 100%; max-height: 260px; margin: auto;}
 .gallery-item:hover {}
 .gallery-item img {max-height: 140px; overflow: hidden;}
/* .gallery-item img {width: 88%; padding: 1%;  margin: 10px auto; 
	 transition: padding 0.3s ease-out; 
	 transition: width 0.3s ease-out; 
	 }
 .gallery-item img:hover {width: 90%; padding: 0%;}*/
 .gallery-info {width: 100%; height: auto;}
  .gallery-info h3 {font-size: 1.1rem;}

/* facebook */

.fb-page  {/*padding-top: 20px;*/}


  .fb-page, .fb-page:before, .fb-page:after {
    border: 1px solid #aba8b1;
	box-shadow: 0px 0px 7px 3px #D2CFE0;
  } 



#internal-links {
    width: 100%;
    min-height: 40px;
	margin-top: 20px;
}
#internal-links nav {
float: left;
width: 100%;
height: auto;
margin-top: 0px;
text-align: left;
}
#internal-links ul {float: left; width: 100%; margin: 0px; padding: 0px;}
#internal-links li {float: left; width: 19.25%; margin: 0px 0.25%; text-align: center; padding: 2rem 0px; background-color: rgba(255,255,255,0.8);}
#internal-links li:first-child {margin-left: 0.5%;}
#internal-links li a {font-size: 1.4rem;}

.slick-prev, .slick-next {z-index: 50!important;}
.slick-prev {margin-left: 10%;}
.slick-next {margin-right: 10%;}
.img-container {float: left;}

.slider, .slider-large {
  position: relative;
  height: auto;
  margin-top: 1.25rem;
  margin-bottom: 2.25rem;
  background-color: #e6e6e6;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-touch-action: none;
      touch-action: none; 
}




/*     -----[ CLASSES ]-----     */


article, aside {background-color: rgba(255,255,255,0.8);}

.fw {float: left; width: 100%; height: auto;}
.wht {background-color: rgba(255,255,255,0.8); padding-top: 0.7rem;}
.wht p, .wht h3 {color: #000;}
.wht h2 {margin-bottom: 0.7rem;}

.hue-1 {/*a49f7f*/ background-color: rgba(164,159,127,0.4);}
.hue-2 {/*c5c6c0*/ background-color: rgba(197,198,192,0.4);}

.left {text-align: left;}
.right {text-align: right;}

.content-area {position: relative; float: left; width: 100%; height: auto; padding: 0.35rem 6rem;}
.main-heading {float: left; width: 100%; padding: 0px; margin: 1.2rem auto 0.3rem auto; background-color: rgba(255,255,255,0.8);} 
.overlay {position: fixed; bottom: 0px; width: 100%; min-height: 300px; background-image: url(../img/gradient.png); background-position:bottom; background-repeat:repeat-x;}
.has-bg {background-image: url(../img/backgrounds/studio.jpg); background-size: cover;}


/* icons */
.icon_social {float: left; width: 35px; height: 35px; padding: 0.4rem; margin-right: 0.5rem;
    -webkit-transition: opacity 350ms linear;
	transition: opacity 350ms linear;
	opacity: 0.7;
	}
.icon_social:hover {opacity: 1;}

/* images */
.img-heading {width: 60%; height: auto; font-size: 0.825rem; margin: 0px 20%; padding-top: 1.3rem; color: #707486;}
.img-heading span.left {font-size: 0.925rem;}
.img-container figure {text-align: center;}
.img-container img {max-height: 520px; max-width: 98%; margin:0px auto;}

/* buttons */
.cta {float: left; width: 100%; height: auto; text-align: center; margin-top: 1.4rem; margin-bottom: 1rem;}
.button {padding: 0.25em 0.45em 0.5rem 0.45rem; border: solid 1px #484b52; font-size: 1rem; margin-bottom: 0px; color: #484b52;}

/* blog */
#blog-area {float: left; width: 100%; margin: 0px auto 60px auto; overflow: hidden;}
#blog-area:last-child {padding-bottom: 100px;}
.blogPost {float: left; width: 80%; border: solid 1px #aba8b1; border-radius: 3px; padding: 0.35rem 3rem; margin: 0px 10% 1.3rem 10%; box-shadow: 0px 0px 7px 3px #D2CFE0; background-color: rgba(255,255,255,1); }

.blog-title {color: #a49f7f;}
.blog-date {}
.blog-date h6 {color: #a49f7f; font-size: 1rem;} 
.blog-content {padding: 0.75rem 0px 0px 0.875rem; border-left: dotted 1px #c5c6c0;}

/* thumbnails */
.thumbnails {float: left; width: 70%; margin: 0px 15% 0px 15%; height: auto; max-height: 136px; /*border: solid 1px #D2CFE0;*/ box-sizing:border-box;}
.img-thumb {float: left; width: 15.66666666666667%; padding: 0.3% 1% 0.5% 1%; height: 136px;  text-align: center;}
.img-thumb img {width: auto; max-height: 91px; margin: auto 10%;}

/* slideshow */
.slider, .slider-large {background-color: rgba(255,255,255,0.1); width: 100%;}
.slider figure img {cursor: url(../img/icon_cursor.png), auto!important;}
.slideshow {position: relative; float: left; width: 60%; margin: 0px 20%; padding: 0px 2.5%;  height: auto; max-height: 600px;}
.slick-dots {float: left; bottom: -1.6rem;}

.slick-slide {text-align: center;}

.slick-prev:before,
.slick-next:before
{color: #484848; font-size: 50px;}

.slick-prev
{background-image: url(../img/icon_prev.png); background-repeat: no-repeat; background-size:cover; left: -45px;}
.slick-next
{background-image: url(../img/icon_next.png); background-repeat: no-repeat; background-size:cover; right: -45px;}
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;
    opacity: 0.6;
    width: 35px;
    height: 35px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

/*    color: transparent;
    border: none;
    outline: none;
    background: transparent;*/
}
.slick-prev:hover, .slick-next:hover {opacity: 1;}
.slick-dots
{


    display: block;

    width: 100%;
    padding: 0;
    margin: 14px 0px 0px 0px;

    list-style: none;

    text-align: center;
}

/* MODAL WINDOWS */

.reveal {width: auto; max-height: 96%;}
.reveal img {width: auto; max-height: 90%; margin: 0px auto;}
.modal-image {text-align: center;}
.reveal-overlay {background-color: rgba(255, 255, 255, 0.85);}

/*     -----[ MEDIA QUERY ]-----     */

@media (max-width: 1024px) {
	aside {width: 100%;}
	article {width: 100%;}
	nav {width: 100%;  margin-top: 0px;}
	nav ul {width: 100%;}
	#subNav {width: 80%; margin: 7px 10%;}
	aside ul {margin: 0px;}
	aside li {list-style: none; font-size: 0.7rem; margin-bottom: 0.5rem;}
#main-content {width: 90%; margin: 0px 5%;}	
#contact-form {width: 60%; margin: 1rem 20%;}
}

@media (max-width: 800px) {
	.content-area {width: 98vw; padding: 0.35rem 1rem;}
	/*.main-heading {max-width: 40rem;}*/
	.slideshow {max-width: 60%; margin: 0px 20%; padding: 0px 2.5%;  height: auto; max-height: 600px;}
	.thumbnails {width: auto; max-width: 98vw; margin: 30px 0px 0px 0px;}
	
	.blogPost {width: 100%; padding: 0px; margin: 0px 0% 1.3rem 0%;}
	
	.blogPost > article {margin-bottom: 1rem;}
}

@media (max-width: 700px) {
#main-content {width: 92%; margin: 1rem 4%;}
#contact-form {width: 98%; margin: 1rem 1%;}
h1 {font-size: 1.6rem;}
h3 {font-size: 1.3rem;}
.main-heading h1 {padding-left: 0.5rem;}
#contact-form {padding-top: 0px;}
#inner-nav ul {padding: 1rem 0px 0px 0px; margin: 0px;}

	.content-area {width: 98vw; padding: 0.35rem 1rem;}
	.thumbnails {margin-bottom: 80px;}
	#subNav {display: none;}
	.thumbnails {display: none;}
	footer span {font-size: 0.7rem;}
	#title-image {margin-top: 0px;}
	.slideshow {width: 85%; max-width: 95%; margin: 0px 5% 80px 5%; padding: 0px 2.5%;}
	.left {width: 100%;}
	.right {width: 100%;}
	
	.columns {max-width: 100%!important;}
	
	
}
@media (max-width: 400px) {
span.left {width: 100%;}
span.right {width: 100%;}



	.content-area {width: 328px; padding: 0.35rem 0rem;}
	article, aside {padding: 0.35rem 0.5rem;}
	nav {width: 10%; float: left; margin-top: -2rem;}
	nav ul {display: none;}
	#toggle-nav {display: block;}
	#internal-links {margin-top: 0px;}
	#internal-links nav ul {display: block!important;}
	#internal-links li {width: auto;}
	article, aside {margin-bottom: 0px;}
	footer span {width: 100%; float: left;}
	.blogPost {width: 100%; padding: 0.35rem 1rem; margin: 0px 0% 1.3rem 0%;}
	p { text-align:justify;}
	.slider {margin-top: 10px; margin-bottom: 0px;}
	.slick-next {right: -20px;}
	.slick-prev {left: -20px;}
	.reveal {width: 100%;}	
	/*#title-image {display: none;}*/
}