/*** COLOR PALETTE ****
PINKS       DARK  -- #AA244D -- rgb(170, 36, 77)
            LIGHT -- #EA8681 -- rgb(247,205,169)
NEUTRALS    DARK  -- #F7CDA9 -- rgb(253, 241, 228)
            LIGHT -- #FDF1E4 -- rgb(23, 48, 63)
ACCENT      GREEN -- #17303F -- rgb(110, 145, 105)
            BLUE  -- #6E9169 -- rgb(247,205,169)
/**********************/


/**********************/
/******* GENERAL ******/
/**********************/


body, html {
    min-height: 100%; width: 100%; margin: 0;
    background: #FDF1E4; color:#000;
    font-family: brother-1816, 'Brother 1816', 'times new roman';
    text-align:center;
    font-size: 1.05em;
}

.relative {position: relative;}
.absolute {position: absolute;}
.nowrap {white-space: nowrap; display:inline-block;}
.margin-top {margin-top: 30px;}

section { width: 100%; height: auto; position: relative; }

#preloader, #overlay {
    height: 100vh;
    width: 100vw;
    background: inherit;
    overflow: hidden;
    z-index: 1000000;
    position: fixed;
    transition: opacity 100ms ease-in-out;
}

#preloader {
    opacity: 1;
    display: block;
}

#preloader.invis {
    opacity: 0;
    transition: opacity 100ms ease-in-out;
}

#preloader.loaded {
    display: none;
}

#overlay {
    opacity: 0;
    display: none;
    z-index: 5000;
    transition: opacity 250ms ease-in-out;
}

#overlay.show {
    display: block;
}

#overlay.vis {
    opacity: 1;
    transition: opacity 250ms ease-in-out;
}

.zzload {
    top: 50%;
    transform: translateY(-50%);
    position: relative;
}

.zzload p {
    margin-top: -20px;
}

.zz0 {
    stroke-dasharray: 450;
    stroke-dashoffset: 450;
    animation-name: zzdraw;
    animation-duration: 1.5s;
    animation-delay: 100ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes zzdraw {
    0% { stroke-dashoffset: 450; }
    10% { stroke-dashoffset: 450; }
    95% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}

@keyframes zzfill {
    0% { stroke-dashoffset: 450; fill: transparent; }
    10% { stroke-dashoffset: 450; fill: transparent;}
    95% { stroke-dashoffset: 0; fill: #000;}
    100% { stroke-dashoffset: 0; fill: #000; }
}

.zz1 {
    fill: none;
    stroke-dasharray: 450;
    stroke-dashoffset: 450;
    animation-name: zzfill;
    animation-duration: 1.5s;
    animation-delay: 100ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.content {
    display: inline-block; position: relative;
    width: calc(100% - 120px); max-width: 800px;
    margin: 60px;
}

#travel {background: rgba(247,205,169,0.2);}
#main {background: rgba(247,205,169,0.4);}
#chicago {background: rgba(247,205,169,0.2);}
#faq {background: rgba(247,205,169,0.4);}
#registry {background: rgba(247,205,169,0.2);}
#music {background: rgba(110, 145, 105, 0.5);}

.button {
    display: inline-block;
    padding: 8px 12px 8px 12px;
    background: rgba(170, 36, 77,0.8);
    border: 1px rgba(170, 36, 77,1) solid;
    border-radius: 10px;
    width: auto;
    margin: 4px 8px 8px 8px;
    color: #fff1dc;
    transition: all 200ms ease;
    cursor: pointer;
    font-weight: 700;
    line-height: 1em;
}

.button:hover {
    background: rgba(170, 36, 77,1);
    transition: all 200ms ease;
}

#spotify-toggle {
    display: inline-block;
    padding: 8px 12px 8px 12px;
    border: 1px rgba(23, 48, 63,1) solid;
    border-radius: 10px;
    width: auto;
    margin: 4px 8px 8px 8px;
    transition: all 200ms ease;
    cursor: pointer;
    font-weight: 700;
    line-height: 1em;
    color: rgb(23, 48, 63);
    background: rgba(23, 48, 63, 0);
}
    
#spotify-toggle:hover {
    background: rgba(23, 48, 63, 0.15);
}
    
#spotify-toggle.explicit {
    background: rgba(23, 48, 63, 0.8);
    color: #fff1dc;
}

#spotify-toggle.explicit:hover {
    background: rgba(23, 48, 63, 1);
}

#embed-iframe {
    width: 100%;
    height: 420px;
}


.header {
    position: absolute;
    height: 130px; width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 00%, rgba(0,0,0,0) 100%);
}

.footer {
    height: 200px; width: 100%;
    background: #17303F;
    font-weight: 700; font-size: 24px;
    color:#fdf1e4;
}

.footer-container {
    position: relative;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    line-height: 70px;
}

.love {
    height: 70px; display: inline-block;
    margin-top: 10px;
    width: 280px; overflow: hidden;
    margin-bottom: -25px;
    margin-left: 10px;
}

.love>svg {
    height: 70px;margin-left: -70px; fill: #fdf1e4;; stroke: #fdf1e4; stroke-width: 1px;
}


.wrongguest {
    display: block; position: absolute;
    bottom: 20px; left: 20px;
    font-size: 0.8em;
    color: white; text-decoration: underline;
    background: rgba(0, 0, 0, 0.3);
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
}

.wrongguest:hover {
    background: rgba(0,0,0,0.8);
}

.heart-pin {
    display: inline-block;
    height: 2em;
    width: auto;
}


/**********************/
/******** FORM ********/
/**********************/

.alert {
    display: none;
    padding: 8px 20px;
    border-radius: 10px;
    border: 0.5px solid rgb(170, 36, 77);
    background:rgba(170, 36, 77, 0.2);
    color: rgb(78, 9, 30);
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 0.9em;
    text-align: center;
}

.alert.shown {
    display: block;
}

table {
    width: 100%;
    max-width: 450px;
    position: relative;
    left: 50%;
    transform: translate(-50%);
}

form {
	margin:8px 0;
	width: 100%;
	padding: 10px 0;
	font-family: brother-1816, 'Brother 1816', 'times new roman';
}
form li {
	padding: 0;
	display: block;
	list-style: none;
	margin: 10px 0 0 0;
    height: 60px;
}
label{
	margin:8px 0px 3px 0;
	padding:4px 0;
	display: inline-block;
	font-weight: bold;
}
.label {
    width: 1%;
    white-space: nowrap;
}

.classspacer {width: 20px;}
input[type=text], input[type=password],
input[type=email],
textarea, 
select{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border:1px solid rgba(234, 134, 129,0.4);
	padding: 7px;
	margin:0px;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
    transition: all 0.30s ease-in-out;
	outline: none;	
    width: 100%;
    display: block;
    font: inherit;
    font-size: 0.8em;
    line-height: 0.8em;
    border-radius: 5px;
    background: rgba(255,255,255,0.2);
}

input[type=text]::placeholder, input[type=password]::placeholder {
    color: rgba(234, 134, 129, 0.6);
    font-family: inherit;
}

input[type=text]:focus, input[type=password]:focus,
input[type=email]:focus,
textarea:focus {
	-moz-box-shadow: 0 0 8px rgba(234, 134, 129, 0.5);
	-webkit-box-shadow: 0 0 8px rgba(234, 134, 129, 0.5);
	box-shadow: 0 0 8px rgba(234, 134, 129, 0.5);
	border: 1px solid rgba(234, 134, 129, 0.5);
}
c
.field-divided{
	width: 49%;
}
.field-divided + .field-divided {
    margin-left: 2%;
}

.field-long{
	width: 100%;
}
.field-textarea{
	height: 100px;
}

input[type=submit], button[type=submit]{
    margin-top: 12px;
	background: rgba(170, 36, 77,0.8);
	padding: 4px 20px;
	border: none;
	color: #fff;
    float: right;
    font-size: 0.9em;
    cursor: pointer;
    border-radius: 8px;
    font-family: inherit;
}


input[type=submit]:hover,button[type=submit]:hover{
	background: rgba(170, 36, 77,1);
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
}
.form-.required{
	color:red;
}


input:autofill,
input:autofill:hover, 
input:autofill:focus,
textarea:autofill,
textarea:autofill:hover,
textarea:autofill:focus{ 
  background-color: rgba(255,255,255,0.2);
}

/**********************/
/**** HOME SECTION ****/
/**********************/


.vl {
    position: relative;
    left: 50%; height: 50px; width: 1px;
    margin-top: 5px; margin-bottom: 20px;
    border-left: 1.5px solid black;
}

.vl.extra {
    margin-top: 20px;
    margin-bottom: 30px;
}

.rsvp {
    width: 120px; height: 120px;
    border-radius: 50%;
    background: #AA244D;
    position: absolute;
    right: 100px;
    bottom: 50px;
    line-height: 120px;
    color: #fff1dc;
    font-weight: 700; font-size: 26px;
    transition: all 200ms;
    transform: scale(1);
    cursor: pointer;
}

.rsvp.inline {
    position: relative;
    right: auto;
    bottom: auto;
    display: inline-block;
}

.rsvp:hover {
    animation: pulsing 500ms infinite ease-in-out;
    animation-direction: alternate;
    transition: all 200ms;
}

@keyframes pulsing {
    from { transform: scale(1);}
    to { transform: scale(1.1);}
}


.spinning { animation: rotation 25s infinite linear; transform-origin: 50% 50%; }

@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

#home {
    top: 0; left: 0; height: 100vh; min-height: 400px;
    background-image: url("img/HarmonyBrianJPG.jpg");
    background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;
    overflow: hidden;
}

#script {
    width: 100%; position: absolute;
    top: 50%; left: 0; transform: translateY(-50%);
    fill:#fff1dc;
}

.spacer {
    display: inline-block;
    height: 4px; width: 50px;
    background-color: #000000;
    margin-left: 15px; margin-right: 15px;
}

.hb-img {
    display: inline-block; position: relative;
    height: 300px; width: 300px;
    background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;
    border: 10px white solid;
    border-bottom: 40px white solid;
    filter: drop-shadow(0 5px 0 rgba(0,0,0,0.05))
}

.hb-img.left {
    background-image: url("img/hb1.jpg");
    transform: rotate(-1deg);
}

.hb-img.right {
    background-image: url("img/hb2.jpg");
    transform: rotate(1deg);
    top: 100px; margin-left: 40px;
}

.half-bg {
    display: block; position: absolute;
    height: 200px; width: 100%;
    top: 0; left: 0;
    background-color: rgba(247,205,169,0.4);
}

.img-container {
    width: 100%; height: 460px;
    position: relative;
}

.scroll-container {
    position: relative;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

.img-scroller {
    position: relative;
    overflow-x: scroll;
    white-space: nowrap;
    padding: 40px 60px 100px 60px;
}

.hb-img.scroll {
    margin-right: 40px;
    transition: transform 200ms ease;
    transform: rotate(0deg);
}

.img-scroller {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.img-scroller::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.hb-img.scroll::after {
    height: 70px;
    width: 20px;
    background: #D2AB6F;
    position: relative;
    left: 50%;
    transform: translateX(-10px);
    top: -55px;
    display: block;
    content: '';
    filter: drop-shadow(0 5px 0 rgba(0,0,0,0.1))
}

.hb-img.scroll.rotatedleft {
    transition: transform 200ms ease;
    transform: rotate(-1deg);
    filter: drop-shadow(-5px 5px 0 rgba(0,0,0,0.05));
}

.hb-img.scroll.rotatedright {
    transition: transform 200ms ease;
    transform: rotate(1deg);
    filter: drop-shadow(5px 5px 0 rgba(0,0,0,0.05));
}

.clothesline {
    width: 100%;
    height: 1px;
    position: absolute;
    background: black;
    top: 20px;
    opacity: 0.3;
}

#hb1 { background-image: url("img/hb1.jpg"); }
#hb2 { background-image: url("img/hb2.jpg"); }
#hb3 { background-image: url("img/hb3.jpg"); }
#hb4 { background-image: url("img/hb4.jpg"); }
#hb5 { background-image: url("img/hb5.jpg"); }
#hb6 { background-image: url("img/hb6.jpg"); }
#hb7 { background-image: url("img/hb7.jpg"); }
#hb8 { background-image: url("img/hb8.jpg"); }
#hb9 { background-image: url("img/hb9.jpg"); }
#hb10 { background-image: url("img/hb10.jpg"); }
#hb11 { background-image: url("img/hb11.jpg"); }

.spotify-iframe {
    display: none;
}

.spotify-iframe.playing {
    display: block;
}


/**********************/
/**** SVG GRAPHICS ****/
/**********************/


.symbol { display: none; }

.highlighter {
    width: 280px; left: 50%;
    transform: translate(-50%, -45px) scaleY(1.2);
    position: absolute; vertical-align: top;
    opacity: 0.15;
}

.highlighter.music {
    left: auto;
    transform: translate(0, -45px) scaleY(1.2);
    position: relative;
    margin-bottom: -55px;
}

.drawing {
    position: relative;
    display: inline-block;
    height: 180px; width: auto;ex
    margin: 0;
}

.drawing.minor {
    margin-top: 30px;
}

.inline-svg {
    display: inline-block;
    height: 1em;
    margin-bottom: -2px;
    margin-right: 15px;
    opacity: 0.8;
}

.app-svg {
    display: inline-block;
    width: 130px;
    height: auto;
    margin: 10px 20px;
    opacity: 0.6;
    transition: all 200ms ease;
    cursor: pointer;
}

.app-svg.lyft {
    margin: 10px -10px;
}

.app-svg:hover {
    opacity: 1;
}

.spinning { animation: rotation 25s infinite linear; transform-origin: 50% 50%; }

@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}


/**********************/
/***** TYPOGRAPHY *****/
/**********************/


h1 { font-size: 2.2em; line-height: 1.2em; margin-top: 0.4em;}
h2 { font-size: 1.5em; }
h3 { font-size: 1.5em; font-weight: 400; font-style: italic; }
p { line-height: 1.4em; font-size: 1em; }
a { font-style: italic; color:#17303F; }
.text-padding { padding-top: 0.6em; padding-bottom: 0.6em; }
.bold { font-weight: 700; }

::selection {
    background: #AA244D;
    color: white;
}

::-moz-selection {
    background: #AA244D;
    color: white;
}


/**********************/
/***** FLEX BOXES *****/
/**********************/


.flex-box {
    width: 100%;
    border-radius: 10px;
    border: 1px rgba(234, 134, 129, 0.4) solid;
    display: flex;
    flex-wrap: wrap;
    line-height: 1.4em;
    margin: auto;
    margin-bottom: 20px;
}

.box-title {
    flex: 2;
    padding: 20px;
    font-weight: 700;
    min-width: 130px;
}

.box-details {
    flex: 6;
    text-align: left;
    padding: 0 20px 0 20px;
    border-left: 1px rgba(234, 134, 129, 0.4) dotted;
    border-top: none;
    min-width: 300px;
}

.flex-box.wrapped .box-details {
    border-left: none;;
    border-top: 1px rgba(234, 134, 129, 0.4) dotted;
}

.flex-box.wrapped .box-title {
    padding: 12px 12px 6px 12px;
}


/**********************/
/**** CHICAGO MAPS ****/
/**********************/

.map {
    display: inline-block; position: relative;
    height: 250px; width: 350px;
    border-radius: 10px;
    border: 1px rgba(234, 134, 129, 0.4) solid;
    margin: auto; margin-top: 15px;
}

.map-container {
    width: auto; height: auto;
    margin-top: 20px; margin-bottom: 30px;
}

.hz {
    position: relative; display: inline-block;
    width: 10px;
}

.in-map {
    position: absolute;
    height: 250px; width: 100%;
    border-radius: 10px;
}

.map-overlay {
    background: rgba(247,205,169, 0.6);
}

.centered {
    position: relative; top: 50%; transform: translateY(-50%); display: block;
}


/**********************/
/***** LIVE MUSIC *****/
/**********************/


.music-text {
    width: 357px;
    display: inline-block;
    margin: 20px;
    vertical-align: top;
    position: relative;
}

.spotify {
    width:357px; max-width: 100%;
    display: inline-block;
    margin:20px;
}


/**********************/
/******** FAQ *********/
/**********************/

.collapsible-header {
  color: black;
  cursor: pointer;
  text-align: left;
  position: relative;
  display: flex;
  padding-left: 18px;
  padding-right: 18px;
}

.collapsible-header.active, .collapsible-header:hover {
  background: none;
  background-color:  rgba(234, 134, 129, 0.15);
}

.collapsible-header::before {
  content: '\002B';
  color: black;
  font-weight: bold;
  align-items: center;
  display: flex;
  min-width: 30px;
  width: 30px;
}

.collapsible-header.active::before {
  content: "\2013";
}

.collapsible-content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  position: relative;
}

.collapsible-wrapper {
  margin-top: 1em;
  border: 1px rgb(234,134,129) solid;
  border: 1px rgba(234, 134, 129, 0.4) solid;
  overflow: hidden;
  border-radius: 10px;
}


/**********************/
/**** DESKTOP NAV *****/
/**********************/


.top-menu {
    height: 60px; width: 100%;
    position: fixed;
    top: 0; left: 0;
    z-index: 10000;
    background: transparent;
    transition: all 200ms;
}

.top-menu.scrolled {
    background: rgba(0,0,0, 1);
    transition: all 200ms;
}

.top-menu ul {
    list-style: none;
    position: relative;
    margin: 10px 40px 0 16px;
    cursor: pointer;
}

.top-menu li {
    float: right;
    font-weight: bold;
    padding: 5px 12px;
    color: #fff1dc;
    border-bottom: 3px solid rgba(255, 241, 220, 0.2);
    margin: 0;
}

.top-menu li:hover {
    border-bottom: 3px solid rgba(255, 241, 220, 1);
    transition: 200ms linear;
}

.harmonyandbrian, .handb {
    float: left;
    margin: 10px 0 0 30px; padding: 5px 15px;
    color: #fff1dc; font-weight: bold;
    border-bottom: 3px solid rgba(255, 241, 220, 0.2);
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='30' height='30'%3E%3Cpath fill='%23ffffff' stroke='%2317303F' stroke-width='2' d='M15 8.96C12.26-.68 1 2.23 1 11.39s14 15.63 14 15.63 14-6.47 14-15.63S17.74-.68 15 8.96z'/%3E%3C/svg%3E") 16 16, pointer;
}

.harmonyandbrian:hover, .handb:hover {
    border-bottom: 3px solid rgba(255, 241, 220, 1);
    transition: 200ms linear;
}

.handb { display: none; }

.mob-break { display: none; }


/**********************/
/***** MOBILE NAV *****/
/**********************/


/* MOBILE MENU LIST */

.mob-menu {
    position: fixed; display: none; visibility: hidden; overflow: hidden;
    height: 100%; width: 100%; top: 0; left: 0;
    max-height: 100vh; max-width: 100vw;
    text-align: center;
    z-index: 30000;
}

.mob-menu.clicked {
    visibility: visible;
}

.mob-menu ul {
    position: absolute; display: block;
    left: 50%; top: 50%; transform: translate(-50%, -55%); transition-delay: 200ms;
    padding: 0;
    list-style: none; font-size: 28px; line-height: 8vh; font-weight: bold;
    opacity: 0; color: #FDF1E4;
}

.mob-menu.clicked ul{
    opacity: 1;
    transition: opacity 200ms;
    transition-delay: 200ms;
}

.mob-menu span {
    cursor: pointer;
    padding: 8px 12px 2px 12px;
    border: 3px transparent solid;
    transition: 200ms linear;
    border-radius: 6px;
    border-bottom: 3px solid rgba(255, 241, 220, 0.2)
}

.mob-menu span:hover {
    border-color: #FDF1E4;
    transition: 200ms linear;
}

/* MOBILE MENU BACKGROUND */

.circlemenu {
    position: fixed; display: none; z-index: 20000;
    background-color: #EA8681;
    height: 300vh; width: 300vh;
    min-height: 300vw; min-width: 300vw;
    left: -10px; top: -10px;
    transform: translate(-50%, -50%) scale(0); transition: transform 400ms linear;
    border-radius: 50%;
}

.circlemenu.clicked {
    transform: translate(-50%, -50%) scale(1);
    transition: transform 400ms linear;
}

/* MOBILE MENU ICON */

.menu-back {
    height: 40px; width: auto;
    top: 15px; left: 10px;
    position: fixed; display: none;
    z-index: 10000;
    background: #17303F;
    background: rgba(23,48,63,0.95); 
    border-radius: 20px;
    padding: 0px 20px 0px 50px;
    color: #FDF1E4;
    font-size: 1em; line-height: 40px; font-weight: 700;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .1); 
    cursor: pointer;
}


#menu-icon {
    position: fixed; display: none; cursor: pointer;
    width: 24px; height: 16px;
    top: 28px; left: 26px;
    z-index: 40000;
    transform: rotate(0deg); transition: 500ms ease-in-out;
    opacity: 1;
}

#menu-icon span {
    display: block; position: absolute; left: 0;
    height: 2px; width: 100%;
    background: #fff1dc; border-radius: 2px; opacity: 1;
    transform: rotate(0deg); transition: all 250ms ease-in-out, background 500ms ease;
}

#menu-icon span:nth-child(1) { top: 0; }
#menu-icon span:nth-child(2), #menu-icon span:nth-child(3) { top: 6px; }
#menu-icon span:nth-child(4) { top: 12px; }

#menu-icon.clicked span:nth-child(1), #menu-icon.clicked span:nth-child(4)  { top: 6px; width: 0%; left: 50%; }
#menu-icon.clicked span:nth-child(2) { transform: rotate(45deg); }
#menu-icon.clicked span:nth-child(3) { transform: rotate(-45deg); }
#menu-icon.wht.clicked span:nth-child(2) { transform: rotate(45deg); background-color: #FDF1E4;}
#menu-icon.wht.clicked span:nth-child(3) { transform: rotate(-45deg); background-color: #FDF1E4;}


/**********************/
/**** MEDIA QUERIES ***/
/**********************/


@media (max-aspect-ratio: 5/6) {
    #script { width: 140%; left: -20%; }
}

@media (min-aspect-ratio: 9/4) {
    .bg { background-position: 50% 25%; background-repeat: no-repeat; background-size: cover; }
}

@media screen and (max-width: 936px) {
    .music-text, .spotify {
        width: 100%; max-width: 600px;
        margin-left: 0; margin-right: 0;
    }
}

@media screen and (max-width: 890px) {
    .harmonyandbrian {display: none;}
    .handb {display: inherit;}
}

@media screen and (max-width: 800px) {
    .top-menu {display: none;}
    .hb-img { height: 260px; width: 260px; }
    .hb-img.scroll { margin-right: 30px; }
    .hb-img.right { top: 80px; margin-left: 30px; }
    .half-bg { height: 190px; }
    .img-container { height: 400px; }
    #menu-icon, .mob-menu, .circlemenu, .menu-back { display: block;}
    .drawing.minor { height: 140px; }
    .rsvp {display: none;}
}

@media screen and (max-width: 700px) {
    .hb-img { height: 340px; width: 340px; }
    .hb-img.scroll { margin-right: 40px; }
    .hb-img.right { display: none; }
    .half-bg { height: 190px; }
    .img-container { height: 400px; }
    .hz {display: none;}
    .nowrap {display: block;}
    .map {width: 100%;}
    .app-svg { margin: 10px 10px;}
    .app-svg.lyft { margin: 10px -15px; }
}

@media screen and (max-width: 500px) {
    .hb-img { height: 300px; width: 300px; }
    .hb-img.scroll { margin-right: 30px; }
    .half-bg { height: 175px; }
    .img-container { height: 360px; }
    .content { width: calc(100% - 80px); margin: 40px;}
    .drawing.minor { height: 120px; }
}

@media screen and (max-width: 580px) {
    .app-svg { width: 100px }
}

@media screen and (max-width: 680px) {
    .footer-container { line-height: 30px }
    .mob-break { display: block; }
    .love {margin-bottom: 0;}
}

@media screen and (max-width: 450px) {
    .hb-img { height: 250px; width: 250px; }
    .half-bg { height: 150px; }
    .img-container { height: 310px; }
    h1 { font-size: 1.6em; line-height: 1.2em; }
    h2 { font-size: 1.2em; }
    h3 { font-size: 1.2em; }
    .box-details {min-width: calc(100% - 40px);}
    body,html { font-size: 1em;}
    .drawing.minor { height: 100px; }
    .highlighter { width: 220px; transform: translate(-50%, -35px) scaleY(1.2);}
    .highlighter.music { transform: translate(0, -35px) scaleY(1.2);}
}

@media screen and (max-width: 350px) {
    .hb-img { height: 200px; width: 200px; }
    .hb-img.scroll { margin-right: 20px; }
    .clothesline { top: 10px; }
    .img-scroller { padding: 30px 40px 80px 40px; }
    .half-bg { height: 130px; }
    .img-container { height: 260px; }
    .content { width: calc(100% - 50px); margin: 25px;}
    .drawing.minor { height: 90px; }
}

@media screen and (max-height: 500px) {
    .mob-menu ul { font-size: 18px; line-height: 8vh;}
}

@media screen and (max-height: 360px) {
    .mob-menu ul { font-size: 16px; line-height: 7vh;}
}