/*
Theme Name: La Tua Pizzeria
Theme URI: 
Author: Alan B
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: latuapizzeria
*/

html {
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}
body {
    margin: 0;
}
*, *:before, *:after {
    box-sizing: inherit;
}
h1, h2, h3, h4, h5 {
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
}
h1 {
    font-size: 48px;
}
h2 {
    font-size: 40px;
}
h3 {
    font-size: 28px;
}
h4 {
    font-size: 24px;
}
.clear,
.clear::after {
    content:'';
    clear: both;
    display: block;
}
.container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}
.sr-text,
.screen-reader-text {
    display: none;
}
.text-center {
    text-align: center;
}
.primary-text {
    color: #a61206;
}

.button {
    background-color: #a61206;
    font-family: 'Open Sans' sans-serif;
    font-size: 16px;
    width: auto;
    border-radius: 8px;
    color: #fff;
    padding: 15px 80px;
    margin-top: 20px;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

.primary {
    background-color: #a61206;
    transition: background-color .5s ease;
}
.primary:hover {
    background-color: #7b0d04;
}
.secondary {
    background-color: #f19f30;
    transition: background-color .5s ease;
}
.secondary:hover {
    background-color: #da8b20;
}

/** Header **/
header.site-header {
    border-bottom: 1px solid #c1c1c1;
    padding-bottom: 30px;
}

div.logo {
    text-align: center; 
}

@media only screen and (min-width:768px) {
    div.logo {
        text-align: left;
    }
}
@media only screen and (min-width:992px) {
    div.logo {
        text-align: center;
    }
}

img.logoimage {
    width: 250px;
}

@media only screen and (min-width:768px) {
    header.site-header .container {
        position: relative;
    }
    header.site-header .header-information {
        position: absolute;
        top: 0;
        right: 0;
    }
}

div.address {
    display: block;
    clear: both;
    padding-top: 10px;
}
div.address p {
    margin: 0;
    font-size: 14px;
    text-align: center;
}

@media only screen and (min-width:768px) {
    div.address p {
        text-align: right;
    }
}

/** Social Menu **/
nav.socials ul {
    list-style: none;
    text-align: center;
    padding: 0;
}
@media only screen and (min-width:768px) {
    nav.socials ul {
        float: right;
    }
}

nav.socials ul li {
    position: relative;
    display: inline-block;
}

nav.socials ul li a:before {
    font-family: 'FontAwesome';
    display: inline-block;
    vertical-align: top;
    padding: 0 5px;
    content: '\f08e';
    font-size: 30px;
    color: black;
    -webkit-font-smoothing: antialiazed;
}

nav.socials li a[href*="#f"]::before {
    content: '\f09a';
}
nav.socials li a[href*="#t"]::before {
    content: '\f099';
}
nav.socials li a[href*="#p"]::before {
    content: '\f231';
}
nav.socials li a[href*="#y"]::before {
    content: '\f16a';
}
nav.socials li a[href*="#i"]::before {
    content: '\f16d';
}

/** MAIN MENU **/
nav.site-nav {
    display: none;
}
@media only screen and (min-width: 768px){
    nav.site-nav {
        display: block;
    }
}
nav.site-nav ul {
   list-style: none; 
   margin: 0;
   padding: 0;
   width: 100%;
   display: table;
}
@media only screen and (min-width: 768px){
    nav.site-nav ul li {
        display: table-cell;
        width: 1%;
    }
}

@media only screen and (min-width: 992px){
    nav.site-nav ul li.menu-item-has-children {
        position: relative;
    }
    nav.site-nav ul li.menu-item-has-children ul.sub-menu {
        display: none;
    }
    nav.site-nav ul li.menu-item-has-children:hover ul.sub-menu {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        background-color: white;
    }
    nav.site-nav ul li.menu-item-has-children:hover ul.sub-menu li {
        display:block;
        padding-left: 30px;
    }
}

nav.site-nav ul li a {
    text-align: center;
    padding: 20px 0;
    display: block;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    color: black;
    font-family: 'Raleway', sans-serif;
}
nav.site-nav ul li.current_page_item a,
.single-specialties nav.site-nav ul li.menu-item-24 a,
nav.site-nav ul li.current_page_parent a {
    border-bottom: 8px solid #a61206;
}

/** Responsive Menu Button **/
@media only screen and (max-width: 767px) {
    .mobile-menu a {
    height: 40px; 
    line-height: 40px;
    text-decoration: none;
    background-color: #a61206;
    width: 100%;
    display: block;
    color: white; 
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif;
    }
}

@media only screen and (min-width: 768px) {
    .mobile-menu a {
        display: none;
    }
}

/** hero image **/
.hero {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 450px;
    display: table;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    position: relative;
}
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(14, 2, 2, 0.5);
}

.hero .hero-content {
    display: table-cell;
    vertical-align: middle;
    color: #ffffff;
    z-index:2;
    position: relative;
}

@media only screen and (min-width: 768px) {
    .hero-text {
        width: 80%;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 992px) {
    .hero-text {
        width: 60%;
        margin: 0 auto;
    }
}

.main-content {
    padding:60px;
    background-color: #ffffff;
    position: relative;
}
@media only screen and (min-width:768px) {
    .main-content {
        margin-top: -90px;
    }
}

.content-text p {
    font-size: 18px;
    line-height: 50px;
}

/** BOXES **/

.box-information {
    display: grid;
}

@media screen and (min-width:768px) {
    .box-information {
        grid-template-columns: repeat(3, 1fr);
    }
}

.box-information .single-box {
    text-align: center;
    width: 100%;
    color: #fff;
}

.box-information single-box img {
    width: 100%;
    display: block;
}

.single-box {
    display: grid;
    grid-template-columns: 2fr 3fr;
    color: white;
    text-align: center;
}

@media screen and (min-width:768px) {
    .single-box {
        grid-template-columns: unset;
        grid-template-rows: 1fr 1fr;
    }
}
.single-box:nth-child(1) {
    background-color: #f19f30;
}
.single-box:nth-child(2) {
    background-color: #127427;
}
.single-box:nth-child(3) {
    background-color: #a61206;
}

@media screen and (min-width:768px) {
    .single-box:nth-child(2) img{
        order:2;
    }
    .single-box:nth-child(2) div{
        order:1;
    }
}

.content-box {
    display: grid;
    grid-template-rows: 10% 20% 60% 10%;
    grid-template-areas: "."
                         "top"
                         "text"
                         ".";
}
.content-box * {
    align-self: center;
}
@media screen and (min-width:768px) {
    .content-box {
        grid-template-rows: 20% 30% 30% 20%;
    }
}

.content-box h3 {
    grid-area: top;
    margin: 5px 0;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 700;
}
.content-box p {
    grid-area: text;
}

/** FOOTER **/
footer{
    margin-top: 30px;
    padding: 30px 0;
    border-top: 1px solid #c1c1c1;
    text-align: center;
}
footer nav ul{
    list-style:none;
}
footer nav ul li {
    display: inline;
}
footer nav ul li:last-child .separator {
    display: none;
}
footer nav ul li a {
    color: #000000;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
}
footer .location {
    margin-top: 30px;
}
footer p {
    margin: 0 0 5px 0;
    font-size: 14px;
}
footer p.copyright {
    margin-top: 20px;
}

/** GRID **/
img {
    max-width: 100%;
    height: auto;
}

@media only screen and (min-width: 768px) {
    .container-grid{
        margin-left: -10px;
        margin-right: -10px;
    }
    .container-grid::after {
        content:'';
        display: block;
        clear: both;
    }
    [class*='columns'] {
        padding: 0 10px;
        float: left;
    }
    .columns1-4 {
        width: 25%;
    }
    .columns2-4 {
        width: 49%;
        margin-left:10px;
    }
    .columns3-4 {
        width: 75%;
    }
    .columns1-3 {
        width: 33.3%;
    }
    .columns2-3 {
        width: 66.6%;
    }
}

/** SPECIALTIES **/
.our-specialties {
    padding: 0 60px;
}
.specialty-content {
    padding: 20px;
    
}
.specialty-content a {
    color: #000000;
    text-decoration: none;
}
.specialty-content h4 {
    border-bottom: 1px solid #dfdfdd;
    padding: 15px 0;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}
.specialty-content h4 span {
    float: right;
    font-size: 30px;
    color: #f19f30;
    font-family: 'Open Sans', sans-serif;
}

.specialty-content p {
    color: #3d3d3d;
    line-height: 30px;
}

/*** Single specialties Template ***/
.single-specialties p.ingredients,
.single-specialties p.price {
    color: #a61206;
    font-size: 30px;
    margin: 0;
}

.single-specialties p.price span {
   color: #000;
}

/** BLOG **/
article.entry {
    margin-top: 30px;
}
header.entry-header {
    margin-top: 20px;
}
header.entry-header .date,
.entry-information .date {
    background-color: #f19f30;
    float: left;
    width: 70px;
    height: 70px;
    text-align: center;
    padding-top: 5px;
    margin-right: 20px;
}
header.entry-header .date time,
.entry-information .date time {
    font-size: 30px;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}
header.entry-header .date time span,
.entry-information .date time span {
    font-size: 16px;
    display: block;
    text-transform: uppercase;
}

header.entry-header .entry-title {
    float: right;
    width: calc(100% - 90px);
}
header.entry-header h2 {
    margin: 0;
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 700;
}
header.entry-header p.author,
.entry-information p.author {
    text-transform: uppercase;
    color: #000;
    font-family: 'Raleway', 'sans-serif';
    margin:0px;
}

.entry-information p.author {
    display: inline;
    float: left;
    margin-top: 36px;
}
p.author i {
    font-size: 30px;
    color: #f19f30;
}
div.entry-content p {
    margin-bottom: 0;
    line-height: 24px;
}



/** SIDEBAR **/
aside.sidebar {
    margin-top: 10px;
    margin-bottom:3px;
}
.search-form {
    position: relative;
}
#searchsubmit {
    position: relative;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
    background-color: #a61206;
    text-indent: -9999px;
    background-image: url(img/search.png);
    background-position: center center;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
}

#s {
    width: 80%;
    margin-top: 3px;
    padding: 10px;
}

.sidebar .widget {
    margin-bottom: 20px;
}
.sidebar .widget h3 {
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
}
.sidebar .widget li {
    list-style: none;
    margin-bottom: 20px;
}
.sidebar .widget li a {
    color: #000;
    text-decoration: none;
}

/** Comments **/
.comment-respond h3{
    font-weight: 700;
    text-align: center;
}
@media only screen and (min-width: 768px) {
    div.comments {
        width: 80%;
    }
}

@media only screen and (min-width: 992px) {
    div.comments {
        width: 60%;
    }
}
.comment-respond form label {
    width: 200px;
    display: inline-block;
    text-align: right;
    padding-right: 20px;
    font-weight: bold;
}

.comment-respond form input,
.comment-respond form textarea {
    padding: 10px;
    width: calc(100% -  220px);
    font-size: 18px;
}
.comment-respond form input[type="submit"] {
    margin: 0 auto;
    display: inline-block;
    border: none;
    width: auto;
    background-color: #a61206;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
}

p.form-submit {
    text-align: center;
}

.comment-notes {
    text-align: center;
}
p.logged-in-as a {
    color: #a61206;
    text-align: center;
    display: block;
}

/** COMMENT LIST **/
ol.commentlist {
    list-style: none;
}
ol.commentlist li.comment {
    background-color: #e1e1e1;
    padding: 20px;
    margin-bottom: 20px; 
}
ol.commentlist li.comment cite {
    color: #a61206;
    font-size: 20px;
    font-weight: bold;
   
}
li.comment .comment-author {
    margin-bottom: 10px;
}
li.comment a {
    color: #a61206;
    text-decoration: none;
}
li.comment ul.children {
    list-style: none;
}
li.comment ul.children li {
    background-color: white;
    margin-top: 20px;
}

/** Contact Us **/
.reservation {
    background-image: url(img/bg_contact.jpg);
    background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) {
    .reservation-info {
        margin-left: 50%;
    }
}
form.reservation-form h2 {
    font-size: 20px;
    font-weight: 700;
}
form.reservation-form .field {
    margin-bottom: 20px;
    width: 100%;
}
form.reservation-form .field input,
form.reservation-form .field textarea {
    width: 100%;
    border: 3px solid #000000;
    padding: 15px 10px;
    font-size: 16px;
}
form.reservation-form .field textarea {
    height: 200px;
}
form.reservation-form ::-webkit-input-placeholder {
    color: #000000 !important;
}
form.reservation-form :-moz-placeholder {
    color: #000000 !important;
}
form.reservation-form ::-moz-input-placeholder {
    color: #000000 !important;
}
form.reservation-form ::-ms-input-placeholder {
    color: #000000 !important;
}
form.reservation-form input[type="submit"] {
    border:none;
}

/** FRONT Page **/
.home div.hero {
    height: 750px;
}

@media only screen and (min-width: 768px) {
    .home .main-content {
        margin-top: 0;
        padding: 0;
    }
    .home .hero-text {
       width: 50%;
    }
}

@media only screen and (min-width: 992px) {
    .home .hero-text {
        width: 40%;
     }
}

.home .hero-text p {
    line-height: 40px;
    font-size: 18px;
}

.specialty-content {
    position: relative;
    overflow: hidden;
    padding: 0;
}
.specialty-content .information {
    position: absolute;
    top: 100%;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(241, 159, 48, .75);
    text-align: center;
    color: #fff;
    padding: 5px;
    opacity: 0;
    transition: all .5s ease-in-out;
}
.specialty-content:hover .information {
    top:0;
    opacity:1;
}
.specialty-content .price {
    font-size: 60px;
    font-weight: bold;
    color: #fff;
    margin-top: 30px;
}
.specialty-content .information h3 {
    font-size: 30px;
    margin-top: 40px;
    font-weight: 700;
}
.specialty-content .information p {
    margin: 0 0 10px 0;
    color: #fff;
}

.specialty-content .information a {
    color: #fff;
}

@media only screen and (max-width:767px) {
    .specialty-content {
        overflow: visible;
        display: block;
        margin-bottom: 30px;
    }
    .specialty-content .information {
        position: relative;
        opacity: 1;
        background-color: #f19f30;
        padding: 30px;
    }
    .specialty-content img {
        width: 100%;
    }
}

/** Ingredients **/
section.ingredients {
    background-image: url(img/bg_ingredients.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-top: 50px;
    padding: 80px 0;
    color: #fff;
}

section.ingredients h3 {
    line-height: 60px;
    font-size: 40px;
    font-weight: 700;
}

section.ingredients p {
    line-height: 40px;
    font-size: 20px;
}

@media only screen and (max-width: 767px ) {
    section.ingredients p,
    section.ingredients h3 {
        text-align: center;
    }
    section.ingredients a {
        margin: 0 auto;
        display: block;
        width: 250px;
    }
}

section.ingredients .image {
    padding-top: 30px;
    text-align: center;
}
section.ingredients .image img {
    width: 80%;
}

/** Location / Reservation **/
section.location-reservation {
    background-image: url(img/bg_ingredients.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-top: 50px;
    
}
.home .reservation-info {
    margin: 0;
    color: #fff;
    padding: 50px;
}
.home .reservation-form h2 {
    text-align: center;
    font-size: 34px;
    margin:0 0 20px 0;
    font-weight: 900;
}
.home .reservation-form input,
.home .reservation-form textarea {
    background-color: transparent;
    border: 4px solid #ffffff !important;
    color: #fff !important;
}

.home .reservation-form input[type='submit'] {
    background-color: #a61206;
    border: none!important;
}

.home form.reservation-form ::-webkit-input-placeholder {
    color: #fff !important;
}
.home form.reservation-form :-moz-placeholder {
    color: #fff !important;
}
.home form.reservation-form ::-moz-input-placeholder {
    color: #fff !important;
}
.home form.reservation-form ::-ms-input-placeholder {
    color: #fff !important;
}

#map {
    height: 400px;
  }

  /** Finishing touches **/

  button.datetime-local-datepicker-button {
      background-color: #a61206;
      border: none;
      width: 100%;
      padding: 10px 0;
      color: white;
  }