/*
Theme Name: Taiwan Glass
Theme URI: http://clients.5creative.com.au/taiwanglass
Author: FIVE - Raf Segat
Author URI: http://fivecreative.com.au
Template: five
Description: Child theme of FIVE
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: wordpress
Text Domain: five
*/ 


/*
 * General
 */

body { background-color: #fafafa; color: black; font: 300 18px/1.72em 'Century-Gothic', sans-serif; }

.helvetica-neue { font-family: Helvetica, sans-serif; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 { font-family: Helvetica, sans-serif; }
h2{ margin: 50px 0 28px 0; font-size: 26pt; color: #666666; }
h3 { margin: .5em 0 .8em; }
h4, h5, h6 { margin: 1.2em 0 1em; }
h5 { font-weight: normal; font-size: 17px; }
h4 { font-size: 15px; text-transform: uppercase; text-transform: uppercase; letter-spacing: 1px; font-weight: normal; }
h6 { font-size: 15px; font-weight: normal; font-family: 'Montserrat', Helvetica, Arial, sans-serif; line-height: 1.25em; margin: .8em 0; text-transform: uppercase; }

a, .primary { color: #2A70B6; transition: all 0.05s ease; -webkit-transition: all 0.05s ease; }
a.secondary { color: #2A70B6; }
a:hover, a:focus { color: white; }
a, a:hover, a:focus, a:active, a:focus:hover { text-decoration: none; }

.right { float: right; }

img.img-center { display: block; margin-left: auto; margin-right: auto; }
.bg-cover { background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; }
.shadow-bottom { -webkit-box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.3); box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.3); }
.parallax { height: 500px; height: 100vh; overflow-x: hidden; overflow-y: auto; -webkit-perspective: 300px; perspective: 300px; -webkit-perspective-origin-x: 100%; perspective-origin-x: 100%; }
.parallax-group { position: relative; height: 100vh; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; z-index: 2 }
.parallax-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform-origin-x: 100%; transform-origin-x: 100%; }
.parallax-layer-base { -webkit-transform: translateZ(0); transform: translateZ(0); z-index: 4; }
.parallax-layer-back { -webkit-transform: translateZ(-300px) scale(2); transform: translateZ(-300px) scale(2.02); z-index: 3; }
.parallax-layer-deep { -webkit-transform: translateZ(-600px) scale(3); transform: translateZ(-600px) scale(3); z-index: 2; }
.parallax-layer-front { -webkit-transform: translateZ(90px) scale(.7); transform: translateZ(150px) scale(.5); z-index: 1; right: 0; }

.container-image { position: relative; z-index: 1; overflow: hidden; height: 600px; }
.container-image .main-image { background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; }
.container-image .main-image { height: 100vh;
	-webkit-transform: translate3d(0, 200px, 0); -moz-transform: translate3d(0, 200px, 0); -ms-transform: translate3d(0, 200px, 0); -o-transform: translate3d(0, 200px, 0); transform: translate3d(0, 400px, 0); }

/*========= HEADER */
header { position: fixed; top: 0; left: 0; width: 100%; z-index: 999;
	-webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
header .logo { max-width: 100%; }
#logo { margin: 15px 0 0; display: block; }
header #main-menu {  }
header #mobile-menu-btn { display: none; }
header #main-menu ul { float: right; }
header #main-menu ul li { float: left; padding: 0 0 0 30px; }
header #main-menu ul li a { color: black; font-size: 16px; letter-spacing: 1px; padding: 35px 0 20px; text-transform: uppercase;position: relative;  display: block; transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; }
header #main-menu ul li a:before { content: ''; opacity: 0;  position: absolute;  top: 0; left: 0; width: 0; height: 6px; background: #D71F26; transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; }
header #main-menu ul li a:hover:before, 
header #main-menu ul li a.active:before, 
header #main-menu ul li.current-menu-item a:before{ opacity: 1; transform: scale(1); width: 100%; }
header #main-menu ul li a:hover, 
header #main-menu ul li a.active, 
header #main-menu ul li.current-menu-item a{ color: #D71F26; }
header #main-menu .enquiries a { margin-top: 28px; border: 2px solid #D71F26; border-radius: 10px; text-align: center; padding: 11px 20px 9px; color: #D71F26; line-height: normal; }
header #main-menu .enquiries a:before{ content: none; }
header #main-menu .enquiries a:hover{ color: white; background: #D71F26; }

#logo { position: relative; }
.logo, .logo-sml { position: absolute; left: 0; top: 0; }
.logo-sml { top: 3px; }

.logo { visibility: visible; opacity: 1; position: absolute;
	-webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
.logo-sml { visibility: hidden; opacity: 0; position: absolute;
	-webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

body.menu-sml header { background: white; }
body.menu-sml header .logo { visibility: hidden; opacity: 0; position: absolute; }
body.menu-sml header .logo-sml { visibility: visible; opacity: 1; position: absolute; }
body.menu-sml header #main-menu ul li a { padding: 25px 0 20px; }
body.menu-sml header #main-menu .enquiries a { margin-top: 18px; padding: 11px 20px 9px; }

/*========= slider */
#content.parallax { background-size: cover; background-position: top center; }
#slider { height: 100vh; position: relative; }
#slider .slider-image { background-size: cover; background-repeat: no-repeat; background-attachment: fixed; position: absolute; background-position: 50%; width: 100%; height: 100%; z-index: 1;
	-webkit-transform: translate3d(0, 0px, 0); -moz-transform: translate3d(0, 0px, 0); -ms-transform: translate3d(0, 0px, 0); -o-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); }
#slider-text { z-index: 2; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#slider .slider-title { position: absolute; font-size: 100px; top: 30%; left: 0; width: 100%; text-align: center; color: #2A70B6; margin-bottom: 20px; }
#slider .slider-subtitle { position: absolute; top: 50%; left: 0; width: 100%; text-align: center; font-weight: bold; color: black; font-size: 44px; }
#slider .col-lg-12 { position: static; }

#slider-text h1 { letter-spacing: 3px; font-size: 75px; line-height: 1.6em; position: absolute; text-align: center; top: 50%; left: 50%; margin: 0; font-weight: 700; font-family: Helvetica, Arial, sans-serif; padding-top: 80px;
	-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-transform: uppercase; color: white; text-shadow: 0px 0px 10px rgba(150, 150, 150, 1);  }

#slider-text h1 span { color: #D71F26; font-weight: 100; text-shadow: 0px 0px 0px rgba(150, 150, 150, 0); }


/*========= section about */
#about { color: black; background-repeat: no-repeat; background-position: top right; background-size: 50% 100%; text-align: left; z-index: 3; }
#about h2 { font-size: 36px; line-height: normal; font-weight: 300; margin: 50px 0 45px; }
#about h2 span { color: #D71F26; margin: 0 0 5px; line-height: normal; font-size: 24px; }
#about .container-full { background: white; padding: 10px 0 60px; background-size: auto 100%; background-position:  top right; background-repeat: no-repeat; }
#about p { margin-left: auto; margin-right: auto; text-shadow: 0px 0px 10px rgba(255, 255, 255, 1); }
#about .main-image { min-height: 100vh; }
#about-img { width: 100%; height: auto; }

/*======= section video */
#video-cont { z-index: 2; height: auto; }
#video-cont .parallax-layer { position: relative }
/* #video-cont:after { content: ''; width: 100%; height: 80%; bottom: 0; left: 0; position: absolute; background: #202024; } */
#video-cont .video-iframe { width: 100%; max-width: 960px; margin: 0 auto; }
#video-frame-wrapper { background: #202024; }
#video-cont .image-spacer { height: 80vh; }
#video-cont .image-spacer img { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: .01; }
#video-cont .video-iframe .video-wrapper { width: 100%; height: 0; padding-bottom: 56.25%; position: relative; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; cursor: pointer; cursor: pointer; }
#video-cont .video-iframe .video-wrapper:after { content: ''; width: 107px; height: 81px; background: url(images/playbtn.png) no-repeat top center; background-size: 107px 162px; position: absolute; left: 50%; top: 50%;
	-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
	-webkit-transition: opacity .2s linear, visibility .2s linear; -moz-transition: opacity .2s linear, visibility .2s linear; -ms-transition: opacity .2s linear, visibility .2s linear; -o-transition: opacity .2s linear, visibility .2s linear; transition: opacity .2s linear, visibility .2s linear; }
#video-cont .video-iframe .video-wrapper:hover:after { background-position: bottom center; }
#video-cont .video-iframe .video-wrapper.clicked:after { visibility: hidden; opacity: 0; }
#video-cont .video-iframe iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#video-cont .main-image { min-height: 100vh; }

#under-video { height: 80vh; z-index: 3; background: #202024; z-index: 1 }
#under-video .parallax-layer-base { background: #202024; }
#under-video img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
 
/*======== section tech specifications */
#tabs { color: black; padding: 50px 0; }
#tabs h2 { margin-top: 15px; font-size: 30px; line-height: normal; font-weight: 300; }
#tabs h2 span { color: #D71F26; font-size: 24px; line-height: normal; }
#tabs .tab .active { color: #D71F26; }
#tabs .tab { margin: 0px 0 0px; padding: 0 0 0 30px; }
#tabs .tab li { cursor: pointer; font-size: 30px; font-weight: 300; line-height: normal; padding: 8px 0; color: #676767;  font-family: Helvetica, sans-serif; }
#tabs .tab a { display: none; font-size: 16px; position: absolute; bottom: -70px; border: 2px solid #D71F26; color: #D71F26; cursor: pointer; padding: 14px 15px 14px; line-height: normal;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; font-family: Helvetica, sans-serif; }
#tabs .tab a:hover{ color: white; background: #D71F26; } 
#tabs .tab li.active a{ display: block; }
#tabs .tab li:hover { color: #D71F26; }
#tabs .tab-content { visibility: hidden; opacity: 0; max-height: 0; position: absolute; left: -9999px; top: -999px; transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; }
#tabs .tab-content.active { visibility: visible; opacity: 1; max-height: 9999px; position: relative; left: 0; top: 0;  }

#parallax-tabs { z-index: 5; background: #fafafa; position: relative; padding-top: 40px; }


/*========= contact */
#contact-sec { z-index: 6; background: #fafafa; }
#contact-sec .container { background: #fff; padding-top: 35px; padding-bottom: 15px; }
#contact { padding: 75px 0; }
#contact h2 { color: #D71F26; text-align: center; margin: 0 0 50px 0; }
#contact  .ipt-eform-content { box-shadow: none !important; }
#contact .ipt_uif_textarea { height: 147px !important; }
#contact  .ui-button.small{ background: #D71F26; color: white; font-weight: bold; font-style: normal; margin-top: 30px; display: inline-block; width: auto; }
#contact  .ipt_fsqm_form_button_container { margin: 14px !important; }
#contact .eform-button-container-inner { background: white; }
#contact .ipt-uif-custom-material-red .input-field label { color: #676767; }
.ipt_uif_column { opacity: 1 !important; }
body .ipt-uif-custom-material-red .ipt-eform-material-button-container.ipt_fsqm_form_button_container .eform-button-container-inner { display: inline-block; float: left; }

#menu-footer li { float: left; width: 20%;}
#menu-footer li a { color: #444444; font-size: 14px; }
#menu-footer li li { width: 100%; }
#menu-footer li li a { color: #777777; } 

#menu-footer li a:hover { text-decoration: underline; }

/*========= copyright */
footer { padding: 30px 0;  background: white; border-top: 10px solid #D71F26; color: rgb(42, 43, 43); }
footer .copyright { text-align: right; font-size: 11px; } 
footer .copyright img { padding-top: 10px; }
