/*
====================================================
* [Master Stylesheet]

  Template Name : WazzTech 
  Version    :  1.0 
  Author     :  Codetic
  Author URI :  http://wazztech.com
====================================================

   TOC:
  =======
  0. Webfonts and Icon fonts Import

  1. Primary Styles
      a. Color Schemes for Homepage
      b. Fun Facts Styles
      c. Footer Styles

  2. Preloader Styles

  3. Main Components

  4. Profile Section
      a. Services Styles

  5. Resume Section
      a. Skills Styles
      b. Recognition Styles

  6. Portfolio Section
      a. Testimonials Styles

  7. Contact Section
      a. Social and Map Styles

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


/* --------------------------------- */
/* 0. Webfonts and Icon fonts
 ----------------------------------- */

@import url("https://fonts.googleapis.com/css?family=PT+Sans:400,700|Merriweather:400italic,400");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");


/* -------------------------------- 
1. Primary style
-------------------------------- */

*,::after,::before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box
}

html {
  font-size:62.5%;
}

body {
  background:#101524;
  font-size:1.6rem;
  font-family:"PT Sans",sans-serif;
  color:#fff
}

a {
  color:#9e1c51;
  text-decoration:none
}

a:hover, a:active, a:focus {
  outline: none;
}

h1,h2,h3,h4,h5,h6 {
  font-family:"Merriweather",serif
}

h1 {
  font-size:2em;
  margin:.67em 0
}

h2 {
  font-size:1.5em;
  margin:.75em 0
}

h3 {
  font-size:1.17em;
  margin:.83em 0
}

h5 {
  font-size:.83em;
  margin:1.5em 0
}

h6 {
  font-size:.75em;
  margin:1.67em 0
}

ul li {
  list-style: none;
}

.btn {
  position:relative;
  overflow:hidden;
  display:inline-block;
  vertical-align:top;
  color:#34a1c4;
  text-decoration:none;
  font-weight:700;
  border:2px solid #34a1c4;
  padding:1em 5em;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  -ms-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s
}

.btn:hover {
  background:#34a1c4;
  color:#fff;
  padding:1em 5em
}

.btn:after {
  position:absolute;
  content:'\f18e';
  font-family:'FontAwesome';
  font-weight:400;
  right:-3em;
  transition: .4s;
  color:#fff
}

.btn:hover:after {
  right:2em
}


.menu-desc {
  opacity:0!important;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s
}

.single-page:hover .menu-desc {
  opacity:1!important
}

.page-title span {
  display:block
}

.page-title span i {
  background:none repeat scroll 0 0 rgba(255,255,255,0.1);
  border-radius:50%;
  box-shadow:0 0 0 30px transparent;
  display:inline-block;
  font-size:2.5em;
  padding:.5em;
  height:2em;
  line-height:1em;
  text-align:center;
  width:2em;
  margin:15px auto;
  display:block;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s
}

.single-page:hover .page-title span i {
  box-shadow:0 0 0 0 rgba(255,255,255,0.1);
  -webkit-transition: box-shadow .4s ease-in-out;
  -moz-transition: box-shadow .4s ease-in-out;
  -o-transition: box-shadow .4s ease-in-out;
  -ms-transition: box-shadow .4s ease-in-out;
  transition: box-shadow .4s ease-in-out
}


/* ------------------------------------------------
/*  1.a. Color Schemes for Home Page backgrounds 
/*  Choose one and comment/remove other two
/* ------------------------------------------------*/


/* Olive Scheme  
----------------------------------*/

.single-page:nth-child(1) {
  background: #191D21;
}

.single-page:nth-child(2) {
  background: #1F2628;
}

.single-page:nth-child(3) {
  background:  #273336;
}

.single-page:nth-child(4) {
  background: #273a3f;
}



/* Colorful Scheme
----------------------------------*/

/*.single-page:nth-child(1) {
  background:#FF6F6F
}

.single-page:nth-child(2) {
  background:#0ED4C8
}

.single-page:nth-child(3) {
  background:#6bd57e
}

.single-page:nth-child(4) {
  background:#FE7C60
}
*/


/* Dark Scheme 
----------------------------------*/

/*.single-page:nth-child(1) {
  background:#14151B
}

.single-page:nth-child(2) {
  background:#1A1B23
}

.single-page:nth-child(3) {
  background:#20212B
}

.single-page:nth-child(4) {
  background:#252733
}
*/


/* -------------------------------- 
    1.b. Fun Facts Styles
-------------------------------- */

.fun-facts {
  background:url("../img/fun-bg.jpg") no-repeat scroll center center rgba(0,0,0,0);
  overflow:hidden;
  padding:20px
}

.fun-facts ul {
  width:80%;
  display:block;
  margin:0 auto;
  padding: 0;
}

.fun-facts ul li {
  border-right: 2px solid #fff;
  color: #fff;
  display: inline-block;
  float: left;
  margin: 30px auto;
  padding: 5px 0;
  text-align: center;
  width: 20%;
}

.fun-facts ul li:last-child {
  border-right:2px transparent
}

.fun-facts h3 {
  font-family:"Merriweather",serif;
  font-size:40px;
  letter-spacing:1px;
  margin:10px;
  padding:5px
}

.fun-facts h3 i {
  font-size:40px
}

.fun-facts h5 {
  font-family:pt sans;
  font-size:13px;
  letter-spacing:1px;
  margin:5px;
  padding:10px;
  text-transform: uppercase
}


/* -------------------------------- 
    1.c. Footer Styles
-------------------------------- */

.footer {
  background:none repeat scroll 0 0 #ebebeb;
  display:block;
  min-height:60px;
  padding:20px 50px;
}

.footer a {
  color:#3f3f46;
  font-size:13px;
  font-weight:700;
  padding-right:40px;
  position:relative;
  text-decoration:none;
  text-transform: uppercase
}

.footer a:after {
  background:none repeat scroll 0 0 #3f3f46;
  content:"";
  height:10px;
  margin:-5px 0 0;
  position:absolute;
  right:0;
  top:50%;
  width:1px
}

.footer span {
  color:#b1b1b1;
  font-size:12px;
  font-weight:400;
  margin-left:40px
}


/* ------------------------------------------- */
/* 2. Preloader CSS */ 
/* ------------------------------------------- */

#preloader{
  background-color:#101524; 
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:9999;  
}

.loader {
  background: url("../img/svg-loaders/puff.svg") no-repeat scroll center center rgba(0, 0, 0, 0);
  height: 50px;
  width: 50px;
  position: absolute;
  left: calc(50% - 25px);
  top: calc(50% - 25px);

}



/* -------------------------------- 
/*   3. Main Components 
-------------------------------- */

.page-container {
  height:100vh;
  width:100vw;
  position:relative;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch
}

.page-container::before {
/* never visible - this is used in jQuery to check the current MQ */
  content:'mobile';
  display:none
}

.page-container .single-page {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:25%;
  overflow:hidden;
  cursor:pointer;
  -webkit-transition: -webkit-transform .4s;
  -moz-transition: -moz-transform .4s;
  -ms-transition: -moz-transform .4s;
  -o-transition: -moz-transform .4s;
  transition: transform .4s;
/* on mobile -  move items outside the viewport */
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%)
}

.page-container .single-page::after {
/* background image */
  content:'';
  position:absolute;
  top:0;
  left:0;
  height:25vh;
  width:100%;
  background-image:url("../img/img-1-small.jpg");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  -webkit-transition: opacity 0.5s,height .4s;
  -moz-transition: opacity 0.5s,height .4s;
  -ms-transition: opacity 0.5s,height .4s;
  -o-transition: opacity 0.5s,height .4s;
  transition: opacity 0.5s,height .4s
}

.page-container .single-page::before {
/* never visible - this is used in jQuery to detect if the background image has been loaded  */
  content:'img/img-1-small.jpg';
  display:none
}

.page-container .single-page:nth-of-type(2) {
  top:25vh
}

.page-container .single-page:nth-of-type(2)::after {
  background-image:url("../img/img-2-small.jpg")
}

.page-container .single-page:nth-of-type(2)::before {
  content:'img/img-2-small.jpg'
}

.page-container .single-page:nth-of-type(3) {
  top:50vh
}

.page-container .single-page:nth-of-type(3)::after {
  background-image:url("../img/img-3-small.jpg")
}

.page-container .single-page:nth-of-type(3)::before {
  content:'img/img-3-small.jpg'
}

.page-container .single-page:nth-of-type(4) {
  top:75vh
}

.page-container .single-page:nth-of-type(4)::after {
  background-image:url("../img/img-4-small.jpg")
}

.page-container .single-page:nth-of-type(4)::before {
  content:'img/img-4-small.jpg'
}

.page-container .single-page.is-loaded {
/* move items in the viewport when background images have been loaded */
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0)
}

.page-container .single-page.is-full-width {
  /* selected item */
  top: 0;
  height: auto;
  z-index: 1;
  cursor: auto;
  -webkit-transition: z-index 0s 0s, top 0.4s 0s;
  -moz-transition: z-index 0s 0s, top 0.4s 0s;
  -ms-transition: z-index 0s 0s, top 0.4s 0s;
  -o-transition: z-index 0s 0s, top 0.4s 0s;
  transition: z-index 0s 0s, top 0.4s 0s;
}

.page-container .single-page.is-full-width::after {
  height:100vh;
}


.page-title {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 12.5vh;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}


.is-full-width .page-title {
  top: 50vh;
  -webkit-transition: opacity 0s, top 0.4s;
  -moz-transition: opacity 0s, top 0.4s;
  -ms-transition: opacity 0s, top 0.4s;
  -o-transition: opacity 0s, top 0.4s;
  transition: opacity 0s, top 0.4s;
}

.page-title > * {
  text-shadow:0 1px 4px rgba(0,0,0,0.2);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

.page-title h2 {
  font-family: "PT Sans",sans-serif;
  font-size: 2.25em;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.5em;
  margin: 20px auto 5px;
  text-transform: uppercase;
}

.page-title p {
  font-size:1.4rem;
  font-family:"Merriweather",serif;
  font-style:italic;
  line-height:1.2;
  padding:.5em 2em;
  display:block;
  opacity:.6
}

.page-info {
  position:relative;
  z-index:1;
  clear:both;
  visibility:hidden;
  opacity:0;
  margin-top:100vh;
  cursor:auto;
  background-color:#fff;
  color:#3f538e;
  -webkit-transition: opacity 0.4s 0s, visibility 0s 0.4s;
  -moz-transition: opacity 0.4s 0s, visibility 0s 0.4s;
  -ms-transition: opacity 0.4s 0s, visibility 0s 0.4s;
  -o-transition: opacity 0.4s 0s, visibility 0s 0.4s;
  transition: opacity 0.4s 0s, visibility 0s 0.4s;
}

.is-full-width .page-info {
  visibility:visible;
  opacity:1
}

.page-container .page-close, .page-container .page-scroll {
  display:block;
  z-index:1;
  width:44px;
  height:44px;
/* image replacement */
  overflow:hidden;
  text-indent:100%;
  white-space:nowrap;
  visibility:hidden;
  -webkit-transition:  -webkit-transform 1s 0s, visibility 0s 1s;
  -moz-transition:  -moz-transform 1s 0s, visibility 0s 1s;
  -ms-transition:  -moz-transform 1s 0s, visibility 0s 1s;
  -o-transition:  -moz-transform 1s 0s, visibility 0s 1s;
  transition:  transform 1s 0s, visibility 0s 1s;
}

.page-container .page-close {
  position:fixed;
  top:30px;
  right:5%;
  background:url("../img/icons/icon-close-mobile.svg") no-repeat center center;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0)
}

.page-container .page-scroll {
  position:absolute;
  bottom:30px;
  left:50%;
  -webkit-transform: translateX(-50%) scale(0);
  -moz-transform: translateX(-50%) scale(0);
  -ms-transform: translateX(-50%) scale(0);
  -o-transform: translateX(-50%) scale(0);
  transform: translateX(-50%) scale(0);
  background:url("../img/icons/icon-arrow-mobile.svg") no-repeat center center
}

.project-is-open .page-close,.project-is-open .page-scroll {
  visibility:visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.4s 0s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.4s 0s, visibility 0s 0s;
  -ms-transition: -moz-transform 0.4s 0s, visibility 0s 0s;
  -o-transition: -moz-transform 0.4s 0s, visibility 0s 0s;
  transition: transform 0.4s 0s, visibility 0s 0s;
}

.project-is-open .page-scroll {
  -webkit-transform: translateX(-50%) scale(1);
  -moz-transform: translateX(-50%) scale(1);
  -ms-transform: translateX(-50%) scale(1);
  -o-transform: translateX(-50%) scale(1);
  transform: translateX(-50%) scale(1);
  -webkit-animation:cd-translate 1.2s .4s;
  -moz-animation:cd-translate 1.2s .4s;
  animation:cd-translate 1.2s .4s;
  -webkit-animation-iteration-count:2;
  -moz-animation-iteration-count:2;
  animation-iteration-count:2
}

.no-touch .project-is-open .page-close:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2)
}

.no-touch .project-is-open .page-scroll:hover {
  -webkit-transform: translateX(-50%) scale(1.2);
  -moz-transform: translateX(-50%) scale(1.2);
  -ms-transform: translateX(-50%) scale(1.2);
  -o-transform: translateX(-50%) scale(1.2);
  transform: translateX(-50%) scale(1.2)
}

@-webkit-keyframes cd-translate {
0% {
  -webkit-transform: translateX(-50%) scale(1)
}

50% {
  -webkit-transform: translateY(10px) translateX(-50%) scale(1)
}

100% {
  -webkit-transform: translateX(-50%) scale(1)
}
}

@-moz-keyframes cd-translate {
0% {
  -moz-transform: translateX(-50%) scale(1)
}

50% {
  -moz-transform: translateY(10px) translateX(-50%) scale(1)
}

100% {
  -moz-transform: translateX(-50%) scale(1)
}
}

@keyframes cd-translate {
0% {
  -webkit-transform: translateX(-50%) scale(1);
  -moz-transform: translateX(-50%) scale(1);
  -ms-transform: translateX(-50%) scale(1);
  -o-transform: translateX(-50%) scale(1);
  transform: translateX(-50%) scale(1)
}

50% {
  -webkit-transform: translateY(10px) translateX(-50%) scale(1);
  -moz-transform: translateY(10px) translateX(-50%) scale(1);
  -ms-transform: translateY(10px) translateX(-50%) scale(1);
  -o-transform: translateY(10px) translateX(-50%) scale(1);
  transform: translateY(10px) translateX(-50%) scale(1)
}

100% {
  -webkit-transform: translateX(-50%) scale(1);
  -moz-transform: translateX(-50%) scale(1);
  -ms-transform: translateX(-50%) scale(1);
  -o-transform: translateX(-50%) scale(1);
  transform: translateX(-50%) scale(1)
}
}


/* Screens Resolution : 768px+
--------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {


.page-container .single-page {
  width:25vw;
  height:100%;
  opacity:0;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: width 0s;
  -moz-transition: width 0s;
  transition: width 0s;
}


.page-container .single-page:first-of-type::before {
  content:'img/img-1-large.jpg';
}

.page-container .single-page:first-of-type::after {
  background-image:url("../img/img-1-large.jpg")
}

.page-container .single-page:nth-of-type(2) {
  top:0;
  left:25vw;
}

.page-container .single-page:nth-of-type(2)::before {
  content:'img/img-2-large.jpg';
}

.page-container .single-page:nth-of-type(2)::after {
  background-image:url("../img/img-2-large.jpg")
}

.page-container .single-page:nth-of-type(3) {
  top:0;
  left:50vw;
}

.page-container .single-page:nth-of-type(3)::before {
  content:'img/img-3-large.jpg';
}

.page-container .single-page:nth-of-type(3)::after {
  background-image:url("../img/img-3-large.jpg")
}

.page-container .single-page:nth-of-type(4) {
  top:0;
  left:75vw
}

.page-container .single-page:nth-of-type(4)::before {
  content:'img/img-4-large.jpg'
}

.page-container .single-page:nth-of-type(4)::after {
  background-image:url("../img/img-4-large.jpg")
}

.page-container .single-page::after {
  height:100vh;
  width:100%;
  opacity:0
}

.page-container .single-page.is-loaded {
/* show items when background images have been loaded */
  opacity:1
}

.page-container .single-page.is-loaded::after {
  opacity:1
}

.page-container .single-page.is-full-width {
/* selected item */
  left:0;
  width:100vw;
  -webkit-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s;
  -moz-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s;
  -ms-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s;
  -mo-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s;
  transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s;
}

.page-title {
  position:absolute;
  z-index:1;
  left:0;
  top:50vh;
  width:25vw;
  opacity:0;
  text-align:center;
  -webkit-transform: translateY(-50%) translateX(-20px);
  -moz-transform: translateY(-50%) translateX(-20px);
  -ms-transform: translateY(-50%) translateX(-20px);
  -o-transform: translateY(-50%) translateX(-20px);
  transform: translateY(-50%) translateX(-20px)
}

.page-title h2 {
  font-family: "PT Sans",sans-serif;
  font-size: 2.25em;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.5em;
  margin: 20px auto 5px;
  text-transform: uppercase;
}

.page-title p {
  font-size:1.4rem;
  font-family:"Merriweather",serif;
  font-style:italic;
  line-height:1.2;
  padding:.5em 2em;
  display:block;
  opacity:.6
}


.is-loaded .page-title {
  opacity:1;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: -webkit-transform 0.6s,opacity 0.6s,left .4s;
  -moz-transition: -moz-transform 0.6s,opacity 0.6s,left .4s;
  transition: transform 0.6s,opacity 0.6s,left .4s
}

.is-loaded.is-full-width .page-title {
  left:37.5vw;
  -webkit-transition: -webkit-transform 0.6s,opacity 0s,left .4s;
  -moz-transition: -moz-transform 0.6s,opacity 0s,left .4s;
  transition: transform 0.6s,opacity 0s,left .4s
}



} /* min-width:768 end */ 


/* ---------------------------------------------
/* 4. Profile Styles
/* --------------------------------------------- */

.about-me {
  background: none repeat scroll 0 0 #f2f2f2;
  padding: 0;
  position: relative;
}

.about-me .profile-image {
  min-height: 550px;
  padding: 40px 30px;
}
.pp-container {
  display: block;
  margin-bottom: 5px;
  padding: 10px;
  width: 150px;
}

.about-me .profile-image img {
  border: 5px solid #E8E8E8;
  border-radius: 100%;
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
  height: auto;
  margin: 15px auto;
  position: relative;
  width: 100%;
  z-index: 2;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;
}

.about-me .profile-image img:hover {
  box-shadow: 0 0 0 12px rgba(0, 0, 0, 0.1);
}


.about-me .profile-image h2 {
  color: #50626C;
  font-family:"PT Sans",sans-serif;
  font-size: 72px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 0.8em;
  margin-bottom: 0;
  margin-top: 0;
  text-align: left;
  text-transform: uppercase;
}

.about-me .profile-image h2 span {
  display: block;
}


.about-me .profile-image h3 {
  color: #4c4c50;
  display: block;
  font-family: "Merriweather";
  font-size: 16px;
  line-height: 1.8em;
  margin-top: 10px;
  padding-top: 10px;
  position: relative;
  text-align: left;
}

.about-me .profile-image h3:before {
  background: none repeat scroll 0 0 #4c4c50;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: 0;
  width: 110px;
}

.about-me .bio {
  background: url("../img/bg-4.jpg") no-repeat scroll center center / cover  rgba(0, 0, 0, 0);
  display:block;
  min-height:550px;
  margin:0 auto;
  position:relative;
  z-index:2;
}

.about-me .bio-inner {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.65);
  height: 100%;
  left: 0;
  padding: 50px 30px;
  position: absolute;
  top: 0;
  width: 100%;
}


.about-me .bio h3 {
  color: #3f3f46;
  font-family: PT Sans;
  font-size: 20px;
  line-height: 28px;
  text-transform:  uppercase;
}


.about-me .bio p {
  color:#555;
  font-size:16px;
  letter-spacing:.5px;
  line-height:22px
}

.about-me .bio .buttons {
  margin:30px auto;
}

.hire-me.btn, .download-resume.btn {
  background: none repeat scroll 0 0 #50626C;
  border-color: #50626C;
  border-radius: 0;
  color: #ffffff;
  font-size: 13px;
  margin: 15px auto 5px;
  padding: 15px 50px;
  text-transform: uppercase;
}

.hire-me.btn:hover,.download-resume.btn:hover {
  background:#FFFFFF;
  text-transform: uppercase;
  color:#50626C;
  border-color:#50626C;
}

.hire-me.btn:after {
  content:'\f1d8';
  color: #50626C;
}

.download-resume.btn:after {
  content:'\f1c1';
  color: #50626C;
}


/* ----------------------------------------------------
/* 4.a. Services styles
/* ---------------------------------------------------- */

.services {
  background: none repeat scroll 0 0 #ff6f6f;
  padding: 35px 0 50px;
  position: relative;
}

.services .sec-divider {
  background:url("../img/icons/services-icon.svg") no-repeat scroll center center rgba(0,0,0,0);
  display:block;
  height:52px;
  margin:30px auto 0;
  width:52px
}

.services .section-title {
  color: #fff;
  font-family: "Merriweather",serif;
  font-size: 24px;
  font-style: italic;
  margin: 5px auto;
  padding: 20px;
  position: relative;
  text-align: center;
}

.service-list {
  display: block;
  margin: 0 auto;
  padding: 10px 50px;
  position: relative;
}

.service-list .service {
  display:inline-block;
  text-align:center;
  margin:15px auto
}

.service-list .service h3 {
  color:#fff;
  font-family:"PT Sans",sans-serif;
  font-size:16px;
  font-weight:700;
  margin:15px auto;
  text-align:center;
  text-transform: uppercase
}

.service-list .service p {
  color:#f9f9f9;
  font-family:PT Sans;
  font-size:14px;
  line-height:24px;
  padding:5px 10px
}

.service-list .service span i {
  background: none repeat scroll 0 0 #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.15);
  color: #ff6f6f;
  display: block;
  font-size: 36px;
  height: 60px;
  line-height: 60px;
  margin: 25px auto;
  text-align: center;
  width: 60px;
  cursor: pointer;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

.service-list .service span i:hover {
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.15);
}


/* ----------------------------------------------------
/* 5. Resume Styles
/* ---------------------------------------------------- */

.resume {
  background: none repeat scroll 0 0 #f2f2f2;
  overflow: hidden;
  padding: 35px 0 50px;
  position: relative;
}

.resume .sec-divider {
  background:url("../img/icons/grad-cap.svg") no-repeat scroll center center rgba(0,0,0,0);
  display:block;
  height:52px;
  margin:40px auto 20px;
  width:52px
}

.resume .education ul, .resume .employment ul {
  margin: 0;
  padding: 0;
}

.resume .education {
  text-align:right;
  padding-right:50px
}

.resume .employment {
  text-align:left;
  position:relative;
  padding-left:50px
}

.resume .education h2,.resume .employment h2 {
  color:#3f3f46;
  font-size:18px;
  letter-spacing:1px;
  padding:36px 0;
  text-transform: uppercase
}

.education ul li {
  display:block;
  margin:20px 0
}

.employment ul li {
  display:block;
  margin:20px 0
}

.education ul li h3,.employment ul li h3 {
  color:#636368;
  font-family:"PT Sans",sans-serif;
  font-size:18px;
  font-weight:700;
  margin:5px 0;
  padding:5px 0;
  text-transform: uppercase
}

.education ul li h4,.employment ul li h4 {
  color:#3f3f46;
  font-family:"Merriweather",sans-serif;
  font-size:14px;
  padding:5px 0
}

.education ul li span,.employment ul li span {
  color:#0ed4c8;
  display:inline-block;
  margin:5px 0 10px;
  font-size:13px
}

.education ul li p,.employment ul li p {
  color:#838c95;
  font-size:14px;
  line-height:24px;
  padding:5px 0
}

.education ul li p {
  padding-left:150px
}

.employment ul li p {
  padding-right:150px
}

/* ------------------------------------------------
/*  5.a. Skills Styles
/* ------------------------------------------------*/

.skills {
  background: none repeat scroll 0 0 #0ed4c8;
  overflow: hidden;
  padding: 35px 0;
  position: relative;
}

.skills .sec-divider {
  background:url("../img/icons/ninja.svg") no-repeat scroll center center rgba(0,0,0,0);
  display:block;
  height:52px;
  margin:30px auto 0;
  width:52px
}

.skills .section-title {
  color:#fff;
  font-family:"Merriweather",serif;
  font-size:24px;
  font-style:italic;
  margin:5px auto;
  padding:20px;
  text-align:center
}

.skills figure {
  margin:0 0 20px;
  text-align:center
}

.skill-container .skill figcaption {
  font-family:"PT Sans",sans-serif;
  font-size:14px;
  font-weight:700;
  padding:5px;
  text-transform: uppercase
}

.skill-container {
  display:block;
  margin:30px auto;
}

.skill-container .skill {
  color: #fff;
  margin-bottom: 20px;
}

/* --------------------------------------------
/* 5.b. Recognition Styles
/* -------------------------------------------- */

.recognition {
  background:#f9f9f9;
  min-height:500px
}

.recognition .rec-inner {
  background:none repeat scroll 0 0 rgba(0,0,0,0.7);
  color:#fff;
  height:100%;
  left:0;
  padding:100px;
  position:absolute;
  top:0;
  width:100%
}

.recognition .rec-desc {
  background:url("../img/bg-2.jpg") no-repeat scroll center center / cover rgba(0,0,0,0);
  min-height:500px;
  position:relative;
}

.recognition .rec-desc h2 {
  color:#fff;
  font-size:32px;
  font-weight:700;
  text-transform: uppercase
}

.recognition .rec-desc p {
  color:#fff;
  font-size:14px;
  line-height:20px
}

.recognition .rec-list {
  min-height: 500px;
  padding: 30px 30px 0;
}

.recognition .rec-list ul {
  margin: 0;
  padding: 0;
}

.recognition .rec-list ul li {
  height:100px;
  margin:5px 0
}

.recognition .rec-list ul li span {
  color:#0ed4c8;
  font-size:4em
}

.recognition .rec-list ul li h3 {
  color:#636368;
  font-family:"PT Sans",sans-serif;
  font-size:18px;
  font-weight:700;
  margin:8px 0;
  padding:5px;
  text-transform: uppercase
}

.recognition .rec-list ul li h4 {
  color:#838c95;
  font-family:"Merriweather",sans-serif;
  font-size:12px;
  margin:10px 0
}

.recognition .rec-list ul li h5 {
  color:#0ed4c8;
  font-family:"Merriweather",sans-serif;
  font-size:13px;
  margin:5px 0
}

/* ----------------------------------------------------
/* 6. Portfolio Styles
/* ---------------------------------------------------- */

.controls {
  padding:2%;
  margin:0 auto;
  text-align:center
}

button.filter {
  background: #f3f3f3;
  border:0 none;
  color:#777;
  cursor:pointer;
  display:inline-block;
  font-size:13px;
  font-weight:300;
  padding: 10px 20px;
  margin: 5px auto;
  text-transform: uppercase;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s
}

button.filter.active {
  background :#3f3f46;
  color: #fff;

}

button.filter:focus {
  outline:0 none;
}

button.filter:hover {
  background: #404148;
  color:#fff;
}

button.filter + label {
  margin-left:1em
}

.portfolio-container {
  background: none repeat scroll 0 0 #f9f9f9;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  padding: 50px;
  width: 100%;
}

.portfolio-items {
  margin: 0 auto;
  padding: 0;
}

.portfolio-items .mix {
  height: auto;
  margin-bottom: 30px;
  max-height: 360px;
  position: relative;
  display: none;
}


.white-popup {
  background:none repeat scroll 0 0 #fff;
  color:#333;
  margin:0 auto;
  max-width:550px;
  padding-bottom:20px;
  position:relative;
  width:auto
}

.white-popup img {
  margin:0 auto;
  display:block;
  width:100%
}

.project-title {
  color:#404148;
  font-size:18px;
  margin:35px 20px 10px;
  text-transform: uppercase
}

.project-desc {
  color:#777;
  font-size:15px;
  letter-spacing:.5px;
  line-height:20px;
  margin:20px
}

.project-url.btn {
  border-color:#3f3f46;
  color:#3f3f46;
  display:block;
  margin:30px auto 10px;
  max-width:225px;
  padding:10px;
  border-radius: 0;
  text-align:center;
  text-transform: uppercase
}

.project-url.btn:hover {
  background:#3f3f46;
  text-transform: uppercase;
  color:#fff;
  border-color:#3f3f46;
}


.mfp-close-btn-in .mfp-close {
  background: #3f3f46;
  color: #fff;
}


/* Common figure style */
 .portfolio-items figure {
  position: relative;
  overflow: hidden;
  min-width: 320px;
  max-width: 480px;
  max-height: 360px;
  text-align: center;
  cursor: pointer;
}

 .portfolio-items figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}

 .portfolio-items figure figcaption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

 .portfolio-items figure figcaption::before,
 .portfolio-items figure figcaption::after {
  pointer-events: none;
}

 .portfolio-items figure figcaption,
 .portfolio-items figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Anchor will cover the whole item by default */

 .portfolio-items figure figcaption > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

 .portfolio-items figure h2 {
  word-spacing: -0.15em;
  font-weight: 300;
}

 .portfolio-items figure h2 span {
  font-weight: 800;
}

 .portfolio-items figure h2,
 .portfolio-items figure p {
  margin: 0;
}

.portfolio-items figure p {
  font-size: 14px;
  letter-spacing: 0.5px;
}


/* Individual effects */


/*---------------*/
/***** Roxy *****/
/*---------------*/

.portfolio-items figure.effect-roxy {
  background: -webkit-linear-gradient(45deg, #3f3f46 0%, #05abe0 100%);
  background: linear-gradient(45deg, #3f3f46 0%,#05abe0 100%);
  border: 10px solid #fff;
}

.portfolio-items figure.effect-roxy img {
  max-width: none;
  width: -webkit-calc(100% + 60px);
  width: calc(100% + 60px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-50px,0,0);
  transform: translate3d(-50px,0,0);
}

.portfolio-items figure.effect-roxy figcaption::before {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  border: 1px solid #fff;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-20px,0,0);
  transform: translate3d(-20px,0,0);
}

.portfolio-items figure.effect-roxy figcaption {
  padding: 1.5em;
  text-align: left;
}

.portfolio-items figure.effect-roxy h2 {
  padding: 20% 0 10px 5px;
   font-size:14px !Important;
  /*font-size:1em;*/
}
.portfolio-items figure.effect-roxy p
{
	font-size:12px !Important;
}
.portfolio-items figure.effect-roxy p {
  padding-left: 5px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
}

.portfolio-items figure.effect-roxy:hover img {
  opacity: 0.4;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.portfolio-items figure.effect-roxy:hover figcaption::before,
.portfolio-items figure.effect-roxy:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}



/* ----------------------------------------------------
/* 6.a. Testimonials Styles
/* ---------------------------------------------------- */

.testimonials {
  background: none repeat scroll 0 0 #f2f2f2;
  display: block !important;
  min-height: 200px;
  min-width: 100vw;
  overflow: hidden;
  padding: 50px 0;
  position: relative;
  width: 100%;
}

.over-div {
  background:none repeat scroll 0 0 rgba(0,0,0,0.04);
  bottom:0;
  position:absolute;
  right:0;
  top:0;
  width:50%
}

.testimonials .sec-divider {
  background:url("../img/icons/smile.svg") no-repeat scroll center center rgba(0,0,0,0);
  display:block;
  height:50px;
  margin:40px auto 20px;
  width:50px
}

.testimonials .section-title {
  color: #3f3f46;
  font-family: "Merriweather",serif;
  font-size: 24px;
  font-style: italic;
  margin: 10px auto;
  padding: 10px;
  text-align: center;
}

.testimonials .text-container {
  padding-top:10px;
  padding-bottom:50px
}

.testimonials h1 {
  font:18px/24px Merriweather,sans-serif;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing:3px;
  color:#95a3a3;
  text-align:center;
  padding:50px 0 30px
}

.testimonials h1 span {
  display:block
}

.testimonials .header-col {
  padding-top:9px
}

/*  Blockquotes */
.testimonials blockquote {
  margin:0 0 30px;
  position:relative;
  border: none;
}

.testimonials blockquote:before {
  content:none
}

.testimonials blockquote p {
  color:#3f3f46;
  display:block;
  font-size:16px;
  font-style:italic;
  line-height:28px;
  margin:0 auto;
  max-width:800px;
  padding:0;
  text-align:center
}

.testimonials blockquote cite {
  display:block;
  font-size:12px;
  text-align:center;
  font-style:normal;
  line-height:18px;
  color:#3f3f46;
}

.testimonials blockquote cite:before {
  content:"\2014 \0020"
}


.testimonials blockquote p:before {
  color: #3f3f46;
  content: "\f10d";
  font-family: "FontAwesome";
  font-size: 20px;
  margin-left: -20px;
  margin-top: -5px;
  opacity: 0.4;
  position: absolute;
}


.testimonials blockquote p:after {
  color: #3f3f46;
  content: "\f10e";
  font-family: "FontAwesome";
  font-size: 20px;
  margin-left: 1px;
  margin-top: 5px;
  opacity: 0.4;
  position: absolute;
}


.testimonials blockquote cite a,.testimonials blockquote cite a:visited {
  color:#8B9798;
  border:none
}

.owl-theme .owl-controls .owl-page span {
  background:none repeat scroll 0 0 #3f3f46!important
}

.clients {
  display:block;
  width:100%;
  margin:0 auto
}

.clients ul li {
  float:left;
  display:inline-block;
  margin:10px
}


/* ----------------------------------------------------
/*  7. Contact Styles
/* ---------------------------------------------------- */

.contact {
  background: none repeat scroll 0 0 #f2f2f2;
  overflow: hidden;
  padding: 35px 0 0;
  position: relative;
}


.contact .sec-divider {
  background:url("../img/icons/mail-icon.svg") no-repeat scroll center center rgba(0,0,0,0);
  display:block;
  height:50px;
  margin:40px auto 20px;
  width:50px
}

.contact .section-title {
  color: #3f3f46;
  font-family: "Merriweather",serif;
  font-size: 24px;
  font-style: italic;
  margin: 10px auto;
  padding: 20px;
  text-align: center;
}

.form-container {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
  margin-bottom: 70px;
  padding: 40px;
  position: relative;
}

.form-container input{
  background:none repeat scroll 0 0 transparent;
  border:1px solid #d9d9da;
  color:#3f3f46;
  float:left;
  font-size:14px;
  margin:15px auto;
  padding:20px;
  width:48%
}

.inf_field_Phone1{
    width: 100% !important;
}

.intl-tel-input{
    width: 48%;
    float: right;
}

.form-container select{
  background:none repeat scroll 0 0 transparent;
  border:1px solid #d9d9da;
  color:#3f3f46;
  float:left;
  font-size:14px;
  margin:15px auto;
  padding:20px;
  width:48%;
  overflow: hidden !important;
}

.form-container input:focus,.form-container textarea:focus {
  background:#F4F4F4
}

.form-container textarea {
  background:none repeat scroll 0 0 transparent;
  border:1px solid #d9d9da;
  color:#3f3f46;
  font-size:16px;
  margin:15px auto;
  padding:20px;
  width:100%
}

.form-container button {
  background:transparent;
  width:100%;
  margin:15px auto;
  padding:20px;
  border:1px solid #d9d9da;
  cursor:pointer;
  font-size:16px;
  text-transform: uppercase;
  font-weight:700
}

.form-container button:hover {
  color:#3f3f46;
  border:1px solid #3f3f46
}

#message-warning {
  background:#FF6F6F;
  display:none;
  font-size:16px;
  margin:5px auto;
  padding:20px;
  text-align:center;
  color:#fff
}

#message-success {
  background:#6BD57E;
  color:#fff;
  display:none;
  font-size:16px;
  margin:5px auto;
  padding:20px;
  text-align:center
}

#message-warning i,#message-success i {
  margin-right:10px
}

#image-loader {
  display:none;
  position:relative
}

#image-loader img {
  display:block;
  margin:0 auto
}

::-webkit-input-placeholder {
  color:#3f4047;
  font-size:14px;
  font-family:"Merriweather",sans-serif
}

:-moz-placeholder {
/* Firefox 18- */
  color:#3f4047;
  font-size:14px;
  font-family:"Merriweather",sans-serif
}

::-moz-placeholder {
/* Firefox 19+ */
  color:#3f4047;
  font-size:14px;
  font-family:"Merriweather",sans-serif
}

:-ms-input-placeholder {
  color:#3f4047;
  font-size:14px;
  font-family:"Merriweather",sans-serif
}

/* -------------------------------- 
/* 7.a.  Social and Map Styles
----------------------------------- */
.social {
  width:100%;
  display:block;
  margin:0 auto
}

.address {
  background: none repeat scroll 0 0 #fe7c60;
  min-height: 400px;
  padding: 90px 0;
  position: relative;
}

.address:after {
  border-right:403px solid transparent;
  border-top:403px solid #F4775C;
  content:"";
  height:100%;
  position:absolute;
  right:-403px;
  top:0;
  width:1px;
  z-index:2
}


.location ul {
  display:block;
  width:100%;
  padding: 0;
}

.location ul li {
  border-right:1px solid #f3f3f3;
  display:inline-block;
  float:left;
  width:33.333%
}

.location ul li:last-child {
  border:none
}

.location img {
  display:block;
  margin:0 auto;
  opacity:.9;
  padding:5px;
  width:48px
}

.location h4 {
  color:#f3f3f3;
  font-family:"PT Sans",sans-serif;
  font-size:13px;
  font-weight:700;
  margin:5px auto;
  text-align:center;
  text-transform: uppercase
}

/* Social Profiles */
.social .social-profiles {
  display: block;
  margin: 0 auto;
  padding-top: 17px;
}

.social-profiles ul {
  width:100%;
  display:block;
  margin:0 auto
}

.social-profiles ul li {
  display:inline-block;
  float:left;
  margin-bottom:10px;
  margin-right:15px
}

.social-profiles ul li a i {
  background:none repeat scroll 0 0 #fff;
  border-radius:50%;
  box-shadow:0 0 0 20px transparent;
  color:#7c7c7c;
  font-size:24px;
  height:50px;
  line-height:50px;
  text-align:center;
  width:50px;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s
}

.social-profiles ul li a i:hover {
  color:#FE7C60;
  box-shadow:0 0 0 0 rgba(255,255,255,0.3);
  -webkit-transition: box-shadow .4s ease-in-out;
  -moz-transition: box-shadow .4s ease-in-out;
  -o-transition: box-shadow .4s ease-in-out;
  -ms-transition: box-shadow .4s ease-in-out;
  transition: box-shadow .4s ease-in-out
}

/* google map */

.map-container {
  min-height: 400px;
  min-width: 50vw;
  position: relative;
}

#map {
  background:url("../img/icons/map-marker.png") no-repeat center center;
  display:block;
  width:100%;
  height:400px;
  margin:0 auto
}

#map img {
  max-width:inherit!important
}
.skills
{
	 background:url("../img/img-2-large.jpg") no-repeat center center;
}
.tech-logo
{
	text-align:center;
}
.tech-logo img
{
	width:50%;
	
}
.apple img
{
	margin:26px 0px;
}
.web img
{
	margin:11px 0px;
}
.tech p
{
	 color: #fff;
    font-size: 14px;
    line-height: 20px;
    padding: 2px 0;
    text-align: justify;
}
.float-right{
    float: right !important;
}
.error-msg
{
	display:none;
}
.emailformError
{
	top:185px !important;
}
.first_nameformError 
{
	top:78px !important;
}