/*
 * Custom styling for DinTrainer.dk
 * Udvikler: Peter Rosendahl
 * Version: 1.0.0
 * 
 * Indhold:
 * * Text-adjustments-general
 * * Main Menu
 * * Content
 * * * Content_products
 * * * Profil_content
 * * * Contact_content
 * * (media_queries)
 * * * Larger than desktop
 * * * Max-width: 769px
 * * * Max-width: 425px
*/
html, body { height: 100%; }

body { display: flex; flex-flow: column nowrap; font-family: tahoma, Geneva, sans-serif; font-size: 1.5em; }
img {display: block; }
ul {margin-bottom: 0; }
#content { flex: 1 0 auto; letter-spacing: 0.1em; min-height: 30em; padding: 1.5em 0; }
#content .row {margin-bottom: 1.5em}
footer { flex-shrink: 0; background: rgba(135, 24, 26, 1); }
footer p { margin: 0; padding: 0; }
footer a { text-decoration: none; }
footer #instagram { text-align: right; }
.line_space { display: block; height: 0.75em; }
.tablet_hide { display: block; }
.mobile_show { display: none; }
.mobile_hide { display: block; }
#c_breadcrumb { margin: 0; background-image: url(../images/breadcrumbSign.png); background-repeat: no-repeat; padding: 0; padding-left: 2.25em; }
.img_circle { display: block; margin: 0 auto; max-width: 50%; border-radius:50%; }
.has_border { border: 1px solid #000; }

/*		text-adjustments-general
------------------------------------------*/
.white { color: #ffffff; }
.no_underline { text-decoration: none; }
.centered { text-align: center; }
.red { color: rgba(170, 30, 33, 1); }
.bold { font-weight: bold; }
#topWrap { height: 9.15em; background: url(../images/topBg.png) repeat-x; }
#topWrap .container { background: url(../images/top.png); background-size: cover; height: 100%; }
#topWrap .c_logo { display: block; background: url(../images/logo.png); width: 18.7em; height: 8em; }


/*		Main Menu
------------------------------------------*/
#menuWrap { height:3.7em; background: url(../images/menubar.png) repeat-x; }
#menuWrap #topNav { display: block; }
#menuWrap #topNav ul.main_list{ list-style: none; }
#menuWrap #topNav ul.main_list li {
	display: inline-block;
	margin: -1px 0 0 0;
	padding: 1px 0 0 0;
	position: relative;}
#menuWrap #topNav ul.main_list li a{
	display: block;
	margin: 1px 0 0 0;
	padding: 0;
	line-height: 55px;
	font-size: 1.1em;
	color: #ffffff;
	text-decoration: none;
	transition: background 0.1s ease-in-out;}

#menuWrap #topNav ul.sub_list li a { background: rgba(170, 30, 33, 1); margin: 0; }

#menuWrap #topNav #breadcrumb { display: none; }
#menuWrap #topNav #breadcrumb p { padding: 5px 0 0 0; margin: 0; font-size: 0.9em;}
#menuWrap #topNav #breadcrumb h6 { margin: 0; }

/*		Content
------------------------------------------*/
#content img { max-width: 100%; }
#content figure { margin: 0; padding: 0; position: relative; }
#content figure figcaption { position: absolute; bottom: 30px; width: 95%; padding: 0 0 0 5%; font-size: 1.3em; line-height: 2em; color: #fff; background-color: rgba(170, 30, 33, 0.75); }
#content #tests a {text-decoration: none;}
#content #tests a p {text-align: right;}
#content ul { list-style-type: disc }
#content ul li { list-style-position: inside; text-indent: -2em; padding-left: 2em; }
#content ul li.li_head { margin: 1rem 0 0 0; }
#content ul li.li_head:first-child { margin: 0; }
#content ul li.li_desc { list-style: none; margin: 0 0 0 3rem; padding-left: 0; text-indent: 0; }

#content .full_width {width: 100%;}
#content #goderaad { text-align: center; border-top: 3px solid rgba(218, 165, 32, 1); border-bottom: 3px solid rgba(218, 165, 32, 1); padding: 20px 0; }
#content #goderaad a { display: block; width: 210px; margin: 20px auto 0; }
#content #goderaad a img { float: left; width: 25px; }

	/*Content_products*/
#content #products a { color: rgba(170, 30, 33, 1); padding: 20px; display: block; height: 300px; background: url(../images/Forside/product_grid.png) repeat; border: 1px solid #bbb; position: relative; text-decoration: none; overflow: hidden;}
#content #products a#fitmate { background: url(../images/fitmateshadow.png); background-position: -200px -240px; }
#content #products a h3 { font-family: Impact, Anton, sans-serif; letter-spacing: 0.025em; margin-bottom: 5px; text-shadow: 1px 1px 1px #000; }
#content #products a p { line-height: 1.2em; display: block; z-index: 3; }
#content #products a img#fitmate { position: absolute; right: -50px; bottom: -50px; width: 150%; }
#content #products a span {
    color: #ffffff;
    background: url(../images/Forside/mere_icon.png);
    background-size: cover;
    display: block;
    border-radius: 10px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 140px;
    height: 30px;
    text-align: center;
    line-height: 30px;}
#content #products a.black { color: #fff; background: url(../images/Forside/black.png); }
#content #products a.black h3 { color: rgba(170, 30, 33, 1); }

	/*Profil_content*/
.float_right { float:right; }

	/* Hvilestofskifte_content */
.maaling_box { font-size: 0.8em; border: 1px solid #000; padding: 5px;}
.maaling_box.orange b { color: #E88B25; }
.maaling_box.blue b { color: #007ACF; }
#content .maaling_box img { max-width: 75px; }
#content .maaling_box .maaling_beskrivelse { float: right; }

	/* Tests og Beregner */
.beregnerInputFrame { border: dotted; border-color: #aa1e21; border-width: 1px; padding-left: 50px; display: block; }
.yellow { background-color: #FF0; color: #F00; }
.green { background-color: #0F0; color: #060; }
.reddish { background-color: #F00; color: #FF0; }
.reddish2 { background-color: #C00; color: #FF0; }
.reddish3 { background-color: #900; color: #FF0; }
.reddish4 { background-color: #600; color: #FF0; }

#fitness td {border: 1px solid #E1E1E1;}
#fitness td:last-child {padding-right: 15px;}
#form1 input { margin-bottom: 0;}
#form1 .text_right {text-align: right;}
form .submit {min-width: 100px;
    color: #eee;
    text-transform: uppercase;
    margin-top: 10px;
    background-color: #aa1e21;
    border: none;
    padding-left: 15px;
    padding-right: 15px;
    -webkit-transition: -webkit-box-shadow 0.3s linear;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#aa1e21), to(#87181a));
    background: -moz-linear-gradient(25% 75% 90deg,#87181a, #aa1e21);
	display: block;
	margin: 0 auto;}
form .submit:hover { -webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000; -o-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000; }
#form2 td, #form3 td, #form4 td {margin: 0; padding: 0; border: none;}

	/*Referencer_content*/

.ref_name { display: block; text-align: left; }

	/*Contact_content*/
form#contact_form .row { margin: 0; }
form#contact_form #copy_me {margin:0;}
/*		Footer
------------------------------------------*/
footer #facebook, footer #footer_info, footer #instagram { padding: 30px 0; }
footer #footer_info { background: rgba(0, 0, 0, 1); }
footer #instagram a p, footer #facebook a p {margin: 0 1em;}


/*		Larger than desktop
------------------------------------------*/
@media screen and (min-width: 769px) {
	#menuWrap #topNav ul.main_list li.forside {display: none;}
	#menuWrap #topNav ul.main_list li a{ width: 155px; text-align: center; }
	#menuWrap #topNav ul.main_list li a:hover{ background: rgba(135, 24, 26, 1); transition: background 0.1s ease-in-out;}
	#menuWrap #topNav ul.main_list li:hover > a { background: rgba(135, 24, 26, 1); transition: background 0.1s ease-in-out;}
	#menuWrap #topNav ul.sub_list {
		position: absolute;
		top: 56px;
		left: 0;
		display: none;
		margin: 0;
		z-index: 2;}
	#menuWrap #topNav ul.main_list li:hover ul.sub_list { display: block; }
	#menuWrap #topNav ul.main_list li.icon { display: none; }
	footer #facebook, footer #instagram { padding: 3.5em 0 0 0; }
	footer #facebook img { float: left; margin: 0 0.75em 0 0; max-width: 20%; }
	footer #instagram img { float: right; margin: 0 0 0 0.75em; max-width: 20%; }
}

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

	footer .columns { margin-left: 0; }
	footer .three.columns { width: 25%; }
	footer .six.columns { width: 50%; }

}


	/*Tablet Landscape*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1280px) and (orientation: landscape) {
	#content #products img { max-width: 80%; }
	#content #products h3 { font-size: 1.6em; }
}

/*		Max-width 769px
------------------------------------------*/
@media screen and (max-width:769px) {

	.tablet_hide {display: none;}
	#topWrap .container { background: none;}
	#topWrap .c_logo {margin: 0 auto;}
	#menuWrap .container {width: 100%; padding: 0;}
	#menuWrap #topNav ul.main_list li { padding-left: 20px;}
	#menuWrap #topNav ul li:not(.active), #menuWrap #topNav ul li.active {display: none;}
	#menuWrap #topNav #breadcrumb { display: block; padding-left: 20px; }
	#menuWrap #topNav #breadcrumb h5 { line-height: 1; }
	#menuWrap #topNav ul.main_list li.icon {
		float: right;
	    display: inline-block;
	    width: 100px;
	    position: absolute;
	    right: 0;
	    top: 1px;
	    border: 1px solid #ffffff;
		text-align: center;
		padding: 0;}
	#menuWrap #topNav ul.main_list li ul.sub_list {margin: -1px 0;}
	#menuWrap #topNav ul.main_list li a { margin: 0;}
	#menuWrap ul.menu_responsive li.icon { padding: 0; }
	#menuWrap ul.menu_responsive li.icon a { text-align: center; }
	#menuWrap ul.menu_responsive li { float: none; display: block !important; z-index: 2; background: rgba(170, 30, 33, 1); }
	#menuWrap ul.menu_responsive li:not(:first-child) { margin: -1px 0 0 0; }
	#menuWrap ul.menu_responsive li:not(.active) a { display: block; z-index: 3; width: 100%; }

	#content #products a h3 { font-size: 1.4em; }
	#content figure figcaption { font-size: 0.8em; bottom: 15px;}

	footer { background: rgba(0, 0, 0, 1); }
	footer .four.columns {width: 33.33%;}
	#footer .container {padding: 0; width: 100%; }
	#footer #instagram, #footer #facebook {padding: 30px 20px; background: rgba(170, 30, 33, 1); }
	#footer img { max-width: 30%; margin: 0 auto; }
	#footer p {text-align: center;}
}


/*		MAX-425
------------------------------------------*/
@media screen and (max-width: 425px) {

	#menuWrap #topNav #breadcrumb h5 { line-height: 1.5; }
	.mobile_show { display: block; }
	.mobile_hide { display: none; }
	.beregnerInputFrame { border: dotted; border-color: #aa1e21; border-width: 1px; padding-left: 0; display: block; }

	.img_circle { max-width: 50%; }
	.ref_name { text-align: center; }

	#content figure figcaption { font-size: 1.2em; bottom: 30px;}
	footer .four.columns { width: 100%; }
	#footer .container { width: 100%; }
	#footer img { max-width: 20%; }
	#footer #facebook img { float: left; margin-right: 20px; }
	#footer #instagram img { float: right; margin-left: 20px; }
}


	/*Phone Landscape*/
@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) {
	#content #products .four.columns { width: 33%; }
	#content #products .columns { margin-left: 0; }
	#content #products p { font-size: 0.8em; }
	#content #products a span { width: 110px; }
}

/* Larger than phablet (also point when grid becomes active) */
@media only screen and (min-width: 350px) { 
	#content #products a h3 { font-family: Impact, Anton, sans-serif; letter-spacing: 0.025em; margin-bottom: 5px; text-shadow: 1px 1px 1px #000; }
 }

@font-face {
font-family: 'Impact';
src: url('font/impact.ttf');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Tahoma';
src: url('font/tahoma.ttf');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Tahoma';
src: url('font/tahomabd.ttf');
font-weight: bold;
font-style: bold;
}


@font-face {
font-family: 'Anton';
src: url('font/anton.ttf');
font-weight: bold;
font-style: bold;
}