/*------------ Reset Browser Defaults ------------------*/
* { outline-style: none; -webkit-text-size-adjust: none; }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset { margin:0; padding:0; }
input { margin: 0; }
a img,:link img,:visited img { border: none; }
ol,ul{list-style:none;}
th{text-align:left;}
h1,h2,h3,h4{font-size:100%;}
q:before,q:after{content:'';}
pre,code{font:115% monospace; font-size:100%;}
th{text-align:left;}
cite,code,th,address,footer{font-style:normal;font-weight:normal;}
body { font-size:62.5%; }
input, textarea {-webkit-border-radius: 0; -webkit-appearance: none;}
a{cursor:pointer; color:#6F6F6E; text-decoration:none; transition: color 0.5s ease;}

/*------------------------------------------------------*/

body{
    font-family:Arial, Helvetica, sans-serif;
    font-size:15pt;
    color:#000;
    }

.hideonLoad{
    display:none;
    }

#header{
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #F1F1F2;
    background: rgba(255,255,255,.98);
    box-shadow: #000 1px -5px 16px;
    position: fixed;
    z-index: 5;
    }

.headerfiler{
    width:100%;
    height:70px;
    }

#logo{
    height:20px;
    margin-top: 25px;
    float:left;
    }

.wrapper{
    max-width:1025px;
    display:block;
    margin-right:auto;
    margin-left:auto;
    }

#nav{
    float:right;
    margin-top:22px;
    }

#nav li{
    display:inline;
    font-size:12pt;
    margin-right:25px;
    color:#6F6F6E;
    cursor: pointer;
    transition: color 0.5s ease;
    }

#nav li:hover{
    color:#000;
    }

.navActive{
    font-weight:bold !important;
    color:#000 !important;
    }

.clear{
    clear:both;
    }

h1, #grippie{
    display:none;
    font-size:12pt;
    cursor:pointer;
    }

#coverClick{
    position:absolute;
    z-index:99;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    }

#editBox{
    float:right;
    width:250px;
    margin-top:20px;
    }

.colorBox{
    height:30px;
    width:30px;
    border: solid 1px #eee;
    float:left;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor:pointer;
    }

#customshirt, #tshirtbox{
    width:700px;
    }

#tshirtbox{
    float:left;
    }   


.activeColor{
    border:solid 3px #fff;
    box-shadow: 1px 1px 1px #000;
    width:26px;
    height:26px;
    }

#hashtag{
    width: 172px;
    height: 35px;
    outline: none;
    border: none;
    border: 1px solid #C6C6C5;
    background: none;
    padding-left: 26px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom:20px;
    }   

#inputhash{
    margin-left: 10px;
    font-weight: bold;
    font-size: 18pt;
    margin-bottom: -34px;
    margin-top: 20px;
    color:#6F6F6E;
    }

.bluebutton{
    width: 100%;
    background: #1D70B7;
    color: white;
    border-bottom: 5px solid #115D8C;
    text-align: center;
    padding: 17px 0px 15px 0px;
    cursor:pointer;
    font-size:15px;
    transition: all 0.5s ease;
    }

.bluebutton:hover{
    background:#2481C6;
    }

.bluebutton:active{
    background:#1D70B7;
    border-bottom: 1px solid #115D8C;
    margin-top: 4px;
    }

.smallbuttonGreen, .smallbuttonorange{
    width:95px;
    height:35px;
    color: white;
    text-align: center;
    font-size:13px;
    cursor:pointer;
    line-height: 37px;
    margin-right: 10px;
    margin-top:10px;
    float:left;
    border-bottom: 4px;
    transition: all 0.3s ease;
    }

.smallbuttonGreen{
    background:#3AA935;
    border-bottom: 4px solid #2E9637;
    transition: all 0.3s ease;
    }

.smallbuttonGreen:hover{
    background:#3FB539;
    transition: all 0.3s ease;
    }

.smallbuttonorange{
    background:#F9B233;
    border-bottom: 4px solid #F39200;
    }

.smallbuttonorange:hover{
    background:#FFB94A;
    }

.smallbuttonorange:active{
    border-bottom: 2px solid #F39200;
    margin-top:12px;
    }

.smallbuttonGreen:active{
    border-bottom: 2px solid #2E9637;
    margin-top:12px;
    }


.socialmedia{
    width: 45px;
    height: 45px;
    cursor: pointer;
    margin-top: 5px;
    margin-bottom: -8px;
    }

#facebookShare{
    background:#7388B5;
    transition: all 0.3s ease;
    }

#facebookShare:hover{
    background:#4E66A2;
    }

#instagrhamShare{
    background:#4F7C9D;
    transition: all 0.3s ease;
    }

#instagrhamShare:hover{
    background:#1A5881;
    }

#googleplusShare{
    background:#E06856;
    transition: all 0.3s ease;
    }

#googleplusShare:hover{
    background:#D83D24;
    }

#twitterShare{
    background:#5EB2E1;
    transition: all 0.3s ease;
    }

#twitterShare:hover{
    background:#309DD8;
    }

.hrCustomPage{
    width: 199px;
    float: left;
    margin-top: 25px;
    }

.shartee{
    font-weight:bold;
    font-size: 15px;
    margin-bottom: 5px;
    margin-top: 8px;
    }


#tshirtbox{
    position:relative;
    }

#changeHash{
    width: 201px;
    }

#thash{
    position:absolute;
    top:0;
    left:0;
    font-size: 350px;
    font-weight: bold;
    margin-left: 357px;
    margin-top: 25px;
    color: rgba(255,255,255,.1);
    }

#wordhash{
    position: absolute;
    font-weight: bold;
    color: rgba(255,255,255,.9);
    margin-top: 194px;
    margin-left: 220px;
    font-size: 50px;
    }

#preloader{
    display:none;
    }

#lightbox{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:99;
    background:rgb(0,0,0);
    background:rgba(0,0,0,.8);
    }

#lightboxwhite, #lightboxok{
    width:80%;
    max-width:500px;
    background:#fff;
    background:rgba(255,255,255,.8);
    display:block;
    z-index:100;
    position:fixed;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    margin-top:10%;
    padding:20px;
    text-align:center;
    font-weight:bold;
    }

.progressBarOutline{
    width:100%;
    height:20px;
    border:1px solid #eee;
    margin:15px auto 0px auto;
    }

.progressBarInside{
    width:100%;
    height:20px;
    background-color: #F6A205;
    opacity:.5;
    margin-top: -21px;
    margin-left: 1px;

    -webkit-animation: progressbar 10s ease; /* Chrome, Safari, Opera */
    animation: progressbar 10s ease; /* Standard syntax */
    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes progressbar {
        from {width:0%;}
        to {width:100%;}
    }

    /* Standard syntax */
    @keyframes progressbar{
        from {width:0%;}
        to {width:100%;}
    }

#okbuttonlightbox{
    width: 135px;
    position: absolute;
    bottom: -34 !important;
    right: 0;
    margin-top: 30px;
    border:none;
    }

.typehashtagehere{
    position: absolute;
    top: 236px;
    width: 170px;
    height: 45px;
    margin-left: -169px;

-webkit-animation: bounce .4s ease infinite alternate; /* Chrome, Safari, Opera */
  animation: bounce .4s ease infinite alternate; /* Standard syntax */
    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes bounce {
        from {margin-left: -169px;}
        to {margin-left: -180px;}
    }

    /* Standard syntax */
    @keyframes bounce {
        from {margin-left: -169px;}
        to {margin-left: -180px;}
    }







.spinner {
  width: 30px;
  height: 30px;
  background-color: #115D8C;

  margin: 30px auto 30px;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}






































































@media (max-width:1074px){

    #logo{
        margin-left:25px;
    }

    #nav li:last-child{
    margin-right:25px;
    }

    #nav li{
    margin-right:25px;
    }

    .wrapper{
    max-width:100%;
    }

}











@media (max-width:970px){

    #customshirt, #tshirtbox{
        width:500px;
    }

    #thash{
    font-size: 250px;
    margin-left: 250px;
    margin-top: 15px;
    }

    #wordhash{
    margin-left: 160px;
    }

}













@media (max-width:775px){
 
    #editBox{
    width:420px;
    margin:0 auto;
    float: none;
    margin-top:10px;
    }

    #tshirtbox{
    float:none;
    margin: 0px auto;
    }


    h1, #grippie{
    display:block;
    }

    h1{
    text-align: center;
    background: #1D70B7;
    padding: 10px 0px;
    color: #fff;
    }

    #grippie{
    float:right;
    margin-right:25px;
    margin-top:25px;
    width:25px;
    height:auto;  
    }

    #grippie{
    cursor:pointer;
    }

    .grippieLine{
    width:100%;
    height:4px;
    margin-bottom:4px;
    background:#6F6F6E;
    }

    #nav{
    display:none;
    position:absolute;
    z-index:100;
    background:#000;
    background:rgba(0,0,0,.9);
    width:100%;
    height:auto;
    margin-top: 65px;
    }

    #nav li{
    display: block;
    font-size: 15pt;
    margin-right: 25px;
    height: 40px;
    padding-left: 25px;
    padding-top: 15px;
    }

    #nav ul li:nth-child(3){
    background:red;
    }

    #nav li:last-child{
    margin-right:0px;
    }

    #nav li:hover{
    background:#000;
    cursor:pointer;
    color:#fff;
    }

    .navActive{
    font-weight:bold !important;
    color:#fff !important;
    background:#000 !important;
    }

    #hashtag{
    float:left;
    padding-top:5px;
    padding-bottom:5px;
    width:205px;
    padding-left:30px;

    }

    #inputhash{
    margin-left: 14px;
    font-weight: bold;
    font-size: 18pt;
    margin-bottom: -39px;
    margin-top: 24px;
    color: #6F6F6E;
    }

    #changeHash{
    float: right;
    width: 150px;
    margin-right: 10px;
    height: 10px;
    line-height: 13px;
    }

    .hrCustomPage{
     width:408px;
     margin-top:8px;   
    }

    .hideon700{
    display:none;    
    }

    .socialmedia{
    float:left;
    margin-right:7px;
    height:39px;
    margin-top:10px;
    }

    .smallbuttonGreen, .smallbuttonorange{
    margin-right:7px;
    margin-left:1px;   
    }

    .typehashtagehere{
    display:none;    
    }
}




@media (max-width:500px){

    #editBox{
    width:210px;
    margin:0 auto;
    float: none;
    margin-top:10px;
    }

    #customshirt, #tshirtbox{
    width:320px;
    display:block;
    margin:0 auto;
    }

    #tshirtbox{
    float:none;
    }

    #thash {
    font-size: 150px;
    margin-left: 170px;
    margin-top: 15px;
    }

    .hideon700{
    display:block;    
    }

    #hashtag{
    width: 172px;
    height: 35px;
    outline: none;
    border: none;
    border: 1px solid #C6C6C5;
    background: none;
    padding:0px;
    padding-left: 26px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom:20px;
    }   

    #inputhash{
    margin-left: 10px;
    font-weight: bold;
    font-size: 18pt;
    margin-bottom: -34px;
    margin-top: 20px;
    color:#6F6F6E;
    }

    #changeHash{
    width: 201px;
    height: 18px;
    line-height: 19px;
    }

    .hrCustomPage{
    width: 198px;
    float: left;
    margin-top: 20px;
    }

    .shartee {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 0px;
    margin-top: 5px;
    }

    .socialmedia {
    height: 45px;
    margin-bottom:0px;
    }

    .smallbuttonGreen, .smallbuttonorange {
    margin-right: 7px;
    margin-left: 1px;
    margin-top: 6px;
    }

    #wordhash{
    margin-left: 107px;
    }

}




/*  transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];  */