@font-face {
    font-family: iransans;
    src: url('https://www.elecodeiranzamin.com/font/IRANSansWeb(FaNum)_Light.ttf');
}
body{
    overflow-x: hidden;
}
body *{
    font-family: iransans;
}
.header-sale-bar{
    background-image: url("../images/memphis-colorful.png");
    width: 100%;
    height:70px;
    background-size: 400px auto;
    text-align: center;
    font-size:30px;
    color:#fff;
    line-height: 70px;
    position: relative;
    direction: rtl;
}
.header-sale-bar div.hover-for-background{
    background-color: rgba(130,177,255,0.7);
    position: absolute;
    z-index: 200;
    left:0;
    top:0;
    width:100%;
    height:70px;
}
.header-sale-bar span{
    font-size:33px;
    color:#0F9E5E;
    display: inline-block;
    margin-right:5px;
    margin-left:5px;
}
.text-for-sale{
    position: relative;
    z-index: 400;
}
.cross-for-close{
    position: absolute;
    right:25px;
    top:3px;
    z-index:400;
}
.cross-for-close svg{
    width:20px !important;
    height:20px !important;
    fill: #fff !important;
}
header{
    background-color: #eee;
    min-height:100px;
}
.logo-place h1{
    font-size:30px;
    line-height: 55px;
    text-align: left;
    float: left;
    direction: rtl;
    margin-top:16px;
}
#search-form input[type=search]{
    width:100%;
    height:50px;
    line-height: 50px;
    font-size:30px;
    font-family: iransans;
    direction: rtl;
    text-align: right;
    padding:0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ccc;
    border:none;
    margin-top:25px;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}
#search-form input[type=search]:focus{
    outline: none !important;
    background-color: #bbb;
}
#search-form button{
    position: absolute;
    background-color: #aaa;
    width:95px;
    height:50px;
    left:0;
    top:25px;
    border: none;
}
#search-form button > div{
    border-left:15px solid #aaa;
    border-top:15px solid transparent;
    border-bottom: 15px solid transparent;
    position: absolute;
    right:-15px;
    top:50%;
    transform:translateY(-50%);

}
.pgwSlider{
    margin-top:30px;
}
ul.pgwSlider>li span, .pgwSlider>.ps-list>li span{
    text-align: right !important;
    direction: rtl !important;
}
.pgwSlider .ps-caption{
    text-align: right !important;
    direction: rtl !important;
}
#search-form button svg{
    width:30px !important;
    margin-top:5px;
}
#basket{
    display: inline-block;
    width:50px;
    height:50px;
    background-color: #00796b;
    position: relative;
    margin-top:25px;
}
#basket svg{
    text-align: center;
    line-height: 50px;
    width:30px !important;
    fill: #fff;
    position: absolute;
    left:50%;
    top:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
#number-of-items{
    position: absolute;
    right:-10px;
    top:-10px;
    background-color: #c62828;
    color:#fff;
    font-size:11px;
    text-align: center;
    line-height: 20px;
    width:20px;
    height:20px;
    border-radius: 50%;
}
#cssmenu > ul{padding-right:0 !important;}
.logo{position:relative;z-index:123;padding:10px;font:18px verdana;color:#6DDB07;float:left;width:15%}
.logo a{color:#6DDB07;}
nav{position:relative;margin:0 auto;}
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu{font-family:sans-serif;background:#333}
#cssmenu > ul > li{float:left}
#cssmenu > ul > li > a{padding:17px;font-size:14px;letter-spacing:1px;text-decoration:none;color:#fff;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff}
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{color:#448D00;border-bottom:3px solid #448D00!important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#333;transition:all .25s ease;margin-right:-40px !important;}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:35px}
#cssmenu ul ul ul{margin-right:100px;top:0}
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 25px;width:170px;font-size:12px;text-decoration:none;color:#ddd;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#363636;}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}
#cssmenu{
    height:48px !important;
    direction: rtl;
}
#cssmenu ul li a{
    color:#fff !important;
}
#cssmenu ul li{
    direction: rtl !important;
    float: right !important;
    font-family: iransans !important;
}
#cssmenu ul ul ul li{
    margin-right:30px !important;
}
.price-box a{
    color:#333;
    text-decoration: none;
}
#navbar-conainer{position:relative;width:100%;background:#333;border-bottom: 1px solid #666;z-index: 2000;}
@media screen and (max-width:1000px){
    .logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none}
    .logo2{display:none}
    nav{width:100%;}
    #cssmenu{width:100%}
    #cssmenu ul{width:100%;display:none}
    #cssmenu ul li{width:100%;border-top:1px solid #444}
    #cssmenu ul li:hover{background:#363636;}
    #cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
    #cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
    #cssmenu > ul > li{float:none}
    #cssmenu ul ul li a{padding-left:25px}
    #cssmenu ul ul li{background:#333!important;}
    #cssmenu ul ul li:hover{background:#363636!important}
    #cssmenu ul ul ul li a{padding-left:35px}
    #cssmenu ul ul li a{color:#ddd;background:none}
    #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
    #cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
    #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
    #cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700}
    .button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
    .button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''}
    .button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#ddd;content:''}
    .button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
    .button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
    #cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer}
    #cssmenu .submenu-button.submenu-opened{background:#262626}
    #cssmenu ul ul .submenu-button{height:34px;width:34px}
    #cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''}
    #cssmenu ul ul .submenu-button:after{top:15px;right:13px}
    #cssmenu .submenu-button.submenu-opened:after{background:#fff}
    #cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''}
    #cssmenu ul ul .submenu-button:before{top:12px;right:16px}
    #cssmenu .submenu-button.submenu-opened:before{display:none}
    #cssmenu ul ul ul li.active a{border-left:none}
    #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
}
.grid-box{
    border-radius: 5px;
    overflow: hidden;
    background-color: #f7f7f7;
    margin-top:30px;
}
.description-box{
    direction: rtl;
    text-align: right;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.description-box h2{
    color:#333;
    font-size:16px;
}
.description-box p{
    color:#999;
    font-size:12px;
    text-align: justify;
}
.img-container{
    height:150px;
    overflow: hidden;
    position: relative;
}
.img-container img{
    width: 100%;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}
.footer-bar-cont{
    background-color: #e0e0e0;
    height:30px;
    line-height: 30px;
    text-align: center;
    direction: rtl;
    color:#333;
}
.different-price-color{
    background-color: #cfcfcf;
}
.price-box{
    direction: rtl;
}
.heart-icon{
    color:#b91a1a;
}
.grid-box:hover .img-container img{
    -webkit-transform: scale(1.05,1.05);
    -moz-transform: scale(1.05,1.05);
    -ms-transform: scale(1.05,1.05);
    -o-transform: scale(1.05,1.05);
    transform: scale(1.05,1.05);
}
#myFooter {
    background-color: #3c3d41;
    color: white;
    padding-top: 30px;
}

#myFooter .footer-copyright {
    background-color: #333333;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
}

#myFooter .row {
    margin-bottom: 60px;
}

#myFooter .navbar-brand {
    margin-top: 45px;
    height: 65px;
}

#myFooter .footer-copyright p {
    margin: 10px;
    color: #ccc;
}

#myFooter ul {
    list-style-type: none;
    padding-left: 0;
    line-height: 1.7;
}

#myFooter h5 {
    font-size: 18px;
    color: white;
    font-weight: bold;
    margin-top: 30px;
}

#myFooter h2 a{
    font-size: 50px;
    text-align: center;
    color: #fff;
}

#myFooter a {
    color: #d2d1d1;
    text-decoration: none;
}

#myFooter a:hover,
#myFooter a:focus {
    text-decoration: none;
    color: white;
}

#myFooter .social-networks {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 16px;
}

#myFooter .social-networks a {
    font-size: 32px;
    color: #f9f9f9;
    padding: 10px;
    transition: 0.2s;
}

#myFooter .social-networks a:hover {
    text-decoration: none;
}

#myFooter .facebook:hover {
    color: #0077e2;
}

#myFooter .google:hover {
    color: #ef1a1a;
}

#myFooter .twitter:hover {
    color: #00aced;
}

#myFooter .btn {
    color: white;
    background-color: #d84b6b;
    border-radius: 20px;
    border: none;
    width: 150px;
    display: block;
    margin: 0 auto;
    margin-top: 10px;
    line-height: 25px;
}
footer{
    margin-top:30px !important;
}
@media screen and (max-width: 767px) {
    #myFooter {
        text-align: center;
    }
}


/* CSS used for positioning the footers at the bottom of the page. */
/* You can remove this. */

html{
    height: 100%;
}

body{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    height: 100%;
}

.content{
    flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    min-height: 200px;
}

#myFooter{
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    direction: rtl;
}
#myFooter ul{
    padding-right: 0 !important;
}
#logo-icon-footer img{
    width:100% !important;
}
.center{
    margin-top:0;
}
#mediaplayer{
    width:100%;
    height:400px;
}
#container-for-video{
    margin-top:60px;
}
#video-info{
    padding:15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #f5f5f5;
}
#name-for-video{
    color:#333;
    text-align: right;
    direction: rtl;
}
#heart-video,#bookmark-video{
    color:#999;
    display: inline-block;
    margin-right:10px;
    font-size:16px !important;
}
#add-to-basket-text{
    display: inline-block;
    margin-right:10px;
    margin-top:-20px;
    position: relative;
    top:-10px;
}
#add-to-basket-bottom{
    background-color: #0F9E5E;
    color:#fff;
    border-radius: 5px;
    border: none;
    text-align: center;
    display: block;
    height:50px;
    line-height: 72px;
    direction: rtl;
    width:100%;
    margin-top:10px;
    margin-bottom:10px;
}
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}
#about-author{
    margin-top:30px !important;
    background-color: #f5f5f5;
}
.items-list ul{
    direction: rtl;
    text-align: right;
    display: block;
    padding-right: 0;
}
.items-list ul li{
    display: block;
    padding-top:10px;
    padding-bottom:10px;
    border-bottom: 1px solid #eee;
}
.items-list ul li:nth-child(odd){
    background-color: #f3f3f3;
}
.items-list ul li:nth-child(even){
    background-color: #f9f9f9;
}
.items-list ul li:hover{
    background-color: #f1f1f1;
}
.price-box2{
    border:1px solid #b91a1a;
    color:#b91a1a;
    padding:2px 7px;
    border-radius: 3px;
    float:right;
    margin-top:4px;
    margin-right:10px;
}
.margin-for-item{
    margin-bottom:30px;
}
#scope{
    margin-top:30px;
}
.item-duration{
    background-color: #2196f3;
    padding:3px 40px;
    text-align: center;
    color:#fff;
    height:30px;
    line-height: 30px;
    margin-top:0;
    float:left;
    border-radius: 3px;
    overflow: hidden;
    margin-left:10px;
}
.item-number{
    float:right;
    width:40px;
    height:40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    color:#fff;
    background-color: #b91a1a;
    font-size:16px;
    border:2px solid rgba(0,0,0,0.05);
    margin-left:15px;
    margin-right:10px;
}
.text-for-scope{
    font-size:16px;
    text-align: right;
    float:right;
    line-height:40px;
    color:#333;
}
.author-outer-container{
    padding:0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.sharing-content{
    margin-top:30px;
}
.sharing-content a{
    display: inline-block;
    height:40px;
    width:calc(25% - 3px);
    text-align: center;
    text-decoration: none;
    color:#333;
    font-size:22px;
}
.info-about-author{
    color:#999;
    text-align: justify;
    direction: rtl;
    font-size:14px;
    margin-top:10px;
    margin-bottom:10px;
    padding:10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.author-image-container{
    width:80px;
    height:80px;
    border-radius: 50%;
    padding:3px;
    background-color: #eee;
    margin:10px auto;
    position: relative;
}
.author-image-container-inner{
    width:100%;
    height:100%;
    border-radius: 50%;
    overflow: hidden;
}
.author-image-container img{
    width:100%;
    height:100%;
}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 185px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -98px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
.tooltip{
    opacity: 1 !important;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
#add-to-basket-bottom:hover{
    background-color: #3c763d;
}
#add-to-basket-bottom svg{
    width:30px;
    height: 30px;

}
.mejs__container,.mejs__overlay-play,.mejs__overlay,#mediaplayer_html5{
    width:100% !important;
    height:400px !important;
}
.middle-bar-info{
    text-align: center;
    margin-top:20px;
}
.middle-bar-info svg{
    width:30px;
    height:30px;
}
.files-list{
    list-style: none;
    padding-right:0;
    direction: rtl;
}
.files-list li{
    padding-top:10px;
    padding-bottom:10px;
    border-bottom: 1px solid #f0f0f0;
}
.files-list li:hover{
    background-color: #f1f1f1;
}
.files-list li:nth-child(odd){
    background-color: #f7f7f7;
}
.files-list li:nth-child(even){
    background-color: #f3f3f3;
}
#comment-form{
    margin-bottom:30px;
}
#comment-form textarea{
    width:100%;
    height:100px;
    border: none;
    border-bottom:1px solid #eee;
    resize: none;
    margin-top:5px;
    padding:5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom:10px;
}
.thumbs-container ul{
    float:left;
    padding-left:0;
    direction: rtl;
}
.thumbs-container{
    margin-top:10px;
    margin-bottom:10px;
    margin-left:10px;
}
.thumbs-container ul li{
    display: inline-block;
    margin-right:10px;
}
.thumbs-container ul li.thumb-up{
    color:#4cae4c;
    font-size:13px;
}
.thumbs-container ul li.thumb-down{
    color:#b91a1a;
    font-size:13px;
}
.feed__item {
    background: #fff;
    margin-bottom: 20px;
    margin-top:20px;
}
.feed__item > p:first-child {
    font-weight: 800;
    border-bottom: 3px solid #f3f3f3;
}
.feed__item > p {
    padding: 10px 15px;
    margin-top: 0;
    margin-bottom: 0;
}
.feed__item > p:last-child {
    padding-bottom: 30px;
}

#comment-form input{
    width:100%;
    height:35px;
    line-height: 35px;
    text-align: right;
    direction: rtl;
    border:none;
    border-bottom:1px solid #eee;
    padding:0 5px;
    margin-top:5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom:10px;
}
#comment-form button:hover{
    background-color: #4cae4c;
}
#comment-form button{
    border:none;
    background-color: #0F9E5E;
    color:#fff;
    padding:5px 10px;
    text-align: center;
    border: none;
    width:120px;
}
.item-duration2 svg{
    width:20px;
    height:20px;
    fill:#333;
}
.item-duration2{
    width:50px;
    height:61px;
    background-color: #eee;
    line-height: 70px;
    text-align: center;
    float:left;
    margin-top:-10px;
    margin-bottom:-10px;
}
.files-list li:hover .item-duration2{
    background-color: #e0e0e0;
}
.middle-bar-info-1{
    color:#999;
    text-align: center;
    font-size:12px;
    margin-top:5px;
    margin-bottom:5px;
}
.middle-bar-info-2{
    color:#000;
    text-align: center;
    font-size:16px;
    margin-top:5px;
    margin-bottom:5px;
}
.slick-image-fix{
    width:100%;
    opacity: 0.4;
    filter: grayscale(0.6);
}
.slick-next{
    right:10px !important;
}

.slick-prev{
    left:10px !important;
    z-index:2;
}
.slick-next:before, .slick-prev:before{
    color:#000;
}
.slick-initialized .slick-slide{
    position:relative;
}
.slick-prev:before,.slick-next:before{
    font-family: FontAwesome !important;
    font-size:30px !important;
}
.col-md-9 .img-container{
    height:150px !important;
}
.route-to-page{
    background-color: #eee;
    height:40px;
    line-height: 40px;

}
.route-to-page ul{
    padding-right: 0;
    direction: rtl;
}
.route-to-page ul li{
    display: inline-block;
    color:#333;
    font-size:12px;
    height:40px;
    line-height: 40px;
    margin-left:5px;
}
.route-to-page ul li.active-route{
    color: #b91a1a;
}
.caption-for-slick{
    position: absolute;
    bottom:0;
    right:0;
    background-color: rgba(0,0,0,0.8);
    height:30px;
    line-height: 30px;
    font-size:11px !important;
    padding:0 10px;
    box-sizing: border-box;
    color:#fff;
    text-align: right;
    direction: rtl;
    width:100%;
    display:none;
}
.slick-next:before{
    content: "\f054";
}
.slick-prev:before{
    content: "\f053";
}
.slick-center .slick-image-fix{
    opacity:1;
    filter: grayscale(0);
}
.slick-center .caption-for-slick{
    display: block;
}
.hover-on-grid{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    opacity: 0;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}
.teacher-icon{
    color:#fff;
    margin-top:30px;
    position: relative;
    top:-100px;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}
.teacher-icon span{
    color:#ff8400;
}
.icons-container{
    text-align: center;
}
.icon-circle{
    width:60px;
    height:60px;
    /*border:1px solid #fff;*/
    border-radius: 50%;
    font-size:9px;
    text-align: center;
    color:#fff;
    display: inline-block;
    margin-right:5px;
    margin-top:10px;
    direction: rtl;
    position: relative;
    top:100px;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}
.icon-circle svg{
    fill: #fff !important;
    width:20px !important;
    margin-top:10px;
    height:20px;
}
.grid-box:hover .hover-on-grid{
    opacity: 1;
}
.grid-box:hover .icon-circle{
    top:0;
}

.grid-box:hover .teacher-icon{
    top:0;
}
.header-outer-layout{
    width:400px;
    margin:30px auto;
    border-bottom:1px solid #CCC;
    height:30px;
}
.read-more{
    background-color: #2196f3;
    color:#FFF;
    height:30px;
    line-height: 30px;
    margin:30px auto;
    border:1px solid #2196f3;
}
.read-more a{
    color:#fff;
    display: block;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
}
.read-more:hover{
    background-color: #fff;
}
.read-more:hover a{
    color:#2196f3;
}
.header-inner-layout{
    display: inline-block;
    background-color: #fff;
    margin:0 auto;
    position: relative;
    left:50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);
    font-size:18px;
    top:18px;
    padding: 0 10px;
}

.wrap {
    margin: 20px auto;
    width: 10px;
    height: 10px;
    display: inline-block;
    float:right;
    margin-right: 21px;
}
.filter-row{
    clear: both;
    margin-top:5px;
    margin-bottom:5px;
}
.text-filter-container{
    float:right;
}
.text-filter-container{
    margin-top:25px;
    margin-right:20px;
}
.filter-box .btn {
    float: left;
    margin-right: 0px;
    width: 20px;
    height: 25px;
    background: linear-gradient(to bottom, #eff1f7 0%, #d6dbe5 100%);
    border-radius: 50%;
    line-height: 70px;
    text-align: center;
    font-size: 25px;
    color: #737A87;
    cursor: pointer;
    position: relative;
    box-shadow: 0 0 2px 0 #a1a5ac, 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    transition: all .4s ease;
    user-select: none;
}
.filter-box .btn:before {
    display: block;
    content: "";
    background: linear-gradient(to bottom, #e7eaf1 0%, #eceef3 100%);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    left: -5px;
    z-index: -1;
    box-shadow: inset 0 2px 5px -1px rgba(0, 0, 0, 0.1);
}
.filter-box .btn:hover {
    background: linear-gradient(to bottom, #f7f8fb 0%, #dee2e7 100%);
}
.filter-box .btn.active {
    background: linear-gradient(to bottom, #e7ebf2 0%, #c8ced9 100%);
    box-shadow: 0 0 2px 0 #ccd2dd, 0 2px 3px 0 rgba(0, 0, 0, 0.3);
}
.btn i{
    font-size:12px !important;
    position:relative;
    left:-5px;
    top:-30px;
}
.filter-box{
    margin-top:120px;
    background-color: #fef5f5;
    padding-bottom:20px;
}
.header-filter{
    text-align: right;
    padding:0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #eee;
    height:40px;
    line-height: 40px;
}
.filter-content-container{
    padding:5px 10px;
}
.filter-box.lower-margin{
    margin-top:30px !important;
}





.pagination .btn {
    position: relative;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: #2196f3;
    color: white;
    outline: 0;
    text-decoration: none;
    transition: all .1s linear;
}
.pagination .btn:hover {
    background-color: #2196f3;
}

.pagination .btn-next {
    border-radius: 4px 0 0 4px;
    margin-right: 18px;
    transition: all .1s linear;
}
.pagination .btn-next:hover::after {
    border-left: 17px solid #2196f3;
}
.pagination .btn-next::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -18px;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #2196f3;
}

.pagination .btn-prev {
    border-radius: 0 4px 4px 0;
    margin-left: 18px;
    transition: all .1s linear;
}
.pagination .btn-prev:hover::after {
    border-right: 17px solid #2196f3;
}
.pagination .btn-prev::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -18px;
    width: 0;
    height: 0;
    border-bottom: 17px solid transparent;
    border-top: 17px solid transparent;
    border-right: 17px solid #2196f3;
}
.pagination{
    margin-top:30px;
    margin-bottom:30px;
    text-align: center;
    width:100%;
}

.bg {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
.page {
    margin: 0 auto;
    max-width: 980px;
    padding: 0 20px 40px;
    position: relative;
}




.pcss3t {
    border: 0 none;
    font-size: 0;
    margin: 0;
    outline: medium none;
    padding: 0;
    text-align: right;
    direction: rtl;
}
.pcss3t > input {
    left: -9999px;
    position: absolute;
}
.pcss3t > label {
    border: 0 none;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    outline: medium none;
    padding: 0;
    position: relative;
    transition: all 0.1s ease 0s;
    direction: rtl;
    text-align: right;
}
.pcss3t > label i {
    border: 0 none;
    display: block;
    font-family: FontAwesome;
    font-size: 17px;
    font-style: normal;
    margin: 16px 8px 0 -2px;
    outline: medium none;
    padding: 0;
    float:right;
    margin-left:10px;
}
.pcss3t > input:checked + label {
    cursor: default;
}
.pcss3t > ul {
    border: 0 none;
    display: block;
    font-size: 13px;
    list-style: none outside none;
    margin: 0;
    outline: medium none;
    overflow: hidden;
    padding: 0;
    position: relative;
}
.pcss3t > ul > li {
    -moz-box-sizing: border-box;
    opacity: 0;
    overflow: auto;
    padding: 3px 4px 0px;
    position: absolute;
    transition: all 0.5s ease 0s;
    width: 99%;
}
.tab-content{
    direction: rtl;
    font-family: iransans !important;
}
.pcss3t > .tab-content-first:checked ~ ul .tab-content-first, .pcss3t > .tab-content-2:checked ~ ul .tab-content-2, .pcss3t > .tab-content-3:checked ~ ul .tab-content-3, .pcss3t > .tab-content-4:checked ~ ul .tab-content-4, .pcss3t > .tab-content-5:checked ~ ul .tab-content-5, .pcss3t > .tab-content-6:checked ~ ul .tab-content-6, .pcss3t > .tab-content-7:checked ~ ul .tab-content-7, .pcss3t > .tab-content-8:checked ~ ul .tab-content-8, .pcss3t > .tab-content-9:checked ~ ul .tab-content-9, .pcss3t > .tab-content-last:checked ~ ul .tab-content-last {
    left: 0;
    opacity: 1;
    top: 0;
    z-index: 1;
}
.pcss3t-height-auto > ul {
    height: auto !important;
}
.pcss3t-height-auto > ul > li {
    display: none;
    height: auto !important;
    position: static;
}
.pcss3t-height-auto > .tab-content-first:checked ~ ul .tab-content-first, .pcss3t-height-auto > .tab-content-2:checked ~ ul .tab-content-2, .pcss3t-height-auto > .tab-content-3:checked ~ ul .tab-content-3, .pcss3t-height-auto > .tab-content-4:checked ~ ul .tab-content-4, .pcss3t-height-auto > .tab-content-5:checked ~ ul .tab-content-5, .pcss3t-height-auto > .tab-content-last:checked ~ ul .tab-content-last {
    display: block;
}
.pcss3t .grid-row {
    margin-top: 20px;
}
.pcss3t .grid-row:after {
    clear: both;
    content: "";
    display: table;
}
.pcss3t .grid-row:first-child {
    margin-top: 0;
}
.pcss3t .grid-col {
    display: block;
    float: left;
    margin-left: 2%;
}
.pcss3t .grid-col:first-child {
    margin-left: 0;
}
.pcss3t .grid-col .inner {
    background: none repeat scroll 0 0 #F2F2F2;
    border-radius: 5px 5px 5px 5px;
    padding: 10px 0;
    text-align: center;
}
.pcss3t .grid-col-1 {
    width: 15%;
}
.pcss3t .grid-col-2 {
    width: 32%;
}
.pcss3t .grid-col-3 {
    width: 49%;
}
.pcss3t .grid-col-4 {
    width: 66%;
}
.pcss3t .grid-col-5 {
    width: 83%;
}
.pcss3t .grid-col-offset-1 {
    margin-left: 19%;
}
.pcss3t .grid-col-offset-1:first-child {
    margin-left: 17%;
}
.pcss3t .grid-col-offset-2 {
    margin-left: 36%;
}
.pcss3t .grid-col-offset-2:first-child {
    margin-left: 34%;
}
.pcss3t .grid-col-offset-3 {
    margin-left: 53%;
}
.pcss3t .grid-col-offset-3:first-child {
    margin-left: 51%;
}
.pcss3t .grid-col-offset-4 {
    margin-left: 70%;
}
.pcss3t .grid-col-offset-4:first-child {
    margin-left: 68%;
}
.pcss3t .grid-col-offset-5:first-child {
    margin-left: 85%;
}
.pcss3t .typography {
    color: #666666;
}
.pcss3t .typography h1, .pcss3t .typography h2, .pcss3t .typography h3, .pcss3t .typography h4, .pcss3t .typography h5, .pcss3t .typography h6 {
    color: #333333;
    font-family: iransans;
    margin: 40px 0 0;
    padding: 0;
    text-align: right;
}
.pcss3t .typography h1 {
    font-size: 40px;
    line-height: 60px;
    text-shadow: 3px 3px rgba(0, 0, 0, 0.1);
}
.pcss3t .typography h2 {
    font-size: 32px;
    line-height: 48px;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.1);
}
.pcss3t .typography h3 {
    font-size: 26px;
    line-height: 38px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}
.pcss3t .typography h4 {
    font-size: 20px;
    line-height: 30px;
}
.pcss3t .typography h5 {
    font-size: 15px;
    line-height: 23px;
    text-transform: uppercase;
}
.pcss3t .typography h6 {
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
}
.pcss3t .typography p {
    line-height: 20px;
    margin: 20px 0 0;
    padding: 0;
    text-align: right;
}

.pcss3t .typography a {
    color: #1889E6;
    text-decoration: underline;
}
.pcss3t .typography a:hover {
    text-decoration: none;
}
.pcss3t .typography .pic {
    border: 1px dotted #CCCCCC;
    padding: 4px;
}
.pcss3t .typography .pic img {
    display: block;
}
.pcss3t .typography .pic-right {
    float: right;
    margin: 0 0 10px 20px;
}
.pcss3t .typography .link {
    color: #1889E6;
    cursor: pointer;
    text-decoration: underline;
}
.pcss3t .typography .link:hover {
    text-decoration: none;
}
.pcss3t .typography h1:first-child, .pcss3t .typography h2:first-child, .pcss3t .typography h3:first-child, .pcss3t .typography h4:first-child, .pcss3t .typography h5:first-child, .pcss3t .typography h6:first-child, .pcss3t .typography p:first-child {
    margin-top: 0;
}
.pcss3t .typography h1:first-child{
    font-size:18px !important;
    color:#b91a1a;
    text-shadow: none;
}
.pcss3t .typography .text-center {
    text-align: center;
}
.pcss3t .typography .text-right {
    text-align: right;
}
.pcss3t-steps > label {
    cursor: default;
}

.pcss3t-layout-top-right {
    text-align: right;
}
.pcss3t-layout-top-center {
    text-align: center;
}
.pcss3t > .right {
    float: right;
}
.pcss3t-icons-top > label {
    text-align: center;
}
.pcss3t-icons-top > label i {
    float: none;
    font-size: 23px;
    line-height: 23px;
    margin: 0 auto -10px;
    padding-top: 17px;
    text-align: center;
}
.pcss3t-icons-right > label i {
    float: right;
    margin: 0 -2px 0 8px;
}
.pcss3t-icons-bottom > label {
    text-align: center;
}
.pcss3t-icons-bottom > label i {
    float: none;
    font-size: 23px;
    line-height: 23px;
    margin: -10px auto 0;
    padding-bottom: 17px;
    text-align: center;
}
.pcss3t-icons-only > label i {
    float: none;
    font-size: 23px;
    margin: 0 auto;
}

.icon-glass:before {
    content: "";
}
.icon-music:before {
    content: "";
}
.icon-search:before {
    content: "";
}
.icon-envelope:before {
    content: "";
}
.icon-heart:before {
    content: "";
}
.icon-star:before {
    content: "";
}
.icon-star-empty:before {
    content: "";
}
.icon-user:before {
    content: "";
}
.icon-film:before {
    content: "";
}
.icon-th-large:before {
    content: "";
}
.icon-th:before {
    content: "";
}
.icon-th-list:before {
    content: "";
}
.icon-ok:before {
    content: "";
}
.icon-remove:before {
    content: "";
}
.icon-zoom-in:before {
    content: "";
}
.icon-zoom-out:before {
    content: "";
}
.icon-off:before {
    content: "";
}
.icon-signal:before {
    content: "";
}
.icon-cog:before {
    content: "";
}
.icon-trash:before {
    content: "";
}
.icon-home:before {
    content: "";
}
.icon-file:before {
    content: "";
}
.icon-time:before {
    content: "";
}
.icon-road:before {
    content: "";
}
.icon-download-alt:before {
    content: "";
}
.icon-download:before {
    content: "";
}
.icon-upload:before {
    content: "";
}
.icon-inbox:before {
    content: "";
}
.icon-play-circle:before {
    content: "";
}
.icon-repeat:before {
    content: "";
}
.icon-refresh:before {
    content: "";
}
.icon-list-alt:before {
    content: "";
}
.icon-lock:before {
    content: "";
}
.icon-flag:before {
    content: "";
}
.icon-headphones:before {
    content: "";
}
.icon-volume-off:before {
    content: "";
}
.icon-volume-down:before {
    content: "";
}
.icon-volume-up:before {
    content: "";
}
.icon-qrcode:before {
    content: "";
}
.icon-barcode:before {
    content: "";
}
.icon-tag:before {
    content: "";
}
.icon-tags:before {
    content: "";
}
.icon-book:before {
    content: "";
}
.icon-bookmark:before {
    content: "";
}
.icon-print:before {
    content: "";
}
.icon-camera:before {
    content: "";
}
.icon-font:before {
    content: "";
}
.icon-bold:before {
    content: "";
}
.icon-italic:before {
    content: "";
}
.icon-text-height:before {
    content: "";
}
.icon-text-width:before {
    content: "";
}
.icon-align-left:before {
    content: "";
}
.icon-align-center:before {
    content: "";
}
.icon-align-right:before {
    content: "";
}
.icon-align-justify:before {
    content: "";
}
.icon-list:before {
    content: "";
}
.icon-indent-left:before {
    content: "";
}
.icon-indent-right:before {
    content: "";
}
.icon-facetime-video:before {
    content: "";
}
.icon-picture:before {
    content: "";
}
.icon-pencil:before {
    content: "";
}
.icon-map-marker:before {
    content: "";
}
.icon-adjust:before {
    content: "";
}
.icon-tint:before {
    content: "";
}
.icon-edit:before {
    content: "";
}
.icon-share:before {
    content: "";
}
.icon-check:before {
    content: "";
}
.icon-move:before {
    content: "";
}
.icon-step-backward:before {
    content: "";
}
.icon-fast-backward:before {
    content: "";
}
.icon-backward:before {
    content: "";
    left: -2px;
    position: relative;
}
.icon-play:before {
    content: "";
    left: 1px;
    position: relative;
}
.icon-pause:before {
    content: "";
}
.icon-stop:before {
    content: "";
}
.icon-forward:before {
    content: "";
    left: 2px;
    position: relative;
}
.icon-fast-forward:before {
    content: "";
}
.icon-step-forward:before {
    content: "";
}
.icon-eject:before {
    content: "";
}
.icon-chevron-left:before {
    content: "";
}
.icon-chevron-right:before {
    content: "";
}
.icon-plus-sign:before {
    content: "";
}
.icon-minus-sign:before {
    content: "";
}
.icon-remove-sign:before {
    content: "";
}
.icon-ok-sign:before {
    content: "";
}
.icon-question-sign:before {
    content: "";
}
.icon-info-sign:before {
    content: "";
}
.icon-screenshot:before {
    content: "";
}
.icon-remove-circle:before {
    content: "";
}
.icon-ok-circle:before {
    content: "";
}
.icon-ban-circle:before {
    content: "";
}
.icon-arrow-left:before {
    content: "";
}
.icon-arrow-right:before {
    content: "";
}
.icon-arrow-up:before {
    content: "";
}
.icon-arrow-down:before {
    content: "";
}
.icon-share-alt:before {
    content: "";
}
.icon-resize-full:before {
    content: "";
}
.icon-resize-small:before {
    content: "";
}
.icon-plus:before {
    content: "";
}
.icon-minus:before {
    content: "";
}
.icon-asterisk:before {
    content: "";
}
.icon-exclamation-sign:before {
    content: "";
}
.icon-gift:before {
    content: "";
}
.icon-leaf:before {
    content: "";
}
.icon-fire:before {
    content: "";
}
.icon-eye-open:before {
    content: "";
}
.icon-eye-close:before {
    content: "";
}
.icon-warning-sign:before {
    content: "";
}
.icon-plane:before {
    content: "";
}
.icon-calendar:before {
    content: "";
}
.icon-random:before {
    content: "";
}
.icon-comment:before {
    content: "";
}
.icon-magnet:before {
    content: "";
}
.icon-chevron-up:before {
    content: "";
}
.icon-chevron-down:before {
    content: "";
}
.icon-retweet:before {
    content: "";
}
.icon-shopping-cart:before {
    content: "";
}
.icon-folder-close:before {
    content: "";
}
.icon-folder-open:before {
    content: "";
}
.icon-resize-vertical:before {
    content: "";
}
.icon-resize-horizontal:before {
    content: "";
}
.icon-bar-chart:before {
    content: "";
}
.icon-twitter-sign:before {
    content: "";
}
.icon-facebook-sign:before {
    content: "";
}
.icon-camera-retro:before {
    content: "";
}
.icon-key:before {
    content: "";
}
.icon-cogs:before {
    content: "";
}
.icon-comments:before {
    content: "";
}
.icon-thumbs-up:before {
    content: "";
}
.icon-thumbs-down:before {
    content: "";
}
.icon-star-half:before {
    content: "";
}
.icon-heart-empty:before {
    content: "";
}
.icon-signout:before {
    content: "";
}
.icon-linkedin-sign:before {
    content: "";
}
.icon-pushpin:before {
    content: "";
}
.icon-external-link:before {
    content: "";
}
.icon-signin:before {
    content: "";
}
.icon-trophy:before {
    content: "";
}
.icon-github-sign:before {
    content: "";
}
.icon-upload-alt:before {
    content: "";
}
.icon-lemon:before {
    content: "";
}
.icon-phone:before {
    content: "";
}
.icon-check-empty:before {
    content: "";
}
.icon-bookmark-empty:before {
    content: "";
}
.icon-phone-sign:before {
    content: "";
}
.icon-twitter:before {
    content: "";
}
.icon-facebook:before {
    content: "";
}
.icon-github:before {
    content: "";
}
.icon-unlock:before {
    content: "";
}
.icon-credit-card:before {
    content: "";
}
.icon-rss:before {
    content: "";
}
.icon-hdd:before {
    content: "";
}
.icon-bullhorn:before {
    content: "";
}
.icon-bell:before {
    content: "";
}
.icon-certificate:before {
    content: "";
}
.icon-hand-right:before {
    content: "";
}
.icon-hand-left:before {
    content: "";
}
.icon-hand-up:before {
    content: "";
}
.icon-hand-down:before {
    content: "";
}
.icon-circle-arrow-left:before {
    content: "";
}
.icon-circle-arrow-right:before {
    content: "";
}
.icon-circle-arrow-up:before {
    content: "";
}
.icon-circle-arrow-down:before {
    content: "";
}
.icon-globe:before {
    content: "";
}
.icon-wrench:before {
    content: "";
}
.icon-tasks:before {
    content: "";
}
.icon-filter:before {
    content: "";
}
.icon-briefcase:before {
    content: "";
}
.icon-fullscreen:before {
    content: "";
}
.icon-group:before {
    content: "";
}
.icon-link:before {
    content: "";
}
.icon-cloud:before {
    content: "";
}
.icon-beaker:before {
    content: "";
}
.icon-cut:before {
    content: "";
}
.icon-copy:before {
    content: "";
}
.icon-paper-clip:before {
    content: "";
}
.icon-save:before {
    content: "";
}
.icon-sign-blank:before {
    content: "";
}
.icon-reorder:before {
    content: "";
}
.icon-list-ul:before {
    content: "";
}
.icon-list-ol:before {
    content: "";
}
.icon-strikethrough:before {
    content: "";
}
.icon-underline:before {
    content: "";
}
.icon-table:before {
    content: "";
}
.icon-magic:before {
    content: "";
}
.icon-truck:before {
    content: "";
}
.icon-pinterest:before {
    content: "";
}
.icon-pinterest-sign:before {
    content: "";
}
.icon-google-plus-sign:before {
    content: "";
}
.icon-google-plus:before {
    content: "";
}
.icon-money:before {
    content: "";
}
.icon-caret-down:before {
    content: "";
}
.icon-caret-up:before {
    content: "";
}
.icon-caret-left:before {
    content: "";
}
.icon-caret-right:before {
    content: "";
}
.icon-columns:before {
    content: "";
}
.icon-sort:before {
    content: "";
}
.icon-sort-down:before {
    content: "";
}
.icon-sort-up:before {
    content: "";
}
.icon-envelope-alt:before {
    content: "";
}
.icon-linkedin:before {
    content: "";
}
.icon-undo:before {
    content: "";
}
.icon-legal:before {
    content: "";
}
.icon-dashboard:before {
    content: "";
}
.icon-comment-alt:before {
    content: "";
}
.icon-comments-alt:before {
    content: "";
}
.icon-bolt:before {
    content: "";
}
.icon-sitemap:before {
    content: "";
}
.icon-umbrella:before {
    content: "";
}
.icon-paste:before {
    content: "";
}
.icon-lightbulb:before {
    content: "";
}
.icon-exchange:before {
    content: "";
}
.icon-cloud-download:before {
    content: "";
}
.icon-cloud-upload:before {
    content: "";
}
.icon-user-md:before {
    content: "";
}
.icon-stethoscope:before {
    content: "";
}
.icon-suitcase:before {
    content: "";
}
.icon-bell-alt:before {
    content: "";
}
.icon-coffee:before {
    content: "";
}
.icon-food:before {
    content: "";
}
.icon-file-alt:before {
    content: "";
}
.icon-building:before {
    content: "";
}
.icon-hospital:before {
    content: "";
}
.icon-ambulance:before {
    content: "";
}
.icon-medkit:before {
    content: "";
}
.icon-fighter-jet:before {
    content: "";
}
.icon-beer:before {
    content: "";
}
.icon-h-sign:before {
    content: "";
}
.icon-plus-sign-alt:before {
    content: "";
}
.icon-double-angle-left:before {
    content: "";
}
.icon-double-angle-right:before {
    content: "";
}
.icon-double-angle-up:before {
    content: "";
}
.icon-double-angle-down:before {
    content: "";
}
.icon-angle-left:before {
    content: "";
}
.icon-angle-right:before {
    content: "";
}
.icon-angle-up:before {
    content: "";
}
.icon-angle-down:before {
    content: "";
}
.icon-desktop:before {
    content: "";
}
.icon-laptop:before {
    content: "";
}
.icon-tablet:before {
    content: "";
}
.icon-mobile-phone:before {
    content: "";
}
.icon-circle-blank:before {
    content: "";
}
.icon-quote-left:before {
    content: "";
}
.icon-quote-right:before {
    content: "";
}
.icon-spinner:before {
    content: "";
}
.icon-reply:before {
    content: "";
}
.icon-github-alt:before {
    content: "";
}
.icon-folder-close-alt:before {
    content: "";
}
.icon-folder-open-alt:before {
    content: "";
}
.pcss3t > .right {
    float: none;
}
.pcss3t > label {
    background: none repeat scroll 0 0 #E5E5E5;
    font-size: 13px;
    line-height: 49px;
    padding: 0 20px;
}
.pcss3t > label:hover {
    background: none repeat scroll 0 0 #F2F2F2;
}
.pcss3t > input:checked + label {
    background: none repeat scroll 0 0 #FFFFFF;
}
.pcss3t > ul {
    background: none repeat scroll 0 0 #FFFFFF;
    text-align: right;
}
.pcss3t-steps > label:hover {
    background: none repeat scroll 0 0 #E5E5E5;
}
.pcss3t-theme-1 > label {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 2px rgba(0, 0, 0, 0.2);
    color: #808080;
    margin: 0 5px 5px 0;
    opacity: 0.8;
}
.pcss3t-theme-1 > label:hover {
    background: none repeat scroll 0 0 #FFFFFF;
    opacity: 1;
}
.pcss3t-theme-1 > input:checked + label {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: #2B82D9;
    margin-bottom: 0;
    opacity: 1;
    padding-bottom: 5px;
}
.pcss3t-theme-1 > ul {
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 3px rgba(0, 0, 0, 0.2);
}
.pcss3t-theme-1 > .tab-content-first:checked ~ ul {
    border-top-left-radius: 0;
}
.pcss3t-theme-1 > label {
    margin-right: 0;
}
.pcss3t-theme-1 > input:checked + label {
    border-radius: 5px 5px 5px 5px;
    margin-bottom: 5px;
    padding-bottom: 0;
}
.pcss3t-theme-1 > .tab-content-first:checked ~ ul {
    border-top-left-radius: 5px;
}
.pcss3t-theme-2 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
    padding: 5px;
}
.pcss3t-theme-2 > label {
    background: none repeat scroll 0 0 transparent;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    margin-bottom: 0;
    margin-right: 0;
    opacity: 1;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.pcss3t-theme-2 > label:hover {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
}
.pcss3t-theme-2 > input:checked + label {
    background: -moz-linear-gradient(center top , #E5E5E5 0%, #FFFFFF 100%) repeat scroll 0 0 transparent;
    color: #822BD9;
    padding-bottom: 0;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.pcss3t-theme-2 > ul {
    border-radius: 0 0 0 0;
    box-shadow: none;
    margin: 0 -5px -5px;
}
.pcss3t-theme-2 > ul {
    margin-top: 5px;
}
.pcss3t-theme-3 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
}
.pcss3t-theme-3 > label {
    background: none repeat scroll 0 0 transparent;
    border-right: 1px dotted rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    opacity: 0.6;
    text-align: center;
}
.pcss3t-theme-3 > label:hover {
    background: none repeat scroll 0 0 transparent;
    color: #D9D92B;
    opacity: 0.8;
}
.pcss3t-theme-3 > input:checked + label {
    background: none repeat scroll 0 0 #D9D92B;
    color: #000000;
    opacity: 1;
}
.pcss3t-theme-3 > ul {
    border-bottom: 4px solid #D9D92B;
    border-radius: 0 0 0 0;
    border-top: 4px solid #D9D92B;
    box-shadow: none;
}
.pcss3t-theme-4 > label {
    background: -moz-linear-gradient(center top , #78C5FD 0%, #2C8FDD 100%) repeat scroll 0 0 transparent;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px rgba(255, 255, 255, 0.5) inset, 0 1px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    line-height: 39px;
    margin: 0 10px 10px 0;
    text-shadow: 0 1px rgba(0, 0, 0, 0.5);
}
.pcss3t-theme-4 > label:hover {
    background: -moz-linear-gradient(center top , #90CFFC 0%, #439BDE 100%) repeat scroll 0 0 transparent;
}
.pcss3t-theme-4 > input:checked + label {
    background: -moz-linear-gradient(center top , #5F9DC9 0%, #2270AB 100%) repeat scroll 0 0 transparent;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 1px rgba(255, 255, 255, 0.5);
    text-shadow: none;
    top: 1px;
}
.pcss3t-theme-4 > ul {
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
.pcss3t-theme-4 > label {
    margin-right: 0;
}
.pcss3t-theme-5 {
    background: -moz-linear-gradient(left center , #AD6395 0%, #A163AD 100%) repeat scroll 0 0 transparent;
    border-radius: 5px 5px 5px 5px;
    padding: 15px;
}
.pcss3t-theme-5 > label {
    background: none repeat scroll 0 0 transparent;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    margin-bottom: 15px;
    margin-right: 10px;
    opacity: 1;
    text-align: center;
}
.pcss3t-theme-5 > label:hover {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.15);
}
.pcss3t-theme-5 > input:checked + label {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
    color: #000000;
}
.pcss3t-theme-5 > input:checked + label:after {
    border-bottom: 6px solid #FFFFFF;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    left: 50%;
    margin-left: -6px;
    margin-top: 10px;
    position: absolute;
    top: 100%;
}
.pcss3t-theme-5 > ul {
    border-radius: 0 0 5px 5px;
    box-shadow: none;
    margin: 0 -15px -15px;
}
.pcss3t-theme-5 > input:checked + label:after {
    display: none;
}
.pcss3t > ul, .pcss3t > ul > li {
    height: 370px;
}








/* Gallery Css */



/*code {
  background: #F8F8F8;
  padding: .1em .4em;
  color: #c82829;
  font-size: 14px;
}*/
code, pre {
    font-family:  Menlo, Monaco, monospace;
    font-size: 12px;
    line-height: 1.45;
    color: #333;
    tab-size: 4;
}
pre {
    padding: 0;
    margin: 0;
    overflow: auto;

    word-wrap: normal;

    text-rendering: auto;
    -webkit-font-smoothing: auto;
}
code {
    padding: 0;
    padding: 3px 5px;
    margin: 0;
    background: #f2f2f2;
    border-radius: 2px;
}
pre code {
    background: none;
    padding: 0;
    border-radius: 0;


}
h3 code {
    font-size: 22px;
    font-weight: normal;
    padding: 6px 10px;
}
h3 code.default {
    font-size: 12px;
    padding: 0;
    background: none;
    opacity: 0.7;
}

.docs p {
    margin: 0;
    padding-bottom: 12px;
    padding-top: 12px;
}
.docs h1 {
    margin-bottom: 32px;
}
.docs h1 a {
    text-decoration: none;
}
.docs h1 a:hover {
    text-decoration: underline;
}
.docs h2 {
    margin: 0;
    margin: 36px 0 12px;
}
.docs h3 {
    margin: 0;
    margin: 24px 0 8px 0;
    font-size: 22px;
    line-height: 28px;
}
.docs ul,
.docs ol {
    margin-top: 8px;
    margin-bottom: 8px;
}
.docs li {
    margin: 0;
    padding: 4px 0;
}

.docs-menu {
    position: absolute;
    width: 160px;
    left: 0;
    top: 106px;

}

.docs-menu ul {
    list-style: none;
    margin: 0;
    padding: 25px 0;

    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}

.docs-menu__ad {
    padding: 25px 10px;
    border-bottom: 1px solid #CCC;
    font-size: 13px;
    line-height: 17px;
    position: relative;
}
.docs-menu a {
    text-decoration: none;
    width: 100%;
}
a.docs-logo {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 0;
    text-decoration: none;
}
.docs-menu li {
    list-style: none;
    margin: 0;
    padding:0;
}
a.docs-menu__item--active {
    color: #222;
    font-weight: normal;
}

.codepen-embed {
    margin-left: -30px;
    padding: 16px 30px;
    width: 100%;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    background-color: #f8f8f8;
    height: 600px;

}
.codepen-embed--disabled {
    height: auto;
}
.codepen-embed p {
    margin-bottom: 0;
}

.docs .highlight {
    border-radius: 2px;
    margin-left: -30px;
    padding: 16px 30px;
    width: 100%;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    margin-bottom: 26px;
}




/* Syntax highlighter styles (for docs) */
.highlight { background-color: #f8f8f8 }
.c { color: #888; } /* Comment */
.err { color: #a61717; background-color: #e3d2d2 } /* Error */
.k { color: #a71d5d; } /* Keyword */
.o { color: #000000; } /* Operator */
.cm { color: #888; } /* Comment.Multiline */
.cp { color: #888; font-weight: bold;} /* Comment.Preproc */
.c1 { color: #888;  } /* Comment.Single */
.cs { color: #888; font-weight: bold; } /* Comment.Special */
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.ge { color: #000000; } /* Generic.Emph */
.gr { color: #aa0000 } /* Generic.Error */
.gh { color: #888 } /* Generic.Heading */
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.go { color: #888888 } /* Generic.Output */
.gp { color: #555555 } /* Generic.Prompt */
.gs { font-weight: bold } /* Generic.Strong */
.gu { color: #aaaaaa } /* Generic.Subheading */
.gt { color: #aa0000 } /* Generic.Traceback */
.kc { color: #0086b3; } /* Keyword.Constant */
.kd { color: #a71d5d; } /* Keyword.Declaration */
.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
.kt { color: #795da3; } /* Keyword.Type */
.m { color: #009999 } /* Literal.Number */
.s { color: #df5000 } /* Literal.String */
.na { color: #a71d5d } /* Name.Attribute */
.nb { color: #0086B3 } /* Name.Builtin */
.nc { color: #795da3; } /* Name.Class */
.no { color: #a71d5d } /* Name.Constant */
.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
.ni { color: #800080 } /* Name.Entity */
.ne { color: #990000; font-weight: bold } /* Name.Exception */
.nf { color: #990000; font-weight: bold } /* Name.Function */
.nl { color: #990000; font-weight: bold } /* Name.Label */
.nn { color: #555555 } /* Name.Namespace */
.nt { color: #0086b3 } /* Name.Tag */
.nv { color: #a71d5d } /* Name.Variable */
.ow { color: #000000; font-weight: bold } /* Operator.Word */
.w { color: #bbbbbb } /* Text.Whitespace */
.mf { color: #009999 } /* Literal.Number.Float */
.mh { color: #009999 } /* Literal.Number.Hex */
.mi { color: #009999 } /* Literal.Number.Integer */
.mo { color: #009999 } /* Literal.Number.Oct */
.sb { color: #df5000 } /* Literal.String.Backtick */
.sc { color: #df5000 } /* Literal.String.Char */
.sd { color: #df5000 } /* Literal.String.Doc */
.s2 { color: #df5000 } /* Literal.String.Double */
.se { color: #df5000 } /* Literal.String.Escape */
.sh { color: #df5000 } /* Literal.String.Heredoc */
.si { color: #df5000 } /* Literal.String.Interpol */
.sx { color: #df5000 } /* Literal.String.Other */
.sr { color: #009926 } /* Literal.String.Regex */
.s1 { color: #df5000 } /* Literal.String.Single */
.ss { color: #990073 } /* Literal.String.Symbol */
.bp { color: #888 } /* Name.Builtin.Pseudo */
.vc { color: #a71d5d } /* Name.Variable.Class */
.vg { color: #a71d5d } /* Name.Variable.Global */
.vi { color: #a71d5d } /* Name.Variable.Instance */
.il { color: #009999 } /* Literal.Number.Integer.Long */


.language-css .k {
    color: #0086b3;
}
.language-css .nt {
    color: #63a35c;
}




/*body.open-sans {
  font-family: "open-sans";
}
.futura-pt {

}
.futura-pt p {
  font-family: "adelle";
}
.futura-pt h1, .futura-pt h2 {
  font-family: "futura-pt";
  text-transform: uppercase;
}
.futura-pt h3 {
  font-weight: bold;
}
*/
.video {
    width: 100%;
    margin: 0 0 24px 0;
}
.upper-box-writer{
    -webkit-animation: movement 60s infinite linear; /* Safari 4.0 - 8.0 */
    animation: movement 60s infinite linear;
    background-image: url("../images/school.png");
    background-size: 200px auto;
    background-color: #ccc;
    min-height: 80px;
    position: relative;
    z-index: 2000;
}
.header-for-articles{
    background-image: url("../images/article-wallpaper.jpg");
    background-size: 100% auto;
    background-attachment: fixed;
    position: relative;
    height:250px;
}
.social-icons{
    list-style: none;
    width:200px;
    margin:5px auto 35px auto;
    padding-left:0 !important;
}
.social-icons li{
    width:calc(25% - 5px);
    display: inline-block;
    text-align: center;
}
.social-icons li a{
    display: block;
    height:30px;
    font-size:12px;
    color:#999;
    text-align: center;
    line-height: 30px;
}
.header-for-article{
    background-color: #f0f0f0;
    height:50px;
    line-height: 50px;
    margin-top:50px;
    padding:0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.author-name2{
    margin-top:5px;
    margin-bottom:5px;
    font-size:15px;
    color:#666;
    text-align: center;
}
.form-horizontal input, .form-horizontal textarea{
    text-align: right;
}
.well textarea{
    resize: none;
}
#success_message{ display: none;}
.content-for-blog{
    background-color: #f8f8f8;
}
.well{
    border-radius: 0;
    margin-top:30px;
    margin-bottom:30px;
}
.writer-container{
    padding-top:30px;
    padding-bottom:30px;
}
.blog-content{
    margin-top:10px;
    padding:0 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.blog-content p{
    text-align: justify;
    direction: rtl;
    font-size:16px;
    color:#333;
    line-height: 30px;
}
.margin-top-for-header{
    margin-top:30px;
}
.writer-container.none-bottom-pad{
    padding-bottom:0 !important;
}
.comment-translate{
    -webkit-transform: translate(-104%) !important;
    -moz-transform: translate(-104%) !important;
    -ms-transform: translate(-104%) !important;
    -o-transform: translate(-104%) !important;
    transform: translate(-104%) !important;
}
.feed__item > span{
    color:#999;
    font-size: 12px;
    float:left;
    margin-top:-30px;
}
.social-share-blog{
    width:300px;
    margin:15px auto 30px auto;
}
.social-share-blog ul{
    direction: rtl;
    padding-right: 0;
    list-style: none;
    width:100%;
}
.social-share-blog ul li{
    display: inline-block;
    width:calc(25% - 5px);
    height:70px;
}
.social-share-blog ul li a{
    font-size:32px;
    text-decoration: none;
    display: block;
    text-align: center;
    line-height: 70px;
    color:#999;
}
.social-share-blog ul li a:hover{
    color:#666;
}
.blog-content img{
    width:90%;
    position: relative;
    left:5%;
    opacity:0.9;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    margin-top:30px;
    margin-bottom:30px;
}
.blog-content img:hover{
    opacity: 1;
}
.header-for-article .title-container{
    width:calc(50% - 10px);
    float:right;
    height:50px;
    line-height: 50px;
    color:#333;
    font-size:18px;
    text-align: right;
}
.date-for-header{
    width:calc(50% - 10px);
    float:left;
    text-align: left;
    color:#666;
    font-size:15px;
    line-height: 50px;
    height:50px;
}
.header-for-articles > div{
    background: rgba(0,0,0,0.5);
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;

}
.header-for-articles > h1{
    position: relative;
    z-index: 100;
    text-align: center;
    line-height: 250px;
    display: block;
    color:#fff;
    margin:0 0 !important;
}
.author-box-container{
    margin-top:30px;
}
.header-inner-layout span{
    color:#ff8400;
}
.lower-box-writer{
    background-color: rgba(0,191,255,0.08);

}
.content-of-author{
    max-width: 600px;
    margin:10px auto;
    font-size:12px;
    text-align: center;
    color:#333;
    padding-bottom: 30px !important;
    line-height: 25px;
}
.margin-top-for-item-writer{
    margin-top:-45px;
    position: relative;
    z-index: 2000;
}
.author-name{
    font-weight:normal;
    font-size:18px;
    color:#333;
    text-align: center;
    display: block;
}
.video__container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

.video__container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-desc {
    width: 100%;
    max-width: 740px;
    margin: 12px auto;
}



.row--heading {
    position: relative;
}
.section--head p {
    text-align: left;
    font-size: 26px;
    line-height: 32px;
    margin-bottom: 24px;

    font-size: 19px;
    line-height: 29px;

}


.section--head .github-button {
    position: absolute;
    right:0;
    top:0;
}
.row--nav {
    text-align: center;
    font-size: 32px;
    line-height: 1.1;
}
.navigation {
    width: 100%;
    background: #F7F7F7;
    position: relative;
    padding: 30px 0;
}
.navigation a {
    text-decoration: none;
    border-bottom: 1px solid #92ABCD;
}

a.twitter-nav-link {
    border: 0;
    margin: 0 0.2em;
}
.twitter-nav-link span {
    border-bottom: 1px solid #92ABCD;
}
.navigation a:hover,
.twitter-nav-link:hover span {
    border-bottom-color: #C00;
}
.twitter-nav-link:before {
    content: '';
    background: url('https://www.elecodeiranzamin.com/test/twitter.svg');
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    background-size: 0.7em 0.7em;
    background-repeat: no-repeat;
    background-position: 0 0.1em;
    margin-right: 0.1em;
}




h2 {
    font-size: 32px;
    line-height: 1.1;
    margin-bottom: 12px;
    font-weight: 600;
}

h3 {
    font-size: 22px;
    line-height: 28px;
    margin: 0 0 8px 0;

    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
}
strong {
    font-weight: 600;
}
span.highlight {
    background:rgb(246, 243, 226);
}
.title-block p {
    font-size: 22px;
    line-height: 28px;
    max-width: 600px;
    margin-bottom: 24px;

}

p, ul.text-list {
    color: #444;
}
.section--head p,
.title-block p {
    color: #666;
}




.title-block p {
    font-size: 19px;
    line-height: 29px;
}





.section {
    width: 100%;
    margin-top: 176px;
}
.docs {
    margin-top: 60px;
}
.section--head {
    margin: 0;
    background: #EEE;
    /*background: linear-gradient(180deg, #eee 0%,#fff 100%);*/
    padding: 132px 0;
}

.row--docs {
    max-width: 960px;
    padding-left: 210px;
}
.row--heading {
    margin-top: 0;
    margin-bottom: 0;
}
.demo-gallery a{
    width:244px !important;
    overflow: hidden;
}
.demo-gallery a img{
    width:100%;
    opacity: 0.9;
}
.demo-gallery a img:hover{
    opacity: 1;
}
.demo-gallery a.demo-gallery__img--main{
    width:360px !important;
    height:335px !important;
    overflow: hidden;
}
a.demo-gallery__img--main img{
    height:auto !important;
    width:100%;
}
.row--footer {
    text-align: center;
    padding: 132px 0;
}
.row--wide {
    max-width: 1000px;
}
.row--video {
    max-width: 1160px;
}

.row--wide img {
    float: left;
    margin: 0 12px 12px 0;
    width: 200px;
}
img.img--with_border {
    border: 1px solid #DDD;
    border-radius: 2px;
}
.img-desc {
    margin-left: 212px;
}

.margin-for-item2{
    margin-top:30px !important;
    margin-bottom:30px !important;
}


/*.main-wrapper {
  background: none;
	width: 100%;
  padding-top: 0;

}
.content-wrap {



}*/


/* clearfix */
.row:after{
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}
.row--large {
    margin-bottom: 48px;
}


.section--head h1 a {
    vertical-align: super;
    font-size: 14px;
    text-decoration: none;
}

/*p.intro {
  margin-top: 24px;
  font-size: 18px;
  line-height: 24px;
}*/







.col-50 {
    width: 48%;
    float: left;
}
.col-50:nth-child(1) {
    margin-right: 4%;
}
.col-img {
    width: auto;
    max-width: 100%;
    height: auto;
}

.style-select {
    width: 100%;
    float: left;
}
.style-select .radio {
    position: relative;
    margin-bottom: 12px;
    display: block;
    float: left;
    width: 100%;
}
.style-select label {
    padding-left: 24px;
    position: relative;
    display: block;
    cursor: pointer;
}
.style-select input {
    position: absolute;
    left:0;
    top:0;
    width:24px;
    height:24px;
    overflow:hidden;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    opacity:0;
    cursor: pointer;

}
.style-select input + label:before {
    content: '';
    position: absolute;
    left:0;
    top:4px;
    background: none;
    border-radius: 50%;
    width:16px;
    height:16px;
    box-sizing: border-box;
    border: 2px solid rgba(0,0,0,0.6);
}
.radio:hover label:before {
    border-color: #3169B3;
}
.style-select input:checked + label:before {
    border-color: #3169B3;
}
.style-select input:checked + label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 9px;
    width:6px;
    height: 6px;
    background: #3169B3;
    border-radius: 50%;
}

/*.section--developers {
  color: #FFF;
  background: #222;
  background: #1f1f1f;
  padding: 80px 0;
}
.section--developers a {
  color:#FFFFFF;
}
.section--developers p,
.section--developers  ul.text-list {
  color: #ddd;
}
.section--developers .section--head p,
.section--developers .title-block p {
  color: #ddd;
}*/

.row--modules ul {
    list-style: none;
    margin-left: 0;
    /*color: rgba(255, 255, 255, 0.8);*/
}
.row--modules span {
    font-wight:600;
    border-left:5px solid #FFF;
    padding-left:5px;
    margin-left:-10px;
}

.size-chart {
    width: 100%;
    display: inline-block;
}

.size-chart div {
    height: 21px;
    float: left;
    font-size: 13px;
    padding: 4px;
    line-height: 1;
}

.block__ui-separated {
    position: relative;
}
.block__ui-separated .col-50 {
    position: absolute;
    left: 0;
    top:12px;
}
.block__ui-separated img {
    float: right;
    max-width: 450px;
}


.demo-gallery {
    width: 100%;
    height: auto;
    float: left;
}
.demo-gallery a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
    display: block;
    float: left;
    margin: 0 12px 12px 0;
    width: 171px;
    line-height: 0;
}



a.demo-gallery__img--main {
    width: auto;
    height: auto;
}

.ukraine-flag {
    width: 21px;
    height: 14px;
    position: relative;
    background: #ffcc00;
    top: 1px;
    display: inline-block;
}
.ukraine-flag:before {
    content:'';
    position: absolute;
    width: 21px;
    height: 7px;
    left:0;
    top:0;
    background: #0066cc;
}

.demo-gallery figure {
    display: none;
}
.demo-gallery__title {
    line-height: 14px;
    font-size: 14px;
    opacity: 0.8;
    margin-top: 5px;
    width: 100%;
    float: left;
}

.share-buttons h2 {
    text-align: center;
    border: 0;

}
.share-buttons {
    text-align: center;
    position: relative;
    margin: 0 0 24px;
}
.share-buttons a {
    -moz-border-radius: 2px;
    border-radius: 2px;
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    color: #FFF;
    text-decoration: none;
    background: #5AAF63;
    font-size: 16px;
    line-height: 22px;
    cursor: pointer;
}
.share-buttons a:hover {
    opacity: 0.7;
}
#tweet {
    background: #0096c4;
}
#like {
    background: #3b5998;
}
#gplus {
    background: #d34836;
}



@media screen and (max-width: 1000px) {



    .row--wide {
        max-width: 800px;
    }
    .row--wide img {
        float: none;
    }
    .img-desc {
        margin-left: 0;
    }
    .section {
        margin-top: 132px;
    }

    .row--docs {
        max-width: 800px;
        padding-left: 30px;

    }

    .section--head {
        margin-top:0;
        padding: 30px 0;
    }

    .docs {
        margin-top: 48px;
    }

    .docs-menu {
        position: relative;
        margin: 15px 0;
        left:0;
        top:0;
    }
    .docs-menu  ul {
        position: relative;
    }
    .docs-menu__ad {
        display: none;
    }

    .row--nav {
        font-size: 24px;
        line-height: 1.1;
    }

}



@media screen and (max-width: 650px) {
    h1 {
        font-size: 40px;
    }
    .block__ui-separated .col-50 {
        position: relative;
        top: 0;
    }
    .block__ui-separated img {
        max-width: 100%;
        width: 100%;
        float: left;
    }
}

@media screen and (max-width: 450px) {


    .col-50:nth-child(1) {
        margin-right: 0;
    }
    .row--wide img {
        margin-bottom: 6px;
    }
    .col-50 {
        width: 100%;
        margin-bottom: 12px;
    }
    .row {
        padding: 0 18px;
    }
    .docs .highlight,
    .codepen-embed {
        padding-left: 18px;
        padding-right: 18px;
        margin-left: -18px;
    }
    .section {
        margin-top: 88px;
    }
    .docs {
        margin-top: 32px;
    }
    .section--head {
        margin-top:0;
        padding: 24px 0;
    }
    .row--nav {
        font-size: 18px;
        line-height: 26px;
    }


}

@media screen and (max-width: 700px) {

    .row--nav {
        font-size: 18px;
        line-height: 26px;
    }

    .demo-gallery {
        max-width: 500px;
    }
    .demo-gallery a {
        width: 120px;
        margin: 0 4px 4px 0;
    }
    a.demo-gallery__img--main {
        width: 164px;
    }
    .section--head p {
        font-size: 18px;
        line-height: 24px;
    }
}

/*@media screen and (max-width: 490px) {
  .demo-gallery a {
    width: 100px;
    margin: 0 4px 4px 0;
  }
  a.demo-gallery__img--main {
    width: 137px;
  }
}
*/


@media screen and (max-width: 450px) {
    .demo-gallery a {
        width: 95px;
        margin: 0 1px 1px 0;
    }
    a.demo-gallery__img--main {
        width: 127px;
    }
}


@media screen and (max-width: 350px) {
    .demo-gallery a {
        width: 81px;
        margin: 0 1px 1px 0;
    }
    a.demo-gallery__img--main {
        width: 109px;
    }
}
.like-author-button{
    position: absolute;
    left:-18px;
    top:-22px;
}

body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    font-family: arial;
}

#main-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: absolute;
    left:-2px;
    top:4px;
}


svg {
    cursor: pointer;
    overflow: visible;
    width: 60px;
}
svg #heart {
    transform-origin: center;
    animation: animateHeartOut .3s linear forwards;
}
svg #main-circ {
    transform-origin: 29.5px 29.5px;
}

#checkbox {
    display: none;
}

#checkbox:checked + label svg #heart {
    transform: scale(0.2);
    fill: #E2264D;
    animation: animateHeart .3s linear forwards .25s;
}
#checkbox:checked + label svg #main-circ {
    transition: all 2s;
    animation: animateCircle .3s linear forwards;
    opacity: 1;
}
#checkbox:checked + label svg #grp1 {
    opacity: 1;
    transition: .1s all .3s;
}
#checkbox:checked + label svg #grp1 #oval1 {
    transform: scale(0) translate(0, -30px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s;
}
#checkbox:checked + label svg #grp1 #oval2 {
    transform: scale(0) translate(10px, -50px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s;
}
#checkbox:checked + label svg #grp2 {
    opacity: 1;
    transition: .1s all .3s;
}
#checkbox:checked + label svg #grp2 #oval1 {
    transform: scale(0) translate(30px, -15px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s;
}
#checkbox:checked + label svg #grp2 #oval2 {
    transform: scale(0) translate(60px, -15px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s;
}
#checkbox:checked + label svg #grp3 {
    opacity: 1;
    transition: .1s all .3s;
}
#checkbox:checked + label svg #grp3 #oval1 {
    transform: scale(0) translate(30px, 0px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s;
}
#checkbox:checked + label svg #grp3 #oval2 {
    transform: scale(0) translate(60px, 10px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s;
}
#checkbox:checked + label svg #grp4 {
    opacity: 1;
    transition: .1s all .3s;
}
#checkbox:checked + label svg #grp4 #oval1 {
    transform: scale(0) translate(30px, 15px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s;
}
#checkbox:checked + label svg #grp4 #oval2 {
    transform: scale(0) translate(40px, 50px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s;
}
#checkbox:checked + label svg #grp5 {
    opacity: 1;
    transition: .1s all .3s;
}
#checkbox:checked + label svg #grp5 #oval1 {
    transform: scale(0) translate(-10px, 20px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s;
}
#checkbox:checked + label svg #grp5 #oval2 {
    transform: scale(0) translate(-60px, 30px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s;
}
#checkbox:checked + label svg #grp6 {
    opacity: 1;
    transition: .1s all .3s;
}
#checkbox:checked + label svg #grp6 #oval1 {
    transform: scale(0) translate(-30px, 0px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s;
}
#checkbox:checked + label svg #grp6 #oval2 {
    transform: scale(0) translate(-60px, -5px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s;
}
#checkbox:checked + label svg #grp7 {
    opacity: 1;
    transition: .1s all .3s;
}
#checkbox:checked + label svg #grp7 #oval1 {
    transform: scale(0) translate(-30px, -15px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s;
}
#checkbox:checked + label svg #grp7 #oval2 {
    transform: scale(0) translate(-55px, -30px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s;
}
#checkbox:checked + label svg #grp2 {
    opacity: 1;
    transition: .1s opacity .3s;
}
#checkbox:checked + label svg #grp3 {
    opacity: 1;
    transition: .1s opacity .3s;
}
#checkbox:checked + label svg #grp4 {
    opacity: 1;
    transition: .1s opacity .3s;
}
#checkbox:checked + label svg #grp5 {
    opacity: 1;
    transition: .1s opacity .3s;
}
#checkbox:checked + label svg #grp6 {
    opacity: 1;
    transition: .1s opacity .3s;
}
#checkbox:checked + label svg #grp7 {
    opacity: 1;
    transition: .1s opacity .3s;
}
@keyframes movement {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1000px 0;
    }
}
@keyframes animateCircle {
    40% {
        transform: scale(10);
        opacity: 1;
        fill: #DD4688;
    }
    55% {
        transform: scale(11);
        opacity: 1;
        fill: #D46ABF;
    }
    65% {
        transform: scale(12);
        opacity: 1;
        fill: #CC8EF5;
    }
    75% {
        transform: scale(13);
        opacity: 1;
        fill: transparent;
        stroke: #CC8EF5;
        stroke-width: .5;
    }
    85% {
        transform: scale(17);
        opacity: 1;
        fill: transparent;
        stroke: #CC8EF5;
        stroke-width: .2;
    }
    95% {
        transform: scale(18);
        opacity: 1;
        fill: transparent;
        stroke: #CC8EF5;
        stroke-width: .1;
    }
    100% {
        transform: scale(19);
        opacity: 1;
        fill: transparent;
        stroke: #CC8EF5;
        stroke-width: 0;
    }
}
@keyframes animateHeart {
    0% {
        transform: scale(0.2);
    }
    40% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes animateHeartOut {
    0% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1);
    }
}
.logoTop{
    padding: 10px;
    box-sizing: border-box;
    background-color: #EEEEEE;
}
.rowLogo  span:nth-child(1) {
    display: inline-block;
    width: 100px;
    font-size: 14px;
    padding-top: 50px;
}
.rowLogo  span:nth-child(2) {
    display: inline-block;
    width: 30px;
    font-size:50px;
    padding-top: 30px !important;
    box-sizing: border-box;
    text-align: center;
}
.rowLogo  span:nth-child(3) {
    display: inline-block;
    width: 30px;
    font-size: 50px;
    margin-left: 30px;
    padding-top: 30px !important;
    box-sizing: border-box;
    text-align: center;
}
.rowLogo span:nth-child(3) i{
    color: deeppink !important;
}
.imgLogo{
    width: 100px;
    height: 100px;
    float: right;
}
#cssmenu > ul > li.telegram{
    float: left !important;
    width: 150px !important;
    font-size: 30px !important;
}
#cssmenu > ul > li.telegram:hover a{
    border: none !important;
}
#cssmenu > ul > li.telegram a span:nth-child(1){
    font-size: 17px !important;
}
#cssmenu > ul > li.telegram a span:nth-child(2){
    font-size: 17px !important;
}

#duration{
    padding: 50px !important;
    box-sizing: border-box ;
    direction: rtl !important;
}
.mt-5{
    margin-top: 50px !important;
}
.txt{
    font-size: 20px !important;
    text-decoration: none !important;
}
.bg-gray{
    background-color: lightgray !important;
}
.p5{
    padding: 30px !important;
    box-sizing: border-box !important;
    line-height: 30px;
    text-align: justify;
    direction: rtl !important;
}
.imgModal{
    width:50% !important;
    height: 50vh !important;
    margin: 0 auto;
    margin-bottom: 10px;
}

.parentAparat{
    width: 105px;
    box-sizing: border-box;
    float: left;
    background-color: #2196F3 !important;
    margin-left: 10px;
    border-radius: 3px !important;
    text-align: center;
    margin-top: 5px;
}
.parentAparat .aparat{
    display: block;
    width: inherit;
    color: whitesmoke !important;
    text-align: center;
    height: 30px;
    line-height: 30px;
    text-decoration: none !important;
}
.parentAparat .youtobe{
    display: block;
    width: inherit;
    color: whitesmoke !important;
    text-align: center;
    height: 30px;
    line-height: 30px;
    text-decoration: none !important;
    background-color: hotpink;
    border-radius: 3px;
}
.prj1{
    color: #00aced;
    margin-bottom: 30px;
}
.prj2{
    color: darkolivegreen;
    margin-bottom: 30px;
}
.imgPrj{
    margin: 20px auto;

}
.pPrj{
    direction: rtl !important;
    line-height: 30px;
    font-size: 15px;
    text-align: justify;
}
.hPrj{
    direction: rtl;
    color: darkslategray;
    margin-bottom: 20px;
    margin-top: 50px !important;
}
.adetails{
    margin-top: -35px !important;
}
#wowslider-container1 .ws_pause {
display: none !important;
}

@media(max-width:990px){
    #logo-icon-footer img{
        width: 200px !important;
        height: 200px !important;
        margin: 0 auto ;
    }
    .imgLogo{
        margin: 0 auto;
        float: none !important;
    }
    .d-none-web{
        display: none !important;
    }

}