body {
	font-family: 'Roboto';
	color: #5b6064;
	line-height: 1.8em;
	font-size: 15px;
	font-weight: 300
}
h1, h2, h3, h4 {
    font-family: 'Roboto';
	font-weight: 100;
}

p { 
    font-family: 'Roboto';
	font-size: 16px
}

h2 {
	width: 400px;
	font-size: 3.5em;
	line-height: 1.1em;
	color: #555;
	margin: 0;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

@media(max-width:767px){
h2 { width: 100%;
    font-size: 3em;
    }
}

h4 {
	width: 400px;
	font-weight: 300;
    font-size: 1.6em;
	line-height: 1.3em;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	display: block;
	-webkit-margin-before: 1.33em;
	-webkit-margin-after: 1.33em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	color: #5b6064;	
}

@media(max-width:767px){
h4 { width: 100%;
    font-size: 1.6em;
    }
}

p {
	width: 400px;
	font-size: 1.1em;
	line-height: 1.8em;
	display: block;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #5b6064;	
	font-weight: 300;

}

@media(max-width:767px){
p { width: 100%;
    }
}

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

.navbar-default{
    background-color:#FFFFFF;
} 

.navbar-default .navbar-brand,.navbar-default .navbar-text,.navbar-default .navbar-nav>li>a,.navbar-default .navbar-link {
color:#777;
}

.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus {
color:#555;
background-color:#eee;
}

.navbar-default .navbar-toggle,.panel-default {
border-color:#ddd;
}

.navbar-default .navbar-link:hover,a.list-group-item .list-group-item-heading {
color:#333;
}

@media(min-width:768px){
.navbar-collapse {
        overflow: visible !important;
}
}

#logo {	
    width:auto;
	height:50px;
	padding:1px;
	}	
	
@media(max-width:767px){
#logo {	
	padding:8px;
	}
}	
	
#bg{
	background: url("../images/introvideo-bg.png") no-repeat center center;
    background-size: cover;
    }
	
#masjid{
	background: url("../images/masjid.png") no-repeat center center;
	padding-bottom: 45%;
	background-size: contain;
	margin: 50 auto;
    }

@media(max-width:767px){
#masjid{
	padding-bottom: 100%;
    }
}	
		
	
.jumbotron h1{
	/*font-weight:200;*/
	font-size:4.5em;
	color:#fff;
	text-shadow:1px 1px 1px rgba(0,0,0,0.5);
	}
	

@media(max-width:767px){
.jumbotron h1{
	font-size:1.8em;
	}
}
	
.jumbotron h2{
	font-size:1.8em;
	color:#fff;
	text-shadow:1px 1px 1px rgba(0,0,0,0.5);
	}	
	
@media(max-width:767px){
.jumbotron h2{
	font-size:1em;
	}	
}


.fadein,
.fadeout {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
}

.fadein.ng-hide-remove,
.fadeout.ng-hide-add.ng-hide-add-active {
  opacity: 0;
  display: block !important;
}

.fadeout.ng-hide-add,
.fadein.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
  display: block !important;
}
	

div.map_container
{   position:relative;
    height:700px;
	top:0px;
	left:0px;
	margin-top:80px;
}

div.map_container > div.pano {	
	width: 100%;
	min-width:50%; 
	height: 450px;
}

div.map_container > div.map_details {
	position:absolute;
	text-align:right;
	bottom:10%;
	left:10%;
	right:50%; 
	height: 200px;
	background: url("../images/singampathu_gps.png") no-repeat top left;
	background-size:10%;
	}
	
div.map_container > div.map_canvas {
	position:absolute;
	bottom:10%;
	left:50%;
	right:10%; 
	height: 150px;
	}