body, html {
height: 100%;
margin: 0;
}
@media (max-width:767px)
{
#des
{
display:none;
}
.centered {
color:white;
position: absolute;
top: 50%;
left: 50%;
width:100%;
transform: translate(-50%, -50%);
}
.m_menu
{
text-decoration:none;
color:black;
}
.m_menu1
{
text-decoration:none;
color:#f7252c;
}
#myLinks li
{
height:30px;
z-index:999;
position:relative;
border-bottom:1px solid red;
color:black;
}
#myLinks li:hover
{
color:white ! important;
}
}
@media (min-width:768px)
{
#mob
{
display:none;
}
}
.mob-header
{
width:100%;
height:57px;
background-color:black;
position:fixed;
margin-top:-10px;
margin-left:-8px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: White;
overflow-x: hidden;
transition: 0.5s;
padding-top: 0px;
border-right:1px solid black;
}
.sidenav a {
padding-top:20px;
padding-right:32px;
padding-left:10px;
padding-bottom:10px;
text-decoration: none;
font-size: 15px;
color: #818181;
display: block;
transition: 0.3s;
border-bottom:1px solid #7f7f7e;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.button_home
{
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:20px;
color:white ! important;
font-weight:800;
background-color:#eb0202 ! important;
padding:15px;
border-radius:5px;
margin-right:15px;
border:none;
}
.button_home:hover
{
color:#eb0202 ! important;
background-color:white ! important;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url("../images/eld.jpg");
height: 82%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 48%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}
.hero-text button:hover {
background-color: #555;
color: white;
}
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
header {
background-color: rgb(140, 193, 193);
border-bottom: 1px solid rgba(0,0,0,.15);
display: flex;
flex-direction: column;
text-align: center;
}
header > div#logo {
position: relative;
}
header > .menuDown {
box-shadow: 0 3px 5px rgba(0,0,0,.15);
}
header > .menuUp {
box-shadow: none;
}
header > div#logo > h1 {
color: white;
font-weight: 300;
text-transform: lowercase;
}
header > div#logo > div#navToggle {
background-color: rgba(0,0,0,.15);
position: absolute;
right: 0;
top: 0;
transition: 300ms all ease;
}
header > div#logo > div#navToggle:hover {
background-color: rgba(0,0,0,.1);
}
header > div#logo > div#navToggle > a {
color: rgba(255,255,255,.85);
display: block;
font-size: 0.85em;
font-weight: 600;
padding: 0 2.5rem;
text-decoration: none;
transition: 300ms all ease;
}
header > div#logo > div#navToggle:hover > a {
color: rgba(255,255,255,1);
}
header > nav {
background-color: white;
display: none;
flex: 1;
transform: 300ms all ease;
}
header nav > ul {
list-style-type: none;
}
header nav > ul > li {
border-bottom: 1px dotted rgba(0,0,0,.1);
position: relative;
}
header nav > ul > li:last-of-type {
border-bottom: none;
}
header nav > ul > li > a {
display: block;
color: rgba(0,0,0,.65);
font-weight: 700;
padding: 1.1rem 0;
text-decoration: none;
transition: 250ms all ease;
}
header nav > ul > li > a span.toggle {
background-color: rgba(0,0,0,.05);
border-radius: 3rem;
color: rgba(0,0,0,.25);
font-size: 0.75em;
font-weight: 500;
padding: 2px 8px;
text-transform: lowercase;
}
header nav > ul > li > a span.caret {
display: none;
}
header > nav > ul > li:hover > a {
}
header > nav > ul > li > nav {
border-radius: 1.5em;
box-shadow: 0 2px 8px rgba(0,0,0,.6);
display: none;
overflow: hidden;
position: absolute;
right: 5%;
width: 90%;
z-index: 100;
}
header > nav > ul > li > nav > ul > li > a {
color: #7d7a7a ! important;
transition: 300ms all ease;
}
header > nav > ul > li > nav > ul > li:hover > a {
background-color: rgba(0,0,0,.6);
color: white ! important;
}
/* Medium screens */
@media all and (min-width: 600px) {
header > div#logo > div#navToggle {
display: none;
}
header {
background-color: white ! important;
flex-direction: row;
line-height: 90px;
padding: 0 3rem;
position: fixed;
text-align: left;
width: 100%;
}
header > div#logo {
background-color: white ! important;
line-height: 90px;
}
header > nav {
background-color: transparent;
display: block;
}
header > nav > ul {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}
header nav > ul > li {
border-bottom: none;
}
header nav > ul > li > a {
padding: 0 1.25rem;
}
header nav > ul > li > a span.toggle {
display: none;
}
header nav > ul > li > a span.caret {
border-bottom: 4px solid transparent;
border-top: 4px solid rgba(0,0,0,.65);
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-radius: 1px;
content: "";
display: inline-block;
height: 0;
margin: 0 0 0 .25rem;
transition: 250ms all ease;
width: 0;
vertical-align: middle;
}
header nav > ul > li:hover > a span.caret {
border-top-color: rgb(140, 193, 193);
transform: rotate(270deg);
}
header > nav > ul > li:hover > nav {
background-color: white;
border-radius: .25em;
box-shadow: 0 2px 8px rgba(0,0,0,.6);
display: block;
line-height: 3em;
right: -50%;
width: 196px;
}
}
.na:hover
{
}