@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;
	background-image: url(images/container_bg.gif);
	background-repeat: no-repeat;
}

    #container {
	background-color: #C8D9BC;/*#0FF*/
	width: 840px;
	margin-right: auto;
	margin-left: auto;
/*	position: relative;*/
/*	text-align: center;*/
/*	background-image: url(images/container_bg.gif);
/*	background-repeat: no-repeat;
	/*overflow: hidden;/*added to auto adjust sidebar to the bottom*/
}

#container-outer {
    width: 817px;/*817px-current*//*830px*//*lower number makes it smaller, higher number makes is bigger*/
    float:left;/*CONTENT*/
    overflow: hidden;
    background: #0FF;/*#eee*/
/*  border-style: solid;*/
/*  border-width: 20px;*/
/*  border-color: red;*/

}

#container-inner {
    float:left;/*SIDEBAR*/
    background: #C8D9BC;/*#555*/
    position: relative;
    left:563px;/*563px-current*//*576px*//*560px*//*75%*//*520px and 270px*//*previous value is 520px*//*higher number to right, lower number to the left*/
}



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;

}

#main {
	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;
	right: 545px;/*545px-current*//*550px*//*540px*/   /*75%*//*higher number moves the picture frame to the right*/
	width: 520px;
}

#sidebar {
    float: right;
/*    width: 25%; *//*25%*/
/*margin-left: 20px;*/
/*margin-right: 20px;*/
    position: relative;
    right: 505px;/*510px*/ /*75% or 520px*//*lower number moves the letters to the right*/
	width: 240px;/*270px*/
/*	border-left-:20px;*/
/*	border-left-width: 2px;*/
/*	border-left-style: solid;*/
/*	border-left-color: #060;*/
/*  border-style: solid;*/
/*  border-width: 2px;*/
/*  border-color: purple;*/
}

.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;}
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: #C8D9BC; height: 100%; opacity: 0; width: 100%; padding: 20px;}
/* [change the background color from white/ to gray/#C8D9BC#fff] */


/*= 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;
}