/* Main Menu CSS */
@media only screen and (min-width: 1000px) {

header {
width: 100%;
height: 70px;
position: relative;
margin: 0 auto;
overflow: hidden;
display: block;
background: #003441;
}

.menu {
width: 1000px;
height: 70px;
position: relative;
margin: 0 auto;
}

.menu-container {
width: 780px;
height: 70px;
float: right;
}

.logo {
width: 220px;
height: 70px;
float: left;
}

.logo a {
width: 220px;
height: 70px;
position: relative;
display: block;
text-decoration: none;
border: none;
}

.logo a img {
width: 180px;
height: 40px;
margin: 11px 0px 0px 0px;
display: block;
border: none;
text-decoration: none;
}

.menu-item {
width: 130px;
height: 70px;
float: left;	
}

.menu-item a {
width: 130px;
height: 70px;
position: relative;
padding: 20px 0px 0px 20px;
font-family: "Gill Sans Light";
font-size: 13px;
color: #FFFFFF;
font-weight: normal;
letter-spacing: 1px;
text-align: left;
line-height: 16px;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
display: block;
transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-webkit-transition: background 0.3s ease-in-out;
}

.menu-item a:hover {
background: #CA005D;
}

}

@media only screen and (max-width: 999px) {
	
.menu {
display: none;
}

header {
width: 100%;
height: 50px;
position: relative;
margin: 0 auto;
overflow: hidden;
display: block;
background: #003441;
}

.mobile-menu {
width: 100%;
height: 50px;
position: relative;
margin: 0 auto;
}

.mobile-nav-container {
width: 100%;
height: 50px;
position: relative;
margin: 0 auto;
}

.menu-button {
width: 50px;
height: 50px;
float: right;
cursor: pointer;
}

.white-button {
background: url('../imgs/menu-button-white.png');
}

.grey-button {
background: url('../imgs/menu-button-grey.png');
}

.menu-container {
width: 100%;
height: 200px;
position: relative;
background: #2E2E2E url('../imgs/logo-background.png');
background-position: bottom right;
background-repeat: no-repeat;
}

.logo {
width: 200px;
height: 50px;
float: left;
}

.logo a {
width: 200px;
height: 50px;
position: relative;
display: block;
text-decoration: none;
border: none;
}

.logo a img {
width: 140px;
height: 30px;
margin: 7px 0px 10px 15px;
display: block;
border: none;
text-decoration: none;
}

.menu-item {
width: 290px;
height: 30px;
position: relative;
padding: 0px 0px 0px 10px;
margin: 0;
}

.menu-item:first-child {
margin-top: 10px;
}

.menu-item:last-child {
margin-bottom: 10px;
}

.menu-item a {
width: 290px;
height: 30px;
position: relative;
padding: 0;
margin: 0;
font-family: "Gill Sans Light";
font-size: 11px;
color: #FFFFFF;
font-weight: normal;
letter-spacing: 1px;
text-align: left;
line-height: 30px;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
display: block;
}

.menu-item a:hover {
color: #A90061;
}

}

/* Footer CSS */
@media only screen and (min-width: 1000px) {

footer {
width: 100%;
position: relative;
background: #FFFFFF;
margin: 50px auto 0px auto;
}

.footer-container {
width: 1000px;
position: relative;
margin: 0 auto;
}

.tf-item-container {
width: 220px;
height: auto;
float: left;
margin-top: 40px;
margin-right: 40px;
}

.tf-item-container:last-child {
margin-right: 0;
}

.tf-item-container h1 {
width: 220px;
height: 40px;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
font-family: "adobe-caslon-pro";
font-size: 18px;
color: #404040;
font-weight: 400;
font-style: italic;
text-align: left;
line-height: 40px;
}

.tf-item-container a {
width: 220px;
height: 20px;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
font-family: "Open Sans Light";
font-size: 14px;
color: #404040;
font-weight: normal;
text-align: left;
line-height: 1.5;
text-decoration: none;
cursor: pointer;
transition: color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out;
-webkit-transition: color 0.3s ease-in-out;
}

.tf-item-container a:hover {
color: #E60576;
}

.bf-item {
width: 220px;
height: 40px;
float: left;
margin-top: 20px;
margin-right: 40px;
margin-bottom: 40px;
}

.bf-item:last-child {
margin-right: 0;
}

.bf-item a {
width: 220px;
height: 40px;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
font-family: "Open Sans Light";
font-size: 14px;
color: #404040;
font-weight: normal;
text-align: left;
line-height: 40px;
text-decoration: none;
cursor: pointer;
transition: color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out;
-webkit-transition: color 0.3s ease-in-out;
}

.bf-item a:hover {
color: #A90061;
}

.social-container {
width: 220px;
height: 40px;
float: left;
margin-top: 20px;
margin-bottom: 40px;
}

.social-container a {
max-width: 35px;
height: 30px;
float: left;
margin-right: 10px;
display: block;
cursor: pointer;
border: none;
}

.social-container a img {
width: 30px;
height: 30px;
position: relative;
border: none;
overflow: hidden;
display: block;
}

.social-container a img.linkedin {
width: 35px;
height: 30px;
position: relative;
border: none;
overflow: hidden;
display: block;
}

}

@media only screen and (min-width: 700px) and (max-width: 999px) {

footer {
width: 100%;
position: relative;
background: #FFFFFF;
margin: 40px auto 0px auto;
}

.footer-container {
width: 700px;
position: relative;
margin: 0 auto;
}

.tf-item-container {
width: 250px;
height: auto;
float: left;
margin: 30px 50px 0px 50px;
}

.tf-item-container h1 {
width: 220px;
height: 40px;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
font-family: "adobe-caslon-pro";
font-size: 18px;
color: #404040;
font-weight: 400;
font-style: italic;
text-align: left;
line-height: 40px;
}

.tf-item-container a {
width: 220px;
height: 20px;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
font-family: "Open Sans Light";
font-size: 14px;
color: #404040;
font-weight: normal;
text-align: left;
line-height: 1.5;
text-decoration: none;
cursor: pointer;
transition: color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out;
-webkit-transition: color 0.3s ease-in-out;
}

.tf-item-container a:hover {
color: #A90061;
}

.bf-item {
width: 250px;
height: 40px;
float: left;
margin: 20px 50px 0px 50px;
}

.bf-item:nth-child(3) {
display: none;
}

.bf-item a {
width: 220px;
height: 40px;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
font-family: "Open Sans Light";
font-size: 14px;
color: #404040;
font-weight: normal;
text-align: left;
line-height: 40px;
text-decoration: none;
cursor: pointer;
transition: color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out;
-webkit-transition: color 0.3s ease-in-out;
}

.bf-item a:hover {
color: #E60576;
}

.social-container {
width: 250px;
height: 40px;
float: left;
margin: 20px 50px 40px 50px;
}

.social-container a {
max-width: 35px;
height: 30px;
float: left;
margin-right: 10px;
display: block;
cursor: pointer;
border: none;
}

.social-container a img {
width: 30px;
height: 30px;
position: relative;
border: none;
overflow: hidden;
display: block;
}

.social-container a img.linkedin {
width: 35px;
height: 30px;
position: relative;
border: none;
overflow: hidden;
display: block;
}
	
}

@media only screen and (min-width: 500px) and (max-width: 699px) {

footer {
width: 100%;
position: relative;
background: #FFFFFF;
margin: 120px auto 0px auto;
}

.footer-container {
width: 500px;
position: relative;
margin: 0 auto;
}

.tf-item-container {
width: 240px;
height: auto;
float: left;
margin: 30px 5px 0px 5px;
}

.tf-item-container h1 {
width: 220px;
height: 40px;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
font-family: "adobe-caslon-pro";
font-size: 18px;
color: #404040;
font-weight: 400;
font-style: italic;
text-align: left;
line-height: 40px;
}

.tf-item-container a {
width: 220px;
height: 20px;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
font-family: "Open Sans Light";
font-size: 14px;
color: #404040;
font-weight: normal;
text-align: left;
line-height: 1.5;
text-decoration: none;
cursor: pointer;
transition: color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out;
-webkit-transition: color 0.3s ease-in-out;
}

.tf-item-container a:hover {
color: #A90061;
}

.bf-item {
width: 240px;
height: 40px;
float: left;
margin: 20px 5px 0px 5px;
}

.bf-item:nth-child(3) {
display: none;
}

.bf-item a {
width: 220px;
height: 40px;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
font-family: "Open Sans Light";
font-size: 14px;
color: #404040;
font-weight: normal;
text-align: left;
line-height: 40px;
text-decoration: none;
cursor: pointer;
transition: color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out;
-webkit-transition: color 0.3s ease-in-out;
}

.bf-item a:hover {
color: #E60576;
}

.social-container {
width: 240px;
height: 40px;
float: left;
margin: 20px 5px 40px 5px;
}

.social-container a {
max-width: 35px;
height: 30px;
float: left;
margin-right: 10px;
display: block;
cursor: pointer;
border: none;
}

.social-container a img {
width: 30px;
height: 30px;
position: relative;
border: none;
overflow: hidden;
display: block;
}

.social-container a img.linkedin {
width: 35px;
height: 30px;
position: relative;
border: none;
overflow: hidden;
display: block;
}
	
}

@media only screen and (max-width: 499px) {

footer {
width: 100%;
position: relative;
background: #FFFFFF;
margin: 60px auto 0px auto;
}

.footer-container {
width: 300px;
position: relative;
margin: 0 auto;
}

.tf-item-container {
width: 280px;
float: left;
margin: 30px 10px 10px 10px;
}

.tf-item-container:nth-child(2) {
/* display: none; */
}

.tf-item-container h1 {
width: 220px;
height: 40px;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
font-family: "adobe-caslon-pro";
font-size: 18px;
color: #404040;
font-weight: 400;
font-style: italic;
text-align: left;
line-height: 40px;
}

.tf-item-container a {
width: 220px;
height: 20px;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
font-family: "Open Sans Light";
font-size: 14px;
color: #404040;
font-weight: normal;
text-align: left;
line-height: 1.5;
text-decoration: none;
cursor: pointer;
transition: color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out;
-webkit-transition: color 0.3s ease-in-out;
}

.tf-item-container a:hover {
color: #A90061;
}

.bf-item {
width: 240px;
height: 40px;
float: left;
margin: 20px 5px 0px 5px;
}

.bf-item:nth-child(3) {
/* display: none; */
}

.bf-item a {
width: 220px;
height: 40px;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
font-family: "Open Sans Light";
font-size: 14px;
color: #404040;
font-weight: normal;
text-align: left;
line-height: 40px;
text-decoration: none;
cursor: pointer;
transition: color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out;
-webkit-transition: color 0.3s ease-in-out;
}

.bf-item a:hover {
color: #A90061;
}

.social-container {
width: 240px;
height: 40px;
float: left;
margin: 20px 5px 40px 5px;
}

.social-container a {
max-width: 35px;
height: 30px;
float: left;
margin-right: 10px;
display: block;
cursor: pointer;
border: none;
}

.social-container a img {
width: 30px;
height: 30px;
position: relative;
border: none;
overflow: hidden;
display: block;
}

.social-container a img.linkedin {
width: 35px;
height: 30px;
position: relative;
border: none;
overflow: hidden;
display: block;
}
	
}

@media only screen and (min-width: 1000px) {

.breadcrumbs {
width: 1000px;
height: 30px;
margin: 35px 0px 0px 0px;
padding: 0;
position: relative;
overflow: hidden;
display: block;
}

.crumb {
height: 30px;
float: left;
margin: 0 auto;
overflow: hidden;
display: block;
font-family: "Open Sans";
}

.crumb-separator {
width: 20px;
height: 30px;
float: left;
margin: 0px 5px 0px 5px;
font-family: "adobe-caslon-pro";
font-size: 16px;
color: #E60576;
line-height: 36px;
font-weight: 400;
text-align: center;
overflow: hidden;
display: block;
}

.crumb a {
height: 30px;
float: left;
padding: 0px 10px 0px 10px;
margin: 0;
overflow: hidden;
display: block;
font-size: 16px;
line-height: 30px;
color: #404040;
font-weight: normal;
text-align: left;
cursor: pointer;
text-decoration: none;
}

.crumb a:hover {
text-decoration: underline;
}

}

@media only screen and (max-width: 999px) {

.breadcrumbs {
width: 100%;
margin: 20px 0px 20px 0px;
padding: 0;
position: relative;
overflow: hidden;
display: block;
}

.crumb {
height: 20px;
float: left;
margin: 0 auto;
overflow: hidden;
display: block;
font-family: "Open Sans";
}

.crumb-separator {
width: 20px;
height: 20px;
float: left;
margin: 0px 3px 0px 3px;
font-family: "adobe-caslon-pro";
font-size: 16px;
color: #E60576;
line-height: 26px;
font-weight: 400;
text-align: center;
overflow: hidden;
display: block;
}

.crumb a {
height: 30px;
float: left;
padding: 0px 5px 0px 5px;
margin: 0;
overflow: hidden;
display: block;
font-size: 13px;
line-height: 20px;
color: #404040;
font-weight: normal;
text-align: left;
cursor: pointer;
text-decoration: none;
}

.crumb a:hover {
text-decoration: underline;
}

}