@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

$width: 360;

* {
	user-select: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
div {
 font-family: 'Quicksand', sans-serif;
 margin: 0;
}

body,
html {
 margin: 0;
 padding: 0;
 overflow: hidden;
 background: #353049;
}

.mobile {
	
		background-image: url('https://i.pinimg.com/736x/54/5a/16/545a16d531e44f1fa707168de6c8d083.jpg');
	background-size: cover;
	background-position: center;
 width: #{$width}px;
 margin: 0px auto;
 border-radius: 12px;
 padding: 0 5px;
 position: relative;
 color: #fff;
 background-size: cover;
 height: 100vh;
	overflow: hidden;
	text-align: center;
	z-index: 1;
	
	&:before {
		content: '';
		height: 100%;
		width: 100%;
		background: #353049;
		opacity: 0.5;
		position: fixed;
		left: 0;
		top: 0;
		z-index: -1;
	}
	
	&.module2 {
		&:before {
			background: #000 !important;
			opacity: 0.2;
		}
	}
}

.row {

 @for $col from 1 through 12 {
  .col-#{$col} {
   width: calc((#{$width} / 12) * #{$col}px);
	min-width: calc((#{$width} / 12) * #{$col}px);
   max-width: calc((#{$width} / 12) * #{$col}px);
   float: left;

   &:first-child {
    margin-left: 0;
   }
  }
 }
}

img {
 max-width: 100%;
}

form {
	margin-top: 30px;
	
	input {
		background: transparent;
		border: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.7);
		padding: 10px;
		font: 600 14px 'Quicksand', sans-serif;
		color: #fff;
		outline: none;
		width: 50%;
		
		&::placeholder {
			color: rgba(255, 255, 255, 0.7);
		}
	}
}

button {
	content: attr(title) !important;
	background: #f73668;
	padding: 10px 20px;
	border: none;
	border-radius: 20px;
	font: 700 16px 'Quicksand', sans-serif;
	color: #fff;
	margin-top: 20px;
	outline: none;
	height: 42px;
	width: 50%;
 	transition: all 0.5s ease;
	position: absolute;
	top: 300px;
	left: 50%;
	margin-left: -25%;
	
	&.active {
		height: 42px;
		width: 42px;
		transition: all 0.5s ease;
		border-radius: 50%;
		margin-left: -18px;
		
		i {
			margin-left: -7px;
		}
	}
	
	&.expand {
		width: 100%;
		height: 100%;
		top: 0;
		margin-top: 0;
		left: 0;
		margin-left: 0;
		border-radius: 0;
	
		&.hide {
			opacity: 0;
			visibility: hidden;
		}
	}
}

.header {
	margin-top: 50px;
	
	h2 {
		color: #353049;
	}
	
	.avatar {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background-size: cover;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		border: 3px solid #353049;
	}
}