/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-top: 3rem;
color: #5a5a5a;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 22rem;
background-color: #777;
}
.carousel-item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 22rem;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-6 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
.marketing .col-lg-6 p {
margin-right: .75rem;
margin-left: .75rem;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 0rem 0; /* Space out the Bootstrap
more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 400;
line-height: 1;
letter-spacing: -.05rem;
margin-bottom: 1rem;
text-align: center;
vertical-align: middle;
}
/* Header
------------------------- */
.header {
height: 22rem;
margin-bottom: 3rem;
background-color: #999;
background-image: url(../../images/header.png);
background-position: left bottom;
background-repeat: no-repeat;
}
.header-caption{
z-index: 10;
text-align: center;
color:white;
padding-top: 100px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 40em) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
}
.featurette-heading {
font-size: 30px;
}
}
@media (max-width: 30em) {
.header-caption > h2{
font-size: 2.2em;
}
.header-caption > h1{
font-size: 2.3em;
}
.header-caption{
z-index: 10;
text-align: center;
color:white;
padding-top: 70px;
}
}
@media (min-width: 62em) {
.featurette-heading {
margin-top: 1rem;
}
}
.icontp{
margin-right: 7px;
}
.btn-color {
background-color: #50627a;
}
a.a-footer {
color: white;
margin: 0px;
padding: 0px;
}
a.a-footer:hover{
color: white;
text-decoration-line: underline;
}
.avatar{
width: 140px;
height: 140px;
-webkit-border-radius: 140px;
-webkit-background-clip: padding-box;
-moz-border-radius: 140px;
-moz-background-clip: padding;
border-radius: 140px;
background-clip: padding-box;
margin: 7px auto 12px auto;
background-size: cover;
background-position: center center;
}
/* COKKIES CONSENT
-------------------------------------------------- */
.cookie-banner {
position: fixed;
top: auto;
right:5px;
bottom: 0;
bottom: -100%;
left: auto;
padding: 2rem;
max-width: 25%;
z-index: 9999999;
overflow: none;
background-color: #e9e9e9;
border: 1px solid #818181;
text-align: left;
text-decoration: none;
display: iinline-block;
font-size: 16px;
color:#111;
animation: smooth-appear 1s ease forwards;
}
@media only screen and (max-device-width: 600px) {
.cookie-banner{
max-width: 100%;
right: 0;
}
}
@media only screen and (min-width: 600px) {
.cookie-banner{
max-width: 100%;
right: 0;
}
}
@media only screen and (min-width: 768px) {
.cookie-banner{
max-width: 100%;
right: 0;
}
}
@media only screen and (min-width: 992px) {
.cookie-banner{
max-width: 50%;
right: 10px;
}
}
@media only screen and (min-width: 1200px) {
.cookie-banner{
max-width: 25%;
}
}
span.pn:before {
content: attr(t);
}
.cookie-banner p {
margin: 0;
}
p.cookie-title {
font-size: 24px;
font-weight: 600;
margin-bottom: 1rem;
}
p.cookie-content {
margin: 0 0 1.25rem 0;
}
#cookie-accept{
background-color: green;
font-size: 14px;
font-weight: bold;
margin-right: .25rem !important;
margin-bottom: .25rem !important;
padding: 0.5rem 1rem;
border-radius: 2px;
border: none;
color: white;
transition: all ease 0.3s;
cursor: pointer;
outline: none;
}
@keyframes smooth-appear {
to {
bottom: 20px;
opacity:1;
}
}