/* ------------------------------------------------------------ *\
	Is Open
\* ------------------------------------------------------------ */

.is-open > span:nth-child(1) { top: 8px; left: 0; transform: rotate(-45deg); height: 7px; border: 0; }
.is-open > span:nth-child(2) { width: 0; border: 0; }
.is-open > span:nth-child(3) { top: -11px; left: 0; transform: rotate(45deg); height: 7px; border: 0; }

/* ------------------------------------------------------------ *\
	Button Burger
\* ------------------------------------------------------------ */

.burger {  display: none; padding: 0 16px; margin-left: 15px; background-color: transparent; float: right; }

.btn-menu { width: 27px; }
.btn-menu span { position: relative; top: 0; left: 0; display: block; width: 28px; height: 4px; border-radius: 1px; background-color: #fff; transition: transform .4s, top .4s, left .4s, border .4s, width .4s }
.btn-menu span + span { margin-top: 4px; }

/* ------------------------------------------------------------ *\
	Ico Arrow Right
\* ------------------------------------------------------------ */

.ico-arrow-right { width: 6px; height: 12px; background: url(/images/uploads/contents/ico-arrow-right.png) no-repeat 0 0; transition: transform .4s; }

/* ------------------------------------------------------------ *\
	Round 90
\* ------------------------------------------------------------ */

.round-90 { transform: rotate(90deg); }

/* ------------------------------------------------------------ *\
	Small Font
\* ------------------------------------------------------------ */

.small-font { font-size: 13px !important; }

/* ------------------------------------------------------------ *\
	Align left
\* ------------------------------------------------------------ */

.alignleft { float: left !important; margin-right: 15px; }

/* ------------------------------------------------------------ *\
	Text
\* ------------------------------------------------------------ */

.text { max-width: 650px; padding: 25px; background-image: url(http://dtrc.ca/shared_images/content_bg_1.png); }

/* ------------------------------------------------------------ *\
	Black Background
\* ------------------------------------------------------------ */

.black { background-color: #000; transition: background-color .4; }

/* ------------------------------------------------------------ *\
	Footer Logo
\* ------------------------------------------------------------ */

.footer__logo { display: inline-block; }
.footer__logo img { width: 100%; height: 100%; }

/* ------------------------------------------------------------ *\
	Clear
\* ------------------------------------------------------------ */

.clear:after { content: ''; display: table; clear: both; }

/* ------------------------------------------------------------ *\
	Socials
\* ------------------------------------------------------------ */

.socials { display: inline-block; }

/* ------------------------------------------------------------ *\
	Responsive
\* ------------------------------------------------------------ */

@media ( max-width: 1920px ) {
	body { overflow-x: visible; }

	#header { min-width: 0; width: auto; }

	.dark_bg { min-height: auto !important; }
}

/* Small Desktop */

@media ( max-width: 1200px ) {

	/*  Header  */

	#header { height: auto; background-size: cover; }

	#fix_header { display: flex; justify-content: space-between; width: auto; padding: 0 10px 20px; }

	#logo { float: none; padding: 0; margin-top: 20px; }

	#main_menu { float: none; width: auto; padding: 0; align-self: flex-end; }

	#sub_menu { width: auto; float: none; height: auto; padding: 30px 70px 10px 20px; margin: 0; }

	#main_menu > ul > li { position: relative; float: none; }
	#main_menu > ul { display: flex; }

	#main_menu > ul > li > div { left: 50%; transform: translateX(-50%); }

	/*  Main  */

	#mainContent { width: auto; }

	#home_content_space { height: 100px; }

	.leftContent { float: none; min-height: auto; }
	.leftContent:after { content: ''; display: table; clear: both; }

	#floatBox2 { margin-top: 20px; }

	.content_wrapper:after { content: ''; display: table; clear: both; }

	.staff_bg .staff_wrapper .staff_photos li a { line-height: 20px; }

	.mission_bg { margin: 50px; background-size: cover; }

	/*  Footer  */

	#footer { width: auto; padding: 22px 10px; }


}

/* Tablet Portrait */

@media ( max-width: 1023px ) {
	body { background-position: top center !important; background-color: transparent !important; }

	/*  Header  */

	#header { background-image: none !important; background-color: rgba(0,0,0,.7); }

	#fix_header { flex-wrap: wrap; padding: 0 20px 10px; }

	#logo { width: 200px; height: auto; }
	#logo img { width: 100%; height: auto; }

	#main_menu { order: 2; width: 100%; margin-top: -30px; }
	#main_menu > ul { justify-content: flex-end; }

	#main_menu > ul > li > div { left: 50%; transform: translateX(-50%); min-width: 300px; width: auto !important; }
	#main_menu > ul > li:last-child > div { left: auto; right: 0; transform: translateX(0); }
	#main_menu > ul > li:first-child > div { left: 0; transform: translateX(0); }
	#main_menu > ul > li > div > ul { float: none !important; }
	#main_menu > ul > li > div ul:after { content: ''; display: table; clear: both; }
	#main_menu > ul > li > div > p:last-child { display: none; }

	#sub_menu { padding: 35px 34px 10px 10px; background-image: none !important; }
	#sub_menu li { display: inline-block; }
	#sub_menu li + li { margin-left: 15px; }

	/*  Body  */

	.leftContent iframe { width: 100%; }

	table { width: auto !important; }

	.event_row:after,
	.content_wrapper:after { content: ''; display: table; clear: both; }

	.mission_bg { width: auto; padding-bottom: 30px !important; margin: 50px 0 0 0; background: url(http://dtrc.ca/shared_images/mission_bg.png); background-size: cover; }
	.mission_wrapper:after { content: ''; display: table; clear: both;;  }
	.mission_bg .mission_col1 { width: auto; }
	.mission_bg td + td { margin-top: 10px; }
	.mission_bg a { display: block; white-space: nowrap; }
	.mission_bg .mission_col1,
	.mission_bg .mission_col2 { display: block; float: none; width: auto; }

	input[type=submit] { padding: 5px 10px; border: 1px solid #c6c6c6; border-radius: 4px; background-color: #fff; }

	/*  Footer  */
	#footer { background: #000; }

	#policy { display: block; float: none; padding: 0; margin-bottom: 10px; }

	#social_network { margin: 0; padding: 0; }

}

/* Mobile */

@media ( max-width: 767px ) {

	/*  Header  */

	#fix_header { padding: 25px 0 10px; }

	#logo { width: 202px; height: 81px; margin: 0 0 0 15px; }

	#main_menu { display: none; }

	#sub_menu { padding: 0; background-image: none !important; }
	#sub_menu > ul { margin-right: 15px; }
	#sub_menu > ul > li { display: none; max-width: 100px; }
	#sub_menu > ul > li:first-child,
	#sub_menu > ul > li:last-child { display: block; text-align: right; }
	#sub_menu li:first-child a { margin: 0 5px; }
	#sub_menu li:first-child a:last-child { margin-right: 0; }

	.burger { display: block; }

	#main_menu { padding: 22px 15px; margin-top: 0; background-color: #000; }
	#main_menu li { position: relative; }
	#main_menu > ul { flex-direction: column; align-items: flex-start; }
	#main_menu > ul > li { display: block; float: none; width: 100%; height: auto; padding: 0; margin: 0; }
	#main_menu li a { display: block !important; text-align: left; }

	#main_menu > ul > li div { position: static; left: auto; right: auto; transform: translateX(0); min-width: auto; width: 100% !important; }
	#main_menu > ul > li > div div { position: static; display: block !important; float: none !important; }

	#main_menu > ul > li > a { display: block; }
	#main_menu ul a i { transition: transform .3s ease; }
	#main_menu ul a.open i { transform: rotate(90deg); }
	#main_menu ul > li:hover .sub_main_menu { display: none; }
	#main_menu > ul > li .ico-arrow-right { position: absolute; top: 0; right: 0;  }

	#service_nav_li:hover,
	#member_nav_li:hover,
	#support_nav_li:hover,
	#news_nav_li:hover,
	#about_nav_li:hover { background-image: none; }

	#service_nav_li:hover #service_nav_menu,
	#member_nav_li:hover #member_nav_menu,
	#support_nav_li:hover #support_nav_menu,
	#news_nav_li:hover #news_nav_menu,
	#about_nav_li:hover #about_nav_menu { border: none; }

	.sub_main_menu { padding-bottom: 20px; min-height: auto; background-image: none !important; }

	/*  Main  */

	#mainContent { padding: 25px 15px; }

	#floatBoxAnnouncement { width: auto !important; margin: 25px 15px !important; font-size: 16px !important; }
	#floatBoxAnnouncement a { font-size: 16px !important; }

	#floatBox,
	#floatBox2 { width: auto !important; height: auto !important; padding: 25px 10px; margin: 0 !important; font-size: 16px !important;  }
	#floatBox p, #floatBox2 p { font-size: 16px; }

	#floatBox2 { background-image: none; padding-bottom: 50px; }

	#floatBox { margin: 0 15px 50px !important; }

	#floatbox_buttons { margin-bottom: 0; }
	#floatbox_buttons a { display: inline-block; font-size: 16px; }

	#box1, #box2, #box3, #box4, .btnbox { float: none; }

	#home_content_space { height: 0; }

	#mainContent { padding: 0; }

	.leftContent { width: auto; padding: 25px 15px 0; margin-bottom: 0; }
	.leftContent h1 { font-size: 24px; }
	.leftContent h3 { font-size: 17px; }

	.leftContent p,
	.leftContent li,
	.leftContent a { font-size: 16px; }

	.content_h1_underline { width: auto; margin-bottom: 8px; }

	.media_box { float: none; width: auto; margin: 0 -15px; text-align: center; }
	.media_box object { width: 100%; }

	.hidden { display: none !important; }

	.floatBox2__inner { padding: 25px 14px; background-color: #3c3c3c; }

	.black_bg { background-color: #000 !important; }

	.dark_bg { background-image: url(http://dtrc.ca/shared_images/dark_bg.png) !important; }

	.light_bg { background-image: url(http://dtrc.ca/shared_images/content_bg_1.png) !important; }

	.dark_bg .floatBox2__inner { background-image: none; background-color: transparent;  color: #fff; }

	.loginform div { width: auto !important; }

	form span { font-size: 12px !important; }
	form > p { display: flex; flex-wrap: wrap; }
	form p { padding-bottom: 0; }

	form > p input[type=text],
	input[type=password] { padding: 0 5px; }
	form > p input { width: 100%; height: 28px; }
	form p textarea,
	form p input:first-of-type { margin-bottom: 10px; }
	form > p input ~ input { flex: 1; margin-left: 5px; }

	form > p textarea { width: 100%; min-height: 40px; padding: 5px }
	form > p img { margin-bottom: 20px; }

	.form__foot { margin-top: 15px; }
	.form__foot p { margin-bottom: 10px; }
	.form__foot > p:last-child { margin-bottom: 0; }

	.leftContent a { display: inline-block; }
	.leftContent a + a { margin-top: 5px; }
	.leftContent b > img,
	.leftContent p > img { width: auto !important;  height: auto !important; }

	#about_content .fullsize,
	#member_content .fullsize,
	#support_content .fullsize,
	#services_content .fullsize,
	.leftContent .fullsize { width: 100% !important;  height: auto !important; float: none !important; margin: auto 0 !important; }

	#support_content .halfsize { width: 50% !important;  height: auto !important; float: none !important; display: block; margin: 10px auto !important; }

	.leftContent:not(.leftContent--slider),
	.leftContent:not(.mission_bg) img { width: auto !important;  height: auto !important; float: none !important; margin: auto 0 !important; }

	.leftContent .gallery img { width: 50px !important; height: 50px !important; }

	.leftContent .table-campain img { margin-top: 30px !important; }

	.leftContent .gallery--normal { width: 140px !important; height: auto !important; }
	.leftContent .gallery--normal img { width: 100% !important; height: auto !important; }

	.link-block a { display: block !important; }

	#services_content { width: auto !important; }
	#services_content .autosize { width: auto !important; height: auto !important; }


	table tr td { display: block !important; width: 100% !important; }
	table tr td img { margin: 15px 0; }

	.publications p,
	.publications a { font-size: 12px; }
	.publications tr td { display: inline-block !important; width: 31% !important; padding-right: 4px; }
	#services_content .publications img { width: 100% !important; }

	#member_content em { display: block;  margin-top: 5px;  }

	.support_row,
	.event_row,
	.content_wrapper { width: 100%; }
	.content_wrapper .col2_1,
	.content_wrapper .col2_2 { width: 100%; padding-left: 0; }

	.event_row .event_row_content p { font-size: 12px; }

	.event_row_content { width: auto; }
	.event_row_image { margin-right: 20px; }

	#slider { width: 97%; margin: 0 10px 40px; }
	#slider .scroll { width: 100%; }
	#slider p { padding: 10px 0 0 !important; }
	#slider img { width: auto !important; }
	#slider .scrollButtons.right { right: -12px; }
	#slider .scrollButtons.left { left: -20px; }

	#news_content #floatBox2 { background-image: none; }

	.scrollContainer { width: 100% !important; }
	.scrollContainer div.panel { min-height: 470px; width: 100%; }
	.toggle_box_go_text { width: 100%; }
	.panel { float: none !important;  }
	.scroll { min-height: 470px; }

	.text { width: auto; max-width: none; }

	.blog_entries > a:after { content: ''; display: table; clear: both; }

	.blog_brief { width: auto; margin: 10px 0; }

	.dark_bg .content_wrapper .content_right2 { width: 100%; }

	#services_content .alignleft { float: left !important; margin-right: 15px !important; }

	.staff_bg .staff_photos { display: flex; flex-wrap: wrap; justify-content: space-between; float: none !important; width: 100% !important; margin: 0 -5px 20px; }
	.staff_bg .staff_wrapper .staff_photos a { display: block; text-align: center; }
	.staff_bg .staff_wrapper .staff_photos a:hover { line-height: inherit; }
	.staff_bg .staff_photos li { display: flex; flex-direction: column; justify-content: space-between; width: 43%; margin: 5px; }
	.staff_bg .staff_photos li a:first-child { width: 120px; height: auto; margin: auto; }
	.staff_bg .staff_photos img { width: 100% !important; height: auto !important;  }

	.staff_bg .staff_wrapper .staff_content { width: auto; margin-left: 0; }

	.dancers img { width: 120px !important; height: 155px !important; }

	.conferences-space a { margin-top: 20px; }

	.dark_bg .content_wrapper .content_right { margin-top: 10px; width: 100%; }

	.dark_bg .content_wrapper .content_left { width: 100%; }

	.dark_bg .content_wrapper .content_left > div { width: auto !important; }

	#box1, #box2, #box3, #box4, .btnbox { height: auto;}

	#floatBoxSpacer { height: 25px; }

	#galleria .galleria-container { height: 240px !important; }
	#galleria .galleria-image img { top: 0 !important; height: 160px !important; }
	#galleria .galleria-thumbnails-container img { height: 40px !important; }

	.sitemap { width: 288px; }

	/*  Footer  */

	.footer__logo { margin-bottom: 18px; }

	.socials { display: block; }

	#policy, #policy a { font-size: 14px; }

}