/* ----------------------------------------------------- */
/* --------- Typography: Heading & Body Copy ----------- */
/* ----------------------------------------------------- */
/* These are the font families of all the headings and body copy */
html {
height:100%;
}
body {
font-family: 'Roboto', sans-serif;
text-align: left;
width: 100%;
margin: 0px;
background-color: #8BBBD9;
overflow-x:hidden;
}
header {
background-color: #f2f2f2;
text-align:center;
padding-top: 40px;
}
.mainnav {
color: #f2f2f2;
background-color: #404040;
text-align: center;
padding: 40px 20px 20px 30px;
margin-bottom: 20px;
overflow: hidden;}
.mainnav ul {
margin-top: 40px;
padding: 10px;
}
.mainnav li{
display: inline;
padding: 20px;
color: #f2f2f2;
}
.mainnav a:link{
color: #f2f2f2;
text-decoration: none;
text-transform: uppercase;
font-weight: 30;
font-size:large;}
.mainnav a:hover{
color: #8BBBD9;
border-bottom: 5px solid #8BBBD9;}
.mainnav a:visited{
color: #8BBBD9;}
.mainnav a:active{
color: #F2F2F2;
border-bottom: 5px solid #F2F2F2;}
.logo
{
float: both;
}
.main
{
margin-right: 80px;
margin-left: 80px;
margin-top: -80px;
margin-bottom: 60px;
text-align: center;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Cinzel', serif;
color: #095ACC;
text-align: center;
}
.home {
display: block;
width: 100%;
height: auto;
background-color: #f2f2f2;
margin-bottom: 150px;
}
.homeimg
{
align-content: center;
margin-top: -60px;
margin-left: -10px;
margin-bottom: 20px;
box-shadow: 0px 4px 4px #1c1a10;
}
figcaption
{
color: #404040;
letter-spacing: .5px;
}
figure{
text-align: center;
}
p{
color:#404040;
text-align: justify;
letter-spacing: 1px;
font-size: large;
}
.hero
{
font-size: 2em;
text-align: center;
margin: -20px;
padding-bottom: 60px;
}
.footer{
clear: both;
background-color: #404040;
text-align: center;
font-weight: normal;
color: #f2f2f2;
padding: 5px;
}
.footer ul{
margin-top: 40px;
padding: 10px;
}
.footer li{
display: inline;
padding: 20px;
}
.footer a:link{
color: #f2f2f2;
text-decoration: none;
text-transform: uppercase;
font-weight: 30;
font-size:large;
}
.footer a:visited{
color: #8BBBD9;}
.footer a:hover{
color: #8BBBD9;
border-bottom: 5px solid #8BBBD9;}
.footer a:active{
color: #f2f2f2;
border-bottom: 5px solid #f2f2f2;}
/* ----------------------------------------------------- */
/* --------- Style Rules for About Page ----------- */
/* ----------------------------------------------------- */
/* These are the style rules for the body of the about page */
.column-grid-container
{
display: flex;
justify-content: center;
padding: 10px;
flex-wrap: wrap;
}
.column-grid
{
width: 900px;
display: flex;
justify-content: center;
margin-bottom: 280px;
}
.column-grid-item
{
width: 300px;
height: 600px;
border: solid .5em transparent;
}
.first-item {
line-height: 20px;
margin-top: 10px;
margin-left: 100px;
}
.last-item {
line-height: 20px;
margin-top: 60px;
margin-right: 100px;
}
.about1img
{
box-shadow: 0px 4px 4px #1c1a10;
align-content: center;
}
.about2img
{
box-shadow: 0px 4px 4px #1c1a10;
margin-left: -40px;
}
/* ----------------------------------------------------- */
/* --------- Style Rules for Contact Page ----------- */
/* ----------------------------------------------------- */
/* These are the style rules for the body of the contact page */
body{
margin: 0;
padding:0;
text-align: center;
background-position: center;
font-family: 'Roboto', sans-serif;
}
.contact-title
{
margin-top: 100px;
color: #f2f2f2;
text-transform: uppercase;
}
.contact-title h1
{
font-size: 32px;
line-height: 10px;
}
.contact-title h2
{
font-size: 16px;
}
form
{
margin-top: 50px;
}
.form-control
{
width:600px;
background: transparent;
border: none;
outline: none;
border-bottom: 1px solid gray;
color: #404040;
font-size: 18px;
margin-bottom: 16px;
}
input
{
height: 45px;
}
form .submit
{
background: #404040;
border-color: transparent;
color: #f2f2f2;
font-size: 20px;
font-weight: bold;
letter-spacing: 2px;
height: 50px;
margin-top: 20px;
}
.contactimg
{
float: both;
}
.buscontactinfo
{
overflow: auto;
width: 100%;
margin-left: 350px;
margin-bottom: 30px;
}
/* ----------------------------------------------------- */
/* --------- Style Rules for Trends Page ----------- */
/* ----------------------------------------------------- */
/* These are the style rules for the body of the trends page */
#main_wrapper
{
width: 900px;
margin:auto;
box-shadow: 0px 4px 4px #1c1a10;
}
#banner_image
{
margin-top:-20px;
height: 200px;
background: url(images/freddy-marschall-9YuAgukwe2c-unsplash.jpg);
position: relative;
box-shadow: 0px 4px 4px #1c1a10;
margin-bottom: 25px;
}
#banner_description
{
position: absolute;
bottom: 0;
width: 99.5%;
height: 33px;
padding-top: 15px;
padding-left: 4px;
background-color: #404040;
color:white;
font-size: 0.8em;
}
section
{
margin: 20px;
}
.trends1
{
margin: 10px;
}
.trends2
{
text-align: left;
margin: 5px;
}
/* ----------------------------------------------------- */
/* --------- Style Rules for Services Page ----------- */
/* ----------------------------------------------------- */
/* These are the style rules for the body of the services page */
#main_wrapper
{
width: 900px;
margin:auto;
background-color: #f2f2f2;
}
.blue_button
{
height: 25px;
right: 5px;
bottom: 5px;
background-color: #095ACC;
border: 1px solid #095ACC;
border-radius: 5px;
font-size: 1.2em;
text-align: center;
padding: 3px 8px 0px 8px;
color: white;
text-decoration: none;
}
article
{
float:none;
width: 400px;
margin-right:; 20px;
margin-left: 15px;
}
aside
{
float: right;
width: 400px;
background-color: #f2f2f2;
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 10px;
color: #f2f2f2;
font-size: 2em;
text-decoration: none;
margin-right: 8px;
}
.services1
{
text-align: center;
}
.services2
{
text-align: left;
}