/*
Theme Name: Altowin
Theme URI: https://www.altowin.be
Author: cre8ives
Author URI: https://www.cre8ives.be/
Description: Het thema Altowin werd in 2022 ontwikkeld door cre8ives te Aalst.
Version: 1.0
Text Domain: cre8ives
*/
body {
    font-family: montserrat, sans-serif;
    font-weight: 300;
    color: #000000;
}
body, html {
    overflow-x: hidden;
    width: 100%;
}
h2.woocommerce-loop-product__title {
    min-height: 55px;
}
.hero {
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	background-image:url(/wp-content/themes/altowin/images/altowin_bg.png);
	background-size:cover;
	background-position:right;
}
.container {
    margin: auto!important;
}
.menu svg, .menu-wrap svg {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 20px;
    top: 20px;
	z-index:99999;
}
.menu svg path, .menu-wrap svg path {
    fill: #FFF!important;
}
h1, h2 {
    font-family: ethnocentric, sans-serif;
    font-weight: 500;
}
h2 {
    font-size: 28px;
	line-height:50px;
}
h3 {
    font-weight: 600;
    font-size: 23px;
	color: #242749;
}
p {
	line-height:30px;
}
.woocommerce li {
font-size:15px;}
b, strong {
font-weight: 600;}
.kleursectie h2, .kleursectie p {
	color: #FFF;
}
.hero h1 {
  	color: #FFF;
  	font-size: 50px;
	line-height: 75px;
}
.light {
  	font-weight: 300;
	margin-left:65px;
}
.extralight {
  	font-weight: 200;
}
.regular {
	margin-left:150px;
}
.logo {
  	position: absolute;
  	top: 20px;
  	left: 20px;
}
.menu-wrap {
    position: fixed;
    top: 0;
    right: -220%;
    height: 100vh;
    width: fit-content;
    background-image: url(/wp-content/uploads/2023/04/menu-bg.jpg);
	background-size:cover;
    padding: 20px;
	opacity:0;
	border-left: 3px solid #000;
	z-index:9999999999;
}
ul#menu-main {
    padding-inline-start: 0;
    list-style: none;
}
#menu-main li {
    font-family: ethnocentric, sans-serif;
    font-weight: 500;
    font-size: 30px;
    padding: 20px 10px;
    margin-right: 100px;
}
#menu-main li a { 
	color:#FFF;
	text-decoration:none;
}
a  {
    color: #000000;
}
a:hover  {
    color: #000000;
    text-decoration-line: underline;
}
span.scrollhelp {
    position: absolute;
    bottom: 100px;
    width: 100%;
    text-align: center;
    color: #FFF;
    font-family: 'ethnocentric';

}
span.scrollhelp::after {
    position: absolute;
    width: 25px;
    height: 35px;
    background-image: url(/wp-content/themes/altowin/images/mouse.png);
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    left: calc( 50% - 13px );
    top: 30px;
	animation-name: mouseAnim;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-play-state: running;
    -webkit-animation-name: mouseAnim;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
}
.customThumbs img.vc_single_image-img.attachment-medium {
    height: 160px;
}
section.altowinDiv {
    background-position: right!important;
}
.kleurSectie {
    margin-bottom: 50px!important;
}
.wpb_wrapper li {
    list-style: none;
    margin-bottom: 10px;
}
.wpb_wrapper li::before {
    content: '';
    position: absolute;
    background: url(/wp-content/themes/altowin/images/altowin-list.png);
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: -25px;
    margin-top: 5px;
}
.footer-logo {
	max-width:100%;
}
section.vc_section.kleursectie.vc_custom_1664368568318.vc_section-has-fill {
    background-position: right!important;
}
footer {
	padding-bottom:25px;
}
li.product {
    background-color: #FFF;
}
.product h2, .product p, .product .price {
    color: #000!important;
    margin: 0 15px!important;
}
.product .price {
    font-size: 18px!important;
}
.product p {
    font-size: 15px;
}
h2.woocommerce-loop-product__title {
    line-height: 17.5px;
	margin-bottom: 20px!important;
}
a.button.add_to_cart_button {
    width: 50%;
    background-color: #d42525;
    border-radius: 0;
    font-weight: 100;
    font-size: 14px;
    padding: 15px;
	background-image:url(/wp-content/uploads/2023/01/add2cart.png);
	background-repeat: no-repeat;
    background-position: 93%;
    color: #FFF;
	line-height: 1.5;
	    text-align: right;
    padding-right: 35px;
}
a.more-info {
    width: 50%;
    background-color: #242749;
    border-radius: 0;
    font-weight: 100;
    font-size: 14px;
    padding: 15px;
    color: #FFF;
    position: absolute;
    bottom: 0;
    right: 0;
	background-image:url(/wp-content/uploads/2023/01/info.png);
	background-repeat: no-repeat;
    background-position: 93%;
	    text-align: right;
    padding-right: 35px;
}
a.add_to_cart_button::after, a.more-info::after {
    content: "";
	background-image:url(/wp-content/uploads/2023/01/triangle.png);
	background-size:contain;
	background-position:top left;
	background-repeat:no-repeat;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
}
span.right.hartritme {
    float: right;
    font-family: 'montserrat';
    font-size: 13px;
	position:relative;
}
span.right.hartritme a {
    color:#FFF;
	text-decoration:none!important;
}
span.right.hartritme:before {
    content: "";
    background-image: url(/wp-content/uploads/2023/03/hartritme.png);
    position: absolute;
    left: -30px;
    top: 40%;
    width: 25px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
}
button.single_add_to_cart_button.button.alt.wp-element-button, button#place_order, .altoBtn, input.wpcf7-form-control.has-spinner.wpcf7-submit {
    background-color: #d42525;
    border-radius: 0;
    font-weight: 100;
    font-size: 14px;
    padding: 15px;
    background-image: url(/wp-content/uploads/2023/01/add2cart.png);
    background-repeat: no-repeat;
    background-position: 93%;
    color: #FFF;
    text-align: right;
    padding-right: 40px;
}
button#place_order, .altoBtn, input.wpcf7-form-control.has-spinner.wpcf7-submit  {
    background-image: url(/wp-content/uploads/2023/03/hartritme.png);
	padding-right: 55px;
	border: 0!important;
}
header {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
    background-position: right !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    margin-bottom: 50px;
}
header.title {
    background: none!important;
}
p#breadcrumbs, p#breadcrumbs a  {
    margin: 0!important;
    color: #FFF!important;
	font-size:13px!important;
}
.woocommerce-product-details__short-description {
    margin: 25px auto;
}
.price bdi {
    font-family: ethnocentric, sans-serif;
    font-size: 20px;
    font-weight: 400;
}
.wpb_wrapper label {
    white-space: nowrap;
}
p.form-row-first, p.form-row-last {
    width: 100%!important;
}
.woocommerce-billing-fields label {
    margin-right: 15px;
}
.woocommerce-billing-fields .form-row {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap!important;
}
span.woocommerce-input-wrapper {
    width: -webkit-fill-available;
}
.woocommerce-input-wrapper input, .woocommerce-input-wrapper textarea {
    background-color: #f2f2f2;
    border: 0;
    padding: 5px;
}
.wpb_wrapper .woocommerce li::before {
	display:none;
}
footer p {
    font-size: 14px;
    line-height: 22px;
}
section.related.products {
    display: inline-block;
	width:100%;
}
.customThumbs figure.wpb_wrapper.vc_figure {
    min-height: 165px;
}
span.tax {
    font-size: 13px;
}
.tijdsduur li::before {display:none}
.tijdsduur li, .tijdsduur li.selected, .tijdsduur li:hover {
    margin: 10px 0;
}
.bgSection h2, .bgSection p, .bgSection label {
	color: #FFF;
}
input.wpcf7-form-control, textarea.wpcf7-textarea {
    width: 100%;
    border: 0;
    color: #000;
    padding: 6px;
    background-color: #FFF;
}
form label {
width:100%}
input.wpcf7-form-control.has-spinner.wpcf7-submit {
    width: fit-content;
}
.wielercoach-form {
    margin: auto;
    width: 80%;
}
a.backShop {
    position: absolute;
    left: 0;
    top: 0;
    margin-top: -25px;
}
input#startdatum, input#tijdsduur, input#prijs {
    visibility: hidden;
}
@keyframes mouseAnim {
   0% {
       transform: translate(0px, 0px);
       animation-timing-function:ease-in-out
   }
	10% {
       transform: translate(0px, 0px);
       animation-timing-function:ease-in-out
   }
   50% {
       transform: translate(0px, 12px);
       animation-timing-function:ease-in-out
   }
90% {
       transform: translate(0px, 0px);
       animation-timing-function:ease-in-out
   }
   100% {
       transform: translate(0px, 0px);
       animation-timing-function:ease-in-out
   }
}

@-webkit-keyframes mouseAnim {
   0% {
       -webkit-transform: translate(0px, 0px);
       -webkit-animation-timing-function:ease-in-out
   }
   10% {
       -webkit-transform: translate(0px, 0px);
       -webkit-animation-timing-function:ease-in-out
   }
   50% {
       -webkit-transform: translate(0px, 12px);
       -webkit-animation-timing-function:ease-in-out
   }
90% {
       -webkit-transform: translate(0px, 0px);
       -webkit-animation-timing-function:ease-in-out
   }
   100% {
       -webkit-transform: translate(0px, 0px);
       -webkit-animation-timing-function:ease-in-out
   }
}

@media only screen and (max-width: 1200px) {
a.button.add_to_cart_button, a.more-info {
    width: 100%;
    display: block;
		position:relative;
	    padding-right: 45px;
	}
	span.tax {
    position: absolute;
}
}
@media only screen and (max-width: 767px) {
  h1 {
    font-size: 23px;
}
	.logo img {
    max-width: 200px;
}
	.hero h1 {
  	color: #FFF;
  	font-size: 36px;
	line-height: 65px;
}
	header {
    background-position: right!important;
}
.light {
  	font-weight: 300;
	margin-left:25px;
}
.extralight {
  	font-weight: 200;
}
.regular {
	margin-left:60px;
}
.logo {
    left: 0;
    text-align: left;
    width: fit-content!important;
    padding-left: 15px;
}
	.hero {
    background-position: -50%;
}
	.menu-wrap {
    right: -220%;
}
	
	#menu-main li {
    font-size: 25px;
}
}