/* ©Copyright JIJEE Adventure | All Rights Reserved */
@import url(http://fonts.googleapis.com/css?family=Lato:300,300italic,400,700%7CRoboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);

/*RESET*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-weight: 100; }


html {
	height: 100%; }	


body {
	background-color: #000;
	-webkit-text-size-adjust:none;
 	font-family: "Lato", sans-serif;
  	color: #6F6F6F;
  	font-size: 14px;
	height: 100%;
	width: 100%;
    text-align: left;
    position: relative;
    margin: 0 auto; }

	
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; }


blockquote, q {
	quotes: none; }


blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none; }


a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	text-decoration: none;
	background: transparent; }


ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none; }


mark {
	background-color: #ff9;
	color: #000;
	font-style: italic; }


del {
	text-decoration: line-through; }


abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help; }


table {
	border-collapse: collapse;
	border-spacing: 0; }


hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0; }


input, select {
	vertical-align: middle; }
/*END RESET*/



/*GLOBAL*/
*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; }


p {
	line-height: 170%;
	font-weight: 400;
	word-spacing: .125em;
	text-align: justify;
	margin: 0 0 25px 0; }


h2, .h2 {
	font-size: 17px;
	font-weight: 400;
	color: #333;
	margin-bottom: 35px; }
	@media (max-width: 800px) {
    h2, .h2 {
    	margin-bottom: 40px; } }


h3, .h3 {
	font-size: 21px;
	font-weight: 400;
	margin-bottom: 35px; }
	@media (max-width: 800px) {
    h3, .h3 {
    	margin-bottom: 40px; } }


h4, .h4 {
	font-size: 19px;
	font-weight: 400;
	margin-bottom: 45px; }
	@media (max-width: 800px) {
    h4, .h4 {
    	margin-bottom: 40px; } }


h5, .h5 {
	font-size: 19px;
	font-weight: 400;
	margin-bottom: 5px; }


em {
	font-weight: 400; }
/*END GLOBAL*/



/*PAGE WRAP AND HEADER*/
body > div.page_wrap {
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	width: 100%;
	display: -webkit-box;
	/* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;
	/* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;
	/* TWEENER - IE 10 */
	display: -webkit-flex;
	/* NEW - Chrome */
	display: flex;
	/* NEW, Spec - Opera 12.1, Firefox 20+ */
	-ms-flex-direction: row;
	-ms-flex-wrap: wrap;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	flex-flow: row wrap;
	-ms-flex-line-pack: stretch;
	-ms-align-items: stretch;
	-webkit-align-items: stretch;
	-moz-align-items: stretch;
	-ms-align-items: stretch;
	align-items: stretch; }


body > div > header > figure.banner-wrap {
	width: 100%;
  	height: 100vh;
  	position: relative;
  	z-index: 10; }

body > div > section > figure.banner-wrap {
	width: 100%;
  	height: 100vh;
  	position: relative;
  	z-index: 10; }

	
body > div > header > figure.bg1 {
	background: transparent url("/images/beach.jpeg") no-repeat scroll center center / cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	overflow: hidden; }
	@media (max-width: 900px) {
	body > div > header > figure.bg1 {
		background: transparent url("/images/beach.jpeg") no-repeat scroll top left / cover; } }


body > div > section > figure.bg2 {
	background: transparent url("/images/view.jpeg") no-repeat scroll center center / cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	overflow: hidden; }
	@media (max-width: 900px) {
	body > div > footer > figure.bg2 {
		background: transparent url("/images/view.jpeg") no-repeat scroll top left / cover; } }



	/*BRAND BOX HOME PAGE*/
	body > div > header > figure > section.brand {
		width: 100%;
		height: 100vh;
		margin: 0;
		background-color: rgba(0, 0, 0, 0);
		padding: 0; }
		

	body > div > header > figure > section > p.brand-header {
		color: #fff;
		background-color: #000;
		line-height: 40px;
		padding-left: 30px;
		font-family: "Roboto", sans-serif;
		font-size: 17px;
		font-weight: 400;
		word-spacing: normal; }
		@media (max-width: 350px) {
		body > div > header > figure > section > p.brand-header {
			padding-left: 10px;
			font-size: 15px; } }
		@media (max-height: 240px) {
		body > div > header > figure > section > p.brand-header {
			padding-left: 10px;
			font-size: 15px; } }

	body > div > header > figure > section > p > span.color-text {
		color: #2CA1DB;
		font-family: "Roboto", sans-serif;
		font-weight: 400;
		padding: 0 2px; }	
	

	/*SOCIAL MEDIA LINKS TOP*/
	body > div > header > figure > section > div.links-top {
		cursor: pointer;
		top: 10px;
		right: 50px;
		position: absolute; }
		@media (max-width: 800px) {
		body > div > header > figure > section > div.links-top {
			right: 25px;; } }
		@media (max-width: 290px) {
		body > div > header > figure > section > div.links-top {
			display:none; } }
	

	body > div > header > figure > section > div > a > i.color-icons {
		color: #FFF;
		font-size: 20px; }
		@media (max-width: 350px) {
		body > div > header > figure > section > div > a > i.color-icons {
			font-size: 18px; } }
		@media (max-height: 240px) {
		body > div > header > figure > section > div > a > i.color-icons {
			font-size: 18px; } }
	

	body > div > header > figure > section > div > a > i.color-icons:hover {
		color: #2CA1DB; }
		

	body > div > header > figure > section > div > a > i.color-icons:visited {
		color: #FFF; }
	
	
	body > div > header > figure > section > div > a > i.right-space {
		margin-right: 15px; }
		@media (max-width: 400px) {
		body > div > header > figure > section > div > a > i.right-space {
			margin-right: 10px; } }
	/*END SOCIAL MEDIA LINKS TOP*/


	body > div > header > figure > section > div.brandbox {
		position: absolute;
		width: 420px;
		margin: 30px 0 0 20px; }
		@media (max-width: 900px) {
		body > div > header > figure > section > div.brandbox {
			margin: 0px 0 0 0px; } }
		@media (max-width: 400px) {
		body > div > header > figure > section > div.brandbox {
			margin: 0 0 0 5px;
			width: 300px; } }
		@media (max-width: 290px) {
		body > div > header > figure > section > div.brandbox {
			width: 230px; } }


	body > div > header > figure > section > div > div.brand-sub-section {
		padding: 10px 30px 50px 30px; }
		@media (max-width: 290px) {
		body > div > header > figure > section > div > div.brand-sub-section {
			padding: 0px 10px 25px 10px; } }
		@media (max-height: 250px) {
		body > div > header > figure > section > div > div.brand-sub-section {
			padding: 0px 10px 25px 10px; } }
	
	
	body > div > header > figure > section > div > div > h1.brand-sub-section-title {
		font-family: "Roboto", sans-serif;
		text-align: left;
		color: #fff;
		line-height: 35px;
		font-size: 33px;
		font-weight: 300;
		margin: 0 0 35px 0; }
		@media (max-width: 290px) {
		body > div > header > figure > section > div > div > h1.brand-sub-section-title {
			font-size: 30px;
			margin: 0 0 25px 0; } }
		@media (max-height: 250px) {
		body > div > header > figure > section > div > div > h1.brand-sub-section-title {
			font-size: 30px;
			margin: 0 0 25px 0; } }
	

	body > div > header > figure > section > div > div > h1 > i.quote-icons {
		font-size: 20px;
	}

	
	body > div > header > figure > section > div > div > p.brand-sub-section-text {
		margin-bottom: 45px;
		font-family: "Roboto", sans-serif;
		text-align: left;
		font-size: 15px;
		color: #fff;
		font-weight: 400;
		word-spacing: .1em;
		line-height: 150%; }
	

	body > div > header > figure > section > div > div > a.brand-sub-section-contact-button {
		background-color: #2CA1DB;
		font-size: 14px;
		font-weight: 400;
		padding: 10px 20px;
		font-family: "Roboto", sans-serif;
		color: #fff;
		border-radius: 5px; }
		@media (max-height: 270px) {
		body > div > header > figure > section > div > div > a.brand-sub-section-contact-button {
			display: none; } }

	
	body > div > header > figure > section > div > div > a.brand-sub-section-contact-button:hover {
		background-color:  #fff;
		color: #000; }
	/*END BRAND BOX HOME PAGE*/


	body > div > header > figure > p.brand-phone {
		position: absolute;
		bottom: 00px;
		right: 50px;
		font-family: "Roboto", sans-serif;
		color: #FFF;
		font-size: 40px;
		font-weight: 100; }
		@media (max-width: 800px) {
		body > div > header > figure > p.brand-phone {
			right: 25px; } }
		@media (max-width: 650px) {
		body > div > header > figure > p.brand-phone {
			font-size: 25px; } }
		@media (max-width: 300px) {
		body > div > header > figure > p.brand-phone {
			font-size: 20px; } }
		@media (max-height: 250px) {
		body > div > header > figure > p.brand-phone {
			display: none; } }


	body > div > header > figure > p > i.right-space {
		margin-right: 15px; }
/*END PAGE WRAP AND HEADER*/



/*SECTION MAIN*/
body > div > section > article.sectionmain-art {
    float: left;
    width: 60%;
    position: relative;
	padding: 75px 50px 75px 100px;
	background-color: #fff; }
	@media (max-width: 800px) {
    body > div > section > article.sectionmain-art {
		width: 100%;
		float: none;
		padding: 75px 25px 75px 25px; } }


body > div > section > figure.sectionmain-fig {
    float: left;
    width: 40%;
    position: relative;
	padding: 100px 100px 25px 50px;
	background-color: #FFF; }
	body > div > section > figure.sectionmain-fig img {
    	width: 70%;
    	margin: 0 0 25px 15%;
    	-webkit-border-radius: 50%;
    	border-radius: 50%; }
	body > div > section > figure.sectionmain-fig figcaption {
		font-size: 18px;
		font-weight: 400;
    	text-align: center;
    	line-height: 140%; }
	@media (max-width: 800px) {
    body > div > section > figure.sectionmain-fig {
    	width: 100%;
    	float: none; 
		padding: 0px 25px 75px 25px; } }
/*END SECTION MAIN*/



/*SKILLS*/
#skills {
	display:none;
	clear: both; }

body > div > section > article.skills-art40 {
	float: left;
    width: 40%;
    position: relative;
	padding: 75px 50px 0px 100px;
	background-color: #fff; }
	@media (max-width: 800px) {
	body > div > section > article.skills-art40 {
		width: 100%;
    	float: none;
		padding: 25px 25px 0px 25px; } }

body > div > section > article.skills-art60 {
	float: left;
    width: 60%;
    position: relative;
	padding: 75px 100px 50px 50px;
	background-color: #fff; }
	@media (max-width: 800px) {
	body > div > section > article.skills-art60 {
		width: 100%;
    	float: none;
		padding: 10px 25px 50px 25px; } }



/*CONTACT*/
#contact {
	display:none;
	clear: both; }


body > div > section > article.contact-art40 {
	float: left;
    width: 40%;
    position: relative;
	padding: 25px 50px 0px 100px;
	background-color: #fff; }
	@media (max-width: 800px) {
	body > div > section > article.contact-art40 {
		width: 100%;
    	float: none;
		padding: 25px 25px 0px 25px; } }


body > div > section > article.contact-art60 {
	float: left;
    width: 60%;
    position: relative;
	padding: 25px 100px 75px 50px;
	background-color: #fff; }
	@media (max-width: 800px) {
	body > div > section > article.contact-art60 {
		width: 100%;
    	float: none;
		padding: 25px 25px 50px 25px; } }
/*END RECOMMENDATIONS*/



/*GET IN TOUCH*/
#get-in-touch {
	clear: both;
	padding: 25px 0 100px 0;
	text-align: center; }

body > div > section > a.get-in-touch-button {
	background-color:#2CA1DB;
	font-size: 14px;
	font-weight: 400;
	padding: 10px 15px;
	font-family: "Roboto", sans-serif;
	color: #fff;
	border-radius: 3px; }
	
	
body > div > section > a.get-in-touch-button:hover {
	background-color:  #ccc;
	color: #000; }
/*END GET IN TOUCH*/



/*FOOTER*/
body > div > footer {
	clear: both;
	background-color: #000;
	padding: 125px 0 125px 0;
	text-align: center; }
	@media (max-width: 250px) {
	body > div > footer {
		padding: 75px 0 75px 0; } }

	
	body > div > footer > section > p.footer-phone {
		font-family: "Roboto", sans-serif;
		color: #FFF;
		font-size: 25px;
		font-weight: 300;
		text-align: center; }
		body > div > footer > section > p i.right-space {
			margin-right: 10px; }
		@media (max-width: 280px) {
		body > div > footer > section > p.footer-phone {
			font-size: 20px; } }
		

	/*SOCIAL MEDIA ICONS BOTTOM*/
	body > div > footer > section > div.links-bottom {
		margin-top: 50px;
		cursor: pointer; }	
	
	
	body > div > footer > section > div > a > i.color-icons {
		color: #FFF;
		font-weight: 400;
		font-size: 24px; }
		@media (max-width: 280px) {
		body > div > footer > section > div > a > i.color-icons {
			font-size: 20px; } }
	
	
	body > div > footer > section > div > a > i.color-icons:hover {
		color: #2CA1DB; }
	
	
	body > div > footer > section > div > a > i.color-icons:visited {
		color: #2CA1DB; }
		
	
	body > div > footer > section > div > a > i.right-space {
		margin-right: 20px; }
	/*END SOCIAL MEDIA LINKS BOTTOM*/
/*FOOTER*/