a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
summary,
textarea {
  -ms-touch-action: manipulation;
      touch-action: manipulation; }



  /* ==========================================================================
   Global link styles
   ========================================================================== */


   .menu a {
        color: #000;
        text-decoration: none;
        position: relative; }
       
      

      .menu    a::before {
            content: '';
            height: 2px;
            position: absolute;
            left: 0;
            bottom: 0;
            background-color: #ecd1a1;
            width: 0;
            transition: width 0.2s ease-in-out;
            margin-bottom: -8px;
          }


    .menu   a:hover {
        color: #000;
        text-decoration: none; }
        a:hover:before {
          width: 100%; }
      
   .menu   a, a:hover, a:active, a:visited, a:focus {
        outline: 0 !important; }


   .menu .header .menu li a {
        text-decoration: none;
       
    }


  
 
.menu-wrap {
	margin-top: 0;
	padding-left: 16%;
	padding-right: 16%;
}
.header .menu {
	list-style: none;
	margin: 38px 0 0 0;
	padding: 0px 33px;
	width: 100%;
}




.header {
    position: relative;
    background: transparent;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10; 
  	margin: 30px 0px 20px;
  }
    .header h1 {
      text-align: center;
      position: absolute;
      margin: 0;
      z-index: 1;
      top: 29px;
      left: 50%;
      transition: opacity 0.2s ease-out;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%); }


              .header h1 a {
                display: block;
                width: 526px;
                height: 106px;
                background: url("") no-repeat transparent 50% 50%;
                background-size: contain;
                text-indent: -9999px;
                margin: 0 auto;
                border: 0; 
              }

                .header h1 a:before {
                  display: none; }
                .header h1 a:hover {
                  border: 0; 
                }


                  .header h1 a:hover {
      display: block;
      width: 526px;
      height: 106px;
      background: url("") no-repeat transparent 50% 50%;
      background-size: contain;
      text-indent: -9999px;
      margin: 0 auto;
      border: 0;
    }


                  .header .mobile-toggle {
                    width: 24px;
                    height: 18px;
                    position: absolute;
                    top: 20px;
                    left: 20px;
                    z-index: 20;
                    outline: 0;
                    display: none; }

                    .header .mobile-toggle:before {
                        display: none; }


                        .header .mobile-toggle span {
                            position: absolute;
                            left: 0;
                            top: 0;
                            height: 2px;
                            background: #000;
                            width: 100%;
                            transition: opacity 0.2s ease-out, top 0.2s ease-out, -webkit-transform 0.2s ease-out;
                            transition: opacity 0.2s ease-out, transform 0.2s ease-out, top 0.2s ease-out;
                            transition: opacity 0.2s ease-out, transform 0.2s ease-out, top 0.2s ease-out, -webkit-transform 0.2s ease-out;
                            opacity: 1;
                            -webkit-transform: rotate(0deg);
                                    transform: rotate(0deg); }
                            .header .mobile-toggle span.top {
                              top: 0; }
                            .header .mobile-toggle span.middle {
                              top: 8px; }
                            .header .mobile-toggle span.bottom {
                              top: 16px; }
                          .header .mobile-toggle.active span.top {
                            top: 50%;
                            -webkit-transform: rotate(45deg);
                                    transform: rotate(45deg); }
                          .header .mobile-toggle.active span.middle {
                            opacity: 0; }
                          .header .mobile-toggle.active span.bottom {
                            top: 50%;
                            -webkit-transform: rotate(-45deg);
                                    transform: rotate(-45deg); }
                        .header .menu {
                          list-style: none;
                          margin: 38px 0 0 0;
                          padding: 0px 33px;
                        text-transform: uppercase;
                      }
                          .header .menu li {
                            margin-right: 25px;
                            position: relative;
                            z-index: 10; }
                            .header .menu li:nth-child(1) {
                              margin-right: auto; }
                              .header .menu li:nth-child(6) {
                                margin-right: 0; }
                            
                            .header .menu li a {
                              text-decoration: none;
                              font-size: 50px;
line-height: 54px;                              color:#1449c6;
    font-family: 'Oswald', Arial, sans-serif;
                              font-style: normal;
                              font-weight: 500;  }


                              .light-text .header a {
                                color: #fff; }
                                .light-text .header a:before {
                                  background-color: #fff; }
                                .light-text .header a:hover {
                                  border-bottom-color: #fff; }


                                  .light-text .header h1 a {
                                    background-image: url(""); }
                                    .light-text .header h1 a:hover {
                                      background-image: url(""); }


              @media (max-width: 767px) {

                .header h1 {
                    top: 18px; }

                    .header h1 a {
                        width: 240px;
                        height: 63px; }

                        .header h1 a:hover {
                          width: 240px;
                          height: 63px; }

                        .header .mobile-toggle {
                            display: block; } 

                            .header {
                                overflow: hidden;
                                height: 60px; }
                                .header.active {
                                  width: 100%;
                                  height: 100vh; }
                                .header .container-fluid, .header .row {
                                  height: 100vh; }


                                  .header .menu-wrap {
                                    background: linear-gradient(to bottom, #503216 30%, #976639 100%);
                                    -webkit-transform: max-height 0.3s ease-out 0.3s;
                                    transform: max-height 0.3s ease-out 0.3s;
                                    overflow: hidden;
                                    height: 100vh;
                                    width: 100vw;
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    max-height: 0;
                                    opacity: 0;
                                    transition: opacity 0.3s ease-out 0.0s, max-height 0.0s ease-out 0.3s;
                                  }

                                  .header .menu li {
                                    margin: 0px 0px 40px;
                                    position: relative;
                                    z-index: 10;
                                  }
                                  
                               
                                  .header .menu-wrap .menu {
                                    opacity: 0;
                                    -webkit-transform: translateY(-45%);
                                            transform: translateY(-45%);
                                    transition: opacity 0.3s ease-out 0.0s, -webkit-transform 0.3s ease-out 0.0s;
                                    transition: opacity 0.3s ease-out 0.0s, transform 0.3s ease-out 0.0s;
                                    transition: opacity 0.3s ease-out 0.0s, transform 0.3s ease-out 0.0s, -webkit-transform 0.3s ease-out 0.0s; }
                                .header.active h1 {
                                  opacity: 0; }
                                .header.active .menu-wrap {
                                  max-height: 100vh;
                                  opacity: 1;
                                  transition: opacity 0.3s ease-out 0.0s, max-height 0.0s ease-out 0.0s; }
                                  .header.active .menu-wrap .menu {
                                    opacity: 1;
                                    -webkit-transform: translateY(-50%);
                                            transform: translateY(-50%);
                                    transition: opacity 0.3s ease-out 0.3s, -webkit-transform 0.3s ease-out 0.3s;
                                    transition: opacity 0.3s ease-out 0.3s, transform 0.3s ease-out 0.3s;
                                    transition: opacity 0.3s ease-out 0.3s, transform 0.3s ease-out 0.3s, -webkit-transform 0.3s ease-out 0.3s; }
                                .header .menu {
                                  text-align: center;
                                  margin: 0;
                                  top: 50%;
                                  left: 0;
                                  position: absolute;
                                  width: 100%; }
                                  .header .menu li a {
                                    color: #fff;
                                    font: 29px/33px 'Oswald', Arial, sans-serif;
                                    font-style: normal;
                                    font-weight: 500; }
                                  
                                    
                                

                                      .light-text .header a {
                                        color: #000; }
                                        .light-text .header a:before {
                                          background-color: #000; }
                                        .light-text .header a:hover {
                                          border-bottom-color: #000; } 


              }


               /* inbetween LG devices to address nav items*/
               @media (max-width: 991px)  { 
                #header_area {
                  padding: 13px 0px 54px;
                }
                .header {
                  margin: 0px 0px 20px;
                }
                .header h1{top:0;position: relative;display: block;}
                .social_area{float:left; display: block;position: relative;}
                .contact_area{float:left; display: block;position: relative;}
                .social_area {
                  float: left;
                  display: block;
                  position: relative;
                  margin: 0 auto;
                  left: 22%;
                  width: auto;
                }
                .contact_area {
                  float: left;
                  display: block;
                  position: relative;
                  left: 27%;
                  font-size: 14px;
                  margin-top:2px;
                }

                .header.active h1 {
                  opacity: 0;
                  display: none;
                  height: 0;
                }

                #header_area {
                  padding: 13px 0px 28px;
                }

            
           
               }


/* EXTR 767 area for CONTACT and SOCIAL HEADER BIts*/
               @media (max-width: 767px) {
                .social_area {
                  /* display: block; */
                  width: 100%;
                  /* margin: 0 auto; */
                  /* text-align: center; */
                  /* padding: 0; */
                  /* margin: 0; */
                  /* float: left; */
                  /* position: relative; */
                  left: 0;
                }
                
                .contact_area {
                  /* display: block; */
                  /* width: 100%; */
                  /* margin: 0 auto; */
                  font-size: 14px;
                  /* text-align: center; */
                  /* padding: 0; */
                  /* margin: 0; */
                  left: 0;
                }


          




               }
               
               @media (min-width: 992px) { 
                .header{margin-bottom: 0px;margin-top: 33px;}
                .header h1 a {
                  width: 320px;
                  height: 65px;
                }
                .header h1 a:hover {
                  width: 320px;
                  height: 65px;
                }
                .menu-wrap {
                 padding-left: 7%;
                 padding-right: 7%;
               }
               }




               @media (min-width: 1200px) { 
               .header{margin-bottom: 0px;margin-top: 30px;}
               .header h1 a {
                 width: 358px;
                 height: 72px;
               }
               .header h1 a:hover {
                 width: 358px;
                 height: 72px;
               }
               .menu-wrap {
                padding-left: 12%;
                padding-right: 12%;
              }
              }

              @media (min-width: 1370px) { 
                .header{margin-bottom: 10px;margin-top: 30px;}
                .header h1 a {
                  width: 450px;
                  height: 91px;
                }
                .header h1 a:hover {
                  width: 450px;
                  height: 91px;
                }
                .menu-wrap {
                  padding-left: 14%;
                  padding-right: 14%;
                }
               }

               @media (min-width: 1500px) { 
                .header{margin: 30px 0px 20px;}
                .header h1 a {
                  width: 515px;
                  height: 104px;
                }
                .header h1 a:hover {
                  width: 515px;
                  height: 104px;
                }
                .menu-wrap {
                  padding-left: 16%;
                  padding-right: 16%;
                }
               }

               @media (min-width: 1690px) { 
                .header{margin: 30px 0px 20px;}
                .header h1 a {
                  width: 526px;
                  height: 106px;
                }
                .header h1 a:hover {
                  width: 526px;
                  height: 106px;
                }
                .menu-wrap {
                  padding-left: 19%;
                  padding-right: 19%;
                }
               }



/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
 
    .header {
      height:276px;
    }
    h2, h3 {
      colour: #1449c6;
    }
    #wrapper {
      overflow: hidden;
      width: 100%;
      height: 100%;
      display: table;
        table-layout: fixed;
        background: url(../img/bgr-dass-moby2.jpg) center 0 no-repeat;
        background-size: 80% ;
    }


}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 


    
    .header .menu li {
      margin: 16px 0px 20px;
      position: relative;
      z-index: 10;
    }
    

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

    .social_area {
    display: none;
    }
    .contact_area {
     display: none;
    }

    .header .menu li {
      margin: 0px 0px 20px;
      position: relative;
      z-index: 10;
      font-size:25px;
    }

}




/* ----------- iPad  ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {

 
    .header .menu li:nth-child(3) {
      margin-right: 25px;
  }

}


/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
 {

  .social_area {
    float: left;
    display: inline-block;
    position: relative;
    margin: 2px 0px 12px;
    left: 33px;
    width: 36%;
    text-align: left;
  }
    .contact_area {
      float: left;
      display: inline-block;
      position: relative;
      /* right: 22px; */
      font-size: 14px;
      margin: 4px 0px 12px;
      width: 36%;
    }

    .header .menu li:nth-child(3) {
      margin-right: 0; 
      margin-left: 0; 

      margin: 0 auto;
    }
      .header .menu li:nth-child(6) {
        margin-right: 0; 
        margin-left: 0; 

        margin: 0 auto;
      }
    


    .header .menu li {
      margin-right: 0;
      margin-left: 0;

      position: relative;
      z-index: 10;
      margin: 0 auto;
    }

  
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
{

}



.mobydassheader {
    display: block;
    height: 85px;
    position: relative;
}

  

.mobydassheader h2{
color: #1449c6;
font-size: 24px;
}

.mobydassheader h3{
  color: #1449c6;
  font-size: 22px;
  }