/* --------------------------------------------
	
	Project 	 : TuneUP
	Description  : Responsive Html Template
	Author 		 : themelog 
	Version      : 1.0
	Edited by    : LinkUSystems, Inc; Danny Valdez
	
	---
	
	CONTEXT:
	
	1. GENERAL
		1.1 Generic
		1.2 Fonts
		1.3 Typograpy
		1.4 Tables
		1.5 Forms
		1.6 Buttons
		1.7 Image Alignment
	2. LAYOUT 
		2.1 Header
		2.2 Middle
	3. 	NAVIGATION
		3.1 Nav Menu
		3.2 Menu Toggle Link 
		3.3 First Level
		3.4 Sub Menus
		3.5 Submenu-toggle Link
	4. PAGES
		4.1 Pages General
		4.2 Profile
		4.3 Search Page
		4.4 Archives
		4.5 Category Archive
		4.6 Blog
		4.7 Comments
	5. SIDEBAR
		5.1 Widgets
		5.2 Custom Widgets
		5.3 Search Widget
		5.4 Calendar Widget
		5.5 Categories
		5.6 Archive & Meta
		5.7 Widget Categories
	6.FOOTER
		6.1 Footer General
		
				
			
   -------------------------------------------- */
   

/*  --------------------------------------------
    1. GENERAL - general html elements
-------------------------------------------- */

/* 1.1 GENERIC*/
html { font-size: 100%; box-sizing: border-box; }
html.full-screen { min-height: 100%; }
body { color: #333; line-height: 1.6; background: #fff; }
html.full-screen body { height: 100vh; min-height: 100vh; width: 100%; }
*, *:before, *:after { box-sizing: inherit; }
img { max-width: 100%; height: auto; }

/* 1.2 FONTS */
body { font-family: 'Noto Serif', serif; }
h1, h2, h3, h4, h5, h6, .menu, .widget_recent_entries ul, .tagcloud, .cat-item, .cat-links, .entry-meta, .archives, .navigation, input[type=submit], input[type=button], button, a.button, .button, .comments-area .reply, .comments-area .fn, .yarpp-thumbnail-title, .search-box input, label, .footer .copyright { font-family: 'Open Sans', sans-serif; }

/* 1.3 TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 { margin: 1.2em 0 .8em 0; }
h1 { font-size: 1.6em; line-height: 1.2; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; } 
h4 { font-size: 1.1em; }
h5 { font-size: 1.0em; }
h6 { font-size: 0.925em; }
a { color: #3f88db; text-decoration: none; }
a:hover { color: #78afed; }
p { margin: 0 0 1em 0; }
ul, ol { padding-left: 3em; margin: 1em 0; }
figure { margin: 0; }
figure .wp-caption-text { padding: 1em 0; font-size: .925em; color: #bbb; }
blockquote { margin: 1em; font-size: 1.2em; font-family: Georgia, serif; font-style: italic; }
blockquote cite { font-size: 14px; color: #aaa; display: block; margin-top: 10px; text-align: right; }
pre { font-size: 13px; }
.underline { text-decoration: underline; }
.strikethrough { text-decoration: line-through; }

/* 1.4 TABLES  */
table { font-size: .925em; margin: 1em 0 3em 0; text-align: center;	}
tr th { padding: .8em 0.3em .8em 0.3em; font-weight: bold; line-height: 1.2; border-bottom: 2px solid #555; text-transform: uppercase; }
tr td { color: #777; padding: .8em .3em .6em .3em; border-bottom: 1px solid #eee; }
tfoot tr td { border-bottom: 0 }

/* 1.5 FORMS */
form { margin: 2em 0; }
label { display: block; font-size: .825em; margin: 0 0 .3em 0; font-weight: bold; }
label.error { color: #B93538; }
label.checkbox { line-height: 1.2; padding-left: 25px; }
input:not([type=submit]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]),textarea { width: 100%; padding: .8em 1em; font-size: 1em; border: 1px solid #ddd; box-sizing: border-box; }
select { width: 100%; padding: .7em 1em; font-size: 1em; border: 1px solid #ddd; box-sizing: border-box; }
#search-form p select { margin-right: 2%; width: 46%; }
input#verifycode { width: 46%; }
input:not([type=submit]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]):focus ,textarea:focus { outline: 0; }
textarea { min-height: 100px; } 
input[type=checkbox] { float: left; margin: 3px 0 0 -22px; }

/* 1.6 BUTTONS */
input[type=submit], input[type=button], button, a.button, .button { display: inline-block; padding: .5em 1.2em; border: 3px solid #555; color: #333; background: #fff; font-size: 14px;  line-height: 1.3; outline: 0; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; transition: all 0.2s ease-out; }
input[type=submit]:hover, input[type=button]:hover, button:hover, a.button:hover { color: #3f88db; border-color: #3f88db; cursor: pointer; }

/* 1.7 IMAGE ALIGNMENT */
.aligncenter, .alignnone, .alignright, .alignleft { display: block; margin: 1.6em auto; clear: both; }
.wp-caption { color: #aaa; }
.wp-caption img { border: 0 none; height: auto; margin: 0; padding: 0; }
.wp-caption p.wp-caption-text { font-size: 14px; margin: 0; padding: .6em .1em 0; text-align: left;	}


/*  --------------------------------------------
    2. LAYOUT - layout elements
-------------------------------------------- */

/* 2.1 HEADER */
.header { background: #e0e0e0; border-bottom: solid 3px #ccc; position: relative; text-align: center; }
.header .site-title { background: #fff url("../images/background.jpg") no-repeat center center; background-size: cover; display: table; margin-bottom: 0; margin-top: 0; height: 180px; font-size: 2em; letter-spacing: -1px; padding: 0.5em 0; width: 100%; }
.header .site-title a { color: #333; display: table-cell; text-align: center; vertical-align: middle; }
.header .site-title a:hover { color: #444; }
.header .site-title img { display: inline-block; max-height: 110px; }
.header .site-title div.site-title-block { background: rgba(255,255,255,0.7); box-shadow: rgba(0,0,0,0.15) 0 0 6px 0; color: #000; display: inline-block; margin: 0 10px; padding: 5px 15px;}
.header .site-title span { display: block; }
.header .site-title span.site-title2 { font-size: 0.6em; font-weight: 400; font-style: italic; }
.header .site-description { margin: 0; font-size: .825em; color: #777; }

/* 2.2 MIDDLE */
.middle { padding: 1em 0; }
.l-fixed { width: 90%; max-width: 960px; margin: 0 auto; }


/*  --------------------------------------------
    3. NAVIGATION - nav elements
-------------------------------------------- */

/* 3.1 NAV MENU */
.menu-wrapper { width: 100%; text-align: left; padding-bottom: 1em; margin-top: 1em; }
.menu { display: none; }
.is-menu-toggled-on .menu { display: block; }

/* 3.2 menu toggle link */
.menu-toggle { display: block; width: 40px; height: 40px; text-align: center; line-height: 34px; margin: 0 auto; font-size: 18px; color: #333; border: 3px solid #333; text-decoration: none; border-radius: 50%; }
.menu-toggle:hover { color: #333; border: 3px solid #333; }

/* 3.3 first level */
.menu ul { padding: 0px; margin: 0px; list-style: none; }
.menu ul li { position: relative; padding: 1em 0; text-transform: uppercase; border-bottom: 2px solid #f0f0f0;}
.menu ul li:last-child { position: relative; border-bottom: 0; }
.menu ul li a { display: block; padding: 0 0.8em; font-weight: 700; font-size: 13px; letter-spacing: 1px; color: #333; }
.menu ul li a:hover, .menu ul li a.active { color: #3f88db; }

/* 3.4 sub menus */
.menu ul ul { display: none; position: relative; z-index: 100; padding: 1.2em 0 0 0; margin-left: 1em; }
.menu ul.active { display: block; }
.menu ul ul li { padding: .7em 0; }
.menu ul ul li a { font-size: 11px; letter-spacing: 0px; }

/* 3.5 submenu-toggle link */
.menu .submenu-toggle { position: absolute; top: 0; right: 0; width: 50px; height: 53px;  line-height: 53px; font-weight: bold; text-align: center; display: block; font-size: 21px; cursor: pointer; }
.menu ul ul .submenu-toggle { border-bottom: 1px solid #ddd; }
.menu .submenu-toggle:before { content: '+'; }
.menu li.has-submenu.active > .submenu-toggle:before { content: "-"; }
.menu .submenu-toggle:hover { color: #333;  }
.menu li.has-submenu > a { margin-right: 50px; }


/*  --------------------------------------------
    4. PAGES - page specific styles
-------------------------------------------- */

/* 4.1 PAGE General */
.entry-content { margin-top: 1.2em; overflow: hidden; }

/* 4.2 PROFILE */
ul.profile-info { font-size: .9em; list-style: none; padding-left: 0; }
ul.profile-info li { border-top: solid 1px #eee; padding: 7px 5px; }
ul.profile-info li span { font-weight: bold; text-transform: uppercase; }

/* 4.2 ARCHIVES */
.archivehead { border-bottom: solid 1px #ddd; padding-bottom: 30px; }
.archives ul li a { font-weight: 600; text-transform: uppercase; font-size: 14px; }

/* 4.3 SEARCH PAGE */
#search-form { border-bottom: solid 1px #ddd; padding-bottom: 15px; }

/* 4.3 CATEGORY ARCHIVE */
.category-header { margin-bottom: 1.4em; border-bottom: 3px solid #EEE; }  
.category-subtitle { display: block; font-size: 14px; color: #bbb; letter-spacing: 0; text-transform: uppercase; }
.category-title { text-transform: uppercase; letter-spacing: 2px; font-size: 20px; font-weight: 600; }

/* 4.4 BLOG */
.blog-posts .entry-title { margin: 0.2em 0; }
.hentry { padding-bottom: 1em; margin-bottom: 2em; }
.entry-title { letter-spacing: -1px; margin: .4em 0; }
.entry-title a { color: #333; }
.entry-content p { font-size: .925em; }
.entry-content > p:first-child > img { margin-top: 0; }
.post-thumbnail { display: block; margin-bottom: 1em; }
.post-thumbnail:hover { border: 0; }
.cat-links { text-transform: uppercase; font-size: 14px; font-weight: 600; color: #ddd; }
.entry-meta { margin: .5em 0; font-size: .75em; color: #bbb; font-weight: 600; text-transform: uppercase; }
.entry-meta > span { border-right: solid 1px rgba(0,0,0,0.2); margin-right: 10px; padding-right: 10px; white-space: nowrap; }
.entry-meta > span:last-child { border-right: none; margin: 0; padding: 0;}
.entry-meta a { color: #bbb; }
.entry-meta a:hover { color: #ddd; }
.entry-meta .cat-links { text-transform: uppercase; }
.entry-meta .cat-links a { color: #555; border-bottom: 2px solid #555; }
.more-link { display: block; margin-top: .6em; padding: .4em 0; }
.more-link:hover {  }
.featured { margin: 1.2em 0; }
.featured a:hover { border: 0; }

/* 4.5 COMMENTS */
.comments-title { border-bottom: 1px solid #e7e7e7; padding-bottom: .3em; margin-bottom: 1.2em; }
.comments-area ol { list-style: none; padding-left: 1em; }
.comments-area ol li { margin-top: 2em; }
.comments-area ol li:first-child { margin-top: 0; }
.comments-area .commentlist { padding-left: 0; padding-bottom: 1em; }
.comments-area .avatar { float: left; max-width: 60px; max-height: 60px; margin-right: 1em; border-radius: 50%; }
.comments-area .comment-author { margin-bottom: .4em; }
.comments-area .comment-content { font-size: .875em; line-height: 1.7; }
.comments-area .fn { font-weight: 600; font-size: 15px; text-transform: uppercase; font-style: normal; }
.comments-area .fn a { color: #333; }
.comments-area .fn +  a { display: block; font-size: .825em; color: #bbb; }
.comments-area .fn +  a:hover { border: 0; }
.comments-area .comment-content p { font-size: .925em; margin-bottom: .4em; }
.comments-area .reply { font-size: .825em; font-weight: 700; text-transform: uppercase; }
.comment-form-whisper { background: #eee; border: dotted 1px #ccc; border-radius: 5px; box-shadow: inset 0 0 0 1px #fff; padding: 10px; }
.comments-area p img { display: inline-block; height: 51px; max-width: 48%; margin-right: 3px; vertical-align: top; }

/*  --------------------------------------------
    5. SIDEBAR - widgets styles
-------------------------------------------- */

/* 5.1 WIDGETS */
.footer .widget-area { padding-bottom: 1em; overflow: auto; }
.widget { font-size: .875em; margin-bottom: 1em; overflow: auto;  }
.widget-title { font-size: 14px; letter-spacing: 2px; border-bottom: 3px solid #555; display: inline-block; padding-bottom: .2em; text-transform: uppercase; margin-bottom: 1.2em; }
.footer .widget-title { color: #fff; margin-bottom: 1.6em;  }
.widget ul, .widget ol { padding-left: 1.5em; margin-top: 0; }
.textwidget { clear: left; }

/* 5.2 CUSTOM WIDGETS */
.widget_text iframe {display: block; }

/* 5.3 SOCIAL WIDGET */
.widget_social { padding: 10px 0; }
.widget_social { text-align: center; }
.widget_social .nav_social_flat a { font-size: 24px; margin: 0 3px; }
.footer .widget.widget_social { padding-top: 20px; text-align: right; }

/* 5.3 SEARCH WIDGET */
.widget_search form { margin: 0; }
.widget_search label { margin-bottom: .8em; }
.widget_search input.search-field { font-weight: 400; font-size: 13px !important; }
.widget_search .search-submit { font-size: 13px; }
.widget_search .screen-reader-text { display: none; }

/* 5.4 CALENDAR WIDGET */
.widget_calendar {margin-top: 2.5em;}
.widget_calendar table { margin-top: 0; max-width: 300px; width: 100%; }
.widget_calendar caption { font-weight: 600; font-size: 14px; margin-bottom: .6em; text-transform: uppercase; text-align: left; }
.widget_calendar .today { color: #333; font-weight: 600; }
.footer tr td { color: #eee; border-bottom-color: #333; }

/* 5.5 WIDGET CATEGORIES  */
.widget_categories ul { list-style: none; padding: 0; margin: 0; }
.widget_categories ul li a { display:inline-block; padding: .4em 1em; margin-bottom: .5em; border: 2px solid #eee; text-transform: uppercase; font-size: 13px; font-weight: 600; }
.footer .widget_categories ul li a { border-color: #333; }

/* 5.6 ARCHIVE */
.widget_archive ul { list-style: none; padding-left: 0; }
.widget_archive ul li { text-transform: uppercase; font-weight: 600; font-size: 14px; line-height: 1.3; padding-bottom: .6em; margin-bottom: .6em; border-bottom: 1px solid rgba(0,0,0,0.1); }
.widget_archive ul li:last-child { border-bottom: none; }

/* 5.7 WIDGET CATEGORIES  */
.widget_categories ul { list-style: none; padding: 0; margin: 0; }
.widget_categories ul li a { display:inline-block; padding: .4em 1em; margin-bottom: .5em; border: 2px solid #eee; text-transform: uppercase; font-size: 13px; font-weight: 600; }
.footer .widget_categories ul li a { border-color: #333; }


/*  --------------------------------------------
    6. FOOTER - footer styles
-------------------------------------------- */

/* 6.1 FOOTER GENERAL */
.footer { padding: 1em 0 0 0; text-align: center; color: #888; border-top: solid 1px #ccc; margin-top: 50px; overflow: auto; clear: left; }
.footer .copyright { clear: left; color: #666; background: #fff; padding-bottom: 1em; }
.footer .copyright p { text-align:center; font-size: 12px; padding-top: 1.2em; margin-bottom: 0; font-weight: 600; }
.footer .copyright span { display: block; margin: 0; padding: 2px 0; }
.footer .copyright span:first-child { border-left: none; }
.footer .copyright span i { color: #fa9b39; display: inline-block; font-size: 20px; margin-right: 5px; vertical-align: middle; }


/*  --------------------------------------------
    7. COMMENTS PAGE - full screen
-------------------------------------------- */

/* 7.1 COMMENT AUTHORIZATION */
#notification { display: table; height: 100%; width: 100%; }
#notification div { display: table-row; }
#notification div div { display: table-cell; height: 100%; text-align: center; vertical-align: middle; }


/* SMALL PHONES */
@media screen and (max-width: 450px) {
	
	#search-form p select { width: 100%; }
	#search-form p select:first-child { margin-bottom: 15px; }	 
	
}