@media screen and (max-width: 1440px) {
    .menu {
        width: 584px;
    }         
    .menu a {
        font-size: 12pt;
    } 
}
@media screen and (max-width: 1200px) {   
    .menu {           
        width: 584px;
    } 
    .headerLogin {
        font-size: 14px;
        padding: 12px 20px;
    }  
    .layer {
        width: calc(100% - 80px);
    }
    
    .mainLayer {
        height: calc(100% - 125px);
    }
}
@media screen and (max-width: 1050px) {
    .c-hamburger {
        width: 30px;
        height: 26px;
        display: block;
    }
    .c-hamburger span {
        top: 9px;
    }
    .c-hamburger span::before {
        top: -9px;
    }
     
    .c-hamburger span::after {
      bottom: -9px;
    }
    
    .header {
        padding: 20px 0px 20px;
    }
    .menu {
        display: flex;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 10;
        flex-direction: column;
        justify-content: center;
        background: #fff; 
        transition: all .3s ease;
        opacity: 0;
        visibility: hidden;
    }
    .menu a {
        margin: 10px 0px;
        color: #fff;
    }
    .menu:after {
        content: " ";
        position: absolute;
        top: 37px;
        left: 40px;
        border-radius: 1000px;
        background: #0a2a45;
        width: 0px;
        height: 0px;
        transform: translate(-50%, -50%);
        transition: all .5s ease;
        z-index: -1;
    }
    .menuShow {
        opacity: 1;
        visibility: visible;   
    }
    .menuShow:after {
        width: 3000px;    
        height: 3000px; 
           
    }
    .menuClose {
        position: absolute;
        margin: auto;
        transform: scaleX(1.2);
        top: 27px;
        left: 40px;
    }
    .menuClose:after {
        display: block;
        content: " ";
        position: absolute;
        top: 10px;
        left: 0;
        width: 25px;
        height: 3px;
        background: #fff;
        transform: rotateY(0deg) rotate(50deg);
    }
    .menuClose:before {
        display: block;
        content: " ";
        position: absolute;
        top: 10px;
        left: 0;
        width: 25px;
        height: 3px;
        background: #fff;
        transform: rotateY(0deg) rotate(-50deg);
    }  
    
    .mainLayer {
        height: calc(100% - 80px);
    }  
}

@media screen and (max-width: 1550px) {
    
    .mainLayer>div {    
        padding-left: 0px;
    }
    .mainCalendar {
        width: 400px;
    }
    .mainCalendarButton {
        width: 132px;
    }
}

@media screen and (max-width: 1250px) {
    .mainLayer:after {
        left: 100px;
    }  
    .mainH1 {
        font-size: 35pt;
        line-height: 110%;
        width: 380px;
    }   
    .contactTitle {
        font-size: 35pt;
        line-height: 110%;    
    }
    .mainBrief {
        font-size: 15pt;
        line-height: 140%;
        margin-bottom: 20px;
        width: 360px;
    }  
    
    .mainLayer {
        min-height: 450px;    
    }
    .mainCalendarButton {
        margin-left: 10px;
    }
    .mainCalendar {
        width: 402px;
    }
}
@media screen and (max-width: 500px) {
    
    .mainCalendar {
        width: 100%;    
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center; 
        flex-wrap: wrap;  
        padding-left: 15px;
    }
    .mainCalendarButton {
        margin-right: 20px;
    }    
    .mainCalendarButton {
        width: 115px;
    }
    .mainCalendar:after {
        display: none;
    }
}
@media screen and (max-width: 750px) {
       
    .mainH1 {
        width: 100%; 
        font-size: 32pt;
        text-align: center;
    } 
    .mainBrief {
        width: 100%;
        text-align: center;
    }
    .mainCalendar {
        margin: auto;
        margin-top: 30px;
    }
    .mainLayer {
        display: block;
    }
    .mainLayer:after {
        content: " ";
        position: absolute;
        top: 220px;
        left: -26px;
        margin: auto;
        background: #EBFCFF;
        height: 250%;
        width: 250%;
        transform: translate(0%, 0%) rotate(-4deg);
    }
    .mainLayer>div {
        margin-top: 250px;
    }
    .mainLayer {
        min-height: 580px;
    }
    .mainLayer:before {
        content: " ";
        position: absolute;
        right: -50%;
        top: 50%;
        margin: auto;
        background: url(../img/mainLayer.webp) 0 0 no-repeat;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 120%;
        background-size: 150%;
        background-position: 61% 20%;
    }
}
@media screen and (max-width: 550px) {
    .mainLayer {
        min-height: 620px;  
    }
    .layer {
        width: calc(100% - 40px); 
    }
    .headerLogin {
        margin-right: 0px;
    }
    .mainLayer>div {
        margin-top: 220px;
    }
    .mainLayer:before {
        top: 46%;
    }
    .mainLayer {
        display: flex;
    }
    .menuClose {
        left: 20px;
    }
    .contactLayer {
        margin-bottom: 40px;
    }
}
@media screen and (max-width: 400px) {
    .mainCalendar {
        width: auto;
        display: inline-block;
        padding-right: 20px;
        margin: auto;
        position: absolute;
        left: 0px;
        right: 0px;
        margin: auto;
        
    }    
    .mainCalendar:after {
        left: 16px;
    }
    .mainCalendar {
        padding-left: 51px;
    }
    .mainCalendarButton {
        width: 90px;
        font-size: 7pt;
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: 15px;
        margin: auto;
    }
}
@media screen and (max-width: 400px) {
    .mainCalendar:after {
        display: none;
    } 
    .mainCalendar {
        padding-left: 15px;
    }  
    .mainLayer {
        min-height: 720px;
    } 
    .mainLayer>div {
        margin-top: 175px;
    }
}

@media screen and (max-width: 1350px) {
    .parentLayer {
        padding: 50px 0px;
    }    
}
@media screen and (max-width: 1100px) {
    .parentLayer {
        min-height: calc(100%);
    }    
}
@media screen and (max-width: 850px) {
    
    .parentLayer {
        min-height: calc(100%);
    }    
}
@media screen and (max-width: 1000px) {
    .parentLeft, .parentRight {
        width: calc(50% - 20px);
    }  
    .parentBrief {
        margin-bottom: 50px;
    }
    .parentH1 {
        font-size: 36pt;
        letter-spacing: -2px;
    }
}
@media screen and (max-width: 700px) {
    .parentLayer {
        padding: 50px 0px;
        display: block;
        min-height: 540px;
    }
    .parentRight {
        width: 55%;
        height: 150px;
        top: 0px;
    }
    .parentLeft {
        width: 100%;
        position: absolute;
        top: 0px;
        
    }  
    .parentBrief {
        font-size: 14pt;
        line-height: 20pt;
        width: calc(45% - 20px);
        min-height: 120px;
    }  
    .parentH1 {
        font-size: 24pt;
        letter-spacing: -2px;
        line-height: normal;
    }
    .parentInfo {
        font-size: 14pt;
        line-height: 20pt;
        
    }
    .parentButton {
        font-size: 10pt;
        line-height: 10pt;
    }
}
@media screen and (max-width: 500px) {
    .parentBrief {
        font-size: 12pt;
        line-height: 18pt;
        width: calc(55% - 20px);
    } 
    .parentRight {
        width: 45%;
        height: 150px;
        top: 0px;
    }
}


@media screen and (max-width: 1100px) {
    .blueHeight {
        min-height: calc(100% - 80px);
    }    
}
@media screen and (max-width: 850px) {
    
    .blueHeight {
        min-height: calc(100% - 91px);
    }    
}
@media screen and (max-width: 1400px) {

    .personInfo {
        margin-top: 0px;
    }   
}
@media screen and (max-width: 1000px) {
    .personInfo {
        margin-top: 0px;
        font-size: 12pt;
        line-height: 18pt;
    }    
    .personBrief {
        width: calc(100% - 420px);
    }
}
@media screen and (max-width: 850px) {
    .personData {
        width: 300px;
    }    
    .personName {
        font-size: 26pt;
    }
    .personPosition {
        font-size: 14pt;
    }    
    .personBrief {
        width: calc(100% - 360px);
    }
}

@media screen and (max-width: 750px) {
    .personData {
        width: 100%;
        
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start; 
        flex-wrap: wrap;      
    }
    .personData>div:nth-child(2) {
        width: calc(100% - 340px);      
        transform: translate(0px, 20px);
    }
    .personPhoto {
        max-width: 300px;
        min-height: 357px;
    }
    .personBrief {
        width: 100%;
        position: relative;
    }
    .personInfo {
        min-height: auto;
    }
    
/*    .personContact {
        position: absolute;
        left: 340px;
        top: -112px;
    }
    .personSoc {
        position: absolute;  
        left: 396px;
        top: -130px;
    }    */
    .personBottom {
        margin-top: 0px;
        position: absolute;
        top: 309px;
        right: 0px;
        width: calc(100% - 340px); 
    }
    .personLayer>.layer {
        position: relative;
    }
}
@media screen and (max-width: 700px) {
    .personSoc {
        margin-bottom: 20px;
    }
    .personBottom {
        margin-top: 0px;
        position: absolute;
        top: 260px; 
        width: calc(100% - 340px); 
        flex-direction: column-reverse;
        justify-content: center;
    }  
}
@media screen and (max-width: 650px) {
    .personPhoto {
        width: 200px;
        min-height: 235px;
    }   
    .personData>div:nth-child(2) {
        width: calc(100% - 240px);       
    }    
    .personBottom {
        width: calc(100% - 240px);  
        top: 145px;
        align-items: flex-start; 
                     
    }

    .personName {
        font-size: 18pt;
    }
    .personPosition {
        font-size: 12pt;
    } 

}
@media screen and (max-width: 450px) {
    .personPhoto {
        width: 180px;
        min-height: 210px;
    }   
    .personData>div:nth-child(2) {
        width: calc(100% - 200px);  
        transform: translate(0px, 0px);    
    } 
    .personBottom {
        width: calc(100% - 200px); 
        align-items: center;   
        top: 119px;    
    }    
    .personContact { 
        width: 100%; 
        padding-left: 0px;
        padding-right: 0px;  
        font-size: 10pt;
    }
    .personSoc {             
        left: 256px;  
    }
    .personSoc {            
        left: 200px;
        right: 0px;    
        
    }
    .personData>div:nth-child(2) {       
    } 
}


@media screen and (max-width: 500px) {
    
    .pleaseText { 
        font-size: 28pt;   
            
    }
}

@media screen and (max-width: 1370px) {
    .parentBottom {
        padding-top: 77px;
        padding-bottom: 37px;
    } 
    .parentBottomTitle {
        margin-bottom: 26px;
    }   
}
@media screen and (max-width: 1200px) {
    .parentBottomItem {
        padding: 27px 20px 41px;
    }  
    .parentBottomItem div {
        font-size: 14pt;
    }    
}
@media screen and (max-width: 1050px) {
    .parentBottomTitle {
        font-size: 19pt;
    }  
    .parentBottomItem {
        min-height: 250px;
    }  
}
@media screen and (max-width: 950px) {
    .parentBottomItem {
        width: calc((100% - 18px) / 2);
        margin-bottom: 18px;
    }    
}
@media screen and (max-width: 500px) {
    .parentBottomItem {
        width: 100%;
        margin-bottom: 18px;
        min-height: 180px;
    } 
        
}


@media screen and (max-width: 1000px) {
    .mainBottomRight p {
        font-size: 15pt;
        margin-bottom: 30px;
    }   
    .mainBottomRight {
        padding: 73px 0px 30px 32px;
        width: 50%;
    } 
    .mainBottomLeft {
        width: 50%;
    }
}
@media screen and (max-width: 550px) {
    .mainBottomLeft {
        width: calc(100% + 40px);
        transform: translate(-20px, 0px) !important;
    }
    
}
@media screen and (max-width: 750px) {
    .mainBottomLeft {
        width: calc(100% + 80px);
        transform: translate(-40px, 0px) !important;
        height: 250px;
        min-height: 250px;
        top: 0px;
        position: unset;
    }  
    .mainBottomRight {
        position: unset;
        width: 100%;
        
        padding: 20px 0px 50px;
        display: block;
    }
    .mainBottom .layer {
        position: relative;
    }
    .mainBottom {
        min-height: inherit;
    }  
    .mainBottomRight p {
        font-size: 14pt;   
    }
}


@media screen and (max-width: 550px) {
    .mainBottomLeft {
        width: calc(100% + 40px);
        transform: translate(-20px, 0px) !important;
        height: 250px;
        min-height: 250px;
        top: 0px;
        position: unset;
    }      
}
@media screen and (max-width: 1280px) {
    .extraItemTop {
        font-size: 11pt;
    }    
    .extraItemBottom {
        font-size: 11pt;
        line-height: 142%;
    }
    .extraLeft {
        font-size: 22pt;
    }
}

@media screen and (max-width: 1050px) {
    .extraMain>.flexBox {
        position: relative;  
        padding-top: 140px;    
    }
    .extraItem {
        width: calc((100% - 17px) * 0.5);
        position: relative;
        margin-bottom: 17px
    }  
    .extraLeft {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;  
        z-index: 1;
        min-height: auto;
    }
    .extraLeft:after {
        transform: rotate(0deg);
        left: unset;
        right: 32px;
        top: 0px;
        bottom: 0px;
        
    }  
    .extraItemBottom {
        min-height: auto;
        padding: 20px 20px;
    }
    .extraItemTop {
        padding: 41px 10px 31px;
    }
}
@media screen and (max-width: 600px) {
    .extraLeft {
        font-size: 16pt;
        padding-right: 90px;
    }    
}
@media screen and (max-width: 1400px) {
    .extraLeft2 {
        font-size: 17pt;
    }  
}
@media screen and (max-width: 1050px) {
    .extraLeft {
        padding-right: 90px;
    }  
}

@media screen and (max-width: 700px) {
    .extra2Main .extraItemBottom {
        font-size: 10pt !important;
    }  
}
@media screen and (max-width: 650px) {
    .extra1Main .extraItemBottom {
        font-size: 11pt !important;
    }  
}
@media screen and (max-width: 1400px) {

    .personBrief {
        margin-top: 70px;   
    } 
}
@media screen and (max-width: 1000px) {
    .personLayer {
        padding-left: 0px;    
        padding-right: 0px;    
    }
    .personBrief {
        margin-top: 20px;
    }
    .personLayer {
        padding-top: 20px;
    }
}
@media screen and (max-width: 750px) {    
    .personBrief {
        margin-top: 0px;
    }
    .personLayer {
        padding-top: 20px;
    }
}

@media screen and (max-height: 650px) and (min-width: 750px) {  
    .mainBottomRight {
        min-height: 650px;
    }
    .mainBottom {
        min-height: 650px;
    }
}




@media screen and (max-width: 1600px) {
    
    .schoolLayer {
        max-width: 1140px;
        
    }    
}
@media screen and (max-width: 1050px) {
    .schoolLayer {
        margin-top: 80px;
    }    
}
@media screen and (max-width: 950px) {
    .schoolLeft {
        position: absolute;
        width: 100%;
    } 
    .schoolItem {
        margin-top: 150px;
        width: calc(50% - 10px);
    }   
}
@media screen and (max-width: 700px) {
    .schoolTop {
        font-size: 14.1pt;
    } 
    .schoolLeft {
        padding: 20px 20px;
        font-size: 16.1pt;
    }
       
}
@media screen and (max-width: 500px) {
    
    .schoolItem {
        margin-top: 150px;
        width: 100%;
    }  
    .schoolLayer .schoolItem:nth-child(3) {
        margin-top: 20px;
    }
       
}


@media screen and (max-width: 1500px) {
    .uaRightContent {
        max-width: 500px;
    }
    .uaButtonLayer {
        max-width: 500px;
    }
    
    .uaLeft {
        width: calc(50% - 34px);
    }
    .uaRight {
        width: calc(50% - 34px);
    }
}
@media screen and (max-width: 850px) {
    .uaLayerContent {
        flex-direction: column;
    }
    .uaLayer {
        padding: 40px 0px;
        background: #fff;
    } 
    .uaLeft {
        width: 100%;
    }
    .uaRight {
        width: 100%;
    } 
    .uaLayerBack:after {
        display: none;
    } 
    .uaTitle {
        text-align: center;
        font-size: 24pt;
        margin-bottom: 40px;
    } 
    .uaImg {
        padding-bottom: 50%;
        margin: auto;
        width: calc(100% + 80px);
        transform: translate(-40px, 0px);
    }
    .uaRight {
        margin-top: 40px;
    }
    .uaRightContent {
        max-width: 100%;
    }
    .uaRightContent p {
        font-size: 14pt;
    }
    .uaButtonLayer {
        max-width: 100%;
        margin-top: 40px;
    }
}
@media screen and (max-width: 550px) {
    .uaImg {
        padding-bottom: 50%;
        margin: auto;
        width: calc(100% + 40px);
        transform: translate(-20px, 0px);
    }    
}
@media screen and (max-width: 600px) {
    .uaTitle {
        font-size: 18pt;
    }  
    .uaRightContent p {
        font-size: 12pt;
    }  
    .uaButtonLayer a {
        font-size: 10pt;
    } 
    .mainBottomButton {
        font-size: 10pt;
    }
}

@media screen and (max-width: 1500px) {
    .parentBottomItem>div {
        margin-bottom: 40px;
    }    
}


@media screen and (max-width: 1000px) {
    .contactTitle {       
        max-width: 320px;  
    }   
    .contactBrief {   
        font-size: 14pt;   
        max-width: 310px;      
    } 
    .contactLeft { 
        width: 320px;
    }
    .contactRight { 
        width: calc(100% - 440px);
    }  
    .contactField input {
        font-size: 14pt;
        padding: 16px 26px;
    }
    
    .contactRightMenu {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 40px;
    }
    
    .picList {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 40px !important;
        justify-content: center !important;
        
    }
    .picList a {
        margin: 0px 10px;
    }
    
    .contactRightMenu a {
        display: inline;
        margin-bottom: 0px;
    }
    .contactRightMenu .flexBox {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
}
@media screen and (max-width: 750px) {
    .contactRightMenu a {
        font-size: 14pt;
    }     
    .contactLeft { 
        width: 100%;  
    }
    .contactRight { 
        width: 100%;
        max-width: 450px;
        margin: auto;             
    }
    .contactTitle {
        max-width: 100%;
        text-align: center;
        max-width: 450px;
        margin: auto;
        margin-bottom: 20px;
        font-size: 32pt;
    }     
                     
    .contactBrief {
        margin: auto;
        margin-bottom: 40px;
        max-width: 450px;
    }
    .contactBrief .personSoc {
        text-align: center;
        margin: auto;
        justify-content: center;
    }
}
@media screen and (max-width: 610px) {
    .contactRightMenu {
        flex-direction: column;
        margin-top: 60px;
    }   
    .contactRightMenu a {
        display: block;
        font-size: 17pt;
        margin-bottom: 20px;
    }   
    .contactRightMenu .personSocIn {
        margin-top: 0px;
    }  
}
@media screen and (max-width: 500px) {
 
    .contactBrief {
        font-size: 12pt;
    }   
    .contactInfo {
        font-size: 12pt;
    }
    .contactField input {
        font-size: 12pt;
        padding: 10px 16px;
        
    }       
    .contactButton {
        font-size: 14pt;
        padding: 16px 16px;
    }
}

@media screen and (max-width: 1200px) { 
    .mainSchoolItemLeft .mainSchoolItemImg {
        width: calc(100% + 40px);
        margin-left: -40px;    
    }
    .mainSchoolItemRight .mainSchoolItemImg {
        width: calc(100% + 40px);     
    }
    

}
@media screen and (max-width: 1100px) {
    .mainSchoolTitle {
        font-size: 22pt;
        max-width: 800px;
        margin: auto;
    }  
    .mainSchoolItemTitle {
        font-size: 16pt;
    }
    .mainExtraItemTitle {
        font-size: 16pt;
    }
    .mainBottomRight p {
        font-size: 15pt; 
        margin-bottom: 30px;   
    }
    .mainExtraTitle {
        font-size: 22pt; 
    }
    .mainExtra {
        padding: 40px 0px 40px;
    }
    
    .mainExtraList {            
        margin-top: 40px;
    }
    .mainExtraItem {
        width: 50%;
        margin-bottom: 40px;
    }
}
@media screen and (max-width: 750px) {
    .mainSchool {
        padding: 40px 0px 0px;
    }
    .mainSchoolTitle {
        font-size: 18pt; 
    }
    .mainExtraTitle {
        font-size: 18pt; 
        
        max-width: calc(100% - 80px);
    }
    .mainSchoolItemTitle {
        font-size: 14pt;
    } 
    .mainExtraItemTitle {
        font-size: 14pt;
    } 
    
    .mainBottomRight p {
        font-size: 13pt;     
    }
    .mainBrief {
        font-size: 13pt;
    }
    .mainSchoolItemBrief {
        font-size: 11pt;
    }
    .mainExtraItemBrief {
        font-size: 11pt;
    }
    
    .mainSchoolItemLeft .mainSchoolItemBrief {
        padding-right: 24px;
    }
    .mainSchoolItemRight .mainSchoolItemBrief {
        padding-left: 24px;
    }
    .mainSchoolItemRight .mainSchoolItemTitle {
        padding-left: 24px;
    }
    .mainSchoolItemTitle {     
        max-width: 250px;
        padding-right: 20px;
    }
    
    
    .mainExtraItemTitle {
        margin: 16px 0px 10px;
        padding: 0px 20px;
    }
    .mainExtraItemBrief {
        padding: 0px 20px;
        line-height: 140%;  
        
    }   
    .mainExtra {
        padding: 20px 0px 40px;
    }
    .mainExtraItem {
        width: 50%;
        margin-bottom: 20px;
    }
    
}
@media screen and (max-width: 550px) {
    
    .mainExtraTitle {    
        max-width: calc(100% - 40px);
    }
    
    .mainSchoolItem {
        width: 50%;
    }  
    
    .mainSchool {
        width: 100%;
    }
      

    .mainSchoolItemTitle {
        max-width: 100%;
        padding: 0px 20px;
    }
    .mainSchoolTitle {
        padding-left: 20px;
        padding-right: 20px;
    }
    .mainSchoolItemBrief {
        padding-left: 20px;
        padding-right: 20px;
    }
    .mainSchoolItem:nth-child(1) .mainSchoolItemImg {
        opacity: 0;
        padding-bottom: 100%;
        background-position: 50% 100%;
    }
    .mainSchoolItem:nth-child(2) .mainSchoolItemImg {
        width: 200%;
        margin-left: -100%;
        padding-bottom: 100%;
        background-position: 50% 100%;
    }
    
    
    .mainSchoolItemTitle {
        font-size: 11pt;
    } 
    .mainExtraItemTitle {
        font-size: 11pt;
    } 
    
    
    .mainSchoolItemBrief {  
        font-size: 11pt;
    }
    .mainExtraItemBrief {
        padding: 0px 20px;
        line-height: 140%;
        font-size: 11pt;
        
    } 
}




@media screen and (max-width: 1270px) {    
    .mainParentsTop {  
        margin-bottom: 75px; 
    }  
    
}
@media screen and (max-width: 1100px) {    
    .mainParentsTop {  
        margin-bottom: 55px; 
    }    
    .mainParentsTop {
        font-size: 15pt;
    }    
    .mainParentsBrief {
        font-size: 15pt;
    }  
    .mainParentsTitle {
        font-size: 22pt;
        margin-bottom: 20px;
    }  
    .mainParentsItemRight {
        padding-left: 0px;
    }
    
}
@media screen and (max-width: 950px) {  
       
    .mainParentsTop {  
        margin-bottom: 20px; 
    }  
    .mainParentsTitle {
        font-size: 22pt;
        margin-bottom: 20px;
    }
    .mainParentsImg {   
        padding-bottom: 120%;      
    }  
}


@media screen and (max-width: 750px) {
    .mainParents {
        padding-top: 30px;
    }
    .mainParentsList {
        flex-direction: column;
    }
    .mainParentsTop {
        width: 100%;
        padding-right: 0px;
    }
    
    .mainParentsItem {
        width: 100%;
    }
  
    .mainParentsTop {
        font-size: 13pt;   
    }    
    .mainParentsBrief {
        font-size: 13pt;
        padding-right: 0px;
        padding-bottom: 30px;
    }     
    .mainParentsTitle {
        font-size: 18pt;
        margin-bottom: 20px;
    }  
    .mainParentsImg {
        padding-bottom: 86%;
    }
}

@media screen and (max-width: 550px) {
    
   

}

@media screen and (max-width: 1340px) {
    .mainUaItemRight {
        padding-left: 64px;
    } 
    .mainUaItemLeft {
        padding-left: 0px;
    }   
}
@media screen and (max-width: 1100px) {
    .mainUaTitle {
        font-size: 16pt;
        margin-bottom: 20px;
    }  
    .mainUaBrief div {
        font-size: 15pt;
        margin-bottom: 10px;
    }    
    .contactBrief {
        font-size: 15pt;     
    }   
    .contactInfo {
        font-size: 15pt;     
    }   
    .contactButton {
        font-size: 15pt;     
    }   
}
@media screen and (max-width: 950px) {           
    .mainUaImg {    
        width: 100%;
        padding-bottom: 140%;    
        margin-bottom: 40px;  
    }
}
@media screen and (max-width: 750px) {
      
    .mainUaTitle {
        font-size: 24pt;    
        position: relative;
/*        height: 0;
        padding-bottom: 86%;*/
    }  
    .mainUa {
        padding: 30px 0px 30px;
    }
    .mainUaItemRight {
        padding-left: 45px;
    }  
    .mainUaItem {
        width: 100%;
    }
    .mainUaImg {    
        width: 100%;
        padding-bottom: 86%;    
        margin-bottom: 40px;
        position: absolute;
        top: 100px;
        left: 0px;  
    }
    .mainUaItemRight {
        padding-left: 0px;
    }
    .mainUaList {
        position: relative;
        flex-direction: column-reverse;
    }   
    .mainUaBrief {
        margin-top: 100px;
    }
    
}
@media screen and (max-width: 750px) {
    .mainUaTitle {
        font-size: 14pt;      
        margin-bottom: 20px;
    }
    .mainUaBrief div {
        font-size: 13pt;
    } 
    .contactBrief {
        font-size: 13pt;
    }    
    .contactInfo {
        font-size: 13pt;
    }    
    .contactButton {
        font-size: 13pt;
    }    
}
@media screen and (max-width: 550px) {
    .mainUaTitle {
        font-size: 14pt;     
    }  
}

@media screen and (max-width: 1400px) {

    .personInfo {
        margin-top: 0px;
    }   
    .personBrief {
        margin-top: 0px;
    }   
}

@media screen and (max-width: 750px) {
    
    .joinBrief {
        font-size: 13pt;
    }    
    .joinLayer {     
        width: calc(100% - 40px);     
    }
    .joinLayer>div {
        padding-left: 0px;
        padding-right: 0px;
    }
    .joinTitle {
        font-size: 18pt;
    }
    .joinName {
        font-size: 11pt;
    }
                    
}


@media screen and (max-width: 800px) {
    .arrUp {
        width: 54px;
        height: 54px;
        bottom: 30px;
        right: 30px;
    }    
    .arrUp div {
        width: 32px;
        height: 32px;
    }
}
@media screen and (max-width: 600px) {
    .arrUp {
        width: 46px;
        height: 46px;
        bottom: 20px;
        right: 20px;
    }    
    .arrUp div {
        width: 24px;
        height: 24px;
    }
}

@media screen and (max-width: 1300px) {
    .mainVacContentLeft {
        padding-right: 66px;
    }    
}

@media screen and (max-width: 1300px) {
    .mainVacLink {
        font-size: 15px;
        width: 100%;
    }   
    .mainVacSendCv {
        font-size: 15px;
        width: 100%;
    }    
}

@media screen and (max-width: 930px) {
    .mainVacContentLeft {
        width: 100%;
        padding-right: 0px;
    }
    .mainVacContentRight {
        width: 100%;
    }
    .mainVacTitle {
        text-align: center;
    }
    .mainVacLink {
        font-size: 15px;
        max-width: 280px;
        margin: auto;
    }   
    .mainVacSendCv {
        font-size: 15px;
        max-width: 280px;
        margin: auto;
        margin-bottom: 25px;
        margin-top: 25px;
    }    
}
@media screen and (max-width: 650px) {
    .mainVacContent {
        padding: 40px 40px;
    }
    .mainVacTitle {
        font-size: 18pt;
    }
    .mainVacBg {
        padding-top: 80px;
    }
    
}

@media screen and (max-width: 450px) {
    .mainVacContent {
        position: relative;
        padding: 40px 30px;
    }
    .mainVacLayer {
        min-height: auto;
        width: calc(100% - 60px);
    }
    
}
@media screen and (max-width: 550px) {
    .intl-tel-input .selected-flag {
        padding-left: 16px !important;
    }
    .intl-tel-input .selected-flag .arrow {
        right: -10px !important;
    }
    #newPhone {
        padding-left: 58px;
    }
    
}


@media screen and (max-width: 750px) {
    .vacantionLayer {    
        padding: 20px;
    }
}