@charset "utf-8";


body {
    background-color: black;
	background-repeat: no-repeat;    
    background-position: 50% top; 
	margin:0;
	padding:0;
	
}



.homebg {background-image:url(../images/PageBgs/Home.jpg)}
.animationbg {background-image:url(../images/PageBgs/Animation.jpg)}
.visualisationbg {background-image:url(../images/PageBgs/Visualisation.jpg)}
.aboutbg {background-image:url(../images/PageBgs/About.jpg)}
.contactbg {background-image:url(../images/PageBgs/Contact.jpg)}
.bouncebotbg {background-image:url(../images/PageBgs/Bouncebot.jpg)}





.TopPlaceholderTable {
	width: 100%;
	padding-bottom: 56%;
	}

.linkAndInfoSection {
	width:100%;
}


	.LeftLinksAndBrand {
	margin-left: 0px;
	width: 370px;
	float:left;
	margin-bottom:60px;	
	text-indent: 0px;
	}



.LeftLinks {
	color: #DDDDDD;
	font-size: 25pt;
	font-family: 'Muli', sans-serif;
	font-weight: 300;
	letter-spacing: 2px;
	/*padding-right: 5px;*/
	/*height:50px;*/
	/*height:auto;*/
		
	
}

a.Brand:link { text-decoration: inherit; color: inherit}
a.Brand:visited {color:inherit}
a.Brand:hover { color: inherit}
a.Brand:active {color:inherit}

a.LeftLinks:link { text-decoration: inherit; color: inherit}
a.LeftLinks:visited {color:inherit}
a.LeftLinks:hover { color: white}
a.LeftLinks:active {color:white}


	
	.RightInfoBody br a:link,
	.RightInfoBody br a:visited,
	.RightInfoBody p a:link,
	.RightInfoBody p a:visited,
	.RecentInfoBody br a:link,
	.RecentInfoBody br a:visited,
	.RecentInfoBody p a:link,	
	.RecentInfoBody p a:visited {color:inherit; opacity:0.7}
	.RightInfoBody br a:hover,
	.RightInfoBody br a:active,	
	.RightInfoBody p a:hover,
	.RightInfoBody p a:active,
	.RecentInfoBody br a:hover,
	.RecentInfoBody br a:active,
	.RecentInfoBody p a:hover,
	.RecentInfoBody p a:active {color:inherit; opacity:1}
	.RightContactInfoBody p a:link,
	.RightContactInfoBody p a:visited {color:inherit; opacity:1; text-decoration:none}
	.RightContactInfoBody p a:hover,
	.RightContactInfoBody p a:active {color:inherit; opacity:1; text-decoration:underline}
	
	
	




	.RightInfoHeader {
	color: white;
	font-size: 22pt;
	font-family: 'Muli', sans-serif;
	font-weight: 300;
	letter-spacing: 2px;
	text-align: right;
	padding-top:17px;
	opacity: 0.65;
	text-shadow:1px 1px 4px black;
}

	.RightInfoBody {
	color: white;
	font-size: 14pt;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	/*text-align: justify;*/
	text-shadow:1px 1px 4px black;
}


	.RightContactInfoBody {
	color: white;
	font-size: 14pt;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	text-align: left;
	text-shadow:1px 1px 4px black;
	}

	.RecentInfoHeader {
	color: white;
	font-size: 20pt;
	font-family: 'Muli', sans-serif;
	font-weight: 300;
	letter-spacing: 2px;
	text-align: left;
	opacity: 0.65;
}
	.RecentInfoBody {
	color: white;
	font-size: 12pt;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	text-align: left;
}



 /* .col-lg-4 {
    width: 33.33333333%;
	float:left
  }*/

.MainRow {
	margin-right: 0px;
	margin-left: 0px;
	margin-top:0px;
	overflow-x:hidden

}


	.EmptyRow {
	margin-right: auto;
	margin-left: auto;
	height:20px;
	width: 100%;
	}
	.EmptyTable {
	width:100%;
	}

	.RecentWorkContainer {
	margin-right: 0px;
	margin-left: 0px;
	margin-top:80px;
	margin-bottom:0px;
	color: white;
	width: 100%;
	float:left;
	overflow-x:hidden
	}
	
	.RecentRow {
	margin-right: 0px;
	margin-left: 0px;

	}
	
	/*.RecentVidTable {
	width:500px;
	}*/





/*.pull-right {
  float: right !important;
}*/


	
	
	
	.RightInfo {
	margin-bottom:60px	
	}
	

	.footer {
	margin-right: auto;
	margin-left: auto;
	margin-top: 90px;
	margin-bottom: 00px;
	color: #878787;
	padding-top: 00px;	
	padding-bottom: 90px;
	
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
	line-height: 50px;
	}
	a.footer:link,
	a.footer:visited {color:inherit}
	a.footer:hover,
	a.footer:active {color:white; text-decoration:underline}
	

	
	
	.RecentRightVidAspectRatio {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56%;
		/*background-image:url(../images/RecentVideoPlaceholder.jpg);
		background-repeat: no-repeat;    
    	background-position: 50% 50%; */
	}	
	.recentVideoIframe {
 	position: absolute;
  	width: 100%;
  	height: 100%;
  	left: 0; top: 0;
	}
	
	
	
	.topVideoContainer {
	width: 100%;
	height: 100%;
	position:relative;
	/*overflow:hidden*/
	}	
	.topVidAspectRatio {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56%;
	}	
	
	
	
	.start-video .tooltiptext {
    
    
	bottom:103%;
	left: 50%;
	background-color: transparent;
    color: white;
	font-size: 12pt;
	font-family: 'Muli', sans-serif;
	font-weight: 300;
	text-align: justify;
	opacity: 0;
	transition: opacity 1s;
    text-align: center;
    padding: 5px 0;
    border-radius: 4px;
	position: absolute;
    z-index: 1;
	border-style:solid;
	border-width:thin
	}
	.tipreelhome {width: 100px;margin-left: -50px;}
	.tipreelvisualisation {width: 190px;margin-left: -95px;}
	.tipreelanimation {width: 170px;margin-left: -85px;}
	.start-video .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: white transparent transparent transparent;
	}
	.start-video:hover .tooltiptext {
    opacity:0.7
	}
	


	.facebookicon {
	margin-right:8px;
	}
	.twittericon {
	margin-bottom: -10px;
	margin-left:-6px;
	margin-right:3px
	}
	
	
	

/*slickslider*/
   .slider {
        width: 80%;
        margin: 10px 10%;
    }

    .slick-slide {
      margin: 0px 10px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      /*color: magenta;*/
    }







	

/*MAIN, bigger than 1000*/
@media (min-width: 1000px){
	body {
	/*background-size:initial;*/
	background-size:2500px 1000px;
	}

}

/*Bigger than mobile*/
@media (min-width: 414px){
	
	
	.LeftLinksCell {
	background-color:black;
	display: inline-block;
	padding-right: 20px;
	padding-left:20px;
	padding-top: 5px;
	padding-bottom: 5px;
	/*margin-left: -30px;*/
		
	
	}
	
	
	
	
	.LeftLinkSpacerCell {
	/*height:13px;*/
	height:0px;
	}
	
	
	.Brand {
	color: white;
	display: inline-block;
	font-size: 35pt;
	font-family: 'Muli', sans-serif;
	font-weight: 600;
	letter-spacing: 3px;
	padding-bottom:2px;
	padding-top:2px;
	padding-right: 10px;
	padding-left:10px;
	}
	
	/*.BrandCell {
	background-color:#2A2A2A;	
	}*/
	
	
	.homebg .BrandCell {background-color:#BC3015;}
	.animationbg .BrandCell {background-color:#3A96AA;}
	.visualisationbg .BrandCell {background-color:#E76742;}
	.aboutbg .BrandCell {background-color:#F2C2B8;}
	.contactbg .BrandCell {background-color:#06587A;}
	.bouncebotbg .BrandCell {background-color:#fdb72e;}
	
	
	
	
}


/*MOBILE and smaller*/
@media (max-width: 414px){
	.LeftLinks {
	color: black;
	}
	
	.LeftLinksCell {
	background-color:white;
	display: inline-block;
	padding-right: 20px;
	padding-left:20px;
	padding-top: 4px;
	padding-bottom: 4px;
	/*margin-left: -30px;*/
	}

	
	.RightInfoTable {
	width: 100%;
	table-layout:fixed;
	}
	
	.col-lg-4 {
    width: 33.33333333%;
	float: none
	}
  
  
  	.contentContainer {
	width:100%;
	}

	.headerBrand {
	visibility: visible;
	}
	

	
	.LeftLinkSpacerCell {
	height:2px;
	}



a.LeftLinks:link { text-decoration: inherit; color: inherit;}
a.LeftLinks:visited {color:inherit}
a.LeftLinks:hover { color: #515151}
a.LeftLinks:active {color: #515151}



	.Brand {
	color: white;
	display: inline-block;
	font-size: 35pt;
	font-family: 'Muli', sans-serif;
	font-weight: 600;
	letter-spacing: 3px;
	padding-bottom:2px;
	padding-top:2px;
	padding-right: 10px;
	padding-left:10px;
	}

	/*.BrandCell {
	background-color:rgba(10,10,10,0.6);
	}*/
	
	/*fix for fifefox mobile-have to keep them seperate now*/
	.homebg .BrandCell {background-color:rgba(10,10,10,0.6);}
	.animationbg .BrandCell {background-color:rgba(10,10,10,0.6);}
	.visualisationbg .BrandCell {background-color:rgba(10,10,10,0.6);}
	.aboutbg .BrandCell {background-color:rgba(10,10,10,0.6);}
	.contactbg .BrandCell {background-color:rgba(10,10,10,0.6);}
	.bouncebotbg .BrandCell {background-color:rgba(10,10,10,0.6);}
	

}

/*Bigger than 950*/
@media (min-width: 950px){
	
	.RightInfo {
	width: 500;
	float:left;
	float: right !important;
	margin-right: 20px;
	}
	


	.RightInfoTable {
	width: 500px;
	table-layout:fixed;
	
	}
	
	.RightContactInfoTable {
	width: 400px;
	table-layout:fixed;
	
	}
	
	.RightSloganTable {
	
	/*height: 302px;*/
	height: 265px;
	
	}
	
	.RightInfoHeader {
	text-align: right;
	}

	
	.RightInfoBody {
	text-align: justify;
	}
	
	
	.contentContainer {
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	}
	


	

	
	.footerColumn {		
	width:33.333%;
	float:left;
	}
	.footer {
	width: 500px;
	font-size: 10pt;
	}
	
	
	
	.RecentLeftColumn {
	width:370px;
	float:left;
	margin-left:0px;
	}
	
	.RecentGalleryColumn {
	width:800px;
	float:left;
	margin-left:0px;
	}
	
	
	
	
	.RecentLeftTable {	
	width:100%;
	padding-right: 0px;
	padding-left:20px;	
	}
		
	.RecentRightColumn {
	width: 500px;
	float:right;
	margin-right:20px;
	margin-left:20px;
	}
	
	.RecentGalleryRightColumn {
	width: 100%;
	float:left;
	margin-right:20px;
	margin-left:20px;
	padding-right:60px;
	}

	
	/*skype stuff*/
	.skypelinks {
	margin-left: 10px;
	margin-right: 0px;
	
	}
	.skypeicon {
	margin-right:4px;
	margin-bottom:-6px;
	
	}
	.skypep {
	display:inline}
	
}

/*In between mobile and 1000*/
@media (min-width: 415px) and (max-width: 1000px){
	
	.contentContainer {
	width:100%;

	}
	

	
	
	
}



/*Smaller than 1000*/
@media (min-width: 0px) and (max-width: 1000px){
	body {
	background-size: 250%;
	}
	



	
}

/*smaller than 949 where the right info and left links nearly come together*/
@media (max-width: 949px){

	
	.LeftLinksAndBrand {
	float: none;
	}
	

	.RightInfoHeader {
	text-align: left;
	}
	
	.RightInfoBody {
	text-align: left;
	}


	.footerColumn {		
	width:100%;
	float:left;
	}
	.footer {
	width: 100%;
	font-size: 10pt;
	}




	
	.RecentLeftTable {	
	width:100%;
	padding-right: 30px;
	padding-left: 20px;	
	}


	/*skype stuff*/
	.skypelinks {
	margin-left: 0px;
	margin-right: 10px;
	}
	.skypeicon {
	margin-right:4px;
	}
	.skypep {
	display:block}
	
}


/*In between 360 and 949 for recent left column*/
@media (min-width: 360px) and (max-width: 949px) {
	.RecentLeftColumn {
	width:370px;
	float:none;
	margin-left:0px;
	
	}
}
/*less than 359 for recent left column*/
@media (max-width: 359px) {
	.RecentLeftColumn {
	width:100%;
	float:none;
	margin-left:0px;
	

	}
}

/*In between 560 and 949*/
@media (min-width: 560px) and (max-width: 949px){
	
	.RightInfo {
	width: 500px;
	float: none;
	margin-left: 20px;
		
	}
	
	.RightInfoTable, RightContactInfoTable {
	width: 100%;
	padding-right:30px;
	}

	
}
/*In between 520 and 949*/
@media (min-width: 520px) and (max-width: 949px){
	

	
	.RecentRightColumn {
	width: 500px;
	float:none;
	margin-right:20px;
	margin-left:20px;
	}	

}

/*less than 559*/
@media (max-width: 559px){
	
	
	.RightInfo {
	width: 85%;
	float: none;
	margin-left: 20px;
	
	
	}
	.RightInfoTable, RightContactInfoTable {
	width: 100%;
	padding-right:25px;
	}
	
	
}

/*less than 520 for recent right vid*/
@media (max-width: 520px){
	.RecentRightColumn {
	width: 100%x;
	float:none;

	}	
}


	
	
	/*bigger than 1040 for oversize container...also its not actually oversize anymore*/
	@media (min-width: 1000px){
	.oversizeContainer {
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	
	}
	
	}
	
	/*smaller than 1040 for oversize container*/
	@media (max-width: 1000px){
		
	.oversizeContainer {
	width:100%;
	
	
	}
	
	}