/* = = = = = = = = = = = = = = = = = = = = = = = = */
                /* CURSOR */
/* = = = = = = = = = = = = = = = = = = = = = = = = */

.cursor{
    color:#fff;
    font-weight:100;
    -webkit-animation: cursor 1s step-end infinite;
    animation: cursor 1s step-end infinite;
    font-size:130%;
}


/* = = = = = = = = = = = = = = = = = = = = = = = = */
                /* HEADINGS */
/* = = = = = = = = = = = = = = = = = = = = = = = = */

h2{
    font-size:2em;
}

/* = = = = = = = = = = = = = = = = = = = = = = = = */
                /* CARD */
/* = = = = = = = = = = = = = = = = = = = = = = = = */

.card{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 40px;
}

.button{
    margin-top:5px;
}

.card-show{
    opacity:1;
}

.card .description{
    max-height:76px;
    overflow: hidden;
    position:relative;
}


.card .description:before{
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: -webkit-linear-gradient(rgba(21, 21, 18, 0.3), rgba(21, 21, 18, 1));
    background: linear-gradient(rgba(21, 21, 18, 0.3), rgba(21, 21, 18, 1));
    height: 100%;
}


.breadcrumb-group{
    width:100%;
    float:left;
}

.breadcrumb-group .card{
    list-style: none;
    display: inline-block;
    margin: 0 6px 10px 0;
    padding: 4px 8px;
    background: #c0ff21;
    border-radius: 20px;
    color: #151512;
    font-weight: 700;
    cursor: pointer;
    height:auto;
    width:10%;
    opacity:0;
}

.card-show{
    opacity:1;
}

.no-show{
    opacity: 0.2; moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out;
}

/* = = = = = = = = = = = = = = = = = = = = = = = = */
                    /* SEARCH BOX */
/* = = = = = = = = = = = = = = = = = = = = = = = = */
.search_box{width:60%;}

 input[type= "text"],
 input[type="email"],
 textarea{
    background-color:#151512;
    color:#fff;
    border:0;
    height: 40px;
    font-size:1em;
    width:100%;
    font-family:'Quicksand', sans-serif;
    font-weight:400;
    outline:none;
    background-size:28px;
    background-repeat: no-repeat;
    padding-right:38px;
    box-sizing: border-box;
    background-position: right;
}

.search_box input[type="text"]{
    background-image: url('/images/search-icon.png');
}

input[type= "text"]::webkit-input-placeholder{
    color:#fff;
}



/* = = = = = = = = = = = = = = = = = = = = = = = = */
                    /* MODAL */
/* = = = = = = = = = = = = = = = = = = = = = = = = */
.modal-container{
    position:fixed;
    background-color:rgba(21, 21, 18, 0.5);
    width:100%;
    height:100vh;
    top:0;
    left:0;
    z-index:999;
}


.open_card{
    position:relative;
}

.modal-container .container{
    margin:5% auto;
}

.close{
    font-size:200%;
    cursor: pointer;
    opacity:0.8;
    position:absolute;
    top:15px;
    right:15px;
    color:#fff;
}

.close:hover{
    opacity:1;
}

textarea{
    height: 100px;
    resize:none;
}


/* = = = = = = = = = = = = = = = = = = = = = = = = */
                /* MODAL GRADIENTS */
/* = = = = = = = = = = = = = = = = = = = = = = = = */

.open_webdev{
    background: #c0ff21;
    color: #151512;
    background: -webkit-linear-gradient(left top, #c0ff21, #5bc5db);
    background: -webkit-linear-gradient(top left, #c0ff21, #5bc5db);
    background: linear-gradient(to bottom right, #c0ff21, #5bc5db);
}

.open_graphics{
    background: #5bc5db;
    color: #151512;
    background: -webkit-linear-gradient(left top, #5bc5db, #c0ff21);
    background: -webkit-linear-gradient(top left, #5bc5db, #c0ff21);
    background: linear-gradient(to bottom right, #5bc5db, #c0ff21);
}
.open_marketing{
    background: #e96443;
    color: #fff;
    background: -webkit-linear-gradient(left top, #e96443, #904e95);
    background: -webkit-linear-gradient(top left, #e96443, #904e95);
    background: linear-gradient(to bottom right, #e96443, #904e95);
}

.open_marketing h3{
    color:#fff;
}

.open_photovideo{
    background: #D1913C;
    color: #fff;
    background: -webkit-linear-gradient(left top, #D1913C, #FFD194);
    background: -webkit-linear-gradient(top left, #D1913C, #FFD194);
    background: linear-gradient(to bottom right, #D1913C, #FFD194);
}

.open_photovideo h3{
    color:#fff;
}

.open_admin{
    background: #8e9eab;
    color: #151512;
    background: -webkit-linear-gradient(left top, #8e9eab, #eef2f3);
    background: -webkit-linear-gradient(top left, #8e9eab, #eef2f3);
    background: linear-gradient(to bottom right, #8e9eab, #eef2f3);
}
.open_hr{
    background: #757F9A;
    color: #151512;
    background: -webkit-linear-gradient(left top, #757F9A, #D7DDE8);
    background: -webkit-linear-gradient(top left, #757F9A, #D7DDE8);
    background: linear-gradient(to bottom right, #757F9A, #D7DDE8);
}



/* = = = = = = = = = = = = = = = = = = = = = = = = */
                /* FORM */
/* = = = = = = = = = = = = = = = = = = = = = = = = */

.form_input{
    position:relative;
}

.form_input i{
    position:absolute;
    right:45px;
    top:20px;
    -webkit-transition:0.2s ease-in-out;
    transition:0.2s ease-in-out;
}

.form_input input:focus + i{
    opacity:0.8;
}

.form_submit{
    cursor: pointer;
    -webkit-transition:0.2s;
    transition:0.2s;
}

.form_submit:hover{
    background:#5bc5db;
}


.form_submit{
    font-family:'Quicksand', 'Arial', sans-serif;
}


/* = = = = = = = = = = = = = = = = = = = = = = = = */
                /* NOTIFICATION BARS */
/* = = = = = = = = = = = = = = = = = = = = = = = = */

.bar{
    width:100%;
    height:80px;
    position:fixed;
    top:0;
    left:0;
    text-align: center;
    -webkit-animation: slidedown 0.5s ease-in-out;
    animation: slidedown 0.5s ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    cursor: pointer;
}

.success{
    background-color:#1abc9d;
    color:#fff;
}

.error{
    background-color:#e74c3c;
    color:#fff;
}

.success .underbar{
    color:#1abc9d;
}

.error .underbar{
    color:#e74c3c;
}


.bar .underbar{
    background-color:#fff;
    width:100%;
    height:30px;
    line-height:20px;
    padding: 5px;
    box-sizing:border-box;
    font-weight:700;
    text-transform: uppercase;
    position:absolute;
    bottom:0;
}

.bar h3{
    color:#fff;
    font-size:170%;
    text-align: center;
    margin-top:8px;
}

/* = = = = = = = = = = = = = = = = = = = = = = = = */
                    /* ANIMATIONS */
/* = = = = = = = = = = = = = = = = = = = = = = = = */

@-webkit-keyframes slidedown{
    0%{
        top:-80px;
    }
    100%{
        top:0px;
    }
}

@keyframes slidedown{
    0%{
        top:-80px;
    }
    100%{
        top:0px;
    }
}



@-webkit-keyframes cursor{
    from, to {
    color: transparent;
  }
  50% {
    color: #fff;
  }
}


@keyframes cursor{
    from, to {
    color: transparent;
  }
  50% {
    color: #fff;
  }
}

/* = = = = = = = = = = = = = = = = = = = = = = = = */
                /* BUTTON-GROUP */
/* = = = = = = = = = = = = = = = = = = = = = = = = */

.button-group div{
    float:left;
    margin-right:20px;
    font-weight:700;
}