@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700');

	html, body {
		background: #FFF;
		width: 100%;
		margin: 0;
	}
		
	body {
		background: #FFF;	
	}

	header {
		width: 100%;
		height: auto;
		position: relative;
		margin: 0 ;
		text-align: center;
	}
		
	#logo {
		width: 100%;
		height: 70px;
        padding: 15px 0;
        background: #000 url(../assets/img/logo.svg) center no-repeat;
        background-size: auto 70px; 
		margin: 0 auto;
    }
    
    .logomci {
		width: 100%;
		height: 90px;
        margin: 30px 0 15px 0 !important;
        background-size: auto 90px; 
        background-position: center;
        background-repeat: no-repeat;
		margin: 0 auto;
    }
    
    .santiago {
        background-image: url(logo-mci-santiago.svg);
    }
    
    .laserena {
        background-image: url(logo-mci-laserena.svg);
    }
    
    .vinadelmar {
        background-image: url(logo-mci-vina.svg);
    }
    
    .talca {
        background-image: url(logo-mci-talca.svg);
    }
    
    .constitucion {
        background-image: url(logo-mci-consti.svg);
	}

	#banner {
		position: relative;
		width: 100%;
		height: auto;
		background: #333 center no-repeat;
    }
    
    .video-container {
	        position: relative;
	        background: #222;
	        padding-bottom: 46%;
	        padding-top: 30px; height: 0; overflow: hidden;
        }
         
        .video-container iframe,
        .video-container object,
        .video-container embed,
		.video-container img,
		.video-container video {
	        position: absolute;
	        top: 0;
	        left: 0;
	        width: 100%;
	        height: 100%;
	    }

    .video-container-youtube {
	        position: relative;
	        background: #222;
	        padding-bottom: 46%;
	        padding-top: 30px; height: 0; overflow: hidden;
        }
         
        .video-container-youtube iframe,
        .video-container-youtube object,
        .video-container-youtube embed,
		.video-container-youtube img,
		.video-container-youtube video {
	        position: absolute;
	        top: 0;
	        left: 0;
	        width: 100%;
	        height: 100%;
	    }

    @media only screen and (min-width: 1000px) {
		.video-container {
	    	position: relative;
	        padding-bottom: calc(100vw / 16 * 9);
	        padding-top: 0px; height: 0; overflow: hidden;
        }

        .video-container iframe,
        .video-container object,
        .video-container embed,
		.video-container img,
		.video-container video {
	        position: absolute;
	        top: 0;
	        left: 0;
	        width: 100%;
	        height: 100%;
        }

		.video-container-youtube {
	    	position: relative;
	        padding-bottom: calc(((100vw - 400px) / 16) * 9);
	        padding-top: 0px; height: 0; overflow: hidden;
        }

        .video-container-youtube iframe,
        .video-container-youtube object,
        .video-container-youtube embed,
		.video-container-youtube img,
		.video-container-youtube video {
	        position: absolute;
	        top: 0;
	        left: calc(50% - ((100vw - 400px) / 2));
	        width: calc(100vw - 400px);
	        height: calc(((100vw - 400px) / 16) * 9);
        }

        .vcfix {
        	padding-bottom: calc((100vw / 16 * 9) - 50px);
        }

        .vcfix iframe,
        .vcfix object,
        .vcfix embed,
		.vcfix img,
		.vcfix video {
        	height: calc((100vw / 16 * 9) - 30px) !important;
        }

    }

	#frase {
		position: relative;
		width: calc(100% - 400px);
		height: auto;
		padding: 40px 200px 0 200px;
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
        font-weight: 600;
        text-align: center;
        font-size: 24px;
	}

	#frase h4 {
		font-family: 'Montserrat', Arial, Helvetica, sans-serif;
		font-weight: 700;
		margin: 0 0 20px 0;
		font-size: 28px;
	}

	#frase p {
		color: #718096;
		font-family: 'Montserrat', Arial, Helvetica, sans-serif;
		font-weight: 500;
		line-height: 1.6em;
		margin: 15px 0;
	}

	.rack {
		width: 100%;
		padding: 0;
	    display: -webkit-flex; /* Safari */
	    -webkit-flex-flow: row wrap; /* Safari 6.1+ */
	    display: flex;
	    flex-flow: row wrap;
	    padding-bottom: 40px;
	}

	.red {
		height: auto;
		text-align: center;
		padding: 30px;
		transition: all ease-in-out 0.2s;
		border: 2px #ccc solid;
		color: #333;
		text-transform: uppercase;
		font-size: 21px;
		font-weight: 700;
        text-decoration: none;
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
        background: #fff;
        border-radius: 10px;
        margin: 20px;

	}

	.red:hover{
        background: #2373e2;
        border: 2px #2373e2 solid;
		color: #FFF;
		transition: all ease-in-out 0.2s;
    }
    
    .redTotal {
        width: 100%;
    }

    .redCuartos {
        width: calc( (100% - (104px * 2) ) / 2 )
    }

    h2 {
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
        font-size: 22px;
    }

    h3 {
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
        padding: 50px 0 15px 0;
    }

	article {
		width: 980px;
		padding: 0;
		position: relative;
		margin: 0 auto;
	}

	.flex{
	    display: -webkit-flex; /* Safari */
	    -webkit-flex-flow: row wrap; /* Safari 6.1+ */
	    display: flex;
	    flex-flow: row wrap;
	}

	.productShow {
		width: calc( (100% - 264px) / 6 );
		height: auto;
		text-align: center;
		padding: 10px;
		transition: all ease-in-out 0.2s;
		border: 2px #00b189 solid;
		margin: 10px 10px;
		color: #00b189;
		font-family: 'Montserrat', Arial, sans-serif;
		text-transform: uppercase;
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
	}

	.productShow:hover{
		background: #00b189;
		color: #FFF;
		transition: all ease-in-out 0.2s;
	}

	#mujeres, #hombres, #jovenes {
	 	display: none;
		width: 100%;
	    align-content: center;
	    text-align: center;
	}

	p, small {
		color: #718096;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
        font-size: 18px;
        line-height: 1.5em;
		font-weight: 500;
		text-decoration: none;
    }

    small {
        font-size: 0.6em;
        color: #9AAECD
    }
    
    .show {
        display: block;
    }

    .hide {
        display: none;
    }

    .button {
        text-decoration: none;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
        padding: 16px 32px;
        background: #2373e2;
        color: #FFF;
        margin: 0 auto;
        border-radius: 30px;
        display: inline-block;
    }


@media only screen and (max-width: 736px) {

	header {
		width: 100%;
		height: auto;
	}

	#logo {
		width: 100%;
		height: 45px;
        padding: 10px 0;
        background-size: 200px 37px; 
		margin: 0 auto;
    }

    .logomci {
		width: 100%;
		height: 70px;
        margin: 30px 0 15px 0 !important;
        background-size: auto 70px; 
        background-position: center;
        background-repeat: no-repeat;
		margin: 0 auto;
    }
    
    #frase {
		position: relative;
		width: calc(100% - 60px);
		height: auto;
		padding: 40px 30px;
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
        font-weight: 600;
        text-align: center;
        font-size: 16px;
    }

    #frase h4 {
		font-size: 20px;
		margin: 0 0 15px 0;
	}

	#frase p {
		font-size: 14px;
		margin: 10px 0;
		padding: 0 !important;
	}

	#frase .cita-biblica {
		font-size: 14px !important;
	}

    h2 {
        padding: 20px;
        font-size: 22px;
    }

    h3 {
        padding: 20px;
    }

	p {
        font-size: 14px;
        padding: 0 20px;
    }
    
    small {
        line-height: 0.8em;
    }

	article {
		width: 100%;
	}

	.rack {
	    padding-bottom: 5px;
	}

	.red {
		/* width: calc( (100% - 132px) / 3 ); */
		padding: 20px 10px;
		margin: 10px;
		font-size: 14px;
    }
    
    .redCuartos {
        width: calc( (100% - (44px * 2) ) / 2 );
    }

	.productShow {
		width: calc( (100% - 102px) / 3 );
		margin: 5px;
		color: #00b189;
		font-size: 10px;
	}

	.productShow img {
		width: 100%;
		height: auto;
	}

	table {
		width: 100%;
		border-collapse: collapse;
	}

	table td {
		display: block;
		width: 100% !important;
		padding: 10px !important;
		text-align: left !important;
		vertical-align: top !important;
	}

	table img {
		max-width: 150px;
		height: auto;
		display: block;
		margin: 0 auto 10px auto;
	}

}