/*
greenish: #d4e3c4
mango: #ffcd48

*/



/*  SECTINO AWARE*/

#section_aware .slide {
    background-image: url(../images/bg/bg3.jpg);
    xbackground-size: cover;
    xbackground-attachment: fixed
}

#section_aware .flexRow>div {margin: 0}


#statsAware th {text-align: left; padding: 4px 7px}

#pranaTimer h2 {
    background: #ffcd48;
    color: white;
    text-align: center;
    margin: 0;
    padding: 10px;
}



.itemAware {
    background-color: rgba(255,255,255,.9);
    margin: 10px;
    border-radius: 6px
}

.itemAware div {margin: 0; height: 80px;}
.itemAware h2 {
    margin: 9px 0 3px 0;
    font-size: 100%
}
.itemAware p {
    margin: 0;
    font-size: 80%
}


.itemAware  {
    background-size: contain; 
    background-position-x: -24px;
    background-repeat: no-repeat;
    border-radius: 6px;
}

.itemAware>div {
    padding: 6px 16px 6px 36%;
}


.itemAudio>div {padding: 0}

.itemAudio audio {
    /*    margin-left: -40px; */
    max-width: 100%!important
}

#btnPlayTalkDown {
    max-width: 100%;
    margin-top: -20px
}


.bgLion {background-image: url(../images/tools/loewe.jpg)}
.bgBee {background-image: url(../images/tools/bee.jpg)}
.bgNadi {background-image: url(../images/content/aware/nadi.jpg)}
.bgMeditation {background-image: url(../images/tools/meditate3.jpg)}

/**/


#pranaTimer {

    font-size: 30px;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;

    xtext-align: center;
}


#boxTimingMain {font-size: 30px}


#boxTimeControl {
    padding: 3%;
    background: rgba(255,255,255,.8);
    margin: 0 auto;
    text-align: center
}




#boxTimeControl>div {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;

}

#boxTimeControl .btn {
    font-size: 40px;
    line-height: 1.1;
    max-width: 150px
}

#boxTiming {
    min-width: 150px;
    text-align: center
}

#timingVals {
    font-size: 66%;
    color: #999;
    margin: 1%;
    padding: 1%
}



#boxSession {
    display: none;
    background: rgba(255,255,255,.9);
    padding: 2% 10%;
    font-size: 15px;
    text-align: center
}

#boxSession table td {
    padding: 0;
    height: 15px;
    line-height: 15px;
    background: none
}

#boxSession .small {
    text-align: right;

}

#boxSession .val {
    font-family: "courier new";
    font-size: 30px;
    text-align: left;
    text-transform: lowercase
}

.dotline{ 
    padding: 0 2px;
    min-width: 10px;
    max-width: 50px;
    border-bottom: 1px dashed silver;
}

#btnStart {
    display: block;
    margin: 5vh auto; 
    font-size: 130%
}


#btnStart i{
    font-size: 80%;
    margin-right: 8px
}

#visuals  { }

.circle {
    box-sizing: border-box;
    text-align: center;

    margin: 0px auto;
    width: 20%;
    height: 35vw;
    line-height: 33vw;
    opacity: 0.9;

    background-color: #b9e5f2; 

    background-image: url(../images/bg/bgLogo.jpg);
    background-repeat: no-repeat;
    background-size: 85vw auto;
    background-position: center;


    border-radius: 100%;
    border: 2px solid white;


    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;

    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
}

.circle .circle {
    background: #111;
    opacity: 1;
    width: 100%!important;
    border: none;
}

.pranaPhaseTxt {
    font-size: 120%;
    text-transform: uppercase; 
    font-weight: bold;
    font-spacing: 1px;
    padding: 20px;
    text-align: center
}

.pranaPhaseTxt p {
    text-transform: none;
    color: white;
    color: #ffcd48;
    background: rgba(255,255,255,.5);
    font-size: 115%;
    font-weight: normal;
    font-spacing: 0px;
}

.pranaExplan {font-size: 15px; padding: 0 20px}

/*#pranaTimer textarea {
    box-sizing: border-box;
    background: cornsilk;
    width: 100%;
    margin: 0;
}

#pranaTimer table tr:nth-child(even) td {background: rgba(235,240,245,.8)}
#pranaTimer table tr:nth-child(odd) td {background: rgba(255,255,255,.8)}



#pranaTimer  th {font-size: 14px; 
    font-weight: normal; 
    text-transform: uppercase;
    text-align: center;
    background: #999; color: white; 
    xxxborder: 1px solid white;
}
#pranaTimer th:first-child {border-top-left-radius: 6px;}
#pranaTimer th:last-child {border-top-right-radius: 6px;}

#pranaTimer .btn {font-size: 30px}

#pranaTimer .flexRow>div {margin: 0}

#pranaTimer .small {font-size: 75%}

#pranaTimer .pranaExplan {font-size: 15px; padding: 0 20px}*/


/* Smartphones ----------- */
@media only screen and (max-width: 1200px) {

    #pranaTimer {
        font-size: 18px
    }


    #boxSession .val {
        font-size: 25px;
        font-weight: bold;
        color: rgba(0,0,0,.9);
        text-align: left;
        text-transform: lowercase
    }

    #cycleType { display: none; }

    .dotline {max-width: 7px}

    #boxSession {padding: 5% 2%}

    #boxSession .small {
        padding-top: 1px;
        font-size: 15px    
    }


}