/*
Author: Jorge Maricato
E-mail: jorge@maricato.net
Theme: "Strawberry-Lemon"
Webpage: www.caipiracreative.com.br/
Version: 1.1
*/

@font-face {
	font-family: "Blue Fonte Sans";
	src: url("./fonts/blue_fonte_sans.otf");
}

@font-face {
	font-family: "Boldfinger";
	src: url("./fonts/boldfinger.ttf");
}

:root {
	--font-family-boldfinger: 'Boldfinger', 'Blue Fonte Sans', 'Courier New', Courier, monospace;
	--font-family-couriernew: 'Courier New', Courier, monospace;
	
	--height-headerTopPage: 60px;
	--height-contactInfo: 50px;
}

* {
	box-sizing:border-box;
}

html {
	background: linear-gradient(340deg, #f2f2f2, #f4f4f4);
}

body{
	font-size:100%;
	color: #333;
	line-height:1.25rem;
	background-color:#FDFDFD;
	overflow-x: hidden;
}

a,
a:hover {
	color: #333;
	text-decoration: none;
}


/*
		------------ GENERAL STRUCTURE ------------ 
*/

#site{
	line-height: 0px;
	width:100%;
	text-align:center;
}

#siteFrame{
	display:none;
    width: 100%;
	min-width:300px;	
	line-height: 1.25rem;
}

#siteFrame .row{
	margin:0px;
}

#siteFrame.principalPage{display: inline-block;}
#siteFrame.principalPage #contactInfo{display: none;}
#siteFrame.coursesPage{display: inline-block;}
#siteFrame.photosPage{display: inline-block;background: linear-gradient(340deg, #f2f2f2, #f4f4f4);}

.module_10{
	height: 10vh;
	width: 100%;
}
.module_45{
	height: 45vh;
	width: 100%;
}
.module_50{
	height: 50vh;
	width: 100%;
	text-align: left;
}

.gradient-gray{
	background: linear-gradient(340deg, #f2f2f269, #f4f4f4e3);
}
/*
		------------ PRINCIPAL: SPECIFICATIONS ------------ 
*/

#principal{
	display:none;
	height: 100vh;
	color: #f9f9f9;
	line-height: 1.8rem;
}

#principal a{
	color: #f9f9f9;
}
#principal a p{
	text-shadow: 1px 1px #ae1c1c;
}
#principal a:hover p{
	text-shadow: 1px 1px #ff6000;
}
#principal p{
	font-size: 1.77rem;
	font-family: var(--font-family-couriernew);
}
#principal h5{
	font-size: 3.7rem;
	font-family: var(--font-family-boldfinger);
	text-shadow: 2px 2px 5px #333;
}

#principal #page-1{
	height: 100vh;
	overflow-x: hidden;
}
#principal #page-1 > div:nth-child(1) {
	background-image: linear-gradient(45deg, #ea0303, #f9c601);
}
#principal #page-1 > div:nth-child(2) {
	background-image: linear-gradient(135deg, #ea0303, #f9c601);
}

#principal #page-2{
	display: none;
	height: 100vh;
}
#principal #page-2 > div:nth-child(1) {
	background-image: linear-gradient(180deg, #6e098a, #393baa);
}
#principal #page-2 > div:nth-child(2) {
	background-image: linear-gradient(360deg, #ff04fb, #393baa);
}

#principal .change_arrow {
	cursor: pointer;
	height: 60px;
    width: 60px;
    position: absolute;
    top: calc(50vh - 30px);
    z-index: 1;
	background-size: contain;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

#principal #change_right{
    right: 5px;
	background-image: url("../images/icons/arrow_right.png");
	animation-name: change_page_arrow_right;
}
@keyframes change_page_arrow_right {
	0%   {right:5px;}
	50%  {right:20px;}
	100% {right:5px;}
}
@keyframes change_page_arrow_right-largescreen {
	0%   {right:calc(50vw - 512px);}
	50%  {right:calc(50vw - 497px);}
	100% {right:calc(50vw - 512px);}
}

#principal #change_left{
    left: 5px;
	background-image: url("../images/icons/arrow_left.png");
	animation-name: change_page_arrow_left;
}
@keyframes change_page_arrow_left {
	0%   {left:5px;}
	50%  {left:20px;}
	100% {left:5px;}
}
@keyframes change_page_arrow_left-largescreen {
	0%   {left:calc(50vw - 512px);}
	50%  {left:calc(50vw - 497px);}
	100% {left:calc(50vw - 512px);}
}

@media screen and (min-width: 1034px) {
	#principal #change_right{
		right: calc(50vw - 512px);
		animation-name: change_page_arrow_right-largescreen;
	}
	
	#principal #change_left{
		left: calc(50vw - 512px);
		animation-name: change_page_arrow_left-largescreen;
	}
}

/* ATOR */
#principal #port_ator{
    margin: auto;
	padding: 0px 10px;
	width: 374px;
}

/* DEVELOPER */
#principal #port_compsci{
    margin: auto;
	padding: 0px 10px;
	width: 374px;
}

/* TRANSITION ANIMATION */
#principal.page-1 #page-1{
	display: block;
}
#principal.page-1 #page-2{
	display: none;
}
#principal.page-2 #page-1{
	display: none;
}
#principal.page-2 #page-2{
	display: block;
}

.animation-container {
	pointer-events: none;
	top: 0px;
    position: absolute;
    min-height: 100vh;
	height: 100%;
    width: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
}
.animation-layer {
	position: absolute;
	width: 200%;
	height: 200%;
	top: auto;
	bottom: auto;
	right: auto;
	left: -200%;
}
.animation-layer-1 {
	display: none;
	background: #7f4a88;
}
.animation-layer-2 {
	display: none;
	background: #c79ecf;
}
.animation-layer-3 {
	display: none;
	background: #fe9191;
}
.animation-layer-lock {
	display: none;
	z-index: 10000;
    left: 0px;
    pointer-events: all;
}

/* COURSES */
#principal #courses{
	margin: auto;
    width: 364px;
	padding: 0px 10px;
	cursor: pointer;
}
#principal #courses p{text-shadow: 1px 1px #de0ded;}
#principal #courses:hover p{text-shadow: 1px 1px #3e36a6;}

/* FOTOGRAFIAS */
#principal #port_photos{
	margin: auto;
    width: 364px;
	padding: 0px 10px;
	cursor: pointer;
}
#principal #port_photos h5{font-size:3rem;}
#principal #port_photos p{text-align: center;text-shadow: 1px 1px #3e36a6;}
#principal #port_photos:hover p{text-shadow: 1px 1px #de0ded;}

@media screen and (max-width: 400px) {
	
	#principal p{
		font-size: 7vw;
	}
	#principal h5,
	#principal #port_photos h5{
		font-size: 12vw;
	}
	#principal #port_photos p{text-align: left;}
}

/*
		------------ PAGES: GENERIC SPECIFICATIONS ------------ 
*/

.topMenuWrapper {
    height: var(--height-headerTopPage);
}
.topMenu {
    width: 80%;
	margin: auto;
}

.headerTopPage {
	text-align: right;
}
.subsTopPage .subsButton{
	text-align: center;
	margin-bottom: 0;
	display: none;
}

.headerTopPage p {
	margin-bottom: 0;
}
.headerTopPage .backButton a,
.headerTopPage .closeButton a{
	cursor:pointer;
	font-style: italic;
	color: #fff;
	font-family: var(--font-family-boldfinger);
	font-size: 1.2rem;
    transition: text-shadow 0.5s ease;

	/*text-shadow: -3px 0px 4px #222;*/
	
    text-shadow: #8b2aea -9px -5px 8px;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke: 1px #222;
}
.headerTopPage .backButton a:hover,
.headerTopPage .closeButton a:hover{
	color: #fff;
	/*text-shadow: -3px 0px 4px #000;*/
	
    text-shadow: #8b2aea -23px -16px 1px;
}
.subsTopPage .subsButton a {
	cursor: pointer;
    font-style: italic;
    color: #fff;
    font-family: var(--font-family-boldfinger);
    font-size: 1.2rem;
	
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke: 1px #6c6c6c;
}
.subsTopPage .subsButton a:hover{
	color: #fff;
    -webkit-text-stroke: 1px #333;
}

/*
		------------ PAGES: COURSES ------------ 
*/

#coursesPage{
	display:none;
	/*background: linear-gradient(55deg, #ff053461, #00ff1c45);*/
}

#coursesPage .topMenu{
	max-width: 620px;
}

.coursesDisplay .headerTitle{
	bottom: 5px;
	right: 5px;
	position: absolute;
	font-size: 2rem;
	color:#fff;
	text-shadow: 3px 3px 7px #000;
	font-family: var(--font-family-boldfinger);
	text-align: right;
}

.coursesDisplay .description{
	display: none;
	text-align: left;
	max-width: 640px;
	margin: auto;
	padding: 10px;
	background: linear-gradient(135deg, #fafafac4, #f5f5f5cc);
	box-shadow: 6px 6px 8px #aaa;
}

.coursesDisplay h4{
	font-size: 1.5em;
	/*font-weight: bold;*/
}

.coursesDisplay h5{
	font-size: 1.5em;
	font-family: var(--font-family-boldfinger);
}

.coursesDisplay p {
	color: #333;
	font-size:inherit;
}

.coursesDisplay .image{
	--height-contactInfo_plus_headerTopPage: calc(var(--height-contactInfo) + var(--height-headerTopPage));
	--height-coursesDisplay-image: calc(50vh - ( var(--height-contactInfo_plus_headerTopPage) / 2));
	width: 100%;
	height: 0;
    min-height: 75px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	cursor:pointer;
	position: relative;
	/*padding-bottom: 45vh;*/
	padding-bottom: var(--height-coursesDisplay-image);
}

.coursesDisplay .coursesForm{
	display: none;
	width: 100%;
	min-height: 47px;
	max-width: 640px;
	margin: 20px auto 20px;
	padding: 10px;
	background: linear-gradient(135deg, #fafafac4, #f5f5f5cc);
	box-shadow: 3px 3px 4px #aaa;

}
.coursesDisplay .div95{
	width: 88.5%;
	height: 27px;
	float:left;
	text-align:left;
}
.coursesDisplay .div05{
	width: 8.5%;
	min-width: 25px;
	height: 27px;
	float:right;
	text-align:right;
}
.coursesDisplay input{
	max-width: 500px;
	width:100%;
	height: 27px;
	top: 50%;
  	transform: translateY(-50%);
	position:relative;
}
.coursesDisplay button{
	width: 25px;
	height: 27px;
	top: 50%;
  	transform: translateY(-50%);
	position:relative;
	
	background-image:url(../images/icons/copy.svg);
    background-size: 80%;
	background-repeat: no-repeat;
	background-position: center center;
}

.coursesFormCopied{
    display: none;
    text-align: right;
    width: 100%;
    max-width: 640px;
    margin: -17px auto 0px;
    height: 0px;
    padding: 0px 5px 17px 0px;
    font-size: 1rem;
    font-family: var(--font-family-boldfinger);
    line-height: 1rem;
}
.coursesFormCopied p{
	color: #bd1414;
}

#course_financaspessoais .image{
	background-image:url(../images/courses/course_financaspessoais.jpg);
}

#course_bancodemidias .image{
	background-image:url(../images/courses/course_bancodemidias.jpg);
}

/*
		------------ PAGES: PORT PHOTOS ------------ 
*/

#portPhotosPage{
	min-width:300px;
	display:none;	
}

#portPhotosPage .topMenu{
	max-width: 1024px;
}

.portPhotosDisplay{
	margin: auto;
	max-width: 1024px;
	font-family: var(--font-family-boldfinger);
}
.portPhotosDisplay h4 {
	color: #fff;
	text-shadow: 3px 3px 7px #141d2d;
    font-size: 2.4rem;
}
.portPhotosDisplay h5{
	color: #575757;
    font-size: 1.3em;
    font-weight: bold;
}
.portPhotosDisplay p{
	color: #fff;
	text-shadow: 3px 3px 5px #141d2d;
	font-size: 1.3rem;
}
#portPhotosPage a{
	cursor:pointer;
}
#portPhotos_popup {
	margin: auto;
	display:none;
	max-width: 1024px;
}
#portPhotos_popup span{
    color: #a4a4a4;
    font-size: 1.3rem;
    font-family: var(--font-family-couriernew);
	text-shadow: none;
}
#portPhotos_popupImg{
    margin: auto;
}
#portPhotos_popupImg img{
	max-width: 100%;
}
#portPhotosPage .stockAgencyLogo{
	max-width:260px;
}

.justified-gallery > a > .jg-caption {
	font-family: var(--font-family-boldfinger);
	font-size: 1.3rem;
}

@media screen and (max-width: 1024px) {
	#portPhotosPage .topMenu{
		width: 80% !important;
	}
}

/*
		------------ FOOTER: CONTACT INFO ------------ 
*/
#contactInfo {
	height: var(--height-contactInfo);
}
#contactInfo div{display: inline-block;}

#contactInfo .mail{
	width: 30px;
	height: 30px;
	margin: 10px 0px 10px 0px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	cursor:pointer;
	vertical-align: middle;
}

#contactInfo .mail{
	background-image:url(../images/social/icon-mail-333.png);
}