/*
* css document
*
* ======================================
*
* 1. css reset (optional)
* 2. font-face (optional)
* 3. default html
* 4. wrapper & global
* 6. header section
* 7. content section
* 8. footer section
* 9. extended
*
*/

/* ============================================================================================================================= */
/* css reset */
/* adapted from Eric Meyer (meyerweb.com) and twitter bootstrap, with some edited-code :D */

html, body {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
cite,
code,
del,
dfn,
em,
img,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dd,
dl,
dt,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  line-height: 1;
  font-family: inherit;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ol, ul {
  list-style: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
}
html {
  overflow-y: scroll;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
a:hover, a:focus, a:active {
  outline: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
audio:not([controls]) {
  display: none;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}
button,
input,
select,
textarea {
  border: 0;
  outline: 0;
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}
button, input {
  line-height: normal;
  *overflow: visible;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}
input[type="search"] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
textarea {
	overflow: auto;
	resize: none;
	vertical-align: top;
}

/* ============================================================================================================================= */
/* font-face */
/* EFFRA */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 8, 2013 */

@font-face {
    font-family: 'effrabold';
    src: url('type/effra-bold-webfont.eot');
    src: url('type/effra-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/effra-bold-webfont.woff') format('woff'),
         url('type/effra-bold-webfont.ttf') format('truetype'),
         url('type/effra-bold-webfont.svg#effrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'effraitalic';
    src: url('type/effra-italic-webfont.eot');
    src: url('type/effra-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/effra-italic-webfont.woff') format('woff'),
         url('type/effra-italic-webfont.ttf') format('truetype'),
         url('type/effra-italic-webfont.svg#effraitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'effraregular';
    src: url('type/effra-regular-webfont.eot');
    src: url('type/effra-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/effra-regular-webfont.woff') format('woff'),
         url('type/effra-regular-webfont.ttf') format('truetype'),
         url('type/effra-regular-webfont.svg#effraregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'effrabold_italic';
    src: url('type/effra-bolditalic-webfont.eot');
    src: url('type/effra-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/effra-bolditalic-webfont.woff') format('woff'),
         url('type/effra-bolditalic-webfont.ttf') format('truetype'),
         url('type/effra-bolditalic-webfont.svg#effrabold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'effra_lightitalic';
    src: url('type/effralight-italic-webfont.eot');
    src: url('type/effralight-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/effralight-italic-webfont.woff') format('woff'),
         url('type/effralight-italic-webfont.ttf') format('truetype'),
         url('type/effralight-italic-webfont.svg#effra_lightitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'effra_lightregular';
    src: url('type/effralight-regular-webfont.eot');
    src: url('type/effralight-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/effralight-regular-webfont.woff') format('woff'),
         url('type/effralight-regular-webfont.ttf') format('truetype'),
         url('type/effralight-regular-webfont.svg#effra_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ============================================================================================================================= */
/* default html */
html, body {
 	background: #ffffff no-repeat top center scroll;
}
body {
 	color: #202020;
  	font-family: "effraregular", Arial, Helvetica, sans-serif;
  	font-size: 14px;
  	font-weight: normal;
  	line-height: 24px;
  	margin: 0;
  	min-height: 100px;
  	position: relative;
}
p {
	display: block;
	line-height: 24px;
	margin: 0 0 5px;
	padding: 0;
	text-align: left;
}
a {
	color: #1186ed;
	text-decoration: none;
}
a:hover {
	color: #1186ed;
	text-decoration: underline;
}
b {
	font-family: "effrabold";
}
i {
	font-family: "effraitalic";
}


/* ============================================================================================================================= */
/* box & wrapper section */
/* using 960 grid system */
#header {
	background: transparent url("images/blok-header.png") repeat-x scroll;
	height: 70px;
	z-index: 10;
}
#content {
	min-height: 300px;
	margin: 40px auto;
}
#footer {
	background: transparent url("images/blok-footer.png") repeat-x scroll;
	height: 120px;
}
.container,
.container-thumb {
  	margin: 0 auto;
  	min-height: 50px;
  	padding: 0;
  	position: relative;
  	width: 940px;
}
.container-thumb {width: 960px;}
.klir {
	clear: both;
	margin: 0;
	padding: 0;
}
.spacer {
	display: block;
	height: 40px;
}
.liner {
	height: 1px;
	background: #f58987;
	margin: 10px -10px 15px;
}

.container iframe {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	margin-bottom: 40px;
}

.lefthand {float: left !important;}
.righthand {float: right !important;}
.mauto {margin: 0 auto !important;}
.ml-20 {margin-left: 20px !important;}
.mr-20 {margin-right: 20px !important;}
.mb-20 {margin-bottom: 20px !important;}
.mt-20 {margin-top: 20px !important;}
.pl-20 {padding-left: 20px !important;}
.pr-20 {padding-right: 20px !important;}
.pb-20 {padding-bottom: 20px !important;}
.pt-20 {padding-top: 20px !important;}
.mr-big {margin-right: 100px !important;}

/* width */
.small {width: 180px !important;}
.medium {width: 240px !important;}
.long {width: 300px !important;}

.w-1 {width: 320px !important;}
.w-2 {width: 450px !important;}
.w-3 {width: 640px !important;}
.w-4 {width: 720px !important;}

/* ============================================================================================================================= */
/* header section */
/* logo */
#logo {
	float: left;
	height: 60px;
	width: 220px;
}
#logo h1 a {
	background: transparent url("images/sprata.png") no-repeat;
	background-position: left top;
	display: block;
	height: 60px;
	text-indent: -9999px;
	width: 220px;
	z-index: 10;
}

/* main menu - level 1 */
ul#mainmenu {
	float: right;
	list-style: none;
}
ul#mainmenu > li {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	position: relative;
}
ul#mainmenu > li > a,
ul#mainmenu > li:hover > a.with-drop,
ul#mainmenu > li > a:hover,
ul#mainmenu > li > a.klik {
	color: #ffffff;
	display: block;
	font-family: "effrabold";
	font-size: 12px;
	padding: 24px 15px;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
ul#mainmenu > li:hover > a.with-drop,
ul#mainmenu > li > a:hover,
ul#mainmenu > li > a.klik {
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);

	background: #1186ed;
	padding: 25px 15px 23px;
	text-decoration: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

/* main menu - level 2 */
ul#mainmenu li:hover ul.submenu {
	display: block;
}

ul#mainmenu li ul.submenu {
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

	background: #ffffff;
	display: none;
	left: 0;
	list-style: none;
	margin: 0;
	padding: 10px 0;
	position: absolute;
	top: 60px;
	width: 140px;
	z-index: 50;
}
ul#mainmenu li ul.submenu li {
	display: block;
}
ul#mainmenu li ul.submenu li a {
	color: #202020;
	display: block;
	font-family: "effrabold";
	font-size: 12px;
	padding: 10px;
}
ul#mainmenu li ul.submenu li a:hover {
	background: #1186ed;
	color: #ffffff;
	text-decoration: none;
}

/* ============================================================================================================================= */
/* content section */
#the-slider {
	display: block;
	height: 620px;
	margin-top: -10px;
	padding-top: 10px;
	overflow: hidden;
	width: 100%;
}

#slider-0,
#slider-1,
#slider-2,
#slider-3,
#slider-system,
#slider-dotmm,
#slider-doteam,
#slider-dotpm,
#slider-device,
#slider-dottm,
#slider-dotms,
#slider-mobile,
#slider-consulting,
#slider-about {
	display: block;
  	height: 640px;
  	margin-top: -10px;
  	width: 100%;
  	position: relative;
}
#slider-0,
#slider-system {
	background: transparent url("images/bg-system.jpg") no-repeat top center scroll;
}
#slider-dotmm {
	background: transparent url("images/bg-dotmm.jpg") no-repeat top center scroll;
}
#slider-doteam {
	background: transparent url("images/bg-doteam.jpg") no-repeat top center scroll;
}
#slider-dotpm {
	background: transparent url("images/bg-dotpm.jpg") no-repeat top center scroll;
}
#slider-1,
#slider-device {
	background: transparent url("images/bg-device.jpg") no-repeat top center scroll;
}
#slider-dottm {
	background: transparent url("images/bg-dottm.jpg") no-repeat top center scroll;
}
#slider-dotms {
	background: transparent url("images/bg-dotms.jpg") no-repeat top center scroll;
}
#slider-2,
#slider-mobile {
	background: transparent url("images/bg-mobile.jpg") no-repeat top center scroll;
}
#slider-3,
#slider-consulting {
	background: transparent url("images/bg-consulting.jpg") no-repeat top center scroll;
}
#slider-about {
	background: transparent url("images/bg-about.jpg") no-repeat top center scroll;
}

.thumb-home,
.thumb,
.breadcrumb {
	background: transparent url("images/blok-thumb.png") repeat scroll;
	display: block;
	height: 80px;
  	left: 0;
  	position: absolute;
  	top: 0;
	width: 100%;
	z-index: 21;
}
.thumb-home {
	top: 60px;
}
.thumb {
	height: 50px;
	top: 30px;
}

.breadcrumb {
	background: transparent url("images/blok-bread.png") repeat scroll;
	height: 30px;
}
.breadcrumb span {
	color: #ffffff;
	display: block;
	font-size: 12px;
	margin-top: 5px;
}

ul#thumbup {
	height: 80px;
	margin: 0 auto;
	width: 960px;
}
ul#thumbup li {
	float: left;
	margin: 0;
	height: 80px;
	width: 240px;
}
ul#thumbup li a {
	color: #ffffff;
	display: block;
	font-family: "effra_lightregular";
	font-size: 24px;
	height: 60px;
	overflow: hidden;
	padding: 10px;
	text-decoration: none;
	width: 220px;
}
ul#thumbup li a:hover,
ul#thumbup li a.thumbup-aktif {
	background: transparent url("images/blok-bread.png") repeat scroll;
	color: #1186ed;
	text-decoration: none;
}
ul#thumbup li a > span {
	display: block;
	float: left;
	margin-top: 20px;
}
ul#thumbup li a > img {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	display: block;
	float: left;
	height: 60px;
	margin-right: 10px;
	width: 60px;
}

#thumb-nav {
	position: relative;
	top: 50%;
	width: 100%;
}
#thumb-nav a.nav-right,
#thumb-nav a.nav-left {
	background: transparent url("images/sprata.png") repeat scroll;
	display: block;
	height: 60px;
	position: absolute;
	text-indent: -9999px;
	width: 40px;
	z-index: 100;
}
#thumb-nav a.nav-right {
	-webkit-border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;

	background-position: right top;
	right: 0;
}
#thumb-nav a.nav-left {
	-webkit-border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
	border-radius: 0 5px 5px 0;

	background-position: -520px top;
	left: 0;
}
#thumb-nav a.nav-right:hover {
	background-position: -560px top;
}
#thumb-nav a.nav-left:hover {
	background-position: -480px top;
}
#thumb-nav a.nav-right.deadend,
#thumb-nav a.nav-left.deadend {
	display: none;
}


.blok-intro {
	display: block;
	height: 560px;
	margin: 0 auto;
	padding-top: 80px;
	position: relative;
	width: 940px;
}

.intro,
.intro-device,
.intro-consult,
.intro-dotmm,
.intro-doteam,
.intro-dotms {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);

	background: rgba(255, 255, 255, 0.8);
	bottom: 120px;
	display: block;
	height: 160px;
	padding: 10px;
	position: absolute;
	right: 0;
	width: 480px;
}
.intro-device {
	height: 270px;
}
.intro-consult {
	height: 180px;	
}
.intro-dotmm {
	height: 220px;
}
.intro-doteam {
	bottom: 80px;
	height: 330px;
}
.intro-dotms {
	bottom: 60px;
	height: 140px;
}

.intro p {
	font-size: 16px;
	line-height: 24px;
}

#product-dottm {
	background: transparent url("images/device/dottm.png") repeat scroll;
	display: block;
	height: 430px;
  	left: 30px;
  	position: absolute;
  	top: 120px;
	width: 360px;
	z-index: 21;
}


/***** heading *****/
h2#titlebread {
	color: #f44330;
	font-family: "effra_lightregular";
	font-size: 36px;
	margin-top: 5px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

h2#titleintro {
	color: #1186ed;
	font-family: "effra_lightregular";
	font-size: 48px;
	margin-bottom: 10px;
}

h2#slogan {
	font-family: "effra_lightregular";
	font-size: 48px;
	margin-bottom: 40px;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

h3.spek {
	font-family: "effra_lightregular";
	font-size: 24px;
	margin-bottom: 20px;
}

.centro {
	text-align: center;
	margin-bottom: 20px;
}



span.blues {color: #1186ed;}
span.yell {
	background: #ffff57;
	color: #202020;
	font-family: "effraitalic";
	padding: 0 2px;
}

ul#featured,
ul.list-system,
ul.list-system-2,
ul.list-system-3,
ul.list-mm,
ul.list-eam,
ul.list-pm,
ul.list-about {
	display: block;
	list-style: none;
	margin-bottom: 40px;
}

ul#featured li,
ul.list-system-3 li {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);


	display: block;
	float: left;
	height: 160px;
	width: 140px;
	margin-left: 20px;
}
ul#featured li:first-child,
ul.list-system-3 li:first-child {
	margin: 0;
}
ul#featured li a,
ul.list-system-3 li a {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	border: 5px solid #ffffff;
	display: block;
	height: 150px;
	width: 130px;
}
ul#featured li a:hover,
ul.list-system-3 li a {
	text-decoration: none;
}
ul#featured li a.mm:hover,
ul.list-system-3 li a.mm:hover {
	border: 5px solid #f48c30;
}
ul#featured li a.eam:hover,
ul.list-system-3 li a.eam:hover {
	border: 5px solid #f44330;
}
ul#featured li a.pm:hover,
ul.list-system-3 li a.pm:hover {
	border: 5px solid #9730a0;
}
ul#featured li a.tm:hover,
ul.list-system-3 li a.tm:hover {
	border: 5px solid #202020;
}
ul#featured li a.ms:hover,
ul.list-system-3 li a.ms:hover {
	border: 5px solid #999999;
}
ul#featured li a.mob:hover,
ul.list-system-3 li a.mob:hover {
	border: 5px solid #0061b6;
}

ul#featured li a .dot1,
ul#featured li a .dot2,
ul#featured li a .dot3,
ul#featured li a .dot4,
ul#featured li a .dot5,
ul#featured li a .dot6 {
	background: transparent url("images/sprata.png") no-repeat scroll;
	display: block;
	height: 100px;
	margin: 15px auto;
	width: 100px;
}
ul#featured li a .dot1 {background-position: left -60px;}
ul#featured li a .dot2 {background-position: -100px -60px;}
ul#featured li a .dot3 {background-position: -200px -60px;}
ul#featured li a .dot4 {background-position: -300px -60px;}
ul#featured li a .dot5 {background-position: -400px -60px;}
ul#featured li a .dot6 {background-position: -500px -60px;}

ul#featured li a span.txt {
	display: block;
	font-size: 12px;
	text-align: center;
}
ul#featured li a.mm span.txt {color: #f48c30;}
ul#featured li a.eam span.txt {color: #f44330;}
ul#featured li a.pm span.txt {color: #9730a0;}
ul#featured li a.tm span.txt {color: #202020;}
ul#featured li a.ms span.txt {color: #999999;}
ul#featured li a.mob span.txt {color: #0061b6;}



/*********** System ***********/
ul.list-system {
}

ul.list-system li {
	float: left;
	margin-left: 20px;
	width: 220px;
}

ul.list-system li:first-child,
ul.list-system-2 li:first-child {
	margin-left: 0;
}

ul.list-system li .system-img-holder {
	display: block;
	height: 140px;
	margin-bottom: 20px;
	position: relative;
	width: 220px;
}
ul.list-system li .system-img-holder a.zoomer {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	background: transparent url("images/blok-bread.png") repeat scroll;
	display: none;
	height: 140px;
	left: 0;
	position: absolute;
	top: 0;
	width: 220px;
	z-index: 51;
}
ul.list-system li .system-img-holder:hover a.zoomer {
	display: block;
}
ul.list-system li .system-img-holder:hover a.zoomer span.ico-zoom,
ul.list-mm li .mm-img-holder:hover a.zoomer span.ico-zoom {
	background: transparent url("images/sprata.png") no-repeat scroll;
	background-position: -400px top;
	display: block;
	height: 24px;
	left: 50%;
	margin: -12px 0 0 -12px;
	position: absolute;
	top: 50%;
	width: 24px;
}

ul.list-system li img.system-img {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);

	display: block;
	height: 140px;
	width: 220px;
}

h3.titlefeature {
	color: #f44330;
	display: block;
	font-family: "effrabold";
	font-size: 18px;
	margin-bottom: 10px;
}

ul.list-system-2 {
}

ul.list-system-2 li {
	background: transparent url("images/bull.png") no-repeat;
	background-position: left 10px;
	float: left;
	padding-left: 20px;
	margin-left: 20px;
	width: 200px;
}

ul.list-system-3 {
	margin-bottom: 60px;
}
ul.list-system-3 li {
	height: 140px !important;
	width: 300px !important;
}
ul.list-system-3 li a {
	height: 130px !important;
	width: 290px !important;
}

ul.list-system-3 li a .dot1,
ul.list-system-3 li a .dot2,
ul.list-system-3 li a .dot3,
ul.list-system-3 li a .dot4,
ul.list-system-3 li a .dot5,
ul.list-system-3 li a .dot6 {
	background: transparent url("images/dot.png") no-repeat scroll;
	display: block;
	height: 100px;
	margin: 15px auto;
	width: 240px;
}

ul.list-system-3 li a .dot1 {background-position: left top;}
ul.list-system-3 li a .dot2 {background-position: left -100px;}
ul.list-system-3 li a .dot3 {background-position: left -200px;}
ul.list-system-3 li a .dot4 {background-position: left -300px;}
ul.list-system-3 li a .dot5 {background-position: left -400px;}
ul.list-system-3 li a .dot6 {background-position: left -500px;}



/********** DOT MM **********/
.btn-red,
a.btn-red {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.5);

	background: #f44330;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, left bottom, from(#fa6c4d), to(#f02219));
	background-image: -moz-linear-gradient(top, #fa6c4d, #f02219);
	background-image: -ms-linear-gradient(top, #fa6c4d, #f02219);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fa6c4d), color-stop(100%, #f02219));
	background-image: -webkit-linear-gradient(top, #fa6c4d, #f02219);
	background-image: -o-linear-gradient(top, #fa6c4d, #f02219);
	background-image: linear-gradient(top, #fa6c4d, #f02219);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa6c4d', endColorstr='#f02219', GradientType=0);

	border: 1px solid #b71200;
	bottom: -80px;
	display: block;
	height: 40px;
	left: 0;
	position: absolute;
	width: 160px;
	z-index: 55;
}

.btn-red:hover,
a.btn-red:hover {
	-webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);

	background: #f94e3c;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, left bottom, from(#fa6c4d), to(#f43229));
	background-image: -moz-linear-gradient(top, #fa6c4d, #f43229);
	background-image: -ms-linear-gradient(top, #fa6c4d, #f43229);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fa6c4d), color-stop(100%, #f43229));
	background-image: -webkit-linear-gradient(top, #fa6c4d, #f43229);
	background-image: -o-linear-gradient(top, #fa6c4d, #f43229);
	background-image: linear-gradient(top, #fa6c4d, #f43229);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa6c4d', endColorstr='#f43229', GradientType=0);

	text-decoration: none;
}

.btn-red:active,
a.btn-red:active {
	-webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);

	background: #f44330;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, left bottom, from(#f02219), to(#fa6c4d));
	background-image: -moz-linear-gradient(top, #f02219, #fa6c4d);
	background-image: -ms-linear-gradient(top, #f02219, #fa6c4d);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f02219), color-stop(100%, #fa6c4d));
	background-image: -webkit-linear-gradient(top, #f02219, #fa6c4d);
	background-image: -o-linear-gradient(top, #f02219, #fa6c4d);
	background-image: linear-gradient(top, #f02219, #fa6c4d);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f02219', endColorstr='#fa6c4d', GradientType=0);

	text-decoration: none;
}

a.btn-red span {
	color: #ffffff;
	display: block;
	font-family: "effrabold";
	font-size: 18px;
	margin: 10px 15px;
	text-decoration: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

a.btn-red span:after {
	background: transparent url("images/arrow.png") no-repeat;
	background-position: 8px 2px;
	content: "";
	display: inline-block;
	height: 16px;
	width: 24px;
}

input.btn-red {
	bottom: 0;
	left: 255px;
	position: relative;
}

.btn-home {
	left: 340px !important;
}




/********** DOT MM tambahan**********/
a.mm-vid {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	
	display: block;
	height: 0px;
	margin: 0 auto 0px;
	text-align: center;
	position: relative;
	width: 480px;

}

a.mm-vid div.zoomer {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	background: transparent url("images/blok-bread.png") repeat scroll;
	display: block;
	height: 200px;
	left: 0;
	position: absolute;
	top: 0;
	width: 300px;
	z-index: 51;
}
a.mm-vid:hover div.zoomer {
	background: rgba(0, 0, 0, 0.2);
}
a.mm-vid div.zoomer span.ico-play {
	background: transparent url("images/sprata.png") no-repeat scroll;
	background-position: -430px top;
	display: block;
	height: 50px;
	left: 50%;
	margin: -25px 0 0 -25px;
	position: absolute;
	top: 50%;
	width: 50px;
}

/********** DOT MM akhiran**********/




.ribbon {
	background: transparent url("images/ribbon.png") no-repeat;
	display: block;
	height: 90px;
	left: 30px;
	position: absolute;
	top: -100px;
	width: 440px;
}

h3.titleblue {
	color: #1186ed;
	font-family: "effrabold";
	font-size: 18px;
	margin-bottom: 20px;
	text-align: center;
}

ul.list-mm {
}

ul.list-mm li {
	float: left;
	margin-left: 20px;
	width: 300px;
}

ul.list-mm li:first-child,
ul.list-mm li:nth-child(4) {
	margin-left: 0;
}

ul.list-mm li .mm-img-holder {
	display: block;
	height: 200px;
	margin-bottom: 20px;
	position: relative;
	width: 300px;
}
ul.list-mm li .mm-img-holder a.zoomer {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	background: transparent url("images/blok-bread.png") repeat scroll;
	display: block;
	height: 200px;
	left: 0;
	position: absolute;
	top: 0;
	width: 300px;
	z-index: 51;
}
ul.list-mm li .mm-img-holder:hover a.zoomer {
	background: rgba(0, 0, 0, 0.2);
}
ul.list-mm li .mm-img-holder a.zoomer span.ico-play {
	background: transparent url("images/sprata.png") no-repeat scroll;
	background-position: -430px top;
	display: block;
	height: 50px;
	left: 50%;
	margin: -25px 0 0 -25px;
	position: absolute;
	top: 50%;
	width: 50px;
}

ul.list-mm li img.mm-img {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);

	display: block;
	height: 200px;
	width: 300px;
}

img.mm-bagan {
	display: block;
	margin: 20px auto;
}

ul.list-mm2 {
}

ul.list-mm2 li {
	background: transparent url("images/bull-small.png") no-repeat;
	background-position: left 8px;
	line-height: 21px;
	padding-left: 15px;
	margin: 0 0 10px 10px;
}



/********** DOT EAM **********/
ul.list-eam {
	margin: 0 20px;
	width: 880px;
}
ul.list-eam li {
	background: transparent url("images/bull-small.png") no-repeat;
	background-position: left 8px;
	line-height: 21px;
	margin-left: 20px;
	padding-left: 15px;
}



/********** DOT PM **********/
ul.list-pm,
ul.list-pm2 {
	margin: 0 auto 20px;
	width: 940px;
}
ul.list-pm li,
ul.list-pm2 li {
	float: left;
	margin-left: 20px;
	padding-left: 15px;
	width: 400px;
}
ul.list-pm2 li {
	background: transparent url("images/bull-small.png") no-repeat;
	background-position: left 8px;
}
ul.list-pm li .pm-img-holder {
	display: block;
	height: 300px;
	margin-bottom: 20px;
	position: relative;
	width: 400px;
}
ul.list-pm li .pm-img-holder a.zoomer {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	background: transparent url("images/blok-bread.png") repeat scroll;
	display: none;
	height: 300px;
	left: 0;
	position: absolute;
	top: 0;
	width: 400px;
	z-index: 51;
}
ul.list-pm li .pm-img-holder:hover a.zoomer {
	display: block;
}
ul.list-pm li .pm-img-holder a.zoomer span.ico-zoom {
	background: transparent url("images/sprata.png") no-repeat scroll;
	background-position: -400px top;
	display: block;
	height: 24px;
	left: 50%;
	margin: -12px 0 0 -12px;
	position: absolute;
	top: 50%;
	width: 24px;
}

ul.list-pm li img.pm-img {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);

	display: block;
	height: 300px;
	width: 400px;
}



/********** Device **********/



/********** DOT TM **********/
a.tm-vid {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);

	background: transparent url("images/device/vid-dottm.png") no-repeat;
	display: block;
	height: 320px;
	margin: 0 auto 20px;
	text-align: center;
	position: relative;
	width: 480px;
}

a.tm-vid div.zoomer {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	background: transparent url("images/blok-bread.png") repeat scroll;
	display: block;
	height: 320px;
	left: 0;
	position: absolute;
	top: 0;
	width: 480px;
	z-index: 51;
}
a.tm-vid:hover div.zoomer {
	background: rgba(0, 0, 0, 0.2);
}
a.tm-vid div.zoomer span.ico-play {
	background: transparent url("images/sprata.png") no-repeat scroll;
	background-position: -430px top;
	display: block;
	height: 50px;
	left: 50%;
	margin: -25px 0 0 -25px;
	position: absolute;
	top: 50%;
	width: 50px;
}

ul.list-tm {
	margin: 0 auto 20px;
	width: 840px;
}

ul.list-tm li {
	float: left;
	margin-right: 20px;
	width: 400px;
}

ul.list-tm li:last-child {
	margin-right: 0;
}

img.tm-img {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);

	margin-bottom: 20px;
}



/********** Mobile **********/





/********** Consulting **********/





/********** About **********/

ul.list-about {
	margin-bottom: 0 !important;
}

ul.list-about li {
	background: transparent url("images/bull-small.png") no-repeat;
	background-position: left 8px;
	padding-left: 15px;
	margin: 0 0 10px 40px;
	float: left;
	width: 240px;
}





/* ============================================================================================================================= */
/* footer section */
.txt-foot {
	float: left;
	margin-top: 15px;
}
.logofoot {
	height: 60px;
	margin-bottom: 10px;
	width: 160px;
}
.logofoot h1 a {
	background: transparent url("images/sprata.png") no-repeat;
	background-position: -220px top;
	display: block;
	height: 60px;
	margin-left: -10px;
	text-indent: -9999px;
	width: 160px;
}
.txt-foot span {
	font-size: 12px;
}

ul.list-foot {
	float: right;
	list-style: none;
	margin: 20px 0 0 80px;
}
ul.list-foot li {
	font-size: 13px;
	margin-bottom: 5px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
ul.list-foot li.titling {
	color: #202020;
	font-family: "effrabold";
	margin-bottom: 10px;
	margin-left: -10px;
}
ul.list-foot li a:hover {
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* ============================================================================================================================= */
/* tables section */
table,
table.tennis {
	border-collapse: separate;
	border-spacing: 10px;
  	margin: 0 auto;
	padding: 0;
	width: 100%;
	vertical-align: middle;
}
table.tennis {
	width: 720px;
}
table.tennis th, table.tennis td {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	padding: 10px;
	text-align: left;
}
table.tennis tr.tb-ganjil td {
	background-color: #eeeeee;
}
table.tennis tr.tb-genap td {
	background-color: #dddddd;
}
table.tennis td.rt {
	font-family: "effrabold";
	font-size: 13px;
	text-align: right;
	width: 240px;
}

/* ============================================================================================================================= */
/* forms section --from twitter bootstrap with some changes */
input,
input[type=text],
select,
textarea {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);

	background: #eeeeee;
	border: 1px solid #cccccc;
	color: #000000;
	display: block;
	font-family: "effraregular", Arial, sans-serif;
	margin: 0;
	padding: 5px;
}
input[type=text]:hover,
select:hover,
textarea:hover {
	border: 1px solid #666666;
}
input[type=submit] {
	color: #ffffff;
	font-family: "effrabold", Arial, sans-serif;
	margin-top: 10px;
}
input[type=text]:focus,
select:focus,
textarea:focus {
	background: #f6f6f6;
	border: 1px solid #aaaaaa;
}
select {height: 30px;}
textarea {height: 100px;}
/* mini reset for non-html5 file types */
input[type=checkbox], input[type=radio] {
  width: auto;
  height: auto;
  float: right;
  padding: 0;
  margin-right: 5px;
  *margin-top: 0;
  /* IE6-7 */

  line-height: normal;
  border: none;
}
input[type=file] {
  background-color: #ffffff;
  padding: initial;
  border: initial;
  line-height: initial;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
input[type=button], input[type=reset], input[type=submit] {
  width: auto;
  height: auto;
}

/* buttons */
.btn,
.btn-login {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	background: #f58987;
	color: #ffffff;
	display: inline-block;
	letter-spacing: 1px;
	padding: 8px 10px;
}
.btn:hover,
.btn-login:hover {
	background: #ef7977;
	color: #ffffff;
	text-decoration: none;
}
.btn:active,
.btn-login:active {
	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);

	padding: 9px 10px 7px;
}

/* popup login */
.ovrly {
	background: rgba(0, 0, 0, 0.5);
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1000;
}
.ovrly-all {
	background: rgba(0, 0, 0, 0.5);
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1000;
}

.pop-login {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);

	background: #ffffff;
	display: block;
	float: right;
	height: 90px;
	margin: 50px -60px 0 0;
	padding: 10px;
	position: relative;
	width: 210px;
}

span.arr {
	background: transparent url("images/arr.png") no-repeat;
	display: block;
	height: 8px;
	position: absolute;
	right: 22px;
	top: -8px;
	width: 18px;	
}
.pop-login a {
	font-size: 12px;
}

.form-blok {
	margin-bottom: 10px;
}

.inp-login,
.inp-login-small {
	-webkit-border-radius: 3px !important;
	-moz-border-radius: 3px !important;
	border-radius: 3px !important;

	background: #dddddd !important;
	border: 1px solid #aaaaaa !important;
	color: #000000 !important;
	display: block !important;
	font-family: "TitilliumText25L400wt", Arial, Helvetica, sans-serif !important;
	margin: 0 !important;
	padding: 5px !important;
	width: 198px !important;
}
.inp-login:hover,
.inp-login-small:hover {
	border: 1px solid #666666 !important;
}
.inp-login:focus,
.inp-login-small:focus {
	background: #f6f6f6 !important;
	border: 1px solid #666666 !important;
}
.inp-login-small {
	display: inline-block !important;
	margin-right: 6px !important;
	width: 128px !important;
}

.btn-login {
	margin: 0 !important;
	padding: 5px 10px !important;
}


/*****************************************************************************************************/
/* code tag */
.bannn {
	display: block;
	margin: 10px;
}
.bannn img {
	display: block;
	margin: 0 auto;
}
.bannn code {
	background: #FFE4E4;
	border: 1px solid #F58987;
	display: block;
	padding: 10px 20px;
	font: 12px/18px "Courier New" normal;
	text-align: left;
}


/*****************************************************************************************************/
.jcarousel-skin-dot .jcarousel-container {
	margin-top: -10px;
}

.jcarousel-skin-dot .jcarousel-container-horizontal {
    width: 1600px;
    height: 640px;
}

.jcarousel-skin-dot .jcarousel-clip {
    overflow: hidden;
}

.jcarousel-skin-dot .jcarousel-clip-horizontal {
    width: 1600px;
    height: 640px;
}

.jcarousel-skin-dot .jcarousel-item {
    width: 1600px;
    height: 640px;
}

.jcarousel-skin-dot .jcarousel-item-horizontal {
	margin-left: 0;
    margin-right: 0;
}

.jcarousel-skin-dot .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}