/*
 Theme Name: KundensNavn

 Author: Nettbrygga AS
 Author URI: https://nettbrygga.no/
 Description: Nettbrygga
 Version: 1.0
 Tags: EventuelleTags
 */

 /*################################*/
/* __________   INDEX   __________ */
/*
1.  > GLOBAL - Global generell CSS som feks body{}, a{} h1{}, osv.
1.1 > P & M - Generell padding og margin CSS hvor marX og padX angir antall EM.

2.  > HEADER - All CSS relatert til elementer i <header>

3.  > TYPOGRAFI - All CSS relatert til generell skelett-typografi

4.  > FOOTER - All CSS relatert til elementer i <footer>

*/

/*################################*/
/* __________ 1.GLOBAL __________ */
/*  Global CSS feks body, a, h1.  */

html{
	height: 100% !important;
}


body{
	font-family: 'Open Sans', sans-serif;
	font-family: 'Poppins', sans-serif;
	-webkit-animation: fadein 1s;
    -moz-animation: fadein 1s;
    -ms-animation: fadein 1s;
    -o-animation: fadein 1s;
    animation: fadein 1s;
	width: 100%;
	min-height: 100vh;
	background: #181a21;
	background: #151521;
	color:#FFF;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}



/*################################*/
/* __________ 2.HEADER __________ */
/* All CSS til elementer i header */

.navbar-brand {
    height: auto;
}
.logo {
    max-width: 18rem;
    padding: 1rem;
}
.header-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.slogan-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
	flex-direction: column;
	font-size: 3rem;
}
.slogan-container h1 {
	font-size: 4rem;
}
.btn-row {
    font-size: 1rem;
}
.btn-row a{
	color: #FFF;
    background: #e74621;
    margin: 0;
    padding: .5rem .75rem;
    display: inline-block;
    transition: all .15s ease-in-out;
    text-transform: uppercase;
    font-family: poppins, sans-serif;
    border-radius: .1rem;
}
.btn-row a:hover, .btn-row a:focus{
	background: #bd4226;
	text-decoration: none;
	outline: 0;
}
@keyframes float {
	0% {
		transform: rotate(-.5deg) translate(0px, 0px);
	}
	50% {
		transform: rotate(.5deg) translate(-3px, -8px);
	}
	100% {
		transform: rotate(-.5deg) translate(0px, 0px);
	}
}
.tourneylogo{
	display: flex;
    align-items: center;
    justify-content: center;
	animation: float 6s ease-in-out infinite;
}
.tourneylogo img{
	padding-top: 2rem;
	max-width: 65%;
	width: 100%;
    height: auto;
}

/*###################################*/
/* __________ 3.TYPOGRAFI __________ */
/*   All CSS til skelett-typografi   */

.font-xs {
	font-size: .75em !important;
}

.font-sm {
    font-size: 1.25em !important;
}

.font-md {
    font-size: 1.75em !important;
}

.font-lg {
    font-size: 2.75em !important;
}

.font-xl {
    font-size: 4em !important;
}

p,a,.opfont {
    font-family: 'Open Sans', sans-serif;
	font-family: 'Poppins', sans-serif;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto',sans-serif;
	font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1.1;
    color: inherit;
}
.fw4 {
	font-weight: 400;
}

.fw7 {
	font-weight: 700;
}


/*################################*/
/* __________ 4.FOOTER __________ */
/*       All CSS til <footer>     */
.main-footer {
    padding: 4rem;
    margin-top: 4rem;
	padding-bottom: 1.75rem;
}
.main-footer .top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.main-footer a{
	color:#fff;
}
.main-footer .top .social a {
    font-size: 2.5rem;
    margin-right: .5rem;
    color: #FFF;
}
.main-footer .logofooter{
	padding-bottom: 1rem;
}
.main-footer ul{
	padding-left:0;
	list-style: none;
	list-style-type: none;
}

.main-footer .copyright {
    padding-top: 2rem;
}

/*################################*/
/* __________ 5.DIV __________ */
/*       All CSS til <footer>     */

.header, .seksjon1, .seksjon2{
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

.vcenter{
	display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
}

.cpad{
	padding-left: 2rem;
    padding-right: 2rem;
}

.content {
    padding: 2rem;
    font-size: 1.2rem;
}
.content h2{
    font-size: 2.75rem;
	text-transform: uppercase;
}
.content a{
	color:#FFF;
	font-weight: 600;
	transition: all .2s ease-in-out;
}


section.seksjon3 {
    color: #121212;
}
section.seksjon3 a {
	color: #FFF;
    background: #e74621;
    margin: 0;
    padding: .5rem .75rem;
    display: inline-block;
    transition: all .15s ease-in-out;
    text-transform: uppercase;
    font-family: poppins, sans-serif;
    border-radius: .1rem;
}
section.seksjon3 a:focus, section.seksjon3 a:hover {
	background: #bd4226;
	text-decoration: none;
	outline: 0;
}




/*Gleam.io*/
.footer.entry-footer {
	display: none; 
	height: 0; 
	padding: 0;
}
/**/

/*BackToTopButton*/
#button {
  display: inline-block;
  background-color: #e74621;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button::after {
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f077";
}
#button:hover {
  cursor: pointer;
  background-color: #ad381d;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}
/**/


/*###############################################################*/
/*###############################################################*/
/*                                                               */
/*                                                               */
/*    MEDIA QUERIES  -  Ingen annen CSS beyond this point!!!     */
/*                                                               */
/*                                                               */
/*###############################################################*/
/*###############################################################*/

/*==========  Mobil først metode  ==========*/
@media only screen and (max-width : 1200px) {

}

@media only screen and (max-width : 992px) {

}

@media only screen and (max-width : 768px) {
	
}

@media only screen and (max-width : 480px) {
	.main-footer .top {
		flex-direction: column;
	}
	.slogan-container {
		font-size: 2rem;
	}
	.content h2 {
		font-size: 2rem;
	}
	.main-footer {
		padding: 2rem;
	}
	.content {
		padding: 0rem;
	}
	.tourneylogo img {
		padding-top: 8rem;
	}
	.logo{
		max-width: unset;
	}
	.vcenter{
    min-height: 100vh !important;
	height: unset;
	}
	.btn-row a{
		margin-top: 1.5rem;
		display: block;
	}
	.btn-row a:last-child{
		margin-bottom:4rem;
	}
	section.seksjon3 .content {
		padding: 1rem;
	}
}

@media only screen and (max-width : 320px) {

}