/*
Stylesheet Name: Eurowatch Layout
Author: Christèle Legeard
Version: 1.0
Date: 03/11/2016
*/

/* ----------------------------------------------------------------------------------*/
/* ----------------------------------- POPUP ---------------------------------------*/
/* ----------------------------------------------------------------------------------*/

#popup  {  font-size:0.9em }
#popup .article-content  {  font-size:1em }

#title {
    font-family:"Roboto Condensed", "Helvetica Neue", Helvetica, Arial,sans-serif; 
    font-size:18px;
    color:#fff
}
.form-control {
    height: 30px;
    font-size: 14px;
}
.form-horizontal .control-label { text-align:right }
.phone .input-group .form-inline .form-control:first-child { margin: 0 4px; width:80px }
.phone .input-group .form-inline .form-control:last-child { width:85% }
#popup .table-bg { margin: 20px 0; padding:20px }

/* Logos */

.connectedServices {
    background: url('../img/logoConnectedServices.png') no-repeat;
    width: 203px;
    height: 50px;
    background-size: contain;
    font-size: 0;
    margin: 0;
    display: block;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -webkit-transition: all 1s;
    transition: all 1s;
    transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
}

.eurowatch {
    width:232px;
    height:50px;
    position:absolute;
    right:30px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);   
    -webkit-transition: all 1s;
    transition: all 1s;
    transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    background: url('../img/logoEurowatch.png') no-repeat right;
    width:232px;
    height:50px;
    background-size:contain;
    font-size: 0 !important;
    margin:0
}

@media (max-width: 767px)    {   
    .eurowatch, .connectedServices { height:40px;}    
}

@media (max-width: 767px) and (orientation:portrait) {
    #logos { height: 90px}
    .connectedServices {
        left: 10px;
        margin: 10px 0 0;
        position: relative;
        top: initial;
        transform:none
    }
    .eurowatch {
        float: right;
        position: relative;
        right: 10px;
        top: initial;
        transform: none;
    }

}

@media (max-width: 480px) { 
    #logos { height: 90px}
     .connectedServices, .eurowatch { height:35px;}
     .connectedServices { top:3px }
    }