/* 
    Document   : intro
    Created on : Sep 9, 2013, 11:29:54 AM
    Author     : Fastweb
    Description:
        intro stylesheet
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0; 
    padding:0; 
    border:0;
    outline:0;
    font-weight:inherit;
    font-style:inherit;
    font-size:100%;
    font-family:inherit;
    vertical-align:baseline
}
root {
    display: block;
}
body {
    background-image: url('../images/intro/pattern_intro.jpg');
    background-repeat: repeat;
    margin: 0; 
    padding: 0; 
}

a { text-decoration: none; }
a img { border: 0 }

.container {
    height: auto;
    margin: 0 auto;
    width: 990px;
}


.mainhomepage .leftfonbg {
    float: left;
    margin: 0 30px 0 0;
    width: 222px;
    height: 222px;
}

.mainhomepage .lastfonbg {
    margin: 0;
}



.circle {
    vertical-align: middle;
    background: #ffffff;
    border-radius: 100%;  
    position: relative;
    margin: 0 auto;
    width: 220px;
    height: 220px;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    display: inline-block;
}
.circle .maskcircle {
    position: absolute;
    top: 50%;
    margin-top: -30px;
    left: 0;
    z-index: 20;
    width: 100%;
    text-align: center;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.circle .tree {
    margin-top: -50px;
}

.circle .maskcircle .circlename {
    text-transform: uppercase;
    font-size: 28px;
    color: #ffffff;
    text-shadow: 1px 2px 0px #4f4f4f;
}
.circle .maskcircle .circleage {
    font-size: 18px;
    color: #ffffff;
}
.circle img {
    border-radius: 100%;
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    -webkit-opacity: 0.3;
    opacity: 0.3;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.circle:hover .maskcircle {
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.circle:hover img {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.circle:before,
.circle:after {
    border-radius: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    -webkit-transition: box-shadow 0.75s;
    -moz-transition: box-shadow 0.75s;
    -ms-transition: box-shadow 0.75s;
    transition: box-shadow 0.75s;
}
.circle:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* culori */
.circle:hover:before,
.circle:hover:after {
    box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
}
.circle:hover > h1 {
    color: #b9b9b9;
}


/* color */
.circle:before,
/*.circle:after {
  box-shadow: inset 155px 0 0 rgba(220, 81, 53, 0.3), inset 0 155px 0 rgba(220, 81, 53, 0.3), inset -155px 0 0 rgba(220, 81, 53, 0.3), inset 0 -155px 0 rgba(220, 81, 53, 0.3);
}*/
.circle:after {
  box-shadow: inset 155px 0 0 rgba(85, 85, 85, 0.3), inset 0 155px 0 rgba(85, 85, 85, 0.3), inset -155px 0 0 rgba(85, 85, 85, 0.3), inset 0 -155px 0 rgba(85, 85, 85, 0.3);
}

/* titlu logo */
.logo {
    background-image: url('../images/intro/titlu_logo.png');
    background-repeat: no-repeat;
    float: left;
    height: 64px;
    margin: 105px 0 105px 72px;
    width: 820px;
}

.linkfestival {
    float: left;
    height: 44px;
    margin: 105px 0 0 170px;
    width: 644px;
text-align: center;
}
a.linkf {color:#fa3333; font-family: 'Titillium Web', Arial, sans-serif;  font-size:24px; line-height:1.5em; outline:none; text-decoration:none; }
a.linkf :hover{text-decoration:underline;}

.motto {
    background-image: url('../images/intro/motto.png');
    background-repeat: no-repeat;
    float: left;
    height: 44px;
    margin: 35px 0 20px 260px;
    width: 444px;
}

/*
.preselectie {
    background-image: url('../images/intro/flyer_preselectie.jpg');
    background-size: 567px 800px;
    background-repeat: no-repeat;
    background-color: #7a7a7a;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -webkit-box-shadow: 4px 4px 4px 0px #727272; 
    box-shadow: 10px 10px 10px 0px #727272;
    height: 800px;
    margin: 0 0 0 350px;
    position: absolute;
    text-align: center;
    top:0;
    left:0;
    width: 567px;
}

.preselectie-thumb {
    height: 250px;
    margin: 0 0 0 420px;
    width: 150px
}
*/
.preselectie {
    background-image: url('../images/intro/preselectie_royal_models.jpg');
    background-size: 600px 882px;
    background-repeat: no-repeat;
    background-color: #030000;
    background-position: center 30px;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -webkit-box-shadow: 4px 4px 4px 0px #323232; 
    box-shadow: 10px 10px 10px 0px #323232;
    height: 1000px;
    margin: 0 0 0 250px;
    position: absolute;
    text-align: center;
    top:0;
    width: 600px;
}

.preselectie-thumb {
    height: 176px;
    margin: 0 0 0 400px;
    width: 120px
}

.inchide {
    border:1px solid #999;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    color: #C0392B;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    padding: 5px;
}