/*
	Theme Name: Portal Theme v1.0
	Author: JM Crisostomo
	Author URI: jmcrisostomo.github.io
	Description: This is a css core of the theme.
	Keywords: portal, css, stuff

*/
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans');

html, body {
	height: 100%;
	width: 100%;
	font-family: 'Lato', 'Roboto', sans-serif !important;;
}

a { text-decoration: none !important;  }

.bg-portal {
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: -1;
	background-color: rgba(0,0,0,0.8);
	background-blend-mode: overlay;
	/*background-image: url('photo-1507446933-4847a1d12823.jpg');*/
	background-image: url('WEBSITEPAGEDESIGN_reduced.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
}

/* Ripple effect */
/*.ripple {
  background-position: center;
  transition: background 0.8s;
}
.ripple:hover {
  background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}

.ripple:active {
  background-color: #6eb9f7;
  background-size: 100%;
  transition: background 0s;
}*/


/*brand*/
.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: relative;
}

.navbar-brand > img {	height: 100px;	}

.placeholder {
	top: 50%;
	transform: translate(0%, -50%);
	position: relative;
	margin-bottom: 25px;
}

.content-tile {
	/*min-width: 300px;*/
	/*background: #FAFAFA;*/
	/*left: 50%;*/
    /*transform: translate(-50%);*/
    margin: 0 auto;
	height: 225px;
	/*max-width: 450px;*/
	width: 100% ;
	/*border: 1px solid #000;*/
	/*position: absolute;
	top: 50%;
	transform: translate(0%, -50%);*/
	-webkit-transition: all 150ms ease-out;
	   -moz-transition: all 150ms ease-out;
		-ms-transition: all 150ms ease-out;
		 -o-transition: all 150ms ease-out;
			transition: all 150ms ease-out;
}
.content-tile:hover {
	-webkit-transition: all 150ms ease-in;
	   -moz-transition: all 150ms ease-in;
		-ms-transition: all 150ms ease-in;
		 -o-transition: all 150ms ease-in;
			transition: all 150ms ease-in;
	/*-webkit-box-shadow: 5px 5px 25px 3px rgba(0,0,0,0.3);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	/*-moz-box-shadow:    5px 5px 25px 3px rgba(0,0,0,0.3);  /* Firefox 3.5 - 3.6 */
	/*box-shadow:         5px 5px 25px 3px rgba(0,0,0,0.3);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
	filter: brightness(110%);
}

.content-tile > .content-tile-inner {
	/*position: relative;*/
	top: 50%;
	transform: translate(0%, 50%);
}
.content-tile > .content-tile-inner > p{
	position: relative;
	/*top: 50%;*/
	text-align: center;
	font-size: 26px;
	bottom: 30px;
	/*color: #000;*/
	/*text-decoration: none;*/
}
.content-tile > .content-tile-inner > img {
	position: relative;
	/*width: 25%;*/
	width: 100px;
	-webkit-transition: all 150ms ease-out;
	   -moz-transition: all 150ms ease-out;
		-ms-transition: all 150ms ease-out;
		 -o-transition: all 150ms ease-out;
			transition: all 150ms ease-out;
}
.content-tile:hover > .content-tile-inner > img {
	width: 118px;
	-webkit-transition: all 150ms ease-in;
	   -moz-transition: all 150ms ease-in;
		-ms-transition: all 150ms ease-in;
		 -o-transition: all 150ms ease-in;
			transition: all 150ms ease-in;
}

.img-pick {
	top: 50%;
	left: 52%;
	transform: translate(-50%, -30%);
}
.img-ship {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -30%);
}
.img-cheque {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -30%);
}

.img-alley {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -30%);
}

.img-asset {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -30%);
}

.img-ticket {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -30%);
}

/*mobile*/
@media only screen and (max-device-width:480px){
   .placeholder {
		top: 50%;
	}
	.content-tile {
		height: 150px;
	}
	.content-tile > .content-tile-inner > img {
		position: relative;
		width: 18%;
		-webkit-transition: all 150ms ease-out;
		   -moz-transition: all 150ms ease-out;
			-ms-transition: all 150ms ease-out;
			 -o-transition: all 150ms ease-out;
				transition: all 150ms ease-out;
	}
	.content-tile:hover > .content-tile-inner > img {
		width: 20%;
		-webkit-transition: all 150ms ease-in;
		   -moz-transition: all 150ms ease-in;
			-ms-transition: all 150ms ease-in;
			 -o-transition: all 150ms ease-in;
				transition: all 150ms ease-in;
	}
	.content-tile > .content-tile-inner > p{
		position: relative;
		text-align: center;
		font-size: 26px;
		bottom: 24px;
	}
}

/*ipad tablets*/
@media only screen and (device-width:768px){
	.content-tile > .content-tile-inner > img {
		position: relative;
		width: 100px;
		-webkit-transition: all 150ms ease-out;
		   -moz-transition: all 150ms ease-out;
			-ms-transition: all 150ms ease-out;
			 -o-transition: all 150ms ease-out;
				transition: all 150ms ease-out;
	}
	.content-tile:hover > .content-tile-inner > img {
		width: 105px;
		-webkit-transition: all 150ms ease-in;
		   -moz-transition: all 150ms ease-in;
			-ms-transition: all 150ms ease-in;
			 -o-transition: all 150ms ease-in;
				transition: all 150ms ease-in;
	}
	.content-tile > .content-tile-inner > p{
		position: relative;
		text-align: center;
		font-size: 26px;
		bottom: 30px;
	}
}

/*box screens*/
@media only screen and (device-width:1024px){
	.content-tile > .content-tile-inner > img {
		position: relative;
		width: 100px;
		-webkit-transition: all 150ms ease-out;
		   -moz-transition: all 150ms ease-out;
			-ms-transition: all 150ms ease-out;
			 -o-transition: all 150ms ease-out;
				transition: all 150ms ease-out;
	}
	.content-tile:hover > .content-tile-inner > img {
		width: 105px;
		-webkit-transition: all 150ms ease-in;
		   -moz-transition: all 150ms ease-in;
			-ms-transition: all 150ms ease-in;
			 -o-transition: all 150ms ease-in;
				transition: all 150ms ease-in;
	}
	.content-tile > .content-tile-inner > p{
		position: relative;
		text-align: center;
		font-size: 26px;
		bottom: 36px;
	}
}



/* colors */
.tile-blue {
	color: #fff;
	/*background-color: rgba(33,150,243,0.8);*/
	background-image: linear-gradient(-225deg, rgba(33,150,243,0.8), rgba(100,181,246 ,0.8));
}
.tile-red {
	color: #fff;
	/*background-color: rgba(244,67,54,0.8);*/
	background-image: linear-gradient(-225deg, rgba(244,67,54,0.8), rgba(229,115,115 ,1));
}
.tile-teal {
	color: #fff;
	/*background-color: rgba(0,150,136,0.8);*/
	background-image: linear-gradient(-225deg, rgba(0,150,136,0.8), rgba(77,182,172 ,0.8));
}
.tile-green {
	color: #fff;
	/*background-color: rgba(76,175,80,0.8);*/
	background-image: linear-gradient(-225deg, rgba(76,175,80,0.8), rgba(129,199,132 ,0.8));
}
.tile-orange {
	color: #fff;
	/*background-color: rgba(255,152,0,0.8);*/
	background-image: linear-gradient(-225deg, rgba(255,152,0,0.8), rgba(255,183,77 ,0.8));
}

.tile-dark-slate-gray {
	color: #fff;
	background-image: linear-gradient(-225deg, rgba(58, 67, 104, 0.8), rgba(135,144,181 ,0.8));
}
.tile-rosy-brown {
	color: #fff;
	background-image: linear-gradient(-225deg, rgba(164, 92, 108, 0.8), rgba(215, 143, 159, 0.8));
}
.tile-silver {
	color: #fff;
	background-image: linear-gradient(-225deg, rgba(194, 185, 174, 0.8), rgba(220, 211, 200, 0.8));
}
.tile-gray {
	color: #fff;
	background-image: linear-gradient(-225deg, rgba(128, 119, 109, 0.8), rgba(179, 170, 160, 0.8));
}

.tile-pew-blue {
	color: #fff;
	background-image: linear-gradient(-225deg, rgba(138, 185, 181, 0.8), rgba(138, 185, 181, 0.8));
}

/* Mobile Responsiveness Cheatsheet
by: JM Crisostomo

@media only screen and (min-width:960px){
	/ * styles for browsers larger than 960px; * /
}
@media only screen and (min-width:1440px){
	/ * styles for browsers larger than 1440px; * /
}
@media only screen and (min-width:2000px){
	/ * for sumo sized (mac) screens * /
}
@media only screen and (max-device-width:480px){
   / * styles for mobile browsers smaller than 480px; (iPhone) * /
}
@media only screen and (device-width:768px){
   / * default iPad screens * /
}
/ * different techniques for iPad screening * /
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  / * For portrait layouts only * /
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  / * For landscape layouts only * /
}

*/