/*******************************************************************************
                            Reset
*******************************************************************************/
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
body {line-height:1.5;background:white;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
:focus {outline:0;}

:root{
  --blue: #263069;
  --blue_baby: #91CDD6;
  --blue_light: #0A66C2;
  --blue_dark: #263069;
  --blue_darker: #171b3b;

  --white_subtle: #b6b6b6;
  --white_intense: #efefef;

  --grey_soft:  #d9d9d9;
  --grey_charcoal: #2c2c2c;

  --slantPos: 3vw;
}

/*******************************************************************************
                            General Settings
*******************************************************************************/
/* Default font settings.
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
html { font-size:100.01%; }
body {
  font-size: 100%; /*75%*/;
  color: #fff;
  background: var(--grey_soft);
  font-family: Trebuchet MS, "Helvetica Neue", Arial, Helvetica, sans-serif;
}
html,body{height:100%;}

/* Headings------------------------------------------------------------------ */
h1,h2,h3,h4,h5,h6 	{ font-weight:bold;}
h1, h5, h6				  { text-transform:uppercase;}

h1 { font-size: 2.0em; 	line-height: 1; 	 margin-bottom: 0.75em;  text-align:center;}
h2 { font-size: 1.7em; 						       	 margin-bottom: 0.5em;   text-align:center;}
h3 { font-size: 1.25em; line-height: 1; 	 margin-bottom: .25em;   }
h4 { font-size: 1 em; 	line-height: 1.25; margin-bottom: 1.1em;   }
h5 { font-size: 1 em; 						      	 margin-bottom: 0.75em;  }
h6 { font-size: 1 em; 	                                           }

a       { text-decoration: none; color: orange;}
a:hover { color:#ddd;}
p       { font-size: 1.2rem; margin: 5px 8px 20px; }

em      { font-style: italic; }
strong  { font-weight:bold;}

ul      { padding-left:30px; padding-bottom:15px;}
ul li   { font-size:1rem;}

/* GRID setup 1 ------------------------------------------------------------ */
.col-4  {  display:grid;  grid-template-columns: 1fr 1fr 1fr 1fr;}
.col-2  {  display:grid;  grid-template-columns: 1fr 1fr;}
.col-1  {  display:grid;  grid-template-columns: 1fr 1fr;   grid-auto-flow:row;}

.preC-1 {  grid-column: 2/ span 1}
.preC-2 {  grid-column: 3/ span 2}

/* Spans */
.w-1{ grid-column:  span 1;}
.w-2{ grid-column:  span 2;}
.w-3{ grid-column:  span 3;}
.w-4{ grid-column:  span 4;}

/* for image placement */
.pre-2    { margin-left:50%;  }
.column-2 { width: 50%;       }

/*******************************************************************************
                            Structure
*******************************************************************************/
.wrapper {max-width: 1200px; margin: 0 auto; overflow:hidden;}
section.oblique .blue .wrapper{margin-top:3vh; margin-bottom:3.5vh;}

header  { width: 100%;                  background-color: var(--blue_dark);}
nav     { margin:0; padding:0px;}
section { overflow: auto;}
footer  { overflow: auto; width: 100%;  background-color:var(--grey_charcoal);}


.customGraphicB img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: 90% 0%;
}

.SISLogo{
  padding-bottom:15px;
}
/* Header section ------------------------------------------------------------*/
header.oblique, header.projectHeader{
  padding-bottom: 200px;
}
header.oblique{
  background-image:url('../imgs/common/background.jpg');
  background-size: cover;
  background-position:center;
}
header.projectHeader{padding-bottom:0px;}
header.oblique + .projectPage{ padding-bottom:0px;}

header #headerCenter.wrapper-2    {  width: 650px;      margin:0px auto;  margin-bottom: -7rem;}
header #headerCenter.wrapper-2 h1 {  margin-top: 9rem;  margin-bottom: 0px;  font-size:9rem;}
header #headerCenter.wrapper-2 img{  width:100%;}
header.oblique  #headerContent.wrapper-2 p{
  color:var(--blue_baby);
}

section.oblique .wrapper #image2{
  /*object-fit: cover;*/
  object-fit:cover;
  object-position: 100% 50%;
}
/* Section section ------------------------------------------------------------*/
section.oblique{
  margin:0x;
  padding-top: 0px;
  position:inherit;
  display:grid;
  background-color:none;
  padding-bottom: 0; /*2.5rem;*/
  color: var(--blue_dark);
}
section.oblique .graphicSlant {
  width:100%;
  /*position:absolute;*/
  overflow:auto;
  z-index:3;
  padding-top:100px;
  padding-bottom: 50px;
}

section.oblique .blue{  background-color: var(--blue);}
section.oblique .city{
background-size:cover;
  background:
  linear-gradient(90deg,
    rgba(0,212,255,0) 0%,
    rgba(38,48,105,0.5) 25%,
    rgba(38,48,105,.9) 72%
  ),
  url(../imgs/common/Canada.jpg);
  background-size:cover;
  padding-bottom:2vh;
}
section.oblique .city p{
  font-size:1.2rem;
  margin:0px 40px 20px;
}

section.oblique .graphicSlantImage{
  margin:-648px 0 0 0;
  padding:0 0 0 0;
  position:relative;
  z-index:5;
  overflow:hidden;
}

section.oblique .wrapper  {  padding-bottom: 2vh; min-height:8.5vh;}
section.feature           {  padding-bottom: 2vh; margin-top:-150px; }

#testimonials{ padding: 15px 0 50px;}


/* Footer section ------------------------------------------------------------*/
footer.oblique{
  padding-top: 8vh;
}

/* Consistent graphic styling */
header.oblique,
header.projectHeader,
section.oblique                {  -webkit-clip-path: polygon(0 0,   100% 0, 100% calc(100% - var(--slantPos) ),  0 100%); clip-path: polygon(0 0,   100% 0, 100% calc(100% - var(--slantPos) ),  0 100%);}
section.oblique .graphicSlant  {  -webkit-clip-path: polygon(0 var(--slantPos), 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 var(--slantPos), 100% 0, 100% calc(100% - var(--slantPos) ),  0 100%);}
section.oblique .gradientSpecial{
    background-image: radial-gradient(circle at 75%,
    rgba(72,127,177,1) 0%,
    rgba(72,127,177,0) 36%
    );
}

footer.oblique                 {  -webkit-clip-path: polygon(0 var(--slantPos), 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 var(--slantPos), 100% 0, 100% 100%, 0 100%);margin-top:-10vh; }



/* Header styling section-----------------------------------------------------*/
header                        {                         padding-bottom: 25px;}
header #headerNavBar          {  margin: 0px auto 0px;  padding:0px; height: 4em;   background-color: var(--blue_darker);}
header #social, header #links {  margin-top: -5px;       padding-bottom: 0px; display:inline; vertical-align: :bottom;}
header #social                {  margin-top: 6px;       margin-right: 10px; padding-top: 0px; text-align:right;}
header #headerCenter          {  margin: 25px auto;     clear:both; max-width: 750px;  text-align:center; }
header #headerNavBar .wrapper {  padding-top:10px;}
#links a {margin: 5px;  margin-top:-10px; padding: 10px; font-size: 1.3em; color: white;}
header #links a{vertical-align:middle; color:#d4d4d4;}
header #links a:hover{color:white;}


header #headerProject           { color: white;           height: 20rem;   min-height:8vh;}
header #headerProject h1        { color: white;            font-size: 1.8em; text-align:left;      }
header #headerProject p         { color: white;            font-size: 1.2em; margin: 2px 2px;                     }
header #headerProject p strong  { color:var(--blue_baby);   font-weight:bold; padding-right:10px; }
header #headerProject img{
  min-width:610px;
  margin:0px;

  clip-path: polygon(0% 0%, 89% 0%, 92% 9%, 80% 41%, 83% 62%, 68% 100%, 0% 100%);
  -webkit-clip-path: polygon(0% 0%, 89% 0%, 92% 9%, 80% 41%, 83% 62%, 68% 100%, 0% 100%);
  -webkit-mask-image: linear-gradient(to left, black, transparent);
  mask-image: linear-gradient(to left, black, transparent);/**/
}

header #headerProject .info{
  margin-top: -50px;
  padding-top: 150px;
  padding-right:10px;
}

#projectBanner img{
  width: 100%;
  height: 35rem;
  object-fit: cover;
  object-position: 100% 50%;
  margin-top:-25px;
}

/* Contextual styling - dark text on light and vice versa */
.graphicSlant h1          {  color: #263069;}
.graphicSlant p           {  color: #263069;}
.graphicSlant ul li       {  color: #263069;}

section.oblique .blue h1, #headerCenter h1   { color: white;}
section.oblique .blue p,  #headerCenter p    { color: white; text-wrap: balance;}
section.oblique .blue ul                     { color: white;}
section.oblique .blue ul li                  { color:white;}

/* styling*/
footer.oblique h1        { color:  white;}
footer.oblique p         { color:  var(--white_intense);}

/* SOCIAL MEDIA */
svg .SMICON       { fill: #777777; }
svg:hover .SMICON { fill: #4DACFE; }

/* icon coloring */
svg.SMTwitter:hover .SMICON   { fill: #1DA1F2;  }
svg.SMInstagram:hover .SMICON { fill: #E4405F;  }
svg.SMLinkedin:hover .SMICON  { fill: #0077B5;  }
svg.SMFaceboo:hover .SMICONk  { fill: #3B5998;  }



/* Custom Points Section */
.customPoints{
  display:grid;
  grid-template-columns:100px 1fr;
  margin: 25px 0  15px;
}
footer .customPoints{
  display:grid;
  grid-template-columns:26px 1fr;
  margin: 25px 0  15px;
}
.customPoints p, .customPoints img{    padding: 1rem; vertical-align: center;}
.customPoints p{ margin: 4px 0px 2px 15px; padding: 0; font-size:1.2rem;  }
.customPoints p strong{ color:white; font-weight:500; padding-right:10px;}

.oblique .customPoints p{ color: var(--white_subtle);}

footer.slant .customPoints  {    grid-template-columns:60px 1fr;    margin:0;}
footer > .customPoints p    {    padding: 0.1rem;}
footer .customPoints img    {    padding: 0.1rem;}

footer .button        { font-size:1.0rem; padding: 10px 20px;}
.imageList ul li img  { display:inline-block;}
.imageList ul li p    { display:inline-block;}

footer #Contact{  margin-top:1vh;}
footer form   { display:block;  }
footer .button{ margin:2px;     }

  img.hangingIMG{
	  float:left;
	  padding-top:5px;
	  padding-right:20px;
	  padding-left:40px;
  }
  
  div.hangingIMG{
	  padding-left:195px;
	  padding-bottom:0px;
	  line-height: 1.25;
  }
  
  a.contactLink{
	  font-weight:bold;
	  text-decoration: underline; color: #61B8E6;
	}
   
   a.contactLink:hover {
	   color: blue;
   }
	
  
  h1.connectTitle{
	  padding-bottom:30px;
	  padding-top:30px;
  }

/* Icon Thumbnail */
img.galleryThumbnail{ width:100%;   margin:0px 0px 20px;}
img.graphicIcon     { width:70px;   margin: 5px 10px; }
img.clientIconThmb  { width:200px;  margin: 5px 10px;}
img.clientIcon      { width:80%;    margin: 5px 10px;}

#Awards img{margin:5px 10px;}

/*******************************************************************************
                            BUTTON
*******************************************************************************/
.button_filter{
  margin: 5px 10px;
  padding: 10px 20px 10px;

  border:2px solid white;
  border-radius: 15px;
  color: #afafaf;
}
.button {
  margin: 15px 10px;
  padding: 20px 50px 20px;
  text-transform: uppercase;
  align-items: center;
  background-color: var(--blue_light);
  border: 0;
  border-radius: 7px;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 1.5rem;
  font-weight: 600;
  justify-content: center;
  line-height: 20px;
  max-width: 480px;
  min-height: 40px;
  min-width: 130px;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
}

.button:hover,
.button:focus   { background-color: #00D0FE;  color: #ffffff;}
.button:active  { background: #00D0FE;        color: rgb(255, 255, 255, .7);}
.button:disabled{ cursor: not-allowed;  background: rgba(0, 0, 0, .08) color: rgba(0, 0, 0, .3);}

.icon-bar{ display:block; width:22px; height: 2px; background-color:#ccc; border-radius:1px;}

/*************************** Testimonials *************************************/
blockquote.qCard {
  max-width: 52rem;
  margin-inline: auto;
  margin-top:100px;
}
blockquote.qCard > .quote{
  margin: 50px auto 15px;
  padding: 20px 30px;
  background-color: var(--blue_dark);
  color: white;
  font-weight:bold;
  border-radius: 0.3rem;
}
blockquote.qCard > .quote, blockquote.qCard > .background{ position: relative;}

blockquote.qCard > .quote p         {  color:#e0e0e0;font-size:1.1em; font-family: arial; font-weight:300; margin:0px; padding: 10px; }
blockquote.qCard > .quote           {  z-index:3; margin: 10px 60px 0px;  }
blockquote.qCard > .background      {  z-index:1;   }

blockquote.qCard > .quote p.author {  font-weight: normal; font-size: 1.1em;  font-style:italic; padding:10px;}
blockquote.qCard > .quote p .role   {  font-weight: normal; font-size: 1.1em;  font-style:italic; margin-left:10px;}
blockquote.qCard > .quote p.author, blockquote.qCard > .quote p.role   {  text-align:left; margin: 15px 0px 0px;   }

blockquote.posR > .quote      {  margin-right: 300px; }
blockquote.posR > .background {  margin-top: -50px;    float:right;box-shadow:-15px 15px var(--blue_baby); }

blockquote.posL > .quote      {  margin-left: 300px;}
blockquote.posL > .background {  margin-top: -50px;    float:left; box-shadow:15px 15px var(--blue_baby); }
blockquote .background img    {  width:100%;}
blockquote.posL > .background,
blockquote.posR > .background {  width:40%; background-color: var(--blue_baby);  line-height:0;}

/******************** END OF Testimonials *************************************/

/* Contact Form  ------------------------------------------------------------ */
footer .footer-group{
  margin-top:10px;
}
.form-group .form-control{
  display:inherit;
  font-size:1rem;
  color:white;
  height: 52px;
  background: transparent;
}
.form-group{
  margin:30px 60px 0 60px;
}
.contactForm .form-control{
  background: #393b42;
  margin: 2px 10px 5px 10px;
  padding: 5px 10px;
  border-radius: 0.3rem;
  border:1px solid transparent;
  display:block;
  color:white;
  width:100%;
  font-family:inherit;
}
.form-group .column-1{width:94%;}
.form-group .form-control + .column-2{width:94%;}

#form-message-warning{color:red;}
#form-message-success{color:green; padding: 10px }

/* Collapsible Nav bar  ----------------------------------------------------- */
.navbar-collapse{
  flex-basis:100%;
  flex-grow: 1;
  align-items: center;
}
.navbar-toggler-icon {
    display: inline-block;
    width: 3em;
    height: 3em;
    vertical-align: middle;
    content: "";
    cursor:pointer;
    background: 50%/100% 100% no-repeat;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


.nav-link{
  display:block;
  padding:1rem;
}
.navbar-toggler-icon{
  background-color:none;
  color:white;
}
.navbar{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  vertical-align: center;
  padding-bottom:10px;
}
#collapsibleNavbar{
  background-color: var(--blue_darker);
  z-index:10;

  display:flex;
  justify-content:space-between;
}


footer #social{
  width:60%;
  margin: 10px auto;
}
footer img.logo{width:60%; margin: 1rem auto 0px; padding: 10px;}

header #headerCenter >.emphasizedLogo{
  margin-bottom:100px;
}


#social a svg{  width:32px;  height:36px;}

a.thmb img{
  width:98%;
  height: 97%;
  object-fit: cover;
  margin:0px 0px 0px 3px;
  padding:0p 0px 0px 0px;
  text-align:center;
}

a.w-1 img.galleryTHMB{  width: 97%;}
a.w-2 img.galleryTHMB{  width: 98.5%;}

.navbar-expand-md{ flex-flow: row nowrap;}
.navbar-expand-md .navbar-nav {
      -ms-flex-direction: row;
      flex-direction: row;
}
.navbar-expand-md .navbar-toggler{display:none;}
.navbar-expand-md .navbar-collapse{
  /*display: -ms-flexbox!important;
  display: flex!important;
  -ms-flex-preferred-size: auto;
  display:inline;
  flex-basis: auto;*/

}

.filter_colorize{
  filter:
    invert(50%)
    sepia(25%)
    saturate(3207%)
    hue-rotate(199deg)
    brightness(61%)
    contrast(80%);
}


/* Misc --------------------------------------------------------------------- */
.center{text-align:center}
.copyright{padding: 4rem;}


.project h1{text-align:left; padding-left:8px;}

.showcase{margin-top: 30px;}

/*******************************************************************************
                              Media Query adjustments
*******************************************************************************/
@media (max-width: 850px ){
  .content, .col-4, .col-3, .col-2, .col-1{
    display:grid;
    grid-template-columns: 1fr;
    /*grid-auto-rows: 300px;*/
    grid-template-rows:fit-content;
  }

  .col-4 .showcase{    display:grid;    grid-auto-rows: 220px;  }

  .w-1, .w-2, .w-3, .w-4  { grid-column: span 1;}
  .pre-1, .preC-1         { grid-column:1;}

  header.oblique{ padding-bottom: 50px;}
  header #headerProject       {  height:50rem;}
  header #logo{padding-left:15px;}
  header #projectBanner img   {  clip-path:none;  -webkit-mask-image:none;}
  header #headerProject .info { margin: 0 25px 50px 30px;  padding-top: 25px;width: 65%;}

  header #headerCenter.wrapper-2    {    width:100%;  }
  header #headerCenter.wrapper-2 img{    width:60%;  }
  section.oblique .graphicSlantImage, .graphicSlantImage img,
  section.oblique .customGraphicB{ display:none;}
/*  section.oblique .graphicSlantImage2, .graphicSlantImage2 img{ margin-top:-1000px; display:none;z-index:10;} */
#image2{margin-top:-100px;}
  section.oblique .gradientSpecial { background-image: none;}

  section.feature{margin-top:-50px;}
  footer img.logo{width:25%;}
  footer #social{width:70%;}
  footer .form-group{ margin: 30px  60px 0 21px;}
  img.clientIcon{ display:block; padding: 0px; margin: 10px auto; width:60%;}

  a.w-1 img.galleryTHMB,
  a.w-2 img.galleryTHMB{  width: 98%; }

  .navbar-expand-md{flex-flow:wrap;}
  .navbar-expand-md .navbar-toggler{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right:15px;
  }
  #collapsibleNavbar                     {  display:block;  }
  #collapsibleNavbar.collapse:not(.show) {  display: none;  }

  .navbar-collapse{
    flex-basis: 100%;
    flex-grow: 1;
  }
  .navbar .navbar-collapse a {
    display:block;
    color:white;
    text-align:center;
    font-size:2em;
    padding:1.5rem 1rem;
  }
  .navbar-expand.md       { flex-flow:wrap;}
  .navbar .navbar-collapse #social a{
    text-align:center;
    padding: 0.5rem 1rem;
  }
  .navbar .navbar-collapse #social{
    display: grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
  }
  #social a svg.SMICON{ width:64px; height: 64px;}

  section ul,  section p{ margin:1rem 2rem 1rem;}

  /* Testimonial ------------------------------------------------------------ */
  blockquote.posL > .quote,  blockquote.posL > .background,
  blockquote.posR > .quote,  blockquote.posR > .background{ width:inherit; margin:0px; float:none;}

  blockquote.posL > .background img,
  blockquote.posR > .background img   {   width:100%; margin: inherit auto;}

  blockquote.qCard > .quote           {   margin-top:-10px; border-radius:0px; }
  blockquote.qCard > .quote p.author,
  blockquote.qCard > .quote p.role    {   margin: -5px 0 0px;}

  section .quote p.role{ margin-top: 0px;}
  section .video-container{
    position:relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
  }
  section .video-container .video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio:16/9;
  }
  section .video iframe{ width:100%;  height:24rem;  }
  
   /* Direct Contact ---------------------------------------------------------- */
  section .w-profile { width: 50px;}
  section .directContact {}
  

  /* Custom Points ---------------------------------------------------------- */
  section .customPoints   { display:block;  text-align:center;  }
  section .customPoints p { padding-bottom:5px; margin: 4px 15px 2px;}
  footer .customPoints    { width:75%; margin:25px  auto 20px;}

  .form-group .column-1   { width: 94%;  }
  .project h1{text-align:left; padding-top: 2rem;padding-left:30px;}

  img.graphicIcon{ width:15%;}

}