body, html{
font-family: 'Roboto', sans-serif;
font-size: 100%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1{
font-family: 'Roboto Slab', serif;
font-size: 4em;
}
h2{
font-family: 'Roboto Slab', serif;
font-size: 2.5em;
}
h3{
font-family: 'Roboto', sans-serif;
font-size: 1.75em;
}
h4{
font-family: 'Roboto', sans-serif;
font-size: 1.5em;
font-weight: 900;
line-height: 1.4;
padding-top: 0.25em;
}
p{
font-family: 'Roboto', sans-serif;
font-size: 1.25em;
line-height: 1.5;
}
a.button {
display: inline-block;
position: relative;
font-weight: 600;
width: 120px;
padding: 0;
margin: 1em;
text-align: center;
line-height: 50px;
color: #FFF;
border-radius: 0.25em;
transition: all 0.2s ;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.btnTransparent {
border: 4px solid white;
background: none;
}
.btnTransparent:hover{
background: white;
color: #f00f2f;
font-weight: 600;
}
/*--------------------------------- MENU STARTS ---------------------------------*/
*,
*:before,
*:after {
box-sizing: inherit;
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
* {
margin: 0;
padding: 0;
}
nav {
height: 5em;
margin: 0 5%;
z-index: 1;
background color: white;
}
nav #brand {
float: left;
display: block;
font-size: 3em;
line-height: 75px;
font-weight: bold;
}
nav #brand a {
color: white;
transition: all 0.3s ease-out;
}
nav #menu {
float: right;
position: relative;
font-size: 1.25em;
}
nav #menu li {
display: inline;
margin: 0 1em; /*--15px--*/
padding: 0.5em 1em; /*--8px 15px--*/
cursor: pointer;
line-height: 75px;
position: relative;
}
nav #menu li a {
color: black;
text-decoration: none;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
nav #menu li a:after {
content: "";
position: absolute;
height: 0.2em;
background-color: #f00f2f;
width: 0;
left: 50%;
bottom: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) all;
transition: all 0.4s cubic-bezier(.25,.8,.25,1);
}
nav #menu li a:hover{
color: #f00f2f;
}
nav #menu li a:hover:after{
width: 100%;
}
#toggle {
position: absolute;
right: 25px;
top: 20px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
}
#toggle .span {
height: 7px;
background: black;
margin: 5px auto;
backface-visibility: hidden;
}
#toggle.on #one {
transform: rotate(45deg) translateX(6px) translateY(6px);
}
#toggle.on #two {
opacity: 0;
}
#toggle.on #three {
transform: rotate(-45deg) translateX(10px) translateY(-12px);
}
#resize {
z-index: 1;
position: absolute;
top: 0px;
background: #ddd;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease-out;
display: table;
}
#resize #menu {
height: 50px;
display: table-cell;
vertical-align: middle;
}
#resize #menu li {
display: block;
text-align: center;
padding: 20px 0;
text-align: center;
font-size: 2em;
min-height: 2em;
cursor: pointer;
transition: all 0.3s ease-out;
}
#resize #menu li:hover {
background: linear-gradient(to right, #f00f2f, #182551);
}
#resize #menu li:hover a {
color: white;
transition: all 0.3s ease-out;
}
#resize #menu li a {
color: black;
}
#resize.active {
visibility: visible;
opacity: 0.99;
}
@media (max-width: 768px) {
#toggle {
visibility: visible;
opacity: 1;
}
nav #menu {
display: none;
}
}
@media (min-width: 768px) {
#resize {
visibility: hidden !important;
}
}
/*--------------------------------- MENU ENDS ---------------------------------*/
/*--------------------------------- HERO STARTS ---------------------------------*/
header{
/* The image used */
background: linear-gradient(to bottom right, #f00f2f, #182551);
/* Set a specific height */
height: 100%;
width: 100%;
/* Position and center the image to scale nicely on all screens */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.4s cubic-bezier(.25,.8,.25,1);
}
#logo_background{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Place text in the middle of the image */
#hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
/*--------------------------------- HERO ENDS ---------------------------------*/
/*--------------------------------- SCROLL UP STARTS ---------------------------------*/
#scroll {
position:fixed;
right:10px;
bottom:10px;
cursor:pointer;
width:50px;
height:50px;
background-color:gray;
text-indent:-9999px;
display:none;
-webkit-border-radius:60px;
-moz-border-radius:60px;
border-radius:60px
}
#scroll span {
position:absolute;
top:50%;
left:50%;
margin-left:-8px;
margin-top:-12px;
height:0;
width:0;
border:8px solid transparent;
border-bottom-color:#ffffff;
}
#scroll:hover {
background-color:#f00f2f;
opacity:1;filter:"alpha(opacity=100)";
-ms-filter:"alpha(opacity=100)";
}
/*--------------------------------- SCROLL UP ENDS ---------------------------------*/
/*---------------------------- FEATURED PROJECTS STARTS ---------------------------*/
#featured_section{
background-color: white;
height: 100%;
margin: 0;
overflow: hidden;
display: table;
padding: 6.25em 0; /*--100px--*/
}
#featured_text{
margin-bottom: 1.5em; /*--25px--*/
}
div.featured_section{
margin: 0 10%;
height: 100%;
}
#featured_post{
width: 25%;
display: table;
float: left;
margin: 0;
padding: 1.5em; /*--25px--*/
}
#featured_post img{
width: 100%;
transition: all 0.4s cubic-bezier(.25,.8,.25,1);
}
#featured_post img:hover{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
#featured_post a{
color: black;
}
#featured_post a:hover{
color: #f00f2f;
}
h3.project_title{
padding: 1.5em 0; /*--25px--*/
}
@media (max-width: 768px) {
#featured_post {
width: 50%;
}
.project_title{
font-size: 1em;
}
}
@media (max-width: 468px) {
#featured_post {
width: 100%;
}
}
/*---------------------------- FEATURED PROJECTS ENDS ---------------------------*/
/*---------------------------- CTA STARTS ---------------------------*/
section.CTA_section{
background: linear-gradient(to bottom right, #f00f2f, #182551);
width: 100%;
margin: 0;
padding: 3.125em; /*--50px--*/
display: table;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.4s cubic-bezier(.25,.8,.25,1);
}
div.CTA_section{
margin: 0 10%;
height: 100%;
}
#CTA_text{
color: white;
text-align: center;
}
.CTA_button{
text-align: center;
padding: 1.5em 0 0 0; /*--25px--*/
}
/*---------------------------- CTA STARTS ---------------------------*/
/*---------------------------- FOOTER STARTS ---------------------------*/
footer {
margin: 0 10%;
z-index: 1;
padding: 1.5em; /*--25px--*/
}
#copyright {
text-align: center;
font-size: 0.8em;
}
/*---------------------------- FOOTER ENDS ---------------------------*/