﻿.external
 {
 width:100%;
 background-color:white;
 display: flex;
 justify-content:center ;
 }


.box
 {
 width:80%;
 display: flex;
 justify-content:space-between ;
 gap: 100px;
 }

.logo 
 {
 background-color:white;
 text-align: center;
 width: 50vw;
 padding-top:0px;
 padding-bottom:10px;
 }
 
.logo img
 {
 width: 50%;
 padding-left:11px;
 }


.main_container
 {
 width:100%;
 background-color:#e3e5e8;
 display: flex;
 justify-content:center ;
 }


.main_body
 {
 width:80%;
 margin-top:7px;
 margin-bottom:7px;
 padding-left:10px;
 padding-right:3px;
 padding-top:7px;
 padding-bottom:7px;
 background-color:white;
 font-family: Arial;
 font-size:16px;
 }

.title
 {
 font-size:20px; color:#5c6070;font-weight:700; font-family:Helvetica;margin-top:5px;margin-bottom:2px;
 }


 .signup
  {
  float:right;
  }

 .signupbutton
 {
 background-color:red;
 color: white;
 border-radius: 2px;
 padding: 3px 5px;
 border: none;

 }




.box_img2_30_80_40
 {
 display: flex; 
 flex-wrap: wrap; 
 justify-content: space-evenly; 
 padding-top:10px; 
 padding-bottom:10px;
 }

.box_img2_30_80_40 img
 {
 width:30vw;
 object-fit: contain; 
 }

.demolink
 {
 width:100%;
 text-decoration:none;
 color:#bf0f30;
 }

.demolink:hover
 {
 color:red;
 }


.bottom_container
 {
 width:100%;
 background-color:#e3e5e8;
 display: flex;
 justify-content:center ;
 }


.footer
 {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 width:80%;
 margin-top:7px;

 padding-left:10px;
 padding-right:3px;
 padding-top:27px;
 padding-bottom:27px;
 background-color:#2a2a2b;
 font-family: Arial;
 font-size:16px;
 color:white;
 }

.bottom_link
 {
 padding-left:15px;
 padding-right:15px;
 margin-bottom:7px;
 padding-top:7px;
 color:white;
 }


.bottom_link a
 {
 text-decoration: none;
 padding-left:15px;
 padding-right:15px;
 margin-bottom:15px;
 padding-top:15px;
 color:white;
 }


.bottom_link a:hover
 {
 color: #fc6b5d;
 }

.copyright_container
 {
 width:100%;
 background-color:#e3e5e8;
 display: flex;
 justify-content:center ;
 }

.copyright
 {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 width:80%;
 margin-bottom:27px;

 padding-left:10px;
 padding-right:3px;
 padding-top:30px;
 padding-bottom:27px;
 background-color:#e3e5e8;;
 font-family: Arial;
 font-size:10px;
 color:black;
 }

#links
 {
 background-color:white;
 width: 50vw;
 float: right;
 display: block;
padding-right:2px;
 }




ul 
 {
 display: block;
 list-style-type:none;
 margin:0;
 padding:0;
 position: absolute;
 }


li 
 {
 display:inline-block;
 float: left;
 margin-right: 1px;
 }

/*menu links*/
li a 
 {
 display:block;
 min-width:30px;
 height: 35px;
 text-align: left;
 line-height: 35px;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 color: black;
 background: white;
 text-decoration: none;
 padding-left:10px;
 }

/*Hover menu links*/
li:hover a 
 {
 background: white;
 color: #cf0902;
 }

/*dropdown links*/
li:hover ul a 
 {
 background: #e1e6e2;
 color: #cf0902;
 height: 33px;
 line-height: 33px;
 }

/*Hover dropdown links*/
li:hover ul a:hover 
 {
 background:#de0404;
 color: #fff;
 white-space: nowrap;
}

li ul 
 {
 display: none;
 }

 
li ul li 
 {
 display: block;
 float: none;
 }

 
li ul li a 
 {
 width: auto;
 min-width: 100px;
 padding: 0 10px;
 white-space: nowrap;
 }

 
ul li a:hover + .hidden, .hidden:hover 
 {
 display: block;
 }


/* show menu icon*/
.show-menu 
 {
 font-family: "Arial";
 text-decoration: none;
 color: #eb0505;
 font-size: 32px;
 font-weight:400;
 text-align: right;
 padding-top: 2px;
 padding-right: 10px;
 display: none;
 width:100%;
 }


#contact_link
 {
 color: black;
 padding-top: 0px;
 }
 

#contact_link:hover
 {
 color: white;
 background: red;
 }


/*checkbox*/

input[type=checkbox]
 {
 display: none;
 }

input[type=checkbox]:checked ~ #menu
 {
 display: block;
 }


 


/*Responsive Styles*/
@media screen and (max-width : 860px)
 {

body
 {
  margin-left: 0px;margin-right: 0px;margin-bottom: 0px;
 }


.logo 
 {
 background-color:white;
 text-align: center;
 width: 100vw;
 padding-top:0px;
 padding-left:4px;
 padding-bottom:0px;
 }
 
.logo img
 {
 width: 100%;
 padding-left:3px;
 }


 .box
  {
  background-color:white;
  width:100%;
  display: flex;
  justify-content:flex-start;
  align-items: flex-start;
  gap: 0px;
  }


 .main_body
  {
  width:90%;
  margin-top:12px;
  margin-bottom:5px;
  padding-left:7px;
  padding-right:3px
  }

 .box_img2_30_80_40
  {
  padding-bottom:0px;
  }

 .box_img2_30_80_40 img
  {
  width:80vw;
  padding-bottom:12px;
  }


.footer
 {
  width:90%;
  margin-top:7px;
  margin-bottom:19px;
  padding-left:7px;
  padding-right:3px;
  padding-top:27px;
  padding-bottom:27px;
  }

#links
 {
background-color:white;
 width: 100%;
 float: left;
 display: block;
 }



 ul 
  {
  position: static;
  display: none;
  }
 
 li 
  {
  margin-bottom: 1px;
  }
 
 ul li, li a 
 {
 width: 100%;
 }
 
 .show-menu 
 {
 display:block;
 }

@media screen and (orientation:landscape)
 {
 .main_body
  {
  width:92%;
  margin-top:16px;
  margin-bottom:5px;
  padding-left:10px;
  padding-right:5px
  }

 .box_img2_30_80_40 img
  {
  width:40vw;
  }

.footer
 {
  width:93%;
  margin-top:11px;
  margin-bottom:25px;
  padding-left:7px;
  padding-right:3px;
  padding-top:27px;
  padding-bottom:27px;
  }

.logo img
 {
 width: 80%;
 padding-left:3px;
 }

 }
} 
