/*

   Content:
  =======
  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.7.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:#6e7b82;
  font-size:1.6rem;
  font-family:"PT Sans",sans-serif;
  color:#fff
}

a {
  color:#f3f3f3;
  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
}

.section-color {
	 background: none repeat scroll 0 0 #009bba;	  
	}

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
}


/*------------------------------VIDEO BACKGROUND SECTION---------------------------------*/
.home-video-box{position:relative;}
#bg-video {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
}

#big-video-wrap {
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}

#big-video-wrap img {
	max-width: none;
	position: absolute;
}
.vjs-big-play-button, .vjs-text-track-display, .vjs-control-bar {
	display: none;
}
.vjs-hidden {
    display: none;
}




/* ------------------------------------------------
/*  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;
}



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

.fun-facts {
  background:url("../setup/fun-bg-min.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:#95a6ad;
  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:#6e7b82; 
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:9999;  
}

.loader {
  background: url("../setup/svg-loaders/rings.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:33.33%;
  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:33.33vh;
  width:100%;
  background-image:url("../setup/img-1-small-min.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:'setup/img-1-small-min.jpg';
  display:none
}

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

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

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

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

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

.page-container .single-page:nth-of-type(3)::before {
  content:'setup/img-3-small-min.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: 16.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:25px;
  right:50px;
  background:url("../setup/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("../setup/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:33.33vw;
  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:'setup/img-1-large-min.jpg';
}

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

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

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

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

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

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

.page-container .single-page:nth-of-type(3)::after {
  background-image:url("../setup/img-3-large-min.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:33.33vw;
  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:33.3vw;
  -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 .video {
  background: url("../setup/bg-4-min.jpg") no-repeat scroll center center / cover  rgba(0, 0, 0, 0);
  display:block;
  margin:0 auto;
  position:relative;
  z-index:3;
}

.about-me .video-inner {
  background: none repeat scroll 0 0 rgba(242, 242, 242, 0.8);
  height: 100%;
  left: 0;
  padding:0px;
  position: absolute;
  bottom:0;
  width: 100%;
}

.about-me .bio {
  display:block;
  min-height:550px;
  margin:0 auto;
  position:relative;
  z-index:2;
}

.about-me .bio-inner {
  background: none repeat scroll 0 0 rgba(242, 242, 242, 0.8);
  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: 24px;
  line-height: 28px;
  text-transform:  uppercase;
  margin-top:-25px;
}

.about-me .bio p {
  color:#555;
  font-size:14px;
  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;
  outline:none;
}

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

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

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


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

.services {
  padding: 35px 0 50px;
  position: relative;
}

.services .sec-divider {
  background:url("../setup/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: #009bba;
  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("../setup/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:before {
  background: none repeat scroll 0 0 #cccccc;
  content: "";
  height: 1px;
  float:right;
  right: 50px;
  position: absolute;  
  width: 250px;
}

.employment ul li h3:before {
  background: none repeat scroll 0 0 #cccccc;
  content: "";
  height: 1px;
  float: left;
  left:0px;
  margin-left:50px;
  right: 50px;
  position: absolute;  
  width: 250px;
}

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

  line-height: 3em;
  margin-bottom: -20px;
}

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

.education ul li span,.employment ul li span {
  color:#009bba;
  display:inline-block;
  margin:0 0 20px;
  font-size:13px;
}

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

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

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

.education ul li h5 {
  color:#009bba;
  font-family:"Merriweather",sans-serif;
  display:inline-block;
  margin:0px;
  font-size:14px;
  	margin-bottom:10px;
}



.list {
  color:#838c95;
	margin-left:40px;
	font-size:13px;
	line-height: 1.2em;
	margin-top:-10px;
	padding-bottom:17px;
}
 
.list ul li {
 	list-style:disc;
	display:list-item;
	margin-bottom:-10px;
}


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

.skills {
  overflow: hidden;
  padding: 35px 0;
  position: relative;
}

.skills .sec-divider {
  background:url("../setup/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;
}


/* ----------------------------------------------------
/* 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:1400px;
  position:relative;
  width:auto;
  z-index:999;
}

.popup-frame {
  padding:50px 50px 35px;
}

.popup-frame-grey {
  padding:5px 50px 25px;
  background-color:#f2f2f2;
  padding-bottom:25px;
}

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

.project-title {
  color:#6e7b82;
  font-size:18px;
  margin:0px 20px 25px;
  text-transform: uppercase;
  text-align:center;
}

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


.project-url.btn {
  border-color:#3f3f46;
  color:#3f3f46;
  display:block;
  margin:30px auto 0px;
  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: 1;
}

 .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 {
  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, #000000 0%, #009bba 100%);
  background: linear-gradient(45deg, #000000 0%,#009bba 100%);
  border: 10px solid #fff;
}

.portfolio-items figure.effect-roxy img {
  max-width: none;
  width: 100%;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 1s, transform 0.35s;
  
}

.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: 2em;
  text-align: center;
}

.portfolio-items figure.effect-roxy h2 {
  padding: 20% 0 10px 5px;
  font-size: 1em;
    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 p {
  padding: 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.2;
    -ms-transform: scale(1.2, 1.2); /* IE 9 */
     -webkit-transform: scale(1.2, 1.2); /* Safari */
     transform: scale(1.2, 1.2);
}

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



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

.testimonials {
  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("../setup/Dee-Posters-logo.svg") no-repeat scroll center center rgba(0,0,0,0);
  display:block;
  height:88px;
  margin:40px auto 20px;
  width:150px
}

.testimonials .section-title {
  color: #f9f9f9;
  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:#f9f9f9;
  display:block;
  font-size:16px;
  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:#f9f9f9;
}

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

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

.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: 0px 0 0;
  position: relative;
}


:-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 {
  min-height: 400px;
  padding: 100px 0;
  position: relative;
}

/* Map overlay */
.address:after {
  border-right:403px solid transparent;
  border-top:403px solid #0095b3;
  content:"";
  height:100%;
  position:absolute;
  right:-403px;
  top:0;
  width:1px;
  z-index:2;
  opacity:0.8;
}

.location a {
  color:#f3f3f3;
  text-decoration:none;
}

.location a:hover {
  color:#fff;
  text-decoration:none;
}



.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: 50px;
}

.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:#95a6ad;
  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:#009bba;
  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;
}

.dkkort {
  background:url("../setup/dkmap.jpg") no-repeat scroll center center rgba(0,0,0,0);
  overflow:hidden;
  display:block;
  height:400px;
  margin:0 auto;
}