@import url(http://fonts.googleapis.com/css?family=Roboto);


/*======================================================================================================
                            Global
=======================================================================================================*/

* {
    outline: none !important;
    box-shadow: none;
}
   @font-face {
    font-family: 'lawless-font';
    src: url('../fonts/lawless-webfont.woff2') format('woff2'),
         url('../fonts/lawless-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.button{
    background: #d8396b;
    border-color: #d8396b;
    border-radius: 50px;
    padding: 15px 25px;
    color:white;
    font-family: 'roboto', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 17px;
    text-align:center;
}


.button a:link a:visited{
    text-decoration: none;
}

.text-center{
    color: white;
}
.product-text{
    color: white;
}
.navbar-default{
    background-color: rgba(255, 255, 255, 0);
}
body {
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
}

.arrow{
    position: absolute;
    top: 88%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrow span{
    display: block;
    width: 24px;
    height: 24px;
    border-bottom: 5px solid rgb(58, 61, 63);
    border-right: 5px solid rgb(58, 61, 63);
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
.arrow span:nth-child(2){
      animation-delay: -0.2s;
}
.arrow span:nth-child(3){
      animation-delay: -0.4s;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}


p {
    font-size: 17px;
    font-family: 'Helvetica', sans-serif;
    letter-spacing: 1px;
    line-height: 31px;
}
.row
{
    margin-right: 0px;
    margin-left: 0px;
}
#heading-text 
{
    padding-top: 10px;
}
#heading-text h3 {
    font-size: 49px;
    font-family: 'Roboto', sans-serif;
    padding-top: 58px;
    text-transform: uppercase;
    color: white !important;
}

#heading-text p {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    padding: 5px 0px;
    color: white !important;
}
.main_content 
{
    padding: 50px 0px;
}
/*-----------------------------------------------------------------------------------------------------
                                navbar
-------------------------------------------------------------------------------------------------------*/
#navigation, .navbar-default
{
    border-radius: 0px;
    border: 0;
    background-color: rgba(0,0,0,0.19);
}


.navbar-default .navbar-brand {
    color: #fff;
    font-family: lawless-font, "Helvetica", sans-serif;  
    font-size: 26px;  
    line-height: 100%;  
    height: auto;
}

.navbar-default .navbar-store {
    font-family: "Arial", sans-serif;  
    font-size: 22px;  
    font-weight: bold;
    color:white;
}
.navbar-store:hover{
    color: #5e5e5e;
}

.navbar-store:hover #locator {
    background: url("../img/locator-hover.png") no-repeat;
}

#locator{
    display:inline-block;
    width:27px;
    height:24px;
    background-size: 25px 25px !important;
    background:url("../img/locator.png") no-repeat;
}


.nav-wrap 
{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}
#wrapper
{
    background: url(../img/background.jpg);
    /*background-attachment: fixed;*/
    background-position: center;
    background-size: cover;
}
#wrapper-flavour
{
    
    background-image: linear-gradient(to top left, #1f1125, #101a3c, #000000);
    background-image: -ms-linear-gradient(top left,#101a3c 10% ,#1f1125 100% , #000000 30% );
    background-position: center;
    background-size: cover;
}
#wrapper-starter
{
    background-image: linear-gradient(to top left, #02061a, #201124, #0c1c41);
    background-position: center;
    background-size: cover;
}

#wrapper-other
{
    background: url(../img/other-bg.jpg);
    background-position: center;
    background-size: cover;
}
#overlay-2
{
    background-image: linear-gradient(to bottom, #000000, #00000000);
    
    

    position: relative;
    background-size: cover;
}
.starting-text
{
    padding: 177px 0px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
    letter-spacing: 2px;
}
.rene {
    font-size: 120px;
    color: white;
    font-family: lawless-font, "Helvetica", sans-serif;
    font-weight: 300;
    margin-top: 75px;
}
.starting-text h2 {
    font-family: "Helvetica", sans-serif;
    color: #fff;
}
.bottom 
{
    width: 100%;
    position: absolute;
    bottom: 2%;
}
.bottom a
{
    color: rgba(192, 192, 192, 0.5);
}
h5 
{
    padding-top: 18px;
    font-size: 36px;
}
.pro
{
    padding-top: 10px;
}
a:hover{
    text-decoration: none !important;
}

/*----------------------------------------------------------------------------------------------------
                                    FOOTER
-----------------------------------------------------------------------------------------------------*/
.main-footer
{
    background-color: rgba(26, 26, 26, 1);
    padding: 20px 0px;
}
.logo h1
{
    color: #F2F2F2;
    font-family: 'lawless-font', sans-serif;
    font-size: 50px;   
}
.logo a:hover{
    text-decoration: none !important;
}
.copyright
{
    margin-top: 10px; 
    font-size: 16px;
    color: #f3f3f3;
}
.copyright a
{
    color: #FFFFFF;
}
/*.theme
{
    /*font-family: "Coda";*/
    /* font-size: 20px; */
    /* font-weight: bold; */
    /* padding-left: 5px; 
}
/* ================================================================================================================
                        Media Query
================================================================================================================== */
@media (max-width: 650px){
    .rene
    {
        font-size: 40px;
    }

    .button{
    padding: 12px 19px;
    }
}
@media (max-width: 415px){
    #heading-text h3
    {
        font-size: 45px;
    }

    .navbar-brand, .navbar-store{
        font-size: 15px !important;
    }

    #locator{
    width:20px;
    height:17px;
    background-size: 18px 18px !important;
    }
}
@media (max-width: 350px){
    .rene
    {
        font-size: 40px;
    }
    .starting-text h2
    {
        font-size: 25px;
    }
}
.navbar-fixed-top, .navbar-fixed-bottom {
    position: fixed;
    z-index: 99999;
}
#port-items .col-md-4 {
    padding: 0;
}

.col-md-3{
    padding: 0 1% 0 1%;

}
.input-group-addon {
    border-radius: 0;
}
@media (max-width: 400px) {
    #port-items .col-xs-6 {
        width: 100%;
    }

    .navbar-fixed-top, 
    .navbar-fixed-bottom {
        position: static;
    }
 
    .main_content figure {
        padding: 0px 105px;
    }

    .post-shadow {
        width: 100%;
    }

    .input-group-addon {
        background-color: rgba(238, 238, 238, 0);
    }

   
}