@charset "UTF-8";
/* CSS Document */

*{
	margin:0;
	padding:0;
}
body{
	width:100%;
	height:100%;
	font-family:'JosefinSlabRegular';
	font-size:16px;
	background:#ececec;
}
body.ink{
	background:url(../media/images/bgs/login_bg.png) no-repeat center center fixed;
	background-size:cover;
}
.center{
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
h2{
	font-size:64px;
	font-weight:normal;
	font-family:'Bebas';
}
header{
	width:100%;
	height:100px;
	background:#FFF;
}
#logo{
	height:80px;
	display:inline-block;
	margin:10px;
}
#logo img{
	height:100%;
}
/* Fonts */

@font-face {
    font-family: 'JosefinSlabThin';
    src: url('../media/fonts/Josefin/JosefinSlab-Thin-webfont.eot');
    src: url('../media/fonts/Josefin/JosefinSlab-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../media/fonts/Josefin/JosefinSlab-Thin-webfont.woff') format('woff'),
         url('../media/fonts/Josefin/JosefinSlab-Thin-webfont.ttf') format('truetype'),
         url('../media/fonts/Josefin/JosefinSlab-Thin-webfont.svg#JosefinSlabThin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'JosefinSlabThinItalic';
    src: url('../media/fonts/Josefin/JosefinSlab-ThinItalic-webfont.eot');
    src: url('../media/fonts/Josefin/JosefinSlab-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../media/fonts/Josefin/JosefinSlab-ThinItalic-webfont.woff') format('woff'),
         url('../media/fonts/Josefin/JosefinSlab-ThinItalic-webfont.ttf') format('truetype'),
         url('../media/fonts/Josefin/JosefinSlab-ThinItalic-webfont.svg#JosefinSlabThinItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'JosefinSlabLight';
    src: url('../media/fonts/Josefin/JosefinSlab-Light-webfont.eot');
    src: url('../media/fonts/Josefin/JosefinSlab-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../media/fonts/Josefin/JosefinSlab-Light-webfont.woff') format('woff'),
         url('../media/fonts/Josefin/JosefinSlab-Light-webfont.ttf') format('truetype'),
         url('../media/fonts/Josefin/JosefinSlab-Light-webfont.svg#JosefinSlabLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'JosefinSlabLightItalic';
    src: url('../media/fonts/Josefin/JosefinSlab-LightItalic-webfont.eot');
    src: url('../media/fonts/Josefin/JosefinSlab-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../media/fonts/Josefin/JosefinSlab-LightItalic-webfont.woff') format('woff'),
         url('../media/fonts/Josefin/JosefinSlab-LightItalic-webfont.ttf') format('truetype'),
         url('../media/fonts/Josefin/JosefinSlab-LightItalic-webfont.svg#JosefinSlabLightItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'JosefinSlabRegular';
    src: url('../media/fonts/Josefin/JosefinSlab-Regular-webfont.eot');
    src: url('../media/fonts/Josefin/JosefinSlab-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../media/fonts/Josefin/JosefinSlab-Regular-webfont.woff') format('woff'),
         url('../media/fonts/Josefin/JosefinSlab-Regular-webfont.ttf') format('truetype'),
         url('../media/fonts/Josefin/JosefinSlab-Regular-webfont.svg#JosefinSlabRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'JosefinSlabItalic';
    src: url('../media/fonts/Josefin/JosefinSlab-Italic-webfont.eot');
    src: url('../media/fonts/Josefin/JosefinSlab-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../media/fonts/Josefin/JosefinSlab-Italic-webfont.woff') format('woff'),
         url('../media/fonts/Josefin/JosefinSlab-Italic-webfont.ttf') format('truetype'),
         url('../media/fonts/Josefin/JosefinSlab-Italic-webfont.svg#JosefinSlabItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'JosefinSlabSemiBold';
    src: url('../media/fonts/Josefin/JosefinSlab-SemiBold-webfont.eot');
    src: url('../media/fonts/Josefin/JosefinSlab-SemiBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../media/fonts/Josefin/JosefinSlab-SemiBold-webfont.woff') format('woff'),
         url('../media/fonts/Josefin/JosefinSlab-SemiBold-webfont.ttf') format('truetype'),
         url('../media/fonts/Josefin/JosefinSlab-SemiBold-webfont.svg#JosefinSlabSemiBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'JosefinSlabSemiBoldItalic';
    src: url('../media/fonts/Josefin/JosefinSlab-SemiBoldItalic-webfont.eot');
    src: url('../media/fonts/Josefin/JosefinSlab-SemiBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../media/fonts/Josefin/JosefinSlab-SemiBoldItalic-webfont.woff') format('woff'),
         url('../media/fonts/Josefin/JosefinSlab-SemiBoldItalic-webfont.ttf') format('truetype'),
         url('../media/fonts/Josefin/JosefinSlab-SemiBoldItalic-webfont.svg#JosefinSlabSemiBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'JosefinSlabBold';
    src: url('../media/fonts/Josefin/JosefinSlab-Bold-webfont.eot');
    src: url('../media/fonts/Josefin/JosefinSlab-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../media/fonts/Josefin/JosefinSlab-Bold-webfont.woff') format('woff'),
         url('../media/fonts/Josefin/JosefinSlab-Bold-webfont.ttf') format('truetype'),
         url('../media/fonts/Josefin/JosefinSlab-Bold-webfont.svg#JosefinSlabBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'JosefinSlabBoldItalic';
    src: url('../media/fonts/Josefin/JosefinSlab-BoldItalic-webfont.eot');
    src: url('../media/fonts/Josefin/JosefinSlab-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../media/fonts/Josefin/JosefinSlab-BoldItalic-webfont.woff') format('woff'),
         url('../media/fonts/Josefin/JosefinSlab-BoldItalic-webfont.ttf') format('truetype'),
         url('../media/fonts/Josefin/JosefinSlab-BoldItalic-webfont.svg#JosefinSlabBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Bebas';
    src: url('../media/fonts/Bebas/BebasNeue-webfont.eot');
    src: url('../media/fonts/Bebas/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../media/fonts/Bebas/BebasNeue-webfont.woff') format('woff'),
         url('../media/fonts/Bebas/BebasNeue-webfont.ttf') format('truetype'),
         url('../media/fonts/Bebas/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Login Page */

#loginWindow{
	height:300px;
	border-radius:10px;
	width:500px;
    width: -webkit-calc(100% - 20px);
    width: -moz-calc(100% - 20px);
	width: -ms-calc(100% - 20px);
	width: -o-calc(100% - 20px);
	width: calc(100% - 20px);
	max-width:500px;
	margin-right:18%;
}
#loginWindow h1{
	font-family:'Bebas';
	color:#0099CC;
	font-size:32px;
	font-weight:normal;
}
#loginWindow h2{
	font-family:'Bebas';
	color:#F90;
	font-size:24px;
	font-weight:normal;
}
.loginLabel{
	margin-top:10px;
	color:#333;
}
.loginInput{
	background:#FFF;
	border:none;
	padding:6px;
	width:488px;
    width: -webkit-calc(100% - 12px);
    width: -moz-calc(100% - 12px);
	width: -ms-calc(100% - 12px);
	width: -o-calc(100% - 12px);
	width: calc(100% - 12px);
}
.button{
	display:inline-block;
	padding:10px 30px;
	background:#0099CC;
	color:#FFF;
	cursor:pointer;
	text-transform:uppercase;
	margin:0;
}
.grey_button{
	display:inline-block;
	padding:10px 30px;
	margin-left:10px;
	background:#BBB;
	color:#FFF;
	cursor:pointer;
	text-transform:uppercase;
	margin:0;
}

/* Home Page */

#page{
	width:800px;
    width: -webkit-calc(100% - 20px);
    width: -moz-calc(100% - 20px);
	width: -ms-calc(100% - 20px);
	width: -o-calc(100% - 20px);
	width: calc(100% - 20px);
	max-width:800px;
	padding:40px 0;
	text-align:left;
	display:inline-block;
}

.colorBlock{
	padding:20px;
	background:#0099CC;
	color:#FFF;	
	margin:0;
}
nav ul{
	width:100%;
}
nav ul li{
	background:#FFF;
	color:#09C;
	font-family:'Bebas';
	margin:5px;
	display:inline-block;
	position:relative;
	margin-left:0;
	height:40px;
}
nav ul li a{
	text-decoration:none;
	color:#09C;
	font-weight:normal;
	display:block;
	padding:12px 14px 6px;
}
nav ul li ul{
	display:none;
	width:200px;
	position:absolute;
	left:50%;
	margin-left:-100px;
	top:40px;
	background:#FFF;
}
nav ul li:hover ul{
	display:inline-block;
}
nav ul li ul li{
	margin:0;
	display:block;
	border-top:dashed 1px #ececec;
}
nav ul li ul li a{
	padding:8px 6px 4px;
}
nav ul li ul li:first-child{
	border:none;
}


/* Forms */

.portalForm label{
	display:block;
	margin-top:10px;
}
.portalForm input[type="text"],
.portalForm input[type="tel"]{
	border:none;
	background:#FFF;
	display:block;
	padding:6px;
	width:100%;
	width: -webkit-calc(100% - 12px);
    width: -moz-calc(100% - 12px);
	width: -ms-calc(100% - 12px);
	width: -o-calc(100% - 12px);
	width: calc(100% - 12px);
}
.portalForm textarea{
	border:none;
	background:#FFF;
	display:block;
	padding:6px;
	width:100%;
	width: -webkit-calc(100% - 12px);
    width: -moz-calc(100% - 12px);
	width: -ms-calc(100% - 12px);
	width: -o-calc(100% - 12px);
	width: calc(100% - 12px);
	resize:none;
	min-height:100px;
}
.portalForm .button{
	margin-top:10px;
}
.editTable{
	margin-top:20px;
}
.editTable td{
	padding:6px;
}
.editTable tr:nth-child(even){
	background:rgba(0,0,0,0.1);
}
.editTable tr:nth-child(odd){
	background:rgba(0,0,0,0.15);
}
.editTable tr:first-child{
	background:#09C;
	color:#FFF;
}
.editButton{
	background:#09C;
	width:20px;
	height:20px;
	display:inline-block;
}
.deleteButton{
	background:#09C;
	width:20px;
	height:20px;
	display:inline-block;
}

.clientHead{
	background:#09C;
	margin-top:30px;
	padding:10px;
	color:#FFF;
	font-size:24px;
}
.clientCharge{
	background:#CCC;
	padding:5px 10px;
	color:#444;
	font-size:14px;
}
.clientFoot{
	background:#09C;
	padding:5px 10px;
	color:#FFF;
	font-size:14px;
}
.clientTotal{
	background:#FFF;
	display:inline-block;
	padding:5px;
	color:#09C;
	font-size:14px;
	float:right;
	margin-top:-5px;
	margin-right:-10px;
}
.blocks{
	display:inline-block;
	margin:10px;
}
.circle{
	width:140px;
	height:140px;
	border-radius:100%;
	display:inline-block;
	background:#F90;
	margin:30px;
}
.circle img{
	width:80%;
	margin:10%;
}
.survey{
  position: absolute;
  top: 60px; right: -60px;
  padding-bottom:60px;
}