/* Mijn arno CSS*/

html {
    box-sizing: border-box
}

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


body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
  }

  * {
    box-sizing: border-box;
  }

  input[type=text],
  select,
  textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
  }

  input[type=submit] {
    background-color: #000000;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  input[type=submit]:hover {
    background-color: #000000;
  }

  .container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
  }


a {
    background-color: transparent
}

a:active,
a:hover {
    outline-width: 0
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

dfn {
    font-style: italic
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

figure {
    margin: 1em 40px
}

img {
    border-style: none
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

button,
input,
select,
textarea,
optgroup {
    font: inherit;
    margin: 0
}

optgroup {
    font-weight: bold
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}


fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

textarea {
    overflow: auto
}


html,
body {
    font-family: Verdana, sans-serif;
    font-size: 15px;
    line-height: 1.5
}

html {
    overflow-x: hidden
}

h1 {
    font-size: 36px
}

h2 {
    font-size: 30px
}

h3 {
    font-size: 24px
}

h4 {
    font-size: 20px
}

h5 {
    font-size: 18px
}

h6 {
    font-size: 16px
}

.arno-serif {
    font-family: serif
}

.arno-sans-serif {
    font-family: sans-serif
}

.arno-cursive {
    font-family: cursive
}

.arno-monospace {
    font-family: monospace
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 400;
    margin: 10px 0
}

.arno-wide {
    letter-spacing: 4px
}

hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 20px 0
}

.arno-image {
    max-width: 100%;
    height: auto
}

img {
    vertical-align: middle
}

a {
    color: inherit
}

.arno-hoverable tbody tr:hover,
.arno-ul.arno-hoverable li:hover {
    background-color: #ccc
}

.arno-centered tr th,
.arno-centered tr td {
    text-align: center
}

.arno-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
}

.arno-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.arno-disabled,
.arno-button:disabled {
    cursor: not-allowed;
    opacity: 0.3
}

.arno-disabled *,
:disabled * {
    pointer-events: none
}

.arno-ul {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.arno-ul li {
    padding: 8px 16px;
    border-bottom: 1px solid #ddd
}

.arno-ul li:last-child {
    border-bottom: none
}


.arno-main,
#main {
    transition: margin-left .4s
}


.arno-bar {
    width: 100%;
    overflow: hidden
}

.arno-center .arno-bar {
    display: inline-block;
    width: auto
}

.arno-bar .arno-bar-item {
    padding: 8px 16px;
    float: left;
    width: auto;
    border: none;
    display: block;
    outline: 0
}


.arno-bar .arno-button {
    white-space: normal
}

.arno-bar-block .arno-bar-item {
    width: 100%;
    display: block;
    padding: 8px 16px;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    outline: 0
}

.arno-bar-block.arno-center .arno-bar-item {
    text-align: center
}

.arno-block {
    display: block;
    width: 100%
}

.arno-container:after,
.arno-container:before,
.arno-panel:after,
.arno-panel:before,
.arno-row:after,
.arno-row:before,
.arno-row-padding:after,
.arno-row-padding:before,
.arno-cell-row:before,
.arno-cell-row:after,
.arno-clear:after,
.arno-clear:before,
.arno-bar:before,
.arno-bar:after {
    content: "";
    display: table;
    clear: both
}


.arno-third,
.arno-quarter {
    float: left;
    width: 100%
}

@media (min-width:601px) {

    .arno-third {
        width: 33.33333%
    }
}


.arno-content,
.arno-auto {
    margin-left: auto;
    margin-right: auto
}

.arno-content {
    max-width: 980px
}

.arno-auto {
    max-width: 1140px
}

.arno-hide {
    display: none !important
}

.arno-show-block,
.arno-show {
    display: block !important
}

.arno-show-inline-block {
    display: inline-block !important
}

@media (max-width:1205px) {
    .arno-auto {
        max-width: 95%
    }
}

@media (max-width:600px) {

    .arno-dropdown-hover.arno-mobile .arno-dropdown-content,
    .arno-dropdown-click.arno-mobile .arno-dropdown-content {
        position: relative
    }

    .arno-hide-small {
        display: none !important
    }

    .arno-mobile {
        display: block;
        width: 100% !important
    }

}

@media (max-width:768px) {
    .arno-modal-content {
        width: 500px
    }

    .arno-modal {
        padding-top: 50px
    }
}

@media (min-width:993px) {


    .arno-hide-large {
        display: none !important
    }

    .arno-sidebar.arno-collapse {
        display: block !important
    }
}

@media (max-width:992px) and (min-width:601px) {
    .arno-hide-medium {
        display: none !important
    }
}

@media (max-width:992px) {
    .arno-sidebar.arno-collapse {
        display: none
    }

    .arno-main {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .arno-auto {
        max-width: 100%
    }
}

.arno-top,
.arno-bottom {
    position: fixed;
    width: 100%;
    z-index: 1
}

.arno-top {
    top: 0
}

.arno-bottom {
    bottom: 0
}

.arno-round-small {
    border-radius: 2px
}

.arno-round,
.arno-round-medium {
    border-radius: 4px
}

.arno-round-large {
    border-radius: 8px
}

.arno-round-xlarge {
    border-radius: 16px
}

.arno-round-xxlarge {
    border-radius: 32px
}


.arno-container,
.arno-panel {
    padding: 0.01em 16px
}

.arno-panel {
    margin-top: 16px;
    margin-bottom: 16px
}




.arno-opacity,
.arno-hover-opacity:hover {
    opacity: 0.60
}

.arno-opacity-off,
.arno-hover-opacity-off:hover {
    opacity: 1
}

.arno-opacity-max {
    opacity: 0.25
}

.arno-opacity-min {
    opacity: 0.75
}


.arno-tiny {
    font-size: 10px !important
}

.arno-small {
    font-size: 12px !important
}

.arno-medium {
    font-size: 15px !important
}

.arno-large {
    font-size: 18px !important
}

.arno-xlarge {
    font-size: 24px !important
}

.arno-xxlarge {
    font-size: 36px !important
}

.arno-xxxlarge {
    font-size: 48px !important
}


.arno-left-align {
    text-align: left !important
}

.arno-right-align {
    text-align: right !important
}

.arno-justify {
    text-align: justify !important
}

.arno-center {
    text-align: center !important
}

.arno-border-0 {
    border: 0 !important
}

.arno-border {
    border: 1px solid #ccc !important
}

.arno-border-top {
    border-top: 1px solid #ccc !important
}

.arno-border-bottom {
    border-bottom: 1px solid #ccc !important
}

.arno-border-left {
    border-left: 1px solid #ccc !important
}

.arno-border-right {
    border-right: 1px solid #ccc !important
}

.arno-topbar {
    border-top: 6px solid #ccc !important
}

.arno-bottombar {
    border-bottom: 6px solid #ccc !important
}

.arno-leftbar {
    border-left: 6px solid #ccc !important
}

.arno-rightbar {
    border-right: 6px solid #ccc !important
}

.arno-section,
.arno-code {
    margin-top: 16px !important;
    margin-bottom: 16px !important
}

.arno-margin {
    margin: 16px !important
}

.arno-margin-top {
    margin-top: 16px !important
}

.arno-margin-bottom {
    margin-bottom: 16px !important
}

.arno-margin-left {
    margin-left: 16px !important
}

.arno-margin-right {
    margin-right: 16px !important
}

.arno-padding-small {
    padding: 4px 8px !important
}

.arno-padding {
    padding: 8px 16px !important
}

.arno-padding-large {
    padding: 12px 24px !important
}

.arno-padding-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important
}

.arno-padding-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important
}

.arno-padding-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important
}

.arno-padding-48 {
    padding-top: 48px !important;
    padding-bottom: 48px !important
}

.arno-padding-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important
}

.arno-padding-top-64 {
    padding-top: 64px !important
}

.arno-padding-top-48 {
    padding-top: 48px !important
}

.arno-padding-top-32 {
    padding-top: 32px !important
}

.arno-padding-top-24 {
    padding-top: 24px !important
}

.arno-left {
    float: left !important
}

.arno-right {
    float: right !important
}

.arno-button:hover {
    color: #000 !important;
    background-color: #ccc !important
}

.arno-transparent,
.arno-hover-none:hover {
    background-color: transparent !important
}

.arno-hover-none:hover {
    box-shadow: none !important
}

/* Kleuren */
.arno-red,
.arno-hover-red:hover {
    color: #fff !important;
    background-color: #f44336 !important
}

.arno-white,
.arno-hover-white:hover {
    color: #000 !important;
    background-color: #fff !important
}

.arno-black,
.arno-hover-black:hover {
    color: #fff !important;
    background-color: #000 !important
}

.arno-grey,
.arno-hover-grey:hover,
.arno-gray,
.arno-hover-gray:hover {
    color: #000 !important;
    background-color: #9e9e9e !important
}

.arno-light-grey,
.arno-hover-light-grey:hover,
.arno-light-gray,
.arno-hover-light-gray:hover {
    color: #000 !important;
    background-color: #f1f1f1 !important
}



.arno-text-red,
.arno-hover-text-red:hover {
    color: #f44336 !important
}

.arno-text-white,
.arno-hover-text-white:hover {
    color: #fff !important
}

.arno-text-black,
.arno-hover-text-black:hover {
    color: #000 !important
}

.arno-text-grey,
.arno-hover-text-grey:hover,
.arno-text-gray,
.arno-hover-text-gray:hover {
    color: #757575 !important
}

.arno-text-light-grey,
.arno-hover-text-light-grey:hover,
.arno-text-light-gray,
.arno-hover-text-light-gray:hover {
    color: #f1f1f1 !important
}


.arno-border-blue,
.arno-hover-border-blue:hover {
    border-color: #2196F3 !important
}

.arno-border-light-blue,
.arno-hover-border-light-blue:hover {
    border-color: #87CEEB !important
}



.arno-border-red,
.arno-hover-border-red:hover {
    border-color: #f44336 !important
}

.arno-border-yellow,
.arno-hover-border-yellow:hover {
    border-color: #ffeb3b !important
}

.arno-border-white,
.arno-hover-border-white:hover {
    border-color: #fff !important
}

.arno-border-black,
.arno-hover-border-black:hover {
    border-color: #000 !important
}

.arno-border-grey,
.arno-hover-border-grey:hover,
.arno-border-gray,
.arno-hover-border-gray:hover {
    border-color: #9e9e9e !important
}

.arno-border-light-grey,
.arno-hover-border-light-grey:hover,
.arno-border-light-gray,
.arno-hover-border-light-gray:hover {
    border-color: #f1f1f1 !important
}