@import "contactform.css"; @import "font-awesome.min.css"; @import "reset.css"; html {overflow-y:scroll;} body {background-color:#b80000; font-family: 'Merienda', cursive;} html, body { height: 100%; margin: 0; } /***header***/ #header {height:120px;width:100%;background:#b80000; border-bottom:1px solid #d40000;} #header_main {height:100px;width:1080px;margin:0 auto 0 auto; } #logo {float:left;height:79px;width:195px; background:url(../img/logo.png) no-repeat; cursor:pointer; position:absolute; left:50%; top:36px; margin:0 0 0 -560px; z-index:9999;} #header_btn_home {height:26px; width:65px; background:url(../img/btn_home.png) no-repeat; cursor:pointer; position:absolute; right:6%; top:0;} /*nav*/ #nav_bg {height: 43px; width:1200px; position:absolute; left:50%; top:60px; margin:0 0 0 -530px; } ul#nav_main {height: 41px; width:100%; margin:0 auto 0 auto; display:flex; justify-content: center; position:relative; top:20px;} ul#nav_main li img {height:31px;} ul#nav_main li { display: list-item;list-style-type:none; margin:0 0 0 15px; position:relative; left:30px;} ul#nav_main li:first-child{margin:0 0 0 0px!important; } li#first_nav {margin-left:60px;} #article_main {float:left;height:auto;width:500px;} /***section***/ h1 {width:1100px; margin:0 auto; padding:20px 0 20px 0; position:relative; left:-40px;} #section_main {clear:both; width:100%; height:100%; position:relative; top:0px; padding:10px 0 20px 0;} /*section class="home*/ section.home {width:100%; text-align:center; height:711px;} #home_article {position:relative;top:0px;left:68px;color:#ffcc0c;letter-spacing:0px; width:100%; text-align:center;} /*company_page*/ section.company img {position:relative; left:0px;} section.company ul {} section.company ul li {list-style:none; position:relative; left:-35px; width:1090px;} section.company ul li {margin:20px 0 0 0;} #company_main {height:auto; width:1200px; margin:0 auto 0 auto;} #company_article {position:relative;top:-30px;left:90px;color:#ffcc0c;letter-spacing:0px; line-height:22px; width:1100px;} /*services_page*/ article.services #section_main{width:100%; background:url(../img/index_bg_main.png) repeat-x no-repeat #d30000;} #services_main {height:502px;width:1050px; margin:0 auto 0 auto; } article.services #section_main #servicesWrapper {width:1500px;margin:0 auto; position:relative; top:20px;} article.services #section_main #servicesWrapper div{width:550px; height:450px; float:left; color:#ffcc0c; letter-spacing:0px; line-height:22px; margin:0 0 0 0px; padding:0px 0 0 0; position:relative; left:-25px; top:-20px;} article.services #section_main #servicesWrapper div h3 {position:relative; top:0px; font-weight:bold; font-size:20px; padding:0 0 10px;} article.services #section_main #servicesWrapper div ul {margin:0!important; padding:0!important; position:relative; left:16px; top:5px;} article.services #section_main #servicesWrapper div ul li {width:490px; list-style-type:disc; list-style-position:outside;} article.services #section_main #servicesWrapper div:nth-child(1){} article.services #section_main #servicesWrapper div:nth-child(2){} article.services #section_main #servicesWrapper div:nth-child(3){height:350px;} article.services #section_main #servicesWrapper div:nth-child(4){width:750px!IMPORTANT; height:350px;} /*work_page*/ #work_main {height:auto;width:1063px; margin:0 auto 0 auto; } #page_title_work {position:relative;top:0px;left:0px;} /*location_page*/ section.location #section_main {height:760px!important; overflow:hidden; } #puzzleWrappertotal.main{width:1550px; height:850px; overflow:hidden;position:absolute; left:50%; margin:-20px 0 0 -650px; z-index:999; } #puzzleWrappertotal.left{width:1550px; height:850px; overflow:hidden; position:absolute; left:50%; margin:-20px 0 0 -1873px; z-index:2} #puzzleWrappertotal.right{width:1550px; height:850px; overflow:hidden; position:absolute; left:50%; margin:-20px 0 0 573px; z-index:1} #location_main {height:400px;width:1200px; margin:0 auto 0 auto; background:url(../img/location_bg.png) no-repeat 150px -20px;} #location_article {position:relative;top:30px;left:68px;color:#ffcc0c;width:510px;} #location_li {position:relative;top:50px;left:100px;width:420px; color:#ffcc0c;} #location_li li {display:list-item; vertical-align:top; list-style:disc outside;} #puzzleWrapper {width:1550px; margin:18px auto 0 -720px; clear:both!important; position:relative; left:50%; top:0px; z-index:9999; } #puzzleWrapper div {position:relative!important; margin:0!important; padding:0!important;} #puzzleWrapper div img {cursor:pointer;} #puzzleWrapper div img:hover { opacity: 0.4; filter: alpha(opacity=80);} #puzzleWrapper div.odd,#puzzleWrapper div.even {float:left;} #puzzleWrapper div.odd{width:83px; height:223px; z-index:998; position:relative!important; left:-42px; top:-23px;} #puzzleWrapper div.even{width:205px; height:174px; z-index:997;} #puzzleWrapper div.odd:hover,#puzzleWrapper div.even:hover{position:relative!important; z-index:999;} #puzzleWrapper.first {position:relative; top:20px; z-index:999;} #puzzleWrapper.first:hover { z-index:9999;} #puzzleWrapper.second{height:165px; position:relative; top:-38px; z-index:998;} #puzzleWrapper.second div.odd{ left:-64px!important; top:-13px; } #puzzleWrapper.second div.even{left:18px!important; top:-35px; } #puzzleWrapper.third {position:relative; top:-122px; z-index:997;} #puzzleWrapper.third div.odd{ position:relative!important; left:-42px; top:-23px;} #puzzleWrapper.third div.even{} #puzzleWrapper.forth{height:165px; position:relative; top:-180px; z-index:996;} #puzzleWrapper.forth div.odd{left:-60px!important; top:-13px; } #puzzleWrapper.forth div.even{left:20px!important; top:-36px; } #puzzleWrapper.fifth {position:relative; top:-265px;} #puzzleWrapper.fifth div.odd{ position:relative!important; left:-42px; top:-23px; } #puzzleWrapper.fifth div.even{} #puzzleWrapper.left1 {width:205px!important; height:3000px; position:absolute!important; left:50%!important; margin:7px 0 0 -740px!important;} #puzzleWrapper.left1 div {display:block; float:none; } #puzzleWrapper.left1 div.odd{width:166px!important; position:relative!important; top:0!important; left:20px!important; } #puzzleWrapper.left1 div.even{width:205px; height:174px; position:relative!important; top:-47px!important; left:0!important;} #puzzleWrapper.left1 div:nth-child(3){top:-90px!important;} #puzzleWrapper.left1 div:nth-child(4){top:-141px!important;} #puzzleWrapper.left1 div:nth-child(5){top:-185px!important;} #puzzleWrapper.left2 {width:205px!important; height:3000px; position:absolute!important; left:50%!important; margin:30px 0 0 -880px!important; } #puzzleWrapper.left2 div {display:block; float:none; } #puzzleWrapper.left2 div.odd{width:205px!important; height:174px; position:relative!important; top:0!important; left:0px!important; } #puzzleWrapper.left2 div.even{width:83px; height:223px; position:relative!important; top:-45px!important; left:20px!important;} #puzzleWrapper.left2 div:nth-child(3){top:-90px!important;} #puzzleWrapper.left2 div:nth-child(4){top:-141px!important;} #puzzleWrapper.left2 div:nth-child(5){top:-185px!important;} #puzzleWrapper.right1 {width:205px!important; height:3000px; position:absolute!important; left:50%!important; margin:30px 0 0 556px!important;} #puzzleWrapper.right1 div {display:block; float:none; } #puzzleWrapper.right1 div.odd{width:205px!important; height:174px; position:relative!important; top:0!important; left:0px!important; } #puzzleWrapper.right1 div.even{width:83px; height:223px; position:relative!important; top:-45px!important; left:20px!important;} #puzzleWrapper.right1 div:nth-child(3){top:-90px!important;} #puzzleWrapper.right1 div:nth-child(4){top:-141px!important;} #puzzleWrapper.right1 div:nth-child(5){top:-185px!important;} #puzzleWrapper.right2 {width:205px!important; height:3000px; position:absolute!important; left:50%!important; margin:7px 0 0 700px;} #puzzleWrapper.right2a {width:205px!important; height:3000px; position:absolute!important; left:50%!important; margin:7px 0 0 -1025px; display:none;} #puzzleWrapper.right2 div {display:block; float:none; } #puzzleWrapper.right2 div.odd{width:166px!important; position:relative!important; top:0!important; left:20px!important; } #puzzleWrapper.right2 div.even{width:205px; height:174px; position:relative!important; top:-47px!important; left:0!important;} #puzzleWrapper.right2 div:nth-child(3){top:-90px!important;} #puzzleWrapper.right2 div:nth-child(4){top:-141px!important;} #puzzleWrapper.right2 div:nth-child(5){top:-185px!important;} #puzzleWrapper.right3 {width:205px!important; height:3000px; position:absolute!important; left:50%!important; margin:30px 0 0 840px!important;} #puzzleWrapper.right3 div {display:block; float:none; } #puzzleWrapper.right3 div.odd{width:205px!important; height:174px; position:relative!important; top:0!important; left:0px!important; } #puzzleWrapper.right3 div.even{width:83px; height:223px; position:relative!important; top:-45px!important; left:20px!important;} #puzzleWrapper.right3 div:nth-child(3){top:-90px!important;} #puzzleWrapper.right3 div:nth-child(4){top:-141px!important;} #puzzleWrapper.right3 div:nth-child(5){top:-185px!important;} #imgShowWrapper {width:500px; height:500px; background-color:transparent; position:fixed; top: 50%; right: 50%; transform: translate(50%,-50%); } #imgShowWrapperMask { width:5000px; height:200%; background:red; position:absolute; display:none; opacity: 0.7; filter: alpha(opacity=70); } #imgShowWrapper img {width:auto; max-width:100%; height:auto; position:absolute; top: 50%; right: 50%; transform: translate(50%,-50%); z-index:1;} /*contact_page*/ article.contact #article_main { position:absolute; left:50%; margin:0 0 0 -590px; z-index:9998;} article.contact h1 img.contactFrom { position:relative; left:240px; } #contact_main {height:400px;width:1200px; margin:0 auto 0 auto; background:url() no-repeat 120px -20px;} #contact_article {position:relative;top:30px;left:68px;color:#ffcc0c;width:510px; } #contact_li {position:relative;top:50px;left:100px;width:510px; color:#ffcc0c;} #contact_li li {display:list-item; vertical-align:top; list-style:disc outside;} #contact_article2 {position:relative;top:50px;left:68px;color:#ffcc0c;width:510px;} #contact_li2 {position:relative;top:70px;left:100px;width:510px; color:#ffcc0c;} #contact_li2 li {display:list-item; vertical-align:top; list-style:disc outside;} #contact_li3 {position:relative;top:100px;left:70px;width:510px; color:#ffcc0c;} .contact_mail2 { margin:5px 0 0 168px;} #contact_form {position:absolute; left:50%; width:561px; height:auto; float:left; padding:0 0 10px 0; text-align:Left; z-index:9999; } #contact_form #page_title {margin:0 0 0 -100px} #feed {color:#ffcc0c; position:relative; top:100px;} #back {position:relative; top:120px; left:350px;} #icon {position:relative; top:7px;} .co_123 {margin:0 0 0 7px;} /***section end***/ /***footer***/ #footer_main {clear: both;height: 87px;width: 100%;background:url(../img/bg_footer.png) repeat-x; clear:both; } #c-r {height: 61px;width:100%;margin:0 auto 0 auto; position:relative; top:30px; left:0px;color:#ffcc0c; text-align:center;} .footer_text {color:#FFF; font-size:12px;} /***.clearfix***/ .clearfix:after {content:".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} .clearfix {display:inline-block;} html[xmlns] .clearfix {display: block;} * html .clearfix {height: 1%;} @media not all and (min-resolution:.001dpcm) { @media { select { -webkit-appearance: none; -webkit-border-radius: 0px; -moz-appearance: none; appearance: none; /* SVG background image */ background: url("data:image/svg+xml;utf8,") no-repeat; background-size: 12px; background-position: calc(100% - 10px) center; background-repeat: no-repeat; /*font-family: 'Merienda', cursive;font-size:18px;*/ font-size:11px; background-color: transparent; text-indent:5px; opacity:1; -moz-opacity:1; -webkit-opacity:1; color: #e2723d; width:477px!important; } select::-ms-expand { display: none; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #e2723d; /*font-family: 'Merienda', cursive;font-size:18px;*/ } ::selection { background: #e2723d; /* WebKit/Blink Browsers */ } ::-moz-selection { background: #e2723d; /* Gecko Browsers */ } } }