@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Amaranth);
@import url(https://fonts.googleapis.com/css?family=Reenie+Beanie);
@import url(https://fonts.googleapis.com/css?family=Katibeh);
@import url(https://fonts.googleapis.com/css?family=Expletus+Sans);
@import url(https://fonts.googleapis.com/css?family=Dancing+Script);

.title-picture{

  border-width:0px;
  border-style:solid;
  border-radius:50%;
  width:30%;
  margin: auto;

}
.portfolio-image {
  background-color:white;
  background-size: cover;
   width:180px;
   height:180px;
   display:inline-block;
  border-radius:50%;
  border-width:5px;
  border-style:solid;
  padding-bottom:0px;
  margin: auto;
}
#buffer{
  height: 100vh;
  background-color:#000019;
  margin-left: 0px;  
  margin-right:0px;
  width: 100%;
  box-shadow:0px 0px 10px 0px #333;
  
  
}

#photos{
 
 
  background: #a5c9e5;
	background: url(img.png) no-repeat 50% 300px, -moz-linear-gradient(top, #1e5799 0%, #a5c9e5 100%);
	background: url(img.png) no-repeat 50% 300px, -webkit-gradient(linear, 0% 0%,0% 100%, from(#1e5799), to(#a5c9e5));
	background: url(img.png) no-repeat 50% 300px, -webkit-linear-gradient(top, #1e5799 0%,#a5c9e5 100%);
	background: url(img.png) no-repeat 50% 300px, -o-linear-gradient(top, #1e5799 0%,#a5c9e5 100%);
	background: url(img.png) no-repeat 50% 300px, -ms-linear-gradient(top, #1e5799 0%,#a5c9e5 100%);
	background: url(img.png) no-repeat 50% 300px, linear-gradient(top, #1e5799 0%,#a5c9e5 100%);
 
  height:100vh;
  font-size:24px;
  margin-left: 0px;
  margin-right:0px;
  width: 100%;
  font-family:Amaranth;
 box-shadow:0px 0px 10px 0px #333;
}

#portfolio{
     background-color: #a5c9e5;
  background-image:
    url("https://www.transparenttextures.com/patterns/gplay.png");
  height:100vh;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  box-shadow:0px 0px 10px 0px #333;
}

#contact{
  background-color:#000;
  height:100vh;
  left: 0;
  right:0;
  box-shadow:0px 0px 10px 0px #333;
}

body { background:rgb(30,30,40); }
form { max-width:420px; margin:50px auto; }

.feedback-input {
  color:white;
  font-family: Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size: 18px;
  border-radius: 5px;
  line-height: 22px;
  background-color: transparent;
  border:2px solid #CC6666;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #CC4949; }

textarea {
  height: 130px;
  line-height: 130%;
  resize:vertical;
}
button.btn {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 100%;
  background:#CC6666;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:white;
  font-size:24px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}
button.btn:hover { background:#CC4949; }
#nudge{-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms}
#nudge:hover{background-color:#000019;color:#333;padding-left:50px}

ul.rig {
	list-style: none;
	font-size: 0px;
	margin-left: -2.5%; /* should match li left margin */
}
ul.rig li {
	display: inline-block;
	padding: 10px;
	margin: 0 0 2.5% 2.5%;
	background: #fff;
	border: 1px solid #ddd;
	font-size: 16px;
	font-size: 1rem;
	vertical-align: top;
	box-shadow: 0 0 5px #ddd;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
ul.rig li img {
	max-width: 100%;
	height: auto;
	margin: 0 0 10px;
}
ul.rig li h3 {
	margin: 0 0 5px;
}
ul.rig li p {
	font-size: .9em;
	line-height: 1.5em;
	color: #999;
}
/* class for 2 columns */
ul.rig.columns-2 li {
	width: 47.5%; /* this value + 2.5 should = 50% */
}
/* class for 3 columns */
ul.rig.columns-3 li {
	width: 30.83%; /* this value + 2.5 should = 33% */
}
/* class for 4 columns */
ul.rig.columns-4 li {
	width: 22.5%; /* this value + 2.5 should = 25% */
}
 
@media (max-width: 480px) {
	ul.grid-nav li {
		display: block;
		margin: 0 0 5px;
	}
	ul.grid-nav li a {
		display: block;
	}
	ul.rig {
		margin-left: 0;
	}
	ul.rig li {
		width: 100% !important; /* over-ride all li styles */
		margin: 0 0 20px;
	}
}
  /*Timeline*/
#career {	
  margin: 0;
  padding: 0;
  background: rgb(230,230,230);
  color: rgb(50,50,50);
  font-family: 'Open Sans', sans-serif;
  font-size: 112.5%;
  line-height: 1.6em;
   box-shadow:0px 0px 10px 0px #333;
}

/* ================ The Timeline ================ */

.timeline {
  position: relative;
  width: 660px;
  margin: 0 auto;
  margin-top: 20px;
  padding: .5em 0;
  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 6px;
  height: 100%;
  margin-left: -7px;
  background: rgb(100,100,100);
  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: 0em 0;
}

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

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

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

.flag-wrapper {
  position: relative;
  display: inline-block;
  
  text-align: center;
}

.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(255,80,80);
  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;
}

.time-wrapper {
  display: inline;
  
  line-height: 1em;
  font-size: 0.66666em;
  color: rgb(250,80,80);
  vertical-align: middle;
}

.direction-l .time-wrapper {
  float: left;
}

.direction-r .time-wrapper {
  float: right;
}

.time {
  display: inline-block;
  padding: 4px 6px;
  background: rgb(248,248,248);
}

.desc {
  margin: 1em 0.75em 0 0;
  
  font-size: 0.77777em;
  font-style: italic;
  line-height: 1.5em;
}

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

/* ================ Timeline Media Queries ================ */

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

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

.timeline li {
	padding: 2em 0;
}

.direction-l,
.direction-r {
	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-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;
}

.time-wrapper {
	display: block;
	position: relative;
	margin: 4px 0 0 0;
	z-index: 14;
}

.direction-l .time-wrapper {
	float: none;
}

.direction-r .time-wrapper {
	float: none;
}

.desc {
	position: relative;
	margin: 1em 0 0 0;
	padding: 1em;
	background: rgb(245,245,245);
	-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
	-moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
	box-shadow: 0 0 1px rgba(0,0,0,0.20);
	
  z-index: 15;
}

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

}

@media screen and (min-width: 400px ?? max-width: 660px) {

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

}
/* cloud*/

#about {
  width:960px;
   margin-left: 0;
  margin-right: 0;
  width: 100%;
    font-family:Amaranth;
  box-shadow:0px 0px 10px 0px #333;
  margin:0 auto;
	background: #ccc;
  overflow:hidden;
  background:#7EC0EE;
  height:100vh;
  animation: scroll 5s infinite linear;	
  -webkit-animation: scroll 5s infinite linear;
  -moz-animation: scroll 5s infinite linear;	
  -ms-animation: scroll 5s infinite linear;
  -o-animation: scroll 5s infinite linear;	 
  position:relative;
  z-index:-2;  
}
.cloud {
	background: #f2f9fe;
	background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
	background: -webkit-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
	background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
	background: -ms-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
	background: -o-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	position: absolute;
	margin-top:60px;
}

.cloud.large {
  width:175px;
  height:60px;
  animation: move 25s infinite linear;	
  -webkit-animation: move 25s infinite linear;
  -moz-animation: move 25s infinite linear;	
  -ms-animation: move 25s infinite linear;
  -o-animation: move 25s infinite linear;	 
}

.cloud.small {
  width:131px;
  height:45px;
  animation: move 35s infinite linear;	
  -webkit-animation: move 35s infinite linear;
  -moz-animation: move 35s infinite linear;	
  -ms-animation: move 35s infinite linear;
  -o-animation: move 35s infinite linear;	  
}

.cloud:after, .cloud:before {
	content: '';
	position: absolute;
	background: #f2f9fe;
	z-index: -1;
}

.cloud.large:after {
	top: -25px; left: 25px;
  width:50px;
  height:50px;	
	border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
}

.cloud.small:after {
	top: -19px; left: 19px;
  width:38px;
  height:38px;	
	border-radius: 38px;
	-webkit-border-radius: 38px;
	-moz-border-radius: 38px;
}

.cloud.large:before {
	width: 90px; height: 90px;
	top: -45px; right: 25px;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
}

.cloud.small:before {
	width: 68px; height: 68px;
	top: -34px; right: 19px;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;  
}

.large .shadow {
	width: 175px;
	position: absolute; bottom: -10px; 
	background: #000;
	z-index: -1;
	box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
	border-radius: 50%;
}

.small .shadow {
	width: 131px;
	position: absolute; bottom: -10px; 
	background: #000;
	z-index: -1;
	box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
	border-radius: 50%;
}

.pos1 {
  top:40px;
  right:-50px;
}

.pos2 {
  top:50px;
  right:-400px;
}

.pos3 {
  right:-800px;
}

.pos4 {
  right:-150px;
}

.pos5 {
  right:-350px;
}

.pos6 {
  right:-700px;
}

@keyframes move {
    100% {
		right:110%;
	}
}
@-ms-keyframes move {
    100% {
		right:110%;
	}
}
@-webkit-keyframes move {
    100% {
		right:110%;
	}
}
@-moz-keyframes move {
    100% {
		right:110%;
	}
}
@-o-keyframes move {
    100% {
		right:110%;
	}
}

@keyframes scroll {
    0% {
		background-position: 100% 0;
	}
    100% {
		background-position: 0% 0;
	}
}
@-ms-keyframes scroll {
    0% {
		background-position: 100% 0;
	}
    100% {
		background-position: 0% 0;
	}
}
@-webkit-keyframes scroll {
    0% {
		background-position: 100% 0;
	}
    100% {
		background-position: 0% 0;
	}
@-moz-keyframes scroll {
    0% {
		background-position: 100% 0;
	}
    100% {
		background-position: 0% 0;
	}
}
@-o-keyframes scroll {
    0% {
		background-position: 100% 0;
	}
    100% {
		background-position: 0% 0;
	}
}