<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<header id="header">
    <link rel="stylesheet" href="styles.css">
  <div id="head_contain">
    <div id="head_menu">
      <img src="https://www.diffordsguide.com/assets/images/themes/default_v5/producers/third_party/patron_perfectionists_2019_header_logo.png" id="header-img">
      <nav id="nav-bar">
        <a href="#welcome_container" class="nav-link"> Welcome </a>
        <a href="#our_history_intro" class="nav-link"> Our History </a>
        <a href="#our_products_intro" class="nav-link"> Our Products </a>
        <a href="#contact_us_intro" class="nav-link"> Contact Us </a>
      </nav>
    </div>
  </div>
</header>
<main>
  <!-- WELCOME -->
  <div id="welcome_container">
  <div id="welcome">
    <iframe src="https://www.youtube.com/embed/bCRh-ChAx5M?start=0" frameborder="00" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe></div>
  <div id="welcomesmall">
    <img src="https://images-na.ssl-images-amazon.com/images/I/61r1jkgWnjL._SX425_.jpg">
    </div></div>
  <!-- Our History -->
  <div id="our_history_intro" class="intros">
    <h1 class="titles">Our History</h1>
  </div>
  <div id="our_history">
    <div id="our_history_layer">
      <h1 class="historyh1">Lorem ipsum dolor sit amet</h1>
      <p class="historyp">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br>
        <br> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
    </div>
  </div>
  <!-- OUR PRODUCTS -->
  <div id="our_products_intro" class="intros">
    <h1 class="titles">Our Products</h1>
  </div>
  <div id="our_products">
    <div id="O_P_Original">
      <div id="origtext">
        <h1 id="orighead">Lorem ipsum dolor sit amet</h1>
        <p1 id="origpara">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p1>
      </div>
      <img src="https://www.patrontequila.com/binaries/large/content/gallery/patrontequila/products/patron-extra-anejo/patron-extra-anejo.png

      " id="origbottle">
    </div>
    <!-- honey -->
    <div id="O_P_Honey">
      <div id="honeytext">
        <h1 id="honeyhead">Lorem ipsum dolor sit amet</h1>
        <p1 id="honeypara">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p1>
      </div>
      <img src="https://www.patrontequila.com/binaries/mediumretina/content/gallery/patrontequila/products/xo-cafe-dark-cocoa/bottle.png" id="honeybottle">
    </div>
    <!--double oak-->
    <div id="doubleoak">
      <div id="doubletext">
        <h1 id="doublehead">Lorem ipsum dolor sit amet</h1>
        <p1 id="doublepara">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p1>
      </div>
      <img src="https://png2.cleanpng.com/sh/fbd2ddb1245929610227acf569ede0c2/L0KzQYm3VsAzN6R1hJH0aYP2gLBuTgRmeaZuhNM2ZHn2hLrzjPVlNZNqjtd7YXfoPcjwjvUueJJ5itC2YXfkhra0ggp2dF55feNAaXzkPbP2lQRtbV46eqM8MnW7SYHoU8liPV84S6c8OUS5QYK8Usc6QGQ8TaU5NEG8PsH1h5==/kisspng-tequila-distilled-beverage-wine-patrn-agave-azul-tequila-bottle-5b132e890a39a5.3353946115279837530419.png" id="doublebottle">
    </div>
    <!--apple-->
    <div id="apple">
      <div id="appletext">
        <h1 id="applehead">Lorem ipsum dolor sit amet</h1>
        <p1 id="applepara">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p1>
      </div>
      <img src="https://www.patrontequila.com/binaries/content/gallery/patrontequila/products/citronge-lime/portfolio.png" id="applebottle">
    </div>
  </div>
  <!--contact us-->
  <div id="contact_us_intro" class="intros">
    <h1 class="titles">Contact Us</h1>
  </div>
  <div id="contact_us">
    <div class="contact_left_column">
      <div class="contact">
        <p1 class="contaxtp1">Have any further questions? Please write to us at </p1><br><br>

        <p1 class="contaxtp1">Patron Perfectionists</p1><br>
        <p1 class="contaxtp1">6380 S. Valley View Blvd., Suite 210</p1><br>
        <p1 class="contaxtp1">Las Vegas, Nevada</p1><br>
        <p1 class="contaxtp1">89118,</p1><br>
        <p1 class="contaxtp1">USA.</p1><br>
      </div>
    </div>
    <div class="contact_right_column">
      <div class="mailing_list">
        <form action="https://www.freecodecamp.com/email-submit" id="form">
          <p1 class="contaxtp1"> Sign up to our mailing list </p1><br>
          <input type="email" id="email" placeholder="email" name="email">
          <input type="submit" id="submit" name="form">
        </form>
      </div>
      <div class="social_media">
        <div id="follow_us_container">
          <p1 class="contaxtp1">Follow Us</p1>
        </div>
        <div class="social_media_container">
          <a href="https://www.twitter.com"><i class="fab fa-twitter fa-3x" id="s_m_iconsl"></i></a>
          <a href="https://www.facebook.com"><i class="fab fa-facebook-f fa-3x" id="s_m_iconsm"></i></a>
          <a href="https://www.instagram.com"><i class="fab fa-instagram fa-3x" id="s_m_iconsr"></i></a>
        </div>
      </div>
    </div>
  </div>

</main>

body {
  margin: 0;
  background-image: url("https://image.ibb.co/nsq2sp/cork_wallet.png");
}
/*header*/
@media all and (min-width: 1px) {
  #header {
    box-shadow: inset 00px -2px 0px 0px #dba827;
    background-color: white;
    position: relative;
    z-index: 3;
  }
}
@media all and (min-width: 1px) {
  #header {
    box-shadow: inset 00px -2px 0px 0px #dba827;
    background-color: white;
    position: fixed;
    width: 100vw;
    z-index: 3;
  }
}
/*header media queries*/
@media all and (max-width: 749px) {
  #head_contain {
    height: 45px;
    width: 100%;
  }
  #head_menu {
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #header-img {
    height: 45px;
    width: auto;
  }
  #nav-bar {
    font-size: 10px;
    font-family: "Slabo 27px", serif;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
  }
}
@media (max-width: 1399px) and (min-width: 750px) {
  #head_contain {
    height: 50px;
    width: 100%;
  }
  #head_menu {
    width: 60vw;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #header-img {
    height: 50px;
    width: auto;
  }
  #nav-bar {
    font-size: 18px;
    font-family: "Slabo 27px", serif;
    display: flex;
    justify-content: space-between;
    width: 45vw;
  }
}
@media all and (min-width: 1400px) {
  #head_contain {
    height: 85px;
    width: 100%;
    z-index: 2;
  }
  #head_menu {
    width: 50vw;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    z-index: 2;
  }
  #header-img {
    height: 90px;
    width: auto;
    margin-right: 1vw;
    margin-left: -1vw;
    z-index: 2;
  }
  #nav-bar {
    position: relative;
    font-size: 28px;
    font-family: "Slabo 27px", serif;
    display: flex;
    justify-content: space-between;
    width: 100%;
    z-index: 2;
  }
}
/*welcome page / video for large screens */
#welcome {
  position: relative;
  padding-bottom: 56.25%;
  display: flex;
  justify-content: center;
  z-index: 1;
}
iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
@media all and (min-width: 1400px) {
  #welcomesmall {
    display: none !important;
  }
}
/*welcome page / images for phone */
@media all and (max-width: 749px) {
  iframe {
    display: none;
  }
  #welcome {
    display: none;
  }
}
#welcomesmall {
  padding-top: 30px;
  display: flex;
  justify-content: center;
}
#welcomesmall > img {
  height: 80vh;
  width: auto;
  padding-top: 15px;
  margin-top: 2vh;
  margin-bottom: 2vh;
}
/* welcome page for tablet */
@media (max-width: 1399px) and (min-width: 750px) {
  #welcomesmall {
    display: none;
  }
  #welcome {
    position: relative;
    padding-bottom: 56.25%;
    display: flex;
    justify-content: center;
    z-index: 1;
  }
  iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
}
.titles {
  color: #3a77b5;
  font-size: 28px;
  font-family: "Slabo 27px", serif;
}
/* our history intro */
/* our history intro - large screen */
@media all and (min-width: 1400px) {
  .intros {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    background-color: white;
    border-top-style: solid;
    border-bottom-style: solid;
    border-color: #dba827;
    border-width: 1.5px;
  }
}
/* our history intro - tablet */
@media all and (max-width: 1399px) and (min-width: 750px) {
  .intros {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 9vw;
    background-color: white;
    border-top-style: solid;
    border-bottom-style: solid;
    border-color: #dba827;
    border-width: 1.5px;
  }
}
/* our history intro - phone */
@media all and (max-width: 749px) {
  .intros {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15vw;
    background-color: white;
    border-top-style: solid;
    border-bottom-style: solid;
    border-color: #dba827;
    border-width: 1.5px;
  }
}
/* our history main */
/* our history main - large*/
@media all and (min-width: 1400px) {
  #our_history {
    width: 100vw;
    height: 500px;
    max-width: 100%;
    background-image: url("https://image.ibb.co/iDxEV9/historybackmedlrg_2.jpg");
    background-size: cover;
  }
  #our_history_layer {
    background-color: rgba(225, 225, 225, 0.6);
    display: grid;
    justify-items: start;
    height: 100%;
  }
  .historyh1 {
    padding-left: 180px;
    padding-top: 80px;
    margin-bottom: -50px;
    font-size: 60px;
    color: black;
    font-family: "Slabo 27px", serif;
  }
  .historyp {
    padding-left: 10vw;
    padding-right: 10vw;
    font-size: 30px;
    color: black;
    font-family: "Slabo 27px", serif;
  }
}
/* our history main - tablet*/
@media all and (max-width: 1399px) and (min-width: 750px) {
  #our_history {
    width: 100vw;
    height: 300px;
    max-width: 100%;
    background-image: url("https://image.ibb.co/dZ7USz/historybackmedmed.jpg");
    background-size: cover;
  }
  #our_history_layer {
    background-color: rgba(225, 225, 225, 0.6);
    display: grid;
    justify-items: start;
    height: 100%;
  }
  .historyh1 {
    padding-left: 100px;
    padding-top: 20px;
    font-size: 30px;
    color: black;
    font-family: "Slabo 27px", serif;
  }
  .historyp {
    font-size: 20px;
    padding-left: 10vw;
    padding-right: 10vw;
    color: black;
    font-family: "Slabo 27px", serif;
  }
}
/* our history main - phone*/
@media all and (max-width: 749px) {
  #our_history {
    width: 100vw;
    max-width: 100%;
    height: 80vh;
    background-image: url("https://image.ibb.co/c3OA3U/historybacksmall_2.jpg");
    background-size: cover;
  }
  #our_history_layer {
    background-color: rgba(225, 225, 225, 0.6);
    display: grid;
    justify-items: start;
    height: 100%;
  }
  .historyh1 {
    padding-top: 40px;
    padding-left: 10px;
    font-size: 20px;
    color: black;
    font-family: "Slabo 27px", serif;
  }
  .historyp {
    font-size: 18px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 25px;
    padding-bottom: 80px;
    color: black;
    font-family: "Slabo 27px", serif;
  }
}
/* our products */
/* original main - large */
@media all and (min-width: 1400px) {
  #O_P_Original {
    width: 100vw;
    height: 500px;
    max-width: 100%;
    background-image: url("https://image.ibb.co/mWyqep/whisky_barrels_2.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #origtext {
    width: 55vw;
    padding-left: 15vw;
  }
  #orighead {
    font-size: 60px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #origpara {
    font-size: 30px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #origbottle {
    height: 500px;
    padding-right: 15vw;
  }
}
/* original main - tablet*/
@media all and (max-width: 1399px) and (min-width: 750px) {
  #O_P_Original {
    width: 100vw;
    height: 350px;
    max-width: 100%;
    background-image: url("https://image.ibb.co/mWyqep/whisky_barrels_2.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #origtext {
    width: 55vw;
    padding-left: 15vw;
  }
  #orighead {
    font-size: 30px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #origpara {
    font-size: 20px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #origbottle {
    height: 350px;
    padding-right: 15vw;
  }
}
/* original main - phone*/
@media all and (max-width: 749px) {
  #O_P_Original {
    width: 100vw;
    height: 275px;
    max-width: 100%;
    background-image: url("https://image.ibb.co/jfW79p/whisky_barrelssmall.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #origtext {
    padding-left: 3vw;
  }
  #orighead {
    font-size: 20px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #origpara {
    font-size: 15px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #origbottle {
    height: 250px;
    float: right;
  }
}
/* honey main - large */
@media all and (min-width: 1400px) {
  #O_P_Honey {
    width: 100vw;
    height: 500px;
    max-width: 100%;
    background-image: url("https://galoremag.com/wp-content/uploads/2015/08/Galore_Mag_Libido_Food_Chocolate1.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #honeytext {
    width: 55vw;
    padding-left: 15vw;
  }
  #honeyhead {
    font-size: 60px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #honeypara {
    font-size: 30px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #honeybottle {
    height: 500px;
    padding-right: 15vw;
  }
}
/* honey main - tablet*/
@media all and (max-width: 1399px) and (min-width: 750px) {
  #O_P_Honey {
    width: 100vw;
    height: 350px;
    max-width: 100%;
    background-image: url("https://galoremag.com/wp-content/uploads/2015/08/Galore_Mag_Libido_Food_Chocolate1.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #honeytext {
    width: 55vw;
    padding-left: 15vw;
  }
  #honeyhead {
    font-size: 30px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #honeypara {
    font-size: 20px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #honeybottle {
    height: 350px;
    padding-right: 15vw;
  }
}
/* honey main - phone*/
@media all and (max-width: 749px) {
  #O_P_Honey {
    width: 100vw;
    height: 275px;
    max-width: 100%;
    background-image: url("https://galoremag.com/wp-content/uploads/2015/08/Galore_Mag_Libido_Food_Chocolate1.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #honeytext {
    padding-left: 3vw;
  }
  #honeyhead {
    font-size: 20px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #honeypara {
    font-size: 15px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #honeybottle {
    height: 250px;
    float: right;
  }
}
/* double main - large */
@media all and (min-width: 1400px) {
  #doubleoak {
    width: 100vw;
    height: 500px;
    max-width: 100%;
    background-image: url("https://image.ibb.co/egtXx9/barbackdrop_2.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #doubletext {
    width: 55vw;
    padding-left: 15vw;
  }
  #doublehead {
    font-size: 60px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #doublepara {
    font-size: 30px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #doublebottle {
    height: 480px;
    padding-right: 15vw;
  }
}
/* double main - tablet*/
@media all and (max-width: 1399px) and (min-width: 750px) {
  #doubleoak {
    width: 100vw;
    height: 350px;
    max-width: 100%;
    background-image: url("https://image.ibb.co/egtXx9/barbackdrop_2.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #doubletext {
    width: 55vw;
    padding-left: 15vw;
  }
  #doublehead {
    font-size: 30px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #doublepara {
    font-size: 20px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #doublebottle {
    height: 330px;
    padding-right: 15vw;
  }
}
/* double main - phone*/
@media all and (max-width: 749px) {
  #doubleoak {
    width: 100vw;
    height: 275px;
    max-width: 100%;
    background-image: url("https://image.ibb.co/cxyt4p/barbackdropsmall.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #doubletext {
    padding-left: 3vw;
  }
  #doublehead {
    font-size: 20px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #doublepara {
    font-size: 15px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #doublebottle {
    height: 250px;
    float: right;
    padding-top: 10px;
  }
}
/* apple main - large */
@media all and (min-width: 1400px) {
  #apple {
    width: 100vw;
    height: 500px;
    max-width: 100%;
    background-image: url("https://image.ibb.co/g2rSx9/apples_2.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #appletext {
    width: 55vw;
    padding-left: 15vw;
  }
  #applehead {
    font-size: 60px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #applepara {
    font-size: 30px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #applebottle {
    height: 480px;
    padding-right: 13vw;
  }
}
/* apple main - tablet*/
@media all and (max-width: 1399px) and (min-width: 750px) {
  #apple {
    width: 100vw;
    height: 350px;
    max-width: 100%;
    background-image: url("https://image.ibb.co/g2rSx9/apples_2.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #appletext {
    width: 55vw;
    padding-left: 15vw;
  }
  #applehead {
    font-size: 30px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #applepara {
    font-size: 20px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #applebottle {
    height: 330px;
    padding-right: 15vw;
  }
}
/* apple main - phone*/
@media all and (max-width: 749px) {
  #apple {
    width: 100vw;
    height: 275px;
    max-width: 100%;
    background-image: url("https://image.ibb.co/iGdjzp/applesmob.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #appletext {
    padding-left: 3vw;
  }
  #applehead {
    font-size: 20px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #applepara {
    font-size: 15px;
    color: white;
    font-family: "Slabo 27px", serif;
  }
  #applebottle {
    height: 220px;
    float: right;
    padding-top: 10px;
  }
}
/*contact us - large*/
@media all and (min-width: 1400px) {
  #contact_us {
    height: 350px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .contact_left_column {
    padding-right: 150px;
  }
  .contact_right_column {
    padding-left: 150px;
  }
  .contaxtp1 {
    font-size: 20px;
    line-height: 30px;
    color: black;
    font-family: "Slabo 27px", serif;
  }
  .mailing_list {
    padding-bottom: 15px;
  }
  #follow_us_container {
    display: flex;
    justify-content: center;
  }
  .social_media_container {
    display: flex;
    justify-content: center;
  }
  #s_m_iconsl {
    padding-right: 40px;
  }
  #s_m_iconsm {
    padding-right: 40px;
  }
}
/*contact us - tablet*/
@media all and (max-width: 1400px) and (min-width: 750px) {
  #contact_us {
    height: 350px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .contact_left_column {
    padding-right: 50px;
  }
  .contact_right_column {
    padding-left: 50px;
  }
  .contaxtp1 {
    font-size: 20px;
    line-height: 30px;
    color: black;
    font-family: "Slabo 27px", serif;
  }
  .mailing_list {
    padding-bottom: 15px;
  }
  #follow_us_container {
    display: flex;
    justify-content: center;
  }
  .social_media_container {
    display: flex;
    justify-content: center;
  }
  #s_m_iconsl {
    padding-right: 40px;
    
  }
  #s_m_iconsm {
    padding-right: 40px;
    color: blue;
  }
}
/*contact us - phone*/
@media all and (max-width: 749px) {
  #contact_us {
    height: 350px;
    padding-left: 17%;
    padding-right: 17%;
    padding-top: 22px;
  }
  .contaxtp1 {
    font-size: 15px;
    line-height: 30px;
    color: black;
    font-family: "Slabo 27px", serif;
  }
  .mailing_list {
    padding-bottom: 5px;
    padding-top: 15px;
    text-align: center;
  }
  #follow_us_container {
    text-align: center;   
    padding-top: 15px;
  }
  .social_media_container {
    padding-bottom: 30px;
    text-align: center;
    
  }
  #s_m_iconsl {
    padding-right: 40px;
    font-size: 20px;    
  }
  #s_m_iconsm {
    padding-right: 40px;   
    font-size: 20px;
    color: blue;
  }
  #s_m_iconsr {
    font-size: 20px;
  }
}