/*! Hoja de estilos del ejercicio landing page */
/*!Realizada por dbold */

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

a{
  text-decoration: none;
}

ul li{
  display: inline;
}

li a{ 
  margin-left: 8px;
  margin-right: 8px;
}

hr{
  box-shadow: 0.5px 0.5px 1px grey;
}

#name a{
      font-family: 'Fredoka One', cursive;
      color: #434343;
      font-size: 55px;
}

#social-icon a{
      color: #434343;
}

#navbar a{
      color: #1f58a9;
}

.principal{
      width: 40%;
      margin: auto;
}

.footer{
      text-align: center;
      padding: 16px 0px;
      font-family: 'conforta';
}

.title{
      text-transform: uppercase;
      font-family: 'oswald';
      text-shadow: 0.5px 0.5px 1px #434343;
}

.row{
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
}

.row-column{
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 24px 24px;
}

.half{
      width: 50%;
      padding: 8px 4px;
}

.third{
      width: 33.333%;
}

.col{
      float: left;
      width: 100%;
}

.col.l4{
      width: 33.333%;
}

.border > .title {
      padding: 8px;
}

.center{
      text-align: center;
      justify-content: center;
      align-items: center;
}

.centered{
      justify-content: center;
}

.border{
      border: 2px solid #434343;
      box-shadow: 0.5px 0.5px 1px #434343;
}

.align-right{
      text-align: right;
}

.imagen{
      width: 100%;
      height: auto;
}

.row:after,
.row:before{
      content:"";
      display:table;
      clear:both
}

.padding-s{padding: 0px 4px;}
.padding-l{padding: 8px 8px;}
.padding-36{padding: 36px 0px;}
.padding-16{padding: 16px 0px;}
.padding-36-l{padding: 30px 8px;}
.padding-50{padding: 50px 8px;}

.margin-bottom{margin-bottom: 4px;}
.margin-bottom-s{margin-bottom: 10px;}

.product-name, .product-price{
      margin: 11px 0px;
      text-align: center;
      text-transform: uppercase;
      font-family: 'conforta';
}

.product-price{
      font-weight: 600;
}

.social-network, .social-network a{
      font-size: 40px;
}

.social-media{
      font-family: 'conforta';
      color: #434343;
      font-size: 25px;
      text-transform: uppercase;
      margin-bottom: 20px;
}

.appstore{
      padding: 0px 150px;
}

.caption{
      border:1px solid #434343;
      font-family: 'oswald';
      text-transform: uppercase;
      padding: 11px 70px;
      background-color: black;
      color: white;
      margin: auto;
}

.caption-2 {
	width: 100%;
	font-family: 'oswald';
	text-transform: uppercase;
	padding: 20px;
	background-color: black;
	color: white;
	margin: 8px auto;
}

.degradado {
  background: linear-gradient(to right, rgb(248, 248, 248)25%, rgb(232, 221, 62)50%,#998000 80%);
  -webkit-background-clip: text;
  color: transparent;
}

.degradado:nth-last-of-type(2){
  position: relative;
  z-index: 1000;
}

.discount{
  background-repeat: no-repeat;
  background-size: cover;
  text-transform: uppercase;
}

.discount.women{
  background-image: url(../img/caption-women.webp);
  font-family: 'oswald';
  margin-bottom: 32px;
}

.discount.men{
  background-image: url(../img/caption-men.webp);
  font-family: 'oswald';
  margin-bottom: 32px;
}

.discount.kids{
  background-image: url(../img/24-01_img_09.webp);
  font-family: 'antonio';
}

.sales{
  background-color: black;
  color: white;
  margin: auto;
  text-align: center;
}

.sales.woman{
  border: 1px solid white;
  padding: 30px 30px;
  width: 75%;
  line-height: 0.8;
  opacity: 0.8;
  margin: auto;
}

.sales.men{
  padding: 30px 30px;
  width: 75%;
  line-height: 0.8;
  opacity: 0.8;
}

.sales.kids{
  font-family: 'antonio';
}

.kids > p{
  font-size: 130px;
  text-align: center;
}

.kids > p:nth-child(2){
  font-size: 195px;
  letter-spacing: 15px;
}

.kids > div{
  margin-top: 21px;
}

.cupon{
      width: 80%;
      margin: auto;
      font-size: 15px;
      border: 1px dotted white;
      border-radius: 8px;
      padding: 16px 32px;
}

.kids >.cupon{
  background-color: black;
}

.rebaja{
      font-size: 110px;
      line-height: 0.8;
}

.rebaja2{
      margin: 0px 0px 50px 0px;
      font-size: 170px;
      line-height: .8;
}

.adres{
      text-align: center;
      font-family: 'conforta';
      padding: 8px 0px;
}

.texto-l{
      font-size: 40px;
}

.full-height{
      align-self: stretch;
}

.fila{
  display: inline-grid;
  grid-template-columns: 33.3333% 33.3333% 33.3333%;
  gap: 10px;
  overflow: hidden;
}

.columna{
  display: grid;
  grid-template-columns: 33.3333% 66.6666%;
  gap: 10px;
  overflow: hidden;
}

.container{
  display: grid;
  grid-template-columns: 33.3333% 66.6666%;
  grid-template-rows: 25% 75%;
  gap: 10px;
}