366 lines
7.6 KiB
CSS
366 lines
7.6 KiB
CSS
@media screen and (max-width: 1200px) {
|
|
header {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.intro-content {
|
|
display: inline-block;
|
|
width: 70%;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
.hero .hero-content {
|
|
padding-top: 50%;
|
|
}
|
|
}
|
|
|
|
/* Responsive nav kicks in */
|
|
@media screen and (max-width: 991px) {
|
|
header {
|
|
width: 90%;
|
|
padding-left: 25px;
|
|
}
|
|
|
|
.hero .hero-content {
|
|
padding-top: 50%;
|
|
}
|
|
|
|
.header-nav {
|
|
position: fixed;
|
|
background-color: #000;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 99999;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
|
|
transition: opacity 0.5s, visibility 0s 0.5s;
|
|
}
|
|
|
|
ul.member-actions {
|
|
position: static;
|
|
}
|
|
|
|
.navicon {
|
|
visibility: visible;
|
|
}
|
|
|
|
header .nav-wrapper {
|
|
display: absolute;
|
|
}
|
|
|
|
header nav {
|
|
position: relative;
|
|
top: 45%;
|
|
-moz-transform: translatey(-45%);
|
|
-ms-transform: translatey(-45%);
|
|
-o-transform: translatey(-45%);
|
|
-webkit-transform: translatey(-45%);
|
|
transform: translatey(-45%);
|
|
}
|
|
|
|
nav ul li a {
|
|
color: #fff;
|
|
font-size: 25px;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
-moz-transition: all 300ms ease-in-out;
|
|
-o-transition: all 300ms ease-in-out;
|
|
-webkit-transition: all 300ms ease-in-out;
|
|
transition: all 300ms ease-in-out
|
|
}
|
|
|
|
nav ul li {
|
|
margin-bottom: 25px
|
|
}
|
|
|
|
nav ul.primary-nav li {
|
|
display: block;
|
|
}
|
|
|
|
nav ul.member-actions li {
|
|
display: block;
|
|
}
|
|
|
|
nav a.login {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
nav ul.primary-nav {
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
nav ul.primary-nav li a {
|
|
padding-right: 0;
|
|
}
|
|
|
|
nav .member-actions {
|
|
position: static;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
nav ul.primary-nav li,
|
|
nav ul.member-actions li {
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: alpha(opacity=0);
|
|
opacity: 0;
|
|
-moz-transform: translate3d(0, -80px, 0);
|
|
-ms-transform: translate3d(0, -80px, 0);
|
|
-o-transform: translate3d(0, -80px, 0);
|
|
-webkit-transform: translate3d(0, -80px, 0);
|
|
transform: translate3d(0, -80px, 0);
|
|
-moz-transition: -moz-transform 0.5s, opacity 0.5s;
|
|
-o-transition: -o-transform 0.5s, opacity 0.5s;
|
|
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
|
|
transition: transform 0.5s, opacity 0.5s;
|
|
-moz-transition: -moz-transform 0.5s, opacity 0.5s;
|
|
-o-transition: -o-transform 0.5s, opacity 0.5s;
|
|
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
|
|
transition: transform 0.5s, opacity 0.5s
|
|
}
|
|
|
|
header .header-nav.open ul.primary-nav li,
|
|
header .header-nav.open ul.member-actions li {
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
filter: alpha(opacity=100);
|
|
opacity: 1;
|
|
-moz-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
-o-transform: translate3d(0, 0, 0);
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0)
|
|
}
|
|
|
|
nav ul.primary-nav li:first-child {
|
|
-moz-transition-delay: 0.05s;
|
|
-o-transition-delay: 0.05s;
|
|
-webkit-transition-delay: 0.05s;
|
|
transition-delay: 0.05s
|
|
}
|
|
|
|
nav ul.primary-nav li:nth-child(2) {
|
|
-moz-transition-delay: 0.1s;
|
|
-o-transition-delay: 0.1s;
|
|
-webkit-transition-delay: 0.1s;
|
|
transition-delay: 0.1s
|
|
}
|
|
|
|
nav ul.primary-nav li:nth-child(3) {
|
|
-moz-transition-delay: 0.15s;
|
|
-o-transition-delay: 0.15s;
|
|
-webkit-transition-delay: 0.15s;
|
|
transition-delay: 0.15s
|
|
}
|
|
|
|
nav ul.primary-nav li:nth-child(4) {
|
|
-moz-transition-delay: 0.2s;
|
|
-o-transition-delay: 0.2s;
|
|
-webkit-transition-delay: 0.2s;
|
|
transition-delay: 0.2s
|
|
}
|
|
|
|
nav ul.member-actions li:first-child {
|
|
-moz-transition-delay: 0.25s;
|
|
-o-transition-delay: 0.25s;
|
|
-webkit-transition-delay: 0.25s;
|
|
transition-delay: 0.25s
|
|
}
|
|
|
|
nav ul.member-actions li:nth-child(2) {
|
|
-moz-transition-delay: 0.30s;
|
|
-o-transition-delay: 0.30s;
|
|
-webkit-transition-delay: 0.30s;
|
|
transition-delay: 0.30s
|
|
}
|
|
|
|
.intro-content {
|
|
display: inline-block;
|
|
width: 75%;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.last {
|
|
margin: 0;
|
|
}
|
|
|
|
.features {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.features .device-showcase,
|
|
.features-extra .macbook-wrap {
|
|
display: none;
|
|
}
|
|
|
|
.features .responsive-feature-img,
|
|
.features-extra .responsive-feature-img {
|
|
display: block;
|
|
width: 85%;
|
|
margin: 15% auto 0;
|
|
}
|
|
|
|
.features .responsive-feature-img img,
|
|
.features-extra .responsive-feature-img img {
|
|
width: 100%;
|
|
}
|
|
|
|
.hero-strip {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.events .leftcol {
|
|
padding: 0 15px;
|
|
margin-bottom: 15px;
|
|
border-right: none;
|
|
}
|
|
|
|
.events .rightcol {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
#eng-pics .img-wrap {
|
|
border-radius: 0;
|
|
}
|
|
|
|
#map-content-wrapper {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
#map-content {
|
|
margin-top: 0;
|
|
padding: 35px;
|
|
}
|
|
|
|
.rsvp {
|
|
padding-top: 40px;
|
|
}
|
|
|
|
footer .social-share {
|
|
display: none;
|
|
}
|
|
|
|
footer .footer-links {
|
|
margin: 120px 0 120px 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 640px) {
|
|
.hero .hero-content {
|
|
padding-top: 100%;
|
|
}
|
|
|
|
#eng-pics .img-wrap i {
|
|
font-size: 25px;
|
|
position: absolute;
|
|
width: 25px;
|
|
height: 25px;
|
|
top: 10px;
|
|
right: 10px; }
|
|
|
|
#map-content-wrapper {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
footer ul.footer-group {
|
|
border-top: none;
|
|
}
|
|
|
|
footer ul.footer-group li a {
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
padding: 20px 0;
|
|
display: block;
|
|
border-bottom: dashed 1px #4E566C;
|
|
}
|
|
|
|
footer ul.footer-group li {
|
|
display: block;
|
|
}
|
|
|
|
footer .footer-links {
|
|
margin: 50px 0 50px 0;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 480px) {
|
|
.hero .hero-content {
|
|
padding-top: 110%;
|
|
}
|
|
|
|
.hero .hero-content img {
|
|
width: 65%;
|
|
}
|
|
|
|
.hero .btn {
|
|
display: block;
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.hero .btn:first-of-type {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 50px;
|
|
}
|
|
|
|
.btn-margin-right {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.features .device-showcase-left {
|
|
position: absolute;
|
|
bottom: -392px;
|
|
left: 41%;
|
|
right: auto;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.features .ipad-wrap {
|
|
width: 706px;
|
|
height: 1002px;
|
|
background: url("../img/ipad-device.png") no-repeat center center;
|
|
z-index: 1;
|
|
background-size: 40%;
|
|
}
|
|
|
|
.features .iphone-wrap {
|
|
width: 304px;
|
|
height: 617px;
|
|
background: url("../img/iphone6.png") no-repeat center center;
|
|
position: absolute;
|
|
left: 350px;
|
|
bottom: 129px;
|
|
z-index: 2;
|
|
background-size: 40%;
|
|
}
|
|
|
|
.features {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.down-arrow {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 320px) {
|
|
.hero .hero-content {
|
|
padding-top: 130%;
|
|
}
|
|
|
|
.rsvp {
|
|
padding-top: 20px;
|
|
}
|
|
} |