/*================ 01-GLOBAL STYLE ================*/
/* Google Fonts*/
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Lato:100,300');

* {
	padding: 0;
	margin: 0;
}
html,
 body {
	margin: 0;
    padding: 0;
	height: 100%;
	font-family: 'Lato', sans-serif;
	font-weight: 100;
	/*background-color: #000;*/
	background-color: #fff;
}

/* Text Selection color */
::selection {
	background: #fff;
}
::-moz-selection {
	background: #fff;
}

/* ---------- */
h1,
h2,
h3,
h4,
h5,
h6 {	
	font-family: 'Lato', sans-serif;
	font-weight: 100;
}

p {
	font-family: 'Lato', sans-serif;
	font-weight: 100;
}

/*================ 02.INTRO ================*/
.intro-section {
	background-image:url("../img/dino_back.jpg");
	background-size:cover;
	background-repeat: no-repeat;
	background-position:50% 0px;
	background-attachment:fixed;
	position:relative;
	height:100%;
}
.intro-section .overlay {
	/*background-color:rgba(0,0,0,0.3);*/
	height:100%;
}

/*================ WELCOME-AREA ================*/
.welcome-area {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.welcome-area span {
	color:#000;
	font-size:30px;	
}
.welcome-area h4 {
	color:#000;
	font-size:20px;
	letter-spacing:2px;
	margin-bottom:40px;
}
.welcome-area h4 span {
	color:#1bbca8;
	font-size:40px;
}

.typed {
	font-weight: 300;
}
.typed::after {
	content: '|';
	display: inline;
	color:rgba(0, 0, 0, 0.7);
	-webkit-animation: blink 0.7s infinite;
	-moz-animation: blink 0.7s infinite;
	animation: blink 0.7s infinite;
}
.typed-cursor{
   opacity: 0;
	display: none;
}
/*Custom cursor animation*/
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
/*================ END INTRO ================*/

/*-------------------- -------- --------------------*/
/*--------------------  CUSTOM  --------------------*/
/*-------------------- -------- --------------------*/


.logo-img {
	margin-bottom: 50px;
}


.socials a {
	font-size: 22px;
	margin-right: 15px;
	color: #000;
}
.socials a:hover {
	color: rgba(0, 0, 0, 0.7);
}


@media screen and (max-width: 767px) {
	.welcome-area {
	    top: 40px;
		transform: none;
	}
	.welcome-area h4 {
		font-size:17px;
	}
	.welcome-text {
		text-align: center;
	}
	.intro-section {
		background-position: 59% 10px;
	}
	.logo-img {
	    margin-bottom: 30px;
	}
	.logo-img img {
	    max-width: 300px;
	    width: 100%;
	    margin: auto;
	}
	.socials a {
	    margin-right: 20px;
	    color: #000;
	    text-shadow: 0 0 3px #ffffff;
	}
	.typed {
		font-weight: 300;
	}
}