/*Google Fonts*/
@import url(http://fonts.googleapis.com/css?family=Lato:400,300,100,700,900&subset=latin,latin-ext);
/*Self-hosted webfonts*/
@import url("../webfonts/JosefinSans_SemiBold/stylesheet.css");
@import url("../webfonts/JosefinSans_Light/stylesheet.css");
@import url("../webfonts/JosefinSans_Regular/stylesheet.css");
@import url("../webfonts/NotCourierSans/stylesheet.css");
@import url("../webfonts/BebasNeue_Book/stylesheet.css");
@import url("../webfonts/FontAwesome/stylesheet.css");
.preloader {
position: fixed;
width: 100%;
height: 100%;
background: #f2f2f2;
z-index: 99999;
}
.preloader .item {
position: absolute;
width: 100px;
height: 2000px;
left: 50%;
top: 0px;
margin-left: -50px;
margin-top: 0px;
}
html, body {
font-family: 'Lato', sans-serif;
font-size: 15px;
-webkit-font-smoothing: subpixel-antialiased!important;
color: #333333;
height: 100%;
}
a {
text-decoration: none;
outline: none;
font-size: 14px;
font-family: NotCourierSans;
}
h1 {
font-size: 34px;
color: white;
text-transform: uppercase;
letter-spacing: 6px;
line-height: 1.2;
font-family: "JosefinSans Light";
}
h2 {
font-size: 32px;
color: white;
letter-spacing: 6px;
line-height: 1.2;
font-family: "JosefinSans Light";
}
p {
font-size: 14px;
color: white;
font-weight: 300;
letter-spacing: 1px;
margin-top: 40px;
}
p em{
font-style: italic;	
}
.hidden{
display:none;
}
.main-head {
font-family: "JosefinSans SemiBold";
}
::selection {
background-color:#FF9362;
color:white;
}
::-moz-selection {
background-color:#FF9362;
color:white;
}
.container {
position: absolute;
width: 100%;
height: 100%;
}
/*START-PAGE*/
.start-page {
position: relative;
width: 100%;
height: 100%;
z-index: 10;
background: url('../img/background/start-page.png') #c0c0c0 center bottom no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}
.start-page .opacity {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(77,77,77,0.50); /* Standard Off */
}
.start-page .content {
position: relative;
width: 700px;
margin: 0 auto;
height: 100%;
}
.start-page .content .text {
position: absolute;
text-align: center;
margin: auto;
top: 100px;
left: 0;
bottom: 0;
right: 0;
width: 700px;
height: auto;
}
.start-page .content .text .logo .strings-icon {
width: 123px;
height: 123px;
margin: 20px auto 20px;
fill: #FFFFFF;
}
.start-page .content .text p {
color: #F2F2F2;
font-size: large;
margin: 0px auto 0px;
}
.start-page .content .text .read-more {
width: 183px;
height: 47px;
margin: 50px auto;
line-height: 47px;
border: 1px solid #f2f2f2;
text-transform: uppercase;
color: #F2F2F2;
display: block;
cursor: pointer;
font-size: 14px;
letter-spacing: 1px;
background: none;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-ms-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}
.start-page .content .text .read-more:hover {
color: #4d4d4d;
background: #ffc4a9;
border: 1px solid #ffc4a9;
}
/*RESPONSIVE NAV*/
.menu-media {
position: relative;
width: 100%;
height: 70px;
background: #4d4d4d;
background-image: url(../img/background/dark-pattern.png);
border-top: 1px solid #4D4D4D;
border-bottom: 1px solid #3c3c3c;
z-index: 1000;
display: none;
}
.menu-media .menu-content {
width: 90%;
position: relative;
margin: 0 5%;
}
.menu-media .menu-content .logo {
color: #F2F2F2;
font-size: 15px;
width: 225px;
line-height: 70px;
float: left;
font-family: "JosefinSans Regular";
letter-spacing: 1px;
}
.menu-media .menu-content .icon {
height: 20px;
margin: 23px auto 27px auto;
float: right;
}
.menu-click {
display: none;
}
.menu-click li {
position: relative;
width: 100%;
height: 50px;
color: #4d4d4d;
font-size: 18px;
text-align: center;
line-height: 50px;
z-index: 1000;
background-color: #F2F2F2;
background-image: url(../img/background/pale-pattern.png);
border-bottom: 1px solid #dedede;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.menu-click li:hover {
color: #fea278;
}
/*DESKTOP NAV*/
.menu {
position: relative;
width: 100%;
height: 60px;
background-color: #f2f2f2;
background-image: url(../img/background/pale-pattern.png);
border-top: 1px solid #dedede;
border-bottom: 1px solid #E4E4E4;
z-index: 1000;
background-repeat: repeat;
}
.menu-content {
width: 900px;
position: relative;
margin: 0 auto;
}
.menu-content .logo {
color: #a4a4a4;
font-size: 15px;
width: 320px;
line-height: 60px;
float: left;
list-style: none;
font-family: "JosefinSans Regular";
}
.menu-content ul {
width: 500px;
left: 50%;
float: right;
text-align: right;
list-style: none;
}
.menu-content li {
display: inline-block;
position: relative;
}
.menu-content li a {
color: #4d4d4d;
font-size: 16px;
display: block;
padding: 0 20px 0 20px;
line-height: 60px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.menu-content li.active a {
color: #FEA278;
}
.menu-content li a:hover {
color: #fea278;
}
/*ABOUT*/
.about {
position: relative;
width: 100%;
background: white;
z-index: 10;
}
.about .content {
position: relative;
width: 900px;
margin: 0 auto;
overflow: hidden;
}
.about .content img{
width: 100%;
margin: 40px 0 0 0;
}
.about h1 {
font-size: 34px;
color: #4D4D4D;
text-align: center;
margin-top: 50px;
letter-spacing: 6px;
text-transform: uppercase;
line-height: 1.2;
}
.about hr {
color: #4D4D4D;
margin-top: 30px;
background-color: black;
height: 1px;
width: 106px;
border: 0;
}
.about p {
text-align: left;
font-size: 14px;
width: 100%;
margin: 30px auto;
color: #4d4d4d;
line-height: 26px;
letter-spacing: 0;
position: relative;
font-weight: 300;
}
/*LISTEN/WATCH*/
.portfolio {
position: relative;
width: 100%;
background: #FFD4C0;
background-image: url(../img/background/pale-pattern.png);
border-top: 1px solid #ffc4a9;
border-bottom: 1px solid #fea278;
z-index: 10;
}
.portfolio .portfolio-margin {
position: relative;
width: 900px;
overflow: hidden;
margin: 0 auto;
}
.portfolio .portfolio-margin h1 {
font-family: "JosefinSans Light";
font-size: 36px;
color: #333333;
text-align: center;
margin-top: 80px;
letter-spacing: 2px;
font-weight: normal;
text-transform: uppercase;
line-height: 1.2;
}
.portfolio .portfolio-margin hr {
margin-top: 20px;
background-color: #4d4d4d;
height: 1px;
width: 150px;
border: 0;
}
.portfolio .portfolio-margin h2 {
font-family: 'Lato';
font-size: 18px;
letter-spacing: 1px;
color: #333333;
text-align: center;
margin-top: 20px;
font-weight: 300;
}
/*GRID*/
.grid {
margin-top:40px;
width: 100%;
position: relative;
margin-bottom: 50px;
overflow: hidden;
}
.grid li {
width: 290px;
height: 290px;
margin: 5px;
position: relative;
background-image: url(../img/background/circle-li.svg);
background-size: contain;
background-position: center center;
float: left;
overflow: hidden;
}
.grid img {
width: 280px;
margin: 5px;
float: left;
position: relative;
opacity: 1;
}
.grid .screen {
width: 282px;
height: 282px;
margin:4px;
position: absolute;
background-image:url(../img/background/circle-screen.svg);
background-size: contain;
background-position: center center;
opacity:0;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
}
.grid .screen:hover{
opacity:1;
}
.grid .caption{
position:absolute;
width:60%;
height:60%;
margin-top:0;
padding: 20% 20% 20% 20%;
opacity:0;
text-align:left;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.grid .caption:hover{
opacity:1;
}
.grid h3{
font-family: FontAwesome;
color: #f2f2f2;
font-size: 30px;
line-height: 36px;
}
.grid p {
width: 100%;
margin: 0 auto;
font-family: "BebasNeue Book";
font-size: 20px;
color:#333333;
}
.grid p.description {
color:#4d4d4d;
}
.clear {
clear: both;
}
/*CONNECT*/
.connect {
position: relative;
width: 100%;
z-index: 10;
height: 400px;
background-image: url('../img/background/connect.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
background-attachment:fixed;
}
.connect .opacity {
position: absolute;
width: 100%;
height: 400px;
background: rgba(79,79,79,0.6);
}
.connect .content {
position: absolute;
width: 900px;
height: 190px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.connect h1 {
font-size: 34px;
color: #F2F2F2;
text-align: center;
letter-spacing: 6px;
text-transform: uppercase;
line-height: 1.2;
}
.connect hr {
color: #F2F2F2;
background-color: #F2F2F2;
margin-top: 30px;
height: 1px;
width: 70px;
border: 0;
}
.connect .social {
position: relative;
width: 900px;
overflow: hidden;
margin-top: 50px;
text-align: center;
}
.connect .social .social-button {
width: 150px;
height: 100px;
fill: #ffc4a9;
opacity: 0.5;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.connect .social .social-button:hover {
opacity: 1;
}
/*CONTACT*/
.contact {
position: relative;
width: 100%;
background: white;
border-top: 1px solid #dedede;
z-index: 10;
overflow: hidden;
margin-bottom: 300px;
}
.contact .content {
position: relative;
width: 900px;
overflow: hidden;
margin: 60px auto 65px auto;
}
.contact h1 {
font-size: 34px;
color: #4D4D4D;
text-align: center;
margin-top: 100px;
letter-spacing: 6px;
text-transform: uppercase;
line-height: 1.2;
}
.contact hr {
color: #4D4D4D;
margin-top: 30px;
background-color: black;
height: 1px;
width: 106px;
border: 0;
}
.contact .content .contact-text {
width: 405px;
height: auto;
margin-top:20px;
overflow: hidden;
float: right;
font-weight: 300;
padding-left: 40px;
color: #4D4D4D;
font-size: 15px;
text-align: left;
line-height: 26px;
}
.contact-text a{
font-family:NotCourierSans;
font-size: 18px;
padding:5px 5px 5px 0;
color:#fdc4a8;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.fontawesome{
font-family:FontAwesome;
padding:0 10px 0 0;
}
.contact-text a:hover{
color:#fea278;
}
.contact .content .form {
width: 455px;
font-family: "NotCourierSans";
color: #4d4d4d;
overflow: hidden;
height: auto;
float: right;
}
.contact .content .form .column {
width: 180px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px;
}
.contact .content .form .column-2 {
width: 210px;
padding-left: 60px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px;
}
.contact .content .form .column-3 {
width: 450px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px;
}
.contact .content .form .column-4 {
width: 450px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
}
strong {
font-weight: normal;
}
input {
width: 180px;
height: 40px;
background-color:#FFDECF;
background-image: url(../img/background/pale-pattern.png);
border-top: 1px solid #4d4d4d;
border-bottom: 5px solid #f2f2f2;
border-left: 0;
border-right: 0;
color: #4D4D4D;
font-weight: 300;
line-height: 40px;
padding-left: 15px;
font-family: "Lato";
font-size: 14px;
margin-bottom: 10px;
}
input:focus {
background-color: #f4f4f4;
background-image: none;
}
textarea {
width: 420px;
height: 150px;
border-top: 1px solid #4d4d4d;
border-bottom: 5px solid #f2f2f2;
border-left: 0;
border-right: 0;
line-height: 20px;
background-color: #FFDECF;
background-image: url(../img/background/pale-pattern.png);
color: #333;
font-weight: 300;
padding: 15px 0 0 15px;
font-family: 'Lato', sans-serif;
font-size: 14px;
margin-bottom: 10px;
}
textarea:focus {
background: #f4f4f4;
}
#send {
width: 100px;
height: 40px;
float: right;
margin: 0 15px;
border: 0;
font-family:FontAwesome;
font-size: 30px;
color:#ffc4a9;
text-align: right;
background: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
#send:hover {
color:#fea278;
}
/* Footer */
.footer {
position: relative;
margin-top: 20px;
margin-bottom: 0px;
bottom: 0;
width: 100%;
height: 50px;
background: #4f4f4f;
background-image: url(../img/background/dark-pattern.png);
border-top: 1px solid #fdc4a8;
border-bottom: 1px solid #333333;
z-index: 10;
overflow:hidden;
}
.footer p {
font-family: "JosefinSans SemiBold";
font-size: 12px;
line-height: 50px;
color: #fdc4a8;
display: inline;
}
.footer .info {
width: 300px;
float: left;
text-align: left;
margin: 0 auto 0 2%;
}
.footer .fontawesome {
font-size:13px;
line-height: 50px;
}
.footer .credit {
width:175px;
float:right;	
text-align:left;
margin: 0 2% 0 auto;
}
.footer .credit p{
color:#f2f2f2;
font-size:13px;
margin:0 0 0 0;
}
.strangebird-logo{
	height: 30px;
	margin: 10px auto 10px;
	float:right;
}
/*Mail*/
.extension {
width: 100%;
height:100%;
border: 2px solid #ffc4a9;
position:absolute;
background-image: url('../img/background/connect.jpg');
background-size:cover;
}
.comment{
width: 200px;
height: 200px;
margin:150px auto;
position: relative;
background-color:rgba(0,0,0,0.80);
border: 3px solid #F2F2F2;
border-radius: 300px;
padding:25px;
}
.comment p{
width:100%;
margin-top:40px;
text-align:center;
font-size:18px;
color:#F2F2F2;
}
.comment h3 {
width:100%;
font-family:"JosefinSans SemiBold";
color:#F2F2F2;
text-transform:uppercase;
text-align:center;
font-size: 24px;
line-height:28px;
}
.comment h4 {
width:100%;
text-align:center;
font-family:fontawesome;
font-size:60px;
color:#ffc4a9;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.comment h4:hover {
color:#F2F2F2;
}