@font-face {
    font-family: sinkin;
    src: url(polices/sinkin-sans/SinkinSans-400Regular.otf),
        url(polices/sinkin-sans/SinkinSans-400Regular.woff),
        url(polices/sinkin-sans/SinkinSans-400Regular.ttf),
        url(polices/sinkin-sans/SinkinSans-400Regular.svg),
        url(polices/sinkin-sans/SinkinSans-400Regular.eot);
}

@font-face {
    font-family: sinkinI;
    src: url(polices/sinkin-sans/SinkinSans-400Italic.otf),
        url(polices/sinkin-sans/SinkinSans-400Italic.woff),
        url(polices/sinkin-sans/SinkinSans-400Italic.ttf),
        url(polices/sinkin-sans/SinkinSans-400Italic.svg),
        url(polices/sinkin-sans/SinkinSans-400Italic.eot);
}

@font-face {
    font-family: sinkinB;
    src: url(polices/sinkin-sans/SinkinSans-700Bold.otf),
        url(polices/sinkin-sans/SinkinSans-700Bold.woff),
        url(polices/sinkin-sans/SinkinSans-700Bold.ttf),
        url(polices/sinkin-sans/SinkinSans-700Bold.svg),
        url(polices/sinkin-sans/SinkinSans-700Bold.eot);
}

@font-face {
    font-family: sinkinL;
    src: url(polices/sinkin-sans/SinkinSans-200XLight.otf),
        url(polices/sinkin-sans/SinkinSans-200XLight.woff),
        url(polices/sinkin-sans/SinkinSans-200XLight.ttf),
        url(polices/sinkin-sans/SinkinSans-200XLight.svg),
        url(polices/sinkin-sans/SinkinSans-200XLight.eot);
}

@font-face {
    font-family: ubuntu;
    src: url(polices/ubuntu/Ubuntu-R.ttf),
        url(polices/ubuntu/Ubuntu-R.eot),
        url(polices/ubuntu/Ubuntu-R.svg),
        url(polices/ubuntu/Ubuntu-R.woff);
}

@font-face {
    font-family: ubuntuC;
    src: url(polices/ubuntu/Ubuntu-C.ttf),
        url(polices/ubuntu/Ubuntu-C.eot),
        url(polices/ubuntu/Ubuntu-C.svg),
        url(polices/ubuntu/Ubuntu-C.woff);
}

@font-face {
    font-family: ubuntuB;
    src: url(polices/ubuntu/Ubuntu-B.ttf),
        url(polices/ubuntu/Ubuntu-B.eot),
        url(polices/ubuntu/Ubuntu-B.svg),
        url(polices/ubuntu/Ubuntu-B.woff);
}

@font-face {
    font-family: ubuntuL;
    src: url(polices/ubuntu/Ubuntu-L.ttf),
        url(polices/ubuntu/Ubuntu-L.eot),
        url(polices/ubuntu/Ubuntu-L.svg),
        url(polices/ubuntu/Ubuntu-L.woff);
}

@font-face {
    font-family: poiret;
    src: url(polices/Poiret_One/PoiretOne-Regular.ttf),
        url(polices/Poiret_One/PoiretOne-Regular.eot),
        url(polices/Poiret_One/PoiretOne-Regular.svg),
        url(polices/Poiret_One/PoiretOne-Regular.woff);
}

@font-face {
    font-family: josefin;
    src: url(polices/JosefinSans-Light/JosefinSansStd-Light.ttf),
        url(polices/JosefinSans-Light/JosefinSansStd-Light.eot),
        url(polices/JosefinSans-Light/JosefinSansStd-Light.svg),
        url(polices/JosefinSans-Light/JosefinSansStd-Light.woff);
}

@font-face {
    font-family: josefin-bold;
    src: url(polices/JosefinSans-Light/JosefinSans-SemiBold.ttf),
        url(polices/JosefinSans-Light/JosefinSansStd-SemiBold.eot),
        url(polices/JosefinSans-Light/JosefinSansStd-SemiBold.svg),
        url(polices/JosefinSans-Light/JosefinSansStd-SemiBold.woff);
}

@font-face {
    font-family: josefin-regular;
    src: url(polices/JosefinSans-Light/JosefinSans-Regular.ttf),
        url(polices/JosefinSans-Light/JosefinSansStd-Regular.eot),
        url(polices/JosefinSans-Light/JosefinSansStd-Regular.svg),
        url(polices/JosefinSans-Light/JosefinSansStd-Regular.woff);
}

html, body {
    height:100%;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 720px) {
    html, body {
        height:100%;
        margin: 0;
        padding: 0;
        /*overflow-x: hidden;*/
    }  
}

.header {
    display: -webkit-box;         
    display: -ms-flexbox;      
    display: -webkit-flex; 
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    background-color: #2a282b;
    color: white;
    height: 3em;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    font-family: sinkin;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.header .header-name {
    margin-left: 10px;
}

.header .header-name h1 {
    cursor: pointer;
    font-size: 19px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #EEE;
}

.header .header-name h1 a {
    text-decoration: none;
    color: #EEE;   
}

.menu-list {
    position: relative;
    display: -webkit-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;  
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 480px;
}

.header-links:hover {
    color: #2ECC71;
}

@media screen and (max-width: 720px) {
    .menu-list {
        display: none;
    }   
}

.header-links {
    font-size: 1.05em;
    font-weight: bold;
    display: block;
    padding: 1em;
    cursor: pointer;
    text-decoration: none;
    color: white;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.menu-item {
    display: block;
}

nav ul {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

#accueil {
    background: url(./img/home5.jpg) center 0 no-repeat fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    display: flex;
    display: -webkit-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;    
    flex-direction: column;
}

@media screen and (max-width: 768px) {
    #accueil {
        background: url(./img/home5.jpg) center 0 no-repeat scroll;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        display: flex;
        display: -webkit-box;         
        display: -ms-flexbox;      
        display: -webkit-flex;
        -webkit-justify-content: space-around;
        -moz-justify-content: space-around;
        -ms-justify-content: space-around;        
        -ms-flex-pack: distribute;        
            justify-content: space-around;
        -webkit-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;         
        flex-direction: column;
        height: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    #accueil  {
        background: url(./img/home5.jpg) center 0 no-repeat scroll;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        display: flex;
        display: -webkit-box;         
        display: -ms-flexbox;      
        display: -webkit-flex;
        -webkit-justify-content: space-around;
        -moz-justify-content: space-around;
        -ms-justify-content: space-around;        
        -ms-flex-pack: distribute;        
            justify-content: space-around;
        -webkit-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;         
        flex-direction: column;
        height: 100%;        
    }   
}

#accueil-content {
    display: flex;
    display: -webkit-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;
    -webkit-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;     
    flex-direction: column;
    -webkit-align-self: center;
    -ms-align-self: center;    
    -ms-flex-item-align: center;    
        align-self: center;
    color: white;
    /*background-color: rgba(0,0,0,0.6);*/
    font-size: 150%;
    width: 100%;
    font-family: sinkinB;
    margin-top: 1em;
    text-align: center;
}

@media screen and (max-width: 720px) {
    #accueil-content {
        display: flex;
        display: -webkit-box;         
        display: -ms-flexbox;      
        display: -webkit-flex;
        -webkit-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;     
        flex-direction: column;
        -webkit-align-self: center;
        -ms-align-self: center;    
        -ms-flex-item-align: center;    
            align-self: center;
        color: white;
        /*background-color: rgba(0,0,0,0.6);*/
        font-size: 80%;
        width: 100%;
        font-family: sinkinB;
        margin-top: 1em;
        text-align: center;
    }
}


#accueil-content h2 {
    color: white;
    text-align: center;
}

#accueil-content h1 {
    text-align: center;
    font-family: josefin-bold;
    font-size: 350%;
    margin-bottom: 0;
}

#accueil-content h3 {
    text-align: center;
    font-family: josefin-bold;
    font-size: 220%;
    margin-bottom: 0.3em;
    
}

#accueil a {
    
    text-decoration: none;
    -webkit-align-self: center;
    -ms-align-self: center;    
    -ms-flex-item-align: center;    
        align-self: center;
    width: auto;
    vertical-align: baseline;
    color: white;
}

#accueil a #flag {
    -webkit-align-self: center;
    -ms-align-self: center;    
    -ms-flex-item-align: center;    
        align-self: center;
    padding-right: 1em;
    vertical-align: baseline;
}

#accueil-content a {
    margin-top: 1em;
}

.fa-user {
    display: flex;
    display: -webkit-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;    
    -webkit-box-pack: center;    
        -ms-flex-pack: center;    
            justify-content: center;
    -webkit-align-self: center;
    -ms-align-self: center;    
    -ms-flex-item-align: center;    
        align-self: center;
}

@media screen and (max-width: 720px) {
    .fa-user {
        margin-top: 1em;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .fa-user {
        margin-top: 0.2em;
    }
}


.angle-down{
    display: flex;
    display: -webkit-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;    
    -webkit-box-pack: center;    
        -ms-flex-pack: center;    
            justify-content: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-align-self: center;
    -ms-align-self: center;    
    -ms-flex-item-align: center;    
        align-self: center;
    width: 50px;
    height: 50px;
    
    color: white;
        
    background: rgba(0,0,0,0.6);
    border-radius:50%;
   
    cursor: pointer;
}

/*#angle-down:hover {
    background: rgba(0,0,0,0.2);
    border-radius:50%;
    z-index: 999;
    cursor: pointer;
}*/

.angle-down a {
    text-decoration: none;
    color: white;
}

#angle-down-exp {
    margin-top: 25em;
}

#angle-down-form {
    margin-top: 15em;
}

#angle-down-hob {
    margin-top: 20em;
}

@media screen and (max-width: 768px) {
    .angle-down {
        visibility: hidden;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-backface-visibility: hidden;
    }  
}

#experience {
    background: url(./img/lyon3.jpg) center 0 no-repeat fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover; 
    display: flex;
    display: -webkit-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;
    -webkit-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;     
    flex-direction: column;
}

@media screen and (max-width: 768px) {
    #experience {
        background: url(./img/lyon2.jpg) center 0 no-repeat scroll;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover; 
        display: flex;
        display: -webkit-box;         
        display: -ms-flexbox;      
        display: -webkit-flex;
        -webkit-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;         
        flex-direction: column;
    }    
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    #experience {
        background: url(./img/lyon2.jpg) center 0 no-repeat scroll;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover; 
        display: flex;
        display: -webkit-box;         
        display: -ms-flexbox;      
        display: -webkit-flex;
        -webkit-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;         
        flex-direction: column;
    }  
}

/*#exp-content {
    display: flex;
    flex-direction: row;
    justify-content: space-around
    text-align: center;
}*/

#exp-content {
    text-align: center;
}

#exp-content ul {
    text-align: center;
    text-justify: inter-word;
}

#exp-list {
    display: flex;
    display: -webkit-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;    
    flex-flow: row nowrap;
    /*flex-direction: column;*/
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;    
    -ms-flex-pack: distribute;    
        justify-content: space-around;  
    font-family: ubuntuL;
    font-size: 120%;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;    
    -webkit-box-align: center;    
        -ms-flex-align: center;    
            align-items: center;
}

@media screen and (max-width: 720px) {
    #exp-list {
        display: -webkit-box;         
        display: -ms-flexbox;      
        display: -webkit-flex;
        display: flex;
        /*flex-flow: row nowrap;*/
        -webkit-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;     
        flex-direction: column;
        font-family: ubuntuL;
        font-size: 120%;
       /* align-items: center;*/
    }
}

#exp-list ul {
    list-style: none;
    margin:1em;
    padding: 0;
}

#exp-list img {
    width: 30%;
}

#exp-list #volvo img {
    width: 15%;
}

@media screen and (max-width: 720px) {
    #exp-list img {
        width: 70%;
    }
    #exp-list #volvo img {
        width: 30%;
    }   
}

#volvo, #emagineurs {
    width: 40%;
}

@media screen and (max-width: 720px) {
    #volvo, #emagineurs {
        width: 100%;
    }
}

#experience #exp-content h2 {
    font-family: josefin-regular;
    color: #4C4A4A;
    font-size: 300%;
}

#formation {
    background: url(./img/stockholm-ConvertImage.jpg) center 0 no-repeat fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    display: flex;
    display: -webkit-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;
    -webkit-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;     
    flex-direction: column;
}  

@media screen and (max-width: 768px) {
    #formation {
        background: url(./img/stockholm-ConvertImage.jpg) center 0 no-repeat scroll;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover; 
        display: flex;
        display: -webkit-box;         
        display: -ms-flexbox;      
        display: -webkit-flex;
        -webkit-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;     
        flex-direction: column;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    #formation {
        background: url(./img/stockholm-ConvertImage.jpg) center 0 no-repeat scroll;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover; 
        display: flex;
        display: -webkit-box;         
        display: -ms-flexbox;      
        display: -webkit-flex;
        -webkit-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;     
        flex-direction: column;
    } 
}


#form-content {
    text-align: center;
    background-color: #41c3ac;
    color: white;
    padding: 20px;
}

#form-content ul {
    text-align: justify;
}

#form-content h2 {
    text-align: center;
    font-size: 250%;
}

#form-list {
    display: flex;
    display: -webkit-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;    
    flex-flow: row nowrap;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;     
    -webkit-box-pack: justify;     
        -ms-flex-pack: justify;     
            justify-content: space-between;  
    font-family: ubuntuL;
    font-size: 120%;
}

@media screen and (max-width: 720px) {
    #form-list {
        display: block;
    }
}

#form-list ul {
    list-style: none;
    margin:1em;
    padding: 0;
}

#form-list img {
    text-align: center;
}

#cpe img {
    width: 20%;
}

#bth img {
    width: 12%;
}

#iut img {
    width: 24%;
}

#formation #form-content h1 {
    font-family: ubuntuB;
    color: white;
}

#cpe {
    width: 33%;
}

#bth {
    width: 33%;
}

#iut {
    width: 33%;
}

@media screen and (max-width: 720px) {
    #cpe {
        width: 100%;
    }
    #bth {
        width: 100%;
    }
    #iut {
        width: 100%;
    }    
}

.profile {
    font-size: 125%;
}

#hobbies {
    background: url(./img/holiday.jpg) center 0 no-repeat fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    display: flex;
    display: -webkit-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;
    -webkit-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;     
    flex-direction: column;
}

@media screen and (max-width: 768px) {
    #hobbies {
        background: url(./img/holiday.jpg) center 0 no-repeat scroll;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover; 
        display: flex;
        display: -webkit-box;         
        display: -ms-flexbox;      
        display: -webkit-flex;
        -webkit-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;     
        flex-direction: column;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    #hobbies {
        background: url(./img/holiday.jpg) center 0 no-repeat scroll;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover; 
        display: flex;
        display: -webkit-box;         
        display: -ms-flexbox;      
        display: -webkit-flex;
        -webkit-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;     
        flex-direction: column;
    }
}

#hob-content {
    text-align: center;
    background-color: #3A539B;
    color: white;
}

#hob-content ul {
    text-align: justify;
    
}

#esn ul {
    text-align: justify;
    width: 50%;
}

#hob-list {
    display: flex;
    display: -webkit-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;    
    flex-flow: row wrap;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;     
    -ms-flex-pack: distribute;     
        justify-content: space-around;  
    font-family: ubuntuL;
    font-size: 120%;
}

.hob-word {
    display: -webkit-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;
    display: flex;
}

#hob-list ul {
    list-style: none;
    margin:1em;
    padding: 0;
    display: flex;
    display: -webkit-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;     
    -webkit-box-pack: center;     
        -ms-flex-pack: center;     
            justify-content: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: wrap;
    margin: auto;
}

#hob-list img {
    width: 15%;
}

@media screen and (max-width: 720px) {
    #hob-list img {
        width: 70%;
    }  
}

#hobbies #hob-content h2 {
    font-family: josefin-regular;
    color: white;
    font-size: 300%;
}

.hob-word {
    font-size: 150%;
}

#esn {
    margin-top: 1em;
}

.container {
    width: 100%;
    height: 100%; 
    top: 0;
    left: 0;
    z-index: -999;
    font-family: ubuntu;
    font-size: 0.8em;
}

@media screen and (max-width: 720px) {
    .container {
        width: 100%; 
        height: auto;
        top: 0;
        left: 0;
        z-index: -999;
        font-family: ubuntu;
        font-size: 0.8em;
    }   
}

.container h2 {
    font-family: josefin-regular;
    font-size: 300%;
}

.slide-inside {
    padding: 30px;
    background-color: rgb(255,255,255);
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {     .slide-inside { 	
        padding: 30px;
        background-color: rgb(255,255,255);
        overflow: hidden;
    } 

}

.active {
    color: #2ECC71;
}

.footer {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: ubuntu;
    font-size: 0.8em;
    text-align: center;
    display: flex;
    display: -webkit-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;
    -webkit-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;     
    flex-direction: column;
}

@media screen and (max-width: 720px) {
    .footer {
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        font-family: ubuntu;
        font-size: 0.8em;
        text-align: center;
        display: flex;
        display: -webkit-box;         
        display: -ms-flexbox;      
        display: -webkit-flex;
        -webkit-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;     
        flex-direction: column;
    }
}

.footer ul li {
    list-style: none;
}

.footer h2 {
    font-family: josefin-regular;
    font-size: 300%;
}

#foot-content {
    width: 50%;
    margin: 0 auto;
    margin-top: 5%;
    text-align: center;
    background-color: #ffffff;
    color: black; 
}

@media screen and (min-width: 1600px) {
    #foot-content {
        width: 70%;
        margin: 0 auto;
        margin-top: 12%;
        text-align: center;
        background-color: #ffffff;
        color: black; 
    }    
}

.foot-list {
    margin-bottom: 2%;
    display: flex;
    display: -webkit-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;      
    -ms-flex-pack: distribute;      
        justify-content: space-around;  
    font-family: ubuntuL;
}

#phone:hover a {
    color: #2ECC71;
}

#phone:hover p {
    color: #2ECC71;
}

#mail:hover a {
    color: #2ECC71;
}

#mail:hover p {
    color: #2ECC71;
}

#twitter:hover a{
    color: #4099FF;
}

#twitter:hover p{
    color: #4099FF;
}

#linkedin:hover a {
    color: #4875B4;
}

#linkedin:hover p {
    color: #4875B4;
}

#skype:hover a{
    color: #12A5F4;
}

#skype:hover p{
    color: #12A5F4;
}

#resume:hover a{
    color: #CF000F;
}

#resume:hover p{
    color: #CF000F;
}

#messenger p a i img {
    width: 7em;
}

#messenger p a i img:hover {
    width: 12em;
}

.footer a {
    text-decoration: none;
    color: black;
}

footer {
    text-align: center;
    font-family: ubuntuL;
    color: white;
    background-color: #22313F;
    height: 3em;
    padding: 1em;
}

/*footer p i {
    position: absolute;
    float: right;
    color: red;
    text-align: right;
}*/

hr {
    width: 16em;
    height: 0.2em;
    background-color: #34495E;
    -webkit-align-self: center;
    -ms-align-self: center;
    -ms-flex-item-align: center;
        align-self: center;
}

.next, .prev {
    display: none;
}

.fa-quote-left {
    margin-right: 0.5em;
}

.fa-quote-right {
    margin-left: 0.5em;
}

#resume {
    margin-top: 2em;
}