/*@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i');*/
@import url('font-awesome.css');

/*
font-family: 'Roboto','FontAwesome';
font-weight: 300;
font-weight: 400;
font-weight: 700;
font-style: italic;
FontAwesome
*/
* { /*transition: all 0.3s ease;*/ }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
body { font-family: 'Century Gothic', Microsoft JhengHei , sans-serif; font-size:15px; line-height:1.6; color:#686868; text-align: justify; letter-spacing:1px; background: #F4F6F7; }
html , body { height: 100%; }

a { text-decoration:none; color:#fff; transition: all 0.3s ease; }
a:hover { transition: all 0.3s ease;  }

.clearfix { display: block; clear: both; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.left { float: left; }
.right { float: right; }

/*background: url(../images/img_faq_1.png) center center no-repeat #977569;*/

w100 { width: 100%; }
w90 { width: 90%; }
w80 { width: 80%; }
w70 { width: 70%; }
w60 { width: 60%; }
w50 { width: 50%; }
w40 { width: 40%; }
w30 { width: 30%; }
w20 { width: 20%; }
w10 { width: 10%; }

h1, h2, h3, h4, h5, h6 { text-align:center; letter-spacing: 5px; font-weight: 100; text-transform: uppercase; color: #031430; }
a.button { display: block; width: 150px; height: 44px; line-height: 42px; text-align: center; color: #686868; border:#686868 solid 1px; background: #fff; font-weight: 400; font-size: 12px; margin: 0 auto; text-transform: uppercase; }
a.button:hover { background: #031430; color: #fff; opacity: 1; border-color: #031430; }


.logo { width: 238px; height: 238px; position: absolute; left: 50%; top: 50%; margin-left: -119px; margin-top: -119px; z-index: 999; }
#wrapper { height:100%; background: #000; }
.container { float: left; width:50%; height:100%; transition: all 0.3s ease; position: relative; display: block; }

.title { vertical-align:middle; font-weight: 100; display: block;text-align: center; position: absolute; left: 0; top: 48%; font-size: 200%; color: white; text-shadow: 0 0 10px #666; letter-spacing: 10px; z-index: 2; width: 100%;  transition: all 0.3s ease; }

.container .bg1 { opacity: .5; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; background-position:center; background-size:cover; background-repeat: no-repeat; background-image: url(../img/img_bg_home_1.jpg); transition: all 0.3s ease; }
.container .bg2 { opacity: .5; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; background-position:center; background-size:cover; background-repeat: no-repeat; background-image: url(../img/img_bg_home_2.jpg); transition: all 0.3s ease; }
a:hover .bg1 , a:hover .bg2 { opacity: 1; transition: all 0.3s ease; }
a:hover .title { font-size: 250%; transition: all 0.3s ease; }


@media only screen and (max-width: 1200px) {
    /* Medium desktop */
    .logo { width: 180px; height: 180px; margin-left: -90px; margin-top: -90px; }
    .title { font-size: 130%; letter-spacing: 5px; }
    a:hover .title { font-size: 180%; }
}
@media only screen and (max-width: 1000px) {
    /* Small desktop & iPad view */
    .container { float: inherit; width: 100%; height: 50%; }
    .container .bg1 { background-image: url(../img/img_bg_home_3.jpg); background-position:center top; }
    .container .bg2 { background-image: url(../img/img_bg_home_4.jpg); background-position:center top; }
}
@media only screen and (max-width: 768px) {
    /* Small desktop & iPad view */
    .logo { width: 140px; height: 140px; margin-left: -70px; margin-top: -70px; }
}
@media only screen and (max-width: 480px) {
    /* Phone view */
    .logo { width: 120px; height: 120px; margin-left: -60px; margin-top: -60px; }

}