/*
--------------------------------------------------------* 

[Boots4, Main Stylesheet ]

    Name         : Boots4 - Responsive Onepage Resume Template for bootstrap 4

    Version      :  4.0.0-alpha (http://getbootstrap.com)

    Author       :  Technext

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

   TABLE OF CONTENTS:
  ====================

    1 ) Font Import From Google Fonts

    2 ) Preloader Styles

    3 ) General Rulas

    4 ) Homepage Styles

        - ( a ) Homepage
        - ( b ) Introduction Section
        - ( c ) Navigation Menu

    5 ) Close Button

    6 ) General Rules for Content Pages Fixed Image

    7 ) Profile Page

        - ( a ) Story of Glory
        - ( b ) What Can I Do
        - ( c ) Some Facts

    8 ) Resume Page

        - ( a ) Education Section
        - ( b ) Experience Section
        - ( c ) Skills Section

    9 ) Portfolio Page

        - ( a ) Portfolio Section
        - ( b )  Testimonial Section

    10 ) Contact Page

        - ( a )  Contact Form
        - ( b )  Contact Details

    11 ) Footer

--------------------------------------------------------
*/


/*-----------------------------------
   1 ) Font Import From Google Fonts
  -----------------------------------*/

@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,300,500);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

/*----------------------
   2 ) Preloader Styles
  ----------------------*/

@font-face {
    font-family: "Assinatura";
    src: url("../fonts/hanshand.TTF");
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #1a1b23;
    z-index: 10000;
}

.loader {
    position: absolute;
    width: 42px;
    height: 42px;
    -webkit-animation: preloader_6 5s infinite linear;
    animation: preloader_6 5s infinite linear;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
}

.loader span {
    width: 20px;
    height: 20px;
    position: absolute;
    background: red;
    display: block;
    -webkit-animation: preloader_6_span 1s infinite linear;
    animation: preloader_6_span 1s infinite linear;
}

.loader span:nth-child(1) {
    background: #2ecc71;
}

.loader span:nth-child(2) {
    left: 22px;
    background: #9b59b6;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}

.loader span:nth-child(3) {
    top: 22px;
    background: #3498db;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}

.loader span:nth-child(4) {
    top: 22px;
    left: 22px;
    background: #f1c40f;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

@-webkit-keyframes preloader_6_span {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes preloader_6_span {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


/*-------------------
   3 ) General Rulas
  -------------------*/

html {
    font-size: 16px;
}

body {
    font-size: 1em;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #343333;
}

html,
body,
textarea,
button,
input {
    /*font-family: 'Playfair Display', serif;*/
    font-family: 'Montserrat', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    /*font-family: 'Raleway', sans-serif;*/
}

p {
    /*font-size: 14px;*/
    font-size: 1em;
    line-height: 1.42;
}

h1 {
    /*font-size: 63px;*/
    font-size: 5.063em;
    font-weight: 400;
}

h2 {
    font-size: 3.375em;
    font-weight: 400;
}

h2.small-heading {
    padding: 60px 0 10px 0;
    font-size: 2.25em;
    margin-bottom: 60px;
    position: relative;
    display: block;
    text-align: center;
}

h2.small-heading:after {
    position: absolute;
    font-family: 'FontAwesome';
    font-size: 35px;
    content: "\f107";
    left: 48%;
    bottom: -28px;
    color: #073a63;
    background-color: #ffffff;
    padding: 0px 8px;
}

h2.small-heading:before {
    position: absolute;
    bottom: -10px;
    content: "";
    height: 2px;
    background-color: #073a63;
    display: block;
    width: 23%;
    left: 38%;
}

h3 {
    font-size: 2.25em;
    font-weight: 400;
}

h6 {
    font-size: 10px;
}

body {
    overflow-x: hidden;
}


/*---------------------
   4 ) Homepage Styles
  ---------------------*/


/* ( a ) Homepage */

.home-page {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
}


/* ( b ) Introduction Section */


.introduction {
    float: left;
    padding: 0;
    overflow: hidden;
    position: relative;
    
    background: url("../img/estrada.jpg") no-repeat center top;
    background-position: center;
 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.introduction .footer{
    position:absolute;
    bottom:0;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.introduction p{
    font-family: 'Assinatura'; 
    font-size: 30px; 
    color: white;
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 1);
}

.mask {
    width: 100%;
    height: 100%;
    opacity: 0.8;
    filter: alpha(opacity=80);
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.48);
}

.intro-content {
    font-family: 'Playfair Display', serif;
    position: relative;
    z-index: 10;
    top: 20%;
    display: table;
    margin: 0 auto;
    padding-top: 25px;
    /*-webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);*/
}

.intro-content h1 {
    color: #4b4b4b;
    display: block;
    font-family: 'Playfair Display', serif;
    padding-left: 50px;
    margin-bottom: -15px;
    font-size: 35px;
    font-weight: 700;
}

.intro-content span {
    color: #6f5499;
    font-size: 135px;
    font-weight: 700;
    line-height: 0px;
    letter-spacing: 1px;
}

.intro-content span.number {
    font-size: 15em;
}

.intro-content .slogan-text {
    font-weight: 400;
    font-size: 25px;
    padding-left: 21px;
}

.social-media {
    font-size: 35px;
    margin-top: 50px;
    text-align: center;
}

.social-media a {
    color: #01213B;
    text-decoration: none;
    outline: 0 none;
    padding: 0 10px;
}

.social-media a + .tooltip > .tooltip-inner {
    background-color: transparent;
    color: #761616;
    font-size: 16px;
}

.social-media a + .tooltip > .tooltip-arrow {
    border-bottom-color: transparent;
}


/*Bootstrap tooltips Customized*/

.social-media a:hover {
    color: #761616;
}


/* ( c ) Navigation Menu */

.menu {
    float: left;
    padding: 0;
    position: relative;
    background: #000;
}

.menu > div {
    width: 50%;
    height: 50%;
    overflow: hidden;
    float: left;
    position: relative;
    cursor: pointer;
}

.menu > div > img {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: -webkit-transform 1s linear;
    transition: -webkit-transform 1s linear;
    transition: transform 1s linear;
    -webkit-transition: -webkit-transform 1s linear, -webkit-transform 1s linear;
    transition: transform 1s linear, -webkit-transform 1s linear;
}

.menu > div:hover > img {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.heading {
    position: relative;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.heading i {
    background: transparent;
    border-radius: 50%;
    border: 2px solid #ffffff;
    color: #ffffff;
    display: block;
    font-size: 40px;
    height: 80px;
    line-height: 80px;
    margin: auto auto 10px;
    text-align: center;
    /*box-shadow: 0 0 0 0 rgba(256, 256, 256, 0.2);*/
    width: 80px;
    -webkir-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.menu > div:hover .heading i {
    box-shadow: 0 0 0 50px rgba(256, 256, 256, 0);
}

.menu > div h2 {
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 35px;
    font-weight: 100;
    text-align: center;
    margin: 0;
    /*opacity: 0.8;*/
    letter-spacing: 1px;
}

.menu > div h2 span {
    color: #00B796;
}


/*------------------
   5 ) Close Button
  ------------------*/

.close-btn {
    background: url(../img/close.png);
    z-index: 1000;
    cursor: pointer;
    width: 40px;
    height: 40px;
    position: fixed;
    right: 3%;
    top: 30px;
    background-size: cover;
}


/*-------------------------------------------------
   6 ) General Rules for Content Pages Fixed Image
  -------------------------------------------------*/

.page {
    display: none;
}

.full-height {
    min-height: calc(100vh - 68px);
}

.profile-page,
.service-page,
.portfolio-page,
.contact-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.image-container {
    height: 100vh;
    position: fixed;
    padding: 0;
    overflow: hidden;
    right: 0;
}

.main-heading {
    position: absolute;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    left: 15%;
    transform-origin: left;
    -webkit-transform-origin: left;
    -moz-transform-origin: left;
    -ms-transform-origin: left;
    -o-transform-origin: left;
    bottom: 55%;
}

.main-heading h1 {
    color: #fff;
    font-size: 50px;
    position: relative;
    text-transform: capitalize;
    text-align: left;
}


/*.main-heading h1:after {
    background-color: #00B796;
    position: absolute;
    content: "";
    top: 100%;
    left: 0;
    width: 400px;
    height: 6px;
}*/

.content-container {
    left: 0;
    position: relative;
    padding: 0;
    background: #ffffff;
}


/*------------------
   7 ) Profile Page
  ------------------*/


/* ( a ) Story of Glory */

.profile-page .image-container {
    background: #01213B;
    background-size: cover;
    background-position: bottom;
}

.profile-page .thumbnail {
    position: relative;
    padding: 0px;
    margin-bottom: 20px;
}


.profile-page .thumbnail img {
    width: 100%;
    border: 3px solid #01213B;
}

.profile-page .caption{
    text-align: center;
    padding-top: 20px;
}

.services {
    text-align: center;
    padding: 15px;
    -webkir-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.facts {
    /*background: url(../img/about_us_video.png);*/
    /*background-attachment: fixed;*/
    margin-bottom: 20px;
}

.facts-overlay {
    padding: 40px;
    background-color: rgb(35, 46, 52);
}

.facts i {
    color: #ffffff;
    margin-bottom: 20px;
}

.facts p {
    color: #fff;
}

.facts p.count {
    font-size: 29px;
}

.team-member-box {
    background-color: #f3f3f3;
    border: 1px solid #F3f3f3;
    margin-bottom: 50px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.team-member-box h4 {
    margin-bottom: 5px;
    margin-top: 15px;
    /*font-size: 18px;*/
    font-size: 1.5em;
}

.team-member-box p {
    color: #a3a2a2;
}

.team-member-box:hover {
    box-shadow: 3px 5px 9px #dfdfdf;
}

.video {
    box-shadow: 2px 5px 9px #dfdfdf;
}

.video iframe {
    width: 560px;
    height: 315px;
}

.about-us-desc p:first-child {
    font-size: 17px;
}

.about-us-desc p:last-child {
    -webkit-column-count: 2;
    /* Chrome, Safari, Opera */
    -moz-column-count: 2;
    /* Firefox */
    column-count: 2;
    -webkit-column-gap: 30px;
    /* Chrome, Safari, Opera */
    -moz-column-gap: 30px;
    /* Firefox */
    column-gap: 30px;
    font-size: 14px;
}


/* First, define the common wrapper elements
   Padding-top is for the fixed height header of the embedded content */

.youtubeWrapper {
    /*position: relative;*/
    padding-top: 30px;
    height: 0;
    /*overflow: hidden;*/
    padding-bottom: 56.25%;
}


/* For each content source, set the IFRAME to be top left and occupy 100% of width and height of the containing DIV wrapper */

.youtubeWrapper iframe,
.youtubeWrapper object,
.youtubeWrapper embed {
    /*position: absolute;*/
    top: 0;
    left: 0;
    /*width: 100%;*/
    /*height: 100%;*/
}


/*--------------------
   9 ) Portfolio Page
  --------------------*/


/* ( a ) Portfolio Section */

.portfolio-page .image-container {
    background: #004824;
    background-size: cover;
    background-position: bottom;
}

.project-controls {
    padding: 20px 0;
    text-align: center;
}

.filter {
    background: none;
    border: 1px solid #00B796;
    color: #00B796;
    margin: 10px 0;
    padding: 10px 25px;
    -webkir-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.filter:hover {
    background: #00B796;
    color: #fff;
}

.filter.active {
    background: #00B796;
    color: #fff;
}

#projects > .mix {
    display: none;
}

.projet-items {
    padding: 20px;
}


/*----- Hover Effect Portfolio Image --------*/

.project {
    width: 100%;
    overflow: hidden;
    margin: 15px 0;
    position: relative;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}

.project img {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.project .ovrly {
    background: rgba(0, 183, 150, 0.5);
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.project .buttons {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.project .buttons a {
    -webkit-transform: scale(5);
    -ms-transform: scale(5);
    transform: scale(5);
    opacity: 0;
    filter: alpha(opacity=0);
    margin: 0 2px;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    float: left;
    display: block;
    line-height: 40px;
    outline: none;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    width: 40px;
    height: 40px;
    color: #343333;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
}

.project .buttons .fa-search {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.project:hover .buttons a {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    filter: alpha(opacity=100);
}

.project:hover .ovrly {
    opacity: 1;
    filter: alpha(opacity=100);
}


/*----- Hover Effect Portfolio Image [ END ] --------*/

.pop-up-box {
    display: none;
}

.popup_content {
    max-width: 500px;
    border: 5px solid #00B796;
    background: #fff;
}

.popup_content img {
    display: block;
    width: 100%;
    background: #fff;
    margin: 0 auto;
}

.popup_content .popup-content {
    padding: 15px;
}

.popup_content h3 {
    text-align: center;
}

.popup_content a {
    border: 1px solid #00B796;
    color: #00B796;
    display: block;
    width: 150px;
    margin: 30px auto;
    padding: 10px 25px;
    text-decoration: none;
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.popup_content a:hover {
    background: #00B796;
    color: #fff;
}


/*----- Popup Sty;es [ END ] --------*/


/*====================================
            Service Page
=======================================*/

.service-page .image-container {
    background: #761616;
    background-size: cover;
    background-position: bottom;
}


/*---------  service-flip------------------*/

.flipper i {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: #01213B;
    color: white;
    margin-top: 40px;
    font-size: 25px;
    border-color: #fff;
    line-height: 58px;
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -29px;
    margin-top: -29px;
    display: block;
}

.flip-container {
    -webkit-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}

.flip-container:hover .flipper,
.flip-container.hover .flipper {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotate(-180deg);
    -sand-transform: rotate(-180deg);
    transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
    height: auto;
    min-height: 350px;
}

.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}

.faq-desc-item {
    margin: 15px 10px;
    border-radius: 0%;
}


.front,
.back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 0%;
}

.front {
    z-index: 2;
    background-color: #f4f4f4;
    width: 100%;
}

.front h5,
.back p {
    margin-top: 20px;
}

.front h5 {
    line-height: 31px;
    font-weight: 400;
    position: absolute;
    bottom: 35%;
    left: 50%;
    right: 50%;
    margin-left: -50%;
    margin-top: -29px;
    width: 100%;
}

.back {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotate(-180deg);
    -sand-transform: rotate(-180deg);
    transform: rotateY(180deg);
    background-color: #01213B;
    z-index: 99999999;
    position: relative;
}

.back h5 {
    margin-top: 40px;
    color: white;
    padding-top: 40px;
}

.back p {
    text-align: center;
    padding: 0 20px;
    font-family: 'Raleway', sans-serif;
    line-height: 1.82em;
    color: white;
}


/*=================================== pricing ======================================*/

.price-box {
    padding: 25px;
    border: 1px solid #f4f4f4;
    background-color: #f4f4f4;
    margin: 15px 0px;
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.price-box p {
    line-height: 22px;
}

.price-box .pricing-catagory-name {
    color: #000;
    margin-bottom: 10px;
}

.price-box p span.price {
    color: #ed1c24;
}

.price-box p:nth-child(2) {
    color: #ed1c24;
}

.price-box ul {
    padding: 0;
    margin: 0;
}

.price-box ul li {
    font-size: 13px;
    list-style: none;
    padding: 3px 0px;
}

.price-box ul li.unavailabe {
    color: #969595;
}

.price-box .btn {
    background-color: #313131;
    color: #fff;
    border-radius: 0px;
    margin-top: 20px;
    font-size: 13px;
    padding: 5px 20px;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.price-catagory:hover .price-box {
    border: 1px solid #ed1c24;
}

.price-catagory:hover .price-box .btn {
    background-color: transparent;
    color: #ed1c24;
    border: 1px solid #ed1c24;
}

.price-box .btn:hover {
    background-color: #ed1c24 !important;
    color: #ffffff !important;
}


/*---------------------------- 4.4 sponsor  -----------------------------*/

.sponsor {
    padding: 3.1269em 0;
}

#sponsor-list img {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

#sponsor-list img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
}

#sponsor-list {
    margin-top: 15px;
    margin-bottom: 40px;
}


/*-------------------
   10 ) Contact Page
  -------------------*/

.contact-info {
    margin-bottom: 30px;
    padding: 20px 0px 20px 0px;
}

.contact-info .data {
    margin-bottom: 25px;
    margin-left: 25px;
}

.contact-info .data i {
    background: #935B25;
    border-radius: 50%;
    border: 1px solid #935B25;
    color: #ffffff;
    font-size: 25px;
    height: 60px;
    line-height: 60px;
    margin-right: 20px;
    text-align: center;
    width: 60px;
}

.contact-info .data span {
    padding-top: 18px;
}

.contact-info td{
    padding-bottom: 20px;
}

.contact-info .row [class*="col-"]{
    //height: 340px;
}

.contact-info .data:first-child span {
    padding-top: 7px;
}


/* =-=--=-=-=-=-=-==-=-=-=-  2.4 Form   =-=-=-=-==-=-==-====-==-=- */

.form-group {
    margin-bottom: 20px;
}

.form-control {
    background-color: #f9f9f9;
    border: 2px solid #935B25;
    border-radius: 0px;
    box-shadow: none;
    height: auto;
    padding: 14px 28px;
}

.form-control:focus {
    border: 2px solid #935B25;
    -webkit-box-shadow: 0px 0px 8px 5px rgba(199, 132, 67, 0.75);
    -moz-box-shadow:    0px 0px 8px 5px rgba(199, 132, 67, 0.75);
    box-shadow:         0px 0px 8px 5px rgba(199, 132, 67, 0.75);
}

.cotacao-form .form-control {
    background-color: #f9f9f9;
    border: 2px solid #004824;
    border-radius: 0px;
    box-shadow: none;
    height: auto;
    padding: 14px 28px;
}

.cotacao-form .form-control:focus {
    border: 2px solid #004824;
    -webkit-box-shadow: 0px 0px 8px 5px rgba(0, 72, 36, 0.75);
    -moz-box-shadow:    0px 0px 8px 5px rgba(0, 72, 36, 0.75);
    box-shadow:         0px 0px 8px 5px rgba(0, 72, 36, 0.75);
}

::-webkit-input-placeholder {
    color: #969595;
}

:-moz-placeholder {
    /* Firefox 18- */
    color: #969595;
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: #969595;
}

:-ms-input-placeholder {
    color: #969595;
}

.contact-page .image-container {
    background: #935B25;
    background-size: cover;
    background-position: bottom;
}

input#cfsubmit {
    background-color: transparent;
    border: 2px solid #935B25;
    border-radius: 0px;
    color: #935B25;
    margin: 20px 0px 40px 0px;
    box-shadow: none;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input#cfsubmit:hover {
    background-color: #935B25;
    color: #ffffff;
    -ms-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(150, 144, 144, 0.5);
    -o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(150, 144, 144, 0.5);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(150, 144, 144, 0.5);
}

.cotacao-form input#cfsubmit {
    background-color: transparent;
    border: 2px solid #004824;
    border-radius: 0px;
    color: #004824;
    margin: 20px 0px 40px 0px;
    box-shadow: none;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.cotacao-form input#cfsubmit:hover {
    background-color: #004824;
    color: #ffffff;
    -ms-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(150, 144, 144, 0.5);
    -o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(150, 144, 144, 0.5);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(150, 144, 144, 0.5);
}

#contactFormResponse {
    margin-top: 12px;
}



//#map-canvas {
 //   width: 100%;
 //   height: 250px;
//}


/*-------------
   11 ) Footer
  -------------*/

.footer {
    padding: 20px 0px 10px 0px;
}

.profile-page .footer {
    background-color: #01213B;
}

.portfolio-page .footer {
    background-color: #004824;
}

.service-page .footer {
    background-color: #761616;
}

.contact-page .footer {
    background-color: #935B25;
}

.footer .copyright {
    color: #fff;
    float: left;
}

.footer .author {
    float: right;
    line-height: 1;
    color: #fff;
}

.footer a {
    text-decoration: none;
    color: #5F9EA0;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

.contact-page .footer a {
    color: #F1AD5C;
}

.footer a:hover {
    color: #f4f4f4;
}


/*=============================================
                Media query
===============================================*/


@media (max-width: 1056px) and (min-width: 992px){

    .main-heading h1{
        font-size: 45px;
    }
}


@media (max-width: 991px) and (min-width: 768px){

    .intro-content h1{
        padding-left: 30px;
    }

    .intro-content span{
        font-size: 100px;
    }

    .intro-content span.number{
        font-size: 12em;
    }

    .intro-content .slogan-text{
        padding-left: 21px;
        margin-top: 22px;
    }

    .main-heading h1{
        font-size: 35px;
    }
}


@media (max-width: 767px) and (min-width: 450px){

    .introduction{
        text-align: center;
        z-index: 9999;
        background-color: #fff;
    }
    
    .introduction p{
        font-family: 'Assinatura'; 
        font-size: 25px; 
        color: white;
        text-shadow: 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 1);
    }

    .intro-content{
        top: 6%;
    }

    .intro-content h1{
        margin-bottom: 12px;
        padding-left: 0px;
    }

    .intro-content span{
        font-size: 75px;
    }

    .intro-content span.number{
        font-size: 9em;
    }

    .intro-content .slogan-text{
        margin-top: 15px;
        font-size: 16px;
    }

    .social-media{
        margin-top: 0px;
    }

    .social-media a{
        font-size: 22px;
        padding: 5px;
    }

    .close-btn{
        background: url(../img/close_sm.png);
        top: 5px;
    }

    .footer .copyright{
        float: none;
        text-align: center;
        margin-bottom: 10px;
    }

    .footer .author{
        float: none;
        text-align: center;
    }

    .popup_cont{
        top: 0px !important;
        left: 0px !important;
        right: 0px !important;
        width: 96% !important;
    }

    .home-page{
        min-height: 641px;
        overflow: auto;
        position: absolute;
    }
    
    .heading i {
        background: transparent;
        border-radius: 50%;
        border: 2px solid #ffffff;
        color: #ffffff;
        display: block;
        font-size: 30px;
        height: 80px;
        line-height: 80px;
        margin: auto auto 10px;
        text-align: center;
        /*box-shadow: 0 0 0 0 rgba(256, 256, 256, 0.2);*/
        width: 80px;
        -webkir-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    .menu > div:hover .heading i {
        box-shadow: 0 0 0 50px rgba(256, 256, 256, 0);
    }

    .menu > div h2 {
        color: #fff;
        font-family: 'Raleway', sans-serif;
        font-size: 25px;
        font-weight: 100;
        text-align: center;
        margin: 0;
        /*opacity: 0.8;*/
        letter-spacing: 1px;
    }
    
}

@media (max-width: 450px){
    .introduction p{
        font-family: 'Assinatura'; 
        font-size: 18px; 
        color: white;
        text-shadow: 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 1);
    }
    
    .heading i {
        background: transparent;
        border-radius: 50%;
        border: 2px solid #ffffff;
        color: #ffffff;
        display: block;
        font-size: 20px;
        height: 60px;
        line-height: 60px;
        margin: auto auto 10px;
        text-align: center;
        /*box-shadow: 0 0 0 0 rgba(256, 256, 256, 0.2);*/
        width: 60px;
        -webkir-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    .menu > div:hover .heading i {
        box-shadow: 0 0 0 50px rgba(256, 256, 256, 0);
    }

    .menu > div h2 {
        color: #fff;
        font-family: 'Raleway', sans-serif;
        font-size: 15px;
        font-weight: 100;
        text-align: center;
        margin: 0;
        /*opacity: 0.8;*/
        letter-spacing: 1px;
    }
}