// Variables

//Fonts 
$os:'Oswald', sans-serif;
$roboto:'Roboto', sans-serif; 
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,700|Roboto:300,300i,400,400i,500,500i,700,700i');

/*Color Variables*/ 
$bc: #f6b60b;
$h2: #222222;
$p: #555555;  

// Mixins
@mixin transition($property: all, $duration: 300ms, $animate: linear, $delay:0s){
    transition: $property $duration $animate $delay; 
}

// Placeholder Mixins 
@mixin placeholder {
    &.placeholder { @content }
    &:-moz-placeholder { @content }
    &::-webkit-input-placeholder { @content }
}

// Selection Color
::selection{
	background-color: #f8b81d;
    color: #FFFFFF;
}   

/* Button */
.button_all{ 
    font: 700 18px/59px $roboto;
    width: 180px;
    text-align: center;
    background:$bc;
    display: block; 
    border: 0;
    color: $h2; 
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    padding: 0;
    &:before{
        content: "";
        position: absolute;
        z-index: -1;
        background: $h2;
        top: 0; 
        bottom: 0;
        left: 0;
        display: block;
        right: 0;
        transform: scaleY(0); 
        transform-origin: 50%; 
        transition-property: transform; 
        transition-duration: 0.3s; 
        transition-timing-function: ease-out
    } 
    &:hover, &:focus{
        color: #fff !important;
        &:before{
            transform: scaleY(1);
        }
    }
}

/* Section Title*/
.tittle{
    text-align: center;
    text-transform: uppercase;
    h2{
        font: 400 24px $os;
        color: $h2;
        padding-top: 90px;
        position: relative;
        &:after{
            content: "";
            position: absolute;
            background: $bc;
            height: 5px;
            width: 60px;
            left: 50%;
            transform: translateX(-50%);
            bottom: -30px;
        }
    }
    h4{
        font: 400 14px $roboto;
        color: $p;
        padding-top: 55px;
    }
}

/* Subtittle */
.subtittle{ 
    h2{
        font: 700 36px $roboto;
        color: $h2;
        text-transform: uppercase;
        position: relative;
        margin-bottom: 20px;
        &:after{
            content: "";
            position: absolute;
            height: 2px;
            width: 80px;
            background: $h2;
            left: 0;
            bottom: -22px;
        }
    }
    h5{
        font: 400 14px $roboto;
        color: $p;
        padding-top: 22px;
    }
}
/* Preloader */ 
.preloader{
    position:fixed;
    left:0px; top:0px;
    width:100%;
    height:100%;
    z-index:999999;
    background-color:#ffffff;
    background-position:center center;
    background-repeat:no-repeat;
    background-image:url(../images/preloader.gif);
}