/*@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400);*/
 html,
 body {
     height: 100%;
     margin: 0;
     padding: 0;
     background: #111118;
     box-sizing: border-box;
 }
body{overflow: hidden;}
 div,
 siction,
 article {
     display: block;
     position: relative;
     overflow: hidden;
     font-family: 'Josefin Slab', serif;
 }
 .bgContainer {
     position: absolute;
     height: 100%;
     width: 100%;
 }
 canvas {
     position: fixed;
 }
 h2 {
     color: #dbdbdb;
     font-weight: 900;
     text-transform: uppercase;
     font-size: 2em;
     text-align: left;
     font-family: 'Josefin Slab', serif;
     position: relative;
     line-height: 2em;
     text-align: center;
     overflow: hidden;
     clear: left;
     font-weight: bold;
     margin: 0;
     margin-top: 5%;
     text-shadow: 0px 5px 10px rgba(71, 71, 71, 1);
 }
 h1 {
     color: #dbdbdb;
     font-weight: 900;
     margin: 0;
     margin: .35em auto;
     text-transform: uppercase;
     font-size: 2.2em;
     font-weight: bold;
     line-height: 2em;
     text-align: left;
     font-family: 'Josefin Slab', serif;
     position: relative;
     text-align: center;
     overflow: hidden;
     text-shadow: 0px 5px 10px rgba(71, 71, 71, 1);
 }
 p.copy {
     clear: both;
     color: #dbdbdb;
     position: absolute;
     margin: 0 auto;
     left: 30%;
     right: 30%;
     bottom: 0;
     width: 40%;
     text-align: center;
 }
 p.lead {
     clear: none;
     line-height: 2em;
     font-weight: normal;
     color: #dbdbdb;
     margin-top: .5em;
     font-family: 'Josefin Slab', serif;
     text-shadow: 0px 0px 20px rgba(255, 150, 150, 1);
 }
 i {
     margin-right: 1em;
 }
 i[class="glyphicon glyphicon-envelope"] {
     top: 4px;
 }
 .myMail,
 .myMail:hover,
 .myMail:focus {
     color: #dbdbdb;
     text-decoration: none;
 }
 .fill {
     min-height: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, .7);
     z-index: 30;
     display: block;
     overflow: hidden;
     position: relative;
 }
 .mainContent {
     height: 33%;
     clear: both;
 }
 .logoContainer {
     padding-left: 0;
     padding-right: 0;
     background-color: #900;
     height: 70%;
     overflow: visible;
     /*  -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
*/
 }
 .hexagonContainer {
     max-height: 140%;
     bottom: -50%;
     z-index: 40;
     left: 0;
     -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
 }
 .amrLogo {
     overflow: visible;
     background-color: #242424;
     padding: .7em;
     -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
 }
 img[alt="logo"] {
     padding-bottom: 1em;
     top: 50%;
     background-color: #900;
     -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
 }
 /*   the under construction text*/
 
 .word {
     bottom: 0;
     color: #fff;
     font-size: 4em;
     /* height: 2em; */
     left: 0;
     line-height: 1.5em;
     margin: auto;
     right: 0;
     text-align: center;
     position: relative;
     text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 5px rgba(255, 100, 100, 0.5);
     top: 0;
 }
 .word span {
     display: inline-block;
     transform: translateX(100%) scale(0.9);
     transition: transform 500ms;
 }
 .word .done {
     color: #dbdbdb;
     transform: translateX(0) scale(1);
 }
 /*
.overlay {
  background-image: -webkit-linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%);
  background-image: linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%);
  background-size: 1000px 2px;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}*/
 
 .socialMedia {

     position: relative;
     width: 45%;
     height: 55px;
     overflow: hidden;
     display: flex;
     justify-content: center;
     margin: auto;
 }
 a.social,
 a.social:visited {
     color: #000;
 }
 a.social:hover {
     color: #fff;
 }
 .social {
     float: left;
     width: 10.5%;
     height: 20px;
     display: block;
     text-align: center;
     line-height: 55px;
     border-radius: 2px;
     color: #000;
     margin: 0 1%;
     position: relative;
     transform: rotateY(0deg);
     transition: transform .25s ease-out;
     transform-style: preserve-3d;
 }
 .social i {
     margin-right: 0;
     font-size: 1.4em;
 }
 .social > div {
     width: 100%;
     height: 50px;
     background: #fff;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-bottom: 3px solid #990000;
 }
 .social >.front {
     transform: translateZ(40px);
 }
 .social >.back {
     background: #3B5998;
     font-size: 1em;
     transform: rotateY(-100deg) translateZ(10px);
 }
 /*
.social[title="Facebook"]{
margin-left: 25%;}*/
 /*  Social Media Colors 
	Facebook #3B5998
	Flickr #FE0883
	Foursquare #8FD400
	Google+ #C63D2D
	Instagram #4E433C
	Linkedin #4875B4
	Tumblr #2B4964
	Twitter #33CCFF
	Vimeo #86B32D
	Youtube #FF3333
	Dribbble #ea4c89
*/
 
 .social.social-twitter > .back {
     background: #55ACEE;
 }
 .social.social-github > .back {
     background: #242424;
     color: #fff;
 }
 .social.social-pinterest > .back {
     background: #e3262e;
 }
 .social.social-googleplus > .back {
     background: #dd4B39;
 }
 .social.social-skype > .back {
     background: #12A5F4;
 }
 .social.social-linkedin > .back {
     background: #4875B4;
 }
 .social.social-dribbble > .back {
     background: #ea4c89;
 }
 .social.social-behance > .back {
     background: #1769ff;
 }
 .social.social-yahoo > .back {
     background: #400191;
 }
 /* Hover */
 
 .social:hover {
     transform: rotateY(100deg);
 }



.preloader{
position: absolute;
    background-color: #242424;
    color: #fff;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;

}


.spinner {
  width: 50px;
  height: 50px;
    position: absolute;
    top: 48%;
        left: 48%;
  margin: auto;
  background-color: #dbdbdb;

  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}