@charset "utf-8";
:root
{
	--f2:#f2f2f2;
	--dg:#333232;
	--lb:#7988b1;
	--lp:#f56476;
	--dr:#6b0f2b;
}
html, body, #wrapper, div#main 
{
    height: 100%;
	font:Roboto,Helvetica,sans-serif;
	font-family: Roboto, Helvetica, sans-serif;
	color:#F2F2F2;
	overflow-x: hidden;
}
::-moz-selection { /* Code for Firefox */
  	background: var(--lp);
	color:white;
}

::selection {
  	background: var(--lp);
	color:white;
}
#leftMenu
{
	z-index: 2;
	background-color: rgba(51,50,50,0.8);
	height:100%;
}
.navbar{
	padding-top: 20px;
}
.row{
	height:100%;
}

.container-fluid
{
	z-index: 1;
	height:100%;
	background-image: url("background.jpg");
	background-size: cover;
	margin:0;
	padding:0;
	background-attachment: fixed;
}

#fun:hover
{
	color:#F56476;
}
.nav-link
{
	text-align:center;
	color:#F2F2F2;
	margin: 0 0 3px 0;
	font-size: 110%;
}
.nav-link:hover
{
	color:#F56476;
}
.rightPage
{
	margin:0;
	padding:0;
}
.rightText
{
	color:#333323;
	margin-top: 15%;
	margin-left:2%;

}

.rightText h1
{
	font-size:50px;
	font-weight: 600;
}
.rightText h2
{
	font-size:35px;
	margin-bottom:35px;
}
.cvBtn
{
	color:var(--f2);
	border-radius: 5px;
	text-decoration: none;
	padding:15px;
	border: 2px solid var(--f2);
	text-transform: uppercase;
	background-color:transparent;
	margin-right: 20px;
}
.cvBtn:hover
{
	color:var(--lp);
	border-color:var(--lp);
	text-decoration: none;
}

.leftContainer
{
	padding-top: 38%;
	text-align: center;
	justify-content: space-around;
	margin:0;
}

.leftContainer h2
{
	font-size:15px;
	font-weight: 100;
	text-transform: uppercase;
}
.leftContainer h1
{
	padding-top:10px;
	color:#F2F2F2;
	font-size:30px;
	margin-bottom:0;
	padding-bottom:0;
}
#cv
{
	color:var(--dr);
	border-color:var(--dr);
	border-width:3px;
	font-weight:550;
}
#cv:hover
{
	color:var(--lp);
	border-color:var(--lp);
}
.col-sm-3
{
	text-align: center;
}
#leftMenuFace
{
	width:20%;
	min-width: 180px;
}
.navbar-nav
{
	display:flex;
}


 .dropdown
{
	flex-direction: column;
   	display: flex;
   	justify-content: center;
   	align-items: center;
   	position: relative;
   	perspective: 1000px;
   	z-index: 100;
}
.dropdown:hover
{
   	cursor: pointer;
}
.dropdown:hover .dropdown_menu li
{
	display: block;
}
.dropdown:hover .dropdown_menu--animated
{
	display: block;
}
.dropdown_menu--animated
{
/*I don't know why I need padding-left, but it solved this weird issue*/
	padding-left:0;
	display: none;
}
.nav-link-s
{
	font-size:100%;
}

.dropdown_menu--animated li
{
	display: block;
    opacity: 1;
}
.dropdown_menu-6
{
	animation: growDown 300ms ease-in-out forwards;
    transform-origin: top center;
}

@keyframes growDown 
{
    0% {
        transform: scaleY(0)
    }
    80% {
        transform: scaleY(1.1)
    }
    100% {
        transform: scaleY(1)
    }
}

.rightPageSub
{
	background-color: transparent;
	color:black;
	z-index:3;
	opacity:100;
	height:100%;
	display:flex;
	flex-direction:row;
	height:100vh;
	overflow-x:scroll;
	overflow-y:hidden;

}

.sm9or
{
	padding:0;
}

.subPageContent
{
	font-size:110%;
	padding:40px;
	background-color:rgba(255,255,255,0.90);
	min-width:50%;
}
.subPageContent h1
{
	font-size:50px;
	font-weight: 600;
	color:var(--dr);
	margin-bottom:20px;
}
.subPageContent p a
{
	text-decoration:underline;
	color:var(--dr);
}
.subPageContent img
{
	max-width:100%;
	margin-top:20px;
	max-height:50%;
	margin-bottom:20px;
}
.subImage
{
	display:flex;
	flex-direction:row;
	justify-content: center;
	margin:0;
	padding:0;
	width:100%;
	
}
#sec2
{
	background-color:rgba(107,15,43,0.95);
	color:var(--f2);
}
#sec2 h1
{
	color:var(--f2);
}

#sec1
{
	padding-top:10%;

}

#sec2 p a
{
	color:var(--lp);
}

/* CSS Document */

