body {
   background-color:;
}
* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    font-family:Rubik;
}
.references .col-4 {
    display: flex;
    align-items: center;
    justify-content: center
}

/* NAVBAR */

.navbar {
    padding:5%;
    padding-top:3%;
    font-size:150%;
}
.navbar a {
    color:inherit;
}
.navbar a:hover {
    color:white;
    transition:0.5s;
}
.navbar-nav {
    margin:auto;
    color: #ABABAB;
}
.navbar-brand {
    color:white;
    font-size: 130%;
    text-transform:uppercase;
    width:15%;
}

  

    /* STROKE */
  
.navbar ul li a {
    position: relative;
}
.navbar ul li a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: '.';
    color: transparent;
    background: yellow;
    height: 6px;
    border-radius:15%;
}
.navbar ul li a:hover:after {
    width: 50%;
    transition:0.5s;
}
.navbar-brand{
    position: relative;
}
.navbar-brand:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: left;
    width: 30%;
    content: '.';
    color: transparent;
    background: yellow;
    height: 6px;
    border-radius:15%;
}
.navbar-brand:hover:after {
    width: 10%;
    transition:0.5s;
}

.active{
    position: relative;
    color:white;
}
.active:after {
    position: absolute;
    bottom: 0;
    left: 24%;
    right: 0;
    margin: left;
    width: 55%;
    content: '.';
    color: transparent;
    background: yellow;
    height: 6px;
    border-radius:15%;
}

  /* STROKE */

  /* NAVBAR */
  
  
.home {
    background-color:#191A1D;
    color:white;
    overflow:hidden;
    border-bottom-left-radius:40%;
    border-bottom-right-radius:0%;
    border-top-right-radius:0%;
    padding-bottom:5%;
  
}
.home h1 {
    font-size:400%;
    font-weight:400;
}
.home p {
    color:#767778;
    font-size:200%;
}
.footer {
    background-color:#191A1D;
    color:white;
    overflow:hidden;
    border-bottom-left-radius:0%;
    border-bottom-right-radius:0%;
    border-top-right-radius: 40%;
    padding-top:6%;
    padding-bottom:1%;
}
.footer h1 {
    font-size: 350%;
    font-weight:300;
}
.footer p {
    color:#767778
}
.copyright {
    background-color:#101114;
    padding:2%;
    color:#767778;
}


    /* SOCIAL */
.social a {
    font-size: 4.5em;
    padding: 3rem;
}
.fa-facebook-f {
    color: #3b5998
}
.fa-google-plus-g {
    color: #dd4b39;
}
.fa-instagram {
    color : #517fa4
}
.fa-envelope {
    color:yellow;
}
.fa-facebook-f:hover,
.fa-google-plus-g:hover,
.fa-instagram:hover, 
.fa-envelope:hover {
    color :#d5d5d5;
    transform:rotate(15deg);
    transition:0.5s;
}
    /* SOCIAL */


    /* CONTENT */

.text-box {
  font-size: 150%;
  font-weight:300;
  
}

/* BUTTONS */
.button {
  background-color:yellow;
  border-radius:30%;
  border:none;
  padding:5%;
  color:black;
}
.button:hover {
    background-color:white;
    color:black;
    transition:1.5s;
    transform: scaleY(1.1); 
    transform: scaleX(1.1); 
    transform: rotate(-365deg);
    border: 3px solid yellow;
}
.button-style-2 {
  background-color:yellow;
  border-radius:30%;
  border:none;
  padding:2%;
  color:black;
}
.button-style-2:hover {
    background-color:white;
    color:black;
    transition:0.2s;
    transform: scaleY(1.1); 
    transform: scaleX(1.1); 
    border: 3px solid yellow;
    text-decoration:none;
}
/* BUTTONS */


.img-left {
    background-color:#F6F6F6;
}
.img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.padding {
    padding:8%;
}
.step1, 
.step2, 
.step3 {
    padding-bottom:6%;
}
section h2 {
    font-weight:400;
    font-size:220%;
}
section p {
    color:#5E5E5E;
    font-size:140%;
    line-height:1.6;
    font-weight:300;
}
.section-title {
    padding-bottom:6%;
}
.title {
    color:grey;
}
.section-title h4{
    display:inline-block;
    vertical-align:top;
    text-transform:uppercase;
}

    /* CONTENT */


    /* SERVICES */


.services {
    background-color:#F6F6F6;
    padding:5%;
    border-top:5px solid #4B6CC1;
    border-radius:2%;
}
.services h1 {
    font-size: 300%;
    font-weight:400;
}
.services h3 {
    font-weight:400;
    padding-top:4%;
    padding-bottom:2%;
}
.services img {
    width:50%;
    position: relative;
    margin: auto;
    left: 0;
    right: 0;
}
    
    /* SERVICES */


    /* CONTACT */

.contact-info {
    background-color:#F6F6F6;
    padding:5%;
    border-top:5px solid yellow;
    border-radius:2%;
    text-align:center;
}
.contact-info h1 {
    font-size: 300%;
    font-weight:400;
}
.contact-info h3 {
    font-weight:400;
    padding-top:4%;
    padding-bottom:2%;
}
.contact-img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    padding-top:3%;
}
    
    /* contact form style */

form label {
    color:grey;
    text-transform:uppercase;
    font-size:160%;
    font-weight:400;
}
.form-control {
    background-color:#F9F9F9;
    padding:6%;
}
    /* contact form style */


    /* CONTACT */


.ref-logo {
    width:100%;
    padding:3%;
    padding-bottom:10%;
    margin:auto;
}
.ref-logo:hover {
    transform:scale(1.1);
    transition:1s;
}


 /*---Media Queries 
 @media (max-width: 1150px) {

}
--*/

@media (max-width: 992px) {
  }
  @media (max-width: 768px) {
    body {
        font-size:80%;
    }
    .nav-link {
        text-align:center;
    }
    .home h1 {
        font-size:250%;
        font-weight:400;
    }
    .home p {
        color:#767778;
        font-size:120%;
    }
    .footer h1 {
        font-size: 200%;
        font-weight:300;
    }
    .footer p {
        font-size:110%;
    }
    .footer .button-style-2 {
        display:none;
    }
    .social a {
        font-size: 2.5em;
        padding: 3rem;
    }
    .services h1 {
        margin-top:15%;
    }
    .navbar-brand {
        font-size:100%;
        width:30%;
    }
    .references h1 {
        font-size:200%;
    }
    .references h4 {
        font-size:150%;
    }
  }
  @media (max-width: 576px) {
  
  }