*{
margin:0px;
padding:0px;
}
body{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 200;
color:#444;
}
.header{
z-index:2;
position:relative;
width:100%;
min-width:960px;
height:67px;
background-color:rgb(41,55,120);
border-bottom:3px solid white;
}
.navigation{
opacity:1;
position:relative;
width:960px;
margin:0px auto;
}
.home{
height:100%;
width:340px;
left:50%;
margin-left: -480px;
position:absolute;
cursor:pointer;
background-image:url('images/main/KarabinWebLogo.png');
background-repeat:no-repeat;
background-position:8px center;
background-size: contain;
}
.navigation ul{
position:relative;
left:461px;
padding:32px 0px 0px 0px;
list-style:none;
display:inline-block;
height:35px;
}
.navigation ul li{
margin:0px;
padding:0px;
height:35px;
line-height: 35px;
width:99px;
box-shadow: 1px 0px #FFF inset;
position:relative;
font-size:14px;
font-weight:bold;
color:white;
display:inline-block;
text-align:center;
float:left;
bottom:0px;
border-bottom:0;
}
.navigation ul li a{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
cursor:pointer;
}
.navigation ul li:first-child, .navigation ul li.selected:first-child, .navigation ul li:first-child:hover{
box-shadow: none;
}
.navigation ul li:hover, .navigation ul li.selected{
background-color:#FFF;
color:rgb(41,55,120);
box-shadow: none;
}
.mainPage{
    height:100%;
    width:100%;
    min-height:670px;
    position:absolute;
}
#images{
position:absolute;
top:70px;
width:100%;
min-height:600px;
height:-webkit-calc(100% - 70px);
height:-moz-calc(100% - 70px);
height:calc(100% - 70px);
min-width:960px;
}
.headerimg{
z-index:1;
position:absolute;
width:100%;
min-width:960px;
height:100%;
background-repeat:no-repeat;
background-position:center top;
background-color:white;
min-height:250px;
background-size:100%;
}
#York_Region{
color:white;
width:2px;
height:2px;
overflow:hidden;
 -moz-opacity:0; -ms-filter:”alpha(opacity=0)”; filter:alpha(opacity=0); opacity:0; 
}
.helping{
    display:block;
padding-left:40px;
padding-top:84px;
font-size:32px;
line-height:32px;
font-weight:bold;
position:relative;
top:50%;
top:50vh;
width:660px;
height:116px;
margin:-225px auto 0px auto;
color:white;
border:3px solid white;
text-align:left;
letter-spacing:3px;
background-image:url("40.png");
}
.space{
display:inline-block;
bottom:0px;
margin-left:10px;
padding:86px 4px 0px 6px;
position:absolute;
color:rgb(41,55,120);
height:116px;
background-color:white;
text-align:center;
width:122px;
}
#firstline{
    letter-spacing:normal;
    color:rgb(41,55,120);
    font-size: 16px;
    font-weight: bold;
    line-height:18px;
}
.footer{
z-index:3;
margin:0px auto;
height:175px;
width:100%;
min-width:960px;
position:absolute;
bottom:0;
background-color:white;
text-align:center;
}
.boxes{
vertical-align:top;
margin:5px 0px;
height:145px;
padding:20px 0% 0px 0%;
width:33%;
text-align:center;
display:inline-block;
background-color: rgb(236,242,248);
}
.boxtext{
padding:0px 10px 15px 10px;
margin:5px auto;
width:280px;
text-align:justify;
font-size:16px;
color:#333;
}
.boxtext h2{
text-align:center;
font-size:24px;
margin:0px auto 20px auto;
color:#444;
text-shadow: 1px 1px white;
}
.click{
color:rgb(30,30,30);
margin:0px auto;
text-align:center;
width:150px;
padding:10px 0px;
font-size:18px;
border:2px solid rgb(30,30,30);
}
.boxes:hover{
background-color:rgb(41,55,120);
cursor:pointer;
opacity:.60;
}
.boxes:hover > .boxtext{
color:white;
opacity:1;
}
.boxes:hover > .boxtext >h2{
color:white;
text-shadow: -1px -1px #444;
opacity:1;
}
a:link, a:hover, a:active{
text-decoration:none;
color:inherit;
}
.footer a:link, .footer a:hover, .footer a:active{
text-decoration:none;
}
a:visited{
text-decoration:none;
color:inherit;
}
li a:link, li a:hover,li a:active{
text-decoration:none;
color:inherit;
padding:20px 8px 12px 8px;
}




/*

GALLERY

*/

.cover{
z-index:2;
display:block;
position:relative;
top:0px;
width:100%;
height:700px;
background-color:white;
text-align:right;
overflow:none;
margin-bottom:10px;
}
.covertext{
position:absolute;
right:0px;
font-size:24px;
width:450px;
padding:25px 25px;
border:3px solid white;
margin:25px;
text-align:justify;
background-image:url("images/blue4.png");
}
.click{
border:none;
color:white;
text-shadow:2px 2px #444;
font-weight:bold;
position:absolute;
bottom:0px;
right:0px;
font-size:28px;
width:265px;
padding:10px 0px;
text-align:center;
text-decoration:none;
border-left:3px solid white;
border-top:3px solid white;
}
.cover img{
position:absolute;
bottom:0px;
right:0px;
}
.click:hover{
color:rgb(41,55,120);
text-shadow:none;
background-color:#FFF;
text-decoration:none;
}
.set{
z-index:1;
display:none;
list-style:none;
margin:10px auto;
position:relative;
padding:10px;
border:5px solid #577a99;
width:100%;
height:600px;
background-color:white;
text-align:left;
overflow:none;
}
.set li{
display:inline-block;
position:relative;
margin:0px auto;
text-align:center;
vertical-align:top;
background-color:white;
float:left;
border:3px solid white;
}
.big{
width:40%;
height:100%;
}
.small{
width:30%;
height:50%;
}
#chalet{
background-image:url("images/gal/chalet.jpg");
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
#house{
background-image:url("images/gal/house.jpg");
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
#j{
background-image:url("images/gal/Family-room_mantel_fireplace_Custom_home_builder_design_build_plans_additions_king-city_aurora_newmarket_caledon_york_region_toronto_contractor_interior-design_bcin_karabin.jpg");
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
#basement{
background-image:url("images/gal/basement.jpg");
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
#D{
background-image:url("images/gal/D.jpg");
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
#Maunders{
background-image:url("images/gal/Maunders.jpg");
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}




/*

PRINCIPLES

*/

.text h1{
color:rgb(41,55,120);
font-size:32px;
text-align:center;
}
.text {
	width:100%;
	margin:0px auto 0px auto;
	padding:25px 0px;
	height:245px;
	background-color:white;
    position: relative;
	border-bottom:30px solid rgb(41,55,120);
}
.text div{
	height:220px;
	margin: 0px auto 0px auto;
	width:810px;
	text-align:justify;
	color:#444;
	font-size:24px;
}
#initiative {
background: url('images/diff/chalet.jpg') 50% 0 no-repeat fixed; 
height: 600px;  
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
position: relative;
}
#communication { 
	background-image: url('images/diff/backyard.jpg');
	background-position:50% 0;
	background-repeat:no-repeat;
	background-attachment:fixed; 
	height: 600px;
	margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative;
}
#expertise { 
	background-image: url('images/diff/Hilary.jpg');
	background-position:50% 0;
	background-repeat:no-repeat;
	background-attachment:fixed; 
	height: 600px;
	margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
}
#process { 
	background-image: url('images/diff/library.jpg');
	background-position:50% 0;
	background-repeat:no-repeat;
	background-attachment:fixed; 
	height: 600px;
	margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
}
#relationships { 
	background-image: url('images/diff/dokes.jpg');
	background-position:50% 0;
	background-repeat:no-repeat;
	background-attachment:fixed; 
	height: 600px;
	margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
}
#noborder {
border-bottom:none;
}

article {
    height: 122px; 
    position: absolute; 
    bottom: 113px; 
    width: 100%; 
}
article .messageContainer{
    height:72px;
    padding:20px 40px;
    position:absolute;
    right:0px;
    background-color:rgba(255,255,255,.9);
    border-bottom:10px solid rgb(41,55,120);
}
article .messageContainer:hover{
    background-color:rgba(255,255,255,1);
}
.messageContainer h1{
    color:rgb(41,55,120);
    font-weight: bold;
    height:72px;
    line-height: 72px;
    font-size: 72px;
    text-align: right;
}
.messageContainer p{
    color:#FFF;
    width:480px;
    padding:0px 60px;
    font-size: 28px;
}
.indent{
    margin-left:50px;
}






/*

ABOUT

*/

.all{
font-size:18px;
width:960px;
margin:50px auto;
text-align:justify;
}
.content h2{
position:relative;
top:-5px;
margin:0px;
padding:0px;
font-size:24px;
color:rgb(41,55,120);
font-weight:bold;
}
.aboutPhoto{
float:left;
width:335px;
}
.aboutPhoto img{
    width: 325px;
}
.content{
font-size:18px;
position:relative;
margin-left:335px;
width:565px;
padding:0px 10px 0px 50px;
text-align:justify;
}
.content p, .content li{
    line-height:30px;
}
.content ul{
    padding-left:20px;
}



/*

CONTACT

*/

h1{
font-size:24px;
color:rgb(41,55,120);
font-weight:bold;
margin-bottom:20px;
}
.contact p{
width:928px;
position:relative;
margin:0px;
padding:0px;
font-size:18px;
color:#444;
margin-bottom:20px;
}
.contactPhoto{
padding:5px 0px 10px 50px;
float:right;
}



@media (max-width: 960px){
    .header{
        width:100%;
        min-width: 320px;
        height:92px;
        border-bottom: 4px solid #FFF;
    }
    .home{
        position: relative;
        width:100%;
        left:0;
        margin:0;
        height:56px;
        display:block;
    }
    .navigation{
        position: relative;
        width:100%;
        height:36px;
        display:block;
    }
    .navigation ul{
        position:relative;
        left:0px;
        width:100%;
        float:left;
        padding:0px 0px 0px 0px;
        list-style:none;
        display:block;
        height:36px;
    }
    .navigation ul li{
        height:36px;
        line-height: 36px;
        font-size: 13px;
        width:20%;
    }
    #images{
        position:absolute;
        top:96px;
        width:100%;
        min-height:256px;
        height:256px;
        min-width:320px;
    }
    .headerimg{
        z-index:1;
        position:absolute;
        width: 100%;
        min-width:320px;
        height:256px;
        background-repeat:no-repeat;
        background-position:center;
        background-color:white;
        min-height:256px;
        background-size:cover;
    }
    .helping{
        display:none;
    }
    .footer{
        z-index:3;
        margin:0px auto;
        height:auto;
        width:100%;
        min-width:320px;
        bottom:initial;
        top:352px;
    }
    .boxes{
        vertical-align:top;
        margin:4px 0px 0px 0px;
        height:auto;
        padding:16px 0% 0px 0%;
        width:100%;
    }
    .boxtext{
        padding:0px 56px 24px 56px;
        margin:4px auto;
        width:auto;
        text-align:justify;
        font-size:16px;
        color:#333;
    }
        .boxtext h2{
        text-align:center;
        font-size:24px;
        margin:0px auto 12px auto;
        color:#444;
        text-shadow: 1px 1px white;
    }
    .all{
        font-size:18px;
        width:100%;
        margin:50px auto;
        text-align:justify;
    }

    .cover{
        top:0px;
        width:100%;
        height:256px;
        margin-bottom:4px;
    }




    #initiative, #communication, #expertise, #process, #relationships { 
        height:256px;
        background-position:center;
        background-size: cover;
        background-attachment:scroll;
    }
    .text h1{
        color:rgb(41,55,120);
        font-size:24px;
        line-height: 28px;
        text-align:center;
    }
    .text {
        width:auto;
        margin:0px auto 0px auto;
        padding:24px;
        height:auto;
        background-color:white;
        position: relative;
        border-bottom:30px solid rgb(41,55,120);
    }
    .text div{
        height:auto;
        margin: 0px;
        width:auto;
        text-align:justify;
        color:#444;
        font-size:16px;
    }
    article {
        height: 56px; 
        position: absolute; 
        bottom: 56px; 
        width: 100%; 
    }
    article .messageContainer{
        height:32px;
        padding:12px 24px;
        position:absolute;
        right:0px;
        background-color:rgba(255,255,255,.9);
        border-bottom:4px solid rgb(41,55,120);
    }
    .messageContainer h1{
        color:rgb(41,55,120);
        font-weight: bold;
        height:32px;
        line-height: 32px;
        font-size: 32px;
        text-align: right;
    }
    .messageContainer p{
        color:#FFF;
        width:auto;
        padding:0px;
        font-size: 32px;
    }
    .indent{
        margin-left:50px;
    }


    .all{
        font-size:16px;
        width:100%;
        margin:0px auto;
    }
    .content h2{
        position:relative;
        top:0px;
        text-indent: 32px;
        margin:0px;
        padding:0px;
        font-size:24px;
        color:rgb(41,55,120);
        font-weight:bold;
    }
    .aboutPhoto{
        padding:32px;
        float:left;
        width:-webkit-calc(100% - 64px);
        width:-moz-calc(100% - 64px);
        width:calc(100% - 64px);
    }
    .aboutPhoto img{
        width:100%;
    }
    .content{
        font-size:18px;
        position:relative;
        margin-left:0;
        width:100%;
        padding:0px;
        text-align:justify;
    }
    .content p, .content li{
        padding:0px 32px;
        line-height:28px;
    }
    .content ul{
        list-style-position: inside;
    }
    .content ul li{
        position: relative;
        padding:4px 32px 4px 16px;
    }


    h1{
        font-size:24px;
        color:rgb(41,55,120);
        font-weight:bold;
        margin-bottom:20px;
    }
    .contact p{
        width:auto;
        padding:0px 32px;
        position:relative;
        margin:0px;
        font-size:16px;
        color:#444;
        margin-bottom:20px;
    }
    .contact h1{
        text-indent: 32px;
    }
    .contactPhoto{
        padding:32px;
        width:-webkit-calc(100% - 64px);
        width:-moz-calc(100% - 64px);
        width:calc(100% - 64px);
        float:right;
    }

    iframe{
        display:none;
    }

}