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

body {
    background-color: #FFFFFF
}

img {
    display: block;
    height: auto;
    width: 100%
}

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-gap: 0px;
    height: 100%
}

.atapic {
    background-color: #FFFFFF
}

.atapicf {
    background-color: #FFFFFF;
    margin-bottom: 40px
}

.atalogo {
    padding: 8px;
    background-color: #FFFFFF
}

.atamap {
    background-color: #FFFFFF
}

.ataata {
    padding: 8px 4px 12px 4px;
    background-color: #FFFFFF
}

.ataxero {
    padding: 8px 4px 12px 4px;
    background-color: #952A3B
}

.google-maps {
    position: relative;
    padding-bottom: 260px; // This is the aspect ratio
    height: 0;
    overflow: hidden
}

.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important
}

p.atat {
    color: #952A3B;
    font-size: 26px;
    line-height: 26px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-align: center;
    margin-bottom: 4px
}

p.ata {
    color: #7B6C5D;
    font-size: 17px;
    line-height: 22px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    text-align: center
}

p.xerot {
    color: #A18D83;
    font-size: 26px;
    line-height: 26px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-align: center;
    margin-bottom: 4px
}

p.xero {
    color: #FFFFFF;
    font-size: 17px;
    line-height: 22px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    text-align: center
}

.footer {
    padding-top: 2px;
    height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #952A3B;
    text-align: center
}

p.atainfo {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400
}

p.atainfo a:link {color: #FFFFFF}
p.atainfo a:visited {color: #FFFFFF}
p.atainfo a:active {color: #FFFFFF}
p.atainfo a:hover {color: #FFFFFF}

p.atacr {
    color: #A18D83;
    font-size: 14px;
    line-height: 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500
}

@media screen and (max-device-width: 320px) {

.atapicf {
    margin-bottom: 36px
}

.ataata {
    padding: 6px 2px 8px 2px
}

.ataxero {
    padding: 6px 2px 8px 2px
}

p.atat {
    font-size: 22px;
    line-height: 22px;
    margin-bottom: 2px
}

p.ata {
    font-size: 15px;
    line-height: 19px;
    font-weight: 300
}

p.xerot {
    font-size: 22px;
    line-height: 22px;
    margin-bottom: 2px
}

p.xero {
    font-size: 15px;
    line-height: 19px;
    font-weight: 300
}

.footer {
    height: 36px
}

p.atainfo {
    font-size: 12px;
    line-height: 16px
}

p.atacr {
    font-size: 12px;
    line-height: 16px
}

}

@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {

.atapicf {
    margin-bottom: 36px
}

.ataata {
    padding: 10px 4px 14px 4px
}

.ataxero {
    padding: 8px 4px 12px 4px
}

p.atat {
    font-size: 32px;
    line-height: 32px;
    margin-bottom: 4px
}

p.ata {
    font-size: 19px;
    line-height: 25px
}

p.xerot {
    font-size: 32px;
    line-height: 32px;
    margin-bottom: 4px
}

p.xero {
    font-size: 19px;
    line-height: 25px
}

.footer {
    height: 36px
}

p.atainfo {
    font-size: 12px;
    line-height: 16px
}

p.atacr {
    font-size: 12px;
    line-height: 16px
}

}

@media only screen and (min-device-width: 640px) {

.container {
  	grid-template-columns: 1fr 1fr
}

.google-maps {
    padding-bottom: 52.31%; // This is the aspect ratio
}

.ataata {
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.ataxero {
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

p.atat {
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 2px
}

p.ata {
    font-size: 15px;
    line-height: 22px;
    font-weight: 300
}

p.xerot {
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 2px
}

p.xero {
    font-size: 15px;
    line-height: 22px;
    font-weight: 300
}

}

@media only screen and (min-device-width: 667px) {

p.atat {
    font-size: 22px;
    line-height: 22px;
    margin-bottom: 4px
}

p.ata {
    font-weight: 400
}

p.xerot {
    font-size: 22px;
    line-height: 22px;
    margin-bottom: 4px
}

p.xero {
    font-weight: 400
}

}

@media only screen and (min-device-width: 897px) {

.container {
    grid-template-columns: 1fr 1fr 1fr
}

.google-maps {
    padding-bottom: 52.31%; // This is the aspect ratio
}

p.ata {
    font-size: 14px;
    line-height: 20px;
    font-weight: 300
}

p.xero {
    font-size: 14px;
    line-height: 20px;
    font-weight: 300
}

}

@media only screen and (min-device-width: 981px) {

p.ata {
    font-weight: 400
}

p.xero {
    font-weight: 400
}

}

@media only screen and (min-device-width: 1235px) {

body {
    background-color: #FFFFFF;
    width: 1233px;
    margin: auto
}

.container {
    grid-template-columns: 1fr 1fr 1fr
}

.atapicf {
    margin-bottom: 0px
}

.google-maps {
    padding-bottom: 52.31%; // This is the aspect ratio
}

p.atat {
    font-size: 28px;
    line-height: 28px;
    margin-bottom: 4px
}

p.ata {
    font-size: 18px;
    line-height: 25px;
    font-weight: 400
}

p.xerot {
    font-size: 28px;
    line-height: 28px;
    margin-bottom: 4px
}

p.xero {
    font-size: 18px;
    line-height: 25px;
    font-weight: 400
}

.footer {
    position: sticky;
    width: 1233px
}

}