/* fonts */

@font-face {

  font-family: 'brandon_grotesque_regularRg';

  src: url("../fonts/brandon_reg-webfont.woff2") format("woff2"), url("../fonts/brandon_reg-webfont.woff") format("woff"), url("../fonts/brandon_reg.otf") format("otf");

  font-weight: normal;

  font-style: normal; }

@font-face {

  font-family: 'brandon_grotesquemedium';

  src: url("../fonts/brandon_med-webfont.woff2") format("woff2"), url("../fonts/brandon_med-webfont.woff") format("woff"), url("../fonts/brandon_med.otf") format("otf");

  font-weight: normal;

  font-style: normal; }





/* generic pages */

html {

  background: #ed1c24;

  height: 100vh;

  width: 100vw; 

}



body{

  height: 100vh;

  position: relative;

  font-family: 'brandon_grotesque_regularRg';

  background-color: #ed1c24;

  opacity: 1 !important;

  transition: all .25s ease-in-out; 

  margin: 0px;

}

* {

  border-radius: 0px !important; 

}



/* home page */  

body.home {

    background-image: url("/img/toq-logo.png");

    background-size: auto 80%;

    background-position: center 60%;

    background-repeat: no-repeat; 

}



@media(min-width:480px){

  body.home{

  	background-position: center center;

  }

}











p {

  font-size: 18px;

  color: #ffffff;

  margin-bottom: 5px; }

  p a {

    font-size: 18px;

    color: #ffffff; }

    p a.active, p a:hover, p a:active, p a:focus {

      color: #ffffff; }



.img-responsive {

  max-height: 100%;

  max-width: 100%; }



.toq-tag {

  position: absolute;

  height: 20vh;

  right: 3vw;

  bottom: 5vh; }



/* navigation */

header {

  padding: 10px 0; 

}

header ul{

  list-style: none;

  margin-left: 0px;

  padding-left: 0px; 

}

header .christmas{

  padding-left: 10px;

  display: block;

  margin-top; 10px;

}

header .christmas a{

  color: #ed1c24;

  text-decoration: none;

  background-color: #ffda17;

  padding: 10px 15px;

  font-weight: bold;

  display: block;

  text-align: center;

}

/* dropdown menu*/

.dropbtn {
  background-color: #ed1c24;
  color: white;
  font-size: 17px;
  font-family: 'brandon_grotesquemedium'; 
  text-decoration: none;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: transparent;
  padding-left:30px;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding-top:5px;
  padding-bottom: 5px;
  text-decoration: none;
  text-align: left;
  display: block;
}


.dropdown-content a:hover {
  background-color: #ed1c24;
}

.dropdown:hover .dropdown-content 
{
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #ed1c24;
}



@media(min-width:480px){

 header .christmas a{

   display: inline-block;

 }
 .dropdown-content {

  padding-left:0px;

}

}





@media(max-width: 1028px){

  header .nav {

    display: flex;

    flex-wrap: wrap; 

    justify-content: space-around;

  }

}

@media(min-width: 1028px){

  header .nav{

    display: inline-block;

  }

  header .nav li{

    display: inline;

    margin: 0 30px;

  }  

  .dropdown-content {

  padding-left:30px;

}
}



@media(max-width: 1028px){

  header ul.social{

    display: flex;

    justify-content: center;

  }

  header ul.social li{

    margin: 0 25px;



  }

}

@media(min-width: 1028px){

  header ul.social{

    display: inline;

    margin-left: 10px;

  }

  header ul.social li{

    display: inline;

    margin: 0 10px;

  }

}





header li a {

  color: #ffffff;

  background: none !important;

  border: none;

  transition: all .25s ease-in-out;

  font-size: 17px;

  font-family: 'brandon_grotesquemedium'; 

  text-decoration: none;

}

header li a.active, header li a:hover, header li a:active, header li a:focus {

  color: #FFDA17; 

}



main {

  padding-top: 45px; }



.address {

  padding-top: 45px; }



@media screen and (min-width: 240px) and (max-width: 640px) {

  body.home {

    background-size: auto 45%; }

  li.dropdown a {
    font-size:11px;
  }
  
  header li a {

    font-size: 11px; } 

 .dropdown-content {

  padding-left: 0px;

}

}


.container{

  width 100%;

  padding: 0 20px;

}





@media(min-width: 1028px){

  .container{

    width: 980px;

    margin: 0 auto !important;

  }



}





.deliver-logo{       

        padding: 2px 2px;

}





.img_contatiner{

            position: relative;

          }