/*


Ändra så att det du kan lägga till en cta-class för ett menu-item så att det blir en knapp. se effektivitetsprogrammet.


gallery thumbnails ska fungera på samma sätt som kolumnerna med avstånd.


Lägg till kod så att även ikoner och varukorgen ändrar färg när du scrollar ner.


Fixa en class som du sätter tex på en one-half med en bild i så att det bara blir 20px bottom i mobilen istället för vanliga 40px.


Lägg till templates för search and filter


Ändra så att undermenyn skiljer sig från huvudmenyn i mobilen (typ som fox design)


https://dollarshaveclub.github.io/reframe.js/


Brytpunkter för round images klasser för tablet och desktop och mobil. Ändra så att det används .strict-square.round.background-image så att dem alltid blir runda men lägg till max-width med media queriers.

Lägg till margin-auto i utilities

Lägg till klasser för margin-bottom-40 etc i utilities

Lägg till så att alla div som ligger direkt inuti en kolumn blir flex och flex-baseline
*/


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

	.desktop-padding-sides-40 {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}

    .desktop-padding-40 {
        padding: 40px !important;
    }

}

.padding-left-40 {
    padding-left: 40px !important;
}

.darkpink {
	background-color: #DF82A1;
}

.mediumpink {
	background-color: #EFB5C3;
}

.lightpink {
	background-color: #F6B2A8;
}

.lightgrey {
    background-color: #eee;
}


.hero-video {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}

.pointer-events-none {
	pointer-events: none;
}

.pointer-events-none div {
	pointer-events: none;
}

.pointer-events-none h1 {
	pointer-events: none;
}



/**********************
	HTML 5 VIDEO
**********************/

#big-video {
    position: relative;
    background: #000;
    overflow: hidden;
    /*height: 582px;*/
}

#big-video .video {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

#big-video video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    background:transparent url('/wp-content/uploads/pexels-photo-42379.jpeg') no-repeat 0 0; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    background-size:cover; 
}

#big-video .video-element {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

#big-video .playpause {
    width:70%;
    height:50%;
    position:absolute;
    left:0%;
    right:0%;
    top:0%;
    bottom:0%;
    margin:auto;
    /*background-image:url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png);*/
    /*background-repeat:no-repeat;*/
    /*background-size: 150px 150px;*/
    /*background-position: center;*/
    z-index: 10;
}

#big-video .playpause h1 {
    text-align: center;
    font-weight: bold;
}

#big-video .playpause img {
    width: 150px;
    height: 150px;
    margin: auto;
    display: none;
}

@media only screen and (min-width: 600px) {
    #big-video .playpause img {
        display: block
    }
}

.hidden {
    opacity: 0;
    transition: all .5s;
}

/**********************
	Lorum ipsum
**********************/

#faq-container {
    width: 100%;
}

#faq-container .question-container {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #DF82A1;
    border-radius: 10px;
}

#faq-container .question {
    /*background-color: #DF82A1;*/
    /*border-radius: 10px;*/
    padding: 10px 20px;
    color: #FFF;
    width: 100%;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

#faq-container .question .arrow {
    width: 50px;
    height: 50px;
    background-image: url('/wp-content/uploads/play-arrow.png');
    background-position: center center;
    background-size: 25px 25px;
    background-repeat: no-repeat;
    position: absolute;
    right: 10px;
}

#faq-container .question .arrow.down {
    background-image: url('/wp-content/uploads/down-arrow.png')
}

#faq-container .question h3 {
    color: #FFF;
    width: auto;
    /*font-size: 24px;*/
    padding-right: 50px;
}

#faq-container .question img {
    width: 100px;
    height: auto;
}

#faq-container .answer {
    background-color: #EFB5C3;
    width: 100%;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 20px;
    display: none;
    /*transition: opacity .5s;*/
}

#faq-container .answer p {
    /*margin-bottom: 0 !important;*/
}

#faq-container .answer.visible {
    
    display: block;
     /*transition: opacity .5s;*/
}


#faq-container a,
#faq-container a:visited {
	color: #DF82A1;
}

#faq-container a:hover,
#faq-container a:focus,
#faq-container a:active {
	color: #000;
}

.width-70 {
    width: 70%;
}

.contact-image {
    width: 150px;
    height: 150px;
}

.width-50 {
    width: 50%;
}

.padding-20 {
    padding: 20px !important;
}

.padding-right-20 {
    padding-right: 20px !important;
}

.faq-background-image {
    background-size: inherit !important;
    background-position: top left !important;
}

.cta-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;
}

/********************************************
    Gravity Forms styling
********************************************/

.gform_fields {
    background-color: #EFB5C3;
}

.gform_fields .gfield_label {
    color: #FFF;
}

.gform_footer {
    margin-top: 20px;
    text-align: right;
}

.transparent-background {
    background-color: transparent !important;
}

input[type="submit"] {
    padding: 10px 30px !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

/**********************
    Lorum ipsum
**********************/

.inner-grid {
   
    width: calc(100% + 40px) !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    
}




/**********************
    Footer
**********************/

/*.main-footer a,
.main-footer a:visited {
    color: #EFB5C3;
}

.main-footer a:hover,
.main-footer a:active,
.main-footer a:focus {
    color: #FFF;
}*/

.main-footer h3 {
    color: #fff;
}



/************************
    QUIZ
************************/

@import url(http://fonts.googleapis.com/css?family=Satisfy|Pathway+Gothic+One);
/* Defaults */
#quizzie {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	justify-content: center;
}

#quizzie h1 {
	text-align: center;
    font-weight: bold;

}

#quizzie h2 {
    font-weight: normal;
    font-size: 20px;
    text-transform: none;
}

#quizzie ul {
	list-style: none;
	display: block;
	width: auto;
	overflow: auto;
	display: none;
	/* Step Questions and Answer Options */
}

/*
#results {
    padding: 20px;
    background: rgba(80,80,80,0.8);
    z-index: 999;
    position: absolute;
    left: 0;
    width: 80%;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 0px;
    margin: auto;
} 
*/

#results {
    position: relative;
    padding: 20px;
    background: rgba(80,80,80,0.8);
    z-index: 2;
    border-radius: 10px;
    margin-top: -40px;
} 

#quizzie ul.current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#quizzie ul li {
	display: inline-block;
	float: left;
	width: auto;
	/*overflow: auto;*/
	text-align: center;
}

#quizzie ul li.quiz-answer {
	padding-right: 20px;
}

#quizzie ul li.question, #quizzie ul li.results-inner {
	display: block;
	float: none;
	width: 100%;
	text-align: center;
	margin: 0;
}

#quizzie ul li.results-inner {
}

#quizzie ul li.results-inner img {
	width: 250px;
}

#quizzie ul li:last-child {
	margin-right: 0;
    padding-right: 0;
}

#quizzie .question-wrap {
    margin-top: 20px;
}

#quizzie .question-wrap p {
	font-weight: 500;
}

#quizzie .question-wrap h2 {
	font-weight: 500;
}

#quizzie .question-wrap, #quizzie .answer-wrap {
	display: block;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

#quizzie .answer-wrap {
	/*background: Turquoise;*/
	-moz-transition: background-color 0.5s ease;
	-o-transition: background-color 0.5s ease;
	-webkit-transition: background-color 0.5s ease;
	transition: background-color 0.5s ease;
}

#quizzie .answer-wrap:hover {
	/*background: DarkTurquoise;*/
}

#quizzie .answer-text {
	margin-bottom: 0 !important;
	/*padding: 20px;*/
}

#quizzie .button {
    margin-bottom: 0 !important;
    font-weight: bold;
}

#quizzie > h1 {
    text-transform: initial;
}

#step-counter {
    width: 100%;
    display: flex;
    justify-content: center;
}

#step-counter .blob1 {
    display: none;
}

#step-counter span {
    width: 30px;
    height: 30px;
    border-radius: 100px;
    background-color: #FFF;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}

#step-counter span.current {
    background-color: #DF82A1;
}

/**********************
    Lorum ipsum
**********************/

.white {
    color: #FFF !important;
}

.height-100 {
    height: 100%;
}

.align-self-end {
    align-self: flex-end !important;
}

.max-width-800 {
    max-width: 800px;
}

.wysiwyg ul {
    list-style-type: disc !important;
    margin-left: 20px !important;
    margin-bottom: 20px !important;
}

.language-toggle a {
    width: 30px;
    height: 30px;
    background-color: transparent;
    border-radius: 100px;
    margin: 5px;
    display: inline-block;
}

@media only screen and (min-width: 600px) {
   .language-toggle a {
        width: 30px;
        height: 30px;
    }
}

.language-toggle .en {
    width: 100%;
    height: 100%;
    background-image: url('/wp-content/uploads/english-1.svg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.language-toggle .sv {
    width: 100%;
    height: 100%;
    background-image: url('/wp-content/uploads/sweden-1.svg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.margin-10 {
    margin: 10px !important;
}

.inline-block {
    display: inline-block;
}

/*@media only screen and (max-width: 599px) {
    .white-background-mobile {
        background: #fff !important;
    }
}*/

.min-height-400 {
    min-height: 400px;
}

@media only screen and (min-width: 1024px) {
	.desktop-justify-content-end {
		justify-content: flex-end !important;
	}
}

.max-width-300 {
	max-width: 300px !important;
}

.mobile-logo-container {
	display: none;
}

.mobile-menu a, 
.mobile-menu a:visited {
	font-weight: bold;
}

.absolute-video {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#hide-me {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: absolute;
	/*background-color: rgba(0, 0, 0, 0.6);*/
    background-image: url(/wp-content/uploads/thumbnail.jpg);
    background-size: cover;
	/*pointer-events: none;*/
	cursor: pointer;
	padding-top: 60px;
	z-index: 98;
}

#hide-me img {
	width: 50px;
}

@media only screen and (min-width: 600px) {
	#hide-me img {
		width: 100px;
	}
}

@media only screen and (min-width: 1024px) {
	#hide-me img {
		width: 150px;
	}
}

#results .fb-share-button {
	width: 100% !important;
}

#results .fb-share-button span {
	width: 100% !important;
}

#results iframe {
	width: 100% !important;
	height: 35px !important;
}

#video-pro {

}

@media only screen and (max-width: 599px) {
    #video-pro {
        min-height: 280px !important;
    }
}

.facebook-share {
    height: 40px !important;
    width: 65px !important;
    margin-top: 20px !important;
}

.gform_confirmation_wrapper {
    color: #000 !important;
}

.home-button {
    position: absolute;
    right: 20px;
    top: 20px;
    width: auto;
}

@media only screen and (min-width: 1024px) {
    .home-button {
        right: calc(50% + 20px);
        top: 20px;
    }
}

#clockdiv {
    display: none;
}

.countdown-container {
    /*padding: 120px 0 100px 0;*/
}

.countdown-container .countdown-numbers,
.countdown-container .countdown-labels {
    font-weight: bold;
    display: block;
    width: 100%;
}

.countdown-container .countdown-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.countdown-container .countdown-numbers > div {
	margin-left: 2px;
	margin-right: 2px;
}

.countdown-container .countdown-numbers > div > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
}

/* Font size för counter */
.countdown-container .countdown-numbers {
	font-size: 24px;
}

.web-text {
    font-size: 24px !important;
    font-weight: bold;
}

.countdown-container .countdown-labels {
    font-size: 12px;
}

@media only screen and (min-width: 400px ) {
	.countdown-container .countdown-numbers {
		font-size: 24px;
	}

	.countdown-container .countdown-labels {
		font-size: 18px;
	}

    .web-text {
        font-size: 24px !important;
        font-weight: bold;
    }
}

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

	.countdown-container .countdown-numbers {
		font-size: 40px;
	}

	.countdown-container .countdown-labels {
		font-size: 20px;
	}

    .web-text {
        font-size: 40px !important;
        font-weight: bold;
    }
}

@media only screen and (min-width: 1024px ) {
	.countdown-container {
		padding: 0;
	}

	.countdown-container .countdown-numbers {
		font-size: 60px;
	}

	.countdown-container .countdown-labels {
		font-size: 24px;
	}

    .web-text {
        font-size: 60px !important;
        font-weight: bold;
    }
}

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

	.countdown-container .countdown-numbers {
		font-size: 76px;
	}

	.countdown-container .countdown-labels {
		font-size: 28px;
	}
}

.margin-bottom-20px {
    margin-bottom: 20px;
}

.play-button-container {
    position: absolute;
    height: 100%;
    width: 100%;
}

.play-button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 50px;
}

@media only screen and (min-width: 1024px) {
    .padding-right-80px-desktop {
        padding-right: 80px;
    }

	.play-button-bigger {
		height: 100px;
	}
}

.overflow-image {
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
}

.overflow-image-custom {
    width: calc(100% + 40px);
    max-width: 450px;
}

.custom-footer-link {
    width: 100%;
    margin-bottom: 20px;
}



.padding-top-120px {
	padding-top: 120px !important;
}

.padding-bottom-100px {
	padding-bottom: 100px !important;
}

.white-font {
    color: #fff;
}

.white-font h3 {
    color: #fff;
}

.padding-top80px {
    padding-top: 80px !important;
}

.padding-bottom-40px {
    padding-bottom: 40px !important;
}

h3.red-font  {
    color: #EC685B !important;
}

.dark-button {
    border-color: #000 !important;
    color: #000 !important;
}

.dark-button:hover {
    border-color: #EC685B !important;
    color: #EC685B !important;
}

.max-width-50px {
    max-width: 50px;
}

.max-width-1000px {
    max-width: 1000px;
}




/* Arifa 05-01-2021  */
/* home page start here */
.homepage_hero p {
	color: #ffff;
}

.homepage_sechover {
	background-color: #ffff;
}

.elementor-element.forelasningar_sec:hover > .elementor-element-populated h4{
	background-color: #FFFFFF;
	color: #c3122c;
}

.page_title{
	color: #eb6074;
    font-weight: 200;
}
.red_title{
	font-size: 14px;
    font-weight: bold;
    color: #c3122c;
    line-height: 25px;
}

.hero_page h1{
	color: #ffff;
}