
/* ====================
    BASIC STYLE
=======================*/

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

img {
	width: 100%;
}

a, a:hover {
	text-decoration: none;
}

/* =====================
    Custom Animation
===================== */
@keyframes shake {
    10%, 90%        { transform: translate3d(-1px, 0, 0); }
    20%, 80%        { transform: translate3d(2px, 0, 0);  }
    30%, 50%, 70%   { transform: translate3d(-4px, 0, 0); }
    40%, 60%        { transform: translate3d(4px, 0, 0);  }
}
.shake-it:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ========================
    Background Color CSS
========================= */
.bg-lime        { background-color: #35ed29 !important; }
.bd-deep-dark   { background-color: #191616 !important; }
.bg-sky         { background-color: #03e4ff !important; }
.bg-tomato      { background-color: #ff6a50 !important; }
.bg-teal        { background-color: #008c8c !important; }
.bg-orkid       { background-color: #9732c9 !important; }
.bg-cyan-low    { background-color: #e4f5f5 !important; }
.bg-gradient-cm { background: linear-gradient(to right, #014a6f, #ff009d); }
.bg-theme-green { background-color: #28a745 !important;  }
.carousel-bg-cyan { background-color: #00b4ec;  }
.carousel-bg-magenta { background-color: #ff00b3; }
.carousel-bg-yellow {  background-color: #ffc107; }
.carousel-bg-black { background-color: #1f1f1f; }
.btn-gradient {
    color: #014a6f;
    background-color: transparent;
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(to top, rgba(1, 74, 111, .9), rgba(255, 0, 157, .9)) 1;
}
.btn-cyan {
    color: #fff;
    background-color: #134573;
}

.btn-gradient:hover {
    transition: .3s ease-in-out;
    background: linear-gradient(to right, rgb(255, 0, 157), rgb(1, 74, 111));
    color: #fff;
}
/* ===================
    Text Color CSS
=================== */
.text-lime      { color: #35ed29 !important; }
.text-sky       { color: #03e4ff !important; }
.text-tomato    { color: #ff6a50 !important; }
.text-teal      { color: #008c8c !important; }
.text-orkid     { color: #9732c9 !important; }
.text-dim       { color: #848484 !important; }

/*========= Blog Grid ==========*/
.widget .card {
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    margin-bottom: 30px;
}

.widget .card-header {
	font-weight: 700;
}

.widget .card .btn {
	border-radius: 0;
}

.widget .card li.list-group-item:hover {
	border-left: 5px solid #134573;
	transition: .3s ease;
}

.widget .card .form-control {
	border: 1px solid transparent;
	font-size: 13px;
	text-transform: uppercase;
}

.widget .card .btn-outline-secondary {
	border: 1px solid transparent;
}

.widget .card .btn-outline-secondary:hover {
	background: #134573;
}

.form-control {
	border-radius: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(40, 167, 69,.05);
}

/* =================
    Utility CSS
================== */
.pointer:hover {
	cursor: pointer;
}
.letter::first-letter {
	font-weight: 600;
	font-size: 25px;
	text-transform: uppercase;
}
.result {
	display: flex;
	justify-content: center;
	margin-top: 15px;
}
.result-control {
	width: 50%;
}
.msg {
	margin-top: 15px;
}
.error h1 {
	font-size: 10rem;
	text-shadow: 0px 1px 1px #222;
}
.error h3 {
	text-shadow: 0px 1px 1px #222;
	padding-bottom: 1em;
}



/* ===== End ===== */