dgfh.css

@charset "utf-8";
/* CSS Document */
* {
    box-sizing: border-box;
}
.hide {
    display:none;
}
.row:after {
    content: "";
    clear: both;
    margin:auto;
    display: block;
}
/* For mobile phones: */
[class*="col-"] {
    float: left;
    padding: 15px;
	width: 100%;
}
/* For tablets: */
@media only screen and (min-width: 720px) {
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
/* For desktop: */
@media only screen and (min-width: 1200px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
	.samurai {display: block;}
}
body{
	margin:auto;
    font-family:"Georgia",serif;
    font-size:1.2em;
    background-color:rgba(27,91,126,1.00);
}
header{
    position:relative;
	width:100%;
	height:1080px;
}
.d-header{
    position:relative;
    display:none;
    height:2680px;
}
img{
    width:100%;
    height:auto;
}
a{
    text-decoration:none;
    color:rgba(255,255,255,1.00);
}
h1{
    color:rgba(255,242,153,1.00);
    text-shadow: 3px 3px 10px rgba(0,0,0,1.00);
}
.aboveband{
    height:100px;
}
.main-nav{
    position:absolute;
    top:0px;
    width:100%;
	text-align:right;
	z-index: 200;
}
.d-logo{
    width:100px;
	height:100px;
	background-color:rgba(255,0,4,1.00);
}
.core-nav{
}
.menu-item{
    float:right;
    width:240px;
    margin:0px 10px;
    text-align: center;
    background-color:rgba(27,91,126,0.60);
}
.menu-item:hover{
    background-color:rgba(255,242,153,0.40);
    color:rgba(0,0,0,1.00);
    box-shadow: 0px 0px 15px 0px rgba(255,242,153,1.00);
}
.above-ht{
    height:20px;
}
.header-t-row{
    clear:both;
}
.header-text{
    padding:10px;
    text-align:center;
    color:rgba(255,255,255,1.00);
    z-offset:200;
    background-color:rgba(27,91,126,0.60);
}
.book{
    height:500px;
    background-color:rgba(255,0,4,1.00);
}
.booktext p{
    text-align:left;
}
/*mobile navigation*/
.m-header{
    position: relative;
    width: 100%;
    background-color:rgba(160,221,136,0.60);
    padding:20px;
}
/* Logo */
.logo{
    width:100px;
    height:100px;
	display: inline-block;
    background-color:rgba(255,0,4,1.00);
	margin:10px;
}
/* Nav menu */
.nav{
    display:none;
}
.m-item{
    margin:10px;
    height:auto;
    background-color:rgba(255,255,255,1.00);
    padding:10px;
    
}
.m-item a{
    text-decoration:none;
}
.m-item h1{
    display: block;
    padding: 30px;
    color: rgba(0,0,0,1.00);
	margin:20px 20px;
    text-align:center;
	text-decoration:none;
}
.sub-menu{
    display:none;
    margin:10px;
}
.sub-menu a{
    font-size:1.2em;
    padding: 30px;
    background-color: rgba(198,234,183,1.00);
	margin:20px 20px;
    color:rgba(0,0,0,1.00);
    text-align:center;
	text-decoration:none;
}
.m-header{
    position: relative;
    width: 100%;
    background-color:rgba(160,221,136,0.60);
    padding:20px;
    height:3060px;
}
.tab{
    display: none;
}
.desk{
    display:none;
}
/* Style the navigation menu */
.topnav {
    background-color: rgba(51,51,51,1.00);
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}
.topnav a h3{
    margin:0px;
}
/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #04AA6D;
  color: white;
} /* Style span tag */
.m-jumbo{
    position: relative;
}
.m-jumbo img{
    clear:both;
    width:100%;
    height:auto;
}
.m-jumbo-text{
    position:absolute;
    top:100px;
    left:50px;
    padding:10px;
    color: rgba(255,255,255,1.00);
    background-color:rgba(160,221,136,0.60);
}
@media only screen and (min-width:720px){
    .d-header{
        display:block;
        height:2000px;
    }
    .menu-item{
        font-size:0.8em;
        width:200px;
    }
    .d-logo{
        display:block;
    }
    .m-header{
        display:none;
    }
    .m-jumbo{
        display:none;
    }
    .tab{
        display:block;
    }
    
}
@media only screen and (min-width:870px){
   
    .menu-item{
        font-size:1.2em;
        width:280px;
    }
}
@media only screen and (min-width:1200px){
    .tab{
        display:none;
    }
    .desk{
        display:block;
    }
}
/*end navigation*/
.blue-overlap{
    position:absolute;
    top:1400px;
    left:0px;
    width:100%;
    height:3000px;
    z-index: 1000px;
    background-color:rgba(255,0,0,1.00);
}
@media only screen and (min-width:870px){
    .blue-overlap{
        top:1300px;
    }
}
@media only screen and (min-width:1200px){
    .blue-overlap{
        top:900px;
    }
}