﻿/* HTML & BODY */
html, body {height: 100%; font-size: 14px;}
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-width: 320px;
    background: #f7faf7;
    font-size: 14px;
    line-height: 1.4285em;
    color: rgba(0, 0, 0, 0.87);
}
body > .grid {height: 100%;}

/* HEADER */
header{background:white; text-align:center; box-shadow:0 2px 1px rgba(0, 0, 0, 0.2); position:relative}
header .header_wrapper{padding:20px 0; margin:auto;}
/*header .header_wrapper img{display:inline-block;}*/
header .header_wrapper h1{color:#015ec1}


.home_title {
    background: var(--lightgreen);
    color: var(--darkgreen);
    text-align: center;
    font-weight: 900;
    margin-bottom: 30px;
    font-size: 300%;
    font-style: italic;
}

.menu-card {
    background: white;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 20px;
}

    .menu-card .menu-title {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        text-align: left;
        padding-left: 40px;
        text-align: left;
    }

    .menu-card .menu-linkopt {
        color: var(--darkgreen);
        border: solid 1px var(--darkgreen);
        border-radius: 20px;
        padding: 20px;
        margin: 10px 0;
    }

        .menu-card .menu-linkopt:hover {
            background: var(--lightgreen);
        }

.menu-special {
    text-align: right;
}

/* MAIN LOGIN */
.header_login {
    background: #f7faf7 url(/img/cph_brick_bg.png) repeat-x;
}  
.login_wrapper{margin:auto; padding:70px 0}
.box_title{background:var(--darkgreen); text-align:center; padding:12px 15px; }
.box_title h4{color:var(--lightgreen); font-size:18px; margin:0; font-weight:500;}
.box_title h3{color:white; font-size:25px; text-transform:uppercase; margin:0; font-weight:500;}

.login_forgot{text-align:center; margin-top:10px;}

#btn_login_access{background:var(--darkgreen); color:white; font-size:19px; text-transform:uppercase; border-radius:30px; padding:15px 10px;}
#btn_login_access:hover {
    background: var(--darkgreenhover);
}

.login_register{padding-top:15px}

.home_prefooter{background:white; text-align:center;}
.home_prefooter .container{margin:auto; padding:70px 0}
    .home_prefooter h1 {
        color: var(--darkgreen);
        background: var(--lightgreen); 
        font-size:41px;
        font-weight: 800;
        font-style:italic;
    }
.home_prefooter h4{color:#707070; font-size:20px; font-weight:600}
.home_prefooter p{color:#707070; font-size:20px; line-height:normal}
















.homelogin_header img{margin:auto; margin-top:40px; min-width:170px; max-width:300px}
.homelogin .field{text-align:left;}

.homelogin{min-height:330px; float:left;font-size:14px}
.homelogin h4{color:#176db0; border-bottom:dotted 1px #176db0; line-height:40px; margin-top:-5px}

div.homelogin_wrapper div.homelogin_header{text-align:center; margin-top:20px}
div.homelogin_wrapper div.homelogin_header h2{color:#176db0; margin:10px 0 30px; font-family:'Raleway', sans-serif; font-size:25px; font-weight:500; text-transform:uppercase}

/* LOGIN */
p.loginEntry{font-size:14px}
p.loginRegister{text-align: center; padding: 10px 0; color: #04a70a; font-weight: bold;}
p.loginRegister a{color: #04a70a; text-decoration:underline}

/* OPTIONS */
div.accessOptions ul{list-style:none; margin:0; padding:0; margin-left:5px}
div.accessOptions ul li{line-height:25px}

/* REGISTER */
.homeregister_info{margin-top:0 !important; text-align:left}
.homeregister {min-height:330px; float:left;font-size:14px}
.homeregister .header{ text-align: center;padding: 10px 0; border:solid 1px #176db0}
.homeregister .header h3{color:#176db0; margin:0}

.homeregister .bluepanel{color:white; background:#176db0; text-align:center; padding:20px; margin-bottom:20px; padding-bottom:30px}
.homeregister .bluepanel h3{border-bottom:solid 1px white; line-height:35px}

/* QUOTE PAYMENT */
.ccards_accepted{margin-top:10px;}	
strong.whatsthis{color:blue}
strong.whatsthis:hover img.security_code{display:block}
img.security_code{display:none; position:absolute; max-height:100px; margin-top:-50px; margin-left:200px}
div.ccards_accepted .ssl img{height:30px}

.ccards_accepted{margin-top:10px;}	

.lm {
	color:var(--darkgreen);
	text-decoration: underline;
	font-size: 16px;
}

@media only screen and (min-width: 640px) and (max-width:1000px) {
    #paymentBox{min-width:500px;}
}

@media only screen and (min-width: 1024px) {
	div.ccards_accepted{height:60px}	
	div.ccards_accepted .cards{float:left;}
	div.ccards_accepted span{float:left; margin:7px 15px}
	div.ccards_accepted .ssl{float:right;}
}

.cphicon {
    background:url(../img/cph_icons.png) no-repeat;
    display:inline-block;
}
.icon-fb {
	background-position: 0 0;
}
.icon-tw {
	background-position: -40px 0;
}
.icon-ln {
	background-position: -80px 0;
}

#footer {
    width:100%;
    bottom:0;
	background:var(--darkgreen);
	color: #fff;
    text-align:center;
	padding: 10px;
    position:absolute;
    bottom:0;
}
#footer .wrapper {
    max-width:1200px;
    margin:auto;
    text-align:left;
}

#copyright {
	line-height: 33px;
}
#copyright a {
	color: #fff;
	margin: 0 3px;
}

/* DIRECT ACCESS */
#userDirectAccess a.button{margin-bottom:10px}

/* RESPONSIVE */
@media (min-width: 1200px) {
    header .header_wrapper{width:1140px;}
    header .header_wrapper img{display:inline-block;}
    header .header_wrapper h1{display:inline-block; vertical-align:top; margin:0; margin-left:40px; line-height:75px;}

    .login_forgot{float:right}

    .login_wrapper{width:1000px;}
    .home_prefooter .container{width:940px;}

}

@media (min-width: 900px) {
    .homelogin{width:600px;}
    .homeregister{width:600px;}
}

/* MOBILE */
@media (max-width: 991px) {
    .login_wrapper{padding:70px 10px}
    .home_prefooter .container{padding:40px 20px}
    .home_prefooter h1{font-size:30px;}
    .home_prefooter h4{font-size:16px;}
    .home_prefooter p{font-size:16px}

    /* OFERS */
    img.offerLogo{max-width:380px}

}

@media (max-height: 700px) {
    #footer {
        position:inherit;
    }    
}

