/*
Theme Name: 	Alux
Description: 	Super Fast and Light (< 10k css & js) Responsive WordPress Theme with Google Font Select, Gutenberg Ready, Custom Logo, Colors and Menu. With fade-up animation on elements (use the additional css class "animate fade-up" on the block you want animate).
Version:     	1.0
Author:     	Andrea Marchetti
Author URI:   http://www.marchettidesign.net/chi-sono/
Site:         http://www.marchettidesign.net
Text Domain: 	alux
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
Domain Path: 	/languages
Tags:        	grid-layout, blog, custom-menu, featured-images, right-sidebar, custom-logo, block-styles, editor-style
License:    	GNU General Public License v3.0
License URI:	http://www.gnu.org/licenses/gpl-3.0.html

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 {box-sizing: border-box;font-size: 16px;}
*, *:before, *:after {box-sizing: inherit;}
body, h1, h2, h3, h4, h5, h6, p, ol, ul {margin: 0;padding: 0;font-weight: normal;}
ol, ul {list-style: none;}
img {max-width: 100%;height: auto;}

/* Spacer */
body, html { margin: 0; padding: 0; height: 100%;}
body .top-spacer{padding-top: 100px;background: #fff;}

body.admin-bar .top-spacer{padding-top: 120px;}
body.admin-bar .header-container {top: 32px; z-index: 1000;}

@media (max-width: 768px) {
  body .top-spacer{padding-top: 60px;}
  body.admin-bar .top-spacer{padding-top: 30px;}
}

/* ------------------------------------------------------------------------- *
/* ! Base */
/* ------------------------------------------------------------------------- */

/* Typography */
body{font-size: 16px; line-height: 22px; font-family: 'Arial'; -webkit-font-smoothing: subpixel-antialiased; -webkit-text-size-adjust: 100%;}

/* Title color */
h1, h2, h3, h4, h5, h6 {color: #222;font-weight: bold; }


h1{font-size: 60px;line-height: 1; margin-bottom: 60px; }
h2{font-size: 40px;line-height: 1; margin-bottom: 30px; }
h3{font-size: 30px;line-height: 1; margin-bottom: 30px; }
h4{font-size: 18px;line-height: 1; margin-bottom: 30px; }

p{margin-bottom: 30px;line-height: 28px}
ol, ul {margin-bottom: 30px;}
a{text-decoration: none;color:#007C89}

@media (max-width: 768px) {
  h1{font-size: 30px;line-height: 1}
  h2{font-size: 35px;line-height: 1}
}


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


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

.logo{display: inline-block; padding: 10px 15px;}
.logo img{height: 35px;width: auto; margin-top: 2px;}
.logo-text{height: 35px;display: inline-block;line-height: 40px}


/* Menu */
.header-container { padding: 0; margin: 0;position: fixed;z-index: 9999; top:0; left:0; display: block; width: 100%; background: #fff; box-shadow: 0 5px 20px rgba(0,0,0,.08);}
.header-container  a { text-decoration: none; display: block; }
.header-container  ul { position: relative; text-align: left; margin: 0; list-style: none;padding: 0;}
.header-container  li { float: left; margin: 0; position: relative; }

/* clear'n floats */
.header-container  ul:after { clear: both; }
.header-container  ul:before,
.header-container  ul:after { content: ' '; display: table; }
.header-container  nav { position: relative; text-align: center; float: right; }

/* Animate Dropdown Mobile  */
.header-container, ul.dropdown-menu {
  -webkit-transition: max-height 0.3s;
  -moz-transition: max-height 0.3s;
  transition: max-height 0.3s;
}
ul.primary li a { display: block; padding: 22px 14px;}
ul.primary li a:hover { color: $menu-text-color-hover; }

/* Dropdown */
ul.primary li.dropdown a{padding-right: 25px;}
ul.dropdown-menu {
  position: absolute; z-index: 200; min-width: 200px; display: none;
  box-shadow: 0 10px 8px rgba(0,0,0,.08);background: #fff;
}
ul.dropdown-menu li { float: none; margin: 0; }

/* dropdown link  */
ul.primary ul.dropdown-menu li a { padding: 13px 20px;}
ul.primary ul.dropdown-menu li a:hover { }

/* dropdown display */
ul.primary li:hover ul { display: block; }


/* hamburger */
.toggler { display: none; width: 28px; height: 16px; position: relative; cursor: pointer; user-select: none; border: 0; background-color: transparent; outline: 0; padding: 0;  top: 23px; right: 20px; position: absolute; }
.toggler .bread { display: block; background: #222222; width: 100%; height: 3px; border-radius: 0.5px; position: absolute; transition: transform 0.1096s cubic-bezier(0.52, 0.16, 0.52, 0.84); }
.toggler .bread__top { top: 0; }
.toggler .bread__bottom { bottom: 0; }

.toggler.x .bread__top {transform: translate(0px, 6.5px) rotate(45deg);}
.toggler.x .bread__bottom {transform: translate(0px, -6.5px) rotate(-45deg);}


@media (max-width: 768px) {

  .toggler{display: block;}

  .nav-container{ position: absolute;width: 100%;top:0px; left:0;background: #fff;max-height: 0;overflow: hidden; transition: all 0.5s cubic-bezier(.215, .61, .355, 1);}
  .nav-container ul.dropdown-menu { display: block; position: static; box-shadow: none; width: 100%; border-bottom: none; max-height: 0;overflow: hidden; transition: all 1s cubic-bezier(.215, .61, .355, 1); }

  .select{background: #ddd;}
  .nav-container.open,
  .nav-container .dropdown-menu.open {max-height: 500px; overflow: scroll; -webkit-overflow-scrolling: touch;}
  .nav-container .dropdown-menu.open{ max-height: 999px;background: #eee;}

  ul.primary li{width: 100%;}
  ul.primary li a {padding: 20px;}

}

/* End Menu */


/* ------------------------------------------------------------------------- *
/* ! Modules */
/* ------------------------------------------------------------------------- */

.cover{padding: 150px 20px; text-align: center;position: relative;margin-bottom: 40px;}
.cover:before { content : ''; position : absolute; top : 0; left : 0; bottom : 0; right : 0; background-color : #000000; opacity : 0.5; z-index : 0; }
.cover h1,
.cover h2{color:#fff;z-index: 1;position: relative;}



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

/* Home Title */
.home-title { position: absolute; top:-9999px; color: #fff; font-size: 12px;}


/* ------------------------------------------------------------------------- *
/* ! Sidebar */
/* ------------------------------------------------------------------------- */
.widget{padding-bottom: 30px;}
.widget_search,
.widget_calendar{margin-bottom: 20px;}


/* ------------------------------------------------------------------------- *
/* ! Footer */
/* ------------------------------------------------------------------------- */
.footer{padding-top: 40px;}
.logo-footerimg{height: 35px;width: auto; margin-top: 2px;}

/* --------------------------------------------------------------------------------------------------------------------------- */
/* ! Responsive */
/* --------------------------------------------------------------------------------------------------------------------------- */


/* ----------------------------- */
/* ! -- Desktop */
/* ----------------------------- */
@media (min-width: 1023px) {

}


/* ----------------------------- */
/* ! -- Tablet */
/* ----------------------------- */

@media (max-width: 998px) {

}

/* ----------------------------- */
/* ! -- Smarthphone */
/* ----------------------------- */

@media (max-width: 767px) {

  body.admin-bar .header-container{ top: 42px;}

  /* Woo Commerce */

  .cart-icon { right: 100px;}

}


/* --------------------------------------------------------------------------------------------------------------------------- */
/* WordPress Default Styles */
/* --------------------------------------------------------------------------------------------------------------------------- */


/* Pagination */
.pagination { margin: 40px 0 40px 0; padding: 0; width: 100%; }
.pagination span,
.pagination a { float: left; margin: 0 10px 10px 0; padding: 14px 19px; border: 1px solid #ddd; }

/* Gallery */
.gallery { float: left; margin: 20px 0 20px 0; width: 103.55%; }
.gallery-item { float: left; width: 33.333333%; text-align: center; }
.gallery img { margin: 0 10% 0 0; width: 90%; height: auto; border: none!important; }
.gallery-caption { width: 90%;margin:10px 0 0 0;}

/* text alignment */
.text-center{text-align: center;}
.text-right{text-align: right;}
.text-left{text-align: left;}

/* Image */
.alignleft { float: left; margin-right: 20px; margin-bottom: 10px; max-width: 97%; height: auto; }
.alignright { float: right; margin-bottom: 10px; margin-left: 20px; max-width: 97%; height: auto; }
.aligncenter { display: block; margin: 0 auto; max-width: 97%; height: auto; }
.alignnone { max-width: 97%; height: auto; }

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


body .alignfull {
  margin-left: -15px!important;
  margin-right: -15px!important;
}

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

/* video responsive */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Blockquote */

blockquote{border-left: 10px solid; padding-left: 40px;margin-left: 0;}


/* Image Caption */
.wp-caption { margin-top: 1.5rem;margin-bottom: 0px; padding: 10px; max-width: 97%; border: 1px solid #ddd; text-align: center; }
.wp-caption img { margin: 0; padding: 0; width: 100%!important; height: auto; border: 0 none; }
.wp-caption p.wp-caption-text { margin: 0; padding: 8px; font-size: 1em; line-height: 17px; }

/* Stiky */
.sticky { border-right: 3px solid #eee; border-bottom: 3px solid #ddd; }

/* Search */
.search-form {background: #eee;}
.search-form input[type=text]{ width: 80%; color: #333; }
.search-form button{float:right;border: none; background: none;padding: 8px;}

.svg-icon.search-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}


/* Contact Form 7 */
.wpcf7 label{width:100%}

/* Comments */
.comment-form-author,
.comment-form-email,
.comment-form-url { float: left; margin-top: 20px; margin-right: 3%; width: 30.3333333%; }
.comment-form-author input,
.comment-form-email input,
.comment-form-url input { width: 100%; }

ol.commentlist { margin: 0 0 1em; padding: 0; list-style: none; text-indent: 0; }
ol.commentlist li.comment { padding: 1em; border-top: 1px solid #eee; }
ol.commentlist li.comment div.vcard cite.fn { text-transform: uppercase; font-size: 14px; }
ol.commentlist li.comment div.vcard img.avatar { float: left; margin: 6px 1em 1em 0; border-radius: 50px; }
ol.commentlist li.comment div.comment-meta { font-size: 12px; }
ol.commentlist li.comment ul { margin: 0 0 1em 2em; }
ol.commentlist li.comment div.reply { margin-left: 80px; font-size: 11px; }
ol.commentlist li.comment div.reply a { font-weight: bold; }
ol.commentlist li.comment ul.children { margin: 1em 0 0; list-style: none; text-indent: 0; }
ol.commentlist li.comment ul.children li.depth-2 { margin: 0 0 .25em .25em; border-left: 1px solid #eee; }
ol.commentlist li.comment ul.children li.depth-3 { margin: 0 0 .25em .25em; border-left: 1px solid #eee; }
ol.commentlist li.comment ul.children li.depth-4 { margin: 0 0 .25em .25em; border-left: 1px solid #eee; }
ol.commentlist li.even { background: #fff; }
ol.commentlist li.odd { /* background: #f9f9f9; */  }
ol.commentlist li.parent { border-left: 1px solid #eee; }
ol.commentlist li.bypostauthor .fn { font-weight: bold; }
ol.commentlist li img{max-width: 97%;}

input[type=text],
input[type=email] { width: 98%;margin-right: 10px; padding: 10px; border: none; background: #eee; -webkit-appearance: none;border-radius: 0;font-size: 14px;}
textarea { padding: 10px; width: 98%; border: none; background: #eee; -webkit-appearance: none;border-radius: 0;font-size: 14px;}
input[type=submit] { margin-top: 10px; padding: 15px 20px; color: #fff; text-transform: uppercase; background: #333; border:none; font-size: 14px;}
#comments { width: 100%; }

/* Calendar Widget */
#wp-calendar { width: 100%; }
#wp-calendar a { padding: 0; border: none; }
#wp-calendar caption,
#wp-calendar thead { font-size: 10px; }
#wp-calendar thead th { padding-bottom: 10px; }
#wp-calendar tbody { color: #aaa; }
#wp-calendar tbody td { padding: 8px; border: 1px solid #fff; background: #f5f5f5; text-align: center; }
#wp-calendar tbody td:hover { background: #fff; }
#wp-calendar tbody .pad { background: none; }
#wp-calendar tfoot #next { text-align: right; text-transform: uppercase; font-size: 10px; }
#wp-calendar tfoot #prev { padding-top: 10px; text-transform: uppercase; font-size: 10px; }

/* 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 */
*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;}

.grid { margin: 0 auto; max-width: 1200px; display: flex; flex-flow: row; flex-wrap: wrap;}
.grid--center{justify-content: center;}
.col{ flex: 1;}

.no-col{display: block; padding: 0 15px;}

[class*='col-'] { position: relative;padding: 0 15px;}

.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}
}

/* ! Grid System */

.animate { transition: all 0.3s cubic-bezier(0.28, 0.44, 0.49, 1);  }


  /**
  * Animations
  */
  .fade-up {
    opacity: 0;
    transform: translateY(100px);
    transition-property: opacity, transform;
  }

  .fade-up.sal-animate,
  body.sal-disabled .fade  {
    transform: translateY(0px);
    opacity: 1;
  }