/*main stylesheet - test*/
body,html {
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
font:normal 13px Helvetica, Arial, sans-serif;
/*background-color: #E9E9E9;*/
color:#666;
}
p {
line-height:150%;
font-size:14px;
font-family: Roboto, Helvetica,Arial,sans-serif;
}
p.larger {
font-size: 15px;
}
blockquote {
font-size:22px;
color:#888;
line-height:150%;
-webkit-font-smoothing: antialiased;
}
a:link {
color:#06c;
}
a:hover {
color:#09f;
}
.image-fit {
width: 100%;
}
.mobile-view,.mobile-view * {
display: none;
}
#wrapper {
max-width:1200px;
min-width:800px;
margin: 0 auto;
padding:10px;
}
#content_border {
padding:10px;
border:2px solid #ccc;
}
#footer {
padding-top:40px;
color: #ccc;
font-size:95%;
text-align:center;
}
.centered_content_inner {
max-width:1000px;
margin:0 auto;
}
.margin-top-20 {
margin-top:20px;
}
/*FONTS*/
@font-face {
font-family: 'twig-24';
src:url('../fonts/twig-24.eot');
src:url('../fonts/twig-24.eot?#iefix') format('embedded-opentype'),
url('../fonts/twig-24.woff') format('woff'),
url('../fonts/twig-24.ttf') format('truetype'),
url('../fonts/twig-24.svg#Icons') format('svg');
font-weight: normal;
font-style: normal;
}
.twig-24 {
font-family: 'twig-24';
font-variant: normal;
font-weight: normal;
speak: none;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
h1 {
font-size:20px;
}
div > h1:first-child {
margin-top:0;
}
.title-text {
font-size:17px;
color:#999;
font-weight:200;
}
p.title-text:first-child {
margin-top:0;
}
h2 {
font-weight:400;
}
h3 {
font-size:12px;
}
/*BUTTONS*/
.btn {
font-size: 14px;
font-family: Raleway, sans-serif;
padding: 8px 20px 8px 20px;
text-decoration: none;
-webkit-border-radius: 3;
-moz-border-radius: 3;
border-radius: 3px;
border:1px solid #999;
}
.btn-default {
background: #FFFFFF;
color:#999;
font-size: normal 13px;
font-weight:300;
border:1px solid #ccc;
}
.btn-default:hover {
/*color:#7FF5A3;*/
color:#000;
border-color: #000;
}
#topBtn {
margin:2px auto;
display:block;
}
/*FORM*/
.form * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-horizontal .form-label {
width:calc(25% - 10px);
width:20%;
/*float:left;*/
margin-right:10px;
padding: 4px 0;
display:block;
}
.form-horizontal .form-group {
/*margin-left:25%;*/
margin-bottom:10px;
}
.form-horizontal .form-group input[type=text],.form-horizontal .form-group input[type=search],.form-group input[type=email],
.form-horizontal .form-group select,.form-horizontal .form-group textarea {
width:100%;
padding:8px;
border:1px solid #ccc;
-webkit-border-radius: 3;
-moz-border-radius: 3;
border-radius: 3px;
font-size:14px;
}
@media screen and (max-width: 568px) {
.form-horizontal .form-label {
width:100%;
text-align:left;
float:none;
}
.form-horizontal .form-group {
margin-left:0;
}
}
/*TEXT COLOURS*/
.error {
color:#CC0000;
}
.text-em {
font-size:16px;
color:#666;
}
/*ALERT BOXES*/
.alert {
padding:10px;
}
.alert-danger {
background-color:#FFEBED;
color:#CC0066;
border: 1px solid #FFD1D6;
}
.alert-success {
background-color:#E0F2DA;
color: #60A36E;
border: 1px solid #CAE8D3;
}
.alert-warning {
background-color:#FAF2CC;
color:#EAA000;
border: 1px solid #FCEFA2;
}
.alert-info {
background-color:#DAECF2;
color: #2399D9;
border: 1px solid #2399D9;
}
.message-close {
display:block;
float:right;
padding:10px;
position:relative;
top:-10px;
left:10px;
cursor:pointer;
}
.message-close .flaticon-cancel:before {
font-size:12px;
}
/*=====PAGES====*/
/*Breadcrumb nav*/
#breadcrumb {
margin:0;
padding:0;
list-style-type: none;
}
#breadcrumb li {
float:left;
margin:0 3px;
}
#breadcrumb li:first-child {
margin-left:0;
}
#breadcrumb li a {
color:#666;
text-decoration:none;
}
/*Front page*/
#catalogue {
margin-left:-20px;
margin-right:-20px;
padding:0;
list-style-type:none;
display:table;
}
#catalogue li {
display:inline-block;
width:280px;
height:300px;
margin-bottom:40px;
margin-right:20px;
margin-left:20px;
text-align:center;
vertical-align: top;
position:relative;
}
#catalogue .thumbnail-wrap {
width:280px;
height:280px;
overflow:hidden;
/*border:1px solid #ccc;*/
text-align:center;
padding:4px;
display: table-cell;
vertical-align: middle;
/*border:2px solid #ccc;*/
}
#catalogue li img {
width:100%;
}
#catalogue li a {
text-decoration:none;
color:#666;
}
#catalogue li h2 {
font-family: Helvetica, Arial, sans-serif;
font-size:12px;
color:#666;
}
/*HEADER */
#header {
margin-bottom:20px;
border-bottom: 1px solid #eee;
/*background-color: #eee;*/
}
#header_inner {
max-width:1200px;
/*min-width:800px;*/
margin:0 auto;
padding:0 10px;
}
#header div.col {
display:table-cell;
vertical-align:bottom;
}
#site_title {
position: absolute;
top:10px;
left:30px;
}
#site_title h1 {
color:#fff;
}
#logo {
display: inline-block;
width:240px;
/*
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
*/
}
#logo a {
text-decoration:none;
color:#333;
}
#logo h1 {
font:400 17px Helvetica,Arial,sans-serif;
display:block;
/*width:200px;
height:35px;
overflow:hidden;
background: url(../art/logo2.png) no-repeat;
text-indent:-1000px;*/
margin:18px 0 0 -10px;
padding:10px;
position: relative;
text-transform: uppercase;
letter-spacing: 0.5px;
/*left:-2px;
top: 0;*/
}
#logo:hover {
opacity:1;
-webkit-opacity:1;
-moz-opacity:1;
}
#page_title {
}
#main_nav {
width:75%;
width:calc(100% - 260px);
display: block;
margin:10px 0 0 0;
float:right;
padding:0;
position:relative;
list-style-type:none;
text-align:right;
line-height:100%;
font-family: Helvetica,Arial,sans-serif;
color:#333;
z-index: 100;
}
#main_nav li {
display:inline-block;
margin:0;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 13px;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
#main_nav > li {
padding:20px 0;
}
#main_nav li a {
padding:20px;
color:333;
}
#main_nav li:last-child a {
padding-right:0;
}
#main_nav li a.disabled, #main_nav li a:hover,#main_nav li a:active {
/*background-color: #444;
background-color:#DBDED9;*/
}
#main_nav li a:hover {
/*text-decoration: underline;*/
}
#main_nav .nolink {
padding:6px 20px;
}
/*Trigger nav*/
#mobile_nav {
visibility:hidden;
}
#mobile_nav .visible {
visibility: visible;
}
#header .trigger {
width: 20px;
height: 16px;
position: relative;
cursor: pointer;
margin-top: 18px;
margin-right:4px;
display:none;
}
#header .trigger span {
width: 100%;
height: 2px;
position: absolute;
top: 50%;
left: 0;
margin-top: -1px;
background: #222222;
}
#header .trigger span::before,
#header .trigger span::after {
content: '';
width: 100%;
height: 2px;
position: absolute;
left: 0;
background: #222222;
}
#header .trigger span::before {
top: -7px;
}
#header .trigger span::after {
bottom: -7px;
}
#header .mobile__nav {
width: 90%;
position: absolute;
top: 36px;
left: 0;
z-index: 100;
background: #222222;
opacity: 0;
visibility: hidden;
padding: 0 5%;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#header .mobile__nav.visible {
opacity: 0.9;
visibility: visible;
}
#header .mobile__nav li {
display: block;
}
#header .mobile__nav li:not(:last-child) {
margin-right: 0;
}
#header .mobile__nav li a {
display: block;
line-height: normal;
padding: 12px 0;
color: #ffffff;
text-decoration:none;
border-bottom: 1px solid #3c3c3c;
}
#header .mobile__nav li a::before {
background: #ffffff;
}
#header .mobile__nav li:last-child a {
border-bottom: 0;
}
#header .mobile__nav li span.nolink {
display: block;
padding:12px 0;
}
#header .mobile__nav li ul {
width: 90%;
position: relative;
text-align: left;
background: #222222;
padding:0;
}
#header .mobile__nav li ul li a {
color: #ffffff;
padding: 10px 15px;
}
#header .mobile__nav li ul li a.parent {
padding: 10px 15px;
}
#header .mobile__nav li ul li a::before {
right: 0;
left: auto;
margin-top: -2px;
background: #ffffff;
}
#header .mobile__nav li ul li ul {
right: 0;
}
#header .mobile__nav li ul li ul li a {
padding: 10px 25px;
}
/*DROPDWN MENU*/
.dropmenu li {
position: relative;
}
.dropmenu .submenu {
display:none;
position:absolute;
top:100%;
left:0;
min-width:150px;
padding:0 0 4px 0;
margin:0;
font-size:12px;
width:auto;
text-align:left;
.*border: 1px solid #ddd;
border-top:none;*.
z-index:10;
}
#main_nav .submenu li {
display: block;
margin:0 0 0 0;
width:auto;
color:#fff;
background-color:rgba(0,0,0,0.8);
white-space: nowrap;
}
#main_nav .submenu li a {
color:#fff;
display: block;
padding:14px 22px;
font-size: 12px;
}
#main_nav .submenu li:first-child a {
padding-top:16px;
}
#main_nav .submenu li a:hover {
text-decoration:none;
/*background-color:#fff;*/
color: #ccc;
}
/*PSEUDO-TABLES*/
.table {
display:table;
}
.table-row {
display: table-row;
}
.table-cell {
display:table-cell;
}
/*MAIN CONTENT AREA*/
#leftbar {
padding:0;
margin-left:0;
margin-bottom:10px;
position: relative;
}
#leftbar h1 {
/*font-weight:normal;
font-size:12px;
margin-top:0;
color:#999;*/
}
#main_content {
clear:both;
position: relative;
top:0;
/*margin-top:30px;*/
}
.page-navigation {
margin-bottom: 30px;
}
#pagetitlebar {
position:relative;
text-align:right;
min-height:280px;
}
h1.section_title {
color:#333;
font:400 28px Lato,Helvetica,Arial,sans-serif;
}
h2.section_title {
font: normal 15px Helvetica,Arial,sans-serif;
color: #666;
/*text-transform: uppercase;*/
-webkit-font-smoothing: antialiased;
/*font-weight: 200;*/
margin-top:0;
}
h3.section_title {
font:400 14px Lato,Helvetica,Arial,sans-serif;
color:#333;
}
.section_content {
padding:20px;
}
.dark-panel {
background-color:#DBDED9;
}
.light-panel {
background-color: #fff;
}
.inner_content {
margin-left:30px;
margin-top:30px;
}
.menu-button {
margin-top:8px;
float:right;
text-decoration:none;
}
.menu-button .flaticon-menu:before {
font-size:28px;
}
.menu-button:hover {
color:#000;
}
/*Menu page*/
.menuitem {
}
.menuitem h2,.menuitem h3 {
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
}
#slide-menu {
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(255,255,255,0.95);
}
#slide-menu .col {
padding:0 12px;
}
#slide-menu .col.bordered {
border-left:1px solid #ddd;border-right:1px solid #ddd;
}
#slide-menu .col h2 {
margin-top:0;
}
.slide-menu-nav {
width:100%;
width:calc(100% - 40px);
margin:0;
padding:0;
list-style-type:none;
font-size:12px;
line-height: 150%;
display:table;
/*border-top:1px solid #eee;*/
}
.slide-menu-nav > li {
color:#000;
font-weight:bold;
font-size: 18px;
margin-bottom:4px;
/*border-right:1px solid #eee;
display:table-cell;
vertical-align:middle;
width:24%;
width:calc(24% - 1px); */
}
.slide-menu-nav > li:last-child {
border-right:none;
}
.slide-menu-nav > li ul {
margin:0;
padding:0;
}
.slide-menu-nav > li ul li {
display:block;
text-align:left;
}
.slide-menu-nav li a {
text-decoration:none;
color:#666;
}
.slide-menu-nav li a:hover {
text-decoration:none;
color:#CC0099;
}
#slide-menu-close {
color:#666;
padding:20px;
margin-right:10px;
float:right;
text-decoration:none;
}
#slide-menu-close:hover {
color:#CC0099;
}
#slide-menu-close .flaticon-cancel:before {
font-size:18px;
}
#side_menu li.group-title {
margin-top:20px;
margin-bottom:5px;
font-weight:bold;
color:#000;
}
#home_title_wrapper {
text-align:center;
width:100%;
margin-top:280px;
}
#home_title {
width:420px;
margin:0 auto;
}
#home_title img {
width:100%;
}
#enter_link {
font-size:15px;
color:#3E8F3E;
font-weight:bold;
}
#artworks_list {
margin:0 10px 20px 0;
padding:0;
list-style-type:none;
font-size:11px;
line-height:150%;
color:#666;
}
#artworks_list a,#main_nav a {
color:#333;
text-decoration:none;
}
#artworks_list a:hover,#main_nav a:hover {
}
/*PAINTING VIEW PAGE*/
/*popup layer*/
#overlayer {
position:fixed;
top:0;
left:0;
margin:0;
width:100%;
height:100%;
min-height:520px;
background-color:#FFFFFF;
display:none;
z-index:101;
}
#outer_frame {
width:100%;
height:100%;
text-align:center;
position:relative;
overflow:hidden;
}
#rightbar {
width:120px;
height:100%;
display:table;
vertical-align: middle;
float:right;
clear:left;
position:relative;
background:white;
z-index:102;
}
.close_msg {
font:normal 13px Verdana,Arial,sans-serif;
}
.close_msg:hover {
cursor: pointer;
}
a.close_window {
width:25px;
height:25px;
font-size:20px;
-webkit-font-smoothing: antialiased;
text-decoration:none;
color:#666;
/*
font-variant: normal;
font-weight: 400;
speak: none;
text-transform: none;
line-height:80%;
*/
display:block;
opacity:0.6;
/*font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
font-size: 35px;
line-height: 35px;*/
}
a.close_window:hover {
opacity: 1;
text-decoration: none;
color: #666;
}
#close_zoomview {
position:absolute;
right:48px;
top:42px;
z-index:1000;
}
#close_zoomview:hover {
cursor:pointer;
opacity: 1;
-moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
}
#controls_position {
height:calc(100% - 50px);
margin-top:50px;
display:table-cell;
vertical-align:middle;
}
#controls_wrap {
height:400px;
padding:10px 10px 50px 10px;
/*margin-top:-360px;*/
text-align:center;
}
#controls_wrap .top,#controls_wrap .bottom {
padding:10px 0;
margin:0;
font-size: 40px;
font-family: Roboto,Helvetica,Arial,sans-serif;
font-variant: normal;
font-weight:lighter;
speak: none;
text-transform: none;
/*-webkit-font-smoothing: antialiased;*/
color:#aaa;
}
#slider_wrap {
padding:10px 20px;
}
#slider {
height:300px;
margin:auto;
}
#inner_frame {
height:100%;
}
#image:hover,#slides:hover {
cursor: zoom-in;
}
#image {
margin-bottom: 20px;
}
/*Tilezoom*/
.zoom-holder {
position:absolute;
overflow:hidden;
}
.zoom-tiles {
position:absolute;
z-index:2;
}
.zoom-watermark {
position:absolute;
bottom:0;
right: 0;
text-align: right;
}
.zoom-watermark img {
width: 48%;
margin-right:1%;
margin-bottom: 1%;
/*opacity:0.6;*/
}
/*end of overlay styles*/
.artwork_label {
margin-right:20px;
line-height: 150%;
padding:10px 0;
height:200px;
/*font-family: Roboto, Helvetica,Arial,sans-serif;*/
}
.artwork_label h1 {
font-family: Helvetica, Arial, sans-serif;
font-size:14px;
font-weight:normal;
font-style: italic;
margin-top:0;
color:#444;
line-height: 100%;
-webkit-font-smoothing: antialiased;
}
.artwork_label h2 {
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
}
.image_frame {
width:100%;
/*text-align:center;
* display:table-cell;
* vertical-align:middle;
*/
padding:10px 10px 0 0;
}
.image_frame #main_image {
max-width:80%;
height:auto;
}
.artwork_details {
margin-top:20px;
}
.icon {
}
.buttons {
width:50px;
float:right;
padding-top:10px;
text-align:right;
}
.buttons a {
color:#333;
font-size:11px;
text-decoration:none;
}
.buttons ul {
margin:0;
padding:0;
list-style-type: none;
display: block;
}
.price-tag {
font-size:13px;
font-weight:bold;
letter-spacing: 0.5px;
}
#pager {
width:100px;
margin:0 auto;
padding:20px 0;
}
#pager span {
width:24px;
}
#pager .prev,#pager .next,#pager .disabled,#pager .menu,.buttons .icon,.back_link {
display:inline-block;
width:24px;
height:20px;
margin:0 5px 0 0;
padding:4px;
font-variant: normal;
font-weight: normal;
font-size:18px;
speak: none;
text-transform: none;
-webkit-font-smoothing: antialiased;
text-decoration:none;
text-align:center;
vertical-align:middle;
color:#888;
/*background-color:#fff;*/
border:1px solid #ccc;
}
#pager .prev:hover,#pager .next:hover,#pager .menu:hover,.buttons .icon:hover {
color:#000;
border-color: #666;
/*background-color: #666;*/
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
margin-left: 0;
}
/*
#pager .prev {
content: '\e82e';
}
#pager .next {
content: '\e826';
}
*/
#pager .disabled {
pointer-events: none;
cursor: default;
color:#ccc;
border-color:#ccc;
}
a.view-detail,a.view-exhibition {
text-transform: uppercase;
color:#999;
font-size: 12px;
}
a.view-detail,a.view-exhibition:hover {
color:#666;
}
.artwork_description {
margin-top: 50px;
width: 75%;
border-top: 1px solid #ccc;
}
/*Exhibition view page*/
a.back-button {
display: inline-block;
text-decoration: none;
/*-webkit-font-smoothing: antialiased;*/
color: #333;
font-weight: 200;
line-height: 150%;
opacity: 0.5;
/* position: relative;
top: -30px;*/
}
a.back-button:hover {
color: #333;
opacity: 1;
}
#slideshow {
display: table;
width: 100%;
height:680px;
text-align: center;
position: relative;
}
.position-carousel {
width: 100%;
/*margin-top: -320px;
position:absolute;
top:50%;*/
height: 100%;
display: table-cell;
vertical-align: middle;
}
#slides {
width: 800px;
margin:0 auto;
visibility:hidden;
/*display: none;*/
}
.cs-loader {
position: absolute;
top: 100px;
left: 0;
height: 90%;
height: calc(100% - 200px);
width: 100%;
background-color: white;
z-index: 1000;
}
.cs-loader-inner {
transform: translateY(-50%);
top: 50%;
position: absolute;
width: calc(100% - 200px);
color: #FFF;
padding: 0 100px;
text-align: center;
z-index:1000;
}
.cs-loader-inner label {
width: 15px;
height: 15px;
background-color: #ccc;
opacity: 0;
display:inline-block;
margin:0 5px;
}
@keyframes lol {
0% {
opacity: 0;
transform: translateX(-300px);
}
33% {
opacity: 1;
transform: translateX(0px);
}
66% {
opacity: 1;
transform: translateX(0px);
}
100% {
opacity: 0;
transform: translateX(300px);
}
}
@-webkit-keyframes lol {
0% {
opacity: 0;
-webkit-transform: translateX(-300px);
}
33% {
opacity: 1;
-webkit-transform: translateX(0px);
}
66% {
opacity: 1;
-webkit-transform: translateX(0px);
}
100% {
opacity: 0;
-webkit-transform: translateX(300px);
}
}
.cs-loader-inner label:nth-child(6) {
-webkit-animation: lol 3s infinite ease-in-out;
animation: lol 3s infinite ease-in-out;
}
.cs-loader-inner label:nth-child(5) {
-webkit-animation: lol 3s 100ms infinite ease-in-out;
animation: lol 3s 100ms infinite ease-in-out;
}
.cs-loader-inner label:nth-child(4) {
-webkit-animation: lol 3s 200ms infinite ease-in-out;
animation: lol 3s 200ms infinite ease-in-out;
}
.cs-loader-inner label:nth-child(3) {
-webkit-animation: lol 3s 300ms infinite ease-in-out;
animation: lol 3s 300ms infinite ease-in-out;
}
.cs-loader-inner label:nth-child(2) {
-webkit-animation: lol 3s 400ms infinite ease-in-out;
animation: lol 3s 400ms infinite ease-in-out;
}
.cs-loader-inner label:nth-child(1) {
-webkit-animation: lol 3s 500ms infinite ease-in-out;
animation: lol 3s 500ms infinite ease-in-out;
}
/*End exhibition view*/
.back_button a {
text-decoration:none;
color:#555;
}
.back_button a:hover {
color:#000;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
.form-error {
color:#CC0066;
}
.form input[type=text].form-error,.form input[type=search].form-error,.form input[type=email].form-error,.form textarea.form-error {
-webkit-box-shadow: 0px 1px 8px 0px rgba(252,0,0,0.53);
-moz-box-shadow: 0px 1px 8px 0px rgba(252,0,0,0.53);
box-shadow: 0px 1px 8px 0px rgba(252,0,0,0.53);
}
/*EXHIBITIONS PAGE*/
.control_arrows {
position: absolute;
top: 50%;
left: 0;
margin-top: -70px;
width: 100%;
/* width: calc(100% - 20px);
padding: 10px;*/
z-index:10;
}
#arrow_left,#arrow_right {
opacity: 0.25;
text-decoration: none;
font-size:46px;
position: relative;
}
.flaticon-left-arrow,.flaticon-right-arrow {
font-weight:200;
-webkit-font-smoothing: antialiased;
}
#arrow_left:hover,#arrow_right:hover { opacity: 1; color: #333; }
#arrow_left { float: left; left: -10px;}
#arrow_right { float:right; right: -10px;}
.navigation {
margin:30px 0 0 0;
padding:0;
list-style-type: none;
width: 100%;
text-align: center;
/*position: absolute;
bottom:0;*/
}
.controls.previous {
left: -100px;
color:#999;
display: block;
}
.controls.next {
right: -100px;
color:#999;
display: block;
}
.nav {
width:100px;
height:100px;
display: inline-block;
overflow: hidden;
margin:6px;
}
.nav img {
width: 100%;
}
/*
* Gridism
* A simple, responsive, and handy CSS grid by @cobyism
* https://github.com/cobyism/gridism
*/
/* Preserve some sanity */
.grid,
.col {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Set up some rules to govern the grid */
.grid {
display: block;
clear: both;
}
.grid .col {
float: left;
width: 100%;
padding: 0 10px;
min-height:1px;
}
/* This ensures the outer gutters are equal to the (doubled) inner gutters. */
/*.grid .col:first-child { padding-left: 20px; }
.grid .col:last-child { padding-right: 20px; }*/
/* Nested grids already have padding though, so let’s nuke it */
.col .col:first-child { padding-left: 0; }
.col .col:last-child { padding-right: 0; }
.col .grid:first-child > .col { padding-top: 0; }
.col .grid:last-child > .col { padding-bottom: 0; }
/* Let people nuke the gutters/padding completely in a couple of ways */
.no-gutters .col,
.col.no-gutters {
padding: 0 !important;
}
.col.gutter-30 {
padding:0 30px;
}
.col.gutter-30:first-child {
padding-left:10px;
}
/* Wrapping at a maximum width is optional */
.wrap .grid,
.grid.wrap {
/*max-width: 978px;*/
margin: 0 auto;
}
/* Width classes also have shorthand versions numbered as fractions
* For example: for a grid unit 1/3 (one third) of the parent width,
* simply apply class="w-1-3" to the element. */
.grid .full, .grid .w-1-1 { width: 100%; }
.grid .half, .grid .w-1-2 { width: 50%; }
.grid .one-third, .grid .w-1-3 { width: 33.3332%; }
.grid .two-thirds, .grid .w-2-3 { width: 66.6665%; }
.grid .one-quarter, .grid .w-1-4 { width: 25%; }
.grid .three-quarters, .grid .w-3-4 { width: 75%; }
.grid .one-fifth, .grid .w-1-5 { width: 20%; }
.grid .two-fifths, .grid .w-2-5 { width: 40%; }
.grid .three-fifths, .grid .w-3-5 { width: 60%; }
.grid .four-fifths, .grid .w-4-5 { width: 80%; }
.grid .one-sixth, .grid .w-1-6 { width: 15%; }
.grid .five-sixths, .grid .w-5-6 { width: 85%; }
.grid .one-eighth, .grid .w-1-8 { width: 12.5%; }
.grid .seven-eighths, .grid .w-7-8 { width: 87.5%; }
.grid .golden-small, .grid .w-g-s { width: 38.2716%; } /* Golden section: smaller piece */
.grid .golden-large, .grid .w-g-l { width: 61.7283%; } /* Golden section: larger piece */
/* Clearfix after every .grid */
.grid {
*zoom: 1;
}
.grid:before, .grid:after {
display: table;
content: "";
line-height: 0;
}
.grid:after {
clear: both;
}
/* Utility classes */
.align-center { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.pull-left { float: left; }
.pull-right { float: right; }
/* Responsive Stuff */
@media screen and (max-width: 800px) {
#wrapper {
padding:10px;
min-width:90%;
}
#header_inner {
/*min-width:400px;*/
}
.grid .col {
width: 100% !important;
padding-left: 2px;
padding-right: 2px;
}
.col.gutter-30:first-child {
padding-left:2px;
}
#main_nav {
/*width:100%;
text-align:center;
display: block;
*/
font-size:14px;
}
#main_nav li a,#main_nav .nolink {
padding:6px;
}
#main_nav > li:first-child {
display:none;
}
#main_nav .submenu li {
text-align: left;
}
#main_nav .submenu li a {
padding:8px 12px;
}
.grid .w-1-5 { min-width: 160px; }
.image_frame {
height:auto;
width:100%;
}
#cover_image {
width:100%;
height:auto;
}
}
@media screen and (max-width: 568px) {
/*=====HIDE FOR MOBILE DEVICES=======*/
.mobile-hide {
display:none;
}
.mobile-view,.mobile-view * {
display: block;
}
/* Stack anything that isn’t full-width on smaller screens */
#header .trigger {
display:block;
}
#main_nav {
display: none !important;
}
h3 {
font-size:16px;
}
p {
font-size:17px;
}
img.mobile-view {
margin-bottom: 20px;
}
blockquote {
font-size:18px;
}
.figure {
margin:0 !important;
}
.caption {
margin-left:0;
}
#slides {
width: auto;
}
/* Sometimes, you just want to be different on small screens */
.center-on-mobiles {
text-align: center !important;
}
.hide-on-mobiles {
display: none !important;
}
#searchbox,#searchbox input[type=search] {
width:100%;
}
.item {
margin-bottom:10px;
}
#header {
/*margin-bottom:10px;
background-color: #fff;
padding-bottom: 8px;*/
}
#side_menu {
width:100%;
}
#wrapper {
padding:10px;
min-width:90%;
}
#logo {
display: block;
}
#main_nav {
display:none;
text-align:left;
display: block;
width:100%;
margin-top:20px;
}
#main_nav li {
/*display:block;*/
margin:0 4px;
text-align:center;
}
.dropmenu .submenu {
top:21px;
}
#cover_image {
width:100%;
height:auto;
}
.artwork_label {
margin-top:0;
padding:10px 0;
height:auto;
font-size: 17px;
}
.artwork_label h1 {
font-size: 20px;
text-transform: none;
font-style: normal;
}
.artwork_label h2,.price-tag {
font-size:17px;
}
.image_frame {
height:auto;
width:100%;
}
.image_frame #main_image {
width:100% !important;
height:auto;
}
#slide-menu .col {
padding:none;
}
#slide-menu .col.bordered {
border:none;
padding:none;
}
#slide-menu {
padding:0;
}
#slide-menu-close {
margin:0;
}
#pager {
padding:2px 0;
}
#pager .prev,#pager .next,#pager .disabled,#pager .menu,.buttons .icon {
display:inline-block;
width:38px;
height:26px;
font-size:22px;
padding:8px 6px 6px 6px;
}
.back_link {
text-decoration:none;
color: #fff;
border: none;
padding-top:0;
font-size:28px;
}
.control_arrows {
float:right;
margin-top:10px;
}
.page_header {
width:calc(100% - 50px);
width:80%;
}
.artwork_description {
width: 100%;
}
}
@media screen and (max-width: 360px) {
#main_nav {
display:none;
}
#main_nav li {
font-size:14px;
margin:0 3px;
}
#logo {
margin-top: 10px;
margin-left: -10px;
}
#logo h1 {
/*width:160px;
height:30px;
background: url(../art/logo2_sm.png) no-repeat;
*/
margin:0;
}
}
@media screen and (max-height: 638px) {
.image_frame #main_image {
max-height:620px;
width:auto;
max-width:800px;
}
}
/* Expand the wrap a bit further on larger screens */
@media screen and (min-width: 1180px) {
.wider .grid {
max-width: 1180px;
margin: 0 auto;
}
}