/*
    Theme Name: Asra
    Description: Asra is a modern and stylish photography theme with a touch of minimalism. Clean and airy design that will fit great any type of photography art. Emphasize the beauty of your work with amazing typography and layout diversity.
    Version: 1.1.4
    Author: WPHunters
    Author URI: https://wphunters.com/
    Theme URI: https://wphunters.com/themes
    Text Domain: asra
    Domain Path: /languages
    License: GNU General Public License version 1.0
    License URI: https://www.gnu.org/licenses/gpl-1.0.html
*/

/*! ================================= base styling */
body {
    width:                  100vw;
    min-height:             100vh;
    position:               relative;
    -webkit-font-smoothing: antialiased;
    background:             #ffffff;
    overflow-x:             hidden;
    font-style:             normal;
    font-weight:            400;
    font-size:              16px;
    font-family:            'Roboto', Helvetica, Arial, sans-serif;
    letter-spacing:         0;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: 2px;
}

a {
    transition: opacity 250ms;
    color:      #000;
}

a:hover {
    color:           currentColor;
    opacity:         0.6;
    text-decoration: none;
}

blockquote {
    position:   relative;
    padding:    1.25rem 1.5rem;
    text-align: center;
    font-style: italic;
}

blockquote:before {
    content:  '';
    position: absolute;
    left:     0;
    top:      0;
    bottom:   0;
    right:    0;
    border:   3px solid currentColor;
    opacity:  0.3;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.form-control, textarea, input[type="text"], input[type="email"],
input[type="tel"], input[type="number"] {
    font-style:     italic;
    font-family:    'Amiri', Georgia, Times, "Times New Roman", serif;
    font-weight:    300;
    letter-spacing: 2px;
}

.site-main-container {
    background: #ffffff;
}

/*! ================================= utility classes */
.fw-400 {
    font-weight: 400 !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.font-style-italic {
    font-style: italic !important;
}

.font-style-normal {
    font-style: normal !important;
}

.fill-primary-color {
    background-color: #344e49;
    color:            #ffffff;
}

.fill-secondary-color {
    background-color: #ebe8e4;
    color:            #000000;
}

.letter-spacing-1px {
    letter-spacing: 1px;
}

.letter-spacing-2px {
    letter-spacing: 2px;
}

.primary-font-family {
    font-style:     normal;
    font-weight:    400;
    font-size:      16px;
    font-family:    'Roboto', Helvetica, Arial, sans-serif;
    letter-spacing: 0;
}

.secondary-font-family {
    font-style:     italic;
    font-family:    'Cormorant Garamond', Times, "Times New Roman", serif;
    font-weight:    300;
    letter-spacing: 2px;
}

/*! ================================= bootstrap default styles customization */
.btn {
    letter-spacing: 2px;
    font-size:      12px;
    text-transform: uppercase;
    border-radius:  0;
    line-height:    21px;
    padding:        10px 15px;
}

.btn:hover,
.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
    opacity:    1;
}

.btn-lg {
    padding: 22px 30px;
}

.btn-sm {
    font-size: 10px;
    padding:   5px 10px;
}

.btn-wide {
    padding: 22px 60px;
}

.btn-md {
    padding: 16px 45px;
}

.btn.disabled, .btn:disabled {
    pointer-events: none;
    cursor:         not-allowed;
}

.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
    border-color: #344e49;
    background:   #344e49;
    color:        #ffffff;
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    border-color: #162d28;
    background:   #162d28;
    color:        #ffffff;
}

.btn-outline-primary, .btn-outline-primary.disabled, .btn-outline-primary:disabled {
    position:     relative;
    color:        #000000;
    border-color: #000000;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus {
    background:   #344e49;
    border-color: #344e49;
    color:        #ffffff;
}

.btn-light {
    background:   #ffffff;
    color:        #000000;
    border-color: #ffffff;
}

.btn-light:hover,
.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled):active:focus {
    background:   #f5f5f5;
    border-color: #f5f5f5;
    color:        #000000;
}

.form-control {
    border-radius: 0;
    border-color:  #e1e1e1;
    background:    #ffffff;
    /*color:         #000000;*/
    line-height:   normal;
    padding:       16px 20px;
    height:        56px;
    box-shadow:    none;
}

.form-control:focus,
.form-control.is-valid:focus,
.form-control.is-invalid:focus {
    box-shadow: none;
}

.form-control:focus {
    box-shadow:   none;
    border-color: #cccccc;
    background:   #ffffff;
    color:        #000000;
}

/*! ================================= generic wp classes */
@media screen and (max-width: 600px) {
    div[id="wpadminbar"] {
        transform:         translateY(-100%);
        -webkit-transform: translateY(-100%);
        -moz-transform:    translateY(-100%);
    }
}

.aligncenter, div.aligncenter {
    display: block;
    margin:  5px auto 5px auto;
}

.alignright {
    float:  right;
    margin: 5px 0 1.5rem 1.5rem;
}

.alignleft {
    float:  left;
    margin: 5px 1.5rem 1.5rem 0;
}

a img.alignright {
    float:  right;
    margin: 5px 0 1.5rem 1.5rem;
}

a img.alignnone {
    margin: 5px 1.5rem 1.5rem 0;
}

a img.alignleft {
    float:  left;
    margin: 5px 1.5rem 1.5rem 0;
}

a img.aligncenter {
    display:      block;
    margin-left:  auto;
    margin-right: auto;
}

.wp-caption {
    background:    #ffffff;
    border:        1px solid #f0f0f0;
    max-width:     100%;
    padding:       10px 8px;
    text-align:    center;
    margin-bottom: 1.5rem;
}

.wp-caption.alignleft {
    margin: 5px 1.5rem 1.5rem 0;
}

.wp-caption.alignright {
    margin: 5px 0 1.5rem 1.5rem;
}

.wp-caption img {
    border:    0 none;
    height:    auto;
    margin:    0;
    max-width: 98.5%;
    padding:   0;
    width:     auto;
}

.wp-caption p.wp-caption-text {
    font-size:   11px;
    line-height: 17px;
    margin:      0;
    color:       #000000;
    padding:     0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
    clip:        rect(1px, 1px, 1px, 1px);
    position:    absolute !important;
    white-space: nowrap;
    height:      1px;
    width:       1px;
    overflow:    hidden;
}

.screen-reader-text:focus {
    clip:            auto !important;
    display:         block;
    font-size:       14px;
    line-height:     normal;
    padding:         15px 23px 14px;
    text-decoration: none;
    z-index:         100000; /* Above WP toolbar. */
}

.sticky {
    position: relative;
}

.gallery-caption {
    font-size:   1rem;
    line-height: 1.75;
    font-style:  italic;
}

.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
    border:  1px solid #333333;
    padding: 2px;
}