/* Color Theme Swatches in Hex */
.My-Color-Theme-1-hex { color: #D8DAF5; }
.My-Color-Theme-2-hex { color: #73ABF5; }
.My-Color-Theme-3-hex { color: #8E73F5; }
.My-Color-Theme-4-hex { color: #B801F5; }
.My-Color-Theme-5-hex { color: #000FF5; }

/* Color Theme Swatches in RGBA */
.My-Color-Theme-1-rgba { color: rgba(216, 218, 245, 1); }
.My-Color-Theme-2-rgba { color: rgba(115, 171, 245, 1); }
.My-Color-Theme-3-rgba { color: rgba(142, 115, 245, 1); }
.My-Color-Theme-4-rgba { color: rgba(184, 1, 245, 1); }
.My-Color-Theme-5-rgba { color: rgba(0, 15, 245, 1); }

/* Color Theme Swatches in HSLA */
.My-Color-Theme-1-hsla { color: hsla(235, 59, 90, 1); }
.My-Color-Theme-2-hsla { color: hsla(214, 86, 70, 1); }
.My-Color-Theme-3-hsla { color: hsla(252, 86, 70, 1); }
.My-Color-Theme-4-hsla { color: hsla(285, 99, 48, 1); }
.My-Color-Theme-5-hsla { color: hsla(236, 100, 48, 1); }


    
:root { 
    --primarycolor:  rgba(216, 218, 245, 1);
    --secondarymain: rgba(115, 171, 245, 1);
    --secondaryside: rgba(142, 115, 245, 1);
    --tertiarymain:  rgba(184, 1, 245, 1);
    --tertiarysec:   rgba(0, 15, 245, 1); 
    --textcolor: #040F29;
  

    --secondarymainshad: 5px 5px 10px #5b87c2,
                        -5px -5px 10px #8bcfff;
    
    --primaryshadow:  5px 5px 10px #565762,
                        -5px -5px 10px #ffffff;

    --secondarysideshad: 5px 5px 10px #705bc2,
                        -5px -5px 10px #ac8bff;

    --tertiarymainshad: 5px 5px 10px #9101c2,
                        -5px -5px 10px #df01ff;

    --tertiarysecshad:  5px 5px 10px #000cc2,
                        -5px -5px 10px #0012ff;

    --textshad:         5px 5px 10px #040e26,
                        -5px -5px 10px #04102c;
 }

 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: var(--textcolor);
    opacity: .75;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: var(--textcolor);
    opacity: .75;
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: var(--textcolor);
    opacity: .75;
  }
  :-moz-placeholder { /* Firefox 18- */
    color: var(--textcolor);
    opacity: .75;
  }

 * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: Baskerville, Baskerville Old Face, Hoefler Text, Garamond,
    Times New Roman, serif;
    font-weight: 500;
}

body {
    color: var(--textcolor);
    background-color: var(--primarycolor);
    text-align: center;
}
h1{
    
}
h2{
    
}
h3 {
  margin-top: .5rem;
    
}
h4 {
    font-style: italic;
    color: rgba(4, 15, 41, .6);
}

h5 {
  font-style: italic;
  color: rgba(4, 15, 41, .6);
}

a{
    text-decoration: none;
    color: var(--textcolor);
}

a:hover {
    text-decoration: underline;
    opacity: .75;
}

a:active{
    text-decoration: underline;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    min-width: 100px;
    object-fit: cover;
    position: relative;
    box-shadow: 5px 5px 10px #6393d3,
    -5px -5px 10px #83c3ff;
  }

.container {
    padding-top: 50px;
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    flex-wrap: wrap; 
    width: 100%;
    max-width: 1260px;
    text-align: left;
    }

.innerContainerA {
  margin-top: 25px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: no-wrap; 
  order: 1;
  opacity:.95;
  background: var(--secondarymain);
  box-shadow: var(--primaryshadow);
  max-width: inherit; 
}

.innerContainerB {
    width: 100%;
    height: 160px;
    display: flex;
    flex-direction: column;
    order: 1;
}

header {
    height: 50px;
    position: fixed;
    top: 0;
    text-align: left;
    text-indent: 4%;
    z-index: 9000;
    color: var(--primarycolor);
    background: black;
    
}

.mobile-nav {
  height: 50px;
  position: fixed;
  top: 0;
  text-align: left;
  text-indent: 4%;
  text-align: left;
  display: block;
}

.mobile-nav nav {
  display: block;
  text-align: center;
  padding: 12px;
  font-size: 150%;
}



.smaller-head-text {
    margin-top: -12px;
  }

nav { 
    text-align: right;
    display: none;
}

#mobileNav {
  transition-delay: .9s;
  transition-duration: .8s; 
}

#mainHead {
  transition-delay: .7s;
  transition-duration: .8s;
}

#hamButton {
  transition-duration: .8s;
  transition-delay: .4s;
}

#bar1 {
  transition-duration: .5s;
}

#bar2 {
  transition-duration: .5s;
  
}

#bar3 {
  transition-duration: .5s;
}


.hamburger {
  display: inline-block;
  height: 36px;
  width: 42px;
  background-color: none;
  float: right;
  margin: 7px;
  cursor: pointer;
  position: relative;
}

.bar1 {
height: 3px;
width: 30px;
background: var(--primarycolor);
border-radius: 5px;
display: block;
position: absolute;
top: 8px;
left: 5px;
}

.bar2{
  height: 3px;
  width: 30px;
  background: var(--primarycolor);
  border-radius: 5px;
  display: block;
  position: absolute;
  top: 16px;
  left: 5px;
}

.bar3 {
  height: 3px;
  width: 30px;
  background: var(--primarycolor);
  border-radius: 5px;
  display: block;
  position: absolute;
  top: 24px;
  left: 5px;
}


main {
  min-height: 30vh;  
  padding: 4%;
  flex: 1;
  order: 1;
}

.right-sidebar {
    padding: 4%;
    color: black;
    flex: 1;
    order: 2;
}

footer {
    position: flex;
    margin-top: 15px;
    height: 100px;
    text-align: left;
    padding-left: 2%;
    order: 99;
    background: var(--primarycolor);
}

header, footer {
        width: 100%;
    }

input[type="submit"], button {
    transition-duration: 0.2s;
    width: 100px;
    height: 50px;
    color: white;
    font-size: 100%;
    background-color: var(--tertiarysec);
    border: none;
    border-radius: 45px;
    margin-top: 20px;
    cursor: pointer;
  }
  
  input[type="submit"]:hover, button:hover {
    color: white;
    font-size: 110%;
    font-style: italic;
    background-color: var(--secondaryside);
    border: var(--secondaryside) solid 10px;
    opacity: 0.75;
  }

  button:active {
    transform: scale(0.95);
   }

  form{
    width: 90vw;
    background: none;
    display: flex;
    flex-direction: column;
  }

  input[type="text"], input[type="textarea"], input[type="email"], textarea  {
    border-radius: 5px;
    background: #D8DAF5;
    box-shadow: inset 5px 5px 11px #565762,
            inset -5px -5px 11px #ffffff;
    border: none;
    margin: 15px;
    font-size: 125%;
    text-indent: 10px;
  }
  input[type="text"], input[type="email"]  {
    height: 50px;
  }

  input[type="submit"] {
    margin: 15px;
    position: relative;
}

input[type="text"]:focus, input[type="textarea"]:focus, input[type="email"]:focus, textarea:focus  {
  border: solid 1px var(--secondarymain);
}

textarea {
    height: 125px;
    resize: none;
}

.banner {
    top: 10%;
    bottom: 35%;
    width: 100%;
    background-color: var(--secondarymain);
    background-position: center;
    background-size: fill;
    background-repeat: no-repeat;
    opacity: .95;
    position: absolute;
    alignment: center;
    margin: 0 auto;
    box-shadow: var(--secondarymainshad);
    min-height: 420px;
  }

.cards {
  margin-top: 10px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 2%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  order: 1;
  opacity:.95;
  flex-wrap: wrap;
  justify-content: space-between;  
  background: none;
  width: 100%;
}

.card {
width: 100%;
  transition: .8s;
  border-radius: 2px;
  background: #73ABF5;
  box-shadow:  25px 25px 72px #5b87c2,
             -25px -25px 72px #8bcfff;
  margin-top: 1em;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  height: 35vh;
  text-align: left;
  text-indent: 10px;
}

.card:hover {
  cursor: pointer;
  box-shadow: none;
}

.card-img-container {
  transition: .8s;
  display: block;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.card img {
  transition: .8s;
  width: 100%;
  height: 26vh;
  object-fit: cover;
  box-shadow: none;
}

.card:hover img{
  transition: .8s;
}

   
.card:hover .card-img-container {
    transition: .8s;
}

.image-banner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  box-shadow: none;
  min-height: 50px;
  max-height: 150px;
  flex: 1;
  order: 1;
  width: 100%;
  margin-top: 2px;
  box-shadow:  41px 41px 82px #5b87c2,
       -41px -41px 82px #8bcfff;
}


.bg-image {
  background-image: url("images/technology-1283624.jpg");
  border-radius: 0;
  filter: blur(6px);
  -webkit-filter: blur(6px);
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  max-height: 150px;
  background-size: contain;
}
.bg-text {
background-color: rgba(0,0,0, 0.4);
color: var(--primarycolor);
font-weight: bold;
left: 50%;
top: 128px;
border: 3px solid var(--primarycolor);
margin: 0 auto;
transform: translate(-50%, -50%);
z-index: 0;
padding: 20px;
font-size: 75%;
text-align: center;
position: absolute;
}

@media screen and (min-width: 466px) {

.container {
    padding-top: 75px;
    }

.innerContainerA {
  flex-direction: row; 
}

.innerContainerB {
    width: 90vw;
    flex-direction: row;
}

header {
    height: 75px;
}

.hamburger {
  display: none;
}

#mobileNav {
  transition-delay: 0s;
  transition-duration: 0s; 
}

#mainHead {
  transition-delay: 0s;
  transition-duration: 0s;
}

#hamButton {
  transition-duration: 0s;
  transition-delay: 0s;
}

#bar1 {
  transition-duration: 0s;
}

#bar2 {
  transition-duration: 0s;
  
}

#bar3 {
  transition-duration: 0s;
}
.smaller-head-text {
  margin-top: -15px;
}

nav{
    display: block;
}

.banner {
    min-height: 575px;
  }

.card {
  width: 45%;
  margin-top: 2em;
  height: 20vh;
}

.card:hover {
  box-shadow:  25px 25px 42px #2e4462,
             -25px -25px 42px #b8ffff;
}

.card img {
  width: 100%;
  height: 16vh;
}

.image-banner {
  min-height: 100px;
  max-height: 200px;
}

.bg-image {
  max-height: 200px;
}

.bg-text {
    top: 180px;
    font-size: 100%;
}

form{
  width: 90vw;
  
}

}

@media screen and (min-width: 815px) {

    img {
        box-shadow: var(--secondarymainshad);
      }
    
    .container {
        padding-top: 100px;
        }
    
    header {
        height: 100px;       
    }

    .smaller-head-text {
        margin-top: 0;
      }    
      
      input[type="submit"]:hover, button:hover {
        font-size: 120%;
      }
    
      form{
        width: auto;
      }
    
    textarea {
        height: 200px;
    }
     
    .banner {
        min-height: 635px;
      }
      
    .card {
      width: auto;
      height: 24vh;
      text-align: left;
      text-indent: 10px;
    }
    
    .card img {
      height: 20vh;
      object-fit: contain;
    }
    
    .card:hover img{
      transform: scale(1.1);
      object-fit: cover;
    }
    
    .card:hover .card-img-container {
      transform: scale(1, 1.05) translateY(-6px);
    }
    
    .image-banner {
      margin-top: 15px;
    }

    .bg-text {
    top: 205px;
       }
    


}