@import 'navigation.css';
@import 'footer.css';

@font-face {
    font-family: "Maax Black";
    src: url('../fnt/Maax-Black.otf');
}

body {
    background-color: rgb(247, 247, 247);
}

#content {
    width: 1140px;
    margin: 0 auto;
    padding-top: 84px;
}

#content h2 {
    margin-left: 96px;
    font-family: inherit;
    font-weight: 700;
    font-size: 24pt;
}

.padding {
    padding: 12px 0;
}

.blue {
    background-color: #70bfea;
}

#aviso p {
    margin-left: 220px;
    color: #fff;
    font-family: "Maax Black";
    font-weight: 400;
    font-size: 14pt;
}

#content>h3 {
    margin: 0;
    padding: 20.6667px 0 20.6667px 220px;
    font-size: 24pt;
}

#content>h4 {
    display: inline-block;
    float: left;
}

.white {
    background-color: #fff;
}

#content>div:nth-of-type(2) {
    position: relative;
    height: 90px;
}

#content>div:nth-of-type(2) h4 {
    position: absolute;
    padding-top: 20px;
}

#content>div:nth-of-type(2) h4:nth-child(1) {
    left: 80px;
}

#content>div:nth-of-type(2) h4:nth-child(2) {
    left: 220px;
}

#content>div:nth-of-type(2) h4:nth-child(3) {
    left: 540px;
}

#content>div:nth-of-type(2) h4:nth-child(4) {
    left: 720px;
}

#content>div:nth-of-type(2) h4:nth-child(5) {
    right: 80px;
}

.producto {
    position: relative;
    height: 220px;
    padding-top: 32px;
}

.producto img {
    position: absolute;
    top: 47.9px;
    left: 36px;
    width: 140px;
}

.detalles {
    display: inline-block;
    position: absolute;
    left: 220px;
    width: 320px;
}

.detalles h3 {
    margin: 0;
    font-family: "Maax Black";
    font-size: 14pt;
}

.detalles p {
    font-size: 10pt;
}

.precio-unitario {
    position: absolute;
    left: 540px;
}

.producto>div:nth-of-type(2) {
    display: inline-block;
    position: absolute;
    left: 720px;
    width: 80px;
    text-align: center;
}

.counter-container {
    display: block;
    text-align: center;
}

.counter-container span:nth-child(1) {
    float: left;
}

.counter-container span:nth-child(3) {
    float: right;
}

.counter-container span:nth-child(1),
.counter-container span:nth-child(3) {
    cursor: pointer;
}

.eliminar {
    position: relative;
    top: 20px;
    font-size: 9pt;
    cursor: pointer;
}

.precio-total {
    position: absolute;
    right: 80px;
}

#content>div:nth-of-type(4) {
    position: relative;
    height: 90px;
}

#content>div:nth-of-type(4) h4,
#content>div:nth-of-type(4) p {
    margin: 0;
}

#content>div:nth-of-type(4) h4:first-of-type {
    position: absolute;
    top: 30px;
    left: 80px;
}

#content>div:nth-of-type(4) h4:nth-of-type(2),
#content>div:nth-of-type(4) p {
    position: absolute;
    right: 80px;
}

#content>div:nth-of-type(4) h4:nth-of-type(2) {
    top: 16px;
}

#content>div:nth-of-type(4) p {
    top: 56px;
    font-size: 9pt;
}

#content>div:nth-of-type(5) {
    position: relative;
    height: 90px;
    background-color: #fff;
}

#volver {
    position: absolute;
    top: 20px;
    left: 89px;
    font-size: 9pt;
    cursor: pointer;
}

#volver:before {
    display: inline-block;
    position: relative;
    top: 8px;
    right: 8px;
    width: 12px;
    height: 24px;
    background-image: url("../img/back.png");
    background-size: 100%;
    background-repeat: no-repeat;
    content: "";
}

#content>div:nth-of-type(5) a:nth-of-type(2) {
    position: absolute;
    top: 20px;
    right: 80px;
    padding: 2px 16px;
    color: #fff;
    background-color: #70bfea;
}