/*  COMMON site wide layout CSS applicable to all pages and to all templates.
    For styles applicable to specific templates - use the relevant templateN.css file

    Primary site wide font list: (see SiteFonts.css for file declarations. Font files are located in /Fonts/Master
        (1) ConeheadHelvetica, 
        (2) ConeheadHelveticaBold, 
        (3) ConeheadHelveticaBoldOblique, 
        (4) ConeheadHelveticaLight, 
        (5) ConeheadHelveticaLightOblique, 
        (6) ConeheadHelveticaOblique
        (7) ZapfDingbats
    Current Version : 2.0.27 Dated: 14th MAR 2018 */

/**************/
/* Animations */
/**************/
@-webkit-keyframes TitleRevealfadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes TitleRevealfadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.text-js{
  opacity: 0;
}

.PortraitVideoConstraint {
    border: solid 5px white;
    border-radius:5px;
    max-width:350px;
}

.LandscapeVideoConstraint {
    border: solid 5px white;
    max-width:600px;
    border-radius:5px;
}


/***************/
/* TAG CLASSES */
/***************/
*{
  margin:0;
  padding:0;
  text-decoration:none
}
html {
    height: 100%;
    width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: ConeheadHelveticaLight, Arial, sans-serif;
  color: #fff;
  overflow: hidden;
}

h1 {
    width: 100%;
    height: 100%;
}

a {
  color: #5dc;
  text-decoration: none;
  color: Orange;
}
a:visited {
  color: Orange;
  text-decoration: none;
}
a:link {
  color: Orange;
  text-decoration: none;
}
a:active {
  color: Orange;
  text-decoration: none;
}
a:hover {
  color: Orange;
  text-decoration: underline;
}


hr {
	border: 0; 
	height: 2px; 
	background: Orange;
}

/* BOLD heading using 14 point font and 22 point leading */
strong {
    font-family: ConeheadHelveticaBold, Arial, sans-serif;
    font-weight:normal;
    color: #3D4041;
    /* Note - should be 14pt, but with this font have a look at the global reach page and look specifically at the
       line "UAE". Note that the E is dropped. Altering the font size very slightly to 15pt fixes this error */
	font-size: 15pt;
	line-height:22pt;    
}


.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}


.ModalInputField {
	font-family: ConeheadHelveticaLightOblique, Arial, sans-serif;
	font-size: 12pt;
	font-weight:normal;
	color: #3A3F42;
}

.ModalCheckboxText {
	font-family: ConeheadHelveticaLight, Arial, sans-serif;
	font-size: 12pt;
	font-weight:normal;
	color: #3A3F42;
}

/* Handy test class to establish the outer border of a container. */
.AddRedBorder {
    border: solid 1px red;
}
/* Handy test class to establish the outer border of a container. */
.AddOrangeBorder {
    border: solid 1px orange;
}
/* Handy test class to establish the outer border of a container. */
.AddGreenBorder {
    border: solid 1px green;
}
/* Handy test class to establish the outer border of a container. */
.AddBlueBorder {
    border: solid 1px Blue;
}




/* Vertical spacing classes used to spread content out vertically */
.verticalSpacer5px{ height:5px; }
.verticalSpacer10px{ height:10px; }
.verticalSpacer15px{ height:15px; }
.verticalSpacer20px{ height:20px; }
.verticalSpacer25px{ height:25px; }
.verticalSpacer30px{ height:30px; }
.verticalSpacer35px{ height:35px; }
.verticalSpacer40px{ height:40px; }
.verticalSpacer45px{ height:45px; }
.verticalSpacer50px{ height:50px; }
.verticalSpacer55px{ height:55px; }
.verticalSpacer60px{ height:60px; }
.verticalSpacer65px{ height:65px; }

 

/* Centre body region of the page - holding non-menu content */
.note {
  -webkit-overflow-scrolling: touch;        /* Make sure the scroll isn't sticky */
  width: 97%;
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #7f7f7f;
  padding: 10px 0;
  border-radius: 5px;
  overflow-y:auto;
  max-height:100%;
  margin-top: 70px;
  bottom:20px;
  box-sizing: border-box;
  transition: margin-top 0.6s;
  transition: width 0.6s;
}

.FullWidthContainer {
    margin-top:-30px;
    width: 100%;
}


.indentedFullWidthContainer {
    width: 100%;
    margin-left: 10px;
    margin-right: 75px;
    padding-right:35px;
    margin-top:-30px;
}


.note h2 {
  font-weight: 300;
  font-size: 1.5em;
  margin: 10px;
  padding: 0 10px;
}
.note p{
  margin: 10px;
  font-size: 0.9em;
}


#imgIntroPhoto {
    box-sizing: border-box;
    float: right;
    padding: 10px
    width: auto;
    max-width:250px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius:10%;
    transition: max-width 0.6s;
}

#imgSayHiPhoto {
    box-sizing: border-box;
    float: right;
    padding: 10px
    width: auto;
    max-width:250px;
    border-radius: 10%;
    margin-left: 20px;
    margin-right: 20px;
    transition: max-width 0.6s;
}

#imgSayHiPhoto2 {
    box-sizing: border-box;
    float: left;
    padding: 10px 10px 10px 0;
    width: auto;
    max-width:250px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 8%;
    transition: max-width 0.6s;
}



/* Blog specific classes */
BlogTitle {
  margin: 0px;
  color: White;
  font-weight: 300;
  font-size: 2em;
  border-bottom: solid 2px white;  
  display: block;
  width: 60%;
}

BlogPara {
  font-size: 0.9em;
  margin: 0px;
  display: block;
  text-align:justify;
  padding: 10px 0 10px 0;
}

CodeSnippet {
    /* font-style: italic; */
    color: Aqua;
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

InlineCodeSnippet {
    /* font-style: italic; */
    color: Aqua;
}

BlogPara ul {
    padding-top:10px;
    padding-left:50px;
}
BlogPara ul li {
    padding-top:2px;
    padding-bottom:2px;
}

BlogParaWithSideBySideImage {
  /* font-size: 0.9em; */
  margin: 0;
  width: 100%;
}


BlogParaWithSideBySideImage  img {
    width: 100%;
    padding: 10px 0px 10px 0;
    box-sizing: border-box;
}

BlogParaWithSideBySideImage p {
    width: 100%;
    box-sizing: border-box;
}

BlogFirstPara {
  font-size: 0.9em;
  margin: 0px;
  display: block;
  text-align:justify;
}

BlogFirstPara::first-letter {
  font-weight:600;
  font-size: 2em;
  color: Orange;
  margin: 0;
  padding: 0;
  text-align:justify;
}

BlogSubtitleNoTopPad {
    margin: 10px 10px 0px 0;
    color: White;
    font-weight: 600;
    font-size: 1.2em;
    display: block;
}


BlogSubtitle {
    margin: 30px 10px 0px 0;
    color: White;
    font-weight: 600;
    font-size: 1.2em;
    display: block;
}

BlogPhotoCentre {
    margin: 0 auto;
    text-align:center;
    display: block;
}
BlogPhotoCentre img {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    text-align:center;
    display: block;
}

BlogPhotoCentreMedium {
    margin: 0 auto;
    text-align: center;
    display: block;
}

BlogPhotoCentreMedium img {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    display: block;
}

BlogPhotoLeftMedium {
    margin: 0 auto;
    text-align: left;
    display: block;
}

BlogPhotoLeftMedium img {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

BlogPhotoCentreLarge img {
    width: 100%;
    /* max-width: 800px; */
    margin: 0 auto;
    text-align:center;
    display: block;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
}


BlogPosting {
    display: block;
    border-bottom: solid 1px #A0A0A0;
    margin-bottom: 60px;
}

BlogPosting > a {
    /* margin-left: 10px; */
}

BlogYouTubeVideoContainer {
    margin: 20px auto;
    text-align:center;
    display: block;
    padding: 0 10px 0 10px;
}

BlogYouTubeVideoContainer iframe {
    max-width: 1024px;
    margin-top:20px;
    border: solid 2px orange;
}


StandardPara {
  font-size: 0.9em;
  margin: 0px;
  display: block;
  text-align:justify;
  padding: 10px 0 10px 10px;
}

StandardPara ul {
    padding:20px;
}
StandardPara ul li {
    padding-top:10px;
    padding-bottom:10px;
}


/* Styles specific to the BLOG page - and which are used purely by the anchor menu and nodes */
.AnchorQuickLink-Title {
    font-family: ConeheadHelveticaLight, Arial, sans-serif;
    font-size: 15pt;
    font-weight: normal;
}

.AnchorQuickLink-href {
    background-color: #707070;
    border-radius: 5px;
    display: inline-block;
    display: block;
    padding-left: 5px;
    padding-right: 5px;
}


@media (max-width: 768px) {
    body {
    min-width: 320px;
  }
  
  .note {
      top:60px;
      width: 100%;
      margin-top:5px;
      overflow-y:auto;
      max-height:95%;
      margin: 0px;
      border-radius: 0;
	  box-sizing: border-box;
	  overflow-x: hidden;               /* Added 29th May to prevent horiz scroll on small iPhones */
    }
    
    #imgSayHiPhoto {
        max-width:150px;
    }

    #imgIntroPhoto {
        max-width:150px;
    }

    #imgSayHiPhoto2 {
        max-width:150px;
    }    
    
    BlogParaWithSideBySideImage  img {
        max-width: 100%;
    }
    
}


@media (max-width: 576px) {
    #imgSayHiPhoto {
        max-width:100px;
    }

    #imgIntroPhoto {
        max-width:100px;
    }

    #imgSayHiPhoto2 {
        max-width:100px;
    }    

    BlogTitle {
      font-weight: 300;
      font-size: 1em;
      width: 75%;
    }


    BlogPhotoCentre img {
        width: 100%;
        max-width: 500px;
        padding: 10px;
    }

    CodeSnippet {
     padding-left:0;   
    }

}

Center-Image-General {
    max-width: 640px;
    height: auto;
    width: auto;
}