/* ------------------------------------ La Fille - 2018 */
/* ---------------------------------------------------- */
/* ---------------------------------------------------- */
/* ---------------------------------------- Main Markup */

html, body {
font-family: 'Maven Pro', Arial; 
background-color: #FFFFFF;
margin: 0;
}


/* ---------------------------------------- Link Styles */

a {
color: #333333;
text-decoration: none;
-o-transition:.15s;
-ms-transition:.15s
-moz-transition:.15s;
-webkit-transition:.15s;
transition:.15s;
}

a:hover {
text-decoration: none;
color: #FF090E;
}

a.navi{
font-size: 16px;
line-height: 24px;
letter-spacing: 1px;
font-weight: 400; 
}


/* --------------------------------------------- Fonts */
/* ----- 'Maven Pro' ----- 400-500-700-900 ----------- */

@font-face {
font-family: 'Maven Pro';
font-style: normal;
font-weight: 400;
src: local('Maven Pro Regular'), local('MavenProRegular'), url(http://fonts.gstatic.com/s/mavenpro/v6/MG9KbUZFchDs94Tbv9U-pVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/mavenpro/v6/MG9KbUZFchDs94Tbv9U-pT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
font-family: 'Maven Pro';
font-style: normal;
font-weight: 500;
src: local('Maven Pro Medium'), local('MavenProMedium'), url(http://fonts.gstatic.com/s/mavenpro/v6/SQVfzoJBbj9t3aVcmbspRugdm0LZdjqr5-oayXSOefg.woff2) format('woff2'), url(http://fonts.gstatic.com/s/mavenpro/v6/SQVfzoJBbj9t3aVcmbspRnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

@font-face {
font-family: 'Maven Pro';
font-style: normal;
font-weight: 700;
src: local('Maven Pro Bold'), local('MavenProBold'), url(http://fonts.gstatic.com/s/mavenpro/v6/uDssvmXgp7Nj3i336k_dSugdm0LZdjqr5-oayXSOefg.woff2) format('woff2'), url(http://fonts.gstatic.com/s/mavenpro/v6/uDssvmXgp7Nj3i336k_dSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

@font-face {
font-family: 'Maven Pro';
font-style: normal;
font-weight: 900;
src: local('Maven Pro Black'), local('MavenProBlack'), url(http://fonts.gstatic.com/s/mavenpro/v6/-91TwiFzqeL1F7Kh91APwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2'), url(http://fonts.gstatic.com/s/mavenpro/v6/-91TwiFzqeL1F7Kh91APwXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}


/* -------------------------------------------- HEADER */

#header {
width: 368px;
padding-top: 32px;
padding-bottom: 16px;
margin-right: auto;
margin-left: auto;
text-align: center;
}

.logo{
width: 128px;
margin-bottom: 8px;
}

ul {
padding-left: 0px;
}

li {
display: inline;
padding: 8px;
margin: 8px; 
}


/* ------------------------------------------- CONTENT */

#single_big {
display: block;
width: 368px;
margin-right: auto;
margin-left: auto;
}

#single_small {
display: none;
width: 256px;
margin-right: auto;
margin-left: auto;
}

#footer {
width: 368px;
padding-top: 32px;
padding-bottom: 32px;
margin-top: -4px;
margin-right: auto;
margin-left: auto;
text-align: center;
}


/* ------------------------------ FONT AWESOME STYLING */

.style {
font-size: 20px;
padding: 8px;
width: 20px;
height: 20px;
}


/* -------------------------------------- MEDIA QUERIES*/


@media only screen and (max-width: 600px)  {
    
    a:hover {
    color: #000000;
    }
    
    #header {
    width: 256px;
    padding-top: 32px;
    padding-bottom: 8px;
    }
    
    .logo{
    margin-bottom: 0px;
    }
    
    li {
    display: block;
    padding: 4px;
    margin: 4px;
    }
    
    #single_big {
    display: none;
    }

    #single_small {
    display: block;
    } 
    
    #footer {
    width: 256px;
    }    
}