:root {
  --tablet: 1.5px;
  --verySmall: 0.75px;
}


/* Global Styles */
  html,
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    background: #f2f2f2;
  }

  .container{
    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: #FAFAFA;
  }


/* Medium Devices */
@media (min-width: 549px){
  /*Header and navbar*/
  header {
    position: fixed;
    display: flex;
    width: 100vw;
    height: calc(130*var(--tablet));
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.04);
    top: 0;
    justify-content: center;
    align-items: flex-start;
  }
  
  .headerContainer {
    display: flex;
    justify-content: space-between;
    width:calc(326*var(--tablet));

  }


  
  #headerLogo {
    width: calc(70*var(--tablet));
    margin-top: calc(40*var(--tablet));
  }

  nav {
    width: calc(40*var(--tablet));
    height: calc(40*var(--tablet));
    background: #ffffff;
    border: 0.334358px solid rgba(96, 96, 96, 0.3);
    border-radius: calc(8*var(--tablet));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(68*var(--tablet));
    -webkit-border-radius: calc(8*var(--tablet));
    -moz-border-radius: calc(8*var(--tablet));
    -ms-border-radius: calc(8*var(--tablet));
    -o-border-radius: calc(8*var(--tablet));
}
  
  input { /*Hides the input*/
    display: none;
  }
  
  /*Main section*/
  main {
    width: calc(326*var(--tablet));
    margin-top: calc(130*var(--tablet));
    padding-top: calc(49*var(--tablet));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-weight: 500;
  }
  
  /*Cards*/
  
  .display {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 19px;    
  }
  #lastDisplay{
    flex-direction: row-reverse;
  }

  .smallCard {
    background: #ffffff;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.04);
    border-radius: calc(16*var(--tablet));
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(133*var(--tablet));
    min-height: calc(133*var(--tablet));
    -webkit-border-radius: calc(16*var(--tablet));
    -moz-border-radius: calc(16*var(--tablet));
    -ms-border-radius: calc(16*var(--tablet));
    -o-border-radius: calc(16*var(--tablet));
}

  .smallCard img{
    width: calc(105*var(--tablet));;
  }
  
  .smallContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .bigCard {
    align-items: center;
    background: #ffffff;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.04);
    border-radius: calc(16*var(--tablet));
    width: calc(176*var(--tablet));;
    height:calc(283*var(--tablet));;
    -webkit-border-radius: calc(16*var(--tablet));
    -moz-border-radius: calc(16*var(--tablet));
    -ms-border-radius: calc(16*var(--tablet));
    -o-border-radius: calc(16*var(--tablet));
}
  
  .bigCard img {
    margin-top: calc(13*var(--tablet));
    width: calc(150*var(--tablet));
  }

  .bigCard p{
    padding:0px;
    margin:0px;
  }
  
  .bigCard :nth-child(3) { /*Mexe no paragrafo descritivo*/
    font-size: calc(9*var(--tablet));
    color: #606060;
    margin-left: calc(13*var(--tablet));
    margin-bottom: calc(17*var(--tablet));
  }
  
  .bigCard h2 {
    margin-bottom: calc(4*var(--tablet));
    font-size: calc(17.5*var(--tablet));
    color: #292929;
    margin-left: calc(13*var(--tablet));
    
  }

  .priceTag{
    background: rgba(249, 199, 191, 1);
    border-radius: calc(4*var(--tablet));
    color: #000000;
    width: calc(57*var(--tablet));
    margin-left: calc(13*var(--tablet));
    -webkit-border-radius: calc(4*var(--tablet));
    -moz-border-radius: calc(4*var(--tablet));
    -ms-border-radius: calc(4*var(--tablet));
    -o-border-radius: calc(4*var(--tablet));
}

  .priceTag p{
    padding:calc(4*var(--tablet));;
    font-size: calc(13*var(--tablet));
  }

  /*Footer and social menu*/
  footer {
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
    height: calc(128*var(--tablet));
    margin-bottom:0;
  }

  .footerContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .socialMediaIcon {
    border: 1.5px solid rgba(96, 96, 96, 0.3);
    height: calc(25*var(--tablet));
    width: calc(25*var(--tablet));
    border-radius: 100%;
    margin-left:calc(15*var(--tablet));
    margin-right: calc(15*var(--tablet));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

  #footerLogo { /*Hides the logo*/
    display:none;
  }
  .footerContainer p {
    font-weight: 400;
    margin-left: 0px;
    justify-self: flex-end;
    display: flex;
    justify-content: flex-end;
    font-size: calc(12*var(--tablet));
    color: #292929;
    margin-top: calc(24*var(--tablet));
  }
}



/* Small Devices Only */
@media only screen and (max-width: 560px) and (min-width: 370px){
  /*Header and navbar*/
  header {
    position: fixed;
    display: flex;
    width: 100vw;
    height: 130px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.04);
    top: 0;
    justify-content: center;
    align-items: flex-start;
  }
  
  .headerContainer {
    display: flex;
    justify-content: space-between;
    width:326px;

  }


  
  #headerLogo {
    width: 70px;
    margin-top: 40px;
  }

  nav {
    width: 40px;
    height: 40px;
    background: #ffffff;
    border: 0.334358px solid rgba(96, 96, 96, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 68px;
  }
  
  input { /*Hides the input*/
    display: none;
  }
  
  /*Main section*/
  main {
    width: 326px;
    margin-top: 130px;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-weight: 500;
  }
  
  /*Cards*/
  
  .display {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 19px;    
  }
  #lastDisplay{
    flex-direction: row-reverse;
  }

  .smallCard {
    background: #ffffff;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 133px;
    min-height: 133px;
  }

  .smallCard img{
    width: 105px;
  }
  
  .smallContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .bigCard {
    align-items: center;
    background: #ffffff;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    width: 176px;
    height:283px;
  }
  
  .bigCard img {
    margin-top: 13px;
    width: 150px;
  }

  .bigCard p{
    padding:0px;
    margin:0px;
  }
  
  .bigCard :nth-child(3) { /*Mexe no paragrafo descritivo*/
    font-size: 9px;
    color: #606060;
    margin-left: 13px;
    margin-bottom: 17px;
  }
  
  .bigCard h2 {
    margin-bottom: 4px;
    font-size: 17.5px;
    color: #292929;
    margin-left: 13px;
    
  }

  .priceTag{
    background: rgba(249, 199, 191, 1);
    border-radius: 4px;
    color: #000000;
    width: 57px;
    margin-left: 13px;

}

  .priceTag p{
    padding:4px;
    font-size: 13px;
  }

  /*Footer and social menu*/
  footer {
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
    height: 128px;
    margin-bottom:0;
  }

  .footerContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .socialMediaIcon {
    border: 1.5px solid rgba(96, 96, 96, 0.3);
    height: 25px;
    width: 25px;
    border-radius: 100%;
    margin-left:15px;
    margin-right: 15px;;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
  }

  #footerLogo { /*Hides the logo*/
    display:none;
  }
  .footerContainer p {
    font-weight: 400;
    margin-left: 0px;
    justify-self: flex-end;
    display: flex;
    justify-content: flex-end;
    font-size: 12px;
    color: #292929;
    margin-top: 24px;
  }
}

/* Very small devices*/
@media (max-width: 369px){
  /*Header and navbar*/
  header {
    position: fixed;
    display: flex;
    width: 100vw;
    height: calc(130*var(--verySmall));
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.04);
    top: 0;
    justify-content: center;
    align-items: flex-start;
  }
  
  .headerContainer {
    display: flex;
    justify-content: space-between;
    width:calc(326*var(--verySmall));

  }


  
  #headerLogo {
    width: calc(70*var(--verySmall));
    margin-top: calc(40*var(--verySmall));
  }

  nav {
    width: calc(40*var(--verySmall));
    height: calc(40*var(--verySmall));
    background: #ffffff;
    border: 0.334358px solid rgba(96, 96, 96, 0.3);
    border-radius: calc(8*var(--verySmall));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(68*var(--verySmall));
    -webkit-border-radius: calc(8*var(--verySmall));
    -moz-border-radius: calc(8*var(--verySmall));
    -ms-border-radius: calc(8*var(--verySmall));
    -o-border-radius: calc(8*var(--verySmall));
}
  
  input { /*Hides the input*/
    display: none;
  }
  
  /*Main section*/
  main {
    width: calc(326*var(--verySmall));
    margin-top: calc(130*var(--verySmall));
    padding-top: calc(49*var(--verySmall));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-weight: 500;
  }
  
  /*Cards*/
  
  .display {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 19px;    
  }
  #lastDisplay{
    flex-direction: row-reverse;
  }

  .smallCard {
    background: #ffffff;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.04);
    border-radius: calc(16*var(--verySmall));
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(133*var(--verySmall));
    min-height: calc(133*var(--verySmall));
    -webkit-border-radius: calc(16*var(--verySmall));
    -moz-border-radius: calc(16*var(--verySmall));
    -ms-border-radius: calc(16*var(--verySmall));
    -o-border-radius: calc(16*var(--verySmall));
}

  .smallCard img{
    width: calc(105*var(--verySmall));;
  }
  
  .smallContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .bigCard {
    align-items: center;
    background: #ffffff;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.04);
    border-radius: calc(16*var(--verySmall));
    width: calc(176*var(--verySmall));
    height:calc(283*var(--verySmall));
    -webkit-border-radius: calc(16*var(--verySmall));
    -moz-border-radius: calc(16*var(--verySmall));
    -ms-border-radius: calc(16*var(--verySmall));
    -o-border-radius: calc(16*var(--verySmall));
}
  
  .bigCard img {
    margin-top: calc(13*var(--verySmall));
    width: calc(150*var(--verySmall));
  }

  .bigCard p{
    padding:0px;
    margin:0px;
  }
  
  .bigCard :nth-child(3) { /*Mexe no paragrafo descritivo*/
    font-size: calc(9*var(--verySmall));
    color: #606060;
    margin-left: calc(13*var(--verySmall));
    margin-bottom: calc(17*var(--verySmall));
  }
  
  .bigCard h2 {
    margin-bottom: calc(4*var(--verySmall));
    font-size: calc(17.5*var(--verySmall));
    color: #292929;
    margin-left: calc(13*var(--verySmall));
    
  }

  .priceTag{
    background: rgba(249, 199, 191, 1);
    border-radius: calc(4*var(--verySmall));
    color: #000000;
    width: calc(57*var(--verySmall));
    margin-left: calc(13*var(--verySmall));
    -webkit-border-radius: calc(4*var(--verySmall));
    -moz-border-radius: calc(4*var(--verySmall));
    -ms-border-radius: calc(4*var(--verySmall));
    -o-border-radius: calc(4*var(--verySmall));
}

  .priceTag p{
    padding:calc(4*var(--verySmall));;
    font-size: calc(13*var(--verySmall));
  }

  /*Footer and social menu*/
  footer {
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
    height: calc(128*var(--verySmall));
    margin-bottom:0;
  }

  .footerContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .socialMediaIcon {
    border: 1.5px solid rgba(96, 96, 96, 0.3);
    height: calc(25*var(--verySmall));
    width: calc(25*var(--verySmall));
    border-radius: 100%;
    margin-left:calc(15*var(--verySmall));
    margin-right: calc(15*var(--verySmall));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

  #footerLogo { /*Hides the logo*/
    display:none;
  }
  .footerContainer p {
    font-weight: 400;
    margin-left: 0px;
    justify-self: flex-end;
    display: flex;
    justify-content: flex-end;
    font-size: calc(12*var(--verySmall));
    color: #292929;
    margin-top: calc(24*var(--verySmall));
  }
}