/*
Theme Name: kickassCities
Theme URI: http://www.kickassDC.com
Description: The theme for all kickassCity websites.
Version: 1.0
Author: Kirk Sigmon
Author URI: http://www.kirksigmon.com
Tags: kickass

*/

* {margin:0; padding:0; border-collapse:collapse; font-family: 'Raleway', sans-serif; vertical-align:top;}
body {background:#e8e8e8 repeating-linear-gradient(45deg,#ebebeb,#ebebeb 25px,#f2f2f2 25px,#f2f2f2 50px);}
a {text-decoration:none;}
a:hover, a.category.selected {color:rgb(0, 255, 186) !important;}

div.wrap {max-width:1200px; margin:0 auto;}

div.head {width:100%; color:#FFF; text-align:left; padding:20px 0; text-align:center;}
div.head sub {display:block; font-weight:200; padding:10px 5%; font-size:2vh;}
div.head h1 {font-weight:400; font-size:60px; font-size:6vh;}
div.head a {color:#FFF;}

.w25 {display:inline-block; width:24.5%;}
.w50 {display:inline-block; width:49.5%;}

form.search {width:100%; max-width:800px; margin:0 auto;}
form.search i {min-width:40px; line-height:40px; font-size:4vh;}
form.search input {width:calc(95% - 40px); padding:0 2.5%; background:#FFF; color:#4d4d4d; border-radius:5px; border:none; font-size:24px; font-size:4vh}
form.search button {background:none; color:#FFF; border:none;}

div.othersites {background:#000; padding:5px 0; text-align:center; font-size:12px; font-size:2vh;}
div.othersites a {color:#CCCCCC; padding:0 2%; text-decoration:none;}
div.othersites b {color:#FFF;}

div.index_top {display:block; width:100%; min-height:100% 100vh; text-align:center; vertical-align: middle; font-weight:normal; background:url(img/bg.jpg) center no-repeat; background-size:cover; color:#FFF;}

div.page_top {display:block; width:100%; text-align:center; vertical-align: middle; font-weight:normal; background:url(img/bg.jpg) center no-repeat; background-size:cover; color:#FFF;}
div.page_top div.categories {display:inline-block; height:auto;}
div.page_top div.index_box_wrap {height:auto;}

div.index_box_wrap {display:table; width:80%; margin:0 auto; height:calc(100% - 180px);}
div.index_box {display:table-cell; vertical-align:middle}
div.index_box a {color:#FFF; font-size:12px; font-size:3vh;}

div.categories {padding:0 0 10px;}
a.category {display:inline-block; padding:10px;}
a.category i.fa {font-size:75px; font-size:7vh; padding-bottom:5px;}
a.category small {display:block; font-size:10px; font-size:1.5vh;}

div.subcategories {padding:5px 0; margin:0 auto;}
div.subcategories a {font-size:10px; font-size:1.5vh;}

div.index {display:table-cell;}

div.browse {display:table; width:100%;}

div.filter {display:table-cell; width:28%; padding:10px 1%; font-size:22px; font-size:2vh;}
div.filter h4 {margin:0 1%; font-size:30px; text-align:center; font-weight:200; color:#adadad; padding-bottom:10px ;}
div.filter h5 {margin:0 2%; font-size:25px; font-weight:200; color:#adadad; padding-top:10px;}
div.filter li {display:block; list-style:none; margin:0 3%;}
div.filter div.links {background:#f2f2f2; padding:0 0.5% 10px; border:solid 5px #ebebeb;}

div.cards {display:table-cell; width:65%;}
div.card {display:block; margin:10px auto 10px; box-shadow:3px 3px 5px #777777; font-size:18px; font-size:2vh; background:#FFF; padding-bottom:10px;}
div.card div.l {display:inline-block; width:28%; padding:1%; text-align:center;}
div.card div.l small {display:block; text-align:center; font-size:10px; font-size:1vh; color:#CCCCCC;}
div.card div.r {display:inline-block; width:68%;}
div.card img {display:block; width:auto; box-shadow:5px 5px 5px #CCC; margin:0 auto; max-width:100%; height:auto;}
div.card h2 {margin:0 1%; font-weight:700; font-size:30px; font-size:3vh; padding-top:5px;}
div.card h2 i {min-width:50px; text-align:center;}
div.card h3 {margin:0 10%; font-weight:400; color:#7e7e7e; font-size:12px; font-size:1.75vh;}
div.card div.desc {display:block; margin:2% 5%;}
div.card li {list-style:none; margin:1% 5%; }

div.page {display:table-cell; width:65%;}
div.page h1 {padding:1% 5%;}
div.page div.callout {display:block; width:85%; margin:10px auto; padding:1% 5%; background:#f5f5f5; border:solid 5px #e3e3e3;}
div.page table {background:#f5f5f5; width:95%; margin:10px auto; border:solid 5px #e3e3e3}
div.page table td {padding:1% 2%; text-align:center;}
div.page table td .fifty {width:50%;}
div.page table li {list-style:inside; margin:0 5%; text-align:left;}
div.page form {background:#f5f5f5; width:75%; margin:10px auto; border:solid 5px #e3e3e3; padding:1% 5%;}
div.page form input {width:95%; padding:0 2.5%; background:#FFF; color:#4d4d4d; border-radius:5px; border:none; font-size:24px; font-size:4vh}
div.page form textarea {width:95%; padding:0 2.5%; background:#FFF; color:#4d4d4d; border-radius:5px; border:none; font-size:18px; font-size:3vh}

div.buttons {display:block; width:100%; margin:0; text-align:left; font-size:12px; font-size:1.5vh; padding-top:15px;}
div.buttons a {display:block; width:90%; height:100%; padding:0 5%; color:#4a4a4a; line-height:30px; font-weight:800; background:#f0f0f0; border-radius:5px; margin:3px 0;}
div.buttons a:hover {background:#d8d8d8; color:#000 !important;}
div.buttons a i {line-height:30px;}
div.buttons a.gmaps i {color:#009b12;}
div.buttons a.yelp i {color:#ff0000;}
div.buttons a.tripadvisor i {color:#0023e5;}
div.buttons a.more {font-weight:bold;}

div.navigation {width:90%; padding:1% 5%; background:#FFF; font-size:20px; font-size:2.5vh; border-radius:10px;}
div.navigation div {display:inline-block; width:49%; min-height:15px; text-align:center;}
div.navigation a {font-weight:bold;}

div.footer {width:100%; min-height:100px; margin:50px auto 0; background:#aaaaaa repeating-linear-gradient(45deg,#aaaaaa,#aaaaaa 25px,#b1b1b1 25px,#b1b1b1 50px);}           

div#map {margin:0 auto; width: 100%; height: 400px; border:solid 5px #CCC;}

@media (max-width: 700px){
    div.filter {display:block; width:90%; margin:0 auto;}

    div.cards {display:block; width:100%;}
    div.page {display:block; width:100%;}

}