@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

body{
	  font-family: "Merriweather", serif;
}
h2{
	  font-family: "Lato", sans-serif;
}



/* common style end */
/*  https://codepen.io/samuelbeard/pen/kWVrZv  */
.button_link {
  display:inline-block;
  height:60px;
  line-height:60px;
  overflow:hidden;
  position:relative;
  text-align:center;
   
  color:black;
  border-radius:2px;
  transition:0.3s;
}

/*.button_link:hover {background:#19c664;}*/

/* button_link UP */
.label-up {
  display:block;
  margin:0px 30px;
  height:100%;
  position:relative;
  top:0%;
  transition:0.3s;
}

.button_link:hover .label-up {
  top:-100%;
}

/* button_link DOWN */
.label-down {
  display:block;
  margin:0px 30px;
  height:100%;
  position:relative;
  top:-100%;
  transition:0.3s;
}

.button_link:hover .label-down {
  top:0%;
}

.button_link a{ color: #0D0D0D; text-decoration: none; }



/* Smooth scroll stuff */
html {
    overflow-x: hidden;
    overflow-y: scroll;
}    

.js-cont {
    position: relative;
    width: 100%;
    height: 100%;
}

.js-scroll {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    will-change: transform;
}





/* social media links */

.social_links {
  display: flex;
  position: relative; justify-content: end;    position: absolute;
    right: 0px;
    bottom: 0px;  
}

.social_links li {
  list-style: none;
}

.social_links li a {
  width: 80px;
  height: 80px;
  background-color: #fff;
  text-align: center;
  line-height: 80px;
  font-size: 35px;
  margin: 0 10px;
  display: block;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 1px solid #0D0D0D;
  z-index: 1;
}

.social_links li a .icon {
  position: relative;
  color: #262626;
  transition: .5s;
  z-index: 3;
}

.social_links li a:hover .icon {
  color: #fff;
  transform: rotateY(360deg);
}

.social_links li a:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f00;
  transition: .5s;
  z-index: 2;
}

.social_links li a:hover:before {
  top: 0;
}

.social_links li:nth-child(1) a:before{
  background: #E6A210;
}
 

.social_links li:nth-child(2) a:before {
  background: #E6A210;
}
 






/*Sentence*/
.sentence{
     color: #222;
     font-size: 30px;
     text-align: left;
}
/*Wrapper*/
/*.wrapper{
    background-color: #f5f5f5;
    font-family: 'Raleway', sans-serif;
    margin: 100px auto;
    padding: 40px 40px;
    position: relative;
    width: 70%;
}*/

/*Vertical Sliding*/
.slidingVertical{
	display: inline;
	text-indent: 8px;
}
.slidingVertical span{
	animation: topToBottom 5s linear infinite 0s;
	-ms-animation: topToBottom 5s linear infinite 0s;
	-webkit-animation: topToBottom 5s linear infinite 0s;
	color: #00abe9;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.slidingVertical span:nth-child(2){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
} 

/*topToBottom Animation*/
@-moz-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: translateY(-50px); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	/*25% { opacity: 1; -moz-transform: translateY(0px); }*/
	30% { opacity: 1; -moz-transform: translateY(50px); }
	80% { opacity: 0; -moz-transform: translateY(50px); }
	100% { opacity: 0; -moz-transform: translateY(50px); }
}
@-webkit-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: translateY(-50px); }
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	/*25% { opacity: 1; -webkit-transform: translateY(0px); }*/
	30% { opacity: 0; -webkit-transform: translateY(50px); }
	80% { opacity: 0; -moz-transform: translateY(50px); }
	100% { opacity: 0; -moz-transform: translateY(50px); }
}
@-ms-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: translateY(-50px); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform: translateY(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
 



 /* moving text ---- */
 

/* xlHeaders */
.xlHeader {
  padding: 50px 0;
  overflow: hidden;
}
.xlHeader__header {
  font-size: 100px;
  line-height: 100px;
  text-align: center;width: 100%;
}
.xlHeader--right {
  /*padding: 92px 0;*/
  position: relative;
}
.xlHeader--right .xlHeader__header {
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translate(0px, -50%);
}


/*  Underline effect ----- */
.underline {
  position: relative;
  width: 100%;
  
  /*text-decoration: none;color: #fff;*/
}

.underline span {
  pointer-events: none;
}

.underline canvas {
  pointer-events: auto;
  position: absolute;
  top: 0;
  left: 0;
  /*background-color: rgba(222, 222, 222, 0.1);*/
  /*z-index: -1;*/
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  cursor: pointer;
}


p.text a {
  font-size: 48px;
  line-height: 1.4em;
  font-style: italic;
}

p a.title {
  font-size: 126px;
  line-height: 1.4em;
}

 
 .string_line {
  background-color: #000    ;  
  margin: auto;
  display: block;
  width: 100%;
  height: 100%;
}



/* about image  */


.photo{
  /*position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0%);*/
  display: block;
  width: 75%;
      margin: auto;
}

.photo img{
  max-width: 100%;
  width: 300px;
  height: 400px;
  object-fit: cover;
  filter: grayscale(100%) contrast(120%);
  box-shadow: 10px 15px 25px 0 rgba(0,0,0,.2);
  display: block;
  transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
  margin-top: -10px;
}

.photo:hover img{
  box-shadow: 1px 1px 10px 0 rgba(0,0,0,.1);
}

.photo .glow-wrap{
  overflow: hidden;
  /*position: absolute;*/
  width: 100%;
  height: 100%;
  top: 0;
  margin-top: -10px;
}

.photo .glow{
  display: block;
  position:absolute;
  width: 40%;
  height: 200%;
  background: rgba(255,255,255,.2);
  top: 0;
  filter: blur(5px);
  transform: rotate(45deg) translate(-450%, 0);
  transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photo:hover .glow{
  transform: rotate(45deg) translate(450%, 0);
  transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photo:hover img,
.photo:hover .glow-wrap{
  margin-top: 0;
}

h1{
  position: absolute;
  z-index: 1;
  transform: translate(-25%, -65%);
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  line-height: 1.2;
}


/* Ends */

#author{
  font-family: Helvetica, Arial;
  text-transform: uppercase;
  font-size: 14px;
  text-decoration: none;
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  color: #888;
}

#author:hover{
  color: #111;
}