@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);


body {

  position: relative;
  line-height: 1.5;
  /* font-family: 'Raleway', sans-serif; */
  font-size: 2em;
  background: -webkit-linear-gradient(#b5d2ec,#53f22e,#d4fcc4);
font-family: "Open Sans", "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;

}

.spacer {
    margin-top: 30vh; /* define margin as you see fit */
}

#mainsection{
  margin-top: 21vh;

}

h1, h2 {
  font-weight: 700;
}

h3 span {
  color: #286090;
}


section {

}

.section-wrapper {
  padding: 2vh 2vh 2vh 4vh;
  border: 5px solid blue;
  border-radius: 2vh;
  margin: 0 0 4vh 0;
box-shadow: 7px 3px 3px black;
}


/*
--------------------------------------------
navbar related css
--------------------------------------------
*/

#nav2 {
  background: url(/img/logoclear400.png) no-repeat;
  max-height:100%;
  max-width:100%;
  vertical-align: middle;
  background-position: left;
  min-height:17.5vh;
  /*-height: 200px;*/
  min-width:37.5vh;
  margin: 0.2vh 1vh 1vh -0.5vh;
  /* margin-left: 1%; */

  background-size: contain;
  float: left;
}

#nav3 {
  background: url(/img/image1.png) no-repeat;
  float:left;
  max-height:100%;
  max-width:100%;
  vertical-align: middle;
  min-height:17.5vh;
  /*-height: 200px;*/
  min-width:72vh;
  margin: 0.2vh 0 2vh 10vh;
  /* margin-left: 1%; */
  background-size: contain;
}

.navbar {
  height: 18vh;
    border-bottom: 1px solid #c1e1ec;
}

#web-development,
#mobile-development {
  padding-bottom: 0;
}

.nav {
	background: Blue;
	font-size: 1.4em;
	font-weight: bold;
	text-shadow: white 0 0 0.1em;
 	/* text-shadow: 0.1vh 0.1vh #558ABB; */
}



.navsub { 
	font-size:0.55em;
	font-weight: bold;
}

.nav a {
	color: black;
	font-style: italic;
	font-weight: 1.2em;
}

.nav li a:hover,
.nav li a:focus {
	background: #53f22e;
}

.nav .active {
	font-weight: bold;
	background: yellow;
}

.nav .nav {
	display: none;
}

.nav .active .nav {
  display: block;
}

.nav .nav a {
  font-weight: normal;

}

.nav .nav span {
  margin: 0 5px 0 2px;
}

.nav .nav .active a,
.nav .nav .active:hover a,
.nav .nav .active:focus a {
  font-weight: bold;
  padding-left: 30px;
  border-left: 5px solid black;
}

.nav .nav .active span,
.nav .nav .active:hover span,
.nav .nav .active:focus span {
  display: none;
}



.affix-top {
  position: relative;
}

.affix {
  top: 21vh;
}

.affix,
.affix-bottom {
    width: 263px;
}

.affix-bottom {
  position: absolute;
}

/* 
-------------------------------------
Main text related
------------------------------------
*/

#top-text {
  font-size: 1.5em;
  font-weight:bold;
}

.ticklst li:before {
  /*Using a Bootstrap glyphicon as the bullet point*/
  /* content: "\e089"; */

  content:"\e013";
  font-family: 'Glyphicons Halflings';
  float: left;
  margin-right: 4%;
  /* margin-top: 4px;
  margin-left: -17px; */
  /* color: green; */
  color: #333;
}

.in-box-subhead {
  font-weight: bolder;
}



footer {
  border-top: 1px solid #c1e1ec;
  height: 50px;
}

footer p {
  line-height: 50px;
  margin-bottom: 0;
}



#profile-image {
  /*  background-image: url(../img/image3.png);
    background-repeat: no-repeat;
    background-position: left top;
    height: 600px;
    width: 350px;
    */
    margin: auto;
    margin-top: 0%;
    margin-bottom: 5%;
    order: 1;
    max-width: 100%;
    border: 5px solid green;
    max-height: 40vh;
  }
  
  #carimg {
    /*display: block;*/ /*already set block in img-responsive*/
    margin-left: auto;
    margin-right: auto;
    max-height: 50vh;
  }
  
  #spadingimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 50vh;
  }
  
  #soiltestimg {
  /*  display: block;*/
    margin-left: auto;
    margin-right: auto;
    max-height: 50vh;
  }
  
  
#comboimg 
  {
    display: none;
    margin: auto;
    max-height: 50vh;
    order: 1;
    display: block;
    max-height: 90%;
    padding-top: 5%;
    padding-bottom: 5%;
  
  }
  
  #seepsimg {
    display: block;
    object-fit: cover;
    margin: auto;
    padding: 0;
  
  }
  
  #spadingimg {
    object-fit: cover;
    max-height: 30vh;
    margin: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 50vh;
  }
  
  #grassimg {
    margin-top: 5%;
    margin-bottom: 5%;
    display: block;
    margin-left: auto;
    margin-right: auto;
      max-height: 50vh;
        object-fit: cover;
  }
  
  #soiltestimg, #carimg {
    padding: 5%;
  }
  
  
  
  






@media (max-width: @screen-xs) {
    body{font-size: 1.2em;}
}

@media (max-width: @screen-sm) {
    body{font-size: 1.4em;}
}

@media (min-width:1200px) {
  .affix,
  .affix-bottom {
    width: 263px;
  }
}