/**
 * GLOBAL
 * TEXT SELECT
 * CLEARFIX
 * FONT FACES
 * ELEMENTS
 * USEFUL CLASSES
 * HEADER
 * NAVIGATION
 * FOOTER
 * FORM
 * GENERAL
 * MEDIA QUERIES
 */


/**
 * GLOBAL
 * -----------------------------------------------------------------------------
 */
 * {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
 html {
     font-size: 16px;
 }
 body {
     background: #3F3552;
     color: #FEFDFD;
     font-family: 'Helvetica Neue', Helvetica, sans-serif;
     font-size: 100%;
     font-weight: 300;
     line-height: 1.3;
     /**/
     -webkit-font-smoothing: antialiased;
 }
 /**
  * TEXT SELECT
  * -----------------------------------------------------------------------------
  */
 ::-moz-selection {
     background: #CB4D59;
     color: #FEFDFD;
     text-shadow: none;
 }
 ::selection {
     background: #CB4D59;
     color: #FEFDFD;
     text-shadow: none;
 }
 ::-moz-selection {
     background: #CB4D59;
     color: #FEFDFD;
     text-shadow: none;
 }
 /**
  * CLEARFIX
  * -----------------------------------------------------------------------------
  */
 .clearfix:after {
     clear: both;
     content: " ";
     display: block;
     font-size: 0;
     height: 0;
     visibility: hidden;
 }
 .clearfix {
     display: inline-block;
 }
 * html .clearfix {
     height: 1%;
 }
 .clearfix {
     display: block;
 }
 /**
  * FONT FACES
  * -----------------------------------------------------------------------------
  */
 /**
  * ELEMENTS
  * -----------------------------------------------------------------------------
  */
 p {
 	margin: 0 0 15px;
 }
 ul {
 	list-style: disc outside;
 	margin: 0 0 15px;
 	padding: 0 0 0 15px;
 }
 ol {
 	list-style: outside decimal;
 	margin: 0 0 15px 20px;
 	padding: 0;
 }
 img {
 	height: auto;
 	max-width: 100%;
 }
 em {
 	font-style: italic;
 }
 strong {
 	font-weight: bold;
 }
 a:link {
 	color: #CB4D59;
 	font-weight: 600;
 	text-decoration: underline;
 }
 a:visited {
 	color: #CB4D59;
 	font-weight: 300;
 }
 a:hover,a:active,a:focus {
 	text-decoration: none;
 }
 ::-webkit-input-placeholder {
 opacity:1;
 }
 :-moz-placeholder {
 opacity:1;
 }
 ::-moz-placeholder {
 opacity:1;
 }
 :-ms-input-placeholder {
 opacity:1;
 }
 td {
     vertical-align: top;
 }
 /**
  * USEFUL CLASSES
  * -----------------------------------------------------------------------------
  */
/**
 * HEADER
 * -----------------------------------------------------------------------------
 */
 header h1 {
     text-align: center;
 }
/**
 * NAVIGATION
 * -----------------------------------------------------------------------------
 */
/**
* FOOTER
* -----------------------------------------------------------------------------
*/
/**
* FORM
* -----------------------------------------------------------------------------
*/
label {
    display: block;
    font-weight: 700;
    margin: 0 0 5px;
    padding: 0 5px;
    max-width: 100%;
}
select, input, textarea {
    background: #FFFFFF;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: inline-block;
    font-size: 14px;
    line-height: 1.42857;
    padding: 6px 12px;
}
select, input {
    height: 34px;
}
button,
.btn {
    -moz-user-select: none;
    background: #CB4D59;
    border: 1px solid #CB4D59;
    border-radius: 4px;
    color: #FEFDFD;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857;
    margin-bottom: 5px;
    padding: 6px 12px;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    /**/
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
button:hover, button:active, button:focus,
.btn:hover, .btn:active, .btn:focus {
    background: #CB4D59;
    color: #FEFDFD;
    outline: 0 none;
}
/**
* GENERAL
* -----------------------------------------------------------------------------
*/
#app {
    width: 90%;
    margin: auto;
}
#search {

}
#list ul {
    list-style-type: none;
    margin: 2em 0 0;
    padding: 0;
    text-align: center;
}
#list ul li {
    display: inline-block;
    height: 2.3em;
    line-height: 2.3em;
    margin: 0 0 2em 0;
}
#list ul li a {
    background: #18AE90;
    border-bottom: 3px solid #017F66;
    color: #FEFDFD;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    width: 100%;
}
#list ul li a:active {
    margin-top: 2px;
    border-bottom: 1px solid #18AE90;
}

/**
 * MEDIA QUERIES
 * -----------------------------------------------------------------------------
 */
@media only screen and (min-width:768px){
    #list ul li {
        width: 46%;
        margin-left: 1%;
        margin-right: 1%;
    }
}
@media only screen and (min-width:1024px){
    #list ul li {
        width: 370px;
    }
}