/******************************************************************
                    SOMFY CONNEXOON PROCESS

*******************************************************************

    INDEX :
    1. Inline reset
    2. Fonts setup
    3. Ready to use and silent classes
    4. Layout & components
    5. Pages
        5.1. language-selection.html
        5.2. product-selection.html
        5.3. pin-activation.html
        5.4. connexoon-selection.html
        5.5. somfy-connexion.html
    6. Tunnel / Activation process
        6.1 Connexoon Window
        6.2 Connexoon Terrace
        6.3 Connexoon Access
        6.4 Connexoon ROMA
    7. BtoB tunnel

    DEPENDENCIES :
        - sprite.css

******************************************************************/


/******************************************************************
    1. Inline reset
******************************************************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; }

* { margin: 0; padding: 0; }
/******************************************************************
    2. Fonts setup
******************************************************************/
@font-face {
    font-family: 'pfdin-medium';
    src: url('../font/pfdintextpro-medium.eot');
    src: url('../font/pfdintextpro-medium.eot?#iefix') format('embedded-opentype'),
    url('../font/pfdintextpro-medium.woff') format('woff'),
    url('../font/pfdintextpro-medium.ttf')  format('truetype'),
    url('../font/pfdintextpro-medium.svg#pfdintextpro-medium') format('svg');

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

@font-face {
    font-family: 'pfdin-light';
    src: url('../font/pfdintextpro-light.eot');
    src: url('../font/pfdintextpro-light.eot?#iefix') format('embedded-opentype'),
    url('../font/pfdintextpro-light.woff') format('woff'),
    url('../font/pfdintextpro-light.ttf')  format('truetype'),
    url('../font/pfdintextpro-light.svg#pfdintextpro-light') format('svg');

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

@font-face {
    font-family: 'pfdin-bold';
    src: url('../font/pfdintextpro-bold.eot');
    src: url('../font/pfdintextpro-bold.eot?#iefix') format('embedded-opentype'),
    url('../font/pfdintextpro-bold.woff') format('woff'),
    url('../font/pfdintextpro-bold.ttf')  format('truetype'),
    url('../font/pfdintextpro-bold.svg#pfdintextpro-bold') format('svg');

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


/******************************************************************
    3. Ready to use and silent classes
******************************************************************/
/* Box model positionning */
.hidden, .not-displayable, .unvisible{ display:none }
.clearfix:before, .clearfix:after { content: "."; display: block; height: 0; overflow: hidden } .clearfix:after {clear: both} .clearfix {zoom: 1}
.center-box { margin: 0 auto; }
.float-left { float: left; } .float-right { float: right; }
.relative { position: relative; } .absolute { position: absolute; }
.inline-block { display: inline-block; *display: inline; *zoom: 1; }
.block { display: block; }
.cnx_hidden{ display:none!important; }


/******************************************************************
    4. Layout & components
******************************************************************/
html, body {
    font-family: 'pfdin-light', Arial, sans-serif;
    font-size: 14px;
    height: 100%;
}

#wrap { min-height: 100%; }
#main {
    overflow: hidden;
    padding-bottom: 70px;
}

/* header top */
#oemheader {
    background-color: white;
    position: absolute;
    box-sizing: border-box;
    height: 90px;
    width: 100%;
    padding: 5px;
    display: flex;
    padding-left: 20px;
    z-index: 99;
}
#oemheader.small {
    height: 60px;   
}

#oemheader.nobg {
    background: none;
}

#oemheader img {
    margin: auto 0;
    height: 40px;
}

#oemheader.small img {
    height: 20px;
}

#oemheader .sep {
    margin: 10px 40px;
    border-right: solid 1px #dbdbdc;
}
#oemheader.small .sep {
    margin: 10px 20px;
}

/* header inside tunnel */
#header_oem {
    width: 100%;
    display: inline-block;
    margin-top: -85px;
}
#header_oem .s-logo_tahoma {
    margin: 0 auto;
}
#footer {
    /*margin-top: -40px;*/
    /*height: 40px;*/

    background-color: white;
    position: relative;
    clear: both;
    margin-top: -70px;
    box-sizing: border-box;
    height: 70px;
    width: 100%;
    padding: 6px 0 5px;
}
    #footer .footer-links {
        text-align: center;
        border-bottom: solid 1px #dbdbdc;
        padding: 2.5px 0 7.5px;
        color: #485c74;
        margin-bottom: 5px;
        box-sizing: border-box;
    }
        #footer .footer-links a {
            text-decoration: none;
            color: #485C74;
        }
        #footer .footer-links .links-sep { margin: 0 10px; }
    #footer .footer-somfy {
        position: relative;
        top: 3px;
        left: 20px;
    }
    #footer .building-happiness {
        position: relative;
        right: 20px;
    }
	#footer .ligne_verticale {
	    width: 5px;
	    border-left: 1px solid gray;
	    height: 23px;
	    position: relative;
	    top: 3px;
	    left: 35px;
	}
    #footer .s-footer_mrstores {
	    background-image: url('../img/logos/footer_logo_mrstores.png');
	    width: 101px;
	    height: 23px;
	    position: relative;
	    left: 50px;
	    top: 4px;
	}
	#footer .s-footer_mat {
	    background-image: url('../img/logos/footer_logo_mat.png');
	    width: 52px;
	    height: 23px;
	    position: relative;
	    left: 50px;
	    top: 4px;
	}
	#footer .s-footer_wisniowski {
	    background-image: url('../img/logos/footer_logo_wisniowski.png');
	    width: 101px;
	    height: 23px;
	    position: relative;
	    left: 50px;
	    top: 4px;
	}
	#footer .s-footer_polargos {
	    background-image: url('../img/logos/footer_logo_polargos.png');
	    width: 51px;
	    height: 23px;
	    position: relative;
	    left: 50px;
	    top: 4px;
	}
	#footer .s-footer_tryba {
	    background-image: url('../img/logos/footer_logo_tryba.png');
	    width: 101px;
	    height: 24px;
	    position: relative;
	    left: 50px;
	    top: 4px;
	}

.border-container #wrap {
    border: solid 10px #000000;
    border-bottom: 0 none;
    border-top: 0 none;
    box-sizing: border-box;
}
.border-container #main {
    border-top: solid 10px #000000;
    padding-bottom: 70px;
}
.border-container #footer {
    height: 80px;
    margin-top: -80px;
    border-top: solid 10px #000000;
}

/* Tips */
.tip {
    display: none;
    position: absolute;
    width: 180px;
    padding: 17px 17px 17px 23px;
    text-align: left;
    background: white;
    border-radius: 6px;
    border: solid 1px #d1d1d1;
    margin-left: 30px;
    font-weight: normal;
    line-height: 17px;
    font-size: 14px;
    font-family: 'pfdin-medium', Arial, sans-serif;
}
.tip:after {
    content: '';
    display: block;
    position: absolute;
    top: 21px;
    right: 100%;
    width: 0;
    height: 0;
    border-color: transparent white transparent transparent;
    border-style: solid;
    border-width: 8px;
}
.tip:before {
    content: '';
    display: block;
    position: absolute;
    top: 20px;
    right: 100%;
    width: 0;
    height: 0;
    border-color: transparent #d1d1d1 transparent transparent;
    border-style: solid;
    border-width: 9px;
}
.tip.appear-tip { display: block; }

.tip_error_email,
.tip_error_pin,
.tip.error {
    color: #d0021b;
}

.tip_info_email,
.tip.info {
    color: #7ed321;
}
.univers_link {
	color: #a1a1a1;
}
/* Buttons */
.btn {
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
    height: 55px;
    border-radius: 6px;
    background-color: #87888a;
    line-height: 56px;
    text-transform: uppercase;
    color: white;
    font-size: 16px;
    font-family: 'pfdin-medium', Arial, sans-serif;
    cursor: pointer;
    margin-top: 10px;
}
.small-btn {
    width: 90px;
    height: 40px;
    line-height: 40px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    background-color: #87888a;
    color: white;
    font-size: 16px;
    font-family: 'pfdin-medium', Arial, sans-serif;
}

/*  back link */
#back { height: 16px; line-height: 16px; margin-top: -20px; text-align: center; margin-bottom: 20px; }
#back a { display: inline-block; *display: inline; *zoom: 1; color: #87888A; font-size: 14px; text-decoration: none; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; }
#back a span { display: block; float: left; margin-top: -2px; margin-right: 5px; font-size: 20px; }
body.access-tunnel #back a:hover, body.access_rts-tunnel #back a:hover, body.wisniowski-tunnel #back a:hover, body.polargos-tunnel #back a:hover { color: #c1302d; }
body.window-tunnel #back a:hover, body.window_rts-tunnel #back a:hover { color: #cb7830; }
body.terrace-tunnel #back a:hover { color: #77a950; }
body.base-tunnel #back a:hover { color: #fab800; }
body.roma-tunnel #back a:hover { color: #DE790D; }
body.tahoma-tunnel #back a:hover, 
	body.mrstores-tunnel #back a:hover, 
	body.mat-tunnel #back a:hover, 
	body.raildin-tunnel #back a:hover,
    body.tryba-tunnel #back a:hover,
    body.tahoma_bee-tunnel #back a:hover { color: #19879e }
body.thermostat-tunnel #back a:hover { color: #00ffff }

/* Custom radios / checkboxes */
.label_checkbox {
    cursor: pointer;
    font-size: 14px;
    color: #87888a;
}
    .label_checkbox input[type="checkbox"] { display: none; }

.label_radio { cursor: pointer; }
    .label_radio input[type="radio"] { display: none; }

body#tahoma_nq .optin {padding-left:0;border-left:0}
.checkbox_item {display: block; float: left;}
.checkbox_label {display: block; margin-left: 35px; padding-top: 4px;}

/* selectBox */
.selectBox-dropdown {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    outline: none;
    border-radius: 6px;
    background-color: white;
    text-decoration: none !important;
    min-width: 300px;
}
    .selectBox-dropdown .selectBox-label {
        height: 55px;
        line-height: 55px;
        padding: 0 40px 0 20px;
        box-sizing: border-box;
        min-width: 245px;
        display: block;
    }
    .selectBox-dropdown .selectBox-arrow {
        position: absolute;
        width: 55px;
        height: 55px;
        right: 0;
        top: 0;
        background: url("../img/arrow_select.png") center no-repeat transparent;
    }

.selectBox-dropdown-menu {
    position: absolute;
    z-index: 60;
    max-height: 200px;
    margin-top: -6px !important;
    background-color: white;
    border-radius: 0 0 6px 6px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.selectBox-options,
.selectBox-options li,
.selectBox-options li a {
    list-style: none;
    display: block;
    cursor: default;
    padding: 0;
    margin: 0;
}
.selectBox-options li a {
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    line-height: 40px;
    height: 40px;
    display: block;
    padding-left: 20px;
}


.label_radio .fake-radio {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle;
    margin-right: 5px;
}

.label_checkbox .fake-checkbox {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle;
    margin-right: 5px;
}

/* NiceScroll */
#ascrail2000 { width: 1px !important; }
#ascrail2000 .nicescroll-cursors {
    left: 19px !important;
    background: url("../img/scroll@2x.png") no-repeat center -18px;
    background-color: transparent !important;
}

form .line.disabled,
form .submit.disabled { opacity: 0.5; filter:alpha(opacity=50); pointer-events: none; }
form .line input.disabled { pointer-events: none; }
form a.btn.disabled { opacity: 0.5; filter:alpha(opacity=50); pointer-events: none; }
#next_step.disabled { opacity: 0.5; filter: alpha(opacity=50); pointer-events: none; }
form .info {color: #87888a; font-size: 14px; line-height: 17px; margin-bottom: 25px;}
form .info_oem {margin-top: 25px; color: #87888a; margin-bottom: 10px; line-height: 17px;}

/******************************************************************
    5. Pages
******************************************************************/

/* -- 5.1. language-selection.html -- */
body.language-selection {
    background-image: url('../img/bg_somfyconnect.jpg');
    background-repeat: repeat-y;
    background-color: #d79f00;
    background-position: center;
    background-size: cover;
}
    body.language-selection #header {
        text-align: center;
        padding: 115px 0 105px;
    }
        body.language-selection #header h1 {
            font-family: 'pfdin-medium', Arial, sans-serif;
            font-size: 25px;
            font-weight: normal;
            color: white;
            margin-top: 10px;
        }

    body.language-selection .size-container { width: 768px; margin-bottom: 30px;}
    	body.language-selection .tahoma-form #fld_email {
		    margin-top: 3px;
		}
    	body.language-selection .tahoma-form #fld_password {
		    margin-top: 20px;
		}		
        body.language-selection .country-form {
            width: 368px;
            border-right: solid 1px white;
            padding-right: 16px;
        }
        body.language-selection .country-form h2 {
            text-align: center;
            font-weight: normal;
            font-size: 30px;
            color: #485C74;
            margin-bottom: 20px;
        }
        body.language-selection .country-select h3 {
            text-align: center;
            font-weight: normal;
            font-size: 20px;
            color: #485C74;
            margin-bottom: 20px;
            min-height: 80px;
        }
        body.language-selection .tahoma-form h3 a {
		    text-decoration: none;
		    color: #485c74;
		}
        body.language-selection .country-select form {
            width: 300px;
            margin: 0 auto;
        }
            body.language-selection .line label {
                margin-bottom: 7.5px;
                color: #485C74;
                font-size: 16px;
            }
            body.language-selection .submit { margin-top: 20px; }
                body.language-selection .submit .btn {
                    background-color: #485C74;
                    border: 0 none;
                }
    body.language-selection .tahoma-form { width: 368px; }
        body.language-selection .tahoma-form h2 {
            text-align: center;
            font-weight: normal;
            font-size: 30px;
            color: #485C74;
            margin-bottom: 20px;
        }
        body.language-selection .tahoma-form h3 {
            text-align: center;
            font-weight: normal;
            font-size: 20px;
            color: #485C74;
            margin-bottom: 20px;
            min-height: 80px
        }
        body.language-selection .tahoma-form form {
            width: 300px;
            margin: 0 auto;
        }
        body.language-selection .tahoma-form .line input {
            height: 55px;
            line-height: 57px;
            border: 0 none;
            font-size: 15px;
            color: #485C74;
            font-family: 'pfdin-light', Arial, sans-serif;
        }
        body.language-selection .tahoma-form .forgot_password {
            margin-top: 15px;
            text-align: center;
        }
            body.language-selection .tahoma-form .forgot_password a {
                letter-spacing: 1.15px;
                text-decoration: none;
                color: #485c74;
            }
        body.language-selection .tahoma-form .inline-info {
            font-size: 14px;
            color: #485C74;
            letter-spacing: 1px;
            text-align: center;
            display: block;
            margin-top: 20px;
        }


/* -- 5.2. product-selection.html -- */
body.product-selection {
    background-image: url('../img/bg_somfyconnect.jpg');
    background-repeat: repeat-y;
    background-color: #d79f00;
    background-position: center;
    background-size: cover;
}
    body.product-selection #header {
        text-align: center;
        padding: 75px 0 65px;
    }
        body.product-selection #header h1 {
            font-family: 'pfdin-light', Arial, sans-serif;
            font-size: 30px;
            color: white;
            line-height: 35px;
            margin-bottom: 5px;
            font-weight: 400;
        }

    body.product-selection .device-select h2 {
        text-align: center;
        font-weight: normal;
        font-size: 30px;
        color: #485C74;
        margin-bottom: 35px;
    }
        body.product-selection .device-select ul.device-list {
            text-align: center;
            margin-bottom: 80px;
        }
            body.product-selection .device-select li.device {
                background: white;
                box-shadow: -10px 22px 30px 0px rgba(0,0,0,0.10);
                border-radius:6px;
                width:300px;
                vertical-align: top;
                position: relative;
                margin-right: 38px;
                box-sizing: border-box;
                /*padding: 40px 20px 55px;*/
            }
            body.product-selection .device-select .device-list li.device{
            	width:236px;
            	min-height: 320px;
            	margin-bottom: 120px;
            }
                body.product-selection .device-select li.device .device-logo { margin-bottom: 30px; }                
                body.product-selection .device-select li.device img.device-img {
                    max-width: 200px;
                    max-height: 200px;
                    margin-top: 50px;
                }
                body.product-selection .device-select .device-list5 li.device img{
	            	/*max-width: 180px;
                    max-height: 100px;*/
	            } 
	            body.product-selection .device-select li.device#item_thermostat img.device-logo { max-height: 50px}
	            body.product-selection .device-select .device-list5 li.device#item_thermostat img.device-logo { max-height: 45px; margin-bottom:0px;}	            
	            body.product-selection .device-select .device-list5 li.device img.device-img {
                    /*margin-top:20px;*/
                }
                body.product-selection .device-select li.device p.device-content {
                    margin-top: 30px;
                    text-align: left;
                    font-size:14px;
                    color:#485C74;
                    line-height:17px;
                }
                body.product-selection .device-select li.device .device-actions {
                    position: absolute;
                    width: 250px;
                    bottom: -75px;
                }
                body.product-selection .device-select .device-list li.device .device-actions {
                    width: 100%;
                    bottom: -75px;
                }
                    body.product-selection .device-select li.device .device-actions > a {
                        text-align: center;
                        width: 100%;
                        vertical-align: top;
                        font-size:20px;
                        color: white;
                        line-height:25px;
                        text-decoration: none;
                        font-family: 'pfdin-medium', Arial, sans-serif;
                    }
                    body.product-selection .device-select li.device .device-actions > a.device-connexion {
                        margin-right: 20px;
                        width: 115px;
                        color: #12AABB;
                    }
                        body.product-selection .device-select li.device .device-actions img {
                            display: block;
                            margin: 0 auto;
                        }

            body.product-selection .device-select li.device:last-of-type { margin-right: 0; }
            body.product-selection #item_connexoon {cursor:pointer;}
            body.product-selection #item_tahoma {cursor:pointer;}


/* -- 5.3. pin-activation.html -- */
body.pin-activation {
    background-image: url('../img/bg_connexoon1.jpg');
    background-repeat: no-repeat;
    background-color: white;
    background-position: right top;
}
body.pin-activation #notice {
	padding-top: 30px;
}

body.tahoma-tunnel.pin-activation,
	body.mrstores-tunnel.pin-activation,
	body.mat-tunnel.pin-activation,
    body.tryba-tunnel.pin-activation,
    body.tahoma_bee-tunnel.pin-activation {
	background-image: url('../img/bg_tahoma.jpg');
}
body.raildin-tunnel.pin-activation {
	background-image: url('../img/bg_raildin_30.jpg');
}
body.roma-tunnel.pin-activation {
    background: none;
}
body.thermostat-tunnel.pin-activation {
    background-image: url('../img/bg_thermostat.png');
    background-size:cover;
}

	body.pin-activation #main { border-color: #fab800; }
    body.pin-activation #wrap { border-color: #fab800; }
    body.pin-activation #footer { border-color: #fab800; }
    body.pin-activation #header {
        padding: 125px 0;
        text-align: center;
    }
	body.pin-activation.thermostat-tunnel  #header{
		padding: 125px 0 70px 0;
	}
    body.pin-activation #pinForm {
        text-align: center;
    }
        body.pin-activation #pinForm .intro {
            font-size: 30px;
            color:#485C74;
            font-weight: normal;
            margin-bottom: 30px;
            text-align: center;
        }
        body.pin-activation #pinForm input[type="text"] {
            outline: none;
            margin-right: 6px;
            margin-top: 10px;
            border: solid 1px #87888a;
            border-radius: 6px;
            width: 89px;
            height: 57px;
            text-align: center;
            font-size: 22px;
            color: #87888a;
            font-family: 'pfdin-bold', Arial, sans-serif;
        }
        body.pin-activation #pinForm a#btn_check {
            width: 177px;
            height: 57px;
            display: inline-block;
            background-color: #fab800;
            vertical-align: top;
            color: white;
            font-family: 'pfdin-medium', Arial, sans-serif;
            text-decoration: none;
            border-radius: 6px;
            font-size: 16px;
            line-height: 56px;
            text-transform: none;
        }
        body.tahoma-tunnel.pin-activation #pinForm a#btn_check, 
        body.mrstores-tunnel.pin-activation #pinForm a#btn_check,
        body.mat-tunnel.pin-activation #pinForm a#btn_check,
        body.raildin-tunnel.pin-activation #pinForm a#btn_check,
        body.tryba-tunnel.pin-activation #pinForm a#btn_check,
        body.tahoma_bee-tunnel.pin-activation #pinForm a#btn_check
         {
        	background-color: #19879e;
        }
        body.roma-tunnel.pin-activation #pinForm a#btn_check {
        	background-color: #DE790D;
        }
        body.thermostat-tunnel.pin-activation #pinForm a#btn_check {
        	background-color: #439B9B;
        }
        body.pin-activation #pinForm .line {
            position: relative;
            width: 475px;
            margin: 0 auto;
        }
            body.pin-activation #pinForm .line .tip {
                top: 0;
                right: -250px;
            }
body.pin-activation .pin-helper {
        width: 770px;
        margin-top: 150px;
    }
body.thermostat-tunnel.pin-activation .pin-helper {
        width: 770px;
        margin-top: 75px;
    }
        body.pin-activation .description_content {
            width: 235px;
            font-family: 'pfdin-light', Arial, sans-serif;
            font-size:15px;
            color:#485C74;
            line-height:18px;
            margin-top: 30px;
        }
            body.pin-activation .description_content h2 {
                font-size: 20px;
                line-height: 25px;
                font-family: 'pfdin-medium', Arial, sans-serif;
                font-weight: normal;
                margin-bottom: 15px;
            }
body.tahoma-tunnel.pin-activation .description_content,
body.tahoma_bee-tunnel.pin-activation .description_content {
		width: 400px;
		margin: 0 auto;
		background-color: white;
	    padding: 20px;
	    border-radius: 6px;
	}  
	body.tahoma-tunnel.pin-activation .pin-helper,
	body.tahoma_bee-tunnel.pin-activation .pin-helper  {
		margin-top: 50px;
	}  
	body.tahoma-tunnel.pin-activation .description_detail,
    body.tahoma_bee-tunnel.pin-activation .description_detail  {
		margin-bottom: 15px;
		text-align: left;
	}  
	
body.raildin-tunnel.pin-activation .pin-helper {
	background-image: url(/tahomaPlugin/img/pin_v5.png);
    background-color: white;
    background-size: 270px;
    background-repeat: no-repeat;
    background-position: bottom 22px right 40px;
    border-radius: 6px;
    width: 400px;
    padding-left: 40px;
    margin-top: 50px;
    min-height: 300px;
}
	body.raildin-tunnel.pin-activation .description_content h2 {
		color: #19879e;
	}

/* -- 5.4. connexoon-selection.html -- */
body.connexoon-selection {
    background-image: url('../img/bg_connexoon1.jpg');
    background-repeat: no-repeat;
    background-color: white;
    background-position: right top;
}
    body.connexoon-selection #main { border-color: #fab800; }
    body.connexoon-selection #wrap { border-color: #fab800; }
    body.connexoon-selection #footer { border-color: #fab800; }
        body.connexoon-selection #header {
            padding: 125px 0 100px;
            text-align: center;
        }

    body.connexoon-selection #content {
        text-align: center;
        margin-bottom: 80px;
    }
        body.connexoon-selection #content h2 {
            text-align: center;
            font-weight: normal;
            font-size: 35px;
            color: #485C74;
            line-height: 45px;
        }
        body.connexoon-selection #content h3 {
            margin-bottom: 35px;
            font-size: 20px;
            font-weight: normal;
            color: #485C74;
        }
        body.connexoon-selection #content .box {
            text-align: center;
            width: 300px;
            background-color: white;
            border-radius: 6px;
            box-shadow: -10px 22px 30px 0px rgba(0,0,0,0.10);
            position: relative;
            box-sizing: border-box;
            padding: 0 20px 40px;
            margin-right: 40px;
            vertical-align: top;
        }
        body.connexoon-selection #content .box.univers-disabled {
    		opacity: 0.4;
    		filter: alpha(opacity=40);
        }
            body.connexoon-selection #content .box .type-header {
                position: relative;
                left: -21px;
                border-radius: 6px 6px 0 0;
            }
            body.connexoon-selection #content .box .type-logo {
                position: relative;
                top: -35px;
            }
            body.connexoon-selection #content .box .box-title {
                font-size: 16px;
                line-height: 20px;
                font-family: 'pfdin-medium', Arial, sans-serif;
                font-weight: normal;
                margin-bottom: 10px;
                text-align: left;
            }
                body.connexoon-selection #content .box .box-title.window-title,
                body.connexoon-selection #content .box .box-title.window_rts-title { color: #cb7830; }
                body.connexoon-selection #content .box .box-title.access-title,
                body.connexoon-selection #content .box .box-title.access_rts-title,
                body.connexoon-selection #content .box .box-title.wisniowski-title,
                body.connexoon-selection #content .box .box-title.polargos-title { color: #c1302d; }
                body.connexoon-selection #content .box .box-title.terrace-title { color: #77a950; }
                body.connexoon-selection #content .box .box-title.roma-title { color: #DE790D; }
                body.connexoon-selection #content .box .box-title.tahoma-title,
                body.connexoon-selection #content .box .box-title.mrstores-title,
                body.connexoon-selection #content .box .box-title.mat-title,
                body.connexoon-selection #content .box .box-title.raildin-title,
                body.connexoon-selection #content .box .box-title.tryba-title,
                body.connexoon-selection #content .box .box-title.tahoma_bee-title { color: #19879e; }
            body.connexoon-selection #content .box .box-desc {
                text-align: left;
                line-height: 20px;
                color: #485C74;
                font-size: 16px;
            }
                body.connexoon-selection #content .box .box-desc ul {
                    list-style-type: disc;
                    padding-left: 16px;
                }
            body.connexoon-selection #content .box .select-box-link {
                display: block;
                position: absolute;
                left: 50%;
                margin-left: -25px;
                bottom: -25px;
            }
        body.connexoon-selection #content .box:last-of-type { margin-right: 0; }


/* -- 5.5. somfy-connexion.html -- */
body.login-form {
    background-image: url('../img/bg_somfyconnect.jpg');
    background-repeat: repeat-y;
    background-color: #d79f00;
    background-position: center;
    background-size: cover;
}
    body.login-form #header {
        text-align: center;
        padding: 75px 0 125px;
    }
    body.login-form #header p {
        font-family: 'pfdin-light', Arial, sans-serif;
        font-size: 30px;
        color: white;
        line-height: 35px;
        margin-bottom: 5px;
        font-weight: 400;
    }

    body.login-form .size-container {
        width: 300px;
        text-align: center;
    }

        body.login-form #content h1 {
            font-size: 35px;
            color: #485c74;
            font-weight: normal;
        }
        body.login-form #content p {
            font-size: 20px;
            margin: 5px 0 20px;
            color: #485c74;
        }

        body.login-form #content input[type='text'],
        body.login-form #content input[type='password'] {
            height: 55px;
            line-height: 55px;
            color: #485c74;
            border-color: white;
        }

        body.login-form #content input[type='text']::-webkit-input-placeholder { color: #485c74; }
        body.login-form #content input[type='text']:-moz-placeholder { color: #485c74; }
        body.login-form #content input[type='text']::-moz-placeholder {  color: #485c74; }
        body.login-form #content input[type='text']:-ms-input-placeholder { color: #485c74; }

        body.login-form #content input[type='password']::-webkit-input-placeholder { color: #485c74; }
        body.login-form #content input[type='password']:-moz-placeholder { color: #485c74; }
        body.login-form #content input[type='password']::-moz-placeholder {  color: #485c74; }
        body.login-form #content input[type='password']:-ms-input-placeholder { color: #485c74; }

        body.login-form .submit { margin: 0; }
        body.login-form .btn {
            outline: none;
            border: 0 none;
            text-transform: none;
            font-size: 20px;
            background-color: #485c74;
            cursor: pointer;
        }

        body.login-form .forgot_password { margin-top: 15px; }
            body.login-form .forgot_password a {
                letter-spacing: 1.15px;
                text-decoration: none;
                color: #485c74;
            }

/* -- 6. forgotten-password.tpl -- */
body.password-form {
    background-image: url('../img/bg_somfyconnect.jpg');
    background-repeat: repeat-y;
    background-color: #d79f00;
    background-position: center;
    background-size: cover;
}
    body.password-form #header {
        text-align: center;
        padding: 75px 0 125px;
    }
    body.password-form #header p {
        font-family: 'pfdin-light', Arial, sans-serif;
        font-size: 30px;
        color: white;
        line-height: 35px;
        margin-bottom: 5px;
        font-weight: 400;
    }

    body.password-form .size-container { text-align: center; }

        body.password-form #content p {
        	font-family: 'pfdin-light', Arial, sans-serif;
        }
        
        body.password-form #content h1 {
        	font-family: 'pfdin-light', Arial, sans-serif;
            font-size: 28px;
            color: #485c74;
            font-weight: normal;
        }

        body.password-form #content ul {
            width: 260px;
            margin: 30px auto;
            list-style-type: decimal;
            text-align: left;
        }
            body.password-form #content ul li {
                color: #485c74;
                margin-bottom: 15px;
            }

        body.password-form #content form {
            width: 300px;
            margin: 0 auto;
        }
        body.password-form #content p {
            font-size: 20px;
            margin: 5px 0 20px;
            color: #485c74;
        }

        body.password-form #content input {
            height: 55px;
            line-height: 55px;
            color: #485c74;
            border-color: white;
            font-family: 'pfdin-light', Arial, sans-serif;
            font-size: 16px;            
        }
        body.password-form #content .submit { margin-top: 10px; }
        body.password-form #content .btn {
            outline: none;
            border: 0 none;
            text-transform: uppercase;
            font-size: 20px;
            background-color: #485c74;
            cursor: pointer;
        }

/******************************************************************
    6. Tunnel / Activation process    
******************************************************************/

	/*=== TUNNEL TAHOMA ====*/
	/*
	#tunnel_content { float: right; width: 800px; }
	#tunnel form h2 { font-size: 24px; margin-bottom: 30px; text-align: left; }
	#tunnel form h2 span { display: block; float: left; margin: -5px 10px 0 0; }
	
	#tunnel .hidden { display:none; }
	#tunnel form .summary { display: inline-block; *display: inline; *zoom: 1; font-family: 'Fago'; background: #78cadb; color: #fff; font-size: 20px; padding: 28px 28px 0 28px; border-radius: 3px; margin-bottom: 40px; }
	#tunnel form .summary .summary_info { float: left; width: 414px; text-align: left; margin-bottom: 20px; }
	#tunnel form .summary .summary_info .name { display: block; }
	#tunnel form .summary .summary_info .value { color: #19879e; }
	
	#tunnel form .documents { font-family: 'Fago'; font-size: 14px; text-align: left; background: #168096; border: 1px solid #0c7287; padding: 28px; border-radius: 3px; -moz-box-shadow: inset 0 0 1px #77c9db; -webkit-box-shadow: inset 0 0 1px #77c9db; box-shadow: inset 0 0 1px #77c9db; margin-bottom: 30px; }
	#tunnel form .documents .doc { margin-bottom: 12px; font-size: 14px; }
	#tunnel form .documents .doc label { float: left; margin-bottom: 0; width: auto; font-size: 14px; }
	#tunnel form .documents .doc label .check { .margin-bottom: -6px; }
	#tunnel form .documents .doc label span { text-decoration: underline; }
	#tunnel form .documents .doc a { margin-left: 5px; height: 30px; line-height: 30px; font-weight: bold; text-decoration: underline; color: #fff; width:360px; vertical-align: top;}
	#tunnel form .documents .all { color: #fff; display: block; margin-top: 25px; margin-bottom: 2px; }
	#tunnel form .documents .doc label span.requiredMark { text-decoration: none; font-size:1.8em; }
	*/
	#tunnel form .line input.with_icons { padding-left: 55px; }
	
	#tunnel form .line input[type=text].with_icons,
	#tunnel form .line input[type=email].with_icons { background: url(../img/fields.png) no-repeat left 0 #fff; }
	#tunnel form .line.confirm input[type=text].with_icons { background-position: left -45px; }
	#tunnel form .line.valid input[type=text].with_icons { background-position: left -90px; }
	#tunnel form .line.confirm.valid input[type=text].with_icons { background-position: left -135px; }
	#tunnel form .line.invalid input[type=text].with_icons,
	#tunnel form .line.invalid input[type=email].with_icons { background-position: left -180px; }
	#tunnel form .line.confirm.invalid input[type=text].with_icons { background-position: left -225px; }
	
	#tunnel form .line input[type=password].with_icons { background: url(../img/fields.png) no-repeat left -270px #fff; }
	#tunnel form .line.confirm input[type=password].with_icons { background-position: left -315px; }
	#tunnel form .line.valid input[type=password].with_icons { background-position: left -360px; }
	#tunnel form .line.confirm.valid input[type=password].with_icons { background-position: left -405px; }
	#tunnel form .line.invalid input[type=password].with_icons { background-position: left -450px; }
	#tunnel form .line.confirm.invalid input[type=password].with_icons { background-position: left -495px; }
	
	#tunnel form .line.valid .check { display: block; position: absolute; top: 10px; right: -40px; }
	#tunnel form .line.address.valid .check { top: 45px; }
	/*=== TUNNEL TAHOMA ====*/

body.connexoon-tunnel { background-color: white; }
    body.connexoon-tunnel .tunnel-heading {
        height: 128px;
        background-color: white;
        background-size: cover;
        background-position: center;
        margin-bottom: 115px;
    }
        body.connexoon-tunnel .tunnel-heading .heading-logo {
            position: absolute;
            left: 210px;
            top: 75px;
        }
    body.connexoon-tunnel .size-container { width: 800px; }
        body.connexoon-tunnel #tunnel_content {
            width: 600px;
            position: relative;
        }
            body.connexoon-tunnel p.tight-text { width: 300px; }

    /* Steps generic style */
    #steps {
        width: 115px;
        position: relative;
    }
        #steps .line {
            width: 2px;
            background-color: #dbdbdc;
            position: absolute;
            right: 13px;
            height: 100%;
            z-index: 20;
        }
        #steps ul { list-style-type: none; }

        #steps .step {
            position: relative;
            z-index: 30;
            margin-bottom: 70px;
        }
        #steps .step:last-of-type { margin-bottom: 0; }
            #steps .step .name {
                width: 70px;
                font-size: 12px;
                display: inline-block;
                *display: inline;
                *zoom: 1;
                margin-right: 15px;
                vertical-align: middle;
                text-align: right;
                line-height: 14px;
                font-family: 'pfdin-medium', Arial, sans-serif;                
                color: #87888a;
            }
            #steps .step .step-state {
                display: inline-block;
                *display: inline;
                *zoom: 1;
                vertical-align: middle;
                border: solid 10px white;
                border-left: 0 none;
                border-right: 0 none;
            }
            #steps .step.current .name,
            #steps .step.done .name { color: #87888a; }

    /* Form step generic style */
    #tunnelForm .tunnel-step {
        padding-left: 70px;
        position: relative;
        margin-bottom: 75px;
    }
        #tunnelForm .tunnel-step .step-icon {
            position: absolute;
            top: 4px;
            left: 22px;
        }
        #tunnelForm .tunnel-step h2 {
            font-size: 30px;
            line-height: 35px;
            color: #87888a;
            font-family: 'pfdin-light', Arial, sans-serif;
            font-weight: normal;
        }
        #tunnelForm .tunnel-step h3 {
            color: #87888a;
            font-size: 14px;
            line-height: 17px;
            margin-bottom: 25px;
        }
        #tunnelForm .tunnel-step p {
            color: #87888a;
            font-size: 16px;
            line-height: 20px;
            margin-bottom: 25px;
        }

    .line {
        position: relative;
        margin-bottom: 15px;
        padding-top: 10px;
        width: 300px;
    }
        .line label {
            display: block;
            font-size: 14px;
            font-family: 'pfdin-medium', Arial, sans-serif;
            color: #87888a;
            margin-bottom: 5px;
        }
        .line .label_radio {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            vertical-align: middle;
            margin-right: 30px;
        }
        .line input[type='text'],
        .line input[type='email'],
        .line input[type='password'] {
            outline: none;
            box-sizing: border-box;
            height: 40px;
            line-height: 40px;
            font-family: 'pfdin-bold', Arial, sans-serif;
            width: 100%;
            padding: 0 15px;
            border-radius: 6px;
            border: solid 1px #d1d1d1;
            color: #87888a;
        }
        .line input.smaller { width: 200px; }
        .line.smaller-line { margin-top: 10px; }
        .line input#fld_sms_alert_other {padding-left:40px;}
    .icon-line {
        border: solid 1px #d1d1d1;
        border-radius: 6px;
        margin-bottom: 10px;
    }
        .icon-line .field-icon {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            vertical-align: middle;
            margin: 0 15px;
        }
        .icon-line input[type='text'],
        .icon-line input[type='password'] {
            outline: none;
            border: 0 none;
            vertical-align: middle;
            width: 230px;
            box-sizing: border-box;
            height: 40px;
            line-height: 40px;
            font-family: 'pfdin-bold', Arial, sans-serif;
            padding: 0;
        }
    .icon-line.invalid input { color: #d0021b; }
    .icon-line.success input { color: #7ed321; }

    .line .tip {
        top: -1px;
        right: -260px;
    }
    .line .tip:before { top: 12px; }
    .line .tip:after { top: 13px; }

    .submit {
        width: 300px;
        margin-top: 30px;
    }

    .doc .info-p { margin: 10px 0 20px; }
    .doc .optin a {
        color: #87888a;
        display: inline-block;
        /*width: 240px;*/
        vertical-align: middle;
    }
    .doc .optin .requiredMark { display: none; }

    /* Summary generic style */
    body.connexoon-tunnel #tunnel_step_summary .summary {
        width: 300px;
        margin: 30px 0;
    }
        body.connexoon-tunnel #tunnel_step_summary .summary span {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            vertical-align: middle;
            color: #87888a;
            font-family: 'pfdin-medium', Arial, sans-serif;
            font-size: 14px;
            line-height: 27px;
        }
        body.connexoon-tunnel #tunnel_step_summary .summary span.name { width: 110px }

    /* Order confirmation summary */
    body.connexoon-summary #header { margin-bottom: 150px; }
    body.connexoon-summary #content {
        position: relative;
        width: 600px;
    }
        body.connexoon-summary .heading-logo {
            left: 50% !important;
            margin-left: -107px;
        }
        body.connexoon-summary .product-img {
            margin: 0 auto 25px;
            display: block;            
        }
        body.connexoon-summary h1 {
            text-align: center;
            font-size:30px;
            color:#87888A;
            line-height:35px;
            font-weight: normal;
            margin-bottom: 20px;
        }
        /* copy of previous */
		body.connexoon-summary #end .end_top {
		    text-align: center;
		    font-size: 30px;
		    color: #87888A;
		    line-height: 35px;
		    font-weight: normal;
		    margin-bottom: 20px;
		}        
        body.connexoon-summary p {
            margin-bottom: 20px;
            line-height: 20px;
            color: #87888a;
        }
        /* copy of previous */
        body.connexoon-summary #end .end_message p {
            margin-bottom: 20px;
            line-height: 17px;
            color: #87888a;  
            font-family: "pfdin-light",Arial,sans-serif;      
        }
        body.connexoon-summary #end .end_message {
         	margin-bottom: 50px;
        }
        body.connexoon-summary p.summary-info {
            font-family: 'pfdin-medium', Arial, sans-serif;
            font-size: 16px;
            line-height: 20px;
        }
        /* copy of previous */
        body.connexoon-summary #end .end_message .message_top {
            font-family: 'pfdin-medium', Arial, sans-serif;
            font-size: 16px;
            line-height: 20px;
            margin-bottom: 20px;
        }
        body.connexoon-summary #end .end_message .tahoma-img {
        	display:none;
        }
		body.access-tunnel #end .end_message .message_top,
		body.access_rts-tunnel #end .end_message .message_top,
		body.wisniowski-tunnel #end .end_message .message_top,
		body.polargos-tunnel #end .end_message .message_top {
		    color: #c1302d;
		}
		body.window-tunnel #end .end_message .message_top,
		body.window_rts-tunnel #end .end_message .message_top {
		    color: #cb7830;
		}
		body.terrace-tunnel #end .end_message .message_top {
		    color: #77a950;
		}  
		body.access-tunnel #end .end_message .message_top,
		body.access_rts-tunnel #end .end_message .message_top,
		body.wisniowski-tunnel #end .end_message .message_top,
		body.polargos-tunnel #end .end_message .message_top {
		    color: #DE790D;
		}		
		body.tahoma-tunnel #end .end_message .message_top,
		body.mrstores-tunnel #end .end_message .message_top,
		body.mat-tunnel #end .end_message .message_top,
		body.raildin-tunnel #end .end_message .message_top,
        body.tryba-tunnel #end .end_message .message_top,
        body.tahoma_bee-tunnel #end .end_message .message_top
		{
		    color: #19879e;
		}       
        body.connexoon-summary .btn {
            width: 300px;
            margin: 0 auto;
        }

/* -- 6.1. window-tunnel.html // window-summary.html -- */
body.window-tunnel #main, body.window_rts-tunnel #main { border-color: #cb7830; }
body.window-tunnel #wrap, body.window_rts-tunnel #wrap { border-color: #cb7830; }
body.window-tunnel #footer, body.window_rts-tunnel #footer { border-color: #cb7830; }
    body.window-tunnel .window-heading, 
    body.window_rts-tunnel .window_rts-heading { background-image: url("../img/bg_window.jpg"); }

	/* .s-step_todo */
    body.window-tunnel #steps .step-state, 
    	body.window_rts-tunnel #steps .step-state { 
		width: 25px; height: 25px;	background-position: -286px -395px;
    }    
	/* .s-step_window */
    body.window-tunnel #steps .step.current .step-state, 
    	body.window_rts-tunnel #steps .step.current .step-state { 
    	width: 25px; height: 25px; background-position: -310px -365px; 
    }
	/* .s-step_done */
    body.window-tunnel #steps .step.previous .step-state,
    	body.window_rts-tunnel #steps .step.previous .step-state { 
		width: 25px; height: 25px;	background-position: -286px -455px;
    }    
    /* .s-window_login */
    body.window-tunnel #tunnelForm .tunnel-step .sprite-icon_account,
    	body.window_rts-tunnel #tunnelForm .tunnel-step .sprite-icon_account {
    	width: 26px; height: 26px; background-position: -279px -221px;
    }
    /* .s-window_info */
    body.window-tunnel #tunnelForm .tunnel-step .sprite-icon_about, 
    	body.window_rts-tunnel #tunnelForm .tunnel-step .sprite-icon_about {
    	width: 26px; height: 26px; background-position: -279px -252px;
    }
    /* .s-window_recap */
    body.window-tunnel #tunnelForm .tunnel-step .sprite-icon_summary, 
    	body.window_rts-tunnel #tunnelForm .tunnel-step .sprite-icon_summary {
		width: 26px; height: 26px; background-position: -279px -190px;
    }
    body.window-tunnel .btn, 
    	body.window_rts-tunnel .btn { background-color: #cb7830; } 	
    body.window-tunnel .summary-info, 
    	body.window_rts-tunnel .summary-info { color: #cb7830; }

/* -- 6.2. terrace-tunnel.html // terrace-summary.html -- */
body.terrace-tunnel #main { border-color: #77a950; }
body.terrace-tunnel #wrap { border-color: #77a950; }
body.terrace-tunnel #footer { border-color: #77a950; }
    body.terrace-tunnel .terrace-heading { background-image: url("../img/bg_terrace.jpg"); }
	
    /* .s-step_todo */
    body.terrace-tunnel #steps .step-state { 
		width: 25px; height: 25px; background-position: -286px -395px; 
    }
    /* .s-step_terrace */
    body.terrace-tunnel #steps .step.current .step-state { 
		width: 25px; height: 25px; background-position: -286px -425px; 
    }
	/* .s-step_done */
    body.terrace-tunnel #steps .step.previous .step-state { 
		width: 25px; height: 25px; background-position: -286px -455px; 
    }
    /* .s-terrace_login */
    body.terrace-tunnel #tunnelForm .tunnel-step .sprite-icon_account {
    	width: 26px; height: 26px; background-position: -279px -314px;
    } 
    /* .s-terrace_info */
    body.terrace-tunnel #tunnelForm .tunnel-step .sprite-icon_about {
    	width: 26px; height: 26px; background-position: -279px -345px;
    }
    /* .s-terrace_recap */
    body.terrace-tunnel #tunnelForm .tunnel-step .sprite-icon_summary {
		width: 26px; height: 26px; background-position: -279px -283px;
    }       

    body.terrace-tunnel .btn { background-color: #77a950; }
    body.terrace-tunnel .summary-info { color: #77a950; }

/* -- 6.3. access-tunnel.html for ACCESS, ACCESS_RTS & WISNIOWSKI & POLARGOS// access-summary.html -- */
body.access-tunnel #main, 
body.access_rts-tunnel #main, 
body.wisniowski-tunnel #main,
body.polargos-tunnel #main { border-color: #c1302d; }
body.access-tunnel #wrap, 
body.access_rts-tunnel #wrap, 
body.wisniowski-tunnel #wrap,
body.polargos-tunnel #wrap { border-color: #c1302d; }
body.access-tunnel #footer, 
body.access_rts-tunnel #footer,  
body.wisniowski-tunnel #footer,
body.polargos-tunnel #footer { border-color: #c1302d; }
    
body.access-tunnel .access-heading, 
body.access_rts-tunnel .access_rts-heading,
body.wisniowski-tunnel .wisniowski-heading,
body.polargos-tunnel .polargos-heading { background-image: url("../img/bg_access.jpg"); }

/* .s-step_todo */
body.access-tunnel #steps .step-state, 
body.access_rts-tunnel #steps .step-state,
body.wisniowski-tunnel #steps .step-state,
body.polargos-tunnel #steps .step-state { 
	width: 25px; height: 25px; background-position: -286px -395px;
}
/* .s-step_access */
body.access-tunnel #steps .step.current .step-state, 
body.access_rts-tunnel #steps .step.current .step-state,
body.wisniowski-tunnel #steps .step.current .step-state,
body.polargos-tunnel #steps .step.current .step-state { 
	width: 25px; height: 25px; background-position: -279px -160px;		
}
/* .s-step_done */
body.access-tunnel #steps .step.previous .step-state, 
body.access_rts-tunnel #steps .step.previous .step-state,
body.wisniowski-tunnel #steps .step.previous .step-state,
body.polargos-tunnel #steps .step.previous .step-state { 
	width: 25px; height: 25px; background-position: -286px -455px;
}
/* .s-access_login */
body.access-tunnel #tunnelForm .tunnel-step .sprite-icon_account, 
body.access_rts-tunnel #tunnelForm .tunnel-step .sprite-icon_account,
body.wisniowski-tunnel #tunnelForm .tunnel-step .sprite-icon_account,
body.polargos-tunnel #tunnelForm .tunnel-step .sprite-icon_account {
	width: 26px; height: 26px; background-position: -224px -389px;    	
}	
/* .s-access_info */
body.access-tunnel #tunnelForm .tunnel-step .sprite-icon_about, 
body.access_rts-tunnel #tunnelForm .tunnel-step .sprite-icon_about ,
body.wisniowski-tunnel #tunnelForm .tunnel-step .sprite-icon_about,
body.polargos-tunnel #tunnelForm .tunnel-step .sprite-icon_about {
	width: 26px; height: 26px; background-position: -224px -358px;
}
/* .s-access_recap */
body.access-tunnel #tunnelForm .tunnel-step .sprite-icon_summary, 
body.access_rts-tunnel #tunnelForm .tunnel-step .sprite-icon_summary,
body.wisniowski-tunnel #tunnelForm .tunnel-step .sprite-icon_summary,
body.polargos-tunnel #tunnelForm .tunnel-step .sprite-icon_summary {
	width: 26px; height: 26px; background-position: -224px -420px;
}

body.access-tunnel .btn, 
body.access_rts-tunnel .btn ,
body.wisniowski-tunnel .btn,
body.polargos-tunnel .btn { background-color: #c1302d; }
body.access-tunnel .summary-info, 
body.access_rts-tunnel .summary-info,
body.wisniowski-tunnel .summary-info,
body.polargos-tunnel .summary-info { color: #c1302d; }
    
/* -- 6.4. roma-tunnel.html // roma-summary.html -- */
body.roma-tunnel #main { border-color: #DE790D; }
body.roma-tunnel #wrap { border-color: #DE790D; }
body.roma-tunnel #footer { border-color: #DE790D; }
    body.roma-tunnel .roma-heading { background-image: url("../img/bg_roma.jpg"); }

	/* .s-step_todo */
    body.roma-tunnel #steps .step-state { 
		width: 25px; height: 25px; background-position: -286px -395px;
	}
	/* .s-step_roma */
    body.roma-tunnel #steps .step.current .step-state { 
		width: 25px; height: 25px; background-position: -286px -484px;		
	}
	/* .s-step_done */
    body.roma-tunnel #steps .step.previous .step-state { 
		width: 25px; height: 25px; background-position: -286px -455px;
	}
    /* .s-roma_login */
    body.roma-tunnel #tunnelForm .tunnel-step .sprite-icon_account {
		width: 26px; height: 26px; background-position: -224px -556px;   	
    }	
    /* .s-roma_info */
    body.roma-tunnel #tunnelForm .tunnel-step .sprite-icon_about {
    	width: 26px; height: 26px; background-position: -224px -525px;
    }
    /* .s-roma_recap */
    body.roma-tunnel #tunnelForm .tunnel-step .sprite-icon_summary {
		width: 26px; height: 26px; background-position: -224px -587px;
    }

    body.roma-tunnel .btn { background-color: #DE790D; }
    body.roma-tunnel .summary-info { color: #DE790D; }    

/* -- 6.4. thermostat-tunnel.html -- */
body.thermostat-tunnel #main { border-color: #439B9B; }
body.thermostat-tunnel #wrap { border-color: #439B9B; }
body.thermostat-tunnel #footer { border-color: #439B9B; }
    body.thermostat-tunnel .thermostat-heading { background-image: url("../img/bg_thermostat2.png"); }
	body.thermostat-tunnel .tunnel-heading .heading-logo{
		top: 39px;
		left: 240px;
	}
	/* .s-step_todo */
    body.thermostat-tunnel #steps .step-state { 
		width: 25px; height: 25px; background-position: -286px -395px;
	}
	/* .s-step_roma */
    body.thermostat-tunnel #steps .step.current .step-state { 
		width: 25px; height: 25px; background-position: -286px -514px;		
	}
	/* .s-step_done */
    body.thermostat-tunnel #steps .step.previous .step-state { 
		width: 25px; height: 25px; background-position: -286px -455px;
	}
    /* .s-roma_login */
    body.thermostat-tunnel #tunnelForm .tunnel-step .sprite-icon_account {
		width: 26px; height: 26px; background-position: -256px -556px;   	
    }	
    /* .s-roma_info */
    body.thermostat-tunnel #tunnelForm .tunnel-step .sprite-icon_about {
    	width: 26px; height: 26px; background-position: -256px -525px;
    }
    /* .s-roma_recap */
    body.thermostat-tunnel #tunnelForm .tunnel-step .sprite-icon_summary {
		width: 26px; height: 26px; background-position: -256px -587px;
    }

    body.thermostat-tunnel .btn { background-color: #439B9B; }
    body.thermostat-tunnel .summary-info { color: #439B9B; }    

/* -- 6.4. connexoon-tunnel.html // connexoon-summary.html -- */
body.base-tunnel #main { border-color: #fab800; }
body.base-tunnel #wrap { border-color: #fab800; }
body.base-tunnel #footer { border-color: #fab800; }
    body.base-tunnel .base-heading { background: white; }

	/* .s-step_todo */
    body.base-tunnel #steps .step-state { 
		width: 25px; height: 25px;	background-position: -286px -395px;	
	}
	/* .s-step_base */
    body.base-tunnel #steps .step.current .step-state { 
		width: 25px; height: 25px;	background-position: -309px -160px;	
	}
	/* .s-step_done */
    body.base-tunnel #steps .step.previous .step-state { 
		width: 25px; height: 25px;	background-position: -286px -455px;	
	}
    /* .s-connexoon_login */
    body.base-tunnel #tunnelForm .tunnel-step .sprite-icon_account {
    	width: 26px; height: 26px; background-position: -255px -407px;
    }	
    /* .s-connexoon_info */
    body.base-tunnel #tunnelForm .tunnel-step .sprite-icon_about {
    	width: 26px; height: 26px; background-position: -255px -438px;
    }
    /* .s-connexoon_recap */
    body.base-tunnel #tunnelForm .tunnel-step .sprite-icon_summary {
		width: 26px; height: 26px; background-position: -255px -376px;
    }

    body.base-tunnel .btn { background-color: #fab800; }
    body.base-tunnel .summary-info { color: #fab800; }

/* -- 6.5. tahoma-tunnel.html // tahoma-summary.html -- */
body.tahoma-tunnel #main,
body.mrstores-tunnel #main,
body.mat-tunnel #main,
body.raildin-tunnel #main,
body.tryba-tunnel #main, 
body.tahoma_bee-tunnel #main,
body.beecon-tunnel #main { border-color: #19879e; }

body.tahoma-tunnel #wrap,
body.mrstores-tunnel #wrap,
body.mat-tunnel #wrap,
body.raildin-tunnel #wrap,
body.tryba-tunnel #wrap,
body.tahoma_bee-tunnel #wrap { border-color: #19879e; }

body.tahoma-tunnel #footer,
body.mrstores-tunnel #footer,
body.mat-tunnel #footer,
body.raildin-tunnel #footer,
body.tryba-tunnel #footer, 
body.tahoma_bee-tunnel #footer { border-color: #19879e; }

    body.tahoma-tunnel .tahoma-heading,
    body.mrstores-tunnel .mrstores-heading,
    body.mat-tunnel .mat-heading,
    body.tryba-tunnel .tryba-heading,
    body.tahoma_bee-tunnel .tahoma_bee-heading { background-image: url("../img/bg_tahoma.jpg"); }


	body.raildin-tunnel .raildin-heading { 
		background-image: url("../img/bg_raildin_30.jpg");
    	background-position: top 770px right 0px; 
    }
	
	/* .s-step_todo */
    body.tahoma-tunnel #steps .step-state,
    body.mrstores-tunnel #steps .step-state,
    body.mat-tunnel #steps .step-state,
    body.raildin-tunnel #steps .step-state,
    body.tryba-tunnel #steps .step-state,
    body.tahoma_bee-tunnel #steps .step-state
    { 
		width: 25px; height: 25px; background-position: -286px -395px;
	}
	/* .s-step_tahoma */
    body.tahoma-tunnel #steps .step.current .step-state, 
    body.mrstores-tunnel #steps .step.current .step-state,
    body.mat-tunnel #steps .step.current .step-state,
    body.raildin-tunnel #steps .step.current .step-state,
    body.tryba-tunnel #steps .step.current .step-state,
    body.tahoma_bee-tunnel #steps .step.current .step-state
    { 
		width: 25px; height: 25px; background-position: -314px -395px;		
	}
	/* .s-step_done */
    body.tahoma-tunnel #steps .step.previous .step-state,
    body.mrstores-tunnel #steps .step.previous .step-state,
    body.mat-tunnel #steps .step.previous .step-state,
    body.raildin-tunnel #steps .step.previous .step-state,
    body.tryba-tunnel #steps .step.previous .step-state,
    body.tahoma_bee-tunnel #steps .step.previous .step-state  
    { 
		width: 25px; height: 25px; background-position: -286px -455px;
	}
    /* .s-tahoma_login */
    body.tahoma-tunnel #tunnelForm .tunnel-step .sprite-icon_account,
    body.mrstores-tunnel #tunnelForm .tunnel-step .sprite-icon_account,
    body.mat-tunnel #tunnelForm .tunnel-step .sprite-icon_account,
    body.raildin-tunnel #tunnelForm .tunnel-step .sprite-icon_account,
    body.tryba-tunnel #tunnelForm .tunnel-step .sprite-icon_account,
    body.tahoma_bee-tunnel #tunnelForm .tunnel-step .sprite-icon_account    
     {
		width: 26px; height: 26px; background-position: -343px -395px;    	
    }	
    /* .s-tahoma_info */
    body.tahoma-tunnel #tunnelForm .tunnel-step .sprite-icon_about,
    body.mrstores-tunnel #tunnelForm .tunnel-step .sprite-icon_about,
    body.mat-tunnel #tunnelForm .tunnel-step .sprite-icon_about,
    body.raildin-tunnel #tunnelForm .tunnel-step .sprite-icon_about,
    body.tryba-tunnel #tunnelForm .tunnel-step .sprite-icon_about,
    body.tahoma_bee-tunnel #tunnelForm .tunnel-step .sprite-icon_about     
    {
    	width: 26px; height: 26px; background-position: -343px -364px;
    }
    /* .s-tahoma_recap */
    body.tahoma-tunnel #tunnelForm .tunnel-step .sprite-icon_summary,
    body.mrstores-tunnel #tunnelForm .tunnel-step .sprite-icon_summary,
    body.mat-tunnel #tunnelForm .tunnel-step .sprite-icon_summary,
    body.raildin-tunnel #tunnelForm .tunnel-step .sprite-icon_summary,
    body.tryba-tunnel #tunnelForm .tunnel-step .sprite-icon_summary    
    {
		width: 26px; height: 26px; background-position: -343px -426px;
    }

    body.tahoma-tunnel .btn,  
    	body.mrstores-tunnel .btn, 
    	body.mat-tunnel .btn, 
    	body.raildin-tunnel .btn,
        body.tryba-tunnel .btn,
        body.tahoma_bee-tunnel .btn { background-color: #19879e; }
    body.tahoma-tunnel .summary-info, 
    	body.mrstores-tunnel .summary-info, 
    	body.mat-tunnel .summary-info, 
    	body.raildin-tunnel .summary-info,
        body.tryba-tunnel .summary-info,
        body.tahoma_bee-tunnel .summary-info { color: #19879e; }


/*=============================================================================
                            CONFIRM
* ===========================================================================*/
#confirm { position: relative; background: url(../img/bg_confirm_connexoon.png) no-repeat center center; background-size: cover; }
body.tahoma-tunnel #confirm,
	body.mrstores-tunnel #confirm,
	body.mat-tunnel #confirm,
	body.raildin-tunnel #confirm,
    body.tryba-tunnel #confirm,
    body.tahoma_bee-tunnel #confirm { position: relative; background: url(../img/bg_confirm.jpg) no-repeat center center; background-size: cover; }
body.roma-tunnel #confirm { position: relative; background: url(../img/bg_confirm_connexoon_roma.jpg) no-repeat center center; background-size: cover; }
body.thermostat-tunnel #confirm { position: relative; background: url(../img/bg_confirm_thermostat.png) no-repeat center center; background-size: cover; }

#confirm_content { font-family: 'Fago'; position: relative; padding: 5% 10%; max-width: 350px; width: inherit; font-size: 16px; line-height: 19px; }
body.tahoma-tunnel #confirm_content p,
body.mrstores-tunnel #confirm_content p,
body.mat-tunnel #confirm_content p,
body.raildin-tunnel #confirm_content p,
body.tryba-tunnel #confirm_content p,
body.roma-tunnel #confirm_content p,
body.thermostat-tunnel #confirm_content p,
body.tahoma_bee-tunnel #confirm_content p {
	color: #FFF;
    background-color: transparent;
}
#confirm_content .icon { max-width: 263px; width: inherit; height: 228px; display: block; background: #19879e; padding-left: 65px; padding-top: 100px; font-size: 23px; line-height: 40px; border-radius: 164px 164px 164px 20px; margin-bottom: 30px; }
#confirm_content .icon .sprite { display: block; margin-left: -45px; }
#confirm_content p { margin-bottom: 25px; background-color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0.75); border-radius: 5px}
#confirm_content p.bigger { font-size: 24px; line-height: 27px; }
#confirm_bottom { background: #fff; font-size: 0; height: 80px; padding-top: 40px; text-align: center; }
#confirm_bottom a { display: inline-block; *display: inline; *zoom: 1; max-width: 360px; margin: 10px; }

#confirm_content .icon {
	background: #FAB711;
	font-family: "pfdin-medium",Arial,sans-serif;
	color: #FFF;
}
body.tahoma-tunnel #confirm_content .icon,
body.mrstores-tunnel #confirm_content .icon,
body.mat-tunnel #confirm_content .icon,
body.raildin-tunnel #confirm_content .icon,
body.tryba-tunnel #confirm_content .icon,
body.tahoma_bee-tunnel #confirm_content .icon {
	background: #19879e;
}
body.roma-tunnel #confirm_content .icon {
	background: #DE790D;
}
body.thermostat-tunnel #confirm_content .icon {
	background: #439B9B;
}
#confirm_bottom .btn {
	background: #FAB711;
}
body.tahoma-tunnel #confirm_bottom .btn,
body.mrstores-tunnel #confirm_bottom .btn,
body.mat-tunnel #confirm_bottom .btn,
body.raildin-tunnel #confirm_bottom .btn,
body.tryba-tunnel #confirm_bottom .btn,
body.tahoma_bee-tunnel #confirm_bottom .btn {
    background-color: #19879e;
}
body.roma-tunnel #confirm_bottom .btn {
    background-color: #DE790D;
}
body.thermostat-tunnel #confirm_bottom .btn {
    background-color: #439B9B;
}

.border-container #wrap.wrap_confirm #main.tableView {
    padding: 0;
    width: 100%;
    border: none;
}

#main.tableView #confirm {
    width: auto;
    height: auto;
}

#main.tableView #confirm_bottom {
    padding: 0;
    height: auto;
}

.border-container #wrap.wrap_confirm {
    border: none;
    box-sizing: content-box;
}

@media only screen and (max-height: 700px), only screen and (max-width: 400px) {
    body.tahoma-tunnel #confirm, 
    	body.connexoon-tunnel #confirm, 
    	body.mrstores-tunnel #confirm, 
    	body.mat-tunnel #confirm, 
    	body.raildin-tunnel #confirm,
        body.tryba-tunnel #confirm,
        body.tahoma_bee-tunnel #confirm { position: relative; padding: 5px; }
    #confirm_bottom { position: relative; height: 100%; }
    #confirm_content .icon {
        padding-left: 25px;
        padding-right: 25px;
        padding-top: 5px;
        height: auto;
        padding-bottom: 5px;
        border-radius: 60px 60px 60px 11px;
    }
}

@media only screen and (max-width: 450px) {
    .doc .optin a {
        width: 240px;
    }
}

/******************************************************************
    7. BtoB tunnel
******************************************************************/
body.connexoon-btob {}
    body.connexoon-btob .tunnel-heading .heading-logo { left: 325px; }
    body.connexoon-btob .size-container { width: 945px; }
        body.connexoon-btob .btob-img img { max-width: 295px; }
        body.connexoon-btob .btob-content { width: 600px; }
            body.connexoon-btob .btob-content { margin-top: 45px; }
            body.connexoon-btob .btob-content .content-heading h1,
            body.connexoon-btob .btob-content .content-heading h2 { 
                font-size: 30px;
                color: #87888a;
                line-height: 35px;
                font-weight: normal;
            }
            /* copy of previous */
    		body.connexoon-btob .btob-content h1 {
    			font-family: 'pfdin-light', Arial, sans-serif;
                font-size: 30px;
                color: #87888a;
                line-height: 35px;
                font-weight: normal;
    		}

            body.connexoon-btob .btob-content .content {
                margin-top: 50px;
                font-size: 16px;
                color: #87888a;
                line-height: 17px;
                font-family: 'pfdin-light', Arial, sans-serif;
            }
            body.connexoon-btob .btob-content .content p {                
                font-size: 14px;
                color: #87888a;
                line-height: 17px;
                font-family: 'pfdin-light', Arial, sans-serif;
            }
            body.connexoon-btob .btob-content .content h2 {
                font-size: 16px;
                line-height: 20px;
                font-family: 'pfdin-medium', Arial, sans-serif;
                font-weight: normal;
                margin-bottom: 20px;
            }            

            body.connexoon-btob .btob-content .continue-link {
                width: 300px;
                margin-top: 100px;
            }

		    body.connexoon-btob.window-tunnel .btob-content .content h2,
		    	body.connexoon-btob.window_rts-tunnel .btob-content .content h2 { color: #cb7830; }
		    body.connexoon-btob.access-tunnel .btob-content .content h2,
		    	body.connexoon-btob.access_rts-tunnel .btob-content .content h2,
		    	body.connexoon-btob.wisniowski-tunnel .btob-content .content h2,
		    	body.connexoon-btob.polargos-tunnel .btob-content .content h2 { color: #c1302d; }
		    body.connexoon-btob.terrace-tunnel .btob-content .content h2 { color: #77a950; }
		    body.connexoon-btob.roma-tunnel .btob-content .content h2 { color: #DE790D; }

/****** SERVEGO *******/
#tunnel_step_servego {
	line-height: 19px;
}
#tunnel_step_servego h3 {
	width: 100%;
	line-height: 19px;
}
#tunnel_step_servego .info {
    margin-bottom: 0px;
    line-height: 19px;
}

/* -- Maintenance -- */
body.maintenance #content {
    width: 90%;
}
body.maintenance #content .col {
    display: inline-block;
    width: 31%;
    margin: 1%;
    text-align: justify;
}

body.maintenance #content .mintro {
    font-size: 30px;
    color: #485C74;
    font-weight: normal;
    margin-bottom: 30px;
}
body.maintenance #content .mmessage {
    font-size: 15px;
}