/*custom fonts*/


@font-face {
    font-family: 'headerfont';
    src: url('../fonts/Avara.otf');
}

@font-face {
    font-family: 'navfont';
    src: url('../fonts/CaviarDreams-webfont.woff');
}

@font-face {
    font-family: 'h2font';
    src: url('../fonts/Avara.otf');
}

@font-face {
    font-family: 'afont';
    src: url('../fonts/CaviarDreams-webfont.woff');
}



/*styling for main HTML tag sections. Organized in the order they appear on the HTML page (header to footer)*/
body {
    /*background-color: #542a12;
    background-attachment: fixed;*/
    font-family: Verdana, Tahoma, Geneva, sans-serif;
    background-color: #747a5d;
}





header {
    width: 99.7%;
    padding-left: 5px;
    height: 200px;
    padding-top: 5px;
    background-size: 110px 110px;
    background-image: radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%), radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%);
    /*background-color: #C8D3A7;*/
    background-color: #52564d;
    background-position: 0 0, 55px 55px;
}

h1 {
    font-family: headerfont;
    font-size: 4em;
    /*color: #617eb9;*/
    color: #000000;
    -webkit-text-stroke: 2px #4a4a4a;
    padding-left: 5px;
    text-align: center;
}

header h2 {
    font-family: headerfont;
    
}

nav {
    position: sticky;
    top: 0px;
    border-bottom: solid 2px #9e9e9e;
    background-color: #000000;
    margin-bottom: 40px;
    text-align: center;
    padding-bottom: 3px;
    font-size: 1.2em;
    font-weight: bolder;
    color: #999999;
    z-index: 10;
    font-family: navfont;
}

    nav a {
        font-family: navfont;
        font-weight: bolder;
        padding-left: 3px;
        padding-right: 3px;
        padding-bottom: 4px;
        
        color: #ffffff;
    }

        nav a:hover {
            text-decoration: none;
            color: #c9cfdd;
        }

section {
    border: 1px solid;
   

    width: 100%;
    margin-bottom: 40px;
    vertical-align: middle;
    text-align: center;
    /*background: radial-gradient(#211a17 15%, transparent 16%) 0 0, radial-gradient(#211a17 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;*/
}

[class*="sectionmain"] {
    
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%23798b3c' fill-opacity='0.27' fill-rule='evenodd'/%3E%3C/svg%3E");

}

.sectionmain1 {
    height:400px;
     
}




h2 {
    font-family: h2font;
    font-size: 3em;
    /*-webkit-text-stroke: 2px #401a01;
    -webkit-text-stroke: 2px #cccccc;*/
    
    color: #2d332c;
}

footer {
    background-size: 110px 110px;
    background-image: radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%), radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%);
    background-color: #C8D3A7;
    background-position: 0 0, 55px 55px;
    color:#000000;
    text-align: center;
    border: 1px solid #9e9e9e;
    /*border-bottom: solid 2px #9e9e9e;*/
    border-radius: 10px;
    font-weight: bolder;
}

footer div {
    padding-top: 12px;
    padding-bottom: 12px;
}

/*styling for custom sections (with associated support styles). Grouped by 
    section; alphabetized groups
    h1 {
    color:#fcf6df;
}
*/


/*multiple assign font color*/
header p, .bounded, .button, .overlay, .wrcontain {
    color: #E0EAD7;
    /*color:#b0a196; color: #6d8268; */
}






.sectionmain2, .sectionmain3 {    
    height:550px;
    /*
    background-color: #bab49d;
    background-image:url("../images/bgimg04.png");
    background-repeat:no-repeat;
    background-position:center center;*/
}

/* width */
::-webkit-scrollbar {
    width: 13px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #ffffff;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #5f6c31;
    border-radius: 10px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #a0b74c;
    }

/*styling for grid of play buttons in sectionmain2*/
.colcontain {
    width:80%;
    margin-left:auto;
    margin-right:auto;
}



/*creates the 3 column format*/
[class*="colgrid"] {
    float:left;
    color:#ffffff;
    
    font-family:afont;
    font-size:2em;
    
}

.colgrid {
    width: 32.3%;
    height: 125px;
    font-size: 2.5em;
    -webkit-text-stroke: 2px #52564d;
}

.colgrid2 {
    width: 49.6%;
    height: 125px;
    font-size: 2.5em;
    -webkit-text-stroke: 2px #52564d;
}

.colgrid3 {
    width: 32.3%;
    height: 75px;
    font-size: 1.5em;
    -webkit-text-stroke: 1px #52564d;
}

.colgrid4 {
    width: 32.9%;
    height: 150px;
    font-size: 2.5em;
    -webkit-text-stroke: 2px #52564d;
}

/*applies code to all of the playbg boxes that the share*/
[class*="colbg"] {
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    text-align: center;
    margin-right: 4px;
    margin-bottom: 4px;
    
}
/*
a [class*="colbg"]:hover {
    background-color:#6d8268;
}
    */
a [class*="colbg"] {
    filter: grayscale(50%);
    background-image: url(../images/bg_canttales01rotopacbw.jpg);
}

    [class*="colbg"] p {
        background-color: #d8d8d8;
        
    }



a [class*="colbg"]:hover {
    background-color: #393939;
    filter: invert(100%);
    
}

[class*="colbg"] {
    background-color: #ffffff;
    /*filter: opacity(80%);*/
    background-size: cover;
}


    /*individual button backgrounds*/
    .colbg01 {
        background-image: url("../images/bg01.jpg");
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

.colbg02 {
     
     background-image:url("../images/bg02.jpg");
    
}

.colbg03 {
     
     background-image:url("../images/bg03.jpg");
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
}

.colbg04 {
    background-image: url("../images/bg04.jpg");
    background-position-y: bottom;
    border-top-left-radius: 10px;
}

.colbg05 {
    background-image: url("../images/bg05.jpg");
    background-position-y: bottom;
}

.colbg06 {
    background-image: url("../images/bg06.jpg");
    background-position-y: bottom;
    border-top-right-radius: 10px;
}

.colbg07 {
    background-image: url("../images/bg07.jpg");
    background-position: left top;
    border-bottom-left-radius: 10px;
}

.colbg08 {
    background-image: url("../images/bg08.jpg");
    background-position-y: top;
    border-bottom-right-radius: 10px;
}

.colbg09 {
    background-image:url("../images/bg09.jpg");
    background-position: right bottom;
    border-top-left-radius: 10px;
}

.colbg10 {
    background-image:url("../images/bg10.jpg");
    background-position: left bottom;
    border-top-right-radius: 10px;
}

.colbg11 {
    background-image:url("../images/bg11.jpg");
    background-position: right top;
    border-bottom-left-radius: 10px;
}

.colbg12 {
    background-image:url("../images/bg12.jpg");
    background-position: left top;
    border-bottom-right-radius: 10px;
}

.colbg13 {
    background-image: url("../images/bg13.jpg");
    background-position: right bottom;
    border-top-left-radius: 10px;
}

.colbg14 {
    background-image: url("../images/bg14.jpg");
    background-position: left bottom;
    border-top-right-radius: 10px;
}

.colbg15 {
    background-image: url("../images/bg15.jpg");
    background-position: right top;
    border-bottom-left-radius: 10px;
}

.colbg16 {
    background-image: url("../images/bg16.jpg");
    background-position: left top;
    border-bottom-right-radius: 10px;
}

.colbg17 {
    background-image: url("../images/bg17.jpg");
    background-position: right bottom;
    border-top-left-radius: 10px;
}

.colbg18 {
    background-image: url("../images/bg18.jpg");
    background-position-y: bottom;
}

.colbg19 {
    background-image: url("../images/bg19.jpg");
    background-position: left bottom;
    border-top-right-radius: 10px;
}

.colbg20 {
    background-image: url("../images/bg20.jpg");
}

.colbg21 {
    background-image: url("../images/bg21.jpg");
}

.colbg22 {
    background-image: url("../images/bg22.jpg");
}

.colbg23 {
    background-image: url("../images/bg23.jpg");
}

.colbg24 {
    background-image: url("../images/bg24.jpg");
}

.colbg25 {
    background-image: url("../images/bg25.jpg");
}

.colbg26 {
    background-image: url("../images/bg26.jpg");
}

.colbg27 {
    background-image: url("../images/bg27.jpg");
}

.colbg28 {
    background-image: url("../images/bg28.jpg");
}

.colbg29 {
    background-image: url("../images/bg29.jpg");
    background-position: right top;
    border-bottom-left-radius: 10px;
}

.colbg30 {
    background-image: url("../images/bg30.jpg");
    background-position-y: top;
}

.colbg31 {
    background-image: url("../images/bg31.jpg");
    background-position: left top;
    border-bottom-right-radius: 10px;
}


/*

.sectionmain3 {
    height: 550px;
    background-color: #1b251e;
    
}
    */

/*styling for the list of weblinks in sectionmain3*/
.wrcontain {
    width:55%;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
}

.wrcontain img {
    padding-right: 5px;
}

.wrtitle {
    font-family:caviar;
    font-weight:bolder;
    font-size:1.2em;  
    color: #6b4242;
}

.wrcontain a {
    color: #6b4242;
}

.wrcontain a:hover {
    color: #5c1919;
    text-decoration:none;
}

.wrcontain li {
    display:inline-block;
    color:#ffffff;
    border:1px solid #6b4242;
    padding:3px;
}
/*alternate background color for odd and even list items*/
.wrcontain li:nth-child(odd) {
    background-color:#b9ac93;
}

.wrcontain li:nth-child(even) {
    background-color:#978c76;
}



/*styling for button that navigates to the top of the page*/
.topnav {
    display:inline-block;
    position:fixed; /*keep the button on the page all the time*/
    bottom:10px;
    right:10px;
    color:rgba(209, 205, 190, 0.82); /*last number is the transparency index*/
    text-align:center;
    z-index: 10;
}

.topnav:hover {
    color:#5e4e3e;
}
/*add space at the bottom of the page for nav scrollilng if needed*/
.endsection:after {
    display: block; 
  content: " "; 
  height: 800px; 
  visibility: hidden; 
}

/*adaptive design code*/
/* On screens that are 992px wide or less, go from three columns to two columns*/
@media screen and (max-width: 992px) {
    h1 {
        font-size:3em;
    }

  .colgrid, .colgrid2, .colgrid3, .colgrid4 {
    width: 100%;
  }
  
  .sectionmain1 {
      height:750px;
  }

  .sectionmain2 {
      height:1000px;
  }

  .sectionmain3 {
      height:1400px;
  }

  .wrcontain {
      width: 100%;
  }

  
  
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other 
@media screen and (max-width: 600px) {
  .colgrid, .colgrid2, .colgrid3 {
    width: 100%;
  }
  
  .sectionmain1 {
      height:800px;
  }

   .wrcontain {
      width: 100%;
  }
    }
    */