/*
Theme Name: Muna Tseng
Theme URI: https://www.munatseng.org
Description: Theme created for Muna Tseng
Author: Example7
Author URI: https://www.example7.com
Version: 1.0

  Colors
  ------
  Black   2f2f2f
  Red     e80511   c00
  Gray    ccc      666

  Webfonts
  --------
  font-family: 'Open Sans';               300/400/600

*/





/* ====================================================================
   Global
   ==================================================================== */

/* -------------------[ Layout ]------------------- */

* {
  position: relative;
}

body { 
  background-color: #FFF; 
}

#header {
  width: 100%; height: 70px; padding: 15px 0 0 0; 
  background-color: #e80511; 
}

.header-wrap { 
  width: 92%; max-width: 950px; margin: 0 auto; padding: 0 4%;
}

#content,
#content-home { 
  overflow: auto; 
  width: 92%; max-width: 950px; margin: 0 auto; padding: 30px 4%;
}

.post { 
  float: left; 
  width: 50%; 
}

.side { 
  float: right; 
  width: 45%; margin: 65px 0 0 5%; padding: 0;
  text-align: right; 
}

.side h2 { 
  margin-top: -30px;
}

#footer { 
  width: 100%; padding: 40px 0; 
  color: #666; font-family: 'Open Sans'; font-size: 15px; line-height: 18px; font-weight: 300; letter-spacing: 0.03em; text-align: center; 
}

#content img {
  max-width: 100%; height: auto;
}

          @media only screen and (max-width: 768px) {
            #header {
              height: 100px;
            }
          }

          @media only screen and (max-width: 700px) {
            .post,
            .side { 
              float: none; display: block;
              width: 100%; 
            }
            .side { 
              margin: 30px 0 0 0; 
              text-align: left; 
            }
          }

/* -------------------[ Type ]------------------- */

body, html { 
  color: #2f2f2f; font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 21px; 
}

a { 
  transition: .3s; -o-transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s;
}

a:link, a:visited, a:active { 
  color: #c00; text-decoration: none; 
}

a:hover { 
  color: #2f2f2f; text-decoration: none; 
}

h1 { 
  margin: 0 0 25px 0; padding: 0;
  font-family: 'Open Sans'; font-size: 35px; line-height: 35px; font-weight: 300; 
}

h2 { 
  margin: 0 0 10px 0; padding: 0 0 10px 0;
  border-bottom: 1px solid #ccc; 
  font-family: 'Open Sans'; font-size: 25px; line-height: 30px; font-weight: 300; 
}

h3 { 
  margin: 20px 0 4px 0; padding: 0;
  font-family: 'Open Sans'; font-size: 17px; line-height: 22px; font-weight: 700; 
}

.caption {
  font-family: 'Open Sans'; font-size: 14px; line-height: 18px; font-weight: 300; text-align: right;
}

          @media only screen and (max-width: 700px) {
            .caption { 
              text-align: left; 
            }
          }

/* -------------------[ Logo / Nav ]------------------- */

.logo  { 
  float: left; 
  height: 45px; 
  color: #FFF; font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 40px; line-height: 45px; font-weight: 400; 
}

.logo a { 
  color: #FFF; 
}

.logo a:hover { 
  color: #c00; 
}

.menu-top  { 
  float: right; 
}

.menu-top a {
  height: 18px; margin: 0 0 0 30px; padding: 0 0 2px 0; 
  border-bottom: 2px solid #e80511; 
  color: #FFF; font-family: 'Open Sans'; font-size: 16px; line-height: 18px; font-weight: 400; text-decoration: none; 
}

.menu-top a:hover, 
.menu-top li.current_page_item a,
.menu-top li.current-menu-item a,
.menu-top li.current-menu-parent a, 
.menu-top li.current-menu-ancestor a,
.menu-top li.current-category-ancestor a { 
  color: #FFF;
  border-bottom: 2px solid #FFF; 
}

.menu-top ul ul {
  float: left; display: none; position: absolute; top: 15px; left: 0; 
  margin: 0; padding: 25px 0 0 0;
  text-align: left; 
}

.menu-top ul ul a, 
.menu-top ul ul a:link, 
.menu-top ul ul a:visited { 
  clear: both; float: left; position: relative; left: 15px; z-index: 999; 
  width: 200px; height: 15px; margin: 0; padding: 15px 0 15px 15px; 
  border: 1px dotted #e80511; 
  background-image: none; background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.9); 
  color: #2f2f2f; font-size: 14px; line-height: 16px; font-weight: 400; text-decoration: none; 
}

.menu-top li li a:hover { 
  background-color: #e80511;
  color: #FFF; 
}

.menu-top ul li:hover > ul { 
  display: block; 
}

.menu-top .menu ul { 
  list-style: none; 
}

.menu-top .menu li { 
  float: left; position: relative; 
  margin: 0; padding: 0; 
}

          @media only screen and (max-width: 990px) {
            .logo  { 
              margin-top: 5px;
              font-size: 30px; 
            }
            .menu-top  { 
              margin-top: 5px;
            }
            .menu-top a {
              margin: 0 0 0 20px; 
              font-size: 15px; line-height: 17px; 
            }
          }

          @media only screen and (max-width: 768px) {
            .logo  { 
              margin-top: 5px;
              font-size: 30px; 
            }
            .menu-top  { 
              float: left;
              width: 100%; margin-top: 10px;
            }
            .menu-top ul { 
              margin: 0; padding: 0;
            }
            .menu-top a {
              margin: 0 20px 0 0; 
              font-size: 15px; line-height: 17px; 
            }
            .menu-top ul ul { 
              left: -15px; 
            }
          }

          @media only screen and (max-width: 480px) {
            .logo  { 
              margin-top: 5px;
              font-size: 20px; 
            }
            .menu-top a {
              font-size: 14px; line-height: 16px; 
            }
          }

/* -------------------[ Home ]------------------- */

.home-left-top { 
  float: left; 
  width: 50%; margin: 40px 0 10px 0; 
  font-family: 'Open Sans'; font-size: 24px; line-height: 33px; font-weight: 300; 
}

.home-right-top { 
  float: right; 
  width: 45%; margin: 50px 0 10px 5%; padding: 0;
  font-size: 12px; line-height: 28px; text-align: right; 
}

.home-left-bottom { 
  float: left; 
  width: 45%; margin: 10px 5% 0 0; padding: 0;
  font-size: 12px; line-height: 28px;  
}

.home-left-bottom .caption { 
  text-align: left !important;
}

.home-right-bottom { 
  float: right; 
  width: 50%; margin: 0; 
  font-family: 'Open Sans'; font-size: 24px; line-height: 33px; font-weight: 300; 
}

.home-bottom { 
  clear: both; 
  font-family: 'Open Sans'; font-size: 15px; line-height: 18px; font-weight: 300; text-align: center;
}

          @media only screen and (max-width: 800px) {
            .home-left-top,
            .home-right-top,
            .home-left-bottom,
            .home-right-bottom { 
              float: none; display: block;
              width: 100%; margin: 0 0 20px 0; 
              text-align: left;
            }
          }

/* -------------------[ Gallery ]------------------- */

.gallery {
  margin: 50px 0; 
  text-align: center;
}

.gallery .gallery-item {
  margin: 0 0 30px 0; padding: 0 0 30px 0;
  /* border-bottom: 1px solid #ccc; */
}

.gallery .gallery-item img {
  margin-bottom: 10px; 
}

.gallery .gallery-caption {
  
}