/* Overriding rules */
#title_container { border-bottom:0px; }
#title { padding: 20px 38px; }
#main { max-width:none; padding:0px; }
.content { max-width:1200px; margin:0px auto; padding:60px 40px; }
.layout { overflow:hidden; background:#f4faff; }
.layout.add_bottom_padding { padding-bottom:40px; }
h1, h2 { font-size:30px; line-height:40px; padding-top:0px; padding-bottom:20px; }
h3 { padding-bottom:12px; }
h3, p { padding-bottom:16px; }
#quicklinks { margin-top:0px; }
#menu li.no_dropdown:hover { border-radius: 2px; }
.content.linear { max-width:800px; }
.content.linear h2 { padding-top:24px; }
.content.linear h3 { padding-top:8px; }
.content.linear .example { color:#888; font-style: italic; padding:0px; }
.content.linear ul, .content.linear p { padding:0px; margin:12px 0px; }
.content.linear ul { padding-left:32px; }

/* Page Header */
#page_header { max-width:1200px; margin:160px auto 0px; padding:0px 40px; }
#page_header h1 { padding:0px; }

/* Banner */
#page_banner { background:#3af; color:#fff; height:420px; text-align:center; padding:220px 20px 100px; overflow:hidden; position:relative; transition:background 3s; }
.preload #page_banner { background:#4bf; }
.banner_text, .banner_text h1 { font-size:50px; line-height:60px; max-width:610px; margin:0px auto; opacity:1; transition: all .6s; }
.preload .banner_text, .preload .banner_text h1 { opacity:0; }
.banner_image { position:absolute; bottom:0px; text-align:center; width:100%; margin:0px -20px -8px -20px; }
#footer { margin-top:30px; }
#social_media_icons { margin: 20px 0 10px; }
#social_media_icons i { color: #fff; background: #3af; border-radius: 4px; padding: 8px 8px; width: 20px; border: 1px solid #fff; font-size: 20px; margin-right: 0; }
#social_media_icons i:hover { color: #3af; background: #fff; border: 1px solid #3af; }

/* Call to action */
.call_to_action { padding:10px 0px; }
#page_banner .call_to_action { padding:60px 0px; }
#page_banner .call_to_action a, .layout.dark .call_to_action a  { border:solid 1px #fff; color:#fff; animation: cta_animation 5s linear infinite; margin-bottom:4px; }
#page_banner .call_to_action a:hover, .layout.dark .call_to_action a:hover { background:#4bf; animation:none; }
 @keyframes cta_animation { 
 	0% { background:#3af; }
	40% { background:#3bf; }
 }
 
/* Layout */
.content.two_thirds .content_main { width:66.666%; float:left; padding-right:16.666%; box-sizing:border-box; padding-bottom:40px; }
.content.two_thirds .content_image { width:33.333%; float:left; }
.content.two_thirds .content_image img { max-width:600px; }
.content.two_thirds .content_image.no_bleed img { max-width:100%; max-height:300px; }

.content.blocked_in .block_mid { width:80%; float:left; text-align:center; box-sizing:border-box; }
.content.blocked_in .block_left { width:10%; float:left; height:300px; position:relative; text-align:right; }
.content.blocked_in .block_left img { position:absolute; right:0px; top:0px; }
.content.blocked_in .block_right { width:10%; float:left; }

.content.center { text-align:center; }
.content.info, .content.warning { padding:16px 24px; margin:20px 0px; }

.two_cols .col { width:50%; box-sizing:border-box; float:left; }
.two_cols .col:last-child { text-align:center; padding-bottom:40px; }

.grid_three_cols, .grid_four_cols { clear:left; }
.grid_three_cols .cell, .grid_four_cols .cell { width:33.3333%; box-sizing:border-box; float:left; min-height:220px; padding:0px 10px; }
.grid_three_cols.tall .cell { min-height:340px; }
.grid_three_cols .cell:first-child, .grid_four_cols .cell:first-child { padding:0px 20px 0px 0px; }
.grid_three_cols .cell:last-child, .grid_four_cols .cell:last-child { padding:0px 0px 0px 20px; }
.grid_four_cols .cell { width:25%; }

/* Forms */
.content input, .content textarea, .content select { font-size:16px; height:40px; line-height:26px; padding:6px 16px; border-radius:4px; }
.content textarea { height:140px; width: 100%; }
input[type=submit],button[type=submit], input[type=button] { padding:6px 30px; background:transparent; color:#3af; border:solid 1px #3af; cursor:pointer; transition:background .2s; }
input[type=submit]:hover,button[type=submit]:hover, input[type=button]:hover { background:#3af; color:#fff; }
input[type=text], textarea, select { color:#666; }
input[type=checkbox] { height:auto; }

.field .label { font-size:16px; line-height:30px; padding:6px 0px; width:220px; }
.field .control { margin-left: 220px; padding:0px 20px; }
.submit_field { margin-left: 220px; padding:0px 20px; }
#prices_form input { text-align:center; }


/* Other */
.content .quote { padding:60px 30px 30px 0px; text-align:left; }
.content .jobs_quote { background:#3af; color:#fff; padding:10px 20px; border-radius: 2px; margin-bottom:20px; }
.content .jobs_quote_author { text-align: right; }
.works_with { width:600px; max-width:80%; margin-top:40px; }


/* Feature gallery */
.feature_gallery { user-select: none; -webkit-touch-callout: none; } 
.feature_gallery img { max-height:300px; }
.gallery_slides { position:relative; height:340px; width:100%; }
.gallery_slides .slide { position:absolute; top:0px; width:100%; opacity:0; transition:opacity .5s; box-sizing:border-box; }
.gallery_controls { text-align:center; clear:both; font-size:40px; padding:20px; }
.gallery_controls .slide_button { color:#def; transition: color .5s; display:inline-block; cursor:pointer; }
.gallery_controls .slide_button.active { color:#3af; }

.blocked_in .slide { padding:0px 40px; }
.blocked_in .gallery_slides { height:160px; }

/* Video */
.video_container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.video_container .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.youtube { background-color: #000; margin-bottom: 30px; position: relative; padding-top: 56.25%; overflow: hidden; cursor: pointer; }
.youtube img { width: 100%; top:0%; left: 0; }
.youtube .play-button { width: 90px; height: 60px; background-color: #333; box-shadow: 0 0 30px rgba( 0,0,0,0.6 ); z-index: 1; opacity: 0.8; border-radius: 6px; }
.youtube .play-button:before { content: ""; border-style: solid; border-width: 15px 0 15px 26.0px; border-color: transparent transparent transparent #fff; }
.youtube img,.youtube .play-button { cursor: pointer; }
.youtube img,.youtube iframe,.youtube .play-button,.youtube .play-button:before { position: absolute; }
.youtube .play-button,.youtube .play-button:before { top: 50%; left: 50%; transform: translate3d( -50%, -50%, 0 ); }
.youtube iframe { height: 100%; width: 100%; top: 0; left: 0; }

.login_video { text-align: center; padding-top: 5px; }
.login_video iframe { width:752px; height:423px; }

/* Prices page */
.price_description { color:#888; }
.price { font-size:50px; line-height:60px; color:#3af; }
.price.add_on { font-size:30px; line-height:40px; color:#3af; }
.grid_four_cols .fixed_height_description { height:160px; }
#base_cost { padding-top:30px; }
#included_with_basic_subscription  { list-style-type: none; padding:0px; max-width:1000px; margin:20px auto 40px; }
#included_with_basic_subscription li { padding:10px; margin:0px; display: inline-block; width:168px; text-align:center; }
.prices_feature_icon { height:50px; width:50px; transition: all .2s; }

/* Testimonials page */
.quote_school_logo { max-width:80px; max-height:80px; border-radius:4px; }
.quote_author { font-weight:bold; } 
.quote_author_role { font-weight:300; padding-left:4px; }
.quote_author_blog { color: #545454; } 

/* About page */
.skills_list, .skills_list li  { list-style-type:none; padding:0px; margin:0px; }
.skills_list li { font-size:12px; background:#3af; color:#fff; display:inline-block; padding:3px 10px; border-radius: 2px; margin:0px 2px 2px 0px; }
.skills_list { margin-bottom:20px; }


/* Home page */
.works_with_list, .works_with_list li  { list-style-type:none; padding:0px; margin:0px; }
.works_with_list { padding-bottom:20px; }
.works_with_list li { color:#3af; font-size:18px; line-height:36px; background:#fff; display:inline-block; padding:3px 10px; border-radius: 2px; margin:0px 4px 4px 0px; }

/* Actions */
#messages, #errors { position:absolute; z-index:500; width:100%; top:-100px; opacity:0; transition: top 1s ease-in, opacity 1s ease-in ; }
#messages.visible, #errors.visible { top:-0px; opacity:1; }
.content.action_completed, .content.action_not_completed { color:#fff; max-width:none; padding:16px; text-align:center; box-sizing:border-box; }
.content.action_completed{ background:#0c6; }

/* Features */
.features_page_icon { height:200px; width:200px; float:right; margin:0px 0px 16px 32px; }
.feature_list { clear:left; }
.feature_list img { height:60px; width:60px; float:left; }
.feature_list h3 { margin-left:80px; padding-bottom:0px; }
.feature_list p { margin-left:80px; }
.feature_list .item { width:50%; box-sizing:border-box; float:left; padding:6px 4px; min-height:90px; }

/* Screenshot Gallery */
.screenshot_gallery, .feature_gallery li { list-style-type:none; padding:0px; margin:0px; text-align:center; line-height:0px; display: flex; }
.screenshot_gallery li { display:inline-block; width:24%; box-sizing:border-box; padding:4px; }
.screenshot_gallery img { width:100%; height:100%; box-sizing:border-box; border-radius:4px; border:solid 6px #def; }

/* Welcome dashboard */
#page_banner .call_to_action { font-size:24px; line-height:32px; }
#page_banner .call_to_action input { display:inline-block; border:solid 1px #fff; color:#fff; padding:12px 30px; border-radius:4px; font-size:24px; opacity:1; transition: all .6s; line-height:24px; height:60px; }
#page_banner .call_to_action input[type=text] { color:#3af; padding:12px 24px; width:420px; max-width:420px; }
#page_banner .call_to_action ::-webkit-input-placeholder { color: #cde; }
#page_banner .call_to_action :-ms-input-placeholder { color: #cde; }
#page_banner.page_banner_short { height:88px; }
#page_banner .grid_three_cols { margin-top:60px; color:#fff; }
#page_banner .grid_three_cols a { color:#fff; }

.link_big { display:inline-block; border:solid 1px #3af; color:#3af; padding:8px 16px; border-radius:4px; font-size:18px; opacity:1; transition: all .6s; line-height:24px; margin-bottom:3px; }
.link_big:hover { background:#3af; color:#fff; }
.link_delete { color:#f66; border:solid 1px #f66; }
.link_delete:hover { background:#f66; }
.link_green { color:#4c6; border:solid 1px #4c6; }
.link_green:hover { background:#4c6; }
.modal_window { top:120px; }
.modal_window h2 { font-size: 28px; }
.modal_window.content { padding:40px; }
.modal_window .content.info { font-size:16px; line-height:24px; margin:0px 0px 12px 0px; }

.modal_window .field .label { font-size:16px; line-height:30px; padding:6px 0px; width:160px; }
.modal_window .field .control { margin-left: 180px; padding:0px 20px; }
.modal_window .submit_field { margin-left: 180px; padding:0px 20px; }
.modal_window.modal_wide { margin-right:-340px; }
.details_list_field { font-weight: bold; margin-right:10px; display: inline-block; }
.download { background:#3af; color:#fff; border-radius:4px; padding:12px 16px; transition: all .2s; margin-bottom:20px; }
.download:hover { background:#4bf; cursor:pointer; }
.download h3 { font-size:18px; padding:0px; line-height:32px; }
.download .item_image { float:right; margin-top:4px; }
.download .item_image img { width:50px; }

#price_description .price_option { text-align: center; width: 130px; display:inline-block; }
#price_description .price_option_price{ color:#999; display:block; }
#price_description .price_option img { margin:8px 45px; width:40px; }
#change_price_options_button { margin-top:40px; }

.on_off { border-radius:40px; height:34px; width:60px; display: inline-block; position: relative; background:#ccc; transition: background .2s; }
.on_off_switch { width:30px; height:30px; border-radius:20px; background:#aaa; display: inline-block; position: absolute; left: 2px; top: 2px; transition: background .2s, left .2s; }
.on_off:hover { background:#ddd; animation:none; }
.on_off:hover > .on_off_switch { background:#666; }
.on_off.active { background:#0da; animation: none; }
.on_off.active > .on_off_switch { left:28px; background:#9ec; }
.on_off.pulsing { animation: pulse_alpha 1s infinite; }

.article_date { background:#3af; color:#fff;  padding:6px 12px; margin:20px 0px; display: block; border-radius:2px;  }

/* Blog post callout styles */
.blog_tip { background:#e8f4ff; border-left:4px solid #3af; padding:14px 20px; margin:20px 0; border-radius:4px; color:#336699; }
.blog_steps { background:#fff; border-radius:4px; padding:4px 20px 12px; margin:20px 0; }
.layout.light .blog_steps { background:#f0f8ff; }
.blog_steps h4 { color:#3af; font-size:14px; font-weight:bold; text-transform:uppercase; letter-spacing:0.5px; margin:12px 0 2px; }
.blog_steps ol { margin:6px 0 0; padding-left:22px; }
.blog_steps ol li { padding:2px 0; line-height:26px; }

.content.linear .item_list.selectable { padding:0px; }
.content.linear .item_list.selectable h2 { padding:0px; }
.content.linear.markdown h2, .content.linear.markdown h3, .content.linear.markdown h4 { padding-top:16px; padding-bottom:8px; }

/* Cookie permission */
.recommended_option { box-shadow: 0px 0px 4px rgba(0,0,0,0.2) }
.additional_option { background:#fff; color:#16b; border-color:#fff; }

/* Target scroll */
:target { scroll-margin-top: 120px;}

@keyframes pulse_alpha{ 
	0% { opacity: 1; }
   	50% { opacity: 0.5; }
  	100% { opacity: 1; }
}

@media screen and (max-width: 1200px) { 
	#page_banner { height:340px; }
	.banner_image img { width:600px; }
	.grid_three_cols.tall .cell { min-height:400px; }
}
@media screen and (max-width: 1000px) { 
	#page_banner { padding:150px 20px 100px; }
	#title { padding: 20px; justify-content: space-between; }
	.content { padding: 40px 20px; }
	.content.two_thirds .content_main { padding-right:10%; }
	.two_cols .col { text-align:center; }
	.two_cols .col:last-child { padding-bottom:0px; }
	.content .quote { font-size:30px; line-height:40px; padding:10px; text-align:center; }
	.feature_gallery img { max-height:200px; padding-top:30px; }
	.feature_gallery, .gallery_slides  { height:auto; }
	.gallery_slides  { height:440px; }
	.grid_three_cols.tall .cell { min-height:420px; }
    .help_two_col .video_col { padding-left: 30px; padding-right: 30px;}
}
@media screen and (max-width: 800px) { 
	.hidden_small_screen { display: none; }
	.center_small_screen { text-align: center }
	.no_bottom_padding_small_screen { padding-bottom: 0px; }
	.banner_text, .banner_text h1 { font-size:40px; line-height:48px; width:520px; }
	.call_to_action a { font-size: 20px; padding:8px 24px; }
	#page_banner.page_banner_short { height:40px; }
	#page_banner .call_to_action { font-size:18px; }
	.banner_image img { width:88%; }
	.grid_three_cols .cell { float:none; width:auto; padding:0px !important; min-height:0px !important; }
	.grid_four_cols .cell { width:50%; padding:10px !important; }
	.blocked_in .gallery_slides { height:200px; }
	table { font-size:12px; }
	td, th { padding:4px; }
	.screenshot_gallery li { width:49%; }
	.modal_window, .modal_window.modal_wide { top:80px; }
    .help_two_col .video_col { padding-left: 10px; padding-right: 10px;}
    .login_video iframe { width:384px; height:216px; }
}
@media screen and (max-width: 680px) { 
	.modal_window.content { padding:20px; }
	.modal_window.modal_wide { margin-right: 0px; }
    .help_two_col .text_col { width: 46%; }
    .help_two_col .video_col { padding-left: 0px; padding-right: 0px; }
	
}
@media screen and (max-width: 600px) { 
	.banner_text, .banner_text h1  { font-size:30px; line-height:36px; width:360px; }
	.call_to_action a { font-size: 18px; padding:8px 22px; }
	#page_banner { padding:120px 20px 40px; height:300px; }
	#page_banner.page_banner_short { height:50px; }
	#page_banner.with_form { min-height:340px; }
	.content.two_thirds .content_main { float:none; width:auto; padding:0px; }
	.content.two_thirds .content_image  { float:none; width:auto; text-align:center; padding-top:40px; }
	.content.two_thirds .content_image img  { max-width:80%; max-height:300px; }
	.grid_four_cols .cell { width:auto; float:none; padding:10px !important; }
	.grid_four_cols .fixed_height_description { height:auto; }
	.features_page_icon { float:none; margin:0px 0px 20px; height:120px; width:120px; }
	.feature_list .item { width:100%; float:none; min-height:none; }
	.feature_list img, .feature_list p, .feature_list h3 { text-align:center; margin:0px; float:none; }
	.feature_gallery img { max-height:160px; padding-top:30px; }
	.blocked_in .gallery_slides { height:260px; }
	body { text-align:center !important; }
	.dialog .dialog_options { text-align:center; }
	ul { list-style-position: inside;}
	select, input[type=text], textarea { min-width:300px; width:300px; }
	#num_students { min-width:90px; width:80px; }
	#page_banner .call_to_action input { padding:8px 30px; font-size:20px; transition: all .6s; line-height:20px; height:44px; }
	#page_banner .call_to_action input[type=text] { padding:8px 16px; width:320px; }
	.field .label, .field .control, .submit_field { margin:0px !important; float:none !important; width:auto !important; text-align:center; }
    .help_two_col .video_col { float:none; margin: auto; }
    .help_two_col .text_col { float:none; width:100%; }
}
@media screen and (max-width: 480px) { 
	.banner_text, .banner_text h1  { font-size:26px; line-height:34px; width:320px; }
	#page_banner { height:260px; }
	#page_banner.with_form { min-height:380px; }
	.blocked_in .gallery_slides { height:340px; }
	.content.blocked_in .block_mid { width:90%; }
	.content.blocked_in .block_left { width:5%; height:200px; }
	.content.blocked_in .block_right { width:5%; }
	.feature_gallery img { max-height:120px; padding-top:30px; }
	input[type=text], textarea, select { min-width:200px; width:100%; max-width:none; }
	table { font-size:10px; }
	td, th { padding:2px; }
	#page_banner .call_to_action input[type=submit] { padding:8px 16px; }
	#page_banner .call_to_action input[type=text] { padding:8px 16px; width:100%; max-width:100%; display: block; }
	.modal_window.content { padding: 6px 12px 12px 12px; }
	#num_students { width:100%; }
	.login_video iframe { width:304px; height:171px; }
}
@media screen and (max-width: 360px) { 
	.banner_text, .banner_text h1  { font-size:24px; line-height:32px; width:auto; }
	#page_banner { height:220px; padding:100px 12px 80px; }
	.content.blocked_in .block_mid { width:100%; }
	.content.blocked_in .block_left, .content.blocked_in .block_right { width:0%; }
	.blocked_in .slide { padding:12px; }
	.content { padding:30px 12px; }
	.field .control { padding:0px; }
    .login_video iframe { width:256px; height:144px; }
}
@media screen and (max-width: 310px) { 
	.content { padding:24px 6px; }
}
@media screen and (max-width: 290px) { 
	.gallery_controls { display:none; }
	.gallery_slides { height:600px; }
}