/*Reset*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

a{
 text-decoration: none; 
}

article .div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
article .div > * {
  display: flex;
  flex-direction: column;
}

/*Scrollbar*/

::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: transparent;
}

::-webkit-scrollbar
{
  width: 16px;
  background-color: #F3F3F3;
}

::-webkit-scrollbar-thumb
{
  background-color: #D21432;
}

/*Animations*/

@keyframes scale{
  0% {width: 0;transform:scale(0,0) rotate(0deg);}
  100% {width: 30px; transform:scale(1,1) rotate(750deg);}
}

@keyframes scale2{
  0% {width: 0;transform:scale(0,0) rotate(0deg);}
  100% {width: 30px; transform:scale(6,6) rotate(360deg);}
}

/*Cursor*/

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0px 0px 23px 20px rgba(210,20,48,1);
  }

  70% {
    transform: scale(1);
    box-shadow: 0px 0px 23px 20px rgba(210,20,48,1);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0px 0px 23px 20px rgba(210,20,48,1);
  }
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
/*
*{
  cursor: none;
}

/*.cursor{
  top:0;
  left:0;
  pointer-events: none;
  position: fixed;
  z-index:99999;
  background-color: #D21432;
}

.cursor.standard{
 
  border-radius: 100%;
  transition-property: width,height,border-radius;
  width: 1rem;
  height: 1rem;
}

.cursor.text{
  width: 0.2rem;
  height: 2rem;
  mix-blend-mode: multiply;
  border-radius: 0;
  transition-property: width,height,border-radius;
}

.cursor.link{
  width: 2rem;
  height: 2rem;
  border-radius: 100%;
  mix-blend-mode: multiply;
  transition-property: width,height,border-radius;
  -webkit-box-shadow: 0px 0px 23px 20px rgba(210,20,48,1);
  -moz-box-shadow: 0px 0px 23px 20px rgba(210,20,48,1);
  box-shadow: 0px 0px 23px 20px rgba(210,20,48,1);
  animation: pulse 1s linear infinite;
  transition-duration: 0;
  transform-origin: center center;
}

/*Menu*/

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay*/   
  overflow-y: hidden; /* Hide vertical scrollbar */
  height: 0;
  width: 100%;
  opacity: 0;
  position: fixed; /* Stay in place */
  z-index: 3; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 1s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a{
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 1s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #E6E7E8;
}

/* Position the close button (top right corner) */
.overlay .closebtn, .open {
  top: 10px;
  right: 5%;
}
.overlay .closebtn{
  position: absolute;
}

.overlay a.closebtn{
  transition: 3s;
  transform: rotate(45deg);
  margin-top:-10px;
  margin-right:-6px;
}

.closebtn{
  z-index: 3;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 30px;
  }
}


/*Custom*/

body{
  background-color: #282828;
  font-family: runda, sans-serif;
  font-style: normal;
  overflow-x: hidden; 
}

header nav{
  align-items: center;
}

.end{
  justify-content: flex-end;
  display:flex;
}

.between{
  justify-content: space-between;
  display:flex;
}

.column{
  flex-direction: column;
  display:flex;
}

.tabcontent row{
  flex-wrap: wrap;
}

nav ul, header a, header .open {
  justify-content: space-between;
  flex-direction: row;
  pointer-events: auto;
}

header li{
  flex-direction: column;
}

header li a{
  font-weight: 300;
}

header{
  position: fixed;
  z-index: 2000;
  top: 0;
  pointer-events: none;
}

::-moz-selection {
  color: #f3f3f3;
  background: #D21432;
}

::selection {
  color: #f3f3f3;
  background: #D21432;
}

/*Grid*/

#about{
  border-top: 1px solid #f3f3f3;
}

#about hr{
  border:none;
  border-top:solid 1px #f3f3f3;
}

.background-img{
  position: relative;
}

.background-img a{
  position: absolute;
  width: 100%;
  height: 100%;
}

hgroup{
  margin-right:-20px;
}

header, footer{
  width:100%;
}

.full-center{
  width:100%;
  margin:0 auto;
}

footer > div{
  flex-direction: row;
}

footer .contact{
  position: relative;
  min-width: 200px;
}

#about img, footer img{
  animation:spin 30s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

ul{
  list-style: none;
  display: flex;
}

.t-white, .t-white a{
  color: #F3F3F3;
}

nav li a{
  opacity:.6;
transition: opacity 1s;
}

.t-white a:hover{
  color: #F3F3F3;
  opacity:1;
}

p, h1, h2, h3, .tablinks h2{
  letter-spacing: 0.015rem;
}

.tablinks{
  padding:0;
}

header a{
 letter-spacing: 0.15em;
}

article p, footer p, footer p{
  line-height: 1.2;
}

.t-black{
  color: #282828;
}

.white{
  background-color: #F3F3F3;
}

.black{
  background-color: #282828;
}

.flex-row{
  flex-direction: row;
}

article img, article video{
  width: 100%;
}

.desc{
  flex-direction: column;
  position: relative;
}

.desc a{
  position:absolute;
  width: 100%;
  height:100%;
  top: 0;
  left: 0;
}

button{
  color:inherit;
  font-family: inherit;
  font-weight: inherit;
}

.container {
  margin: 0 auto;
}

.single div.intro{
  border-top: solid 1px #f3f3f3;
  border-bottom: solid 1px #f3f3f3;
  width:100%;
}


.single .intro section, .single .container div{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}


.single .intro headergroup, .single h2{
  flex-basis:41%;
}

.single section div, .single > section.container p{
 flex-basis:59%;
}

#about div.contact, footer .flex{
  position:relative;
}

#about div.contact a{
  position:absolute;
  height: 100%;
  width: 100%;
}

footer img{
  margin:-5px 10px 0 0;
}

footer div.flex{
  align-items: flex-start;
  padding:0 20px;
}


/*Header*/

/*header .container {
  display: grid;
  grid-template-columns: 12fr;
  justify-items: end;
  align-items: center;
  grid-template-areas:
  "Logo"
  "Menu .";
}

.Logo { grid-area: Logo; }

.Pictogram { grid-area: Pictogram; }

.Menu { grid-area: Menu; }
*/

header img{
  max-width: 100%;
}

header h1{
  position: relative;
}

header h1 a{
  width: 100%;
  height:100%;
  position: absolute;
}


/*Moduli*/

.background-img{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.tabcontent .background-img{
  min-height:300px;
}

#luce{
  background-image: url("../img/stationery4-luce.webp");
}

#recal{
  background-image: url("../img/stationery-recal.webp");
} 

#pixantenna{
  background-image: url("../img/catalog-pixantenna.webp");
}

#pollution{
  background-image: url("../img/stationery-pollution.webp");
}

#sayatva{
  background-image: url("../img/folders-sayatva.webp");
} 

#piadi{
  background-image: url("../img/cups-piadi.webp");
} 

#franzolini{
  background-image: url("../img/book-l-franzolini.webp");
}

#wintryy{
  background-image: url("../img/boxback-wintryy.webp");
}

#qbranch{
  background-image: url("../img/stationery3-qbranch.webp");
}

.mb-0{
  margin-bottom:0;
}

.mt-30{
  margin-top:30px;
}

.p-30{
  padding:30px;
}

.pt-30{
  padding-top:30px;
}

.pb-30{
  padding-bottom:30px;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.w-500{
  font-weight: 500;
}

.w-300{
  font-weight: 300;
}

#about section > p{
  font-size:18px;
}

/*Tabs*/

/* Style the tab */
.tab{
  overflow: hidden;
  border-top: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
}


/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
}

.tab h2{
  font-weight: 300;
}

/* Style the tab content */
.tabcontent{
  display: none;
  animation: fadeEffect 2s;
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

.tabcontent h3{
  font-weight: 300;
}

.tabcontent article{
  position: relative;

}

.tabcontent a{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
}

article#work + footer, article#about + footer{
  border-top:solid 1px #f3f3f3;
  /*margin-top:90px;*/
}

nav button{
  position: relative;
}

nav button img{
  opacity: 0;
  max-width: 30px;
  position:absolute;
  -webkit-transform: translate(-50%, 0);
  -webkit-transition: opacity 1.0s ease-in;
  -moz-transition: opacity 1.0s ease-in;
  -o-transition: opacity 1.0s ease-in;
}

nav button.active img, nav button:hover img{
  opacity: 1;
}

footer .flex a{
  width:100%;
  height:100%;
  position:absolute;
}

/*Media*/

@media screen and (max-width:488px) {
  footer p:first-child{
    padding-bottom:30px;
  }
}

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

  body{
    padding-top: 71px;
  }

  hgroup .end{
    justify-content: flex-start;
  }

  .home .col-9{
    max-width: none;
  }

  .desc.col-3{
    max-width: 87%;
  }

  .desc{
    grid-template-rows: 1fr 1fr 1fr;
    min-height: 150px;
  }

  .desc h2{
    font-size: 24px;
  }

  .desc p{
    font-size: 12px;
  }

  article.home{
    flex-direction: column;
  }

 /* .primordial{
    flex-direction: row;
  }

  .primordial img{
    max-width:10px;
  }*/

  header hgroup nav.end{
    display: none;
  }

  .tab h2, {
   padding-top:42px;
   padding-bottom:52px;
   font-size:16px;
 }

 .open{
  position:fixed;
  z-index:2;
}

.container{
  max-width: 90%;
}

.Menu{
  display: none;
}

h1 img {
  max-width: 300px;
  height: 70px;
}

header .container {
  justify-items: start;
  align-items: center;
}

#about{
  padding-top:4vh;
}

#about h1, #about p:last-child, #about, #about p+hr, #about hr+h2{
  margin-bottom:4vh;
}

#about p+hr, #about p+p{
  margin-top:4vh;
}

.home .background-img{
  min-height:363px;
}

footer .between{
  flex-wrap: wrap;
}

#about img{
  max-width: 50px;
}

.single img+div{
  margin-top:30px;
  margin-bottom:30px;
}

.single section img:first-child{
  margin-top:30px;
}

.single div.intro{
  padding: 30px 0;
}

#work nav{
  flex-wrap: wrap;
  padding-top: 30px;
}

.tab h2{
  padding-bottom: 30px;
}

#work nav button{
  flex: 0 50%;
}

#work nav button:nth-child(odd) h2{
 text-align:left;
}

#work nav button:nth-child(even) img{
 top:0;
 left:30%;
}

#work nav button:nth-child(odd) img{
 top:0;
 right:30%;
}

#work nav button:nth-child(even) h2{
 text-align:right;
}

#work nav img{
  margin-top:-5px;
}
}


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

  #work article {
    max-width: 100%;
    width: 100%;
  }

  header .col-3{
    display: none;
  }

  .tabcontent article {
    margin-top: 32px;
  }


  .tabcontent article:last-child {
    margin-bottom: 32px;
  }

  .Pictogram{
    display:none;
  }

  .home .desc{
    padding: 20px 5% ;
  }
}


@media screen and (min-width: 576px) and (max-width:767.8px){

  header .col-9{
    max-width: none;
  }

  nav button img{
    top:16px;
  }
}


@media (min-width: 768px) {
  .open{
    display: none;
  }

  header{
    margin-top:20px;
  }

  header li{
    font-size:12px;
    margin-right: 24px;
  }

  nav button img{
    opacity: 0;
    left:50%;
  }
}



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

  body{
    padding-top: 134px;
  }

  header .col-3{
    display: none;
  }

  header .col-9{
    max-width: none;
  }
  .home .col-9{
    max-width: none;
  }

  nav button img{
    top:17px;
  }

  /*

  .primordial{
    flex-direction: column;
  }

  .primordial img{
    max-width:10px;
  }
  */
  .desc{
    display: grid;
    grid-template-columns: 5fr 9fr;
  }

  .desc.col-3{
    max-width: 92%;
  }

  article.home{
    flex-direction: column;
  }

  .desc h2{
    font-size:24px;
  }

  .desc p{
    padding-right:54px;
    font-size:12px;
  }

  .container{
    max-width: 78%;
  }

  body{
    padding-top: 142px;
  }

  .home .background-img{
    min-height:486px;
  }

  header .container {
    grid-template-columns: 1fr;
  }

  #about{
    padding-top:7vh;
  }

  #about h1, #about p:last-child, #about p+hr, #about, #about hr+h2{
    margin-bottom:7vh;
  }

  #about p+hr, #about p+p{
    margin-top:7vh;
  }

  .single img+div{
    margin-top:30px;
    margin-bottom:30px;
  }

  .single section img:first-child{
    margin-top:30px;
  }


  .single div.intro{
    padding: 30px 0;
  }

  .tab h2 {
    padding-top: 57px;
    padding-bottom: 57px;
  }

}

@media screen and (min-width: 768px) and (max-width:1199.8px){
  
header nav{
  height:45px;
}

  header .container {
    grid-template-rows: auto 48px;
  }

  #about .contact img{
    max-width: 50px;
  }
}


@media (min-width: 992px) { 

/*  .primordial img{
    max-width:17px;
  }*/

  nav button img{
    top:15%;
  }

  #pictogram{
    max-width:30px;
  }

  .home .desc{
    padding: 30px 0 30px 30px;
  }

  .col-3{
    max-width: 25%;
    width: 100%;
  }

  .col-9{
  max-width:75%;
  width: 100%;
}

.col-10{
  max-width:83.33334%;
  width: 100%;
}
}

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

  footer p, footer a{
    font-size:12px;
  }


  #about h1, #about h2, .contact p{
    font-size:36px;
  }

  #about .contact img{
    margin:-5px 10px 0 0;
  }

  .single img+img, .single img+p, .single img+video, .single video+img, .single video+video{
    margin-top:15px;
  }

  article p{
    font-size:12px;
  }

  .single headergroup h1, .single h2, .tab h2{
    font-size: 16px;
  }

  .tabcontent h3{
    font-size: 16px;
  }
}


@media screen and (min-width: 992px) and (max-width:1199.8px){

  body{
    padding-top:150px;
  }

  .container{
    max-width:83%;
  }

  .home .background-img{
    min-height:419px;
  }

  .desc h2 {
    font-size: 36px;
  }

  .Logo, .Menu{
    margin-right:20px;
  }

  #work row{
    margin-top:76px;
  }

  .tabcontent article{
    max-width:50%;
    width: 100%;
    margin-top:40px;
  }

  .tabcontent article:last-child {
    margin-bottom: 40px;
  }

  #about{
    padding-top:11vh;
  }

  #about h1, #about p:last-child, #about p+hr, #about, #about hr+h2{
    margin-bottom:11vh;
  }

  #about p+hr, #about p+p{
    margin-top:11vh;
  }

  .single img+div{
    margin-top:60px;
    margin-bottom:60px;
  }

  .single section img:first-child{
    margin-top:60px;
  }

  .single div.intro{
    padding: 60px 0;
  }

  .tab h2{
    padding-top:75px;
    padding-bottom:75px;
  }

  /*  .fluid-left{
    padding-left: 84px
  }*/

  .fluid-right{
    padding-right: 34%;
  }
}

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

  /*.primordial img{
    max-width: 17px;
  }*/
  #pictogram{
    max-width:42px;
  }

  article p{
    font-size:14px;
  }

  .fluid-right{
    padding-right:29%;
  }

 /* .fluid-left{
    padding-left:84px;
  }*/

  .tabcontent h3{
    font-size: 24px;
  }

  #about h1, .contact p, #about h2{
    font-size:48px;
  }
}

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

  body{
    padding-top:200px;
  }

    header nav{
    height: 60px;
  }

  .home .background-img{
    min-height:444px;
  }

  .container{
    max-width:86%;
  }

  .tab h2{
    font-size:18px;
    padding-top:78px;
    padding-bottom:78px;
  }

  .desc h2 {
    font-size: 42px;
  }

  header li{
    font-size:14px;
    margin-right:24px;
  }

  .Logo, .Menu{
    margin-right:20px;
  }

  #about{
    padding-top:9vh;
  }

  #about h1, #about p:last-child, #about, #about p+hr, #about hr+h2{
    margin-bottom:9vh;
  }

  #about p+hr, #about p+p{
    margin-top:9vh;
  }

  .tabcontent article{
    margin-top:60px;
  }

  .tabcontent article:last-child {
    margin-bottom: 60px;
  }

  .tabcontent article{
    max-width:50%;
    width: 100%;
  }

  #work article{
   max-width:50%;
   width: 100%;
 }

 #about .contact img{
  margin: -5px 10px 0 0;
  max-width: 50px;
}

.single img+img, .single img+p, .single img+video, .single video+img, .single video+video{
  margin-top:20px;
}

.single img+div{
  margin-top:60px;
  margin-bottom:60px;
}

.single section img:first-child{
  margin-top:60px;
}

.single div.intro{
  padding: 60px 0;
}

article p{
  font-size:14px;
}

.single headergroup h1, .single h2 {
  font-size: 18px;
}
}

@media screen and (min-width: 1920px){

  header .container {
    grid-template-rows: auto 100px;
  }

  body{
    padding-top:220px;
  }

  header h1, nav{
    margin-right: -20px;
  }

  header nav{
    height: 90px;
  }

  nav button img{
    top:25%;
  }

  header li{
    font-size:18px;
    margin-right: 66px;
  }

  .container{
    max-width:83%;
  }

  footer div.between, #about .container{
    padding-left:15%;
    box-sizing: border-box;
  }

  .tab h2{
    font-size:24px;
    padding-top:130px;
    padding-bottom:130px;
  }

  .desc h2{
    font-size:54px;
  }

  .tabcontent article{
    margin-top:120px;
  }

  .tabcontent article:last-child {
    margin-bottom: 120px;
  }

  .home .background-img{
    min-height: calc(100vh - 220px);
  }

  .fluid-right{
    padding-right:162px;
  }

  .fluid-left{
    padding-left:162px;
  }

  article p{
    font-size:18px;
  }

  .single headergroup h1, .single h2 {
    font-size: 24px;
  }

  footer p, footer a, #work p{
    font-size:18px;
  }

  #about{
    padding-top:10vh;
  }

  #about h1, #about p:last-child, #about{
    margin-bottom:10vh;
  }

  #about p+hr, #about hr+h2{
    margin-bottom:6vh;
  }

  #about p+hr, #about p+p{
    margin-top:6vh;
  }

  #about .contact img {
    margin: -5px 10px 0 0;
    max-width: 70px;
  }

  #work article{
    max-width:33.3333%;
    width: 100%;
  }

  .single headergroup{
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .single headergroup h1, .single h2{
    font-size:24px;
  }

  .single img+img, .single img+p, .single img+video, .single video+img, .single video+video{
    margin-top:30px;
  }

  .single img+div{
    margin-top:120px;
    margin-bottom:120px;
  }

  .single section img:first-child{
    margin-top:120px;
  }

  .single div.intro{
    padding: 120px 0;
  }

}