/* 
Theme Name: yogafish
Theme URI: https://yogafish.co.za
Description: Codesign theme child of halo elementor theme
Author: codesign
Author URI: https://codesign.web.za/
Template: hello-elementor
Version: 1.0.1
Text Domain: yogafish
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/



:root {   
    --color1: #ffffff; 
    --color2: #333333; 
    --color3: #789034; 
}

footer.site-footer,
#cont{
	display:none;
}

.selected{ background-color:#f17d3b; border-color:#f17d3b; }
body.night,
body.night html{background-color: var(--color1); }

h1,h2,h3,h4,h5,h6,p,label,th { color: var(--color2); }


/* GENTLE OPENING FOR EACH PAGE */

html{
  animation-name: open; animation-duration:.9s; animation-iteration-count: 1; animation-timing-function: ease-in; 
  -o-animation-name: open; -o-animation-duration:.9s; -o-animation-iteration-count: 1; -o-animation-timing-function: ease-in; 
  -moz-animation-name: open; -moz-animation-duration:.9s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: ease-in; 
  -webkit-animation-name: open; -webkit-animation-duration:.9s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in; 
  -ms-animation-name: open; -ms-animation-duration:.9s; -ms-animation-iteration-count: 1; -ms-animation-timing-function: ease-in; 
}
@-o-keyframes open { 0% { opacity:0;} 70% { opacity:0.8; } 100% { opacity:1;  display:block; }} 
@-moz-keyframes open { 0% { opacity:0;} 70% { opacity:0.8; } 100% { opacity:1;  display:block; }} 
@-webkit-keyframes open { 0% { opacity:0;} 70% { opacity:0.8; } 100% { opacity:1;  display:block; }} 
@-ms-keyframes open { 0% { opacity:0;} 70% { opacity:0.8; } 100% { opacity:1;  display:block; }} 
@keyframes open { 0% { opacity:0;} 70% { opacity:0.8; } 100% { opacity:1;  display:block; }} 




/* FONTS */

@font-face { font-family:'oswaldlight';
    src: url('font/oswald-light-webfont.woff2') format('woff2'),
         url('font/oswald-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family:'FontAwesome';
    src:url('font/fontawesome-webfont.eot');
    src:url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
        url('font/fontawesome-webfont.woff2') format('woff2'),
        url('font/fontawesome-webfont.woff') format('woff'),
        url('font/fontawesome-webfont.ttf') format('truetype'),
        url('font/fontawesome-webfont.svg#fontawesomeregular') format('svg');
    font-weight:normal;font-style:normal
    }
    .fa { display:inline-block; font:normal normal normal 14px/1 FontAwesome; font-size:inherit; text-rendering:auto;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
    }



@font-face {
    font-family:'open_sansregular';
    src: url('font/OpenSans-Regular-webfont.eot');
    src: url('font/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/OpenSans-Regular-webfont.woff2') format('woff2'),
         url('font/OpenSans-Regular-webfont.woff') format('woff'),
         url('font/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('font/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight:normal; font-style:normal;
}


@font-face {
    font-family:'neutra_text_tfbold_alt';
    src: url('font/neutra-webfont.woff2') format('woff2'),
         url('font/neutra-webfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;

}


@font-face {
  font-family: 'Montserratlightr';
  font-style: normal;
  font-weight:200;
  src: url("font/montserrat-regular-webfont.eot");
  src: url("font/montserrat-regular-webfont.eot?#iefix") format("embedded-opentype"), 
      url("font/montserrat-regular-webfont.woff2") format("woff2"), 
      url("font/montserrat-regular-webfont.woff") format("woff"), 
      url("font/montserrat-regular-webfont.ttf") format("truetype");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}


@font-face {
    font-family: 'robotoregular';
    src: url('font/Roboto-Regular-webfont.woff2') format('woff2'),
         url('font/Roboto-Regular-webfont.woff') format('woff'),
         url('font/Roboto-Regular-webfont.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;

}


@font-face { font-family:'quicksandregular';
    src: url('font/quicksand-regular-webfont.eot');
    src: url('font/quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/quicksand-regular-webfont.woff') format('woff'),
         url('font/quicksand-regular-webfont.ttf') format('truetype'),
         url('font/quicksand-regular-webfont.svg#quicksandregular') format('svg');
    font-weight:normal; font-style:normal; }




/* HOME PAGE HEADER */
.dotmatrix { width:100%; height:100%; position:absolute; top:0; right:0; left:0; bottom:0; z-index:1;
 background:url('img/pattern.png') repeat-x bottom left; opacity:0.06; }







.glow-on-hover { text-align: center;
    padding: 15px 30px; 
    border-radius: 30px;
    text-decoration: none !important; 
    font-weight: 600;
    width: fit-content;
    border: none;
    outline: none;
    color: #ddd;
    background: #555;
    cursor: pointer;
    position: relative;
    z-index: 0;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px; color: #fff;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 30px;
}

.glow-on-hover:active {
    color: #555
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:hover {
    color:#fff;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #555;
    left: 0;
    top: 0;
    border-radius: 30px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}











/* back to top */
.toTop:hover { opacity:0.7; }
.toTop { text-decoration:none; position:fixed; bottom:2%; right:2%; width:43px; height:43px; display:none; z-index:27;}




/* chinese lotus open */

.demo {
   margin: 27px auto;
   width: 400px;
}
.box {
   position: relative; 
   height: 300px;
	z-index:2;
}

.box .leaf {
   position: absolute;
}
.leaf {
   margin-top: 360px;
   width: 200px;
   height: 200px;
   border-radius: 300px 0px;
 background: rgb(175,66,66);
background: -moz-linear-gradient(270deg, rgba(175,66,66,1) 0%, rgba(9,9,121,1) 48%, rgba(0,212,255,1) 100%);
background: -webkit-linear-gradient(270deg, rgba(175,66,66,1) 0%, rgba(9,9,121,1) 48%, rgba(0,212,255,1) 100%);
background: linear-gradient(270deg, rgba(175,66,66,1) 0%, rgba(9,9,121,1) 48%, rgba(0,212,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#af4242",endColorstr="#00d4ff",GradientType=1); 
   opacity: 0.5;
   filter:alpha(opacity=50);
   transform: rotate(45deg);
   transform-origin:  top right;
}
@keyframes show-2 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(71deg);
    }
}
@keyframes show-3 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(96deg);
    }
}
@keyframes show-4 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(123deg);
    }
}
@keyframes show-5 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(149deg);
    }
}
@keyframes show-6 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(175deg);
    }
}
@keyframes show-7 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(200deg);
    }
}
@keyframes show-8 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(225deg);
    }
}  
.leaf:nth-child(2) {
  animation: show-2 5s ease-in-out forwards;
}
.leaf:nth-child(3) {
  animation: show-3 5s ease-in-out forwards;
}
.leaf:nth-child(4) {
  animation: show-4 5s ease-in-out forwards;
}
.leaf:nth-child(5) {
  animation: show-5 5s ease-in-out forwards;
}
.leaf:nth-child(6) {
  animation: show-6 5s ease-in-out forwards;
}
.leaf:nth-child(7) {
  animation: show-7 5s ease-in-out forwards;
}
.leaf:nth-child(8) {
  animation: show-8 5s ease-in-out forwards;
}