/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
html {
  overflow-x: hidden;
}

body {
	font-family: "微軟正黑體", "Roboto", sans-serif;
	color: #9fa1a4;
	line-height: 1.5;
}

a {
  color: #777;
  text-decoration: none;
  transition: .3s all ease;
}

a:hover {
  color: #000;
}

h1, h2, h3, h4, h5, h6, .font-heading {
	font-family: "微軟正黑體", "Poppins", sans-serif;
	color: #000;
}

.container {
  z-index: 2;
  position: relative;
}
@media screen and (max-width: 575px) {
	.container { max-width:96vw; }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
	.container { max-width:94vw; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.container { max-width:92vw; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.container { max-width:90vw; }
}
@media screen and (min-width: 1200px) {
	.container { max-width:80vw; }
}

.text-black {
  color: #000 !important;
}

.text-primary {
  color: #339999 !important;
}
.text-secondary {	color:#666 !important ; }
.font-weight-bold	{	font-weight: 600; }
.font-weight-light	{	font-weight: 100; }

.border-top {
  border-top: 1px solid #f2f2f2 !important;
}

.border-bottom {
  border-bottom: 1px solid #f2f2f2 !important;
}

figure figcaption {
  margin-top: .5rem;
  font-style: italic;
  font-size: .8rem;
}

section {
  overflow: hidden;
}

.section {
  padding: 5rem 0;
}

.section-heading {
	font-size: 2rem;
	font-weight: 700;
	background: linear-gradient(-45deg, rgba(51,153,153,0.8) 0%, rgba(51,102,102,0.75) 100%) ;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	right: 30px;
	bottom: 30px;
	z-index: 996;
	background: rgba(51,153,153,0.5) ;
	width: 60px;
	height: 60px;
	border-radius: 50px;
	transition: all 0.4s;
}

.back-to-top i {
	font-size: 36px;
	color: #fff;
	line-height: 0;
}
.back-to-top i:hover {
	color: #000;
}
.back-to-top:hover {
	background: rgba(102,204,204,1) ;
}
.back-to-top.active {
	visibility: visible; opacity: 1;
}

/* Default btn sre-tyling */
/*
.btn {
  border: none;
  padding: 15px 30px !important;
}
*/


.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn.btn-outline-white {
  border: 2px solid #fff;
  background: none;
  color: #fff;
}

.btn.btn-outline-white:hover {
  background: #fff;
  color: #339999;
}

.btn.btn-primary {
	background: #339999;
	background: linear-gradient(-45deg, #1391a5, #274685);
	color: #fff;
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn:hover {
  color: #212529;
  text-decoration: none;
}

.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: none;
}

.btn.disabled, .btn:disabled {
  opacity: 0.50;
  box-shadow: none;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active {
  box-shadow: none;
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  box-shadow: none;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
  box-shadow: 0 0 0 0 rgba(38, 143, 255, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(38, 143, 255, 0.5);
}

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
  box-shadow: none;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}

.btn-secondary:focus, .btn-secondary.focus {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
  box-shadow: 0 0 0 0 rgba(130, 138, 145, 0.5);
}

.btn-secondary.disabled, .btn-secondary:disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #545b62;
  border-color: #4e555b;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(130, 138, 145, 0.5);
}

.btn-success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
  box-shadow: none;
}

.btn-success:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}

.btn-success:focus, .btn-success.focus {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
  box-shadow: 0 0 0 0 rgba(72, 180, 97, 0.5);
}

.btn-success.disabled, .btn-success:disabled {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #1e7e34;
  border-color: #1c7430;
}

.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(72, 180, 97, 0.5);
}

.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
  box-shadow: none;
}

.btn-info:hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}

.btn-info:focus, .btn-info.focus {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
  box-shadow: 0 0 0 0 rgba(58, 176, 195, 0.5);
}

.btn-info.disabled, .btn-info:disabled {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
  color: #fff;
  background-color: #117a8b;
  border-color: #10707f;
}

.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(58, 176, 195, 0.5);
}

.btn-warning {
  color: #1f2d3d;
  background-color: #ffc107;
  border-color: #ffc107;
  box-shadow: none;
}

.btn-warning:hover {
  color: #1f2d3d;
  background-color: #e0a800;
  border-color: #d39e00;
}

.btn-warning:focus, .btn-warning.focus {
  color: #1f2d3d;
  background-color: #e0a800;
  border-color: #d39e00;
  box-shadow: 0 0 0 0 rgba(221, 171, 15, 0.5);
}

.btn-warning.disabled, .btn-warning:disabled {
  color: #1f2d3d;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
  color: #1f2d3d;
  background-color: #d39e00;
  border-color: #c69500;
}

.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(221, 171, 15, 0.5);
}

.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
  box-shadow: none;
}

.btn-danger:hover {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
}

.btn-danger:focus, .btn-danger.focus {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
  box-shadow: 0 0 0 0 rgba(225, 83, 97, 0.5);
}

.btn-danger.disabled, .btn-danger:disabled {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #bd2130;
  border-color: #b21f2d;
}

.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(225, 83, 97, 0.5);
}

.btn-light {
  color: #1f2d3d;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
  box-shadow: none;
}

.btn-light:hover {
  color: #1f2d3d;
  background-color: #e2e6ea;
  border-color: #dae0e5;
}

.btn-light:focus, .btn-light.focus {
  color: #1f2d3d;
  background-color: #e2e6ea;
  border-color: #dae0e5;
  box-shadow: 0 0 0 0 rgba(215, 218, 222, 0.5);
}

.btn-light.disabled, .btn-light:disabled {
  color: #1f2d3d;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle {
  color: #1f2d3d;
  background-color: #dae0e5;
  border-color: #d3d9df;
}

.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(215, 218, 222, 0.5);
}

.btn-dark {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
  box-shadow: none;
}

.btn-dark:hover {
  color: #fff;
  background-color: #23272b;
  border-color: #1d2124;
}

.btn-dark:focus, .btn-dark.focus {
  color: #fff;
  background-color: #23272b;
  border-color: #1d2124;
  box-shadow: 0 0 0 0 rgba(82, 88, 93, 0.5);
}

.btn-dark.disabled, .btn-dark:disabled {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
.show > .btn-dark.dropdown-toggle {
  color: #fff;
  background-color: #1d2124;
  border-color: #171a1d;
}

.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(82, 88, 93, 0.5);
}

.btn-outline-primary {
  color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.5);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #007bff;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.5);
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:focus, .btn-outline-secondary.focus {
  box-shadow: 0 0 0 0 rgba(108, 117, 125, 0.5);
}

.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
  color: #6c757d;
  background-color: transparent;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(108, 117, 125, 0.5);
}

.btn-outline-success {
  color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:hover {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:focus, .btn-outline-success.focus {
  box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.5);
}

.btn-outline-success.disabled, .btn-outline-success:disabled {
  color: #28a745;
  background-color: transparent;
}

.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.5);
}

.btn-outline-info {
  color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:hover {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:focus, .btn-outline-info.focus {
  box-shadow: 0 0 0 0 rgba(23, 162, 184, 0.5);
}

.btn-outline-info.disabled, .btn-outline-info:disabled {
  color: #17a2b8;
  background-color: transparent;
}

.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(23, 162, 184, 0.5);
}

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:hover {
  color: #1f2d3d;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:focus, .btn-outline-warning.focus {
  box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
}

.btn-outline-warning.disabled, .btn-outline-warning:disabled {
  color: #ffc107;
  background-color: transparent;
}

.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
  color: #1f2d3d;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:focus, .btn-outline-danger.focus {
  box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5);
}

.btn-outline-danger.disabled, .btn-outline-danger:disabled {
  color: #dc3545;
  background-color: transparent;
}

.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5);
}

.btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:hover {
  color: #1f2d3d;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:focus, .btn-outline-light.focus {
  box-shadow: 0 0 0 0 rgba(248, 249, 250, 0.5);
}

.btn-outline-light.disabled, .btn-outline-light:disabled {
  color: #f8f9fa;
  background-color: transparent;
}

.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
.show > .btn-outline-light.dropdown-toggle {
  color: #1f2d3d;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(248, 249, 250, 0.5);
}

.btn-outline-dark {
  color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark:focus, .btn-outline-dark.focus {
  box-shadow: 0 0 0 0 rgba(52, 58, 64, 0.5);
}

.btn-outline-dark.disabled, .btn-outline-dark:disabled {
  color: #343a40;
  background-color: transparent;
}

.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active,
.show > .btn-outline-dark.dropdown-toggle {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(52, 58, 64, 0.5);
}

.btn-link {
  font-weight: 400;
  color: #007bff;
  text-decoration: none;
}

.btn-link:hover {
  color: #0056b3;
  text-decoration: none;
}

.btn-link:focus, .btn-link.focus {
  text-decoration: none;
}

.btn-link:disabled, .btn-link.disabled {
  color: #6c757d;
  pointer-events: none;
}

.btn-lg, .btn-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.btn-sm, .btn-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block + .btn-block {
  margin-top: 0.5rem;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover {
  z-index: 1;
}

.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 1;
}

.btn-toolbar {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.btn-toolbar .input-group {
  width: auto;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
  margin-left: -1px;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}

.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.btn-group.show .dropdown-toggle {
  box-shadow: none;
}

.btn-group.show .dropdown-toggle.btn-link {
  box-shadow: none;
}

.btn-group-vertical {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
  width: 100%;
}

.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: -1px;
}

.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn-group-toggle > .btn,
.btn-group-toggle > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"],
.btn-group-toggle > .btn-group > .btn input[type="radio"],
.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.bg-gradient-lightblue {
	background: linear-gradient(180deg, rgba(51,153,153,0.8) 0%, rgba(51,102,102,0.75) 100%) ;
	border-color: rgba(51,102,102,0.5);
	color: #fff;
}

.bg-gradient-lightblue.btn.disabled, .bg-gradient-lightblue.btn:disabled, .bg-gradient-lightblue.btn:not(:disabled):not(.disabled):active, .bg-gradient-lightblue.btn:not(:disabled):not(.disabled).active,
.show > .bg-gradient-lightblue.btn.dropdown-toggle {
  background-image: none !important;
}

.bg-gradient-lightblue.btn:hover {
	background: linear-gradient(180deg, rgba(51,153,153,0.8) 0%, rgba(51,102,102,0.75) 100%) ;
	border-color: rgba(51,102,102,0.5);
	color: #fff;
}

.bg-gradient-lightblue.btn:not(:disabled):not(.disabled):active,
.bg-gradient-lightblue.btn:not(:disabled):not(.disabled).active,
.bg-gradient-lightblue.btn:active,
.bg-gradient-lightblue.btn.active {
	background: linear-gradient(180deg, rgba(51,153,153,0.8) 0%, rgba(51,102,102,0.75) 100%) ;
	border-color: rgba(51,102,102,1);
	color: #fff;
}
.btn-default {
	background-color: #f8f9fa;
	border-color: #ddd;
	color: #444;
}

.btn-default:hover, .btn-default:active, .btn-default.hover {
	background: linear-gradient(180deg, rgba(51,153,153,0.8) 0%, rgba(51,102,102,0.75) 100%) ;
	border-color: rgba(51,102,102,0.5);
	color: #fff;
}

/* Feature 1 */
.feature-1 .wrap-icon {
  margin: 0 auto;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: relative;
  margin-bottom: 30px;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.feature-1 .wrap-icon.icon-1 {
  background: linear-gradient(-45deg, #3b87bd, #2d71a2);
}

.feature-1 .wrap-icon i {
  font-size: 40px;
  line-height: 0;
  color: #fff;
}

.feature-1 h3 {
  font-size: 20px;
}

.feature-1 p {
  color: #b1b1b1;
}

/* Step */
.step {
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 40px;
}

.step .number {
  background: linear-gradient(-45deg, #1391a5, #274685);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: .2rem;
  margin-bottom: 10px;
  display: block;
}

.step p:last-child {
  margin-bottom: 0px;
}

/* Review */
.review h3 {
  font-size: 20px;
}

.review p {
  line-height: 1.8;
  font-style: italic;
  color: #333333;
}

.review .stars span {
  color: #FF8803;
}

.review .stars .muted {
  color: #ccc;
}

.review .review-user img {
  width: 70px;
  margin: 0 auto;
}

/* Testimonial Carousel */
.testimonials-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #339999;
}

.testimonials-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #339999;
}

/* Pricing */
.pricing {
  padding: 50px;
  background: linear-gradient(-45deg, #1391a5, #274685);
  color: #fff;
  padding-bottom: 12rem !important;
  position: relative;
  border-radius: 4px;
  color: #000000;
  background: #fff;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
}

.pricing h3 {
  color: #339999;
}

.pricing .price-cta {
  text-decoration: none;
  position: absolute;
  bottom: 50px;
  width: 100%;
  text-align: center;
  left: 0;
}

.pricing .price-cta .price {
  display: block;
  margin-bottom: 20px;
  font-size: 2rem;
  font-weight: 300;
}

.pricing .popularity {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .2rem;
  display: block;
  margin-bottom: 20px;
}

.pricing ul {
  margin-bottom: 50px;
}

.pricing ul li {
  margin-bottom: 10px;
}

.pricing .btn-white {
  background: #fff;
  border: 2px solid #f1f1f1;
  border-radius: 4px;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);
}

.pricing .btn-white:hover {
  color: #339999;
}

.pricing.popular {
  background: #fff;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
  color: #000000;
  background: linear-gradient(-45deg, #1391a5, #274685);
  color: #fff;
  box-shadow: none;
}

.pricing.popular .popularity {
  color: #b3b3b3;
}

.pricing.popular h3 {
  color: #fff;
  background: none;
}

.pricing.popular .btn-white {
  border: 2px solid #339999;
}

/* CTA Section */
.cta-section {
  background: linear-gradient(to right, #339999 0%, #336666 100%);
  color: #fff;
}

.cta-section h2 {
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .cta-section h2 {
    font-size: 2rem;
  }
}

.cta-section .btn {
  background: #000000;
	  color: #fff;
}

.cta-section .btn i {
  margin-right: 5px;
  font-size: 24px;
  line-height: 0;
}

/* Contact Form */
.form-control {
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}

.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}

.form-control-sm {
  height: calc(1.8125rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
}

.form-control-lg {
  height: calc(2.875rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}
select {
	cursor:pointer;
	background-image: linear-gradient(45deg, transparent 50%, #888 50%), linear-gradient(135deg, #888 40%, transparent 60%), linear-gradient(to right, #eee, #eee);
	background-position: calc(100% - 16px) calc(1em - 2px), calc(100% - 11px) calc(1em - 2px), 100% 0;
	background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
	background-repeat: no-repeat;
}
select:focus, select.active {
	cursor:pointer;
	background:#E9F7F8 ;
	background-image: linear-gradient(45deg, transparent 50%, #339999 50%), linear-gradient(135deg, #339999 40%, transparent 60%), linear-gradient(to right, skyblue, skyblue);
	background-position: calc(100% - 16px) calc(1em - 2px), calc(100% - 11px) calc(1em - 2px), 100% 0;
	background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
	background-repeat: no-repeat;
	border:#339999 solid 1px;
}
input.active {
	cursor:pointer;
	background:#E9F7F8 ;
	border:#339999 solid 1px;
}
/*
select.form-control[size], select.form-control[multiple] {
	height: auto;
	background-image: linear-gradient(45deg, white 50%, transparent 50%), linear-gradient(135deg, transparent 50%, white 50%), linear-gradient(to right, gray, gray);
	background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, 100% 0;
	background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
	background-repeat: no-repeat;
	border-color: grey;
	outline: 0;
}
*/
/*
select.form-control-sm[size], select.form-control-sm[multiple] {
	background-image: linear-gradient(45deg, white 50%, transparent 50%), linear-gradient(135deg, transparent 50%, white 50%), linear-gradient(to right, gray, gray);
	background-position: calc(100% - 15px) 0.5em, calc(100% - 20px) 1em, 100% 0;
	background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
	background-repeat: no-repeat;
	border-color: grey;
	outline: 0;
}
*/
textarea.form-control {
  height: auto;
}

.form-control:active, .form-control:focus {
  outline: none;
  box-shadow: none;
  border: 1px solid #339999;
}

.php-email-form .validate {
  display: none;
  color: red;
  margin: 0 0 15px 0;
  font-weight: 400;
  font-size: 13px;
}

.php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.php-email-form .error-message br + br {
  margin-top: 25px;
}

.php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.php-email-form textarea {
  min-height: 160px;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Blog */
.post-entry {
  margin-bottom: 60px;
}

.post-entry .post-text .post-meta {
  text-decoration: none;
  color: #ccc;
  font-size: 13px;
  display: block;
  margin-bottom: 10px;
}

.post-entry .post-text h3 {
  font-size: 20px;
  color: #000000;
}

.post-entry .post-text h3 a {
  text-decoration: none;
  color: #000000;
}

.post-entry .post-text h3 a:hover {
  text-decoration: none;
  color: #339999;
}

.post-entry .post-text .readmore {
  color: #339999;
}

.sidebar-box {
  margin-bottom: 30px;
  padding: 25px;
  font-size: 15px;
  width: 100%;
  float: left;
  background: #fff;
}

.sidebar-box *:last-child {
  margin-bottom: 0;
}

.sidebar-box h3 {
  font-size: 18px;
  margin-bottom: 15px;
}

.categories li, .sidelink li {
  position: relative;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dotted gray("300");
  list-style: none;
}

.categories li:last-child, .sidelink li:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.categories li a, .sidelink li a {
  text-decoration: none;
  display: block;
}

.categories li a span, .sidelink li a span {
  position: absolute;
  right: 0;
  top: 0;
  color: #ccc;
}

.categories li.active a, .sidelink li.active a {
  text-decoration: none;
  color: #000000;
  font-style: italic;
}

.comment-form-wrap {
  clear: both;
}

.comment-list {
  padding: 0;
  margin: 0;
}

.comment-list .children {
  padding: 50px 0 0 40px;
  margin: 0;
  float: left;
  width: 100%;
}

.comment-list li {
  padding: 0;
  margin: 0 0 30px 0;
  float: left;
  width: 100%;
  clear: both;
  list-style: none;
}

.comment-list li .vcard {
  width: 80px;
  float: left;
}

.comment-list li .vcard img {
  width: 50px;
  border-radius: 50%;
}

.comment-list li .comment-body {
  float: right;
  width: calc(100% - 80px);
}

.comment-list li .comment-body h3 {
  font-size: 20px;
}

.comment-list li .comment-body .meta {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .1em;
  color: #ccc;
}

.comment-list li .comment-body .reply {
  padding: 5px 10px;
  background: #e6e6e6;
  color: #000000;
  text-transform: uppercase;
  font-size: 14px;
}

.comment-list li .comment-body .reply:hover {
  color: #000000;
  background: #e3e3e3;
}

.search-form {
  background: #f7f7f7;
  padding: 10px;
}

.search-form .form-group {
  position: relative;
}

.search-form .form-group input {
  padding-right: 50px;
}

.search-form .icon {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header { height: 80px; transition: all 0.5s; z-index: 997; transition: all 0.5s; }
#header.header-scrolled { background: rgba(51, 153, 153, 0.9); height: 60px; }
#header .logo h1 { font-size: 28px; margin: 0; padding: 4px 0; line-height: 1; font-weight: 500; }
#header .logo h1 a, #header .logo h1 a:hover { color: #fff; text-decoration: none; }
#header .logo img { padding: 0; margin: 0; max-height: 40px; }

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
/*  justify-content: space-between;*/
  padding: 10px 0 10px 30px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  color: #fff;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul li:hover {
	background: linear-gradient(to right, rgba(51,153,153,0.8) 0%, rgba(51,102,102,0.75) 100%) ;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 15px;
  color: #101c36;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #339999;
}

.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }
  .navbar ul {
    display: none;
  }
}

.navbar-mobile {
	position: fixed;
	overflow: hidden;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: linear-gradient(to right, rgba(39,70,133, 0.5) , rgba(61,179,197,0.5)) ;
	transition: 0.3s;
	z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
	position: absolute;
	top: 15px;
	right: 15px;
}
.navbar-mobile ul {
	display: block;
	position: absolute;
	top: 70px;
	right: 15px;
	bottom: 15px;
	left: 15px;
	padding: 10px 0;
	border-radius: 10px;
	border:#888 solid 1px;
	background: linear-gradient(to right, #ffffff 0%, #cccccc 100%);
	overflow-y: auto;
	transition: 0.3s;
}

.navbar-mobile a {
  padding: 10px 20px;
  font-size: 15px;
  color: #101c36;
}

.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #339999;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #339999;
}

.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero-section {
	background: linear-gradient(to right, rgba(51,153,153,0.8) 0%, rgba(51,102,102,0.75) 100%), url(../img/hero-bg.jpg);
	position: relative;
}

.hero-section .wave {
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  bottom: -150px;
}

@media screen and (max-width: 992px) {
  .hero-section .wave {
    bottom: -150px;
  }
}

.hero-section .wave svg {
  width: 100%;
}

.hero-section, .hero-section > .container > .row {
  height: auto;
  min-height: 500px;
}

@media screen and (max-width:575px) { /* xs */
  .hero-section > .container { padding-top:50px;padding-bottom:50px; }
}
@media screen and (min-width:576px) and (max-width:767px) { /* sm */
  .hero-section > .container { padding-top:75px;padding-bottom:75px; }
}
@media screen and (min-width:768px) and (max-width:991px) { /* md */
  .hero-section > .container { padding-top:100px;padding-bottom:100px; }
}
@media screen and (min-width:992px) and (max-width:1199px) { /* lg */
  .hero-section > .container { padding-top:100px;padding-bottom:100px; }
}
@media screen and (min-width:1200px) and (max-width:1399px) { /* xl */
  .hero-section > .container { padding-top:100px;padding-bottom:200px; }
}
@media screen and (min-width:1400px) { /* xxl */
  .hero-section > .container { padding-top:150px;padding-bottom:200px; }
}

.hero-section.inner-page {
  height: 60vh;
  min-height: 0;
}

.hero-section.inner-page .hero-text {
  transform: translateY(-150px);
  margin-top: -120px;
}

@media screen and (max-width: 992px) {
  .hero-section.inner-page .hero-text {
    margin-top: -80px;
  }
}

.hero-section h1 {
  font-size: 3rem;
  color: #fff;
  font-weight: 600;
  margin-bottom: 30px;
  letter-spacing:1px;
}

@media screen and (max-width: 992px) {
  .hero-section h1 {
    font-size: 2.5rem;
    text-align: center;
    margin-top: 40px;
  }
}

.hero-section p { font-size: 18px; color: #fff; letter-spacing:1px; }

.hero-section .phone-3, .hero-section .phone-2, .hero-section .phone-1 {
  overflow: hidden;
  box-shadow: 0 15px 50px 0 rgba(0, 0, 0, 0.3);
  border-radius: 30px;
  width: 250px;
}
.hero-section  .phone-2 {
  margin-top: 100px;
  margin-left: -150px;
}

.hero-section  .phone-3 {
  margin-top: -450px;
  margin-left: 220px;
}

@media (max-width: 991px) {
  .hero-section .phone-3, .hero-section  .phone-2, .hero-section .phone-1 {
    position: relative;
    top: 0;
    transform: scale(0.3);
  }
  .hero-section .phone-3 img, .hero-section  .phone-2 img , .hero-section .phone-1 img {
    width:75% ;
    height: 75%;
    transform: scale(0.3);
  }
}

@media screen and (max-width: 992px) {
  .hero-section  .phone-1 {
    margin-left: -200px;
  }
  .hero-section  .phone-2 {
    position: absolute;
    margin-top: 0px;
    margin-left: 100px;
  }
  .hero-section  .phone-3 {
    position: absolute;
    margin-top: 0px;
    margin-left: 100px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .hero-section .phone-3, .hero-section  .phone-2, .hero-section .phone-1 {
  	width:150px !important;
  }
  .hero-section  .phone-1 {
    margin-left: -200px;
  }
  .hero-section  .phone-2 {
    width: 150px;
    position: absolute;
    margin-top: -100px;
    margin-left: 100px;
    border:#f00 solid 2px;
  }
  .hero-section  .phone-3 {
    width: 150px;
    position: absolute;
    margin-top: 0px;
    margin-left: 100px;
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
	background: linear-gradient(to right, #339999 0%, #336666 100%);
	color: #fff;
}
.footer p { color:#aaa; }
.footer h3 { font-size: 20px; font-weight:normal; margin-bottom: 20px; color:#fff ;text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }
.footer ul li { margin-bottom: 10px; }
.footer a { color: #ccc; }
.footer a:hover	{ color:#fff; }
.footer .copyright { margin-bottom: 0px; }
.footer .copyright, .footer .credits { font-size: 14px; }

.social a {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f8f9fa;
  position: relative;
  text-align: center;
  transition: .3s background ease;
  color: #0d1e2d;
  line-height: 0;
}

.social a span {
	display: inline-block;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size:20px;
}

.social a:hover {
	color: #fff;
	background: #339999;
}

.social a i {
  line-height: 0;
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-wrap {
	transition: 0.3s;
	position: relative;
	overflow: hidden;
	z-index: 1;
	background: linear-gradient(-45deg, #274685, #3db3c5);
	display:flex ;
	flex-direction:column ;
}
.portfolio .portfolio-wrap.type-1{ background: linear-gradient(-45deg, #274685, #3db3c5) !important; }	/*	報名中	*/
.portfolio .portfolio-wrap.type-2{ background: linear-gradient(-45deg, #8C2053, #D25575) !important; }	/*	已截止	*/
.portfolio .portfolio-wrap.type-4{ background: linear-gradient(-45deg, #8C2053, #D25575) !important; }	/*	徵選中	*/
.portfolio .portfolio-wrap.type-8{ background: linear-gradient(-45deg, #8C2053, #D25575) !important; }	/*	通知中	*/
.portfolio .portfolio-wrap.type-16{ background: linear-gradient(-45deg, #8C2053, #D25575) !important; }	/*	執行中	*/
.portfolio .portfolio-wrap.type-32{ background: linear-gradient(-45deg, #302601, #967503) !important; }	/*	結案	*/
.portfolio .portfolio-wrap.type-64{ background: linear-gradient(-45deg, #8C2053, #D25575) !important; }	/*	取消	*/
.portfolio .portfolio-wrap.type-128{ background: linear-gradient(-45deg, #A08205, #F9D648) !important; }/*	請款中	*/

/*	.portfolio .portfolio-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: all ease-in-out 0.3s; z-index: 2; opacity: 0; }	*/
.portfolio .portfolio-wrap img { transition: all ease-in-out 0.3s; }
.portfolio .portfolio-wrap .extension {
	width: 200px;
	position: absolute;
	top: 10px;
	right: -76px;
	transform: rotate(45deg);
	text-transform: uppercase;
	text-align:center; 
	font-weight: 700;
	font-family: 'Roboto' ;
	z-index: 1;
	font-size: 15px;
	padding: 3px 0 3px 0;
	background: #EC0000;
	letter-spacing:2px;
	color: #fff;
}
.portfolio .portfolio-wrap .status {
	width: 200px;
	position: absolute;
	top: 10px;
	right: -76px;
	transform: rotate(45deg);
	text-align:center; 
	font-weight: 300;
	z-index: 1;
	padding: 3px 0 3px 0;
	letter-spacing:2px;
}
.portfolio .portfolio-wrap .portfolio-info {
	opacity: 1 ;
	position: absolute ;
	height:30px; 
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	transition: all ease-in-out 0.3s;
	align-items: flex-start;
	padding: 10px;
}
.portfolio .portfolio-wrap .filename {
	position: absolute;
	width:100%;
	text-align:center;
	align-items: flex-end;
	bottom:0;
	padding: 10px;
	word-break:break-all;
	font-size:15px;
	text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.portfolio .portfolio-wrap .filename .statics {	display:flex;flex-direction:row; background: rgba(255,255,255,0.5) ;font-size:13px; }
.portfolio .portfolio-wrap .filename p { line-height:1.2em; }
.portfolio .portfolio-wrap .filename p span { }
.portfolio .portfolio-wrap .filename p span.title { font-size:14px; line-height:1.25em !important; }

.portfolio .portfolio-wrap .portfolio-info h4	{	font-size: 20px; color: #fff; font-weight: 600; }
.portfolio .portfolio-wrap .portfolio-info p	{	color: rgba(255, 255, 255, 0.7); font-size: 14px; text-transform: uppercase; padding: 0; margin: 0; font-style: italic; }
.portfolio .portfolio-wrap .portfolio-links		{	text-align: center; z-index: 4; }
.portfolio .portfolio-wrap .portfolio-links a	{	color: #fff; margin: 0 5px 0 0; font-size: 28px; display: inline-block; transition: 0.3s; }
.portfolio .portfolio-wrap .portfolio-links a:hover {	color: #3498db;	}
.portfolio .portfolio-wrap:hover::before {  opacity: 1;  overflow: hidden;	}
.portfolio .portfolio-wrap:hover img {	transform: scale(1.2);	}
.portfolio .portfolio-wrap:hover .portfolio-info {  opacity: 1;	}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {	padding-top: 40px; }
.portfolio-details .portfolio-details-slider img { width: 100%; }
.portfolio-details .portfolio-details-slider .swiper-pagination {  margin-top: 20px;  position: relative; }
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {  width: 12px;  height: 12px;  background-color: #fff;  opacity: 1;  border: 1px solid #3498db; }
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {   background-color: #3498db;}
.portfolio-details .portfolio-info {   padding: 30px;  box-shadow: 0px 0 30px rgba(34, 34, 34, 0.08);}
.portfolio-details .portfolio-info h3 {   font-size: 22px;  font-weight: 700;  margin-bottom: 20px;  padding-bottom: 20px;  border-bottom: 1px solid #eee; }
.portfolio-details .portfolio-info ul {   list-style: none;  padding: 0;  font-size: 15px;}
.portfolio-details .portfolio-info ul li + li {  margin-top: 10px;}
.portfolio-details .portfolio-description {  padding-top: 30px;}
.portfolio-details .portfolio-description h2 {  font-size: 26px;  font-weight: 700;  margin-bottom: 20px;}
.portfolio-details .portfolio-description p {  padding: 0; }

/*--------------------------------------------------------------
# Ribbon
--------------------------------------------------------------*/
.ribbon {
	width: 200px;
	position: absolute;
	top: 10px;
	right: -76px;
	transform: rotate(45deg);
	z-index: 1;
	font-size: 13px;
	padding: 5px 0 5px 0;
	background: #EC0000;
	letter-spacing:2px;
	color: #fff;
}
.ribbon-primary	{	background:#0b5ed7 !important; color:#fff ; }
.ribbon-warning	{	background:#ffc107 !important; color:#000 ; }
.ribbon-success	{	background:#23BC74 !important; color:#000 ; }
.ribbon-danger	{	background:#EC0000 !important; color:#fff ; }
.ribbon-white	{	background:#ffffff !important; color:#000 ; }
@media screen and (max-width:575px) {
  .ribbon { width:150;padding: 2px 0;top:8px;right:-82px; }
}
@media screen and (min-width:576px) and (max-width:767px) {
  .ribbon { width:150;padding: 2px 0;top:8px;right:-82px; }
}
@media screen and (min-width:768px) and (max-width:991px) {
  .ribbon { width:150;padding: 2px 0;top:8px;right:-82px; }
}
@media screen and (min-width:992px) and (max-width:1199px) {
  .ribbon { width:150; }
}
@media screen and (min-width:1200px) and (max-width:1399px) {
  .ribbon { width:150; }
}
@media screen and (min-width:1400px) {
  .ribbon { width:150; }
}

/*--------------------------------------------------------------
# Candidate
--------------------------------------------------------------*/
.candidate .member {
  margin-bottom: 20px;
  overflow: hidden;
  text-align: center;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  width:100% ;
}
.candidate .member .approved {
	width: 200px;
	position: absolute;
	top: 10px;
	right: -76px;
	transform: rotate(45deg);
	z-index: 1;
	font-size: 13px;
	padding: 5px 0 5px 0;
	background: #EC0000;
	letter-spacing:2px;
	color: #fff;
}
.candidate .member .member-img {
	position: relative;
	overflow: hidden;
	width:100%;
	transition: 0.3s;
}
.candidate .member .member-img:hover img {
	transform: scale(1.2) ;
	transition: all ease-in-out 0.3s;
}

.candidate .member .social			{ position: absolute; left: 0; bottom: 0; right: 0; height: 40px; opacity: 0; transition: ease-in-out 0.3s; background: rgba(255, 255, 255, 0.85); display: inline-flex; justify-content: center; align-items: center;text-align:center; }
.candidate .member .social a		{ transition: color 0.3s; color: #222222; margin: 0px 3px;padding:0; display: inline-flex; justify-content: center; align-items: center;height:38px;width:38px; }
.candidate .member .social a i		{ line-height: 0;}
.candidate .member .social a:hover	{ color:#fff;}
.candidate .member .social i		{ font-size: 15px; margin: 0px;}

.candidate #candidate-container {
	display:flex ;
	text-align: center;
	justify-content: center ;
}

.candidate #candidate-flters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.candidate #candidate-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 15px 10px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #222222;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
  border-radius: 3px;
}

.candidate #candidate-flters li:hover, .candidate #candidate-flters li.filter-active {
	color: #fff ;
	background: rgba(51,102,102,0.75) ;
}
.candidate #candidate-flters li:hover a, .candidate #candidate-flters li.filter-active a {
  color: #fff ;
}

.candidate #candidate-flters li:last-child {
  margin-right: 0;
}


.candidate .member .member-info {
	padding: 15px;
	line-height:1.25em ;
}

.candidate .member .member-info h4 {
	font-weight: 700;
	margin-bottom: 5px;
	font-size: 18px;
	color: #222222;
}

.candidate .member .member-info span {
	font-size: 13px;
	font-weight: 400;
	color: #777777;
}

.candidate .member .member-info p {
	font-style: italic;
	font-size: 14px;
	line-height: 1.25em ;
	color: #777777;
	margin:0;
}

.candidate .member:hover .social {
	opacity: 1;
}

.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
  height: calc(1.8125rem + 2px);
}

.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
  padding-right: 1.75rem;
}

.text-break-all {word-break:break-all;}

.ics-spin	{ display:inline-block; -webkit-animation: ics-spin 1s infinite linear !important; animation: ics-spin 1s infinite linear !important; }
.ics-pulse	{ display:inline-block; -webkit-animation: ics-spin 1s infinite steps(8); animation: ics-spin 1s infinite steps(8); }

.debug	{	border:#f00 solid 1px !important; }
.clickable	{	cursor:pointer; }
ul.customize{	list-style-type:none; }
ul.customize	li			{	padding-left:0em;clear:both; }
ul.customize span.browse { float:right;font-size:12px; }
ul.customize	li.active	{	color:#f00 ; }
ul.customize	li.active a	{	color:#f00 ; }
ul.customize	li.active::before	{	position:relative; content: "\f231" ; font-family: "bootstrap-icons" ; top:3px; left:-2px;color:#f00; }
ul.customize	li.active:hover::before	{	content: "\f231" ; font-family: "bootstrap-icons" ; }
ul.customize	li:hover	{	color:#339999 ; }
ul.customize	dt			{	line-height:1.5em; padding-left:1em; }
ul.customize	li::before	{	position:relative; content: "\f234" ; font-family: "bootstrap-icons" ; top:3px; left:-2px; }
ul.customize	li:hover::before	{	content: "\f231" ; font-family: "bootstrap-icons" ; }
ul.customize.list-white	li::before	{	color:#fff ; }
.html	{	color:#000; line-height:1.5em; padding:0em !important; border-radius:15px !important; }
.html ol, .html ul	{	margin-left:0.5em; }
.html li { line-height:1.5em;margin-bottom:0.3em;clear:both; }
.html p { line-height:1.5em;margin:0.5em 0;padding:0; }
.html a { color:#339999 ; }
.html table { border:#ccc solid 1px;background:#ccc !important;margin:0; }
.html td { padding: 3px 8px; }
.html img { max-width:100%;width:auto;height:auto;display:block; }

@media screen and (max-width:575px) {
	.flowchart { font-size:11px; }
}
@media screen and (min-width:576px) and (max-width:767px) {
	.flowchart { font-size:13px; }
}
@media screen and (min-width:768px) and (max-width:991px) {
	.flowchart { font-size:14px; }
}
@media screen and (min-width:992px) and (max-width:1199px) {
	.flowchart { font-size:15px; }
}
@media screen and (min-width:1200px) {
	.flowchart { font-size:16px; }
}

.flowchart { transform: rotate(0deg); transform-origin: 50%; }
.flowchart ul { position: relative; padding: 1em 0 0 0; white-space: nowrap; margin: 0 auto; text-align: center; }
.flowchart ul::after { content: ""; display:table; clear:both;padding:0; }
.flowchart li { display: inline-block; vertical-align: top; text-align: center; list-style-type: none; position: relative; padding: 1em 0 0 0;margin:0;width:auto; }
.flowchart li::before,
.flowchart li::after { content: ""; position: absolute; top: 0; right: 50%; border-top: 1px solid #888; width: 53%; height: 1.05em; }
.flowchart li::after { right: auto; left: 50%; border-left: 1px solid #888; }
.flowchart li:only-child::after,
.flowchart li:only-child::before { display: none; }
.flowchart li:only-child { padding-top: 0; }
.flowchart li:first-child::before,
.flowchart li:last-child::after { border: 0 none; }
.flowchart li:last-child::before { border-right: 1px solid #888; border-radius: 0 5px 0 0; }
.flowchart li:first-child::after { border-radius: 5px 0 0 0; }
.flowchart ul ul::before { content: ""; position: absolute; top: 0; left: 50%; border-left: 1px solid #888; width: 0; height: 1.05em; }
.flowchart li a { border: 1px solid #888; padding: 0.25em 0.5em;text-decoration: none; display: inline-block; border-radius: 5px; color: #333; position: relative; top: 1px; transform: rotate(0deg); }
.flowchart li a:hover,
/*.flowchart li a:hover + ul li a { background: #e9453f; color: #fff; border: 1px solid #e9453f; }*/
.flowchart li a:hover { background: #e9453f; color: #fff; border: 1px solid #e9453f; }
.flowchart li a:hover + ul li::after,
.flowchart li a:hover + ul li::before,
.flowchart li a:hover + ul::before,
.flowchart li a:hover + ul ul::before { border-color: #e9453f;border-width:3px; }

/*
.flowchart ul.vertical { position: relative; padding: 1em 0 0 0; white-space: nowrap; margin: 0 auto; width:auto; text-align: center; }
.flowchart ul.vertical::after { content: ""; display:inline-block; clear:both;padding:0; }
.flowchart li.vertical { display:flex;flex-direction:column; vertical-align: top; left:50%; text-align: center; list-style-type: none; position: relative; padding: 0 0 0.25em 1em; }
.flowchart li.vertical::before { content: ""; position: absolute; top: -0.2em; left: 0; width: 1em; height: 1.5em; border-bottom: 1px solid #888;border-left: 1px solid #888;border-right:none;border-top:none; }
.flowchart li.vertical::after { content: "x"; position: absolute; top: 1.3em; left: 0; border-left: 1px solid #888;border-top:0 none;border-bottom:0 none;border-right:0 none; border-radius:0; width: 100%; height: 100%; background: rgba(255,0,0,0.5); }
.flowchart li.vertical:only-child::after,
.flowchart li.vertical:only-child::before { display: none; }
.flowchart li.vertical:only-child { padding-top: 0; }
.flowchart li.vertical:last-child::before { content: ""; position: absolute; top: -0.2em; left: 0; width: 1em; height: 50%; border-bottom: 1px solid #888;border-left: 1px solid #888; border-radius: 0 0 0 5px;border-top:0 none;border-right:0 none; }
.flowchart li.vertical:last-child::after { border: 0 none;padding:0 0 0 1em; }
.flowchart ul.vertical ul.vertical::before { content: ""; position: absolute; top: 0; left: 50%; border-left: 1px solid #888; border-bottom:0 none; width: 0; height: 1.05em; }
.flowchart li.vertical a { border: 1px solid #888; padding: 0.5em 0.75em; text-decoration: none; display: inline-block; border-radius: 5px; color: #333; position: relative; top: 1px; transform: rotate(0deg); }
.flowchart li.vertical a:hover,
.flowchart li.vertical a:hover + ul li a { background: #e9453f; color: #fff; border: 1px solid #e9453f; }
.flowchart li.vertical a:hover + ul li::after,
.flowchart li.vertical a:hover + ul li::before,
.flowchart li.vertical a:hover + ul::before,
.flowchart li.vertical a:hover + ul ul::before { border-color: #e9453f; }
*/

.w-25 { width: 25% !important;}
.w-50 { width: 50% !important;}
.w-75 { width: 75% !important;}
.w-100 { width: 100% !important;}
.w-auto { width: auto !important;}
.h-25 { height: 25% !important;}
.h-50 { height: 50% !important;}
.h-75 { height: 75% !important;}
.h-100 { height: 100% !important;}
.h-auto { height: auto !important;}
.mw-100 { max-width: 100% !important;}
.mh-100 { max-height: 100% !important;}
.min-vw-100 { min-width: 100vw !important;}
.min-vh-100 { min-height: 100vh !important;}
.vw-100 { width: 100vw !important;}
.vh-100 { height: 100vh !important;}
.m-0 { margin: 0 !important;}
.mt-0,.my-0 { margin-top: 0 !important;}
.mr-0,.mx-0 { margin-right: 0 !important;}
.mb-0,.my-0 { margin-bottom: 0 !important;}
.ml-0,.mx-0 { margin-left: 0 !important;}
.m-1 { margin: 0.25rem !important;}
.mt-1,.my-1 { margin-top: 0.25rem !important;}
.mr-1,.mx-1 { margin-right: 0.25rem !important;}
.mb-1,.my-1 { margin-bottom: 0.25rem !important;}
.ml-1,.mx-1 { margin-left: 0.25rem !important;}
.m-2 { margin: 0.5rem !important;}
.mt-2,.my-2 { margin-top: 0.5rem !important;}
.mr-2,.mx-2 { margin-right: 0.5rem !important;}
.mb-2,.my-2 { margin-bottom: 0.5rem !important;}
.ml-2,.mx-2 { margin-left: 0.5rem !important;}
.m-3 { margin: 1rem !important;}
.mt-3,.my-3 { margin-top: 1rem !important;}
.mr-3,.mx-3 { margin-right: 1rem !important;}
.mb-3,.my-3 { margin-bottom: 1rem !important;}
.ml-3,.mx-3 { margin-left: 1rem !important;}
.m-4 { margin: 1.5rem !important;}
.mt-4,.my-4 { margin-top: 1.5rem !important;}
.mr-4,.mx-4 { margin-right: 1.5rem !important;}
.mb-4,.my-4 { margin-bottom: 1.5rem !important;}
.ml-4,.mx-4 { margin-left: 1.5rem !important;}
.m-5 { margin: 3rem !important;}
.mt-5,.my-5 { margin-top: 3rem !important;}
.mr-5,.mx-5 { margin-right: 3rem !important;}
.mb-5,.my-5 { margin-bottom: 3rem !important;}
.ml-5,.mx-5 { margin-left: 3rem !important;}
.p-0 { padding: 0 !important;}
.pt-0,.py-0 { padding-top: 0 !important;}
.pr-0,.px-0 { padding-right: 0 !important;}
.pb-0,.py-0 { padding-bottom: 0 !important;}
.pl-0,.px-0 { padding-left: 0 !important;}
.p-1 { padding: 0.25rem !important;}
.pt-1,.py-1 { padding-top: 0.25rem !important;}
.pr-1,.px-1 { padding-right: 0.25rem !important;}
.pb-1,.py-1 { padding-bottom: 0.25rem !important;}
.pl-1,.px-1 { padding-left: 0.25rem !important;}
.p-2 { padding: 0.5rem !important;}
.pt-2,.py-2 { padding-top: 0.5rem !important;}
.pr-2,.px-2 { padding-right: 0.5rem !important;}
.pb-2,.py-2 { padding-bottom: 0.5rem !important;}
.pl-2,.px-2 { padding-left: 0.5rem !important;}
.p-3 { padding: 1rem !important;}
.pt-3,.py-3 { padding-top: 1rem !important;}
.pr-3,.px-3 { padding-right: 1rem !important;}
.pb-3,.py-3 { padding-bottom: 1rem !important;}
.pl-3,.px-3 { padding-left: 1rem !important;}
.p-4 { padding: 1.5rem !important;}
.pt-4,.py-4 { padding-top: 1.5rem !important;}
.pr-4,.px-4 { padding-right: 1.5rem !important;}
.pb-4,.py-4 { padding-bottom: 1.5rem !important;}
.pl-4,.px-4 { padding-left: 1.5rem !important;}
.p-5 { padding: 3rem !important;}
.pt-5,.py-5 { padding-top: 3rem !important;}
.pr-5,.px-5 { padding-right: 3rem !important;}
.pb-5,.py-5 { padding-bottom: 3rem !important;}
.pl-5,.px-5 { padding-left: 3rem !important;}
.m-n1 { margin: -0.25rem !important;}
.mt-n1,.my-n1 { margin-top: -0.25rem !important;}
.mr-n1,.mx-n1 { margin-right: -0.25rem !important;}
.mb-n1,.my-n1 { margin-bottom: -0.25rem !important;}
.ml-n1,.mx-n1 { margin-left: -0.25rem !important;}
.m-n2 { margin: -0.5rem !important;}
.mt-n2,.my-n2 { margin-top: -0.5rem !important;}
.mr-n2,.mx-n2 { margin-right: -0.5rem !important;}
.mb-n2,.my-n2 { margin-bottom: -0.5rem !important;}
.ml-n2,.mx-n2 { margin-left: -0.5rem !important;}
.m-n3 { margin: -1rem !important;}
.mt-n3,.my-n3 {  margin-top: -1rem !important;}
.mr-n3,.mx-n3 {  margin-right: -1rem !important;}
.mb-n3,.my-n3 {  margin-bottom: -1rem !important;}
.ml-n3,.mx-n3 {  margin-left: -1rem !important;}
.m-n4 {  margin: -1.5rem !important;}
.mt-n4,.my-n4 {  margin-top: -1.5rem !important;}
.mr-n4,.mx-n4 {  margin-right: -1.5rem !important;}
.mb-n4,.my-n4 {  margin-bottom: -1.5rem !important;}
.ml-n4,.mx-n4 { margin-left: -1.5rem !important;}
.m-n5 {  margin: -3rem !important;}
.mt-n5,.my-n5 {  margin-top: -3rem !important;}
.mr-n5,.mx-n5 {  margin-right: -3rem !important;}
.mb-n5,.my-n5 {  margin-bottom: -3rem !important;}
.ml-n5,.mx-n5 {  margin-left: -3rem !important;}
.m-auto {  margin: auto !important;}
.mt-auto,.my-auto {  margin-top: auto !important;}
.mr-auto,.mx-auto {  margin-right: auto !important;}
.mb-auto,.my-auto {  margin-bottom: auto !important;}
.ml-auto,.mx-auto {  margin-left: auto !important;}

.table-rounded {
}
.table-rounded	td {
	border:none;
}
.table-rounded	td:not(:first-child) { border-left: 1px solid #ccc !important; }
.table-rounded	tr:not(:last-child) td { border-bottom: 1px solid #ccc !important; }
.table-rounded	tr td:not(:first-child) { border-left: 1px solid #ccc !important; }