@media only screen and (max-width: 842px) {
  .wizard{
	padding: 0 16px;
        max-width: calc(100% - 32px);
  }
}

html {
    overflow: auto;
    background: none;
}

body.banner {
    background: #e7eaed;
}

.title {
    font-size: 18px;
    color: #303541;
    text-transform: uppercase;
    font-family: ROBOTOCONDENSED-BOLD;
    text-align: center;
    line-height: 28px;
    margin-top: 12px;
}

.socialpostmain {
    margin-top: 29px;
    background-color: #e7eaed;
}

.socialpostbtn #socialshare, .socialpostbtn #downimage {
    border-bottom: solid 2px #cf3a15;
    text-align: center;
    color: #fff;
    font-size: 14px;
    line-height: 40px;
    background-color: #ef4c23;
    display: block;
    width: 100%;
    height: 37px;
    border-radius: 3px;
    font-family: ROBOTOCONDENSED;
    cursor: default;
}

.socialpostbtn #socialshare {
    text-transform: uppercase;
}

.socialpostbtn #socialshare:hover {
    background-color: #76a641;
    border-bottom-color: #6b9938
}

.socialpostbtn #downimage {
    background: none;
    border: none;
    height: auto;
    line-height: 20px;
    font-size: 14px;
    color: #555;
    font-family: ROBOTOCONDENSED;
    color: #748a96;
    font-family: ROBOTOCONDENSED-LIGHT;
    margin: 0;
    line-height: 14px;
    top: 58px;
}

.socialpostbtn #downimage:hover {
    color: #76a641;
}

.btn1 {
    position: relative;
    display: inline;
    float: left;
    background-color: #e7eaed;
    margin-left: 15px;
    width: 108px;
    height: 34px;
    border: 2px solid #fff;
    border-radius: 3px;
    color: #748a96;
    font-size: 14px;
    line-height: 34px;
    cursor: default;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.btn1 span {
    display: inline-block;
    padding-left: 34px;
}

.schangesize::before {
    left: 12px;
    top: 9px;
    position: absolute;
    width: 16px;
    height: 16px;
    background: url(changesize.png) no-repeat;
    content: " ";
}

#back-quote span {
    padding-left: 44px;
}

#back-quote:hover {
    background-color: #fff;
}

#back-quote::before {
    left: 8px;
    top: 7px;
    position: absolute;
    width: 25px;
    height: 19px;
    background: url(icon-back.png) no-repeat;
    content: " ";
}

#shuffle span {
    padding-left: 44px;
}

#shuffle:hover {
    background-color: #fff;
}

#shuffle::before {
    left: 8px;
    top: 7px;
    position: absolute;
    width: 25px;
    height: 19px;
    background: url(shuffle-icon.png) no-repeat;
    content: " ";
}

.smenu {
    float: left;
    margin-left: 0;
    display: inline;
    width: 40px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    color: #555;
    font-size: 16px;
    background: url(menu-icon.png) no-repeat center center;
    cursor: default;
}

.smenu:hover, .schangesize:hover {
    background-color: #fff;
    border-radius: 3px;
}

.smenucont {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    z-index: 350000;
    background: #fff;
    transition: width 0.3s;
    -webkit-transition: width 0.3s;
    overflow: hidden;
}

.smenucont.active {
    width: 251px;
}

.smenucont.chgSize {
    width: 100%;
    background: none;
}

.smenucont.chgSize .submenu-title {
    opacity: .8;
}

.smenucont.chgSize .smenu-title {
    color: #fff;
}

#pagesize {
    position: relative;
}

.smenu-title {
    background: #748a96;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    cursor: default;
}

.smenuul {
}

.smenuul li, .categoryul li {
    border-top: 1px solid #f5f5f5;
    padding: 10px 12px;
    text-align: left;
    font-size: 15px;
    cursor: default;
    background-color: #cdd6db
}

.smenuul li:first-child, .categoryul li:first-child {
    border-top: none;
}

.smenuul li:hover, .categoryul li:hover, .categoryul li.active {
    background: #fafafa;
}

.smenuconttab {
    display: none;
    overflow-y: scroll;
    height: 102%;
}

.categoryul li {
    padding: 0;
    overflow: hidden;
    position: relative;
    width: 214px;
}

.categoryul li img {
    height: 53px;
    min-width: 100%;
    vertical-align: top;
}

.categoryul li span {
    position: absolute;
    top: 8px;
    left: 8px;
    display: block;
    right: 8px;
    color: #fff;
}

.categoryok {
    display: none;
    width: 60px;
    line-height: 30px;
    height: 30px;
    color: #fff;
    background: #76a641;
    text-align: center;
    font-size: 15px;
    margin: 15px auto;
    border-radius: 3px;
    cursor: default;
}

.categoryok:hover {
    background: #ef4c23;
}

.categoryul li i {
    position: absolute;
    top: 0;
    right: 0;
    width: 53px;
    height: 53px;
}

.categoryul li i::before {
    content: " ";
    background: #748a96 url(v2.png) no-repeat center center;
    position: absolute;
    top: 50%;
    right: 14px;
    width: 15px;
    height: 15px;
    display: block;
    margin-top: -8px;
    border-radius: 3px;
}

.categoryul li i.active::before {
    background-color: #76a441;
}

#submenu-title {
    display: none;
    position: relative;
}

#submenu-title i, .smenu-title i {
    width: 40px;
    height: 40px;
}

.ic-back {
    background: url(back-social.png) no-repeat center center;
    position: absolute;
    top: 0;
    left: 0;
}

.ic-close {
    background: url(close-social.png) no-repeat center center;
    position: absolute;
    top: 0;
    right: 0;
}

#submenu-title i:hover, .smenu-title i:hover {
    background-color: #8598a3;
}

.ulistimg {
}

.ulistimg li {
    text-align: center;
    padding: 6px 0;
    position: relative;
}

.ulistimg li img {
    width: 214px;
    height: 108px;
}

.ulistimg li.active img {
    border: solid 3px #76a641;
    border-radius: 3px;
}

.ulistimg li.active i {
    position: absolute;
    top: 0;
    right: 7px;
    width: 53px;
    height: 53px;
}

.ulistimg li.active i::before {
    content: " ";
    background: #76a441 url(v2.png) no-repeat center center;
    position: absolute;
    top: 50%;
    right: 14px;
    width: 15px;
    height: 15px;
    display: block;
    margin-top: -8px;
    border-radius: 3px;
}

.smenucontbox {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    padding-bottom: 45px;
    display: none;
}

#background {
    overflow: hidden;
}

#background .listitem2 {
    margin-left: 15px;
    height: auto;
    width: auto;
    padding-top: 2px;
}

#background li {
    overflow: auto;
}

#background #bgcolor2 li .bgcolordiv.active {
    box-shadow: 0 0 5px #76a641;
}

#changesize, #area-share-menu {
    overflow: hidden;
    color: #748a97;
    background-color: rgba(0,16,33, 0.7);
}


#changesize ul {
    text-align: center;
    width: 200px;
    height: 150px;
    margin: 0 auto;
    margin-top: 15%;
}
#changesize ul li {
    height: 109px;
    text-align: center;
    margin-left: 5px;
    margin-bottom: 5px;
    display: block;
    cursor: default;
    float: left;

    background-color: #fff
}

#changesize ul li.tall {
    width: 72px;
}

#changesize ul li.square {
    width: 113px;
}

#changesize ul li.wide {
    width: 191px;
}

#changesize ul li.active {
    color: #fff;
    background-color: #748a97
}


#changesize ul li h3 {
    margin-top: 50px;
}

#changesize ul li p {
    font-size: 13px;
    margin-top: 3px;
}

.smenucontshow {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 290000;
}

.socialpost .copyitem {
    display: none;
}

.socialpost #itemclose, .socialpost #itemrotate, .socialpost #a4, .socialpost #layer3, .socialpost .upn {
    display: none !important;
}

.socialpost #menu1 {
    width: 328px;
}

.socialpost #morespacefont {
    left: -284px;
}

.socialpost #pageedit .eles.image {
    cursor: default;
}

.socialpost #ac12 {
    overflow: hidden;
}

.socialpost #maligndetail, #maligndetailimage {
    width: 330px;
}

.socialpost #fontresize::before {
    width: 80px;
    position: absolute;
    left: 0;
    top: 6px;
    background: #f1f2f2;
    border-radius: 5px;
    height: 3px;
    content: " ";
}

.socialpost #fontresize {
    top: 3px;
    height: 17px;
    background: none;
    border-radius: none;
}

.socialpost #fontresizecontr {
    top: 1px;
}

.socialpost .fontsize3a {
    background: url(../arrow4.png) no-repeat;
}

.socialpost .area-upload {
    text-align: center;
    padding: 12px 0 6px;
    position: relative;
    height: 45px;
}

.socialpost .area-upload .userup2::before {
    background: url(user-up.png) no-repeat 0 0;
    width: 19px;
    height: 15px;
    left: 11px;
    top: 9px;
}

.socialpost .area-upload .userup2 {
    background-color: #ef4c23;
    bottom: 6px;
    line-height: 36px;
    margin: 0 auto;;
    width: 118px;
    height: 37px;
    border-radius: 3px;
    cursor: default;
    border-bottom: solid 2px #cf3a15;
}

.socialpost .area-upload .userup2 span {
    font-family: ROBOTOCONDENSED;
    text-indent: 0;
    font-size: 14px;
    line-height: 38px;
    color: #fff;
}

.socialpost .smenuul .changesize {
    display: none;
}

.banner #bgcolorleftiddiv {
    left: 0;
    position: absolute;
    top: -215px;
    z-index: 2500000;
}

.socialpost .XS .cp-resize {
    display: none;
}

.portalimg {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -51px;
}

.userupform1 {
    display: none
}

.footer {
    margin-top: 15px;
    height: 130px;
}

#menuitembgacont #bgcolor2 li {
    width: 21px;
    height: 21px;
    margin-right: 12px;
    margin-top: 12px;
}

#menuitembgacont #bgcolor2 li .bgcolordiv {
    width: 21px;
    height: 21px;
    border-radius: 3px;
}

.categoryul {
    padding: 7px 0 0 11px;
}

.categoryul li {
    border: none;
    margin-top: 5px;
    background-color: #cdd6db
}

#over1 {
    z-index: 265000;
}

#morespacefontbg {
    height: 160px;
}

#morespacefont {
    transform: scale(0.9)
}

#myCanvas {
    width: 100%;
    height: 100%
}

.socialpostbtn #downimage {
    margin-top: 10px;
}



.socialpostbtn, .uplevoDesign {
    margin: 0 auto;
}
.socialpostbtn {
    position: relative;
    margin-top: 10px;
    height: 80px;
}
#changesize .size-small-5{
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    margin-top: -14px;
}
.small-5 .btn1 {
    width: 40px;
    overflow: hidden;
    margin-bottom: 10px;
}

.small-5 .btn1 span {
    display: none;
}

.small-5 #area-button {
    width: 60px;
    margin-right: 2%;
}

#pageedit {
    overflow: hidden;
}

#textquotes:hover {
    border: 1px dashed #555;
    margin: -1px 0 0 -1px;
}

#textquotes img:hover {
    border: 1px dashed #fff;
    margin: -1px 0 0 -1px;
}

#textquotes span:hover {
    border: 1px dashed #fff;
    margin: -1px 0 0 -1px;
}
.event1{display: none}
#container-render{display:none}
li.choonse-type-post li{
    padding: 3px 0px;
    border-top: none;
}
li.choonse-type-post ,li.choonse-type-post:hover, li.choonse-type-post li, li.choonse-type-post li:hover{
    background-color: #fff;
}
#chofontfamily3{height:182px;width:250px}

#area-button{
    float: right;
    margin-right: 15%;
    width: 119px;
    height: 100px;
}


ul.share-social{
    display: none;
    list-style: none;
    position: relative;
    bottom: 196px;
    width: 150px;
    margin:-80px -2px 0 -25.5px;
    z-index: 400000;
    background-color: #fff;
    text-align: center;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
    border: 5px solid #fff;
    border-radius: 4px;
}
ul.share-social li{
    margin-top: 10px;
}
ul.share-social li:last-child{
    margin-bottom: 5px;
}
.share-social a {
    display: inline-block;
    width: 109px;
    transition: transform .3s;
    -webkit-transition: transform .3s;
    margin-left: 4px;
}
.share-social a img {
    width: 100%;
}

@keyframes loader {
    0% {
        width: 0;
    }

    20% {
        width: 10%;
    }

    25% {
        width: 24%;
    }

    43% {
        width: 41%;
    }

    56% {
        width: 50%;
    }

    66% {
        width: 52%;
    }

    71% {
        width: 60%;
    }

    75% {
        width: 76%;

    }

    94% {
        width: 86%;
    }

    100% {
        width: 100%;
    }

}

.progress-bar {
    border-radius: 60px;
    overflow: hidden;
    width: 100%;
}
.progress-bar span {
    display: block;
}

.bar {
    background: 5px;
}

.progress {
    animation: loader 8s ease infinite;
    background: #75b800;
    color: #fff;
    padding: 5px;
    width: 0;
}

.progress-bar {
    top: 40%;
    left: 50%;
    max-width: 50%;
    position: absolute;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
}
.exporting{
    display: none;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
    background-color: #76a641;
    text-align: center;
    font-size: 20px;
    padding: 10px  20px;
    border-radius: 5px;
}
.exporting a{ color : #fff}
@media screen and (max-width: 780px) {
    .head {
        padding-left: 8px;
    }

    .user {
        right: 8px;
    }

    .user-menu {
        left: -144px;
    }

    .usermenu-list::before {
        right: 27px;
    }

    .btn1 {
        width: 40px;
        overflow: hidden;
    }

    .btn1 span {
        display: none;
    }

    .head .logo {
        height: 60px;
        overflow: hidden;
    }

    .logo img {
        height: 40px;
        margin-top: 10px;
    }

    .portalimg {
        height: 40px;
        top: 10px;
    }

    .user-avatar img {
        width: 22px;
        height: 22px;
    }

    .user-avatar {
        left: 21px;
        top: 21px;
    }

    .user-alert {
        width: 12px;
        height: 12px;
        left: -3px;
        top: -3px;
        font-family: arial;
        font-size: 10px;
        line-height: 11px;
    }
    .user-click {
        background-position: right 32px;
    }

    #area-button { width: 60px; margin-right: 15px;}
    ul.share-social { margin: -100px -19px 0 -86px;}
}
@media screen and (max-width: 320px) {
    .btn1 {
        margin-left: 5px;
    }
}
.sp {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sp-arrow4 {
    width: 23px;
    height: 24px;
    background-position: -5px -5px;
}

.sp-arrow5 {
    width: 23px;
    height: 29px;
    background-position: -38px -5px;
}

.sp-arrow55 {
    width: 23px;
    height: 29px;
    background-position: -71px -5px;
}

.sp-arrow7 {
    width: 20px;
    height: 20px;
    background-position: -104px -5px;
}

.sp-back-social {
    width: 17px;
    height: 11px;
    background-position: -134px -5px;
}

.sp-btShareFb {
    width: 143px;
    height: 45px;
    background-position: -161px -5px;
}

.sp-btShareG {
    width: 143px;
    height: 45px;
    background-position: -314px -5px;
}

.sp-btShareLk {
    width: 143px;
    height: 45px;
    background-position: -467px -5px;
}

.sp-btShareP {
    width: 143px;
    height: 45px;
    background-position: -5px -60px;
}

.sp-btShareTw {
    width: 143px;
    height: 45px;
    background-position: -158px -60px;
}

.sp-changesize {
    width: 16px;
    height: 16px;
    background-position: -311px -60px;
}

.sp-close-social {
    width: 16px;
    height: 2px;
    background-position: -337px -60px;
}

.sp-download-fallback {
    width: 614px;
    height: 392px;
    background-position: -5px -115px;
}

.sp-icon-back {
    width: 16px;
    height: 16px;
    background-position: -363px -60px;
}

.sp-logo {
    width: 270px;
    height: 120px;
    background-position: -629px -5px;
}

.sp-m-align {
    width: 23px;
    height: 18px;
    background-position: -629px -135px;
}

.sp-m-align1 {
    width: 23px;
    height: 22px;
    background-position: -662px -135px;
}

.sp-m-align2 {
    width: 23px;
    height: 22px;
    background-position: -695px -135px;
}

.sp-m-align3 {
    width: 23px;
    height: 22px;
    background-position: -728px -135px;
}

.sp-m-align4 {
    width: 23px;
    height: 22px;
    background-position: -761px -135px;
}

.sp-menu-icon {
    width: 16px;
    height: 16px;
    background-position: -794px -135px;
}

.sp-resize {
    width: 40px;
    height: 19px;
    background-position: -820px -135px;
}

.sp-shuffle-icon {
    width: 25px;
    height: 19px;
    background-position: -870px -135px;
}

.sp-somepost {
    width: 103px;
    height: 60px;
    background-position: -794px -164px;
}

.sp-tt {
    width: 120px;
    height: 10px;
    background-position: -629px -234px;
}

.sp-user {
    width: 32px;
    height: 33px;
    background-position: -759px -234px;
}

.sp-user-up {
    width: 19px;
    height: 15px;
    background-position: -629px -164px;
}

.sp-v2 {
    width: 7px;
    height: 6px;
    background-position: -801px -234px;
}

.sp-v2-1 {
    width: 39px;
    height: 30px;
    background-position: -818px -234px;
}