/* Custom Fonts
@import url("http://fonts.googleapis.com/css?family=Montserrat");
@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600");
@import url("https://fonts.googleapis.com/css?family=Pacifico");
@import url("https://fonts.googleapis.com/css?family=Montez");*/
@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600");
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../font/SourceSansPro-Light.eot');
    src: url('../font/SourceSansPro-Light.eot?#iefix') format('embedded-opentype'),
        url('../font/SourceSansPro-Light.woff') format('woff'),
        url('../font/SourceSansPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Pacifico';
    src: url('../font/Pacifico-Regular.eot');
    src: url('../font/Pacifico-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/Pacifico-Regular.woff') format('woff'),
        url('../font/Pacifico-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Regular.eot');
    src: url('../font/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/Montserrat-Regular.woff') format('woff'),
        url('../font/Montserrat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../font/SourceSansPro-Regular.eot');
    src: url('../font/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/SourceSansPro-Regular.woff') format('woff'),
        url('../font/SourceSansPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../font/SourceSansPro-Bold.eot');
    src: url('../font/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('../font/SourceSansPro-Bold.woff') format('woff'),
        url('../font/SourceSansPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Montez';
    src: url('../font/Montez-Regular.eot');
    src: url('../font/Montez-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/Montez-Regular.woff') format('woff'),
        url('../font/Montez-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/*Animation classes*/
.anim{
    -webkit-transition: all 250ms ease-in;
    -moz-transition: all 250ms ease-in;
    -ms-transition: all 250ms ease-in;
    -o-transition: all 250ms ease-in;
    transition: all 250ms ease-in;

}
.anim-slow{
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
}
.anim-fast{
    -webkit-transition: all 150ms;
    -moz-transition: all 150ms;
    -ms-transition: all 150ms;
    -o-transition: all 150ms;
    transition: all 150ms;
}
.anim-xfast{
    -webkit-transition: all 50ms ease-in;
    -moz-transition: all 50ms ease-in;
    -ms-transition: all 50ms ease-in;
    -o-transition: all 50ms ease-in;
    transition: all 50ms ease-in;
}
/* /Animation Classes */
button:focus, button:active{outline:none;}
.mrgn-top{
    margin-top:20px;
}
.no-smrgn{
    margin-left:0;
    margin-right:0;
}
.mrgn-md{
    margin-top:10px;
    margin-bottom:10px;
}
.full-screen-preview {
    height:100%;
    padding:0;
    margin:0;
    overflow:hidden;
}

.iframe {
    width:100%;
    background-color:#eaeaea;
    overflow-x:hidden;
}
.not-link,
.not-link:hover, 
.not-link:active{
    text-decoration:none;
}
.banner_header {
    font-size:12px;
    min-height:54px !important;
    height:auto;
    z-index:100;
    margin-bottom:1px;
    width:100%;
    padding:2px;
    overflow:hidden;
}
.bannerbottom{
    position:fixed;
    bottom:0px;
    margin:0;
}
.logo{
    position:relative;
    top:0px;
}
.logo-img{
    position:fixed;
    height:50px;
    width:auto;
}
.action-buttons{
    position:fixed;
    right:0px;
}
.bannerbottom.logo-img, 
.bannerbottom.action-buttons{
    bottom:5px;
}
.bannertop.logo-img,
.bannertop.action-buttons{
    top:0px;
}

.close{
    position:absolute;
    right:10%;
    top:35%;
    font-size:13px;
    color:rgba(0,0,0,0.7) !important;
    height:20px;
    width:20px;
    border-radius:100%;

}
.close:hover{
    color:rgba(0,0,0,1);
}
.close:active{
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    outline:none;
}
.btn-option{
    position:relative;
    left:0;
    text-align:center;
    background-color:rgba(255,255,255,0.2);
    color:#fff;
    font-family:"Source Sans Pro";
    font-weight:300;
    font-size:15px;
    min-width:70px;
    width:auto;
    max-width:85%;    
    height:35px;
}
.btn-option:hover, .btn-option:focus{
    background-color:rgba(255,255,255,0.3);
    color:#fff;
    outline:none;
}
.btn-option:active{
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    outline:none;

}
.pink{
    background-color:#f71b7a !important;
}
.tag-pink{
    background-color:#f71b7a;
    -webkit-box-shadow: 0px 0px 0px 5px rgba(250,142,189,1);
    -moz-box-shadow: 0px 0px 0px 5px rgba(250,142,189,1);
    box-shadow: 0px 0px 0px 5px rgba(250,142,189,1);
    color:#fbfbfb;
}
.red{
    background-color:#e53939 !important;
}
.tag-red{
    background-color:#e53939 !important;
    -webkit-box-shadow: 0px 0px 0px 5px rgba(255,161,161,1);
-moz-box-shadow: 0px 0px 0px 5px rgba(255,161,161,1);
box-shadow: 0px 0px 0px 5px rgba(255,161,161,1);
    color:#fbfbfb;
}
.yellow{
    background-color:#f9d81b !important;
}
.tag-yellow{
    background-color:#f9d81b !important;
    -webkit-box-shadow: 0px 0px 0px 5px rgba(255,234,112,1);
    -moz-box-shadow: 0px 0px 0px 5px rgba(255,234,112,1);
    box-shadow: 0px 0px 0px 5px rgba(255,234,112,1);
    color:#222;
}
.tag-yellow button, .tag-yellow button:hover, .tag-yellow button:focus{color:#222;}
.green{
    background-color:#55cc6b !important;
}
.tag-green{
    background-color:#55cc6b !important;
    -webkit-box-shadow: 0px 0px 0px 5px rgba(123,232,143,1);
    -moz-box-shadow: 0px 0px 0px 5px rgba(123,232,143,1);
    box-shadow: 0px 0px 0px 5px rgba(123,232,143,1);
    color:#fbfbfb;
}
.blue{
    background-color:#3540b7 !important;
}
.tag-blue{
    background-color:#3540b7 !important;
    -webkit-box-shadow: 0px 0px 0px 5px rgba(118,131,222,1);
    -moz-box-shadow: 0px 0px 0px 5px rgba(118,131,222,1);
    box-shadow: 0px 0px 0px 5px rgba(118,131,222,1);
    color:#fbfbfb;
}
.purple{
    background-color:#983ab2 !important;
}
.tag-purple{
    background-color:#983ab2 !important;
    -webkit-box-shadow: 0px 0px 0px 5px rgba(209,150,227,1);
    -moz-box-shadow: 0px 0px 0px 5px rgba(209,150,227,1);
    box-shadow: 0px 0px 0px 5px rgba(209,150,227,1);
    color:#fbfbfb;
}
.desc{
    color:#fff;
    font-family:"Source Sans Pro";
    top:17px;
    margin-bottom:20px;
    display:block;
    font-size:18px;
    word-wrap:break-word;
}
.xs-desc{
    color:#fff;
    font-family:"Montserrat";
    top:8px;
    margin-bottom:20px;
    display:inline-block;
    word-wrap:break-word;
    min-font-size:11px;
    max-font-size:16px;
}
.xs-btn-option, .xs-btn-option:focus{
    position:relative;
    left:-20px;
    top:10px;
    color:#222;
    height:30px;
    width:30px;
    font-size:15px;
    border-radius:100%;
    border:1px solid rgba(255,255,255,0.2);
    text-align:center;
    vertical-align:middle;
    background-color:#fff;
    padding:0;
}
.xs-btn-option:hover{
    background-color:rgba(255, 255, 255, 0.7);
}
.xs-btn-option:active{
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
}
.tag{
    position:fixed;
    display:block;
    height:auto;
    width:275px;
    bottom:30px;
    left:30px;
    z-index:150;
    padding:5px;
    border-radius:5px;
    
}
.tag-desc{
    margin-left:10px;
    font-family:"Source Sans Pro";
    font-weight:400;
    word-wrap:break-word;
}
.tag-left-content{
    width:90%;
}
.tag-logo{
    position:relative;
    left:10px;
    height:50px;
    width:auto;
}
.tag-btn-option{
    position:relative;
    left:10px;
    margin:0;
}
.tag-close{
    position:absolute;
    top:10px;
    right:5px;
}
.live .btn-option,
.live .tag-btn-option, 
.live .xs-btn-option{
    display:none;
}
/* INDEX STYLING */
.home-bg {
    background: #f7f7f7;
}
.container{
    padding-bottom:30px;
    padding-top: 30px;
}
.title-logo{
    position:relative;
    top:40px;
    width:100%;
    max-width:270px;
    color:#353535;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}
.title-logo.small{
    top:10px;
    height:75px;
    width:auto;
    
}
.title:hover{
    color:#353535;
    text-decoration:none;
}
.input:first-of-type{
    margin-top:60px;
}
.input-field{
    height:40px;
    border-radius:10px;
    border-color:#fff;
    box-shadow:none;
    padding:10px;
    font-family:"Source Sans Pro";
}
.input-field:active, 
.input-field:focus{
    border-color:#fff;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
}
.input-label{
    font-family:"Montserrat";
    margin-bottom:5px;
    
}
.intro{
    position:relative;
    display:block;
    top:50px;
}
.intro-element{
    padding:10px;
    margin-top:20px;
}
.intro-title{
    position:relative;
    display:inline-block;
    text-align:center;
    background-color:;
    height:25px;
    width:25px;
    border-radius:100%;
    font-size:20px;
}
.intro-text{
    font-family:"Source Sans Pro";

}
.color-container{
    margin-top:20px;
}
.color-div{
    border-radius:60px;
    height:30px;
    width:30px;
    margin:3px;
    opacity:0.4;
}
.color-div:hover{
    cursor:pointer;
}
.color-div.selected-color{
    opacity:1;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.6);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.6);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.6);
}
.position-container{
    margin-top:25px;
}
.position-div{
    background-color:#fff;
    height:auto;
    display:inline-block;
    padding:10px;
    opacity:0.4;
    text-align:center;
    margin:5px;
    border-radius:15px;
}
.position-div:hover{
    opacity:0.8;
    cursor:pointer;
}
.position{
    display:inline;
    font-family:"Montserrat";
    font-size:20px;
    text-transform:uppercase;
    text-align:center;

}
.position-div:first-of-type{
    border-bottom-left-radius:15px;
    border-top-left-radius:15px;
}
.position-div:last-of-type{
    border-bottom-right-radius:15px;
    border-top-right-radius:15px;
}
.position-sub{
    font-family:"Source Sans Pro";
    font-size:15px;
    text-align:center;
    color:#888;
}
.selected-position, 
.selected-position:hover{
    opacity:1;
    border-bottom:3px solid #444;
}
@media all and (min-width: 768px){
    .tag-div{
        height:150px;
        padding-top:50px;
    }
}

.live{
    position:fixed;
    display:none;
}
.alt-icon{
    display:inline-block;
    background-color:#fff;
    border-radius:5px;
    width:30px;
    height:30px;
    padding:3px;
    text-align:center;
    font-size:18px;
    margin:4px;
}
.alt-icon:hover{
    cursor:pointer;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.4);
}    
.selected-alt-icon{
     -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
}
.create-btn,
.create-btn:focus{
    margin:auto;
    margin-top:20px;
    height:50px;
    border-radius:10px;
    background-color:#353535;
    color:#fff;
    font-family:"Pacifico";
    font-size:25px;

}
.create-btn:hover{
    color:#353535;
    background-color:#fff;
}
.create-btn:active{
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
}
.customization{
    display:none;
}
.url-field, 
.url-field[readonly],
.url-field[readonly]:focus, 
.url-field[readonly]:active,
.url-field:active, 
.url-field:focus{
    height:40px;
    border-radius:10px;
    border-color:#fff;
    box-shadow:none;
    padding:10px;
    font-family:"Source Sans Pro";
}

.more{
    display:none;
}
.stats-btn, .stats-btn:focus{
    position:relative;
    background-color:#fff;
    height:30px;
    margin-bottom:20px;
    border-radius:5px;
    color:#353535;
    font-family:"Montserrat";
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
}
.stats-btn:hover{
    background-color:#353535;
    color:#fff;

}
.stats-btn:active{
    box-shadow:none;
}

.qrcode{
    width:100%;
    max-width:290px;
    position:relative;
}
.social-btn{
    width:40px;
    height:40px;
    padding:5px;
    font-size:20px;
    border-radius:100%;
    color:#fff;
}
.social-btn:hover, .social-btn:focus{
    background-color:#fff;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
}
.social-btn:active{
    background-color:#fff;
    box-shadow:none;
}
.fb{
    background-color:#3b5998;
}
.twit{
    background-color:#00aced;
}
.pinterest{
    background-color:#cb2027;
}
.gplus{
    background-color:#dc4e41;
}
.ref-div{
    background-color:#fff;
    border-radius:10px;
    padding:10px;
    margin-top:40px;
    padding-bottom:25px;
}
.ref-title{
    font-family:"Source Sans Pro";
    font-weight:400;
    font-size:17px;
    margin-left:8px;
}
.ref-label{
    font-family:"Source Sans Pro";
    display:inline-block;
    font-weight:300;
    font-size:15px;
    color:#353535;
    background-color:#eaeaea;
    height:24px;
    max-height:24px;
    padding:4px 16px 4px 0px;
    border-radius:15px;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    margin:5px !important;
    max-width:225px;
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ref-label span{
    position:relative;
    left:0px;
    color:#fff;
    padding:2px 6px 3px 12px;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    margin:0;
    margin-left:-7px;
    white-space:nowrap;
}
.sites-ref, .countries-ref, .hits{
    margin-top:30px;
}
.ref-one{
    background-color:#353535;
}
.ref-two{
    background-color:#666;
}
.ref-three{
    background-color:#999;
}
.ref-four{
    background-color:#aaaaaa;
}
.ref-five{
    background-color:#bbbbbb;
}
.ref-div ol{
    font-family:"Source Sans Pro";
    font-weight:400;
    font-size:15px;
    margin-left:5px;
    
}
.ref-div hr{
    margin-top:7px;
    border-color:#f7f7f7;
}
.info-div{
    margin-top:40px;
}
.icon-btn, 
.icon-btn:hover, 
.icon-btn:focus,
.icon-btn:active{
    background-color:#fff;
    color:#353535;
    height:20px;
    width:20px;
    padding:0;
    position:relative;
    top:-2px;
    display:inline-block;
    margin-right:7px;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
}
.info-title{
    
    font-family:"Montserrat";
    font-size:20px;
}
.info-num{
    text-align:center;
    font-family:"Montserrat";
    font-size:35px;
    color:#5e5e5e;
    background-color:#fff;
    border:2px solid #fff;
    border-radius:50px;
    height:100px;
    min-width:100px;
    padding:20px;
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3);
}
.info-title span{
    margin-left:30px;
}

#visualization{
    margin-bottom:40px;
    margin-top:40px;

}
.enlarge, .enlarge:focus{
    position:absolute;
    right:0px;
    bottom:0px;
    background-color:#fff;
    height:30px;
    width:30px;
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3);
    color:#353535;
    padding:4px;
    font-size:15px;
    border-radius:100%;
}
.enlarge:hover{
    background-color:#eaeaea;
    color:#444;
}
.ratio-div{
    margin-top:40px;
    background-color:#fff;
    font-family:"Montserrat";
    text-align:center;
    border-radius:10px;
    padding:15px;
    opacity:0.4;

}
.ratio-div:hover{
    opacity:1;
    cursor:cell;
}
.label-truncate{
    max-width:80%;
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.major{
    position:absolute;
    top:1%;
    left:0.5%;
    width:99%;
    height:98%;
    background-color:#fff;
    border-radius:10px;
}

.btn-container{
    text-align:center;
}
.home-btn{
    display:block;
    position:absolute;
    top:10px;
    right:10px;
    height:40px;
    width:40px;
    border-radius:100%;
    background-color:#353535;
    text-align:center;
    padding:4px;
    font-size:20px;
    -webkit-box-shadow: 0px 4px 12px -4px rgba(0,0,0,0.39);
    -moz-box-shadow: 0px 4px 12px -4px rgba(0,0,0,0.39);
    box-shadow: 0px 4px 12px -4px rgba(0,0,0,0.39);
    opacity:0;
}
.outline{
    width:100%;
    margin:-20px;
}
.error-container{
    display:block;
    padding:10px;
    opacity:0;
}
.home-btn:hover,
.home-btn:focus{
    background-color:#fff;
    color:#353535;
}
.home-btn:active{
    background-color:#fff;
    -webkit-box-shadow: 0px 4px 12px -4px rgba(0,0,0,0);
    -moz-box-shadow: 0px 4px 12px -4px rgba(0,0,0,0);
    box-shadow: 0px 4px 12px -4px rgba(0,0,0,0);
}
.error-body{
    display:block;
    position:absolute;
    top:0px;
    width:100%;
    height:100%;
    z-index:99;
    padding:15px;
    font-family:"Source Sans Pro";
    color:#353535;
}
.error-body h1{
    font-size:7vmin;
    font-weight:900;
    /*color:#ff2c2c;*/
}
.error-body span{
    font-size:4vmin;
    font-weight:300;

}

@media all and (max-width: 450px) {
.error-body h1, {
    font-size: 30px;
  }
  .error-body span{
    font-size:15px;
  }
}
@media all and (max-height: 350px) {
.error-body h1, {
    font-size: 30px;
  }
  .error-body span{
    font-size:15px;
  }
}