@charset "UTF-8";
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css);
@import url('https://fonts.googleapis.com/css?family=Cabin|Source+Sans+Pro');
@import url('../res/block.css');

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-family: -apple-system, BlinkMacSystemFont, 'Cabin', sans-serif;
    /* padding-top: 4rem; */
    /*    padding-bottom:10px;*/
/*    text-align: center;*/
    margin-left:auto;margin-right:auto;
    padding-bottom:auto;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

card {
    border-width: 2px;
}

.text-shadow {
    text-shadow: 10px 10px 25px RGBA(0, 0, 0, 0.3);

}

.responsive-width {
    white-space: normal;
}


/* Show in Large desktops and laptops */
@media (min-width: 768px) {

    body.bg-graphic {
        background-image: url('../res/mc-bg.jpg');box-shadow: inset 0 0 0 1000px RGBA(53, 59, 64, 0.5);
    }

    .parallax { 
        /* The image used */
        background-image: url("../res/mc-bg.jpg");
        box-shadow: inset 0 0 0 1000px RGBA(0, 0, 0, 0.3);
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

}

/* Landscape tablets and medium desktops */
@media (max-width: 767px) {

    body.bg-graphic {
        background-image: none;
        background-color: #F6F6F6;
    }

    .parallax { 
        /* The image used */
        background-image: none;
        background-color: #F6F6F6;

    }


}


.static-footer {
    background-image:url('../res/header-bg.png');
    color:white;
    padding:20px;
}

.floating-footer-container {
    font-weight: 600;
    /*    height:300px;*/
    margin:0px;
    margin-top:120px;
    margin-bottom:10px;
    margin-left: 10px;
    margin-right:10px;
    padding:0px;
    border-width:0px;
}

.floating-footer {
    background-color:#05ADF1;
    color: white;
    font-weight: 600;

    min-width:300px; 
    max-width:450px;

    margin-top:10px;
    margin-bottom:10px;
    margin-left: auto;
    margin-right:auto;
    padding:20px;

    border-radius:5px;

}

.btn {
    border-color: clear;
    border-width: 2px;
    border-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.btn-outline {
    color: #05ADF1;
    border-color: #05ADF1;

}

.back-primary {
    background-color: #05ADF1;
}

.btn-primary {
    background-color: #05ADF1;
    border-color: clear;
}

.btn-secondary {
    background-color: #6C7578;
}

.navbar {
    background-color: #05ADF1;
}

.refine-container {
    background-color:white;
    /*    height:300px;*/
    margin:0px;
    margin-top:20px;
    margin-bottom:10px;
    padding:10px;
    /*    height:64px;*/
    border-style: solid;
    border-color:rgba(0,0,0,0.1);
    border-width:0px;
    border-radius:5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.0);

}

.app-container {
    background-color:white;
    margin:0px;
    padding:5px;
    margin-bottom: 20px;
    border-style: solid;
    border-color:rgba(0,0,0,0.1);
    border-width:1px;
    border-radius:5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.0);
    transition: all 0.3s ease-in;
}
/* Pre-render the bigger shadow, but hide it */
.app-container:hover {
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;

}

.hove {
    transition: all 0.3s ease-in;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);

}

.hove:hover {
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
}

.star {
    text-shadow: 0 5px 10px rgba(0,0,0,0.1);
    color: RGBA(31, 174, 238, 1);
    /*    color:RGBA(212, 178, 55, 1);*/
    position:absolute;
    left:-10px;
    top:-28px;
}

.skin-container {
    background-color:white;
    height:300px;
    margin:10px;
    padding:5px;
/*    max-width:300px;*/
/*    margin-left:auto;margin-right:auto;*/
    border-style: solid;
    border-color:rgba(0,0,0,0.1);
    border-width:1px;
    border-radius:5px;
    /*    box-shadow: 0 1px 15px rgba(0,0,0,0.15);*/
    transition: all 0.3s ease-in;
}

.skin-container-large {
    background-color:white;
    height:500px;
    margin:5px;
    padding:20px;
    border-style: solid;
    border-color:rgba(0,0,0,0.1);
    border-width:0px;
    border-radius:5px;

}

/* Pre-render the bigger shadow, but hide it */
.skin-container:hover {
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;

}

.btn-text-container {
    font-size: 12.0;
    margin-top:auto; 
    margin-bottom:0px; 
    height:60%;
}

span {
    margin-top: auto;
    line-height: 200%!important;
}

.skin-image {
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
    width: auto;
    /*    height: auto;*/
    max-height: 128px;
}

.skin-image-large {
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
    width: auto;
    /*    height: auto;*/
    max-height: 128px;
    max-height: 180px;

}

.skin-text {
    font-weight: 200;
    font-size: 10.0;
}

.skin-name {
    font-weight: 900;
    font-size: 12.0;
    overflow-wrap: break-word;
}

.skin-name-large {
    font-weight: 900;
    font-size: 16.0;
    overflow-wrap: break-word;
}

.skin-text-author:before {
    content: "By: ";
    font-size: 10.0
}

.skin-text-dl {
    content: "Downloads: ";
    font-size: 14.0
}

.skin-text-dl:before {
    content: "Downloads: ";
    font-size: 12.0;
    font-weight:900;
}

.loader {
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid #05ADF1;
    /*    margin:20px;*/
    margin-left:auto;margin-right:auto;
    margin-top:20px;
    margin-bottom:40px;
    min-width: 64px!important;
    min-height: 64px!important;
    max-width: 64px!important;
    max-height: 64px!important;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.squircle {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    position: relative;
    display: inline-block;
    margin: 1px auto;
    vertical-align: middle;
    box-shadow: 0 0 12px 0 RGBA(0,0,0,0.2);
    /*  -webkit-transform: scale(0.5);*/
    /*  -webkit-transform-origin: 50% 0;*/
}

/*                              */

.dynamic-underlay {

    color: #fff;
    background: linear-gradient(-45deg, #B481D7, #9B2BBE, #43196F, #1FAEEE, #353B40);
    background-size: 400% 400%;
    -webkit-animation: Gradient 30s ease infinite;
    -moz-animation: Gradient 30s ease infinite;
    animation: Gradient 30s ease infinite;
}

@-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}