@charset "UTF-8";
/* CSS Document */

/*---------------------------------------------------------
// Example
// Apply styles starting from medium devices and up to extra large devices
-----------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 1199.98px) {}
/*---------------------------------------------------------
// X-Small devices (portrait phones, less than 576px)
-----------------------------------------------------------*/
	
@media (max-width: 575.98px) {
	
	h1{ font-size: 4em!important}

	
	#resume {margin-top: 120px!important;}
	
	#resume .title.rotate {margin-top: 190px!important; margin-bottom: -13px!important}
	
	#resume .content-experience {width: 100%!important}
	
	#resume .date.rotate {transform: rotate(-90deg)!important; margin: -40px 0px 0px 50px!important;}
	
	#resume .education {padding: 30px 40px!important; }
	
	#skills .picture {display: none}
	
	.button {padding: 20px; height: 10%!important}

}
/*---------------------------------------------------------
// Small devices (landscape phones, less than 768px)
-----------------------------------------------------------*/
@media (max-width: 767.98px) {
	
	/*------ Overlay ------*/
	
	.overlay .content {width: 100%; background: rgba(214,205,196,1.0);}
}
	
	
/*---------------------------------------------------------
// Medium devices (tablets, less than 992px)
-----------------------------------------------------------*/
@media (max-width: 991.98px) {
	
	#resume .content-experience {width: calc(100% - 20%)}
	
	/* ---------- section slide effect --------------- */
	
	section.fadeRight {opacity:1; transform: none; transition: none} 

	section.fadeRight.inactive, body.all-loaded section.fadeRight {opacity: 1; transform: none;}

	section.fadeLeft {opacity: 1; transform: none; transition: none;} 

	section.fadeLeft.inactive, body.all-loaded section.fadeLeft {opacity: 1; transform: none;}
	
	/* ---------- title slide effect --------------- */
	
	.fadeIn .title .fadeInLeft{ position: absolute; transform: none; opacity: 1; transition: none;}
	
	.fadeIn.inactive .title .fadeInLeft, body.is-preload .fadeIn .title .fadeInLeft {transform: none; opacity: 1;}

	.fadeIn  .title  .fadeInRight{ position: absolute; transform: none; opacity: 1; transition: none;}

	.fadeIn.inactive  .title  .fadeInRight,	body.is-preload .fadeIn  .title  .fadeInRight{ transform: none;	opacity: 1;}
	
	
	.hide-mobile {display: none}
	
	#main section, #main section .title {width: auto; margin: 20px 0; padding: 0!important;}
	
	#about .wrapper {margin-bottom: 500px }
		
	.rotate {writing-mode: horizontal-tb;; -webkit-writing-mode: horizontal-tb;; -ms-writing-mode: tb-rls}

		
	/*------ About ------*/
	
	#about .content	{align-content:flex-start}
	
	#about {height: 400px!important}
	
	
	/*------ Resume ------*/
	
	#resume .d-flex {flex-wrap: wrap-reverse}
		
	#resume .title {margin: 20px 0 !important; height: 50px;}

	#resume .content, #resume .content:first-child {margin: 0; width:100%}
	
	#resume .experience {background: #d6cdc4; padding: 20px} 
	
	#resume .date.rotate {writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl;}
	
	#resume .experience.d-flex {width:100%} 
	
	#resume .education {width:100%; padding: 30px 95px;}
	
	#resume .education {display: block}
	
	/*------ Skills ------*/
	
	#skills .picture {width: 100%; height:auto}
	
	#skills .title.rotate.skill {display: block; transform: rotate(0deg); margin:0; height: 500px}
	#skills .title.rotate.works {display: none}
	
	#skills .skills-container.d-flex, #skills .works-container.d-flex {width: 100%}
	#skills .skills-container.d-flex {margin-right: 0px;margin-top: 70px;}
	#skills .works-container.d-flex {margin-left: 0px}
	
	#skills .title.symbol {display: none}

/*---------------------------------------------------------
// Large devices (desktops, less than 1200px)
-----------------------------------------------------------*/
@media (max-width: 1199.98px) {#sidebar {display: none;} #main {width: 100%!important;}}

/*---------------------------------------------------------
// X-Large devices (large desktops, less than 1400px)
-----------------------------------------------------------*/
@media (max-width: 1399.98px) { }

/*---------------------------------------------------------
// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width
-----------------------------------------------------------*/