html {
height: 100%;
width: 100%;
background-color: #ffffff;
}
body {
height: 100%;
width: 96%;
margin-left: 2%!important;
background-position: center!important;
background-image: url("../images/roughcloth.png")!important;
background-repeat: repeat!important;
}
@media all and (min-width: 960px) { body{ font-size: 18px; } }
@media all and (max-width: 959px) and (min-width: 320px) { body{ font-size: 16px; } }
/*----------------nav--------*/
.main_h { position: fixed; max-height: 55px; z-index: 999; width: 100%; padding-top: 10px; background: none; overflow: hidden; transition: all 0.3s; opacity: 0; top: -100px; padding-bottom: 3px; font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; box-shadow: 0px 2px 22px #8f8f8f; }
@media only screen and (max-width: 766px) { .logo { float: none; margin-top: 0; margin-left: 1em; } .main_h { padding-top: 10px; } } .open-nav { max-height: 400px !important; } .open-nav .mobile-toggle { transform: rotate(-90deg); } .sticky { background-color: rgba(255, 255, 255, 0.93); opacity: 1; top: 0px; border-bottom: 1px solid gainsboro; } .row logo { float: left; display: block; margin: 0 10px 0 1em !important; } .row img { max-height: 2em; }
@media only screen and (max-width: 766px) { .logo { float: none; margin-top: 0; margin-left: 1em; } } nav { float: right; width: 90%; }
@media only screen and (max-width: 766px) { nav { width: 100%; } } nav ul { list-style: none; overflow: hidden; text-align: right; float: right; }
@media only screen and (max-width: 766px) { .logo { float: none; margin-top: 0; margin-left: 1em; } nav ul { padding-top: 10px; margin-bottom: 22px; float: left; text-align: center; width: 100%; } } nav ul li { display: inline-block; margin-left: 15px; line-height: 1.5; font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size: .85em; font-weight: 600; }
@media only screen and (max-width: 766px) { .logo { float: none; margin-top: 0; margin-left: 1em; } nav ul li { width: 100%; padding: 7px 0; margin: 0; } } nav ul a:hover { color: #821024!important; text-transform: none; font-size: 1em; } .mobile-toggle { display: none; cursor: pointer; font-size: 20px; position: absolute; right: 22px; top: 0; width: 30px; transition: all 200ms ease-in; }
@media only screen and (max-width: 766px) {.logo { float: none; margin-top: 0; margin-left: 1em; } .mobile-toggle { display: block; } }
.mobile-toggle span { width: 30px; height: 4px; margin-bottom: 6px; border-radius: 1000px; background: #8f8f8f; display: block; }
.row { width: 100%; max-width: 940px; margin: 0 auto; position: relative; padding: 0 2%; }
* { box-sizing: border-box; }
.container-fluid {
margin: 0 2em;
background-position: center!important;
background-image: url("../images/roughcloth.png")!important;
background-repeat: repeat!important;
}
/*---------home-----------*/
.home{
height: 100%;
display: flex;
flex-flow: column wrap;
justify-content: space-around;
align-items: center;
/* align-content: space-around; */
/* background-position: center!important; */
background-image: url("../images/roughcloth.png")!important;
background-repeat: repeat!important;
}
.static {
margin-top: -5em!important;
}
.image {
padding-bottom: 10em;
}
nav.static ul { list-style: none; overflow: hidden; text-align: right; display: inline-block!important; float: right; } .static p{ text-align: center; margin-bottom: 3em; font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size: .85em; font-weight: 600; } .static a:hover { color: #821024!important; } @-webkit-keyframes scroll { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } @keyframes scroll { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } .image img { max-width: 100%; height:auto; } div.tag{ margin: 5% 0 1% 0; } ul.tag{ text-align: center; font-family: 'Lato', sans-serif; font-style: italic; font-size: 1.2em; color: #821024; display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; } ul.homepage{ text-align: center; font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size: .85em; display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; } ul.homepage li { display: inline-block!important; margin-left: 25px; margin-bottom: 5px; } /*----NEW-------*/
.why {
height: 100%;
background-color: rgba(248, 247, 216, 0.4);
padding: 3% 2% 3% 2%;
border-bottom: 2px solid #336699;
border-top: 2px solid #821024;
}
h1 { font-size: 2em; line-height: 1.8; text-transform: uppercase; font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif!important; color: #666666; font-style: normal; font-weight: 600!important; text-align: left; letter-spacing: 6px; text-decoration: none; margin-bottom: 1em!important; }
h2 { font-size: 1.5em; line-height: 1.6; font-weight: 400!important; font-family: 'Lato', sans-serif; margin-bottom: 1em!important; }
p.opening { font-family:'Lato', sans-serif; font-size: 1.3em; font-weight: 300; margin-bottom: 1em; line-height: 1.3em; }
h1.thanks{
font-family: Cinzel!important;
font-size: 2em;
font-weight:700;
color: #801818!important;
text-align: center;
padding-top: 1em;
}
p.ending {
font-family:'Lato', sans-serif;
font-size: 1.3em;
font-weight: 300;
line-height: 1.3em;
}
div.vision { margin-bottom: 1em; } h2.vision { font-family:'Lato', sans-serif; color: #812024!important; font-size: 1.5em; font-weight: 500; text-align:center; }
.statements {
display: flex;
flex-flow: row-wrap;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
align-items: center;
}
.mission1 { color: #556b2f; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 700; background-color: #f5a81c; border-radius: 50%; line-height: normal; position: relative; width: 165px; height: 165px; text-align: center; margin-left: 2.5em; margin-bottom: 2em; padding: 50px 8px 30px 8px; display: inline-block; text-shadow: 1px 1px 4px #aaaaaa; }
.mission2 { color: #336699; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 700; background-color: #fc6003; border-radius: 50%; line-height: normal; position: relative; width: 165px; height: 165px; text-align: center; margin-left: 2.5em; margin-bottom: 2em; padding: 50px 8px 30px 8px; display: inline-block; }
.mission3 { color: #fc6003; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 700; background-color: #336699; border-radius: 50%; line-height: normal; position: relative; width: 165px; height: 165px; text-align: center; margin-left: 2.5em; margin-bottom: 2em; padding: 50px 8px 30px 8px; display: inline-block; }
.mission4 { color: #f5a81c; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 700; background-color: #556b2f; border-radius: 50%; line-height: normal; position: relative; width: 165px; height: 165px; text-align: center; margin-left: 2.5em; margin-bottom: 2em; padding: 50px 8px 30px 8px; display: inline-block; }
.mission1::first-line { font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; }
.mission2::first-line { font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; }
.mission3::first-line { font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; }
.mission4::first-line { font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; } @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in { opacity:0; /* make things invisible upon start */ animation:fadeIn ease-in 1; animation-fill-mode:forwards; animation-duration:2s; }
.fade-in.one { animation-delay: 0.7s; }
.fade-in.two { animation-delay: 2s; }
.fade-in.three { animation-delay: 3s; }
.fade-in.four { animation-delay: 4s; }
/*------EDIT------*/
/* .edit { */
/* min-height: 550px; */
/* background-color: rgba(250, 239, 232, 0.4)!important; */
/* padding: 3% 2% 3% 2%; */
/* border-bottom: 2px solid #556b2f; */
/* } */
/* .blue { color: #336699; } .container1 { padding:0; margin:0; display: flex; flex-flow: row wrap; justify-content: space-around; align-content: space-around; align-items: center; } .size { text-align: left; font-family: 'Lato', sans-serif; font-size: 1em; font-weight: 400; max-width: 300px; order: 1; line-height: 1.75em; flex-grow:1; padding:.5em .5em 0 .5em; } .num { font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size: 4em; color: #c1d1e0; font-weight: 100; float: left; padding: 20px 0 0 0; } .more { font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size: .85em; color: #336699; font-weight: 600; } .more:hover { color: #821024; } .norm { text-align: left; font-family: 'Lato', sans-serif; font-size: 1.1em; font-weight: 400; line-height: 1.75em; } .note { font-size: .75em; font-style: italic; letter-spacing: .075em; } */
/*--popup--*/
/* .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { visibility: visible; opacity: 1; } .popup { margin: 5em auto; padding: 20px; background: #fff; border-radius: 5px; width: 50%; position: relative; transition: all 10s ease-in-out; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: #821024; } .popup .content { font-family: 'Lato', sans-serif; color: #000000; line-height: 1.25em; font-size: .85em; } li.pu { margin-left: 2em; text-indent: -1.5em; line-height: 1.5em; list-style-position: inside; list-style-type: circle!important; } */
/*--------INDEX------*/
section.index {
min-height: 550px;
background-color: rgba(255, 249, 234, 0.4)!important;
padding: 3% 25% 2% 2%;
border-bottom: 2px solid #ffcc33;
color: #556b2f;
}
.movie {
float:left;
object-fit: fill;
padding-right: 50px;
}
.movie2 {
float:right;
object-fit: fill;
padding-left: 50px;
margin-right: 20%;
transform: rotate(180deg);
}
.norm { text-align: left; font-family: 'Lato', sans-serif; font-size: 1.1em; font-weight: 400; line-height: 1.75em;}
.container2 { padd;ing:0; margin-top:-1em; display: flex; flex-flow: row wrap; justify-content:space-between; align-items: stretch; align-content: space-between; list-style-type: none; list-style-position: outside; } .index1 { color: #556b2f; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 400; line-height: normal; text-align:left; padding: 20px 8px 0px 20px; flex-grow:1; box-sizing:border-box; width: 220px; list-style-type: none; list-style-position: inside; } .index2 { color: #556b2f; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 400; line-height: normal; text-align:left; padding: 20px 8px 3px 20px; box-sizing:border-box; width: 220px; flex-grow:1; list-style-type: none; list-style-position: outside; } .index3 { color: #556b2f; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 400; line-height: normal; text-align:left; padding: 20px 8px 0px 20px; box-sizing:border-box; width: 220px; flex-grow:1; list-style-type: none; list-style-position: outside; } .index4 { color: #556b2f; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 400; line-height: normal; text-align:left; padding: 20px 8px 20px 20px; box-sizing:border-box; width: 220px; flex-grow:1; list-style-type: none; list-style-position: outside; } .link a { font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size: .85em; color: #556b2f!important; font-weight: 600; } .link a:hover { color: #821024!important; }
/*--------PRODUCTION------*/
.prod {
min-height: 550px;
background-color: rgba(251,252,253, 0.6)!important;
padding: 3% 2% 3% 2%;
border-bottom: 2px solid #666666;
}
span.rust { color:#FC6003 }
span.orange { color:#f5a81c }
span.yellow { color: #ffcc33 }
span.white { color: #ffffff; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 1em; }
.container3 {
padding:0;
margin:0;
display: flex;
flex-flow: row-wrap;
flex-wrap: wrap;
justify-content:space-between;
align-items: stretch;
align-content: space-between;
}
.landd1 { color: #336699; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 400; position: relative; line-height: normal; text-align: left; padding: 10px 15px 30px 15px; background-color: #f5a81c; width: 200px; height: auto; flex-grow:1; flex-basis: 32%; border: .5em solid #FBFCFD; box-sizing:border-box; } .land { color: #000000; margin-left: 1.5em; text-indent: -1.5em; line-height: 1.3em; list-style-position: inside; margin-bottom: 1em; } .landd2 { color: #000000; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 400; line-height: normal; position: relative; text-align:left; padding: 10px 15px 30px 15px; background-color: #ffcc33; width: 200px; height: auto; flex-grow:1; flex-basis: 32%; border: .5em solid #FBFCFD; box-sizing:border-box; } .landd3 { color: #000000; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 400; line-height: normal; position: relative; text-align:left; padding: 10px 15px 30px 15px; background-color: #fc6003; width: 200px; height: auto; flex-grow:1; flex-basis: 32%; border: .5em solid #FBFCFD; box-sizing:border-box; } .whiteH2 { color: #336699; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 1.3em; }
ul.whiteD {
list-style-type:none;
}
ul.whiteD li::before{
content: "\2022";
color: #336699;
}
/*------CORPORATE------*/
.corp {
min-height: 550px;
background-color: rgba(238, 240, 234, 0.6)!important;
padding: 3% 2% 3% 2%;
border-bottom: 2px solid #336699;
}
.container4 {
padding:0;
margin:0;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:center;
align-items: stretch;
align-content: space-between;
}
.bus1 { color: #000000; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 400; line-height: normal; text-align:left; padding: 10px 10px 15px 15px; position: relative; border-width: 0px 1px 0px 1px ; border-style: solid; border-color: #000000; border-collapse: collapse; width:210px; height: auto; flex-grow:1; } .bus2 { color: #000000; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 400; line-height: normal; text-align:left; padding: 10px 15px 15px 15px; position: relative; border-width: 0 1px 0 0 ; border-style: solid; border-color: #000000; border-collapse: collapse; width:210px; flex-grow:1; } .bus3 { color: #000000; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 400; line-height: normal; text-align:left; padding: 10px 15px 15px 15px; position: relative; border-width: 0 1px 0 0 ; border-style: solid; border-color: #000000; border-collapse: collapse; width:210px; height: auto; flex-grow:1; } .bus1::first-line { font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size: 1.5em; } .bus2::first-line { font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size: 1.5em; } .bus3::first-line { font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size: 1.5em; }
@media only screen and (min-width: 120px) and (max-width: 479px){
.bus3 { border-width: 1px 0 0 0 ; }
.bus2 { border-width: 1px 0 0 0 ; }
.bus1 { border-width: 1px 0 0 0 ; } }
@media only screen and (min-width: 480px) and (max-width: 703px){
.bus3 { border-width: 1px 0 0 0 ; }
.bus2 { border-width: 0 0 0 0 ; }
.bus1 { border-width: 0 1px 0 0 ; } }
@media only screen and (min-width: 704px) and (max-width: 920px){
.bus3 { border-width: 0 0 0 0 ; }
.bus2 { border-width: 0 1px 0 0 ; }
.bus1 { border-width: 0 1px 0 0 ; } }
/*------PROJECT ADMIN------*/
.projAdmin {
min-height: 550px;
background-color: rgba(250, 239, 232, 0.4)!important;
padding: 3% 2% 3% 2%;
border-bottom: 2px solid #336699;
}
h1.prjA {
color:#336699;
}
.blue {
color: #336699;
}
.container5 {
padding:0;
margin:0;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:center;
align-items: stretch;
align-content: space-between;
}
li.prjA1 { color: #000000; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 400; line-height: normal; text-align:left; padding: 10px 10px 15px 15px; position: relative; border-width: 0px 1px 0px 1px ; border-style: solid; border-color: #ffcc33; border-collapse: collapse; width:210px; height: auto; flex-grow:1; } .prjA2 { color: #000000; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 400; line-height: normal; text-align:left; padding: 10px 15px 15px 15px; position: relative; border-width: 0 1px 0 0 ; border-style: solid; border-color: #ffcc33; border-collapse: collapse; width:210px; flex-grow:1; } .prjA3 { color: #000000; font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 400; line-height: normal; text-align:left; padding: 10px 15px 15px 15px; position: relative; border-width: 0 1px 0 0 ; border-style: solid; border-color: #ffcc33; border-collapse: collapse; width:210px; height: auto; flex-grow:1; } .prjA1::first-line { font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size: 1.5em; } .prjA2::first-line { font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size: 1.5em; } .prjA3::first-line { font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size: 1.5em; }
@media only screen and (min-width: 120px) and (max-width: 479px){
.prjA3 { border-width: 1px 0 0 0 ; }
.prjA2 { border-width: 1px 0 0 0 ; }
.prjA1 { border-width: 1px 0 0 0 ; } }
@media only screen and (min-width: 480px) and (max-width: 703px){
.prjA3 { border-width: 1px 0 0 0 ; }
.prjA2 { border-width: 0 0 0 0 ; }
.prjA1 { border-width: 0 1px 0 0 ; } }
@media only screen and (min-width: 704px) and (max-width: 920px){
.prjA3 { border-width: 0 0 0 0 ; }
.prjA2 { border-width: 0 1px 0 0 ; }
.prjA1 { border-width: 0 1px 0 0 ; } } /*--------------misc----------------*/ * { box-sizing: border-box; } a{ text-decoration:none!important; color: black!important; }
.smaller {
font-size: .75em!important;
text-align: center!important;
font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
color: 000;
font-weight: bold;
margin-top: 5em!important;
}
p, ul{ margin-bottom: 20px; font-size: 1em; line-height: 1.75; font-family: 'Lato', sans-serif; } span.red { color: #821024; } .serif { font-family:'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; } div.runHead { width:90%; padding:0; padding-top:1em; display: flex; flex-wrap:wrap; flex-direction: row; justify-content:space-around; align-items: center; align-content: space-around; vertical-align: top; text-align: center; } p.thankyou { font-family:'Lato', sans-serif; color: #812024; font-size: 1em; font-weight: 300; line-height: 1.2em; }
@media only screen and (min-width: 120px) and (max-width: 320px){ p.thankyou { font-size: .85em; } }
.spaceAbove { margin-top:4em; margin-left: auto; margin-right:auto!important; } .spaceBelow { margin-bottom:4em; } p.thankyou2 { font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 400; line-height: normal; width: 80%; margin-right: auto; margin-left: auto; margin-bottom: 2em; text-align: center; background-color: white; border: 2px solid white; border-radius: 20px; } .white { width: 80%; margin: auto; padding: 5px 10px 20px 10px; text-align: center; background-color: white; border: 2px solid white; border-radius: 50px; box-shadow: inset 0px 0px 30px 30px #eeeeee; }
.quote {
font-family: 'Lato', sans-serif;
font-weight: 400;
width: 80%;
margin-right: auto;
margin-left: auto;
margin-top: 3em;
text-align: center;
}
.quote2 {
font-family:'Lato', sans-serif;
color: #812024;
font-size: .85em;
font-style: italic;
font-weight: 300;
line-height: 1.3em;
width: 80%;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
}
.quote3 {
text-align: right;
font-size: .75em;
font-family:'Lato', sans-serif;
margin-right: 10%;
margin-top: 0;
}
button{
font-family: 'Lato', sans-serif;
font-size: 100%;
font-style: italic;
font-weight: bold;
cursor: pointer;
outline: none;
width: 10%;
float: right;
padding: 0px 10px 2px 6px!important;
border: 3px solid #821024;
border-radius: 7px;
background-color:#821024;
height: 2.2em;
color: #ffffff;
margin:1em 1em 0 0!important;
}
button:hover {
background-color:green;
border: 3px solid green;
}
button:focus {
background-color:green;
border: 3px solid green;
}
@media screen and (max-width: 777px)
and (min-width: 180px){
h1 {
font-size: 1.8em!important;
font-weight: 900;
text-align: center;
}
h2 {
font-size:1.3em!important;
}
.mission1{
margin-left: 0;
}
.mission2{
margin-left: 0;
}
.mission3{
margin-left: 0;
}
.mission4{
margin-left: 0;
}
p.opening {
text-align: center;
}
p.ending {
text-align: center;
}
button{
width: 50%;
margin-bottom: 1em!important;
}
}