/*==================================
    Basic element setup
====================================*/
html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: auto;
    font-family: Roboto, sans-serif;
    font-size: 14px;
}

/*==================================
    Header
====================================*/

header {
    background-color: #f0da50;
    background-image: url("../img/bg.jpg");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: auto 100%;
    height: 300px;
    width: 100%;
}

.header-container {
    margin: 0 auto;
}

.project-title {
    text-align: center;
    padding: 6% 0 3%;
    font-weight: 700;
    font-size: 50px;
	color: rgba(50,50,48,1);
}

.project-links {
    text-align: center;
}

.project-links a {
    border: 4px solid rgba(50,50,48,0.6);
    text-decoration: none;
    display: inline-block;
    margin:5px; 30px;
    padding: 15px 20px;
    font-size: 16px;
    color: #484848;
    outline: none;
    transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out; /* Firefox 4 */
    -webkit-transition: all 0.25s ease-in-out; /* Safari and Chrome */
    -o-transition: all 0.25s ease-in-out; /* Opera */
    -ms-transition: all 0.25s ease-in-out; /* Explorer 10 */
}

.project-links a:hover {
    border: 4px solid rgba(50,50,48,1);
    background-color: rgba(50,50,48,1);
    color: yellow;
}


/*==================================
    Content
====================================*/
.content-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.content-container p {
    text-align: left;
    font-size: 16px;
    line-height: 1.75;
}

.alert-button {
    display: inline-block;
    background-color: #3473c1;
    border-radius: 2px;
    margin: 10px;
    font-size: 14px;
    font-weight: 300;
    color: #ffffff;
    width: 145px;
    height: 45px;
    border: none;
    cursor: pointer;
    outline: none;
}

.alert-button:hover {
    background-color: #3a5a8d;
}

.alert-button:active {
    background-color: #3473c1;
}


/*==================================
    Alert container
====================================*/
#lala-alert-container {
    position: fixed;
    height: auto;
    max-width: 350px;
    width: 100%;
    bottom: 0;
    right: 0;
}

#lala-alert-wrapper {
    height: auto;
    padding: 15px;
}

/*==================================
    Alerts
====================================*/

.lala-alert {
    position: relative;
    padding: 25px 30px 20px;
	font-size: 15px;
    margin-top: 15px;
    opacity: 1;
	line-height: 1.4;
	border-radius: 3px;
    border: 1px solid transparent;
    cursor: default;
    transition: all 0.5s ease-in-out;   /* Edit for fadeout time */
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}

.lala-alert span {
	opacity: 0.7;
	transition: all 0.25s ease-in-out;   /* Edit for fadeout time */
}

.lala-alert span:hover {
	opacity: 1.0;
}

.alert-success {
    color: #ffffff;
    background-color: #37c1aa;
}

.alert-success > span {
	color: #0b6f5e;
}

.alert-info {
	color: #ffffff;
	background-color: #3473c1;
}

.alert-info > span {
	color: #1e4567;
}

.alert-warning {
    color: #6b7117;
    background-color: #ffee9e;
}

.alert-warning > span {
	color: #8a6d3b;
}

.alert-danger {
    color: #ffffff;
    background-color: #d64f62;
}

.alert-danger > span {
	color: #6f1414;
}

.close-alert-x {
    position: absolute;
    float: right;
    top: 10px;
    right: 10px;
    cursor: pointer;
	outline: none;
}

.fade-out {
    opacity: 0;
}

/*==================================
    Alert Animation
====================================*/
.animation-target {
  animation: animation 1500ms linear both;
}

/* Generated with Bounce.js. Edit at http://goo.gl/BKCT19 */

@keyframes animation {
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 250, 0, 0, 1); }
  3.14% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 160.737, 0, 0, 1); }
  4.3% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 132.565, 0, 0, 1); }
  6.27% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 91.357, 0, 0, 1); }
  8.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 51.939, 0, 0, 1); }
  9.41% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 40.599, 0, 0, 1); }
  12.48% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 6.498, 0, 0, 1); }
  12.91% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.807, 0, 0, 1); }
  16.22% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -17.027, 0, 0, 1); }
  17.22% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -20.404, 0, 0, 1); }
  19.95% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -24.473, 0, 0, 1); }
  23.69% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -21.178, 0, 0, 1); }
  27.36% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -13.259, 0, 0, 1); }
  28.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -11.027, 0, 0, 1); }
  34.77% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.142, 0, 0, 1); }
  39.44% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.725, 0, 0, 1); }
  42.18% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.675, 0, 0, 1); }
  56.99% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.202, 0, 0, 1); }
  61.66% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.223, 0, 0, 1); }
  66.67% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.104, 0, 0, 1); }
  83.98% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.01, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}