@font-face {
    font-family: "MEB";
    src:url("../fonts/Montserrat-ExtraBold.ttf");
}

@font-face {
    font-family: "roboto_regular";
    src:url("../fonts/Roboto-Regular.ttf");
}

a, img {
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

input:focus, button{
	outline: none;
}

p {
	margin: 0;
}

body {
	margin: 0;
	/*background-color: #002538;*/
	background-color: #002030;
    font-family: roboto_regular;
}

#st {
    font-family: MEB;
    font-size: 63px;
    letter-spacing: 1px;
    margin: 0 0 30px 0;
    font-weight: 850;
    color: #e5e5e5;
}

#st > span {
    color: yellow;
    font-weight: 600;
}

.lvid {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 10% 0 4px 0;
}

.header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 0 4px 0;
}

.tunneldogs_logo {
    height:110px;
}

#sb {
    width: 618px;
    background-color: #5e5e5e;
    border-radius: 12px;
}

.search_form {
    width: 100%;
    display: flex;
}

.search_form input {
    width:90%;
    border-radius: 12px;
    padding:5px 10px;
    background-color: transparent;
    color:#fff;
    font-size: 1.5em;
    font-family: roboto_regular;
    border: none;
    letter-spacing: .08em;
    caret-color: yellow;
    height: 30px;
}

.search_form input::placeholder {
    font-family: roboto_regular;
    color:#fff;
    letter-spacing: .08em;
}

.search_form button {
    background-color: transparent;
    color:#fff;
    border:none;
    height:30px;
    cursor:pointer;
}

#mg {
    height: 30px;
    fill: white;
    transform: scale(-1,1);
    margin: 4px 5px 5px 6px;
}

.sub_search_bar {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 25px 0;
}

.sub_search_item_active {
	color: #ff6900;
	font-size: 18px;
	padding: 10px;
	margin: 3px 10px 0 10px;
	cursor: pointer;
}

.sub_search_item {
	color: white;
	font-size: 18px;
	padding: 10px;
	margin: 0 5px;
	cursor: pointer;
}

.plain_ole_homepage, .plain_ole_contact_page {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh);
    width: 100%;
}

.page_wrapper {
	display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 202px);
}

.title_container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.display_area {
	display: flex;
	width: 960px;
	justify-content: center;
	flex-wrap: wrap;
}

.img_display {
    display: flex;
    width: 999px;
    justify-content: center;
    flex-wrap: wrap;
}

.search_display {
    display: flex;
    width: 875px;
    justify-content: center;
    flex-wrap: wrap;
}

.img_meta {
    display: flex;
    justify-content: space-between;
    width: 284px;
    margin: 8px;
    flex-wrap: wrap;
}

.everything_display {
    display: flex;
    width: 875px;
    justify-content: center;
    flex-wrap: wrap;
}

.contact_display {
    display: flex;
    width: 320px;
    flex-direction: column;
    margin-top: 30px;
}

.contact_heading {
    color: white;
    font-size: 21px;
    margin: 15px 0;
}

.contact_text {
    color: #0693e3;
    font-size: 19px;
}

.result_link {
	width: 100%;
}

.search_result {
	display: flex;
	flex-direction: column;
	width: 875px;
	padding:  15px 20px;
	border-radius: 5px;
    margin: 10px 0;
}

.search_result:hover {
	background-color: rgba(5, 42, 61, 1);
    border-radius: 10px;
}

/*0, 37, 56*/
.img_cont {

}

.img_result_box {
    height: 250px;
    width: 300px;
    font-size: 18px;
    margin-bottom: 40px;
    background-color: #003048;
    border-radius: 10px;
}

.img_result_box:hover {
    background-color: rgba(0, 48, 72, .7);
}

.img_box {
    height: 150px;
    width: 300px;
    
}

.img_box img {
    height: 150px;
    width: 300px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

.sr_img {
	width: 100%;
    margin: -100% 0;
    vertical-align: middle;
}

.img_title {
    color: white;
    font-size: 17px;
    letter-spacing: 1px;
    word-spacing: 1px;
    max-height: 50px;
    line-height: 24px;
    overflow: hidden;
    margin: 0 8px 8px 8px;
}

.results {
    width:800px;
}

.img_results {
    margin: 45px 0 0 0;
    width: 990px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
}

.row {
    margin-top: 15px;
    border-bottom: 1px solid #5e5e5e;
    border-radius: 5px;
    padding:15px 12px;
    cursor:pointer;
}

.row_text{
    color:#fff;
    margin:0;
    letter-spacing: .08em;
}

.row_date {
    color:#ff6900;
    margin:0 0 14px 0;
}

.pretty_link {
	color: #0693e3;
	font-size: 16px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	letter-spacing: 1px;
}

.pretty_domain {
	color: white;
	font-size: 14px;
    font-family: monospace;
}

.title {
	font-size: 25px;
	color: white;
	width: 875px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	margin: 11px 0;
	letter-spacing: 1px;
}

.preview {
	color: white;
	font-size: 17px;
	letter-spacing: 1px;
	word-spacing: 1px;
	max-height: 90px;
	line-height: 30px;
	overflow: hidden;
}

.la_verdad {
	color: #ff6900;
}

.empty_message {
    text-align: center;
    font-size: 1.5em;
    color:white;
    margin-top: 45px;
}

.results_found {
    text-align: center;
    font-size: 1.2em;
    margin: 31px 0 0 0;
    color:white;
}

.bottom_cont {
    display: flex;
    flex-direction: column;
}

.bottom_menu {
    width:800px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    margin: -20px 0 50px 0;
}

.bottom_menu_container {
    margin:10px;
}

.bottom_menu_box {
    width:75px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.active {
    color:white !important;
}

.bottom_menu_number {
    font-size: 1em;
    color:#0693e3;
    text-align: center;
}

.menu_arrow {
    height:25px;
}

.mobile_menu {
    width:100%;
    display: none;
    justify-content:center;
    align-items: center;
    margin:20px 0 40px 0;
}

.mobile_page_label {
    font-size: 1.2em;
    color: white;
    text-align: center;
}

.footer {
    height: 40px;
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.footer_text {
    font-size: 16px;
    color: white;
    margin: 5px 0 0 0;
    letter-spacing: 1px;
}

@media (max-width:800px) {
    .tunneldogs_logo {
        height:65px;
    }

    .display_area {
        width: 100%
    }

    .everything_display {
        width:100%;
    }

    .search_display {
        width:100%;
    }

    .search_result {
    	width: 94%;
    	padding: 20px 3%;
        margin: 0;
    }

    .title {
    	width: 100%;
    	font-size: 20px;
    }

    .preview {
    	font-size: 15px;
    	word-spacing: 0;
    	max-height: 90px;
    	line-height: 29px;
    }

    .img_results {
        width: 100%;
    }

    .results {
        width: 100%;
    }

    .sub_search_bar {
        margin: 0 0 10px 0;
    }

    .mobile_menu {
        display: flex;
    }
    .bottom_menu {
        display: none;
    }

    .sub_search_item, .sub_search_item_active {
    	font-size: 16px;
    }

    .sub_search_bar {
    	justify-content: space-around;
        margin-top: 10px;
    }

    .lvid {
    	margin: 100px 0 4px 0;	
    }
    
    .contact_display {
        margin-top: 50px;
        align-items: center;
    }

    .contact_title {
        font-size: 20px;
    }

    .contact_heading {
        font-size: 17px;
    }

    .contact_text {
        font-size: 15px;
    }

    .footer {
        height: 42px;
    }

    .footer_text {
        font-size: 14px;
        margin: 0;
    }
}


@media (max-width:650px) {
    #sb {
        width: 90%;
    }

    #st {
        font-size: 55px;
    }
}

@media (max-width:575px) {
    #st {
        font-size: 50px;
    }
}

@media (max-width:500px) {
    #st {
        font-size: 45px;
    }
    .search_form input {
        font-size: 1.2em;
    }
}

@media (max-width:425px) {
    #st {
        font-size: 40px;
    }
}

@media (max-width:380px) {
    #st {
        font-size: 37px;
    }
}