/*
* Import font family
*/
@font-face {
    font-family: 'roboto-regular';
    src: url('../fonts/Roboto-Regular.ttf');
}
@font-face {
    font-family: 'roboto-black';
    src: url('../fonts/Roboto-Black.ttf');
}

/*
* Loader
*/
@-webkit-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}

@-moz-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}

@-ms-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}

@-o-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
@keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
.uil-ripple-css {
    display: none;
    background: none;
    position: relative;
    width: 200px;
    height: 200px;
    margin: auto;
    /*background-color: red;*/
}
.uil-ripple-css div {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    width: 0;
    height: 0;
    border-radius: 50%;
    border-width: 12px;
    border-style: solid;
    -ms-animation: uil-ripple 2s ease-out infinite;
    -moz-animation: uil-ripple 2s ease-out infinite;
    -webkit-animation: uil-ripple 2s ease-out infinite;
    -o-animation: uil-ripple 2s ease-out infinite;
    animation: uil-ripple 2s ease-out infinite;
}
.uil-ripple-css div:nth-of-type(1) {
    border-color: #ffffff;
}
.uil-ripple-css div:nth-of-type(2) {
    border-color: #ea561b;
    -ms-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}
#explication {
    position: relative;
    bottom: 65px;
    display: block;
    width: 100%;
    height: auto;
    /*background-color: blue;*/
}
#explication span {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-family: 'roboto-regular';
    font-size: 14pt;
    /*background-color: pink;*/
}
#exp1 {
    position: relative;
    right: 350px;
    opacity: 0;
    color: #e7541b;
}
#exp2 {
    position: relative;
    left: 350px;
    opacity: 0;
    color: #ffffff;
}

/*
* Général
*/
html, body {
    padding: 0;
    margin: 0;
    font-size: 14px;
    overflow-y: hidden;
    overflow-x: hidden;
}
div, span, p, section, img {
    padding: 0;
    margin: 0;
}
a {
    text-decoration:none;
}
ul {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}
ul li {
    float: left;
}
main {
    width: 100%;
}

/*
* Landscape
*/

#landscape {
    display: none;
    z-index: 30;
    background-color: #000000;
    font-family: 'roboto-regular';
    font-size: 16pt;
}
#center {
    display: block;
    width: 80%;
    margin: auto;
    text-align: center;
}
#cent {
    display: inline-block;
    width: 100%;
    font-family: 'roboto-black';
    font-size: 20pt;
    color: #ea561b;
    margin-bottom: 20px;
}
#cent1 {
    display: inline-block;
    width: 100%;
    float: left;
    color: #ffffff;
}
#cent2 {
    display: inline-block;
    width: 100%;
    float: left;
    color: #ea561b;
}


.slides {
    width: 100%;
    height: 1280px;
}

#header {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
    height: auto;
    /*background-color: red;*/
}
#sutu-logo {
    display: block;
    width: 40%;
    float: left;
    margin-top: 15px;
    margin-left: 20px;
    /*background-color: pink;*/
}
#sutunam {
    min-height: 25px;
    cursor: pointer;
}
#sutu-site {
    display: block;
    width: 40%;
    height: 100px;
    float: right;
    margin-top: 15px;
    /*background-color: yellow;*/
}
#site > a {
    position: relative;
    left: 9px;
    top: 10px;
    float: right;
    margin-top: 30px;
    color: #000000;
    font-size: 12px;
    letter-spacing: 1px;
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    font-family: 'roboto-regular';
    /*background-color: orange;*/
}

#footer {
    z-index: 15;
    position: fixed;
    bottom: 0;
    display: none;
    opacity: 0;
    width: 100%;
    height: auto;
    /*background-color: green;*/
}
#sutu-griffe {
    z-index: 8;
    display: block;
    position: fixed;
    left: -15px;
    bottom: -27px;
    /*background-color: green;*/
}
#griffe {
    display: block;
    transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -o-transform: scale(0.6);
}
#menu {
    z-index: 10;
    position: fixed;
    bottom: 15px;
    left: 20px;
    width: 100%;
    display: block;
    font-size: 13pt;
    font-family: 'roboto-regular';
    /*background-color: red;*/
}
.items {
    cursor: pointer;
    padding-right: 8px;
    color: rgba(0, 0, 0, 0.4);
}
@media only screen and (min-width: 320px) and (max-width: 610px) {
    .items {
        padding: 0px 5px;
    }
}
.active {
    color: rgba(255, 255, 255, 1);
}


.arrow {
    /*z-index: 4;*/
    position: fixed;
    top: 49%;
    display: none;
    opacity: 0;
    width: 100%;
    height: auto;
    background-color: pink;
}
.barre {
    display: block;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.2);
    width: 94.5%;
    height: 1px;
    margin: 19px 0px;
}
.resp-arrow {
    display: block;
    float: right;
    margin-right: 20px;
    /*background-color: orange;*/
}
.arr {
    position: fixed;
    right: 20px;
    display: block;
    max-width: 100%;
    cursor: pointer;
}
.first {
    position: fixed;
    right: 20px;
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    animation: arrow_first .4s ease-in-out;
    -ms-animation: arrow_first .4s ease-in-out;
    -moz-animation: arrow_first .4s ease-in-out;
    -webkit-animation: arrow_first .4s ease-in-out;
    -o-animation: arrow_first .4s ease-in-out;
}
#end {
    z-index: 30;
    position: fixed;
    right: 20px;
    display: none;
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    animation: arrow_end .4s ease-in-out;
    -ms-animation: arrow_end .4s ease-in-out;
    -moz-animation: arrow_end .4s ease-in-out;
    -webkit-animation: arrow_end .4s ease-in-out;
    -o-animation: arrow_end .4s ease-in-out;
    cursor: pointer;
}
@keyframes arrow_first {
    0% {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
    }
    100% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}
@keyframes arrow_end {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
    }
}

#page0 {
    display: inline-block;
    width: 100%;
    margin: auto;
}
#page1 { display: none; }
#page2 { display: none; }
#page3 { display: none; }
#page4 { display: none; }
#page5 { display: none; }
#page6 { display: none; }
#page7 { display: none; }
#page8 { display: none; }
#page9 { display: none; }
#page10 { display: none; }
#page11 { display: none; }
#page12 { display: none; }
#page13 { display: none; }
#page14 { display: none; }
#page15 { display: none; }
#page16 { display: none; }
#page17 { display: none; }

.content {
    display: block;
    text-align: center;
    margin: auto;
    width: 80%;
    /*background-color: red;*/
}
@media only screen and (min-height: 580px) and (max-height: 620px) {
    .content {
        position: relative;
        bottom: 38px;
    }
    #firework img {
        position: relative;
        bottom: 90px;
    }
}
.icons {
    z-index: 15;
    position: relative;
    top: 80px;
    left: -5px;
    display: none;
    opacity: 0;
    float: right;
    width: 100%;
    height: 159px;
    text-align: center;
    /*background-color: black;*/
}
.icons div {
    display: inline-block;
    width: 160px;
    height: 159px;
    margin: auto;
    /*background-color: blue;*/
}

#illus_page1 {
    display: none;
    opacity: 0;
    position: relative;
    top: 30px;
    right: 8px;
    max-width: 155px;
}
#illus_page2 {
    display: none;
    position: relative;
    top: 48px;
    right: 8px;
    max-width: 140px;
}
#illus_page3 {
    display: none;
    position: relative;
    top: 15px;
    right: 8px;
    max-width: 140px;
}
#illus_page4 {
    display: none;
    position: relative;
    top: 37px;
    right: 9px;
    max-width: 137px;
}
#illus_page5 {
    display: none;
    position: relative;
    top: 30px;
    right: 13px;
    max-width: 130px;
}
#illus_page6 {
    display: none;
    position: relative;
    top: 40px;
    right: 5px;
    max-width: 148px;
}
#illus_page7 {
    display: none;
    position: relative;
    top: 59px;
    right: 14px;
    max-width: 130px;
}
#illus_page8 {
    display: none;
    position: relative;
    top: 18px;
    right: 8px;
    max-width: 145px;
}
#illus_page9 {
    display: none;
    position: relative;
    top: 35px;
    right: 13px;
    max-width: 135px;
}
#illus_page10 {
    display: none;
    position: relative;
    top: 35px;
    right: 10px;
    max-width: 130px;
}
#illus_page11 {
    display: none;
    position: relative;
    top: 53px;
    right: 13px;
    max-width: 130px;
}
#illus_page12 {
    display: none;
    position: relative;
    top: 17px;
    right: 5px;
    max-width: 140px;
}
#illus_page13 {
    display: none;
    position: relative;
    top: 35px;
    right: 5px;
    max-width: 140px;
}
#illus_page14 {
    display: none;
    position: relative;
    top: 103px;
    left: 5px;
    transform: scale(1.4);
    max-width: 150px;
}
#illus_page15 {
    display: none;
    position: relative;
    top: 30px;
    right: 8px;
    max-width: 140px;
}
#illus_page16 {
    display: none;
    position: relative;
    top: 30px;
    right: 15px;
    max-width: 125px;
}
#illus_page17 {
    display: none;
    z-index: 20;
    position: relative;
    top: 56px;
    right: 14px;
    max-width: 130px;
}

.number {
    width: 100%;
    height: auto;
    position: relative;
    left: -45px;
    /*background-color: red;*/
}
.number span {
    font-family: 'roboto-black';
    font-size: 197pt;
    letter-spacing: -53px;
    /*background-color: brown;*/
}

.text {
    z-index: 15;
    position: relative;
    bottom: 65px;
    left: 30px;
    display: inline-block;
    width: 230px;
    height: 250px;
    text-align: left;
    text-transform: uppercase;
    font-family: 'roboto-black';
    font-size: 14pt;
    line-height: 22px;
}
.text span {
    display: block;
    width: 100%;
    float: left;
}

#firework {
    display: flex;
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 200px;
    width: 100%;
}
#firework img {
    margin: auto;
}


.text { visibility: hidden; }
.span1 { opacity: 1; position: relative; left: 0px; }
.span2 { opacity: 1; position: relative; left: 0px; }
.span3 { opacity: 1; position: relative; left: 0px; }
.span4 { opacity: 1; position: relative; left: 0px; }
.span5 { opacity: 1; position: relative; left: 0px; }
.span6 { opacity: 1; position: relative; left: 0px; }
.span7 { opacity: 1; position: relative; left: 0px; }
#myBtn { opacity: 1; position: relative; left: 0px; }


#illus_page1{ "display": "inline-block"; }
#illus_page2{ "display": "none"; }
#illus_page3{ "display": "none"; }
#illus_page4{ "display": "none"; }
#illus_page5{ "display": "none"; }
#illus_page6{ "display": "none"; }
#illus_page7{ "display": "none"; }
#illus_page8{ "display": "none"; }
#illus_page9{ "display": "none"; }
#illus_page10{ "display": "none"; }
#illus_page11{ "display": "none"; }
#illus_page12{ "display": "none"; }
#illus_page13{ "display": "none"; }
#illus_page14{ "display": "none"; }
#illus_page15{ "display": "none"; }
#illus_page16{ "display": "none"; }
#illus_page17{ "display": "none"; }

/*
 * Chiffres + texts
 */
#page1{ "display": "inline-block"; }
#page2{ 'display': 'none'; }
#page3{ "display": "none"; }
#page4{ 'display': 'none'; }
#page5{ "display": "none"; }
#page6{ 'display': 'none'; }
#page7{ "display": "none"; }
#page8{ 'display': 'none'; }
#page9{ "display": "none"; }
#page10{ 'display': 'none'; }
#page11{ "display": "none"; }
#page12{ 'display': 'none'; }
#page13{ 'display': 'none'; }
#page14{ "display": "none"; }
#page15{ 'display': 'none'; }
#page16{ "display": "none"; }
#page17{ "display": "none"; }

/*
* Slider and slides
*/
#slide { background-color: #000000; }
.seventeen2 { color: #000000; }

/*******************************
* Modal Contact
**/
#myBtn {
    opacity: 1;
    width: 120px;
    cursor: pointer;
    margin-top: 5px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background-color: #ffffff;
    outline:none;
    text-transform: none;
}
#myBtn::-moz-focus-inner{
    border:0;
}
#myBtn img {
    float: left;
    margin-right: 10px;
}
#myBtn span {
    width: 0px;
    float: left;
    color: #ea561b;
    font-size: 14px;
    text-decoration: underline;
    font-family: 'roboto-black';
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

/* The Close Button */
.close {
    z-index: 20;
    cursor: pointer;
    position: relative;
    right: 24px;
    top: 29px;
    float: right;
    padding: 4px;
    background-color: #000000;
    border-radius: 100%;
}

/* Modal Header */
.modal-header {
    z-index: 10;
    /*padding: 8px 16px;*/
    float: right;
    width: 30px;
    height: 30px;
    text-align: center;
}

/* Modal Body */
.modal-body {
    display: flex;
    z-index: 5;
    position: relative;
    bottom: 30px;
    width: 100%;
    height: 100%;
    color: black;
    text-align: center;
    /*background-color: red;*/
    /*border: 1px solid red;*/
}
#reponse {
    width: 100%;
    padding: 6px 0px;
    margin-bottom: 30px;
}
/* Modal Footer */
.modal-footer {
    height: auto;
    background-color: #ededed;
    /*padding: 2px 16px;*/
    /*border-top: 2px solid #36a3dc;*/
    color: black;
    text-align: center;
}
#reseau {
    display: flex;
    padding: 0;
    margin: auto;
    width: 100%;
}
#reseau > li {
    display: inline-block;
    float: left;
    margin: auto;
    text-align: center;
    padding: 34px 0px;
    /*background-color: green;*/
}
#reseau > li > div > a > img {
    max-height: 40px;
    max-width: 40px;
}

/* Modal Content */
.modal-content {
    position: relative;
    bottom: 800px;
    background-color: #ededed;
    width: 300px;
    height: 300px;
    margin: auto;
    padding: 0;
    border-radius: 100%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}