body {
  width: 100%;
  margin:0;
  background-image: url("../images/back.png");
  font-family: 'Lato', sans-serif;
}
/*BACKGROUND ANIMATED WORDS BEGIN */

#c{
  height:100%;
  width:100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -100;
}
/*BACKGROUND ANIMATED WORDS END */
.anchor{
  display: block;
  height: 45px; /*same height as header*/
  margin-top: -55px; /*same height as header*/
  visibility: hidden;
}
.topnav {
    background-color: #333;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;

}

/* Style of the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 1em;
    font-family: 'Oswald', Arial, sans-serif;
}

/* Change the color of links on hover */
.topnav a:hover {
    color: #F04B27;

}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;

}


figure.hero {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  min-width: 320px;
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-size: 1.6vw;
  background-color: black;
  background-size: cover;

}
figure.hero *,
figure.hero *:before,
figure.hero *:after {
  -webkit-box-sizing: border-box;
  

  -webkit-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
figure.hero img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
  opacity: 0.9;
}
figure.hero .title {
  position: absolute;
  top: 58%;
  left: 25px;
  padding: 5px 10px 10px;
}
figure.hero .title:before,
figure.hero .title:after {
  height: 2px;
  width: 420px;
  position: absolute;
  content: '';
  background-color: rgb(240, 74, 38);
}
figure.hero .title:before {
  top: 0;
  left: 10px;
  -webkit-transform: translateX(400%);
  -moz-transform: translateX(400%);
  -ms-transform: translateX(400%);
  -o-transform: translateX(400%);
  transform: translateX(400%);
}
figure.hero .title:after {
  bottom: 0;
  right: 10px;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}
figure.hero .title div:before,
figure.hero .title div:after {
  width: 2px;
  height: 300px;
  position: absolute;
  content: '';
  background-color: rgb(249, 156, 41);
}
figure.hero .title div:before {
  top: 10px;
  right: 0;
  -webkit-transform: translateY(300%);
  -moz-transform: translateY(300%);
  -ms-transform: translateY(300%);
  -o-transform: translateY(300%);
  transform: translateY(300%);
}
figure.hero .title div:after {
  bottom: 10px;
  left: 0;
  -webkit-transform: translateY(-400%);
  -moz-transform: translateY(-400%);
  -ms-transform: translateY(-400%);
  -o-transform: translateY(-400%);
  transform: translateY(-400%);
}
figure.hero h2,
figure.hero h4 {
  margin: 0;
  text-transform: uppercase;
}
figure.hero h2 {
  font-weight: 400;
}
figure.hero h4 {
  display: block;
  font-weight: 700;
  background-color: #ffffff;
  padding: 5px 10px;
  color: #000000;
}
figure.hero figcaption {
  position: absolute;
  bottom: 42%;
  left: 25px;
  text-align: left;
  opacity: 0;
  padding: 5px 60px 5px 10px;
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 1.5px;
}
figure.hero figcaption p {
  margin: 0;
}
figure.hero a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
figure.hero:hover img,
figure.hero.hover img {
  zoom: 1;
  filter: alpha(opacity=35);
  -webkit-opacity: 0.35;
  opacity: 0.35;
}
figure.hero:hover .title:before,
figure.hero.hover .title:before,
figure.hero:hover .title:after,
figure.hero.hover .title:after,
figure.hero:hover .title div:before,
figure.hero.hover .title div:before,
figure.hero:hover .title div:after,
figure.hero.hover .title div:after {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
figure.hero:hover .title:before,
figure.hero.hover .title:before,
figure.hero:hover .title:after,
figure.hero.hover .title:after {
  -webkit-transition-delay: 0.15s;
  -moz-transition-delay: 0.15s;
  -ms-transition-delay: 0.15s;
  -o-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
figure.hero:hover figcaption,
figure.hero.hover figcaption {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.who {
  height:100px;
  width: 100%;
  position:relative;
  display: block;
  background-color: rgb(249, 156, 41);
  color: white;
  text-align: center;
  margin-bottom: 10px;
}
.who p {
  font-size: 45px;
  font-weight: 900;
  letter-spacing: 2px;
  margin: 0;
  padding-top: 24px;
}

.whoweare {
  max-width: 1200px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  position:static;
  padding-bottom: 85px;
  padding-top: 65px;

}
.prozor {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 8px;
  min-width: 250px;
  max-width: 300px;
  width: 100%;
  background-color: #000000;
  color: #ffffff;
  text-align: left;
  font-size: 16px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.prozor * {
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  -o-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.prozor img {
  max-width: 100%;
  vertical-align: top;
}
.prozor figcaption {
  position: absolute;
  height: 75px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  overflow: hidden;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.75);
}
.prozor h3 {
  font-family: 'Oswald';
  text-transform: uppercase;
  font-size: 22px;
  font-weight: 400;
  line-height: 24px;
  margin: 3px 0;
}
.prozor h5 {
  font-weight: 400;
  margin: 0;
  text-transform: uppercase;
  color: #bbb;
  letter-spacing: 1px;
}
.prozor blockquote {
  padding: 0;
  margin: 0;
  font-style: italic;
  font-size: 1.1em;
}
.prozor a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.prozor:hover figcaption,
.prozor .hover figcaption {
  height: calc(85%);
}
.parallax {
    /* The image used */
    background-image: url("../images/kanc.jpg");

    /* Set a specific height */
    height: 700px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position:center;
    background-repeat: no-repeat;
    min-width: 320px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.what {
  height:100px;
  width: 100%;
  background-color: #F27A28;
  color: white;
  text-align: center;

}
.what p {
  font-size: 45px;
  font-weight: 900;
  letter-spacing: 2px;
  margin: 0;
  padding-top: 24px;
}

.what-title{
font-weight: 900;
font-size: 22px;
color: black;
text-align: center;
letter-spacing: 0.5px;
text-align-last:center;
background-color: #EDEDED;
margin-top: 0;
padding: 10px 10px 10px 10px;
}

.left-right-tables{
  width: 100%;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom:10px;
  padding-top: 10px;
  background-color: #EDEDED;
}
.what-left{
  width: 100%;
  max-width: 300px;
  margin-bottom: 0;
}
.what-right{
  width: 100%;
  max-width: 300px;
  margin-bottom: 0;
  padding-bottom: 0;
}
/*-------------------------------------------------------*/
.how-all{
  background-color: #EDEDED;
  width: 100%;
  text-align: center;
  justify-content: center;
  padding-top: 20px;
  padding-bottom:30px;
}
.research{
  width: 100%;
  background-color: white;
  background-size: cover;
}
.columns{
  columns: 2;
  column-gap: 5px;
  max-width: 900px;
  text-align: center;
  margin:0 auto;
  padding: 0 10px 20px 10px;
}
.research-img{
  max-width: 400px;
  padding: 0 10px 55px 10px;
  margin: 0 auto;
  margin-bottom: 20px;
}
.research-text{
  max-width: 450px;
  text-align:justify;
  text-align-last: left;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -epub-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  font-size:24px;
  line-height:1.1em;
  padding: 0 10px 0 10px;
}
.insights{
  width: 100%;
  background-color: white;
  background-size: cover;
}
.insights-img{
  max-width: 450px;
  padding: 0 10px 0 10px;
  margin:0 auto;
}
.insights-text{
  max-width: 400px;
  text-align:justify;
  text-align-last: left;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -epub-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  font-size:20px;
  line-height:1.1em;
  padding: 10px 10px 0 20px;
}

.communicate{
  width: 100%;
  background-color: white;
  background-size: cover;
  margin-bottom: -35px;
}

.communicate-img{
  max-width: 400px;
  padding: 0 10px 0 0;
  margin:0 auto;
  margin-top: 25px;
}
.communicate-text{
  max-width: 450px;
  text-align:justify;
  text-align-last: left;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -epub-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  font-size:20px;
  line-height:1.1em;
  padding: 0 10px 0 10px;
  margin:0 auto;
}
.communicate-text li{
  margin-left: -20px;
}
/*------------------------------------------------------------*/
.people {
  height:100px;
  width: 100%;
  background-color: rgb(240, 74, 38);
  color: white;
  text-align: center;
  margin-bottom: 0;
}
.people p {
  font-size: 45px;
  font-weight: 900;
  letter-spacing: 2px;
  margin: 0;
  padding-top: 24px;
}
.key-people{
  width: 100%;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom:40px;
}
.sam{
  background-color: rgba(255, 255, 255, 0.85);
  background-size: cover;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
  padding-left: 10px;
  padding-right: 10px;
  margin: 30px 10px 30px 10px;
  min-width: 290px;
  max-width: 450px;
  line-height: 20px;
  margin-top: 80px;

}
.sam-photo{
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  margin-top: -40px;
  width: 60%;
}
.sam-photo:hover {
  transition-duration: ease-in-out 300ms;
  -webkit-transition-delay: 0.1s;
  -moz-transition-delay: 0.1s;
  -ms-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
  border-top: 10px solid #F04B27;
  border-bottom: 10px solid #F99C29;
}
.brett{
  background-color: rgba(255, 255, 255, 0.85);
  background-size: cover;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
  padding-left: 10px;
  padding-right: 10px;
  margin: 30px 10px 30px 10px;
  min-width: 290px;
  max-width: 450px;
  line-height: 20px;
  margin-top: 80px;
}
.brett-photo{
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  margin-top: -40px;
  width: 60%;
}
.brett-photo:hover {
  transition-duration: ease-in 400ms;
  -webkit-transition-delay: 0.1s;
  -moz-transition-delay: 0.1s;
  -ms-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
  border-top: 10px solid #F04B27;
  border-bottom: 10px solid #F99C29;
}
.work {
  height:100px;
  width: 100%;
  background-color: #F99C29;
  color: white;
  text-align: center;
}
.work p {
  font-size: 45px;
  font-weight: 900;
  letter-spacing: 2px;
  margin: 0;
  padding-top: 24px;
}
/*-------------OUR WORK TIMELINE STYLE START---------------------*/

.our-work{
  margin: 0;
  padding-top:20px;
  padding-bottom: 30px;
  background: rgba(230, 230, 230, 0.85);

  color: rgb(50,50,50);
  font-size: 112.5%;
  line-height: 1.6em;
}
.timeline {
  position: relative;
  width: 660px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 1em 0;
  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 6px;
  height: 100%;
  margin-left: -3px;
  background: rgb(80,80,80);
  background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
  background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);

  z-index: 5;
}

.timeline li {
  padding: 1em 0;
}

.timeline li:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.direction-l {
  position: relative;
  width: 300px;
  float: left;
  text-align: right;
}

.direction-r {
  position: relative;
  width: 300px;
  float: right;
}

.flag-wrapper {
  position: relative;
  display: inline-block;

  text-align: center;
}
.flag-1 {
  position: relative;
  display: inline;
  background: #F04B27;
  padding: 6px 10px;
  color: white;
  font-size: 32px;
  text-align: left;
  z-index: 10;
}
.direction-r-1 {
  text-align: center;
  position: relative;
  max-width: 700px;
  margin:0 auto;
  background-color: rgb(252, 214, 13);
  border-radius: 10px;
  z-index: 9;
}

.direction-r-1 .flag-1:before {
  left: -40px;

}
.direction-r-1 .flag:before {
  position: absolute;
  top: 50%;
  right: -40px;
  content: ' ';
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  background: #fff;
  border-radius: 10px;
  border: 4px solid rgb(240, 74, 38);
  z-index: 10;
}
.direction-r-1 .flag:after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-right-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}
.direction-r-1 .desc {
  margin: 18px 8px 8px 8px;
}
.direction-r-1 .flag-1 {
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.flag {
  position: relative;
  display: inline;
  background: rgb(248,248,248);
  padding: 6px 10px;
  border-radius: 5px;

  font-weight: 600;
  text-align: left;
}

.direction-l .flag {
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-r .flag {
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: 50%;
  right: -40px;
  content: ' ';
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  background: #fff;
  border-radius: 10px;
  border: 4px solid rgb(240, 74, 38);
  z-index: 10;
}

.direction-r .flag:before {
  left: -40px;
}

.direction-l .flag:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-left-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.direction-r .flag:after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-right-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.desc {
  margin: 1em 0.75em 0 0;
  font-size: 1em;
  text-align:justify;
  -moz-text-align-last: left; /* Code for Firefox */
  text-align-last: left;
  font-weight: bold;
  line-height: 1.5em;
}

.direction-r .desc {
  margin: 1em 0 0 0;
}

/*-------------OUR WORK TIMELINE STYLE END---------------------*/
.contact{
  height:100px;
  width: 100%;
  background-color: #F27A28;
  color: white;
  text-align: center;
}
.contact p{
  font-size: 45px;
  font-weight: 900;
  letter-spacing: 2px;
  margin: 0;
  padding-top: 24px;
}
/*CONTACT US START*/
.contact-us{
  background-color: #EDEDED;
  padding: 80px 0 70px 0;
}
.contact-text{
  padding: 0 10px 0 10px;
  max-width: 650px;
  margin: 0 auto;
  text-align: center;

}
.contact-text a{
  text-decoration: none;
  color:rgb(11, 99, 201);
}
.contact-text a:hover{
  color: #F04B27;
}

/*CONTACT US END*/

footer {
  display: inline-block;
  position:relative;
  width: 100%;
  font-size:0.7em;
  color: #F04B27;
  text-align:center;
  height: 100%;
  background-color: #2D2D2D;
}
footer img {
  width: 120px;
}
footer img:hover{
  transform: rotate(360deg);
  transition: ease-in-out 550ms;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 998px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 998px) {
  .topnav.responsive {position: fixed;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    z-index: 999;
  }
  .parallax
  { display: none; }
}
@media screen and (max-width:893px){
  .columns{
    columns:1;
  }
  .research-img{
    max-width: 450px;
    padding-bottom: 10px;
    margin-bottom: 0;
  }
  .research-text{
    margin: 0 auto;
    margin-top: -24px;
    margin-bottom: -24px;
  }
  .insights-img{
    margin: 0 auto;
  }
  .insights-text{
    margin: 0 auto;
    max-width: 450px;
    padding: 0 10px 0 10px;
    margin-top: -20px;
  }
  .communicate-img{
    max-width: 450px;
    margin-top: 0;
    padding-left: 10px;
  }
  .communicate-text{
    margin-top: -5px;
    padding: 0 10px 0 10px;
    margin-left: 0;
    margin: 0 auto;
  }
}
@media screen and (min-width: 320px) and (max-width:460px){
figure.hero h2,h4{
  font-size: 5vw;
  }
figure.hero p{
  font-size: 2.8vw;
}
.what-title{
  font-size: 17px;
  }
.left-right-tables ul li {
  padding-right: 0;
  }

.people p {
  font-size: 37px;
  padding-top: 28px;
  }
.who p {
  font-size: 37px;
  padding-top: 28px;
  }
.what p {
  font-size: 37px;
  padding-top: 28px;
  }
.work p{
  font-size: 37px;
  padding-top: 28px;
}
.contact p{
  font-size: 37px;
  padding-top: 28px;
  }
.what-title{
  font-size: 17px;
  }
.contact-us{
  padding: 10px 0 20px 0;
}

footer{
  font-size: 0.6em;
  }
  .parallax
  { display: none; }


}

@media screen and (min-width: 735px) and (max-width: 1024px){
  .parallax
  { display: none; }

  .left-right-tables ul li {
    padding-right: 0;
    }
  figure.hero h2,h4{
    font-size: 5vw;
    }
  figure.hero p{
    font-size: 2.9vw;
  }
}
@media screen and (max-width: 1366px){
  figure.hero h2,h4{
    font-size: 2.6vw;
    }
  figure.hero p{
    font-size: 1.7vw;
  }
}
@media screen and (max-width: 375px){
  figure.hero h2,h4{
    font-size: 5vw;
    }
  figure.hero p{
    font-size: 2.8vw;
  }
}
@media screen and (max-width: 480px){
  .parallax
  { display: none; }

  figure.hero h2,h4{
    font-size: 5vw;
    }
  figure.hero p{
    font-size: 2.8vw;
  }
  .who p {
    font-size: 37px;
    }
  .what p {
    font-size: 37px;
    }
  .what-title{
    font-size: 17px;
    }
  .left-right-tables ul li {
    padding-right: 0;
    }

  .people p {
    font-size: 37px;
    }
  footer{
    font-size: 0.6em;
    }
}
@media screen and (max-width: 732px){
  .parallax
  { display: none; }

}
@media screen and (max-width: 412px){
  .parallax
  { display: none; }

}
/* Our work Timeline MediaQuery Start*/
@media screen and (max-width: 660px) {
.parallax
{ display: none; }

.timeline {
 	width: 100%;
	padding: 4em 0 1em 0;
}

.timeline li {
	padding: 2em 0;
}

.direction-l,
.direction-r {
	float: none;
	width: 100%;

	text-align: center;
}
.direction-r-1 {
	float: none;
	width: 100%;
	text-align: center;
}

.flag-wrapper {
	text-align: center;
}

.flag {
	background: rgb(255,255,255);
	z-index: 15;
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: -30px;
	left: 50%;
	content: ' ';
	display: block;
	width: 12px;
	height: 12px;
	margin-left: -9px;
	background: #fff;
	border-radius: 10px;
	border: 4px solid rgb(255,80,80);
	z-index: 10;
}
.direction-r-1 .flag:before {
  position: absolute;
  top: -30px;
	left: 50%;
	content: ' ';
	display: block;
	width: 12px;
	height: 12px;
	margin-left: -9px;
	background: #fff;
	border-radius: 10px;
	border: 4px solid rgb(255,80,80);
	z-index: 10;
}

.direction-l .flag:after,
.direction-r .flag:after {
	content: "";
	position: absolute;
	left: 50%;
	top: -8px;
	height: 0;
	width: 0;
	margin-left: -8px;
	border: solid transparent;
	border-bottom-color: rgb(255,255,255);
	border-width: 8px;
	pointer-events: none;
}
.direction-r-1 .flag:after {
	content: "";
	position: absolute;
	left: 50%;
	top: -8px;
	height: 0;
	width: 0;
	margin-left: -8px;
	border: solid transparent;
	border-bottom-color: rgb(255,255,255);
	border-width: 8px;
	pointer-events: none;
}

.desc {
	position: relative;
	padding: 1em;
  z-index: 15;
}

.direction-l .desc,
.direction-r .desc {
	position: relative;
	margin: 1em 1em 0 1em;
	padding: 1em;
  z-index: 15;
}
.direction-r-1 .desc {
	position: relative;
	padding: 1em;
  z-index: 15;
}
}

@media screen and (min-width: 400px) and (max-width: 660px) {
.parallax
{ display: none; }

.direction-l .desc,
.direction-r .desc {
	margin: 1em 4em 0 4em;
}

}
/* Our work Timeline MediaQuery End*/