body {	
background:#000000 url(../images/bg.jpeg)  center top;
background-size: 100%;
background-repeat: no-repeat;
margin:0;
padding:0;
text-align:center;
line-height:1.3vw;
    }

	/*font regular*/
@font-face{
	font-family: 'almendra';
	src:

		url(../fonts/Almendra-Regular.otf);
		format('opentype');
		font-weight: normal;
}
	/*font bold*/
@font-face{
	font-family: 'almendra';
	src:
		url(../fonts/Almendra-Bold.otf);
		format('opentype');
	font-weight: bold;
}

div {
		font-family: 'almendra',Arial, sans-serif;
		font-size:50%;
		font-weight: normal;
        position:relative;
		margin-left:auto;
		margin-right:auto;
		height:auto;
    }
a {
text-decoration: none;
}
 a :hover{

	
		color:  #A52A2A;
} 

p{
	text-indent:1vw;
	
}
ol{
width:22vw;
padding-left:1.5vw;
}

ul {
padding-left:2vw;
}

#wraper{	


margin-left:auto;
margin-right:auto;
width:100%;
height: 15vw;
margin:0;
padding:0;


    }

#content{	


margin-left:auto;
margin-right:auto;

width:60vw;
height: 51vw;
margin-top:0;
margin-left:auto;
margin-right:auto;
padding:0;
overflow: hidden;
column-count:2;
column-gap:1vw;
z-index:1;


    }

.item{

	display: inline-block;
	margin: 0 0 1vw;
	width: 25vw;

}
.page{
	height: 39vw;
	width:100%;
	margin: 0;
	font-size:0.98vw;
	
}

#q-left{
	
	margin-right:0;
	margin-top:8.5vw;
	height: 45vw;
	font-weight: normal;
	
	text-align: justify;
		color:  #433225;
		font-size:0.98vw;
}

#q-right{
	margin-right:0;
	margin-left:0%;
	margin-top:8.5vw;
	height: 45vw;	
	font-weight: normal;
	font-size:0.98vw;
	text-align: justify;
		color:  #433225;
}
#top-right{
	margin-right:0;
	margin-left:10vw;;
	font-size:0.7vw;
	line-height:1.1vw;
}



#footer{

margin-left:auto;
margin-right:auto;
width:100%;
height: 2vw;

}

#copyright{
		float:center;
		margin-left:0%;
		font-size:1.6vw;
		margin-top:0vw;
		color:  #FFFFFF
		

}

img{

height:100%;
width: auto;
		object-fit: cover;

}

a {
	

		color:  #433225;
}

	

	table {
	width: 100%;
	margin: auto;
	table-layout:fixed;
	border-collapse: collapse;
	font-size:1.4vw;
	}

	td {
	padding:1vw 0 0 0;
	vertical-align:bottom;
	
	}
	
	td span{
   	background-color:#fff;
	}
	
	td:first-child {
	text-align: left;
	
  overflow: hidden;
    position: relative;
	}
	
td:first-child::after {
  content: '';
  position: absolute;
  bottom: 0.3vw;
  width:20vw;
  height:0px ;
  margin-left: 0.5vw;
  border-bottom:2px dotted grey;
}

  	td:last-child {
	text-align:right;
	width:1vw;
  	}
	
	 td :hover{

	
		color:  white;
} 	
 a :hover{

	
		color:  #A52A2A;
} 	





.container {
  position: relative;
  overflow: hidden;
  width: 15vw;
  height:5.4vw;
  margin-bottom: 0.5vw; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}