@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yellowtail&display=swap');

/*
font-family: 'Nunito', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Dancing Script', cursive;
font-family: 'Yellowtail', cursive;
*/

:root{
	--white:	#ffffff;
	--dark:		#2a313d;
	--americansilver: #CFCFCF;
	--facebook:	#3b5998;
	--twitter:	#4099ff;
	--instagram:#5851DB;
	--youtube:	#c4302b;
}

.c-font-dancing{
	font-family: 'Dancing Script', cursive;
}
.c-font-yellowtail{
	font-family: 'Yellowtail', cursive;
}

body{
	
	font-family: 'Raleway', sans-serif;
}

.py-10{
	padding-top: 6rem;
    padding-bottom: 6rem;
}

/* HEADER */
header{
	position: sticky;
	z-index: 9999;
	width: 100%;
	top: 0;
}
.navbar{
	background-color: rgba(0, 0, 0, 0.5);
	padding: 10px 0px;
}
.navbar-collapse{
	flex-grow: inherit;
}
.navbar-brand{
	font-family: 'Nunito', sans-serif;
	position: relative;
	z-index: 9;
	cursor: pointer;
	color: var(--bs-white) !important;
	font-size: 24px;
    font-weight: 700;
    width: 40px;
    height: 40px;
    margin-top: 0px;
    line-height: 40px;
    text-align: center;
    line-height: 100%;
    padding: 0px; /*7px 5px;*/
}
.navbar-light .navbar-toggler{
	border-radius: 0;
	padding: 6px 8px;
	color: var(--white);
    border-color: var(--white);
}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link{
	color: var(--white);
	position: relative;
	transition: all .5s;
}
.navbar-light .navbar-nav .nav-link.active:after{
	content: " ";
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: var(--white);
	left: 0;
	bottom: 7px;
}
.navbar-light .navbar-nav .nav-link{
	color: var(--white);
}

.navbar-light .navbar-nav .nav-link:hover{
	color: var(--americansilver);
}

.bg-gray-200{
	background-color: var(--bs-gray-200);
}

@media (min-width:  768px){
	.navbar-light .navbar-nav .nav-item:not(:last-child){
		margin-right: 10px;
	}
}
@media (max-width:  768px){
	.navbar{
	}
	.navbar-brand{
		color: var(--white) ;
		border-color: var(--dark);
		text-align: right ;
	}
	.navbar-light .navbar-nav .nav-link{
		color: var(--white);
	}
}
@media (max-width:  992px){
	.navbar-collapse{
		position: fixed;
		top: 60px;
		right: 0px;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 10px 20px;
	}
	.navbar-toggler:focus{
		box-shadow: none;
	}
}

/* END:  HEADER */

/* INTRO */
.c-intro-section{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: -60px;
	height: calc(100vh - 60px);
}
.c-intro-section.c-bg{
	background-image: url('../images/bg.jpg');
}
.c-intro-section.c-bg-1{
	background-image: url('../images/bg-1.jpg');
}
.c-intro-section.c-bg-2{
	background-image: url('../images/bg-2.jpg');
}
.c-intro-container{
	display: inline-block;
	padding: 50px 70px;
}
.c-bg .c-intro-container{
	color: var(--bs-white);
	background-color: rgba(0, 0, 0, .5);
}
.c-bg-2 .c-intro-container,
.c-bg-1 .c-intro-container{
	/*color: var(--bs-dark);*/
	background-color: rgba(255, 255, 255, .3);
}
@media (min-width:  768px){
	.c-intro-container h1{
		font-size: 75px;
		font-weight: 300;
	}
}
@media (max-width: 768px){
	.c-intro-section{
		height: 100%;
		padding-top: 35%;
		padding-bottom: 35%;
	}
	.c-intro-container{
		padding: 40px;
		width: 100%;
	}
}
/* END: INTRO */

/* BIO */
/*.c-desktop-mode{
	width: auto;
	height: 100%;
	padding: 0 50px;
}
.c-desktop-mode .c-sphoto{
	background-image: url('../images/sanphoto.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
    height: 100%;
    transition: all 0.5s;
}*/
.c-desktop-mode{
	text-align: center;
	padding: 0 100px;
}
.c-desktop-mode img{
		max-width: 400px;
/*		margin: 25px 0;*/
	}
.c-mobile-mode{
	display: none;
}
@media (max-width: 1200px) {
	.c-desktop-mode{
		padding: 0 50px;
	}
}
@media (max-width: 992px) {
	.c-desktop-mode{
		padding: 0 0px;
	}
	.c-desktop-mode img{
		max-width: 100%;
	}
}
@media (max-width: 768px) {
	.c-desktop-mode{
		display: none;
	}
	.c-mobile-mode{
		display: block;
		text-align: center;
	}
	.c-mobile-mode img{
		max-width: 300px;
/*		margin-top: 25px;*/
	}
}
/* END:  BIO */

/* EXPERIENCES */
.c-experience-section{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	color: var(--bs-white);
	position: relative;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.c-experience-section:after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .7);
	z-index: 0;
}
.c-experience-section .container{
	position: relative;
	z-index: 1;
}
.c-experience-section .blockquote-footer{
	color: var(--bs-gray-500);
}
/* END:  EXPERIENCES */



/* SKILLS */
.c-skill-bg{
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 250px;
}
.c-skill-image{
	height: 150px;
}
.c-skill-bar{
	width: 100%;
	height: 10px;
	background-color: var(--bs-gray-200);
	position: relative;
}
.c-skill-progress{
	background-color: var(--bs-primary);
	height: 10px;
}
.c-skill-point{
	height: 16px;
	width: 15px;
	border-radius: 50%;
	background-color: var(--bs-primary);
	position: absolute;
	top: -3px;
	left: 0px;
}
@media (max-width: 992px){
	.c-skill-bg{
		height: 200px;
	}
}
/* END:  SKILLS */

/* PORTFOLIO */
.c-portfolio-item-link img{
	transition: all 0.5s ease-in-out;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.c-portfolio-item-link:hover img{
	transform: scale(1.1);
	box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.6);
}
@media (max-width: 992px) and (min-width:  768px){
	.c-portfolio-section .col-md-4{
		width: 50%;
	}
}
/* END: PORTFOLIO */

/* CONTACT */
.c-contact-section form textarea,
.c-contact-section form input,
.c-contact-section form button{
	border-radius: 0;
}
.c-contact-section {
	margin-top: 90px;
}
.map-section .c-gmap{
	height: 350px;
}

/* END:  CONTACT */

/* FOOTER */
footer{
	background-color: var(--dark);
	color: var(--bs-white);
	font-weight: 100;
	margin-top: 130px;
}
footer .c-social-network{
	padding: 8px 0 7px 0;
}
footer a{
	color: var(--bs-white);
	text-decoration: none;
}
footer .c-social-network a{
	text-decoration: none;
	font-size: 32px;
	line-height: 100%;
}
footer .c-social-network a.c-facebook:hover{
	color: var(--facebook);
}
footer .c-social-network a.c-youtube:hover{
	color: var(--youtube);
}
footer .c-social-network a.c-twitter:hover{
	color: var(--twitter);
}
@media (min-width:  768px){
	footer .d-flex-justify-content-between{
		justify-content:  space-between;
		display: flex;
	}
}
@media (max-width:  768px){
	footer .d-flex-justify-content-between{
		text-align: center;
	}
}
/* END:  FOOTER */