html,
body {
	height : 100%;
}

body {
	font-family : 'Open Sans', sans-serif;
}

@font-face {
    font-family: 'League Spartan';
    src: url(../fonts/leaguespartan-bold.ttf);
}

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i');

.navbar-inverse {
	height : auto;
	background-color : #373737;
	-moz-box-shadow: 0 2px 10px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.4);
	-o-box-shadow: 0 2px 10px rgba(0,0,0,0.4);
	box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.navbar-inverse .navbar-collapse {
	border-color  : #333;
}

/* ------------------- LOGO ------------------- */
.logo {
    float:left;
    clear:both;
    margin: 21px 0 0;
}


.logo > h1{
    margin:0px;
    padding:0px;
    font-family : 'League Spartan', Montserrat,'Open Sans';
}

.logo > h1 > a{
    color:#fff;
    font-weight: 700;
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: 0px;
    text-decoration:none;
    margin-left : -15px;
}

.logo > h1 > a > span {
    color :#faf1dd;
}

@media (min-width:992px) and (max-width:1199px){
    .logo {
        margin: 22px 0 0 ;
    }
}

@media (min-width:768px) and (max-width:991px){
    .logo {
        margin: 30px 0 0 ;
    }


    .logo > h1{
        margin-top : -9px;
        padding:0px;
    }

    .logo > h1 > a{
        font-weight: 700;
        font-size: 25px;
        text-transform: uppercase;
        letter-spacing: 0px;
        text-decoration:none;
        margin-left : -15px;
    }
}

@media (min-width:601px) and (max-width: 767px){
    .logo {
         margin: 6px 0 0 ;
    }


    .logo > h1{
        padding:0px;
    }

    .logo > h1 > a{
        font-weight: 700;
        font-size: 25px;
        text-transform: uppercase;
        letter-spacing: 0px;
        text-decoration:none;
        margin-left : 15px;
    }
}
@media (min-width:350px) and (max-width: 600px){
    .logo {
         margin: 7px 0 0 ;
    }


    .logo > h1{
        padding:0px;
    }

    .logo > h1 > a{
        font-weight: 700;
        font-size: 25px;
        text-transform: uppercase;
        letter-spacing: 0px;
        text-decoration:none;
        margin-left : 15px;
    }
}

@media (min-width:0px) and (max-width: 349px){
    .logo {
        margin: 7px 0 0 ;
    }

    .logo > h1{
        padding:0px;
    }

    .logo > h1 > a{
        font-weight: 700;
        font-size:25px;
        text-transform: uppercase;
        letter-spacing: 0px;
        text-decoration:none;
        margin-left : 15px;
    }
}


.menu li {
	float : left;
	display : inline;
}

.menu li.sambutan {

	
}

.menu > li > a {
	font-size : 14px;
	font-weight : 700;
	letter-spacing : 0.2px;
	color : #fff;
	padding : 30px 15px;
}

.menu > li > a:hover {
	color : #fff;
	background-color : #333;
	padding : 30px 15px;
}

.menu > li > a:focus {
	text-decoration : none;
	color : #fff;
	background-color : #333;
	padding : 30px 15px;
}

.menu > li > a:active {
	text-decoration : none;
	color : #fff;
	background-color : #333;
	padding : 30px 15px;
}

.navbar-toggle {
	margin-top : 17px;
	padding : 15px;
	background-color : #333;
	border :0 ;
	border-radius : 0px;
}


.header-intro {
    /*background-color: #ededed;*/
    padding: 180px 0 80px 0;
	border-bottom : 1px dotted #999797;
    background: url(../images/coding.jpg);
    background-position: top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

.header-intro-deskripsi{
	padding : 0px 0px 50px 0px;
	color : #fff;
	font-size : 18px;
}

.judul-header-intro {
	font-weight : 700;
	font-size : 46px;
	color : #fff;
}

.header-intro-deskripsi > .tagline {
	font-weight : bold;
}

.header-intro-deskripsi .btn-info {
	background-color : #0190da;
	padding : 15px;
	color : #fff;
	font-size : 18px;
	border-bottom : 8px solid #23a8ec;
}

.social-buttons .follow-content {
    padding: 0px 20px;
	height : 18px;
}

@media (min-width:992px) and (max-width:1200px){

	.logo img {
		width : 225px;
	}
	
	.menu > li > a {
		font-size : 13px;
		font-weight : 700;
		padding : 30px 10px;
	}
	
	.menu > li > a:hover {
		color : #fff;
		background-color : #333;
		padding : 30px 10px;
	}
}

@media (min-width:768px) and (max-width:991px){


	.logo img {
		width : 195px;
	}

	.menu > li > a {
		font-size : 13px;
		font-weight : 700;
		padding : 35px 8px;
	}
	
	.menu > li > a:hover {
		color : #fff;
		background-color : #1c1c1c;
		padding : 35px 8px;
	}
}



@media (min-width:0px) and (max-width : 767px) {
	.logo img {
		width : 180px;
	}
	
	.judul-header-intro {
		font-weight : 700;
		font-size : 30px;
		color : #fff;
		padding: 80px 0 50px 0;
	}
	
	.menu li {
		float : none;
		display : block;
		background-color: #333;		
	}
	
	.menu > li > a {
		padding : 20px 30px;
	}
	
	.menu > li > a:hover {
		color : #fff;
		padding : 20px 30px;
		border-bottom : 0px;
		background-color : #1c1c1c;
	}
	
	.menu > li > a:focus {
		color : #fff;
		padding : 20px 30px;
		border-bottom : 0px;
		background-color : #1c1c1c;
	}
	
	.menu > li > a:active {
		color : #fff;
		padding : 20px 30px;
		border-bottom : 0px;
		background-color : #1c1c1c;
	}
	.logo {
		padding : 20px 20px;
	}
	
	.header-intro {
		background-color: #fff;
		padding: 80px 0 50px 0;
	}
	.header-intro-deskripsi {
		padding-left : 20px;
	}
	.header-intro-deskripsi .btn-info {
		background-color : #0190da;
		padding : 10px;
		color : #fff;
		font-size : 15px;
		border-bottom : 8px solid #23a8ec;
	}
}