/* @override 
	http://localhost:8888/site/templates/styles/uo.css
	http://localhost:8888/site/templates/styles/magnific-popup.css
*/

@font-face {
	font-family: 'SourceSansProExtraLight';
	src: url('../fonts/SourceSansPro-ExtraLight-webfont.eot');
	src: url('../fonts/SourceSansPro-ExtraLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SourceSansPro-ExtraLight-webfont.woff') format('woff'),
         url('../fonts/SourceSansPro-ExtraLight-webfont.ttf') format('truetype'),
         url('../fonts/SourceSansPro-ExtraLight-webfont.svg#SourceSansProExtraLight') format('svg');
	font-weight: normal;
	font-style: normal;
}

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

@font-face {
	font-family: 'SourceSansProRegular';
	src: url('../fonts/SourceSansPro-Regular-webfont.eot');
	src: url('../fonts/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SourceSansPro-Regular-webfont.woff') format('woff'),
         url('../fonts/SourceSansPro-Regular-webfont.ttf') format('truetype'),
         url('../fonts/SourceSansPro-Regular-webfont.svg#SourceSansProRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'SourceSansProBold';
	src: url('../fonts/SourceSansPro-Bold-webfont.eot');
	src: url('../fonts/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SourceSansPro-Bold-webfont.woff') format('woff'),
         url('../fonts/SourceSansPro-Bold-webfont.ttf') format('truetype'),
         url('../fonts/SourceSansPro-Bold-webfont.svg#SourceSansProBold') format('svg');
	font-weight: bold;
	font-style: normal;
}

/* Copyright 2008-2015 by (ths) by.ths.nu */



body {
	color: #525252;
	background: #ffffff;
	font: 300 16px "SourceSansProExtraLight","HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

input {
	
}

hr {
	height: 1px;
	border: 0;
	background: #a0a0a0;
	color: #373737;
}

hr.top {
	height: 1px;
	border: 0;
	background: #a0a0a0;
	color: #373737;
	margin-bottom: 22px;
	margin-top: 11px;
	clear: both;
}

img {
	border: 0;
}

#banner {
	position: absolute;
	top: 3px;
	right: 3px;
	color: #6c6c6c;
	font: normal 10px Helvetica, "Helvetica Neue", Arial, Geneva, sans-serif;
}

#demo {
	position: absolute;
	top: 0;
	color: #fff;
	font: bold 20px Helvetica, "Helvetica Neue", Arial, Geneva, sans-serif;
	background-color: rgba(250,59,101,0.87);
	padding: 8px;
	width: 100%;
	left: 0;
}

.gold {
	color: #d7c44b;
}

a {
	outline: none;
}

a:link {
	color: #525252;
	text-decoration: none;
}

a:visited {
	text-decoration: none;
	color: #525252;
}

a:hover {
	color: #ff7405;
	text-decoration: none;
}

a:active {
	color: #ff7405;
	text-decoration: none;
}

#active a:link {
	color: #525252;
	text-decoration: none;
	font-family: SourceSansProRegular;
}

#active a:visited {
	text-decoration: none;
	color: #525252;
}

#active a:hover, #active a:active {
	color: #ff7405;
	text-decoration: none;
}

#container {
	text-align: left;
}

#content {
	text-align: left;
	
}

#newsletter {
	width: 600px;
	margin: 30px;
}

/*Main Nav */

.menu {
	margin: 0 0 15px;
	
}

.linie {
	
	border-bottom: 1px solid #a0a0a0;
	margin-top: 14px;
}

#line {
	border-bottom: 1px solid #a0a0a0;
	height: 18px;
	margin-bottom: 20px;
}



#nav_artists ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#nav_artists li {
	float: left;
	margin: 0 5px 0 0;
	padding: 0;
}
#nav_artists li a:link, #nav_artists li a:visited {
	color: #525252;
}
#nav_artists li a:hover, #nav_artists li a:active {
	color: #ff7405;
}
#subnav {
	margin-top: 15px;
}
#mainmenu {
	text-decoration: none;
	text-transform: uppercase;
	float: right;
	text-align: right;
}
#mainmenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#mainmenu li {
	float: left;
	margin: 0;
	padding: 0;
}
#mainmenu li a:link, #mainmenu li a:visited {
	color: #525252;
}
#mainmenu li a:hover, #mainmenu li a:active {
	color: #ff7405;
}
#nav_artists {
	margin-right: 30px;
	margin-left: 30px;
}
#header {
	border-bottom: 1px solid #a0a0a0;	
	margin: 35px 30px 15px;
	padding: 0 0 15px;
}
#header_container {
	width: 100%;
	background: rgba(255, 255, 255, 0.95);
	top: 0;
	left: 0;
	position: fixed;
	z-index: 1000;
}

#header_sticky {
	margin: 35px 30px 0;
	border-bottom: 1px solid #a0a0a0;
	padding-bottom: 15px;
}

#logo {
	float: left;
	padding-top: 2px;
}
#logohover {
	width: 268px;
	height: 27px;
	background: url(../i/upperorange_logo_s.png) no-repeat;
}
#logohover:hover {
	background: url(../i/upperorange_logo_o.png) no-repeat;
}
#header_left {
	float: left;
}

#header_right {
	float: right;
}

#phone {
	color: #525252;
	text-align: right;
	margin-bottom: 26px;
	font-size: 40px;
}

#cleaner {
	clear: both;
}

#submenu {
	text-decoration: none;
	text-transform: uppercase;
	float: right;
	text-align: right;
	
}

#submenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#submenu li {
	float: left;
	margin: 0;
	padding: 0;
}

#submenu li img {
	bottom: 4px;
	position: relative;
}

#submenu li a:link, #submenu li a:visited {
	color: #595959;
}

#submenu li a:hover, #subenu li a:active {
	color: #ff7405;
}

.arroworange {
	padding-right: 7px;
	padding-bottom: 30px;
	bottom: 4px;
	position: relative;
}

.arrowleft {
	padding-right: 7px;
}

.arroworight {
	padding-left: 7px;
}

#city {
	text-transform: uppercase;
	font-size: 15px;
	font-family: SourceSansProLight;
}

h1 {
	color: #525252;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	font-size: 24px;
	font-weight: normal;
	font-style: normal;
}

#warning {
	color: #f23a3e;
	font-size: 11px;
}

#email {
	color: #525252;
	text-transform: uppercase;
	float: left;
	margin-bottom: 11px;
	margin-left: 3px;
	margin-top: 3px;
}

#email a:link {
	color: #525252;
	text-decoration: none;
}

#email a:visited {
	text-decoration: none;
	color: #525252;
}

#email a:hover {
	color: #ff7405;
	text-decoration: none;
}

#email a:active {
	color: #ff7405;
	text-decoration: none;
}

#artist {
	color: #525252;
	text-transform: uppercase;
	font-size: 17px;
}

#new {
	color: #ff7405;
	text-transform: uppercase;
	font-size: 17px;
}

#orange {
	color: #ff7405;
}

.required {
	color: #525252;
}

.bold {
	font-family: SourceSansProRegular;
}

#artist a:link {
	color: #525252;
	text-decoration: none;
	font-family: SourceSansProRegular;
}

#artist a:visited {
	text-decoration: none;
	color: #525252;
	font-family: SourceSansProRegular;
}

#artist a:hover {
	color: #ff7405;
	text-decoration: none;
	font-family: SourceSansProRegular;
}

#artist a:active, .active {
	color: #525252;
	text-decoration: none;
	font-family: SourceSansProRegular;
}

/*Thumbs */
#thumbs_container {	
	width: 1480px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 115px;
}
.thumbs_frontpage {
	  width: 20%;
  position: relative;
}
.thumbs_title {	
 min-height: 200px;
	position: absolute;
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #ff2b6c;
	display: block;
}
.marg0 {
	margin-top: 33px!important;
}

.marg22 {
	margin-top: 20px!important;
}
.marg30 {
	margin-left: 30px!important;
	margin-right: 30px!important;
}
.thumbs_title_text {
	position: absolute;
	top:  50%;
	text-align: center;
	min-width: 120px;
    width: 100%;
	line-height: 18px;
	text-align: center;
	text-transform: uppercase;
	font-size: 18px;
	border-width: 1px;
	border-style: solid;
}

span.title_text {
   	background-color: rgba(255,255,255,0.9);
  cursor: pointer;
  display: table;
  min-height:100%!important;
  height:100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  padding: 5px;
  font-size: 18px;
  line-height: 18px;
  text-transform: uppercase;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
  color: #525252;
  text-decoration: none;  
}

span.title_text span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.grid-item a:hover span.title_text {
  opacity: 0;
}

#thumbs, #thumbs_video {
	margin-bottom: 10px;
	margin-top: 15px;
}


#thumbs ul, #thumbs_video ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#thumbs li, #thumbs_video li {
	float: left;
	margin: 0;
	padding: 0;
}
#thumbs img, #thumbs_video img {
	position: relative;
	padding: 0;
	border-style: none;
	margin: 0 4px 0 0;
}

#thumbs img a, #thumbs_video img a {
	padding: 0;
	margin: 0;
}

#thumbs li a:link, #thumbs li a:visited {
	
}

#thumbs li a:hover, #thumbs li a:active {
	
}

video {
  width: 100%    !important;
  height: auto   !important;
  max-width: 900px   !important;
}
/* responsive externalvideo */
.video_external_wrapper {	
	width: 900px;
	max-width: 100%;
}
.video_external {
	position: relative;
	padding-bottom: 55%;
	padding-top: 15px;
	height: 0;
	overflow: hidden;
}
.video_external iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#bigpic {
	width: 99%;
	margin-top: 5px;
}
p {
	width: 600px;
	line-height: 140%;
}


.white-popup {
  position: relative;
  background: #7fb3c9;
  padding: 20px;
  width: auto;
  max-width: 1940px;
  margin: 20px auto;
}

.nav_left {
	text-align: left;
	float: left;
}

.nav_right {
	text-align: right;
	float: right;
}

footer {
	background: rgba(255, 255, 255, 0.95);
	height: 30px;
	line-height: 30px;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	font-size: 15px;
	text-transform: uppercase!important;
}

footer nav {
	border-top: 1px solid #A0A0A0;
	margin-right: 30px;
	margin-left: 30px;
}

.not-loaded {
	height: 150px;
	background: url(../i/loader.gif) no-repeat 50% 50%;
}
.unloaded {
	  min-height: 120px;
    // set a minimum default height for image containers
    // this prevents too many images from appearing in the viewport
    // thus causing lazy load to load too many images at once
    // we will use the lazyload .load() callback to remove this fixed 
}

/* für videopop */
/* This adds padding from top and bottom */
.custom-popup-class .mfp-container {
  padding-top: 40px;
  padding-bottom: 40px;
}
/* This adds max-width to popup content */
.custom-popup-class .mfp-content {
  width: 100%;
  max-width: 700px;
}

/* This makes "#popup-with-something" scale down proportionally */
#popup-with-something {
  width: 100%;
  height: 0;
  overflow: hidden;
  /* This is scale ratio */
  padding-top: 56.25%;
	background-color: #72d1ff;
}
/* This shifts close button outside of the container */
#popup-with-something .mfp-close {
  top: -44px;
  color: #FFF;
  text-align: right;
  right: 1px;
}
/* This is an element itself */
.some-element {
  background: #EBE8E8;
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, .6);
}
/* ende für videopop */


.grid {
  background: #ffffff;
  margin: 25px;
  padding: 0;
  margin-top: 115px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 20%;
}

.grid-item {
  position: relative;
  display: block;
  float: left;
  padding: 1px;
  overflow: hidden;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.grid-item a {
	padding: 0;
	margin: 0;
	display: block;
}

.reveal .hidden { display: block !important; visibility: visible !important; }
.product:hover .reveal img { opacity: 1; }
.reveal { position: relative; }
.reveal .hidden { 
  position: absolute; 
  z-index: -1;
  top: 0; 
  width: 100%; 
  height: 100%;  
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;  
}
.reveal:hover .hidden { 
  z-index: 900;
  opacity: 1;    
}
.reveal .caption {
  position: absolute;
  top: 0;  
  display: table;
  width: 101%;
  height: 101%;
  background-color: white; /* fallback for IE8 */
  background-color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  text-align: center;
  line-height: 18px;
	font-size: 18px;
	color: #525252;
}
.reveal .hidden .caption .centered {
  display: table-cell;
  vertical-align: middle;
}


/* =mobile -------------- */

@media only screen and (max-width: 1480px) {
#thumbs_container {	
	width: 1184px;
	margin-left: auto;
	margin-right: auto;
	}
}

@media only screen and (max-width: 1184px) {
#thumbs_container {	
	width: 888px;
	margin-left: auto;
	margin-right: auto;
	}


}
@media only screen and (max-width: 888px) {
#thumbs_container  {	
	width: 592px;
	margin-left: auto;
	margin-right: auto;
}
.grid {
	margin-top: 145px;
}
.grid-sizer,
.grid-item {
  width: 33.333%;
}

}

@media only screen and (max-width: 600px) {

#submenu {
	float: none;
}
#logo {
	float: none;
}
#header_left {	
	float: none;
	margin: 0 0 15px;
	width: 100%;
}
#header_right {
	float: none;
	width: 100%;
}
#mainmenu{
	float: left;
}
.grid {
margin-top: 160px;
}
.grid-sizer,
.grid-item {
  width: 50%;
}

}

@media only screen and (max-width: 592px) {
	
#thumbs_container {	
	width: 298px;
	margin-left: auto;
	margin-right: auto;
}
#header_container {
	width: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 1000;
	border-style: none;

	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
}
}

@media only screen and (max-width: 450px) {
#thumbs_container {	
margin-top: 165px;
}
.grid-sizer,
.grid-item {
  width: 100%;
}
.grid-item {
  position: relative;
  float: left;
  padding: 1px;
}

}

@media only screen and (max-width: 400px) {
#header_sticky {
	margin-top: 15px;
}
#thumbs_container {	
margin-top: 135px;
}
#thumbs img {
	margin: 0;
}
#header_left {	
	float: none;
	margin: 0 0 15px;
	width: 100%;
}
#logo {
	float: none;
}
#logo img{
	width: 100%;
}
#header_right {
	float: none;
	width: 100%;
}
#submenu {
	float: left;
}


}