/*
 Theme Name:   IO01 - Umanesimo Tecnologico
 Theme URI:    https://understrap.com
 Description:  Il sito della rivista Accademica IO01 Umansesimo Tecnologico dell'Accademia SantaGiulia
 Author:       Corso di Progettazione Multimediale a.a. 2021-2022
 Author URI:   https://www.accademiasantagiulia.it/
 Template:     understrap
 Version:      1.5.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  understrap-child
 Tags: one-column, custom-menu, featured-images, theme-options, translation-ready
 GitHub Theme URI: understrap/understrap-child
*/
:root {
  --gray: #ebebeb;
  --divider: #646464;
  --brandH: 85px;
  --bs-primary-rgb: 95, 133, 186;
  --color-1: #5b84bb;
  --color-2: #f79288;
  --success: #00674A;
  --error: #BB392D;
  --primaryText: #333;
}

::selection {
  background-color: var(--secondary);
  color: #fff;
}

/* BASE */
/* Buttons */
.fill-button {
  min-width: 200px;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  border: none;
  border-radius: 50px;
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  text-decoration: none;
}

.btn-gradient {
  background: var(--gradientStart);
  background-image: linear-gradient(90deg, var(--gradientStart) 0%, var(--gradientEnd) 100%);
  background-size: 150% 100%;
  box-shadow: 0 4px 15px 0 rgba(var(--gradientStart), .75);
  color: #fff;
  transition: all .4s ease-in-out;
}

.btn-gradient:hover {
  background-position: 100% 0;
  color: #fff;
  transition: all .4s ease-in-out;
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
}

.btn-transparent {
  text-decoration: none;
  background-color: transparent;
  color: var(--secondary);
  font-weight: bold;
  transition: all .5s ease-in-out;
}

.btn-transparent:hover {
  opacity: .75;
  color: var(--secondary);
}

.btn-back svg {
  transition: all .5s ease-in-out;
  position: relative;
  left: 0;
  padding-right: 4px;
  width: 24px;
  height: 24px;
}

.btn-back:hover svg {
  left: 5px;
}

a.cta-banner {
  padding: 12px 20px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--primaryText);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  transition: all .5s ease-in-out;
}

a.cta-banner .bi-arrow-right-circle-fill {
  color: var(--secondary);
  width: 24px;
  height: 24px;
  transition: all .5s ease-in-out;
  position: relative;
  left: 0;
}

a.cta-banner:hover {
  opacity: .75;
}

a.cta-banner:hover .bi-arrow-right-circle-fill {
  left: -5px;
}

/* General grid */
.box-content {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
}

/* General Utilities */
.u-bold {
  font-weight: bold;
}

.u-upp {
  text-transform: uppercase;
}

.u-bg-gray {
  background-color: #ebebeb;
}

.u-estremi {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.u-estremi h1,
.u-estremi h2,
.u-estremi h3,
.u-estremi h4,
.u-estremi h5 {
  margin: 0;
}

.icn-color01 {
  color: var(--color-1);
}

.icn-24 {
  width: 24px;
  height: 24px;
}

.icn-48 {
  width: 48px;
  height: 48px;
}

.icn-color02 {
  color: var(--secondary);
}

/* Spacer Utilities */
.my-spacer {
  margin-top: 80px;
  margin-bottom: 80px;
}

@media screen and (max-width: 575px) {
  .my-spacer {
    margin-top: 50px;
    margin-bottom: 50px;
  }
}

.my-xs {
  margin-top: 10px;
  margin-bottom: 10px;
}

.my-sm {
  margin-top: 20px;
  margin-bottom: 20px;
}

.my-md {
  margin-top: 40px;
  margin-bottom: 40px;
}

.my-lg {
  margin-top: 60px;
  margin-bottom: 60px;
}

.my-xl {
  margin-top: 120px;
  margin-bottom: 120px;
}

@media screen and (max-width: 575px) {
  .my-xl {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

.mb-spacer {
  margin-bottom: 80px;
}

@media screen and (max-width: 575px) {
  .mb-spacer {
    margin-bottom: 50px;
  }
}

.mb-xs {
  margin-bottom: 10px;
}

.mb-sm {
  margin-bottom: 20px;
}

.mb-md {
  margin-bottom: 40px;
}

.mb-lg {
  margin-bottom: 60px;
}

.mb-xl {
  margin-bottom: 120px;
}

@media screen and (max-width: 575px) {
  .mb-xl {
    margin-bottom: 60px;
  }
}

.mt-spacer {
  margin-top: 80px;
}

@media screen and (max-width: 575px) {
  .mt-spacer {
    margin-top: 50px;
  }
}

.mt-xs {
  margin-top: 10px;
}

.mt-sm {
  margin-top: 20px;
}

.mt-md {
  margin-top: 40px;
}

.mt-lg {
  margin-top: 60px;
}

.mt-xl {
  margin-top: 120px;
}

@media screen and (max-width: 575px) {
  .mt-xl {
    margin-top: 60px;
  }
}

.mr-spacer {
  margin-right: 80px;
}

@media screen and (max-width: 575px) {
  .mr-spacer {
    margin-right: 50px;
  }
}

.mr-xs {
  margin-right: 10px;
}

.mr-sm {
  margin-right: 20px;
}

.mr-md {
  margin-right: 40px;
}

.mr-lg {
  margin-right: 60px;
}

.mr-xl {
  margin-right: 120px;
}

@media screen and (max-width: 575px) {
  .mr-xl {
    margin-right: 60px;
  }
}

.ml-spacer {
  margin-left: 80px;
}

@media screen and (max-width: 575px) {
  .ml-spacer {
    margin-left: 50px;
  }
}

.ml-xs {
  margin-left: 10px;
}

.ml-sm {
  margin-left: 20px;
}

.ml-md {
  margin-left: 40px;
}

.ml-lg {
  margin-left: 60px;
}

.ml-xl {
  margin-left: 120px;
}

@media screen and (max-width: 575px) {
  .ml-xl {
    margin-left: 60px;
  }
}

.py-spacer {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media screen and (max-width: 575px) {
  .py-spacer {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

.py-xs {
  padding-bottom: 10px;
  padding-top: 10px;
}

.py-sm {
  padding-bottom: 20px;
  padding-top: 20px;
}

.py-md {
  padding-bottom: 40px;
  padding-top: 40px;
}

.py-lg {
  padding-bottom: 60px;
  padding-top: 60px;
}

.py-xl {
  padding-bottom: 120px;
  padding-top: 120px;
}

@media screen and (max-width: 575px) {
  .py-xl {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.pb-spacer {
  padding-bottom: 80px;
}

@media screen and (max-width: 575px) {
  .pb-spacer {
    padding-bottom: 50px;
  }
}

.pb-xs {
  padding-bottom: 10px;
}

.pb-sm {
  padding-bottom: 20px;
}

.pb-md {
  padding-bottom: 40px;
}

.pb-lg {
  padding-bottom: 60px;
}

.pb-xl {
  padding-bottom: 120px;
}

@media screen and (max-width: 575px) {
  .pb-xl {
    padding-bottom: 60px;
  }
}

.pt-spacer {
  padding-top: 80px;
}

.pt-xs {
  padding-top: 10px;
}

.pt-sm {
  padding-top: 20px;
}

.pt-md {
  padding-top: 40px;
}

.pt-lg {
  padding-top: 60px;
}

.pt-xl {
  padding-top: 120px;
}

@media screen and (max-width: 575px) {
  .pt-xl {
    padding-top: 60px;
  }
}

.pr-spacer {
  padding-right: 80px;
}

@media screen and (max-width: 575px) {
  .pr-spacer {
    padding-right: 50px;
  }
}

.pr-xs {
  padding-right: 10px;
}

.pr-sm {
  padding-right: 20px;
}

.pr-md {
  padding-right: 40px;
}

.pr-lg {
  padding-right: 60px;
}

.pr-xl {
  padding-right: 120px;
}

@media screen and (max-width: 575px) {
  .pr-xl {
    padding-right: 60px;
  }
}

.pl-spacer {
  padding-left: 80px;
}

@media screen and (max-width: 575px) {
  .pl-spacer {
    padding-left: 50px;
  }
}

.pl-xs {
  padding-left: 10px;
}

.pl-sm {
  padding-left: 20px;
}

.pl-md {
  padding-left: 40px;
}

.pl-lg {
  padding-left: 60px;
}

.pl-xl {
  padding-left: 120px;
}

@media screen and (max-width: 575px) {
  .pl-xl {
    padding-left: 60px;
  }
}

/* END BASEcss */

/* HP */




/* Stile menu di navigazione */
#main-nav {
  margin-bottom: 60px;
}

#main-nav .current-menu-item a,
#main-nav a:hover {
  font-weight: bold;
  color: #333;
}

#main-nav ul a {
  text-transform: uppercase;
  transition: all .5s ease-in-out;
}


#main-nav .navbar-brand img {
  width: 200px;
}

#main-nav #search-form input {
  border-radius: 20px;
  padding: 8px;
  padding-left: 15px;
  border: 0px;
  background-color: #dfdfdf;
}

/* Stile del menu espanso dal breakpoint 768 */
@media screen and (min-width: 768px) {
  #main-nav>.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
  }

  #main-nav .navbar-brand {
    width: 100%;
    text-align: center;
    margin-right: 0;
    margin: 16px auto;
  }

  #main-nav .navbar-brand img {
    height: var(--brandH);
    width: auto;
  }

  #main-nav #main-menu {
    margin: 0 !important;
    width: 100%;
    border-top: 5px solid #333;
    border-bottom: 1px solid #333;
  }

  #main-nav #main-menu li {
    flex: 1 0 auto;
    text-align: center;
    border-right: 1px solid #333;
  }

  #main-nav #main-menu li:last-child {
    border-right: 0;
  }

  #search-form,
  #social {
    position: absolute;
    top: calc(var(--brandH)/2);
  }

  #search-form {
    left: 15px;
  }

  #social {
    right: 15px;
  }
}

/* Style the shortcode [evidenzia] */
mark.highlight {
  background-color: #6285b9;
  color: #fff;
}

/* Helper Class */
.bg-dark {
  background-color: #424242;
}

.u-white {
  color: #fff;
}

.u-text-center {
  text-align: center;
}

/* Footer Style */

footer .footer-bottom {
  padding: 16px;
  position: relative;
}

footer .footer-bottom::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  width: 100%;
  background-color: var(--divider);
}

/* Icn Helper Class */
.icn-small {
  height: 20px;
  max-width: 22px;
}

.icn-medium {
  height: 32px;
  max-width: 36px;
}

.icn-large {
  height: 44px;
  max-width: 50px;
}

.icn-big {
  height: 55px;
  max-width: 60px;
}

.icn-bigger {
  height: 103px;
  max-width: 120px;
}

.icn-right {
  margin-left: 16px;
}

.icn-left {
  margin-right: 16px;
}

.icn-gray svg,
.icn-gray * {
  fill: #878888;
}

.icn-primary svg,
.icn-primary * {
  fill: var(--primary);
}

.icn-white svg,
.icn-white * {
  fill: #fff;
}

.icn.icon-left {
  margin-right: 16px;
}

.social-item {
  color: #878888;
  text-decoration: none;
}

/* Pagina: chi siamo */
.member-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* Modal */
.modal-member-wrapper .modal-header {
  padding-bottom: 0;
  border-bottom: 0;
  align-items: flex-start;
}

.member-modal-header img {
  width: 80px;
  height: 80px;
  border: 1px solid #f2f2f2;
}

.modal-member-wrapper .modal-content {
  padding: 20px 10px;
}

/* END chi siamo */


/* Editore */
.page-template-editore {
  line-height: 1.5rem;
}

.page-template-editore .card {
  background: linear-gradient(120deg, #5180b1, #f77b70);
  border-radius: 10px;
  margin: 20px 0 50px;
  padding: 15px;
  font-weight: bold;
  font-family: "Roboto Slab";
  line-height: 1.5rem;
}

.page-template-editore .row.group,
.page-template-editore .row.social {
  margin-top: 30px;
}

.page-template-editore .strong {
  font-weight: bold;
}

.page-template-editore .italic {
  font-style: italic;
}

.page-template-editore .social a {
  color: black;
}

.page-template-editore .social a:hover {
  color: #f77b70;
}

.page-template-editore .social svg {
  margin: 0 5px 0 5px;
}

/* END Editore */


/* Archive Riviste */
.card-rivista {
  padding: 24px 32px;
  align-items: flex-start;
}

.card-rivista--image {
  width: 320px;
}

.card-rivista--image img {
  box-shadow: 0px 2px 8px rgba(66, 71, 76, 0.1);
  border-radius: 10px;
  width: 100%;
  height: auto;
}

.card-rivista .btn-gradient {
  max-width: 120px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
}

/* END Archive Riviste */

/* CF7 messages */
.wpcf7 form .wpcf7-response-output {
  color: #fff;
  text-align: center;
  font-weight: 700;
  padding: 10px;
  font-size: 14px;
  line-height: 20px;
}

.wpcf7 form.sent .wpcf7-response-output {
  background-color: var(--success);
  border-color: var(--success);
}

.wpcf7 form.invalid .wpcf7-response-output {
  background-color: var(--error);
  border-color: var(--error);
}

html .wpcf7 {
  /* Change Autocomplete styles in Chrome*/
}

html .wpcf7 .wpcf7-not-valid-tip {
  color: var(--error);
}

html .wpcf7 .wpcf7-validation-errors {
  color: var(--error);
}

html .wpcf7 input.wpcf7-not-valid,
html .wpcf7 .wpcf7-not-valid-tip {
  border-color: var(--error);
}

html .wpcf7 .wpcf7-form-control-wrap input.wpcf7-not-valid+span.wpcf7-not-valid-tip {
  margin-top: 5px;
}

html .wpcf7 .wpcf7-spinner {
  position: relative;
  top: 10px;
}

html .wpcf7 .wpcf7-spinner:before {
  display: none;
}

html .wpcf7 input:-webkit-autofill,
html .wpcf7 input:-webkit-autofill:hover,
html .wpcf7 input:-webkit-autofill:focus,
html .wpcf7 textarea:-webkit-autofill,
html .wpcf7 textarea:-webkit-autofill:hover,
html .wpcf7 textarea:-webkit-autofill:focus,
html .wpcf7 select:-webkit-autofill,
html .wpcf7 select:-webkit-autofill:hover,
html .wpcf7 select:-webkit-autofill:focus {
  background-color: #EDDFE7;
  color: #fff;
  transition: background-color 5000s ease-in-out 0s;
}

.spinner,
html .wpcf7 .wpcf7-spinner {
  width: 24px;
  height: 24px;
  background: transparent;
}

.spinner-anim-01 {
  border: 4px solid transparent;
  border-left-color: currentcolor;
  border-right-color: currentcolor;
  border-radius: 50% !important;
  -webkit-animation: 1s spin01 linear infinite;
  animation: 1s spin01 linear infinite;
}

@keyframes spin01 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.spinner-anim-02,
html .wpcf7 .wpcf7-spinner {
  border: 4px solid currentcolor;
  border-bottom-color: transparent;
  border-radius: 50% !important;
  -webkit-animation: 1s spin02 linear infinite;
  animation: 1s spin02 linear infinite;
  position: relative;
}

@keyframes spin02 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* END CF7 messages */

/* Single */
body.single .article-header img {
  border-radius: 20px;
}

/* END Single */

/* Flex Components */
.container.gallery-container {
  max-width: 992px;
}


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

  #search-form,
  #social {
    display: none;
  }
}


.mobile-only {
  display: inherit;
  visibility: visible;
}

/* NAV Breakpoint */
@media screen and (min-width:768px) {
  .mobile-only {
    visibility: hidden;
    display: none;
  }
}


.card-contest--item {
  display: flex;
  flex-direction: row;
  text-decoration: none;
  color: var(--primaryText);
}

.card-contest--item .text {
  margin-left: 16px;
}


body {
  background-color: red;
  background-color: var(--first-color);
}


/* Card Contest */
.card-contest-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-contest-item h1 {
  text-align: center;
  color: var(--primaryText);
}

.card-contest-item .card-contest-item--image {
  min-height: 180px;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
}

.card-contest-item p {
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 30px);
  max-width: 880px;
  width: clamp(calc(100% - 30px), 80%, 880px);
  text-align: center;
}


.card-contest-item .cta-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.card-contest-item .cta-wrapper a {
  margin: 20px 24px;
  flex: 0 0 auto;

}

@media screen and (min-width: 576px) {
  .card-contest-item .card-contest-item--image {
    min-height: 320px;
    border-radius: 56px;
  }

  .card-contest-item p {
    text-align: left;
  }
}

@media screen and (min-width: 1200px) {
  .card-contest-item .card-contest-item--image {
    min-height: 480px;
    border-radius: 56px;
  }
}

.card-contest-item a {
  text-decoration: none;
}

footer {
  background-color: var(--gradientStart);
}

a {
  color: var(--primary);
}


.row_download {
	border-bottom: 1px solid #ccc;
	padding: 6px 0;
}

.row_download > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

@media screen and (min-width: 768px) {
	.row_download {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}