* {
    padding:0;
    margin:0;
}

html, body {
    height:100%;
}

body {
    font-family: 'champagne__limousinesregular';
}

.header, .content {
    background:#fff;
    padding: 0em;

    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.content-full {
    height:100%;
}

/* Chameleon Works Pty Ltd*/

.logo-container {
    position: relative;

    background: url('../images/home_1_bg.jpg') 0 0 no-repeat;
    background-size: cover;
}
.logo {
    background: url('../images/home_logo_xl.png') 0 0 no-repeat;
    width: 291px;
    height: 395px;
}
.logo-container > .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.blur { position: relative; }
.blur > div:nth-child(1):before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
/*    border: 1px solid red;*/
    background-color: #fff;
    opacity: .6;
    position: absolute;
    top: 0px;
    left: 0px;
}

.hamburger {
    background: url('../images/hamburger_xl.png') 0 0 no-repeat;
    background-size: cover;
    width: 35px;
    height: 35px;
    display: inline-block;
}
.company_heading {
    font-family: 'champagne__limousinesregular';
}
.company_logo {
    background: url('../images/logo_xs.png') 0 0 no-repeat;
    background-size: cover;
    width: 60px;
    height: 60px;
    position: absolute;
    left: 25px;
    top: 10px;
}

.menu li a {
    font-family: 'champagne__limousinesbold';
    color: #1d618e;
}

.footer {
    background-color: #1d618e;
    border-top: 1px solid #367fbe;
}
.footer > .row { max-width: 100%; }
.footer p {
    margin: 10px;
    color: #fff;
    text-align: center;
}

.app .appstores {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
.appstores > li {
    display: inline-block;
    margin: 10px;
}
.appstores span {
    text-indent: -9999px;
    width: 140px;
    height: 50px;
    display: inline-block;
}
.appstores .ios { background: url('../images/appstore_ios.png') 0 0 no-repeat; }
.appstores .android { background: url('../images/appstore_android.png') 0 0 no-repeat; }

.zocial-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
.zocial-list > li {
    display: inline-block;
    margin: 10px;
}
.zocial-list span {
    text-indent: -9999px;
    width: 30px;
    height: 30px;
    display: inline-block;
    background: url('../images/zocial_icons_2.png') 0 0 no-repeat; }
}
.zocial-list .facebook { background-position: 0 0; }
.zocial-list .twitter { background-position: 0 -30px; }
.zocial-list .linkedin { background-position: 0 -61px; }
.zocial-list .rss { background-position: 0 -91px; }
.zocial-list .googlepplus { background-position: 0 -123px; }
.zocial-list .pinterest { background-position: 0 -153px; }
.zocial-list .instagram { background-position: 0 -184px; }
.zocial-list .mail { background-position: 0 -215px; }

.app {
    border-top: 1px solid #1d618e;
}
.app > .row {
    max-width: 100%;
    border-top: 1px solid #367fbe;
}
.app h4 {
    font-size: 400%;
    font-family: 'champagne__limousinesregular';
    margin: 15px 0;
}
.app p {
    font-size: 110%;
}
.app ul {
    font-size: 110%;
    margin: 10px 0;
    padding-left: 30px;
}
.app table {
    background-color: #fff;
    width: 100%;
    color: #23547e;
    border-radius: 5px;
}
.app table th,
.app table td {
    padding: 5px;
    width: 50%;
}
.app table th {
    background-color: #1d618e;
    color: #fefefe;
    font-family: 'champagne__limousinesbold';
    text-align: center;
}
.app table td {
    text-align: center;
    color: #1d618e;
}
.app table tr.has-border { border-bottom: 1px solid #eee; }
.app table td:nth-child(2) { border-left: 1px solid #eee; }
.app .sub-heading { font-size: 150%; }

/* Apps */
.courtlistingsaustralia {
    background: url('../images/bg_orange_toned_xl.jpg') 0 0 no-repeat;
    background-size: cover;
}
.app.courtlistingsaustralia h4,
.app.courtlistingsaustralia p,
.app.courtlistingsaustralia ul { color: #fefefe; }
.app.courtlistingsaustralia .sub-heading { color: #1d618e; }


/* Animations */
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Common */
.blue { color: #1d618e; }
.orange { color: #f37041; }

.heading {
    font-family: 'capsuularegular';
    color: #ffffff;
    text-shadow: 2px 2px 2px #000;
}
.heading .secondary { color: #f37041; }

.subheading {
    font-family: 'capsuularegular';
    color: #ffffff;
    text-shadow: 2px 2px 2px #000;
}

.button {
    font-family: 'capsuularegular';
    border: 1px solid rgba(255,255,255,0.19999999999999996);
    border-radius: 5px;
    padding: 20px;
    margin: 0 0.5em 0.5em 0;
    text-decoration: none;
    display: inline-block;

    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: -webkit-box-shadow 0.3s ease;
    transition: box-shadow 0.3s ease;
}
.button.clear {
    color: #fff;
    background-color: transparent;
}
a, a:link, a:active, a:visited {
    color: #fe5607;
    text-decoration: none;
}

        
/*
   1920-by-1080 
   2560-by-1440 
 */
/* Small */
@media only screen {
    body { border : 0px solid green; }

    .heading { font-size: 20px; }
    .subheading { font-size: 13px; }

    .logo {
        background-size: cover;
        width: 145px;
        height: 197px;

        animation-duration: 2s;
        animation-name: fadein;
    }

    .mobile-nav {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1;
        height: 50px;
        width: 100%;
        color: #1d618e;
        background-color: #f3f3f3;
        text-align: center;
        border-bottom: 2px solid #dedede;
    }
    .mobile-nav > span { line-height: 50px; }
    .mobile-nav .left {
        float: left;
        padding: 10px;
    }
    .mobile-nav .title {
        font-size: 140%;
    }

    .menu {
/*        display: none;*/

        position: fixed;
        left: 0;
        top: 0;
        z-index: 1;
        padding: 10px;
        height: 100%;

        transition: left 1.3s;
    }
    .menu ul {
        list-style: none;
        margin: 0px;
        padding: 10px;
        position: relative;
        z-index: 3;
    }
    .menu li { padding: 10px 15px; }
/*    .menu > ul:before {*/
    .menu:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: #1d618e;
        opacity: .9;
        position: absolute;
        z-index: 2;
        top: 0px;
        left: 0px;
        -webkit-box-shadow: 4px 2px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 4px 2px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 4px 2px 5px 0px rgba(0,0,0,0.75);
    }
    .menu li a { color: #fff; }
    .menu.closed {
        left: -169px;
    }

    .app > .row {
        padding-top: 30px;
    }

    .iphone6 {
        background: url('../images/cla1.png') 0 0 no-repeat;
    }
    .preview {
        height: 400px;
        width: 100%;
        background-position: 50% 15px;
        background-size: 190px;
    }

}
/* Medium */
@media only screen and (min-width: 40.0625em) {
    body { border : 0px solid blue; }

    .logo {
        width: 291px;
        height: 395px;
    }
    
    .menu {
        background-color: #f3f3f3;
        height: 80px;
        width: 100%;
        padding: 0px;
        position: fixed;
        z-index: 1;
        border-bottom: 2px solid #dedede;
    }
    .menu .company_heading {
        float: left;
        margin: 0px 25px;
        line-height: 88px;
    }
    .menu ul {
        float: right;
        padding: 0px;
    }
    .menu li {
        line-height: 80px;
        display: inline-block;
        padding: 0px 25px;
    }
    .menu li a { color: #1d618e; }
    .menu:before { display: none; }
    .menu.closed {
        left: 0px;
    }

    .app > .row {
        padding: 60px 30px 60px;
    }

    .preview {
        background-position: 50% 0px;
        background-size: 320px;
        background-color: transparent;
        height: 700px;
        width: 100%;
        border: none;
    }

}
/* Large */
@media only screen and (min-width: 64.0625em) {
    body { border : 0px solid yellow; }

    .preview {
        background-size: 320px;
/*        height: 500px;*/
        width: 100%;
    }

}
/* X-Large */
@media only screen and (min-width: 90.0625em) {
    body { border : 0px solid black; }

    .logo {
        width: 436px;
        height: 592px;
    }
}
/* XX-Large */
@media only screen and (min-width: 120.0625em) {
    body { border : 0px solid blue; }

}