/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  height: 100%;
}

body {display: flex;
  flex-direction: column;}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   
/* layout styles and design systems */
strong {font-weight: 600; color: #135;}
.centered {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}

.mids {
  width: 90%; margin: 10px auto;
}

.gradientbg {background: linear-gradient(to top, #f2f2f2, #ffffff);}

p.buttonstyled a {text-transform: lowercase; display:inline-block; text-decoration: none; padding: 0.4% 0.5%; border: 1px solid #ccc; border-radius: 3px; margin-bottom: 1%;}
p.buttonstyled a:hover {background: #333; color: #fff; transition: 0.6s; text-shadow: none; text-decoration: none;}

.button {
    display: inline-block;
    padding: 10px 20px;
    color: #ffffff;
    border: 2px solid black;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.button:hover {
    background-color: #333;
    border-color: #333;
    color: #fff;
    text-shadow: none;
}

header {
   position: absolute;
   top: 0;
   display: block;
   width: 100vw;
   z-index: 99!important;
   }
   
a.logo {
	 position: absolute; 
	 top: 0;
	 left: 0;
	 color: #2b93c1;
	 font-size: 4.3em; 
	 z-index: 99!important;
   }
#interior a.logo {color: #fff;}

#menu-toggle {
	 position: absolute;
	 appearance: none;
	 cursor: pointer;
	 left: -100%;
	 top: -100%;
   }
   #menu-toggle:checked ~ .menu {
	 top: 0;
   }
   #menu-toggle:checked ~ .menu-button:not(.steps) .menu-icon {
	 background: transparent;
   }
   #menu-toggle:checked ~ .menu-button:not(.steps) .menu-icon:before {
	 transform: rotate(-45deg);
	 top: 0;
	 background: #ccc;
   }
   #menu-toggle:checked ~ .menu-button:not(.steps) .menu-icon:after {
	 transform: rotate(45deg);
	 top: 0;
	 background: #ccc;
   }
   
   .menu {
	 display: block;
	 color: #fff;
	 text-align: right;
	 position: absolute;
	 float: right;
	 z-index: 10;
	 top: -90vh;
	 right: 0;
	 width: 30vw;
	 height: 100vh;
	 margin: auto;
	 padding: 40px 10px 0 0;
	 transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
	 overflow: hidden;
	 box-sizing: border-box;
   }
   .menu nav ul {
	 color: #fff;
	 list-style: none;
   }
   .menu nav ul li {
	 font-family: museo-sans-display, sans-serif;
	 font-size: 1.3em;
	 font-weight: 400;
	 margin-bottom: 0;
   }
   .menu nav ul a {
	 text-decoration: none;
	 color: #fff;
   }
   .menu nav ul li a:hover {border-bottom: 3px solid #fff; padding-right: 4px; transition: 0.4s; transition-timing-function: ease-out; transition-timing-function: ease-in;}
   .menu-button {
	 cursor: pointer;
	 display: inline-block;
	 float: right;
	 padding: 28px 20px;
	 border-radius: 4px;
	 position: relative;
	 user-select: none;
	 z-index: 300;
   }
   .menu-icon {
	 background: #fff;
	 display: block;
	 height: 3px;
	 position: relative;
	 transition: all 0.2s ease-out;
	 -webkit-transition: all 0.15s ease-out;
	 width: 30px;
   }
   .menu-icon:before, .menu-icon:after {
	 background: #fff;
	 content: "";
	 display: block;
	 height: 100%;
	 position: absolute;
	 transition: all 0.2s ease-out;
	 -webkit-transition: all 0.2s ease-out;
	 width: 100%;
   }
   .menu-icon:before {
	 top: 8px;
   }
   .menu-icon:after {
	 top: -8px;
   }
/* top page styles */
/* full screen video styles - used on homepage and some interior pages */

.pageContent {flex: 1;}

.topBanner {
  position: relative;
  height: 40vh;
  border-bottom: 4px solid #ccc;
  padding: 5% 0 0 0;
  display: block; 
  font-family: museo-sans-rounded, sans-serif;
  font-weight: 300;
  color: #fff;
  background: linear-gradient(to bottom, #008aff, #002d72);
  font-size: 1.5em;
}


body.work .topBanner { 
background: url(https://clrty.co/post_images/Bloomonfranklin_1.27_%40mleonphotos-4573__1.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.topInfoGroup {width: 50%; position: absolute; bottom: 0; margin: 0 0 0 4%;}
.topBanner h1 {display: inline;}
.topBanner p {display: inline; margin: 0 0 0 4%;}
.topBanner p a {margin-left: 2%; color: #fff; text-decoration: none;}
.topBanner p a:hover {color: #ccc; text-decoration: underline;}

.full-screen-video-container {
  position: relative;
  top: 0px;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: rgb(38,38,40);
  background: linear-gradient(180deg, rgba(38,38,40,1) 0%, rgba(81,74,83,0) 73%);
}

.full-screen-video-container video {
  z-index: -1;
  position: absolute;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.full-screen-video-content {
  position: absolute;
  width: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.full-screen-video-content h1 {font-family: museo-sans-rounded, sans-serif;
  font-weight: 300;
  color: #fff;
  font-size: 1.5em;} /* 3.3em; */
  
.full-screen-video-content p {text-transform: uppercase;
  color: #fff; font-family: questa-grande, serif; font-weight: 400; font-size: 1.0em;} /* font-size 1.3em */

.full-screen-video-content p a {padding: 1%!important; color: #ffffff; text-decoration: none; border: 2px solid #fff;}
.full-screen-video-content p a:hover {color: #fff; text-shadow: 1px 1px 3px #333; transition: 0.3s; background: #660;}


.scrollcontainer {background: url(https://www.nxworld.net/example/css-scroll-down-button/bg03.jpg) center center / cover no-repeat;
  background: rgb(38,38,40);
  background: linear-gradient(180deg, rgba(38,38,40,1) 0%, rgba(81,74,83,0) 73%);
}

.scrollcontainer a {
  padding-top: 60px;
}
.scrollcontainer a span {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border: 1px solid #fff;
  border-radius: 100%;
  box-sizing: border-box;
}
.scrollcontainer a span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  width: 16px;
  height: 16px;
  margin: -12px 0 0 -8px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}
.scrollcontainer a span::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  content: '';
  width: 44px;
  height: 44px;
  box-shadow: 0 0 0 0 rgba(255,255,255,.1);
  border-radius: 100%;
  opacity: 0;
  -webkit-animation: sdb03 3s infinite;
  animation: sdb03 3s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb03 {
  0% {
	opacity: 0;
  }
  30% {
	opacity: 1;
  }
  60% {
	box-shadow: 0 0 0 60px rgba(255,255,255,.1);
	opacity: 0;
  }
  100% {
	opacity: 0;
  }
}
@keyframes sdb03 {
  0% {
	opacity: 0;
  }
  30% {
	opacity: 1;
  }
  60% {
	box-shadow: 0 0 0 60px rgba(255,255,255,.1);
	opacity: 0;
  }
  100% {
	opacity: 0;
  }
}
.midContainer {color: #333; font-family: museo-sans, sans-serif; padding-top: 5%; padding-bottom: 5%;
}
.midContainer h1 {font-weight: 600; font-size: 3.0em}/* 1.0em; */
.midContainer h2 {font-weight: 600; text-shadow: 0 2px 1px #fff; /* Letterpress effect shadow */}
.midContainer p {font-weight: 300; font-size: 1.2em; text-shadow: 0 2px 1px #fff; /* Letterpress effect shadow */}
.midContainer p b {font-weight: 600;}
.midContainer a {color: #880; text-decoration: none;}
.midContainer a:hover {text-decoration: underline; color: #660; text-shadow: none; transition: 0.4s;}

.bottomContainer {background: none;}
.bottomContainer h2 {font-family: museo-sans; background: #fff; color: #333; padding-left: 4%; font-weight: 300;}
.bottomContainer p {}
.workGrid, .bottomContainer {font-family: museo-sans, sans-serif; border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.workGrid ul li#A1 { 
background: url(https://clrty.co/post_images/PARTONECANVAS2.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.workGrid ul li#A2 { 
background: url(https://clrty.co/post_images/3X3A6964.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.workGrid ul li#A3 { 
background: url(https://clrty.co/post_images/Acoustic-Dreams_CLRTY-Agency_Engage-current_GMF.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.workGrid ul li#A4 { 
background: url(https://clrty.co/post_images/Tampa-Walls_ILLDES-17-Dave_Pullis-CLRT-AGENCY-Mergeculture-gallery_2.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.workGrid ul li#A5 { 
background: url(https://clrty.co/post_images/Tampa_Walls_CLRTY_NorisOne_Mavic_photo.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.workGrid ul li#A6 { 
background: url(https://clrty.co/post_images/Dave-Pullis-Photographer-Tampa-Walls_Ricky-Watts-6.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.workGrid ul li#A7 { 
background: url(https://clrty.co/post_images/CLRTY-Agency_illsol_Living-Room-Resturant_Wiregrass-Mall.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.workGrid ul li#A8 { 
background: url(https://clrty.co/post_images/Clrty-Agency_Jeks_Noris_Mural.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.workGrid ul li#A9 { 
background: url(https://clrty.co/post_images/CLRTY-Agency_illsol_Remote_office_Tampa.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.workGrid ul li#A10 { 
background: url(https://clrty.co/post_images/Queen-Andrea-One-We_love_downtown-mergeculture-gallery-clrty-agency-tampa-walls.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.workGrid ul {padding: 0!important; margin: 0!important; text-align: center;}
.workGrid ul li {background: #333; padding:0; margin: 0; float: left; list-style: none; display: block; width: 100%; height: 30vh; border: 1px solid #fff; -moz-appearance: box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  text-align: center;
  filter: sepia(100%) hue-rotate(205deg);
  transition: background-image 0.3s, opacity 0.4;
  backdrop-filter: opacity(0.4);
} /* width: 25%; height: 25vh; */
.workGrid ul li:hover {
  filter: none;
  animation: color-change 0.5s;
  transition: background-image 0.3s, opacity 1;
  backdrop-filter: opacity(1);
}
.workGridimages ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.workGridimages li {
  flex: 1;
  margin: 10px; /* Adjust spacing between items as needed */
  position: relative;
  overflow: hidden;
}

.workGridimages a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
}

.workGridimages img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.workGridimages li:hover img {
  transform: scale(1.05); /* Add a slight scale effect on hover if desired */
}
/* Work Page Specific Styles */

body.work .bottomContainer {padding-bottom: 4%;}

/* services page specific styles */
body.services .full-screen-video-container {
  height: 40vh;
  width: 100vw;
}
body.services .full-screen-video-container h1 {margin: 0!important; padding: 0!important;}



.workGridimages span.title {width: 100%; text-align: center; display: block; position: absolute; top: 10px; z-index: 3; background: #333; opacity: 0; font-size: 0.9em; padding: 1% 0;}
.workGridimages a:hover span.title {opacity: 0.8; transition: 0.4s;}

/* end work page specific Styles

@keyframes color-change {
  0% {
	filter: sepia(100%);
  }
  100% {
	filter: none;
  }
}
.workGrid a {
	display: none;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: #333;
text-shadow: 1px 1px 3px #000; /* Apply the drop shadow effect */
opacity: 0.8;
}
.workGrid a:hover {background: #917; opacity: 1; transition: 0.3s;}
.workGrid a.title {font-size: 1em; display: block; margin-top: 15px; color: #fff; background: #333; opacity: 0.7; text-decoration: none;}
.workGrid a.title:hover {opacity: 1; transition: 0.4s;}
  .workGrid em {position: relative; margin: 0 auto; text-align: center; display: block; padding: 10px; width: 80%; -moz-appearance: box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;}
  .workGrid em a {display: inline-block; position: relative; border-radius: 2px; margin: 1px; text-decoration: none; color: #fff; font-style: normal; font-size: 0.8em; border: 1px solid #d0d; padding: 2px 3px; white-space: nowrap; background: #917;}
  
 
 
  
  
  
  
  


/* two column details */ 

.detailContainer {
  display: flex;
}

.detailContainer .column {
  flex: 1;
  padding: 10px;
}

.detailContainer ul {
  list-style: none;
  padding: 0;
}

.detailContainer li {
  margin-bottom: 10px;
}
.prev-link, .next-link {font-family: museo-sans, sans-serif; z-index: 5;}
/* previous and next link styles */
.prev-link {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    transform: translateY(-50%);
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    text-decoration: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Style for the next link */
.next-link {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    text-decoration: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.footer {
	flex-shrink: 0;
  }
.footer p {padding-left: 4%; color: #333; font-family: museo-sans, sans-serif;}
.footer p a {color: #2b93c1;}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 55em) {
  .full-screen-video-content h1 {
	font-size: 3.3em;
  }
  .full-screen-video-content p {font-size: 1.3em;}
  .workGrid ul li {width: 25%; height: 25vh;}

.mids {width: 60%; margin: 50px auto;}
  
  /* Style for the prev and next link */
  .prev-link, .next-link {
      bottom: 50%;
  }
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
	background: #fff !important;
	color: #000 !important;
	/* Black prints faster */
	box-shadow: none !important;
	text-shadow: none !important;
  }

  a,
  a:visited {
	text-decoration: underline;
  }

  a[href]::after {
	content: " (" attr(href) ")";
  }

  abbr[title]::after {
	content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
	content: "";
  }

  pre {
	white-space: pre-wrap !important;
  }

  pre,
  blockquote {
	border: 1px solid #999;
	page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
	display: table-header-group;
  }

  tr,
  img {
	page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
	orphans: 3;
	widows: 3;
  }

  h2,
  h3 {
	page-break-after: avoid;
  }
}