﻿/*

-------------------------------

Dots Layout v0.3.0



copyright 2016

www.dothubmedia.com

-------------------------------

*/



/*

    DEFAULT SETTINGS

*/

*, *:after, *:before {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
html, body {
	margin: 0;
	padding: 0;
}
body {
	font-family: 'PT Sans', sans-serif; /* Template body font */
	font-size: 1em;
	line-height: 1.42857143;
	color: #333333;
}
div, section, aside, article, nav, header, footer, main {
	display: block;
}
input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}
a {
	color: inherit;
}
a, a:hover, a:focus {
	text-decoration: none;
}
p {
	margin-top: 10px;
	margin-bottom: 10px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', sans-serif; /* Template Headers font */
	font-weight: 700;
	color: inherit;
	margin-top: 20px;
	margin-bottom: 20px;
}
h1 {
	font-size: 2.25em;
}
h2 {
	font-size: 2em;
}
h3 {
	font-size: 1.75em;
}
h4 {
	font-size: 1.5em;
}
h5 {
	font-size: 1.25em;
}
h6 {
	font-size: 1em;
}
input[type="search"] {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-appearance: textfield;
}
.left {
	float: left;
}
.right {
	float: right;
}
.margin-top-10 {
	margin-top: 10px;
}
.margin-top-20 {
	margin-top: 20px;
}
.margin-top-30 {
	margin-top: 30px;
}
.margin-top-40 {
	margin-top: 40px;
}
.margin-left-10 {
	margin-left: 10px;
}
.margin-left-20 {
	margin-left: 20px;
}
.margin-left-30 {
	margin-left: 30px;
}
.margin-left-40 {
	margin-left: 40px;
}
.margin-bottom-10 {
	margin-bottom: 10px;
}
.margin-bottom-20 {
	margin-bottom: 20px;
}
.margin-bottom-30 {
	margin-bottom: 30px;
}
.margin-bottom-40 {
	margin-bottom: 40px;
}
.margin-right-10 {
	margin-right: 10px;
}
.margin-right-20 {
	margin-right: 20px;
}
.margin-right-30 {
	margin-right: 30px;
}
.margin-right-40 {
	margin-right: 40px;
}
.no-margin {
	margin: 0 !important;
}
.no-padding {
	padding: 0 !important;
}
.display-inline {
	width: 100%;
	display: inline-block;
}
.display-hidden {
	display: none
}
.text-small {
	font-size: 0.875em;
}
.text-large {
	font-size: 3em;
}
.text-xl {
	font-size: 3.75em;
}
.text-align--left {
	text-align: left;
}
.text-align--center {
	text-align: center;
}
.text-align--right {
	text-align: right;
}
.text-light {
	font-weight: 300;
}
.text-bold {
	font-weight: 700;
}
.text-uppercase {
	text-transform: uppercase;
}
.text-italic {
	font-style: italic;
}
.text-nowrap {
	white-space: nowrap;
}
.inline {
	display: inline-block;
}
.text-color--accent {
	color: #ef3e42; /* Template accent color */
}
.text-color--main {
	color: #4bad6c; /* Template main color */
}
.text-color--alt {
	color: #41965e; /* Template alternative color */
}
.text-color--default {
	color: #333333; /* Template default color */
}
.text-color--grey {
	color: #888888; /* Template grey color */
}
.bg-color--accent {
	background-color: #ef3e42; /* Template accent background color */
}
.bg-color--main {
	background-color: #4bad6c; /* Template main background color */
}
.bg-color--alt {
	background-color: #41965e; /* Template alternative background color */
}
.bg-color--grey {
	background-color: #888888; /* Template grey background color */
}
.img-block {
	display: block;
	max-width: 100%;
	height: auto;
}
.img-align--center {
	margin: 0 auto;
}
img-block--full img {
	width: 100%;
	height: 100%;
}
.border-header {
	display: inline-block;
	width: 50%;
	height: 2px;
	background-color: #4bad6c;
	border: none;
	border-radius: 0;
	margin: 0 auto;
	padding: 0;
}
.hr-left {
	display: inline-block;
	width: 180px;
	height: 2px;
	background-color: #4bad6c;
	border-radius: 0;
	text-align: left;
}
i.fa {
	margin-left: 5px;
	margin-right: 5px;
}
.effect {
	transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
}
ul.list-unstyled {
	-webkit-padding-start: 0;
	padding-left: 0;
	list-style: none;
}
ul.list-styled {
	list-style: none;
	position: relative;
	padding-left: 20px;
	padding-bottom: 20px;
}
ul.list-styled>li:before {
	display: inline-block;
	content: '\f111';
	font-family: FontAwesome;
	font-size: 0.50em;
	color: #4bad6c;
	position: absolute;
	padding-top: 6px;
	padding-bottom: 6px;
	left: 0;
}
#footer {
	position: relative;
	background-color: #333333 /*Footer Background Color*/
}
.clearfix:before, .clearfix:after {
	content: '';
	display: table;
}
.clearfix:after {
	clear: both;
}
.row {
	margin-left: -15px;
	margin-right: -15px;
}
.row:before, .row:after {
	content: '';
	display: table;
}
.row:after {
	clear: both;
}
.container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

@media screen and (min-width: 1201px) {
.container {
	width: 1170px;
}
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
.container {
	width: 970px;
}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
.container {
	width: 750px;
}
}

@media screen and (min-width: 320px) and (max-width: 767px) {
.container {
	width: 100%;
}
}
/*

COLUMNS SETTINGS

-------------------------

*/

.column-1--desktop, .column-2--desktop, .column-3--desktop, .column-4--desktop, .column-5--desktop, .column-6--desktop, .column-7--desktop, .column-8--desktop, .column-9--desktop, .column-10--desktop, .column-11--desktop, .column-12--desktop, .column-1--small, .column-2--small, .column-3--small, .column-4--small, .column-5--small, .column-6--small, .column-7--small, .column-8--small, .column-9--small, .column-10--small, .column-11--small, .column-12--small, .column-1--tablet, .column-2--tablet, .column-3--tablet, .column-4--tablet, .column-5--tablet, .column-6--tablet, .column-7--tablet, .column-8--tablet, .column-9--tablet, .column-10--tablet, .column-11--tablet, .column-12--tablet, .column-1--mobile, .column-2--mobile, .column-3--mobile, .column-4--mobile, .column-5--mobile, .column-6--mobile, .column-7--mobile, .column-8--mobile, .column-9--mobile, .column-10--mobile, .column-11--mobile, .column-12--mobile {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
}

@media screen and (min-width: 1201px) {
.column-12--desktop {
	width: 100%;
}
.column-11--desktop {
	width: 91.66666667%;
}
.column-10--desktop {
	width: 83.33333333%;
}
.column-9--desktop {
	width: 75%;
}
.column-8--desktop {
	width: 66.66666667%;
}
.column-7--desktop {
	width: 58.33333333%;
}
.column-6--desktop {
	width: 50%;
}
.column-5--desktop {
	width: 41.66666667%;
}
.column-4--desktop {
	width: 33.33333333%;
}
.column-3--desktop {
	width: 25%;
}
.column-2--desktop {
	width: 16.66666667%;
}
.column-1--desktop {
	width: 8.33333333%;
}
.column-1--desktop, .column-2--desktop, .column-3--desktop, .column-4--desktop, .column-5--desktop, .column-6--desktop, .column-7--desktop, .column-8--desktop, .column-9--desktop, .column-10--desktop, .column-11--desktop, .column-12--desktop {
	float: left;
}
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
.column-12--small {
	width: 100%;
}
.column-11--small {
	width: 91.66666667%;
}
.column-10--small {
	width: 83.33333333%;
}
.column-9--small {
	width: 75%;
}
.column-8--small {
	width: 66.66666667%;
}
.column-7--small {
	width: 58.33333333%;
}
.column-6--small {
	width: 50%;
}
.column-5--small {
	width: 41.66666667%;
}
.column-4--small {
	width: 33.33333333%;
}
.column-3--small {
	width: 25%;
}
.column-2--small {
	width: 16.66666667%;
}
.column-1--small {
	width: 8.33333333%;
}
.column-1--small, .column-2--small, .column-3--small, .column-4--small, .column-5--small, .column-6--small, .column-7--small, .column-8--small, .column-9--small, .column-10--small, .column-11--small, .column-12--small {
	float: left;
}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
.column-12--tablet {
	width: 100%;
}
.column-11--tablet {
	width: 91.66666667%;
}
.column-10--tablet {
	width: 83.33333333%;
}
.column-9--tablet {
	width: 75%;
}
.column-8--tablet {
	width: 66.66666667%;
}
.column-7--tablet {
	width: 58.33333333%;
}
.column-6--tablet {
	width: 50%;
}
.column-5--tablet {
	width: 41.66666667%;
}
.column-4--tablet {
	width: 33.33333333%;
}
.column-3--tablet {
	width: 25%;
}
.column-2--tablet {
	width: 16.66666667%;
}
.column-1--tablet {
	width: 8.33333333%;
}
.column-1--tablet, .column-2--tablet, .column-3--tablet, .column-4--tablet, .column-5--tablet, .column-6--tablet, .column-7--tablet, .column-8--tablet, .column-9--tablet, .column-10--tablet, .column-11--tablet, .column-12--tablet {
	float: left;
}
}

@media screen and (min-width: 320px) and (max-width: 767px) {
.column-12--mobile {
	width: 100%;
}
.column-11--mobile {
	width: 91.66666667%;
}
.column-10--mobile {
	width: 83.33333333%;
}
.column-9--mobile {
	width: 75%;
}
.column-8--mobile {
	width: 66.66666667%;
}
.column-7--mobile {
	width: 58.33333333%;
}
.column-6--mobile {
	width: 50%;
}
.column-5--mobile {
	width: 41.66666667%;
}
.column-4--mobile {
	width: 33.33333333%;
}
.column-3--mobile {
	width: 25%;
}
.column-2--mobile {
	width: 16.66666667%;
}
.column-1--mobile {
	width: 8.33333333%;
}
.column-1--mobile, .column-2--mobile, .column-3--mobile, .column-4--mobile, .column-5--mobile, .column-6--mobile, .column-7--mobile, .column-8--mobile, .column-9--mobile, .column-10--mobile, .column-11--mobile, .column-12--mobile {
	float: left;
}
}
/*

BUTTONS STYLE

-------------------------

*/



.btn-main {
	display: inline-block;
	padding: 6px 20px;
	font-size: 0.875em;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	border: none;
	border-radius: 0;
	outline: none;
	cursor: pointer;
	text-transform: uppercase;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.btn-search {
	display: inline-block;
	width: 50px;
	height: 50px;
	background-color: transparent;
	background-image: none;
	border: none;
	border-radius: 0;
	outline: none;
	text-align: center;
	vertical-align: middle;
	color: #fff;
	cursor: pointer;
}
.btn-main--bordered {
	border-width: 1px;
	border-style: solid;
	border-color: #888;
	color: #888;
	background-color: transparent;
}
.btn-main--bordered:hover, .btn-main--bordered:focus {
	background-color: #41965e;
	color: #fff;
	border-color: transparent;
}
.btn-main--primary {
	background-color: #4bad6c;
	color: #fff;
	border: none;
}
.btn-main--primary:hover, .btn-main--primary:focus {
	background-color: #41965e;
}
.btn-upload {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.btn-upload + label {
	font-size: 1em;
	color: #fff;
	padding: 10px 20px;
	background-color: #4bad6c;
	display: inline-block;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
}

.btn-upload:focus + label, .btn-upload + label:hover {
	background-color: #41965e;
}

.btn-upload + label {
	cursor: pointer;
}

.btn-upload + label * {
	pointer-events: none;
}

.file-input {
	display: inline-block;
	width: 100%;
	height: 42px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 14%;
}

.file-upload {
	position: relative;
	margin: 20px 0;
}

#fileUpload {
	float: left;
	position: relative;
	z-index: 11;
}

#FileInput {
	float: left;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
/* Breadcrumb */

.breadcrumb-block {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 20px;
	border-bottom: 1px solid #4bad6c;
}
/* Form Style */

fieldset {
	display: block;
	border: none;
	padding: 0;
}
.input-ctrl {
	display: inline-block;
	width: 100%;
	height: 38px;
	background-color: transparent;
	color: #333333;
	padding: 8px 16px;
	border-width: 1px;
	border-style: solid;
	border-color: #333;
	border-radius: 0;
	font-size: inherit;
	outline: none;
}
.textarea-ctrl {
	display: inline-block;
	width: 100%;
	height: auto;
	background-color: transparent;
	color: #333333;
	padding: 8px 16px;
	border-width: 1px;
	border-style: solid;
	border-color: #333333;
	border-radius: 0;
	font-size: inherit;
	outline: none;
	resize: none;
}
.input-ctrl:hover, .textarea-ctrl:hover, .input-ctrl:focus, .textarea-ctrl:focus {
	border-color: #41965e;
}
/* Error Messages */

.error-msg {
	display: inline-block;
	width: 100%;
	background-color: #ef3e42;
	color: #fff;
	text-align: center;
	padding: 10px 20px;
}
