* {
box-sizing: border-box;
}

*, *:before, *:after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

@import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,600,600i,700,700i" );
@import url("https://fonts.googleapis.com/css?family=Dancing+Script:500,500i" );

/* fancy css for js*/
@keyframes fade-in {
  from {opacity: 0; transform: scale(.7,.7)}
  to {opacity: 1;}
}
.fade-in-element {
animation: fade-in 1.4s;
}
.hidden{
opacity: 0;
}
/* end fancy css*/

@keyframes bubble1 {
  0%{
    transform: translateY(0);
    opacity: 0;
  }
  50%{
    /* transform: translateY(0); */
    opacity:1;
  }
  70%{
    /* transform: translateY(0); */
    opacity: 1;
  }
  100%{
    transform: translateY(-80vh);
    opacity: 0;
  }
}


body {
font-family: 'Roboto', sans-serif;
background: #F5F2F2;
font-size: 18px;
line-height: 1.5;
padding: 0;
margin: 0;
background-size: cover;
font-weight: 400;
}
h1, h2, h3{
  font-weight: 700;
}
h4 h5{
  font-weight: 300;
}

#background {
background-image: url("../images/homepage.svg");
background-repeat: no-repeat;
background-size: cover;
}

#background1 {
background-image: url("../images/wbackground.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}

#background3 {
background-image: url("../images/background3.png");
background-repeat: no-repeat;
background-size: cover;
}

.container {
width: 100%;
margin: auto;
overflow-y: hidden;
/* overflow-x: scroll; */
overflow-x: hidden;
}

/******************************/
  /***** header - nav ***********/
  /******************************/

  .navbar-default{
    background-color: #F5F2F2;
    border-color: #F5F2F2;
}

.bs-example li{
  margin-right: 10px;
  padding: 20px;

}
.navbar-brand{
height: unset;
padding: 20px 20px 20px 50px;
}

.bs-example a{
  text-transform: uppercase;
  font-style: 16px;
}

header a:hover{
color: #73B9C2;
}

header a:hover:not(.active) {
  /* background-color: #111; */
}

.active {
  /* background-color: #BA9344; */
   border-radius: 25px;
   border: 2px solid #BA9344;
   padding: 25px;
}




.navbar-default .navbar-toggle .icon-bar {
    background-color: #3b7d7c;

}
.navbar-default .navbar-toggle {
    border-color:#f5f5f5;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #f5f5f5;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color:#f5f5f5;
   }
    .navbar-default .navbar-nav>li>a {
        color: #3b7d7c;
}

main {
    width:90%;
    margin:0 auto;
  }

/* dropdown */
.dropdown .dropbtn {
  border: none;
  outline: none;
  color: #3B7D7C;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown {
  position: relative;
  /* display: inline-block; */
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F5F2F2;
  min-width: 220px;
  /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
  z-index: 1;
}

.dropdown-content a {
  color: #3B7D7C;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  float: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}


/******************************/
  /***** scroll-button ***********/
  /******************************/

#myBtn {
display:none;
position: fixed;
bottom: 3vh;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: #3B7D7C;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}

#myBtn:hover {
background-color: #555;
}

/******************************/
/* logo */
/******************************/

.logo {
background-repeat: no-repeat;
margin-left: 5%;
margin-bottom: 1%;
}

/******************************/
  /***** homepage ***********/
  /******************************/
*{
  margin:0;
  padding:0;
}
.hero{
  width: 100%;
  height: 70vh;
  /* background-image: url(../images/backgroundu.png); */
  background-size: cover;
  background-position: center;
}

.bubbles img {
  width: 50px;
  animation: bubble1 3.5s linear infinite;
}

.bubbles {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: -6vh;
}

#bubbles1 {
  animation-delay: 0.5s;
}
#buubles2{
  animation-delay: 0.8s;
}
#bubbles3{
  animation-delay: 1s;
}
#bubbles4{
  animation-delay: 1.2s;
}
#bubbles5{
  animation-delay: 1.8s;
}
#bubbles6{
  animation-delay: 0.8s;
}
/* .buubles img:nth-child(4){
  animation-delay: 4.5s;
}
.buubles img:nth-child(5){
  animation-delay: 3s;
}
.buubles img:nth-child(6){
  animation-delay: 6s;
}
  .buubles img:nth-child(7){
    animation-delay: 7s;
} */

.realistic-marker-highlight{
  position:relative;
}
.realistic-marker-highlight:before{
  content:"";
  background-color:#ff6db7;
  width:105%;
  height:1.2em;
  position:absolute;
  z-index:-1;
  filter:url(#marker-shape);
  left:-0.25em;
  /* top:0.1em; */
  bottom: 0.1em;
  padding:0 0.25em;
}

#name {
display: flex;
text-align: center;
height: 480px;
width: 100%;
margin:  auto;
/* min-height: 100vh;
min-height: calc(100vh - 90px);
margin-top: -90px; */
margin-top: -10px;
}

#name h1{
font-size:72px;
color: #414546;
}

#name h4 {
color: #414546;
font-size: 25px;
/* font-weight: normal; */
/* margin-top: 2%; */
}

#name h5 {
color:#3B7D7C;
font-size: 32px;
font-weight: lighter;
margin-top: 2%;
}

#hide-sm {
  font-size:40px;
  scroll-behavior: smooth;
  margin: 0 auto;
  padding-top: 10%;
}
a:hover{
color: #c48f40;
text-decoration: none;
background: #eddec8;
cursor: pointer;
}
/******************************/
/* for homepage-work demo */
/******************************/

#project{
  width: 80%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
}

.container-fluid{
  display:none;
}

.hvrbox {
	position: relative;
	display: inline-block;
	max-width: 100%;
	height: auto;
}
.hvrbox img {
	max-width: 100%;
}
.hvrbox_background {
	width: 400px;
	height: 250px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.hvrbox .hvrbox-layer_bottom {
	display: block;
}
.hvrbox .hvrbox-layer_top {
	opacity:0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;

	background: #E0E8EB;
	padding: 15px;
	-moz-transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
	opacity: 1;
}
.hvrbox .hvrbox-text {
	text-align: center;
	font-size: 18px;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
	font-size: 15px;
	border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
	border-top: 1px solid rgba(179, 179, 179, 0.7);
	margin-top: 5px;
	padding-top: 2px;
	display: none;
}
.hvrbox.active .hvrbox-text_mobile {
	display: block;
}
.hvrbox .hvrbox-layer_image {
	padding: 0;
	background: none;
}
.hvrbox .hvrbox-layer_scale {
	border-radius: 50%;
	-moz-transform: scale(0);
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}
.hvrbox:hover .hvrbox-layer_scale,
.hvrbox.active .hvrbox-layer_scale {
	border-radius: 0%;
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}


/* Project showcase */

#project h2{
color: #414546;
font-size: 32px;
text-align: left;
padding: 3px 10px 3px 0;
line-height: 1.8;
margin-bottom: 25px;
}

.button_1 {
background: #3B7D7C;
height: 45px;
border-radius: 20px;
padding: 12px 25px 12px 25px;
color: #ffffff;
font-size: 17px;
font-weight: normal;
text-decoration: none;
transition: 0.3s all;
}

#project h1 {
text-align: center;
color: #3B7D7C;
font-size: 30px;
font-weight: bold;
}

#project h4{
color: #414546;
font-size: 24px;
}

#project p{
line-height: 28px;
font-size: 20px;
color: #414546;
padding-top: 10px;
font-weight: normal;
text-align: center;
}

#project .box{
width: 60%;
height: 50%;
margin: 0 auto;
}

#project hr {
  display: none;
}

#project2{
  width: 80%;
  /* height: 600px; */
  margin: 0 auto;
  text-align: center;
  margin-bottom: 50px;
}

#project2 h1 {
text-align: center;
color: #3B7D7C;
font-size: 32px;
font-weight: bold;
}

#project2 h4{
color: #414546;
font-size: 28px;
}

#project2 p{
line-height: 28px;
font-size: 20px;
color: #414546;
padding-top: 10px;
font-weight: normal;
text-align: center;
}

#blocjam{
  width: 80%;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: auto;
  margin-left: auto;
}

#demo{
  width: 85%;
  margin-top: 30px;
  margin-bottom: 60px;
  margin-right: auto;
  margin-left: auto;
}
#project3{
  width: 80%;
  /* height: 600px; */
  margin: 0 auto;
  text-align: center;
  margin-bottom: 50px;
}
/******************************/
/* for footer */
/******************************/

footer {
height: 250px;
background-color: #1e4e4d;
width: 100%;
bottom: 0;
text-align: center;
color: #FFFFFF;
}

.contact-icons a{
color: #ffffff;
}

.contact-icons {
display: flex;
justify-content: center;
padding-top: 1rem;
color: white;
padding-bottom: 1rem;
}

.contact-icons :hover{
color:#D7C29B;
transition: .5s;
background: none;
}

.copyright {
color: #ECEDED;
font-size: 14px;
font-weight: lighter;
padding-top: 0.02rem;
float: left;
margin-left: 2%;
}

hr{
align:left;
width:100%;
margin-bottom: 5px;
}

p {
font-size: 1rem;
/* padding-top: 5px; */
}

.difference{
color: white;
font-weight: lighter;
padding-top: 0.02rem;
}

.diff{
font-size: 30px;
color:white;
font-weight: bold;
padding-top: 25px;
}

.contact-icons .li{
list-style: none;
display: inline;
}

#twitter{
font-size:35px;
padding-right: 22px;
padding-left:10px;
text-decoration:none;
}
#linkedin{
  font-size:35px;
  padding-right: 22px;
  padding-left:10px;
  text-decoration:none;
}
#github{
  font-size:35px;
  padding-right: 22px;
  padding-left:10px;
  text-decoration:none;
}
#email{
  font-size:35px;
  padding-right: 22px;
  padding-left:10px;
  text-decoration:none;
}
#briefcase{
  font-size:35px;
  padding-right: 22px;
  padding-left:10px;
  text-decoration:none;
}
/******************************/
  /***** casestudy -ordered by sections***********/
  /******************************/

#project-name {
background-position: center  ;
background-size:830px;
height:100%;
text-align: center;
}
#demo1 {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
  }
#project-name h1{
text-align: center;
color: #3B7D7C;
font-size: 35px;
font-weight: bold;
margin-left: 22px;
}

#project-name h3{
font-size: 28px;
font-weight:bold;
}

#project-name h4{
text-align: center;
color: #BA9344;
font-size: 28px;
font-weight: normal;
margin-left: 20px;
}

#project-name .big-box{
margin-left: auto;
margin-right: auto;
border: 2px solid #73B9C2;
width: 100%;
max-width: 800px;
height: 50%;
background: rgba(231, 238, 238,0.2);
text-align: center;
padding: 30px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
margin-top: 3%;
}

.prototype-button{
margin: 0 auto;
width: 70%;
margin-top: 25px;
margin-bottom: -10px;
}
/******************************/
/* for three boxes in project.html */
/******************************/

#boxes {
width: 100%;
margin-top: 8%;
height: 300px;
margin-left: auto;
margin-right: auto;
}

#boxes .xbox{
float: left;
width: 22%;
text-align: center;
margin-left:8%;
height: 180px;
border: 1px solid black;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
background: rgba(231, 238, 238,0.2);
margin-top: 50px;
}

#boxes .zbox{
float: left;
width: 22%;
text-align: center;
margin-left:8%;
height: 290px;
border: 1px solid black;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
background: rgba(231, 238, 238,0.2);
}

#boxes h3 {
width: 85%;
padding: 2%;
height: 38px;
color:  #000000;
text-align: center;
background: #D7C39B;
margin-top: -30px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}

#boxes .li{
float: center;
}

/******************************/
/* for overview */
/******************************/

.hgroup{
color: #3B7D7C;
font-size: 29px;
font-weight:bold;
margin-left: 5%;
margin-top: 7%;
padding: 3px 10px 3px 0;
border-bottom:  solid #3B7D7C;
width:90%;
margin-bottom: 2%;
}

.new1{
border: 2px solid #777777;
align: center;
width: 90%;
float: center;
}

#intro h3{
width: 120px;
padding-top: 4px;
height: 35px;
color:  #000000;
text-align: center;
background: #D7C39B;
margin-top: 20px;
margin-bottom: 15px;
font-weight: bold;
}

#intro .problem {
margin-left: auto;
margin-right: auto;
height: 40%;
text-align: left;
margin-bottom: 50px;
}

#intro .solution {
margin-left: auto;
margin-right: auto;
height: 40%;
text-align: left;
margin-bottom: 50px;
}

#intro .assumptions {
margin-left: auto;
margin-right: auto;
height:60%;
text-align: left;
margin-bottom: 50px;
}

#intro .users {
margin-left: auto;
margin-right: auto;
height: 80%;
text-align: left;
margin-bottom: 5%;
}

#intro .change {
width: 180px;
padding-top: 4px;
height:35px;
color:  #000000;
text-align: center;
background: #D7C39B;
margin-top: 30px;
margin-bottom: 15px;
font-weight: bold;
}

#intro .change1{
width: 200px;
padding-top: 4px;
height:35px;
color:  #000000;
text-align: center;
background: #D7C39B;
margin-top: 30px;
margin-bottom: 15px;
font-weight: bold;
/* margin-left: 18%; */
}

.vl{
border-left: 3px solid #3B7D7C;
height: 20%;
padding-left: 15px;
}

#intro .result1{
margin-left:7%;
float: left;
width: 24%;
text-align: left;
}

#intro .result2{
float: left;
width: 23%;
text-align: left;
margin-left:7%;
}

#intro .result3{
float: left;
width: 23%;
text-align: left;
margin-left:7%;
}

.bigbox li{
  padding: 15px;
}
.bigbox ul{
    padding: 5px;
    height:60%;
}

#intro h4{
color:#3B7D7C;
font-size: 28px;
font-weight: bold;
/* padding-top: 30px; */
}

#intro .result-1{
  float:none;
  height:200px;
  margin-left: auto;
  margin-right: auto;
}

#intro .survey{
  /* width:40%; */
  float:left;
  margin-left: 10%
  padding: 5%;
  margin-right: auto;
}
#intro .row-cc{
  display: flex;
}

#intro .column-cc{
  flex: 50%;
  padding:10px;
  height:280px;
  width: 33%;
}

.people{
  /* padding:  5%; */
}

#intro .col-7{
  /* width:60%; */
  margin-left: 50%;
  padding:5%;
  margin-right: auto;
}

#intro .bigbox{
float: center;
border: 6px solid #9ACAD0;
height: 380px auto;
text-align: center;
margin-left: auto;
margin-right: auto;
/* width: 90%; */
margin-top: 5%;
padding: 8px;
margin-bottom: 5%;

}

#intro .personas {
height: 55%;
text-align: left;
margin-left: auto;
margin-right: auto;
}

#intro .person{
margin-top: 10px;
height:950px;
text-align: left;
margin-left: auto;
margin-right: auto;
max-width: 900px;
width: 90%;
margin-bottom: 70px;
}

.person h2{
width: 100%;
padding-top: 7px;
vertical-align: middle;
line-height: 1.2;
padding:15px 0px;
color:  #000000;
text-align: center;
background: #D7C39B;
font-weight: bold;
margin-left: auto;
margin-right: auto;
}

#intro .persona1{
padding: 3%;
/* height: 100%; */
background: rgba(231, 238, 238,0.2);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border: 1px solid black;
margin-left:2%;
margin-right: 2%;
width:46%;
float: left;
}

#intro .persona2{
padding: 3%;
/* height:100%; */
background: rgba(231, 238, 238,0.2);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border: 1px solid black;
margin-right:2%;
margin-left: 2%;
width:46%;
float: left;
}

.anderson{
width:100%;
/* height:380px; */
margin-left: auto;
margin-right: auto;
}

.monika{
width:100%;
/* height:380px; */
margin-left: auto;
margin-right: auto;
}

.vl1{
border-left: 3px solid #3B7D7C;
/* height: 12%; */
padding-left: 10px;
margin-top: 10px;
padding-top: 5px;
font-style: italic;
font-weight: bold;
}

.vl2{
border-left: 3px solid #3B7D7C;
/* height: 9%; */
padding-left: 10px;
margin-top: 10px;
padding-top: 5px;
font-style: italic;
font-weight: bold;
}

#intro .compare {
margin-left: auto;
margin-right: auto;
height: 50%;
text-align: left;
margin-bottom: 2%;
}

#intro .epi{
float: left;
height:50%;
padding:15px;
text-align: center;
margin-left: 7%;
/* border: 5px solid black;
box-shadow: 10px 10px #9ACAD0; */
background: rgba(231, 238, 238,0.2);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border: 1px solid black;
margin-bottom: 30px;
width:25%;
}

.curious {
width:100%;
/* height:70px; */
}

.bigoven{
width:90%;
height:70px;
}

#intro .story {
/* width: 45%; */
height: 50%;
text-align: left;
margin-left: auto;
margin-right: auto;
}

ul.userstory li{
  margin-bottom:1rem;
  background-color: #E0E8EB;
  /* background-color: #c1cece; */
  padding: 15px;
}


#intro .flows {
/* width: 45%; */
height: 50%;
text-align: left;
margin-left: auto;
margin-right: auto;
margin-bottom: 2%;
}

#intro .column {
float: left;
/* width: 40%; */
margin-left: 6%;
margin-bottom: 30px;
margin-right: auto;
}

.login{
width:100%;
/* height:450px; */
}

.organize{
width:100%;
/* height:450px; */
/* margin-left: 1%; */
}
.userflows{
  width:100%;
}
/******************************/
/* for branding */
/******************************/

#branding h3{
width: 120px;
padding-top: 4px;
height: 35px;
color:  #000000;
text-align: center;
background: #D7C39B;
/* margin-left: 15%; */
margin-top: 20px;
margin-bottom: 15px;
font-weight: bold;
}

.new2{
border: 2px solid #777777;
align: center;
width: 90%;
float: center;
}

.brand{
margin-left: auto;
margin-right: auto;
/* width: 45%; */
height: 50%;
text-align: left;
margin-bottom: 6%;
margin-top: 6%;

}

#branding .logoo{
  margin-left: auto;
  margin-right: auto;
  height: 60%;
  text-align: left;
  margin-bottom: 4%;
  margin-top: 3%;
}

#branding .column {
float: left;
margin-left: 8%;
margin-bottom: 6%;
height: 450px;
}

.logosketch{
/* width:120%; */
/* height:440px; */
height: 100%;
}

.logogp{
  /* width: 90%; */
/* height:440px; */
margin-left: 12%;
}

#branding .column-cc{
  margin-bottom: 2%;
  width: 100%;
}

.cc-sketch{
  height: 450px;
  width: 70%;
  margin-bottom: 4%;
  margin-left: auto;
  margin-right: auto;
  margin-left: 12%;
}

#branding .change{
width: 150px;
padding-top: 4px;
height:35px;
color:  #000000;
text-align: center;
background: #D7C39B;
/* margin-left: 15%; */
margin-top: 30px;
font-weight: bold;
margin-bottom: 15px;
}

#branding .palette {
margin-left: auto;
margin-right: auto;
/* width: 45%; */
height: 40%;
text-align: left;
margin-bottom: 2%;
margin-top:4%;
}

.col-palette{
width:100%;
height:580px;
margin-left: auto;
margin-right: auto;
}

.font{
width:100%;
height:500px;
margin-left: auto;
margin-right: auto;
}

#branding .fonts {
margin-left: auto;
margin-right: auto;
/* width: 45%; */
height: 500px;
padding: 10px;
text-align: left;
/* border: 6px solid #73B9C2; */
/* box-shadow: 8px 8px #9ACAD0; */
/* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border: 1px solid black; */
margin-bottom: 20px;
}

/******************************/
/* for testing */
/******************************/

#testing .frames{
margin-left: auto;
margin-right: auto;
margin-top: 25px;
width: 55%;
height: 80%;
text-align: left;
margin-bottom: 20px;
}

.wframes1{
  width:100%;
  height:650px;
  margin-left: auto;
  margin-right: auto;
}

.wframes2{
  width:80%;
  height:80%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#testing h3{
width: 240px;
padding-top: 4px;
height:35px;
color:  #000000;
text-align: center;
background: #D7C39B;
/* margin-left: 15%; */
margin-top: 5px;
font-weight: bold;
}

#testing h6{
width: 150px;
padding-top: 4px;
height:35px;
color:  #000000;
text-align: center;
background: #D7C39B;
/* margin-left: 19%; */
margin-top: 30px;
font-weight: bold;
}

#testing .row{
margin-left: 20%;
margin-top: 10px;
width: 95%;
height: 80%;
margin-bottom: 20px;
}
#testing .test{
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  width: 55%;
  height: 50%;
  text-align: left;
  margin-bottom: 40px;
}
/* #testing .column {
width: 40%;
margin-left: 2%;
margin-bottom: 1%;
height: 600px;
padding:1%;
} */

.organize2{
margin-top:35px;
width:30%;
margin-right: 30px;
}

.organize1{
width:30%;
}

.o{
  width:70%
}
#testing .utest {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 55%;
height: 60%;
text-align: left;
margin-bottom:40px;
}

#testing .final {
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  width: 55%;
  height: 30%;
  text-align: left;
  margin-bottom: 30px;
}
#testing .cc-final{
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  width: 90%;

}

.oo{
  width:100%;
  margin-top: 20px;
}
#testing a{
color: #ffffff;
text-decoration: none;
}
#testing a:hover{
color: #A78D48
}
.utest a {
color: #3B7D7C;
text-decoration: none;
}

#testing .row1{
margin-left: 40px;
height:1550px;
width: 94%;
border: 6px solid #9ACAD0;
margin-bottom: 15px;
}

#testing .column1 {
float: left;
width: 30%;
height: 760px;
padding:10px;
margin-bottom: 10px;
}

/******************************/
/* final product */
/******************************/

.gallery {
  display: grid;
  grid-template-columns: auto auto auto;
  max-width: 800px;
  margin:25px auto;
  grid-gap:1rem;
}

.quarter {
  display: inline-block;
  width:32%;
  padding: 25px;
}

.screens {
  background-image: url("../images/hero-image.jpg");
  /* height: 1150px; */
  /* width: 1150px; */
  padding: 1%;
  padding-top: 25px;
  padding-bottom: 0;
  /* position: relative; */
  margin-right: 5%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: 80% auto;
}

  /* mobile-div */

  .mobile{
    width:100%;
    margin-left: 0;
  }

  .slider{
    display:none;
  }

  .row-1 {
    position: relative;
    top:-95px;
    left:1%;

  }

  .row-2{
    /* position: static; */
    top:-30px;

  }

  .row-3{
    /* position: static; */
    /* top:100px; */
    left:75%;
      top:-800px;
    /* top: 30px; */
  }

  .row-4{
    position: relative;
    top:-800px;
    left:76.5%;
  }

  .smaller {
    max-width: 100%;
  }

  .padding-top {
  /* margin-top: 50px; */
}

.slideshow-controls{
  width:100%;
  font-size: 30px;
  position: relative;
  top:-350px;
  left:-20px;
}

.left {
  float: left;
}

.right{
  float: right;
}
.hidden{
  /* width:100%; */
}
.button_4{
background:#3B7D7C;
height: 45px;
border-radius: 20px;
border:0;
color: #ffffff;
font-size: 18px;
font-weight: normal;
text-decoration: none;
padding: 10px 25px 10px 25px;
width: 45%;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}

#testing .end {
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  width: 55%;
  height: 70%;
  text-align: left;
  margin-bottom: 40px;
}
#testing .lesson {
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  width: 55%;
  height: 60%;
  text-align: left;
  margin-bottom:90px;
}

/******************************//******************************/
/****************//* for About.html *//***********************/
/******************************//******************************/
#about{
  width: 80%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
}
#about h1 {
margin-top: 5px;
color: #3B7D7C;
font-size: 3.5rem;
}

#about h4{
margin-bottom: 50px;
color: #BA9344;
font-size: 28px;
font-weight: normal;
}

.wajiha{
width:80%;
margin: 0 auto;
}

#bio {
  height: 100%;
  margin: 0 auto;
  margin-top: 25px;
  width: 65%;
  margin-bottom: 50px;
}

#bio h5{
  border: solid 1px #c48f48;
  outline: solid 1px #c48f48;
  outline-offset: -9px;
  padding: 30px;
  max-width: 530px;
  /* text-transform: uppercase; */
  line-height: 1.3;
  margin-bottom: 30px;
  margin: 30px auto 50px;
  width: 95%;
  text-align: left;
}

#bio p{
  max-width: 680px;
  margin: auto;
  padding-bottom: 15px;
}

.book{
margin-left: 50%;
margin: 0 auto;
width:40%;
z-index: -1;
display: block;
margin-bottom: 40px;
}

.Arrow{
right: 180px;
top: 1200px;
z-index: -1;
}

.flower{
width: 30%;
z-index: -1;
margin: 0 auto;
margin-left: 4%;
padding-bottom: 2%;
margin-bottom: 40px;
}

.bond{
z-index: -1;
margin-left: 20%;
margin: 0 auto;
width:30%;
margin-left: 4%;
margin-bottom: 40px;
}

.chemist{
z-index: -1;
margin-left: 50%;
margin: 0 auto;
width:40%;
display: block;
margin-bottom: 40px;
margin-top: 30px;
}

.line{
z-index: -1;
margin-left: 40%;
margin: 0 auto;
width:20%;
padding-bottom: 20%;
margin-right: 3%;
margin-left: 6%;
}
/******************************//******************************/
/******************//* for contact.html *//********************/
/******************************//******************************/

.say-hello h1{
font-size: 4rem;
margin-top: 30px;
text-align: center;
margin-top: 20px;
color: #3B7D7C;
/* font-size: 35px; */
font-weight: bold;
}

.say-hello p{
text-align: center;
margin-top: 15px;
font-size: 22px;
}

.say-hello a{
text-decoration: none;
color: #3B7D7C
}

.contactForm {
width: 60%;
max-width: 580px;
margin: 30px auto 100px auto;
border-radius: 5px;
background-color: #eeeaea;
padding: 20px;
}

input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: none;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
font-size: 16px;
}

input[type=submit] {
background-color: #3B7D7C;
color: white;
padding: 12px 20px 12px 20px;
width: 30%;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 17px;
}

input[type=submit]:hover {
color: #c48f40;
background: #eddec8;
}

/***--------------------------------------------------***/
/***---------- media query for mobile and ipad ---------***/
/***--------------------------------------------------***/

/* @media(max-width:1000px){

}

  @media(max-width:500px){}
   */

@media(max-width:800px){
body {
  font-size: 15px;
  line-height: 1.5;
}
.bs-example li{
padding: 10px;
margin-right: auto;
margin-left: auto;
/* float: right; */
}
.navbar-brand{
  padding: 20px 20px 20px 20px;
  height:100px;
}

.nav>li>a {
   position: relative;
   display: block;
   /* padding-top: 25px;
   padding: 2px 2px; */
       /* overflow: hidden; */
 }

.navbar-toggle{
  margin-top: 40px;
}

.navbar-nav{
  margin: 10px;
}

.active {
  /* background-color: #BA9344; */
   border-radius: 20px;
   border: 1px solid #BA9344;
   padding: 5px;
   width: 110px;

}
/******************************/
/* media query for homepage */
/******************************/

#name{
  height:300px;
  width:100%;
  margin-right: auto;
  margin-left: auto;
  display: flex;
}

#name .logo{
  padding-bottom: 100px;
}

#name h1 h4 h5 .slogan {
  text-align: center;
}

 #name h5{
  font-size: 24px;
}

#name h1{
  font-size: 38px;
  text-align: center;
}

#name h4 ,
h5 {
  font-size: 18px;
  text-align: center;
}

#hide-sm {
  display: none;
}

.hero{
  width: 100%;
  height: 40vh;
  /* background-image: url(../images/backgroundu.png); */
  background-size: cover;
  background-position: center;
}
/******************************/
/* media query for project showcase */
/******************************/

#project {
  float: none;
  margin: 0 auto;
  height:100%;
  display: none;
}

#project .hvrbox{
  display: block;
  margin:0 auto;
  height:100%;
  display: none;
}

.container-fluid{
  height: 600px auto;
  display: block;
  margin-bottom: 30px;
  margin-top: 0;
}
.www{
  min-height:500px;
  text-align: center;

}

.image-wrap {
  display: inline-block;
  max-width: 100%;
  position: relative;
}

.image-wrap .overlay {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  color:white;
  opacity: 1;
  transition:opacity .5s ease;
}

.image-wrap:hover .overlay {
  opacity: 0;
}

.red {
  background: #E0E8EB;
  padding: 50px;
  /* padding: 0px 50px 50px 50px; */
  border:3px solid #805284;
}


#demo{
width:100%;
margin-top: 0;
margin-bottom: 10px;
}

#blocjam{
  width:100%;
  margin-bottom: 10px;
  margin-top: 0;
}

#background{
  background-image: none;
}

#background1{
  background-image: none;
}

.red h1{
  font-size: 26px;
  color: #3B7D7C;
}

#project h2{
  font-size: 22px;
  padding-top: 10px;
  text-align: left;
  font-weight: bold;
  margin-bottom: 5px;
  padding: 0;
}

.www h4{
  font-size: 18px;
}

.www p{
  font-size: 16px;
  line-height: 23px;
}

#project hr{
  display: block;
}

#project2 {
  float: none;
  margin: 0 auto;
  height: 80%;
  display:none;
}

#project2 .hvrbox{
  display: block;
  margin: 0 auto;
  height:100%;
  display:none;
}

}

/******************************/
/* for designbox */
/******************************/

@media(max-width:800px){


  #Design-box h3{
    font-size: 18px;
  }

  #Design-box h2{
    font-size: 21px;
    text-align: center;
    margin-top: 15px;
  }

  #Design-box{
    height: 440px;
    width: 100%;
    float: none;
    margin-right: auto;
    margin-left: auto;
  }

  #Design-box .box1{
    width: 90%;
    height: 40%;
    float: none;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    border: none;
    margin-top: 10px;
  }

  .empathy{
    filter: opacity(70%);
    float: none;
    margin-right: auto;
    margin-left: auto;
    height: 180px;
    margin-top: -100px;
    left:35%;
  }

  .innovate{
    filter: opacity(70%);
    height: 180px;
    float: none;
    left: 30%;
    margin-right: auto;
    margin-left: auto;
    margin-top: -25px;
  }

  #Design-box .button_2 {
    width: 220px;
  }

  #Design-box2{
    height: 450px;
    width: 100%;
    float: none;
    margin-right: auto;
    margin-left: auto;
  }

  #Design-box2 .box2{
    width: 90%;
    padding: 0;
    margin-top:2%;
    border: none;
    float: none;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
  }

  #Design-box2 .button_2 {
    width: 200px;
  }

  #Design-box p{
    font-size: 16px;
  }

  #Design-box2 p{
    font-size: 16px;
  }
}

/******************************/
/* media query for footer */
/******************************/

@media(max-width:800px){
  footer{
    height:110%;
  }

  .diff{
    font-weight: normal;
    font-size: 20px;
    padding-top: 4%;
  }

  .difference{
    font-size: 14px;
    text-align: center;
    padding-top:10px;
  }
  .footer p{
    float: none;
    margin-right: auto;
    margin-left: auto;

  }
.copyright{
  padding-bottom: 10px;}
}
  /* --------------------------------------- */
/* media query for casestudy- ordered by section */
/* --------------------------------------- */


@media(max-width:800px){
  #project-name{
    background-size:90%;
    height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }

  #project-name .big-box{
    float: none;
    width: 95%;
    height: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
  }

  #project-name h1{
    font-size: 24px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: none;
  }

  #project-name h4{
    font-size: 18px;
    padding-bottom:  2%;
    margin-left: auto;
    margin-right: auto;
    float: none;
  }

  #project-name h3{
    font-size: 18px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: none;
  }
  #project-name p{
    font-size: 16px;
    margin-top: 10px;
  }
  #demo1 {
      width: 100%;
      margin-right: auto;
      margin-left: auto;
    }

  .prototype-button{
  margin-top: 18px;
  margin-bottom: 8px;
  padding: 0;
  }
}

/******************************/
  /* media query for three boxes */
/******************************/

@media(max-width:800px){
  #boxes{
    height: 640px;
  }

  #boxes .xbox{
    float: none;
    width: 60%;
    height:150px;
    margin-bottom: 40px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  #boxes .zbox{
    float: none;
    height:230px;
    width: 60%;
    margin-bottom: 40px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  #boxes h3 {
    width: 165px;
    height:40px;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
  .hgroup{
    margin-top: 5%;
    margin-bottom: 2%;
  }
}
/******************************//******************************/
/* media query for intro ,suvery, persona, Competitive analysis */
/******************************//******************************/
@media(max-width:800px){
  .new1{
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 70%;
  }

  #intro h3{
    margin-left: 6%;
    display: block;
    margin-right: auto;
    font-size: 17px;
  }

  #intro .problem {
    /* margin-left: 5%; */
    width: 90%;
    display: block;
    margin-right: auto;
    margin-left: auto;
    height: 75%;
  }

  #intro .solution {
    margin-left: 5%;
    width: 90%;
    display: block;
    margin-right: auto;
    margin-left: auto;
    height: 75%;
  }

  #intro .assumptions {
    margin-left: 5%;
    width: 90%;
    height: 80%;
    display: block;
    margin-right: auto;
    margin-left: auto;
  }

  #intro .users {
    margin-left: 5%;
    width: 90%;
    display: block;
    margin-right: auto;
    margin-left: auto;
    height: 35%;
  }

  #intro .change{
    width: 180px;
    margin-left: 6%;
    display: block;
    margin-right: auto;
    font-size: 17px;
    padding: 6px;
    margin-top: 4%;
  }

  #intro .change1{
    width: 200px;
    margin-left: 0.7%;
    display: block;
    margin-right: auto;
    font-size: 17px;
    margin-top: 3.5%;
  }

  #intro p{
    font-size: 15px;
  }

  .vl{
    height: 10%;
  }

  #intro .result-1{
    width:90%;
    height:140px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }

  #intro .survey{
    width:30%;
    float:left;
    margin-left: 5%
    padding:5%;
    margin-top:5%;
  }

  #intro .col-7{
    width:65%;
    float:right;
    margin-right: 1%;
    margin-left: auto;
    padding:5%;
  }

  #intro .row-cc{
    display: flex;
    height:350px;
  }


  .people{
    width:90%;
  }

  #intro .bigbox{
    float: none;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
   display: block;
  }

.bibox li{
  padding:2%;
}

  #intro .result1{
    width: 40%;
    display: block;
    margin-right: auto;
    height: 35%;
  }

  #intro .result2{
    width: 40%;
    display: block;
    margin-right: auto;
    height: 45%;
  }

  #intro .result3{
    width: 25%;
    display: block;
    margin-right: auto;
    height: 45%;
    display: none;
  }

  .users p{
    margin-top: 30px;
  }

  #intro .personas {
    margin-left: 5%;
    width: 90%;
    height:80%;
    display: block;
    margin-right: auto;
  }

  #intro .persona1{
    float: none;
    border:0.3px;
    width:80%;
    display: block;
    margin-right: auto;
    margin-left: auto;
    height: 85%;
    margin-top: 15px;
  }

  #intro .persona2{
    float: none;
    margin-top: 20px;
    border:0.3px;
    height:82%;
    margin-right:20px;
    margin-left: 5%;
    width:80%;
    margin-bottom: 15px;
    display: block;
    margin-right: auto;
    margin-left: auto;
  }

  .anderson {
    width: 100%;
    height: 45%;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
  }

  .monika{
    width: 100%;
    height: 45%;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
  }

  .person h2{
    width: 85%;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
  }

  #intro .person{
    height: 70%;
  margin-bottom: 20px;
  }

  .vl1{
    height: 10%;
  }

  .vl2{
    height: 8%;
  }

  #intro .compare {
    width: 85%;
    height: 85%;
    text-align: left;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
  }

  #intro .epi{
    width: 55%;
    height:50%;
    display: block;
    margin-right: auto;
    margin-left: auto;
    float: none;
  }
.curious{
  width:80%;
}
  #intro .story {
    width: 90%;
    height:55%;
    display: block;
    margin-right: auto;
    margin-left: auto;
    float: none;
    margin-bottom: 20px;
  }

  #intro .flows {
    width: 90%;
    height:70%;
    display: block;
    margin-right: auto;
    margin-left: auto;
    float: none;
    margin-bottom: 20px;
  }

  #intro .column {
    width: 80%;
    margin-bottom: 15px;
    display: block;
    margin-right: auto;
    margin-left: auto;
    float: none;
  }
.cc-sketch{
  width: 100%;
  margin-left: 0%;
}
  .login{
    width: 100%;
  }

  .organize{
    width: 100%;
    margin-left: 0;
  }
}
/******************************/
/* media query for branding */
/******************************/

@media(max-width:800px){
#branding h3{
  padding-top: 6px;
}

#branding .change1{
  padding-top: 6px;

}
.new2{
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: 70%;
}

.brand{
  font-size: 15px;
  width: 90%;
  display: block;
  margin-right: auto;
  margin-left: auto;
  height: 50%;
  margin-bottom: 20px;
}

#branding p{
  font-size: 15px;
}

#branding .logoo{
  width: 90%;
  display: block;
  margin-right: auto;
  margin-left: auto;
  height:60%;
  margin-top: 1%;
}

.logosketch{
  width:100%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.logogp{
  width:100%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#branding .row{
  height:65%;
  padding-top: 10px;
}

#branding .column {
  width: 80%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  height: 50%;
}

#branding .change1{
  width: 150px;
  height:38px;
  margin-left: 5%;
  font-size: 17px;
  margin-top: 5%;
}

#branding .palette {
  width: 90%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.col-palette{
  width:80%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  height:80%;
}
#branding .change{
  width: 150px;
  padding-top: 7px;
  height:36px;
  margin-left: 5%;
  margin-top: 10px;
}
#branding .fonts {
  width: 88%;
  height: 90%;
  padding: 0;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.font{
  width:80%;
  height: 85%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}
}

/******************************/
/* media query for testing */
/******************************/

  @media(max-width:800px){
#testing p{
  font-size: 15px;
}

#testing .frames{
  width: 90%;
  height: 30%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.wframes1{
  width: 80%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.wframes2{
  width: 90%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#testing h3{
  width: 220px;
  padding-top: 7px;
  height:36px;
  /* margin-left: 5%; */
}

.o{
  width: 100%;
}

#testing h6{
  width: 135px;
  padding-top: 6px;
  height:35px;
  /* margin-left: 5%; */
  margin-bottom: 10px;
  margin-top: 5%;
}
#testing .change2{
  width: 135px;
  padding-top: 6px;
  height:35px;
  margin-left: 5%;
  margin-bottom: 10px;
  margin-top: 5%;
}

#testing .column {
  width: 85%;
  height:70%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
}

#testing .row{
  height:70%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.organize2{
  width: 70%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 20px;
}

.organize1{
  width: 70%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 1%;
}

#testing .test{
  width: 90%;
  height: 50%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#testing .utest {
  width: 90%;
  height: 50%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#testing .final {
  width: 90%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  height:40%;
}
/******************************/
    /* transition final product */
    /******************************/
.screens {
    display: block;
    height:100%;
    padding:20px 0px 40px 25px;
    background: none;
    width: 94%;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding: 8px;
    position: unset;
    top:0;
  }

  .text-white{
    color:#414546;
  }

  .quarter {
    display: block;
    width:100%;
  }

  .slider{
  display: block;
  width:100%;
  margin: 0 auto;
  background: #9ACAD0;
  margin-left: auto;
  margin-right: auto;
  float: none;
  padding-top: 20px;
  padding-bottom: 45px;
  }

  .slider img{
    width:80%;
    margin:0 auto;
  }

  .slideshow-controls{
    width:30%;
    margin:0 34%;
    position: unset;
    float: none;
  }

  .row-1, .row-2, .row-3, .row-4{
    position: unset;
    top:0;
    left:0;
    display: none;
  }

  .smaller {
    max-width: 100%;
  }

#testing .row1{
  height:80%;
  width: 94%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding: 15px;
}

#testing .column1 {
  padding: 0;
  width: 100%;
  height: 80%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.signup{
  width:90%;
  height: 70%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.saved{
  width:90%;
  height: 70%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.spinner-result{
  height: 70%;
  width:90%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.spinner{
  width:90%;
  height: 70%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.choose-box{
  width:90%;
  height: 70%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  display: none;
}

.friends{
  width:90%;
  height: 70%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.button_4{
  width: 100%;
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  float: none;
  /* margin-top: 3%; */
}

#testing .end {
  width: 85%;
  height: 50%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 15px;
}

#testing .lesson {
  width: 85%;
  height: 50%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top:25px;
}

/******************************/
/* media quer for bio */
/******************************/

#background3{
  background-image:  none;
}

#about{
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

#about h1 {
  font-size: 24px;
  /* margin-top: 20px; */
}

#about h4 {
  font-size: 22px;
  padding: 0;
  margin-top: 1%;
}
h5 {
  font-size: 15px;
}

.wajiha {
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

#bio h5{
  width:90%;
  margin-right: auto;
  margin-left: auto;
  font-weight: normal;
  margin: 30px auto 30px;
}

#bio {
  width: 100%;
  height: 99%;
  padding: 0;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 30px;
}

.book{
  float: center;
  display: block;
  width:55%;
  margin-left: auto;
  margin-right: auto;
  position: static;
}

.line{
  transform: rotate(90deg);
  display: block;
  margin-left: 35%;
  margin-right: auto;
  margin-top: 7%;
  margin-bottom: 7%;
  padding-top:8%;

}

.flower{
  float: center;
  display: block;
  right:  auto;
  width:40%;
  margin-left: auto;
  margin-right: auto;
  position: static;
  margin-bottom: 20px;
}

.bond{
  float: center;
  display: block;
  right:  auto;
  width:45%;
  margin-left: auto;
  margin-right: auto;
  position: static;
  margin-bottom: 10px;
}

.chemist{
  float: center;
  display: block;
  right:  auto;
  width:45%;
  margin-left: auto;
  margin-right: auto;
  position: static;
  margin-bottom: 10px;
  margin-top: 10px;
}

#bio p{
  max-width: 80%;
  font-size: 15px;
   margin-top: 1%;
   margin: auto;
   /* margin-bottom:5px; */
}

/******************************/
/* media query for contactform */
/******************************/
.say-hello{
  margin-top: 10px;
  width: 90%;
  float: none;
  display:block;
  margin-left: auto;
  margin-right: auto;
}
.say-hello h1{
  font-size: 32px;
}


.contactForm{
  width: 100%;
  float: none;
  display:block;
}

input[type=submit] {
  width: 100%;
  float: none;
  display:block;
  margin-left: auto;
  margin-right: auto;
}

}