/* MOBILE MEDIA QUERIES Nexus 7 Android landscape */

/* Navigation*/

.mobile-menu {
  display:block;
  width:100%;
background: white/*e0b88f/*c99393/*e5d1a4/*dcc591/*EFD3A3*/;
line-height: 1em;
font-weight: 300;
width:100%;
text-align:center;
	position: relative;
  margin:0 auto;
}
/*Strip the ul of padding and list styling*/
.mobile-menu ul {
	list-style-type:none;
  margin: 0 auto;
  padding-left:0;
  text-align:center;
  width:100%;
  position: absolute;
  background: white;
}

/*Create a horizontal list with spacing*/
.mobile-menu li {
	display:inline-block;
	/*float: left;
	margin-right: 1px;*/
}

/*Style for menu links*/
.mobile-menu li a {
	display:block;
	min-width:190px;
	text-align: center;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 500;
	color: #08132F;
  /* text-transform:uppercase; */
	background: white;
	text-decoration: none;
  margin-left:-5px;
  padding: 10px 0;  
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}

/*Hover state for top level links*/
.mobile-menu li:hover a {
	color: #08132F;
  background-color:white;
  text-decoration: underline green 3px;
}

.active-now {
  text-decoration: underline green 3px;
}
/*todo to show active page */


/*Style for dropdown links*/
.mobile-menu li:hover ul a {
	background: white;
	/* color: #2f3036; */
	height: 40px;
	line-height: 40px;

}

/*Hover state for dropdown links*/
.mobile-menu li:hover .mobile-menu ul a:hover {
	color: white;
}

/*Hide dropdown links until they are needed*/
.mobile-menu li ul {
	display: none;
}

/*Make dropdown links vertical*/
.mobile-menu li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
.mobile-menu li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}


/*Style 'show menu' label button and hide it by default*/
.mobile-menu .show-menu {
	text-decoration: none;
	color: #08132F;
	background: white;
	text-align: center;
	padding: 10px 15px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	display: none;
  cursor: pointer;
  text-transform: uppercase;
}

.mobile-menu .show-menu span{
   padding-left: 25px;
}

/*Hide checkbox*/
.mobile-menu input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
.mobile-menu input[type=checkbox]:checked ~ #menu{
    display: block;
}

/*Responsive Styles*/

@media screen and (max-width : 900px){
  .mobile-menu .lines {
    border-bottom: 15px double #08132F; 
    border-top: 5px solid #08132F; 
    content:"";
    height: 25px; 
    width:20px;
    padding-right:15px;
  float: right;
}

	/*Make dropdown links appear inline*/
	.mobile-menu ul {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
	.mobile-menu li {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
	.mobile-menu ul li, .mobile-menu li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
	.mobile-menu .show-menu {
		display:block;
	}
  /* 6 boxes */
.box-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 1rem;
}
}



@media (width <=966px) {
  
  /*masthead */
  .masthead {
    display:grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    gap: 1rem;
  }
  .logo {
    padding: 1rem;
    text-align: center;

  }
  .contact {
    padding: 1rem;
    background-color: white;
    text-align: right;
  }
 /*navigation */
 .navigation {
    background-color: white;
 }

 .head-image {
    width: 100%;
    margin-top: 10px;
    /*todo padding to clear menu on large screen */
 }


 /* .head-image {
    width: 100%;
    padding-top: 0;
 } */

 .full {
    width: 100%;
    padding: 1rem;
    text-align: center;
 }

/* 6 boxes */
.box-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 1rem;
}


/* four boxes */
.box-four-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
}


/* three box wrapper */
.three-box-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    margin-top: 2rem;
}


/*fift-fifty section */
.fifty {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
}


/* footer */
.footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 2rem;
    background-color: hsl(218, 98%, 17%);
    color: white;
}

/*bottom page link */
.bottom-link {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    color: white;
    background-color: hsl(218, 98%, 17%);
}
.link-left {
    padding: 1rem;
    text-align: center;
}
.link-right {
    padding: 1rem;
    text-align: center;
}

}


/* MOBILE MEDIA QUERIES iPad portrait */

@media (width <=700px) {
  .masthead {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
  }
  .logo {
    padding: 1rem;
    text-align: center;
    background-color: white;
  }
  .contact {
    padding: 1rem;
    background-color: white;
    text-align: center;
  }
 /*navigation */
 .navigation {
    background-color: white
 }

 .head-image {
    width: 100%;
 }

 .full {
    width: 100%;
    padding: 1rem;
    text-align: center;
 }

/* 6 boxes */
.box-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
}


/* four boxes */
.box-four-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
}


/* three box wrapper */
.three-box-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    margin-top: 2rem;
}


/*fift-fifty section */
.fifty {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
}


/* footer */
.footer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 2rem;
    background-color: hsl(218, 98%, 17%);
    color: white;
}

/*bottom page link */
.bottom-link {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    color: white;
    background-color: hsl(218, 98%, 17%);
}
.link-left {
    padding: 1rem;
    text-align: center;
}
.link-right {
    padding: 1rem;
    text-align: center;
}

}
  
/* back to top */

	.cd-top {
	  display: inline-block;
	  height: 40px;
	  width: 40px;
	  position: fixed;
	  bottom: 40px;
	  right: 10px;
	  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	  /* image replacement properties */
	  overflow: hidden;
	  text-indent: 100%;
	  white-space: nowrap;
	  background: #31436A url("../images/cd-top-arrow.svg") no-repeat center 50%;
	  visibility: hidden;
	  opacity: 0;
	  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
	  -moz-transition: opacity .3s 0s, visibility 0s .3s;
	  transition: opacity .3s 0s, visibility 0s .3s;
	}

	.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
	  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
	  -moz-transition: opacity .3s 0s, visibility 0s 0s;
	  transition: opacity .3s 0s, visibility 0s 0s;
	}
	.cd-top.cd-is-visible {
	  /* the button becomes visible */
	  visibility: visible;
	  opacity: 1;
	}
	.cd-top.cd-fade-out {
	  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
	  opacity: .5;
	}
	.no-touch .cd-top:hover {
	  background-color: #F29E92;
	  opacity: 1;
	}
	@media only screen and (min-width: 768px) {
	  .cd-top {
		right: 20px;
		bottom: 20px;
	  }
	}
	@media only screen and (min-width: 1024px) {
	  .cd-top {
		height: 60px;
		width: 60px;
		right: 30px;
		bottom: 30px;
	  }
	}