/*general styles */
.green{color:#5b710c;}
.blue{color:#3863AB}
.icon{width:150px;float:left;text-align:center;padding:0px 20px;font-size:14px;}
.icon a:after{content: ""!important;}
.front{margin-bottom:0px;}
h2{clear:both;text-align:center;padding-top:30px;}


/*breadcrumbs*/
.breadcrumb {
	/*centering*/
	display: inline-block;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	border-radius: 5px;
	/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
	counter-reset: flag; 
	margin-top:10px;
	margin-bottom:30px;
}

.breadcrumb a {
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font-size: 12px;
	line-height: 36px;
	color: white;
	/*need more margin on the left of links to accomodate the numbers*/
	padding: 0 10px 0 10px;
	background: #666;
	background: linear-gradient(#666, #333);
	position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
	border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.breadcrumb a:first-child:before {
	left: 14px;
}
.breadcrumb a:last-child {
	border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
	padding-right: 10px;
}

/*hover/active styles*/
.breadcrumb a.active, .breadcrumb a:hover{
	background: #333;
	background: linear-gradient(#333, #000);
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {
	background: #333;
	background: linear-gradient(135deg, #333, #000);
}
.breadcrumb a:hover, .breadcrumb a:hover:after,.breadcrumb a:focus, .breadcrumb a:hover:focus {
	text-decoration: underline;
}

/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
	content: none;
}



/*front page styles*/
#packaged{margin-left:50px;}
#info{padding-bottom:50px;}



/*buttons on front page */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown button {
	border: none;
	background: #3863AB;
	color: #FFFFFF;
	padding: 10px;
	/*font-size: 18px;*/
	border-radius: 5px;
	position: relative;
	box-sizing: border-box;
	transition: all 500ms ease; 
	height:65px;
	margin:0 20px;
	width:170px;
}
@keyframes bounce {
	0%, 20%, 60%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}

	80% {
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}
}
.dropdown button:hover {
	animation: bounce 1s;
}

.dropdown button a{
	color:white;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 300px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown a:hover{
	/*color:white;*/
	text-decoration:underline;
}


/* off screen sidemenu and butrton styling*/
/* The side navigation menu */
.offscreennav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #605D5D;
	color:white;
	overflow-y:hidden;
    overflow-x: hidden; /* Disable horizontal scroll */
    /*padding-top: 60px;*/ /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
	font-family: arial;
}
.offscreennav h3{
    margin:20px 0px 0px 25px;
	color:white;
	text-transform: uppercase;
	font-weight:bold;
}
.offscreennav a {
    padding: 6px 8px 6px 8px;
    text-decoration: none;
    font-size: 14px;
    color: white;
    display: block;
    transition: 0.3s;
}

.offscreennav a:hover, .offscreennav a:focus{
    text-decoration: underline;		
}

.offscreennav ul{
    line-height: 1;		
	list-style: none;
}

ul.last{
	margin-bottom:150px;
}

.offscreennav .closebtn {
    position: absolute;
    top: 0;
    right: 15px;
    font-size: 25px;
    margin-left: 15px;
}

#sideButton{
	font-family: arial;
	padding:10px 40px;
	background-color:#3863AB;
	top:50%;
	left:-40px;
	color:white;
	transform: rotate(-90deg);
	position:absolute;
}
#sideButton button {
	border: none;
	background: #3863AB;
	color: #FFFFFF;
	padding: 10px;
	/*font-size: 18px;*/
	border-radius: 5px;
	position: relative;
	box-sizing: border-box;
}

#pageWrapper, #sideButton {
    transition: margin-left .5s;
}
	
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .offscreennav {padding-top: 15px;}
    .offscreennav a {font-size: 18px;}
}