@font-face {
    font-family: 'moanHand';
    src: url('../fonts/MoanHand.eot');
    src: url('../fonts/MoanHand.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MoanHand.woff2') format('woff2'),
        url('../fonts/MoanHand.woff') format('woff'),
        url('../fonts/MoanHand.ttf') format('truetype'),
        url('../fonts/MoanHand.svg#MoanHand') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  opacity: 1;
}

::-ms-input-placeholder { /* Microsoft Edge */
   opacity: 1;
}

html{ margin: 0px; padding: 0px;}
body{ font-family: 'Nunito', serif;  font-size:14px; line-height:18px;position: relative; margin: 0px; padding: 0px; background: #000000 fixed center no-repeat; background-size: cover;   letter-spacing: 0px;
    width: 100%;  overflow: auto; color: #ffffff}
img{ margin: 0px; padding: 0px; border: 0px;}
input{ position: relative; margin: 0px; padding: 0px}
a{ text-decoration: none;  color: inherit;  transition: all 0.5s ease;}
a:hover{ color: #d1d2d2; text-decoration: none; }
.img-fluid {
    display: block;
    height: auto;
    max-width: 100%; margin: 0px auto 0px auto; position: relative;
}
.img-fluid_r {
    display: inline-block; 
    height: auto;
    max-width: 100%; margin: 0px auto 0px auto; position: relative;
    vertical-align: middle;
}

#outer{  min-height: 618px; position: relative; min-width: 320px; overflow: hidden; width: 100%; position: relative; margin: 0px auto;}
.inner{ max-width: 900px; width:100%; position: relative; margin: 0px auto 0px auto; text-align: center; }

.shadow{ -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0, 1);
-moz-box-shadow:    0px 3px 5px 0px rgba(0,0,0, 1);
box-shadow:         0px 3px 5px 0px rgba(0,0,0, 1);}

.shadow2{-webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 0px 8px 0px rgba(50, 50, 50, 1);
box-shadow:         0px 0px 8px 0px rgba(50, 50, 50, 1);}
.shadow4{-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 8px 0px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 8px 0px rgba(0, 0, 0, 1);}
.shadow5{-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    0px 2px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow:         0px 2px 5px 0px rgba(0, 0, 0, 0.75);}
.sp20{ width: 100%; height: 20px; line-height: 20px; font-size: 20px; position: relative;}
 .sp40{ width: 100%; height: 40px; line-height: 40px; font-size: 40px; position: relative;}
 .sp60{ width: 100%; height: 60px; line-height: 60px; font-size: 60px; position: relative;}
 .sp80{ width: 100%; height: 80px; line-height: 80px; font-size: 80px; position: relative;}
 .sp100{ width: 100%; height: 100px; line-height: 100px; font-size: 100px; position: relative;}
.clear{ width: 100%; height: 0px; line-height: 0px; font-size: 0px; position: relative; clear: both;}
.videoWrapper {
    position: relative;
    padding-bottom: 51.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; display: block; border:3px solid #ffffff; background: #cccccc center no-repeat; box-sizing: border-box;
}
.top_bar{ position: relative; background: #9b7c51; letter-spacing: 4px; color: #ffffff }
.top_nav { position: relative; color: #ffffff }
.head_img_m{ display: none; }
.count_ttl{ font-size: 20px;line-height: 25px; padding-bottom: 10px; letter-spacing: 4px; color: #949494 }
.time_img{ padding: 0px 0px 20px 0px; position: relative; }
.hand_txt{ position: relative; color: #9b7c51; font-family: 'moanHand',cursive; font-size: 24px; line-height: 30px; margin-top: 10px }
.top_nav a, .top_nav span{ display: inline-block;
vertical-align: middle;
font-size: 16px;
line-height: 30px;
letter-spacing: 10px;
text-transform: uppercase;
padding: 10px;}
.content{ background: url(../images/head_v2021.jpg) top center no-repeat; }
.main_txt{ font-weight: 300; font-size:14px; line-height: 20px; letter-spacing: 6px; text-transform: uppercase; }
.main_txt_2{ font-weight: 300; font-size:14px; line-height: 20px; letter-spacing: 3px; text-transform: normal; }
.info{ font-weight: 300; font-size:12px; line-height: 18px; opacity: 0.8; letter-spacing: 6px; text-transform: uppercase; }
.info b{ font-weight: 600 }
.red_btn{ font-size: 17px; min-width: 260px; line-height: 22px; letter-spacing: 5px; font-weight: 300; color: #ffffff; background: #9b7c51; display: block; padding: 10px; display: block; }
.red_btn:hover{ background: #6d5739 }
.tickets{ margin-top: 20px; position: relative; }
footer{ background: url(../images/footer_back.jpg) top center no-repeat }
.guests_ttl{ color: #9b7c51; font-family: 'moanHand',cursive;;font-size: 40px; line-height: 45px }
.guests{ margin: 30px 0px 0px 0px; position: relative; }
.guest_cols{
 display: flex;
    justify-content: center; position: relative; margin: 15px 0px 0px 0px;
}
.guest_name{ font-weight: 900; color:#9b7c51; margin-top: 8px; position: relative; }
.guest{ margin: 10px 30px 10px 30px; position: relative; }
.btns_row{ display: flex;
    justify-content: space-between; position: relative; margin: 40px 0px 0px 0px;}
.sponsor_icons{ display: flex;
    justify-content: space-between;
justify-content:  space-between;
       flex-wrap: wrap;
       text-align: center;
}
    .sponsor_ttl{ position: relative; width: 100%; color: #333333; text-align: center;padding: 8px; border-bottom: 1px solid #333333; font-size: 18px; line-height:22px; }

    .sec_sponsors{ position: relative; margin: 40px 0px 0px 0px;  }
    .sec_sponsors .inner{ padding: 20px 0px 30px 0px; position: relative; }
    .sec_sponsors{ position: relative; background: #ffffff; padding: 15px 0px 0px 15px; }
    .sponsor_icons div{  margin-top:15px;  }
    .sponsor_icons  div img{ height: 80px; margin:15px; }
.c_main{ position: absolute; top:0px; left: 0px; position: relative; height: 100%; background: url(../images/main_c.png) bottom center no-repeat; background-size: cover }
    .anim{ width: 100%; height: 100vh; position: fixed; top:0px; left: 0px; z-index: 9999 }
    .cl{ position: absolute; width: 100%; top:0px; left: 0px; height: 100%; background: url(../images/cr.png) bottom left no-repeat; background-size: auto 100% }
    .cr{ position: absolute; width: 100%;top:0px; right: 0px; height: 100%; background: url(../images/cl.png) bottom right no-repeat; background-size: auto 100% }
@keyframes slideOutFromBottom {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}

.start_anim .c_main {  
    transform: translateY(-100%);
    -webkit-transition: 3s ease-in-out;
    -moz-transition: 3s ease-in-out;
    -o-transition: 3s ease-in-out;
    transition: 3s  ease-in-out;
  
  
}
.start_anim .cl {  
    transform: translateX(-100%);
    -webkit-transition: 3s ease-in-out;
    -moz-transition: 3s ease-in-out;
    -o-transition: 3s ease-in-out;
    transition: 3s  ease-in-out;
  
  
}
.start_anim .cr {  
    transform: translateX(200%);
    -webkit-transition: 3s ease-in-out;
    -moz-transition: 3s ease-in-out;
    -o-transition: 3s ease-in-out;
    transition: 3s  ease-in-out;
  
  
}

.polaroids_css{ position: relative; width: 100%; text-align: center; }
.polaroids_container{ display: flex;  justify-content: center; flex-wrap: wrap; margin-top: 50px; margin-bottom:50px; margin-left: auto;; margin-right: auto;; max-width: 760px; position: relative;}
.polaroid{ position: relative; max-width: 200px; margin-left: -10px; margin-right: -10px; margin-top: -30px }
.polaroid_pic{ position: absolute; width: 83.5%;
top: 6%;
left: 12%; }
.polaroid_pic img{ width: 100%; display: block; height: auto; }
.polaroid_inner{ width: 100%; height: 100%; position: absolute; top:0px; left: 0px; }
.polaroid_mask{ display: block; width: 100% }
.polaroid_mask img{ display: block; width: 100%; height: auto; }
.polaroid_name{ position: absolute; bottom:15%; left: 0px; width: 100%; text-align: center; font-family: 'Nunito', sans serif; color: #ffffff; font-size: 15px; line-height: 20px  }
.rot0{ transform: rotate(4deg); }
.rot1{ transform: rotate(-5deg); }
.rot2{ transform: rotate(3deg); }
.rot3{ transform: rotate(-5deg); }
.rot4{ transform: rotate(8deg); }
.rot4{ transform: rotate(-6deg); }

@media handheld, only screen and (max-width: 900px) {
  .inner{ max-width: 95%; width: 95%; }
.red_btn{ min-width: 1px; }
.btn_ln{ width: 100%; }
.btns_row{ flex-wrap: wrap; }

}