.width-100{
	width:100px;
}

.primary-button{
	width: 100%;
	border-radius: 10px;
  	background-color: #ff900a;
  	color: #ffffff;
  	font-size: 16px;
  	padding: 10px 20px;
  	cursor: pointer;
  	text-align: center;
}

.secondary-button{
	width: 100%;
	border-radius: 10px;
  	border: solid 1px #ff900a;
  	color: #ff900a;
  	font-size: 16px;
  	padding: 10px 20px;
  	cursor: pointer;
  	text-align: center;
}

.CTA1{
	position: absolute;
	left: calc(50% + 120px);
	top: 120px;
}

.CTA2{
	position: absolute;
	left: calc(50% - 68px);
	top: 270px;
}

.CTA1 img, .CTA2 img{
	width: 137px;
	height: auto;
}

.contentSelected{
	color: #ff900a;
}

.modal-body img{
	width: 100%;
}

.donaBg{
	background-color: #f9f9f9;
	border-radius: 14px;
	padding: 20px;
}

.donaTitle{
	color: #212529;
	font-weight: bold;
}

.visual-overlayL{
	position: absolute;
	top: 64px;
	left: 0px;
}

.visual-overlayR{
	position: absolute;
	top: 64px;
	right: 0px;
}

.visual-overlayL img{
	width: 100%;
	height: auto;
}

.visual-overlayR img{
	width: 100%;
	height: auto;
}

/*spacing*/
.mt-70{
	margin-top: 70px;
}

.mt-30{
	margin-top: 30px;
}

.mt-20{
	margin-top: 20px;
}

.mt-10{
	margin-top: 10px;
}

.mt-6{
	margin-top: 6px;
}

.mb-16{
	margin-bottom: 16px;
}

.mlr-15{
	margin-left: 15px;
	margin-right: 15px;
}

.plr-15{
	padding-left: 15px;
	padding-right: 15px;
}

.primaryRadius{
	border-radius: 14px;
}

.newcontainer{
	margin-left: auto;
	margin-right: auto;
	padding-left: 85px;
	padding-right: 85px;
	max-width: 1750px;
}

/*fontawsome*/
.icon-rabbit{
	color: #fff;
	margin: 10px;
}

/*text*/
.h3{
	margin: 0px;
	display: inline-block;
	font-size: 16px;
	letter-spacing: 0.21px;
	color: #413d3d;
}

.h5, .h6{
	color: #212121;
}

/*header*/
.header-logo{
	width: 120px;
	height: 120px;
    border-radius: 50%;
    background-color: #ffffff;
    position: absolute;
	z-index: 1001;
	top: 0px;
	left: 20px;
	box-shadow: 0 6px 4px -1px rgba(255, 167, 79, 0.1);
}

.header{
	display: flex;
	background: #fff;
	height: 64px;
	z-index: 1000;
}

.header h1{
	color: #333;
	font-weight: bold;
}

.header a:hover{
	cursor: pointer;
	color: #ffa74f;
}

.img-logo{
	width: 80%;
	height: auto;
	position: absolute;
	top: 12%;
	left: 15%;
    vertical-align: middle;
}

.topbar{
	position: relative;
	height: 30px;
	background: #e56e6e;	
	text-align: center;
	padding-top: 7px;
	z-index: 999999;
	float: top;
}

.topbar a{
	color: #ffffff;
	text-decoration:none;
	cursor: pointer;
}

.news a, .donate a{

}

.news, .donate{
	padding-left: 15px;
	width: 50%;
}

.menucard{
	border: 0px;
	/*border-bottom: 1px dotted #ADADAD;*/
	/*border-radius: 0px;*/
}

.annoTop, .annoRabbit, .annoDonate, .annoActivity{
	display: flex; 
	flex-direction: column; 
	height: 100%; 
	padding-top: 24px;
	min-height: 240px;
}

.card-header{
	padding: 6px 0px;
	/*background-color: #fff;*/

}

.card-header .btn {
	cursor: pointer;
	/* cancel button outline*/	
	box-shadow: none;
}

.card-header .btn:hover {
	color: #F29B33;
}

.grid-container{
	display: grid;
  	grid-template-columns: 25% 25% 25% 25%;
}

.grid-item {
	position: relative;
    margin: 0px 15px 0px 15px;
    /*filter: drop-shadow(0px 0px 4px rgba(106, 136, 255, 0.4));*/
    filter: drop-shadow(0px 0px 4px #dddddd);
}

.cardContent{
	position: relative;
}

.cardTitle{
	height: 80px;
	width: 100%;
	padding-left: 12px;
	padding-top: 6px;
	color: #ffffff;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}

.cardText{
	position: relative;
	top: -20px;
	min-height: 72px;
	background-color: #ffffff;
	border-radius:14px;
	font-size: 16px;
	padding: 12px;
	line-height: normal;
	width: 100%;
	color: #413d3d;
}

.ct1 p{
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 10px;
}

.ct2 p{
	padding-right: 10px;
	padding-bottom: 10px;
}

.ct3{
	color: #6c757d;
	font-size: 14px;
	display: -webkit-box;
    -webkit-box-orient: vertical;

    /* to specify the number of lines you want the text to run through... */
    -webkit-line-clamp: 3;
    /* hide the overflowing text, i.e, texts that did not fit in to the box */
    overflow: hidden;
}

.cardImg{
	border-radius: 14px 14px 0px 0px;
}

.textShadow{
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.t1{
	font-size: 20px;
	font-weight: bold;
}

.t2 p{
	padding-top: 6px;
	padding-right: 26px;
}

.responsiveImg{
	border-radius: 14px 14px 0px 0px;
}

.list-group-item.active{
	color:#F29B33;
	background-color: transparent;
	border-color: transparent;

}

.myProgress {
    background-color: #d8d8d8;
    border-radius: 5px;
    width: 100%;
    padding: 0px;
}

#myBar1 {
	border-radius: 5px;
	width: 10%;
	height: 10px;
	background-color: #FFA74F;
}

#myBar2 {
	border-radius: 5px;
	width: 10%;
	height: 10px;
	background-color: #6a88ff;
}

#map{
	height: 400px;
	width: 100%;
}

.responsiveImg {
	width: 100%;
}

div.responsiveImg img{
	width: 100%;
	height: auto;
	object-fit: cover;
}


.small-container{
	position: relative;
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}

div.small-container img{
	width: 100%;
	height: auto;
	object-fit: cover;
}

.small-container .auto-increment{
	position: absolute;
	top: 14.8%;
  right: 16%;
}

.small-container .donator{
	position: absolute;
	top: 22%;
  left: 20%;
  font-size: 1.4rem;
  font-weight: bold;
}

.small-container .businessid{
	position: absolute;
	top: 29%;
  left: 35%;
  font-size: 1.4rem;
  font-weight: bold;
}

.small-container .amount{
	position: absolute;
	top: 35.9%;
  left: 28%;
}

.small-container .digi-one{
	position: absolute;
	top: 42.6%;
  left: 30.5%;
  font-size: 1.4rem;
  font-weight: bold;
}

.small-container .digi-two{
	position: absolute;
	top: 42.6%;
  left: 38%;
  font-size: 1.4rem;
  font-weight: bold;
}

.small-container .digi-three{
	position: absolute;
	top: 42.6%;
  left: 45.5%;
  font-size: 1.4rem;
  font-weight: bold;
}

.small-container .digi-four{
	position: absolute;
	top: 42.6%;
  left: 52.7%;
  font-size: 1.4rem;
  font-weight: bold;
}

.small-container .digi-five{
	position: absolute;
	top: 42.6%;
  left: 60.5%;
  font-size: 1.4rem;
  font-weight: bold;
}

.small-container .digi-six{
	position: absolute;
	top: 42.6%;
  left: 68%;
  font-size: 1.4rem;
  font-weight: bold;
}

.small-container .date{
	position: absolute;
	top: 57%;
  left: 19%;
}

.Thumbnail {
    width: 100%;
    height: 557px;
    object-fit: cover;
}

/*card*/
.box-shadow{
	box-shadow: 0 3px 5px rgba(0,0,0,.16);
}

.box-shadow:hover{
	box-shadow: 0 4px 10px rgba(0,0,0,.24);
	transition: box-shadow .3s;
}

/* menu */

.menu a{
	font-size: 16px;
	letter-spacing: 3px;
	color: #333;
	line-height: 80px;
	text-decoration: none;
}

.menu a:hover{
	color: #f59e01;
}

.topbarmobile{
	display: none;
}

.wrap{
	max-width: 1140px;
	margin:0px auto;

}

.news-filter{
	margin-right:16px;
	cursor: pointer;
}

.linkContent{
	width: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.news-link{
	display: flex;
	letter-spacing: 0.18px;
  	color: #413d3d;
  	flex-grow: 1;
	margin-top: 6px;
	padding-left: 20px;
	padding-right: 20px;
	vertical-align: middle;
	width: 100%;
	border-radius: 6px;
	background-color: #fafafa;
}

.nav-item{
	margin-top:8px;
	cursor: pointer;
}

.nav-item a{
	font-weight: bold;
}

.nav{
	padding-left: 160px;
}

.nav-Manage{
	position: absolute;
	right: 20px;
}

.visual-Index{
	background-color:#f4f4f4;
	height: 400px;
	background-image:url("../img/banners/visual.jpg");
	background-repeat:no-repeat;
	width:100%;
	background-position:center;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.visual-background{
	position: relative;
	background-image: url("../img/banners/background.jpg");
	background-color:#fff2d7;
	height: 150px;
	text-align: center;
}

.visual_title{
   position: absolute;
   left: 50%;
   top: 50%;
   width: 320px;
   transform: translateX(-50%) translateY(-50%);
   font-size: 28px;
   letter-spacing: 2;
   font-weight: 800;
}

.triangel{
	width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #f9f9f9;
    margin-left: auto;
    margin-right: auto;
}

.Visual_page img{
	display: block;
	margin: auto;
}

.announceWording{
	display: inline;
	line-height: 30px;
	font-size: 15px;
}

.IncentiveWording{
	display: inline;
	line-height: 15px;
	font-size: 15px;
}

.filter{
	background: #f9f9f9;
	padding: 20px;
	border-radius: 14px;
}

.filterSelect {
	position: relative;
	/*；*/
}

.colorChip{
	overflow:hidden; 
	margin:0 auto;
}

.colorChip li.selected label{
	background-color:#FF9800;
	padding:4px 8px; 
	color:#fff;
	border-radius: 100px;
}

.filterSelect li{
	display:block;
	position: relative;
	float: left;
	width: 60px;
	height: 44px;
	font-size:16px; 
	white-space:nowrap;
	margin-right: 40px;
}

.filterSelect .title {
	font-size: 16px;
	font-weight: 400px;
	margin-right: 4px;
}

.filterSelect li label {
	position: relative;
	top:1px; 
	padding-left: 6px;
	color:#333; 
	font-size:16px; 
	line-height:16px; 
	text-align:center;
	cursor:pointer
}

.triangel1 {
  position: absolute;
  top: -30px;
  left: 4px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0px 16px 16px 16px;
  border-color: transparent transparent #f9f9f9 transparent;
}

.triangel2 {
  position: absolute;
  top: -30px;
  left: 123px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0px 16px 16px 16px;
  border-color: transparent transparent #f9f9f9  transparent;
}

/*checkbox樣式*/

input[type=checkbox] {
	display: inline-block;
	text-align: center;
	vertical-align: 
	middle; line-height: 12px;
	position: relative;
	top: 0;left:0;
	width:18px; 
	height:18px;  
	cursor:pointer;

}

/*預設狀態*/
input[type="checkbox"]::before{
	 content: "";position: absolute;top: 0;left: 0;
	 background: #fff;width: 100%;height: 100%;border: 2px solid #d9d9d9;
	 border-radius: 2px;}

/*打勾樣式*/
input[type="checkbox"]:checked::before{
	content: "\2714";
	background-color: #FFA74F;
	position: absolute;top: 0;
	padding-top: 2px;
	left: 0;width:100%;
	border: 1px solid #FFA74F;
	border-radius: 2px;
	color:#fff;
	font-size: 16px;
	}

.filterSelect li input[type=radio] {
	opacity:0; /*隱藏按鈕*/
	width:16px; 
	height:20px; 
	cursor:pointer;
}

.filterSelect li.selected label {
	color:#FF9800;
}

.filterSelect li:hover label{
	color:#FF9800; 
}

.species li.all label{
	background-color:#FF9800;
	padding:4px 8px; 
	color:#fff;
	border-radius: 100px;
}

.adoption{
	width: 200px;
	position: absolute;
	bottom: 30px;
  	left: calc(157.5px - 100px + 15px);
}

.videoflex{
	display: flex;
	flex-direction: row;
	width: 100%;
	flex-wrap: wrap;
}

.flex-container, .footcontainer{
	display: flex;
	flex-direction: row;
	width: 100%;
	flex-wrap: wrap;
}

.footcontainer{
	margin-left: 15px;
	margin-right: 15px;
}

.rabbit_maininfo{
	display: flex;
	flex-direction: row;
	line-height: 24px;
	width: 50%;
}

/*Time line*/
.withdot, .nodot{
	list-style-type: none;
	position: relative;
	width: 4px;
	margin-left: 20px;
	padding-top: 50px;
	background: #ffe9d4;
	letter-spacing: 1.2px;
	line-height: 24px;

}
 
.withdot::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: inherit;
}

.time_gallery{
	position: relative;
	bottom: 0;
	width: 1000px;
	padding: 15px;
	left: 45px;
}

.time_dialog{
  	position: relative;
  	bottom: -20px;
  	width: 600px;
  	padding: 15px;
  	background: #f9f9f9;
  	left: 45px;
}

.time_dialog::before {
	content: '';
	position: absolute;
	bottom: 24px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 16px 8px 0;
	border-color: transparent #f9f9f9 transparent transparent;
	left: -15px;
}

.card-columns{
	column-count:2;
}

.col-count{
	column-count:3;
}

/*rabbitpage personality*/
.personality{
	position: relative;
	width: 100%;
	height: auto;
	border-radius: 6px;
	background-color: #fff3e8;
	letter-spacing: 2px;
	line-height: 24px;
}

.personality_text{
	padding:20px;
	color: #6a5a48;
}

.personality_text h3{
	color: #6a5a48;
}

.angle{
	font-size: 14px;
	background-color: #ffe9d4;
	border-top-right-radius: 6px;
	border-bottom-right-radius:6px;
	padding-top: 30px;
}

.angle_profile{
	letter-spacing: 1px;
	padding-bottom: 4px;
	text-align: center;
}

.angle_profile img{
	border-radius: 100%;
	border: solid 1px #ffa74f;
	width: 70px;
	height: 70px;
	overflow: hidden;
}

.angle_name li{
	text-align: center;
	padding-right: 0px;
	margin-bottom: -2px;
}

.personality_triange {
	position: absolute;
	top: 84px;
	right: 178px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 16px 0px 16px 18px;
	border-color: transparent  transparent transparent  #fff0e8;
}

.basicinfo_btn{
	width: 400px;
}

.nowarp{
	width: 100%;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis; 
}

.video{
	width: 60%;
	display: block;
}

.videoMobile{
	display: none;
}

.videoText{
	width: 40%;
	padding-left: 20px;
}

#allnews-button{
	border-radius: 4px;
	border: solid 1px #6a88ff;
	font-size: 12px;
	padding: 4px;
}

.newsContent{
	position: relative;
	width: 50%;
	padding-left: 15px;
	padding-right: 15px;
}

.videoContent{
	position: relative;
	width: 50%;
	padding-left: 15px;
	padding-right: 15px;
}

.Incentive, .donationNumbers{
	display: flex;
	flex-direction: row;
}

.requiredFee, .getFee{
	width: 50%;
}

.requiredFee{
	order: 2;
}

.requiredFee li{
	text-align: right;
}

.mobileHr{
	display: none;
}

.donaSection{
	padding-left: 20px;
}

#NameContent{
	width: 100%;
}

.searchbar{
	width: 100%;
}

.search-button{
	display: inline;
}

.md-input-invalid md-radio-group{
  color: rgb(221,44,0);
}

.btn-primary.disabled, .btn-primary:disabled{
	background-color: #bbbbbb;
    border-color: #bbbbbb;
}

/*footer*/
.footer{
	font-family: Arial,"微軟正黑體","Microsoft JhengHei",Roboto,"PingFang",sans-serif;
	background-color: #ff900a;
	padding-top: 40px;
}

.footContent{
	flex-grow: 1;
	color: #ffffff;
}

.footer_title{
	font-size: 1.3rem;
	font-weight: 600;
	margin-bottom: 16px;
}

.footer ul li{
	font-size: 16px;
	margin-bottom: 8px;
	line-height: 20px;
}

.footer-copyright{
	font-size: 14px;
	color: #ffffff;
	margin-top: 36px;
	padding: 12px;
	background-color: #ff800a;
	text-align: center;
	line-height: 20px;
}

.footer-copyright a{
	color: #ffffff;
}

.reportdetails{
	margin-left: auto;
	margin-right: auto;
	width: 600px;
}

.reportdetails img{
	width: 100%;
	height: auto;
	margin-bottom: 10px;
	box-shadow: 0 3px 5px rgba(0,0,0,.16);
}

.reportdetails p{
	line-height: 1.5rem;
}

.modal-body p{
	line-height: 1.35rem;
}

.tempmsg{
	background-color: #f75454; 
	color: #ffffff; 
	text-align: center;
}

.emailNote{
	background-color: #fff3e8;
}

.aboutMenu{
	display: none;
	width: 100%;
	position: absolute;
	top: 64px;
}

.flexMenu{
	display: flex;
	flex-direction: row;
	background-color: #4268FF;
	padding-left: 160px;
	height: 50px;
	line-height: 50px;
}

.menuItem{
	color: #ffffff;
	padding: .5rem 1rem;
}

.aboutMenu a:hover{
	color: #dee5ff;
}

.h4{
	font-size: 1.3rem;
}

.videoTitle{
	line-height: 22px;
}

.listHeader, .listItem{
	display: flex;
	flex-direction: row;
}

.listHeader{
	line-height: 50px;
	background-color: #cccccc;
	margin-bottom: 10px;
}

.listItem{
	background-color: #eeeeee;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: double;
}

@media (max-width: 1024px) {
	.CTA1 {
	    left: calc(50% + 40px);
	}

	.CTA2 {
	    left: calc(50% - 88px);
	    top: 200px;
	}

	.header-logo, .nav-Manage{
		display: none;
	}

	.visual-overlayL img{
		width: auto;
		height: 300px;
	}

	.visual-overlayR img{
		width: auto;
		height: 300px;
	}

	.videoContent{
		width: 100%;
	}

	.nav{
		padding-left: 0px;
		flex-wrap: nowrap;
	}

	.header{
		overflow: auto;
  		white-space: nowrap;
	}
	
	.compactNav{
		line-height: 50px;
		background-color: #ffffff;
	}

	.flexMenu{
	}

	.tempmsg{
		margin-top: 3rem;
	}

	.visual-Index{
		height: 300px;
		/*background-image:url("../img/banners/visual-sm.jpg");*/
	}

	.visual-background{
		height: 210px;
		background-image:url("../img/banners/background-sm.jpg");
	}

	.h4{
		font-size: 1.2rem;
	}

	.announceWording {
	    line-height: 26px;
	    font-size: 0.9rem;
	}

	.mb-5, .my-5 {
	    margin-bottom: 1rem!important;
	}

	.videoContent{
		/*display: none;*/
		padding-left: 0px;
		padding-right: 0px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.newsContent{
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}

	.newcontainer{
		padding-left: 15px;
		padding-right: 15px;
	}

	.grid-container{
	  	grid-template-columns: 50% 50%;
	}
}

@media (max-width: 425px) {
	.visual-Index{
		height: 300px;
		background-image:url("../img/banners/visual_m.jpg");
	}

	.visual-overlayL img{
		display: none;
	}

	.visual-overlayR img{
		display: none;
	}

	.CTA1 {
	    display: none;
	}

	.CTA2 {
	    display: none;
	}

	.flexMenu{
		padding-left: 0px;
	}

	.menuItem{
		color: #ffffff;
		padding: .5rem .5rem;
	}

	.h4{
		font-size: 1.2rem;
	}

	.h5{
		font-size: 1rem;
	}

	.announceWording, .IncentiveWording {
	    line-height: 24px;
	    font-size: 0.9rem;
	}

	.mb-5, .my-5 {
	    margin-bottom: 1rem!important;
	}

	p{
		font-size: 0.8rem;
	}

	.ct1 p{
		font-size: 16px;
	}

	.video{
		width: 100%;
		display: block;
	}

	.videoTitle{
		font-size: 20px; 
		font-weight: bold;
		line-height: 22px;
	}

	.videoText{
		width: 100%;
		padding-left: 0px;
		padding-top: 20px;
	}

	.videoflex{
		flex-direction: column;
	}

	.videoMobile{
		display: block;
	}

	.Incentive, .donationNumbers{
		display: flex;
		flex-direction: row;
	}

	.IncentiveWording{
		padding-left: 1rem;
	}

	.IncentiveWording, .requiredFee, .getFee{
		width: 50%;
	}

	.requiredFee{
		order: 2;
	}

	.getFee{
		order: 1;
	}

	.requiredFee li{
		text-align: right;
	}

	.col-md-12, .col-md-3{
		padding-left: 15px;
		padding-right: 15px;
	}

	.mobileHr{
		display: block;
		width: 100%;
	}

	.filterSelect .title, .title {
		font-weight: bold;
		width: 100%;
	}

	.search-button{
		display: block;
		width: 100%;
	}

	.filterSelect li:hover label{
		color: #333;
	}

	.personality{
		margin-left: 0px;
		margin-right: 0px;
	}

	.angle{
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.time_dialog{
		width: 275px;
	}

	.time_gallery{
		width: 290px;
	}

	.card-columns, .col-count{
		column-count:1;
	}

	.modal-body img{
		width: 100%;
		height: auto;
	}

	.reportdetails{
		margin-left: auto;
		margin-right: auto;
		width: 98%;
	}

	.footer_title{
		margin-top: 24px;
	}

	.personality_triange{
		display: none;
	}

	.grid-container{
	  	grid-template-columns: 100%;
	}

	.grid-item {
	    margin: 0px 15px 0px 15px;
	}

	.newcontainer{
		padding-left: 5px;
		padding-right: 5px;
	}

	.news{
		width: 26%;
	}

	.donate{
		width: 74%;
	}

	.linkContent{
		font-size: 12px;
	}

	.videoContent{
		width: 100%;
	}

	.videoTitle{
		font-size: 16px; 
		font-weight: bold;
	}

	.news-filter {
	    margin-right: 12px;
	}

	.footcontainer{
		flex-direction: column;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.nav-link {
	    padding: .5rem .5rem;
	}
}

@media print{
	#print {
    visibility:hidden;
  }
}