/*************************************************************/
/*   Design:   SPIELGRUPPEN-WEBSEITEN.CH			 	 	 */
/*   File:     screen.css					                 */
/*-----------------------------------------------------------*/
/*   Autor:   Reto Bühler, www.traumwerk.ch	                 */
/*   Datum:   September 2019			                     */
/*   Site: 	  wwww.spielgruppen-webseiten.ch		         */
/*   Layout:  Variante F Mittel						         */
/*************************************************************/

/*************************************************************/
/*  LAYOUT													 */
/*************************************************************/

/*  GLOBAL													 */
/*************************************************************/
body.sg-move-and-create {background-color:#d6fbff;}
body.sg-move-and-create #container h1 {color: #7fc5ce ;}
body.sg-move-and-create #footer .inside .container .content {background-color:#008b9e;}
body.sg-move-and-create .trennlinie {border-bottom:2px dotted #008b9e;}

body.sg-move-and-create #container a, body.sg-move-and-create #container a:link, body.sg-move-and-create #container a:visited {color:#008b9e; text-decoration:none;}
body.sg-move-and-create #container a:hover, body.sg-move-and-create #container a:active {color:#008b9e; text-decoration:underline;}

body.sg-move-and-create #container .ce_download ul.ext-pdf a, body.sg-move-and-create #container .ce_download ul.ext-pdf a:visited, body.sg-move-and-create #container .ce_download ul.ext-pdf a:link {background:url(../graphics/sg-move-and-create/icon-pdf.png) 10px 5px no-repeat #fff; background-size:auto 32px;}	
body.sg-move-and-create #container .ce_download ul.ext-pdf li:hover a {background:url(../graphics/sg-move-and-create/icon-pdf-active.png) 10px 5px no-repeat #7fc5ce ; background-size:auto 32px; color:#fff !important;}
body.sg-move-and-create #header .navigation {left:20px; right:auto; bottom:0;}
body.sg-move-and-create #header.up .navigation {left:auto; right:20px; bottom:0;}

#header.up .navigation li a {padding:0 0 10px 0 !important;}
#header .navigation li a:hover, #header .navigation li a.active, #header .navigation li a.trail, #header .navigation li:hover a {
    color: #008b9e;
    text-decoration: none;
    padding: 7px 0 10px 0;}

#container h2 {
    padding:16px 0 16px 0;
    margin:16px 0 0 0;
    color: #000;
border-top:2px dotted #008b9e;}

.ce_rsce_columns_2 {width:100%; float:left; margin:0; padding:0 0 0 0;}
.ce_rsce_columns_2 .columns-container {display: flex; flex-wrap: wrap;}
.ce_rsce_columns_2 .columns-container .column-container {flex-basis:48%; margin:0 4% 0 0;}
.ce_rsce_columns_2 .columns-container .column-container:nth-child(2n+2) {margin:0 0 0 0;}
.ce_rsce_columns_2 .columns-container .column-container:nth-last-child(1) {margin:0 0 0 0;}

.ce_rsce_columns_2 .columns-container .column-container .column {display: flex; flex-direction: column;}
.ce_rsce_columns_2 .columns-container .column-container .column .image_container {width:calc(100% - 4px); margin: 6px 0 0 0; padding:0; float:left; border: 2px solid #fff;}
.ce_rsce_columns_2 .columns-container .column-container .column .image_container img {width:100% !important; height:auto !important; padding:0; margin:0;}
.ce_rsce_columns_2 .columns-container .column-container .column .column-text {text-align:left; font-size: 1.5rem; line-height: 2.3rem;}
#container .ce_rsce_columns_2 .columns-container .column-container .column .column-text p {padding:0 0 16px 0;}

#header.up .navigation ul {font-size:2.2rem; line-height:2.9rem;}

#header #logo.sg-move-and-create {top:26px;}
#header #logo.sg-move-and-create .image_container {height:auto !important; width:380px !important; transition: all ease 0.2s;}

#header #logo.sg-move-and-create {top:12px;}
#header #logo.sg-move-and-create .image_container {height:auto !important; width:300px !important; transition: all ease 0.2s;}

#header.up #logo.sg-move-and-create {top:12px;}
#header.up #logo.sg-move-and-create .image_container {height:auto !important; width:220px !important; transition: all ease 0.2s;}

#container .ce_rsce_columns_2 ul {list-style-type:none; margin:0; padding:0 0 24px 0; width:auto; margin:0; display:block; text-align:left;}
#container .ce_rsce_columns_2 ul li {margin:0; padding:0 0 6px 14px; display:block; background:url(../graphics/icon-list.png) left 9px no-repeat;}



/*  FORMULARE (STANDARD/KOMMENTARE						  	 */
/*************************************************************/
#main .ce_form {position:relative; width:100%; margin:0; padding:0 0 0 0 !important; clear:both; display:inline-block; float:right;}

#main .formbody {padding:0 0 0 0; float:left; width: 100%;}
#main .formbody div.col-50-left {width:310px; float:left; margin:0 20px 0 0; clear:none;}
#main .formbody div.col-50-right {width:310px; float:left; margin:0; clear:none;}

.ce_form fieldset.col_0 {float:left; width:48.5%; margin:0 3% 0 0; padding:0;}
.ce_form fieldset.col_1 {float:right; width:48.5%; margin:0; padding:0;}

#main .formbody label {float:left; display:block; width:100%; padding:0 0 0 0; margin:3px 0 3px 0; text-align:left;}
#main .formbody label.error {float:left; display:block; width:100%; padding:0 0 0 0; margin:3px 0 0 0; text-align:left;}

#main .formbody input {float:left; width:calc(100% - 20px); height:38px; border:none; color:#000; border-bottom:1px solid #7fc5ce; margin:0 0 10px 0; padding:2px 10px; background:#fff; outline:none;}
#main .formbody input.error {background:#fff; margin:0 0 10px 0;}
#main .formbody input:focus {background:#fff;}

#main textarea {float:right; width:calc(100% - 22px); height:182px; border:1px solid #7fc5ce; margin:8px 0 10px 0; padding:8px 10px; background:#fff; color:#000; resize:none; font-family:'open_sansregular', Arial, Verdana, Helvetica, sans-serif; outline:none;
border-radius:12px;}
#main textarea.error {margin:8px 0 10px 0;}
#main .formbody textarea.error {background:#fff;}
#main .formbody textarea:focus {background:#fff;}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #000;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #000;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #000;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #000;
}

#main .formbody .submit {color:#fff; text-align:left; background:#7fc5ce !important; border:none; cursor:pointer; height:42px; margin:12px 0 16px 0; padding:8px 32px; float:left; width:auto; font-family:'open_sansbold'; font-weight:normal; text-align:center; transition: all 0.2s;}
#main .formbody .submit:hover {color:#fff; background:#008b9e !important;}
#main .formbody p.error {color:#eb9003; float:left; width: 100%; font-size:13px; padding:5px 0 4px 0 !important; margin:0; line-height:2rem;}
#main .formbody legend {float:left; display:block; width:100%; padding:0 0 0 0; margin:12px 0 12px 0; text-align:left;}
#main .formbody .radio_container.last legend {float:left; display:block; width:100%; padding:0 0 0 0; margin:0 0 12px 0; text-align:left;}
#main .ce_form .captcha_text {float:right; display:block; width:67.3%; padding:0 0 0 0; margin:2px 0 8px 0; text-align:left;}
#main select {float:left; width:100%; height: 38px; border:none; color:#000; margin:0 0 8px 0; padding:2px 2%; background: #fff; font-size: 1.7rem; line-height: 2.3rem;}
#main .formbody br, #main .formbody div {clear:both; margin:0; padding:0; width:100%; display:block; float:left;}


option {background:#fff;}

.checkbox_container {width:100%; display:block; float:left;	padding:0 0 0 0; position:relative; line-height:2.1rem;}
.checkbox_container label {width:auto !important; float:left; margin:0 !important; padding:0 !important;}
.checkbox_container span {position:relative; width:100%; display:block; float:left; padding:0; margin:0 0 12px 0;}
.checkbox_container span.mandatory {width:10px; display:inline; float:none;}

.radio_container {width:100%; display:block; float:left; padding:0 0 0 0; position:relative; line-height:2.1rem;}
.radio_container label {width:auto !important; float:left; margin:0 !important; padding:0 !important;}
.radio_container span {position:relative; width:100%; display:block; float:left; padding:0; margin:0 0 12px 0;}
.radio_container span.mandatory {width:10px; display:inline; float:none;}

.checkbox, .radio {opacity: 0 !important; position: absolute !important; left:0;}

.checkbox, .checkbox_container label, .radio, .radio_container label {
    display: inline-block !important;
	height:auto !important;
	padding:0 !important;
	margin:0 !important;
    cursor: pointer !important;
	line-height:2.2rem;
}

label, .radio-custom-label {
    position: relative !important;
}

.checkbox + label:before, .radio + .radio-custom-label:before {
    content: '' !important;
    background:none !important;
    border:1px solid #7fc5ce !important;
    display: inline-block !important;
    vertical-align: top !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    margin-right:8px !important;
	margin-top:0 !important;
    text-align: left !important;
	float:left;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}

.checkbox:checked + label:before {
	content: '' !important;
    background:#7fc5ce !important;
/*  background-image:url(../../../files/data/graphics/icon-checkbox.png) !important; */
/*	background-size:auto !important; */
/*	background-repeat:no-repeat !important; */
/*	background-position:2px 4px !important; */
    color: #fff !important;
	
}

.radio + label:before {
    content: '' !important;
    background: #fff !important;
    border: none !important;
    display: inline-block !important;
    vertical-align: top !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    margin-right: 12px !important;
	margin-top:0 !important;
    text-align: left !important;	
    border-radius: 50% !important;
	float:left;
}

.radio:checked + label:before {
	content: '' !important;
    background-color:#7fc5ce !important;

	background-size:auto !important; 
	background-repeat:no-repeat !important; 
	background-position:2px 4px !important;
    color: #fff !important;
}

#main .formbody legend {font-family:'karlabold';}
#main .formbody .radio_container legend {font-family:'Barlow-Regular';}




.form-confirmation {font-family: 'Montserrat-SemiBold'; float:left; width:auto; display:inline-block; position:absolute; bottom:33px; right:0;}
.form-confirmation p:before {
    content: "";
    display: block;
    width: 6px;
    height: 14px;
    border: solid #000;
    border-width: 0 5px 5px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top:9px;
    left:-24px;
    margin:0;}






@media (max-width:1280px){
#header #logo.sg-move-and-create {top:12px;}
#header #logo.sg-move-and-create .image_container {height:auto !important; width:280px !important; transition: all ease 0.2s;}

#header.up #logo.sg-move-and-create {top:12px;}
#header.up #logo.sg-move-and-create .image_container {height:auto !important; width:220px !important; transition: all ease 0.2s;}

body.sg-move-and-create #header .navigation {left:0; right:auto; bottom:-16px;}
body.sg-move-and-create #header.up .navigation {left:auto; right:0; bottom:0; font-size:1.5rem;}

#header.up .navigation ul {font-size:2.0rem; line-height: 2.7rem;}

}
@media (max-width:1200px){
#header.up .navigation li {margin:0 0 0 20px;}
}
@media (max-width:1100px){
#header #logo.sg-move-and-create {top:28px;}
#header #logo.sg-move-and-create .image_container {height:auto !important; width:300px !important; transition: all ease 0.2s;}

#header.up #logo.sg-move-and-create {top:12px;}
#header.up #logo.sg-move-and-create .image_container {height:auto !important; width:220px !important; transition: all ease 0.2s;}

.sg-move-and-create .nuunnavbutton .navline {background: #008b9e;}

.sg-move-and-create #nuunnav {background: #fafafa;}
.sg-move-and-create #nuunnav .mod_navigation {border-bottom: 1px solid #008b9e;}
.sg-move-and-create #nuunnav li a {color: #008b9e; font-family:'a_song_for_jenniferbold';}
.sg-move-and-create #nuunnav li a:hover {color: #008b9e !important; background: url(../../graphics/icon-nav-bg.svg) center left 2vw no-repeat;}
.sg-move-and-create #nuunnav ul.level_1 > li {border-top: 1px solid #008b9e;}
.sg-move-and-create #nuunnav ul li.submenu .subtoggler .subtogglericon {border-top: 2px solid #008b9e; border-right: 2px solid #008b9e;}
.sg-move-and-create #nuunnav ul.level_2 li a:hover {color: #008b9e; background: url(../../graphics/icon-nav-bg.svg) center left 4vw no-repeat;}
.sg-move-and-create #nuunnav ul.level_3 li a:hover {color: #008b9e; background: url(../../graphics/icon-nav-bg.svg) center left 6vw no-repeat;}
.sg-move-and-create #nuunnav a {color: #008b9e; text-decoration: none;}
.sg-move-and-create #nuunnav a:hover {color: #008b9e; text-decoration: none;}

.sg-move-and-create #nuunnav .logo {width:220px; margin:0 0 24px 0;}
.sg-move-and-create #nuunnav .logo img {width: 100% !important; height: auto !important;}

.sg-move-and-create #nuunnav ul.level_1 a {
    font-family: 'a_song_for_jenniferbold';
    font-size: 2.2rem;
    line-height: 2.9rem; text-transform: uppercase;}
.sg-move-and-create #nuunnav ul.level_1 > li > a {padding: 12px 0 12px 0;}
body.sg-move-and-create #nuunnav li a.active, body.sg-move-and-create #nuunnav li a:hover {color: #008b9e !important;}

}

@media (max-width:980px){
#header #logo.sg-move-and-create {top:16px;}
#header #logo.sg-move-and-create .image_container {height:auto !important; width:300px !important; transition: all ease 0.2s;}

#header.up #logo.sg-move-and-create {top:12px;}
#header.up #logo.sg-move-and-create .image_container {height:auto !important; width:220px !important; transition: all ease 0.2s;}
}

@media (max-width:739px){
#header #logo.sg-move-and-create {top:16px;}
#header #logo.sg-move-and-create .image_container {height:auto !important; width:280px !important; transition: all ease 0.2s;}

#header.up #logo.sg-move-and-create {top:10px;}
#header.up #logo.sg-move-and-create .image_container {height:auto !important; width:220px !important; transition: all ease 0.2s;}




}

@media (max-width:499px){
#header #logo.sg-move-and-create {top:20px;}
#header #logo.sg-move-and-create .image_container {height:auto !important; width:220px !important; transition: all ease 0.2s;}

#header.up #logo.sg-move-and-create {top:12px;}
#header.up #logo.sg-move-and-create .image_container {height:auto !important; width:220px !important; transition: all ease 0.2s;}
}