/* remove markdown paragraph symbol */
a.anchor-link {
    display: none;
    text-decoration: none;
    visibility: hidden;
}

/* remove jupyter in/out symbols */
.prompt{
    display: None;
}

/* hide automatically generated headers - below will remove all page titles under class 'entry-title' (generated by pelican)! i.e will remove titles generated in markdown files for any 'pages'. Will need to regenerate any desired titles, e.g for contact page */
.entry-title {
  display:none;
}

/* change fonts */
/* previously used Bree Serif & Raleway*/

body {
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    line-height: 1.728571;
}


a{
  font-family: 'Roboto Slab', serif;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Roboto Slab', serif;
}

.h1{
  font-family: 'Roboto Slab', serif;
}
.h2{
  font-family: 'Roboto Slab', serif;
}
.h3{
  font-family: 'Roboto Slab', serif;
}

/* update nav bar*/
.navbar-brand,
.navbar-nav li a {
    line-height: 65px;
    height: 65px;
    padding-top: 0;
    padding-bottom:0;
    font-family: 'Raleway', sans-serif;
}

.navbar-default .navbar-nav>li>a{
  /*color:#bccad6*/
  color:#d6dfe6; /*slightly lighter shade*/
  
} /* change navbar text color/*

/* pull menu elements to the right*/
.navbar-nav{
  float:right;
  margin-right:0%;
  font-family: 'Raleway', sans-serif;
  font-size:15px;
}

.navbar-header{
  float:left;
}

.navbar-nav li{
  padding-left:18px;
  padding-right:18px;

}

/* reposition logo*/
.img-responsive {
  padding: 5px;
  padding-top:10px;
  padding-bottom:10px;
  /*margin-top: 4px;*/
}
/* contact form*/

.contact{
  width:100%;
  text-align:left;
  padding-top:20px;
  margin-top:0px;
}


.contact h2{
  padding-bottom:10px;
}

.contact .col-lg-6{
  width:50%;
  display: inline-block;
  float:left;
  margin-right:50%;

}

.form-group .btn{
  height:50px;
  margin-top:10px;
  background-color: white;
  padding:10px 25px;
  text-decoration:none;
  color:#2c3e50;
  border: 1px solid #2c3e50;
  font-size:15px;
  display: inline-block;
  text-align:center;
}

.form-group .btn:hover{
  background-color:#2c3e50;
  color:white;
}

/* adjust contact forms for mobile devices*/
@media screen and (max-width:600px){
  .contact{
    text-align:center;
  }
}

@media screen and (max-width:600px){
  .contact .col-lg-6{
    width:95%;
    margin-left:2.5%;
    margin-right:2.5%;
  }
}

@media screen and (max-width:600px){
.form-group .btn{
  display: block;
}
}

/* contact form - social links*/

.contact .soc{
  text-align:left;
}

.soc .fa {
    margin-top:10px;
    font-size: 20px;
    width: 50px;
    height:50px;
    text-align: center;
    text-decoration: none;
    position:relative;
    padding:15px;
    border-radius:10px;
    border:none;
}

/* social links - bounce*/
@keyframes bounce {
	0%, 20%, 60%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}

	80% {
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}
}

/* Add a hover effect if you want */
@media screen and (min-width:600px){
.soc .fa:hover {
    opacity: 0.7;
    animation: bounce 1s;
}
}

/* Set a specific color for each brand */

/* icon colours */
.soc .fa-facebook {
    background: #3B5998;
    color: white;
    margin-right:0.5%;
}
.soc .fa-linkedin {
    background: #007bb6;
    color: white;
    margin-left:0.5%;
    margin-right:0.5%;
}
.soc .fa-github {
    background: #000000;
    color: white;
    margin-left:0.5%;
}

/* about me*/

.banner-about{
  width:100%;
  text-align:center;
  background-size:cover;
  background-image:url(/images/fields.jpg);
  overflow:visible;
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: scroll;
  background-color: #C4C4C4;
  margin: 0 0 0;
  padding: 115px 0; /*controls padding around inner text & therefore size of banner*/
  position:relative;
  margin-top:-20px; /*dodgy way of removing whitsepace under nav*/
  background-attachment:fixed; /*parallax scrolling*/
}

.about-me{
  padding-top:20px;
  width:70%;
  margin-left:15%;
  margin-right:15%;
  text-align:center;
  padding-bottom:10px;
}

.about-me p{
  text-align:justify;
}

/* adjust text alignment on about me page for mobile devices*/
@media screen and (max-width:600px){
.about-me p{
  text-align:center;
}
}

.about-me:after{
  content:'';
  display:block;
  clear:both;
}

.about-me h2{
  position:relative;
  padding-bottom:30px;
}

.about-me h2:after{
  content:'';
  position:absolute;
  width:71.4%;
  height:2px;
  left:14.3%;
  bottom:15px;
  background-color:#ecf0f1;
}

.about-me a{
  background-color: white;
  padding:10px 25px;
  text-decoration:none;
  color:#2c3e50;
  border: 1px solid #2c3e50;
  /*border-radius:20px;*/
  font-size:15px;
  display: inline-block;
  margin-top:10px;
}

.about-me a:hover{
  background-color:#2c3e50;
  color:white;
}

/* skills section */

.my-skills{
  /*background-color:#ecf0f1;*/
  padding-top:30px;
  padding-bottom:2px;
  text-align:center;
}

.my-skills:after{
  content:'';
  display:block;
  clear:both;
}


.my-skills h2{
  position:relative;
}

.my-skills h2:after{
  content:'';
  position:absolute;
  width:50%;
  height:2px;
  left:25%;
  bottom:60px;
  background-color:#ecf0f1;
}



.my-skills .skills-left, .my-skills .skills-center, .my-skills .skills-right{
  width:33.333333%;
  display: inline-block;
  float:left;
  padding-left:3%;
  padding-right:3%;
  
}

 /*change orientation of skills divs when viewing on small screen*/ 
@media screen and (max-width:600px){
.my-skills .skills-left, .my-skills .skills-center, .my-skills .skills-right{
  width:100%;
}
}

.my-skills i{
  font-size:60px;
  color:#bccad6;
}

.my-skills i:hover{
  background-color:white;
  color:#2c3e50;
}


/* projects section */

.projects{
  /*background-color:#ecf0f1;*/
  padding-top:30px;
  padding-bottom:30px;
  text-align:center;
  
}

.projects:after{
  content:'';
  display:block;
  clear:both;
}

.projects h2{
  position:relative;
  padding-top: 30px;
  margin-top:0px;
  padding-bottom:30px;
}

.projects h2:after{
  content:'';
  position:absolute;
  width:50%;
  height:2px;
  left:25%;
  bottom:60px;
  background-color:#ecf0f1;
  display:none; /* remove this for now */
}


@media screen and (min-width:600px){
.projects .project1, 
.projects .project2, 
.projects .project3,
.projects .project4,
.projects .project5,
.projects .project6{
  height:300px;
  width:30%;
  float:left;
  position:relative;
  overflow:hidden;
}
}

 /*change orientation of project divs when viewing on small screen*/ 
@media screen and (max-width:600px){
.projects .project1, 
.projects .project2, 
.projects .project3,
.projects .project4,
.projects .project5,
.projects .project6{
  height:296px;
  width:96%;
  float:left;
  position:relative;
  overflow:hidden;
  margin-left:2%;
  margin-right:2%;
  margin-top:2px;
  margin-bottom:2px;
}
}

@media screen and (max-width:600px){
.projects{
 padding-top:0px; 
}
}

.projects .project1{
  margin-top:1.5%;
  margin-left:2%;
  margin-right:1.5%;
  /*background-image:url(/images/notepad.png); changed as interfered with chrome*/ 
  background:url(/images/selfie.jpeg);
  background-size:cover;
}

.projects .project2{
  margin-top:1.5%;
  margin-left:1.5%;
  margin-right:1.5%;
  background:url(/images/robots.jpeg);
  background-size:cover;
}

.projects .project3{
  margin-top:1.5%;
  margin-left:1.5%;
  margin-right:2%;
  background:url(/images/model.jpg);
  background-size:cover;

}

.projects .project4{
  margin-top:1.5%;
  margin-left:2%;
  margin-right:1.5%;
  margin-top:3%;
  background:url(/images/geo1.jpeg);
  background-size:cover;
}

.projects .project5{
  margin-top:1.5%;
  margin-left:1.5%;
  margin-right:1.5%;
  margin-top:3%;
  background:url(/images/portrait2.jpeg);
  background-size:cover;
}

.projects .project6{
  margin-top:1.5%;
  margin-left:1.5%;
  margin-right:2%;
  margin-top:3%;
  background:url(/images/houses.jpg);
  background-size:cover;
}


.projects .overlay{
  width:100%;
  height:100%;
  position:absolute;
  padding-top:310px;
  
}

.projects .overlay:hover{
  padding-top:130px;
  transition:all 0.5s ease;
  background-color: rgba(0,0,0,0.6);
}

.overlay a{
  display:inline-block;
  font-size:18px;
  padding:10px 20px;
  border: 1px solid #fff;
  text-decoration:none;
  color:#fff;
  font-weight:bold;
}

/* homepage*/

.banner-home{
  width:100%;
  text-align:center;
  background-size:cover;
  background-image:url(/images/banner-2.jpg);
  overflow:visible;
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: scroll;
  background-color: #C4C4C4;
  margin: 0 0 0;
  padding: 200px 0; /*controls padding around inner text & therefore size of banner*/
  position:relative;
  margin-top:-20px; /*dodgy way of removing whitsepace under nav*/
  background-attachment:fixed; /*parallax scrolling*/
}

.banner-home h1, .banner-about h1{
  color:white;
}

/* don't show main banner section on mobiles*/
@media screen and (max-width:600px){
.banner-home{
  display:none;
}
}

/*mouse scroll effect on banner*/
.scroll-link {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.mouse {
  max-width: 2.5rem;
  width: 100%;
  height: auto;
}

@keyframes scroll {
  0%, 20% {
  transform: translateY(0) scaleY(1);
  }
}

@keyframes scroll {
  ...
  10% {
  opacity: 1;
  }
  100% {
  transform: translateY(36px) scaleY(2);
  opacity: 0.01;
  }
}

.scroll {
  animation-name: scroll;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500);
  animation-iteration-count: infinite;
  transform-origin: 50% 20.5px;
  will-change: transform;
}

.home{
  padding-top:20px;
  width:70%;
  margin-left:15%;
  margin-right:15%;
  text-align:center;
  padding-bottom:10px;
}

.home p{
  text-align:justify;
}

.home h2{
  padding-bottom:30px;
}

.home a{
  background-color: white;
  padding:10px 25px;
  text-decoration:none;
  color:#2c3e50;
  border: 1px solid #2c3e50;
  /*border-radius:20px;*/
  font-size:15px;
  display: inline-block;
  text-align:center;
  margin-top:2.5%;
}

.home a:hover{
  background-color:#2c3e50;
  color:white;
}

.help{
  width:100%;
  height:auto;
  overflow:auto;
  text-align:center;
  padding-bottom:50px;
}

.help .title{
  width:100%;
  text-align:center;
  padding-top:10px;
  padding-bottom:20px;
}


.help .help1, 
.help .help2, 
.help .help3{
  width:30%;
  display: inline-block;
  float:left;
  padding-left:3%;
  padding-right:3%;
  padding-top:20px;
}

.help .help1{margin-left:5%;}
.help .help3{margin-right:5%;}

.help i {
    background: white;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:solid 1px;
    border-color:#bccad6;
    text-align: center;
    line-height: 100px;
    font-size:30px;
}

.help i:hover{
  border-color:#2c3e50;
}

.help h3, .help p{
  padding:8px;
  position:relative;
}

.help .title h2{
  position:relative;
}
.help .title h2:after{
  content:'';
  position:absolute;
  bottom:-25px;
  width:10%;
  height:1px;
  left:45%;
  background-color:#bccad6;
}

@media screen and (max-width:600px){
.help .help1,
.help .help2,
.help .help3{
  width:96%;
  margin-left:2%;
  margin-right:2%;
}
}

@media screen and (max-width:600px){
.help{
  padding-bottom:0;
}
}

.services{
  height:auto;
  overflow:auto;
  position:relative;
  display:inline-block;
  text-align:center;
  color:white;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding-bottom:5%;
}

.services .title{
  width:100%;
  text-align:center;
  color:white;
  position:relative;
  padding-top:20px;
}

.services .title h2:after{
  content:'';
  position:absolute;
  bottom:-25px;
  width:10%;
  height:1px;
  left:45%;
  background-color:white;
}

.services h2{color:white;}
.services h3{padding:10px;}



.services .service1,
.services .service2,
.services .service3,
.services .service4{
  width:32.5%;
  height:200px;
  float:left;
  position:relative;
  padding:30px;
  margin-left:2.5%;
  margin-right:2.5%;
}

.services .service1,
.services .service3{margin-left:15%;}

.services .service2,
.services .service4{margin-right:15%;}

.services:before{
  content:' ';
  display:block;
  width:100%;
  height:100%;
  text-align:center;
  background-size:100%;
  background-image:linear-gradient(
      rgba(44,62,80, 0.45), 
      rgba(44,62,80, 0.45)
    ),url(/images/fields.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: scroll;
  position:absolute;
  opacity:0.9;
  background-attachment:fixed; /*parallax scrolling*/
  overflow:auto;
  
}

/* don't show services section on mobiles*/
@media screen and (max-width:600px){ 
  .services{
    display:none;
  }
}


/* footer */
#myFooter {
    background-color:  #78797b;
    color: white;
    padding-top: 30px;
}

#myFooter .col-sm-2{
  text-align:right;
  
}

#myFooter .col-sm-2 a{
  font-family: 'Raleway', sans-serif;
}

#myFooter .footer-copyright {
    background-color: #78797b;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
}

#myFooter .row {
    margin-bottom: 0px;
}

#myFooter .footer-copyright p {
    margin: 3px;
    color: #ccc;
}

#myFooter ul {
    list-style-type: none;
    padding-left: 0;
    line-height: 1.7;
}

#myFooter .col-sm-2, .col-sm-3{

}

#myFooter a {
    color: #d2d1d1;
    text-decoration: none;
}

#myFooter a:hover,
#myFooter a:focus {
    text-decoration: none;
    color: white;
}

#myFooter .social-networks {
    text-align: center;
    padding-top: 0px;
    padding-bottom: 16px;
}

#myFooter .social-networks a {
    font-size: 32px;
    color: #d2d1d1;
    padding: 5px;
    transition: 0.2s;
}

#myFooter img{
  padding:10px;
}

#myFooter .social-networks p {
  color: #d2d1d1;

}

#myFooter .social-networks a:hover {
    text-decoration: none;
}

#myFooter .facebook:hover {
    color: white;
}

#myFooter .github:hover {
    color: white;
}

#myFooter .linkedin:hover {
    color: white;
}



@media screen and (max-width: 767px) {
    #myFooter {
        text-align: center;
    }
}


/* CSS used for positioning the footers at the bottom of the page. */
/* You can remove this. */

.content{
   flex: 1 0 auto;
   -webkit-flex: 1 0 auto;
   min-height: 100px;
}

#myFooter{
   flex: 0 0 auto;
   -webkit-flex: 0 0 auto;
}


.banner-training{
  width:100%;
  text-align:center;
  background-size:cover;
  background-image:url(/images/training2.jpg);
  overflow:visible;
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: scroll;
  background-color: #C4C4C4;
  margin: 0 0 0;
  padding: 115px 0; /*controls padding around inner text & therefore size of banner*/
  position:relative;
  margin-top:-20px; /*dodgy way of removing whitsepace under nav*/
  background-attachment:fixed; /*parallax scrolling*/
}

.banner-training h1{
  color:white;
}

.training{
  padding-top:20px;
  width:80%;
  margin-left:10%;
  margin-right:10%;
  text-align:center;
  padding-bottom:10px;
}

.training p{
  text-align:justify;
}

/* adjust text alignment on about me page for mobile devices*/
@media screen and (max-width:600px){
.training p{
  text-align:center;
}
}

.training:after{
  content:'';
  display:block;
  clear:both;
}

.training h2{
  position:relative;
  padding-bottom:30px;
}

.training h2:after{
  content:'';
  position:absolute;
  width:71.4%;
  height:2px;
  left:14.3%;
  bottom:15px;
  background-color:#ecf0f1;
}

.training a{
  background-color: white;
  padding:10px 25px;
  text-decoration:none;
  color:#2c3e50;
  border: 1px solid #2c3e50;
  /*border-radius:20px;*/
  font-size:15px;
  display: inline-block;
  margin-top:10px;
}

.training a:hover{
  background-color:#2c3e50;
  color:white;
}

.courses{
  height:auto;
  overflow:auto;
  position:relative;
  display:inline-block;
  text-align:center;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding-bottom:5%;
}

.courses .course-1,
.courses .course-2,
.courses .course-3,
.courses .course-4,
.courses .course-5,
.courses .course-6{
  width:23.32%;
  height:300px;
  float:left;
  position:relative;
  padding:30px;
  margin-left:2.5%;
  margin-right:2.5%;
  border-bottom:solid 1px #bccad6;
  color:#2c3e50;
}

.courses .course-1,
.courses .course-4{
  margin-left:10%;
}

.courses .course-3,
.courses .course-6{
  margin-right:10%;
}

.courses .course-1:hover,
.courses .course-2:hover,
.courses .course-3:hover,
.courses .course-4:hover,
.courses .course-5:hover,
.courses .course-6:hover{
  color:#78797b;
}

/* iframe loading*/
 .holds-the-iframe {
  height:100%;
  width:100%;
  background:url(/images/loader1.gif) center center no-repeat;
 }