html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
html,body
{
    width: 100%;
    min-height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
@font-face {
  font-family:'MyWebFont';
  src:url('fonts/CircularStd.ttf'); 
}
@font-face{
  font-family:'MyWebFont1';
  src:url('fonts/CircularStd-Book.otf'); 
}

*  {
  -webkit-overflow-scrolling: touch;
}

body{
  margin: 0;
  /*height: 2000px;*/
  overflow-x: hidden;
}
.statusbar-overlay {
    background: white;
}
.socialicons{
  text-align:center; 
 }
 .seemorepos{
  bottom: 6rem;
 }

.frame{
    max-width: 1280px;
    width: 100%;
    margin: 0px auto;
}
.header {
  position:absolute;
  width:100%;
  height:auto;
  z-index: -1;
 }
 
 .works{
  border-radius:4px;
  position:absolute;width:100%;height:100%;
  background-size: contain!important
 }
   .mypic{
    width: 50%;
    min-width: 500px;
    align-self: center;
  }
  @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width:400px) {
    h1 {
        white-space: nowrap;
    }
}
 ::-moz-selection { /* Code for Firefox */
    color: White;
    background: #000;
}

::selection {
    color: #F2F2F7;
    background: #000;
}

 .button {
    background-color: #1769ff;
    border: none;
    color: white;
    padding: 13px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    margin: 2px 1px;
    cursor: pointer;
    border-radius: 4px;
}
/*Media queries */
 /*Mobile*/
 @media (min-width:300px){}

/*tablets*/
 @media (min-width:768px){}

 @media(min-width: 769px){
  .hamburgler-icon-wrapper, .hamburgler-menu{
    display: none;
  }

  .selected-works-padding {
    padding-left:5%;
    padding-top:10%
  }

  .txt4 {  
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

 }
 
 /*Desktop*/
 @media (min-width:1000px) {

  .social{
    display: flex;
    width: 100%;
    justify-content: space-between;
    max-width: 300px;
    margin: 2rem 4%;
    padding: 1rem;
  }

  .mypic{
    width: 50%;
    min-width: 500px;
    align-self: center;
  }

  .wrap {
    width: 100%;
    padding: 0;
    max-width: 900px;
    margin:
}
#colour{
  background: #007AFF;
}

 .txt1{
 	position: absolute;
	font-family: "MyWebFont";
	color:#fff;
	text-align: center;
	top: 20vmax;
	left: 33%;
	font-size: 400%;
 	}
 .txt2{
 	position: absolute;
	font-family:"MyWebFont1";
	color:#fff;
	text-align: center;
	top: 30vmax;
	left: 24%;
	font-size: 160%;
    line-height:180%
 	}
 }
  .txt3{
 	position: relative;
 	padding-left:5%;
 	padding-top: 8%;
	font-family: "MyWebFont";
	color:#000000;
	font-size: 250%;
 	}

.txt4{
 	position: relative;
	font-family: "MyWebFont1";
	color:#444;
  font-size: 95%;
  font-weight: 50%;
	padding-left: 5%;
  padding-top: 3%;
	text-align: left;
	line-height: 200%;
 	}

 .footertxt{
  position: relative;
  font-family: "MyWebFont1";
  color:#ffffff9c;
  font-weight: 50%;
  padding-left: 5%;
  padding-top%;
  padding-bottom: 3%;
  text-align: left;
  max-width: 500px;
  line-height: 200%;
  }
 
.txt5{
 	position: relative;
	font-family: "MyWebFont1";
	color:#000;
    font-weight: 150%;
	padding-top: 3%;
	padding-left: 5%;
	text-align: left;
	line-height: 150%;
 	}
 .txt6{
 	position: relative;
 	padding-top: 4%;
 	padding-left: 5%;
  font-family: "MyWebFont";
	color:#fff;
	font-size: 250%;
  line-height: 150%;
 	}
 	.txt7{
 	position: relative;
	font-family: "MyWebFont1";
	color:#fff;
    font-size: 200%;
	padding-top: 3%;
	padding-left: 5%;
	text-align: Centre;
	line-height: 150%;
 	}
  .txt8{
 	position: relative;
	font-family: "MyWebFont2";
	color:#000;
  font-size: 100%;
	padding-top: 4%;
	padding-left: 5%;
	text-align: Centre;
	line-height: 150%;
 	}

.scrollicon{
	position: relative;;
	padding-top: 33%;
	padding-left: 48%;
}
.workimages{
	max-width: 100%; 
	position: absolute;
	left:0;
	top: 0;
}
* { 
box-sizing:border-box
}

.w {
  width: 80vw;
  margin:0 auto;
  padding:0.2rem;
   display:flex;
  flex-wrap:wrap;
  align-items: flex-start;
  justify-content: flex-end;
}

.g {
position: relative;
  background: tan;
  border-radius: 4px;
  overflow: hidden;
}

.g:first-child { 
  width: 50%;
  padding-bottom: 50%;
}

.g:first-child  ~ .g {
  margin-left: 1rem;
  background: green;
  width: calc(25% - 1rem);
  padding-bottom: calc(25% - 1rem);
  
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: none;
    font-family: "MyWebFont1";
    font-size: 100%;
    z-index: 8888;
    position: relative;
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-height: 0
   
}


li {
    float: right;
     display: inline-block;
}

li a {
    display: block;
    color: White;
    text-align: center;
    text-decoration: none;
}

.desk-menu li a {
    padding: 50px 25px;
    transition: all 0.2s;
}

.desk-menu:hover li a {
   opacity: 0.5;
}

.desk-menu li a:hover {
   opacity: 1;
}

section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  max-width: 1280px;
  box-sizing: border-box;
}

.sample{
  width: calc(33.33% - 2rem);
  background: #ddd;
  border-radius:4px;
  padding-bottom:  calc(33.33% - 2rem);
  box-shadow: 0 2px 2px rgba(0,0,0,0.06), 0 0 2px 1px rgba(0,0,0,0.03);
  margin: 1rem;
  box-sizing: border-box;
  position: relative;
  transition: all 0.2s;
}
.sample:hover {
   box-shadow: 0 15px 15px rgba(0,0,0,.08);
    transform: translate(0,-10px);
    transition-delay: 0s !important;
}


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

  }    .sample{
  width: calc(40.33% - -2rem);
  background: #ddd;
  border-radius:4px;
  padding-bottom:  calc(48.33% - 2rem);
  box-shadow: 0 2px 2px rgba(0,0,0,0.06), 0 0 2px 1px rgba(0,0,0,0.03);
  margin: 1rem;
  box-sizing: border-box;
  position: relative;
  transition: all 0.2s;
}


  @media only screen and (min-width: 1000px) and (max-width: 3000px){
    .sample{
  width: calc(33.33% - 2rem);
  background: #ddd;
  border-radius:4px;
  padding-bottom:  calc(33.33% - 2rem);
  box-shadow: 0 2px 2px rgba(0,0,0,0.06), 0 0 2px 1px rgba(0,0,0,0.03);
  margin: 1rem;
  box-sizing: border-box;
  position: relative;
  transition: all 0.2s;
}
  }

header img,header section{
  max-width:100%;
  position: absolute;
  top: 0;
  left: 0;
}

header section { 
  z-index:1;
  color:#fff; 
  height: 100%;
  width:100%;
    
  display: flex;
  flex-direction:column;
  justify-content: center;
}

.HeaderContent {
  display:flex; flex-direction: column; padding-top: 4rem;
  flex: 1;
}


@media screen and (min-width: 720px) {
  .HeaderContent {
    padding: 0 4rem;
    justify-content: center;

  }
}


.HeaderContent a {
  color: #0A84FF;
  text-decoration: none;
}

.HeaderContent .HeaderContent-externalLink { 
  color: rgba(255,255,255, 0.6)
}

.HeaderContent-description {
  color: rgba(255, 255, 255, 0.93);
  font-family: "MyWebFont1";
  font-size: 130%;
  margin-top: 4.5rem;
  line-height: 1.4em;
}

.see-more {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
}


h1{
  font-family: "MyWebFont";
  font-size: 350%

}

header section h2 {
  text-align:center;
  font-family: "MyWebFont1";
  font-size: 160%;
  line-height: 160%;
  padding-top: 3rem;
}

header {
  position: relative;
  font-family: "MyWebFont2";
  font-size: 100%;
  background: #000;
  min-height: 90vh;
  padding: 0 2rem 8rem;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 601px) {

  ul{
    display: none;
  }
  header{
    background: #000;

  }
  

}

/* Hamburger menu starts here */
 .hamburgler-icon-wrapper {
  z-index: 11;
  position: absolute;
  top: 2rem;
  right: 2rem;
  height: 26px;
  width: 26px;
  cursor: pointer }

.hamburgler-icon, .hamburgler-icon:before, .hamburgler-icon:after {
  content: '';
  position: absolute;
  border-radius: 1em;
  height: 2px;
  width: 24px;
  padding-right: 10%;
  background: #fff;
  transition: all 0.2s ease }
.hamburgler-icon        { top: 0.75em  }
.hamburgler-icon:before { top: -0.55em }
.hamburgler-icon:after  { top: 0.55em  }
.hamburgler-active { overflow:hidden;max-height: 100vh }
.hamburgler-active .hamburgler-icon { background: transparent; transform: rotate(-135deg) }
.hamburgler-active .hamburgler-icon:before, .hamburgler-active .hamburgler-icon:after { top: 0 }
.hamburgler-active .hamburgler-icon:before { transform: rotate(90deg) }
.hamburgler-active .hamburgler-icon, .hamburgler-active .hamburgler-icon:before, .hamburgler-active .hamburgler-icon:after {
  background: white }

.hamburgler-menu {
  transition: all 0.4s ease; 
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color:#000000;
  color: white;
  text-align: center }
.hamburgler-active .hamburgler-menu {
  opacity: 1;z-index: 9;
  pointer-events: initial; }
.hamburgler-menu-list {
  display: block;
  transition: all 0.4s ease;    float: none;
    text-align: center;
    font-family:"MyWebFont1";
    font-size: 140%;

  padding: 10%;
  list-style-type: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2) }
.hamburgler-active .hamburgler-menu-list {
  transform: translate(-50%, -50%) scale(1) }
.hamburgler-menu-list li {
  line-height: 2;    float: none;
    display: block;
    margin:1rem 0;
    text-align: center;

}
/* Hamburger menu ends here */


.social-links > a {
   transition: all .2s
}

.social-links:hover > a {
   opacity: 0.25;
}

.social-links:hover > a:hover {
   opacity: 1; 
}
@media only screen and (min-width: 768px) and (max-width: 1200px){
   .social{
    display: flex;
    width: 100%;
    justify-content: space-between;
    max-width: 300px;
    margin: 2rem 3%;
    padding: 1rem;
  }
  .seemorepos{
  bottom: 4rem;
 }
  }

@media only screen and (min-width: 320px) and (max-width: 768px){
   .footertxt{
  position: relative;
  font-family: "MyWebFont1";
  color:#ffffff9c;
  font-weight: 50%;
  size:  80%;
  padding-left: 5%;
  padding-top: 3%;
  padding-bottom: 5%;
  text-align: left;
  max-width: 300px;
  line-height: 200%;
  }
  header {
  position: relative;
  font-family: "MyWebFont2";
  font-size: 100%;
  background: #000;
  min-height: 40vh;
  padding: 0 2rem 8rem;
  color: #fff;
  display: flex;
  flex-direction: column;
}
   .social{
    display: flex;
    width: 100%;
    justify-content: space-between;
    max-width: 300px;
    margin: 2rem 2%;
    padding: 1rem;
  }
  ul{
    display: none;
  }
  h1 {
    font-family: "MyWebFont";
    font-size: 250%;
    padding-top: 0.1em;
}
header section h2 {
 
    font-size: 111%;
   
}
.socialicons{
  text-align:center; 
  padding-top:10%;
}
  .txt4{
  position: relative;
  font-family: "MyWebFont1";
  color:#444444;
  font-weight: 50%;
  padding-left: 5%;
  padding-top: 10%;
  text-align: left;
  font-size: 100%;
  }
.txt3 {
    position: relative;
    padding-left: 5%;
    padding-top: 10%;
    font-family: "MyWebFont";
    color: #000;
    font-size: 200%;
}
 .txt6{
  position: relative;
  padding-top: 6%;
  padding-left: 5%;
  font-family: "MyWebFont";
  color:#fff;
  font-size: 200%;
  }
    .txt8{
  position: relative;
  font-family: "MyWebFont2";
  color:#000;
  font-size: 100%;
  padding-top: 8%;
  padding-left: 5%;
  text-align: Centre;
  line-height: 150%;
  }
}

@media only screen and (min-width: 300px) and (max-width: 700px){
.seemorepos{
  bottom: 2rem;
 }
  #headerimg{
  display: none;
}
 .mypic{
    width: 50%;
    min-width: 400px;
    align-self: center;
  }
}


@media screen and (max-width: 700px) {
  section {
    flex-wrap: wrap;
  }
  section > .sample {
    width: 100%;
    padding-bottom: calc(100% - 2rem);
  }
}


.card-list-points li {
  position: relative;
  margin: 12px 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 12px;
  width: 100%
}

.card-list-points li .card-check-icon {
  height: 24px;
  width: 24px;
  --bg: #E8F0FE;
  --stroke: #007AFF;
} 

.card-list-points li .card-check-icon.blue {
  --bg: #E8F0FE;
  --stroke: #007AFF;
} 

.card-list-points li .card-check-icon.green {
  --bg: #e8f2fd;
  --stroke: #007AFF;
} 

.card-list-points li .card-check-icon.orange {
  --bg: #feebe1;
  --stroke: #007AFF;
} 

@media screen and (min-width: 980px) {
  .cards-layout {
    display: flex;
    flex-wrap: wrap;
  }

  .cards-layout-image {
    flex: 2;
  }

  .cards-layout-content {
    flex: 1;
  }
}