* {
	margin: 0;
	padding: 0;
	border: 0;
	
}

html {
	font-size: 62.5%;
}

body {
	font-family: 'Open Sans', sans-serif;
	background-color: #E1E7E9;
}

p {
	font-size: 1.6rem;
}

/*---------- Start Homepage Section ----------*/
#header-wrapper {
	height: 101vh;
	width: 100%;
	background: url(../img/landpage.jpg) center;
	/* background: url(https://static.pexels.com/photos/292600/pexels-photo-292600.jpeg) center 30%;	/* www.pexels.com */
	background-size: cover;
}

#top-bar-wrapper {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
}

#top-bar {
	margin: 0 auto;
	max-width: 1200px;
}

/*--- Start Top Bar Scrolled --*/
#top-bar-wrapper.scrolled {
  background-color: #CBDFD6;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
  z-index: 1000;
  border-bottom: 2px solid #3A6168;
}

#top-bar-wrapper.scrolled nav a {
	color: #3A6168;
	border: 2px solid transparent;
}

#top-bar-wrapper.scrolled nav a:hover {
	color: #000;
	border: 2px solid #337579;
}

#top-bar-wrapper.scrolled nav a:focus {
	outline: none;
	color: #000;
	border: 2px solid #337579;
}

#top-bar-wrapper.scrolled #logo:focus {
	outline: 2px solid #337579;
	outline-offset: 10px;
}

#top-bar-wrapper.scrolled #menu-icon:focus {
	outline: 2px solid #337579;
}
/*--- End Top Bar Scrolled --*/

#logo {
	background: url(../img/logo.png) no-repeat center;
	background-size: 100%;
	margin: 18px 35px;
	width: 120px;
	height: 40px;
	float: left;
	visibility: hidden;
	-webkit-animation-delay: .4s;
	        animation-delay: .4s;
}

#logo:focus {
	outline: 2px solid #CBDFD6;
	outline-offset: 10px;
}

#logo:active {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

/*--- Start Menu Icon With Animation --*/
#menu-icon {
    display: none;
    cursor: pointer;
    padding: 7px;
    margin: 14px 15px 10px 0;
    visibility: hidden;
    -webkit-animation-delay: .4s;
            animation-delay: .4s;
}

#menu-icon:focus { 
	outline: 2px solid #CBDFD6;
}

#menu-icon:active {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

#bar1, #bar2, #bar3 {
    width: 35px;
    height: 5px;
    background-color: #000;
    margin: 6px 0;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.change #bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change #bar2 {
    opacity: 0;
}

.change #bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}
/*--- End Menu Icon With Animation --*/

nav {
	float: right;
}

nav ul {
	list-style-type: none;
}

nav ul li {
	display: inline-block;
	padding: 25px;
	padding-top: 28px;
	visibility: hidden;
	-webkit-animation-delay: .4s;
	        animation-delay: .4s;
}

nav ul li a {
	text-decoration: none;
	color: #000;
	font-size: 1.8rem;
	font-weight: 600;
	padding: 10px 15px;
	border: 1px solid transparent;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}

nav ul li a:hover {
	color: #CBDFD6;
	border: 1px solid #CBDFD6;
	border-radius: 10px;
}

nav ul li a:focus {
	outline: none;
	color: #CBDFD6;
	border: 1px solid #CBDFD6;
	border-radius: 10px;
}

#header-wrapper #container {
	display: table;
	width: 100%;
	height: 70%;
}

#heading-text {
	font-family: 'Montserrat', sans-serif;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

#heading-text h1 {
	font-size: 10rem;
	font-weight: 100;
	color: #E1E7E9;
}

#heading-text #it {
	font-weight: 300;
}

#head-txt {
	visibility: hidden;
}

#btn {
	visibility: hidden;
	-webkit-animation-delay: .4s;
	        animation-delay: .4s;
	padding-top: 40px;
}

#start-button {
	font-size: 2.2rem;
	font-weight: 400;
	color: #3A6168;
	text-decoration: none;
	text-transform: uppercase;
	border: 3px solid #3A6168;
	padding: 10px 20px;
	border-radius: 9px;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

#start-button:hover {
	color: #CBDFD6;
	border: 3px solid #CBDFD6;
}

#start-button:focus {
	outline: none;
	color: #CBDFD6;
	border: 3px solid #CBDFD6;
	background-color: rgba(203, 223, 214, 0.15);
}

.stop-scrolling {
	height: 100%;
	overflow: hidden;
}
/*---------- End Homepage Section ----------*/

/*---------- Start Portfolio Section ----------*/
#portfolio {
	padding-top: 3%;
}

#portfolio-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 3%;
}

#portfolio-header {
	text-align: center;
}

#portfolio-header h2 {
	font-size: 4.1rem;
	padding: 20px 0 30px 0;
}

#portfolio-header p {
	font-size: 2.4rem;
}

#portfolio-main {
	width: 100%;
	margin: 5% 0 3% 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

/*--- Start Flip And Hover Effects On Portfolio Project Photos --*/
.flip-container {
	-webkit-perspective: 1000px;
	        perspective: 1000px;
	width: 33.33333%;
	max-width: 400px;
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin-bottom: 40px;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

/* flip the photo when clicked */
.flip-container.clicked .flipper {
	-webkit-transform: rotateY(180deg);
	        transform: rotateY(180deg);
}

.flipper {
	width: calc(100% - 50px);
	max-width: 350px;
	max-height: 230px;
	/* flip speed*/
	-webkit-transition: 2s;
	transition: 2s;
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	position: relative;
}

.flipper:after {
	content: "";
	display: block;
	padding-bottom: 66%;
}

.front, .back {
	width: 100%;
	height: 100%;
	max-width: 350px;
	max-height: 230px;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	/* hide back of photo during swap and when .front is still hovered */
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
}

.front img {
	width: 100%;
	height: 100%;
	max-width: 350px;
	max-height: 230px;
}

.front {
	z-index: 2;
	/* for firefox */
	-webkit-transform: rotateY(0deg);
	        transform: rotateY(0deg);
	/* this transition is regarding to scale(1.1) when .front:hover! */
	-webkit-transition: -webkit-transform .6s;
	transition: -webkit-transform .6s;
	transition: transform .6s;
	transition: transform .6s, -webkit-transform .6s;
}

/* zoom effect when photo is hovered */
.front:hover {
	-webkit-transform: scale(1.1);
	        transform: scale(1.1);
}

.textOnHover {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-height: 230px;
	-webkit-transition: opacity .6s, visibility .6s;
	transition: opacity .6s, visibility .6s;
	background-color: rgba(22, 45, 35, 0.72);
	color: #FFF;
	text-align: center;
}

.front:hover .textOnHover {
	visibility: visible;
	opacity: 1;
}

.textOnHover h3 {
	font-size: 3rem;
	padding: 15% 0 15px 0;
}

.textOnHover p {
	font-size: 1.6rem;
}

/* back, initially hidden div */
.back {
	-webkit-transform: rotateY(180deg);
	        transform: rotateY(180deg);
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	background-color: #CBDFD6;
	border: 2px solid #3A6168;
	text-align: center;
}

.back h3 {
	font-size: 2rem;
	padding: 20px;
}

.back p {
	font-size: 1.6rem;
	padding: 10px 20px;
	text-align: justify;
}
/*--- End Flip And Hover Effects On Portfolio Project Photos --*/

/*---------- End Portfolio Section ----------*/

/*---------- Start Offer Section ----------*/
#offer {
	width: 100%;
	background-color: #244C31;
	color: #EFEFEF;
	padding-top: 3%;
}

#offer-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 3%;
}

#offer-header {
	text-align: center;
}

#offer-header h2 {
	font-size: 4.1rem;
	padding: 20px 0 30px 0;
	color: #ED8104;
}

#offer-header p {
	font-size: 2.4rem;
}

#offer-main {
	width: 100%;
	margin-top: 5%;
	padding-bottom: 6%;
	font-size: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.one-third-offer {
	display: inline-block;
	width: calc(33.333333% - 20px);
	max-width: 530px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	margin: 10px;
	margin-bottom: 15px;
	padding: 20px;
	border: 1.5px solid #EFEFEF;
	border-radius: 30px;
}

.one-third-offer h3 {
	font-size: 2.4rem;
	text-align: center;
	padding: 20px 0;
	color: #ED8104;
}

.one-third-offer p {
	font-size: 1.7rem;
	text-align: justify;
}

.offer-img-animation {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	height: 100px;
	margin: 0 auto;
}

#at-sign {
	margin: auto;
	font-size: 6.5rem;
	font-weight: 300;
	-webkit-animation: 6s bouncing infinite 4s;
	        animation: 6s bouncing infinite 4s;
}

#cog-animation {
	margin: auto;
	position: relative;
	width: 80px;
	height: 80px;
}

#cog-small {
	position: absolute;
	top: 0px;
    left: 0px;
    width: 40px;
    -webkit-animation: 6s smallrotate infinite 1s;
            animation: 6s smallrotate infinite 1s;
    -webkit-transform: rotate(6deg);
            transform: rotate(6deg);
}

#cog-big {
	position: absolute;
	top: 19px;
    left: 28px;
    width: 59px;
    -webkit-animation: 6s bigrotate infinite 1s;
            animation: 6s bigrotate infinite 1s;
}

.offer-img-animation.overflowHidden {
	overflow: hidden;
}

#cart {
	margin: auto;
	width: 60px;
	-webkit-animation: 6s riding infinite 3s;
	        animation: 6s riding infinite 3s;
}


@-webkit-keyframes bouncing {
	0% {
    	-webkit-transform: translateY(0) scale(1);
    	        transform: translateY(0) scale(1);
	}

	10% {
    	-webkit-transform: translateY(0) scale(1,0.8);
    	        transform: translateY(0) scale(1,0.8);
	}
	
	15% {
    	-webkit-transform: translateY(-10px) scale(1,1.02);
    	        transform: translateY(-10px) scale(1,1.02);
	}
	
	18% {
    	-webkit-transform: translateY(-12px) scale(1,1);
    	        transform: translateY(-12px) scale(1,1);
	}
	
	20% {
    	-webkit-transform: translateY(0) scale(1,0.9);
    	        transform: translateY(0) scale(1,0.9);
	}
	
	25% {
    	-webkit-transform: translateY(0) scale(1,0.7);
    	        transform: translateY(0) scale(1,0.7);
	}
	
	28% {
    	-webkit-transform: translateY(-25px) scale(1,1.05);
    	        transform: translateY(-25px) scale(1,1.05);
	}
	
	30% {
    	-webkit-transform: translateY(-30px) scale(1,1);
    	        transform: translateY(-30px) scale(1,1);
	}
	
	33% {
    	-webkit-transform: translateY(0) scale(1,0.8);
    	        transform: translateY(0) scale(1,0.8);
	}
	
	36% {
    	-webkit-transform: translateY(0) scale(1,0.6);
    	        transform: translateY(0) scale(1,0.6);
	}
	
	40% {
    	-webkit-transform: translateY(-40px) scale(1,1.13);
    	        transform: translateY(-40px) scale(1,1.13);
	}
	
	43% {
    	-webkit-transform: translateY(-46px) scale(1,1);
    	        transform: translateY(-46px) scale(1,1);
	}
	
	46% {
    	-webkit-transform: translateY(0) scale(1,0.6);
    	        transform: translateY(0) scale(1,0.6);
	}
	
	50% {
    	-webkit-transform: translateY(0) scale(1,1);
    	        transform: translateY(0) scale(1,1);
	}
	
	100% {
    	-webkit-transform: translateY(0) scale(1,1);
    	        transform: translateY(0) scale(1,1);
	}
}


@keyframes bouncing {
	0% {
    	-webkit-transform: translateY(0) scale(1);
    	        transform: translateY(0) scale(1);
	}

	10% {
    	-webkit-transform: translateY(0) scale(1,0.8);
    	        transform: translateY(0) scale(1,0.8);
	}
	
	15% {
    	-webkit-transform: translateY(-10px) scale(1,1.02);
    	        transform: translateY(-10px) scale(1,1.02);
	}
	
	18% {
    	-webkit-transform: translateY(-12px) scale(1,1);
    	        transform: translateY(-12px) scale(1,1);
	}
	
	20% {
    	-webkit-transform: translateY(0) scale(1,0.9);
    	        transform: translateY(0) scale(1,0.9);
	}
	
	25% {
    	-webkit-transform: translateY(0) scale(1,0.7);
    	        transform: translateY(0) scale(1,0.7);
	}
	
	28% {
    	-webkit-transform: translateY(-25px) scale(1,1.05);
    	        transform: translateY(-25px) scale(1,1.05);
	}
	
	30% {
    	-webkit-transform: translateY(-30px) scale(1,1);
    	        transform: translateY(-30px) scale(1,1);
	}
	
	33% {
    	-webkit-transform: translateY(0) scale(1,0.8);
    	        transform: translateY(0) scale(1,0.8);
	}
	
	36% {
    	-webkit-transform: translateY(0) scale(1,0.6);
    	        transform: translateY(0) scale(1,0.6);
	}
	
	40% {
    	-webkit-transform: translateY(-40px) scale(1,1.13);
    	        transform: translateY(-40px) scale(1,1.13);
	}
	
	43% {
    	-webkit-transform: translateY(-46px) scale(1,1);
    	        transform: translateY(-46px) scale(1,1);
	}
	
	46% {
    	-webkit-transform: translateY(0) scale(1,0.6);
    	        transform: translateY(0) scale(1,0.6);
	}
	
	50% {
    	-webkit-transform: translateY(0) scale(1,1);
    	        transform: translateY(0) scale(1,1);
	}
	
	100% {
    	-webkit-transform: translateY(0) scale(1,1);
    	        transform: translateY(0) scale(1,1);
	}
}

@-webkit-keyframes smallrotate {
	0% {
    	-webkit-transform: rotate(6deg);
    	        transform: rotate(6deg);
	}

	50% {
  		-webkit-transform: rotate(-444deg);
  		        transform: rotate(-444deg);
	}

	100% {
    	-webkit-transform: rotate(-444deg);
    	        transform: rotate(-444deg);
	}
}

@keyframes smallrotate {
	0% {
    	-webkit-transform: rotate(6deg);
    	        transform: rotate(6deg);
	}

	50% {
  		-webkit-transform: rotate(-444deg);
  		        transform: rotate(-444deg);
	}

	100% {
    	-webkit-transform: rotate(-444deg);
    	        transform: rotate(-444deg);
	}
}

@-webkit-keyframes bigrotate {
	0% {
   		-webkit-transform: rotate(0);
   		        transform: rotate(0);
	}

	50% {
    	-webkit-transform: rotate(360deg);
    	        transform: rotate(360deg);
	}

	100% {
    	-webkit-transform: rotate(360deg);
    	        transform: rotate(360deg);
	}
}

@keyframes bigrotate {
	0% {
   		-webkit-transform: rotate(0);
   		        transform: rotate(0);
	}

	50% {
    	-webkit-transform: rotate(360deg);
    	        transform: rotate(360deg);
	}

	100% {
    	-webkit-transform: rotate(360deg);
    	        transform: rotate(360deg);
	}
}

@-webkit-keyframes riding { 
	0% {
    	-webkit-transform: translateX(0);
    	        transform: translateX(0);
    	z-index: 0;
	}
	
	24% {
    	-webkit-transform: rotate(20deg) translateX(-20px);
    	        transform: rotate(20deg) translateX(-20px);
    	z-index: 0;
	}
	
	25% {
    	-webkit-transform: rotate(0) translateX(0);
    	        transform: rotate(0) translateX(0);
    	z-index: 0;
	}
	
	30% {
    	-webkit-transform: rotate(0) translateX(500px);
    	        transform: rotate(0) translateX(500px);
    	z-index: 0;
	}
	
	30.1% {
    	z-index: -1;
    	-webkit-transform: rotate(0) translateX(-500px);
    	        transform: rotate(0) translateX(-500px);
	}
	
	35% {
    	-webkit-transform: rotate(0) translateX(200px);
    	        transform: rotate(0) translateX(200px);
    	z-index: 0;
	}
	
	35.1% {
    	z-index: -1;
    	-webkit-transform: rotate(0) translateX(-500px);
    	        transform: rotate(0) translateX(-500px);
	}
	
	40% {
    	-webkit-transform: rotate(0) translateX(20px);
    	        transform: rotate(0) translateX(20px);
    	z-index: 0;
	}
	
	50% {
    	-webkit-transform: rotate(0) translateX(0);
    	        transform: rotate(0) translateX(0);
    	z-index: 0;
	}
	
	100% {
    	-webkit-transform: rotate(0) translateX(0);
    	        transform: rotate(0) translateX(0);
    	z-index: 0;
    }
}

@keyframes riding { 
	0% {
    	-webkit-transform: translateX(0);
    	        transform: translateX(0);
    	z-index: 0;
	}
	
	24% {
    	-webkit-transform: rotate(20deg) translateX(-20px);
    	        transform: rotate(20deg) translateX(-20px);
    	z-index: 0;
	}
	
	25% {
    	-webkit-transform: rotate(0) translateX(0);
    	        transform: rotate(0) translateX(0);
    	z-index: 0;
	}
	
	30% {
    	-webkit-transform: rotate(0) translateX(500px);
    	        transform: rotate(0) translateX(500px);
    	z-index: 0;
	}
	
	30.1% {
    	z-index: -1;
    	-webkit-transform: rotate(0) translateX(-500px);
    	        transform: rotate(0) translateX(-500px);
	}
	
	35% {
    	-webkit-transform: rotate(0) translateX(200px);
    	        transform: rotate(0) translateX(200px);
    	z-index: 0;
	}
	
	35.1% {
    	z-index: -1;
    	-webkit-transform: rotate(0) translateX(-500px);
    	        transform: rotate(0) translateX(-500px);
	}
	
	40% {
    	-webkit-transform: rotate(0) translateX(20px);
    	        transform: rotate(0) translateX(20px);
    	z-index: 0;
	}
	
	50% {
    	-webkit-transform: rotate(0) translateX(0);
    	        transform: rotate(0) translateX(0);
    	z-index: 0;
	}
	
	100% {
    	-webkit-transform: rotate(0) translateX(0);
    	        transform: rotate(0) translateX(0);
    	z-index: 0;
    }
}
/*---------- End Offer Section ----------*/

/*---------- Start Technology Section ----------*/
#technology {
	padding-top: 3%;
}

#technology-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 3%;
}

#technology-header {
	text-align: center;
}

#technology-header h2 {
	font-size: 4.1rem;
	padding: 20px 0 30px 0;
}

#technology-header p {
	font-size: 2.4rem;
}

.technology-line-break {
	display: inline-block;
}

#technology-main {
	margin-top: 5%;
	margin-bottom: 5%;
}

#technology-main ul {
	list-style-type: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

#technology-main ul li {
	position: relative;
	display: inline-block;
	width: 20%;
	max-width: 250px;
	height: 150px;
}

#technology-main ul li img {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	-webkit-transform: translateY(-50%) translateX(-50%);
 	        transform: translateY(-50%) translateX(-50%);
 	max-width: 160px;
 	max-height: 80px;
}

#mysql-img {
	top: 37% !important;
}
/*---------- End Technology Section ----------*/

/*---------- Start Team Section ----------*/
#team {
	width: 100%;
	background-color: #244c31;
	color: #EFEFEF;
	padding-top: 3%;
}

#team-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 3%;
}

#team-header {
	text-align: center;
}

#team-header h2 {
	font-size: 4.1rem;
	padding: 20px 0 30px 0;
	color: #ED8104;
}

#team-header p {
	font-size: 2.4rem;
}

#team-line-break {
	display: inline-block;
}

#team-main {
	width: 100%;
	margin-top: 3%;
	padding-bottom: 4%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.member {
	width: 25%;
	max-width: 350px;
	text-align: center;
	padding: 40px 15px 20px 15px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

.member img {
	width: 200px;
	max-width: calc(100% - 20px);
	border-radius: 50%;
}

.member h4 {
	margin-top: 20px;
	font-size: 2.4rem;
	font-weight: 400;
	color: #ED8104;
	padding: 2%;
}

.member p {
	font-size: 1.6rem;
	font-weight: 600;
	padding: 2%;
}

.about-button {
	margin-top: 22px;
	padding: 12px 20px;
	font-size: 1.6rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #EFEFEF;
	background-color: transparent;
	border: 1px solid #EFEFEF;
	border-radius: 30px;
	outline: none;
	-webkit-transition: all ease .3s;
	transition: all ease .3s;
}

.about-button:hover {
	background-color: #E1E7E9;
	color: #244C31;
	border: 1px solid transparent;
	-webkit-transform: scale(1.1);
	        transform: scale(1.1);
	cursor: pointer;
}

.about-button:focus {
	outline: none;
	background-color: #E1E7E9;
	color: #244C31;
	border: 1px solid transparent;
	-webkit-transform: scale(1.1);
	        transform: scale(1.1);
}

.about-member {
	position: relative;
}

.about-member-info {
	position: absolute;
	width: 100%;
}

.about-member-info.hidden {
	visibility: hidden;
}

.space {
	display: none;
}

.about-member-info p {
	padding: 40px 0 0 35px;
	text-align: left;
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 2.4rem;
}

.social-icons {
	display: inline-block;
	font-size: 1.8rem;
	color: #EFEFEF;
	width: 25px;
	height: 25px;
	padding: 5px;
	margin: 20px 10px 0 10px;
	border: 1px solid #EFEFEF;
	border-radius: 50%;
	-webkit-transition: all ease .3s;
	transition: all ease .3s;
}

.social-icons:hover {
	background-color: #E1E7E9;
	color: #244C31;
	-webkit-transform: scale(1.15);
	        transform: scale(1.15);
}

.social-icons:focus {
	outline: none;
	background-color: #E1E7E9;
	color: #244C31;
	-webkit-transform: scale(1.15);
	        transform: scale(1.15);
}
/*---------- End Team Section ----------*/

/*---------- Start Contact Section ----------*/
#contact {
	position: relative;
}

#google-map-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

#google-map-container.active {
	z-index: 2;
}

#contact-container {
	position: relative;
	z-index: 1;
	background-color: rgba(197, 205, 208, 0.87);
}

#contact-container.mapToggle {
	visibility: hidden;
}

#contact-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 4% 3%;
}

#contact-header {
	text-align: center;
	margin-bottom: 22px;
}

#contact-header h2 {
	font-size: 4.1rem;
	padding: 20px 0 30px 0;
}

#contact-header p {
	font-size: 2.4rem;
}

#contact-line-break {
	display: inline-block;
}

#contact-main {
	max-width: 800px;
	margin: 5% auto 30px auto;
	font-size: 1.8rem;
}

#contact-main form {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.one-two-contact {
	width: 50%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	padding: 20px;
}

.one-two-contact input {
	width: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	padding: 17px;
	font-size: 1.6rem;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.05rem;
	background-color: #CBDFD6;
	border: 2px solid #3A6168;
	border-radius: 5px;
}

.one-two-contact input:focus {
	outline: none;
	-webkit-box-shadow: 0px 0px 8px 2px rgba(58, 97, 104, 0.6);
	        box-shadow: 0px 0px 8px 2px rgba(58, 97, 104, 0.6);
}

.one-two-contact input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #A6C4B7 inset;
            box-shadow: 0 0 0 30px #A6C4B7 inset;
}

#msg-area {
	width: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	padding: 20px;
}

#msg-area textarea {
	width: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	min-height: 180px;
	padding: 17px;
	font-size: 1.6rem;
	font-family: 'Montserrat', sans-serif;
	background-color: #CBDFD6;
	border: 2px solid #3A6168;
	border-radius: 5px;
}

#msg-area textarea:focus {
	outline: none;
	-webkit-box-shadow: 0px 0px 8px 2px rgba(58, 97, 104, 0.6);
	        box-shadow: 0px 0px 8px 2px rgba(58, 97, 104, 0.6);
}

#msg-button {
	display: block;
	margin: 0 auto;
	margin-top: 10px;
	padding: 10px 20px;
	color: #FFF;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	background-color: rgba(237, 129, 4, 0.8);
	border: 2px solid #ED8104;
	border-radius: 4px;
	cursor: pointer;
	-webkit-transition: all ease .25s;
	transition: all ease .25s;
}

#msg-button:hover {
	color: #ED8104;
	background-color: rgba(252, 153, 5, 0.45);
	-webkit-box-shadow: 0px 0px 3px 2px rgba(237, 129, 4, 0.5);
	        box-shadow: 0px 0px 3px 2px rgba(237, 129, 4, 0.5);
}

#msg-button:focus {
	outline: none;
	color: #ED8104;
	background-color: rgba(252, 153, 5, 0.45);
	-webkit-box-shadow: 0px 0px 3px 2px rgba(237, 129, 4, 0.5);
	        box-shadow: 0px 0px 3px 2px rgba(237, 129, 4, 0.5);
}

#msg-button:active {
	color: #ED8104;
	background-color: rgba(252, 153, 5, 0.8);
	-webkit-box-shadow: 0px 0px 7px 3px rgba(237, 129, 4, 0.9);
	        box-shadow: 0px 0px 7px 3px rgba(237, 129, 4, 0.9);
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

#map-button {
	position: absolute;
	top: 55px;
	right: 0;
	z-index: 2;
	width: 160px;
	padding: 13px 20px;
	color: #FFF;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	background-color: rgba(237, 129, 4, 0.8);
	border: 2px solid #ED8104;
	border-right: 0;
	border-radius: 4px 0 0 4px;
	cursor: pointer;
	-webkit-transition: all ease .25s;
	transition: all ease .25s;
}

#map-button:hover {
	color: #ED8104;
	background-color: rgba(252, 153, 5, 0.45);
	-webkit-box-shadow: 0px 0px 3px 2px rgba(237, 129, 4, 0.5);
	        box-shadow: 0px 0px 3px 2px rgba(237, 129, 4, 0.5);
}

#map-button:focus {
	outline: none;
	background-color: rgba(252, 153, 5, 0.45);
	-webkit-box-shadow: 0px 0px 3px 2px rgba(237, 129, 4, 0.5);
	        box-shadow: 0px 0px 3px 2px rgba(237, 129, 4, 0.5);
}

#map-button:active {
	color: #ED8104;
	background-color: rgba(252, 153, 5, 0.8);
	-webkit-box-shadow: 0px 0px 7px 3px rgba(237, 129, 4, 0.9);
	        box-shadow: 0px 0px 7px 3px rgba(237, 129, 4, 0.9);
	color: #ED8104;
}

.mapScrollOff {
	pointer-events: none;
}
/*---------- End Contact Section ----------*/

/*---------- Start Footer Section ----------*/
#footer {
	width: 100%;
	background-color: #244c31;
	color: #EFEFEF;
}

#footer-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 3%;
	text-align: center;
}

#footer-wrapper h5 {
	padding: 40px 0;
	font-size: 2.6rem;
	color: #ED8104;
}

#footer-contacts {
	width: 100%;
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.contact-details {
	width: 33.333%;
	max-width: 250px;
}

.contact-details p {
	font-size: 1.6rem;
}

.contact-details a {
	text-decoration: none;
	color: #EFEFEF;
}

.contact-details a:hover {
	text-decoration: underline;
	color: #CDCDCD;
}

.contact-details a:focus {
	outline: none;
	text-decoration: underline;
	color: #CDCDCD;
}

.contact-details i {
	margin: 10px 18px;
	font-size: 2.2rem;
	width: 38px;
	height: 38px;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
	background-color: #4A6853;
	border-radius: 50%;
}

.contact-details .fa-envelope {
	font-size: 1.9rem;
}

#social-contacts {
	max-width: 300px;
	margin: 50px auto 30px;
}

#social-contacts ul {
	list-style-type: none;
	font-size: 0;
}

#social-contacts ul li {
	display: inline-block;
	width: 25%;
}

#social-contacts ul li a {
	display: block;
	margin: 0 auto;
	width: 50px;
	height: 50px;
	text-decoration: none;
	text-align: center;
	color: #244C31;
	border-radius: 50%;
	background-color: #E1E7E9;
	-webkit-transition: all ease .3s;
	transition: all ease .3s;
}

#social-contacts ul li a:hover {
	background-color: #ED8104;
	-webkit-transform: scale(1.1);
	        transform: scale(1.1);
}

#social-contacts ul li a:focus {
	outline: none;
	background-color: #ED8104;
	-webkit-transform: scale(1.1);
	        transform: scale(1.1);
}

#social-contacts ul li a i {
	font-size: 2.8rem;
	line-height: 50px;
}

#copyright {
	background-color: #292C2F;
	text-align: center;
}

#copyright p {
	padding: 20px 0;
}

#copyright a {
	color: #ED8104;
	text-decoration: none;
	-webkit-transition: color .25s;
	transition: color .25s;
}

#copyright a:hover {
	color: #FCB605;
	text-decoration: underline;
}

#copyright a:focus {
	outline: none;
	color: #FCB605;
	text-decoration: underline;
}

#footer-space {
	display:inline-block;
	width: 60px;
}
/*---------- End Footer Section ----------*/



/*-------------Media Queries ---------------*/

@media screen and (max-width: 1250px) {
	
	.only-wide {
		display: none;
	}

	.back p {
		padding: 15px;
		padding-top: 0;
	}
}

@media screen and (max-width: 1200px) {
	.about-member-info p {
		padding-left: 20px;
	}
}

@media screen and (max-width: 1100px) {

	nav ul li {
		padding-left: 15px;
		padding-right: 15px;
	}

	.flip-container {
		width: 50%;
	}

	.one-third-offer {
		width: calc(50% - 20px);
	}

	.one-third-offer h3 {
		padding: 10px 0 20px 0;
	}

	#technology-main {
		margin-bottom: 2%;
	}

	#technology-main ul li {
		width: 25%;
	}
}

@media screen and (max-width: 1050px) {

	#portfolio-header p, #offer-header p, #technology-header p, #team-header p, #contact-header p {
		font-size: 2.2rem;
	}

	.about-member-info p {
		padding-left: 10px;
	}
}

@media screen and (max-width: 1000px) {
	.member h4 {
		font-size: 2.2rem;
	}
}

/*--- Hamburger Starts --*/
@media screen and (max-width: 950px) {

	#menu-icon {
		display: inline-block;
	}

	#top-bar-wrapper {
		z-index: 1;
	}

	nav ul {
		display: none;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		padding-top: 79px;
		background-color: rgba(203, 223, 214, 0.96);
		z-index: -1;
	}

	nav ul li {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 100%;
		height: 20%;
		max-height: 110px;
		padding: 0;
	}

	nav ul li a {
		font-size: 2.5rem;
		padding: 15px 30px;
		color: #3A6168;
		border: 2px solid transparent;
	}

	nav ul li a:hover {
		color: #000;
		border: 2px solid #337579;
	}

	#main-nav.showHide {
		display: block;
	}

	#top-bar-wrapper.topbar-hamburger-on {
  		background-color: rgba(203, 223, 214, 0.96);
  		border-bottom: none;
	}

	#top-bar-wrapper.topbar-hamburger-on nav ul li a:focus {
		color: #000;
		border: 2px solid #337579;
	}

	#top-bar-wrapper.topbar-hamburger-on #logo:focus {
		outline: 2px solid #337579;
	}

	#top-bar-wrapper.topbar-hamburger-on #menu-icon:focus {
		outline: 2px solid #337579;
	}

	.portfolio-line-break {
		display: none;
	}

	.member {
		width: 50%;
	}

	.about-member {
		position: static;
		margin-top: 25px;
	}

	.about-member-info {
		position: absolute;
		left: 30px;
		width: calc(100% - 60px);
		border: 1px solid #EFEFEF;
		border-radius: 10px;
	}

	.about-member-info p {
		text-align: justify;
		padding: 25px 25px 5px 25px;
	}

	.social-icons {
		font-size: 2rem;
		width: 30px;
		height: 30px;
		margin: 20px;
	}

	.member h4 {
		margin-top: 15px;
	}
}

@media screen and (max-width: 850px) {

	#heading-text h1 {
		font-size: 8rem;
	}

	#technology-main ul li {
		width: 33.333%;
	}
}

@media screen and (max-width: 750px) {
	
	#portfolio-header h2, #offer-header h2, #technology-header h2, #team-header h2, #contact-header h2 {
		font-size: 3.5rem;
		padding: 20px 0 20px 0;
	}

	#portfolio-header p, #offer-header p, #technology-header p, #team-header p, #contact-header p {
		font-size: 2rem;
	}

	.flip-container {
		width: 100%;
	}

	.one-third-offer {
		width: calc(100% - 20px);
	}

	#map-button {
		top: 30px;
		width: 140px;
		padding: 10px 15px;
		font-size: 1.6rem;
	}
}

@media screen and (max-width: 700px) {

	.one-two-contact {
		width: 100%;
		padding: 12px 20px;
	}

	#msg-area {
		padding: 12px 20px;
	}
}

@media screen and (max-width: 650px) {

	#heading-text h1 {
		font-size: 6.7rem;
	}

	#start-button {
		font-size: 2rem;
		padding: 9px 18px;
	}

	#technology-main ul li {
		width: 50%;
	}
}

@media screen and (max-width: 550px) {

	#heading-text h1 {
		font-size: 5.5rem;
	}

	#start-button {
		font-size: 1.8rem;
		font-weight: 600;
		padding: 9px 16px;
	}

	#portfolio-header p, #technology-header p, #team-header p, #contact-header p {
		font-size: 1.8rem;
	}

	#team-main {
		margin-top: 4%;
	}

	.member {
		padding: 30px 15px 15px 15px;
	}

	.member h4 {
		font-size: 2rem;
	}

	.about-button {
		font-size: 1.5rem;
		letter-spacing: 0.4px;
	}

	.contact-details p {
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 500px) {

	.technology-line-break {
		display: inline;
	}

	#map-button {
		top: 20px;
		width: 90px;
		padding: 7px 10px;
		font-size: 1.5rem;
	}

	.one-two-contact input {
		font-size: 1.5rem;
		padding: 14px;
	}

	#msg-area textarea {
		font-size: 1.5rem;
		padding: 14px;
	}

	#msg-button {
		font-size: 1.7rem;
	}

	#footer-wrapper h5 {
		padding: 30px 0;
	}

	.contact-details {
		width: 100%;
		margin-bottom: 20px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: left;
		    -ms-flex-pack: left;
		        justify-content: left;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}

	.contact-details p {
		text-align: left;
	}

	#social-contacts {
		margin-top: 30px;
	}

	#social-contacts ul li a {
		width: 45px;
		height: 45px;
	}

	#social-contacts ul li a i {
		font-size: 2.5rem;
		line-height: 45px;
	}

	#footer-space {
		width: 40px;
	}

	#copyright p {
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 450px) {

	#heading-text h1 {
		font-size: 4.5rem;
	}

	nav ul li a {
		font-size: 2rem;
		padding: 12px 20px
	}

	#technology-main ul li {
		width: 100%;
	}

	#mysql-img {
		top: 50% !important;
	}

	.member {
		width: 100%;
	}
}

@media screen and (max-width: 400px) {
	
	#portfolio-header h2, #offer-header h2, #technology-header h2, #team-header h2, #contact-header h2 {
		font-size: 3rem;
		padding: 20px 0 15px 0;
	}

	#portfolio-header p, #offer-header p, #technology-header p, #team-header p, #contact-header p {
		font-size: 1.6rem;
	}

	.textOnHover h3 {
		font-size: 2.1rem;
	}

	.textOnHover p {
		font-size: 1.5rem;
	}

	.one-third-offer {
		border: 1px solid #EFEFEF;
	}

	.one-third-offer h3 {
		font-size: 2rem;
	}

	.one-third-offer p {
		font-size: 1.5rem;
	}

	.offer-img-animation {
		height: 80px;
	}

	#at-sign {
		font-size: 5.5rem;
	}

	#cog-small {
		top: 2px;
	    left: 2px;
	    width: 35px;
	}

	#cog-big {
	    width: 50px;
	}

	#cart {
		width: 50px;
	}

	#map-button {
		width: 70px;
		padding: 5px 10px;
		font-weight: 600;
	}

	#footer-wrapper h5 {
		font-size: 2.4rem;
	}

	.contact-details {
		margin-bottom: 12px;
	}

	#social-contacts {
		margin-top: 25px;
	}

	#footer-space {
		width: 20px;
	}
}

@media screen and (max-width: 370px) {

	#heading-text h1 {
		font-size: 3.8rem;
	}

	#start-button {
		font-size: 1.6rem;
	}

	.back h3 {
		font-size: 1.8rem;
		padding: 15px 0 10px 0;
	}

	.back p {
		font-size: 1.5rem;
	}

	.member img {
		width: 180px;
	}

	.about-member-info p {
		font-size: 1.5rem;
	}

	.social-icons {
		margin: 20px 13px;
	}
}

@media screen and (max-width: 350px) {

	.back p {
		font-size: 1.38rem;
		padding: 10px;
		padding-top: 0;
	}

	#social-contacts {
		max-width: 280px;
	}

	#footer-space {
		display: block;
		width: 0;
	}

	#copyright p {
		padding: 15px 0;
		line-height: 1.5;
	}
}

/* This applies to touch devices. It removes sticky hover issue when button is touched on touch devices. 
   Also added 'active' state to indicate the button/link was touched.
   This solution works on Chrome, Safari, Opera and Edge, but is not compatible with Firefox and IE (http://caniuse.com/#feat=css-media-interaction).
   This solution also blocks 'hover' state on hybrid devices (touch & mouse) and disable 'hover' even when user is using mouse at the moment.
   More on sticky hover solutions: http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml
*/
@media (hover:none) {

	#top-bar-wrapper.scrolled nav a:hover {
		color: #3A6168;
		border: 2px solid transparent;
	}

	#top-bar-wrapper.scrolled nav a:active {
		color: #000;
		border: 2px solid #337579;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	}

	nav ul li a:hover {
		color: #000;
		border: 1px solid transparent;
		border-radius: 0;
	}

	nav ul li a:active {
		color: #CBDFD6;
		border: 1px solid #CBDFD6;
		border-radius: 10px;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	}

	#start-button:hover {
		color: #3A6168;
		border: 3px solid #3A6168;
	}

	#start-button:active {
		color: #CBDFD6;
		border: 3px solid #CBDFD6;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	}

	.about-button:hover {
		background-color: transparent;
		color: #EFEFEF;
		border: 1px solid #EFEFEF;
		-webkit-transform: scale(1);
		        transform: scale(1);
		cursor: auto;
	}

	.about-button:active {
		background-color: #E1E7E9;
		color: #244C31;
		border: 1px solid transparent;
		-webkit-transform: scale(1.1);
		        transform: scale(1.1);
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	}

	.social-icons:hover {
		background-color: transparent;
		color: #EFEFEF;
		-webkit-transform: scale(1);
		        transform: scale(1);
	}

	.social-icons:active {
		background-color: #E1E7E9;
		color: #244C31;
		-webkit-transform: scale(1.15);
		        transform: scale(1.15);
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	}

	#msg-button:hover {
		color: #FFF;
		background-color: rgba(237, 129, 4, 0.8);
		-webkit-box-shadow: none;
		        box-shadow: none;
	}

	#msg-button:active {
		color: #ED8104;
		background-color: rgba(252, 153, 5, 0.8);
		-webkit-box-shadow: 0px 0px 7px 3px rgba(237, 129, 4, 0.9);
		        box-shadow: 0px 0px 7px 3px rgba(237, 129, 4, 0.9);
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	}

	#map-button:hover {
		color: #FFF;
		background-color: rgba(237, 129, 4, 0.8);
		-webkit-box-shadow: none;
		        box-shadow: none;
	}

	#map-button:active {
		color: #ED8104;
		background-color: rgba(252, 153, 5, 0.8);
		-webkit-box-shadow: 0px 0px 7px 3px rgba(237, 129, 4, 0.9);
		        box-shadow: 0px 0px 7px 3px rgba(237, 129, 4, 0.9);
		color: #ED8104;
	}

	.contact-details a:hover {
		text-decoration: none;
		color: #EFEFEF;
	}

	.contact-details a:active {
		text-decoration: underline;
		color: #CDCDCD;
		font-weight: 700;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	}

	#social-contacts ul li a:hover {
		background-color: #E1E7E9;
		-webkit-transform: scale(1);
		        transform: scale(1);
	}

	#social-contacts ul li a:active {
		background-color: #ED8104;
		-webkit-transform: scale(1.1);
		        transform: scale(1.1);
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	}

	#copyright a:hover {
		color: #ED8104;
		text-decoration: none;
	}

	#copyright a:active {
		color: #FCB605;
		text-decoration: underline;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	}
}