@import url('//fonts.googleapis.com/css?family=Work+Sans:300,700,900');

 body {
    color: #000;
 	font-family: 'Work Sans', sans-serif;
    font-weight: 300;
}


 a {
    color: #f04124;
    -webkit-transition: 0.25s;
    transition: 0.25s;
}

a:hover {
    color: #fff;
    text-decoration: none;
}

a:focus {
    outline: none;
    outline: 0 auto -webkit-focus-ring-color;
    outline-offset: 0;
}


 h1, h2, h3, h4, h5, h6 {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    color: #FFF;
    line-height: 1.3;
    margin-bottom: 0.8125rem;
}

p {
    line-height: 1.4;
    margin-bottom: 0.8125rem;
    text-align: justify;
}

.sections {
	padding-top: 3em;
	padding-bottom: 4em;
}


.row{
	max-width: 80em;
}

/* Buttons */
button, .button {
	background-color: rgba(255,255,255,0);
	border: 2px solid #fff;
	color: #FFF;
	font-size:2rem;
	font-weight:800;
	text-align:center;
}
button:hover, 
button:focus, 
.button:hover,
.button:focus {
	background-color: rgba(255,255,255,0);
	color: #E3E7F4;
	text-decoration: none;
}

.top-bar ,.top-bar-section ul ,
.top-bar-section ul li.active > a ,
.top-bar-section ul li.active > a:hover,
.top-bar-section li a:not(.button),
.top-bar-section li a:not(.button):hover ,
.top-bar.expanded .title-area{
	background: rgb(0,0,0,0);
	background: rgba(255, 255, 255, 0);
	font-weight: 600;
	letter-spacing:1px;
}

.top-bar .name h1 a {
	color:#333;
	font-family: 'Work Sans', sans-serif;
}
.top-bar-section ul li.active > a {
	color: #cd281e;
	font-family: 'Work Sans', sans-serif;
}

.top-bar-section>ul>.divider, .top-bar-section>ul>[role="separator"] {
	border-right: 1px solid #F1F1F1;
}
.top-bar-section li a:not(.button) {
	color: #fff;
}
.top-bar-section li a:not(.button):hover {
	color: #4439d3;
	text-decoration: none;
}

.changeColor .top-bar-section li a:not(.button) {
	color: #4439d3;
}

.top-bar .toggle-topbar.menu-icon a {
	color: #FFF;
}
.top-bar .toggle-topbar.menu-icon a span {
	position: absolute;
	right: 0;
	display: block;
	width: 16px;
	height: 0;
	-webkit-box-shadow: 0 10px 0 1px #FFF, 0 16px 0 1px #FFF, 0 22px 0 1px #FFF;
	box-shadow: 0 10px 0 1px #FFF, 0 16px 0 1px #FFF, 0 22px 0 1px #FFF;
}

.top-bar-section .divider, .top-bar-section[role="separator"] {
	border-top: solid 1px #ddd;
}

.top-bar.expanded {
	background-color: #000;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.2);
	height: auto;
}
.expanded > .top-bar-section ul li  a {
	background: rgba(255, 255, 255, 0.61);
	color: #777;
}

.logo,.info_text{
	font-family: 'Work Sans', sans-serif;
	font-weight: 300;
	/*text-align: center;*/
}
.logo:hover{
	text-decoration: none;
}


footer {
	position:relative;
	background-color: #4439d3;
	color: #DDDDDD;
	text-align: center;
	padding: 1.875rem 0;
}
footer p {
    margin: 0;
}

footer .toTop {
	position: absolute;
	cursor: pointer;
	left: 50%;
	right: 50%;
	margin-left: -32px;
	background: #000;
	width: 32px;
	height: 32px;
	top: -15px;
	color: #FFF;
	line-height: 32px;
	-webkit-border-radius: 1em 1em 0 0;
	border-radius: 1em 1em 0 0;
}


.masthead {
	background: url("../img/header.jpg") no-repeat center center;
	padding-bottom: 1em;
	background-size: cover;
	position: relative;
}
.bck{
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0);
}
.this_is_home{
	padding-bottom: 10em;
}

.info_box {
	text-align: center;
}

.info {
	margin-top: 20em;
}
.info_text {
	color: #fff;
	font-size: 6em;
	font-weight:900;
}

.takeactionoutline {
	border: 2px #4439d3 solid;
	padding-top:3em;
	padding-bottom: 3em;
	margin-bottom:1.5em;
}

.purplesection {
  background-color:#4439d3;
  color:#FFF;
  text-align:left;
  padding: 10em 0;}
  
 .purplesection h3 {font-size:2.125rem;}
 
 .purplesection h1 {text-align:center;}
 

.lightsection {
  background-color:#d9d9ee;
  text-align:left;
  padding: 10em 0;}

.lightsection h1, h4 {color:#4439d3; text-align:center;margin-bottom:3rem;}  

.lightsection h2 {color:#4439d3;}

.interiorsection {
  background-color:#fff;
  text-align:left;
  padding: 5em 0;}
  
.interiorsection h1, h4 {color:#4439d3;}   

.rowansstory {
background: url('../img/rowansstory.jpg') 0 0 no-repeat;
background-size: cover;
color: #FFF;
padding: 10em 0 10em 0;}

.rowansstory h1 {color:#fff; text-align:center;}

small {font-size: 95%; line-height: 1.5;}

.sbottom2 {margin-bottom:2rem;}

.sbottom3 {margin-bottom:3rem;}

/* #Media queries 
------------------------------------------- */

/* Max-width 60rem = 1024px */
 @media only screen and (max-width: 64rem) {
 	
.top-bar .name h1 a{
	color:#333;
	}
.info_text {
	font-size: 5em;
	}
}
/* Max-width 50rem = 800px */
 @media only screen and (max-width: 50rem) {
 
 .top-bar .name h1 a{
	color:#333;
	}

.info_text {
	font-size: 5em;
	margin-top: 0em;
	}
	
.lightsection, .rowansstory, .purplesection, .interiorsection {
  padding: 5em 0;}
  
  .logo {width:50%;}
  
 }
 
  

/* Max-width 40rem = 640px */
 @media only screen and (max-width: 40rem) {

.top-bar .name h1 a{
	color:white;
	}
	
.info {
	margin-top: 3em;
	margin-left:1.2em;
}

   
.info_text {
	font-size: 4em;
	margin-top: 2em;
	}
	
 h2 {
	font-size: 1.45rem;
	} 
	
.lightsection, .rowansstory, .purplesection, .interiorsection  {
  padding: 5em 0;}
  
.logo {width:35%;}  

button, .button {
	font-size:1.8rem;
}


}
/* Max-width 35.5rem = 568px */
 @media only screen and (max-width: 35.5rem) {
 	
.top-bar .name h1 a{
	color:white;
}

.info {
	margin-top: 3em;
	
}


.info_text {
	font-size: 4em;
	margin-top: 2em;
	}
	
 h2 {
	font-size: 1.45rem;
	} 


.lightsection, .rowansstory, .purplesection, .interiorsection, {
  padding: 5em 0;}
  
.logo {width:35%;} 

button, .button {
	font-size:1.7rem;
}

 .purplesection h3 {font-size:1.5rem;}
    

}
/* Max-width 30rem = 480px */
 @media only screen and (max-width: 30rem) {
 		
.top-bar .name h1 a{
	color:white;
	}
	
.info {
	margin-top: 3em;
	
}

.info_text {
	font-size: 2.7em;
	margin-top: 2em;
	}
	
 h2 {
	font-size: 1.2rem;
	} 
	
	

.lightsection, .rowansstory, .purplesection, .interiorsection {
  padding: 5em 0;
 }
 
.logo {width:35%;} 

button, .button {
	font-size:1.6rem;
} 
}

/* Max-width 25.875rem = 414px */
 @media only screen and (max-width: 25.875rem) {
 		
.top-bar .name h1 a{
	color:white;
	}
	
.info {
	margin-top: 3em;
	
}

.info_text {
	margin-top: 2em;
	}
	
 h2 {
	font-size: 1.1rem;
	} 
	

.lightsection, .rowansstory, .purplesection, .interiorsection {
  padding: 5em 0;
 }
 
.logo {width:35%;} 

button, .button {
	font-size:1.6rem;
}



/* Max-width 24rem = 384px */
 @media only screen and (max-width: 24rem) {
 		
.top-bar .name h1 a{
	color:white;
}

.info {
	margin-top: 3em;
	
}

.info_text {
	font-size: 2.5em;
	margin-top: 2em;
	}
	
.info_text h2 {
	font-size: 1.5em;
	}

.lightsection, .rowansstory, .purplesection, .interiorsection  {
  padding: 5em 0;}
  
.logo {width:35%;} 

button, .button {
	font-size:1.5rem;
}
 
 
}
/* Max-width 20rem = 320px */
 @media only screen and (max-width: 20rem) {
		
.top-bar .name h1 a{
	color:white;
	}

.info {
	margin-top: 3em;
	
}

   
.info_text {
	font-size: 2em;
	margin-top: 2em;
	}
	
.info_text h2 {
	font-size: 1.5em;
	}

	

.lightsection, .rowansstory, .purplesection, .interiorsection {
  padding: 5em 0;}
  
.logo {width:35%;}  
  
button, .button {
	font-size:1.4rem;
}

 
}
/* Max-width 15rem = 240px */
 @media only screen and (max-width: 15rem) {
	
.info {
	margin-top: 3em;
	
}

.info_text {
	font-size: 2em;
	margin-top: 2em;
	}
	
.info_text h2 {
	font-size: 1.4em;
	}

	
.lightsection, .rowansstory, .purplesection, .interiorsection  {
  padding: 5em 0;}
  
.logo {width:35%;}  

button, .button {
	font-size:1.3rem;
} 
  
}

@media only screen and (max-width: 40em) { 
.top-bar{
  height: 55px;
  line-height: 55px;
}
}