html{
	scroll-behavior: smooth;
}
body{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  font-family: SourceSansPro-Black;
	background-color:#ffffff;
	overflow-x:hidden;
}
@font-face{
  font-family: SourceSansPro-Black;
  src: url(../fonts/SourceSansPro-Black.ttf);
}
header{
  margin-bottom: 30px;
}
.navbar{
  width: 100%;
  margin-left: 400px;
  padding-top: 20px;
}
.navbar-nav{
    width:100%;
    padding: 0;
    margin: 0;
    left: auto;
    right: auto;
    list-style: none;
  }
  .navbar .navbar-nav li .active{
    text-decoration: underline #1e6d94 20%;
    transition: 0.3s ease ;
  }
li{
    float: left;
  }
li a{
    width:100%;
    display: block;
    padding: 20px 15px;
    text-decoration: none;
    color: #000000;
    text-align: center;
  }
  li a:hover{
    margin-bottom: 20px;
  }
  .logo img{
    left: 0;
    position: absolute;
    margin-top: 5px;
    margin-left: 10px;
  }
  /*.searchbar *{
    box-sizing: border-box;
    border:1px solid #000000;
  }
  .inputsh{
    color: #000000;
  }
  .searchbar{
    display: flex;
    float: right ;
  }
  .searchbar input,
  .searchbtn,
  .searchbtn:before,
  .searchbtn:after{
    transition: all 0.25s ease-out;
  }
  .searchbar input,
  .searchbtn{
      width: 3em;
      height: 3em;
  }
  .searchbar input:invalid:not(:focus),
  .searchbtn{
       cursor: pointer;
  }
  .searchbar,
  .searchbar input:focus,
  .searchbar input:valid{
      width: 50%;
  }
  .searchbar input:focus,
  .searchbar input:not(:focus) + .searchbtn:focus{
      outline: transparent;
  }
  .searchbar{
      max-width: 25em;
    margin-bottom: 0;
  }
  .searchbar input{
      background: transparent;
      border-radius: 1.5em;
      box-shadow:0 0 0 0.4em #000000 inset;
      padding: 0.75em;
      transform: translate(0.5em,0.5em) scale(0.5);
      transform-origin: 100% 0;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
  }
  .searchbar input::-webkit-search-decoration{
      -webkit-appearance: none;
  }
  .searchbar input:focus,
  .searchbar input:valid{
      background: #ffffff;
      border-radius: 0.375em 0 0 0.375em;
      box-shadow:0 0 0 0.lem #000000 inset;
      transform: scale(1);
  }
  .searchbtn{
       background: #000000;
       border-radius:0 0.75em 0.75em 0 / 0 1.5em 1.5em 0;
       padding: 0.75em;
       position: relative;
       transform: translate(0.25em,0.25em) rotate(45deg) scale(0.25,0.125);
       transform-origin:0 50%;
  }
  .searchbtn:before,
  .searchbtn:after{
      content: "";
      display: block;
      opacity: 0;
      position: absolute;
  }
  .searchbtn:before{
       border-radius: 50%;
       box-shadow: 0 0 0 0.2em #000000 inset;
       top: 0.75em;
       left: 0.75em;
       width: 1.2em;
       height: 1.2em;
  }
  .searchbtn:after{
       background: #000000;
       border-radius:0 0.25em 0.25em 0;
       top: 51%;
       left: 51%;
       width: 0.75em;
       height: 0.25em;
       transform: translate(0.2em,0) rotate(45deg);
       transform-origin:0 50%;
  }
  .searchbtn span{
       display: inline-block;
       overflow: hidden;
      color:#ffffff;
       width: 1px;
       height: 1px;
  }
  .searchbar input:focus + .searchbtn,
  .searchbar input:valid + .searchbtn{
      background: #000000;
      transform: scale(1);
  }*/
.wel{
    text-align: center;
    position: relative;
    margin-top: 100px;
}
.wel h1{
  font-size: 30px;
  margin-bottom: 10px;
}
.wel h6{
  margin-top: 0;
  font-family:SourceSansPro-ExtraLight;
  opacity: 0.8;
  margin-bottom: 70px;
}
@font-face{
  font-family: SourceSansPro-ExtraLight;
  src: url(../fonts/SourceSansPro-ExtraLight.ttf);
}
.h-1{
  float: right;
  margin-right: 50px;
  width:400px;
  height: 400px;
}
.h-1:hover {
  -ms-transform: rotate(15deg); /* IE 9 */
  -webkit-transform: rotate(15deg); /* Chrome, Safari, Opera */
  transform: rotate(15deg);
  transition: 0.8s ease;
}
.text{
  margin-left: 50px;
  font-family:SourceSansPro-Regular;
}
.text b{
  color: #1e6d94;
}
@font-face{
  font-family: SourceSansPro-Regular;
  src: url(../fonts/SourceSansPro-Regular.ttf);
}
.button{
  margin-left: 50px;
  padding: 10px 40px;
  font-size: 25px;
  border-radius: 10px;
  border: none;
  color:#ffffff;
  background-color: #2990C5;
  font-weight: bold;
  cursor: pointer;
}
.button:hover{
  background-color:#1e6d94;
}
.services{
  text-align: center;
  position: relative;
  font-weight: bold;
  margin-top: 200px;
  text-decoration: underline #1e6d94 10%;
}
.column-1 {
  margin-top: 0;
  float: left;
  width: 33.33%;
  text-align: center;
}
.column-1 img{
  text-align: center;
  margin-bottom: 0;
  width: 70%;
}
.column-1 h3{
  margin-top: 0;
  text-align: center;
}
.column-1 p{
  font-size: 15px;
  font-family:SourceSansPro-Regular;
  line-height: 2;
  width: 70%;
  text-align: left;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.row-1::after {
  content: "";
  clear: both;
  display: table;
}
.portfolio{
  text-align: center;
  position: relative;
  margin-top: 50px;
  margin-bottom: 50px;
  text-decoration: underline #1e6d94 10%;
}
.textportfolio{
  text-align: center;
  font-family:SourceSansPro-Regular;
  line-height: 0%;
  font-size: 20px;
}
.contactus{
  text-align: center;
  position: relative;
  margin-bottom: 50px;
  text-decoration: underline #1e6d94 10%;
}
.column-2 {
  float: left;
  width: 25%;
}
.row-2::after {
  content: "";
  clear: both;
  display: table;
}
.textcontus{
  text-align: center;
  font-family:SourceSansPro-ExtraLight;
  margin-top: -20px;
}
textarea{
  font-family: Arial, Helvetica, sans-serif;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 240px;
  margin-bottom: 20px;
  resize: none;
}
textarea:focus{
  background-color:#e6e6e6;
}
input[type=tel], input[type=text], input[type=email]{
  width:17.3em;
  margin-bottom: 20px;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-left: 5px;
}
input[type=tel]:focus, input[type=text]:focus, input[type=email]:focus{
  background-color:#e6e6e6;
}
.input{
  display: block;
  margin-left: 240px;
}
.send{
  margin-left: 240px;
  padding: 10px 15px;
  font-size: 15px;
  border: none;
  color:#ffffff;
  background-color: #2990C5;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 20px;
}
.send:hover{
  background-color:#1e6d94;
}
.clear{
  padding: 10px 15px;
  font-size: 15px;
  border: none;
  color:#ffffff;
  background-color: #2990C5;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 20px;
}
.clear:hover{
  background-color:#1e6d94;
}
footer{
  font-family:SourceSansPro-Light;
  text-align: center;
  background-color: #1e6d94;
  color: #ffffff;
  margin-top: 25px;
}
footer img{
  display: inline-block;
  font-size: 44px;
  animation: float 5s ease-in-out infinite;
}
footer .facebook{
  animation-delay: 1s;
}
footer .linkedin{
  animation-delay: 2s;
}
@keyframes float{
  0%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-15px);
  }
  0%{
    transform: translateY(0);
  }
}
@font-face{
  font-family:SourceSansPro-Light;
  src:url(../fonts/SourceSansPro-Light.ttf);
}
@media only screen and (max-width: 700px) {
  body{
    width: 100%;
  }
  .navbar{
    margin:0;
  }
  .h-1{
    width:40%;
    height:0%;
  }
  .button{
    margin-left: 75px;
  }
  .text{
    margin-left: 10px;
    width: 100%;
  }
  .services{
    margin-top: 0;
    font-size: 14px;
    text-decoration: underline #1e6d94 10%;
  }
  .column-1{
    width: 100%;
  }
  .column-1 img{
    width: 50%;
  }
  .column-1 p{
    width: 100%;
    text-align: center;
  }
  .column-2 {
    float: left;
    width: 50%;
  }
  .textportfolio{
    line-height: 1;
  }
  .input{
    margin-left: 0;
  }
  textarea{
    width:31em;
    margin-left: 40px;
  }
  input[type=tel], input[type=text], input[type=email]{
    width:10em;
    margin-left: 10px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 5px;
  }
  .send,
  .clear{
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .clear{
    padding: 10px 30px;
  }
}