/*
Theme Name:   Colored
Theme URI:    http://hostatto.com/сolored.html
Description:  Colored is a simple, minimal, responsive and easy customized WordPress theme well suited for blog, news, portfolio, personal, design, art and other purposes. Theme contain full-screen slider, two different search widgets for header and sidebar, popular post widget, popup widget, two menus for header and footer, and oter useful options. Theme according to the latest web standards such as HTML5, CSS3 and is SEO friendly. Theme is ready for translation.
Version:      1.0
Author:       hostatto.com
Author URI:   http://hostatto.com
License: GNU  GPL v3.0
License URI:  http://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  colored
Domain Path:  /languages/
Tags:         custom-background, custom-colors, custom-menu, custom-header, right-sidebar, left-sidebar, two-columns, full-width-template, translation-ready, news, blog, portfolio

Copyright 2022 hostatto.com 
*/

/*-------------------------------------------------------*/
/*  = Global css styles 
/*-------------------------------------------------------*/
*{
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}
html{
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
}
.fix{
    margin:0 auto;
    max-width:1120px;
}
.wrapper{ 
    position: relative;
    box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2) !important;
}
.hh,.ff{
    padding: 0px 15px;
}
.cc{
    padding: 10px 15px;
    overflow: hidden;
}
.content{
    width: 75%;
}
.sidebar{
    width: 25%;
}
/*-------------------------------------------------------*/
/*  = Helper styles 
/*-------------------------------------------------------*/
.left{
    float: left;
}
.right{
    float: right;
}
.none{
    float: none;
}
.image{
    float: left;
    position: relative;
}
.img-responsive{
    display: block;
    height: auto;
    max-width: 100% !important;
}
.center{
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}
.clear:before,
.clear:after{
    content: " ";
    display: table;
}
.clear:after {
    clear: both;
}
/*-------------------------------------------------------*/
/*  = Main template css styles
/*-------------------------------------------------------*/
body{
    font: 14px/22px 'Libre Franklin', 'Open Sans', Tahoma, Verdana, sans-serif;
}
a{
    color: #000;
    text-decoration: none;
}
h1{ font-size: 24px; }
h2{ font-size: 22px; }
h3{ font-size: 20px; }
h4{ font-size: 18px; }
h5{ font-size: 16px; }
h6{ font-size: 14px; }

h1,h2,h3,h4,h5,h6{
    padding: 10px 0;
}
p{}
/*-------------------------------------------------------*/
/*  = Columns
/*-------------------------------------------------------*/
.q1, .q2, .q3, .q4, .q5, .q6, .q7, .q8, .q9, .q10, .q11, .q12{
    float: left;
    position: relative;
    /*overflow: hidden;*/
}
.q1{
    width: 8.3333%;
}
.q2{
    width: 16.6666%;
}
.q3{
    width: 25%;
}
.q4{
    width: 33.3333%;
}
.q5{
    width: 41.6666%;
}
.q6{
    width: 50%;
}
.q7{
    width: 58.3333%;
}
.q8{
    width: 66.6666%;
}
.q9{
    width: 75%;
}
.q10{
    width: 83.3333%;
}
.q11{
    width: 91.6666%;
}
.q12{
    width: 100%;
}
/*-------------------------------------------------------*/
/*  = Default Colors
/*-------------------------------------------------------*/
body{
    background: #beeb9f;
}
.header{}
.header-color{
    background: #beeb9f;
}
.fixed{
    background: #beeb9f;
}
.footer{
    background: #beeb9f;
}
.wrapper{
    background: #fff8e3;
}
/*-------------------------------------------------------*/
/*  = Footer to bottom
/*-------------------------------------------------------*/
.wrapper{
    min-height: 100%;
}
.cc{
    padding-bottom: 50px;
}
.footer{
    position: absolute;
    left: 0; right:0;
    bottom: 0;
    width: 100%;
    margin-left:auto;
    margin-right:auto;   
}
/*-------------------------------------------------------*/
/*  = Header
/*-------------------------------------------------------*/
.header,.header-color,.logo{
    height: 50px;

}
.header{
    width: 100%;
}
.header a{
	color: #fff;
}
.logo{
    float: left;
    line-height: 50px;
}
.logo a{
    font: bold 26px Tahoma, Arial, Verdana, sans-serif;
    font-weight: 900;
    text-decoration: none;
}
/*-------------------------------------------------------*/
/*  = Fixed header
/*-------------------------------------------------------*/
.fixed{
    position: fixed !important;
    width: 100%;
    z-index: 1001;
    left: 0;
    right: 0;
    -webkit-backface-visibility: hidden;
}
/*-------------------------------------------------------*/
/*  = Top menu
/*-------------------------------------------------------*/
.top-menu{
    float: right;
}
.top-menu a{
    padding: 14px 0;
}
.nav,
.nav-bot{
    float: left;
    margin: 0;
    padding: 0;
}
.nav li{
    display: inline-block;
    padding-left: 15px;
}
.nav li a{
    text-transform: lowercase;
    display: inline-block;
    padding: 14px 0;
}
.nav-bot li:first-child,
.nav-bot li a:first-child{
    padding-left:0;
}
.nav-bot li a i{
    font-size: 16px;
}
.nav a{
    font-size: 15px;
}
.nav li.current-menu-item a {
    border-bottom: 2px solid black;
    padding-bottom: 12px;
}
/*-------------------------------------------------------*/
/*  = Header sub menu
/*-------------------------------------------------------*/
.nav ul{
    display: none;
    position: absolute;
    top: 50px; 
    z-index: 1000;
}
.nav ul ul{
    display: block;
    top: auto;
}
.nav ul.active{
    display: block;
}
.nav ul li{
    display: block;
    background: #000;
    min-width: 150px;
    border-bottom: 1px solid #252525;
    white-space: nowrap;
}
.nav ul li:last-child{
    border-bottom: none;
}
.nav ul li a{
    background: none;
    display: block;
    color: #fff;
    padding: 7px 15px 7px 15px;
}
.nav ul ul li{
    border-left: 1px solid #252525;
}
.nav ul.sub-menu li.current-menu-item a{
    background: #111;
    border-bottom: 0;
    padding-bottom: 7px;
}
.nav ul.sub-menu li.current-menu-item ul li a{
    background: none;
}
.nav li .sub-menu li{
    padding-right: 0;
    padding-left: 0;
}
/*-------------------------------------------------------*/
/*  = Main content
/*-------------------------------------------------------*/
.content p{
    margin-bottom: 15px;
	font-size: 16px;
}
.content a:hover{
    text-decoration: underline;
}
/*-------------------------------------------------------*/
/*  = Breadcrumbs
/*-------------------------------------------------------*/
.breadcrumbs{
    display: block;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px dotted #ccc;
    padding: 10px 0;
}
.breadcrumbs a{
    text-decoration:underline;
}
.breadcrumbs .current{
    font-weight: normal;
}
.delimiter{
    padding-left: 3px; 
    padding-right: 3px;
    text-orientation: none;
}
/*-------------------------------------------------------*/
/*  = Article
/*-------------------------------------------------------*/
article:first-child{
    margin-top: 0;
}
.ph1,.post-top-in{
    font-size: 24px;
    border-bottom: 1px dotted #ccc;
    width: 100%;
}
.ph2{
    font-size: 22px;
}
.post-title{
    float: left;
    width:         calc(100% - 50px);
    width:    -moz-calc(100% - 50px);
    width: -webkit-calc(100% - 50px);
}
.post-top-in clear{
    clear: both;
}
.meta{
    position: relative;
    float: left;
    font-size: 12px;
    width: 100%;
}
.meta li:after{
    position: relative;
    font-size: 20px;
    top: 4px; 
    left: 3px;
    content:"•";
}
.meta li:last-child:after{
    content:"";
}
.meta li{
    display: inline-block;
    color: #252525;
    margin-right: 5px;
}
.meta a{
    text-decoration: underline;
}
.post-content{
    display: block;
    /*float: left;*/
    clear: both;
    margin-top: 10px;
    margin-bottom: 5px;
}
.post-content a{
    text-decoration: underline;
}
.post-content img{
    display: block;
    height: auto;
    max-width: 100% !important;
}
.post-content ul{
    margin: 10px 0px 10px 20px;
}
.post-content ol{
    margin: 10px 0px 10px 40px;
}
.post-content ol li{
    list-style-type: decimal;
}
.post-content input, section input{
    border: 1px solid #ccc;
    height: 30px;
    margin: 3px 5px 3px 0;
    padding-left: 10px;
}
input.txt{
    border: 1px solid #ccc;
    height: 30px;
    margin: 3px 0;
    padding: 0 10px;
    width:        calc(100% - 20px);
    width:    -moz-calc(100% - 20px);
    width: -webkit-calc(100% - 20px);
}
textarea{
    border: 1px solid #ccc;
    margin: 3px 0;
    padding: 10px;
    /*width: calc(100% - 20px);*/
}
.post-content input.radio,
.post-content input.checkbox{
    height: auto !important;
}
.post-content input.file{
    background: none;
    border:0;
    padding: 0;
}
.post-content select{
    border: 1px solid #ccc;
}
.comment-title{
    float: right;
    margin-top: 7px;
    background: url("images/comment1.png") no-repeat scroll 0 0 transparent;
    height: 33px;
    width: 38px;
}
.comment-title a{
    position: relative;
    display: block;
    top: 3px;
    color: #000;
    font-size: 11px;
    overflow: hidden;
    text-align: center;
}
.comment-title .reply{
    visibility: hidden;
}
.comment-title span{
    display: none;
}
#recentcomments{
    margin-top: 10px;
}
.recentcomments{
    margin-bottom: 10px;
}
.post{
    position: relative;
    float: left;
    display: block;
    clear: both;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
    border-bottom: 1px dotted #ccc;
}
blockquote{
    background: #eee;
    /*border-left: 3px solid #999;*/
    border:1px dashed #999;
    padding: 5px 10px;
    margin: 10px 0px 15px 0px;
    font-family: Courier, Courier New, Consolas, monospace, sans-serif;
    white-space: nowrap;
    overflow-x: auto;
}
blockquote p{
    /*padding: 0px 15px;*/
}
.content blockquote p{
    margin-bottom: 0px;
}
.tags,.cattags{
    margin-bottom: 10px;
}
.tags a,.cattags a, .tagcloud a{
    background:none;
    border-radius: 3px;
    text-decoration: none;
    padding: 0px 8px;
    margin:10px 5px 20px 0;
    color: #000;
    border:1px dotted #000;
}
.tagstitle{
    font-weight: bold;
    margin-bottom: 5px;
}
.optgroup[label]{
    font-style: normal;
}
.image{
    padding: 0px 13px 5px 0;
}
.screen-reader-text{
    display: none;
}
#comments nav{
    display: block;
    float: none;
}
.post_thumb{
    margin-bottom: 10px;
}
.post_thumb img,.post_thumb_big img{
    width:100%;
    height: auto !important;
}
.qtoggle{
word-wrap:break-word;
}
/*-------------------------------------------------------*/
/*  = Table
/*-------------------------------------------------------*/
.post-content table,
section table{
    /*width: 100%;*/
    text-align: left;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    margin-bottom: 15px;
}
.post-content th,.post-content td,
section th,section td{
    padding: 5px;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
/*-------------------------------------------------------*/
/*  = Sidebar
/*-------------------------------------------------------*/
/* sidebar right position */
.sidebar{
    float:right;
}
.content{
    float:left;
}
.ss{
    margin-left:50px; 
    margin-right:0;
}
/* end sidebar right position */    
.sidebar-title{
    border-top: 1px dotted #ccc;
    border-bottom: 1px dotted #ccc;
    margin-bottom: 20px;
}
.sidebar-menu{
    margin-bottom: 25px;
}
.sidebar-menu a{
	font-size: 18px;
}
.sidebar-menu ul{
    display: block;
}
.sidebar-menu ul ul{
    margin-top: 0;
}
.sidebar-menu ul li,.post-content ul li{
    position: relative;
    list-style-type: disc;
    margin-left: 15px;
	margin-bottom: 15px;
    color: #000;
}
.sidebar-menu .children{
    margin-left: 0;
}
.post-content ul,.post-content ol{
    margin-bottom: 15px;
}
.post-content ul li,.post-content ol li{
    margin-bottom:0px;
}
/*-------------------------------------------------------*/
/*  = Popular posts                                          
/*-------------------------------------------------------*/
.pop_post{
    position: relative;
    display: block;
    border-bottom: 1px dotted #ccc;
    margin-top: 10px;
}
.pop_post h3{
    font-size: 14px;
    font-weight: normal;
    text-decoration: underline;
}
.pop_post a{
    text-decoration: underline;
}
.pop_post:last-child{
    margin-bottom: 0;
    border-bottom: 0;
}
.image_pop{
    position: relative;
}
.image_pop img{
    float: none;
    width: 100%;
    height: auto !important;
}
.pop_desc{
    display: none;
}
.pop_date,.date_masonry{
    position: absolute;
    background: rgba(0, 0, 0, 0.70);
    color: #f2f2f2;
    top: 15px; 
    left: 0px; 
    padding: 0 5px;
    font-size: 10px;
    font-weight: bold;
}
/*-------------------------------------------------------*/
/*  = Tags                                          
/*-------------------------------------------------------*/
.tagcloud{
    display: block;
}
/*-------------------------------------------------------*/
/*  = Footer                                        
/*-------------------------------------------------------*/
.footer{
    font-size: 12px;
    overflow: hidden;
    padding: 14px 0px;
}
.footer a{
    text-decoration: underline;
}
.footer p{
    float: left;
}
.footer-menu-1 ul li,
.footer-menu-2 ul li{
    float: left;
    padding-left: 15px;
}
.footer-menu-1 ul li{
}
.footer-menu-2{
    float: right;
}
.icon{
    display: inline-block;
    vertical-align: middle;
    background: url("images/favicon.png") no-repeat scroll 0 0;
    width: 16px;
    height: 16px;
    margin-top: -3px;
    margin-right: 3px;
}
.scroll{
    display: none;
    position: absolute;
    float: right;
    bottom: 5px; 
    right: 15px;
}
.scroll a{
    text-decoration: none;
}
.copyright a{
    padding-right: 7px;
}
/*-------------------------------------------------------*/
/*  = Buttons                                         
/*-------------------------------------------------------*/
.post-content input.button,.more,.edit{
    display: block;
}
.post-content input[type=submit],
.more,
.edit,
.page_links a,
.btn-def{
    background: #000;
    border:0;
    cursor: pointer;
    border-radius: 3px;
    text-decoration: none;
    color: #fff;
    text-align: center;
}
.more,
.edit,
.page_links a,
.btn-def{
     padding: 0 8px 2px;
}
.post-content input[type=submit]{
    padding: 1px 8px;
}   
}
.btn-def{
    background: #000;
    border: 0 none;
    cursor: pointer;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
}
.page_links a{
    display: inline-block;
}
.page_links a{
    background: #000; 
}
.edit,.more{
    margin-bottom: 10px;
}
.post-content .more{
    float: right;
    background: #000; 
    text-decoration: none;
}
.edit{
    float: left;
    background: #f39d77;
}
.edit a{
    color: #fff;
}
.black{
    color: #fff;
}
.black{
    background: #000; 
}
.brown{
    background: #f39d77;
}
.btn-big a {
    display: inline-block;
    font: bold 20px sans-serif;
    color: #fff;
    border-radius: 3px;
    padding: 10px 40px;
    margin-bottom: 15px;
    text-align: center;
    text-decoration: none;
}
.btn-big a:hover{
    text-decoration: none;
}
/*-------------------------------------------------------*/
/*  = Header search                                          
/*-------------------------------------------------------*/
.hs_title{
    display: none;
}
.search-top{
    float: right;
    width: 25px; 
    height: 50px;  
    margin-left: 15px;
}
.search-btn{
    font-size: 30px;
    cursor: pointer;
    position: relative;
    padding: 10px 0;
    z-index: 3000;
    color: black;
    text-align: center;
}
.search-btn i{
    display: inline-block;
    width: 100%;
}
.ion-ios-search-strong,
.ion-close-round,
.ion-android-close{
    /*line-height: 50px;*/
}

.search-form-top{
    display: none;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 50px;
    z-index: 1000;
    background: none;
    width: 100%;
}
.search-form-top.open{
    display: block;
}
.fixedsearch{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.search-submit{
    display: none;
}
.search-field-top{
    border-top: 0; 
    border-right: 0;
    height: 50px;
    width:         calc(100% - 2px);
    width:    -moz-calc(100% - 2px);
    width: -webkit-calc(100% - 2px);
    padding: 0px 15px;
    font-size: 16px;
} 
.search-form-top ::-moz-placeholder{ 
   color: #000;
   font-weight: bold;
   opacity:  1;
}
.search-form-top ::-webkit-input-placeholder{ 
   color: #000;
   font-weight: bold;
   opacity:  1;
}
/*-------------------------------------------------------*/
/* = Sidebar search                                          
/*-------------------------------------------------------*/
.search-form-sb input{}
.search-field,
.search-field-sb{
    border: 1px solid #ccc;
    height: 30px;
    margin: 0 6px 0 0;
    padding: 0 10px;
    position: relative;
    width:         calc(100% - 65px);
    width:    -moz-calc(100% - 65px);
    width: -webkit-calc(100% - 65px);
}
.search-submit-sb{
    background: none;
    position: relative;
    cursor: pointer;
    color: #000000;
    cursor: pointer;
    font-size: 30px;  
    top: 7px;
}
/*-------------------------------------------------------*/
/*  = Error 404 search                                          
/*-------------------------------------------------------*/
.search-field,
.search-field-top{
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;  
}
/*-------------------------------------------------------*/
/*  = Page navigation                                          
/*-------------------------------------------------------*/
.wp-pagenavi{
    display: block;
    float: left;
    margin-top: 5px; 
    margin-bottom: 10px;
}
.wp-pagenavi span{
    padding: 10px;
}
.wp-pagenavi a, .wp-pagenavi span{
    display: inline-block;
    text-decoration: none;
    border: 1px solid #BFBFBF;
    padding: 10px;
    margin-right:10px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current{
    border-color: #000;
}
.wp-pagenavi span.current{
    font-weight: bold;
}
.pagenav {
    clear: both;
    display: block;
    height: 35px;
    margin-bottom: 10px;
}
.next, .prev {
     display: block;
    font: bold 22px 'Libre Franklin','Open Sans',Tahoma,Verdana,sans-serif;
    text-decoration: underline;
}
.next,.nav-next{
    float: right;
}
/*-------------------------------------------------------*/
/*  = Basic wordpress styles                                          
/*-------------------------------------------------------*/
 .alignright{
    float: right;
    padding: 5px 0 5px 15px;
 }
.alignleft{
    float: left;
    padding: 5px 15px 5px 0;
 }
.aligncenter{
    clear: both;
    display: block;
    margin: 0 auto;
}
.sticky,
.gallery-caption,
.bypostauthor{}
.wp-caption{
    max-width: 100%;
    margin-bottom: 15px;
}
.wp-caption-text{
    position: relative;
    text-align: center;
    padding: 2px 0px;
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
    border-bottom:1px solid #ccc;
}
/*-------------------------------------------------------*/
/*  = Wordpress calendar                                          
/*-------------------------------------------------------*/
#calendar_wrap{
    position: relative;
    margin-top: 5px;
    right: 5px;
}
#wp-calendar{
    width: 100%;
}
#wp-calendar thead{
    text-align: center;
}
#wp-calendar tr td{
    text-align: center;
    margin-right:5px;
}
#wp-calendar caption{
    text-align: left;
    margin: 5px 0 5px 9px;
}
#wp-calendar td{
    width: 29px;
}
#wp-calendar td a{
    position: relative;
    background: #000;
    color: #fff;
    border-radius: 3px;
    padding: 1px 3px;
}
#wp-calendar #today a{
    color: #fff;
}
#wp-calendar #prev a,#wp-calendar #next a{
    background: none;
    color: #000;
    margin:0 5px;
    text-decoration: underline;
}
#wp-calendar #next{
    text-align: right;
    margin-right:5px;
}
#wp-calendar #prev{
    text-align: left;
}
/*-------------------------------------------------------*/
/*  = Wordpress gallery
/*-------------------------------------------------------*/
.gallery{
    float: left;
    display: block;
    clear: both;
    width: 100%;
}
.gallery-item{
    display: inline-block;
    margin-right: 14px;
    margin-bottom: 6px;
}
/*-------------------------------------------------------*/
/*  = Wordpress default comments                                      
/*-------------------------------------------------------*/
.form-submit{
    padding-bottom: 0px;
}
#respond{
    clear: both;
}
.comments{
    float: left;
    width: 100%;
    margin-bottom: 10px;
}
.comments-title{
    padding: 20px 0px;
}
.comment-block {
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    padding: 15px;
}
.comment-author{
    float: left;
}
.comment-author img {
    border: 1px solid #ccc;
    border-radius: 50%;
}
.comment-edit{
    text-decoration: underline;
}
.comment-content{
    position: relative;
    overflow: hidden;
    padding-left: 15px;
}
.comment-content p{
    margin-bottom: 5px;
}
.comment-meta{
    margin-bottom: 10px;
}
.comment-meta a{
    position: absolute;
    right: 0px;
}
.comment-meta .auth{
    font-weight: bold;
    font-size: 16px;
}
.comdate, .comtime {
    font-size: 12px;
}
.reply{
    float: right;
    display: block;
    background: #000;
    border-radius: 3px;
    padding: 0 8px;
    text-decoration: none;
    text-transform: lowercase;
}
.reply a{
    color: #fff;
    font-size: 13px;
}
.children{
    margin-left: 15px;
}
#commentform,
#commentform textarea{}
#commentform,#commentform textarea{
    padding: 15px;
    border: 1px solid #ccc;
}
#commentform label{
    display: block;
    clear: both;
    margin-bottom: 5px;
}
#commentform input{
    display: block;
    height: 30px;
    border: 1px solid #ccc;
    padding: 0 10px;
}
#commentform input#submit{
    border-radius: 3px;
    border:0;
    height: 40px;
    text-align: center;
    text-decoration: none;
    padding: 0px 8px;
    margin-top: 10px;
    margin-bottom: 20px;
    background:#000; 
    color: #fff;
    cursor: pointer;
}
.no-comments{
    font-weight: bold;
}
.nav-next, .nav-previous {
    font-size: 20px;
    margin: 10px 0 20px;
    text-decoration: underline;
}
.nav-previous {
    float: left;
}
.nav-next {
    float: right;
}
/*-------------------------------------------------------*/
/*  = Shortcode styles                                         
/*-------------------------------------------------------*/
.codenote{
    display: inline-block;
    position: absolute;
    background: #BEEB9F;
    font: bold 14px 'Open Sans', Tahoma, Verdana, sans-serif;
    padding: 2px 10px;
    margin-top: 10px;
    right: 0px;
    z-index: 2;
}
/*-------------------------------------------------------*/
/*  = Home slider                                        
/*-------------------------------------------------------*/
.slider{
    position: relative;
    z-index: 999;
}
.flex-caption,.flex-descr{
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    max-width: 70%;
    z-index: 999;
}
.flex-caption{
    top: 20px; 
    padding: 5px 15px;
}
.flex-descr{
    bottom: 20px; 
    right:0;
    padding: 5px 15px;
}
.flex-descr p{
    margin-bottom:5px;
}
.slider img{
    width: 100%;
}
.slides li{
    position: relative;
}
.flex-direction-nav{
    display: block;
}
/*-------------------------------------------------------*/
/*  = Popup box                                        
/*-------------------------------------------------------*/
.mask{
    display: none;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    z-index: 4000;

    &:before{
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        content: '';
    }
}
.popup{
    display: none;
    white-space: normal;
    vertical-align: middle;
    background: #fff;
    width: 600px;
    border-radius: 3px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    margin: 8% auto 0;
    position: relative;
    z-index: 2000;
    img{
        display: block;
        border: none;
    }
}
.popup h3{
    text-align: left;
}
.popup p{
    text-align: left;
}
.popup p span{
    font-weight: bold;
}
.pp{
    padding: 10px 20px;
}
.popup.open,.mask.open{
    display: block;
}
.popup-btn{
    position: relative;
    float: right;
    right: 0px;
    padding: 12px 18px;
    z-index: 3000;
}
.popup-btn a{
    display: block;
    text-align: center;
}
.popup-close{
    font-size: 26px;
}
.popup-close{
    cursor: pointer;
    color: #555;
}
.popup-close:hover{
    color: #000;
}
/* custom style */
.q a{
    margin-right:5px
}