/*

Theme Name: COMHWA
Version: 1.0
Author: Finely Sliced

*/


* { margin: 0; padding: 0; }

header, nav, main, section, article, footer { display: block; }

html { height: 100%; }
body { position: relative; background: #FFF; height: 100%; padding-top: 70px; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 62.5%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

.page-template-page-home { padding-top: 0; }

main { position: relative; background: transparent; z-index: 5; }


/*---------------------------------------

	HEADER

-----------------------------------------*/

header { position: fixed; top: 0; left: 0; right: 0; border-top: 4px solid #f6a041; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; background: #FFF; box-shadow: 0 1px 1px rgba(0,0,0,.3); z-index: 30;  }
.header_wrap { position: relative; margin: 0 auto; max-width: 1100px; height: 70px; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; }

.page-template-page-home header { background: transparent; box-shadow: none; }
.page-template-page-home .header_wrap { height: 140px; }
.page-template-page-home nav { top: 40px; }
.page-template-page-home nav li { height: 100px; line-height: 100px; }
.page-template-page-home nav li a { height: 100px; line-height: 100px; }
.page-template-page-home #logo { bottom: 0; width: 79px; height: 98px; background-image: url('img/logo.png'); }

.page-template-page-home nav li a:link, .page-template-page-home nav li a:visited { color: #FFF; text-decoration: none; }
.page-template-page-home nav li a:hover, .page-template-page-home nav li a:active { color: #FFF; text-decoration: none; }

#logo { position: absolute; bottom: 9px; left: 20px; display: block; width: 129px; height: 52px; background-image: url('img/logo_reduced.png'); background-repeat: no-repeat; }

nav { position: absolute; left: 10%; right: 0; top: 0; bottom: 0; padding: 0 20px 0 0; text-align: right; }
nav ul { list-style: none; margin: 0; }
nav li { position: relative; display: inline-block; height: 70px; line-height: 70px; margin: 0 0 0 26px; font-family: "aktiv-grotesk", sans-serif; font-weight: 700; font-size: 16px; }

nav li a { display: block; height: 70px; line-height: 70px; }
nav ul ul { position: absolute; top: 50%; left: -12px; width: 220px; text-align: left; background: #FFF; border-top: 4px solid #f6a041; box-shadow: 0 1px 1px rgba(0,0,0,.3); visibility: hidden; opacity: 0; margin: 28px 0 0 0; -webkit-transition: opacity .3s; -moz-transition: opacity .3s; transition: opacity .3s; border-radius: 2px; }

nav ul ul:after { content: ""; position: absolute; top: -10px; left: 25px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #f6a041; }

nav ul ul li { display: block; height: auto !important; font-size: 14px; font-weight: 400; line-height: normal !important; margin: 0; border-bottom: 1px solid #EDEDED; }
nav ul ul li:last-child { border: none; }
nav ul ul li a { display: block; height: auto !important; line-height: normal !important; padding: 12px; }

nav li a:link, nav li a:visited { color: #353535; text-decoration: none; }
nav li a:hover, nav li a:active { color: #e87f0b; text-decoration: none; }

nav ul ul li a:link, nav ul ul li a:visited { color: #353535 !important; text-decoration: none; }
nav ul ul li a:hover, nav ul ul li a:active { color: #e87f0b !important; text-decoration: none; }

nav > li, nav > a { -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; }
nav ul li:hover ul { visibility: visible; opacity: 1; }

#nav_toggle { display: none; position: absolute; top: 0; right: 0; width: 70px; height: 70px; background-image: url('img/nav.svg'); background-position: center center; background-size: 36px; background-repeat: no-repeat; }


/*---------------------------------------

	TYPOGRAPHY

-----------------------------------------*/

h1 { font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; color: #FFF; font-weight: 700; font-size: 33px; letter-spacing: -0.5px; line-height: 125%; }
h2 { font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; color: #e87f0b; font-weight: 700; font-size: 27px; letter-spacing: -0.3px; line-height: 110%; margin: 0 0 18px 0; }
h3 { font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; color: #e87f0b; font-weight: 400; font-size: 21px; letter-spacing: -0.3px; line-height: 110%; margin: 0 0 8px 0; }

p { color: #232323; font-size: 15px; font-weight: 400; line-height: 140%; margin-bottom: 20px; }

ul { color: #232323; font-size: 15px; font-weight: 400; line-height: 140%; margin: 0 0 20px 20px; }
ol { color: #232323; font-size: 15px; font-weight: 400; line-height: 140%; margin: 0 0 20px 20px; }

.date { color: #8a8a8a; font-size: 13px; margin-bottom: 8px; }

a { -webkit-transition: border-color .3s; -moz-transition: border-color .3s; transition: border-color .3s; }

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

hr { height: 1px; border: none; background: #F4F4F4; margin-bottom: 24px; }

.button, button { position: relative; display: inline-block; font-weight: 700; font-size: 18px; letter-spacing: -0.25px; padding: 10px 16px; border-radius: 3px; background: #f49021; border: 1px solid #d8760a; border-bottom: 1px solid #d8760a; color: #FFF; text-shadow: 0 1px 0 rgba(223,130,37,.5); font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; margin: 0; box-shadow: 0 1px 1px rgba(0,0,0,.25); }

.button:after, button:after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; border-radius: 3px; background: rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.35); }

.button:hover:after, button:hover:after { opacity: 0.5; }

.button:link, .button:visited { color: #FFF; text-decoration: none; }
.button:hover, .button:active { color: #FFF; text-decoration: none; }

.member_button { display: block; text-align: center; font-size: 24px; margin-bottom: 34px; }

.more { font-size: 15px; }
.more:link, .more:visited { color: #e87f0b; text-decoration: underline; }
.more:hover, .more:active { color: #e87f0b; text-decoration: none; }

.primary h1 { color: #e87f0b; margin-bottom: 10px; }
.primary .date { margin-bottom: 40px; }

/* WP Alignment */

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

img.size-full { display: block; max-width; 100%; width: 100%; height: auto; }

/*---------------------------------------

	HOME

-----------------------------------------*/

/* Home Page Welcome */

.welcome_banner { position: relative; background-size: cover; background-position: center right; background-image: url('img/banner.jpg'); background-repeat: no-repeat; }
.welcome_banner:after { position: absolute; top: 0; left: 0; right: 0; height: 100%; background-repeat: repeat; background-image: url('img/mask.svg'); background-color: rgba(0,0,0,.5); content: ""; z-index: 1; }

.welcome { position: relative; margin: 0 auto; max-width: 1100px; padding: 0 20px; height: 400px; z-index: 2; }
.welcome_content { position: absolute; left: 0; right: 0; bottom: 30px; padding: 0 20px; text-align: center; }
.welcome h1 { padding: 0 20px; box-sizing: border-box; margin-bottom: 0; text-shadow: 0 0 1px rgba(0,0,0,.5); }
.welcome h3 { color: #FFF; width: 88.8888%; padding: 0 20px; box-sizing: border-box; text-shadow: 0 0 1px rgba(0,1,0,.5); }

/* Home Page Introduction */

.introduction { padding: 16px 0 10px; background: #f49021; text-align: center; }
.introduction .content { padding: 0 20px; max-width: 1140px; }
.introduction h3 { line-height: 125%; padding: 0 20px; color: #FFF; box-sizing: border-box; }

/* Home Page Services */

.services { list-style: none; margin: 0 -20px 10px -20px; line-height: normal; }
.services li { display: inline-block; vertical-align: top; width: 50%; padding: 0 20px; box-sizing: border-box; margin-bottom: 20px; }
.services h2 { font-size: 21px; margin-bottom: 6px; }
.services p { margin-bottom: 8px; }

.services a { position: relative; display: block; border: 1px solid #719949; padding: 16px; min-height: 130px; }

.services div { padding: 0 0 0 38px; background: url('img/cta.jpg') 0 0 no-repeat; }
.services li:hover .more { text-decoration: underline; }

/* Action */

.action { background: #fac992; height: 300px; }


/*---------------------------------------

	CONTENT

-----------------------------------------*/

.page_header { position: relative; padding: 140px 20px 30px 20px; background-color: #f6a041; background-repeat: no-repeat; background-image: url('img/pagebg.png'); background-position: 80% center; background-size: 242px auto; }
.page_header:after { position: absolute; top: 0; left: 0; right: 0; height: 54px; background-repeat: repeat; background-image: url('img/leaf.jpg'); background-size: 380px 54px; content: ""; z-index: 1; }


.page_header h1, .page_header h2 { color: #FFF; font-weight: 700; font-size: 33px; letter-spacing: -0.5px; line-height: 125%; margin: 0 auto 8px auto; max-width: 1100px; padding: 0 20px; box-sizing: border-box; }

.breadcrumbs { list-style: none; margin: 0 auto; max-width: 1100px; padding: 0 20px; color: #FFF; font-size: 12px; box-sizing: border-box; line-height: normal; }
.breadcrumbs li { display: inline; }
.breadcrumbs li:after { content: "/"; margin: 0 0 0 4px; }
.breadcrumbs li:last-child:after { content: ""; }
.breadcrumbs a:link, .breadcrumbs a:visited { color: #FFF; text-decoration: underline; }
.breadcrumbs a:hover, .breadcrumbs a:active { color: #FFF; text-decoration: none; }


.page_content { background: #FFF; padding: 50px 20px; }

.content { position: relative; margin: 0 auto; max-width: 1100px; box-sizing: border-box; overflow: hidden; }
.primary { float: left; width: 66.6666%; padding: 0 20px; box-sizing: border-box; }
.primary.full-width {width: 100%; padding: 0px;}
.secondary { float: right; width: 33.3333%; padding: 0 20px; box-sizing: border-box; }

/* Tabbed Content */

.tabs { list-style: none; border-bottom: 1px solid #f6a041; font-size: 15px; font-weight: 400; margin: 0; line-height: normal; }
.tabs li { font-weight: 700; border: 1px solid #DEDEDE; border-bottom: none; margin-top: 1px; }
.tabs a { display: inline-block; padding: 10px; }

.tabs .r-tabs-state-active { border: 1px solid #f6a041; background: #f6a041; color: #FFF; }
.tabs .r-tabs-state-active a { color: #FFF; }

/* News */

.latest_news { padding: 40px 20px; border-top: 1px solid #F4F4F4; }

.news { list-style: none; margin: 0 -20px; line-height: normal; }
.news li { display: inline-block; vertical-align: top; width: 33.3333%; padding: 0 20px; box-sizing: border-box; }

.posts { list-style: none; margin: 0; }
.posts li { margin-bottom: 40px; }
.posts .date { margin-bottom: 10px; }

/* Contact Details */

.contact_details { list-style: none; border-top: 1px solid #F4F4F4; color: #232323; font-size: 15px; font-weight: 400; line-height: 140%; margin: 0 0 20px 0; line-height: normal; }
.contact_details li { padding: 10px 5px; border-bottom: 1px solid #F4F4F4; }
.contact_details li:before { color: #666; margin-right: 8px; }

.contact_details a:link, .contact_details a:visited { color: #232323; text-decoration: none; }
.contact_details a:hover, .contact_details a:active { color: #e87f0b; text-decoration: none; }

.contact_details span { display: block; padding-left: 23px; }


/*---------------------------------------

	FORMS

-----------------------------------------*/

label { display: block; font-size: 15px; margin-bottom: 5px; color: #4e4e4e; }

input[type="text"], input[type="email"] { border: 1px solid #CCC; background: #F4F4F4; width: 100%; box-sizing: border-box; padding: 10px; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 15px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; margin-bottom: 12px; outline: none; }

.actions { text-align: right; }

.wpcf7-not-valid-tip { display: none !important; }
.wpcf7-response-output { font-size: 17px; margin: 0 !important; padding: 8px !important; background: #FFF !important; border: none !important; }
.wpcf7-validation-errors { color: red !important; }


/*---------------------------------------

	ICONS

-----------------------------------------*/

@font-face {
  font-family: 'fontello';
  src: url('font/fontello.eot?69463014');
  src: url('font/fontello.eot?69463014#iefix') format('embedded-opentype'),
       url('font/fontello.woff2?69463014') format('woff2'),
       url('font/fontello.woff?69463014') format('woff'),
       url('font/fontello.ttf?69463014') format('truetype'),
       url('font/fontello.svg?69463014#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;

}

.icon-phone:before { content: '\e800'; }
.icon-pin:before { content: '\e801'; }
.icon-clock:before { content: '\e802'; }
.icon-right-open:before { content: '\e803'; }
.icon-left-open:before { content: '\e804'; }
.icon-mail:before { content: '\f0e0'; }


/*---------------------------------------

	FOOTER

-----------------------------------------*/

footer { position: relative; background: #FFF; z-index: 5; }
.footer_wrap { margin: 0 auto; max-width: 1100px; border-top: 1px solid #F4F4F4; padding: 40px 20px 100px 20px; background: url('img/footer.png') bottom left repeat-x; }

footer p { padding: 0 20px; color: #666; font-size: 13px; margin-bottom: 4px; line-height: 120%; }


/*---------------------------------------

	BREAKPOINTS

-----------------------------------------*/

@media screen and ( max-width: 960px ) {

body { padding-top: 60px; }

.page-template-page-home header { background: #FFF; box-shadow: 0 1px 1px rgba(0,0,0,.3); }
.page-template-page-home .header_wrap { height: 70px; }

.page-template-page-home nav { top: 70px; }
.page-template-page-home nav li { height: 100px; line-height: 100px; }
.page-template-page-home nav li, .page-template-page-home nav li a { height: auto; line-height: normal; }
.page-template-page-home #logo { bottom: 9px; width: 129px; height: 52px; background-image: url('img/logo_reduced.png'); }

.page-template-page-home nav li a:link, .page-template-page-home nav li a:visited, .page-template-page-home nav li a:hover, .page-template-page-home nav li a:active, nav li a:hover, nav li a:active { color: #353535; }

nav { position: absolute; left: 0; right: 0; top: 70px; bottom: auto; padding: 0; text-align: left; background: #FFF; box-shadow: 0 1px 1px rgba(0,0,0,.3); display: none; }
nav ul { list-style: none; margin: 0; }
nav li { position: relative; display: block; height: auto; line-height: normal; margin: 0; border-top: 1px solid #EDEDED; }
nav li a { display: block; height: auto; line-height: normal; padding: 14px 20px; }
nav ul li:hover ul { visibility: hidden; }

#nav_toggle { display: block; }
.navigate nav { display: block; }

.welcome { padding: 0; }
.welcome_content { bottom: 20px; padding: 0; }
.welcome h1 { width: 100%; margin-bottom: 0; font-size: 28px; }

.introduction h3 { padding: 0; }

.page_header h1, .page_header h2 { font-size: 28px; padding: 0; }
.breadcrumbs { display: none; }

.primary, .secondary { float: none; width: auto; padding: 0; box-sizing: border-box; }

.services { margin: 0; }
.services li { display: block; width: auto; padding: 0; }

.latest_news { padding: 40px 0 0 0; border-top: none; }

.news { margin: 0; }
.news li { display: block; width: auto; padding: 0; margin-bottom: 30px; }

footer p { padding: 0; }

}


/*---------------------------------------

	MISC

-----------------------------------------*/

.r-tabs .r-tabs-nav {
    margin: 0;
    padding: 0;
}

.r-tabs .r-tabs-tab {
    display: inline-block;
    margin: 0;
    list-style: none;
}

.r-tabs .r-tabs-panel {
    padding: 30px 0 0 0;
    display: none;
}

.r-tabs .r-tabs-accordion-title {
    display: none;
}

.r-tabs .r-tabs-panel.r-tabs-state-active {
    display: block;
}

/* Accordion responsive breakpoint */
@media only screen and (max-width: 960px) {

#tabbed_content { margin-bottom: 30px; }

.r-tabs .r-tabs-nav { display: none; }
.r-tabs .r-tabs-panel { display: block !important; padding: 30px 16px; }
.r-tabs .r-tabs-accordion-title { display: block; margin-bottom: 5px; }

.r-tabs .r-tabs-accordion-title a { display: block; background: #f6a041; padding: 12px 16px; color: #FFF; font-weight: 700; font-size: 24px; letter-spacing: -0.3px; line-height: 110%; }

}

a { outline: none; }
img { border: none; }