/* CSS Document for front page*/
/**, html, img { font-size: 100%; vertical-align: baseline; border: 0; margin: 0; padding: 0; }
body { font: normal 62.5%/20px "Montserrat", serif; margin: 0; padding: 0; background: url('../images/new-concepta.jpg') no-repeat center center fixed; background-size:cover;}
h1 { color: #fff; margin: 0 0 20px 0; font-size: 27px; line-height: 27px; font-weight: 400; }
h2 { text-align: right; position: absolute; top: 10%; right: 15%; display: inline-block; font-weight: normal; font-family: "Montserrat", serif; margin: 0 0 0 330px; color: #fff; font-size: 24px; line-height: 32px; }
h3 { font-size: 1.5em; font-weight: normal; display: block; width: 100%; clear: both; height: 50px; color: #fff; line-height: 50px; margin: 0; }
em { color: #000; font-family: 'Playball', cursive; font-style: normal; font-size: 2.4em; position: relative; top:3px; }
p { color: #fff; font-size: 1.5em; line-height: 25px; margin: 0 0 10px 0; font-weight:400; }
strong { font-weight: normal; font-size: 1.5em; text-transform: uppercase; color: #fff; line-height: 25px;}
#logo { position: fixed; z-index: 100; top: 0; left: 0; width: 240px; height: 110px; background: rgba(0,0,0,0.77); margin: 0; padding: 15px 30px; display: block; float: left; }
#logo:hover { background: rgba(0,0,0,1.0); }
#logo a { width: 240px; height: 110px; text-indent: -9999em; text-decoration: none; display: block; background: url('../images/logo-square.png') no-repeat 0 0; }
.wrapper {position: absolute; z-index: 10; bottom: 0; right: 0; display: block; margin-left: 320px; padding: 20px 30px; background: rgba(0,0,0,0.55); }
.wrapper p { padding-right: 180px; }
#menu { position: fixed; z-index: 100; top:140px; left: 0; width:300px; }
#menu ul li { list-style: none!important; cursor: pointer; background-size: 100% 100%; background: url('../images/bg-item.jpg') no-repeat 50% 0;width: 300px; height: auto; padding: 0; display: block; float: left; }
#menu ul li a { transition: all 0.2s ease-in-out 0s; font-weight: normal; text-align: center; font-size: 17px; display: block; line-height:17px; padding: 25px 0; margin: 0 auto; color: #fff; text-decoration: none; }
#menu a:hover { color: #fff; transition: all 0.2s ease-in-out 0s; transform: scale(1.0); padding: 40px 0; margin: -15px auto; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
#menu a.active { color: #fff; transition: all 0.2s ease-in-out 0s; transform: scale(1.0)!important; padding: 40px 0; margin: -15px auto; box-shadow: none!important; }
#menu .Link0:hover, .Link0.active { background-color: #fc5106; }
#menu .Link1:hover, .Link1.active { background-color: #B0DD10; }
#menu .Link2:hover, .Link2.active { background-color: #DE00B5; }
#menu .Link3:hover, .Link4.active { background-color: #009CFF; }*/
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }
body { font: normal 62.5%/20px "Montserrat", sans-serif; margin: 0; padding: 0; }
H1 { text-align:center; position: relative; display: block; font-weight: normal; font-family: "DM Serif Display", serif; margin: 0 auto; color: #000; font-size: 36px; line-height: 40px; }
strong { font-weight: 200; font-size: 1.5em; text-transform: uppercase; line-height: 40px; font-family: "Montserrat", sans-serif!important; margin-top:10px; display: block; }
i { font-style: normal; font-size: 0.65em; font-weight: 700; }
H2 { font-family: "Montserrat", sans-serif; font-size: 2.4em; font-weight: 200; display: block; text-align: center; width: 100%; clear: both; height: 50px; color: #fff; line-height: 50px; margin: 0; }
p { font-family: "Montserrat", sans-serif; color: #fff; font-size: 1.6em; line-height: 30px; margin: 0 auto; font-weight:400; text-align: center; }
.clearfix:after { content: ""; display: table; clear: both; }
.main { display: block; position: relative; width: 100vw; min-height: 100vh; height: auto; }
.intro { width: 100%; display: block; position: relative; padding: 70px 50px; background-color: rgba(255,255,255,0.9); }
.text H2, .text P { color: #fff!important; }
.text { background-color: rgba(0,0,0,0.9)!important; }
.intro section { margin: 0 auto; display: block; max-width: 1280px; }
#reel { overflow: hidden; position: fixed; background-color: #000!important; min-height: 100vh; height: auto; width: 100vw; }
#reel A { display: block; height: 100vh; width: 100vw; text-decoration: none; }
video#layer1 { opacity: 1.0; position: absolute; top: 0; min-width: 100vw; min-height: 100vh; width: auto; height: auto; z-index: 5; }
.logo-mask { z-index: 12; position: absolute; opacity:0.9; top: 0; left: 0; right: 0; display: none; min-height: 100vh; height: auto; width: 100vw; background: url("../images/logo-mask1.png") no-repeat center center; background-size: cover; }
.logo-mask-line { z-index: 11; opacity:0.2; position: absolute; top: 0; left: 0; right: 0; display: block; min-height: 100vh; height: auto; width: 100vw; background: url("../images/logo-mask1c.gif") no-repeat center center; background-size: cover; }
NAV#menu { position: relative; z-index: 12; padding: 0; margin: 0 auto; width: 100%; display: block; }
#menu UL { width: 100%; }
#menu ul li { list-style: none!important; cursor: pointer; background-color: rgba(0,0,0,0.9); width: 100%; max-width: 25%; height: auto; margin: 0 auto!important; padding: 0!important; display: inline-block; float: left; border-right: 1px solid rgba(0,0,0,0); }
#menu ul li a { transition: all 0.2s ease-in-out 0s; font-weight: normal; text-align: center; font-size: 17px; display: block; line-height:17px; padding: 25px 0; margin: 0 auto; color: #fff; text-decoration: none; }
#menu a:hover { opacity: 1.0; color: #fff; transition: all 0.2s ease-in-out 0s; transform: scale(1.0); padding: 40px 0; margin: -15px auto; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
#menu a.active { color: #fff; transition: all 0.2s ease-in-out 0s; transform: scale(1.0)!important; padding: 40px 0; margin: -15px auto; box-shadow: none!important; }
#menu .Link0:hover, #menu .Link0.active { background-color: #fc5106; }
#menu .Link1:hover, #menu .Link1.active { background-color: #B0DD10; }
#menu .Link2:hover, #menu .Link2.active { background-color: #DE00B5; }
#menu .Link3:hover, #menu .Link4.active { background-color: #009CFF; }
@media only screen and (max-width : 767px) {
.main { min-height: 50vh; }
.intro { padding: 25px; }
IMG { margin: 0 auto!important; }
#reel { position: relative; min-height: 50vh; }
#reel A { height: 50vh; }
#reel A { display: block; height: 100vh; width: 100vw; text-decoration: none; }
video#layer1 { position: absolute; top: 0; min-height: 50vh; }
.logo-mask { min-height: 50vh; height: auto; }
.logo-mask-line { min-height: 50vh; height: auto; }
NAV#menu { position: relative!important; padding: 0!important; margin: 0 auto!important; width: 100%!important; display: block!important; left: 0!important; clear: both; }
#menu ul li { width: 100%; max-width: 100%!important; margin: 0 auto 1px auto!important; display:block; float:none; border: 0!important; }
H1 { font-size: 22px; line-height: 20px; }
strong { font-size: 1.25em; line-height: 20px;}
i { font-size: 0.45em!important; }
}
a { color: #F19455; }
FORM { padding: 0 25px; }
FIELDSET { border: 0!important;}
/*================
contact
================*/
#contactmua { position: absolute; right: 2%; bottom: 15px; width: 150px; text-align: center; }
#contactmua a { transition: all 0.2s ease-in-out 0s; background-color: #009CFF; float:right; display: inline; margin: -5px auto 0 auto; width:150px; padding: 20px 0; color: #fff; font-size: 1.5em; text-decoration: none; text-align: center; }
#contactmua a:hover { border-radius: 5px; color: #fff; transition: all 0.2s ease-in-out 0s; transform: scale(1.10); box-shadow: 0 0 10px rgba(0,0,0,0.5); }
/*================
form
================*/
#contactme { width: 100%; height: 100%; display: block; padding: 0; margin: 0; position: fixed; z-index: 999; top: 0; left: 0; background-color: rgba(0,0,0,0.8); }
#contactme .title { background-color: #009CFF; font-size: 2.4em!important; padding: 10px 0; text-align: center; color: #fff!important; font-weight: normal; margin: -10px -10px 10px -10px!important; }
#contactme .forcon { font-size: 1.6em!important; color: #000!important; font-weight: normal; margin-bottom: 0;padding: 0 25px 10px 25px; border-bottom: 1px dotted #d8d8d8; margin-bottom: 10px; width: 85%; }
#contactme .forres { font-size: 1.4em!important; color: #773398!important; font-weight: normal; margin-bottom: 0; padding: 0 25px 10px 25px; border-bottom: 1px dotted #d8d8d8; margin-bottom: 10px; width: 85%; }
#contactme p { font-size: 1.3em; line-height: 20px; color: #000; margin: 0; text-align: left!important; padding: 0 25px; }
.wrapper1 { background-color:#FEFEFE; width: 80%; height: 520px; margin: -250px auto; position: relative; top: 50%; }
.wrapper-content { padding: 10px; display:block; position: relative; }
#toon { width:250px; height: 250px; border-radius: 125px; background-color: #3A3C4B; text-align: center; z-index: 10; position: absolute; top: 190px; left: 470px; }
#toon img { position: relative; left: 20px; top: -50px; width: 75%; }
form.EnquiryForm { position: relative; z-index: 100; min-width: 300px; height: auto; display: block; margin: 0; }
form.cmxform fieldset, form.cmxform ol, form.cmxform li, form.cmxform legend { padding: 0; color: #000; }
form.cmxform ol { list-style: none; }
form.cmxform li { font-size: 1.3em; margin-bottom: 5px; }
form.cmxform label { color: #000; display: inline-block; vertical-align: top; margin-top: 3px; width: 80px; }
form.cmxform input, form.cmxform select, form.cmxform textarea {
width: 60%;
max-width: 325px;
border-radius: 5px;
padding: 5px;
border: 1px solid #e2e2e2;
background: #fff;
font: normal 13px/14px "Montserrat";
color: #000;
position: relative; z-index: 100;
}
form.cmxform textarea, textarea { display: inline-block; height: 120px; overflow: auto; }
form.cmxform input.send { border: 0; cursor: pointer; width: auto; line-height: 40px; height: 40px; font-weight: 700; padding: 0 15px; text-align: right; font-size: 13px; color: #fff; text-decoration: none; background: #054072; display: inline-block; margin: 0 5px 5px 0; }
form.cmxform input.send:hover, form.cmxform input.send.inputhover { color: #fff!important; text-decoration: none; background: #DE00B5; }
/* ===============
Media Queries
================ */
@media only screen and (max-width : 767px) {
.wrapper1 { width: 100%; top:50px; margin: 0!important; }
.wrapper { position: relative!important; z-index: 10; top: 420px!important; left: 0!important; display: block; margin: 0!important; padding: 10px; background: rgba(0,0,0,0.55); }
.wrapper p { text-align: center; padding: 0!important; }
.wrapper h1 { text-align: center; }
#logo { position: absolute!important; }
/*#menu { position: absolute!important; }*/
#contactmua { position: relative!important; left: 50%; bottom: 15px!important; width: 150px; margin: 0 -75px 0 -75px; text-align: center; }
}
@media only screen and (max-width : 570px) {
/*h2 { text-align: center; right: 0!important; position: relative!important; top: 420px!important; margin: 20px auto!important; transform: scale(0.8); }
#logo, #menu { position: absolute!important; left: 50%!important; margin: 0 -150px 0 -150px!important; }*/
}
/*@media only screen and (min-height : 321px) and (max-height : 700px) {
h1 { height: 180px!important; background: url('../images/logo-2014b.png') no-repeat 0 0!important; }
}
@media only screen and (max-width : 600px) and (max-height : 320px) {
h1 { margin-top: 0!important; width: 170px!important; height: 90px!important; background: url('../images/logo-mini.png') no-repeat 0 0!important; }
nav ul li { height: 25%!important; }
nav ul li a { font-size: 170%; line-height: 400%; }
}
@media only screen and (max-width : 478px) {
body, div { overflow: auto;!important overflow-x: hidden!important; }
h1 { margin-top: 0!important; width: 320px!important; height: 180px!important; background: url('../images/logo-2014b.png') no-repeat 0 0!important;}
nav { margin-top: -10px!important; }
nav ul li { width: 300px!important; background: url('../images/bg-item2.jpg') no-repeat 0 0!important; }
nav ul li a { font-family: 'Montserrat', sans-serif; font-weight: normal; text-align: center; font-size: 24px; display: block; line-height:70px; padding: 0; margin: 0 auto; color: #fff; text-decoration: none; }
}*/