/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 29/ago/2018, 17:16:15
    Author     : grodrigues
*/ 

:root{
    --colorfirst: #f05a57;
    --colorsecond: #f05a57;
    --white: #fff;
    --black: #000000;
    --verydarkgrey: #191919;
    --darkgrey: #323232; 
    --grey: #646464;
    --lightgrey: #969696;
    --verylightgrey: #dcdcdc;
}
.var_use_example {
    background-color: var(--white);
}

.bg_colorfirst {
  background-color: var(--colorfirst) !important;
}
.color_colorfirst {
  color: var(--colorfirst) !important;
}
.bg_colorsecond {
  background-color: var(--colorsecond) !important;
}
.color_colorsecond {
  color: var(--colorsecond) !important;
}
.bg_black {
  background-color: var(--black) !important;
}
.color_black {
  color: var(--black) !important;
}
.bg_verydarkgrey {
  background-color: var(--verydarkgrey) !important;
}
.color_verydarkgrey {
  color: var(--verydarkgrey) !important;
}
.bg_darkgrey {
  background-color: var(--darkgrey) !important;
}
.color_darkgrey {
  color: var(--darkgrey) !important;
}
.bg_grey {
  background-color: var(--grey) !important;
}
.color_grey {
  color: var(--grey) !important;
}
.bg_lightgrey {
  background-color: var(--lightgrey) !important;
}
.color_lightgrey {
  color: var(--lightgrey) !important;
}
.bg_verylightgrey {
  background-color: var(--verylightgrey) !important;
}
.color_verylightgrey {
  color: var(--verylightgrey) !important;
}
.bg_white {
  background-color: var(--white) !important;
}
.color_white {
  color: var(--white) !important;
}


@font-face {
  font-family: 'Aero-Matics-Bold'; 
  font-style: normal;
  src: url('../fonts/Aero-Matics-Bold.ttf');
}

@font-face {
  font-family: 'Aero-Matics-Light';
  font-style: normal;
  src: url('../fonts/Aero-Matics-Light.ttf');
}

@font-face {
  font-family: 'Aero-Matics-Regular'; 
  font-style: normal;
  src: url('../fonts/Aero-Matics-Regular.ttf');
}

@font-face {
  font-family: 'OpenSans-Regular'; 
  font-style: normal;
  src: url('../fonts/OpenSans-Regular.ttf');
}



a {
    color: var(--colorfirst) !important;
}

h1,
.h1 {
  font-family: Aero-Matics-Bold;
  font-size: 40px;
  line-height: 60px;
  color: var(--darkgrey);
  font-weight: normal !important;
}
h2,
.h2 {
  font-family: Aero-Matics-Light;
  font-size: 40px;
  line-height: 48px;
  color: var(--lightgrey);
  font-weight: normal !important;
}
h3,
.h3 {
  font-family: Aero-Matics-Bold;
  font-size: 24px;
  line-height: 32px;
  color: var(--colorfirst);
  font-weight: normal !important;
}
h4,
.h4 {
  font-family: Aero-Matics-Light;
  font-size: 18px;
  line-height: 26px;
  color: var(--lightgrey);
  font-weight: normal !important;
}
h12,
.h12 {
  font-family: Aero-Matics-Regular;
  font-size: 18px;
  line-height: 28px;
  color: var(--white);
  font-weight: normal !important;
}
p,
.p {
  font-family: OpenSans-Regular;
  font-size: 14px;
  line-height: 24px;
  color: var(--grey);
  font-weight: normal !important;
}
.row > .h1 *,
.row > .h2 *,
.row > .h3 *,
.row > .h4 *,
.row > .h12 * {
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  font-style: inherit !important;
  color: inherit !important;
}
/* fim de estilos pré definidos */
.menu-big-font {
  font-size: 60px;
  line-height: 80px;
  color: #d32229;
}
.menu-small-font {
  font-size: 16px;
  line-height: 24px;
  color: #969696;
}

.trapezoid {
    background-color:  var(--colorfirst);
    border-top: 150px solid var(--white);
    border-left: 180px solid transparent;
    border-right: 2000px solid transparent;
    border-bottom: 50px solid transparent;
    height: 0;
    width: 0px;
    position: absolute;
    z-index: -1;        
}

.trapezoid_home {
    background-color:  transparent;
    border-top: 150px solid var(--white);
    border-left: 180px solid transparent;
    border-right: 2000px solid transparent;
    border-bottom: 50px solid transparent;
    height: 0;
    width: 0px;
    position: absolute;
    z-index: -1;        
}
 
.footer_copyright a{
    text-decoration: none;
    color:#fff !important;
    font-weight: bolder;
}

.sticky_menu_desktop {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    right: 0;
}

#content-content_holder{
    padding-top: 30px;
}


/* CHECK BOX CUSTOM */

/* The container */
.checkbox_item_custom .container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 17px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox_item_custom .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  left: 0;
  top:10px;
}

/* Create a custom checkbox */
.checkbox_item_custom .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border: 1px solid var(--colorfirst);
}

/* On mouse-over, add a grey background color */
.checkbox_item_custom .container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox_item_custom .container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbox_item_custom .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox_item_custom .container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox_item_custom .container .checkmark:after {
    left: 8px;
    top: 3px;
    width: 7px;
    height: 14px;
    border: solid var(--white);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* FIM CHECK BOX CUSTOM */