html {
    position:relative;
    min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
 html, body {
    margin:0;
    padding:0;

}
.pageContentWrapper {
    margin-bottom:10px;
    /* Height of footer*/
}



.fb-like{color: #fff; background-color: yellow;}
sup{color: #76B34C;}
.modal-content{background-color: #fff; color: #333;}
#textboxstatus{float:left; border: 0px solid black; padding: 0; margin: 0px; font-family: GothamHTF-Medium, Verdana, Helvetica, Arial, sans-serif; font-size: x-small; color:#777;}
.img-responsive{margin: 0 auto;}
.npnm{margin: 0; padding: 0; height: auto; width: 100%;}

/*----------------------------------------------bannerbox--------------------------------------------------*/
#bannerbox{
width: 100%; 
height:auto;
margin: auto;
text-align:center;
position:relative;
}

#bannertext{
position: absolute; 
margin: 0 auto;
left:17%;
bottom:13%;
}

#bannertext h2{
font-family: GothamHTF-Bold, Verdana, Helvetica, Arial, sans-serif;
font-size: 4.5vw;
color: #fff;
text-shadow: 5px 5px 8px #333;
}

/*----------------------------------------------typography--------------------------------------------------*/

.fl{float: left;}
.fr{float: right;}


#blog article h2{margin-bottom: 0px; padding-bottom:0px; }
#blog span.date{font-size: 0.8em;}
#blog article p:first-of-type{padding-top: 1.6em;}
#blog aside ul {padding: 0; margin: 0;}
#blog aside ul li {list-style-type: square; margin: 0 0 0 15px;}

#blog article ul{padding: 0; margin: 0;}
#blog article ul li {list-style-type: square; margin: 0 0 0 30px;}

.header-not-fixed{ position: absolute!important;}/*used for header in index.php and blog.php*/


/*----------------------------------------------typography--------------------------------------------------*/
.underline{text-decoration: underline;}


@font-face {
    font-family: GothamHTF-Book;
    src: url(../fonts/gothamhtf-book.otf);
}

@font-face {
    font-family: GothamHTF-Medium;
    src: url(../fonts/gothamhtf-medium.otf);
}

@font-face {
    font-family: GothamHTF-Bold;
    src: url(../fonts/gothamhtf-bold.otf);
}

h1{font-family: GothamHTF-Medium, Verdana, Helvetica, Arial, sans-serif; text-transform: capitalize;}
h2{font-family: GothamHTF-Medium, Verdana, Helvetica, Arial, sans-serif;}
h3{font-family: GothamHTF-Medium, Verdana, Helvetica, Arial, sans-serif; text-transform: capitalize;}
h4{font-family: GothamHTF-Medium, Verdana, Helvetica, Arial, sans-serif; text-transform: capitalize;}
h5{font-family: GothamHTF-Medium, Verdana, Helvetica, Arial, sans-serif;}
h6{font-family: GothamHTF-Medium, Verdana, Helvetica, Arial, sans-serif;}
p{font-family: GothamHTF-Book, Verdana, Helvetica, Arial, sans-serif;}

a{font-family: GothamHTF-Book, Verdana, Helvetica, Arial, sans-serif;}

.well form .form-group label{font-family: GothamHTF-Medium, Verdana, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal;}

/*------------------------------------------carousel---------------------------------------------------------*/
.slide{border: 0px solid #ccc;}
.carousel-indicators{}
.carousel-control.left, .carousel-control.right {
    background-image: none;
}

/*------------------------------------------body---------------------------------------------------------*/
body {
  padding-top: 50px;
  background-color: #f3f3f3;
  font-family: GothamHTF-Book, Verdana, Helvetica, Arial, sans-serif;
}


.glyphicon{margin-right: 10px; margin-top: 5px;}

.divsticker .glyphicon-map-marker{margin-right: 5px; font-size: 0.8em;}


form#form1{width: 100%; padding: 0; margin: 0;/* border: 1px solid green;*/}
label#lat{width: 100%; height: 0; padding: 0; margin: 0; /*border: 1px solid red;*/}
label#long{width: 100%; height: 0; padding: 0; margin: 0; /*border: 1px solid blue;*/}
label#msg{width: 100%;  padding: 0; margin: 0; /*border: 1px solid yellow;*/ }



/*---------------------------------------colours---------------------------------------------*/
.grey{background-color: grey;}
.yellow{background-color: yellow;}
.red{background-color: red;}
.blue{background-color: blue;}
.black{background-color: black;}
.white{background-color: #fff;}
.ccc{background-color: #ccc;}
.border{border: 1px solid green;}
.green{color: #33cc00;}/*--upload_success.php--*/

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


span.label.label-default a{color: white; text-decoration: underline; }

textarea#message{
  font-family: 'Happy Monkey', Verdana, Helvetica, Arial, sans-serif;
  background-color: #FFF496;
  border:1px solid #40E0D0;
  width: 100%;
  font-size:1.5em;
/*  -webkit-border-radius: 12px; 
  -moz-border-radius: 12px; 
  border-radius: 12px;*/
  margin-bottom: 0.5em; 
}


#map-canvas{width: 100%; height: 600px;}

/*-------------------index banner----------------*/
#indexbanner{
width: auto; 
height: auto; 
overflow: 
hidden; 
}



/*-------------------index page big footer----------------------*/
#footerid{
  margin: 40px 0 0px 0; /*must be 40px because height of copyrightfooterid is 40px*/
  padding: 15px 15px 150px 15px; 
  width: 100%; 
  height: 100%; 
  overflow: hidden; 
  background-color: #111; 
  color: #fff;
}

#footerid a{color: #fff;}
#footerid ul{
  list-style-type: none; margin: 0px 0 0px 0; /*increase margin-bottom to increase the space between footerlinks and copyrightfooter*/
  text-align: center; padding: 15px;
}
#footerid ul h4{color: #fff; text-transform: uppercase;}
#footerid ul li{margin:0; padding: 0; line-height: 1.6em;}


#howtoinstallpwaModal ul{list-style-type:none; padding-left: 0;}

/*-------------------copyright footer----------------------*/

#copyrightfooterid{
background-color: #000; 
  margin:0px 0 0px 0;
  padding: 10px 0px 0px 0px; 
  color: #fff; 
  width: 100%;
  height: 40px; 
  overflow: hidden;
  position: absolute;/*fixed the footer to bottom*/
  bottom: 0;/*fixed the footer to bottom*/
  left: 0;/*fixed the footer to bottom*/
  right: 0;/*fixed the footer to bottom*/

  
}

#copyrightfooterid a{color: #fff;}
#copyrightfooterid ul{list-style-type: none; padding: 0; border: 0px solid blue; text-align: center;}

/*-------------------end of footer---------------*/


.starter-template {
  padding: 40px 0px;
}

/*------------------navbar----------------------*/
.navbar{padding: 0; margin: 0;}
.navbar-header{height: auto; padding: 0px; margin: 0;}
button.navbar-toggle{background-color: #000; margin-top: 15px; margin-bottom: 15px; float: right;}
.navbar-brand{ padding: 0; margin-top: 0px; margin-bottom: 0px; float: left;}

.navbar-brand img{width: 35px; height: 35px;float: left; margin: 15px 0 15px 15px;}
.logoname{font-family: Geneva, Verdana, Helvetica, Arial, sans-serif; color: #FFF; margin: 15px 0 15px 0.7em; line-height: 200%; float: left;}

.navbar-inverse{background-color: #000; border-bottom: none; }

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{/*border-top: 1px solid #ccc;*/}
div.navbar-collapse.collapse ul.nav.navbar-nav{color: yellow;}

div.navbar-collapse ul.nav.navbar-nav{float: right;}/*set the secnav to float right*/
div.navbar-collapse ul.nav.navbar-nav li a{float: right;}/*set the secnav elements to float right*/

/*static*/
div.navbar-collapse{background-color: #000; }/**/
div.navbar-collapse ul.nav.navbar-nav{background-color: #000; margin-top: 0.8em;}/*1em*/
div.navbar-collapse ul.nav.navbar-nav li a{background-color: #000; color:#ccc; }
div.navbar-collapse ul.nav.navbar-nav li a:hover{background-color: black color: #fff;}
div.navbar-collapse ul.nav.navbar-nav li.active a{background-color: #000; color:#fff;}/*active class*/
div.navbar-collapse ul.nav.navbar-nav li.active a:hover{background-color: #40E0D0; color: #000;}/*active class*/

/*close*/
div.navbar-collapse.collapse{background-color: #000;}/**/
div.navbar-collapse.collapse ul.nav.navbar-nav{background-color: #000;}
div.navbar-collapse.collapse ul.nav.navbar-nav li a{background-color: #000; color:#ccc;}
div.navbar-collapse.collapse ul.nav.navbar-nav li a:hover{background-color: black; color: #fff;}
div.navbar-collapse.collapse ul.nav.navbar-nav li.active a{background-color: #000; color:#fff;}/*active class*/
div.navbar-collapse.collapse ul.nav.navbar-nav li.active a:hover{background-color: #40E0D0; color: #000;}/*active class*/

/*transition*/
div.navbar-collapse.collapsing{background-color: #000;}
div.navbar-collapse.collapsing ul.nav.navbar-nav{background-color: #000;}
div.navbar-collapse.collapsing ul.nav.navbar-nav li a{background-color: #000; color:#ccc;}
div.navbar-collapse.collapsing ul.nav.navbar-nav li a:hover{background-color: black; color: #fff;}
div.navbar-collapse.collapsing ul.nav.navbar-nav li.active a{background-color: #000; color:#fff;}/*active class*/
div.navbar-collapse.collapsing ul.nav.navbar-nav li.active a:hover{background-color: #40E0D0; color: #000;}/*active class*/

/*open*/
div.navbar-collapse{background-color: #000;}
div.navbar-collapse.in ul.nav.navbar-nav{background-color: #000;}
div.navbar-collapse.in ul.nav.navbar-nav li a{background-color: #000; color:#ccc;}
div.navbar-collapse.in ul.nav.navbar-nav li a:hover{background-color: black; color: #fff;}
div.navbar-collapse.in ul.nav.navbar-nav li.active a{background-color: #000; color:#fff;}/*active class*/
div.navbar-collapse.in ul.nav.navbar-nav li.active a:hover{background-color: #40E0D0; color: #000;}/*active class hover*/



/*------------------end of navbar----------------*/


/*-------------------------------paste btn-------------------------------------------------*/
.generalbtn{
    user-select: none;
    text-decoration: none; 
    color: #fff;
    background-color:#FA8F0A;
    width:33.3%;
    text-align: center;
    font-size: 1.5em;
    padding: 0.3em;
    border: none;
  -webkit-border-radius: 12px; 
  -moz-border-radius: 12px; 
  border-radius: 12px;
  float:right;
  outline: 0 none;/*remove blue box around submit btn*/
  box-shadow: 0 2px #666;
}

.generalbtn:visited{}
.generalbtn:hover{background-color: #D0730F; color:#fff;}
.generalbtn:active{background-color: #D0730F; color:#fff; box-shadow: 0 0px #555; transform: translateY(2px);}


/*---------------------------paste a sticker btn/nearby stickers btn-----------------------------------------------------*/
nav{list-style-type: none; width: 100%; height: 2em; padding: 0; margin: 0;}
nav ul{list-style-type: none; width:100%; padding: 0; margin: 0;}
nav ul li{list-style-type: none; display: inline; width: 100%; padding: 0; margin:0;}
nav ul li a{
    user-select: none;
    text-decoration: none; 
    color: black;
    background-color: #ddd;
    float:left;
    width: 100%;
    margin-right:0.3em;
    margin-bottom: 0.3em;
    text-align: center;
    font-size: 1.5em;
    padding: 0.3em;
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px;
    box-shadow: 0 1px #999;

}
nav ul li a:link{text-decoration: none;}
nav ul li a:visited{text-decoration: none;}
nav ul li a:hover{background-color: #ccc; color:#000; text-decoration: none;}
nav ul li a:active{background-color: #ccc; color:#000; text-decoration: none; box-shadow: 0 0px #555; transform: translateY(1px);}

#infographics{width: 100%; height: auto; text-align: center;}
#infographics img{width: 100%; height: auto; padding: 15px;}


body.upload nav ul li a.btn01{}

body.viewstickers nav ul li a.btn02{}

body.mapofstickers nav ul li a.btn03{}

/*------------------------------------------stickers---------------------------------------------------------*/

.divsticker{
  background-color: #FFF496;
  padding: 0.75em;
  display: inline-block;
  margin-right: 1em;
  margin-bottom: 1em;
  width: auto;
  height: auto;
/*   border-radius: 12px; 
 -webkit-border-radius: 12px; 
  -moz-border-radius: 12px; 
  border-radius: 12px; */
  /*box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;*/
  box-shadow: 2px 2px 2px #ccc;
}

.divsticker p{
  word-wrap: break-word;
  font-family: 'Happy Monkey', cursive;
  font-size: 1em;}

.divsticker p img{
  /*border: 5px solid yellow; */
  max-width: 100%;
  height: auto;
}


/*------------------------------------------media queries----------------------------------------------------*/

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
@media {
  .divsticker p img{
  /*border: 5px solid yellow; */
  width: auto; /* for ie 8 */
  height: auto;
}
.container{min-width: 320px;}

}



/*----------------------------------Mobile browser 320px and up)---------------------------*/
@media (min-width: 320px){
#indexbanner{display: none;}
.navbar-header{min-width: 280px;}
.announcement{display: none;}
.divsticker{max-width: 100%;}

}



@media (min-width: 480px){
#indexbanner{display: none;}
.announcement{display: none;}
.divsticker{max-width: 100%;}
}

/*for announcement on index page*/
@media (min-width: 645px){
.announcement{display: block;}
.divsticker{max-width: 50%;}
}

/*--------------------------------Small devices (tablets, 768px and up)---------------------*/
@media (min-width: 768px) {
/*body{background-color:yellow;}*/
nav ul li a{
    width:30%;
    margin-right:3%;
}
.generalbtn{width:30%;}
#indexbanner{display:block;}

}

/*--------------------------------Medium devices (desktops, 992px and up)--------------------*/
@media (min-width:992px) {
/*body{background-color:orange;}*/
nav ul li a{
    width:30%;
    margin-right:3%;
}
.generalbtn{width:30%;}
.divsticker{max-width: 33.3%;}
}

/*-----------------------------------Large devices (large desktops, 1200px and up)-----------*/
@media (min-width: 1200px) {
/*body{background-color:green;}*/

nav ul li a{
    width:30%;
    margin-right:3%;
}
.generalbtn{width:30%;}

}


/*
  =============================================================================
  PRELOADER
  =============================================================================
  */

  #preloader {
  position: relative;
  /*left: 50%;
  top: 50%;*/
  /*z-index: 1;*/
  width: 100px;
  height: 100px;
  margin: 30px auto 30px auto;
  border: 2px solid #000;
  border-radius: 50%;

  /*border-top: 10px solid #ccc;*/
  /*border-bottom: 15px solid #ccc;*/
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  background-image: conic-gradient(#000, #00ef23);
}

  #preloader-layer-1 {
  margin-top: 15%;
  margin-left: 15%;
  position: absolute;
  width: 70%;
  height: 70%;
  border: 1px solid #00fe24;
  border-radius: 50%;
}

  #preloader-layer-2 {
  margin-top: 25%;
  margin-left: 25%;
  position: absolute;
  width: 50%;
  height: 50%;
  border: 1px solid #00fe24;
  border-radius: 50%;
}


@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*content*/
#myDiv {
  display: none;
}