@charset "utf-8";
body {
	background-color: #F1FFFF;
	background-repeat: repeat;
	background-image: url(../images/background/triangles_pattern.png);
}

.nav-bg-blue   {
    background-color: #069;
    background-image: -webkit-linear-gradient(270deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%);
    padding: 0px 15px;
    background-image: linear-gradient(180deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%);
}
nal li.dropdown-menu {
}

nav li a:link      , nav li a:visited{
    border-left: 1px solid #0AE;
    border-right: 1px solid #037;
    border-bottom: 1px solid #037;
    border-top: 1px solid #0AE;
    color: #FFC;
    display: block;
    padding: 1rem;
}
nav li a:hover {
    background-image: -webkit-linear-gradient(90deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%);
    background-image: -moz-linear-gradient(90deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%);
    background-image: -o-linear-gradient(90deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%);
    background-image: linear-gradient(0deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%);
    color: #BEFBD8;
}

.row .navbar {
    margin: 0px;
}
header.row p {
    font-family: "微軟正黑體", "標楷體";
    font-weight: bold;
    text-align: center;
    text-shadow: 0px 3px 5px rgba(0,0,0,0.70);
    letter-spacing: 0.6em;
    color: pink;
    padding-left: 0.4em;
}
header.row {
	background-image: -webkit-linear-gradient(270deg,rgba(39,54,223,1.00) 0%,rgba(80,176,255,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(39,54,223,1.00) 0%,rgba(80,176,255,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(39,54,223,1.00) 0%,rgba(80,176,255,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(39,54,223,1.00) 0%,rgba(80,176,255,1.00) 100%);
	border-bottom: 2px solid #FFC;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	margin-bottom: -2px;

}


header h2 {
	font-family: "標楷體", "微軟正黑體";
	/* [disabled]font-weight: 300; */
	text-align: center;
	color: #FF002F;
	text-shadow: 0px 5px 5px rgba(0,0,0,0.40);
	margin-top: 22px;
}
.logowhite {
    color: #FFF;
}
footer {
	padding: 1em 0px;
	background-color: #090;
	color: #ffc;
	font-weight: normal;
	font-size: 0.8rem;
	background-image: -webkit-linear-gradient(90deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 100%);
	background-image: -moz-linear-gradient(90deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 100%);
	background-image: -o-linear-gradient(90deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 100%);
	background-image: linear-gradient(0deg,rgba(0,102,0,1.00) 0%,rgba(0,204,0,1.00) 100%);
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
}
article {
	font-style: 2em;
	padding: 20px 0px;
}
main.row {
	: 1px solid gray;
	border-right: 1px solid gray;
	border-left: 1px solid gray;
	margin-top: -1px;
	margin-bottom: -1px;
}
.pading10 {
	margin-top: 15px;
}
/* 
  Define this in your CSS 
  .ease-in-outTransition = Replace it by the name you want to give your transition
*/
.ease-in-outTransition {
	/*Add a property and value that you like to transition. Ex: width:200px;*/
	/* Chrome, Safari */
	-webkit-transition-property:border /*property*/;
	-webkit-transition-duration: 200ms;	/*Control the transition duration*/
	-webkit-transition-timing-function: ease-in-out;	/*Control the transitionfunction*/
	-webkit-transition-delay: 200ms;	/*Control the transition start delay*/
	/* Firefox */
	-moz-transition-property:border /*property*/;
	-moz-transition-duration: 200ms;
	-moz-transition-timing-function: ease-in-out;
	-moz-transition-delay: 200ms;
	/* Standard syntax */
	transition-property:border /*property*/;
	transition-duration: 200ms;
	transition-timing-function: ease-in-out;
	transition-delay: 200ms;
}
.row .card{
    box-shadow: 8px 8px 5px rgba(0, 0, 0, 0.5);
    border-radius: 10;
    -webkit-box-shadow: 8px 8px 5px rgba(0, 0, 0, 0.5);
}
/*Pick the action to trigger the animation - Ex: hover */
.ease-in-outTransition:hover {
	border: 5px solid blue;
}