
body { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 300; color: #888; line-height: 30px; text-align: center; }

strong { font-weight: 500; }

a { /*color: #f35b3f; border-bottom: 1px dashed #f35b3f; text-decoration: none; transition: all .3s;*/ }
a:hover, a:focus { color: #f35b3f; border: 0; text-decoration: none; }

h1, h2 { margin-top: 10px; font-size: 38px; font-weight: 100; color: #555; line-height: 50px; }
h3 { font-size: 22px; font-weight: 300; color: #555; line-height: 30px; }
h4 { font-size: 18px; font-weight: 300; color: #555; line-height: 26px; }

img { max-width: 100%; }

.medium-paragraph { font-size: 18px; line-height: 34px; }

::-moz-selection { background: #f35b3f; color: #fff; text-shadow: none; }
::selection { background: #f35b3f; color: #fff; text-shadow: none; }


/***** Wrapper *****/

.wrapper { display: block; }


/***** Sidebar *****/

.sidebar {
	width: 250px; height: 100vh; position: fixed; top: 0; left: -255px; z-index: 999; 
	background: #333; color: #fff; transition: all .3s; box-shadow: 3px 3px 3px rgba(51, 51, 51, 0.5);
	text-align: left;
}

.sidebar.active { left: 0; }

.dismiss {
	width: 35px; height: 35px; right: 10px; transition: all .3s; 
	background: #444; border-radius: 4px; text-align: center; line-height: 35px; cursor: pointer;
}

.dismiss:hover, .dismiss:focus { background: #555; color: #fff; }

.sidebar .logo { padding: 6px 20px; border-bottom: 1px solid #444; transition: all .3s; }

.sidebar .logo a {
	display: inline-block;
	width: 172px;
	height: 34px;
	border: 0;
	text-indent: -999999px;
}

.sidebar ul.menu-elements { padding: 10px 0; border-bottom: 1px solid #444; transition: all .3s; }

.sidebar ul li a {
	display: block; padding: 10px 20px;
	border: 0; color: #fff;
}
.sidebar ul li a:hover,
.sidebar ul li a:focus,
.sidebar ul li.active > a:hover,
.sidebar ul li.active > a:focus { outline: 0; background: #555; color: #fff; }

.sidebar ul li a i { margin-right: 5px; }

.sidebar ul li.active > a, a[aria-expanded="true"] {
	background: #444;
	color: #fff;
}

	.sidebar ul li.active > a.child-dropdown-item, a.child-dropdown-item[aria-expanded="true"] {
		background: none;
		color: #fff;
	}

.sidebar ul ul a { background: #444; padding-left: 30px; font-size: 14px; }

.sidebar ul ul li.active > a { background: #555; }

.sidebar a[data-toggle="collapse"] {
    position: relative;
}

.sidebar .dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

/***** Dark overlay *****/

.overlay {
    display: none; position: fixed; width: 100vw; height: 100vh; 
    background: rgba(51, 51, 51, 0.7); z-index: 998; opacity: 0; transition: all .5s ease-in-out;
}

.overlay.active { display: block; opacity: 1; }


/***** Content *****/

.open-menu {z-index: 997; box-shadow: 3px 3px 3px rgba(51, 51, 51, 0.2); }

.open-menu.btn-customized,
.open-menu.btn-customized:hover, 
.open-menu.btn-customized:active, 
.open-menu.btn-customized:focus, 
.open-menu.btn-customized:active:focus, 
.open-menu.btn-customized.active:focus,
.open-menu.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active,
.open-menu.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	box-shadow: 3px 3px 3px rgba(51, 51, 51, 0.2);
}


/***** General style, all sections *****/

.section-container { margin: 0 auto; padding-bottom: 80px; }

.section-container-gray-bg { background: #f8f8f8; }

.section-container-image-bg, 
.section-container-image-bg h2, 
.section-container-image-bg h3 { color: #fff; }

.section-container-image-bg .divider-1 span { border-color: #fff; border-color: rgba(255, 255, 255, 0.8); }

.section-description { margin-top: 60px; padding-bottom: 10px; }

.section-description p { margin-top: 20px; padding: 0 120px; }
.section-container-image-bg .section-description p { opacity: 0.8; }

.section-bottom-button { padding-top: 20px; }


/***** Divider *****/

.divider-1 span { display: inline-block; width: 200px; border-bottom: 1px dotted #aaa; }

/***** Footer *****/

footer { padding: 40px 0; }