/*
Theme Name: Matraman Lite
Theme URI: http://www.themesawesome.com/products/wordpress-themes/matraman/
Author: Themes Awesome
Author URI: http://www.themesawesome.com
Description: Matraman Theme is Handsome Modern Blog theme. View demo at http://matraman.themesawesome.com/
Version: 2.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: matraman-lite
Domain Path: /languages/
Tags: custom-background, custom-header, custom-menu, custom-logo, featured-image-header, featured-images, footer-widgets, microformats, sticky-post, theme-options, threaded-comments, translation-ready, blog
-----------------------------------------------------------------------------------
  1.  BASE
  2.  HEADER
  3.  MENU
  4.  CONTENT
    4a. INDEX
    4b. SINGLE
    4c. SHORTCODE & CONTACT FORM
  5.  FOOTER
  6.  THIRD PARTY STYLING
  7.  MEDIA QUERIES
-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------*/
/*  1. BASE
/*-----------------------------------------------------------------------------------*/

html{
font-size:62.5%;
-webkit-font-smoothing:antialiased;
height:100%;
}
body{
word-wrap:break-word;
-ms-word-wrap:break-word;
font-size:16px;
font-size:1.6rem;
height:100%;
line-height:1.6;
background:#f1f1f1;
letter-spacing:0.2px;
font-family: 'PT Sans Narrow';
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Abel';
}
h1{
font-size:50px;
font-size:5rem;
line-height:1.4;
}
h2{
font-size:49px;
font-size:4.9rem;
line-height:1;
}
h3{
font-size:30px;
font-size:3rem;
line-height:1.11111;
}
h4{
font-size:20px;
font-size:2rem;
line-height:1.125;
}
h5{
font-size:18px;
font-size:1.8rem;
line-height:1.125;
}
h6{
font-size:16px;
font-size:1.6rem;
line-height:1.125;
}
p{
color:#686868;
margin:0 0 20px;
}
a{
cursor:pointer;
outline:none;
color:#8fd0cc;
}
a:hover, a:active, a:focus{
text-decoration:none;
outline:none;
color:#8fd0cc;
}
table{
width:80%;
margin-bottom:20px;
}
th, td{
padding:8px;
line-height:20px;
text-align:left;
vertical-align:top;
border:1px solid #ddd;
}
th{
font-weight:bold;
border-bottom:2px solid;
text-align:center;
}
*::-moz-selection{
background:#000;
color:#fff;
}
*::selection{
background:#000;
color:#fff;
}
img{
max-width:100%;
height:auto;
}
button{
background-image:none;
background:transparent;
}
.bypostauthor{
background:#ffffff;
}
.bypostauthor > .comment .comment-author cite:after{
content:"post author";
font-size:7px;
font-size:0.693333rem;
font-style:italic;
margin-left:6px;
}
.aligncenter{
display:block;
margin-left:auto;
margin-right:auto;
}
.alignright{
float:right;
}
img{
max-width:100%;
height:auto;
}
img.aligncenter, img.alignnone{
margin-bottom:12px;
}
img.alignleft{
margin:12px 24px 12px 0;
margin:10px 20px 10px 0;
}
img.alignright{
margin:12px 0 12px 24px;
margin:10px 0 10px 20px;
}
.wp-caption .wp-caption-text, .gallery-caption, .entry-caption{
font-style:italic;
line-height:2;
color:#757575;
font-size:12px;
font-size:1.2rem;
text-align:left;
}
::-webkit-input-placeholder{
color:#888888;
}
:-moz-placeholder{
/* Firefox 18- */
color:#888888;
}
::-moz-placeholder{
/* Firefox 19+ */
color:#888888;
}
:-ms-input-placeholder{
color:#888888;
}
.sticky:before {
  background-color: #8fd0cc;
  content: "Featured Post";
  padding: 10px 20px;
  color: #ffffff;
  float: right;
  position: relative;
  top: 0;
  z-index: 10;
  right: 0;
}
/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 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: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.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: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* 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: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar. */
}
/*-----------------------------------------------------------------------------------*/
/*  2. HEADER
/*-----------------------------------------------------------------------------------*/

.logo{
position:relative;
z-index:10;
margin: 13px 0;
}
.logo-image{
max-width:300px;
}
.site-header{
background:#000000;
padding:20px 0;
}
.site-title{
margin:0;
font-size: 30px;
font-size: 3rem;
}
.hero-section{width: 100%;margin: 0px auto;position:relative;height: 450px;/* overflow: hidden; */}
.hero-section-image{min-height: 450px;width: 100%;background-repeat:no-repeat;
/*background-size*/-webkit-background-size:/*@@prefixmycss->No equivalent*/;-moz-background-size:cover;-o-background-size:/*@@prefixmycss->No equivalent*/;background-size: 100%;background-attachment:fixed;/* background-position:center center; */opacity:0.5;/* margin-top: 15px; */}
.hero-section-single{
width:80%;
margin:20px auto -20px;
position:relative;
height:250px;
top:-10px;
margin-top:-80px;
}
.hero-section-single-image{
height:250px;
background-repeat:no-repeat;
/*background-size*/
-webkit-background-size:/*@@prefixmycss->No equivalent*/;
   -moz-background-size:cover;
     -o-background-size:/*@@prefixmycss->No equivalent*/;
        background-size:cover;
background-attachment:fixed;
background-position:top center;
-webkit-filter:blur(100px);
-moz-filter:blur(100px);
-o-filter:blur(100px);
-ms-filter:blur(100px);
filter:blur(100px);
opacity:0.8;
}
.header-default{
position: absolute;
    top: 40%;
    width: 40%;
    left: 30%;
    text-align: left;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
.hero-section .jumbo {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}
.header-default img{
width: 100%;
}
.header-default h1{
color:#ffffff;
text-align:center;
}
.hero-section .author-image {
  float: left;
  width: 20%;
  margin-right: 20px;
}
.hero-section .author-image img {
  border-radius: 50%;
}
.hero-section .author-text {
  float: left;
  width: 75%;
}
.hero-section .author-name {
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 25px;
  font-size: 2.5rem;
}

.hero-section .author-desc {
  color: #fff;
  font-size: 18px;
  font-size: 1.8rem;
  margin-top: 10px;
}

/*-----------------------------------------------------------------------------------*/
/*  3. MENU
/*-----------------------------------------------------------------------------------*/

#main-menu{
margin-top:15px;
position:relative;
z-index:10;
}
.sm-clean{
position:relative;
z-index:9999;
width:auto;
padding:0 10px;
text-align: center;
background: transparent;
}
.sm-clean ul{
width:200px;
margin-top:20px !important;
}
.sm-clean ul li, .sm-clean.sm-rtl ul li, .sm-clean.sm-vertical li {
  text-align: center;
}
/* Menu box
===================*/
.sm-clean-vertical{
padding:10px 0;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
}
.sm-clean ul{
padding:0;
background:#222222;
margin-top: 10px !important;
}
/* first sub level carets */

/* no carets for vertical main */
 .sm-clean-vertical > li > ul:before, .sm-clean-vertical > li > ul:after{
display:none;
}
/* Menu items
===================*/
.sm-clean a {
  color:#ffffff;
}
.sm-clean a, .sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active, .sm-clean a.highlighted {
padding:10px;
font-size:17px;
font-size:1.7rem;
text-decoration:none;
font-family: 'Abel';
}
.sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active, .sm-clean a.highlighted{
color:#8fd0cc;
}
.sm-clean-vertical a:hover, .sm-clean-vertical a:focus, .sm-clean-vertical a:active, .sm-clean-vertical a.highlighted{
background:#8fd0cc;
}
.sm-clean a.has-submenu{
padding-right:25px;
}
.sm-clean-vertical a, .sm-clean ul a{
padding:7px 20px;
}
.sm-clean-vertical a.has-submenu, .sm-clean ul a.has-submenu{
padding-right:0;
padding-left:0;
}
.sm-clean ul a{
font-size:18px;
font-size:1.8rem;
}
.sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted{
color:#ffffff;
background:#8fd0cc;
}
/* current items - add the class manually to some item or check the "markCurrentItem" script option */
 .sm-clean a.current, .sm-clean a.current:hover, .sm-clean a.current:focus, .sm-clean a.current:active{
color:#ffffff;
background:#8fd0cc;
}
ul.sm ul li:first-child{
border-top:2px solid #8fd0cc;
}
/* Sub menu indicators
===================*/
 .sm-clean a span.sub-arrow{
position:absolute;
right:12px;
top:55%;
margin-top:-3px;
/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
width:0;
height:0;
overflow:hidden;
border-width:4px;
/* tweak size of the arrow */
border-style:solid dashed dashed dashed;
border-color:#fff transparent transparent transparent;
}
.sm-clean-vertical a span.sub-arrow, .sm-clean ul a span.sub-arrow{
right:15px;
top:50%;
margin-top:-5px;
border-width:5px;
border-style:dashed dashed dashed solid;
border-color:transparent transparent transparent #ffffff;
}
/* Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." -> "more..." in the default download package
===================*/
 .sm-clean span.scroll-up, .sm-clean span.scroll-down{
position:absolute;
display:none;
visibility:hidden;
overflow:hidden;
background:#fff;
height:20px;
/* width and position will be automatically set by the script */
:;
}
.sm-clean span.scroll-up:hover, .sm-clean span.scroll-down:hover{
background:#eee;
}
.sm-clean span.scroll-up-arrow, .sm-clean span.scroll-down-arrow{
position:absolute;
top:0;
left:50%;
margin-left:-6px;
/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
width:0;
height:0;
overflow:hidden;
border-width:6px;
/* tweak size of the arrow */
border-style:dashed dashed solid dashed;
border-color:transparent transparent #555 transparent;
}
.sm-clean span.scroll-up:hover span.scroll-up-arrow{
border-color:transparent transparent #D23600 transparent;
}
.sm-clean span.scroll-down-arrow{
top:8px;
border-style:solid dashed dashed dashed;
border-color:#555 transparent transparent transparent;
}
.sm-clean span.scroll-down:hover span.scroll-down-arrow{
border-color:#D23600 transparent transparent transparent;
}
/*---------------------------------------------------------------
  Responsiveness
  These will make the sub menus collapsible when the screen width is too small.
---------------------------------------------------------------*/

@media screen and (max-width: 850px){
.sm-clean:not(.sm-clean-vertical) > li > a {        padding-left:8px;
padding-right:8px;
}
}

@media screen and (max-width: 750px){
.sm-clean:not(.sm-clean-vertical) > li > a {        padding-left:3px;
padding-right:3px;
}
}

@media screen and (max-width: 992px){
/* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */
ul.sm-clean {
        width:auto !important;
}
ul.sm-clean ul{
display:none;
position:static !important;
top:auto !important;
left:auto !important;
margin-left:0 !important;
margin-top:0 !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
}
ul.sm-clean>li{
float:none;
}
ul.sm-clean>li>a, ul.sm-clean ul.sm-nowrap>li>a{
white-space:normal;
}
ul.sm-clean iframe{
display:none;
}
/* Menu box
===================*/
   
.sm-clean{
padding:0;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
}
.sm-clean ul{
border:0;
padding:0;
/* darken the background of the sub menus */
background:rgba(130, 130, 130, 0.1);
/*border-radius*/
-webkit-border-radius:0;
   -moz-border-radius:0;
        border-radius:0;
/*box-shadow*/
-webkit-box-shadow:none;
   -moz-box-shadow:none;
        box-shadow:none;
}
/* no carets */
    .sm-clean > li > ul:before, .sm-clean > li > ul:after{
display:none;
}
/* Menu items
    ===================*/
    .sm-clean a{
color:#FFF !important;
background:transparent !important;
}
.sm-clean a.current{
color:#D23600 !important;
}
/* add some text indentation for the 2+ level sub menu items */
    .sm-clean ul a{
border-left:8px solid transparent;
}
.sm-clean ul ul a{
border-left:16px solid transparent;
}
.sm-clean ul ul ul a{
border-left:24px solid transparent;
}
.sm-clean ul ul ul ul a{
border-left:32px solid transparent;
}
.sm-clean ul ul ul ul ul a{
border-left:40px solid transparent;
}
/* Sub menu indicators
    ===================*/


    /* Hide sub indicator when item is expanded - we enable the item link when it's expanded */
    .sm-clean a.highlighted span.sub-arrow{
display:none !important;
}
/* Items separators
    ===================*/
    .sm-clean li{
border-top:1px solid rgba(0, 0, 0, 0.05);
}
.sm-clean > li:first-child{
border-top:0;
}
}
.sm-clean ul{
border:0;
/*border-radius*/
-webkit-border-radius:0;
   -moz-border-radius:0;
        border-radius:0;
/*box-shadow*/
-webkit-box-shadow:none;
   -moz-box-shadow:none;
        box-shadow:none;
}

.sm-clean ul a, .sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted {
    padding: 7px 20px;
    color: #ffffff;
    line-height: normal;
    font-size: 18px;
    font-size: 1.8rem;
   font-family: 'Abel';
}
.sm-clean > li > ul:before, .sm-clean > li > ul:after {
  display: none;
}

/*-----------------------------------------------------------------------------------*/
/*  4. CONTENT
/*-----------------------------------------------------------------------------------*/

.site-main{
background:#ffffff;
position:relative;
margin-top:-100px;
}
.pagination{
padding:40px 0;
}
.pagination .current{
color:#8fd0cc;
border:2px solid #8fd0cc;
padding:10px 15px;
margin:0 5px;
}
.pagination a:hover{
border:2px transparent;
color:#8fd0cc;
}
.pagination a{
color:#959595;
border:2px transparent;
padding:10px;
margin:0 5px;
}
.page-title h1{
color:#f8f8f8;
text-transform:uppercase;
font-weight:bold;
margin:0;
}
.page-title  .bord{
background-color:#f8f8f8;
display:block;
height:4px;
margin:0 auto;
width:60px;
max-width:100%;
}
/*-----------------------------------------------------------------------------------*/
/*  4a. INDEX
/*-----------------------------------------------------------------------------------*/


#grid{
list-style:none;
margin:30px auto 0;
padding:0;
max-width:100%;
}
#grid li.post{
display:block;
float:left;
padding:15px;
opacity:1;
}
li.post .post-entry{
background:#fff;
padding:10px 30px;
position:relative;
border-bottom:2px solid #eaeaea;
}
li.post .post-content{
padding:40px;
background:#f1f1f1;
}
li.post.has-post-thumbnail.format-standard .post-content, li.post.format-gallery .post-content, li.post.format-image .post-content{
padding:0 40px;
}
li.post.format-standard .post-entry, li.post.format-gallery .post-entry, li.post.format-image .post-entry{
top:-45px;
margin-top:-50px;
}
li.post .meta-bottom{
border-top:1px solid #f1f1f1;
padding-top:10px;
margin-bottom:15px;
}
li.post .meta-bottom span{
margin-left:10px;
color:#686868;
}
li.post .meta-bottom span:first-child{
margin-left:0;
}
li.post .meta-bottom i{
margin-right:5px;
color:#686868;
vertical-align:middle;
}
li.post .post-meta{
border-bottom:1px solid #f1f1f1;
padding-bottom:5px;
margin-bottom:10px;
}
li.post .post-meta span{
margin-left:5px;
}
li.post .post-meta span:first-child{
margin-left:0;
}
li.post .post-meta i{
margin-right:5px;
color:#686868;
vertical-align:middle;
}
li.post span.author{
padding-right:3px;
}
li.post h2.post-title {
margin-bottom:5px;
font-size:28px;
font-size:2.8rem;
color:#222222;
line-height:1.2;
}
li.post .post-meta a{
color:#686868;
}
li.post i.post-type{
font-size:16px;
font-size:1.6rem;
background:#8fd0cc;
color:#ffffff;
padding:10px 12px 5px;
vertical-align:middle;
/*border-radius*/
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
position:absolute;
left:45%;
top:-20px;
z-index:10;
}
#grid li.post.format-quote i.post-type{
top:0;
}
li.post iframe{
max-width:100%;
}
span.category a, span.tag-wrapper a{
color:#686868;
}
/*post format quote*/
#grid li.post.format-quote .post-content{
background:#000;
}
#grid li.post.format-quote .post-content blockquote{
border-left:none;
position:relative;
}
#grid li.post.format-quote .post-content blockquote:before{
color:#8fd0cc;
content:"y";
font-family:"matraman";
position:absolute;
font-size:30px;
font-size:3rem;
margin-left:-20px;
}
#grid li.post.format-quote .post-content blockquote p{
padding-left:10px;
margin-left:20px;
color:#ffffff;
font-size:38px;
font-size:3.8rem;
line-height:1.2;
}
#grid li.post.format-quote .post-content .quote-thumb{
width:20%;
float:right;
}
#grid li.post.format-quote .post-content .quote-thumb img{
/*border-radius*/
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
}
#grid li.post.format-quote .post-content .quote-attribution{
margin-top:5%;
padding-right:3%;
float:right;
}
#grid li.post.format-quote .post-content .quote-attribution p{
margin:0;
color:#ffffff;
}
#grid li.post.format-quote .post-content .quote-attribution cite{
color:#8fd0cc;
float:right;
}
/*status*/

#grid li.post.format-status .post-content{
background:none;
border:none;
padding:40px 0;
}
#grid li.post.format-status .post-content .post-entry{
border:none;
padding-bottom:60px;
}
.post-format-link h2{
font-size:30px;
font-size:3rem;
text-align:center;
}
/*-----------------------------------------------------------------------------------*/
/*  4b. SINGLE
/*-----------------------------------------------------------------------------------*/

h1.entry-title {
margin-top:40px;
text-align:center;
font-size:42px;
font-size:4.2rem;
color:#222222;
line-height:1.2;
}
article.post .post-thumb img{
width:100%;
}
article.post .post-meta{
text-align:center;
padding-bottom:5px;
margin-bottom:10px;
}
article.post .post-meta span{
margin-left:5px;
}
article.post .post-meta span:first-child{
margin-left:0;
}
article.post .post-meta i{
margin-right:5px;
color:#686868;
vertical-align:middle;
}
article.post span.author{
padding-right:3px;
}
article.post h2.post-title {
margin-bottom:5px;
font-size:28px;
font-size:2.8rem;
color:#222222;
line-height:1.2;
}
article.post .post-meta a{
color:#686868;
}
article.post i.post-type{
font-size:20px;
font-size:2rem;
background:#8fd0cc;
color:#ffffff;
padding:12px 15px 6px;
vertical-align:middle;
/*border-radius*/
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
position:absolute;
left:47.5%;
top:-20px;
z-index:10;
}
article.post .post-entry{
padding:4% 6%;
}
article.post .meta-bottom{
padding-top:10px;
}
article.post .meta-bottom span{
margin-left:10px;
color:#686868;
}
article.post .meta-bottom span:first-child{
margin-left:0;
}
article.post .meta-bottom i{
margin-right:5px;
color:#686868;
vertical-align:middle;
}
article.post .tag-wrapper{
float:right;
}
/*single quote*/
.single .format-quote .quote-wrap{
background:#000;
}
.single .format-quote .quote-wrap blockquote{
border:none;
text-align:center;
padding:25px 0 10px;
}
.single .format-quote .quote-wrap blockquote:before{
color:#8fd0cc;
content:"y";
font-family:"matraman";
font-size:30px;
font-size:3rem;
}
.single .format-quote .quote-wrap blockquote p{
padding-left:10px;
margin-left:20px;
color:#ffffff;
}
.single .format-quote .quote-wrap .quote-thumb{
width:10%;
margin:0 auto;
}
.single .format-quote .quote-wrap .quote-thumb img{
/*border-radius*/
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
}
.single .format-quote .quote-wrap .quote-attribution{
margin-top:2%;
text-align:center;
padding-bottom:3%;
}
.single .format-quote .quote-wrap .quote-attribution p{
margin:0;
color:#ffffff;
}
.single .format-quote .quote-wrap .quote-attribution cite{
color:#8fd0cc;
}
/*single status format*/
.single .ta-entry-status iframe{
margin:10px auto !important;
}
/*single chat*/

.single .format-chat .post-entry .inner-content p:nth-child(even){
border-right:3px solid #8fd0cc;
padding-right:10px;
text-align:right;
}
.single .format-chat .post-entry .inner-content p:nth-child(odd){
background:transparent;
border-left:3px solid #8fd0cc;
border-right:0;
text-align:left;
padding-left:10px;
}
/*single navigation*/
.navigation-single{
padding:0 6%;
}
.navigation-post{
border-top:1px solid #f1f1f1;
padding:40px 0;
}
.navigation-post a{
border:2px solid #8fd0cc;
padding:15px 20px;
font-size:18px;
font-size:1.8rem;
color:#8fd0cc;
}
.navigation-post a:hover{
border:2px solid #8fd0cc;
background:#8fd0cc;
color:#ffffff;
}
/*comment section*/
.comments-area{
padding:0 6% 40px;
}
.comments-title{
border-top:1px solid #f1f1f1;
padding-top:20px;
padding-bottom:10px;
color:#8fd0cc;
}
.comments-title h4{
font-weight:bold;
}
.comments-area ol, .comments-area ol li{
list-style:none;
padding:0;
}
.comments-area  .meta-comment{
margin-left:20px;
}
.comment-author{
display:inline-block;
}
.comment-author cite{
font-weight:bold;
}
.comment-meta{
display:inline-block;
}
.comment-content{
margin-top:10px;
padding-left:70px;
}
.comment-reply-title{
font-size:20px;
font-size:2rem;
}
#commentform label, #commentform .comment-form-comment span{
margin-bottom:5px;
font-size:14px;
font-size:1.4rem;
font-weight:100;
display:block;
text-align:left;
}
#commentform label span{
font-size:13px;
font-size:1.3rem;
color:#000000;
}
.comment-form-comment{
margin-top:10px;
}
.comment-form-author, .comment-form-email{
width:32%;
display:inline-block;
vertical-align:top;
float:left;
}
.comment-form-email{
margin-left:2%;
}
.comment-form-url{
width:32%;
float:left;
margin-left:2%;
}
.input-container{
position:relative;
}
.input-container label{
position:absolute;
top:0;
}
.comment-form-author input, .comment-form-email input{
font-size:10px;
font-size:1rem;
outline:0;
padding:0.5em;
color:#000000;
border:0;
border:1px solid #e5e5e5;
float:left;
}
input, textarea, .uneditable-input{
width:100%;
font-size:20px;
font-size:2rem;
outline:0;
color:#333333;
border:0;
border:1px solid #e5e5e5;
padding-left:10px;
}
.comment-form-url input{
font-size:10px;
font-size:1rem;
outline:0;
padding:0.5em;
color:#000000;
border:0;
border:1px solid #e5e5e5;
}
input#submit{
font-size:16px;
font-size:1.6rem;
border:2px solid #8fd0cc;
padding:10px 20px;
color:#8fd0cc;
width:auto;
background:transparent;
text-transform:uppercase;
}
input#submit:hover{
background:#8fd0cc;
color:#ffffff;
}
/*-----------------------------------------------------------------------------------*/
/*  4c. Shortcode and Contact Form
/*-----------------------------------------------------------------------------------*/

#main .su-spoiler{
margin-bottom:0;
}
#main .su-spoiler-style-default > .su-spoiler-title{
border-bottom:1px solid #ffffff;
padding-top:15px;
padding-left:30px;
padding-right:15px;
padding-bottom:15px;
background:#000000;
color:#ffffff;
}
/*===================*/
#main .su-spoiler-title{
font-size:16px;
font-size:1.6rem;
text-transform:uppercase;
font-weight:normal;
}
#main .su-spoiler-style-default > .su-spoiler-content{
padding-right:1em;
padding-left:30px;
}
#main .su-spoiler-icon{
left:4px;
top:15px;
color:#8fd0cc;
}
#main .su-tabs{
background:transparent;
}
#main .su-tabs .su-tabs-nav .su-tabs-current{
background:transparent;
color:#000;
border-bottom:2px solid #ffffff;
border-top:4px solid #8fd0cc;
}
#main .su-tabs-vertical .su-tabs-nav .su-tabs-current{
border-bottom:2px solid #000;
border-top:2px solid #000 !important;
border-right:2px solid #ffffff;
margin-right:-2px;
position:relative;
border-left:4px solid #8fd0cc;
}
#main .su-tabs-nav{
margin-bottom:-2px;
}
#main .su-tabs .su-tabs-nav span{
border:2px solid #000000;
color:#000000;
padding:10px 15px;
/*border-radius*/
-webkit-border-radius:0;
   -moz-border-radius:0;
        border-radius:0;
}
#main .su-tabs-panes{
border-left:2px solid #000000;
border-bottom:2px solid #000000;
border-right:2px solid #000000;
border-top:2px solid #000000;
}
#main .su-tabs-pane p{
color:#000000;
}
#main .su-tabs-vertical .su-tabs-nav span{
margin-bottom:5px;
border-right:0;
}
/*contact form*/

.wpcf7-submit{
font-size:16px;
font-size:1.6rem;
border:2px solid #8fd0cc;
padding:10px 20px;
color:#8fd0cc;
width:auto;
background:transparent;
text-transform:uppercase;
}
.wpcf7-submit:hover{
background:#8fd0cc;
color:#ffffff;
}
/*-----------------------------------------------------------------------------------*/
/*  5. FOOTER
/*-----------------------------------------------------------------------------------*/

.site-footer{
background:#000000;
color:#ffffff;
padding:140px 0 40px;
margin-top:-80px;
}
/*-----------------------------------------------------------------------------------*/
/*  5a. Footer Widget
/*-----------------------------------------------------------------------------------*/

.widget-footer{
padding:0 20px;
}
.widget-footer p{
color:#ffffff;
}
.widget-footer{
padding:0 20px;
margin-bottom:30px;
}
.widget-footer p{
color:#ffffff;
}
.widget-footer ul{
padding:0;
}
.widget-footer ul li{
list-style:none;
margin-bottom:5px;
padding-bottom:5px;
border-bottom:1px solid #959595;
}
.widget-footer ul li a{
color:#8fd0cc;
}
.form.mc4wp-form {
  position: relative;
}
.mc4wp-form input.form-newsletter{
float:left;
margin:0;
width:75% !important;
height:42px;
padding:9px 18px;
line-height:1.8;
color:#444;
background-color:transparent;
background-image:none;
border:1px solid #5C5C5C;
/*box-shadow*/
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
   -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
/*transition*/
-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
   -moz-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
     -o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.mc4wp-form input.form-newsletter:focus{
border-color:#d5d5d5;
outline:0;
/*box-shadow*/
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(213,213,213,.6);
   -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(213,213,213,.6);
        box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(213,213,213,.6);
}
.mc4wp-form .subscribe{
float:right;
position: absolute;
right: 0;
bottom: 0;
}
.mc4wp-form .subscribe a:before{
padding:5px 15px;
}
.mc4wp-form .subscribe a span{
background:#222222;
padding:5px 15px;
}
.mc4wp-form .subscribe .btn{
border:2px solid #8fd0cc;
padding:10px 15px;
background-color: transparent;
/*border-radius*/
-webkit-border-radius:0;
   -moz-border-radius:0;
        border-radius:0;
color:#8fd0cc;
}
.mc4wp-form .subscribe .btn:hover{
background:#8fd0cc;
color:#ffffff;
}
.widget_categories ul{
padding:0;
}
.widget_categories ul li{
list-style:none;
margin-bottom:5px;
padding-bottom:5px;
border-bottom:1px solid #2E2E2E;
}
.widget_categories ul li a:before{
display:none;
}
.widget-footer-title h4{
margin-top:0;
}
/*social box*/
.matraman-socialbox ul{
padding:0;
}
.matraman-socialbox ul li{
list-style:none;
float:left;
border:none;
width:50%;
margin:0;
padding-top:10px;
}
.matraman-socialbox ul li a, .matraman-socialbox ul li a:hover{
color:#ffffff;
}
.matraman-socialbox ul li a:before{
display:none;
}
.matraman-socialbox ul li a p{
display:inline-block;
margin:0;
padding:0;
}
.matraman-socialbox ul li a p span{
font-weight:bold;
}
.matraman-socialbox ul li i{
margin-right:15px;
font-size:30px;
font-size:3rem;
}
/*social icon*/
.matraman-socialbox ul li i.icon-facebook:before{
background:#3b5998;
padding:10px;
/*border-radius*/
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
}
.matraman-socialbox ul li i.icon-twitter:before{
background:#55ACEE;
padding:10px;
/*border-radius*/
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
}
.matraman-socialbox ul li i.icon-google-plus:before{
background:#DD4B39;
padding:10px;
/*border-radius*/
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
}
.matraman-socialbox ul li i.icon-linkedin:before{
background:#0066AF;
padding:10px;
/*border-radius*/
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
}
.matraman-socialbox ul li i.icon-pinterest:before{
background:#ab171e;
padding:10px;
/*border-radius*/
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
}
.matraman-socialbox ul li i.icon-instagram:before{
background:#517fa4;
padding:10px;
/*border-radius*/
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
}
.matraman-socialbox ul li i.icon-youtube:before{
background:#cc181e;
padding:10px;
/*border-radius*/
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
}
/*monster widget*/
select{
color:#222222;
width:100%;
}
/*search form*/
.widget_search form input{
float:left;
margin:0;
width:77%;
height:40px;
padding:9px 18px;
line-height:1.8;
margin-bottom:15px;
color:#444;
background-color:transparent;
background-image:none;
border:1px solid #5C5C5C;
}
.widget_search .search-button{
float:right;
width:20%;
background:url("img/search2.png") no-repeat scroll center center transparent;
border:2px solid #8fd0cc;
}
/*tags*/
.widget-footer .tagcloud a{
color:#959595;
border:1px solid #959595;
padding:5px 10px;
margin-left:5px;
display:inline-block;
font-size:15px !important;
font-size:1.5rem !important;
margin-bottom:10px;
}
.widget-footer .tagcloud a:hover{
background-color:#8fd0cc;
border:1px solid #8fd0cc;
color:#ffffff;
}
/*-----------------------------------------------------------------------------------*/
/*  6. THIRD PARTY
/*-----------------------------------------------------------------------------------*/

/*flexslider*/

.flexslider{
margin:0;
border:0;
/*box-shadow*/
-webkit-box-shadow:none;
   -moz-box-shadow:none;
        box-shadow:none;
/*border-radius*/
-webkit-border-radius:0;
   -moz-border-radius:0;
        border-radius:0;
}
.flex-direction-nav a{
border:3px solid;
color:#8fd0cc;
}
.flex-direction-nav a:before{
font-size:20px;
font-size:2rem;
}
.flex-direction-nav .flex-next, .flex-direction-nav .flex-prev{
text-align:center;
}
/*-----------------------------------------------------------------------------------*/
/*  7. MEDIA QUERY
/*-----------------------------------------------------------------------------------*/


@media screen and (max-width: 1440px){
.hero-section, .hero-section-single {
    width:100%;
}
}

@media screen and (max-width: 992px){
#main-menu, .logo {
    float:none !important;
text-align:center;
}
.sm-clean a.has-submenu{
padding-right:0;
}
#grid li.post.format-quote .post-content .quote-attribution p{
margin:0;
}
.header-default{
width:70%;
left:15%;
}
.ta-entry-audio iframe{
width:100%;
}
#grid li.post.format-link{
width:100%;
}
}

@media screen and (max-width: 768px){
#grid li.post.format-quote .post-content .quote-attribution p {
    margin:0 0 30%;
}
.site-main{
padding:0;
}
li.post .post-content{
padding:10px;
}
li.post.has-post-thumbnail.format-standard .post-content, li.post.has-post-thumbnail.format-gallery .post-content, li.post.has-post-thumbnail.format-image .post-content{
padding:0 10px;
}
.footer-widget{
margin-bottom:30px;
}
.widget-footer{
margin-bottom:20px;
}
.wrapper .row{
margin:0;
}
li.post.has-post-thumbnail.format-standard .post-entry, li.post.has-post-thumbnail.format-gallery .post-entry, li.post.has-post-thumbnail.format-image .post-entry{
top:-15px;
margin-top:-20px;
}
}
.map iframe {
  width: 100%;
  max-width: 100%;
  height: 450px;
}

.page-template-contact-template .post-entry {
    padding: 4% 6%;
}
.navigation-paging .nav-previous, .navigation-paging .nav-next {
  border: 2px solid #8fd0cc;
    padding: 15px 20px;
    font-size: 18px;
    font-size: 1.8rem;
    color: #8fd0cc;
    margin: 20px 15px;
}
.navigation-paging .nav-previous:hover, .navigation-paging .nav-next:hover {
    border: 2px solid #8fd0cc;
    background: #8fd0cc;
    color: #ffffff;
}
.navigation-paging .nav-previous:hover a, .navigation-paging .nav-next:hover a {
  color: #ffffff;
}