@charset "UTF-8";
/* CSS Document */

* {
    box-sizing: border-box;
    margin: 0
}
 @keyframes fadein {
 from {
opacity: 0;
}
 to {
opacity: 1;
}
}

body, html {
    height: 100%;
}
body {
    padding: 0;
    margin: 0;
    background: #000;
    font-size: 20px;
    color: #000;
    font-family: 'droid_serifbold', serif;
    font-size: 10px;
    }

h1{
    color: #fff;
    font-size: 21px;
    line-height: 24px;
    margin: 0 0 6px 0;
    font-weight: normal;
    }

h2{
    color: #000;
    font-size: 20px;
    line-height: 24px;
    margin: 0 0 6px 0;
    font-weight: normal;
}

p{
    color: #000;
    font-size: 15px;
    line-height: 20px;
    margin: 0 0 6px 0;
    font-family: Arial, Helvetica, Verdana, sans-serif;
}

a{
    color: #fff;
    text-decoration: none;
}

.wrapper{
    width: 100%;
    max-width: 1100px;
   margin: 0 auto;
    animation: fadein 1s;
}

.background{
    width: 100%;
    float: left;
    background-image: url(../images/card6.jpg);
    background-size: 100%;
   }


.container{
    width: 100%;
    float: left;
  padding: 0 18px;
}



.container-contacts{
    width: 100%;
    float: left;
  padding: 0 18px;
}


.social{
    float: left;
    width:100%;
    margin: 16px 0 0 0;
    position: relative;
    top:0;
    text-align: right;
    z-index: 1000;
   }

.social img {
	border:none;
	margin:0 0 0 6px;
	height:30px;
	width:30px;
	
	}
.social a {
	padding:0px;
	}

.social-mobile{
    display: none;
   }

.banner{
    width:100%;
    float: left;
   margin: -40px 0 0 0;
    text-align: center;
    position: relative;
    
    }

.banner img{
    width:100%;
    height: auto;
    }

.banner-pre-order-link{
    position: absolute;
    bottom:21%;
    right: 1%;
    width:27%;
    height: 60%;
    }



 #burger{
  display: none;
  }

.nav-bar{
    width: 100%;
    float: left;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    margin: 0 0 20px 0;
    padding: 0;
    height: 60px;
    position: relative;
   }

.nav{
    /*width: calc(100% - 220px); --- this is for subscribe input*/
    width: calc(100% - 170px);
    float: left;
    text-align: left;
   margin: 20px 0 0 0;
    
   }

.nav ul {
	list-style-type: none;
    margin: 0;
    padding: 0;
	}
.nav li {
	margin: 0;
    padding: 0 14px 0 0;
	display: inline-block;
	font-weight: normal;
	color: #000;
    font-size: 18px;
    line-height: 19px;
    }

.nav li > a {
	color: #fff;
	font-weight: normal;
	position: relative;
	text-decoration: none;
    transition: all 0.5s ease;
    }

.nav li > a:hover {
	color: #000;
    }



.subscribe{
   float: right;
   width: 220px;
    margin: 2px 0 0 0;
    
    
}

.subscribe-button{
   width: 170px;
    text-align: center;
    float: right;
   
   }

.subscribe-button a{
   padding: 6px;
    margin: 6px 0px;
    background-color: #bc3915;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    display: block;
    line-height: 17px;
    transition: all 0.5s ease;
    }

.subscribe-button a:hover{
   background-color: #000;
    }


a.text-block{
   padding: 10px;
    margin: 6px 0px;
    background-color: #bc3915;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    transition: all 0.5s ease;
    }

 a.text-block:hover{
   background-color: #000;
    }



.footer{
    width:100%;
    height: 30px;
    float: left;
    font-size: 12px;
    margin: 10px 0 20px 0;
    padding: 20px 0 0 0;
    
}

.container-contacts{
    width: 100%;
    float: left;
  padding: 0 18px;
    text-align: left;
}

.container-contacts h1{
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #000;
}

.container-contacts a{
    color:#fff;
    text-decoration: none;
}

.contacts-col-left{
    width: 50%;
    float: left;
  }

.contacts-col-right-wrapper{
    width: 50%;
    float: left;
  padding: 0 0 0 30px;
   }

.contacts-col-right{
    width: 100%;
    float: left;
 }




@media (max-width: 780px) {
    
    
 #burger{
 width: 100%;
    height: 100%;
float: right;
    display: flex;
  align-items: center;
  justify-content: center;
    text-align: center;
    margin: 10px 0 20px 0;
     border-bottom: 1px solid #000;
     padding: 0 0 20px 0;
   }
    
    
#burger-button{
 width: 30px;
    height: 30px;
border: 2px solid #000;
    overflow: hidden;
    }
    

#burger-button img{
    width: 100%;
    height: auto;
    }    
    
    
    
    
    
    
    .background{
    width: 100%;
    float: left;
    background-image: url(../images/card6-small.jpg);
    background-size: 100%;
   }
    
    h1{
    color: #fff;
    font-size: 18px;
    line-height: 22px;
    margin: 0 0 6px 0;
        font-weight: normal;
}

h2{
    color: #000;
    font-size: 18px;
    line-height: 20px;
    margin: 0 0 6px 0;
    font-weight: normal;
}

p{
    color: #000;
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 6px 0;
    font-family: Arial, "sans-serif";
}
    
    .container{
    width: 100%;
    float: left;
  padding: 0 10px;
}
    
    .container-contacts{
    width: 100%;
    float: left;
  padding: 0 10px;
    text-align: left;
}
    
    .contacts-col-left{
    width: 100%;
    float: left;
  }

.contacts-col-right-wrapper{
    width: 100%;
    float: left;
  padding: 0 0 0 0px;
   }

.contacts-col-right{
    width: 100%;
    float: left;
 }
    
    .banner{
    width:100%;
    float: left;
   margin: 10px 0 0 0;
    text-align: center;
    }

.banner img{
    width:100%;
    height: auto;
    }
    
    
    
    .nav-bar{
    width: 100%;
    float: left;
    border-top: none;
    border-bottom: 1px solid #000;
    margin: -20px 0 20px 0;
    padding: 0;
    height: auto;
    position: relative;
        display: none;
   }

.nav{
    width: 100%;
    float: left;
    text-align: center;
   margin: 10px 0 0 0;
   }
    
    .nav li {
	margin: 0;
    padding: 0 9px 0 9px;
	display: inline-block;
	font-weight: normal;
	color: #000;
    font-size: 17px;
    line-height: 26px;
    
}
    
.subscribe{
   width: 100%;
    margin: 6px auto 10px auto;
    
} 
    
 .subscribe-button{
   width: 100%;
    margin: 6px auto 10px auto;
     
   }
    
    .subscribe-button a{
   padding: 6px 10px;
    margin: 6px 0px;
    background-color: #bc3915;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    line-height: 17px
    }

  
    
    
    
.social{
    display: none;
   }


.social-mobile{
    display: block;
    float: left;
    width:100%;
    margin: 0 0 12px 0;
    text-align: center;
   }

.social-mobile img {
	border:none;
	margin:0 10px 0 10px;
	height:34px;
	width:34px;
	
	}
.social-mobile a {
	padding:0px;
	}
    
}