/*--------------------------------------------------------------------------
 Project 		: ME+ | Responsive Modern V-card
 Author 		: Mias Marthinus
----------------------------------------------------------------------------
 Copyright (c) 2016 - MiasStudio 
--------------------------------------------------------------------------*/


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
							  TABLE OF CONTENT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[1] LARGE SCREEN
+-- [1.1] Canvas
|   +-- [1.1.1] Image 
|   +-- [1.1.2] Pages 
|   	+-- [1.1.2.1] Page Resume 
|   	+-- [1.1.2.2] Page Portofolio 
|   	+-- [1.1.2.3] Page Hire Me 
|
[2] SMALL SCREEN
+-- [2.1] Canvas
    +-- [2.1.1] Image 
    +-- [2.1.2] Pages 
    	+-- [2.1.2.1] Page Resume 
    	+-- [2.1.2.2] Page Portofolio 
    	+-- [2.1.2.3] Page Hire Me

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

@charset "utf-8";


/* 
===============================================================================
 ALL SCREEN
===============================================================================
*/

#canvas > .ec-page > div{
	-webkit-transition:opacity 0.5s;
			transition:opacity 0.5s;
	
	-webkit-transition-timing-function:ease-in-out;
			transition-timing-function:ease-in-out;
}


/*
=============================================================================== 
 LARGE SCREEN
===============================================================================
*/
@media only screen and (min-device-width:993px){
	
	/*
	---------------------------------------------------------------------------
	 PAGES
	---------------------------------------------------------------------------
	*/
	
	/* pages */
	#canvas > .ec-page:nth-child(1) > div{
		width:100vw;
		height:100vh;
		overflow-x:hidden;
		overflow-y:auto;
	}
	
	/* pages > div */
	#canvas > .ec-page:nth-child(1) > div > div{
		position:absolute;
	}
	
	/* pages cover */
	#canvas > .ec-page:nth-child(1) > div > div:nth-child(1){
		top:auto;
		bottom:0;
		left:0;
		height:calc( 100% - 5vw );
		width:35%;
		background-size:cover;
		background-repeat:no-repeat;
		background-position:center;
	}
	
	/* pages cover > all child  */
	#canvas > .ec-page:nth-child(1) > div > div:nth-child(1) > div{
		position:absolute;
	}
	
	/* page cover > image scrim */
	#canvas > .ec-page:nth-child(1) > div > div:nth-child(1) > div:nth-child(1){
		width:100%;
		height:100%;
	}
	
	/* page cover > page title */
	#canvas > .ec-page:nth-child(1) > div > div:nth-child(1) > div:nth-child(2){
		top:auto;
		bottom:0;
		left:0;
		width:100%;
	}
	
	/* pages content */
	#canvas > .ec-page:nth-child(1) > div > div:nth-child(2){
		top:5vw;
		left:auto;
		right:0;
		height:calc( 100% - 5vw );
		width:65%;
		padding:0 2.5vw;
		overflow-x:hidden;
		overflow-y:auto;
	}
	
	/* pages content > hr */
	#canvas > .ec-page:nth-child(1) > div > div:nth-child(2) > hr{
		margin-top:5vw;
	}
	
	/* pages content > section title */
	#canvas > .ec-page:nth-child(1) > div > div:nth-child(2) > .section-title{
		margin-top:-2.25vw;
		margin-bottom:1.25vw;
	}
	
	/*
	---------------------------------------------------------------------------
	 PAGE 1 : resume
	---------------------------------------------------------------------------
	*/
	
	/* INFORMATION */
	
	#page-resume-information{
		font-size:0;
		word-spacing:0;
		letter-spacing:0;
	}
	
	#page-resume-information > div{
		display:inline-block;
		vertical-align:middle;
		width:calc( 50% - 1.25vw );
		margin:0.3125vw 0.625vw;
	}
	
	/* SKILLS */
	
	/* skill row */
	#page-resume-skills > div{
		margin-bottom:1.25vw;
	}
	
	/* skill bar container */
	#page-resume-skills > div > div:nth-child(2){
		padding-left:2.5vw;
	}
	
	/* skill bar line container */
	#page-resume-skills > div > div:nth-child(2) > div{
		position:relative;
		height:0;
		margin-top:0.875vw;
		overflow-y:show;
		border-style:solid;
		border-width:0.625vw 0 0 0;
	}
	
	/* skill bar */
	#page-resume-skills > div > div:nth-child(2) > div > div{
		position:absolute;
		height:1.125vw;
		top:-0.875vw;
		left:0;
	}
	
	/* TIMELINE */
	
	/* item */
	#page-resume-timeline > div > div{
		margin:2.5vw 0;
	}
	
	/* subtitle margin */
	#page-resume-timeline > div > div > h6 > span:nth-child(1){
		margin-right:1.25vw;
	}
	
	/*
	---------------------------------------------------------------------------
	 PAGE 2 : PORTOFOLIO
	---------------------------------------------------------------------------
	*/
	
	/* item */
	#page-portofolio-items > div{
		margin:2.5vw 0;
	}
	
	/* negate the ul margin */
	#page-portofolio-items ul{
		margin:0;
	}
	
	/* decrease p margin */
	#page-portofolio-items p{
		margin-top:1.25vw;
	}
	
	/* image preview */
	#page-portofolio-items > div > div:nth-child(1){
		height:40vw;
		background-size:cover;
		background-repeat:no-repeat;
		background-position:center;
	}
	
	/* left side > item detail margin */
	#page-portofolio-items > div > div:nth-child(2) > div:nth-child(1) > ul > li > strong{
		margin-right:0.625vw;
	}
	
	/*
	---------------------------------------------------------------------------
	 PAGE 3 : HIRE
	---------------------------------------------------------------------------
	*/
	
	/* TESTIMONIALS */
	
	#page-hire-testimonial{
		font-size:0;
		word-spacing:0;
		letter-spacing:0;
	}
	
	#page-hire-testimonial > div{
		display:inline-block;
		vertical-align:middle;
		width:calc( 50% - 1.25vw );
		margin:0.625vw;
	}
	
	/* SERVICES */
	#page-hire-services > div > div{
		margin:2.5vw 0;
	}
	
	/* SCHEDULE */
	
	#page-hire-schedule{
		font-size:0;
		word-spacing:0;
		letter-spacing:0;
	}
	
	#page-hire-schedule > div{
		display:inline-block;
		vertical-align:middle;
		width:calc( 50% - 1.25vw );
		margin:0.625vw;
	}
	
	#page-hire-schedule > div > span:nth-child(1){
		opacity:0.5;
	}
	
	#page-hire-schedule > div > h6{
		margin-top:1.25vw;
	}
	
	#page-hire-schedule > div > h6 > span:nth-child(1){
		margin-right:0.625vw;
	}
	
	/* CONTACT */
	
	#page-hire-contact > .ms-row{
		margin-top:2.5vw;
	}
	
	#page-hire-contact .fa{
		margin-right:0.625vw;
	}
	
	#page-hire-contact form > p:nth-child(1) > textarea,
	#page-hire-contact form > p:nth-child(1) > input{
		width:100%;
		min-width:100%;
		max-width:100%;
		padding:0.625vw 1.25vw;
		margin:0.625vw 0;
		border-style:none;
	}
	
	/* MAP */
	#page-hire-map{
		height:30vw;
	}
	
	/* ADDRESS */
	#page-hire-address .fa{
		margin-right:0.625vw;
	}
	
}

/* 
===============================================================================
 SMALL SCREEN 
===============================================================================
*/
@media only screen and (max-device-width:992px){
	
	/*
	---------------------------------------------------------------------------
	 PAGES
	---------------------------------------------------------------------------
	*/
	
	#canvas > .ec-page:nth-child(1){
		position:absolute;
		top:15vw;
	}
	
	/* pages */
	#canvas > .ec-page:nth-child(1) > div{
		width:100vw;
		height:calc( 100vh - 30vw );
		overflow-x:hidden;
		overflow-y:auto
	}
	
	/* pages cover */
	#canvas > .ec-page:nth-child(1) > div > div:nth-child(1){
		position:relative;
		height:120vw;
		background-size:cover;
		background-repeat:no-repeat;
		background-position:center;
	}
	
	/* pages cover > all child  */
	#canvas > .ec-page:nth-child(1) > div > div:nth-child(1) > div{
		position:absolute;
	}
	
	/* page cover > image scrim */
	#canvas > .ec-page:nth-child(1) > div > div:nth-child(1) > div:nth-child(1){
		width:100%;
		height:100%;
	}
	
	/* page cover > page title */
	#canvas > .ec-page:nth-child(1) > div > div:nth-child(1) > div:nth-child(2){
		top:auto;
		bottom:0;
		left:0;
		width:100%;
	}
	
	/* pages content */
	#canvas > .ec-page:nth-child(1) > div > div:nth-child(2){
		padding:0 5vw;
	}
	
	/* pages content > hr */
	#canvas > .ec-page:nth-child(1) > div > div:nth-child(2) > hr{
		margin-top:10vw;
	}
	
	/* pages content > section title */
	#canvas > .ec-page:nth-child(1) > div > div:nth-child(2) > .section-title{
		margin-top:-5.25vw;
		margin-bottom:1.25vw;
	}
	
	/*
	---------------------------------------------------------------------------
	 PAGE 1 : resume
	---------------------------------------------------------------------------
	*/
	
	/* INFORMATION */
	
	#page-resume-information{
		font-size:0;
		word-spacing:0;
		letter-spacing:0;
	}
	
	#page-resume-information > div{
		margin:2.5vw 0;
	}
	
	/* SKILLS */
	
	/* skill row */
	#page-resume-skills > div{
		margin-bottom:5vw;
		word-wrap:break-word;
	}
	
	/* skill bar container */
	#page-resume-skills > div > div:nth-child(2){
		padding-left:2.5vw;
	}
	
	/* skill bar line container */
	#page-resume-skills > div > div:nth-child(2) > div{
		position:relative;
		height:5vw;
		border-style:solid;
		border-width:1.25vw;
	}
	
	/* skill bar */
	#page-resume-skills > div > div:nth-child(2) > div > div{
		position:absolute;
		height:2.5vw;
		top:0;
		left:auto;
		right:0;
	}
	
	/* TIMELINE */
	
	/* item */
	#page-resume-timeline > div > div{
		margin:5vw 0;
	}
	
	/* subtitle margin */
	#page-resume-timeline > div > div > h6 > span:nth-child(1){
		margin-right:2.5vw;
	}
	
	/*
	---------------------------------------------------------------------------
	 PAGE 2 : PORTOFOLIO
	---------------------------------------------------------------------------
	*/
	
	/* item */
	#page-portofolio-items > div{
		margin:5vw 0;
	}
	
	/* negate the ul margin */
	#page-portofolio-items ul{
		margin:0;
	}
	
	/* decrease p margin */
	#page-portofolio-items p{
		margin-top:2.5vw;
	}
	
	/* image preview */
	#page-portofolio-items > div > div:nth-child(1){
		height:60vw;
		background-size:cover;
		background-repeat:no-repeat;
		background-position:center;
	}
	
	/* left side > item detail margin */
	#page-portofolio-items > div > div:nth-child(2) > div:nth-child(1) > ul > li > strong{
		margin-right:1.25vw;
	}
	
	/*
	---------------------------------------------------------------------------
	 PAGE 3 : HIRE
	---------------------------------------------------------------------------
	*/
	
	/* HEADER */
	#page-hire-header > div{
		margin:5vw 0;
	}
	
	/* TESTIMONIALS */
	
	#page-hire-testimonial{
		font-size:0;
		word-spacing:0;
		letter-spacing:0;
	}
	
	#page-hire-testimonial > div{
		margin:2.5vw 0;
	}
	
	/* SERVICES */
	#page-hire-services > div > div{
		margin:5vw 0;
	}
	
	/* SCHEDULE */
	
	#page-hire-schedule{
		font-size:0;
		word-spacing:0;
		letter-spacing:0;
	}
	
	#page-hire-schedule > div{
		margin:2.5vw;
	}
	
	#page-hire-schedule > div > span:nth-child(1){
		opacity:0.5;
	}
	
	#page-hire-schedule > div > h6{
		margin-top:2.5vw;
	}
	
	#page-hire-schedule > div > h6 > span:nth-child(1){
		margin-right:1.25vw;
	}
	
	/* CONTACT */
	
	#page-hire-contact > .ms-row{
		margin-top:5vw;
	}
	
	#page-hire-contact .fa{
		margin-right:1.25vw;
	}
	
	#page-hire-contact form > p:nth-child(1) > textarea,
	#page-hire-contact form > p:nth-child(1) > input{
		width:100%;
		min-width:100%;
		max-width:100%;
		padding:1.25vw 2.5vw;
		margin:1.25vw 0;
		border-style:none;
	}
	
	/* MAP */
	#page-hire-map{
		height:100vw;
	}
	
	/* ADDRESS */
	#page-hire-address .fa{
		margin-right:1.25vw;
	}
	
}