/*
 Theme Name:     Myyntimaatio
 Theme URI:      https://myyntimaatio.fi
 Description:    Myyntimaation Hello Themen lapsiteema.
 Author:         Myyntimaatio
 Author URL:     https://myyntimaatio.fi
 Template:       hello-elementor
 Version:        2.1.3
*/


/* --- Fonts --- */x

h1, h2, h3, h4 {
	font-family: "Roboto", Sans-serif;
    font-weight: 400;
	text-transform: uppercase;
	line-height: 1.7em;
	color: #000;
}

h1 {
    font-size: 1.5em;
    letter-spacing: 7px;
}

h2 {
    font-size: 1.2em;
    letter-spacing: 5px;
}

h3 {
	font-size: 1em;
	letter-spacing: 5px;
}

h4 {
	font-size: .9em;
	letter-spacing: 5px;
}

h5 {
	font-family: "Ubuntu", sans-serif;
	font-size: 1.3em;
	letter-spacing: 2px;
	font-weight: 400;
}

h6 {
	font-size: 1.1em;
	letter-spacing: 4px;
	font-weight: 400;
	line-height: 1.5em !important;
}

p {
	font-family: "Open Sans", Sans-serif;
	font-size: 1rem;
	font-weight: 400;
}


/* --- Links --- */

.elementor a {
	color: #F1911F;
}

.elementor a:hover {
	color: #DDDA1A;
}


/* --- Buttons --- */

.elementor-button {
	font-family: "Roboto", Sans-serif;
	font-weight: 400;
	font-size: 1.1em !important;
	padding: .8em !important;
}

.elementor-button:hover {
	color: #fff !important;
}

.mm-square-btn .elementor-button {
	background-color: #DDDA1A !important;
	color: #fff;
	border-radius: 0 !important;
	margin: 2px;
}

.mm-square-btn .elementor-button:hover {
	background: #DDDA1ABF !important;
}

.mm-square-btn .elementor-button-content-wrapper {
	width: 200px;
}



/* --- Header --- */

.mm-slider .swiper-pagination-bullet-active {
	background-color: #DDDA1A !important;
}


.mm-header-home {
	height: 70vh;
	min-height: 250px;
	max-height: 730px;
}

/* Elämys Asunnot logo */

.mm-logo img {
	min-width: 225px;
}

/* Fullwidth section with margin on the sides */
.mm-background {
	margin: 0px 80px 100px 80px;
}



/* --- Map - Distances icon list--- */

.mm-distances .elementor-icon-list-text {
	font-family: "Ubuntu", Sans-serif;
	letter-spacing: 2px;
	font-size: 1em;
	color: #000;
}


/* --- Contact - person --- */

.mm-person p {
	font-family: "Ubuntu", sans-serif;
	font-size: 1.1rem;
	color: #000 !important;
	letter-spacing: 2px;
}


.mm-person a {
	color: #000;
}

.mm-person a:hover {
	color: #DDDA1A;
}

.mm-person .elementor-image-box-img{
	text-align: left;
}

.mm-person .elementor-image-box-content {
	padding: 10px 20px 10px 10px;
}



/* --- Mailchimp --- */

#mc_embed_signup {
	background: transparent !important;
}

#mc_embed_signup .mc-field-group {
	width: 100% !important;
	padding-bottom: 0 !important;
}

/* Input & label */
#mc_embed_signup .mc-field-group label {
	margin-bottom: 10px !important;
	font-family: "Ubuntu", Sans-serif;
	font-size: 1rem;
	font-weight: 400;
	color: #000;
	margin-left: 10px;
}

#mc_embed_signup input {
	-webkit-appearance: none;
}

#mc_embed_signup .mc-field-group input[type="email"] {
	padding: 0;
	background: rgba(255,255,255, .5);
	border: 3px solid #fff;
	border-radius: 0;
	margin: 10px 0 15px 0;
	width: 60% !important;
	height: 60px;
	min-width: 450px;
}

/* Required error */

#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
	background-color: transparent !important;
	margin: 2px 0 0 0 !important;
}

/* GDPR */

#mc_embed_signup .content__gdpr {
	width: 60%;
}

/* GDPR text */

#mc_embed_signup .content__gdpr label {
	font-size: .9rem !important;
}

#mc_embed_signup p {
	font-family: "Open Sans",sans-serif;
	font-size: 14px;
	color: #575756;
	line-height: 1.5em;
	font-weight: 400;
}

/* Button */

#mc_embed_signup .button {
	height: unset !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	font-family: "Open Sans", Sans-serif !important;
	font-size: 1.1em !important;
	padding: .8em 3.2em !important;
	border-radius: 20px 0px !important;
	background: #DDDA1A !important;
	color: #fff !important;
	border: none !important;
}

#mc_embed_signup .button:hover {
	background: #F1911F !important;
}

/* --- Contact form --- */

/* Labels & input */

.wpcf7 label {
	font-family: "Ubuntu", Sans-serif;
	font-size: 1rem;
	font-weight: 400;
	color: #000;
	margin-left: 10px;
}

.wpcf7-list-item-label {
	font-family: "Open Sans",sans-serif;
	font-size: 15px;
	color: #575756;
	margin-left: 20px;
	line-height: 1.5em;
}

span.wpcf7-list-item, span.wpcf7-list-item label {
	margin: 5px 0 10px 0;
}

.wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="text"], .wpcf7 textarea {
	border: 3px solid #E6E6E6;
    border-radius: 0;
    margin: 10px 0 15px 0;
	width: 60%;
	height: 60px;
	min-width: 450px;
	-webkit-appearance: none;
}

/* Button */

.wpcf7-submit {
	padding: .8em 3.2em;
	border-radius: 20px 0px;
	background: #DDDA1A;
	color: #fff;
	font-size: 1.1em;
	border: none;
}

.wpcf7-submit:hover, .wpcf7-submit:focus {
	background: #F1911F;
}

/* --- Video --- */

.mm-video-col {
	width: 60% !important;
	margin: 0 auto;
}


/* --- Footer --- */

.mm-footer .mm-text {
	letter-spacing: 6px !important;
}

.mm-footer .mm-credit p {
	letter-spacing: 6px !important;
	font-size: .8rem;
}

.mm-footer a {
	color: #575756;
}


.mm-footer a:hover {
	color: #DDDA1A;
}

.mm-footer-logo img {
	min-width: 190px;
}



/* --- Responsive --- */


@media all and (min-width:1025px) and (max-width:1350px) {
	
	/* Buttons */ 
	.mm-square-btn .elementor-button-content-wrapper {
    	width: 140px;
	}
	
	/* Gallery of 3 images */
	
	.mm-top-img img {
		min-height: 550px;
		object-fit: cover;
		object-position: center right;
	}
	
	.mm-bottom-img img {
		min-height: 230px;
		object-fit: cover;
		object-position: center;
	}
	
}


@media all and (min-width:1025px) and (max-width:1200px) {
	
	/* Contact form & Mailchimp */
	.wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="text"], .wpcf7 textarea, 
	#mc_embed_signup .mc-field-group input[type="email"] {
		min-width: 320px;
	}
	
	.elementor-element.mm-person-txt-col {
		width: 100% !important;
	}
	.elementor-element.mm-person-img-col {
		width: 100% !important;
	}
	
}


@media all and (max-width:1024px) {
	
	/* --- Video --- */

	.mm-video-col {
		width: 100% !important;
		margin: 0 auto;
	}
	
	.mm-bottom-img img, .mm-top-img img {
		height: 45vh;
		min-height: 300px;
		object-fit: cover;
		object-position: center;
	}
	
		/* Fonts */
	
	h1 {
		font-size: 1.3em !important;
		letter-spacing: 5px !important;
	}
	
	h2 {
		font-size: 1.1em !important;
	}
	
	h3 {
		font-size: 1em;
		letter-spacing: 5px;
	}

	h4 {
		font-size: .9em;
	}

	h5 {
		font-size: .9em;
	}

	h6 {
		font-size: 1em;
	}
	
	
}


@media all and (min-width: 768px) and (max-width: 1024px) {
	

	/* Buttons */
	
	.mm-square-btn .elementor-button  {
		width: 48vw;
	}
	
	.mm-square-btn .elementor-button-content-wrapper  {
		width: 98%;
	}
	
	/* Header */
	
	.mm-header-home {
		max-height: unset;
	}
	
	/* Fullwidth section with margin on the sides */
	
	.mm-background {
		margin: 0px 40px 60px 40px;
	}
	
	/* --- Map - Distances icon list--- */
	
	.mm-distances .elementor-icon-list-text {
    	padding-left: 18px !important;
	}
	
	/* --- Contact form & Mailchimp --- */
	
	.wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="text"], .wpcf7 textarea,
	#mc_embed_signup .mc-field-group input[type="email"]{
		width: 100% !important;
		height: 50px;
		min-width: 250px;
	}
	
	#mc_embed_signup .content__gdpr {
		width: 90%;
	}
}


@media all and (max-width: 767px) {
	
	
	/* --- Buttons --- */
	.mm-square-btn .elementor-button-content-wrapper {
		width: 100%;
	}
	
	.mm-square-btn .elementor-button {
		width: 48vw;
	}
	
	.mm-background {
		margin: 0px 15px 50px 15px;
	}
	
	/* --- Contact form & Mailchimp --- */
	
	.wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="text"],
	#mc_embed_signup .mc-field-group input[type="email"]{
		width: 100% !important;
		min-width: unset !important;
	}
	
	#mc_embed_signup .content__gdpr {
		width: 100%;
	}
	
	#mc_embed_signup form {
		padding: 40px 0 !important;
	}
	
	/* --- Columns with images --- */
	
	.mm-img-col {
		height: 80vh;
		min-height: 450px;
	}
	
	/* --- Elämys Asunnot logo --- */

	.mm-logo img {
		max-width: 225px;
	}
	
	/* --- Site logo - header --- */
	
	.mm-site-logo img {
		max-width: 60px;
	}
	
	/* --- Person text column --- */
	
	.mm-person-txt-col {
		max-width: 250px;
		margin: 0 auto;
	}
	
	
}