/* ==========================================================================
   General styles
   ========================================================================== */
   
body,
html {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "微軟正黑體", Helvetica, sans-serif;
  background: #333 url(../img/bg.jpg) center center no-repeat fixed;
  -webkit-background-size: cover;
  background-size: cover;
  color: #fff;
  font-weight: 300;
}

a:hover { text-decoration: none; }

img { max-width: 100%; }

/* ==========================================================================
   Progress bar
   ========================================================================== */
   
.progress {
  overflow: hidden;
  margin-bottom: 0;
  background-color: transparent;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.progress-bar {
  background-color: #7ec0ee;
  color: rgba(255, 255, 255, 0.67);
  text-align: center;
  padding-right: 2em;
}

/* ==========================================================================
   animation
   ========================================================================== */

.animation-container {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: hidden;
  z-index: -100;
  width: 100%;
}

.clouds {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background: transparent url(../img/clouds.png) repeat-x 50% 50%;
  -webkit-background-size: cover;
  background-size: cover;
  -webkit-animation: clouds 100s linear 0s infinite both;
  -moz-animation: clouds 100s linear 0s infinite both;
  -o-animation: clouds 100s linear 0s infinite both;
  animation: clouds 100s linear 0s infinite both;
}
 @-webkit-keyframes clouds {
 from {
 background-position: 0 50%, 50% 50%;
}
 to {
 background-position: -150em 50%, 50% 50%;
}
}
 @-moz-keyframes clouds {
 from {
 background-position: 0 50%, 50% 50%;
}
 to {
 background-position: -150em 50%, 50% 50%;
}
}
@-o-keyframes clouds {
 from {
 background-position: 0 50%, 50% 50%;
}
 to {
 background-position: -150em 50%, 50% 50%;
}
}
 @keyframes clouds {
 from {
 background-position: 0 50%, 50% 50%;
}
 to {
 background-position: -150em 50%, 50% 50%;
}
}

/* ==========================================================================
   Top Header styles
   ========================================================================== */
   

.top-header { margin: 3em 0 1.5em; }

.top-header h1 {
  font-size: 2.618em;
  font-weight: 400;
}

/* ==========================================================================
   social media styles
   ========================================================================== */
   .duhtop {
   margin-top:5%;
   }
   
   
   .duhtopback {
   margin-top:-15%;
   }
   
   .duhtop1 {
   margin-top:-5%;
   }
   
   .website {
   margin:10px;
	-moz-box-shadow:inset 0px 0px 1px 0px #bbdaf7;
	-webkit-box-shadow:inset 0px 0px 1px 0px #bbdaf7;
	box-shadow:inset 0px 0px 1px 0px #bbdaf7;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
	background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
	background-color:#79bbff;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	text-indent:0px;
	border:1px solid #84bbf3;
	display:inline-block;
	color:#ffffff;
	font-family:Trebuchet MS;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:42px;
	line-height:42px;
	width:200px;
	text-decoration:none;
	text-align:center;
	text-shadow:2px 2px 0px #528ecc;
}
.website:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
	background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
	background-color:#378de5;
}.website:active {
	position:relative;
	top:1px;
}
   
   
   
.social { padding-bottom: 3em; }

.social p {
  font-size: 1.5em;
  color: #bbb;
}

.social-icons {
  list-style: none;
  padding-left: 0;
}

.social-icons li {
  display: inline-block;
  padding-right: 1em;
}

.social-icons li:last-child { padding-right: 0; }

.social-icons a { color: #7ec0ee; }

.social-icons a:hover { color: #6499be; }

.fa-2x { font-size: 1.5em; }

/* ==========================================================================
   Small devices (tablets, 768px and up)
   ========================================================================== */

@media (min-width: 768px) {

.top-header { margin: 7.5em 0 1.5em; }

.top-header h1 {
  font-size: 3.236em;
  font-weight: 700;
  text-transform: uppercase;
}
}

/* ==========================================================================
   Medium devices (desktops, 992px and up)
   ========================================================================== */

@media (min-width: 992px) {

.top-header { margin: 13.5em 0 3em; }

.top-header h1 { font-size: 4.236em; }
}