/* CSS Document */
 
/* intro */
/*
*
    preloader
    container intro
    sound
    frame page
    element intro
*
*/

/* 
/*
*
    reset
    Toggle
    sidebar
    footer
    soc-icon
    modern icon
    modern button
    page
	box line home
	resume timeline
    skill
    gallery
    Magnific Popup
    form subscribe and mail
*
*/

/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, button, output, ruby, section, summary, time, mark, audio, video {
font-family: 'Raleway', sans-serif;
margin: 0;
padding: 0;
border: 0;
font: inherit;
text-decoration:none;
list-style: none;
}

body {
font-family: 'Raleway', sans-serif;
font-size: 14px;
letter-spacing: 0.09em;
line-height: 1.5;
font-style: normal;
font-weight: normal;
text-align: left;
color: #252525;
overflow:scroll;
overflow-x:hidden;
background: rgba(255, 255, 255, 0.8);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

a, a:visited, a:hover, a:active {
  color: inherit;
}

/* preloader */
.preloader
    {
        position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 99999;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-flex-flow: row nowrap;
              -ms-flex-flow: row nowrap;
                  flex-flow: row nowrap;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
          -webkit-align-items: center;
              -ms-flex-align: center;
                  align-items: center;
          background: #fff ;
    }
.mainloader {
  width: 50px;
  height: 50px;
  background-color: #00cc66;
  -webkit-animation: rotate 1.2s infinite ease-in-out;
  animation: rotate 1.2s infinite ease-in-out;
}
.mainloader1 {
  width: 100px;
  height: 10px;
  background-color: #c3c3c3;
  margin: 100px auto;
  -webkit-animation: rotate 1.2s infinite ease-in-out;
  animation: rotate 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotate {
  0% { 
    -webkit-transform: perspective(120px);
    background-color: #2D8ED0;  
  }
  50% { 
    -webkit-transform: perspective(120px) rotateY(180deg);
    background-color: #D97243;  
  }
  75% {
    background-color: #1DB475;
  }
  100% { 
    -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg);
    background-color: #2D8ED0; 
  }
}

@keyframes rotate {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
/* end preloader */


/* all element begin here */
/* container intro */
#boxintro{
width:100%; 
height:100%;
position:fixed; 
top: 0;
left: 0;
right: 0;
bottom: 0; 
background:rgba(255, 255, 255, 0.2);
display:none;
z-index:999;
}

/* frame page */
#frame1, #frame2{
  display:none;
  position: fixed;
  width: 100%;
  height:100%;
  overflow: hidden;
  background:rgba(0, 0, 0, 0);
}

/* element intro */
.contentintro{ 
width: 100%;
text-align:center;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index:999;
color:#fff;
}

/* triangle */
.opening {
  height: 100%;
  width: 100%;
  position:fixed;
  top:0px;
  left:0px;
  overflow: hidden;
  background:none;
  
}

.triangle-topleft {
  position:absolute;
  top:0px;
  left:0px;
  width: 0; 
  height: 0; 
  border-top: 1400px solid rgba(0, 183, 79, 0.8); 
  border-right: 1400px solid transparent;
}
.triangle-botright { 
  position:absolute;
  bottom:0px;
  right:0px;
  width: 0; 
  height: 0; 
  border-bottom: 1300px solid rgba(33, 208, 129, 1); 
  border-left: 1300px solid transparent;
}


/*lineintro */
.lineintro{
    width:50%;
    height:300px;
	position:absolute;
	top: 5%;
    left: 12.3%;
}
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .lineintro{
    width:300px;
    height:300px;
	position:absolute;
	top: 5%;
    left: 38.8%;
}
}
div:before, div:after{
    content:'';
    position:absolute;
    height:10%;
    width:10%;
}
.lineintro:after{
    right:0;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
}
.lineintro:before{
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
}
.innerintro:before{
    bottom:0;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
.innerintro:after{
    bottom:0; right:0;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.talentintro {
  display:inline-block;
  width:200px;
  height:200px;
  overflow: hidden;
  margin:20px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  border:8px solid #fff;
  z-index: 1;
  background: 
}

.taglineintro{ font-family: 'Raleway', sans-serif; font-size:20pt; font-weight:bold; text-transform: uppercase; line-height:10pt; margin-bottom:1%;}


/* sound */
.equalizer {
  position: fixed;
  height: 30px;
  width: 20px;
  right: 8px;
  top:5px;
  cursor:pointer;
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.equalizer:hover{
	opacity:0.5;
	-webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.equal-line {
  position: absolute;
  width: 3px;
  height: 0;
  bottom: 0;
  left: 0;
  background: #252525;
  -webkit-animation : equal-line 0.4s 0s both alternate ease infinite;
  animation: equal-line 0.4s 0s both alternate ease infinite;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.equal-line-1 {
  animation-delay: 0.2s;
}

.equal-line-2 {
  left: 33%;
    animation-delay: 0.4s;
}

.equal-line-3 {
  left: 66%;
    animation-delay: 0.6s;
}
.equal-line-4 {
  left: 99%;
    animation-delay: 0.8s;
}

@keyframes equal-line {
  0% {
    height: 0;
  }
  
  100% {
    height: 100%;
  }
}

/* overlay background */
.overlay-main{
  position: fixed;
  width: 100%;
  height:100%;
  background: rgba(255, 255, 255, 0.7);
}
.overlay-modern{
  position: fixed;
  width: 100%;
  height:100%;
  background: rgba(255, 255, 255, 0.8);
}

/* Toggle */
#wrappermodern {
  padding-left: 0;
  -webkit-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -moz-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -o-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
}

#wrappermodern.toggled {
  padding-left: 300px;
}

#sidebar-wrappermodern {
  z-index: 1000;
  position: fixed;
  left: 300px;
  width: 0;
  height: 100%;
  margin-left: -300px;
  overflow-y: auto;
  overflow:hidden;
  color:#252525;
  background:rgba(255,255,255,0.5);
  -webkit-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -moz-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -o-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
}

.talent {
  display:inline-block;
  width:200px;
  height:200px;
  overflow: hidden;
  margin:20px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  border:8px solid #fff;
  z-index: 1;
}

.seperator
{
	position:fixed;
    width: 1px;
    height: 100%;
    background-image: radial-gradient(#ccc, #FFF), radial-gradient(#ccc, #FFF);
    background-position: 100%, 0, 100%, 0;
	z-index:999;
}

#wrappermodern.toggled #sidebar-wrappermodern {
  width: 300px;
}

.holdsidebar {
  position: fixed;
  width: 300px;
  height: 100%;
  z-index: 999;
  top: 0;
  left: 0;
}

#page-content-wrappermodern {
  position:relative;
}

#wrappermodern.toggled #page-content-wrappermodern {
  position:relative;
}

/* sidebar */
.sidebar-nav {
  text-transform: uppercase;
  position: absolute;
  top: 0;
  width: 300px;
  heigh:200%;
  list-style: none;
  text-align: center;
}

.sidebar-nav ul {
  margin-top: 10%;
  padding: 0;
  list-style: none;
}

.sidebar-nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 12pt;
  font-weight: 400;
  line-height: 35px;
}

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #252525;
  -webkit-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -moz-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -o-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
}

.sidebar-nav li a:hover {
  color: #c3c3c3;
  -webkit-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -moz-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -o-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
}

.sidebar-nav li .active {
  color: #c3c3c3;
}

.sidebar-brand {
  text-align:center;
  display: block;
  width: auto;
  height: auto;
  margin-top: 20%;
}

.sidebar-brand a:hover {
  background: none;
}

/*footer*/
#wrapfooter {
  position: fixed;
  bottom: 5px;
  width: 300px;
  font-size: 6.5pt;
  color:#252525;
  font-weight: 400;
  text-transform:uppercase;
  display:none;
}

.opaci {
  opacity: 1;
}

.opacino {
  opacity: 0;
}

#footer {
  font-family: 'Raleway', sans-serif;
}

/*soc-icon*/
#soc-icon {
  display: block;
  height: auto;
  margin-bottom: 3%;
  font-size: 9pt;
}

#soc-icon a {
  text-decoration: none;
  -webkit-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -moz-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -ms-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -o-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
}

#soc-icon a:hover {
  color: #00cc66;
  -webkit-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -moz-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -ms-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -o-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
}
/* end sidebar*/

/* modern icon */
.modernicon {
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  color: #fff;
  opacity: 0;
}

div.modernicon.icon {
  line-height: 40px;
  width: 43px;
  height: 43px;
  float: left;
  margin: 0px 10px 20px 0px;
  background: #00cc66;
}

a.modernicon.icon {
  line-height: 66px;
  width: 68px;
  height: 68px;
  cursor: pointer;
  background: #00cc66;
  -webkit-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -moz-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -ms-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -o-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
}

a.modernicon.icon:hover {
  background: #c3c3c3;
  color: #fff;
  -webkit-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -moz-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -ms-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -o-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
}

/* modern button */
.vertex-menu {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;	
  position: fixed;
  display: block;
  bottom: 7px;
  right: 3px;
  overflow: hidden;
  line-height: inherit;
  border-right: 1px solid #898989;
  z-index:999;
}

a.vertex-menu_tx {
  display: inline-block;
  vertical-align: top;
  transform: translate(85%,100%) rotate(-90deg);
  transform-origin: 0 0;
  white-space: nowrap;
  cursor:pointer;
  text-decoration:underline;
   -webkit-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -moz-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -ms-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -o-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
}
.vertex-menu_tx:hover{
	color: #acacac;
	 -webkit-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -moz-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -ms-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  -o-transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
  transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
	}

.vertex-menu_tx:after {
    content: "";
    float: left;
    margin-top: 100%;
}

a.modernbutton {
  font-size: 15pt;
  font-weight: 400;
  text-decoration: none;
  background: #00cc66;
  border: none;
}

.modernbutton {
  display: inline-block;
  line-height: 10px;
  padding: 15px 17px 15px 17px;
  cursor: pointer;
  width: auto;
  height: auto;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  text-shadow:none;
  margin: 5px;
  opacity: 0;
}

.modernbutton.button {
  color: #fff;	
  background: #00cc66;
  -webkit-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -moz-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -ms-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -o-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
}

.modernbutton.button:hover {
  color: #fff;	
  background: #00b74f;
  -webkit-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -moz-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -ms-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -o-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
}

/* page */
.v-align {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

#home, #about, #resume, #skill, #portofolio, #contact {
  display: none;
  position:relative;
}
#home{ padding:25% 0 25% 0;}

#home-btn, #about-btn, #resume-btn, #skill-btn, #porto-btn, #contact-btn {
  cursor: pointer;
}

.bgmodern {
  position: fixed;
  width: 100%;
  height: 100%;
}

.bgmodern img {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
}

.contenthome {
  color:#252525;
  text-align:center;
  width: 100%;
  height:100%;
  top:0px;
  left:0px;
}
.contentpage {
	padding:5%;
}
.spaceup{ margin-top:3%;}
.spacedown{ margin-bottom:5%;}
.imgcontent {float: left; margin:0px 25px 20px 0px;}

/* Count Stat */
#wrap-modern-count{ width:100%; text-align:center;}
.stat {
   margin:10px auto;
}
.highlight {
   color:#252525;
   padding:10px 0;
   font-weight:bold;
   display:block;
   margin-bottom:0;
   font-size:48px;
}
.milestone-details {
   font-weight:bold;
   font-size:18px;
   color:#999;
}



h1{ font-family: 'Oswald', sans-serif; font-size:28pt; font-weight:400; letter-spacing:1px; margin-top:20px;}
h2{ font-family: 'Oswald', sans-serif; font-size:24pt; font-weight:400;}
h3{ font-family: 'Raleway', sans-serif; font-size:16pt; font-weight:400; line-height:18pt; margin-bottom:1%;}
h4{ font-family: 'Oswald', sans-serif; font-size:19pt; font-weight:400; color:#c3c3c3; line-height:12pt;}
h5{ font-size:16pt; font-weight:600;}
.nameslide{ font-family: 'Raleway', sans-serif; font-size:28pt; font-weight:400;}

strong{ font-weight:700;}
.modern-color{color:#959595;}


/* resume timeline */
.modern-timeline-centered {
    position: relative;
    margin-bottom: 10px;
}

.modern-timeline-centered:before, .modern-timeline-centered:after {
        content: "";
        display: table;
}

.modern-timeline-centered:after {
        clear: both;
}

.modern-timeline-centered:before, .modern-timeline-centered:after {
        content: "";
        display: table;
}

.modern-timeline-centered:after {
        clear: both;
}

.modern-timeline-centered:before {
        content: '';
        position: absolute;
        display: block;
        width: 1px;
		height:100%;
        background: #cfcfcf;
        top: 10px;
        bottom: 10px;
        margin-left: 27px;
}

.modern-timeline-centered .modern-timeline-entry {
        position: relative;
        margin-top: 0px;
        margin-left: 30px;
        margin-bottom: 10px;
        clear: both;
}

.modern-timeline-centered .modern-timeline-entry:before, .modern-timeline-centered .modern-timeline-entry:after {
            content: "";
            display: table;
}

 .modern-timeline-centered .modern-timeline-entry:after {
            clear: both;
 }

  .modern-timeline-centered .modern-timeline-entry:before, .modern-timeline-centered .modern-timeline-entry:after {
            content: "";
            display: table;
  }

      .modern-timeline-centered .modern-timeline-entry:after {
          clear: both;
      }

       .modern-timeline-centered .modern-timeline-entry.begin {
           margin-bottom: 0;
       }

        .modern-timeline-centered .modern-timeline-entry.left-aligned {
            float: left;
        }

            .modern-timeline-centered .modern-timeline-entry.left-aligned .modern-timeline-entry-inner {
                margin-left: 0;
                margin-right: -18px;
            }

                .modern-timeline-centered .modern-timeline-entry.left-aligned .modern-timeline-entry-inner .modern-timeline-time {
                    left: auto;
                    right: -100px;
                    text-align: left;
                }

                .modern-timeline-centered .modern-timeline-entry.left-aligned .modern-timeline-entry-inner .modern-timeline-icon {
                    float: right;
                }

                .modern-timeline-centered .modern-timeline-entry.left-aligned .modern-timeline-entry-inner .modern-timeline-label {
                    margin-left: 0;
                    margin-right: 30px;
                }

                    .modern-timeline-centered .modern-timeline-entry.left-aligned .modern-timeline-entry-inner .modern-timeline-label:after {
                        left: auto;
                        right: 0;
                        margin-left: 0;
                        margin-right: -9px;
                        -moz-transform: rotate(180deg);
                        -o-transform: rotate(180deg);
                        -webkit-transform: rotate(180deg);
                        -ms-transform: rotate(180deg);
                        transform: rotate(180deg);
                    }

        .modern-timeline-centered .modern-timeline-entry .modern-timeline-entry-inner {
            position: relative;
            margin-left: -10px;
        }

.modern-timeline-centered .modern-timeline-entry .modern-timeline-entry-inner:before, .modern-timeline-centered .modern-timeline-entry .modern-timeline-entry-inner:after {
                content: " ";
                display: table;
}

.modern-timeline-centered .modern-timeline-entry .modern-timeline-entry-inner:after {
                clear: both;
}

.modern-timeline-centered .modern-timeline-entry .modern-timeline-entry-inner:before, .modern-timeline-centered .modern-timeline-entry .modern-timeline-entry-inner:after {
                content: " ";
                display: table;
}

.modern-timeline-centered .modern-timeline-entry .modern-timeline-entry-inner:after {
                clear: both;
}

.modern-timeline-centered .modern-timeline-entry .modern-timeline-entry-inner .modern-timeline-time {
                position: absolute;
                left: -100px;
                text-align: right;
                padding: 10px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
}

.modern-timeline-centered .modern-timeline-entry .modern-timeline-entry-inner .modern-timeline-time > span {
                    display: block;
}

.modern-timeline-centered .modern-timeline-entry .modern-timeline-entry-inner .modern-timeline-time > span:first-child {
                        font-size: 15px;
                        font-weight: bold;
}

.modern-timeline-centered .modern-timeline-entry .modern-timeline-entry-inner .modern-timeline-time > span:last-child {
                        font-size: 12px;
}

.modern-timeline-icon {
                background: #cfcfcf;
                display: block;
                width: 15px;
                height: 15px;
                -webkit-background-clip: padding-box;
                -moz-background-clip: padding;
                background-clip: padding-box;
                -webkit-border-radius: 20px;
                -moz-border-radius: 20px;
                border-radius: 20px;
                text-align: center;
                line-height: 40px;
                font-size: 15px;
                float: left;
}

.modern-timeline-centered .modern-timeline-entry .modern-timeline-entry-inner .modern-timeline-label {
                position: relative;
                background: #f5f5f6;
                padding: 1em;
                margin-left: 30px;
                -webkit-background-clip: padding-box;
                -moz-background-clip: padding;
                background-clip: padding-box;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
}

.modern-timeline-centered .modern-timeline-entry .modern-timeline-entry-inner .modern-timeline-label:after {
                    content: '';
                    display: block;
                    position: absolute;
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 9px 9px 9px 0;
                    border-color: transparent #f5f5f6 transparent transparent;
                    left: 0;
                    top: 10px;
                    margin-left: -9px;
}


/* skill */    
.content-skill {
  width: 350px;
  position: relative;
  float: left;
  font-size: 15px;
}

.col-skill {
  width: 300px;
}

#listskill {
  list-style: none;
}

#listskill li {
  margin-bottom: 30px;
}

#listskill li em {
  position: relative;
  top: 0px;
  left: 0px;
}
#listskill li em.perc {
  float:right;
  font-size:12px;
  line-height:14px;
  color:#fff;
}

.expand {
  height: 15px;
  margin: 30px 0px 30px 0px;
  padding-left: 10px;
  background: #00cc66;
  position: absolute;
}

.ninety{
  width: 90%;
  -webkit-animation: ninety 2s ease-out;
   -moz-animation: ninety 2s ease-out;
    -ms-animation: ninety 2s ease-out;
     -o-animation: ninety 2s ease-out;
        animation: ninety 2s ease-out;
}

.ninetyfive{
  width: 95%;
  -webkit-animation: ninety 2s ease-out;
   -moz-animation: ninety 2s ease-out;
    -ms-animation: ninety 2s ease-out;
     -o-animation: ninety 2s ease-out;
        animation: ninety 2s ease-out;
}

.sixty {
  width: 60%;
  -webkit-animation: sixty 2s ease-out;
   -moz-animation: sixty 2s ease-out;
    -ms-animation: sixty 2s ease-out;
     -o-animation: sixty 2s ease-out;
        animation: sixty 2s ease-out;
}

.seventy {
  width: 70%;
  -webkit-animation: seventy 2s ease-out;
   -moz-animation: seventy 2s ease-out;
    -ms-animation: seventy 2s ease-out;
     -o-animation: seventy 2s ease-out;
        animation: seventy 2s ease-out;
}

.eightyfive {
  width: 85%;
  -webkit-animation: eightyfive 2s ease-out;
   -moz-animation: eightyfive 2s ease-out;
    -ms-animation: eightyfive 2s ease-out;
     -o-animation: eightyfive 2s ease-out;
        animation: eightyfive 2s ease-out;
}

@-moz-keyframes ninety       { 0%  { width:0px;} 100%{ width:90%;}  }
@-moz-keyframes ninetyfive       { 0%  { width:0px;} 100%{ width:95%;}  }
@-moz-keyframes sixty       { 0%  { width:0px;} 100%{ width:60%;}  }
@-moz-keyframes seventy     { 0%  { width:0px;} 100%{ width:70%;}  }
@-moz-keyframes eightyfive    { 0%  { width:0px;} 100%{ width:85%;}  }

@-webkit-keyframes ninety      { 0%  { width:0px;} 100%{ width:90%;}  }
@-webkit-keyframes ninetyfive      { 0%  { width:0px;} 100%{ width:95%;}  }
@-webkit-keyframes sixty        { 0%  { width:0px;} 100%{ width:60%;}  }
@-webkit-keyframes seventy      { 0%  { width:0px;} 100%{ width:70%;}  }
@-webkit-keyframes eightyfive   { 0%  { width:0px;} 100%{ width:85%;}  }
/* end skill */    


/* gallery */
.no-gutter {
  margin-left: 0;
  margin-right: 0;
  margin-top:0;
  margin-bottom:0;
}

.no-gutter [class*='col-']:not(:first-child),
.no-gutter [class*='col-']:not(:last-child) {
  padding-top:0;
  padding-bottom:0;
}
#projects-wrap{ 
text-align:center;
}

.projects {
  position: relative;
  letter-spacing:1pt;
  text-transform:uppercase;
  overflow:hidden;
  border:0px solid rgba(0,0,0,0);
}

.projects:hover img {
  width: 100%;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.projects img {
  width: 100%;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.projects .hovereffect {
  width: 100%;
  height:auto;
  float: left;
  position: relative;
  text-align: center;
  cursor:pointer;
}

.projects .hovereffect .overlay {
  width: 100%;
  height: 120%;
  position: absolute;
  top: -30px;
  left: 0;
  opacity:0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.projects .hovereffect:hover .overlay {
height: 100%;
top: 0;
opacity:1;
top: 0;
}

.projects .hovereffect .overlay h3{ font-family: 'Raleway', sans-serif; font-size:9pt; font-weight:400; letter-spacing:.5em; color:#111; padding-top:32%; height:100%; background-color: rgba(255,255,255,.8); }
/* end gallery */

/* Magnific Popup CSS */
.mfp-bg,.mfp-wrap{position:fixed;left:0;top:0}.mfp-bg,.mfp-container,.mfp-wrap{height:100%;width:100%}.mfp-container:before,.mfp-figure:after{content:''}.mfp-bg{z-index:1042;overflow:hidden;background:#0b0b0b;opacity:.8;filter:alpha(opacity=80)}.mfp-wrap{z-index:1043;outline:0!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;left:0;top:0;padding:0 8px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mfp-container:before{display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-moz-zoom-out;cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#ccc;position:absolute;top:50%;width:auto;text-align:center;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#ccc}.mfp-close,.mfp-preloader a:hover{color:#fff}.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader{display:none}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;display:block;outline:0;padding:0;z-index:1046;-webkit-box-shadow:none;box-shadow:none}.mfp-figure:after,.mfp-iframe-scaler iframe{box-shadow:0 0 8px rgba(0,0,0,.6);position:absolute;left:0}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:.65;padding:0 0 18px 10px;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:focus,.mfp-close:hover{opacity:1}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#fff;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#ccc;font-size:12px;line-height:18px}.mfp-figure,img.mfp-img{line-height:0}.mfp-arrow{position:absolute;opacity:.65;margin:-55px 0 0;top:50%;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:focus,.mfp-arrow:hover{opacity:1}.mfp-arrow .mfp-a,.mfp-arrow .mfp-b,.mfp-arrow:after,.mfp-arrow:before{content:'';display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:inset transparent}.mfp-arrow .mfp-a,.mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow .mfp-b,.mfp-arrow:before{border-top-width:21px;border-bottom-width:21px}.mfp-arrow-left{left:0}.mfp-arrow-left .mfp-a,.mfp-arrow-left:after{border-right:17px solid #fff;margin-left:31px}.mfp-arrow-left .mfp-b,.mfp-arrow-left:before{margin-left:25px;border-right:27px solid #3f3f3f}.mfp-arrow-right{right:0}.mfp-arrow-right .mfp-a,.mfp-arrow-right:after{border-left:17px solid #fff;margin-left:39px}.mfp-arrow-right .mfp-b,.mfp-arrow-right:before{border-left:27px solid #3f3f3f}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-image-holder .mfp-content,img.mfp-img{max-width:100%}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{display:block;top:0;width:100%;height:100%;background:#fff}.mfp-figure:after,img.mfp-img{width:auto;height:auto;display:block}img.mfp-img{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:40px 0;margin:0 auto}.mfp-figure:after{top:40px;bottom:40px;right:0;z-index:-1;background:#444}.mfp-figure small{color:#bdbdbd;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#f3f3f3;word-wrap:break-word;padding-right:36px}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{-webkit-transform:scale(.75);transform:scale(.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}}.mfp-ie7 .mfp-img{padding:0}.mfp-ie7 .mfp-bottom-bar{width:600px;left:50%;margin-left:-300px;margin-top:5px;padding-bottom:5px}.mfp-ie7 .mfp-container{padding:0}.mfp-ie7 .mfp-content{padding-top:44px}.mfp-ie7 .mfp-close{top:0;right:0;padding-top:0}.image-source-link{color:#98C3D1}.mfp-with-zoom .mfp-container,.mfp-with-zoom.mfp-bg{opacity:0;-webkit-backface-visibility:hidden;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.mfp-with-zoom.mfp-ready .mfp-container{opacity:1}.mfp-with-zoom.mfp-ready.mfp-bg{opacity:.8}.mfp-with-zoom.mfp-removing .mfp-container,.mfp-with-zoom.mfp-removing.mfp-bg{opacity:0}
/* end Magnific Popup CSS */


/* form subscribe and mail */

.contact {
  text-align: left;
  margin-left: 20px;
  width:100%;
  height:auto;
}

input[type="email"]{
  text-align:center;
  width:40%;
  height: 55px;
  padding: 10px;
  margin: 5px 0px 5px 0px;
  border: 0px;
  font-size: 9pt;
  letter-spacing: 2px;
  background: rgba(0, 0, 0, 0);
  padding: 13px 10px 15px 10px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -moz-transition: none;
  -webkit-transition: none;
  border-bottom: 1px solid #c3c3c3;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.2s ease;
}


input[type="text"], textarea {
  text-align: left;
  width: 95%;
  height: 55px;
  padding: 10px;
  margin: 5px 0px 5px 0px;
  border: 0px;
  font-size: 9pt;
  letter-spacing: 2px;
  background: rgba(0, 0, 0, 0);
  padding: 13px 10px 15px 10px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -moz-transition: none;
  -webkit-transition: none;
  border-bottom: 1px solid #c3c3c3;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.2s ease;
}

textarea {
  height: 100px;
}

input[type="text"]:focus, input[type="text"].focus, textarea:focus, textarea.focus, input[type="email"]:focus, input[type="email"].focus, email:focus, email.focus {
  border-bottom: 1px solid #00cc66;
}

::-webkit-input-placeholder {
  opacity: 1;
  color: #fff;
}

::-moz-placeholder {
  opacity: 1;
  color: #00;
} /* firefox 19+ */
:-ms-input-placeholder {
  opacity: 1;
  color: #00;
} /* ie */
input:-moz-placeholder {
  opacity: 1;
  color: #fff;
}

input:focus::-webkit-input-placeholder {
  color: transparent;
}

input:focus:-moz-placeholder {
  color: transparent;
}

input:focus::-moz-placeholder {
  color: transparent;
}

input:focus:-ms-input-placeholder {
  color: transparent;
}

textarea:focus::-webkit-textarea-placeholder {
  color: transparent;
}

textarea:focus:-moz-placeholder {
  color: transparent;
}

textarea:focus::-moz-placeholder {
  color: transparent;
}

textarea:focus:-ms-input-placeholder {
  color: transparent;
}

.error {
  width: 100%;
  color:#00cc66;
  display: none;
  padding: 2px 10px 2px 10px;
  display: none;
  font-size: 11px;
  margin-bottom: 10px;
}

.success {
  width: 100%;
  display: none;
  padding: 2px 0px 2px 0px;
  margin-left: 10px;
  font-size: 11px;
  margin-bottom: 10px;
}

/* subscribe */
#subwrap {
margin: 0 auto;
text-align:center;
background: none;
width: 300px;
height: 55px;
position: relative;
z-index:1;
}

#subscribe .mail {
display: none;
visibility: hidden;
}

#subscribe input#subscribeemail {
font-size: 9pt;
line-height: 1.5;
font-style: normal;
font-weight: normal;
text-align: center;
color: #252525;
width: 300px;
height: 28px;
margin: 0;
padding: 0;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #252525;
}
#subscribe input#subscribeemail[type="text"]:focus, #subscribe input#subscribeemail[type="text"].focus{
  border-bottom: 1px solid #959595;
}

.modernbuttonSub  {
display:inline-block;
border-radius: 2px;
font-size: 11pt;
line-height: 1.5;
letter-spacing: 4pt;
padding:5px 0 0 1px;
font-style: normal;
text-transform: uppercase;

font-weight: 400;
color: #fff;
display: inline-block;
outline: none;
margin: 10px auto;
width: 225px;
padding: 0;
height: 45px;
border: none;
cursor:pointer;
}

.modernbuttonSub.button {
  background: #00cc66;
  -webkit-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -moz-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -ms-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -o-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
}

.modernbuttonSub.button:hover {
  background: #00b74f;
  -webkit-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -moz-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -ms-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  -o-transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
  transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
}


.subscribesuccess {
display:none;
font-family: 'Raleway', sans-serif;
font-size: 10px;
line-height: 2;
font-style: normal;
text-transform: uppercase;
text-align: center;
font-weight: 400;
letter-spacing: normal;
color: #111;
margin: 0 auto;
padding: 20px 0 0 0;
line-height: 1;
}

#subscribe .subscribeerror {
font-family: 'Raleway', sans-serif;
font-size: 10px;
text-transform: uppercase;
text-align: center;
color: #111;
display: block;
margin: -4px auto 0 auto;
padding: 0;
letter-spacing: 1px;
}

/*Core Owl Carousel CSS File v1.3.3*/

/* clearfix */
.owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel,.owl-carousel .owl-wrapper{display:none;position:relative}.owl-carousel{width:100%;-ms-touch-action:pan-y}.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}.owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition:height .5s ease-in-out;-moz-transition:height .5s ease-in-out;-ms-transition:height .5s ease-in-out;-o-transition:height .5s ease-in-out;transition:height .5s ease-in-out}.owl-carousel .owl-item{float:left}.owl-controls .owl-buttons div,.owl-controls .owl-page{cursor:pointer}.owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.grabbing{cursor:url(grabbing.png) 8 8,move}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}


/*
* 	Owl Carousel Owl Demo Theme 
*	v1.3.3
*/
.owl-theme .owl-controls{margin-top:10px;text-align:center}.owl-theme .owl-controls .owl-buttons div{color:#FFF;display:inline-block;zoom:1;margin:5px;padding:3px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;background:#252525;filter:Alpha(Opacity=50);opacity:.5}.owl-theme .owl-controls.clickable .owl-buttons div:hover{filter:Alpha(Opacity=100);opacity:1;text-decoration:none}.owl-theme .owl-controls .owl-page{display:inline-block;zoom:1}.owl-theme .owl-controls .owl-page span{display:block;width:12px;height:12px;margin:5px 7px;filter:Alpha(Opacity=50);opacity:.5;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;background:#252525}.owl-theme .owl-controls .owl-page.active span,.owl-theme .owl-controls.clickable .owl-page:hover span{filter:Alpha(Opacity=100);opacity:1}.owl-theme .owl-controls .owl-page span.owl-numbers{height:auto;width:auto;color:#FFF;padding:2px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}.owl-item.loading{min-height:150px;background:url(AjaxLoader.gif) center center no-repeat}


#owl-modern .item{
        padding: 30px 0px;
        margin: 10px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-align: center;
    }
	
#owl-testimonial .item{
        padding: 30px 0px;
        margin: 10px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-align: center;
    }