/*STYLE.CSS*/
/*SUMMARY

    1.SETTING...................................26

        1.1 VARIABLE............................28
        1.2 FONT................................41
        1.3 ICONS...............................89

    2. CONTENT.................................261

        2.1 BODY...............................263
        2.2 BLOC...............................292
        2.3 TEXT...............................333
        2.4 COLOR..............................453

    3. PAGES...................................486

        3.1 LAYOUT.............................493
        3.2 HOME...............................522
        3.3 PRODUCTS...........................614
        3.4 CONTENT ...........................638
        3.5 CONTACT............................680
*/

/* 1. SETTING */

/* 1.1 VARIABLE */
:root {
    --color-primary: 192,  14,  105; /*PINK*/
    --color-secondary: 255, 202, 0; /*YELLOW*/
    --txt-regular: 'Raleway-Regular',  'Lucida Sans',  'Lucida Sans Regular',  'Lucida Grande',  'Lucida Sans Unicode',  Geneva,  Verdana,  sans-serif;
    --txt-bold: 'Raleway-Bold',  'Lucida Sans',  'Lucida Sans Regular',  'Lucida Grande',  'Lucida Sans Unicode',  Geneva,  Verdana,  sans-serif;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

/* 1.2 FONTS */

@font-face {
    font-family: 'Raleway-Light';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/Raleway-Light.eot?#iefix') format('embedded-opentype'),
         url('fonts/Raleway-Light.woff') format('woff'),
         url('fonts/Raleway-Light.ttf') format('truetype'),
         url('fonts/Raleway-Light.svg#Raleway-Light') format('svg');
}

@font-face {
    font-family: 'Raleway-Regular';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/Raleway-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/Raleway-Regular.woff') format('woff'),
         url('fonts/Raleway-Regular.ttf') format('truetype'),
         url('fonts/Raleway-Regular.svg#Raleway-Light') format('svg');
}

@font-face {
    font-family: 'Raleway-Italic';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/Raleway-Italic.eot?#iefix') format('embedded-opentype'),
         url('fonts/Raleway-Italic.woff') format('woff'),
         url('fonts/Raleway-Italic.ttf') format('truetype'),
         url('fonts/Raleway-Italic.svg#Raleway-Light') format('svg');
}

@font-face {
    font-family: 'Raleway-Bold';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/Raleway-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/Raleway-Bold.woff') format('woff'),
         url('fonts/Raleway-Bold.ttf') format('truetype'),
         url('fonts/Raleway-Bold.svg#Raleway-Light') format('svg');
}

@font-face {
    font-family: 'Raleway-Black';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/Raleway-Black.eot?#iefix') format('embedded-opentype'),
         url('fonts/Raleway-Black.woff') format('woff'),
         url('fonts/Raleway-Black.ttf') format('truetype'),
         url('fonts/Raleway-Black.svg#Raleway-Light') format('svg');
}

/* 1.3 ICONS */

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?u5rlaw');
    src: url('fonts/icomoon.eot?u5rlaw#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?u5rlaw') format('truetype'), url('fonts/icomoon.woff?u5rlaw') format('woff'), url('fonts/icomoon.svg?u5rlaw#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-comptabilite:before {
    content: "\e900";
}

.icon-user3:before {
    content: "\e901";
}

.icon-user:before {
    content: "\e902";
}

.icon-user1:before {
    content: "\e903";
}

.icon-user2:before {
    content: "\e904";
}

.icon-anti-v:before {
    content: "\e905";
}

.icon-building:before {
    content: "\e906";
}

.icon-byod:before {
    content: "\e907";
}

.icon-chat:before {
    content: "\e908";
}

.icon-citrix:before {
    content: "\e909";
}

.icon-cloud:before {
    content: "\e90a";
}

.icon-cloud-app:before {
    content: "\e90b";
}

.icon-cloud-desktop:before {
    content: "\e90c";
}

.icon-desktop:before {
    content: "\e90d";
}

.icon-faster:before {
    content: "\e90e";
}

.icon-file-recovery:before {
    content: "\e90f";
}

.icon-folder:before {
    content: "\e910";
}

.icon-homeworking:before {
    content: "\e911";
}

.icon-idea:before {
    content: "\e912";
}

.icon-infogerance:before {
    content: "\e913";
}

.icon-mail:before {
    content: "\e914";
}

.icon-map-fr:before {
    content: "\e915";
}

.icon-more-space:before {
    content: "\e916";
}

.icon-multi-device:before {
    content: "\e917";
}

.icon-network:before {
    content: "\e918";
}

.icon-pencil:before {
    content: "\e919";
}

.icon-sav:before {
    content: "\e91a";
}

.icon-save:before {
    content: "\e91b";
}

.icon-security:before {
    content: "\e91c";
}

.icon-server:before {
    content: "\e91d";
}

.icon-server-plus:before {
    content: "\e91e";
}

.icon-server-private:before {
    content: "\e91f";
}

.icon-shield-data:before {
    content: "\e920";
}

.icon-shield-desktop:before {
    content: "\e921";
}

.icon-stream-app:before {
    content: "\e922";
}

.icon-sync-file:before {
    content: "\e923";
}

.icon-teleoparator:before {
    content: "\e924";
}

.icon-thump-up:before {
    content: "\e925";
}


/* 2. CONTENT */

/* 2.1 BODY */

html {
    min-height: 100%;
    position: relative;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    
}
/* Set padding to keep content from hitting the edges */

.body-content {
    padding-left: 15px;
    padding-right: 15px;
    flex: 1;
}

footer {
    background: #000000;
    bottom: 0;
    color: #FFFFFF;
    min-height: 60px;
    /*position: absolute;*/
    width: 100%;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/

.dl-horizontal dt { white-space: normal; }

/* 2.2 BLOC */

.w-5 { width: 5%; }

.w-15 { width: 15%; }

.w-90 { width: 90% !important; }

.h-5vh { height: 5vh; }

.h-7-5vh { height: 7.5vh; }

.h-20vh { height: 20vh; }

@media (min-width: 576px) {
    .w-md-5 { width: 5% !important; }

    .w-md-15 { width: 15% !important; }

    .w-md-60 { width: 60% !important; }

    .w-md-75 { width: 75% !important; }
}

@media (min-width: 992px) {
    .w-lg-15 { width: 15% !important; }
}

/* 2.3 TEXT */

h1, h2, h3, h4, h5, h6 { font-family: var(--txt-bold); }

p, a, span { font-family: var(--txt-regular); }

.text-yellow {
    color: rgb(var(--color-secondary));
    font-family: var(--txt-bold);
}

.text-pink {
    color: rgb(var(--color-primary)) !important;
    font-family: var(--txt-bold);
}

.txt-bold { font-family: var(--txt-bold); }

.f-size-10px { font-size: 10px; }

.f-size-15px { font-size: 15px; }

.f-size-2vh { font-size: 2vh; }

.f-size-2-5vh { font-size: 2.5vh; }

.f-size-5vh { font-size: 5vh; }

.f-size-8vh { font-size: 8vh; }

.f-size-10vh { font-size: 10vh; }

.f-size-13vh { font-size: 13vh; }

@media (min-width: 768px) {
    .f-size-md-10px { font-size: 10px !important; }

    .f-size-md-2-5vh { font-size: 2.5vh !important; }

    .f-size-md-5vh { font-size: 5vh !important; }

    .f-size-md-8vh { font-size: 8vh !important; }

    .f-size-md-10vh { font-size: 10vh !important; }

    .f-size-md-13vh { font-size: 13vh !important; }
}

@media (min-width: 992px) {
    .f-size-lg-10px { font-size: 10px !important; }

    .f-size-lg-2-5vh { font-size: 2.5vh !important; }

    .f-size-lg-5vh { font-size: 5vh !important; }

    .f-size-lg-8vh { font-size: 8vh !important; }

    .f-size-lg-10vh { font-size: 10vh !important; }

    .f-size-lg-13vh { font-size: 13vh !important; }
}

.line-height-10px { line-height: 10px; }

.text-underline { text-decoration: underline; }

.hover-pink-underline:hover {
    color: rgb(var(--color-primary));
    text-decoration: underline;
}

.hover-pink-none:hover {
    color: rgb(var(--color-primary));
    text-decoration: none !important;
}

.hover-pink-none a:hover {
    color: rgb(var(--color-primary));
    text-decoration: none !important;
}

.word-break { word-wrap: break-word; }

.cookies-link a {
    color: rgb(var(--color-primary));
    text-decoration: none !important;
}

.cookies-link a:hover {
    color: rgb(var(--color-primary));
    text-decoration: none !important;
}

/* 2.4 COLORS */

.background-pink { background-color: rgb(var(--color-primary)); }

    .background-pink::disabled {
        background-color: #808080 !important;
    }

.background-pink-o-25 { background-color: rgba(var(--color-primary), 0.25); }

.background-pink-o-50 { background-color: rgba(var(--color-primary), 0.5); }

.background-pink-o-80 { background-color: rgba(var(--color-primary), 0.8); }

.pink-citrixfile {
    background: linear-gradient(rgba(var(--color-primary), 0.50), rgba(var(--color-primary), 0.50)), url('images/citrixcloud-bg.png');
    background-position: center center;
    background-size: cover;
}

.pink-citrixapp {
    background: linear-gradient(rgba(var(--color-primary), 0.75), rgba(var(--color-primary), 0.75)), url('images/citrixapps-bg.png');
    background-position: center center;
    background-size: cover;
}

.pink-citrixdesktop {
    background: linear-gradient(rgba(var(--color-primary), 0.75), rgba(var(--color-primary), 0.75)), url('images/citrixdesktop-bg.png');
    background-position: center center;
    background-size: cover;
}

.text-black {
    color: #212529 !important;
}

/* 3. PAGES */

/* 3.1 LAYOUT */

.navbar-light .navbar-nav .nav-link { color: rgb(0, 0, 0) !important; }

.nav-link:hover, .nav-link:focus { color: rgb(var(--color-primary)) !important; }

.dropdown-item:hover { color: rgb(var(--color-primary)) !important; }

.dropdown-item:active {
    background-color: rgb(var(--color-primary)) !important;
    color: #FFF !important;
}

#breadcrumb { color: rgb(var(--color-primary)) !important; }

#breadcrumb a { color: rgb(var(--color-primary)) !important; }

/*NAV APPARITION ON SCROLL*/

#header {
    width: 100%;
    z-index: 100;
}

.fixed {
    position: fixed;
    top: 0;
}

.border-pink { border-bottom: solid 1px rgb(var(--color-primary)); }

.border-pink-full { border: solid 1px rgb(var(--color-primary)); }

#header-wrap { position: relative; }

@media (max-width: 576px) {
    #navbarSupportedContent > ul { margin-left: -40vh; }
}

/* 3.2 HOME */

header[role="banner"] a {
    display: block;
    padding: 10px 0;
}

.text-carousel { min-height: 50vh; }

.title-carousel {
    font-family: 'Raleway-bold', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.subtitle-carousel {
    font-family: 'Raleway-bold', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

/*--CAROUSEL'S STYLE--*/

.citrixfile { background-image: url('images/carousel-citrixcloud.jpg'); }

.citrixapps { background-image: url('images/carousel-citrixapps.jpg'); }

.citrixdesktop { background-image: url('images/carousel-citrixdesktop.jpg'); }

@media (min-width: 576px) {
    .carousel-product {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 75vh;
        overflow: hidden;
    }

    .height-xp { height: 7.5vh; }

    .text-carousel { margin-top: 15vh !important; }
}

@media (max-width: 576px) {
    .carousel-product {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: auto;
        overflow: hidden;
    }

    .height-xp { height: 16vh; }
}

.carousel-caption-white {
    color: #fff;
    padding-bottom: 20px;
    padding-top: 7%;
    text-align: center;
    z-index: 10;
}

.carousel-caption-white h5 { font-size: 3.5vh; }

.carousel-caption-white p {
    font-family: var(--txt-bold);
    font-size: 5vh;
}

.card-row {
    font-size: 14px;
    min-height: 14em;
}

/*SLICK CAROUSEL*/

.slick-prev:before, .slick-next:before {
    color: rgb(var(--color-primary)) !important;
    z-index: 1000;
}

.slick-prev { left: 5px !important; }

.slick-next { right: 5px !important; }

/* 3.3 PRODUCT */

.header-product {
    background-color: rgba(var(--color-primary), 0.65);
    min-height: 23vh;
}

#header-citrix {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.btn-outline-pink {
    border-color: rgb(var(--color-primary));
    color: rgb(var(--color-primary));
}

.btn-outline-pink:hover, .btn-outline-pink:active {
    background-color: rgb(var(--color-primary));
    border-color: rgb(var(--color-primary));
    color: #FFF;
}

.btn-2-5{
    border: 2.5px solid !important;
    letter-spacing: 1px;
}

/* 3.4 CONTENT */

.btn-pink { transition: color 0.25s, background 0.25s; }

.btn-pink:hover, .btn-pink-active {
    background: #FFF !important;
    border: 1px solid rgb(var(--color-primary));
    color: rgb(var(--color-primary)) !important;
    transition: color 0.25s, background 0.25s;
}

.files { background-image: url('images/partage.jpg'); }

.outsourcing { background-image: url('images/infogerance.jpg'); }

.network { background-image: url('images/network.jpg'); }

.save { background-image: url('images/sauvegarde.jpg'); }

.security { background-image: url('images/securite.jpg'); }

.antivirus { background-image: url('images/antivirus.jpg'); }

.byod { background-image: url('images/byod.jpg'); }

.ot-host-td, .ot-cookies-td, .ot-cookies-type, .ot-table-header {
    border: solid 1px rgb(var(--color-primary));
    display: block;
    padding: 1em;
}

.ot-table-header { display: none; }

.ot-mobile-border { font-weight: bold; }

.modal-backdrop {
    opacity: 1 !important;
    background: rgba(33,37,41,0.3) !important;
}

.modal-dialog {
    position: absolute !important;
    width: 50%;
    left: 33%;
    top: 40%;
}
    .fade:not(.show){
    opacity:1 !important;
}

@media (min-width: 768px) {
    .ot-host-td, .ot-cookies-td, .ot-cookies-type, .ot-table-header {
        border: solid 1px rgb(var(--color-primary));
        display: table-cell;
        padding: 1em;
    }

    .ot-mobile-border { display: none !important; }
}

/* 3.5 CONTACT */

#contact label {
    color: rgba(var(--color-primary));
    font-weight: 200;
    text-transform: uppercase;
}

#contact input {
    border: 1px solid rgb(var(--color-primary));
    border-radius: 5px;
    padding: 8px;
    width: 100%;
}

#contact textarea {
    border: 1px solid rgb(var(--color-primary));
    border-radius: 5px;
    padding: 8px;
    width: 100%;
}

#contact-reverse label {
    color: white;
    font-weight: 600;
    text-transform: uppercase;
}

#contact-reverse input {
    border: 1px solid white;
    border-radius: 5px;
    padding: 8px;
    width: 100%;
}

#contact-reverse textarea {
    border: 1px solid white;
    border-radius: 5px;
    padding: 8px;
    width: 100%;
}

#contact-reverse p { color: white !important; }

#contact-reverse .btn {
    background: white !important;
    color: rgb(var(--color-primary)) !important;
}

.chevron-rotate{
    transform:rotate(90deg);
    display:inline-block;
}