/*@import url('https://fonts.googleapis.com/css?family=Mukta');*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,500;0,700;0,800;1,500;1,700;1,800family=Encode+Sans+Semi+Expanded:wght@500&display=swap');
* { box-sizing: border-box; }
p, body, form, ul, li { margin: 0; padding: 0; }
header, section, footer, aside, nav, main, article, figure, video { display: block; }

body { font-family: 'DM Sans', serif; font-weight: 400; font-size: 15px; line-height: 1.5em; margin: 3vh 2vw; max-width: 1200px; color: #3A3A3A; }
a { text-decoration: none; color: #1A1A1A; }
a:hover { text-decoration: none; color: black; text-decoration: underline; }
a.select { text-decoration: underline; color: #3A3A3A; }
b { font-weight: 700; }
strong { font-weight: 800; }

header { display: flex; flex-direction: column; align-items: center; }
div#header_logo { width: 100%; }
div#hamburger { float: right; }
div#hamburger img { height: 3.5em; }
img#logo { display: block; border: 0; height: 3.5em; }

nav { flex: 1; text-align: center; font-family: "Encode Sans Semi Expanded", serif; font-weight: 500; font-style: normal; font-size: 135%; padding: 1.5em 0 0 0; display: none; }
nav ul { list-style-type: none; margin: 0; padding: 0; }
nav ul li { display: block; margin: 0; padding: .3em .8em; text-align: center; }

main { width: 98%; margin: 3em auto; }

div#index_about { display: flex; margin: 2em auto 1em auto; width: 95%; max-width: 910px; line-height: 1.55em; }

input.txt { outline:none; margin:0; border:none; width:100%; font-size: 15px; padding:7px 5px; color:#5a5a5a; font-weight:400; position:relative; border:1px solid #d5d5d5; background-color: rgba(255,255,255,0.5); }
input.txt::placeholder { opacity: 1; color: #7a7a7a; font-weight: 500; }
input.btn { border: 1px solid #e1e1e1; border-radius: .2em; padding: 7px 16px; background-color: #f8f8f8; font-size: 108%; color: #00a38a; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
select.sel { outline:none; margin:0; border:none; width:100%; font-size: 15px; padding:7px 5px; color:#5a5a5a; font-weight:400; position:relative; border:1px solid #d5d5d5; background-color: rgba(255,255,255,0.5); }

div.flexbox { display: flex; flex-direction: column; }
div.content-left { flex: 1; text-align: justify; }
div.content-img-left { text-align: center; margin-top: 2em; width: 100%; }
div.content-img-left img { border-radius: .3em; height: 100%; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }

p.title { font-weight: bold; font-size: 165%; margin-bottom: 1em; }
p.subtitle { font-weight: bold; font-size: 110%; margin: 3em 0 .8em 0; }
p.text { margin: .1em 0 1em 0; text-align: justify; }

div.table { display: table; width: 100%; border: 1px solid #d5d5d5; border-spacing: 2px; border-collapse: separate; border-radius: .3em; table-layout: fixed; overflow: hidden; margin: .5em auto 1em auto; -webkit-box-shadow: 1px 1px 5px -1px rgba(161,161,161,0.6); -moz-box-shadow: 1px 1px 5px -1px rgba(161,161,161,0.6); box-shadow: 1px 1px 5px -1px rgba(161,161,161,0.6); }
div.table-row { display: table-row; }
div.table-th { display: table-cell; padding: .5em 1em; vertical-align: middle; background-color: #89a8b3; color: white; font-weight: bold; font-size: 105%; }
div.table-row div.table-th:first-child { border-top-left-radius: .3em; }
div.table-row div.table-th:last-child { border-top-right-radius: .3em; }
div.table-td0 { display: table-cell; padding: .4em .7em; vertical-align: middle; }
div.table-td1 { display: table-cell; padding: .4em .7em; vertical-align: middle; background-color: #F4F4F4; }

footer { text-align: center; margin-top: 3em; font-size: 90%; }

@media screen and (min-width: 900px) {
    body { width: 96%; margin: 3em auto; font-size: 16px; }
    
    header { flex-direction: row; }
    div#header_logo { width: auto; }
    div#hamburger { display: none; }
    img#logo { height: 5em; }
    
    nav { padding: 0 4em 0 0; text-align: right; display: block; }
    nav ul li { display: inline; }
    
    div#index_about { font-size: 135%; line-height: 1.35em; }
    
    div.flexbox { flex-direction: row; }
    div.content-left { margin-right: 4em; }
    div.content-img-left { width: auto; margin-top: 0; }
}