/* ==========================================================================
   Prag Sharma's custom styles
   ========================================================================== */

/* ------------------ GENERAL descriptions ---------------- */
@font-face { font-family: 'flama-ultraLight'; src: url('../fonts/FLAMA-ULTRALIGHT.OTF'); }
@font-face { font-family: 'flama-light'; src: url('../fonts/FLAMA-LIGHT.OTF'); }
@font-face { font-family: 'flama-basic'; src: url('../fonts/FLAMA-BASIC.OTF'); }
@font-face { font-family: 'sourceSansPro-regular'; src: url('../fonts/SourceSansPro-Regular.otf'); }

/* ------------------ Website all colour descriptions ---------------- */
.white{color:#FFFFFF;}
.offWhite {color:#f6f3f2;}
.offWhite-bg {background:#f6f3f2;} 
.offWhiteBlue{color:#4b6fcf;}
.offWhiteBlue-bg{background:#4b6fcf;}

.black{color:#000000;}

.orange{color:#FF8257;}
.orange-bg{background:#FF8257;}
.shadoworangeX{color:#E1514B;}
.shadowOrange { box-shadow: 2px 2px 0 0 #E1514B; }

.dark-blue{color:#0A4097;}
.dark-blue-bg{background:#0A4097;}
.shadowBlue { box-shadow: 2px 2px 0 0 rgba(0,0,0,.2); }

.divider-blue{color:#AEBDD9;}
.divider-blue-bg{background:#AEBDD9;}

.light-blue{color:#2057C1;}
.light-blue-bg{background:#2057C1;}

.brightSun-bg{background:#fed833;}
.turmeric-bg{background:#cccc51;}
.cucumber-bg{background:#8fb258;}

/* ---------------------------------- */
body { 
	font-size: 7px; /*was 14px*/
	font-family: 'sourceSansPro-regular';
  line-height: 1.42%; /*21px*/
  margin-left: 4.05%; /*56px*/
  margin-right: 4.05%; /*56px*/
  margin-top: 2.03%; /*21px*/
	padding: 0;
	text-align: left;
  background-color: #f6f3f2; /*offWhite*/
  line-height: 100%;
}

/* ------- Font Alignment CSS ---------- */
.headingFontH1 { 
  font-size: 2vw; /*34px*/
  font-family: 'flama-ultraLight';
  text-align:left;
  color: #f6f3f2; /*offWhite*/ 
  line-height: 100%;
  margin-top:16px;
}

.headingFontH2 { 
  font-size: 1.7vw; /*38px*/ 
  font-family: 'flama-ultraLight';
  text-align:left;
  color: #0A4097; /*dark-blue*/ 
  /*margin-bottom: 7%;*/
}

.headingFontH4 { 
  font-size: 0.9vw; /*18px*/
  font-family: 'flama-basic';
  text-align:left;
  color: #0A4097; /*dark-blue*/ 
}

.txtDivIDRight, .txtDivIDLeft, .txtDivIDLeftVR {
  float: right;
  display: table-cell; 
  padding: 3.63% 3.63% 3.63% 3.63% ; /* 40px/1102px = 3.63% */
  height: 11.46vw; /*22.9vw*/
}

.txtDivIDLeft  {
  float: left;
  max-width: 100%;
  padding: 3.63% 3.63% 3.63% 7% ; /* 40px/1102px = 3.63% */
}

.txtDivIDLeftVR  {
  float: left;
  max-width: 100%;
  padding: 3.63% 3.63% 3.63% 7% ; /* 40px/1102px = 3.63% */
  width: 100%;  /*31.3vw*/
  height: 5.76vw; /*22.9vw*/
}

.tableTxtMiddle {
  position: relative;              
  margin-top: 2vw;                         
}

.techFormat {
  font-size: 0.7vw; /*14px*/
  font-family: 'flama-ultraLight'; 
  margin-top: 0.5vw;
}

/* ------- Margins (spaces) between the tables (overall layout) ---------- */
/* according to the W3C standards, margins defined using percentages should be calculated 
with respect to the width of the containing block. However, Safari calculates using height. Hence 
not using % but using vw */
.bottomMarg { margin-bottom: 0.7vw; }/*0.8% 30px padding*/
.leftMarg { margin-left: 0.7vw; } /*0.8% 30px padding*/
.rightMarg { margin-right: 0.7vw; } /*0.8% 30px padding*/

/* --------- Converts an image to greyscale --------- */
.desaturate {  
  -webkit-filter: grayscale(0.75); 
  -webkit-filter: grayscale(75%);
  -moz-filter: grayscale(75%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.41 0.536 0.054 0 0, 0.16 0.786 0.054 0 0, 0.16 0.536 0.304 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: grayscale(1);
  /*filter: gray;*/ 
  /*filter: url('img/desaturate.svg#greyscale'); *//*SVG filter for other browsers*/
}

/* --------- Zoom functionality. Works with DIV as:
    "<div class="zoom"> Div content here </div>;" --------- */

.zoomOut { 
  -webkit-transition: all .3s ease-out; 
  -moz-transition: all .3s ease-out; 
  -o-transition: all .3s ease-out; 
  transition: all .3s ease-out;
  z-index:1;

  -moz-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
  -ms-transform: scale(1.05);
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
  M11=1.05, M12=-0, M21=0, M22=1.05);
}

.zoomIn { 
  -webkit-transition: all .3s ease-out; 
  -moz-transition: all .3s ease-out; 
  -o-transition: all .3s ease-out; 
  transition: all .3s ease-out;
/*
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -ms-transform: scale(1);
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
  M11=1, M12=-0, M21=0, M22=1);
  */
}


.more_info{
  background: url('../img/info.svg') no-repeat;
  background-size: contain;
  background-position: center;
  height: 0px;
  width: 0px;
  position: absolute;
  left: 50%;
  bottom: 0;
  opacity: 0;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: all .3s ease-out; 
  -moz-transition: all .3s ease-out; 
  -o-transition: all .3s ease-out; 
  transition: all .3s ease-out;
}

.tile:hover .more_info{
  opacity:0.9;
  width:100%;
  height:4vmax;
}
/* ------------------ Header Specific ---------------- */
/* Browser window width: 1390, Browser window height:  783 */

.header-container {  
    display: table; 
    width: 100%; 
    margin-bottom: 1.5%;
}

.header-contLogo, .header-cont{  
    float: none; 
    display: table-cell; 
    vertical-align: middle;
    font-size: 18px; 
    font-size: 1.4vw;   
} 

.header-cont{
   cursor:pointer;
}

.tile{
   cursor:pointer;
   position:relative;
}
 
.header-widths {
  width:13.0%;  
  text-align: center;
}

.logo{ width: 27.55%; } /*232px image/1187px wide row-cell*/

.divider-padding {
  margin-left: 2vw;
  margin-right: 2vw;
}

.verticalLine { 
  background-color: #AEBDD9;
  width: 1px;
  height: 100%;
} 

#connectBar {
  position: absolute;
  margin-top: -7%;
  margin-left: 11.75%; /*47.1*/
  width: 7.5%; /*30%*/
  z-index: 0;
}

/* ------------touchMuseums----------------  */
/* Width of box 253x3 + 60 = 819px
/* Width of box 253x2 + 30 = 536px (total design page width: 1102px) */

#touchMuseumsID {
  position: relative;
  float: left; 
  display: table; 
  table-layout: fixed;
  width: 49.6%; 
  background-image: url('../img/croppedMuseums.png'); 
  background-repeat: no-repeat;
  background-size: 100%;
  /*max-width: 49.6%;*/ /*74.3%*/
  height: 11.46vw; /*max-height: 11.46vw;*/ /*vw used here as %age is not an option for height and width */
}

/* ------------What We Do----------------  */
.horizontalLineWhat { 
  /*background-color: #AEBDD9;*/
  width: 17%;
  height: 1px;
  margin-top: 2%;
} 

.txtDivIDLeftWhatWe {
  float: left;
  display: table-cell; 
  max-width: 100%;
  padding: 3.63% 3.63% 3.63% 7%; /* 40px/1102px = 3.63% */
}
/*---*/

#whatWeDoID {
  float: right; 
  display: table; 
  table-layout: fixed;
  width: 49.6%; 
  /*max-width: 49.6%;*/ 
  height: 11.46vw; /*max-height: 11.46vw; */
  -moz-overflow: hidden;
  overflow: hidden;
}

#whatHeadingPosID {
  padding-top: 4%;
  padding-left: 7%;
}

.underline{
  border-bottom-width: 1px;
  border-bottom-style: solid;
  padding-bottom:0.2vw;
}

#txtWhatWeDoID { 
  width: 100%;
  height: 4.46vw;
  line-height: 140%;
}

/* ------------touchVirtualReception----------------  */
#touchVirtualReceptionID {
  float: right; 
  display: table; 
  table-layout: fixed;
  width: 49.6%; 
  /*max-width: 49.6%;*/ 
  height: 23vw; /*max-height: 23vw;*/
}

/* ------------touchShopping----------------  */
#touchShoppingID {
  float: right; 
  display: table; 
  table-layout: fixed;
  width: 11.8%; 
  /*max-width: 11.8%;*/
  height: 23vw; /*max-height: 23vw;*/
}

#imgShoppingID {
  position: absolute;
  width: 11.8%;
  height: 23vw;
}

/* ------------touchBanking----------------  */
#touchBankingID {
  float: right; 
  display: table; 
  table-layout: fixed;
  width: 11.8%; 
  /*max-width: 11.8%;*/
  height: 23vw; /*max-height: 23vw;*/
  /*background: url('AboutUs01.jpg') repeat 0 0;*/ 
}

#imgBankingID {
  float: left;
  max-width: 32%; /*never fill more than 50% of the DIV in this case*/
  max-height: 11.46vw;
}
/* ------------touchSignIn----------------  */
#touchSignInID {
  float: right; 
  display: table; 
  table-layout: fixed;
  width: 11.8%; 
  /*max-width: 11.8%;*/
  height: 23vw; /*max-height: 23vw;*/
}

/* ------------touchWayFinder----------------  */
#touchWayFinderID {
  float: right; 
  display: table; 
  table-layout: fixed;
  width: 11.8%; 
  /*max-width: 11.8%;*/
  height: 23vw; /*max-height: 23vw;*/
}

#imgWayFindingID {
  float: left;
  max-width: 100%; /*never fill more than 50% of the DIV in this case*/
  max-height: 15vw; /*60vw*/
}
               
/* ------------touchOutDoors----------------  */
#touchOutDoorsID {
  float: right; 
  display: table; 
  table-layout: fixed;
  width: 32.8%; 
  /*max-width: 32.8%;*/ /*74.3%*/
  height: 11.46vw; /*max-height: 11.46vw; */
}

#imgOutDoorsID {
  float: right;
  width: 30%;
  height: 11.46vw;
  margin-top: 0px;
  margin-right: 0px;
}

/* ------------touchHealth----------------  */
#touchHealthID {
  float: right; 
  display: table; 
  table-layout: fixed;
  width: 32.8%; /*max-width: 32.8%;*/ /*74.3%*/
  height: 11.46vw; /*max-height: 11.46vw; */
}

/* ------------touchAboutUs----------------  */
.horizontalLineAbout { 
  width: 19%;
  height: 1px;
  margin-top: 0.8vw;
  margin-bottom: 4%;
} 

/* 'Touchapps' text colour was being overwritten
by .headingFontH1 so needed to explicitly state again */
.dark-blueIMP {
  color: #0A4097; /*dark-blue*/
}
/*---*/
#touchAboutUsID {
  position: relative;
  float: right; 
  display: table; 
  table-layout: fixed;
  width: 32.8%; /*max-width: 32.8%;*/ /*74.3%*/
  height: 11.46vw; /*max-height: 11.46vw;*/ /*vw used here as %age is not an option for height and width */
}

#aboutHeadingPosID {
  padding-top: 7%;
  padding-left: 7%;
  margin-bottom: 1%;
}

/* ********************************************************************* */
/* **************** DETAIL POPUP ANIMATIONS **************************** */ 
/* ********************************************************************* */ 
  
#popUpFullBackID {
  position: fixed;
  margin: -8.03% -4.05% 0% -4.05%;
  width: 100%; /*92.2%;*/
  height: 100%; /*100.2%;*/
  opacity: 0.8;
}

#popUpFullDetailsID {
  /*
  margin-top: 3%;
  margin-left: 5%; 
  */
  position: fixed;
  top:50%;
  left:50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform:translateX(-50%) translateY(-50%);
  padding: 5% 4% 5% 5%;
  display: table; 
  table-layout: fixed;
  width: 80%; /*max-width: 80%; */
  height: 39.64vw; /*max-height: 39.64vw;*/ /*vw used here as %age is not an option for height and width */
  z-index: 10;
  
  -moz-overflow-x: hidden;
  -moz-overflow-y: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
}

#cancel {
  position: absolute;
  top: -1%;
  right: 2%;
  line-height: 4.5vw;
  font-size: 4.5vw;
  font-family: 'flama-ultraLight';
  cursor:pointer;
  z-index:100;
  /*
  float: right;
  margin-top: -3.5%;
  margin-right: -4%;
  font-size: 3.5vw;
  font-family: 'flama-ultraLight'; 
  */
}

.leftAlignText {
  display: table-cell;
  float: left;
  width: 45%; /*max-width: 45%;*/
  height: 23vw; /*max-height: 23vw;*/
}

.rightAlignText {
  display: table-cell;
  float: right;
  width: 45%; /*max-width: 45%;*/
  height: 23vw; /*max-height: 23vw;*/
  margin-left: 40%; /*This margin pushes the table-cell for the 'Technologies Used' below the description*/
}

.leftAlignTechHead {
  display: table-cell;
  float: left;
  width: 100%; /*max-width: 100%;*/
  margin-top: 3%;
}

.rightAlignTechHead {
  display: table-cell;
  float: right;
  width: 45%; /*max-width: 45%;*/
  margin-top: 3%;
}

.popUpHeadingTxt, .popUpHeadingTxtBlue { 
  font-size: 2.5vw; /*34px*/
  font-family: 'flama-ultraLight';
  text-align:left;
  color: #f6f3f2; /*offWhite*/ 
  line-height: 100%;
  opacity: 0.7;
}

.popUpHeadingTxtBlue {
  color: #0A4097; /*dark-blue*/
}

.horizontalLinePopUp { 
  width: 100%;
  height: 1px;
  margin-top: 1.8vw;
  margin-bottom: 6%;
  opacity: 0.7;
} 

.popUpTxt, .popUpTxtBlue {
  font-family: 'flama-light'; /*sourceSansPro-regular*/
  font-size: 1.1vw;
  color: #f6f3f2; /*offWhite*/ 
  line-height: 150%;
  opacity: 0.7;
  height: 15.64vw; /*max-height: 15.64vw;*/
  overflow: auto;

  /* Code for having a fading effect at the bottom of the textbox in the popup menu
  - But it did not look good */

  /*::-webkit-scrollbar-track {background: #FF8257;}
  :-moz-scrollbar-track {color: #FF8257;} 
  ::-moz-scrollbar-track {color: #FF8257;}
  :-ms-scrollbar-track {color: #FF8257;}
  
  background: -webkit-linear-gradient(rgba(10,64,151,1) 80%, rgba(246,243,242,1)); 
  background: -o-linear-gradient(rgba(10,64,151,1) 80%, rgba(246,243,242,1));
  background: -moz-linear-gradient(rgba(10,64,151,1) 80%, rgba(246,243,242,1)); 
  background: linear-gradient(rgba(10,64,151,1) 80%, rgba(23,26,234,1)); 
  */
}

.popUpTxtBlue {
  color: #0A4097; /*dark-Blue*/
  height: 26.64vw; /*max-height: 26.64vw;*/
}

.popUpTechFormatHead {
  font-size: 0.9vw; /*14px*/
  font-family: 'flama-light'; 
  margin-top: 0.5vw;
}

.horizontalLineTechPopUp, .horizontalLineTechPopUpRight {
  width: 12.2%;
  height: 2px;
  margin-top: 1%;
  margin-bottom: 0.5%;
}

.horizontalLineTechPopUpRight {
  width: 28.0%;
  margin-top: 2%;
}

.popUpTechFormat {
  font-size: 0.7vw; /*14px*/
  font-family: 'FLAMA-BASIC'; 
  margin-top: 0.5vw;
  color: #0A4097; /*dark-blue*/
}

/* --------------- Touch Museums Specific Layout in Popups -------------- */
.rightAlignMuseum {
  position: absolute;
  width: 50%;
  margin: 2% 0% 0% 39%;

  -ms-perspective: 1000px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.imgFitDivMuseums {
  width: 112%;
  
  -ms-transform: rotateY(-45deg) rotateX(20deg); /* IE 9 */
  -webkit-transform: rotateY(-45deg) rotateX(20deg); /* Chrome, Safari, Opera */
  transform: rotateY(-45deg) rotateX(20deg);
}

/* --------------- Touch Virtual Receptionist Specific Layout in Popups -------------- */
.rightAlignVR {
  height:90%;
  left:50%;
  overflow:hidden;
  position: absolute;    
  width: 50%;
  top:10%;
  /*margin: 4% 0% 0% 39%;*/  

  -ms-perspective: 1000px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.imgFitDivVR {
  margin-left: -12%;
  margin-top: 40%;
  width: 112%;
  
  -ms-transform: rotateY(-25deg) rotateX(5deg) translateY(-50%); /* IE 9 */
  -webkit-transform: rotateY(-25deg) rotateX(5deg) translateY(-50%); /* Chrome, Safari, Opera */
  transform: rotateY(-25deg) rotateX(5deg) translateY(-50%);
}

/* --------------- Touch Wayfinding Specific Layout in Popups -------------- */
.rightAlignWayfinding {
  position: absolute;
  width: 47%;
  margin: 0% 0% 0% 46%;

  -ms-perspective: 1000px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.imgFitDivWayfinding {
  width: 112%;
  
  -ms-transform: rotateY(-30deg) rotateX(20deg); /* IE 9 */
  -webkit-transform: rotateY(-30deg) rotateX(20deg); /* Chrome, Safari, Opera */
  transform: rotateY(-30deg) rotateX(20deg);
}

/* --------------- Touch SignIn Specific Layout in Popups -------------- */
.rightAlignSignIn {
  position: absolute;
  width: 52%;
  margin: 1% 0% 0% 43%;

  -ms-perspective: 1000px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.imgFitDivSignIn {
  width: 112%;
  
  -ms-transform: rotateY(-20deg) rotateX(10deg); /* IE 9 */
  -webkit-transform: rotateY(-20deg) rotateX(10deg); /* Chrome, Safari, Opera */
  transform: rotateY(-20deg) rotateX(10deg);
}

/* --------------- Touch Banking Specific Layout in Popups -------------- */
.leftAlignBanking {
  position: absolute;
  height:100%;
  left:0;
  top:0;
  overflow:hidden;
  width: 50%;

  -ms-perspective: 5000px;
  -webkit-perspective: 5000px;
  perspective: 5000px;
}

.imgFitDivBanking {
  -ms-transform: rotateY(-17deg) rotateX(7deg); /* IE 9 */
  -webkit-transform: rotateY(-17deg) rotateX(7deg); /* Chrome, Safari, Opera */
  transform: rotateY(-17deg) rotateX(7deg);
}

/* --------------- Touch Shopping Specific Layout in Popups -------------- */
/*
.leftAlignShopping {
  position: absolute;
  width: 33%;
  margin: -1% 0% 0% -2%;

  -ms-perspective: 5000px;
  -webkit-perspective: 5000px;
  perspective: 5000px;
}
*/

.imgFitDivShopping {
  -ms-transform: rotateY(15deg) rotateX(10deg); /* IE 9 */
  -webkit-transform: rotateY(15deg) rotateX(10deg); /* Chrome, Safari, Opera */
  transform: rotateY(15deg) rotateX(10deg);
}

/* --------------- Touch Outdoors Specific Layout in Popups -------------- */
.leftAlignOutdoors {
  position: absolute;
  width: 88%;
  margin: 2% 0% 0% 2%;

  -ms-perspective: 1000px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.imgFitDivOutdoors {
  width: 110% !important;
  margin-left:-8%;
  
  -ms-transform: rotateY(44deg) rotateX(10deg); /* IE 9 */
  -webkit-transform: rotateY(44deg) rotateX(10deg); /* Chrome, Safari, Opera */
  transform: rotateY(44deg) rotateX(10deg);
}

/* --------------- Touch Health Specific Layout in Popups -------------- */
.leftAlignHealth {
  position: absolute;
  width: 87%;
  margin: -2% 0% 0% -3%;

  -ms-perspective: 1000px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.imgFitDivHealth {
  
  -ms-transform: rotateY(-26deg) rotateX(10deg); /* IE 9 */
  -webkit-transform: rotateY(-26deg) rotateX(10deg); /* Chrome, Safari, Opera */
  transform: rotateY(-26deg) rotateX(10deg);
}

/* --------------- Touch About Us Specific Layout in Popups -------------- */
.imgFitDivAboutUs {
  /*display: block;*/
  position:  absolute;
  width: 50%;
  margin: -6.3% 0% 0% -6.2%;
}

.tableCellNames {
  display: table-cell;
  float: left;
  width: 50%; /*max-width: 40%;*/
  height: 122px; /*max-height: 9.5vw;*/
  line-height: 175%;
}

.horizontalLineNamesPopUp {
  width: 75.0%;
  height: 3px;
  margin-top: 1%;
  margin-bottom: 2.5%;
}

.popUpAboutUsName {
  font-size: 1.1vw; /*14px*/
  font-family: 'sourceSansPro-regular'; 
  margin-top: 0.5vw;
}


/* ------------Footer----------------  */
.orangeFooter{color:#FF8257;}

.horizontalLineFooter { 
  width: 7%;
  height: 1px;
  margin-top: 0.3%;
  margin-bottom: 1%; 
}
/*-----*/

#txtDivIDLeftFooter{
  float: left;
  display: table-cell;
  width: 100%; /*max-width: 100%; */
  height: 8vw; /*max-height: 8vw; */
  line-height: 150%;
  padding-left: 1%;
  padding-top: 1%;
  padding-bottom: 10%;
}

/* --------------------------MEDIA QUERIES - Start--------------------------  */

@media only screen 
/*and (max-width : 890px) { */  
and (max-width : 1023px) {   

  body { margin-top: 4.5%; }

  .header-widths {
    width:22.0%;
    text-align: center;
  }

  .logo { width: 75.55%; }

  .header-contLogo, .header-cont{  
    float: none; 
    display: table-cell; 
    vertical-align: middle;
    font-size: 18px;
    font-size: 1.9vw;  
  }

  #connectBar {
    margin-left: 22.2%;
  }

  .tile.horizontal{
    width:100% !important;
    margin-left:0px !important;
    margin-right:0px !important;
    margin-bottom:10px !important;
    height:100px !important;
  }
  
  .tile.vertical{
    width:49% !important;
    height:250px !important;
    margin-left:0px !important;
    margin-bottom:10px !important;
    background-position:center;
  }

  .tile.vertical:nth-child(2n+1){
    margin-right:0px !important;
  }
  .tile.vertical:nth-child(2n){
    margin-right:2% !important;
  }

  .headingFontH1 { 
    font-size: 16px;
  }

  .headingFontH2 { 
    font-size: 14px;
  }
  
  .headingFontH4{
    font-size: 14px;
  }

  .divider-padding{
    margin:0px;
  }
  
  .header-contLogo, .header-cont{  
    font-size: 12px;
  }
  .techFormat {
    font-size: 10px;
  }

  #touchMuseumsID {
    background-image: url('../img/croppedMuseums.png');
    background-size: 100%;
    background-size: 80%;
    background-position: left bottom;
  }

  #txtDivIDLeftFooter{
    padding-bottom:30%;
  }

  #popUpFullDetailsID {
    height:450px;
    margin:0px;
  }

  #popUpFullDetailsID .leftAlign,
  #popUpFullDetailsID .leftAlignText,
  #popUpFullDetailsID .leftAlignTechHead,
  #popUpFullDetailsID .rightAlign,
  #popUpFullDetailsID .rightAlignText,
  #popUpFullDetailsID .rightAlignTechHead{
    width:100%;
    position:static;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
  }
  #popUpFullDetailsID .leftAlignText,
  #popUpFullDetailsID .rightAlignText{
    height:40%;
    margin-top:20px;
  }
  
  #popUpFullDetailsID .leftAlign,
  #popUpFullDetailsID .rightAlign{
    max-height:170px;
  }

  #cancel{
    top:0;
    right:2%;
    line-height:35px;
    font-size:35px;
    font-family: 'flama-light';
  }
  
  #popUpFullDetailsID .leftAlign img,
  #popUpFullDetailsID .rightAlign img{
    padding:0px;
    margin:0px;
    width:100%;
    margin-top:10px;
    margin-left:-4%;
    -moz-transform: rotateY(-25deg) rotateX(5deg);
    -webkit-transform: rotateY(-25deg) rotateX(5deg);
    -o-transform: rotateY(-25deg) rotateX(5deg);
    -ms-transform: rotateY(-25deg) rotateX(5deg);
    transform: rotateY(-25deg) rotateX(5deg);
  }
  
  .popUpTxt,.popUpTechFormatHead,.popUpAboutUsName,
  .popUpHeadingTxt,.popUpHeadingTxtBlue{
    font-size:12px;
  }

  .popUpTxt{
    height:120px;
    margin-bottom:15px;
  }
  .popUpTxtBlue{
    font-size:12px;
    height:100%;
  } 
  .popUpHeadingTxt,.popUpHeadingTxtBlue{
    margin-top:20px;
    font-size:14px;
  }
  
  .popUpTechFormat{
    font-size:9px;
  }

  #leftAlignAboutUsID{
    height:360px;
  }
  #leftAlignAboutUsID .rightAlignText{
    height:100%;
  }

  .imgFitDivAboutUs {
    position: absolute;
    height: 100%;
    opacity:0.7;
    top: 0;
    left: 50%;
    width:auto;
    margin: 0;
    transform: translateX(-50%);
  }


}

/* --------------------------MEDIA QUERIES - End--------------------------  */

.rightAlign {
  height:90%;
  left:50%;
  overflow:hidden;
  position: absolute;    
  width: 50%;
  top:10%;
  /*margin: 4% 0% 0% 39%;*/  

  -ms-perspective: 1000px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.imgFitDivRight {
  margin-left: -12%;
  margin-top: 40%;
  width: 112%;
  
  -ms-transform: rotateY(-25deg) rotateX(5deg) translateY(-40%); /* IE 9 */
  -webkit-transform: rotateY(-25deg) rotateX(5deg) translateY(-40%); /* Chrome, Safari, Opera */
  transform: rotateY(-25deg) rotateX(5deg) translateY(-40%);
}

.leftAlign {
  position: absolute;
  height:100%;
  left:0;
  top:0;
  overflow:hidden;
  width: 45%;
  margin-left:5%;

  -ms-perspective: 5000px;
  -webkit-perspective: 5000px;
  perspective: 5000px;
}

.imgFitDivLeft {
  width: 98%;
  margin-top:10%;
}

.open_widget{
  cursor:pointer;
}