@font-face {
	font-family: CalibriRegular;
	src: url('fonts/CalibriRegular.ttf');
}

@font-face {
	font-family: CalibriBold;
	font-weight: bold;
	src: url('fonts/CalibriBold.ttf');
}

@font-face {
	font-family: CalibriItalic;
	font-style: italic;
	src: url('fonts/CalibriItalic.ttf');
}

@font-face {
	font-family: CalibriBoldItalic;
    font-weight: bold;
	font-style: italic;
	src: url('fonts/CalibriBoldItalic.ttf');
}

html {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
}

body {
    -webkit-transform: translate3d(0, 0, 0);
    margin: 0;
    padding: 0;
    /*width: 100%;
    height: 100%;  */
    width: 1280px;
    height: 800px;
    font-family: CalibriRegular, Arial, Helvetica, sans-serif;
    background-color: #000000;
    color: #FFFFFF;
    overflow: hidden;
    background-image: url("images/bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

#container {
    -webkit-transform: translate3d(0, 0, 0);
    width: 100%;
    height: 100%;
    overflow: hidden;
}

header {
    width: 100%;
    height: 20%;
}

#kiwilogo {
    float: left;
    width: 25%;
    height: 100%;
    margin-left: 5%;
    background-image: url("images/kiwilogo.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 40%;
}

#heading {
    float: right;
    width: 70%;
    height: 100%;
    font-size: 52pt;
    line-height: 160px;
    text-align: center;
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}

.opaque {
    opacity: 1 !important;
}

#content {
    width: 100%;
    height: 60%;
}

.main {
    -webkit-transform: translate3d(0, 0, 0);
    width: 400px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 20;
    margin-top: 30px;
}

.tile {
    float: left;
    margin: 10px;
    width: 180px;
    height: 180px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background:#1c822a;
    background: url('images/box-line.png'), linear-gradient(bottom, rgb(0,102,14) 0%, rgb(59,161,72) 100%);
    background: url('images/box-line.png'), -moz-linear-gradient(bottom, rgb(0,102,14) 0%, rgb(59,161,72) 100%);
    background: url('images/box-line.png'), -webkit-linear-gradient(bottom, rgb(0,102,14) 0%, rgb(59,161,72) 100%);
    background: url('images/box-line.png'), -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(0,102,14)),
        color-stop(1, rgb(59,161,72))
    );
    text-align: center;
    font-family: CalibriBold, Arial, Helvetica, sans-serif;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: center 55%, center center;
    background-size: 80% 2px, 100% 100%;
}

.tile .icon {
    background-image: url("images/icon-about.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 60%;
    height: 55%;
}

.icon.whatwedo {
    background-image: url("images/icon-arrow.png");
}

.icon.references {
    background-image: url("images/icon-references.png");
}

.icon.interactive {
    background-image: url("images/icon-interactive.png");
}

.tile span {
    display: block;
    height: 45%;
    font-size: 18pt;
    margin-top: 10px;
}

span.singleline {
    margin-top: 0;
    line-height: 80px;
}

#about, #miniapps {
    -webkit-transform: translate3d(0, 0, 0);
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.hasborder {
    border: 2px solid #FFFFFF;
}

.about, .miniapps {
    -webkit-transform: translate3d(0, 0, 0);
    display: none;
    position: absolute;
    cursor: pointer;
}

#about1, #about3, #miniapp2, #miniapp4 {
    -webkit-transform: translate3d(0, 0, 0);
    z-index: 3;
}

#about2, #miniapp3 {
    -webkit-transform: translate3d(0, 0, 0);
    z-index: 4;
}

#about4, #miniapp1, #miniapp5 {
    -webkit-transform: translate3d(0, 0, 0);
    z-index: 2;
}

#miniapp0 {
    -webkit-transform: translate3d(0, 0, 0);
    z-index: 1;
}

.mainslide {
    -webkit-transform: translate3d(0, 0, 0);
    width: 100%;
    height: 80%;
    position: absolute;
    top: 20%;
    left: 100%;
    z-index: 100;
    margin: 0;
    padding: 0;
    display: none;
}

.bigtile {
    -webkit-transform: translate3d(0, 0, 0);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background:#1c822a;
    background: linear-gradient(bottom, rgb(0,102,14) 0%, rgb(59,161,72) 100%);
    background: -moz-linear-gradient(bottom, rgb(0,102,14) 0%, rgb(59,161,72) 100%);
    background: -webkit-linear-gradient(bottom, rgb(0,102,14) 0%, rgb(59,161,72) 100%);
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(0,102,14)),
        color-stop(1, rgb(59,161,72))
    );
    background-repeat: no-repeat;
    background-position: center center;
}

.bigtile.single {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 1000px;
    height: 560px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 10px;
}

.bigtile.single p {
    font-size: 25pt;
    text-align: justify;
}

.bigtile ul {
    -webkit-transform: translate3d(0, 0, 0);
    font-size: 26pt;
    line-height: 130%;
    margin: 0;
    padding: 10px 30px;
}

.bigtile.sliding li {
    -webkit-transform: translate3d(0, 0, 0);
    margin-bottom: 30px;
    font-size: 30pt;
}

strong {
    font-weight: 900;
}

#slider-nav, #slider-nav2, #slider-nav3 {
    height: 40px;
    margin: 20px auto 0;
}

#slider-nav {
    width: 480px;
}

#slider-nav2 {
    width: 120px;
}

#slider-nav3 {
    width: 80px;
}

.touchslider-prev, .touchslider-next, .touchslider2-prev, .touchslider2-next, .touchslider3-prev, .touchslider3-next {
    display: none;
}

#slider-nav div, #slider-nav2 div, #slider-nav3 div {
    float: left;
    width: 40px;
    height: 40px;
}

#slider-nav span, #slider-nav2 span, #slider-nav3 span {
    display: none;
}

.touchslider-point, .touchslider2-point, .touchslider3-point {
    background-image: url("images/point.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 75% 75%;
}

.touchslider-point-current, .touchslider2-point-current, .touchslider3-point-current {
    background-image: url("images/point-current.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 75% 75%;
}

.touchslider, .touchslider2, .touchslider3 {
    -webkit-transform: translate3d(0, 0, 0);
    width: 1280px;
    height: 620px;
}

.touchslider-viewport, .touchslider2-viewport, .touchslider3-viewport {
    -webkit-transform: translate3d(0, 0, 0);
    width: 1280px;
    height: 560px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.touchslider-item, .touchslider2-item, .touchslider3-item {
    width: 1280px;
    height: 560px;
    margin-left: auto;
    margin-right: auto;
}

.bigtile.sliding {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 1000px;
    height: 560px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 10px;
}

.refheading {
    width: 100%;
    height: 10%;
    text-align: center;
    font-size: 32pt;
    font-weight: bold;
}

.refheading.bigger {
    font-size: 36pt;
}

.ref {
    -webkit-transform: translate3d(0, 0, 0);
    width: 25%;
    height: 45%;
    margin: 0;
    padding: 0;
    float: left;
    text-align: center;
}

.ref img {
    -webkit-transform: translate3d(0, 0, 0);
    width: 70%;
    margin-top: 20px;
}

.ref span {
    -webkit-transform: translate3d(0, 0, 0);
    display: block;
    font-family: CalibriBold, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16pt;
}

.bigref {
    -webkit-transform: translate3d(0, 0, 0);
    text-align: center;
}

.bigref img {
    -webkit-transform: translate3d(0, 0, 0);
    height: 440px;
    margin-top: 20px;
}

#charact, #whatwedo, #references, #pros, #difference {
    -webkit-transform: translate3d(0, 0, 0);
}