/*
Theme Name: Nextframe
Theme URI: https://miosito.com
Author: Mario Rossi
Author URI: https://miosito.com
Description: Our fantastic base theme
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Andreana Ferri
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* ! Reset */
/*------------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
}
body, html{ font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; box-sizing: border-box;margin: 0;padding: 0;}
*,*:before,*:after{ box-sizing: border-box; }
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;}
ol,ul{list-style-type: none;}
img{height: auto;}
a{text-decoration: none;}
hr{border:none; border-bottom: 1px solid #ddd}

/*Colore dei link*/
a{text-decoration:none; color: white;}
p{line-height: 1.3;}

/* Utilizzato per spaziare le cose */
.spacer{height: 70px;}


/* ! Title System */
/*------------------------------------------------------------------*/
.text-0{font-size: 5rem !important; line-height: 1;}
h1, .text-1{font-size: 3.4rem;}
h2, .text-2{font-size: 2.2rem;}
h3, .text-3{font-size: 1.5rem;}
h4, p, .text-4{font-size: 1rem;}

h1, h2, h3, h4, p, ol, ul{margin-bottom: 1rem;}

@media (max-width: 768px) {
  .text-0{font-size: 4rem}
}

/* ! Button system */
/*------------------------------------------------------------------*/

/*con wp-block... andiamo ad impostare lo stile di default dei bottoni in wordpress */
.button, .wp-block-button__link{font-size: 1.2rem; text-transform: uppercase; font-weight: bold; background: #333; color:#fff; padding: 14px 25px;display: inline-block;border-radius: 4px}
.button:hover, .wp-block-button__link:hover{background: #000;}

/*
.button--small{  padding: 10px 20px;font-size: 1rem;}
.button--round{background: #fff; color:#000; padding: 15px 30px; border-radius: 100px; font-weight: bold;}
.button--round:hover{background: #000; color:#fff;}
.button--round-outline{background: transparent; color:#fff; padding: 15px 30px; border-radius: 100px; font-weight: bold;border: 1px solid #fff}
.button--round-outline:hover{background: #fff; color:#000;}
*/



/* ! Index */
/*------------------------------------------------------------------*/


/* ! Single */
/*------------------------------------------------------------------*/


/* ! Footer */
/*------------------------------------------------------------------*/
.footer{max-width: 1450px; width: 100%; background-color: #af93eb; color: #fff; padding: 30px 50px 20px 50px; }
.footer div{text-align: center; padding: 20px;}


/* ! Style per i button social */
.wrapper {
  display: inline-flex;
  list-style: none;
}

.wrapper .icon {
  position: relative;
  background: white;
  border-radius: 50%;
  padding: 15px;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  color: #af93eb;
}

.wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #ffffff;
  color: #ffffff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #ffffff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
  background: #1877F2;
  color: #ffffff;
}

.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
  background: #E4405F;
  color: #ffffff;
}

.wrapper .linkedin:hover,
.wrapper .linkedin:hover .tooltip,
.wrapper .linkedin:hover .tooltip::before {
  background: #0D65C2;
  color: #ffffff;
}


/* ! Grid System */
/*------------------------------------------------------------------*/
.grid{display: flex; flex-wrap: wrap; max-width: 1450px; margin: 0 auto;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.grid--small{max-width: 900px}
.grid--medium{max-width: 1200px;}
.grid--center{justify-content: center;}
.grid--full{max-width: 100%}
.grid--footer{display: flex; flex-wrap: wrap; max-width: 900px; width: 100%; margin: 0 auto; justify-content: center;}

.col-20{width:20%}
.col-25{width:25%}
.col-30{width:30%}
.col-33{width:33.33%}
.col-40{width:40%}
.col-50{width:50%}
.col-60{width:60%}
.col-70{width:70%}
.col-80{width:80%}
.col-90{width:90%}
.col-100{width:100%}

[class*='col-']{padding: 10px;}

.grid--full [class*='col-'],
.grid .grid [class*='col-'] {padding: 0;}


@media (max-width: 768px) {
  [class*='col-']{width: 100%}
  .sma-33{width: 33.33%}
  .sma-50{width: 50%}
  .sma-25{width: 25%}
}

/* ! ------------------------------------------------------------------- */
/* ! Blocks */
/* ----------------------------------------------------------------------------------- */

.cover{
  background: #000;padding: 20px;min-height: 100vh;
  display: flex; flex-flow: column;
  justify-content: center;
  align-items: center;
  position:relative;
}
.cover__bg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background:url(bridge.jpg) center center;background-size:cover;z-index:0;border: 1px solid #000}
.cover__bg:after{ content: ' ';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.7) 100%);;background-size:cover;}

.cover__content{max-width: 1200px; margin: 0 auto; position:relative; z-index: 1;width: 100%;}

.cover__content h1{max-width: 1000px}

.available{width: 300px; height: 300px; position:absolute; top:25%; right:10%;}

@media (max-width: 768px) {
  .available{width: 200px; height: 200px;  top:8%; right:2%;}
}

/* ! Animation */
/* --------------------------------------------------------- */

.fade-in{opacity: 0; transform: translateY(1rem);}
.text-reveal{transform: translateY(1rem);clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
.fade-up{opacity: 0; transform: translateY(5rem);}


/* ! Helpers */
/*------------------------------------------------------------------*/
.br{border: 1px solid red;}
.img-res{width: 100%;}
.video-res{width: 100%;height: 100%;overflow: hidden;}
.video-res video{width: 100%;height: 100%;object-fit: cover}

.relative{position: relative;}
.absolute{position: absolute;}

.mt-0{margin-top: 0;}
.mt-1{margin-top: 1rem !important;}
.mt-2{margin-top: 2rem !important;}
.mt-3{margin-top: 3rem !important;}
.mt-4{margin-top: 4rem !important;}
.mt-5{margin-top: 5rem !important;}
.mt-6{margin-top: 6rem !important;}

.mtneg10{margin-top: -10px;}

.mb-0{margin-bottom: 0 !important;}
.mb-1{margin-bottom: 1rem !important;}
.mb-2{margin-bottom: 2rem !important;}
.mb-3{margin-bottom: 3rem !important;}
.mb-4{margin-bottom: 4rem !important;}
.mb-5{margin-bottom: 5rem !important;}


.mbneg25{margin-bottom: -25px !important;}
.mbneg15{margin-bottom: -15px !important;}


.ml-0{margin-left: 0;}
.ml-1{margin-left: 1rem !important;}
.ml-2{margin-left: 2rem !important;}
.ml-3{margin-left: 3rem !important;}
.ml-4{margin-left: 4rem !important;}
.ml-5{margin-left: 5rem !important;}
.ml-6{margin-left: 6rem !important;}

.mr-0{margin-right: 0;}
.mr-1{margin-right: 1rem !important;}
.mr-2{margin-right: 2rem !important;}
.mr-3{margin-right: 3rem !important;}
.mr-4{margin-right: 4rem !important;}
.mr-5{margin-right: 5rem !important;}
.mr-6{margin-right: 6rem !important;}

.text-center{text-align: center}
.text-left{text-align: left}
.text-right{text-align: right}

.p-0{padding: 0;}
.p-1{padding: 1rem;}
.p-2{padding: 2rem;}
.p-3{padding: 3rem;}
.p-4{padding: 4rem;}

.pt-0{padding-top: 0;}
.pt-1{padding-top: 1rem;}
.pt-2{padding-top: 2rem;}
.pt-3{padding-top: 3rem;}
.pt-4{padding-top: 4rem;}

.pb-0{padding-bottom: 0;}
.pb-1{padding-bottom: 1rem;}
.pb-2{padding-bottom: 2rem;}
.pb-3{padding-bottom: 3rem;}
.pb-4{padding-bottom: 4rem;}

.mlr-10{margin-left: -10px; margin-right: -10px;}

.w-10{width: 10%;}
.w-20{width: 20%;}
.w-30{width: 30%;}
.w-40{width: 40%;}
.w-50{width: 50%;}
.w-60{width: 60%;}
.w-70{width: 70%;}

.fw-100{font-weight: 100;}
.fw-200{font-weight: 200;}
.fw-300{font-weight: 300;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}
.fw-800{font-weight: 800;}
.fw-900{font-weight: 900;}

.txt-uline{text-decoration: underline;}

.rotate-20{transform: rotate(20deg);}

.icon-small{width: 40px;padding: 8px;}
.icon-white{filter: invert(1);}

.bg-dark{background: #000;}
.text-white{color:#fff}
.text-dark{color:#000}

.v-center{display: flex; justify-content: center; flex-flow: column;align-items: flex-start;}

.alg-center{align-items: center !important;}
.alg-left{align-items: start;}
.alg-right{align-items: end;}

.just-center{justify-content: center !important;}
.just-left{justify-content: start !important;}
.just-right{justify-content: end !important;}

.flex{display: flex;}

.margin-auto{margin: 0 auto;}

.font-normal{font-weight: 400;}

.bg-green:hover{background-color: #48E670;}

.none{display: none;}
@media (max-width: 768px) {
  .sma-none{display: none;}
}

@media (min-width: 768px) {
  .desk-none{display: none;}
/* -------------------------------------------------------------------------------- */
/* ! Smartphone Helpers */
/* -------------------------------------------------------------------------------- */}
@media (max-width: 768px) {

  .s-m0{margin: 0 !important;}

  .s-mt-0{margin-top: 0 !important;}
  .s-mt-1{margin-top: 1rem !important;}
  .s-mt-2{margin-top: 2rem !important;}
  .s-mt-3{margin-top: 3rem !important;}
  .s-mt-4{margin-top: 4rem !important;}
  .s-mt-5{margin-top: 5rem !important;}
  .s-mt-6{margin-top: 6rem !important;}

  .s-mb-0{margin-bottom: 0 !important;}
  .s-mb-1{margin-bottom: 1rem !important;}
  .s-mb-2{margin-bottom: 2rem !important;}
  .s-mb-3{margin-bottom: 3rem !important;}
  .s-mb-4{margin-bottom: 4rem !important;}

  .s-ml-0{margin-left: 0 !important;}
  .s-ml-1{margin-left: 1rem !important;}
  .s-ml-2{margin-left: 2rem !important;}
  .s-ml-3{margin-left: 3rem !important;}
  .s-ml-4{margin-left: 4rem !important;}
  .s-ml-5{margin-left: 5rem !important;}
  .s-ml-6{margin-left: 6rem !important;}

  .s-mr-0{margin-right: 0 !important;}
  .s-mr-1{margin-right: 1rem !important;}
  .s-mr-2{margin-right: 2rem !important;}
  .s-mr-3{margin-right: 3rem !important;}
  .s-mr-4{margin-right: 4rem !important;}
  .s-mr-5{margin-right: 5rem !important;}
  .s-mr-6{margin-right: 6rem !important;}

  .s-p-0{padding: 0 !important;}
  .s-p-1{padding: 1rem !important;}
  .s-p-2{padding: 2rem !important;}
  .s-p-3{padding: 3rem;}
  .s-p-4{padding: 4rem;}

  .s-pt-0{padding-top: 0 !important;}
  .s-pt-1{padding-top: 1rem;}
  .s-pt-2{padding-top: 2rem;}
  .s-pt-3{padding-top: 3rem;}
  .s-pt-4{padding-top: 4rem;}

  .s-pb-0{padding-bottom: 0 !important;}
  .s-pb-1{padding-bottom: 1rem;}
  .s-pb-2{padding-bottom: 2rem;}
  .s-pb-3{padding-bottom: 3rem;}
  .s-pb-4{padding-bottom: 4rem;}

  .s-text-center{text-align: center;}
  
  .s-alg-center{align-items: center !important;}

  .s-justend{justify-content: end;}
	
	.s-fz-33{font-size: 33px !important;}
	.s-fz-28{font-size: 28px !important;}
	
}


/* ! Wordpress Styles */
/*------------------------------------------------------------------*/

input, textarea{border: 3px solid #ddd; border-radius: 3px;padding: 10px;}
input[type=submit], button{border: 3px solid #ddd; background: #ddd; border-radius: 3px;padding: 10px;}

.form-search{width: 100%;border: 3px solid #ddd;border-radius: 100px;padding-left: 15px;}
.form-search input{width: calc(100% - 40px); border: none;}
.form-search button{padding: 0; background: transparent; border: none;}
.form-search img{width: 25px;margin-bottom: -8px;}

/* il calc viene utilizzato per spostare l'immagine, in .alignfull: Prima viene centrata con 50% e poi 
viene allineata a sinistra con il - 50vw di modo cosi che sia a tutto schermo e risulti responsive. 
Stesso discorso per .alignwide solo che viene spostate di -45vw di modo da dargli del margine ai lati.*/
.alignfull{width: 100vw;margin-left: calc(50% - 50vw);}
.alignwide{width: 90vw;margin-left: calc(50% - 45vw);}