/**
Theme Name: Cosion Child
Author: ThemeOri
Author URI: https://themeforest.net/user/themeori/
Description: Child theme for the Cosion theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cosion-child
Template: cosion
*/

.header_nav-menu ul .menu-item > a{text-transform: uppercase !important;}
.header_nav-menu ul .menu-item:hover > a{ color: #ef4231 !important;}

.container{ max-width:1440px !important; padding:0px 20px !important;}

.elementor-11 .elementor-element.elementor-element-cf83d5d:hover{ background-color:#ff7f32;}
.elementor-11 .elementor-element.elementor-element-cf83d5d:hover .elementor-widget-image img{ filter: brightness(0) invert(1) !important;}
.elementor-11 .elementor-element.elementor-element-cf83d5d:hover .elementor-heading-title{ color: #FFF !important;}

.elementor-11 .elementor-element.elementor-element-23462fa:hover{ background-color:#ff7f32;}
.elementor-11 .elementor-element.elementor-element-23462fa:hover .elementor-widget-image img{ filter: brightness(0) invert(1) !important;}
.elementor-11 .elementor-element.elementor-element-23462fa:hover .elementor-heading-title{ color: #FFF !important;}

.elementor-11 .elementor-element.elementor-element-1b05151:hover{ background-color:#ff7f32;}
.elementor-11 .elementor-element.elementor-element-1b05151:hover .elementor-widget-image img{ filter: brightness(0) invert(1) !important;}
.elementor-11 .elementor-element.elementor-element-1b05151:hover .elementor-heading-title{ color: #FFF !important;}

.elementor-11 .elementor-element.elementor-element-8f569b1:hover{ background-color:#ff7f32;}
.elementor-11 .elementor-element.elementor-element-8f569b1:hover .elementor-widget-image img{ filter: brightness(0) invert(1) !important;}
.elementor-11 .elementor-element.elementor-element-8f569b1:hover .elementor-heading-title{ color: #FFF !important;}

.elementor-11 .elementor-element.elementor-element-ef23999:hover{ background-color:#2e5ac1;}
.elementor-11 .elementor-element.elementor-element-ef23999:hover .elementor-widget-image img{ filter: brightness(0) invert(1) !important;}
.elementor-11 .elementor-element.elementor-element-ef23999:hover .elementor-heading-title{ color: #FFF !important;}
.elementor-11 .elementor-element.elementor-element-ef23999:hover .elementor-widget-text-editor p{ color: #FFF !important;}

.elementor-11 .elementor-element.elementor-element-83988e3:hover{ background-color:#2e5ac1;}
.elementor-11 .elementor-element.elementor-element-83988e3:hover .elementor-widget-image img{ filter: brightness(0) invert(1) !important;}
.elementor-11 .elementor-element.elementor-element-83988e3:hover .elementor-heading-title{ color: #FFF !important;}
.elementor-11 .elementor-element.elementor-element-83988e3:hover .elementor-widget-text-editor p{ color: #FFF !important;}

.elementor-11 .elementor-element.elementor-element-80b0790:hover{ background-color:#2e5ac1;}
.elementor-11 .elementor-element.elementor-element-80b0790:hover .elementor-widget-image img{ filter: brightness(0) invert(1) !important;}
.elementor-11 .elementor-element.elementor-element-80b0790:hover .elementor-heading-title{ color: #FFF !important;}
.elementor-11 .elementor-element.elementor-element-80b0790:hover .elementor-widget-text-editor p{ color: #FFF !important;}

.elementor-11 .elementor-element.elementor-element-6a5b960:hover{ background-color:#2e5ac1;}
.elementor-11 .elementor-element.elementor-element-6a5b960:hover .elementor-widget-image img{ filter: brightness(0) invert(1) !important;}
.elementor-11 .elementor-element.elementor-element-6a5b960:hover .elementor-heading-title{ color: #FFF !important;}
.elementor-11 .elementor-element.elementor-element-6a5b960:hover .elementor-widget-text-editor p{ color: #FFF !important;}

.elementor-11 .elementor-element.elementor-element-38f947d:hover{ background-color:#2e5ac1;}
.elementor-11 .elementor-element.elementor-element-38f947d:hover .elementor-widget-image img{ filter: brightness(0) invert(1) !important;}
.elementor-11 .elementor-element.elementor-element-38f947d:hover .elementor-heading-title{ color: #FFF !important;}
.elementor-11 .elementor-element.elementor-element-38f947d:hover .elementor-widget-text-editor p{ color: #FFF !important;}

.elementor-11 .elementor-element.elementor-element-8c6ead3:hover{ background-color:#2e5ac1;}
.elementor-11 .elementor-element.elementor-element-8c6ead3:hover .elementor-widget-image img{ filter: brightness(0) invert(1) !important;}
.elementor-11 .elementor-element.elementor-element-8c6ead3:hover .elementor-heading-title{ color: #FFF !important;}
.elementor-11 .elementor-element.elementor-element-8c6ead3:hover .elementor-widget-text-editor p{ color: #FFF !important;}


.pg-hd{ text-align:center;}
.pg-hd h1{ position:relative; padding:0px 70px; font-size: 60px; display: inline-block; line-height: 1.2;}
.pg-hd h1:before{ position:absolute; content:""; left:0; top:15px; width:52px; height:52px; background:url("images/hd-left.png") no-repeat; animation: bounce-x 1s infinite linear;}
.pg-hd h1:after{ position:absolute; content:""; right:0; top:15px; width:52px; height:52px; background:url("images/hd-right.png") no-repeat; animation: bounce-x 1s infinite linear;}
.pg-hd h2{ position:relative; padding:0px 70px; font-size: 48px; display: inline-block; line-height: 1.2; color:#643A1B;}
.pg-hd h2:before{ position:absolute; content:""; left:0; top:15px; width:40px; height:40px; background:url("images/hd-left.png") no-repeat; background-size:40px; animation: bounce-x 1s infinite linear;}
.pg-hd h2:after{ position:absolute; content:""; right:0; top:15px; width:40px; height:40px; background:url("images/hd-right.png") no-repeat; background-size:40px; animation: bounce-x 1s infinite linear;}

#hm-hd{ position:relative;}
#hm-hd:after{ position:absolute; content:""; left:0; bottom:0px; width:100%; height:32px; background:url("images/back1.png") repeat-x; animation: waveMove 24s linear infinite;}
@keyframes waveMove {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 972px 0;
    }
}

#hm-hd2{ position:relative;}
#hm-hd2:after{ position:absolute; content:""; left:0; bottom:0px; width:100%; height:32px; background:url("images/back1.png") repeat-x; animation: waveMove 24s linear infinite;}
@keyframes waveMove {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 972px 0;
    }
}

#passing{ position:relative;}
#passing:before{ position:absolute; content:""; left:0; top:0px; width:100%; height:32px; background:url("images/back2.png") repeat-x; z-index: 1; animation: waveMove2 24s linear infinite;}
@keyframes waveMove2 {
    from {
        background-position: 972px 0;
    }
    to {
        background-position: 0 0;
    }
}

#hm-about{ position:relative;}

#tradition{ position:relative;}
#tradition:before{ position:absolute; content:""; left:0; top:0px; width:100%; height:32px; background:url("images/back2.png") repeat-x; z-index: 1; animation: waveMove2 24s linear infinite;}
@keyframes waveMove2 {
    from {
        background-position: 972px 0;
    }
    to {
        background-position: 0 0;
    }
}
.tradition-bx{ max-width:240px !important; left: 150px; bottom: 100px; animation: roundmove 4s infinite linear;}
@keyframes roundmove {
    0%   { transform: translate(0,0); }
    25%  { transform: translate(15px,-15px); }
    50%  { transform: translate(0,-30px); }
    75%  { transform: translate(-15px,-15px); }
    100% { transform: translate(0,0); }
}

.snacks-hd{ text-align: center !important; margin: auto; position: relative; top: -20px;}
.snacks-hd img{ max-width:400px;}
#snack-bg1{ position:relative; background:url("images/snacks-back1.jpg") #fff7eb no-repeat; background-size:100%; background-position: center center;}

.bounce_y2 {
	animation: bounce-y2 2s infinite linear;
}
.bounce_x2 {
	animation: bounce-x2 2s infinite linear;
}

@keyframes bounce-y2 {
    0% {        
        transform: translateY(0);
    }
    50% {        
        transform: translateY(15px);
    }
    100% {        
        transform: translateY(0);
    }
}
@keyframes bounce-x2 {
    0% {        
        transform: translateX(0);
    }
    50% {        
        transform: translateX(-5px);
    }
    100% {        
        transform: translateX(0);
    }
}

.snack-bx{ width:100%; height:100%;}
.snack_item1{ position:absolute; left:10%; top:30%;}
.snack_item1 img{ width:80px;}
.snack_item2{ position:absolute; left:10%; bottom:20%;}
.snack_item2 img{ width:30px;}
.snack_item3{ position:absolute; left:45%; top:60%;}
.snack_item3 img{ width:90px;}
.snack_item4{ position:absolute; right:10%; top:25%;}
.snack_item4 img{ width:60px;}
.snack_item2b{ position:absolute; left:45%; top:10%;}
.snack_item2b img{ width:30px;}
.snack_item5{ position:absolute; left:45%; top:45%;}
.snack_item5 img{ width:60px;}
.snack_item5b{ position:absolute; right:15%; top:50%;}
.snack_item5b img{ width:60px;}
.snack_item6{ position:absolute; right:15%; top:10%;}
.snack_item6 img{ width:60px;}

#snack-bg2{ position:relative; background:url("images/snacks-back2.jpg") #fff7eb no-repeat; background-size:100%; background-position: top center;}

#hm-hd2{ position:relative;}
#hm-hd2:after{ position:absolute; content:""; left:0; bottom:0px; width:100%; height:32px; background:url("images/back1.png") repeat-x; animation: waveMove 24s linear infinite;}
@keyframes waveMove {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 972px 0;
    }
}

#passing{ position:relative;}
#passing:before{ position:absolute; content:""; left:0; top:0px; width:100%; height:32px; background:url("images/back2.png") repeat-x; z-index: 1; animation: waveMove2 24s linear infinite;}
@keyframes waveMove2 {
    from {
        background-position: 972px 0;
    }
    to {
        background-position: 0 0;
    }
}

#sub-banner{ position:relative;}
#sub-banner:after{ position:absolute; content:""; left:0; bottom:0px; width:100%; height:32px; background:url("images/back4.png") repeat-x; animation: waveMove 24s linear infinite;}
@keyframes waveMove {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 972px 0;
    }
}

.where-buy{ margin:15px 0px;}
.where-buy h3{ font-size:24px; line-height:30px; padding-bottom: 10px; color:#111;}
.buy-btn{ display:inline-block; margin:0px 10px 10px 0px; color:#fff; text-decoration:none; border-radius:6px;}
.buy-btn img{ width: 120px;}
.buy-btn img:hover{transform:scale(1.1);}

.summary.entry-summary .product_title{ color:#ef4231 !important;}
.theme_breadcrumb__area{ position:relative; padding: 200px 0px 70px 0px !important; background:#f8b917 !important;}
.theme_breadcrumb__area:after{ position:absolute; content:""; left:0; bottom:0px; width:100%; height:32px; background:url("images/back4.png") repeat-x; animation: waveMove 24s linear infinite;}
@keyframes waveMove {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 972px 0;
    }
}

#about1{ position:relative;}
#about1:after{ position:absolute; content:""; left:0; bottom:0px; width:100%; height:32px; background:url("images/back1.png") repeat-x; animation: waveMove 24s linear infinite;}
@keyframes waveMove {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 972px 0;
    }
}

#about2{ position:relative;}

#about3{ position:relative;}
#about3:before{ position:absolute; content:""; left:0; top:0px; width:100%; height:32px; background:url("images/back2.png") repeat-x; z-index: 1; animation: waveMove2 24s linear infinite;}
@keyframes waveMove2 {
    from {
        background-position: 972px 0;
    }
    to {
        background-position: 0 0;
    }
}
.about-bx1{ position: absolute; top: 50% !important; transform: translate(0px, -50%) !important; margin: auto !important; width: 70%; left: 15% !important;}
.about-bx1 h4{ color:#FFF; padding-bottom:15px;}
.about-bx2{ position: absolute; top: 50% !important; transform: translate(0px, -50%) !important; margin: auto !important; width: 70%; left: 15% !important;}
.about-bx2 h4{ color:#FFF; padding-bottom:15px;}

.elementor-widget-flexitype-contact-form7 label{ width: 100%;}

footer{ position:relative;}
footer:after{ position:absolute; content:""; left:0; top:0px; width:100%; height:32px; background:url("images/back3.png") repeat-x; animation: waveMove 24s linear infinite;}
@keyframes waveMove {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 972px 0;
    }
}
.footer-bx{ margin:auto; width:60%;}



@media screen and (min-width: 300px) and (max-width: 399px){


}




@media screen and (min-width: 1000px) and (max-width: 1099px){
.elementor-23 .elementor-element.elementor-element-6ab332d a img{ max-width:240px;}
.pg-hd h1{ font-size:50px;}
.footer-bx{ width:80%;}

}

@media screen and (min-width: 1100px) and (max-width: 1199px){
.elementor-23 .elementor-element.elementor-element-6ab332d a img{ max-width:240px;}
.pg-hd h1{ font-size:50px;}
.footer-bx{ width:80%;}

}

@media screen and (min-width: 1200px) and (max-width: 1299px){
.elementor-23 .elementor-element.elementor-element-6ab332d a img{ max-width:240px;}
.pg-hd h1{ font-size:50px;}
.footer-bx{ width:80%;}

}