html { margin: 0; height: 100%; }
body { margin: 0; height: 100%; overflow-x: hidden; }
/***** RESET ******/
img, form, a,
header, nav, article, section, dialog, figure, aside, footer { border: 0; margin: 0; outline: 0; padding: 0; }
/***** RESET END ******/

.show { display: none !important; }
.hidden { display: block !important; }
a#pull { display: none; }
nav#menu { display: none; }

/*h1 { font: 300 50px/56px 'Roboto', sans-serif; color: #999; margin-top: 0px; margin-bottom: 30px; display:block; text-align:center; }*/

h1 { font: 400 42px/52px 'Roboto Condensed', sans-serif; color: #111; width: 100%; margin: 0 0 30px 0; padding: 0 0 20px 0; position: relative; text-align: center; text-transform: uppercase; }
    h1:before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; width: 100px; border-bottom: 3px solid #ff8d00; margin: 0 auto; }

h2 { font: 400 28px/38px 'Roboto Condensed', sans-serif; color: #666; margin-top: 0px; display: block; width: 80%; margin: 0 auto 50px auto; }
h3 { font: 400 24px/34px 'Roboto Condensed', sans-serif; color: #111; margin-top: 0px; margin-bottom: 30px; }

/* Main Styles */
td, body, p, li { font: 400 16px/24px 'Roboto', sans-serif; color: #444; }
p { margin: 0 0 1.5em 0; }


/* Links */
a { color: #ff8d00; text-decoration: none; font-weight: 700; -webkit-transition: color 0.4s ease-in; -o-transition: color 0.4s ease-in; outline: 0; }
    a:hover { color: #8D3400; text-decoration: none; font-weight: 700; }

.orange { color: #ff8d00; }
.white p, .white li, .white td, .white h1, .white h2, .white h3, .white a { color: #fff; }

/******************** DIVIDER BOTTOM ******/

.custom-shape-divider-bottom-1 { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); }
.custom-shape-divider-bottom-1 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 40px; }
.custom-shape-divider-bottom-1 .shape-fill { fill: #111111;}

.custom-shape-divider-bottom-2 { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); }
.custom-shape-divider-bottom-2 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 40px; }
.custom-shape-divider-bottom-2 .shape-fill { fill: #ff8d00;}

.custom-shape-divider-bottom-3 { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); }
.custom-shape-divider-bottom-3 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 40px; transform: rotateY(180deg); }
.custom-shape-divider-bottom-3 .shape-fill { fill: #111111;}

.custom-shape-divider-bottom-4 { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); }
.custom-shape-divider-bottom-4 svg { position: relative; display: block; width: calc(100% + 1.3px); height: 40px; transform: rotateY(180deg); }
.custom-shape-divider-bottom-4 .shape-fill { fill: #ffffff;}

/******************** DIVIDER TOP ******/

.custom-shape-divider-top-1 { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; }
.custom-shape-divider-top-1 svg {nposition: relative; display: block; width: calc(100% + 1.3px); height: 40px; transform: rotateY(180deg); }
.custom-shape-divider-top-1 .shape-fill { fill: #FFFFFF; }

/******************** STRUCTURE ******/

#bodyClass { }

#toplogo { text-align: center; color: #fff; font-size: 16.5px; font-family: 'Roboto Condensed', sans-serif; display: inline-block; margin: 0 auto 0 auto; }
    #toplogo a { color: #111; }
    #toplogo .kelly { font-weight: 300; font-size: 50px; line-height: 55px; }
    #toplogo .hawker { font-weight: 700; font-size: 50px; line-height: 55px; }
    #toplogo .designer { font-weight: 300; font-size: 16.5px; color: #666; }
    #toplogo .developer { font-weight: 700; font-size: 16.5px; color: #666; }

    header .headInner { display: table-cell; text-align: center; vertical-align: middle; position: relative; background: rgba(0, 0, 0, 0.3); }

#logo { text-align: center; color: #fff; font-size: 40px; font-family: 'Roboto Condensed', sans-serif; display: inline-block; margin: 0 auto 50px auto; }
    #logo a { color: #fff; }
    #logo .kelly { font-weight: 300; font-size: 120px; line-height: 150px; }
    #logo .hawker { font-weight: 700; font-size: 120px; line-height: 150px; }
    #logo .designer { font-weight: 300; font-size: 40px; filter: alpha(opacity=50); opacity: 0.7; }
    #logo .developer { font-weight: 700; font-size: 40px; filter: alpha(opacity=50); opacity: 0.7; }

.iconStrip { position: absolute; bottom: 80px; width: 100%; z-index: 20; cursor: pointer; }
    .iconStrip a { width: 20%; float: left; text-align: center; color: #fff; font-weight: 400; font-size: 22px; font-family: 'Roboto Condensed', sans-serif; }
        .iconStrip a:hover { font-weight: 400; }
        .iconStrip a i { display: block; margin-bottom: 15px; font-size: 35px; line-height: 70px; color: #fff; }
    .iconStrip .iconBdr { width: 70px; height: 70px; background: rgba(255, 255, 255, 0.1); display: block; margin: 0 auto 15px auto; text-align: center; border-radius: 50%; }

.hvr-radial-out:before { background: #ff8d00 !important; }

.menuStrip { display: none; position: fixed; z-index: 99; top: 0; width: 100%; background: #fff; padding: 20px 0; }

.scrollDown { font-size: 33px; color: #fff; cursor: pointer; }
    .scrollDown:hover { color: #ff8d00; }

#mainNav { margin-top: 1%; }
    #mainNav a { width: 16%; float: right; text-align: center; color: #111; font-family: 'Roboto Condensed', sans-serif; font-size: 18px; font-weight: 400; cursor: pointer; }
    #mainNav i { display: block; margin-bottom: 12px; font-size: 30px; color: #ff8d00; }

nav { height: auto; }
    /* STOPS NAV HEIGHT FROM JUMPING ON LOAD */
    nav img { width: auto !important; display: inline-block; }
/* KEEPS IMAGES IN NAV FROM SPANNING 100% */

section img, section td img { width: auto; display: inline-block; }
/* KEEPS IMAGES IN CONTENT FROM SPANNING 100% */

article { padding: 120px 40px 160px 40px; }

section { position: relative; }

    section#secone { text-align: center; }
        section#secone i { font-size: 50px; margin-bottom: 25px; color: #999; }

    section#sectwo { background: #111; text-align: center; }
        section#sectwo .icon { font-size: 60px; color: #999; color: #ff8d00; }
        section#sectwo .desc { padding: 30px 0; color: #fff; }

    section#secthree { text-align: center; }
        section#secthree .eaWork { width: 31%; float: left; margin: 1%; background: #fff; position:relative; }
            section#secthree .eaWork img { transition: all 0.5s ease; }
            section#secthree .eaWork:hover img { filter: alpha(opacity=20); opacity: 0.2; }
        section#secthree a.workOver { display: block; width: 100%; top: 35%; position: absolute; filter: alpha(opacity=0); opacity: 0; text-align: center; color: #000; font-size: 22px; font-weight: 400; font-family: 'Roboto Condensed', sans-serif; transition: all 1s ease; }
        section#secthree .eaWork:hover a.workOver { filter: alpha(opacity=1); opacity: 1; }
        section#secthree a.workOver i { font-size: 40px; display: block; color: #ff8d00; margin-bottom: 15px; }

    section#secfour { background: #ff8d00; text-align: center; }
        section#secfour h1:before { border-bottom: 3px solid #111; }

        section#secfour .timeLineCon { text-align: left; }
        section#secfour .timeLine { position: relative; width: 25%; float: left; border-bottom: solid 5px #fff; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding-bottom: 20px; }
/*section#secfour .timeDate.sml h3 { margin-top: 20px; margin-bottom: 10px; }*/

.arrow-up { position: absolute; bottom: 0; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid white; }

footer#secfive { background: #111; text-align: center; padding: 120px 0 120px; }

.iconSlide { margin: 0; padding: 0; }
    .iconSlide li { padding: 12px; overflow: hidden; background: #ff8d00; text-align: center; list-style: none; white-space: nowrap; margin-right: 20px; display: inline-block; -moz-border-radius: 52px; -webkit-border-radius: 52px; border-radius: 52px; vertical-align: middle; }
        .iconSlide li a { opacity: 0; color: #fff; font-size: 30px; font-weight: 400; max-width: 0; display: inline-block; text-decoration: none; transition: max-width 1s ease-out .1s, opacity 1s ease-out .1s, color; }
            .iconSlide li a:hover { color: #fff; }
            .iconSlide li a span { padding: 0 12px; float: right; display: block; }
        .iconSlide li i { color: #fff; font-size: 40px; line-height: 80px; width: 80px; height: 80px; }
        .iconSlide li:hover a { opacity: 1; max-width: 250px; transition: max-width 1s ease-out .1s, opacity 1s ease-out .1s, color .2s; }

.secOuter { background: rgba(255, 255, 255, 0.1); }

.head.bgImage { height:900px; }
.bgImage { height: 700px; background-attachment: fixed; background-position: 50% 0; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; }
 
.parallax-background1 { background-image: url(files/images/graphics/hero_bg2.jpg); display: table; width: 100%; }
.parallax-background2 { background-image: url(files/images/graphics/bg-one.jpg); }
.parallax-background3 { background-image: url(files/images/graphics/bg-two.jpg); }
.parallax-background4 { background-image: url(files/images/graphics/bg-three.jpg); }
.parallax-background5 { background-image: url(files/images/graphics/bg-four.jpg); }
.parallax-background6 { background-image: url(files/images/graphics/bg-five.jpg); }
.parallax-background7 { background-image: url(files/images/graphics/bg-six.jpg); }

/******************** STRUCTURE END ******/

.scrollToTop { width: 40px; height: 40px; line-height: 40px; text-align: center; text-decoration: none; position: fixed; bottom: 40px; right: 40px; display: none; z-index: 999999; background: rgba(0, 0, 0, 0.2); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
    .scrollToTop i { font-size: 16px; color: #fff; line-height: 40px; }
    .scrollToTop:hover { text-decoration: none; color: #fff; background: rgba(0, 0, 0, 0.5); }

/******************** FORM STYLES ******/

input[type="text"], input[type="password"], textarea, select { border: solid 1px #ccc; padding: 5px 8px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
    input[type="text"]:hover, input[type="password"]:hover, textarea:hover, select:hover { background: #f3f3f3; }

input[type="submit"], button[type="button"] { border: 0; background: #666; padding: 8px 12px; color: #fff; text-transform: uppercase; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; -webkit-appearance: none; }

    input[type="submit"]:hover, button[type="button"]:hover { background: #333; }
/***** FORM STYLES END ******/


.LinkButtons, .linkbuttons { display: inline-block; *display: inline; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; padding: 8px 12px 8px 12px; background: #111; color: #fff; text-decoration: none; font-weight: bold; }

    .LinkButtons + *, .linkbuttons + * { clear: right; }

    .LinkButtons:hover, .linkbuttons:hover { background: #346876; cursor: pointer; text-decoration: none; color: #fff; }

    .LinkButtons a, .linkbuttons a { color: #fff; text-decoration: none; }
        .LinkButtons a:hover, .linkbuttons a:hover { color: #fff; text-decoration: none; }

/******************** EXTRAS ******/

.clearBoth { clear: both; height: 0px; }
/* CLEAR FIX */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/******************** RESPONSIVE STYLES ******/

.menu-link { display: none; }
/* HIDE MOBILE MENU BUTTON */

@media all and (max-width: 1440px) {
	.head.bgImage { height:800px; }
	.bgImage { height: 500px; }
}

@media all and (max-width: 1280px) {
    h1 { font: 300 40px/48px 'Roboto Condensed', sans-serif; }
    h2 { font: 400 24px/30px 'Roboto Condensed', sans-serif; width: 90%; }
    h3 { font: 400 20px/28px 'Roboto Condensed', sans-serif; }
    td, body, p, li { font: 400 16px/24px 'Roboto', sans-serif; }
}

@media all and (max-width: 1024px) {
    article { padding: 100px 30px 140px 30px; }
    section#secthree .eaWork { width: 31%; }
}

@media all and (max-width: 768px) {
	
	.head.bgImage { height:550px; }
	.bgImage { height: 350px; background-attachment:scroll; }

    /**** IMPORTANT CSS ****/
    .responsiveimage { width: 100% !important; display: block !important; height: auto !important; }
    img.responsiveimage[style] { margin-left: 0 !important; margin-right: 0 !important; }
    #SlideShowImg { width: 100% !important; display: block !important; height: auto !important; }
    /*section#content img, section#content td img { width:100% !important; display:block; }  IMAGES SPAN 100% FOR MOBILE */
    .hidden { display: none !important; }
    .show { display: block !important; }
    iframe[style] { width: 100% !important; margin: 0 !important; }
    iframe[width] { width: 100% !important; }

    .wow { visibility: visible !important; -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; }

    .scrollToTop { bottom: 20px; right: 20px; }

    .menuStrip { padding: 0; }

        /***** SITE CUSTOM CSS *****/
        .menuStrip .onepcssgrid-1500 { display: none !important; }
    .iconStrip a { float: none; display: inline-block; width: auto; font-size: 18px; margin: 10px; }

    header .headInner { vertical-align: top; }
    .scrollDown { display: none; }
    #logo { font-size: 20px; margin: 60px auto 0px auto; }
        #logo .kelly { font-size: 60px; line-height: 70px; }
        #logo .hawker { font-size: 60px; line-height: 70px; }
        #logo .designer { font-size: 18.5px; }
        #logo .developer { font-size: 18.5px; }
    article { padding: 60px 20px 80px 20px; }
    section#secthree .eaWork { width: 46%; float: left; margin:2%; border: 0; }
    section#secthree a.workOver { top: 25%; font-size: 16px; }
        section#secthree a.workOver i { font-size: 20px; margin-bottom: 5px; }
    section#secfour .timeLine { width: 50%; float: left; padding: 20px 0; }
        section#secfour .timeLine .timeDetails { margin-right: 30px; }


    /***** BLOG STYLES ******/
    div.Blog div.BlogPosts { margin: 0px !important; }
    div.Blog div.BlogRightMenu { position: relative !important; width: 100%; }

    /***** CHANGE TABLE STATE *****/
    table, thead, tbody, th, td, tr { display: block; }
        table[style] { width: 100% !important; height: auto !important; }
        table[align] { float: none !important; }
        table td { padding: 5px 0 !important; margin: 0 !important; }
            table td[style] { width: 100% !important; height: auto !important; }
        table tr[style] { width: 100% !important; height: auto !important; }
        table[cellpadding] { padding: 15px 0px !important; }
        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr { position: absolute; top: -9999px; left: -9999px; }
    tr { border: 0; }
    td { /* Behave  like a "row" */ border: none; position: relative; }

    /***** MOBILE NAV STYLES ******/
    .ddsmoothmenu { display: none !important; }
    nav#menu { display: block !important; height: auto; border-bottom: 0; }
        nav#menu ul { width: 100%; display: none; height: auto; padding: 0; margin: 0 auto; }
        nav#menu li { width: 100%; position: relative; display: inline; float: left; }
            nav#menu li a { background: #111; display: block; padding: 10px 0 10px 15px; border-bottom: solid 1px #222; font-weight: normal; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
        nav#menu a { text-align: left; width: 100%; color: #fff; display: block; text-decoration: none; padding: 8px 0; font-size: 18px; }
            nav#menu a i { margin-right: 10px; color: #ff8d00; }
            nav#menu a:hover, nav#menu a:active { background-color: #222; }
        nav#menu ul li ul li a { padding: 6px 0 6px 25px !important; background-color: #333; background-position: 15px center; }
        nav#menu ul li ul li ul li a { padding: 6px 0 6px 35px !important; background-color: #444; background-position: 25px center; }
        nav#menu ul li ul li ul li ul li a { padding: 6px 0 6px 45px !important; background-color: #555; background-position: 35px center; }
        nav#menu ul li ul li ul li ul li ul li a { padding: 6px 0 6px 55px !important; background-color: #666; background-position: 45px center; }
        nav#menu ul li ul li ul li ul li ul li ul li a { padding: 6px 0 6px 65px !important; background-color: #777; background-position: 55px center; }
    #pull { display: block !important; text-align: center; width: 100%; position: relative; content: ""; background: #ff8d00 url('files/images/graphics/nav-icon.png') no-repeat 12px center; height: 45px; line-height: 45px; color: #fff; text-decoration: none; }
        #pull.current { text-decoration: none; background: #ff8d00 url('files/images/graphics/nav-icon-close.png') no-repeat 12px center; }
    /*.mMenu { position:fixed; z-index:9999; width:100%; }*/
}

@media all and (max-width: 414px) {
    section#secthree .eaWork { width: 90%; float: left; margin:2% 5%; border: 0; }
}