/*
 Theme Name:   Alama Child
 Theme URI:    https://www.understrap.com
 Description:  UnderStrap Child Theme
 Author:       Kendew
 Author URI:   https://webdesign.alama.net
 Template:     understrap
 Version:      0.5.1
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  understrap-child
 Tags: one-column, custom-menu, featured-images, theme-options, translation-ready
*/

.sticky {}

/* DO NOT EDIT THIS */
.gallery-caption {}

/* THESE ARE USELESS */
.bypostauthor {}

/* THEY ARE ONLY TO KEEP THEME CHECK HAPPY */

/* General */
/* body, html, .wrapper{background-color:#fff;} */

.site-main{border-radius:1em;}
.site-main p{text-align: justify; text-justify: inter-word; text-indent:2em; line-height:1.3em; padding:0.2em 0; margin:0; font-family: source-sans-pro, source_sans_proregular, sans-serif;font-size:1.1em;}
.site-main img{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin:1em 0;}
.site-main h1{font-size:3.5em; font-family:original-surfer, sans-serif;}


/* Italic Pseudo-header */
.box1{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.input-group{margin-bottom:1em;}

/* Page Specific Settings */
.page-id-2 h1{color:rgba(81,81,81,1.0); font-size:3.2em;}
.page-id-2 .site-main p{font-family:raleway, source-sans-pro, sans-serif;}
#post-2 aside{font-size:0.9em; font-style:italic; margin-left:11%;}
.postid-15 h1{color:#8D6860;}
#post-55{background-color: #000; color:#fff; border-radius: 30px 10px; -moz-box-shadow: 0 0 5px 5px rgba(7, 70,53,0.9); -webkit-box-shadow: 0 0 5px 5px rgba(7, 70,53,0.9); box-shadow: 0 0 5px 5px rgba(7, 70,53,0.9); padding:2em;}
#post-55 h1{color:#f88d82; font-size:3.5em; font-family:original-surfer, 'Tenali Ramakrishna', sans-serif;}
#post-55 h2{color:#d91483; font-size:1.4em; font-family: philosopher, sans-serif; margin-top:1em;}
#post-55 h3{color:#97CE75; font-family:"Overlock SC", serif; font-size:1.4em; font-variant: small-caps; margin-top:1em;}
/* To make entire page black */
.postid-55{background-color:#000;}
.postid-55 p.metamorphous{font-family: metamorphous, original-surfer, sans-serif; font-size:0.95em;}
.wp-image-51{margin-top:1em;}

/* For picture on main page */
.pod{}
.podtext{text-indent:0; font-size:1em; font-family:gandhi_serifitalic, tahoma, sans-serif; margin-bottom:2em; margin-left:11em;}


/* Text styles*/
.iph{font-style: italic; font-variant:small-caps; font-size:1.9em; font-family: 'Tenali Ramakrishna', sans-serif; display:inline-block; margin-top:0.7em;}
.about{font-family: original-surfer, fantasy;}
.metamorphous{font-family: metamorphous, original-surfer, sans-serif; display:inline-block;}

/* For word 'aloha' */
.alohaword{text-indent:0; font-family:'Overlock SC', sans-serif; display:block;}
.alohaword:first-letter, .alohaword::first-letter{color:rgba(145,145,120,1.0); vertical-align:-22%; font-family:aladin, serif; padding:0; font-size:330%; margin-top:1em;}
.alohaword:first-line, .alohaword::first-line{font-size:170%; text-transform: uppercase;  font-family:original-surfer, 'Tenali Ramakrishna', sans-serif;}
.move-down{margin-top:1em;}

/* Kakemono Effects */
/* Various headers */

/* background-origin:; background-clip:; */
.aloha{padding:0.5em 0; text-align:center; font-family:CaviarDreamsRegular, sans-serif;}
.et1{display:inline-block; font-family: chelsea-market, philosopher, sans-serif; background-color:rgba(200,200,200,0.9); padding:0.7em; border-radius: 0.3em;}
/* To add shadow: color:#222; text-shadow: 0 2px 3px #555; */

/* Font Families */
/* 
font-family: 'Overlock SC', cursive;
font-family: 'Patrick Hand SC', cursive;
font-family: 'Tenali Ramakrishna', sans-serif;
*/

/* Link Styles */
.link1{display:inline-block; font-size: 1.4em; font-family: philosopher, sans-serif; color:#222; text-shadow: 0 2px 3px #555; background-color:#999; padding:0.5em; border-radius: 5%; text-align:center;}
.p-links{text-indent:0; text-align:center;}
/* For Front Page */

/* Small Adjustments */
.nav-previous{margin-top:1em;}
.cat-links{margin-top:2em; font-size:0.9em; display:inline-block;}

/* For Content Container */
#content{}
/* The following is copied directly from Understrap theme, changing absolute size to relative. em is used as a fallback for rem. */

.container {
  width: 100%;
  
padding-right: 1rem;
  padding-left: 1rem;
  padding-right: 1em;
  padding-left: 1em;
  margin-right: auto;
  margin-left: auto; }
  @media (min-width: 576px) {
    .container {
      max-width: 540px; } }
  @media (min-width: 768px) {
    .container {
      max-width: 90%; } }
  @media (min-width: 992px) {
    .container {
      max-width: 85%; } }
  @media (min-width: 1200px) {
    .container {max-width: 75%; }
    #right-sidebar, .sidebar{margin:11% 11% 11% 11%;}
    .col-md-4{max-width:25%;}
   }

/* For Sidebar (Right) */

#right-sidebar, .sidebar{background-color: rgba(170,175,160,0.7); border-radius:2em; padding:3em; padding-top:7em;}
/* For Sidebar Search */
#searchsubmit{background-color: rgba(180,160,160,0.9); border: rgb(150,150,150) groove 0.1em;}


/* For handling tts (TT) */

.tt {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted rgba(130,90,105,1.0); /* If you want dots under the hoverable text */
    color: rgba(130,90,105,1.0);
    width:auto;
    margin:0;
    text-indent:0;
}

/* tt text */
.tt img{width:96%; margin:0 2%;}

.tt .tttext {
    visibility: hidden;
    
    background-color: rgba(50,50,50,0.8);
    color: #fff;
    font-size:0.9em; font-size:0.9rem;
   /* text-align: justify;
    text-justify: auto; */
    text-align:left;
    padding: 1em;
    border-radius: 0.5em;
 
    /* Position the tt text - see examples below! */
    position: absolute;
    z-index: 3;
}

.tttext{width: 18em;}
.tttext a{text-align:center; margin:0 1em; color:#dd7266;}

/* Show the tt text when you mouse over the tt container */
.tt:hover .tttext {
    visibility: visible;
}
.ttt {
	width:18em;
    bottom: 100%;
    left: 50%;
    margin-left: -6em; /* Use half of the width (120/2 = 60), to center the tt */
    z-index:3;
}
.ttb{
    width: 18em;
    top: 100%;
    left: 50%;
    margin-left: -6em; /* Use half of the width (120/2 = 60), to center the tt */
}
.ttr {
    width:18em;
    top: -5px;
    left: 105%;
}
.ttl {
    width:18em;
    top: -5px;
    right: 105%;
}
/* Bottom arrow */

.ttt::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -0.5em;
    border-width: 0.5em;
    border-style: solid;
    border-color: rgba(50,50,50,0.8) transparent transparent transparent;
}

/* For arrow at top instead of bottom */

.ttb::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -0.5em;
    border-width: 0.5em;
    border-style: solid;
    border-color: transparent transparent rgba(50,50,50,0.8) transparent;
}

.ttr::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -0.5em;
    border-width: 0.5em;
    border-style: solid;
    border-color: transparent rgba(50,50,50,0.8) transparent transparent ;
}

.ttl::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -0.5em;
    border-width: 0.5em;
    border-style: solid;
    border-color: transparent transparent transparent rgba(50,50,50,0.8);
}

/* For Ribbon Effect on Welcome header */
.ribbon {
    text-align: center;
    position: relative;
    color: #fff;    
    margin: 2% 0;
    padding: 10px 0; 
    text-shadow: 0 1px rgba(0,0,0,.8);
    background-color: rgba(50,90,100,0.8);
    background-image:  linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
    box-shadow: 0 2px 20px rgba(0,0,0,.3);
}

.ribbon:before, 
.ribbon:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-color: transparent;
    bottom: -10px;
}

.ribbon:before {
    border-width: 0 10px 10px 0;
    border-right-color: #222;
    left: 0;
}

.ribbon:after {
    border-width: 0 0 10px 10px;
    border-left-color: #222;
    right: 0;
}

/*  Responsive */
@media screen and (max-width: 600px) and (orientation : portrait){
  h1{text-align:center;}
  .page-id-15 h1{background-position:3% center;}
  .tttext, .ttb, .ttt, .ttr, .ttl{width:11em;}
  }


@media screen and (min-width:601px) and (max-width: 991px) and (orientation : portrait){
  h1{background-position:25%;}
}