/*
Theme name: BeautyStyle
Author: Giuliano Negrisolo
Description: BeautyStyle is a beauty center, beauty spa salon Wordpress theme. It consists of a front page that is easy to modify in appearance and enrich with sections such as sliders, link pages and recent articles.
It is a fully responsive and mobile friendly theme which automatically adjusts itself according to the screen sizes and provides the user with the best user experience.
This thema contains many pre-built blocks that you can use to add all your content without needing to write a single line of code.
Version: 1.0.5
Requires at least: 5.6
Tested up to: 6.1
Requires PHP: 5.6 or higher
Text Domain: beautystyle
Tags: blog, custom-colors, custom-logo, custom-background, footer-widgets, theme-options, translation-ready
 
License: GNU General Public License v3
License URI: http://www.gnu.org/licenses/gpl-3.0.html

This theme, like WordPress, is the licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* Style Tree
    1. Reset Style
    2. Base
    3. WordPress Default Element
    4. Screen Reader Text
*/

/* ----------------------------------------
* 1 Reset Style
---------------------------------------- */

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;}
p{font-size: medium; line-height: 1.5;}
ol,ul{list-style-type: none;}

/* -----------------------------------------
* 2 Base
----------------------------------------- */

body{
    font-family: system-ui, "Average", Arial, sans-serif;
    background-size: auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1,h2,h3,h4,h5,h6,ul{color: #8757B2FF; margin-bottom: 10px;}

h1{font-size: 40px; line-height: 1; font-weight: 400; font-family: "Average"; padding: 10px;}
h2{font-size: 35px; line-height: 1; font-weight: 400; font-family: "Average"; padding: 10px;}
h3{font-size: 30px; line-height: 1.3; font-weight: 400; font-family: "Average"; padding: 10px;}
h4{font-size: 25px; line-height: 1.3; font-weight: 400; font-family: "Average"; padding: 10px;}
h5{font-size: 20px; line-height: 1.3; font-weight: 400; font-family: "Average"; padding: 10px;}
h6{font-size: 15px; line-height: 1.3; font-weight: 400; font-family: "Average"; padding: 10px;}

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

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

@media (max-width: 500px) {
    h1{font-size: 30px;}
    h2{font-size: 25px;}
    h3{font-size: 20px;}
    h4{font-size: 15px;}
}

a{text-decoration: none;}

.stdiv{
    border-radius: 5px; 
    background: rgba(255,255,255,0.7);
    border-top: 1px solid #ffffff;
}

/* class for thumbnail */
.radius{
    border-radius: 5px;
}

/* -----------------------------------------
* 3 WordPress Default Element
----------------------------------------- */

/* Pagination */
.pagination{padding: 15px;}
.pagination span.page-numbers , .current{
    background: linear-gradient(180deg, rgba(212,163,255,0.8) 0%, rgba(135, 87, 178, 0.8) 100%);
    color: white;
    border-radius: 5px;
}
.pagination a:hover:not(.active) {background-color: #b273e83f;border-radius: 5px;}

/* 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;}

/* 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; }

/* Image Caption */
.wp-caption { margin-bottom: 20px; padding: 10px; max-width: 97%; border: 1px solid #eee; 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 #eee; }

/* Blockquote */
blockquote {font-weight: 200; font-size: 20px; font-style: italic; margin: 0.25em 0; padding: 0px 30px; line-height: 1.45; position: relative; color: #383838; border-left: 5px solid #eee; }

/* Search */
#srch-term { border: none; background: none; box-shadow: none; color: #fff; opacity: 0; }
.btn-default { border: none;}
.btn-default:hover {cursor: pointer; border: none; background: rgba(212,163,255,0.8) 0%; }
.form-control::-moz-placeholder { color: #eee; }
.search-light {display: block; text-align: right; border-radius: 0 0 5px 5px; }
.search-light input[type=search] { width: auto; color: #333; }
.search-light button{
  padding:10px 20px;
  background: linear-gradient(180deg, rgba(212,163,255,0.8) 0%, rgba(135,87,178,0.8) 100%);
  border-radius: 0 0 5px 0;
  color: #fff;
}

/* Contact Form 7 */
.wpcf7 p input[type=text],
.wpcf7 p input[type=email]{display: block; width: 98%;}
.wpcf7 p.input-half{ width: 48%; margin-right: 2%; float:left; min-height: 70px}
.wpcf7 p.input-half input[type=text],
.wpcf7 p.input-half input[type=email]{ width: 100%;}
.wpcf7-select {margin-right: 10px; padding: 10px; border: none; background: #eee;  width: 98%;height: 40px;}
.wpcf7 p.input-half .wpcf7-select {width: 100%;}
div.wpcf7-response-output {float:left; width:97%; margin: 0;}

/* 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%; }
.comment-author, .vcard { margin-bottom: 5px; }

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

input[type=text],
input[type=email]{ width: 98%;margin-right: 10px; padding: 10px; border: none; border-radius: 5px;}
input[type=search] {padding: 10px; border: none; border-radius: 5px 0 0 5px;}
textarea { padding: 10px; width: 98%; border-radius: 5px;}
#comments { width: 100%; }

/* ------------------------------------------------------------------------
* 4 Screen reader text  https://wordpress.org/documentation/article/css/
------------------------------------------------------------------------ */

/* 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 !important;
    width: 1px;
    word-wrap: normal !important;
    /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
 
.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
    outline: 0;
  }

/* underline for accesibility */
.text-content a,
.comment-content a{ text-decoration: underline; }