@charset "UTF-8";
/* This is a minimal css reset in its most basic form. These rules take off all the default browser margins and padding from elements. Use this reset at top of your main style sheet.  */

/***************************
****************************
The majority of the styling is created/edited by myself and based on online tutorials
****************************
***************************/

body {
    overflow-x: hidden;
	color: #5AC5CE;
}

/*Typography----------- */ 

p {
    font-size: 18px;
}

p.small {
    font-size: 16px;
}

blockquote {
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-style: italic;
	letter-spacing: 0.1em;
	margin-left: 0px;
	padding-left: 20px;
	padding-bottom: 15px;
	border-left: 5px solid #5AC5CE;
}

a {
    color: #5AC5CE; 
    text-decoration: none;
}

a,
a:focus,
a:active,
a.active {
    outline: 0;
    /*color: #5AC5CE !important;*/
}

a:hover {
	color: #84A74A !important;
	text-decoration: none;
}

h1,
h2,
h3,
h4,
 {
    /*text-transform: uppercase;*/
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 300;
}

h4, .h4 {
    font-size: 20px;
}

h5 {
    /*text-transform: uppercase;*/
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 100;
}

section {
    padding: 100px 0;
}

#container{
	overflow: hidden;
}

/*Horizontal Rule ----------- */

hr {
    margin-top: 11px;
    margin-bottom: 11px;
    border: 0;
    border-top: 1px solid #ecf0f1;
}

hr.hr-secondary,
hr.hr-primary {
    margin: 10px auto 20px;
    padding: 10px 0;
    max-width: 1200px;
    border: 0;
    border-top: solid 2px;
  border-color: white;
}

hr.hr-secondary:after,
hr.hr-primary:after { 
    display: inline-block;
    position: relative;
}

hr.hr-secondary {
    border-color: #ecf0f1;
}

/*Images ----------- */

.img-centered {
    margin: 0 auto;
}

/* Makes images fully responsive */
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  width: 100%;
  height: auto;
  
}

/* ------------------- Carousel Styling ------------------- */


.carousel-inner {
	border-radius: 0px;
}

.carousel-control.left,
.carousel-control.right {
  background-image: none;
  opacity: 0;
}

.carousel-caption {
padding top: 0px;
padding-bottom: 240px;
max-width: 20%;
position: absolute;
left: 40%;
z-index: 10;
text-align: center;
}
/*
 
/*CONTACT Section Syle with image background*/

#contact {
	width: 100%;
	text-align: center;
	background: url(../images/about.jpg) 50% 0 fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #5AC5CE;	
}

/*.contact-info {
  padding: 25px 30px;
  padding-left: 0px;
}*/

.contact-info ul.information-list {
  margin-top: 25px;
  padding: 0;
  padding-bottom: 80px;
}
.contact-info ul.information-list li {
  list-style: none;
  overflow: hidden;
  border-bottom: 1px solid #dddddd;
  margin-bottom: 10px;
}
.contact-info ul.information-list li i {
  float: left;
  color: #FFF;
  font-size: 18px;
  display: inline-block;
  line-height: 24px;
}
.contact-info ul.information-list li span {
  display: block;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  margin: 0 0 10px;
  margin-bottom: 8px;
  margin-left: 25px;
  color: #FFF;
}
.contact-info ul.information-list li a {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  margin: 0 0 10px;
  display: inline-block;
  margin-left: 12px;
  margin-bottom: 10px;
  color: #FFF;
}
.contact-info ul.information-list li:last-child {
  border-bottom: none;
}

.img-profile {
	padding-top: 0px;
	padding-bottom: 10px;
}

.intro-text .name {
    display: block;
    text-transform: none;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 2em;
    font-weight: 300;
}

.intro-text .skills {
    font-size: 1.25em;
    font-weight: 300;
}

/*Top Line (HEADER)*/

.top-line {
  padding: 5px 0;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  background: #5AC5CE;
}

.top-line p {
  color: #FFF;
  margin-bottom: 0;
  font-size: 16px;
}
.top-line .container, .top-line .col-md-5{
	padding: 0px;
}
.top-line p:after{
	position: absolute;
	content: "";
	height: 40px;
	width: 98%;
	margin: 0px 14px;
	left: -9px;
	top: 2px;
	height: 24px;
}
.top-line p span {
  margin-right: 15px;
}


/*ACTIVE*/

header.active .navbar-fixed-top{
	position: relative;
	background: #FFF;
	border-bottom: none;
	
}

header.active .top-line {
  height: 0;
  padding: 0;
}

.active .top-line { 
	overflow: hidden;
}

@media (max-width: 1536px) {

  .carousel-caption {
padding-bottom: 100px;
}

}

@media (max-width: 991px) {
  .top-line {
    text-align: center;
  }
  .top-line p span {
    display: inline-block;
    margin-bottom: 7px;
  }
  .carousel-caption {
padding-bottom: 100px;
}

.contact-info ul.information-list li span {
  font-size: 13px;

}
.contact-info ul.information-list li a {
  font-size: 13px;

}
}

/***************************
****************************
Tablet
****************************
***************************/

@media(min-width:768px) {

/*header .container-fluid {
        padding-top: 200px;
        padding-bottom: 100px;
    }*/
/* Navigation  ----------- */

/*About Section Style*/
#about {
	width: 100%;
	height: auto;
}
}

/* Navigation for Desktop  ----------- */
/*.navbar {
	margin: 0 auto;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
	background-color: #0CF;
}*/

.navbar {
  text-transform: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
}

.navbar-brand {
    float: left;
    padding: 41px 15px;
	font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 36px;
    line-height: 0px;
}
/* Logo  ----------- */
/*img.dc-logo {
    position: relative;

}
*/


/*img.dc-logo {
	height: 600px;
}*/

.navbar-default {
  border: none;
  position: relative;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  margin: 0;
  box-shadow: 0 0 2px #dddddd;
-webkit-box-shadow: 0 0 2px #dddddd;
-moz-box-shadow: 0 0 2px #dddddd;
-o-box-shadow: 0 0 2px #dddddd;
 background-color: #FFF;
}

.navbar-default .row{
	padding: 0px 15px 0px 30px;
}

/*.navbar .navbar-nav {
	font-size: 30px;
    padding: 40px 15px 0px;
}*/

.navbar-default .navbar-brand {
    color: #5AC5CE;
}

.navbar-nav {
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  margin-right: 15px;
  background: none;
      margin: 0px;
}

/*Nav LINK COLOURS*/

.navbar a:focus {
    outline: 0;
}

.navbar .navbar-nav {
    letter-spacing: 1px;
}

.navbar .navbar-nav li a:focus {
    outline: 0;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a.active {
  color: #84A74A !important;
}


.navbar-nav > li > a {
  color: #5AC5CE !important;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  text-transform: none;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  padding: 31px 15px;
}

.navbar-default,
.navbar-inverse {
    border: 0;
}



/*Nav dropdown*/
.navbar-nav li.drop {
  position: relative;
}
.navbar-nav li.drop ul.dropdown {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  background: #f8f8f8;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.navbar-nav li.drop ul.dropdown li {
  display: block;
}
.navbar-nav li.drop ul.dropdown li a {
  display: inline-block;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  display: block;
  color: #5AC5CE;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  padding: 10px 15px;
}
.navbar-nav li.drop ul.dropdown li a:hover {
  color: #C1D851;
}
.navbar-nav li.drop ul.dropdown li:first-child {
  border-top: none;
}
.navbar-nav li.drop:hover ul.dropdown {
  opacity: 1;
  visibility: visible;
}

/* Section Style ----------- */

section {
    padding: 50px 0;
	background-color: #fff;
}

section h2 {
    margin: 0;
    font-size: 3em;
}

/* For Hyperlink Color */

section.success {
    color: #FFF;
}

section.success a,
section.success a:hover,
section.success a:focus,
section.success a:active,
section.success a.active {
    outline: 0;
    color: #FFF;
}

/***************************
****************************
Phone
****************************
***************************/


@media(max-width:767px) {
	
p {
    font-size: 16px;
}
 .top-line {
    display: none;
  }
  /*.navbar-brand {
    padding-top: 15px !important;
    padding-bottom: 70px;
	padding-left: 20px;
  }*/
  
  .navbar-default .navbar-toggle {
    margin-top: 15px;
	border-color: #5AC5CE;
  }
  
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #5AC5CE;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #FFF;
}

  .navbar-nav > li > a {
    padding: 5px 15px !important;
  }
 
  .navbar-nav > li.drop ul.dropdown {
    position: relative;
	background: #FFF;
    top: inherit;
    left: inherit;
    width: 100%;
    padding: 0;
    border: none;
    visibility: visible;
    opacity: 1;
  }
  .navbar-nav > li.drop ul.dropdown li a {
    padding: 5px 20px;
    text-transform: inherit;
	color: #5AC5CE;
  }
  
   .carousel-caption {
padding-bottom: 30px;
}
  
/* Logo */

/*img.bb-logo {
	margin: -2px auto;
}*/

/* Section Styling */

section {
    padding: 50px 0;
}


#about {
	height: auto;
}


}

/* Hover Animation for Social Media Buttons  ----------- */

.btn-primary, .btn-primary:hover {
    color: #ffffff !important;
    background-color: #5AC5CE;
	border-color: #5AC5CE;
	padding-left: 11px;
	padding-right: 10px;
}

.scroll-top .btn:hover,
.btn:focus
 {
	 color: FFF;
	background-color: #84A74A;
	border-color: transparent;
	}


/*.btn-outline {
    margin-top: 15px;
    border: solid 2px #fff;
    font-size: 20px;
    color: #fff;
    background: 0 0;
    transition: all .3s ease-in-out;
}

.btn-outline:focus {
	display:none;

}*

.btn-outline:hover,
.btn-outline:active,
.btn-outline.active {
    border: solid 2px #FF9;
    color: #2c3e50;
    background: #FF9;
}

/* Footer  ----------- */

footer {
    color: #5AC5CE;
}

footer h3 {
    margin-bottom: 30px;
}

footer .footer-col {
    margin-bottom: 50px;
}

footer .footer-below {
    padding: 10px 0;
    background-color: white;
}

/* Social Media Icons Style  ----------- */
/*.btn-social {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 100%;
    text-align: center;
    font-size: 20px;
    line-height: 45px;
}

.btn:focus,
.btn:active,
.btn.active {
    outline: 0
}*/



/* Button to automatically scroll to top for UI  ----------- */

.scroll-top {
    z-index: 1049;
    position: fixed;
    right: 2%;
    bottom: 2%;
    width: 50px;
    height: 50px;
}

.scroll-top .btn {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    font-size: 20px;
    line-height: 28px;
}

.scroll-top .btn:focus {
    outline: 0;
}