/*------------CSS STYLESHEET DYNAMICALLY GENERATED BY SPARKY---------------*/






html {

    font-size:14px;

}



body {

    color:#333333;

    font-family:Ubuntu;

     text-align:left;
    font-weight:300;

    font-style:normal;



    background:#ffffff;


}




div.container {

    background:transparent;

}




/* GRID SYSTEM */



.span1 {

    width: 8.3333333333333%;

}



.span2 {

    width: 16.666666666667%;

}



.span3 {

    width: 25%;

}



.span4 {

    width: 33.333333333333%;

}



.span5 {

    width: 41.666666666667%;

}



.span6 {

    width: 50%;

}



.span7 {

    width: 58.333333333333%;

}



.span8 {

    width: 66.666666666667%;

}



.span9 {

    width: 75%;

}



.span10 {

    width: 83.333333333333%;

}



.span11 {

    width: 91.666666666667%;

}



.span12 {

    width: 100%;

}






.full .container {

    width:100%;

}



.full .cell {

    margin: 0;

    padding: 0;

}




/*------------ SCREEN < 768px AND < TEMPLATE WIDTH ---------------*/



@media (max-width: 767px) {

    .container {

        width: 100%;

    }



    [class*="span"] {

        width: 100%;

    }



    .two [class*="span"] {

        width: 50%;

    }



    .full .container {

        width:100%;

    }



    .full .cell {

        margin: 0;

        padding: 0;

    }

}







/*------------ SCREEN >= 768px AND < TEMPLATE WIDTH ---------------*/



@media (min-width: 768px) {



    .container {

        width: 750px;

    }



}





/*------------ SCREEN >= 992px AND < TEMPLATE WIDTH ---------------*/



@media (min-width: 992px) {

    .container {

        width: 970px;

    }

}







/*------------ SCREEN >= TEMPLATE WIDTH ---------------*/




@media (min-width: 1230px) {


.container {


    width:1200px;


}



[class*="span"] {

    margin-left: 0;

}




}




.one .span1 {

    width: 8.3333333333333%;

}



.one .span2 {

    width: 16.666666666667%;

}



.one .span3 {

    width: 25%;

}



.one .span4 {

    width: 33.333333333333%;

}



.one .span5 {

    width: 41.666666666667%;

}



.one .span6 {

    width: 50%;

}



.one .span7 {

    width: 58.333333333333%;

}



.one .span8 {

    width: 66.666666666667%;

}



.one .span9 {

    width: 75%;

}



.one .span10 {

    width: 83.333333333333%;

}



.one .span11 {

    width: 91.666666666667%;

}



.one .span12 {

    width: 100%;

}






.fluid .container {

    width: 100%;

}



.cell {

    padding:0px 0px;

}



/*------------ COMMON SETTINGS ---------------*/



a {

    color:#ff9000;

    font-weight:300;

    font-style:normal;

    text-decoration:none;

}



a:hover {

    color:#333333;

    text-decoration:none;

}



h1, h1 a {

    color:#333333;

    font-size:60px;

    font-family:Arvo;

    text-align:left;
    font-weight:700;

    font-style:normal;

    
}



h2, h2 a {

    color:#333333;

    font-size:36px;

    font-family:Arvo;

    text-align:left;
    font-weight:400;

    font-style:normal;

    
}



h3 {

    color:#333333;

    font-size:24px;

    font-family:Ubuntu;

    text-align:left;
    font-weight:300;

    font-style:normal;

    
}



h4 {

    color:#333333;

    font-size:14px;

    font-family:Ubuntu;

    text-align:left;
    font-weight:700;

    font-style:normal;

    
}



img {

    border:none;

}



/*--------------LOGO----------------*/



.sparky_logo, .sparky_logo a {

	color:#ffffff;

    font-size:36px;

    font-family:Arial, Helvetica, sans-serif;

    font-weight:normal;

    font-style:normal;

	text-align:left;
    text-decoration:none;

}



.sparky_slogan {

	color:#ffffff;

    font-size:14px;

    font-family:Ubuntu;

    font-weight:300;

    font-style:normal;

	text-align:left;
}






/*--------------DROP-DOWN----------------*/



ul.mnu_topmenu {

    margin:0;

    padding:0;

    list-style-type:none;

    list-style-position:outside;

    position:absolute;

    z-index:100;

    white-space:nowrap;

    text-align:left;

    position:relative;

    font-family:Ubuntu;

}



.mnu_topmenu ul {

    margin:0;

    padding:0;

    list-style-type:none;

    list-style-position:outside;

    position:absolute;

    z-index:100;

    
    background:#222222;

    
}



.mnu_topmenu ul {

    width:160px;

    border:0px solid #dddddd;

    padding:20px;

}



.mnu_topmenu > li > a, .mnu_topmenu > li > span {

    display:block;

    margin:0;

    text-decoration:none;

    color:#999999;

    font-size:14px;

    padding:0 20px;

    font-weight:300;

    font-style:normal;

    height:35px;

    line-height:35px;

    cursor:pointer;

}



.mnu_topmenu > li.active > a, .mnu_topmenu > li.active > span {

    color:#ffffff !important;

    cursor:pointer;

}



.mnu_topmenu > li > a:hover, .mnu_topmenu > li:hover > a,

.mnu_topmenu > li > a:hover, .mnu_topmenu > li:hover > span {

    color:#FF9000;

}



.mnu_topmenu > li {

    display:inline-block;

    position:relative;


    text-align:left;
    margin:0;

    padding:0;

    border-right:0px solid #cccccc;

    border-bottom:0px solid #cccccc;

    border-top:0px solid #cccccc;

    
    background:transparent;

    
}



.mnu_topmenu > li.active {

    
    background:#ff9000;

    
}



.mnu_topmenu > li:first-child {

    border-left:0px solid #cccccc;

}



.mnu_topmenu li:hover {

    position:relative;

    
    background:#222222;

    
}



.mnu_topmenu li ul li:hover {

    
    background:#222222;

    
}



.mnu_topmenu li ul li {

    height:25px;

    border-bottom:0px solid #dddddd;

    padding:0 0px;

    text-align:left;
}



.mnu_topmenu li ul a, .mnu_topmenu li ul span {

    line-height:25px;

    font-size:12px;

    color:#999999;

    font-weight:400;

	font-family:Ubuntu;

    font-style:normal;

    padding-top:0;

    cursor:pointer;

}



.mnu_topmenu li ul li:hover > a,

.mnu_topmenu li ul li:hover > span {

    color:#FF9000;

}



.mnu_topmenu li ul ul {


    left:160px;


    margin-top:-20px;

}



.mnu_topmenu ul ul {

    top:0px;

}






.mnu_topmenu .sub {

    font-size:10px;

    line-height:normal;

    display:block;

}



.mnu_topmenu > li > ul {

    display: none;

}




/*--------------RESPONSIVE TOP MENU----------------*/



.js .nav-collapse {

    clip: rect(0 0 0 0);

    max-height: 0;

    position: absolute;

    display: block;

    zoom: 1;

}



.nav-collapse.opened {

    max-height: 9999px;

    position:absolute;

}



.nav-collapse.opened > ul {

    position: fixed;

    top: 0;

    left: 5%;

    width: 90%;

    background:#444;

}



.nav-collapse.opened > ul ul {

    width: 100%;

    position: relative;

    left:0;

    padding:0;

    margin:0;

    background:#444;

    border:0;

}



.nav-collapse.opened > ul ul li {

    height:auto;

}



.nav-collapse.opened li {

    width: 100%;

    display: block;

    padding-left: 0;

    padding-right: 0;

}



.nav-collapse.opened li.active, .nav-collapse.opened li:hover {

    background:#333;

}



.nav-collapse.opened li.active a {

    color:#fff !important;

}



.nav-collapse.opened li a {

    padding:5px 15px;

    margin:0;

    line-height:30px;

    height:30px;

    color:#fff !important;

}



.nav-toggle {

    -webkit-tap-highlight-color: rgba(0,0,0,0);

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    -o-user-select: none;

    user-select: none;

    
    background: url(/templates/hot_construction/images/tinynav_white.png);

    
    width: 40px;

    height: 30px;

    text-indent:-9999px;

    display:inline-block;

    float:right;

}



.nav-toggle.active {

    position: absolute;

    z-index: 999;

    right: 5%;

    top: 0;

    margin-top:5px;

    margin-right:15px;

    background-position: bottom;

}



#blocker {

    position:fixed;

    width:100%;

    height:100%;

    left:0;

    top:0;

    right:0;

    bottom:0;

    z-index:9999;

}



@media screen and (min-width: 992px) {



    .js .nav-collapse {

        position: relative;

    }



    .js .nav-collapse.closed {

        max-height: none;

    }



    .nav-toggle {

        display: none;

    }



}



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



    .nav-collapse.closed {

        overflow:hidden;

    }



}







/*--------------SCROLL TO TOP----------------*/



#back-top {

    position: fixed;

	
	bottom: 25px;

	right: 25px;

    
}



#back-top span {

    width: 60px;

    height: 60px;

    display: block;

    margin-bottom: 7px;

    background: url(/templates/hot_construction/images/top.png) no-repeat center center;

    cursor: pointer;

    -webkit-transition: 1s;

    -moz-transition: 1s;

    transition: 1s;

}




/*--------------FONT RESIZE----------------*/



#font_resize a {

    padding:0 2px;

}




/*--------------IMAGE ANIMATION----------------*/



img.img-with-animation {

    opacity: 0;

    position: relative;

}



img.img-with-animation[data-animation="grow-in"] {

    opacity: 0;

    transform: scale(0.4);

    -webkit-transform: scale(0.4);

    -o-transform: scale(0.4);

    -moz-transform: scale(0.4);

    transition: opacity 0.6s cubic-bezier(0.15, 0.84, 0.35, 1.25);

    -webkit-transition: opacity 0.6s cubic-bezier(0.15, 0.84, 0.35, 1.25);

    -moz-transition: opacity 0.6s cubic-bezier(0.15, 0.84, 0.35, 1.25);

    -o-transition: opacity 0.6s cubic-bezier(0.15, 0.84, 0.35, 1.25);

}



img.img-with-animation[data-animation="fade-in-from-left"] {

    left: -40px;

}



img.img-with-animation[data-animation="fade-in-from-right"] {

    right: -40px;

}



img.img-with-animation[data-animation="fade-in-from-bottom"] {

    bottom: -100px;

}




/*--------------FLOATING ROW (usually for top menu)----------------*/



@-webkit-keyframes topmenushow {

    0% {

        opacity: 1;

        -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px);  -moz-transform: translateY(-50px); 

    }

    

    100% {

        opacity: 1;

        -webkit-transform: translateY(0); -moz-transform: translateY(0);

    }

}



@-moz-keyframes topmenushow {

    0% {

        opacity: 1;

        -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px);  -moz-transform: translateY(-50px); 

    }

    

    100% {

        opacity: 1;

        -webkit-transform: translateY(0); -moz-transform: translateY(0);

    }

}



@-o-keyframes topmenushow {

    0% {

        opacity: 1;

        -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px);  -moz-transform: translateY(-50px); 

    }

    

    100% {

        opacity: 1;

        -webkit-transform: translateY(0); -moz-transform: translateY(0);

    }

}

@keyframes topmenushow {

    0% {

        opacity: 1;

        -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px);  -moz-transform: translateY(-50px); 

    }

    

    100% {

        opacity: 1;

        -webkit-transform: translateY(0); -moz-transform: translateY(0);

    }

}



.fix_menu {

    position: fixed;

    top: 0;

    z-index: 89;

    width: 100%;

    background: rgba(255,255,255,.9) !important;

}



.topmenushow {

    -webkit-animation-name: topmenushow;

    -moz-animation-name: topmenushow;

    -o-animation-name: topmenushow;

    animation-name: topmenushow;

    -webkit-animation-fill-mode: both;

    -moz-animation-fill-mode: both;

    -ms-animation-fill-mode: both;

    -o-animation-fill-mode: both;

    animation-fill-mode: both;

    -webkit-animation-duration: .5s;

    -moz-animation-duration: .5s;

    -ms-animation-duration: .5s;

    -o-animation-duration: .5s;

    animation-duration: .5s;

}