body{
	margin: 0;
	padding: 0;
	background: #fff;
	font-size: 14px;
}

.container{
	height:700px;
}

label{
display:block;
font-weight:normal;
margin-top:0px;
margin-bottom:0px;
}

/* divs for browser error */

.errorcontainer{
	height:500px;
	max-width:901px;
	margin-left:auto;
	margin-right:auto;
	margin-top:40px;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.20);
	background-color:#FFFFFF;
}

.error-Heading{
	padding-top:30px;
	font-family: 'Raleway-Extrabold';
	text-align:center;
}

.error-SubHeading{
	padding-top:20px;
	font-family:'Raleway-Regular';
	text-align:center;
}

#error-background{
	background-color: #f0f0f0;
}

.browser-icons{
	height:81px;
	width:auto;
}


.col-xs-4{
	width:33%;
}

.border-column-right{
	border-right: 1px solid rgb(189, 189, 189); 
}



.browser-icon-row{
	padding-top:50px;
	text-align:center;
}

.error-browser-Footer{
	font-family: 'Raleway-Bold';
	font-size:14px;
	text-align:center;
	padding-top:20px;
}

.error-Orange-buttons{
	width: 55%;
    height: 36px;
    background: #F47721;
    border: 1px solid #F47721;
    cursor: pointer;
    border-radius: 2px;
    color: #FFFFFF;
    font-family: Raleway-semibold;
    /* padding-right: 6px; */
    /* margin-top: 10px; */
}

.error-ornge-button-row{
	text-align: center;
    padding-top: 25px
}


/* divs for browser error ends */


/* background-color: #f0f0f0 */



.body{
	position: absolute;
	/*width: 100%;*/
	/*height: 100%;*/
    /*background-image: url(http://ginva.com/wp-content/uploads/2012/07/city-skyline-wallpapers-008.jpg);*/
	background-size: cover;
	/*-webkit-filter: blur(5px);*/
	z-index: 0;
}

/* /* To remove textbox shadows in all input fields */
/* input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
-webkit-appearance: none;
-moz-appearance: none; */ /* mobile firefox too! */
/* } */

 
/* To make carosuel images in same line*/ 
.MarginfrmBottom{
	margin-bottom:20px;
}


#DOE_SliderImage{
	margin-top:20px;
    width:500px;
    height:500px;  !important;
}

.slider-image{
    margin-top:11px;
    width:500px;
    height:500px;  !important;
}

.row{
	margin-left: 0px;
    margin-right: 0px;
}


.carousel-caption{
position:static;
padding-top:0px;
color:black;
}


.carousel-bottom-text {
padding-left: 5%;
padding-right: 5%;
text-align: left;
padding-top: 2%;
padding-bottom:2%;
}


.header-img{
    padding-right:7px;
}

.grad{
	position: absolute;
	width: 100%;
	height: 100%;
	/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));*/ /* Chrome,Safari4+ */
	z-index: 1;
	opacity: 0.7;
}

.header{
	position: absolute;
	top: calc(50% - 35px);
	left: calc(50% - 255px);
	z-index: 2;
}

.header div{
	float: left;
	color: #fff;
	/* font-size: 35px; */
	/* font-weight: 200; */
}

.header div span{
	color: #5379fa !important;
}

.login{
	margin-top:50px;
    	margin-left:44px;
	position: absolute;
	top: calc(-2%);
	left: calc(-5%); 
	/*height: 750px;*/
	width: 250px;
	padding: 10px;
	z-index: 2;
}

.login input[type=text]{
	width: 240px;
	height: 26px;
	background: transparent;
	border: 1px solid rgba(189,189,189,0.6);
	-webkit-appearance: none;
	border-radius: 2px;
	color: black;
	/* font-weight: 400; */
	padding: 4px;
}

.navbar {
display:none;
}

.carousel-header-inline-div{

  font-family: Raleway-Extrabold;
  padding: 4px;

}

.carousel-NYC-inline-div{
  /* font-weight: 100; */
  padding: 4px;
  color:#9B9B9B;

}

 #carousel-bottom{
 height:110px;
 width:500px;
 /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
 box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.20);
 text-align: center;
 overflow-y:hidden;
 }


.header-LogoName{
	font-family: Raleway-Extrabold;
	padding-left: 10px;
}

.header-LogoNYC{
	font-family: Raleway-Thin;
	padding-left: 10px;
	font-size: 12px;
}

/* To reduce margins of every paragraph to zero, the default value was intially at 10 */
p {
    margin: 0 0 0;
}


.dropdown-select{
	width: 250px;
	height: 36px;
    /* font-family: Avenir Next; */
    color: #9B9B9B;
	font-size: 14px;
	/* font-weight: 400; */
	padding: 4px;
    border: 1px solid rgba(189,189,189,0.6);
    border-radius: 2px;
	background: transparent;

}

.dropdown-select:focus{
	outline: none;
    border: 1px solid #F5A623;
}



.login input[type=password]{
	width: 240px;
	height: 26px;
	background: transparent;
	border: 1px solid rgba(189,189,189,0.6);
	-webkit-appearance: none;
	border-radius: 2px;
	color: black;
	/* font-weight: 400; */
	padding: 4px;
}

.login-page-Orangebuttons{
	width: 250px;
	height: 36px;
	background: #F47721;
	border: 1px solid #F47721;
	cursor: pointer;
	border-radius: 2px;
	color: #FFFFFF;
    font-family: Raleway-Extrabold;
	padding-right: 6px;
	margin-top: 10px;
}


#sign-up-button-div{
   /*  margin-left:40px; */
}


.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img{
display: block;
max-width: 100%;
height:500px;
}


.login-page-Orangebuttons:hover,.login-page-Orangebuttons:focus{
	background: #F6904b;
	border: 1px solid #F6904b;
}

.login-page-Orangebuttons:active{
	background: #E0620C;
	border: 1px solid #E0620C;
}

.login input[type=text]:focus{
	outline: none;
    border: 1px solid #F5A623;
	/*border: 1px solid rgba(255,255,255,0.9);*/
}

.login input[type=password]:focus{
	outline: none;
    border: 1px solid #F5A623;
	/*border: 1px solid rgba(255,255,255,0.9);*/
}

.login input[type=button]:focus{
	outline: none;
}

::-webkit-input-placeholder{
   color: rgba(189,189,189,0.6);
}

::-moz-input-placeholder{
   color: rgba(189,189,189,0.6);
}

.login-zeroWaste{
    /*margin-top:12%;*/
}

.login-zeroheading{
    color:#F47721;
    /* font-weight:bold; */
    /* font-size:40px; */
}

.login-schoolheading{
    color:#F47721;
/*     font-weight:100; */
    /* font-size:50px; */

}

.login-wasteheading {
    color:#F47721;
    /* font-size:40px; */
}

.login-box-zerowaste{
    /* width:inherit; */
    height:37px;
}

.login-box-schools{
    width:inherit;
    height:57px;
}

#login-slider-images-div{
    position: absolute;
	/*top: calc(19.3% - 35px);*/
    top:227px;
	left: calc(42% - 255px);

}


#slider-text-id{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.01);
    width:486px;
    height:225px;
    left:0%;
    right:0%;
    padding-top:34px;
}




#login-body-div{
    height:85vh;
    width:100%;
}


#login-slider-images{
    /*height:84.6%;*/
    height:63.8%;
    width:486px;
}

.login-slider-text{
    /*margin-top:100px;*/
    font-size: 14px;
    color:#4A4A4A;
}

#login-img-height{
    /*height:575px;*/
    height:605px;
}

/* To move carousel indicator below the block */
.carousel-indicators{
	top:688px;
}

.carousel-indicators li {
  background-color: #BDBDBD;
  background-color: #BDBDBD;
}

.carousel-indicators .active {
  background-color: #444;
}


.marginfrmtop{
    margin-top:10px;
}

.margin-label-field{
     margin-bottom:5px;
}




.text-labels{
    color: #BDBDBD;
    /* font-weight:100; */
    /* font-family: 'Avenir Next'; */
    font-size: 14px;
    padding-left:15px;
}


.text-labels-footer {
    color: #BDBDBD;
    /* font-weight: 100; */
    /* font-family: 'Avenir Next'; */
    font-size: 14px;
    height:5vh;
    padding-top:2%;
}

/* Over-riding the values in toolkit.css to ensure that the mobile version does not have horizontal scroll */
.col-xs-0,.col-xs-1, .col-xs-2,.cols-xs-3,.col-xs-4,.col-xs-5,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-10,.col-xs-11,.col-xs-12{
  padding-left: 0px;
  padding-right: 0px;
}

/* Overriding the values in toolkit ends */


.text-labels-orange{
    color: #F47721;
    /* font-weight:100; */
   /*  font-family: 'Avenir Next'; */
    font-size: 14px;
    padding-left:55px;
}


.padding-frm-top{
    padding-top:2px;
}


.padding-top-copyright{
    padding-top:55px;
}


.line-and-text{
    width:250px;
    height:12px;
    border-bottom:1px solid #BDBDBD;
    text-align: center;
    margin-left:0px;
    margin-top:20px;
	margin-bottom:20px;
}


.line-and-text-Guest{
    width:250px;
    height:12px;
    border-bottom:1px solid #BDBDBD;
    text-align: center;
    margin-left:55px;
    margin-top:50px;

}




.line-and-textFont{
    /* font-family: 'Avenir Next'; */
    font-size: 14px;
    color: #BDBDBD;
    background-color: #FFFFFF;
    padding: 0 7px;
}


.g-recaptcha {
    margin-top:30px;
    margin-left:-12px;
    transform:scale(0.829);
    transform-origin:27% 0;
}


#carousel-dots{
    position:relative;
    top: 50px;
}

.carousel-caption{
    /*top:380px;*/
    text-align:center;
    /*left:20px;*/
    /*right:80px;*/
    text-shadow: 0 0px 0px rgba(0,0,0,0.0);
}

.carousel-indicators li{
    margin:1px;
    height:11px;
    width:11px;
    margin-left:14px;
}

.carousel-indicators .active {
    margin:1px;
    height:11px;
    width:11px;
    margin-left:14px;
}


/* #captcha-div{
    height:114px;
} */




#slide-header-image{
    vertical-align:-30px;

}







/* Rounded Buttons Code Starts*/

.button {
    width: 250px;
	height: 36px;
	font-family: Raleway-Extrabold;
	background: #FFFFFF;
	border: 1px solid #F5A623;
	cursor: pointer;
	border-radius: 25px;
	color: #F47721;
    /* font-weight: bold; */
	font-size: 14px;
	padding: 6px;
	margin-top: 10px;
   }

.button:hover,.button:focus{
	 background:#F6904B;
     border: 1px solid #F6904B;
	 color:#FFFFFF;
}
.button:active{
	 background:#E0620C;
     border:1px solid #E0620C;
	 color:#FFFFFF;
}   
   

   
   
   
/* Rounded Buttons Code ends */

.footer-abc{
	margin:auto;
}


.footer-imageTopMargin{
	margin-top:250px;
}

.footer-login{
   /*  margin:auto;
    height:3.8vh;
    width:50%; */
}

.link-as-block{
    display: inline-block;
    padding: 0px 3.2%;
    word-wrap: normal;
}

.link-as-block a{
    color:#4A4A4A;
    /* font-family: 'Avenir Next'; */
    /* font-weight: bold; */
	font-size: 14px;
}



.main-nav{
    /* margin-left:135px; */
}

.footer-images{
     margin:auto;
     width:330px;
     height:5vh;
}

.padding-left-footer-images{
    padding-left:15px;
}

/* Code to make sure that the carousel-image is scaled to form a cover */
.cover {
  object-fit: cover;
}

a{
    color: #F47721;
    /* font-weight:100; */
    /* font-family: 'Avenir Next'; */
    font-size: 12px;
    padding-left:0px;
}

a:hover{
color:#F6904b;
font-size: 12px;
padding-left:0px;
outline:none;
}

a:active{
color:#E0620C;
font-size: 12px;
padding-left:0px;
outline:none;
}

a:focus{
color:#E0620C;
font-size: 12px;
padding-left:0px;	
outline:none;
}



#get-started{
    position: absolute;
	top: calc(820px);
	left: calc(42% - 255px);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.01);
    width:790px;
    height:218px;
}



.marginLeftDiv{
	margin-left:0px;
}


@media screen and (min-width: 1260px) {
.carousel-inner{
	width:500px;
}

}


@media screen and (min-width: 1025px) and (max-width:1259px){

#carousel-bottom{
		height:125px;
		width:412.5px;
	}
	
    .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img{
		height:412.5px;
	}	
	
	.carousel-indicators{
		top:615px;
	}
	
	
    .login{
		position:relative;
		margin-left: 24px;
		top:calc(0%);
		left:calc(0%);
		margin:auto;
		width:250px;
		height:750px;
	}
	
	
	.marginLeftDiv{
	margin-left:24px;
    }

/* Fixed Containor size, Position and Overflow intialised to ensure, swipe functionality works properly */	
	.container{
	height:640px;
    /* position:fixed;  currently commented to fix Footer Issue*/ 
    overflow:hidden;
	}
	
	.with-top-navbar{
		padding-top: 5px;
	}
	
	
	
	
} 

/* 993px */


@media screen and (min-width:1021px) and (max-width:1024px){
	
		
	#carousel-bottom{
		height:125px;
		width:412.5px;
	}
	
    .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img{
		height:412.5px;
	}	
	
	.carousel-indicators{
		top:615px;
	}
	
	
    .login{
		position:relative;
		margin-left: 24px;
		top:calc(0%);
		left:calc(0%);
		margin:auto;
		width:250px;
		height:640px;
	}
	
	
	.marginLeftDiv{
	margin-left:24px;
    }

/* Fixed Containor size, Position and Overflow intialised to ensure, swipe functionality works properly */	
	.container{
	height:650px;
	position:fixed;  /* currently commented to fix Footer Issue*/ 
    overflow:hidden;
	z-index:2;
	}
	
	#footer_content {
    padding-top: 600px;
	position:fixed;
	padding-left:200px;
	z-index:1;
    }  
	
	.carousel-caption{
	  padding-bottom: 5px;
	}
	
	
	.with-top-navbar{
		padding-top: 5px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}














@media screen and (min-width:773px) and (max-width:1020px){
	
	#carousel-bottom{
		height:125px;
		width:412.5px;
	}
	
    .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img{
		height:412.5px;
	}	
	
	.carousel-indicators{
		top:615px;
	}
	
	
    .login{
		position:relative;
		margin-left: 24px;
		top:calc(0%);
		left:calc(0%);
		margin:auto;
		width:250px;
		height:640px;
	}
	
	
	.marginLeftDiv{
	margin-left:24px;
    }

/* Fixed Containor size, Position and Overflow intialised to ensure, swipe functionality works properly */	
	.container{
	height:650px;
	position:relative;  
    overflow:hidden;
	z-index:2;
	}
	
/* 	#footer_content {
    padding-top: 600px;
	position:fixed;
	padding-left:200px;
	z-index:1;
    }  */
	
	.carousel-caption{
	  padding-bottom: 5px;
	}
	
	
	.with-top-navbar{
		padding-top: 5px;
	}
	
	
}

/* //992px */

@media screen and (min-width: 768px) and (max-width:772px){

    .marginLeftDiv{
	margin-left:24px;
    }


	.login{
		position:relative;
		margin-left: 24px;
		top:calc(0%);
		left:calc(0%);
		margin:auto;
		width:250px;
		height:600px;
	}

    .carousel-indicators{
		top:585px;
	}
	
	#carousel-bottom{
		height:125px;
		/* width:375px; */
		width:369px;
	}
	
	.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img{
		height:375px;
	}
	
/* Fixed Containor size, Position and Overflow intialised to ensure, swipe functionality works properly */		
    .container{
	height:650px;
	position:fixed;  /* currently commented to fix Footer Issue*/ 
    overflow:hidden;
	z-index:2;
	}
	
	#footer_content {
    padding-top: 600px;
	position:fixed;
	padding-left:100px;
	z-index:1;
    } 
	
	.carousel-caption{
	  padding-bottom: 5px;
	}
	
	
}


@media screen and (max-width:767px) and (min-width:450px){

  .with-top-navbar{
		padding-top: 0px;
	}



  .text-labels{
     padding-left:15px;
  }

	.login{
		position:relative;
		top:calc(0%);
		left:calc(0%);
		margin:auto;
		width:250px;
		height:600px;
	}

	body{
		min-width:100%;
	  max-width:100%;
	}

	 .line-and-text{
		 margin-left:0px;
		 margin-top:0px;
		 /*margin:auto;*/
	 }

   .zwsImage-and-textMargin{
		 margin-top:20px;
	 }

   .g-recaptcha{
		 margin-top:19px;
		 margin-left:0px;
		 transform-origin: 27% 50%;
		 display:inline-block;
	 }

	 #zws-logo{
		padding-left:0px;
	}
	
	.container{
	height:650px;
	}
	

}

@media screen and (max-width:449px){

	.with-top-navbar{
		padding-top: 0px;
	}

  .text-center{
		text-align: left;
	}


	.text-labels{
     padding-left:0px;
  }

	.login{
		position:relative;
		top:calc(0%);
		left:calc(0%);
		margin:auto;
		width:250px;
		height:600px;
	}

	 .line-and-text{
		 margin-left:0px;
		 margin-top:0px;
		 /*margin:auto;*/
	 }

   .zwsImage-and-textMargin{
		 margin-top:20px;
	 }

 .g-recaptcha{
    transform-origin: 27% 0%;
		display:inline-block;
		margin-left:-12px;
   }


  #zws-logo{
		 /* padding-left:24px; */
		 padding-left:0px;
	}

	body{
		min-width:100%;
	  max-width:100%;
	}

    .container{
	height:650px;
	}
	
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
	html[data-useragent*='MOBILE_APP'] .login{
		top: 50px !important;
	}

	html[data-useragent*='MOBILE_APP'] .mobile-navbar-flex-item .mobile-top-nav-logo{
		display: none;
	}

	html[data-useragent*='MOBILE_APP'] .nav-mobile {
        box-shadow: none;
	}
	
	html[data-useragent*='MOBILE_APP'] .navbar-overlay,  html[data-useragent*='MOBILE_APP'] .fixed-mobile-expanded-navbar{
		height: 100%;
	}

}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media only screen 
    and (min-width: 768px) 
    and (max-width: 1024px) 
    and (orientation: portrait) {
    
	html[data-useragent*='MOBILE_APP'] .mobile-navbar-flex-item .mobile-top-nav-logo{
		display: none;
	}

	html[data-useragent*='MOBILE_APP'] .app-navbar {
		box-shadow: none;
	}
  
  
}