@charset "UTF-8";


.fix-12-12_new {
  max-width: 1400px;
/*  padding-bottom: 3%;
    border: 3px red solid;*/
}

.fix-12-12_new2 {
  max-width: 200px;
  padding-bottom: 5%;
  border: 3px red solid;
}



.bgContain {
  background-size: contain;
}

.bgImage {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	height: 90%;
	background-position: center center;
	  background-size: contain;
  -webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background-repeat: no-repeat;
}


/*Hover styles for Location Icon*/
.locatIcon {

/*  border: 1px solid #0f0;*/
	vertical-align: middle;
/*	background-color: #64C;*/
	opacity: 0.4;
    transition: opacity 3s;


}
.locatIcon:hover  {
	
	opacity: 0.9;
       transition: opacity 3s;
	
}

    
.locatIcon:hover + .url {
	opacity: 0.9;

	
}

.url {
	opacity: 0;
    transition: opacity 3s;
/*	transition-timing-function: ease-in-out;*/
  	font-size: 0.7em;
	letter-spacing: 0.3em;
	padding-left: 0.4em;
	display: inline-block;
	color: white;
	/*background-color: #6CC;
	border: 1px solid #FCF;*/
	text-align: left;
	vertical-align: middle;


}


/*Hover styles for image on display*/

.imgInfo:  {	

	opacity: 1;
}

.imgInfo:hover  {
	
	opacity: 1;
    transition: opacity 3s;
	
}

    
.imgInfo:hover + .titlePainting {
	opacity: 0.5;


}

.titlePainting {
	opacity: 0;
    transition: opacity 3s;
/*	transition-timing-function: ease-in-out;*/
  	font-size: 0.6em;
	letter-spacing: 0.3em;
	/*display: inline-block;*/
	color: white;
/*	background-color: #6CC;*/
	text-align: center;
/*	border: 1px solid #FCF;*/
	vertical-align: middle;
	padding: 0.2em;


}
    
	
	/*Hover styles for Full Screen Icon*/

.toggleFull  {	

	opacity: 0.4;
    transition: opacity 3s;

}

.toggleFull:hover  {
	
	opacity: 1;
    transition: opacity 1s;
	transition-timing-function: ease-in-out;
	
}

    
/*

If I'm going to use this then the margin needs to be set negatively to push it to the left into view

.toggleFull:hover + .viewFull {
	opacity: 0.5;


}

.viewFull {
	opacity: 0;
    transition: opacity 3s;
	transition-timing-function: ease-in-out;
  	font-size: 1em;
	letter-spacing: 0.3em;
	color: white;
	background-color: #6CC;
	text-align: right;
	border: 1px solid #F00;
	vertical-align: middle;

	margin-left: -200px;
			display: inline-block;


}*/



.copy:hover + .hideCopy {
  display: inline-block;
  color: white;
  position: relative;
 /* border: 1px solid #F33;*/
  text-align: left;


}

.hideCopy {
 display: none;
    position: relative;
/*   	left: 200px;*/
  	font-size: 0.5em;
	letter-spacing: 0.3em;
	padding-left: 0.5em;
 opacity: 0.4;
}


.mailto:hover + .hidemailto {
  display: inline-block;
  color: white;
  position: relative;
  border: 1px solid #F33;
  text-align: left;
  opacity: 0.5;

}

.hidemailto {
 display: none;
    position: relative;
   	right: 200px;
  	font-size: 0.5em;
	letter-spacing: 0.3em;
	padding-left: 0.5em;

}

/*center div inside another div - FLEX */

.parent {

background: #CCCCCC;
display: flex;
align-items: center;
justify-content: center;
}


.child {
background-color: #F00;
align-items: center;
justify-content: center;
height: 100%;

}




/*.....................................Homelink from 2018 begins here*/

.homelink {
	font-size: 1em;
	line-height: 1em;
/*	background-image: url(../assets/svg/mylocation_icon_white.svg);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
		height: 24;
	width: 24;*/
	font-family:calibri, Arial, sans-serif;
	padding-left: 2px;
	padding-top: 2px;
	padding-bottom: 2px;

}

.homelink a {
	text-decoration: none;
	opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	letter-spacing: 0.3em;
/*  -o-transition:opacity .3s ease-out, background 2s ease-in;
  -ms-transition:opacity .3s ease-out, background 2s ease-in;
  -moz-transition:opacity .3s ease-out, background 2s ease-in;
  -webkit-transition:opacity .3s ease-out, background 2s ease-in;
  /* ...and now for the proper property */
  transition:opacity .3s ease-out, background 2s ease-in;*/
	color: #FBFADB;
	color: #FFEBDE;
}

.homelink a:hover {

	color: #FFEBDE;
	text-decoration: none;
	opacity: 1;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}

.relativePos {
	position: relative;
	
}

.borderRed {
	border: thin solid #F00;

}

.borderGreen {
	border: thin solid #0F0;
}



.borderBlue {
	border: thin solid #00F;
}

.borderPink {
	border: 3px solid #F39;

}

.borderYellow {
	border: 1px solid #F39;

}
.borderWhite {
	border: 10px solid #Fff;

}

.backgroundCustom {
  border: 0;
  position: absolute;
  top: 0;
  left: 0;

}

.bgHyperspace {

background-color: #020109;
}

.bgMootleMotif {

background-color: #fff;
}

.maxHeight {


    max-height: 730px;

}
.maxWidth {

	max-width: 300px;
	


}

.myFooter {
	
	text-align: center;
	opacity: 0.2;
	padding-top: 2px;
	padding-right: 4px;
	padding-bottom: 2px;
	padding-left: 4px;
	 font-size: 10px;
}


.bgGray {
	background-color: #666;
}

.bgWhite {
	background-color: #fff;
}

.shortDivFull {

	height: 100px;
}

.bgPosition {
	background-position: 50% 50%;

	
}


/*material icon sizes*/

.iconLargest {
  font-size: 27px;
  letter-spacing: -0.02em;
}


/*So this is a direct copy of css from the slides.css but I removed all the padding calculations and I can now make a full width responsive Div for using full width short divs within the slides - just not sure how it affecrs the rest of  the .wrap classes for the restof the site  ???

.container .wrap:not(.noSpaces), 
.container .wrap.spaceWrap,
.container .wrap .spaceWrap {
  padding: 0px;
}
*/


.topAlign {
	
	vertical-align: top;
	
}

/*.shadow { 
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #f00;
  -webkit-box-shadow: -5px -5px 5px #f00;
  box-shadow: -5px -5px 5px #f00; 
}*/


/*Applying this class to the top and bottom panel does nothing because there is NO margin on these*/

.noMargin {
	margin: 0px;
	
}

/*Applying this class to the top and bottom panel removes the pre defined padding*/

.noPadding {
	
	padding: 0px;
}

p.largeTestimonial, .p.largeTestimonial {
  font-size: 19px;
  letter-spacing: -0.011em;
}

.blackText {
	
	color: #000;
}

/*STill not sure how this works but it's based on the Youtube video tutorial on teh class="scale" at the end..it says the padding value is what controls th scaling??? */
.svg-5 {
	
	padding-bottom: 28%;
	margin-bottom: 2px;	
	margin-top: 2px;
}

.material-icons.md-32 {
  font-size: 32px;
}





h2.telephone  {
	background-repeat: no-repeat;
	background-position: left center;
	margin-top: 0px;
	background-image: url(../assets/svg/play-dark.svg);
}


.valign-center {
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
}