body {
  height: 100%;
  font-size: 100%;pl
  padding: 0;
  margin: 0;
  background-color: #75a2d6;
  
  background-image: url("../imgs/rainbow.png");
  background-size: cover;/*100% 100%;*/
  background-clip: content-box;
  overflow: hidden;  
}

header {
	position: absolute;
	width: 100%;
	height: 20%;
	top: 0;
	padding: 0;
  margin-left: 0;
  margin-bottom: 0.1em;
  background: url("../imgs/rainbow.png");
  background-size: cover;
}

aside {
  width: 20%;
  display:block;
  height: 100%;
}

footer {
  display: none;
  background: url("../imgs/rainbow.png");
  background-color: rgba(0,0,0,0);
}

.nav1 {
  width: 20%;
  display:block;
  height: 100%;
  background-color: rgba(0,0,0,0);
}

.nav2 {
  height: 100%;
}

.btn1 {
  width: 100%;
  height: 15%;
  margin-top: 2%;
  text-align: center;
  font-size: 1em;
  padding: 0;
}

.btn2 {
	display: none;
}

button {
	border: 0.1em solid lightgrey;
	background-color: rgba(255,255,255,0.3);
	color: black;
}

button:hover{
	box-shadow: 0 0 1em white;
	color: white;
	cursor: pointer;
	border-color: white;
}

.article {
  position: absolute;
  top: 0;
  margin-left: 20%;
  width: 80%;
  height: 100%;
  background-color: rgba(0,0,0,0);
}

.wrapper {
  position: absolute;
  top: 20%;
  height: 80%;
  width: 99.5%;
  margin-left:0;
  background-color: black;
  background: url("../imgs/rainbow.png");
  background-size: cover;
  background-clip: content-box;
}


#hdr1
{
	position: absolute;
	height: 100%;
	float: left;
	width: 20%;
	text-align: left;
	background-color: black;
}

#hdr2
{
	position: absolute;
	height: 100%;
	width: 65%;
	left:20%;
	text-align: center;
	background-color: rgba(0,0,0,0);
	color: black;
  background: url("../imgs/rainbow.png");
  background-size: cover;
  background-clip: content-box;
}

#hdr3
{
	position: absolute;
	height: 100%;
	margin-left:85%;
	width: 15%;
	text-align: right;
	background-color: black;
	background: url("..//imgs/candela.gif");
	background-size: 100% 100%;
}

.bigfont, .smallfont
{
	text-align: center;
	display: block;;
}

.bigfont
{
	font-size: 2em;
	height: 50%;
	margin: auto;
}

.smallfont {
	font-size: 1.5em;
	height: 50%;
	margin: auto;
}


#hdr1 img {
	max-height: 100%;
	margin: auto;
}

#formcandle {
	border: 0.1em solid lightgray;
	width: 50%;
	height: 26%;
	margin:auto;
	position: absolute;
	top: 30%;
	left: 30%;
	color: lightgray;
	text-align: center;
	background-color: rgba(255,255,255,0.2);
	visibility:hidden;
	opacity: 0;
	padding-top: 0.5em;
}

#nume {
	color: lightgray;
	font-size: 1em;
	margin-top: 2em;
	float: left;
	margin-left: 2em;
}

input {
	margin-top: 1em;
	margin-left: 2em;
	border: 0.1em solid black;
	height: 2em;
	font-size: 1em;
	background-color: rgba(255,255,255,0.5);
}

input:focus {
	box-shadow: 0 0 1em white;
}

.btnform {
	display: inline;
	width : 30%;
	height: 30%;
	margin-top: 1em;
	margin-left: 2em;
	margin-right: 2em;
	margin-bottom: 1em;
}

/* about styles */
#photoframe {
	width: 48%;
	height: 100%;
	float: left;	
	top:auto;	
}

#photoframe img {
	box-shadow: 1em 1em 1em rgba(0,0,255,0.5);
}

#story {
	width: 46%;
	height: 100%;
	float: right;
	margin-right: 2%;
	color: black;
	overflow-y: hidden;
	text-align: left;
}

/* candles style */
#candles {
	width: 100%;
	height: 100%;
}

canvas {
	width:100%;
	height:100%;
}

#namespan {
	background-color:rgba(0,0,0,0);
	color: white;
	z-index: 2;
	visibility: hidden;
	position: absolute;
	cursor: default;
	padding:0.2em 0.5em 0.2em 0.5em;
}

#btnup {
position:absolute;
top: 1%;
left: 45%;
width: 10%;
height: 10%;
border: 0;
background-image: url("../imgs/up.png");
background-color: rgba(0,0,0,0);
background-size: 100% 100%;
opacity: 0.5;
z-index: 5;
visibility: hidden;
}

#btndn {
position:absolute;
top: 89%;
left: 45%;
width: 10%;
height: 10%;
border: 0;
background-image: url("../imgs/down.png");
background-color: rgba(0,0,0,0);
background-size: 100% 100%;
opacity: 0.5;
z-index: 5;
visibility: hidden;
}

#btndn:hover, #btnup:hover {
	opacity: 1;
}


/* video styles */
#videocontainer {
	width: 100%;
	height: 100%;
	background-color: rgb(200,200,200);
  background: url("../imgs/rainbow.png");
  background-size: cover;
  background-clip: content-box;
  background-repeat: repeat;
}

video
{
	border: 1px solid black;
	margin-top: 20px;
	background-color: black;
}

#player {
	margin: 0;
	position: absolute;
	width: 1280px;
	height: 768px;
	overflow: hidden;
}

#prev
{
	position: absolute;
	top: 35%;
	height: 30%;
	width: 10%;
	margin-left: 1%;
	background-color: rgba(0,0,0,0);
  background: url("../imgs/left.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.5;
	border: 0;
}

#next
{
	position: absolute;
	top: 35%;
	height: 30%;
	width: 10%;
	left: 90%;
	margin-right: 0;
	background-color: rgba(0,0,0,0);
  background: url("../imgs/right.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.5;
  border:0
}

#next:hover, #prev:hover
{
	cursor: pointer;
  	opacity: 1;
}

#next:focus, #prev:focus
{
	outline: none;
}

.linkimg {
	max-width: 100%;
	height: auto;
	position: absolute;
	top: 0;
}
/* messsge */

.formdiv
{
	background-color: rgba(0,0,0,1);
	color: white;
	padding: 0;
	height: 100%;
	width: 100%;
	text-align: center;
	z-index: 5;
}

.formdiv label
{
	height: 1em;
}

.longtext
{
	display:block;
	height: 60%;
	width: 80%;
	font-size: 20px;
	border: 2px solid white;	
	margin-bottom: 10px;
	margin-left: 10%;
	overflow-y: auto;
}

#message_form
{
	background-color: rgba(255,255,255,1);
	opacity: 1;
	margin-left: 1%;
	padding-top: 0;
	height: 10%;
}

.button1
{
	display: inline-block;
	height: 10%;
	color: black;
	font-size: 1em;
	margin-top: 10px;
	margin-left: 20px;
}

.button1:focus
{
	border: solid 2px black;
	text-decoration: underline;
}

#trimite
{
	float: left;
	width: 40%;
	height: 100%;
	margin-left: 5%;
	color: lightgrey;
}

#renunta
{
	float: right;
	width: 40%;
	height:100%;
	margin-right: 5%;
	color: lightgrey;
	
}

#renunta:hover,#trimite:hover
{
	color:white;
}
.msgdiv1
{
	width: 50%;
	margin-left: 25%;
	margin-top: 0.5em;
}

.msgdiv2
{
	width: 30%;
	margin-left: 35%;
	height: 2em;
	margin-top: 0.5em;
}

@font-face {
	font-family: "NothingYouCouldDo";
	font-style: normal;
	font-weight: normal;
	font-size: 20px;
	src: url("../fonts/NothingYouCouldDoRo.ttf");
}

#msgscroll
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow-y: hidden;
	background-color: black;
}

#msgspan
{
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: black;
	color: white;
   font-family: "NothingYouCouldDo";
   font-size: 1.5em;
   /*
   overflow-y: scroll;
   width: 100%;
   height: 100%;
   */
   overflow-y: auto;
   width: 100%;
   text-align: left;
   z-index: 0;
}

#msgspan a {
	text-decoration: underline;
}

#msgspan a:link
{
	text-decoration: underline;
	color: yellow;
}

#msgspan a:visited
{
	text-decoration: underline;
	color: cyan;
}

.pmessage
{
	width: 100%;
	text-align: left;
	text-indent: 10%;
}

.pname
{
	width: 95%;
	text-align: right;
}

.control
{
	visibility: hidden;
	position: absolute;
	width: 64px;
	height: 64px;
	opacity: 0;
	z-index: 5;
	background-color: rgba(0,0,0,0);
	background-size: 100%;
	border: 0px;
}

.scroll
{
	visibility: visible;
	position: absolute;
	width: 64px;
	height: 64px;
	opacity: 0;
	z-index: 5;
	margin-top: 0px;
	background-color: rgba(0,0,0,0);
	background-size: 100%;
	border: 0px;
}

#play
{
	background-image: url("../imgs/play.png");
}

#play:hover
{
	background-image: url("../imgs/playhover.png");
}

#pause
{
	background-image: url("../imgs/pause.png");
}

#pause:hover
{
	background-image: url("../imgs/pausehover.png");
}

#back
{
	background-image: url("../imgs/back.png");
}

#back:hover
{
	background-image: url("../imgs/backhover.png");
	opacity: 1;
}

#fwd
{
	background-image: url("../imgs/fwd.png");
}

#fwd:hover
{
	background-image: url("../imgs/fwdhover.png");
	opacity: 1;
}

/* media specific */

@media screen and (orientation: portrait) and (min-width:640px) {
  aside, .nav1 {
    display:none;
  }

  header {
  	height:10%;
  }
  
  footer {
  	 position: absolute;
  	 top: 80%;
    display: block;
    height: 20%;
    width: 100%;
    margin-right: 0.2em;
    padding: 0;
  }

  .btn1 {
  width: 30%;
  height: 44%;
  margin-right: 0.5em;
  margin-left: 0.5em;
  margin-top: 0.5em;
  text-align: center;
  padding: 0;
  }

  .wrapper {
  	 top: 10%;
    height:70%;
    width: 100%;
    display: block;  
  } 
  .article {
    margin-left: 0;
    width: 98%;
    height: 100%;
  }
}


@media screen and (orientation: portrait) {
#photoframe {
	width: 108%;
	height: 48%;
	/*border: 0.1px solid white;*/
	float: left;
	margin: auto;
	text-align: center;	
	}
#story {
	width: 100%;
	height: 48%;
	float: left;	
	margin: auto;
	}
#hdr1 img {
  	max-width: 100%;
  	height:auto;
  }
#hdr1 , #hdr3{
		width: 33%;
}
#hdr3{
		margin-left: 66%;
}
#hdr2 {
		width:33%;
		left:33%;
}
.bigfont {
	margin-top: 10%
}
.smallfont {
	font-size: 90%;
	margin-left: 5%;
}
}

	
@media screen and (orientation: landscape) and (max-width:580px) {
	.bigfont
	{
		font-size: 1em;
	}
	.smallfont
	{
		font-size: 0.6em;
	}
}

@media screen and (orientation: landscape) and (max-height:320px) {
	.bigfont
	{
		font-size: 1em;
	}
	.smallfont
	{
		font-size: 0.6em;
	}
	.btn1
	{
		font-size: 0.6em;
	}
}

@media screen and (orientation: portrait) and (max-width:900px) {
	.smallfont
	{
		font-size: 1em;
	}
	
}

@media screen and (orientation: portrait) and (max-width:639px) {
  aside {
    display:none;
  }
  header {
  	height:10%;
  	top: 0;
  }
  
  footer {
  	 position: absolute;
  	 top: 90%;
    display: inline;
    height: 10%;
    width: 100%;
    margin-right: 0.2em;
    text-align: center;
    padding: 0;
  }

  .bigfont {
  	font-size:0.8em;
  }
  
  .smallfont {
  	font-size:0.6em;
  }
  
  .btn1 {
  	display: none;
  }
  
  .btn2 {
  display: inline;
  height: 90%;
  }

  .wrapper {
  	 top: 10%;
    height:80%;
    display: block;  
  } 
  .article {
    margin-left: 0;
    width: 98%;
    height: 100%;
  }
  
}

@media screen and (orientation: portrait) {
  #formcandle {
  	width:99%;
  	height:24%;
  	margin-left: 0;
  	left:0;
  }
 } 
 
@media screen and (orientation: portrait) and (max-width: 400px){
  #formcandle {
  	width:99%;
  	height:40%;
  	top: 25%;
  	left:0;
  	margin-left: 0;
  }
  
  input {
  	margin-left:0;
  }
  .btnform {
  	height: 20%;
  	width: 25%;
  }
 }  
 
 @media screen and (orientation: portrait) and (max-width: 320px){
  
  .btnform {
  	height: 20%;
  	width: 30%;
  	margin: 1em; 
  }
  #formcandle {
  	width: 99%;
  }
  .smallfont {
  	font-size: 45%;
  }
}

 @media screen and (orientation: portrait) and (max-width: 300px){
 	.bigfont {
 		font-size: 60%;
 		margin-top: 5%;
 	}
  .smallfont {
  	font-size: 30%;
  }
}

@media screen and (orientation: portrait) and (min-width: 360px){
	#hdr1 , #hdr3{
		width: 25%;
	}
	#hdr3{
		margin-left: 75%;
	}
	#hdr2 {
		width:50%;
		left:25%;
	}  
  .smallfont {
  	font-size: 50%;
  }
}
 
 @media screen and (orientation: landscape) and (max-width: 699px){
  
  .btnform {
  	margin: 0.5em; 
  }
  #formcandle {
  	height: 40%;
  }
 }
 
 @media screen and (orientation: landscape) and (max-width: 480px){
  #formcandle {
  	width: 78%;
  	left:21%;
  }
}

@media screen and (orientation: landscape) and (max-height: 300px){
  #formcandle {
  	height: 50%;
  }
}

@media screen and (orientation: portrait) and (max-width: 480px){
	.msgdiv1,.msgdiv2 {
		width:90%;
		margin-left:5%;
	}
}

@media screen and (orientation: landscape) and (max-width: 800px){
	.msgdiv1,.msgdiv2 {
		width:90%;
		margin-left:5%;
	}
}

@media screen and (orientation: landscape) and (max-height: 400px){
	.longtext {
		height:30%;
	}
	.msgdiv1{
		margin-top:0.5em;
	}
}

@media screen and (orientation: portrait) and (max-width: 300px){
	.longtext {
		height:30%;
	}
	.msgdiv1{
		margin-top:0.5em;
	}	
	.btn2 {
		position: absolute;
		top: 0;
		width: 40%;
		margin:0;
	}
	
	footer button:nth-child(7)
	{
		left:0.5%;
	}
		footer button:nth-child(8)
	{
		left:50.5%;
	}
}