@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900');

@font-face {
font-family: 'Circular Std Book';
font-style: normal;
font-weight: normal;
src: local('Circular Std Book'), url('../fonts/CircularStd-Book.woff') format('woff');
}


@font-face {
font-family: 'Circular Std Book Italic';
font-style: normal;
font-weight: normal;
src: local('Circular Std Book Italic'), url('../fonts/CircularStd-BookItalic.woff') format('woff');
}


@font-face {
font-family: 'Circular Std Medium';
font-style: normal;
font-weight: normal;
src: local('Circular Std Medium'), url('../fonts/CircularStd-Medium.woff') format('woff');
}


@font-face {
font-family: 'Circular Std Medium Italic';
font-style: normal;
font-weight: normal;
src: local('Circular Std Medium Italic'), url('../fonts/CircularStd-MediumItalic.woff') format('woff');
}


@font-face {
font-family: 'Circular Std Bold';
font-style: normal;
font-weight: normal;
src: local('Circular Std Bold'), url('../fonts/CircularStd-Bold.woff') format('woff');
}


@font-face {
font-family: 'Circular Std Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Circular Std Bold Italic'), url('../fonts/CircularStd-BoldItalic.woff') format('woff');
}


@font-face {
font-family: 'Circular Std Black';
font-style: normal;
font-weight: normal;
src: local('Circular Std Black'), url('../fonts/CircularStd-Black.woff') format('woff');
}


@font-face {
font-family: 'Circular Std Black Italic';
font-style: normal;
font-weight: normal;
src: local('Circular Std Black Italic'), url('../fonts/CircularStd-BlackItalic.woff') format('woff');
}
html{
/*	-webkit-overflow-scrolling : touch;*/
}

a { word-wrap: break-word }
code {
  font-size: 87.5%;
  color: #222;
  background-color: rgba(127, 219, 255, .25);
}
body{
	width: 100%;
	
}
.header-right{
	margin-right: 0 !important;
}


.container-narrow { max-width: 48em }
.bg-dark { background-color:#102630; }
.button-logo {
  width: 2em;
  height: 2em;
  border-radius: 10000px;
  border-width: 3px;
}
.button-logo:hover {
  color: #102630;
  background-color: #ff4136;
  opacity: 0.9;
  box-shadow: 0 0 0 2px rgba(255,65,54,.5);
}
.button-logo:before,
.button-logo:after {
  border-radius: inherit;
}
.button-outline { border-width: 2px }
.button-transparent:focus { box-shadow: inset 0 0 0 2px }
.button-grow { transition: transform, box-shadow, .05s ease }
.button-grow:hover { transform: scale(1.0625) }
.button-grow:active { transform: scale(.9375) }
.icon { top: .03125em }


section{
	background: #bfe6f6;
}

.container{
	max-width: 110rem;
}

.flex div{
	
}

.nav-logo{
	width: 150px;
	margin: 10px 0
}
.col-xs-6 .headline{
	padding: 0 70px;
	font-size: 5rem;
	color: #FFFFFF;
	font-family:'Circular Std Medium';
	font-weight:normal;
	margin-top: 0.2rem;
}
.col-xs-6 .headline span{
	
	color: #d3df5a
}
.col-xs-6 img{
	position: absolute;
    width: 60px;
    margin-left: 320px;
    top: 6px;
}
.women-cha{
	width: 100%;
}
.col-lg-3{
	padding-right: 0px;
    padding-left: 0px;
/*	height: 370px;*/
}
.navbar-right{
	padding-top: 15px;
    padding-bottom: 15px;
	margin: 0;
	
}
.jumbotron{
	padding-bottom: 0;
	margin-bottom: 0;
	background: #009ddc;
	padding-top: 0
}
.col-xs-12 p{
	text-align: left;
	font-size: 1.5rem;
}
footer{
	background: #009ddc;
	padding-bottom: 60px;
	padding-top: 30px;
	color: #FFFFFF;
	font-family:'Circular Std Book';
	font-weight:normal;
}
footer .container{
}
footer a{
	color: #d3df5a;
	font-family: 'Circular Std Medium';
	/*font-size: 1.75rem;*/
	border-bottom: 1px solid;
	text-decoration: none !important;
}
footer a:hover{
	text-decoration: none;
	color: #d3df5a;
}
footer a:visited{
	text-decoration: none !important;
	color: #d3df5a;
}
/*btn customise*/
.dropup .dropdown-menu{
	width: 100%;
}
.dropdown-menu{
	box-shadow: none;
}
.btn-social{
/*	margin-left: 150px;*/
	background: none ;
/*	padding: 16px 12px;*/
	padding: 16px 12px 25px;
/*	margin-top: -10px;*/
	padding-right: 4rem;
}
.btn{ 
	border: none !important; 
	box-shadow: none !important; 
}
input,button,a {
    outline:0 none !important; 
/*	blr:expression(this.onFocus=this.blur());*/
}
.dropdown-menu{
	border:none !important; 
    border-radius: 0 !important;
	background: none
}
.dropup .dropdown-menu{
/*	bottom: 48%;*/
}

.triangle03{
    width: 0;
    height: 0;
    border: 10px solid transparent;
	border-top: 10px solid #acacac;
	float: right;
	margin-right: 73px;
}
.dropup li{
	background: #acacac;
}
.dropdown-menu .divider{
	margin: 0
}
.dropdown-menu li a{
	color: #FFFFFF !important;
	padding: 15px 20px;
	text-align: center
}

.jumbotron .col-xs-6 .col-xs-12 p{
	color: #FFFFFF;
	font-family:'Circular Std Book';
	font-weight:normal;
	font-size: 1.5rem;
}
.jumbotron .col-xs-6 .col-xs-12 p a{
	color: #d3df5a;
	font-family:'Circular Std Medium';
	font-size: 1.75rem;
    border-bottom: 1px solid;
	text-decoration: none
}

/*back button*/
.col-lg-3 .p2{
	padding: 0;
	margin-bottom: 0 !important;
} 
.back h3{
	color: #009ddc;
	font-family: 'Playfair Display', serif;
	font-weight:700;
	font-size: 2.75rem;
	padding: 2.2rem 0;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	width: 40%;
	margin-left: 30%;
}
.back h5{
	color: #009ddc;
	font-family: 'Circular Std Book';
	font-size: 2.75rem;
	padding: 2.2rem 0;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	width: 60%;
	margin-left: 20%;
}
.back h4{
	height: 211px;
	padding: 0 2rem;
	color: #FFFFFF;
	margin-top: 0 !important;
	font-weight: 400;
	font-size: 1.8rem;
	line-height: 2.7rem;
}

.back p{
	width: 50%;
	float: left;
	margin-bottom: 0 !important;
}
.dropup button img{
	height: 70px
}
/*.player-play{
	background-image: url(../images/hear.png);
}*/
button .icon{
	width: 2.7em;
	height: 10rem;
	top: 0;
}
.back p button{
	height: 10rem;
	background-color: rgba(0, 0, 0, 0);
	border: none !important;
}
.back p button:hover{
	background: none;
	border: none !important;
}

.button-grow{
	transform: none !important;
}
.button-grow:hover{
	transform: none !important;
}
.button-transparent:hover{
	box-shadow: none !important;
}
.button:hover{
	box-shadow: none !important;
	text-decoration: none !important;
}
.button{
	background-color: none !important;
}
.button-transparent{
	background-color: none !important;
}
.mr2{
	margin-left: 4rem;
}
.dropup .dropdown-menu{
	top: -241px;
}
/*
.back{
	z-index: 0;
	background: -webkit-linear-gradient(#fdc689, #f5989d); 
    background: -o-linear-gradient(#fdc689, #f5989d); 
    background: -moz-linear-gradient(#fdc689, #f5989d); 
    background: linear-gradient(#fdc689, #f5989d);
}
*/
.c1{
/*	z-index: 0;*/
	background: -webkit-linear-gradient(#b89ff9, #8767e9); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#b89ff9, #8767e9); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#b89ff9, #8767e9); /* Firefox 3.6 - 15 */
    background: linear-gradient(#b89ff9, #8767e9);
	overflow: hidden
}
.c2{
/*	z-index: 0;*/
	background: -webkit-linear-gradient(#ffd689, #fcb11b); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#ffd689, #fcb11b); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#ffd689, #fcb11b); /* Firefox 3.6 - 15 */
    background: linear-gradient(#ffd689, #fcb11b);
	overflow: hidden
}
.c3{
/*	z-index: 0;*/
	background: -webkit-linear-gradient(#ffb768, #f7742c); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#ffb768, #f7742c); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#ffb768, #f7742c); /* Firefox 3.6 - 15 */
    background: linear-gradient(#ffb768, #f7742c);
	overflow: hidden
}
.c4{
/*	z-index: 0;*/
	background: -webkit-linear-gradient(#fecce2, #fe8fc0); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#fecce2, #fe8fc0); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#fecce2, #fe8fc0); /* Firefox 3.6 - 15 */
    background: linear-gradient(#fecce2, #fe8fc0);
	overflow: hidden
}
.c5{
/*	z-index: 0;*/
	background: -webkit-linear-gradient(#feb5d8, #f774cf); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#feb5d8, #f774cf); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#feb5d8, #f774cf); /* Firefox 3.6 - 15 */
    background: linear-gradient(#feb5d8, #f774cf);
	overflow: hidden
}

.back p button{
/*	z-index: 999*/
}

.bar-position{
	position: relative;
	width: 90%;
	margin-left: 5%;
	bottom: 80px;
	color: #FFFFFF;
	text-align: left;
	
}
.progress{
	width: 80%;
	float: left
}
.front-hear{
	width: 18%;
	position: absolute;
    display: block;
    top: -50px;
    margin-left: 85%;
}

/*mobile css*/
@media (max-width:767px){
	.navbar{
		margin-bottom: 0;
	}
	.collapse {
    	display: block;
	}
	.nav-logo {
		margin: 5px 0;
		float: right;
	}
	.jumbotron .container .row .col-xs-6{
		width: 100%;
	} 
	.jumbotron .container .row .col-xs-6 .col-xs-12{
		padding-left: 40px;
		padding-right: 40px;
		padding-bottom: 20px;
	} 
	.col-xs-6 .headline{
		font-size: 4rem;
		padding: 0 40px;
	}
	.col-xs-6 img{
		width: 50px;
		margin-left: 250px;
		top: -0px;
	}
	section .container{
		/*margin-right: 20px;
		margin-left: 20px;*/
	}
	.back h4{
		height: 265px;
	}
	.women-cha{
		height: 100%
	}
	footer .col-xs-12{
		padding-left: 20px;
		padding-right: 20px;
	}
	.dropup .dropdown-menu{
		top: -397px;
	}
	.dropup .drop-special{
		top: -341px;
	}
	.dropdown-menu li a{
		padding: 23px 20px;
	}
	.triangle03{
		margin-right: 87px;
	}
	
footer a:link, footer a:hover, footer a:active, footer a:visited{
	text-decoration: none !important;
	color: #d3df5a;
	}
}

.c2 .special-char{
		width: 30% !important;
    	margin-left: 35% !important;
	}
.c4 .special-char{
		width: 30% !important;
    	margin-left: 35% !important;
	}
.c5 .special-length{
		height: 176px !important;
	}

@media (min-width:1200px) {
	section .container .row .col-sm-12{
		width: 33.3% !important;
	}
	
	.back h3{
		font-size: 2.8rem;
		padding: 3rem 0;
		width: 30%;
    	margin-left: 35%;
		
	}
	.special-char{
		width: 30% !important;
    	margin-left: 35% !important;
	}
	.special-char-2{
		width: 20% !important;
    	margin-left: 40% !important;
	}
	/*名字多的*/
	.back h5{
		font-size: 2.8rem;
		padding: 1.3rem 0;
		width: 40%;
    	margin-left: 30%;

	}
	.back h4{
		font-size: 2rem;
    	line-height: 2.4rem;
	}
	.dropdown-menu li a{
		padding: 18px 20px;
		font-size: 16px
		
	}
	.dropup .dropdown-menu{
		top: -358px;
	}
	.btn{
		
	}
	.triangle03{
		margin-right: 93px;
	}
}

@media (min-width:992px) and (max-width:1200px){
	section .container .row .col-sm-12{
		width: 33.3% !important;
	}
	.back h3{
		font-size: 2.8rem;
		padding: 1.3rem 0;
	}
	/*名字多的*/
	.back h5{
		font-size: 2.8rem;
		padding: 1.3rem 0;
	}
	.back h4{
		font-size: 2rem;
    	line-height: 2.4rem;
		height: 190px
	}
	.dropdown-menu li a{
		padding: 13px 20px;
		
	}
	.dropup .dropdown-menu{
		top: -273%;
	}
	.c5 .special-length{
		height: 155px !important;
	}
	.front-hear{
		top: -38px
	}
}
@media (min-width:769px) and (max-width:991px){
	.back h4{
		font-size: 1.1rem;
    	line-height: 1.3rem;
		height: 126px;
	}
	section .container .row .col-sm-12{
		width: 33.3% !important;
	}
	.back h3{
		font-size: 2.1rem;
		padding: 1.0rem 0;
	}
	/*名字多的*/
	.back h5{
		font-size: 2.1rem;
		padding: 1.0rem 0;
	}
	.dropdown-menu li a{
		padding: 6px 20px;
		font-size: 1rem
		
	}
	.dropup .dropdown-menu{
		top: -189%;
	}
	.dropdown-menu li a embed{
		width: 15px;
	}
	.triangle03{
		margin-right: 67px;
	}
	.c5 .special-length{
		height: 99px !important;
	}
	.front-hear{
		top: -20px
	}
	
}

@media (min-width:460px) and (max-width:768px){
	.card-grid{
		width: 100%
	}
	.women-cha{
		width: auto
	}
	.front{
/*		background: steelblue*/
	}
	.c5 .special-length{
		height: 265px !important;
	}
	.dropup .dropdown-menu{
		top: -325%;
	}
	.triangle03{
		margin-right:158px
	}
	.front-hear{
		top: -40px;
		margin-left: 90%;
		width: 10%
	}
	
}
@media (max-width:459px) {
	.front-hear{
		top: -35px;
		
	}
	.special-char-2 {
        width: 20% !important;
    margin-left: 40% !important;
}
}
/*feedback*/
.bg-darken-2{
	background-color: rgba(0,0,0,0.00);
}
.hearing{
	font-size: 16px;
/*	margin: 0;*/
	
}
.navbar{
	margin-bottom: 0
	
}
.jumbotron .container .row .col-xs-6{
	margin-top: 25px
}
.dropdown-menu li a{
	
}



.container {
    max-width: 1600px !important;
    width: 100%;
}
@media (min-width:1600px){
.back{
	height: 620px !important
}
}
@media (min-width:1350px) and (max-width:1599px){
	.back{
	height: 560px !important
}
}
@media (min-width:1200px) and (max-width:1349px){
	.back{
	height: 490px !important
}
	.bar-position{
		    bottom: 170px;
	}
}
@media (min-width:1000px) and (max-width:1199px){
	.back{
	height: 450px !important
}
	.bar-position{
		    bottom: 150px;
	}
}
@media (min-width:800px) and (max-width:999px){
	.back{
	height: 360px !important
}
	.bar-position{
		    bottom: 120px;
	}
}
@media (min-width:768px) and (max-width:799px){
	.back{
	height: 330px !important
}
}
@media (min-width:1350px) and (max-width:1599px){
	.back h4 {
		height: 311px;
	}
	.dropup .dropdown-menu {
    top: -461px;
	}
	.triangle03 {
    margin-right: 123px;
	}
	.bar-position{
		    bottom: 190px;
	}
}
@media (min-width:1600px) {
	.back h4 {
		height: 361px;
	}
	.dropup .dropdown-menu {
    top: -508px;
	}
	.triangle03 {
    margin-right: 133px;
	}
	.bar-position{
		    bottom: 170px;
	}
}
@media (min-width:1350px) and (max-width:1482px){
	.c5 .special-length {
    height: 276px !important;
}
	
}
@media (min-width:1483px) and (max-width:1599px){
	.c5 .special-length {
    height: 270px !important;
}
	
}
@media (min-width:1600px) {
	.c5 .special-length {
    height: 360px !important;
}
	
}

/*@media (min-width:1031px) and (max-width:1200px){
	.special-char-2 {
        width: 30% !important;
    margin-left: 35% !important;
}
}*/
@media (min-width:768px){
	.special-char-2 {
        width: 20% !important;
    margin-left: 40% !important;
}
}

@media (min-width:895px) and (max-width:990px){
	.c5 .special-length {
    height: 125px !important;
}
}