/* --------------------------------------------------------------------------------- Master Stylesheet Author: Pixel House Website: www.pixel-house.com.au --------------------------------------------------------------------------------- */ body { background: #fff; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; margin: 0; padding: 0; font-size: 14px; } p, li, table { font-weight: 300; font-size: 14px; line-height: 1.6em; color: #555; } p, ul, ol { margin: 0 0 1.4em 0; } ul, ol { padding: 0 0 0 30px; } li { padding-left: 15px; margin: 0; } p.sm { font-size: 0.8em; line-height: 1.4em; } a { color: #c82835; } a img { border: none; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.6em 0; color: #000; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none!important; border-bottom: solid 1px #eabcc0; } h1 { font-size: 2.4em; font-weight: 300; margin: 0 0 30px 0; letter-spacing: -0.01em; } h1 span { font-weight: 300; } h2 { font-size: 1.8em; font-weight: 300; } h2 span { font-weight: bold; color: #093e7a; } h3 { font-size: 1.1em; text-transform: uppercase; font-weight: bold; } h3 span { font-weight: normal; } h3 a:hover { text-decoration: underline; } h4 { font-size: 1.0em; } h5 { text-transform: uppercase; } blockquote { font-style: italic; margin: 0 0 30px 0; padding: 0; } table { width: 100%; border-collapse: collapse; margin: 0 0 30px 0; } table th { background: #ededed; color: #000; text-transform: uppercase; } table td { vertical-align: top; } table th, table td { text-align: left; border: solid 1px #ccc; padding: 8px 10px; } .black { color: #000; } .orange { color: #e16e00; } .green { color: #549d27; } .grey { color: #555555; } .bold { font-weight: bold; } .no-margin { margin: 0 0 2px 0!important; } .hide { display: none; } .img-right { float: right; margin-left: 35px; } .img-round { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .img-50 { width: 50%; height: auto; } .img-40 { width: 40%; height: auto; } .img-30 { width: 30%; height: auto; } .img-20 { width: 20%; height: auto; } .left { float: left; } .right { float: right; } .right.img { margin-left: 20px; } #heading-wrap, #content-wrap, #benefits-wrap, #speakers-wrap, #footer-wrap, #clients-wrap, #enquiry-wrap, #faq-wrap, #testimonials-wrap { float: left; width: 84%; padding: 70px 8%; text-align: center; } #header, #heading, #feature, #feature-services, #content, #mid, #clients, #footer { width: 100%; margin: 0 auto; position: relative; } #logo *, #nav *, #accordion h3 { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } /* --------------------------------------------------------------------------------- HEADER --------------------------------------------------------------------------------- */ #header-wrap { float: left; width: 100%; padding: 30px 0; } #logo { float: left; margin: 0 10px 0 30px; } #logo img { float: left; width: 260px; height: auto; } .header-right { float: right; padding: 0 30px 0 0; } .header-right .slogan { float: left; font-size: 20px; padding: 4px 0 0 0; color: #707070; } .header-right .btn { float: right; margin: 0 0 0 20px; } .btn-wrap { float: left; width: 100%; } .btn { background: #093e7a; color: #fff; font-size: 16px; font-weight: bold; padding: 8px 20px; text-transform: uppercase; text-decoration: none; -moz-border-radius: 5px; border-radius: 5px; } .btn:hover { background-color: #1c8109; } #nav-wrap { float: left; width: 100%; } #nav-wrap ul { float: left; width: 100%; margin: 0; padding: 20px 0 0 0; } #nav-wrap ul li { float: left; width: 80%; padding: 10px 10%; border-top: solid 1px #ccc; } /* --------------------------------------------------------------------------------- FEATURE WRAP --------------------------------------------------------------------------------- */ #feature-wrap { float: left; width: 80%; text-align: center; padding: 120px 10%; background: url(../images/bg-feature.jpg) no-repeat center center #476d95; background-size: 100% auto; } #feature h1 { color: #fff; } #feature p { font-size: 20px; color: #fff; } #feature ul { margin: 0; padding: 0; } #feature ul li { display: inline; font-size: 17px; padding: 0 20px; color: #fff; font-weight: bold; white-space: nowrap; line-height: 40px; } #feature ul li span { background: url(../images/icon-cross.png) no-repeat 0 center; background-size: 13px auto; padding-left: 20px; } #feature .location { float: left; width: 100%; border-top: dotted 2px #fff; padding: 20px 0 0 0; margin-top: 20px; text-transform: uppercase; } #feature .location span { font-weight: bold; padding-left: 20px; } #feature .btn { background: #fff; color: #093e7a; font-size: 16px; font-weight: bold; padding: 8px 20px; text-transform: uppercase; text-decoration: none; -moz-border-radius: 5px; border-radius: 5px; } #feature .btn:hover { background-color: #1c8109; color: #fff; } /* --------------------------------------------------------------------------------- CALLOUT WRAP --------------------------------------------------------------------------------- */ #callout-wrap { float: left; width: 90%; padding: 15px 5%; background: #148200; } #callout { width: 100%; max-width: 550px; margin: 0 auto; } #callout-wrap p { float: left; color: #fff; font-size: 17px; margin: 0; } #callout-wrap .callout-btn { float: right; padding-top: 3px; } #callout-wrap .btn { border: solid 2px #fff; background: none; } /* --------------------------------------------------------------------------------- BENEFITS --------------------------------------------------------------------------------- */ #benefits-wrap { text-align: center; } #benefits h2 { width: 670px; margin: 0 auto; } #benefits ul { float: left; width: 100%; padding: 40px 0 0 0; margin: 0; } #benefits ul li { float: left; width: 17%; padding: 50px 1.5% 0 1.5%; margin: 0 0 20px 0; list-style-type: none; background: url(../images/icon-tick.png) no-repeat center 0; background-size: 40px auto; } #benefits h3 { color: #1c8109; } #benefits blockquote { float: left; width: 80%; padding: 20px 10%; color: #888888; font-style: normal; font-size: 17px; line-height: 25px; border: dashed 2px #cacaca; margin: 0; } #benefits blockquote strong { font-weight: bold; font-style: italic; } /* --------------------------------------------------------------------------------- AUDIENCE --------------------------------------------------------------------------------- */ #audience-wrap { float: left; width: 100%; background: url(../images/man-computer.jpg) no-repeat right center #093e7a; background-size: 50% auto; } #audience h2 { color: #fff; } #audience p { font-size: 17px; line-height: 25px; color: #fff; margin: 0; } #audience .left { float: left; width: 40%; padding: 50px 5%; background: url(../images/bg-gradient.png) repeat-y 0 0; background-size: 100% auto; } /* --------------------------------------------------------------------------------- COURSE DAYS --------------------------------------------------------------------------------- */ #course-days-wrap { float: left; width: 80%; padding: 70px 10%; text-align: center; } #course-days h2 { margin: 0 0 40px 0; } .day { float: left; width: 30%; margin: 0 1.5% 20px 1.5%; background: #e5e5e5; min-height: 430px; } .day .top { float: left; width: 80%; padding: 20px 10%; background: #093e7a; } .day .btm { float: left; width: 80%; padding: 20px 10%; text-align: left; } .day h3 { color: #fff; margin: 0; } .day .day-num { color: #fff; font-size: 25px;} .day p { margin: 0; } #course-days .btn-wrap { padding-top: 30px; } /* --------------------------------------------------------------------------------- SPEAKERS --------------------------------------------------------------------------------- */ #speakers-wrap { background: #dbdada; } #speakers-wrap h2, #speakers-wrap h3 { color: #093e7a; } #speakers-wrap .intro { font-size: 17px; line-height: 25px; margin: 0 auto 50px auto; max-width: 500px; } #speakers .speaker { float: left; /* width: 50%; */ width: 100%; max-width: 700px; text-align: left; } #speakers .speaker .thumb { float: left; width: 35%; } #speakers .speaker .thumb img { width: 100%; height: auto; -moz-border-radius: 50%; border-radius: 50%; } #speakers .speaker .text { float: right; width: 60%; } #speakers .speaker:first-child .text { width: 50%; padding-right: 10%; } /* --------------------------------------------------------------------------------- CLIENTS --------------------------------------------------------------------------------- */ #clients-wrap { background: url(../images/bg-clients.jpg) no-repeat center center #295587; background-size: 100% auto; } #clients h2 { color: #fff; } #clients p { color: #fff; font-size: 17px; line-height: 25px; } #clients ul { float: left; width: 86%; padding: 0 7%; margin: 0; } #clients ul li { float: left; width: 25%; padding: 0; margin: 0; color: #fff; list-style-type: none; font-size: 22px; font-weight: bold; text-transform: uppercase; } /* --------------------------------------------------------------------------------- FAQ --------------------------------------------------------------------------------- */ #faq-wrap h2 { margin: 0 0 30px 0; } #accordion { float: left; width: 100%; border: solid 2px #d4d4d4; -moz-border-radius: 5px; border-radius: 5px; text-align: left; margin: 0 0 15px 0; } #accordion h3 { float: left; font-size: 17px; font-weight: 300; text-transform: none; cursor: pointer; cursor: hand; width: 88%; padding: 15px 6%; border-top: solid 2px #ccc; margin: 0; background: url(../images/icon-expand.png) no-repeat 3% center; background-size: 12px auto; } #accordion div { float: left; width: 90%; padding: 10px 5%; } #accordion .ui-accordion-header-active { background: url(../images/icon-contract.png) no-repeat 3% center #fff; background-size: 12px auto; } #accordion h3, #accordion h3:hover, #accordion h3:active, #accordion h3:focus, #accordion div { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: 0; } #accordion h3:first-child { border: none; } #accordion h3:hover { background-color: #efefef; } #accordion .ui-accordion-header-active:hover { background-color: #fff!important; } .videoWrapper { text-align: center; } /* --------------------------------------------------------------------------------- ENQUIRY FORM --------------------------------------------------------------------------------- */ #enquiry-wrap { background: url(../images/bg-gradient2.png) repeat-y center 0 #0b315b; background-size: 100% auto; } #enquiry-wrap-inner { float: left; width: 100%; background: url(../images/bg-section-one-grid.png) repeat 0 0; } #enquiry { margin: 0 auto; width: 700px; } #enquiry h2 { color: #fff; margin: 0 0 30px 0; font-weight: bold; text-align: center; } #enquiry h3 { color: #fff; margin: 0 0 50px 0; text-align: center; } #enquiry .intro { font-size: 17px; line-height: 25px; color: #fff; text-align: center; } #contact-form { float: left; width: 100%; padding: 0 0 10px 0; } #contact-form fieldset { border: none; margin: 0; padding: 0; text-align: left; } #contact-form fieldset div { position: relative; float: left; width: 100%; margin: 0; } #contact-form fieldset input[type="text"], #contact-form fieldset input[type="password"], fieldset textarea { float: left; width: 90%; border: solid 2px #fff; padding: 12px 12px; -moz-border-radius: 4px; border-radius: 4px; font-size: 15px; color: #7b7b7b; background: #fff; } #contact-form fieldset input[type="text"]:focus, fieldset textarea:focus { border: solid 2px #ec8700; } #contact-form fieldset label { position: absolute; top: 15px; left: 14px; font-size: 15px; color: #7b7b7b; cursor: text; font-style: italic; } #contact-form fieldset label .req { font-size: 0.75em; color: #b60404; } #contact-form fieldset .sm { font-size: 11px; color: #7b7b7b; } #contact-form fieldset .btn.sm { color: #fff; } #contact-form fieldset { float: left; width: 100%; } #contact-form fieldset p { position: relative; float: left; width: 100%; margin: 0 0 15px 0; line-height: 1.0em; } #contact-form fieldset textarea { width: 90%; height: 202px; font-family: 'Open Sans', sans-serif; } #contact-form fieldset .smtxt { font-size: 0.7em; line-height: 1.3em; text-align: left; color: #fff; padding-top: 5px; } #contact-form .fieldset-left { float: left; width: 49%; } #contact-form .fieldset-right { float: right; width: 49%; } #error { float: left; width: 90%; color: #fff; background: #d40000; font-size: 0.85em; padding: 10px 5%; } #contact-form #success { float: left; width: 80%; padding: 30px 10%; background: #449624; } #contact-form .sm { font-size: 1.0em; } #contact-form .submit-wrap { float: left; width: 100%; text-align: center; padding-top: 20px; } /* --------------------------------------------------------------------------------- TESTIMONIALS --------------------------------------------------------------------------------- */ #testimonials-wrap { border-bottom: solid 1px #ccc; } #testimonials .testimonial { float: left; width: 29%; padding: 10px 2%; } #testimonials .person { float: left; width: 100%; font-size: 17px; font-weight: bold; text-transform: uppercase; } #testimonials .position { float: left; width: 100%; text-transform: uppercase; } #testimonials blockquote { font-size: 17px; line-height: 25px; margin: 0 0 20px 0; } #testimonials .thumb { float: left; width: 100%; padding: 0 0 15px 0; } #testimonials .thumb img { -moz-border-radius: 50%; border-radius: 50%; width: 140px; height: auto; } #testimonials .stars { float: left; width: 100%; padding: 0 0 15px 0; } #testimonials .stars img { width: 130px; height: auto; } /* --------------------------------------------------------------------------------- FOOTER --------------------------------------------------------------------------------- */ #footer-wrap { padding-top: 50px; padding-bottom: 60px; } #footer p { margin: 0; color: #666; } #footer p a { text-decoration: none; color: #666; font-weight: bold; } #footer .thumbs { float: left; width: 100%; margin: 0 0 20px 0; padding: 0; } #footer .thumbs li { display: inline; padding: 0 20px; } #footer .thumbs li img { height: 50px; width: auto; }