/* Overall */

body {

  margin: 0 auto 0 auto;
  text-align: center;
  overflow-x: hidden;

  /* Location of the image */
background: url(../images/maintenance/landingpage-default.jpg);

/* Image is centered vertically and horizontally at all times */
background-position: center center;

/* Image doesn't repeat */
background-repeat: no-repeat;

/* Makes the image fixed in the viewport so that it doesn't move when
   the content height is greater than the image height */
background-attachment: fixed;

/* This is what makes the background image rescale based on its container's size */
background-size: cover;


/* Pick a solid background color that will be displayed while the background image is loading */
/* background-color:#32877e; */  /* 11.23 */

/* SHORTHAND CSS NOTATION
 * background: url(background-photo.jpg) center center cover no-repeat fixed;
 */

}

.p-format1 {
  display: flex;
  text-align: center;
  justify-content: center;
  }

  .r-format12 {
    display: flex;
    align-items: center;
    text-align: center;
  }

.normal{
  font-weight: 400;
}

a.disabled {
  /* Make the disabled links grayish*/
  color: gray;
  /* And disable the pointer events */
  pointer-events: none;
}

h1 {
  font-family: 'Roboto';
  font-weight: 400;
  color: #e9e7dd;
  margin: auto;
}

h2 {
  font-family: 'Roboto';
  color: #e9e7dd;
  padding-top: 0px;
  margin: auto;
}

h3 {
  font-family: 'Roboto';
  color: #e9e7dd;
}

hr {
  width: 10%;
  margin: 2px auto;
}

hr.hrsteel-2page {
  margin: 0;
  width: 100%;
  height: 3px;
  color: #32877e;
  opacity: 1;
}

hr.page-end-hr {
  width: 90%;
  border-top: 5px  #32877e;
  margin: 0;

}

hr.footerhr {
  width: 90%;
  border-top: 2px dotted #f4f7dd;
  margin-top: 12px;
}

a {
  text-decoration: none;
}

a:hover {
  /* color: #eaf6f6; */
  color: #1a4541;
}







/* ============================================================================================*/
/* ============================================= NAVBAR =======================================*/
/* ============================================================================================*/

.navdark {
  background-color: #32877e;
}
.navbar {
  padding-left: 0;
  background-color: #025546;

}

.navlangformat {  /*moves the Lang item to the left a bit*/
  padding-right: 5%;
}

.langmenu {
  min-width: 40px;  /*this works!!!  changes the width of the language menu */
}

.header {
  margin-top: 0;
  height: 200px;
  width: 100%;
}

.companyname {
  font-size: 48px;
  color: #221f3b;
  font-family: roboto;
  position: absolute;
  left: 300px;
  top: 70px;
}

.navbar-brand {
  margin: 0;
}

/* change the navbar link color, text size, padding, margins */
.navbar-nav .nav-item .nav-link {
    color: #fff;
    font-family: Avenir;
    font-size: 1em;
    margin: 10px 10px;
}

.navbar-inner {
  background:transparent;

}  /*April 21 */

/* change the color of active or hovered links */
.navbar-nav .nav-item:hover .nav-link:hover {
  color: #fff;
}

.nav-bar-menu-items {
  font-family: roboto;
  font-size: 1.2rem;
  font-weight: 300;
}

.navbar-toggler-icon {
background-image: url("../images/hamburgerwl.svg");
}

.dropdown-menu > li > a {
  color: #32877e;
  font-family: Roboto;
  font-weight: 300;
  font-size: 1em;
  margin-right: 10%;
  margin-left: 0;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
           background-color: #e9e7dd;
           color: #1a4541;
       }

.btn-primary-outline {
  background-color: transparent;
  border-color: transparent;
}

.btn-default, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    color: #1a4541;
    background-color: transparent;
    border-color: transparent; /*set the color you want here*/
}

.menu {
  font: opensans;
}

.account {
  height: 100px;
  width: auto;
  position: absolute;
  right: 50px;
  padding-top: 30px;
}

.menu1 {
  font-size: 3rem;
  position: absolute;
  right: 625px;
  color: #2b5d83;
  padding-top: 70px;
}

.menu2 {
  font-size: 3rem;
  position: absolute;
  right: 425px;
  color: #2b5d83;
  padding-top: 70px;
}

.menu3 {
  font-size: 3rem;
  position: absolute;
  right: 200px;
  color: #2b5d83;
  padding-top: 70px;
}

/* ================================================================================================ */
/* ============================================ GENERAL STYLES ==================================== */
/* ================================================================================================ */


/*
.twrapper1 {
  border: 2px dashed red;
}

.twrapper2 {
  border: 1px solid orange;
}

.twrapper3 {
  border: 2px solid yellow;
}

.twrapper4 {
  border: 2px solid green;
}

.twrapper5 {
  border: 2px dotted blue;
}

.twrapper6 {
  border: 2px solid pink;
}

.twrapper7 {
  border: 2px solid black;
}

.twrapper8 {
  border: 2px solid red;
}

.twrapper9 {
  border: 2px dashed orange;
}

.twrapper10 {
  border: 1px dotted yellow;
}

.twrapper11 {
  border: 2px dashed green;
}

.twrapper12 {
  border: 2px solid blue;
}

.twrapper13 {
  border: 2px solid pink;
}

.twrapper14 {
  border: 2px dotted black;
}

.twrapper15 {
  border: 2px dotted purple;
}

twrapper16 {
  border: 2px solid white;
}

twrapper17 {
  border: 1.5px solid pink;
}

twrapper18 {
  border: 1.5px solid green;
}

*/

.page-container {
  max-width: 1400px;  /* contains the pages to 1400px */
  text-align: center;
  margin: auto;
  justify-content: center;
}

.page-container1 {
  max-width: 1400px;  /* contains the pages to 1400px */
  height: 1000px;
  text-align: center;
  margin: auto;
  justify-content: center;
}


.page-container2 {
  max-width: 1400px;  /* contains the pages to 1400px */
  height: 1300px;  /* 11.23 adjusts the height of the white space between header and footer */
  text-align: center;
  margin: auto;
  justify-content: center;
}

.page-container3 {
  max-width: 1400px;  /* contains the pages to 1400px */
  height: 800px;
  text-align: center;
  margin: auto;
  justify-content: center;
}

.page-container4 {
  max-width: 1400px;  /* contains the pages to 1400px */
  text-align: center;
  margin: auto;
  justify-content: center;
}

.nobackgroundslide {
  background-color: none;
  padding-top: 5%;
  padding-bottom: 5%;
  width: 100%;  /* Necessary for page alignment; prevent slide from running off page 8 Aug */
  height: 100%; /* Necessary to keep container 100% tall for elements */
  font-size: 2rem;
}

.nocolorslide {
  padding-top: 5%;
  padding-bottom: 5%;
  padding-left: 0;
  padding-right: 0;
  width: 100%; /* Necessary for page alignment; prevent slide from running off page 8 Aug */
  height: 100%;  /* Necessary to keep container 100% tall for elements */
}

.darkslide {
  background-color: #32877e;
  padding-top: 5%;
  padding-bottom: 5%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;  /* Necessary for page alignment; prevent slide from running off page 8 Aug */
  height: 100%; /* Necessary to keep container 100% tall for elements */
  /*font-size: 2rem;*/ /*um, dont think the font size should be specified here. */
}

.darkslide1 {         /*Our network backbone */
  background-color: #32877e;
  padding-top: 5%;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;  /* Necessary for page alignment; prevent slide from running off page 8 Aug */
  height: 100%; /* Necessary to keep container 100% tall for elements */
  /*font-size: 2rem;*/ /*um, dont think the font size should be specified here. */
}

.darkslide2 {
  /* background-color: #32877e; */
  padding-top: 3%;
padding-bottom: 3%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;  /* Necessary for page alignment; prevent slide from running off page 8 Aug */
  height: 700px; /* Necessary to keep container 100% tall for elements height of the entire page, not the container.  */  /* 11.23 */
  /*font-size: 2rem;*/ /*um, dont think the font size should be specified here. */
}


.lightslide {
  padding-top: 5%;
  background-color: #f4f3ed;
  padding-bottom: 5%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%; /* Necessary for page alignment; prevent slide from running off page 8 Aug */
  height: 100%;  /* Necessary to keep container 100% tall for elements */
}



.slide-height-short {
  height: 650px;
}


.hr-header-dark {
    width: 10%;
    border: 1px solid #32877e;
    margin: 2px auto;
}

.header-container1 {
  margin-bottom: 5%;
}

.header-container1 {
  margin-bottom: 1%;
}

.header-container2 {
  padding: 0;
  /* height: 100px;  /* top container needs to have height specified or else children will run all over */
  /*width: 100%; */
}

.header-table-container1 {
  margin-bottom: 0;
}

.header-container-pic {
  padding-left: 0;
  padding-right: 0;
  height: 100px;  /* top container needs to have height specified or else children will run all over */
  width: 100%;
}

.titlewrapper1 {
  padding-left: 10%;
  padding-right: 10%;
  width: 100%;
}

.light-header-font {
  font-family: 'roboto';
  font-size: 2rem;
  font-weight: normal;
  color:  #f4f3ed;
}

.light-header-sub-font {
  font-family: 'roboto';
  font-size: 1.7rem;
  font-weight: normal;
  color:  #f4f3ed;
  margin-bottom: 0;  /* the <p> element adds a margin, so removing it here*/
}


.dark-header-font {
  /* padding-top: 0; /* darkheader should be inside a container, and padding=0 keeps it centered in the parent container */
 /* padding-bottom: 0;
  margin-bottom: 0;
  width: 100%; */
  font-family: 'roboto';
  font-size: 2rem;
  font-weight: normal;
  color:  #32877e;
}

.dark-header-sub-font {
  font-family: 'roboto';
  font-size: 1.7rem;
  font-weight: normal;
  color:  #32877e;
  margin-bottom: 0;
}


.light-header-font2 {
  padding-bottom: 2%;
  width: 100%;
  font-family: 'roboto';
  font-size: 2rem;
  font-weight: normal;
  color:  #f4f3ed;

}

.dark-image-text-title {
  color: #32877e;
  line-height: 1.2rem; /* vertical spacing of lines of text */
  font-size: 1.2rem; /* the size of the text */
  word-wrap: break-word; /*took this from industries we serve */
}

.light-text-title {
  color: #f4f3ed;
  line-height: 1.2rem; /* vertical spacing of lines of text */
  font-size: 1.2rem; /* the size of the text */
  word-wrap: break-word; /*took this from industries we serve */
}

.textlightcolor {
  font-size: 1rem;
  color: #a499ba;
}

.textnumlight {
  color:#f4f3ed;
}

.textnumdark {
  color: #32877e;
}

.darkchecklist {
  color: #32877e;
  /* display: flex; */
  padding-top: 2.5%;
  justify-content: center;
  font-size: 1.1rem;
}

.text-2-col {
  justify-content: flex-start;
  text-align: left;
  line-height: 2;
}

/*
.lightchecklist {
  color: #5B5755;
  display: flex;
  justify-content: center;
  padding: 12px 5%;
}
*/

.li-style {
  margin: 18px 0;
}

.lighttext {
  font-family: 'roboto';
  font-size: 1rem;
  line-height: 1.7rem;
  font-weight: normal;
  color: #f4f3ed;
}

.lighttext1 {
  font-family: 'roboto';
  font-size: 1rem;
  line-height: 1.7rem;
  font-weight: normal;
  color: #f4f3ed;
}

.light-text1 {
  font-family: 'roboto';
  font-weight: normal;
  color: #f4f3ed;
}

.lighttext-title1 {
  font-family: 'roboto';
  font-size: 1.5rem;
  line-height: .5rem;
  font-weight: normal;
  color: #f4f3ed;
}

.whitetext {
  color: #f4f3ed;
  line-height: 1.5;
  font-size: 14px;
}

.bronzetext {
  color: #5B5755;
  line-height: 1.5;
  font-size: 14px;
}

.whitetextsm {
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: #f4f3ed;
}

.jobtitle {
  color: #a499ba;
  margin-bottom: 2%;
  text-align: center;
}

.bottompad {
  padding-bottom: 5%;
  padding-top: 5%;
}


.bottompad1 {
  padding-bottom: 2%;
}


.bottompad2 {
  padding-top: 2%;
  padding-bottom: 5%;
}


.hrlight {
  color: #fff;
  margin-top: 2%;
  margin-bottom: 2%;
}

.hrdark {
  color: #32877e;
  margin-top: 2%;
  margin-bottom: 2%;
  
}

.icons {
  width: 50%;
  margin: 5% auto 2%;
  padding-bottom: 7%;
}

.icon-md {
  width: 20%;
  margin: 5% auto 2%;
}

.icon-lg {
  width: 20%;
  margin: 1% auto 2%;
}

.checklist1 {
  margin: 0 5%;
  display: flex;
  justify-content: center;
  }


  .page75 {
  padding-top: 5%;
    width: 100%;
  }


  .iconlightbackground {
    background-color: #e7e3d2;
    width: 150px;
    height: 50px;
    border-radius: 10%;
  }

  .icondarkbackground {
    background-color: #32877e;
    width: 150px;
    height: 50px;
    border-radius: 10%;
  }


  .textinlightbox {
    font-size: .5rem;
    color: #5b5854;
    text-align: center;
  }


  .textindarkbox {
    font-size: .5rem;
    color: #e7e3d2;
    text-align: center;
    justify-content: center;
    margin: auto;
  }

.picchecklist {
  padding-top: 5%;
}


/* ============================================================================================*/
/* ===================================== LANDINGPAGE ==========================================*/
/* ============================================================================================*/

.landing-page-container {
  padding-right: 0;
  padding-left: 0;
}

.landing-page-title {
  padding: 2% 5%;
  padding-top: 100px;
  word-wrap: break-word;
  /*font-size: 1.5rem;*/
  font-family: 'Roboto';
  font-weight: 400;
  color: #025546;
  margin: auto;
}

.title-container {
  background-color: #fff;
  opacity: .85;
  padding-left: 0;
  padding-right: 0;
}

.page-title-font-format {
  padding-left: 2%;

}


.landingpage-trow-spacer {
  height: 80px;
}

.subtitle {
  font-family: 'Roboto';
  color: #025546;
  padding-top: 0;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  padding-left: 15%;
  padding-right: 15%;
  font-size: 1.5rem;
}

.subtitle1 {
  font-family: 'Roboto';
  color: #1a4541;
  padding-top: 1%;
  font-weight: 300;
  text-align: center;
  padding-left: 15%;
  padding-right: 15%;
  font-size: 1.5rem;
}

.containanchor {
  display: flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}


.button1-format {
  /*display: flex;  /*necessary for vertical alignment*/ 
  height: 150px;  /* changes the height of the row, but not the elements inside */
  text-align: center;
  vertical-align: middle;
  align-items: center;
  padding-left: 0;
  padding-right: 0;
}

/* Center vertically in button - use line-height and text-align: center*/

.landing-button {
  display: flex;  /* necessary for vertical alignment, inherited */
  background-color: #fff;
  opacity: .8;
  border-radius:0;
  line-height: 1.5;
  height: 100px;
  text-align: center;
  width: 95%;
  padding-left: 0;
  padding-right: 0;
  align-items: center;
  vertical-align: middle;
  justify-content: center; /*essential for horizontal alignment */
}





.landing-btn-p {
  margin-bottom: 0;
}

.button-center {
  text-align: center;
}

.landing-button:hover {
  background-color: #9dcb89;
  opacity: 1;
  /*border-color: #32877e;*/
  color: #fff;   /* landing page button hover font color */
}

.btn-outline-light {
  color: #1a4541;  /* landing page button font color */
  font-family: Roboto;
  border-color: #f4f3ed;
}

/* =============================================================================================*/
/* ======================== (LIGHT) OUR SOLUTIONS  ===================== -*/
/* =============================================================================================*/


.table-header-text {
  color: #ABCDCA;
  text-align: left;
  font-size: 2rem;
  margin-bottom: 0;
}


.darkicon {
  height: 30px;
  display: block;
}

.r-format6 {
  height: auto; /* removing auto to gain some more spacing */
  padding: 50px 0 20px 0;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.c-format6 {
  padding-left: 0;
  padding-right: 0;
}

.r-format10 {
padding: 0;
margin: 0px;
width: 100%;
}



.table-button {
  display: flex;  /* necessary for vertical alignment, inherited */
  /*background-color: #fff; */
  /*opacity: .8; */
  border-radius:30px; /* rounds the edges */
  /* line-height: 1.5; */ /* hoping the height of col contents will suffice */
  /*height: 150px; */ /*Again hoping line of col will suffice */
  /* text-align: center; */ /* probably redundant */
  width: 95%;  /* Makes space between buttons */
  /* padding: 10% 2% 10% 2%; */ /* keeps the content in the center removing to help center and expand items naturally */
  /*padding-right: 2%; */ /* might not be necessary */
  height: 175px;   /* specifies the height of the button */
  /* align-items: center; */ /* might not be necessary */
  /* vertical-align: middle; */ /* might not be necessary */
  justify-content: center; /*essential for horizontal alignment */
  border-color: #abcdca;
}



.table-button:hover {
  background-color: #abcdca;  /* backgound color of button on hover */
  opacity: 1;
  /*border-color: #32877e;*/
  color: #fff;   /* landing page button hover font color */
}

.col-format9 {
  display: flex;  /* necessary to allow vertical alignments */
  align-items: center;   /*keeps vertical center of icons */
  justify-content: center;  /*keeps horzonital alignment of icons */
  
  resize: none;  /*prevent div from auto-sizing to content */
  width: 200px;  /*prevent div from auto-sizing to content */
  padding: 0 5% 0 5%;  /*prevent div from auto-sizing to content */

}

.col-format1 {
  display: flex;  /* necessary to allow vertical alignments */
  align-items: center;   /*keeps vertical center of icons */
  justify-content: center;  /*keeps horzonital alignment of icons */
  padding: 0 5% 0 5%;
 
  resize: none;  /*prevent div from auto-sizing to content */
  width: 200px;  /*prevent div from auto-sizing to content */
}

.imagecontainer5 {
  /*background-color: #e7e3d2; */
  /*height: 100%; */
  /*height: 150px; */
  /*margin: 8px;*/
  /*margin-bottom: 0; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.iconinbox6 {
  height: 80px; 
  object-fit: fill; /* tried removing, doesn't work so well */
}

.textcontainer5 {
  display: flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1.2rem;
  color: #5b5854;
  /*padding-top: 2%; */ /*trying to clean the code, removing extra elements and find the real centering functions */
  text-align: center;
  word-wrap: break-word;
  width: 90px;
}

.table-sub-text {
  font-size: .8rem;
  line-height: 1rem;
}





/* ============================================================================================*/
/* ===================================== Our Infrastructure Portfolio ==========================================*/
/* ============================================================================================*/


.container-5col {
  margin-top: 5%;
}



.col5 {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;

}

.p-portfolio-tq {
  font-size: 1.5rem;
  color: #00A59B;
}

.p-portfolio-rz {
  font-size: 1.5rem;
  color: #c87c6d;
}

.p-portfolio-lm {
  font-size: 1.5rem;
  color: #98a66d;
}

.p-portfolio-or {
  font-size: 1.5rem;
  color: #cf9e5b;
}

.p-portfolio-vi {
  font-size: 1.5rem;
  color: #837b9a;
}

.p-portfolio-rd {
  font-size: 1.5rem;
  color: #c82d2d;
}

.imagewrapper1 {
  margin-top: 5%;
  margin-bottom: 5%;
  justify-content: center;
}

.imageformat1 {
  height: 225px;
}

.imageformat2 {
  height: 175px;
}


.button2-format {
  /*display: flex;  /*necessary for vertical alignment*/ 
  height: 50px;
  text-align: center;
  vertical-align: middle;
  align-items: center;
  padding-left: 0;
  padding-right: 0;
}

.button-format1 {
  display: flex;  /* necessary for vertical alignment, inherited */
  /*color: #f4f3ed;*/
  border-radius:30px;
  line-height: 2;
  /*height: auto;*/
  /*text-align: center; */
  width: 50%;
  padding-left: 0;
  padding-right: 0;
  /*align-items: center;*/
  /*vertical-align: middle;*/
  justify-content: center; /*essential for horizontal alignment */
}



.button-format1:hover {
  background-color:#a499ba;
  opacity: .6;
  /*border-color: #32877e;*/
  color: #32877e;
}


.button-text1 {
  color:#32877e;
  font-size: 1.7rem;
  font-weight: 400;
  align-items: center;
  vertical-align: middle;
}


/* ========================================================================================================= */
/* ============================= (DARK) DATA PROTECTION NLPD ============================================ */
/* ========================================================================================================= */



/* ============================================================================================ */
/* ======================(LIGHT) EXPERIENCE THE NEXT  (REMOVED) ================================== */
/* ============================================================================================ */



.full-widthpic6 {
  margin-top: 3%;
  width: 100%;
  /*height: 350px;*/
  object-fit: cover;  /*cover is for cropping and keeping the aspect ratio */
  /*object-position: 0 15%; */
  opacity: 1;
}

.image1-container {
  padding: 0;
}

.image2-container {
  padding-top: 5%;
}

.checklistpad {
  padding-bottom: 3%;
}

/* ============================================================================================ */
/* =================================== ORIGINAL SMART ICT ==================================== */
/* ============================================================================================ */

.r-format5 {
  height: auto;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

.text-container1 {
  height: 100%;
  width: auto;
  display: flex;
  align-items: center;
}

.text-container2 {
  height: 100%;
  width: auto;
  /* display: flex; */ /* removed because causing the entire div to move left, like to make it inline or something */ 
  align-items: center;
  margin-left: 20%;
  margin-right: 20%;
}

.iconinbox7 {
  height: 70%;
  width: auto;
}

.iconinbox9 {
  height: 65%;
  width: auto;  
}

.image-container4 {
height: 600px;
width: auto;
/* margin-top: 5%;*/  /*removed for XL Our network backbone, too much spacing and to clean up the formatting */
}

.row-format1 {
  height: 100%;
    margin-left: 0;
    margin-right: 0;
  padding-right: 0;
  padding-left: 0;
}

.image-container5 {
  margin-bottom: 0;
  margin-top: 5%;
  margin-left: 0;
  margin-right: 0;
  padding-right: 0;
  padding-left: 0;
}


.iconinbox8 {
  width: 85%;
  height: auto;
}

/* ============================================================================================*/
/* ============================= **ORIGINAL** BACKUP AS A SERVICE  ===========================*/
/* ============================================================================================*/

.collapse-button {
  color: #f4f3ed;
  border-radius:30px;
  line-height: 1.5;
  text-align: center;
  width: auto;
}

.collapse-button:hover {
  background-color: #fff;
  opacity: .6;
  border-color: #32877e;
  color: #32877e;
}

.btn-outline-violet {
  color: #ffffff;
  font-family: Roboto;
  font-weight: 400;
  font-size: 1.2rem;
  border-color: #32877e;
}

.card {
  background-color: #32877e;
}

.card-body {
  color: #f4f3ed;
}

/* ============================================================================================*/
/* ========================== SECURED COLLABORATION  FOR YOUR TEAMS ===============================*/
/* ============================================================================================*/




/* ===================  CAROUSEL ============================*/

.carouselparent {
  position: relative;
  width: 100%;
}

.carousel {
  padding-top: 0;
  padding-bottom: 0;
  transition: 0s ease-in-out 2s;
  /* interval: 100ms; unknown property */
}

/* to add slides to the carousel */
.carousel-inner {
  position: relative;
  width: 100%;
  margin: auto;
}

/* specifies content of each slide */
/*
.carousel-item {
  position: relative;
  margin: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}
*/

/*
.carousel-fade .carousel-item {
  opacity: 0.2;
  transition-property: opacity;
  transform: none;
}
*/

.carousel-item {
  transform: transition 10s ease-in-out;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  transition: opacity 0s 1s;
}

/*
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  z-index: 1;
  opacity: .9;
}
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  z-index: 5;
  opacity: 0.5;
  transition: opacity 0s 0.6s;
}
*/

/* .carouselimage {
  width: 600px;
  height: 270px;
}
*/

.carouselimage {
  width: 100%;

  object-fit: cover;
  object-position: 0 5%;
  opacity: 1;
}


.carousel-indicators {
  position: relative;
  bottom: 10px;
  /*right: 0;
  bottom: 0;
  left: 0; */
  margin: auto;
  opacity: .5;
  width: 27px;
  height: 10px;
  background-color: #5b5854;
  bottom: 10px;
  z-index: 5;
  /*display: flex; */
  /*justify-content: center;
  padding: 0;
  /*margin-right: 15%;
  margin-bottom: 1rem;
  margin-left: 15%; */
  /*list-style: none; */
}



/*
.carousel-indicators li {background-color: red;}
.carousel-indicators li.active {background-color: blue;}
*/

.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: red;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

/*
.carousel-control-prev {
  left: 1px;
}

.carousel-control-next {
  right: 1px;
}
*/

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: 0;
  background-size: 100% 100%;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


.wrapper10 {
  margin-top: 8%;
}

/* ============================================================================================*/
/* ==============================  TELEPHONY SOLUTIONS ========================================*/
/* ============================================================================================*/

.container-2-col-text {
  padding-top: 5%;
}

.col-space {
  padding-top: 2%;
}

.container-movementl {
  margin-left: 10%;
  padding-top: 50px;

}

.container-movementr {
  margin-left: 5%;
  padding-top: 50px;

}

.image-container7 {
  margin-top: 5%;
}

.image-container6 {
  height: 400px;
  width: auto;
  margin-top: 0;
  }
  

.iconinbox10 {
  width: 65%;
  height: auto;
}





/* ============================================================================================*/
/* ===================  OUR HOME OFFICE COLLABORATION SOLUTIONS ============================*/
/* ============================================================================================*/


.longtextpadding {
  padding-left: 8%;
  padding-right: 8%;
}

.oneimageinrow {
  width: 275px;
  margin: auto;  /* necessary to center horizontally */
  /*border: 2px dotted orange;*/
}

.imagewrapper1 {
  display: flex;
  /*justify-content: center;
  align-items: flex-end; */
  height: 50%;
/*border: 3px dotted blue; */
}

.imagetext2 {
  font-size: .8rem;
  color: #f4f3ed;
  line-height: 1rem;
}



.colpad7 {
  padding-top: 5%;
  padding-bottom: 5%;
}



.threeiconinrow {
  justify-content: center;
}

.twoiconinrow {
  justify-content: center;
  align-content: center;
}


.imagecontainer1 {
  height: 90px;
  margin-bottom: 0;
  vertical-align: bottom;
  display: flex;
  align-items: flex-end;
}

.imagecontainer2 {
  height: 90px;
  margin-bottom: 0;
  vertical-align: bottom;
  display: flex;
  align-items: center;
}

.imagecontainer3 {
  height: 90px;
  margin-bottom: 0;
  vertical-align: bottom;
  display: flex;
  align-items: center;
}

.imageincol1 {
  display: flex;
  /*justify-content: center; */
  align-items: flex-end;
  align-content: flex-end;
  margin: auto;  /* keeps image centered horizontally */
  /*align-self: center; */
  margin-bottom: 0;
  vertical-align: bottom;
}

.imageincol2 {
  display: flex;
  justify-content: center;
  text-align: center;
  margin: auto;
  align-self: center;
  margin-bottom: 0;
  vertical-align: bottom;
}

.imageincol3 {
  display: flex;  /*needed to keep image above the next container */
  justify-content: center;
  text-align: center;
  margin: auto;

  margin: auto;
  margin-bottom: 0;
  vertical-align: bottom;
}


.imagesizer1 {
  height: 100%;
  margin: auto;
  margin-bottom: 0;
  vertical-align: bottom;
}

.imagesizer2 {
  height: 80%;
  margin: auto;
  margin-bottom: 0;
  vertical-align: bottom;
}

.imagesizer3 {
  height: 65%;
  margin: auto;
  margin-bottom: 0;
  vertical-align: bottom;
}

.textcontainer {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 24px;
  padding-bottom: 3%;
}


.textcontainer4 {
  padding: 0;
  /* display: flex; <! this prevents centering of text -->
  align-items: center; <!-- this is a function of display: flex */
  text-align: center;
  /* height: 100%; doesn't seem to affect the height of the container*/ 
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* display: block; <!-- not necessary for "col" I think --> 
  line-height: 1em; 
  max-height: 2em; a x number of line to show (ex : 2 line)  */
}

.lighttextheader {
  color: #a499ba;
  margin-bottom: 20%;
}

/* =======================================================================================================*/
/* =========================================== OUR COMPANY ============================= */
/* ========================= ALL CSS FOR THIS SLIDE IS HERE AND IN @MEDIA =========================================*/

.light-container {
  width: 100%;
  background-color: #f4f3ed;
  padding-bottom: 10%;
}

.icons {
  width: 50%;
  margin: 5% auto 2%;
  padding-bottom: 7%;
}

.headerquotes {
  color: #1a4541;
  text-align: center;
  margin-bottom: 5%;
  font-size: 2rem;
}

.hrabovetable {
  margin-bottom: 7%;
}

.whoweare {
  background-color: #abcdca;
}

.tableheader {
  color: #1a4541;
  text-align: center;
  font-size: 1.5rem;
  padding: 2%;
  margin-top: 10%;
  margin-bottom: 10%;
}

.hrintable {
  border-top: solid #3fa99d;
}

.tabledetailtext {
  text-align: center;
  padding: 6%;
  line-height: 1.7;
}





/* ============================================================================================*/
/* =========================== INFRASTRUCTURE ARCHITECTURE ============================= */
/* ============================================================================================*/


.p-justified {
  padding-top: 2%;
  text-align: center;
  line-height: 1.6rem;
}

.p-justified1 {
  padding-top: 2%;
  text-align: center;
  line-height: 1.6rem;
}

.p-justified-title {
  padding-top: 0;
  text-align: center;
  line-height: 1.5rem;
}

.beigebox {
  background-color: #e7e3d2;
}

/* ============================================================================================*/
/*============================= SYSTEM INSTALLATION & CONFIGURATION ========================== */
/* ============================================================================================*/


.full-widthpic4 {
  width: 100%;
  height: 300px;
  /*not specified in full-widthpic2 */
 /* object-fit: cover;  /* contain for images that need to be cropped but preserve aspect ration */
  object-position: 0 20%;
  opacity: 1;
}

.image4-container {
  padding-top: 0;
}

.p-format4 {
  padding-top: 6%;
  padding-bottom: 2%;
  text-align: center;
  line-height: 1.6rem;
  font-size: 1.2rem;
  margin-bottom: 0;

}



/* ============================================================================================*/
/*====================================== Cloud & Automation ========================== */
/* ============================================================================================*/

.full-widthpic1 {
  padding-top: 40px;
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: 0 40%;
  opacity: 1;
}

/* ============================================================================================*/
/*====================================== FULL-TIME SOLUTIONS SUPPORT  ========================== */
/* ============================================================================================*/


.full-widthpic3 {
  padding-top: 0;
  margin-top: 40px;
  width: 100%;
  height: 450px;
  object-fit: cover;
  object-position: 0 40%;
  opacity: 1;
}

.emaillink {
  color: #32877e;
  font-size: 1rem;
  text-align: center;
}

.emaillink:hover {
  color: #a499ba;
}

/* ============================================================================================*/
/* ====================================== COMPLETE SYSTEM BACKUP & SECURITY  ========================== */
/* ============================================================================================*/


.full-widthpic5 {
  padding-top: 0;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: 0 50%;
  opacity: 1;
}

/* ============================================================================================*/
/* ============================== (LIGHT) INDUSTRIES WE SERVE ================================ -*/
/* ============================================================================================*/

.spacetitleicon {
  padding-top: 5%;
}

.spacetitleicon1 {
  padding-top: 5%;
}

.spacebelow {
  padding-bottom: 5%;
}


.violetbox {
  background-color: #a499ba;
  width: 250px;
  height: 100px;
  display: flex;
  margin: auto;
  border-radius: 10%;
  align-items: center;
}


.testcontainer {
  border: 2px solid red;
  height: 150px;
  margin-bottom: 2%;
}

.testcontainer1 {         /*HAVE TP CHANGE THIS */

border: 2px dashed orange;
  height: 125px;          /*HAVE TO CHANGE THIS */
  margin-bottom: 2%;   /*HAVE TP CHANGE THIS */
  align-items: center;
}

.iconcontainer {
  border: 2px solid red;
  height: 150px;
  margin-bottom: 2%;
}

.imagecontainer4 {
 /* background-color: #a499ba;*/
  width: 100%;
  margin-bottom: 0;
  display: flex;
  align-items: flex-end;
}

.heightsizer {
  height: 25px;
}

.iconinbox {
  width: 90px;
  height: 90px;
  align-items: center;
  margin: auto;
}

.iconinbox1 {
  height: 60px;
  object-fit: fill;
}

.iconinbox2 {
  width: 100%;
  object-fit: fill;
}

.iconinbox3 {
  width: 100px;
  object-fit: cover;
}

.center2icons {
  justify-content: center;
}

.space {
  padding-top: 5%;
}

 .darktext1 {
   font-size: 1rem;
   color: #32877e;
 }

.space2 {
  margin-bottom: 0;
  padding-bottom: 5%;
}



/* ============================================================================================*/
/* ================================= (LIGHT) OUR SERVICES  =================================== -*/
/* ============================================================================================*/

/*
.sidespace {
  padding: 0 10%;
}
*/

/*
.iconnobackgroundbox {
  border-color:  #5b5854;
  width: 150px;
  height: 50px;
  border-radius: 10%;
}
*/

/*
.lighticon {
  height: 30px;
}
*/

/*
.textinbox {
  display: inline;
    color: #5b5854;
    font-size: .5rem;
}
*/

/*
.iconalign {
  display: flex;
  align-items: center;
}
*/

/*
.testcontainer {*/
/*  background-color: pink; */
 /* border: 2px solid red;
  height: 150px;
  margin-bottom: 2%;
}
*/

/*
.textwrapper {
  width: 100%;
}
*/

/*
.testrow1 {
  display: flex;
  align-content: flex-start;
  border: 2px solid yellow;
  height: 100%;
}
*/

/*
.wrapper7 {
  padding-top: 12px;
}
*/

/*
.leftimagecontainer {
 border: 2px solid blue;
}
*/

.spacetitleicon2 {
  padding-left: 500px;
  padding-right: 500px;
}

.r-format2 {
  margin-top: 10px;  /*adds space to the top of elements (images and text) (col) */
  margin-bottom: 20px;  /*adds space to the  elements (images and text) (col) */
  margin-left: 5px;  /*adds space to the  elements (images and text) (col) */
  margin-right: 5px;  /*adds space to the elements (images and text) (col) */
  /*display: flex;
  align-content: center;*/ /*doesnt seem to work */
}

.r-format3 {
  margin-bottom: 0;
  padding-bottom: 50px;
}

.iconinbox5 {
  height: 100%; /*image scaling; all images are the same height in Gimp/Inkscape */
  /*align-items: center;*/ /*doesn-t seem to center*/
  /*margin: auto;*/ /*doesnt seem to center*/
}

.iconinbox11 {
  height: 100%; /*image scaling; all images are the same height in Gimp/Inkscape */
  /*align-items: center;*/ /*doesn-t seem to center*/
  /*margin: auto;*/ /*doesnt seem to center*/
}

/*
.imagecontainer6 {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
}
*/

.spaceme {
  padding-top: 5%;
  padding-bottom: 5%;
}

.imagecontainer9 {
  /*height: 25%; */
  /*width: 25%;*/
  /*margin: auto;*/ /*doesn-t seem to work*/
  margin-bottom: 10px;
  padding: 0;
  vertical-align: top;
  /*align-items: center;*/ /*doesn-t seem to work*/
  /*display: flex;
  align-items: center;
  justify-content: left;*/
}


/* ============================================================================================*/
/* ==================================== Our Partners ============================= */
/* ============================================================================================*/

.row-format2 {
  margin: 50px 0 50px 0;
  display: flex;
  /*justify-content: center;*/ /*may not need to center everything */
  }

.r-format13 {
  margin-left: 0;
  margin-right: 0;
}

.logocontainer {
  /*height: 150px; */      /* Specifying the height makes it != 100% */
  /*width: 110px; */ /* stated it should be col-3, so removing this*/
  display: flex;
  /* display flex and justify-content: center are necessary for centering the image */
  align-items: center;   /* centers horizontally the logo in the column */
  /* align-items: center;  */  /* seems to do nothing here */
  /* text-align: center; */ /*doesn't seem to do anything */
  position: relative;
  }

  .logocontainer1 {
    /*height: 150px; */      /* Specifying the height makes it != 100% */
    /*width: 110px; */ /* stated it should be col-3, so removing this*/
    display: flex;
    /* display flex and justify-content: center are necessary for centering the image */
    justify-content: start;   /* centers horizontally the logo in the column */
    /* align-items: center;  */  /* seems to do nothing here */
    /* text-align: center; */ /*doesn't seem to do anything */
    /* height: 100px; */ /* have to add "height" to vertically align */
    /* align-items: center; */ /* have to add "height" to vertically align */
    /* align-content: center;*/ /* have to add "height" to vertically align */
    /* vertical-align: middle; */ /* have to add "height" to vertically align */
    position: relative;
    padding-left: 5%;
    }
  

    .partner-logo1 {
      width: 120px;
    }

    .partner-logo2 {
      width: 200px;
      flex-wrap: wrap;  /*doesnt work */
      display: flex;  /*doesnt work */
      align-content: center;  /*doesnt work */
      vertical-align: middle;  /*doesnt work */


    }

    .partner-logo3 {
      width: 100px;
    }

    .partner-logo4 {
      width: 120px;
    }


  .textcontainer1 {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 10px;
    padding-right: 0;
  }


  .textcontainer2 {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 10px;
    padding-right: 50px;
  }

  .textcontainer3 {
    text-align: justify;
    text-justify: auto;
    padding-right: 0;
  }

  .r-format10 {
    padding-right: 0;
  }


  .partnername {
    color: #32877e;
    margin-bottom: 3%;
    text-align: left;
    font-size: 1.5rem;
    display: flex;
  }

  .status-text {
    color: #32877e;
    text-align: left;
    font-size: 1.2rem;
  
  }

  .partnertext {
    text-align: left;
  }



/* =================== CSS for Partners Solely  ===================  */

.pagecontainer {
  height: 725px;
}

.page-container {
  max-width: 1400px;  /* contains the pages to 1400px */
  text-align: center;
  margin: auto;
  justify-content: center;
}

.pubs{
  /*text-decoration: underline; */
  color: #e9e7dd;
  line-height: 1.5rem;
}


/*                CSS for Partners Solely                 */

.normal{
  font-weight: 400;
}

.light{
  font-weight: 100;
}

h1 {
  font-family: 'Roboto';
  font-weight: 400;
  color: #e9e7dd;
  margin: auto;
}

h2 {
  font-family: 'Roboto';
  color: #e9e7dd;
  padding-top: 0px;
  margin: auto;
}

h3 {
  font-family: 'Roboto';
  color: #e9e7dd;
}


hr {
  width: 10%;
  border-top: solid #5b5854;
  margin: 2px auto;
}


a {
  text-decoration: none;
}

a:hover {
  color: #eaf6f6;
}




/* ============================================================================================*/
/* ==================================== Call to Action - CONTACT US ============================= */
/* ============================================================================================*/


.r-format7 {
  margin-top: 10%;

}

.button-format3 {
  margin-top: 2%;
  padding-top: 3%;
  display: flex;
  justify-content: center;
}

/*
.lightbox {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f3ed;
  height: 100px;
  width: 25%;
}
*/

.cta-button {
  color: #f4f3ed;
  border-radius:30px;
  line-height: 100px;
  text-align: center;
  width: 90%;
  margin-bottom: 20px;
}


.cta-button:hover {
  background-color: #fff;
  opacity: .6;
  border-color: #32877e;
  color: #32877e;
}

/* ============================================================================================*/
/* ==================================== (DARK) FOOTER  ===============================*/
/* ============================================================================================*/

.r-format8 {
margin-left: 8%;
}

.footeralign {
  padding: 3% 10%;
}

.footerslide {
  background-color: #32877e;
  padding-top: 5%;
  padding-bottom: 5%;
  width: 100%;
  font-size: 2rem;
}

.bottom-container {
  background-color: #025546;  /* 11.23 */
width: 100%;
}

.footerrow {
margin: auto;
}

.footertitles {
  color: #abcdca;
  font-size: 14px;
  padding-bottom: 1%;
  text-align: left;
}

.footertitlesanimate {
    color: #abcdca;
    margin-left: 0;
    text-decoration: none;
}

a.footertitlesanimate:hover {
  color: #3fa99d;
}

a.footertextanimate {
  color: #f4f3ed;
}

.footertext {
  color: #f4f3ed;
  text-align: left;
  font-size: 12px;
}

.footertitlepad {
  padding-top: 18px;
}

.social-icon {
  padding: 0 10px;
  color: #ccc;
}

.acknowledgments {
  color: #ccc;
  font-size: .2rem;
}

a.one:link {
  color:#ccc;
  }

a.one:visited {
  color:#ccc;
}

a.one:hover{
  color:#fff;
}

hr.footerhr-top {
  width: 90%;
  border-top: 3px solid #abcdca;
  margin-bottom: 5%;
}


hr.footerhr-bottom {
  width: 90%;
  border-top: 3px solid #abcdca;
  margin-top: 2%;
  margin-bottom: 5%;
}


hr.footerhr {
  width: 90%;
  border-top: 2px dotted #abcdca;
  margin-top: 12px;
}

.footer-link {
  margin: 0, 1px;
}

.social-icons {
  justify-content: flex-start;
  text-align: left;
}


.copyright {
  color: #abcdca;

  font-size: 12px;
  margin-top: 15px;
}


/* @media Queries */

/* ======================================================================================================================================== */
/* =====================================  @media XXXL 5K, iMAC 5K LARGEST ON MARKET UP TO 5120PX  START  ================================== */
/* ========================================================================================================================================= */

@media only screen and (min-width: 3841.00px) and (max-width: 5120.99px) {
  
  body {
    background-image: url("../images/maintenance/landingpage-xl.jpg"); 
  }

  .landing-page-container {
    height: 1700px;
  }

  .darkslide2 {
    /* background-color: #32877e; */

    width: 100%;  /* Necessary for page alignment; prevent slide from running off page 8 Aug */
    height: 2000px; /* Necessary to keep container 100% tall for elements */  /* 11.23 */
    /*font-size: 2rem;*/ /*um, dont think the font size should be specified here. */
  }

}

/* ==================================================================================================================================== */
/* =====================================  @media XXL EXTRA LARGE MONITORS, ULTRA HDTV 4K 2201-3840PX PLUS START  ================================== */
/* ===================================================================================================================================== */


@media only screen and (min-width: 2201.00px) and (max-width: 3840.99px) {
  body {
    background-image: url("../images/maintenance/landingpage-xl.jpg");

  }

  .landing-page-container {
    height: 1500px;
  }

  .page-container2 {
    max-width: 1400px;  /* contains the pages to 1400px */
    height: 1700px;  /* 11.23 adjusts the height of the white space between header and footer */
  }


/* ========================  @media XXL GENERAL STYLES =========================================== */

.lightslide {
  padding-top: 5%;
   /* padding-left: 0;
    padding-right: 0; */
    /* width: 100%; *//* Necessary for page alignment; prevent slide from running off page 8 Aug */
    /*height: 100%; */ /* Necessary to keep container 100% tall for elements */
}

.darkslide {
  padding-top: 5%;
  padding-bottom: 10%;
  /* font-size: 2rem; */ /* dont think the font size should be specified here */
}

.darkslide2 {
  /* background-color: #32877e; */

  width: 100%;  /* Necessary for page alignment; prevent slide from running off page 8 Aug */
  height: 1800px; /* Necessary to keep container 100% tall for elements */  /* 11.23 */
  /*font-size: 2rem;*/ /*um, dont think the font size should be specified here. */
}

.header-container1 {
  margin-bottom: 5%;
}

.header-container-pic {
  height: 100px;  /* top container needs to have height specified or else children will run all over */
}

.light-header-font {
  font-size: 3rem;
  /* margin-bottom: 0;
  padding-top: 12px;
  padding-left: 5%;
  padding-right: 5%; */
}

.dark-header-font {
  font-size: 3rem;
  /*padding-top: 0; */
}
  
.light-header-sub-font {
  font-size: 2rem;
}

.dark-header-sub-font {
  font-size: 2rem;
}

.dark-image-text-title {
  line-height: 1.5rem; /* vertical spacing of lines of text */
  font-size: 1.5rem; /* the size of the text */
}

.light-text-title {
  line-height: 1.5rem; /* vertical spacing of lines of text */
  font-size: 1.5rem; /* the size of the text */
}

.textlightcolor {
  font-size: 1.2rem;
}

.darkchecklist {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.text-2-col {
  justify-content: flex-start;
  text-align: left;
}

/*
.lightchecklist {
  padding: 12px 5%;
  font-size: 1.5rem;
  line-height: 1.5rem;
}
*/

.light-header-font2 {
padding-bottom: 2%;
width: 100%;
font-family: 'roboto';
font-size: 2.5rem;
font-weight: normal;
color:  #f4f3ed;
}

.whitetext {
  line-height: 1.8;
  font-size: 1.6rem;
}

.bronzetext {
  line-height: 1.8;
  font-size: 1.6rem;
}

.whitetextsm {
  font-size: 1.5rem;
  line-height: 1.5rem;
}


.jobtitle {
  margin-bottom: 2%;
  text-align: center;
  font-size: 1.3rem;
}

/* ========================  @media XXL LANDINGPAGE =================== */

.navbar {
  padding-top: 2%;
}

.nav-bar-logo {
  height: 50px;
  width: 50px;
  margin-left: 30px;
  margin-right: 30px;
}

.nav-bar-menu-items {
  font-size: 1.2rem;
  font-weight: 300;
}

.title-container {
  margin-top: 1%;
}

.title-spacer {
  height: 5000px;
}

.landing-page-title {
  padding-top: 300px;
  padding-bottom: 2%;
 /* font-size: 3.8rem;  IT Solutions*/
  font-size: 4rem;  /*longer wording*/
  font-weight: 400;
}

.subtitle {
  font-size: 2.8rem;
  font-weight: 200;
  padding-top: 1%;
}

.subtitle1 {
  font-size: 2.8rem;
  font-weight: 300;
  padding-top: 1%;
}

.container-buttons {
  padding-left:0;
  padding-right: 0;
  margin-top: 10%;
 margin-bottom: 2%;
}

.rowspace {
  padding-bottom: 2%;
  height: 600px;   /* this doesn't seem to change the row height */
}


.landingpage-trow-spacer {
  height: 40px;
}

.landing-button {
  border-radius:30px;
  line-height: 1.2;
  height: 150px;   /* changes the height of the button */
  width: 95%;  /*the percentage of the parent container */
  margin-bottom: 20px;
}




.landing-button-text {
  font-size: 2rem;
  font-weight: 400;
  align-items: center;
  vertical-align: middle;
}

.landing-button-subtext {
  font-size: 1.5rem;
}


.button1-format {
  padding-top: 2%;
}


/* ========================  @media XXL (LIGHT) nLPD ======================================================= */

.lawsectionformat {
  padding-bottom: 2%;
}

.spacetitleicon3 {
  padding: 0;
  padding-top: 10%;
  padding-bottom: 10%;
}

.lawcontainerformat {
  margin-top: 200px; /*the space between the bottom of the 3rd header and the top of the picture, use margin and not padding*/
  margin-bottom: 5%;
}

.r-format2x3 {
  margin: 5px;  /*adds space between elements (col) */
  display: flex;
  align-content: center;
}

.r-format2x3-1 {
  margin-right: 2%;
  margin-left: 2%;
  padding-bottom: 50px;
}


.textcontainer4 {
  padding: 0;
  /*display: flex;  <!-- display flex interferes with text-align: center ->
  align-items: center; align-items: center is for display: flex */
  text-align: center; /* aligns text under image */
  word-wrap: break-word; 
} 




/* ========================  @media XXL (LIGHT) EXPERIENCE THE NEXT TECHNOLOGY =================== */


.image1-container {
  padding-top: 5%;
  padding-bottom: 5%;
}

.full-widthpic6 {
  margin: 0;
  width: 100%;
  height: 450px;
  object-fit: cover;
  object-position: 0px 30%;
}

/* =================================   @media XXL SMART ICT ==================================== */



.r-format5 {
  height: 100%;
  width: auto;
}

/*
.text-container1 {
  height: 100%;
  width: auto;
}
*/

.iconinbox7 {
  height: 100%;
  /*width: auto;*/
}

.image-container4 {
height: 900px;
width: auto;
margin-top: 5%;
}

.row-format1 {
  height: 100%;
}

.image-container5 {
 margin: 0;
 margin-top: 2%;
 padding-right: 0;
 padding-left: 0;
}

.iconinbox8 {
  width: 80%;
  height: auto;

}

/* ========================  @media XXL (DARK) BACKUP AS A SERVICE =============================== */


/* =========================== XXL CLOUD & AUTOMATION ============================= */
.full-widthpic1 {
  padding-top: 8%;
  height: 550px;
  width: 1600px;
  object-fit: cover;
  object-position: 0 40%;
}

/* ========================  @media XXL (LIGHT) REAL COLLABORATION FOR YOUR TEAMS =============================== */

.carouselimage {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: 0 5%;
  opacity: 1;
}

/* ========================  @media XXL (DARK) OUR HOME OFFICE COLLABORATION SOLUTIONS ============================*/

/* ========================  @media XXL TELEPHONY SOLUTIONS ============================*/


.image-container6 {
  height: 600px;
  width: auto;
  margin-top: 5%;
}

.image-container7 {
  margin-top: 0;
  height: 550px;
}

.iconinbox9 {
  width: auto;
  height: 90%;
}


/* ========================  @media XXL (LIGHT) IT, Collaboration & Networking INFRASTRUCTURE ARCHITECTURE DESIGN =============================== */

.p-justified1 {
  padding-top: 2%;
  line-height: 2rem;
  font-size: 1.5rem;
}


/* ========================  @media XXL (LIGHT) OUR COMPANY ================================= */


.icons {
  width: 50%;
  margin: 6% auto 1%;
  padding-bottom: 4%;
}

.headerquotes {
  font-size: 1.8rem;
  line-height: 2;
  padding-bottom: 0;
}

.row-pad1 {
  padding: 5%;
}

.tableheader {
  font-size: 1.8rem;
}

.tabledetailtext {
  font-size: 1.2rem;
}


/* ========================  @media XXL (LIGHT) SYSTEM INSTALLATION & CONFIGURATION =============================== */

.full-widthpic4 {
  padding-top: 0;
  height: 450px;
  object-fit: cover; 
  object-position: 0 0%;
}

.p-format4 {
  font-size: 2rem;
  line-height: 2.8rem;

}


/* ========================  @media XXL (DARK) CLOUD & AUTOMATION =========================================== */

.full-widthpic1 {
  margin-top: 3%;
  padding-top: 0;
  height: 450px;
  width: 100%;
  object-fit: cover;
  object-position: 0 45%;
  opacity: 1;
}

.image3-container {
  padding: 0;

}


.light-subheader-text{
  padding-top: 0;
  padding-bottom: 1%;
  font-size: 2rem;
  line-height: 2.5rem;
}

.p-justified-title {
  padding-top: 5%;
  font-size: 2rem;
  line-height: 2.5rem;
}


/* ========================  @media XXL (LIGHT) FULL-TIME SOLUTIONS SUPPORT =================================== */

.full-widthpic3 {
  margin-top: 3%;
  padding-top: 0;
  height: 450px;
  width: 100%;
  object-fit: cover;
  object-position: 0 0%;
}

.p-format1 {
font-size: 1.5rem;
line-height: 1.5rem;
}

.emaillink {
  font-size: 1.5rem;
}




/* ========================  @media XXL (LIGHT) COMPLETE SYSTEM BACKUP & SECURITY =================================== */

.full-widthpic5 {
  margin-top: 2%;
  padding-top: 0;
  height: 450px;
  object-fit: cover;
  object-position: 0 0%;
}

.pad5 {
  padding-bottom: 2%;
  padding-top: 5%;
}

.p-format5 {
  padding-top: 5%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.5rem;
  
}

/* ========================  @media XXL (LIGHT) INDUSTRIES WE SERVE ===================================== */

.r-format1{
  margin: 0;
}

.imagecontainer4 {
  /*background-color: #a499ba;*/
  /* width: 100%;  Remove because prevents col-xs-6 */
  margin-top: 10%;
  margin-bottom: 2%;
  display: flex;
  align-items: flex-end;
}

.spacetitleicon {
  padding-top: 0;
}

.container-2-col-text {
  padding-top: 0;
}

.c-format2 {
  padding: 0;
  padding-top: 5%;
  margin-left: 1%;
  margin-right: 1%;
}


.iconinbox {
  width: 90px;
  height: 90px;
  align-items: center;
  margin: auto;
}

.darktext1 {
  font-size: 1.5rem;
}

.c-format2 {
  padding: 0;
}
/* ========================  @media XXL (DARK) WE PROVIDE ALL CLOUD-BASED SOLUTIONS ==================================== */


.lighttext {
  font-size: 1.5rem;
  line-height: 2;
}


.r-format4 {
  height: 550px;
}

.r-format5 {
  height: 80px;
}


/*
.r-format3 {

width: 100%;
}
*/

.imagecontainer5 {
  /*height: 25%; */
  margin-bottom: 10px;
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  /*justify-content: left; */
}

.imagecontainer8 {
  /*height: 10%; */
  margin-bottom: 0;
  padding-left: 0;
  /*display: flex;
  align-items: center;
  justify-content: center; */
}



.iconinbox6 {
  width: 90px;  /*changes actual size of image, the div wrapper auto sizes to it */
  /*height: 90px; */ /*changes actual size of image, the div wrapper auto sizes to it */
  align-items: center;
  margin: auto;
}

.textcontainer5 {
  font-size: 1.2rem;
  line-height: 1.2rem;
  color: #5b5854;
  word-wrap: break-word;
  width: 200px;
  text-align: center;
  padding-top: 0;
  padding-left: 0;
  vertical-align: center;
}



/* ========================  @media XXL (LIGHT) OUR SERVICES ======================================================= */

.r-format2 {
  margin-top: 10px;  /*adds space to the top of elements (images and text) (col) */
  margin-bottom: 20px;  /*adds space to the  elements (images and text) (col) */
  margin-left: 5px;  /*adds space to the  elements (images and text) (col) */
  margin-right: 5px;  /*adds space to the elements (images and text) (col) */
  /*display: flex;
  align-content: center;*/ /*doesnt seem to work*/
}

.r-format3 {
  margin-bottom: 0;
  padding-bottom: 50px;
}

.textcontainer4 {
  padding: 0;
  /*display: flex;  <!-- display flex interferes with text-align: center ->
  align-items: center; align-items: center is for display: flex */
  text-align: center; /* aligns text under image */
  word-wrap: break-word; 
} 



.iconinbox5 {
  width: 100px;  /*changes actual size of image, the div wrapper auto sizes to it */
 
}

/* ========================  @media XXL (DARK) ADVANCE YOUR BUSINESS TRANSFORMATION =================================== */


.full-widthpic2 {
  margin-top: 0;
  height: 350px;
  width: 100%;
  object-fit: cover;
  object-position: 0px 10%;
  opacity: 1;
}

.lighttext-title1 {
  font-family: 'roboto';
  font-size: 1.8rem;
  line-height: 1.8rem;

}



/* ==================================== @media XXL Our Partners ============================= */


.textcontainer1 {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 10px;
  padding-right: 0;
}

.textcontainer2 {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 10px;
  padding-right: 50px;
}

/* ========================  @media XXL CONTACT US ============================================================== */

.cta-button {
  color: #f4f3ed;
  font-size: 1.8rem;
  margin-top: 10%;
  border-radius:30px;
  line-height: 100px;
  text-align: center;
  width: 70%;
  margin-bottom: 20px;
} 

/* ========================  @media XXL FOOTER =============================================== */

.lighttextheader {
  margin-bottom: 5%;
}


}






/* ================================================================================================================================== */
/* =====================================  @media XL ***LANDSCAPE*** LARGE MONITORS, Thunderbird, 1600-2200PX START  ================================== */
/* =================================================================================================================================== */

@media only screen and (min-width: 1601.00px) and (max-width: 2200.99px) and (orientation: landscape) {
	.navbar .nav-item .dropdown-menu{ display: none; }
  .navbar .nav-item:hover .nav-link{color: #fff; }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
  .navbar-brand {text-align: left; }

  body {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
    background-image: url(../images/maintenance/landingpage-default.jpg);
  }

  .landing-page-container {
    height: 1000px;
  }

  .page-container2 {
    max-width: 1400px;  /* contains the pages to 1400px */
    height: 1300px;  /* 11.23 adjusts the height of the white space between header and footer */
  }



/* ========================  @media XL ***LANDSCAPE*** GENERAL STYLES =========================================== */

.lightslide {
  padding-top: 5%;
   /* padding-left: 0;
    padding-right: 0; */
    /*width: 100%;*/ /* Necessary for page alignment; prevent slide from running off page 8 Aug */
    /*height: 100%; */ /* Necessary to keep container 100% tall for elements */
}

.darkslide {
  padding-top: 5%;
  padding-bottom: 10%;
  /* font-size: 2rem; */ /* dont think the font size should be specified here */
}

.darkslide1 {
  padding-top: 5%;
  padding-bottom: 0;
  /* font-size: 2rem; */ /* dont think the font size should be specified here */
}

.darkslide2 {
  /* background-color: #32877e; */

  width: 100%;  /* Necessary for page alignment; prevent slide from running off page 8 Aug */
  height: 1800px; /* Necessary to keep container 100% tall for elements */  /* 11.23 */
  /*font-size: 2rem;*/ /*um, dont think the font size should be specified here. */
}

.header-container1 {
  margin-bottom: 5%;
}

.header-container4 {
  margin-bottom: 1%;
}

.header-container-pic {
  /*padding-left: 0;
  padding-right: 0;*/
  height: 100px;  /* top container needs to have height specified or else children will run all over */
 /* width: 100%;*/
}

.light-header-font {
  font-size: 2.5rem;
  margin-bottom: 0;  /* readded this for Our Network Backbone, to clean up the formatting */
  /*padding-top: 12px;
  padding-left: 5%;
  padding-right: 5%;*/
}

.dark-header-font {
  font-size: 2.5rem;
  /*padding-top: 0;*/
}
  
.light-header-sub-font {
  font-size: 1.8rem;
}

.dark-header-sub-font {
  font-size: 1.8rem;
}

.textlightcolor {
  font-size: 1rem;
}


.darkchecklist {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.text-2-col {
  justify-content: flex-start;
  text-align: left;
}

/*
.lightchecklist {
  padding: 12px 5%;
  font-size: 1.5rem;
  line-height: 1.5rem;
}
*/

.dark-header-font {
/*padding-bottom: 0;
margin-bottom: 0;
width: 100%;*/
font-size: 2.5rem;
}

.light-header-font2 {
/* padding-bottom: 2%; */ /* removed for Our Network Backbone, for a cleaner formatting */
width: 100%;
font-family: 'roboto';
font-size: 2.5rem;
font-weight: normal;
color:  #f4f3ed;
}

.light-subheader-text{
  padding-top: 0;
  font-size: 1.8rem;
  line-height: 2.5rem;
}


.dark-image-text-title {
  line-height: 1.2rem; /* vertical spacing of lines of text */
  font-size: 1.2rem; /* the size of the text */
}

.light-text-title {
  line-height: 1.2rem; /* vertical spacing of lines of text */
  font-size: 1.2rem; /* the size of the text */
}

.whitetext {
  line-height: 1.8;
  font-size: 1.4rem;
}

.bronzetext {
  line-height: 1.8rem;
  font-size: 1.4rem;
}

.whitetextsm {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.jobtitle {
  margin-bottom: 2%;
  text-align: center;
  font-size: 1.3rem;
}

/* ========================  @media XL ***LANDSCAPE*** LANDINGPAGE =================== */

.navbar {
  padding-top: 2%;
}

.nav-bar-logo {
  height: 50px;
  width: 50px;
  margin-left: 30px;
  margin-right: 30px;
}

.nav-bar-menu-items {
  font-size: 1.2rem;
  font-weight: 300;
}

.title-container {
  margin-top: 0;
}

.landing-page-title {
  padding-top: 200px;
  padding-bottom: 2%;
  /*font-size: 2.5rem;  IT Solutions*/
  font-size: 3rem;  /*longer wording*/
  font-weight: 400;
}

.subtitle {
  font-weight: 200;
  font-size: 1.8rem;
}

.subtitle1 {
  font-weight: 300;
  font-size: 1.8rem;
}

.container-buttons {
 padding-top: 5%;
  margin-bottom: 20%;
}

.landingpage-trow-spacer {
  height: 40px;
}

.rowspace {
  padding-bottom: 2%;   /* only the very last "row" gets padded */
}

.landing-button {
  width: 95%;  /* changes the button width */
  /*line-height: 5; */
}

.landing-button-text {
  font-size: 1.3rem;
  font-weight: 400;
  align-items: center;
  vertical-align: middle;
}

.landing-button-subtext {
  font-size: 1rem;
}

.button1-format {
  padding-top: 2%;
}

/* ========================  @media XL ***LANDSCAPE*** (LIGHT) nLPD ======================================================= */

.spacetitleicon3 {
  padding: 0;
  padding-top: 10%;
  padding-bottom: 10%;
}

.lawsectionformat {
  padding-bottom: 2%;
}

.r-format2x3 {
  margin: 5px;  /*adds space between elements (col) */
}

.r-format2x3-1 {
  margin-right: 2%;
  margin-left: 2%;
  padding-bottom: 50px;
}


.textcontainer4 {
  padding: 0;
  /*display: flex;  <!-- display flex interferes with text-align: center ->
  align-items: center; align-items: center is for display: flex */
  text-align: center; /* aligns text under image */
  word-wrap: break-word; 
} 


/* ========================  @media XL ***LANDSCAPE*** (LIGHT) EXPERIENCE THE NEXT TECHNOLOGY =================== */



.image1-container {
  padding-top: 5%;
  padding-bottom: 5%;
}

.full-widthpic6 {
  margin: 0;
  width: 100%;
  height: 450px;
  object-fit: cover;
  object-position: 0px 30%;
}

/* ============================================= XL ***LANDSCAPE*** SMART ICT ==================================== */




.r-format5 {
  height: 100%;
  width: auto;
}

/*
.text-container1 {
  height: 100%;
  width: auto;
}
*/

.iconinbox7 {
  height: 100%;
  /*width: auto;*/
}

.image-container4 {
height: 1100px;
width: auto;
/*margin-top: 2%;*/ /* removed because too much space in Our network backbone */
}

.row-format1 {
  height: 100%;
}

.image-container5 {
  margin-bottom: 0;
  margin-top: 5%;
  margin-left: 0;
  margin-right: 0;
padding-right: 0;
padding-left: 0;
}

.iconinbox8 {
  width: 85%;
  height: auto;
}

/* ========================  @media XL ***LANDSCAPE*** (DARK) BACKUP AS A SERVICE =============================== */


/* ========================  @media XL (LIGHT) OUR COMPANY ================================= */


.icons {
  width: 50%;
  margin: 6% auto 1%;
  padding-bottom: 4%;
}

.headerquotes {
  font-size: 1.8rem;
  line-height: 2;
  padding-bottom: 0;
}

.row-pad1 {
  padding: 5%;
}

.tableheader {
  font-size: 1.8rem;
}

.tabledetailtext {
  font-size: 1.2rem;
}


/* =========================== XL ***LANDSCAPE*** CLOUD & AUTOMATION ============================= */
.full-widthpic1 {
  padding-top: 8%;
  height: 550px;
  width: 1600px;
  object-fit: cover;
  object-position: 0 40%;
}

/* ========================  @media XL ***LANDSCAPE*** (LIGHT) REAL COLLABORATION FOR YOUR TEAMS =============================== */

.carouselimage {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: 0 5%;
  opacity: 1;
}

/* ========================  @media XL ***LANDSCAPE*** (DARK) OUR HOME OFFICE COLLABORATION SOLUTIONS ============================*/


/* ========================  @media XL ***LANDSCAPE*** TELEPHONY SOLUTIONS ============================*/


.image-container6 {
  height: 550px;
  width: auto;
  margin-top: 1%;
}

.iconinbox9 {
  width: auto;
  height: 60%;
}

.image-container7 {
  margin-top: 3%;
  height: 650px;
}

.iconinbox10 {
  width: 55%;
  height: auto;
}



/* ========================  @media XL ***LANDSCAPE*** (LIGHT) IT, Collaboration & Networking INFRASTRUCTURE ARCHITECTURE DESIGN =============================== */

.p-justified1 {
  padding-top: 2%;
  line-height: 2rem;
  font-size: 1.5rem;
}

/* ========================  @media XL ***LANDSCAPE*** (LIGHT) SYSTEM INSTALLATION & CONFIGURATION =============================== */

.full-widthpic4 {
  padding-top: 0;
  height: 450px;
  object-fit: cover; 
  object-position: 0 0%;
}

.p-format4 {
  font-size: 1.5rem;
  line-height: 1.8rem;
}

/* ========================  @media XL ***LANDSCAPE*** (DARK) CLOUD & AUTOMATION =========================================== */

.full-widthpic1 {
  margin-top: 3%;
  padding-top: 0;
  height: 450px;
  width: 100%;
  object-fit: cover;
  object-position: 0 45%;
  opacity: 1;
}

.image3-container {
  padding: 0;

}

.light-subheader-text{
  padding-top: 0;
  font-size: 1.8rem;
  line-height: 2.5rem;
}

.p-justified-title {
  padding-top: 5%;
  font-size: 2rem;
  line-height: 2.5rem;
}


/* ========================  @media XL ***LANDSCAPE*** (LIGHT) FULL-TIME SOLUTIONS SUPPORT =================================== */

.full-widthpic3 {
  margin-top: 3%;
  padding-top: 0;
  height: 450px;
  width: 100%;
  object-fit: cover;
  object-position: 0 0%;
}

.p-format1 {
font-size: 1.5rem;
line-height: 1.5rem;
}

.emaillink {
  font-size: 1.5rem;
}


/* ========================  @media XL ***LANDSCAPE*** (LIGHT) COMPLETE SYSTEM BACKUP & SECURITY =================================== */

.full-widthpic5 {
  margin-top: 2%;
  padding-top: 0;
  height: 450px;
  object-fit: cover;
  object-position: 0 0%;
}

.pad5 {
  padding-bottom: 2%;
  padding-top: 5%;
}

.p-format5 {
  padding-top: 5%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.5rem;
  
}

/* ========================  @media XL ***LANDSCAPE*** (LIGHT) INDUSTRIES WE SERVE ===================================== */

.r-format1{
  margin: 0;
}

.imagecontainer4 {
  /*background-color: #a499ba;*/
  /* width: 100%;  Remove because prevents col-xs-6 */
  margin-top: 10%;
  margin-bottom: 2%;
  display: flex;
  align-items: flex-end;
}

.spacetitleicon {
  padding-top: 0;
}

.container-2-col-text {
  padding-top: 0;
}

.c-format2 {
  padding: 0;
  padding-top: 5%;
}


.iconinbox {
  width: 90px;
  height: 90px;
  align-items: center;
  margin: auto;
}

.darktext1 {
  font-size: 1.5rem;
}

.c-format2 {
  padding: 0;
}
/* ========================  @media XL ***LANDSCAPE*** (DARK) WE PROVIDE ALL CLOUD-BASED SOLUTIONS ==================================== */


.lighttext {
  font-size: 1.5rem;
  line-height: 2;
}


.r-format4 {
  height: 750px;
}

.r-format5 {
  height: 80px;
}

.imagecontainer5 {
  /*height: 25%; */
  margin-bottom: 0;
  padding-top: 3%;
  display: flex;
  align-items: center;
  justify-content: center;
  /*justify-content: left; */
}

.imagecontainer8 {
  /*height: 10%; */
  margin-bottom: 0;
  padding-left: 0;
  /*display: flex;
  align-items: center;
  justify-content: center; */
}

.iconinbox6 {

  height: 90px;  /*changes actual size of image, the div wrapper auto sizes to it */
  /*padding-right: 5px; */
}

.textcontainer5 {
  font-size: 1.5rem;  
  line-height: 2rem;
  word-wrap: break-word;
  width: 250px;
  text-align: center;
  padding-top: 0;
  padding-left: 0;
  vertical-align: center;
}


.table-sub-text {
  font-size: 1rem;
  line-height: .8rem;
}


/* ========================  @media XL ***LANDSCAPE*** (LIGHT) OUR SERVICES ======================================================= */

.r-format2 {
    margin-top: 10px;  /*adds space to the top of elements (images and text) (col) */
    margin-bottom: 20px;  /*adds space to the  elements (images and text) (col) */
    margin-left: 5px;  /*adds space to the  elements (images and text) (col) */
    margin-right: 5px;  /*adds space to the elements (images and text) (col) */
}

.r-format3 {
  margin-bottom: 0;
  padding-bottom: 50px;
}

.textcontainer4 {
  padding: 0;
  /*display: flex;  <!-- display flex interferes with text-align: center ->
  align-items: center; align-items: center is for display: flex */
  text-align: center; /* aligns text under image */
  word-wrap: break-word; 
} 


.iconinbox5 {
  width: 100px;  /*changes actual size of image, the div wrapper auto sizes to it */
}

/* ========================  @media XL ***LANDSCAPE*** (DARK) ADVANCE YOUR BUSINESS TRANSFORMATION =================================== */


.full-widthpic2 {
  margin-top: 0;
  height: 350px;
  width: 100%;
  object-fit: cover;
  object-position: 0px 10%;
  opacity: 1;
}

.lighttext-title1 {
  font-family: 'roboto';
  font-size: 1.8rem;
  line-height: 1.8rem;
}

/* ========================= @media  **LANDSCAPE** XL ***LANDSCAPE*** OUR PARTNERS ============================= */

.textcontainer1 {
   margin-top: 0;
  /*margin-bottom: 2%; */
  padding-left: 10px;
  padding-right: 0;
}

.textcontainer2 {
  /* margin-top: 2%; */
   /*margin-bottom: 2%; */
 
   padding-left: 10px;
   padding-right: 50px;
 }



/* ========================  @media XL ***LANDSCAPE*** CONTACT US ============================================================== */

.cta-button {
  color: #f4f3ed;
  font-size: 1.8rem;
  margin-top: 10%;
  border-radius:30px;
  line-height: 100px;
  text-align: center;
  width: 70%;
  margin-bottom: 20px;
} 

/* ========================  @media XL ***LANDSCAPE*** FOOTER =============================================== */

.lighttextheader {
  margin-bottom: 5%;
}

}


/* ================================================================================================================================== */
/* =====================================  @media XL ***PORTRAIT*** LARGE MONITORS, Thunderbird, 1600-2200PX START  ================================== */
/* =================================================================================================================================== */

@media only screen and (min-width: 1601.00px) and (max-width: 2200.99px) and (orientation: portrait) {
	.navbar .nav-item .dropdown-menu{ display: none; }
  .navbar .nav-item:hover .nav-link{color: #fff; }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
  .navbar-brand {text-align: left; }

  body {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
    background-image: url(../images/maintenance/landingpage-default.jpg);
  }

  .landing-page-container {
    height: 1000px;
  }



/* ========================  @media XL ***PORTRAIT*** GENERAL STYLES =========================================== */

.lightslide {
  padding-top: 5%;
   /* padding-left: 0;
    padding-right: 0; */
    /*width: 100%;*/ /* Necessary for page alignment; prevent slide from running off page 8 Aug */
    /*height: 100%; */ /* Necessary to keep container 100% tall for elements */
}

.darkslide {
  padding-top: 5%;
  padding-bottom: 10%;
  /* font-size: 2rem; */ /* dont think the font size should be specified here */
}

.darkslide1 {
  padding-top: 5%;
  padding-bottom: 0;
  /* font-size: 2rem; */ /* dont think the font size should be specified here */
}

.darkslide2 {
  /* background-color: #32877e; */

  width: 100%;  /* Necessary for page alignment; prevent slide from running off page 8 Aug */
  height: 2000px; /* Necessary to keep container 100% tall for elements */  /* 11.23 */
  /*font-size: 2rem;*/ /*um, dont think the font size should be specified here. */
}

.header-container1 {
  margin-bottom: 5%;
}

.header-container4 {
  margin-bottom: 1%;
}

.header-container-pic {
  /*padding-left: 0;
  padding-right: 0;*/
  height: 100px;  /* top container needs to have height specified or else children will run all over */
 /* width: 100%;*/
}

.light-header-font {
  font-size: 2.5rem;
  margin-bottom: 0;  /* readded this for Our Network Backbone, to clean up the formatting */
  /*padding-top: 12px;
  padding-left: 5%;
  padding-right: 5%;*/
}

.dark-header-font {
  font-size: 2.5rem;
  /*padding-top: 0;*/
}
  
.light-header-sub-font {
  font-size: 1.8rem;
}

.dark-header-sub-font {
  font-size: 1.8rem;
}

.textlightcolor {
  font-size: 1rem;
}


.darkchecklist {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.text-2-col {
  justify-content: flex-start;
  text-align: left;
}

/*
.lightchecklist {
  padding: 12px 5%;
  font-size: 1.5rem;
  line-height: 1.5rem;
}
*/

.dark-header-font {
/*padding-bottom: 0;
margin-bottom: 0;
width: 100%;*/
font-size: 2.5rem;
}

.light-header-font2 {
/* padding-bottom: 2%; */ /* removed for Our Network Backbone, for a cleaner formatting */
width: 100%;
font-family: 'roboto';
font-size: 2.5rem;
font-weight: normal;
color:  #f4f3ed;
}

.light-subheader-text{
  padding-top: 0;
  font-size: 1.8rem;
  line-height: 2.5rem;
}


.dark-image-text-title {
  line-height: 1.2rem; /* vertical spacing of lines of text */
  font-size: 1.2rem; /* the size of the text */
}

.light-text-title {
  line-height: 1.2rem; /* vertical spacing of lines of text */
  font-size: 1.2rem; /* the size of the text */
}

.whitetext {
  line-height: 1.8;
  font-size: 1.4rem;
}

.bronzetext {
  line-height: 1.8rem;
  font-size: 1.4rem;
}

.whitetextsm {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.jobtitle {
  margin-bottom: 2%;
  text-align: center;
  font-size: 1.3rem;
}

/* ========================  @media XL ***PORTRAIT*** LANDINGPAGE =================== */

.navbar {
  padding-top: 2%;
}

.nav-bar-logo {
  height: 50px;
  width: 50px;
  margin-left: 30px;
  margin-right: 30px;
}

.nav-bar-menu-items {
  font-size: 1.2rem;
  font-weight: 300;
}

.title-container {
  margin-top: 0;
}

.landing-page-title {
  padding-top: 200px;
  padding-bottom: 2%;
  /*font-size: 2.5rem;  IT Solutions*/
  font-size: 3rem;  /*longer wording*/
  font-weight: 400;
}

.subtitle {
  font-weight: 200;
  font-size: 1.8rem;
}

.subtitle1 {
  font-size: 1.8rem;
}

.container-buttons {
 padding-top: 5%;
  margin-bottom: 20%;
}

.landingpage-trow-spacer {
  height: 40px;
}

.rowspace {
  padding-bottom: 2%;   /* only the very last "row" gets padded */
}

.landing-button {
  width: 95%;  /* changes the button width */
  /*line-height: 5; */
}

.landing-button-text {
  font-size: 1.3rem;
  font-weight: 400;
  align-items: center;
  vertical-align: middle;
}

.landing-button-subtext {
  font-size: 1rem;
}

.button1-format {
  padding-top: 2%;
}

/* ========================  @media XL ***PORTRAIT*** (LIGHT) nLPD ======================================================= */

.spacetitleicon3 {
  padding: 0;
  padding-top: 10%;
  padding-bottom: 10%;
}

.lawsectionformat {
  padding-bottom: 2%;
}

.r-format2x3 {
  margin: 5px;  /*adds space between elements (col) */
}

.r-format2x3-1 {
  margin-right: 2%;
  margin-left: 2%;
  padding-bottom: 50px;
}

.textcontainer4 {
  padding: 0;
  /*display: flex;  <!-- display flex interferes with text-align: center ->
  align-items: center; align-items: center is for display: flex */
  text-align: center; /* aligns text under image */
  word-wrap: break-word; 
} 


/* ========================  @media XL ***PORTRAIT*** (LIGHT) EXPERIENCE THE NEXT TECHNOLOGY =================== */



.image1-container {
  padding-top: 5%;
  padding-bottom: 5%;
}

.full-widthpic6 {
  margin: 0;
  width: 100%;
  height: 450px;
  object-fit: cover;
  object-position: 0px 30%;
}

/* ============================================= XL ***PORTRAIT*** SMART ICT ==================================== */




.r-format5 {
  height: 100%;
  width: auto;
}

/*
.text-container1 {
  height: 100%;
  width: auto;
}
*/

.iconinbox7 {
  height: 100%;
  /*width: auto;*/
}

.image-container4 {
height: 1100px;
width: auto;
/*margin-top: 2%;*/ /* removed because too much space in Our network backbone */
}

.row-format1 {
  height: 100%;
}

.image-container5 {
  margin-bottom: 0;
  margin-top: 5%;
  margin-left: 0;
  margin-right: 0;
padding-right: 0;
padding-left: 0;
}

.iconinbox8 {
  width: 85%;
  height: auto;
}

/* ========================  @media XL ***PORTRAIT*** (DARK) BACKUP AS A SERVICE =============================== */


/* =========================== XL ***PORTRAIT*** CLOUD & AUTOMATION ============================= */
.full-widthpic1 {
  padding-top: 8%;
  height: 550px;
  width: 1600px;
  object-fit: cover;
  object-position: 0 40%;
}

/* ========================  @media XL ***PORTRAIT*** (LIGHT) REAL COLLABORATION FOR YOUR TEAMS =============================== */

.carouselimage {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: 0 5%;
  opacity: 1;
}

/* ========================  @media XL ***PORTRAIT*** (DARK) OUR HOME OFFICE COLLABORATION SOLUTIONS ============================*/


/* ========================  @media XL ***PORTRAIT*** TELEPHONY SOLUTIONS ============================*/


.image-container6 {
  height: 550px;
  width: auto;
  margin-top: 1%;
}

.iconinbox9 {
  width: auto;
  height: 60%;
}

.image-container7 {
  margin-top: 3%;
  height: 650px;
}

.iconinbox10 {
  width: 55%;
  height: auto;
}



/* ========================  @media XL ***PORTRAIT*** (LIGHT) IT, Collaboration & Networking INFRASTRUCTURE ARCHITECTURE DESIGN =============================== */

.p-justified1 {
  padding-top: 2%;
  line-height: 2rem;
  font-size: 1.5rem;
}

/* ========================  @media XL ***PORTRAIT*** (LIGHT) SYSTEM INSTALLATION & CONFIGURATION =============================== */

.full-widthpic4 {
  padding-top: 0;
  height: 450px;
  object-fit: cover; 
  object-position: 0 0%;
}

.p-format4 {
  font-size: 1.5rem;
  line-height: 1.8rem;
}

/* ========================  @media XL ***PORTRAIT*** (DARK) CLOUD & AUTOMATION =========================================== */

.full-widthpic1 {
  margin-top: 3%;
  padding-top: 0;
  height: 450px;
  width: 100%;
  object-fit: cover;
  object-position: 0 45%;
  opacity: 1;
}

.image3-container {
  padding: 0;

}

.light-subheader-text{
  padding-top: 0;
  font-size: 1.8rem;
  line-height: 2.5rem;
}

.p-justified-title {
  padding-top: 5%;
  font-size: 2rem;
  line-height: 2.5rem;
}


/* ========================  @media XL ***PORTRAIT*** (LIGHT) FULL-TIME SOLUTIONS SUPPORT =================================== */

.full-widthpic3 {
  margin-top: 3%;
  padding-top: 0;
  height: 450px;
  width: 100%;
  object-fit: cover;
  object-position: 0 0%;
}

.p-format1 {
font-size: 1.5rem;
line-height: 1.5rem;
}

.emaillink {
  font-size: 1.5rem;
}


/* ========================  @media XL ***PORTRAIT*** (LIGHT) COMPLETE SYSTEM BACKUP & SECURITY =================================== */

.full-widthpic5 {
  margin-top: 2%;
  padding-top: 0;
  height: 450px;
  object-fit: cover;
  object-position: 0 0%;
}

.pad5 {
  padding-bottom: 2%;
  padding-top: 5%;
}

.p-format5 {
  padding-top: 5%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.5rem;
  
}

/* ========================  @media XL ***PORTRAIT*** (LIGHT) INDUSTRIES WE SERVE ===================================== */

.r-format1{
  margin: 0;
}

.imagecontainer4 {
  /*background-color: #a499ba;*/
  /* width: 100%;  Remove because prevents col-xs-6 */
  margin-top: 10%;
  margin-bottom: 2%;
  display: flex;
  align-items: flex-end;
}

.spacetitleicon {
  padding-top: 0;
}

.container-2-col-text {
  padding-top: 0;
}

.c-format2 {
  padding: 0;
  padding-top: 5%;
}


.iconinbox {
  width: 90px;
  height: 90px;
  align-items: center;
  margin: auto;
}

.darktext1 {
  font-size: 1.5rem;
}

.c-format2 {
  padding: 0;
}
/* ========================  @media XL ***PORTRAIT*** (DARK) WE PROVIDE ALL CLOUD-BASED SOLUTIONS ==================================== */


.lighttext {
  font-size: 1.5rem;
  line-height: 2;
}


.r-format4 {
  height: 750px;
}

.r-format5 {
  height: 80px;
}

.imagecontainer5 {
  /*height: 25%; */
  margin-bottom: 0;
  padding-top: 3%;
  display: flex;
  align-items: center;
  justify-content: center;
  /*justify-content: left; */
}

.imagecontainer8 {
  /*height: 10%; */
  margin-bottom: 0;
  padding-left: 0;
  /*display: flex;
  align-items: center;
  justify-content: center; */
}

.iconinbox6 {

  height: 90px;  /*changes actual size of image, the div wrapper auto sizes to it */
  /*padding-right: 5px; */  /*removing b/c I think it will dis-balance the icon*/
}

.textcontainer5 {
  font-size: 1.5rem;  
  line-height: 2rem;
  padding-top: 0;
  word-wrap: break-word;
  width: 250px;
  text-align: center;
  padding-left: 0;
  vertical-align: center;
}


.table-sub-text {
  font-size: 1rem;
  line-height: .8rem;
}


/* ========================  @media XL **PORTRAIT** OUR NETWORK BACKBONE ============================*/
.page-container3 {
  max-width: 1400px;  /* contains the pages to 1400px */
  height: 700px;
}


/* ========================  @media XL ***PORTRAIT*** (LIGHT) OUR SERVICES ======================================================= */

.r-format2 {
    margin-top: 10px;  /*adds space to the top of elements (images and text) (col) */
    margin-bottom: 20px;  /*adds space to the  elements (images and text) (col) */
    margin-left: 5px;  /*adds space to the  elements (images and text) (col) */
    margin-right: 5px;  /*adds space to the elements (images and text) (col) */
}

.r-format3 {
  margin-bottom: 0;
  padding-bottom: 50px;
}

.textcontainer4 {
  padding: 0;
  /*display: flex;  <!-- display flex interferes with text-align: center ->
  align-items: center; align-items: center is for display: flex */
  text-align: center; /* aligns text under image */
  word-wrap: break-word; 
} 


.iconinbox5 {
  width: 100px;  /*changes actual size of image, the div wrapper auto sizes to it */
}

/* ========================  @media XL ***PORTRAIT*** (DARK) ADVANCE YOUR BUSINESS TRANSFORMATION =================================== */


.full-widthpic2 {
  margin-top: 0;
  height: 350px;
  width: 100%;
  object-fit: cover;
  object-position: 0px 10%;
  opacity: 1;
}

.lighttext-title1 {
  font-family: 'roboto';
  font-size: 1.8rem;
  line-height: 1.8rem;
}

/* ========================= @media  XL ***PORTRAIT*** OUR PARTNERS ============================= */

.textcontainer1 {
 margin-top: 0;
  /*margin-bottom: 2%; */
  padding-left: 10px;
  padding-right: 0;
  
}

.textcontainer2 {
  /* margin-top: 2%; */
   /*margin-bottom: 2%; */
 
   padding-left: 10px;
   padding-right: 50px;
 }




/* ========================  @media XL ***PORTRAIT*** CONTACT US ============================================================== */

.cta-button {
  color: #f4f3ed;
  font-size: 1.8rem;
  margin-top: 10%;
  border-radius:30px;
  line-height: 100px;
  text-align: center;
  width: 70%;
  margin-bottom: 20px;
} 

/* ========================  @media XL ***PORTRAIT*** FOOTER =============================================== */

.lighttextheader {
  margin-bottom: 5%;
}

}






/* =================================================================================================================================================== */
/* ============  @media LG **LANDSCAPE** : DESKTOPS, LARGE TABLETS (ipad Pro GALAXY TAB, KINDLE FIRE 8.9, MACKBOOK 13") 1025-1600px START  =========== */
/* ================================================================================================================================================== */

@media only screen and (min-width: 1024.00px) and (max-width: 1600.99px) and (orientation: landscape) {
	.navbar .nav-item .dropdown-menu{ display: none; }
  .navbar .nav-item:hover .nav-link{color: #fff; }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
  .navbar-brand {text-align: left; }

/* ========================  @media LG **LANDSCAPE** GENERAL STYLES =========================================== */

body {
  /* The file size of this background image is 93% smaller
   * to improve page load speed on mobile internet connections */
  background-image: url("../images/maintenance/landingpage-default.jpg");
}

.landing-page-container {
  height: auto;
}

.page-container2 {
  max-width: 1400px;  /* contains the pages to 1400px */
  height: 650px;  /* 11.23 adjusts the height of the white space between header and footer */
}
  
.lightslide {
 padding-top: 5%;
  /* padding-left: 0;
  padding-right: 0; */
  /*width: 100%; *//* Necessary for page alignment; prevent slide from running off page 8 Aug */
  /*height: 100%; */ /* Necessary to keep container 100% tall for elements */
}

.darkslide {
  padding-top: 5%;
  padding-bottom: 10%;
  /* font-size: 2rem; */ /* dont think the font size should be specified here */
}

.header-container1 {
  margin-bottom: 7%;
}

.header-container4 {
  margin-bottom: 7%;
}

.header-container5 {
  margin-bottom: 3%;
}

.header-container-pic {
  /*padding-left: 0;
  padding-right: 0;*/
  height: 100px;  /* top container needs to have height specified or else children will run all over */
  /*width: 100%;*/
}

.light-header-font {
  font-size: 2.5rem;
 /* margin-bottom: 0;
  padding-top: 12px;
  padding-left: 5%;
  padding-right: 5%;*/
}

.dark-header-font {
  font-size: 2.5rem;
  /*padding-top: 0;*/
 }

.light-header-sub-font {
  font-size: 1.8rem;
}

.dark-header-sub-font {
  font-size: 2.5rem;
}


  
.darkchecklist {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.text-2-col {
  justify-content: flex-start;
  text-align: left;
}

/*
.lightchecklist {
  padding: 12px 5%;
  font-size: 1.5rem;
  line-height: 1.5rem;
}
*/

.dark-header-font {
  /*padding-bottom: 0;
  margin-bottom: 0;
  width: 100%;*/
  font-size: 2.5rem;
}


.light-header-font2 {
  padding-bottom: 2%;
  width: 100%;
  font-size: 2.5rem;
  font-weight: normal;
}

.light-subheader-text{
  padding-top: 0;
  font-size: 1.8rem;
  line-height: 2.5rem;
}

.dark-image-text-title {
  line-height: 1.2rem; /* vertical spacing of lines of text */
  font-size: 1.2rem; /* the size of the text */
}

.light-text-title {
  line-height: 1.2rem; /* vertical spacing of lines of text */
  font-size: 1.2rem; /* the size of the text */
}

.textlightcolor {
  font-size: 1rem;
}

.whitetext {
  line-height: 1.8;
  font-size: 1.4rem;
}

.bronzetext {
  line-height: 1.8;
  font-size: 1.4rem;
}

.whitetextsm {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.jobtitle {
  margin-bottom: 2%;
  text-align: center;
  font-size: 1.3rem;
}
  
/* ========================  @media LG **LANDSCAPE** LANDINGPAGE =========================================== */

.navbar {
  padding-top: 2%;
}

.nav-bar-logo {
  height: 50px;
  width: 50px;
  margin-left: 30px;
  margin-right: 30px;
}

.nav-bar-menu-items {
  font-size: 1rem;
  font-weight: 300;
}

.title-container {
  margin-top: 20%;
}

.landing-page-title {
  padding-top: 2%;
  /* font-size: 3rem;  IT Solutions*/
  font-size: 3rem;  /*Vous propose...*/
  font-weight: 400;
}

.subtitle-container {
  padding-bottom: 0;
}


.subtitle {
  font-size: 1.8rem;
}

.subtitle1 {

  font-size: 1.8rem;
}

.container-buttons {
 margin-bottom: 20%;
}

.landingpage-trow-spacer {
  height: 40px;
}

.rowspace {
  padding-bottom: 2%;
}

.landing-button {
  /*height: 80px; */
  margin-right: 3%;
  margin-left: 3%;
  width: 95%;
  margin-bottom: 30px;
}

.landing-button-text {
  font-size: 1.2rem;
  font-weight: 400;
  align-items: center;
  vertical-align: middle;
}

.landing-button-subtext {
  font-size: 1rem;
}


.button1-format {
  padding-top: 4%;
}


/* ========================  @media LG **LANDSCAPE** Our Solutions ======================================================= */


.table-header-text {
  font-size: 1.5rem;
}



.darkicon {
  height: 30px;
  display: block;
}

.r-format6 {
  height: auto; /* removing auto to gain some more spacing */
  padding: 50px 0 20px 0;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.c-format6 {
  padding-left: 0;
  padding-right: 0;
}

.r-format10 {
padding: 0;
margin: 0px;
width: 100%;
}



.table-button {
  width: 95%;  /* Makes space between buttons */
  height: 175px;   /* specifies the height of the button */
}



.col-format9 {
  padding: 0 5% 0 5%;
}

.col-format1 {
  padding: 0 5% 0 5%;
}


.iconinbox6 {

  width: 100%;
  height: 80px; 
  /*object-fit: fill; */ /* tried removing, doesn't work so well */
  object-fit: contain;
}

.textcontainer5 {
  font-size: 1rem;
  line-height: 1rem;
  width: 90px;
}

.table-sub-text {
  font-size: .8rem;
  line-height: .5rem;
}




/* ========================  @media LG **LANDSCAPE** nLPD ======================================================= */



.spacetitleicon3 {
  padding: 0;
  padding-top: 10%;
  padding-bottom: 10%;
}


.r-format2x3 {
  margin: 5px;  /*adds space between elements (col) */
}

.r-format2x3-1 {
  margin-right: 2%;
  margin-left: 2%;
  /*padding-bottom: 50px; */
  padding-bottom: 0;
}


.textcontainer4 {
  padding: 0;
  /*display: flex;  <!-- display flex interferes with text-align: center ->
  align-items: center; align-items: center is for display: flex */
  text-align: center; /* aligns text under image */
  word-wrap: break-word; 
} 



/* ========================  @media LG **LANDSCAPE** (LIGHT) EXPERIENCE THE NEXT TECHNOLOGY =================== */



.image1-container {
  padding-top: 5%;
  padding-bottom: 5%;
}

.full-widthpic6 {
  margin: 0;
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: 0px 30%;
}


/* ================================== @media LG **LANDSCAPE** SMART ICT ==================================== */



.r-format5 {
  height: 100%;
  width: auto;
}

/*
.text-container1 {
  height: 100%;
  width: auto;
}
*/

.iconinbox7 {
  height: 100%;
 /* width: auto;*/
}

.image-container4 {
height: 900px;
width: auto;
margin-top: 1%;
}

.row-format1 {
  height: 100%;
}

.imagecontainer5 {
  margin-bottom: 0;
  padding-left: 0;
  margin-top: 0;
  padding-top: 2%;
}

.iconinbox8 {
  width: 85%;
  height: auto;
}

/* ========================  @media LG **LANDSCAPE** (DARK) BACKUP AS A SERVICE =============================== */


/* ========================  @media LG **LANDSCAPE** (LIGHT) REAL COLLABORATION FOR YOUR TEAMS =============================== */

.carouselimage {
  width: 75%;
  height: 350px;
  object-fit: contain; /*contain for larger photos, the proportions are all 2000x700 */
  object-position: 0 0%;
  opacity: 1;
}


/* ========================  @media LG **LANDSCAPE** TELEPHONY ============================*/

.image-container6 {
  height: 500px;
  width: auto;
  margin-top: 5%;
  }

.iconinbox9 {
  width: auto;
  height: 60%;
}

.image-container7 {
  margin-top: 2%;
  height: 550px;
}

.iconinbox10 {
  width: 55%;
  height: auto;
}


/* ========================  @media LG **LANDSCAPE** OUR NETWORK BACKBONE ============================*/

.page-container3 {
  max-width: 1400px;  /* contains the pages to 1400px */
  height: 850px;
  text-align: center;
  margin: auto;
  justify-content: center;
}



/* ========================  @media LG **LANDSCAPE** (DARK) OUR HOME OFFICE COLLABORATION SOLUTIONS ============================*/
/* ========================  @media LG **LANDSCAPE** (LIGHT) IT, Collaboration & Networking INFRASTRUCTURE ARCHITECTURE DESIGN =============================== */

.p-justified1 {
  padding-top: 2%;
  line-height: 2rem;
  font-size: 1.5rem;
}

/* ========================  @media LG **LANDSCAPE** (LIGHT) SYSTEM INSTALLATION & CONFIGURATION =============================== */

.full-widthpic4 {
  padding-top: 0;
  height: 300px;
  width: 75%;
  /*object-fit: cover;  stretches too far for large screens */
  /*object-position: 0 20%; */ 
}

.p-format4 {
  font-size: 1.5rem;
  line-height: 3rem;
  padding-top: 0;
}


/* ========================  @media LG LANDSCAPE (LIGHT) OUR COMPANY ================================= */



.icons {
  width: 50%;
  margin: 6% auto 1%;
  padding-bottom: 4%;
}

.headerquotes {
  font-size: 1.8rem;
  line-height: 2;
  padding-bottom: 0;
}

.row-pad1 {
  padding: 5%;
}

.tableheader {
  font-size: 1.8rem;
}

.tabledetailtext {
  font-size: 1.2rem;
}



/* ========================  @media LG **LANDSCAPE** (DARK) CLOUD & AUTOMATION =========================================== */

.full-widthpic1 {
  margin-top: 8%;
  margin: 0;
  height: 350px;
  width: 75%;
  
  /*object-fit: none; */
  /*object-position: 0 45%; */
  opacity: 1;
}

.image3-container {
  padding: 0;
}

.light-subheader-text{
  padding-top: 0;
  font-size: 1.8rem;
  line-height: 2.5rem;
}

.p-justified-title {
  padding-top: 5%;
  font-size: 2rem;
  line-height: 2.5rem;
}


/* ========================  @media LG **LANDSCAPE** (LIGHT) FULL-TIME SOLUTIONS SUPPORT =================================== */

.full-widthpic3 {
  padding-top: 0;
  margin-top: 2%;
  height: 350px;
  width: 75%;
  object-fit: contain; /* necessary to remove inherited property above */
  object-position: 0 0;
  opacity: 1;
}

.p-format1 {
font-size: 1.5rem;
line-height: 1.5rem;

}

.emaillink {
  font-size: 1.5rem;
}

.bottompad {
  padding-bottom: 5%;
  padding-top: 10%;
}

/* ========================  @media LG **LANDSCAPE** (LIGHT) COMPLETE SYSTEM BACKUP & SECURITY =================================== */

.full-widthpic5 {
  padding-top: 0;
  margin-top: 2%;
  height: 350px;
  width: 75%;
  object-fit: contain;
  object-position: 0 0%;
  opacity: 1;
}

.pad5 {
  padding-bottom: 2%;
  padding-top: 5%;
}

.p-format5 {
  padding-top: 5%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

/* ========================  @media LG **LANDSCAPE** (LIGHT) INDUSTRIES WE SERVE ===================================== */

.r-format1{
  margin: 0;
}

.imagecontainer4 {
  /*background-color: #a499ba;*/
  /* width: 100%;  Remove because prevents col-xs-6 */
  margin-top: 10%;
  margin-bottom: 2%;
  display: flex;
  align-items: flex-end;
}

.spacetitleicon {
  padding-top: 0;
}

.container-2-col-text {
  padding-top: 0;
}

.c-format2 {
  padding: 0;
  padding-top: 5%;
}

.iconinbox {
  width: 90px;
  height: 90px;
  align-items: center;
  margin: auto;
}


.darktext1 {
  font-size: 1.5rem;
}

.c-format2 {
  padding: 0;
}

.col-space {
  padding-top: 1%;
}


/* ========================  @media LG **LANDSCAPE** (DARK) WE PROVIDE ALL CLOUD-BASED SOLUTIONS ==================================== */


.lighttext {
  font-size: 1.5rem;
  line-height: 2;
}

.r-format4 {
  height: 500px;
}

.r-format5 {
  height: 80px;
}

.imagecontainer5 {
  /*height: 25%; */
  margin-bottom: 10px;
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  /*justify-content: left; */
}

.imagecontainer8 {
  /*height: 10%; */
  margin-bottom: 0;
  padding-left: 0;
  /*display: flex;
  align-items: center;
  justify-content: center; */
}

.iconinbox6 {
  width: 90px;  /*changes actual size of image, the div wrapper auto sizes to it */
  /* height: 90px; */ /*changes actual size of image, the div wrapper auto sizes to it, removing to auto height  */
  align-items: center;
  margin: auto;
}

.textcontainer5 {
  font-size: 1.2rem;
  line-height: 1.2rem;
  word-wrap: break-word;
  width: 200px;
  text-align: center;
  padding-top: 0;
  padding-left: 0;
  vertical-align: center;
}




/* ========================  @media LG **LANDSCAPE** (LIGHT) OUR SERVICES ======================================================= */


.r-format2 {
  margin-top: 10px;  /*adds space to the top of elements (images and text) (col) */
  margin-bottom: 20px;  /*adds space to the  elements (images and text) (col) */
  margin-left: 5px;  /*adds space to the  elements (images and text) (col) */
  margin-right: 5px;  /*adds space to the elements (images and text) (col) */
}



.textcontainer4 {
  padding: 0;
} 



.iconinbox11 {
  height: 70px;  /*changes actual size of image, the div wrapper auto sizes to it */
  opacity: 100%;
}

/* ========================  @media LG **LANDSCAPE** (DARK) ADVANCE YOUR BUSINESS TRANSFORMATION =================================== */


.full-widthpic2 {
  margin-top: 2%;
  padding-top: 0;
  height: 350px;
  width: 75%;
  object-fit: contain;
  object-position: 0px 0%;
}

.lighttext-title1 {
  font-family: 'roboto';
  font-size: 1.8rem;
  line-height: 1.8rem;
}


/* ========================= @media LG ***LANDSCAPE*** OUR PARTNERS ============================= */
   

.partner-logo1 {
  width: 100px;
}

.partner-logo2 {
  width: 160px;
}

.partner-logo3 {
  width: 80px;
}

.partner-logo4 {
  width: 100px;
  padding-left: 5%;
}



.textcontainer1 {
  margin-top: 0;
  margin-bottom: 0%;
  padding-left: 10px;
  padding-right: 0;
}

.textcontainer2 {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 10px;
  padding-right: 50px;
}


/* ========================  @media LG **LANDSCAPE** CONTACT US ============================================================== */

.cta-button {
  font-size: 1.8rem;
  margin-top: 10%;
  line-height: 100px;
  width: 100%;
  margin-bottom: 20px;
} 

/* ========================  @media LG **LANDSCAPE** FOOTER =============================================== */

.lighttextheader {
  margin-bottom: 5%;
}


}


/* =================================================================================================== */
/* =====================================  @media LG **PORTRAIT** : DESKTOPS, LARGE TABLETS (ipad Pro GALAXY TAB, KINDLE FIRE 8.9, MACKBOOK 13") 1025-1600px START  ================================== */
/* ===================================================================================================== */

@media only screen and (min-width: 1022.01px) and (max-width: 1600.99px) and (orientation: PORTRAIT) {
	.navbar .nav-item .dropdown-menu{ display: none; }
  .navbar .nav-item:hover .nav-link{color: #fff; }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
  .navbar-brand {text-align: left; }

/* ========================  @media LG **PORTRAIT** GENERAL STYLES =========================================== */

body {
  /* The file size of this background image is 93% smaller
   * to improve page load speed on mobile internet connections */
  background-image: url("../images/maintenance/landingpage-default.jpg");
}

.lightslide {
  padding-top: 5%;
    /* padding-left: 0;
     padding-right: 0; */
    /*width: 100%; *//* Necessary for page alignment; prevent slide from running off page 8 Aug */
    /*height: 100%; */ /* Necessary to keep container 100% tall for elements */
}

.darkslide {
  padding-top: 5%;
  padding-bottom: 10%;
   /* font-size: 2rem; */ /* dont think the font size should be specified here */
}
  
.header-container1 {
  margin-bottom: 5%;
}

.header-container4 {
  margin-bottom: 5%;
}

.header-container-pic {
  /*padding-left: 0;
  padding-right: 0;*/
  padding-top: 50px;
  padding-bottom: 100px;
  height: 100px;  /* top container needs to have height specified or else children will run all over */
  /*width: 100%;*/
}


.light-header-font {
  font-size: 2.5rem;
 /* margin-bottom: 0;
  padding-top: 12px;
  padding-left: 5%;
  padding-right: 5%; */
}

.light-header-sub-font {
  font-size: 1.8rem;
}


.dark-header-font {
  font-size: 2.5rem;
  /*padding-top: 0;*/
}

.dark-header-sub-font {
  font-size: 1.8rem;
}


.dark-image-text-title {
  line-height: 1.2rem; /* vertical spacing of lines of text */
  font-size: 1.2rem; /* the size of the text */
}

.light-text-title {
  line-height: 1.2rem; /* vertical spacing of lines of text */
  font-size: 1.2rem; /* the size of the text */
}

.textlightcolor {
  font-size: 1rem;
}

.darkchecklist {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.text-2-col {
  justify-content: flex-start;
  text-align: left;
}

/*
.lightchecklist {
  padding: 12px 5%;
  font-size: 1.5rem;
  line-height: 1.5rem;
}
*/


.light-header-font2 {
  padding-bottom: 2%;
  font-size: 2.5rem;
}

.light-subheader-text{
  padding-top: 0;
  font-size: 1.5rem;
  line-height: 2.5rem;
}

.whitetext {
  line-height: 1.8;
  font-size: 1.4rem;
}

.bronzetext {
  line-height: 1.8;
  font-size: 1.4rem;
}

.whitetextsm {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.jobtitle {
  margin-bottom: 2%;
  text-align: center;
  font-size: 1.3rem;
}
  
/* ========================  @media LG **PORTRAIT** LANDINGPAGE =========================================== */

.navbar {
  padding-top: 2%;
}

.nav-bar-logo {
  height: 50px;
  width: 50px;
  margin-left: 30px;
  margin-right: 30px;
}

.nav-bar-menu-items {
  font-size: 1.2rem;
  font-weight: 300;
}

.landing-page-container {
  height: 1250px;
}

.title-container {
  margin-top: 15%;
}

.landing-page-title {
  padding-top: 100px;
  /*font-size: 3.8rem;  IT Solutions*/
  font-size: 2rem; /*vous propose...*/
  font-weight: 400;
}

.subtitle {
  font-weight: 200;
  font-size: 2rem;
}

.subtitle1 {

  font-size: 2rem;
}

.container-buttons {
 margin-top: 5%;
  margin-bottom: 20%;
}

.landingpage-trow-spacer {
  height: 40px;
}

.rowspace {
  padding-bottom: 2%;
}

.landing-button {
  width: 95%;  /*the percentage of the parent container */
  margin-bottom: 20px;
}

.landing-button-text {
  font-size: 1.3rem;
  font-weight: 400;
  justify-content: center; /*essential for horizontal alignment */
  align-items: center;
  vertical-align: middle;
}

.landing-button-subtext {
  font-size: 1.0rem;
}

.button1-format {
  padding-top: 2%;
}


/* ========================  @media LG **PORTRAIT** Our Solutions ======================================================= */


.table-header-text {
  font-size: 1.8rem;
}


/* ========================  @media LG **PORTRAIT** nLPD ======================================================= */

.lawcontainerformat {
  margin-top: 5%;
}

.spacetitleicon3 {
  padding: 0;
  padding-top: 10%;
  padding-bottom: 10%;
}


.r-format2x3 {
  margin: 5px;  /*adds space between elements (col) */
}

.r-format2x3-1 {
  margin-right: 2%;
  margin-left: 2%;
    /*padding-bottom: 50px; */
    padding-bottom: 0;
}



.textcontainer4 {
  padding: 0;
  /*display: flex;  <!-- display flex interferes with text-align: center ->
  align-items: center; align-items: center is for display: flex */
  text-align: center; /* aligns text under image */
  word-wrap: break-word; 
} 






/* ========================  @media LG **PORTRAIT** (LIGHT) EXPERIENCE THE NEXT TECHNOLOGY =================== */



.image1-container {
  padding-top: 5%;
  padding-bottom: 5%;
}

.full-widthpic6 {
  margin: 0;
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: 0px 30%;
}

/* ================================  @media LG **PORTRAIT** SMART ICT ==================================== */


.r-format5 {
  height: 100%;
  width: auto;
}

/*
.text-container1 {
  height: 100%;
  width: auto;
}
*/

.iconinbox7 {
  height: 100%;
 /* width: auto;*/
}

.image-container4 {
height: 950px;
width: auto;
margin-top: 2%;
}

.row-format1 {
  height: 100%;
}

.imagecontainer5 {
  margin-bottom: 0;
  padding-left: 0;
  margin-top: 0;
  padding-top: 1%;
  padding-bottom: 1%;
}

.iconinbox8 {
  width: 85%;
  height: auto;

}

/* ========================  @media LG **PORTRAIT** (DARK) BACKUP AS A SERVICE =============================== */


/* ========================  @media LG **PORTRAIT** (LIGHT) REAL COLLABORATION FOR YOUR TEAMS =============================== */

.carouselimage {
  width: 75%;
  height: 350px;
  object-fit: contain;
  object-position: 0 0%;
}

/* ========================  @media LG **PORTRAIT** TELEPHONY ============================*/



.iconinbox9 {
  width: auto;
  height: 50%;
}

.image-container6 {
  height: 700px;
  width: auto;
  margin-top: 5%;
  padding-bottom: 5%;
  }

.container-2-col-text {
  padding-top: 0;
  padding-bottom: 0;
}

.image-container7 {
  margin-top: 2%;
  height: 500px;
}

.iconinbox10 {
  width: 75%;
  height: auto;
}




/* ========================  @media LG **PORTRAIT** (DARK) OUR HOME OFFICE COLLABORATION SOLUTIONS ============================*/
/* ========================  @media LG **PORTRAIT** (LIGHT) IT, Collaboration & Networking INFRASTRUCTURE ARCHITECTURE DESIGN =============================== */

.p-justified1 {
  padding-top: 2%;
  line-height: 2rem;
  font-size: 1.5rem;
}

/* ========================  @media LG **PORTRAIT** (LIGHT) SYSTEM INSTALLATION & CONFIGURATION =============================== */

.full-widthpic4 {
  padding-top: 0;
  height: 350px;
  object-fit: cover;
  object-position: 0 20%;
}

.p-format4 {
  font-size: 1.5rem;
  line-height: 1.8rem;
}

/* ========================  @media LG **PORTRAIT** (LIGHT) OUR COMPANY ================================= */


.icons {
  width: 50%;
  margin: 6% auto 1%;
  padding-bottom: 4%;
}

.headerquotes {
  font-size: 1.8rem;
  line-height: 2;
  padding-bottom: 0;
}

.row-pad1 {
  padding: 5%;
}

.tableheader {
  font-size: 1.8rem;
}

.tabledetailtext {
  font-size: 1.2rem;
}


/* ========================  @media LG **PORTRAIT** (DARK) CLOUD & AUTOMATION =========================================== */

.full-widthpic1 {
  padding-top: 8%;
  margin: 0;
  height: 350px;
  width: 100%;
  object-fit: cover;
  object-position: 0 45%;
  opacity: 1;
}

.image3-container {
  padding: 0;

}

.light-subheader-text{
  padding-top: 0;
  font-size: 1.5rem;
  line-height: 2.5rem;
}

.p-justified-title {
  padding-top: 5%;
  font-size: 2rem;
  line-height: 2.5rem;
}


/* ========================  @media LG **PORTRAIT** (LIGHT) FULL-TIME SOLUTIONS SUPPORT =================================== */

.full-widthpic3 {
  padding-top: 0;
  height: 350px;
  width: 100%;
  margin: 0;
  object-fit: cover;
  object-position: 0 0;
  opacity: 1;
}

.p-format1 {
font-size: 1.5rem;
line-height: 1.5rem;
}

.emaillink {
  font-size: 1.5rem;
}

.bottompad {
  padding-bottom: 5%;
  padding-top: 5%;
}



/* ========================  @media LG **PORTRAIT** (LIGHT) COMPLETE SYSTEM BACKUP & SECURITY =================================== */

.full-widthpic5 {
  padding-top: 0;
  height: 350px;
  object-fit: cover;
  object-position: 0 0;
  opacity: 1;
}

.pad5 {
  padding-bottom: 2%;
  padding-top: 5%;
}

.p-format5 {
  padding-top: 5%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.5rem;
  
}

/* ========================  @media LG **PORTRAIT** (LIGHT) INDUSTRIES WE SERVE ===================================== */

.r-format1{
  margin: 0;
}

.imagecontainer4 {
  /*background-color: #a499ba;*/
  /* width: 100%;  Remove because prevents col-xs-6 */
  margin-top: 10%;
  margin-bottom: 2%;
  display: flex;
  align-items: flex-end;
}

.spacetitleicon {
  padding-top: 0;
}

.container-2-col-text {
  padding-top: 0;
}

.c-format2 {
  padding: 0;
  padding-top: 5%;
}


.iconinbox {
  width: 90px;
  height: 90px;
  align-items: center;
  margin: auto;
}


.darktext1 {
  font-size: 1.5rem;
}

.c-format2 {
  padding: 0;
}
/* ========================  @media LG **PORTRAIT** (DARK) WE PROVIDE ALL CLOUD-BASED SOLUTIONS ==================================== */


.lighttext {
  font-size: 1.5rem;
  line-height: 2;
}


.r-format4 {
  height: 450px;
 
}

.r-format5 {
  height: 80px;
}
/*
.r-format3 {

width: 100%;
}
*/

.imagecontainer5 {
  /*height: 25%; */
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  /*justify-content: left; */
}

.imagecontainer8 {
  /*height: 10%; */
  margin-bottom: 0;
  padding-left: 0;
  /*display: flex;
  align-items: center;
  justify-content: center; */
}



.iconinbox6 {
  width: 90px;  /*changes actual size of image, the div wrapper auto sizes to it */
 /* height: 90px;*/  /*changes actual size of image, the div wrapper auto sizes to it, removing 01.03.23 to allow it to auto-height */
  align-items: center;
  margin: auto;
}

.textcontainer5 {
  font-size: 1.2rem;
  line-height: 1.2rem;
  word-wrap: break-word;
  width: 200px;
  text-align: center;
  padding-top: 0;
  padding-left: 0;
  vertical-align: center;
}

/* ========================  @media LG **PORTRAIT** OUR NETWORK BACKBONE ============================*/
.page-container3 {
  max-width: 1400px;  /* contains the pages to 1400px */
  height: 700px;
}


/* ========================  @media LG **PORTRAIT** (LIGHT) OUR SERVICES ======================================================= */

.r-format2 {
  margin-top: 10px;  /*adds space to the top of elements (images and text) (col) */
  margin-bottom: 20px;  /*adds space to the  elements (images and text) (col) */
  margin-left: 5px;  /*adds space to the  elements (images and text) (col) */
  margin-right: 5px;  /*adds space to the elements (images and text) (col) */
}



.textcontainer4 {
  padding: 0;
  /*display: flex;  <!-- display flex interferes with text-align: center ->
  align-items: center; align-items: center is for display: flex */
  text-align: center; /* aligns text under image */
  word-wrap: break-word; 
} 


.iconinbox5 {
  width: 100px;  /*changes actual size of image, the div wrapper auto sizes to it */
 
}

/* ========================  @media LG **PORTRAIT** (DARK) ADVANCE YOUR BUSINESS TRANSFORMATION =================================== */


.full-widthpic2 {
  margin-top: 0;
  height: 350px;
  width: 100%;
  object-fit: cover;
  object-position: 0px 10%;
  opacity: 1;
}

.lighttext-title1 {
  font-family: 'roboto';
  font-size: 1.8rem;
  line-height: 1.8rem;

}


/* ========================= @media LG **PORTRAIT** OUR PARTNERS ============================= */

.textcontainer1 {
  margin-top: 0;
  margin-bottom: 0%;
  padding-left: 10px;
  padding-right: 0;
}

.textcontainer2 {
  margin-top: 0;
  margin-bottom: 0%;

  padding-left: 10px;
  padding-right: 50px;
}



/* ========================  @media LG **PORTRAIT** CONTACT US ============================================================== */

.cta-button {
  margin-top: 10%;
  line-height: 100px;
  width: 100%;
  margin-bottom: 20px;
} 

.page-container2 {
  height: 1000px;  /* 11.23 adjusts the height of the white space between header and footer */
}

/* ========================  @media LG **PORTRAIT** FOOTER =============================================== */

.lighttextheader {
  margin-bottom: 5%;
}


}



/* =================================================================================================== */
/* =====================================  @media MD **LANDSCAPE** ipad Mini and small tablets 769-1024px START  ================================== */
/* ===================================================================================================== */
@media only screen and (min-width: 768.01px) and (max-width: 1023.99px) and (orientation: landscape) {

  body {
      /* The file size of this background image is 93% smaller
       * to improve page load speed on mobile internet connections */
      background-image: url(../images/maintenance/landingpage-md.jpg);
    }


    /* ========================  @media MD **LANDSCAPE** GENERAL STYLES =========================================== */

.header-container1 {
  margin-bottom: 5%;
}

.header-container4 {
  margin-bottom: 5%;
}

.header-container-pic {
  /*padding-left: 0;
  padding-right: 0;*/
  height: 100px;  /* top container needs to have height specified or else children will run all over */
  /*width: 100%;*/
}

.dark-image-text-title {
  line-height: 1rem;
  font-size: 0.7rem;
}

.light-text-title {
  line-height: 1rem; /* vertical spacing of lines of text */
  font-size: 0.8rem; /* the size of the text */
}

.textlightcolor {
  font-size: 1rem;
}

.darkchecklist {
  font-size: 1.2rem;
  line-height: 1.5rem;
}

/*
.lightchecklist {
  padding: 12px 5%;
  font-size: 1.2rem;
}
*/

.whitetext {
  line-height: 1.5;
  font-size: large;
}

.bronzetext {
  line-height: 1.5;
  font-size: large;
}

.whitetextsm {
  font-size: 1.2rem;
  line-height: 1.2rem;
}

.jobtitle {
  margin-bottom: 2%;
  text-align: center;
  font-size: 1.2rem;
}


/* ========================  @media MD **LANDSCAPE** LANDINGPAGE =========================================== */

.navbar {
  padding-top: 2%;
}


.nav-bar-logo {
  height: 40px;
  width: 40px;
  margin-right: 20px;
  margin-left: 20px;
}

.nav-bar-menu-items {
  font-size: 1rem;
  font-weight: 300;
}


.landing-page-container {
  height: 700px;
}

.title-container {
  margin-top: 10%;
}

.landing-page-title {
  padding-top: 100px;
  padding-bottom: 2%;
  /*font-size: 3.8rem;  IT Solutions*/
  font-size: 2rem; /*vous propose...*/
  font-weight: 400;
}

.subtitle {
  font-weight: 200;
  font-size: 1.6rem;
}

.subtitle1 {

  font-size: 1.6rem;
}

.container-buttons {
 margin-bottom: 20%;
}

.landingpage-trow-spacer {
  height: 40px;
}

.rowspace {
  padding-bottom: 2%;
}

.landing-button {
  line-height: 1;
  width: 100%;  /*the percentage of the parent container */
  margin-bottom: 20px;
  height: 100px;

}

.landing-button-text {
  font-size: 1.2rem;
  font-weight: 400;
  align-items: center;
  vertical-align: middle;
}

.landing-button-subtext {
  font-size: 1.0rem;
}



.button1-format {
  padding-top: 2%;
  height: 100px;
}


/* ========================  @media MD **LANDSCAPE** nLPD ======================================================= */

.spacetitleicon3 {
  padding: 0;
  padding-top: 10%;
  padding-bottom: 10%;
}


.r-format2x3 {
  margin: 5px;  /*adds space between elements (col) */
}

.r-format2x3-1 {
  margin-right: 2%;
  margin-left: 2%;
    /*padding-bottom: 50px; */
    padding-bottom: 0;
}


.textcontainer4 {
  padding: 0;
  /*display: flex;  <!-- display flex interferes with text-align: center ->
  align-items: center; align-items: center is for display: flex */
  text-align: center; /* aligns text under image */
  word-wrap: break-word; 
} 



/* ========================  @media MD **LANDSCAPE** (LIGHT) EXPERIENCE THE NEXT TECHNOLOGY =================== */

.image1-container {
  padding-top: 5%;
  padding-bottom: 5%;
}

.full-widthpic6 {
  margin: 0;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: 0px 30%;
  opacity: 1;
}

/* ==================================  @media MD **LANDSCAPE** SMART ICT ==================================== */



.r-format5 {
  height: 100%;
  width: auto;
}

/*
.text-container1 {
  height: 100%;
  width: auto;
}
*/

.iconinbox7 {
  height: 70%;
  /*width: auto;*/
}

.image-container4 {
height: 600px;
width: auto;
margin-top: 5%;
}

.row-format1 {
  height: 100%;
}

.imagecontainer5 {
  margin-bottom: 0;
  padding-left: 0;
  margin-top: 5%;
}

.iconinbox8 {
  width: 85%;
  height: auto;

}

/* ========================  @media MD **LANDSCAPE** (DARK) BAAS  =============================== */

.landing-button {
  border-radius:30px;
  line-height: 2rem;
  width: 95%;  /*the percentage of the parent container */
  margin-bottom: 20px;
}

/* ========================  @media MD **LANDSCAPE** (DARK) BACKUP AS A SERVICE =============================== */

.btn-outline-violet {
  font-weight: 400;
  font-size: 1rem;
}

/* ========================  @media MD **LANDSCAPE** (LIGHT) REAL COLLABORATION FOR YOUR TEAMS =============================== */


/* ========================  @media MD **LANDSCAPE** TELEPHONY SOLUTIONS =============================== */


.image-container6 {
  height: 400px;
  width: auto;
  margin-top: 5%;
  }

.iconinbox9 {
  width: auto;
  height: 40%;
}

.image-container7 {
  margin-top: 0;
  height: 500px;
}

.iconinbox10 {
  width: 75%;
  height: auto;
}


.container-movementl {
  margin-left: 2%;
  padding-top: 5px;
}
  
.container-movementr {
  margin-left: 2%;
  padding-top: 10px;
}


  /* ========================  @media MD **LANDSCAPE** OUR INFRASTRUCTURE PORTFOLIO ============================*/
 
  .imageformat1 {
    height: 200px;
  }
  
  .imageformat2 {
    height: 150px;
  }

/* ========================  @media MD **LANDSCAPE** (DARK) OUR HOME OFFICE COLLABORATION SOLUTIONS ============================*/
.lighttext1{
  font-size: 1rem;
  line-height: 1rem;
}

.oneimageinrow {
  width: 300px;
  margin: auto;
  padding-bottom: 20px;
}

.imagesizer7 {
  /*height: 100%; */
  margin-bottom: 2%;
 }

 .imagetext2 {
  font-size: .8rem;
  color: #f4f3ed;
  line-height: 1rem;
  margin-top: 0;
}

/* ========================  @media MD **LANDSCAPE** (LIGHT) IT, Collaboration & Networking INFRASTRUCTURE ARCHITECTURE DESIGN =============================== */

.p-justified1 {
  padding-top: 2%;
  line-height: 1.2rem;
  font-size: 1.2rem;
}

/* ========================  @media MD **LANDSCAPE** (LIGHT) SYSTEM INSTALLATION & CONFIGURATION =============================== */

.full-widthpic4 {
  padding-top: 0;
  height: 200px;
  object-fit: cover;
  object-position: 0 40%;
}

.p-format4 {
  font-size: 1.2rem;
}

/* ========================  @media MD **LANDSCAPE** (LIGHT) OUR COMPANY ================================= */

.icons {
  width: 50%;
  margin: 5% auto 0;
  padding-bottom: 4%;
}

.headerquotes {
  font-size: x-large;
  padding-bottom: 0;
}

.tableheader {
  font-size: 24px;
  padding-bottom: 0;
  margin-top: 5%;
  margin-bottom: 2%;
}

.hrintable {
  border-top: solid #5b5854;
  margin-bottom: 10%;
}

.tabledetailtext {
  font-size: 16px;
  line-height: 1.8;
}

/* ========================  @media MD **LANDSCAPE** (DARK) CLOUD & AUTOMATION =========================================== */

.full-widthpic1 {
  padding-top: 8%;
  height: 425px;
  width: 100%;
  object-fit: cover;
  object-position: 0 40%;
}

.image3-container {
  padding: 0;

}

/* ========================  @media MD **LANDSCAPE** (LIGHT) FULL-TIME SOLUTIONS SUPPORT =================================== */

.p-format1 {
  font-size: 1.2rem;
  line-height: 2rem;
  }

  .bottompad {
    padding-bottom: 5%;
    padding-top: 0;
  }

/* ========================  @media MD **LANDSCAPE** (LIGHT) COMPLETE SYSTEM BACKUP & SECURITY =================================== */
.pad5 {
  padding-bottom: 5%;
  padding-top: 8%;
}

.p-format5 {
  padding-top: 2%;
  text-align: center;
  line-height: 1.6rem;
  font-size: 1.2rem;
}

/* ========================  @media MD **LANDSCAPE** (LIGHT) INDUSTRIES WE SERVE ===================================== */

.c-format2 {
  padding: 0;
  padding-bottom: 5%;
}

.imagecontainer4 {
  /*background-color: #a499ba;*/
  /* width: 100%;  Remove because prevents col-xs-6 */
  margin-bottom: 2%;
  display: flex;
  align-items: flex-end;
}

.iconinbox {
  width: 70px;
  height: 70px;
  align-items: center;
  margin: auto;
}

.darktext1 {
  font-size: 1rem;
}

/* ========================  @media MD **LANDSCAPE** (DARK) WE PROVIDE ALL CLOUD-BASED SOLUTIONS ==================================== */

.imagecontainer5 {
  /*height: 25%; */
  margin-bottom: 10px;
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  /*justify-content: left; */
}
/*
.imagecontainer8 {
  height: 25%;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
*/

/*
.imagecontainer8 {
  height: 10%;
  margin-bottom: 0;
  padding-left: 0
  /*display: flex;
  align-items: center;
  justify-content: center; 
}
*/

.iconinbox6 {
  width: 50px;  /*changes actual size of image, the div wrapper auto sizes to it */
 /* height: 50px;*/  /*changes actual size of image, the div wrapper auto sizes to it, removing 01.02.23 to allow to auto-height */
  align-items: center;
  margin: auto;
}

.textcontainer5 {
  font-size: .7rem;
  line-height: 1rem;
  word-wrap: break-word;
  width: 100px;
  text-align: center;
  padding-top: 0;
  padding-left: 0;
}


/* ========================  @media MD **LANDSCAPE** (dark) ZEN - CONFIGURATION &  ICT MANAGED SERVICES  ======================================================= */

.light-subheader-text{
  font-size: 1rem;
  line-height: 1.5;
  padding-bottom: 5%;
}


/* ========================  @media MD **LANDSCAPE** (LIGHT) OUR SERVICES ======================================================= */



.spacetitleicon2 {
  padding: 0;
  padding-top: 0;
  padding-bottom: 30px;
}

.r-format2 {
  margin-top: 5px;  /*adds space to the top of elements (images and text) (col) */
  margin-bottom: 5px;  /*adds space to the  elements (images and text) (col) */
  margin-left: 5px;  /*adds space to the  elements (images and text) (col) */
  margin-right: 5px;  /*adds space to the elements (images and text) (col) */
}

.imagecontainer9 {
  /*height: 25%; */
  /*width: 25%;*/
  /*margin: auto;*/ /*doesn-t seem to work*/
  margin-bottom: 10px;
  padding: 0;
}


.iconinbox5 {
  width: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
  height: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */

}

.textcontainer4 {
  padding: 0;
  /* display: flex;  <!-- prevents centering of text -->
  align-items: center; <!-- this is function of display: flex */
  text-align: center;
  word-wrap: break-word;
} 



/* ========================  @media MD **LANDSCAPE** (DARK) ADVANCE YOUR BUSINESS TRANSFORMATION =================================== */


.full-widthpic2 {
  margin-top: 0;
  height: 300px;
  width: 100%;
  object-fit: cover;
  object-position: 0px 0%;
  opacity: 1;
}

.lighttext-title1 {
  font-family: 'roboto';
  font-size: 1.5rem;
  line-height: 1.5rem;

}

/* ========================= @media MD **LANDSCAPE** OUR PARTNERS ============================= */

.textcontainer1 {
  margin-top: 0;
  margin-bottom: 0%;
  padding-left: 20px;
  padding-right: 10px;
}

.textcontainer2 {
  margin-top: 0;
  margin-bottom: 0%;

  padding-left: 20px;
  padding-right: 10px;
}

.logo-appearance {
  display: none;
}


/* ========================  @media MD **LANDSCAPE** CONTACT US ============================================================== */

.cta-button {
  margin-top: 10%;
  line-height: 100px;
  width: 100%;
  margin-bottom: 20px;
} 

.page-container2 {
  height: 800px;  /* 11.23 adjusts the height of the white space between header and footer */
}

/* ========================  @media MD **LANDSCAPE** FOOTER =============================================== */


/* mark out because in the footer section
  .full-widthpic3 {
    padding-top: 8%;
    height: 350px;
    object-fit: cover;
    object-position: 0 40%;
    opacity: 1;
  }
  */

  /* mark out because in the footer section
  .full-widthpic5 {
    padding-top: 8%;
    height: 350px;
    object-fit: cover;
    object-position: 0 40%;
    opacity: 1;
  }
  */

  /* mark out because in the footer section
  .imageincol1 {
    height: 100%;  
    margin-top: 0;
    margin-bottom: 0;
  }
  */

  /* mark out because in the footer section
  .imageincol2 {
    height: 100%;  
    margin-top: 0;
    margin-bottom: 0;
  }

  /* mark out because in the footer section
  .imageincol3 {
    height: 100%;  
    margin-top: 0;
    margin-bottom: 0;
  }
   */

  /* mark out because in the footer section
.imagecontainer6 {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
}
*/



.footeralign {
  padding: 3% 2%;
}

.footerslide {
  padding-top: 5%;
  padding-bottom: 5%;
  width: 100%;
  font-size: 2rem;
}


.footerrow {
margin: auto;
}

.footertitles {
  font-size: 12px;
  margin-bottom: 0;
  text-align: center;
}

.footertitlesanimate {
    margin-left: 0;
    text-decoration: none;
}

.footertext {
  text-align: center;
  font-size: 10px;
  font-weight: 300;
}

.footertitlepad {
  padding-top: 16px;
}

.social-icon {
  padding: 0 10px;
}

.acknowledgments {
  font-size: .3rem;
}


hr.footerhr-top {
  width: 90%;
  border-top: 2px solid #f4f7dd;
  margin-top: 12px;
  margin-bottom: 24px;
}

hr.footerhr {
  width: 90%;
  border-top: 2px dotted #f4f7dd;
  margin-top: 12px;
}

.footer-link {
  margin: 0, 1px;
}


.copyright {
  font-size: 10px;
  margin-top: 15px;
}
}


/* =================================================================================================== */
/* =====================================  @media MD **PORTRAIT** ipad Mini and small tablets 769-1024px START  ================================== */
/* ===================================================================================================== */
@media only screen and (min-width: 768.01px) and (max-width: 1024.01px) and (orientation: PORTRAIT) {

  body {
      /* The file size of this background image is 93% smaller
       * to improve page load speed on mobile internet connections */
      background-image: url(../images/maintenance/landingpage-md.jpg);
    }


    /* ========================  @media MD **PORTRAIT** GENERAL STYLES =========================================== */

.header-container1 {
  margin-bottom: 5%;
}

.header-container4 {
  margin-bottom: 5%;
}

.header-container-pic {
  /*padding-left: 0;
  padding-right: 0;*/
  padding-top: 0;
  padding-bottom: 0;
  height: 150px;  /* top container needs to have height specified or else children will run all over */
  /*width: 100%;*/
}


.dark-image-text-title {
  line-height: 1rem;
  font-size: 0.7rem;
}

.light-text-title {
  line-height: 1rem; /* vertical spacing of lines of text */
  font-size: 0.8rem; /* the size of the text */
}

.textlightcolor {
  font-size: .8rem;
}

.darkchecklist {
  font-size: 1.2rem;
  line-height: 1.5rem;
  text-align: center;
}

/*
.lightchecklist {
  padding: 12px 5%;
  font-size: 1.2rem;
}
*/

.whitetext {
  line-height: 1.5;
  font-size: large;
}

.bronzetext {
  line-height: 1.5;
  font-size: large;
}

.whitetextsm {
  font-size: 1.2rem;
  line-height: 1.2rem;
}

.jobtitle {
  margin-bottom: 2%;
  text-align: center;
  font-size: 1.2rem;
}

/* ========================  @media MD **PORTRAIT** LANDINGPAGE =========================================== */

.navbar {
  padding-top: 2%;

}

.nav-bar-logo {
  height: 40px;
  width: 40px;
  margin-right: 20px;
  margin-left: 20px;
}

.nav-bar-menu-items {
  font-size: 1rem;
  font-weight: 300;
}


.landing-page-container {
  height: 1000px;
}

.title-container {
  margin-top: 10%;
}

.landing-page-title {
  padding-top: 100px;
  /*font-size: 3.8rem;  IT Solutions*/
  font-size: 2rem; /*vous propose...*/
  font-weight: 400;
}



.subtitle {
  font-weight: 200;
  font-size: 1.6rem;
}

.subtitle1 {

  font-size: 1.6rem;
}

.container-buttons {
 margin-top: 5%;
  margin-bottom: 20%;
}

.landingpage-trow-spacer {
  height: 40px;
}

.rowspace {
  padding-bottom: 2%;
}

.landing-button {
  /*line-height: 70px; */
  width: 95%;  /*the percentage of the parent container */
  margin-bottom: 20px; 
  height: 100px;
}

.landing-button-text {
  font-size: 1rem;
  font-weight: 400;
  align-items: center;
  vertical-align: middle;
}

.landing-button-subtext {
  font-size: .8rem;
}



.button1-format {
  padding-top: 2%;
}


/* ========================  @media MD **PORTRAIT** Our Solutions ======================================================= */


.table-header-text {
  font-size: 1.5rem;
}



.darkicon {
  height: 30px;
  display: block;
}

.r-format6 {
  height: auto; /* removing auto to gain some more spacing */
  padding: 50px 0 20px 0;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.c-format6 {
  padding-left: 0;
  padding-right: 0;
}

.r-format10 {
padding: 0;
margin: 0px;
width: 100%;
}



.table-button {
  width: 95%;  /* Makes space between buttons */
  height: 175px;   /* specifies the height of the button */
}



.col-format9 {
  padding: 0 5% 0 5%;
}

.col-format1 {
  padding: 0 5% 0 5%;
}


.iconinbox6 {

  width: 100%;
  height: 60px; 
  /*object-fit: fill; */ /* tried removing, doesn't work so well */
  object-fit: contain;
}

.textcontainer5 {
  font-size: 1rem;
  line-height: 1rem;
  width: 90px;
}

.table-sub-text {
  font-size: .8rem;
  line-height: .5rem;
}


/* ========================  @media MD **PORTRAIT** nLPD ======================================================= */

.spacetitleicon3 {
  padding: 0;
  padding-top: 150px;
  padding-bottom: 10%;
}


.r-format2x3 {
  margin: 5px;  /*adds space between elements (col) */
}

.r-format2x3-1 {
  margin-right: 2%;
  margin-left: 2%;
  padding-bottom: 0;
  /*width: 750px;*/
}



.textcontainer4 {
  padding: 0;
  /*display: flex;  <!-- display flex interferes with text-align: center ->
  align-items: center; align-items: center is for display: flex */
  text-align: center; /* aligns text under image */
  word-wrap: break-word; 
} 

.lawsubtextformat1 {
  margin-left: 5%;
  margin-right: 5%;
}




/* ========================  @media MD **PORTRAIT** (LIGHT) EXPERIENCE THE NEXT TECHNOLOGY =================== */


.image1-container {
  padding-top: 5%;
  padding-bottom: 5%;
}

.full-widthpic6 {
  margin: 0;
  width: 100%;
  height: 350px;
  object-fit: cover;

}

/* ================================= @media MD **PORTRAIT** SMART ICT ==================================== */


.r-format5 {
  height: 100%;
  width: auto;
}

/*
.text-container1 {
  height: 100%;
  width: auto;
}
*/

.iconinbox7 {
  height: 70%;
  /*width: auto;*/
}

.image-container4 {
height: 600px;
width: auto;
margin-top: 5%;
}

.row-format1 {
  height: 100%;
}

.imagecontainer5 {
  margin-bottom: 0;
  padding-left: 0;
  margin-top: 0;
  padding-top: 3%;
  padding-bottom: 3%;
}

.iconinbox8 {
  width: 85%;
  height: auto;

}


/* ========================  @media MD **PORTRAIT** (DARK) BACKUP AS A SERVICE BAAS =============================== */

.landing-button {
  border-radius:30px;
  /*line-height: 70px;*/
  width: 95%;  /*the percentage of the parent container */
  margin-bottom: 20px;
}

.btn-outline-violet {
  font-weight: 400;
  font-size: 1rem;
}


/* ========================  @media MD **PORTRAIT** (LIGHT) REAL COLLABORATION FOR YOUR TEAMS =============================== */






/* ========================  @media MD **PORTRAIT** TELEPHONY SOLUTIONS =============================== */


.iconinbox9 {
  width: auto;
  height: 20%;
}

.image-container6 {
  height: 400px;
  width: auto;
  margin-top: 5%;
  }

  .container-2-col-text {
    padding-top: 0;
  }

  .container-movementl {
    margin-left: 2%;
    padding-top: 5px;
  }
  
  .container-movementr {
    margin-left: 2%;
    padding-top: 5px;
  }


  /* ========================  @media MD **PORTRAIT** OUR NETWORK BACKBONE ============================*/
  .page-container3 {
    max-width: 1400px;  /* contains the pages to 1400px */
    height: 600px;
  }

  .r-format11 {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5%;
  }

  .col-format3 {
    padding-left: 0;
    padding-right: 0;
  }

  /*
  .row {
    --bs-gutter-y: 1rem;
  }
  */

  .col-format2 {
    padding-bottom: 5%;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 5%;
    margin-left: 1%;
    margin-right: 1%;  /* adds space between elements */
  }



  /* ========================  @media MD **PORTRAIT** OUR INFRASTRUCTURE PORTFOLIO ============================*/

  
  .page-container4 {
    max-width: 1400px;  /* contains the pages to 1400px */
    height: 1500px;
  }

  .slide-height-short {
    height: 1250px;
  }


  .r-format4 {
    height: 450px;
    margin-left: 0;
  }


/* ========================  @media MD **PORTRAIT** (DARK) OUR HOME OFFICE COLLABORATION SOLUTIONS ============================*/
.lighttext1{
  font-size: 1rem;
  line-height: 1rem;
}

.oneimageinrow {
  width: 300px;
  margin: auto;
  padding-bottom: 20px;
}

.imagesizer7 {
  /*height: 100%; */
  margin-bottom: 2%;
 }

 .imagetext2 {
  font-size: .8rem;
  color: #f4f3ed;
  line-height: 1rem;
  margin-top: 0;
}

/* ========================  @media MD **PORTRAIT** (LIGHT) IT, Collaboration & Networking INFRASTRUCTURE ARCHITECTURE DESIGN =============================== */

.p-justified1 {
  padding-top: 2%;
  line-height: 1.2rem;
  font-size: 1.2rem;
}

/* ========================  @media MD **PORTRAIT** (LIGHT) SYSTEM INSTALLATION & CONFIGURATION =============================== */

.full-widthpic4 {
  padding-top: 0;
  height: 300px;

  width: 100%;
}

.p-format4 {
  font-size: 1.2rem;
}

/* ========================  @media MD **PORTRAIT** (LIGHT) OUR COMPANY ================================= */

.icons {
  width: 50%;
  margin: 5% auto 0;
  padding-bottom: 4%;
}

.headerquotes {
  font-size: x-large;
  padding-bottom: 0;
}

.tableheader {
  font-size: 24px;
  padding-bottom: 0;
  margin-top: 5%;
  margin-bottom: 2%;
}

.hrintable {
  border-top: solid #5b5854;
  margin-bottom: 10%;
}

.tabledetailtext {
  font-size: 16px;
  line-height: 1.8;
}


/* ========================  @media MD **PORTRAIT** (DARK) CLOUD & AUTOMATION =========================================== */

.full-widthpic1 {
  padding-top: 8%;
  height: 450px;
  width: 100%;
  object-fit: cover;
  object-position: 0 40%;
}

.image3-container {
  padding: 0;

}


/* ========================  @media MD **LANDSCAPE** (dark) ZEN - CONFIGURATION &  ICT MANAGED SERVICES  ======================================================= */

.light-subheader-text{
  font-size: 1.2rem;
  line-height: 1.5;
  padding-bottom: 5%;
}



/* ========================  @media MD **PORTRAIT** (LIGHT) FULL-TIME SOLUTIONS SUPPORT =================================== */

.p-format1 {
  font-size: 1.2rem;
  line-height: 2rem;
  }

  .full-widthpic3 {
    padding-top: 0;
    margin-top: 5%;
    height: 350px;
    object-fit: contain;
    object-position: 0 0;
  }

  .bottompad {
    padding-bottom: 5%;
    padding-top: 0;
  }

/* ========================  @media MD **PORTRAIT** (LIGHT) COMPLETE SYSTEM BACKUP & SECURITY =================================== */
.pad5 {
  padding-bottom: 5%;
  padding-top: 8%;
}

.p-format5 {
  padding-top: 2%;
  text-align: center;
  line-height: 1.6rem;
  font-size: 1.2rem;
}

.full-widthpic5 {
  padding-top: 0;
  height: 350px;
  object-fit: contain;
  object-position: 0 0;
}

/* ========================  @media MD **PORTRAIT** (LIGHT) INDUSTRIES WE SERVE ===================================== */

.c-format2 {
  padding: 0;
  padding-bottom: 5%;
}

.imagecontainer4 {
  /*background-color: #a499ba;*/
  /* width: 100%;  Remove because prevents col-xs-6 */
  margin-bottom: 2%;
  display: flex;
  align-items: flex-end;
}

.iconinbox {
  width: 70px;
  height: 70px;
  align-items: center;
  margin: auto;
}

.darktext1 {
  font-size: 1rem;
}

/* ========================  @media MD **PORTRAIT** (DARK) WE PROVIDE ALL CLOUD-BASED SOLUTIONS ==================================== */

.imagecontainer5 {
  /*height: 25%; */
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  /*justify-content: left; */
}
/*
.imagecontainer8 {
  height: 25%;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
*/

/*
.imagecontainer8 {
  height: 10%;
  margin-bottom: 0;
  padding-left: 0
  /*display: flex;
  align-items: center;
  justify-content: center; 
}
*/

.iconinbox6 {
  width: 50px;  /*changes actual size of image, the div wrapper auto sizes to it */
  /* height: 50px;  *//*changes actual size of image, the div wrapper auto sizes to it. removing 01.03.23 to allow to auto-height */
  align-items: center;
  margin: auto;
}

.textcontainer5 {
  font-size: .7rem;
  line-height: 1rem;
  word-wrap: break-word;
  width: 100px;
  text-align: center;

  padding-top: 0;
  padding-left: 0;
}


/* ========================  @media MD **PORTRAIT** (LIGHT) OUR SERVICES ======================================================= */


.spacetitleicon2 {
  padding: 0;
  padding-top: 10%;
  padding-bottom: 10%;
}

.r-format2 {
  margin-top: 5px;  /*adds space to the top of elements (images and text) (col) */
  margin-bottom: 5px;  /*adds space to the  elements (images and text) (col) */
  margin-left: 5px;  /*adds space to the  elements (images and text) (col) */
  margin-right: 5px;  /*adds space to the elements (images and text) (col) */
}

.imagecontainer9 {
  /*height: 25%; */
  /*width: 25%;*/
  /*margin: auto;*/
  margin-bottom: 10px;
  padding: 0;
  /*vertical-align: top;*/
}

.iconinbox5 {
  width: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
  height: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
}

.textcontainer4 {
  padding: 0;
  /* display: flex;  <!-- prevents centering of text -->
  align-items: center; <!-- this is function of display: flex */
  text-align: center;
  word-wrap: break-word;
} 




/* ========================  @media MD **PORTRAIT** (DARK) ADVANCE YOUR BUSINESS TRANSFORMATION =================================== */


.full-widthpic2 {
  margin-top: 0;
  height: 300px;
  width: 100%;
  object-fit: cover;
  object-position: 0px 0%;
  opacity: 1;
}

.lighttext-title1 {
  font-family: 'roboto';
  font-size: 1.5rem;
  line-height: 1.5rem;

}


/* ========================= @media MD **PORTRAIT** OUR PARTNERS ============================= */

.header-container {
  margin-bottom: 5%;
}

.partner-logo1 {
  width: 100px;
}

.partner-logo2 {
  width: 160px;
}

.partner-logo3 {
  width: 80px;
}

.partner-logo4 {
  width: 100px;
}



.textcontainer1 {
  margin-top: 0;
  margin-bottom: 0%;
  padding-left: 20px;
  padding-right: 10px;
}

.textcontainer2 {
  margin-top: 0;
  margin-bottom: 0%;
  padding-left: 20px;
  padding-right: 10px;
}

.logo-appearance {
  display: none;
}


/* ========================  @media MD **PORTRAIT** CONTACT US ============================================================== */

.cta-button {
  margin-top: 10%;
  line-height: 100px;
  width: 100%;
  margin-bottom: 20px;
} 

.page-container2 {
  height: 800px;  /* 11.23 adjusts the height of the white space between header and footer */
}





/* ========================  @media MD **PORTRAIT** FOOTER =============================================== */



  .imageincol1 {
    height: 100%;  /* height of image itself */
    margin-top: 0;
    margin-bottom: 0;
  }

  .imageincol2 {
    height: 100%;  /* height of image itself */
    margin-top: 0;
    margin-bottom: 0;
  }

  .imageincol3 {
    height: 100%;  /* height of image itself */
    margin-top: 0;
    margin-bottom: 0;
  }



.testcontainer1 {         /*HAVE TP CHANGE THIS */
/*  border: 2px dashed orange; */
  height: 100px;          /*HAVE TP CHANGE THIS */
  margin-bottom: 2%;   /*HAVE TP CHANGE THIS */
  align-items: center;
}


.footertitles {
  text-align: center;
  font-size: 9px;
}

.footertext {
  text-align: center;
}

.footer-column {
  padding-top: 18px;
}

p {
  margin: 0;
}


.social-icon {
  padding: 0 10px;
  font-size: 1rem;  /*size of social icons */
  color: #ccc;
}

}


/* =================================================================================================== */
/* =====================================  @media SM ***LANDSCAPE*** large phones 481-767.99px START  ============ */
/* ===================================================================================================== */

@media only screen and (min-width:  481.01px) and (max-width: 767.99px) and (orientation: landscape) {


  body {
      /* The file size of this background image is 93% smaller
       * to improve page load speed on mobile internet connections */
      background-image: url(../images/maintenance/landingpage-sm.jpg);
    }

    .navbar-toggler,
    .navbar-toggler:focus,
    .navbar-toggler:active,
    .navbar-toggler-icon:focus {
      outline: 1px !important;
      box-shadow: none;
      border: 10px !important;
      border-color: #a499ba !important;
    }

/* ========================  @media SM ***LANDSCAPE*** GENERAL =========================================== */

.lightslide {
  padding-top: 10%;
   /* padding-left: 0;
    padding-right: 0; */
   /* width: 100%;*/ /* Necessary for page alignment; prevent slide from running off page 8 Aug */
    /*height: 100%; */ /* Necessary to keep container 100% tall for elements */
}

.darkslide {
  padding-top: 5%;
  padding-bottom: 10%;
 /* font-size: 2rem; */ /* dont think the font size should be specified here */
}

.header-container1 {
  margin-bottom: 5%;
}

.header-container4 {
  margin-bottom: 5%;
}

.header-container-pic {
  /*padding-left: 0;
  padding-right: 0;*/
  height: 100px;  /* top container needs to have height specified or else children will run all over */
  /*width: 100%;*/
}

.light-header-font {
  font-size: 1.2rem;
/*  margin-bottom: 0;
  padding-top: 12px;
  padding-left: 5%;
  padding-right: 5%; */
}

.light-header-sub-font {
  font-size: 1.0rem;
}

.dark-header-sub-font {
  font-size: 1.0rem;
}

.dark-header-font {
  /*padding-bottom: 0;
  margin-bottom: 0;*/
  font-size: 1.3rem;
}

.dark-image-text-title {
  line-height: 1rem;
  font-size: 0.7rem;
  margin-bottom: 0;
}

.light-text-title {
  line-height: 1rem; /* vertical spacing of lines of text */
  font-size: 0.8rem; /* the size of the text */
}

.textlightcolor {
  font-size: .6rem;
}

/*
.lightchecklist {
  padding: 12px 5%;
  font-size: .7rem;
}
*/

.darkchecklist {
  /* display: flex; */
  padding: 0 5%;
  justify-content: center;
  font-size: .8rem;
  line-height: 1rem;
}

.li-style {
  margin: 5px 0;
}


.light-header-font2 {
  padding-bottom: 2%;
  width: 100%;
  font-family: 'roboto';
  font-size: 1.5rem;
  font-weight: normal;
  color:  #f4f3ed;
}

.light-subheader-text{
  font-size: 1.3rem;
  line-height: 1.5;
  padding-bottom: 5%;
}

.whitetext {
  line-height: 1.5;
  font-size: medium;
}

.bronzetext {
  line-height: 1.5;
  font-size: medium;
}

.whitetextsm {
  font-size: 1.2rem;
  line-height: 1.2rem;
}

.jobtitle {
  margin-bottom: 5%;
  text-align: center;
  font-size: 1.2rem;
}


/* ========================  @media SM ***LANDSCAPE*** LANDINGPAGE =========================================== */

.navbar-brand {  /* have to remove styles from index.html */
  width: 50px; 
  height: 50px; 
}

.landing-page-container {
  height: 400px;
}

.title-container {
  margin-top: 5%;
}

.landingpage {
  /*margin: 0 15%; */
  padding: 0 3%;
  padding-top: 20px;
  word-wrap: break-word;
  /*font-size: 2rem; */
}

.subtitle-container{
  padding-bottom: 1%;
}


.landing-page-container {
  height: auto;
}

.landing-page-title {
  /*margin: 0 15%; */
  padding: 0 5%;
  padding-top: 0;
  /*font-size: 2rem; */
  /*font-weight: 400;*/
}

.subtitle {
  font-size: 1.5rem;
}

.subtitle1 {
  font-size: 1.5rem;
}

.container-buttons {
 margin-bottom: 20%;
}

.landingpage-trow-spacer {
  height: 40px;
}

.landing-button {
  height: 80px;
  width: 100%;
  margin-bottom: 5%;
}

.landing-button-text {
font-size: 1rem;
}

.landing-button-subtext {
  font-size: .8rem;
}

.button1-format {
  margin-bottom: 10px;
  padding-left: 0;
  padding-right: 0;
  margin-left: 2px;
  margin-right: 2px;
}

/* ========================  @media SM **LANDSCAPE** nLPD ======================================================= */

.spacetitleicon3 {
  padding: 0;
  padding-top: 10%;
  padding-bottom: 10%;
}

.r-format2x3 {
  margin: 5px;  /*adds space between elements (col) */
}

.r-format2x3-1 {
  margin-right: 2%;
  margin-left: 2%;
  padding-bottom: 50px;
  /*width: 450px;*/
}




.textcontainer4 {
  padding: 0;
  /*display: flex;  <!-- display flex interferes with text-align: center ->
  align-items: center; align-items: center is for display: flex */
  text-align: center; /* aligns text under image */
  word-wrap: break-word; 
} 

.textnum {
  font-size: 1rem;
}

/*
.texthead {
  font-size: .8rem;
}
*/

.imagewrapper1 {
  margin-top: 5%;
  margin-bottom: 5%;
  justify-content: center;
}

.imageformat1 {
  height: 150px;
}



/* ========================  @media SM ***LANDSCAPE*** (LIGHT) EXPERIENCE THE NEXT TECHNOLOGY =================== */

.image1-container {
  padding-top: 5%;
  padding-bottom: 5%;
}

.full-widthpic6 {
  margin: 0;
  width: 100%;
  height: 200px;
  object-fit: cover;
  /*object-position: -10px 50%; */
  opacity: 1;
}



/* ==================================  @media SM **LANDSCAPE** SMART ICT ==================================== */


.r-format5 {
  height: 100%;
  width: auto;
}

/*
.text-container1 {
  height: 100%;
  width: auto;
}
*/

.iconinbox7 {
  height: 70%;
  /*width: auto;*/
}

.image-container4 {
height: 425px;
width: auto;
margin-top: 2%;
}

.row-format1 {
  height: 100%;
}

.imagecontainer5 {
  margin-bottom: 0;
  padding-left: 0;
  margin-top: 5%;
}

.iconinbox8 {
  width: 85%;
  height: auto;

}


/* ========================  @media SM **LANDSCAPE* (DARK) BACKUP AS A SERVICE BAAS =============================== */

.btn-outline-violet {
  font-weight: 400;
  font-size: 1rem;
}

/* ========================  @media SM ***LANDSCAPE*** (LIGHT) REAL COLLABORATION FOR YOUR TEAMS =============================== */


/* ========================  @media SM ***LANDSCAPE*** TELEPHONY SOLUTIONS  =============================== */


.image-container6 {
  height: 350px;
  width: auto;
  margin-top: 2%;
  }

  .container-movementl {
    margin-left: 2%;
    padding-top: 5px;
  }
  
  .container-movementr {
    margin-left: 2%;
    padding-top: 5px;
  }
  
  .iconinbox10 {
    width: 80%;
    height: auto;
  }


/* ========================  @media SM ***LANDSCAPE*** (DARK) OUR HOME OFFICE COLLABORATION SOLUTIONS ============================*/

.colheight {
  height: 120px;
}

.imagetext2 {
  font-size: .6rem;
  color: #f4f3ed;
  line-height: 1rem;
  padding: 0 2% 5%;
}

/* ========================  @media SM ***LANDSCAPE*** (LIGHT) IT, Collaboration & Networking INFRASTRUCTURE ARCHITECTURE DESIGN =============================== */

.p-justified1 {
  padding-top: 2%;
  line-height: 1.2rem;
  font-size: .7rem;
}

.icon-lg {
  width: 20%;
  margin-top: 5%;
  margin-bottom: 10%;
}


/* ========================  @media SM ***LANDSCAPE*** (LIGHT) SYSTEM INSTALLATION & CONFIGURATION =============================== */
.p-format4 {
  font-size: .8rem;
}

/* ========================  @media SM ***LANDSCAPE*** (DARK) CLOUD & AUTOMATION =========================================== */

.full-widthpic1 {
  padding-top: 0;
  margin-top: 5%;
  margin: 0;
  height: 200px;
  max-width: 600px;
  object-fit: cover;
  object-position: 0 35%;
  opacity: 1;
}

.image3-container {
  padding: 5% 0 0 0;

}

.light-subheader-text{
  font-size: 1.3rem;
  line-height: 1.5;
  padding-bottom: 5%;
}

.p-justified-title {
  padding-top: 5%;
  line-height: 1.5rem;
}

/* ========================  @media SM ***LANDSCAPE*** (LIGHT) FULL-TIME SOLUTIONS SUPPORT =================================== */

.full-widthpic3 {
  padding-top: 0;
  height: 200px;
  max-width: 600px;
  margin: 5% 0 0 0;
  object-fit: cover;
  object-position: 0 0;
  opacity: 1;
}

.p-format1 {
font-size: .8rem;
line-height: 1.2rem;
}

.emaillink {
  font-size: .8rem;
}

.bottompad {
  padding-bottom: 5%;
  padding-top: 5%;
}

/* ========================  @media SM ***LANDSCAPE*** (LIGHT) COMPLETE SYSTEM BACKUP & SECURITY =================================== */
.full-widthpic5 {
  padding-top: 0;
  height: 175px;
  max-width: 600px;
  object-fit: cover;
  margin: 5% 0 0 0;
  object-position: 0 40%;
  opacity: 1;
}

.p-format5 {
  padding-top: 2%;
  text-align: center;
  line-height: 1.2rem;
  font-size: .9rem;
}

/* ========================  @media SM ***LANDSCAPE*** (LIGHT) INDUSTRIES WE SERVE ===================================== */

.r-format1{
  margin: 0;
}

.imagecontainer4 {
  /*background-color: #a499ba; */
  /* width: 100%;  Remove because prevents col-xs-6 */
  margin-bottom: 0;
  display: flex;
  align-items: flex-end;
}

.iconinbox {
  width: 50px;
  height: 50px;
  align-items: center;
  margin: auto;
}

.darktext1 {
  font-size: .8rem;
}

.c-format2 {
  padding: 0;
  padding-bottom: 20px;
}
/*
.c-format2 {
  display: inline;
  width: 90%;
}
*/

/* ========================  @media SM ***LANDSCAPE*** (DARK) WE PROVIDE ALL CLOUD-BASED SOLUTIONS ==================================== */


.imagecontainer5 {
  /*height: 25%; */
  /*width: 25%;*/
  margin: 0;
  margin-bottom: 10px;
  padding-top: 5%;
  padding-bottom: 5%;
  /*display: flex;
  align-items: center;
  justify-content: left;*/
}

.imagecontainer8 {
  /*height: 10%; */
  margin-bottom: 0;
  padding-left: 0;
  /*display: flex;
  align-items: center;
  justify-content: center; */
}

.spacetitleicon1 {
  padding: 0;
  padding-top: 2%;
}

.iconinbox6 {
  width: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
  height: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
  justify-content: left;
  justify-items: left;
  float: left;
  margin: auto;
  vertical-align: top;
  margin: auto;
}

.textcontainer5 {
  font-size: .7rem;
  line-height: 1rem;
  word-wrap: break-word;
  width: 90px;
  text-align: center;
  padding-top: 0;
  padding: 0;
}

.lighttext {
  font-size: .9rem;
  line-height: 1.5rem;
}

/* ========================  @media SM ***LANDSCAPE*** (LIGHT) OUR SERVICES ======================================================= */



.spacetitleicon2 {
  padding: 0;
  padding-top: 0;
  padding-bottom: 30px;
}

.r-format2 {
  margin: 0px;  /*adds space to the top of elements (images and text) (col) */
}

.imagecontainer9 {
  /*height: 25%; */
  /*width: 25%;*/
  /*margin: auto;*/
  margin-bottom: 10px;
  padding: 0;
}


.iconinbox5 {
  width: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
  height: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
}

.textcontainer4 {
  padding: 0;
  /* display: flex;  <!-- prevents centering of text -->
  align-items: center; <!-- this is function of display: flex */
  text-align: center;
  word-wrap: break-word;
} 



/* ========================  @media SM ***LANDSCAPE*** (DARK) ADVANCE YOUR BUSINESS TRANSFORMATION =================================== */


.full-widthpic2 {
  margin-top: 0;
  height: 170px;
  max-width: 600px;
  object-fit: cover;
  object-position: 0px 0%;
  opacity: 1;
}

/* ========================= @media SM ***LANDSCAPE*** OUR PARTNERS ============================= */

.header-container {
  margin-bottom: 5%;
}


.row-format2 {
  margin: 0;  /* removing the margins because they should be in the columns for blaance in small view ports */
  }


.col-format4 {
margin-top: 10%;
margin-bottom: 10%;
}


.textcontainer1 {
  margin-top: 0;
  margin-bottom: 10%;
  padding-left: 10px;
  padding-right: 10px;
}

.textcontainer2 {
  margin-top: 0;
  margin-bottom: 10%;
  padding-left: 10px;
  padding-right: 10px;
}

.logo-appearance {
  display: none;
}

.status-text {
  font-size: 1rem;
}

.textcontainer3 {
  text-align: justify;
  text-justify: auto;
  padding-left: 0;
  padding-right: 0;
}

.partner-text {
  font-size: .9rem;
}


/* ========================  @media SM ***LANDSCAPE*** CONTACT US ============================================================== */

.cta-button {
  margin-top: 10%;
  line-height: 80px;
  width: 100%;
  margin-bottom: 20px;
} 

.page-container2 {
  height: 400px;  /* 11.23 adjusts the height of the white space between header and footer */
}

/* ========================  @media SM ***LANDSCAPE*** FOOTER =============================================== */


.longtextpadding {
  padding-left: 3%;
  padding-right: 3%;
}


  .bottompad1 {
    padding-bottom: 10%;
  }


  .headerquotes {
    font-size: 1.2rem;
  }

  .tableheader {
    font-size: 1rem;
    margin-top: 2%;
    margin-bottom: 2%;
  }

  .tabledetailtext {
    line-height: 3rem;
    font-size: .6rem;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  .full-widthpic {
    padding-top: 40px;
    width: 100%;
    height: 300px;
    object-fit: contain;
    object-position: 0 15%;
    opacity: 1;
  }

  .full-widthpic4 {
    height: 200px;
    max-width: 600px;
    padding-top: 0;
    object-fit: cover;
    object-position: 0 20%;
    opacity: 1;
  }

  .carouselimage {
    margin-top: 0;
    object-fit: contain;
    object-position: 0 0%;
    opacity: 1;
  }



  .oneiconinrow {
    padding-top: 10%;
    padding-bottom: 2%;
    width: 200px;
  }

.colpad7 {
    padding-top: 5%;

}

  .textcontainer {
    position: relative;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 0;
  }

  .imagecontainer1 {
  height: 50%;  /* height of container*/
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
  }

  .imagecontainer2 {
  height: 50%;  /* height of container*/
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
  }

  .imagecontainer3 {
  height: 50%;  /* height of container*/
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
  }

  .testcontainer1 {         /*HAVE TP CHANGE THIS */
  /*  border: 2px dashed orange; */
    height: 225px;          /*HAVE TP CHANGE THIS */
    margin-bottom: 2%;   /*HAVE TP CHANGE THIS */
    align-items: center;
  }

  .imageincol1 {
    height: 100%;  /* height of image itself */
    margin-top: 0;
    margin-bottom: 0;
  }

  .imageincol2 {
    height: 100%;  /* height of image itself */
    margin-top: 0;
    margin-bottom: 0;
  }

  .imageincol3 {
    height: 100%;  /* height of image itself */
    margin-top: 0;
    margin-bottom: 0;
  }

  .pic3pad {
    padding-bottom: 24px;
  }

  .picchecklist {
    padding-top: 2%;
  }

  .lighttext1{
    font-size: .7rem;
    line-height: 1.2rem;
  }

  .brheight {
    line-height: 2rem;
  }



  .light-subheader-text{
    font-size: 1rem;
    line-height: 1.5;
    padding-bottom: 5%;
  }


  .icon-lg {
    width: 30%;
    margin-top: 5%;
    margin-bottom: 10%;
  }

  .iconcontainer {
  /*  background-color: pink;
    border: 2px solid red; */
    height: 100%;
    margin-bottom: 2%;
    width: 25%;
  }

  .lighttext-title1 {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .p-justified {
    padding-top: 2%;
    text-align: center;
    line-height: 1.6rem;
    font-size: .7rem;
  }

.lighttextheader {
    margin-bottom: 5%;
}


.light-header-font2 {
  padding-bottom: 2%;
  width: 100%;
  font-size: 1.2rem;
}

.oneimageinrow {
  width: 200px;
  margin: auto;
}



.footertitles {
  font-size: 9px;
  text-align: center;
}

.footertext {
  text-align: center;
}

.footer-column {
  padding-top: 18px;
}

p {
  margin: 0;
}


}



/* =================================================================================================== */
/* =====================================  @media SM ***PORTRAIT*** IPAD large phones 481-767.99px START  ================================== */
/* ===================================================================================================== */

@media only screen and (min-width:  481.01px) and (max-width: 767.99px) and (orientation: PORTRAIT) {


  body {
      /* The file size of this background image is 93% smaller
       * to improve page load speed on mobile internet connections */
      background-image: url(../images/maintenance/landingpage-sm.jpg);
    }

    .navbar-toggler,
    .navbar-toggler:focus,
    .navbar-toggler:active,
    .navbar-toggler-icon:focus {
      outline: 1px !important;
      box-shadow: none;
      border: 10px !important;
      border-color: #a499ba !important;
    }

/* ========================  @media SM ***PORTRAIT*** GENERAL =========================================== */

.lightslide {
  padding-top: 10%;
   /* padding-left: 0;
    padding-right: 0; */
    /*width: 100%;*/ /* Necessary for page alignment; prevent slide from running off page 8 Aug */
   /* height: 100%; */ /* Necessary to keep container 100% tall for elements */
  }

.darkslide {
  padding-top: 10%;
  padding-bottom: 10%;
  /* font-size: 2rem; */ /* dont think the font size should be specified here */
}

.header-container1 {
  margin-bottom: 5%;
}

.header-container4 {
  margin-bottom: 5%;
}

.header-container-pic {
  /*padding-left: 0;
  padding-right: 0;*/
  height: 50px;  /* top container needs to have height specified or else children will run all over */
  /*width: 100%;*/
}

.light-header-font {
  font-size: 1.2rem;
  /*margin-bottom: 0;
  padding-top: 12px;
  padding-left: 5%;
  padding-right: 5%; */
}

.light-header-sub-font {
  font-size: 1.5rem;
}

.dark-header-sub-font {
  font-size: 1.5rem;
}

.dark-header-font {
  /*padding-bottom: 0;
  margin-bottom: 0;*/
  font-size: 1.3rem;
}


.dark-image-text-title {
  line-height: 1rem;
  font-size: 0.7rem;
  margin-bottom: 0;
}

.light-text-title {
  line-height: 1rem; /* vertical spacing of lines of text */
  font-size: 0.8rem; /* the size of the text */
}

.textlightcolor {
  font-size: .6rem;
}

/*
.lightchecklist {
  padding: 12px 5%;
  font-size: .7rem;
}
*/

.darkchecklist {
  padding: 0 5%;
  justify-content: center;
  font-size: .8rem;
  line-height: 1rem;
}

.li-style {
  margin: 5px 0;
}


.light-header-font2 {
  padding-bottom: 2%;
  width: 100%;
  font-family: 'roboto';
  font-size: 1.5rem;
  font-weight: normal;
  color:  #f4f3ed;
}

.light-subheader-text{
  font-size: 1rem;
  line-height: 1.5;
  padding-bottom: 5%;
}

.whitetext {
  line-height: 1.5;
  font-size: medium;
}

.bronzetext {
  line-height: 1.5;
  font-size: medium;
}

.whitetextsm {
  font-size: 1.2rem;
  line-height: 1.2rem;
}

.jobtitle {
  margin-bottom: 5%;
  text-align: center;
  font-size: 1.2rem;
}


/* ========================  @media SM ***PORTRAIT*** LANDINGPAGE =========================================== */

.navbar-brand {  /* have to remove styles from index.html */
  width: 50px; 
  height: 50px; 
}

.landing-page-container {
  height: 900px;
}

.title-container {
  margin-top: 10%;
}

.landingpage {
  /*margin: 0 15%; */
  padding: 4% 5%;
  padding-top: 40px;
  word-wrap: break-word;
  /*font-size: 2rem; */
}

.landing-page-title {
  /*margin: 0 15%; */
  padding: 4% 5%;
  padding-top: 0;
  word-wrap: break-word;
  /*font-size: 2rem; */
  /*font-weight: 400;*/
}

.subtitle {
  font-size: 1.5rem;
}

.subtitle1 {
  font-size: 1.5rem;
}

.container-buttons {
 margin-top: 10%;
}

.landingpage-trow-spacer {
  height: 40px;
}

.landing-button {
  height: 100px;
  width: 100%;
  margin-bottom: 5%;
  padding-left: 0;
  padding-right: 0;
}

.landing-button-text {
font-size: 1rem;
}

.landing-button-subtext {
  font-size: .8rem;
}

.button1-format {
  margin-bottom: 10px;
  padding-left: 0;
  padding-right: 0;
  margin-left: 1%;
  margin-right: 1%;
}

/* ========================  @media SM **PORTRAIT** nLPD ======================================================= */

.lawcontainerformat {
  margin-top: 5%;
}

.spacetitleicon3 {
  padding: 0;
  padding-top: 115px;
  padding-bottom: 10%;
}

.r-format2x3 {
  margin: 5px;  /*adds space between elements (col) */
}

.r-format2x3-1 {
  margin-right: 2%;
  margin-left: 2%;
  padding-bottom: 50px;
  /*width: 600px;*/
}



.textcontainer4 {
  padding: 0;
  /*display: flex;  <!-- display flex interferes with text-align: center ->
  align-items: center; align-items: center is for display: flex */
  text-align: center; /* aligns text under image */
  word-wrap: break-word; 
} 

.textnum {
  font-size: 1rem;
}

/*
.texthead {
  font-size: .8rem;
}
*/

.imagewrapper1 {
  margin-top: 5%;
  margin-bottom: 5%;
  justify-content: center;
}
.imageformat1 {
  height: 150px;
}

.imageformat2 {
  height: 125px;
}



/* ========================  @media SM ***PORTRAIT*** (LIGHT) EXPERIENCE THE NEXT TECHNOLOGY =================== */

.image1-container {
  padding-top: 5%;
  padding-bottom: 5%;
}

.full-widthpic6 {
  margin: 0;
  width: 100%;
  height: 225px;
  object-fit: cover;
  /*object-position: -10px 50%; */
  opacity: 1;
}



/* ================================== @media SM **PORTRAIT**  SMART ICT ==================================== */


.r-format5 {
  height: 100%;
  width: auto;
}

/*
.text-container1 {
  height: 100%;
  width: auto;
}
*/

.iconinbox7 {
  height: 70%;
  /*width: auto;*/
}

.image-container4 {
height: 600px;
width: auto;
margin-top: 5%;
}

.row-format1 {
  height: 100%;
}

.imagecontainer5 {
  margin-bottom: 0;
  padding-left: 0;
  margin-top: 5%;
}

.iconinbox8 {
  width: 85%;
  height: auto;
}


/* ========================  @media SM **PORTRAIT** (DARK) BACKUP AS A SERVICE BAAS =============================== */
.btn-outline-violet {
  font-weight: 400;
  font-size: .8rem;
}


/* ========================  @media SM ***PORTRAIT*** (LIGHT) REAL COLLABORATION FOR YOUR TEAMS =============================== */


/* ========================  @media SM ***PORTRAIT*** TELEPHONY SOLUTIONS =============================== */


.image-container6 {
  height: 400px;
  width: auto;
  margin-top: 5%;
  }

  .container-movementl {
    margin-left: 2%;
    padding-top: 5px;
  }
  
  .container-movementr {
    margin-left: 2%;
    padding-top: 5px;
  }

  .iconinbox10 {
    width: 80%;
    height: auto;
  }


/* ========================  @media SM ***PORTRAIT*** (DARK) OUR HOME OFFICE COLLABORATION SOLUTIONS ============================*/

.colheight {
  height: 120px;
}

.imagetext2 {
  font-size: .6rem;
  color: #f4f3ed;
  line-height: 1rem;
  padding: 0 2% 5%;
}

/* ========================  @media SM ***PORTRAIT*** (LIGHT) IT, Collaboration & Networking INFRASTRUCTURE ARCHITECTURE DESIGN =============================== */

.p-justified1 {
  padding-top: 2%;
  line-height: 1.2rem;
  font-size: .7rem;
}

.icon-lg {
  width: 20%;
  margin-top: 5%;
  margin-bottom: 10%;
}



/* ========================  @media SM ***PORTRAIT*** (LIGHT) SYSTEM INSTALLATION & CONFIGURATION =============================== */


.p-format4 {
  font-size: .8rem;
}

.full-widthpic4 {
  padding-top: 0;
  margin-top: 5%;
  height: 225px;
  width: 100%;
  object-fit: cover;
  object-position: 0 35%;
  opacity: 1;
}

.image2-container {
  padding-top: 0;
}

/* ========================  @media SM ***PORTRAIT*** (DARK) CLOUD & AUTOMATION =========================================== */

.full-widthpic1 {
  padding-top: 8%;
  margin: 0;
  height: 300px;
  width: 100%;
  object-fit: cover;
  object-position: 0 35%;
  opacity: 1;
}

.image3-container {
  padding: 5% 0 0 0;

}

.light-subheader-text{
  font-size: 1rem;
  line-height: 1.5;
  padding-bottom: 5%;
}

.p-justified-title {
  padding-top: 5%;
  line-height: 1.5rem;
}

/* ========================  @media SM ***PORTRAIT*** (LIGHT) FULL-TIME SOLUTIONS SUPPORT =================================== */

.full-widthpic3 {
  padding-top: 0%;
  height: 300px;
  width: 100%;
  margin-top: 5%;
  object-fit: cover;
  object-position: 0 0;
}

.p-format1 {
font-size: .8rem;
line-height: 1.2rem;
}

.emaillink {
  font-size: .8rem;
}

.bottompad {
  padding-bottom: 5%;
  padding-top: 0;
}


/* ========================  @media SM ***PORTRAIT*** (LIGHT) COMPLETE SYSTEM BACKUP & SECURITY =================================== */
.full-widthpic5 {
  margin-top: 5%;
  height: 225px;
  padding-top: 0;
  object-fit: cover;
  object-position: 0 40%;
  opacity: 1;
}

.p-format5 {
  padding-top: 2%;
  text-align: center;
  line-height: 1.2rem;
  font-size: .9rem;
}

/* ========================  @media SM ***PORTRAIT*** (LIGHT) INDUSTRIES WE SERVE ===================================== */

.r-format1{
  margin: 0;
}

.imagecontainer4 {
  /*background-color: #a499ba; */
  /* width: 100%;  Remove because prevents col-SM ***PORTRAIT***-6 */
  margin-bottom: 0;
  display: flex;
  align-items: flex-end;
}

.iconinbox {
  width: 50px;
  height: 50px;
  align-items: center;
  margin: auto;
}

.darktext1 {
  font-size: .8rem;
}

.c-format2 {
  padding: 0;
  padding-bottom: 20px;
}
/*
.c-format2 {
  display: inline;
  width: 90%;
}
*/

/* ========================  @media SM ***PORTRAIT*** (DARK) WE PROVIDE ALL CLOUD-BASED SOLUTIONS ==================================== */


.imagecontainer5 {
  /*height: 25%; */
  /*width: 25%;*/
  margin: 0;
  margin-bottom: 10px;
  padding-top: 5%;
  padding-bottom: 5%;
  /*display: flex;
  align-items: center;
  justify-content: left;*/
}

.imagecontainer8 {
  /*height: 10%; */
  margin-bottom: 0;
  padding-left: 0;
  /*display: flex;
  align-items: center;
  justify-content: center; */
}

.spacetitleicon1 {
  padding: 0;
  padding-top: 2%;
}

.iconinbox6 {
  width: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
  height: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
  justify-content: left;
  justify-items: left;
  float: left;
  margin: auto;
  vertical-align: top;
  margin: auto;
}

.textcontainer5 {
  font-size: .7rem;
  line-height: 1rem;
  word-wrap: break-word;
  width: 90px;
  text-align: center;

  padding-top: 0;
  padding: 0;
}


.lighttext {
  font-size: .9rem;
  line-height: 1.5rem;
}

/* ========================  @media SM ***PORTRAIT*** (LIGHT) OUR SERVICES ======================================================= */



.spacetitleicon2 {
  padding: 0;
  padding-top: 10%;
  padding-bottom: 10%;
}

.r-format2 {
  margin: 0;  /*adds space to the top of elements (images and text) (col) */
}


.imagecontainer9 {
  /*height: 25%; */
  /*width: 25%;*/
  /*margin: auto;*/
  margin-bottom: 10px;
  padding: 0;
}


.iconinbox5 {
  width: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
  height: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
}


.textcontainer4 {
  padding: 0;
  /* display: flex;  <!-- prevents centering of text -->
  align-items: center; <!-- this is function of display: flex */
  text-align: center;
  word-wrap: break-word;
} 




/* ========================  @media SM ***PORTRAIT*** (DARK) ADVANCE YOUR BUSINESS TRANSFORMATION =================================== */


.full-widthpic2 {
  margin-top: 0;
  height: 225px;
  width: 100%;
  object-fit: cover;
  object-position: 0px 0%;
  opacity: 1;
}


/* ========================= @media SM ***PORTRAIT*** OUR PARTNERS ============================= */

.header-container {  /* adding a margin here to blanace our the removal of margins for rows...again keeps margins of tables to rows to balance small view ports */
  margin-bottom: 5%;
}

.row-format2 {
  margin: 0;  /* removing the margins because they should be in the columns for blaance in small view ports */
  }

.col-format4 {
  margin-top: 10%;
  margin-bottom: 10%;
  }

  
.textcontainer1 {
  margin-top: 0;
  margin-bottom: 10%;
  padding-left: 20px;
  padding-right: 0;
}

.textcontainer2 {
  margin-top: 0;
  margin-bottom: 10%;
  padding-left: 20px;
  padding-right: 20px;
}

.logocontainer {
 height: 125px;
  }


.partner-logo1 {
  width: 80px;
}

.partner-logo3 {
  width: 70px;
}

.logo-appearance {
  display: none;
}

.status-text {
  font-size: 1rem;
}

.textcontainer3 {
  text-align: justify;
  text-justify: auto;
  padding-left: 0;
  padding-right: 0;
}


.partner-text {
  font-size: .9rem;
}


/* ========================  @media SM ***PORTRAIT*** CONTACT US ============================================================== */

.cta-button {
  margin-top: 10%;
  line-height: 70px;
  width: 70%;
  margin-bottom: 20px;
} 

.page-container2 {
  height: 500px;  /* 11.23 adjusts the height of the white space between header and footer */
}


/* ========================  @media SM ***PORTRAIT*** FOOTER =============================================== */


.longtextpadding {
  padding-left: 3%;
  padding-right: 3%;
}

  .button1-format {
    padding-top: 0;
  }

  .bottompad1 {
    padding-bottom: 10%;
  }


  .headerquotes {
    font-size: 1.2rem;
  }

  .tableheader {
    font-size: 1rem;
    margin-top: 2%;
    margin-bottom: 2%;
  }

  .tabledetailtext {
    line-height: 3rem;
    font-size: .6rem;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
  }


  .full-widthpic {
    padding-top: 40px;
    width: 100%;
    height: 300px;
    object-fit: contain;
    object-position: 0 15%;
    opacity: 1;
  }



  .carouselimage {
    margin-top: 0;
    object-fit: contain;
    object-position: 0 0%;
    opacity: 1;
  }



  .oneiconinrow {
    padding-top: 10%;
    padding-bottom: 2%;
    width: 200px;
  }

.colpad7 {
    padding-top: 5%;

}

  .textcontainer {
    position: relative;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 0;
  }

  .imagecontainer1 {
  height: 50%;  /* height of container*/
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
  }

  .imagecontainer2 {
  height: 50%;  /* height of container*/
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
  }

  .imagecontainer3 {
  height: 50%;  /* height of container*/
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
  }

  .testcontainer1 {         /*HAVE TP CHANGE THIS */
  /*  border: 2px dashed orange; */
    height: 225px;          /*HAVE TP CHANGE THIS */
    margin-bottom: 2%;   /*HAVE TP CHANGE THIS */
    align-items: center;
  }

  .imageincol1 {
    height: 100%;  /* height of image itself */
    margin-top: 0;
    margin-bottom: 0;
  }

  .imageincol2 {
    height: 100%;  /* height of image itself */
    margin-top: 0;
    margin-bottom: 0;
  }

  .imageincol3 {
    height: 100%;  /* height of image itself */
    margin-top: 0;
    margin-bottom: 0;
  }

  .pic3pad {
    padding-bottom: 24px;
  }

  .picchecklist {
    padding-top: 2%;
  }

  .lighttext1{
    font-size: .7rem;
    line-height: 1.2rem;
  }

  .brheight {
    line-height: 2rem;
  }



  .iconcontainer {
  /*  background-color: pink;
    border: 2px solid red; */
    height: 100%;
    margin-bottom: 2%;
    width: 25%;
  }

  .lighttext-title1 {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .p-justified {
    padding-top: 2%;
    text-align: center;
    line-height: 1.6rem;
    font-size: .7rem;
  }

.lighttextheader {
    margin-bottom: 5%;
}


.light-header-font2 {
  padding-bottom: 2%;
  width: 100%;
  font-size: 1.2rem;
}

.oneimageinrow {
  width: 200px;
  margin: auto;
}



.footertitles {
  font-size: 9px;
  text-align: center;
}

.footertext {
  text-align: center;
}

.footer-column {
  padding-top: 18px;
}

p {
  margin: 0;
}


}


/* =================================================================================================== */
/* =====================================  @media XS ***LANDSCAPE*** MOBILE PHONES 320-480px START  ================================== */
/* ===================================================================================================== */

@media screen and (max-width: 480.99px) and (orientation: landscape) {


  body {
      /* The file size of this background image is 93% smaller
       * to improve page load speed on mobile internet connections */
      background-image: url(../images/maintenance/landingpage-sm.jpg);
    }

    .navbar-toggler,
    .navbar-toggler:focus,
    .navbar-toggler:active,
    .navbar-toggler-icon:focus {
      outline: 1px !important;
      box-shadow: none;
      border: 10px !important;
      border-color: #a499ba !important;
    }

 /* ========================  @media XS ***LANDSCAPE*** GENERAL =========================================== */

.lightslide {
  padding-top: 10%;
  /* padding-left: 0;
  padding-right: 0; */
  /*width: 100%; *//* Necessary for page alignment; prevent slide from running off page 8 Aug */
  /* height: 100%; */ /* Necessary to keep container 100% tall for elements */
}


.darkslide {
  padding-top: 10%;
  padding-bottom: 10%;
  /* font-size: 2rem; */ /* dont think the font size should be specified here */
}

.header-container1 {
  margin-bottom: 5%;
}

.header-container4 {
  margin-bottom: 5%;
}


.header-container-pic {
  /*padding-left: 0;
  padding-right: 0;*/
  height: 100px;  /* top container needs to have height specified or else children will run all over */
  /*width: 100%;*/
}

.light-header-font {
  font-size: 1.3rem;
/*  margin-bottom: 0;
  padding-top: 12px;
  padding-left: 5%;
  padding-right: 5%;*/
}

.light-header-sub-font {
  font-size: 1.5rem;
}

.dark-header-font {
  /*padding-bottom: 0;
  margin-bottom: 0;*/
  font-size: 1.3rem;
}

.dark-header-sub-font {
  font-size: 1.1rem;
}

.dark-image-text-title {
  line-height: 1rem;
  font-size: 0.7rem;
  margin-bottom: 0;
}

.light-text-title {
  line-height: 1rem; /* vertical spacing of lines of text */
  font-size: 0.8rem; /* the size of the text */
}

.textlightcolor {
  font-size: .6rem;
}

/*
.lightchecklist {
  padding: 12px 5%;
  font-size: .7rem;
}
*/

.darkchecklist {
  padding: 0 8%;
  justify-content: center;
  font-size: .8rem;
  line-height: 1rem;
}

.li-style {
  margin: 5px 0;
}


.light-header-font2 {
  padding-bottom: 2%;
  font-size: 1.5rem;
}

.light-subheader-text{
  font-size: 1rem;
  line-height: 1.5;
  padding-bottom: 5%;
}

.whitetext {
  line-height: 1.5;
  font-size: medium;
}

.bronzetext {
  line-height: 1.5;
  font-size: medium;
}

.whitetextsm {
  font-size: 1.2rem;
  line-height: 1.2rem;
}

.jobtitle {
  margin-bottom: 5%;
  text-align: center;
  font-size: 1.2rem;
}



/* ========================  @media XS ***LANDSCAPE*** LANDINGPAGE =========================================== */

.navbar-brand {  /* have to remove styles from index.html */
  width: 50px; 
  height: 50px; 
}

.title-container {
  margin-top: 10%;
}

.landingpage {
  /*margin: 0 15%; */
  padding: 4% 15%;
  padding-top: 40px;
  word-wrap: break-word;
  /*font-size: 2rem; */
}

.landing-page-title {
  /*margin: 0 15%; */
  padding: 4% 5%;
  padding-top: 0;
  word-wrap: break-word;
  /*font-size: 2rem; */
  /*font-weight: 400;*/
}

.subtitle {
  font-size: 1.5rem;
}

.subtitle1 {
  font-size: 1.5rem;
}

.container-buttons {
 margin-bottom: 20%;
}

.landingpage-trow-spacer {
  height: 40px;
}

.landing-button {
  /*line-height: 1.5; */
  width: 100%;
  margin-bottom: 5%;
  height: 80px;
}

.landing-button-text {
font-size: 1rem;
}

.landing-button-subtext {
  font-size: .8rem;
}

.button1-format {
  margin-bottom: 10px;
  padding-left: 5%;
  padding-right: 5%;
}

/* ========================  @media XS **LANDSCAPE** nLPD ======================================================= */

.spacetitleicon3 {
  padding: 0;
  padding-top: 10%;
  padding-bottom: 10%;
}

.header-container2 {

  padding: 0;
  /* height: 100px;  /* top container needs to have height specified or else children will run all over */
  /*width: 100%; */
}

.r-format2x3 {
  margin: 5px;  /*adds space between elements (col) */
}

.r-format2x3-1 {
  margin-right: 2%;
  margin-left: 2%;
  padding-bottom: 50px;
 /* width: 450px;*/
}



.textcontainer4 {
  padding: 0;
  /*display: flex;  <!-- display flex interferes with text-align: center ->
  align-items: center; align-items: center is for display: flex */
  text-align: center; /* aligns text under image */
  word-wrap: break-word; 
} 


.textnum {
  font-size: 1rem;
}

/*
.texthead {
  font-size: .8rem;
}
*/

.imagewrapper1 {
  margin-top: 5%;
  margin-bottom: 5%;
  justify-content: center;
}
.imageformat1 {
  height: 50px;
}



/* ========================  @media XS ***LANDSCAPE*** (LIGHT) EXPERIENCE THE NEXT TECHNOLOGY =================== */

.image1-container {
  padding-top: 5%;
  padding-bottom: 5%;
}


.full-widthpic6 {
  margin: 0;
  width: 100%;
  height: 150px;
  object-fit: cover;
  /*object-position: -10px 50%; */
}

/* =================================  @media XS **LANDSCAPE** SMART ICT ==================================== */



.r-format5 {
  height: 100%;
  width: auto;
}

/*
.text-container1 {
  height: 100%;
  width: auto;
}
*/

.iconinbox7 {
  height: 70%;
  /*width: auto;*/
}

.image-container4 {
height: 600px;
width: auto;
margin-top: 5%;
}

.row-format1 {
  height: 100%;
}

.imagecontainer5 {
  margin-bottom: 0;
  padding-left: 0;
  margin-top: 5%;

}

.iconinbox8 {
  width: 85%;
  height: auto;

}

/* ========================  @media XS **LANDSCAPE** (DARK) BACKUP AS A SERVICE BAAS =============================== */

.btn-outline-violet {
  font-weight: 400;
  font-size: .8rem;
}


/* ========================  @media XS ***LANDSCAPE*** (LIGHT) REAL COLLABORATION FOR YOUR TEAMS =============================== */


/* ========================  @media XS ***LANDSCAPE*** TELEPHONY SOLUTIONS =============================== */

.image-container6 {
  height: 350px;
  width: auto;
  margin-top: 5%;
  }

  .container-movementl {
    margin-left: 2%;
    padding-top: 5px;
  }
  
  .container-movementr {
    margin-left: 2%;
    padding-top: 5px;
  }

  .iconinbox10 {
    width: 90%;
    height: auto;
  }


/* ========================  @media XS ***LANDSCAPE*** (DARK) OUR HOME OFFICE COLLABORATION SOLUTIONS ============================*/

.colheight {
  height: 120px;
}

.imagetext2 {
  font-size: .6rem;
  color: #f4f3ed;
  line-height: 1rem;
  padding: 0 2% 5%;
}

/* ========================  @media XS ***LANDSCAPE*** (LIGHT) IT, Collaboration & Networking INFRASTRUCTURE ARCHITECTURE DESIGN =============================== */

.p-justified1 {
  padding-top: 2%;
  line-height: 1.2rem;
  font-size: .7rem;
}

.icon-lg {
  width: 20%;
  margin-top: 5%;
  margin-bottom: 10%;
}


/* ========================  @media XS ***LANDSCAPE*** (LIGHT) SYSTEM INSTALLATION & CONFIGURATION =============================== */
.p-format4 {
  font-size: .8rem;
}

/* ========================  @media XS ***LANDSCAPE*** (DARK) CLOUD & AUTOMATION =========================================== */

.full-widthpic1 {
  padding-top: 8%;
  margin: 0;
  height: 175px;
  width: 100%;
  object-fit: cover;
  object-position: 0 35%;
  opacity: 1;
}

.image3-container {
  padding: 5% 0 0 0;

}

.p-justified-title {
  padding-top: 5%;
  line-height: 1.5rem;
}

/* ========================  @media XS ***LANDSCAPE*** (LIGHT) FULL-TIME SOLUTIONS SUPPORT =================================== */

.full-widthpic3 {
  padding-top: 8%;
  height: 175px;
  width: 100%;
  margin: 0;
  object-fit: cover;
  object-position: 0 0;
}

.p-format1 {
font-size: .8rem;
line-height: 1.2rem;
}

.emaillink {
  font-size: .8rem;
}

.bottompad {
  padding-bottom: 5%;
  padding-top: 0;
}

/* ========================  @media XS ***LANDSCAPE*** (LIGHT) COMPLETE SYSTEM BACKUP & SECURITY =================================== */
.full-widthpic5 {
  padding-top: 8%;
  height: 175px;
  object-fit: cover;
  object-position: 0 40%;
  opacity: 1;
}

.p-format5 {
  padding-top: 2%;
  text-align: center;
  line-height: 1.2rem;
  font-size: .9rem;
}

/* ========================  @media XS ***LANDSCAPE*** (LIGHT) INDUSTRIES WE SERVE ===================================== */

.r-format1{
  margin: 0;
}

.imagecontainer4 {
  /*background-color: #a499ba; */
  /* width: 100%;  Remove because prevents col-xs-6 */
  margin-bottom: 0;
  display: flex;
  align-items: flex-end;
}

.iconinbox {
  width: 50px;
  height: 50px;
  align-items: center;
  margin: auto;
}

.darktext1 {
  font-size: .8rem;
}

.c-format2 {
  padding: 0;
  padding-bottom: 20px;
}
/*
.c-format2 {
  display: inline;
  width: 90%;
}
*/

/* ========================  @media XS **LANDSCAPE** (LIGHT) OUR COMPANY ================================= */

.icons {
  width: 50%;
  margin: 10% auto 2%;
  padding-bottom: 4%;
}

.headerquotes {
  font-size: x-large;
  padding-bottom: 2%;
  margin-left: 5%;
  margin-right: 5%;
}

.tableheader {
  font-size: larger;
  padding: 2%;
  margin-top: 10%;
  margin-bottom: 2%;
}



.tabledetailtext {
  font-size: small;
}


/* ========================  @media XS ***LANDSCAPE*** (DARK) WE PROVIDE ALL CLOUD-BASED SOLUTIONS ==================================== */


.imagecontainer5 {
  /*height: 25%; */
  /*width: 25%;*/
  margin: 0;
  margin-bottom: 10px;
  padding-top: 5%;
  padding-bottom: 5%;
  /*display: flex;
  align-items: center;
  justify-content: left;*/
}

.imagecontainer8 {
  /*height: 10%; */
  margin-bottom: 0;
  padding-left: 0;
  /*display: flex;
  align-items: center;
  justify-content: center; */
}

.spacetitleicon1 {
  padding: 0;
  padding-top: 2%;
}

.iconinbox6 {
  width: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
  height: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
  justify-content: left;
  justify-items: left;
  float: left;
  margin: auto;
  vertical-align: top;
  margin: auto;
}

.textcontainer5 {
  font-size: .7rem;
  line-height: 1rem;
  word-wrap: break-word;
  width: 90px;
  text-align: center;
  padding-top: 0;
  padding: 0;
}


.lighttext {
  font-size: .9rem;
  line-height: 1.5rem;
}

/* ========================  @media XS ***LANDSCAPE*** (LIGHT) OUR SERVICES ======================================================= */



.spacetitleicon2 {
  padding: 0;
  padding-top: 10%;
  padding-bottom: 10%;
}

.r-format2 {
  margin: 0;  /*adds space to the top of elements (images and text) (col) */
}

.imagecontainer9 {
  /*height: 25%; */
  /*width: 25%;*/
 /* margin: auto;*/
  margin-bottom: 10px;
  padding: 0;
}

.iconinbox5 {
  width: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
  height: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
}


.textcontainer4 {
  padding: 0;
  /* display: flex;  <!-- prevents centering of text -->
  align-items: center; <!-- this is function of display: flex */
  text-align: center;
  word-wrap: break-word;
} 





/* ========================  @media XS ***LANDSCAPE*** (DARK) ADVANCE YOUR BUSINESS TRANSFORMATION =================================== */


.full-widthpic2 {
  margin-top: 0;
  height: 150px;
  width: 100%;
  object-fit: cover;
  object-position: 0px 0%;
  opacity: 1;
}


/* ========================= @media XS **LANDSCAPE*** OUR PARTNERS ============================= */

.header-container {  /* adding a margin here to blanace our the removal of margins for rows...again keeps margins of tables to rows to balance small view ports */
  margin-bottom: 15%;
}


.row-format2 {
  margin: 0;  /* removing the margins because they should be in the columns for blaance in small view ports */
  }

.col-format4 {
  margin-top: 10%;
  margin-bottom: 10%;
  }

  
.textcontainer1 {
  margin-top: 0;
  margin-bottom: 10%;
  padding-left: 20px;
  padding-right: 10px;
}

.textcontainer2 {
  margin-top: 0;
  margin-bottom: 10%;
  padding-left: 20px;
  padding-right: 10px;
}


.logo-appearance {
  display: none;
}

.status-text {
  font-size: 1rem;
}

.textcontainer3 {
  text-align: justify;
  text-justify: auto;
  padding-left: 0;
  padding-right: 0;
}


.partner-text {
  font-size: .9rem;
}


/* ========================  @media XS ***LANDSCAPE*** CONTACT US ============================================================== */

.cta-button {
  margin-top: 10%;
  line-height: 70px;
  width: 70%;
  margin-bottom: 20px;
} 

.page-container2 {
  height: 300px;  /* 11.23 adjusts the height of the white space between header and footer */
}


/* ========================  @media XS ***LANDSCAPE*** FOOTER =============================================== */




.longtextpadding {
  padding-left: 3%;
  padding-right: 3%;
}

  .button1-format {
    padding-top: 0;
  }

  .bottompad1 {
    padding-bottom: 10%;
  }


  .headerquotes {
    font-size: 1.2rem;
  }

  .tableheader {
    font-size: 1rem;
    margin-top: 2%;
    margin-bottom: 2%;
  }

  .tabledetailtext {
    line-height: 1.2rem;
    font-size: .8rem;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
  }


  .full-widthpic {
    padding-top: 40px;
    width: 100%;
    height: 300px;
    object-fit: contain;
    object-position: 0 15%;
    opacity: 1;
  }

  .full-widthpic4 {
    height: 150px;
    padding-top: 0;
    object-fit: cover;
    object-position: 0 20%;
    opacity: 1;
  }


  .carouselimage {
    margin-top: 0;
    object-fit: contain;
    object-position: 0 0%;
    opacity: 1;
  }



  .oneiconinrow {
    padding-top: 10%;
    padding-bottom: 2%;
    width: 200px;
  }

.colpad7 {
    padding-top: 5%;

}

  .textcontainer {
    position: relative;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 0;
  }

  .imagecontainer1 {
  height: 50%;  /* height of container*/
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
  }

  .imagecontainer2 {
  height: 50%;  /* height of container*/
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
  }

  .imagecontainer3 {
  height: 50%;  /* height of container*/
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
  }

  .testcontainer1 {         /*HAVE TP CHANGE THIS */
  /*  border: 2px dashed orange; */
    height: 225px;          /*HAVE TP CHANGE THIS */
    margin-bottom: 2%;   /*HAVE TP CHANGE THIS */
    align-items: center;
  }

  .imageincol1 {
    height: 100%;  /* height of image itself */
    margin-top: 0;
    margin-bottom: 0;
  }

  .imageincol2 {
    height: 100%;  /* height of image itself */
    margin-top: 0;
    margin-bottom: 0;
  }

  .imageincol3 {
    height: 100%;  /* height of image itself */
    margin-top: 0;
    margin-bottom: 0;
  }

  .pic3pad {
    padding-bottom: 24px;
  }

  .picchecklist {
    padding-top: 2%;
  }

  .lighttext1{
    font-size: .7rem;
    line-height: 1.2rem;
  }

  .brheight {
    line-height: 2rem;
  }



  .iconcontainer {
  /*  background-color: pink;
    border: 2px solid red; */
    height: 100%;
    margin-bottom: 2%;
    width: 25%;
  }

  .lighttext-title1 {
    font-family: 'roboto';
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: normal;
    color: #f4f3ed;
  }

  .p-justified {
    padding-top: 2%;
    text-align: center;
    line-height: 1.6rem;
    font-size: .7rem;
  }


.lighttextheader {
    margin-bottom: 5%;
}


.light-header-font2 {
  padding-bottom: 2%;
  width: 100%;
  font-size: 1.2rem;
}

.oneimageinrow {
  width: 200px;
  margin: auto;
}

.footertitles {
  font-size: 9px;
  text-align: center;
}

.footertext {
  text-align: center;
  font-size: 10px;
}

.footer-column {
  padding-top: 18px;
}

p {
  margin: 0;
}



}



/* ======================================================================================================================== */
/* =====================================  @media XS ***PORTRAIT*** <= 480 most smart phones START  ================================== */
/* =============== iPhone 12 Pro ================================================================================================== */
/* ==================================================================================================================== */

@media only screen and (max-width: 480.99px) and (orientation: PORTRAIT) {


    body {
        /* The file size of this background image is 93% smaller
         * to improve page load speed on mobile internet connections */
        background-image: url(../images/maintenance/landingpage-sm.jpg);
      }
  
      .navbar-toggler,
      .navbar-toggler:focus,
      .navbar-toggler:active,
      .navbar-toggler-icon:focus {
        outline: 1px !important;
        box-shadow: none;
        border: 10px !important;
        border-color: #a499ba !important;
      }
  
  /* ========================  @media XS ***PORTRAIT*** GENERAL =========================================== */
  
.lightslide {
  padding-top: 10%;
  /* padding-left: 0;
  padding-right: 0; */
  /* width: 100%; *//* Necessary for page alignment; prevent slide from running off page 8 Aug */
  /* height: 100%; */ /* Necessary to keep container 100% tall for elements */
}

.darkslide {
  padding-top: 10%;
  padding-bottom: 10%;
  /* font-size: 2rem; */ /* dont think the font size should be specified here */
}

.header-container1 {
  margin-bottom: 5%;
}

.header-container4 {
  margin-bottom: 5%;
}


.header-container-pic {
  /*padding-left: 0;
  padding-right: 0;*/
  padding-top: 10px;
  padding-bottom: 10px;
  height: 50px;  /* top container needs to have height specified or else children will run all over */
  /*width: 100%;*/
}

.light-header-font {
  font-size: 1.3rem;
  /*margin-bottom: 0;
  padding-top: 12px;*/
}
    
.light-header-sub-font {
  font-size: 1.2rem;
}

.dark-header-font {
  /*padding-bottom: 0;
  margin-bottom: 0;
  width: 100%;*/
  font-size: 1.3rem;
}

.dark-header-sub-font {
  font-size: 1.1rem;
}

/*
.lightchecklist {
   padding: 12px 5%;
  font-size: .7rem;
}
*/
  
.darkchecklist {
   padding: 0 8%;
  justify-content: center;
  font-size: .8rem;
   line-height: 1rem;
}

.li-style {
  margin: 5px 0;
}
  
  .light-header-font {
    font-size: 1.3rem;
  /*  margin-bottom: 0;
    padding-top: 12px;
    padding-left: 5%;
    padding-right: 5%;*/
  }

  
  .light-header-sub-font {
    font-size: 1.5rem;
  }

  .dark-image-text-title {
    line-height: 1rem;
    font-size: 0.7rem;
    margin-bottom: 0;
  }

  .light-text-title {
    line-height: 1rem; /* vertical spacing of lines of text */
    font-size: 0.8rem; /* the size of the text */
  }

  .textlightcolor {
    font-size: .6rem;
  }
  
  .light-header-font2 {
    padding-bottom: 2%;
    font-size: 1.5rem;
  }

  .light-subheader-text{
    font-size: 1rem;
    line-height: 1.5;
    padding-bottom: 5%;
  }
  
  .whitetext {
    line-height: 1.5;
    font-size: .8rem;
    line-height: 1.2rem;
  }

  .bronzetext {
    line-height: 1.5;
    font-size: .8rem;
    line-height: 1.2rem;
  }

  .whitetextsm {
    font-size: .8rem;
    line-height: 1rem;
  }

  .jobtitle {
    margin-bottom: 5%;
    text-align: center;
    font-size: 1.2rem;
  }
  
  .p-justified {
    padding-top: 2%;
    text-align: center;
    line-height: 1.6rem;
    font-size: .7rem;
  }

.lighttextheader {
    margin-bottom: 5%;
}


  /* ========================  @media XS ***PORTRAIT*** LANDINGPAGE =========================================== */

  .navbar-brand {  /* have to remove styles from index.html */
    width: 50px; 
    height: 50px; 
  }

  .nav-bar-logo {
    width: 50px;
    height: 50px;
    margin-left: 10px;
  }

.title-container {
  margin-top: 10%;
}

.landingpage {
  /*margin: 0 15%; */
  padding: 4% 15%;
  padding-top: 40px;
  word-wrap: break-word;
  /*font-size: 2rem; */
}

.landing-page-title {
  /*margin: 0 15%; */
  padding: 4% 5%;
  padding-top: 0;
  word-wrap: break-word;
  /*font-size: 2rem; */
  /*font-weight: 400;*/
}

.subtitle {
  font-size: 1.5rem;
}

.subtitle1 {
  font-size: 1.5rem;
}

.container-buttons {
 margin-bottom: 20%;
}

.landingpage-trow-spacer {
  height: 40px;
}

.landing-button {
  /*line-height: 1.5; */
  width: 100%;
  margin-bottom: 5%;
  height: 80px;
}

.landing-button-text {
font-size: 1rem;
}

.landing-button-subtext {
  font-size: .8rem;
}

.button1-format {
  height: 90px;
  margin-bottom: 10px;
  padding-left: 5%;
  padding-right: 5%;
}
  
/* ========================  @media XS **PORTRAIT** nLPD ======================================================= */


/* ========================  @media XS **PORTRAIT** OUR SOLUTIONS ======================================================= */

.page-container1 {
  height: 1250px;
}

.table-header-text {
  font-size: 1rem;;
}

.c-format6 {
  display: flex;  /* necessary for centering */
  justify-content: center; /* center vertically */
  text-align: center; /* center horizontally */
}

.col-format1 {
  padding-right: 0;
  padding-left: 0;
}

.col-format9 {
  width: 150px;  /*prevent div from auto-sizing to content */
  padding-left: 0;
  padding-right: 0;

}

.table-sub-text {
  display: none;
}

.table-button {
  height: 90px;
  margin-bottom: 20px;
}

.r-format6 {
  padding-top: 5%;
}

.lawsectionformat {
  height: 600px;
}

/*.spacetitleicon3 {
  padding-top: 10%;
  padding-bottom: 10%;
}
*/


.iconinbox6 {
  /* width: 60px; */ /*changes actual size of image, the div wrapper auto sizes to it */
  height: 60px;  /*using height is better than width, because height can extend past the borders if images are scaled by width */
 /* height: 50px;*/  /*changes actual size of image, the div wrapper auto sizes to it, removing 01.02.23 to allow to auto-height */
 display: flex; 
 align-items: center;
  object-fit: contain;  /*necessary to keep the height "auto" */
  margin: auto;
}

.p-format2 {
  font-size: 1rem;
}

.p-format4 {
  font-size: 1rem;
}

.lawcontainerformat {
  margin-top: 0px;  /*the space between the bottom of the 3rd header and the top of the picture, use margin and not padding*/
  height: 400px;
}


.header-container2 {
  padding: 0;
  /* height: 100px;  /* top container needs to have height specified or else children will run all over */
  /*width: 100%; */
}


.r-format2x3 {
  margin: 5px;  /*adds space between elements (col) */
}

.r-format2x3-1 {
  margin-right: 2%;
  margin-left: 2%;
  /*width: 300px;*/
}



.textcontainer4 {
  padding: 0;
  /*display: flex;  <!-- display flex interferes with text-align: center ->
  align-items: center; align-items: center is for display: flex */
  text-align: center; /* aligns text under image */
  word-wrap: break-word; 
} 

.textnum {
  font-size: 1rem;
}

/*
.texthead {
  font-size: .8rem;
}
*/

.imagewrapper1 {
  margin-top: 5%;
  margin-bottom: 5%;
  justify-content: center;
}
.imageformat1 {
  height: 50px;
}


/* ========================  @media XS **PORTRAIT** OUR NETWORK BACKBONE ============================*/
.page-container3 {
  height: 300px;
}


/* ========================  @media XS **PORTRAIT** OUR INFRASTRUCTURE PORTFOLIO ============================*/

.header-table-container1 {
  padding-bottom: 5%;
}
.slide-height-short {
  height: 725px;
}


.p-format3 {
  font-size: 1.1rem;
}

.col-format2 {
  margin-bottom: 10%;
}

.imageformat1 {
  height: 150px;
}

.imageformat2 {
  height: 120px;
}




 /* ========================  @media XS ***PORTRAIT*** (LIGHT) EXPERIENCE THE NEXT TECHNOLOGY =================== */
 
/*.disappear-sm {
  display: ;
}*/




  /* ========================  @media XS ***PORTRAIT*** (LIGHT) EXPERIENCE THE NEXT TECHNOLOGY =================== */
  
  .image1-container {
    padding-top: 5%;
    padding-bottom: 5%;
  }
  
  
  .full-widthpic6 {
    margin: 0;
    width: 100%;
    height: 150px;
    object-fit: cover;
    /*object-position: -10px 50%; */
  }
  


  /* ==============================  @media XS ***PORTRAIT***  SMART ICT ==================================== */




.r-format5 {
  height: 100%;
  width: auto;
  margin: 0;
}

/*
.text-container1 {
  height: 100%;
  width: auto;
}
*/

.iconinbox7 {
  height: 70%;
  /*width: auto;*/
}

.iconinbox9 {
  height: 100%;
  width: auto;
}

.image-container4 {
height: 250px;
width: auto;
margin-top: 5%;
}

.row-format1 {
  height: 100%;
}

.image-container5 {
  margin-bottom: 0;
  margin-top: 5%;
  margin-left: 0;
  margin-right: 0;
padding-right: 0;
padding-left: 0;
}

.iconinbox8 {
  width: 90%;
  height: auto;

}
  
/* ========================  @media XS **PORTRAIT** (DARK) BACKUP AS A SERVICE BAAS =============================== */

.btn-outline-violet {
  font-weight: 400;
  font-size: .8rem;
}

  /* ========================  @media XS ***PORTRAIT*** (LIGHT) REAL COLLABORATION FOR YOUR TEAMS =============================== */

/* ========================  @media XS ***PORTRAIT*** TELEPHONY SOLUTIONS =============================== */

  .image-container6 {
    height: 250px;
    width: auto;
    margin-top: 5%;
    }

    .container-movementl {
      margin-left: 2%;
      padding-top: 5px;
    }
    
    .container-movementr {
      margin-left: 2%;
      padding-top: 5px;
    }

    .iconinbox10 {
      width: 90%;
      height: auto;
    }
  

  /* ========================  @media XS ***PORTRAIT*** (DARK) OUR HOME OFFICE COLLABORATION SOLUTIONS ============================*/
  
  .colheight {
    height: 120px;
  }
  
  .imagetext2 {
    font-size: .6rem;
    color: #f4f3ed;
    line-height: 1rem;
    padding: 0 2% 5%;
  }
  
  /* ========================  @media XS ***PORTRAIT*** (LIGHT) IT, Collaboration & Networking INFRASTRUCTURE ARCHITECTURE DESIGN =============================== */
  
  .p-justified1 {
    padding-top: 2%;
    line-height: 1.2rem;
    font-size: .7rem;
  }

  .icon-lg {
    width: 20%;
    margin-top: 5%;
    margin-bottom: 10%;
  }
  
  
  /* ========================  @media XS ***PORTRAIT*** (LIGHT) SYSTEM INSTALLATION & CONFIGURATION =============================== */
  
  .text-container2 {
    margin-left: 5%;
    margin-right: 5%;
  }
  
  .p-format4 {
    font-size: .8rem;
  }
  
  /* ========================  @media XS **PORTRAIT** (LIGHT) OUR COMPANY ================================= */

.icons {
  width: 50%;
  margin: 10% auto 2%;
  padding-bottom: 4%;
}

.headerquotes {
  font-size: x-large;
  padding-bottom: 2%;
  margin-left: 5%;
  margin-right: 5%;
}

.tableheader {
  font-size: larger;
  padding: 2%;
  margin-top: 10%;
  margin-bottom: 2%;
}



.tabledetailtext {
  font-size: .8rem;
}


  /* ========================  @media XS ***PORTRAIT*** (DARK) CLOUD & AUTOMATION =========================================== */
  
  .full-widthpic1 {
    padding-top: 8%;
    margin: 0;
    height: 175px;
    width: 100%;
    object-fit: cover;
    object-position: 0 35%;
    opacity: 1;
  }
  
  .image3-container {
    padding: 5% 0 0 0;
  
  }
  
  .light-subheader-text {
    font-size: 1rem;
    line-height: 1.5;
    padding-bottom: 5%;
  }

  .p-justified-title {
    padding-top: 5%;
    line-height: 1.5rem;
  }
  
  /* ========================  @media XS ***PORTRAIT*** (LIGHT) FULL-TIME SOLUTIONS SUPPORT =================================== */
  
  .full-widthpic3 {
    padding-top: 8%;
    height: 175px;
    width: 100%;
    margin: 0;
    object-fit: cover;
    object-position: 0 40%;
    opacity: 1;
  }
  
  .p-format1 {
  font-size: .8rem;
  line-height: 1.2rem;
  }
  
  .emaillink {
    font-size: .8rem;
  }

  .bottompad {
    padding-bottom: 5%;
    padding-top: 0;
  }
  
  /* ========================  @media XS ***PORTRAIT*** (LIGHT) COMPLETE SYSTEM BACKUP & SECURITY =================================== */
  .full-widthpic5 {
    padding-top: 8%;
    height: 175px;
    object-fit: cover;
    object-position: 0 40%;
    opacity: 1;
  }
  
  .p-format5 {
    padding-top: 2%;
    text-align: center;
    line-height: 1.2rem;
    font-size: .9rem;
  }
  
  /* ========================  @media XS ***PORTRAIT*** (LIGHT) INDUSTRIES WE SERVE ===================================== */
  
.r-format1{
  margin: 0;
}
  
.imagecontainer4 {
   /*background-color: #a499ba; */
   /* width: 100%;  Remove because prevents col-xs-6 */
  margin-bottom: 0;
  display: flex;
  align-items: flex-end;
}
  
.iconinbox {
  width: 50px;
  height: 50px;
  align-items: center;
  margin: auto;
}
  
.darktext1 {
   font-size: .8rem;
}
  
.c-format2 {
  padding: 0;
  padding-bottom: 20px;
}

/*
.c-format2 {
  display: inline;
  width: 90%;
}
*/
  
/* ========================  @media XS ***PORTRAIT*** (DARK) WE PROVIDE ALL CLOUD-BASED SOLUTIONS ==================================== */
  
  
  .imagecontainer5 {
    /*height: 25%; */
    /*width: 25%;*/
    margin: 0;
    margin-bottom: 10px;
    padding-top: 5%;
    padding-bottom: 5%;
    /*display: flex;
    align-items: center;
    justify-content: left;*/
  }
  
  .imagecontainer8 {
    /*height: 10%; */
    margin-bottom: 0;
    padding-left: 0;
    /*display: flex;
    align-items: center;
    justify-content: center; */
  }
  
  .spacetitleicon1 {
    padding: 0;
    padding-top: 2%;
  }
  
  
  .textcontainer5 {
    font-size: .7rem;
    line-height: 1rem;
    word-wrap: break-word;
    width: 90px;
    text-align: center;
    padding-top: 0;
    padding: 0;
  }
  
  
  .lighttext {
    font-size: .9rem;
    line-height: 1.5rem;
  }
  
  /* ========================  @media XS ***PORTRAIT*** (LIGHT) OUR SERVICES ======================================================= */
  
  
  
  .spacetitleicon2 {
    padding: 0;
    padding-top: 10%;
    padding-bottom: 10%;
  }
  
  .r-format2 {
    margin: 0;  /*adds space to the top of elements (images and text) (col) */
  }
  

  .imagecontainer9 {
    /*height: 25%; */
    /*width: 25%;*/
    /*margin: auto;*/
    margin-bottom: 10px;
    padding: 0;
  }
  
  
  .iconinbox5 {
    width: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
    height: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
  }
  
  
  .textcontainer4 {
    padding: 0;
    /* display: flex;  <!-- prevents centering of text -->
    align-items: center; <!-- this is function of display: flex */
    text-align: center;
    word-wrap: break-word;
  } 
  

  
  
  
  /* ========================  @media XS ***PORTRAIT*** (DARK) ADVANCE YOUR BUSINESS TRANSFORMATION =================================== */
  
  
  .full-widthpic2 {
    margin-top: 0;
    height: 150px;
    width: 100%;
    object-fit: cover;
    object-position: 0px 0%;
    opacity: 1;
  }

  /* ========================= @media XS ***PORTRAIT*** OUR PARTNERS ============================= */

  .header-container {  /* adding a margin here to blanace our the removal of margins for rows...again keeps margins of tables to rows to balance small view ports */
    margin-bottom: 15%;
  }

  
  .row-format2 {
    margin: 0;  /* removing the margins because they should be in the columns for blaance in small view ports */
    }

  .col-format4 {
    margin-top: 10%;
    margin-bottom: 10%;
    }

    
  .textcontainer1 {
    margin-top: 0;
    margin-bottom: 10%;
    padding-left: 20px;
    padding-right: 10px;
  }

  .textcontainer2 {
    margin-top: 0;
    margin-bottom: 10%;
    padding-left: 20px;
    padding-right: 10px;
  }
  
  .logocontainer {
    margin-bottom: 10%;
     }


  .logo-appearance {
    /**width: auto;
    float: none;
    clear: none; */
    display: none;
  }

  .partnername .jobtitle .partnertext .textcontainer3 {
    display: flex;
    text-align: center;
  }
  
  .partner-logo1 {
    width: 80px;
  }

  .partner-logo2 {
    width: 120px;
  }

  .partner-logo3 {
    width: 70px;
  }

  .partner-logo4 {
    width: 100px;
  }

  .status-text {
    font-size: 1rem;
  }

  .textcontainer3 {
    text-align: justify;
    text-justify: auto;

    padding-right: 5%;
  }
  

  .partner-text {
    font-size: .9rem;
  }

  /* ========================  @media XS ***PORTRAIT*** CONTACT US ============================================================== */
  
  .cta-button {
    margin-top: 10%;
    line-height: 70px;
    width: 70%;
    margin-bottom: 20px;
  } 
  
  .page-container2 {
    height: 500px;  /* 11.23 adjusts the height of the white space between header and footer */
  }
  
  /* ========================  @media XS ***PORTRAIT*** FOOTER =============================================== */
  

  .r-format8 {
    margin-left: 0;
    margin-right: 0;
  }
  
  .longtextpadding {
    padding-left: 3%;
    padding-right: 3%;
  }
  
    .button1-format {
      padding-top: 0;
    }
  
    .bottompad1 {
      padding-bottom: 10%;
    }
  
  
    .headerquotes {
      font-size: 1.2rem;
    }
  
    .tableheader {
      font-size: 1rem;
      margin-top: 2%;
      margin-bottom: 2%;
    }
  
    .tabledetailtext {
      line-height: 1.2rem;
      font-size: .8rem;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 20px;
      padding-right: 20px;
    }
  
    .social-icons {
      justify-content: center;
      text-align: center;
    }
  
    .full-widthpic {
      padding-top: 40px;
      width: 100%;
      height: 300px;
      object-fit: contain;
      object-position: 0 15%;
      opacity: 1;
    }
  
    .full-widthpic4 {
      height: 150px;
      padding-top: 0;
      object-fit: cover;
      object-position: 0 20%;
      opacity: 1;
    }
  

  
    .carouselimage {
      margin-top: 0;
      object-fit: contain;
      object-position: 0 0%;
      opacity: 1;
    }
  
    .oneiconinrow {
      padding-top: 10%;
      padding-bottom: 2%;
      width: 200px;
    }
  
  .colpad7 {
      padding-top: 5%;
  }
  
    .textcontainer {
      position: relative;
      width: 100%;
      padding-top: 8px;
      padding-bottom: 0;
    }
  
    .imagecontainer1 {
    height: 50%;  /* height of container*/
      margin-bottom: 0;
      display: flex;
      align-items: flex-end;
    }
  
    .imagecontainer2 {
    height: 50%;  /* height of container*/
      margin-bottom: 0;
      display: flex;
      align-items: flex-end;
    }
  
    .imagecontainer3 {
    height: 50%;  /* height of container*/
      margin-bottom: 0;
      display: flex;
      align-items: flex-end;
    }
  
    .testcontainer1 {         /*HAVE TP CHANGE THIS */
    /*  border: 2px dashed orange; */
      height: 225px;          /*HAVE TP CHANGE THIS */
      margin-bottom: 2%;   /*HAVE TP CHANGE THIS */
      align-items: center;
    }
  
    .imageincol1 {
      height: 100%;  /* height of image itself */
      margin-top: 0;
      margin-bottom: 0;
    }
  
    .imageincol2 {
      height: 100%;  /* height of image itself */
      margin-top: 0;
      margin-bottom: 0;
    }
  
    .imageincol3 {
      height: 100%;  /* height of image itself */
      margin-top: 0;
      margin-bottom: 0;
    }
  
    .pic3pad {
      padding-bottom: 24px;
    }
  
    .picchecklist {
      padding-top: 2%;
    }
  
  
  
    .lighttext1{
      font-size: .7rem;
      line-height: 1.2rem;
    }
  
    .brheight {
      line-height: 2rem;
    }
  
    .iconcontainer {
    /*  background-color: pink;
      border: 2px solid red; */
      height: 100%;
      margin-bottom: 2%;
      width: 25%;
    }
  
    .lighttext-title1 {
      font-family: 'roboto';
      font-size: 1rem;
      line-height: 1.5rem;
      font-weight: normal;
      color: #f4f3ed;
    }
  
  
  .light-header-font2 {
    padding-bottom: 2%;
    width: 100%;
    font-size: 1.2rem;
  }
  
  .oneimageinrow {
    width: 200px;
    margin: auto;
  }
  
  
  
  .footertitles {
    text-align: center;
  }
  
  .footertext {
    text-align: center;
    font-size: 10px;
  }
  
  .footer-column {
    padding-top: 18px;
  }
  
  p {
    margin: 0;
  }
  
  .footertitles {
    font-size: 12px;
  }

  hr.footerhr-bottom {
    width: 90%;
    margin-top: 12%;
    margin-bottom: 5%;
  }

  .copyright {
    font-size: 10px;
  }
  
  }

  /* =================================================================================================== */
/* =====================================  @media XS-FOLD 280px ***PORTRAIT*** <= 480 most smart phones START  ================================== */
/* ===================================================================================================== */

@media only screen and (max-width: 279.99px) and (orientation: PORTRAIT) {


  body {
      /* The file size of this background image is 93% smaller
       * to improve page load speed on mobile internet connections */
      background-image: url(../images/maintenance/landingpage-sm.jpg);
    }

    .navbar-toggler,
    .navbar-toggler:focus,
    .navbar-toggler:active,
    .navbar-toggler-icon:focus {
      outline: 1px !important;
      box-shadow: none;
      border: 10px !important;
      border-color: #a499ba !important;
    }

  /* ========================  @media XS-FOLD  ***PORTRAIT*** GENERAL =========================================== */

  .lightslide {
  padding-top: 10%;
  /* padding-left: 0;
  padding-right: 0; */
  /* width: 100%; *//* Necessary for page alignment; prevent slide from running off page 8 Aug */
  /* height: 100%; */ /* Necessary to keep container 100% tall for elements */
  }

  .darkslide {
  padding-top: 10%;
  padding-bottom: 10%;
  /* font-size: 2rem; */ /* dont think the font size should be specified here */
  }

  .header-container1 {
  margin-bottom: 5%;
  }

  .header-container4 {
  margin-bottom: 5%;
  }

  

  .header-container-pic {
  /*padding-left: 0;
  padding-right: 0;*/
  padding-top: 10px;
  padding-bottom: 10px;
  height: 50px;  /* top container needs to have height specified or else children will run all over */
  /*width: 100%;*/
  }

  .light-header-font {
  font-size: 1.3rem;
  /*margin-bottom: 0;
  padding-top: 12px;*/
  }
  
  .light-header-sub-font {
  font-size: 1.2rem;
  }
  
  .dark-header-font {
  /*padding-bottom: 0;
  margin-bottom: 0;
  width: 100%;*/
  font-size: 1.3rem;
  }

  .dark-header-sub-font {
  font-size: .8rem;
  }

  .dark-image-text-title {
  line-height: 1rem;
  font-size: 0.7rem;
  margin-bottom: 0;
  }

  .light-text-title {
  line-height: 1rem; /* vertical spacing of lines of text */
  font-size: 0.8rem; /* the size of the text */
  }

  .textlightcolor {
  font-size: .6rem;
  }
  

  /*
  .lightchecklist {
  padding: 12px 5%;
  font-size: .7rem;
  }
  */

  .darkchecklist {
  padding: 0 8%;
  justify-content: center;
  font-size: .8rem;
  line-height: 1rem;
  }

  .li-style {
  margin: 5px 0;
  }

  .light-header-font  {
  font-size: 1.3rem;
  /*margin-bottom: 0;
  padding-top: 12px;
  padding-left: 5%;
  padding-right: 5%;*/
  }


  .light-header-sub-font {
  font-size: 1.5rem;
  }


  .light-header-font2 {
  padding-bottom: 2%;
  font-size: 1.5rem;
  }

  .light-subheader-text{
  font-size: 1rem;
  line-height: 1.5;
  padding-bottom: 5%;
  }

  .whitetext {
  line-height: 1.5;
  font-size: .8rem;
  line-height: 1.2rem;
  }

  .bronzetext {
  line-height: 1.5;
  font-size: .8rem;
  line-height: 1.2rem;
  }

  .whitetextsm {
  font-size: .8rem;
  line-height: 1rem;
  }

  .jobtitle {
  margin-bottom: 5%;
  text-align: center;
  font-size: 1.2rem;
  }

  .p-justified {
  padding-top: 2%;
  text-align: center;
  line-height: 1.6rem;
  font-size: .7rem;
  }

  .lighttextheader {
  margin-bottom: 5%;
  }



  /* ========================  @media XS-FOLD  ***PORTRAIT*** LANDINGPAGE =========================================== */

  .navbar-brand {  /* have to remove styles from index.html */
  width: 50px; 
  height: 50px; 
  }

  .title-container {
  margin-top: 10%;
  }

  .landingpage {
  /*margin: 0 15%; */
  padding: 4% 15%;
  padding-top: 40px;
  word-wrap: break-word;
  /*font-size: 2rem; */
  }

  .landing-page-title {
  /*margin: 0 15%; */
  padding: 4% 5%;
  padding-top: 0;
  word-wrap: break-word;
  /*font-size: 2rem; */
  /*font-weight: 400;*/
  }

  .subtitle {
  font-size: 1.5rem;
  }

  .subtitle1 {
    font-size: 1.5rem;
    }

  .container-buttons {
  margin-bottom: 20%;
  }

  .landingpage-trow-spacer {
  height: 40px;
  }

  .landing-button {
  /*line-height: 1.5; */
  width: 100%;
  margin-bottom: 5%;
  height: 80px;
  }

  .landing-button-text {
  font-size: 1rem;
  }

  .landing-button-subtext {
  font-size: .8rem;
  }

  .button1-format {
  margin-bottom: 10px;
  padding-left: 5%;
  padding-right: 5%;
  }

  /* ========================  @media XS-FOLD  **PORTRAIT** nLPD ======================================================= */

  .lawsectionformat {
  height: 550px;
  }

  .header-container2 {
  padding: 0;
  }

  .spacetitleicon3 {
  padding-top: 10%;
  padding-bottom: 10%;
  }


  .r-format2x3 {
  margin: 5px;  /*adds space between elements (col) */
  }

  .r-format2x3-1 {
  margin-right: 2%;
  margin-left: 2%;
  /*width: 279px;*/
  }

  .textcontainer4 {
  padding: 0;
  /*display: flex;  <!-- display flex interferes with text-align: center ->
  align-items: center; align-items: center is for display: flex */
  text-align: center; /* aligns text under image */
  word-wrap: break-word; 
  } 

  .lawsubtextformat1 {
  padding-left: 10px;
  padding-right: 10px;
  }

  .textnum {
  font-size: 1rem;
  }

  /*
  .texthead {
  font-size: .8rem;
  }
  */

  .imagewrapper1 {
  margin-top: 5%;
  margin-bottom: 5%;
  justify-content: center;
  }

  .imageformat1 {
  height: 100px;
  }


  /* ========================  @media XS-FOLD  ***PORTRAIT*** (LIGHT) EXPERIENCE THE NEXT TECHNOLOGY =================== */

  .image1-container {
  padding-top: 5%;
  padding-bottom: 5%;
  }


.full-widthpic6 {
  margin: 0;
  width: 100%;
  height: 150px;
  object-fit: cover;
  /*object-position: -10px 50%; */
}



  /* ==============================  @media XS-FOLD  ***PORTRAIT***  SMART ICT ==================================== */



  .r-format5 {
  height: 100%;
  width: auto;
  margin: 0;
  }

  /*
  .text-container1 {
  height: 100%;
  width: auto;
  }*/

  .iconinbox7 {
  height: 70%;
  /*width: auto;*/
  }

  .iconinbox9 {
  height: 100%;
  width: auto;
  }

  .image-container4 {
  height: 250px;
  width: auto;
  margin-top: 5%;
  }

.row-format1 {
height: 100%;
}

.image-container5 {
margin-bottom: 0;
margin-top: 5%;
margin-left: 0;
margin-right: 0;
padding-right: 0;
padding-left: 0;
}

.iconinbox8 {
width: 90%;
height: auto;

}

/* ========================  @media XS-FOLD  **PORTRAIT** (DARK) BACKUP AS A SERVICE BAAS =============================== */

.btn-outline-violet {
font-weight: 400;
font-size: .8rem;
}

/* ========================  @media XS-FOLD  ***PORTRAIT*** (LIGHT) REAL COLLABORATION FOR YOUR TEAMS =============================== */

/* ========================  @media XS-FOLD  ***PORTRAIT*** TELEPHONY SOLUTIONS =============================== */

.image-container6 {
  height: 250px;
  width: auto;
  margin-top: 5%;
  }


  .container-movementl {
    margin-left: 2%;
    padding-top: 5px;
  }
  
  .container-movementr {
    margin-left: 2%;
    padding-top: 5px;
  }

  .iconinbox10 {
    width: 90%;
    height: auto;
  }


/* ========================  @media XS-FOLD  ***PORTRAIT*** (DARK) OUR HOME OFFICE COLLABORATION SOLUTIONS ============================*/

.colheight {
  height: 120px;
}

.imagetext2 {
  font-size: .6rem;
  color: #f4f3ed;
  line-height: 1rem;
  padding: 0 2% 5%;
}

/* ========================  @media XS-FOLD  ***PORTRAIT*** (LIGHT) IT, Collaboration & Networking INFRASTRUCTURE ARCHITECTURE DESIGN =============================== */

.p-justified1 {
  padding-top: 2%;
  line-height: 1.2rem;
  font-size: .7rem;
}

.icon-lg {
  width: 20%;
  margin-top: 5%;
  margin-bottom: 10%;
}


/* ========================  @media XS-FOLD  ***PORTRAIT*** (LIGHT) SYSTEM INSTALLATION & CONFIGURATION =============================== */
.p-format4 {
  font-size: .8rem;
}

/* ========================  @media XS-FOLD  ***PORTRAIT*** (DARK) CLOUD & AUTOMATION =========================================== */

.full-widthpic1 {
  padding-top: 8%;
  margin: 0;
  height: 175px;
  width: 100%;
  object-fit: cover;
  object-position: 0 35%;
  opacity: 1;
}

.image3-container {
  padding: 5% 0 0 0;

}

.light-subheader-text {
  font-size: 1rem;
  line-height: 1.5;
  padding-bottom: 5%;
}

.p-justified-title {
  padding-top: 5%;
  line-height: 1.5rem;
}

/* ========================  @media XS-FOLD  ***PORTRAIT*** (LIGHT) FULL-TIME SOLUTIONS SUPPORT =================================== */

.full-widthpic3 {
  padding-top: 8%;
  height: 175px;
  width: 100%;
  margin: 0;
  object-fit: cover;
  object-position: 0 40%;
  opacity: 1;
}

.p-format1 {
font-size: .8rem;
line-height: 1.2rem;
}

.emaillink {
  font-size: .8rem;
}

.bottompad {
  padding-bottom: 5%;
  padding-top: 0;
}

/* ========================  @media XS-FOLD  ***PORTRAIT*** (LIGHT) COMPLETE SYSTEM BACKUP & SECURITY =================================== */
.full-widthpic5 {
  padding-top: 8%;
  height: 175px;
  object-fit: cover;
  object-position: 0 40%;
  opacity: 1;
}

.p-format5 {
  padding-top: 2%;
  text-align: center;
  line-height: 1.2rem;
  font-size: .9rem;
}

/* ========================  @media XS-FOLD  ***PORTRAIT*** (LIGHT) INDUSTRIES WE SERVE ===================================== */

.r-format1{
  margin: 0;
}

.imagecontainer4 {
  /*background-color: #a499ba; */
  /* width: 100%;  Remove because prevents col-xs-6 */
  margin-bottom: 0;
  display: flex;
  align-items: flex-end;
}

.iconinbox {
  width: 50px;
  height: 50px;
  align-items: center;
  margin: auto;
}

.darktext1 {
  font-size: .8rem;
}

.c-format2 {
  padding: 0;
  padding-bottom: 20px;
}
/*
.c-format2 {
  display: inline;
  width: 90%;
}
*/

/* ========================  @media XS-FOLD  ***PORTRAIT*** (DARK) WE PROVIDE ALL CLOUD-BASED SOLUTIONS ==================================== */


.imagecontainer5 {
  /*height: 25%; */
  /*width: 25%;*/
  margin: 0;
  margin-bottom: 10px;
  padding-top: 5%;
  padding-bottom: 5%;
  /*display: flex;
  align-items: center;
  justify-content: left;*/
}

.imagecontainer8 {
  /*height: 10%; */
  margin-bottom: 0;
  padding-left: 0;
  /*display: flex;
  align-items: center;
  justify-content: center; */
}

.spacetitleicon1 {
  padding: 0;
  padding-top: 2%;
}

.iconinbox6 {
  width: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
  height: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
  justify-content: left;
  justify-items: left;
  float: left;
  margin: auto;
  vertical-align: top;
  margin: auto;
}

.textcontainer5 {
  font-size: .7rem;
  line-height: 1rem;
  word-wrap: break-word;
  width: 90px;
  text-align: center;
  padding-top: 0;
  padding: 0;
}


.lighttext {
  font-size: .9rem;
  line-height: 1.5rem;
}

/* ========================  @media XS-FOLD  ***PORTRAIT*** (LIGHT) OUR SERVICES ======================================================= */



.spacetitleicon2 {
  padding: 0;
  padding-top: 10%;
  padding-bottom: 10%;
}

.r-format2 {
  margin: 0;  /*adds space to the top of elements (images and text) (col) */
}


.imagecontainer9 {
  /*height: 25%; */
  /*width: 25%;*/
  /*margin: auto;*/
  margin-bottom: 10px;
  padding: 0;
}


.iconinbox5 {
  width: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
  height: 45px;  /*changes actual size of image, the div wrapper auto sizes to it */
}


.textcontainer4 {
  padding: 0;
  /* display: flex;  <!-- prevents centering of text -->
  align-items: center; <!-- this is function of display: flex */
  text-align: center;
  word-wrap: break-word;
} 






/* ========================  @media XS-FOLD  ***PORTRAIT*** (DARK) ADVANCE YOUR BUSINESS TRANSFORMATION =================================== */


.full-widthpic2 {
  margin-top: 0;
  height: 150px;
  width: 100%;
  object-fit: cover;
  object-position: 0px 0%;
  opacity: 1;
}

/* ========================= @media XS-FOLD OUR PARTNERS ============================= */



/* ========================  @media XS-FOLD  ***PORTRAIT*** CONTACT US ============================================================== */

.cta-button {
  margin-top: 10%;
  line-height: 70px;
  width: 70%;
  margin-bottom: 20px;
} 

.page-container2 {
  height: 300px;  /* 11.23 adjusts the height of the white space between header and footer */
}

/* ========================  @media XS-FOLD  ***PORTRAIT*** FOOTER =============================================== */


.longtextpadding {
  padding-left: 3%;
  padding-right: 3%;
}

  .button1-format {
    padding-top: 0;
  }

  .bottompad1 {
    padding-bottom: 10%;
  }


  .headerquotes {
    font-size: 1.2rem;
  }

  .tableheader {
    font-size: 1rem;
    margin-top: 2%;
    margin-bottom: 2%;
  }

  .tabledetailtext {
    line-height: 1.2rem;
    font-size: .8rem;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
  }


  .full-widthpic {
    padding-top: 40px;
    width: 100%;
    height: 300px;
    object-fit: contain;
    object-position: 0 15%;
    opacity: 1;
  }

  .full-widthpic4 {
    height: 150px;
    padding-top: 0;
    object-fit: cover;
    object-position: 0 20%;
    opacity: 1;
  }


  .carouselimage {
    margin-top: 0;
    object-fit: contain;
    object-position: 0 0%;
    opacity: 1;
  }

  .oneiconinrow {
    padding-top: 10%;
    padding-bottom: 2%;
    width: 200px;
  }

.colpad7 {
    padding-top: 5%;
}

  .textcontainer {
    position: relative;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 0;
  }

  .imagecontainer1 {
  height: 50%;  /* height of container*/
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
  }

  .imagecontainer2 {
  height: 50%;  /* height of container*/
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
  }

  .imagecontainer3 {
  height: 50%;  /* height of container*/
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
  }

  .testcontainer1 {         /*HAVE TP CHANGE THIS */
  /*  border: 2px dashed orange; */
    height: 225px;          /*HAVE TP CHANGE THIS */
    margin-bottom: 2%;   /*HAVE TP CHANGE THIS */
    align-items: center;
  }

  .imageincol1 {
    height: 100%;  /* height of image itself */
    margin-top: 0;
    margin-bottom: 0;
  }

  .imageincol2 {
    height: 100%;  /* height of image itself */
    margin-top: 0;
    margin-bottom: 0;
  }

  .imageincol3 {
    height: 100%;  /* height of image itself */
    margin-top: 0;
    margin-bottom: 0;
  }

  .pic3pad {
    padding-bottom: 24px;
  }

  .picchecklist {
    padding-top: 2%;
  }

  .lighttext1{
    font-size: .7rem;
    line-height: 1.2rem;
  }

  .brheight {
    line-height: 2rem;
  }


.iconcontainer {
/*  background-color: pink;
  border: 2px solid red; */
  height: 100%;
   margin-bottom: 2%;
  width: 25%;
}

.lighttext-title1 {
  font-family: 'roboto';
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: normal;
  color: #f4f3ed;
}


.light-header-font2 {
  padding-bottom: 2%;
  width: 100%;
  font-size: 1.2rem;
}

.oneimageinrow {
  width: 200px;
  margin: auto;
}

.footertitles {
  text-align: center;
}

.footertext {
  text-align: center;
}

.footer-column {
  padding-top: 18px;
}

p {
  margin: 0;
}

.footertitles {
  font-size: 9px;
}

a.footertextanimate {
  font-size: 8px;
}

}