我的网站是导航/菜单在我的桌面上运行良好。在移动设备上，当我单击要跳转到的不同部分时，导航栏只会闪烁 3 次。有任何想法吗？我以为我读到它是 CSS 问题或 JS 问题。我只是难以隔离要更改的内容和或要更改的内容。
<!DOCTYPE html>
<html lang="en">
=
<head>
<!-- Metas -->
<meta charset="utf-8">
<title>Kylie & Garrett</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" contet="Kylie & Garrett Get Married"/>
<meta property="og:image" content="https://i.ibb.co/VqS0Hrm/thumb.png"/>
<!-- Css -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/base.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/venobox.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/fonts.css" rel="stylesheet" type="text/css" media="all" />
<link href="https://fonts.googleapis.com/css?family=Kristi|Lato:100,300,300i,400,700" rel="stylesheet">
<link rel="shortcut icon" href="img/kg.ico">
</head>
<body>
<!-- Preloader -->
<div class="loader">
<!-- Preloader inner -->
<div class="loader-inner">
<svg width="120" height="220" viewbox="0 0 100 100" class="loading-spinner" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="spinner" cx="50" cy="50" r="21" fill="#ffffff" stroke-width="2"/>
</svg>
</div>
<!-- End preloader inner -->
</div>
<!-- End preloader-->
<!--Wrapper-->
<div class="wrapper">
<!--Hero section-->
<section class="hero overlay">
<div class="background-img">
<img src="img/opta1.jpg" alt="">
</div>
<!--Header-->
<header class="header default">
<div class=" left-part">
<a class="logo scroll" href="#hero">
<h2>K & G</h2>
</a>
</div>
<div class="right-part">
<nav class="main-nav">
<div class="toggle-mobile-but">
<a href="#" class="mobile-but" >
<div class="lines"></div>
</a>
</div>
<ul>
<li><a class="scroll" href="#story">Love story</a></li>
<li><a class="scroll" href="#wedding">The wedding</a></li>
<li><a class="scroll" href="#friend">Friends</a></li>
<li><a class="scroll" href="#album">Photo album</a></li>
<li><a class="scroll" href="#gift">Gift registry</a></li>
<li><a class="scroll" href="#rsvp">RSVP</a></li>
</ul>
</nav>
</div>
</header>
<!--End header-->
<!--Inner hero-->
<div class="inner-hero">
<!--Container-->
<div class="container hero-content">
<!--Row-->
<div class="row">
<div class="col-sm-12 text-center" style="position: relative;top: 91px;">
<h1 class="large mb-20">Kylie & GarretT</h1>
<div class="block-date-hero">
<div class="circle-dashed bg-n">
<div class="round-circle">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50" />
</svg>
<i class="icon-heart"></i>
</div>
</div>
<ul>
<li>Save the date</li>
<li>June 12th, 2021</li>
</ul>
</div>
<p class="mt-20 lead">2838 </p>
</div>
</div>
<!--End row-->
</div>
<!--End container-->
</div>
<!--End inner hero-->
</section>
<!--End hero section-->
<!--Story section-->
<section id="story" class="story pt-120 pb-120">
<svg class="section-dashed" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="578px" xml:space="preserve">
<path class="dashed-line" stroke-width="1" d="M30 0 v600 400"/>
</svg>
<!--Container-->
<div class="container">
<!--Row-->
<div class="row">
<div class="col-sm-12 text-center mb-100">
<h1 class="title">Our Love Story</h1>
</div>
</div>
<!--End row-->
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm-8 col-sm-offset-2 text-center">
<div class="img-round">
<div class="img"><img src="img/2.png" alt=""></div>
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50" />
</svg>
</div>
</div>
</div>
<!--end of row-->
<div class="row story-row mt-100 mb-100">
<div class="circle-dashed timeline bg">
<div class="round-circle bg before">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50"/>
</svg>
<i class="icon-heart" style="color: white;"></i>
</div>
</div>
<div class="col-sm-5 ">
<div class="couple-story text-right">
<h2 class="heavy mb-10">The Match<br><span></span></h2>
<p>Kylie and Garrett could be considered a modern day Match.com success story! This is where they first connected, exchanged messages, and planned a first date.</p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div class="couple-story">
<h2 class="heavy mb-10">The First Date<br><span></span></h2>
<p>Their first date took them to th. This restaraunt is 100% plant based. Kylie is vegan, and Garrett was interested and open to trying new things.</p>
</div>
</div>
</div>
<!--end of row-->
<div class="row story-row mt-100 mb-80 ">
<div class="circle-dashed timeline bg green" style="background: #b31804">
<div class="round-circle green before">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50"/>
</svg>
<i class="icon-heart" style="color: white;"></i>
</div>
</div>
<div class="col-sm-5 ">
<div class="couple-story text-right">
<h2 class="heavy mb-10">The Proposal<br><span></span></h2>
<p>Kylie's favorite holiday is Christmas. Garrett created an ornament that on one side said "Meadowbrook 2019" (the street the house is on) and on the other was "Will You Marry Me?". He gave it to her as a gift with only the front showing and when she went to hang it on the tree, she saw the message on the back. </p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div class="couple-story">
<h2 class="heavy mb-10">The Present<br><span></span></h2>
<p>Kylie and Garrett enjoy everyday spent together with their two dogs, Khaleesi and Arya. They enjoy the little things like walking around the block and relaxing on vacation. Trips like Traverse City (Wine country), Florida beaches, and Toronto to catch a Chris Stapleton concert were some of their most memeorable moments.</p>
</div>
</div>
</div>
<!--end of row-->
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm-8 col-sm-offset-2 text-center">
<div class="img-round" style="padding-top: 50px;">
<div class="img"><img src="img/3.png" alt=""></div>
<circle cx="50%" cy="50%" r="50" />
</svg>
</div>
</div>
<div class="col-md-4 col-md-offset-4 col-sm-8 col-sm-offset-2 text-center mt-30">
<h2 class="heavy">We are counting the days to our wedding day and new beginnings!<br></h2>
</div>
</div>
<!--end of row-->
<!--Row-->
<!--end of row-->
</div>
<!--End container-->
</section>
<!--End story section-->
<!--Date section-->
</div>
<!--End container-->
</section>
<!--End wedding section-->
</div>
<!--End container-->
</footer>
<!--End footer section -->
</div>
<!-- End wrapper-->
<!--Javascript-->
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="js/jquery.countdown.min.js" type="text/javascript"></script>
<script src="js/venobox.min.js" type="text/javascript"></script>
<script src="js/smooth-scroll.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<!-- Google analytics -->
<!-- End google analytics -->
</body>
</html>
CSS
/*
* DESTINY - WEDDING HTML TEMPLATE
* Copyright 2016
* www.mutationmedia.net
* Created by : mutationthemes
*
*/
/* Table of Content
==================================================
1.Preloader
2.Site wrapper
3.Love story section
4.Date section
5.Events section
6.Album section
7.Gifts section
8.Friends section
9.Registry section
10.Mediaqueries
/*Preloader*/
.loader {
background: #ffffff;
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 9999;
}
.loader-inner {
left: 0;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.loading-spinner {
width: 100px;
height: 100px;
animation: spinner-rotate 2s ease-in-out infinite;
-webkit-animation: spinner-rotate 2s ease-in-out infinite;
-moz-animation: spinner-rotate 2s ease-in-out infinite;
-ms-animation: spinner-rotate 2s ease-in-out infinite;
-o-animation: spinner-rotate 2s ease-in-out infinite;
}
.spinner {
animation: spinner-color 8s ease-in-out infinite, spinner-dash 2s ease-in-out infinite;
-webkit-animation: spinner-color 8s ease-in-out infinite, spinner-dash 2s ease-in-out infinite;
-moz-animation: spinner-color 8s ease-in-out infinite, spinner-dash 2s ease-in-out infinite;
-ms-animation: spinner-color 8s ease-in-out infinite, spinner-dash 2s ease-in-out infinite;
-o-animation: spinner-color 8s ease-in-out infinite, spinner-dash 2s ease-in-out infinite;
stroke-linecap: round;
}
@keyframes spinner-rotate {
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: trotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@keyframes spinner-color {
0%, 100% {
stroke: #8de9be;
}
20% {
stroke: #efd1be;
}
40% {
stroke: #8de9be;
}
60% {
stroke: #efd1be;
}
80% {
stroke: #8de9be;
}
}
@keyframes spinner-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 90, 200;
stroke-dashoffset: -125px;
}
}
/*End preloader*/
/*Site wrapper*/
.wrapper {
position: relative;
height: 6000px;
}
/*End site wrapper*/
/* Hero Section*/
section.hero {
background: #353031;
padding: 0;
position: relative;
min-height: 700px;
height: 100vh;
}
.background-img img {
display: none;
}
.background-img {
width: 100%;
height: 100%;
}
.background-img {
background-attachment: scroll;
background-clip: border-box;
background-color: #353031;
background-image: none;
background-origin: padding-box;
background-position: 50% 50% !important;
background-repeat: repeat;
background-size: cover !important;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
.overlay:before {
position: absolute;
background: rgba(51, 48, 48, .7);
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .5;
z-index: 1;
content: "";
}
section.hero .inner-hero {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
height: 100%;
z-index: 10;
}
.header {
padding: 10px 0;
}
.header.default {
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1000;
}
.header.switched-header {
background-color: rgba(255, 255, 255, 0.98);
box-shadow: 0 0 20px rgba(53, 48, 49, 0.15);
-webkit-box-shadow: 0 0 20px rgba(53, 48, 49, 0.15);
-moz-box-shadow: 0 0 20px rgba(53, 48, 49, 0.15);
-ms-box-shadow: 0 0 20px rgba(53, 48, 49, 0.15);
-o-box-shadow: 0 0 20px rgba(53, 48, 49, 0.15);
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
.header .left-part {
float: left;
margin-left: 50px;
}
.header .logo {
margin-top: 10px;
display: block;
}
.header .logo h2 {
color: #ffffff;
font-size: 16px;
text-transform: uppercase;
}
.header.switched-header .logo h2,
.footer .logo h2 {
color: #353031;
}
.header .right-part {
float: right;
margin-right: 50px;
position: relative;
}
.mobile-but {
display: inline-block;
height: 24px;
position: absolute;
right: -20px;
top: -22px;
z-index: 1000;
display: none;
}
.mobile-but .lines {
transform: translate(0px, 10px) rotate(0deg);
-webkit-transform: translate(0px, 10px) rotate(0deg);
-ms-transform: translate(0px, 10px) rotate(0deg);
-moz-transform: translate(0px, 10px) rotate(0deg);
}
.mobile-but .lines,
.mobile-but .lines:after,
.mobile-but .lines:before {
height: 2px;
width: 28px;
}
.mobile-but .lines:after,
.mobile-but .lines:before {
content: " ";
display: none;
}
.mobile-but .lines:after {
transform: translate(0px, 4px) rotate(0deg);
-webkit-transform: translate(0px, 4px) rotate(0deg);
-ms-transform: translate(0px, 4px) rotate(0deg);
-moz-transform: translate(0px, 4px) rotate(0deg);
}
.mobile-but .lines:before {
transform: translate(0px, -4px) rotate(0deg);
-webkit-transform: translate(0px, -4px) rotate(0deg);
-ms-transform: translate(0px, -4px) rotate(0deg);
-moz-transform: translate(0px, -4px) rotate(0deg);
}
.mobile-but .lines:after,
.mobile-but .lines:before {
background: #353031;
}
.toggle-mobile-but.active .mobile-but .lines:after {
transform: translate(0px, -1px) rotate(45deg);
-webkit-transform: translate(0px, -1px) rotate(45deg);
-ms-transform: translate(0px, -1px) rotate(45deg);
-moz-transform: translate(0px, -1px) rotate(45deg);
}
.toggle-mobile-but.active .mobile-but .lines:before {
transform: translate(0px, 1px) rotate(-45deg);
-webkit-transform: translate(0px, 1px) rotate(-45deg);
-ms-transform: translate(0px, 1px) rotate(-45deg);
-moz-transform: translate(0px, 1px) rotate(-45deg);
}
.main-nav li {
display: block;
float: left;
text-transform: capitalize;
margin-left: 25px;
}
.main-nav li a {
color: #ffffff;
display: block;
padding: 12px 0;
position: relative;
}
.header.switched-header .main-nav li a {
color: #353031;
}
.hero-content {
color: #ffffff;
position: relative;
text-align: center;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
h1.large {
color: #ffffff;
font-size: 52px;
text-transform: uppercase;
font-weight: 300;
}
.block-date-hero {
position: relative;
}
.circle-dashed {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-42%, -50%);
-webkit-transform: translate(-42%, -50%);
-moz-transform: translate(-42%, -50%);
-ms-transform: translate(-42%, -50%);
-o-transform: translate(-42%, -50%);
}
.circle-dashed.bg-n {
transform: translate(-45%, -50%);
-webkit-transform: translate(-45%, -50%);
-moz-transform: translate(-45%, -50%);
-ms-transform: translate(-45%, -50%);
-o-transform: translate(-45%, -50%);
}
.circle-dashed i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.round-circle {
width: 35px;
height: 35px;
position: relative;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
background: #7c0000;
position: relative;
box-shadow: 0 0 20px rgba(53, 48, 49, 0.15);
-webkit-box-shadow: 0 0 20px rgba(53, 48, 49, 0.15);
-moz-box-shadow: 0 0 20px rgba(53, 48, 49, 0.15);
-ms-box-shadow: 0 0 20px rgba(53, 48, 49, 0.15);
-o-box-shadow: 0 0 20px rgba(53, 48, 49, 0.15);
}
.round-circle:before {
background: #a52222;
border-radius: 0 100px 100px 0;
-webkit-border-radius: 0 100px 100px 0;
-moz-border-radius: 0 100px 100px 0;
-ms-border-radius: 0 100px 100px 0;
-o-border-radius: 0 100px 100px 0;
content: "";
height: 35px;
position: absolute;
right: 0;
top: 0;
width: 17.5px;
}
.
}
.
.circle-dashed.middle {
top: 60%;
}
img.gift-reg {
max-width: 30%;
opacity: .4;
cursor: pointer;
}
img.gift-reg:hover {
opacity: .8;
}
/* End gift section*/
/* Friends section*/
.circle-dashed.relative {
position: relative;
display: inline-block;
transform: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
left: 0;
top: 0;
}
blockquote {
font-style: italic;
font-size: 16px;
}
.vertical-align {
align-items: center;
-webkit-align-items: center;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
flex-direction: row;
-webkit-flex-direction: row;
}
/* End friends section*/
/*Registry section*/
.block-registry {
background: #ffffff;
padding: 50px 40px;
}
.registry-form,
.select-input {
position: relative;
}
.select-input:after {
color: #b3b3b3;
font-size: 18px;
right: 0;
position: absolute;
top: 0;
content: '\ea18';
font-family: "fontello";
pointer-events: none;
cursor: pointer;
line-height: 44px;
padding: 0 15px;
.success h2 {
color: #4e93e6;
}
.error h2,
.success h2 {
color: #61279e;
}
.errorForm {
border: 2px solid #61279e !important;
}
/*End registry section*/
/*Media queries*/
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: portrait) {
input,
textarea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
.section-dashed {
height: 728px;
top: 594px;
}
.img img {
max-width: 45%;
}
img.typo {
max-width: 65%;
}
img.gift-reg {
max-width: 40%;
}
.circle-dashed.timeline {
top: 35%;
}
.block-img a {
height: 250px;
}
.input-columns .column-1,
.input-columns .column-2 {
float: none;
width: 100%;
}
.input-columns .column-1 .column-inner {
padding: 0;
}
.registry-form .submit {
margin-top: 10px;
}
.friend .img img {
max-width: 80%;
}
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) {
input,
textarea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) {
input,
textarea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
.section-dashed {
height: 629px;
top: 558px;
}
.input-columns .column-1,
.input-columns .column-2 {
float: none;
width: 100%;
}
.input-columns .column-1 .column-inner {
padding: 0;
}
.registry-form .submit {
margin-top: 10px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
input,
textarea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
.section-dashed {
height: 628px;
top: 588px;
}
.circle-dashed.timeline {
top: 42%;
}
.img img {
max-width: 70%;
}
img.typo {
max-width: 50%;
}
img.gift-reg {
max-width: 35%;
}
.block-img a {
height: 300px;
}
.input-columns .column-1,
.input-columns .column-2 {
float: none;
width: 100%;
}
.input-columns .column-1 .column-inner {
padding: 0;
}
.registry-form .submit {
margin-top: 10px;
}
}
@media only screen and (min-width: 768px) and (max-width: 960px) {
input,
textarea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
.header .left-part,
.header .right-part {
float: none;
display: block;
}
.header .left-part {
margin-left: 30px;
}
.header {
background-color: rgba(255, 255, 255, 0.98) !important;
padding: 15px 0;
}
.header .logo {
margin-top: 0;
}
.header .logo h2 {
color: #353031;
}
.mobile-but {
display: block;
}
.main-nav li {
float: none;
display: block;
margin-left: 0;
}
.main-nav li a {
color: #666666;
display: inline-block;
}
.main-nav ul {
display: none;
margin-left: 30px;
}
.section-dashed {
height: 728px;
top: 595px;
}
.circle-dashed.timeline {
top: 35%;
}
.block-img a {
height: 250px;
}
.img img {
max-width: 45%;
}
.friend .img img {
max-width: 80%;
}
img.gift-reg {
max-width: 40%;
}
.block-dashed-hr {
height: 600px;
}
.input-columns .column-1,
.input-columns .column-2 {
float: none;
width: 100%;
}
.input-columns .column-1 .column-inner {
padding: 0;
}
.registry-form .submit {
margin-top: 10px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
input,
textarea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
header {
background: red;
}
.header .left-part,
.header .right-part {
float: none;
display: block;
}
.header .left-part {
margin-left: 30px;
}
.header {
background-color: rgba(255, 255, 255, 0.98) !important;
padding: 15px 0;
}
.header .logo {
margin-top: 0;
}
.header .logo h2 {
color: #353031;
}
.mobile-but {
display: block;
}
.main-nav li {
float: none;
display: block;
margin-left: 0;
}
.main-nav li a {
color: #666666;
display: inline-block;
}
.main-nav ul {
display: none;
margin-left: 30px;
}
h1.large {
font-size: 80px;
}
.story-row {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
.couple-story,
.wedding .col-sm-5 .block-event,
.block-img,
.accom .col-sm-5,
.friend .img-round {
margin-bottom: 20px;
}
.block-registry {
margin-top: 20px;
}
.img img {
max-width: 50%;
}
h2.typo {
font-size: 100px;
}
.circle-dashed.middle,
.section-dashed,
.circle-dashed.timeline,
.block-dashed-hr,
.block-dashed-ver,
.img-round .dashed-border {
display: none;
}
.couple-story.text-right {
text-align: left;
}
.block-content.text-right,
.block-content.text-left {
text-align: center;
}
.vertical-align {
display: block;
}
.input-columns .column-1,
.input-columns .column-2 {
float: none;
width: 100%;
}
.input-columns .column-1 .column-inner {
padding: 0;
}
.registry-form .submit {
margin-top: 10px;
}
}
@media only screen and (max-width: 479px) {
input,
textarea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
header {
background: red;
}
.header .left-part,
.header .right-part {
float: none;
display: block;
}
.header .left-part {
margin-left: 30px;
}
.header {
background-color: rgba(255, 255, 255, 0.98) !important;
padding: 15px 0;
}
.header .logo {
margin-top: 0;
}
.header .logo h2 {
color: #353031;
}
.mobile-but {
display: block;
}
.main-nav li {
float: none;
display: block;
margin-left: 0;
}
.main-nav li a {
color: #666666;
display: inline-block;
}
.main-nav ul {
display: none;
margin-left: 30px;
}
h1.large {
font-size: 55px;
}
.story-row {
margin-top: 60px !important;
margin-bottom: -50px !important;
}
.couple-story,
.wedding .col-sm-5 .block-event,
.block-img,
.accom .col-sm-5,
.friend .img-round {
margin-bottom: 20px;
}
.block-registry {
margin-top: 20px;
}
.img img {
max-width: 50%;
}
h2.typo {
font-size: 80px;
}
img.gift-reg {
max-width: 40%;
}
.block-date-hero li {
border-radius: 100px !important;
margin: 0 auto;
display: block;
}
.circle-dashed.bg-n,
.circle-dashed.middle,
.section-dashed,
.circle-dashed.timeline,
.block-dashed-hr,
.block-dashed-ver,
.img-round .dashed-border {
display: none;
}
.block-date-hero li:first-child {
margin-bottom: 10px;
}
.couple-story.text-right {
text-align: left;
}
.block-content.text-right,
.block-content.text-left {
text-align: center;
}
.vertical-align {
display: block;
}
.input-columns .column-1,
.input-columns .column-2 {
float: none;
width: 100%;
}
.input-columns .column-1 .column-inner {
padding: 0;
}
.registry-form .submit {
margin-top: 10px;
}
}
/*End media queries*/