/* --------------------------------- */
/* --- RESPONSIVE smartphoto.com --- */
/* --------------------------------- */

/* --- MOBILE FIRST --- */
/* --- smartphones (small and medium sizes - portrait) --- */

html 
{
	margin: 0px;
	padding: 0px;

	font-size: 62.5%;
}

body
{
	width: 100%;
	padding: 0px;
	margin: 0px;

	/* provide grey border at the bottom */
	background-image: url('../img/smartphoto_mobile.png'),linear-gradient(#ffffff 94%, #eaeaea 6%);
	background-size: auto 40%;
	background-position: 47% 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: #0c1725;

	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 1.4rem;
}

.o-general-conditions-and-privacy-policy {
	background-image: none !important;
}

.o-general-conditions-and-privacy-policy .a-logo svg 
{
	width: 200px;
}

.o-general-conditions-and-privacy-policy .a-slogan 
{
	margin: 4vh 2rem;

}

.o-general-conditions-and-privacy-policy .l-container {
	width: auto !important;
	height: auto !important;
}

.o-general-conditions-and-privacy-policy .l-content {
	height: auto !important;
	margin: 3rem 0;
}

.o-general-conditions-and-privacy-policy .m-countries .m-countries__list li 
{
	margin-bottom: 12px;
}


@media screen and (max-width: 768px) {
	.o-general-conditions-and-privacy-policy .m-countries {
		flex-direction: column;
	}


	.o-general-conditions-and-privacy-policy .m-countries .m-countries__list.m-countries__list--left,
	.o-general-conditions-and-privacy-policy .m-countries .m-countries__list.m-countries__list--right {
		text-align: center;
		padding: 0;
		border-right: none;
	}
}

.ie9 body
{
	background-image: url('../img/smartphoto_desktop.png');
}

/* /// LAYOUT /// */

/* ------------------------ */
/* --- CONTAINER LAYOUT --- */
/* ------------------------ */

.l-container
{
	width: 90%;
	height: 85%;
	margin: 0 auto;
}

/* ---------------------- */
/* --- CONTENT LAYOUT --- */
/* ---------------------- */

.l-content
{
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	justify-content: center;
 	align-items: center;
 	flex-direction: column;
 	height: 100%;

 	text-align: center; 
}

/* /// ATOMS /// */

/* ----------------- */
/* --- LOGO ATOM --- */
/* ----------------- */

.ie9 .a-logo
{
	margin-top: 9vh;
}

.a-logo svg 
{
	width: 55vw;
}

/* ------------------- */
/* --- SLOGAN ATOM --- */
/* ------------------- */

.a-slogan
{
	margin: 3vh 0 4vh;

	font-size: 2.6rem;
	font-weight: 300;
}


.ie9 .a-slogan
{
	margin-top: 0px !important;
}

/* ----------------- */
/* --- LINK ATOM --- */
/* ----------------- */

.a-link,
.a-link:link,
.a-link:visited
{
	color: #0c1725;
	text-decoration: none;
}

.a-link:hover
{
	text-decoration: underline;
}

.a-link:focus,
.a-link:active
{
	color: #009FDC;
}

.a-link--bold
{
	font-weight: 500;
}

.a-link--button,
.a-link--button:link,
.a-link--button:visited
{
	padding: 1.5rem 3rem;
	border-radius: .2rem;
	margin: 3vh 0;

	background-color: #009FDC;
	color: #ffffff;
}

.a-link--button:hover
{
	box-shadow: 0 0.2rem 0.5rem -0.1rem rgb(0 0 0 / 35%);

	text-decoration: none;
}

/* /// MOLECULES /// */

/* -------------------------- */
/* --- COUNTRIES MOLECULE --- */
/* -------------------------- */

.m-countries
{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-direction: row;
}

.ie9 .m-countries
{
	margin: 0 auto;
	width: 50%;
}

.m-countries .m-countries__list
{
	list-style-type: none;
	margin: 0;
	padding: 0;

	line-height: 4.5vh;
}

.m-countries .m-countries__list__name
{
	margin: 0;

	font-weight: 500;
	line-height: 2vh;
}

.m-countries .m-countries__list.m-countries__list--left
{
	padding-right: 8vw;
	border-right: 1px solid #dcdcdc;

	text-align: right;
}

.m-countries .m-countries__list.m-countries__list--right
{
	padding-left: 8vw;

	text-align: left;
}

.ie9 .m-countries .m-countries__list.m-countries__list--left,
.ie9 .m-countries .m-countries__list.m-countries__list--right
{
	text-align: center;
	padding: 0px !important;
	border-right: none;
}

/* --------------------- */
/* --- MEDIA QUERIES --- */
/* --------------------- */

/* --- IE10+ (10 and 11) --- */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
{
/* IE10+ CSS styles go here */

	.a-logo
	{
		width: 41%;
		height: 0px;
		padding: 0px;
		padding-bottom: 12%;
		position: relative;
	}

	.a-logo svg
	{
		width: 100% !important;
		height: 100%;
		position: absolute;
	}

	.a-slogan
	{
		width: 100%;
	}

}

/* --- smartphones (small and medium sizes - landscape) --- */

@media screen and (orientation: landscape)
{
	body
	{
		background-image: url('../img/smartphoto_desktop.png'), linear-gradient(#fff 94%, #eaeaea 6%);
		background-size: 100% auto;

		font-size: 1.2rem;
	}

	.l-container 
	{
		width: 55%;
		height: 100%;
	}

	.a-logo
	{
		margin-top: 4vh;
	}

	.a-logo svg 
	{
		width: 25vw;
	}

	.a-slogan
	{
		font-size: 2.2rem;
		margin: 5vh 0 6vh;
	}

	.m-countries .m-countries__list
	{
		line-height: 1.8;
	}

	.m-countries .m-countries__list.m-countries__list--left
	{
		padding-right: 4vw;
	}

	.m-countries .m-countries__list.m-countries__list--right
	{
		padding-left: 4vw;
	}

}

/* --- smartphones (large sizes - portrait) --- */

@media screen and (min-width: 350px) and (min-height: 650px) and (orientation: portrait)
{
	body
	{
		font-size: 1.6rem;
	}

	.l-container 
	{
		height: 85%;
	}

	.a-logo svg 
	{
		width: 50vw;
	}

	.a-slogan
	{
		margin: 4vh 0 6vh;

		font-size: 3.2rem;
	}

	.m-countries .m-countries__list
	{
		line-height: 4.2vh;
	}

	.m-countries .m-countries__list.m-countries__list--left
	{
		padding-right: 4vh;
	}

	.m-countries .m-countries__list.m-countries__list--right
	{
		padding-left: 4vh;
	}
}

/* --- smartphones (large sizes - landscape) --- */

@media screen and (min-width: 650px) and (min-height: 350px) and (orientation: landscape)
{
	body
	{
		font-size: 1.4rem;
	}

	.a-logo svg 
	{
		width: 23vw;
	}

	.a-slogan
	{
		font-size: 2rem;
	}

	.m-countries .m-countries__list.m-countries__list--left
	{
		padding-right: 4.5vw;
	}

	.m-countries .m-countries__list.m-countries__list--right
	{
		padding-left: 4.5vw;
	}

}

/* --- Tablet (small and medium sizes - portrait) --- */

@media screen and (min-width: 600px) and (min-height: 800px) and (orientation: portrait)
{
	body
	{
		font-size: 1.6rem;
	}

	.l-container 
	{
		height: 70%;
		width: 75%;
	}

	.a-logo {
		height: auto;
	}

	.a-logo svg 
	{
		width: 40vw;
	}

	.a-slogan
	{
		font-size: 4rem;
		margin: 5vh 0 7vh;
	}

	.m-countries .m-countries__list
	{
		line-height: 3.2vh;
	}

}

/* --- Tablet (large sizes - portrait) --- */

@media screen and (min-width: 900px) and (min-height: 1100px) and (orientation: portrait)
{
	body
	{
		font-size: 1.6rem;
	}

	.l-container 
	{
		height: 70%;
		width: 65%;
	}

	.a-logo {
		height: auto;
	}

	.a-logo svg 
	{
		width: 33vw;
	}

	.a-slogan
	{
		font-size: 4.5rem;
	}
	
}

/* --- Tablet and desktop (landscape) --- */

@media screen and (min-width: 1000px) and (min-height: 600px) and (orientation: landscape)
{
	body
	{
		font-size: 1.6rem;
		background-size: auto 100%;
	}

	.l-container 
	{
		height: 100%;
		width: 60%;
	}

	.a-logo
	{
		margin-top: 0vh;
	}

	.a-logo svg 
	{
		width: 23vw;
	}

	.a-slogan
	{
		font-size: 4.2rem;
		margin: 8vh 0;
	}

	.m-countries .m-countries__list
	{
		line-height: 3.5vh;
	}

	.m-countries .m-countries__list.m-countries__list--left
	{
		padding-right: 3.5vw;
	}
	.m-countries .m-countries__list.m-countries__list--right
	{
		padding-left: 3.5vw;
	}

	.a-link--button,
	.a-link--button:link,
	.a-link--button:visited
	{
		margin-top: 8rem;
	}

}

/* --- Desktop (widescreen - landscape) --- */

@media screen and (min-width: 1200px) and (max-height: 1000px) and (min-height: 600px) and (orientation: landscape)
{
	body
	{
		font-size: 1.6rem;
		background-size: auto 100%;
	}

	.l-container 
	{
		height: 100%;
		width: 45%;
	}

	.a-logo
	{
		margin-top: 0vh;
	}

	.a-logo svg 
	{
		width: 18vw;
	}

	.a-slogan
	{
		font-size: 4.2rem;
		margin: 8vh 0 6vh;
	}

	.m-countries .m-countries__list
	{
		line-height: 3.5vh;
	}

	.a-link--button,
	.a-link--button:link,
	.a-link--button:visited
	{
		margin-top: 15rem;
	}

}


/* Squarish aspect ratio (for people resizing their browser window) */

@media screen and (max-aspect-ratio: 5/4)
{ 
	body
	{
		background-image: url('../img/smartphoto_mobile.png'),linear-gradient(#fff 94%,
	    #eaeaea 6%) !important;
		background-size: auto 40%;
		background-position: 47% 100%;
	}
}

@media screen and (min-aspect-ratio: 5/4) and (min-height: 600px)
{ 
	body 
	{
		background-size: auto 100%;
	}
}