@charset "UTF-8";

@import "reboot.min.css";

html{
	height:100%;
	text-align:center;
}

body{
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	color:#ffffff;
	background:none;
	height: 100%;
}

img{
	vertical-align: middle;
	border-style: none;
}

main{
	margin-left:auto;
	margin-right:auto;
}

main > *{
	width:100%;
	
}

.bold{
	font-weight:700;
}
.txt-align-right{text-align:right;}
.txt-align-left{text-align:left;}
.txt-justify{
	text-align: justify;
	text-justify: inter-word;
	text-align-last: justify;
	letter-spacing: 0.15rem;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.background-image{
	background: url('../img/bg-sumax-equador.jpg') no-repeat center center fixed;
}


/* Smartphones */
@media all and (min-height:600px){
	main > div{
		justify-content: center;
	}
}


@media all and (max-width:767px){
	body{
		font-size:14px;
	}
	main{
		height:100%;
		min-height:100%;
		position: relative;
		z-index: 2;
	}
	main > div{
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		height: 100vh;
		flex-direction:column;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		max-height: 100%;
		overflow: auto;
	}
	figure{
		margin:0;
	}
	figure > img{
		padding:40px;
	}
	.background-image{
		position: relative;
	}
	.background-image:after{
		content:"";
		position:fixed;
		background-color:rgba(0,0,0,0.5);
		left:0;
		right:0;
		top:0;
		bottom:0;
		z-index: 1;
	}
}
@media all and (max-width:767px){
	.flex-big-device{
		display:block;
		text-align:center;
	}
	.flex-big-device > *{
		margin-left:auto;
		margin-right:auto;
	}
	.no-wrap-big-device{
		flex-wrap:wrap;
	}
}

/* Tablettes + Ordi */

@media all and (min-width:768px){
	body{
		font-size:14px;
	}
	main{
		max-width:530px;
		padding: 60px;
		height: 100%;
		max-height:100%;
		background-color:rgba(0,0,0,0.5);
	}
	
	main > *{
		width:100%;
		max-width:380px;
		margin-left:auto;
		margin-right:auto;
	}
}


@media all and (min-width:768px){
	.background-image{
		background-size:cover;
	}
	
	.flex-big-device{
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}
	.flex-center{
		justify-content:center;
		-webkit-justify-content:center;
	}
	.no-wrap-big-device{
		flex-wrap:nowrap;
		-webkit-flex-wrap: nowrap;
	}
	.flex-column{
		flex-direction:column;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
	}
}