@charset "utf-8";
@-ms-viewport{ width: device-width;}

/*----------------------------*/
/* RESETTING BROWSER DEFAULTS */
/*----------------------------*/

* {margin: 0; padding: 0;}
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 {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; vertical-align: middle;}
/* HTML5 display-role reset for older browsers */
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}

/* Border Box! */
*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/* Other Annoying Things */
*:invalid, *:-moz-submit-invalid, *:required, *:-moz-placeholder, *:-moz-focusring {outline: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
input[type=submit] {cursor: pointer; -webkit-appearance: none; }
input[type=number] { -moz-appearance:textfield;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=date], input[type=reset], input[type=tel], input[type=color], input[type=time], input[type=date], input[type=week], input[type=month], input[type=range], input[type=search], input[type=datetime], input[type=datetime-local], textarea, select { -webkit-appearance: none; }
* :focus {outline: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
html {-webkit-text-size-adjust: 100%;} /* Prevent IPhone font scaling while allowing user zoom (corrects the iPhone/iPad behavior, without changing desktop behavior) */
a {text-decoration: none;}
sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; font-size: 70%;}
sup { bottom: 1ex; }
sub { top: .5ex; }
/* Font Smoothing */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/*---------------------------*/
/*      GENERAL FONT         */
/*---------------------------*/

html, input, textarea, select, button {font-family: 'Roboto', sans-serif; }

/*---------------------------*/
/*       GENERAL STUFF       */
/*---------------------------*/

body, html { height: 100%;   }
html { font-size: 16px; background: #fff;  }
body {background: white; color: #363636; overflow-x: hidden;  }
strong, b { font-weight: bold; }
em { font-style: italic; }
hr { border: 0; height: 0; border-top: none; border-bottom: #727272 1px solid; margin: 2em 0; clear: both; }
mark { background-color: dimGray; color: white; padding: 2px; }

/* Responsive Images */
img {max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; }

.no-padding { padding: 0px !important; }
.noscroll { overflow: hidden; }

.float-left { display: block; float: left; width: 49%; }
.float-right { display: block; float: right; width: 49%;  }

@media screen and (max-width: 800px){
	.float-left { display: block; float: none; width: 100%; }
	.float-right { display: block; float: none; width: 100%;  }
	.float-right.right { text-align: inherit !important; }
}


.left { text-align: left !important; }
.right { text-align: right !important; }
.center { text-align: center !important; }
.small { font-size: 0.8em; }
.large { font-size: 1.2em; }
.shift { text-transform: uppercase !important; }

.white { color: #fff !important; }
.red { color: red !important; }

.temp-hide { display: none; }

.cover {background-repeat: no-repeat; background-position: 50% 50%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  }

.clearfix {  visibility: hidden; display: block; height: 0; clear: both; }

.container { }





/*---------------------------*/
/*          STYLES           */
/*---------------------------*/


main a {color: #363636;
	-webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; }
	main a:hover, main a:focus { color: #de7e0c; }
main { position: relative; top: 45%; transform: translateY(-50%); padding: 40px; text-align: center;  }
main > div { margin: 0px auto; }

div.logo { width: 240px; height: 140px; height:  background: url(../img/fallback/mahouni_studio.png); background-image: url(../img/mahouni_studio.svg), none; background-position: 0px 50%; background-repeat: no-repeat; font-size: 0px; margin-bottom: 30px;}
/*main .logo h1 { font-family: 'Playfair Display', serif; font-size: 44px; color: #000; margin: 0 0 5px 0; letter-spacing: -0.02em; }
main .logo p { font-size: 18px; text-indent: 5px; }*/
div.contacts { line-height: 1.6em; margin-top: 25px; }
.contacts > ul li:before { content:"\f111"; font-family: fontAwesome; font-size: 20px; display: inline-block; margin: 0 7px 0 0; transform: translateY(3px);  }
	.contacts > ul li.address:before { content:"\f015";   }
	.contacts > ul li.email:before { content:"\f003";   }
	.contacts > ul li.tel:before {content:"\f095"; }
	

@media screen and (max-width: 420px){
	main {padding: 20px; }

}


/*---------------------------*/
/*          LOADER           */
/*---------------------------*/

.loader-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.loader {
	position:fixed;
	height:100%;
	width:100%;
	background:#fff;
	z-index:99999;
	font-size: 16px;
}

.loader-icon {
  height: 0;
  width: 0;
  box-sizing: border-box;
  border: 0 solid #363636; /*Loading Cirlce COLOUR*/
  -webkit-animation: loader-animation 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-animation: loader-animation 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  animation: loader-animation 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.loader-label{
  position: absolute;
  top: 50%;
  margin: 30px auto auto -70px;
  left: 50%;
  right: 50%;
  width:140px;
  color: #363636; /*Loading Text COLOUR*/
  text-align: center; text-transform: uppercase; letter-spacing: 0.5em; font-weight: 300; font-size: 10px;
  -webkit-animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

@-webkit-keyframes loader-animation {
  0% {
    height: 0;
    width: 0;
  }
  30% {
    height: 2em;
    width: 2em;
    border-width: 1em;
    opacity: 1;
  }
  100% {
    height: 2em;
    width: 2em;
    border-width: 0;
    opacity: 0;
  }
}

@-moz-keyframes loader-animation {
  0% {
    height: 0;
    width: 0;
  }
  30% {
    height: 2em;
    width: 2em;
    border-width: 1em;
    opacity: 1;
  }
  100% {
    height: 2em;
    width: 2em;
    border-width: 0;
    opacity: 0;
  }

}

@keyframes loader-animation {
  0% {
    height: 0;
    width: 0;
  }
  30% {
    height: 2em;
    width: 2em;
    border-width: 1em;
    opacity: 1;
  }
  100% {
    height: 2em;
    width: 2em;
    border-width: 0;
    opacity: 0;
  }
}

@-webkit-keyframes loader-label {
  0% {
    opacity: 0.35;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0.35;
  }
}
@-moz-keyframes loader-label {
  0% {
    opacity: 0.35;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0.35;
  }
}
@keyframes loader-label {
  0% {
    opacity: 0.35;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0.35;
  }
}