/**
 *
 * Synergy Framework : PHP Application Framework Developed by Pixelnova, a division of Prodigy Group
 * Copyright 2006-2014, Prodigy Group (http://www.prodigy.org.za)
 *
 * @copyright     Copyright 2006-2014, Pixelnova - A division of Prodigy Group. (http://www.pixelnova.co.za)
 * @link          http://www.pixelnova.co.za Pixelnova Development Agency
 * @since         Synergy Framework v 1.0
 *
 * Layout CSS File
 *  
 */

/**
********************************************************************************
========== HTML Elements:
********************************************************************************
 */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

html, body {
    height: 100%;
}

body {
    font-size: 100%;
    font-weight: 300;
    background: #fff;
    color: #2d2d2d;
    font-family: "open_sansregular","Helvetica Neue","Segoe UI",Verdana,sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;

}

/**
********************************************************************************
========== Typography:
********************************************************************************
 */

p, h1, h2, h3, h4, h5, h6 {
    line-height: 150%;
}

p {
    font-size: 14px;
}

h1 {

}

h2 {

}

h3 {

}

h4 {

}

h5 {

}

h6 {

}

strong {

}

i {

}

/**
********************************************************************************
========== Forms:
********************************************************************************
 */

form {
    margin-bottom: 20px;
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}

label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: bold;
}

input, select, textarea, button {
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    padding: 10px;
    width: 90%;
}

input {
    line-height: normal;
}

select {

}

form textarea {

}

/**
********************************************************************************
========== Buttons and Links:
********************************************************************************
 */

input[type="button"],input[type="reset"],input[type="submit"], button {
    -webkit-appearance: button;
    cursor: pointer;
    width: auto;
}

.button{
    background: #ededed; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #ededed 0%, #dddddd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ededed 0%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ededed 0%,#dddddd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ededed 0%,#dddddd 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ededed 0%,#dddddd 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dddddd',GradientType=0 ); /* IE6-8 */

    padding: 9px;
    font-weight: bold;
    color:#7f7f7f;
    text-decoration: none;
    text-shadow:0px 1px 0px #fff;
    border:1px solid #a7a7a7;
    margin: -1px;
}
.button i{
    float: right;
    margin-top: 2px;
}
.button:hover{
    color: #000;
}
.button:active{
    background:-webkit-linear-gradient(top, #d1d1d1 0%,#ECECEC 100%);
}

.button-green {
    background: #b6e026; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I2ZTAyNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4NmNlMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #b6e026 0%, #86ce00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6e026), color-stop(100%,#86ce00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b6e026 0%,#86ce00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b6e026 0%,#86ce00 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b6e026 0%,#86ce00 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b6e026 0%,#86ce00 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6e026', endColorstr='#86ce00',GradientType=0 ); /* IE6-8 */
    color: #1D4900;
}

.button-large {
    padding: 24px;
    font-size: 18px;
    width: 100%;
    text-align: center;
    display: block;
    margin: 0px;

}

.transparent-button {
    background: none;
    color: #333;
    border: 1px solid #CCC;
    border-radius: 10px;
    padding: 20px;
    text-decoration: none;
    margin: 0 auto;
    font-weight: 400;
    text-align: center;
    margin-left: 0px;
    display: inline-block;
    transition: background 0.3s ease 0s;
}

.transparent-button:hover {
    background: #00b3ff;
    color: #FFF;
}

a {
    background: transparent;
    outline: 0;
    color: #1883ba;
}

a:focus {

}

a:hover {

}

a:active {

}

a:visited {

}

a img {
    border: none;
}

/**
********************************************************************************
========== Tables:
********************************************************************************
 */

table {
    border-spacing: 0;
    border-collapse: collapse;
    border: none;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

thead {

}

tbody {

}

tfoot {

}

tr {

}

th, td {
    padding: 0;
}

th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}



/**
********************************************************************************
========== Lists:
********************************************************************************
 */

ul, ol {
    margin-top: 0;
    margin-bottom: 20px;
}

ul {

}

ol {

}

li {

}

/**
********************************************************************************
========== Images & Media:
********************************************************************************
 */

img {
    border: none;
    vertical-align: middle;
}

img .thumb {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

/**
********************************************************************************
========== Divs and framesets:
********************************************************************************
 */

div {

}

frameset {

}

iframe {

}

span {

}

/**
********************************************************************************
========== Other elements:
********************************************************************************
 */

hr {
    height: 0;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 2px dotted #ccc;
}

.headBlock {
    margin-bottom: 20px;
}

.copyBlock {
    border-top: 2px dotted #ccc;
    border-bottom: 2px dotted #ccc;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

pre {
    overflow: auto;
}

code,kbd,pre,samp {
    font-family: monospace, monospace;
    font-size: 12px;
}

/**
********************************************************************************
========== Positioning & Display Styles:
********************************************************************************
 */

.show, .block {
    display: block;
}

.hide {
    display: none;
}

.left {
    float: left;
}

.right {
    float: right;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

.clear {
    clear: both;
}

#fixed-top {
    position: fixed;
    width: 100%;
    z-index: 1000;
}


/**
********************************************************************************
========== Decorational Styles:
********************************************************************************
 */

.rounded {
    border-radius: 5px;
}

.circle {
    border-radius: 50%;
}

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    transition: opacity .15s linear;
}
.fade.in {
    opacity: 1;
}

/**
********************************************************************************
========== Layout containers
********************************************************************************
 */

.outer-container {
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
}

.inner-container {
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .inner-container {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .inner-container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .inner-container {
        width: 970;
    }
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.outer-container:before, 
.outer-container:after, 
.inner-container:before, 
.inner-container:after, 
.row:before, 
.row:after,
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}

.outer-container:after, 
.inner-container:after, 
.row:after,
.clearfix:after {
    clear:both;
}

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    float: left;
} 

.pull-right {
    right: 0%;
}

.pull-left {
    left: 0%;
}

.col1 {
    width: 8.33333333%;
}

.pull1 {
    right: 8.33333333%;
}

.push1 {
    left: 8.33333333%;
}

.offset1 {
    margin-left: 8.33333333%;
}

.col2 {
    width: 16.66666667%;

}

.pull2 {
    right: 16.66666667%;
}

.push2 {
    left: 16.66666667%;
}

.offset2 {
    margin-left: 16.66666667%;
}

.col3 {
    width: 25%;
}

.pull3 {
    right: 25%;
}

.push3 {
    left: 25%;
}

.offset3 {
    margin-left: 25%;
}

.col4 {
    width: 33.33333333%;
}

.pull4 {
    right: 33.33333333%;
}

.push4 {
    left: 33.33333333%;
}

.offset4 {
    margin-left: 33.33333333%;
}

.col5 {
    width: 41.66666667%;
}

.pull5 {
    right: 41.66666667%;
}

.push5 {
    left: 41.66666667%;
}

.offset5 {
    margin-left: 41.66666667%;
}

.col6 {
    width: 50%;
}

.pull6 {
    right: 50%;
}

.push6 {
    left: 50%;
}

.offset6 {
    margin-left: 50%;
}

.col7 {
    width: 58.33333333%;
}

.pull7 {
    right: 58.33333333%;
}

.push7 {
    left: 58.33333333%;
}

.offset7 {
    margin-left: 58.33333333%;
}

.col8 {
    width: 66.66666667%;
}

.pull8 {
    right: 66.66666667%;
}

.push8 {
    left: 66.66666667%;
}

.offset8 {
    margin-left: 66.66666667%;
}

.col9 {
    width: 75%;
}

.pull9 {
    right: 75%;
}

.push9 {
    left: 75%;
}

.offset9 {
    margin-left: 75%;
}

.col10 {
    width: 83.33333333%;
}

.pull10 {
    right: 83.33333333%;
}

.push10 {
    left: 83.33333333%;
}

.offset10 {
    margin-left: 83.33333333%;
}

.col11 {
    width: 91.66666667%; 
}

.pull11 {
    right: 91.66666667%;
}

.push11 {
    left: 91.66666667%;
}

.offset11 {
    margin-left: 91.66666667%;
}

.col12 {
    width: 100%;
}

.pull12 {
    right: 100%;
}

.push12 {
    left: 100%;
}

.offset12{
    margin-left: 100%;
}

.pull {

}

.push {

}

.offset {

}


.grid {

}

/**
********************************************************************************
========== Commonly Used container styles:
********************************************************************************
 */

#topbar, #header, #navigation, #slider, #actionbar, #main-container, #footer, .container {
    display: block;
}

#wrapper {
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    visibility: none;
}

#topbar {
    background: #000;
}

#header {
    background: #f9f9f9;
    padding-top: 20px;
    padding-bottom: 20px;
}

#navigation {

}

#slider {
    background: #1883ba;
}

#actionbar {
    background: #f3f3f3;
}

#main-container {

}

#content {

}

#leftbar.sidebar, #rightbar.sidebar {

}

#leftbar {
    background: #00b3ff;
    float: left;
    width: 25%;
}

#rightbar {

}

#footer {


}

#modal {

}

#modal-content {

}

/**
********************************************************************************
========== Top Bar Styles
********************************************************************************
 */

/**
********************************************************************************
========== Header Styles
********************************************************************************
 */

#header .logo img {

}

/**
********************************************************************************
========== Navigation Styles
********************************************************************************
 */

#navigation {
    z-index: 2;
    background: #dfc119;
    padding: 0px;
}

#navigation ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    position: relative;
    background: #D0B313;
}

#navigation > ul > li {
    float: left;
    display: inline-block;
    margin: 0px;
    padding: 0px;
    background: #dfc119;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RmYzExOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYWFmMTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  #dfc119 0%, #caaf16 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dfc119), color-stop(100%,#caaf16));
    background: -webkit-linear-gradient(left,  #dfc119 0%,#caaf16 100%);
    background: -o-linear-gradient(left,  #dfc119 0%,#caaf16 100%);
    background: -ms-linear-gradient(left,  #dfc119 0%,#caaf16 100%);
    background: linear-gradient(to right,  #dfc119 0%,#caaf16 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfc119', endColorstr='#caaf16',GradientType=1 );

}

#navigation ul li:hover {
    background: #bda313 !important;
}

#navigation ul li a {

    display: block;
    color: #f9f9f9;
    text-shadow: 0 2px 2px #525252;
    text-transform: none;
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 18px;
    padding: 20px;
    padding-top: 35px;
    padding-bottom: 35px;
    line-height: 1;
}

#navigation ul li i {
    padding: 0px;
    margin: 0px;
    margin-left: 10px;
}

#navigation ul li ul {
    padding: 0px;
    position: absolute;
    width: 250px;
    top:  88;
    left: 25;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-box-shadow: 0 5px 3px 0 rgba(0,0,0,0.5);
    box-shadow: 0 5px 3px 0 rgba(0,0,0,0.5);
    background: #bda313;
    padding-bottom: 10px;
}

#navigation ul li ul li { 
    display: block; 
    margin: 0px;
    padding: 0px;
}

#navigation ul li ul li a {
    text-shadow: none;
    font-size: 16px;
    font-weight: 700;
    display: block; 
    padding: 15px;
    margin: 10px;
    border-bottom: 1px solid #e4d99c;
    color: #fff;
    padding-left: 5px;
}

#navigation ul li ul li a:hover {
    color: #635401;
}

#navigation ul li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

#navigation ul li a, #navigation ul li a:visited {
    text-decoration: none;
    color: #f9f9f9;
}

#navigation ul li a:active, #navigation ul li a.activeLink {
    background: #bda313;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JkYTMxMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjOWFiMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #bda313 0%, #c9ab00 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#bda313), color-stop(100%,#c9ab00));
background: -webkit-linear-gradient(left,  #bda313 0%,#c9ab00 100%);
background: -o-linear-gradient(left,  #bda313 0%,#c9ab00 100%);
background: -ms-linear-gradient(left,  #bda313 0%,#c9ab00 100%);
background: linear-gradient(to right,  #bda313 0%,#c9ab00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bda313', endColorstr='#c9ab00',GradientType=1 );

    color: #f9f4d5;
}

/**
********************************************************************************
========== Slider Styles
********************************************************************************
 */

/**
********************************************************************************
========== Action Bar Styles
********************************************************************************
 */

/**
********************************************************************************
========== Main Container Styles
********************************************************************************
 */

/**
********************************************************************************
========== Content Styles
********************************************************************************
 */

#content {
    text-shadow: 0 1px 0 #fff;
}

.smallDivider {
    font-family: open_sansextrabold;
    width: 25%;
    font-weight: 400;
    text-align: center;
    display: block;
    background: #f5081a;
    color: #FFF;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 100%;
}

/**
********************************************************************************
========== Sidebar Styles
********************************************************************************
 */

/**
********************************************************************************
========== Footer Styles
********************************************************************************
 */

#footer-fix {
    height: 200px;
}


/**
********************************************************************************
========== Commonly Used Widgets:
********************************************************************************
 */

.sidebar {

}

/**
********************************************************************************
========== Custom Styles:
********************************************************************************
 */

.socialBtn {

}

.icon {
    background: #f40819;
    color: #FFF;
    display: block;
    font-size: 60px;
    padding: 20px;
    width: 100px;
    height: 100px;
}

.bigIcon {
    display: block;
    font-size: 60px;
    background: #f40819;
    color: #FFF;
    padding: 20px;
    width: 100px;
    height: 100px;
}

.socialBtn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin: 2px;
    background: #00b3ff;
    padding: 10px;
    font-size: 14px;
    color: #FFF;
}

.faCircle  {
    text-decoration: none;
    text-align: center;
    color: #FFF;
    background: #0D141C;
    border-radius: 100%;
    display: inline-block;
    width: 40px;
    height: 40px;
    font-size:15px;
    padding-top: 12px;
    padding-bottom: 12px;
    margin: 0px;
}

.faCircle:hover {

    color: #FFF;
    background: #f40819;
}

/**
********************************************************************************
========== Ajax Loader:
********************************************************************************
 */

.ajaxLoader {
    background: rgba(0, 0, 0, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2000;
    display: block;
}

.loading {
    top: 20%;
    bottom: 50%;
    background: rgba(0, 50, 250, 0);
    position: relative;
    margin: 5em auto 0 auto;
    width: 3em; height: 3em;
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
}

.loading,
.loading:before,
.loading:after {
    border-radius: 100%;
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    -ms-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

.loading:before,
.loading:after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: inherit; height: inherit;
}

.loading:before {
    background: rgba(200, 250, 100, 0);
    -webkit-animation-name: ring;
    -moz-animation-name: ring;
    -ms-animation-name: ring;
    animation-name: ring;
}

.loading:after {
    background: rgba(250, 0, 200, 0);
    -webkit-animation-name: ring2;
    -moz-animation-name: ring2;
    -ms-animation-name: ring2;
    animation-name: ring2;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    85%, 100% {  
        -webkit-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@-moz-keyframes rotate {
    0% {
        -moz-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    85%, 100% {  
        -moz-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@-ms-keyframes rotate {
    0% {
        -ms-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    85%, 100% {  
        -ms-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@keyframes rotate {
    0% {
        transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    85%, 100% {  
        transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@-webkit-keyframes ring {
    0% {
        -webkit-transform: scaleX(0.1) scaleY(0.5);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    75%, 100% {
        -webkit-transform: scaleX(2) scaleY(2.1);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@-moz-keyframes ring {
    0% {
        -moz-transform: scaleX(0.1) scaleY(0.5);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    75%, 100% {
        -moz-transform: scaleX(2) scaleY(2.1);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@-ms-keyframes ring {
    0% {
        -ms-transform: scaleX(0.1) scaleY(0.5);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    75%, 100% {
        -ms-transform: scalex(2) scaleY(2.1);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@keyframes ring {
    0% {
        transform: scaleX(0.1) scaleY(0.5);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    75%, 100% {
        transform: scaleX(2) scaleY(2.1);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@-webkit-keyframes ring2 {
    0% {
        -webkit-transform: scaleX(0.5) scaleY(0.1);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    65%, 100% {
        -webkit-transform: scaleX(2) scaleY(2.1);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@-moz-keyframes ring2 {
    0% {
        -moz-transform: scaleX(0.5) scaleY(0.1);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    65%, 100% {
        -moz-transform: scaleX(2) scaleY(2.1);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@-ms-keyframes ring2 {
    0% {
        -ms-transform: scaleX(0.5) scaleY(0.1);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    65%, 100% {
        -ms-transform: scaleX(2) scaleY(2.1);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@keyframes ring2 {
    0% {
        transform: scaleX(0.5) scaleY(0.1);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    65%, 100% {
        transform: scaleX(2) scaleY(2.1);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}