/*
===================================================
            CSS MAIN SECTIONING
===================================================
	01. General Styling
	02. Typography Styling
	03. Section Title
    04. Pre Loading Screen
	05. Home Section
	06. Navigation Section
	07. Profile Section
    08. Education + Work Section
    09. Skill Section
    10. Portfolio Section
    11. Contact Section
    12. Footer Section
    13. Scroll to the Top Section

===================================================

===================================================
            CSS SUB SECTIONING
===================================================
    1.01. Linking Styling
    1.02. Transition Styling

    2.01. Writing Style
    2.02. Form Style
    2.03. Button Style
    2.04. Image Styling
    2.05. List Stlye
    2.06. Section Padding

    5.01. Home Scroll Button

===================================================

===================================================
            IMAGES REQUIRED
===================================================
	3. Pre Loading Screen   - Loading Icon Gif
    4. Section Title	    - Section Break Image
	5. Home Section		    - Home Background Image

===================================================
*/

/* Topic - General Styling */

/* Sub - General Styling */

body
{
	font-family: 'Roboto', sans-serif;
	line-height: 28px;
	font-weight: 300;
	font-size: 14px;
	color: #333333;
	background-color: #FFFFFF;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased !important;
}

.greySection
{
	background-color: #F7F7F7;
}

.blackSection
{
	background-color: #1a1e23;
	color: #fff;
}

/* Sub - Linking Styling */

a
{
	color: #68C3A3;
}

a,
	a > *
{
	outline: none;
	cursor: pointer;
	text-decoration: none;
}

a:focus,
	a:hover
{
	outline: none;
	color: #333333;
	text-decoration: none;
}

/* Sub - Transition Styling */

.navbar a,
	.form-control
{
	-webkit-transition: all 0.4s ease-in-out 0s;
	-moz-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	-o-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}

a,
	.btn
{
	-webkit-transition: all 0.125s ease-in-out 0s;
	-moz-transition: all 0.125s ease-in-out 0s;
	-ms-transition: all 0.125s ease-in-out 0s;
	-o-transition: all 0.125s ease-in-out 0s;
	transition: all 0.125s ease-in-out 0s;
}

/* Sub - Remove Box Shadow */

.btn,
	.form-control,
	.form-control:hover,
	.form-control:focus
{
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* Topic - Typography Styling */

/* Sub - Writing Style */

h1, h2, h3, h4, h5, h6
{
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
}

h1
{
	font-size: 36px;
	line-height: 36px;
}

h2
{
	font-size: 30px;
	line-height: 30px;
}

h3
{
	font-size: 24px;
	line-height: 24px;
}

h4
{
	font-size: 18px;
}

h5
{
	font-size: 16px;
}

h6
{
	font-size: 14px;
}

p
{
	font-size: 15px;
	font-weight: 400;
}

/* Sub - Form Style */

.form-control
{
	height: 45px;
	background-color: #F7F7F7;
	border: 1px solid #E8E8E8;
	border-radius: 0;
	box-shadow: none;
}

.form-control:focus
{
	border-color: #68C3A3;
	box-shadow: none;
}

/* Sub - Button Style */

.btn
{
	border: 0;
	border-bottom: 3px solid;
	font-weight: 700;
	line-height: 28px;
	padding: 9px 22px;
	text-transform: uppercase;
}

.btn-primary
{
	background-color: #68C3A3;
	border-color: rgba(51, 51, 51, 0.15);
}

.btn-primary:hover,
	.btn-primary:focus,
	.btn-primary:active,
	.btn-primary .focus,
	.btn-primary .active,
	.open > .dropdown-toggle .btn-primary
{
	color: #FFFFFF;
	background-color: #4EB28F;
	border-color: #4EB28F;
}

button:focus
{
	outline: none;
}

/* Sub - Image Styling */

img
{
	width: 100%;
}

/* Sub - List Style */

ul,
    ol
{
	margin: 0;
	padding: 0;
	list-style: none;
}

ul .listCheck li
{
	position: relative;
	font-size: 15px;
	line-height: 32px;
}

ul .listCheck li i
{
	margin-right: 15px;
}

/* Sub - Section Padding */

.sectionPadding
{
	padding-top: 120px;
	padding-bottom: 100px;
}

/* Topic - Section Title */

.section-title
{
	margin-bottom: 80px;
	text-align: center;
	font-size: 50px;
	line-height: 50px;
	color: #2C3E50;
	position: relative;
}

.section-title::after
{
	content: "";
	position: absolute;
	background: url(../images/sectionDivider.png) no-repeat 0 0;
	height: 15px;
	width: 113px;
	right: 0;
	left: 0;
	bottom: -40px;
	margin: 0 auto;
}

.whiteTitleColour
{
	color: #FFFFFF;
}

/* Topic - Pre Loading Screen */

#preloaderScreen
{
	z-index: 9999;
	position: fixed;
	background: #FFFFFF;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

#preStatusScreen
{
	position: absolute;
	background: url(../images/preloader.gif) center no-repeat;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	margin: -100px 0 0 -100px;
}

/* Topic - Home Section */

#home
{
	background: #222 url(../images/homeBackground.jpg) no-repeat fixed center center;
	background-size: cover;
	padding: 0;
	position: relative;
}

#home:before
{
	content: "";
	position: absolute;
	background-color: rgba(26, 30, 35, 0.85);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#home .row
{
	padding-bottom: 30px;
}

#home .homeText
{
	top: 50%;
	left: 0;
	width: 100%;
	padding: 0 15px;
	position: absolute;
	text-align: center;
	-webkit-transform: translate(0%, -50%);
	-moz-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	-o-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}

#home .homeText h1
{
	color: #52B3D9;
	font-size: 60px;
	line-height: 80px;
	margin-bottom: 16px;
}

#home .homeText h1 span
{
	color: #68C3A3;
}

#home .homeText p
{
	color: #F7F7F7;
	font-size: 19px;
	font-weight: 400;
	margin-bottom: 50px;
}

/* Sub - Home Scroll Button */

#home .mouse-icon
{
	position: absolute;
	border-radius: 16px;
	border: 2px solid #FFFFFF;
	left: 50%;
	bottom: 125px;
	width: 30px;
	height: 50px;
	margin-left: -17px;
}

#home .mouse-icon .wheel
{
	-webkit-animation-name: drop;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: running;
	animation-name: drop;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-play-state: running;
}

#home .mouse-icon .wheel
{
	position: relative;
	background: #FFFFFF;
	border-radius: 10px;
	top: 4px;
	width: 6px;
	height: 10px;
	margin-left: auto;
	margin-right: auto;
}

@keyframes drop
{
	0%
	{
		top: 5px;
		opacity: 0;
	}

	30%
	{
		top: 10px;
		opacity: 1;
	}

	100%
	{
		top: 25px;
		opacity: 0;
	}
}

#home .scrollDown p
{
	font-size: 19px;
	font-weight: 700;
	position: absolute;
	bottom: 50px;
	color: #68C3A3;
}

/* Topic - Navigation Section */

.header
{
	width: 100%;
	z-index: 998;
	position: relative;
	background: #FFFFFF;
	padding-bottom: 1px;
	border-bottom: 1px solid #eee;
}

.header::after
{
	left: 0;
	bottom: 1px;
	content: "";
	width: 100%;
	height: 2px;
	position: absolute;
	border-bottom: 1px solid #eee;
}

.header .navbar-custom
{
	border: 0;
	margin: 0;
	height: 60px;
	border-radius: 0;
	text-transform: uppercase;
	font-family: 'Roboto Condensed', sans-serif;
}

.header .navbar-custom ul
{
	padding: 0;
	background: #ffffff;
}

.header .navbar-custom ul a span
{
	margin-left: 5px;
}

.header .navbar-custom .dropdown-menu
{
	opacity: 0;
	display: block;
	margin-top: 10px;
	border-radius: 0;
	visibility: hidden;
	border: 1px solid #ddd;
	border-top: 2px solid #68c3a3;
	border-bottom: 3px double #ddd;
	background-color: #FFFFFF;
	-webkit-transition: all 400ms;
	-moz-transition: all 400ms;
	-o-transition: all 400ms;
	transition: all 400ms;
}

.header .navbar-right .dropdown-menu
{
	left: 0;
	right: auto;
}

.header .navbar-custom .navbar-nav > li:hover .dropdown-menu
{
	opacity: 1;
	display: block;
	margin-top: -2px;
	visibility: visible;
}

.header .navbar-custom .navbar-nav > li > a
{
	padding-top: 20px;
	padding-bottom: 20px;
	color: #282828;
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
}

.header .navbar-custom .dropdown-menu > li
{
	border-bottom: 1px solid #F0F0F0;
}

.header .navbar-custom .dropdown-menu > li:last-child
{
	border-bottom: 0;
}

.header .navbar-custom .dropdown-menu > li > a
{
	color: #282828;
	font-size: 14px;
	font-weight: 700;
	padding: 10px 20px;
}

.header .navbar-custom .nav li.active,
    .header .navbar-custom .nav li a:hover,
    .header .navbar-custom .nav li a:focus,
    .header .navbar-custom .navbar-nav > li.active > a
{
	background: none;
	outline: 0;
	color: #68C3A3;
}

.header .navbar-custom .nav .open > a,
    .header .navbar-custom .dropdown-menu > li > a:hover,
    .header .navbar-custom .dropdown-menu > li > a:focus
{
	background: #F5F5F5;
}

.header .navbar-custom .navbar-toggle
{
	padding: 12px 35px;
}

.header .navbar-custom .navbar-toggle .icon-bar
{
	background: #222222;
}

.header .navbar-custom .navbar-left p
{
	margin: 0;
	height: 60px;
	color: #282828;
	font-size: 22px;
	font-weight: 700;
	line-height: 60px;
	text-transform: uppercase;
}

.header .navbar-custom .navbar-left p span
{
	color: #68c3a3;
}

/* Topic - Profile Section */

#profile .paragraph h3
{
	margin-bottom: 30px;
}

#profile .paragraph
{
	margin-bottom: 40px;
}

#profile .paragraph ul
{
	display: inline-block;
}

#profile .paragraph ul li
{
	width: 50%;
	float: left;
	color: black;
	font-size: 14px;
	list-style: circle inside;
}

#profile .sidebarProfile
{
	position: relative;
	border-radius: 20px;
	border: 1px solid #EEEEEE;
}

#profile .sidebarProfile::after
{
	content: "";
	width: 100%;
	height: 30px;
	bottom: -3px;
	position: absolute;
	border-radius: 20px;
	border-bottom: 1px solid #EEEEEE;
}

#profile .sidebarProfile img
{
	width: 100%;
	position: relative;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
}

#profile .sidebarProfile ul
{
	padding: 25px 20px 30px;
}

#profile .sidebarProfile ul li
{
	color: black;
	padding: 5px 0;
	font-size: 16px;
	border-bottom: 1px solid #EEEEEE;
}

#profile .sidebarProfile ul li:last-child
{
	border-bottom: 0;
}

/* Topic - Education + Work Section */

.resume:before /* Start Timeline Pin Point*/
{
	content: "";
	left: 6%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	position: absolute;
	background-color: #E1E1E1;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.resume:after /* End Timeline Pin Point */
{
	content: "";
	left: 6%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	position: absolute;
	background-color: #E1E1E1;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.timeline:before /* Timeline Line */
{
	top: 0;
	left: 6%;
	bottom: 0;
	content: "";
	width: 2px;
	position: absolute;
	margin-left: -1.5px;
	background-color: #e1e1e1;
}

.timeline > li /* Whole List */
{
	min-height: 25px;
	position: relative;
	margin-bottom: 50px;
}

.timeline > li:before, /* Structure them as tables */
    .timeline > li:after
{
	content: " ";
	display: table;
}

.timeline > li:after /* Tab Spacing */
{
	clear: both;
}

.timeline > li .timeline-panel
{
	width: 100%;
	float: left;
	position: relative;
}

.timeline-content
{
	padding: 5px 20px 0 20px;
}

.timeline > li .posted-date
{
	position: relative;
	text-align: center;
	background-color: #FFFFFF;
}

.timeline > li .posted-date .month
{
	font-size: 18px;
	line-height: 20px;
	font-weight: 700;
	display: block;
	color: #2C3E50;
	float: left;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.timeline-heading h3
{
	font-size: 20px;
	line-height: 28px;
}

.timeline-heading span
{
	display: block;
	font-weight: 700;
	margin-bottom: 15px;
}

.timeline > li
{
	min-height: 100px;
	margin-bottom: 30px;
}

.timeline > li .posted-date
{
	position: absolute;
	text-align: center;
	background-color: #fff;
}

.timeline > li .timeline-panel
{
	width: 87%;
	float: right;
	text-align: left;
	position: relative;
	border: 1px solid #DDDDDD;
}

.timeline-content
{
	padding: 24px;
	position: relative;
	background-color: #FFFFFF;
	-webkit-transition: all 400ms;
	-moz-transition: all 400ms;
	-o-transition: all 400ms;
	transition: all 400ms;
}

.timeline-content::after /* Timeline Bubble below underline */
{
	border: 1px solid #eee;
	width: 100%;
	position: absolute;
	content: "";
	bottom: -3px;
	height: 10px;
	left: 0;
	z-index: -1;
}

.timeline > li .timeline-content:hover /* Hover Bubble Colour */
{
	color: #FFFFFF;
	background: #68C3A3;
}

.timeline > li .timeline-panel::before,
    .timeline > li .timeline-panel::before
{
	content: "";
	top: 55px;
	position: absolute;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

.timeline > li .timeline-panel::before /* Inner Side Arrow */
{
	left: -14px;
	border-right: 14px solid #DDDDDD;
	-webkit-transition: all 400ms;
	-moz-transition: all 400ms;
	-o-transition: all 400ms;
	transition: all 400ms;
}

.timeline > li .timeline-panel:hover::before
{
	border-right: 14px solid #68c3a3;
}

.timeline > li .timeline-panel::after,
    .timeline > li .timeline-panel::after
{
	content: "";
	top: 25px;
	position: absolute;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

.timeline > li .posted-date /* Date Of Event Spacer */
{
	width: 108px;
	position: absolute;
	margin-top: 55px;
	margin-left: auto;
}

/* Topic - Skills Section */

#skills .skillTitle h3
{
	width: 100%;
	margin-bottom: 10px;
}

#skills .skillDescription h5
{
	padding-top: 20px;
	padding-bottom: 5px;
	width: 100%;
	text-align: center;
	margin-bottom: 15px;
	text-transform: initial;
}

#skills .extraBullet
{
	padding-bottom: 28px;
}

#skills .listCheck
{
	width: 100%;
	padding-left: 25px;
	padding-right: 15px;
	display: inline-block;
}

#skills .listCheck li
{
	width: 33.33%;
	float: left;
	font-size: 14px;
	list-style: circle inside;
}

#skills .listCheck .fullWidth
{
	width: 100%;
}

/* Topic - Portfolio Section */

#portfolio .portfolio-item
{
	padding-right: 5px;
	padding-left: 5px;
	min-height: 235px;
}

#portfolio .portfolio-bg
{
	background: #fff;
	padding: 5px;
	margin-bottom: 20px;
	border: 1px solid #eee;
	border-bottom: 3px double #eee;
}

#portfolio .portfolio
{
	position: relative;
	overflow: hidden;
}

#portfolio #filter /* Header filter */
{
	margin: 0 0 35px;
	text-align: center;
}

#portfolio #filter li
{
	margin-bottom: 20px;
}

#portfolio #filter li a
{
	color: #68c3a3;
	display: block;
	text-transform: uppercase;
	border-radius: 4px;
	transition: inherit;
	padding: 0 15px 3px;
	border-bottom: 3px solid rgba(0, 0, 0, 0.15);
	font-weight: 500;
}

#portfolio #filter li a.active,
    #portfolio #filter li a:hover
{
	position: relative;
	background: #68C3A3;
	color: #FFFFFF;
	border-bottom: 3px solid rgba(0, 0, 0, 0.15);
}

#portfolio #filter li a.active::after,
    #portfolio #filter li a:hover::after
{
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-top: 10px solid rgba(104, 195, 163, 1);
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	bottom: -9px;
	left: 50%;
	margin-left: -8px;
}

#portfolio .tt-overlay
{
	position: absolute;
	background-color: rgba(26, 30, 31, 0.85);
	width: 100%;
	height: 100%;
	opacity: 0;
}

#portfolio .portfolio-info,
    #portfolio .links,
    #portfolio .links a i,
    #portfolio .links a i::after,
    #portfolio .tt-overlay
{
	-webkit-transition: all 400ms;
	-moz-transition: all 400ms;
	-o-transition: all 400ms;
	transition: all 400ms;
}

#portfolio .links
{
	width: 90px;
	height: 40px;
	position: absolute;
	top: 40%;
	left: 50%;
	margin-top: -20px;
	margin-left: -45px;
	opacity: 0;
	-webkit-transform: translate(0,-50px);
	-moz-transform: translate(0,-50px);
	-ms-transform: translate(0,-50px);
	-o-transform: translate(0,-50px);
	transform: translate(0,-50px);
}

#portfolio .links a i
{
	position: relative;
	color: #68c3a3;
	font-size: 16px;
	margin: 0 13px;
	z-index: 100;
}

#portfolio .links a:hover i
{
	color: #fff;
}

#portfolio .links a i::after
{
	position: absolute;
	content: "";
	left: -7px;
	top: -7px;
	width: 30px;
	height: 30px;
	border: 1px solid #68c3a3;
	z-index: -1;
	border-radius: 3px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

#portfolio .links a:hover i::after
{
	background-color: #68c3a3;
}

#portfolio .portfolio-info
{
	position: absolute;
	bottom: -100%;
	left: 0;
	background-color: #68c3a3;
	color: #fff;
	width: 100%;
	text-align: center;
}

#portfolio .portfolio:hover .tt-overlay,
    #portfolio .portfolio:hover .links
{
	opacity: 1;
	-webkit-transform: translate(0,0);
	-moz-transform: translate(0,0);
	-ms-transform: translate(0,0);
	-o-transform: translate(0,0);
	transform: translate(0,0);
}

#portfolio .portfolio:hover .portfolio-info
{
	bottom: 0;
}

#portfolio .portfolio-info h3
{
	font-size: 14px;
	font-weight: 700;
	margin: 0;
	color: white;
	padding: 10px 8px;
}

#portfolio .modal-header .close
{
	margin-top: -4px;
	font-size: 30px;
}

#portfolio .modal-body p
{
	margin: 0 0 20px;
	line-height: 26px;
}

#portfolio .carousel #carouselController
{
    position: absolute;
    bottom: 20px;
}

#portfolio .carousel #carouselController button
{
    font-size: 19px;
    padding: 4px 12px;
    margin-left: 15px;
}

#portfolio .carousel #carouselLeftRightController button
{
	top: 50%;
	width: 70px;
	height: 70px;
	border: 0;
	opacity: 0.5;
	color: #ffffff;
	margin-top: -35px;
	position: absolute;
	background: #1b1b1b;
}

#portfolio .carousel-indicators .active
{
    flex: 0 1 auto;
    width: 30px;
    height: 7px;
    margin-bottom: 1px;
    margin-right: 3px;
    margin-left: 3px;
    background-color: #FFFFFF;
}

#portfolio .carousel-indicators li
{
    flex: 0 1 auto;
    width: 30px;
    height: 7px;
    margin-right: 3px;
    margin-left: 3px;
    background-color: rgba(255,255,255,.5);
}

#portfolio .item img
{
    padding-bottom: 9px;
}

#glass /* Do not touch class name since being referenced */
{
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    display: none;
	background: rgba(0, 0, 0, .6) no-repeat;
	z-index: 2000;
}

/* Topic - Contact Section */

#contact h3
{
    padding-bottom: 15px;
}

#contact form input,
    #contact form textarea
{
    margin-bottom: 20px;
    resize: none;
    color: black;
    border-color: #5f5f5f;
}

#contact form input::placeholder,
    #contact form textarea::placeholder
{
    color: #5f5f5f;
}

#contact .contact-form .btn
{
	margin-top: 15px;
}

#contact .row
{
    margin-bottom: 20px;
}

#contact i
{
    font-size: 31px;
    margin-top: 7px;
    margin-bottom: 7px;
}

#contact .contactDetailsDescription
{
    font-size: 15px;
    margin-top: 8px;
}

#contact .details
{
    font-size: 15px;
    margin-top: 8px;
}

#contact a strong,
    #contact a:hover strong,
    #contact a:focus strong
{
    color: #68C3A3;
}

/* Topic - Footer Section */

#footer
{
    background: #1a1e23;
    padding: 36px 0;
    color: #FFFFFF;
}

/* Topic - Scroll To The Top Section */

.scroll-up
{
	position: fixed;
	z-index: 999;
	bottom: 20px;
	right: 20px;
}

.scroll-up a
{
	display: block;
	width: 45px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	color: #FFFFFF;
	font-size: 28px;
	background-color: #68C3A3;
}

.scroll-up a:hover,
    .scroll-up a:active
{
	background-color: #EBEBEB;
	color: #222222;
}