/* SITE SETTINGS */

html {
  scroll-behavior: smooth;
  padding:10px;
  margin: 0;
  border: 0;
	font-family: PT Sans;
  box-sizing: border-box;
  color:#5b5b5b;
}

*, *:before, *:after {
  box-sizing: inherit;
}

a{
	font-weight: normal;
	color:#002868;	
	text-decoration:none;
	outline: none;
}

a:hover{
	font-weight: normal;
	color:#626262;	
	text-decoration:none;
}

p{
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;	
	line-height:1.4em;
 }

h1,h2{
	font-family: PT Sans Narrow;
	font-size:22px;
	font-weight: bold;
	color:#4b4b4b;
	margin-top:10px;
	margin-bottom:30px;
}

h3{
	font-family: PT Sans Narrow;
	font-size:20px;
	font-weight: bold;
	color:#4b4b4b;
	margin-top:10px;	
	margin-bottom:20px;
}

h4{
	font-family: PT Sans Narrow;
	font-size:18px;
	font-weight: bold;
	color:#4b4b4b;
	margin-top:10px;	
	margin-bottom:20px;
}

.main-logo-big{
  width:250px;

}
.main-logo{
  width:75px;

}
.header-identy{
  text-align: center;
}

.cart-icon{
  width: 50px;
  padding:5px 3px 3px 10px;
  margin: 0 0 0 100px;
  border: #4b4883 0px solid;
}

.footer_socmed_icons img{
  width: 20px;
  margin: 20px;
}

/* Form styles */
input{
  color:#3b3b3b;
}

select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Remove default arrow */
  background-image: url(...);
  /* Add custom arrow */
  padding:10px;
  margin-top: 5px;
  border-radius: 10px 10px 10px 10px;
  color:#5e5e5e;
}

.form-submit-button {
  background: #2c6eb6;
  color:#fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 5px 5px 5px #eee;
  text-shadow: none;
  padding:10px 20px;
  width:25%;
}

.form-submit-button:hover {
  background: #01afef;
  color: #fff;

}

.input-invalid {
	width: 90%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	margin-left:5%;
	margin-bottom:20px;
	box-shadow: 0 0 5px 1px red;
	border: 1px solid #ccc;
}

.input-invalid-select {

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Remove default arrow */
  background-image: url(...);
  /* Add custom arrow */
  padding:10px;
  margin-top: 5px;
  border-radius: 10px 10px 10px 10px;
  color:#5e5e5e;


	
	box-shadow: 0 0 5px 1px red;
	border: 1px solid #ccc;
}

.input-invalid-clear {
	width: 90%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	margin-left:5%;
	margin-bottom:20px;
	box-shadow: none;
	
}

.input-invalid-select-clear {
	-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Remove default arrow */
  background-image: url(...);
  /* Add custom arrow */
  padding:10px;
  margin-top: 5px;
  border-radius: 10px 10px 10px 10px;
  color:#5e5e5e;
  box-shadow: none;
	
}

/* Drinks */
.add_div input{
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url(...);
  /* Add custom arrow */
  padding:10px;
  margin-top: 5px;
  border-radius: 10px 10px 10px 10px;
  
}
.add_div button{
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url(...);
  /* Add custom arrow */
  padding:10px;
  margin-top: 5px;
  border-radius: 10px 10px 10px 10px;

}

/* MISC */
.quantity{
  width:50px;
  text-align:center;
}
.quantity_change{
  width:50px;
  text-align:center;
}
.price{
  width:100px;
  text-align:center;
}
.add_div{
  text-align:right;
}

.title-div{
  text-align:center;
}

.title-div h1{
  font-size:32px;
}


/* Create two equal columns that floats next to each other */
  .icon-row img {
    width: 15%;
    padding: 1%;
    
  }

  .mainicon {
    width: 15%;
    padding: 1%;
    
  }
  
  /* MENU ICONS Clear floats after the columns */
  .icon-row  {
    background-color:#1092ce;
    width:auto;
    padding:0px 20px;
    margin:0 60px;
    text-align:center;
    border-radius: 0px 20px 0px 20px;
    margin-bottom:20px;
  }

  .row:after {
    content: "";
    display: table;
    clear: both;
  }
 
/*end Menus icons*/

/*admin Forms*/
.form-outerdiv{
  clear:both;
  text-align:center;
  width:90%;
  margin:auto;
}
.form-centerdiv{
  width:50%;
  margin:auto;
  padding:10px;
  border:0px;
  text-align:left;
}
.form-leftdiv{
  width:50%;
  float:left;
  padding:10px;
  border:0px;
  text-align:left;
}
.form-rightdiv{
  width:50%;
  padding:10px;
  float:left;
  border:0px;
  text-align:left;
}

.admin-form-input {
  width: 90%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-left:5%;
  margin-bottom:20px;
}

.admin-input-invalid {
  width: 90%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-left:5%;
  margin-bottom:20px;
}


.admin-form-label {
  clear:both;
  font-weight:bold;
}

/*50pc pc 100pc mobile*/
.admin-form-50-100{
  width:50%;
}

/*end admin forms*/

/* misc */
.logged-in-icon{
  width:25px;
  position:relative;
  top:-4px;
}

  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 768px) {
    .icon-row img {
      width: 30%;
    }
    .icon-row  {
      background-color:#1092ce;
      width:auto;
      padding:10px 20px;
      margin:0 0px;
    }

    /* forms */
    .form-rightdiv {
        width:100%;
      }
    .form-leftdiv {
        width:100%;
    }
    .form-outerdiv{
      width:100%;
    }
    .form-centerdiv{
      width:100%;
    }
    .form-submit-button{
      width:87%;
    }
    /*50pc pc 100pc mobile*/
    admin-form-50-100{
      width:100%
    }
    /*end forms*/

    /* misc */
    .logged-in-icon{
      top:0px;
  }
  }