/* =================================================
					Sticky footer
================================================= */
html {
	position: relative;
	min-height: 100%;
}

body {
	/* Margin bottom by footer height */
	min-height: 100%;
	background-color: #373839;
	color: #ffffff;
	/*	margin-bottom: 53px; */
}

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 53px;
	background-color: #373839;
	z-index: 100;
	text-align: center;
}

/* =================================================
					Navbar Style
================================================= */
.navbar-default {
	z-index: 100;
}

.navbar-brand {
	padding: 15px 5px;
	font-size: 1em;
	font-weight: bold;
	cursor: pointer;
}

.navbar-default .navbar-link {
	padding: 15px 5px;
	cursor: pointer;
}

.navbar-default .navbar-divider {
	padding: 15px 5px;
}

.navbar-default .navbar-link.is-active {
	background-color: #373839;
}

.dropdown-menu li a,img{
	cursor: pointer;
}

/* =================================================
			Left-float Navbar Toggle
================================================= */

@media (max-width:1330px) {
	.custom-navbar .navbar-toggle {
			float: left
	}
	.custom-navbar .navbar-header {
			float: left;
			width: auto !important;
	}
	.custom-navbar .navbar-collapse {
			clear: both;
			float: none;
	}
}

/* =================================================
					Slide Menu
================================================= */

/**
 * Menu overview.
 */
.menu {
	position: fixed;
	z-index: 200;
	background-color: #373839;
	transition: transform 0.3s;

	width: 100%;
	height: 100%;
	overflow-y: scroll;
	border-right: solid 1px #616263;

	top: 0;
	left: 0;
	transform: translateX(-100%);

	-webkit-overflow-scrolling: touch;
}

@media all and (min-width: 220px) {
	.menu {
		width: 200px;
	}
}

.menu_items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu_icon {
	height: 22px;
}

.menu .menu_header {
	display: block;
	padding: 12px 24px;
	text-align: left;
	color: #3A9AEE;
	font-weight: bold;
	border-top: solid 1px #616263;
}

.menu .menu_item:first-child {
	border-top: none;
}

.menu .menu_item:last-child {
	border-bottom: solid 1px #616263;
}

.menu .menu_item {
	display: block;
	padding: 12px 24px;
	text-align: left;
	color: #ffffff;
	font-weight: normal;
	border-top: solid 1px #616263;
	cursor: pointer;
}

@media all and (min-width: 320px) {
	.menu {
		transform: translateX(-300px);
	}
}

.menu.is-active {
	transform: translateX(0);
}

.googleplay_badge {
	width: 150px;
	cursor: pointer;
}

/**
 * Body states.
 *
 * When a menu is active, we want to hide the overflows on the body to prevent
 * awkward document scrolling.
 */
body.has-active-menu {
	overflow: hidden;
}

/**
 * Mask component
 */

.mask {
	position: fixed;
	z-index: 159;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 0;
	height: 0;
	background-color: #000;
	opacity: 0;
	transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;
}

.mask.is-active {
	width: 100%;
	height: 100%;
	opacity: 0.7;
	transition: opacity 0.3s;
}

/* Hide slide menu scroll bar */
::-webkit-scrollbar { 
		display: none; 
}

/* =================================================
					Main Container
================================================= */
#main_container {
	position: absolute;
	top: 53px;
	bottom: 0px;
	width: 100%;
	z-index: 50;
	overflow: scroll;

	-webkit-overflow-scrolling: touch;
}


/* =================================================
					Grid border
================================================= */

/* General */
div.grid {
	border-bottom: 1px solid #ffffff;
	border-right:	1px solid #ffffff;
}

/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {

	div.grid:nth-child(-n+2) {
		border-top: 1px solid #ffffff;
	}

	div.grid:nth-child(2n+1) {
		border-left: 1px solid #ffffff;
	}
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {

	div.grid:nth-child(-n+3) {
		border-top: 1px solid #ffffff;
	}

	div.grid:nth-child(3n+1) {
		border-left: 1px solid #ffffff;
	}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	div.grid:nth-child(-n+4) {
		border-top: 1px solid #ffffff;
	}

	div.grid:nth-child(4n+1) {
		border-left: 1px solid #ffffff;
	} 
}

/* =================================================
					Popup
================================================= */

div.popup {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	overflow: hidden;

	background-color: rgba(0, 0, 0, 0.7);
	transition: opacity 0.1s, width 0s 0.1s, height 0s 0.1s;
}

div.popup.is-active {
	width: 100%;
	height: 100%;
	transition: opacity 0.1s;
}

div.popup_inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;

	font-size: 1.2em;
	font-weight: bold;
	letter-spacing: 1.5px;
}

img.popup_image {
	max-width: 100%;
}

img.popup_icon {
	width: 50px;
}

img.popup_icon_small {
	height: 30px;
}

.close {
	text-decoration: underline;
	font-size: 0.7em;
	cursor: pointer;
	letter-spacing: 0px;
}

/* =================================================
				Cam Image List
================================================= */
img.cam {
	padding: 0px;
	position: relative;
	float: left;

	width: 100%;
}

.cam_text {
	margin: 0px;
}

/* =================================================
				Loading Div
================================================= */

div.loading {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	overflow: hidden;

	background-color: rgba(0, 0, 0, 0.7);
	transition: opacity 0.1s, width 0s 0.1s, height 0s 0.1s;
}

div.loading_text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	font-size: 1.5em;
	font-weight: bold;
}

div.loading.is-active {
	width: 100%;
	height: 100%;
	transition: opacity 0.1s;
}

/*
.ads {
	width: 320px;
	height: 50px;
}

@media(min-width: 729px) {
	.ads {
		width: 728px;
		height: 90px;
	}

	body {
		margin-bottom: 93px;
	}

	.footer {
		height: 93px;
	}

	#main_container {
		bottom: 93px;
	}
}

@media(min-width: 971px) {
	.ads {
		width: 970px;
		height: 90px;
	}
}

*/

.btn {
	letter-spacing: 0px;
}

.legal_attr_outer {
	position: absolute;
	text-align: right;
	width: 100%;
	bottom: 0;
	font-size: 0.8em;
}

/*==================================*/

.store_logo{
	width: 20%;
	min-width: 250px;
	height: auto;
}

.header_section_banner{
	margin-top: 13%;
	width: 35%;
	min-width: 300px
}

.header_section_logo{
	width: 10%;
	min-width: 100px
}

.center_crop_image_container {
    position: absolute; 
  	top: -50%; 
  	left: -50%; 
  	width: 200%; 
  	height: 200%;
}

.center_crop_image {
	position: absolute; 
  	top: 0; 
  	left: 0; 
  	right: 0; 
  	bottom: 0; 
 	margin: auto; 
  	min-width: 50%;
 	min-height: 50%;
}

.header_section_left{
	text-align: center;
	height: 100%;
}

.section_intro_title{
	text-align: center;
	color: #FFFFFF;
	font-size: 4vh;
	font-weight: bold;
}

.section_intro_desc{
	width: 70%;
	color: #FFFFFF;
	font-size: 3vh;
	position:relative;
	left:15%;
	font-weight: bold;
	text-align: justify;
}