/* ---------- Google Font ---------- */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400|Open+Sans+Condensed:300,700,300italic);

/* RESET STYLES */

/**, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote { margin:0; padding:0 }*/

html, dl, dt, dd, ul, ol, li {
    margin: 0;
    padding: 0
}

table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption { text-align:left }
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
q:before, q:after { content:''}
strong { font-weight: bold }
em { font-style: italic }
.italic { font-style: italic }
.aligncenter { display:block; margin:0 auto; }
.alignleft { float:left; margin:10px; }
.alignright { float:right;margin:10px; }
.no-margin{margin:0px;}
.no-bottom{margin-bottom:0px;}
.no-padding{padding:0px;}
.margin-t{margin-top:22px;}
/*div { position:relative } */
a{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active,a:focus{outline: none;}


img.alignleft, img.alignright, img.aligncenter {
    margin-bottom: 11px;
}

.alignleft, img.alignleft{
display: inline;
    float: left;
    margin-right: 22px;
}

.alignright, img.alignright {
    display: inline;
    float: right;
    margin-left: 22px;
}

.aligncenter, img.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

article, aside, figure, footer, header, hgroup, nav, section {display: block;}


*{ 
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}



	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}



html{-webkit-font-smoothing:antialiased;}

a{color:#BA0707;}
a:hover{color:#BA0707;text-decoration:underline;}

body{background:#ffffff url("images/bkg.jpg") no-repeat 0 0;
color:#3E4156;
font: 14px "Open Sans", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
line-height:1;
width:100%;}


h1{font-size:36px;line-height:1.3em; }
h2{font-size:32px;line-height:1.3em;}
h3{font-size:24px;line-height:1.3em;}
h4{font-size:18px;line-height:1.3em;}
h5{font-size:16px;}
h6{font-size:14px;}
p{padding-bottom:11px;}
p,div, span{line-height:1.5em;}
.column-clear{clear:both;}
.clear{overflow: hidden;}


.mainWrap {
    /*background: #3E4156;*/
    background: #becfe1;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    margin-bottom: -16px;
}

.title{margin:100px 0 20px 0;
text-align:center;
color:#3E4156;}
.back{text-align:center;}

nav {
    display: block;
    /*background:#3E4156;*/
    /*background:#becfe1;*/    
}

.menu{
    display:block;
    margin-left:5px;
    margin-right:5px;
}

.sub-menu {
    width: 300px !important;
    transition: all .4s;
}

.menu li {
    display: inline-block;
    position: relative;
    z-index: 100;
    font-size: 16px;
    text-align: left;
}

.menu li:first-child{margin-left:0;}

.menu li a {
    font-weight:600;
    text-decoration:none;
    padding:11px;
    display:block;
    color:#ffffff;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}

    .menu li a:hover, .menu li:hover > a {
        color: #ffffff;
        /*background: #9CA3DA;*/
        background: rgba(52,159,247,1);
        background: -moz-linear-gradient(-45deg, rgba(52,159,247,1) 0%, rgba(39,160,230,1) 100%);
        background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(52,159,247,1)), color-stop(100%, rgba(39,160,230,1)));
        background: -webkit-linear-gradient(-45deg, rgba(52,159,247,1) 0%, rgba(39,160,230,1) 100%);
        background: -o-linear-gradient(-45deg, rgba(52,159,247,1) 0%, rgba(39,160,230,1) 100%);
        background: -ms-linear-gradient(-45deg, rgba(52,159,247,1) 0%, rgba(39,160,230,1) 100%);
        background: linear-gradient(135deg, rgba(52,159,247,1) 0%, rgba(39,160,230,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#349ff7', endColorstr='#27a0e6', GradientType=1 );
    }

.menu ul {
    display: none;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    top: 43px;
    left: 0px;
    z-index: 0;
    background: #ffffff;
    box-shadow: 6px 10px 20px -12px rgba(0,0,0,0.75);
    -moz-box-shadow: 6px 10px 20px -12px rgba(0,0,0,0.75);
    -ms-box-shadow: 6px 10px 20px -12px rgba(0,0,0,0.75);
    -o-box-shadow: 6px 10px 20px -12px rgba(0,0,0,0.75);
    -webkit-box-shadow: 6px 10px 20px -12px rgba(0,0,0,0.75);
    -moz-box-shadow: 6px 10px 20px -12px rgba(0,0,0,0.75);
/*    box-shadow: 0px 10px 14px -9px rgba(0,0,0,0.23);
    -moz-box-shadow: 0px 10px 14px -9px rgba(0,0,0,0.23);
    -ms-box-shadow: 0px 10px 14px -9px rgba(0,0,0,0.23);
    -o-box-shadow: 0px 10px 14px -9px rgba(0,0,0,0.23);
    -webkit-box-shadow: 0px 10px 14px -9px rgba(0,0,0,0.23);
*/}

        .menu ul li {
            display: block;
            float: none;
            background: none;
            margin: 0;
            padding: 0;
            background: #ffffff;
            width: 300px;
        }
        .menu ul li a {
            font-size: 15px;
            font-weight: normal;
            display: block;
            color: #797979;
            border-left: 3px solid #ffffff;
            /*background:#ffffff;*/
            width: 310px;
        }

            .menu ul li a:hover, .menu ul li:hover > a {
                background: #f0f0f0;
                font-weight: bold;
                /*border-left: 3px solid #9CA3DA;
                border-right: 13px solid #9CA3DA;*/
                border-left: 3px solid #319ff3;
                border-right: 13px solid #319ff3;
                color: #797979;
            }

.menu li:hover > ul{ display: block;}
.menu ul ul {
    left: 310px;
    top: 10px;
    box-shadow: 6px 10px 20px -12px rgba(0,0,0,0.75);
    -moz-box-shadow: 6px 10px 20px -12px rgba(0,0,0,0.75);
    -ms-box-shadow: 6px 10px 20px -12px rgba(0,0,0,0.75);
    -o-box-shadow: 6px 10px 20px -12px rgba(0,0,0,0.75);
    -webkit-box-shadow: 6px 10px 20px -12px rgba(0,0,0,0.75);
    -moz-box-shadow: 6px 10px 20px -12px rgba(0,0,0,0.75);
    /*        box-shadow: 0px 10px 14px -9px rgba(0,0,0,0.23);
        -moz-box-shadow: 0px 10px 14px -9px rgba(0,0,0,0.23);
        -ms-box-shadow: 0px 10px 14px -9px rgba(0,0,0,0.23);
        -o-box-shadow: 0px 10px 14px -9px rgba(0,0,0,0.23);
        -webkit-box-shadow: 0px 10px 14px -9px rgba(0,0,0,0.23);*/
}

.mobile-menu{display:none;
    width:100%;
    padding:11px;
    background:#3E4156;
    color:#ffffff;
    text-transform:uppercase;
    font-weight:600;
}
.mobile-menu:hover{background:#3E4156;
    color:#ffffff;
    text-decoration:none;
}

/*  cuando el tamaņo es medio
@media (min-width: 768px) and (max-width: 979px) {

.mainWrap{width:768px;}
.menu ul {top:37px;}
.menu li a{font-size:12px;
padding:8px;}
}
*/
/*cambie los 767 por 10px para evitar que cambie por resise*/
@media (max-width: 10px) {/* 767px) {*/
        .mainWrap {
        width: auto;
        padding: 50px 20px;
    }

.menu{display:none;}

.mobile-menu{display:block;
margin-top:100px;}

nav{margin:0;
background:none;}

.menu li{display:block;
margin:0;}

.menu li a {background:#ffffff;
color:#797979;
border-top:1px solid #e0e0e0;
border-left:3px solid #ffffff;}

.menu li a:hover, .menu li:hover > a{
background:#f0f0f0;
color:#797979;
border-left:3px solid #9CA3DA;}

.menu ul {display:block;
position:relative;
top:0;
left:0;
width:100%;}

.menu ul ul {left:0;}

}

/* --- Clase que agregaremos cuando el usuario haga scroll --- */
.menubar {
    padding-left: 50px;
    transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    -webkit-transition: all 0.6s;
}

.menubar-fixed {
    background:#8aa8bb;
    width: 98.5%;
    height: 46px;
    display: flex;
    position: fixed;
    z-index: 1000;
    margin: 0px;
    top: 0;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
    opacity: .7;
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    -webkit-transition: all 0.4s;
}
    .menubar-fixed:hover {
        opacity: 1;
    }