/*Kael Hauptmann - Shanti la Yoga*/

/*This is my gateway CSS using Eric Meyer's reset at the top of my page*/



/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* this is the beginning of website CSS*/

/* universal styles*/

body {
    font-family: 'Muli', sans-serif;
    margin: 0 auto;
    background-color: white;
    /* background-image: url(assets/pattern.png); */
    background-repeat: repeat;
    
}

h1, h2, h3, h4 {
    font-weight: 800;
}

h1, h2, h3, h4, p {
    padding: 10px;
}

h1 {
    font-size: 3em;
    text-align: center;
    color: rgb(255,223,0);
    padding: 40px 20px 0 20px;
    margin: 0 auto 20px auto;
}

h4 {
    font-size: 1em;
    text-align: center;
    color: rgb(0, 191, 255);
    padding: 5px 0 0 0;
}


h4 a {
    text-decoration: none;
    color: rgb(0, 191, 255)
}

h4 a:hover {
    color: rgb(255,223,0);
}

footer {
    background-color: rgba(0, 191, 255, .25);
    max-width: 100%;
    margin: auto;
    clear: both;
    padding: 20px 0 20px 0;
    text-align: center;
    font-size: .75em; 
    
}

/* container for pages */

#container {
    width: 100%;
}

/* backgrounds for pages*/

#backgroundImageHome {
    background: url(assets/home.jpg);
    width: 100%;
    height: 667px;
	background-position: center;  
	background-size: cover;
    -webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
}

#backgroundOffering {
    background: url(assets/offerings.jpg);
    width: 100%;
    height: 667px;
	background-position: center;  
	background-size: cover;
    -webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
}

#backgroundRetreats {
    background: url(assets/retreats-bg.jpg);
    width: 100%;
    height: 667px;
	background-position: center;  
	background-size: cover;
    -webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
}

#backgroundTestimonials {
    background: url(assets/testimonials-bg.jpg);
    width: 100%;
    height: 665px;
	background-position: center;  
	background-size: cover;
    -webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
}

#backgroundContact {
    background: url(assets/contact-bg.jpg);
    width: 100%;
    height: 665px;
	background-position: center;  
	background-size: cover;
    -webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
}

#backgroundReply {
    background: url(assets/mailers.jpg);
    width: 100%;
    height: 665px;
	background-position: center;  
	background-size: cover;
    -webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
}

/* logo style*/

#logo-box {
    width: 250px;
    margin: 0 auto;
    padding-top: 250px;
}

#logo {
    width: 250px;
}
    
/* global nav */
.nav-links{
    text-decoration: none;
    margin: 0 auto;
    text-align: center;
    position: fixed;
    width: 100%;
    background-color: rgb(46, 49, 146);
    background-color: white;
    z-index: 1;
    
}

/*     nav bar logo */

.branding {
    font-size: 3em;
    font-family: 'Philosopher', serif;
    display: inline-block;
    float: left;
    padding: 10px;
    padding-top: 4px;
    color: rgb(255,223,0);
    position: fixed;
    z-index: 2;
/*     text-shadow: .25px .25px black;
    text-shadow: .1px .1px black; */
    letter-spacing: 1px;
    text-decoration: none;
}

.branding:hover {
    color: rgb(255,140,0);
}

.nav-links li{
    display:inline;
}
.nav-links a{
    display: inline-block;
    padding: 20px 20px;
    text-decoration: none;
    font-size: 1.25em;
    color:  deepskyblue;
}

.nav-links a:hover {
    color: white;
    border-bottom: solid 3px rgb(255, 255, 255);    
    background-color: rgb(255,223,0);
    padding-bottom: 17px;
}

/* newsletter form */

form {
    width: 450px;
    margin: 1% auto 2.5% auto; 
}


.header {
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.input {
    display: flex;
    align-items: center;
}


.button {
    height: 44px;
    border: none;
}

#email {
    width: 75%;
    background: white;
    color: #737373;
    letter-spacing: 1px;
    text-indent: 5%;
    border-radius: 5px 0 0 5px;
    font-family: inherit;
}


button {
    width: 25%;
    height: 46px;
    background: rgb(255,223,0);
    font-family: inherit;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background .3s ease-in-out;
    outline: none;
    border: none;
    
}

button g-recaptcha {
    outline: none;
    border: none;   
}
  

button:hover {
    background: rgb(255,140,0);
}
  

input:focus {
    outline: none;
    outline: 2px solid rgb(255,223,0);
    -moz-outline-radius:  5px 0 0 5px; 
}

/* page content*/

#content {
    max-width: 880px;
    margin: 0 auto;
    background-color: white;
    padding-bottom: 20px;
/*     border-radius: 0 0 25px 25px; */
}

#content h1{
    font-variant: small-caps;
}

/* homepage styles*/

#bio {
    line-height: 1.5em;
    padding: 20px 30px;
    padding-top: 0;
    font-size: 1.2em;
}

.bio-right {
    float: right;
    width: 67%;
}

.bio-left {
    float: left;
    width: 33%;
}

.bio-left img{
    width: 100%;
    padding-top: 6px;
}

.gallery {
    clear: both;
    padding-bottom: 40px;
    padding-top: 40px;
}

/* yoga offerings page styles*/

.offerings-p {    
    line-height: 1.5em;
    padding: 0;
    padding-top: 0;
    font-size: 1.2em;
}

.link a {
    text-decoration: none;
    color: rgb(0, 191, 255);
}

.link a:hover {
    color: rgb(255,223,0);
}

.col-2-left {
    float: left;
    padding-bottom: 10px;
    margin-bottom: 12px;
    height: 420px;
}

.col-2-right {
    float: right;
    border-top: none;
    padding-bottom: 10px;
    margin-bottom: 12px;
    height: 420px;
}

.col-2-center {
    float: none;
    clear: both;
    display: block;
    border-top: none;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

/* .past-classes-style {
    clear: both;
    padding-bottom: 20px;
    margin-bottom: 0;
} */

.bottom-space {
    margin-bottom: 30px;
}

.studio-img {
    width: 430px;
}

.studio-img-center {
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 430px;
    }

.studios {
    font-size: 1.9em;
    text-align: center;
    padding: 3px 2px 2px 2px;
}

.locations {
    text-align: center;
    font-size: .8em;
    padding-bottom: 8px;
    padding-top: 0;
}

.hidden {
    visibility: hidden;
}

.times {
    padding: 0px 2px 2px 6px;
    text-align: center;
    font-size: 1.15em;
}

.col-2-left a, .col-2-right a, .col-2-center a{
    text-decoration: none;
    color: rgb(255,223,0);
}

.col-2-left a:hover, .col-2-right a:hover, .col-2-center a:hover {
    color: rgb(0, 191, 255);
}

/* collapsable boxes */

.collapse-2-left, .collapse-2-right {
    background:  rgb(255,223,0);
    display: inline-block;
    margin: 20px 0;
/*     padding: 20px 0; */
}

.collapse-2-left {
    width: 46.73%;
    padding-left: 2%;
    margin-right: 1%;
}

.collapse-2-right {
    width: 46.73%;
    padding-left: 2%;
    margin-left: 1%;
}

.toggle-box {
  display: none;
}

label {
    font-size: 2em;
    color: white;
}

.toggle-box + label {
    cursor: pointer;
    display: block;
    font-weight: bold;
    line-height: 81px;
    margin-bottom: 5px;
    
}

.toggle-box + label + div {
    display: none;
    margin-bottom: 10px;
    padding-right: 2%;
}

.toggle-box:checked + label + div {
  display: block;
}

.toggle-box + label:before {
      background-color:white;
      color: rgb(255,223,0);
      font-family: awesome;
      font-size: 20px;
      content: "\f042";
      display: block;
      float: left;
      font-weight: normal;
      height: 30px;
      line-height: 31px;
      margin-right: 10px;
      text-align: center;
      width: 30px;
      margin-top: 25px;
}

.toggle-box:checked + label:before {
  content: "\f111";
}

/* adjust padding to make left box even with right */
#collapse-link-height{
    padding-bottom: 20px;    
}

.collapse-p {
    padding: 0;
}

#collapse-link a {
    text-decoration: none;
    color: rgb(0, 191, 255);    
}

#collapse-link a:hover {
    color: rgb(255,255,255);    
}

/* events page styles */

#myImg, #myImg2 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}
#myImg2:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close, .close2 {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.close2:hover,
.close2:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

/* testimonials page styles*/

.testimonials {
    margin: 5px auto;
    font-size: 1.2em;
    padding: 15px;
    display: inline-block;
    text-indent: -8px; 
}

.top-padding {
    padding-top: 10px;
    margin: 0 auto 20px auto;
}


.quote-names{
    font-weight: bold;
    font-size: .8em;
    text-align: right;
    padding-top: 15px;
    letter-spacing: .01em;
}

.testimonials-box {
    background-color: rgb(255,223,0);
    height: 5px;
}

/* contact page styles*/

#content-contact {
    max-width: 880px;
    margin: 0 auto;
    background-color: white;
    padding-bottom: 20px;
/*     border-radius: 0 0 25px 25px; */
}

.col-2-icon {
    width: 24.59%;
    display: inline-block;
    padding: 10px 0 25px 0;
}

.col-2-icon  a i:hover {
    color: rgb(255,223,0);
}

.icon {
    width: 100%;
    text-align: center;
    color: rgb(0, 191, 255)
}


/* Imported Fonts */

@font-face {
    font-family: awesome;
    src: url(fonts/fontawesome-webfont.ttf);
}

/* MEDIA QUERIES BEGIN HERE MAX-WIDTH: If device width is LESS THAN or equal to 1300px, then following CSS will overrride the elements above */

@media (max-width: 1300px) {

/* global nav */
    .nav-links{
        text-align: right;
    }  
    
    .nav-links li {
        text-align: right;
    }
}

/* MEDIA QUERIES BEGIN HERE MAX-WIDTH: If device width is LESS THAN or equal to 1000px, then following CSS will overrride the elements above */

@media (max-width: 1000px) {
    
    #content {
/*          background-color: red;      */
    }
    
/* global nav */
    
    .nav-links li a{
        padding: 20px 10px;
    }
    
    .nav-links a:hover {
        padding-bottom: 17px;
    }
    
/* yoga offerings page styles*/
    
    .offerings-p {    
        max-width: 430px;
        margin-left: auto;
        margin-right: auto;
    }

    .col-2-left, .col-2-right {
        float: none;
        height: auto;
    }
    
    .studio-img {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    
    #collapse-wrapper {
        width: 430px;
        margin: auto;
        background-color: rgb(255,223,0);    
    }    
    
    .collapse-2-left, .collapse-2-right {
        display: block;
        margin: 20px auto;
        padding-left: 2%;
        padding-right: 0%;
}

    .collapse-2-left {
        width: 400px;
        margin-bottom: 0;
}

    .collapse-2-right {
        width: 400px;
        margin-top: 0;
        position: relative;
        top:-6px;
}
    
    /* adjust padding to make left box even with right */
    #collapse-link-height{
        padding-bottom: 0;    
}

/* contact page styles*/
    
    #content-contact{
        max-width: 440px;    
    }
    
    .col-2-icon {
        width: 49%;
        padding: 25px 0 0 0;
    }

}

/* MEDIA QUERIES BEGIN HERE MAX-WIDTH: If device width is LESS THAN or equal to 800px, then following CSS will overrride the elements above */

@media (max-width: 900px) {
    
    #content {
/*          background-color: red;      */
    }
    
/* global nav */
    
    .nav-links li a{
        font-size: .95em;
    }
    
    .branding {
        padding: 4px;
        padding-top: 2px;
    }


/* MEDIA QUERIES BEGIN HERE MAX-WIDTH: If device width is LESS THAN or equal to 768px, then following CSS will overrride the elements above */

@media (max-width: 768px) {
    
    body {
        font-size: .75em;
    }
    
    #content {
        padding: 2%;
    }
   
    h1 {
        padding-top: 5px;
    }
    
/* newsletter form */
    
    form {
        width: 370px;
}
    
    .button {
        height: 39px;
    }

    #email {
        width: 75%;
}

    #submit {
        height: 41px;
}
    
/* global nav */
    
    .nav-links li a{
        padding: 15px 8px;
        font-size: 1.25em;
    }
    
    .nav-links a:hover {
        padding-bottom: 12px;
    }
    
/* contact page styles*/    
    
    #content-contact{
        max-width: 328px;    
    }
    
    .col-2-icon {
        padding: 0 0 20px 0;
    }

}

/* MEDIA QUERIES BEGIN HERE MAX-WIDTH: If device width is LESS THAN or equal to 640px, then following CSS will overrride the elements above */

@media (max-width: 640px) {
     
    body {
        width: 100%;
     }
    
    h1 {
        margin-bottom: 10px;
    }
    
    
    footer {
        padding: 10px 5px 10px 5px;
    }
    
/* global nav */
    
    .nav-links{
        position: static;
    }

    .nav-links li{
        display:block;
        text-align: center;
    }
    .nav-links a{
        display: block;
    }

    .nav-links a:hover {
        padding-bottom: 12px;
    }
    
/* logo style */ 
    
    #logo-box {
        width: 200px;
        padding-top: 95px;
    }
    
    #logo {
       width: 200px;
    }
    
    .branding {
        font-size: 3em;
        float: none;
        display: block;
        position: static;
        text-align: center;
    }
    
/* newsletter form */
    
    form {
        width: 310px;
}
   
/* homepage styles*/   

    #backgroundImageHome {
        height: 400px;
    }
        
    #bio {
       padding: 10px; 
       margin-top: 10px;
    }
    
    .bio-right {
        float: none;
        width: 100%
    }

    .bio-left {
        float: none;
         width: 100%;
         margin: 0 auto;
        padding-bottom: 15px;
    }

    .bio-left img{
        width: 96%;
        margin: 0 auto;
        padding-left: 2%;
        padding-right: 2%;
    }
    
    .gallery {
        padding: 15px 2% 25px 2%;
    }
    
/* yoga offerings style */
    
    #backgroundOffering {
        height: 400px;
    }
    
    .offerings-p {    
        max-width: 310px;
    }
    
    .studio-img {
        width: 310px;
    }
    
    .studio-img-center {
        width: 310px;    
    }
    
    #collapse-wrapper {
        width: 310px;  
    }    
    
    .collapse-2-left, .collapse-2-right {
        display: block;
        margin: 20px auto;
        padding-left: 2%;
        padding-right: 0%;
}

    .collapse-2-left {
        width: 300px;
        margin-bottom: 0;
}

    .collapse-2-right {
        width: 300px;
        margin-top: 0;
        position: relative;
        top:-6px;
}
    
/* retreats style */
    
    #backgroundRetreats {
        height: 400px;
    }
    
/* testimonial style */    
        
    #backgroundTestimonials {
            height: 400px;
    }
    
/* contact style */

    #backgroundContact {
        height: 400px;
    }
    
    .col-2-icon  {
        margin: auto;
        display: block;
        padding: 10px 0;
        width: 100%;
    }
    
    .icon {
        position:inherit;
    }

}