/* Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* Styles */

html, body {
	width: 100%;
	height: 100%;
}

body {
	background: url(../img/pattern.jpg);
}

.mallows {
	position: relative;
	width: 100%;
}

	.logo {
		width: 100%;
		background: url(../img/background_t.jpg) repeat-y;
		background-size: contain;
	}

		.logo img {
			width: 80%;
			max-width: 500px;
			margin-left: 10%;
			margin-top: 5%;
		}

		.logo p {
			margin-top: 10px;
			text-align: center;
			font-family: 'Font1';
		}

	.links {
		position: absolute;
		left: 10%;
		width: 90%;
		bottom: -45%;
	}

		.links h2, .links a {
			font: 4vw 'Arial';
			color: #FFF;
			text-decoration: none;
		}

		.links h2 {
			margin-bottom: 15px;
			margin-left: 3px;
		}

		.link-block {
			display: table;
			float: left;
		}

		.links a {
			display: table-row;
			transition: all .2s ease-in-out;
		}

		.links a:hover {
    		-webkit-transform: scale(1.1);
    		-ms-transform: scale(1.1);
			transform: scale(1.1);
		}

			.link-img, .link-title {
				display: table-cell;
				vertical-align: middle;
			}

			.link-img {
				width: 15%;
			}

				.link-img img {
					width: 100%;
				}

			.link-title {
				padding-left: 2%;
				width: 83%;
			}

	.cloud {
		position: absolute;
		top: 45%;
		right: 20%;
		width: 20%;
		background: url(../img/cloud.png) no-repeat;
		background-size: contain;
		transition: all .2s ease-in-out;
	}

	.cloud:hover {
    	-webkit-transform: scale(1.1) rotate(7deg);
		-ms-transform: scale(1.1) rotate(7deg);
		transform: scale(1.1) rotate(7deg);
	}

		.cloud a {
			pointer-events: none;
		}

		.cloud a img {
			display: block;
			position: relative;
			width: 100%;
			visibility: hidden;
		}

	.comeback {
		display: none;
		position: absolute;
		top: 50%;
		z-index: 3;
		font-family: 'Font1';
		color: #FFF;
		font-size: 2vw;
		text-shadow: 3px 3px 10px rgba(0,0,0, 0.7);
		width: 100%;
		text-align: center;
	}

	.background {
		width: 100%;
	}


/* Font */

@font-face {
  font-family: 'Font1';
  src: url('../font/font.eot'); /* IE9 Compat Modes */
  src: url('../font/font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/font.woff') format('woff'), /* Modern Browsers */
       url('../font/font.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../font/font.svg#svgFontName') format('svg'); /* Legacy iOS */
}









/* Small screens */
@media only screen { }

/* Medium screens - min-width 641px */
@media only screen and (min-width: 40.063em) {

	.comeback {
		display: block;
	}

	.mallows .logo {
		position: absolute;
		left: 30px;
		width: 35%;
		background: none;
	}

		.mallows .logo img {
			width: 100%;
			margin-left: 0;
			max-width: 300px;
		}

		.mallows .logo p {
			display: none;
		}

	.links {
		left: 30px;
		bottom: -80px;
	}

		.links h2, .links a {
			font: 16px 'Arial';
		}

		.link-block {
			display: block;
		}

			.link-img {
				width: 50px;
			}

			.link-title {
				width: 275px;
			}

	.cloud {
		pointer-events: auto;
		top: 7%;
	}

		.cloud a img {
			visibility: visible;
		}

}

/* Large screens - min-width 1025px */
@media only screen and (min-width: 64.063em) {

	.mallows {
		height: 100%;
	}

	.links {
		bottom: 30px;
	}

}

/* XLarge screens - min-width 1441px */
@media only screen and (min-width: 90.063em) { }