/* global box-sizing */
*,
*:after,
*:before {
    box-sizing: border-box;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* html element 62.5% font-size for REM use */
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}


body {
    color: #444;
    font: 300 11px/1.4 'Raleway', sans-serif;
    margin: 0;
}

img {
    max-width: 100%;
    vertical-align: bottom;
}

a {
    text-decoration: none;
}

a:hover {}

a:focus {
    outline: 0;
}

a:hover,
a:active {
    outline: 0;
}

input:focus {
    border: 1px solid #04A4CC;
    outline: 0;
}

p,
ul,
ol {
    font-size: 2.2rem;
    font-size: 400;
    line-height: 1.4;
}

h1 {
    font-size: 4rem;
}

h2 {
    font-size: 6rem;
}

h3 {
    font-size: 2.8rem;
}

h4 {
    font-size: 2.4rem;
}

h5 {
    font-size: 2.0rem;
}

h6 {
    font-size: 1.6rem;
}


h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

main {
  position: relative;
}

.lazy-load {
  opacity: 0;
 -moz-animation: fadeIn .4s ease-in;
  -webkit-animation: fadeIn .4s ease-in;
  animation: fadeIn ease-in .4s 1;
  -moz-animation-delay: .4s;
  -webkit-animation-delay: .4s;
  animation-delay: .4s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/* wrapper */
.wrapper {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.container {
     max-width: 1400px;
    align-self: center;
    flex: 1 auto;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding: 0 30px;
}

.justify-content.full-height {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 100vh;
  position: relative;
}

.margined-section {
  margin: 10rem 0;
}

.padded {
  padding: 5rem ;
}

.main-bg {
  background: linear-gradient(rgba(34, 42, 53, 1) 50%, rgba(34, 42, 53,.8));
  /* background: radial-gradient(circle at top right,rgba(34, 42, 53, .6), rgba(34, 42, 53,1) 50%); */

}

.blue-bg.reversed {
  background: linear-gradient(to right,rgba(76, 76, 255, 1) 55%, rgba(76,76,255,.6));
}

.blue-bg.down {
  background: linear-gradient(rgba(76, 76, 255, 1) 55%, rgba(76,76,255,.6));
}

.section-title {
  position: relative;
  margin: 10px 0;
}

/* .section-title:after {
  content: '';
  position: absolute;
  width: 100px;
  background-color: #444;
  height: 2px;
  left: 0;
  border-radius: 25px;
  bottom: -3px;
  padding: 2px 0;
} */

.section-title.white {
  color: #fff;
}

/* .section-title.white:after {
  content: '';
  position: absolute;
  width: 100px;
  background-color: #fff;
  height: 2px;
  left: 0;
  border-radius: 25px;
  bottom: -3px;
  padding: 2px 0;
} */

.button {
  padding: 10px 25px;
  background: #4C4CFF;
  color: #fff;
  border: 3px solid #4C4CFF;
  border-radius: 25px;
  font-size: 1.8rem;
  display: inline-flex;
  transition: .3s ease;
}

.button:hover {
  background: #fff;
  color: #4C4CFF;
}


.button.green {
  padding: 10px 25px;
  background: #03f01b;
  color: #fff;
  border: 3px solid #03f01b;
  border-radius: 25px;
  font-size: 1.8rem;
  display: inline-flex;
  transition: .3s ease;
}

.button.green:hover {
  background: #fff;
  color: #03f01b;
}

.button.white {
  padding: 10px 25px;
  background: #fff;
  border: 3px solid #fff;
  border-radius: 25px;
  font-size: 1.8rem;
  display: inline-flex;
  transition: .3s ease;
}

.button.white:hover {
  background: #4C4CFF;
  color: #fff;
}

.centered {
  text-align: center;
}

.right {
  text-align: right
}

.height-100 {
  height: 100%;
}

/*------------------------------------*\
    HEADER
\*------------------------------------*/

  header {
    padding: 3rem 2rem;
  }

/*------------------------------------*\
    HOMEPAGE
\*------------------------------------*/

#hero {
  height: 50vw;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


#about {
  color: #fff;
  padding: 8rem 5rem 15rem;
}
#about h3 {
  margin-bottom: 5px;
}

#about h4 {
  margin-top: 0;
}

/* Contact */

#contact p {
  font-weight: 600;
}

.image-container {
  position: absolute;
  right: 0;
  display: none;
  top: -25px;
}

.image-container img {
  opacity: .40;
  transition: .4s ease;
}

.content-container {
  padding: 2rem 0;
  position: relative;
  max-width: 800px;
}

.content p {
  color: #fff;
}

.contact-wrapper {
  padding: 2.5rem 0;
  max-width: 900px;
}


.contact-block-container a{
  color: #444;
  transition: .3s ease;
}

.contact-block-container a .contact-block {
  box-shadow: 0px 3px 8px #4169E253;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 3rem 0;
  background: #fff;
  transition: .3s ease;
}

.contact-block-container a .contact-block:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
  opacity: 0;
  visibility: hidden;
  transition: .3s ease;
  border-radius: 15px;
  z-index: -1;
}

.contact-block-container a:hover .contact-block:before{
  opacity: 1;
  visibility: visible;
  transition: .3s ease;
}

.contact-block p {
  margin-bottom: 0;
  position: relative;
  transition: .3s ease;
  bottom: 0;
}

.contact-block i {
  top: 0;
  border: 1px solid;
  border-width: 5px;
  padding: .8rem 1rem;
  border-radius: 25px;
  position: relative;
  transition: .3s ease;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
}

.contact-block-container a:hover .contact-block i{
  top: -10px;
  transition: .3s ease;

}

.contact-block-container a:hover .contact-block p {
  bottom: -10px;
  transition: .3s ease;
}




/*------------------------------------*\
    FOOTER
\*------------------------------------*/

  footer {
    margin-top: 5rem;
    padding: 2rem 3rem;
  }

  footer p {
    color: #fff;
    font-weight: 600;
    margin: 2px 0;
  }

  .to-top {
    display: none;
    position: fixed;
    color: #fff;
    bottom: 20px;
    right: 20px;
    /* display: flex; */
    justify-content: center;
    align-items: center;
  }

  .to-top i {
    font-size: 5rem;
    transform: rotateZ(-45deg);
    position: relative;
    text-shadow:
    2px 2px 1px rgba(76, 76, 255, 1),
    -2px 2px 1px rgba(76, 76, 255, 1),
    2px -2px 1px rgba(76, 76, 255, 1),
    -2px -2px 1px rgba(76, 76, 255, 1)
    ;
  }

  .to-top span {
    opacity: 0;
    color: #fff;
    visibility: hidden;
    transition: .3s ease;
    text-shadow: 1px 2px 2px rgba(76, 76, 255, 1);
    left: -10px;
    font-size: 1.5rem;
    font-weight: 600;
  }

  .to-top:hover span{
    opacity: 1;
    visibility: visible;
    transition: .3s ease;
    padding-right: 1.5rem;
  }


  /*------------------------------------*\
      KEYFRAMES
  \*------------------------------------*/

  /* IE 11 Fix for animation. Exclude browser prefix */
  @keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
  }

  @-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }

  /* FireFox fix for animation. Inlcude 'moz' prefixed keyframes element */
  @-moz-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
  }

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/
@media only screen and (min-width:320px) {}

@media only screen and (min-width:400px) {
  h1 {
    font-size: 6rem;
  }
}

@media only screen and (min-width:480px) {
  .image-container {
    display: block;
  }
}

@media only screen and (min-width:769px) {}

@media only screen and (min-width:1024px) {}

@media only screen and (min-width:1200px) {
  .image-container img {
    opacity: 1;
    transition: .4s ease;
  }
}

@media only screen and (min-width:1280px) {}