/************
* border *
************/
.border{background:#f5d31a;}
/************
* logo * 
***********/
nav a:before {
  color: #f5d31a;
}
nav .navbutton a.bt-menu-trigger span {
  background: #f5d31a;
}

/************
* main *
**********/

.content section {
  height: 470px;
  overflow: hidden;
  position: relative;
}

 .content section.tabs {
  height: auto;
  overflow: hidden;
 }

 section .panel {
  height: 409px;
  display: none;
 }

 .content h2 {
   width: 90%;
   color: #f5d31a;

 }
 

 .content h3{

   width: 100%;
   background: #ffbe3d;
   text-align: center;
   font-family: 'nexaheavy';
   font-size: 1.25em;
   letter-spacing: 0.05em;
   line-height: 60px;

   border-top: 1px solid white;

   /*position: absolute;*/
   top: 0;
   left: 0;
 }

 section.tabs h3 {
  cursor: pointer;
  color: #6B6B6B;
 }
 section.tabs:nth-child(2) h3 {
    background: #4e5052;
 }
 section.tabs:nth-child(3) h3 {
    background: #f7931e;
 }
 section.tabs:nth-child(4) h3 {
    background: #f36e50;
 }

/**************
* contact-form *
*************/
section.tabs:nth-child(2) {
  background: rgba(235, 34, 39,0.8);
}
section.tabs:nth-child(3) {
  background: rgba(235, 34, 39,0.8);
}
section.tabs:nth-child(4) {
  /*background: rgba(243,110,80,0.8);*/
}



 progress {
   background: white;
   color: white;
   height:6px;
   width: 100%;
   margin: 0;
   padding:0;
 }

 progress::-webkit-progress-value { 
   background: white; 
 }
 progress::-webkit-progress-bar { 
   background: yellow;
 }



/*************
* contact-info *
***********/
.content .contact-info {
  text-align: center;
  height: auto;

}
.contact-info .address {
  width: 100%;
  overflow: hidden;

}
.contact-info .address div {

  margin: 40px auto;
  line-height: 30px;
  color: #9d9b97;
}
.contact-info .address div h4 {
  font-family: "nexaheavy";
  font-size: 0.875em;
  letter-spacing: 0.26em;
  margin-bottom: 20px;
}

.contact-info .address div p {
  font-family: "nexabold";
  font-size: 1.125em;
}

.contact-info .address #hk h4,
.contact-info .address #hk a { color: #ffbe3d;}
.contact-info .address #sz h4,
.contact-info .address #sz a  { color: #f5d31a;}
.contact-info .address #bc h4,
.contact-info .address #bc a  { color: #f36e50;}

.contact-info .address div p.phone {
  position:relative;
  margin-top: 20px;
  font-size: 1em;
}

.contact-info .address div p.phone:before {
  display: block;
  position: absolute;
  content: "";
  width: 80px;
  height: 2px;
  background-color: #eee; 
  left: 50%;
  margin-left: -40px;
  top: -5px;
}

.contact-info .address div a {
  font-family: "nexabold";
  font-size: 1em;
  color: #f4d219;
  text-decoration:none;
}

/********************
* social link footer *
**********************/
footer {
  width: 100%;
  height: 175px;
  position: relative;
  text-align: center;
  background: #9d9b97;
}
footer div{
  height: 75px;
  /*width: 100%;*/

  position: absolute;
  bottom: 8px;
  width: 400px;
  margin: 0 auto;
  left: 50%;
  margin-left: -50px;
}

.contact > a {
  display: block;
  position: absolute;
  background-color: white!important;
  width: 100%;
  height: 92px;
  line-height: 92px;

  margin: 0 auto;

  font-family: "playfairitalic";
  font-size: 1.8em;
  text-decoration: none;
  color: #9d9b97;
}
.contact > a:hover {
  color: #666;
}

footer div a {
  display: inline-block;
  width: 25%;
  height: 100%;
  float: left;

  font-size: 0;
  text-decoration: none;
  color: white;
  opacity: 0.7;
  transition: 0.05s ease-in;

}

footer div a:before {
  font-size: 75px;
}


footer div a:hover {
    transition: 0.05s ease-in;
    opacity: 1;
   }

footer a:nth-child(2n-1)
 {
  background: #9d9b97;
}

footer a:nth-child(2n)
 {
  background: #A6A5A1;
}


::-webkit-input-placeholder { /* WebKit browsers */
    color:    #aaa;
    line-height: 50px;
    font-size: 0.5em;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #aaa;
    line-height: 50px;
    font-size: 0.5em;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #aaa;
    line-height: 50px;
    font-size: 0.5em;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #aaa;
    line-height: 50px;
    font-size: 0.5em;
}



@media (min-width: 601px) and (max-width: 770px) {
        
        footer div{
          bottom: 16px;
        }
        .contact > a {
          height: 84px;
          line-height: 84px;
        }
}


@media (min-width: 771px) {

        .content section {
           height: 500px;
         }

       
       .content h3{

         letter-spacing: 0.05em;
         line-height: 76px;
       }
        section .panel {
            height: 423px;
            display: none;
        }

        .text-content p {
          bottom: 126px;
        }
        /**************
        * contact-form *
        *************/


        /*************
        * contact-info *
        ***********/
        .content .contact-info {
          text-align: center;
          height: 500px;

        }
        .contact-info .address div {
          float: left;
          width: 33.1%;
        }
        .contact-info .address div h4,
	.contact-info .address div a {
          color: #f4d219!important;

        }
	.contact-info .address div a {
	  text-transform: uppercase;
        }

        /********************
        * social link footer *
        **********************/
        footer {
          height: 180px;
        }
        footer div {
          height: 75px;
          width: 400px;
          margin: 0 auto;
          left: 50%;
          margin-left: -50px;
          bottom: 20px;
        }
        .contact > a {
          height: 80px;
          line-height: 80px;
        }
        footer a:nth-child(n){
          background: #9d9b97;
        }
}