/*
Theme Name: Motscles Theme
Theme URI: https://coderexperts.com/
Author: CoderExperts
Author URI:  https://coderexperts.com/
Description: Custom theme for motscles.io
Tags: Custom Theme
Version: 1.0
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: motscles-theme
*/

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    display:block
}
body{
    line-height:1
}
ol,ul{
    list-style:none
}
blockquote,q{
    quotes:none
}
blockquote:after,blockquote:before,q:after,q:before{
    content:"";
    content:none
}
table{
    border-collapse:collapse;
    border-spacing:0
}
@font-face{
    font-family:Pacifico;
    font-style:normal;
    font-weight:400;
    src:local("Pacifico Regular"),local("Pacifico-Regular"),url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600) format("woff2");
    font-display:swap
}
/* WP DEFAULT CLASSES & SETTINGS */

.admin-bar {
	top: 32px;
}
.alignnone {
    margin: 5px 0px 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;
}
.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}
a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}
a img.alignnone {
    margin: 20px 0px;
}
a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}
.wp-caption {
    max-width: 100%;
}
.wp-caption.alignnone {
    margin: 20px 0px;
}
.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
    text-align: left;
}
.wp-caption.alignright {
    margin: 5px 0 20px 20px;
    text-align: right;
}
.wp-caption img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
.wp-caption .wp-caption-text {
    font-size: 14px;
    line-height: 17px;
    margin-top: 10px;
    padding: 0 4px 5px;
    font-style: italic;
    text-align: center;
}
.wp-caption .wp-caption-text a {
    font-weight: 700;
}
.gallery-caption {
    font-size: 100%;
}
.gallery-item img {
    margin-left: auto;
    margin-right: auto;
}
.bypostauthor {
    font-size: 100%;
}
.block {
    display: block;
}
.hidden {
    display: none;
}
.clear {
    clear: both;
}
.left {
    float: left;
}
.right {
    float: right;
}
.line-height {
    line-height: 0;
}
.clear-right {
    clear: right;
}
.clear-left {
    clear: left;
}
.center-absolute {
    left: 50%;
}
.center-text {
    text-align: center !important;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.img-right {
    margin-right: 0;
    margin-left: auto;
}
.absolute {
    position: absolute;
}
.fixed {
    position: fixed;
}
.relative {
    position: relative;
}
.center-relative {
    margin-left: auto;
    margin-right: auto;
}

.alignwide {
    margin-left: -5%;
    margin-right: -5%;
    width: 100%;
    max-width: none;
}
.alignfull {
    width: 100vw;
    max-width: 100%;
}

.alignfull > figcaption, .alignfull > .wp-caption-text {
    color: var(--white-color);
    display: table;
    padding: 12px 60px;
    margin: 10px auto 40px;
    text-align: center;
    background-color: var(--anchor-color);
    position: relative;
    z-index: 1;
}

/* Clearing ---------------------------------- */

.group::after,
.entry-content::after {
	clear: both;
	content: "";
	display: block;
}
/* Custom Style & classes*/
.img-round {
	border-radius: 50%;
}
img {
	max-width: 100%;
	height: auto;
}
.h1,
h1,
.h2,
h2,
.h3,
h3 {
	margin-top: 20px;
	margin-bottom: 10px;
}
.h4,
h4,
.h5,
h5,
.h6,
h6 {
	margin-top: 10px;
	margin-bottom: 10px
}
h1, .h1 {
  font-size: 55px;
}

h2, .h2 {
  font-size: 38px;
}

h3, .h3 {
  font-size: 32px;
}

h4, .h4 {
  font-size: 28px;
}

h5, .h5 {
  font-size: 25px;
}

h6, .h6 {
  font-size: 18px;
}

p {
    margin: 0 0 10px 0;
}
.text-center {
	text-align: center;
}
.container{
    margin:0 auto;
    flex-direction:column
}
@media (min-width:320px){
    .container{
        max-width:768px
    }
}
@media (min-width:768px){
    .container{
        max-width:768px
    }
    header .container{
        max-width:1024px
    }
}
@media (min-width:1024px){
    .container{
        max-width:1024px
    }
    header .container{
        max-width:1240px
    }
}
@media (min-width:1240px){
    .container{
        max-width:1240px
    }
    header .container{
        max-width:1440px
    }
}
@media (min-width:1440px){
    .container{
        max-width:1440px
    }
}
*,::after,::before{
    padding:0;
    margin:0;
    border:0;
    box-sizing:border-box;
    webkit-box-sizing:border-box;
    moz-box-sizing:border-box;
    webkit-font-smoothing:antialiased;
    moz-font-smoothing:antialiased;
    o-font-smoothing:antialiased;
    font-smoothing:antialiased;
    text-rendering:optimizeLegibility
}
[hidden]{
    visibility:hidden
}
li{
    white-space:nowrap
}
button{
    width:100%;
    outline:0
}
a{
    cursor:pointer
}
input[type=text]{
    border:1px solid #999;
    border-radius:4px;
    outline:0
}
input[type=text]:focus{
    border-style:dashed;
    outline:0;
    box-shadow:none;
    border-color:#999
}
html{
    height:100%
}
body{
    margin:0;
    font-size:18px;
    height:100%;
    width:100%;
    font-family:"Open Sans",Helvetica,Arial,sans-serif
}
body.webp{
    width:100%;
    height:100%;
    background:#e5e5e5
}
body.no-webp{
    width:100%;
    height:100%;
    background:#e5e5e5
}
body.no-bg{
    width:100%;
    height:100%;
    background:#e5e5e5
}
.flex{
    display:flex
}
.tools{
    flex:1 1 auto;
    margin:0 40px;
    min-width:180px;
    max-width:400px;
    flex-direction:column;
    justify-items:center;
    justify-content:center
}
.tools-wrap{
    margin-top:25px
}
#custom-separator{
    text-align:center;
    float:right;
    width:60px;
    margin:5px 0;
    max-width:60px
}
#typoer .tools-generate{
    margin-top:55px
}
*,:after,:before{
    box-sizing:border-box;
    -webkit-tap-highlight-color:rgba(0,0,0,0)
}
h3{
    margin:0
}
@-webkit-keyframes fadeIn{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
@keyframes fadeIn{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
.fadeIn{
    -webkit-animation-name:fadeIn;
    animation-name:fadeIn
}
input[name=tabs]{
    display:none
}
input[name=tabs]#tab-1:checked~main .tab:nth-of-type(1){
    -webkit-animation-name:fadeIn;
    animation-name:fadeIn;
    -webkit-animation-timing-function:ease-in-out;
    animation-timing-function:ease-in-out;
    -webkit-animation-duration:.3s;
    animation-duration:.3s;
    display:flex
}
input[name=tabs]#tab-2:checked~main .tab:nth-of-type(1){
    -webkit-animation-name:fadeIn;
    animation-name:fadeIn;
    -webkit-animation-timing-function:ease-in-out;
    animation-timing-function:ease-in-out;
    -webkit-animation-duration:.3s;
    animation-duration:.3s;
    display:flex
}
input[name=tabs]#tab-3:checked~main .tab:nth-of-type(1){
    -webkit-animation-name:fadeIn;
    animation-name:fadeIn;
    -webkit-animation-timing-function:ease-in-out;
    animation-timing-function:ease-in-out;
    -webkit-animation-duration:.3s;
    animation-duration:.3s;
    display:flex
}
input[name=tabs]#tab-4:checked~main .tab:nth-of-type(1){
    -webkit-animation-name:fadeIn;
    animation-name:fadeIn;
    -webkit-animation-timing-function:ease-in-out;
    animation-timing-function:ease-in-out;
    -webkit-animation-duration:.3s;
    animation-duration:.3s;
    display:flex
}
input[name=tabs]#tab-1:checked~header .header__tabs .header__menu-item:nth-of-type(1) .header__label, .header__menu .current-menu-item .header__label{
    color:#fff;
    background-color:#080808
}
input[name=tabs]#tab-1:checked~header .header__tabs .header__menu-item:nth-of-type(1) .header__label:after, .header__menu .current-menu-item .header__label:after{
    width:calc(100% - 20px);
    transition:.3s
}
input[name=tabs]#tab-2:checked~header .header__tabs .header__menu-item:nth-of-type(2) .header__label{
    color:#fff;
    background-color:#080808
}
input[name=tabs]#tab-2:checked~header .header__tabs .header__menu-item:nth-of-type(2) .header__label:after{
    width:calc(100% - 20px);
    transition:.3s
}
input[name=tabs]#tab-3:checked~header .header__tabs .header__menu-item:nth-of-type(3) .header__label{
    color:#fff;
    background-color:#080808
}
input[name=tabs]#tab-3:checked~header .header__tabs .header__menu-item:nth-of-type(3) .header__label:after{
    width:calc(100% - 20px);
    transition:.3s
}
input[name=tabs]#tab-4:checked~header .header__tabs .header__menu-item:nth-of-type(4) .header__label{
    color:#fff;
    background-color:#080808
}
input[name=tabs]#tab-4:checked~header .header__tabs .header__menu-item:nth-of-type(4) .header__label:after{
    width:calc(100% - 20px);
    transition:.3s
}
.header{
    box-shadow:1px 1px 4px 0 rgba(0,0,0,.1);
    width:100%;
    z-index:3
}
.header__menu{
    clear:both;
    max-height:0;
    transition:max-height .2s ease-out;
    margin:0;
    padding:0;
    list-style:none;
    overflow:hidden;
    background-color:#333
}
.header__menu-item{
    position:relative
}
.header__menu-icon{
    cursor:pointer;
    display:inline-block;
    float:right;
    padding:28px 20px;
    position:relative;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.header__menu-navicon{
    background:#fff;
    display:block;
    height:2px;
    position:relative;
    transition:background .2s ease-out;
    width:18px
}
.header__menu-navicon:after,.header__menu-navicon:before{
    background:#fff;
    content:"";
    display:block;
    height:100%;
    position:absolute;
    transition:all .2s ease-out;
    width:100%
}
.header__menu-navicon:before{
    top:5px
}
.header__menu-navicon:after{
    top:-5px
}
.header__menu-btn{
    display:none
}
.header__menu-btn:checked~.header__menu{
    max-height:240px
}
.header__menu-btn:checked~.header__menu-icon>.header__menu-navicon{
    background:0 0
}
.header__menu-btn:checked~.header__menu-icon>.header__menu-navicon:before{
    transform:rotate(-45deg)
}
.header__menu-btn:checked~.header__menu-icon>.header__menu-navicon:after{
    top:0;
    transform:rotate(45deg)
}
.header__menu-btn:checked~.header__menu-icon:not(.steps) .header__menu-navicon:before,.header__menu-btn:checked~.menu-icon:not(.steps) .header__menu-navicon:after{
    top:0
}
.header__logo{
    display:flex;
    align-items:center;
    float:left;
    margin-top:3px;
    position:relative;
    color:#3f4040;
    cursor:pointer
}
.header__logo-img{
    display:inline-flex
}
.header__logo-title{
    color:#fff;
    margin-left:5px;
    font-size:1.6em;
    font-weight:700;
    letter-spacing:1.5px;
    text-decoration:none
}
@media (max-width:1440px){
    .header__logo-title{
        font-size:1.3em
    }
}
.header__logo:hover{
    text-decoration:none
}
.header__logo:focus{
    text-decoration:none
}
.header__logo:visited{
    text-decoration:none
}
.header__logo:active{
    text-decoration:none
}
.header__tabs{
    background:#333;
    box-shadow:0 20px 50px -25px rgba(0,0,0,.3);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    position:relative;
    white-space:nowrap;
    box-shadow:1px 1px 4px 0 rgba(0,0,0,.1)
}
.header__label, a.header__label{
    color:#999;
    display:block;
    padding:20px 20px;
    border-right:1px solid #000;
    text-decoration:none;
    cursor:pointer
}
.header__menu li:last-child .header__label, .header__menu li:last-child a.header__label{
    border-right:0px solid #000;
}
.header__label:after{
    content:"";
    background:#d22c3f;
    width:0;
    height:4px;
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    transition:.1s
}
.header__label:hover{
    color:#fff;
    background-color:#080808
}
@media (min-width:1024px){
    .header__menu-item{
        float:left
    }
    .header__label{
        padding:20px 30px
    }
    .header__menu{
        clear:none;
        float:right;
        max-height:none
    }
    .header__menu-icon{
        display:none
    }
}
main{
    flex:1 1 auto;
    padding:60px 0;
    height:100%;
    margin:0 0;
    box-shadow:0 50px 75px -25px rgba(0,0,0,.3);
    flex-flow:column
}
.btn{
    display:inline-block;
    padding:6px 12px;
    margin-bottom:0;
    font-size:14px;
    font-weight:400;
    line-height:1.428571429;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
    border:1px solid transparent;
    border-radius:4px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none
}
.btn-warning{
    color:#fff;
    background-color:#1abc9c;
    border-color:#17a78a
}
.btn-warning:focus,.btn-warning[active]{
    color:#fff;
    background-color:#16a085;
    border-color:#13866f
}
@media (hover:hover){
    .btn-warning:hover{
        color:#fff;
        background-color:#16a085;
        border-color:#13866f
    }
}
.btn-primary{
    color:#fff;
    background-color:#428bca;
    border-color:#357ebd
}
.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.btn-primary[active]{
    color:#fff;
    background-color:#3276b1;
    border-color:#285e8e
}
.btn-danger{
    color:#fff;
    background-color:#d9534f;
    border-color:#d43f3a
}
.btn-danger.active,.btn-danger:active,.btn-danger:focus,.btn-danger:hover{
    color:#fff;
    background-color:#d2322d;
    border-color:#ac2925
}
.btn-info{
    color:#fff;
    background-color:#5bc0de;
    border-color:#46b8da
}
.btn-info:active,.btn-info:focus,.btn-info:hover,.btn-info[active]{
    color:#fff;
    background-color:#39b3d7;
    border-color:#269abc
}
.btn-group-vertical{
    flex-direction:column;
    justify-items:center;
    justify-content:center;
    text-align:center;
    max-width:100%
}
.btn-group-vertical>.btn{
    width:100%;
    max-width:100%
}
.keywords{
    flex-direction:column;
    flex:3 0 250px;
    min-width:200px
}
.keywords__summary{
    height:16px;
    color:#9f9f9f;
    font-size:16px;
    position:absolute;
    bottom:21px;
    right:30px
}
.keywords__area{
    width:100%;
    height:375px;
    border:1px solid #999;
    border-radius:7px;
    resize:none;
    outline:0;
    padding:10px;
    font-size:16px
}
.keywords__area:focus{
    border-style:dashed;
    border-style:dashed
}
.wrapper{
    min-height:100%;
    flex-direction:column
}
.wrapper-tab__tools{
    width:80%
}
@media (max-width:876px){
    .wrapper-tab__tools{
        margin:20px 0
    }
}
.wrapper-tab__selectors{
    margin-bottom:30px
}
.wrapper-tab__keywords-in,.wrapper-tab__keywords-out{
    position:relative;
    width:100%
}
@media (max-width:876px){
    .wrapper-tab{
        flex-direction:column
    }
}
.typoer-tab__tools{
    justify-content:center;
    width:80%
}
@media (max-width:876px){
    .typoer-tab__tools{
        margin:20px 0
    }
}
.typoer-tab__selectors{
    margin-bottom:30px
}
.typoer-tab__keywords-in,.typoer-tab__keywords-out{
    position:relative;
    width:100%
}
@media (max-width:876px){
    .typoer-tab{
        flex-direction:column
    }
}
.mixer-tab{
    flex-direction:column
}
.mixer-tab__lists{
    justify-content:center;
    width:100%
}
@media (max-width:876px){
    .mixer-tab__lists{
        flex-direction:column
    }
}
@media (max-width:876px){
    .mixer-tab__tools-separate{
        margin:20px 0
    }
}
.mixer-tab__list:nth-of-type(2){
    margin:0 20px
}
@media (max-width:876px){
    .mixer-tab__list:nth-of-type(2){
        margin:20px 0
    }
}
.mixer-tab__options{
    margin-top:40px;
    justify-content:center;
    width:100%
}
@media (max-width:650px){
    .mixer-tab__options{
        flex-direction:column-reverse
    }
}
.mixer-tab__transform{
    margin-top:20px;
    clear:right
}
.mixer-tab__tune-list{
    padding-bottom:24px;
    flex-direction:column;
    justify-content:space-between
}
.mixer-tab__generate-result{
    padding:10px 16px;
    font-size:18px;
    line-height:1.33;
    border-radius:6px
}
.mixer-tab__keywords-out{
    max-width:50%;
    margin-left:40px;
    position:relative
}
.mixer-tab__keywords-out .keywords__area{
    max-width:700px
}
@media (max-width:650px){
    .mixer-tab__keywords-out{
        margin-left:0;
        max-width:none
    }
}
.tab{
    width:100%;
    margin:0 auto;
    justify-content:center;
    height:auto;
    align-items:center;
    display:flex;
    padding:0 80px
}
@media (max-width:876px){
    .tab{
        padding:0 60px
    }
}
@media (max-width:676px){
    .tab{
        padding:0 40px
    }
}
.text-center{
    text-align:center
}
.contact-tab{
    font-weight:300;
    font-size:14px;
    line-height:30px;
    color:#777
}
.contact-tab>.container{
    max-width:400px;
    width:100%;
    margin:0 auto;
    position:relative
}
.contact-tab__form{
    background:#f9f9f9;
    padding:25px;
    margin:50px 0
}
.contact-tab__form h3{
    color:#f96;
    display:block;
    font-size:36px;
    font-weight:400
}
.contact-tab__form h4{
    margin:5px 0 15px;
    display:block;
    font-size:16px
}
.contact-tab__form fieldset{
    border:medium none!important;
    margin:0 0 10px;
    min-width:100%;
    padding:0;
    width:100%
}
.contact-tab__form input[type=email],.contact-tab__form input[type=tel],.contact-tab__form input[type=text],.contact-tab__form input[type=url],.contact-tab__form textarea{
    width:100%;
    border:1px solid #ccc;
    background:#fff;
    margin:0 0 5px;
    padding:10px
}
.contact-tab__form input[type=email]:hover,.contact-tab__form input[type=tel]:hover,.contact-tab__form input[type=text]:hover,.contact-tab__form input[type=url]:hover,.contact-tab__form textarea:hover{
    transition:border-color .3s ease-in-out;
    border:1px solid #aaa
}
.contact-tab__form textarea{
    height:100px;
    max-width:100%;
    resize:none
}
.contact-tab__form input:focus,.contact-tab__form textarea:focus{
    outline:0;
    border:1px solid #999
}
.contact-tab__form-submit{
    cursor:pointer;
    width:100%;
    border:none;
    background:#0cf;
    color:#fff;
    margin:0 0 5px;
    padding:10px;
    font-size:15px
}
.contact-tab__form-submit:active{
    box-shadow:inset 0 1px 3px rgba(0,0,0,.5)
}
.contact-tab__form-submit:hover{
    background:#09c;
    transition:background-color .3s ease-in-out
}
::-webkit-input-placeholder{
    color:#888
}
:-moz-placeholder{
    color:#888
}
::-moz-placeholder{
    color:#888
}
:-ms-input-placeholder{
    color:#888
}
.app-description{
    padding:10px 80px;
    margin:50px auto;
    max-width:1440px;
    font-family:"Segoe UI",Roboto;
    font-size:20px
}
.app-description>h2{
    font-size:28px;
    line-height:36px
}
.app-description>ul>li{
    white-space:normal;
    line-height:28px
}
.app-description>p:last-child{
    line-height:28px
}


.article-grid {
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 30px;
	grid-row-gap: 30px;
}

@media (max-width:767.98px){
    .article-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}
.motsclestheme-blog-page-artile-item h2, .motsclestheme-post-heading h2 {
    font-size: 30px;
	margin-bottom: 5px;
	margin-top: 15px;
}
.motsclestheme-blog-page-artile-item h2 a {
    text-decoration: none;
	color: #000;
}
.motsclestheme-entry-meta {
	margin-bottom: 15px;
}
.motsclestheme-entry-meta li {
	display: inline-block;
	margin-right: 10px;
}
.motsclestheme-entry-meta li a {
	color: #000;
}
.motsclestheme-pagination {
    display: block;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top: 30px;
}