/* ROSWITA CSS STYLES */
/* ======== GOOGLE FONTS*/
/*@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|OswaldOswald:300,400);*/

@font-face {
    font-family: 'oswaldlight';
    src:url(../fonts/oswald-light-webfont.eot);
	src: url(../fonts/oswald-light-webfont.woff2) format('woff2'),
		url(../fonts/oswald-light-webfont.woff) format('woff'),
		url(../fonts/oswald-light-webfont.ttf) format('truetype'),
		url(../fonts/oswald-light-webfont.svg) format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'open_sansregular';
    src:url(../fonts/opensans-regular-webfont.eot);
    src:url(../fonts/opensans-regular-webfont.woff2) format('woff2'),
		url(../fonts/opensans-regular-webfont.woff) format('woff'),
        url(../fonts/opensans-regular-webfont.ttf) format('truetype'),
        url(../fonts/opensans-regular-webfont.svg#open_sansregular) format('svg');
    font-weight: normal;
    font-style: normal;}

/*anchor on nav when active does not work*/
/* ======== GLOBAL*/
body {color:rgba(75,75,75,1.00);
	background-color:#fff;
	font-family: 'open_sansregular', sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: 'oswaldlight', sans-serif;
	text-transform:uppercase;}
h2 {font-weight: normal!important;
	letter-spacing:.1em;
	padding:2% 0 5% 3%;}
p {	font-size:.9em;
	text-align:left;
	padding:1% 3%;}
li {display:block;}
a {	text-decoration:none;
	color:#455A6E;}
a:hover {text-decoration:underline;}
.hidden {visibility:hidden;}
.caption {font-size:.7em;
	padding:0 0 0 70%;}
/************Main Container*/	
#container {
	height:100vh;
	width:90%;
	max-width:960px;
	margin:5% auto;
	}
nav a { 
	width: 100%;
	font-family: 'oswaldlight', sans-serif;
	text-transform:uppercase;
	color:#95A1AD;
	font-size:1.3em;
	letter-spacing:.1em;
	padding:5px 3% 5px 1%;
	float:left;}
nav a:hover {
	text-decoration:none;
	color:rgba(216,87,154,1.00);}
nav a:active {color:rgba(216,87,154,1.00);}
#mainNav {
	text-align:left;
	position:relative;
	right:-40%;/*he put this in just to make sure above works, but need width to make it 100%*/
	}
#mainNav a:active {color:rgba(216,87,154,1.00);}
#homeLogo {
	background-image:url(../images/logoR1.png);
	background-size:90%;
	background-repeat:no-repeat;
	background-position:top left;
	max-width: 146px;
	height:80px;
	position:relative;
	left:-6%;/*he put this in just to make sure above works, but need width to make it 100%*/
	margin-top:12%;
	margin-left:2%}
#homeLogo h1 {display:none;}
#homeLogo a {
	text-indent:-9999px;
	padding:5% 40% 40% 50%;
	position:relative;
	left:0%;/*he put this in just to make sure above works, but need width to make it 100%*/
	margin-top:18%;}
#homeLogo a:hover {
	background-color: rgba(77,97,116,0.30);}

/*SLICKNAV*/
.slicknav_menu {
	display:none;
}
/* ======== FOOTER*/
#mainFooter {
	font-size:.7em;
	height:50px;
	line-height:15px;
	text-align:center;
	left:30%;
	padding-top:10px;
	position:relative;
	bottom:0px;
	width:100%;}

/* ======== COLUMNS changed some!*/	
.col16 {width:15.66%;}
.col13 {width:29.33%;}
.col23 {width:65.66%;}
.col12 {width:49%;}
.col14 {width:21%;}
.col34 {width:71%;}
.col15 {width:16%;}
.col25 {width:36%;}
.col35 {width:56%;}
.col55 {width:100%;}

.col16, .col13, .col23, .col12, .col14, .col34, .col15, .col25, .col35,  .col55 {margin:.5%;padding:0 0%;}

.fl {float:left;}
.fr {float:right;}
.clear {clear:both;}

/*Artworks page*/
#contentArtworks {
	width:77.66%;
	height:auto;
	margin-left:2%;
	margin-top:-22%;
	background-position:center;
	position:relative;
	left:9%;
	/*outline:1px solid rgba(151,163,175,0.29);*/
   /* from: https://css-tricks.com/seamless-responsive-photo-grid
	Prevent vertical gaps */
   line-height: 0;
   
   -webkit-column-count: 1; /* Chrome, Safari, Opera */
   -moz-column-count: 1; /* Firefox */
    column-count: 1;}
#contentArtworks img {
	width: 32.8%;
	margin-bottom: 2px;}
.p-row2 {width:24.4%!important;}
hr {border: 0;
	margin:3px;}
/*#outerArtworks {
	width:77.66%!important;
	height:auto;
	margin-left:2%;
	margin-top:-25%;
	background-position:center;
	position:relative;*/

   /* from: https://css-tricks.com/seamless-responsive-photo-grid
	Prevent vertical gaps 
   line-height: 0;}*/
#artMenu a {color:rgba(69,90,110,1.00);}
#artMenu a:hover {color:#D8579A;}
#artMenu a:active {color:#D8579A;}

/*lightgallery overrides*/
.lg-outer .lg-thumb-outer {background-color:#FFF;}
.lg-backdrop {background-color:#FFF;}
.lg-sub-html, .lg-toolbar {
	background-color: rgba(0,0,0,.00)}
.lg-toolbar {/*can delete this whole thing and counter will be back to 100% width, with items at either end*/
	left: 10%!important;
	width: 80%!important;}
.lg-actions .lg-next, .lg-actions .lg-prev {
	font-size: .9em;
	color:#95A1AD;
	background-color: rgba(0,0,0,.00);
	padding: 50px 50px 50px}
.lg-actions .lg-next:hover, .lg-actions .lg-prev:hover {
	color:rgba(69,90,110,1.00);}
#lg-counter {font-size: .7em;
	color:#95A1AD;}
.lg-toolbar .lg-icon {
	font-size: 1em;
	color:#95A1AD;}
.lg-toolbar .lg-icon:hover {color:rgba(69,90,110,1.00);}
.lg-outer .lg-toogle-thumb {
	background-color:#FFF;
	color:#95A1AD;
	font-size: 40px;}
.lg-outer .lg-toogle-thumb:hover, .lg-outer.lg-dropdown-active #lg-share {color:rgba(69,90,110,1.00);}
.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {border-color:#D8579A;}
.lg-outer .lg-thumb-item {
	float: left;
	border: 1px solid #FFF;
	border-radius: 2px;}
.lg-thumb-open .lg-img-wrap {
	padding-top:5px;
    padding-bottom:100px;}/*use this to make taller images not crop when viewed with thumbnails-yippee*/
.lg-sub-html {
	bottom:0;/*can change this to top*/
	color:rgba(69,90,110,1.00);/*changed this*/
	font-size: 16px;
	left:80%;/*changed this (from 0to 25%. I assume as it is at center, half of 50%  is 25...?)*/
	padding: 10px 40px;
	position:fixed;
	right:0;
	text-align:center;
	z-index: 1080;}
.lg-sub-html h4 {
	letter-spacing:.1em;
	font-size: 13px;/*changed this from 12px*/
	text-align:left;
	margin: 0 0 15px 0;
	font-weight: 300;}
.lg-sub-html p {
	padding-left:0px;
	font-size: 12px;/*changed this from 12px*/}
.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html {
	bottom: 25%;}/*changing this to 650px moves it to top, but only on specific window size. If you change the size it jumps all over the place*/
/*Landscape page*/
#contentArt {
	width:77.66%;
	height:auto;
	margin-left:2%;
	margin-top:-22%;
	background-position:center;
	position:relative;
	left:9%;
	/*outline:1px solid rgba(151,163,175,0.29);*/
   /* from: https://css-tricks.com/seamless-responsive-photo-grid
	Prevent vertical gaps */
   line-height: 0;
   
   -webkit-column-count: 3;/*there were 5 to start, and gap was 0px*/
   -webkit-column-gap:   4px;
   -moz-column-count:    3;
   -moz-column-gap:      4px;
   column-count:         3;
   column-gap:           4px;}

#contentArt img {
  /* Just in case there are inline attributes */
 	 width: 100% !important;
  	height: auto !important;
	margin-bottom: 4px;}/*added this*/

/*Bio page*/	
#contentBio {
	width:77.66%;
	margin-left:2%;
	margin-top:-22%;
	background-position:center;
	position:relative;
	left:9%;
	line-height:1.6em;
	height:100vh;
	resize: vertical;
	overflow: auto;}
#contentBio p {padding:1% 0;}
#contentBio h2 {margin-top:-70px;
	color:#D8579A;}
#biofl {width:35%;
	float: left;
	padding:1% 3% 0 0;}
#biofr {width:42%;
	float:right;
	padding:1% 0 1% 2%;}

/*Exhibition page*/	
#contentEx {
	width:77.66%;
	margin-left:2%;
	margin-top:-22%;
	background-position:center;
	position:relative;
	left:9%;
	outline:1px solid rgba(151,163,175,0.29);
	line-height:1.2em;
	resize: vertical;
	overflow: auto;
	height:100vh;
	background-size:100%;}
td {font-size:.9em;
	padding:5px 23px;
    text-align: left;}

/*Contact page*/	
#contentContact {
	line-height:1.2em;
	height:554px;
	margin-left:2%;
	margin-top:-22%;
	width:750px;
	left:9%;
	background-image:url(../images/portrait/p-sm/selfportrait_dec2012-sm.jpg);
	background-repeat:no-repeat;
	background-position:bottom right;
	position:relative;
	background-size:50%;
	outline:1px solid rgba(151,163,175,0.29);}
#infoContact li {font-size:.9em;
	padding-left:3%;}
#infoContact h2{padding-bottom:75%}
	 
/*  ========  ========  ========  ======== ===================================== *RESPONSIVE*/


@media only screen and (min-width: 48em) and (max-width: 57.5em) {}

	/*lightgallery overrides*/
.lg-toolbar {
	left: 0%!important;
	width: 100%!important;}
#lg-counter {font-size: .7em;}
.lg-toolbar .lg-icon {
	font-size: .8em;}
.lg-sub-html {
	left:85%;
	padding: 10px 20px 13%;
	text-align:left;}
.lg-sub-html h4 {padding-left:10px;}
.lg-sub-html p { ;
			padding-left:10px;}
.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html {
	bottom: 7%}

@media only screen and (max-width: 48em) {

#homeLogo {display:none;}

/*SLICKNAV mobile*/
#menu {
	display:none;}
.logo {
	margin-top:5px;
	display:inline-block;
	float: left;
	width: 30%;
	min-width:180px;
	height: auto;}
.slicknav_menu {
	width: 100%;
	font-family: 'oswaldlight', sans-serif;
	text-transform:uppercase;
	color:#95A1AD;
	font-weight: 300;
	font-size:1.2em;
	letter-spacing:.1em;
	text-align: right;
	padding:5px 1% 5px 1%;
	background:#FFF;
	display:block;
	z-index:1000;}
.slicknav_menu a {
	text-decoration:none;
	display:block;
 	height:30px;
  	line-height:16px;
  	padding-left:5%;
 	background:none;
  	color:#95A1AD;}
.slicknav_nav a:hover {background:rgba(69,90,110,0.30);}
.slicknav_nav .slicknav_item a {
    padding-left:0;
    margin:2%; }
.slicknav_nav ul {
    padding: 0;
    margin: 0 0 0 10%; }
.slicknav_btn {
	background-color:rgba(216,87,154,1.00)!important;
	margin-top:5.5%;
	margin-right:5%;
	height:auto;}

/* COLUMNS mobile*/  
.col16, .col13, .col23, .col12, .col14, .col34, .col15, .col25, .col35,  .col55 {
	width:95%;
	float:none!important;
	margin:0 auto;}
	
	#contentArtworks  {
		margin-top:-3%;
		left:6%;
		width:90%!important;}
	#contentArtworks img {
		width:32.2%}
	.p-row2 {width:23.8%!important;}
	#mainFooter {
		height:30px;
		text-align:center;
		left:0%;
		padding-top:0px;
		bottom:0px;}
	
	#contentArt {
		margin-left:2%;
		margin-top:-5%;}
	
	/*lightgallery mobile*/
	.lg-toolbar {
		background-color: rgba(255,255,255,0.70);
		left: 0%!important;
		width: 100%!important;}
		.lg-actions .lg-next, .lg-actions .lg-prev {
		font-size: .7em;
		background-color: rgba(0,0,0,.00);
		padding: 50px 5px 30px}
	.lg-sub-html {
		left:0%;
		padding: 10px 40px 6%;
		text-align:left;
		background-color: rgba(255,255,255,0.70);}
	.lg-sub-html h4 { line-height: .7em;
		margin-bottom:0;}
	.lg-sub-html p { display: inline;
		line-height: .6em;}
	.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html {
		bottom: 6%}
	#contentBio {
		width:90%!important;
		margin-left:-2%;
		margin-top:-2%;
		height:100vh;}
	#contentBio h2 {margin-top:10px;}
	#contentBio p{font-size:.9em;
		line-height:1.6em;}
	#contentEx {
		width:90%!important;
		margin-left:-2%;
		margin-top:-2%;
		background-position:center;
		position:relative;
		outline:1px solid rgba(151,163,175,0.29);
		line-height:1.6em;
		resize: vertical;
		overflow: auto;
		height:100vh;
		background-size:100%;}
	td {font-size:.8em;
		line-height:1.2em;
		padding:2px 11px;
		text-align: left;}
	#contentContact {
		line-height:1em;
		height:auto;
		margin-left:-4%;
		margin-top:-2%;
		width:90%!important;
		background-position:top right;
		position:relative;
		background-size:50%;}
#infoContact li, p {font-size:.8em!important;;
	padding-left:3%;}
#infoContact h2{padding-bottom:75%}

}