/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){

}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){

}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){

}

/* #### iPhone 6 Portrait or Landscape #### */
@media screen and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2){

}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){

}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){

}

/* #### Tablets Portrait#### */
@media screen and (min-device-width: 480px) and (max-device-width: 1024px){

}


/* #### Desktops #### */
@media screen and (min-width: 260px) and (max-width: 479px){
    .forceWidthContent{width: 100%;}
    .rightPanel{width: 100%;position: relative;display: block;border-left: 0px solid #f0f0f0;}
    .homepage{min-height: inherit;}
    .rightPanelItem{display: block;width: 100%;height: 25vh;vertical-align: top;min-height: 9em;}
    
    h1{font-size: 6vw;}
    h2{font-size: 5vw;}
    p{font-size: 4.8vw;}
    
    .gwButton span{font-size: 4.4vw;}
    
    #mainLogo{width: 50vw;}
    
    .homepageHeader1{
        font-size: 7.2vw;
        padding-top: 6vw;padding-bottom: 12vw;
    }

    .homepageHeader2{
        font-size: 6vw;
        padding-bottom: 4vw;
        
    }
    
    .homepage,.mainContent{padding: 1em;}
    .paddingContainer{padding: 1em;}
    
    .mainContent h1,.mainContent h2,.mainContent h3{
        width: 100%;
    }
    .forceTable{display: block;width: 100%;}
    .forceTable.maxTableWidth{
        width: 100%;
    }
    .forceTable .forceTableCell{display: block;width: 100%;}
    .forceTable .forceTableCell.Small{width: 100%;padding-bottom: 2em;}
    .forceTable .forceTableCell.Big{width: 100%}
    .forceTable .forceTableCell.v33{width: 100%;}
    .forceTable .forceTableCell.v25{width: 100%;}
    .forceTable .forceTableCell.v50{width: 100%;}
    .contactFormArea{
        padding-right: 1em;
    }
        
    .fInput,.fTextarea{
        font-size: 5vw;
        padding-top: 2vw;
        padding-bottom: 2vw;
    }

    .contactForm #contact_message{font-size: 4.2vw;}
    
    .contactForm #contactSend{font-size: 4.2vw;width: 22vw;padding: 3vw;}
    
    .contactForm{width: 100%;}
    
    .coursePanelItem .coursePanelItemTitle{font-size: 7vw !important;}
    .coursePanelItem .coursePanelItemSubTitle{font-size: 4vw !important;}
    .coursePanelItem .extraInfo{font-size: 5vw;width: 94% !important;}
    .coursePanelItem .coursePanelItemDate{font-size: 6vw !important;}
    .coursePanelItem .coursePanelItemCategory{font-size: 5vw !important;}
    
    .coursesModulePanelItem  .coursePanelItem.halfSize .coursePanelItemTitle{font-size: 7vw;padding-top: 5vh;}

    .coursesModulePanelItem .coursePanelItem.halfSize .coursePanelItemLogo{width: 29%;height: 18vw;}
    .coursesModulePanelItem .coursePanelItem.halfSize.c3 .coursePanelItemLogo{width: 29%;height: 18vh;}
    .coursesModulePanelItem .coursePanelItem.halfSize.c4 .coursePanelItemLogo {
        width: 19%;
        height: 18vh;
    }
    
    .courseTemplate .fullWidthCentered .sectionLogoArea .coursePanelItem{max-width: 100%;}
    .courseTemplate .fullWidthCentered .sectionLogoArea .coursePanelItem .coursePanelItemTitle {padding-top: 5vw;padding-bottom: 4vw;}
    
    
    .courseExtraInfoArea{
        left: 0%;
        padding-top: 0em;
        padding-bottom: 0em;
        margin: 0 auto;
        width: auto;
        position: relative;
    }
    .courseExtraInfoArea .courseExtraInfoItem .courseExtraInfoLabel{font-size: 4vw;}
    .courseExtraInfoArea .courseExtraInfoItem .courseExtraInfoValue{font-size: 4.8vw;}
    
    .courseLeftInfoItem .courseLeftInfoItemLabel{font-size: 5vw;}
    .courseLeftInfoItem .courseLeftInfoItemValue{font-size: 7vw;}
    .courseLeftInfoItem .courseLeftInfoItemValueSmall{font-size: 5vw;}
    
    .courseExtraInfoArea .courseExtraInfoItem {
        position: relative;
        display: table-cell;
        width: auto;
        padding: 8vw;
        padding-bottom: 0;
        padding-top: 0;
    }

    
    #footer{padding: 1em;}
    #footer .paddingContainer{padding: 1em;}
    #footer .forceTable{display: block;width: 100%;}
    #footer .forceTable .forceTableCell{display: block;width: 100%;}
    #footer .forceTable .forceTableCell.Small{width: 100%;padding-bottom: 2em;}
    #footer .forceTable .forceTableCell.Big{width: 100%;padding-bottom: 2em;}
    
    #footer .footerLogo{width: 50vw;padding-top: 1em;padding-bottom: 1em;}
    #footer .footerMenu a {font-size: 4.5vw;}
    #footer .footerSocialMenu{text-align: left;padding-top: 2em;}
    #footer .footerSocialMenu a{font-size: 4vw;text-align: left;}
    #footer .copyright{font-size: 4vw;position: relative;bottom: auto;right: auto;padding-top: 10vw;}
    #footer .newsletterArea h2{font-size: 4.6vw;}
    #footer .newsletterArea p{font-size: 4.4vw;}
    
    #footer .newsletterArea .newsletterInputArea{width: 100%;}
    #footer .newsletterArea .newsletterInputArea input{
        font-size: 4vw;width: 80%;
    }
    
    #footer .newsletterArea .newsletterInputArea .newsletterSubmit{
        font-size: 4vw;width: 20%;
    }
	
	#footer .newsletterArea #newsletterMessage {
		font-size: 4vw;
		bottom: -0.4em;
	}
	
	#footer .newsletterArea #thank_newsletter {
		font-size: 4vw;
		bottom: -0.4em;
	}
    
    .sectionLogoArea .coursePanelItem .coursePanelItemTitle{font-size: 8vw;}
    
    .t_course_item .t_courses_level{
        font-size: 5.2vw;padding-top: 8vw;
    }
    .t_course_item .t_courses_category{
        font-size: 4.8vw;padding-top: 10vw;
    }
    .t_course_item .t_courses_name{
        font-size: 6.2vw;padding-top: 2vw
    }
    
    .t_course_item .t_courses_place{
        font-size: 4.8vw;padding-top: 10vw;
    }
    
    .t_course_item .t_courses_date{
        font-size: 4.8vw;padding-top: 6vw;padding-bottom: 10vw;
    }
    
    .courseTemplate.inCourse .sectionLogoArea {
        top: 0px;
        padding-bottom: 0em;
    }
    
    .courseTemplate.inCourse .coursePanelItem .coursePanelItemLogo {
        width: 50%;
    }
    
    .t_course_item:hover{-moz-box-shadow: 0px 0px 0em 0em #000;-webkit-box-shadow: 0px 0px 0em 0em #000;box-shadow: 0px 0px 0em 0em #000; z-index: 100;}
    
    .fluid-menu {
        top: 1em;right:1em;
    }
    
    .menu.menu-1 {
        width: 2.8em;
        height: 2.8em;
        padding: 0.64em;
        padding-top: 0.88em;
    }
    
    .menu-item {
        height: 4px;
        margin: 0 0 3px;
    }
    
    #menuContent{right: -100%;width: 100%;}
    .courseTemplate.open{left: -100%;}
    
    #menuContent{min-height: 100vh;height: auto;}
    #menuContent.open{border-left: 0px solid #f0f0f0;}
    #menuContent .courserMenu a{
        font-size: 5vh;margin-bottom: 3vh;
    }
    #menuContent .courserExtraMenu a{
        font-size: 5vh;margin-bottom: 3vh;
    }
    .tfl{font-size: 4.2vw;padding-right: 0.2em;}
    .tc1{
        font-size: 5vw;
        padding-bottom: 6vw;
    }
    .tc2{
        padding-bottom: 10vw;
        font-size: 8vw;
    }
    
    .tc_button{
        padding: 4vw;
        font-size: 3.4vw;
        width: 100%;
        margin-bottom: 3vw;
    }
    .mainContent ul li{font-size: 4.6vw;}
    .courseScheduleArea{width: 100%;}
    .courseScheduleArea .courseScheduleItem{width: 100%;padding-bottom: 1em;}

    .courseScheduleArea .courseScheduleItemLeft{display: block;width: 100%;padding-bottom: 1em;}
    .courseScheduleArea .courseScheduleItemRight{display: block;width: 100%;}
    
    .courseScheduleArea .courseScheduleItemCircle{
        width: 48vw;height: 48vw;margin: 0 auto;
    }
    
    .courseScheduleArea .courseScheduleItemRight h3{
        font-size: 5.6vw;
    }
    .courseScheduleArea .courseScheduleItemInner{padding: 0em;padding-bottom: 1em;}
    .courseScheduleArea .courseScheduleItemRight p{font-size: 4.6vw;}
    
    
    .paddingContainer2{width: 100%;padding: 1em;}
    p.forceSmall{font-size: 5vw;padding-left: 0vw;}
    
    
    .accomondationItemsArea .accomondationItem{margin-bottom: 11vw;display: block;}
    
    .accomondationItemsArea .accomondationItem .accomondationItemLeft {
        display: block;width: 100%;
    }
    
    .accomondationItemsArea .accomondationItem .accomondationItemImage {
        height: 60vw;
    }
    
    .accomondationItemsArea .accomondationItem .accomondationItemRight {
        position: relative;
        display: block;
        vertical-align: top;
        width: 100%;
        padding-left: 0;
        padding-top: 4vw;
    }
    
    .accomondationItemsArea .accomondationItem .accomondationHotelTitle {
        font-size: 5.8vw;
    }
    
    .accomondationItemsArea .accomondationItem .accomondationHotelLink,
    .accomondationItemsArea .accomondationItem .accomondationAddress{
        font-size: 4.8vw;
    }
    
    .accomondationItemsArea .accomondationItem .accomondationHotelMapLink {
        padding: 3vw;
        width: 100%;
        font-size: 4.2vw;
    }
    
    .bigPageTitle {
        font-size: 6vw;
    }
    
    
    .courseTemplate.inCourse #mainLogo {
        position: relative;
        padding: 0em;
    }
    
    .courseTemplate .sectionLogoArea .coursePanelItem .coursePanelItemTitle {
        top: 25%;
        padding-top: 0px;
        font-size: 9vw !important;
    }
    
    
    .forceTable.courseTableHeadlines .forceTableCell.v25{width: 33%;display: table-cell;padding-bottom: 10vw;}
    .forceTable.courseTableHeadlines .forceTableCell.v25.block{width: 100%;display: none;}
    .forceTable.courseTableContents .forceTableCell.v25{width: 33%;display: table-cell;padding-bottom: 3vw;}
    .forceTable.courseTableContents .forceTableCell.v25.block{width: 100%;display: block;}
    .forceTable.courseTableContents{}
    
    .extraPaddingRight{padding-right: 0vw;}
    .extraPaddingLeft{padding-left: 0vw;}
    
    .fGallery{
        height: auto;
    }
    .fGallery .fGalleryLeft,.fGallery .fGalleryRight{position: relative;width: 100%;padding: 0px;}
    .fGallery .fGalleryImageContent{position: relative;padding: 0px !important;width: 100%;height: 40vh !important;margin-bottom: 4vw;}
    .fieldtripsMapLink{float: none;width: 100%;}
}
@media screen and (min-width: 480px) and (max-width: 1023px){
    .forceWidthContent{width: 100%;}
    .rightPanel{width: 100%;position: relative;display: table;border-left: 0px solid #f0f0f0;}
    .homepage{min-height: inherit;}
    .rightPanelItem{display: table-cell;width: 25%;height: 16vw;vertical-align: top;}
    .rightPanelItem .coursePanelItem.halfSize .coursePanelItemLogo{width: 42%;height: 12vw;}
    .rightPanelItem .coursePanelItem.halfSize.c4 .coursePanelItemLogo{width: 26%;height: 12vw;}
    .rightPanelItem .coursePanelItem.halfSize .coursePanelItemTitle {
        font-size: 2.24vw;
        padding-top: 4vw;
    }
    .paddingContainer{padding: 2em;}
    h1{font-size: 4vw;}
    h2{font-size: 2vw;}
    p{font-size: 1.8vw;}
    
    .gwButton span{font-size: 1.6vw;}
    
    .fInput,.fTextarea{
        font-size: 1.8vw;
        padding-top: 1vw;
        padding-bottom: 1vw;
    }

    .lessPaddingTopBottom{
        padding-top: 1.6em;padding-bottom: 1.6em;
    }
    
    .contactForm #contact_message{font-size: 1.6vw;}
    
    .contactForm #contactSend{font-size: 1.6vw;width: 15vw;padding: 1vw;}
    
    .contactForm{width: 100%;}
        
    .coursePanelItem .coursePanelItemTitle{font-size: 3.8vw;}
    .coursePanelItem .coursePanelItemSubTitle{font-size: 2.2vw;}
    .coursePanelItem .extraInfo{font-size: 2.6vw;width: 94%;}
    .coursePanelItem .coursePanelItemDate{font-size: 3.2vw;}
    .coursePanelItem .coursePanelItemCategory{font-size: 2.2vw;}
    
    .courseTemplate .fullWidthCentered .sectionLogoArea .coursePanelItem .coursePanelItemTitle {padding-top: 2vw;padding-bottom: 2vw;}
    
    .courseExtraInfoArea{
        margin: 0 auto;
        left: 0%;
        width: auto;
        position: relative;
    }
    .courseExtraInfoArea .courseExtraInfoItem .courseExtraInfoLabel{font-size: 2vw;}
    .courseExtraInfoArea .courseExtraInfoItem .courseExtraInfoValue{font-size: 2.6vw;}
    
    
    .courseExtraInfoArea .courseExtraInfoItem {
        position: relative;
        display: table-cell;
        width: auto;
        padding: 2em;
        padding-bottom: 0px;
    }
    
    #footer .footerLogo{width: 10vw;}
    #footer .footerMenu a {font-size: 1.3vw;}
    #footer .footerSocialMenu a{font-size: 1.4vw;}
    #footer .copyright{font-size: 1.2vw;}
    #footer .newsletterArea h2{font-size: 1.4vw;}
    #footer .newsletterArea p{font-size: 1.3vw;}
    
    .sectionLogoArea .coursePanelItem .coursePanelItemTitle{font-size: 4.6vw;}
    
    .menu.menu-1 {
        width: 3em;
        height: 3em;
        padding: 0.66em;
        padding-top: 0.88em;
    }
    
    .menu-item {
        height: 4px;
        margin: 0 0 4px;
    }
    
    
    #menuContent{right: -100%;width: 100%;}
    #menuContent.open{border-left: 0px solid #f0f0f0;}
    .courseTemplate.open{left: -100%;}
    
    #menuContent{min-height: 100vh;height: auto;}

    .tc_button{
        padding: 1.2vw;
        font-size: 1.1vw;
    }
    .mainContent ul li{font-size: 1.8vw;}
    
    .courseScheduleArea .courseScheduleItemLeft{width: 32%}
    .courseScheduleArea .courseScheduleItemRight{width: 68%;}
    
    
    .paddingContainer2{width: 100%;padding: 2em;}
    
    
    .accomondationItemsArea .accomondationItem{margin-bottom: 6vw;}
    
    .accomondationItemsArea .accomondationItem .accomondationItemLeft {
        width: 30vw;
    }
    
    .accomondationItemsArea .accomondationItem .accomondationItemImage {
        height: 28vw;
    }
    
    
    .accomondationItemsArea .accomondationItem .accomondationHotelTitle {
        font-size: 2.4vw;
    }
    
    .accomondationItemsArea .accomondationItem .accomondationHotelLink
    {font-size: 2vw;}
    .accomondationItemsArea .accomondationItem .accomondationAddress{
        font-size: 1.8vw;
    }
    
    .accomondationItemsArea .accomondationItem .accomondationHotelMapLink {
        padding: 1.6vw;
        width: 22vw;
        font-size: 1.6vw;
    }
    
    .bigPageTitle {
        font-size: 3vw;
    }
    
    .courseTemplate .sectionLogoArea .coursePanelItem .coursePanelItemTitle{font-size: 3.1em;}
    
    .courseTemplate.inCourse .coursePanelItem .coursePanelItemLogo {
        width: 70%;
    }
        
    .courseTemplate.inCourse .sectionLogoArea {
        padding-bottom: 0em;
    }
    
    .forceTable.maxTableWidth{
        width: 100%;
    }
    
    .fGallery{
        height: 40vh;
    }
    
}

@media screen and (min-width: 1024px) and (max-width: 1199px){
    .forceWidthContent{width: 64%;}
    #menuContent{width: 36%;right: -36%;}
    .rightPanel{width: 36%;}
    .paddingContainer{padding: 1em;}
    .coursePanelItem .extraInfo{font-size: 2vw;width: 94%;}
    .courseExtraInfoArea .courseExtraInfoItem .courseExtraInfoLabel{font-size: 1.6vw;}
    .courseExtraInfoArea .courseExtraInfoItem .courseExtraInfoValue{font-size: 2vw;}
    .mainContent ul li{font-size: 1.4vw;}
    .tc_button{
        padding: 1.1vw;
        font-size: 1vw;
    }
    .paddingContainer2{width: 90%;}
    
    .accomondationItemsArea .accomondationItem .accomondationItemLeft {
        width: 25vw;
    }
    
    .accomondationItemsArea .accomondationItem .accomondationItemImage {
        height: 23vw;
    }
        
    
    .tfl{font-size: 1.6vw;}
    
    
    .fGallery{
        height: 28em;
    }
    
}
@media screen and (min-width: 768px){

}
/* #### Desktops #### */
@media screen and (min-width: 1000px){

}

@media screen and (min-width: 1136px){

}
/* #### Desktops #### */
@media screen and (min-width: 1200px){
    .sectionLogoArea .coursePanelItem .extraInfo{font-size: 1.8vw;}
    .fGallery{
        height: 34em;
    }
}

@media screen and (min-width: 1340px){

}
@media screen and (min-width: 1024px) and (max-width: 1400px){
    .menu.menu-1 {
        width: 3em;
        height: 3em;
        padding: 0.66em;
        padding-top: 0.88em;
    }
    
    .menu-item {
        height: 4px;
        margin: 0 0 4px;
    }
    
    .courseTemplate.inCourse .coursePanelItem .coursePanelItemLogo {
        width: 76%;
    }
    
    .courseTemplate .sectionLogoArea .coursePanelItem .coursePanelItemTitle{font-size: 3.3em;}
    
    .forceTable.maxTableWidth{
        margin: 0 auto;
        width: 100%;
    }
    
    .tfl{font-size: 1.8vw;}
    
}
@media screen and (min-width: 1400px){
    .sectionLogoArea .coursePanelItem .extraInfo{font-size: 1.6vw;}
}

@media screen and (min-width: 1600px){
    .sectionLogoArea .coursePanelItem .extraInfo{font-size: 1.3vw;}
}
@media screen and (min-width: 1640px){

}

/* #### Desktops #### */
@media screen and (min-width: 1900px){

}

.black_white_bg,.grayscale{
    -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter:grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
}

