html,
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    line-height: normal;
    max-width: 100%;
    overflow-x: hidden;
}

p {
    margin: 0;
}

.page-container {
    max-width: 1200px;
}

.region {
    position: relative;
}

.region:before {
    display: block;
    content: '';
    width: 100%;
}

.region .experience-component {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.page-designer-reference .row {
    margin-right: 0;
    margin-left: 0;
}

.page-designer-reference .pl-2,
.page-designer-reference .px-2 {
    padding-left: 0 !important;
}

.page-designer-reference .pr-2,
.page-designer-reference .px-2 {
    padding-right: 0 !important;
}

.page-designer-reference div[class*='experience-layouts'] {
    margin-bottom: 50px;
}

/* padding-top in percentages refers to parent width
   this allows us to specify an aspect-ratio */
.region_landscape-large:before {
    padding-top: calc(300 / 1024 * 100%);
}

.region_square:before {
    padding-top: calc(1 / 1 * 100%);
}

.region_landscape-small:before {
    padding-top: calc(1 / 2 * 100%);
}

.region_portrait-small:before {
    padding-top: calc(2 / 1 * 100%);
}

div.sf-interactions-proxyHoverContainer a {
    overflow: visible;
}

button,
.button,
.buttonstyle,
input[type='button'] {
    height: 0;
    border-radius: 3px;
}