@charset "utf-8"; @font-face { font-family: open-sans; font-style: normal; font-weight: 100; src: url(/content/fonts/open-sans/open-sans-light.ttf) , url(/content/fonts/open-sans/open-sans-light.eot) format('truetype'); } @font-face { font-family: open-sans; font-style: normal; font-weight: 400; src: url(/content/fonts/open-sans/open-sans.ttf) , url(/content/fonts/open-sans/open-sans.eot) format('truetype'); } @font-face { font-family: open-sans; font-style: normal; font-weight: 700; src: url(/content/fonts/open-sans/open-sans-bold.ttf) , url(/content/fonts/open-sans/open-sans-bold.eot) format('truetype'); } @font-face { font-family: open-sans; font-style: italic; font-weight: 100; src: url(/content/fonts/open-sans/open-sans-light-italic.ttf) , url(/content/fonts/open-sans/open-sans-light-italic.eot) format('truetype'); } @font-face { font-family: open-sans; font-style: italic; font-weight: 400; src: url(/content/fonts/open-sans/open-sans-italic.ttf) , url(/content/fonts/open-sans/open-sans-italic.eot) format('truetype'); } @font-face { font-family: open-sans; font-style: italic; font-weight: 700; src: url(/content/fonts/open-sans/open-sans-bold-italic.ttf) , url(/content/fonts/open-sans/open-sans-bold-italic.eot) format('truetype'); } html, body, div, span, td, tr, th, tbody, thead, tfoot, font, iframe, blockquote, a, pre, img, input, textarea, select, h1, h2, h3, h4, h5, h6, ol, ul, li, p, label, b, i, strong, footer, header, section, time, article, video, figure, figcaption, progress, em, code { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; font-size: inherit; text-decoration: none; font-variant: normal; letter-spacing: inherit; word-spacing: inherit; line-height: inherit; vertical-align: baseline; } html, body { width: 100%; height: 100%; min-height: 100%; background-color: #efefef; } html { position: relative; overflow: auto; } strong, b { font-weight: bold; } i { font-style: italic; } table { border-collapse: collapse; border-spacing: 0; } body { font-size: 14px; font-family: open-sans, helvetica, arial; text-align: left; } textarea:focus, input:focus { outline: none; } form { display: inline; margin: 0px; padding: 0px; } #all-relative { position: relative; width: 100%; min-height: 100%; height: auto !important; margin: 0 0 0 0; overflow: auto; background-color: #ffffff; /*background: url( "/app/images/bg.jpg" ) center center fixed;*/ background-repeat: no-repeat; background-position: center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #all { position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; height: auto; margin: 0; overflow: auto; background-color: #ffffff; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #all:after { display: block; width: 100%; height: 350px; content: ""; clear: both; } /* GLOBAL */ #loadtime { position: fixed; z-index: 5; width: 73px; bottom: 0; left: -70px; padding: 9px 0 9px 0; background-color: #000000; color: #ffffff; text-align: center; font-weight: bold; } #loadtime:hover { left: 0; } .justify { text-align: justify; } .nosel { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } /* PAGE NOT FOUND */ #pnf { position: absolute; width: 100%; height: 100%; overflow: hidden; text-align: center; background-color: #84cbc5; } #pnf h1 { margin: 50px 10px 40px 10px; font-size: 100px; color: #ffffff; line-height: 150%; font-weight: lighter; } #pnf p, #pnf a { margin: 0 10px 20px 10px; font-size: 24px; color: #ffffff; font-weight: lighter; text-transform: uppercase; line-height: 150%; } #pnf a { color: #234556; } #pnf a:hover { color: #a00000; } /* BLACK LIST */ #bl { position: absolute; width: 100%; height: 100%; overflow: hidden; text-align: center; background-color: #000000; } #bl h1 { margin: 50px 10px 20px 10px; font-size: 50px; color: #ff0000; line-height: 100%; font-weight: lighter; } #bl p { margin: 0 10px 0 10px; font-size: 18px; text-transform: uppercase; color: #ffffff; line-height: 150%; font-weight: lighter; } #bl a:hover { color: #a00000; } /* MAINTENANCE */ #offline { position: absolute; width: 100%; height: 100%; overflow: auto; color: #aa0000; text-align: center; text-shadow: 0px 0px 1px #aa0000; background-color: #ffffff; } #offline h1 { margin: 50px 0 40px 0; font-size: 40px; line-height: 150%; font-weight: lighter; } #offline p { font-size: 20px; text-transform: uppercase; line-height: 200%; font-weight: lighter; } /* HERO */ #hero { position: relative; width: 100%; height: 500px; padding: 0; margin: 0 0 20px 0; /*background-attachment: fixed;*/ background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: #000000; } #hero h1 { position: absolute; width: 100%; left: 0; top: 50%; margin: -25px 0 0 0; font-size: 46px; line-height: 50px; font-weight: 400; text-align: center; color: #ed1c24; text-transform: uppercase; text-shadow: 0 0 5px rgba( 0, 0, 0, 0.8 ); } #center { max-width: 1200px; margin: 0 auto 0 auto; } .on, .off { width: 80px; height: 40px; background: url( '../images/cp.png' ) #e0e0e0 no-repeat -80px -480px; cursor: pointer; transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; border-radius: 2px; } .on { background-position: -40px -480px; } .yes, .no { width: 80px; height: 40px; background: url( '../images/cp.png' ) #e0e0e0 no-repeat -240px -480px; cursor: pointer; transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; border-radius: 2px; } .yes { background-position: -200px -480px; } /* CALENDAR */ .calendar { display: none; position: absolute; z-index: 12; width: 238px; height: auto; margin: 0; text-transform: uppercase; overflow: hidden; box-shadow: 0 0 5px rgba( 0, 0, 0, 0.2 ); } .calendar div { height: 34px; color: #ffffff; line-height: 34px; font-weight: bold; text-align: center; background-color: #393939; } .calendar nav { position: absolute; top: 0; left: 0; width: 100%; height: 34px; line-height: 34px; font-size: 14px; font-weight: bold; text-align: center; background-color: transparent; } .calendar nav span { float: right; width: 34px; height: 34px; background: url( '../images/cp.png' ) no-repeat -203px -123px; cursor: pointer; } .calendar nav span:first-child { float: left; background-position: -163px -123px; } .calendar nav span:hover { background-color: #595959; } .calendar ol { display: block; width: 100%; height: 34px; list-style-type: none; color: #989898; background-color: #f4f4f4; } .calendar ol li { position: relative; float: left; width: 34px; height: 34px; line-height: 34px; font-weight: bold; font-size: 14px; text-align: center; border-right: 1px solid #d5d5d5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .calendar ol li:last-child { border-right: 0; } .calendar ul { display: block; width: 100%; height: auto; list-style-type: none; background-color: #ffffff; overflow: hidden; } .calendar ul li { position: relative; float: left; width: 34px; height: 34px; line-height: 34px; font-weight: normal; color: #aaaaaa; font-size: 14px; text-align: center; border-right: 1px solid #d5d5d5; border-top: 1px solid #d5d5d5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .calendar ul li:nth-child( 7n + 7 ) { border-right: 0; } .calendar .day { cursor: pointer; font-weight: bold; color: #000000; } .calendar .day:hover { color: #000000; background-color: #f0f0f0; } .calendar .sel { color: #ffffff; background-color: #6eafbf; } .calendar .today { color: #fe5c57; } /* TIMEPICKER */ .timepicker { display: none; position: absolute; z-index: 12; width: 200px; min-height: 120px; padding: 0; margin: 0; font-weight: bold; overflow: hidden; background-color: #ffffff; box-shadow: 0 0 5px rgba( 0, 0, 0, 0.2 ); } .timepicker h3 { display: block; padding: 0 0 0 10px; margin: 0 0 10px 0; line-height: 40px; color: #000000; border-bottom: 2px solid #f0f0f0; } .timepicker nav { display: block; width: 100%; height: 50px; } .timepicker nav span { float: left; width: 50px; height: 50px; background: url('../images/cp.png') no-repeat -235px -115px; cursor: pointer; } .timepicker nav span:first-child { margin: 0 0 0 25px; } .timepicker nav span:last-child { float: right; margin: 0 25px 0 0; } .timepicker .down { border-bottom: 1px solid #f0f0f0; } .timepicker .down span { background-position: -275px -115px; } .timepicker div { width: 100%; height: 42px; } .timepicker div span { float: left; width: 50px; height: 40px; text-align: center; line-height: 40px; color:#232323; font-size: 14px; } .timepicker div span:first-child { margin: 0 0 0 25px; border-top: 2px solid #f0f0f0; border-bottom: 2px solid #f0f0f0; } .timepicker div span:last-child { float: right; margin: 0 25px 0 0; border-top: 2px solid #f0f0f0; border-bottom: 2px solid #f0f0f0; } .timepicker .set { float: left; width: 99px; line-height: 40px; text-align: center; border-right: 1px solid #f0f0f0; cursor: pointer; } .timepicker .cancel { float: left; width: 100px; line-height: 40px; text-align: center; cursor: pointer; } /* GLOBAL HEADER */ #header { position: fixed; z-index: 5; top: 0; left: 0; width: 100%; height: 60px; background-color: rgba( 0, 0, 0, 0.7 ); border-bottom: 1px dotted rgba( 142, 142, 142, 0.8 ); transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } #header nav { max-width: 1200px; height: 60px; margin: 0 auto 0 auto; } #header img { float: left; margin: 10px 0 0 0; } #header span { display: none; position: absolute; width: 50px; height: 60px; top: 0; left: 0; background: url( '../images/global.png') no-repeat 5px -75px; cursor: pointer; border-right: 1px solid #d9d9d9; } #header span:hover { background-color: #e0e0e0; } #header ul { float: right; display: block; width: auto; list-style-type: none; } #header ul li { position: relative; float: left; display: block; min-height: 60px; border-right: 1px dotted rgba( 142, 142, 142, 0.8 ); /*transform: skewX(0deg);*/ } #header ul li:first-child { border-left: 1px dotted rgba( 142, 142, 142, 0.7 ); } #header ul ul { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: #e9e9e9; } #header ul li li { float: none; min-height: 40px; line-height: 40px; border: 0; border-top: 1px solid #d9d9d9; } #header ul li li:first-child { border-left: 0; } #header ul li:hover ul { display: block; } #header ul a { display: block; padding: 0 20px 0 20px; color: #e0e0e0; line-height: 60px; font-weight: bold; font-size: 12px; text-transform: uppercase; } #header ul a:hover { color: #cd1231; } #header input { float: right; width: 300px; height: 50px; margin: 0; padding: 0 10px 0 20px; color: #555759; font-weight: bold; line-height: 50px; background-color: #f5f5f5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #header input::-webkit-input-placeholder { color: #757779; } #header input:-moz-placeholder { color: #757779; } #header .sel { line-height: 58px; border-top: 2px solid #ed1c24; } #header .home { background: url( '../images/global.png') no-repeat 0 5px; padding: 0 20px 0 40px; } #header .home:hover, #header .homesel { background: url( '../images/global.png') no-repeat 0 -35px; padding: 0 20px 0 40px; color: #cd1231; } /* GLOBAL FOOTER */ #footer { position: absolute; left: 0; bottom: 0; display: block; width: 100%; min-height: 300px; margin: 0 auto 0 auto; padding: 0 0 0 0; overflow: auto; background-color: #f5f5f5; border-top: 1px solid #e5e5e5; border-bottom: 5px solid #ed1c24; } #footer nav { display: block; max-width: 1200px; margin: 0 auto 0 auto; padding: 50px 20px 50px 20px; overflow: hidden; } #footer ul { display: block; height: 30px; margin: 0 0 50px 0; padding: 0 0 0 0; list-style-type: none; } #footer ul li { float: left; display: block; width: 20%; height: 30px; color: #c6cbce; font-size: 14px; line-height: 30px; text-transform: uppercase; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-left: 1px solid #ed1c24; } #footer ul li:first-child { border: 0; } #footer ul li a { display: block; color: #78797a; line-height: 30px; font-weight: bold; } #footer a:hover { color: #cd1231; } #footer img { float: right; width: 120px; opacity: 0.2; transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } #footer img:hover { opacity: 1; } #footer div { display: block; min-height: 50px; padding: 20px 0 0 0; color: #767b7e; border-top: 1px dotted #ed1c24; clear: both; text-align: center; } #footer p { line-height: 150%; } #footer ol { display: block; width: 200px; height: 40px; margin: 0 auto 20px auto; list-style-type: none; } #footer ol li { float: left; width: 40px; height: 40px; margin: 0 5px 0 5px; background: url( '../images/global.png') no-repeat 0 0; opacity: 0.5; } #footer ol li:hover { opacity: 1; } #footer ol li a { display: block; width: 40px; height: 40px; } #footer .tw { background-position: -40px -80px; } #footer .fb { background-position: -80px -80px; } #footer .gp { background-position: -120px -80px; } #footer .rss { background-position: -160px -80px; } /* ACCOUNTS */ #accounts { position: absolute; top: 10%; left: 50%; display: block; width: 400px; height: auto; margin: 0 0 0 -200px; padding: 30px 0 0 0; overflow: auto; background-color: rgba( 64, 152, 212, 0.9 ); box-shadow: 0 0 10px 0 rgba( 0, 0, 0, 0.5 ); } #accounts h2 { display: block; width: 80%; color: #ffffff; font-size: 24px; margin: 0 0 20px 10%; line-height: 24px; } #accounts h2 a { float: right; margin: 0; color: #ddeeff; font-size: 12px; line-height: 24px; text-transform: uppercase; } #accounts .success , #accounts .error , #accounts .warning { display: block; width: 80%; height: auto; margin: 0 auto 20px auto; padding: 10px 10px 10px 10px; font-size: 14px; font-weight: bold; color: #ffffff; text-align: center; line-height: 150%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #accounts .success { background-color: #7aa13d; } #accounts .error { background-color: #aa0000; } #accounts .warning { color: #232323; background-color: #fff6cd; } #accounts label { display: block; width: 80%; padding: 0 0 5px 10%; color: #ccddee; font-size: 10px; clear: both; text-transform: uppercase; line-height: 100%; } #accounts input { display: block; width: 80%; height: 40px; margin: 0 auto 20px auto; padding: 10px 10px 10px 10px; font-size: 15px; color: #ccddee; background-color: #1f4966; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #accounts input:hover { color: #ffffff; background-color: #3072a0; } #accounts .select { position: relative; width: 80%; height: 40px; margin: 0 0 20px 10%; padding: 8px 10px 8px 10px; background-color: #1f4966; border: 0; opacity: 1; transition:all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #accounts .select span { position: absolute; top: 0px; left: 10px; color: #ccddee; font-size: 15px; line-height: 40px; text-transform: uppercase; } #accounts .select:after { position: absolute; display: block; top: 0px; right: 0px; width: 40px; height: 40px; content: ""; background: url( '../images/global.png') no-repeat 0px -250px; } #accounts select { z-index: 3; position: absolute; top: 0px; left: 0px; width: 100%; height: 40px; padding: 5px 0 5px 0; color: #aabbcc; font-weight: normal; background-color: #1f4966; opacity: 0; text-transform: uppercase; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #accounts .cb , #accounts .cbs { float: right; width: 18px; height: 18px; margin: 7px 10% 0 10px; border: 1px solid #ccddee; background-color: transparent; font-size: 0px; cursor: pointer; } #accounts .cbs { width: 20px; height: 20px; border: 0; background: url( '../images/global.png' ) no-repeat -50px -170px; } #accounts h5 { float: right; font-size: 12px; margin: 0 0 0 0; color: #ccddee; line-height: 34px; } #accounts .submit { float: left; width: 80%; height: 40px; margin: 0 0 20px 10%; padding: 0 0 0 0; font-size: 14px; line-height: 40px; color: #ffffff; background-color: #ee3438; cursor: pointer; font-weight: bold; text-align: center; text-transform: uppercase; } #accounts .submit:hover { background-color: #fe4448; } #accounts .footer { float: left; width: 100%; height: auto; margin: 0; padding: 0; border-top: 1px solid #3072a0; background-color: rgba( 0, 0, 0, 0.5 ); } #accounts .footer a { display: block; float: left; width: 50%; padding: 0 0 0 0; margin: 0 0 0 0; font-size: 12px; color: #aabbcc; cursor: pointer; font-weight: bold; line-height: 40px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #accounts .footer a:first-child { border-right: 1px solid #3072a0; } #accounts a:hover { color: #fe4448; } #accounts .strength { float: left; width: 80%; height: 5px; margin: 5px 0 0 10%; } #accounts .strength div { display: none; float: left; width: 80px; height: 5px; background-color: #aa0033; } #accounts .space { float: left; width: 100%; height: 10px; clear: both; } /* MAIN-HERO */ #mainhero { position: relative; display: block; width: 100%; min-height: 400px; padding: 0 0 0 0; margin: 0 0 30px 0; overflow: hidden; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: #000000; } #mainhero h1 { font-size: 60px; line-height: 100px; font-weight: 400; text-align: center; color: #ed1c24; text-transform: uppercase; text-shadow: 0 0 5px rgba( 0, 0, 0, 0.8 ); } #mainhero h2 { font-size: 60px; line-height: 100px; font-weight: 400; text-align: center; color: #ed1c24; text-transform: uppercase; text-shadow: 0 0 5px rgba( 0, 0, 0, 0.8 ); } #mainhero p { font-size: 30px; line-height: 40px; font-weight: 400; text-align: center; color: #ffffff; text-shadow: 0 0 5px rgba( 0, 0, 0, 0.8 ); } #mainhero article { position: relative; max-width: 1200px; height: 50%; margin: 0 auto 0 auto; background-color: rgba( 237, 28, 36, 0.5 ); } #mainhero ul { position: absolute; top: 0; left: 0; width: 400%; height: 100%; list-style: none; } #mainhero ul li { visibility: hidden; position: absolute; top: 0; left: 0; width: 25%; height: 100%; opacity: 1; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } #mainhero ul .sel { visibility: visible; opacity: 1; transform: scale( 1.1, 1.1 ); -webkit-transform: scale( 1.1, 1.1 ); } #mainhero nav { position: absolute; bottom: 30px; width: 100%; height: auto; margin: 0 auto 0 auto; } #mainhero nav ol { position: relative; max-width: 1200px; height: 100%; margin: 0 auto 0 auto; list-style: none; background-color: #123456; } #mainhero nav ol li { position: relative; float: left; width: 10%; height: 0; padding: 0 0 10% 0; margin: 0 11.66% 0 11.66%; background-color: transparent; border: 2px solid rgba( 0, 0, 0, 0.2 ); overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 5px; } #mainhero nav ol li img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } #mainhero nav ol li:hover img { transform: scale( 1.1, 1.1 ); -webkit-transform: scale( 1.1, 1.1 ); } #mainhero nav ol .sel { border: 2px solid rgba( 255, 0, 0, 0.5 ); } /* HOME */ #home { display: block; width: 100%; min-height: 400px; padding: 0 0 0 0; margin: 0 0 0 0; background-color: transparent; overflow: auto; } #home .latest { display: block; width: 100%; min-height: 300px; padding: 40px 0 40px 0; margin: 0 0 0 0; background: url('../images/footer-bg.png') rgba( 246, 230, 213, 1 ) 0 0; } #home .latest article { display: block; max-width: 1200px; min-height: 300px; margin: 0 auto 0 auto; padding: 0 10px 0 10px; } #home .latest img { float: left; display: block; width: 300px; } #home .latest div { float: left; display: block; width: calc( 100% - 340px ); min-height: 220px; margin: 0 0 0 40px; padding: 40px 0 40px 0; line-height: 150%; } #home .latest h3 { display: block; margin: 0 0 40px 0; color: #d5d5d5; font-size: 28px; font-weight: bold; line-height: 150%; } #home .latest p { display: block; margin: 0 0 20px 0; color: #a5a5a5; font-size: 16px; line-height: 150%; } #home .latest a { color: #d5d5d5; font-weight: bold; } #home .latest a:hover { color: #ed1c24; } #home .welcome { display: block; max-width: 1200px; padding: 40px 0 40px 0; margin: 0 auto 0 auto; } #home .welcome h2 { display: block; margin: 0 0 30px 0; text-align: center; font-size: 44px; color: #333333; } #home .welcome h2:after { display: block; width: 50px; height: 2px; margin: 30px auto 0 auto; content: ""; background-color: #ed1c24; clear: both; } #home .welcome p { display: block; margin: 0 0 30px 0; text-align: center; font-size: 16px; line-height: 26px; } #home .services { display: block; max-width: 1200px; padding: 40px 0 40px 0; margin: 0 auto 0 auto; } #home .services ul { display: block; overflow: hidden; list-style: none; } #home .services ul li { position: relative; float: left; width: 31.33%; height: 0; padding: 0 0 15.66% 0; margin: 1%; } #home .services h2 { position: absolute; top: 50%; left: 0; display: block; width: 100%; margin: -12px 0 0 0; color: #ffffff; font-size: 16px; font-weight: bold; line-height: 24px; vertical-align: middle; text-align: center; text-shadow: 0 0 2px rgba( 0, 0, 0, 1 ); } #home .services img { position: absolute; width: 100%; top: 0; left: 0; } #home .services div { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba( 0, 0, 0, 0.4 ); transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } #home .services li:hover div { background-color: rgba( 0, 0, 0, 0 ); } #home .services li:hover h2 { color: #ed1c24; } /* ABOUT TEMPLATE */ #about { position: relative; min-height: 100px; height: auto; padding: 20px 0 20px 0; font-size: 16px; color: #4f4f4f; line-height: 150%; overflow: hidden; } #about h1 { position: relative; height: auto; margin: 0 0 0 0; padding: 0 0 20px 0; color: #454545; font-size: 20px; line-height: 20px; font-weight: bold; text-transform: uppercase; overflow: hidden; vertical-align: middle; text-align: center; } #about h2 { position: relative; height: auto; margin: 0 0 0 0; padding: 0 0 20px 0; color: #454545; font-size: 20px; line-height: 20px; font-weight: bold; overflow: hidden; vertical-align: middle; } #about p { margin: 0 0 1em 0; text-align: justify; } #about br { clear: both; } #about article { } #about ul { margin: 0 0 1em 0; padding: 0 0 0 1em; } #about ul li { margin: 0 0 1em 0; padding: 0 0 0 1em; } #about a { color: #11a6bb; } #about a:hover { color: #fe5c57; } #about .latest { display: block; max-width: 1200px; padding: 40px 0 40px 0; margin: 0 auto 0 auto; } #about .latest ul { display: block; margin: 0 0 30px 0; padding: 0; overflow: hidden; list-style: none; } #about .latest ul li { position: relative; float: left; width: 32%; height: 0; padding: 0 0 16% 0; margin: 0 2% 0 0; } #about .latest ul li:last-child { margin: 0 0 0 0; } #about .latest h2 { display: block; margin: 0 0 20px 0; color: #000000; font-size: 20px; font-weight: bold; line-height: 20px; text-transform: uppercase; } #about .latest h3 { position: absolute; top: 50%; left: 0; display: block; width: 100%; margin: -12px 0 0 0; color: #ffffff; font-size: 16px; font-weight: bold; line-height: 24px; vertical-align: middle; text-align: center; text-shadow: 0 0 2px rgba( 0, 0, 0, 1 ); } #about .latest a { color: #ffffff; } #about .latest img { position: absolute; width: 100%; top: 0; left: 0; } #about .latest div { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba( 0, 0, 0, 0.4 ); transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } #about .latest li:hover div { background-color: rgba( 0, 0, 0, 0 ); } #about .latest li:hover a { color: #ed1c24; } /* CONTACT - TEMPLATE */ #contact { display: block; max-width: 1200px; margin: 80px auto 30px auto; padding: 0 20px 0 20px; overflow: auto; } #contact article { float: left; width: 48%; } #contact article:first-child { margin: 0 4% 0 0; } #contact h2 { position: relative; height: auto; margin: 0 0 20px 0; padding: 0 0 0 0; color: #454545; font-size: 20px; line-height: 20px; font-weight: bold; text-transform: uppercase; overflow: hidden; vertical-align: middle; } #contact h2:after { position: absolute; content: ""; height: 2px; top: 50%; width: 100%; margin: 0 0 0 20px; background-color: #e0e0e0; } #contact p { position: relative; height: auto; margin: 0 0 20px 0; padding: 0 0 0 0; color: #60656a; line-height: 24px; font-size: 16px; font-weight: normal; text-align: justify; } #contact p a { color: #43a0df; } #contact p a:hover { color: #fe5c57; } #contact input { display: block; width: 100%; height: 46px; padding: 10px 10px 10px 10px; margin: 0 0 20px 0; color: #404040; font-size: 14px; border: 1px solid #d5d5d5; background: none repeat scroll 0 0 #f5f5f5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #contact input:focus { padding: 8px; border: 3px solid #e0e0e0; } #contact textarea { display: block; width: 100%; height: 120px; padding: 10px 10px 10px 10px; margin: 0 0 20px 0; color: #404040; font-size: 14px; border: 1px solid #d5d5d5; background: none repeat scroll 0 0 #f5f5f5; resize: vertical; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #contact textarea:focus { padding: 8px; border: 3px solid #e0e0e0; } #contact .submit { display: block; width: auto; height: auto; padding: 10px 11px 10px 11px; margin: 0 auto 20px auto; color: #ffffff; font-weight: bold; text-align: center; background-color: #cd1231; cursor: pointer; text-transform: uppercase; } #contact .submit:hover { background-color: #990d25; } #contact input::-webkit-input-placeholder , #contact textarea::-webkit-input-placeholder { color: #888888; } #contact input:-moz-placeholder , #contact textarea:-moz-placeholder { color: #888888; } #contact .select { position: relative; width: 100%; height: 46px; margin: 0 0 20px 0; padding: 10px 10px 10px 10px; background-color: #f0f0f0; border: 1px solid #d5d5d5; opacity: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #contact .select span { position: absolute; display: block; top: 0px; left: 10px; color: #404040; font-size: 14px; line-height: 44px; text-transform: uppercase; } #contact .select:after { position: absolute; display: block; top: 2px; right: 0; width: 40px; height: 40px; content: ""; background: url( '../images/global.png') no-repeat -80px -160px; } #contact select { z-index: 3; position: absolute; top: 0px; left: 0px; width: 100%; height: 46px; padding: 5px 0 5px 0; color: #656565; font-weight: normal; background-color: #f5f5f5; opacity: 0; text-transform: uppercase; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #contact .success { height: auto; margin: 0 0 20px 0; padding: 15px 10px 15px 10px; font-weight: bold; color: #ffffff; text-align: left; line-height: 130%; background-color: #7aa13d; } #contact .error { height: auto; margin: 0 0 20px 0; padding: 15px 10px 15px 10px; font-weight: bold; color: #ffffff; text-align: left; line-height: 130%; background-color: #aa0000; } #contact .warning { height: auto; margin: 0 0 20px 0; padding: 15px 10px 15px 10px; font-weight: bold; color: #232323; text-align: left; line-height: 130%; background-color: #fff6cd; } #contact .address { padding: 0 0 0 40px; margin: 50px 0 20px 0; } #contact .address:after { position: absolute; top: 0; left: 0; display: block; width: 24px; height: 24px; text-align: center; content: "A"; color: #ffffff; font-weight: bold; background-color: #ed1c24; } #contact .email { padding: 0 0 0 40px; } #contact .email:after { position: absolute; top: 0; left: 0; display: block; width: 24px; height: 24px; text-align: center; content: "E"; color: #ffffff; font-weight: bold; background-color: #ed1c24; } #contact .phone { padding: 0 0 0 40px; } #contact .phone:after { position: absolute; top: 0; left: 0; display: block; width: 24px; height: 24px; text-align: center; content: "P"; color: #ffffff; font-weight: bold; background-color: #ed1c24; } #contact .web { padding: 0 0 0 40px; } #contact .web:after { position: absolute; top: 0; left: 0; display: block; width: 24px; height: 24px; text-align: center; content: "W"; color: #ffffff; font-weight: bold; background-color: #ed1c24; } #gmap { width: 100%; height: 600px; margin: 0 auto 40px auto; border-top: 60px solid #000000; background-color: #000000; } #gmap .gm-style-cc { display:none; } #gmap a[ href^= "http://maps.google.com/maps" ] { display: none !important; } #gmap a[ href^= "https://maps.google.com/maps" ] { display: none !important; } /* SERVICES TEMPLATE */ #services { position: relative; min-height: 100px; height: auto; padding: 0 0 20px 0; font-size: 16px; color: #4f4f4f; line-height: 150%; overflow: hidden; } #services h1 { position: relative; height: auto; margin: 0 0 0 0; padding: 0 0 20px 0; color: #454545; font-size: 20px; line-height: 20px; font-weight: bold; text-transform: uppercase; overflow: hidden; vertical-align: middle; text-align: center; } /*#services h1:after { position: absolute; content: ""; height: 2px; top: 10px; width: 100%; margin: 0 0 0 20px; background-color: #e0e0e0; }*/ #services h2 { position: relative; height: auto; margin: 0 0 0 0; padding: 0 0 20px 0; color: #454545; font-size: 20px; line-height: 20px; font-weight: bold; text-transform: uppercase; overflow: hidden; vertical-align: middle; } /*#services h2:after { position: absolute; content: ""; height: 2px; top: 10px; width: 100%; margin: 0 0 0 20px; background-color: #e0e0e0; }*/ #services p { margin: 0 0 1em 0; text-align: justify; } #services br { clear: both; } #services article { } #services section {} #services ul { margin: 0 0 1em 0; padding: 0 0 0 1em; } #services ul li { margin: 0 0 1em 0; padding: 0 0 0 1em; } #services a { color: #11a6bb; } #services a:hover { color: #fe5c57; } #services-list { display: block; max-width: 1200px; padding: 40px 0 40px 0; margin: 0 auto 0 auto; } #services-list ul { display: block; overflow: hidden; list-style: none; } #services-list ul li { position: relative; float: left; width: 31.33%; height: 0; padding: 0 0 15.66% 0; margin: 1%; } #services-list h2 { position: absolute; top: 50%; left: 0; display: block; width: 100%; margin: -12px 0 0 0; color: #ffffff; font-size: 16px; font-weight: bold; line-height: 24px; vertical-align: middle; text-align: center; text-shadow: 0 0 2px rgba( 0, 0, 0, 1 ); } #services-list img { position: absolute; width: 100%; top: 0; left: 0; } #services-list div { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba( 0, 0, 0, 0.4 ); transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } #services-list li:hover div { background-color: rgba( 0, 0, 0, 0 ); } #services-list li:hover h2 { color: #ed1c24; } #services .sliderframe { position: relative; max-width: 1200px; height: auto; margin: 0 0 40px 0; padding: 80px 0 0 0; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } #services .slider { display: block; margin: 0; width: 2000%; height: auto; padding: 0; margin: 0; list-style-type: none; transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; overflow: hidden; } #services .slider li { position: relative; float: left; display: block; max-width: 1200px; width: 5%; pargin: 0; padding: 0; overflow: hidden; } #services .slider p { position: absolute; bottom: 0px; left: 0px; width: 80%; padding: 20px 10% 20px 10%; margin: 0; color: #f0f5ff; font-size: 16px; line-height: 160%; background-color: rgba( 0, 0, 0, 0.5 ); opacity: 0; transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } #services .sliderframe:hover p { opacity: 1; } #services .slider img { display: block; width: 100%; height: auto; } #services .sliderframe span { position: absolute; top: 50%; display: block; width: 30px; height: 30px; margin: -15px 0 0 0; background: url('../images/global.png') top left; background-repeat: no-repeat; background-color: rgba( 0, 0, 0, 0.5 ); cursor: pointer; opacity: 0; transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; border-radius: 5px; } #services .sliderframe .back { left: 20px; background-position: -5px -205px; } #services .sliderframe .back:hover { background-position: -45px -205px; } #services .sliderframe .next { right: 20px; background-position: -5px -245px; } #services .sliderframe .next:hover { background-position: -45px -245px; } #services .sliderframe:hover span { opacity: 1; } /* NEON TEMPLATE */ #neon { max-width: 1200px; height: auto; padding: 80px 0 0 0; margin: 0 auto 0 auto; overflow: auto; /*box-shadow: 0px 0px 8px 0 rgba( 0, 0, 0, 0.1 );*/ } #neon article { width: 100%; min-height: 300px; margin: 0 auto 0 auto; padding: 0 0 20px 0; background-color: #ffffff; } #neon article:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } #neon .sliderframe { position: relative; max-width: 1200px; height: auto; margin: 0 0 40px 0; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } #neon .slider { display: block; margin: 0; width: 2000%; height: auto; list-style-type: none; transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; overflow: hidden; } #neon .slider li { position: relative; float: left; display: block; max-width: 1200px; width: 5%; overflow: hidden; } #neon .slider p { position: absolute; bottom: 0px; left: 0px; width: 80%; padding: 20px 10% 20px 10%; margin: 0; color: #f0f5ff; font-size: 16px; line-height: 160%; background-color: rgba( 0, 0, 0, 0.5 ); opacity: 0; transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } #neon .sliderframe:hover p { opacity: 1; } #neon .slider img { display: block; width: 100%; height: auto; } #neon .sliderframe span { position: absolute; top: 50%; display: block; width: 30px; height: 30px; margin: -15px 0 0 0; background: url('../images/global.png') top left; background-repeat: no-repeat; background-color: rgba( 0, 0, 0, 0.5 ); cursor: pointer; opacity: 0; transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; border-radius: 5px; } #neon .sliderframe .back { left: 20px; background-position: -5px -205px; } #neon .sliderframe .back:hover { background-position: -45px -205px; } #neon .sliderframe .next { right: 20px; background-position: -5px -245px; } #neon .sliderframe .next:hover { background-position: -45px -245px; } #neon .sliderframe:hover span { opacity: 1; } #neon header { display: block; width: 80%; height: auto; padding: 40px 0 40px 0; margin: 0 auto 0 auto; background-color: transparent; overflow: hidden; text-transform: uppercase; } #neon header h1 { float: left; width: 80%; font-weight: bold; font-size: 18px; line-height: 150%; } #neon header h2 { float: left; width: 80%; font-weight: bold; font-size: 16px; line-height: 150%; } #neon header a { display: block; clear: both; color: #232323; font-size: 14px; text-transform: uppercase; } #neon header a:hover { color: #f04030; } #neon header span { float: right; width: 20%; padding: 0 0 0 0; color: #b0b7be; text-align: right; font-size: 16px; line-height: 150%; } #neon .preview { display: block; width: 80%; margin: 0px auto 0px auto; padding: 20px 0px 20px 0px; font-size: 16px; color: #70777f; line-height: 180%; text-align: justify; } #neon .hr { width: 100%; height: 1px; background-color: #e8e8e8; } #neon .frame { display: block; width: 100%; height: auto; /*margin: 0px auto 0px auto;*/ overflow: hidden; } #neon .frame img { display: block; width: 100%; height: auto; transition: all .25s ease-in-out; -webkit-transition:all .25s ease-in-out; } #neon .frame img:hover { transform: scale( 1.1, 1.1 ); -webkit-transform: scale( 1.1, 1.1 ); } #neon .rm { display: block; width: 80px; padding: 10px 12px 10px 12px; margin: 20px 0px 50px 10%; color: #ffffff; font-size: 16px; border-radius: 2px 2px 2px 2px; background-color: #20272e; line-height: 100%; } #neon .rm:hover { background-color: #f04030; } #neon pre { display: block; width: 70%; padding: 5% 5% 5% 5%; margin: 0px auto 0px auto; color: #555555; font-size: 16px; letter-spacing: normal; font-weight: 100; background-color: #e5e5e5; line-height: 180%; font-family: monospace, open-sans,arial,sans-serif; word-break: break-all; white-space: pre-wrap; word-wrap: break-word; } #neon .zebra { background-color: #f0f7ff; } #neon footer { margin: 0 0 0 0; padding: 20px 10% 20px 10%; border: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; background-color: #f0f0f0; overflow: auto; background: url( '../images/pagination-bg.png') top left; } #neon footer span , #neon footer a { float: left; width: auto; height: auto; padding: 7px 10px 7px 10px; margin: 0 10px 0 0; font-size: 14px; color: #ffffff; font-weight: bold; background-color: #303030; line-height: 100%; } #neon footer a:hover { background-color: #d04030; cursor: pointer; } #neon footer span { color: #808080; background-color: #000000; } #neon footer h4 { float: right; color: #ffffff; margin: 4px 0 0 0; font-weight: bold; font-size: 16px; } #neon .content { display: block; width: 80%; margin: 0 auto 0 auto; padding: 0 0 20px 0; font-size: 16px; color: #70777f; line-height: 180%; } #neon .content img { max-width: 100%; } #neon .content .imgla { float: left; margin: 0 20px 20px 0; } #neon .content .imgra { float: right; margin: 0 0 20px 20px; } #neon .content .imgca { display: block; max-width: 100%; margin: 0 auto 20px auto; clear: both; text-align: center; } #neon .content .imgf { display: block; width: 100%; height: auto; margin: 0 0 20px 0; clear: both; } #neon .content p { font-size: 16px; margin: 0 0 20px 0; } #neon .content pre { font-size: 16px; margin: 0 0 20px 0; font-family: monospace, open-sans,arial,sans-serif; word-break: break-all; white-space: pre-wrap; word-wrap: break-word; } #neon .content h1 { font-size: 24px; margin: 0 0 20px 0; } #neon .content h2 { font-size: 20px; margin: 0 0 20px 0; } #neon .content h3 { font-size: 16px; margin: 0 0 20px 0; } #neon .content h4 { font-size: 14px; margin: 0 0 20px 0; } #neon .content h5 { font-size: 12px; margin: 0 0 20px 0; } #neon .content h6 { font-size: 8px; margin: 0 0 20px 0; } #neon .content blockquote { margin: 10px 0 20px 50px; padding: 0 0 0 15px; font-size: 16px; border-left: 3px solid #cccccc; } #neon .content ul { margin: 0 0 1em 0; padding: 0 0 0 1em; } #neon .content ul li { margin: 0 0 1em 0; } #neon .content ol li { margin: 0 0 1em 0; } #neon .content ol { margin: 0 0 1em 0; padding: 0 0 0 1em; } #neon .content hr { clear: both; width: 100%; height: 1px; color: #cccccc; border: 0; background-color: #cccccc; } #neon .content a { color: #0094cd; } #neon .content a:hover { color: #f04030; } #neon .gallery { width: 100%; height: auto; margin: 0 0 0 0; } #neon .gallery .half { float: left; width: 50%; height: auto; margin: 0; } #neon .gallery .full { float: left; width: 100%; height: auto; margin: 0; } #neon .share { width: 80%; height: 50px; margin: 0 auto 20px auto; overflow: visible; list-style-type: none; } #neon .share li { position: relative; float: left; width: 42px; height: 36px; } #neon .share a { position: absolute; top: 4px; left: 0px; display: block; width: 30px; height: 30px; background: url('../images/global.png') top left; background-repeat: no-repeat; background-color: #b2ada1; transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } #neon .share li:hover a { top: 0px; left: -4px; box-shadow: 4px 4px 0px 0 rgba( 0, 0, 0, 0.4 ); } #neon .share .tw { background-position: -45px -125px; } #neon .share .fb { background-position: -85px -125px; } #neon .share .gp { background-position: -125px -125px; } #neon .share .in { background-position: -205px -125px; } #neon .share .pt { background-position: -120px -125px; } #neon .share .tw:hover { background-color: #45b0e3; } #neon .share .fb:hover { background-color: #39599f; } #neon .share .gp:hover { background-color: #d83d2d; } #neon .share .in:hover { background-color: #0084d7; } #neon .share .pt:hover { background-color: #cb2026; } #neon .ad { width: 300px; height: 250px; margin: 0 auto 20px auto; } #neon .comments { display: block; width: 80%; margin: 0px auto 0px auto; padding: 10px 0 20px 0; } /* TECHNOLOGY TEMPLATE */ #technology { position: relative; min-height: 100px; height: auto; padding: 0 0 20px 0; font-size: 16px; color: #4f4f4f; line-height: 150%; overflow: hidden; } #technology h1 { position: relative; height: auto; margin: 0 0 0 0; padding: 0 0 20px 0; color: #454545; font-size: 20px; line-height: 20px; font-weight: bold; text-transform: uppercase; overflow: hidden; vertical-align: middle; text-align: center; } /*#technology h1:after { position: absolute; content: ""; height: 2px; top: 10px; width: 100%; margin: 0 0 0 20px; background-color: #e0e0e0; }*/ #technology h2 { position: relative; height: auto; margin: 0 0 0 0; padding: 0 0 20px 0; color: #454545; font-size: 20px; line-height: 20px; font-weight: bold; text-transform: uppercase; overflow: hidden; vertical-align: middle; } /*#technology h2:after { position: absolute; content: ""; height: 2px; top: 10px; width: 100%; margin: 0 0 0 20px; background-color: #e0e0e0; }*/ #technology p { margin: 0 0 1em 0; text-align: justify; } #technology br { clear: both; } #technology article { } #technology section {} #technology ul { margin: 0 0 1em 0; padding: 0 0 0 1em; } #technology ul li { margin: 0 0 1em 0; padding: 0 0 0 1em; } #technology a { color: #11a6bb; } #technology a:hover { color: #fe5c57; } /* REALISATION TEMPLATE */ #realization { position: relative; min-height: 100px; height: auto; padding: 0 0 20px 0; font-size: 16px; color: #4f4f4f; line-height: 150%; overflow: hidden; } #realization h1 { position: relative; height: auto; margin: 0 0 0 0; padding: 0 0 20px 0; color: #454545; font-size: 20px; line-height: 20px; font-weight: bold; text-transform: uppercase; overflow: hidden; vertical-align: middle; text-align: center; } /*#realization h1:after { position: absolute; content: ""; height: 2px; top: 10px; width: 100%; margin: 0 0 0 20px; background-color: #e0e0e0; }*/ #realization h2 { position: relative; height: auto; margin: 0 0 0 0; padding: 0 0 20px 0; color: #454545; font-size: 20px; line-height: 20px; font-weight: bold; text-transform: uppercase; overflow: hidden; vertical-align: middle; } /*#realization h2:after { position: absolute; content: ""; height: 2px; top: 10px; width: 100%; margin: 0 0 0 20px; background-color: #e0e0e0; }*/ #realization p { margin: 0 0 1em 0; text-align: justify; } #realization br { clear: both; } #realization article { } #realization section {} #realization ul { margin: 0 0 1em 0; padding: 0 0 0 1em; } #realization ul li { margin: 0 0 1em 0; padding: 0 0 0 1em; } #realization a { color: #11a6bb; } #realization a:hover { color: #fe5c57; }