/* animations */

/*-progress-*/
.progress {
	width: 60px;
	height: 60px;
	position: relative;
}

.progress-circle {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	animation-timing-function: ease;
  	animation-iteration-count: infinite;
  	animation-direction: alternate;
}

.progress-circle:first-child {
	background-color: var(--black);
	color: var(--darkorange);
	font-size: 30px;
	z-index: 3;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.progress-icon {
	width: 36px;
	height: 40px;
	display: block;
	background: url(../images/cutlery.png) no-repeat center center / cover;
}

.progress-circle:nth-child(2) {
	background-color: var(--darkorangeWithOpacity);
	animation-name: progressCircle;
  	animation-duration: 1s;
  	z-index: 2;
}

.progress-circle:last-child {
	background-color: var(--darkorangeWithOpacity2);
	animation-name: progressLastCircle;
  	animation-duration: 1s;
}

@keyframes progressCircle {

  from { transform: scale(1); -webkit-transform: scale(1); }   
  to { transform: scale(1.3); -webkit-transform: scale(1.3); }

} 

@keyframes progressLastCircle {

  from { transform: scale(1); -webkit-transform: scale(1); }   
  to { transform: scale(1.7); -webkit-transform: scale(1.7); }

}

/* the-end-of-animations */



/* bg-colors */

.bg-transparent { background-color: transparent; }

.bg-darkorange { background-color: var(--darkorange); }

.bg-black { background-color: var(--black2); }

.bg-white { background-color: var(--white); }

/* the-end-of-bg-colors */



/* colors */

.color-orange { color: var(--darkorange) !important; }

.color-lightgrey { color: var(--lightgrey) !important; }

/* the-end-of-colors */



/* containers */

/*-container-*/
.container {
	width: 100%;
	padding-left: .5rem;
	padding-right: .5rem;
}

@media (min-width: 768px) {

	.container {
		padding-left: 1rem;
		padding-right: 1rem;
	}

}

@media (min-width: 992px) {

	.container {
		padding-left: 3rem;
		padding-right: 3rem;
	}

}

/*-container-2-*/
.container-2 {
	width: 100%;
	padding-left: .5rem;
	padding-right: .5rem;
}

@media (min-width: 768px) {

	.container-2 {
		padding-left: 1rem;
		padding-right: 1rem;
	}

}

@media (min-width: 992px) {

	.container-2 {
		padding-left: 10.5%;
		padding-right: 10.5%;
	}

}

/* the-end-of-containers */



/* paddings */

.padding-y { padding-top: .4rem; padding-bottom: .4rem; }

.padding-y-2 { padding-top: 1rem; padding-bottom: 1rem; }

.padding-y-3 { padding-top: 2rem; padding-bottom: calc(3rem + 9vw); }

.padding-y-4 { padding-top: calc(1rem + 1vw); padding-bottom: calc(3rem + 1vw); }

.padding-y-5 { padding-top: 4rem; padding-bottom: 3rem; }

.padding-y-6, .padding-y-7 { padding-top: 3rem; padding-bottom: 3rem; }

@media (min-width: 992px) { 
	.padding-y-6 { padding-top: 6rem; padding-bottom: 6rem; } 
	.padding-y-7 { padding-top: 4.5rem; padding-bottom: 4.5rem; } 
}

.padding-x { padding-right: 1rem; padding-left: 1rem; }

.padding-1 { padding: calc(2rem + .7vw) calc(1rem + 1vw) calc(1rem + 1vw); }

/* the-end-of-paddings */



/* borders */

.border-bottom-grey { border-bottom: 1px solid var(--whiteWithOpacity); }

.list-grey-border > * { border: 1px solid var(--grey2); }

.list-grey-border > *:not(:first-child) { border-top: 0; }

.list-grey-border-2 > * { border-top: 1px solid var(--grey2); }

/* the-end-of-borders */



/* bg-images */

/*-bg-img-*/
.bg-img { background: url(../images/bg-img.jpg) no-repeat center center / cover; }

/*-bg-img-2-*/
.bg-img-2 { background: url(../images/bg-img-02.jpg) no-repeat center center / cover; }

/*-bg-img-3-*/
.bg-img-3 { background: url(../images/bg-img-03.jpg) no-repeat center center / cover; }

/*-bg-img-4-*/
.bg-img-4 { background: url(../images/bg-img-04.jpg) no-repeat center center / cover; }

/* the-end-of-bg-images */



/* overlays */

/*-black-overlay-*/ 
.black-overlay {
	position: relative;
}

.black-overlay::before {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--black);
	opacity: .4;
	z-index: -1;
}

/* the-end-of-overlays */



/* texts */

/*-white-text-*/
.white-text {
	color: var(--white);
	font-size: 14px;
}

/*-white-text-2-*/
.white-text-2 {
	color: var(--white);
	font-size: 16px;
	text-align: center;
}

.text-center { text-align: center !important; }

.removed-text { text-decoration: line-through; }

.text-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/*-grey-text-*/
.grey-text {
	color: grey;
	font-size: 16px;
}

/* the-end-of-texts */



/* icons */

.white-icon { color: var(--white); margin-right: .4rem; }

/* the-end-of-icons */



/* list-offsets */

.list-offset-x-1 > *:not(:last-child) { margin-right: 3rem; }

.list-offset-x-2 > *:not(:last-child) { margin-right: 1.2rem; }

.list-offset-x-3 > *:not(:last-child) { margin-right: 3px; }

.list-offset-x-4 > *:not(:last-child) { margin-right: 2.2rem; }

.not-list-offset-y > * { margin-top: 0 !important; }

/* the-end-of-list-offsets */



/* widths */

/*-width-1-*/
.width-1 { width: 80% !important; }

@media (min-width: 768px) { .width-1 { width: 60% !important; } }

.w-100 { width: 100% !important; }

.width-auto { width: auto !important; }

/* the-end-of-widths */



/* offsets */

.offset-1 { margin: 1rem auto 0 !important; }

.offset-2 { margin: 2rem auto 0 !important; }

.offset-3 { margin: 110px auto 0 !important; }

.offset-4 { margin: 2rem 1rem 0  0 !important; }

.offset-4:last-child { margin-right: 0 !important; }

.offset-5 { margin: 70px auto 0 !important; }

.offset-6 { margin: 1.5rem auto 0 !important; }

/* the-end-of-offsets */



/* paddings */

.p-0 { padding: 0 !important; }

/* the-end-of-paddings */



/* links */

/*-white-iconic-link-*/
.white-iconic-link {
	color: var(--white);
	font-size: 14px;
	transition: color .3s;
}

.white-iconic-link:hover {
	color: var(--darkorange);
}

/*-white-link-*/
.white-link,
.white-link-2,
.white-link-3 {
	color: var(--white);
	padding: 2rem 1rem;
	font-size: 14px;
	transition: color .3s, border-color .3s;
}

.white-link:hover,
.white-link.fl-active,
.white-link-2:hover {
	color: var(--darkorange)
}

.white-link-with-border {
	padding: .3rem 1.5rem;
	border: 1px solid var(--white);
}

.white-link-with-border:hover,
.white-link-with-border.fl-active {
	border-color: var(--darkorange);
}

.white-link-2 {
	padding: 0;
}

.white-link-3 {
	padding: 0;
	font-size: 25px;
	font-weight: bold;
	transition: opacity .3s;
	font-family: 'Roboto Condensed', sans-serif;
}

.white-link-3:hover {
	opacity: .8;
}

/*-black-link-*/
.black-link {
	color: var(--black);
	font-weight: bold;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 22px;
	transition: color .3s;
}

.black-link:hover {
	color: var(--darkorange);
}

/* the-end-of-links */



/* buttons */

/*-grey-btn-*/
.grey-btn {
	background-color: var(--darkgrey);
	color: var(--white) !important;
	padding: .4rem .7rem;
	transition: background-color .3s;
	border: 3px solid var(--darkgrey);
}

.grey-btn:hover {
	background-color: var(--darkorange) !important;
}

/*-grey-btn-2-*/
.grey-btn-2 {
	background-color: var(--darkgrey);
	color: var(--white) !important;
	padding: .4rem .7rem;
	transition: color .3s, background-color .3s;
	border: 3px solid var(--darkgrey);
	text-align: left !important;
	font-weight: normal !important;
}

@media (hover: hover) {

	.grey-btn-2:hover {
		color: var(--white) !important;
		background-color: var(--darkorange) !important;
	}

}

.grey-btn-2.fl-active {
	color: var(--white) !important;
	background-color: var(--darkorange) !important;
}

.grey-btn-2 i {
	width: 0;
	margin-right: .7rem;
}

/*-white-btn-*/
.white-btn {
	background-color: var(--white);
	color: var(--darkorange);
	font-weight: bold;
	padding: .5rem 2.2rem;
	font-size: 13px;
	transition: color .3s, background-color .3s;
}

@media (hover: hover) {

	.white-btn:hover {
		background-color: var(--darkorange);
		color: var(--white);
	}

}

.white-btn:active {
	background-color: var(--darkorange);
	color: var(--white);
}

/*-orange-btn-*/
.orange-btn,
.orange-btn-2,
.orange-btn-3 {
	background-color: var(--darkorange);
	color: var(--white);
	font-weight: bold;
	padding: .6rem 2.2rem;
	font-size: 13px;
	border-radius: 0;
	transition: color .3s, background-color .3s;
}

@media (hover: hover) {

	.orange-btn:hover {
		background-color: var(--white);
		color: var(--darkorange);
	}

	.orange-btn-2:hover,
	.orange-btn-3:hover {
		background-color: var(--black);
	}

}

.orange-btn:active {
	background-color: var(--white);
	color: var(--darkorange);
}

.orange-btn-3 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.orange-btn-2:active,
.orange-btn-3:active {
	background-color: var(--black);
}


/*-orange-iconic-btn-*/
.orange-iconic-btn {
	background-color: var(--darkorange);
	color: var(--white);
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	border-radius: 50%;
	border: 2px solid var(--white);
	transition: background-color .3s;
	opacity: 1 !important;
}

@media (hover: hover) {

	.orange-iconic-btn:hover {
		background-color: var(--black);
	}

}

.orange-iconic-btn:active {
	background-color: var(--black);
}

/* the-end-of-buttons */



/* titles */

/*-white-dancing-title-*/
.white-dancing-title,
.white-dancing-title-2,
.white-dancing-title-3 {
	color: var(--white);
    font-family: 'Great Vibes', cursive;
    font-weight: 400;
    margin: 0 auto 0;
    text-align: center;
    font-size: 30px;
    line-height: 35px;
}

@media (min-width: 768px) {

	.white-dancing-title {
	    font-size: 60px;
	    line-height: 60px;
	}

}

.white-dancing-title-3 {
	font-size: 25px;
	line-height: 30px;
}

/*-white-title-*/
.white-title,
.white-title-2 {
	color: var(--white);
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
    margin: 0;
    text-align: center;
    font-size: 30px;
    line-height: 35px; 
    font-weight: bold;
}

@media (min-width: 768px) {

	.white-title {
	    font-size: 70px;
	    line-height: 75px;
	}

}

/*-white-title-*/
.black-title {
	color: var(--black);
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
    margin: 0;
    text-align: center;
    font-size: 30px;
    line-height: 35px; 
    font-weight: bold;
}

@media (min-width: 768px) {

	.black-title {
	    font-size: 45px;
	    line-height: 50px;
	}

}

/*-black-title-2-*/
.black-title-2 {
	font-family: 'Roboto Condensed', sans-serif;
	color: var(--black);
	font-weight: bold;
	margin: 0;
	font-size: 14px;
}

/* the-end-of-titles */



/* forms/inputs */

/*-form-*/
.form {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
	width: 270px;
	margin-right: auto !important;
	margin-left: auto !important;
}

.form .input {
	width: 60%;
	border-right: 0;
}

.form .submit {
	width: 40%
}

@media (min-width: 992px) {

	.form {
		width: 100%;
	}

}

/*-form-2-*/
@media (min-width: 991px) {

	.form-2-container:first-child,
	.form-2-container:nth-child(2) {
		width: 47.5%;
	}

}


/*-orange-input-*/
.orange-input,
.white-input {
	background-color: var(--darkorange);
	color: var(--white);
	border: 2px solid var(--white);
	outline: 0 !important;
	padding: .7rem 1rem;
	font-weight: bold;
	font-size: 13px;
	line-height: 13px;
	border-radius: 0;
	font-family: 'Open Sans', sans-serif;
}

.orange-input::-moz-placeholder {
	color: var(--white);
}

.orange-input::placeholder {
	color: var(--white);
}	

/*-white-input-*/
.white-input {
	background-color: var(--white);
	border-color: var(--grey);
	color: var(--grey);
}

.white-input::-moz-placeholder {
	color: var(--grey);
}

.white-input::placeholder {
	color: var(--grey);
}

/*-orange-submit-*/
.orange-submit {
	background-color: var(--darkorange);
	color: var(--white);
	border: 2px solid var(--white) !important;
	outline: 0 !important;
	padding: .5rem 1rem;
	font-weight: bold;
	font-size: 13px;
	line-height: 13px;
	text-align: center;
	font-family: 'Open Sans', sans-serif; 
	transition: background-color .3s;
	cursor: pointer;
}

.orange-submit:hover {
	background-color: var(--black);
}

/* the-end-of-forms/inputs */



/* lists */

/*-list-white-dots-*/
.list-white-dots > *:not(:last-child) {
	position: relative;
}

.list-white-dots > *:not(:last-child)::after {
	content: "·";
	position: absolute;
	top: 0;
	right: -1.1rem;
	color: var(--white);
}

/*-list-*/
.list,
.list-2 {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.list > *, .list-2 > * { width: 100%; margin-top: 3rem; }

@media (min-width: 768px) { 

	.list > * { width: 31.5%; } 

	.list-2 > * { width: 48.5%; } 

}

@media (min-width: 992px) { .list-2 > * { width: 31.5%; } }

/* the-end-of-lists */



/* positions */

.relative { position: relative; }

/* the-end-of-positions */



/* img-containers */

.img {
	width: 100%;
	height: auto;
	min-height: 100%;
	display: block;
}

/*-img-container-*/
.img-container {
	width: 100%;
	overflow: hidden;
	height: 85vw;
}

@media (min-width: 768px) {

	.img-container {
		height: 23vw;
	}

}

.img-container-2 {
	width: 63px;
	height: 63px;
	border-radius: 50%;
	overflow: hidden;
}
 
/* the-end-of-img-containers */



/* boxes */

/*-orange-box-*/
.orange-box,
.black-box,
.orange-box-3 {
	font-family: 'Roboto Condensed', sans-serif;
	background-color: var(--darkorange);
	padding: .8rem 0;
	width: 80px;
	text-align: center;
	color: var(--white);
	font-weight: bold;
	font-size: 30px;
	line-height: 30px;
}

.orange-box-3 {
	font-size: 18px;
	line-height: 18px !important;
	width: 100px;
	padding: 10px 0 !important;
}

/*-black-box-*/
.black-box {
	background-color: var(--black2);
	color: grey;
	font-weight: normal;
}

/*-white-box-*/
.white-box {
	background-color: var(--white);
	padding: calc(2rem + .5vw);
	width: 100%;
}

@media (min-width: 768px) { .white-box { width: 90%; } }

@media (min-width: 992px) { .white-box { width: 50%; } }

/*-absolute-box-*/
.absolute-box {
	position: absolute;
	top: calc(-.8rem + -15px);
}	

/*-absolute-box-2-*/
.absolute-box-2 {
	position: absolute;
	top: -19px;
}

/*-orange-box-2-*/
.orange-box-2 {
	background-color: var(--darkorange);
	padding: 1.5rem;
}

/* the-end-of-boxes */



/* flex */

@media (min-width: 992px) { 

	.justify-content-lg-end { justify-content: flex-end !important; } 

	.justify-content-lg-start { justify-content: flex-start !important; }

}



/* the-end-of-flex */



/* font-sizes */

.fs-17px { font-size: 17px !important; }

/* the-end-of-font-sizes */