@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');

/*
Theme Name: AFW 2023
Theme URI: muldava.it@gmail.com
Description: muldava.it@gmail.com
Version: 1
Author: muldava.it@gmail.com
Author URI: muldava.it@gmail.com
*/

a {color: inherit; text-decoration: none;}
body {margin: 0; padding: 0; font-family: 'Libre Baskerville', serif;}
#wrapper {width: 100%; margin: 0 auto;}
#header {width: 100%; margin: 0 auto; background-image: url(images/black.jpg); background-repeat: repeat-x; box-shadow: 3px 3px 3px #000}
#header #top-bar {max-width: 1366px; height: 50px; background-color: #000; margin: 0 auto;}
#header #top-bar h1 {margin: 0; padding: 10px 20px; color: #fff; font-size: 130%; font-family: 'Kanit', sans-serif; width: 50%; display: inline-block;}
#header #top-bar #menu {float: right; min-width: 280px; display: inline-block; vertical-align: top;}
#header #top-bar #menu ul {margin: 0; padding: 0; list-style: none; color: #fff; display: inline-block; vertical-align: top;}
#header #top-bar #menu ul li {-moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; list-style: none; margin: 0; padding: 15px 20px; display: inline-block; font-family: 'Libre Baskerville', serif; font-size: 100%; cursor: pointer}
#header #top-bar #menu ul li:hover {color: #FC0}

#header #bottom-bar {max-width: 1366px; height: 100px; margin: 0 auto;}
#header #bottom-bar img {height: 100%; width: auto; display: inline-block; vertical-align: top;}
#header #bottom-bar #nav {display: inline-block; vertical-align: top; padding: 0 20px;}
#header #bottom-bar #nav ul {margin: 0; padding: 0; list-style: none; color: #000; display: inline-block; vertical-align: top;}
#header #bottom-bar #nav ul li {-moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; list-style: none; margin: 0; padding: 35px 20px; display: inline-block; font-family: 'Libre Baskerville', serif; font-size: 120%; cursor: pointer}
#header #bottom-bar #nav ul li:hover {color: #FC0}
#header #bottom-bar #socialmedia {float: right;}
#header #bottom-bar #socialmedia img {display: inline-block; height: 50px; width: 50px; margin: 20px 10px; cursor: pointer; border: 1px solid #000; border-radius: 10px;}

#slider {}

#content {max-width: 1366px; margin: 50px auto;}
#content #divider {width: 28%; padding: 2%; border-right: 3px solid #000; vertical-align: top; display: inline-block;}
#content #divider.box1 h1 {margin: 0; padding: 0; font-size: 150%;}
#content #divider.box2 {background-color: #f1f1f1}
#content #divider.box2 h1 {margin: 0; padding: 0; font-size: 150%; font-style: italic}
#content #divider.box3 h1 {margin: 0; padding: 0; font-size: 150%; font-family: 'Kanit', sans-serif;} 

#content #divider #post {display: block; margin: 20px auto; border-bottom: 3px solid #000; padding: 20px 0;}
#content #divider #post img {width: 100%; height: auto; margin: 20px auto;}
#content #divider h2 {margin: 20px auto;}
#content #divider p {font-size: 100%;}
#content #divider span {font-size: 90%; font-weight: bold; cursor: pointer; color: #F90}

#content #divider #minipost {display: block; margin: 20px auto; border-bottom: 3px solid #000; padding: 20px 0;}
#content #divider #minipost img {width: 40%; height: auto; margin: 0 20px 20px 0; float: left;}
#content #divider #minipost h2 {background-color: #f1f1f1; padding: 10px; margin: 0 0 20px 0;}

#footer {background-color: #000; margin: 50px auto 0; padding: 20px 0;}
#footer #divider {width: 27%; padding: 3%; vertical-align: top; display: inline-block; color: #fff;}
#footer #divider h1 {font-size: 120%; margin: 0 0 30px 0; padding: 0 0 20px 0; border-bottom: 3px solid #fff;}
#footer #divider p {font-size: 100%;}
#footer #divider span {font-size: 90%; font-weight: bold; cursor: pointer; color: #F90; display: block; margin: 10px 0;}
#footer #divider span i {color: #fff; font-weight: normal; font-style: normal}
#footer #divider.socialmedia img {width: 40px; height: 40px; display: inline-block; background-color: #fff; border-radius: 10px; cursor :pointer; margin: 10px;}

#footer #copyright {display: block; width: 100%; margin: 20px auto 0; text-align: center;}
#footer #copyright h3 {font-size: 80%; color: #fff; margin: 0; padding: 5px 0; background-color: #333}

#page {border-top: 3px solid #000;}

#page #article {width: 64%; padding: 2%; display: inline-block; vertical-align: top;}
#page #article #post {display: block; margin: 20px auto; padding: 20px 0; background-color: #e9e9e9; width: 92%; padding: 2% 4%;}
#page #article #post img {width: 50%; height: auto; margin: 20px auto 50px; border: 5px double #000; display: block; padding: 10px;}
#page #article #post #ftimg img {width: 50%; height: auto; margin: 20px auto;}
#page #article #post #content img {display: inline-block; border: 3px double #000; width: auto; height: 70%; max-width: 500px; vertical-align: top; border-radius: 5px; margin: 10px;}
#page #article h2 {margin: 20px auto;}
#page #article p {font-size: 100%;}

#page #sidebar {width: 25%; padding: 2%; display: inline-block; vertical-align: top;}
#page #sidebar #minipost p {font-size: 100%;}
#page #sidebar #minipost span {font-size: 90%; font-weight: bold; cursor: pointer; color: #F90}

#page #sidebar #minipost {display: block; margin: 20px auto; border-bottom: 3px solid #000; padding: 20px 0;}
#page #sidebar #minipost img {width: 40%; height: auto; margin: 0 20px 20px 0; float: left;}
#page #sidebar #minipost h2 {background-color: #f1f1f1; padding: 10px; margin: 0 0 20px 0;}

#page #sidebar #gallery-post {display: block; width: 100%;}
#page #sidebar #gallery-post img {width: 90%; height: auto; margin: 20px auto; border: 3px double #000; padding: 5px;}

#page #archive {width: 64%; padding: 2%; display: inline-block; vertical-align: top;}
#page #archive #post {width: 28%; padding: 2%; border-right: 3px solid #000; vertical-align: top; display: inline-block;}
#page #archive #post img {width: 100%; height: auto; margin: 20px auto;}
#page #archive h2 {margin: 20px auto;}
#page #archive p {font-size: 100%;}
#page #archive span {font-size: 90%; font-weight: bold; cursor: pointer; color: #F90}

#subscribe-form {margin: 20px auto; padding: 5%; width: 90%; display: block; border: 1px solid #000; border-radius: 10px; font-family: 'Kanit', sans-serif;}
#subscribe-form textarea {resize: none; height: 100px; padding: 10px 5%; width: 90%; margin: 5px 0;}
#subscribe-form input[type="text"] {display: block; padding: 10px 5%; width: 90%; margin: 5px 0;}
#subscribe-form input[type="file"] {display: block; padding: 10px 5%; width: 90%; margin: 5px 0;}
#subscribe-form select {display: block; padding: 10px 5%; width: 100%; margin: 10px 0;}
#subscribe-form label {display: block; margin: 10px auto; text-align: left; font-size: 100%; font-family: 'Kanit', sans-serif;}
#subscribe-form span {color: #a10; font-size: 140%; margin: 10px 0;}
#submitForm {display: block; background-color: #000; color: #fff; text-align: center; font-size: 120%; width: 100%; border: none; border-radius: 10px; padding: 10px 0; font-family: 'Kanit', sans-serif; cursor: pointer}

@media only screen and (max-width: 799px){
#header {width: 100%; margin: 0 auto; background-image: none; background-repeat: repeat-x; box-shadow: 3px 3px 3px #000}
#header #top-bar {max-width: 1366px; height: auto; background-color: #000; margin: 0 auto;}
#header #top-bar h1 {margin: 0; padding: 10px 0; color: #fff; font-size: 70%; font-family: 'Kanit', sans-serif; width: 100%; display: block; text-align: center}
#header #top-bar #menu {float: none; min-width: none; display: inline-block; vertical-align: top;}
#header #top-bar #menu ul {margin: 0; padding: 0; list-style: none; color: #fff; display: block; vertical-align: top;}
#header #top-bar #menu ul li {-moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; list-style: none; margin: 5px; padding: 5px 10px; display: inline-block; font-family: 'Libre Baskerville', serif; font-size: 70%; cursor: pointer}
#header #top-bar #menu ul li:hover {color: #FC0}

#header #bottom-bar {max-width: 1366px; height: auto; margin: 0 auto;}
#header #bottom-bar img {height: auto; width: 100%; display: block; vertical-align: top;}
#header #bottom-bar #nav {display:block; vertical-align: top; padding: 0;}
#header #bottom-bar #nav ul {margin: 0; padding: 10px 0; list-style: none; color: #000; display: block; vertical-align: top; text-align: center;}
#header #bottom-bar #nav ul li {-moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; list-style: none; margin: 0; padding: 10px 20px; display: inline-block; font-family: 'Libre Baskerville', serif; font-size: 80%; cursor: pointer; background-color: #000; border-radius: 10px; color: #fff; margin: 5px;}
#header #bottom-bar #nav ul li:hover {color: #FC0}
#header #bottom-bar #socialmedia {float: none; display: block; width: 100%; text-align: center;}
#header #bottom-bar #socialmedia img {display: inline-block; height: 30px; width: 30px; padding: 10px 5px; cursor: pointer}

#page #article #post #ftimg img {width: 80%; height: auto; margin: 20px auto;}
#page #article #post #content img {display: block; border: 3px double #000; width: 90%; height: auto; max-width: 1000px; vertical-align: top; border-radius: 5px; margin: 20px auto;}

#content #divider {width: 96%; padding: 2%; border-right: none; vertical-align: top; display: block;}

#footer #divider {width: 96%; padding: 2%; vertical-align: top; display: block; color: #fff;}

#page #article {width: 96%; padding: 2%; display: block; vertical-align: top;}

#page #sidebar {width: 96%; padding: 2%; display: block; vertical-align: top;}
}