首先一些背景。我创建了一个固定的页脚,当用户滚动到页面底部工作正常时显示。现在问题。当用户滚动到底部时,会在页脚上方找到一个以红色突出显示的空格。
我尝试将页脚放置得更高,以便通过将bottom:
中的像素添加到.goodbye
标记来重叠空格,但这并没有帮助。这是JSFiddle in fullscreen,让您了解我所谈论的内容。 注意尴尬的红色空间。如何完全和响应地删除它,因此在调整视口大小时也没有空间?
更新
请查找下面的代码。
html body {
width:100%;
max-height: 400px;
position: relative;
background-color:red;
}
.goodbye {
position: fixed;
bottom: 0;
background-color: #f4f4f4;
z-index: -9;
width: 100%;
height: 500px;
padding: 2rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
text-align: center;
}
.goodbye a {
font-size: 4em;
font-family:'brandon-grotesque';
}
.text-go {
color: red;
background-color: pink;
height: 80%;
width: 100%;
}
.social-links {
background-color: yellow;
height: 20%;
widows: 100%;
}
.lineout {
width: 30%;
background-image: url(http://kadeem.london/Image/line-out.png);
}
@charset"UTF-8";
.Second-Header, .row, sub, sup {
position: relative
}
.Intro-Video, body {
-webkit-backface-visibility: hidden
}
.byebye {
position: relative;
}
.contact ul, ul, ul.proficient {
list-style-type: none
}
.menubutton, html {
-webkit-text-size-adjust: 100%
}
.menubutton, .row {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none
}
.Biographical-Content a, .contact li, .contact li a, .contact ul, .endh4 a, .footer, .item-type-double .item-hover, .overlay ul li a, .registry-description p a, .registry-description p a:hover {
text-decoration: none
}
.width (@cols:1) {
width: (@cols * (@column +@gutter) -@gutter) /@em;
}
article, aside, blockquote, body, dd, div, dl, dt, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, label, legend, li, menu, nav, ol, p, pre, section, td, th, ul {
margin: 0;
padding: 0;
border: 0
}
article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, nav, section, video {
display: block
}
html {
height: 100%;
-ms-text-size-adjust: 100%
}
body {
min-height: 100%
}b, strong {
font-weight: 700
}
abbr[title] {
border-bottom: 1px dotted
}
table {
border-collapse: collapse;
border-spacing: 0
}
a img, img {
-ms-interpolation-mode: bicubic;
border: 0
}
button, input, select, textarea {
margin: 0;
font-size: 100%;
line-height: normal;
vertical-align: baseline
}
button, html input[type=button], input[type=reset], input[type=submit] {
cursor: pointer;
-webkit-appearance: button
}
input[type=radio], input[type=checkbox] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box
}
textarea {
overflow: auto
}
::selection {
background: #e94378;
color: #fff
}
::-moz-selection {
background: #e94378;
color: #fff
}
img::selection {
background: 0 0
}
img::-moz-selection {
background: 0 0
}
@media screen and (max-width: 1px) {
body {
font-size: (@font-size + 2)/16*1em
}
}
body {
-webkit-tap-highlight-color: rgba(255, 0, 0, .62);
font: 100%/1.5 serif
}
@media (min-width: 600px) {
body {
font: 112.5%
}
}
::-webkit-scrollbar, ::-webkit-scrollbar-thumb {
width: 7px;
height: 7px;
border-radius: 4px
}
::-webkit-scrollbar, ::-webkit-scrollbar-track-piece {
background: #fff
}
::-webkit-scrollbar-thumb {
background: #232323
}
::-webkit-scrollbar-button {
display: none
}
.row {
display: block;
margin-bottom: 1em;
margin-top: 5em;
color: #000
}
.Second-Header {
display: block;
margin-bottom: 5em;
margin-top: 4em;
color: #fff
}
.Second-Header h2 {
font-family:'Abril Fatface', cursive;
font-size: 2.5em;
font-weight: 400;
color: fff
}
body, h1, h2, h3, h4, h5, h6 {
font-size: 1rem;
font-weight: 500;
font-family: brandon-grotesque, brandon-grotesque, Futura, sans-serif
}
@media (max-width: 777px) {
.Second-Header {
margin-bottom: 4em;
margin-top: 3em
}
.Second-Header h2 {
font-size: 2em
}
}
@media (max-width: 666px) {
.Second-Header {
margin-bottom: 3em;
margin-top: 2em
}
.Second-Header h2 {
font-size: 1.8em
}
}
@media (max-width: 555px) {
.Second-Header {
margin-bottom: 2em;
margin-top: .5em
}
.Second-Header h2 {
font-size: 1.5em
}
}
@media (max-width: 444px) {
.Second-Header h2 {
font-size: 1.3em
}
}
@media (max-width: 333px) {
.Second-Header h2 {
font-size: 1.2em
}
}
@media (max-width: 222px) {
.Second-Header h2 {
font-size: 1em
}
}
@media (max-width: 888px) {
.row {
margin: 3em 0 0
}
}
@media (max-width: 666px) {
.row h2 {
margin-top: 1.5em
}
}
@media (max-width: 555px) {
.row h2 {
margin-top: 1em
}
}
.row h2 {
font-family:'Abril Fatface', cursive;
font-size: 2.5em;
font-weight: 400;
color: #000
}
@media (max-width: 777px) {
.row h2 {
font-size: 2em
}
}
@media (max-width: 666px) {
.row h2 {
font-size: 1.8em
}
}
@media (max-width: 555px) {
.row h2 {
font-size: 1.5em
}
}
@media (max-width: 444px) {
.row h2 {
margin-top: 0;
margin-bottom: 0;
font-size: 1.3em
}
}
@media (max-width: 333px) {
.row h2 {
font-size: 1.2em
}
}
@media (max-width: 222px) {
.row h2 {
font-size: 1em
}
}
.row h2 span:after {
content:'The Man'
}
h1 {
font-size: 2.5em
}
h2 {
font-size: 1.875em
}
p {
font-size: .875em
}
.My-Gems {
width: 100%;
height: 100%;
margin-top: -360px;
overflow: hidden;
}
@media screen and (max-width: 444px) {
.My-Gems {
width: 100%
}
}
@media screen and (max-width: 333px) {
.My-Gems {
width: 100%
}
}
.global-container {
width: 100%;
position: relative;
background-color: #fff;
}
.high-container {
width: 100%;
position: relative;
background-color: transparent;
height: 3200px;
}
.content-container, .post-container {
text-align: center;
padding: 0;
width: 100%;
background-color: #50b796;
height: 100%;
margin: 0;
position: relative
}
.content-container {
min-height: 600px;
max-width: 1359px
}
.post-container {
z-index: 0;
top: 400px;
max-height: 100%
}
.Well-Aligned {
position: absolute;
left: 0;
top: -280px;
width: 100%;
height: 600px;
background-color: #fff;
z-index: 0;
-webkit-transform: skewY(5deg);
-moz-transform: skewY(5deg);
-ms-transform: skewY(5deg);
-o-transform: skewY(5deg);
transform: skewY(5deg)
}
@media (max-width: 999px) {
.Well-Aligned {
height: 560px
}
}
@media (max-width: 777px) {
.Well-Aligned {
height: 520px
}
}
@media (max-width: 666px) {
.Well-Aligned {
height: 470px
}
}
@media (max-width: 555px) {
.Well-Aligned {
height: 420px
}
}
@media (max-width: 333px) {
.Well-Aligned {
height: 380px
}
}
.Biographical-Content {
z-index: 99999;
display: block;
top: -350px;
position: relative;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
font-family: brandon-grotesque, brandon-grotesque, Futura, sans-serif;
width: 65%;
margin-left: auto;
text-align: center;
padding: 0;
margin-right: auto
}
@media (max-width: 444px) {
.Biographical-Content {
top: -365px
}
}
@media (max-width: 333px) {
.Biographical-Content {
top: -375px
}
}
.Biographical-Content p {
margin-top: 20px;
padding: 0;
transition: all .3s ease-out;
font-size: 20px;
line-height: 2em
}
.Biographical-Content a, .Biographical-Content p {
color: #fff;
font-family: brandon-grotesque, brandon-grotesque, Futura, sans-serif;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out
}
@media (max-width: 1111px) {
.Biographical-Content {
width: 70%
}
.Biographical-Content p {
font-size: 18px;
line-height: 1.8em
}
}
@media (max-width: 999px) {
.Biographical-Content {
width: 75%
}
.Biographical-Content p {
font-size: 16px;
line-height: 1.6em
}
}
@media (max-width: 555px) {
.Biographical-Content p {
font-size: 14px;
line-height: 1.4em
}
.Biographical-Content {
width: 80%
}
}
@media (max-width: 444px) {
.Biographical-Content p {
font-size: 12px;
line-height: 1.4em
}
.Biographical-Content {
width: 85%
}
}
.Biographical-Content a {
cursor: pointer;
border-bottom: 2px solid #fff;
transition: all .3s ease-out
}
.Biographical-Content a:hover {
background-color: #e94378;
color: #fff;
transition: all .3s ease-out
}
.Biographical-Content a:hover, .item {
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out`;
-webkit-transition: all .3s ease-out
}
#intro-text {
color: #f3f3f3;
font-size: 2em;
}
.Intro-Video, .step {
overflow: hidden;
position: relative;
background-color: #fff
}
.step {
width: 75%;
-webkit-background-size: cover;
z-index: 999999999999999;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url(http://kadeem.london/Image/Kadeem-Laurie-Lisbon-min.jpg);
margin: 0 auto;
text-align: center;
background-repeat: no-repeat
}
.step:nth-child(odd) {
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left
}
.step:nth-child(even) {
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right
}
.step.out-view:nth-child(odd) {
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left;
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg)
}
.step.out-view:nth-child(even) {
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right;
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg)
}
.Kadeem-Logo {
position: relative;
top: 0;
width: 100%;
display: block
}
.Kadeem-Logo img {
display: block;
width: auto;
max-width: 100%
}
.Intro-Video {
z-index: 9999;
width: 100%;
display: block
}
.video-box {
height: 100%;
width: 100%;
position: relative
}
#video-container {
height: 100%;
width: 100%;
overflow: hidden
}
@media (max-width: 600px) {
.Intro-Video {
background-image: url(http://kadeem.london/Image/kadeem-bg-min.jpg);
width: 100%;
background-size: cover
}
.video-box {
visibility: hidden
}
#video-container {
visibility: visible
}
}
.hide, .overlay-hugeinc {
visibility: hidden
}
video {
position: absolute;
z-index: 0;
background: url(http://kadeem.london/Image/kadeem-bg.jpg) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
video.fillWidth {
width: 100%
}
@media (max-width: 600px) {
video {
visibility: hidden
}
}
.item {
text-align: center;
transition: all .3s ease-out;
float: left;
position: relative;
width: 50%;
height: 100%
}
.item-hover, .item-hover .mask, .item-img, .item-info {
width: 100%;
height: 100%
}
.item-hover, .item-hover .mask {
position: absolute;
top: 0;
height: 100%;
left: 0
}
.item-type-double .item-hover {
z-index: 5;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
cursor: pointer;
display: block;
text-align: center
}
.item-type-double .item-info {
color: #fff;
display: table;
position: relative;
z-index: 5
}
.item-type-double .item-info div.mycell {
vertical-align: middle;
height: 100%;
display: table-cell
}
.item-type-double .item-info .headline {
font-size: 2.4em;
font-family:'Proxima Nova' sans-serif;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
@media (max-width: 500px) {
.item {
width: 100%;
height: 100%
}
}
@media (max-width: 888px) {
.item-type-double .item-info .headline {
font-size: 1.8em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 666px) {
.item-type-double .item-info .headline {
font-size: 1.4em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 444px) {
.item-type-double .item-info .headline {
font-size: 1.3em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 390px) {
.item-type-double .item-info .headline {
font-size: .8em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 333px) {
.item-type-double .item-info .headline {
font-size: .6em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 222px) {
.item-type-double .item-info .headline {
font-size: .5em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
.item-type-double .item-info .date {
font-size: 20px;
font-family: Canter;
text-transform: uppercase
}
@media (max-width: 444px) {
.item-type-double .item-info .date {
font-size: 16px;
text-transform: uppercase
}
}
@media (max-width: 333px) {
.item-type-double .item-info .date {
font-size: 10px;
text-transform: uppercase
}
}
.item-type-double .item-hover .mask {
background-color: #000;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .5;
z-index: 0
}
.item-type-double .item-hover:hover .line {
width: 90%
}
.item-type-double .item-hover:hover {
opacity: 1
}
.item-img {
width: 100%;
z-index: 0
}
.item-img img {
width: 100%;
display: block
}

<body>
<div class="high-container">
<div class=global-container>
<div class=Intro-Video>
<div class=video-box>
<div id=video-container>
<video autoplay class=fillWidth>
<source src=Video/Trailer.mp4 type="video/mp4" />
</video>
<div class=Kadeem-Logo>
<img src=http://goo.gl/ORijnS>
</div>
</div>
<!-- Video Container -->
</div>
<!-- Video Box-->
</div>
<!-- Intro Video -->
<div class=content-container>
<div class=post-container>
<div class=Biographical-Content>
<div class="step out-view"></div>
<!--Image-->
<br>
<p>Hello Stackers</p>
</div>
<div class=My-Gems>
<div class=Second-Header>
<h2><img src="http://goo.gl/7O6b6d"/></h2>
</div>
<div class="item item-type-double">
<div class=item-img>
<img src=http://goo.gl/mDyMek class=menukadeem title=Piggy-Box-Logo />
</div>
<a class=item-hover href=designs.html>
<div class=item-info>
<div class=mycell>
<div class=headline>Designs</div>
</div>
</div>
<div class=mask></div>
</a>
</div>
<div class="item item-type-double">
<div class=item-img>
<img src=http://goo.gl/C4zMbq alt=Metaphon-Fitness title=Metaphon-Fitness alt=Kadeem-Laurie-Metaphon-Fitness style="width:100%" />
</div>
<a class=item-hover href=#>
<div class=item-info>
<div class=mycell>
<div class=headline>Events</div>
</div></div>
<div class=mask></div>
</a>
</div>
</div>
<!--My Gems-->
</div>
<!--Post Container-->
</div>
<!--Content Container-->
<footer class="goodbye">
<div class="text-go"><a></a>
</div>
<hr>
<div class="social-links"></div>
</footer>
</div>
<!-- Global Container-->
&#13;
答案 0 :(得分:1)
看起来这个问题很不稳定box model。幸运的是,这是可以解决的!
一旦你重构CSS以使.content-container的内容适合它(你可以通过将其悬停在chrome的检查器中的元素上来快速轻松地测试),你可以在.content-container中添加一个底部边距。与页脚高度相同。然后你将能够从位置保持你的酷滚动显示布局:固定,你将不需要.high容器的固定像素高度(这导致白色空间),因为底部边缘将为页脚预留空间。
修改这是一个link to a fiddle,有一些快速的改动。
这是来自那个小提琴的CSS:
html body {
width:100%;
max-height: 400px;
position: relative;
background-color:red;
}
.goodbye {
position: fixed;
bottom: 0;
background-color: #f4f4f4;
z-index: -9;
width: 100%;
height: 500px;
padding: 2rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
text-align: center;
}
.goodbye a {
font-size: 4em;
font-family:'brandon-grotesque';
}
.text-go {
color: red;
background-color: pink;
height: 80%;
width: 100%;
}
.social-links {
background-color: yellow;
height: 20%;
widows: 100%;
}
.lineout {
width: 30%;
background-image: url(http://kadeem.london/Image/line-out.png);
}
@charset"UTF-8";
.Second-Header, .row, sub, sup {
position: relative
}
.Intro-Video, body {
-webkit-backface-visibility: hidden
}
.byebye {
position: relative;
}
.contact ul, ul, ul.proficient {
list-style-type: none
}
.menubutton, html {
-webkit-text-size-adjust: 100%
}
.menubutton, .row {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none
}
.Biographical-Content a, .contact li, .contact li a, .contact ul, .endh4 a, .footer, .item-type-double .item-hover, .overlay ul li a, .registry-description p a, .registry-description p a:hover {
text-decoration: none
}
.width (@cols:1) {
width: (@cols * (@column +@gutter) -@gutter) /@em;
}
article, aside, blockquote, body, dd, div, dl, dt, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, label, legend, li, menu, nav, ol, p, pre, section, td, th, ul {
margin: 0;
padding: 0;
border: 0
}
article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, nav, section, video {
display: block
}
html {
height: 100%;
-ms-text-size-adjust: 100%
}
body {
min-height: 100%
}b, strong {
font-weight: 700
}
abbr[title] {
border-bottom: 1px dotted
}
table {
border-collapse: collapse;
border-spacing: 0
}
a img, img {
-ms-interpolation-mode: bicubic;
border: 0
}
button, input, select, textarea {
margin: 0;
font-size: 100%;
line-height: normal;
vertical-align: baseline
}
button, html input[type=button], input[type=reset], input[type=submit] {
cursor: pointer;
-webkit-appearance: button
}
input[type=radio], input[type=checkbox] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box
}
textarea {
overflow: auto
}
::selection {
background: #e94378;
color: #fff
}
::-moz-selection {
background: #e94378;
color: #fff
}
img::selection {
background: 0 0
}
img::-moz-selection {
background: 0 0
}
@media screen and (max-width: 1px) {
body {
font-size: (@font-size + 2)/16*1em
}
}
body {
-webkit-tap-highlight-color: rgba(255, 0, 0, .62);
font: 100%/1.5 serif
}
@media (min-width: 600px) {
body {
font: 112.5%
}
}
::-webkit-scrollbar, ::-webkit-scrollbar-thumb {
width: 7px;
height: 7px;
border-radius: 4px
}
::-webkit-scrollbar, ::-webkit-scrollbar-track-piece {
background: #fff
}
::-webkit-scrollbar-thumb {
background: #232323
}
::-webkit-scrollbar-button {
display: none
}
.row {
display: block;
margin-bottom: 1em;
margin-top: 5em;
color: #000
}
.Second-Header {
display: block;
margin-bottom: 5em;
margin-top: 4em;
color: #fff
}
.Second-Header h2 {
font-family:'Abril Fatface', cursive;
font-size: 2.5em;
font-weight: 400;
color: fff
}
body, h1, h2, h3, h4, h5, h6 {
font-size: 1rem;
font-weight: 500;
font-family: brandon-grotesque, brandon-grotesque, Futura, sans-serif
}
@media (max-width: 777px) {
.Second-Header {
margin-bottom: 4em;
margin-top: 3em
}
.Second-Header h2 {
font-size: 2em
}
}
@media (max-width: 666px) {
.Second-Header {
margin-bottom: 3em;
margin-top: 2em
}
.Second-Header h2 {
font-size: 1.8em
}
}
@media (max-width: 555px) {
.Second-Header {
margin-bottom: 2em;
margin-top: .5em
}
.Second-Header h2 {
font-size: 1.5em
}
}
@media (max-width: 444px) {
.Second-Header h2 {
font-size: 1.3em
}
}
@media (max-width: 333px) {
.Second-Header h2 {
font-size: 1.2em
}
}
@media (max-width: 222px) {
.Second-Header h2 {
font-size: 1em
}
}
@media (max-width: 888px) {
.row {
margin: 3em 0 0
}
}
@media (max-width: 666px) {
.row h2 {
margin-top: 1.5em
}
}
@media (max-width: 555px) {
.row h2 {
margin-top: 1em
}
}
.row h2 {
font-family:'Abril Fatface', cursive;
font-size: 2.5em;
font-weight: 400;
color: #000
}
@media (max-width: 777px) {
.row h2 {
font-size: 2em
}
}
@media (max-width: 666px) {
.row h2 {
font-size: 1.8em
}
}
@media (max-width: 555px) {
.row h2 {
font-size: 1.5em
}
}
@media (max-width: 444px) {
.row h2 {
margin-top: 0;
margin-bottom: 0;
font-size: 1.3em
}
}
@media (max-width: 333px) {
.row h2 {
font-size: 1.2em
}
}
@media (max-width: 222px) {
.row h2 {
font-size: 1em
}
}
.row h2 span:after {
content:'The Man'
}
h1 {
font-size: 2.5em
}
h2 {
font-size: 1.875em
}
p {
font-size: .875em
}
.My-Gems {
width: 100%;
height: 100%;
overflow: hidden;
}
@media screen and (max-width: 444px) {
.My-Gems {
width: 100%
}
}
@media screen and (max-width: 333px) {
.My-Gems {
width: 100%
}
}
.global-container {
width: 100%;
position: relative;
background-color: #fff;
}
.high-container {
width: 100%;
position: relative;
background-color: transparent;
}
.content-container, .post-container {
text-align: center;
padding: 0;
width: 100%;
background-color: #50b796;
height: 100%;
margin: 0;
position: relative
}
.content-container {
max-width: 1359px;
margin-bottom:500px;
}
.post-container {
z-index: 0;
max-height: 100%;
padding-top:3em;
}
.Well-Aligned {
position: absolute;
left: 0;
top: -280px;
width: 100%;
height: 600px;
background-color: #fff;
z-index: 0;
-webkit-transform: skewY(5deg);
-moz-transform: skewY(5deg);
-ms-transform: skewY(5deg);
-o-transform: skewY(5deg);
transform: skewY(5deg)
}
@media (max-width: 999px) {
.Well-Aligned {
height: 560px
}
}
@media (max-width: 777px) {
.Well-Aligned {
height: 520px
}
}
@media (max-width: 666px) {
.Well-Aligned {
height: 470px
}
}
@media (max-width: 555px) {
.Well-Aligned {
height: 420px
}
}
@media (max-width: 333px) {
.Well-Aligned {
height: 380px
}
}
.Biographical-Content {
z-index: 99999;
display: block;
position: relative;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
font-family: brandon-grotesque, brandon-grotesque, Futura, sans-serif;
width: 65%;
margin-left: auto;
text-align: center;
padding: 0;
margin-right: auto
}
.Biographical-Content p {
margin-top: 20px;
padding: 0;
transition: all .3s ease-out;
font-size: 20px;
line-height: 2em
}
.Biographical-Content a, .Biographical-Content p {
color: #fff;
font-family: brandon-grotesque, brandon-grotesque, Futura, sans-serif;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out
}
@media (max-width: 1111px) {
.Biographical-Content {
width: 70%
}
.Biographical-Content p {
font-size: 18px;
line-height: 1.8em
}
}
@media (max-width: 999px) {
.Biographical-Content {
width: 75%
}
.Biographical-Content p {
font-size: 16px;
line-height: 1.6em
}
}
@media (max-width: 555px) {
.Biographical-Content p {
font-size: 14px;
line-height: 1.4em
}
.Biographical-Content {
width: 80%
}
}
@media (max-width: 444px) {
.Biographical-Content p {
font-size: 12px;
line-height: 1.4em
}
.Biographical-Content {
width: 85%
}
}
.Biographical-Content a {
cursor: pointer;
border-bottom: 2px solid #fff;
transition: all .3s ease-out
}
.Biographical-Content a:hover {
background-color: #e94378;
color: #fff;
transition: all .3s ease-out
}
.Biographical-Content a:hover, .item {
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out`;
-webkit-transition: all .3s ease-out
}
#intro-text {
color: #f3f3f3;
font-size: 2em;
}
.Intro-Video, .step {
overflow: hidden;
position: relative;
background-color: #fff
}
.step {
width: 75%;
-webkit-background-size: cover;
z-index: 999999999999999;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url(http://kadeem.london/Image/Kadeem-Laurie-Lisbon-min.jpg);
margin: 0 auto;
text-align: center;
background-repeat: no-repeat
}
.step:nth-child(odd) {
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left
}
.step:nth-child(even) {
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right
}
.step.out-view:nth-child(odd) {
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left;
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg)
}
.step.out-view:nth-child(even) {
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right;
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg)
}
.Kadeem-Logo {
position: relative;
top: 0;
width: 100%;
display: block
}
.Kadeem-Logo img {
display: block;
width: auto;
max-width: 100%
}
.Intro-Video {
z-index: 9999;
width: 100%;
display: block
}
.video-box {
height: 100%;
width: 100%;
position: relative
}
#video-container {
height: 100%;
width: 100%;
overflow: hidden
}
@media (max-width: 600px) {
.Intro-Video {
background-image: url(http://kadeem.london/Image/kadeem-bg-min.jpg);
width: 100%;
background-size: cover
}
.video-box {
visibility: hidden
}
#video-container {
visibility: visible
}
}
.hide, .overlay-hugeinc {
visibility: hidden
}
video {
position: absolute;
z-index: 0;
background: url(http://kadeem.london/Image/kadeem-bg.jpg) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
video.fillWidth {
width: 100%
}
@media (max-width: 600px) {
video {
visibility: hidden
}
}
.item {
text-align: center;
transition: all .3s ease-out;
float: left;
position: relative;
width: 50%;
height: 100%
}
.item-hover, .item-hover .mask, .item-img, .item-info {
width: 100%;
height: 100%
}
.item-hover, .item-hover .mask {
position: absolute;
top: 0;
height: 100%;
left: 0
}
.item-type-double .item-hover {
z-index: 5;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
cursor: pointer;
display: block;
text-align: center
}
.item-type-double .item-info {
color: #fff;
display: table;
position: relative;
z-index: 5
}
.item-type-double .item-info div.mycell {
vertical-align: middle;
height: 100%;
display: table-cell
}
.item-type-double .item-info .headline {
font-size: 2.4em;
font-family:'Proxima Nova' sans-serif;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
@media (max-width: 500px) {
.item {
width: 100%;
height: 100%
}
}
@media (max-width: 888px) {
.item-type-double .item-info .headline {
font-size: 1.8em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 666px) {
.item-type-double .item-info .headline {
font-size: 1.4em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 444px) {
.item-type-double .item-info .headline {
font-size: 1.3em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 390px) {
.item-type-double .item-info .headline {
font-size: .8em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 333px) {
.item-type-double .item-info .headline {
font-size: .6em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 222px) {
.item-type-double .item-info .headline {
font-size: .5em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
.item-type-double .item-info .date {
font-size: 20px;
font-family: Canter;
text-transform: uppercase
}
@media (max-width: 444px) {
.item-type-double .item-info .date {
font-size: 16px;
text-transform: uppercase
}
}
@media (max-width: 333px) {
.item-type-double .item-info .date {
font-size: 10px;
text-transform: uppercase
}
}
.item-type-double .item-hover .mask {
background-color: #000;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .5;
z-index: 0
}
.item-type-double .item-hover:hover .line {
width: 90%
}
.item-type-double .item-hover:hover {
opacity: 1
}
.item-img {
width: 100%;
z-index: 0
}
.item-img img {
width: 100%;
display: block
}