/*
 * Feuille de style Challenge CSS3
 * 
 * @author : Ackwa
 */
@charset "UTF-8";

/*
 * Fonte(s)
 *
 * Museo Slab : http://www.fontspring.com/fonts/exljbris/museo-slab
 *
 * @info  Seule la version 500 est gratuite
 */
@font-face {
    font-family: MuseoSlab;
    src: url('../fonts/MuseoSlab_500.eot');
    src: url('../fonts/MuseoSlab_500.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MuseoSlab_500.woff') format('woff'),
         url('../fonts/MuseoSlab_500.ttf') format('truetype'),
         url('../fonts/MuseoSlab_500.svg#wf') format('svg');

	font-weight: normal;
	font-style: normal;
}

/* 
 * Logo MODX
 */
.modxlogo {
	width: 260px;
    height:100px;

    margin:0;
    padding:0;
    padding-left:26px;
    padding-top:16px;    
}

.modxlogo h1 {
	font-family: MuseoSlab;
    font-weight:500;
	font-size: 44px;
	line-height: 44px;
    letter-spacing:-1px;
    margin:0;

    position: relative;
	bottom: 105px;
	left: 82px;
}

.modxlogo h1 sup {
	font-family: MuseoSlab;
    font-weight:500;
	font-size: 12px;
    line-height: 12px;
    margin:0;

    position: relative;
    left: 3px;
    top: -10px;
    vertical-align:super;
}

.modxlogo h2 {
	font-family: MuseoSlab;
	font-size: 18px;
    font-weight:500;
    text-transform:uppercase;
    line-height: 18px;
    margin:0;

    position: relative;
	bottom: 108px;
	left: 82px;
}

.modxlogo h2.P {
    _opacity: 1;

    -webkit-animation: fadeout 10s infinite;
       -moz-animation: fadeout 10s infinite;
            animation: fadeout 10s infinite;
}
.modxlogo h2.A {
    opacity: 0;
    bottom: 126px;

    -webkit-animation: fadein 10s infinite;
       -moz-animation: fadein 10s infinite;
            animation: fadein 10s infinite;
}
.modxlogo h2.C {
    font-size: 17px;
    text-transform:none;
}
.modxlogo h2 sup {
    font-family: MuseoSlab;
    font-weight:500;
    font-size: 8px;
    margin:0;

    position: relative;
    left: 0px;
    top: -1px;
    vertical-align:super;
}
.modxlogo h3.L1 {
    font-family: MuseoSlab;
    font-weight:500;
    font-size: 38px;

    position: relative;
    left: -27px;
    top: -113px;
}
.modxlogo h3.L2 {
    font-family: MuseoSlab;
    font-weight:500;
    font-size: 16px;

    position: relative;
    left: 82px;
    top: -127px;
}

div.X1, div.X2, div.X3 {
    position:relative;
}
div.X1 {
	width: 48px;
	height: 78px;
	opacity: 0.8;

    -webkit-transform: skewX(-34deg);
	   -moz-transform: skewX(-34deg);
	    -ms-transform: skewX(-34deg);
	        transform: skewX(-34deg);
    
	right: 0px;
	bottom:0px;
    z-index:120;

    /* Couleurs et dégradé à revoir */
    background-color: #429a50;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#52a045), to(#adca52));
	background-image: -moz-linear-gradient(90deg, #70b261 0%, #bad568 100%);
}

div.X2 {
	width: 78px;
	height: 30px;
	opacity: 1;
	
	-webkit-transform: skewY(34deg);
	   -moz-transform: skewY(34deg);
	    -ms-transform: skewY(34deg);
	        transform: skewY(34deg);

    right: 16px;
	bottom: 64px;
    z-index: 110;
    
    background-color: #19abd7;
	background: -webkit-gradient(linear, left bottom, right bottom, from(white), color-stop(0.005, #049cc0), to(#79d6ec)) #26a1a5;
	background: -moz-linear-gradient(0deg, white 0%, #049cc0 0.5%, #79d6ec 100%) #26a1a5;
}

div.X3 {
	width: 78px;
	height: 12px;
	opacity: 1;
	
	-webkit-transform: skewY(34deg);
	   -moz-transform: skewY(34deg);
	    -ms-transform: skewY(34deg);
	        transform: skewY(34deg);
    
	right: 15px;
	bottom: 56px;
    z-index: 110;
    
    background-color: #a52626;
	background: -webkit-gradient(linear, left bottom, right bottom, from(#d80e01), to(#ed6a1c)) #a52626;
	background: -moz-linear-gradient(0deg, #d80e01 0%, #ed6a1c 100%) #a52626;
}

/*
 * Animations
 */
@-webkit-keyframes fadein {
      0% {opacity:0;}
     50% {opacity:1;}
    100% {opacity:0;}
}
@-moz-keyframes fadein {
      0% {opacity:0;}
     50% {opacity:1;}
    100% {opacity:0;}
}
@keyframes fadein {
      0% {opacity:0;}
     50% {opacity:1;}
    100% {opacity:0;}
}
@-webkit-keyframes fadeout {
      0% {opacity:1;}
     50% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes fadeout {
      0% {opacity:1;}
     50% {opacity:0;}
    100% {opacity:1;}
}
@keyframes fadeout {
      0% {opacity:1;}
     50% {opacity:0;}
    100% {opacity:1;}
}

.custom {
    margin-top:20px;
}
.custom input {
    margin-left:10px;
}