.wrapper { @include breakpoint(small) { @include padding(2em, 0); } > .inner { width: 55em; margin: 0 auto; @include breakpoint(large) { width: 90%; } @include breakpoint(medium) { width: 100%; } > p, header { width: 40em; @include breakpoint(large) { width: 45em; } @include breakpoint(medium) { width: 90%; } } } } twentytwenty-wrapper img { width: 100%; } @include breakpoint(small) { .features { li { padding: 1em; h3, p { text-align: left; } } } } /* Section Three */ #three .inner { width: 60em; @include breakpoint(large) { width: 100%; } @include breakpoint(medium) { width: 100%; } } // menu small devices #menu { background: #60768B; ul { > li { > a { @include breakpoint(small) { line-height: 2em; } font-family: 'Open Sans', sans-serif; font-weight: bold; } } } } // rewrite link colors a { color: #4f85bb; } .wrapper.style3 { background: #3D4955; } // quotes blockquote { border-left: solid 0px _palette(border); font-style: normal; font-size: 1em; line-height: 2.1em; margin: 0 0 _size(element-margin) 0; padding: 1.5em; color: rgb(80,80,80); background-color:rgb(240,240,240); @include breakpoint(small){ line-height: 1.9em; font-size: 1em; padding: 1em; } li { margin-bottom: 1em; } } .video-container { background-color:"#cad2d3"; } canvas { margin: 0 auto; } .inner img { width: 100%; } #header { h1 { a::before { content: ''; background: url("images/inc-logo.png"); background-repeat: no-repeat; position: relative; display: inline-block; width: 30px; height: 30px; background-size: 20px; top: 7px; } } } #banner { @include breakpoint(small){ padding: 7em .5em 5em .5em; } } .caption { width: 55em; line-height: 1.45em; color: rgb(120,120,120); font-size: .8em; text-align: right; font-weight: 100; font-family: 'Open Sans', sans-serif; @include breakpoint(small){ width: 90%; } }