/*

	## Project Name        :  UUNN (uunn.cn) 样当代
    ## Last Update         :  December 4, 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
    Sub Page Assistant Color   :    #434343
	Highlight Color            :    #1717f4, #0000ff
	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. Core Scene 
		31.1 Dot of Decoration
		31.2 Main Svg Scene
		31.3 Svg border effect for loader
		31.4 Svg target effect
		31.5 Stopwatch
		31.6 Scene Line
		31.7 Music Bar
		31.8 Locate

    32. Sub Page
        32.1 General Stylesheets
        32.2 Page Sub Menu
        32.3 Map & Contact
        32.4 Team Focus
        32.5 Artist
        32.6 Exhibition Map

    33. List Modules
        33.1 List of Post
        33.2 List of Split

	
*/


/* ====================================================== 
   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 */
	overflow: hidden;
}

*,
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: 'Helvetica Neue',Helvetica, 'Microsoft YaHei', STXihei, 'PingFang SC','Hiragino Sans GB',Arial,sans-serif;
    color: #212121;
	background: #000;
}

body.page {
	background: #fff;
}


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

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

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 #1717f4;
    padding: 0 1.75rem 1.25rem;
	margin-top: 1.421875rem;
	line-height: 2;
	font-size: 1rem;
}

blockquote:before {
    color: #1717f4;
    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: 2rem 0;
    border-color: #F4F4F4;
}

a img {
    border: none;
}

img {
    max-width: 100%;
}

iframe {
    border: none !important;
}





/* ====================================================== 
   2. Helper Classes                                
/* ====================================================== */
.relative {
	position: relative
}

.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: 10px;
	padding: 0 0 0.546875rem;
	-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: 'Helvetica Neue',Helvetica, 'Microsoft YaHei', STXihei, 'PingFang SC','Hiragino Sans GB',Arial,sans-serif;
	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;
}

.font-s p,
p.font-s {
	font-size: 0.875rem;
}

.font-s h1,
.font-s h2,
.font-s h3,
.font-s h4,
.font-s h5,
.font-s h6 {
	padding-bottom: .5rem;
	margin-bottom: 0;
}


@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: #1717f4;
    text-decoration: none;
    outline: none;
}

a:hover{
	
}

a:active,a:focus{
	
}

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

a.link:hover {
	color: #0000ff;
}

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

.list-normal a:not(.uix-sc-btn):hover,
.table-normal a:not(.uix-sc-btn):hover {
	color: #0000ff !important;
	text-decoration: none;
}

.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;
}


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 !important;
}

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

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

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


@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: #1717f4;
}

/* 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                                    
/* ====================================================== */
/* Hamburger menu */
.primary-menu-toggle {
    display: block;
    position: fixed;
    top: 70px;
    right: 40px;
    z-index: 100009;
    -webkit-user-select: none;
    user-select: none;
	width: 53px;
	height: 50px;
	cursor: pointer;
	-moz-transition: 0.5s cubic-bezier(0.77,0.2,0.05,1.0); 
	-o-transition: 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	-webkit-transition: 0.5s cubic-bezier(0.77,0.2,0.05,1.0); 
	transition: 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	opacity: 0;
}


.primary-menu-toggle.menu-active {
	opacity: 1;
}

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


.primary-menu-toggle span {
    display: block;
    width: 34px;
    height: 4px;
    margin-bottom: 7px;
    position: relative;
    background: #fff;
    border-radius: 3px;
    z-index: 1;
	-webkit-border-radius: 15px; 
	-moz-border-radius: 15px; 
	border-radius: 15px;
	
	
	-moz-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
	-o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
	-webkit-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;


	
}

.primary-menu-toggle.spy-scroll-fixed span {
    background: #000;
}


.primary-menu-toggle span:first-child {
	-webkit-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	
}
.primary-menu-toggle span:nth-child(2) {
	margin-left: 10px;
}

.primary-menu-toggle span:nth-child(3) {
	margin-left: 4px;
	width: 24px;
}

.primary-menu-toggle span:nth-last-child(2) {

	-webkit-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	
}


/* 
 * Transform all the slices of hamburger into a crossmark.
 */
.primary-menu-toggle.active {
    top: 40px;
    right: 0;	
}

.primary-menu-toggle.active span {
	-webkit-transform: rotate(45deg) translate(-26px, 0px);
	-ms-transform: rotate(45deg) translate(-26px, 0px);
	transform: rotate(45deg) translate(-26px, 0px);
    background: rgba(255,255,255,.8);
	width: 35px;
	margin-left: auto;
	padding-bottom: 4px;
}


.primary-menu-toggle.active span:nth-last-child(3) {
	-webkit-transform: rotate(0deg) scale(0.2, 0.2);
	-ms-transform: rotate(0deg) scale(0.2, 0.2);
	transform: rotate(0deg) scale(0.2, 0.2);
	
	filter: alpha(opacity=0);  
	-moz-opacity: 0;   
	opacity: 0;


}

.primary-menu-toggle.active span:nth-last-child(2) {
	-webkit-transform: rotate(-45deg) translate(-12px, -5px);
	-ms-transform: rotate(-45deg) translate(-12px, -5px);
	transform: rotate(-45deg) translate(-12px, -5px);


}



/* Menu wrapper */
.menu-container {
	font-size: 0.95rem;
    padding-top: 120px;
	line-height: 2.34375;
	background-color: rgba(0,0,0,.9);
	height: 100%;
	position: fixed;
	z-index: 100008;
	right: 0;
	width: 200px;
	top: 0;
	
	-webkit-transform: translate(0, 100%);
	-ms-transform: translate(0, 100%);
	transform: translate(0, 100%);
	
	-moz-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	-o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	-webkit-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	
	visibility: hidden;

}

.menu-container.active {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
}

.menu-container.active ul.menu-main {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
}



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

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


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

}

ul.menu-main {
	width: 200px;
	display: block;
	margin: 0; /* Required*/
	-webkit-transform: translate(0, 2%);
	-ms-transform: translate(0, 2%);
	transform: translate(0, 2%);
	
	-moz-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	-o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	-webkit-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}


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

ul.menu-main > li {
    display: block;
    margin-right: 27px;
	padding-bottom: 1.421875rem;
	white-space: nowrap; /* Required*/	
	width: 100%;
	height: 50px;
	line-height: 50px;

}

ul.menu-main > li ul li {
	width: 100%;
	height: 50px;
	line-height: 50px;

}



ul.menu-main > li:after {
	content: '';
	display: block;
	width: 50px;
	height: 1px;
	background: #fff;
	-webkit-transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	transform: rotate(20deg);
	position: absolute;
	right: 15px;
	top: 15px;
	-moz-transition: .5s linear; 
	-o-transition: .5s linear;
	-webkit-transition: .5s linear; 
	transition: .5s linear;
}


ul.menu-main > li:nth-child(2n+1):after {
	-webkit-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	transform: rotate(-20deg);
}

ul.menu-main > li.active:after,
ul.menu-main > li:hover:after {
	-webkit-transform: rotate(0deg) !important;
	-ms-transform: rotate(0deg) !important;
	transform: rotate(0deg) !important;
	width: 120px;
	right: -35px;
	top: 25px;
}


ul.menu-main li a {
	display: block;
	height: 100%;
	width: 100%;
}

ul.menu-main li .en,
ul.menu-main li .cn {
	-moz-transition: .2s linear; 
	-o-transition: .2s linear;
	-webkit-transition: .2s linear; 
	transition: .2s linear;
	position: absolute;
	top: 0;
	left: 35px;
	display: block;
	width: 100%;
	height: 100%;
}

ul.menu-main li .en {
	color: #fff;
	top: 100%;
	opacity: 0;
	display: none;
}

ul.menu-main li .cn {
	color: #fff;
}

ul.menu-main li .en.hide,
ul.menu-main li .cn.hide {
	top: 100%;
	opacity: 0;
	display: none;
}

ul.menu-main li .en.show,
ul.menu-main li .cn.show {
	top: 0;
	opacity: 1;
	display: block;
}


ul.menu-main > li > a {
	color: #fff;
}

ul.menu-main > li.active,
ul.menu-main > li.current-menu-item,
ul.menu-main > li:hover {
	
	
}

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: 0 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: 0;
	right: 100%;
	
}

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;
	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;
    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: fixed;
    display: none;
    width: 30px;
    height: 30px;
    top: 70px;
    right: 40px;
    z-index: 100009;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
	-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;
	opacity: 0;
}


.menu-toggle.menu-active {
	opacity: 1;
}



/* 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;
    width: 34px;
    height: 4px;
    margin-bottom: 7px;
    position: relative;
    background: #fff;
    border-radius: 3px;
    z-index: 1;
	-webkit-border-radius: 15px; 
	-moz-border-radius: 15px; 
	border-radius: 15px;
	
	
	-moz-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
	-o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
	-webkit-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;


	
}

.menu-toggle span:first-child {
	-webkit-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	
}
.menu-toggle span:nth-child(2) {
	margin-left: 10px;
}

.menu-toggle span:nth-child(3) {
	margin-left: 4px;
	width: 24px;
}

.menu-toggle span:nth-last-child(2) {

	-webkit-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	
}


/* 
 * Transform all the slices of hamburger into a crossmark.
 */
.menu-toggle.open {
    top: 40px;
    right: 0;	
}

.menu-toggle.open span {
	-webkit-transform: rotate(45deg) translate(-26px, 0px);
	-ms-transform: rotate(45deg) translate(-26px, 0px);
	transform: rotate(45deg) translate(-26px, 0px);
    background: rgba(255,255,255,.8);
	width: 35px;
	margin-left: auto;
	padding-bottom: 4px;
}


.menu-toggle.open span:nth-last-child(3) {
	-webkit-transform: rotate(0deg) scale(0.2, 0.2);
	-ms-transform: rotate(0deg) scale(0.2, 0.2);
	transform: rotate(0deg) scale(0.2, 0.2);
	
	filter: alpha(opacity=0);  
	-moz-opacity: 0;   
	opacity: 0;


}

.menu-toggle.open span:nth-last-child(2) {
	-webkit-transform: rotate(-45deg) translate(-12px, -5px);
	-ms-transform: rotate(-45deg) translate(-12px, -5px);
	transform: rotate(-45deg) translate(-12px, -5px);


}




/* ====================================================== 
   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: 60px;;
    width: 100%;
    z-index: 100007;
}

.page .header-area {
	position: absolute;
}

/* Don't use "margin" or "padding" to set up ".header-container" */
.header-container {
	/* Floating layer protection for IE */
    background: url(../images/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;
	position: relative;
	margin-left: 40px;
	opacity: 0;
	-moz-transition: 2s ease-in-out; 
	-o-transition: 2s ease-in-out;
	-webkit-transition: 2s ease-in-out; 
	transition: 2s ease-in-out;
}



.brand.active {
	opacity: 1;
}


.brand img {
	max-height: 60px;
}

@media all and (max-width: 768px) {
	
	.brand {
		max-width: 85%;
		margin-left: 20px;

	}
	
	.brand img {
		max-height: 40px;
	}
	
}


.brand > span {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: none;
}

.mobile-brand {
	display: none;
}


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



/* ====================================================== 
   9. Footer                               
/* ====================================================== */
.footer-main-container {
	font-size: 0.75rem;
	padding: 40px 40px;
	position: fixed;
	right: 0;
	bottom: 0;
	color: #fff;
	z-index: 100007;
	opacity: 0;
	-moz-transition: 2s ease-in-out; 
	-o-transition: 2s ease-in-out;
	-webkit-transition: 2s ease-in-out; 
	transition: 2s ease-in-out;
	width: 100%;
	
}

.page .footer-main-container {
	background: #434343;
	position: relative;
	text-align: center;
}



.footer-main-container.active {
	opacity: 1;
}


@media all and (max-width: 768px) {
	
	.footer-main-container {
		display: none;
	}
}



.footer-main-container a {
	color: #fff;
}

.footer-main-container .copy,
.footer-main-container .social {
	width: 50%;
}

.page .footer-main-container .copy,
.page .footer-main-container .social {
	width: auto;
	display: inline-block;
}


.footer-main-container .copy {
	float: right;
	text-align: right;
	
}

.page .footer-main-container .copy {
	float: none;
	text-align: inherit;
	padding-left: 100px;
	
}

.footer-main-container .social {
	float: right;
	text-align: left;
}

.page .footer-main-container .social {
	float: none;
	text-align: inherit;
	
}

.footer-main-container .social a {
	display: inline-block;
	margin-right: 10px;
}

.page .footer-main-container .social a:nth-child(1) {
	margin-left: 40px;
}

/* ====================================================== 
   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;
	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(../images/back-top.png) no-repeat left top;
    z-index: 1;
}

#toTopHover {
    background: url(../images/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 {
    height: 100%;
    background-color: #000;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 100010;
}

.page .loader {
	display: none;
}


.loader span {
	display: block;
	width: 500px;
	height: 250px;
	line-height: 250px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
	text-align: center;
    position: absolute;
	border: 0 solid #fff;
    top: 35%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	/* Vertical Center */
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
    overflow: hidden;
    transition: all 1s;
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 3px;
	-moz-transition: none; 
	-o-transition: none; 
	-webkit-transition: none; 
	transition: none; 

}

/*
.loader span:before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #0000ff;
	border: 1px solid #fff;
    border-radius: 80px;
    top: 70px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-animation: web-wave 3s infinite linear;
    animation: web-wave 3s infinite linear;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
    transition: all 1s;
}

@-webkit-keyframes web-wave {
    0% {
        -webkit-transform: translateX(-50%) rotate(0deg);
        -ms-transform: translateX(-50%) rotate(0deg);
        transform: translateX(-50%) rotate(0deg);
    }

    100% {
        -webkit-transform: translateX(-50%) rotate(360deg);
        -ms-transform: translateX(-50%) rotate(360deg);
        transform: translateX(-50%) rotate(360deg);
    }
}

@keyframes web-wave {
    0% {
        -webkit-transform: translateX(-50%) rotate(0deg);
        -ms-transform: translateX(-50%) rotate(0deg);
        transform: translateX(-50%) rotate(0deg);
    }

    100% {
        -webkit-transform: translateX(-50%) rotate(360deg);
        -ms-transform: translateX(-50%) rotate(360deg);
        transform: translateX(-50%) rotate(360deg);
    }
}

*/


.loader span:hover {
    color: #0000ff;
}

.loader span:hover:before {
    top: 15px;
}


/* ====================================================== 
   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;
}


.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;
}

.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;
	width: 100%;
	
}


.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 .image {
	display: block;
	width: 100%;
	height: 402px;
	overflow: hidden;
	-moz-transition: .8s ease-in-out; 
	-o-transition: .8s ease-in-out;
	-webkit-transition: .8s ease-in-out; 
	transition: .8s ease-in-out;

}

.portfolio-item.has-more .image {
	height: 241px;

}

.portfolio-item.has-more.associated .image {
	height: 120px;

}

.portfolio-item.has-more.associated > p {
	margin-top: 1rem;
}


@media all and (min-width: 1300px) {
	.portfolio-item:not(.has-more):not(.has-avatar):hover .image {
		display: block;
		width: 266px;
		height: 402px;
		overflow: hidden;
		-webkit-transform: scale(1.1);   
		-ms-transform: scale(1.1);   
		transform: scale(1.1);   
	}
	
	
	.portfolio-item.has-more:hover .image img,
	.portfolio-item.has-avatar:hover .image img {
		-webkit-transform: scale(1.1);   
		-ms-transform: scale(1.1);   
		transform: scale(1.1);   
	}	
	
}


.portfolio-item .mask {
	position: absolute;
    -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: '';
	bottom: -20px;
	left: 20px;
	position: absolute;
	z-index: 2;
	width: calc( 100% - 40px);
	height: 200px;
	border: 1px solid rgba(225,225,225,0);
	z-index: 1;
	
}

.portfolio-item:hover .mask {
	background: rgba(255,255,255,1);
	border: 1px solid rgba(225,225,225,.5);
}


.portfolio-item h3 span:first-child,
.portfolio-item h3 span:nth-child(2) {
	height: 25px;
	display: block;
	overflow: hidden;
	text-transform: uppercase;
	text-align: center;
	position: relative;
	z-index: 2;
	text-overflow: ellipsis;
	/* Required for text-overflow to do anything */
	white-space: nowrap;
}



.portfolio-item.has-more h3 span:first-child,
.portfolio-item.has-more h3 span:nth-child(2),
.portfolio-item.has-avatar h3 span:first-child,
.portfolio-item.has-avatar h3 span:nth-child(2) {
	text-align: left;
	
}

 

.portfolio-item h3 {
	margin-top: 15px;
	position: relative;
    font-size: 1.125rem;
	padding-top: 0.546875rem;
	height: 70px;
	
}

.portfolio-item.has-more h3 {
	height: 50px;
}
.portfolio-item h3 span:nth-child(2) {
    font-size: 0.875rem;
	padding-top: 5px;
}

.portfolio-item .dividing-line {
	height: 20px;
	width: 1px;
	background: #333;
	margin: 10px auto;
	position: relative;
	z-index: 2;
	-moz-transition: .8s ease-in-out; 
	-o-transition: .8s ease-in-out;
	-webkit-transition: .8s ease-in-out; 
	transition: .8s ease-in-out;

	
}

.portfolio-item:hover .dividing-line {
	background: #1717f4;
	width: 2px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	
}


.portfolio-item p { 
	color: #6E6E6E;
	margin: 0;
	padding: 0;
	text-align: center;
	line-height: 1.2;
	position: relative;
	z-index: 2;
	font-size: 0.75rem;
}

.portfolio-item.has-more p {
	text-align: left;
}

.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: #1717f4;
	-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;
}


.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;
    }
	
	.portfolio-item .image {
		height: 322px;

	}
	
	.portfolio-item.has-more .image {
		height: 185px;

	}

	
}

@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;
    }
	
	.portfolio-item .image {
		height: 492px;

	}
	.portfolio-item.has-more .image {
		height: 225px;

	}
}

@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;
    }
	
	.portfolio-item .image {
		height: 512px;

	}
	.portfolio-item.has-more .image {
		height: 255px;

	}
}

@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;
    }
	
	.portfolio-item .image {
		height: 522px;

	}
	.portfolio-item.has-more .image {
		height: 225px;

	}
}


/* More Button */
.portfolio-item .more-container {
	position: relative;
	height: 40px;
	width: 95%;
}

.portfolio-item .more {
	line-height: 5;
}

.portfolio-item .more-bg {
	background: #000;
	position: absolute;
	left: 0;
	top: 74%;
	z-index: 1;
	-moz-transition: .8s ease-in-out; 
	-o-transition: .8s ease-in-out;
	-webkit-transition: .8s ease-in-out; 
	transition: .8s ease-in-out;
	width: 40px;
	height: 2px;
}
.portfolio-item:hover .more-bg {
    left: calc( 100% - 80px );
	background: #1717f4;
	
}

.portfolio-item:hover .more {
	color: #1717f4;
}


/* ====================================================== 
   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: #1717f4 !important;
	background: #1717f4 !important;
	color: #fff !important;
}
.button-bg-primary:hover {
	border-color: #0000ff !important;
	background: #0000ff !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;
}


/* Load More */
.load-more {
	border: 1px solid #D9D9D9;
	padding: 0.55rem 3.5rem;
	display: inline-block;
	font-size: 0.875rem;
	position: relative;
	overflow: hidden;
}

.load-more:hover {
	background: #1717f4;
	color: #fff;
}

.load-more:before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #0000ff;
	border: 1px solid #fff;
    border-radius: 80px;
    top: 12px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-animation: web-wave 3s infinite linear;
    animation: web-wave 3s infinite linear;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
    transition: all 1s;
	opacity: 0;
}

.load-more.active:before {
	opacity: 1;
}

@-webkit-keyframes web-wave {
    0% {
        -webkit-transform: translateX(-50%) rotate(0deg);
        -ms-transform: translateX(-50%) rotate(0deg);
        transform: translateX(-50%) rotate(0deg);
    }

    100% {
        -webkit-transform: translateX(-50%) rotate(360deg);
        -ms-transform: translateX(-50%) rotate(360deg);
        transform: translateX(-50%) rotate(360deg);
    }
}

@keyframes web-wave {
    0% {
        -webkit-transform: translateX(-50%) rotate(0deg);
        -ms-transform: translateX(-50%) rotate(0deg);
        transform: translateX(-50%) rotate(0deg);
    }

    100% {
        -webkit-transform: translateX(-50%) rotate(360deg);
        -ms-transform: translateX(-50%) rotate(360deg);
        transform: translateX(-50%) rotate(360deg);
    }
}




/* ====================================================== 
   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;
}


.post-list-noimg-box {
	
}

.post-list-noimg-box li {
	position: relative;
	padding-bottom: 1rem;
}
.post-list-noimg-box h4,
.post-list-noimg-box p {
	font-size: 0.875rem;
	margin: 0;
	padding: 0;
	margin: .3rem 0;
	line-height: 1.5;
}


.post-list-noimg-box h4 > a > span {
	display: block;
	background: #000;
	width: 5px;
	height: 5px;
	-webkit-border-radius: 100%; 
	-moz-border-radius: 100%; 
	border-radius: 100%; 
	position: absolute;
	top: 10px;
	left: -20px;
	-moz-transition: .8s ease-in-out; 
	-o-transition: .8s ease-in-out;
	-webkit-transition: .8s ease-in-out; 
	transition: .8s ease-in-out;

}

.post-list-noimg-box h4 > a:hover > span {
	background: #1717f4;
	width: 12px;
	height: 1px;
	-webkit-border-radius: 0; 
	-moz-border-radius: 0;
	border-radius: 0;
	top: 13px;
	left: -50px;
}



/* 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 {
	margin-top: 1rem;
	text-align: left;
	padding-left: 1rem;
}

.tags-box.detail {
	padding-left: 0;
	margin-left: -.5rem;
	margin-top: -.75rem;
}

.tags-box.detail.side {
	margin-top: .75rem;
}

.tags-box.detail.side > a {
	background: #f1f1f1;
}

.tags-box > a {
	font-size: 0.875rem;
    padding: 0.04375rem 0.109375rem;
	margin-bottom: 0.175rem;
    display: inline-block !important;
}


.tags-box > a:hover {
	color: #1717f4 !important;
}



.tags-box > a:before {
    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: #1717f4;
}

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


/* 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;
	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: #1717f4;
}

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





/* ====================================================== 
   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: #1717f4;
	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 #1717f4;
}

.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;
}


.page-detail .dividing-line {
	height: 3px;
	width: 60px;
	background: #000;
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.page-detail img {
	height:  auto !important;
}

.page-detail .col-md-9 {
	border-right: 1px solid #e2e2e2;
}

.page-detail .col-md-9 > div.content {
	padding: 0 34px 0 0;
}

.page-detail .col-md-3 > div.content {
	padding: 0 0 0 34px;
}



/* ====================================================== 
   31. Core Scene    
/* ====================================================== */

.home-btn-r-container {
    display: block;
    position: fixed;
    top: 70px;
    right: 145px;
    z-index: 100009;
	width: 200px;
	cursor: pointer;
	-moz-transition: 0.5s cubic-bezier(0.77,0.2,0.05,1.0); 
	-o-transition: 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	-webkit-transition: 0.5s cubic-bezier(0.77,0.2,0.05,1.0); 
	transition: 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	opacity: 0;
	color: #fff;
}

.page .home-btn-r-container {
	right: 130px;
}


@media all and (max-width: 768px) {
	.home-btn-r-container {
		display: none;
		
	}
	
}

.home-btn-r-container.active {
	opacity: 1;
}

.home-btn-r-container .home-btn-r {
	color: #fff;
	display: inline-block;
	margin: 5px 12px;
	position: static;
}

.home-btn-r-container.spy-scroll-fixed .home-btn-r {
	color: #000;
}



.home-btn-r-container .home-btn-r.back .l1,
.home-btn-r-container .home-btn-r.back .l2 {
	-moz-transition: .1s ease-in-out; 
	-o-transition: .1s ease-in-out;
	-webkit-transition: .1s ease-in-out; 
	transition: .1s ease-in-out;

}

.home-btn-r-container .home-btn-r.back .l1 {
    display: block;
	opacity: 1;
	
}
.home-btn-r-container .home-btn-r.back .l2 {
	display: none;
	opacity: 0;
	
}

.home-btn-r-container.spy-scroll-fixed .home-btn-r.back .l1 {
	display: none;
	opacity: 0;
	
}
.home-btn-r-container.spy-scroll-fixed .home-btn-r.back .l2 {
	display: block !important;
	opacity: 1;
	
}


.home-btn-r-container .lang {
	position: relative;
	display: inline-block;
}

.home-btn-r-container a.lang-go {
	background: none;
	-webkit-border-radius: 100%; 
	-moz-border-radius: 100%; 
	border-radius: 100%;
	
	display: inline-block;
	width: 25px !important;
	height: 25px !important;
	text-align: center;
	
}

.home-btn-r-container.spy-scroll-fixed a.lang-go {
	background: #000;
	color: #fff;
	font-size: 0.75rem;
	padding-top: 3px;
}

.home-btn-r-container a.lang-go:after {
	display: block;
	content: '';
	border: 3px solid transparent; 
	border-top: 6px solid #fff; 
	width: 0; 
	height: 0px;
	position: absolute;
	top: 15px;
	left: 100%;
}

.page .home-btn-r-container a.lang-go:after {
	display: none;
}

.home-btn-r-container .lang .lang-sub {
	display: block;
	visibility: hidden;
	position: absolute;
	background: #fff;
	-webkit-border-radius: 3px; 
	-moz-border-radius: 3px; 
	border-radius: 3px;
	font-size: 0.75rem;
	padding: 6px;
	-moz-transition: .2s ease-in-out !important; 
	-o-transition: .2s ease-in-out !important;
	-webkit-transition: .2s ease-in-out !important; 
	transition: .2s ease-in-out !important;
	opacity: 0;
	margin-top: 17px;
	margin-left: 5px;
	-webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.27);
	-moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.27);
	box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.27);

}

.home-btn-r-container.spy-scroll-fixed .lang .lang-sub {
	margin-left: 10px;

}



.home-btn-r-container .lang .lang-sub:after {
	display: block;
	content: '';
	border: 4px solid transparent; 
	border-bottom: 8px solid #fff; 
	width: 0; 
	height: 0px;
	position: absolute;
	top: -8px;
	left: 50%;
	margin-left: -2px;
}



.home-btn-r-container .lang:hover .lang-sub {
	opacity: 1;
	margin-top: 0;
	visibility: visible;
}


.home-btn-r-container .lang .lang-sub a {
	display: block;
	
}

/* 31.1 Dot of Decoration */
.scene-decoration-dot {
	width: 22px;
	height: 22px;
	position: fixed;
	top: 58%;
	left: 40%;
	z-index: 3;
	background: #fff;
	-webkit-border-radius: 100%; 
	-moz-border-radius: 100%; 
	border-radius: 100%; 
	-moz-transition: 2s ease-in-out; 
	-o-transition: 2s ease-in-out;
	-webkit-transition: 2s ease-in-out; 
	transition: 2s ease-in-out;
	opacity: 0;
}

.scene-decoration-dot.active {
	opacity: 1;
}


.scene-decoration-dot2 {
	width: 5px;
	height: 5px;
	left: 70%;
	top: 50%;
}

/* 31.2 Main Svg Scene */
.sound-container {
	display: none;
}

#svg-scene-container {
	position: relative;
	z-index: 3;
}

.svg-scene {
	position: fixed;
	z-index: 3;
	width: 100%;
	height: 100%;
}

.svg-scene .curve {
	width: 920px !important;
	height: 550px !important;
}

@media all and (max-width: 768px) {

	.svg-scene .curve1,
	.svg-scene .curve2,
	.svg-scene .curve3,
	.svg-scene .curve4,
	.svg-scene .curve5,
	.svg-scene .curve6,
	.svg-scene .curve7,
	.svg-scene .curve8,
	.svg-scene .curve9,
	.svg-scene .curve10,
	.svg-scene .curve11 {
		width: 320px !important;
		height: 250px !important;
	}
}


.svg-scene .curve1,
.svg-scene .curve2,
.svg-scene .curve3,
.svg-scene .curve4,
.svg-scene .curve5,
.svg-scene .curve6,
.svg-scene .curve7,
.svg-scene .curve8,
.svg-scene .curve9,
.svg-scene .curve10,
.svg-scene .curve11 {
	opacity: 0;
	-moz-transition: 2s ease-in-out; 
	-o-transition: 2s ease-in-out;
	-webkit-transition: 2s ease-in-out; 
	transition: 2s ease-in-out;

}

.svg-scene .curve1.active,
.svg-scene .curve2.active,
.svg-scene .curve3.active,
.svg-scene .curve4.active,
.svg-scene .curve5.active,
.svg-scene .curve6.active,
.svg-scene .curve7.active,
.svg-scene .curve8.active,
.svg-scene .curve9.active,
.svg-scene .curve10.active,
.svg-scene .curve11.active {
	opacity: 1;
	-webkit-animation: scene-islandshow 2s linear 1; /* Chrome, Opera 15+, Safari 5+ */
	animation: scene-islandshow 2s linear 1; /* Chrome, Firefox 16+, IE 10+, Opera */
	
}


.svg-scene .curve4.active {
    -webkit-animation-delay: 0s;
	animation-delay: 0s;
}

.svg-scene .curve5.active {
    -webkit-animation-delay: .1s;
	animation-delay: .1s;
}

.svg-scene .curve6.active {
    -webkit-animation-delay: .2s;
	animation-delay: .2s;
}

.svg-scene .curve7.active {
    -webkit-animation-delay: .3s;
	animation-delay: .3s;
}
.svg-scene .curve8.active {
    -webkit-animation-delay: .4s;
	animation-delay: .4s;
}
.svg-scene .curve9.active {
    -webkit-animation-delay: .5s;
	animation-delay: .5s;
}
.svg-scene .curve10.active {
    -webkit-animation-delay: .6s;
	animation-delay: .6s;
}
.svg-scene .curve11.active {
    -webkit-animation-delay: .7s;
	animation-delay: .7s;
}


@-webkit-keyframes scene-islandshow {
	from {
		opacity: 0;
		-webkit-transform: scale(.9);   
		-ms-transform: scale(.9);   
		transform: scale(.9);  
	}
	to {
		opacity: 1;
		-webkit-transform: scale(1);   
		-ms-transform: scale(1); 
		transform: scale(1); 
	}
}

	
@keyframes scene-islandshow {
	from {
		opacity: 0;
		-webkit-transform: scale(.9);   
		-ms-transform: scale(.9);   
		transform: scale(.9);  
	}
	to {
		opacity: 1;
		-webkit-transform: scale(1);   
		-ms-transform: scale(1); 
		transform: scale(1); 
	}
}



.svg-scene .curve {
    width: 70%;
    height: 70%;
}
.svg-scene .curve path {
    fill: transparent;
    fill-rule: evenodd;
    clip-rule: evenodd;
    stroke: rgba(255,255,255,.2);
    stroke-width: 1;
    stroke-miterlimit: 10;
}

.svg-scene .curve.curve0 path {
    stroke: #1717f4;
    stroke-width: 2;
}

#svg-scene-island-container {
	width: 547px;
	height: 249px;
	position: fixed;
	top: 21%;
	left: 43%;
	margin-left: -253.5px;
	z-index: 3;
}

@media all and (min-width: 2049px) { 
	#svg-scene-island-container {
		left: 41%;
		top: 24%;
		-webkit-transform: scale(1.65);   
		-ms-transform: scale(1.65); 
		transform: scale(1.65); 
	}	
}

@media all and (max-width: 1440px) { 
	#svg-scene-island-container {
		left: 38%;
	}	
}



.svg-scene-island {
	left: 29%;
	top: 35%;
	position: absolute;
	width: 1500px;
	height: 1000px;
}



.svg-scene-island .curve path {
    stroke: #9d9d9d;
    stroke-width: 2;
    stroke-miterlimit: 10;
}

#svg-scene-left {
	left: -25%;
	top: 35%;
}

#svg-scene-top {
	left: 35%;
	top: -40%;
	-webkit-transform: scaleX(1.25);   
	-ms-transform: scaleX(1.25); 
	transform: scaleX(1.25); 
}

#svg-scene-right {
	right: -15%;
	top: 25%;
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

@media all and (min-width: 1400px) {
		
	#svg-scene-left {
		left: -10%;
		top: 35%;
	}

	#svg-scene-top {
		left: 45%;
		top: -33%;
	}

	#svg-scene-right {
		right: -10%;
		top: 23%;
	}
}


@media all and (min-width: 2049px) {
		
	#svg-scene-left {
		left: -5%;
		top: 32%;
	}

	#svg-scene-top {
		left: 45%;
		top: -23%;
	}

	#svg-scene-right {
		right: -5%;
		top: 20%;
	}
}



#svg-scene-island1 {
	top: calc( 35% - 13px );
}

#svg-scene-island2 {
	top: calc( 35% - 28px );
}
#svg-scene-island3 {
	top: calc( 35% - 40px );
}
#svg-scene-island4 {
	top: calc( 35% - 46px );
}
#svg-scene-island5 {
	top: calc( 35% - 59px );
}


#svg-scene-island6 {
	top: calc( 18% - 118px );
	left: calc( 22% - 148px );
	-webkit-transform: scale(.72);   
	-ms-transform: scale(.72); 
	transform: scale(.72); 
}



#svg-scene-island7,
#svg-scene-island8 {
	top: calc( 18% - 92px );
	left: calc( 22% - 10px );
	-webkit-transform: scale(.8);   
	-ms-transform: scale(.8); 
	transform: scale(.8); 
}



@media all and (max-width: 768px) {
	#svg-scene-island-container {
		width: 95%;
		height: 95%;
		top: 21%;
		left: 0;
		margin-left: auto;
		display: none;
	}	
	

}



/* 31.3 Svg border effect for loader */

#svg-scene-island0  {
	stroke-dasharray: 1000;
	stroke-dashoffset: 200;
	-webkit-animation: scene-border-pre 4s linear infinite forwards; /* Chrome, Opera 15+, Safari 5+ */
	animation: scene-border-pre 4s linear infinite forwards; /* Chrome, Firefox 16+, IE 10+, Opera */
	z-index: 100011;
	position: fixed;
	width: 500px;
	height: 400px;
	/* Vertical Center */
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);

}

@media all and (max-width: 768px) {
	#svg-scene-island0  {
		-webkit-transform: scale(.75);   
		-ms-transform: scale(.75);   
		transform: scale(.75);  
		left: -10%;
	}
	
}

@-webkit-keyframes scene-border-pre {
	from {
		stroke-dashoffset: 2000;
	}

	to {
		stroke-dashoffset: 0;
	}
}

	
@keyframes scene-border-pre {
	from {
		stroke-dashoffset: 2000;
	}

	to {
		stroke-dashoffset: 0;
	}
}


/* 31.4 Svg target effect*/

.scene-target-holder {
    width: 50px;
    height: 50px;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100008;
	opacity: 0;
	-moz-transition: 2s ease-in-out; 
	-o-transition: 2s ease-in-out;
	-webkit-transition: 2s ease-in-out; 
	transition: 2s ease-in-out;
	color: #fff;
	font-weight: 600;
}
.scene-target-holder.active {
	opacity: 1;
}

.scene-target-holder .scene-target-info {
	font-weight: 400;
	position: fixed;
	z-index: 99999;
    left: 0;
    top: 0;
	-moz-transition: .1s ease-in-out; 
	-o-transition: .1s ease-in-out;
	-webkit-transition: .1s ease-in-out; 
	transition: .1s ease-in-out;
	width: 300px;
	height: 0;
	font-size: 0.75rem;
	border-left: 1px solid rgba(255,255,255,.3);
	padding-left: 1rem;
	margin-top: -72px;
	margin-left: 32px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
}

.scene-target-holder:hover .scene-target-info {
	height: 70px;
}

.scene-target-holder .scene-target-info h3,
.scene-target-holder .scene-target-info p {
	color: #fff;
	font-size: 0.75rem;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	-moz-transition: .1s ease-in-out; 
	-o-transition: .1s ease-in-out;
	-webkit-transition: .1s ease-in-out; 
	transition: .1s ease-in-out;
	opacity: 0;

}

.scene-target-holder .scene-target-info p {
	color: #CFCFCF;
}

.scene-target-holder:hover .scene-target-info h3,
.scene-target-holder:hover .scene-target-info p {
	-webkit-animation: scene-target-info-show .2s ease-in-out 1 forwards; /* Chrome, Opera 15+, Safari 5+ */
	animation: scene-target-info-show .2s ease-in-out 1 forwards; /* Chrome, Firefox 16+, IE 10+, Opera */
}

.scene-target-holder:hover .scene-target-info p:nth-child(2) {
    -webkit-animation-delay: .1s;
	animation-delay: .1s;
}
.scene-target-holder:hover .scene-target-info p:nth-child(3) {
    -webkit-animation-delay: .2s;
	animation-delay: .2s;
}

@-webkit-keyframes scene-target-info-show {
	from {
		-webkit-transform: translate(0, 5px);
		-ms-transform: translate(0, 5px);
		transform: translate(0, 5px);
		opacity: 0;
	}

	to {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0);
		opacity: 1;
	}
}

	
@keyframes scene-target-info-show {
	from {
		-webkit-transform: translate(0, 5px);
		-ms-transform: translate(0, 5px);
		transform: translate(0, 5px);
		opacity: 0;
	}

	to {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0);
		opacity: 1;
	}
}


.scene-target-holder:hover .scene-target-info {
	color: #0000ff;
}
.scene-target-holder:hover .scene-target-info h3 {
	color: #fff;
}

.scene-target-holder .scene-target-pulse {
    width: 10px;
    height: 10px;
    border: 5px solid #fff;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #fff;
	position: fixed;
	z-index: 99998;
    left: 15px;
    top: 15px;
	-moz-transition: .1s ease-in-out; 
	-o-transition: .1s ease-in-out;
	-webkit-transition: .1s ease-in-out; 
	transition: .1s ease-in-out;
	-webkit-animation: scene-pulse-d 1.5s linear infinite alternate; /* Chrome, Opera 15+, Safari 5+ */
	animation: scene-pulse-d 1.5s linear infinite alternate; /* Chrome, Firefox 16+, IE 10+, Opera */
	opacity: .5;

}

.scene-target-holder:hover .scene-target-pulse {
	background-color: #1717f4;
	border-color: #1717f4;
	-webkit-transform: scale(1.15);   
	-ms-transform: scale(1.15); 
	transform: scale(1.15); 
}

.scene-target-holder .scene-target-dot,
.scene-target-holder .scene-target-dot2 {
    border: 1px solid #fff;
    background: transparent;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    height: 60px;
    width: 60px;
    -webkit-animation: scene-pulse 1.6s ease-out;
    animation: scene-pulse 1.6s ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
	position: fixed;
	z-index: 99998;
    top: -10px;
    left: -10px;
    z-index: 1;
    opacity: 0;
}

.scene-target-holder2 .scene-target-dot {
    -webkit-animation-delay: 2.3s;
	animation-delay: 2.3s;
}

.scene-target-holder3 .scene-target-dot {
    -webkit-animation-delay: 3s;
	animation-delay: 3s;
}

.scene-target-holder4 .scene-target-dot {
    -webkit-animation-delay: 1.3s;
	animation-delay: 1.3s;
}

.scene-target-holder .scene-target-dot2 {
    -webkit-animation-delay: 2.1s;
	animation-delay: 2.1s;
}

.scene-target-holder2 .scene-target-dot2 {
    -webkit-animation-delay: 2.8s;
	animation-delay: 2.8s;
}

.scene-target-holder3 .scene-target-dot2 {
    -webkit-animation-delay: 3.5s;
	animation-delay: 3.5s;
}

.scene-target-holder4 .scene-target-dot2 {
    -webkit-animation-delay: 1.8s;
	animation-delay: 1.8s;
}


@-webkit-keyframes scene-pulse-d {
    from {
		opacity: .5;
    }

    to {
		opacity: 1;
    }
}

@keyframes scene-pulse-d {
    from {
		opacity: .5;
    }

    to {
		opacity: 1;
    }
}



@-webkit-keyframes scene-pulse {
    0% {
		-webkit-transform: scale(0);   
		-ms-transform: scale(0); 
		transform: scale(0); 
        opacity: 0.0;
    }

    25% {
		-webkit-transform: scale(0);   
		-ms-transform: scale(0); 
		transform: scale(0); 
        opacity: 0.1;
    }

    50% {
		-webkit-transform: scale(.2);   
		-ms-transform: scale(.2); 
		transform: scale(.2); 
        opacity: 0.3;
    }

    75% {
		-webkit-transform: scale(.5);   
		-ms-transform: scale(.5); 
		transform: scale(.5); 
        opacity: 0.5;
    }

    100% {
		-webkit-transform: scale(1);   
		-ms-transform: scale(1); 
		transform: scale(1); 
        opacity: 0.0;
    }
}

@keyframes scene-pulse {
    0% {
		-webkit-transform: scale(0);   
		-ms-transform: scale(0); 
		transform: scale(0); 
        opacity: 0.0;
    }

    25% {
		-webkit-transform: scale(0);   
		-ms-transform: scale(0); 
		transform: scale(0); 
        opacity: 0.1;
    }

    50% {
		-webkit-transform: scale(.2);   
		-ms-transform: scale(.2); 
		transform: scale(.2); 
        opacity: 0.3;
    }

    75% {
		-webkit-transform: scale(.5);   
		-ms-transform: scale(.5); 
		transform: scale(.5); 
        opacity: 0.5;
    }

    100% {
		-webkit-transform: scale(1);   
		-ms-transform: scale(1); 
		transform: scale(1); 
        opacity: 0.0;
    }
}

/* 31.5 Stopwatch */
#scene-stopwatch {
	color: #fff;
	font-size: 0.75rem;
	position: fixed;
	left: 50%;
	top: 30%;
	margin-left: -20px;
	color: #fff;
	z-index: 99998;
	width: 66px;
	overflow: hidden;
	text-indent: -22px;
	letter-spacing: 2px;
	opacity: 0;
	-moz-transition: 2s ease-in-out; 
	-o-transition: 2s ease-in-out;
	-webkit-transition: 2s ease-in-out; 
	transition: 2s ease-in-out;
}
.page #scene-stopwatch {
	color: #434343;
	top: calc(30% - 30px );
	position: absolute;
	display: none;
}

@media all and (max-width: 768px) {
	
	.page #scene-stopwatch {
		display: none;
	}
	
}


#scene-stopwatch.active {
	opacity: 1;
}

/* 31.6 Scene Line */
.scene-line {
	position: fixed;
	z-index: 3;
	top: 0;
	left: 50%;
	width: 3px;
	height: 0;
	background: #fff;
	-moz-transition: 2s ease-in-out; 
	-o-transition: 2s ease-in-out;
	-webkit-transition: 2s ease-in-out; 
	transition: 2s ease-in-out;	
}

.page .scene-line {
	background: #434343;
}

.scene-line.active {
	height: 150px;
}


.scene-line-top {
	top: -50px;
}

.page .scene-line-top {
	position: absolute;
	display: none;
}

@media all and (max-width: 1440px) {

	.page .scene-line-top {
		top: -15%;;
	}
	
}

@media all and (max-width: 768px) {
	
	.scene-line-top {
		top: 0;
	}
	.page .scene-line-top {
		top: -10%;;
	}
	
}

@media screen and (max-width: 480px) {
	.page .scene-line-top {
		display: none;
	}
	
}


.scene-line-bottom {
	top: auto;
	bottom: -80px;
}




/* 31.7 Music Bar */
#scene-music-bars,
#scene-music-bars-line {
	position: fixed;
	left: 50%;
	bottom: 26%;
	z-index: 100008;
	opacity: 0;
	-moz-transition: 2s ease-in-out; 
	-o-transition: 2s ease-in-out;
	-webkit-transition: 2s ease-in-out; 
	transition: 2s ease-in-out;	
}

@media all and (max-width: 768px) {

	#scene-music-bars,
	#scene-music-bars-line {
		display: none;
	}

}



#scene-music-bars {
	margin-left: -30px;
	cursor: pointer;
}

#scene-music-bars-line {
	width: 252px;
	height: 1px;
	background: #fff;
	margin-left: -130px;
	margin-bottom: 20px;
}

#scene-music-bars.active,
#scene-music-bars-line.active {
	opacity: 1;
}

#scene-music-bars span {
	background-color: #fff;
	display: block;
	width: 1px;
	float: left;
	margin-right: 14px;
}


/* 31.8 Locate */
.locate,
.locate-line,
.locate-coordinate {
	background: url(../images/locate.svg) no-repeat;
	color: #1717f4;
	display: block;
	width: 13px;
	height: 7px;
	position: absolute;
	left: 44%;
	top: 49%;
	z-index: 100008;
	-moz-transition: .5s ease-in-out; 
	-o-transition: .5s ease-in-out;
	-webkit-transition: .5s ease-in-out; 
	transition: .5s ease-in-out;
	opacity: 0;
}

@media all and (max-width: 768px) {
	
	.locate,
	.locate-line,
	.locate-coordinate {
		display: none;
	}	
}


.locate {
	margin-top: 61px;
	margin-left: 67px;
}

.locate-coordinate {
	background: none;
	width: 200px;
	color: #fff;
	font-size: 0.75rem;
	margin-left: -153px;
	margin-top: -14px;
	text-align: right;
}
.locate-line {
	height: 75px;
	width: 1px;
	background: #fff;
	margin-top: -14px;
	margin-left: 73px;
}

.locate.active,
.locate-line.active,
.locate-coordinate.active{
	-webkit-animation: locate-show .2s linear 1 forwards; /* Chrome, Opera 15+, Safari 5+ */
	animation: locate-show .2s linear 1 forwards; /* Chrome, Firefox 16+, IE 10+, Opera */
}


.locate.active {
    -webkit-animation-delay: 3.5s;
	animation-delay: 3.5s;
}

.locate-line.active {
    -webkit-animation-delay: 3.8s;
	animation-delay: 3.8s;
}

.locate-coordinate.active {
    -webkit-animation-delay: 4.1s;
	animation-delay: 4.1s;
}


@-webkit-keyframes locate-show {
	0%   {
		top: 35%;
		opacity: 0;
	}
	100% {
		top: 40%;
		opacity: 1;
	}
}
@keyframes locate-show {
	0%   {
		top: 35%;
		opacity: 0;
	}
	100% {
		top: 40%;
		opacity: 1;
	}
}


/* ====================================================== 
   32. Sub Page
/* ====================================================== */
/* 32.1 General Stylesheets */

.page .page-placeholder {
	height: 8rem;
}

.page-title-container {
	opacity: 0;
	-moz-transition: .5s ease-in-out; 
	-o-transition: .5s ease-in-out;
	-webkit-transition: .5s ease-in-out; 
	transition: .5s ease-in-out;
	padding-bottom: 8rem;
	margin-top: -3rem;
}

.page .page-title-container {
	-moz-transition: none; 
	-o-transition: none; 
	-webkit-transition: none; 
	transition: none; 
}

.page-title-container.active {
	opacity: 1;
}


.page-title-container .col-md-12 h3 {
	padding-top: 3rem;
}

.page-title-container .col-md-12 .dividing-line {
	background: #CACACA;
	height: 1px;
	width: 45px;
	margin: 0 auto;
}

.page-content-title {
	padding: 3rem 0;
}

.page-content-title.detail {
	padding: 3rem 15px;
}

.page-content-title .dividing-line {
	width: 44px;
	height: 1px;
	background: #bebebe;
	margin: 0 auto;
	margin-bottom: 2rem;
}

.page-content-title.page-content-title-con {
	padding: 3rem 15px 3rem;
}

#page-title {
	opacity: 0;
	-moz-transition: .5s ease-in-out; 
	-o-transition: .5s ease-in-out;
	-webkit-transition: .5s ease-in-out; 
	transition: .5s ease-in-out;	
	width: 379px;
	margin: 0 auto;
	position: relative;
	z-index: 10;
	margin-top: -4.125rem;
	
}

.page #page-title {
	-moz-transition: none; 
	-o-transition: none; 
	-webkit-transition: none; 
	transition: none; 
}


#page-title.active {
	opacity: 1;
}

#page-title .page-scroll-line {
	width: 379px;
	height: 70px;
	position: relative;
	margin: 20px 0;
}

#page-title .page-scroll-line:first-child {
	display: none;
}


#page-title .page-scroll-line:after {
	content: '';
	display: block;
	position: absolute;
	background: #1717f4;
	height: 70px;
	width: 1px;
	left: 189px;
	-moz-transition: .1s ease-in-out; 
	-o-transition: .1s ease-in-out;
	-webkit-transition: .1s ease-in-out; 
	transition: .1s ease-in-out;

}

#page-title .page-scroll-line:nth-child(1):after {
	-webkit-animation: moveline 1.5s linear infinite alternate; /* Chrome, Opera 15+, Safari 5+ */
	animation: moveline 1.5s linear infinite alternate; /* Chrome, Firefox 16+, IE 10+, Opera */	
}



@-webkit-keyframes moveline {
	0%   { 
		-webkit-transform: translate(0, -20px);
		-ms-transform: translate(0, 2-0px);
		transform: translate(0, -20px);
	}
	100% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}
@keyframes moveline {
	0%   { 
		-webkit-transform: translate(0, -20px);
		-ms-transform: translate(0, -20px);
		transform: translate(0, -20px);
	}
	100% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

.page-info {
	text-transform: uppercase;
	color: #A3A2A2;
}
/* 32.2 Page Sub Menu */

.page-nav {
	border-bottom: 2px solid #F1F1F1;
	position: relative;
	height: 72px;
	z-index: 10;
}

.page-nav li span {
	display: block;
	font-size: 0.875rem;
}


@media all and (max-width: 768px) {
	.page-nav > div {
		padding-left: 0;
	}	
}




.page-nav ul,
.page-nav li {
	display: block;
	height: 70px;
}

.page-nav ul {
	width: 100%;
	text-align: center; /*require*/
}

.page-nav li {
	display: block;
	display: inline-block; /*require*/
	float: none;
	font-size: 1.25rem;
	text-align: center;
	width: 135px;
	overflow: hidden;
	
}

@media all and (max-width: 768px) {
	.page-nav li {
		width: 105px;

	}	
	
}

.page-nav li.active {
	-webkit-box-shadow: 0 2px 0 #1717f4;
	-moz-box-shadow: 0 2px 0 #1717f4;
	box-shadow: 0 2px 0 #1717f4;	
}



.page-nav-small ul,
.page-nav-small li {
	display: block;
}

.page-nav-small li {
	display: inline-block;
	font-size: 0.75rem;
	text-align: center;
	padding: .1rem 1.825rem;
	position: relative;
	
}

.page-nav-small li.active {
	background: #1717f4;
	color: #fff;
}

.page-nav-small li.active a {
	color: #fff;
}


.page-nav-small li ul {
	min-width: 80px;
	padding: .5rem .5rem 1rem;
	display: none;
	position: absolute;
	left: 0;
	z-index: 1;
	margin-left: -.6rem;
	padding-top: 1.5rem;
	background: #fff;
	-webkit-box-shadow: 0px 19px 70px -25px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 19px 70px -25px rgba(0,0,0,0.5);
	box-shadow: 0px 19px 70px -25px rgba(0,0,0,0.5);
}
.page-nav-small .page-nav-arrow {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	right: .5rem;
	z-index: 3;
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #000;
}



/*  32.3 Map & Contact */
.map-locate,
.contact-info {
	position: absolute;
	top: 168px;
	left: 644px;
	z-index: 3;
	-moz-transition: .1s ease-in-out; 
	-o-transition: .1s ease-in-out;
	-webkit-transition: .1s ease-in-out; 
	transition: .1s ease-in-out;
}

.contact-info-container {
	margin-top: 10rem;
	
}
.contact-info {
	left: 70px;
	top: -150px;
	width: 420px;
	padding: 3rem;
	background: #fff;
	-webkit-box-shadow: 0px 19px 70px -25px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 19px 70px -25px rgba(0,0,0,0.5);
	box-shadow: 0px 19px 70px -25px rgba(0,0,0,0.5);
}


@media all and (max-width: 768px) {
	
	.map-locate {
		display: none;
	}
	
	.contact-info-container {
		margin-top: 3rem;

	}
	.contact-info {
		left: 0;
		top: 0;
		width: 100%;
		padding: 3rem;
		position: relative;
	}
	
}

/* 32.4 Team Focus */
.team-focus-container {
	
}

.team-thumb-container {

}

.team-thumb-container .portfolio-item:first-child {
	display: none;
}
.team-thumb-container .portfolio-item .image {
	width: 85%;
	height: 300px;
}


.team-focus-container .avatar img {

}


.team-focus-container .avatar-detail {
	font-size: 0.875rem;
	padding-right: 25px;

	
}


.team-focus-container .avatar-detail > .info {
	padding: 0 4rem;
}

.team-focus-container .avatar-detail .im {
	background: #f3f3f3;
	padding: .2rem 1rem;
	width: 100%;
	margin-top: 1.5rem;
}


@media all and (max-width: 768px) {

	.team-focus-container .avatar-detail {
		padding-top: 1rem;
		position: relative;
		right: auto;
		/* Vertical Center */
		top: auto;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}	
	
	.team-focus-container .avatar-detail > .info {
		padding: 0;
	}
	

	.team-focus-container .avatar-detail .im {
		padding: 1rem;
		width: 100%;
		margin-left: auto;
		margin-top: 1.5rem;
	}

	
}



.team-focus-container .avatar-detail .dividing-line {
	content: '';
	display: block;
	position: absolute;
	background: #1717f4;
	height: 107px;
	width: 107px;
	left: 0;
	-moz-transition: .8s ease-in-out; 
	-o-transition: .8s ease-in-out;
	-webkit-transition: .8s ease-in-out; 
	transition: .8s ease-in-out;
	z-index: 1;
	display: none;
}
.team-focus-container .avatar-detail .dividing-line:after {
	content: '';
	display: block;
	position: absolute;
	background: #fff;
	height: 65px;
	width: 1px;
	left: 50%;
	margin-top: 30px;
	-moz-transition: .8s ease-in-out; 
	-o-transition: .8s ease-in-out;
	-webkit-transition: .8s ease-in-out; 
	transition: .8s ease-in-out;
	z-index: 2;
	
}



.team-focus-container .avatar-detail .dividing-line:after {
	-webkit-animation: moveline 1.5s linear infinite alternate; /* Chrome, Opera 15+, Safari 5+ */
	animation: moveline 1.5s linear infinite alternate; /* Chrome, Firefox 16+, IE 10+, Opera */	
}



@-webkit-keyframes moveline {
	0%   { 
		-webkit-transform: translate(0, -20px);
		-ms-transform: translate(0, 2-0px);
		transform: translate(0, -20px);
	}
	100% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}
@keyframes moveline {
	0%   { 
		-webkit-transform: translate(0, -20px);
		-ms-transform: translate(0, -20px);
		transform: translate(0, -20px);
	}
	100% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

/* 32.5 Artist */
.artist-single {
	margin-bottom: 5rem;
	
}

.artist-single .detail {
	padding: 1rem;
	position: relative;
}

.artist-single .mask1,
.artist-single .mask2  {
	background: rgba(243,243,243,.6);
	display: block;
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	-moz-transition: .1s ease-in-out; 
	-o-transition: .1s ease-in-out;
	-webkit-transition: .1s ease-in-out; 
	transition: .1s ease-in-out;
	opacity: 0;
}

.artist-single .line1,
.artist-single .line2 {
	display: block;
	content: '';
	position: absolute;
	width: 1px;
	height: 40px;
	background: #fff;
	z-index: 3;
	left: 50%;
	top: 20%;
	-moz-transition: .1s ease-in-out; 
	-o-transition: .1s ease-in-out;
	-webkit-transition: .1s ease-in-out; 
	transition: .1s ease-in-out;
	opacity: 0;

}
.artist-single:hover .line1,
.artist-single:hover .line2 {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	opacity: 0;

}

.artist-single .intro {
	display: block;
	width: 100%;
	position: absolute;
	text-align: center;
	left: 0;
	/* Vertical Center */
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	padding: 2rem 3rem;
	z-index: 3;
	color: #fff;
	font-size: 0.75rem;
	line-height: 1.3;
	font-weight: 600;
	-moz-transition: .1s ease-in-out; 
	-o-transition: .1s ease-in-out;
	-webkit-transition: .1s ease-in-out; 
	transition: .1s ease-in-out;
	opacity: 0;
}

.artist-single .line2 {
	top: auto;
	bottom: 20%;
}

.artist-single .mask2 {
	background: rgba(0,0,255,.8);
	-webkit-border-radius: 100%; 
	-moz-border-radius: 100%; 
	border-radius: 100%; 
	z-index: 2;
	width: calc(100% - 2rem );
	height: calc(100% - 2rem );
	margin: 1rem 0 0 1rem;
}

.artist-single img {
	-webkit-border-radius: 100%; 
	-moz-border-radius: 100%; 
	border-radius: 100%; 
	width: 100%;
}


.artist-single:hover .mask1,
.artist-single:hover .mask2,
.artist-single:hover .line1,
.artist-single:hover .line2,
.artist-single:hover .intro {
	opacity: 1;
}

.artist-single .country {
	margin: 0;
	padding: 0;
	color: #6E6E6E;
	font-size: 0.75rem;
	padding-top: 1rem;
	padding-bottom: .5rem;
}

.artist-single h3 {
	margin: 0;
	padding: 0;
	display: block;
	text-transform: uppercase;
	white-space: nowrap;
    max-width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
	font-size: 0.875rem;
}

.artist-single .flag-icon {
	margin-right: 5px;
}

/* 32.6 Exhibition Map */
.ex-map-info-right {
	border: 2px solid #000;
	padding: 1rem 3rem;
	margin: 2rem;
}

.ex-map-info-right  h3 {
	border-bottom: 2px solid #000;
}

.ex-map-info-right img {
	margin: 3rem 0;
}

.ex-map-info-right h3 span:first-child,
.ex-map-info-right h3 span:nth-child(2) {
	height: 25px;
	display: block;
	overflow: hidden;
	text-transform: uppercase;
	text-align: center;
	position: relative;
	z-index: 2;
	text-overflow: ellipsis;
	/* Required for text-overflow to do anything */
	white-space: nowrap;
}

.ex-map-info-right h3 span:nth-child(2) {
	margin-top: .3rem;
	
}

 

.ex-map-info-right h3 {
	margin-top: 15px;
	position: relative;
    font-size: 1.125rem;
	padding-top: 0.546875rem;
	height: 90px;
	
}


.ex-map-info-left  {
	position: relative;
	background: #f00;
}

.ex-map-info-left > a {
    width: 50px;
    height: 50px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	-moz-transition: 2s ease-in-out; 
	-o-transition: 2s ease-in-out;
	-webkit-transition: 2s ease-in-out; 
	transition: 2s ease-in-out;
	color: #333;
	font-weight: 600;
}

.ex-map-info-left > a .pulse {
    width: 10px;
    height: 10px;
    border: 5px solid #333;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #333;
	position: absolute;
	z-index: 3;
    left: 15px;
    top: 15px;
	-moz-transition: .1s ease-in-out; 
	-o-transition: .1s ease-in-out;
	-webkit-transition: .1s ease-in-out; 
	transition: .1s ease-in-out;
	-webkit-animation: ex-map-pulse-d 1.5s linear infinite alternate; /* Chrome, Opera 15+, Safari 5+ */
	animation: ex-map-pulse-d 1.5s linear infinite alternate; /* Chrome, Firefox 16+, IE 10+, Opera */
	opacity: .5;

}

.ex-map-info-left > a:hover .pulse {
	background-color: #6f6f6f;
	border-color: #6f6f6f;
	-webkit-transform: scale(1.15);   
	-ms-transform: scale(1.15); 
	transform: scale(1.15); 
}

.ex-map-info-left > a .dot,
.ex-map-info-left > a .dot2 {
    border: 8px solid #d6d6d6;
    background: transparent;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    height: 60px;
    width: 60px;
    -webkit-animation: ex-map-pulse 1.6s ease-out;
    animation: ex-map-pulse 1.6s ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
	position: absolute;
	z-index: 3;
    top: -10px;
    left: -10px;
    z-index: 1;
    opacity: 0;
}

.ex-map-info-left > a .dot {
    -webkit-animation-delay: 2.3s;
	animation-delay: 2.3s;
}

.ex-map-info-left > a .dot {
    -webkit-animation-delay: 3s;
	animation-delay: 3s;
}

.ex-map-info-left > a .dot {
    -webkit-animation-delay: 1.3s;
	animation-delay: 1.3s;
}

.ex-map-info-left > a .dot2 {
    -webkit-animation-delay: 2.1s;
	animation-delay: 2.1s;
}

.ex-map-info-left > a .dot2 {
    -webkit-animation-delay: 2.8s;
	animation-delay: 2.8s;
}

.ex-map-info-left > a .dot2 {
    -webkit-animation-delay: 3.5s;
	animation-delay: 3.5s;
}

.ex-map-info-left > a .dot2 {
    -webkit-animation-delay: 1.8s;
	animation-delay: 1.8s;
}


@-webkit-keyframes ex-map-pulse-d {
    from {
		opacity: .5;
    }

    to {
		opacity: 1;
    }
}

@keyframes ex-map-pulse-d {
    from {
		opacity: .5;
    }

    to {
		opacity: 1;
    }
}



@-webkit-keyframes ex-map-pulse {
    0% {
		-webkit-transform: scale(0);   
		-ms-transform: scale(0); 
		transform: scale(0); 
        opacity: 0.0;
    }

    25% {
		-webkit-transform: scale(0);   
		-ms-transform: scale(0); 
		transform: scale(0); 
        opacity: 0.1;
    }

    50% {
		-webkit-transform: scale(.2);   
		-ms-transform: scale(.2); 
		transform: scale(.2); 
        opacity: 0.3;
    }

    75% {
		-webkit-transform: scale(.5);   
		-ms-transform: scale(.5); 
		transform: scale(.5); 
        opacity: 0.5;
    }

    100% {
		-webkit-transform: scale(1);   
		-ms-transform: scale(1); 
		transform: scale(1); 
        opacity: 0.0;
    }
}

@keyframes ex-map-pulse {
    0% {
		-webkit-transform: scale(0);   
		-ms-transform: scale(0); 
		transform: scale(0); 
        opacity: 0.0;
    }

    25% {
		-webkit-transform: scale(0);   
		-ms-transform: scale(0); 
		transform: scale(0); 
        opacity: 0.1;
    }

    50% {
		-webkit-transform: scale(.2);   
		-ms-transform: scale(.2); 
		transform: scale(.2); 
        opacity: 0.3;
    }

    75% {
		-webkit-transform: scale(.5);   
		-ms-transform: scale(.5); 
		transform: scale(.5); 
        opacity: 0.5;
    }

    100% {
		-webkit-transform: scale(1);   
		-ms-transform: scale(1); 
		transform: scale(1); 
        opacity: 0.0;
    }
}


/* ====================================================== 
   33. List Modules
/* ====================================================== */
/* 33.1 List of Post  */

.list-topic-container {
	
}

.list-topic-item {
	position: relative;
	margin-bottom: 4.8125rem;
}

.list-topic-item.style-2 {
	margin-bottom: 0;
}

@media all and (max-width: 768px) {

	.list-topic-item {
		margin-bottom: 3rem;
	}

}




.list-topic-item .gallery-caption {
	display: none;
}


.list-topic-item .list-topic-item-audio {
	position: relative;
	z-index: 1;
}

.list-topic-item .list-topic-item-img iframe {
	max-width: 100% !important;
	max-height: 300px !important;
}


.list-topic-item .list-normal ul,
.list-topic-item .list-normal ol {
	line-height: inherit !important;
	
}
.list-topic-item:not(.post-blockquote) blockquote{
	font-size: inherit;
    padding: 1em;
	margin: 1em 0;
	border-left-width: 3px;
	line-height: inherit;
    quotes: none;
}

.list-topic-item:not(.post-blockquote) blockquote:before {
	display: none;
}


.list-topic-item .list-topic-item-info h1,
.list-topic-item .list-topic-item-info h2,
.list-topic-item .list-topic-item-info h3,
.list-topic-item .list-topic-item-info h4,
.list-topic-item .list-topic-item-info h5,
.list-topic-item .list-topic-item-info h6 {
	font-family: inherit;
	font-weight: 600;
}
.list-topic-item .list-topic-item-info h1 {
	font-size: 2.4609375rem;
	line-height: 1.15555556;
}
.list-topic-item .list-topic-item-info h2 {
	font-size: 1.75rem;
	line-height: 1.421875;
}
.list-topic-item .list-topic-item-info h3 {
	font-size: 1.25rem;
	line-height: 1.625;
}

.list-topic-item .list-topic-item-info .page-link a {
	display: inline-block;
	padding: .2625rem;
}


.list-topic-item .list-topic-item-info {
	margin-top: 4.5rem;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
	background: #fff;
	margin-left: -4.5rem;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	-moz-transition: .8s ease-in-out; 
	-o-transition: .8s ease-in-out;
	-webkit-transition: .8s ease-in-out; 
	transition: .8s ease-in-out;

}

.list-topic-item.style-2 .list-topic-item-info {
	padding-top: .5rem;
	padding-bottom: 1rem;
	margin-top: 1.3rem;

}

.list-topic-item:hover .list-topic-item-info {
	background: #F3F3F3;
	margin-left: -7.5rem;
}






.list-topic-item.style-2 .list-topic-item-info .col-md-7 .col-md-5,
.list-topic-item.style-2 .list-topic-item-info .col-md-7 .col-md-7 {
	padding-top: 1.625rem;
}

@media all and (max-width: 768px) {
	.list-topic-item.style-2 .list-topic-item-info .col-md-7 .col-md-5,
	.list-topic-item.style-2 .list-topic-item-info .col-md-7 .col-md-7 {
		margin-left: -2rem;
	}
	
}

.list-topic-item .list-topic-item-img {
	margin-top: 1.75rem;
}

.list-topic-item.style-2 .list-topic-item-img {
	width: 250px;
	height: 100px;
	overflow: hidden;
}

.list-topic-item.style-2 .list-topic-item-img img {
	
	height: 100px;
}

.list-topic-item.style-2 .tags-box {
	display: none;
}

@media all and (max-width: 768px) {
	
	
	.list-topic-item .list-topic-item-info {
		padding-top: 0.2rem;
		background: none;
		margin-left: auto;
	}

	
	.list-topic-item .list-topic-item-info,
	.list-topic-item .list-topic-item-img {
		margin-top: 0.875rem;
	}
	
	
	
}
    

.list-topic-item a {
	color: #212121 !important;
}


.list-topic-item h3 span:first-child,
.list-topic-item h3 span:nth-child(2) {
	height: 25px;
	display: block;
	text-transform: uppercase;
	position: relative;
	z-index: 2;
	text-align: left;
}


.list-topic-item h3 {
	margin-top: 15px;
	position: relative;
    font-size: 1.125rem;
	padding-top: 0.546875rem;
	height: 70px;
	font-size: 1.125rem !important;
	
}

.list-topic-item.style-2 h3 {
	padding-left: 5rem;
}

.list-topic-item.style-2 .row > .col-md-4 a {
	height: 450px;
	overflow: hidden;
}

.list-topic-item.style-2 .row > .col-md-4 a img {
	width: 80%;
}

.list-topic-item a:hover h3 {
	color: #1717f4;
}

.list-topic-item.style-2 .detail p {
	padding-right: 3rem;
	padding-top: 1rem;
}


.list-topic-item h3 span:nth-child(2) {
    font-size: 0.875rem;
	padding-top: 5px;
	display: block;
	text-transform: uppercase;
}

.list-topic-item .dividing-line {
	float: left;
	height: 2px;
	width: 60px;
	background: #333;
	margin: 30px auto 10px;
	position: relative;
	z-index: 2;
	-moz-transition: .8s ease-in-out; 
	-o-transition: .8s ease-in-out;
	-webkit-transition: .8s ease-in-out; 
	transition: .8s ease-in-out;

	
}

.list-topic-item.style-2 .dividing-line {
	position: absolute;
	width: 2px;
	height: 45px;
	top: .5rem;
	left: 1.3rem;
}

.list-topic-item.style-2:hover .dividing-line {
	height: 80px;
	left: 2.5rem;
	top: -.5rem;
	background: #1717f4;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}




.list-topic-item a {
	display: block;
}

.list-topic-item p { 
	color: #6E6E6E;
	margin: 0;
	padding: 0;
	line-height: 1.7;
	position: relative;
	z-index: 2;
	font-size: 0.875rem;
	text-align: left;
}

.list-topic-item.style-2 p { 
	padding-left: 1.675rem;
}

@media all and (max-width: 768px) {
	.list-topic-item.style-2 p { 
		padding-left: 6rem;
	}

	
}

.list-topic-item a.more { 
	font-size: 0.75rem;
	position: relative;
	padding-left: 1.5rem;
	display: inline-block;
	margin-top: 3.5rem;
	z-index: 3;
	text-transform: uppercase;
}

.list-topic-item:hover a.more {
	color: #fff !important;
}


@media all and (max-width: 768px) {

	.list-topic-item a.more { 
		margin-top: auto;
	}	
	
}

.list-topic-item a.more:after,
.list-topic-item a.more:before {
	content: '';
	display: block;
	height: 35px;
	width: 1px;
	background: #333;
	margin: 10px auto;
	position: absolute;
	left: -30px;
	top: -17px;
	z-index: 3;
	-moz-transition: .8s ease-in-out; 
	-o-transition: .8s ease-in-out;
	-webkit-transition: .8s ease-in-out; 
	transition: .8s ease-in-out;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);

}
.list-topic-item a.more:before {
	left: -20px;
}


.list-topic-item:hover a.more:after,
.list-topic-item:hover a.more:before  {
	background: #1717f4;
	
}


.list-topic-item .more-container {
	overflow: hidden;
}

.list-topic-item .more-bg {
	background: #1717f4;
	position: absolute;
	right: -200px;
	top: 69%;
	z-index: 1;
	-moz-transition: .8s ease-in-out; 
	-o-transition: .8s ease-in-out;
	-webkit-transition: .8s ease-in-out; 
	transition: .8s ease-in-out;
	width: 130px;
	height: 35px;
	-webkit-transform: rotate(0) skew(-45deg);
	-ms-transform: rotate(0) skew(-45deg);
	transform: rotate(0) skew(-45deg);
}
.list-topic-item:hover .more-bg {
    right: -30px;
	
}
   
/* 33.2 List of Split */
.list-split-container {
	
}
.list-split-item {
	position: relative;
	margin-bottom: 4.8125rem;
}

.list-split-item.even .col-sm-6:first-child {
	float: right;
}

.list-split-item.even .col-sm-6:nth-child(2) {
	float: left;
}


@media all and (max-width: 768px) {

	.list-split-item {
		margin-bottom: 3rem;
	}

}



.list-split-item .list-split-item-info {
    position: absolute;
	right: 0;
	/* Vertical Center */
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}


.list-split-item.even .list-split-item-info {
	right: auto;
	left: 0;
}

.list-split-item .list-split-item-info p {
	font-size: 0.875rem;
}

.list-split-item .list-split-item-info > div {
	padding: 0 0;
}

.list-split-item .list-split-item-info > div {
	margin-right: -30px;
	padding: 15px;
}


.list-split-item.even .list-split-item-info > div {
	margin-left: -30px;
	margin-right: auto;
	padding: 15px;
}


@media all and (max-width: 768px) {

	.list-split-item .list-split-item-info {
		padding-top: 1rem;
		position: relative;
		right: auto;
		/* Vertical Center */
		top: auto;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}	
	

	.list-split-item.even .list-split-item-info {
		left: auto;
	}

	
	.list-split-item.even .list-split-item-info > div,
	.list-split-item .list-split-item-info > div {
		padding: 0;
		margin: 0;
	}
	
}


h3 span {
	font-size: 1rem;
}

.detail-en {
	display: inline-block;
	font-size: 12px !important;
	text-transform: capitalize !important;
	font-weight: normal !important;
	margin-left: .2rem;
}

@media all and (max-width: 768px) {
	.page-media-page .col-md-4,
	.page-media-page .col-md-8 {
		width: 100% !important;
	}
	
	.page-media-page .col-md-4 img {
		width: 180px !important;
	}
}

.page-report .col-md-7 h3 span:first-child {
	overflow: hidden;
}