/* Color codes
Mint Green - #3bb296
white #edf2f4
Black - #1c1c1c
purple: 996df7 */

/* Global Styles */

body {
  font-family: 'Rubik', sans-serif; 
  font-weight: 300; /* Choose the weight you want (e.g., 300, 400, 500, etc.) */
  color:  #fff;
  margin: 0; /* Gets ride of white space round edge*/
}

p {
  color: white;
  line-height: 1.6;
}


h1, h2, h3, h4 {
  font-family: 'Rubik', sans-serif; 
  font-weight: 800; /* Choose the weight you want (e.g., 300, 400, 500, etc.) */
}

h1 {
  font-size: 70px;
  color: #fff;
  margin-left: 20px;
}

h2 {
  font-size: 35px
  margin-top: 0; /* Remove the margin space from top of element so the space is more consitant at top and bottom */
}

h3 {
  color: white;
  margin: 0;
}


a {
  color: #996df7
}

a:hover {       /*Pseudo-class removes underline once mouse hovers over*/
  text-decoration: none;
}

.content-wrap {
  /*max-width:950px;  stops horrizontal scroll bar. Keeps it flexible for when browser is smaller than declared width.  */
  margin: 0 auto; /* Sets margin to 0 and the auto value keeps it center aligned*/
  padding: 50px; /* Gets rid of white space between block elements h2 and p at the bottom/top of my coloured sections. Not using margin as p and h2 would be too close together */
  overflow: auto; /* Self clear float to allow page to go back to natural stacking flow */
}

.centre {
text-align:center;
max-width:70%;
display:block;
margin:auto;
}

.centreleft {
text-align:left;
max-width:70%;
display:block;
margin:auto;
}

.btn {
  /*text-decoration: none;*/
  background: #996df7;
  color: white;
  padding: 10px;
  display: inline-block;
}

/*video*/
.containervid {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.responsive {
 max-width: 100%;
 height auto;
}

/* Header */

header {
  background: #3bb296;
  /*background: linear-gradient(rgba(59, 178, 150, 1), rgba(153, 109, 247, 1)),
                 url(none) no-repeat;*/
  color: #1c1c1c;
}

header{
  position: relative;  /* Position is used as this is parent element of download pdf button which is set to absolute (When absolute is used the parent element also has to have position decalred to contain the absolute element) */
}


header h1, header h2 {      /*Grouping decendent selectors together via a space and multiple selectors with comma*/
 color: #edf2f4;
 margin: 0;
}



.heroimage {
  max-width: 20%;
  height auto;
  margin-top: 3%;
  margin-bottom: 3%;
}


.download {
  -webkit-transition-duration: 0.4s; /* Safari */ /* Make button ripple */
  transition-duration: 0.4s;
}

.resume {
  position: absolute;
  bottom: 0;
  right: 0;
}



/* Footer */

footer {
  text-align: center;
}

/*Navigation*/

nav {
  text-align: center;
  background: white;
  position: fixed;  /* Will keep nav bar fixed to its poition */
  top: 0; /* Telling browser to keep it at top of page */
  width: 100%;  /* Makes Nav element span across the page (if you dont set a width to a positioned elemnet it will only be as wide as its content) fixed with width:100% */
  z-index: 10;
}

nav a{
  display: inline-block;
  padding: 15px 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
}

a:hover {       /*Pseudo-class removes underline once mouse hovers over*/
  text-decoration: none;
  color: #3bb296;
}

.intro a:hover {       /*Pseudo-class removes underline once mouse hovers over*/
  text-decoration: none;
  color: #fff;
}

.intro a{
  color:white;
}

.refreshlogo {
  position:fixed;
  top: 2px;
  left: 6px;
  width: 90px;
}


/*Work 3d*/

.work3d {
  background-color: #3bb296
  /*background: linear-gradient(rgba(153, 109, 247, 1), rgba(126,78,228, 1)),
                 url(none) no-repeat;*/
}



.work3d h1 {
  margin: 0;
}

.work3d a:hover {       /*Pseudo-class removes underline once mouse hovers over*/
  text-decoration: none;
  color: #FFF;
}

.work3d a{
  color:white;
}

/*Me*/

.me {
  margin: 0, auto;
  background: #fff;
  /*background: linear-gradient(rgba(59, 178, 150, 1), rgba(35,166,135, 1)),
                 url(none) no-repeat;*/
}

.me h3 {
  margin-top: -50px;
}

.me p {
  color: #1c1c1c;
  line-height: 1.6;
}

.me h2 {
  color: #3bb296;
}

.me h1 {
  margin: 0;
  color: #3bb296;
}

.me a{
  color: #996df7;
}

.me a:hover {
  color: #3bb296;  
}

/*Contact*/

.contact {
  /*background: #996df7;
  sets gradient and image */
  background: linear-gradient(rgba(126,78,228, 1), rgba(59,109,247, 1)),
                 url(none) no-repeat;
}

.contact a {
  padding: 15px;
  display: inline-block; /* Allows for the elements to align side by side (inline) and also padding to affectf both height and width (block) */
  color:white;
}

.send {
  width: 5%;
}

/*Animation*/

@-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }

.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in ;  /* 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:1.5s;
    -moz-animation-duration:1.5s;
    animation-duration:1.5s;
}

/*Slide in from top on page load*/
@keyframes slideInFromTop {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

.slide-down {
  /* This section calls the slideInFromTop animation we defined above */
  animation: 1.5s ease-out 0s 1 slideInFromTop;

}

/*Slide in from Left on page load*/
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.slide-left {
  /* This section calls the slideInFromTop animation we defined above */
  animation: 1.5s ease-out 0s 1 slideInFromLeft;

}

/* Slide in from bottom on page load */
@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

.slide-up {
  /* Use the slideInFromBottom animation */
  animation: 1.5s ease-out 0s 1 slideInFromBottom;
}

/* button animation */
/* .download:after { /* Make button ripple
    content: "";
    background: #fff;
    display: block;
    position: absolute;
    padding-top: 100%;
    padding-left: 100%;
    margin-left: -10px!important;
    margin-top: -25%;
    opacity: 0;
    transition: all 0.8s
}

.download:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

.download:hover
{
        box-shadow:
                1px 1px #1c1c1c,
                2px 2px #1c1c1c,
                3px 3px #fff;
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
}
*/
/*Swinging text nav*/
@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.swing:hover
{
        -webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}

/*360 spin*/

.spin { transition: all 0.3s ease-in-out 0s; }

.spin:hover
{
    cursor: default;
    transform: rotate(180deg);
    transition: all 0.3s ease-in-out 0s;
}

/*Fade in on Scroll SEE JS*/

.hideme
{
    opacity:0;
    transition: 3s;
}

.showme {
  opacity:1!important;
}

.hideme2
{
    opacity:0;
    transition: 3s;
}

.showme2 {
  opacity:1!important;
}

/*Grow*/

.grow:hover
{
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}


/*Media Queries*/

@media (min-width: 320px) and (max-width: 767px) {

  .heroimage {
    width: 100%;
    margin-top: 10%;
  }

  h1 {
    margin: auto;
    font-size: 70px;
  }

  .send {
    width: 30%
  }


}