base.css

/*
 * Web basic style
 */

*{
	margin: 0;
	padding: 0;
	border: none;
	box-sizing: border-box;
}

body{
	background: transparent;
}

a{
	color: #000;
	text-decoration: none;
}

a:hover{
	color: #414141;
}

a:visited{
	color: #323233;
}

body p{
	padding: 3px;
}

.header .footer{
	width: 100%;
	display: table-row;
}

.footer{
	margin-bottom: 1.666%;
}

.container{
	margin: 0;
	width: 100%;
	height: auto;
}

.content{
	width: auto;
	margin: 0 auto;
}

/* Alerts box */
.alert-box{
	display: block;
	position: relative;
	width: 100%;
	padding: 15px;
	border-radius: 5px;
}

.alert-box .close{
	background: transparent;
	display: block;
	color: #FFF;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
	margin: 5px;
}
.alert-box .close .oi{
	color: #FFF;
}

.alert-box .iconic-sprite{
	width: 14px;
	height: 14px;
	background: #FFF;
	border-radius: 50px;
}

.alert-box.type-success{
	background: #226622;
	color: #FFF;
}

.alert-box.type-warning{
	background: rgb(222, 103, 0, 0.7);
}

.alert-box.type-danger{
	background: #AA1111;
	color: #fff;
}

.alert-box.type-success .text,
.alert-box.type-warning .text,
.alert-box.type-danger .text{
	background: rgb();
	color: #FFF;
}

/* Rows and columns */

.row{
	height: auto;
}

.row:after{
	content: '';
	display: table;
	clear: both;
}

.row .col{
	width: auto;
	display: block;
	float: left;
}

.row [class*="col-"]{
	float:left;
	display: block;
}

/* Columns */
.col-1{
	width: 8.333333333333333%;
}

.col-2{
	width: 16.66666666666667%;
}

.col-3{
	width: 25%;
}

.col-4{
	width: 33.33333333333333%;
}

.col-5{
	width: 41.66666666666667%;
}

.col-6{
	width: 50%;
}

.col-7{
	width: 58.33333333333333%;
}

.col-8{
	width: 66.66666666666667%;
}

.col-9{
	width: 75%;
}

.col-10{
	width: 83.33333333333333%;
}

.col-11{
	width: 91.66666666666667%;
}

.col-12{
	width: 100%;
}

/* Sections */
.col:after{
	content: "";
	clear: both;
	display: table;
}

.col [class*="sec-"]{
	float:left;
	display: block;
}

.sec-1{
	width: 10%;
}

.sec-2{
	width: 20%;
}

.sec-3{
	width: 30%;
}

.sec-4{
	width: 40%;
}

.sec-5{
	width: 50%;
}

.sec-6{
	width: 60%;
}

.sec-7{
	width: 70%;
}

.sec-8{
	width: 80%;
}

.sec-9{
	width: 90%;
}

.sec-10{
	width: 100%;
}

/* Navigation bar */
.navbar{ /* fill all elements in section */
	display: flex;
	flex-wrap: nowrap;
}

.navbar [class*="nav-"]{
	line-height: inherit;
}

.navbar .nav-brand{
	width: auto; /* align left */
}

.navbar .nav-side{
	clear: both;
	display: inline-flex;
	margin: auto; /* align columns */
}

.navbar .nav-side:first-child{
	margin-left: 1px;
}

.navbar .nav-side:last-child{
	margin-right: 0px;
}

.navbar .hide{
    visibility: hidden;
}

.list{
	list-style: none;
	list-style-type: none;
	margin: 0;
}

.list li{
	list-style-type: none;
	display: block;
}

/* Simple menu style */

.menu{
	list-style: none;
	position: relative;
}

.menu li{
	list-style-type: none;
	float: left;
	display: block;
}

.menu li a{
	display: block;
}

/* Images resize */

img, video, object, embed{
	width: 100%;
	height: auto;
	vertical-align: middle;
	border: none;
}

/* Default form style */

.form{
	padding: 10px;
	position: inherit;
}

.form fieldset{
	border: 1px solid #AAA;
}

.form input, 
.form textarea,
.form select,
.input-attach{
	padding: 10px;
	border-radius: 3px;
	background-color: #F7F7F7;
	border-top: 1px solid #A9A9A9;
	border-left: 1px solid #A9A9A9;
	border-right: 1px solid #AEAEAE;
	border-bottom: 1px solid #AFAFAF;
	color: #737373;
}

.form textarea[class*="d-s"]{
	overflow: auto;
	resize: vertical;
}

.form button[class*="btn-"]{
	padding: 10px;
	border-radius: 4px;
	cursor: pointer;
}

.form button:disabled{
	cursor:default !important;
}

.form input[type="radio"]{
	margin: 2px;
}

.form input[type="checkbox"]{
	margin: 2px;
}

.form input[type="button"].btn-basic,
.form button.btn-basic{
	background-color: #929292;
	border-top: 1px solid #E9E9E9;
	border-left: 1px solid #E9E9E9;
	border-right: 1px solid #EEEEEE;
	border-bottom: 1px solid #EFEFEF;
	color: #FEFEFE;
	cursor: pointer;
}

.form input.in-valid{
	border: 1px solid #00F;
}

.form legend{
	line-height: 30px;
}

.form fieldset{
	position: relative;
	padding: 2.9999999%;
	border-color: #F3F4F4;
	border-radius: 2px;
	background: #F3F4F4;
}

.form .invalid{
	border: 1px solid #F00!important;
	box-shadow: 0px 0px 3px #F00;
}

.field-area{
	display: inline-flex;
}

.form .full{
	display: block;
	width: 100%;
}

.form .spacing-05{
	margin: 0.55555%;
}

/* Custom fields from form */
.field-group{
	padding: 15px;
	position: relative;
	line-height: 20px;
}

.field-group::after{
	content: "";
	clear: both;
	display: table;
}

.field-group label,
.field-group input{
	padding: 10px;
}

.field-group label.append-right{
	text-align: initial;
}

.field-group, .btn-group{
	position: relative;
	padding: 8px 1%;
}

.field-group .input-group{
	position: relative;
	display: block;
	line-height: inherit;
}

.field-group .input-group:not(:first-child){
	border-left: none;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.field-group .input-group:not(:last-child){
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.field-group .input-attach:first-child{
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.field-group .input-attach:last-child{
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.field-group button.input-attach{
	border: 1px solid #A9A9A9;
	cursor: pointer;
}

.field-group button.input-attach:first-child{
	margin-right: -1px;
}

.field-group button.input-attach:last-child{
	margin-left: -1px;
}

.field-group .input-group:first-child{
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.field-group .input-group:last-child{
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.field-group .form-area{
	padding: 5px;
}

.field-group [class*="sec-"]{
	float: left;
	box-sizing: border-box;
}

.field-group [class*="sec-"]::after{
	content: '';
	display: block;
	clear: both;
}

.offset-1{
	margin-left: 10%;
}

.offset-2{
	margin-left: 25%;
}

.offset-3{
	margin-left: 37.5%;
}

.offset-4{
	margin-left: 50%;
}

.offset-5{
	margin-left: 62.5%;
}

.offset-o6{
	margin-left: 75.0000002%;
}

.offset-o7{
	margin-left: 87.5000002%;
}

.offset-o8{
	margin-left: 100%;
}

/* spacing style */
.m-1{
	margin: 10px;
}

.m-2{
	margin: 20px;
}

.m-3{
	margin: 30px;
}

.m-4{
	margin: 40px;
}

.m-5{
	margin: 50px;
}

.m-6{
	margin: 60px;
}

.m-7{
	margin: 70px;
}

.m-8{
	margin: 80px;
}

.m-9{
	margin: 90px;
}

.m-10{
	margin: 100px;
}

/* column groups */
.col-group{
	width: 100%;
}

.col-group [class*="sec-"]{
	display: block;
}

.width-750{
	max-width: 750px;
	margin: 0 auto;
}

/* General buttons */
.btn-default{
	background: #A9A9A9;
}

/* Header buttons */
.btn-top{
	padding: 5px 10px;
	border-radius: 3px;
}

/* Custom color button */
.btn-red{
	background-color: #da2614 !important;
}

.btn-green{
	background-color: #599500 !important;
}

/* Hidden fields */

.none{
	display: none;
}

.field-hidden{
	display: none;
}

/* Table */
.table{
	width: 98%;
	margin: 1%;
}

.table td{
	padding: 10px;
}

.table thead{
	background: #F5F5F5;
	border-top: 10px solid #F00;
	line-height: 40px;
}

.v-overflow{
	overflow-x: auto;
}

.h-overflow{
	overflow-y: auto;
}

/* List group */
.list-group{
	width: 100%;
}

.list-group .list-group-item{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding: 0px;
}

.list-group .list-group-item:first-child{
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

.list-group .list-group-item:last-child{
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

.list-group-divided .list-group-item{
	border-radius: 6px;
}

.list-group .list-group-item:after,
.list-group .list-group-item-header:after,
.list-group .list-group-item-content:after,
.list-group .list-group-item-bottom:after{
	content: '';
	display: table;
	clear: both;
}

.list-group .list-group-item-header{
	background: #EAEAEA;
	padding: 15px 20px;
}

.list-group .list-group-item-content{
	background: #FEFEFE;
	padding: 15px 20px;
}

/* Collapse styles */

.collapse-item .collapse-item-header{
	border-top: 1px solid #DFDFDF;
}

.collapse-item .collapse-item-content[data-hidden='1']{
	display: none;
}

/* Align blocks */

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

.text-left{
	text-align: left;
}

.text-right{
	text-align: right;
}

.text-center{
	text-align: center;
}

/* navbar togge */
.btn-toggle{
	display: none;
}
.toggle-close{
	display: none;
}

/* Modal style */
.modal-background{
	top: 0;
	left: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	display: all;
	z-index:9999em;
	overflow-y: auto;
}

.modal-background .modal-container{
	position: static;
	margin-left: auto;
	margin-right: auto;
	background: transparent;
	width: 99.5555%;
}

.modal-background .modal-container .modal-content{
	position: relative;
}

.modal-background .modal-container .modal-content .modal-content-header{
	margin-bottom: 5px;
}

.modal-background .modal-close{
	top: 0px;
	right: 0px;
	margin: 8px 8px;
	position: absolute;
	background: #414141;
	color: #FFF;
	border-radius: 100%;
	display: block;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.modal-background .modal-close .oi{
	color:#FFF;
}

.modal-background .btn-modal{
	display: block;
	padding: 10px;
	background: #414141;
	color: #F9F9F9;
	cursor: pointer;
	border-radius: 4px;
}

.modal-background .btn-modal[disabled]{
	background: #9A9A9A;
	color: #F9F9F9;
	cursor: inherit;
}

.modal-background .modal-waiting{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.modal-background .modal-loading-icon{
	margin-left: auto;
	margin-right: auto;
	margin-top: 40%;
	display: block;
	width: 80px;
	height: 80px;
	border: 10px solid #FFF;
	border-top: 10px solid #232321;
	border-bottom: 10px solid #232321;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

[data-noscroll='1']{
	height: 100% !important;
	overflow-x: hidden;
	overflow-y: hidden;
}

.content-top{
	margin-top: 60px;
}

/* Areas align style */
.center{
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.fix.center{
	text-align: center;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

hr{
	background-color: rgb(210, 210, 210);
	height: 1px;
}

/* Pages custom styles */
.page-title{
	line-height: inherit;
	padding-top: 20px;
	padding-bottom: 20px;
}

.page-body{
	margin: 0px;
	padding: 10px 20px 20px 20px;
}

/* Slideshow style */
.slide-container{
	background: transparent;
	display: block;
	width: 100%;
	height: auto;
}

.slide-container .slide-content{
	height: auto;
	margin: 0;
	padding: 0;
}

.slide-loading{
	background: url(../images/Eclipse-1s-200px.svg) no-repeat center;
}

/* Simplest box*/
.content-top{
	margin-top: 10px;
	padding-top: 10px;
}

.box-fill{
	padding: 10px 15px;
}

.box{
	margin: 10px 15px;
}

.box .box-title{
	line-height: 40px;
}

.box .box-text{
	margin: 0px;
	padding: 5px;
}

/* tables style */
.table-play{
	background: #EAEAEA;
	padding: 15px;
}

.table-list{
	padding: 5px;
}

/*
 * Devices screen sizes
 */

/* Desktops */
@media (min-width: 1281px){

}

/* Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px){

}

/* Tablets, Ipads (portrait) */

@media (min-width: 768px) and (max-width: 1024px){
	
}

/* Tablets, Ipads (landscape) */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
	
}

/* Low Resolution Tablets, Mobiles (Landscape) */

@media (min-width: 481px) and (max-width: 767px){

	.field-area{
		display: inherit;
	}

	[class*=a-]{
		width: 100%;
	}

	/* navigation menu */
	.nav-side .hide{
		display: block;
	}

	/* toggle button */
	.btn-toggle{
		display: inline-block;
	}
	.navbar-toggle{
		display: none;
	}
	.toggle-close{
		display: inline-block;
	}
	.visible{
		position: absolute;
		display: block;
		background: #d8d9d6;
		width: 100%!important;
		left: 0;
	}

}

/* Most of the Smartphones Mobiles (Portrait) */
@media (min-width: 320px) and (max-width: 480px){

	/* align column rows */
	.row [class*=col-]{
		width: 100%;
	}

	.field-area{
		display: inherit;
	}

	[class*=a-]{
		width: 100%;
	}

	/* toggle button */
	.btn-toggle{
		display: inline-block;
	}
	.navbar-toggle{
		display: none;
	}
	.toggle-close{
		display: inline-block;
	}
	.visible{
		position: absolute;
		display: block;
		left: 0;
	}

}