/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
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
*/

/*
    Add your custom styles here
*/

@media (max-width: 1555px) {
	#home {
		/*background-size: contain;
		height: calc((1418 * 100vw) / 1450);*/
		background-size: 84vw;
		height: calc((1418 * 84vw) / 1450);
	}
	#home > .elementor-container {
		min-height: calc((1418 * 84vw) / 1450);
	}
	
	#home-and-about {
		background-size: 95%;
		/*height: calc((2867 * 95vw) / 1291);*/
		background-position: 11% top !important;
	}
	#home-and-about > .elementor-container {
		min-height: 100%;
	}
	
	
	#green-avatar {
		left: 7%;
	}
	
	#red-avatar {
		left: 38%;
		top: 16vh;
	}
	
	#purple-avatar {
		left: 68%;
		top: 42vh;
	}
	
	
	
	
	#features-section {
		/*background-size: contain;
		height: calc((3308 * 100vw) / 1438);*/
		background-size: 91vw;
		height: calc((3308 * 91vw) / 1438);
		background-position: 3vw top !important;
	}
	#features-section > .elementor-container {
		min-height: auto;
		height: 100%;
	}
	
	
	
	#about-section {
		/*background-size: contain;
		height: calc((521 * 100%) / 563);
		background-position: 7vw 5% !important;*/
		background-size: 30vw;
		background-position: 7vw 87% !important;
		height: 30vw;
	}
	#about-section > .elementor-container {
		min-height: 100%;
	}
	
	
	#ringo-title,
	#ringo-description,
	#ringo-button {
		right: 20px;
	}
	
	
	.elementor-widget-accordion .elementor-accordion-item .elementor-tab-content {
		max-height: 400px;
		overflow: auto;
	}
}



@media(max-width: 767px) {
	#home {
		/*height: calc((1418 * 100vw) / 1450 + 200px);*/
		background-position-y: 200px;
		background-size: contain;
		background: none;
		height: auto;
	}
	
	#ringo-button {
		left: 20px;
		right: auto;
	}
	
	#green-avatar {
		left: 6%;
		top: 29vh;
	}
	
	#red-avatar {
		left: 38%;
		top: 34vh;
	}
	
	#purple-avatar {
		left: 68%;
		top: 39vh;
	}
	
	
	#about-section {
		background-size: calc((521 * 69%) / 563);
		height: calc((521 * 69vw) / 563 + 270px);
		background-position: -4% bottom !important;
	}
	
	
	#purple-hotspot {
		right: 10%;
	}
	#red-hotspot  {
		right: 60%;
	}
	#green-hotspot {
		right: 80%;
	}
	
	#advantages {
		transform: none;
		top: calc((1418 * 100vw) / 1450 + 220px);
		left: 20px;
		right: 20px;
	}
	
	#features-carusel .slide-image > .elementor-widget-container {
		width: 90vw;
		height: calc((337 * 90vw) / 615);
		background-size: cover;
		background-position-x: 50%; 
		padding: 4% 6% 0 6%;
	}
	#features-carusel .slide-image > .elementor-widget-container img {
		width: 100%;
		height: auto;
	}
	#features-carusel .elementor-swiper-button.elementor-swiper-button-prev {
		/*right: 20%;*/
		right: 255px;
		bottom: -100px;
	}
	#features-carusel .elementor-swiper-button.elementor-swiper-button-next {
		/*left: 20%;
		right: auto;*/
		right: 365px;
		left: auto;
		bottom: -100px;
	}
	
	
	#home-and-about {
		background-image: none;
	}
	
	#features-section {
		background-image: none;
		height: auto;
	}
	
	.elementor-counter {
		text-align: center;
	}
	
	#chat-section {
		background-image: none;
	}
	#chat-section > .elementor-container {
		min-height: 100%;
	}
	
	
}



@media(min-width: 767px) and (max-width: 1366px) {
	#home-and-about {
		/*height: calc((2867 * 95vw) / 1291);*/
		height: calc((2867 * 84vw) / 1291);
		background-size: 84vw;
		background-position: center top !important;
	}
	
	
	#features-section {
		max-height: 365px;
	}
	
	#features-carusel article section section > .elementor-container > .elementor-column:first-child {
		width: 63%;
	}
	#features-carusel article section section > .elementor-container > .elementor-column:last-child {
		width: 37%;
	}
	
	#features-carusel article section section > .elementor-container > .elementor-column:first-child > .elementor-element-populated {
		padding-top: 0;
	}
	
	#features-carusel .slide-image > .elementor-widget-container {
		width: 36vw;
		height: calc((337 * 36vw) / 615);
		background-size: cover;
		background-position-x: 50%; 
		padding: 4% 6% 0 6%;
	}
	#features-carusel .slide-image > .elementor-widget-container img {
		width: 100%;
		height: auto;
	}
	
	#features-carusel .elementor-swiper-button.elementor-swiper-button-prev {
		right: 20%;
	}
	#features-carusel .elementor-swiper-button.elementor-swiper-button-next {
		left: 55%;
		right: auto;
	}
	
	
	
	
	
	#chat-section {
		background-position: top center;
	}
}