.social {
  display: block;
  margin: auto;
  width: 250px;
}

.social li {
  display: inline-block;
  list-style: none;
  margin: auto;
  margin-right: 10px;
}

.social li a {
  display:block;
  text-decoration: none;
  color: #999;
  border: 2px solid #999;
  border-radius: 100%;
  font-size: 26px;
  width: 34px;
  padding: 3px;
  text-align: center;
  transition: all .4s;
}

.social li a:hover {
  background: #999;
  color: white;
}

.social li a span {
  margin-top: 4px;
  text-align: center;
}


.social_media_tall {
  display: flex;
  width: 100%;
    height:100%;
    background-color: #4d4d4e;
     -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-flex-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

#iconslight > a {
  display: inline;
}

#iconslight > a {
  vertical-align: middle;
}

.large_square {
  width: 66% !important;
  height: 66vh !important;
}

.large_rectangle {
  width: 33% !important;
  height: 66vh !important;
}

.long_rectangle {
  width: 100% !important;
  height: 33vh !important;
}

.long_rectangle_info {
  width: 100% !important;
  height: 33vh !important;
}


.certified01 {
background-color: #4d4d4e;
color:#fff;
height:100%;
}

.certified02 {
background-color: #00bab3;
color:#fff;
height:100%;
}

.certified03 {
background-color: #fff;
color:#f47820;
height:100%;
}

.tile-secondary-content{
  margin:2%;
}



.frame {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.card {
  height: 100%;
  perspective: 800px;
}

.card:hover .flip {
    transform: rotateX(180deg) translate3d(0,0,0);

}
  
  .flip {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all .5s ease-in-out;
    perspective: 1000px;

  }
  
  .front, .back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    backface-visibility: hidden;
    border-radius: 3px;
    overflow: hidden;
    text-align: left;
  }
  
  .front {
    z-index: 2;
    transform: rotateX(0);
}

  
  .back {
    transform: rotateX(180deg);
    
  } 













































input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #4d4d4e inset;
    -webkit-text-fill-color: #fff;
}

.form {
    height: 100vh;
    margin: auto;
    border-radius: 3px;
    padding: 1.25em;
}

.btn-primary {
  box-shadow: 0; 
  border: none; 
  background-color: #00bab3;
  border-color: #00bab3;
  color: #ffffff;
  outline: none;
  -webkit-font-smoothing: subpixel-antialiased;
  transition: all .5s;
  padding: 10px 19px;
  font-size: 17px;
  line-height: .471;
  width: 30%;
  border-radius: 3px;
  text-transform: uppercase;
  margin: auto;
  margin-top: 1em;
  margin-bottom: .55em;
  display: inherit;
  height: 10vh;
}

.btn-primary:hover {
  background-color: #f47820;
}

.form-group {
  position: relative;
  opacity: 1;
  transition: .6s;
}

.input-field-icon {
  color: #fff;
  font-size: 18px;
  position: absolute;
  right: 10px;
  bottom: 12px;
  transition: .6s;
}

.form-control {
  transition: opacity .6s;
  opacity: 1;
  border: 0;
  border-bottom: 2px solid #bdc3c7;
  border-radius: 0;
  background: #4d4d4e;
  font-size: 15px;
  line-height: 1.467;
  height: 10vh;
  -webkit-appearance: none;
  font-family: "hind";
}

input, textarea {
  transition: all 800ms;
  font-family: "hind";
  resize: none;  /* removes the resize handle */
  overflow: auto; /* removes default scrolling bars in IE */
  outline:none; 
  font-family:inherit; 
  box-sizing:border-box;
  width: 100%;
  color: #fff;
  margin-top: 1.25em;
}


.has-error input, .has-error textarea {
  color: #e74c3c;
  border-color: #e74c3c;
}

.has-error .input-field-icon {
  color: #e74c3c;
}

.has-success input, .has-success textarea {
  color: #2ecc71;
  border-color: #2ecc71;
}

.has-success .input-field-icon {
  color: #2ecc71;
}


input:focus, textarea:focus {
  border-color: #48c9b0;
  color: #fff;
  font-family: "hind";
}

input:focus + .input-field-icon {
  color: #fff;
  font-family: "hind";
}

textarea.form-control {
  height: 20vh;

}

.contact01 {
  background-color: #4d4d4e;
  color:#fff;
}

.fullsize {
  width: 60vw !important;
  height: 100vh !important;
}

.spacing07 {
    padding-top: 30px;
    padding-left: 0 !important;
    margin: 0 !important;
    line-height: 30px;
}

.spacing08 {
    padding-left: 0 !important;
    margin: 0 !important;
    padding-bottom: 20px;
}



/* (max-width 2560px) everything 2560px and more will be this... */

@media screen and (min-width: 160em) { 

.fullsize {
  width: 60vw;
  height: 100vh;
  }

}


/* (max-width 2560px) everything 2560px and less will be this... */

@media screen and (max-width: 160em) { 

.fullsize {
  width: 60vw;
  height: 100vh;
  }


}


/* (max-width 1440px) everything 1440px and less will be this... */

@media screen and (max-width: 90em) { 


  .fullsize {
  width: 60vw;
  }

}


/* (max-width 1024px) everything 1024px and less will be this... */

@media screen and (max-width: 64em) { 

    .fullsize {
  width: 60vw;
  }


}


/* (max-width 768px) everything 768px and less will be this... */

@media screen and (max-width: 48em) { 

  h2{
    text-align: center;
  }

  h3{
    text-align: center;
  }

  .social_media_icons {
    text-align: center;
    padding-bottom: 15px;
  }

  .fullsize {
  width: 100vw !important;
  }
    .cbp-ig-grid {
    width: 100vw;
  }

    .larger {
    padding: 0px;
}
.homeinfo {
    padding-left: 0px;
}


}

/* (max-width 425px) everything 425px and less will be this... */

@media screen and (max-width: 26.75em) { 

  .fullsize {
  width: 100vw;
  }

    .cbp-ig-grid {
    width: 100vw;
  }

    .larger {
    padding: 0px;
}

.homeinfo {
    padding-left: 0px;
}

}


/* (max-width 375px) everything 375px and less will be this... */

@media screen and (max-width: 23.438em) { 


  .fullsize {
  width: 100vw;
  }

    .cbp-ig-grid {
    width: 100vw;
  }

    .larger {
    padding: 0px;
}

.homeinfo {
    padding-left: 0px;
}

}


/* (max-width 320px) everything 320px and less will be this... */

@media screen and (max-width: 20em) { 

p {
  font-size: .9em;
}

  .fullsize {
  width: 100vw;
  }

  .cbp-ig-grid {
    width: 100vw;
  }

  .larger {
    padding: 0px;
}

.homeinfo {
    padding-left: 0px;
}


}