@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');

@font-face {font-family: "Stymie";
    src: url("fonts/Stymie Medium.eot");
    src: url("fonts/Stymie Medium.eot?#iefix") format("embedded-opentype"),
    url("fonts/Stymie Medium.woff2") format("woff2"),
    url("fonts/Stymie Medium.woff") format("woff"),
    url("fonts/Stymie Medium.ttf") format("truetype"),
    url("fonts/Stymie Medium.svg#Stymie Medium") format("svg");
}

/*Stymie Medium*/
.navbar-default .navbar-nav > li > a,
#menu h4, #footer h1 {
    font-family: Stymie;
}


body, #main{
	background: url(images/bg.jpg) no-repeat;
	background-position: center;}

.page-title{
	color: #7b0000; /* Section H1 Color */}	
	
.active, .navbar-default .navbar-nav > li > a:hover, navbar-nav > li > a:focus{
	color: transparent !important; /* Nav active Color */}
	
#menu, #deliver, #contact, #facebook_like{
	background: #EAEAEA; /* Section BG Color */}	
	
.navbar-default .navbar-nav > li > a{
	color:#ccc;
    position: relative;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.navbar-default .navbar-nav > li > a:before {
    position: absolute;
    content: '';
    font-size: 24px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    top: 0; 
    color: #F8F082;
    margin: 0 auto;
    opacity: 0;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.navbar-default .navbar-nav > li#oo-link > a:before {
    content: 'Order Online'
}


.navbar-default .navbar-nav > li#menu-link > a:before {
    content: 'Menu'
}


.navbar-default .navbar-nav > li#about-link > a:before {
    content: 'About Us'
}


.navbar-default .navbar-nav > li#location-link > a:before {
    content: 'Location'
}


.navbar-default .navbar-nav > li#contact-link > a:before {
    content: 'Contact'
}




.navbar-default .navbar-nav > li > a:hover:before {
    opacity: 1;
    width: 100%;
    top: 18px;


} 


.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
}		
	
.navbar.navbar-default.navbar-fixed-top, footer, .navbar-collapse{
	background: #2A384C; /* Nav and Footer BG Color */
	color:#000; /* Nav and Footer font color */}	

.navbar-default{
	border-bottom: 0px #fff solid; /* Nav Border Color */}
	
#nav-logo{
	width: 200px;
	padding-top: 10px;

}		

	
/* Main Section */
#main {
    background: rgba(0, 0, 0, 0.35);
}


#main button {
    background: #2A384C !important;
    color: #fff;
    font-weight: bold;
    border: 8px solid transparent;
    border-radius: 80px;
   font-family: 'Roboto Slab', serif;
   
}

#main button:hover {
    background: #F8F082 !important;
    color: #2A384C;
    letter-spacing: 8px;
    border-color: #2A384C;
}


	
#main h2{
	color:#fff; /* Tagline Color */
	font-weight: 600 !important;
	 
	}
	
.welcome #contact-details {
	 font-family: 'Roboto Slab', serif;
	 font-weight: 700;
}	


	
/* Main Section */
#menu {
	background: url(images/menu-bg.jpg);
}

#menu .page-title {
	text-align: center;
	color: #fff !important;
	background: #2A384C;
	width: 30%;
	left: 35%;
	padding: 10px 5px;
	margin-bottom: 40px;
		border-radius: 10px;


}

.panel-default {
	background: #2A384C;
	border-radius: 10px;
}

.panel-collapse{
	position: relative;
}

.panel-default {
	margin-top: 40px;
}


#menu .page-title {
	color: #fff;
}



#menu h2{
	color: #fff;
	text-transform: uppercase;
	font-family: 'Roboto Slab', serif;
	font-weight: 900;
	text-align: center;
	padding-top: 20px;
	 
}

.menu-item h4{
	color: #F8F082;
	font-weight: 600;

	 
}

.menu-border{
	border-color: transparent;
}

.menu-prices{
	color: #fff;
	font-size: 15px;
	font-family: 'Roboto Slab', serif;
}

.menu-item p{
	color: #fff;
	   font-family: 'Roboto Slab', serif;
}

.menu_title_footer, .menu_title_header{
	color: #fff;
	font-family: 'Roboto Slab', serif;
}

hr{
	border-top: 0px dotted #fff !important;
}	

#about{
	background-color: #2A384C;F8F082
}

#about .page-title {
	color: #F8F082;
	text-align: center;
}

.about {
  color: #fff;
  font-family: 'Roboto Slab', serif;
  text-align: center;
  margin-top: 40px;
}

/* Deliver Section */
#deliver {
	background: #F8F082;
	color: #2A384C;
}	
#deliver h4{
	color: #2A384C; /* Suburb Color */
	 
}

#map #contact-details {
	color: #2A384C;
	font-family: 'Roboto Slab', serif;
	font-weight: 700;
}

/* Contact Section */
#contact {
	background: #2A384C;
}

#contact .page-title {
	color: #F8F082;
}

#contact hr {
	border-top: 2px dotted #fff !important;
}

#contact button{
	background: #F8F082;
    border-color: transparent;
    color: #2A384C;
    border-radius: 0px;
    box-shadow: 0px 0px 3px 0 #fff !important;
    font-weight: 900;
}

	
#contact label{
	color: #F8F082;
	 font-family: 'Roboto Slab', serif;
	 font-weight: 700;
	 
}
	
#openinghours .day,	
#openinghours th{
	color: #F8F082; /* Day Color */
	   font-family: 'Roboto Slab', serif;
	   	 font-weight: 700;
	 }	
	
#footer h1{
	color: #fff !important;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#footer p {
	color: #fff;
}

#openinghours td, #contact-details{
	color:#fff;
	font-family: 'Roboto Slab', serif;
}

.cd-top, .cd-top2{background-color:#2A384C;border-radius: 5px;}


#facebook_like {
	background: rgb(42,56,76, 0.6);
}

#facebook_like h1 {
	color: #F8F082;
}



/*Desktop*/
@media (min-width: 768px) {
    .navbar-default .navbar-nav > li > a {
        font-size: 24px;
    }

    .welcome #contact-details {
    	font-size: 23px;
    }

    #menu h2 {
    	font-size: 36px;
    }

    .menu-item h4 {
    	font-size: 20px;
    }
}


/*Mobile*/

@media (max-width: 480px){
	.navbar.navbar-default.navbar-fixed-top, footer, .navbar-collapse {
		background: transparent;
	}

	.navbar-default .navbar-nav > li > a {
		color: #fff;
	}

	.collapsed {
		background: #2A384C !important;
	}

    #nav-logo {
      width: 100px !important;

    }

    .navbar-default .navbar-collapse ul {
    	background: #2A384C !important;
    }

    .welcome {
    	top: 60%;
    }

    .navbar-default .navbar-toggle:hover {
    	background: #2A384C;
    }

    #main button {
    	border-radius: 40px;
    }

    .bounce {
    	bottom: -20px;
    }

    #menu .page-title {
    	width: 80%;
    	left: 10%;
    }

    footer {
    	background: #F8F082;
    }

    #footer h1, #footer p {
    	color: #2A384C !important;
    }
}