/* HTML5 Doctor Reset */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

* {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

h2, h3, h4, h5, h6, a {
  line-height: 28px;
}

.paragr{
	margin: 4px;
}

.title{
	margin: 10px;
}
.color4{
	color: #000;
	text-decoration: none
}
img, object, embed, video {
	max-width: 100%;	
}

html{
	position:relative;
    box-sizing: border-box;
    height:100%;
}

body{
	background-color: #FFF;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
	position: relative;
	min-width: 240px; 
	
	display: flex;
    flex-direction: column;
    min-height: 100vh;

}

.menu{
    float: left;
}
	
.lang{
	float: right;
	margin: 12px;
}
	
	
.wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
	
.text_song{
	text-align:left;
	margin:0 auto;
	padding: 0 8px 0 8px;
}
.backing{
	 padding-left:0px;
}
	
header{
	background: #252525 url(../images/spheres_12a.jpg) 50% center;
	width: 100%;
	margin: 0 auto 20px;
	padding: 15px 0;
	max-width: 1200px;
	background-size: cover;
}

.d_center{
	margin: 0 auto;
}
.d_center2{
	margin: 0 auto; 
	text-align:center;
	margin: 6px;
}

h1 {
	font-size:2.2em;
	margin: 10px;
}	
h2 {
	font-size:1.8em;
	margin:6px 10px;
}	
	
.soc{
    max-width:1200px;
    margin: 0 auto;
   /* padding-left: 30px; */
}
.t{
	font-size:12px
}
	
/* Standard Navigation */
    nav {
    display: block;
    margin: 0px auto;
    text-align: left;
    float: left;
}
nav ul {
    list-style: none;
    margin: 12px 12px 6px 20px;
	padding: 0;
}
nav li {
    display: inline-block;
    margin-right: 8px;
}
nav a {
    display: inline-block;
    background: #333;
    color: white;
    padding: 5px 15px;
    text-decoration: none;
    margin: 0 12px 12px 12px;
}
nav a:hover {
    background: red;
}
nav a.active {
    background: #333;
}
nav select {
    display: none;
}
	
header h1{
    font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 2px #444;
	font-size: 3.0em;
	margin: 0;
	padding: 10px 20px 2px 20px;
}				

.content{
	clear: both;
	padding: 1em;
	max-width: 83em;
	margin: 0 auto;
}	
	
#art_gallery {
	clear: both;
	width: 47%;
	padding: 2px 2px 2px 0;
	float:left;
}

#art_gallery h2{
	padding-left:30px;}

.gallery{
	width: 48%;
	float: left;
	margin-right:1%;
	margin-left:1%
}	
	
.gallery img {
	display: block !important;
	margin-bottom: 0;
	margin-left:4px;
	width: 280px;
}

p.caption {
	font-style: italic;
	text-align: center;
	margin-top:4px;
	margin-bottom: 4px;
}	
	
.caption{
	font-style: italic;
	text-align: center;
	margin-top:4px;
	margin-bottom: 4px;
}
	
.content img{
	float:left;
    padding: 16px;
}		
	
.content-columns {
    padding: 10px;
	max-width: 83em;
	margin: 0 auto;
}

.content-column-left h2,
.content-column-right h2{
	font-size:1.2em;}

.content-column-left {
	clear:left;
    float: left;
    padding: 1%;
    width: 47%;
}

.content-column-right {
    float: left;
    padding: 1%;
    width: 47%;
}
	
#art_video{
	float:left;
	width: 50%;
	margin-top: 2px;
	padding: 0em 0.5em;
}			
	
#art_video iframe, 
#art_video object, 
#art_video embed {
	width: 100%;}	
	
.video{
	width:auto;}	

#footer{
	padding:12px 20px;
	background: #353535;
	clear:both;
	margin: 1% auto;
	width: 100%;
}

#footer ul.navlinks{
	float:left;
	padding:0;
	height:auto;
}

#footer ul.navlinks li{
	float:left;
	color:#fff;
	display:block;
}

#footer ul.navlinks li a{
	color:#fff;
	text-decoration:none;
	float:left;
	margin:0 7px 10px;
	text-shadow:0 1px 1px #444;
}

#footer ul.navlinks li a:hover{
	text-decoration:underline;
}

#footer p.copyright{
	color:#fff;
	clear: left;
	text-shadow:0 1px 1px #444;
}

#footer p.copyright a{
	color:#fff;}
	
#footer p.copyright a:hover{
	text-decoration:none;}	
	

/**** Content ****/

#content h1{
	font-size:16px;}
	
h1 a{
	font-size:15px;}	
	
#content #copy{
	margin:0 auto;}


.copy h2 {
  clear: both;
}

a img {
  border: none;
}


ul, ol {
 padding-left: 0px;
}

blockquote {
	margin: 0;
	font: italic 18px Georgia, serif;
}

dt {
  font-weight: bold;
  font-size: 14px;
}

dd + dt {
  margin-top: 0.5em;
}

dd {
  margin-left: 1.0em;
}

button {
  -webkit-appearance: push-button;
}

.demos #copy,
.tests #copy,
.docs #content {
  max-width: 640px;
}

.docs #content h2 {
  border-top: 2px solid #DCA;
  padding-top: 10px;
}

.docs #content h2:target { 
  background: #D31;
  color: white;
  padding: 10px 5px 5px;
}

/**** Demos ****/

.box h2 {
  font-size: 14px;
  font-weight: 200;
}

.box img,
#tumblelog img {
  display: block;
  width: 100%;
}

.rtl .box {
  float: right;
  text-align: right; 
  direction: rtl;
}

/* mini example */

.homepage .mini div {
  float: left;
  background: #DCA;
  margin: 3px;
  color: #FDFAF8;
  font-weight: bold;
  font-size: 32px;
  line-height: 46px;
  text-align: center;
  border-radius: 3px;
}

.homepage .mini .w1 { width: 44px; }
.homepage .mini .h1 { height: 44px; }
.homepage .mini .w2 { width: 94px; }
.homepage .mini .h2 { height: 94px; }

/* Tumblelog example */

#tumblelog .story {
  margin: 10px;
  border-top: 4px solid #DCB;
  padding-top: 10px;
  background: #FFF;
  float: left;
}

#tumblelog h1, #tumblelog h2, #tumblelog h3 { font-weight: bold;}

#tumblelog .col1 { width: 220px; }
#tumblelog .col2 { width: 460px; }
#tumblelog .col3 { width: 700px; }

#tumblelog .col1 img,
#tumblelog .col2 img,
#tumblelog .col3 img {
  max-width: none;
}

@media screen and (max-width: 1100px){
	#art_gallery{
padding: 2px;
}
	
	#art_gallery h2{
padding-left:0px;
}
	
.gallery img{
	width: 280px;
	margin-left:0px;
}
		
p.caption{
	margin-left:0px;
	line-height: 20px;
}	

header h1{
	font-size: 2.5em;
}				
}


/* screens smaller than 600 */
@media screen and (max-width: 600px) {

nav ul     { display: none; }
nav select {
    display: inline-block;
    width:250px;
    margin:0 14px 10px 10px;
    height: 40px; 
    font-size: 18px;
    float: left;
}

.menu{
    display: none;
}
	  
.content-column-left {
	float: left;
	padding: 0% 10% 0% 0%;
	width: auto;
}
		
.content-column-right {
	float: left;
	padding: 0 10% 0 0;
	width: auto;
}
	
#art_gallery{
	width:100%;}
	
#art_video {
	float: none;
	width: auto;
}
			
#art_video h2{
	clear:left;
}

header h1{
    font-weight: 600;
	font-size: 1.5em;
	padding-bottom: 2px;
}				
.content img{
    padding: 10px;
}		

	
}