/**************

global layout

# = id
. = class

**************/

body {
background-color: #000000;
/*font-family:townfont;*/
font-family: athelas, serif;
font-style: normal;
font-weight: 400;
}

header {
background: #000000;

}

footer {
background: #000000;
}


img {/*logo image*/
display: block;
margin-left: auto;/*centering logo*/
margin-right: auto;/*centering logo*/
width: 20%;/*logo size*/
}

.wrapper {
width:auto;/*resizing automatically depending on screen size*/
margin: 0 auto;/*resizing automatically depending on screen size*/
}
.container {
display: flex;
max-width:1000px;/*maximum width of the container */
margin-right: auto;/*resizing automatically depending on screen size*/
margin-left : auto;/*resizing automatically depending on screen size*/
}


/*********************

navigation bar 

*********************/

.nav {
background-color:#000000;
width: 100%;
list-style:none;
text-align:center;
}

.nav li {
display:inline-block;
}

.nav li a {
display:inline-block;
color: #8a8c8f;
font-size: 20px;
text-align:center;
padding: 14px 16px;
text-decoration: none;
}

.nav li a:hover {
background-color: #be1e2d;
}



/*************************

main contents 

*************************/

.main {
background: #000000; 
position: relative;
width:auto;/*resizing automatically depending on screen size*/
margin: 0 auto;/*resizing automatically depending on screen size*/
}
  
.main p {/*text */
position: absolute;
color: #ffffff;
font-weight: bold; 
width: 80%;
text-align:center;
font-size: 30px;
top: 50%; /*centering text*/
left: 50%; /*centering text*/
-ms-transform: translate(-50%,-50%); /*centering text*/
-webkit-transform: translate(-50%,-50%);/*centering text*/
transform: translate(-50%,-50%);/*centering text*/
margin:0;
/*padding:0;*/
border: solid white 2px; /*line around text*/
padding: 7px;/*space between line and text*/
}

.main img {
width: 100%;
margin: 0;
}

.main img:hover {
opacity: 0.50; /* 50% opacity */
}
  

/*************************

sub main contents

*************************/

.sub_main {
background: #000000; 
/*width: 100%;*/
position: relative;
width:auto; /*resizing automatically depending on screen size*/
margin: 0 auto;/*resizing automatically depending on screen size*/
}
.sub_main img {
float:left;
width: 32%;
margin: 5px; 
}
  
#submain_p1 {/*3 columns text, left*/
position: absolute;
color: #ffffff;
font-weight: bold; 
width: 20%;/*white box width*/
font-size: 20px;
text-align:center;
top:110px;/*adjust text position*/
margin-left: 50px;/*adjust text position*/
border: solid white 2px; /*line around text*/
padding: 7px;/*space between line and text*/
}
  
#submain_p2 {/*3 columns text, middle*/
position: absolute;
color: #ffffff;
font-weight: bold; 
width: 20%;/*white box width*/
font-size: 20px;
text-align:center;
top:110px;/*adjust text position*/
margin-left: 370px;/*adjust text position*/
border: solid white 2px; /*line around text*/
padding: 7px;/*space between line and text*/
}

#submain_p3 {/*3 columns text, right*/
position: absolute;
color: #ffffff;
font-weight: bold; 
width: 20%;/*white box width*/
font-size: 20px;
text-align:center;
top:110px;/*adjust text position*/
margin-left: 720px;/*adjust text position*/
border: solid white 2px; /*line around text*/
padding: 7px;/*space between line and text*/
}

.sub_main img:hover {
   opacity: 0.50; /* 50% opacity */
}

/*************************

social media 

*************************/

.sns {
width: auto;
margin-left: 300px;/*adjust sns position*/
}

.sns img {/*social media icons */
width:40px;
height:40px;
float:left;
margin: 5px;
}

.sns p{/*follow us text */
font-size:30px;
color: #8a8c8f;
float:left;
margin: 15px;
}

.sns img:hover {
   opacity: 0.50; /* 50% opacity */
}


/*************************

footer

*************************/

.business_info {
margin: auto;
width: 1000px;

}

.base {
float: left;
margin: 32px 0 40px 0;
}

.base h4{
color: #be1e2d;
font-weight: bold; 
font-size: 25px;
}

.base p{
color: #8a8c8f;
font-size: 15px;
}

.base a{
color: #8a8c8f;
font-size: 15px;
}

#map img{
width:200px;
height:150px;
padding: 10px;	
}

#about_us, #explore {
margin-right: 64px;
}

#about_us {
width: 300px;
}

#about_us p, #contact p {
line-height: 17px;
}

#about_us p, #contact p{
line-height: 17px;
}

#contact {
width: 250px;
}


/*********************

contents layout

*********************/

.contents {
width: 100%;
padding: 10px;
overflow: hidden;
}
.contents_image_left {
float: left;
margin-right: 10px;
}

.contents_image_right {
float: right;
margin-right: 10px;
}

.contents_summary {
overflow: hidden;
}
.contents_heading {
font-size: 45px;
font-weight: bold;
margin-bottom: 10px;
color: #be1e2d;

}

.contents img{
width:500px;
height:300px;	
}

.contents p{
color: #8a8c8f;
font-size: 20px;
margin: 15px;/*space around text */
text-align: justify;/*stretches the lines so that each line has equal width */
line-height: 140%;/*line height in percent of the current font size */
}