@media screen and (max-width: 820px) and (orientation:landscape){
	.desktop .upper_logo_main{
		height: 100%;
	}
}

@media screen and (orientation: portrait){

	#CPA_logo_1, #CPA_subtitle_1{
		display: flex;
	}
	#CPA_logo, #CPA_subtitle{
		display: none;
	}
	.logo_main{
		flex-direction: row;
	}
	.CPA_logo_1_wrap, .CPA_subtitle_1_wrap{
		width: auto;
		height: 100%;
	}
	
}

@media screen and (orientation: landscape){

	#CPA_logo_1, #CPA_subtitle_1{
		display: none;
	}
	#CPA_logo, #CPA_subtitle{
		display: flex;
		margin-bottom: var(--outer-margin);
	}
	.logo_main{
		flex-direction: column;
	}
}

/*small screen*/

@media screen
and (max-width: 820px), (min-width: 821px) and (orientation: portrait) {

	svg.mobile{
	    height:100%;
	}
	.logo_main {
    position: fixed;
    width: 100%;
    /* height: 100%; */
    align-items: space-between;
    /* padding: var(--outer-margin); */
    box-sizing: border-box;
    display: flex;
    transition: 0.5s width;
    top: 0;
    justify-content: space-between;
    overflow: hidden;
    align-items: center;
    display: flex;
    justify-content: center;
	}

	.upper_logo_main {
		flex-grow: 1;
		min-width: 115%;
		align-self: center;
	}    
}

/*medium screen*/

@media screen
and (min-width: 821px) 
and (max-width: 1600px) and (orientation:landscape)  {

	.logo_main{
		position: fixed;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    padding: calc(var(--outer-margin)/4);
    box-sizing: border-box;
    display: flex;
    transition: 0.5s width;
    top: 0;
	} 

	.upper_logo_main {
		flex-grow: 1;
	} 
  
}

/*large screen*/

@media screen and (min-width: 1600px) and (orientation: landscape) {
	.logo_main{
		position: fixed;
	    width: 100%;
	    height: 100%;
	    justify-content: space-between;
	    padding: var(--outer-margin);
	    box-sizing: border-box;
	    display: flex;
	    transition: 0.5s width;
	    top: 0;
	}  
	.upper_logo_main {
		flex-grow: 1;
	} 
}



@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape) {
  	
  	.logo_main {
	    position: fixed;
	    width: 100%;
	    height: 100%;
	    align-items: space-between;
	    padding: var(--outer-margin);
	    box-sizing: border-box;
	    display: flex;
	    transition: 0.5s width;
	    top: 0;
	    justify-content: space-between;
	}

	/*.upper_logo_main {
		flex-grow: 0;
	}*/

}


.mobile #CPA_logo_1, .mobile #CPA_subtitle_1{
	transition: 1s all;
}

.mobile .CPA_logo_1_wrap{
	height: 100%;
}

.mobile #CPA_logo_1 g{
	height: 100%;
}    



.logo_main{
	pointer-events: none;
	z-index: -1;
	background: var(--div-bg);
}

.upper_logo_main{
    display: grid;
}