html, body {
    max-width: 100%;
    overflow-x: hidden;
}



/* Font */
a {
  text-decoration: none;
  color: #000000;
}

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 64px;
  line-height: 71px;
}

h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 32px;
  line-height: 42px;
}

h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 32px;
}

h4 {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 12px;
}

h4.regular {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
}



p {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
}

p a {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  text-decoration: none;
  color: #0084FF;
}

#caption {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 22px;
}

.bold {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}

.grey {
  color: #9197A3;
}

.white {
  color: #ffffff;
}

.blue {
  font-family: 'Roboto', sans-serif;
  color: #0084FF;
}

.green {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #1ED057;
  font-size: 14px;
}

.red {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #FF1414;
  font-size: 14px;
}

ul.bullets {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
}

ul.bullets li::before {
  content: "· ";
}

ul.bullets li {
  text-indent: -0.4em;
  padding-bottom: 12px;
  float: none;
}

ul.indent {
  padding-left: 24px;
  color: #9197A3;
}



/* Top Spacing */

.vs-m-top-xl {
  margin-top: 144px;
}

.vs-m-top-l {
  margin-top: 72px;
}

.vs-m-top-m {
  margin-top: 48px;
}

.vs-m-top-s {
  margin-top: 24px;
}

.vs-m-top-xs {
  margin-top: 16px;
}

.vs-m-top-xxs {
  margin-top: 6px;
}

.vs-p-top-xl {
  padding-top: 144px;
}

.vs-p-top-l {
  padding-top: 72px;
}

.vs-p-top-m {
  padding-top: 48px;
}

.vs-p-top-s {
  padding-top: 24px;
}

.vs-p-top-xs {
  padding-top: 16px;
}

.vs-p-top-xxs {
  padding-top: 6px;
}

/* Bottom Spacing */

.vs-m-bottom-xl {
  margin-bottom: 144px;
}

.vs-m-bottom-l {
  margin-bottom: 72px;
}

.vs-m-bottom-m {
  margin-bottom: 48px;
}

.vs-m-bottom-s {
  margin-bottom: 24px;
}

.vs-m-bottom-xs {
  margin-bottom: 16px;
}

.vs-m-bottom-xxs {
  margin-bottom: 6px;
}

.vs-p-bottom-xl {
  padding-bottom: 144px;
}

.vs-p-bottom-l {
  padding-bottom: 72px;
}

.vs-p-bottom-m {
  padding-bottom: 48px;
}

.vs-p-bottom-s {
  padding-bottom: 24px;
}

.vs-p-bottom-xs {
  padding-bottom: 16px;
}

.vs-p-bottom-xxs {
  padding-bottom: 6px;
}

/* Spacing Reset */

.p-left-0 {
    padding-left: 0px !important;;
}

.p-right-0 {
    padding-right: 0px !important;;
}

/* Width */

.w95 {
  width: 95%;
  height: auto;
}

/* Nav */

#notice {
  background-color: #1266FA;
}

#notice #notice-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  color: #ffffff;
}

nav {

}

nav #logo {
  max-width: 100%;
  padding-top: 24px;
  padding-bottom: 24px;
}

ul {
}

li {
    float: left;
}

li a {
    display: block;
    text-align: left;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    padding-right: 72px;
}

#hamburger  {
  display: none;
  visibility: hidden;
}

/* Hamburger Menu */

/* Overlay style */
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,1);
  z-index: 100;
}

/* Overlay closing cross */

.overlay .overlay-close {
	width: 80px;
	height: 80px;
	position: absolute;
	right: 20px;
	top: 20px;
	overflow: hidden;
	border: none;
	background: url(icons/close.svg) no-repeat center center;
	text-indent: 200%;
	color: transparent;
	outline: none;
	z-index: 100;
}

.overlay-close img {
  width: 24px;
  height: 24px;
  right: -4px;
  top: 8px;
  position: absolute;
}


/* Menu style */
.overlay nav {
	text-align: center;
	position: relative;
	top: 50%;
	height: 60%;
	font-size: 54px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	height: 100%;
	position: relative;
  width: 100%;
}

.overlay ul li {
	display: block;
	height: 20%;
	height: calc(100% / 5);
  float: none;
  padding-bottom: 24px;
}

.overlay ul li a {
	font-weight: 300;
	display: block;
	color: #fff;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
  font-size: 16px;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
	opacity: .5;
}

/* Effects */
.overlay-hugeinc {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

.overlay-hugeinc.open {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.overlay-hugeinc nav {
	-webkit-perspective: 1200px;
	perspective: 1200px;
}

.overlay-hugeinc nav ul {
	opacity: 0.4;
	-webkit-transform: translateY(-25%) rotateX(35deg);
	transform: translateY(-25%) rotateX(35deg);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}

.overlay-hugeinc.open nav ul {
	opacity: 1;
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

.overlay-hugeinc.close nav ul {
	-webkit-transform: translateY(25%) rotateX(-35deg);
	transform: translateY(25%) rotateX(-35deg);
}

/*----- Project Template -----*/
.quick-overview .row{
  margin-bottom: 16px;
}

.quick-overview p{
  display: inline;
}

.quick-overview .highlight {
  display: inline;
}

.quick-overview img{
  width: 100%;
  height: auto;
}

.project-image1 img{
  width: 100%;
  height: auto;
}

.project-image1 p{
  text-align: center;
  padding-top: 16px;
  width: 95%;
  height: auto;
}

.shadow1 {
  -webkit-filter: drop-shadow(0px 20px 34px rgba(0,0,0,0.20));
  filter:         drop-shadow(0px 20px 34px rgba(0,0,0,0.20));
}

.persona-card {
  background: #FFFFFF;
  border: 1px solid #E7E7E7;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
}

.persona-profile {
  padding: 48px;
}

.persona-card img {
  width: 100%;
  height: auto;
}

.persona-info {
  padding-top: 48px;
  padding-right: 48px;
  padding-bottom: 48px;
}

.problem-space {
  background: #EDF3F9;
  padding-top: 48px;
  padding-bottom: 48px;
  padding-right: 48px;
}

.problem-space h4 {
  color: #0084FF;
}

.mission-statement {
  background: #E3F8EA;
  padding-top: 48px;
  padding-bottom: 48px;
}

.mission-statement h4 {
  color: #1ED057;
  text-align: left;
}

.design-principles {
  background: #F7F7F7;
  padding-top: 48px;
  padding-bottom: 48px;
}

.design-principles h4 {
  background: #000000;
  color: #ffffff;
  padding: 8px 8px;
  text-align: center;
}

#read-more {
  -webkit-transition-duration: .5s;
    -moz-transition-duration: .5s;
    -o-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

#read-more:hover {
  opacity: .8;
}

.designaward {
  border-style: solid;
  border-color: #EA212D;
  border-width: 1px;
  padding-top: 48px;
  padding-bottom: 48px;
}

.designaward img {
  width: 50%;
}

/*Browser*/
.browser {
  box-shadow: 0 5px 13px 0 rgba(0,0,0,0.14);
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow:
  hidden;
  max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* About */

.country-card {
  height: 200px;
  text-align: center;
  width: 95%;
}

.country-card.country1 {
  background: linear-gradient(
                       rgba(20,20,20, .5),
                       rgba(20,20,20, .5)),
                       url("https://images.unsplash.com/photo-1474224017046-182ece80b263?dpr=2&auto=format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=&bg=");
  background-size: cover;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.country-card.country2 {
  background: linear-gradient(
                       rgba(20,20,20, .5),
                       rgba(20,20,20, .5)),
                       url("https://images.unsplash.com/photo-1485394735640-56c0356b62cf?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=");
  background-size: cover;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.country-card.country3 {
  background: linear-gradient(
                       rgba(20,20,20, .5),
                       rgba(20,20,20, .5)),
                       url("https://images.unsplash.com/photo-1482287068671-7fb7325e1a8d?dpr=2&auto=format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=&bg=");
  background-size: cover;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

/*----- Accordion -----*/

.tog>div{
  height: 0px;
max-height: 0px;
overflow: hidden;
/*border-bottom: 1px solid #ccc;*/
transition: padding-bottom ease 0.5s;
-webkit-transition: padding-bottom ease 0.5s;
-moz-transition: padding-bottom ease 0.5s;
-o-transition: padding-bottom ease 0.5s;
}

.tog h3 {
    margin-bottom: 8px;
    margin-top: 8px;
}
.tog p {
    margin-bottom: 9px;
    margin-top: 1px;
}
/*.tog div {
    height: 0px;
    max-height: 0px;
    overflow: hidden;
    /*border-bottom: 1px solid #ccc;*/
    transition: padding-bottom ease 0.5s;
    -webkit-transition: padding-bottom ease 0.5s;
    -moz-transition: padding-bottom ease 0.5s;
    -o-transition: padding-bottom ease 0.5s;
}*/
#rt-main .tog h3 {
    font-size: 24px;
    text-transform: none;
    font-weight: 400;
    padding-top: 0px;
}
.tog h3:before {
    font-family: FontAwesome;
    content: "\f138";
    /*padding-right: 10px;*/
    position: relative;
    top: -1px;
}
.tog h3:hover:before,
.tog.active h3:before {
    content: "\f13a";
}
.tog.active h3:before {
    color: #29a0eb;
}
html #rt-main .tog h3:hover {
    cursor: pointer;
    color: #666;
}
.tog:hover div {
    padding-bottom: 60px;
    transition: padding-bottom ease 0.8s;
    -webkit-transition: padding-bottom ease 0.8s;
    -moz-transition: padding-bottom ease 0.8s;
    -o-transition: padding-bottom ease 0.8s;
}
.tog.active div {
    height: inherit;
    max-height: 1000px;
    padding-bottom: 8px;
    transition: max-height ease 0.8s;
    -webkit-transition: max-height ease 0.8s;
    -moz-transition: max-height ease 0.8s;
    -o-transition: max-height ease 0.8s;
}

/* Tabs */

.tab-gallery img{
  width: 95%;
  height: auto;
}

.c-tabs {
  position: relative;
  display: noflex;
  flex-wrap: wrap;
}

.c-tabs [id*='-tab-content-'] {
  display: none;
}

.c-tabs input[type='checkbox'],
.c-tabs input[type='radio'] {
  display: none;
}

.c-tabs [id*='-tab-content-'] {
  display: none;
}

.c-tabs input[type='checkbox'],
.c-tabs input[type='radio'] {
  display: none;
}

.c-tabs label {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  color: #59d;
  border: 1px solid #59d;
  border-left-width: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  opacity: .3;
}

.c-tabs label:nth-child(2) {
  border-left-width: 1px;
}

.c-tabs input:checked + label {
  color: #000000;
  opacity: 1;
}

.phone img {
  width: 95%;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

/* Friend */

  .friend {
    margin-right: 1rem;
  }

  .friend-container {
    height: 180px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
  }

  #friend-photo {
    width: 100%;
    height: auto;
  }


  .friend-container p{
    flex-grow: 1;
  }

  .friend-container a{
    margin-top: auto;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 24px;
    text-decoration: none;
    color: #0084FF;
    target="_blank";
  }


/***************************************
 *
 * Helper Classes
 *
 */



.c-tabs-content label {
  border: 0;
}

.c-tabs-minimal label {
  flex: none;
  padding-right: 48px;
}



/***************************************
 *
 * Content
 *
 */



 .c-content{
  display: none;
  width: 100%;
}

#c-tab-11:checked ~ #c-content-11,
#c-tab-12:checked ~ #c-content-12,
#c-tab-13:checked ~ #c-content-13,
#c-tab-14:checked ~ #c-content-14,
#c-tab-15:checked ~ #c-content-15,
#c-tab-16:checked ~ #c-content-16,
#c-tab-17:checked ~ #c-content-17,
#c-tab-18:checked ~ #c-content-18,
#c-tab-19:checked ~ #c-content-19,
#c-tab-20:checked ~ #c-content-20,
#c-tab-21:checked ~ #c-content-21{
  display: block;
}

@media screen and (max-height: 30.5em) {
	.overlay nav {
		height: 70%;
		font-size: 34px;
	}
	.overlay ul li {
		min-height: 34px;
	}
}

#social_media_icons_menu {
  height: auto;
  width: 24px;
  padding-right: 24px;
  opacity: .5;
}

/* Divider */

hr {
  border-left: none;
  margin-top: 0px;
  margin-bottom: 0px;
}

hr.style1{
	border-top: .5px solid #F4F4F4;
}

hr.style2{
	border-top: 1px solid #FFFFFF;
  opacity: .3;
}

hr.style3{
	border-top: .5px solid #FFFFFF;
  opacity: .3;
}

hr.style4 {
  border-top: .5px solid #dddddd;
}


/* Width */
.full-width {
  margin: 0 auto;
  width: 100%;
  display: block;
}

.l-width {
  margin: 0 auto;
  width: 90%;
  display: block;
}

.m-width {
  margin: 0 auto;
  width: 70%;
  display: block;
}

/* Background Color */
.bg-grey {
  background-color: #F7F7F7;
}

.bg-black {
  background-color: #000000;
}


/* Scroll Down Button */
#scroll_down_btn {
  background: url("../icons/arrow_down.svg") no-repeat center;
  background-color: #000000;
  width: 60px;
  height: 60px;
  margin-bottom: -30px;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
}

#scroll_down_btn:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.1);
}

/* Project Card */
.project-card {
  background-color: #ffffff;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
}

.project-card:hover {
  box-shadow: 0 45px 100px rgba(0, 0, 0, 0.1);
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.01);
}

.project-card-text {
  padding-left: 48px;
}

.project-card img{
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  padding: 10%;
}

/* Footer */
  footer {
    background-color: #000000;
  }

  #social_media_icons {
    height: auto;
    width: 24px;
    padding-right: 48px;
    opacity: .5;
  }

  footer ul li a {
    color: #ffffff;
    opacity: .5;
  }

  footer #disclaimer {
    color: #ffffff;
    opacity: .5;
  }

/* Fade In */

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.fade-in.two {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay:1.2s;
  animation-delay: 1.2s;
}

.fade-in.three {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

/* 1200px and Above */
@media screen and (min-width: 1199px){
  button#trigger-overlay {
    display: none;
  }

}

/* 1200px and Below */
@media screen and (max-width: 1199px){
  nav ul li a{
    padding-bottom: 24px;
  }

  .persona-profile {
    padding: 32px;
  }

}

@media screen and (max-width: 1024px){
  .m-width {
    margin: 0 auto;
    width: 90%;
    display: block;
  }

  h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 48px;
    line-height: 55px;
  }

  h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 32px;
    line-height: 42px;
  }

  .project-card-text {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .c-content img {
    padding-bottom: 48px;
  }

}

@media screen and (max-width: 768px){

    #dropbox_text {
      clear: left;
      padding-top: 16px;
      width: 75%;
    }

  h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 32px;
    line-height: 42px;
  }

  .m-width {
    margin: 0 auto;
    width: 90%;
    display: block;
  }

  nav ul li a{
    padding-right: 48px;
  }

  .project-card-text {
    padding: 48px;
    padding-top: none;
    padding-bottom: none;
  }

  .quick-overview img{
    margin-top: 48px;
  }

}

@media screen and (max-width: 414px){
  h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 32px;
    line-height: 36px;
  }

  footer .col-lg7 ul li{
    display: block;
    width: 50%;
    padding-bottom: 16px;
  }

  nav ul {
    display: none;
    visibility: hidden;
  }

  nav .col-sm-12.col-md-12.col-lg-offset-1.col-lg-8 {
    display: none;
  }

  nav #logo {
    padding-top: 28px;
  }

  #hamburger {
    display: block;
    visibility: visible;
    padding-top: 24px;
  }

  .project-card-text {
    padding: 24px;
  }

  .quick-overview img{
    margin-top: 48px;
  }

  .persona-profile {
    padding: 16px;
  }

}


/* Other */
  #close {
    padding-top: 24px;
    height: 24px;
    width: auto;
  }

  button {
    padding: 0;
  }

  /*input, button, submit {
    border: none;
    background-color: #ffffff;
    box-sizing: initial;
    padding: 0;
  }*/

  /*FramerJS*/
  iframe {

  }