@import url("style.css");

	.img-apple {
		width: 130px;
		height: 40px;
	}
	.img-andriod {
		width: 130px;
		height: 40px;
	}
	.img-huawei {
		width: 130px;
		height: 40px;
	}
	
@media only screen and (min-width: 1200px)  {
	.slider-image {
		object-fit:unset;
	}

}
@media only screen and (min-width: 1200px) and (max-width: 1360px) {
	main.homepage  {
		margin-top: 60px;
	}

}
@media only screen and (min-width: 992px) and (max-width: 1250px) {
	.top-right-nav .nav-item .nav-link {
	    padding: .5rem .2rem; 
	    font-size:0.9rem;
	}	

}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	main {
		margin-top: 20px;
	}
	main.homepage  {
		margin-top: 70px;
	}
	#homepageSlider .carousel-caption h3 {
		padding: 0.7rem;
		border-left: 7px solid #C5D44D;
		font-size: 1.7rem;
		text-transform: none !important;
	}
	#homepageSlider .carousel-text {
		margin: 0 2rem 0 5rem;
	}
	#homepageSlider .carousel-text h5 {
		font-size: 0.8rem;
	}
	#homepageSlider .carousel-text p {
		font-size: 0.9rem;
	}
	.slider-image {
		/*height:500px;*/
		margin-top: 0%;
    	max-width: 100%;
    	height: auto;
	}
	.btn-outline-belizehole {
		color: #1879B9;
		border-color: #1879B9;	
/* 		padding: 0.2rem 1.25rem;
		font-size:0.7rem; */
	}
	.carousel-indicators {
		bottom: 2%;
		left: -35%;
	}
	.img-thumb {
		display: block !important;
		vertical-align: middle;
		z-index: 1;
		height:75px;
		width:120px;
	}	
	.bg-style3 {
		background-image: url(../images/Artwork-BG_Pattern_2.png),url(../images/), linear-gradient(180deg, #fff 35%, #1879B9 35%, #184968 90%) ;
		background-repeat:  no-repeat, no-repeat, no-repeat;  
		background-position:  80% -18%,  90% 100%, 50% 50%;  
		background-size:50%, 55%, 100%;
	}

}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	main {
		margin-top: 30px;
	}
	main.homepage  {
		margin-top: 58px;
	}
	#homepageSlider .carousel-caption h3 {
		padding: 0.7rem;
		border-left: 7px solid #C5D44D;
		font-size: 1.5rem;
		text-transform: none !important;
	}
	#homepageSlider .carousel-text {
		margin: 0 1rem 0 3.5rem;
	}
	#homepageSlider .carousel-text h5 {
		font-size: 0.6rem;
	}
	#homepageSlider .carousel-text p {
		font-size: 0.8rem;
	}
	.slider-image {
		/*height:460px;*/
		margin-top: 0%;
    	max-width: 100%;
    	height: auto;
	}
	.btn-outline-belizehole {
		color: #1879B9;
		border-color: #1879B9;
		/*
		padding: 0.2rem 1rem;
    	font-size: 0.85rem;*/
	}	
	#homepageSlider .carousel-indicators {
		bottom: 0%;
		left: -35%;
	}
	.img-thumb {
		display: block !important;
		vertical-align: middle;
		z-index: 1;
		height:60px;
		width:100px;
	}	
	

	.bg-style3 {
		background-image: url(../images/Artwork-BG_Pattern_2.png),url(../images/), linear-gradient(180deg, #fff 35%, #1879B9 35%, #184968 90%) ;
		background-repeat:  no-repeat, no-repeat, no-repeat;  
		background-position:  80% -12%,  98% 100%, 50% 50%;  
		background-size:50%, 58%, 100%;
	}
	.mobile-app-text {
		font-size: small;
		margin-top: 3rem;
	}
	h1.title {
		font-size:1.9rem;
	}
	
	.top-right-nav .nav-item .nav-link {
	    padding: .5rem .2rem; 
	    font-size: 0.77rem;
	}
	
	.top-nav-bar .nav-link, .dropdown-item {
		font-size: 0.77rem;
	}

	header {
		font-size: 0.9rem;
	}
	.navbar {
		padding: .25rem;
	}
	ul.navbar-nav li.nav-item {
	    padding-left: 5px;
	}
	footer h6 {
		font-size:0.8rem;
	}
}

@media only screen and (min-width: 500px) and (max-width: 767px) {
	main {
		margin-top: 30px;
	}
	#homepageSlider .carousel-caption h3 {
		padding: 0.5rem;
		border-left: 10px solid #C5D44D;
		font-size: 1.5rem;
		text-transform: none !important;
	}
	#homepageSlider .carousel-text {
		margin: 0 1.3rem;
	}

	#homepageSlider .carousel-text h5 {
		font-size: 0.8rem;
		text-shadow: 0 0 3px #000000;
		color:#fff;
	}
	#homepageSlider .carousel-text p {
		font-size: 0.9rem;
		color:#fff;
		margin-bottom: 0.2rem;
	}

	.btn-outline-belizehole {
		color: #1879B9;
		border-color: #1879B9;
		padding: 0.3rem 1.5rem;
		font-size:0.9rem;
		
	}	
	#homepageSlider .carousel-indicators {
		bottom: 0%;
		left: -35%;
	}
	.img-thumb {
		display: block !important;
		vertical-align: middle;
		z-index: 1;
		height:50px;
		width:80px;
	}		
	.slider-image {
		/*width: 100%;*/
		/*height:500px;*/
		margin-top: 4%;
    	max-width: 100%;
    	height: auto;
	}
	#homepageSlider .carousel-indicators li.active img {
		border: 4px solid #c5d44d;
	}
	#homepageSlider .carousel-caption {
		position: absolute;
		right: 0%;
		top: 45%;
		left: 20%;
		z-index: 10;
		padding:0;
		text-align: left;
		color:inherit;
	}

	.bg-style3 {
		background-image: url(../images/Artwork-BG_Pattern_2.png), linear-gradient(180deg, rgba(255,255,255,0) 56%, #1879B9 56%, #184968 90%),url(../images/Artwork-AppPreview-Mobile@2x.png) ;
		background-repeat:  no-repeat, no-repeat, no-repeat;  
		background-position:  80% -30%,   50% 50%, 110% 10%;  
		background-size:50%, 100%, 55%;
	}
	.mobile-app-text {
		font-size: small;
		margin-top: 17rem;
	}
	.tab-content {
		padding: 30px;
	}
	
	h1.title {
		font-size:1.9rem;
	}
	
}
@media only screen and (max-width: 499px) {
	#homepageSlider .carousel-caption h3 {
		padding: 0.7rem;
		border-left: 10px solid #C5D44D;
		font-size: 1.1rem;
		text-transform: none !important;
	}
	#homepageSlider .carousel-text {
		margin: 0 1.2rem;			
	}
	#homepageSlider .carousel-text h5 {
		font-size: 0.65rem;
		text-shadow: 0 0 3px #000000;
		color:#fff;
	}
	#homepageSlider .carousel-text p {
		font-size: 0.7rem;
		color:#fff;
	}
	.btn-outline-belizehole {
		margin:0;
		color:#1879B9;
		border-color: #1879B9;
		padding: 0.25rem 1rem;
		font-size:0.85rem;
	}	
	#homepageSlider .carousel-caption {
		position: absolute;
		right: 0%;
		top: 30%;
		left: 20%;
		z-index: 10;
		padding:0;
		text-align: left;
		color:inherit;
	}
	
	img.brand-logo {
		width:50px;
	}
	.brand-label {
		font-size: 0.75rem;
		margin: 5px 0;
	}
	.slider-image {
		/*width:200%;
		height:350px;*/
		margin-top: 3%;
   	 	max-width: 100%;
   	 	height: auto;
	}
	
	#homepageSlider .carousel-indicators {
		bottom: 2%;
		left: 0%;
	}
	.img-thumb {
		display: block !important;
		vertical-align: middle;
		z-index: 1;
		height:60px;
		width:100px;
	}	
	#homepageSlider .carousel-indicators li.active img {
		border: 4px solid #c5d44d;
	}
	#homepageSlider .carousel-indicators li.optional {
		display: none;
	}


	.bg-style3 {
		background-image: url(../images/Artwork-BG_Pattern_2.png), linear-gradient(180deg, rgba(255,255,255,0) 56%, #1879B9 56%, #184968 90%),url(../images/Artwork-AppPreview-Mobile@2x.png) ;
		background-repeat:  no-repeat, no-repeat, no-repeat;  
		background-position:  80% -30%,   50% 50%, 110% 30%;  
		background-size:50%, 100%, 75%;
	}
	.mobile-app-text {
		font-size: small;
		margin-top: 20rem;
	}
	h1.title {
		font-size: 2rem;
	}
	.tab-content {
		padding: 30px;
	}
	
	.navbar {
		padding: .5rem 0.25rem;
	}

	.bg-general {
		padding-top: 20px;
	}	
	
	.signup-jumbotron {
    	padding: 2rem 1rem;
	}
}
@media only screen and (max-width: 330px) {

	.bg-general {
		padding-top: 20px;
	}	
	
	img.brand-logo {
		width:40px;
	}
	.navbar {
		padding: .5rem 0.25rem;
	}
	.slider-image {
		/*width:200%;
		height:350px;*/
		margin-top: 3%;
    	max-width: 100%;
    	height: auto;
	}
	#homepageSlider .carousel-text p {
	    font-size: 0.6rem;
	    color: #fff;
	}
}
@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .nav-link{ color: #fff;  }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
	

}	

/* Change the autofill background color */
/* Not working in Safari */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
input:-internal-autofill-previewed,
input:-internal-autofill-previewed:hover, 
input:-internal-autofill-previewed:focus, 
input:-internal-autofill-previewed:active,
input:-internal-autofill-selected,
input:-internal-autofill-selected:hover, 
input:-internal-autofill-selected:focus, 
input:-internal-autofill-selected:active  {
	/* For Chrome */
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    /* Safari */
	box-shadow: 0 0 0 30px white inset !important;
	-webkit-text-fill-color: #333;
}

input {
    /* For FireFox */
    filter: none !important;
}

@media only screen and (min-width: 1200px) and (max-width: 1350px)  {
	#hksar_text {
		display:none !important;
	}
	

}

/*html {
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(100%);
}*/