/* ====================================== Custom CSS Code =================================================*/

/* you can add any custom css code for any class, id, tags and anything here, it will be active.. */
/* text styles */

.000{ color: #000;}
.222{ color: #222;}
.333{ color: #333;}
.444{ color: #444;}
.555{ color: #555;}
.666{ color: #666;}
.777{ color: #777;}
.888{ color: #888;}
.999{ color: #999;}
.aaa{ color: #aaa;}
.bbb{ color: #bbb;}
.ccc{ color: #ccc;}
.ddd{ color: #ddd;}
.eee{ color: #eee;}
.fff{ color: #fff;}

.em07{ font-size: 0.7em;}
.em08{ font-size: 0.8em;}
.em09{ font-size: 0.9em;}
.em10{ font-size: 1em;}
.em11{ font-size: 1.1em;}
.em12{ font-size: 1.2em;}
.em13{ font-size: 1.3em;}
.em14{ font-size: 1.4em;}
.em15{ font-size: 1.5em;}
.em16{ font-size: 1.6em;}
.em17{ font-size: 1.7em;}
.em18{ font-size: 1.8em;}
.em19{ font-size: 1.9em;}
.em20{ font-size: 2em;}
.em22{ font-size: 2.2em;}
.em24{ font-size: 2.4em;}
.em26{ font-size: 2.6em;}

.ml10{ margin-left: 10px;}
.ml20{ margin-left: 20px;}
.ml30{ margin-left: 30px;}
.ml40{ margin-left: 40px;}
.ml50{ margin-left: 50px;}
.ml60{ margin-left: 60px;}

.mr10{ margin-right: 10px;}
.mr20{ margin-right: 20px;}
.mr30{ margin-right: 30px;}
.mr40{ margin-right: 40px;}



.hide{
    display: none;
}

.nolink{
    cursor: pointer;
}

.sti-menu li a h2 {
	padding:0 !important;
}

body {
	background: url(../images/img/bg.png);
}

.clearfix h1, .clearfix h2, .clearfix h3, .clearfix h4, .clearfix h5 {
	text-shadow: 0 2px 0 #FFFFFF;
}

hr{
    border-color: #bbb;
}

.quote{
    background: url("../images/icons/quote.png") no-repeat scroll 0 0 transparent;
    display: block;
    padding-left: 20px;
    font-style: italic;
}


.only-mobile{
    display: none;
}


/* Tooltips */

.arrow_box {
    position: relative;
    background: #fff;
    border: 1px solid #999;
    opacity: 0;
    top: 5px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    padding: 6px 8px;
    text-align: center;
    border-radius: 4px;
    z-index: 50;
    margin-top: -10px;

}



.arrow_box:after, .arrow_box:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;

}

.arrow_box:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #fff;
    border-width: 6px;
    left: 50%;
    margin-left: -6px;
}
.arrow_box:before {
    border-color: rgba(153, 153, 153, 0);
    border-top-color: #999;
    border-width: 7px;
    left: 50%;
    margin-left: -7px;
}










/* ====================================== HEADER =================================================*/


.text_logo{
    color: #B5D56E;
    display: block;
    float: left;
    font-size: 2.4em;
    padding-top: 15px;
    text-shadow: 0 2px 0 #fff;
}
.text_cyril{
    color: #666;
}

.logo {
	display: block;
	float: left;
	padding-top: 15px;
	margin-right: 20px;
}

.header-light{
    background: url("../images/img/header_light.png") repeat scroll 50% 50% transparent;
    height: 208px;
    left: -50px;
    position: absolute;
    top: -100px;
    width: 285px;
    z-index: -200;
}
.header-shadow{
    background: url("../images/img/header_shadow.png") repeat scroll 50% 0 transparent;
    height: 30px;
        
    position: absolute;
    top: 91px;
    width: 100%;
    z-index: -200;
}

.navigation ul li a {
    font-size: 20px;
}







/* ====================================== DERNIERS PROJETS =================================================*/

.caption {
    position:relative;
    margin:0 auto;
}

img.pic-hover {
	position:absolute;
    left:0;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity  0.2s ease-in-out;
    -o-transition: opacity  0.2s ease-in-out;
    -ms-transition: opacity  0.2s ease-in-out;
    transition: opacity  0.2s ease-in-out;
}

img.pic-hover:hover {
	opacity:0;
}

.recent-work .item:hover, .lightbox .item:hover, .portfolio .item:hover{
	box-shadow: 0 0 3px #666;
}


.recent-work .item:hover a, .sti-menu li a, 
ul.team li p, .lightbox .item:hover a, .portfolio .item:hover a, 
#toggle-view li span.link.normal {
    color: #7faa22;
}

.recent-work .item h4, .lightbox .item h4, .portfolio .item h4 {
    padding: 5px;
}

.tag {

        text-decoration:none;
        font-size: 1em;
        line-height: 1.7em;
}



.slidecontrols li a.next:hover, .slidecontrols li a.prev:hover {
    background: #B5D56E;
}


.slidecontrols li a.next.carousel-disabled, .slidecontrols li a.prev.carousel-disabled {
    background: #ddd;
}



/* ====================================== COMPETENCES =================================================*/
.meter {
    background: none repeat scroll 0 0 #FFFFFF;
    padding: 5px;
    height: 18px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */

}

.meter-portfolio {
    padding: 4px;
    height: 12px;
}

.meter-portfolio > span:after {
    background: none repeat scroll 0 0 #bbb;
}

.progress-bar h5 {
    font-family:  'TitilliumText22LRegular', Arial, sans-serif;
}


/* ====================================== CLIENTS =================================================*/
.clients ul.items li {
    margin: 0 7px;
}
.clients .items{
    background-color: #fff;
}

.clients .colorTip {
    top:-20px;
}

.clients ul.items {
    padding: 6px 20px 30px 20px;
}

.tooltipclient .arrow_box {
}

.tooltipclient:hover .arrow_box {
    opacity: 1;
    top: 5px;

}

/* ====================================== RESPONSIVE =================================================*/

.tooltipresponsive:hover .arrow_box {
    opacity: 1;
    top: -10px;

}

.tooltipresponsive{
    display: inline-block;
    margin-left: 10px;
}

.ecran{
    margin-left: 0px;
}

.mobile .arrow_box{
    margin-left: -10px;
}



/* ====================================== FOOTER =================================================*/


footer [class^="icon-"]:before, footer [class*=" icon-"]:before {
    color: #B5D56E;
    font-size: 1.2em;
}

.ico-coffee {
    background: url(../images/icons/icons/ico-coffee.png) no-repeat 0 50%;
    padding-left: 20px;

}
.ico-offline {
    background: url(../images/icons/ico-offline.png) no-repeat 0 50%;
    padding-left: 20px;

}

footer h1, footer h2, footer h3, footer h4 {
    color: #E8E8E8;
    font-family: 'TitilliumText22LRegular', Arial, sans-serif;
}

footer{
    background: url(../images/img/irongrip.png) repeat scroll 0 0 transparent;
}

/* ====================================== Page Type Portfolio =================================================*/

.flexslider2 {
    max-height: 420px;
    overflow: hidden;

}



/* =============== Détails icons ================*/

.icon_da {
    width: 50px;
    height: 40px;
    background: url(../images/icons/icon_brain.png) no-repeat;
    position: relative;
    top: 70px;
    left: 28px;
    margin-top: -28px;
}

.icon_webdesign {
    width: 40px;
    height: 40px;
    background: url(../images/icons/icon_pixels.png) no-repeat;
    position: relative;
    top: 73px;
    left: 33px;
    margin-top: -30px;
}

.icon_code {
    width: 50px;
    height: 40px;
    background: url(../images/icons/icon_code.png) no-repeat;
    position: relative;
    top: 75px;
    left: 25px;
    margin-top: -30px;
}

.icon_logo {
    width: 50px;
    height: 40px;
    background: url(../images/icons/icon_logo.png) no-repeat;
    position: relative;
    top: 71px;
    left: 31px;
    margin-top: -30px;
}

.icon_cafe {
    width: 50px;
    height: 40px;
    background: url(../images/icons/icon_cafe.png) no-repeat;
    position: relative;
    top: 68px;
    left: 33px;
    margin-top: -30px;
}


.tooltipdetail{
    display: inline-block;
    margin-left: 20px;
}

.tooltipcafe .arrow_box{
    margin-left: 30px;
}

.tooltiplogo .arrow_box{
    margin-left: 20px;
}


.tooltipdetail:hover .arrow_box {
    opacity: 1;
    top: 0px;

}

.iconedetail{
    margin-left: 35px; 
}



.btn-lien{   
        background-color:#bad46e;
        color:#ffffff;
        padding:10px;
        text-decoration:none;
        text-align: center;
        display: inline-block;
        width: 220px;
        font-size: 18px;
        margin-top: 20px;
        -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.online:hover{   
        background-color:#999;
        color:#ffffff;
}

.offline{
    background-color:#ccc;
}



/* ====================================== SERVICES =================================================*/

.portfolio .item h2 {
    font-family: 'TitilliumText22LRegular',Arial,sans-serif;
    margin-top: 10px;
}

.services .item {
    cursor: default;
}


.citation {
   background: #444;
    padding: 15px;
    display: inline-block;
    
}

.citation h2{
 
    font-family:  'TitilliumText22Lthin', Arial, sans-serif;
    font-size: 26px;
    text-shadow: 0px -2px 0 #222;
    color: #aaa;
}

.citation img {
    margin: 0 20px 0 0;
    float: left;
}

.icon-box {
    border-radius: 50px 50px 50px 50px;
    padding: 6px;
    height: 40px;
    width: 40px;
}


.icon-box img {
    max-height: 40px;
    max-width: 40px;
    height: 40px;
    width: 40px;
}

.bloc-methodologie p{
    padding-left: 60px;
}

.bloc-methodologie h3{
    padding-left: 60px;
    line-height: 18px;
    padding-bottom: 10px;
}



.our-services{
    -moz-hyphens: auto;
    hyphens:auto;
}

.our-services ul li:hover h3{
    color: #555;
}

.bloc-besoins {
    height: 100%;
    min-height:100%;
}


.bloc-besoins .item p{
    padding-bottom:20px;
    line-height: 18px;
}






/* ====================================== CONTACT =================================================*/

/*  PARALLAX */

@media only screen and (min-width: 768px) {
    #bg-marseille-mobile{
        display: none;
    }
}

#bg-marseille{
    background:  url(../images/img/bg-marseille.jpg) no-repeat 50% 50px fixed;
    height: 400px;
}



#bg-marseille > .container{
    padding-top: 80px;
}

#bg-marseille .item{
    opacity: 0.6;
    transition: all 0.2s ease-in 0s;
}
#bg-marseille .item:hover{
    opacity: 1;
    border-right: 5px solid #c8c2a6;
}

.bloc-contact .item:hover .square{
    background: #c8c2a6;
}

.h1contact{
    color: #999;
    margin: 0;
    padding: 0;
}

.bloc-contact p{
    line-height: 18px;
}


/* #Mobile (Landscape) - MODIFS
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns                     { width: 420px;  }
        .container .two.columns                     { width: 420px; }
        .container .three.columns                   { width: 420px; }
        .container .four.columns                    { width: 420px; }
        .container .four2.columns                   { width: 200px; }
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 420px;}

        

        /* HEADER */

        #menu{
            margin-top:40px;
        }



        /* Accueil */

        .slider li > div:first-child{
            margin-right: 20px;
        }
        .slider li > div:last-child{
            margin-left: 20px;
        }

        /* Slider Home */
        .flexslider {
            display: none;
        }

        .only-mobile{
        display: inline;
        }



        /* Services */

        .bloc-services div:nth-child(5), .bloc-services div:nth-child(3){
            margin-left: 20px;
        }

        .bloc-services div:nth-child(2), .bloc-services div:nth-child(3){
            margin-bottom: 20px;
        }



        /* Contact */

        #bg-marseille{
            display: none;
        }

        #bg-marseille-mobile{
            background:  url(../images/img/bg-marseille.jpg) no-repeat 50% 150px fixed;
            height: 550px;
        }

        #bg-marseille-mobile > .container{
            padding-top: 20px;
        }



        /* Portfolio */

        .tooltipdetail {
            display: inline-block;
            margin-left: 25px;
        }
        .arrow_box{
            display: none;
        }
        .iconedetail{
            margin:0 ; 
        }

        .slide div:nth-child(1), .slide div:nth-child(2){
            margin-bottom: 20px;
        }
        
        .phone-hidden{
            display: none;
        }



    }

/* Note: Design for a width under 480px */
@media only screen and (max-width: 479px) {


    #menu{
        margin-top:40px;
    }


/* Slider Home */
    .flexslider {
        display: none;
    }

    .only-mobile{
    display: inline;
    }

/* Services */
    .bloc-besoins img{
        height: 50%;
        width: auto;
    }
    .bloc-besoins .item .square{
        width: 60px;
    }

    /* Portfolio */

        .align-center {
            display: inline-block;
            margin-left: 0px;
            width: 95px;
            height: 100%;
        }
        .tooltipdetail {
            display: inline-block;
            margin: 0 15px;
            width: 95px;
            height: 100%;
        }
        .arrow_box{
            display: none;
        }
        .iconedetail{
            margin:0 ; 
        }

        .slide div:nth-child(1), .slide div:nth-child(2){
            margin-bottom: 20px;
        }

        .phone-hidden{
            display: none;
        }


/* Contact */
    .bloc-contact img{
        height: 50%;
        width: auto;
    }
    .bloc-contact .item .square{
        width: 60px;
    }

   /* Contact Doublon @media*/

        #bg-marseille{
            display: none;
        }

        #bg-marseille-mobile{
            background:  url(../images/img/bg-marseille.jpg) no-repeat 50% 150px fixed;
            height: 550px;
        }

        #bg-marseille-mobile > .container{
            padding-top: 20px;
        }




}