@charset "UTF-8";

@font-face {
	font-family: "futura-pt";
	src:
	local("Futura"), local("Futura-PT"),
	url(fonts/futura-pt-bold.woff) format('woff');
}


body {
cursor: url(mini-crosshairs_black.png) 15 15, default;
margin : 40px auto;
max-width : 650px;
line-height : 1.4;
font-size : 18px;
font-family: "League Spartan", sans-serif;
font-style: normal;
font-optical-sizing: auto;
font-weight: 300;
color : #222;
padding : 0 10px;
}


/*
.video{width: 100%; padding : 0px 0px; margin: 0px;}
video{width: 100%; padding : 0px 0px; margin: 0px;} */

h1, h2, h3 {
line-height : 1.2;
	font-weight: 500;
	padding-top: 22px;
}

@media only screen and (max-width: 650px) {

h1 {
	font-size: 30px}
}

h3 {
	margin-left: 10px
}

p.small {
	font-size : 9px;
	line-height : auto;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 1), 1px 1px 6px rgba(0, 0, 0, 1), 1px 1px 7px rgba(0, 0, 0, .9), 1px 1px 8px rgba(0, 0, 0, .8), 1px 1px 9px rgba(0, 0, 0, .7), 1px 1px 10px rgba(0, 0, 0, .6);
}

.uppercase{
	text-transform: uppercase;
}

div.intro{
	margin-top: 10%;
	margin-bottom: 30%;

 -webkit-animation: fadein 2.5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2.5s; /* Firefox < 16 */
        -ms-animation: fadein 2.5s; /* Internet Explorer */
         -o-animation: fadein 2.5s; /* Opera < 12.1 */
            animation: fadein 2.5s;
}

img.logo {
display: block;
margin-left: 70%;
z-index: 5;
}

div.video {
position: relative;
margin-top:-40px;
z-index: -1;
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 800px; /* Adjust as needed */
  height: 14em; /* Ensure this matches the expected video height */
  overflow: hidden; /* Prevent layout shifts */
}

.skeleton-loader {
  width: 100%;
  height: 100%; /* Fill the container */
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

#banner-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video fills the space without distorting */
  display: none; /* Hide until loaded */
}


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }

}}


::selection {
  background: #c0e6f7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #c0e6f7; /* Gecko Browsers */
}

/* unvisited link */
a:link {

cursor: url(mini-crosshairs_red.png) 15 15, pointer;

    text-decoration: none;
    color: #222;
    box-shadow: inset 0 -4px 0 #c0e6f7;

	-o-transition:.2s;
  -ms-transition:.2s;
  -moz-transition:.2s;
  -webkit-transition:.2s;
  /* ...and now for the proper property */
  transition:.2s;
}

/* visited link */
a:visited {
    text-decoration: none;
    color: #666;
    box-shadow: inset 0 -6px 0 #c0e6f7;
}

/* mouse over link */
a:hover {
    text-decoration: none;
    color: #444;
    box-shadow: inset 0 -20px 0 #c0e6f7;

	  -o-transition:.2s;
  -ms-transition:.2s;
  -moz-transition:.2s;
  -webkit-transition:.2s;
  /* ...and now for the proper property */
  transition:.2s;
}

img.full {
	max-width: 75%;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

/* selected link */
a:active {
    text-decoration: none;
    color: #444;
    box-shadow: inset 0 -4px 0 #c0e6f7;
}

a.license:link {

    text-decoration:none;
	box-shadow: none

}

a.thumb:link {

    text-decoration:none;
	box-shadow: none

}



/* Case Study CSS */
.case-study {
  max-width: 800px;
/*  border-bottom: 1px solid #ccc; */
}

.case-study-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 16px;
}

.case-study-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  margin-bottom: 16px;
}

.case-study-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.case-study-description {
  font-size: 16px;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.5;
}

.case-study-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.case-study-meta {
  font-size: 14px;
  color: #333;
	margin-bottom: 32px;
}

.case-study-meta strong {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
}

.case-study-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.case-study-images img {
  width: 100%;
  height: auto;
	border-radius: 6px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.case-study-image img {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
}


/* End Case Study CSS */


/* gallery 2 */

.wrap {
	height: auto;
    margin: 10px;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
	margin-bottom: auto;
	padding-bottom: 10px;

}
.box {
    float: left;
    position: relative;
    width: 25%;
    padding-bottom: 25%;
}

.boxInner {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    overflow: hidden;
}
 .boxInner img { width: 100%}

@media only screen and (max-width:650px) and (min-width:481px) {
    /* Tablet view: 2 tiles */
    .box {
        width: 25%;
        padding-bottom: 25%;
    }
}

@media only screen and (max-width:650px) {
	/* Small Screen View: Less Gutter */

.nomobile {
display: none;
}

.case-study-info {
display: none;
}

	.boxInner {
    position: absolute;
    left: 2px;
    right: 2px;
    top: 2px;
    bottom: 2px;
    overflow: hidden;
}
}

.center {
	text-align: center;
	font-size: 16px;
}


.about {
  max-width: 75%;
}

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

.store {
	position: relative;
    overflow-y: scroll;
	box-shadow: inset 0px 0px 100px rgba(0,0,0,.2);
}
.footer-text {
font-size : 10px;
line-height : auto;
text-decoration: none!important;
box-shadow: none!important;
}

.footer-text visited {
	color: #222
}

/* Test */
.post-content {
    bottom:0px;
    left:5%;
    position: absolute;
	color: aliceblue;
	opacity: 0;
	 transition: .3s;
	overflow: hidden;
}

.post-content:hover {
  opacity: 1;
}

.thumbnail{
    position:relative;

}

@media only screen and (max-width:480px){
	.post-content: {
		display: none!important;
	}
	.post-content:hover {
		display: none!important;
	}
	.no {
		display:none!important;
	}
}

@import "compass/css3";

.collapse{
  margin-bottom: 20px;
  .collapse__head{
    position: relative;
    cursor: pointer;
    background: #e5e5e5;
    padding:5px 10px 5px 30px;
  &:after{
    content: "";
    position: absolute;
    left: 8px;
    top: 8px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #333;
}
    &.open{
       &:after{
         top:10px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #333;
       }
    }
  }
  .collapse__body{
    padding:10px;
  display:none;
    p{
    margin:0;}

  }
}