@charset "utf-8";
/* CSS Document */
body{
	background-color: #f0eff7;
}
/* width */
::-webkit-scrollbar {
    width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: none; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}
.gap20{
	height: 20px;
	clear: both;
}
.gap50{
	height: 50px;
	clear: both;
}
.gap80{
	height: 10px;
	clear: both;
}
.gap100{
	height: 100px;
	clear: both;
}
hr{border: solid 1px #ccc;}

.slideanim {visibility:hidden;}
  .slide {
      animation-name: slide;
      -webkit-animation-name: slide;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
  }
  @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }
  @media screen and (max-width: 768px) {
    .col-sm-4 {
      text-align: center;
      margin: 25px 0;
    }
    .btn-lg {
        width: 100%;
        margin-bottom: 35px;
    }
  }
  @media screen and (max-width: 480px) {
    .logo {
        font-size: 150px;
    }
  }



/* animation style end */


/* top button start */
#myBtn {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #ff3333;
  color: white;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 100px;
  
	
}

#myBtn:hover {
  background-color: #5cb85c;
}
/* top button end */



/* video style start */
#myVideo {
    /*position: fixed;*/
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}

.content {
    position: absolute;
    bottom: 0;
	top: 0;
    /*background: rgba(0, 0, 0, 0.5);*/
    width: 100%;
}

/*#myBtn {
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #ff3333;
    color: #fff;
    cursor: pointer;
}

#myBtn:hover {
    background: #242327;
    color: black;
	color: #ff3333;
}
*//* video style end */


/* main menu style start */
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    background-color:#242327;
   background-color: rgba(0,0,0, 0.9);
   overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 15%;
    width: 100%;
    text-align: right;
    margin-top: 30px;
}

.overlay a {
    padding: 2px;
    text-decoration: none;
    font-size: 65px;
	font-family: 'Roboto-Bold';
    color: #f0eff7;
    display: block;
    transition: 0.3s;
	margin-right: 10%;
}

.overlay a:hover, .overlay a:focus {
    color: #ff3333;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 0;
  }
}
/* main menu style end */


/* header style start */
.menu_header{
	height: 150px;
	/*background: #fff;
	opacity: 0.6;*/
}
.icn_menu{
	margin: 2px -20px 0px 0px;
}
.logo_box{
	margin: 30px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 48px;
	color: #ff3333;
	text-decoration: none;
}
.logo_box:hover{
	color: #ff3333;
	text-decoration: none;
}
/* header style end */


.im{
	font-size: 5em;
	color: #242327;
	position: relative;
/*	margin: 0px 0px 0px 0px;
	padding: -10px 0px 0px 0px;
*/}

.nc{
	font-size: 4em;
	color: #ff3333;
	position: relative;
/*	margin: -10px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
*/}
.bfa_medium{
	font-size: 1.7em;
	color: #242327;
	position: relative;
	/*margin: -10px 0px 0px 0px;
	padding: 0px 0px 0px 0px;*/
}
.bfa_thin{
	font-size: 1.7em;
	color: #242327;
	position: relative;
	/*margin: -10px 0px 0px 0px;
	padding: 0px 0px 0px 0px;*/
}
.icn_facebook{
	font-size: 1em;
	color: #3B5998;
	margin-left: 28px;
	text-decoration: none;
}
.behance{
	font-size: 1em;
	color: #55ACEE;
	margin-left: 20px;
	text-decoration: none;
}
.icn_google{
	font-size: 1em;
	color: #dd4b39;
	margin-left: 20px;
	text-decoration: none;
}
.icn_twitter{
	font-size: 1em;
	color: #55ACEE;
	margin-left: 20px;
	text-decoration: none;
}
.icn_linkedin{
	font-size: 1em;
	color: #007bb5;
	margin-left: 20px;
	text-decoration: none;
}
.icn_youtube{
	font-size: 1em;
	color: #bb0000;
	margin-left: 20px;
	text-decoration: none;
}

.uiux{
	font-size: 3em;
	color: #242327;
 	margin: 30px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
  }

.common_fonts{
	font-size: 2em;
	color: #242327;
 	margin: 30px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
  }

.yellow_mark {
  position: relative;
  z-index: 1;
}
.yellow_mark:before {
  border-top: 8px solid #ffff33;
  content: "";
  margin: 0 auto;
  /* this centers the line to the full width specified */
  position: absolute;
  /* positioning must be absolute here, and relative positioning must be applied to the parent */
  top: 64%;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  z-index: -1;
}
.yellow_mark span {
  /* to hide the lines from behind the text, you have to set the background color the same as the container */
  background: #fff;
  padding: 0 15px;
}



/* animated button start */
.button_box{
	margin: 50px 0px 0px 0px;
	
}
.button {
  background-color: #5cb85c;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  padding: 15px;
  width: 250px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}
.button a{
  color: #FFFFFF;
	text-decoration: none;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
	
}

.button:hover span {
  padding-right: 25px;
	
}

.button_mobile {
  background-color: #f0eff7;
  border: none;
  color: #5cb85c;
  text-align: center;
  font-size: 20px;
  padding: 15px;
  width: 250px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
	border: solid 1px #5cb85c;
}
.button_mobile:hover {
  background-color: #5cb85c;
	color: #f0eff7;
}

.button_mobile span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button_mobile span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
	
}

.button_mobile:hover span {
  padding-right: 25px;
	
	
}
.main_icons{
	font-size: 1.2em;
}
/* animated button end */

/* skills style start */
.skill_box {
  width: 100%;
  background-color: #ddd;
}
.skills {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
}

.sixty {width: 60%; background-color: #4CAF50;}
.sixty_five {width: 65%; background-color: #4CAF50;}
.seventy {width: 70%; background-color: #4CAF50;}

/* skills style end */

/* social icon style start */
.fa {
  padding: 5px;
  font-size: 20px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
	text-decoration: none;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}

.fa-android {
  background: #a4c639;
  color: white;
}

.fa-dribbble {
  background: #ea4c89;
  color: white;
}

.fa-vimeo {
  background: #45bbff;
  color: white;
}

.fa-tumblr {
  background: #2c4762;
  color: white;
}

.fa-vine {
  background: #00b489;
  color: white;
}

.fa-foursquare {
  background: #45bbff;
  color: white;
}

.fa-stumbleupon {
  background: #eb4924;
  color: white;
}

.fa-flickr {
  background: #f40083;
  color: white;
}

.fa-yahoo {
  background: #430297;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-rss {
  background: #ff6600;
  color: white;
}
/* social icon style end */

/* form style start */
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.form_box {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
/* form style end */

/* light box style start */

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

/* light box style end */


.footer_text{
	color: #ccc;
	padding: 20px 0px 20px 0px;
}