/* ===================================
    Crafto - Frame In | Kori Cover 
====================================== */
/* font */

/* primary */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');
/* alt */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* variable */
:root {     
    
    --medium-gray: #828c8a;
    --extra-medium-gray: #e4e4e4;
    
    --base-color: #bd4530; 
    --black: #141414;

    --dark-gray: #221e1f;

    --yellow: #f0dea2;
    --light-blue: #7ebec3;

    --primary-font: "Onest", sans-serif;
    --alt-font: "Playfair Display", serif;
    
}

/* css class per schermi superiori a 1920px */
.site-wrapper {
    max-width: 1920px;
    margin: 0 auto !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06); /* bordo fake per risoluzioni superiori a 1920px */
}

@media (min-width: 1921px) {
  
  header .container-fluid {
    max-width: 1920px;
    padding-left: 0px;
    padding-right: 0px;
  }

  .container, 
  .container-lg, 
  .container-md, 
  .container-sm, 
  .container-xl, 
  .container-xxl {
	  max-width: 1560px;
  }  

}

/* Custom Bootstrap overwrite css */
@media (min-width: 1680px) {
  
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1560px;  /* 1320px */
  }

}


body {
    font-size: 18px;
    line-height: 1.7;
    overflow-x: hidden;
    color: #fff;
    background-color: var(--dark-gray);
}

/* TIPOGRAFIA */

/*
h3, .h3 {
	font-size: 2.375rem;
	line-height: 3.125rem;
}

h4, .h4 {
  font-size: 2.25rem;
  line-height: 3rem;
}
*/

p {
  margin-bottom: 15px;
}

hr {
  margin: 2rem 0;
}

.post-content h3 {
	font-size: 2.375rem;
	line-height: 3.125rem;
  margin-bottom: 10px;
}

.post-content h4 {
  font-size: 2.25rem;
  line-height: 3rem;
  margin-bottom: 10px;
}

.post-content ol, .post-content ul {
	padding-left: 1rem;
}

.post-content ul li {
  list-style: disc;
}

.post-content strong {
  color: var(--base-color);
}

.post-content a {
  color: var(--base-color);
}

.post-content a:not(.btn) {
  color: var(--yellow) !important;
  
}

.post-content a:not(.btn):hover {
  text-decoration: underline;
}

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

.text-light-blue {
  color: var(--light-blue) !important;
}

.underline-offset {
  text-underline-offset: 4px;
}

.text-content ul li {
  list-style: disc; 
}

.text-content ul {
  padding-left: 1rem;
}

.link-white-hover-base-color {
  color: white !important;
}

.link-white-hover-base-color:hover {
  color: var(--base-color) !important;
}


/* MARGINI - PADDING */

.bottom-minus-200px {
  bottom: -200px;
}

.bottom-minus-250px {
  bottom: -250px;
}

/* IMMAGINI */

img.img-no-responsive {
  max-width: none !important;
}

/* BUTTON */

.btn {
  border: 2px solid transparent;
  border-radius: 0px;
  text-transform: none;
  letter-spacing: 0.5px;
  font-family: var(--primary-font);
  font-weight: 700;
}

.btn.btn-round-edge {
  border-radius: 6px;
  padding: 12px 24px;
}

.btn.btn-extra-large {
	font-size: 22px;
}

.btn.btn-yellow {
  background-color: var(--yellow);
  color: var(--black);
}
.btn.btn-yellow:hover, .btn.btn-yellow:active {
  background-color: transparent;
  border-color: var(--yellow);
  color: var(--white);
}


.btn.btn-light-blue {
  background-color: var(--light-blue);
  color: var(--black);
}
.btn.btn-light-blue:hover, .btn.btn-light-blue:active {
  background-color: transparent;
  border-color: var(--light-blue);
  color: var(--black);
}


header .btn.btn-yellow:hover, header .btn.btn-yellow:active {
  background-color: var(--yellow);
  border-color: var(--yellow);
  color: var(--black);
}


/* ICONS */

.social-icon-style-09 ul.light li a.facebook:hover {
	color: #3b5998 !important;
  border-color: #3b5998 !important;
}

.social-icon-style-09 ul.light li a.instagram:hover {
	color: #8134af !important;
  border-color: #8134af !important;
}

.social-icon-style-09 ul.light li a.youtube:hover {
	color: #FF0000 !important;
  border-color: #FF0000 !important;
}

.social-icon-style-09 ul.light li a.email:hover {
	color: #f0dea2 !important;
  border-color: #f0dea2 !important;
}


/* SEZIONI */

.mt-section {
  margin-top: 110px; /* equivalente al padding top di default della sezione */
}

.mb-section {
  margin-bottom: 110px; /* equivalente al padding bottom di default della sezione */
}


/* HEADER */

/*
header.sticky-active .navbar {
  height: 60px;
}
*/

header {
  transition: all 0.3s ease;
  max-height: 100px;
}

header .navbar {
	min-height: 100px;
  background-color: var(--dark-gray);
}

/*
header .navbar-brand {
  transition: all 0.3s ease;
  position: absolute;
  top: 15px;
  padding: 0px;
}

header .navbar-brand img {
	max-height: 200px;
  height: 200px;
  width: 200px;
}
*/

header .navbar-brand {
	padding: 5px 0;
}

header .navbar-brand img {
	max-height: 90px;
}

header .navbar-brand img {
  transition: all 0.3s ease;  
}

header.sticky-active .navbar-brand {
	position: relative;
  top: 0;
  padding: 5px 0;
}

header.sticky-active .navbar-brand img {
	max-height: 70px;
}

header .widget-text {
	color: var(--dark-gray);
}

header nav {
  /* background-color: #fff; */
  /* border-bottom: 2px solid var(--base-color); */
  box-shadow: 0 2px 0 0 #bd4530;
  transition: all 0.3s ease;
}

.semi-transparent-bg {
  background-color: rgba(255,255,255, 0.5) !important;
}

.navbar.semi-transparent-bg:hover {
  background-color: rgba(255,255,255, 1) !important;
}

.navbar .navbar-nav .nav-link,
header.sticky.sticky-active [data-header-hover="dark"] .navbar-nav .nav-link {
  color: var(--light-blue);
  font-size: 18px;
  font-weight: 600;
  width: 100%;
}

.navbar .navbar-nav .nav-item:hover .nav-link, 
.navbar .navbar-nav .nav-item.active .nav-link {
	opacity: 1;
}

.navbar .navbar-nav .nav-item:hover > .nav-link, 
.navbar .navbar-nav .nav-item.active > .nav-link,
header.sticky.sticky-active [data-header-hover="dark"] .navbar-nav .nav-item:hover > .nav-link,
header.sticky.sticky-active [data-header-hover="dark"] .navbar-nav .nav-item.active > .nav-link {
	opacity: 1;
  color: var(--yellow);
}

.navbar .navbar-nav .simple-dropdown .dropdown-menu li {
	padding: 0px;
}

.navbar .navbar-nav .dropdown .dropdown-menu {
	padding: 0;
  width: max-content;
  max-width: 320px;
}

.navbar .navbar-nav .dropdown .dropdown-menu a {
  font-size: 16px;
  line-height: 28px;
  color: var(--light-blue);
}

.navbar .navbar-nav .dropdown .dropdown-menu li a {
  padding: 10px 20px;
  border-bottom: 1px solid var(--light-blue);
}

.navbar .navbar-nav .dropdown .dropdown-menu li a:hover,
.navbar .navbar-nav .dropdown .dropdown-menu li.active a {
	padding-left: 20px;
  opacity: 1;
  color: var(--yellow);
}

.navbar .navbar-nav .dropdown .dropdown-menu li:last-child a {
  border: 0;
  padding: 10px 20px;
}

.flag-link {
  padding-left: 20px;
}

/* mobile menu */

.navbar-toggler {
  color: var(--white);
}

.navbar-toggler-line {
  background: var(--white);
}



/* FOOTER */

footer {
  background-color:  #8cc3c9;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}

footer .footer-logo img {
	max-height: 100px;
}


footer p {
  color: var(--dark-gray);
}

footer a {
  color: var(--dark-gray);
  text-decoration: underline;
}




/* MODALE */
button.mfp-close {
  background-color: var(--white);
}

button.mfp-close::before, button.mfp-close:active::before {
	color: var(--black);
	font-size: 16px;
	font-weight: 900;
}

.mfp-bottom-bar {
	margin-top: -30px;
	font-size: 14px;
}


/* INDEX */

.griglia-bg {
  background-color: var(--dark-gray);

  background-image: 
    linear-gradient(to bottom, #456a6c 0px, #456a6c 1px, transparent 1px),
    linear-gradient(to right, #456a6c 0px, #456a6c 1px, transparent 1px);

  background-size: 90px 90px;

}


/* formati */

.cover {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 7 / 12;

    border: 2px solid white;

    --red-padding: 10px;
    --red-width: 100%;
    --red-height: 100%;

    margin-bottom: 25px;
    margin-top: 40px;
}

.top {
    height: 20%;
    display: flex;

    border-bottom: 2px solid white;

}

.bottom {
    height: 80%;
    padding: var(--red-padding);

    display: flex;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;
}

.red-box {
    width: var(--red-width);
    height: var(--red-height);

    background: #bd4530;
}

.formato-container {
  border-top: 4px solid transparent;
}

.formato-container.evidenza {
  border-top: 4px solid #bd4530;
}

.formato-giapponese-bunkoban {
    --red-padding: 18px;
    --red-width: 90%;
    --red-height: 90%;
}

.formato-giapponese-tankobon {
    --red-padding: 10px;
    --red-width: 95%;
    --red-height: 95%;
    
}

.formato-italiano-standard {
    --red-padding: 15px;
    --red-width: 90%;
    --red-height: 90%;
}

.formato-italiano-medio {
    --red-padding: 4px;
    --red-width: 95%;
    --red-height: 95%;
}

.formato-italiano-piccolo {
    --red-padding: 10px;
    --red-width: 95%;
    --red-height: 95%;
}



/* utilizzo */

.utilizzo-titolo-left {
  border-top: 1px solid #456a6c;
  border-bottom: 1px solid #456a6c;
  border-right: 1px solid #456a6c;
}

.utilizzo-titolo-right {
    border-top: 1px solid #456a6c;
    border-bottom: 1px solid #456a6c;
    border-left: 1px solid #456a6c;
}


/* social section */

.social-section {
    background-image: url('../images/sito/framein_logo-social_section.png');
    background-repeat: no-repeat;
    background-position: 3% 35%;
    /* background-size: contain; */
}

.social-section-content {
  margin-top: -200px;
}


/* BLOG */

/* pagination */

.pagination-style-01 .page-item .page-link {
	color: var(--white);
}

.pagination-style-01 .page-item.active .page-link {
	background: var(--base-color);
	color: var(--white);
	box-shadow: 0 0 10px rgba(23, 23, 23, 0.15) !important;
}

.pagination-style-01 .page-item:first-child .page-link:hover, 
.pagination-style-01 .page-item:last-child .page-link:hover {
	color: var(--white);
}

/* search */

.search-wrap {
    position: relative;
    width: 100%;
}

.search-field {
    width: 100%;
    padding-right: 40px; /* spazio per la lente */
    box-sizing: border-box;
}

.search-button {
    position: absolute;
	margin: 0px !important;
	width: 40px;
	height: 40px;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}




/* VECCHIO */

/* sezione carousel soluzioni */

.text-gradient-light-blue-white {
	background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, #00adee 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}




/* GALLERIE */

/* galleria prodotti (sticky) */
.galleria-prodotti-sticky {
  width: 100%;
}

.no-button-contatti .button-contatti {
  display: none;
}



/* CONTATTI */ 

input, select, textarea, .form-control, .form-select {
	color: var(--dark-gray);
}

input:focus, select:focus, textarea:focus, .form-control:focus {
	color: var(--dark-gray);
}

input::placeholder,
textarea::placeholder {
    color: var(--medium-gray);
    opacity: 1; /* importante su Firefox */
}

/* Reset checkbox e radio */
input[type="checkbox"],
input[type="radio"] {
    display: inline-block;  /* affianca il testo */
    width: auto;            /* non full-width */
    margin: 0 8px 2px 0;      /* piccolo margine a destra */
    padding: 0;             /* nessun padding */
    line-height: normal;    /* reset line-height */
    vertical-align: middle; /* allinea al centro del testo */
    cursor: pointer;        /* mano al passaggio */
}

/* Colore normale */
.checkbox-label span {
    color: var(--medium-gray);
    transition: color 0.3s;
}

/* Checkbox selezionato */
.checkbox-label.selected span {
    color: var(--dark-gray);
}

.error {
  color: red !important;
}



/* RESPONSIVE MEDIA QUERIES */

/* per hero section full screen*/
@media (max-height: 799.98px) {
    
    .screen-height-under-800-h-auto {
        height: auto !important;
    }

}


@media (min-width: 1200px) and (max-width: 1399px) {

  body {
    font-size: 16px;
    line-height: 24px;
  }  
  
  .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 20px;
  }

  h3, .h3 {
    font-size: 2rem;
    line-height: 2.15rem;
  }

  h4, .h4 {
    font-size: 1.8rem;
    line-height: 1.95rem;
  }

}

/* lg ≥ 992px < 1200px */
@media (min-width: 992px) and (max-width: 1199px) {

  header .navbar-brand img {
    max-height: 150px;
    height: 150px;
    width: 150px;
  }


  body {
    font-size: 16px;
    line-height: 1.5;
  }  

  .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 20px;
  }

  h3, .h3 {
    font-size: 1.8rem;
    line-height: 1.95rem;
  }

  h4, .h4 {
    font-size: 1.7rem;
    line-height: 1.85rem;
  }  

  /* social section */
  .social-section {
      background-image: none !important;
  }

  .social-section-content {
    margin-top: auto;
  }  


}


/* xs - sm - md */
@media (max-width: 991px) {

  body {
    font-size: 16px;
    line-height: 1.5;
  }  


  header .navbar-brand {
    top: 10px;
    padding: 0px;
  }

  header .navbar-brand img {
    max-height: 80px;
  }

  .navbar-collapse {
    background: var(--dark-gray);
    border-bottom: 2px solid var(--base-color);
  }

  .navbar .navbar-nav .nav-item.active:hover .nav-link, 
  .navbar-modern-inner .navbar-nav .nav-item.active:hover .nav-link, 
  .navbar-full-screen-menu-inner .navbar-nav .nav-item.active:hover .nav-link {
    color: var(--yellow);
    opacity: 1;
  }  

  header .navbar [class*="col-"] .navbar-nav .nav-item.lang-switcher {
	  display: inline-block;
    margin-top: 8px;
  }

  header .navbar [class*="col-"] .navbar-nav .nav-item.lang-switcher a  {
     padding-left: 15px;
  }


  .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 20px;
  }

  h3, .h3 {
    font-size: 2.5rem;
    line-height: 2.65rem;
  }

  h4, .h4 {
    font-size: 1.8rem;
    line-height: 1.95rem;
  }


  .btn.btn-switch-text.btn-extra-large > span {
	  padding: 16px 22px;
  }


  .order-mobile-first {
    order: -1;
  }

  .order-mobile-second {
    order: 1;
  }    

  /* formato */

  .formato-container {
    border-top: 4px solid #bd4530;
  }

  .cover {
      margin-bottom: 20px;
      margin-top: 20px;
  }  


}

@media (min-width: 768px) and (max-width: 991px) {

}


@media (max-width: 767.98px) {

  .d-sm-block {
    display: block !important;
  }

}


/* Extra small <576px */
@media (max-width: 575.98px) {

}