@import 'font-style.css';


.header-menu {

    -webkit-animation-name: fadeInDown;

          animation-name: fadeInDown;

  -webkit-transform-origin: center bottom;

      -ms-transform-origin: center bottom;

          transform-origin: center bottom;

    -webkit-animation-duration: 1s;

          animation-duration: 1s;    

}

header .animated {

    animation-fill-mode: none !important;

}



.clearHeader .top-menu li a {

    line-height: 70px;

    height: auto;

    transition: all 0.5s ease;

}

.clearHeader.sticky .top-menu li a {

    line-height: 57px;

    padding: 0 15px;

}

ul#menu ul.menus {

    top: 100%;

    position: absolute;

    width: 200px;

}

ul#menu li:hover ul.menus {

    display: block;/*

    -webkit-animation-name: fadeInDown;

          animation-name: fadeInDown;

    -webkit-animation-duration: .5s;

          animation-duration: .5s; */  

}

ul#menu ul.menus li {

    border-bottom: 1px solid rgba(77,148,12,0.66);

}

ul#menu ul.menus li a {

    background: rgba(0,0,0,0.66);

    text-align: left;

    color: #fff;

    width: 100%;

    line-height: 40px;
    text-transform: none;
    font-size: 13px;
    font-style: 'open_sansregular';

}

ul#menu ul.menus li:hover a {

    /*background: rgba(225,225,225,0.66);*/

    background: rgba(77,148,12,0.66);

}

ul#menu ul.submenus {

    display: none;

    left: 100%;

    margin: 0 auto;

    position: absolute;

    top: 0;

}

ul#menu ul.submenus li a {

    background: #aa6b02;

}

ul#menu ul.submenus li {

    border-bottom: 1px solid #7d4f02;

}

ul#menu ul.submenus li:hover a {

    background: #7d4f02;

}

ul#menu ul.menus li:hover ul.submenus {

    display: block;

    margin: 0;

    padding: 0;

    width: 200px;

}

.top-menu {

	z-index: 9999;

	float: right;

}

.top-menu ul {

    float: right;

    list-style-type: none;

    margin-bottom: 0;

    margin-left: 0;

    margin-right: 1px;
	margin-top: 2px;

    padding: 0;

    position: relative;

}

.top-menu li {

    display: inline-block;

    float: left;

    font-size: 10px;

}

.top-menu li a {

    color: #069dcb;

    display: inline-block;

    font-family: arial, sans-serif;

    font-size: 14px;

    outline: medium none;

    padding: 0 15px;

    text-align: center;

    text-decoration: none;

    padding-top: 10px;

    font-weight: 400;
    text-transform: uppercase;

}

.top-menu li:hover,.top-menu li:hover a,.top-menu li.active a {

    color: #c5c5c5;

}

.top-menu li:hover ul a {

    background: none repeat scroll 0 0 #f3f3f3;

    color: #2f3036;

    height: 40px;

    line-height: 40px;

    border-bottom: none;

}

.top-menu li:hover ul a:hover {

    background: none repeat scroll 0 0 #19c589;

    color: #fff;

}

.top-menu li ul {

    display: none;

    z-index: 9;

}

.top-menu li ul.menus li {

    display: block;

    float: none;

    border-bottom: 1px solid #aa6b02;

    position: relative;

}

.top-menu li ul.menus li a {

    min-width: 100px;

    padding: 0 20px;

    width: auto;

}

.top-menu ul li a:hover + .sub-menu,.top-menu  .sub-menu:hover {

    display: block;

}

.top-menu .show-menu {

    background: none repeat scroll 0 0 #19c589;

    color: #fff;

    display: none;

    font-family: 'ChaparralPro-Regular';

    padding: 10px 0;

    text-align: center;

    text-decoration: none;

}



h1.logo {

	margin: 0;

	width: auto;

	float: left;

    line-height: 65px;
	margin-top:9px;

}
.sticky h1.logo {
    line-height: 57px;
}

.sosmed {

	float: right;

    padding-top: 7px;

}

.sosmed a {

	line-height: 55px;

	margin-left: 5px;

	}

.sosmed a:hover img {

	opacity: 0.7;

}

.sosmed form {

	display: inline-block;

	position: relative;

}

.sosmed form:hover input,.sosmed form input:focus {

    width: 250px;

    opacity: 1;

    z-index: 9;

}

.sosmed input.src-input {

    padding: 3px 10px;

    position: absolute;

    right: 30px;

    width: 0px;

    opacity: 0;

	-webkit-transition: width .5s; /* For Safari 3.1 to 6.0 */

    transition: width .5s;

}

.sosmed button.src-btn {

	background: none;

	border:0;

	margin: 0 auto;

	padding: 0;

	opacity: 1;

}

.sosmed button.src-btn:hover {

	opacity: 0.7;

}



.top-menu input[type="checkbox"] {

    display: none;

}
.show-mobile-btn {
    display: none;
}



@media screen and (max-width: 1199px) {

    .sosmed {

        padding-top: 2px;

    }

}



@media screen and (max-width: 991px) {

    .container {

        width: 100%;
    }
    .show-desktop-btn {
        display: none;
    }
    .show-mobile-btn {
        display: block;
    }
    .create-account.show-mobile-btn {
        margin: 0 auto;
        width: 100%;
        margin-bottom: 20px;
    }
    .sosmed {

        margin-top: 5px;

        position: absolute;

        right: 75px;

    }
    .show-menu-mobile {
        display: none;
        background: #565656;
        top: 95px;
        right: -15px;
        width: 0;
        position: absolute;
        z-index: 9999;
         -webkit-transition: width .2s; /* Safari */
        transition: width .2s;
    }

    .top-menu input[type="checkbox"]:checked ~ .show-menu-mobile {
        display: block;
        right: -15px;
        padding: 30px;
        padding-right: 45px;
        width: 280px;
        position: fixed;
        z-index: 9999;
        bottom: 0;
        display: block;

        -webkit-animation-name: fadeInRight;

              animation-name: fadeInRight;

      -webkit-transform-origin: center bottom;

          -ms-transform-origin: center bottom;

              transform-origin: center bottom;

        -webkit-animation-duration: .5s;

              animation-duration: .5s;
    }
    .sticky .top-menu input[type="checkbox"]:checked ~ .show-menu-mobile {
        top: 88px;
    }
    .top-menu {

        float: right;

        margin-left: 15px;

    }

    .top-menu li a {

        background: none;

        height: auto;

        text-align: left;
        line-height: 50px;
        color: #fff;

    }
    .clearHeader .top-menu li a {
        line-height: 50px;
        padding-top: 0;
        text-align: center;
    }

    .top-menu li:hover a,.top-menu li.active a {

        background: rgba(0,0,0,1);
        color: #1abef0;

    }

	.top-menu ul {
        margin-right: 0;
	}

	.top-menu li {

	    border-bottom: 1px solid #1abef0;

        position: relative;
        float: none;

	}

	.top-menu ul li, li a {

	    width: 100%;

	}

	.top-menu .show-menu {

        background: #1abef0;

        border-radius: 3px;

        color: #000;

        display: block;

        position: absolute;

        right: 15px;

        font-size: 20px;

        cursor: pointer;

        margin-top: 5px;

        padding: 12px 15px;

        text-decoration: none;

        transition: color 0.15s linear 0s;

	} 
    a.create-account {
        margin-right: 85px;
        margin-top: 15px !important;
    }
    .top-menu .show-menu img {
        width: 40px;
    }
    .clearHeader.sticky .top-menu .show-menu {
        margin-top: 0;
        border-radius: 0;
        padding: 13px 15px;
        transition: color 0.15s linear 0s;
    }

    ul#menu li:hover ul.menus {

        width: 100%;

        position: relative;

    }

    ul#menu ul.menus li:hover ul.submenus {

        display: block;

        left: 0;

        margin: 0;

        padding: 0;

        position: relative;

        right: 0;

        width: 100%;

        top: 100%

    }

    ul#menu ul.menus li:hover ul.submenus li a {

        padding: 0 30px;

        background: #d98c08;

    }

    ul#menu ul.menus li ul.submenus li:hover a {

        background: #aa6b02;

    }
    .clearHeader.sticky .top-menu li a {
        line-height: 50px;
    }

}