/*
Theme Name: Rola Wala 2014 (v2)
Theme URI: http://www.rolawala.com/
Description: A custom theme for Rola Wala
Version: 1.0
Author: James Cant
Author URI: http://www.day6studio.com
*/

@font-face {
    font-family: 'dcc-ash-regular';
    src: url('fonts/dcc_-_ash-webfont.eot'); /* IE9 Compat Modes */
    src: url('fonts/dcc_-_ash-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/dcc_-_ash-webfont.woff') format('woff'), /* Modern Browsers */
         url('fonts/dcc_-_ash-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/dcc_-_ash-webfont.svg#dcc_-_ashregular') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'swiss-911';
    src: url('fonts/swiss_911_ultra_compressed-webfont.eot'); /* IE9 Compat Modes */
    src: url('fonts/swiss_911_ultra_compressed-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/swiss_911_ultra_compressed-webfont.woff') format('woff'), /* Modern Browsers */
         url('fonts/swiss_911_ultra_compressed-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/swiss_911_ultra_compressed-webfont.svg#dcc_-_ashregular') format('svg'); /* Legacy iOS */
}

body{ font-family: "Oswald"; font-size: 15px; font-weight:300; }

a { color:#000; text-decoration: underline; }
a:visited {}
a:hover { text-decoration: none; }
a:active { }

a.none, a.none:hover{ text-decoration: none; }

h1, h2, h3, h4, h5, h6{ font-family:'swiss-911'; padding: 15px 0; font-weight:400; text-transform: uppercase; line-height: 90%; letter-spacing: 2px; }
h1{ font-size:60px; }
h2{ font-size:40px; } 
h3{ font-size:32px; }
h4{ font-size:20px; }
h5,h6{ font-size:14px; color: #BBB; font-family: "Oswald"; }

p{ padding: 7px 0; line-height: 150%; }

strong{ font-weight: bold; }
em{ font-style: italic; }

small{ font-size:10px; }

ul,ol{ margin:10px 0; margin-left:40px; }

hr{ border:none; border-top:1px solid #000; margin-top:15px; }

table tr td{ vertical-align:top; }

/* Global styles */

.no_spacing{ padding:0; margin:0; }

.alignleft{ float:left; margin:20px 20px 20px 0; }
.alignright{ float:right; margin:20px 0 20px 20px; }

.invert{ background-color:#000; color:#FFF; padding:10px; margin:15px 0 25px; }

img.full-width{ width:100%; }

/* Mobile first layout */

header, .page, footer{
	width: 100%;
	clear: both;
}

footer{ color:#FFF; background-color:#000; font-size: 14px; }
footer a{ color: #FFF; }
footer .unit{ height:70px; position: relative; }

footer .unit:nth-child(2) a{ position:absolute; top:10px; right:0; }

footer img.logo{ height:45px; position:absolute; top:10px; left:10px; }
footer img.oft-logo{ height:50px; }

footer .unit:nth-child(1){ display:none; }
footer .unit:nth-child(2){ margin-right:0;}
footer .unit:nth-child(1) p{ left:55px; top:5px; padding-right:100px; }
footer .unit:nth-child(2) p{ position:absolute; padding:10px 0 0 15px; right:110px; }

.landing-page{ background-size:cover; background-position: center; width: 100%; height: 100%; }
.header-image{ height: 250px; }
#logo{ background-color: #000; position: absolute; top:30px; left:0; padding:3px 10px 1px 15px; }
#logo img {width: 170px; }

.oft-logo-home{ position:fixed; bottom:10px; right:0; width:80px; }

.content { padding:20px 30px;}

#menu { height: 100%; width: 130px; background-color: black; position:fixed; right:-130px; color:#FFF; z-index:99; }
#menu a{ color: #FFF; }

#get-started{ display:none; position: absolute; right: 45px; top: 60px; z-index: 999; width:60px; }

#menu-icon{ background-image: url("ims/menu-icon.gif"); background-size:40px; cursor:pointer; height:40px; width:40px; background-color: #000; position:absolute; left:-40px; top:30px; z-index:999;  }
#social-icons{ position:absolute; left:-40px; bottom: 80px; z-index:999; }
#social-icons img{ height:40px; width:40px; }

#main-navigation{ text-transform: uppercase; padding-top:40px; font-weight: bold; }
#main-navigation li{ text-align: right; margin:15px 0; font-size: 16px; }
#main-navigation li a:hover, #main-navigation li.current-menu-item a{ background-color: #FFF; color: #000; }
#main-navigation a{ text-decoration:none; padding:0 20px 0 5px; }

.landing-page .headline{ 
    font-family: 'swiss-911';
    width:80%;
    color: #FFF; /* text-shadow: 2px 2px 5px rgba(0, 0, 0, 1); */
    font-size: 68px;
    text-transform: uppercase;
    position: absolute;
    top:140px;
    line-height:0%;
    }

.headline div{
    line-height: 90%;
    color: black;
}
.headline div span{
    /* background-color: rgba(255,255,0,1); */
    color: white;
    text-shadow: 2px 2px 8px rgba(0,0,0, 0.2);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 9px;
    display: inline-block;
}

#arrow-down{ width:100px; position: absolute; bottom:0; left:50%; margin-left:-50px; cursor: pointer; }

.post{ padding-top:25px; }
.post h3:first-of-type{ padding:0 0 0; }
.post > img:first-of-type{ padding:10px 0; }
.post > table:first-of-type td{ vertical-align: top; }
.post > table:first-child a{ text-decoration: none; }
.post > table:first-child a:hover{ text-decoration: underline; }
p.meta, .more-link, input[type="submit"]{ font-weight:300; font-size:12px; text-transform: uppercase; letter-spacing: 2px; }
img.author-image{ margin-right:10px; }

a.more-link, input[type="submit"]{ padding:7px 10px; background-color:#000; color:#FFF; text-decoration: none; text-transform: uppercase; }

.recent-articles h4{ padding-bottom:0; }

.gallery img, .listing{ margin-bottom:30px; }

.instagram-caption{ margin:-30px 0 10px; font-size: 12px; color: #AAA; }

.listing h1, .listing h2, .listing h4, .listing h5, .listing h6{ padding:0; }

.team{ margin:20px 0 0;}
.team img{ margin:0 10px 15px 0; }
.team h4{ padding:0; }
.team h5{ padding-top:5px; }

label{ font-size:22px; font-family:'dcc-ash-regular'; font-weight:normal !important; letter-spacing: 1px; text-transform: uppercase; }
.rolawala-field, #sign-up-form input[type=text]{ width:100%; border:1px solid #000; border:1px solid #000; -webkit-appearance: none; -webkit-border-radius: 0; padding:4px 5px; margin-bottom:0; }
.rolawala-submit, #sign-up-form input[type=submit]{ -webkit-appearance: none; -webkit-border-radius: 0; font-size:16px; font-family:'Oswald'; font-weight:300; padding:7px 10px; cursor: pointer; border:none; background-color:#000; color: #FFF; text-decoration: none; text-transform: uppercase; }
#sign-up-form{ margin:20px 0; }

.ninja-forms-response-msg.ninja-forms-error-msg div{ background: #000 url('ims/icon-warning.png') no-repeat 20px; background-size: auto 30px; color:#FFF; padding:20px 20px 20px 45px; margin-bottom: 20px; }

.loader{ margin-left:5px; display:none; }

.sidebar{ padding-top:10px; }

.comment-respond label,
.comment-respond input[type="text"],
.comment-respond textarea{ width:100%; }

.comment-respond input[type="text"],
.comment-respond textarea{
    border: 1px solid #e3e3e3;
}

.comment-respond input[type="text"]{
    padding:5px;
}

input[type="submit"]{
    border: none;
}


ol.commentlist{
 margin: 40px 5px;
}
.commentlist .comment-body{
 padding: 10px;
 background: #EFEFEF;
 /* border: solid thin #DEDEDE; */
 margin: 10px 0;
 position: relative;
}
.comment-body a.comment-reply-link{
 position: absolute;
 top: 10px;
 right: 10px;
 color: #AEAEAE;
}
ol.commentlist li{
 list-style: none;
}
ol.commentlist img.avatar{
 padding: 5px;
 background: #DEDEDE;
 border: solid thin #CECECE;
 float: left;
 display: block;
 margin: 15px;
 width: 32px;
 height: 32px;
}
ol.commentlist .comment-author{
 line-height: 25px;
}
.comment-body cite.fn{
 font-size: 14px;
 font-style: normal;
}
.commentmetadata a{
 margin: 0;
 font-size: 11px;
 color: #999;
}
.comment-body p{
 margin: 5px;
}
 
.comment-body .comment-author.vcard{
 margin: 0;
}




@media screen and (min-width: 480px){

}

@media screen and (min-width: 600px){

}

@media screen and (min-width: 768px){

    h1{font-size:70px; }
    h2{font-size:50px; }

    #logo img { width: 240px; padding-left:30px; }
    #logo, #menu-icon{ top:60px; }

    .landing-page .headline{ font-size: 160px; top:220px; /* left:22px; */ letter-spacing: 2px; }
    .header-image{ height: 300px; }
    .landing-page.header-image .headline{ font-size:72px; }

    .headline div span{ padding-left: 40px; }

    .oft-logo-home{ width:100px; }

    #menu-icon{ background-size:50px; height:50px; width:50px; left:-50px;  }
    #social-icons{ left:-50px; }
    #social-icons img{ height:50px; width:50px; }

    #arrow-down{ width:100px; margin-left:-50px; }

    #get-started{ right: 60px; top: 90; width:auto; }

    .listing h1, .listing h2, .listing h3, .listing h4, .listing h5, .listing h6{ padding:0; }

    footer .unit:nth-child(1){ display:inline-block; }
    footer .unit:nth-child(1) p{ top:15px; }
    footer .unit:nth-child(2) p{ padding:25px 0; }

}

@media screen and (min-width: 1200px){

    #logo{ position:fixed; top:0; z-index: 99999999; }
    #logo img { width: 285px; padding:10px 0 10px 30px; }
    #menu-icon{ background-size:60px; height:60px; width:60px; left:-60px;  }
    #social-icons{ left:auto; top:20px; right:20px; position:fixed; z-index: 99999999; }
    #social-icons a{ }
    #social-icons br{ display:none; }
    #social-icons img{ height:40px; width:40px; }

    #get-started{ display:none; }

    #menu-icon{ display:none; }
    #menu { height: 81px; width:100%; background-color: black; position:fixed; top:0px; left:310px; right:auto; color:#FFF; z-index:99; }
    #menu a{ color: #FFF; }

    #main-navigation{ text-transform: uppercase; padding-top:25px; font-weight: bold; position: absolute; right: 470px; }
    #main-navigation li{ display: inline; text-align: right; margin:15px 0; font-size: 16px; }
    #main-navigation li a:hover, #main-navigation li.current-menu-item a{ background-color: #FFF; color: #000; }
    #main-navigation a{ text-decoration:none; padding:0 5px; margin:0 10px; }

    #get-started{ right: 80px; top: 100; }

}

@media screen and (min-width: 1382px){

    .landing-page:not(.header-image) .headline{ font-size: 200px; top:260px; }

}