/*------------------------------------*/
  /* GLOBAL COMPONANTS */
  /*------------------------------------*/    

    /*reset*/
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td
                        { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
    blockquote:before,
    blockquote:after,
    q:before, q:after   { content: ""; }
    blockquote, q       { quotes: "" ""; }
    body                { line-height: 1; color: black; background: white; }
    caption, th, td     { text-align: left; font-weight: normal; }
    :focus              { outline: 0; }
    table               { border-collapse: separate; border-spacing: 0; }
    ol, ul              { list-style: none; }


  html {
    background: rgb(255, 255, 255);
}

  body {
    background: url("img/Ki BG-100.jpg") repeat-x;
    background-size: 100%vmax;
    background-position: top center;
    text-align: center;
}
      
  div:after {
    content: "";
    background: url("img/kiramen_pattern.svg") repeat-x;
    background-size: 20%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;   

} 
  .container {
    margin: 0 auto;
    max-width: 1100px;
}
  .table {
    width: 80%;
	margin: 320px auto;
	table-layout:fixed;
	border-collapse: collapse;
}

  p {
    font-family: "LHF Hensler", helvetica, sans-serif;  
    font-size: 18px;
    letter-spacing: 2px;
    color: 231F20;
    margin-bottom: 1.5em;
    text-align: left
}

  a[href^="tel"] {
    text-decoration:none;
    color: #9c8d4e;
}

 h1 {
    font-family: "LHF Hensler", helvetica, sans-serif; 
    color: #B3282D;
    font-size: 54px;
    letter-spacing: 2px;
    margin: 100px 0 50px 0;
    -webkit-text-stroke: 2px black;
    text-align: center;
}

  h2 { 
    font-size: 21px;
    text-align: center;  
    color: #9c8d4e;
    font-family: "LHF Hensler";
    line-height: 1.5;  
    letter-spacing: 3px;
    margin: 60px 0 65px 0;  
} 

  h3 {
   font-family: "LHF Hensler";
   font-size: 28px;
   color: 231F20;
   letter-spacing: 2px;
   line-height: 1.5;
   margin: 15px 0 0 0;
   vertical-align: bottom;
   position: relative;
   text-align: center;  
}

 h3:after, h3:before {
   display: table;
   content: " ";
   line-height: 0;
   font-size: 0;
   clear: both;
}

  h3 span {
   width: 100%;
   text-align: center;
   display: block;
}

  h3 span:first-child {
    float: left;
    width: 80%;
    text-align: left;
}

  h3 span:last-child {
    float: right;
    width:20%;
    text-align: right;
}
  
  h4 {
    font-family: "LHF Hensler";
    font-size: 26px;
    letter-spacing: 2px;
    line-height: 1.5;
    text-align: center;
    margin-top: 60px;
}
  
  h5 {
    font-family: "LHF Hensler";
    color: #9c8d4e;
    font-size: 24px;
    letter-spacing: 2px;
    line-height: 1.5;
	margin-top: 40px;
    text-align: center;
}

  .sake-sizes {
    font-family: "LHF Hensler", helvetica, sans-serif;
    text-align: right;
    color: 231F20;
}

/*---------- RULE LINE -------------- */

  hr {
    width: 100%;
    margin: 8% auto;     
    background-color:#9c8d4e;
    color:#9c8d4e;
    border: 0 double;
    padding: 2px 0 2px 0;
}

  em { 
    font-size: 70%;
}

  .bottom > * {
    vertical-align: bottom;
}

  .bottom {
    margin-top: 80px;
    margin: 0 auto;
}

/*---------- LOGO -------------- */

  .logo img {
    max-width: 60%;
    height: auto;
    margin: 0 auto;
    margin-top: 20%;
}

/*---------- SOCIAL -------------- */

  .social {
    text-align: center;
    margin: 90px 0 0 0;
}
  
/*---------- SOCIAL LINKS -------------- */

.social-links {
  margin-top: 30px;
}

.social-links-btn {
  position: relative;
  display: inline-block;
  margin-right: 70px;
  text-decoration: none;
  background: #6b6328;
  color: #000;
  border: 2px solid #000;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  font-size: 250%;
  transition: all 0.5s;
}

.social-links-btn:last-child {
  margin-right: 0;
}

.ion-social-facebook,
.ion-social-instagram,            
.ion-social-twitter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.social-links-btn:hover,
.social-links-btn:focus {
  background: #c6252a;
}

/*---------- FORM -------------- */


  .contact-form input[type="email"] {
    background: transparent;
    border: none;
    border-bottom: 4px solid #000;
    display: inline-block;
    width: 50%;
    height: 50px;
    margin: 50px auto 50px;
    outline: none;
    font-size: 21px;
    letter-spacing: 3px;
    font-family: "LHF Hensler", helvetica, sans-serif;
    transition: all 0.5s;

  }
  .contact-form input[type="email"]:focus {
    border-bottom: 4px solid #9c8d4e;


 /*---------- VENDOR PROPERTIES -------------- */


  }
  /* Chrome/Opera/Safari */
  ::-webkit-input-placeholder {
    color: #9c8d4e;
  }

  /* Firefox 19+ */
  ::-moz-placeholder { 
    color: #9c8d4e;
  }

  /* IE 10+ */
  :-ms-input-placeholder { 
    color:  #9c8d4e;
  }

  /* Firefox 18- */
  :-moz-placeholder { 
    color:  #9c8d4e;
  }


/*---------- SUBMIT BUTTON -------------- */


  .contact-form input[type="submit"],
  .contact-form button[type="submit"] {
    display: inline-block;
    vertical-align: bottom;
    background: transparent;
    height: 50px;
    color: #000;
    font-size: 18px;
    font-family: "LHF Hensler";
    letter-spacing: 2px;
    padding: 0 100px;
    margin: 7px 0 0 0;
    font-weight: bold;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 4px solid #9c8d4e;
    transition: all 0.5s;

  }

  input[type="email"]:hover {
    outline: none;
    border-bottom: 4px solid #9c8d4e;
  }

  input[type="submit"]:hover,
  button[type="submit"]:hover,
  input[type="submit"]:focus,
  button[type="submit"]:focus {
    outline: none;
    border: 4px solid #9c8d4e;
    background-color: #9c8d4e;
  }
  
  
/*---------- MEDIA QUERIES -------------- */

/* Small tablets to large tablets from 768 to 1023px */
@media only screen and (max-width: 1023px) {
	
  body {
    background-size: 180%;   
}
   .logo img {
    max-width: 60%;
    height: auto;
    margin-top: 20%;
}
    h1 {
    font-size: 40px;
    }
    .table {
	margin: 240px auto;
    }

/* Small phones to small tablets from 481 to 767px */
@media only screen and (max-width: 767px) {
     
	  .logo img {
	    width: 90%;
        margin-top: 16%;  
	  }
       .table {
	     margin: 260px auto;
      }
	  .social {
	    margin: 95 0 0 0;
	  }
	
	  .bottom {
	   margin-top: 40px;
	   margin-bottom: 40px;
	 }
 
} 

/* Small phones from 0 to 480px */
@media only screen and (max-width: 480px) {
    
	  .container {
	    max-width: 90%;
    }
    
       .table {
	     margin: 160px auto;
      }
	  .logo img {
	    width: 90%;
        margin-top: 28%;  
	  }
    
	  p {
       font-family: "LHF Hensler", helvetica, sans-serif;  
       font-size: 14px;
       letter-spacing: 2px;
       color: 231F20;
       margin-bottom: 1.5em;
       text-align: left;
       padding-right: 20;  
    }
        
	  h1 {
	   margin: 20% 0% 0 0%;
	   line-height: 40px;
       font-size: 40px;
	  }
    
      h2 { 
      font-size: 21px;
      text-align: center;  
      color: #9c8d4e;
      font-family: "LHF Hensler";
      line-height: 1.5;  
      letter-spacing: 3px;
      margin: 30px 0 30px 0;  
    } 
	
	  h3 {
	    font-size: 16px;
    } 
    
	  h5 {
	  	margin-top: 50px;
    }
	
	  .contact-form input[type="email"] {
	    display: block;
	    width: 90%;
	    height: 50px;
	    margin: 10px auto 20px auto;
    }
	
	  .social {
	    text-align: center;
	    padding: 0 5% 0 5%;
   } 
	
	  .social-links-btn {
        width: 50px;
        height: 50px;
	  	margin-right: 20px;
   }
	

}