/* HTML & BODY */

body {
	font-family: 'Montserrat', sans-serif;
	font-size: medium;
	margin: 0;
	color: #324c5d;
}

*:focus {
    outline: none;
}

/* WAPPERS */

.wrapper {
	width: 100%;
	text-align: center;
	padding: 80px 0;
}

.wrapper.alt {
	background-color: #ecf0f1;
}

.wrapper.navbar {
	position: fixed;
	height: 90px;
	padding: 0;
	z-index: 5;
	line-height: 90px;
	background-color: transparent;
}

.wrapper.navbar.onscroll {
	background-color: #ffffff;
	-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
    line-height: 60px;
    height: 60px;
}

.wrapper.header {
	background-color: #324c5d;
	background-image: url(../images/img_main_bg.png);
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	padding-top: 170px;
}

.wrapper.skills {
	padding-bottom: 30px;
}

.wrapper.contact {
	background-color: #324c5d;
}

.wrapper.footer {
	background-color: #192835;
	padding: 0;
	line-height: 90px;
}

/* NAVBAR & FOOTER */

.logo {
	float: left;
	font-size: 2em;
}

.logo:hover, a:focus i.logo {
	color: #db4550 !important;
}

.link {
	float: right;
	margin-left: 30px;
	color: #ffffff;
}

.wrapper.navbar.onscroll .link {
	color: #324c5d;
}

.link.ic {
	padding-right: 10px;
}

.link:hover, .wrapper.navbar.onscroll div.link:hover, .link.ic:hover, .link.ic:focus {
	color: #ea5b4d !important;
	text-decoration: none;
}

/* STYLES */

.btn, input, textarea {
	width: 100%;
	height: 50px;
	-moz-border-radius: 3x;
	border-radius: 3px;
	text-decoration: none;
	display: block;
	margin-bottom: 20px;
	border: none;
	padding-left: 15px;
	padding-right: 15px;
}

textarea {
	padding: 15px;
	height: auto;
	resize: vertical;
}

.btn {
	text-transform: uppercase;
	font-weight: 700;
	background-color: #ea5b4d;
	line-height: 50px;
	font-size: 14px;
	color: #ffffff;
}

a.btn:hover, a.btn:focus {
	color: #ffffff;
	background-color: #db4550;
	text-decoration: none;
}

.btn.alt {
	background-color: #324c5d;
}

.btn.alt:hover, .btn.alt:focus {
	background-color: #293b4f;
}

.social {
	font-size: 3em;
	color: #ffffff;
	margin: 0 15px;
}

.social.ic-dribbble:hover {
	color: #ea4c89;
}

.social.ic-cargo:hover {
	color: #00c563;
}

.social.ic-linkedin:hover {
	color: #1e8fc1;
}

.img-project {
	max-width: 710px;
	width: 100%;
	margin-bottom: 30px;
}

.line {
	width: 50px;
	margin: 0 auto 50px;
	border-bottom: 3px solid #ea5b4d;
}

.grey {
	color: #7f8c8d;
}

.mb50 {
	margin-bottom: 50px;
}

.p15 {
	padding-left: 15px;
	padding-right: 15px;
}

.nopadding {
	padding: 0;
}

/* TEXT */

b {
	font-weight: 700;
}

h1 {
	color: #ea5b4d;
	margin: 50px auto;
}

h2 {
	margin-bottom: 50px;
}

h2.alt {
	color: #ffffff;
}

.header {
	color: #ffffff;
}

a, a:hover  {
	color: #ea5b4d;
	font-weight: 700;
}

a.mail:visited, a.mail:focus {
	color: #ea5b4d;
	font-weight: 700;
}

p {
	line-height: 1.8em;
}

/* ANIMATED */

.animated {
	width: 350px;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}

.animated.uiux {
	background: url("../images/uiux.png") top center;
}

.animated.code {
	background: url("../images/code.png") top center;
}

.animated.illustration {
	background: url("../images/illustration.png") top center;
}

@keyframes play {
   100% { background-position: 0 -9000px; }
}

.animated {
  animation: play 3s steps(45) infinite;
}

/* ANIMATIONS */

.btn, input, .textarea, .social {
	-webkit-transition: all 0.2s ease;
  	transition: all 0.2s ease;
}

.wrapper {
	-webkit-transition: all 0.5s ease;
  	transition: all 0.5s ease;
}

/* MEDIA */

@media (max-width: 768px) { 
	.logo {
		float: none;
	}
	
@media (max-width: 390px) { 
	.animated {
		width: 100%;
		max-width: 350px;
	}
	
	.animated.uiux, .animated.code, .animated.illustration {
		background-size: 100% 9000px;
	}
	
	.col-lg-4.mb50 {
		padding-left: 0;
		padding-right: 0;
	}
}