html {
    margin: 0;
    background-color: #DFDDDD;
    scroll-behavior: smooth;
}

 body {
     margin: auto;
     width: 920px;
     background-color: white;
 }

    @media (max-width: 540px) {
        body {
          
            width: 100vw;
            background-color: white;
        }
    }

header {
    background-image: url(../img/header.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #F4F5F7;
    vertical-align: top;
    display: inline-block; 
    width: 100%;
    height: 380px;
}
.mobile-head {
    display: none;
}

@media (max-width: 540px) {
    header {
        display: none;
    }
    .mobile-head {
        display: block;
        text-align: center;
        background-color: #F4F5F7;
        padding: 20px;
    }
    .mobile-head img {
      width: 400px;
      margin: -30px;
    }
}

h1 {
    font-family: 'Oxygen Regular', 'Times New Roman', Times, serif;
    color: #484540;
    letter-spacing: 2px;

}

h2 {
    font-family: Raleway, 'Times New Roman', Times, serif;
    color: #484540;
    letter-spacing: 1px;
  
    font-variant: small-caps;
    font-size: 20px;
}

p{
    font-family: Raleway, Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
}

header h1 {
    padding-left: 120px;
    padding-top: 5vh;
    font-size: 40px;
}

header p {
    letter-spacing: 3px;
    font-size: 18px;
}

.email {
    padding-left: 120px; 
    line-height: 0;
}

text {
    width: 65%;
    float: left;
    overflow: hidden;
}
    @media (max-width: 540px) {
        text {
            width: 100%;
            float: left;
            overflow: hidden;
        }
    }

a {
    text-decoration: none;
    color: unset;
}

a:hover {
    color: goldenrod;
}

picture {
    float: right;
    width: 35%;
    overflow: hidden;
}
picture img {
    height: 376px;
}

    @media (max-width:540px) {
        picture {
            display: none;
        }
    }

/*About Us*/

.About-Us {
    background-image: url(../img/dash.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 200px;

    text-align: center; 
    width: 80%; 
    margin: auto; 
    margin-top: 50px;
}
    @media (max-width:540px) {
        .About-Us {
            background-image: url(../img/dash.png);
            background-repeat: no-repeat;
            background-position: center top;
            background-size: 200px;
        
            text-align: center; 
            margin: auto; 
            margin-top: 50px;
            width: 80%;
        }
    }


/*Services*/
.Services {
    margin-top: 50px; 
    height: 300px; 
    background-color: #F4F5F7;
}

.Services div {
    margin-left: 350px;
}

.Services h1 {
    padding-top: 50px;
}

.Services li {
    font-family: Raleway, 'Times New Roman', Times, serif;   
    list-style: circle;
}

    @media (max-width:540px) {
        .Services {
            margin-top: 50px; 
            height: 330px; 
            background-color: #F4F5F7;
        }

        .Services img {
            display: none;
        }
        .Services div {
            width: 90%;
            margin: 0 auto;
        }
        .Services h1 {
            padding-top: 50px;
        }
        .Services li {
            font-family: Raleway, 'Times New Roman', Times, serif;   
            list-style: circle;
            font-size: 13px;
        }
    }
.mobile-Services {
    display: none;
}

@media (max-width:540px) {
    .Services {
        display: none;
    }
    .mobile-Services {
        display: block;
        background-color: #F4F5F7;
        padding: 20px;
        text-align: center;
        
    }

    .mobile-Services li {
        font-family: Raleway, 'Times New Roman', Times, serif;   
        list-style: circle;
        font-size: 13px;
        text-align: justify;
    }
}


/*Portfolio*/

.Portfolio {
   padding-top: 50px; 
   padding-bottom: 50px; 
   text-align: center;
}

.Portfolio li {
    font-family: Raleway, 'Times New Roman', Times, serif;
    text-align: left;
    list-style: circle;
}

.Portfolio div {
    display: inline-block;
}

.Portfolio .media {
    width: 90%; 
    margin: auto; 
    color: ivory;
}
@media (max-width:540px) {
    .Portfolio {
        padding-top: 25px; 
        padding-bottom: 50px; 
        text-align: center;
     }
    .Portfolio .client li {
        font-size: 14px;
    }
}

/*Case Studies*/
.Case-Studies {
    height: 630px; 
    background-color: #F4F5F7;
}

.Case-Studies div {
    float: left; 
    margin: 25px 50px; 
    margin-right: 0; 
    width: 55%; 
    text-align: justify;
}

@media (max-width:540px) {
    .Case-Studies {
        height: auto; 
        background-color: #F4F5F7;
    }
    .Case-Studies img {
        display: none;
    }
    .Case-Studies div {
        float: none; 
        margin: auto;
        padding-top: 25px; 
        padding-bottom: 25px;
        width: 80%; 
        text-align: justify;
    }
}

/*Contact*/
.Contact {
    background-image: url(../img/dash.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 200px;
    text-align: center;
}

.Contact .profile {
    width: 40%; 
    float: left;
}

.Contact .info {
    margin-top: 50px;
}

@media (max-width: 540px){
    .Contact {
        background-image: url(../img/dash.png);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 200px;
        text-align: center;
    } 

    .Contact .profile {
        width: 100%;
        float: none;
    }
    
    .Contact .info {
        margin-top: 50px;
    }
}

/*Navigation*/
.topnav {
    background-color: #484540;
    overflow: hidden;
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 14px;
    font-family: Raleway, 'Times New Roman', Times, serif;
    font-variant: small-caps;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active {
    background-color: #DDB4AB;
    color: white;
  }

  @media (max-width:540px) {
    .active {
        display: none;
        }
    .topnav a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 12px;
        font-family: Raleway, 'Times New Roman', Times, serif;
        font-variant: small-caps;
      }
    }

  .footer {
    width: 920px;
    bottom: 0;
    color:  lightslategray;
    text-align: center;
    font-family: Raleway;
    font-size: 10px;
    height: 35px;
  }
  @media (max-width:540px) {
    .footer {
        width: 100vw;
        bottom: 0;
        color:  lightslategray;
        text-align: center;
        font-family: Raleway;
        font-size: 6px;
        height: 35px;
      }
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
    flex: 24%;
    max-width: 24%;
    padding: 0 4px;
  }
  
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      flex: 45%;
      max-width: 45%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }
  }

  .zoom {
    transition: transform .2s; /* Animation */
    margin: 0 auto;
  }
  
  .zoom:hover {
    transform: scale(1.8); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }


/*Font*/

@font-face {
    font-family: 'Oxygen Regular';
    src: url('../font/oxygen-light-webfont.eot');
    src: url('../font/oxygen-light-webfont.eot#iefix') format('embedded-opentype'),
         url('../font/oxygen-light-webfont.woff') format('woff'),
         url('../font/oxygen-light-webfont.ttf') format('truetype'),
         url('../font/oxygen-light-webfont.svg#Name') format('svg');
}

@font-face {
    font-family: 'Oxygen Bold';
    src: url('../font/oxygen-bold-webfont.eot');
    src: url('../font/oxygen-bold-webfont.eot#iefix') format('embedded-opentype'),
         url('../font/oxygen-bold-webfont.woff') format('woff'),
         url('../font/oxygen-bold-webfont.ttf') format('truetype'),
         url('../font/oxygen-bold-webfont.svg#Name') format('svg');
}

@font-face {
    font-family: 'Raleway';
    src: url('../font/raleway-variablefont_wght-webfont.eot');
    src: url('../font/raleway-variablefont_wght-webfont.eot#iefix') format('embedded-opentype'),
         url('../font/raleway-variablefont_wght-webfont.woff') format('woff'),
         url('../font/raleway-variablefont_wght-webfont.ttf') format('truetype'),
         url('../font/raleway-variablefont_wght-webfont.svg#Name') format('svg');
}



.tracking-in-contract {
	-webkit-animation: tracking-in-contract 1.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-contract 1.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

.tracking-in-contract-slow {
	-webkit-animation: tracking-in-contract 3.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-contract 3.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/**
 * ----------------------------------------
 * animation tracking-in-contract
 * ----------------------------------------
 */
 @-webkit-keyframes tracking-in-contract {
    0% {
      letter-spacing: .3em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      letter-spacing: 3px;
      opacity: 1;
    }
  }
  @keyframes tracking-in-contract {
    0% {
      letter-spacing: .3em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      letter-spacing: 3px;
      opacity: 1;
    }
  }

  @-webkit-keyframes tracking-in-contract-slow {
    0% {
      letter-spacing: 1em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      letter-spacing: 3px;
      opacity: 1;
    }
  }
  @keyframes tracking-in-contract-slow {
    0% {
      letter-spacing: 1em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      letter-spacing: 3px;
      opacity: 1;
    }
  }

  .kenburns-top {
	-webkit-animation: kenburns-top 15s ease-out both;
	        animation: kenburns-top 15s ease-out both;
}
/**
 * ----------------------------------------
 * animation kenburns-top
 * ----------------------------------------
 */
@-webkit-keyframes kenburns-top {
    0% {
      -webkit-transform: scale(1) translateY(0);
              transform: scale(1) translateY(0);
      -webkit-transform-origin: 50% 16%;
              transform-origin: 50% 16%;
    }
    100% {
      -webkit-transform: scale(1.25) translateY(-15px);
              transform: scale(1.25) translateY(-15px);
      -webkit-transform-origin: top;
              transform-origin: top;
    }
  }
  @keyframes kenburns-top {
    0% {
      -webkit-transform: scale(1) translateY(0);
              transform: scale(1) translateY(0);
      -webkit-transform-origin: 50% 16%;
              transform-origin: 50% 16%;
    }
    100% {
      -webkit-transform: scale(1.25) translateY(-15px);
              transform: scale(1.25) translateY(-15px);
      -webkit-transform-origin: top;
              transform-origin: top;
    }
  }