@charset "UTF-8";
/* CSS Document */

/* custom colours defined here */
:root {
    --bg1: #eee;
    --bg2: #ddd;
    --mblue: #4f9dff; /* massive blue suitable for logo or background */
    --mblue2: #2f7df8; /* massive blue suitable for text*/
    --blue: #2020e0; /* debug colour */
}

.body, html {
	height: 100%;
}

body,td,th {
	font-family: 'Roboto', sans-serif;
	/*font-size: 0.85em;*/
    font-size: 1.1em;
    font-weight: 300;
	color: #000;
}

img {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: 0;
}

a {
    color: #000;  /* link text colour */
}

/*
a:hover {
    color: #f0f; 
}
*/

/* home button */

.mouseover {
	padding: 0px;
	margin: 0px;
	text-decoration: none;
}
.mouseover img:last-child {
  display: none;
}
.mouseover:hover img:first-child {
  display: none;
}
.mouseover:hover img:last-child {
  display: inline-block;
	margin-bottom: -3px;
}

/* end of home button */


.banner {
    position: relative;
    text-align: right;
	background-color: #000;
    left: 0px;
}

.banner_logo {
    position: absolute;
    top: 2%;
    left: 0px;
}

/*
.banner_video {
    position: relative;
    overflow: hidden;
    text-align: center;
    background-color: #000;
}
*/

/* only used for the tag line in the landing page banner */
.banner_text {
    position: absolute;
    top: 40%;
    left: 120px;
    /*transform: translate(0%, 100%);*/
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 1.4em;
    color: #eee;
}

/* these switch visibility based on screen resolution */
.desktop { display: block; }
.mobile { display: none; }

/* used for the page titles */
.header_text {
    position: absolute;
    top: 0%;
    left: 120px;
    transform: translate(0%, 100%);
    font-family: 'Roboto', sans-serif;
    font-size: 3em;
    font-weight: 400;
    color: #fff;
}

.main {
	margin: 0px auto;
	position: relative;
	background-color: var(--bg1);
	font-family: 'Roboto';
	font-size: 1em;
	letter-spacing: 0px;
}

/* class for inline images, like the arrow icon in gallery.html */
img.inline {
    display: inline;
    padding: 5px;
    vertical-align: middle;
}

.arrow_overlay {
    position: absolute;
    /*top: 0;*/
    /*left: 0;*/
    /*bottom: 0;*/
    justify-self: right;
    /*justify-self: end;*/
    z-index: 1;
}

/* hover transition effect for box_hover */
.arrow_overlay:hover > img, .arrow_overlay:focus > img, .arrow_overlay:active > img {
/*.box:hover > img, .box:focus > img, .box:active > img {*/
    /*transform: translateY(-4px);*/
    /*transform: translate(3px, -3px);*/
    filter: brightness(108%);
}


/* massive blue class suitable for logo or background */
.blue {
    color: var(--mblue);
}

/* massive blue class suitable for text */
.blue2 {
    color: var(--mblue2);
}

/* similar to h3 but italic and blue */
.question {
    color: var(--mblue2);
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.4em;    
    font-style: italic;
}

/* used for copyright text under images */
.copyright {
    color: #888;
    font-size: 0.7em;
    padding: 0.5em 0em;
}


h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.9em;
}

h2 {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 1.6em;
}

h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.4em;
}

h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.1em;
}

/* responsive layout boxes */
.main {
	width: 1080px;
    padding: 4em;
}

.light_text {
    font-weight: 400;    
    color: #eee;
}


/* GENIUS VIDEO RESIZING :-) */
.video {
  position: relative;
  display: block;
  width: 100%; /* width of iframe wrapper */
  height: 0;
  margin: auto;
  padding: 0% 0% 56.25%; /* 16:9 ratio */
  overflow: hidden;
}
.video iframe {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}



/* div for the text in each landing page box */
.box_text {
    padding: 1.2em 0.5em;
}

/* used for the text in the boxes in the tv gallery */
.box_text_tv {
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    z-index: 1;
    font-size: 0.85em;
    color: #000; 
    background-color: #ddd; 
    width: 100%; 
    padding: 5px
}

/* div to go into boxes321 and boxes432 grids */
.box_hover {
	background-color: var(--bg1);
	transition-duration: 0.4s;
	transition-property: transform;
	transition-timing-function: ease-in-out;
}

/* hover transition effect for box_hover */
.box_hover:hover, .box_hover:focus, .box_hover:active {
/*.box:hover > img, .box:focus > img, .box:active > img {*/
	/*transform: translateY(-4px);*/
	/*transform: translate(3px, -3px);*/
	filter: brightness(108%);
}

/* div to go into grids */
.box {
    background-color: var(--bg1);
}

/* for grid within a grid */
.wrapper {
    display: grid;
    grid-template-rows: 1f;
}

/* responsive single column grid container for 'box' divs */
.boxes1 {
    display: grid;
    grid-template-columns: 1;
    grid-gap: 1em;
    grid-auto-rows: auto;
}

/* responsive 2/1 column grid container for 'box' divs */
.boxes21 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1em;
    grid-auto-rows: auto;
}

/* responsive 5/1 column grid container for footer divs */
.boxes51 {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 200px;
    grid-gap: 1em;
    grid-auto-rows: auto;
}

/* responsive 3/2/1 column grid container for 'box' divs */
.boxes321 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1em;
	grid-auto-rows: auto;
}

/* wrapper class for 2 boxes horizontally, used for poster_plus in galler.html */
.boxes2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0em;
    grid-auto-rows: auto;
}

/* auto layout boxes, used for gallery.html */

/*
.boxes_182px {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(182px, 1fr));

}
*/



/* poster class for gallery.html */

.poster {
    width: 134px;
    height: 198px;
    margin: 1em;
    /*margin: 0.5em 1em;*/
}



/* poster plus text classes for gallery */

.poster_wide_wrapper {
    grid-column: auto / span 3;
    height: 198px;
    /*width: 430px;*/
    margin: 1em;
}

.poster_wide_grid {
    display: grid;
    position: relative;
    grid-template-columns: 1fr 2.5fr;
    grid-gap: 0em;
    grid-auto-rows: auto;
    background-color: #d9d9d9;
}

.poster_wide_poster {
    height: 198px;
    margin: 0em;
}

.poster_tv_poster {
    width: 100%; 
    height: 100%; 
    object-fit: cover;"
}

.poster_wide_text {
    margin: 0.8em;
    font-size: 0.85em;
    background-color: #d9d9d9;
    /*background-color: #fff;*/
}

.poster_click {
    width: 100px;
    height: 32px;
    padding: 5px 10px;
    text-align: center;
    vertical-align: bottom;    
    color: #eee;
    background: #4f9dff;
    position: absolute;
    right: 0px;
    bottom: 0px
}

.poster_click:hover, .poster_click:focus, poster_click.active {
    filter: brightness(108%);
}



/* div for a click here button */
.click_here {
    width: 150px;
    height: 30px;
    padding: 6px 16px;
    text-align: center;
    vertical-align: bottom;    
    color: #eee;
    background: #4f9dff;
}

.click_here:hover, .click_here:focus, click_here.active {
    filter: brightness(108%);
}

/* auto layout boxes, used for small posters in gallery.html */
.boxes_134px {
    display: grid;
    grid-gap: 1em;
    grid-auto-flow: dense;
    grid-template-columns: repeat(auto-fill, minmax(134px, 1fr));
    /*grid-template-columns: repeat(auto-fill, 150px);*/
}

@media screen and (max-width: 1079px){
	.main {
		width: 100%;
        padding: 3em;
	}
	.boxes321 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 1em;
		grid-auto-rows: auto;
	}
    .banner_text {
        left: 11%;
        font-size: 1.4em;
    }
    .header_text {
        top: 0%;
        left: 11%;
        font-size: 3em;
    }
}

/* portrait tablets, iPad */
@media screen and (max-width: 600px){
	.main {
		width: 100%;
        padding: 1em;
	}
    .banner_text {
        left: 11%;
        font-size: 0.99em;
    }
    .header_text {
        top: -5%;
        left: 11%;
        font-size: 2em;
    }
    .boxes21 {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 0.5em;
        grid-auto-rows: auto;
    }
    .boxes51 {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 0.5em;
        grid-auto-rows: auto;
    }
	.boxes321 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 1em;
		grid-auto-rows: auto;
	}	
}

/* Android phones, landscape iPhone */
@media screen and (max-width: 500px){
	.main {
		width: 100%;
	}
    .banner_text {
        left: 11%;
        font-size: 0.84em;
    }
    .desktop { display: none; }
    .mobile { display: block; }
    .header_text {
        top: -20%;
        left: 11%;
        font-size: 2em;
    }
    .boxes21 {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 1em;
        grid-auto-rows: auto;
    }
	.boxes321 {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 1em;
		grid-auto-rows: auto;
	}
}

.boxes321 > div{
	background: var(--bg1);
	/*color: #44f;*/
	padding: 0em;
}

/* responsive 4/3/2 column grid container for 'box' divs */
.boxes432 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1em;
	grid-auto-rows: auto;
}

@media screen and (max-width: 700px){
	.boxes432 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 1em;
		grid-auto-rows: auto;
	}
}

@media screen and (max-width: 500px){
	.boxes432 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 1em;
		grid-auto-rows: auto;
	}
}

.boxes432 > div{
	background: var(--bg1);
	padding: 0em;
}

/* contact form */
#contact {
    position: relative;
    float: left;
    border: thin solid #CCCCCC;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /*behavior: url(border_radius.htc);*/
    width: 435px;
    top: 0px;
    left: 25px;
    padding: 15px;
    margin-top: 15px;
    margin-bottom: 25px;
    z-index: 2;
    left: 10px;
    height: auto;
}


.footer {
	/*
	position: relative;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 8em;
	background-color: #000;
	*/
    width: 100%;
	position: relative;
	bottom: 0;
	margin: 0px auto;
	background-color: #000;
	padding: 1em;
}


/* image sequence fades */

.fadein2 {
    position: relative;
    margin-bottom: calc(44% - 10px); /* this 40% calculation depends on image aspect ratio */
}

.fadein2 img {
    position: absolute;
    /*top: 0px;*/
    -webkit-animation-name: fade_anim_2;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: fade_anim_2;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}

.fadein2 {
    position: relative;
    margin-bottom: calc(44% - 10px); /* this 40% calculation depends on image aspect ratio */
}

.fadein3 img {
    position: absolute;
    /*top: 0px;*/
    -webkit-animation-name: fade_anim_3;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 9s;
    animation-name: fade_anim_3;
    animation-iteration-count: infinite;
    animation-duration: 9s;
}

.fadein3 {
    position: relative;
    margin-bottom: calc(44% - 10px); /* this 40% calculation depends on image aspect ratio */
}

.fadein4 img {
    position: absolute;
    /*top: 0px;*/
    -webkit-animation-name: fade_anim_4;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 12s;
    animation-name: fade_anim_4;
    animation-iteration-count: infinite;
    animation-duration: 12s;
}

.fadein4 {
    position: relative;
    margin-bottom: calc(44% - 10px); /* this 40% calculation depends on image aspect ratio */
}

@-webkit-keyframes fade_anim_2 {
    0% {opacity: 0;}
    20% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes fade_anim_2 {
    0% {opacity: 0;}
    20% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: 0;}
    100% {opacity: 0;}
}

@-webkit-keyframes fade_anim_3 {
    0% {opacity: 0;}
    10% {opacity: 1;}
    40% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes fade_anim_3 {
    0% {opacity: 0;}
    10% {opacity: 1;}
    40% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}

@-webkit-keyframes fade_anim_4 {
    0% {opacity: 0;}
    10% {opacity: 1;}
    30% {opacity: 1;}
    40% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes fade_anim_4 {
    0% {opacity: 0;}
    10% {opacity: 1;}
    30% {opacity: 1;}
    40% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 {
    background-color: lightblue;
}

#f2 {
    -webkit-animation-delay: -9s;
}

#f3 {
    -webkit-animation-delay: -6s;
}

#f4 {
    -webkit-animation-delay: -3s;
}

/* end of image sequence fades */