$ds-global-width-sm:   576px; // Bootstrap 4: 576px
$ds-global-width-md:   768px; // Bootstrap 4: 768px
$ds-global-width-lg:   992px; // Bootstrap 4: 992px
$ds-global-width-xl:  1200px; // Bootstrap 4: 1200px
$ds-global-width-xxl: 1680px; // DS Frame: 1680px

$ds-grey-light: #f9f9f9;
$ds-grey:       #efefef;
$ds-grey-dark:  #515151;
$ds-red:        #D0021B;
$ds-green:      #f8fff8;

$white: #fff;
$black: #000;

$ds-font-size: 16px;
$ds-line-height: 18px;

* {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	font-family: Montserrat;
}

html {
	body {
		margin: 0;
	}
}

h1 {
	font-family: inherit;
	font-size: 35px;
	line-height: 35px;
	margin: 0 0 30px;
}

a,
p {
	font-family: inherit;
	font-size: 14px;
	line-height: 18px;
	margin: 0;
	text-decoration: none;
}

#logo {
	margin: 0 0 30px;
}

#main-container {
	display: -webkit-box;
	display: -ms-flexbox;
				 display: flex;
	-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
					flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 30px;
}

#message-socials {
	display: -webkit-box;
	display: -ms-flexbox;
				 display: flex;
	-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
					flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 30px 0 0;

	> .social-icon {
		transition: all 0.4s;
		display: -webkit-box;
		display: -ms-flexbox;
					 display: flex;
		-webkit-flex-wrap: wrap;
				-ms-flex-wrap: wrap;
						flex-wrap: wrap;
		font-size: 16px;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		border: 2px solid;
		border-radius: 50%;

		&:not( :last-child ) {
			margin-right: 10px;
		}

		&:hover {
			background-color: $white;
			border-color: $white;
			color: $ds-grey-dark;
		}

		&.facebook {
			&:hover {
				background-color: #3C5A99;
				border-color: #3C5A99;
				color: $white;
			}
		}

		&.twitter {
			&:hover {
				background-color: #1DA1F2;
				border-color: #1DA1F2;
				color: $white;
			}
		}

		&.instagram {
			&:hover {
				background-color: #E1306C;
				border-color: #E1306C;
				color: $white;
			}
		}

		&.email {
			&:hover {
				background-color: $ds-grey-dark;
				border-color: $ds-grey-dark;
				color: $white;
			}
		}
	}
}


@media( min-width: $ds-global-width-sm ) {
	h1 {
		font-size: 40px;
		line-height: 40px;
	}

	p {
		font-size: 16px;
	}
}

@media( min-width: $ds-global-width-md ) {
	h1 {
		font-size: 60px;
		line-height: 50px;
	}

	#main-container {
		max-width: 350px;
	}
}

@media( min-width: $ds-global-width-lg ) {
	h1 {
		font-size: 80px;
		line-height: 70px;
	}

	p {
		font-size: 22px;
		line-height: 30px;
	}

	#main-container {
		max-width: 500px;
		padding: 70px;
	}
}

@media( min-width: $ds-global-width-xl ) {
	#main-container {
		max-width: 650px;
	}
}

@media( min-width: $ds-global-width-xxl ) {
	#main-container {
		max-width: 35%;
	}
}