/*
-----------------------------------------------
imarketsolutions.com 
Stylesheet: tools.css
Created: 8/19/2024
Author:  Mike Owens
Organization:  iMarket Solutions
----------------------------------------------- */

/* --- GENERAL UTILITY - UNIVERSAL RESET --- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin: 0;padding: 0;}

*, *:before, *:after {box-sizing: border-box;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; background: transparent none repeat left top;}
fieldset, a img { border: 0 solid transparent; }

html, body {height:100%;}

body {
  font: 62.5%/1.8em "Saira Condensed", sans-serif;
  background-color: #FFF;
  text-align: left;
  min-width:320px;
  color: #3b3b3b;
}

body.active-navigation,
body.no-scroll {
  overflow: hidden;
}

/* --- GENERAL UTILITY - TYPOGRAPHY --- */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.15em;
  margin: .5em 0 0em;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
  display: block;
}

p, li {line-height:1.6em;}

p {margin-bottom: 1.3em;}

#home-top-content li,
#home-main-content li,
#top-content li,
#main-content li {
  margin-bottom: .5em;
}

address {
  font-size: 1.2em;
  font-style: normal;
  margin-bottom: 1.5em;
}

blockquote {
  margin: 0 .6em;
}

iframe {
  border:none;
  position: relative;
  z-index:1;
}

blockquote p { margin-bottom: 0.75em; }
blockquote .source { font-size: 1.2em; }
ul, ol { padding: 0 0 1.8em 3.6em; color:#000000;}
ul ul, ul ol, ol ul, ol ol { padding-bottom: 0; }
li li, li p { font-size: 1em; }

dl { padding: 0 0 1.8em 0; }
dt {font-size: 1.3em;font-weight: bold;}
dd {font-size: 1.3em;padding: 0 0 1.5em 3.6em;}

dd ul, dd ol { padding-left: 0; }
dd * { font-size: 1em; }
.publication_name { font-style: italic; }
.footnote { font-size: 1.1em; }


/* --- LAYOUTS - TYPOGRAPHY --- */

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,p,li {-webkit-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}

h1,.h1 {font-size: 3.6em; line-height: 1.2em; text-shadow: 1px 2px 4px gray;}
h2,.h2 {font-size: 2.8em;}
h3,.h3 {font-size: 2.4em;}
h4,.h4 {font-size: 2.0em;}
h5,.h5 {font-size: 1.6em;}
h6,.h6 {font-size: 1.6em;}
p, li {font-size: 1.6em;}

/*----- LAYOUTS - TYPOGRAPHY ----- */
@media all and (min-width: 571px) {
  h1,.h1 {font-size: 3.5em;}
  h2,.h2 {font-size: 3em;}
  h3,.h3 {font-size: 2.5em;}
  h4,.h4 {font-size: 2em;}
  h5,.h5 {font-size: 1.7em;}
  h6,.h6 {font-size: 1.6em;}
  p, li {font-size: 1.6em; line-height:1.4em;}
}
  
@media all and (min-width: 801px) {
  h1,.h1 {font-size: 4em;}
  h2,.h2 {font-size: 3.2em;}
  h3,.h3 {font-size: 2.8em;}
  h4,.h4 {font-size: 2.2em;}
  h5,.h5 {font-size: 1.8em;}
  h6,.h6 {font-size: 1.7em;}
  p, li {font-size: 1.7em;}
}
  
@media all and (min-width: 1025px) {
  h1,.h1 {font-size: 4.5em;line-height:54px}
  h2,.h2 {font-size: 3.6em;line-height: 42px;}
  h3,.h3 {font-size: 3em;}
  h4,.h4 {font-size: 2.4em;}
  h5,.h5 {font-size: 2em;}
  h6,.h6 {font-size: 1.8em;}
  p, li {font-size: 1.8em;}
}
  
@media all and (min-width: 571px) {
  .width-limiter {
    width:calc(100% - 40px);
  }
}
#container-all {
  padding: 3rem 5rem;
}
body .view-all.external-link a {
  color: #343434;
}

/* --- Vanity URL Creator Styles --- */

#output,
#testArea {
  display: none;
}
.vanity-url-wrapper {
  max-width: 1200px;
  width: 100%;
  text-align: left;
}
.vanity-url-wrapper input:not(#campaign-button):not(.toggleCheckbox),
.vanity-url-wrapper textarea {
  display: block;
  width: 100%;
  border-radius: 5px;
  border: 2px solid #ddd;
  padding: 5px 10px;
  font-size: 15px;
  margin-top: 5px;
}
.vanity-url-wrapper input:not(#campaign-button):not(.toggleCheckbox) {
  height: 40px;
}
.vanity-url-wrapper h2 {
  margin-bottom: 10px;
}
.vanity-url-wrapper label,
.vanity-url-wrapper textarea {
  font-size: 1.6em;
}
.vanity-url-wrapper input::placeholder,
.vanity-url-wrapper textarea::placeholder {
  font-style: italic;
  color: #cdcdcd;
}
#testRedirect {
  background-color: #8b2e28;
  color: #fff;
  border-radius: 50px !important;
  font-family: "Saira Condensed", sans-serif;
  height: 46px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  transition: 0.2s;
  padding: 0 25px !important;
  text-transform: uppercase;
  display: inline-block;
  line-height: 46px;
  text-decoration: none;
}
#campaign-button,
#copyButton {
  margin-top: 20px;
}
#output > h3 {
  margin-top: 50px;
}
.multiple-entries {
  margin-bottom: 20px;
}
.multiple-entries > p {
  margin: 0 0 10px;
}
.toggleContainer {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: fit-content;
  border: 3px solid #343434;
  border-radius: 20px;
  background: #343434;
  font-weight: bold;
  color: #343434;
  cursor: pointer;
}
.toggleContainer::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0%;
  border-radius:20px;
  background: white;
  transition: all 0.3s;
}
.toggleCheckbox:checked + .toggleContainer::before {
  left: 50%;
}
.toggleContainer div {
  padding: 6px;
  text-align: center;
  z-index: 1;
}
.toggleCheckbox {
  display: none;
}
.toggleCheckbox:checked + .toggleContainer div:first-child{
  color: white;
  transition: color 0.3s;
}
.toggleCheckbox:checked + .toggleContainer div:last-child{
  color: #343434;
  transition: color 0.3s;
}
.toggleCheckbox + .toggleContainer div:first-child{
  color: #343434;
  transition: color 0.3s;
}
.toggleCheckbox + .toggleContainer div:last-child{
  color: white;
  transition: color 0.3s;
}
#testLinks p {
  display: flex;
}
#testLinks a {
  display: block;
}
#testMessage,
#testArea {
  margin-top: 30px;
}
#fullResetButton {
  margin-left: 80px;
}
#fullResetButton,
#textForm input {
  font-family: "Saira Condensed", sans-serif;
}
button,
input[type="submit"] {  
  background-color: #343434;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  padding: 5px 12px;
  border-radius: 5px;
  font-family: "Saira Condensed", sans-serif;
}
@media all and (min-width:800px) {
  #textForm .formInfo {
    display: flex;
    gap: 10px 62px;
    flex-wrap: wrap;
    max-width: 819px;
  }
  .textFormSection:nth-child(3),
  .textFormSection:nth-child(6) {
    flex-grow: 1;
  }
}