@charset "UTF-8";
/* Future Smile US CSS Document */

/*
font-family: 'arial', sans-serif; 
*/
.material-icons.md-18{font-size:18px}
.material-icons.md-24{font-size:24px}
.material-icons.md-36{font-size:36px}
.material-icons.md-48{font-size:48px}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark{color:rgba(70,130,180,1);transform:translateY(1px)}
.material-icons.md-dark.md-inactive{color:rgba(0,0,0,.26)}


/* Rules for using icons as white on a dark background. */
.material-icons.md-light{color:rgba(255,255,255,1)}
.material-icons.md-light.md-inactive{color:rgba(255,255,255,.3)}

:root {
	--main-orange: #F1AB32;
	--main-green: #0d998a;
	--main-grey: #333;
	--main-logo-color: #f4af25;/*logo的橙色*/
}
html{font-size:10px;text-overflow:scroll;box-sizing:border-box}
*,:after,:before{box-sizing:inherit;padding:0;margin:0}
body{font-family:arial,sans-serif;padding:0;margin:0}
a,a:hover{color:inherit;text-decoration:none}
table{border-collapse:collapse;border-spacing:0}
div:empty{height:20px}
h1,h2{font-family:arial,serif;font-weight:bold;color:var(--main-orange)}
.hidden{display:none}
.img-responsive{display:block;max-width:100%;height:auto}
.center-block{display:block;margin-left:auto;margin-right:auto}
.text-center{text-align: center;}
.row{width:100%}
.row:after,.row:before{content:" ";display:table}
.row:after{clear:both}
.col-xs-12, .col-xs-6, .col-xs-4, .col-xs-3, .col-xs-2,.col-sm-8, .col-sm-6, .col-sm-4{position:relative;min-height:1px;padding-right:0;padding-left:0}
.col-xs-12{width:100%;float:left}
.col-xs-6{width:50%;float:left}
.col-xs-4{width:33.33%;float:left}
.col-xs-3{width:25%;float:left}
.col-xs-2{width:16.67%;float:left}
.main_image{width:100%;text-align: center;margin-top: 20px;}
.main_image img{width:80%}
.mt2v{margin-top:2vh}

/*header*/
header{padding:1vh 0 .5vh;width:100%;display:flex;justify-content:center;align-items:center}
header h1{width:350px;height:105px;text-indent:-1000rem;background:url(../images/futuresmile_logo.png) no-repeat center;background-size:100%}
p.header{font-family:arial,cursive;font-weight: bold;font-size:calc(1.8rem + .7vw);color:var(--main-green);margin-left:1vw;font-weight:500;letter-spacing:1px;transform:translateY(2px)}
#wrapper{max-width:1200px;width:100%;margin:0 auto 3vh;box-shadow:0 15px 15px -10px rgba(13,153,138,.7)}

/*video carousel*/
.videocontent{width:100%}
.vjs-poster{height: 100% !important}
.video .swiper-pagination-bullet{background:#fff;opacity:.5}
.video .swiper-pagination-bullet-active{background:var(--main-orange);opacity:1}
.video .swiper-button-prev, .swiper-button-next{height: 44px!important}
.slideshow_container{margin:2px 0}
.tcl .col-xs-6:first-child{padding-right:1px}
.tcl .col-xs-6:last-child{padding-left:1px}
.video .swiper-slide:not(.swiper-slide-active){opacity:.1}

/*intro*/
.intro{padding:3vh 5vw}
.intro img{width:100%;height:auto;float:left;margin:10px 15px 10px 0}
.intro p{font-size:calc(1.2rem + .5vw);line-height:145%;margin-bottom:10px}
.intro p~p,.projects p~p{text-indent:3vw}
.intro p strong,.projects p strong{font-weight:600;color:var(--main-orange)}
.application,.donation,.medical,.partners,.projects,.volunteers,.list{padding:3vh 5vw}
.projects{overflow:hidden}
.projects+.projects{padding-top:0}
.donation p,.medical p,.partners p,.projects p,.volunteers p{font-size:calc(1.2rem + .5vw);line-height:145%;margin-bottom:10px}
.medical img,.projects img{width:35%;height:auto;float:left;margin:10px 15px 10px 0}
.med_application{padding:3vh 0;margin-bottom:3vh}
.med_application h2{font-family:arial,sans-serif;font-weight: bold;font-size:calc(1.4rem + 1vw);color:var(--main-grey);text-align:center}
.volunteer_app{margin:35px auto 15px;background:var(--main-green);width:325px;padding:15px 10px;color:#fff;text-align:center;font-size:calc(1.4rem + .35vw);text-shadow:1px 2px #000;transition:background .5s ease}
.volunteer_app:hover{background:var(--main-grey)}
.med_volunteers{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;list-style-type:none;margin-top:2vh}
.med_volunteers li{margin:8px}
.med_volunteers li a{display:block;background:var(--main-green);color:#fff;font-size:calc(1.4rem + .35vw);width:375px;text-align:center;padding:10px 12px;text-shadow:1px 2px #000;transition:all .5s ease}
.med_volunteers li a:hover{background:var(--main-grey)}
.application h1{font-family:arial,sans-serif;font-weight: bold;font-size:calc(1.6rem + .5vw);color:var(--main-grey);text-align:center;margin-top:2vh}
.partners_logo{padding:0 0 3vh;display:flex;justify-content:center;flex-wrap:wrap}
.logo{width:200px;height:100px;border:solid 1px var(--main-grey);display:flex;margin:2vh 7px}
.logo img{margin:auto;width:90%}
.donate{padding:3vh 5vw;display:flex;justify-content:space-around}
.donate_channel{flex:1;border:3px solid #f08080;margin:10px .5vw;padding:15px 8px 10px}
.donate_channel h3{font-family:arial,sans-serif;font-weight:bold;font-size:calc(1.6rem + .7vw);text-align:center;color:#1e90ff;margin-bottom:10px}
.donate_channel p{font-size:calc(1.4rem + .5vw);text-align:center}
.donate_channel form{width:85%;margin:0 auto}
.donate_channel input[type=image]{width:75%;height:auto;display:block;margin:0 auto}
.donate_channel input[type=image]:hover{border:none}
.donate_disclaimer{font-size:calc(1rem + .5vw);text-align:center}

.list img{margin-bottom:10px}
.list > div{margin-bottom:20px}


@media (min-width: 768px) {
	.col-sm-8{width:60%;float:left}
	.col-sm-6{width:50%;float:left}
	.col-sm-4{width:40%;float:left}
	.list{min-height:500px;}

	.slideshow_container{margin-top:0}

	.video{padding-right:1px}
	.carousel{padding-left:1px}
}


/*news*/
.news{padding:3vh 10vw}
.news h3{font-family:arial,serif;font-weight: bold;font-size:calc(1.4rem + .5vw);margin:10px 0;text-align:center}
.news p{font-size:calc(1rem + .5vw);line-height:140%;margin-bottom:10px}
.news2 p span{color:red}
.news2 p font{font-size:calc(1rem + 1vw);color:red;font-weight:700}
.news img{float:right;margin-left:2vw}
.news_twin{width:40%}
.news_girl{width:15%}
.news_panda{width:15%}
.news_img{width:100%;height:auto;margin:10px 0 20px}
.news .news_img_right{width:35%;float:right;margin-left:2vw}
.news .news_img_left{width:35%;float:left;margin-right:2vw}
.news_img_center{width:50%;display:block;margin:0 auto}
.news_ruru{width:35%;float:right}
.news .news_yanqing{width:35%;float:left;margin-right:2vw}
.news_numbers{display:block;margin:15px auto}
.news_title{width:70%;height:auto;margin:15px 0}
button[type=button]{all:unset;padding:2px 12px;border:solid 1px #333;border-radius:10px;margin-left:10px}
button[type=button] a{font-size:calc(1rem + .5vw);text-align:center;font-weight:600;color:#333}
button[type=button]:hover{background:wheat;border:1px solid #b00000}


/*News figure*/
.news_main{width:90%;display:block;margin:15px auto}
.news_main img{width:100%;height:auto}
.news_main figcaption{font-size:calc(1.2rem + .7vw);text-align:center;line-height:130%;margin-top:10px}


/*News 2020 may*/
.news_main_title{color:#33cc99}

/*form*/
.appForm{margin:2vh auto;width:85%;padding:2vh 2vw;background:linen;font-size:calc(1.2rem + .5vw)}
.appForm h1,.appForm h3{font-family:arial,sans-serif;font-weight: bold;text-align:center;color:#000}
.appForm h1{font-size:calc(1.4rem + .8vw);text-decoration:underline;margin-bottom:10px;color:var(--main-orange)}
.appForm h3{font-weight:400;font-size:calc(1.2rem + .5vw)}
input:hover{border:solid 1px #666;background:beige}
input:focus{background:#ececec}
.form-group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin-bottom:1vh}
.form-group>label{flex:1}
.form-group>input{flex:3;height:30px}
.form-group>div{flex:1}
.question-group{margin:10px 5%}
.question-group>label{margin-right:2%}
.question-group>input{height:30px;width:60px;font-size:calc(1.4rem + .3vw)}
.reference-group{margin:10px 0}
.reference-group>input{height:30px;width:50%;font-size:calc(1.4rem + .3vw)}
.input_group{flex:1;display:flex;justify-content:flex-start}
.radio_control{width:100px;margin-right:20px}
.checkbox_group{display:flex;justify-content:space-between;padding:0 3%}
.checkbox_group div{width:calc(33%)}
textarea{width:calc(125px + 40vw)}
input[type=radio]{transform:translateY(-2px);margin-right:5px}
input[type=checkbox]{transform:translateY(-2px);margin-right:5px}
input[type=date]{flex:2}
input[type=number]{height:25px;margin-left:5px}
input[type=submit]{font-size:1.6rem;padding:5px 10px;text-align:center;border:solid 1px #666;margin:10px 0 0 35px;border-radius:10px;box-shadow:3px 3px 3px #bbb}
input::placeholder,textarea::placeholder{font-size:calc(.8rem + .3vw);transform:translateX(3px);color:#bbb}
textarea{flex:3}
fieldset{width:90%;margin:25px auto 10px;padding:35px 3.5% 20px;background:rgba(0,255,0,.2);position:relative;border-radius:15px;border:solid 1px #666}
legend{font-size:calc(1.4rem + .5vw);background:var(--main-green);text-align:center;font-weight:500;color:#fff;padding:6px 1vw;position:absolute;left:15px;top:-15px;border-radius:15px;z-index:10;box-shadow:3px 3px 3px hsla(0,0%,50%,.7)}
.reference{font-size:calc(1.6rem + .5vw);color:var(--main-green);margin:20px 0 10px}
.radio_btn{width:75%;margin:0 0 0 15px}
.radio_btn tr td{padding:8px 0}


/*Application Process*/
.app_process{width:85%;margin:10px auto;padding:20px 5% 0}
.app_process h3{font-size:calc(1.4rem + .5vw);text-align:center}
.app_process p{font-size:calc(.9rem + .4vw);line-height:140%;margin-bottom:10px;font-style:italic}
.app_doc{font-size:calc(1.2rem + .5vw);line-height:150%;margin:10px 0 10px calc(5% + 5vw)}
section.contact, section.volunteer, section.donations{display:flex;align-items:center}
section.contact{padding:3vh 10vw}
section.contact h2{color:#333;font-size:calc(1.4rem + .2vw);margin:10px 0}
section.contact h2+h2{font-weight:normal}
section.contact .bold{font-weight:bold}
section.contact .content, section.volunteer .volunteers, section.donations .content{width: 100%}
section.contact .col-sm-6{padding:0 15px}
section.contact .icon{width:20px;opacity:.5}

/*footer*/
footer{padding:1.5vh 0;background:var(--main-grey);display:flex;justify-content:center;clear:both;flex-flow:column}
footer h3{color:orange;text-align:center;font-size:calc(1.6rem + .3vw);margin-bottom:5px}
footer p{font-size:calc(1.2rem + .3vw);text-align:center;line-height:150%;color:#fff;font-weight:500;margin:auto;letter-spacing:1px}
footer a:hover{color:#bbb}
footer p br{display:none}
h1.main_title{font-size:calc(2rem + .5vw);text-align:center;margin:1vh 0 0}
h1.main_title2{color:var(--main-grey);font-weight:700;text-align:left}
h1.main_title2 span{color:red}
.dashedhr{width:100%;background-image:linear-gradient(to right,red 0,red 50%,transparent 50%);background-size:16px 2px;background-repeat:repeat-x;margin-top:20px}
.dashedhr2{background-image:linear-gradient(to right,#999 0,#999 50%,transparent 50%)}
.hero{width:100%;height:auto;display:none}
.donation_btn{background-color:var(--main-orange);background-image:url(../images/donation_btn_bg.png);background-repeat:no-repeat;background-position:15px center;background-size:10%;font-size:calc(1.2rem + .4vw);padding:1vh 15px 1vh 50px;color:#fff;display:inline-block;font-weight:600;margin:1vh 0 0 1.5vw;transition:background-color .8s ease}
.donation_btn:hover{background-color:var(--main-green)}


/*Go to top*/
.gototop{position:fixed;left:90%;top:80%;height:35px;width:38px;background:#fff;border:solid 1px #999;padding:17px 2px 10px;font-size:1rem;text-align:center}
#green-triangle{width:0;height:0;border-left:solid 10px transparent;border-right:solid 10px transparent;border-bottom:solid 10px var(--main-green);position:absolute;top:-12px;left:0;right:0;bottom:0;margin:auto;z-index:10}
hr.dotted{border:none;border-top:dotted 3px #999;width:95%;margin:0 auto}
.word_wrap{white-space:nowrap}


/** team member**/
.tms{margin-bottom:25px}
.team-info{min-height:80px;margin:20px 0 10px 0;font-size:16px}
.tms img{margin: 2vh auto;width:11.84vw}
.tms1 img{width:15vw}
.tms2 img{width:14vw}
.team-info .name{padding-top:10px;padding-bottom:10px;color:#000;font-weight:700}
.team-info .position{text-align:center;font-weight:700;padding-bottom:10px;color:#adadad}
.team-info .infos{min-height:8vh;width:60%;margin:0 auto}
.team-info .infos p {text-align: left;font-size: calc(1rem + .5vw);color:#adadad}




@media (max-width: 992px) {
	.checkbox_group{flex-flow:column}
	.checkbox_group div{width:100%}	
}

@media (max-width: 768px) {
	.donate{flex-flow:column}
	.donate_channel{margin:10px 4vw}
	.mobile-hide{display:none}
	.news_img_center{width:60%}
}

@media (max-width: 576px) {
	.tms{margin-bottom:20px}
	.tms img{width:25vw}
	.team-info{font-size: 12px;margin:0;min-height: 60px;}
	.team-info .infos{width:90%}
	.team-info .name{padding-top:5px;padding-bottom:5px}
	.team-info .position{padding-bottom:5px}

	header{flex-flow:column;margin-left:0}
	/* header h1{width:280px;height:200px;padding-bottom:85%;background:url(../images/futurelogo_mobile.png) no-repeat center;background-size:100%} */
	p.header{margin-left:0;transform:translateY(0)}
	.intro img,.medical img,.projects img{float:none;display:block;margin:0 auto 10px;width:85%}
	.news img{float:none;display:block;width:70%;margin:10px auto}
	.news .main_title3 img{width:100%}
	button[type=button]{margin-top:5px}
	.news .news_yanqing{float:none;width:70%;display:block;margin:10px auto}
	.news_img_center{width:70%}
	
	/*form*/
	.form-group{flex-flow:column}
	.form-group>label{margin-bottom:5px}
	.checkbox_group{flex-flow:column}
	.volunteer_app{width:250px;padding:15px 8px}
	.radio_btn{width:90%;margin-left:2.5%}
	footer p br{display:block}
	.mobile-hide{display:none}
}

/*新加的css*/
body{min-width:368px;overflow:auto}
section{min-height:70vh}
.img-projects{width:80%;height:auto}



/* .navigation  li{height: 32px;vertical-align: middle;} */
.donation_btn_li{line-height:32px;background-color:var(--main-orange);background-image:url(../images/donation_btn_bg.png);background-repeat:no-repeat;background-position:15px center;background-size:10%;font-size:calc(1.2rem + .4vw);padding:0 15px 0 50px;color:#fff;display:inline-block;font-weight:600;margin:0 0 0 1vw;transition:background-color .8s ease}
.donation_btn_li:hover{background-color:var(--main-green)}


.clear{clear:both;width:0!important;height:0!important}
.newswiper{background-image:url(../images/3_v-1.0.1.jpg);background-size:100% 100%}
.newswiper .swiper-container{height:100%}
.newswiper .swiper-button-next,.newswiper .swiper-button-prev{height:33px!important}
.newswiper .swiper-wrapper{display:inline-flex;align-items:center}
.news_block{max-width:60%;font-size:1vw;line-height:150%;text-align:left;margin:0 auto;display:flex;align-items:center;height:100%}
.news_block a div{margin-bottom:15px}


.sub_title{font-size:calc(1.5rem + .5vw);margin-bottom:5vh}

.tcl{display:flex}
/* .tcl{display: flex; align-items: center;} */
/* .tcl .col-xs-6{flex: 0 0 50%;} */
.projects img{display:block;width:100%}
.projects p{display:block;margin-top:20px}

.intro .swiper-button-prev, .swiper-button-next{height: 44px!important}

.navigation .donation_btn_li{background-position:18px center;background-size:auto 80%}
h3{margin-top:20px}

@media (max-width: 576px){
	.navigation .donation_btn_li{padding:0 20px 0 50px;margin-left: 0;font-size: 10px;background-position: 20px center;}
}