@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700');

html, body{
    font-family: 'Roboto', sans-serif;
}

.btn{
    border-radius: 8px;
}
.btn-shadow{
    box-shadow: 0 3px 5px 1px #c2c2c2;
}

.btn-info{
    position: relative;
    background: linear-gradient(to bottom,#5dc3ff 0,#008bc0 100%);
}
.btn-info:focus, .btn-info:hover{
    background-position: unset;
    background: linear-gradient(to bottom,#94d7ff 0,#189dd0 100%);
    border-color: #00b1ff;
}


.btn-primary{
    position: relative;
    background: rgb(95,161,226); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(95,161,226,1) 1%, rgba(52,124,192,1) 23%, rgba(54,80,142,1) 60%, rgba(42,69,127,1) 82%, rgba(38,89,160,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(95,161,226,1) 1%,rgba(52,124,192,1) 23%,rgba(54,80,142,1) 60%,rgba(42,69,127,1) 82%,rgba(38,89,160,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(95,161,226,1) 1%,rgba(52,124,192,1) 23%,rgba(54,80,142,1) 60%,rgba(42,69,127,1) 82%,rgba(38,89,160,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fa1e2', endColorstr='#2659a0',GradientType=0 );
    border-color: #243e77;
    min-width: 120px;
    padding: 7px 23px;
    font-size: 18px;
    /*padding-right: 27px;*/
}


.btn-primary:focus, .btn-primary:hover {
    background-position: unset;
    background: rgb(95,161,226); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(95,161,226,1) 1%, rgba(55,100,173,1) 68%, rgba(44,108,186,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(95,161,226,1) 1%,rgba(55,100,173,1) 68%,rgba(44,108,186,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(95,161,226,1) 1%,rgba(55,100,173,1) 68%,rgba(44,108,186,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fa1e2', endColorstr='#2c6cba',GradientType=0 );
    text-shadow: 0px -1px 1px #174499;
}



.btn-secondary{
    position: relative;
    background: rgb(244,244,244); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(242, 242, 242,1) 0%, rgba(170, 170, 170,1) 77%, rgba(195, 195, 195,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(242, 242, 242,1) 0%,rgba(170, 170, 170,1) 77%,rgba(195, 195, 195,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgb(242, 242, 242) 0%,rgb(170, 170, 170) 77%,rgb(195, 195, 195) 100%);
    border-color: #aaa9aa;
    min-width: 120px;
    padding: 7px 23px;
    font-size: 18px;
    text-shadow: 0px -1px 1px #a4a4a5;
}

.btn-secondary:focus, .btn-secondary:hover {
    background-position: unset;
    background: rgb(249,249,249); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(240, 240, 240,1) 0%, rgba(197, 197, 197,1) 77%, rgba(207, 207, 207,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(240, 240, 240,1) 0%,rgba(197, 197, 197,1) 77%,rgba(207, 207, 207,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgb(240, 240, 240) 0%,rgb(197, 197, 197) 77%,rgb(207, 207, 207) 100%);
    text-shadow: 0 0 2px #a8a8a8;
    border-color: #aaaaaa;
}


.large{
    font-size: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.container{
    padding-top: 30px;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #347cc0;
    font-weight: bold;
    border-color: #e6dbe1 #e6dbe1 #fff;
}

.nav-tabs .nav-link {
    color: #828282;
}

a {
    color: inherit;
}

a:hover{
    cursor: pointer;
}

.modal-loading .modal-dialog{
    height: 80vh;
}
.modal-loading .modal-content{
    top: 40%;
    border-radius: 9px;
    max-width: 300px;
    box-shadow: 0 0 28px 10px #6f6f6f;
    left: 50%;
    transform: translateX(-50%)
}



.top-header {
    background-image: linear-gradient(to right, #009999, #274690);
    margin-bottom: 20px;
    box-shadow: 0px 1px 5px 1px #8c8c8c, 2px 0 14px 8px #d8d8d8;
    border-bottom: 1px solid #525252;
}

.top-header .logo{
    background-color: #FFF;
    border-radius: 0 0px 140px 0 / 0 0px 60px 0;
    padding: 0px 45px 10px 10px;
    box-shadow: 5px 2px 5px -2px #135061;
    color: #387cbf;
    font-weight: bold;
    font-size: 17px;
    width: fit-content;
    letter-spacing: 0.08em;
}
.top-header .right-title{
    font-size: 10px;
    color: #fff;
    text-align: right;
    padding: 25px 30px 0 0;
}

.top-header .logo::first-letter {
    font-size: 130%;
    color: #2D488F;
}

.tab-content{
    margin: 18px !important;
}

.tab-pane{
    background-repeat: no-repeat;
    min-height: 567px;
    padding: 30px 50px 15px 50px;
}
.tab-pane ul{
    list-style: none;
}

.tab-pane ol, .tab-pane ul{
    padding-left: 20px;
}
.tab-pane ol li, .tab-pane ul li{
    padding-left: 10px;
    margin-bottom: 7px;
}
.tab-pane ol li h2, .tab-pane ul li h2{
    font-size : 16px;
    font-weight: bold;
    margin-bottom: 0.1rem;
}

.text-picto{
    color: #264790;
    font-weight: bold;
}

.titleTab{
    color: #347cc0;
    font-weight: bold;
    padding-bottom: 20px;
    font-size: 26px;
}
.tab-pane .macaron5{
    position:relative;
}
.macaron *{
    position: absolute;
    right: 0;
    transform: translateX(-20%);
    margin-top: -10px;
    width: 100px;
}
.tab-pane p{
    line-height: 1.8em;
}

.blue{
    color:#347cc0;
}

.grey{
    color:#757575;
}

.bigger{
    font-size: 1.3em;
}

.big{
    font-size: 1.5em;
}
.shaped{
    border-radius: 0 0 80% 60% / 0 0 150px 60px;
}

.bold{
    font-weight: bold!important;
}

/* ---------------    Mobile First  ---------------    */

@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .tab-pane {
        background-size: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
}


/* --------------- Desktop First  ---------------    */

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {  }


/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .tab-pane {
        background-repeat: no-repeat;
        background-position: center top;
    }
    .macaron *{
        position: relative;
        right: initial;
        transform: initial;
        margin-top: initial;
    }
}


/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .tab-pane {
        padding: 10px;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}