/* ===========================================================
 * Filename: style.css
 * Version: 0.3
 * Author: web360
 * =========================================================== */

/* DEFAULT */
html { min-height: 100%;}
body { font-style: OpenSans, sans-serif; font-size: 10px; }

/* ALIGMENT SYSTEM */

.floatLeft { float: left;}
.floatRight { float: right;}
.alignLeft { text-align: left;}
.alignRight { text-align: right;}
.alignCenter { text-align: center;}
.alignJustify { text-align: justify;}
.clearLeft { clear: left;}
.clearRight { clear: right;}
.clear { clear: both;}

/* HEIGHT & WIDTH */

.fullHeight { min-height: 100vh; height: auto; }

/* BACKGROUNDS */

/* HEADINGS */
h1,h2,h3,h4,h5,h6 { line-height: 1em;}
h1 { font-size: 5em; }
h2 { font-size: 4.7em; }
h3 { font-size: 4.4em; }
h4 { font-size: 4.1em; }
h5 { font-size: 3.8em; }
h6 { font-size: 3.5em; }

/* PARAGRAPHS */
p { font-size: 2em; line-height: 1.6em; }

.coverBg { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* CONTAINER */

.containerCenter { margin: 0 auto;}
.containerLeft { float: left;}
.containerRight { float: right;}
.container { width: 1000px; position: relative; margin: 0 auto;}
.container10 { width: 10%; position: relative; margin: 0 auto;}
.container20 { width: 20%; position: relative; margin: 0 auto;}
.container30 { width: 30%; position: relative; margin: 0 auto;}
.container40 { width: 40%; position: relative; margin: 0 auto;}
.container50 { width: 50%; position: relative; margin: 0 auto;}
.container60 { width: 60%; position: relative; margin: 0 auto;}
.container70 { width: 70%; position: relative; margin: 0 auto;}
.container80 { width: 80%; position: relative; margin: 0 auto;}
.container90 { width: 90%; position: relative; margin: 0 auto;}
.container100 { width: 100%; position: relative; margin: 0 auto;}
.fullContainer { width: 100%; min-height: 100vh; height: auto; position: relative;  margin: 0 auto;}

/* GRID SYSTEM */

.row { margin: 0% -10px; width: calc(100% + 20px);}
.row::after { clear: both;}

.row > * { float: left; padding: 0 10px;}

.span12 { width: 50%;}

.span13 { width: 33.3333%;}
.span23 { width: 66.6667%;}

.span14 { width: 25%;}
.span24 { width: 50%;}
.span34 { width: 75%;}

.span15 { width: 20%;}
.span25 { width: 40%;}
.span35 { width: 60%;}
.span45 { width: 80%;}

.span16 { width: 16.6666%;}
.span26 { width: 33.3333%;}
.span36 { width: 50%;}
.span46 { width: 66.6666%;}
.span56 { width: 83.3333%;}

.span17 { width: 14.2857%;}
.span27 { width: 28.5714%;}
.span37 { width: 42.8571%;}
.span47 { width: 57.1428%;}
.span57 { width: 71.4285%;}
.span67 { width: 85.7142%;}

.span18 { width: 12.5%;}
.span28 { width: 25%;}
.span38 { width: 37.5%;}
.span48 { width: 50%;}
.span58 { width: 62.5%;}
.span68 { width: 75%;}
.span78 { width: 87.5%;}

.span19 { width: 11.1111%;}
.span29 { width: 22.2222%;}
.span39 { width: 33.3333%;}
.span49 { width: 44.4444%;}
.span59 { width: 55.5555%;}
.span69 { width: 66.6666%;}
.span79 { width: 77.7777%;}
.span89 { width: 88.8888%;}

.span10 { width: 10%;}
.span20 { width: 20%;}
.span30 { width: 30%;}
.span40 { width: 40%;}
.span50 { width: 50%;}
.span60 { width: 60%;}
.span70 { width: 70%;}
.span80 { width: 80%;}
.span90 { width: 90%;}
.span100 { width: 100%;}

/* GRID SYSTEM WITHOUT LEFT-RIGHT MARGIN/PADDING */

.rowWM { margin: 0; width: 100%; float: left;}
.rowWM::after { clear: both;}

.rowWM > * { float: left; padding: 0;}

/* FLAT BACKGROUND COLORS by http://flatuicolors.com*/

.bgColorTurquoise { background-color: #1abc9c;}
.bgColorEmerald { background-color: #2ecc71;}
.bgColorPeterRiver { background-color: #3498db;}
.bgColorAmethyst { background-color: #9b59b6;}
.bgColorWetAsphalt { background-color: #34495e;}
.bgColorGreenSea { background-color: #16a085;}
.bgColorNephritis { background-color: #27ae60;}
.bgColorBelizeHole { background-color: #2980b9;}
.bgColorWisteria { background-color: #8e44ad;}
.bgColorMidnightBlue { background-color: #2c3e50;}
.bgColorSunFlower { background-color: #f1c40f;}
.bgColorCarrot { background-color: #e67e22;}
.bgColorAlizarin { background-color: #e74c3c;}
.bgColorClouds { background-color: #ecf0f1;}
.bgColorConcrete { background-color: #95a5a6;}
.bgColorOrange { background-color: #d35400;}
.bgColorPumpkin { background-color: #1abc9c;}
.bgColorPomegranate { background-color: #c0392b;}
.bgColorSilver { background-color: #bdc3c7;}
.bgColorAsbestos { background-color: #7f8c8d;}
.bgColorWhite{ background-color: #ffffff}
.bgColorBrightGray{ background-color: #333b48}

/*FONT COLORS*/

.fcBrightGray { color: #333b48;}
.fcWhite { color: #ffffff;}

/* NAVIGATION */

.navTable { }
.navBlock > * > * a { display: block;}
.navTable > * { display: table; table-layout: fixed; width: 100%;}
.navTable > * > * { display: table-cell;}
.navTable li { position: relative;}

.navTable ul li > ul { visibility: hidden; height: 0; opacity: 0; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}

.navTable li { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}

.navTable ul li:hover > ul { display: block; visibility: visible; height: auto; opacity: 1; position: absolute; z-index: 99; top: 100%; left: 0; width: 100%;}
.navTable ul li ul li:hover > ul { display: block; visibility: visible; height: auto; opacity: 1; position: absolute; z-index: 99; top: 0; left: 100%; width: 100%;}

/* INPUT */

.input-container { position: relative; font-size: 1.4em; display: inline-block; border-radius: 5px;  font-size: 1.3em; }
.input-container ::-webkit-input-placeholder {color: #AFACAC; } :-moz-placeholder { color: #AFACAC; } ::-moz-placeholder { color: #AFACAC; } :-ms-input-placeholder {color: #AFACAC; }
.input-container label { display: inline-block; padding: 0 10px; border: 0; font-family: OpenSans, sans-serif; color: #fff; transition: .5s all ease-in-out;}
.input-container input { padding: 10px; border: 0; border-radius: 0 5px 5px 0; transition: .5s all ease-in-out;}
.input-container input:focus { background-color: #AFACAC; color: #fff;}
.input-container input:active + label { color: #AFACAC;}

/* TABLE */

.table { display: table; width: 100%;}
.tableFixed { table-layout: fixed}
.tableRow { display: table-row;}
.tableRow:nth-child(even) { background-color: red;}
.tableRow:nth-child(odd) { background-color: green;}
.tableCell { display: table-cell;}