.thumb-info-wrapper-primary::after {
  background-color: rgba(255, 211, 47, 0.5)!important;

}
html.side-header-overlay-full-screen {
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1) .3s, visibility 0s linear 1.3s; // out
    
}

.menu-menu {
    color: #FFF;
}
#mainNav li strong{
       font-size: 2.5em;
    font-weight: 300;
    text-transform: ;
    
    
}
icons.social-icons-medium li a, .social-icons.social-icons-md li a {
  height: 55px;
  line-height: 55px;
  width: 55px;
  font-size: 81.4px;
  font-size: -17.1rem;
}
.social-icons-nav {
  margin: auto;
  padding: 0;
  width: auto;
  text-align: center!important;
}
#mainNav li {
    text-align: right!important; 
    		
		white-space: nowrap;
    text-transform: uppercase;
    
}
#mainNav li:hover {
    text-align: right!important; 
    -webkit-text-fill-color: #ffd32f;
		-webkit-text-stroke-width: 0px;
		-webkit-text-stroke-color: #000;
		white-space: nowrap;
    color:  #ffd32f:
} 

#mainNav  {

}
html.side-header-overlay-full-screen #header .header-row-side-header {
  flex: 0 0 50%;
  margin: 0!important;
}
ul.dropdown-menu {
 margin-top: -20px!important;
  margin-bottom: 50px!important;
}

#header{
    padding-top: 0!important;
}
ul.dropdown-menu li {
 margin-left:2px;
 float:right; /*pour IE*/
     -webkit-text-fill-color: #FFF!important;
		-webkit-text-stroke-width: 0px!important;
		-webkit-text-stroke-color: #000;
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1) .3s, visibility 0s linear 1.3s; // out
 }
 ul.dropdown-menu li:after {
  content: "-";
     margin-right: 20px;
     

} 
 ul.dropdown-menu li:last-child::after {

                    display: none;
} 
 ul.dropdown-menu li a {
                    background: transparent!important;
     padding: 5px!important;
                }
 ul.dropdown-menu li a:hover {
         
                }

ul.dropdown-menu li strong {
 display:block;
 float:right;   
font-size: 1.8em!important;

 text-decoration:none;
 text-align:right;
 padding:5px;
 
 }
ul.dropdown-menu li a:hover {

 } 

html.dark #header .header-body {
    background: transparent!important;
}

.header__menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1) .3s, visibility 0s linear 1.3s; // out
    @include m767 {
        overflow-x: hidden;
        overflow-y: auto;
       height: -webkit-fill-available;
    }

    &:before {
        position: absolute;
        bottom: 250px;
        left: 50%;
        content: "";
        display: block;
        width: 957px;
        height: 957px;
        background-color: $red;
        border-radius: 50%;
        //transform: scale(0) translateX(-50%);
        transform: scale(0) translate(1700%, -1950%);
        transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1) .8s; // out

        @media screen and (max-width: 767px) and (max-height: 699px) {
            bottom: 200px;
            left: 50%;
        }
        @include m767 {
            display: none;
        }
        @include m768 {
            bottom: -10.24vw;
            left: 8vw;
            width: 1661px;
            height: 1661px;
        }
        @include m992 {
            left: 28vw;
        }
    }

    .container {
        @include flex(space-between, initial, column);
        //overflow: hidden;
        //overflow-y: auto;
        height: 100%;
        @include m768 {
            padding-top: 70px;
            padding-bottom: 70px;
            flex-direction: row-reverse;

        }
    }

    &-aside {
        position: relative;
        z-index: 2;
        margin-top: 110px;
        @include m768 {
            @include flex(flex-end, initial, column);
            margin-top: -20px;
            margin-bottom: -20px;
        }

        .c-tooltip {
            display: block;
            padding-top: 40px;
            padding-bottom: 40px;
            margin-top: auto;
        }

        img {
            display: block;
            width: 100%;
            height: auto;
            max-width: 230px;
            margin-left: auto;
            margin-right: auto;
            @include m768 {
                max-width: 300px;
            }
        }
    }

    &-main {
        padding-top: 100px;
        @media screen and (max-width: 767px) and (max-height: 699px) {
            padding-top: 50px;
        }
        @include m767 {
            position: relative;
            flex: 1;
        }
        @include m768 {
            padding-top: 0;
            @include flex(space-between, initial, column);
            height: 100%;
        }

        &:before {
            position: absolute;
            bottom: -70px;
            left: 50%;
            content: "";
            display: block;
            width: 957px;
            height: 957px;
            background-color: $red;
            border-radius: 50%;
            transform: scale(0) translate(1700%, -1950%);
            transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1) .8s; // out
            @include m768 {
                display: none;
            }
        }

        > div:nth-child(2) {
            position: relative;
            z-index: 1;
            @include m768 {
                text-align: right;
            }

            a {
                position: relative;

                &:after {
                    content: "";
                    display: block;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    width: 0;
                    background-color: $white;
                    transition: width .4s ease-in-out;
                }
            }

            .menu {
                @include m768 {
                    margin-left: auto;
                }
                @include m992 {
                    max-width: 47vw;
                }

                > li {
                    opacity: 0;
                    transform: translateY(-50px);
                    transition-property: transform, opacity;

                    &.active {
                        @include flex(flex-start, flex-start, row, wrap);
                        @include m768 {
                            justify-content: flex-end;
                        }

                        > a {
                            display: inline-block;
                            flex: inherit;
                            //@include m768 {
                            //    flex: 0 1 0;
                            //}
                            @include m1025 {
                                pointer-events: none;
                            }

                            &:after {
                                width: 100%;
                            }
                        }

                        & + li {
                            margin-top: 30px;
                        }
                    }

                    > a {
                        display: block;
                        padding-top: 8px;
                        padding-bottom: 8px;
                        font-family: $fontExtended;
                        font-size: 20px;
                        font-weight: 900;
                        @include m768 {
                            font-size: 28px;
                        }
                        @include m1025 {
                            font-size: 35px;
                        }
                        @media screen and (min-width: 1025px) and (max-height: 749px) {
                            font-size: 28px;
                        }

                        &:after {
                            height: 4px;
                        }

                        @include m1025 {
                            &:hover {
                                &:after {
                                    width: 20%;
                                }
                            }
                        }
                    }
                }
            }

            .sub-menu {
                max-height: 0;
                overflow: hidden;
                transition: max-height .6s ease-in-out .2s;
                flex: 1;
                min-width: 100%;
                @include m768 {
                    @include flex(flex-end, center, row, wrap);

                }

                &.active {
                    max-height: 200px;
                    transition: max-height .6s ease-in-out;

                    li {
                        opacity: 1;
                        transition: opacity .4s ease-in-out .3s;
                    }
                }

                li {
                    opacity: 0;
                    transition: opacity .4s ease-in-out;
                    margin-top: 15px;
                    @include m768 {
                        margin-top: 10px;
                    }

                    &:not(:last-child) {
                        margin-bottom: 20px;
                        @include m768 {
                            margin-bottom: 0;
                            &:after {
                                content: ".";
                                display: inline-block;
                                margin-left: 15px;
                                margin-right: 15px;
                                font-family: $fontWide;
                                font-size: 19px;
                                font-weight: 500;
                            }
                        }
                    }

                    a {
                        display: inline-block;
                        font-family: $fontWide;
                        font-size: 17px;
                        font-weight: 500;

                        @include m992 {
                            font-size: 19px;
                        }
                        @media screen and (min-width: 1025px) and (max-height: 801px) {
                            font-size: 17px;
                        }

                        &:after {
                            height: 2px;
                        }

                        @include m1025 {
                            &:hover {
                                &:after {
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    &-tools {
        //position: absolute;
        //bottom: 25px;
        //left: 20px;
        //width: calc(100% - 40px);


        @include m768 {
            width: 100%;
        }

        &.hidden-mobile {
            display: none;
            @include m768 {
                display: block;
            }
        }

        &.hidden-desktop {
            @include flex(space-between, center);
            padding-bottom: 20px;
            margin-top: 54px;
            @include m768 {
                display: none;
            }
        }

        .c-languages {
            display: block;
            @include m768 {
                display: none;
            }
        }

        .c-social {
            @include m768 {
                justify-content: flex-end;
            }

            li {
                a {
                    @include m1025 {
                        &:hover {
                            color: $red;

                            &:before {
                                background-color: $white;
                            }
                        }
                    }
                }
            }
        }
    }
}





.custom-border-color-1 {
		border-color: #424549 !important;
}

.custom-font-size-1 {
		font-size: 22.4px !important;
		font-size: 1.4rem !important;
}

.custom-font-size-2 {
		font-size: 12.8px !important;
		font-size: 0.8rem !important;
}

.custom-row-about .col-12 {
		height: 520px;
}

.custom-col-about-bg {
		height: 520px;
		background-size: auto;
		background-position: 100% 0;
}

@media (max-width: 991px) {
		.custom-col-about-bg {
				background-size: cover;
		}
}

@media (max-width: 991px) {
		.custom-col-about-carousel {
				height: auto !important;
		}
}

.custom-col-about-bg-text,
.custom-about-play-icon {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
}

.custom-about-play-icon {
		left: 50%;
		transform: translate(50%, -50%);
		margin: 0 0 0 -62px;
}

.custom-carousel-bg {
		border: 0;
		margin: 0;
		position: relative;
		width: 100%;
		height: 100% !important;
		top: 0;
		left: 0;
		overflow: hidden;
}

@media (min-width: 992px) {
		.custom-carousel-bg img {
				width: auto !important;
				min-height: 520px !important;
		}
}


/* Header */
@media (min-width: 992px) {
		#header .header-nav .header-nav-line nav > ul:not(:hover) li > a.active {
				color: #FFF !important;
		}
		#header .header-nav-main nav > ul > li {
				margin-right: 1.2rem;
		}
		#header .header-nav-main nav > ul > li > a {
				color: #FFF !important;
		}
}

/* Custom Porto SVG Logo (initial state for animation inside slide) */
.custom-porto-svg-logo path {
		fill-opacity: 0;
		stroke-width: 1px;
		stroke: #FFF;
		stroke-dasharray: 630;
		stroke-dashoffset: 630;
		transition: ease stroke-dashoffset 5s, ease fill-opacity 1s 1.7s;
}

.custom-porto-svg-logo.active path {
		stroke-dashoffset: 0;
		fill-opacity: 1;
}

/* Custom Borders Divider */
.custom-borders-divider-style-1 > div[class*="col"] {
		border-width: 1px;
		border-style: solid;
		border-color: #212529;
		border-top-width: 0;
		border-right-width: 0;
		border-left-width: 0;
}

@media (min-width: 576px) {
		.custom-borders-divider-style-1 > div[class*="col"] {
				border-right-width: 1px;
		}
		.custom-borders-divider-style-1 > div[class*="col"]:nth-child(1), .custom-borders-divider-style-1 > div[class*="col"]:nth-child(3) {
				border-left-width: 1px;
		}
}

@media (min-width: 992px) {
		.custom-borders-divider-style-1 > div[class*="col"] {
				border-left-width: 0;
		}
		.custom-borders-divider-style-1 > div[class*="col"]:nth-child(1) {
				border-left-width: 1px;
		}
		.custom-borders-divider-style-1 > div[class*="col"]:nth-child(3) {
				border-left-width: 0;
		}
}

/* Custom Brands Colors */
.custom-home1-hover-effect {
		transition: ease background 300ms;
}

.custom-home1-hover-effect:hover {
		background: #ffd32f;
}

.custom-home2-hover-effect {
		transition: ease background 300ms;
}

.custom-home2-hover-effect:hover {
		background: #212529;
}

.custom-amazon-hover-effect {
		transition: ease background 300ms;
}

.custom-amazon-hover-effect:hover {
		background: #ff9b00;
}

.custom-googlemusic-hover-effect {
		transition: ease background 300ms;
}

.custom-googlemusic-hover-effect:hover {
		background: #f4522b;
}

/* Custom Tour Items Hover Effect */
.custom-tour-wrapper {
		position: relative;
		overflow: hidden;
}

.custom-tour-wrapper .custom-tour-stage {
		transition: ease transform 300ms;
}

.custom-tour-wrapper .custom-tour-stage > .custom-tour-item + .custom-tour-item {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		transform: translate3d(0, 100%, 0);
}

.custom-tour-wrapper:not(.custom-tour-wrapper-static):hover > .custom-tour-stage {
		transform: translate3d(0, -100%, 0);
}

/* Custom Thumb Info */
.custom-thumb-info-style-1 .overlay:before {
		transition: ease all 300ms 0ms !important;
}

.custom-thumb-info-style-1:hover .overlay:before {
		opacity: 0.8 !important;
		background: #0c0c0c !important;
}

.custom-thumb-info-style-1 .thumb-info-title {
		padding: auto !important;
	
}
.custom-section-halfbar-bg {
		position: absolute;
		top: 50%;
		right: 0;
		width: 50vw;
		height: 40%;
		border-radius: 10px 0 0 10px;
		background: #212529;
		opacity: 0.1;
		transform: translate3d(0, -50%, 0);
}

@media (max-width: 991px) {
		.custom-section-halfbar-bg {
				height: 20%;
		}
}

.custom-column-bg {
		position: relative;
}

.custom-column-bg:before {
		content: '';
		position: absolute;
		top: 50%;
		right: 0;
		width: 50vw;
		height: 100%;
		border-radius: 0 10px 10px 0;
		background: #212529;
		opacity: 0.6;
		transform: translate3d(0, -50%, 0);
		z-index: -1;
}

@media (max-width: 767px) {
		.custom-column-bg:before {
				width: 100%;
				border-radius: 10px;
		}
}

@media (max-width: 575px) {
		.custom-column-bg:before {
				width: calc(100% - 30px);
				margin-right: 15px;
		}
}


/* Custom Card Style */
.custom-card-style-1 .custom-card-img-top-wrapper .post-date {
		position: absolute;
		top: 35px;
		left: 35px;
		text-align: center;
}

.custom-card-style-1 .custom-card-img-top-wrapper .post-date .month {
		display: block;
		background: #CCC;
		border-radius: 0 0 2px 2px;
		color: #FFF;
		font-size: 0.8em;
		line-height: 1.8;
		padding: 1px 10px;
		text-transform: uppercase;
		font-family: "Poppins", Arial, sans-serif;
}

.custom-card-style-1 .custom-card-img-top-wrapper .post-date .day {
		background: #f7f7f7;
		border-radius: 2px 2px 0 0;
		color: #CCC;
		display: block;
		font-size: 18px;
		font-weight: 900;
		padding: 10px;
		font-family: "Poppins", Arial, sans-serif;
}

/* Custom SVG Line Animation */
@keyframes customSVGLineAnim {
		from {
				stroke-dasharray: 40;
				stroke-dashoffset: 40;
		}
		to {
				stroke-dasharray: 40;
				stroke-dashoffset: 0;
		}
}

.customSVGLineAnim {
		animation-name: customSVGLineAnim;
}


.video, .moduleExtra_video  {
    height: 100%!important;
}
.custom-images-position-1 div:nth-child(2) {
		transform: translate3d(-50%, -30%, 0);
}

.custom-images-position-1 div:nth-child(3) {
		transform: translate3d(76%, 30%, 0);
}

.custom-images-position-1 div:nth-child(4) {
		transform: translate3d(-13%, 147%, 0);
}

.custom-circle-pos-1 {
		top: -170px !important;
}

.custom-circle-pos-2 {
		bottom: -210px !important;
		right: -170px !important;
}
html.side-panel .side-panel-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 450px!important;
  height: 100vh;
  background: #1c1c1c!important;
  padding: 32px;
  padding: 2rem;
  box-shadow: 0px 0px 30px -13px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  transform: translate3d(-100%, 0, 0);
  transition: ease transform 300ms;
  z-index: 9999;
}

.bandcover {
    margin-bottom: 0!important;
    padding-bottom: 10px!important;
    
}

.bandcoverheight {
    min-height: 250px!important;
}
.social-icons-lg li a {
    font-size: 1.8em!important;
}
.social-icons.social-icons-big li a, .social-icons.social-icons-lg li a {
  height: 65px;
  line-height: 60px;
  width: 65px;
}

.btn-link-effect-1::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 3px!important;
  background: #FFF;
  transition: width 0.25s ease-out;
}


@media only screen and (min-width: 992px) {
  .custom-bottom {
   
    
}
}
@media only screen and (min-width: 992px) {
  .custom-top {
    position: fixed;
  right: 0;
  top: 0;
  left: 0;
  z-index: 1030;
    
}
}
@media only screen and (max-width: 992px) {
  .custom-bottom  {
    padding-top: 20px!important;
      margin-top: 0px!important;
    
}
}
@media only screen and (max-width: 992px) {
 
      #mainNav li strong {
   font-size: 1.6em;!important
          text-align: center;
    
}
    
    .row2Menu {
   margin-top: 20px!important;
        padding-top: 0!important;
}
}

.row2Menu {
    height: calc(100% - 56px);
}


.anim-hover-rotate-animation:hover {
    animation: rotate-animation 10s infinite linear;
     -webkit-animation-fill-mode: forwards
}
.anim-hover-rotate-animation:hover {

     -webkit-animation-fill-mode: forwards
}

.icon-sub i {
    pointer-events: none!important;
}




@media only screen and (max-width: 992px) {
ul.dropdown-menu li strong {
  display: inline;
  font-size: 1em !important;
  text-decoration: none;
  text-align: center;
  padding: 5px;
 float: none;
}
    ul.dropdown-menu li::after {
  content: "";
  margin-right: 0px;
}
    
    .row2Menu {
        margin-top: 0!important;
    }
}