/*---------------------------------------------------------------------
  File Name: Intro.css

  * LAYOUTS
  * FRAMEWORK

---------------------------------------------------------------------*/



/*----Layouts----*/

#pageintro{
    padding: 200px 0 300px;
    color: rgb(225,255,255);
}
#pageintro article, #pageintro article p{
    display: block; 
    max-width: 75%; 
    margin: 0 auto; 
    text-align: center;
}
#pageintro article p{
    max-width: 65%; 
    line-height: 2rem;
}
#pageintro .heading{
    margin-bottom: 20px; 
    font-size: 4rem;
}
#pageintro footer{
    margin-top: 50px;
}


.overlay{
    color: rgb(255,255,255); 
    background-color: inherit;
    /*background-color: rgb(0,0,0);*/
}
.overlay::after{
    color: inherit; 
    /*background-color: inherit;*/
    background-color: rgba(0,0,0,0.9); /* For browsers that do not support gradients */
    background-image: linear-gradient(to right, rgb(0,0,0) , rgba(0,0,0,0.9) , rgb(0,0,0), );
}


#btn{
    color: rgb(225,255,255); 
    background-color: rgb(255, 60, 0); 
    border-color: rgb(255, 60, 0);
}
#btn:hover{
    color: rgb(225,255,255);
    background-color: transparent;
    border-color: rgb(225,255,255);
}
#inverse_btn{
    color: rgb(225,255,255);
    background-color: transparent;
    border-color: rgb(225,255,255);
}
#inverse_btn:hover{
    color: rgb(225,255,255); 
    background-color: rgb(255, 60, 0); 
    border-color: rgb(255, 60, 0);
}

.list-b{
    list-style-type: none;
}



/*----Framework----*/

.wrapper{
    display: block; 
    position: relative; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    text-align: left; 
    word-wrap: break-word;
}


.bgded{ 
    background-position: top center; 
    background-repeat: no-repeat; 
    background-size: cover;
}


.clear{
    display: block;
}
.clear::before, .clear::after{
    display: table; 
    content:"";
}
.clear, .clear::after{
    clear: both;
}


.hoc{
    display: block; 
    margin: 0 auto;
}


.overlay{
    position: relative; 
    z-index: 1;
}
.overlay::after{
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    content: ""; 
    z-index: -1;
}


h3, .heading{
    margin: 0 0 20px 0; 
    font-size: 1.4rem; 
    line-height: normal; 
    font-weight: normal; 
    text-transform: uppercase;
}
.heading.nospace{
    margin-bottom: 0;
}
.nospace{
    margin: 0;
    padding: 0; 
    list-style: none;
}

.text{
    font-size: 18px;
}


.inline{
    display: inline-block;
}
.inline *{
    display: inline-block;
}
.inline *:last-child{ 
    margin-right:0;
}


.pushright li{
    margin-right: 20px;
}
.pushright li:last-child{
    margin-right: 0;
}


a{
    outline:none; text-decoration: none;
}


article, footer{
    display: block; 
    margin: 0; 
    padding: 0;
}


/* Fonts
--------------------------------------------------------------------------------------------------------------- 
body, input, textarea, select{font-family:Verdana, Geneva, sans-serif;}
h3, .heading{font-family:Georgia, "Times New Roman", Times, serif;}*/




/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1140px){
	.hoc{max-width:1140px;}
}

@media screen and (min-width:978px) and (max-width:1140px){
	.hoc{max-width:95%;}
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:978px){
	.hoc{max-width:90%;}
}

@media screen and (max-width:750px){
	.clear .clear > *:last-child, .clear > *:last-child, .clear > *:last-child{margin-bottom:0;}
	#pageintro article, #pageintro article p{max-width:none;}
	#pageintro .heading{font-size:2rem;}
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){
	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

}