/*

	## Project Name        :  UUNN Front-end Framework (uunn.cn)
    ## Last Update         :  November 29, 2017
    ## Created             :  by Chuckie Chang
    ## Compatible With     :  Bootstrap 3.x, Chinese, English
    ## Compatible Browsers :  IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge
	
	
	---------------------------
	


	---------------------------
	MAIN TEMPLATE STYLES
	---------------------------
	
	
	COLOR PALETTE
	---------------------------
	
    Default font-size for HTML :    16px
	Primary Background Color   :    #FFF
	Highlight Color            :    #EE6E73, #E85254
	Primary Text Color         :    #212121, #474747
	Subordinate Text Color     :    #AEAEAE
	Dividing Line Color        :    #F4F4F4
	
	
	
	TABLE OF CONTENTS
	---------------------------
	
	1. Basic
	    1.1. Reset Stylesheets
		1.2. Bootstrap 3.x

	2. Helper Classes
	3. Typography
	4. Spacing
	5. Form Elements
	    5.1. Controls
		5.2. Group
		
	6. Basic Layout Styles
	7. Navigation Area
	    7.1. Basic
		7.2. Dropdown
		7.3. Multi-column
		7.4. Dropdown Arrow
		7.5. Mobile
			
	8. Header Area
	    8.1. Header Area
		8.2. Brand
		
	9. Footer
	10. Social Buttons
	    10.1. Social Background
		10.2. Social General
		
	11. Back to Top
	12. Loader
	13. Parallax
	14. Overlay
	15. Pagination
	16. Filterable Navigation  
	17. Portfolio
	18. Button
	    18.1. Common button styles
		18.2. Borders
		18.3. Sizes
		18.4. Hover
		18.5. Background
	
	19. Sidebar
	    19.1. Basic
		19.2. Calendar Widget
		19.3. Post List
		19.4. Post List with Featured Image
		19.5. Link List


	20. Search 
		20.1. Search of Widget
		
	21. Tags 
	22. Entry  
	    22.1. Spacing
		22.2. Text
		22.3. Content
		22.4. Meta
		
	23. Comments
	24. Browser UI
	25. Style of Irregular Shape
	26. Author Card
	27. Plugins 
	28. Modal 
	29. Tabs 
    30. Single Page       
	31. WordPress Core 

	
	
*/


/* ====================================================== 
   1. Basic                               
/* ====================================================== */
/* 1.1. Reset Stylesheets */
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #868e96;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #868e96;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 480px; /* max-width */
  --breakpoint-md: 768px; /* max-width */
  --breakpoint-lg: 991px; /* max-width */
  --breakpoint-xl: 1300px; /* Only new XL container, min-width */
  --spacing: 1rem;
}



::selection {
    background: #1f1f1f;
    color: #fff;
}

::-moz-selection {
    background: #1f1f1f;
    color: #fff;
}

::-webkit-selection {
    background: #1f1f1f;
    color: #fff;
}


html,
body{
	width: 100%;
	height: 100%;
}

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-size: 16px; /* Required, global font size */
}

*,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
a {
    margin: 0;
    padding: 0;
}

body {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.71428571429;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Microsoft YaHei','Helvetica Neue',Helvetica, STXihei, 'PingFang SC','Hiragino Sans GB',Arial,sans-serif;
    color: #212121;
}


:active,
:focus { 
	outline: none !important; 
}

p,
ul,
ol,
pre,
table,
blockquote {
    margin-bottom: 0;
}

ul,
ol {
    list-style: none;
}

ul > li,
ol > li {
	margin-bottom: 0;
}

ul.list-normal,
ol.list-normal,
.list-normal ul,
.list-normal ol {
    display: block;
    list-style-type: disc;
    margin: 1.421875rem;
    padding-left: 0.875rem;
}

ul.list-normal,
.list-normal ul {
    list-style-type: disc;
}

ol.list-normal,
.list-normal ol {
    list-style-type: decimal;
}



ul.list-normal ul,
ul.list-normal ol,
ol.list-normal ul,
ol.list-normal ol,
.list-normal ul ul,
.list-normal ul ol,
.list-normal ol ul,
.list-normal ol ol {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}



.table-normal table, 
.table-normal table td, 
.table-normal table th,
table.table-normal, 
table.table-normal td, 
table.table-normal th {
    border: 1px solid black;
}

.table-normal table td, 
.table-normal table th,
table.table-normal td, 
table.table-normal th {
	padding: 0.6875rem;
}

.table-normal table,
table.table-normal {
    border-collapse: collapse;
    width: 100%;
}

.table-normal table th,
table.table-normal th {
    text-align: left;
}

select {
	max-width: 100%;
}

blockquote {
    background: #fff;
	border: 1px solid #F8F8F8;
    border-left: 5px solid #EE6E73;
    padding: 0 1.75rem 1.25rem;
	margin-top: 1.421875rem;
	line-height: 2;
	font-size: 1rem;
}

blockquote:before {
    color: #EE6E73;
    content: open-quote;
    font-size: 5.25rem;
    line-height: 0.1;
    margin-right: 0.21875rem;
    vertical-align: -0.39375rem;
	font-family: sans-serif;
	content: "\201C"; /*Unicode for Left Double Quote*/
	
}



strong {
    font-weight: 600;
}

hr {
    margin: 1.421875rem 0;
    border-color: #F4F4F4;
}

a img {
    border: none;
}

img {
    max-width: 100%;
}

iframe {
    border: none !important;
}

/* 1.2. Bootstrap 3.x */
/* New XL container for Bootstrap 3.x */
@media all and (min-width: 1300px) {
		
	.container {
		width: 1272px;
	}

}



/* ====================================================== 
   2. Helper Classes                                
/* ====================================================== */
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix {
    *zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

.clearfix:after {
    clear: both;
}


.transition,
.transition div.nav-previous,
.transition div.nav-next,
.transition img,
.transition a,
.transition i,
.transition li,
.transition span {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;	
}


/* ====================================================== 
   3. Typography                                
/* ====================================================== */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: #212121;
    font-weight: 700;
    font-variant-ligatures: common-ligatures; /*Ligatures and contextual forms are ways of combining glyphs to produce more harmonized forms.*/
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
}


h1 {
    font-size: 3.5rem;
    line-height: 1.14285714286;
}

h2 {
    font-size: 2.5rem;
    line-height: 1.2;
}

h3 {
    font-size: 1.75rem;
    line-height: 1.25;
}

h4 {
    font-size: 1.25rem;
    line-height: 1.33333333333;
}

h5 {
    font-size: 1rem;
    line-height: 1.5;
	font-weight: 600;
}

h6 {
    font-size: 0.75rem;
    line-height: 2;
	font-weight: 600;
}


.h1 {
    font-size: 3.5rem !important;
    line-height: 1.14285714286 !important;
}

.h2 {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
}

.h3 {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
}

.h4 {
    font-size: 1.25rem !important;
    line-height: 1.33333333333 !important;
}

.h5 {
    font-size: 1rem !important;
    line-height: 1.5 !important;
	font-weight: 600 !important;
}

.h6 {
    font-size: 0.75rem !important;
    line-height: 2 !important;
	font-weight: 600 !important;
}


.font-normal {
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, STXihei, "PingFang SC", SimHei, "Microsoft Yahei";
	font-weight: 400 !important;
}

.font-uppercase {
    text-transform: uppercase !important;
}

.font-bold {
    font-weight: 800 !important;
}

.font-italic {
    font-style: italic !important;
}

.font-no-italic {
    font-style: normal !important;
}

.font-underline {
    text-decoration: underline !important;
}


@media all and (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
        line-height: 1.15555556;
    }

    h2 {
        font-size: 1.75rem;
        line-height: 1.421875;
    }

    h3 {
        font-size: 1.25rem;
        line-height: 1.625;
    }
	
	
 
	.h1 {
		font-size: 2.5rem !important;
		line-height: 1.15555556 !important;
	}
	.h2 {
		font-size: 1.75rem !important;
		line-height: 1.421875 !important;
	}
	
	.h3 {
		font-size: 1.25rem !important;
		line-height: 1.625 !important;
	}

}

@media all and (max-width: 480px) {
    h1 {
        font-size: 1.25rem;
        line-height: 1.38461538462;
    }

    h2 {
        font-size: 1.5rem;
        line-height: 1.28571428571;
    }

    h3 {
        font-size: 1.25rem;
        line-height: 1.5;
    }
	
	.h1 {
		font-size: 1.25rem !important;
		line-height: 1.38461538462 !important;
	}
	.h2 {
		font-size: 1.5rem !important;
		line-height: 1.28571428571 !important;
	}
	
	.h3 {
		font-size: 1.25rem !important;
		line-height: 1.5 !important;
	}

}

a,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6{
	-moz-transition:.2s ease-in-out; 
	-o-transition:.2s ease-in-out; 
	-webkit-transition:.2s ease-in-out; 
	transition:.2s ease-in-out;
	
}



a {
	color: #474747;
}

a:hover,
a:focus,
a:active {
	color: #000;
    text-decoration: none;
    outline: none;
}

a:hover{
	
}

a:active,a:focus{
	
}

a.link {
	text-decoration: underline;
	color: #EE6E73;
}

a.link:hover {
	color: #E85254;
}

.list-normal a:not(.uix-sc-btn),
.table-normal a:not(.uix-sc-btn) {
	color: #EE6E73;
}

.list-normal a:not(.uix-sc-btn):hover,
.table-normal a:not(.uix-sc-btn):hover {
	color: #E85254;
	text-decoration: underline;
}

.list-normal a:not(.uix-sc-btn):hover img,
.table-normal a:not(.uix-sc-btn):hover img {
	text-decoration: none;
}



/* ====================================================== 
   4. Spacing                                
/* ====================================================== */

section,
.section {
	position: relative;
	z-index: 0;
}

section,
.section,
footer {
    padding-top: 6.5625rem;
    padding-bottom: 7.984375rem;
}

.Tmsg section{padding-top: 0px;
    padding-bottom: 0px;}
section.space-sm,
.section.space-sm,
footer.space-sm {
    padding-top: 4.8125rem;
    padding-bottom: 4.8125rem;
}


section.space-lg,
.section.space-lg,
footer.space-lg {
    padding-top: 11.375rem;
    padding-bottom: 11.375rem;
}


section.space-none,
.section.space-none {
	padding: 0;
}

section.space-none-top,
.section.space-none-top {
    padding-top: 0;
}

section.space-none-bottom,
.section.space-none-bottom {
    padding-bottom: 0;
}

section.site-google-map,
.section.site-google-map {
	padding-top: 0;
}


@media all and (max-width: 768px) {
	section,
	.section,
	footer {
		padding: 4.265625rem 0;
	}
	
	
	section.space-sm,
	.section.space-sm,
	footer.space-sm {
		padding-top: 2.625rem;
		padding-bottom: 2.625rem;
	}

	
	section.space-lg,
	.section.space-lg,
	footer.space-lg {
	    padding: 4.265625rem 0;
	}

	
	section.space-none,
	.section.space-none {
		padding: 0;
	}
	
	section.space-none-top,
	.section.space-none-top {
		padding-top: 0;
	}
	
	section.space-none-bottom,
	.section.space-none-bottom {
		padding-bottom: 0;
	}
	
	section.site-google-map,
	.section.site-google-map {
		padding-top: 0;
	}
	
}


/* ====================================================== 
   5. Form Elements                                     
/* ====================================================== */
/* 5.1. Controls */
.controls {
    text-align: left;
    position: relative;
}

.controls-custom,
.controls input[type="text"],
.controls input[type="email"],
.controls input[type="tel"],
.controls input[type="password"],
.controls input[type="url"],
.controls input[type="search"],
.controls textarea,
.controls button,
.controls select {
	width: calc(100% - 1.09375rem );
	font-size: 0.875rem;
	padding: 0.546875rem;
    border: none;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;	
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}


.controls input[type="text"],
.controls input[type="email"],
.controls input[type="tel"],
.controls input[type="password"],
.controls input[type="url"],
.controls input[type="search"],
.controls textarea,
.controls button,
.controls select {
	background-color: #fff;
	color: #888;
	margin-bottom: 1.09375rem;
	border: 1px solid #c6c6c6;
	width: calc(100% - 1.09375rem - 2px );
}

.controls input[type="text"]:focus, 
.controls input[type="text"]:hover,
.controls input[type="email"]:focus,
.controls input[type="email"]:hover,
.controls input[type="tel"]:focus,
.controls input[type="tel"]:hover,
.controls input[type="password"]:focus,
.controls input[type="password"]:hover,
.controls input[type="url"]:focus,
.controls input[type="url"]:hover,
.controls input[type="search"]:focus,
.controls input[type="search"]:hover,
.controls textarea:focus,
.controls textarea:hover,
.controls button:focus,
.controls button:hover,
.controls select:focus,
.controls select:hover {
    outline: none;
    border-color: #333;
}

.controls input[type="text"]:focus + label, .controls input[type="text"]:hover + label,
.controls input[type="email"]:focus + label,
.controls input[type="email"]:hover + label,
.controls input[type="tel"]:focus + label,
.controls input[type="tel"]:hover + label,
.controls input[type="password"]:focus + label,
.controls input[type="password"]:hover + label,
.controls input[type="url"]:focus + label,
.controls input[type="url"]:hover + label,
.controls input[type="search"]:focus + label,
.controls input[type="search"]:hover + label,
.controls textarea:focus + label,
.controls textarea:hover + label,
.controls button:focus + label,
.controls button:hover + label,
.controls select:focus + label,
.controls select:hover + label {
    color: #333;
    cursor: text;
}

.controls .fa-sort {
    position: absolute;
    right: 0.875rem;
    top: 1.09375rem;
    color: #999;
}

.controls select {
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.controls label {
    position: absolute;
    left: 0.875rem;
    top: 0.721875rem;
    color: #999;
    display: inline-block;
    padding: 0 0.875rem;
    background-color: rgba(255, 255, 255, 0);
    pointer-events: none;
    -moz-transition: color 0.3s, top 0.3s, background-color 0.2s;
    -o-transition: color 0.3s, top 0.3s, background-color 0.2s;
    -webkit-transition: color 0.3s, top 0.3s, background-color 0.2s;
    transition: color 0.3s, top 0.3s, background-color 0.2s;
}

.controls label.active {
    top: -1.09375rem;
    color: #555;
    background-color: white;
}

.controls textarea {
    resize: none;
    height: 20vh;
}

.controls button {
    cursor: pointer;
    padding: 0.75rem 0;
	width: 100%;
}

.controls .req-icon {
	position: absolute;
	right: 0.721875rem;
	top: 0.721875rem;
	color: #EE6E73;
}

/* 5.2. Group */

.controls-custom-merge {
	background-color: #fff;
	color: #888;
	margin-bottom: 1.09375rem;
	border: 1px solid #c6c6c6;
	font-size: 0.875rem;
	padding: 0.546875rem 1.09375rem;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
	font-weight: 600;
}



.form-merge {
    min-width: 100%;
    overflow: hidden;
}

.form-merge.no-labels label {
	display: none;	
}

.form-merge input {
	-webkit-border-radius: 50px 0 0 50px;
	-moz-border-radius: 50px 0 0 50px;
	border-radius: 50px 0 0 50px;
}

.form-merge input + button[type="submit"] {
    margin-left: -4px;
}

.form-merge button[type="submit"] {
	-webkit-border-radius: 0 50px 50px 0;
	-moz-border-radius: 0 50px 50px 0;
	border-radius: 0 50px 50px 0;
    position: relative;
    margin: 0;
}

.form-merge.form-square input {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

.form-merge.form-square button[type="submit"] {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

@media all and (max-width: 768px) {
    .form-merge input {
        width: 100%;
        border-radius: 50px;
    }

    .form-merge input + button[type="submit"] {
        margin-left: 0;
    }

    .form-merge button[type="submit"] {
        bottom: 0;
        border-radius: 50px;
        width: 100%;
    }
}



/* ====================================================== 
   6. Basic Layout Styles                                        
/* ====================================================== */

.fl {
    float: left;
}

.fr {
    float: right;
}

.t-r {
    text-align: right;
}

.t-l {
    text-align: left;
}

.t-c {
    text-align: center;
}


.inline-block {
    display: inline-block;
}

.block {
    display: block;
}

.pos-normal-align,
.pos-vertical-align {
	position: absolute;
	z-index:6;
	width: 100%;
}
.pos-normal-align {
	top: 0;
}
.pos-vertical-align {
	/* Vertical Center */
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.center-vertically {
    display: table;
    width: 100%;
    height: 100%;
}

.center-vertically > div {
    display: table-cell;
    vertical-align: middle;
}

.height-10 {
	height: 10vh !important;
}

.height-20 {
	height: 20vh !important;
}

.height-30 {
	height: 30vh !important;
}

.height-40 {
	height: 40vh !important;
}

.height-50 {
	height: 50vh !important;
}

.height-60 {
	height: 60vh !important;
}

.height-70 {
	height: 70vh !important;
}

.height-80 {
	height: 80vh !important;
}

.height-90 {
	height: 90vh !important;
}

.height-100 {
	height: 100vh !important;
}


@media all and (max-width: 768px) {
  .height-100,
  .height-90,
  .height-80,
  .height-70,
  .height-60,
  .height-50,
  .height-40,
  .height-30,
  .height-20,
  .height-10 {
        height: auto !important;
    }
}



/* ====================================================== 
   7. Navigation Area                                    
/* ====================================================== */
.menu-wrapper {
	font-size: 0.75rem;
    float: right;
    padding-top: 20px;
	line-height: 2.34375;
	
}

.menu-wrapper.spy-scroll-fixed {
	padding-bottom: 0;
}

@media all and (max-width: 768px) {
	.menu-wrapper {
		display: none;
	}
}


ul.menu-main ul a:hover {
	color: #000 !important;
	background: #F1F1F1;
}

ul.menu-main {
    float: left;
	margin: 0; /* Required*/
}


ul.menu-main li {
	position: relative;
	margin-bottom: 0;
	padding: 0 1.159375rem;
}

ul.menu-main > li {
    display: inline-block;
	*display: inline;
    margin-right: 27px;
	padding-bottom: 1.421875rem;
	white-space: nowrap; /* Required*/	
}

ul.menu-main li a {
	display: block;
}

ul.menu-main > li.active,
ul.menu-main > li.current-menu-item,
ul.menu-main > li:hover {
	-webkit-box-shadow: 0 3px 0 rgba(242,126,15,1);
	-moz-box-shadow: 0 3px 0 rgba(242,126,15,1);
	box-shadow: 0 3px 0 rgba(242,126,15,1);	
}



ul.menu-main > li ul {
    min-width: 220px;
	display: none;
	position: absolute;
	padding: 0.525rem 0;
}


ul.menu-main > li > ul {
	padding-top: 2.625rem;
	filter:alpha(opacity=0);  
	-moz-opacity:0;   
	opacity: 0;	
}

ul.menu-main > li:not(.multi-column) > ul ul {
	background: #fff;
	border: 3px solid #333;
	margin-left: -3px;
	padding: 1.421875rem 0;
}

ul.menu-main > li > ul:before {
	content: '';
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 12px;
	border: 3px solid #333;
	background: #fff;
}


ul.menu-main > li li {
    padding-left: 0.875rem;
}


ul.menu-main > li ul li {
    padding-left: 2.034375rem;
}

/* Dropdown */
ul.menu-main ul.sub-menu {
	top: 100%;
	left: 0;
	
}

ul.menu-main > li:not(.multi-column) > ul ul {
	top: 0;
	left: 100%;
}


ul.menu-main ul.sub-menu li a {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
	white-space: normal; /* Required*/
	line-height: 1.4;
	padding: 0.35rem 0;


}


/* Multi-column */
li.multi-column > ul {
    width: auto !important;
    white-space: nowrap;
	display: none;
	padding: 0 !important;
}

li.multi-column .mega-arrow {
	content: '';
	display: none;
	position: absolute;
	top: 58px;
	left: 50%;
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #000;
	filter:alpha(opacity=0);  
	-moz-opacity:0;   
	opacity: 0;	
}



li.multi-column > ul .multi-column-title,
li.multi-column > ul > li > a {
	color: #B9B9B9;
	display: inline-block;
	*display: inline;
	padding: 0.4375rem 0 0;
	cursor: default;
	padding-top: 0.875rem;
}

li.multi-column > ul > li > a:hover {
	color: #B9B9B9 !important;
}


li.multi-column > ul li {
    width: 220px;
    overflow: hidden;
    display: inline-block;
	*display: inline;
    vertical-align: top;
	padding-left: 1.159375rem !important;
	
}

li.multi-column > ul li ul {
	
    position: relative !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;

}

li.multi-column > ul ul li {
    float: none;
    display: block;
}

li.multi-column > ul ul {
    display: block !important;
}


/* Dropdown Arrow */
.nav-arrow {
    display: block;
    position: absolute;
    right: 0.284375rem;
    top: 25%;
    background-color: #000;
    width: 3px;
    height: 3px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

ul.menu-main ul.sub-menu .nav-arrow {
    background-color: #000;
	right: 1.159375rem;
}

li.multi-column > ul li .nav-arrow {
	display: none;
}


/* Mobile */
.menu-toggle {
    position: absolute;
    display: none;
    width: 30px;
    height: 30px;
    top: 20px;
    right: 30px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
	background: #333;
	-webkit-border-radius: 2px; 
	-moz-border-radius: 2px; 
	border-radius: 2px;
	-moz-transition: .1s ease-in-out; 
	-o-transition: .1s ease-in-out;
	-webkit-transition: .1s ease-in-out; 
	transition: .1s ease-in-out;
	-webkit-box-shadow: 0px 7px 19px 0px rgba(0,0,0,0.21);
	-moz-box-shadow: 0px 7px 19px 0px rgba(0,0,0,0.21);
	box-shadow: 0px 7px 19px 0px rgba(0,0,0,0.21);
}

/* Show Toolbar when viewing site */
.admin-bar .menu-toggle {
	top: 66px;
}

.admin-bar .menu-toggle.spy-scroll-postion {
	top: 20px;
}

/* Admin bar becomes taller on smaller devices */
@media screen and ( max-width: 782px ) {
	.admin-bar .menu-toggle.spy-scroll-postion {
		top: 66px;
	}
}

@media screen and ( max-width: 600px ) {
	.admin-bar .menu-toggle.spy-scroll-postion {
		top: 20px;
	}
}



@media all and (max-width: 768px) {
	.menu-toggle {
		display: block;
	}
}

.menu-toggle span {
    display: block;
    position: absolute;
    top: 9px;
    left: 7px;
    width: 17px;
    height: 1px;
    background: #fff;
    -webkit-transition: 350ms;
    -moz-transition: 350ms;
    -o-transition: 350ms;
    transition: 350ms;
}

.menu-toggle.open span {
    left: 11px;
}

.menu-toggle .l2 {
    top: 14px;
}

.menu-toggle .l3 {
    top: 19px;
}

.menu-toggle.open .l1 {
    -webkit-transform: rotate(45deg) translate(0px,7px);
    -ms-transform: rotate(45deg) translate(0px,7px);
    transform: rotate(45deg) translate(0px,7px);
}

.menu-toggle.open .l2 {
    opacity: 0;
}

.menu-toggle.open .l3 {
    -webkit-transform: rotate(-45deg) translate(0px,-7px);
    -ms-transform: rotate(-45deg) translate(0px,-7px);
    transform: rotate(-45deg) translate(0px,-7px);
	
}



/* ====================================================== 
   8. Header Area                                        
/* ====================================================== */

/* 8.1. Header Area */
/* Don't use "margin" or "padding" to set up ".header-area" */
.header-area {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 90000;
	background-color: #fff;
	border-bottom: 3px solid rgba(242,126,15,.4);
	-webkit-box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.08);
	box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.08);	
}
/* Don't use "margin" or "padding" to set up ".header-container" */
.header-container {
	/* Floating layer protection for IE */
    background: url(../image/blank.gif);
}

.header-container .menu-right {
    float: right;
}

.navbar-fixed-top .header-container {

}

.header-inner {
	height: 185px;
	background: none;	
}

.header-inner.auto-height {
	height: calc( 65px + 0.284375rem );
}


.header-inner.no-height {
	height: 0 !important;
}


/* 8.2. Brand */
.brand {
	float: left;
	font-size: 1.3125rem;
	font-weight:700;
	text-transform: uppercase;
	white-space: nowrap;
    max-width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
	
}
.brand img {
	max-height: 60px;
}

.mobile-brand {
	display: none;
}


@media all and (max-width: 768px) {
	
	.mobile-brand {
		display:block;
	}
	
}



/* ====================================================== 
   9. Footer                               
/* ====================================================== */
.footer-main-container {
	font-size: 0.75rem;
	padding: 2.625rem 0;
}


/* ====================================================== 
   10. Social Buttons                               
/* ====================================================== */

/* 10.1. Social Background */
.social-bg {
	color: #fff !important;
}
.social-bg-twitter {
	border-color: #53B9FD !important;
    background-color: #53B9FD !important;
}

.social-bg-facebook {
	border-color: #78A4DD !important;
    background-color: #78A4DD !important;
}

.social-bg-google {
	border-color: #FC5B5B !important;
    background-color: #FC5B5B !important;
}

.social-bg-instagram {
	border-color: #6156C7 !important;
    background-color: #6156C7 !important;
}

.social-bg-lastfm {
	border-color: #B90000 !important;
    background-color: #B90000 !important;
}

.social-bg-youtube {
	border-color: #CC181E !important;
    background-color: #CC181E !important;
}

.social-bg-vimeo {
	border-color: #1ab7ea !important;
    background-color: #1ab7ea !important;
}

.social-bg-dribbble {
	border-color: #FA8BBC !important;
    background-color: #FA8BBC !important;
}

.social-bg-github {
	border-color: #652F51 !important;
    background-color: #652F51 !important;
}

.social-bg-flickr {
	border-color: #fc4ca4 !important;
    background-color: #fc4ca4 !important;
}

.social-bg-medium {
	border-color: #00AB6B !important;
    background-color: #00AB6B !important;
}

.social-bg-codepen {
	border-color: #333 !important;
    background-color: #333 !important;
}

.social-bg-behance {
	border-color: #4F8FD6 !important;
    background-color: #4F8FD6 !important;
}

.social-bg-dropbox {
	border-color: #349BE9 !important;
    background-color: #349BE9 !important;
}

.social-bg-pinterest {
	border-color: #F35359 !important;
    background-color: #F35359 !important;
}

.social-bg-reddit {
	border-color: #FF4500 !important;
    background-color: #FF4500 !important;
}

.social-bg-soundcloud {
	border-color: #FF7500 !important;
    background-color: #FF7500 !important;
}

.social-bg-producthunt {
	border-color: #DA552F !important;
    background-color: #DA552F !important;
}

.social-bg-weibo {
	border-color: #E6162D !important;
    background-color: #E6162D !important;
}


.social-bg-deviantart {
	border-color: #05CC47 !important;
    background-color: #05CC47 !important;
}

.social-bg-spotify {
	border-color: #A5CE3F !important;
    background-color: #A5CE3F !important;
}

.social-bg-wordpress {
	border-color: #24A5DD !important;
    background-color: #24A5DD !important;
}

.social-bg-digg {
	border-color: #333 !important;
    background-color: #333 !important;
}

.social-bg-tumblr {
	border-color: #529ECC !important;
    background-color: #529ECC !important;
}

.social-bg-linkedin {
	border-color: #24A5DD !important;
    background-color: #24A5DD !important;
}

.social-bg-stackoverflow {
	border-color: #FF7500 !important;
    background-color: #FF7500 !important;
}

/* 10.2. Social General */

.social-btn,
.social-btn-colourful,
.social-btn li,
.social-btn-colourful li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-btn li,
.social-btn-colourful li {
    display: inline-block;
    *display: inline;
	margin: 0.175rem 0.4375rem;
}

.social-btn-colourful li a {
	color: #333333;
}

.social-btn-colourful li a:hover {
	color: #ee9f24 !important;
}

.social-btn-colourful li a[href*="twitter.com"] {
    color: #53B9FD;
}

.social-btn-colourful li a[href*="facebook.com"] {
    color: #78A4DD;
}

.social-btn-colourful li a[href*="google.com"] {
    color: #FC5B5B;
}

.social-btn-colourful li a[href*="instagram.com"] {
    color: #6156C7;
}

.social-btn-colourful li a[href*="last.fm"] {
    color: #B90000;
}

.social-btn-colourful li a[href*="youtube.com"] {
    color: #CC181E;
}

.social-btn-colourful li a[href*="vimeo.com"] {
    color: #1ab7ea;
}

.social-btn-colourful li a[href*="dribbble.com"] {
    color: #FA8BBC;
}

.social-btn-colourful li a[href*="github.com"] {
    color: #652F51;
}

.social-btn-colourful li a[href*="flickr.com"] {
    color: #fc4ca4;
}

.social-btn-colourful li a[href*="medium.com"] {
    color: #00AB6B;
}

.social-btn-colourful li a[href*="codepen.com"] {
    color: #333;
}

.social-btn-colourful li a[href*="behance.net"] {
    color: #4F8FD6;
}

.social-btn-colourful li a[href*="dropbox.com"] {
    color: #349BE9;
}

.social-btn-colourful li a[href*="pinterest.com"] {
    color: #F35359;
}

.social-btn-colourful li a[href*="reddit.com"] {
    color: #FF4500;
}

.social-btn-colourful li a[href*="soundcloud.com"] {
    color: #FF7500;
}

.social-btn-colourful li a[href*="producthunt.com"] {
    color: #DA552F;
}

.social-btn-colourful li a[href*="weibo.com"] {
    color: #E6162D;
}


.social-btn-colourful li a[href*="deviantart.com"] {
    color: #05CC47;
}

.social-btn-colourful li a[href*="spotify.com"] {
    color: #A5CE3F;
}

.social-btn-colourful li a[href*="wordpress.com"] {
    color: #24A5DD;
}

.social-btn-colourful li a[href*="mailto"] {
    color: #333;
}

.social-btn-colourful li a[href*="digg.com"] {
    color: #333;
}

.social-btn-colourful li a[href*="tumblr.com"] {
    color: #529ECC;
}

.social-btn-colourful li a[href*="linkedin.com"] {
    color: #24A5DD;
}

.social-btn-colourful li a[href*="stackoverflow.com"] {
    color: #FF7500;
}

.social-btn-colourful li a[href*="rss"], 
.social-btn-colourful li a[href*="feed"] {
    color: #FF7500;
}



/* ====================================================== 
   11. Back to Top                                               
/* ====================================================== */
#toTop {
    display: none;
    text-decoration: none;
    position: fixed;
    bottom: 12px;
    right: 12px;
    overflow: hidden;
    width: 50px;
    height: 50px;
    border: none;
    text-indent: 100%;
    background: url(../image/back-top.png) no-repeat left top;
    z-index: 1;
}

#toTopHover {
    background: url(../image/back-top.png) no-repeat left -50px;
    width: 50px;
    height: 50px;
    display: block;
    overflow: hidden;
    float: left;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}

#toTop:active,#toTop:focus {
    outline: none;
}


/* ====================================================== 
   12. Loader                                               
/* ====================================================== */
.loader {
	top: 0;
	left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #fff;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */ 
    display: flex;
    align-items: center;
    justify-content: center;
	z-index:99999;
}

.loader span {
	font-family: Arial, sans-serif;
	position: fixed;
	z-index: 100000;
	top: 50%;
	left: 50%;
	margin-top: -32.5px;
	margin-left: -32.5px;	
}

.loader .spinner-container {
    animation: rotate 2s linear infinite;
    -webkit-animation: rotate 2s linear infinite;
}

.loader .spinner-container .path {
    stroke-dasharray: 1,150;
 /* 1%, 101% circumference */
    stroke-dashoffset: 0;
    stroke: #EE6E73;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
    -webkit-animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1,150;
  /* 1%, 101% circumference */
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90,150;
 /* 70%, 101% circumference */
        stroke-dashoffset: -35;
   /* 25% circumference */;
    }

    100% {
        stroke-dasharray: 90,150;
 /* 70%, 101% circumference */
        stroke-dashoffset: -124;
  /* -99% circumference */;
    }
}

@-webkit-keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1,150;
  /* 1%, 101% circumference */
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90,150;
 /* 70%, 101% circumference */
        stroke-dashoffset: -35;
   /* 25% circumference */;
    }

    100% {
        stroke-dasharray: 90,150;
 /* 70%, 101% circumference */
        stroke-dashoffset: -124;
  /* -99% circumference */;
    }
}



/* ====================================================== 
   13. Parallax                                               
/* ====================================================== */
.parallax {
	position: relative;
	height: 100vh;
	width: 100%;
	background-attachment: fixed;
	background-position: 50% 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	background-size: cover !important;

}

.parallax-window {
	height: 100%;
	width: 100%;
}
.parallax-container {
  height: 300px;/* Required, associated with script.js */
  width: 100%;/* Required, associated with script.js  */
}

.parallax-element {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.parallax-element .pos-vertical-align {
	height: 100%;
}
	

.parallax-auto {
	height: auto;
	width: 100%;
}
.parallax-auto .parallax-img{
	visibility: hidden;
}



/* ====================================================== 
   14. Overlay                                               
/* ====================================================== */

.overlay-bg {
	overflow:hidden;	
}
.overlay-bg h1,
.overlay-bg h2,
.overlay-bg h3,
.overlay-bg h4,
.overlay-bg h5,
.overlay-bg h6,
.overlay-bg .h1,
.overlay-bg .h2,
.overlay-bg .h3,
.overlay-bg .h4,
.overlay-bg .h5,
.overlay-bg .h6 {
	color: inherit; 
}


.overlay-text-white,
.overlay-text-white h1,
.overlay-text-white h2,
.overlay-text-white h3,
.overlay-text-white h4,
.overlay-text-white h5,
.overlay-text-white h6,
.overlay-text-white .h1,
.overlay-text-white .h2,
.overlay-text-white .h3,
.overlay-text-white .h4,
.overlay-text-white .h5,
.overlay-text-white .h6 {
	color: white;	
}


.overlay-bg-black:after {
	content: '';
	display: table;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 150vh;
	background-color: rgba(0,0,0,.6);
	z-index: 1;
}


.overlay-bg-black-pure {
	background: #212121 !important;
}


/* ====================================================== 
   15. Pagination                         
/* ====================================================== */
.pagination-container {
    margin-top: 2.84375rem;
}

.pagination-container:before,
.pagination-container:after {
    display: table;
    content: "";
    line-height: 0;
}

.pagination-container:after {
    clear: both;
}

.pagination-container li {
    display: inline-block;
	*display: inline;
}


.pagination-container div.nav-previous,
.pagination-container div.nav-next,
.pagination-container li a,
.pagination-container li.active > span,
.pagination-container li > span.current {
    display: inline-block;
    width: 3.125rem;
    height: 3.125rem;
    padding-top: 4px;
    text-align: center;
    background: none;
    border: none;
    color: #333;
    font-variant-ligatures: common-ligatures; /*Ligatures and contextual forms are ways of combining glyphs to produce more harmonized forms.*/
    margin-bottom: 0;
    font-size: 0.875rem;
    line-height: 3.25;
    margin-top: 0;
    margin-bottom: 2.06818181818rem;
}

.pagination-container div.nav-previous a,
.pagination-container div.nav-next a {
	display: block;
}

.pagination-container div.nav-previous:hover,
.pagination-container div.nav-next:hover,
.pagination-container li a:hover {
    background: #efefef;
    color: #232323;
}

.pagination-container li.active a,
.pagination-container li.active > span {
    color: #989898;
	font-style: italic;
}

.pagination-container li.active a:hover {
    background: #e7e7e7;
    color: #232323;
}

/* Paginate WordPress Posts */
.page-links {
	margin: 0.875rem 0;
	font-weight: 600;
}
.page-links > span,
.page-links a {
	display: inline-block;
	margin: 0 0.13125rem;
	font-weight: normal;
	font-style: italic;
}

.page-links a > span {
	color: #333;
	background: #F9F9F9;
	padding: 0 0.2625rem;
	border: 1px solid #DDDDDD;
	-webkit-border-radius: 2px; 
	-moz-border-radius: 2px; 
	border-radius: 2px;
}


/* ====================================================== 
   16. Filterable Navigation                 
/* ====================================================== */
.nav-filters {
    padding: 1.421875rem 0;
}

.nav-filters ul {
    margin: 0;
}

.nav-filters ul li {
    transition: 0.2s linear;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    font-style: italic;
	display: inline-block;
	*display: inline;
}

.nav-filters ul li:not(:last-child) {
    margin-right: 0.203125rem;
}

.nav-filters ul li:not(:last-child):after {
    content: '/';
    margin-left: 0.203125rem;
    opacity: 0.1;
}

.nav-filters ul li:not(.active):not(.current-cat) {
    opacity: .5;
}

.nav-filters ul li:not(.active):not(.current-cat):after {
    opacity: 0.2;
}

.nav-filters ul li:hover {
    opacity: 1;
}

.nav-filters ul li:hover:after {
    opacity: 0.1;
}


/* ====================================================== 
   17. Portfolio                 
/* ====================================================== */
.portfolio-container {
	position: relative;
    margin: -2.1875rem 0 0 -2.1875rem;
	
}

.portfolio-container:after,
.portfolio-container:before {
    content: '';
    display: block;
    clear: both;
    height: 0;
}

.portfolio-container .portfolio-item {
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    position: relative;
    width: calc(33.3% - 2.1875rem);
    margin: 1.3125rem 0 3.0625rem 2.1875rem;
    float: left;
	text-align: left;
}



.portfolio-container.small .portfolio-item {
    width: calc(24.99999% - 2.1875rem);
}

.portfolio-container.large .portfolio-item {
    width: calc(49.99999% - 2.1875rem);
}

.portfolio-item .link-to {
	width: 100%;
	position: absolute;
	left: 0;
	z-index: 3;
	filter:alpha(opacity=0);  
	-moz-opacity: 0;   
	opacity: 0; 
	/* Vertical Center */
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.portfolio-item:hover .link-to {
	filter:alpha(opacity=100);  
	-moz-opacity: 1;   
	opacity: 1; 
	
}

.portfolio-item .cover {
	position: relative;
}


.portfolio-item .cover:before {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
	background: rgba(255,255,255,0);
	display: block;
	content: '';
	top: 0;
	left: 0;
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
}

.portfolio-item:hover .cover:before {
	background: rgba(255,255,255,.95);
}


.portfolio-item h3 {
	position: relative;
    font-size: 1.125rem;
	padding-top: 0.546875rem;
	
}

.portfolio-item .title {
	filter:alpha(opacity=75);  
	-moz-opacity: 0.7;   
	opacity: 0.7;
	margin-left: 0.875rem;
}

.portfolio-item .title:before {
	content: '|';
	padding-right: 0.875rem;
}


.portfolio-item .title,
.portfolio-item .category {
	font-size: 0.625rem;
	line-height: 1.625;
	display: inline-block;
}

.portfolio-item .category {
	position: absolute;
	bottom: 0.875rem;
	right: 0;
	background: #EE6E73;
	-webkit-border-radius: 25px; 
	-moz-border-radius: 25px; 
	border-radius: 25px;
	padding: 0.0875rem 1.1375rem;
	color: #fff;
	
}

.portfolio-item .category a {
	color: #fff;
}

.portfolio-item .category:hover {
	background:#C56263;
}


.portfolio-item .image {
    width: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    outline: 0;
    background: #ddd;
	border: 1px solid #E7E7E7;
}


.portfolio-item .cover img {
	width: 100%;
	
}



@media screen and (max-width: 1280px) {
	
    .portfolio-container {
        margin: -1.09375rem 0 0 -1.09375rem;
    }

    .portfolio-container .portfolio-item {
        width: calc(33.3% - 1.09375rem);
        margin: 1.09375rem 0 0 1.09375rem;
    }

    .portfolio-container.small .portfolio-item {
        width: calc(24.99999% - 1.09375rem);
        margin: 1.09375rem 0 0 1.09375rem;
    }

    .portfolio-container.large .portfolio-item {
        width: calc(49.99999% - 1.09375rem);
        margin: 1.09375rem 0 0 1.09375rem;
    }
}

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

    .portfolio-container {
        margin: -2.1875rem 0 0 -2.1875rem;
    }

    .portfolio-container .portfolio-item ,
	.portfolio-container.small .portfolio-item,
	.portfolio-container.large .portfolio-item {
        width: calc(50% - 2.1875rem);
        margin: 2.1875rem 0 0 2.1875rem;
    }
}

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

    .portfolio-container {
        margin: -1.09375rem 0 0 -1.09375rem;
    }

    .portfolio-container .portfolio-item,
	.portfolio-container.small .portfolio-item,
	.portfolio-container.large .portfolio-item {
        width: calc(50% - 1.09375rem);
        margin: 1.09375rem 0 0 1.09375rem;
    }
}

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

    .portfolio-container {
        margin: 0;
    }

    .portfolio-container .portfolio-item,
	.portfolio-container.small .portfolio-item,
	.portfolio-container.large .portfolio-item {
        width: 100%;
        margin: 1.09375rem 0 0 0;
    }
}




/* ====================================================== 
   18. Button                 
/* ====================================================== */
/* 18.1. Common button styles */
.button {
	display: inline-block;
	text-align: center;
	min-width: 100px;
	margin: 0.875rem;
	padding: 0.4375rem 1.09375rem;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
}

.button-text-white {
	color: #fff;
}

.button-box-br {
	margin-left: -0.875rem;
}


@media all and (max-width: 768px) {
		
	.button {
		margin: 0.7rem !important;
		padding: 0.35rem 0.875rem !important;
	}

}


.button:focus {
	outline: none;
}
.button > span {
	vertical-align: middle;
}

.button-space-none {
	margin: 0;
}

@media all and (max-width: 768px) {
		
	.button-space-none {
		margin: 0 !important;
	}

}

.button-fullwidth {
	max-width: none;
	width: 100%;
}

@media all and (max-width: 768px) {
		
	.button-fullwidth {
		max-width: none !important;
		width: calc( 100% - 1.75rem ) !important;
		
	}

}


/* 18.2. Borders */
.button-border-thin {
	border: 1px solid;
}
.button-border-medium {
	border: 2px solid;
}
.button-border-thick {
	border: 3px solid;
}
.button-border-white {
	border-color: #fff;
}


/* 18.3. Sizes */
.button-size-tiny {
	font-size: 0.75rem;
}
.button-size-s {
	font-size: 0.875rem;
}
.button-size-m {
	font-size: 1rem;
}
.button-size-l {
	font-size: 1.125rem;
}


/* 18.4. Hover */
.button-hover {
	overflow: hidden;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;	
}
.button-hover:hover {
	color: #333;
	border-color: #333;
}


/* 18.5. Background */
.button-bg:hover {
	filter:alpha(opacity=70);  
	-moz-opacity:0.7;   
	opacity: 0.7; 
}

.button-bg-primary {
	border-color: #EE6E73 !important;
	background: #EE6E73 !important;
	color: #fff !important;
}
.button-bg-primary:hover {
	border-color: #E85254 !important;
	background: #E85254 !important;
	color: #fff !important;
}

.button-bg-black {
	border-color: #333 !important;
	background: #333 !important;
	color: #fff !important;
}
.button-bg-black:hover {
	border-color: #000 !important;
	background: #000 !important;
	color: #fff !important;
}



/* ====================================================== 
   19. Sidebar            
/* ====================================================== */
/* 19.1. Basic */
.sidebar-container {
	-ms-word-wrap: break-word;
	word-wrap: break-word;
	padding-left: 2.1875rem;
	line-height: 1.825;
}

@media all and (max-width: 768px) {
	
	.sidebar-container {
		padding-left: 0;
	}
		
	
}

.sidebar-container .widget {
	padding-bottom: 2.625rem;
	font-size: 0.875rem;
}


.sidebar-container .widget-title {
	margin: 0 0 0.875rem;
}


/* 19.2. Calendar Widget */
.calendar-box {
	padding: 1.3125rem 0;
    width: 100%;
	font-size: 0.5625rem;
}


.calendar-box caption {
    text-align: center;
    margin: 0.875rem 0;
	font-size: 1.25rem;
}


.calendar-box thead th {
    padding-bottom: 10px;
	text-align: center;
	
}

.calendar-box tbody td {
    background: #f5f5f5;
    border: 1px solid #fff;
    text-align: center;
    padding: 8px;
}

.calendar-box tbody td:hover {
    background: #fff;
}

.calendar-box tbody .pad {
    background: none;
}

.calendar-box tfoot #next {
    text-transform: uppercase;
    text-align: right;
}

.calendar-box tfoot #prev {
    text-transform: uppercase;
    padding-top: 0.875rem;
}


/* 19.3. Post List */
.post-list-box li {
	border-bottom: 1px dashed #E6E6E6;
	margin-bottom: 0.721875rem;
}


/* 19.4. Post List with Featured Image */
.post-img-list-box,
.post-img-list-box li {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.3;
}


.post-img-list-box li:after {
	display: block;
	content: '';
	clear: both;
	border-bottom: 1px dashed #E6E6E6;
}

.post-img-list-box li .item-thumb {
    float: left;
    width: 39.4%;
    margin-right: 0.875rem;
    margin-bottom: 0.875rem;
    padding: 2px;
    display: block;
    text-align: left;
}

@media all and (max-width: 991px) {
	.post-img-list-box li .item-thumb {
		width: 15%;
	}	
}

@media screen and (max-width: 480px) {
	.post-img-list-box li .item-thumb {
		width: 39.4%;
	}
}

.post-img-list-box li .item-thumb img {
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.post-img-list-box li .item-info {
    float: left;
    width: 50%;
}

@media all and (max-width: 991px) {
	.post-img-list-box li .item-info {
		width: 82.5%;
	}
}

@media screen and (max-width: 480px) {
	.post-img-list-box li .item-info {
		width: 50%;
	}	
}

.post-img-list-box li .item-info.no-image {
    float: none;
    width: 100%;
}

.post-img-list-box li.nothumb {
    display: none;
}

.post-img-list-box li {
    border: none;
    display: block;
    margin-bottom: 0.875rem;
    display: block;
    height: auto;
    position: relative;
}

.post-img-list-box li .item-title {
   
}

.post-img-list-box li .item-date {
    filter: alpha(opacity=65);
    -moz-opacity: 0.65;
    opacity: 0.65;
    font-size: 0.75rem;
    padding: 0.6125rem 0;
}



/* 19.5. Link List */
.widget_categories ul,
.widget_nav_menu ul,
.widget_pages ul {
	margin-left: 0.875rem;
}



.widget_categories li,
.widget_nav_menu li,
.widget_pages li {
	margin-bottom: 0;
	position: relative;
}

.widget_categories ul > li,
.widget_nav_menu ul > li,
.widget_pages ul > li {
	border-bottom: 1px dashed #E6E6E6;
}
.widget_categories ul > li li,
.widget_pages ul > li li {
	border-bottom: none;
}

.widget_categories li a,
.widget_nav_menu li a,
.widget_pages li a {
    display: inline-block;
    padding: 0.35546875rem;
    font-style: italic;
    transition: 0.2s linear;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
	
}

.widget_categories li a:before,
.widget_nav_menu li a:before,
.widget_pages li a:before {
    content: '\203A';
 	filter: alpha(opacity=70);  
	-moz-opacity: 0.7;   
	opacity: 0.7; 
    margin-right: 0.721875rem;
}


.widget_categories li > .cat-item-count {
    position: absolute;
    top: 0.875rem;
    right: 0;
    border: 1px solid #C2C2C2;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    display: inline-block;
    min-width: 16px;
    height: 16px;
    font-size: 0.625rem;
    text-align: center;
    line-height: 16px;
	filter: alpha(opacity=50);  
	-moz-opacity: 0.5;   
	opacity: 0.5;
}


/* ====================================================== 
   20. Search          
/* ====================================================== */

/* 20.1. Search of Widget */
.search-box {
    position: relative;
	font-size: 0.875rem;
}

.search-box label,
.search-box .search-field {
    width: 100%;
}

.search-box .search-field {
    background: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    color: #555;
    outline: none;
    padding: 0.4375rem 1.421875rem;
	font-weight: 600;
	font-size: 0.75rem;
	-webkit-border-radius: 25px; 
	-moz-border-radius: 25px; 
	border-radius: 25px; 
}

.search-box .search-field::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.search-box .search-field::-webkit-search-decoration {
    display: none;
}

.search-box .wp-search-submit {
    position: absolute;
    top: 0.546875rem;
    right: 0.875rem;
    cursor: pointer;
    font-size: 1rem; /* Icon */
    color: #CCC;
}

.search-box .wp-search-submit:hover {
    color: #333;
}


/* ====================================================== 
   21. Tags      
/* ====================================================== */
.tags-box > a {
	font-size: 0.875rem;
    padding: 0.04375rem 0.109375rem;
	margin-bottom: 0.175rem;
    display: inline-block;
}

.tags-box > a:after {
    content: '/';
    display: inline-block;
    margin-left: 0.546875rem;
	filter:alpha(opacity=50);  
	-moz-opacity:0.5;   
	opacity: 0.5; 
}

.tags-box > a:last-child:after {
	display: none;
	
}

.tags-box.tags-border > a {
	border: 1px solid #E6E6E6;
}
	



/* ====================================================== 
   22. Entry      
/* ====================================================== */


/* 22.1. Spacing */
.entry-section {
	padding: 2.84375rem 0 1.75rem;
}

.entry-section.entry-section-top {
	padding: 2.84375rem 0 0;
}

.entry-section .entry-title {
	padding-bottom: 1.75rem;
}

@media all and (max-width: 768px) {
	.entry-section .entry-title {
		padding-bottom: 0.4375rem;
	}
	
}

/* 22.2. Text */
.entry-mark a {
	color: #EE6E73;
}

.entry-mark a:hover {
	color: #E85254;
}


/* 22.3. Content */
.entry-content {
	-ms-word-wrap: break-word;
	word-wrap: break-word;	
}

.entry-content img {
	height: auto !important;
}

.entry-content iframe {
	max-width: 100% !important;
}



/* 22.4. Meta */
.entry-meta {
    color: #999;
    font-style: italic;
	font-size: 0.75rem;
	line-height: 1.33333333333;
}

.entry-meta li {
	display:inline-block;
	*display: inline;   
	margin-bottom: 0.62890625rem;
}


.entry-meta.wrap li {
	display: block;
}


.entry-meta.wrap li strong {
	padding-right: 0.4375rem;
	font-size: 0.875rem;
	color: #474747;
	display: inline-block;
	width: 130px;
	vertical-align:top;
}

.entry-meta.wrap li span {
	display: inline-block;
	width: calc( 100% - 130px - 0.875rem );
}

.entry-meta li:before {
    content: '/';
    display: inline-block;
    margin-right: 0.4375rem;
}

.entry-meta.wrap li:before {
	display: none;
}


.entry-meta li a {
    color: #999;
}

.entry-meta:not(.wrap) li:first-child:before {
    display: none;
}

.entry-meta.wrap li a {
	color: #EE6E73;
}

.entry-meta.wrap li a:hover {
	color: #E85254;
}





/* ====================================================== 
   23. Comments      
/* ====================================================== */

.comments {
	
}

/* Highlight Author’s Comments in WordPress */
.comment.bypostauthor {
	background-color: transparent;
}
.comment .comment.bypostauthor {
	background-color: transparent;
}



/* Nested comments */
.comment .comment {
    margin-left: 2.625rem;
}

@media all and (max-width: 768px) {
	.comment .comment {
		margin-left: 0;
	}
}

.comment p {
    margin-bottom: 1.25rem;
}

.comment-meta {
	margin-bottom: 0.875rem;
	
}

.comment-meta:after {
	content: '';
	display: block;
	clear: both;
}

.comment-meta .comment-avatar {
    width: 45px;
    margin: 0 1.3125rem 0 0;
    display: block;
	float: left;
}

.comment-meta .comment-avatar img {
    vertical-align: middle;
    width: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
	
}

.comment-meta .comment-text {
	display: block;
	float: left;
}

.comment-meta .comment-text h5 {
	margin-bottom: 0;
	padding-bottom: 0;
}

.comment-meta .comment-text em {
	filter:alpha(opacity=70);  
	-moz-opacity:0.7;   
	opacity: 0.7;
}

.comment-content {
    border-bottom: 1px solid #E6E6E6;
    margin-bottom: 1.75rem;
	margin-left: calc(45px + 1.3125rem);
    clear: both;
    padding-bottom: 1.3125rem;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
}

.comment-content {
	position: relative;
    border-bottom: 1px solid #E6E6E6;
    margin-bottom: 1.75rem;
	margin-left: calc(45px + 1.3125rem);
    clear: both;
    padding-bottom: 1.3125rem;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
}

.comment-content a:not(.respond) {
	text-decoration: underline;
}


.comment-content a.respond {
	background: #EE6E73;
	color: #fff;
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 0.75rem;
	padding: 0.175rem 0.875rem 0;
	text-transform: uppercase;
}


/* WordPress Comment Respond */
.comment-reply-title {
	/* Same to .entry-section .entry-title  */
	padding-bottom: 1.75rem;
	/* Same to .h4 */
    font-size: 1.125rem;
    line-height: 1.33333333333;
	text-transform: uppercase;
}




/* ====================================================== 
   24. Browser UI              
/* ====================================================== */
.browser-top-bar {
    height: 15px;
    background-color: #e1e1e1;
    width: 100%;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    position: relative;
}

.browser-url-bar {
    border-radius: 2px;
    position: absolute;
    bottom: 3px;
    height: 8px;
    width: 85%;
    left: 30px;
    background: #fff;
}

.browser-dots {
    width: 25px;
    position: relative;
    top: 6px;
    left: 5px;
    overflow: hidden;
}

.browser-dot {
    float: left;
    border-radius: 20px;
    height: 4px;
    width: 4px;
    background: #aaa;
    margin-left: 2px;
}



/* ====================================================== 
   25. Style of Irregular Shape                                        
/* ====================================================== */
.skew-element {
    -ms-transform: skew(0deg, -2deg); /* IE 9 */
    -webkit-transform: skew(0deg, -2deg); /* Chrome, Safari, Opera */
    transform: skew(0deg, -2deg);	
}


/* ====================================================== 
   26. Author Card   
/* ====================================================== */
.author-card {
    margin: 0 auto;
    border: 1px solid #eaeaea;
    position: relative;
	border-top: 3px solid #EE6E73;
}

.author-card-top {
	min-height: 2.086538461rem;
    background: #fff;
    padding: 0.65625rem 1.75rem 0 1.75rem;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.author-card-top h3 {
	margin: 0;
	padding: 0;
    font-size: 1.125rem;
    line-height: 1.7;
}

.author-card-top .text {
    margin-top: 0.4375rem;
    float: left;
    width: calc(100% - 105px );
}

.author-card-top .text a {
	font-size: 0.625rem;
}

.author-card-top .pic {
    position: relative;
    top: 0.175rem;
    height: 4.375rem;
    width: 4.375rem;
    float: right;
    width: 100px;
    height: 100px;
}

.author-card-top .pic img {
	width: 90px !important;
	height: 90px !important;
	margin: 5px 0 0 5px;
	border: 1px solid #eaeaea;
	-webkit-border-radius: 100%; 
	-moz-border-radius: 100%; 
	border-radius: 100%; 
}

.author-card-middle {
    background: #fff;
    padding: 1.75rem 1.75rem 1.3125rem 1.75rem;
	line-height: 1.5;
}

.author-card-middle:after {
    content: '';
    position: relative;
    height: 0;
    width: 0;
    border-left: 0.4375rem solid transparent;
    border-right: 0.4375rem solid transparent;
    border-top: 0.4375rem solid #fff;
    position: absolute;
    bottom: 25px;
    left: 1.75rem;
}

.author-card-middle p {
    margin-top: 0.875rem;
    padding: 0 0.875rem 0 1.75rem;
}

.author-card-final {
    height: 30px;
    font-size: 0.75rem;
    display: block;
    background: #F6F6F6;
    padding: 0.525rem 2.1875rem;
	text-align: right;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    -webkit-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
	color: #BDBDBD;
}

.author-card-final .text {
    color: #fff;
    margin-left: 0.4375rem;
}



/* ====================================================== 
   27. Plugins     
/* ====================================================== */
#disqus_thread {
	padding-top: 1.75rem;
}
.alobaidi-captcha-comment-field {
	margin-left: 0.875rem;
}


/* ====================================================== 
   28. Modal   
/* ====================================================== */
.modal-box {
    position: fixed;
    top: calc( -100% - 71px );
    z-index: 99998;
    pointer-events: none;
	-moz-transition: all .5s ease-out;
	-webkit-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
    width: 850px;
	height: 60vh;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: #fff;
	-webkit-box-shadow: 0px 0px 71px 0px rgba(0,0,0,0.47);
	-moz-box-shadow: 0px 0px 71px 0px rgba(0,0,0,0.47);
	box-shadow: 0px 0px 71px 0px rgba(0,0,0,0.47);
	left: calc( (100% - 850px)/2 );
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

@media all and (max-width: 991px) {
	.modal-box:not(.fullscreen) {
		width: 850px !important;
		left: calc( (100% - 850px)/2 );
	}
}


@media all and (max-width: 768px) {
	.modal-box:not(.fullscreen) {
		width: 90% !important;
		left: 5%;
	}	
}


.modal-box.fullscreen {
	left: 0;
	width: 100% !important;
	height: 100% !important;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.modal-mask {
	background: rgba(0,0,0,.0);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 99997;
	display: none;
	content: '';
	background: rgba(0,0,0,.7);
}

.modal-box.active,
.modal-box.fullscreen.active {
    pointer-events: auto;
}

.modal-box.active {
	top: 50%;
}

.modal-box.fullscreen.active {
	top: 0;
}

.modal-box.active .content img,
.modal-box.fullscreen.active .content img {
    -webkit-animation: imgshow .5s forwards;
    animation: imgshow .5s forwards;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
	filter: alpha(opacity=0);  
	-moz-opacity: 0;   
	opacity: 0; 

}

@-webkit-keyframes imgshow {
    to {
		filter: alpha(opacity=100);  
		-moz-opacity: 1;   
		opacity: 1;
    }
}

@keyframes imgshow {
    to {
		filter: alpha(opacity=100);  
		-moz-opacity: 1;   
		opacity: 1;
    }
}

.modal-box .content {
	padding: 3.9375rem 2.1875rem 2.1875rem;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
	height: 100%;
	overflow: hidden;
	
}

.modal-box.active .content {
	overflow-y: scroll;
}

.modal-box .close-btn {
	-webkit-box-shadow: 2.5px 4.33px 16px 0px rgba(204, 23, 30, 0.31);
	-moz-box-shadow: 2.5px 4.33px 16px 0px rgba(204, 23, 30, 0.31);
	box-shadow: 2.5px 4.33px 16px 0px rgba(204, 23, 30, 0.31);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background: rgba(204, 23, 30, 1);
	width: 36px;
	height: 36px;
	display: inline-block;
	text-align: center;
	line-height: 34px;
	overflow: hidden;
    position: absolute;
    right: 12px;
    top: 12px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.modal-box.fullscreen .close-btn {
    right: 26px;
}


.modal-box:not(.fullscreen).active .close-btn {
	background: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.modal-box .close-btn:hover {
	background: #b50d14;
}

.modal-box:not(.fullscreen) .close-btn:hover {
	background: none;
}

.modal-box .close-btn:after {
	font-family: Arial, sans-serif;
	content: '+';
	color: #fff;
	font-size: 1.25rem;
	font-weight: 400;
}

.modal-box:not(.fullscreen).active .close-btn:after {
	color: #929292;
	font-size: 1.875rem;
}


/* ====================================================== 
   29. Tabs        
/* ====================================================== */
.tabs {
	-webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);
	box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);	
}

.tabs .content {
	display: none;
	padding: 1.3125rem;
	text-align: left;
}
.tabs .content.active {
	display: block;
}

.tabs li {
    list-style: none;
	float: left;
	-webkit-box-shadow: inset 1px 0px 0px 0px rgba(230,230,230,1);
	-moz-box-shadow: inset 1px 0px 0px 0px rgba(230,230,230,1);
	box-shadow: inset 1px 0px 0px 0px rgba(230,230,230,1);
	background: #f7f7f7;
}

.tabs ul:after {
	content: '';
	display: block;
	clear: both;
}

.tabs li a {
	display: block;
	text-align: center;
}

.tabs li.active {
    background: #eeeeee;
}

/* ====================================================== 
   30. Single Page        
/* ====================================================== */

/* Post edit link */
.post-edit-link {
	display: inline-block;
	background: #F9F9F9;
	padding: 0.175rem 0.4375rem;
	border: 1px solid #DDDDDD;
	-webkit-border-radius: 2px; 
	-moz-border-radius: 2px; 
	border-radius: 2px;
	text-decoration: none !important;
	margin-top: 1.09375rem;
}


/* ====================================================== 
   31. WordPress Core            
/* ====================================================== */
.edit-link {
    display: block;
}

.edit-link:before,
.edit-link:after {
	content: '';
	display: block;
	clear: both;
}


.edit-link a {
	text-decoration: underline;
}

.alignnone {
    margin: 0.4375rem 1.27624999994rem 1.27624999994rem 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 0.4375rem auto 0.4375rem auto;
}

.alignright {
    float: right;
    margin: 0.4375rem 0 1.27624999994rem 1.27624999994rem;
}

.alignleft {
    float: left;
    margin: 0.4375rem 1.27624999994rem 1.27624999994rem 0;
}

a img.alignright {
    float: right;
    margin: 0.4375rem 0 1.27624999994rem 1.27624999994rem;
}

a img.alignnone {
    margin: 0.4375rem 1.27624999994rem 1.27624999994rem 0;
}

a img.alignleft {
    float: left;
    margin: 0.4375rem 1.27624999994rem 1.27624999994rem 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    /* Image does not overflow the content area */
    padding: 0.4375rem 0.2625rem 0.625rem;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 0.4375rem 1.27624999994rem 1.27624999994rem 0;
}

.wp-caption.alignleft {
    margin: 0.4375rem 1.27624999994rem 1.27624999994rem 0;
}

.wp-caption.alignright {
    margin: 0.4375rem 0 1.27624999994rem 1.27624999994rem;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 0.6875rem;
    line-height: 1.421875;
    margin: 0;
    padding: 0 0.35rem 0.4375rem;
}

/* Text meant only for screen readers. */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 0.4375rem;
    line-height: normal;
    padding: 1.05rem 1.421875rem 0.875rem;
    text-decoration: none;
    top: 0.4375rem;
    width: auto;
    z-index: 100000;
}

/* Galleries */
.gallery {
	margin-bottom: 1.4rem;
}

.gallery-item {
	display: inline-block;
	padding: 1.79104477%;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-icon img {
	margin: 0 auto;
}

.gallery-caption {
	color: #707070;
	color: rgba(51, 51, 51, 0.7);
	display: block;
	font-family: "Noto Sans", sans-serif;
	font-size: 1.2rem;
	line-height: 1.5;
	padding: 0.435rem 0;
}

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}

/* other */
.sticky {}

.ckeditor-html5-video video{width:100%;}