.img-16-9:before {
content: '';
float: left;
padding-bottom: 56.25%
}
.img-16-9:after {
content: '';
display: table;
clear: both
}
.img-3-4:before {
content: '';
float: left;
padding-bottom: 133.33333%
}
.img-3-4:after {
content: '';
display: table;
clear: both
}
.img-4-3:before {
content: '';
float: left;
padding-bottom: 75%
}
.img-4-3:after {
content: '';
display: table;
clear: both
}
.img-1-1:before {
content: '';
float: left;
padding-bottom: 100%
}
.img-1-1:after {
content: '';
display: table;
clear: both
}
@font-face {
font-family: "Ionicons";
src: url(//africainternationaldesignawards.com/entry/zoom_src/fonts/ionicons.eot?v=2.0.1);
src: url(//africainternationaldesignawards.com/entry/zoom_src/fonts/ionicons.eot?v=2.0.1#iefix) format("embedded-opentype"), url(//africainternationaldesignawards.com/entry/zoom_src/fonts/ionicons.ttf?v=2.0.1) format("truetype"), url(//africainternationaldesignawards.com/entry/zoom_src/fonts/ionicons.woff?v=2.0.1) format("woff"), url(//africainternationaldesignawards.com/entry/zoom_src/fonts/ionicons.svg?v=2.0.1#Ionicons) format("svg");
font-weight: normal;
font-style: normal
}
@-webkit-keyframes pulse {
0% {
background-color: #fff
}
50% {
background-color: #f7cd20
}
100% {
background-color: #fff
}
}
@-webkit-keyframes long-pulse {
0% {
border-color: #ffdb56
}
60% {
border-color: #ffdb56
}
100% {
border-color: #ececec
}
}
.grid {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0
}
.grid-cell {
flex: 1
}
.grid-flex>.grid-cell {
display: flex
}
.grid-top {
align-items: flex-start
}
.grid-bottom {
align-items: flex-end
}
.grid-center {
align-items: center
}
.grid-justifyCenter {
justify-content: center
}
.grid-cell-top {
align-self: flex-start
}
.grid-cell-bottom {
align-self: flex-end
}
.grid-cell-center {
align-self: center
}
.grid-cell-autoSize {
flex: none
}
.grid-fit {
flex: 1
}
.grid-full {
flex: 0 0 100%
}
.grid-1-2 {
flex: 0 0 50%
}
.grid-1-3 {
flex: 0 0 33.3333%
}
.grid-3-3 {
flex: 0 0 66.66%
}
.grid-1-4 {
flex: 0 0 25%
}
.grid-1-5 {
flex: 0 0 20%
}
@media (-break-sm) {
.small-grid-fit>.grid-cell {
flex: 1
}
.small-grid-full>.grid-cell {
flex: 0 0 100%
}
.small-grid-1-2>.grid-cell {
flex: 0 0 50%
}
.small-grid-1-3>.grid-cell {
flex: 0 0 33.3333%
}
.small-grid-1-4>.grid-cell {
flex: 0 0 25%
}
.small-grid-1-4>.grid-cell {
flex: 0 0 20%
}
}
@media (max-width: 767px) {
.grid,
.grid-flex>.grid-cell {
display: block
}
.grid-gutters.gutter-wide,
.grid-gutters,
.grid-gutters>.grid-cell {
margin: 0 !important;
padding: 0 !important
}
}
@media (-break-md) {
.med-grid-fit>.grid-cell {
flex: 1
}
.med-grid-full>.grid-cell {
flex: 0 0 100%
}
.med-grid-1-2>.grid-cell {
flex: 0 0 50%
}
.med-grid-1-3>.grid-cell {
flex: 0 0 33.3333%
}
.med-grid-1-4>.grid-cell {
flex: 0 0 25%
}
.med-grid-1-5>.grid-cell {
flex: 0 0 20%
}
}
@media (-break-lg) {
.large-grid-fit>.grid-cell {
flex: 1
}
.large-grid-full>.grid-cell {
flex: 0 0 100%
}
.large-grid-1-2>.grid-cell {
flex: 0 0 50%
}
.large-grid-1-3>.grid-cell {
flex: 0 0 33.3333%
}
.large-grid-1-4>.grid-cell {
flex: 0 0 25%
}
.large-grid-1-5>.grid-cell {
flex: 0 0 20%
}
}
.grid-gutters {
margin: -.5em 0 .5em -.5em
}
.grid-gutters>.grid-cell {
padding: .5em 0 0 .5em
}
.grid-gutters.gutter-wide {
margin: 0 0 0 -2em
}
.grid-gutters.gutter-wide>.grid-cell {
padding: 0 0 0 2em
}
.grid-guttersLg {
margin: -1.5em 0 1.5em -1.5em
}
.grid-guttersLg>.grid-cell {
padding: 1.5em 0 0 1.5em
}
.grid-guttersXl {
margin: -2em 0 2em -2em
}
.grid-guttersXl>.grid-cell {
padding: 2em 0 0 2em
}
@media (-break-sm) {
.small-grid-gutters {
margin: -1em 0 1em -1em
}
.small-grid-gutters>.grid-cell {
padding: 1em 0 0 1em
}
.small-grid-guttersLg {
margin: -1.5em 0 1.5em -1.5em
}
.small-grid-guttersLg>.grid-cell {
padding: 1.5em 0 0 1.5em
}
.small-grid-guttersXl {
margin: -2em 0 2em -2em
}
.small-grid-guttersXl>.grid-cell {
padding: 2em 0 0 2em
}
}
@media (-break-md) {
.med-grid-gutters {
margin: -1em 0 1em -1em
}
.med-grid-gutters>.grid-cell {
padding: 1em 0 0 1em
}
.med-grid-guttersLg {
margin: -1.5em 0 1.5em -1.5em
}
.med-grid-guttersLg>.grid-cell {
padding: 1.5em 0 0 1.5em
}
.med-grid-guttersXl {
margin: -2em 0 2em -2em
}
.med-grid-guttersXl>.grid-cell {
padding: 2em 0 0 2em
}
}
@media (-break-lg) {
.large-grid-gutters {
margin: -1em 0 1em -1em
}
.large-grid-gutters>.grid-cell {
padding: 1em 0 0 1em
}
.large-grid-guttersLg {
margin: -1.5em 0 1.5em -1.5em
}
.large-grid-guttersLg>.grid-cell {
padding: 1.5em 0 0 1.5em
}
.large-grid-guttersXl {
margin: -2em 0 2em -2em
}
.large-grid-guttersXl>.grid-cell {
padding: 2em 0 0 2em
}
}
.blocker {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 1;
padding: 20px;
box-sizing: border-box;
background-color: #000;
background-color: rgba(0, 0, 0, 0.75);
text-align: center
}
.blocker:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.05em
}
.modal {
display: inline-block;
position: relative;
z-index: 100;
width: 80vw;
max-width: 1200px;
min-width: 800px;
background: #fff;
padding: 16px;
margin-top: 50px;
border-radius: 6px;
text-align: left
}
.modal a.close-modal {
position: absolute;
top: 10px;
right: 10px;
font-size: 30px;
display: block;
width: 30px;
height: 30px
}
.modal a.close-modal:before {
font-family: "Ionicons";
content: "\f2d7";
line-height: 30px;
color: #747879
}
.modal a.close-modal:hover:before {
color: #141416
}
.modal-spinner {
display: none;
width: 64px;
height: 64px;
position: fixed;
top: 50%;
left: 50%;
margin-right: -32px;
margin-top: -32px;
background: url(data:image/gif;base64,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) #111 no-repeat center center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px
}
* {
box-sizing: border-box;
outline: none
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}
body {
line-height: 1;
-webkit-font-smoothing: antialiased
}
ol,
ul,
li {
list-style: none
}
blockquote,
q {
quotes: none
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
img.imglist {
display: block;
width: 100%;
height: auto
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 50px white inset;
-webkit-text-fill-color: #2a2b2d
}
body { line-height: 1.3;
font-size: 16px;
font-weight: 400;
display: flex;
min-height: 100vh;
flex-direction: column
}
h1,
h2 {
text-transform: uppercase
}
h1 {
margin-top: 50px
}
h1:first-of-type {
margin-top: 0
}
.logo {
font-size:36px;
padding:10px 0;
font-weight:bold;
}
.logo img {
width: 100px; }
.logo a {
border: none !important; }
.logo a:hover {
border: none !important; }
.logo a:hover img {
opacity: .8; }
.sw {
position: relative;
width: 100%;
margin: 0 auto;
max-width: 1400px;
padding: 0 20px
}
.sw.sw-full {
max-width: 1600px; }
.sw.narrow {
max-width: 960px
}
.sw.v-narrow {
max-width: 650px
}
.sw.wide {
max-width: 1400px
}
header {
background: #fff;
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
padding: 10px 0; margin-bottom:10px;
}
header h1 {
margin-left: 16px;
margin-bottom: 0
}
header .menu {
text-align: right
}
header .menu li {
margin-left: 20px;
display: inline-block
}
header .menu li a {
color: #747879
}
header .menu li:hover a {
color: #2cc0ce
}
header #branding {
width: 220px;
text-rendering: optimizeLegibility
}
header .px3-grey {
fill: #747879
}
header .px3-white {
fill: #fff
}
#menu-header-main {
text-align: right
}
#menu-header-main li {
margin-right: 12px
}
#menu-header-main li:last-of-type {
margin-right: 20px
}
.wrap {
flex: 1
}
section {
position: relative
}
.content h1 {
margin-bottom: 20px
}
section.partners {
padding: 50px 0
}
.hero {
height: calc(100vh - 52px);
width: 100%;
position: relative;
background: #f7f7f7;
overflow: hidden;
min-height: 450px
}
.hero.half {
height: calc(60vh)
}
.hero.third {
height: calc(30vh)
}
.hero .bg-img {
background-size: cover;
height: 100%;
width: 100%;
background-position: bottom;
position: absolute;
z-index: 0;
top: 0;
left: 0;
opacity: 0;
transition: opacity 2s ease-in
}
.hero .bg-img.loaded {
opacity: 1
}
.hero h3 {
font-size: 32px;
margin-bottom: 10px;
text-transform: uppercase
}
.hero p {
margin-bottom: 20px
}
.hero .copy {
position: absolute;
color: #2a2b2d;
bottom: 50px;
background: #fff;
max-width: 500px;
padding: 40px;
left: 20px;
z-index: 1
}
.hero .copy h3 a,
.hero .copy a.more {
color: #2a2b2d !important
}
.hero .attr {
position: absolute;
left: 0;
bottom: 0;
padding: 4px 8px;
background: #f7f7f7;
font-size: 10px;
z-index: 1
}
.hero .attr:before {
content: "Photo: "
}
.slider {
height: 100%;
width: 300%;
overflow: hidden;
position: absolute
}
.slide {
height: 100%;
width: 100vw;
position: relative;
float: left;
background-position: -100px 0
}
.hero nav div.icon {
position: absolute;
z-index: 2;
font-size: 48px;
color: #fff;
cursor: pointer
}
.break {
font-weight: bold;
display: inline-block;
margin-right: 6px
}
.hero nav div.arrow-left,
.hero nav div.arrow-right {
width: 100px;
height: 100%;
top: 0;
z-index: 2
}
.arrow-left {
left: 0
}
.arrow-right {
right: 0
}
.arrow-left:before {
font-family: "Ionicons";
position: absolute;
top: 40%;
content: "\f3d2";
left: 40px;
opacity: .2;
-webkit-transition: all 100ms ease-in;
transition: all 100ms ease-in
}
.arrow-right:before {
font-family: "Ionicons";
position: absolute;
content: "\f3d3";
top: 40%;
right: 40px;
opacity: .2;
-webkit-transition: all 100ms ease-in;
transition: all 100ms ease-in
}
.arrow-left:hover:before {
opacity: .8
}
.arrow-right:hover:before {
opacity: .8
}
.cta {
background: #2cc0ce;
color: #fff;
text-align: center;
padding: 40px 20px;
text-transform: uppercase
}
.cta h3 {
font-size: 28px
}
.cta span {
font-size: 15px;
font-weight: bold;
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
border: 2px solid white;
border-radius: 3px
}
.intro {
background: #fff;
padding: 100px 0
}
.intro .copy {
font-size: 18px
}
.intro p {
width: 80%;
margin-bottom: 20px
}
.competitions {
background: #fff;
padding: 50px 0
}
.fee {
margin-bottom: 30px
}
.fee .copy {
padding: 20px;
background: #fff;
text-align: center;
cursor: pointer;
display: flex;
width: 100%;
flex-direction: column;
border: 2px solid #ececec;
border-radius: 6px
}
.fee .label {
font-weight: bold;
text-transform: uppercase
}
.fee .callout {
font-size: 80px;
font-weight: bold;
margin-bottom: 10px
}
.fee .desc {
font-size: 13px;
color: #747879
}
.fee .submit {
padding: 14px 0;
background: #2cc0ce;
color: #fff;
border-radius: 2px;
margin-top: auto
}
.fee .submit a,
.fee .submit a:hover {
color: #fff !important;
font-weight: bold
}
.winner {
position: relative;
margin-bottom: 50px;
cursor: pointer
}
.winner:last-of-type {
margin-bottom: 0
}
.winner h3 {
font-weight: bold
}
.winner p {
color: #747879;
font-size: 14px
}
.winner .copy {
background: #141416;
padding: 20px 40px;
width: 40%
}
.winner .copy a {
color: #fff
}
.winners .grid-cell a {
color: #2a2b2d
}
.project-prize {
margin-top: 4px;
color: #747879;
font-size: 14px;
display: inline-block;
font-weight: bold
}
.winner-group {
margin-top: 50px
}
.winner-group:first-of-type {
margin-top: 0 !important
}
.main-winners h3 {
margin-bottom: 40px !important
}
.winner-group h3 {
font-size: 20px !important;
padding-bottom: 12px;
border-bottom: 2px solid #2a2b2d
}
.winner-subgroup {
margin-top: 30px
}
.winner-studio a {
color: #2cc0ce !important
}
.winner-subgroup h4 {
font-weight: bold !important;
margin-bottom: 20px !important;
color: #2cc0ce
}
.winner-details .grid-cell>div {
border-bottom: 1px solid #b3b3b3;
padding: 5px 0
}
.winner-details {
margin-bottom: 20px
}
.winner-details .grid-cell>div:first-of-type {
border-top: 1px solid #b3b3b3
}
.filter-wrap {
padding: 20px 0 50px 0
}
.filter-wrap input {
padding: 8px;
font-size: 15px;
border: 2px solid #b3b3b3;
width: 80%;
border-radius: 2px
}
.anchor-top {
text-align: right
}
.anchor-top a {
font-size: 13px;
font-weight: bold
}
.anchor-top a:hover {
color: #2cc0ce
}
.filter-header {
margin-bottom: 20px
}
.filter-header h4 {
font-size: 18px;
cursor: pointer;
font-weight: bold !important
}
.filter-header h4:hover {
text-decoration: underline
}
.filter-categories h4 {
font-weight: bold !important;
color: #2cc0ce !important;
font-size: 15px !important
}
.filter-categories {
display: none;
padding-top: 20px
}
.filter-categories ul li {
margin-bottom: 10px;
list-style-type: none !important
}
.filter-categories ul li a:hover {
text-decoration: underline
}
.project-details {
padding: 10px 10px 16px 0
}
.project-title {
font-size: 14px
}
.project-details .project-agency {
padding-bottom: 5px;
border-bottom: 1px solid;
font-weight: bold;
margin-bottom: 5px;
}
.news {
padding: 50px 0
}
.news .copy {
padding: 20px 20px 20px 0;
font-size: 20px
}
.news h3 {
font-weight: 500
}
a.pic {
cursor: pointer
}
a .pic:hover {
opacity: .7
}
section.jury {
padding: 50px 0 100px;
background: #f7f7f7;
margin-top: 50px
}
.jury .copy {
padding: 10px 0
}
.jury h3 {
margin: 0 0 4px !important;
font-size: 24px
}
.juror h2 {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
font-size: 16px !important
}
.juror h3 {
margin: 6px 0 4px !important
}
.agency,
.city,
.title {
color: #2a2b2d;
font-style: italic;
display: block;
margin-bottom: 4px
}
.juror .bio {
margin-top: 8px;
display: block;
font-style: normal !important
}
.competition {
margin-top: 30px;
cursor: pointer
}
.competition p {
margin-bottom: 0 !important
}
.competition:hover,
.competition:hover a,
.competition:hover h3 {
color: #2cc0ce
}
.competition h2 {
margin-bottom: 0 !important
}
.competition h3 {
font-size: 20px;
border-bottom: 2px solid #141416;
padding-bottom: 2px;
display: inline !important
}
.competition a {
margin-top: 10px;
display: block
}
.content .copy {
padding-right: 15px
}
.content .date {
display: block;
margin: 20px 0 10px
}
h1 {
font-size: 32px !important;
text-transform: uppercase;
margin-bottom: 14px;
letter-spacing: 3px
}
h2 {
font-size: 28px;
text-transform: uppercase;
margin-bottom: 10px;
letter-spacing: 2px
}
.content h2 {
margin: 40px 0 20px
}
.content h3,
.content h4 {
display: inline-block;
font-weight: 500
}
.content h3 {
font-size: 18px;
margin-bottom: 10px;
line-height: 1.2;
text-transform: uppercase
}
.content h4 {
margin-bottom: 6px
}
.content p {
margin-bottom: 24px
}
.content ul {
margin-bottom: 30px
}
.content ul li {
margin-bottom: 10px;
list-style-type: circle;
margin-left: 20px
}
.content a {
color: #2cc0ce
}
ul.faqs li:nth-child(odd) {
font-weight: bold
}
ul.faqs li:nth-child(even) {
margin-bottom: 20px
}
.sticky-wrap {
width: 100%;
text-transform: uppercase;
top: 0;
padding: 10px 0;
font-weight: bold;
font-size: 14px;
background: #2a2b2d;
color: #fff;
text-align: center;
position: fixed;
z-index: 100;
transition: all 200ms ease-in
}
.sticky-wrap:hover {
background: #2cc0ce
}
.sticky-wrap a,
.sticky-wrap a:hover {
color: #fff
}
.image-main {
margin-bottom: 10px
}
.winners .content-wrap {
margin-top: 20px;
padding-top: 20px; }
.crumb {
padding: 12px 0
}
footer {
background: #f7f7f7;
margin-top: 50px;
padding-top: 50px;
border-top: 1px solid #ececec;
font-size: 14px;
padding-bottom: 50px
}
footer p {
width: 85%
}
footer li {
margin-bottom: 4px
}
footer li a {
color: #2a2b2d
}
footer li a:hover {
color: #2cc0ce
}
a {
color: #141416;
text-decoration: none
}
a:hover {
color: #2cc0ce
}
a.more {
display: inline-block;
margin-top: 30px;
color: #747879 !important;
font-size: 14px;
font-weight: normal !important
}
a.more:hover {
color: #2cc0ce !important
}
a.submit {
background: #c2c5c7;
padding: 10px 20px;
margin-right: 0;
border-radius: 3px;
margin-right: 15px;
font-size: 14px;
text-transform: uppercase
}
a.submit:hover {
background: #2cc0ce !important;
color: #fff !important
}
.standout p {
font-weight: bold
}
.current_page_item a {
color: #2cc0ce !important
}
#menu-header-main li:last-of-type .current_page_item {
background: #2cc0ce
}
#menu-header-main li:last-of-type .current_page_item a {
color: #fff !important
}
footer .current_page_item a {
color: #141416 !important;
font-weight: bold
}
strong {
font-weight: bold
}
.alert {
background: #f7cd20 !important;
font-weight: bold !important
}
.alert p {
color: #141416 !important
}
.anniversary {
background: #f7cd20;
padding: 20px;
margin-bottom: 20px
}
.anniversary p {
margin-bottom: 0
}
.pop {
padding: 30px 30px 50px;
background-color: #f7f7f7;
-webkit-transition: all 200ms ease-in;
transition: all 200ms ease-in
}
.pop:hover {
background-color: #2cc0ce
}
.pop a:hover {
color: #141416
}
.pop h2 {
display: inline !important;
line-height: 1.6
}
.pop p {
margin-top: 20px
}
.pop a span {
font-weight: bold;
display: inline-block;
margin-top: 24px;
font-size: 18px
}
.medal img {
width: 200px
}
.link {
margin-top: 50px;
display: block;
font-weight: bold;
text-align: center
}
.link a {
color: #747879;
border: 2px solid #747879;
padding: 10px 20px;
border-radius: 3px
}
.link a:hover {
border-color: #2a2b2d;
color: #2a2b2d
}
.pic {
width: 100%;
background-size: cover;
background-color: #fff;
position: relative;
background-position: 50%;
-webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in
}
.partners .pic {
background-size: contain;
background-repeat: no-repeat;
background-position: 50%
}
.partners .grid-cell {
margin-bottom: 40px
}
.pic.none:before {
content: " ";
background-image: url(//africainternationaldesignawards.com/entry/zoom_src/fonts/cross.svg);
background-size: 20%;
background-position: 50%;
background-color: #141416;
position: absolute;
top: 0;
background-repeat: no-repeat;
bottom: 0;
width: 100%
}
.pic-container {
background-color: #141416;
position: relative
}
.pic:after {
content: '';
display: table;
clear: both
}
@media (min-width: 768px) and (max-width: 1023px) {
header h1 {
margin-top: 16px !important
}
header .grid {
flex-direction: column
}
#menu-header-main {
text-align: left
}
.hero .copy {
max-width: inherit
}
.grid-1-3 {
flex: 1
}
}
@media (max-width: 767px) {
.image-main {
display: none;
}
header {
padding: 10px
}
body {
padding-top: 0
}
.sticky-wrap {
display: none
}
.text-mark {
display: none
}
a.more,
a.submit {
display: block;
text-align: center
}
.mobile {
position: absolute;
top: 25px;
right: 20px;
width: 30px
}
.mobile span {
height: 2px;
display: block;
margin-bottom: 6px;
background: #2a2b2d
}
.mobile span:last-of-type {
margin-bottom: 0
}
header h1 {
margin: 0 !important
}
header #branding {
width: 150px
}
section h2 {
text-align: center
}
header .menu li {
display: block;
text-align: center;
padding: 14px 0
}
.link {
text-align: center
}
section.partners .pic {
background-size: 50%;
height: 150px
}
.menu-header-main-container {
display: none
}
#menu-header-main li {
margin-right: 0;
padding: 12px
}
#menu-header-main li:last-of-type {
padding: 14px 0;
margin-bottom: 0
}
.content.partners .img-1-1:before,
.content.partners .img-4-3:before,
.content.partners .img-3-4:before,
.content.partners .img-16-9:before {
padding-bottom: 0
}
.pad {
padding-left: 20px;
padding-right: 20px
}
.winner {
margin-bottom: 10px
}
.winner .copy {
width: 100%;
padding: 20px
}
.intro {
padding: 50px 20px 150px;
background-position: 0 30px
}
.winners h2,
.news h2,
.jury h2 {
margin-left: 20px
}
.competitions,
.news {
padding: 0
}
.jury .copy {
padding: 10px 20px
}
.intro p {
width: 100%
}
.pop {
padding: 40px 20px
}
.content {
padding-top: 20px;
padding-left: 20px;
padding-right: 20px
}
.cta h3 {
font-size: 22px
}
.hero .copy {
width: 100%;
left: 0;
top: 0;
right: 0;
background: rgba(255, 255, 255, 0.7);
height: 100%;
text-align: center;
bottom: 0;
max-width: inherit
}
.hero p {
margin-bottom: 40px;
font-size: 18px
}
footer {
text-align: center;
padding: 20px;
font-size: 16px
}
footer p {
margin-bottom: 20px !important;
width: 100%
}
.menu-main-header-nav-container {
display: none;
}
}
select {
-webkit-appearance: none;
border: 2px solid #ccc;
outline: 0;
font-size: 14px;
display: block;
font-weight: bold;
margin-top: 30px;
color: #929292;
width: 310px;
padding: 12px 10px;
text-align: center;
background: url(https://architectureprize.com/submit/images/arrow-drop.png) no-repeat 95% 50%;
background-color: #fff;
}