body
{
    background: rgba(238, 238, 238, 0.6);
    height: 700px;
    margin: 0;
}

img{
    display: block;
     
}

.fern
{
    width: 100%;
    height: 100%;
    background: url(../images/fern-2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

    #cover
    {
        height: 100%;
        width: 100%;
        background: rgba(238, 238, 238, 0.6);
		position:relative;
    }


#pbw
{
    width: 29%;
    margin:auto;
	max-width:400px;
}


#fc
{
    margin:auto;
    max-width: 45%;
}

#gsm
{
   margin:auto;
   height:100%;
   position:relative;
   left:-20px;
}

#fnl
{
    margin:auto;
	height:100%;
}

#fpb
{
    margin:auto;
	height:100%;
	position:relative;
	left:11%;
	width:95%;
}
@media (min-width:625px)
{
	#fpb{width:auto;}
}
#don
{
	margin:auto;
	max-width:120px;
	width:100%;
	min-width:50px;
}
#popUpContainer
{
	height:auto;
	position:absolute;
	top:29%;
	width:100%;
	height:0;
	display:none;
}
#popUp
{
    /*position: absolute;
    top: 25%;
	left:33%;*/
    width: 35%;
	min-width:215px;
    margin: 0 auto;
    background: #fff;
    border: 2px solid #000;
    border-radius: 10px;
    color: #000;
    padding: 15px;
    box-shadow: 10px 10px 5px rgba(109, 109, 109, 0.58);
    text-align: center;
}

.closer
{
    margin-top: -10px;
    float: right;
    color: #f00;
    font-weight: bold;
    font-size: 1.5em;
    display: block;
}
.closer:hover{
    cursor: pointer;
}
#popUpImage
{
	display:block;
	margin:auto;
	width:120px;
	height:auto;
}

@media only screen and (max-width : 768px) 
{
 
    #pbw
    {
        /*left: 38%;*/
        width:223px; ;
    } 
    /*#fnl
    {
        max-width: 40%;
        left: 28%;
        bottom: 10%
    }*/
	/*#fc
	{
		width:346px;
		max-width:100%;
	}*/
}
@media only screen and (max-width : 267px) 
{
 
    #pbw
    {
        width:80.9%; ;
    }  
	
    
}
/*@media only screen and (max-width : 305px) 
{
 
    #fnl
    {
        width:100%;
		height:auto;
    }  
	
	
    
}*/
@media only screen and (max-width : 580px) 
{
 
    #fc
    {
       /*width:calc((0.154*100vw*(-1))% + 134%);*/
	   
		max-width:95%;
		width:253.8px;
    }  
    
}

.container
{
		width:100%;
		height:100%;
		min-height:597px;
		/*max-height:545px;
		max-width:1278px;*/
		/*min-width:270px;*/
		padding:0;
		background-color:#fff;
}
@media only screen and (max-width:598px)
{
	.container
	{
		max-height:calc(0.891*100vw + 12.18px);
	}
}
#backgroundcover
{
	/*background-color:rgba(238, 238, 238, 0.6);*/
	width:100%;
	height:100%;
}
html,body
{
	height:100%;
	min-width:284px;
}
#threerow
{
		width:78%;
		margin:auto;
		height:52px;
		position:relative;
}
#topContainer
{
	position:absolute;
	top:10%;
	width:100%;
}
#middleContainer
{
	position:absolute;
	top:45%;
	width:100%;
}
#bottomContainer
{
		position:absolute;
		bottom:2%;
		width:100%;
}
.threeimg
{
	height:100%;
}
@media only screen and (max-width:888px)
{
	/*#leftcon,#rightcon
	{
		width:50%;
		left:0;
		margin-bottom:20px;
	}
	#middlecon
	{
		width:100%;
		right:0;
	}*/
	#threerow
	{
			/*height:38px;
			width:100%;*/
	}
}
@media only screen and (max-width:623px)
{
	/*#leftcon
{
		width:50%;
}
	#rightcon
{
		width:50%;
}*/
/*#gsm
{
	width:100%;
	/*height:auto;*/
	/*position:absolute;
	bottom:0px;*//*
}*/
/*#fpb
{
	/*width:100%;
	position:absolute;
	bottom:0px;*/
	/*position:absolute;
	right:0;*/
	/*height:auto;*/
/*}*/
#threerow
{
		height:calc(0.075*100vw + 5.2px);
		
		
}

}

#leftcon
{
		max-width:40%;
		width:auto;
		padding:0;
		position:absolute;
		left:-5%;
		bottom:0;
		height:200%;
}
#centercon
{
		max-width:120px;
		width:50%;
		
		padding:0;
		position:absolute;
		left:50%;
		transform:translateX(-50%);
		bottom:0;
		height:200%;
}
#rightcon
{
	float:right;
	width:auto;
	max-width:40%;
	padding:0;
	padding-bottom:3px;
	position:absolute;
	right:-5%;
	bottom:0;
	height:134%;
}
@media (max-width:592px)
{
	
}