// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

.site-header {
    background-color: #fff;
}

.navbar-light .navbar-nav .nav-link {
    color: #001515;
    font-weight: 600;
}

section#about-advantages {
    background: #3e4f69;
}

div#marketing {
    background: #45546f;
}

.card-title:before {
    content: '';
    flex-shrink: 0;
    display: inline-block;
    width: 15%;
    height: 4px;
    margin-right: 9%;
    background-color: #57a0ea;
    transition: .3s ease-out all;
}

h5.card-title {
    font-size: 1rem;
}

.card-body {
    min-height: 260px;
}

footer {
    background: #3c444f;
}

footer h6 {
    color: #fff;
    letter-spacing: 0.2rem;
    font-size: 1.2rem;
}

a.link-footer {
    letter-spacing: 0.1rem;
    color: #fff;
}


.divider-default {
    width: 100%;
    height: 1px;
    border-top: 1px solid #4f5c6e;
}
.fa-ul {
    list-style-type: none;
    margin-left: 1.5em;
    padding-left: 0;
    color: #fff;
}

span.fa-li {
    color: #61b88d;
    margin-top: 2px;
}


a.tel-sus {
    font-size: 18px;
    color: #61b88d;
    border: 1px solid;
    font-weight: 800;
    padding: 5px;
    border-radius: 5px;
}	

.card-body p {
    color:  grey;
}

.orar {
    color: #fff;
    font-weight: bold;
}

div#despre {
    background-image: url(/img/b-despre.jpg);
    min-height: 200px;
    display: block;
}

#despre h1 {
    color: #fff;
    margin-top: 50px;
}

.p-2.flex-fill.bd-highlight {
    border: 1px solid #eee;
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { 
	.pb-1, .py-1 {
	    padding-bottom: 40px;
	}
	.pt-1, .py-1 {
   	 padding-top: 40px;
	}	
}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }


.about-out-item-inner {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
	min-height: 228px;
	width: 100%;
	text-align: center;
	background-color: rgba(82, 98, 125, 0.8);
}

.about-out h4 {
	color: #fff;
}

h2.about-unit-title {
    color: #fff;
}

.about-unit p {
    color: #fff;
}

.about-out-item-inner p {
	color: #8591a6;
}

.about-out-item-inner svg {
	fill: #57a0ea;
}

.about-out-item-inner svg + * {
	margin-top: 10px;
}

@media (max-width: 767px) {
	.about-out-item + .about-out-item {
		position: relative;
		margin-top: 60px;
	}
	.about-out-item + .about-out-item:before {
		content: '';
		position: absolute;
		top: -30px;
		left: 0;
		right: 0;
		border-top: 1px solid #677998;
	}
}

@media (min-width: 768px) {
	.about-out {
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
	}
	.about-out-item {
		flex-basis: 50%;
	}
	.about-out-item-inner {
		max-width: calc(100% - 60px / 2);
	}
	.about-out-item-inner, .about-out-item-inner:first-child, .about-out-item-inner:last-child {
		margin-top: 60px;
	}
}

@media (min-width: 768px) and (min-width: 1200px) {
	.about-out-item-inner, .about-out-item-inner:first-child, .about-out-item-inner:last-child {
		max-width: calc(100% - 60px / 2);
		margin-top: 60px;
	}
}

@media (min-width: 768px) and (min-width: 1470px) {
	.about-out-item-inner, .about-out-item-inner:first-child, .about-out-item-inner:last-child {
		max-width: calc(100% - 100px / 2);
		margin-top: 100px;
	}
}

@media (min-width: 768px) {
	.about-out-item:nth-child(1) .about-out-item-inner, .about-out-item:nth-child(2) .about-out-item-inner {
		margin-top: 0;
	}
	.about-out-item:nth-child(even) {
		text-align: right;
	}
	.about-out-item:nth-child(odd):not(:first-child) {
		position: relative;
	}
	.about-out-item:nth-child(odd):not(:first-child):before {
		content: '';
		position: absolute;
		top: 30px;
		left: 0;
		right: 30px;
		height: 1px;
		border-top: 1px solid #677998;
	}
}

@media (min-width: 768px) and (min-width: 1200px) {
	.about-out-item:nth-child(odd):not(:first-child):before {
		top: 30px;
	}
}

@media (min-width: 768px) and (min-width: 1470px) {
	.about-out-item:nth-child(odd):not(:first-child):before {
		top: 50px;
	}
}

@media (min-width: 768px) {
	.about-out-item:nth-child(odd):not(:nth-child(1)) {
		position: relative;
	}
	.about-out-item:nth-child(odd):not(:nth-child(1)):after {
		content: '';
		position: absolute;
		right: 0;
		top: 48px;
		bottom: -12px;
		width: 1px;
		border-left: 1px solid #677998;
	}
}

@media (min-width: 768px) and (min-width: 1200px) {
	.about-out-item:nth-child(odd):not(:nth-child(1)):after {
		top: 48px;
		bottom: -12px;
	}
}

@media (min-width: 768px) and (min-width: 1470px) {
	.about-out-item:nth-child(odd):not(:nth-child(1)):after {
		top: 80px;
		bottom: -20px;
	}
}

@media (min-width: 768px) {
	.about-out-item:nth-child(1) {
		position: relative;
	}
	.about-out-item:nth-child(1):after {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		bottom: -12px;
		width: 1px;
		border-left: 1px solid #677998;
	}
}

@media (min-width: 768px) and (min-width: 1200px) {
	.about-out-item:nth-child(1):after {
		bottom: -12px;
	}
}

@media (min-width: 768px) and (min-width: 1470px) {
	.about-out-item:nth-child(1):after {
		bottom: -20px;
	}
}

@media (min-width: 768px) {
	.about-out-item:nth-child(even):not(:last-child) {
		position: relative;
	}
	.about-out-item:nth-child(even):not(:last-child):before {
		content: '';
		position: absolute;
		bottom: -30px;
		left: 30px;
		right: 0;
		height: 1px;
		border-top: 1px solid #677998;
	}
}

@media (min-width: 768px) and (min-width: 1200px) {
	.about-out-item:nth-child(even):not(:last-child):before {
		bottom: -30px;
	}
}

@media (min-width: 768px) and (min-width: 1470px) {
	.about-out-item:nth-child(even):not(:last-child):before {
		bottom: -50px;
	}
}

@media (min-width: 768px) {
	.about-out-item:nth-child(2n + 3) .about-out-item-inner-decor {
		position: absolute;
		right: 0;
		top: 30px;
		width: 15px;
		height: 15px;
		transform: translate(50%, -50%);
		background-color: #57a0ea;
	}
}

@media (min-width: 768px) and (min-width: 1200px) {
	.about-out-item:nth-child(2n + 3) .about-out-item-inner-decor {
		top: 30px;
	}
}

@media (min-width: 768px) and (min-width: 1470px) {
	.about-out-item:nth-child(2n + 3) .about-out-item-inner-decor {
		top: 50px;
	}
}

.ie-11 .about-out .about-out-item-inner {
	height: 228px;
}

/*
** About unit
*/
.about-unit {
	padding: 30px;
	background-color: rgba(82, 98, 125, 0.8);
	width: 100%;
	max-width: 100%;
}

.about-unit-title + * {
	margin-top: 18px;
}

.about-unit-quote-body {
	margin-top: 20px;
	width: 100%;
	max-width: 100%;
}

.about-unit-quote-title {
	font-weight: 400;
}

.about-unit-quote-cite {
	color: #72b1f0;
}

* + .about-unit-quote-cite {
	margin-top: 5px;
}

.about-unit-quote-divider {
	width: 100%;
	height: 1px;
	border-top: 1px solid #747d8e;
}

* + .about-unit-quote-divider,
.about-unit-quote-divider + * {
	margin-top: 20px;
}

.about-unit-quote-content {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.about-unit-quote-content-body {
	margin-left: 15px;
	font-style: italic;
	color: #8591a6;
	transform: translateY(-5px);
}

.about-unit-quote svg {
	fill: #8ea0bf;
}

* + .about-unit-quote {
	margin-top: 30px;
}

@media (min-width: 768px) {
	.about-unit-quote {
		display: flex;
		align-items: center;
	}
	.about-unit-quote-left {
		flex-shrink: 0;
	}
	.about-unit-quote-body {
		margin-top: 0;
		margin-left: 30px;
	}
}

@media (min-width: 1200px) {
	.about-unit {
		margin-left: 30px;
		padding: 30px;
	}
}

@media (min-width: 1470px) {
	.about-unit {
		padding: 64px 44px 64px 67px;
	}
	.about-unit-quote-divider + * {
		margin-top: 30px;
	}
}