@charset "utf-8";
/* CSS Document */
header {
	color: #fff;
	height: 112px;
	line-height: 112px; /* same as header height, to center logo and nav in center of the nav */
	position: fixed;
	width: 100%;
	z-index: 100;
}

header a.logo {
	float: left;
}

	#logo img {
		/*-webkit-filter: drop-shadow(2px 2px 6px white);*/
		height: 90px;
		width: 90px;	
	}
	
	#siteIdent {
		height: 112px;
		line-height: 112px;
		float: left;
		display: block;
		/*margin-left: 7vw;*/
		margin-left: 15px;
		/*padding-top: 2.2vw;*/
		/*padding-top: 30px*/;
	}	
	#siteIdent h1 {
		display: block;
		font-size: 1.8em;
		color: #fe9314;
		/*font-family: 'Racing Sans One', cursive;*/
		/* strle swap for my styles */
	}	

header nav {
	float: right;
	font-weight: bold;
}

header nav ul li {
	padding-left: 30px;
}

header nav ul li a {
	color: #fff;
	transition: all 0.2s ease-in; /* to delay the hover change */
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
}

header nav ul li a:hover, header nav ul li a:focus {
	color: #e74c3c;
	/*color: #fe9314;*/
	/* strle swap for my styles */
	text-decoration: none;
	/* a:focus to make the active link change color to identify the page user is on - this may case a border box that needs: a:focus { outline: 0;}, to remove */
}

/* Slider section */
.slider, .slider ul.slider-carousel, .slider ul.slider-carousel li {
	height: 600px;
	width: 100%;
	text-align: center;
	color: #FFF;
}

.slider ul.slider-carousel li h1 {
	margin-top: 150px;
	margin-bottom: 30px;
	color: #FFF;
}

.slider ul.slider-carousel li p {
	margin-bottom: 50px;
}

.slider ul.slider-carousel li a {
	padding: 5px 30px;
	padding: 10px 50px;
	margin-right: 10px;
	color: #fff;
	font-weight: bold;
	transition: all 0.3s ease-in;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
}

.slider ul.slider-carousel li a:last-child {
	margin-right: 0px;
	/* to gemove the margin of the last child*/
}

.image1 {
	/*background: url(images/slider/slider1.png);*/
	/*background-image: url(../images/slider/slider1.png);*/
	/*background: url(../images/slider/slider1.png);*/
	background-image: url(../images/slider/slider1.jpg);
	/* strle swap for my styles */
	/*background-size: 100% 100%;*/ 
	background-size: auto 100%;
	
}

.slider ul.slider-carousel li a.cta1:hover {
	/*background-color: #ff695a;*/
	background-color: #b26811;
	/* strle swap for my styles */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 16px;
}

.slider ul.slider-carousel li a.cta2:hover {
	background-color: #3f9cfa;
	background-color: #166db2;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 16px;
}

.image2 {
	/*background: url(images/slider/slider1.png);*/
	/*background-image: url(../images/slider/slider2.png);*/
	/*background: url(../images/slider/slider2.png);*/
	background-image: url(../images/slider/slider2.jpg);
	/* strle swap for my styles */
	/*background-size: 100% 100%;*/ 
	background-size: auto 100%;
	
}

.image3 {
	/*background: url(images/slider/slider1.png);*/
	/*background-image: url(../images/slider/slider3.png);*/
	/*background: url(../images/slider/slider3.png);*/
	background-image: url(../images/slider/slider3.jpg);
	/* strle swap for my styles */
	/*background-size: 100% 100%;*/ 
	background-size: auto 100%;
}

.image1, .image2, .image3 {
	background-position: 0 0;
}

.slider ul.sliderpager li {
	padding: 0 5px;
	height:  28px;
	line-height:  28px;
}

.slider ul.sliderpager li a {
	color: #2d82d8;
	/*color: #34495e;*/
	/* strle swap for my styles */
}

.slider ul.sliderpager li.selected a {
	color: #e74c3c;
	/*color: #fe9314;*/
	/* strle swap for my styles */
}


/**** Servicses section ******************************************************************/

.services {
	text-align: center;
}

.services .services-content i { /* services icon */
	font-size: 32px;
	color: #555;
}
/* End services section ******************************************************************/

/* Shared Section Styles ******************************************************************/
.services-header, .portfolio-header, .team-header, .skills-header, .testimonials-header, .blog-header, .contact-header {
	margin-bottom: 42px;
	text-align: center;
}
/* End Shared Section Styles ******************************************************************/




.portfolio {
	/*background-color: #e9a02e;*/
	color: #FFF;
	/*background-image: url("../images/portfolio/portfolio-bg.png");*/
	background-image: url("../images/portfolio/portfolio-bg2.jpg");
	background-image: url("../images/contact-bg2.jpg");
	/* strle swap for my styles */
	/*background-size: 100% 100%;*/
	background-attachment: fixed; /* neccisary fo rth eparallax*/
	background-size: 100% 100%;
}

.portfolio .inner-content {
	position: relative;
	width: 265px;
}

.portfolio .inner-content img {
	width: 100%;
}

.portfolio .inner-content .overlay-content {
	position: absolute;
	top: 100%;
	left: 0px;
	text-align: center;
	background-color: rgba(0,0,0,0.8);
	width: 100%;
	height: 100%;
	/*transition: all 0.3s ease-in;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;*/
	/* this trasition will be applied on the hover but it can be places here on in the hover style */
	/*display: none;*/
	opacity: 0;
}

.portfolio-carousel li {
	margin-right: 10px;
	margin-left: 10px;
	height: 180px;
}

.portfolio-carousel li img {
	width: auto;
	height: 100%;
}

.portfolio .inner-content .overlay-content h3, .portfolio .inner-content .overlay-content p {
	color: #fff;
}

.portfolio .inner-content .overlay-content h3 {
	padding-top: 20%;
	color: #e74c3c;
	color: #fe9314;
	margin-left: auto;
	font-size: 16px;
	/* strle swap for my styles */
}

.portfolio .inner-content:hover .overlay-content {
	top: 0;
	/*display: block;*/
	opacity: 1;
	transition: all 0.4s ease-in;
	-webkit-transition: all 0.4s ease-in;
	-moz-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
}

.portfolio .inner-content .overlay-contentp p a {
	color: #2d82d8;
	color: #2196f3;
	/* strle swap for my styles */
	font-weight: bold;
}

.portfolio .portfolio-nav {
	text-align: center;
	margin-top: 20px;
}

.portfolio .portfolio-nav li {
	cursor: pointer;
	width: 28px;
	height: 28px;
	line-height: 28px;
	margin-right: 10px;
	font-size: 14px;
	font-weight: bold;
	background-color: #333;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.portfolio .portfolio-nav li:last-child {
	margin-right: 0;
}

.portfolio .portfolio-nav li:hover {
	background-color: #e74c3c;
	background-color: #fe9314;
	/* strle swap for my styles */
}


/* END Portfolio Section ******************************************/

/* Skills Section **************************************************/

#team-prev, #team-next, #skills-prev, #skills-next {
	color: #FFF;
}

.team .inner-content, .skills .inner-content {
	position: relative;
	width: 265px;
}

.team .inner-content img, .skills .inner-content img {
	width: 100%;
}

.team .inner-content .overlay-content, .skills .inner-content .overlay-content {
	position: absolute;
	top: 100%;
	left: 0px;
	text-align: center;
	background-color: rgba(0,0,0,0.8);
	width: 100%;
	height: 100%;
	transition: all 0.3s ease-in;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	/* this trasition will be applied on the hover but it can be places here on in the hover style */
}

.team-carousel li, .skills-carousel li  {
	margin-right: 10px;
	margin-left: 10px;
}

.team .inner-content:hover .overlay-content, .skills .inner-content:hover .overlay-content {
	top: 0;
}

.team .team-nav, .skills .skills-nav {
	text-align: center;
	margin-top: 20px;
}

.team .team-nav li, .skills .skills-nav li {
	cursor: pointer;
	width: 28px;
	height: 28px;
	line-height: 28px;
	margin-right: 10px;
	font-size: 14px;
	font-weight: bold;
	background-color: #333;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.team .team-nav li:last-child, .skills .skills-nav li:last-child {
	margin-right: 0;
}

.team .team-nav li:hover, .skills .skills-nav li:hover {
	background-color: #e74c3c;
	background-color: #fe9314;
	/* strle swap for my styles */
}

/*.skills-carousel .inner-content p:first-child {
	padding-top: 15%;
}
or */

.team-carousel .inner-content p.name, .skills-carousel .inner-content p.name {
	padding-top: 15%;
}

.team-carousel .inner-content p.description, .skills-carousel .inner-content p.description  {
	padding: 0px 15px;
}

.description {
	color: #FFF;
}

ul.member-social-links li {
	font-size: 14px;
	width: 28px;
	height: 28px;
	line-height: 28px;
}

ul.member-social-links li a {
	color: #fff;
}

ul.member-social-links li i {
	width: 28px;
	height: 28px;
	line-height: 28px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	color: white;
}

ul.member-social-links li i.fa-facebook {
	background-color: #3b5998;
}

ul.member-social-links li i.fa-twitter {
	background-color: #00aced;
}

ul.member-social-links li i.fa-linkedin {
	background-color: #007bb6;
}

/* end skills section style ******************************/

/* Testimonials section style ******************************/
.testimonials-section {
	height: 450px;
}

.testimonials {
	/*background-color: #0c1622;*/
	/*background-image: url("../images/testi-bg.png");*/
	background-image: url("../images/pexels-photo-239898b.jpeg");
	background-attachment: fixed; /* neccisary fo rth eparallax*/
	background-size: 100% 100%;
	color: #fff;
} 

.testimonial-carousel li {
	text-align: center;
	margin: 0 200px;
}

blockquote {
	border: none;
	min-width: 30%;
	/*width: 900px;
	margin: 0 auto; or margin: 0 200px; in .testimonial-carousel li */
	line-height: 1.5em;
	margin-bottom: 40px;
	position: relative;
	font-size: 14px;
	color: #fff;
	display: inline-block;
	padding: 0;
	min-height: 2vh;
	min-height: 3vh;
}

blockquote i p {
	/*min-height: 2vh;*/
	/*margin-bottom: 4vh;*/
}

.caroufredsel_wrapper {
	/*min-height: 365px;*/ 
	/* my fix - to stop section resizing and the subsequecnial shifting below */
}


.testimonials-header {
	/*min-height: 90px;*/ /* my fix - to stop section resizing and the subsequecnial shifting below */
}

.carousel_height {
	min-height: 100px;
}

blockquote:before {
	position: absolute;
	content: "\f10d";
	top: -5px;
	left: -20px;
	font-family: fontAwesome;
}

blockquote:after {
	position: absolute;
	content: "\f10e";
	bottom: -5px;
	right: -20px;
	font-family: fontAwesome;
}


.testimonial-carousel li img {
	width: 150px;
	height: 150px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	margin-bottom: 30px;
}

.testimonial-carousel li p.name {
	font-size: 32px;
	color: #e74c3c;
	color: #fe9314;
	/* strle swap for my styles */
	font-weight: bold;
}

.testimonial-carousel li p.position {
	font-weight: bold;
	/*margin-bottom: 30px;*/
}

	.testipager {
		top: 18px;
		position: relative;
	}

.testipager li {
	margin-right: 5px;
}

.testipager li:last-child {
	margin-right: 0px;
}

.testipager li a {
	color: #FFF;
}

.testipager li.selected a {
	color: #e74c3c;
	color: #fe9314;
	/* strle swap for my styles */
}
/* End Testimonials section style ******************************/

/* End Blog section style ******************************/
.blog b.date {
	color: #333;
}

.blog h3  a{
	transition: all 0.3s ease-in;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
}

.blog h3 a:hover {
	color: #e74c3c;
	color: #fe9314;
	/* strle swap for my styles */
}

/* End Blog section style ******************************/

/* Contact section style ******************************/
.contact {
	/*background-color: #39787c;*/
	background-image: url(../images/contact-bg.png);
	background-image: url(../images/2017-03-23-13-49-09b.jpg);
	background-attachment: fixed; /* neccisary for the eparallax*/
	background-size:  100% 100%;
	color: #FFF;
}

form.contact-form {
	width: 50%;
	margin: 0 auto;
	text-align: center; /* to center submit button */
}

input:not([type=submit]),textarea {
	width: 100%;
	margin-bottom: 40px;
	color: #FFF;
	padding-left: 20px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2) inset;
	border: none; /* so the inset will show in firefox */
	background-color: rgba(255,255,255, 0.5);
}

input:not([type=submit]) {	
	height: 40px;
	line-height: 40px;
}

textarea {
	padding-top: 10px;	
}

.contact-form #message {
	color: #FFF;
}
#submit {
	padding: 10px 30px;
	color: #FFF;
	background-color: #e74c3c;
	background-color: #fe9314;
	/* strle swap for my styles */
	border: none;
	font-weight: bold;
}
/* End Contact section style ******************************/


/* Footer style ******************************/

footer {
	padding-top: 56px;
}

footer h1 {
	padding-bottom: 28px;
}

footer p i {
	color: #2d82d8;
	color: #2196f3;
	/* strle swap for my styles */
}

footer p span {
	padding-left: 15px; /*to make a space between icon and icon copy*/
	font-weight: bold;
}

footer p.about {
	margin-bottom: 20px;
}

form.update-form input:not([type=submit]),textarea {
	width: 100%;
	margin-bottom: 40px;
	color: #777;
	padding-left: 20px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
	border: none; /* so the inset will show in firefox */
}

#take-email {
	margin-bottom: 20px;
}


#submit-button {
	color: #FFF;
	background-color: #e74c3c;
	/*background-color: #fe9314;*/
	/* strle swap for my styles */
	border: none;
	padding: 0px 30px;
	height: 40px;
	line-height: 40px;
	font-weight: bold;
}	
	
.footer-social-links li {
	padding: 0 10px;
	font-size:  28px;
}	
	
.footer-social-links li a i.fa-facebook {
	color: #3b5998;
}

.footer-social-links li a i.fa-twitter {
	color: #00aced;
}	

.footer-social-links li a i.fa-youtube {
	color: #bb0000;
}	

.footer-social-links li a i.fa-linkedin {
	color: #007bb5;
}	

.footer-social-links li a i.fa-dribbble {
	color: #ea4c89;
}	
	
.copyright {
	text-align: center;
	color: #FFF;
	background-color: #333;
	height: 28px;
	line-height: 28px;
	margin-top: 56px;
}

footer p span.primary {
	padding-left: 0;
}

.copyright p {
	margin: 0 0 0 0;
}
/* Footer style ******************************/

@media only screen and (max-width: 1999px) {
	.image1, .image2, .image3 {
		background-position: -12.5vw 0;
	}
}

@media screen and (max-width: 1920px) {
	.image1, .image2, .image3{
		background-position: -16.5vw 0;
	}
}

@media only screen and (max-width: 1780px) {
	
	.image1, .image2, .image3 {
		background-position: -20vw 0;
	}
}

@media only screen and (max-width: 1650px) {
	
	.image1, .image2, .image3 {
		background-position: -27vw 0;
	}
}

@media only screen and (max-width: 1580px) {
	
	.image1, .image2, .image3 {
		background-position: -28vw 0;
	}
}

@media screen and (max-width: 1450px) {
	.image1, .image2, .image3{
		background-position: -32.5vw 0;
	}
}

@media only screen and (max-width: 800px) {
	
	.image1, .image2, .image3 {
		background-position: -55.5vw 0;
	}
}


@media only screen and (max-width: 600px) {
	
	.image1, .image2, .image3 {
		background-position: -88.5vw 0;
	}
}

@media only screen and (max-width: 420px) {
	
	.image1, .image2, .image3 {
		background-position: -505px 0;
	}
}