/* Innobiz Pacific main style sheet
ibpstyle-02.css
KC 20190330
KC 20190722
*/

/* To be used with the var() property value */
:root {
  --ibp-map-color: #1d3c85;
  /* color hex notation with alpha channel does not work with Microsoft brownsers */
  /* var not working with MS IE but ok with MS Edge */
  /* --ibp-map-color-a: #1d3c8580; */
  --ibp-map-color-a: rgba(29, 60, 133, 0.5);
  --ibp-letter-color: #ed1c24;
  /* --ibp-letter-color-a: #ed1c2480; */
  --ibp-letter-color-a: rgba(237, 28, 36, 0.5);
}

body{
	color:#66FFFF;
	background-image: url('../images/work-731198-1920.jpg');
	background-size: cover;
	/*background-position:center center;*/
	background-repeat:no-repeat;
	background-attachment:fixed;
	margin: 0;
}

a{
	color: #66FF33;
}

a:hover{
	color: #FFFF00;
}

.topnav{
	overflow:hidden;
	background-color: var(--ibp-map-color-a);
	/*background-color: rgba(29, 60, 133, 0.5);*/
	/*background-color: rgba(0, 0, 255, 0.5);*/
	position: fixed;
  	top: 0;
  	width: 100%;
  	/* box-shadow: x y blur spread color */
  	box-shadow: 0 .2em .2em #666;
  	
}

/* 	"a>b" indicate parenthood of elements ie. b is an immediate child of a
	"a b" indicate ancestry of elements ie. b is a descentant of a, ie. can be several generation
 */
.topnav a{
	display:block;
	float:left;
	font-weight: bold;
	font-size: 1.1em;
	text-decoration: none;
	padding: 0.6em 0.8em;
}

.topnav a:hover{
	color: cyan;
	background-color:#cccccc99;
	transition: 0.8s;
}

.topnav .current{
	/*font-weight: bold;*/
	color: white;
	/*font-style: italic;*/
	background-color:var(--ibp-letter-color-a);
	/* background-color: rgba(237, 28, 36, 0.5); */
}

.topnav .icon{
	display: none;
}

#top-spacer{
	height: 3em;
}

/* For small mobile device */
@media only screen and (max-width: 768px){
	.topnav a:not(.current) {display: none;}
  	.topnav a.icon {
	    display: block;
		width: 2em;
		float: right;
		text-align: center;
		
	}
	
	.topnav.responsive {
		/* position: relative; */
		/* added KC 20190327 */
		position: fixed;
		top: 0;
		width: 100%;
  	}
  	
  	.topnav.responsive .icon {
	    position: absolute;
	    right: 0;
	    top: 0;
		text-align: center;
  	}
  	
  	.topnav.responsive a {
	    float: none;
	    display: block;
		text-align: left;
  	}
}

@media only screen and (max-width: 380px){
	body {
	    /*color:orange;*/
	    background-image:url('../images/computer-2846160-crop1-1920.jpg');
	    /*background-repeat:no-repeat;*/
  	}
  	  		
}