/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/
/* Mobile - 360px - Contains hover animation */
@media only screen and (min-width: 0em) {
  
}
/*-- -------------------------- -->
<---    Final Call To Action    -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  
}
/* ============================================
   CONTENT GATE
============================================ */
#int-hero {
    z-index: 600;
}
#premium-content {
    /* filter: blur(8px); */
    /* pointer-events: none; */
    /* user-select: none; */
    max-width: 1200px;
    margin: 0px auto;
    /* border: solid 1px #000000; */
}

#gate-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 500;
    padding: 20px;
}

.gate-box {
    width: 100%;
    max-width: 500px;
    position: fixed;
    top: 63%;
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    text-align: center;
}

.gate-box h2 {
    margin-bottom: 10px;
}

.gate-box p {
    margin-bottom: 20px;
}

#email-form {
    display: flex;
    gap: 10px;
}

#email-form input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

#email-form button {
    padding: 12px 20px;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

@media only screen and (max-width: 600px) {
    #email-form {
        flex-direction: column;
    }

    .gate-box {
        padding: 30px 20px;
    }
}
/* Large Desktop */

#gate-overlay {
    text-align: center;
}
/* .services {
    margin-top: -20px;
    display: block;
    text-align: center;
}
.services h2 {
    text-align: center;
    color: var(--bodyTextColor);
    font-size: 1.5em;
}
.services a {
    color:var(--primary);
    font-size: 1em;
}
.services a:hover {
    color:var(--primaryShade);
} */
.container {
    text-align: center;
}
.print_clips {
	width: 100%;
	max-width: 1000px;
	margin: 50px auto;
}
.clip {
	display: inline-block;
	height: 140px;
	vertical-align: top;
	margin: 7px;
	text-align: left;
	width: 15%;
	padding: 5px 14px;
	overflow: hidden;
	transition: transform .2s; /* Animation */
}
.description {
	display: inline-block;
	margin-top: 25px;
	text-align: left;
	width: 70%;
	padding: 5px 14px;
	overflow: hidden;
}
.clip img {
	border-radius: 110px;
	border: solid 2px var(--primaryShade);
	height: 130px;
	width: 130px;
	padding: 3px;
}
.description p {
	font-size: 13px;
	color: var(--bodyTextColor);
	padding-top: 5px;
}
.description h2 {
	color: var(--bodyTextColor);
	font-size: 15px;
	text-transform: uppercase;
	margin:0px;
}
.description a {
    text-decoration: none;
    color: var(--primary);
    font-size: 13px;
    font-weight: bold;
}
.clip:hover {
	transform: scale(1.1);
}


  
  /*-- -------------------------- -->
  <---    Website Clips Styles    -->
  <--- -------------------------- -*/ 
  .website_container {
	  margin: 0 auto;
	  max-width: 1000px;
  }
  .section_headers {
	  margin: 10px 0px;
	  border-top: solid 1px var(--bodyTextColor);
	  border-bottom: solid 1px var(--bodyTextColor);
	  padding: 10px 0px;
  }
  .icon_circle {
    border: solid 2px var(--primaryShade);
    padding: 19px auto;
    border-radius: 42px;
    height: 70px;
	width: 70px;
	display: inline-flex;
	align-items: center;
  }
  .icon_circle i {
   	color: var(--primary);
	text-align: center;
	margin: 0 auto;
  }
  .webclips-title {
	  color: var(--primary);
	  padding: 20px 0px;
	  display: inline-flex;
  }
  .personal_finance {
	  width: 100%;
	  max-width: 1200px;
	  margin: 20px auto 50px auto;	
  }
  .personal_finance h2 {
	  text-transform: uppercase;
	  font-size: 20px;
	  padding: 10px 0px;
	  color: var(--bodyTextColor);
  }
  .personal_finance a {
	  text-decoration: none;
	  color: var(--primary);
	  padding-left: 5px;
  }
  .personal_finance .column_1 {
	  display: inline-block;
	  width: 28%;
	  vertical-align: top;
  }
  .personal_finance .column_2 {
	  display: inline-block;
	  width: 68%;
  }
  .personal_finance .column_2 p {
	  display: inline-block;
  }
  .personal_finance .column_2 span {
	  border-right: 2px solid var(--primaryShade);
	  padding-right: 10px;
	  color: var(--bodyTextColor);
  }
  body.dark-mode .personal_finance .column_2 span {
	  border-right: 2px solid #fff;
	  color: var(--primaryShade);
  }
  .center {
      text-align: center;
  }
  /*-- -------------------------- -->
  <---    Special Content Styles    -->
  <--- -------------------------- -*/  
  
.custom_clips {
  	display: grid;
  	grid-template-columns: 1fr 3fr;
  	grid-template-rows: repeat(11, 1fr);
  	grid-column-gap: 20px;
  	grid-row-gap: 10px;
	width: 100%;
  	max-width: 1200px;
  	margin: 50px auto;
  }
  
  .custom_clips p {
	  border-right: solid 2px var(--primaryShade);
	  text-align: right;
	  padding-right: 10px;
	  color: var(--bodyTextColor);
  }
  .custom_clips a {
	  text-decoration: none;
	  color: var(--primary);
  }
  
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 3 / 1 / 4 / 2; }
.div6 { grid-area: 3 / 2 / 4 / 3; }
.div7 { grid-area: 4 / 1 / 5 / 2; }
.div8 { grid-area: 4 / 2 / 5 / 3; }
.div9 { grid-area: 5 / 1 / 6 / 2; }
.div10 { grid-area: 5 / 2 / 6 / 3; }
.div11 { grid-area: 6 / 1 / 7 / 2; }
.div12 { grid-area: 6 / 2 / 7 / 3; }
.div13 { grid-area: 7 / 1 / 8 / 2; }
.div14 { grid-area: 7 / 2 / 8 / 3; }
.div15 { grid-area: 8 / 1 / 9 / 2; }
.div16 { grid-area: 8 / 2 / 9 / 3; }
.div17 { grid-area: 9 / 1 / 10 / 2; }
.div18 { grid-area: 9 / 2 / 10 / 3; }
.div19 { grid-area: 10/ 1 / 10 / 2; }
.div20 { grid-area: 10/ 2 / 10 / 3; }
.div21 { grid-area: 11/ 1 / 11 / 2; }
.div22 { grid-area: 11/ 2 / 11 / 3; }

@media only screen and (max-width: 1000px) {
	.custom_clips {
	  	grid-template-columns: 1fr 2fr;
	  }
	  .website_container {
    	  margin: 0 auto;
		  max-width: 700px;
      }
	  .personal_finance .column_1, .personal_finance .column_2 {
		display: block;
		width: 100%;
	}
	.personal_finance .column_2 {
		padding-top: 30px;
	}
}
  
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #cta:after {
    display: none;
  }
}
/* Small Desktop */
@media only screen and (max-width: 1024px) {
	.clip {
    	width: 30%;
		text-align: center;
		margin: 1.3%;
    }
    .gate-box {
        position: fixed;
        top: 38%;
    }
}

@media only screen and (max-width: 768px) {
	.clip {
    	width: 46%;
		text-align: center;
		padding-top: 10px;
		margin: 1.5%
    }
	.website_container {
		margin: 0 30px;
	}
}

@media only screen and (max-width: 500px) {
	.clip {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		padding-top: 10px;
	}
}