body, html {
	height: 100%;
	width: 100%;
}

body, h1, h2, h3, h4, h5, h6 {
	font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
}

.lead {
	font-size: 18px;
	font-weight: 400;
}

.intro-header {
	/*padding-top: 50px; 
	padding-bottom: 50px;*/
	color: #f8f8f8;
	background: url(../img/bg3.png) repeat-x center top;
	text-align: center;
}

/*.intro-header:after {
    background: url("../img/arrow01.png") no-repeat;
    bottom: -114px;
    content: " ";
    display: inline-block;
    height: 115px;
    position: relative;
    width: 100%;
}*/

.img-responsive.arrow {
    position: absolute;
    top: -1px;
    width: 100%;
}

.intro-message {
	position: relative;
	padding-top: 10%;
	padding-bottom: 20%;
    color: #555;
}

.intro-message > h1 {
	margin: 0;
	font-size: 5em;
 }

.intro-divider {
	width: 400px;
	border-top: 1px solid #555;
 }

.intro-message > h3 {
 }
 


@media (max-width: 767px) {
	.intro-message {
		padding-bottom: 15%;
	}

	.intro-message > h1 {
		font-size: 3em;
	}

	ul.intro-social-buttons > li {
		display: block;
		margin-bottom: 20px;
		padding: 0;
	}

	ul.intro-social-buttons > li:last-child {
		margin-bottom: 0;
	}

	.intro-divider {width: 100%;}




}

.network-name {
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 2px;
}

.content-section-a {
	background-color: #233073;
	padding: 50px 0;
	color:#9EBAF9;
}



#about .section-heading, #about h4 {
    color: #FFFFFF;
}

#about .nav.nav-tabs a {
    background: none repeat scroll 0 0 #282C3E;
    border-radius: 50px;
    box-shadow: 0 2px 2px #000000 inset;
    color: #FFFFFF;
    margin: 0 5px;
}

@media (max-width: 767px) {

	.nav.nav-tabs {
		margin: 20px 5px;
	}
	
	#about .nav.nav-tabs a {
		background: none repeat scroll 0 0 #282C3E;
		border-radius: 50px;
		box-shadow: 0 2px 2px #000000 inset;
		color: #FFFFFF;
		margin: 5px;
		min-width: 140px;
		text-align: center;
	}
	
	#about .section-heading, #about h4 {
    text-align: center;}


	
}

@media (max-width: 600px) and (min-width: 568px) {

	.nav.nav-tabs {
		margin: 20px 5px;
	}
	#about .nav.nav-tabs a {
		background: none repeat scroll 0 0 #282C3E;
		border-radius: 50px;
		box-shadow: 0 2px 2px #000000 inset;
		color: #FFFFFF;
		margin: 5px;
		min-width: 100px;
		text-align: center;
	}
}


	#about .nav.nav-tabs .active a {
		background: none repeat scroll 0 0 #FFFFFF;
		border: medium none;
		box-shadow: 0 2px 2px #000000;
		color: #000000;
	}





.content-section-b {
 	padding: 50px 0;
    color: #076855;
}

.section-heading {
	margin-bottom: 30px;
}

.section-heading-spacer {
	border-top: 3px solid #e7e7e7;
	width: 200px;
	float: left;
}

.banner {
    background: url("../img/bg4.jpg") repeat fixed 0 0 / cover rgba(0, 0, 0, 0);
    color: #F8F8F8;
    padding: 100px 0;
}

.banner h2 {
	margin: 0;
 	font-size: 3em;
}

.banner ul {
	margin-bottom: 0;
}

.banner-social-buttons {
	float: right;
	margin-top: 0;
}

@media (max-width: 1199px) {
	ul.banner-social-buttons {
		float: left;
		margin-top: 15px;
	}	
}

@media (max-width: 767px) {
	.banner h2 {
		margin: 0;
 		font-size: 3em;
	}

	ul.banner-social-buttons > li {
		display: block;
		margin-bottom: 20px;
		padding: 0;
	}

	ul.banner-social-buttons > li:last-child {
		margin-bottom: 0;
	}	
}

footer {
	background-color: #f8f8f8;
	padding: 50px 0;
}

p.copyright {
	margin: 15px 0 0;
}


.detail {
        font-size: 1.5em;
    font-weight:400;
    text-indent: 30px;
    padding-top: 30px;
}



.mono {color: #ccc; font-weight:400;
}

.mono li a {
    border: medium none;
}

.nav.nav-tabs.mono {
    background: none repeat scroll 0 0 #3DA8E3;
    border-radius: 50px;
    display: inline-block;
}

.mono > li.active > a,
.mono > li.active > a:hover,
.mono > li.active > a:focus {
  color: #fff;
  cursor: default;
  background-color: transparent;
    font-weight:400;
}

.architecture {
    font-weight:400;
    text-indent: 30px;
}

#architecture ul {
    padding: 0;
}

#architecture ul li {
    list-style: none outside none;
    margin: 0;
    padding: 10px 0;
}

/* Features */

.service-item {
  margin-bottom: 15px;
}

i.service-icon {
 
  display: inline-block;
  font-size: 56px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  vertical-align: middle; 
  text-align: center;
}

.adhd {
    color: #3DA8E3;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; 
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}

.adhd:hover {
color: #283173;
/*background: #1abc9c;*/
/* -moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);*/

-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
z-index:2;
}

#features {
    padding-bottom: 10%;
	background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 0 200px #B1B7D5 inset;
}

#features h1, #features h4, #features i {
    color: #283173;
}

@media (max-width: 767px){

	.adhd {
    background: none repeat scroll 0 0 #3DA8E3;
    color: #FFFFFF;
    font-size: 1em;
    transform: scale(0.9);}
	
	.adhd h4 {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    width: 80%;}
	
	.service-item {margin-bottom: 0px;}
	
	i.service-icon {
    font-size: 30px;
    line-height: 50px;
    vertical-align: middle;
    width: 50px;
	 height: auto;}
	 
	 #features {box-shadow: none;}
	 
	 #features h1, #features h4, #features i {
    color: #fff;
}
	
}

@media (max-width: 800px) and (min-width: 568px) {
.adhd {
    background: none repeat scroll 0 0 #3DA8E3;
    color: #FFFFFF;
    display: inline-block;
    float: left;
    font-size: 1em;
    height: 60px;
    transform: scale(0.9);
    width: 50%;
}

i.service-icon {
    display: inline-block;
    float: left;
    font-size: 30px;
    height: auto;
    line-height: 50px;
    vertical-align: middle;
    width: 50px;
}

#features h1, #features h4, #features i {
    color: #fff;
}

}

.tab-content {
 margin-top: 20px;
}

#popup {
    visibility: hidden;
}



 

.content-section-c {
 
	padding: 50px 0;
    color: #777;
}

.arrow_box {
	position: relative;
	/*background: #fff;*/
}
.arrow_box:after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color:#3DA8E3;
	border-width: 10px;
	margin-left: -10px;
}

.promotion {
    background: none repeat scroll 0 0 #B4ECFF;
    margin: 30px auto 0;
    padding: 23px 23px 23px 23px;
    text-align: left;
	max-width: 500px;
	position:relative;
}

 .promotion ul:after {
    content: url("../img/arrow_promo.png");
    display: inline-block;
    position: absolute;
    right: -34px;
    top: 0;
}

.promotion ul:before {
    content: url("../img/shadow_promo.png");
    display: inline-block;
    left: 0;
    position: absolute;
    top: -50%;
}

.promotion li {
    font-weight: normal;
    list-style: none outside none;
}
.promotion .glyphicon.glyphicon-exclamation-sign {
    color: #3DA8E3;
    float: left;
    font-size: 2.5em;
    margin-right: 20px;
    top:-7px;
}

.promotion > ul {
    margin: 0;
	font-size: 1.2em;
}

#popup .glyphicon.glyphicon-flash {
    color: #FFFFFF;
    display: block;
    font-size: 10em;
    margin: 0 auto;
}

#simple a, #detail a {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 50px;
}

@media (max-width: 767px) {
  	.promotion {
		background: none repeat scroll 0 0 #B4ECFF;
		border-radius: 10px;
		margin: 30px auto 0;
		max-width: 400px;
		padding: 10px;
		text-align: left;
	}
	
	 .promotion ul:after {display:none;}
	 .promotion ul:before {display:none;}
	
	.promotion li {
		font-weight: normal;
		list-style: none outside none;
		padding: 5px 0;
		text-align: center;	}

	.promotion > ul {
		margin: 0;
		padding: 0;}
		
	.promotion .glyphicon.glyphicon-exclamation-sign {
		display: block;
		font-size: 2.5em;
		margin: 0 auto;
		text-align: center;
		  float: none;
		  color: #3DA8E3;
	}
	
	.cast  .h3 {
    font-size: 20px;
	}
	
}


.company {
    color: #fff; font-size: 3em; font-weight: 300; line-height: 1.1em
}

.company2 {
    color: #fff; font-size: 1.4em; font-weight: 600; line-height: 1.1em
}

.bigmomma {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.bigmomma:hover {
    -moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}

.max-woi {
    padding: 20px;
    margin: 0 auto;
   /* max-width: 700px;*/
}

.tinggi-max {
    max-height: 400px;
    margin: 0 auto;
    overflow:hidden;
}

#screen {
    background: none repeat scroll 0 0 #3DA8E3;
	padding-bottom: 10%;
}

#screen .section-heading {
    color: #FFFFFF;
}

#about {
    padding-bottom: 10%;
	padding-top: 10%;
	position:relative;
}



#req {
    background: url("../img/bg5.jpg") no-repeat fixed 0 0 / cover rgba(0, 0, 0, 0);
    box-shadow: 0 0 500px 200px #000000 inset;
    color: #FFFFFF;
    line-height: 25px;
    margin: 0;
	text-shadow:0 0 2px #000000;
	position:relative;
}



@media (max-width: 450px) {
	#req {
		background: #333;
		box-shadow: none;
		color: #FFFFFF;
		line-height: 25px;
		margin: 0;
		text-shadow:0 0 2px #000000;
		position:relative;
	}
	
	.cast  .h3 {
    font-size: 20px;
	}

     /* Subnav */
      .subnav {
        position: static;
        top: auto;
        z-index: auto;
        width: auto;
        height: auto;
        background: #fff; /* whole background property since we use a background-image for gradient */
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
      }
      .subnav .nav > li {
        float: none;
      }
      .subnav .nav > li > a {
        border: 0;
      }
      .subnav .nav > li + li > a {
        border-top: 1px solid #e5e5e5;
      }
      .subnav .nav > li:first-child > a,
      .subnav .nav > li:first-child > a:hover {
          -webkit-border-radius: 4px 4px 0 0;
             -moz-border-radius: 4px 4px 0 0;
                  border-radius: 4px 4px 0 0;
      }

      .subnav .nav {
            padding: 0 !important;
            width: 100%;
        }
	
}

#track {
    border-bottom: 1px solid #999999;
    border-top: 1px solid #999999;
    box-shadow: 0 0 300px #CCCCCC inset;
    padding-bottom: 10%;
    padding-top: 10%;
}

#track h1 {
    color: #283173;
    text-shadow: 0 0 1px #FFFFFF;
}

#track h4 {
    color: #283173;
    font-size: 1em;
}

@media (max-width: 767px) {
#track img {
    display: inline-block;
    float: left;
    vertical-align: middle;
    width: 20%;
}

#track .service-item {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    display: inline-block;
    padding: 10px;
    width: 100%;
}

#track h4 {
    color: #555555;
    float: right;
    font-size: 1.2em;
    vertical-align: middle;
    width: 70%;
}

}

@media (max-width: 800px) and (min-width: 568px) {
#track .service-item {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    display: inline-block;
    float: left;
    height: 100px;
    margin: 5px;
    width: 45%;
}

#track img {
    display: inline-block;
    float: left;
    padding: 10px;
    vertical-align: middle;
    width: 30%;
}

#track h4 {
    color: #555555;
    float: right;
    font-size: 1.2em;
    vertical-align: middle;
    width: 70%;
}


}
.fontSize, .lead.fontSize {
    font-family: Helvetica;
    font-size: 1.2em;
    line-height: 25px;
    word-spacing: 3px;
	font-weight: normal;
	text-align:justify;
}


.active > a {
    border-bottom: 2px solid;
}

.gear {
    animation: 60s linear 2s normal none infinite myfirst;
    opacity: 0.1;
    position: absolute;
    right: 5%;
    bottom: 5%;
}

.gear2 {
    animation: 60s linear 2s normal none infinite myfirst;
    opacity: 0.1;
    position: absolute;
    right: 5%;
    bottom: 45%;
	width: 200px;
}


@keyframes myfirst
{
0%   {transform:rotate(0deg);}
100% {transform:rotate(359deg);}
}

#features h1 {
    color: #283173;
}

#popup .lead{  animation: 60s linear 2s normal none infinite borderLead;}


#detail blockquote {
    background: none repeat scroll 0 0 #172050;
    border: medium none;
    font-size: 1em;
      padding: 21px;
}

#popup strong {
    color: #EBF8FF;
    font-weight: normal;
}


.custom-popup-class .mfp-container {
  padding-top: 40px;
  padding-bottom: 40px;
}
.custom-popup-class .mfp-content {
  width: 100%;
  max-width: 700px;
}
#popupZ {
  width: 100%;
  height: 0;
  overflow: hidden;
  /* This is scale ratio */
  padding-top: 56.25%;
}
#popupZ .mfp-close {
  top: -44px;
  color: #FFF;
  text-align: right;
  right: 1px;
}
.videoPopup {
  background: #fff;
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,1);
          box-shadow: 0 0 40px 0 rgba(0,0,0,1);
}



/*--#####################################################################################################################################--*/

#bodyColor { 

    /* fallback */
     background-color: #FFFFFF; 
     background: url(images/linear_bg_2.png); 
     background-repeat:no-repeat; 

     /* Safari 4-5, Chrome 1-9 */ 
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DBDDEB), to(#FFFFFF)) no-repeat; 

     /* Safari 5.1, Chrome 10+ */ 
     background: -webkit-linear-gradient(top, #DBDDEB, #FFFFFF) no-repeat; 

     /* Firefox 3.6+ */ 
     background: -moz-linear-gradient(top, #DBDDEB, #FFFFFF) no-repeat; 

     /* IE 10 */ 
     background: -ms-linear-gradient(top, #DBDDEB, #FFFFFF) no-repeat; 

     /* Opera 11.10+ */ 
     background: -o-linear-gradient(top, #DBDDEB, #FFFFFF) no-repeat; 
 }


 #radial-center {

    /* fallback */ 
    background-color: #DBDDEB; 
    background-image: url(images/radial_bg.png); 
    background-position: center center; 
    background-repeat: no-repeat; 

    /* Safari 4-5, Chrome 1-9 */ 
    /* Can't specify a percentage size? Laaaaaame. */ 
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#FFFFFF), to(#DBDDEB)); 

    /* Safari 5.1+, Chrome 10+ */ 
    background: -webkit-radial-gradient(circle, #FFFFFF, #DBDDEB); 

    /* Firefox 3.6+ */ 
    background: -moz-radial-gradient(circle, #FFFFFF, #DBDDEB); 

    /* IE 10 */ 
    background: -ms-radial-gradient(circle, #FFFFFF,#DBDDEB); 

 }

 #even-stops { 

    /* fallback DIY*/ 
    /* Safari 4-5, Chrome 1-9 */ 
    background: -webkit-gradient(linear, left top, right top, from(#DBDDEB), color-stop(0.25, #FFFFFF), color-stop(0.5, #DBDDEB), color-stop(0.75, #FFFFFF), to(#DBDDEB)); 

    /* Safari 5.1+, Chrome 10+ */ 
    background: -webkit-linear-gradient(left, #DBDDEB, #FFFFFF, #DBDDEB, #FFFFFF, #DBDDEB); 

    /* Firefox 3.6+ */ 
    background: -moz-linear-gradient(left, #DBDDEB, #FFFFFF, #DBDDEB, #FFFFFF, #DBDDEB); 

    /* IE 10 */ 
    background: -ms-linear-gradient(left, #DBDDEB, #FFFFFF, #DBDDEB, #FFFFFF, #DBDDEB); 

    /* Opera 11.10+ */ 
    background: -o-linear-gradient(left, #DBDDEB, #FFFFFF, #DBDDEB, #FFFFFF, #DBDDEB); 
}


#test {

    background: rgba(134,174,204,1);
    background: -moz-linear-gradient(top, rgba(134,174,204,1) 0%, rgba(212,228,239,1) 81%, rgba(212,228,239,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(134,174,204,1)), color-stop(81%, rgba(212,228,239,1)), color-stop(100%, rgba(212,228,239,1)));
    background: -webkit-linear-gradient(top, rgba(134,174,204,1) 0%, rgba(212,228,239,1) 81%, rgba(212,228,239,1) 100%);
    background: -o-linear-gradient(top, rgba(134,174,204,1) 0%, rgba(212,228,239,1) 81%, rgba(212,228,239,1) 100%);
    background: -ms-linear-gradient(top, rgba(134,174,204,1) 0%, rgba(212,228,239,1) 81%, rgba(212,228,239,1) 100%);
    background: linear-gradient(to bottom, rgba(134,174,204,1) 0%, rgba(212,228,239,1) 81%, rgba(212,228,239,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86aecc', endColorstr='#d4e4ef', GradientType=0 );
}


 .cast {
    margin: 0 0 2em;	
	/*padding : 25px;
	background:linear-gradient(to right, #EEEEEE, #EEEEEE 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 55%, #EEEEEE 50%, #EEEEEE) repeat scroll 0 0 rgba(0, 0, 0, 0);*/
}


.video {
    display:  table-cell;
    float: left;
}




.nav-tab-header{
   /*background-color: #3DA8E3;*/
    height: 66px;
    margin-bottom: -20px;
}


.line { 
    margin: 25px 0;
    height: 1px;
    background: black;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black));
}

.greyBg{
	background-color:#F5F5F5;
	border : 1px solid #ccc;
}

.darkgreyBg{
	background-color:#A1A1A1;
	color: #FFFFFF;
}


#radial-center {   
    position:relative;
}

#radial-center .nav.nav-tabs a {
    background: none repeat scroll 0 0 #282C3E;
    border-radius: 50px;
    box-shadow: 0 2px 2px #000000 inset;
    color: #FFFFFF;
    margin: 0 5px;
}


#radial-center .nav.nav-tabs .active a {
        background: none repeat scroll 0 0 #FFFFFF;
        border: medium none;
        box-shadow: 0 2px 2px #000000;
        color: #000000;
    }



/*#brochure .nav.nav-tabs .nav-pills {
    background-color: #3DA8E3;
    border-radius: 5px;
    color: #FFFFFF;
}*/

#screenshots .nav.nav-tabs .nav-pills{
    background-color: #3DA8E3;
    border-radius: 5px;
    color: #FFFFFF;
}

#screencasts .nav.nav-tabs .nav-pills{
    background-color: #3DA8E3;
    border-radius: 5px;
    color: #FFFFFF;
}

.whiteFont{
    /* background-color: #3DA8E3; */
      color: #FFFFFF;
}

ul#innerTab li nav {
   color: #FFFFFF;
  font-weight: bold;
}

#innerTab nav {
   color: #FFFFFF;
  font-weight: bold;
}

That is what I'm calling "being as specific as it makes sense to be". You could actually be way more specific and us

#document .nav.nav-tabs a {
        background: none repeat scroll 0 0 #282C3E;
        border-radius: 50px;
        box-shadow: 0 2px 2px #000000 inset;
        color: #FFFFFF;
        margin: 5px;
        min-width: 100px;
        text-align: center;
    }
}


    #document .nav.nav-tabs .active a {
        background: none repeat scroll 0 0 #FFFFFF;
        border: medium none;
        box-shadow: 0 2px 2px #000000;
        color: #000000;
    }

    #document .section-heading, #document h4 {
    color: #283173;
    margin-left:5%;
    text-transform:uppercase;
}


.content-section-d {
    background: url("../img/classic.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);    
    padding: 50px 0;
    color:#283173;
    height: auto;
}

/*.content-section-d {
    background-color: #616AAC;
    /*background-image: linear-gradient(to bottom, #563D7C 0px, #6F5499 100%);
    background-image:linear-gradient(to bottom, #100A5B 0px, #616AAC 100%);
    background-repeat: repeat-x;
    color: #CDBFE3;
    padding: 50px 0;
    position: relative;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    height: 100%;
}*/

#document .tab-right {
       float :right !important;
       padding-right: 10px !important;
}


.subnav {
    background-color: #EEEEEE;
    background-image: -moz-linear-gradient(center top , #F5F5F5 0%, #EEEEEE 100%);
    background-repeat: repeat-x;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    /*height: 36px;*/
    width: 100%;
    float:right;
}

.subnav .nav {
    margin-bottom: 0;
    float: right;
    padding-right: 15%;
}

.subnav .nav > li > a {
    border-left: 1px solid #F5F5F5;
    border-radius: 0;
    border-right: 1px solid #E5E5E5;
    margin: 0;
    padding-bottom: 11px;
    padding-top: 11px;
    color: #0088CC;
}



.subnav .nav > .active > a, .subnav .nav > .active > a:hover {
    background-color: #E9E9E9;
    border-left: 0 none;
    border-right-color: #DDDDDD;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05) inset;
    color: #777777;
    padding-left: 13px;
}

.subnav .nav > .active > a .caret, .subnav .nav > .active > a:hover .caret {
    border-top-color: #777777;
}

.subnav .nav > li:first-child > a, .subnav .nav > li:first-child > a:hover {
    border-left: 0 none;
    border-radius: 4px 0 0 4px;
    padding-left: 12px;
}

.subnav .nav > li:last-child > a {
    border-right: 0 none;
}

.subnav .dropdown-menu {
    border-radius: 0 0 4px 4px;
}

.subnav  .nav-pills > li > a {
    color: #0088CC;
    font-weight : normal;
}

.subnav .nav-pills > li.active > a, .subnav .nav-pills > li.active > a:hover, .subnav .nav-pills > li.active > a:focus {
    background-color: #E9E9E9;
    color: #777777;
}

#screencasts, #brochure, #screenshots{
    margin-top: 50px;
}

#myCarousel{
	height:400px;
	}


#myCarousel .carousel-control {
  position: absolute;
  top: 0;
  bottom: 50px;
  left: 0;
  width: 0%;
  font-size: 30px;
  color: #777777;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  opacity: 0.5;
  filter: alpha(opacity=50);
}



#myCarousel .carousel-inner {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 95%;
}


#myCarousel .carousel-control.left {
  background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}

#myCarousel .carousel-control.right {
  right: 0;
  left: auto;
  background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}

#myCarousel .carousel-indicators{
		visibility:hidden;
}

#myCarousel .description {
		margin-top : 10px;
}
@media (max-width: 900px) {
#myCarousel{
	height:100%;
	}
	
	
		#screenshots .tinggi-max {
    max-height: 100%;
}
}


@media (max-width: 800px) and (min-width: 568px) {{
#myCarousel{
	height:100%;
	}
	
	
	#screenshots .tinggi-max {
    max-height: 100%;
}


}