/* Grow */
.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.1);
}

*{
	padding: 0;
	margin: 0;
}
body{
	font-family: 'Open Sans', sans-serif;
}

.navbar-default{
	background-color: transparent;
	border-color: transparent;
}

.navbar-default .navbar-toggle {
    border-color: #fec20f;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: transparent;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fec20f;
}

.navbar-default .navbar-nav > li > a {
    color: #fec20f;
	transition: all 1s ease;
	font-size: 16px;
}

.navbar-default .navbar-nav > li > a:hover{
	color: #fec20f;
}

.navbar-default .navbar-brand {
    color: #fec20f;
}

.navbar-default .navbar-brand:hover {
    color: #fec20f ;
}

.bg{
	background-color: #293540;
	min-height: 700px;
}

.bg .head-me{
	padding-top: 160px;
}

.bg h2,h3{
	color: #fec20f;
}

.bg .head-me h2{
	font-size: 80px;
}

.bg .head-me h3{
	padding-top: 30px;
}

.bg hr{
	display: block;
	margin: auto;
	width: 870px;
	border: 1px solid #fec20f;
	background-color: #fec20f;
}

.bg .head-me button a{
	text-decoration: none;
	color: #293540;
}

.bg .head-me button{
	font-size: 16px;
	color:  #293540;
	margin-top: 100px;
    width: 130px;
    height: 40px;
    background: #fec20f ;
    border: 1px solid  #293540;
}

.about-me{
	padding-top: 60px;
	height: 700px;
	background-color: #293540;
}

.about-me h1{
	color: #fec20f;
	padding-bottom: 30px;
}

.about-me p{
	color: #fec20f;
	font-size: 18px;
	padding-bottom: 100px;
}

.about-me h3{
	padding-top: 80px;
	color: #fec20f;
}

.about-me .progress-bar{
	background-color: #fec20f;
	color: #293540;
	font-size: 18px;
}

.features{
	height: 700px;
	background-color: #fec20f;
	padding-top: 60px;
}

.features h1{
	color: #293540;
	padding-bottom: 10px;
}

.features span{
	padding-bottom: 20px;
	font-size: 65px;
}

.features h2{
	font-size: 20px;
	padding-bottom: 60px;
}

.features h3{
	color: #293540;
}

.features p{
	font-size: 16px;
	font-weight: 600;
	padding-bottom: 60px;
	padding-top: 10px;
}

.cv{
	height: 400px;
    background-color: #fec20f;
    padding-top: 127px;
}

.cv span{
	font-size: 70px;
	color: #293540;
}

.cv p{
	padding-top: 35px;
	color: #293540;
	font-size: 20px;
}

.contact{
	height: 471px;
	background-color: #293540;
	padding-top: 60px;
}

.contact h1{
	color: #fec20f;
	padding-bottom: 30px;

}

.contact p{
	color: #fec20f;
	font-size: 18px;
}

.contact ul{
	padding-top: 40px;
	list-style: none;
}

.contact ul a{
	text-decoration: none;
}

.contact ul li{
    display: inline-block;
    padding-left: 12px;
    padding-top: 14px;
    padding-right: 12px;
    padding-bottom: 68px;
}


.contact ul li span{
	font-size: 30px;
	color: #fec20f;
}

.water-mark{
	height: 100px;
	background-color: #ddd;
}

.water-mark p{
	font-size: 24px;
	padding-top: 20px;
}
/*********************************************** responsive ******************************************************/

/* header */
@media only screen and (max-width: 992px){
	.bg .head-me h2 {
    font-size: 70px;
	}
	.bg hr{
		width: 730px;
	}
	.bg .head-me button{
		margin-top: 110px;
	}
}

@media only screen and (max-width: 870px){
	.bg .head-me h2 {
    font-size: 60px;
	}
	.bg hr{
		width: 620px;
	}
	.bg .head-me button{
		margin-top: 120px;
	}
}

@media only screen and (max-width: 767px){
	.bg .head-me h2 {
    font-size: 55px;
	}
	.bg .head-me button{
		margin-top: 150px;
	}
}

@media only screen and (max-width: 675px){
	.bg .head-me h2 {
    font-size: 38px;
	}
	.bg hr {
    width: 385px;
	}
	.bg .head-me button{
		margin-top: 155px;
	}
}

@media only screen and (max-width: 505px){
	.bg .head-me h2 {
    font-size: 30px;
	}
	.bg hr {
    width: 300px;
	}
	.bg .head-me h3 {
    padding-top: 47px;
    font-size: 18px;
}
}

/* skills */
@media only screen and (max-width: 649px){
	.about-me h1{
		font-size: 28px;
	}
	.about-me p{
		font-size: 16px;
	}
}

@media only screen and (max-width: 685px){
	.about-me h3{
		padding-top: 77px;
	}
}



@media only screen and (max-width: 401px){
	.about-me h3{
		padding-top: 95px;
	}
}

@media only screen and (max-width: 375px){
	.about-me h3{
		padding-top: 90px;
    	text-align: center;
	}
}

@media only screen and (max-width: 375px){
	.about-me p{
		font-size: 15px;
	}
}

@media only screen and (max-width: 290px){
	.about-me h3{
		padding-top: 75px;
	}
}

@media only screen and (max-width: 268px){
	.about-me p{
		font-size: 14px;
	}
	.about-me h3{
		font-size: 20px;
	}
}

@media only screen and (max-width: 236px){
	.about-me h1{
		padding-bottom: 20px;
	}
}

/* features */
@media only screen and (max-width: 1199px){
	.features{
		height: 725px;
	}
}

@media only screen and (max-width: 991px){
	.features{
		height: 1030px;
	}
}

@media only screen and (max-width: 767px){
	.features{
		height: 1710px;
	}
}

@media only screen and (max-width: 340px){
	.features h3{
		font-size: 20px;
	}
}

@media only screen and (max-width: 288px){
	.features h3{
		font-size: 18px;
	}
}

/* cv section */
@media only screen and (max-width: 767px){
	.cv {
    height: 680px;
    background-color: #fec20f;
    padding-top: 90px;
	}
	.cv p {
    padding-top: 30px;
    padding-bottom: 40px;
    color: #293540;
    font-size: 20px;
}
}

@media only screen and (max-width: 334px){
	.contact ul li {
    display: inline-block;
    padding-left: 12px;
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 40px;
}
}

@media only screen and (max-width: 340px){
	.water-mark {
    height: 135px;
    background-color: #ddd;
}
}