/* -------------------------------------------------------------------- */
/* myTGA Register Form													*/
/* style sheets für mytga.de, (Stand 19.04.2022)	    				*/
/* realisation and author: michael schulze, www.jms-design.de  			*/
/* -------------------------------------------------------------------- */
	

	/* -------------------------------------------------------------------- */
	/* webfonts																*/
	/* -------------------------------------------------------------------- */


		/* fira-sans-300italic - latin */
		@font-face {
            font-family	: 'Fira Sans';
            font-style	: italic;
            font-weight	: 300;
            src: local(''),
                 url('webfonts/fira-sans-v15-latin-300italic.woff2') format('woff2'), 
                 url('webfonts/fira-sans-v15-latin-300italic.woff') format('woff');
        }

        /* fira-sans-regular - latin */
        @font-face {
            font-family	: 'Fira Sans';
            font-style	: normal;
            font-weight	: 400;
            src: local(''),
                 url('webfonts/fira-sans-v15-latin-regular.woff2') format('woff2'),
                 url('webfonts/fira-sans-v15-latin-regular.woff') format('woff');
        }

        /* fira-sans-500 - latin */
        @font-face {
            font-family	: 'Fira Sans';
            font-style	: normal;
            font-weight	: 500;
            src: local(''),
                 url('webfonts/fira-sans-v15-latin-500.woff2') format('woff2'),
                 url('webfonts/fira-sans-v15-latin-500.woff') format('woff');
        }

        /* fira-sans-600 - latin */
        @font-face {
            font-family	: 'Fira Sans';
            font-style	: normal;
            font-weight	: 600;
            src: local(''),
                 url('webfonts/fira-sans-v15-latin-600.woff2') format('woff2'),
                 url('webfonts/fira-sans-v15-latin-600.woff') format('woff');
        }



        /* -------------------------------------------------------------------- */
        /* general																*/
        /* -------------------------------------------------------------------- */

        * { box-sizing: border-box }

        html {
            min-height		: 100%;
        }

        #mytga_LogRegBody {
            height			: 100%;
            font			: normal 400 16px/1.5 'Fira Sans', sans-serif;
            color			: #000;
            background 		: linear-gradient(30deg, #264091, #CD3A3E) no-repeat top left / cover;
            -webkit-hyphens	: auto;
            hyphens			: auto; 
            color			: #fff;	
        }

        #mytga_LogRegBody strong {
            font-weight		: 600;
        }

        #mytga_LogRegBody a { 
            color			: #fff;
            transition		: all 0.5s 
        } 
        #mytga_LogRegBody a:hover { 
            color			: #FF3825 
        }

        #mytga_LogRegBody .qComment { 
            font-size		: 12px; 
            line-height		: 1.3
        }


        /* Headlines */
			
        #mytga_LogRegBody h1, #mytga_LogRegBody .qLikeH1,
        #mytga_LogRegBody h2, #mytga_LogRegBody .qLikeH2 {
            -webkit-hyphens	: manual;
            hyphens			: manual;
            letter-spacing	: -0.02em;
        }

        #mytga_LogRegBody h1, #mytga_LogRegBody .qLikeH1 {
            font			: normal 400 55px/1.3 'Fira Sans', sans-serif;
            text-align		: center;
        }
			
        #mytga_LogRegBody h2, #mytga_LogRegBody .qLikeH2 {
            margin-top		: 0;
            font			: normal 400 28px/1.3 'Fira Sans', sans-serif;				
        }


        @media only screen and (max-width: 420px) {
            #mytga_LogRegBody h1, #mytga_LogRegBody .qLikeH1,
            #mytga_LogRegBody h2, #mytga_LogRegBody .qLikeH2 {
                -webkit-hyphens	: auto;
                hyphens			: auto;
            }
        }


        /* Seitenaufbau */

        #mytga_LogRegBody .qMasterContainer {
            max-width		: 1920px;
            margin-left		: auto;
            margin-right	: auto;  
        }
			
        #mytga_LogRegBody .qContainer {
            position		: relative;
            width			: 100%;
            max-width		: 1140px;
            margin-left		: auto;
            margin-right	: auto;
            padding			: 0 30px;
        }

        @media only screen and (max-width: 420px) {
            #mytga_LogRegBody .qContainer { padding: 0 20px }
        }


        /* Grid */

        #mytga_LogRegBody .qGrid66,
        #mytga_LogRegBody .qGrid444 {
            display		: -ms-grid;
            display		: grid;
            column-gap	: 3%;
            row-gap		: 30px;
        }

        #mytga_LogRegBody .qGrid66		{ grid-template-columns: 1fr 1fr }
        #mytga_LogRegBody .qGrid444 	{ grid-template-columns: 1fr 1fr 1fr }
			
        /* 2 + 3  columns */
        @media only screen and (max-width: 660px) {
            #mytga_LogRegBody .qGrid66,
            #mytga_LogRegBody .qGrid444 { 
                display			: block;
                margin-bottom	: 30px; 
            }
            #mytga_LogRegBody .qGrid66 .qCol,
            #mytga_LogRegBody .qGrid444 .qCol {
                margin			: 40px 0;
            }
        }


        /* Tabs */

        .mytga_tabNav	{ 
            margin			: 6em 0;
        }
        .mytga_tabNav ul { 
            width			: 100%; 
            list-style		: none; 	
            padding			: 0; 
            margin			: 0;
            column-gap		: 0 !important;
        }
        .mytga_tabNavBtn {
            display			: block;
            padding			: 15px 10px 12px 10px; 
            border-bottom	: 1px solid #fff;
            cursor			: pointer;
            text-align		: center;
            font-size		: 22px; 
        }
        .mytga_tabNavBtnSelected { 
            border			: 1px solid #fff;
            border-bottom	: none; 
        }
			
        .mytga_tabContent				{ display: none } 
				
        @media only screen and (max-width: 660px) {
            .mytga_tabNav	{ 
                margin-bottom: 0;
            }
            .mytga_tabNav .qGrid66 {  
                display		: -ms-grid;
                display		: grid !important;
            }	
        }
			
        @media only screen and (max-width: 380px) {
            .mytga_tabNavBtn { 
                font-size		: 14px;	
            }
        } 	
		
	
        /* -------------------------------------------------------------------- */
        /* Forms																*/
        /* -------------------------------------------------------------------- */

        input.mytga_Error,
        select.mytga_Error {
            background: red !important;
        }

        .mytga_LogRegForm label {
            display			: block;
            margin-bottom	: 3px;
        }

        .mytga_LogRegForm input,
        .mytga_LogRegForm select {
            display			: block;
            width			: 100%;
            height			: 48px;
            padding			: 12px;
            border-radius	: 5px;
            margin-bottom	: 1em;
            border			: none;
            background		: rgba(255, 255, 255, 0.5);
            box-shadow		: none;
            font			: normal 400 16px/1.5 'Fira Sans', sans-serif;
            color			: #fff;
        }

        .mytga_LogRegForm select option {
            color			: #000;
        }

        .mytga_LogRegForm input::placeholder {
            color			: rgba(255, 255, 255, 0.5);
        }

        .mytga_LogRegForm input[type=radio] {
            display			: block;
            height			: 25px;
            margin			: 15px auto 0 auto;
            accent-color	: #792273
        }

        .mytga_registerAddressZipCityContainer,
        .mytga_registerAddressSalTitleContainer {
            display		: -ms-grid;
            display		: grid;
            column-gap	: 5px;			
        }
        .mytga_registerAddressZipCityContainer 	{ grid-template-columns: 75px 1fr }
        .mytga_registerAddressSalTitleContainer	{ grid-template-columns: 150px 1fr }

        .mytga_LogRegForm .qButtonE2 {
            display			: block;
            margin			: 4em auto;
            padding			: 12px 20px;
            font			: normal 500 16px/1.5 'Fira Sans', sans-serif;
            color			: #fff;
            border			: 1px solid #fff;
            text-decoration	: none; 			
            text-transform	: uppercase;
            text-align		: center;
            border-radius	: 10px;
            transition		: all 0.3s;
        }

        .mytga_LogRegForm .qButtonE2:hover { 
            background		: rgba(255, 255, 255, 0.25);
            color			: #fff !important;
        }


        /* styled checkBoxes */

        .mytga_LogRegForm .styledCheckboxContainer {
            display			: -ms-grid;
            display			: grid;
            column-gap		: 0;
            grid-template-columns: 45px 1fr;
            margin-top		: 2em;
            margin-bottom	: 2em;
        }

        .mytga_LogRegForm .styledCheckbox  { 
            display			: inline-block;
            position		: relative;
            width			: 24px;
            height			: 24px;
            margin			: 0 20px -5px 0;
        }
        .mytga_LogRegForm .styledCheckbox label {
            width			: 24px;
            height			: 24px;
            cursor			: pointer;
            position		: absolute;
            top				: 0;
            left			: 0;
            background		: rgba(255, 255, 255, 0.5);
            border-radius	: 5px;
        }
        .mytga_LogRegForm .styledCheckbox label::after {
            content			: '';
            width			: 9px;
            height			: 5px;
            position		: absolute;
            top				: 6px;
            left			: 6px;
            border			: 3px solid #fff;
            border-top		: none;
            border-right	: none;
            background		: transparent;
            opacity			: 0;
            -webkit-transform: rotate(-45deg);
            transform		: rotate(-45deg);
        }
        .mytga_LogRegForm .styledCheckbox label:hover::after 							{ opacity: 0.3 }
        .mytga_LogRegForm .styledCheckbox input[type=checkbox] 							{ visibility: hidden }
        .mytga_LogRegForm .styledCheckbox input[type=checkbox]:checked + label::after 	{ opacity: 1 }




        /* -------------------------------------------------------------------- */
        /* Register-Form														*/
        /* -------------------------------------------------------------------- */
		

        #mytga_RegisterForm section {
            padding-top		: 30px;
            padding-bottom	: 30px;
        }

        @media only screen and (max-width: 660px) {
            #mytga_RegisterForm section {
                padding-top		: 10px;
                padding-bottom	: 10px;
            }
        }


        /* Firma / Login / Adresse */
        #mytga_registerPublishAdrContainer {
            margin-top	: 5.4em;
        }
			
			
        /* Pakete */

        #mytga_RegisterPlanSect h2,
        #mytga_RegisterPlanSect .qComment {
            margin-left		: 28%;
        }

        @media only screen and (max-width: 960px) {
            #mytga_RegisterPlanSect h2,
            #mytga_RegisterPlanSect .qComment {
                margin-left	: 0
            }
        }


        /* Tabelle */

        #mytga_registerPlanTab {
            margin			: 2em 0;
            border-spacing	: 0;
            width			: 100%;
        }

        #mytga_registerPlanTab tr {
            display			: -ms-grid;
            display			: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
            column-gap		: 15px;
        }

        /* hide second cell - for responsive */
        #mytga_registerPlanTab th:nth-child(2),
        #mytga_registerPlanTab td:nth-child(2) {
            display			: none;
        }

        #mytga_registerPlanTab th:not(th:nth-child(1)) {
            padding			: 30px 10px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            background		: #fff;
            font-size		: 24px;
            font-weight		: 500;
            color			: #000;
            text-align		: center;
            cursor			: pointer;
        }

        #mytga_registerPlanTab th span {
            display			: block;
            color			: #792273;
            text-transform	: uppercase;
        }
			
        #mytga_registerPlanTab td {
            padding			: 15px 10px;
            border-top		: 1px solid #792273;			
        }

        #mytga_registerPlanTab td:first-child {
            border-color	: #fff;
            padding-left	: 0;
        }
        #mytga_registerPlanTab td:last-child {
            border			: none
        }

        #mytga_registerPlanTab td:not(td:nth-child(1)) {
            background		: #fff;
            color			: #000;
            text-align		: center;
        }

        #preiseTabPriceRow {
            font-size		: 24px;
            font-weight		: 500;
        }

        #mytga_registerPlanTab tr:last-child td:not(td:nth-child(1)) {
            padding-bottom	: 30px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        /* set 1. row for description text in last column */
        #mytga_registerPlanTab tr:nth-child(2) td {
            z-index			: 1;
            height			: 55px;
            overflow		: visible;
        }


        #mytga_registerPlanTab a 		{ color: #FF3825; text-decoration: none }
        #mytga_registerPlanTab a:hover 	{ color: #000 }


        /* extend 1. row for longer label */
        @media only screen and (max-width: 960px) {
            #mytga_registerPlanTab tr {
                column-gap	: 10px
            }
            #mytga_registerPlanTab tr:nth-child(2) td {
                height		: 80px
            }
        }

        /* rebuild table */
        @media only screen and (max-width: 675px) {
            #mytga_registerPlanTab tr {
                grid-template-columns: 1fr 1fr 1fr 1fr;
            }
            #mytga_registerPlanTab tr:first-child th:first-child {
                display		: none
            }
            #mytga_registerPlanTab td:nth-child(2) {
                display		: block;
            }
            #mytga_registerPlanTab th:not(th:nth-child(1)) {
                padding		: 30px 5px;
                font-size	: 20px;
            }
            #mytga_registerPlanTab td:first-child {
                grid-column	: 1 / span 3;
                height		: auto !important;
                padding		: 15px 0 5px 0;
                border		: none;
            }
            #mytga_registerPlanTab td {
                border		: none;
            }
            #mytga_registerPlanTab tr:nth-child(2) td {
                height		: 45px;
            }
            #mytga_registerPlanTab tr:last-child td:nth-child(2) {
                border-bottom-left-radius : 0 !important;
                border-bottom-right-radius: 0 !important;
            }
        }

        @media only screen and (max-width: 480px) {
            #mytga_registerPlanTab tr { column-gap: 2px }
            #mytga_registerPlanTab th { font-size: 18px !important }
            #mytga_registerPlanTab td { font-size: 14px }
            #mytga_registerPlanTab tr:nth-child(2) td { font-size: 12px }
        }


        /* Payment */

        #mytga_registerPaymentSect {
            max-width		: 550px;
            margin-left		: 28%;
        }

        #mytga_registerPaymentSepaSect {
            display			: none;
        }


        @media only screen and (max-width: 675px) {
            #mytga_registerPaymentSect {
                margin-left	: 0;
            }
        }


        /* Legal */

        #mytga_registerTermsSect {
            max-width		: 550px;
            margin-left		: 28%;
            padding-bottom	: 60px;
        }


        @media only screen and (max-width: 675px) {
            #mytga_registerTermsSect {
                margin-left	: 0;
            }
        }

        /* Messages */

        /* (A) BACKGROUND */
        #boxBack {
            /* (A1) FULLSCREEN */
            position: fixed;
            z-index: 999;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            /* (A2) TRANSPARENT BACKGROUND */
            background: rgba(0, 0, 0, 0.5);
            /* (A3) HIDDEN BY DEFAULT */
            display: none;
        }

        /* (A4) ADD THIS CSS CLASS TO SHOW */
        #boxBack.show {
            display: block;
        }

        /* (B) DIALOG BOX */
        #boxWrap {
            /* (B1) CENTER ON SCREEN */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* (B2) DIMENSIONS */
            min-width: 320px;
            max-width: 600px;
            padding: 10px;
            /* (B3) COLORS */
            background: #504040;
            border-radius: 5px;
            border: none;
        }

            #boxWrap input {
                display: block;
                width: 100%;
                height: 48px;
                padding: 4px;
                border-radius: 5px;
                /*margin-bottom: 1em;*/
                border: none;
                background: rgba(255, 255, 255, 0.5);
                box-shadow: none;
                font: normal 400 16px/1.5 'Fira Sans', sans-serif;
                color: #fff;
                margin-top: 20px;
}