/*
Theme Name: Mensajeros del Mundo
Theme URI: https://www.mensajerosdelmundo.org/
Author: Rafael Cardero
Author URI: https://www.rafaelcardero.com/
Description: Theme for the "Mensajeros del Mundo" website.
Version: 1.0.0.R6
License: Commercial
Text Domain: mdm
Tags: reiki.
*/

/*
-----------------
TABLE OF CONTENTS
-----------------
- General
    > Reset
    > Typography
    > Headings
    > Colors
    > Buttons
- Header
    > Logo
    > Nav bar
    > Mobile toggler
- Page "Home"
    > General
    > Cover
    > Get Reiki Master
- Page "Who We Are"
    > General
    > Cover
    > VIP
- Page "What is Reiki"
    > General
    > Cover
    > About
    > Levels
    > Mantras Reiki
- Page "Reiki Master"   
    > Cover
    > How to get the Master
    > Reiki heart
    > Reiki in hospitals
    > Why Reiki in hospitals
- Page "Contact Us"
    > General
    > Cover
    > Contact info
    > Enjoy with us
    > Contact form
- Page "Blog"
    > Cover
- Footer
    > Generic
    > Footer row 1
- Forms
    > Contact form
- Widgets
    > To Top button
    > Social icons
    > Post preview
    > Post fullview
    > Pagination links
*/

/*------------------------------------------------------------------------------
- General
------------------------------------------------------------------------------*/

/* Reset */
a,
a:hover{
    color: #9e3d90;
}

/* Typography */
body{
    font-family: 'Arimo', sans-serif;
}

.text-underline{
    text-decoration: underline !important;
}

@media (min-width: 576px){
    .text-sm-justify{
        text-align: justify !important;
    }
}

@media (min-width: 768px){
    .text-md-justify{
        text-align: justify !important;
    }
}

@media (min-width: 992px){
    .text-lg-justify{
        text-align: justify !important;
    }
}

@media (min-width: 1200px){
    .text-xl-justify{
        text-align: justify !important;
    }
}

/* Headings */
h1, h2, h3, h4{
    font-weight: bold;
    margin-bottom: 0.75rem;
}

/* Colors */
body{
    color: black;
    background-color: white;
}

.text-body{
    color: black !important;
}

.text-black{
    color: black !important;
}

.text-violet{
    color: #9e3d90 !important;
}

.bg-violet{
    background-color: #9e3d90 !important;
}

.text-lilac{
    color: #a483ae !important;
}

.bg-lilac{
    background-color: #a483ae !important;
}

.text-lilac-light{
    color: #c8b5ce !important;
}

.bg-lilac-light{
    background-color: #c8b5ce !important;
}

.text-green{
    color: #006238 !important;
}

.bg-green{
    background-color: #006238 !important;
}

.bg-gray-light{
    background-color: #f5f2f6 !important;
}

/* Buttons */
.btn-green,
.btn-violet,
.btn-white{
    font-weight: bold;
    text-transform: uppercase;
    padding: 0.75rem 1.75rem;
    border-radius: 3rem;
}

.btn-green:hover,
.btn-violet:hover{
    color: white;
    text-decoration: none;
}

.btn-green{
    color: white;
    background-color: #006238;
    border: 0.125rem solid #a483ae;
}

.btn-green:hover{
    background-color: #a483ae;
}

.btn-violet{
    color: white;
    background-color: #972c87;
    border: 0.125rem solid #006238;
}

.btn-violet:hover{
    background-color: #006238;
}

.btn-white{
    color: #972c87;
    background-color: white;
    border: 0.125rem solid #006238;
}

.btn-white:hover{
    text-decoration: none;
    color: white;
    background-color: #006238;
}

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

/* Logo */
.header-navbar .navbar-brand{
    max-width: 12.5rem;
}

@media (min-width: 992px){
    .header-navbar .navbar-brand{
        max-width: 15.625rem;
    }
}

/* Nav bar */
.header-navbar{
    background-color: transparent !important;
    padding: 0.5rem 0;
    align-items: flex-end;
}

#navbar-content{
    padding-top: 1rem;
}

#navbar-content .navbar-nav{
    margin-left: auto;
}

#navbar-content .nav-link{
    font-size: 0.9375rem;
    font-weight: bold;
    color: black;
    padding: 0.75rem 1rem;
    outline: 0;
    border-radius: 3rem;
    line-height: 1;
}

#navbar-content .nav-link.active, 
#navbar-content .nav-link:hover{
    color: white;
    background-color: #a483ae;
}

#navbar-content .nav-item:not(:last-child) .nav-link{
    margin-bottom: 0.3125rem;
}

@media (min-width: 992px){
    #navbar-content{
        padding-top: 0;
    }
    
    #navbar-content .nav-link{
        text-align: center;
        padding: 0.5rem;
    }
    
    #navbar-content .nav-item:last-child .nav-link{
        color: white;
        background-color: #9e3d90;
    }
    
    #navbar-content .nav-item:last-child .nav-link.active,
    #navbar-content .nav-item:last-child .nav-link:hover{
        background-color: #a483ae;
    }
    
    #navbar-content .nav-item:not(:last-child) .nav-link{
        margin-bottom: 0;
        margin-right: 0.3125rem;
    }
}

@media (min-width: 1200px){
    #navbar-content .nav-link{
        padding: 0.75rem 1rem;
    }
}

/* Mobile toggler */
.header-navbar .navbar-toggler{
    width: 1.875rem;
    height: 1.25rem;
    border: 0;
    outline: none;
}

.header-navbar .navbar-toggler-icon{
    display: block;
    width: 100%;
    height: 0.25rem;
    background-image: none;
    background-color: #006238;
    border-radius: 0.25rem;
    position: relative;
    transition: 0.25s;
}

.header-navbar .navbar-toggler:not(.collapsed) .navbar-toggler-icon{
    background-color: transparent;
}

.header-navbar .navbar-toggler-icon:before,
.header-navbar .navbar-toggler-icon:after{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 0.25rem;
    background-color: #006238;
    border-radius: 0.25rem;
}

.header-navbar .navbar-toggler-icon:before{
    top: -0.5rem;
}

.header-navbar .navbar-toggler-icon:after{
    bottom: -0.5rem;
}

.header-navbar .navbar-toggler:not(.collapsed) .navbar-toggler-icon:before,
.header-navbar .navbar-toggler:not(.collapsed) .navbar-toggler-icon:after{
    top: 0;
    bottom: 0;
    transform-origin: 50% 50%;
    transition: 0.5s;
}

.header-navbar .navbar-toggler:not(.collapsed) .navbar-toggler-icon:before{
    transform: rotate(-45deg);
}

.header-navbar .navbar-toggler:not(.collapsed) .navbar-toggler-icon:after{
    transform: rotate(45deg);
}

/*------------------------------------------------------------------------------
- Page "Home"
------------------------------------------------------------------------------*/

/* General */
.pg-home .spoken-lang{
    font-size: 1.75rem;
}

/* Cover */
.pg-home .cover{
    padding: 3rem 0;
    background-size: cover;
    background-position: center center;
}

@media (min-width: 992px){
    .pg-home .cover{
        padding: 7.5rem 0;
    }
}

.pg-home .cover .subtext{
    font-size: 2rem;
}

/* Get Reiki Master */
.pg-home .get-reiki-master{
    padding: 3rem 0;
    background-size: cover;
    background-position: center center;
}

@media (min-width: 992px){
    .pg-home .get-reiki-master{
        padding: 10rem 0;
    }
}

/*------------------------------------------------------------------------------
- Page "Who We Are"
------------------------------------------------------------------------------*/

/* General */
.pg-who-we-are .spoken-lang{
    font-size: 1.75rem;
}

/* Cover */
.pg-who-we-are .cover{
    padding: 3rem 0;
}

@media (min-width: 992px){
    .pg-who-we-are .cover{
        padding: 7.5rem 0;
    }
}

/* VIP */
.pg-who-we-are .vip{
    background-image: linear-gradient(to bottom, #f6f4f7, #d3e1d9);
}

.pg-who-we-are .vip .photo img{
    width: 18.75rem;
}

.pg-who-we-are .vip h3{
    font-size: 1.5rem;
}

/*------------------------------------------------------------------------------
- Page "What is Reiki"
------------------------------------------------------------------------------*/

/* General */
.pg-what-is-reiki .spoken-lang{
    font-size: 1.75rem;
}

/* Cover */
.pg-what-is-reiki .cover{
    padding: 3rem 0;
    background-size: cover;
    background-position: center center;
}

@media (min-width: 992px){
    .pg-what-is-reiki .cover{
        padding: 7.5rem 0;
    }
}

.pg-what-is-reiki .cover h1 span{
    border-radius: 5rem;
    box-shadow: 0 0 3rem 2rem white;
}

.pg-what-is-reiki .cover .subtext{
    font-family: 'Pacifico', cursive;
    font-size: 1.75rem;
}

.pg-what-is-reiki .cover .subtext span{
    border-radius: 5rem;
    box-shadow: 0 0 2rem 1rem white;
}

/* About */
.pg-what-is-reiki .about img{
    width: 21rem; /* IAB Large Rectangle format (336px width) */
}

/* Levels */
.pg-what-is-reiki .levels{
    background-image: linear-gradient(to bottom, #f6f4f7, #e6d3e5);
}

.pg-what-is-reiki .levels h3{
    font-size: 1.5rem;
}

.pg-what-is-reiki .levels .box{
    box-shadow: 0 0 1rem white;
}

/* Mantras Reiki */
.pg-what-is-reiki .mantras-reiki .banner img{
    width: 25rem;
}

/*------------------------------------------------------------------------------
- Page "Reiki Master"
------------------------------------------------------------------------------*/

/* Cover */
.pg-reiki-master .cover{
    padding: 25rem 0 7.5rem 0;
    background-size: cover;
    background-position: center center;
}

/* How to get the Master */
.pg-reiki-master .how-to-get{
    background-color: #f9f7f9;
}

.pg-reiki-master .how-to-get .banner img{
    width: 25rem;
}

.pg-reiki-master .how-to-get .fa-circle{
    font-size: 0.5rem;
    vertical-align: middle;
    margin-bottom: 0.125rem;
}

/* Reiki heart */
.pg-reiki-master .reiki-heart{
    background-image: linear-gradient(to bottom, #f6f4f7, #e6d3e5);
}

.pg-reiki-master .reiki-heart .subtext{
    font-family: 'Pacifico', cursive;
    font-size: 1.75rem;
}

.pg-reiki-master .reiki-heart .banner img{
    width: 90%;
}

@media (min-width: 576px){
    .pg-reiki-master .reiki-heart .banner img{
        width: 60%;
    }
}

.pg-reiki-master .reiki-heart .spoken-lang{
    font-size: 1.75rem;
}

/* Reiki in hospitals */
.pg-reiki-master .reiki-in-hospitals .banner img{
    width: 25rem;
}

/* Why Reiki in hospitals */
.pg-reiki-master .why-reiki-in-hospitals{
    background-size: cover;
    background-position: center center;
}

/*------------------------------------------------------------------------------
- Page "Contact Us"
------------------------------------------------------------------------------*/

/* General */
.pg-contact-us .spoken-lang{
    font-size: 1.75rem;
}

.pg-contact-us h2{
    font-size: 1.25rem;
    text-transform: uppercase;
    color: black;
}

/* Cover */
.pg-contact-us .cover{
    padding: 3rem 0;
    background-size: cover;
    background-position: center center;
}

@media (min-width: 992px){
    .pg-contact-us .cover{
        padding: 7.5rem 0;
    }
}

@media (max-width: 767px){
    .pg-contact-us .cover .spoken-lang{
        color: white !important;
    }
}

/* Contact info */
.pg-contact-us .contact-info .header i.fa-phone{
    font-size: 3.75rem;
}

.pg-contact-us .contact-info .header .phone,
.pg-contact-us .contact-info .header .email{
    font-size: 1.75rem;
}

.pg-contact-us .contact-info .fa-circle{
    font-size: 0.5rem;
    vertical-align: middle;
    margin-bottom: 0.125rem;
}

.pg-contact-us .contact-info .cta-text{
    font-size: 1.125rem;
}

.pg-contact-us .contact-info .lead{
    font-size: 1.5rem;
}

/* Enjoy with us */
.pg-contact-us .enjoy{
    background-image: linear-gradient(to bottom, #f5f2f6, #e6d3e5);
}

.pg-contact-us .enjoy .travel figcaption{
    font-size: 1.25rem;
}

/* Contact form */
.pg-contact-us .contact-form{
    background-image: linear-gradient(to bottom, #f6f4f7, #d2e0d8);
}

/*------------------------------------------------------------------------------
- Page "Blog"
------------------------------------------------------------------------------*/

/* Cover */
.pg-blog .cover{
    padding: 3rem 0;
    background-size: cover;
    background-position: center center;
}

@media (min-width: 992px){
    .pg-blog .cover{
        padding: 7.5rem 0;
    }
}

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

/* Generic */
body > footer{
    font-size: 0.9375rem;
}

/* Footer row 1 */
.footer-row-1{
    padding: 2rem 0;
}

/*------------------------------------------------------------------------------
- Forms
------------------------------------------------------------------------------*/

/* Contact form */
.contact-form label{
    font-weight: bold;
    text-transform: uppercase;
}

.contact-form .required{
    color: #9e3d90;
}

.contact-form .form-control{
    font-size: 0.9375rem;
    border: 0.125rem solid #9e3d90;
}

.contact-form .form-control:focus{
    border-color: #9e3d90;
    box-shadow: 0 0 0 0.2rem rgba(158,61,144,0.25);
}

.contact-form #your-message{
    height: 12.5rem;
}

.contact-form .info{
    font-size: 0.875rem;
}

.contact-form .info-required{
    color: rgba(0,0,0,0.5);
}

.contact-form input[type="submit"]:hover{
    cursor: pointer;
}

.contact-form .wpcf7-not-valid-tip{
    font-size: 0.875rem;
    color: #9e3d90;
}

.contact-form .wpcf7-validation-errors{
    background-color: #9e3d90;
    border-color: #9e3d90;
    color: white;
    text-align: center;
}

.contact-form .wpcf7-mail-sent-ok{
    background-color: #006238;
    border-color: #006238;
    color: white;
    text-align: center;
}

/*------------------------------------------------------------------------------
- Widgets
------------------------------------------------------------------------------*/

/* To Top button */
.navigation-top{
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 0.3125rem;
    z-index: 999999;
    transition: 1s right linear;
}

.navigation-top.hidden{
    right: -4.625rem;
}

.navigation-top a{
    background-color: #006238;
    color: white;
    width: 3.75rem;
    height: 3.75rem;
    vertical-align: middle;
    border-radius: 50%;
}

/* Social icons */
.social-profile img{
    width: 2.8125rem;
}

.social-profile:hover{
    text-decoration: none;
}

/* Post preview */
.post-preview .thumbnail img{
    width: 100%;
    height: auto;
}

.post-preview .date{
    font-size: 0.9375rem;
}

/* Post fullview */
.post-fullview .thumbnail img{
    width: 21.875rem;
    max-width: 100%;
    height: auto;
}

/* Pagination links */
.pagination-links{
    font-size: 1.5rem;
}

@media (min-width: 576px){
    .pagination-links{
        font-size: 2.5rem;
    }
}

.pagination-links .page-numbers{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.pagination-links .page-numbers.dots{
    display: none;
}