/* General */
body{background-color:white}
h1, h2, h3, h4, h5, h6{font-family:NotesEsa,Georgia,"Times New Roman",serif;font-weight:700;color:#006762}
button,input[type="reset"],input[type="button"],input[type="submit"],
button:hover,input[type="reset"]:hover,input[type="button"]:hover,input[type="submit"]:hover,
button:active,input[type="reset"]:active,input[type="button"]:active,input[type="submit"]:active{outline:none;box-shadow:none;-webkit-box-shadow:none}
a{text-decoration:underline}
small{font-size:0.8em}

.hidden{display:none}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
}

/* Custom scrollbars */
#side-menu .main-navigation{scrollbar-width:thin}
#side-menu .main-navigation::-webkit-scrollbar{width:10px;background-color:rgb(0 0 0 / 30%)}
#side-menu .main-navigation::-webkit-scrollbar-thumb{height:56px;background-color:rgb(255 255 255 / 30%)}

/* Top Header */
#header-meta{width:100%;box-sizing:border-box;position:fixed;top:0;height:64px;display:flex;align-items:center;justify-content:flex-start;padding:0 24px;background-color:#003247;border-bottom-width:4px;border-bottom-style:solid;border-color:#006762;color:#FFF;font-size:20px;z-index:99999}
#header-meta::before{z-index:-1;content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:#003247}
.step-header__left{display:flex;align-items:center;justify-content:flex-start}
.step-header__right{margin-left:auto;line-height:0}
.step-header__left>*{margin-bottom:0;margin-right:15px !important}
.header-action,
.header-action .wrapper,
.header-action .wrapper .icon{margin:0;padding:0}
.header-action .wrapper{cursor:pointer;display:inline-block}
.header-action .wrapper .fa{padding:3px;width:1.3em;height:1.3em;text-align:center;transition: all 0.25s ease}
.header-action .wrapper:hover .fa{transform: scale(1.2);color:white !important}
.small-info-text{font-family:NotesEsa;font-size:16px;font-weight:700;color:white;line-height:1.2em;margin:0;cursor:default}

/* Top Logo */
#esa-logo-image{display:inline-block;width:88px}
#esa-logo-image img{width:88px;height:32px;margin:0}
#esa-logo-image img:hover{opacity:1}

/* Top Search */
#top-search{padding:0;position:absolute;z-index:-2;bottom:0;left:0;width:480px;transition:all 0.25s ease}
#top-search.show{bottom:-56px}
#top-search .search-wrap input.s{width:100%;border-radius:0;background:#052837;border:0;outline:none;padding:10px 20px;font-size:18px;color:white;height:52px;box-sizing:border-box}
#top-search .search-wrap button{position:absolute;background-color:transparent;right:0;top:0;border:0;outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
#top-search .search-wrap button:hover{background-color:transparent}
#top-search .search-icon::before{font:normal 24px/1 'Genericons';content:'\f429';padding:12px}

/* Page */
#page{position:relative;background-color:#E8E8E4;padding-top:64px;min-height:calc(100vh - 77px)}
#page .inner-wrap{max-width:90%;margin:0 auto}

#primary{width:76%}
#secondary{width:20%}
#comments,
#secondary aside.widget:not(.widget_text),
#primary article .article-excerpt,
.single-post #primary article.post{padding:40px;background-color:white;box-shadow:2px 2px 10px 5px rgba(0,0,0,0.1);border-radius:5px;margin-bottom:40px}
#secondary aside.widget:not(.widget_text){padding:20px}

#primary article.post,#primary article.page{padding:0;margin-bottom:40px}
#primary article.has-post-thumbnail .article-excerpt{display:flex;flex-wrap:wrap}
#primary article.has-post-thumbnail .article-excerpt .post-featured-image{flex:0 0 50%;max-width:50%;padding-right:4%}
#primary article.has-post-thumbnail .article-excerpt .entry-content.excerpt{flex:0 0 50%;max-width:50%}
#primary article .article-excerpt{position:relative;transition:all 0.25s ease-out}
#primary article .article-excerpt:hover{transform:translateX(-10px)}
#primary article .article-excerpt .post-featured-image img{border-radius:5px;box-shadow:1px 1px 3px 1px rgba(0,0,0,0.2);height:auto}
#primary article .article-excerpt .entry-meta{border:0;float:left}
#primary article .article-excerpt .read-more-link{display:inline-block;position:relative;background-color:transparent;z-index:0;margin-top:1.5em}
#primary article .article-excerpt .read-more-link:hover{box-shadow:none}
#primary article .article-excerpt .read-more-link a{position:relative;color:#006762;font-family:NotesEsa;text-transform:uppercase;letter-spacing:0.25rem;text-decoration:none;padding:1.3em 2em;border-radius:2px;transition:all 0.25s ease-out}
#primary article .article-excerpt .read-more-link a::before{content:"";position:absolute;top:0;left:0;background-color:#e8e8e8;height:100%;width:3rem;z-index:-1;border-radius:inherit;transition:inherit}
#primary article .article-excerpt .read-more-link a:hover{background-color:transparent;color:#fff;padding:1.3em 2.5em}
#primary article .article-excerpt .read-more-link a:hover::before{width:100%;background-color:#006762}
#latest_post .entry-meta-bar{display:none}

#secondary .widget ul li{border:0;padding:2px 10px;font-family: NotesEsa;}
#secondary .widget ul li a{display:block;text-decoration:none;cursor:pointer;width:100%}
#secondary .widget ul li:nth-child(odd){background-color:rgba(0,0,0,0.05)}
#secondary .widget ul li:hover{background-color:rgba(0,0,0,0.1)}
#secondary .widget ul li:hover a{text-decoration:underline}
#secondary .widget.widget_text{margin:0}
#secondary .widget p{font-family:NotesEsa}
#secondary .widget.widget_sp_image{padding:20px;border-radius:2px;transition:all 0.25s ease}
#secondary .widget.widget_sp_image img{max-width:100%;border-radius:2px}

#secondary .widget.widget_sp_image:hover{transform:translateY(-10px) scale(1);box-shadow:0 20px 30px 0 rgba(0,0,0,0.1)}

/* Slider */
#featured-slider{overflow:hidden}
#featured-slider .slider-title{position:absolute;top:60px;left:0;width:90%;margin:0 5%;font-size:64px;line-height:1em;color:white;text-shadow:2px 2px 3px rgba(0,0,0,0.8);z-index:100;max-height:3em;overflow:hidden}
#featured-slider .slider-cycle{max-width:100% !important}
#featured-slider img{width:100%;object-fit:cover;min-height:600px;max-height:600px}
#featured-slider .entry-description-container{background:none;padding:0;margin-bottom:15px;pointer-events:none;text-shadow:2px 2px 3px rgba(0,0,0,0.8)}
#featured-slider .entry-title span{font-size:42px;line-height:1em;max-height:3em;overflow:hidden}
#featured-slider .entry-content p{font-size:16px;max-height:4.2em;overflow:hidden}
#featured-slider a.slider-read-more-button{text-decoration:none;position:relative;background-color:white;border-radius:2px;color:#006762;padding:1rem 1.5rem;margin-top:15px;font-size:14px;text-transform:uppercase;letter-spacing:0.25rem;width:200px;text-align:left;transition:all 0.25s ease}
#featured-slider a.slider-read-more-button:hover{background-color:white;transform: translateY(-0.15rem)}
#featured-slider a.slider-read-more-button::before{display:block;content:"\2192";position:absolute;right:25px;top:12px;font-size:32px}
#featured-slider a.slider-read-more-button:hover::before{animation: cta-arrow 1s ease-in-out infinite}
#featured-slider .slider-title-head{margin-bottom:1.5rem}
#featured-slider .entry-container{left:5% !important;top:auto;bottom:80px;transform:translateY(0)}
#controllers{text-align:left;padding:1rem 0;margin-left:5% !important}
#controllers a{width:14px;height:14px;border:2px solid white;border-radius:50%;background-color:transparent;cursor:pointer}
#controllers a:not(.active):hover{background-color:#8197A6 !important;border-color:#8197A6 !important}
#controllers a.active{background-color:white !important;background-color:white !important;cursor:default}
.flex-direction-nav .flex-next{right:-50px}
.flex-direction-nav .flex-prev {left:-50px}
.flex-direction-nav a{border:none;width:36px;height:36px;margin:-15px 0 0 0;display:block;border:none;padding:0;line-height:1;position:absolute;top:50%;overflow:hidden;opacity:0;cursor:pointer;color:white;transition:all 0.3s ease-in-out;z-index:9999}
.flex-direction-nav a::before {font-family:FontAwesome;display:inline-block;font-size:36px;content:'\f060';text-shadow:2px 2px 1px rgba(0,0,0,0.3)}
.flex-direction-nav a.flex-next::before{content:'\f061'}
.slider-cycle:hover .flex-direction-nav .flex-prev{left:30px}
.slider-cycle:hover .flex-direction-nav .flex-prev{opacity:0.7;left:10px}
.slider-cycle:hover .flex-direction-nav .flex-next{right:30px}
.slider-cycle:hover .flex-direction-nav .flex-next{opacity:0.7;right:10px}
.slider-cycle:hover .flex-direction-nav a:hover{opacity:1}

@media screen and (max-width: 1600px) {
	#primary{width:71%}
	#secondary{width:25%}
}
@media screen and (max-width: 1290px) {
	#primary{width:65%}
	#secondary{width:31%}
	#featured-slider .slider-title{font-size:48px}
}
@media screen and (max-width: 950px) {
	#primary{width:100%}
	#secondary{width:100%}
	#secondary .widget{width:70%}
	#featured-slider .slider-title{font-size:36px}
}
@media screen and (max-width: 767px) {
	#primary article.has-post-thumbnail .article-excerpt .post-featured-image{flex:0 0 100%;max-width:100%}
	#primary article.has-post-thumbnail .article-excerpt .entry-content.excerpt{flex:0 0 100%;max-width:100%}
	#secondary .widget{width:100%}
}

/* Page Feature Image & Title & Others */
#wp-custom-header{width:100%;height:410px;background-size:cover;background-position-x:50%;background-position-y:50%;display:flex;box-shadow:0 2px 6px rgba(0,0,0,0.5);}
#wp-custom-header .post-title-wrapper{align-self:flex-end;width:100%;padding:0 5% 3.5em 5%;background-image:linear-gradient(0deg,rgba(0,50,71,0.7) 0%,rgba(0,50,71,0) 100%)}
.header-title{font-family:NotesEsa;color:white;font-weight:700;padding:0;text-shadow:0 0 5px rgba(0,0,0,0.5)}
.header-parent-title-class{font-size:20px;line-height:20px;text-transform:uppercase;background-color:#006762;padding:3px 7px;display:inline-block;margin-bottom:1.5em}
.header-post-title-class{font-size:64px;line-height:1em;max-height:3.05em;overflow:hidden}
.page-heading{font-family:NotesEsa;font-size:52px;line-height:1em;color:#006762;font-weight:700;padding:0;margin:0 0 20px 0}
.post .entry-title a, .page .entry-title a{color:#006762}
.previous a, .next a{border:0}

.home-link{color:white;font-size:32px;margin-right:10px;transition:all 0.25s ease;display:inline-block;text-shadow:0 0 5px rgba(0,0,0,0.5);vertical-align:sub}
.home-link:hover{transform:translateY(-1px) scale(1.2)}
.breadcrumbs>span{display:none}
.breadcrumbs>span:nth-last-child(2){display:inline-block}
.breadcrumbs>span:nth-last-child(2) a{font-family:NotesEsa;font-size:20px;line-height:20px;text-transform:uppercase;background-color:#006762;padding:3px 7px;display:inline-block;margin-bottom:1.5em;color:white;text-decoration:none;font-weight:700;text-shadow:0 0 5px rgba(0,0,0,0.5)}

.warning small{font-size:0.8em;font-weight:400}
.warning{display:inline-block;color:#e08700;padding:0.5rem 1rem;background-color:rgba(255,165,0,0.15);font-family:'NotesEsa';margin-bottom:1em}
.warning::before{content:"\f071";color:orange;font:normal normal normal 1.5em/1 FontAwesome;display:inline-block;margin-right:0.5em;vertical-align:bottom}
.warning::after{content:"";display:table;clear:both}

/* Footer */
#colophon .footer-socket-wrapper{padding:1.5em 0}
#colophon .inner-wrap{max-width:90%;margin:0 auto}
#colophon .footer__signature {font-family:'NotesESA',sans-serif;font-weight:700;margin:0 30px 0 0;color:#006762;font-size:16px;float:left;line-height:32px}
#colophon .small-menu{float:left;margin:0 30px 0 0;text-align:left}
#colophon .small-menu ul li{font-family:'NotesESA',sans-serif}
#colophon .small-menu ul li a{font-size:16px;color:#006762;line-height:32px;padding:0 15px 0 0}
#colophon .small-menu ul li a:hover{color:#006762}
#colophon .social-links{float:right;padding:0}
#colophon .social-links ul li a::before{color:#006762 !important;font-size:24px !important;transition:all 0.25s ease}
#colophon .social-links ul li a:hover{opacity:1}
#colophon .social-links ul li a:hover::before{transform:scale(1.2)}

/* Side Menu */
#side-menu{font-size:20px;position:fixed;left:0;top:0;height:100vh;background-color:#e8e8e4;overflow-x:hidden;overflow-y:hidden;color:#8197A6;z-index:1}
#side-menu a{text-decoration:none}
#side-menu .main-navigation{float:left}
#side-menu ul li{display:block;width:100%;margin:0;background:transparent}
#side-menu ul li a{display:block;width:100%;color:#8197A6;padding:0 0 0 2.5em;font-family:'NotesESA',sans-serif;font-size:1em;line-height:2em;white-space:nowrap;transition:all 0.25s ease}
#side-menu ul.nav-menu>li>a::before{content:"";width:0.5em;height:0.5em;display:block;border-radius:100%;position:absolute;top:1em;transform:translate(30px,-6px);left:0;background-color:#8197A6}
#side-menu ul li a:hover{background-color:rgba(255,255,255,0.02);color:white !important}
#side-menu ul li ul{font-size:0.9em;background-color:#0F2733;border:0;position:relative;left:auto;top:auto;width:100%}
#side-menu ul li ul li{border:0}
#side-menu ul li ul li a{padding-left:4em;line-height:1.6em}
#side-menu .header-action{float:left;padding:0.8em 0 0 1.1em;font-size:22px;width:100%;background-color:#003247;border-bottom:4px solid #006762;height:64px}
#side-menu li.current-menu-item{background:rgba(255,255,255,0.05)}
#side-menu li.current-menu-item>a{color:white}
#side-menu li.current-menu-ancestor>a::before,
#side-menu li.current-menu-item>a::before{background-color:#c1662a !important}
#side-menu ul.nav-menu>li:last-child{background-color:rgba(0,103,98,0.6)}
#side-menu ul.nav-menu>li:last-child a{color:#d2dadf}
#side-menu .menu-toggle{display:none}
#side-menu #site-navigation{height:90vh;height:calc(100vh - 94px);overflow-x:hidden;overflow-y:auto;background-color:#0f2733;padding:20px 0}
#side-menu .header-action .wrapper .fa{color:#8197A6 !important}
#side-menu .header-action .wrapper:hover .fa{transform: scale(1.2) rotate(90deg);color:#8197A6}
/* Side Menu Transitions*/
#header-meta,#page,#side-menu,#colophon{transition:all 0.25s ease}

			 #header-meta,
			 #page,
			 #colophon{max-width:100%;margin-left:0}
html.side-on #header-meta,
html.side-on #page,
html.side-on #colophon{max-width:calc(100% - 300px);margin-left:300px}

			 #side-menu{min-width:0;max-width:0}
html.side-on #side-menu{min-width:300px;max-width:300px}

/* Page Customization according to WP adminbar position and size */
body.admin-bar #header-meta{top:32px}
body.admin-bar #page{min-height:calc(100vh - 109px)}
body.admin-bar #side-menu{top:32px;height:calc(100vh - 32px)}
body.admin-bar #side-menu #site-navigation{height:calc(100vh - 126px)}
@media screen and (max-width: 830px) {
	html.side-on .small-info-text{display:none}
	html.side-on #top-search{width:100%}
}
@media screen and (max-width: 782px) {
	body.admin-bar #header-meta{top:46px}
	body.admin-bar #page{min-height:calc(100vh - 123px)}
	body.admin-bar #side-menu{top:46px;height:calc(100vh - 46px)}
	body.admin-bar #side-menu #site-navigation{height:calc(100vh - 140px)}
}
@media screen and (max-width: 600px) {
	#wpadminbar{position:fixed;left:90%;left:calc(100% - 46px);opacity:0.7;top:116px;border-radius:20px 0 0 20px;border:2px solid rgba(211, 211, 211, 0.2);box-sizing:content-box}
	#wpadminbar:hover{position:fixed;left:0;opacity:1;border-radius:0;border-color:transparent}
	
	body.admin-bar #header-meta{top:0}
	body.admin-bar #page{padding-top:18px}
	
	#side-menu{height:100vh !important;top:0 !important;font-size:22px}
	#side-menu #site-navigation{height:calc(100vh - 94px) !important}
	.small-info-text{display:none}
	#top-search{width:100%}
	
	#featured-slider .entry-content, #featured-slider .slider-read-more-button{display:block}
	
	.header-post-title-class{font-size:56px}
	
	#colophon .footer__signature,
	#colophon .small-menu,
	#colophon .social-links{width:100%;margin:0 0 10px 0}
	
	html.side-on{overflow:hidden}
	html.side-on #side-menu{min-width:100%;max-width:100%}
	html.side-on #wpadminbar,
	html.side-on #header-meta,
	html.side-on #page,
	html.side-on #colophon{display:none}
}

.my_table{table-layout:fixed;background-color:white;margin:0 auto 20px auto;width:100%;box-shadow:1px 1px 7px 1px rgba(0,0,0,0.1);border-collapse:collapse;border-radius:5px;border-style:hidden}
.my_table tr>*{padding:10px;text-align:center;vertical-align:middle;border:1px solid #d6d6d6}
.my_table th{font-weight:700}

/* This one is important or the side-menu will not be displayed on mobile version */
@media screen and (max-width: 782px) {
	#side-menu ul{display:block}
}