body{background: #ffffff; font-family: 'Open Sans',sans-serif; color: #878787;padding-top: 130px;font-size: 13px;}
.navbar{background: #1A242D;border-radius: 0; margin:0;border: 0;height: 70px;}
.navbar-nav > li > a, .nav > li > a:hover, .nav > li > a:focus{color: #fff;font-family: 'Varela Round',sans-serif;background: none;}
.navbar-nav > li > a, .navbar-brand{line-height: 40px; color: #fff;}
.navbar-brand{height: 70px;background: #37BFBD;}
.navbar-nav .sep {
    color: #fff;
    line-height: 65px;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus{
    background: #19303F;
}

button, input, optgroup, select, textarea{border:1px solid #ddd;padding: 8px;}
h1,h2,h3,h4,h5,h6{font-family: 'Varela Round',sans-serif; font-weight: bold; color: #33485F;}
#header{position: fixed;width: 100%;top:0;left: 0;z-index: 1000;}
.full-height{height: 100%;}
.overflow-hidden{overflow: hidden;}
.text-middle, .table > tbody > tr > td.text-middle {
    vertical-align: middle;
}
h2 {
    color: #0F151A;
    font-size: 1.8em;
    margin-top: 10px;
    text-shadow: 1px 1px #FFFFFF;
}
h3 {
    color:#2C2C2C;
    text-shadow: 1px 1px #fff;
    font-size: 2em;
}

h4{font-family: 'Open Sans',sans-serif;font-weight: 500; font-size: 1.7em;line-height: 1.5em;}

.font-hand{font-family: "Shadows Into Light"}

h5{font-size: 1.4em;}

.tagline {font-family: 'Open Sans',sans-serif; color: #33485F;}

.btn,.form-control{border-radius: 0;box-shadow:none;}
.form-control:focus{box-shadow: none;}

.btn-aqua {
    background: #37BFBD;
    color: #fff;
}

.btn-round {
    border-radius: 5px;
}

.social-signin {
    background: rgba(255,255,255,0.9);
    display: inline-block;
    font-size: 50px;
    padding: 0px 20px;
    color: rgba(255,255,255,0.9);
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
}

.social-signin, .social-signin i:before{
    cursor: pointer;
}

.social-signin:hover,.social-signin:focus {
    color: rgba(255,255,255,1);
    text-decoration: none;
    background: rgba(255,255,255,0.6);
}

.social-signin.signin-fb {
    color: rgba(73, 98, 149, 0.9);
}

.social-signin.signin-tw {
    color: rgba(32, 159, 211, 0.9);
}

.social-signin.signin-gp {
    color: rgba(200, 60, 38, 0.9);
}

.social-signin.signin-fb:hover {
    color: rgba(73, 98, 149, 0.6);
}

.social-signin.signin-tw:hover {
    color: rgba(32, 159, 211, 0.6);
}

.social-signin.signin-gp:hover {
    color: rgba(200, 60, 38, 0.6);
}

#profile-header .profile-pic{
    margin-right: 8px;
    margin-top: -8px;
    width: 62px;
    height: 62px;
}

#profile-header h1 {
    float: left;
    font-family: 'Oleo Script';
    font-size: 30px;
    margin-top: -9px;
    text-shadow: 1px 1px #FFFFFF;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}
.bg-F5F5F5 {
    background: #F5F5F5;
}


.follow-user-avatar{
    width: 32px;
    height: 32px;
    float: left;
    margin-left: 3px;
    background: #ddd;
    border: 1px solid #aaa;
    overflow: hidden;
    display: block;
    line-height: 28px;
}

.follow-user-avatar img{
    max-width: 100%;
}

.modal.fullscreen, .modal.fullscreen .modal-dialog, .modal.fullscreen .modal-content {
    height: 100%;
    width: 100%;
}

.mobile-wrap {
    position: relative;
    overflow: hidden;
}

.mobile-wrap a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
}

.mobile-placeholder {
    display: inline-block;
    position: relative;
    z-index: 0;
}

.mobile-placeholder > img:nth-child(1){
    width: 100%;
}

.mobile-wrap:hover .mobile-placeholder {
    background: url(../img/mobile-hover.png) no-repeat;
    background-size: contain;
}

.mobile-wrap .overlay {
    background: rgba(0, 0, 0, 0.8);
    bottom: 0;
    height: 0px;
    left: 0;
    position: absolute;
    width: 100%;
    transition: 0.2s;
    padding: 0px;
    color: #fff;
    font-family: 'Poiret One';
    z-index: 100;
}

.mobile-wrap:hover .overlay {
    height: auto;
    padding: 10px;
}

.mobile-screen-preview{
    background: #FFFFFF;
    left: 14%;
    position: absolute;
    top: 18.4%;
    width: 72%;
}

.shapes-list a {
    border-radius: 5px;
    /*box-shadow: 0 0 12px -4px rgba(0, 0, 0, 0.5) inset;*/
    display: inline-block;
    margin-bottom: 5px;
    margin-left: 11px;
    padding: 8px;
}

.shapes-list a.active {
    box-shadow: 0 0 0 2px #2CBFBE;
    background: #F4F5FA;
}

.shapes-list a:not(.active):hover {
    background: rgba(255, 230, 154, 0.3);
}

.shapes-list a.body-shape:nth-child(6n) {
    margin-right: 0;
}

.shapes-list a.eyeball:nth-child(4n), .shapes-list a.eyeframe:nth-child(4n) {
    margin-right: 0;
}

.color-wrap{
    width:70%;
    margin:0 auto;
}
.color-wrap > div, .color-wrap img, .color-wrap input{
    width: 60px;
    font-size: 10px;
    margin-bottom: 10px;
}

.color-wrap > div{
    margin-left: 30%;
    /*margin-bottom: 10%;*/
}

.color-wrap > div:first-child{
    margin-left: 0;
}

.rftools {
    display: inline-block;
    width: 15%;
    text-align: center;
}

.rftools > img{
    display: block;
    margin: 0 auto 8px;
    width: 55px;
}

.rftools a img {
    width: 25px;
}

#tabs-col {
    height: 100%;
    padding-top: 20px;
    cursor: pointer;
}

#tabs-btn:after {
    position: absolute;
    top: 0;
    left: 0;
    background: #1A242D;
    width: 100%;
    display: block;
    content: '';
    height: 1000px;
    z-index: -1;
}

#tabs-btn {
    padding: 0;
    list-style: none;
}
#qr-customizer {
    overflow: hidden;
}

#tabs-btn li {
    padding: 8px;
    text-align: center;
    color: #888;
    border-radius: 8px;
}
#tabs-btn li.active {
    background: #1C242B;
    /*border: 1px solid #D1D1E6;*/
    /*outline: 1px solid #fff;*/
    /*font-weight: bold;*/
    /*font-size: 1.2em;*/
    color: #fff;
    /*border-radius: 8px 0 0 8px;*/
}
#tabs-right{
    /*    border: 1px solid #D1D1E6;*/
    border-left: none;
    padding: 20px;
    height: 100%;
    overflow-y: scroll;
}

#tabs-right h2{
    margin-bottom: 20px;
}

#qr-preview-col{
    padding-top: 20px;
}

#qr-preview-col:after{
    background: #ECEDEF;
    content: '';
    display: block;
    width: 100%;
    top: -20px;
    left: 0;
    height: 1000px;
    position: absolute;
    z-index: -1;
}

#qr-type-preview{
    position: relative;
    width: 250px;
    height: 449px;
    margin: 0 auto;
}

#mobile-screen {
    height: 318px;
    left: 41px;
    overflow-y: auto;
    position: absolute;
    top: 98px;
    width: 204px;
}

#sample-qrs img {
    padding: 0 0 30px 30px;
}

.red{color: #E2503D;}
.green{color: #00BD9C;}
.mb50{margin-bottom: 50px;}
.mb10{margin-bottom: 10px;}
.mb5{margin-bottom: 5px;}
.mt50{margin-top: 50px;}
.pb50{padding-bottom: 50px;}
.pb10{padding-bottom: 10px;}
.pb5{padding-bottom: 5px;}
.pt50{padding-top: 50px;}

.navbar-toggle .fa-bars {
    color: #fff;
    font-size: 30px;
}

.navbar-collapse.collapse.in {
    background: rgba(0,0,0,0.7);
}
.navbar-collapse.collapse.in .sep{
    display: none;
}

.navbar-collapse.collapse.in .navbar-nav > li > a,.navbar-collapse.collapse.in .dropdown-menu > li > a{
    padding-top: 0;
    padding-bottom: 0;
    line-height: 20px;
    color: #fff;
}

/*index*/

#dotted-line {
    background: url(../img/dashed-line.png) center repeat-x;
    min-height: 121px;
}

#dotted-line .row > div img{
    width: 200px;
}

/*.jcrop-holder,jcrop-tracker {max-width: 100%;}*/
.jcrop-holder {
    margin: 0 auto;
    border: 1px solid #000;
}
.jcrop-holder img{
    background: #F5F5F5 !important;
}

#qr-code {
   max-width: 100%;
   position: absolute;
   z-index: 990;
}

.icon-cross:after {
    background: url("../img/icon-cross.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    content: "";
    display: block;
    height: 14px;
    position: absolute;
    width: 14px;
    top:0;
}

.icon-cross {
    position: relative;
}

/*.jcrop-holder > img{
    max-width: 100% !important;
    height: auto !important;
}*/

#loading-indicator{
    background: #454545;
    padding: 5px;
    text-align: center;
    color: #ffffff;
}


@media (min-width: 768px) and (max-width:992px) {
    #dotted-line .row > div img{
        width: auto;
    }
}
@media (max-width:767px) {
    #dotted-line {
        background: none;
    }

    #dotted-line .row > div {
        text-align: center;
        margin-bottom: 10px;
    }
    
    .qr-customize-page, #qr-customizer, #tabs-right {
        overflow: auto;
    }
    
    #tabs-btn:after,#qr-preview-col:after,#tabs-col{
        height: auto;
    }
}