/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

.tiedosto {
	border: 0px;
	#background: transparent;
	color: #262626;
  vertical-align: middle;	
font-family: 'Open Sans', sans-serif;	
	font-size: 10pt;
	padding: 10px;

}
.tiedosto:hover {
	color: #262626!important;
	#background-color: #D5AD6D;

}



.some {
	display:block;
margin-top:1%;
  width: 100%;


}

.lang {
	position:relative;
	top: 12px;
}

.icon_es{
	background: url(img/spain.png) no-repeat;
	background-size: contain;	
	width: 30px;
	height: 30px;
	display: inline-block;

}

.icon_es_active {
	background: url(img/spain.png) no-repeat;
	background-size: contain;
	width: 30px;
	height: 30px;
	display: inline-block;
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-o-filter:grayscale(100%);
	filter:grayscale(100%);
	margin-right: 3px;

}

.icon_eng {
	background: url(img/united-kingdom.png) no-repeat;
	background-size: contain;
	width: 30px;
	height: 30px;
	display: inline-block;	margin-top: 5px;


}

.icon_eng_active {
	background: url(img/united-kingdom.png) no-repeat;
	background-size: contain;
	width: 30px;
	height: 30px;
	display: inline-block;
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-o-filter:grayscale(100%);
	filter:grayscale(100%);
	margin-top: 5px;

	margin-right: 3px;


}


.overlay {
  height: 100%;
  width: 0%;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
 background-color: rgb(227, 227, 227, 0.2);

  overflow-x: hidden;
  transition: 0.7s;
  backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}

.overlay-content {

font-family: 'Ubuntu Condensed', sans-serif;
  font-weight: 100;
  position: relative;
  top: 25%;
  right: calc(10% - 56px);
  width: 100%;
  text-align: right;
  margin-top: 30px;
}

.overlay a {

font-family: 'Ubuntu Condensed', sans-serif;
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #262626;
  display: block;
  transition: 0.5s;
}

.overlay a:hover, .overlay a:focus {
  color: #7e5341;
}



@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}


button.accordion {
    background-color: #eee; 
    color: #444;
	font-weight: 800;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18pt;
    transition: 0.4s;
	font-family: 'Roboto', sans-serif;

}

.cal-wrapper {
	width: 80%;
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;

}

button.accordion.active, button.accordion:hover {
    background-color: #aaa; 
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;	

}

.container {
z-index:5;
  display: inline-block;
  cursor: pointer;
	border: 3px solid #262626;
	width: 46px;
	height: 46px;
  position: fixed;
	left: 90%;
	top: 5%;

}

.bar1 {
  width: 24px;
  height: 2px;  
  background-color: #262626;
  margin: 14px 0px 0px 11px;
  transition: 0.4s;
}

.bar2 {
  width: 24px;
  height: 2px;
  background-color: #262626;
  margin: 6px 0px 0px 11px;
  transition: 0.4s;
}

.bar3 {
  width: 15px;
  height: 2px;
  background-color: #262626;
  margin: 6px 0px 0px 11px;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(45deg) translate(-9px, 6px);
  transform: rotate(225deg) translate(-5px, -6px);
  width: 25px;

}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(-225deg) translate(-5px, 6px);
  width: 25px;

}


.galleria {
	width: 150px;
	height: 150px;
#padding-bottom: 20%;	
	margin: -2.5px -2.5px -2.5px -2.5px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
	display: inline-block;

	box-shadow: inset 0px 0px 0px 10px rgba(236,237,239,0.5);
	box-sizing: border-box;
	#border: 5px solid rgba(236,237,239,0.5);

	-webkit-filter:grayscale(0%);
	-moz-filter:grayscale(0%);
	-o-filter:grayscale(0%);
	filter:grayscale(0%);
	-webkit-transition:filter .1s ease-in,filter .2s ease-in;  
    -moz-transition:filter .1s ease-in,filter .2s ease-in;  
    -o-transition:filter .1s ease-in,filter .2s ease-in;  
    transition:filter .1s ease-in,filter .2s ease-in; 
}
 
.galleria:hover {
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-o-filter:grayscale(100%);
	filter:grayscale(100%);
	box-shadow: inset 0px 0px 0px 10px rgba(250, 250, 250,0.4);

}

.galleriavideo {
	width: 250px;
	height: 175px;
	margin: -3px -3px -20px -3px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
	display: inline-block;

	box-shadow: inset 0px 0px 0px 10px rgba(236,237,239,0.5);
	box-sizing: border-box;
	#border: 5px solid rgba(236,237,239,0.5);

	-webkit-filter:grayscale(0%);
	-moz-filter:grayscale(0%);
	-o-filter:grayscale(0%);
	filter:grayscale(0%);
	-webkit-transition:filter .1s ease-in,filter .2s ease-in;  
    -moz-transition:filter .1s ease-in,filter .2s ease-in;  
    -o-transition:filter .1s ease-in,filter .2s ease-in;  
    transition:filter .1s ease-in,filter .2s ease-in; 
}
 
.galleriavideo:hover {
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-o-filter:grayscale(100%);
	filter:grayscale(100%);
	box-shadow: inset 0px 0px 0px 10px rgba(250, 250, 250,0.4);


}


blockquote {
  margin: 0 auto;
  padding: 1em;
  border-left: 5px solid #999;
}
blockquote:before {
  display: none;
}
blockquote:not(:first-of-type) {
  margin-top: .5em;
}
blockquote p {
  color: #999;

  font-size: 12pt;
  line-height: 1.4;
font-family: 'Noto Serif SC', serif;
}
blockquote footer {
  margin-top: .5em;
  color: #777;

  padding: 0;
  font-size: 12pt;
  text-align: left;
	font-family: 'Roboto', sans-serif;
	font-weight: 100;

}


blockquote:nth-of-type(even) {
  text-align: right;
  border-left: none;
  border-right: 5px solid #999;
}
blockquote:nth-of-type(even) footer {
  text-align: right;
}
blockquote:nth-of-type(even) footer:before {
  content: '';
}

@element 'blockquote' and (min-width: 300px) {
  blockquote {
    padding: 1em 20% 1em 1em;
  }
  blockquote p {
    font-size: 14pt;
  }
  blockquote:nth-of-type(even) {
    padding: 1em 1em 1em 20%;
  }
}


hr {
  border: 0;
  margin: 1.35em auto;
  max-width: 100%;
  background-position: 50%;
  box-sizing: border-box;
}

hr {
  border-width: 0 0 1px;
  border-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0) 100%) 0 0 100%;
  border-style: solid;
}

/*PERUSSETIT*/


body {
	overflow: hidden;
	position:relative;
}

a:link.linkki {
font-family: 'Open Sans', sans-serif;	#padding: 15px;
	color: #262626;
	text-decoration:none;

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

}

a:visited {
	color: #262626;
}

a:hover {
	color:	#D5AD6D; /*if no support for background-clip*/
	
	background: -webkit-linear-gradient(transparent, transparent),
	-webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%, rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%);
	background: -o-linear-gradient(transparent, transparent);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-decoration: none;}



.perus {
font-family: 'Open Sans', sans-serif;	
font-weight: 100;
	color: #262626;

	font-size: 12pt;
	line-height: 15pt;
	margin-top: 10px;
}

.otsikko {

font-family: 'Bebas Neue', cursive;
	font-size: 50pt;
margin-bottom: 25px;
	color: #262626;
}

	

.rep-otsikko {

font-family: 'Open Sans', sans-serif;	
font-weight: 400;
	font-size: 20pt;
	color: #262626;

}
	





.composer {
font-family: 'Open Sans', sans-serif;	
	font-weight: 100;	#display: inline-block;
	font-size: 15pt;
	margin-top:10px;
	line-height:15pt;
	color: #262626;



}

.piece {
font-family: 'Open Sans', sans-serif;	
	font-weight: 100;	#display: inline-block;
	margin-left: 40px;
	font-size: 12pt;
	margin-top:-15px;
	line-height:15pt;

}




.nimi {
	position:relative;
	left: 50%;
	top: 20%;
	#border: 1px solid red;
	width: 300px;
	text-align: center;
}
 
.eli {
font-family: 'Bebas Neue', cursive;
	font-size: 40pt;
color:	#D5AD6D; /*if no support for background-clip*/
	
	background: -webkit-linear-gradient(transparent, transparent),
             -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%, rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%);
	background: -o-linear-gradient(transparent, transparent);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	
} 
.vergara {
font-family: 'Bebas Neue', cursive;
	font-size: 50pt;
	margin-top:-10px;
color:	#D5AD6D; /*if no support for background-clip*/
	
	background: -webkit-linear-gradient(transparent, transparent),
             -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%, rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%);
	background: -o-linear-gradient(transparent, transparent);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;


}
.conductor {
font-family: 'Open Sans', sans-serif;	
	font-weight: 100;
	text-transform: uppercase;
color:	#D5AD6D; /*if no support for background-clip*/
	
	background: -webkit-linear-gradient(transparent, transparent),
             -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%, rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%);
	background: -o-linear-gradient(transparent, transparent);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;	
	font-size: 16pt;
	margin-top:-2px;
}

.contact-img {
	background: url(img/eli_g_16.jpg) no-repeat; 
	background-size: 110%; 
	background-position: left center;
	width: 70%; 
	height: 69%;
	display:block;
	margin: 0 auto;
	margin-top:20px;"
}


/*RAKENNE*/

#sisalto {
	#border: 1px solid red;
	width: 45%;
	position: relative;
	left: 40%;	 
	top: 12%;
	height: 80%;
	overflow-y: scroll;
	padding: 20px; 
 
}
#mediasisalto {
	#border: 1px solid #fff;
	width: 60%;
	position: relative;
	left: 20%;	 
	top: 12%;
	height: 80%;
	overflow-y: scroll;
	padding: 20px; 
	text-align: center;
 
}

#scroll {
	margin-top: 10px;
	height: 80%;
	overflow-y: scroll;
}



#home {
	width: 100%;
	height: 100vh;
	background-image: url(img/eli_home_bg.jpg);
	background-color: #e3e3e3;
	background-repeat: no-repeat;
	background-position: 15% 0%;
  	background-size: auto 150%;
	overflow: hidden;
}

#bio {
	width: 100%;
	height: 100vh;
	background-image: url(img/eli_bio_bg.jpg);
	background-color:#e3e3e3;
	background-repeat: no-repeat, repeat; 

	background-position: left 0 bottom 0;
  	background-size: auto 100%;
	overflow: hidden;
}

#calendar {
	width: 100%;
	height: 100vh;
	background: #0e0a0b url(img/bg3.jpg);
	background-position: left 0 bottom 0;
	background-repeat: no-repeat, repeat; 

  	background-size: auto 110%;
	overflow: hidden;
}

#media {
	width: 100%; 
	height: 100vh;

	background-image: radial-gradient(#e3e3e3, #e6e6e6);
	#background-position: 0% 0%;
  	#background-size: 48% auto;
	overflow: hidden;
}

#arviot {
	width: 100%;
	height: 100vh;
	background-image: url(img/ConcertReviews.jpg);
	background-color:#141416;
	background-repeat: no-repeat, repeat; 

	background-position: left 0 bottom 0;
  	background-size: auto 100%;
	overflow: hidden;
}


#repertoire {
	width: 100%;
	height: 100vh;
	background: #19181e url(img/bg1.jpg) no-repeat;

	background-position: left -15% bottom 0;
  	background-size: auto 100%;
	overflow: hidden;
}

#contact {
	width: 100%; 
	height: 100vh;

	background-image: radial-gradient(#e3e3e3, #e6e6e6);
	#background-position: 0% 0%;
  	#background-size: 48% auto;
	overflow: hidden;
}



/*KALENTERI*/



#cal {
	#border: 1px solid red;
	padding: 10px;
	width: 90%;
	text-align: left;
}

#date {
	border-radius: 8%;
	width: 60px;
	height: 60px;
	display: inline-block;
	background: white;
	-webkit-box-shadow: inset -1px 1px 16px -1px rgba(0,0,0,0.3);
	-moz-box-shadow: inset -1px 1px 16px -1px rgba(0,0,0,0.3);
	box-shadow: inset -1px 1px 16px -1px rgba(0,0,0,0.3);
	text-align: center;
	text-align: center;
	vertical-align: top;
	z-index: 2;

}

.kk {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: white;
	font-size: 10pt;
	line-height: 15px;
	PADDING: 3px;
	background:#f4425f;
	z-index: 1;
	
}

.pp {
	font-family: 'Actor', sans-serif;
	font-size: 30pt;
	margin-top: -22px;
	color: #000;
	
}

.aihe {
	display: inline-block;
	background: rgba(255,255,255,0.6);
	padding: 14px;
	margin-left: 20px;
	height: 60px;
	border-radius: 3px;
	width: 80%
	
}

.otskalenteri {
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	font-size: 20pt;
}


.peruskalenteri {
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	font-size: 12pt;
	color: #0e0a0b;
	margin:10px;
}
	

.vuosi { 
font-family: 'Meddon', cursive;
	font-size: 30pt;
	width: 100%;
	text-align: left;
}


.kk1 {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 10pt;
	line-height: 15px;
	background:#aaa ;

	PADDING: 3px;
	z-index: 1;
	
}

.pp1 {
font-family: 'Actor', sans-serif;
	font-size: 30pt;
	margin-top: -15px;
	color: #333;
	margin-top: -22px;

	
}

.aihe1 {
	display: inline-block;
	background: rgba(255,255,255,0.6);
	padding: 14px;
	margin-left: 20px;
	height: 60px;
	border-radius: 3px;
	width: 80%
	
}

.otskalenteri1 {
	font-family: 'Meddon', cursive;
	font-size: 20pt;
	font-weight: 100;
	color: #333;
}


.peruskalenteri {
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	font-size: 12pt;
	color: #0e0a0b;
	margin:10px;
}



a:link#kalenterilinkki {
	font-family: 'Roboto', sans-serif;
	color: #0e0a0b;

}
	
a:visited#kalenterilinkki {
	color: #0e0a0b;


}

	
a:hover#kalenterilinkki {
	font-family: 'Roboto', sans-serif;
	color: #dabfb4;


}

.vuosi1 { 
font-family: 'Meddon', cursive;
	font-size: 30pt;
	width: 100%;
	text-align: left;
	color: #555;
}




@media only screen { /* Define mobile styles - Mobile First */ 

.conductor {
	font-size: 11pt;
	margin-top:1px;
}

button.accordion {
    width: 100%;
    font-size: 10pt;
	padding: 10px;

}
.eli {
	font-size: 15pt;
} 
.vergara {
	font-size: 20pt;
	margin-top:-2px;
}
.nimi {
	left: 55%;
}
#bio {
	background-image: radial-gradient(#e3e3e3, #e6e6e6);

  	background-size: auto 100%;
}
#arviot {
	background-position: -10px 0;
  	background-size: auto 100%;
}
#repertoire {
	background-position: -130px 0;
  	background-size: auto 100%;
}
#calendar {
	background-position: -20px 0;
  	background-size: auto 100%;

}

.overlay-content {
  top: 18%;
}
.overlay a {
  padding: 3px;
  text-decoration: none;

}
.otsikko {
	font-size: 35pt;
}

#sisalto {
	width:55%;
	left: 25%;	
	top: 5%;  
}
#mediasisalto {
	top: 5%;
}
.vuosi1 { 
	font-size: 15pt;
	margin-left: 8px;
}
.vuosi { 
	font-size: 15pt;
	margin-left: 8px;

}
#date {
	width: 40px;
	height: 40px;
} 
.kk {
	font-size: 9pt;
	line-height: 12px;
	PADDING: 2px;
}
.kk1 {
	font-size: 9pt;
	line-height: 12px;
	PADDING: 2px;
}

.pp {
	font-size: 20pt;
	margin-top: -20px;
	color: #000;	
}
.pp1 {
	font-size: 20pt;
	margin-top: -20px;
	color: #000;	
}
.peruskalenteri {
	font-size: 10pt;
	margin:10px;
}
}
@media only screen and (min-width: 40.063em) and (orientation:landscape) { /* min-width 641px, medium screens */
#repertoire {
	background-position: -150px 0;
  	background-size: auto 100%;
}

#bio {
background-position: -30px;
}

}
@media only screen and (min-width: 51.5625em) and (orientation:landscape) { /* min-width 825px, medium screens */
#home {
	background-position: 0;

  	background-size: auto 100%;
}

.eli {
	font-size: 30pt;
} 
.vergara {
	font-size: 40pt;
	margin-top:-5px;
}
.conductor {
	font-size: 16pt;
	margin-top:1px;
} 
.nimi {
	left: 58%;
}
#bio {
	background-image: url(img/eli_bio_bg.jpg);

  	background-size: auto 100%;
}
#arviot {
	background-position: -90px 0;
  	background-size: auto 100%;
}
#repertoire {
	background-position: -240px 0;
  	background-size: auto 100%;
}
#calendar {
	background-position: -100px 0;
  	background-size: auto 120%;

}
#sisalto {
	width:40%;
	left: 45%;	  
}
} 

@media only screen and (min-width: 64.063em) { /* min-width 1025px, large screens */
#home {

	background-position: 12% 0px;
  	background-size: auto 100%;

}
#sisalto {
	width:40%;
	left: 45%;	  
}
#repertoire {

	background-position: -200px 0px;
  	background-size: auto 100%;
}

}

@media only screen and (min-width: 90.063em) { /* min-width 1441px, xlarge screens */


.nimi {
	left: 60%;
}

#sisalto {
	width:40%;
	left: 45%;	  
}
.perus {
	font-size: 16pt;
	line-height: 22px;
} 

.otsikko {
	font-size:50pt;
}

#repertoire {
	background-position: -350px 0px;
  	background-size: auto 100%;
}
 
.composer {
	font-size: 19pt;
}

.piece {
	font-size: 16pt;

}

.cal-wrapper {
	width: 90%;
}

button.accordion {

    width: 90%;

	padding: 18px;


    font-size: 30px;
}

.kk1 {

	font-size: 18pt;
	line-height: 20px;

	PADDING: 5px;
	
}
.kk {
	font-size: 18pt;
	line-height: 20px;
	PADDING: 5px;
}
.pp {
	font-size: 30pt;
	line-height:35px;

}
.pp1 {
	font-size: 30pt;
	line-height:35px;
}
#date {
	height: 70px;
	width: 70px;
}

.peruskalenteri {
	font-size: 18pt;
	padding:10px;
}

.vuosi {
	FONT-SIZE: 30pt;
margin:10px;
}

.vuosi1 {
	FONT-SIZE: 30pt;
margin:10px;

}
} 

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
.soprano {
	margin-left:30px; 
	margin-top:1px;
}

.overlay-content {
  
  top: 15%;
  right: calc(22% - 56px);
  width: 100%;
}

.otsikko {
width: 80%;
}

.container {
	left:78%;
	top: 5%;

}
.otsikko {
	font-size: 25pt;
	margin-top: -5px;
}

#sisalto {
	width: 85%;
	height: 80%;
	left: auto;
}
#mediasisalto {
	width: 85%;
	height: 80%;
	left: auto; 
	text-align: left;
}
.nimi {
	top: 5%;
	left: -10%;
	width: 100%;

}
.eli {
	font-size: 18pt;
}
.vergara {
	font-size: 22pt;
}
.conducotr {
	font-size: 12pt;
}
.piece {
	font-size: 10pt;
}
#home {
	background-position: center bottom;
  	background-size: auto 85%;

}

#bio {
	

	background-position: center bottom;
	background-image: radial-gradient(#e3e3e3, #e6e6e6);


}
#arviot {
	background-image: radial-gradient(#2f2c3a, #19181e);
	background-position: left bottom; 



}
#calendar {
	background-image: radial-gradient(#2f2c3a, #19181e);
	background-position: center bottom;

}

#media {

}

#repertoire {

	background-image: radial-gradient(#2f2c3a, #19181e);
	background-position: center bottom;

}

#contact {

}
button.accordion {
}
.cal-wrapper {
	width: 76%;
}
.contact-img {
	height: 80%;
	width: 100%; 
	background-position: left bottom;
	background-size: cover;
} 
 

 


}
 
/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
.soprano {
	font-size: 16pt;
	margin-top:1px;
}
#home {
	background-position: center bottom;
  	background-size: auto 78%;

}
.galleria {
	width: 100px;
	height: 100px;
}
.nimi {
	top: 11%;
	left: 0px;
	width: 100%;

}
.eli {
	font-size: 30pt;
}
.vergara {
	font-size: 50pt;
}
#sisalto {
	width: 60%;
	left: 10%; 
	top: 15%;
	height: auto;
	max-height: 70%;
	padding: 5% 10% 10% 10%;
	#background-image: linear-gradient(to left, rgba(0,0,0, 0.0), rgba(0,0,0, 0.6),rgba(0,0,0, 0.7),rgba(0,0,0, 0.6),rgba(0,0,0, 0.0));
}


}
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />