/* All master stuff is up here */
button {
    background-color: #0066ff;;
    padding: 1%;
    font-size: 15px;
    transition-duration: .4s;
}
button:hover a{
    background-color: #053efa;
}

* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    
  }
body {
    background-color: white;
    /* width: 100%; */
}
/* The Header / Navigation bar stuff is below */
.topnav {
  overflow: hidden;
  background-color:#0066ff;
  position: fixed;
  z-index: 2;
  top: 0;
  width: 100%;
}
.topnav a {
  float: right;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  /* font-size: 1.8vw; */
  font-size: 25px;
  min-height: 80px;
  line-height: 45px;
  
}
.topnav::after {
  clear: both;
}
.topnav a:hover {
  background-color: #053efa;
  color: black;
}
.topnav a.active {
  background-color: #053efa;
  color: white;
}
.topnav .icon {
  display: none;
}

/* .navbar { */

    /* background-color: #0066ff; */
    /* width: 100%; */
    /* font-size: 1.8vw; */
    /* height: 75px; */
    /* height: auto; */
    /* margin-bottom: 15px; */
    /* z-index: 10000; */
/* } */

.navbarlogo, .navbarlogo a img {
    /* background-image: url(/Images/cchprintinglogo.jpg); */
    /* width: 40%; */
    /* position: absolute; */
    /* left: 250px; */
    max-height: 45px;
    float: none;

}
/* .navmenus a {
    /* display: inline; */
    /* float: right; */
    /* color: white; */
    /* font-size: 20px; */
    padding: 15px;  having trouble with this too
    /* margin: 0px; not sure if this does anything */
    /* text-decoration: none; */
    /* max-width: 400px; */
    /* transition-duration: .4s; not functioal for now */
/* } */

nav ul {
    display: flex;
    margin: 0px;
    list-style: none;
    justify-content: flex-end;
    /* background-color: green; */
    /* align-items: center; */
    padding: 15px;
    }
    
li:hover a{
    background-color: #053efa;
}
li:active {
    text-decoration-line: underline
}
/* Not sure if I need this part */
/* ul li,  ul li a {
color: black;
font-size: 20px;
text-decoration: none;
} */

/* Buttons */
.mainBtn {
    position: absolute;
    bottom: calc(20% + 25%);
    right: calc(0% + 10%);
}
.aboutBtn, .servicesBtn, .ourWorkBtn {
    position: relative;
    bottom: 10%;
    margin: 10px;
    /* left: 50%; */
    /* transform: translate(-50%, -50%) */
}
h3 {
    margin: 5%;
    text-align: center;
  }
/* Our Work Page */
.ourWorkGrid {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
  margin-top: 80px;
}
.ourWorkGridItem {
  border: 1px solid black;
  margin: 20px;
  padding: 20px;
  /* font-size: 1.8vw; */
  text-align: center;  
}
.ourWorkGridItem:hover {
  background-color: #053efa
}
.aboutUsContainer {
  width: 100%;
  min-height: 500px;
  /* background-color: orange; */
  background-size: cover;
  background-repeat: none;
  margin-top: 50px;
  background-image: url(/Images/Peopleattable.jpg);
}
.aboutUsGrid {
  display: grid;
  grid-template-columns: auto auto;
  padding: 10px;
  margin-top: 80px;
}
.aboutUsGridItem {
  
  float: left;
  /* border: 4px solid black; /* */
  /* margin: 20px;  */
  padding: 20px 30px 20px 30px; 


} 

.aboutUsGridItem h2 {
text-align: center;
}
.aboutUsText {
  position: absolute;
  right: 25px; 
  font-size: 1.9vw;
}
.aboutUsText h2 {
    /* position: absolute; */
    font-size: 2.8vw;
    font-weight: 700;
    text-align: right;
    color: white;
    margin: 8% 15% 8% 10%;
    text-shadow: 2px 2px 4px #000000;
    z-index: 1;
    max-width: 400px;
}

/* .main { */
    /* display: inline-block; */
    /* float: left; */
    /* color: white; */
    /* background-image:  url(/Images/MainPic1.jpg); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-size: 100%; */
    /* background-repeat: no-repeat; */
    /* position: relative; */
    /* height: 500px; */
    /* width: 100%; */
    /* border: solid 3px green; */
    /* margin-top: 15px; */
/* } */
/* .mainTxtBox {
    font-size: 5vw;
    font-weight: 700;
    color: black;
    margin: 10% 30% 20% 5%;
} */
/* The items below are for the Carosuel */
/* Parent wrapper to carousel. Width can be changed as needed. 
I'm finding that I don't need anything in here*/
.carousel-wrapper {
    overflow: hidden;
    margin-top: 40px;
 }
  .carouselText{
    position: absolute;
    font-size: 6.5vw;
    font-weight: 700;
    color: white;
    margin: 8% 30% 20% 10%;
    text-shadow: 2px 2px 4px #000000;
    z-index: 1;
  }
  
  /* We'll be using the 'transform' property to move the carousel's items, so setting the 'transform-style' to 'preserve-3d' will make sure our nested elements are rendered properly in the 3D space.   This makes the pictures stack on top of each other*/
  .carousel {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /* Need a height attribute but it's not working right */
  }
  
  /* By default we're hiding items (except the initial one) until the JS initiates. Elements are absolutely positioned with a width of 100% (as we're styling for mobile first), letting the content's height dictate the height of the carousel. Our magic property here for all our animation needs is 'transition', taking the properties we wish to animate 'transform' and 'opacity', along with the length of time in seconds. */

  .slide {
    opacity: 0;
    position: absolute; /* have to have this or the pics don't appear */
    top: 0px; /* this should be 0 - but if zero then the nav bar doesn't work as this is "above" the nav */
    width: 100%;
    /* margin: auto; */
    /* padding: 1rem 4rem;  I took this out as I don't want padding*/
    z-index: auto; /* this was at 100 - I moved it to auto andnow on the FIRST slide image the nav bar will work - it seems the photos are on top of the nav bar */
    transition: transform .5s, opacity .5s, z-index .5s;
  }
  .slide img {
    width: 100%;
    height: auto;
    margin-top: 40px;
  }
  /* Display the initial item and bring it to the front using 'z-index'. These styles also apply to the 'active' item. */
  .slide.initial,
  .slide.active {
    opacity: 1; /* interesting this had to be defined - otherwise the image is totally transparent */
    /* position: relative; */
    /* z-index: 900;  - THis doesn't seem to do anything - Acutally if I make it active it hides the buttons */
  }
  
  /* Set 'z-index' to sit behind our '.active' item. */
  .slide.prev,
  .slide.next {
    /* z-index: 800; Not sure why this is needed*/
  }
  
  /* Translate previous item to the left */
  .slide.prev {
    transform: translateX(-100%);
  }
  
  /* Translate next item to the right */
  .slide.next {
    transform: translateX(100%); /*This slows down a bit */
  }
  
  /* Style navigation buttons to sit in the middle, either side of the carousel. */
  .carousel__button--prev,
  .carousel__button--next {
    position: absolute;
    top:50%;
    width: 3rem;
    height: 3rem;
    background-color: #FFF;
    transform: translateY(-50%); /* not sure what this does */
    border-radius: 50%;
    cursor: pointer; /* This make the cursor change :-) */
    z-index: 11; /*Sit on top of everything */
    border: 1px solid black; 
    /* opacity: 0; Hide buttons until carousel is initialised .... This just hides it all the time - Strange */
    transition:opacity 1s;*/
  }
  
  .carousel__button--prev {
    left: 30px;
  }
  
  .carousel__button--next {
    right:30px;
  }
  
  /* Use pseudo elements to insert arrows inside of navigation buttons */
  .carousel__button--prev::after,
  .carousel__button--next::after {
    content: " ";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    left: 54%;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    transform: translate(-50%, -50%) rotate(135deg);
  }
  
  .carousel__button--next::after {
    /* left: 47%; */
    transform: translate(-50%, -50%) rotate(-45deg);
  }
#services {
  margin-top: 75px;
  color: white;
  position: relative;
  text-align: center;
   font-size: 20px;
   padding: 15px 100px 15px 100px;
}
.about, .services, .ourWork {
    color: #262626;
    position: relative;
    text-align: center;
    /* height: 350px; */
    /* width: 100%; */
    font-size: 20px;
    /* border: solid 3px green; */
    /* padding-top: 15px; */
    padding: 3px 100px 15px 100px;
}
.services {
    color: white;
    position: relative;
 background-color: #262626;
}

.contactUsContainer {
    display: flex;
    /* height: 250px; */
    color: white;
    padding: 25px; 
    margin-top: 50px;
}
.ContactUsLeft {
    flex:1;
    margin: 15px;
}
.ContactUsRight {
    flex:1;
    margin: 15px 25px 10px 80px;
    text-align: center;
}
form {
    /* color: #efa; */
    margin: 5%;
}
input {
    min-width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.imgcenter {

    display: block;
    margin: auto;
    max-height: 25%;
  }

footer {
    display: flex;
    /* height: 250px; */
    /* width: 100%; */
    background-color: #262626;
    color: white;
    padding: 15px;  
}

.footerCol {
    flex:1;
    background-color: #323232;
    margin: 15px;
    padding: 20px;
}
.footerCol, .footerCol ul li a {
  list-style: none;
  color: white;
  font-size: 24px;
  line-height: 25px;
}
.footerCol ul {
    list-style: none;
  }
/* Font Awesome Icons*/
.fa {
  padding: 10px 15px 10px 10px;
  font-size: 30px;
  /* width: 50px; */
  /* text-align: center; */
  text-decoration: none;
  margin: 5px 2px;
}
.fa-phone,  {
}
.fa-facebook {
  /* background: #3B5998; */
  color: white;
}
.fa-linkedin {
  /* background: #3B5998; */
  color: white;
  
}
@media (max-width: 800px) {
    .navbar {   
    }
    .carousel-wrapper {
      display:none;
    }
    .navbarlogo {
        /* background-image: url(/Images/SXUPen.jpg); */
        /* width: 350px; */
        /* height: 490px; */
        /* border: 1px solid rgb(47, 0, 255); */
        transition: all 2s;
    }
    /* .main {
        background-size: 100%; */
/* } */
    footer {
        display: block;
        /* justify-content: space-between; */
        /* width: 100%;      */
    }
    .imgcenter {
      max-height: 50px;
      margin: 10px;
      
    }

    .ourWorkGrid {
      display: block;
    }
    .topnav a:not(:first-child) {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
}