html, body {
  background-color: #fff;
  height: 100vh;
  margin: 0;
}


.full-height {
  height: 100vh;
}

.flex-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.position-ref {
  position: relative;
}

.img-responsive {
	max-width: 100%;
}

@font-face {
	font-family: "Florencesans SC Exp Regular";
	src: url("../fonts/florsn29.ttf");
}

/*
Animations
*/

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 120s linear infinite;
  -moz-animation: rotating 120s linear infinite;
  -ms-animation: rotating 120s linear infinite;
  -o-animation: rotating 120s linear infinite;
  animation: rotating 120s linear infinite;
}




@keyframes wiggle {
  0%, 10%, 20%, 30%, 40% {
    transform: rotate(0);
  }
  40%, 50%, 60%, 70%, 80% {
    transform: rotate(5deg);
  }
  45%, 55%, 65%, 75%, 85% {
    transform: rotate(-5deg);
  }
  85%, 100% {
    transform: rotate(0);
  }
}
.wiggle {
  animation: wiggle 1.5s linear infinite alternate;
}


/*
Colors
*/



.gradient {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1dafec+0,534e7c+100 */
	background: #1dafec; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #1dafec 0%, #534e7c 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #1dafec 0%,#534e7c 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #1dafec 0%,#534e7c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1dafec', endColorstr='#534e7c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


.text-blue {
	color: #00A4D8!important;
}
.text-purple {
	color: #534E7C!important;
}



/*
Content
*/

.content {
  text-align: center;
  display: flex;
  flex: 1;
  align-self: center;
  align-items: center;
  padding-right: 50px;
  padding-left: 50px;
}
.brand-container {
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left: 25px;
  max-width: 750px;
}


.logo-animated {
	flex: 1;
	padding: 10px;
	display:flex;
	align-items:center;
	margin-left: -10px;
}
.keyhole {
 margin-left: -61%;
 width: 24%;
}


.brand-name {
	flex: 2;
}
.brand-name.visible-xs {
	display:none!important;
}
.brand-name.hidden-xs {
	display:block!important;
  padding-left: 15px;
}



@media only screen and (max-width: 767px)  {
  .content {
    padding-left: 0px;
    padding-right: 0px;
  }
  .brand-container {
    flex-direction: column;
    padding-left: 0px;
    padding-bottom: 40px;
  }

  .logo-animated {
    flex: 1;
    padding: 30px;
    margin-right: 0px;
    margin-left: 70px;
  }
  .keyhole {
    margin-left: -40%;
    width: 15%;
  }
  .ring {
    max-width: 150px;
  }


  .brand-name {
    width: 300px;
    max-width: 100%;
    padding-top: 0px;
  }
  .brand-name.visible-xs {
    display:block!important;
  }
  .brand-name.hidden-xs {
    display:none!important;
  }
}


/*
Footer
*/

.footer {
  align-self: center;
  padding-bottom: 20px;
}
.services {
	font-family: 'Florencesans SC Exp Regular', Arial, sans-serif;
	letter-spacing: 3px;
  font-size: 18px;
  margin: 0 20px
}
.services-separator {
	font-size: 10px;
  line-height: 25px;
  vertical-align: middle;
  margin-bottom: 4px;
}


@media only screen and (max-width: 767px)  {
	.services {
    font-size: 13px;
  }
  .fa.services-separator {
    font-size: 8px;
    line-height: 20px;
    margin-bottom: 0px;
  }
  .footer {
    align-self: center;
    padding-bottom: 50px;
  }
  .footer p {
    margin: 10px 0;
  }
}