/*

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


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

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


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

	
	
*/


/* ====================================================== 
   1. Basic                               
/* ====================================================== */
/* 1.1. Reset Stylesheets */
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #868e96;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #868e96;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 480px; /* max-width */
    --breakpoint-md: 768px; /* max-width */
    --breakpoint-lg: 991px; /* max-width */
    --breakpoint-xl: 1300px; /* Only new XL container, min-width */
    --spacing: 1rem;
  }
  
  
  
  ::selection {
      background: #1f1f1f;
      color: #fff;
  }
  
  ::-moz-selection {
      background: #1f1f1f;
      color: #fff;
  }
  
  ::-webkit-selection {
      background: #1f1f1f;
      color: #fff;
  }
  
  
  html,
  body{
      width: 100%;
      height: 100%;
  }
  
  html {
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      font-size: 16px; /* Required, global font size */
  }
  
  *,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  a {
      margin: 0;
      padding: 0;
  }
  
  body {
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.71428571429;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-family: 'Microsoft YaHei','Helvetica Neue',Helvetica, STXihei, 'PingFang SC','Hiragino Sans GB',Arial,sans-serif;
      color: #212121;
  }
  
  
  :active,
  :focus { 
      outline: none !important; 
  }
  
  p,
  ul,
  ol,
  pre,
  table,
  blockquote {
      margin-bottom: 0;
  }
  
  ul,
  ol {
      list-style: none;
  }
  
  ul > li,
  ol > li {
      margin-bottom: 0;
  }
  
  ul.list-normal,
  ol.list-normal,
  .list-normal ul,
  .list-normal ol {
      display: block;
      list-style-type: disc;
      margin: 1.421875rem;
      padding-left: 0.875rem;
  }
  
  ul.list-normal,
  .list-normal ul {
      list-style-type: disc;
  }
  
  ol.list-normal,
  .list-normal ol {
      list-style-type: decimal;
  }
  
  
  
  ul.list-normal ul,
  ul.list-normal ol,
  ol.list-normal ul,
  ol.list-normal ol,
  .list-normal ul ul,
  .list-normal ul ol,
  .list-normal ol ul,
  .list-normal ol ol {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
  }
  
  
  
  .table-normal table, 
  .table-normal table td, 
  .table-normal table th,
  table.table-normal, 
  table.table-normal td, 
  table.table-normal th {
      border: 1px solid black;
  }
  
  .table-normal table td, 
  .table-normal table th,
  table.table-normal td, 
  table.table-normal th {
      padding: 0.6875rem;
  }
  
  .table-normal table,
  table.table-normal {
      border-collapse: collapse;
      width: 100%;
  }
  
  .table-normal table th,
  table.table-normal th {
      text-align: left;
  }
  
  select {
      max-width: 100%;
  }
  
  blockquote {
      background: #fff;
      border: 1px solid #F8F8F8;
      border-left: 5px solid #EE6E73;
      padding: 0 1.75rem 1.25rem;
      margin-top: 1.421875rem;
      line-height: 2;
      font-size: 1rem;
  }
  
  blockquote:before {
      color: #EE6E73;
      content: open-quote;
      font-size: 5.25rem;
      line-height: 0.1;
      margin-right: 0.21875rem;
      vertical-align: -0.39375rem;
      font-family: sans-serif;
      content: "\201C"; /*Unicode for Left Double Quote*/
      
  }
  
  
  
  strong {
      font-weight: 600;
  }
  
  hr {
      margin: 1.421875rem 0;
      border-color: #F4F4F4;
  }
  
  a img {
      border: none;
  }
  
  img {
      max-width: 100%;
  }
  
  iframe {
      border: none !important;
  }
  
  /* 1.2. Bootstrap 3.x */
  /* New XL container for Bootstrap 3.x */
  @media all and (min-width: 1300px) {
          
      .container {
          width: 1272px;
      }
  
  }
  
  
  
  /* ====================================================== 
     2. Helper Classes                                
  /* ====================================================== */
  .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
  }
  
  .clearfix {
      *zoom: 1;
  }
  
  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
      line-height: 0;
  }
  
  .clearfix:after {
      clear: both;
  }
  
  
  .transition,
  .transition div.nav-previous,
  .transition div.nav-next,
  .transition img,
  .transition a,
  .transition i,
  .transition li,
  .transition span {
      -webkit-transition: all 0.3s ease 0s;
      -moz-transition: all 0.3s ease 0s;
      -ms-transition: all 0.3s ease 0s;
      transition: all 0.3s ease 0s;	
  }
  
  
  /* ====================================================== 
     3. Typography                                
  /* ====================================================== */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
      color: #212121;
      font-weight: 700;
      font-variant-ligatures: common-ligatures; /*Ligatures and contextual forms are ways of combining glyphs to produce more harmonized forms.*/
      margin-top: 0;
      margin-bottom: 0;
      padding: 0;
      -ms-word-wrap: break-word;
      word-wrap: break-word;
  }
  
  
  h1 {
      font-size: 3.5rem;
      line-height: 1.14285714286;
  }
  
  h2 {
      font-size: 2.5rem;
      line-height: 1.2;
  }
  
  h3 {
      font-size: 1.75rem;
      line-height: 1.25;
  }
  
  h4 {
      font-size: 1.25rem;
      line-height: 1.33333333333;
  }
  
  h5 {
      font-size: 1rem;
      line-height: 1.5;
      font-weight: 600;
  }
  
  h6 {
      font-size: 0.75rem;
      line-height: 2;
      font-weight: 600;
  }
  
  
  .h1 {
      font-size: 3.5rem !important;
      line-height: 1.14285714286 !important;
  }
  
  .h2 {
      font-size: 2.5rem !important;
      line-height: 1.2 !important;
  }
  
  .h3 {
      font-size: 1.75rem !important;
      line-height: 1.25 !important;
  }
  
  .h4 {
      font-size: 1.25rem !important;
      line-height: 1.33333333333 !important;
  }
  
  .h5 {
      font-size: 1rem !important;
      line-height: 1.5 !important;
      font-weight: 600 !important;
  }
  
  .h6 {
      font-size: 0.75rem !important;
      line-height: 2 !important;
      font-weight: 600 !important;
  }
  
  
  .font-normal {
      font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, STXihei, "PingFang SC", SimHei, "Microsoft Yahei";
      font-weight: 400 !important;
  }
  
  .font-uppercase {
      text-transform: uppercase !important;
  }
  
  .font-bold {
      font-weight: 800 !important;
  }
  
  .font-italic {
      font-style: italic !important;
  }
  
  .font-no-italic {
      font-style: normal !important;
  }
  
  .font-underline {
      text-decoration: underline !important;
  }
  
  
  @media all and (max-width: 768px) {
      h1 {
          font-size: 2.5rem;
          line-height: 1.15555556;
      }
  
      h2 {
          font-size: 1.75rem;
          line-height: 1.421875;
      }
  
      h3 {
          font-size: 1.25rem;
          line-height: 1.625;
      }
      
      
   
      .h1 {
          font-size: 2.5rem !important;
          line-height: 1.15555556 !important;
      }
      .h2 {
          font-size: 1.75rem !important;
          line-height: 1.421875 !important;
      }
      
      .h3 {
          font-size: 1.25rem !important;
          line-height: 1.625 !important;
      }
  
  }
  
  @media all and (max-width: 480px) {
      h1 {
          font-size: 1.25rem;
          line-height: 1.38461538462;
      }
  
      h2 {
          font-size: 1.5rem;
          line-height: 1.28571428571;
      }
  
      h3 {
          font-size: 1.25rem;
          line-height: 1.5;
      }
      
      .h1 {
          font-size: 1.25rem !important;
          line-height: 1.38461538462 !important;
      }
      .h2 {
          font-size: 1.5rem !important;
          line-height: 1.28571428571 !important;
      }
      
      .h3 {
          font-size: 1.25rem !important;
          line-height: 1.5 !important;
      }
  
  }
  
  a,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6{
      -moz-transition:.2s ease-in-out; 
      -o-transition:.2s ease-in-out; 
      -webkit-transition:.2s ease-in-out; 
      transition:.2s ease-in-out;
      
  }
  
  
  
  a {
      color: #474747;
  }
  
  a:hover,
  a:focus,
  a:active {
      color: #000;
      text-decoration: none;
      outline: none;
  }
  
  a:hover{
      
  }
  
  a:active,a:focus{
      
  }
  
  a.link {
      text-decoration: underline;
      color: #EE6E73;
  }
  
  a.link:hover {
      color: #E85254;
  }
  
  .list-normal a:not(.uix-sc-btn),
  .table-normal a:not(.uix-sc-btn) {
      color: #EE6E73;
  }
  
  .list-normal a:not(.uix-sc-btn):hover,
  .table-normal a:not(.uix-sc-btn):hover {
      color: #E85254;
      text-decoration: underline;
  }
  
  .list-normal a:not(.uix-sc-btn):hover img,
  .table-normal a:not(.uix-sc-btn):hover img {
      text-decoration: none;
  }
  
  
  
  /* ====================================================== 
     4. Spacing                                
  /* ====================================================== */
  
  section,
  .section {
      position: relative;
      z-index: 0;
  }
  
  section,
  .section,
  footer {
      padding-top: 6.5625rem;
      padding-bottom: 7.984375rem;
  }
  
  .Tmsg section{padding-top: 0px;
      padding-bottom: 0px;}
  section.space-sm,
  .section.space-sm,
  footer.space-sm {
      padding-top: 4.8125rem;
      padding-bottom: 4.8125rem;
  }
  
  
  section.space-lg,
  .section.space-lg,
  footer.space-lg {
      padding-top: 11.375rem;
      padding-bottom: 11.375rem;
  }
  
  
  section.space-none,
  .section.space-none {
      padding: 0;
  }
  
  section.space-none-top,
  .section.space-none-top {
      padding-top: 0;
  }
  
  section.space-none-bottom,
  .section.space-none-bottom {
      padding-bottom: 0;
  }
  
  section.site-google-map,
  .section.site-google-map {
      padding-top: 0;
  }
  
  
  @media all and (max-width: 768px) {
      section,
      .section,
      footer {
          padding: 4.265625rem 0;
      }
      
      
      section.space-sm,
      .section.space-sm,
      footer.space-sm {
          padding-top: 2.625rem;
          padding-bottom: 2.625rem;
      }
  
      
      section.space-lg,
      .section.space-lg,
      footer.space-lg {
          padding: 4.265625rem 0;
      }
  
      
      section.space-none,
      .section.space-none {
          padding: 0;
      }
      
      section.space-none-top,
      .section.space-none-top {
          padding-top: 0;
      }
      
      section.space-none-bottom,
      .section.space-none-bottom {
          padding-bottom: 0;
      }
      
      section.site-google-map,
      .section.site-google-map {
          padding-top: 0;
      }
      
  }
  
  
  /* ====================================================== 
     5. Form Elements                                     
  /* ====================================================== */
  /* 5.1. Controls */
  .controls {
      text-align: left;
      position: relative;
  }
  
  .controls-custom,
  .controls input[type="text"],
  .controls input[type="email"],
  .controls input[type="tel"],
  .controls input[type="password"],
  .controls input[type="url"],
  .controls input[type="search"],
  .controls textarea,
  .controls button,
  .controls select {
      width: calc(100% - 1.09375rem );
      font-size: 0.875rem;
      padding: 0.546875rem;
      border: none;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;	
      -webkit-transition: all 0.3s ease 0s;
      -moz-transition: all 0.3s ease 0s;
      -ms-transition: all 0.3s ease 0s;
      transition: all 0.3s ease 0s;
  }
  
  
  .controls input[type="text"],
  .controls input[type="email"],
  .controls input[type="tel"],
  .controls input[type="password"],
  .controls input[type="url"],
  .controls input[type="search"],
  .controls textarea,
  .controls button,
  .controls select {
      background-color: #fff;
      color: #888;
      margin-bottom: 1.09375rem;
      border: 1px solid #c6c6c6;
      width: calc(100% - 1.09375rem - 2px );
  }
  
  .controls input[type="text"]:focus, 
  .controls input[type="text"]:hover,
  .controls input[type="email"]:focus,
  .controls input[type="email"]:hover,
  .controls input[type="tel"]:focus,
  .controls input[type="tel"]:hover,
  .controls input[type="password"]:focus,
  .controls input[type="password"]:hover,
  .controls input[type="url"]:focus,
  .controls input[type="url"]:hover,
  .controls input[type="search"]:focus,
  .controls input[type="search"]:hover,
  .controls textarea:focus,
  .controls textarea:hover,
  .controls button:focus,
  .controls button:hover,
  .controls select:focus,
  .controls select:hover {
      outline: none;
      border-color: #333;
  }
  
  .controls input[type="text"]:focus + label, .controls input[type="text"]:hover + label,
  .controls input[type="email"]:focus + label,
  .controls input[type="email"]:hover + label,
  .controls input[type="tel"]:focus + label,
  .controls input[type="tel"]:hover + label,
  .controls input[type="password"]:focus + label,
  .controls input[type="password"]:hover + label,
  .controls input[type="url"]:focus + label,
  .controls input[type="url"]:hover + label,
  .controls input[type="search"]:focus + label,
  .controls input[type="search"]:hover + label,
  .controls textarea:focus + label,
  .controls textarea:hover + label,
  .controls button:focus + label,
  .controls button:hover + label,
  .controls select:focus + label,
  .controls select:hover + label {
      color: #333;
      cursor: text;
  }
  
  .controls .fa-sort {
      position: absolute;
      right: 0.875rem;
      top: 1.09375rem;
      color: #999;
  }
  
  .controls select {
      -moz-appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
  }
  
  .controls label {
      position: absolute;
      left: 0.875rem;
      top: 0.721875rem;
      color: #999;
      display: inline-block;
      padding: 0 0.875rem;
      background-color: rgba(255, 255, 255, 0);
      pointer-events: none;
      -moz-transition: color 0.3s, top 0.3s, background-color 0.2s;
      -o-transition: color 0.3s, top 0.3s, background-color 0.2s;
      -webkit-transition: color 0.3s, top 0.3s, background-color 0.2s;
      transition: color 0.3s, top 0.3s, background-color 0.2s;
  }
  
  .controls label.active {
      top: -1.09375rem;
      color: #555;
      background-color: white;
  }
  
  .controls textarea {
      resize: none;
      height: 20vh;
  }
  
  .controls button {
      cursor: pointer;
      padding: 0.75rem 0;
      width: 100%;
  }
  
  .controls .req-icon {
      position: absolute;
      right: 0.721875rem;
      top: 0.721875rem;
      color: #EE6E73;
  }
  
  /* 5.2. Group */
  
  .controls-custom-merge {
      background-color: #fff;
      color: #888;
      margin-bottom: 1.09375rem;
      border: 1px solid #c6c6c6;
      font-size: 0.875rem;
      padding: 0.546875rem 1.09375rem;
      -webkit-transition: all 0.3s ease 0s;
      -moz-transition: all 0.3s ease 0s;
      -ms-transition: all 0.3s ease 0s;
      transition: all 0.3s ease 0s;
      font-weight: 600;
  }
  
  
  
  .form-merge {
      min-width: 100%;
      overflow: hidden;
  }
  
  .form-merge.no-labels label {
      display: none;	
  }
  
  .form-merge input {
      -webkit-border-radius: 50px 0 0 50px;
      -moz-border-radius: 50px 0 0 50px;
      border-radius: 50px 0 0 50px;
  }
  
  .form-merge input + button[type="submit"] {
      margin-left: -4px;
  }
  
  .form-merge button[type="submit"] {
      -webkit-border-radius: 0 50px 50px 0;
      -moz-border-radius: 0 50px 50px 0;
      border-radius: 0 50px 50px 0;
      position: relative;
      margin: 0;
  }
  
  .form-merge.form-square input {
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
  }
  
  .form-merge.form-square button[type="submit"] {
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
  }
  
  @media all and (max-width: 768px) {
      .form-merge input {
          width: 100%;
          border-radius: 50px;
      }
  
      .form-merge input + button[type="submit"] {
          margin-left: 0;
      }
  
      .form-merge button[type="submit"] {
          bottom: 0;
          border-radius: 50px;
          width: 100%;
      }
  }
  
  
  
  /* ====================================================== 
     6. Basic Layout Styles                                        
  /* ====================================================== */
  
  .fl {
      float: left;
  }
  
  .fr {
      float: right;
  }
  
  .t-r {
      text-align: right;
  }
  
  .t-l {
      text-align: left;
  }
  
  .t-c {
      text-align: center;
  }
  
  
  .inline-block {
      display: inline-block;
  }
  
  .block {
      display: block;
  }
  
  .pos-normal-align,
  .pos-vertical-align {
      position: absolute;
      z-index:6;
      width: 100%;
  }
  .pos-normal-align {
      top: 0;
  }
  .pos-vertical-align {
      /* Vertical Center */
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  }
  
  .center-vertically {
      display: table;
      width: 100%;
      height: 100%;
  }
  
  .center-vertically > div {
      display: table-cell;
      vertical-align: middle;
  }
  
  .height-10 {
      height: 10vh !important;
  }
  
  .height-20 {
      height: 20vh !important;
  }
  
  .height-30 {
      height: 30vh !important;
  }
  
  .height-40 {
      height: 40vh !important;
  }
  
  .height-50 {
      height: 50vh !important;
  }
  
  .height-60 {
      height: 60vh !important;
  }
  
  .height-70 {
      height: 70vh !important;
  }
  
  .height-80 {
      height: 80vh !important;
  }
  
  .height-90 {
      height: 90vh !important;
  }
  
  .height-100 {
      height: 100vh !important;
  }
  
  
  @media all and (max-width: 768px) {
    .height-100,
    .height-90,
    .height-80,
    .height-70,
    .height-60,
    .height-50,
    .height-40,
    .height-30,
    .height-20,
    .height-10 {
          height: auto !important;
      }
  }
  
  
  
  /* ====================================================== 
     7. Navigation Area                                    
  /* ====================================================== */
  .menu-wrapper {
      font-size: 0.75rem;
      float: right;
      padding-top: 20px;
      line-height: 2.34375;
      
  }
  
  .menu-wrapper.spy-scroll-fixed {
      padding-bottom: 0;
  }
  
  @media all and (max-width: 768px) {
      .menu-wrapper {
          display: none;
      }
  }
  
  
  ul.menu-main ul a:hover {
      color: #000 !important;
      background: #F1F1F1;
  }
  
  ul.menu-main {
      float: left;
      margin: 0; /* Required*/
  }
  
  
  ul.menu-main li {
      position: relative;
      margin-bottom: 0;
      padding: 0 1.159375rem;
  }
  
  ul.menu-main > li {
      display: inline-block;
      *display: inline;
      margin-right: 27px;
      padding-bottom: 1.421875rem;
      white-space: nowrap; /* Required*/	
  }
  
  ul.menu-main li a {
      display: block;
  }
  
  ul.menu-main > li.active,
  ul.menu-main > li.current-menu-item,
  ul.menu-main > li:hover {
      -webkit-box-shadow: 0 3px 0 rgba(242,126,15,1);
      -moz-box-shadow: 0 3px 0 rgba(242,126,15,1);
      box-shadow: 0 3px 0 rgba(242,126,15,1);	
  }
  
  
  
  ul.menu-main > li ul {
      min-width: 220px;
      display: none;
      position: absolute;
      padding: 0.525rem 0;
  }
  
  
  ul.menu-main > li > ul {
      padding-top: 2.625rem;
      filter:alpha(opacity=0);  
      -moz-opacity:0;   
      opacity: 0;	
  }
  
  ul.menu-main > li:not(.multi-column) > ul ul {
      background: #fff;
      border: 3px solid #333;
      margin-left: -3px;
      padding: 1.421875rem 0;
  }
  
  ul.menu-main > li > ul:before {
      content: '';
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      margin-top: 12px;
      border: 3px solid #333;
      background: #fff;
  }
  
  
  ul.menu-main > li li {
      padding-left: 0.875rem;
  }
  
  
  ul.menu-main > li ul li {
      padding-left: 2.034375rem;
  }
  
  /* Dropdown */
  ul.menu-main ul.sub-menu {
      top: 100%;
      left: 0;
      
  }
  
  ul.menu-main > li:not(.multi-column) > ul ul {
      top: 0;
      left: 100%;
  }
  
  
  ul.menu-main ul.sub-menu li a {
      -ms-word-wrap: break-word;
      word-wrap: break-word;
      white-space: normal; /* Required*/
      line-height: 1.4;
      padding: 0.35rem 0;
  
  
  }
  
  
  /* Multi-column */
  li.multi-column > ul {
      width: auto !important;
      white-space: nowrap;
      display: none;
      padding: 0 !important;
  }
  
  li.multi-column .mega-arrow {
      content: '';
      display: none;
      position: absolute;
      top: 58px;
      left: 50%;
      width: 0; 
      height: 0; 
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid #000;
      filter:alpha(opacity=0);  
      -moz-opacity:0;   
      opacity: 0;	
  }
  
  
  
  li.multi-column > ul .multi-column-title,
  li.multi-column > ul > li > a {
      color: #B9B9B9;
      display: inline-block;
      *display: inline;
      padding: 0.4375rem 0 0;
      cursor: default;
      padding-top: 0.875rem;
  }
  
  li.multi-column > ul > li > a:hover {
      color: #B9B9B9 !important;
  }
  
  
  li.multi-column > ul li {
      width: 220px;
      overflow: hidden;
      display: inline-block;
      *display: inline;
      vertical-align: top;
      padding-left: 1.159375rem !important;
      
  }
  
  li.multi-column > ul li ul {
      
      position: relative !important;
      -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
  
  }
  
  li.multi-column > ul ul li {
      float: none;
      display: block;
  }
  
  li.multi-column > ul ul {
      display: block !important;
  }
  
  
  /* Dropdown Arrow */
  .nav-arrow {
      display: block;
      position: absolute;
      right: 0.284375rem;
      top: 25%;
      background-color: #000;
      width: 3px;
      height: 3px;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border-radius: 100%;
  }
  
  ul.menu-main ul.sub-menu .nav-arrow {
      background-color: #000;
      right: 1.159375rem;
  }
  
  li.multi-column > ul li .nav-arrow {
      display: none;
  }
  
  
  /* Mobile */
  .menu-toggle {
      position: absolute;
      display: none;
      width: 30px;
      height: 30px;
      top: 20px;
      right: 30px;
      cursor: pointer;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      background: #333;
      -webkit-border-radius: 2px; 
      -moz-border-radius: 2px; 
      border-radius: 2px;
      -moz-transition: .1s ease-in-out; 
      -o-transition: .1s ease-in-out;
      -webkit-transition: .1s ease-in-out; 
      transition: .1s ease-in-out;
      -webkit-box-shadow: 0px 7px 19px 0px rgba(0,0,0,0.21);
      -moz-box-shadow: 0px 7px 19px 0px rgba(0,0,0,0.21);
      box-shadow: 0px 7px 19px 0px rgba(0,0,0,0.21);
  }
  
  /* Show Toolbar when viewing site */
  .admin-bar .menu-toggle {
      top: 66px;
  }
  
  .admin-bar .menu-toggle.spy-scroll-postion {
      top: 20px;
  }
  
  /* Admin bar becomes taller on smaller devices */
  @media screen and ( max-width: 782px ) {
      .admin-bar .menu-toggle.spy-scroll-postion {
          top: 66px;
      }
  }
  
  @media screen and ( max-width: 600px ) {
      .admin-bar .menu-toggle.spy-scroll-postion {
          top: 20px;
      }
  }
  
  
  
  @media all and (max-width: 768px) {
      .menu-toggle {
          display: block;
      }
  }
  
  .menu-toggle span {
      display: block;
      position: absolute;
      top: 9px;
      left: 7px;
      width: 17px;
      height: 1px;
      background: #fff;
      -webkit-transition: 350ms;
      -moz-transition: 350ms;
      -o-transition: 350ms;
      transition: 350ms;
  }
  
  .menu-toggle.open span {
      left: 11px;
  }
  
  .menu-toggle .l2 {
      top: 14px;
  }
  
  .menu-toggle .l3 {
      top: 19px;
  }
  
  .menu-toggle.open .l1 {
      -webkit-transform: rotate(45deg) translate(0px,7px);
      -ms-transform: rotate(45deg) translate(0px,7px);
      transform: rotate(45deg) translate(0px,7px);
  }
  
  .menu-toggle.open .l2 {
      opacity: 0;
  }
  
  .menu-toggle.open .l3 {
      -webkit-transform: rotate(-45deg) translate(0px,-7px);
      -ms-transform: rotate(-45deg) translate(0px,-7px);
      transform: rotate(-45deg) translate(0px,-7px);
      
  }
  
  
  
  /* ====================================================== 
     8. Header Area                                        
  /* ====================================================== */
  
  /* 8.1. Header Area */
  /* Don't use "margin" or "padding" to set up ".header-area" */
  .header-area {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 90000;
      background-color: #fff;
      border-bottom: 3px solid rgba(242,126,15,.4);
      -webkit-box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.08);
      -moz-box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.08);
      box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.08);	
  }
  /* Don't use "margin" or "padding" to set up ".header-container" */
  .header-container {
      /* Floating layer protection for IE */
      background: url(/html/class/template/image/blank.gif);
  }
  
  .header-container .menu-right {
      float: right;
  }
  
  .navbar-fixed-top .header-container {
  
  }
  
  .header-inner {
      height: 185px;
      background: none;	
  }
  
  .header-inner.auto-height {
      height: calc( 65px + 0.284375rem );
  }
  
  
  .header-inner.no-height {
      height: 0 !important;
  }
  
  
  /* 8.2. Brand */
  .brand {
      float: left;
      font-size: 1.3125rem;
      font-weight:700;
      text-transform: uppercase;
      white-space: nowrap;
      max-width: 95%;
      overflow: hidden;
      text-overflow: ellipsis;
      
  }
  .brand img {
      max-height: 60px;
  }
  
  .mobile-brand {
      display: none;
  }
  
  
  @media all and (max-width: 768px) {
      
      .mobile-brand {
          display:block;
      }
      
  }
  
  
  
  /* ====================================================== 
     9. Footer                               
  /* ====================================================== */
  .footer-main-container {
      font-size: 0.75rem;
      padding: 2.625rem 0;
  }
  
  
  /* ====================================================== 
     10. Social Buttons                               
  /* ====================================================== */
  
  /* 10.1. Social Background */
  .social-bg {
      color: #fff !important;
  }
  .social-bg-twitter {
      border-color: #53B9FD !important;
      background-color: #53B9FD !important;
  }
  
  .social-bg-facebook {
      border-color: #78A4DD !important;
      background-color: #78A4DD !important;
  }
  
  .social-bg-google {
      border-color: #FC5B5B !important;
      background-color: #FC5B5B !important;
  }
  
  .social-bg-instagram {
      border-color: #6156C7 !important;
      background-color: #6156C7 !important;
  }
  
  .social-bg-lastfm {
      border-color: #B90000 !important;
      background-color: #B90000 !important;
  }
  
  .social-bg-youtube {
      border-color: #CC181E !important;
      background-color: #CC181E !important;
  }
  
  .social-bg-vimeo {
      border-color: #1ab7ea !important;
      background-color: #1ab7ea !important;
  }
  
  .social-bg-dribbble {
      border-color: #FA8BBC !important;
      background-color: #FA8BBC !important;
  }
  
  .social-bg-github {
      border-color: #652F51 !important;
      background-color: #652F51 !important;
  }
  
  .social-bg-flickr {
      border-color: #fc4ca4 !important;
      background-color: #fc4ca4 !important;
  }
  
  .social-bg-medium {
      border-color: #00AB6B !important;
      background-color: #00AB6B !important;
  }
  
  .social-bg-codepen {
      border-color: #333 !important;
      background-color: #333 !important;
  }
  
  .social-bg-behance {
      border-color: #4F8FD6 !important;
      background-color: #4F8FD6 !important;
  }
  
  .social-bg-dropbox {
      border-color: #349BE9 !important;
      background-color: #349BE9 !important;
  }
  
  .social-bg-pinterest {
      border-color: #F35359 !important;
      background-color: #F35359 !important;
  }
  
  .social-bg-reddit {
      border-color: #FF4500 !important;
      background-color: #FF4500 !important;
  }
  
  .social-bg-soundcloud {
      border-color: #FF7500 !important;
      background-color: #FF7500 !important;
  }
  
  .social-bg-producthunt {
      border-color: #DA552F !important;
      background-color: #DA552F !important;
  }
  
  .social-bg-weibo {
      border-color: #E6162D !important;
      background-color: #E6162D !important;
  }
  
  
  .social-bg-deviantart {
      border-color: #05CC47 !important;
      background-color: #05CC47 !important;
  }
  
  .social-bg-spotify {
      border-color: #A5CE3F !important;
      background-color: #A5CE3F !important;
  }
  
  .social-bg-wordpress {
      border-color: #24A5DD !important;
      background-color: #24A5DD !important;
  }
  
  .social-bg-digg {
      border-color: #333 !important;
      background-color: #333 !important;
  }
  
  .social-bg-tumblr {
      border-color: #529ECC !important;
      background-color: #529ECC !important;
  }
  
  .social-bg-linkedin {
      border-color: #24A5DD !important;
      background-color: #24A5DD !important;
  }
  
  .social-bg-stackoverflow {
      border-color: #FF7500 !important;
      background-color: #FF7500 !important;
  }
  
  /* 10.2. Social General */
  
  .social-btn,
  .social-btn-colourful,
  .social-btn li,
  .social-btn-colourful li {
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  .social-btn li,
  .social-btn-colourful li {
      display: inline-block;
      *display: inline;
      margin: 0.175rem 0.4375rem;
  }
  
  .social-btn-colourful li a {
      color: #333333;
  }
  
  .social-btn-colourful li a:hover {
      color: #ee9f24 !important;
  }
  
  .social-btn-colourful li a[href*="twitter.com"] {
      color: #53B9FD;
  }
  
  .social-btn-colourful li a[href*="facebook.com"] {
      color: #78A4DD;
  }
  
  .social-btn-colourful li a[href*="google.com"] {
      color: #FC5B5B;
  }
  
  .social-btn-colourful li a[href*="instagram.com"] {
      color: #6156C7;
  }
  
  .social-btn-colourful li a[href*="last.fm"] {
      color: #B90000;
  }
  
  .social-btn-colourful li a[href*="youtube.com"] {
      color: #CC181E;
  }
  
  .social-btn-colourful li a[href*="vimeo.com"] {
      color: #1ab7ea;
  }
  
  .social-btn-colourful li a[href*="dribbble.com"] {
      color: #FA8BBC;
  }
  
  .social-btn-colourful li a[href*="github.com"] {
      color: #652F51;
  }
  
  .social-btn-colourful li a[href*="flickr.com"] {
      color: #fc4ca4;
  }
  
  .social-btn-colourful li a[href*="medium.com"] {
      color: #00AB6B;
  }
  
  .social-btn-colourful li a[href*="codepen.com"] {
      color: #333;
  }
  
  .social-btn-colourful li a[href*="behance.net"] {
      color: #4F8FD6;
  }
  
  .social-btn-colourful li a[href*="dropbox.com"] {
      color: #349BE9;
  }
  
  .social-btn-colourful li a[href*="pinterest.com"] {
      color: #F35359;
  }
  
  .social-btn-colourful li a[href*="reddit.com"] {
      color: #FF4500;
  }
  
  .social-btn-colourful li a[href*="soundcloud.com"] {
      color: #FF7500;
  }
  
  .social-btn-colourful li a[href*="producthunt.com"] {
      color: #DA552F;
  }
  
  .social-btn-colourful li a[href*="weibo.com"] {
      color: #E6162D;
  }
  
  
  .social-btn-colourful li a[href*="deviantart.com"] {
      color: #05CC47;
  }
  
  .social-btn-colourful li a[href*="spotify.com"] {
      color: #A5CE3F;
  }
  
  .social-btn-colourful li a[href*="wordpress.com"] {
      color: #24A5DD;
  }
  
  .social-btn-colourful li a[href*="mailto"] {
      color: #333;
  }
  
  .social-btn-colourful li a[href*="digg.com"] {
      color: #333;
  }
  
  .social-btn-colourful li a[href*="tumblr.com"] {
      color: #529ECC;
  }
  
  .social-btn-colourful li a[href*="linkedin.com"] {
      color: #24A5DD;
  }
  
  .social-btn-colourful li a[href*="stackoverflow.com"] {
      color: #FF7500;
  }
  
  .social-btn-colourful li a[href*="rss"], 
  .social-btn-colourful li a[href*="feed"] {
      color: #FF7500;
  }
  
  
  
  /* ====================================================== 
     11. Back to Top                                               
  /* ====================================================== */
  #toTop {
      display: none;
      text-decoration: none;
      position: fixed;
      bottom: 12px;
      right: 12px;
      overflow: hidden;
      width: 50px;
      height: 50px;
      border: none;
      text-indent: 100%;
      background: url(/html/class/template/image/back-top.png) no-repeat left top;
      z-index: 1;
  }
  
  #toTopHover {
      background: url(/html/class/template/image/back-top.png) no-repeat left -50px;
      width: 50px;
      height: 50px;
      display: block;
      overflow: hidden;
      float: left;
      opacity: 0;
      -moz-opacity: 0;
      filter: alpha(opacity=0);
  }
  
  #toTop:active,#toTop:focus {
      outline: none;
  }
  
  
  /* ====================================================== 
     12. Loader                                               
  /* ====================================================== */
  .loader {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: #fff;
      -webkit-user-select: none;  /* Chrome all / Safari all */
      -moz-user-select: none;     /* Firefox all */
      -ms-user-select: none;      /* IE 10+ */
      user-select: none;          /* Likely future */ 
      display: flex;
      align-items: center;
      justify-content: center;
      z-index:99999;
  }
  
  .loader span {
      font-family: Arial, sans-serif;
      position: fixed;
      z-index: 100000;
      top: 50%;
      left: 50%;
      margin-top: -32.5px;
      margin-left: -32.5px;	
  }
  
  .loader .spinner-container {
      animation: rotate 2s linear infinite;
      -webkit-animation: rotate 2s linear infinite;
  }
  
  .loader .spinner-container .path {
      stroke-dasharray: 1,150;
   /* 1%, 101% circumference */
      stroke-dashoffset: 0;
      stroke: #EE6E73;
      stroke-linecap: round;
      animation: dash 1.5s ease-in-out infinite;
      -webkit-animation: dash 1.5s ease-in-out infinite;
  }
  
  @keyframes rotate {
      100% {
          transform: rotate(360deg);
      }
  }
  
  @keyframes dash {
      0% {
          stroke-dasharray: 1,150;
    /* 1%, 101% circumference */
          stroke-dashoffset: 0;
      }
  
      50% {
          stroke-dasharray: 90,150;
   /* 70%, 101% circumference */
          stroke-dashoffset: -35;
     /* 25% circumference */;
      }
  
      100% {
          stroke-dasharray: 90,150;
   /* 70%, 101% circumference */
          stroke-dashoffset: -124;
    /* -99% circumference */;
      }
  }
  
  @-webkit-keyframes rotate {
      100% {
          transform: rotate(360deg);
      }
  }
  
  @-webkit-keyframes dash {
      0% {
          stroke-dasharray: 1,150;
    /* 1%, 101% circumference */
          stroke-dashoffset: 0;
      }
  
      50% {
          stroke-dasharray: 90,150;
   /* 70%, 101% circumference */
          stroke-dashoffset: -35;
     /* 25% circumference */;
      }
  
      100% {
          stroke-dasharray: 90,150;
   /* 70%, 101% circumference */
          stroke-dashoffset: -124;
    /* -99% circumference */;
      }
  }
  
  
  
  /* ====================================================== 
     13. Parallax                                               
  /* ====================================================== */
  .parallax {
      position: relative;
      height: 100vh;
      width: 100%;
      background-attachment: fixed;
      background-position: 50% 0;
      background-repeat: no-repeat;
      -webkit-background-size: cover !important;
      -moz-background-size: cover !important;
      background-size: cover !important;
  
  }
  
  .parallax-window {
      height: 100%;
      width: 100%;
  }
  .parallax-container {
    height: 300px;/* Required, associated with script.js */
    width: 100%;/* Required, associated with script.js  */
  }
  
  .parallax-element {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
  }
  
  .parallax-element .pos-vertical-align {
      height: 100%;
  }
      
  
  .parallax-auto {
      height: auto;
      width: 100%;
  }
  .parallax-auto .parallax-img{
      visibility: hidden;
  }
  
  
  
  /* ====================================================== 
     14. Overlay                                               
  /* ====================================================== */
  
  .overlay-bg {
      overflow:hidden;	
  }
  .overlay-bg h1,
  .overlay-bg h2,
  .overlay-bg h3,
  .overlay-bg h4,
  .overlay-bg h5,
  .overlay-bg h6,
  .overlay-bg .h1,
  .overlay-bg .h2,
  .overlay-bg .h3,
  .overlay-bg .h4,
  .overlay-bg .h5,
  .overlay-bg .h6 {
      color: inherit; 
  }
  
  
  .overlay-text-white,
  .overlay-text-white h1,
  .overlay-text-white h2,
  .overlay-text-white h3,
  .overlay-text-white h4,
  .overlay-text-white h5,
  .overlay-text-white h6,
  .overlay-text-white .h1,
  .overlay-text-white .h2,
  .overlay-text-white .h3,
  .overlay-text-white .h4,
  .overlay-text-white .h5,
  .overlay-text-white .h6 {
      color: white;	
  }
  
  
  .overlay-bg-black:after {
      content: '';
      display: table;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 150vh;
      background-color: rgba(0,0,0,.6);
      z-index: 1;
  }
  
  
  .overlay-bg-black-pure {
      background: #212121 !important;
  }
  
  
  /* ====================================================== 
     15. Pagination                         
  /* ====================================================== */
  .pagination-container {
      margin-top: 2.84375rem;
  }
  
  .pagination-container:before,
  .pagination-container:after {
      display: table;
      content: "";
      line-height: 0;
  }
  
  .pagination-container:after {
      clear: both;
  }
  
  .pagination-container li {
      display: inline-block;
      *display: inline;
  }
  
  
  .pagination-container div.nav-previous,
  .pagination-container div.nav-next,
  .pagination-container li a,
  .pagination-container li.active > span,
  .pagination-container li > span.current {
      display: inline-block;
      width: 3.125rem;
      height: 3.125rem;
      padding-top: 4px;
      text-align: center;
      background: none;
      border: none;
      color: #333;
      font-variant-ligatures: common-ligatures; /*Ligatures and contextual forms are ways of combining glyphs to produce more harmonized forms.*/
      margin-bottom: 0;
      font-size: 0.875rem;
      line-height: 3.25;
      margin-top: 0;
      margin-bottom: 2.06818181818rem;
  }
  
  .pagination-container div.nav-previous a,
  .pagination-container div.nav-next a {
      display: block;
  }
  
  .pagination-container div.nav-previous:hover,
  .pagination-container div.nav-next:hover,
  .pagination-container li a:hover {
      background: #efefef;
      color: #232323;
  }
  
  .pagination-container li.active a,
  .pagination-container li.active > span {
      color: #989898;
      font-style: italic;
  }
  
  .pagination-container li.active a:hover {
      background: #e7e7e7;
      color: #232323;
  }
  
  /* Paginate WordPress Posts */
  .page-links {
      margin: 0.875rem 0;
      font-weight: 600;
  }
  .page-links > span,
  .page-links a {
      display: inline-block;
      margin: 0 0.13125rem;
      font-weight: normal;
      font-style: italic;
  }
  
  .page-links a > span {
      color: #333;
      background: #F9F9F9;
      padding: 0 0.2625rem;
      border: 1px solid #DDDDDD;
      -webkit-border-radius: 2px; 
      -moz-border-radius: 2px; 
      border-radius: 2px;
  }
  
  
  /* ====================================================== 
     16. Filterable Navigation                 
  /* ====================================================== */
  .nav-filters {
      padding: 1.421875rem 0;
  }
  
  .nav-filters ul {
      margin: 0;
  }
  
  .nav-filters ul li {
      transition: 0.2s linear;
      -webkit-transition: 0.2s linear;
      -moz-transition: 0.2s linear;
      font-style: italic;
      display: inline-block;
      *display: inline;
  }
  
  .nav-filters ul li:not(:last-child) {
      margin-right: 0.203125rem;
  }
  
  .nav-filters ul li:not(:last-child):after {
      content: '/';
      margin-left: 0.203125rem;
      opacity: 0.1;
  }
  
  .nav-filters ul li:not(.active):not(.current-cat) {
      opacity: .5;
  }
  
  .nav-filters ul li:not(.active):not(.current-cat):after {
      opacity: 0.2;
  }
  
  .nav-filters ul li:hover {
      opacity: 1;
  }
  
  .nav-filters ul li:hover:after {
      opacity: 0.1;
  }
  
  
  /* ====================================================== 
     17. Portfolio                 
  /* ====================================================== */
  .portfolio-container {
      position: relative;
      margin: -2.1875rem 0 0 -2.1875rem;
      
  }
  
  .portfolio-container:after,
  .portfolio-container:before {
      content: '';
      display: block;
      clear: both;
      height: 0;
  }
  
  .portfolio-container .portfolio-item {
      -moz-transition: .2s ease-in-out;
      -o-transition: .2s ease-in-out;
      -webkit-transition: .2s ease-in-out;
      transition: .2s ease-in-out;
      position: relative;
      width: calc(33.3% - 2.1875rem);
      margin: 1.3125rem 0 3.0625rem 2.1875rem;
      float: left;
      text-align: left;
  }
  
  
  
  .portfolio-container.small .portfolio-item {
      width: calc(24.99999% - 2.1875rem);
  }
  
  .portfolio-container.large .portfolio-item {
      width: calc(49.99999% - 2.1875rem);
  }
  
  .portfolio-item .link-to {
      width: 100%;
      position: absolute;
      left: 0;
      z-index: 3;
      filter:alpha(opacity=0);  
      -moz-opacity: 0;   
      opacity: 0; 
      /* Vertical Center */
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  }
  
  .portfolio-item:hover .link-to {
      filter:alpha(opacity=100);  
      -moz-opacity: 1;   
      opacity: 1; 
      
  }
  
  .portfolio-item .cover {
      position: relative;
  }
  
  
  .portfolio-item .cover:before {
      -webkit-transition: all 0.3s ease 0s;
      -moz-transition: all 0.3s ease 0s;
      -ms-transition: all 0.3s ease 0s;
      transition: all 0.3s ease 0s;
      background: rgba(255,255,255,0);
      display: block;
      content: '';
      top: 0;
      left: 0;
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
  }
  
  .portfolio-item:hover .cover:before {
      background: rgba(255,255,255,.95);
  }
  
  
  .portfolio-item h3 {
      position: relative;
      font-size: 1.125rem;
      padding-top: 0.546875rem;
      
  }
  
  .portfolio-item .title {
      filter:alpha(opacity=75);  
      -moz-opacity: 0.7;   
      opacity: 0.7;
      margin-left: 0.875rem;
  }
  
  .portfolio-item .title:before {
      content: '|';
      padding-right: 0.875rem;
  }
  
  
  .portfolio-item .title,
  .portfolio-item .category {
      font-size: 0.625rem;
      line-height: 1.625;
      display: inline-block;
  }
  
  .portfolio-item .category {
      position: absolute;
      bottom: 0.875rem;
      right: 0;
      background: #EE6E73;
      -webkit-border-radius: 25px; 
      -moz-border-radius: 25px; 
      border-radius: 25px;
      padding: 0.0875rem 1.1375rem;
      color: #fff;
      
  }
  
  .portfolio-item .category a {
      color: #fff;
  }
  
  .portfolio-item .category:hover {
      background:#C56263;
  }
  
  
  .portfolio-item .image {
      width: 100%;
      display: block;
      overflow: hidden;
      position: relative;
      outline: 0;
      background: #ddd;
      border: 1px solid #E7E7E7;
  }
  
  
  .portfolio-item .cover img {
      width: 100%;
      
  }
  
  
  
  @media screen and (max-width: 1280px) {
      
      .portfolio-container {
          margin: -1.09375rem 0 0 -1.09375rem;
      }
  
      .portfolio-container .portfolio-item {
          width: calc(33.3% - 1.09375rem);
          margin: 1.09375rem 0 0 1.09375rem;
      }
  
      .portfolio-container.small .portfolio-item {
          width: calc(24.99999% - 1.09375rem);
          margin: 1.09375rem 0 0 1.09375rem;
      }
  
      .portfolio-container.large .portfolio-item {
          width: calc(49.99999% - 1.09375rem);
          margin: 1.09375rem 0 0 1.09375rem;
      }
  }
  
  @media screen and (max-width: 980px) {
  
      .portfolio-container {
          margin: -2.1875rem 0 0 -2.1875rem;
      }
  
      .portfolio-container .portfolio-item ,
      .portfolio-container.small .portfolio-item,
      .portfolio-container.large .portfolio-item {
          width: calc(50% - 2.1875rem);
          margin: 2.1875rem 0 0 2.1875rem;
      }
  }
  
  @media screen and (max-width: 736px) {
  
      .portfolio-container {
          margin: -1.09375rem 0 0 -1.09375rem;
      }
  
      .portfolio-container .portfolio-item,
      .portfolio-container.small .portfolio-item,
      .portfolio-container.large .portfolio-item {
          width: calc(50% - 1.09375rem);
          margin: 1.09375rem 0 0 1.09375rem;
      }
  }
  
  @media screen and (max-width: 480px) {
  
      .portfolio-container {
          margin: 0;
      }
  
      .portfolio-container .portfolio-item,
      .portfolio-container.small .portfolio-item,
      .portfolio-container.large .portfolio-item {
          width: 100%;
          margin: 1.09375rem 0 0 0;
      }
  }
  
  
  
  
  /* ====================================================== 
     18. Button                 
  /* ====================================================== */
  /* 18.1. Common button styles */
  .button {
      display: inline-block;
      text-align: center;
      min-width: 100px;
      margin: 0.875rem;
      padding: 0.4375rem 1.09375rem;
      border: none;
      background: none;
      color: inherit;
      vertical-align: middle;
      position: relative;
      z-index: 1;
      -webkit-backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
  }
  
  .button-text-white {
      color: #fff;
  }
  
  .button-box-br {
      margin-left: -0.875rem;
  }
  
  
  @media all and (max-width: 768px) {
          
      .button {
          margin: 0.7rem !important;
          padding: 0.35rem 0.875rem !important;
      }
  
  }
  
  
  .button:focus {
      outline: none;
  }
  .button > span {
      vertical-align: middle;
  }
  
  .button-space-none {
      margin: 0;
  }
  
  @media all and (max-width: 768px) {
          
      .button-space-none {
          margin: 0 !important;
      }
  
  }
  
  .button-fullwidth {
      max-width: none;
      width: 100%;
  }
  
  @media all and (max-width: 768px) {
          
      .button-fullwidth {
          max-width: none !important;
          width: calc( 100% - 1.75rem ) !important;
          
      }
  
  }
  
  
  /* 18.2. Borders */
  .button-border-thin {
      border: 1px solid;
  }
  .button-border-medium {
      border: 2px solid;
  }
  .button-border-thick {
      border: 3px solid;
  }
  .button-border-white {
      border-color: #fff;
  }
  
  
  /* 18.3. Sizes */
  .button-size-tiny {
      font-size: 0.75rem;
  }
  .button-size-s {
      font-size: 0.875rem;
  }
  .button-size-m {
      font-size: 1rem;
  }
  .button-size-l {
      font-size: 1.125rem;
  }
  
  
  /* 18.4. Hover */
  .button-hover {
      overflow: hidden;
      -webkit-transition: all 0.3s ease 0s;
      -moz-transition: all 0.3s ease 0s;
      -ms-transition: all 0.3s ease 0s;
      transition: all 0.3s ease 0s;	
  }
  .button-hover:hover {
      color: #333;
      border-color: #333;
  }
  
  
  /* 18.5. Background */
  .button-bg:hover {
      filter:alpha(opacity=70);  
      -moz-opacity:0.7;   
      opacity: 0.7; 
  }
  
  .button-bg-primary {
      border-color: #EE6E73 !important;
      background: #EE6E73 !important;
      color: #fff !important;
  }
  .button-bg-primary:hover {
      border-color: #E85254 !important;
      background: #E85254 !important;
      color: #fff !important;
  }
  
  .button-bg-black {
      border-color: #333 !important;
      background: #333 !important;
      color: #fff !important;
  }
  .button-bg-black:hover {
      border-color: #000 !important;
      background: #000 !important;
      color: #fff !important;
  }
  
  
  
  /* ====================================================== 
     19. Sidebar            
  /* ====================================================== */
  /* 19.1. Basic */
  .sidebar-container {
      -ms-word-wrap: break-word;
      word-wrap: break-word;
      padding-left: 2.1875rem;
      line-height: 1.825;
  }
  
  @media all and (max-width: 768px) {
      
      .sidebar-container {
          padding-left: 0;
      }
          
      
  }
  
  .sidebar-container .widget {
      padding-bottom: 2.625rem;
      font-size: 0.875rem;
  }
  
  
  .sidebar-container .widget-title {
      margin: 0 0 0.875rem;
  }
  
  
  /* 19.2. Calendar Widget */
  .calendar-box {
      padding: 1.3125rem 0;
      width: 100%;
      font-size: 0.5625rem;
  }
  
  
  .calendar-box caption {
      text-align: center;
      margin: 0.875rem 0;
      font-size: 1.25rem;
  }
  
  
  .calendar-box thead th {
      padding-bottom: 10px;
      text-align: center;
      
  }
  
  .calendar-box tbody td {
      background: #f5f5f5;
      border: 1px solid #fff;
      text-align: center;
      padding: 8px;
  }
  
  .calendar-box tbody td:hover {
      background: #fff;
  }
  
  .calendar-box tbody .pad {
      background: none;
  }
  
  .calendar-box tfoot #next {
      text-transform: uppercase;
      text-align: right;
  }
  
  .calendar-box tfoot #prev {
      text-transform: uppercase;
      padding-top: 0.875rem;
  }
  
  
  /* 19.3. Post List */
  .post-list-box li {
      border-bottom: 1px dashed #E6E6E6;
      margin-bottom: 0.721875rem;
  }
  
  
  /* 19.4. Post List with Featured Image */
  .post-img-list-box,
  .post-img-list-box li {
      margin: 0;
      padding: 0;
      list-style: none;
      line-height: 1.3;
  }
  
  
  .post-img-list-box li:after {
      display: block;
      content: '';
      clear: both;
      border-bottom: 1px dashed #E6E6E6;
  }
  
  .post-img-list-box li .item-thumb {
      float: left;
      width: 39.4%;
      margin-right: 0.875rem;
      margin-bottom: 0.875rem;
      padding: 2px;
      display: block;
      text-align: left;
  }
  
  @media all and (max-width: 991px) {
      .post-img-list-box li .item-thumb {
          width: 15%;
      }	
  }
  
  @media screen and (max-width: 480px) {
      .post-img-list-box li .item-thumb {
          width: 39.4%;
      }
  }
  
  .post-img-list-box li .item-thumb img {
      margin: 0;
      padding: 0;
      max-width: 100%;
  }
  
  .post-img-list-box li .item-info {
      float: left;
      width: 50%;
  }
  
  @media all and (max-width: 991px) {
      .post-img-list-box li .item-info {
          width: 82.5%;
      }
  }
  
  @media screen and (max-width: 480px) {
      .post-img-list-box li .item-info {
          width: 50%;
      }	
  }
  
  .post-img-list-box li .item-info.no-image {
      float: none;
      width: 100%;
  }
  
  .post-img-list-box li.nothumb {
      display: none;
  }
  
  .post-img-list-box li {
      border: none;
      display: block;
      margin-bottom: 0.875rem;
      display: block;
      height: auto;
      position: relative;
  }
  
  .post-img-list-box li .item-title {
     
  }
  
  .post-img-list-box li .item-date {
      filter: alpha(opacity=65);
      -moz-opacity: 0.65;
      opacity: 0.65;
      font-size: 0.75rem;
      padding: 0.6125rem 0;
  }
  
  
  
  /* 19.5. Link List */
  .widget_categories ul,
  .widget_nav_menu ul,
  .widget_pages ul {
      margin-left: 0.875rem;
  }
  
  
  
  .widget_categories li,
  .widget_nav_menu li,
  .widget_pages li {
      margin-bottom: 0;
      position: relative;
  }
  
  .widget_categories ul > li,
  .widget_nav_menu ul > li,
  .widget_pages ul > li {
      border-bottom: 1px dashed #E6E6E6;
  }
  .widget_categories ul > li li,
  .widget_pages ul > li li {
      border-bottom: none;
  }
  
  .widget_categories li a,
  .widget_nav_menu li a,
  .widget_pages li a {
      display: inline-block;
      padding: 0.35546875rem;
      font-style: italic;
      transition: 0.2s linear;
      -webkit-transition: 0.2s linear;
      -moz-transition: 0.2s linear;
      
  }
  
  .widget_categories li a:before,
  .widget_nav_menu li a:before,
  .widget_pages li a:before {
      content: '\203A';
       filter: alpha(opacity=70);  
      -moz-opacity: 0.7;   
      opacity: 0.7; 
      margin-right: 0.721875rem;
  }
  
  
  .widget_categories li > .cat-item-count {
      position: absolute;
      top: 0.875rem;
      right: 0;
      border: 1px solid #C2C2C2;
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius: 50px;
      display: inline-block;
      min-width: 16px;
      height: 16px;
      font-size: 0.625rem;
      text-align: center;
      line-height: 16px;
      filter: alpha(opacity=50);  
      -moz-opacity: 0.5;   
      opacity: 0.5;
  }
  
  
  /* ====================================================== 
     20. Search          
  /* ====================================================== */
  
  /* 20.1. Search of Widget */
  .search-box {
      position: relative;
      font-size: 0.875rem;
  }
  
  .search-box label,
  .search-box .search-field {
      width: 100%;
  }
  
  .search-box .search-field {
      background: #fff;
      border: 1px solid #AEAEAE;
      border-radius: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      color: #555;
      outline: none;
      padding: 0.4375rem 1.421875rem;
      font-weight: 600;
      font-size: 0.75rem;
      -webkit-border-radius: 25px; 
      -moz-border-radius: 25px; 
      border-radius: 25px; 
  }
  
  .search-box .search-field::-webkit-search-cancel-button {
      -webkit-appearance: none;
  }
  
  .search-box .search-field::-webkit-search-decoration {
      display: none;
  }
  
  .search-box .wp-search-submit {
      position: absolute;
      top: 0.546875rem;
      right: 0.875rem;
      cursor: pointer;
      font-size: 1rem; /* Icon */
      color: #CCC;
  }
  
  .search-box .wp-search-submit:hover {
      color: #333;
  }
  
  
  /* ====================================================== 
     21. Tags      
  /* ====================================================== */
  .tags-box > a {
      font-size: 0.875rem;
      padding: 0.04375rem 0.109375rem;
      margin-bottom: 0.175rem;
      display: inline-block;
  }
  
  .tags-box > a:after {
      content: '/';
      display: inline-block;
      margin-left: 0.546875rem;
      filter:alpha(opacity=50);  
      -moz-opacity:0.5;   
      opacity: 0.5; 
  }
  
  .tags-box > a:last-child:after {
      display: none;
      
  }
  
  .tags-box.tags-border > a {
      border: 1px solid #E6E6E6;
  }
      
  
  
  
  /* ====================================================== 
     22. Entry      
  /* ====================================================== */
  
  
  /* 22.1. Spacing */
  .entry-section {
      padding: 2.84375rem 0 1.75rem;
  }
  
  .entry-section.entry-section-top {
      padding: 2.84375rem 0 0;
  }
  
  .entry-section .entry-title {
      padding-bottom: 1.75rem;
  }
  
  @media all and (max-width: 768px) {
      .entry-section .entry-title {
          padding-bottom: 0.4375rem;
      }
      
  }
  
  /* 22.2. Text */
  .entry-mark a {
      color: #EE6E73;
  }
  
  .entry-mark a:hover {
      color: #E85254;
  }
  
  
  /* 22.3. Content */
  .entry-content {
      -ms-word-wrap: break-word;
      word-wrap: break-word;	
  }
  
  .entry-content img {
      height: auto !important;
  }
  
  .entry-content iframe {
      max-width: 100% !important;
  }
  
  
  
  /* 22.4. Meta */
  .entry-meta {
      color: #999;
      font-style: italic;
      font-size: 0.75rem;
      line-height: 1.33333333333;
  }
  
  .entry-meta li {
      display:inline-block;
      *display: inline;   
      margin-bottom: 0.62890625rem;
  }
  
  
  .entry-meta.wrap li {
      display: block;
  }
  
  
  .entry-meta.wrap li strong {
      padding-right: 0.4375rem;
      font-size: 0.875rem;
      color: #474747;
      display: inline-block;
      width: 130px;
      vertical-align:top;
  }
  
  .entry-meta.wrap li span {
      display: inline-block;
      width: calc( 100% - 130px - 0.875rem );
  }
  
  .entry-meta li:before {
      content: '/';
      display: inline-block;
      margin-right: 0.4375rem;
  }
  
  .entry-meta.wrap li:before {
      display: none;
  }
  
  
  .entry-meta li a {
      color: #999;
  }
  
  .entry-meta:not(.wrap) li:first-child:before {
      display: none;
  }
  
  .entry-meta.wrap li a {
      color: #EE6E73;
  }
  
  .entry-meta.wrap li a:hover {
      color: #E85254;
  }
  
  
  
  
  
  /* ====================================================== 
     23. Comments      
  /* ====================================================== */
  
  .comments {
      
  }
  
  /* Highlight Author’s Comments in WordPress */
  .comment.bypostauthor {
      background-color: transparent;
  }
  .comment .comment.bypostauthor {
      background-color: transparent;
  }
  
  
  
  /* Nested comments */
  .comment .comment {
      margin-left: 2.625rem;
  }
  
  @media all and (max-width: 768px) {
      .comment .comment {
          margin-left: 0;
      }
  }
  
  .comment p {
      margin-bottom: 1.25rem;
  }
  
  .comment-meta {
      margin-bottom: 0.875rem;
      
  }
  
  .comment-meta:after {
      content: '';
      display: block;
      clear: both;
  }
  
  .comment-meta .comment-avatar {
      width: 45px;
      margin: 0 1.3125rem 0 0;
      display: block;
      float: left;
  }
  
  .comment-meta .comment-avatar img {
      vertical-align: middle;
      width: 100%;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border-radius: 100%;
      
  }
  
  .comment-meta .comment-text {
      display: block;
      float: left;
  }
  
  .comment-meta .comment-text h5 {
      margin-bottom: 0;
      padding-bottom: 0;
  }
  
  .comment-meta .comment-text em {
      filter:alpha(opacity=70);  
      -moz-opacity:0.7;   
      opacity: 0.7;
  }
  
  .comment-content {
      border-bottom: 1px solid #E6E6E6;
      margin-bottom: 1.75rem;
      margin-left: calc(45px + 1.3125rem);
      clear: both;
      padding-bottom: 1.3125rem;
      -ms-word-wrap: break-word;
      word-wrap: break-word;
  }
  
  .comment-content {
      position: relative;
      border-bottom: 1px solid #E6E6E6;
      margin-bottom: 1.75rem;
      margin-left: calc(45px + 1.3125rem);
      clear: both;
      padding-bottom: 1.3125rem;
      -ms-word-wrap: break-word;
      word-wrap: break-word;
  }
  
  .comment-content a:not(.respond) {
      text-decoration: underline;
  }
  
  
  .comment-content a.respond {
      background: #EE6E73;
      color: #fff;
      position: absolute;
      bottom: 0;
      right: 0;
      font-size: 0.75rem;
      padding: 0.175rem 0.875rem 0;
      text-transform: uppercase;
  }
  
  
  /* WordPress Comment Respond */
  .comment-reply-title {
      /* Same to .entry-section .entry-title  */
      padding-bottom: 1.75rem;
      /* Same to .h4 */
      font-size: 1.125rem;
      line-height: 1.33333333333;
      text-transform: uppercase;
  }
  
  
  
  
  /* ====================================================== 
     24. Browser UI              
  /* ====================================================== */
  .browser-top-bar {
      height: 15px;
      background-color: #e1e1e1;
      width: 100%;
      border-top-right-radius: 3px;
      border-top-left-radius: 3px;
      position: relative;
  }
  
  .browser-url-bar {
      border-radius: 2px;
      position: absolute;
      bottom: 3px;
      height: 8px;
      width: 85%;
      left: 30px;
      background: #fff;
  }
  
  .browser-dots {
      width: 25px;
      position: relative;
      top: 6px;
      left: 5px;
      overflow: hidden;
  }
  
  .browser-dot {
      float: left;
      border-radius: 20px;
      height: 4px;
      width: 4px;
      background: #aaa;
      margin-left: 2px;
  }
  
  
  
  /* ====================================================== 
     25. Style of Irregular Shape                                        
  /* ====================================================== */
  .skew-element {
      -ms-transform: skew(0deg, -2deg); /* IE 9 */
      -webkit-transform: skew(0deg, -2deg); /* Chrome, Safari, Opera */
      transform: skew(0deg, -2deg);	
  }
  
  
  /* ====================================================== 
     26. Author Card   
  /* ====================================================== */
  .author-card {
      margin: 0 auto;
      border: 1px solid #eaeaea;
      position: relative;
      border-top: 3px solid #EE6E73;
  }
  
  .author-card-top {
      min-height: 2.086538461rem;
      background: #fff;
      padding: 0.65625rem 1.75rem 0 1.75rem;
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;
  }
  
  .author-card-top h3 {
      margin: 0;
      padding: 0;
      font-size: 1.125rem;
      line-height: 1.7;
  }
  
  .author-card-top .text {
      margin-top: 0.4375rem;
      float: left;
      width: calc(100% - 105px );
  }
  
  .author-card-top .text a {
      font-size: 0.625rem;
  }
  
  .author-card-top .pic {
      position: relative;
      top: 0.175rem;
      height: 4.375rem;
      width: 4.375rem;
      float: right;
      width: 100px;
      height: 100px;
  }
  
  .author-card-top .pic img {
      width: 90px !important;
      height: 90px !important;
      margin: 5px 0 0 5px;
      border: 1px solid #eaeaea;
      -webkit-border-radius: 100%; 
      -moz-border-radius: 100%; 
      border-radius: 100%; 
  }
  
  .author-card-middle {
      background: #fff;
      padding: 1.75rem 1.75rem 1.3125rem 1.75rem;
      line-height: 1.5;
  }
  
  .author-card-middle:after {
      content: '';
      position: relative;
      height: 0;
      width: 0;
      border-left: 0.4375rem solid transparent;
      border-right: 0.4375rem solid transparent;
      border-top: 0.4375rem solid #fff;
      position: absolute;
      bottom: 25px;
      left: 1.75rem;
  }
  
  .author-card-middle p {
      margin-top: 0.875rem;
      padding: 0 0.875rem 0 1.75rem;
  }
  
  .author-card-final {
      height: 30px;
      font-size: 0.75rem;
      display: block;
      background: #F6F6F6;
      padding: 0.525rem 2.1875rem;
      text-align: right;
      border-bottom-left-radius: 2px;
      border-bottom-right-radius: 2px;
      -webkit-transition: all 500ms ease-in-out;
      transition: all 500ms ease-in-out;
      color: #BDBDBD;
  }
  
  .author-card-final .text {
      color: #fff;
      margin-left: 0.4375rem;
  }
  
  
  
  /* ====================================================== 
     27. Plugins     
  /* ====================================================== */
  #disqus_thread {
      padding-top: 1.75rem;
  }
  .alobaidi-captcha-comment-field {
      margin-left: 0.875rem;
  }
  
  
  /* ====================================================== 
     28. Modal   
  /* ====================================================== */
  .modal-box {
      position: fixed;
      top: calc( -100% - 71px );
      z-index: 99998;
      pointer-events: none;
      -moz-transition: all .5s ease-out;
      -webkit-transition: all .5s ease-out;
      -o-transition: all .5s ease-out;
      transition: all .5s ease-out;
      width: 850px;
      height: 60vh;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      border-radius: 8px;
      background: #fff;
      -webkit-box-shadow: 0px 0px 71px 0px rgba(0,0,0,0.47);
      -moz-box-shadow: 0px 0px 71px 0px rgba(0,0,0,0.47);
      box-shadow: 0px 0px 71px 0px rgba(0,0,0,0.47);
      left: calc( (100% - 850px)/2 );
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  }
  
  @media all and (max-width: 991px) {
      .modal-box:not(.fullscreen) {
          width: 850px !important;
          left: calc( (100% - 850px)/2 );
      }
  }
  
  
  @media all and (max-width: 768px) {
      .modal-box:not(.fullscreen) {
          width: 90% !important;
          left: 5%;
      }	
  }
  
  
  .modal-box.fullscreen {
      left: 0;
      width: 100% !important;
      height: 100% !important;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      border-radius: 0;
  }
  
  .modal-mask {
      background: rgba(0,0,0,.0);
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      position: fixed;
      z-index: 99997;
      display: none;
      content: '';
      background: rgba(0,0,0,.7);
  }
  
  .modal-box.active,
  .modal-box.fullscreen.active {
      pointer-events: auto;
  }
  
  .modal-box.active {
      top: 50%;
  }
  
  .modal-box.fullscreen.active {
      top: 0;
  }
  
  .modal-box.active .content img,
  .modal-box.fullscreen.active .content img {
      -webkit-animation: imgshow .5s forwards;
      animation: imgshow .5s forwards;
      -webkit-animation-delay: .5s;
      animation-delay: .5s;
      filter: alpha(opacity=0);  
      -moz-opacity: 0;   
      opacity: 0; 
  
  }
  
  @-webkit-keyframes imgshow {
      to {
          filter: alpha(opacity=100);  
          -moz-opacity: 1;   
          opacity: 1;
      }
  }
  
  @keyframes imgshow {
      to {
          filter: alpha(opacity=100);  
          -moz-opacity: 1;   
          opacity: 1;
      }
  }
  
  .modal-box .content {
      padding: 3.9375rem 2.1875rem 2.1875rem;
      -ms-word-wrap: break-word;
      word-wrap: break-word;
      height: 100%;
      overflow: hidden;
      
  }
  
  .modal-box.active .content {
      overflow-y: scroll;
  }
  
  .modal-box .close-btn {
      -webkit-box-shadow: 2.5px 4.33px 16px 0px rgba(204, 23, 30, 0.31);
      -moz-box-shadow: 2.5px 4.33px 16px 0px rgba(204, 23, 30, 0.31);
      box-shadow: 2.5px 4.33px 16px 0px rgba(204, 23, 30, 0.31);
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      background: rgba(204, 23, 30, 1);
      width: 36px;
      height: 36px;
      display: inline-block;
      text-align: center;
      line-height: 34px;
      overflow: hidden;
      position: absolute;
      right: 12px;
      top: 12px;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  
  .modal-box.fullscreen .close-btn {
      right: 26px;
  }
  
  
  .modal-box:not(.fullscreen).active .close-btn {
      background: none;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
  }
  
  .modal-box .close-btn:hover {
      background: #b50d14;
  }
  
  .modal-box:not(.fullscreen) .close-btn:hover {
      background: none;
  }
  
  .modal-box .close-btn:after {
      font-family: Arial, sans-serif;
      content: '+';
      color: #fff;
      font-size: 1.25rem;
      font-weight: 400;
  }
  
  .modal-box:not(.fullscreen).active .close-btn:after {
      color: #929292;
      font-size: 1.875rem;
  }
  
  
  /* ====================================================== 
     29. Tabs        
  /* ====================================================== */
  .tabs {
      -webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);
      -moz-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);
      box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);	
  }
  
  .tabs .content {
      display: none;
      padding: 1.3125rem;
      text-align: left;
  }
  .tabs .content.active {
      display: block;
  }
  
  .tabs li {
      list-style: none;
      float: left;
      -webkit-box-shadow: inset 1px 0px 0px 0px rgba(230,230,230,1);
      -moz-box-shadow: inset 1px 0px 0px 0px rgba(230,230,230,1);
      box-shadow: inset 1px 0px 0px 0px rgba(230,230,230,1);
      background: #f7f7f7;
  }
  
  .tabs ul:after {
      content: '';
      display: block;
      clear: both;
  }
  
  .tabs li a {
      display: block;
      text-align: center;
  }
  
  .tabs li.active {
      background: #eeeeee;
  }
  
  /* ====================================================== 
     30. Single Page        
  /* ====================================================== */
  
  /* Post edit link */
  .post-edit-link {
      display: inline-block;
      background: #F9F9F9;
      padding: 0.175rem 0.4375rem;
      border: 1px solid #DDDDDD;
      -webkit-border-radius: 2px; 
      -moz-border-radius: 2px; 
      border-radius: 2px;
      text-decoration: none !important;
      margin-top: 1.09375rem;
  }
  
  
  /* ====================================================== 
     31. WordPress Core            
  /* ====================================================== */
  .edit-link {
      display: block;
  }
  
  .edit-link:before,
  .edit-link:after {
      content: '';
      display: block;
      clear: both;
  }
  
  
  .edit-link a {
      text-decoration: underline;
  }
  
  .alignnone {
      margin: 0.4375rem 1.27624999994rem 1.27624999994rem 0;
  }
  
  .aligncenter,
  div.aligncenter {
      display: block;
      margin: 0.4375rem auto 0.4375rem auto;
  }
  
  .alignright {
      float: right;
      margin: 0.4375rem 0 1.27624999994rem 1.27624999994rem;
  }
  
  .alignleft {
      float: left;
      margin: 0.4375rem 1.27624999994rem 1.27624999994rem 0;
  }
  
  a img.alignright {
      float: right;
      margin: 0.4375rem 0 1.27624999994rem 1.27624999994rem;
  }
  
  a img.alignnone {
      margin: 0.4375rem 1.27624999994rem 1.27624999994rem 0;
  }
  
  a img.alignleft {
      float: left;
      margin: 0.4375rem 1.27624999994rem 1.27624999994rem 0;
  }
  
  a img.aligncenter {
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
  
  .wp-caption {
      background: #fff;
      border: 1px solid #f0f0f0;
      max-width: 96%;
      /* Image does not overflow the content area */
      padding: 0.4375rem 0.2625rem 0.625rem;
      text-align: center;
  }
  
  .wp-caption.alignnone {
      margin: 0.4375rem 1.27624999994rem 1.27624999994rem 0;
  }
  
  .wp-caption.alignleft {
      margin: 0.4375rem 1.27624999994rem 1.27624999994rem 0;
  }
  
  .wp-caption.alignright {
      margin: 0.4375rem 0 1.27624999994rem 1.27624999994rem;
  }
  
  .wp-caption img {
      border: 0 none;
      height: auto;
      margin: 0;
      max-width: 98.5%;
      padding: 0;
      width: auto;
  }
  
  .wp-caption p.wp-caption-text {
      font-size: 0.6875rem;
      line-height: 1.421875;
      margin: 0;
      padding: 0 0.35rem 0.4375rem;
  }
  
  /* Text meant only for screen readers. */
  .screen-reader-text {
      clip: rect(1px, 1px, 1px, 1px);
      position: absolute !important;
      height: 1px;
      width: 1px;
      overflow: hidden;
  }
  
  .screen-reader-text:focus {
      background-color: #f1f1f1;
      border-radius: 3px;
      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
      clip: auto !important;
      color: #21759b;
      display: block;
      font-size: 0.875rem;
      font-weight: bold;
      height: auto;
      left: 0.4375rem;
      line-height: normal;
      padding: 1.05rem 1.421875rem 0.875rem;
      text-decoration: none;
      top: 0.4375rem;
      width: auto;
      z-index: 100000;
  }
  
  /* Galleries */
  .gallery {
      margin-bottom: 1.4rem;
  }
  
  .gallery-item {
      display: inline-block;
      padding: 1.79104477%;
      text-align: center;
      vertical-align: top;
      width: 100%;
  }
  
  .gallery-columns-2 .gallery-item {
      max-width: 50%;
  }
  
  .gallery-columns-3 .gallery-item {
      max-width: 33.33%;
  }
  
  .gallery-columns-4 .gallery-item {
      max-width: 25%;
  }
  
  .gallery-columns-5 .gallery-item {
      max-width: 20%;
  }
  
  .gallery-columns-6 .gallery-item {
      max-width: 16.66%;
  }
  
  .gallery-columns-7 .gallery-item {
      max-width: 14.28%;
  }
  
  .gallery-columns-8 .gallery-item {
      max-width: 12.5%;
  }
  
  .gallery-columns-9 .gallery-item {
      max-width: 11.11%;
  }
  
  .gallery-icon img {
      margin: 0 auto;
  }
  
  .gallery-caption {
      color: #707070;
      color: rgba(51, 51, 51, 0.7);
      display: block;
      font-family: "Noto Sans", sans-serif;
      font-size: 1.2rem;
      line-height: 1.5;
      padding: 0.435rem 0;
  }
  
  .gallery-columns-6 .gallery-caption,
  .gallery-columns-7 .gallery-caption,
  .gallery-columns-8 .gallery-caption,
  .gallery-columns-9 .gallery-caption {
      display: none;
  }
  
  /* other */
  .sticky {}
  
  .ckeditor-html5-video video{width:100%;}