/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('../fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

@base: #28328b;

h1 {
	color: @base;
}

a {
	color: inherit;
	text-decoration: none;
	
	&.mail {
		color: @base;
	}
}

html, body {
	background-color: #555;
	height: 100%;
	margin: 0;
}

body {
	font-family: 'Roboto';
	font-size: 18px;
	font-weight: 400;
	
	section.content {
		background: url('../images/background.jpg') no-repeat #fff;
		display: block;
		margin: auto;
		padding: 500px 0 20px 0;
		width: 700px;
		
		div.background-img {
			display: none;
		}
		
		div.left {
    		float: left;
    		padding-left: 5%;
            width: 45%;
		}

		div.right {
    		float: left;
			width: 50%;
		}
		
		div.full {
    		padding: 0 36px;
		}
	}
}

.clear {
    clear: both;
}

footer {
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    margin: auto;
    width: 700px;
}

@media(max-width: 700px) {
	html, body {
		background-color: #fff;
	}
	
	footer {
    	color: #000;
    	width: 100%;
	}
	
	body {
		font-size: 14px;
		width: 100%;
		
		section.content {
			height: auto;
			padding: 700px 0 5% 0;
			width: 90%;
			
			div.background-img {
				display: block;
				
				img {
					height: auto;
					width: 100%;
				}
			}
			
			div.left {
				bottom: initial;
				left: 0;
				margin-top: -190px;
				padding-left: 20px;
				position: relative;
				
				@media(max-width: 500px) {
					margin-top: -130px;
				}
			}
				
			div.right {
				bottom: initial;
				left: 0;
				padding-left: 20px;
				position: relative;
				width: auto;
			}
		}
	}
}