/*
Theme Name: Nakedbase
Theme URI: https://marchettidesign.net
Author: Andrea Marchetti
Author URI: https://www.marchettidesign.net/contatti/
Description: Super Simple and Smart starter theme to create custom amazing sites in minutes, change style, scripts, logo and functions from the custom folder, two menus style pre build, grid system, button and typography style, gutenberg ready, customize in minutes not hours.
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: nakedbase
Tags: grid-layout, one-column, two-columns, three-columns, four-columns, block-styles, custom-menu, featured-image-header, wide-blocks		
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.
*/

body,
html{ font-size: 16px; 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;}

body.admin-bar .header { position: fixed; top: 32px; z-index: 1000;}
@media (max-width: 768px) {
  body.admin-bar .header { top:46px;}
  body.admin-bar.scroll-down .header { top:-46px;}
}

/* ! Base
----------------------------------------------------------------------------------- */
body{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;}

h1,h2,h3,h4,h5,h6,p,ol,ul{color:#333; margin-bottom: 20px;}

h1{font-size: 60px; line-height: 1; font-weight: 800;}
h2{font-size: 40px; line-height: 1.1; font-weight: 800;}
h3{font-size: 30px; line-height: 1.1; font-weight: 800;}
h4{font-size: 25px; line-height: 1.1; font-weight: 800;}
h5{font-size: 20px; line-height: 1.1; font-weight: 800;}
h6{font-size: 15px; line-height: 1.1; font-weight: 800;}

@media (max-width: 768px) {
  h1{font-size: 40px;}
  h2{font-size: 30px;}
  h3{font-size: 25px;}
}

a{text-decoration: none; color:#F75E47}
p{line-height: 1.5}


/* ! Layout
----------------------------------------------------------------------------------- */

body{padding-top: 50px;}


.container{max-width: 800px; margin: 20px auto 0 auto;padding: 10px;}
.container article{margin-bottom: 60px;}
.page .container{max-width: 1000px;}



/* ! Header
----------------------------------------------------------------------------------- */

  .header{background: #333;position: fixed;top: 0;z-index: 9999;width: 100%;}

  /* ! Menu  */

  .menu-1 .logo{padding: 10px;}
  .menu-1 .logo img{height: 35px; width: auto;}

  .menu-1{position: relative;z-index: 9999;width: 100%;display: flex;justify-content: space-between;max-width: 1200px;margin: 0 auto}
  .menu-1 ul { background: #333; list-style: none; margin: 0; padding-left: 0;}
  .menu-1 li { background: #333; display: block; float: left; padding: 0; position: relative; text-decoration: none; transition-duration: 0.5s; }
  .menu-1 li a { color: #fff; text-decoration: none; padding: 20px 30px;display: block; }
  .menu-1 li:hover { background: #000; cursor: pointer; }
  .menu-1 ul li ul { background: #222; visibility: hidden; opacity: 0; min-width: 200px; position: absolute; transition: all 0.5s ease; margin-top: 0px;left: 0; display: none; }
  .menu-1 ul li:hover > ul,
  .menu-1 ul li ul:hover { visibility: visible; opacity: 1; display: block; }
  .menu-1 ul li ul li { clear: both; width: 100%; }

  .menu-1 input{ display: block; width: 40px; height: 32px; position: fixed; top: 5px; right: 7px; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none;}
  .menu-1 span{ display: none;  width: 33px;height: 4px;margin-bottom: 5px;position: fixed; top: 18px; right: 12px;  background: #fff; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;}
  .menu-1 span:nth-child(2){ transform-origin: 0% 100%;top: 30px;}

  .menu-1 input:checked ~ span{opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #fff;}
  .menu-1 input:checked ~ span:nth-child(2){ transform: rotate(-45deg) translate(-3px, 4px);}

  @media (max-width: 767px) {
    .menu-1 li {width: 100%;padding: 0;transition: none;}
    .menu-1 li a {padding: 7%;}

    .menu-1 ul li ul {position: relative;transition: none;}
    .menu-1 ul li ul li{background: #000;}
    .menu-1 ul li ul li a{padding-left: 12%;padding-top: 3%}

    .menu-1 .items{ position: fixed;top:0; right: 0;width: 90%;height: 100vh;overflow-y: scroll; overflow-x: hidden; transform-origin: 0% 0%; transform: translate(100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);}
    .menu-1 span{display: block;}
    .menu-1 input:checked ~ ul{transform: none;}

  }


/* ! Hero
----------------------------------------------------------------------------------- */
.hero{ padding: 20px;text-align: center;}
.hero--text h1{padding: 50px 10px 0px 10px}
.hero--white h1{color:#fff; z-index: 1; position: relative;padding: 150px 10px}
.hero--white{position: relative;}
.hero--white:after{ content: ' '; width: 100%;height: 100%;background: #000;position: absolute;top:0; left:0;z-index: 0; opacity: 0.25}


/* ! Index & Single
----------------------------------------------------------------------------------- */

.single p{font-size: 18px;line-height: 1.7}

/* ! Footer
----------------------------------------------------------------------------------- */

.footer{background: #eee; padding: 30px; text-align: center;margin-top: 100px;}


/* ! Blocks
----------------------------------------------------------------------------------- */
.wp-block-media-text .wp-block-media-text__media {margin-bottom: 20px;}
.wp-block-column{margin: 0px!important;padding: 15px;}


/* ! Wp Style
----------------------------------------------------------------------------------- */

input[type=text],
input[type=email],
textarea{width: 100%;padding: 10px;border: none; background: #eee;-webkit-appearence: none}
input[type=submit]{padding: 20px;background: #333;color:#fff; text-transform: uppercase; border: none;}

ol.commentlist,
ol.commentlist li.comment ul{margin: 20px 0 20px; padding: 0;list-style-type: none;text-indent: 0}
ol.commentlist li.comment {padding: 40px;border-top: 1px solid #eee; margin-top: 20px;}
ol.commentlist .comment-meta {margin-bottom: 20px;}

.comment-author img{border-radius: 100%}

/* ! Align Full and Wide Gutemberg */

@media only screen and (min-width: 960px) {
  body .alignfull {
    width: auto;
    max-width: 1000%;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }
  body .alignwide {
    width: auto;
    max-width: 1000%;
    margin-right: calc(25% - 25vw);
    margin-left: calc(25% - 25vw);
  }
  .alignwide img,
  .alignfull img {
    display: block;
    margin: 0 auto;
  }
}


@media only screen and (min-width: 1400px) {
  body .alignwide {
    width: auto;
    max-width: 1400px;
    margin-right: -220px;
    margin-left: -220px;

  }
}


.img-res{width: 100%;height: auto;}

/* Pagination */

.pagination { margin: 40px 15px 40px 15px;}
.pagination span,
.pagination a { float: left; margin: 0 10px 10px 0; padding: 14px 19px; border: 1px solid #eee; }


/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}



/* ! Grid System */
.grid { margin: 0 auto; padding: 10px; max-width: 1200px; display: flex; flex-flow: row; flex-wrap: wrap;}
.grid--center{justify-content: center;}
.col{ flex: 1;}
.v-center{justify-content:center;display: flex;min-height: 100%;align-items: center;}

[class*='col-'] { position: relative;}

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

@media (max-width: 991px) {
  .tab-20 { width: 20%; }
  .tab-25 { width: 25%; }
  .tab-33 { width: 33.33%; }
  .tab-50 { width: 50%; }
  .tab-100 { width: 100%; }
}

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

  .sma-hide{display:none}
}


/* ! Helpers  */
.mt-0{margin-top: 0 }
.mt-1{margin-top: 10px}
.mt-2{margin-top: 20px}
.mt-3{margin-top: 40px}
.mt-4{margin-top: 100px }

.mb-0{margin-bottom: 0}
.mb-1{margin-bottom: 10px}
.mb-2{margin-bottom: 20px}
.mb-3{margin-bottom: 40px}
.mb-4{margin-bottom: 100px}

.p-0{padding: 0}
.p-1{padding: 10px}
.p-2{padding: 20px}
.p-3{padding: 40px}
.p-4{padding: 100px}

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.img-res { width: 100%; height: auto; margin-bottom: 20px;vertical-align: middle;}