@charset "utf-8";

html, div, h3, p, ul, li, img {
	margin: 0;
	padding: 0;
}

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

body {
	background: #3333FF;/*#969fab*/
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: small;
	color: #00F;
	background-color: #3333FF;
	text-align: center;
	margin-top: 8px;/* added to put margin on top and bottom*/
	margin-bottom: 8px;/*added to put margin on top and bottom*/
/* "Trebuchet MS", Arial, Helvetica, sans-serif; */
}

.container2 {
/*	width: 840px;*/
/*	margin: 30px auto 0;*/
	background-color: #0FF;
	width: 840px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	text-align: center;
/*	border-style: solid;*/
/*    border-width: 5px;*/
/*    border-color: yellow;*/
/*	background-image: url(images/container_bg.gif);*/
/*	background-repeat: no-repeat;*/
}

header {
/*	background: #42517f;*/
/*	border-bottom: 0px solid #000;*/
}

header h3 {
	color: #fff;
	text-align: center;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 16px;
	word-spacing: 1px;
	text-shadow: 1px 1px 2px #000;
}

#header {
	height: auto;
	z-index: auto;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-position: right;

}

#content {
	background: #0FF;/*#848c9c;*/
	background: linear-gradient (to top, #848c9c 0%, #687090 50%, #a7b1c5 100%);
	background: -webkit-linear-gradient (bottom, #848c9c 0%, #687090 50%, #a7b1c5 100%);
	padding-top: 0px;/*Previous value is 30px - change spacing between title and pictures*/
	padding-bottom: 30px;
	overflow: hidden;
}


.gallery {
	width: 660px;/*528px*/
	margin: auto; 

}

.gallery ul {
	list-style: none; 
}

.gallery li {
	float: left;
	margin: 10px;
}

.gallery img {
	display: block;
	padding: 5px;
	background-color: #42517f;
	border: 1px solid #99adeb;
	box-shadow: 1px 1px 2px #000;
}

.gallery img:hover {
	border: 1px solid #fff;
}
/* [///////////////////// start of insert for the entire sidebar picture ////////////////////////] */

/*= Reset CSS 
============= */
/**{margin: 0; padding: 0; box-sizing: border-box;} /* Remove to align the keep the gallery settings intact*/
/*html, {border: 0; margin: 0; padding: 0;}/* The body was taken out to put margin on the top and bottom*/
img{max-width: 100%; vertical-align: middle;}

.text-desc{position: absolute; left: 0; top: 0; background-color: #fff; height: 100%; opacity: 0; width: 100%; padding: 20px;}
/*= Reset CSS End
================= */

/* effect-1 css */
.port-1{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9);}
.port-1 .text-desc{opacity: 0.9; top: -100%; transition: 0.5s; color: #000; padding: 45px 20px 20px;}
.port-1 img{transition: 0.5s;}
.port-1:hover img{transform: scale(1.2);}

.port-1.effect-3 .text-desc{top: 50%; left: 50%; width: 0; height: 0; overflow: hidden; padding: 0;}
.port-1.effect-3:hover .text-desc{width: 100%; top: 0; left: 0; height: 100%; padding: 45px 20px 20px;}
/* effect-1 css end */

/* effect-2 css */
.port-2{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); perspective: 800px;}
.port-2 .text-desc{z-index: -1; transition: 0.6s;}
.port-2 .image-box{transition: 0.4s;}
.port-2:hover .image-box{transform: rotateX(80deg); transform-origin: center bottom 0; transition: 0.4s;}

.port-2.effect-2 .text-desc{opacity: 1; top: -100%;}
.port-2.effect-2:hover .text-desc{top: 0;}
/* effect-2 css end */

/* effect-3 css */
.port-3{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); perspective: 500px;}
.port-3 img{transition: 0.5s;}

.port-3.effect-2 .text-desc{z-index: -1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center bottom 0; top: auto; bottom: 0; padding: 45px 20px 20px;}
.port-3.effect-2:hover .text-desc{transform: none; opacity: 1;}
.port-3.effect-2:hover img{transform: translateY(-100%)}

.port-3{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); perspective: 500px;}
.port-3 img{transition: 0.5s;}

.port-3.effect-3 .text-desc{z-index: -1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center top 0; padding: 45px 20px 20px;}
.port-3.effect-3:hover .text-desc{transform: none; opacity: 1;}
.port-3.effect-3:hover img{transform: translateY(100%)}
/* effect-3 css end */

/* effect-4 css */
.port-4{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); z-index: 10;}

.port-4.effect-2{z-index: 12;}
.port-4.effect-2 img{transition: 0.5s; transform: rotateX(360deg) scale(1, 1);}
.port-4.effect-2 .text-desc{transform: rotateX(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 45px 20px 20px;}
.port-4.effect-2:hover .text-desc{transform: rotateX(360deg) scale(1, 1);  opacity: 1;}
.port-4.effect-2:hover img{transform: rotateX(0deg) scale(0, 0);}
/* effect-4 css end */

/* [//////////////// end of insert for the entire sidebar picture ///////////////////] */

footer {
	background: #222222;
}

footer p {
	color: #fff;
	text-align: center;
	font-size: 11px;
	padding-top: 2px;
	padding-bottom: 2px;
}

html {
/*This command put a scroll bar on all the pages, so that the webpages will not shift, right-to-left, or left-to-right depending on how much contents in the webpage.*/
	overflow:scroll;
}