/*$font:'Oswald', sans-serif;
$font2:'Lobster Two', cursive;
$primary:#081116;//dark blue
$secondry:#f7941d;//yellow orange
$third:#6699ff;//light blue
$natural:#e3d6c3;*/

@charset "utf-8";
body,ul,li,h2,h3,p{
	margin:0px;
	padding:0px;
	font-family:'Oswald', sans-serif;
	font-size:1.2rem;
	color:#e3d6c3;
}


* { box-sizing: border-box; }
.fa{
    text-align: right;
}
/**********-------header-----------*****/
header{
    height: 700px;
    padding-bottom: 40px;
    background-image: url(images/header-mobile.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #081116;
    
}


#languageBtn {
	display:flex;
	justify-content: flex-end;
	margin:0px 10px;
}

button{
    text-align: center;
    color: #e3d6c3;
    list-style-type: none;
    background-color: #6699ff;
    border-radius:6px;
    border: 1px solid #6699FF;
    padding:2px 5px;
    width:50px;
    text-decoration: none;
    margin: 10px 4px;
}



button:hover{
	text-decoration: none;
	background-color:#F7941D;
	
    }

h1{
	font-family:'Lobster Two', cursive;
	font-size:2.8em;
	color:#f7941d;
	text-align: center;
	margin:110px 40px 5px ;	
	
}

#h1 {
	width:430px;
	margin:auto;
	position:relative;
}

header img{
	position:absolute;
	
}
#leaves{
	left:67px;
	top:27px;
}

#flowers {
	right:69px;
	top:-11px;
}

#barg {
    left:120px;
    top:50px;
}

#gol{
    right:186px;
	top:-4px;
    width:22px;
    height:auto;
}
 

header h2.En, h2.fa{
	color:#e3d6c3;
	font-size:1.7em;
    line-height: 1.5em;
	text-align:center;
	
}

header h3.En, h3.fa{
    color:#a09d9a;
    font-size:.85em;
    text-align:center;
    margin-bottom:210px;}

#CTA {
    width:200px;
    margin: auto;
}

#CTA li {
     background-color:#f7941d;
     border-radius:6px;
     border: 1px solid #f7941d;
     padding: 10px;
     width:200px;
     margin: 30px 0px;
	 list-style-type: none;
	 color: #081116;
	 text-align: center;
     font-size:1.5rem;
}

#CTA li a{
	text-decoration: none;
     
	
}
	
#CTA a:hover{
	color:#081116;
	text-decoration:underline;
}



/*****---------section Album------******/
#album{
    background-image: url(images/background.jpg);
    background-position: left top;
    background-repeat: no-repeat;
}
#art{
	margin:30px 10px;
}


#title{
    margin: 0px 0px 10px 0px;
}
#card{
    text-align: center;
    padding: 30px 0px;
}

.item{
    margin: 20px 0px;


}
.item h3{
    color: #f7941d;
    padding:10px 0px;
}

.item p{
    font-size:.9rem;
    font-family:'Lobster Two', cursive;
}

.is-active {
    background:#0f0e0d3f;
    transition: all .3s ease;
    border-radius: 20px;
    margin-right: 15px;
}


/******---------hero section-----**********/
#hero h2{
	font-family:'Lobster Two', cursive;
	color:#f7941d;
	font-size:2rem;
	margin:auto;
	text-align: center;
	
}
#hero p{
	margin:20px 10vw;
	line-height: 1.5rem;
}

.sorryImg{
    width:50px;
    height:auto;
}
#lyric{
    margin: 0px 10vw;
}
#lyric h3{
	font-family:'Lobster Two', cursive;
	color:#f7941d;
	font-size:1.2rem;
	margin:auto;
	margin:30px 0px 20px;
}


/* Style the button that is used to open and close the collapsible content */
.collapsible {
    background-color:transparent;
    color: #E3D6C3;
    cursor: pointer;
    padding: 5px 10px;
    width: 100%;
    border: none;
    outline: none;
    font-size:1rem;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
    background-color:#0A1F28;
}

/* Style the collapsible content. Note: hidden by default */
.hide-menu {
    display: none;
}

.show-menu {
    display: block;
    padding: 10px;
    font-size:.8rem;
    overflow: hidden;
    background-color:#0c1920;
    height:150px;
    width:100%;
    overflow-y: scroll;
}

/******-------section event-----------****/
#event{
    padding: 40px 0px 30px 0px;
    background-image: url(images/footer-background.jpg);
    background-position: center center;
    background-repeat: repeat-x;
    border-radius: 8px;
    border: 1px solid #0C151A;
}
#event h3{
	
	color:#E3D6C3;
	font-size:1.3rem;
	margin: auto;
	text-align: center;
	padding-top:20px;
}
#event .color{
	color:#B07022;
    font-size:1.1rem;
}
#signUpHeaderEn, #signUpHeaderfa {
    font-size:1rem;
    color:#B07022;
    margin-top: 35px;
    margin-bottom: 10px;

}

/****------footer------*****/
footer{
	background-color:#081116;
	margin: auto;
	padding-top:20px;
	
	text-align: center;
}
a{
	color:#f7941d;
}

a:hover{
	color:#E3D6C3;
}


#social{
	display:flex;
	flex-basis: 60%;
	justify-content: center;
	
}

#social li{
	padding:20px 5px;
	list-style-type: none;
}

/***--form--***/
.container {
    padding: 0px 5vw;
	margin:auto;
	width:300px;

}

input[type=text], input[type=password] {
    width:100%;
    padding: 10px;
    margin: 10px ;
    display: inline-block;
    border: none;
    background: #f1f1f1;
    border-radius: 8px;
    border: 1px solid #F1F1F1;
}

input[type=text]:focus, input[type=password]:focus {
    background-color: #ddd;
    outline: none;
   
}



#signup{
    background-color: #F7941D;
    color: white;
    padding: 10px 18px;
    margin: 8px auto;
    border: none;
    cursor: pointer;
    width: 40%;
    opacity: 0.9;
    border-radius: 8px;
    border: 3px solid  #C77818;
    text-align: center;
  
}

#signup:hover {
    opacity: 1;
}

#hide-md-lg{
    background-image: url(images/or.png);
    background-repeat: no-repeat;
    background-position: center center;
	margin:10px auto;
	text-align: center;
}






@media only screen and (min-width: 650px){
	
    /********-------header-------*********/
    header{
        background-image: url(images/header-580.jpg);
        background-repeat: no-repeat;
        background-position: right top;
    }
        
    #h1{margin:0px;}
        
    #CTA.En{
        margin-left:80px;
        margin-top:20px;
    }

    #CTA.fa{
        margin-left:120px;
        margin-top:20px;

    } 
    header h2.En, header h2.fa{
        text-align: left;
        margin:20px 0px 0px 80px;
    }
	
    header h3.En, header h3.fa{
        text-align: left;
        margin:0px 0px 100px 80px;
    }

    header h2.fa, header h3.fa{
        margin-left: 140px;
    }
    /********------album section-------********/
    #album{
        background-image: none;
    }
        
    #parallex1{
        background-image: url(images/album.jpg);	
        background-attachment: fixed;
        background-position: left bottom;
        background-repeat: no-repeat;
        background-size: cover;
    
    }


    #card {
        justify-content: center;
        margin:0px 40px; 
        display: flex;
    
    } 

    #display {
        width: 60%;
        border-radius: 20px 0 0 20px;
        background: #0811167a; 
        justify-content: center;
        align-items: center;
        padding: 1em;
        text-align: center;
    }

    #title{
        margin-top: 20px;
    }
    #art {
        width:70%;
        height:auto;
        border-radius: 20px;
    }

    #list {
        width: 40%;
        border-radius: 0 20px 20px 0;
        background: #0811167a; 
        display: flex;
        flex-direction: column;
        margin: 0px;
        padding:30px 1vw;
    }

    .item {
        padding: 10px 1em 10px;
        margin: 10px 0px;
        
        
        transition: all .3s ease;
    }
    .item first-of-type {
        border-radius: 0 20px 0 0;
    }
    .item last-of-type {
        border-radius: 0 0 20px 0;
    }


    .item hover {
        cursor: pointer;
    }


    #audio{
        margin-bottom: 30px;
    
    } 
    /********-------hero section----*******/
	
    #collaps{
        margin:0px 40px;
        background-color: #081116;
        border-radius: 6px;
        border: 1px solid #081116;
            
    }
    #hero h2{
        margin-top:40px;
    }
        
    #hero p{
        margin:20px 50px; 
    }
    #lyric{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap:33px;
        padding:0px 50px 40px;
        margin:0px;
    }
    #lyric h3{
        grid-column: 1/4;
    }
        
    #parallex2{
        background-image: url(images/hero.jpg);
        background-attachment: fixed;
        background-position: left bottom;
        background-repeat: no-repeat;
        background-size: cover;   
    }
        
    .background{
        padding: 30px 0px;
    }
        
    /*********---------footer-------********/
    footer{
        display:grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 80px ;
        background-color:#081116;
        padding:20px 6vw 50px;
            
    }
    #event{
        grid-column: 1/2;
        grid-row: 1/2;
        height: 250px;
        background-position: center center;
        background-repeat: repeat-x;
        }
        
    #social{
        grid-column: 1/2;
        grid-row:2/3;
        
    }
    .container{
        grid-column: 2/3;
        grid-row:1/3;
        padding:20px;
        margin: auto;
            
    }
}
	
	
@media only screen and (min-width: 1000px){
    body{
        background-image: url(images/background-1000-small.jpg);
        background-position: left top;
    }
    #page{
        width: 1000px;
        margin: auto;
        -webkit-box-shadow: 10px 10px 19px 26px hsla(189,100%,3%,1.00);
        box-shadow: 10px 10px 19px 26px hsla(189,100%,3%,1.00);
    }
}