@charset "UTF-8";
/* CSS Document */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; outline: none; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
* { outline: none; }
a { text-decoration: none; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

html { font-size: 62.5%; height: auto; -webkit-text-size-adjust: 100%; }
body { min-height: 100%; font-family: 'Open Sans', sans-serif;  position: relative; }
section, footer { width: 100%; }
.inner { width: 100%; max-width: 1280px; padding: 0 15px; margin: 0 auto; }
.pad { padding: 0 30px!important; }

/* Headers */
header { float: left; width: 100%; padding: 0 15px; }
h1, h2, h3 { text-align: left; letter-spacing: 0.2rem; position: relative; text-transform: uppercase;  }
h1 { font-size: 2rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.8rem; }
h2:before {content: "";position: absolute;height: 25px;width: 5px;background: #333;margin-left:-20px;top: -3px;}


/*main*/
.main { height: 100vh; width: 100%; background: url(../img/ccc-web-background-min.jpg) no-repeat; background-size: cover;}
.content {display: flex;flex-direction: column;justify-content: center;align-items: start;height: 100vh;padding: 10%;}
.content img {max-width: 75%;height: auto;}
.content .cm-soon {font-size: 3rem;text-transform: uppercase;font-weight: 600;background: #ffffff;padding: 10px 20px;margin-top: 70px;color: #245f69;}

 

/* Custom */
.tac { text-align: center; }
.fl { float: left; }
.w100 { width: 100%; }
.table { display: table; }
.cell { display: table-cell; }
.pl20 { padding-left: 20px; }
.pr20 { padding-right: 20px; }
.oh { overflow: hidden; }
.br { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; }
.blue {color: #1E74C1!important;}


/* Margins */
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 40px; }
.mt60 { margin-top: 60px; }

/* Transitions */
.tr-a { transition: all .6s ease; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -o-transition: all .6s ease; }

/* Clearfix */
.cf:before,
.cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }


/* Responsive */
*, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
[class*='c-'] { float: left; padding: 0 10px; }
[class*='c-']:last-of-type, .lastc { float: left; }

.c-1 { width: 100%; }
.c-2 { width: 50%; }
.c-3 { width: 33.33%; }
.c-4 { width: 25%; }
.c-5 { width: 20%; }
.c-6 { width: 16.6666666667%; }
.c-7 { width: 14.2857142857%; }
.c-8 { width: 12.5%; }
.c-9 { width: 11.1111111111%; }
.c-10 { width: 10%; }
.c-11 { width: 9.09090909091%; }
.c-12 { width: 8.33%; }

.c-5-2 { width: 40%; }
.c-5-4 { width: 80%; }

.c-20 { width: 20%; }
.c-30 { width: 30%; }
.c-40 { width: 40%; }
.c-45 { width: 45%; }
.c-55 { width: 55%; }
.c-60 { width: 60%; }
.c-70 { width: 70%; }
.c-80 { width: 80%; }


/* 1200px */
@media (max-width: 1200px) {

}

/* 1100px */
@media (max-width: 1100px) {
.c-2, .c-7,  { width: 100%; }
.c-4, .c-8, .c-10, .c-12 { width: 50%; }

}


/* 960px */
@media (max-width: 960px) {

} 


/* 800px */
@media (max-width: 800px) {
.c-4, .c-6, .c-8, .c-10, .c-12 { width: 50%; }
.c-1, .c-2, .c-3, .c-5, .c-7, .c-9, .c-11, .c-40, .c-60 { width: 100%; }
}

/* 600px */
@media (max-width: 680px) {
h1 { font-size: 1.8rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }

.content { padding: 0 5%;}
.content img { max-width: 80%;}
.content .cm-soon { font-size: 2rem; margin-top: 30px;}
}


/* 480px */
@media (max-width: 480px) {
.c-1, .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-10, .c-11, .c-12, footer ul li.c-4 { width: 100%; }
}