/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */

body {
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/**
 * Add your custom styles below
 * 
 * Remember: 
 * - Be organised, use comments and separate your styles into meaningful chunks
 *    for example: General styles, Navigation styles, Hero styles, Footer etc.
 * 
 * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
 */



/*                            The navbar container */
.topnav,
.footer {
  overflow: hidden;
}

/*                                   Navbar links */
.topnav a {
  float: right;
  display: block;
  color: #949292;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.nav-logo {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
  padding-left: 150px;
  text-decoration: none;
}
.nav-items {
  padding-right: 50px;
}
.nav-card {
  background-color: white;
  padding: 5px;
  padding-right: 20ex;
  padding-left: 20ex;
}

/*                                   Header  */
.Header {
  text-align: center;
}

.hero-image {
  background-image: white;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
button, .submit-button { 
  border: none;
  margin-top: 4ex;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: white;
  background-color: rgb(226, 55, 25);
  text-align: center;
  cursor: pointer;
}
 
/*                                      First part  */
.card-article {
  text-align: center;
}

.FIRST-Article-column {
  float: left;
  width: 30%;
  padding: 5px;
}


/* Clearfix (clear floats) */
.FIRST-Article-row::after {
  content: "";
  clear: both;
  display: table;
}


/*                     Links - change color on hover */

.topnav a:hover {
  color: rgb(226, 55, 25);
}

/* image */
.img {
  background-color: white;
  width: 100%;
  padding: 20px;
}

/*                                       article card  */
.card {
  background-color: white;
  padding: 20px;
  padding-right: 20ex;
  padding-left: 20ex;
  margin-top: 20px;
}

/*                                  Second article   */

.second-article-text{
  display: flex;
  padding: 0 5rem;
  align-items: center;
  text-align: center;
  background-color: rgb(240, 223, 220);
  justify-content: center;
}
.qoute{  
  font-size: 3rem;
  color: rgb(226, 55, 25);
}



.SECOND-Article-row {
  display: flex;
}
*/


.SECOND-Article-column-1 {  
  float: left;
  flex: 40%;
  padding: 10px;
  height: 300px; 
}
.SECOND-Article-column-2 {  
  float: left;
  flex: 60%;
}

/*                                         STORE PAGE  */

.store-form{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 1rem;
}
.store-form h1 {
  color: rgb(226, 55, 25);
  font-size: 2rem;
  font-weight: 500;
}
fieldset {
  border: none;
}
.store-form > * {
  grid-column: 1;
}
/* Form */
.form-colour {
  font-size: 0.8rem;
  color: rgba(102, 102, 102, 1);
}


.buttons-radio {
  margin-right: 1rem;
  margin-bottom: 2rem;
}

.column-label {
  margin-bottom: 1.5rem;
}
.column-flex {
  display: flex;
  flex-direction: column;
}

.row-flex {
  display: flex;
  flex-wrap: wrap;
}
.form-block {  
  display: inline-block;
  margin: 2rem auto;
}
.R-part {
  grid-column: 2 / -1; 
  object-fit: contain;
}
.R-part img{
  width: 100%;
  height: 100%;
}
.L-part {  
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
}






/*                                   Footer */

.footer a {
  color: #f2f2f2;
  padding: 14px 16px;
}
.footer h2 {
  color: black;
}

.footer {
  border-top: 2px solid black;
  padding: 20px;
  display: block;
  text-decoration: none;
  color: #949292;
  text-align: center;
  background: white;
  margin-top: 20px;
}