/*
Theme Name: Edwen
Author: Edwen Sildo
Author URI: http://edwenjohnsildo.com/
Description: Created this theme for my personal site
Version: 1.0
Text Domain: edwen
*/
@font-face {
  font-family: 'Edward';
  src: url("../edwen/assets/fonts/edward/EdwardPro-SemiBold.eot");
  /* IE9 Compat Modes */
  src: url("../edwen/assets/fonts/edward/EdwardPro-SemiBold.eot?#iefix") format("embedded-opentype"), url("../edwen/assets/fonts/edward/EdwardPro-SemiBold.woff") format("woff"), url("../edwen/assets/fonts/edward/EdwardPro-SemiBold.ttf") format("truetype");
}

body {
	font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
    font-size: 17px;
    line-height: 30px;
    margin: 0;
    overflow-x: hidden !important;
}



/* * {
    cursor: url(../edwen/assets/images/cursor.svg),pointer!important;
} */

h1, h2, h3, h4 {
	font-family: 'Edward';
	font-weight: 600;
}

.tc {
	text-align: center;
}

a {
  color: #333;
  text-decoration: none;
}

a.edwen-btn {
  font-weight: 700;
  transition: .5s all;
  width: 100%;
  max-width: 500px;
  padding: 20px;
  font-size: 22px;
  margin: 0 auto;
  position: relative;
  font-family: 'Edward';
  text-transform: uppercase;
}

a.edwen-btn.edwen-btn-style-border {
  background: #0F1D3B;
  color: #fff;
}

.edwen-btn-style-fill {
    background: #333;
    color: #cecece;
}



a.edwen-btn.edwen-btn-style-border:hover,
a.edwen-btn.edwen-btn-style-fill:hover {
  opacity: 0.8;
  transition: 1s all;
}

.edwen-heading {
    font-size: 44px;
    color: #000000;
    font-weight: 800;
    line-height: 50px;
    margin: 0px 0px 0.83em 0px;
    text-transform: uppercase;
}


.edwen-row {
  padding: 100px 0px;
  position: relative;
  transition: 2s;
}

.edwen-row-no-ani {
  position: relative;
}

.edwen-row-np {
  padding: 0px;
  position: relative;
  transition: 2s;
}

.s-article-main {
  position: relative;
  background: #ffffff;
}


.no-padding {
  padding: 0px;
}

/* Arrow */
.the-arrow {
  width: 64px;
  transition: all 0.2s;
}
.the-arrow.-left {
  position: absolute;
  top: 50%;
  left: 20px;
}
.the-arrow.-left > .shaft {
  width: 0;
  background-color: #0F1D3B;
}
.the-arrow.-left > .shaft:before, .the-arrow.-left > .shaft:after {
  width: 0;
  background-color: #0F1D3B;
}
.the-arrow.-left > .shaft:before {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.the-arrow.-left > .shaft:after {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.the-arrow.-right {
  top: 1px;
}
.the-arrow.-right > .shaft {
  width: 64px;
  transition-delay: 0.2s;
}
.the-arrow.-right > .shaft:before, .the-arrow.-right > .shaft:after {
  width: 12px;
  transition-delay: 0.3s;
  transition: all 0.5s;
}
.the-arrow.-right > .shaft:before {
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
}
.the-arrow.-right > .shaft:after {
  -webkit-transform: rotate(-40deg);
          transform: rotate(-40deg);
}
.the-arrow > .shaft {
  background-color: #0F1D3B;
  display: block;
  height: 4px;
  position: relative;
  transition: all 0.2s;
  transition-delay: 0;
  will-change: transform;
}
.the-arrow > .shaft:before, .the-arrow > .shaft:after {
  background-color: #0F1D3B;
  content: '';
  display: block;
  height: 4px;
  width: 12px;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 0.2s;
  transition-delay: 0;
}
.the-arrow > .shaft:before {
  -webkit-transform-origin: top right;
          transform-origin: top right;
}
.the-arrow > .shaft:after {
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
}

.heading-sub {
  font-size: 28px;
}





















.animated-arrow {
  display: inline-block;
  color: #999;
  font-size: 1.25em;
  font-style: italic;
  text-decoration: none;
  position: relative;
  transition: all 0.2s;
  height: auto;
}
.animated-arrow:hover {
  color: #eaeaea;
}
.animated-arrow:hover > .the-arrow.-left > .shaft {
  width: 64px;
  transition-delay: 0.1s;
  background-color: #0F1D3B;
}
.animated-arrow:hover > .the-arrow.-left > .shaft:before, .animated-arrow:hover > .the-arrow.-left > .shaft:after {
  width: 12px;
  transition-delay: 0.1s;
  background-color: #0F1D3B;
}
.animated-arrow:hover > .the-arrow.-left > .shaft:before {
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
}
.animated-arrow:hover > .the-arrow.-left > .shaft:after {
  -webkit-transform: rotate(-40deg);
          transform: rotate(-40deg);
}
.animated-arrow:hover > .main {
  -webkit-transform: translateX(80px);
          transform: translateX(80px);
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft {
  width: 0;
  -webkit-transform: translateX(200%);
          transform: translateX(200%);
  transition-delay: 0;
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:before, .animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
  width: 0;
  transition-delay: 0;
  transition: all 0.1s;
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:before {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.animated-arrow > .main {
  display: flex;
  align-items: center;
  transition: all 0.2s;
}
.animated-arrow > .main > .text {
  margin: 0 16px 0 0;
  line-height: 1;
  font-size: 16px;
  color: #0F1D3B;
}
.animated-arrow > .main > .the-arrow {
  position: relative;
}

/* animation*/

#flinetoptodownshort {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: flinetoptodownshort 800ms forwards;
} 

.site-title svg:hover #flinetoptodownshort {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: flinetoptodownshort 800ms forwards;
} 

@keyframes flinetoptodownshort {
  from {
    stroke-dashoffset: 20;
  }
  to {
    stroke-dashoffset: 40;
  }
}

#flinetoplefttoright {
  stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: flinetoplefttoright 800ms forwards;
    animation-delay: 400ms;
} 
@keyframes flinetoplefttoright {
  from {
    stroke-dashoffset: 60;
  }
  to {
    stroke-dashoffset: 120;
  }
}
#flinetoptodown {
  stroke-dasharray: 55;
  stroke-dashoffset: 55;
  animation: flinetoptodown 800ms forwards;
    animation-delay: 800ms;
} 
@keyframes flinetoptodown {
  from {
    stroke-dashoffset: 55;
  }
  to {
    stroke-dashoffset: 0;
  }
}

#flinebottomlefttoright {
  stroke-dasharray: 46;
    stroke-dashoffset: 46;
    animation: flinebottomlefttoright 800ms forwards;
    animation-delay: 1200ms;
} 

@keyframes flinebottomlefttoright {
  from {
    stroke-dashoffset: 46;
  }
  to {
    stroke-dashoffset: 0;
  }
}

#flinemiddlelefttoright {
  stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: flinemiddlelefttoright 800ms forwards;
    animation-delay: 1600ms;
}  
@keyframes flinemiddlelefttoright {
  from {
    stroke-dashoffset: 36;
  }
  to {
    stroke-dashoffset: 0;
  }
}

  
#slinetoplefttoright {
  stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: slinetoplefttoright 800ms forwards;
    animation-delay: 2000ms;
} 

@keyframes slinetoplefttoright {
  from {
    stroke-dashoffset: 30;
  }
  to {
    stroke-dashoffset: 0;
  }
}  

#slinetoptodown {
  stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: slinetoptodown 800ms forwards;
    animation-delay: 2400ms;
} 

@keyframes slinetoptodown {
  from {
    stroke-dashoffset: 60;
  }
  to {
    stroke-dashoffset: 0;
  }
}

#slinebottomlefttoright {
  stroke-dasharray: 70;
    stroke-dashoffset: 70;
    animation: slinebottomlefttoright 800ms forwards;
    animation-delay: 2800ms;
} 

@keyframes slinebottomlefttoright {
  from {
    stroke-dashoffset: 70;
  }
  to {
    stroke-dashoffset: 140;
  }
}

#slinetoptodownshort {
  stroke-dasharray: 21;
    stroke-dashoffset: 21;
    animation: slinetoptodownshort 800ms forwards;
    animation-delay: 3200ms;
} 

@keyframes slinetoptodownshort {
  from {
    stroke-dashoffset: 21;
  }
  to {
    stroke-dashoffset: 42;
  }
}


.vert-align-outer {
    display: table;
    width: 100%;
}

.vert-align-cell {
      display: table-cell;
    vertical-align: middle;
}