/*normalize*/

html {
    height: 100%;
}

body {
    background-image: url(~/images/MainBG.jpg);
    background-size: cover;
    height: 100%;
    margin: 0;
}
form {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font: normal 16px "Segoe UI", Arial, sans-serif;
    color: #555555;
}


@media only screen and (min-width: 481px) and (max-width: 720px) {
    body {
        font-size: 18px;
    }
}

.Text_Log {
    color: darkgreen;
    font-family: Arial;
}
@media only screen and (max-width: 480px) {
    body {
        font-size: 20px;
    }
}


.Modal_Log {
    background-color: rgba(229,196,255,0.10);
    margin: auto  auto;
    border: 2px solid #888;
    width: 60%;
    border-radius: 5%;
    z-index:-4;
}
.ImgContainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}


.Container {
    padding: 16px;
}
a {
  background: transparent;
}

img {
  border: 0;
}

button,
input {
  -webkit-appearance: none; 
  cursor: pointer; 
}

hr {
    border-width: 1px 0 0 0;
    border-color: #767676;
    border-style: solid;
}

/*typography*/
h1, h2, h3, h4, h5, h6 {
    line-height: normal;
}

h1, h2, h3 {
    font-weight: normal;
    margin: .5em 0;
}

h4, h5, h6 {
    font-weight: bold;
}

h1 {
    font-size: 2.25em;
}

h2 {
    font-size: 1.875em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.125em
}

h5 {
    font-size: 1em;
}

h6 {
    font-size: .875em;
}

/*template*/
#wrapper .t-container-fluid {
    max-width: 100%;
}

#wrapper .RadButton {
    font-size: 1em;
}

#wrapper .RadMenu,
div.RadMenuPopup,
#wrapper .RadMenu_Default, #wrapper .RadMenu_Default a.rmLink  {
    font-size: 1em;
}

/* als te doen met die Navigation */
.navNav {
    width: 100%;
    top: 0px;
    height: 11%;
    margin: 0;
    padding: 0px;
    min-height: 40px;
}

.navTable {
    width: 60%;
    height: 100%;
    background-color: #91f185;
    opacity: 1;
}

.navCell {
    font-family: "Roboto condensed";
    position: relative;
    text-transform: uppercase;
    text-align: Center;
    cursor: pointer;
    width: 20%;
    z-index: 0;
    background-image: none;
    background-color: transparent;
    font-weight: 500;
    opacity: 1;
    color: rgb(6,56,0);
    letter-spacing: 2px;
    margin: 0;
}

    .navCell::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background: #075605;
        color: #ffffff;
        opacity: 1;
        transform: scaleX(0);
        transform-origin: 50%px 0px 0px;
        transition: transform 0.3s ease-out 0s;
    }

    .navCell:hover::before {
        transform: scaleX(1);
    }

    .navCell:hover {
        color: #91f185;
        font-weight: bold;
    }

.navBorder {
    border-left-width: 1px;
    border-left-color: black;
    border-left-style: solid;
    border-right-width: 1px;
    border-right-color: black;
    border-right-style: solid;
}

.divBody {
    background-color: #ccfac6;
    width: 60%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    opacity: 0.9;
    min-height: 500px;
    min-width: 405px;
}
button:hover::before, button:hover::after {
    width: 100%;
}

button:hover span::before, button:hover span::after {
    height: 100%;
}

.buttonHover::after {
    left: 0;
    bottom: 0;
    transition-duration: 0.4s;
}

.buttonHover span::after {
    right: 0;
    top: 0;
    transition-duration: 0.4s;
}

.buttonHover::before {
    right: 0;
    top: 0;
    transition-duration: 0.4s;
}

.buttonHover span::before {
    left: 0;
    bottom: 0;
    transition-duration: 0.4s;
}

/*----- button 1 -----*/
.btn-1::before, .btn-1::after {
    transition-delay: 0.2s;
}

.btn-1 span::before, .btn-1 span::after {
    transition-delay: 0s;
}

.btn-1::before {
    right: 0;
    top: 0;
}

.btn-1::after {
    left: 0;
    bottom: 0;
}

.btn-1 span::before {
    left: 0;
    top: 0;
}

.btn-1 span::after {
    right: 0;
    bottom: 0;
}

.btn-1:hover::before, .btn-1:hover::after {
    transition-delay: 0s;
}

.btn-1:hover span::before, .btn-1:hover span::after {
    transition-delay: 0.2s;
}

/*--- Button 2 -------*/
.btn-2::before, .btn-2::after {
    transition-delay: 0s;
}

.btn-2 span::before, .btn-2 span::after {
    transition-delay: 0.2s;
}

.btn-2::before {
    right: 0;
    top: 0;
}

.btn-2::after {
    left: 0;
    bottom: 0;
}

.btn-2 span::before {
    left: 0;
    top: 0;
}

.btn-2 span::after {
    right: 0;
    bottom: 0;
}

.btn-2:hover::before, .btn-2:hover::after {
    transition-delay: 0.2s;
}

.btn-2:hover span::before, .btn-2:hover span::after {
    transition-delay: 0s;
}


/*----- button 3 -----*/
.btn-3::after {
    left: 0;
    bottom: 0;
    transition-delay: 0.6s;
}

.btn-3 span::after {
    transition-delay: 0.4s;
    right: 0;
    bottom: 0
}

.btn-3::before {
    right: 0;
    top: 0;
    transition-delay: 0.2s;
}

.btn-3 span::before {
    transition-delay: 0s;
    left: 0;
    top: 0;
}

.btn-3:hover::after {
    transition-delay: 0s;
}

.btn-3:hover span::after {
    transition-delay: 0.2s;
}

.btn-3:hover::before {
    transition-delay: 0.4s;
}

.btn-3:hover span::before {
    transition-delay: 0.6s;
}

/*----- button 4 -----*/
.btn-4::after {
    right: 0;
    bottom: 0;
    transition-duration: 0.4s;
}

.btn-4 span::after {
    right: 0;
    bottom: 0;
    transition-duration: 0.4s;
}

.btn-4::before {
    left: 0;
    top: 0;
    transition-duration: 0.4s;
}

.btn-4 span::before {
    left: 0;
    top: 0;
    transition-duration: 0.4s;
}
/*----- button 6 -----*/
.btn-6::before {
    left: 50%;
    top: 0;
    transition-duration: 0.4s;
}

.btn-6::after {
    left: 50%;
    bottom: 0;
    transition-duration: 0.4s;
}
.tableBody button {
    text-align: center;
    width: 100%;
    margin: 0;
    height: 100%;
    max-height: 70px;
}

.tableBody tr {
    max-height: 70px;
}

.tableBody td {
    max-height: 70px;
}
.btn-6 span::before {
    left: 0;
    top: 50%;
    transition-duration: 0.4s;
}

.btn-6 span::after {
    right: 0;
    top: 50%;
    transition-duration: 0.4s;
}

.btn-6:hover::before, .btn-6:hover::after {
    left: 0;
}

.btn-6:hover span::before, .btn-6:hover span::after {
    top: 0;
}