@charset "UTF-8";  
@font-face {
    font-family: 'adventregular';
    src: url('/css/fonts/adventregular.eot');
    src: url('/css/fonts/adventregular.eot') format('embedded-opentype'),
         url('/css/fonts/adventregular.woff2') format('woff2'),
         url('/css/fonts/adventregular.woff') format('woff'),
         url('/css/fonts/adventregular.ttf') format('truetype'),
         url('/css/fonts/adventregular.svg#adventregular') format('svg');
}
@font-face {
    font-family: 'adventbold';
    src: url('/css/fonts/adventbold.eot');
    src: url('/css/fonts/adventbold.eot') format('embedded-opentype'),
         url('/css/fonts/adventbold.woff2') format('woff2'),
         url('/css/fonts/adventbold.woff') format('woff'),
         url('/css/fonts/adventbold.ttf') format('truetype'),
         url('/css/fonts/adventbold.svg#adventbold') format('svg');
}
@font-face {
    font-family: 'adventlight';
    src: url('/css/fonts/adventlight.eot');
    src: url('/css/fonts/adventlight.eot') format('embedded-opentype'),
         url('/css/fonts/adventlight.woff2') format('woff2'),
         url('/css/fonts/adventlight.woff') format('woff'),
         url('/css/fonts/adventlight.ttf') format('truetype'),
         url('/css/fonts/adventlight.svg#adventlight') format('svg');
}
*{	outline: none;
	margin: 0;
	padding:0;
	outline: none;
    text-decoration: none;}
html, body{
	font-family: adventlight, Helvetica, Arial, sans-serif;
    background: #fff url(/themes/default/images/mainBackground.png);
    color: #313032;
    height: 100%;
    min-width: 400px;
}
/*888888888888888888888888888888888888888888888888888888888*/
.header{
    height: 155px;
    width: 100%;
    background-color: #3794d0;
    position: relative;
    min-width: 830px;}
.socialLinks{
    position: absolute;
    top: 13px;
    left: 0px;
    padding: 22px 0 0 20px;
    z-index: 50;}
.socialLinks a{
    text-decoration: none;}
.mainLogo{
    width: 550px;
    display: inline-table;
    position: relative;
    margin: 0 auto;
    display: block;
    text-align: center;
    top: 20px}
.mainLogo img{
    width: 550px;}
.mainLogo a{
    width: 269px;
    height: 64px;}
.rightNav{
    font-family: adventregular, Helvetica, Arial, sans-serif;
    position: absolute;
    top: 15px;
    right: 20px;
    display: flex;
    z-index: 20;}
.rightNav a{
    text-decoration:none;
    margin-left: 0px;
    letter-spacing: 1px;
    display: block;
    text-align: right;
    margin: auto;
    margin-right: 0;
    color: #fff; 
    transition: all 0.3s;}
.rightNav a:hover{
    color: #00436f;}
a.navButton{
    width: 26px;
    height: 19px;
    background: url(/themes/default/images/navButton.png) top left no-repeat;
    display: inline-table;
    vertical-align: middle;
    position: absolute;
    top: 11px;
    right: -15px;}
a.navButton:hover{
    background: url(/themes/default/images/navButton.png) top right no-repeat;}
a.navButtonSmall{
    margin: 0px !important;
    width: 16px;
    height: 12px;
    background: url(/themes/default/images/navButtonSmall.png) top left no-repeat;}
a.navButtonSmall:hover{
    background: url(/themes/default/images/navButtonSmall.png) top right no-repeat;}
.clear{
    clear:both;}
a.button, .button{
    white-space:nowrap;
    padding: 8px 10px 6px 10px;
    background: #de152c;
    color: #fff;
    text-decoration: none;
    font-family: adventregular, Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    font-size: 12px;
    border: none;
    cursor: pointer;
    cursor: hand;
    -webkit-appearance: none;  
    -webkit-border-radius:0;}
a.button:hover, .button:hover{
    background: #ae0c1f;}
.punchLine{
    position: relative;
    font-family: adventbold, Helvetica, Arial, sans-serif;
    width: 100%;
    padding: 27px 0px 24px;
    background-color: #124a6d;
    color: #fff;
    text-align: center;
    font-size: 20px;
    letter-spacing: 1.5px}
/*888888888888888888888888888888888888888888888888888888888*/
.item {
    overflow: visible;
    position: relative;
    margin-top: 80px;
    width: 100%;
    min-width: 830px;
    z-index: 1;}
.title {
    z-index: 5;
    position: relative;
    padding: 25px 0 20px 0;
    background: #395b71;
    color: #fff;
    text-align: center;
    box-shadow: 0px 5px 7px -2px rgba(0, 0, 0, 0.5);
    height: 50px;}
.showRoom {
    z-index: 1;
    margin-top: -1px;
    background: #fff;
    width: 100%;
    overflow-y: hidden;
    overflow-x: scroll;}
.showRoom .container {   
     width: 3400px;
    padding: 0 0 25px 0;
    text-align: left;
    overflow-y: hidden;}
.oneLineVisuals {
    height: 235px;}
.showRoom img {
    height: 230px;
    border: solid 1px #d5d7d2;}
.more {
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none;
    display: block;
    background: #c60f24;
    text-align: center;
    -webkit-border-radius: 160px;
    border-radius: 160px;
    position: absolute;
    top: -35px;
    right: 20px;
    width: 70px;
    height: 70px;
    padding: 40px;
    font-size:20px;
    color: #fff;
    box-shadow: 5px 5px 16px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    font-family: adventbold, Helvetica, Arial, sans-serif;
    z-index: 100;}
.more:hover{
    transform: scale(1.5) rotate(20deg);
    right: 80px;
    background: #f02239;}

.koobyItem{
    margin-top: 120px;}
.koobyItem .title{
    overflow: visible;
    background: #2f8cd7;
    height: 78px;}
.koobyItem a.itemLogo{
    position: absolute;
    z-index: 50;
    top: -78px;
    left: calc(50% - 250px);}
.koobyItem .itemLogo img{width: 500px;}
.koobyItem .more{
    top: -15px;}

.collegeItem .title{
    background: #e17979;
    height: 50px;}
.collegeItem a.itemLogo{
    top: -5px;
    position: relative;
    display: inline-block;
    height: 56px;}
.collegeItem .itemLogo img{height: 60px;}


a.itemLogo, .itemLogo img{
    transition: all 0.3s;}

.lyceeItem .title{
    background: #deb475;}
.lyceeItem a.itemLogo{
    top: -5px;
    position: relative;
    display: inline-block;
    height: 56px;}
.lyceeItem .itemLogo img{height: 60px;}

.prepaItem .title{
    background: #b08596;}
.prepaItem a.itemLogo{
    top: -5px;
    position: relative;
    display: inline-block;
    height: 56px;}
.prepaItem .itemLogo img{height: 60px;}

.btsItem .title{
    background: #819dc5;}
.btsItem a.itemLogo{
    top: -5px;
    position: relative;
    display: inline-block;
    height: 56px;}
.btsItem .itemLogo img{height: 60px;}


.mediumSize{min-width: 830px;}
.mediumSize a.itemLogo { top: 5px;}
.mediumSize .itemLogo img{height: 40px;}


.smallSize a.itemLogo { top: 5px;}
.smallSize .itemLogo img{ height: 40px;}

/*888888888888888888888888888888888888888888888888888888888*/
.footer{
    margin-top: 100px;
    width: 100%;
    min-width: 830px;
    background: #313131;
    padding: 80px 0 130px 0;
    color: #c1c1c1;
    font-size: 12px;
    letter-spacing:1px;
    line-height: 20px;}
.footer a{
    color: #c1c1c1;
    text-decoration:none;
    margin-left: 10px;}
.footer a:hover{
    color: #fff;}
.footer li{
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 25px;}
.footerItem{
    float: left;
    width: 150px;
    margin-right: 30px;}
.footerOne .logo{
    width: 256px;}
.footerOne{
    line-height: 30px;
    width: 270px;
    margin-left: 5%;
    margin-right: 40px;
    text-align: right;}
.footerTwo, .footerThree{
    padding-left: 30px;
    border-left: 1px solid #555752;}
.newsletterField {
    color: #404335;
    background: #6f706d;
    height: 25px !important;
    width: 200px;
    border: 1px solid #6f706d;
    padding: 2px 2px 3px 10px;
    top: -12px;
    position: relative;
    right: -4px;
    border: none;
    -webkit-appearance: none;
    -webkit-border-radius:0;}
.goButton{
        width: 23px;}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #404339;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #404339;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #404339;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #404339;
}

/*****************************/
/*****SmallSize***************/
/*****************************/

body.smallSize  { 
    /*overflow: hidden;*/}
.smallSize .header {
    min-width: 400px;
    height: 140px;}
.smallSize .socialLinks{
    top: 0px;
    display: block;
    position: relative;}
.smallSize .mainLogo {
    position: relative;
    width: 100%;
    top: 40px;
    margin-left: 0;
    left: 0%;}
.smallSize .mainLogo a {
    width: auto;
    height: 64px;}
.smallSize .mainLogo img{
    width: 88% !important;}
.smallSize .punchLine{
    font-size: 15px;}
.smallSize .item {
    margin-top: 130px;
    min-width: 400px;}
.smallSize .showRoom {
    min-width: 400px;
    padding-left: 0 !important;
    overflow: inherit;}
.smallSize .oneLineVisuals{
    height: auto;}
.smallSize .oneLineVisuals .container{
    text-align: center;
    width: 80%;
    margin: 0 auto;}
.smallSize .oneLineVisuals a img{
    width: 80%;
    height: auto;}
.smallSize .oneLineVisuals a{
    display: none;}
.smallSize .oneLineVisuals a:nth-child(1), .smallSize .oneLineVisuals a:nth-child(2), .smallSize .oneLineVisuals a:nth-child(3), .smallSize .oneLineVisuals a:nth-child(4), .smallSize .oneLineVisuals a:nth-child(5){
    display: block;}
.smallSize .more{
    right: 10px;
    padding: 20px 20px 0px;
    font-size: 17px;
    line-height: 19px;
    border-radius: 160px 160px 0 0;
    top: -90px;
    box-shadow: none;}
.smallSize .more:hover{
    transform: none;
    right: 30px;
    background: #f02239;}



.smallSize .koobyItem .title{
    height: 23vw;
    padding: 5vw 0;}
.smallSize .koobyItem a.itemLogo{
    top: 0;
    left: 15vw;
    bottom: 0;}
.smallSize .koobyItem .itemLogo img {
    vertical-align: bottom;
    width: 70vw;}




.smallSize .footer {
    min-width: 400px;}
.smallSize .footer{
    min-width: 400px;}
.smallSize .footerOne{
    width: 90% !important;}
.smallSize .footerOne .logo {
    width: 100%;}
.smallSize .footerItem{
    width: 40%;
    margin-right: 0;
    margin-bottom: 40px;}
.smallSize .playGround{
    min-width: 400px;}
.smallSize .more{
//display: none;}

/*888888888888888888888888888888888888888888888888888888888*/
.navBox{
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 290px;
    box-shadow: 0px 5px 19px 0px rgba(0, 0, 0, 0.6);
    background:#d84354;
    font-family: adventlight, Helvetica, Arial, sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    z-index:1000;
    color: #fff;
    text-align: left;}
.navBox .close img{
    width: 50%;}
.navBox a{
    color: #fff;
    text-decoration: none;}
.logFlap a{
    color: #fff;}
.navBox ul{
    list-style-type:none;}
.navBox li{
    line-height: 45px;}
#pnl-navbox.navBox li, #pnl-login.navBox li, #frm-login.navBox li{
    line-height: 45px;}
.navFlap{
    padding: 20px;
    background:url(/themes/default/images/navFlapBackground.png) repeat-x;}
.navFlap input{
    border: none !important;
    width: 241px !important;
    height: 18px;}
.navFlap .spacer{
    margin: 10px 0 10px 0;}
.navFlap #foldertype{
    margin-top: 3px !important;}
.navFlap select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #FFF url(/themes/default/images/select_background.png) no-repeat 220px -5px;}
.navFlap .button{
    background: #124a6d;}
.logFlap a{
    color: #ebf1e1;}
.navBox .close{
    position:absolute;
    top:10px;
    right:-5px;}
.greenDiv{
    display:block;
    position: absolute;
    top: 420px;
    right: 80px;
    z-index:999;}
.loginBox{
    display: block;
    right: 80px;
    top: 20px;
    width: 400px;
    z-index: 10000;}
.loginBox .champTexte{
    border: none;
    -webkit-appearance: none;
    -webkit-border-radius:0;
    font-family: adventregular, Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    width: 335px !important;
    padding: 7px 3px 1px 3px;
    margin-bottom: 10px;
    font-size: 16px;}
.loginBox .button{
    font-size: 16px;
    margin: 12px 0 12px 0;
    display: table;
    height: 40px !important;
    width: 340px !important;}
.loginBox li:last-child{
    margin-top: 10px;}
.loginBox .errorMessage{
    color: #6e1212;
    font-family: adventbold, Helvetica, Arial, sans-serif;
    line-height: 17px;
    margin: 12px 0 15px;}
#pnl-login.navBox .howToMessage{
    font-size: 13px;
    line-height: 16px !important;}
.loginBox .howToMessage strong{
    font-size: 14px;
    margin-bottom: 5px;
    font-family: adventbold, Helvetica, Arial, sans-serif;}
.qrBox{
    background: #fff;
    display: block;
    right: 60px;
    top: 270px;}
.qrBox .navFlap{
    text-align:center;
    background: none;
    color: #76b919;
    font-family: adventbold, Helvetica, Arial, sans-serif;}
.qrBox .navFlap a{
    color: #87ac4d;}
.qrBox .navFlap a img{
    width: 100%;}
.notAvailableBox{
    top: 980px;
    left: 80px;
    background: #c91926;}
.notAvailableBox .navFlap{
    background: transparent;}
.smallSize .notAvailableBox p {
    font-size: 35px;
    line-height: 65px !important;
}
/*******************************************************/

.book .centerColumn img.noMoreColors{
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
	filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
	opacity: 0.3;}
	
.removedFlag{
	font-family: adventlight, Helvetica, Arial, sans-serif;
	letter-spacing: 2px;
	width: 100%;
	z-index: 5;
	position: relative;
	padding: 25px 0 20px 0;
	background: #d11f2c;
	color: #fff;
	text-align: center;
	box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 50%;}