/*------------------
|                   |
|    General CSS    |
|                   |
-------------------*/

body {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
* {
    box-sizing: border-box;
}
ul {
    list-style: none;
}
html {
    font-family: 'Merriweather', serif;
}
a {
    text-decoration: none;
    color:black;
}
footer a:hover, nav a:hover {
    text-decoration: overline
}
#active-link {
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}
#active-link:hover {
    text-decoration: none;
}
.wrapper {
    max-width: 1200px;
    margin: auto;
}

.small-text {
    font-size: 0.7em;
}

.forum .small-text {
    padding-left:0!important;
}

.forum-row:hover {
    background-color:#E8E8E8;
}

/* Jumbotron */

.jumbotron {
    margin-top: -32px;
    background-image: url('../image/jumbotron3.jpg');
    height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: -400px;
    color: white;
}
.jumbotron .wrapper {
    position: relative;
    top: 100px;
    left: 15px;
    padding-right:30px;
}
.jumbotron h1 {
    text-shadow: 3px 3px black;
    font-size: 48px;
}
.jumbotron p {
    text-shadow: 2px 2px black;
    font-size: 20px;
}
.jumbotron a {
    background-color: white;
    line-height: 4em;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px #555;
}
.jumbotron a:hover {
    text-decoration: none!important;
    background-color:#888;
    box-shadow: 2px 2px #777;
}

/*------------------
|                   |
|    Nav & Footer   |
|                   |
-------------------*/

nav *,
footer * {
    color: black;
}
nav a {
    font-weight: 900;
    font-size: 0.9em;
}
.nav-item {
    padding: 15px 30px 14px!important;
    text-align: right;
}
.logo img {
    width: 120px;
}
footer {
    width: 100%;
    color: white;
    font-size: 0.7em;
}
#social-media-buttons i {
    font-size: 1.5em;
}
footer i:hover {
    color: #888;
}
footer li {
    height: 3em;
}

/*------------------
|                   |
|   Color Picker    |
|                   |
-------------------*/

.cp {
    padding:0!important;
}

.row-line {
    border-bottom: 1px dotted #404040;
    margin: 15px 0 15px -30px;
    position: relative;
    left:30px;
}

.row-line-mobile {
    border-bottom: 1px dotted #404040;
}

.cp-h2 {
    font-weight: 700;
    font-size: 1.2em;
}
.cp-box-container {
    padding: 0;
}
.cp-box {
    margin: 0.5%;
    width: 18px;
    height: 18px;
    border: 1px solid black;
    float: left;
}
.cp-box:hover {
    opacity: 0.5;
}

/*------------------
|                   |
|    Item Cards     |
|                   |
-------------------*/

.content-columns {
    -webkit-column-count: 1;
    -webkit-column-gap: 15px;
    -moz-column-count: 1;
    -moz-column-gap: 15px;
    column-count: 1;
    column-gap: 15px;
}
.card {
    border: 1px dotted #404040;
    padding: 15px;
    margin: 0 2px 15px;
    -webkit-column-break-inside: avoid;
    /* Chrome, Safari, Opera */
    page-break-inside: avoid;
    /* Firefox */
    break-inside: avoid;
    /* IE 10+ */
}

.card:hover {
    background-color: #E8E8E8;
}

.card:hover>.card-img img {
    opacity: 1;
    
}
.card-img {
    width: 80%;
    margin: auto;
    margin-top: 1em;
}
.card-img img {
    width: 100%;
}
.card-description {
    text-align: center;
    padding: 1em 0 1em 0;
}

/*------------------
|                   |
|      Button       |
|                   |
-------------------*/

.button {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: -400px;
    color: white;
}
.button .wrapper {
    position: relative;
    top: 100px;
    left: 15px;
    padding-right:30px;
}
.button h1 {
    text-shadow: 3px 3px black;
    font-size: 48px;
}
.button p {
    text-shadow: 2px 2px black;
    font-size: 20px;
}
.button a {
    color: black;
    background-color: white;
    line-height: 4em;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px #555;
}
.button a:hover {
    text-decoration: none!important;
    background-color:#888;
    box-shadow: 2px 2px #777;
}

/*------------------
|                   |
|   Media queries   |
|                   |
-------------------*/


/* For mobile phones & general */

[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}

.col-right {
    float:right;
}
.row:after {
    border-top:1px dotted #404040;
    content: "";
    clear: both;
    display: block;
}
.remove-border:after {
    border-top: 0;
}
    .col-xs-1 {width: 8.33%;}
    .col-xs-2 {width: 16.66%;}
    .col-xs-3 {width: 25%;}
    .col-xs-4 {width: 33.33%;}
    .col-xs-5 {width: 41.66%;}
    .col-xs-6 {width: 50%;}
    .col-xs-7 {width: 58.33%;}
    .col-xs-8 {width: 66.66%;}
    .col-xs-9 {width: 75%;}
    .col-xs-10 {width: 83.33%;}
    .col-xs-11 {width: 91.66%;}
    .col-xs-12 {width: 100%;}

    /* For tablets: */

@media only screen and (min-width: 600px) {
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
    .nav-item {
           text-align: left;
       }
   .content-columns {
       -webkit-column-count: 2;
       -moz-column-count: 2;
       column-count: 2;
   }
   .nav-right {
       text-align: right;
       float: right;
   }
   
   .cp-h3 {
       margin-top: 0.5em;
   }
   .cp-box {
       margin: 1%;
       width: 20px;
       height: 20px;
       border: 1px solid black;
   }
   .cp-box-container {
       padding: 5px;
   }
    .row-line {
        border-bottom: 1px dotted #404040;
    }
    .row-line-mobile {
        border:0;
    }
    .jumbotron {
       background-position: -180px 0;
    }
    .border-right {
        border-right: 1px dotted #404040;
    }
}

    /* For desktop: */

@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    .content-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}
.jumbotron {
    background-position: 0 0;
}

}
@media only screen and (min-width: 1600px) {
    .jumbotron {
        background-position: 0 -35px;
    }
}

/* Webkit */
@media screen and (-webkit-min-width:600px) {
    .content-columns {
        margin-bottom: -100px;
    }
}