@font-face {
  font-family: 'ChronicleTextG1-Italic';
  src: url('/fonts/ChronicleTextG1-Italic.eot');
  src: url('/fonts/ChronicleTextG1-Italic.woff2') format('woff2'),
       url('/fonts/ChronicleTextG1-Italic.woff') format('woff'),
       url('/fonts/ChronicleTextG1-Italic.ttf') format('truetype'),
       url('/fonts/ChronicleTextG1-Italic.svg#ChronicleTextG1-Italic') format('svg'),
       url('/fonts/ChronicleTextG1-Italic.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'BrandonGrotesque-Light';
  src: url('/fonts/BrandonGrotesque-Light.eot');
  src: url('/fonts/BrandonGrotesque-Light.woff2') format('woff2'),
       url('/fonts/BrandonGrotesque-Light.woff') format('woff'),
       url('/fonts/BrandonGrotesque-Light.ttf') format('truetype'),
       url('/fonts/BrandonGrotesque-Light.svg#BrandonGrotesque-Light') format('svg'),
       url('/fonts/BrandonGrotesque-Light.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'BrandonGrotesque-Bold';
  src: url('/fonts/BrandonGrotesque-Bold.eot');
  src: url('/fonts/BrandonGrotesque-Bold.woff2') format('woff2'),
       url('/fonts/BrandonGrotesque-Bold.woff') format('woff'),
       url('/fonts/BrandonGrotesque-Bold.ttf') format('truetype'),
       url('/fonts/BrandonGrotesque-Bold.svg#BrandonGrotesque-Bold') format('svg'),
       url('/fonts/BrandonGrotesque-Bold.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

body {font-family: 'BrandonGrotesque-Light'; color:#000000; font-size:14px; padding-top:90px;}
a {text-decoration:none;}
ul {list-style:none;}
img {border:none; outline:none;}
.clear:before,
.clear:after { content: " "; display: table;}
.clear:after { clear: both;}
.clear-both { clear: both;}

.site-wrapper { width:87.2% !important; margin:0 auto; padding-bottom:50px;}

/*
.home {background-color:#3a3c3e; color:#fff;}
.home a {color:#fff;}
*/

.content, .home {background-color:#EFEFEF; color:#000;}
.home {background:none;}
.content a, .home a {color:#000;}

.site-header {z-index:5000; position:relative;}

.header-wrap {position:relative; z-index:4000;}
.header-wrap {width:100%; background-color:#EFEFEF; padding-top:10px; padding-bottom:10px; margin:0 auto; max-width:1100px;}
.home .header-wrap {background:none; padding-left:10px;}
.content-wrap {}

.bubble {float:left; padding-top:13px; border-radius: 50%; background: #616365; width: 52px; height:35px; text-align:center;}
.bubble h2 {font-size:1.5em; font-family: 'BrandonGrotesque-Bold'; text-transform:uppercase; letter-spacing:2px; padding-left:2px; margin-top:1px;}

.content .bubble {background: #fff;}

.logo {position:absolute; width:100%; text-align:center; z-index:1000;}
.logo-wrap {border-bottom:1px solid #fff; border-top:3px solid #fff; width:195px; margin:0 auto; padding-top:8px; padding-bottom:8px; margin-top:3px; position:relative; float:left; text-align:center}
.logo-wrap h1 {font-size:1.6em; font-family: 'BrandonGrotesque-Bold'; text-transform:uppercase; letter-spacing:2px;}

.content .logo-wrap, .home .logo-wrap {border-bottom:1px solid #000; border-top:3px solid #000;}

.menu {z-index:8000; float:right; position:relative; font-family: 'ChronicleTextG1-Italic'; font-size:0.98em}
.menu ul li {display:inline; text-align:center;}

.menu ul li a {margin-left:12px; margin-right:12px; display:inline-block; height:50px; width:50px; line-height:50px;}
.menu ul li a:hover {color:#efefef;}
.menu ul .last a {padding-left:70px !important; padding-right:0;}

.menu ul li a:hover {background:url(/images/generic/menu-hover.png) top right no-repeat; color:#999;}

.sub-menu {font-family: 'BrandonGrotesque-Bold'; text-transform:uppercase; letter-spacing:2px; font-size:0.9em; line-height:1em; float:left; width:20%;}
.sub-menu ul li {margin-left:10px; margin-top:12px;}
.sub-menu ul li a {font-family: 'BrandonGrotesque-Light'; border-left:1px solid #efefef; padding-left:10px;}
.sub-menu ul li a:hover, .sub-menu ul li .selected {border-left:1px solid #000;}

.image-container {margin-top:2%;}
.image-container img {width:100%;}

.mobile-menu {display:none; text-decoration:none; font-size:1.6em; line-height:50px;}


/* HOME ITEMS */
.image-fade .img-item {position: absolute; top: 0; bottom: 0; width: 100%; z-index:4000;}
.image-fade #image-1 {background:url(/images/home/home-01.jpg) top center no-repeat; background-size:cover;}
.image-fade #image-2 {background:url(/images/home/home-02.jpg) top center no-repeat; background-size:cover;}
.image-fade #image-3 {background:url(/images/home/home-03.jpg) top center no-repeat; background-size:cover;}

.home-wrapper {overflow:hidden;}
.image-container {height:100%;}
.home-wrapper .container {position:absolute; width:100%; z-index:5000;}

.floating-div {top: 0; left: 0; width: 93%; position:absolute;}

.quote-wrap {width:89% !important; padding-top:38%; overflow:hidden;}
.quote-item {font-family: 'ChronicleTextG1-Italic'; width:370px; font-size:2.3em; text-align:center; color:#fff; float:right; overflow:hidden;}

.slide-inner {font-family: 'ChronicleTextG1-Italic'; font-size:2.2em; color:#000; float:left; padding-left:12%; padding-top:12%;}
.slide-content {width:440px; height:160px; background: rgba(255, 255, 255, 0.65); -webkit-box-shadow: 10px 10px 51px -1px rgba(0,0,0,0.5); -moz-box-shadow: 10px 10px 51px -1px rgba(0,0,0,0.5); box-shadow: 9px 9px 45px -1px rgba(0,0,0,0.5); position:relative;}

.slide-img {height:160px; width:160px; float:left; background:url(/images/home/slider-lines.png) top center no-repeat; background-size:cover; display:table;}
.slide-img-content {display:table-cell; vertical-align:middle; font-size:0.45em; color:#000; text-align:center; margin:0 auto;}
.img-content-detail {width:50%; margin:0 auto; line-height:1.1em;}

.slide-txt {float:left; padding-left:15px; width:57%; display:table !important; height:160px;}
.slide-txt-content {display:table-cell !important; vertical-align:middle !important; margin:0 auto;}
.slide-txt h2 {font-size:0.85em; padding:0; margin:0; padding-bottom:8px;}
.slide-txt p {font-family: 'BrandonGrotesque-Light'; font-size:0.55em;}


/*Artworks List Page*/
.content-text {float:right; width:78%;}
.list-cover {width:100%;}

.art-list {list-style:none !important; padding:0; margin:0;}
.art-list .item {max-width:200px; width:180px !important; float:left; margin-left:1.5% !important; background-color:#fff; position:relative; text-align:center; margin-bottom:15px; border:10px solid #fff;}
.art-list .item a {color:#646462; cursor: pointer !important; width:100%; display:block; outline:none;}

.art-list .item a img {width:100%;}
.art-list .item a:hover {color:#f19d17;}
.art-list .item .item-cover {
	position:absolute; height:100%; width:100%; background: rgba(255, 255, 255, 0.55); text-align:center;
	-o-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
	outline:none !important;
}
.art-list .item .item-lines {position:absolute; height:100%; width:100%; background:url(/images/gallery/lines.png) left top no-repeat; background-size:contain; text-align:center;
	-o-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
}
.item-cover .item-text {position:relative; display:table; color:#000; height:100%; width:100%; font-size:1.1em; line-height:1.3em;}
.item-cover .item-text .text-name {display:table-cell; vertical-align:middle; width:80%; text-align:center;}
.art-list .item a:hover > .item-cover {background:none;}
.art-list .item a:hover > .item-lines {background:none;}
.art-list .item a:hover > .item-cover .item-text {display:none;}

/*  ART DETAIL  */
.hidden {display:none;}
.detail-text {float:left; width:30%; text-align:right; padding-top:15%; padding-left:10%;}
.detail-text h2 {line-height:1.1em; font-size:1.4em; margin-bottom:15px; font-family: 'ChronicleTextG1-Italic';}
.detail-text p {line-height:1.3em; font-size:1.15em;}
.detail-img {float:right; width:65%; overflow:hidden; text-align:center}
.detail-img img {max-width:100%; border:15px solid #fff; margin:0 auto;}



/* BLOG ITEMS */
.blog-item-outer {width:80%; margin-bottom:25px; border:1px solid #fff;}
.blog-item-outer:hover {border:1px solid #666;}
.blog-item-inner {background:#fff; padding:15px;}
.blog-item-inner:hover {background:#f6f6f6; cursor:pointer}


.blog-thumb {height:100px; width:150px; background:#ccc; float:left;}
.blog-content {float:left; margin-left:25px; width:69%; padding-top:4px;}
.blog-content h2 {font-family: 'ChronicleTextG1-Italic'; font-size:1.5em; color:#000; text-decoration:none;}
.blog-content p {font-size:1.2em;}

.blog-line {border-top:1px solid #000; margin-top:11px; padding-bottom:11px;}
.blog-text {line-height:1.2em; color:#000; text-decoration:none}

.blog-content-outer {width:90%; background-color:#fff;}
.blog-content-inner {width:72%; float:right; margin-top:35px; margin-right:20px; padding-bottom:15px;}
.blog-content-inner h1 {font-family: 'ChronicleTextG1-Italic'; font-size:1.8em; color:#000; text-decoration:none}
.blog-content-img {margin-top:10px; margin-bottom:20px;}
.blog-content-img img {width:100%}
.blog-content-inner figcaption {margin-left:-135px; width:120px; margin-top:-50px; position:absolute; font-family: 'ChronicleTextG1-Italic'; font-size:0.95em;}
.posted-share {margin-bottom:12px;}
.posted-label {float:left; font-family: 'ChronicleTextG1-Italic'; font-size:0.9em; width:180px; line-height:35px;}
.contact-social {float:right}
.contact-social a {display:inline-block; font-size:1.3em; width:23px !important; height:23px !important; line-height:26px; color:#666; background-color:#EFEFEF; border:1px solid #666; margin-right:4px; text-align:center; cursor:pointer;}
.blog-content-inner p {line-height:1.35em; font-size:1.3em; color:#000; text-decoration:none; padding-bottom:12px;}
.blog-line-inner {display:none; padding-bottom:0;}

.blog-item-inner a {text-decoration:none;}
.blog-content-inner a:hover {text-decoration:underline;}

/* WORKS LIST PAGE*/
.list-head {	position:relative; padding-left:12px; padding-bottom:20px; font-size:1.2em !important; line-height:1.3em;}
.head-item h2 {font-family: 'ChronicleTextG1-Italic'; font-size:1.6em; color:#000; text-decoration:none;}
.head-item p {padding-bottom:10px;}
							 
/*  ABOUT PAGE*/
#content-push {padding-top:65px; margin:0 auto;}
#about-text {width:58.5%; font-size:1.3em; line-height:1.4em; padding-bottom:60px;}
#content-img {padding-top:40px; margin:0 auto;}	
            
.image-wrap {width:950px; text-align:center; margin:0 auto; clear:both; height:auto;}
.about-img {height:550px; float:left; border:20px solid #fff;}
#about-img1 {width:55%; background:url(/images/about/image-01.jpg) top center no-repeat; background-size:cover;}
#about-img2 {width:35%; background:url(/images/about/image-02.jpg) top center no-repeat; background-size:cover; border-left:none}


/*  CONTACT PAGE  */
#contact-img1 {width:35%; background:url(/images/contact/image-01.jpg) top center no-repeat; background-size:cover;}
#contact-img2 {width:55%; background:url(/images/contact/image-02.jpg) top center no-repeat; background-size:cover; border-left:none}

form {
	margin:0;
	padding:0;
}

.container {
	padding-top:20px;
	width:100%;
}

#form-div {
	max-width: 450px;
	position:relative;
}

.feedback-input {
	font-family: 'BrandonGrotesque-Light';
	color:#3c3c3c;
	font-size: 1em;
	border-radius: 0;
	line-height: 1.1em;
	background-color: #fbfbfb;
	margin-bottom: 10px;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0);
	padding:8px 8px 8px 40px;
}

.feedback-input:focus{
	background: #fff;
	box-shadow: 0;
	border: 1px solid #ccc;
	color: #666;
	outline: none;
}

.focused {color:#666; border:black solid 1px;}

/* Icons ---------------------------------- */
#formname{
	background-image: url(/images/contact/name.svg);
	background-size: 20px 20px;
	background-position: 8px 7px;
	background-repeat: no-repeat;
}

#formname:focus{
	background-image: url(/images/contact/name.svg);
	background-size: 20px 20px;
	background-position: 8px 7px;
	background-repeat: no-repeat;
}

#formemail{
	background-image: url(/images/contact/email.svg);
	background-size: 20px 20px;
	background-position: 10px 7px;
	background-repeat: no-repeat;
}

#formemail:focus{
	background-image: url(/images/contact/email.svg);
	background-size: 20px 20px;
    background-position: 10px 7px;
	background-repeat: no-repeat;
}


#formph{
	background-image: url(/images/contact/phone.svg);
	background-size: 20px 20px;
	background-position: 10px 7px;
	background-repeat: no-repeat;
}

#formph:focus{
	background-image: url(/images/contact/phone.svg);
	background-size: 20px 20px;
    background-position: 10px 7px;
	background-repeat: no-repeat;
}

#formcomment{
	background-image: url(/images/contact/comment.svg);
	background-size: 20px 20px;
	background-position: 10px 7px;
	background-repeat: no-repeat;
}

textarea {
    width: 100%;
    height: 200px;
    line-height: 1.1em;
    resize:vertical;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
	background-color:white;
}

.view-button {
	width: 150px;
	border: #666 solid 2px;
	cursor:pointer;
	background-color: #ccc;
	color:black;
	font-size:0.9em;
	padding-top:8px;
	padding-bottom:8px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
    font-family: 'BrandonGrotesque-Bold';
}

.view-button:hover{
	background-color: rgba(0,0,0,0);
	color: #333;
}
	
.submit:hover {
	color: #333;
}
	
.ease {
	width: 0px;
	background-color: #666;
	-webkit-transition: .3s ease;
	-moz-transition: .3s ease;
	-o-transition: .3s ease;
	-ms-transition: .3s ease;
	transition: .3s ease;
}

.submit:hover .ease{
  width:100%;
  background-color:white;
}
::-webkit-input-placeholder {
 color:#ccc;
}
:-moz-placeholder {
 color:#ccc;
}
::-moz-placeholder {
 color:#ccc;
}
:-ms-input-placeholder {
 color:#ccc;
}

@media only screen and (min-width: 1281px) {
	.floating-div {width: 93%;}
	.quote-wrap {padding-top:23%;}
}
@media only screen and (max-width: 1095px) {
	.blog-content {width:60%;}
	.blog-line-inner {display:block}
	.blog-content-inner {width:93%; float:none; margin:0 auto; margin-top:25px;}

	.blog-content-inner figcaption {margin-left:0; width:auto; margin-top:10px; position:relative;}
}
@media only screen and (max-width: 950px) {
	.menu ul .last a {padding-left:20px !important; padding-right:0;}
	.image-wrap {width:90%; text-align:center; margin:0 auto; clear:both; height:auto;}
}
@media only screen and (max-width: 860px) {
	.blog-thumb {height:auto; width:200px; float:none; margin:0 auto;}
	.blog-content {width:100%; float:none; margin:0 auto; padding-top:20px;}	
}
@media only screen and (max-width: 810px) {
	.mobile-menu {display:block; cursor:pointer; position:relative; z-index:6000;}
	.menu-cover {display:none; position:absolute; background-color:#EFEFEF; right:6.4%; padding-top:8px; padding-bottom:8px;}
	.content .menu-cover {background-color:#EFEFEF; border:1px solid #333;}
	.menu-cover ul li {display:block; line-height:2.7em; width:138px; text-align:left}
	.menu-cover ul li a {padding-left:12px; padding-right:0; color:#3a3c3e; font-size:1.8em;}
	.menu-cover ul li a:hover {color:#000; background:none;}
	.menu-cover ul .last a {padding-left:9px !important;}

	.content-text, #about-text {float:none; width:90%; margin:0 auto;}
	.art-list .item {width:200px !important; float:none; margin:0 auto !important; margin-bottom:15px !important;}
	#about-text {padding-bottom:20px;}
	
	.sub-menu {float:none; width:90%; margin:0 auto !important; margin-bottom:20px !important; text-align:left;}

	.image-wrap {width:100%;}
	.about-img {height:450px; float:none; margin:0 auto;}
	#about-img1, #about-img2 {width:80%;}
	#contact-img1, #contact-img2 {width:80%;}
	#about-img1, #contact-img1 {margin-bottom:15px;}
	#about-img2, #contact-img2 {border-left:20px solid #fff;}
	
	.blog-content-outer {width:95%; margin:0 auto;}
	.blog-item-outer {width:90%;}
	
	.floating-div {width: 95%;}
	.quote-wrap {margin-top:30% !important; left: 0;}
	.slide-inner {padding-left:0; padding-top:5%; float:none; margin:0 auto;}
	.slide-content {height:auto; width:250px;}
	.slide-img {float:none; margin:0 auto; background:none; margin-top:10px;}
	.slide-txt {float:none; padding-left:10px; padding-top:25px; width:95%; margin:0 auto; padding-bottom:15px; padding-right:10px;}
	.swiper-pagination {top:165px !important; padding-left:45% !important; display:none;}

}
@media only screen and (max-width: 600px) {	
	.quote-wrap {margin-top:40% !important; left: 0;}
	.slide-inner {padding-left:0; padding-top:5%; float:none; margin:0 auto;}

}
@media only screen and (max-width: 480px) {
	.bubble {float:none; padding-top:13px; margin:0 auto; margin-bottom:15px;}
	body {padding-bottom:20px; padding-top:10px;}
	.header-wrap {width:97.5%; top:0; position:fixed; left:2.5%; z-index:10000;}
	.logo-wrap {width:194px;}
	.logo-wrap h1 {font-size:1.48em;}
	#content-push {padding-top:150px;}
	.menu {right:6%;}
	.head-item {padding-top:12px;}
	.content-text, #about-text {width:98%;}
	.blog-item-outer {width:100%;}
	
	.slide-txt {padding-left:5px; padding-top:10px; padding-bottom:5px; padding-right:5px;}
	.slide-inner {padding-top:11%; display:none;}/*Hides blog panel*/
	.quote-wrap {margin-top:100% !important; padding-top:0 !important; margin:0 auto;}
	.quote-item {width:95%; font-size:2.2em;}
}