/* CSS Document */

html, body			{ margin:0; padding:0; }

body				{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px;
						background: url(../images/overall_back_top.gif) repeat-x top #cc9900; padding-top:48px; }

a img				{ border:none; }

/***************************************************************************************/
/*************************************** TOP *******************************************/
/***************************************************************************************/

#top					{ width:100%; position:relative; height:80px; }

#topLeft				{ width:48%; height:80px; float:left; background: url(../images/topBackLeft.gif) repeat-x top; }
#topRight				{ width:48%; height:80px; float:right; background: url(../images/topBackRight.gif) repeat-x top; }

#topCenter				{ position: absolute; top:0; left:50%; margin-left:-500px; width:1000px; background-color:#fff; }

#topCities				{ float:right; background:url(../images/topCitiesBack.gif) top left no-repeat #cc9900;
							padding: 9px 0 9px 14px; width:420px; }

#topCities div.container { margin-left: 20px; position:relative; display:inline;  }

#topCities div.address		{ position:absolute; top:20px; left:0; background-color:#fff9e5; color:#5e5e5e; font-size:0.9em;
							border:1px #a0a0a0 solid; width: 240px; padding:4px; display:none; -moz-opacity: 0.9; }

#topCities div.address table		{ margin:5px 0; }
#topCities div.address table th	{ font-weight:normal; border-collapse:collapse; padding-right:6px; text-align:left; }
#topCities div.address table td	{ text-align:right; }
/***************************************************************************************/
/************************************* MIDDLE ******************************************/
/***************************************************************************************/

#middle				{ background-color:#fff; width:100%; padding-top: 60px; }
#main				{ margin:0 auto; width:1000px;  }

#left_col			{ width:550px; margin-right: 70px; float:left; }

.title				{ padding-bottom: 25px; }
.title a			{ float:right; }

.infos				{ border:1px solid #cc9900; padding:2px 8px; margin-bottom:15px; font-weight:bold; }
.infos p			{ padding:0; margin:0; }
.infos strong		{ color:#cc9900; }
.infos span			{ margin-left:50px; }
.infos .date		{ float:right; }

/********* TABLE VALUES **********************/

table.values			{ width:100%; border-collapse:collapse; text-align:left; }
.values td, .values th	{ padding:2px 10px 2px 40px; }
.values th				{ background-color:#cc9900; color:#000; }

.values thead			{ border-bottom:2px solid #fff; }

.values tbody			{ padding-top:20px; }
.values tbody th		{ padding-left:20px; }

.values .gray td		{ background-color:#d6d6d6; }
.values .gray th		{ background-color:#dfbf5e;  }
/********* END TABLE VALUES ******************/

ul						{ list-style-image:url(../images/dot.gif); margin-bottom:50px; }
ul li					{ font-weight:bold; margin-bottom: 10px;}

table.calls				{ text-align:left; margin:0 auto; border-collapse:collapse; }
table.calls td, table.calls th		{ vertical-align:top; vertical-align:top;}
.calls tr.middle th		{ border-bottom: 1px solid #cc9900; border-top: 1px solid #cc9900; }
.calls tr.middle td		{ border-bottom: 1px solid #cc9900; border-top: 1px solid #cc9900; }
.calls th				{ text-transform:uppercase; font-weight:normal; padding-right: 20px;  }

table.adress 			{ margin-bottom:30px; }
table.adress caption	{ color:#cc9900; text-align:left; font-weight:bold; margin-bottom:3px; }
table.adress tr			{ font-size:0.9em;  }
table.adress th			{ padding-right:10px; width:100px; vertical-align:top; text-align:right; }
table.adress td			{ vertical-align:top; }


.logos img				{ margin:20px 10px; }



h2					{ font-size: 1.1em; margin:5px; }
p					{ margin:5px 0 15px 0px; text-align:justify; }

a					{ color:#cc9900; text-decoration:none; font-weight:bold; }
a:hover				{ text-decoration:underline; }


/***************************************************************************************/
/************************************* FOOTER ******************************************/
/***************************************************************************************/

#footer					{ background:url(../images/overall_back_bottom.gif) repeat-x top; height:99px; clear:both; }



object			{ float:left; display:block; }

div.alert {
    position:absolute;
    top:0;
    left:0;
    width:558px;;
    height:307px;
    background:url(../images/alert.png);
}

/***************************************************************************************/
/*********************************** ANIMATION *****************************************/
/***************************************************************************************/

div.animation {
    position: relative;
    width: 321px;
    height: 287px;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    margin-left: 20px;
    padding: 50px;
    box-sizing: border-box;
}

div.animation .piece span {
    background-color: rgba(255,255,255,0.4);
    position: absolute;
    padding: 10px;
    font-size: large;
    font-weight: bold;
    font-family: Verdana;
    visibility: hidden;
}

div.animation .piece span.flipped {
    visibility: visible;
}

div.animation .piece-1 {
    position: absolute !important;
    top: 2px;
    left: 4px;
    width: 90px;
    height: 90px;
    animation: piece1 0.2s linear;
    animation-fill-mode: forwards;
    opacity: 0;
}

div.animation .piece-1 span {
    top: 14px;
    right: -195px;
}

@keyframes piece1 {
    from {
        transform: translateX(-50%);
        opacity: 1;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

div.animation .piece-1 .front {
    width: 100%;
    height: 100%;
    background-image: url(../images/piece1-front.png);
    background-repeat: no-repeat;
    background-position: center;
}

div.animation .piece-1 .back {
    width: 100%;
    height: 100%;
    background-image: url(../images/piece1-back.png);
    background-repeat: no-repeat;
    background-position: center;
}

div.animation .piece-2 {
    position: absolute !important;
    bottom: 8px;
    left: 46px;
    width: 90px;
    height: 90px;
    animation: piece2 0.5s linear;
    animation-fill-mode: forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

div.animation .piece-2 span {
    top: 15px;
    right: -187px;
}

@keyframes piece2 {
    from {
        transform: translate(-50%, 50%);
        opacity: 1;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

div.animation .piece-2 .front {
    width: 100%;
    height: 100%;
    background-image: url(../images/piece2-front.png);
    background-repeat: no-repeat;
    background-position: center;
}

div.animation .piece-2 .back {
    width: 100%;
    height: 100%;
    background-image: url(../images/piece2-back.png);
    background-repeat: no-repeat;
    background-position: center;
}

div.animation .piece-3 {
    position: absolute !important;
    bottom: 108px;
    right: 128px;
    width: 90px;
    height: 90px;
    animation: piece3 0.5s linear;
    animation-fill-mode: forwards;
    animation-delay: 0.8s;
    opacity: 0;
}

div.animation .piece-3 span {
    bottom: 10px;
    left: -181px;
}

@keyframes piece3 {
    from {
        transform: translate(100%, 150%);
        opacity: 1;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

div.animation .piece-3 .front {
    width: 100%;
    height: 100%;
    background-image: url(../images/piece3-front.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 85%;
}

div.animation .piece-3 .back {
    width: 100%;
    height: 100%;
    background-image: url(../images/piece3-back.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 85%;
}

div.animation .piece-4 {
    position: absolute !important;
    top: 50px;
    right: 27px;
    width: 90px;
    height: 90px;
    animation: piece4 0.5s linear;
    animation-fill-mode: forwards;
    animation-delay: 1.2s;
    opacity: 0;
}

div.animation .piece-4 span {
    top: -26px;
    left: -108px;
}

@keyframes piece4 {
    from {
        transform: translate(-100%, -150%);
        opacity: 1;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

div.animation .piece-4 .front {
    width: 100%;
    height: 100%;
    background-image: url(../images/piece4-front.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 85%;
}

div.animation .piece-4 .back {
    width: 100%;
    height: 100%;
    background-image: url(../images/piece4-back.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 85%;
}