/* --- GLOBAL --- */

/* Make all padding and margin fit into actual size of containers */
* {
    box-sizing: border-box;
}

/* Entire document and page view */
html {
    background-color: rgba(53,44,49,1);
    font-size: 14px;
    height: 100%;
}

/* BODY */
body {
    margin: 0;
    padding: 0;
    font-family: "Roboto", Helvetica, sans-serif;
    background-color: rgba(53,44,49,1);
    color: #e1bd99;
    height: 100%;
}

/* HEADING, TEXT, FONT */
h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto", Helvetica, sans-serif;
    color: #e1bd99;
    text-decoration: none;
    font-weight: 400;
    text-transform: none;
}
p {
    font-family:  "Roboto", Helvetica, sans-serif;
    color: #e1bd99;
    text-decoration: none;
    font-weight: 400;
}

a, a:visited {
	font-family:  "Roboto", Helvetica, sans-serif;
	color: #e1bd99;
	text-decoration: none;
    font-weight: 400;
    }
a:active, a:hover {
	font-family:  "Roboto", Helvetica, sans-serif;
	color: #FFF;
	text-decoration: underline;
    font-weight: 400;
    }

/* SITE CONTAINER */
.site {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}
/* --- end global styles */



/* --- HEADER & NAVIGATION --- */

.site-header {
    position: sticky;
    top: 0px;
    z-index: 10;
    width: 100%;
    min-height: 100px;
	background-color: rgb(53,44,49);
    margin: 0;  
   transition: all .8s ease-in-out;
}

/* NAVIGATION */

/* Hide mobile menu on desktop */
.mobile-menu-container{
    display: none;
}

/* Hide mobile menu toggle on desktop */
.mobile-toggle {
    display: none;
}

/* Flexbox for site navigation */
.nav-container {
    position: relative;
    width: 90%;
    min-height: 50px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: stretch;
    margin: 0 auto;
}

/* Flex item positioned to the left */
.nav-container-left {
    position: relative;
    flex: 20%;
    max-height: 100%;
    align-self: flex-start;
}

/* Flex item positioned to the right */
.nav-container-right {
    position: relative;
    flex: 80%;
    align-self: stretch;
    max-width: 80%;
    margin: 0 auto;
}

/* Flex box inside flex item container, positioned at the right */
.nav-container-right-flexbox {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;  
}

/* Flex item (Help Menu) positioned at the top, inside the 'nav-container-right-flexbox'*/
.help-menu-container {
    position: relative;
    flex: 100%;
    align-self: flex-end;
    width: 100%;
    margin: 0 auto;
}

/* Flex item (Global Menu) positioned at the bottom, inside the 'nav-container-right-flexbox'*/
.global-menu-container {
    position: relative;
    flex: 100%;
    align-self: flex-start;
    max-width: 100%;
    margin: 0 auto;
}

/* SITE TITLE (inside 'nav-container-left') */
.site-title-container {
    position: relative;
}
.site-title-container img {
    max-width: 60%;
    padding: 2px;
}
/* Style img item link */
.site-title-container img:hover {
  filter: drop-shadow(3px 3px 10px #e1bd99) drop-shadow(-3px -3px 10px #e1bd99);
   transition: all .1s ease-in-out;
}

/* 
HELP MENU (inside 'nav-container-right')
.help-menu-container ul{
    list-style: none; 
}
.help-menu-container ul li a:hover{
   color: #fedaf7;
   transition: all .2s ease-in-out;
}

.help-menu-list {
    text-align: right;
    font-size: 1rem;
    padding: 0;
}

.help-menu-list li{
    display: inline-block;
    padding: 0;
    margin-left: 10px;
}
 */
 

/* GLOBAL MENU (inside 'nav-container-right') */

.global-menu-container #mobileMenu {
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

/* Remove list style */
.global-menu-container ul {
   list-style: none;
   display: flex;
   flex-flow: row nowrap;
}

/* Place items horizontally */
.global-menu-container ul li {
   flex: 20%;
}

/* Size img menu items */
.global-menu-container ul li img {
    max-width: 50%;
}

/* Style img item links */
.global-menu-container ul li img:hover {
  filter: drop-shadow(5px 5px 10px #e1bd99) drop-shadow(-5px -5px 10px #e1bd99);
   transition: all .1s ease-in-out;
}

/* Style item links */
.global-menu-container ul li a{
	font-family: 'Maeninaja', sans-serif;
	text-decoration: none;
	color: #fff;
}
.global-menu-container ul li a:hover{
   color: #ef9b16;
   transition: all .1s ease-in-out;
}

/* Style menu text */
.global-menu-list {
    display: block;
    text-align: left;   
    margin: 0 auto 0 40px;
    padding: 20px 0 0px 0;
    font-size: 2.8rem;
}
.global-menu-list li{
    padding: 20px;
}

/* --- end header/navigation styles */



/* --- MAIN CONTENT --- */

/* Styles for general content */
.main-content {
    position: relative;
    background-color: rgb(53,44,49);
    margin: 0 auto;
    width: 100%;
    min-height: 80vh;
}

.main-bg-container {
    position:fixed;
    background-image: url();
    background-size: cover;
	background-repeat:no-repeat;
	background-position: top;
    min-width: 50%;
    height: 100%;
    top: 50px;
    margin: 0;
} 

/* HOME, LATEST, ALLA AKTER & RESA/ÄTA/SOVA - ARTICLE */

article {
    position: relative;
    margin: 0px auto;
    height: auto;
    padding: 0px;
    width: 100%;
}

#home, #Latest, #AllaAkter, #SignUp, #press-media {
	min-height: 600px;
}

#home {
    margin: 0px auto;
}

/* styling for page titles */
.main-page-title {
    position: relative;
    flex: 100%;
   	width: 50%; 
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}
.main-page-title-separator {
    position: relative;
    width: 50%;
    margin: 0 auto;
    padding: 2px;
    background-image: url(pix/separator.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12%;
}
.main-page-title h3{
    margin: 10px auto;
    color: #e1bd99;
    font-weight: 800;
    /* filter: drop-shadow(-1px 1px 2px #501554) drop-shadow(1px -1px 2px #501554); */
    
}

/* --- end main content */


/* --- FLEXCONTAINERS --- */

.main-page-flexcontainer {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    margin: 20px auto;
    padding: 20px 80px;
    width: 100%;
    height: auto;
    align-content: flex-start;
    align-items: flex-start;
    /* background-color: rgba(53,44,49,.8); */
}

.latest-flexcontainer {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    margin: 50px auto;
    padding: 20px 80px;
    width: 100%;
    height: auto;
    align-content: flex-start;
    align-items: flex-start;
    /* background-color: rgba(53,44,49,.8); */
}

.alla-akter-flexcontainer {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    height: 50%;
    align-content: flex-start;
    align-items: flex-start;
    /* background-color: rgba(53,44,49,.8); */
}

/* flexcontainers content - full, left & right  */

.main-page-flexcontainer-full-width, .latest-page-flexcontainer-full-width {
    position: relative;
    flex: 100%;
   	width: 50%; 
    margin: 10px auto;
    padding: 0px;
    text-align: left;
   }

   #PEPP20 .main-page-flexcontainer-full-width {
    position: relative;
    flex: 100%;
   	width: 50%; 
    margin: 10px auto;
    padding: 0px;
    text-align: center;
   }
    #PEPP20 .main-page-flexcontainer-full-width h2 {
        color: #FFF;
        font-weight: 600;
   }

      #PEPP20 .single-buttons-flexcontainer .single-buttons button:hover {
        background-color: #FFF;
   }

.main-page-flexcontainer-left {
   position: relative;
   flex: 50%;
   margin: 5px auto 20px auto;
   padding: 0px;  
   max-width: 100%;
}

.main-page-flexcontainer-right {
    position: relative;
    flex: 50%;
    max-width: 100%;
    margin: 5px auto 5px auto;
    padding: 0px;
    align-self: flex-start;
}

#Vargavidderna .main-page-flexcontainer-left {
	margin: 5px auto;
}

.latest-page-flexcontainer-left-artists {
   position: relative;
   flex: 40%;
   margin: 5px auto 20px auto;
   padding: 0px;  
   max-width: 80%;
}

.text-flex-left {
	flex: 55%;
	padding-right: 30px;
}

.latest-page-flexcontainer-right-artists {
    position: relative;
    flex: 50%;
    max-width: 80%;
    margin: 5px auto 5px auto;
    padding: 0px;
    align-self: flex-start;
}

.img-flex-right {
	flex: 40%;
	margin-bottom: 50px;
}

/* --- end flexcontainers */


   
/* --- SPECIFIC TEXT STYLING --- */

/* General page text (home, latest, orders, etc. ) */
.info-text-start-heading {
	position: relative;
	padding: 0px 10px;
}

.info-text {
	position: relative;
	margin: 5px auto;
	padding: 0px 10px;
}

.info-text h3, .info-text-start-heading h3 {
	margin: 5px 0px;
}

.info-text-start-heading h6 {
	margin: 5px 0px 10px 0px;
	font-style: italic;
	border-top: 1px solid #e1bd99;
	max-width: 100px;
	padding: 5px;
}

.main-page-flexcontainer-right .info-text-start-heading:not(:first-child) {
	margin-top: 10px;
}

/*  Vargavidderna text styling */
.single-text-start-heading {
	position: relative;
	padding: 0px 10px;
	text-align: center;
	border-top: 1px solid;
	margin: 0 50px;
}

.single-text-start-heading h3 {
	margin: 10px 0px;
}
.single-text-chapter-heading h3 {
	margin: 5px 0px;
}

.single-text-chapter-heading {
	position: relative;
	padding: 0px 30px;
}

.single-text {
	position: relative;
	margin: 12px auto;
	padding: 0px 30px;
}

.single-text-karta {
position: relative;
display: flex;
margin: 0 auto;
}

.single-text-karta iframe {
	position: relative;
	flex: 45%;
	margin: 0 auto;
	padding: 0px;
	max-width: 85%;
}

/* --- end specific text styling */


/* --- IMAGE CONTAINERS & STYLING --- */

/* HOME */

/* Flexcontainer for image content in home-div */
.home-img-flexcontainer {
    position: relative;
    display: flex;
    margin: 0 auto;
    width: 100%;
    min-height: 600px;
    align-content: center;
 	align-items: flex-start;
  	padding-top: 0%;
}

.home-img-container {
    position: relative;
    margin: 0 auto;
    flex: 80%;
    text-align: center;
}

/* Image in image container */
.home-img-container img {
    position: relative;
    width: 100%;
}


/* LATEST */

/* Latest news image styling */
.latest-img-container {
    position: relative;
    margin: 10px auto;
    padding: 0px;
    text-align: center;
    max-width: 80%;
}
.latest-img-container img {
    margin: 5px auto;
    max-width: 100%;
}

/* Artist image styling 

.latest-img-container #NewArtistOtur-logo {
max-width: 45%;
margin:0px 0px 0 0px;
}
*/

/* VARGAVIDDERNA */

.single-img-flexcontainer {
    position: relative;
    display: flex;
    margin: 0 auto;
    width: 100%;
    align-content: center;
 	align-items: flex-start;
 	padding-bottom: 20px;
}

/* Image container inside flexcontainer for vargavidderna */
.single-img-container {
    position: relative;
    margin: 0 auto;
    width: 90%;
    text-align: center;
}

/* Image in image container */
.single-img-container img {
    position: relative;
    width: 100%;
}

#single-spelaren {
    position: relative;
    margin: 40px auto 20px auto;
    width: 80%;
    text-align: center;    
}

#single-spelaren audio {
    width: 100%;
  margin: 0 auto;
  padding: 0;  
}
.single-buttons-flexcontainer {
	display: flex;
    flex-flow: column wrap;
    align-items: center;
	margin: 0 auto;
	max-width: 99%;
	}
.single-buttons {
	display: block;
	flex: 50%;
	padding: 20px 5px;
	align-items: center;
	align-self: center;
	margin: 0 auto;
	max-width: 99%;
	}
	
.single-buttons button {
  position: relative;
  display: block;
  width: auto;
  padding: 6px 10px;
  margin:  0 auto;
  border: 1px solid #443b2d;
  color: #352c31;
  background-color: #e1bd99;
  text-transform: uppercase;
  }

  .single-buttons button a, .single-buttons button a:visited {
  color: #352c31;
  font-weight: 600;
  text-decoration: none;
  }
/* --- end image containers & styling */


 /* --- SOME STYLING --- */
 
.latest-some-flexcontainer {
    position: relative;
    width: 100%;
    max-width: 100px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    align-content: center;
    margin: 10px auto 20px auto;
}
.latest-some-grid {
    position: relative;
    flex: calc(100%/2);
    max-width: 50%;
    margin: 0 auto;
    text-align: center;
}
.latest-some-grid img {
    width: 50%;
    border-radius: 50%;
    border:  0px ;
}
.latest-some-grid img:hover {
    filter: drop-shadow(5px 5px 10px #e1bd99) drop-shadow(-5px -5px 10px #e1bd99);
   transition: all .1s ease-in-out;
}


/* Latest video player */
.latest-video-container {
    overflow: hidden;
    padding-top: calc(394 / 700 * 66%);
    position: relative;
    max-width: 66%;
    flex: 66%;
    margin: 20px auto;
    align-self: center;
}
.latest-video-container iframe {
    border: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
}


.latest-extra-links-container {
    position: relative;
    margin: 0 auto 80px auto;
}
.latest-extra-links {
    position: absolute;
    text-align: right;
    right: 0;
    margin: 0px auto;
    
}

.latest-extra-links ul {
   margin: 10px;
}
.latest-extra-links ul li {
    display: inline-block;
    list-style: none;
    margin: 10px;
    line-height: 1.8rem;
}
.latest-extra-links ul li a{;
    font-family: "Roboto", Helvetica, sans-serif;
    color: #443b2d;
    background:rgb(255, 255, 255);
    text-decoration: none;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1rem;
    padding: 10px;
    margin: 5px auto;
    border: 1px solid #443b2d;
}

.latest-extra-links ul li a:hover{
    color: #fff;
    background:#e1bd99;
    transition: all .1s ease-in-out;
}

/* --- end SoMe styling */


/* --- ORDER FORM STYLING --- */

#order .fine-line {
    font-size: .8rem;
    font-style: italic;
}
.hide-input {
	display: none;
	}

.order-flexcontainer {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	align-content: center;
	align-items: flex-start;
	margin: 0 auto;
	width: 100%;
	}

.order-flexcontainer .order-form {
	max-width: 40%;
	flex:43%;
	text-align: left;
	margin: 0 auto;
	padding-bottom: 10px;
	}
	
	.order-flexcontainer .order-form-summering {
	max-width: 55%;
	flex:57%;
	text-align: left;
	margin: 0 auto;
	padding-bottom: 15px;
	}
	
	.order-flexcontainer .order-form-extra {
	max-width: 97%;
	flex: 100%;
	margin: 0 auto;
	padding: 0px;
	}

.order-flexcontainer fieldset {
	padding: 10px 20px;
	}	

.order-form-extra-flexcontainer {
	display: flex;
	flex-flow: row wrap;
	align-content: center;
	align-items: center;
}

.order-form-extra #SpecPref {
	flex: 45%;
	max-width: 45%;
	margin: 0 auto 5px 0;
}
.order-form-extra #Email {
	flex: 45%;
	max-width: 45%;
	margin: 0 auto;
}

.inputs-flexcontainer {
	display: flex;
	flex-flow: row wrap;
	margin: 0 auto;
	}

.visible-inputs {
	max-width: 50%;
	flex: 50%;
	}
	
.hidden-inputs-amount {
	max-width: 30%;
	flex: 30%;
	
	}

.order-flexcontainer .order-form label, .order-flexcontainer .order-form-extra label {
	display:block;
	text-align: left;
	font-size: .8rem;
	margin: 5px 1px;
	}

/* Order form inputs styling   */

.order-form select {
  width: 90%;
  padding: 6px 10px;
  margin-bottom: 10px;
  background-color: #edeae4;
  border: 1px solid #443b2d;
}

.order-form input[type=number] {
  width: 100%;
  padding: 6px 10px;
  margin-bottom: 10px;
  background-color: #edeae4;
  border: 1px solid #443b2d;
}

.order-form input[type=text] {
  width: 90%;
  padding: 6px 10px;
  margin-bottom: 10px;
  background-color: #edeae4;
  border: 1px solid #443b2d;
}

.order-form-extra #SpecPref textarea, .order-form-extra #Email input[type=email] {
  width: 90%;
  padding: 6px 10px;
  margin: 5px auto 10px auto;
  background-color: #edeae4;
  border: 1px solid #443b2d;
  resize: none;
}

.order-flexcontainer .order-form-summering #Summering {
	display: flex; 
	flex-flow: row wrap;
	font-size: .9rem;
}

.order-flexcontainer .order-form-summering .text-left {
	flex: 80%;
	margin:10px 0 5px 0px;
	}
	
.order-flexcontainer .order-form-summering .text-right {
	flex: 15%;
	text-align: left;
	font-weight: 600;
	margin: 10px 0 5px 0;
	position: relative;
	padding-left: 10px;
	}
	
	.order-flexcontainer .order-form-summering .text-right span {
	position: absolute;
	right: 0;
	}
	
.order-flexcontainer .order-form-summering #totalOrders {
	float: left;
	font-size: .9rem;
	margin: 30px 0 5px 0;
	}

.order-flexcontainer .order-form-summering #totalPrice {
	float: right;
	margin: 30px 0 5px 0;
	}
	


/* Orders form buttons */
	
.order-flexcontainer .order-buttons {
	display: block;
	flex: 100%;
	padding: 10px 5px;
	text-align: right;
	align-self: flex-end;
	margin: 0 auto;
	max-width: 99%;
	}
	
.order-flexcontainer input[type=button] {
  position: relative;
  display: block;
  width: auto;
  padding: 6px 10px;
	margin: 5px 0;
  border: 1px solid #443b2d;
  color: #352c31;
  background-color: #e1bd99;
  text-transform: uppercase;
  }
  
.order-flexcontainer input[type=submit], .order-flexcontainer input[type=reset] {
  position: relative;
  width: auto;
  padding: 6px 10px;
  margin: 5px;
  border: 1px solid #443b2d;
  color: #352c31;
  background-color: #e1bd99;
  text-transform: uppercase;
  } 

/* --- end order form styling */

/* --- CONTACT FORM STYLING --- */

/* 
.contact-flexcontainer {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	align-content: center;
	align-items: center;
	margin: 0 auto;
	width: 100%;
}

.contact-flexcontainer .info-text{
	max-width: 35%;
	flex:35%;
	text-align: left;
	margin: 0;
}

.contact-flexcontainer .info-text label {
	display:block;
	text-align: left;
}

.contact-flexcontainer .contact-buttons {
	display: block;
	flex: 30%;
	padding: 0px 5px;
	text-align: center;
	align-self: flex-end;}

.contact-flexcontainer select, .contact-flexcontainer input[type=text], .contact-flexcontainer input[type=email] {
  width: 90%;
  padding: 10px 20px;
  margin: 5px 0;
  background-color: #edeae4;
  border: 1px solid #443b2d;
  }

.contact-flexcontainer input[type=text]:focus, .contact-flexcontainer input[type=email]:focus, .contact-flexcontainer textarea:focus {
  background-color: #fff;
  outline:1px solid #D730C4;}

/* Styling for BUTTONS and contact form buttons */

/* 
.contact-flexcontainer input[type=button], .contact-flexcontainer input[type=submit], .contact-flexcontainer input[type=reset] {
  position: relative;
  width: 100px;
  padding: 10px 20px;
  margin: 5px;
  border: 1px solid #443b2d;
  color: #fedaf7;
  background-color: rgba(244, 100, 238,1);
  text-transform: uppercase;
  }
  
.contact-flexcontainer input[type=submit]:focus, .contact-flexcontainer input[type=submit]:hover {
    background-color: rgba(215, 48, 196,1);
    border: 1px solid #000;
    color: #FFF;
    }
.contact-flexcontainer input[type=reset]:focus, .contact-flexcontainer input[type=reset]:hover {
  background-color: rgba(215, 48, 196,1);
  border: 1px solid #000;
  color: #FFF;
  }
 
.upp-btn {
    text-align: right;
    align-self: flex-end;
    flex: 100%;
    margin: 0 12px 0 auto;
}

.upp-btn a{
    font-family: "Roboto", Helvetica, sans-serif;
    color: #443b2d;
    background:rgb(255, 255, 255);
    text-decoration: none;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.2rem;
    padding: 8px;
    border: 1px solid #443b2d;
}
.upp-btn a:hover{
    color: #fff;
    background:rgb(247, 148, 61);
    transition: all .1s ease-in-out;
}
 */

/* - end styles for contact form & buttons */


/* Press/Media */
/* 
.press-media-login-container {
    position: relative;
    margin: 0 auto;
    height: 100%;
}
 */

/* --- end main content styling */


/* --- FOOTER --- */

.footer-content {
    position: relative;
    height: auto;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    background-color: rgba(53,44,49,1);
    margin: 0 auto;
    padding-top: 20px;
    align-content: flex-start;
}

.footer-social-media-contact, .footer-other-contact {
    position: relative;
    flex: 100%;
    margin: 0 auto;
}

.footer-other-img-container {
	flex: 100%;
	margin: 0 auto;
	text-align: center;
}
.footer-other-img-container img{
	margin: 0 auto;
    width: 10%;
}
.footer-other-contact p{
    font-size: .8rem;
    font-style: italic;
    text-align: center;
    color: #e1bd99;
    letter-spacing: 1px;
    margin: 0 auto;
    padding: 10px;
}


.social-media-flexcontainer {
    position: relative;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    margin: 0 auto;
}

.social-media-grid {
    position: relative;
    flex: calc(100%/4);
    max-width: 25%;
    margin: 0 auto;
    text-align: center;
}

.social-media-grid img {
    border-radius: 50%;
    max-width: 40%;
}

.social-media-grid img:hover {
    background-color: #e1bd99;
    background-blend-mode: multiply;
    transition: all .2s ease-in-out;
}


/* --- end footer styling */


/* --- RESPONSIVE VIEWS --- */

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

	/* --- FLEXCONTAINERS --- */
	
	.main-page-flexcontainer {
		padding: 20px 20px;
	}
	
	/*---  NAVIGATION --- */
		
	.help-menu-list {
		font-size: .9rem;
	}

	.global-menu-list {
		font-size: 1.6rem;
	}
 
	.global-menu-list li {
		padding: 10px;
	}

	.latest-flexcontainer-left, .latest-flexcontainer-right {
		flex: 50%;
  	max-width: 50%;
    align-self: center;
  }

.latest-img-container {
margin: 10px 0px 0px -30px;
max-width: 50%;
}


/* --- ORDERS --*/
  
	.order-flexcontainer .order-form-summering .text-right {
		padding-left: 0px;
		flex: 20%;
		}
}

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

/* navigation */
.site-header {
	min-height: 110px;
}

.nav-container {
    width: 100%;
    min-height: 110px;
} 

.global-menu-list {
   font-size: 1.4rem;
 }   
 
.global-menu-list li {
     padding: 5px;
}  

/* content */
article {
    width: 90%;
}

.latest-flexcontainer {
	padding: 20px 40px;
	}

.latest-title-container {
    max-width: 80%; 
}

.latest-img-container {
margin: 20px 0px 0 -30px;
max-width: 50%;
}

/* --- ORDERS --*/
		
	.order-flexcontainer .order-form-summering .text-left {
		flex: 75%;
	}


/* CONTACT FORM */
/* 

.contact-flexcontainer .info-text{
	max-width: 50%;
	flex:50%;
	text-align: left;
	margin: 0;
}
.contact-flexcontainer .info-text label{
	display:block;
	text-align: left;
}

.contact-flexcontainer .contact-buttons {
	flex: 100%;
	max-width: 100%;
	text-align: center;
	margin-top: 30px;
	}
 */
}
    
@media only screen and (max-width: 800px), (max-width: 768px) and (orientation: landscape) {
   
	/* navigation */
	.site-header {
		min-height: 50px;
	}
	
	.nav-container {
    min-height: 50px;
	}
	
	.help-menu-list {
    font-size: .8rem;
	}
	
	.global-menu-list {
    font-size: 1rem;
	}
	
 /* content */

	.latest-title-container {
    max-width: 90%; 
    margin: 0 0 0 30px;
	}

	.latest-img-container {
		margin: 40px 0px 0 -30px;
		max-width: 55%;
	}

/* 
	.latest-video-container {
    padding-top: calc(394 / 700 * 90%); 
    max-width: 90%;
    flex: 90%;
    order:3;
   }
    
	.upp-btn {
		order: 4;
  }
 */
    
    /* -- ORDERS -- */
    
	.order-flexcontainer .order-form, .order-flexcontainer .order-form-summering, .order-flexcontainer .order-form-extra, .order-flexcontainer .order-buttons {
		max-width: 85%;
		flex: 85%;
	}

	.visible-inputs {
  	max-width: 25%;
  	flex: 25%;
	}

	.hidden-inputs-amount {
		max-width: 20%;
  	flex: 20%;
	}


	.order-form input[type=text] {
		width: 50%;
	}

	.order-form-extra #SpecPref textarea, .order-form-extra #Email input[type=email] {
  	width: 90%;
	}

	.order-form-extra #SpecPref, .order-form-extra #Email {
  	flex: 48%;
  	max-width: 48%;
  }
  
  .order-form-extra #SpecPref textarea, .order-form-extra #Email input[type="email"] {
  	width: 95%;
  }
  
}

	/* MOBILE */
	@media only screen and (max-width: 600px) {

	/* navigation */
	
	.site-header {
		background-color: rgba(53,44,49,0);
	}

	.nav-container {
    background-color: rgba(53,44,49,1);
  }
    
	.nav-container-left {
    flex:30%; }
    
	.nav-container-right {
    flex: 70%; }
    
	.nav-container-center {
    flex: 70%; }
    
   /* show mobile toggle */
   .mobile-toggle {
       display: block;
       margin: 0 auto;
       text-align: center;
       }
   
   /* hide desktop menu */
   .desktop-menu-container {
       display: none;
       }
   
   /* make mobile version of menu as overlay */
   .mobile-menu-container {
       display: block;
       height: 0%;
       width: 100%;
       overflow-y: auto;
       position: fixed;
       top: 0;
       left: 0;
       z-index: 99;
       margin: 0 auto;
       text-align: center;
       background-image: linear-gradient(180deg,rgba(28,19,5,1)65%,rgba(28,19,5,0));
       transition: all .5s ease-in-out;
       }
   
   /* hide navigation when mobile toggle closed */
   .global-menu-container #mobileMenu {
       display: none;
       }

   /* style for arrow menu */
   .global-menu-container .mobile-toggle a.show-mobile-menu {
      display: block;
      position: fixed;
      top: 14px;
      left: calc(50% - 32px);
      z-index: 99;
      margin: 0 auto;
      text-align: center;
      }
       
   .fa {
       line-height: 2;
       color: #e1bd99;
       transition: all .3s ease-in-out;
       }
       
       
    .fa::after {
    	content: "MENU";
			padding-left: 4px;
    	font-family: "Roboto", Helvetica, sans-serif;
    	text-decoration: none;
    	font-weight: 600;
			text-transform: uppercase;
			}
       
    .fa:hover, .global-menu-container:hover #makeActive {
       color:rgba(255,255,255,1);
       transition: all .3s ease-in-out;
       }
   
   /* logo image in mobile menu */
   .mobile-menu-container a img {
       position: relative;
       top: 0;
       margin: 10px auto 0px auto;
       text-align: center;
       max-width: 30%;
       padding: 0px;
       }
   
   /* place items vertically */
   .mobile-menu-container ul li {
       display: block;
       }
       
   /* style mobile links */
   .mobile-menu-container ul li a {
      text-decoration: none;
      color: #e1bd99;
      }
      
   .mobile-menu-container ul li a:active {
      color: rgba(255, 255, 255,1);
      transition: all .1s ease-in-out;
      }
      
   #mobileMenu .mobile-menu-list {
       margin: 20% auto 0 auto;
       padding: 0;
       }
       
   .mobile-menu-list {
       font-size: 1.2rem;
       letter-spacing: .2rem;
       }
       
   .mobile-menu-list li {
       padding: 5px;
       margin: 0;
       }

	/* style help menu for mobil */
	.help-menu-list {
    font-size: .7rem;
  	}

	ul.help-menu-list {
    padding: 0;
  	 }

	.help-menu-list li{
    margin: 0 10px 0 0;
  	 }

	/* -- GENERAL CONTENT -- */
	
	article {
    width: 90%;
  	 }
    
	/* FLEXCONTAINERS 100% */
	
	#order .main-page-flexcontainer {
    padding: 20px 15px;
  }
  
	.main-page-flexcontainer-left, .main-page-flexcontainer-right {
    flex: 100%;
    max-width: 100%;
  	 }

	.latest-page-flexcontainer-left-artists {
    flex: 100%;
    max-width: 100%;
    margin: 20px auto;
  	 }
    
	.latest-page-flexcontainer-right-artists.img-flex-right {
		padding-bottom: 40px;
		}
    
	.latest-page-flexcontainer-right-artists {   
		border-bottom: 3px solid;
 		border-image-slice: 1;
  	border-width: 1.5px;
  	border-image-source: linear-gradient(to left, #000, #e1bd99, #000); 
    flex: 100%;
    max-width: 100%;
    margin: 20px auto;
 	 }
    

         
	.main-page-title-separator {
    background-size: 24%;
		}

	.home-img-flexcontainer {
  	padding-top: 20%;
		}

/*  ?? */
	.about-flexcontainer {
    padding: 0px;
 	  }

	.about-flexcontainer-player {
    padding-top: calc(400 / 600 * 100%);
		}

	.about-img-container img{
    margin: 0 auto;
    padding: 30px 0 0 0;
 	 }
	
	/* -- ARTISTS -- */


	.latest-img-container {
		margin: 0px 0px 0 -30px;
		} 
    
	.latest-video-container {
    padding-top: calc(300 / 400 * 100%);
    max-width: 100%;
    flex: 100%;
		}

	.latest-some-flexcontainer {
    margin: 30px auto 10px auto;
		}

/* --- end flexcontainers */

/* --- TEXT STYLING --- */

	.single-text-start-heading {
	  padding: 0px;
	  margin: 0 10px;
		}

	.single-text-chapter-heading {
		padding: 0px 10px;
		}

	.single-text {
		padding: 0px 10px;
		}

    /* --- BILJETTER --- */
    
	.order-flexcontainer fieldset {
		padding: 10px 10px;
		}

	.visible-inputs {
		max-width: 40%;
		flex: 40%;
		}
		  
	.hidden-inputs-amount {
    max-width: 30%;
    flex: 30%;
  }

	.order-form input[type=text] {
  	width: 80%;
  	}

	.order-flexcontainer .order-form-summering .text-left {
  	flex: 70%;
  	}
  	
  .order-flexcontainer .order-form-summering .text-right {
    flex: 30%;
  }
  	
	.order-flexcontainer .order-form-summering #Summering {
		font-size: .8rem;
		}
	
	.order-flexcontainer .order-form-summering #totalOrder, #totalPrice {
		font-size: .8rem;
		margin: 30px 0 0 0;
		}

	.order-form-extra #SpecPref textarea, .order-form-extra #Email input[type=email] {
  	width: 95%;
		}

	.order-form-extra #SpecPref, .order-form-extra #Email {
  	flex: 90%;
  	max-width: 90%;
  	margin: 0 auto;
  	}

	/* CONTACT FORM */

/* 
	.contact-flexcontainer .info-text {
		max-width:100%;
		flex:100%;
		text-align: left;
		margin: 0 auto;
		}
	
	.contact-flexcontainer .info-text label{
		display:block;
		text-align: left;
		}

	.contact-flexcontainer .contact-buttons {
		flex: 100%;
		max-width: 100%;
		text-align: left;
		margin-top: 30px;
		}
 */
	}
	
/* MOBILE & VERY TINY DEVICES */
	@media only screen and (max-width: 375px) {
	
	
	.main-page-flexcontainer {
  	margin: 10px auto;
  }

article {
  width: 95%;
}
	
	 /* --- BESTÄLLNINGAR --- */
    
	.order-flexcontainer .order-form, .order-flexcontainer .order-form-summering, .order-flexcontainer .order-form-extra {
    max-width: 95%;
    flex: 95%;
  }
	
	.order-flexcontainer fieldset {
		padding: 10px 10px;
		}

	.visible-inputs {
		max-width: 60%;
    flex: 70%;
    margin: 0 auto;
    padding: 0;
		}
	
	.hidden-inputs {
		margin: 0 auto;
		}	  
	
	.hidden-inputs-amount {
    max-width: 45%;
    flex: 60%;
    margin: 0 auto;
    padding: 0;
  }

	.order-form select {
		width: 100%;
		text-align: center;
  }
  
	.order-form input[type=text] {
  	width: 95%;
    text-align: center;
    margin: 0 auto 10px auto;
    display: block;
  	}

  	
  .order-form input[type=number] {
  	text-align: center;
  	}	
  	
  	
  .order-flexcontainer .order-form label, .order-flexcontainer .order-form-extra label {
  	text-align: center;
  	font-size: .7rem;
  	}
  	
	.order-flexcontainer input[type="button"] {
		margin: 20px auto 10px auto;
		}
	
	.order-flexcontainer .order-form-summering .text-left {
  	flex: 100%;
  	text-align: center;
  	}
  	
  .order-flexcontainer .order-form-summering .text-right {
    flex: 100%;
    max-width: 95%;
    margin: 0 auto;
  }

	.order-flexcontainer .order-form-summering #totalOrder {
		text-align: center;
		float: none;
		}
		
	.order-flexcontainer .order-form-summering #totalPrice {
 	 text-align: center;
 	 float: none;
 	 margin: 5px auto;
	}
	
	 .order-form-extra #SpecPref textarea, .order-form-extra #Email input[type="email"] {
    width: 100%;
    display: block;
  }
   		
	.order-flexcontainer .order-buttons {
		text-align: center;
		align-self: center;
	}
}

/* --- end responsive views */