@charset "utf-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);

/***body config***/
	
html, body {
	height: 100%;
}

body {
	font-family:  Verdana,  Arial;
	color: #bfbfbf;
	background: #FFF;
	margin: auto;
}

header {
	font-family:  Verdana, Arial;
	color: #bfbfbf;
	background: #FFF;
	float: left;
	width: 100%;
} 


section {
	position: relative;
	display: block;
	float: left;
	width: 100%;
	height: 100%;
}


.main {
	width: 75%;
	height: 100%;
	min-height: 400px;
	margin: auto;
	overflow: auto;
		
}

.leftcolumn {
	position: relative;
	float: left;
	width: 85%;
	height: 100%;
	overflow: hidden;
	
}

.rightcolumn {
	float: left;
	width: 12%;
	height: 100%;
	padding: 5px 0px;
}

h1 {
	display: block;
	float: left;
    list-style-type: none;
	line-height: 2.8vh;
	font-size: 2.8vh;
	text-shadow: 0.1875vh 0.1875vh #efefef;
	margin-bottom: 0;
}

h2 {
	display: block;
	float: left;
    list-style-type: none;
	line-height: 2vh;
	font-size: 1.5vh;
	margin-bottom: 0;
}

p {
	display: block;
	float: left;
    list-style-type: none;
	line-height: 2.8vh;
	font-size: 1.8vh;
	text-align:justify;
	margin-bottom: 0;
}

@media only screen and (max-width: 970px) and (orientation: landscape) {
h1 {
	line-height: 2.3vw;
	font-size: 2.3vw;
	text-shadow: 0.1875vw 0.1875vw #efefef;
}

h2 {
	line-height: 1.8vw;
	font-size: 1.3vw;
}

p {
	line-height: 2.8vw;
	font-size: 1.5vw;
}
}

@media only screen and (min-width: 971px) and (orientation: portrait){
h1 {
	line-height: 2.8vh;
	font-size: 2.8vh;
}	

h2 {
	line-height: 2.4vh;
	font-size: 1.4vh;
}

p {
	line-height: 2.8vh;
	font-size: 1.6vh;
}
}



/***style structure***/

@media only screen and (max-width: 970px){
.main {
	width: 95vw;	
	min-height: inherit;
}	

.leftcolumn{
	width: 100%;
}

.rightcolumn {
	display: none
}

.container_header {
	box-sizing: border-box;
	position: absolute;
	display: block;
	top:0;
	width: 100vw;
	left:-2.5vw;
	padding: 0 2.5vw;
	height: 50px;
	float: left;
	background: white;
	z-index:999;
	border:  1px red;
}

.container_section {
	box-sizing: border-box;
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	padding-top: 50px;
	padding-bottom: 25px;
	float: left;
	overflow: auto;
	border: 1px blue;
}

.container_footer {
	box-sizing: border-box;
	position: absolute;
	display: block;
	bottom:0;
	width: 100vw;
	left:-2.5vw;
	padding: 0 2.5vw;
	height: 25px;
	z-index: 999;	
	padding-top: 6.5px;
	font-size: 8px;
	text-align: center;
	background: white;
	border: none 1px green;
}



.container_left{
	position: relative;
	display: block;
	width: 100%;
}

.container_right {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.container_full {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.container_top {
	position: relative;
	display: block;
	width: 100%;
	height: 50%;
}

.container_bottom {
	position: relative;
	display: block;
	width: 100%;
	height: 50%;
}
}



@media only screen and (min-width: 971px) and (orientation: portrait){
.main {
	width: 95%;	
	min-height: inherit;
}

.leftcolumn{
	width: 100%;
}

.rightcolumn {
	display: none
}


.container_header {
	box-sizing: border-box;
	position: absolute;
	display: block;
	top:0;
	width: 100vw;
	left:-2.5vw;
	padding: 0 2.5vw;
	height: 75px;
	float: left;
	background: white;
	z-index:999;
	border:  1px red;
}

.container_section {
	box-sizing: border-box;
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	padding-top: 75px;
	padding-bottom:25px;
	float: left;
	overflow: auto;
	border: 1px blue;
}



.container_footer {
	box-sizing: border-box;
	position: absolute;
	display: block;
	bottom:0;
	width: 100vw;
	left:-2.5vw;
	padding: 0 2.5vw;
	height: 25px;
	z-index: 999;
	padding-top: 6.5px;
	font-size: 12px;
	text-align: center;	
	background: white;
	border: none 1px green;
}


.container_left{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: auto;
}

.container_right {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.container_full {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.container_top {
	position: relative;
	display: block;
	width: 100%;
	height: 50%;
}

.container_bottom {
	position: relative;
	display: block;
	width: 100%;
	height: 50%;
}

}



	
@media only screen and (min-width: 971px) and (orientation:landscape) {
.container_header {
	box-sizing: border-box;
	position: absolute;
	display: block;
	width: 100%;
	height: 12vh;
	float: left;
	z-index: 999;
	background: white;
	border: none 1px red;
}

.container_section {
	box-sizing: border-box;
	position: absolute;
	display: block;
	width: 100%;
	height: 100vh;
	float: left;
	padding-top: 13vh;
	padding-bottom: 5vh;
	overflow: auto;
	border: none 1px blue;
}

.container_footer {
	box-sizing: border-box;
	position: absolute;
	display: block;
	width: 100%;
	height: 5vh;
	float: left;
	bottom: 0;
	padding: 1.875vh 0;
	font-size: 1.75vh;
	text-align: center;
	background: white;
	z-index: 999;
	border: none 1px green;
}


.container_left{
	position: absolute;
	display: block;
	width: 50%;
	height: 100%;
	float: left;
	bottom: 0;
	overflow: hidden;	
}

.container_right {
	position: absolute;
	display: block;
	width: 50%;
	height: 100%;
	right: 0;
	bottom: 0;
	overflow: hidden;
}

.container_full {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.container_top {
	position: absolute;
	display: block;
	width: 100%;
	height: 50%;
	top: 0;
	border: none 1px blue;
}

.container_bottom {
	position: absolute;
	display: block;
	width: 100%;
	height: 50%;
	bottom: 0;
	border: none 1px red;
}

.fa{
	font-size: 40px;
}

}



/*** Style the header ***/

.fafa_menu{
	position: relative;
	right:0;
	float: right;
	padding: 10px 0;
}

@media only screen and (max-width: 970px)  {
.header_logo {
	display:block;
	width: 70%;
	position: absolute;
	
}

.header_logo img{
	display: block;	
	object-fit: contain;
	object-position: left;
	right: 0px;
	width: 100%;
	max-height: 40px;
	padding:5px;

}

.menu_ul{
	display: none;
}

.fafa_menu{
	display: inline-block;
}

.fa{
	font-size: 20px;
}

}


@media only screen and (min-width: 971px) and (orientation: portrait)  {
.header_logo {
	display:block;
	width: 70%;
	position: absolute;
	
}

.header_logo img{
	display: block;	
	object-fit: contain;
	object-position: left;
	right: 0px;
	width: 100%;
	max-height: 65px;
	padding:5px;

}

.menu_ul{
	display: none;
}

.fafa_menu{
	display: inline-block;
}

.fa{
	font-size: 40px;
}

}

@media only screen and (min-width: 971px) and (orientation: landscape) {
.header_logo {
	display: none;

}

.fafa_menu {
	display: none;
}

}



/*** Style the header menu list***/

.header_menu {
	width: 75%;
	height: 100%;
	float: left;
	padding: 5px 0px;
}

.menu_ul {
	float: left;
    list-style-type: none;
	line-height: 2.8vh;
	margin: 0;
	padding: 0;
	font-size: 1.8vh;
}

.menu_ul li a{
	display: block;
	width: 10vh;
}

a:link,a:visited,a:hover,a:active{
	color: #bfbfbf;
	text-decoration: none;
}

.menu_ul li a.active {
    color: #888;
}

.menu_ul li a:hover:not(.active) {
    color: #888;
	transition: 1s;
}



/*** Style the menu dropdown list***/

.menu_dropdn {
	position: relative;
	display: inline-block;
}

.dropdn_list {
	position: absolute;
	display: none;
	Z-index: 1;
	left: 10vh;
	top: 0px;
	width: 25vh;
}

.menu_dropdn:hover .dropdn_list {
	display: inline-block;
}

.dropdn_list a {
	display: inline-block;
	width: 12vh;
}

.dropdn_list a.active {
    color: #888;
}

.dropdn_list a:hover:not(.active) {
    color: #888;
	transition: 1s;
}



/*** Style the Gallery dropdown list always on***/

.dropdn_list_on {
	position: absolute;
	display: inline-block;
	Z-index: 1;
	left: 10vh;
	top: 0px;
	width: 25vh;

}

.dropdn_list_on a {
	display: inline-block;
	width: 12vh;
}

.dropdn_list_on a.active {
    color: #888;
}

.dropdn_list_on a:hover:not(.active) {
    color: #888;
	transition: 1s;
}




/*** Style the fafa menu dropdown list***/



.icon{
    background-color: #fff;
    padding: 0px;
    font-size: 20px;
    border: none;
}

.icon:hover, .icon:focus {
    color: #888;
}


.fafa_list {
    display: none;
    position: absolute;
    background-color: #fff;
    width: 150px;
    overflow: auto;
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
    right: 0;
    z-index: 1;
}

.fafa_list a {
    color: #bfbfbf;
    padding: 5px 5px;
	font-size: 12px;
    text-decoration: none;
    display: block;
}

.fafa_list a:hover {
    color: #888;
    padding: 5px 5px;
    text-decoration: none;
    display: block;
}

.fafa_list a.active {
    color: #888;
}

.show {
	display: block;
}






/*** Style the header menu language switch***/

@media only screen and (max-width: 970px) {
.header_lang {
	display: none;
}
}

@media only screen and (min-width: 971px) and (orientation: portrait) {
.header_lang {
	display: none;
}
}

@media only screen and (min-width: 971px) and (orientation: landscape) {
.header_lang {
	padding:5px 0px 0px 0px;
	float: right;	
	font-size: 1.8vh;
	
}	
}


/***Style Right column logo***/
.logo {
	box-sizing: border-box;
	position: relative;
	float: right;
	top: 0px;
	padding: 10px 0px 5px 0px;	
	height: 100%;
	max-width: 100%;
	object-fit: cover;	
}



/***style Modal popup***/

.container_modal {
	display: none;
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	height: 100%;
	background: white;
	border: none 1px pink;
	overflow: hidden;
}

.container_modal_carousel {
	position: relative;
	box-sizing: border-box;
	display: block;
	height: 100%;
	margin: 0 20px;
	border: none 1px yellow;
		
}



/*** Style the carousal  ***/
/*** Carousal fade-in-fade-out   ***/

.carousel_fade .carousel-inner .carousel-item.active{
	-webkit-animation: fade-in-out 5.5s;
	animation: fade-in-out 5.5s;
}
 
@keyframes fade-in-out {
	0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}
}

@keyframes fade-in-out {
	0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}
}




/***Style the homepage***/

/*** Style the homepage carousel ***/

#home_carousel{  
	position: absolute;
	bottom: 0;
}

#home_carousel .carousel-inner img{ 
	min-height: 100%;
	overflow: hidden;
}

#home .w-100{
	height: 100%!important;
}

@media only screen and (orientation: portrait) {

#home{
	height: 100%;
}


#home .container_bottom{
	height: 100%;
}

#home_carousel{
	position: relative;
	display: block;
	height:100%;	
	width:100%;
}

#home .carousel-inner {
	height: 100%;	
}

#home .carousel-item {
	height: 100%;	
}


#home .carousel-item img {
	position: relative;
	margin:auto;
	object-fit: cover;
}
	
}



@media only screen and (max-width: 970px) and (orientation: landscape) {

#home{
	height: 100%;
}

#home .container_bottom{
	height: 100%;
}


#home_carousel{
	position: absolute;
	display: block;
	bottom: 0;
	height: 100%;
	width:100%;
}

#home .carousel-inner {
	height: 100%;	
}


#home .carousel-item {
	height: 100%;	
}

#home .carousel-item img {
	position: relative;
	margin:auto;
	object-fit: cover;
}

}






/*** Style the approach page ***/
#approach img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media only screen and (max-width: 970px) and (orientation: portrait) {
#approach .container_left {
	height: auto;
}

#approach .container_right {
	height: auto;
}
}

@media only screen and (max-width: 970px) and (orientation:landscape) {
#approach .container_left {
	display: inline-block;
	height: 100%;
	width: 49%;
}

#approach .container_right {
	display: inline-block;
	height: 100%;
	width: 49%;
}


#approach .container_bottom {
	height: 100%;
	width: 100%;
}

#approach img {
	vertical-align: inherit;
}
}

@media only screen and (max-width: 970px){
#approach img {
	padding:0px 20px 0px;
}

#approach h1 {
	padding: 10px 20px;
}

#approach p {
	padding: 0 20px 40px;
}
}

@media only screen and (min-width: 971px) and (orientation:portrait) {
#approach .container_left {
	height: auto;
}

#approach .container_right {
	height: auto;
}

#approach h1 {
	padding: 10px 20px;
}
}

@media only screen and (min-width: 971px) and (orientation:landscape) {
#approach h1 {
	padding: 0 20px 10px;
}

#approach img {
	position: absolute;
}
}

@media only screen and (min-width: 971px) {

#approach p {
	padding:0 20px 20px;
}

}



/*** Style the gallery page ***/
.gallery {
	position: relative;
	display: block;
	padding: 0px 0px 5vh 0px;	
}

.thumbnail img {
	display: block;
	width: 100%;
	height: 25vh;
	object-fit: cover;
	opacity: 0.5;
}

.thumbnail img:hover {
	opacity: 1;
	transition: 0.7s;
}

.thumbnail p {
	text-align: left;
	color: #888;
}

.thumbnail {
	position: relative;
	display: inline-block;
	padding: 0px 0.625vh 0.625vh 0px;
			
}

@media only screen and (max-width: 600px) and (orientation: portrait) {
.thumbnail {
	width: 100%;			
}

.thumbnail img{
	height: 250px;
}

}

@media only screen and (max-width: 600px) and (orientation: landscape) {
.thumbnail {
	width: 32.5%;
}

.thumbnail img{
	height: 150px;
}

}

@media only screen and (min-width: 600px){
.thumbnail {
	width: 32.5%;			
}
	
}





/*** Style the project page ***/

#project p {
	width:100%;
}

@media only screen and (max-width: 970px) {
#project .container_left {
	height: auto;
}

#project .container_right {
	height: auto;
}

.modal_onclick_img{
	display: none;
}

.project_img{
	display: block;
	width: 100%;
	height: 100%;
}

.project_img img{
	width:100%;
	height: 100%;
	object-fit: cover;
	padding:0 20px;
}
	

.container_text_content {
	display: none;
}

.container_text_abstract {
	position: relative;
	display: block;
	width: 100%;
}

.container_text_abstract p{
	padding: 0 20px 10px;
}

#full_Content {
	display: none;
}

.abstract_onclick {
	display: block;
	cursor: pointer;
}

.abstract_onclick button {	
    display: inline-block;
	float: right;
	background-color: #FFF;
    border: none;
    color: #bfbfbf;
    text-align: right;
    text-decoration: none;
    font-size: 1.8vh;
	padding: 0 20px 20px;
}

.abstract_onclick button:focus {	
    outline: none;
}


.showMore::after {
	content: "[+ view more...]";
}

.showLess::after {
	content: "[view less]";
}


#gallery .container_gallery {
	position: relative;
	display: block;
}


#gallery img {
	position: relative;
	width: 100%;
	height: 100%;
	padding:0px 20px 20px;
	object-fit: cover;
}





}
@media only screen and (max-width: 970px) and (orientation: portrait){
.container_text_title {
	position: relative;
	display: block;
	width: 100%;
	height: 9vh;
	padding: 10px 20px;
}

.project_title {
	width: 100%;
	height: 4vh;

}

.project_info {
	width: 100%;
	height: 5vh;
}

.division_line {
	display: inline-block;
	height: 0.1vh;
  	width: 75%;
	margin: 3vh 12.5%;
  	background-color:  #bfbfbf;
}

.abstract_onclick button {
    text-decoration: none;
    font-size: 1.8vh;
}
	
}

@media only screen and (max-width: 970px) and (orientation: landscape){
.container_text_title {
	position: relative;
	display: block;
	width: 100%;
	height: 9.6vw;
	padding: 10px 20px;
}

.project_title {
	width: 100%;
	height: 2.9vw;

}

.project_info {
	width: 100%;
	height: 3.5vw;
}

.division_line {
	display: inline-block;
	height: 0.1vw;
  	width: 75%;
	margin: 3vh 12.5%;
  	background-color:  #bfbfbf;
}

.abstract_onclick button {	
    font-size: 1.8vw;
}

	
}

@media only screen and (min-width: 971px) and (orientation: portrait){
#project .container_left {
	height: auto;
}

#project .container_right {
	height: auto;
}


.modal_onclick_img{
	display: none;
}

.project_img{
	display: block;
	width: 100%;
	height: 100%;
}

.project_img img{
	width:100%;
	height: 100%;
	object-fit: cover;
	padding:0 20px;
}
	
.container_text_title {
	position: relative;
	display: block;
	width: 100%;
	height: 9vh;
	padding: 10px 20px;
}


.project_title {
	width: 100%;
	height: 4vh;

}

.project_info {
	width: 100%;
	height: 5vh;
}


.container_text_title h1{
	display: block;
	width: 100%;
}

.container_text_title p{
	display: block;
	width: 100%;
}

.container_text_content {
	display: none;
}

.container_text_abstract {
	position: relative;
	display: block;
	width: 100%;
}

.container_text_abstract p{
	padding: 0 20px 10px;
}

#full_Content {
	display: none;
}

.abstract_onclick {
	display: block;
	cursor: pointer;
}


.abstract_onclick button {	
    display: inline-block;
	float: right;
	background-color: #FFF;
    border: none;
    color: #bfbfbf;
    text-align: right;
    text-decoration: none;
    font-size: 1.8vh;
	padding: 0 20px 20px;
}

.abstract_onclick button:focus {	
    outline: none;
}


.showMore::after {
	content: "[+ view more...]";
}

.showLess::after {
	content: "[view less]";
}


#gallery .container_gallery {
	position: relative;
	display: block;
}


#gallery img {
	position: relative;
	width: 100%;
	height: 100%;
	padding:0px 20px 20px;
	object-fit: cover;
}

.division_line {
	display: inline-block;
	height: 0.1vh;
  	width: 75%;
	margin: 3vh 12.5%;
  	background-color:  #bfbfbf;
}




}

@media only screen and (min-width: 971px) and (orientation:landscape){
.container_text_title {
	position: relative;
	display: block;
	width: 100%;
	height: 9vh;
	border: none 1px green;
	padding: 0 20px;
}

.project_title {
	width: 100%;
	height: 4vh;

}

.project_info {
	width: 100%;
	height: 5vh;
}

.container_text_content {
	position: absolute;
	display: block;
	width: 100%;
	height:  72vh;
	overflow: auto;
	padding: 0px 20px;
}



.division_line {
	display: inline-block;
	height: 0.1vh;
  	width: 75%;
	margin: 3vh 12.5%;
  	background-color:  #bfbfbf;
}



.project_img {
	display: none;	
}

.modal_onclick_img {
	display: block;
	cursor: pointer;	
	position: absolute;
	bottom: 0;
}

.modal_onclick_img img{
	width: 100%;
	object-fit: cover;
}

.container_text_abstract {
	display: none;
}

.abstract_onclick{
	display: none;
}

#gallery {
	display: none;
}

}
	

/*** Modal ***/
/* The Modal (background) */
.modal {
	display: block;
	position: relative;
	z-index: 1;
	height: 100%;
	padding-top: 20px;
	background-color: white;
}

/* Modal Content */
.modal_content {
	position: relative;
	background-color: white;
	margin: auto;
	width: 100%;
	height: 100%;
 }

/* Style of Modal Slides */
#modal_slide {
	display: block;
	height: 100%;
	
	
}


/*** Style the project page Modal carousel ***/


#project_carousel {
	position: absolute;
	display: block;
	bottom: 0px;
	width: 100%;
	height: 100%;	
}

#project_carousel.carousel-inner {
	display: block;	
	width:100%;
	height: 100%;
}


#project_carousel.carousel-inner .carousel-item.active{ 
	display: block;
	height: 100%;
	border: none 1px blue;		
}

#project_carousel.carousel_fade .carousel-inner .carousel-item.active{
	-webkit-animation: fade-in-out 7.5s;
	animation: fade-in-out 7.5s;
}

.carousel-indicators {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	margin: 0 3% 0 3%;
}

.carousel-indicators li {
    width: 7px;
    height: 7px;
    margin: 5px 10px;
    text-indent: 0;
    cursor: pointer;
    border: none;
    border-radius: 50% ;
    background-color: #bfbfbf;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.5);  
	transition: 1s;  
}
.carousel-indicators .active {
    width: 7px;
    height: 7px;
    margin: 5px 10px;
    background-color: #888;
	transition: 1s;
}

/* The Close Button */
.close {
  color: #bfbfbf;
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 15px;
  font-weight: bold;
  z-index:	999;
}

.close:hover,
.close:focus {
  color: #888;
  text-decoration: none;
  cursor: pointer;
  transition: 1s;
}





/*** Style the contact page ***/

@media only screen and (max-width: 600px) and (orientation: portrait){
#contact .container_left {
	height: auto;
	padding: 0 20px;
}

#contact .container_right {
	height: auto;
	padding: 0 20px;
}

#contact .container_top {
	display: inline-block;
	height: 125px;
	width: 49%;
}

#contactinfo p {
	position: absolute;
	display: block;
	padding: 0 10px 0 10px;
	bottom: 0;
}

#contact .container_bottom {
	display: inline-block;
	width: 49%;
	padding-top: 49%;
}

#contact .container_full {
	height: auto;
	padding: 50px 0 10px;
}

form {
	display: block;
	width: 100%;
	min-height: 100px;
}


}

@media only screen and (max-width: 970px) and (orientation: landscape){
#contact .container_left {
	height: auto;
	padding: 0 20px;
}

#contact .container_right {
	height: auto;
	padding: 0 20px;
}

#contact .container_top {
	display: inline-block;
	height: 125px;
	width: 49%;
}

#contactinfo p {
	position: absolute;
	display: block;
	padding: 0 10px 0 10px;
	bottom: 0;
}

#contact .container_bottom {
	display: inline-block;
	width: 49%;
	padding-top: 49%;
}

#contact .container_full {
	height: auto;
	padding: 50px 0 10px;
}

form {
	display: block;
	width: 100%;
	min-height: 100px;
}

}


@media only screen and (min-width: 600px) and (orientation: portrait){
#contact .container_left {
	height: auto;
	padding: 0 20px;
}

#contact .container_right {
	height: auto;
	padding: 0 20px;
}

#contact .container_top {
	display: inline-block;
	height: 125px;
	width: 49%;
}

#contactinfo p {
	position: absolute;
	display: block;
	padding: 0 10px 0 10px;
	bottom: 0;
}

#contact .container_bottom {
	display: inline-block;
	width: 49%;
	padding-top: 49%;
}

#contact .container_full {
	height: auto;
	padding: 50px 0 10px;
}

form {
	display: block;
	width: 100%;
	min-height: 100px;
}

}


@media only screen and (min-width: 971px) and (orientation:landscape){
#contactinfo p {
	position: absolute;
	display: block;
	bottom: 10px;
}

#contact .container_bottom {
	width: 95%;
}


form {
	display: block;
	position: absolute;
	width: 100%;
	min-height: 100px;
	padding: 10px 20px 0;
	bottom: 0;
}
}

label {
	color: #888;
	font-size: 2vh;
	font-weight:100;
    display: inline-block;
	margin: 0.7vh 0 0 0;
}

.req {
	color: #bfbfbf;
	font-size: 1.7vh;
	font-weight:100;
    display: inline-block;
	padding: 0.7vh 0;
}

.error {
	color: red;
	display: inline-block;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #bfbfbf;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #bfbfbf;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #bfbfbf;
}



/* Style inputs with type="text", select elements and textareas */
input[type=text], input[type=email], select, textarea {
    color: #888;
	font-size: 2vh;
	width: 100%; /* Full width */
    padding: 0.625vh; /* Some padding */  
    border: 0.125vh solid #bfbfbf; /* Gray border */
    border-radius: 0.5vh; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 0.125vh; /* Add a top margin */
    margin-bottom: 0.125vh; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

textarea {
	min-height: 30vh;
	
}

input[type=text]:focus, input[type=email]:focus, select:focus, textarea:focus {
	outline: none;
    border: 0.25vh solid #888;
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    font-size: 2vh;
	background-color: #bfbfbf;
    color: white;
    padding: 0.5vh 1.25vh;
    border-radius: 0.375vh;
	cursor: pointer;
	display: inline;
}

.result {
	display: inline;
	
}

.result span {
	position: absolute;
	color: #888;
	font-size: 2vh;
	padding: 0 0.125vh;
	bottom: 0;
	display: inline-block;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
	outline:none;
    background-color: #888;
	
}

/* Add a background color and some padding around the form */
.container {
    border-radius: 0.625vh;
    background-color: white;
    padding: 2.5vh;
}


/*** Style the scrollbar ***/
/* width */
::-webkit-scrollbar {
    width: 0.4vw;
	
}

/* Track */
::-webkit-scrollbar-track {
    background: #ffffff; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #efefef; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #bfbfbf; 
}