/*
    Author: Rakibul Hassan Rifat
    
*/
/*
	==========Index=========
	01) Import Section
    02) Variable Section
    03) Mixin & Include
	04) Global CSS
    05) Container Section
	06) Header Section
	07) Hero Section
	08) Bill Section
    09) Shipping Section
    10) Offer Section
    11)  Social Section
    13) Footer Section
    14) Media Query Section
	========================
*/
/*===== 01) Import Section =====*/
/*===== Resize Section =====*/
html, body {
  margin: 0;
  padding: 0;
  border-spacing: 0;
}

img {
  border: 0;
}

/*===== 02) Variable Section =====*/
/*===== 03) Mixin & Include Section =====*/
/*===== 04) Global CSS Section =====*/
body {
  background-color: #CCC;
  /*===== 05) Container Section  =====*/
}

body .container {
  width: 720px;
  max-width: 100%;
  margin: 0 auto;
  background-color: #FFF;
  /*===== 06) Header Section  =====*/
  /*===== 07) Hero Section  =====*/
  /*===== 08) Bill Section =====*/
  /*===== 09) Shipping  =====*/
  /*===== 10) Offer Section  =====*/
  /*===== 11) Social Section  =====*/
  /*===== 12) Footer Section  =====*/
  /*===== 05) Container Section End  =====*/
}

body .container .header {
  background-color: #3598DB;
  padding: 20px;
}

body .container .header .row {
  content: '';
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

body .container .header .row .col-6 {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

body .container .header .row .left {
  float: left;
}

body .container .header .row .left img {
  width: 50%;
}

body .container .header .row .right {
  float: right;
}

body .container .header .row .right a {
  text-decoration: none;
  float: right;
  margin: 0 auto;
  font-size: 20px;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  color: #FFF;
}

body .container .hero {
  text-align: center;
  padding-top: 30px;
}

body .container .hero img {
  width: 17%;
}

body .container .hero h1 {
  font-size: 32px;
  line-height: 110%;
  padding: 10px;
  text-align: center;
  color: #47484B;
}

body .container .hero p {
  text-align: center;
  font-size: 16px;
  line-height: 130%;
  color: #7A7676;
  padding: 2px 40px 25px;
}

body .container .bill table {
  width: 90%;
  margin: 0 auto;
  table-layout: fixed;
  border-collapse: collapse;
}

body .container .bill table thead {
  border-top: 1px solid #615E5E;
  border-bottom: 1px solid #615E5E;
  font-weight: bold;
}

body .container .bill table td {
  padding: 10px;
  color: #615E5E;
}

body .container .bill table thead tr td:last-child,
body .container .bill table tbody tr td:last-child {
  float: right;
}

body .container .shipping .row {
  display: table;
  clear: both;
}

body .container .shipping .row .col-6 {
  width: 50%;
  float: left;
  padding: 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body .container .shipping .row .col-6 .content {
  padding: 10px;
}

body .container .shipping .row .col-6 .content h5 {
  margin: 5px 0;
  font-size: 15px;
}

body .container .offer {
  background-color: #3598DB;
  padding: 30px 20px;
}

body .container .offer h2 {
  font-size: 24px;
  margin: 0;
  padding: 26px 10px;
  text-align: center;
  color: #FFF;
}

body .container .offer button {
  border: none;
  cursor: pointer;
  padding: 15px 40px;
  background-color: #FFF;
  display: block;
  margin: 0 auto;
  border-radius: 50px;
}

body .container .offer button a {
  color: #3598DB;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  line-height: 120%;
}

body .container .social .col-12 {
  text-align: center;
}

body .container .social .col-12 h2 {
  padding: 35px 10px 10px;
  font-size: 30px;
  color: #236FA1;
}

body .container .social .col-12 p {
  text-align: center;
  font-size: 16px;
  line-height: 130%;
  color: #7A7676;
  font-weight: lighter;
  font-style: italic;
  padding: 2px 40px 15px;
}

body .container .social .col-12 .social-bar {
  padding: 9px 9px 31px;
}

body .container .social .col-12 .social-bar a {
  text-decoration: none;
}

body .container .social .col-12 .social-bar a img {
  width: 5%;
  margin: 0 10px;
}

body .container .footer {
  padding: 16px;
  background-color: #236FA1;
}

body .container .footer p {
  text-align: center;
  color: #FFF;
}

/*===== 13) Media Query Section =====*/
@media (max-width: 450px) {
  .header .row .left img {
    width: 90%;
  }
  .shipping .row .col-6 {
    width: 100% !important;
    float: none;
    padding: 20px 30px !important;
  }
  .social .col-12 .social-bar a img {
    width: 10% !important;
  }
}

@media (max-width: 380px) {
  .header .row .left img {
    width: 100% !important;
  }
}
/*# sourceMappingURL=style.css.map */