html {scroll-behavior: smooth; 
    /* font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; */
}
body{margin:0;}

:root {
    --fade-time: .25s;
}

a.skip-main {
    left:50px;
    position:absolute;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    z-index:-999;
}
a.skip-main:focus, a.skip-main:active {
    color: #fff;
    background-color:#000;
    left: auto;
    top: auto;
    width: 15%;
    height: auto;
    overflow:auto;
    margin: 10px 40%;
    padding:5px;    
    border-radius: 15px;
    border:4px solid white;
    text-align:center;
    font-size:.7em;
    z-index:999;
}

a{
    text-decoration:none !important;
    /* color: #f9c9dc; */
    color:black;
}


/* FONTS */
h1 {font-size: 2.3em; letter-spacing: .15em;
    font-family: "gothic", CenturyGothic, AppleGothic, sans-serif; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: 600; 
   }
h2 {font-size: 1.5em; letter-spacing: .1em;
    font-family: "gothic", CenturyGothic, AppleGothic, sans-serif;
    font-style: italic;
    font-weight: 400;
    line-height: .2;}
h3 {font-size: 1em; letter-spacing: .1em;
    font-family: "gothic", CenturyGothic, AppleGothic, sans-serif;
    font-style: italic;
    font-weight: 400;
    line-height: .2;}
h4 {font-size: .9em;
    font-family:"gothic";
    font-style: normal;
    font-weight: 600;
    line-height: 2;
}
h5 {font-size: .3em;}

.f-1 { font-size: 2.3em;}
.f-2 { font-size: 1.5em;}
.f-3 { font-size: 1.0em;}
.f-4 { font-size: .6em;}

/* flex */  
.flex-list-horizontal {
    display:flex;
    justify-content: space-around;
}

/* SOCIAL */
.social-icon{
    padding: 5px 5px;
}
#nav-social{
    justify-content: center;
}

footer {
    margin-top: 100px;
}


/* EFFECT TO FADE IN AND OUT */
.fx-child {
    opacity: 1.0;
    transition: .3s;
}
.fx-parent:hover > .fx-child{
    opacity: .5;
}
.fx-parent:hover > .fx-child:hover {
    color: black;
    opacity: 1.0;
}

/* PARALLAX */
.parallax {
    /* The image used */
    background-image: url('../images/bg-2.jpg');
    /* Set a specific height */
    height: 550px;
    
    /* Create the parallax scrolling effect */
    /* background-attachment: fixed; */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#logo {
    height: 150px;
    width: 150px;
    background-position:center;
    /* background-image: url('../images/logo/thedoughclub_logo.png'); */
    background-image: url('../images/logo/thedoughclub_logo_black-bordered.png');
    background-repeat:no-repeat;
    background-size: contain;
    transition: all .2s;  
}

#logo:hover {
    background-image: url('../images/logo/thedoughclub_logo.png');
    /* background-image: url('../images/logo/thedoughclub_logo_black-bordered.png'); */
}

.container {
    margin: 20px 0px;
}

.center {
    justify-content: center;
    text-align: center;
}

/* NAV - ELEMENTS */
.nav-list {
    overflow: hidden;
    list-style-type: none; 
    display: inline-block;
    margin: 0;
    padding: 20px 0;
}

.nav-list li {
    /* float: left; */
    display:inline-block;
    color:white;
    text-decoration: none;
    font-size: 12px;
    padding: 0 20px;
}

.nav-list a{
    transition: .2s;
}

.nav-list li:hover a{
    color: #f9c9dc;
}

.nav { 
    text-align: center;
    position: relative;
    font-family:'Archer Medium';
    font-weight:normal;
    font-size:25px;
    text-transform: uppercase;
}


/* SLIDESHOW */

.slideshow {
    list-style-type: none;
  }
  
  /** SLIDESHOW **/
  .slideshow,
  .slideshow:after { 
      top: -16px; /*Not sure why I needed this fix*/
      position: relative;
      height: 400px;
      left: 0px;
      z-index: 0; 
  }
  
  .slideshow li span { 
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      color: transparent;
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      opacity: 0;
      z-index: 0;
      animation: imageAnimation 15s linear infinite 0s; 
  }
  
  
  
  .slideshow li:nth-child(1) span { 
      background-image: url("../images/bg.jpg"); 
  }
  .slideshow li:nth-child(2) span { 
      background-image: url("../images/bg-2.jpg");
      animation-delay: 3s; 
  }
  .slideshow li:nth-child(3) span { 
      background-image: url("../images/bg-3.jpg");
      animation-delay: 6s; 
  }
  .slideshow li:nth-child(4) span { 
      background-image: url("../images/bg-4.jpg");   
      animation-delay: 9s; 
  }
  .slideshow li:nth-child(5) span { 
      background-image: url("../images/bg-5.jpg");
      animation-delay: 12s; 
  }
  
  
  
  @keyframes imageAnimation { 
      0% { opacity: 0; animation-timing-function: ease-in; }
      8% { opacity: 1; animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  
  
  @keyframes titleAnimation { 
      0% { opacity: 0 }
      8% { opacity: 1 }
      17% { opacity: 1 }
      19% { opacity: 0 }
      100% { opacity: 0 }
  }
  
  
  .no-cssanimations .cb-slideshow li span {
      opacity: 1;
  }

/* RESPONSIVE */
@media only screen and (max-width: 991px) {
    .parallax {
        height: 280px;
    }

    
    .slideshow, .slideshow:after {
        height: 280px;
    }


}

@media only screen and (max-width: 414px) {
    #logo { 
        background-image: url('../images/logo/thedoughclub_logo.png');
    }
    /* a{
        color: #f9c9dc;
    }

    .nav-list li:hover a{
        color:black;
    } */
}