/**
 * Author:        Fullscreen Interactive (fullscreen.io)
 * Date:         Feb 2011
 * Project:     i2i Brokers
 */

/*
 * Reset
 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border: 0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; font-weight: normal; }
li{ padding: 0; margin: 0; list-style: none; }
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
abbr,acronym{border:0;font-variant:normal;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
script { display: none; }

.right { float: right; }
.left { float: left; }
.clear { clear: both; }

/*
 * Defaults
 */
html {
    background: #767F7C; font-family: "myriad-pro-1","myriad-pro-2", "Myriad Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    min-width: 319px;
}

body {
    background: url(../../app/images/bg-pic.jpg) no-repeat center top;
    min-height: 101%;
    margin-bottom: 100px;
}

iframe {
    border: none;
}

#container {
    width: 992px;
    margin: 0 auto 0;
    position: relative;
}

#header { padding: 40px 0 0 40px; float: left; width: 300px; }
    #header h1 { background: url(../../app/images/i2i.png) no-repeat top left; height: 80px; padding: 40px 0 0 80px; }
        #header h1 a {
            display: block; text-indent: -9000px; background: url(../../app/images/insurance-brokers-white.png) no-repeat;
            width: 108px; height: 18px; outline: none;}

#navigation { float: right; margin: 0 60px 0 0; }
    #navigation li {
        list-style: none; float: left; border-right: 1px solid rgba(255, 255, 255, 0.2);
        position: relative; overflow: hidden; padding: 0 12px; height: 130px; white-space: nowrap;
    }
        #navigation li a { color: #fff; text-decoration: none; font-size: 13px; line-height: 13px; height: auto;
            top: 76px; outline: none; cursor: pointer; display: block; position: relative; }

        #navigation li.last { padding-right: 0; border-right: 0; }

#layout {
    clear: both;
    background: rgba(255, 255, 255, 0.4) url(../../app/images/content-bg.png) repeat;
    width: 100%;
    overflow: hidden; position: relative;
}

#content { padding: 40px; }
    #content.has-image { width: 600px; }
        #content.has-image .two { margin: 0; }


.cl-effect-21 a {
    padding: 10px 0;
    position: relative;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}

.cl-effect-21 a::before,
.cl-effect-21 a::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fba828;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: opacity 0.3s, -moz-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}

.cl-effect-21 a::before {
    top: 0;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}

.cl-effect-21 a::after {
    bottom: 0;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    transform: translateY(10px);
}

.cl-effect-21 a:hover,
.cl-effect-21 a:focus {
    color: #fff;
}

.cl-effect-21 a:hover::before,
.cl-effect-21 a:focus::before,
.cl-effect-21 a:hover::after,
.cl-effect-21 a:focus::after {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

#body-image { position: absolute; top: 0; right: 0; }
.content-column {
    width: 275px; margin-right: 40px; float: left;  outline: none;
}
    .content-column.three { margin-right: 0; }

#footer {
    width: 912px; margin: 20px auto 50px; font-size: 10px; color: #c2cac7;
    position: relative;
    top: 20px;
}

#logos { width: 992px; margin: 0 auto; background: #fff; overflow: hidden; }
    #logos p { margin: 8px 8px 4px 12px; }

/**
 * Page Styles
 */
#home { clear: both; padding: 0 0 40px 40px; min-height: 280px; }
    #home h1 { font-size: 30px; color: #fba828; }
    #home h2 { font-size: 24px; color: #747577; margin-top: 8px;}

.url-contact #content h1 { float: left; margin-right: 50px;}
    .url-contact .content-column { float: left; width: 150px; margin-left: 30px; overflow: hidden; height: auto;}
    .url-contact #Form_Form { position: relative; clear: both;}
    .url-contact #Form_Form div.textarea { position: absolute; right: 0; top: 0; width: 600px; }
    .url-contact #Form_Form_action_process { position: absolute; right: 46px; top: 190px;}

#Page-UserDefinedForm .ui-widget { font-size: 11px; }

.tipsy { padding: 5px; font-size: 11px; line-height: 18px; position: absolute; z-index: 100000; }
.tipsy-inner { padding: 10px; background-color: black; color: white; width: 200px; text-align: left; }
.tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-arrow { position: absolute; background: url('../images/tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }

#navigation-trigger {
    display: none;
}


.svg-menu-toggle {
    fill: #fff;
    pointer-events: all;
    cursor:pointer;
}
    .svg-menu-toggle .bar {
        fill: #FFF;
        -webkit-transform:rotate(0) translateY(0) translateX(0);
        transform:rotate(0) translateY(0) translateX(0);
        opacity:1;

        -webkit-transform-origin: 20px 10px;
        transform-origin: 20px 10px;

        -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.1s ease-in-out;
        transition: transform 0.2s ease-in-out, opacity 0.1s ease-in-out;
    }

    .svg-menu-toggle .bar:nth-of-type(1) {
        -webkit-transform-origin: 20px 10px;
        transform-origin: 20px 10px;

    }

    .svg-menu-toggle .bar:nth-of-type(3) {
        -webkit-transform-origin: 20px 20px;
        transform-origin: 20px 20px;
    }
}

.svg-menu-toggle.bar:hover:nth-of-type(1) {
    -webkit-transform: translateY(-2px) translateX(0);
    transform: translateY(-2px) translateX(0);
}

.svg-menu-toggle.bar:hover:nth-of-type(3) {
    -webkit-transform: translateY(2px) translateX(0em);
    transform: translateY(2px) translateX(0em);
}

.mobile_open .svg-menu-toggle .bar:nth-of-type(1) {
    -webkit-transform:rotate(-45deg) translateY(0) translateX(0);
    transform:rotate(-45deg) translateY(0) translateX(0);
}

.mobile_open .svg-menu-toggle .bar:nth-of-type(2) {
    opacity:0;
}

.mobile_open .svg-menu-toggle .bar:nth-of-type(3) {
    -webkit-transform:rotate(45deg) translateY(0em) translateX(0em);
    transform:rotate(45deg) translateY(0em) translateX(0em);
}

.inline-svg {
    display: block;
    margin: 0 auto;
}

@media screen and (max-width: 1000px) {
    body {
        overflow-x: hidden;
    }

    #container,
    #logos,
    #footer {
        width: 96%;
    }

    #navigation {
        display: none;
        transition: 0.4s;
    }
        #navigation.mobile_open {
            display: block;
            width: 100%;
            float: none;
        }

        #navigation.mobile_open li {
            width: 100% !important;
            border: none;
            height: auto;
            float: none;
            margin-bottom: 5px;
        }

        #navigation.mobile_open li a {
            top: 0;
        }

    #navigation-trigger {
        display: block;
    }

    .mobile_menu_trigger {
        float: right;
        margin: 14px 0 0;
    }

    #header {
        padding: 10px 0 0 0;
        width: 150px;
    }

    #content {
        padding: 20px;
    }

    #content.has-image {
        width: auto;
    }

    #body-image {
        display: none;
    }

    #header h1 {
        height: 40px; padding: 20px 0 0 40px; background-size: 33px 40px; }

        #header h1 a {
            background-size: 96px 11px;
            width: 109px; height: 11px;
        }

    .content-column {
        width: 100%;
        margin-bottom: 40px;
    }

    #home {
        padding-left: 10px;
    }
}