/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Assistant&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');


.font-lexend-deca{
    font-family: 'Lexend Deca';
}

.font-teko{
	font-family: 'Teko';
}

.font-assistant{
	font-family: 'Assistant';
}

.font-fjallaone{
	font-family: 'Fjalla One';
}

.font-roboto{
	font-family: 'Roboto';
}

.font-inter{
	font-family: 'Inter';
}

.description{
	font-size: 1.3em;
	font-family: 'Roboto';
	text-align: center;
}

.description p{
	text-align: justify;
}

.description img{
	width: 70%;
}


/* General settings */

html, body{
    margin: 0;
    padding: 0;
}

body{
    max-width: 1920px;
	margin: auto;
}

.title{
	border-bottom: 1px solid #000;
	color: #000;
	font-size: 42px;
}

/* Hexagons */

.hexagon{
	position: absolute;

	mask-image: url("../images/hexagon.svg");
	mask-size: 100%;
	mask-repeat: no-repeat;
	mask-position: center;

	-webkit-mask-image: url("../images/hexagon.svg");
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.hex-marker{
	min-width: 35px;
	max-width: 50px;
	
}

/* Hexagon sizes */

.hex-size-0{
	width: 50px;
	height: 50px;
}
.hex-size-1{
	width: 80px;
	height: 80px;
}
.hex-size-2{
	width: 120px;
	height: 120px;
}
.hex-size-3{
	width: 160px;
	height: 160px;
}
.hex-size-4{
	width: 200px;
	height: 200px;
}
.hex-size-5{
	width: 250px;
	height: 250px;
}
.hex-size-6{
	width: 300px;
	height: 300px;
}
.hex-size-7{
	width: 350px;
	height: 350px;
}
.hex-size-8{
	width: 450px;
	height: 450px;
}

/* Hexagons colors */

.hex-color-1{
	background-color: rgba(230, 220, 236, 0.75);
}
.hex-color-2{
	background-color: rgba(241, 232, 246, 1);
}
.hex-color-3{
	background-color: rgba(248, 243, 250, 1);
}
.hex-color-4{
	background-color: rgba(228, 215, 235, 1);
}
.hex-color-5{
	background-color: hsl(277, 33%, 75%);
}
.hex-color-6{
	background-color: rgba(190, 159, 208, 0.5);
}

/* Navigation bar */

.nav-link{
	display: inline-block;
    position: relative;
    color: #672290;
	font-size: 1.3em;
}

.nav-link:hover{
    color: #521d70;
}

.nav-link::before,
.nav-link::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background: #672290;
	content: '';
	opacity: 0;

	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;

	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.nav-link::before {
	top: 0;

	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.nav-link::after {
	bottom: 0;

	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

.nav-link:hover::before,
.nav-link:focus::before,
.nav-link:hover::after,
.nav-link:focus::after {
	opacity: 1;

	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

.navbar-toggler:focus,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

.navbar-toggler:active{
    outline: 2px solid #672290;
}

/* Sidebanner */

#cik-banner{
	margin-top: 100px;
}


/* Start */

.jumbotron{
    max-height: 758px;
}

.jumbotron h1 span{
    color: #672290;
}

.jumbotron-image {
    background-image: url("../images/white_desk.png");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* About */

#about{
	overflow: hidden;
	padding-top: 250px;
	padding-bottom: 100px;
}

#profile-photo{
	width: 527px;
}

/* Offer */

#offer{
	overflow: hidden;
	padding-top: 150px;
	padding-bottom: 100px;
	background-color: rgba(230, 220, 236, 0.2);
}

.offer-title{
	color: #8d6b9e;
	height: 60px;
}

.offer-icon{
	max-width: 200px;
}


/* Certificates */

#certificates{
	overflow: hidden;
	padding-top: 150px;
	padding-bottom: 100px;
}

#carousel-container{
	width: 100%;
	height: 500px;
	white-space: nowrap;
	overflow: hidden;
}

.certificate-container{
	display: inline-flex;
	width: 33.33%;
	height: 100%;
}

.certificate{
	height: auto;
	width: 90%;
	margin: auto;
	box-shadow: 0px 2px 15px rgba(67, 48, 77, 0.6);
	cursor: pointer;
	max-height: 500px;
}

#certificates-counter{
	width: 60px;
	font-size: 1.8em;
}

.scale-0{
	transform: scale(0);
	opacity: 0;
	transition: all 500ms;
}
.scale-50{
	transform: scale(0.5);
	opacity: 0.5;
	transition: all 500ms;
}
.scale-100{
	transform: scale(1);
	opacity: 1;
	transition: all 500ms;
}

.btn-arrow{
	border: none;
	background: none;
}

.btn-arrow img{
	width: 100px;
	height: auto;
}

.btn-arrow:focus {
	outline: none;
	box-shadow: none;
}

.btn-arrow:active{
	transform: scale(1.05);
}

#modal {
	display: none;
	flex-direction: column;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.9);
  }

#modal-content {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 767px;
}

#modal-content{  
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s;
}
  
@-webkit-keyframes zoom {
	from {-webkit-transform:scale(0)} 
	to {-webkit-transform:scale(1)}
}

@keyframes zoom {
	from {transform:scale(0)} 
	to {transform:scale(1)}
}
  
#close-modal {
	color: #fff; 
	font-size: 40px;
}

#close-modal:hover{
	color: #878787;
	cursor: pointer;
}
  
/* Contact */

#contact{
	overflow: hidden;
	padding-top: 150px;
	/* padding-bottom: 100px; */
	padding-bottom: 100px;
	background-color: rgba(230, 220, 236, 0.2);
}

.map-container{
	background-image: url('../images/map3.png');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 600px;
}

address{
	background-color: rgba(255, 255, 255, 0.6);
	font-size: 16px;
}

address a, address a:visited{
	color: #000;
}

address a:hover{
	color: #7e43a1;
}

#opening-hours{
	background-color: rgba(255, 255, 255, 0.6);
	font-size: 16px;
}

.contact-icon{
	width: 25px;
	height: auto;
}

#form-container{
	background-color: #7e43a1;
}

#contact-form input{
	width: 100%;
	background-color: #f1e8f6;
	border: none;
	font-size: 20px;
	border-radius: 10px;
}

#contact-form input:focus{
	outline: none;
}

#content{
	width: 100%;
	background-color: #f1e8f6;
	border: none;
	font-size: 20px;
	border-radius: 10px;
	resize: none;
}

#content:focus{
	outline: none;
}

#btnSend{
	width: 100%;
	background-color: #7e43a1;
	color: #fff;
	font-size: 20px;
	border: 5px solid #fff;
	border-radius: 10px;
	font-weight: bold;
}

#btnSend:focus{
	outline: none;
}

#btnSend:hover{
	background-color: #fff;
	color: #7e43a1;
}

#contact-form *::placeholder{
	color: #ccbfd3;
}

#message-success{
	background-color: #7e43a1;
	color: #fff;
	box-shadow: 0px 2px 15px rgba(67, 48, 77, 0.6);
}

#close-message {
    color: #fff; 
	font-size: 40px;
}

#close-message:hover{
	color: #4a275e;
	cursor: pointer;
}

.alert{
	display: flex;
    align-items: baseline;
}

#google-banner{
	max-width: 300px;
}

/* Footer */

#footer-container{
	overflow: hidden;
	background-color: #7e43a1;
	color: #fff;
}

#footer-container a{
	color: #fff;
}

#footer-container a:hover{
	color: #4a275e;
	text-decoration: none;
}

/* Modal */

#modal-removal .modal-body p{
	text-align: center;
	margin: 0px;
}

#modal-removal .modal-body p:first-child{
	margin-bottom: 10px;
}

#modal-removal .btn{
	background-color: #7e43a1;
	color: #fff;
}

#modal-removal .btn:hover{
	background-color: #9d54c7;
}

.modal-title{
	color: #8d6b9e;
}

/* RWD */

@media only screen and (max-width: 1200px){
	#profile-photo{
		width: 400px;
	}
}

@media only screen and (max-width: 992px){
	.certificate-container{
		width: 100%;
	}
	.certificate{
		height: 95%;
		width: auto;
	}
	.scale-0{
		transform: scale(0.5);
		opacity: 0;
	}
	.scale-50{
		transform: scale(1);
		opacity: 1;
	}
	.scale-100{
		transform: scale(0.5);
		opacity: 0;
	}
}

@media only screen and (max-width: 767px){
	#start h1, #start p{
		text-align: center;
	}
	.jumbotron{
		max-height: 600px;
	}
	.hexagon{
		display: none;
	}
	#modal-content {
		width: 95%;
	  }
	.offer-title{
		height: auto;
	}
	#profile-photo{
		display: none;
	}
	#about, #offer, #certificates, #contact{
		padding-top: 50px;
	}
	#contact{
		padding-bottom: 50px;
	}
	.offer-icon{
		max-width: 150px;
	}
	.description{
		font-size: 1.15em;
	}
	#contact-form input, #content, #btnSend{
		font-size: 1.15em;
	}
	.title{
		font-size: 2.1em;
	}
	.btn-arrow img{
		width: 80px;
		height: auto;
	}
	#certificates-counter{
		font-size: 1.6em;
	}
}

@media only screen and (max-width: 400px){
	.description img{
		width: 100%;
	}
	#contact-form input, #content, #btnSend{
		font-size: 1.1em;
	}
	.btn-arrow img{
		width: 70px;
		height: auto;
	}
	#certificates-counter{
		font-size: 1.5em;
	}
}