﻿body{
  max-width: 100%;
  margin:0;
  font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", sans-serif;
  overflow-x: hidden;
}

h2{
  font-size: 4.7vh;
}

#logo{
  width: 280px;
  padding: 18px 6px 0px;
  margin-left: 22px;
}


#logoMobile{
  margin: 10px 11px 0px; 
  width: 168px;
  z-index: 100;
}

.fa-times-thin:before {
	content: '\00d7';
}

#topMenu {
  font-size: 1.3vw;
}

#topMenu .w3-dropdown-content{
  opacity: 0.8;
}

#topMenu .w3-dropdown-content .w3-bar-item{
  opacity: 1;
}

.titleContainer{
  height: 58vh;
  overflow:hidden;
  position: relative;
}

.titleContainer .backdrop{
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -1000; 
  margin:0;
}

.titleContainer .title{
  position: absolute;
  margin: auto;
  bottom: 45px;
  right: 48px;
}

.titleContainer .title h1{
    color: white;
    text-shadow: 2px 2px 4px #000000;
    font-size: 3.1em;
    font-family: Arial;
    letter-spacing: 1.5px;
    text-align: center;
    line-height: 124%;
    margin:0;
}


@media screen and (max-width: 813px) and (orientation:landscape) {
#classicHt{
	background-image: url("../images/classicHla813px.jpg");
}
#classicLt{
	background-image: url("../images/classicLla813px.jpg");
}
#modernLt{
  background-image: url("../images/modernLla813px.jpg");
}
#modernHt{
  background-image: url("../images/modernHla813px.jpg");
}
#accessT{
  background-image: url("../images/accessla813px.jpg");
}
#aboutT{
  background-image: url("../images/aboutTla813px.jpg");
}
}

@media screen and (min-width: 814px) and (orientation:landscape) {
#classicHt{
	background-image: url("../images/classicHla1920px.jpg");
}
#classicLt{
	background-image: url("../images/classicLla1920px.jpg");
}
#modernLt{
  background-image: url("../images/modernLla1920px.jpg");
}
#modernHt{
  background-image: url("../images/modernHla1920px.jpg");
}
#accessT{
  background-image: url("../images/accessla1920px.jpg");
}
#aboutT{
  background-image: url("../images/aboutTla1920px.jpg");
}
}


@media screen and (max-width: 414px) and (orientation:portrait) {
#classicHt{
	background-image: url("../images/classicHpo578px.jpg");
}
#classicLt{
	background-image: url("../images/classicLpo578px.jpg");
}
#modernLt{
  background-image: url("../images/modernLpo578px.jpg");
}
#modernHt{
  background-image: url("../images/modernHpo578px.jpg");
}
#accessT{
  background-image: url("../images/accesspo578px.jpg");
}
#aboutT{
  background-image: url("../images/aboutTpo578px.jpg");
}
}

@media screen and (min-width: 415px) and (orientation:portrait) {
#classicHt{
	background-image: url("../images/classicHpo900px.jpg");
}
#classicLt{
	background-image: url("../images/classicLpo900px.jpg");
}
#modernLt{
  background-image: url("../images/modernLpo900px.jpg");
}
#modernHt{
  background-image: url("../images/modernHpo900px.jpg");
}
#accessT{
  background-image: url("../images/accesspo900px.jpg");
}
#aboutT{
  background-image: url("../images/aboutTpo900px.jpg");
}
}

.boxes {
  display: none;
}

/* Style the buttons */

.btn {
  text-decoration:none;
  border: none;
  outline: none;
  padding: 12px 16px;
  cursor: pointer;
  background-color: #FFFFFF;
}

.btn.active {
  border-bottom: 2px solid #FFA500;
}

